@theme-ui/mdx - npm Package Compare versions

Comparing version 0.4.0-rc.13 to 0.5.0-alpha.0

dist/index.esm.js

@@ -1,4 +0,3 @@
-import { jsx as jsx$1 } from '@emotion/core';
-import { createContext } from 'react';
-import packageInfo from '@emotion/core/package.json';
+import { jsx } from '@theme-ui/core';
+import { css, get } from '@theme-ui/css';
 import styled from '@emotion/styled';
@@ -25,348 +24,2 @@ import { useMDXComponents, MDXProvider as MDXProvider$1 } from '@mdx-js/react';
 
-function _extends$1() {
-  _extends$1 = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends$1.apply(this, arguments);
-}
-
-function get(obj, key, def, p, undef) {
-  var path = key && typeof key === 'string' ? key.split('.') : [key];
-
-  for (p = 0; p < path.length; p++) {
-    obj = obj ? obj[path[p]] : undef;
-  }
-
-  return obj === undef ? def : obj;
-}
-
-var defaultBreakpoints = [40, 52, 64].map(function (n) {
-  return n + 'em';
-});
-var defaultTheme = {
-  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
-  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72]
-};
-var aliases = {
-  bg: 'backgroundColor',
-  m: 'margin',
-  mt: 'marginTop',
-  mr: 'marginRight',
-  mb: 'marginBottom',
-  ml: 'marginLeft',
-  mx: 'marginX',
-  my: 'marginY',
-  p: 'padding',
-  pt: 'paddingTop',
-  pr: 'paddingRight',
-  pb: 'paddingBottom',
-  pl: 'paddingLeft',
-  px: 'paddingX',
-  py: 'paddingY'
-};
-var multiples = {
-  marginX: ['marginLeft', 'marginRight'],
-  marginY: ['marginTop', 'marginBottom'],
-  paddingX: ['paddingLeft', 'paddingRight'],
-  paddingY: ['paddingTop', 'paddingBottom'],
-  scrollPaddingX: ['scrollPaddingLeft', 'scrollPaddingRight'],
-  scrollPaddingY: ['scrollPaddingTop', 'scrollPaddingBottom'],
-  size: ['width', 'height']
-};
-var scales = {
-  color: 'colors',
-  backgroundColor: 'colors',
-  borderColor: 'colors',
-  caretColor: 'colors',
-  columnRuleColor: 'colors',
-  opacity: 'opacities',
-  transition: 'transitions',
-  margin: 'space',
-  marginTop: 'space',
-  marginRight: 'space',
-  marginBottom: 'space',
-  marginLeft: 'space',
-  marginX: 'space',
-  marginY: 'space',
-  marginBlock: 'space',
-  marginBlockEnd: 'space',
-  marginBlockStart: 'space',
-  marginInline: 'space',
-  marginInlineEnd: 'space',
-  marginInlineStart: 'space',
-  padding: 'space',
-  paddingTop: 'space',
-  paddingRight: 'space',
-  paddingBottom: 'space',
-  paddingLeft: 'space',
-  paddingX: 'space',
-  paddingY: 'space',
-  paddingBlock: 'space',
-  paddingBlockEnd: 'space',
-  paddingBlockStart: 'space',
-  paddingInline: 'space',
-  paddingInlineEnd: 'space',
-  paddingInlineStart: 'space',
-  scrollPadding: 'space',
-  scrollPaddingTop: 'space',
-  scrollPaddingRight: 'space',
-  scrollPaddingBottom: 'space',
-  scrollPaddingLeft: 'space',
-  scrollPaddingX: 'space',
-  scrollPaddingY: 'space',
-  inset: 'space',
-  insetBlock: 'space',
-  insetBlockEnd: 'space',
-  insetBlockStart: 'space',
-  insetInline: 'space',
-  insetInlineEnd: 'space',
-  insetInlineStart: 'space',
-  top: 'space',
-  right: 'space',
-  bottom: 'space',
-  left: 'space',
-  gridGap: 'space',
-  gridColumnGap: 'space',
-  gridRowGap: 'space',
-  gap: 'space',
-  columnGap: 'space',
-  rowGap: 'space',
-  fontFamily: 'fonts',
-  fontSize: 'fontSizes',
-  fontWeight: 'fontWeights',
-  lineHeight: 'lineHeights',
-  letterSpacing: 'letterSpacings',
-  border: 'borders',
-  borderTop: 'borders',
-  borderRight: 'borders',
-  borderBottom: 'borders',
-  borderLeft: 'borders',
-  borderWidth: 'borderWidths',
-  borderStyle: 'borderStyles',
-  borderRadius: 'radii',
-  borderTopRightRadius: 'radii',
-  borderTopLeftRadius: 'radii',
-  borderBottomRightRadius: 'radii',
-  borderBottomLeftRadius: 'radii',
-  borderTopWidth: 'borderWidths',
-  borderTopColor: 'colors',
-  borderTopStyle: 'borderStyles',
-  borderBottomWidth: 'borderWidths',
-  borderBottomColor: 'colors',
-  borderBottomStyle: 'borderStyles',
-  borderLeftWidth: 'borderWidths',
-  borderLeftColor: 'colors',
-  borderLeftStyle: 'borderStyles',
-  borderRightWidth: 'borderWidths',
-  borderRightColor: 'colors',
-  borderRightStyle: 'borderStyles',
-  borderBlock: 'borders',
-  borderBlockEnd: 'borders',
-  borderBlockEndStyle: 'borderStyles',
-  borderBlockEndWidth: 'borderWidths',
-  borderBlockStart: 'borders',
-  borderBlockStartStyle: 'borderStyles',
-  borderBlockStartWidth: 'borderWidths',
-  borderBlockStyle: 'borderStyles',
-  borderBlockWidth: 'borderWidths',
-  borderEndEndRadius: 'radii',
-  borderEndStartRadius: 'radii',
-  borderInline: 'borders',
-  borderInlineEnd: 'borders',
-  borderInlineEndStyle: 'borderStyles',
-  borderInlineEndWidth: 'borderWidths',
-  borderInlineStart: 'borders',
-  borderInlineStartStyle: 'borderStyles',
-  borderInlineStartWidth: 'borderWidths',
-  borderInlineStyle: 'borderStyles',
-  borderInlineWidth: 'borderWidths',
-  borderStartEndRadius: 'radii',
-  borderStartStartRadius: 'radii',
-  outlineColor: 'colors',
-  boxShadow: 'shadows',
-  textShadow: 'shadows',
-  zIndex: 'zIndices',
-  width: 'sizes',
-  minWidth: 'sizes',
-  maxWidth: 'sizes',
-  height: 'sizes',
-  minHeight: 'sizes',
-  maxHeight: 'sizes',
-  flexBasis: 'sizes',
-  size: 'sizes',
-  blockSize: 'sizes',
-  inlineSize: 'sizes',
-  maxBlockSize: 'sizes',
-  maxInlineSize: 'sizes',
-  minBlockSize: 'sizes',
-  minInlineSize: 'sizes',
-  // svg
-  fill: 'colors',
-  stroke: 'colors'
-};
-
-var positiveOrNegative = function positiveOrNegative(scale, value) {
-  if (typeof value !== 'number' || value >= 0) {
-    if (typeof value === 'string' && value.startsWith('-')) {
-      var valueWithoutMinus = value.substring(1);
-
-      var _n = get(scale, valueWithoutMinus, valueWithoutMinus);
-
-      return "-" + _n;
-    }
-
-    return get(scale, value, value);
-  }
-
-  var absolute = Math.abs(value);
-  var n = get(scale, absolute, absolute);
-  if (typeof n === 'string') return '-' + n;
-  return Number(n) * -1;
-};
-
-var transforms = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginBlock', 'marginBlockEnd', 'marginBlockStart', 'marginInline', 'marginInlineEnd', 'marginInlineStart', 'top', 'bottom', 'left', 'right'].reduce(function (acc, curr) {
-  var _extends2;
-
-  return _extends$1({}, acc, (_extends2 = {}, _extends2[curr] = positiveOrNegative, _extends2));
-}, {});
-
-var responsive = function responsive(styles) {
-  return function (theme) {
-    var next = {};
-    var breakpoints = theme && theme.breakpoints || defaultBreakpoints;
-    var mediaQueries = [null].concat(breakpoints.map(function (n) {
-      return "@media screen and (min-width: " + n + ")";
-    }));
-
-    for (var k in styles) {
-      var key = k;
-      var value = styles[key];
-
-      if (typeof value === 'function') {
-        value = value(theme || {});
-      }
-
-      if (value == null) continue;
-
-      if (!Array.isArray(value)) {
-        next[key] = value;
-        continue;
-      }
-
-      for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
-        var media = mediaQueries[i];
-
-        if (!media) {
-          next[key] = value[i];
-          continue;
-        }
-
-        next[media] = next[media] || {};
-        if (value[i] == null) continue;
-        next[media][key] = value[i];
-      }
-    }
-
-    return next;
-  };
-};
-
-var css = function css(args) {
-  if (args === void 0) {
-    args = {};
-  }
-
-  return function (props) {
-    if (props === void 0) {
-      props = {};
-    }
-
-    var theme = _extends$1({}, defaultTheme, 'theme' in props ? props.theme : props);
-
-    var result = {};
-    var obj = typeof args === 'function' ? args(theme) : args;
-    var styles = responsive(obj)(theme);
-
-    for (var key in styles) {
-      var x = styles[key];
-      var val = typeof x === 'function' ? x(theme) : x;
-
-      if (key === 'variant') {
-        var variant = css(get(theme, val))(theme);
-        result = _extends$1({}, result, variant);
-        continue;
-      }
-
-      if (val && typeof val === 'object') {
-        // TODO: val can also be an array here. Is this a bug? Can it be reproduced?
-        result[key] = css(val)(theme);
-        continue;
-      }
-
-      var prop = key in aliases ? aliases[key] : key;
-      var scaleName = prop in scales ? scales[prop] : undefined;
-      var scale = get(theme, scaleName, get(theme, prop, {}));
-      var transform = get(transforms, prop, get);
-      var value = transform(scale, val, val);
-
-      if (prop in multiples) {
-        var dirs = multiples[prop];
-
-        for (var i = 0; i < dirs.length; i++) {
-          result[dirs[i]] = value;
-        }
-      } else {
-        result[prop] = value;
-      }
-    }
-
-    return result;
-  };
-};
-
-var __EMOTION_VERSION__ = packageInfo.version;
-
-var getCSS = function getCSS(props) {
-  if (!props.sx && !props.css) return undefined;
-  return function (theme) {
-    var styles = css(props.sx)(theme);
-    var raw = typeof props.css === 'function' ? props.css(theme) : props.css;
-    return [styles, raw];
-  };
-};
-
-var parseProps = function parseProps(props) {
-  if (!props) return null;
-  var next = {};
-
-  for (var key in props) {
-    if (key === 'sx') continue;
-    next[key] = props[key];
-  }
-
-  var css = getCSS(props);
-  if (css) next.css = css;
-  return next;
-};
-
-var jsx = function jsx(type, props) {
-  return jsx$1.apply(undefined, [type, parseProps(props)].concat([].slice.call(arguments, 2)));
-};
-
-var Context = createContext({
-  __EMOTION_VERSION__: __EMOTION_VERSION__,
-  theme: {}
-});
-
 var tags = ['p', 'b', 'i', 'a', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'img', 'pre', 'code', 'ol', 'ul', 'li', 'blockquote', 'hr', 'em', 'table', 'tr', 'th', 'td', 'em', 'strong', 'del', // mdx
@@ -376,3 +29,3 @@ 'inlineCode', 'thematicBreak', // other
 'root'];
-var aliases$1 = {
+var aliases = {
   inlineCode: 'code',
@@ -384,7 +37,7 @@ thematicBreak: 'hr',
 var isAlias = function isAlias(x) {
-  return x in aliases$1;
+  return x in aliases;
 };
 
 var alias = function alias(n) {
-  return isAlias(n) ? aliases$1[n] : n;
+  return isAlias(n) ? aliases[n] : n;
 };
@@ -391,0 +44,0 @@

dist/index.js

 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-var core = require('@emotion/core');
-var react = require('react');
-var packageInfo = _interopDefault(require('@emotion/core/package.json'));
+var core = require('@theme-ui/core');
+var css = require('@theme-ui/css');
 var styled = _interopDefault(require('@emotion/styled'));
-var react$1 = require('@mdx-js/react');
+var react = require('@mdx-js/react');
 
@@ -27,348 +26,2 @@ function _extends() {
 
-function _extends$1() {
-  _extends$1 = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends$1.apply(this, arguments);
-}
-
-function get(obj, key, def, p, undef) {
-  var path = key && typeof key === 'string' ? key.split('.') : [key];
-
-  for (p = 0; p < path.length; p++) {
-    obj = obj ? obj[path[p]] : undef;
-  }
-
-  return obj === undef ? def : obj;
-}
-
-var defaultBreakpoints = [40, 52, 64].map(function (n) {
-  return n + 'em';
-});
-var defaultTheme = {
-  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
-  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72]
-};
-var aliases = {
-  bg: 'backgroundColor',
-  m: 'margin',
-  mt: 'marginTop',
-  mr: 'marginRight',
-  mb: 'marginBottom',
-  ml: 'marginLeft',
-  mx: 'marginX',
-  my: 'marginY',
-  p: 'padding',
-  pt: 'paddingTop',
-  pr: 'paddingRight',
-  pb: 'paddingBottom',
-  pl: 'paddingLeft',
-  px: 'paddingX',
-  py: 'paddingY'
-};
-var multiples = {
-  marginX: ['marginLeft', 'marginRight'],
-  marginY: ['marginTop', 'marginBottom'],
-  paddingX: ['paddingLeft', 'paddingRight'],
-  paddingY: ['paddingTop', 'paddingBottom'],
-  scrollPaddingX: ['scrollPaddingLeft', 'scrollPaddingRight'],
-  scrollPaddingY: ['scrollPaddingTop', 'scrollPaddingBottom'],
-  size: ['width', 'height']
-};
-var scales = {
-  color: 'colors',
-  backgroundColor: 'colors',
-  borderColor: 'colors',
-  caretColor: 'colors',
-  columnRuleColor: 'colors',
-  opacity: 'opacities',
-  transition: 'transitions',
-  margin: 'space',
-  marginTop: 'space',
-  marginRight: 'space',
-  marginBottom: 'space',
-  marginLeft: 'space',
-  marginX: 'space',
-  marginY: 'space',
-  marginBlock: 'space',
-  marginBlockEnd: 'space',
-  marginBlockStart: 'space',
-  marginInline: 'space',
-  marginInlineEnd: 'space',
-  marginInlineStart: 'space',
-  padding: 'space',
-  paddingTop: 'space',
-  paddingRight: 'space',
-  paddingBottom: 'space',
-  paddingLeft: 'space',
-  paddingX: 'space',
-  paddingY: 'space',
-  paddingBlock: 'space',
-  paddingBlockEnd: 'space',
-  paddingBlockStart: 'space',
-  paddingInline: 'space',
-  paddingInlineEnd: 'space',
-  paddingInlineStart: 'space',
-  scrollPadding: 'space',
-  scrollPaddingTop: 'space',
-  scrollPaddingRight: 'space',
-  scrollPaddingBottom: 'space',
-  scrollPaddingLeft: 'space',
-  scrollPaddingX: 'space',
-  scrollPaddingY: 'space',
-  inset: 'space',
-  insetBlock: 'space',
-  insetBlockEnd: 'space',
-  insetBlockStart: 'space',
-  insetInline: 'space',
-  insetInlineEnd: 'space',
-  insetInlineStart: 'space',
-  top: 'space',
-  right: 'space',
-  bottom: 'space',
-  left: 'space',
-  gridGap: 'space',
-  gridColumnGap: 'space',
-  gridRowGap: 'space',
-  gap: 'space',
-  columnGap: 'space',
-  rowGap: 'space',
-  fontFamily: 'fonts',
-  fontSize: 'fontSizes',
-  fontWeight: 'fontWeights',
-  lineHeight: 'lineHeights',
-  letterSpacing: 'letterSpacings',
-  border: 'borders',
-  borderTop: 'borders',
-  borderRight: 'borders',
-  borderBottom: 'borders',
-  borderLeft: 'borders',
-  borderWidth: 'borderWidths',
-  borderStyle: 'borderStyles',
-  borderRadius: 'radii',
-  borderTopRightRadius: 'radii',
-  borderTopLeftRadius: 'radii',
-  borderBottomRightRadius: 'radii',
-  borderBottomLeftRadius: 'radii',
-  borderTopWidth: 'borderWidths',
-  borderTopColor: 'colors',
-  borderTopStyle: 'borderStyles',
-  borderBottomWidth: 'borderWidths',
-  borderBottomColor: 'colors',
-  borderBottomStyle: 'borderStyles',
-  borderLeftWidth: 'borderWidths',
-  borderLeftColor: 'colors',
-  borderLeftStyle: 'borderStyles',
-  borderRightWidth: 'borderWidths',
-  borderRightColor: 'colors',
-  borderRightStyle: 'borderStyles',
-  borderBlock: 'borders',
-  borderBlockEnd: 'borders',
-  borderBlockEndStyle: 'borderStyles',
-  borderBlockEndWidth: 'borderWidths',
-  borderBlockStart: 'borders',
-  borderBlockStartStyle: 'borderStyles',
-  borderBlockStartWidth: 'borderWidths',
-  borderBlockStyle: 'borderStyles',
-  borderBlockWidth: 'borderWidths',
-  borderEndEndRadius: 'radii',
-  borderEndStartRadius: 'radii',
-  borderInline: 'borders',
-  borderInlineEnd: 'borders',
-  borderInlineEndStyle: 'borderStyles',
-  borderInlineEndWidth: 'borderWidths',
-  borderInlineStart: 'borders',
-  borderInlineStartStyle: 'borderStyles',
-  borderInlineStartWidth: 'borderWidths',
-  borderInlineStyle: 'borderStyles',
-  borderInlineWidth: 'borderWidths',
-  borderStartEndRadius: 'radii',
-  borderStartStartRadius: 'radii',
-  outlineColor: 'colors',
-  boxShadow: 'shadows',
-  textShadow: 'shadows',
-  zIndex: 'zIndices',
-  width: 'sizes',
-  minWidth: 'sizes',
-  maxWidth: 'sizes',
-  height: 'sizes',
-  minHeight: 'sizes',
-  maxHeight: 'sizes',
-  flexBasis: 'sizes',
-  size: 'sizes',
-  blockSize: 'sizes',
-  inlineSize: 'sizes',
-  maxBlockSize: 'sizes',
-  maxInlineSize: 'sizes',
-  minBlockSize: 'sizes',
-  minInlineSize: 'sizes',
-  // svg
-  fill: 'colors',
-  stroke: 'colors'
-};
-
-var positiveOrNegative = function positiveOrNegative(scale, value) {
-  if (typeof value !== 'number' || value >= 0) {
-    if (typeof value === 'string' && value.startsWith('-')) {
-      var valueWithoutMinus = value.substring(1);
-
-      var _n = get(scale, valueWithoutMinus, valueWithoutMinus);
-
-      return "-" + _n;
-    }
-
-    return get(scale, value, value);
-  }
-
-  var absolute = Math.abs(value);
-  var n = get(scale, absolute, absolute);
-  if (typeof n === 'string') return '-' + n;
-  return Number(n) * -1;
-};
-
-var transforms = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginBlock', 'marginBlockEnd', 'marginBlockStart', 'marginInline', 'marginInlineEnd', 'marginInlineStart', 'top', 'bottom', 'left', 'right'].reduce(function (acc, curr) {
-  var _extends2;
-
-  return _extends$1({}, acc, (_extends2 = {}, _extends2[curr] = positiveOrNegative, _extends2));
-}, {});
-
-var responsive = function responsive(styles) {
-  return function (theme) {
-    var next = {};
-    var breakpoints = theme && theme.breakpoints || defaultBreakpoints;
-    var mediaQueries = [null].concat(breakpoints.map(function (n) {
-      return "@media screen and (min-width: " + n + ")";
-    }));
-
-    for (var k in styles) {
-      var key = k;
-      var value = styles[key];
-
-      if (typeof value === 'function') {
-        value = value(theme || {});
-      }
-
-      if (value == null) continue;
-
-      if (!Array.isArray(value)) {
-        next[key] = value;
-        continue;
-      }
-
-      for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
-        var media = mediaQueries[i];
-
-        if (!media) {
-          next[key] = value[i];
-          continue;
-        }
-
-        next[media] = next[media] || {};
-        if (value[i] == null) continue;
-        next[media][key] = value[i];
-      }
-    }
-
-    return next;
-  };
-};
-
-var css = function css(args) {
-  if (args === void 0) {
-    args = {};
-  }
-
-  return function (props) {
-    if (props === void 0) {
-      props = {};
-    }
-
-    var theme = _extends$1({}, defaultTheme, 'theme' in props ? props.theme : props);
-
-    var result = {};
-    var obj = typeof args === 'function' ? args(theme) : args;
-    var styles = responsive(obj)(theme);
-
-    for (var key in styles) {
-      var x = styles[key];
-      var val = typeof x === 'function' ? x(theme) : x;
-
-      if (key === 'variant') {
-        var variant = css(get(theme, val))(theme);
-        result = _extends$1({}, result, variant);
-        continue;
-      }
-
-      if (val && typeof val === 'object') {
-        // TODO: val can also be an array here. Is this a bug? Can it be reproduced?
-        result[key] = css(val)(theme);
-        continue;
-      }
-
-      var prop = key in aliases ? aliases[key] : key;
-      var scaleName = prop in scales ? scales[prop] : undefined;
-      var scale = get(theme, scaleName, get(theme, prop, {}));
-      var transform = get(transforms, prop, get);
-      var value = transform(scale, val, val);
-
-      if (prop in multiples) {
-        var dirs = multiples[prop];
-
-        for (var i = 0; i < dirs.length; i++) {
-          result[dirs[i]] = value;
-        }
-      } else {
-        result[prop] = value;
-      }
-    }
-
-    return result;
-  };
-};
-
-var __EMOTION_VERSION__ = packageInfo.version;
-
-var getCSS = function getCSS(props) {
-  if (!props.sx && !props.css) return undefined;
-  return function (theme) {
-    var styles = css(props.sx)(theme);
-    var raw = typeof props.css === 'function' ? props.css(theme) : props.css;
-    return [styles, raw];
-  };
-};
-
-var parseProps = function parseProps(props) {
-  if (!props) return null;
-  var next = {};
-
-  for (var key in props) {
-    if (key === 'sx') continue;
-    next[key] = props[key];
-  }
-
-  var css = getCSS(props);
-  if (css) next.css = css;
-  return next;
-};
-
-var jsx = function jsx(type, props) {
-  return core.jsx.apply(undefined, [type, parseProps(props)].concat([].slice.call(arguments, 2)));
-};
-
-var Context = react.createContext({
-  __EMOTION_VERSION__: __EMOTION_VERSION__,
-  theme: {}
-});
-
 var tags = ['p', 'b', 'i', 'a', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'img', 'pre', 'code', 'ol', 'ul', 'li', 'blockquote', 'hr', 'em', 'table', 'tr', 'th', 'td', 'em', 'strong', 'del', // mdx
@@ -378,3 +31,3 @@ 'inlineCode', 'thematicBreak', // other
 'root'];
-var aliases$1 = {
+var aliases = {
   inlineCode: 'code',
@@ -386,7 +39,7 @@ thematicBreak: 'hr',
 var isAlias = function isAlias(x) {
-  return x in aliases$1;
+  return x in aliases;
 };
 
 var alias = function alias(n) {
-  return isAlias(n) ? aliases$1[n] : n;
+  return isAlias(n) ? aliases[n] : n;
 };
@@ -396,3 +49,3 @@
   return function (props) {
-    return css(get(props.theme, "styles." + key))(props.theme);
+    return css.css(css.get(props.theme, "styles." + key))(props.theme);
   };
@@ -421,4 +74,4 @@ };
       children = _ref.children;
-  var outer = react$1.useMDXComponents();
-  return jsx(react$1.MDXProvider, {
+  var outer = react.useMDXComponents();
+  return core.jsx(react.MDXProvider, {
     components: createComponents(_extends({}, outer, components)),
@@ -425,0 +78,0 @@ children: children

dist/index.modern.js

@@ -1,4 +0,3 @@
-import { jsx as jsx$1 } from '@emotion/core';
-import { createContext } from 'react';
-import packageInfo from '@emotion/core/package.json';
+import { jsx } from '@theme-ui/core';
+import { css, get } from '@theme-ui/css';
 import styled from '@emotion/styled';
@@ -25,348 +24,2 @@ import { useMDXComponents, MDXProvider as MDXProvider$1 } from '@mdx-js/react';
 
-function _extends$1() {
-  _extends$1 = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends$1.apply(this, arguments);
-}
-
-function get(obj, key, def, p, undef) {
-  var path = key && typeof key === 'string' ? key.split('.') : [key];
-
-  for (p = 0; p < path.length; p++) {
-    obj = obj ? obj[path[p]] : undef;
-  }
-
-  return obj === undef ? def : obj;
-}
-
-var defaultBreakpoints = [40, 52, 64].map(function (n) {
-  return n + 'em';
-});
-var defaultTheme = {
-  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
-  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72]
-};
-var aliases = {
-  bg: 'backgroundColor',
-  m: 'margin',
-  mt: 'marginTop',
-  mr: 'marginRight',
-  mb: 'marginBottom',
-  ml: 'marginLeft',
-  mx: 'marginX',
-  my: 'marginY',
-  p: 'padding',
-  pt: 'paddingTop',
-  pr: 'paddingRight',
-  pb: 'paddingBottom',
-  pl: 'paddingLeft',
-  px: 'paddingX',
-  py: 'paddingY'
-};
-var multiples = {
-  marginX: ['marginLeft', 'marginRight'],
-  marginY: ['marginTop', 'marginBottom'],
-  paddingX: ['paddingLeft', 'paddingRight'],
-  paddingY: ['paddingTop', 'paddingBottom'],
-  scrollPaddingX: ['scrollPaddingLeft', 'scrollPaddingRight'],
-  scrollPaddingY: ['scrollPaddingTop', 'scrollPaddingBottom'],
-  size: ['width', 'height']
-};
-var scales = {
-  color: 'colors',
-  backgroundColor: 'colors',
-  borderColor: 'colors',
-  caretColor: 'colors',
-  columnRuleColor: 'colors',
-  opacity: 'opacities',
-  transition: 'transitions',
-  margin: 'space',
-  marginTop: 'space',
-  marginRight: 'space',
-  marginBottom: 'space',
-  marginLeft: 'space',
-  marginX: 'space',
-  marginY: 'space',
-  marginBlock: 'space',
-  marginBlockEnd: 'space',
-  marginBlockStart: 'space',
-  marginInline: 'space',
-  marginInlineEnd: 'space',
-  marginInlineStart: 'space',
-  padding: 'space',
-  paddingTop: 'space',
-  paddingRight: 'space',
-  paddingBottom: 'space',
-  paddingLeft: 'space',
-  paddingX: 'space',
-  paddingY: 'space',
-  paddingBlock: 'space',
-  paddingBlockEnd: 'space',
-  paddingBlockStart: 'space',
-  paddingInline: 'space',
-  paddingInlineEnd: 'space',
-  paddingInlineStart: 'space',
-  scrollPadding: 'space',
-  scrollPaddingTop: 'space',
-  scrollPaddingRight: 'space',
-  scrollPaddingBottom: 'space',
-  scrollPaddingLeft: 'space',
-  scrollPaddingX: 'space',
-  scrollPaddingY: 'space',
-  inset: 'space',
-  insetBlock: 'space',
-  insetBlockEnd: 'space',
-  insetBlockStart: 'space',
-  insetInline: 'space',
-  insetInlineEnd: 'space',
-  insetInlineStart: 'space',
-  top: 'space',
-  right: 'space',
-  bottom: 'space',
-  left: 'space',
-  gridGap: 'space',
-  gridColumnGap: 'space',
-  gridRowGap: 'space',
-  gap: 'space',
-  columnGap: 'space',
-  rowGap: 'space',
-  fontFamily: 'fonts',
-  fontSize: 'fontSizes',
-  fontWeight: 'fontWeights',
-  lineHeight: 'lineHeights',
-  letterSpacing: 'letterSpacings',
-  border: 'borders',
-  borderTop: 'borders',
-  borderRight: 'borders',
-  borderBottom: 'borders',
-  borderLeft: 'borders',
-  borderWidth: 'borderWidths',
-  borderStyle: 'borderStyles',
-  borderRadius: 'radii',
-  borderTopRightRadius: 'radii',
-  borderTopLeftRadius: 'radii',
-  borderBottomRightRadius: 'radii',
-  borderBottomLeftRadius: 'radii',
-  borderTopWidth: 'borderWidths',
-  borderTopColor: 'colors',
-  borderTopStyle: 'borderStyles',
-  borderBottomWidth: 'borderWidths',
-  borderBottomColor: 'colors',
-  borderBottomStyle: 'borderStyles',
-  borderLeftWidth: 'borderWidths',
-  borderLeftColor: 'colors',
-  borderLeftStyle: 'borderStyles',
-  borderRightWidth: 'borderWidths',
-  borderRightColor: 'colors',
-  borderRightStyle: 'borderStyles',
-  borderBlock: 'borders',
-  borderBlockEnd: 'borders',
-  borderBlockEndStyle: 'borderStyles',
-  borderBlockEndWidth: 'borderWidths',
-  borderBlockStart: 'borders',
-  borderBlockStartStyle: 'borderStyles',
-  borderBlockStartWidth: 'borderWidths',
-  borderBlockStyle: 'borderStyles',
-  borderBlockWidth: 'borderWidths',
-  borderEndEndRadius: 'radii',
-  borderEndStartRadius: 'radii',
-  borderInline: 'borders',
-  borderInlineEnd: 'borders',
-  borderInlineEndStyle: 'borderStyles',
-  borderInlineEndWidth: 'borderWidths',
-  borderInlineStart: 'borders',
-  borderInlineStartStyle: 'borderStyles',
-  borderInlineStartWidth: 'borderWidths',
-  borderInlineStyle: 'borderStyles',
-  borderInlineWidth: 'borderWidths',
-  borderStartEndRadius: 'radii',
-  borderStartStartRadius: 'radii',
-  outlineColor: 'colors',
-  boxShadow: 'shadows',
-  textShadow: 'shadows',
-  zIndex: 'zIndices',
-  width: 'sizes',
-  minWidth: 'sizes',
-  maxWidth: 'sizes',
-  height: 'sizes',
-  minHeight: 'sizes',
-  maxHeight: 'sizes',
-  flexBasis: 'sizes',
-  size: 'sizes',
-  blockSize: 'sizes',
-  inlineSize: 'sizes',
-  maxBlockSize: 'sizes',
-  maxInlineSize: 'sizes',
-  minBlockSize: 'sizes',
-  minInlineSize: 'sizes',
-  // svg
-  fill: 'colors',
-  stroke: 'colors'
-};
-
-var positiveOrNegative = function positiveOrNegative(scale, value) {
-  if (typeof value !== 'number' || value >= 0) {
-    if (typeof value === 'string' && value.startsWith('-')) {
-      var valueWithoutMinus = value.substring(1);
-
-      var _n = get(scale, valueWithoutMinus, valueWithoutMinus);
-
-      return "-" + _n;
-    }
-
-    return get(scale, value, value);
-  }
-
-  var absolute = Math.abs(value);
-  var n = get(scale, absolute, absolute);
-  if (typeof n === 'string') return '-' + n;
-  return Number(n) * -1;
-};
-
-var transforms = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginBlock', 'marginBlockEnd', 'marginBlockStart', 'marginInline', 'marginInlineEnd', 'marginInlineStart', 'top', 'bottom', 'left', 'right'].reduce(function (acc, curr) {
-  var _extends2;
-
-  return _extends$1({}, acc, (_extends2 = {}, _extends2[curr] = positiveOrNegative, _extends2));
-}, {});
-
-var responsive = function responsive(styles) {
-  return function (theme) {
-    var next = {};
-    var breakpoints = theme && theme.breakpoints || defaultBreakpoints;
-    var mediaQueries = [null].concat(breakpoints.map(function (n) {
-      return "@media screen and (min-width: " + n + ")";
-    }));
-
-    for (var k in styles) {
-      var key = k;
-      var value = styles[key];
-
-      if (typeof value === 'function') {
-        value = value(theme || {});
-      }
-
-      if (value == null) continue;
-
-      if (!Array.isArray(value)) {
-        next[key] = value;
-        continue;
-      }
-
-      for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
-        var media = mediaQueries[i];
-
-        if (!media) {
-          next[key] = value[i];
-          continue;
-        }
-
-        next[media] = next[media] || {};
-        if (value[i] == null) continue;
-        next[media][key] = value[i];
-      }
-    }
-
-    return next;
-  };
-};
-
-var css = function css(args) {
-  if (args === void 0) {
-    args = {};
-  }
-
-  return function (props) {
-    if (props === void 0) {
-      props = {};
-    }
-
-    var theme = _extends$1({}, defaultTheme, 'theme' in props ? props.theme : props);
-
-    var result = {};
-    var obj = typeof args === 'function' ? args(theme) : args;
-    var styles = responsive(obj)(theme);
-
-    for (var key in styles) {
-      var x = styles[key];
-      var val = typeof x === 'function' ? x(theme) : x;
-
-      if (key === 'variant') {
-        var variant = css(get(theme, val))(theme);
-        result = _extends$1({}, result, variant);
-        continue;
-      }
-
-      if (val && typeof val === 'object') {
-        // TODO: val can also be an array here. Is this a bug? Can it be reproduced?
-        result[key] = css(val)(theme);
-        continue;
-      }
-
-      var prop = key in aliases ? aliases[key] : key;
-      var scaleName = prop in scales ? scales[prop] : undefined;
-      var scale = get(theme, scaleName, get(theme, prop, {}));
-      var transform = get(transforms, prop, get);
-      var value = transform(scale, val, val);
-
-      if (prop in multiples) {
-        var dirs = multiples[prop];
-
-        for (var i = 0; i < dirs.length; i++) {
-          result[dirs[i]] = value;
-        }
-      } else {
-        result[prop] = value;
-      }
-    }
-
-    return result;
-  };
-};
-
-var __EMOTION_VERSION__ = packageInfo.version;
-
-var getCSS = function getCSS(props) {
-  if (!props.sx && !props.css) return undefined;
-  return function (theme) {
-    var styles = css(props.sx)(theme);
-    var raw = typeof props.css === 'function' ? props.css(theme) : props.css;
-    return [styles, raw];
-  };
-};
-
-var parseProps = function parseProps(props) {
-  if (!props) return null;
-  var next = {};
-
-  for (var key in props) {
-    if (key === 'sx') continue;
-    next[key] = props[key];
-  }
-
-  var css = getCSS(props);
-  if (css) next.css = css;
-  return next;
-};
-
-var jsx = function jsx(type, props) {
-  return jsx$1.apply(undefined, [type, parseProps(props)].concat([].slice.call(arguments, 2)));
-};
-
-var Context = createContext({
-  __EMOTION_VERSION__: __EMOTION_VERSION__,
-  theme: {}
-});
-
 const tags = ['p', 'b', 'i', 'a', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'img', 'pre', 'code', 'ol', 'ul', 'li', 'blockquote', 'hr', 'em', 'table', 'tr', 'th', 'td', 'em', 'strong', 'del', // mdx
@@ -376,3 +29,3 @@ 'inlineCode', 'thematicBreak', // other
 'root'];
-const aliases$1 = {
+const aliases = {
   inlineCode: 'code',
@@ -383,5 +36,5 @@ thematicBreak: 'hr',
 
-const isAlias = x => x in aliases$1;
+const isAlias = x => x in aliases;
 
-const alias = n => isAlias(n) ? aliases$1[n] : n;
+const alias = n => isAlias(n) ? aliases[n] : n;
 
@@ -388,0 +41,0 @@ const themed = key => props => css(get(props.theme, `styles.${key}`))(props.theme);

dist/index.umd.js

 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@emotion/core'), require('react'), require('@emotion/core/package.json'), require('@emotion/styled'), require('@mdx-js/react')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@emotion/core', 'react', '@emotion/core/package.json', '@emotion/styled', '@mdx-js/react'], factory) :
-  (global = global || self, factory(global.mdx = {}, global.core, global.react, global.packageInfo, global.styled, global.react$1));
-}(this, (function (exports, core, react, packageInfo, styled, react$1) {
-  packageInfo = packageInfo && Object.prototype.hasOwnProperty.call(packageInfo, 'default') ? packageInfo['default'] : packageInfo;
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@theme-ui/core'), require('@theme-ui/css'), require('@emotion/styled'), require('@mdx-js/react')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@theme-ui/core', '@theme-ui/css', '@emotion/styled', '@mdx-js/react'], factory) :
+  (global = global || self, factory(global.mdx = {}, global.core, global.css, global.styled, global.react));
+}(this, (function (exports, core, css, styled, react) {
   styled = styled && Object.prototype.hasOwnProperty.call(styled, 'default') ? styled['default'] : styled;
@@ -27,348 +26,2 @@
 
-  function _extends$1() {
-    _extends$1 = Object.assign || function (target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
-
-        for (var key in source) {
-          if (Object.prototype.hasOwnProperty.call(source, key)) {
-            target[key] = source[key];
-          }
-        }
-      }
-
-      return target;
-    };
-
-    return _extends$1.apply(this, arguments);
-  }
-
-  function get(obj, key, def, p, undef) {
-    var path = key && typeof key === 'string' ? key.split('.') : [key];
-
-    for (p = 0; p < path.length; p++) {
-      obj = obj ? obj[path[p]] : undef;
-    }
-
-    return obj === undef ? def : obj;
-  }
-
-  var defaultBreakpoints = [40, 52, 64].map(function (n) {
-    return n + 'em';
-  });
-  var defaultTheme = {
-    space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
-    fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72]
-  };
-  var aliases = {
-    bg: 'backgroundColor',
-    m: 'margin',
-    mt: 'marginTop',
-    mr: 'marginRight',
-    mb: 'marginBottom',
-    ml: 'marginLeft',
-    mx: 'marginX',
-    my: 'marginY',
-    p: 'padding',
-    pt: 'paddingTop',
-    pr: 'paddingRight',
-    pb: 'paddingBottom',
-    pl: 'paddingLeft',
-    px: 'paddingX',
-    py: 'paddingY'
-  };
-  var multiples = {
-    marginX: ['marginLeft', 'marginRight'],
-    marginY: ['marginTop', 'marginBottom'],
-    paddingX: ['paddingLeft', 'paddingRight'],
-    paddingY: ['paddingTop', 'paddingBottom'],
-    scrollPaddingX: ['scrollPaddingLeft', 'scrollPaddingRight'],
-    scrollPaddingY: ['scrollPaddingTop', 'scrollPaddingBottom'],
-    size: ['width', 'height']
-  };
-  var scales = {
-    color: 'colors',
-    backgroundColor: 'colors',
-    borderColor: 'colors',
-    caretColor: 'colors',
-    columnRuleColor: 'colors',
-    opacity: 'opacities',
-    transition: 'transitions',
-    margin: 'space',
-    marginTop: 'space',
-    marginRight: 'space',
-    marginBottom: 'space',
-    marginLeft: 'space',
-    marginX: 'space',
-    marginY: 'space',
-    marginBlock: 'space',
-    marginBlockEnd: 'space',
-    marginBlockStart: 'space',
-    marginInline: 'space',
-    marginInlineEnd: 'space',
-    marginInlineStart: 'space',
-    padding: 'space',
-    paddingTop: 'space',
-    paddingRight: 'space',
-    paddingBottom: 'space',
-    paddingLeft: 'space',
-    paddingX: 'space',
-    paddingY: 'space',
-    paddingBlock: 'space',
-    paddingBlockEnd: 'space',
-    paddingBlockStart: 'space',
-    paddingInline: 'space',
-    paddingInlineEnd: 'space',
-    paddingInlineStart: 'space',
-    scrollPadding: 'space',
-    scrollPaddingTop: 'space',
-    scrollPaddingRight: 'space',
-    scrollPaddingBottom: 'space',
-    scrollPaddingLeft: 'space',
-    scrollPaddingX: 'space',
-    scrollPaddingY: 'space',
-    inset: 'space',
-    insetBlock: 'space',
-    insetBlockEnd: 'space',
-    insetBlockStart: 'space',
-    insetInline: 'space',
-    insetInlineEnd: 'space',
-    insetInlineStart: 'space',
-    top: 'space',
-    right: 'space',
-    bottom: 'space',
-    left: 'space',
-    gridGap: 'space',
-    gridColumnGap: 'space',
-    gridRowGap: 'space',
-    gap: 'space',
-    columnGap: 'space',
-    rowGap: 'space',
-    fontFamily: 'fonts',
-    fontSize: 'fontSizes',
-    fontWeight: 'fontWeights',
-    lineHeight: 'lineHeights',
-    letterSpacing: 'letterSpacings',
-    border: 'borders',
-    borderTop: 'borders',
-    borderRight: 'borders',
-    borderBottom: 'borders',
-    borderLeft: 'borders',
-    borderWidth: 'borderWidths',
-    borderStyle: 'borderStyles',
-    borderRadius: 'radii',
-    borderTopRightRadius: 'radii',
-    borderTopLeftRadius: 'radii',
-    borderBottomRightRadius: 'radii',
-    borderBottomLeftRadius: 'radii',
-    borderTopWidth: 'borderWidths',
-    borderTopColor: 'colors',
-    borderTopStyle: 'borderStyles',
-    borderBottomWidth: 'borderWidths',
-    borderBottomColor: 'colors',
-    borderBottomStyle: 'borderStyles',
-    borderLeftWidth: 'borderWidths',
-    borderLeftColor: 'colors',
-    borderLeftStyle: 'borderStyles',
-    borderRightWidth: 'borderWidths',
-    borderRightColor: 'colors',
-    borderRightStyle: 'borderStyles',
-    borderBlock: 'borders',
-    borderBlockEnd: 'borders',
-    borderBlockEndStyle: 'borderStyles',
-    borderBlockEndWidth: 'borderWidths',
-    borderBlockStart: 'borders',
-    borderBlockStartStyle: 'borderStyles',
-    borderBlockStartWidth: 'borderWidths',
-    borderBlockStyle: 'borderStyles',
-    borderBlockWidth: 'borderWidths',
-    borderEndEndRadius: 'radii',
-    borderEndStartRadius: 'radii',
-    borderInline: 'borders',
-    borderInlineEnd: 'borders',
-    borderInlineEndStyle: 'borderStyles',
-    borderInlineEndWidth: 'borderWidths',
-    borderInlineStart: 'borders',
-    borderInlineStartStyle: 'borderStyles',
-    borderInlineStartWidth: 'borderWidths',
-    borderInlineStyle: 'borderStyles',
-    borderInlineWidth: 'borderWidths',
-    borderStartEndRadius: 'radii',
-    borderStartStartRadius: 'radii',
-    outlineColor: 'colors',
-    boxShadow: 'shadows',
-    textShadow: 'shadows',
-    zIndex: 'zIndices',
-    width: 'sizes',
-    minWidth: 'sizes',
-    maxWidth: 'sizes',
-    height: 'sizes',
-    minHeight: 'sizes',
-    maxHeight: 'sizes',
-    flexBasis: 'sizes',
-    size: 'sizes',
-    blockSize: 'sizes',
-    inlineSize: 'sizes',
-    maxBlockSize: 'sizes',
-    maxInlineSize: 'sizes',
-    minBlockSize: 'sizes',
-    minInlineSize: 'sizes',
-    // svg
-    fill: 'colors',
-    stroke: 'colors'
-  };
-
-  var positiveOrNegative = function positiveOrNegative(scale, value) {
-    if (typeof value !== 'number' || value >= 0) {
-      if (typeof value === 'string' && value.startsWith('-')) {
-        var valueWithoutMinus = value.substring(1);
-
-        var _n = get(scale, valueWithoutMinus, valueWithoutMinus);
-
-        return "-" + _n;
-      }
-
-      return get(scale, value, value);
-    }
-
-    var absolute = Math.abs(value);
-    var n = get(scale, absolute, absolute);
-    if (typeof n === 'string') return '-' + n;
-    return Number(n) * -1;
-  };
-
-  var transforms = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginBlock', 'marginBlockEnd', 'marginBlockStart', 'marginInline', 'marginInlineEnd', 'marginInlineStart', 'top', 'bottom', 'left', 'right'].reduce(function (acc, curr) {
-    var _extends2;
-
-    return _extends$1({}, acc, (_extends2 = {}, _extends2[curr] = positiveOrNegative, _extends2));
-  }, {});
-
-  var responsive = function responsive(styles) {
-    return function (theme) {
-      var next = {};
-      var breakpoints = theme && theme.breakpoints || defaultBreakpoints;
-      var mediaQueries = [null].concat(breakpoints.map(function (n) {
-        return "@media screen and (min-width: " + n + ")";
-      }));
-
-      for (var k in styles) {
-        var key = k;
-        var value = styles[key];
-
-        if (typeof value === 'function') {
-          value = value(theme || {});
-        }
-
-        if (value == null) continue;
-
-        if (!Array.isArray(value)) {
-          next[key] = value;
-          continue;
-        }
-
-        for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
-          var media = mediaQueries[i];
-
-          if (!media) {
-            next[key] = value[i];
-            continue;
-          }
-
-          next[media] = next[media] || {};
-          if (value[i] == null) continue;
-          next[media][key] = value[i];
-        }
-      }
-
-      return next;
-    };
-  };
-
-  var css = function css(args) {
-    if (args === void 0) {
-      args = {};
-    }
-
-    return function (props) {
-      if (props === void 0) {
-        props = {};
-      }
-
-      var theme = _extends$1({}, defaultTheme, 'theme' in props ? props.theme : props);
-
-      var result = {};
-      var obj = typeof args === 'function' ? args(theme) : args;
-      var styles = responsive(obj)(theme);
-
-      for (var key in styles) {
-        var x = styles[key];
-        var val = typeof x === 'function' ? x(theme) : x;
-
-        if (key === 'variant') {
-          var variant = css(get(theme, val))(theme);
-          result = _extends$1({}, result, variant);
-          continue;
-        }
-
-        if (val && typeof val === 'object') {
-          // TODO: val can also be an array here. Is this a bug? Can it be reproduced?
-          result[key] = css(val)(theme);
-          continue;
-        }
-
-        var prop = key in aliases ? aliases[key] : key;
-        var scaleName = prop in scales ? scales[prop] : undefined;
-        var scale = get(theme, scaleName, get(theme, prop, {}));
-        var transform = get(transforms, prop, get);
-        var value = transform(scale, val, val);
-
-        if (prop in multiples) {
-          var dirs = multiples[prop];
-
-          for (var i = 0; i < dirs.length; i++) {
-            result[dirs[i]] = value;
-          }
-        } else {
-          result[prop] = value;
-        }
-      }
-
-      return result;
-    };
-  };
-
-  var __EMOTION_VERSION__ = packageInfo.version;
-
-  var getCSS = function getCSS(props) {
-    if (!props.sx && !props.css) return undefined;
-    return function (theme) {
-      var styles = css(props.sx)(theme);
-      var raw = typeof props.css === 'function' ? props.css(theme) : props.css;
-      return [styles, raw];
-    };
-  };
-
-  var parseProps = function parseProps(props) {
-    if (!props) return null;
-    var next = {};
-
-    for (var key in props) {
-      if (key === 'sx') continue;
-      next[key] = props[key];
-    }
-
-    var css = getCSS(props);
-    if (css) next.css = css;
-    return next;
-  };
-
-  var jsx = function jsx(type, props) {
-    return core.jsx.apply(undefined, [type, parseProps(props)].concat([].slice.call(arguments, 2)));
-  };
-
-  var Context = react.createContext({
-    __EMOTION_VERSION__: __EMOTION_VERSION__,
-    theme: {}
-  });
-
   var tags = ['p', 'b', 'i', 'a', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'img', 'pre', 'code', 'ol', 'ul', 'li', 'blockquote', 'hr', 'em', 'table', 'tr', 'th', 'td', 'em', 'strong', 'del', // mdx
@@ -378,3 +31,3 @@ 'inlineCode', 'thematicBreak', // other
   'root'];
-  var aliases$1 = {
+  var aliases = {
     inlineCode: 'code',
@@ -386,7 +39,7 @@ thematicBreak: 'hr',
   var isAlias = function isAlias(x) {
-    return x in aliases$1;
+    return x in aliases;
   };
 
   var alias = function alias(n) {
-    return isAlias(n) ? aliases$1[n] : n;
+    return isAlias(n) ? aliases[n] : n;
   };
@@ -396,3 +49,3 @@
     return function (props) {
-      return css(get(props.theme, "styles." + key))(props.theme);
+      return css.css(css.get(props.theme, "styles." + key))(props.theme);
     };
@@ -421,4 +74,4 @@ };
         children = _ref.children;
-    var outer = react$1.useMDXComponents();
-    return jsx(react$1.MDXProvider, {
+    var outer = react.useMDXComponents();
+    return core.jsx(react.MDXProvider, {
       components: createComponents(_extends({}, outer, components)),
@@ -425,0 +78,0 @@ children: children

package.json

 {
   "name": "@theme-ui/mdx",
-  "version": "0.4.0-rc.13",
+  "version": "0.5.0-alpha.0",
   "source": "src/index.ts",
@@ -15,10 +15,8 @@ "main": "dist/index.js",
   "dependencies": {
-    "@emotion/core": "^10.0.0",
-    "@emotion/styled": "^10.0.0",
-    "@mdx-js/react": "^1.0.0"
+    "@emotion/react": "^11.1.1",
+    "@emotion/styled": "^11.0.0",
+    "@mdx-js/react": "^1.0.0",
+    "@theme-ui/core": "^0.5.0-alpha.0",
+    "@theme-ui/css": "^0.5.0-alpha.0"
   },
-  "devDependencies": {
-    "@theme-ui/core": "^0.4.0-rc.13",
-    "@theme-ui/css": "^0.4.0-rc.13"
-  },
   "peerDependencies": {
@@ -33,3 +31,3 @@ "react": "^16.11.0"
   },
-  "gitHead": "77155d2d7615ea50bec8e206625ad0b33d618de0"
+  "gitHead": "4a277d27fcae7d070af2b03ea82365eb89ae5bbc"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

0

decreased by-100%

Worsened metrics

Total package byte prevSize

44276

decreased by-75.83%

Dependency count

6

increased by50%

Lines of code

588

decreased by-67.55%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@emotion/react@^11.1.1

• + Added@theme-ui/core@^0.5.0-alpha.0

• + Added@theme-ui/css@^0.5.0-alpha.0

• + Added@emotion/babel-plugin@11.12.0(transitive)

• + Added@emotion/hash@0.9.2(transitive)

• + Added@emotion/is-prop-valid@1.3.1(transitive)

• + Added@emotion/memoize@0.9.0(transitive)

• + Added@emotion/serialize@1.3.2(transitive)

• + Added@emotion/styled@11.13.0(transitive)

• + Added@emotion/unitless@0.10.0(transitive)

• + Added@emotion/use-insertion-effect-with-fallbacks@1.1.0(transitive)

• + Added@emotion/utils@1.4.1(transitive)

• + Added@theme-ui/core@0.5.0-alpha.1(transitive)

• + Added@theme-ui/css@0.5.0-alpha.1(transitive)

• + Added@theme-ui/parse-props@0.5.0-alpha.1(transitive)

• + Addedbabel-plugin-macros@3.1.0(transitive)

• + Addedcosmiconfig@7.1.0(transitive)

• + Addedcsstype@3.1.3(transitive)

• + Addeddeepmerge@4.3.1(transitive)

• + Addedescape-string-regexp@4.0.0(transitive)

• + Addedstylis@4.2.0(transitive)

• - Removed@emotion/core@^10.0.0

• - Removed@emotion/cache@10.0.29(transitive)

• - Removed@emotion/core@10.3.1(transitive)

• - Removed@emotion/css@10.0.27(transitive)

• - Removed@emotion/hash@0.8.0(transitive)

• - Removed@emotion/is-prop-valid@0.8.8(transitive)

• - Removed@emotion/memoize@0.7.4(transitive)

• - Removed@emotion/serialize@0.11.16(transitive)

• - Removed@emotion/sheet@0.9.4(transitive)

• - Removed@emotion/styled@10.3.0(transitive)

• - Removed@emotion/styled-base@10.3.0(transitive)

• - Removed@emotion/stylis@0.8.5(transitive)

• - Removed@emotion/unitless@0.7.5(transitive)

• - Removed@emotion/utils@0.11.3(transitive)

• - Removed@emotion/weak-memoize@0.2.5(transitive)

• - Removedbabel-plugin-emotion@10.2.2(transitive)

• - Removedbabel-plugin-macros@2.8.0(transitive)

• - Removedbabel-plugin-syntax-jsx@6.18.0(transitive)

• - Removedcosmiconfig@6.0.0(transitive)

• - Removedcsstype@2.6.21(transitive)

• - Removedescape-string-regexp@1.0.5(transitive)

• Updated@emotion/styled@^11.0.0