@theme-ui/components - npm Package Compare versions

Comparing version 0.4.0-rc.1 to 0.4.0-rc.3

dist/index.esm.js

@@ -0,1 +1,2 @@
+import styled from '@emotion/styled';
 import { css, get } from '@theme-ui/css';
@@ -5,16 +6,20 @@ import { createShouldForwardProp } from '@styled-system/should-forward-prop';
 import color from '@styled-system/color';
-import styled from '@emotion/styled';
+import React from 'react';
 import { keyframes } from '@emotion/core';
-import React from 'react';
 
-var shouldForwardProp = createShouldForwardProp(( space.propNames ).concat( color.propNames));
+var shouldForwardProp = createShouldForwardProp([].concat(space.propNames, color.propNames));
 
-var sx = function (props) { return css(props.sx)(props.theme); };
+var sx = function sx(props) {
+  return css(props.sx)(props.theme);
+};
 
-var base = function (props) { return css(props.__css)(props.theme); };
+var base = function base(props) {
+  return css(props.__css)(props.theme);
+};
 
-var variant = function (ref) {
-  var theme = ref.theme;
-  var variant = ref.variant;
-  var __themeKey = ref.__themeKey; if ( __themeKey === void 0 ) __themeKey = 'variants';
+var variant = function variant(_ref) {
+  var theme = _ref.theme,
+      variant = _ref.variant,
+      _ref$__themeKey = _ref.__themeKey,
+      __themeKey = _ref$__themeKey === void 0 ? 'variants' : _ref$__themeKey;
 
@@ -30,3 +35,5 @@ return css(get(theme, __themeKey + '.' + variant, get(theme, variant)));
   minWidth: 0
-}, base, variant, space, color, sx, function (props) { return props.css; });
+}, base, variant, space, color, sx, function (props) {
+  return props.css;
+});
 
@@ -37,245 +44,422 @@ var Flex = styled(Box)({
 
-function objectWithoutProperties (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
 
-var px = function (n) { return typeof n === 'number' ? n + 'px' : n; };
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
 
-var widthToColumns = function (width) { return Array.isArray(width) ? width.map(widthToColumns) : !!width && ("repeat(auto-fit, minmax(" + (px(width)) + ", 1fr))"); };
+    return target;
+  };
 
-var countToColumns = function (n) { return Array.isArray(n) ? n.map(countToColumns) : !!n && (typeof n === 'number' ? ("repeat(" + n + ", 1fr)") : n); };
+  return _extends.apply(this, arguments);
+}
 
-var Grid = React.forwardRef(function (ref$1, ref) {
-  var width = ref$1.width;
-  var columns = ref$1.columns;
-  var gap = ref$1.gap; if ( gap === void 0 ) gap = 3;
-  var rest = objectWithoutProperties( ref$1, ["width", "columns", "gap"] );
-  var props = rest;
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
 
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+var px = function px(n) {
+  return typeof n === 'number' ? n + 'px' : n;
+};
+
+var widthToColumns = function widthToColumns(width) {
+  return Array.isArray(width) ? width.map(widthToColumns) : !!width && "repeat(auto-fit, minmax(" + px(width) + ", 1fr))";
+};
+
+var countToColumns = function countToColumns(n) {
+  return Array.isArray(n) ? n.map(countToColumns) : !!n && (typeof n === 'number' ? "repeat(" + n + ", 1fr)" : n);
+};
+
+var Grid = React.forwardRef(function (_ref, ref) {
+  var width = _ref.width,
+      columns = _ref.columns,
+      _ref$gap = _ref.gap,
+      gap = _ref$gap === void 0 ? 3 : _ref$gap,
+      props = _objectWithoutPropertiesLoose(_ref, ["width", "columns", "gap"]);
+
   var gridTemplateColumns = !!width ? widthToColumns(width) : countToColumns(columns);
-  return React.createElement( Box, Object.assign({}, { ref: ref }, props, { __themeKey: "grids", __css: {
-    display: 'grid',
-    gridGap: gap,
-    gridTemplateColumns: gridTemplateColumns
-  } }));
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref
+  }, props, {
+    __themeKey: "grids",
+    __css: {
+      display: 'grid',
+      gridGap: gap,
+      gridTemplateColumns: gridTemplateColumns
+    }
+  }));
 });
 
-var Button = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "button", variant: "primary" }, props, { __themeKey: "buttons", __css: {
-  appearance: 'none',
-  display: 'inline-block',
-  textAlign: 'center',
-  lineHeight: 'inherit',
-  textDecoration: 'none',
-  fontSize: 'inherit',
-  px: 3,
-  py: 2,
-  color: 'white',
-  bg: 'primary',
-  border: 0,
-  borderRadius: 4
-} })); });
+var Button = React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    as: "button",
+    variant: "primary"
+  }, props, {
+    __themeKey: "buttons",
+    __css: {
+      appearance: 'none',
+      display: 'inline-block',
+      textAlign: 'center',
+      lineHeight: 'inherit',
+      textDecoration: 'none',
+      fontSize: 'inherit',
+      px: 3,
+      py: 2,
+      color: 'white',
+      bg: 'primary',
+      border: 0,
+      borderRadius: 4
+    }
+  }));
+});
 
-var Link = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "a", variant: "styles.a" }, props, { __themeKey: "links" })); });
+var Link = React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    as: "a",
+    variant: "styles.a"
+  }, props, {
+    __themeKey: "links"
+  }));
+});
 
-var Text = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, variant: "default" }, props, { __themeKey: "text" })); });
+var Text = React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    variant: "default"
+  }, props, {
+    __themeKey: "text"
+  }));
+});
 
-var Heading = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "h2", variant: "heading" }, props, { __themeKey: "text", __css: {
-  fontFamily: 'heading',
-  fontWeight: 'heading',
-  lineHeight: 'heading'
-} })); });
+var Heading = React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    as: "h2",
+    variant: "heading"
+  }, props, {
+    __themeKey: "text",
+    __css: {
+      fontFamily: 'heading',
+      fontWeight: 'heading',
+      lineHeight: 'heading'
+    }
+  }));
+});
 
-var Image = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "img" }, props, { __themeKey: "images", __css: Object.assign({}, {maxWidth: '100%',
-  height: 'auto'},
-  props.__css) })); });
+var Image = React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    as: "img"
+  }, props, {
+    __themeKey: "images",
+    __css: _extends({
+      maxWidth: '100%',
+      height: 'auto'
+    }, props.__css)
+  }));
+});
 
-var Card = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, variant: "primary" }, props, { __themeKey: "cards" })); });
+var Card = React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    variant: "primary"
+  }, props, {
+    __themeKey: "cards"
+  }));
+});
 
-var Label = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "label", variant: "label" }, props, { __themeKey: "forms", __css: {
-  width: '100%',
-  display: 'flex'
-} })); });
+var Label = React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    as: "label",
+    variant: "label"
+  }, props, {
+    __themeKey: "forms",
+    __css: {
+      width: '100%',
+      display: 'flex'
+    }
+  }));
+});
 
-var Input = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "input", variant: "input" }, props, { __themeKey: "forms", __css: {
-  display: 'block',
-  width: '100%',
-  p: 2,
-  appearance: 'none',
-  fontSize: 'inherit',
-  lineHeight: 'inherit',
-  border: '1px solid',
-  borderRadius: 4,
-  color: 'inherit',
-  bg: 'transparent'
-} })); });
+var Input = React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    as: "input",
+    variant: "input"
+  }, props, {
+    __themeKey: "forms",
+    __css: {
+      display: 'block',
+      width: '100%',
+      p: 2,
+      appearance: 'none',
+      fontSize: 'inherit',
+      lineHeight: 'inherit',
+      border: '1px solid',
+      borderRadius: 4,
+      color: 'inherit',
+      bg: 'transparent'
+    }
+  }));
+});
 
-function objectWithoutProperties$1 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
-var SVG = (function (ref) {
-  var size = ref.size; if ( size === void 0 ) size = 24;
-  var rest = objectWithoutProperties$1( ref, ["size"] );
-  var props = rest;
+var SVG = (function (_ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      props = _objectWithoutPropertiesLoose(_ref, ["size"]);
 
-  return React.createElement( Box, Object.assign({}, { as: "svg", xmlns: "http://www.w3.org/2000/svg", width: size + '', height: size + '', viewBox: "0 0 24 24", fill: "currentcolor" }, props));
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: "svg",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size + '',
+    height: size + '',
+    viewBox: "0 0 24 24",
+    fill: "currentcolor"
+  }, props));
 });
 
-var getProps = function (test) { return function (props) {
-  var next = {};
+var getProps = function getProps(test) {
+  return function (props) {
+    var next = {};
 
-  for (var key in props) {
-    if (test(key || '')) { next[key] = props[key]; }
-  }
+    for (var key in props) {
+      if (test(key || '')) next[key] = props[key];
+    }
 
-  return next;
-}; };
+    return next;
+  };
+};
 var MRE = /^m[trblxy]?$/;
-var getMargin = getProps(function (k) { return MRE.test(k); });
-var omitMargin = getProps(function (k) { return !MRE.test(k); });
+var getMargin = getProps(function (k) {
+  return MRE.test(k);
+});
+var omitMargin = getProps(function (k) {
+  return !MRE.test(k);
+});
 
-var DownArrow = function (props) { return React.createElement( SVG, props,
-    React.createElement( 'path', { d: "M7 10l5 5 5-5z" })
-  ); };
+var DownArrow = function DownArrow(props) {
+  return /*#__PURE__*/React.createElement(SVG, props, /*#__PURE__*/React.createElement("path", {
+    d: "M7 10l5 5 5-5z"
+  }));
+};
 
-var Select = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, getMargin(props), { sx: {
-  display: 'flex'
-} }),
-    React.createElement( Box, Object.assign({}, { ref: ref, as: "select", variant: "select" }, omitMargin(props), { __themeKey: "forms", __css: {
-    display: 'block',
-    width: '100%',
-    p: 2,
-    appearance: 'none',
-    fontSize: 'inherit',
-    lineHeight: 'inherit',
-    border: '1px solid',
-    borderRadius: 4,
-    color: 'inherit',
-    bg: 'transparent'
-  } })),
-    React.createElement( DownArrow, { sx: {
-    ml: -28,
-    alignSelf: 'center',
-    pointerEvents: 'none'
-  } })
-  ); });
+var Select = React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Box, _extends({}, getMargin(props), {
+    sx: {
+      display: 'flex'
+    }
+  }), /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    as: "select",
+    variant: "select"
+  }, omitMargin(props), {
+    __themeKey: "forms",
+    __css: {
+      display: 'block',
+      width: '100%',
+      p: 2,
+      appearance: 'none',
+      fontSize: 'inherit',
+      lineHeight: 'inherit',
+      border: '1px solid',
+      borderRadius: 4,
+      color: 'inherit',
+      bg: 'transparent'
+    }
+  })), /*#__PURE__*/React.createElement(DownArrow, {
+    sx: {
+      ml: -28,
+      alignSelf: 'center',
+      pointerEvents: 'none'
+    }
+  }));
+});
 
-var Textarea = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "textarea", variant: "textarea" }, props, { __themeKey: "forms", __css: {
-  display: 'block',
-  width: '100%',
-  p: 2,
-  appearance: 'none',
-  fontSize: 'inherit',
-  lineHeight: 'inherit',
-  border: '1px solid',
-  borderRadius: 4,
-  color: 'inherit',
-  bg: 'transparent'
-} })); });
+var Textarea = React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    as: "textarea",
+    variant: "textarea"
+  }, props, {
+    __themeKey: "forms",
+    __css: {
+      display: 'block',
+      width: '100%',
+      p: 2,
+      appearance: 'none',
+      fontSize: 'inherit',
+      lineHeight: 'inherit',
+      border: '1px solid',
+      borderRadius: 4,
+      color: 'inherit',
+      bg: 'transparent'
+    }
+  }));
+});
 
-function objectWithoutProperties$2 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
+var RadioChecked = function RadioChecked(props) {
+  return /*#__PURE__*/React.createElement(SVG, props, /*#__PURE__*/React.createElement("path", {
+    d: "M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+  }));
+};
 
-var RadioChecked = function (props) { return React.createElement( SVG, props,
-    React.createElement( 'path', { d: "M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" })
-  ); };
+var RadioUnchecked = function RadioUnchecked(props) {
+  return /*#__PURE__*/React.createElement(SVG, props, /*#__PURE__*/React.createElement("path", {
+    d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+  }));
+};
 
-var RadioUnchecked = function (props) { return React.createElement( SVG, props,
-    React.createElement( 'path', { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" })
-  ); };
-
-var RadioIcon = function (props) { return React.createElement( React.Fragment, null,
-    React.createElement( RadioChecked, Object.assign({}, props, { __css: {
-    display: 'none',
-    'input:checked ~ &': {
-      display: 'block'
+var RadioIcon = function RadioIcon(props) {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RadioChecked, _extends({}, props, {
+    __css: {
+      display: 'none',
+      'input:checked ~ &': {
+        display: 'block'
+      }
     }
-  } })),
-    React.createElement( RadioUnchecked, Object.assign({}, props, { __css: {
-    display: 'block',
-    'input:checked ~ &': {
-      display: 'none'
+  })), /*#__PURE__*/React.createElement(RadioUnchecked, _extends({}, props, {
+    __css: {
+      display: 'block',
+      'input:checked ~ &': {
+        display: 'none'
+      }
     }
-  } }))
-  ); };
+  })));
+};
 
-var Radio = React.forwardRef(function (ref$1, ref) {
-  var className = ref$1.className;
-  var sx = ref$1.sx;
-  var variant = ref$1.variant; if ( variant === void 0 ) variant = 'radio';
-  var rest = objectWithoutProperties$2( ref$1, ["className", "sx", "variant"] );
-  var props = rest;
+var Radio = React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+      sx = _ref.sx,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'radio' : _ref$variant,
+      props = _objectWithoutPropertiesLoose(_ref, ["className", "sx", "variant"]);
 
-  return React.createElement( Box, null,
-      React.createElement( Box, Object.assign({}, { ref: ref, as: "input", type: "radio" }, props, { sx: {
-    position: 'absolute',
-    opacity: 0,
-    zIndex: -1,
-    width: 1,
-    height: 1,
-    overflow: 'hidden'
-  } })),
-      React.createElement( Box, { as: RadioIcon, 'aria-hidden': "true", __themeKey: "forms", variant: variant, className: className, sx: sx, __css: {
-    // todo: system props??
-    mr: 2,
-    borderRadius: 9999,
-    color: 'gray',
-    'input:checked ~ &': {
-      color: 'primary'
-    },
-    'input:focus ~ &': {
-      bg: 'highlight'
+  return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    as: "input",
+    type: "radio"
+  }, props, {
+    sx: {
+      position: 'absolute',
+      opacity: 0,
+      zIndex: -1,
+      width: 1,
+      height: 1,
+      overflow: 'hidden'
     }
-  } })
-    );
+  })), /*#__PURE__*/React.createElement(Box, {
+    as: RadioIcon,
+    "aria-hidden": "true",
+    __themeKey: "forms",
+    variant: variant,
+    className: className,
+    sx: sx,
+    __css: {
+      // todo: system props??
+      mr: 2,
+      borderRadius: 9999,
+      color: 'gray',
+      flexShrink: 0,
+      'input:checked ~ &': {
+        color: 'primary'
+      },
+      'input:focus ~ &': {
+        bg: 'highlight'
+      }
+    }
+  }));
 });
 
-function objectWithoutProperties$3 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
+var CheckboxChecked = function CheckboxChecked(props) {
+  return /*#__PURE__*/React.createElement(SVG, props, /*#__PURE__*/React.createElement("path", {
+    d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+  }));
+};
 
-var CheckboxChecked = function (props) { return React.createElement( SVG, props,
-    React.createElement( 'path', { d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" })
-  ); };
+var CheckboxUnchecked = function CheckboxUnchecked(props) {
+  return /*#__PURE__*/React.createElement(SVG, props, /*#__PURE__*/React.createElement("path", {
+    d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+  }));
+};
 
-var CheckboxUnchecked = function (props) { return React.createElement( SVG, props,
-    React.createElement( 'path', { d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" })
-  ); };
-
-var CheckboxIcon = function (props) { return React.createElement( React.Fragment, null,
-    React.createElement( CheckboxChecked, Object.assign({}, props, { __css: {
-    display: 'none',
-    'input:checked ~ &': {
-      display: 'block'
+var CheckboxIcon = function CheckboxIcon(props) {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CheckboxChecked, _extends({}, props, {
+    __css: {
+      display: 'none',
+      'input:checked ~ &': {
+        display: 'block'
+      }
     }
-  } })),
-    React.createElement( CheckboxUnchecked, Object.assign({}, props, { __css: {
-    display: 'block',
-    'input:checked ~ &': {
-      display: 'none'
+  })), /*#__PURE__*/React.createElement(CheckboxUnchecked, _extends({}, props, {
+    __css: {
+      display: 'block',
+      'input:checked ~ &': {
+        display: 'none'
+      }
     }
-  } }))
-  ); };
+  })));
+};
 
-var Checkbox = React.forwardRef(function (ref$1, ref) {
-  var className = ref$1.className;
-  var sx = ref$1.sx;
-  var variant = ref$1.variant; if ( variant === void 0 ) variant = 'checkbox';
-  var rest = objectWithoutProperties$3( ref$1, ["className", "sx", "variant"] );
-  var props = rest;
+var Checkbox = React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+      sx = _ref.sx,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'checkbox' : _ref$variant,
+      children = _ref.children,
+      props = _objectWithoutPropertiesLoose(_ref, ["className", "sx", "variant", "children"]);
 
-  return React.createElement( Box, null,
-      React.createElement( Box, Object.assign({}, { ref: ref, as: "input", type: "checkbox" }, props, { sx: {
-    position: 'absolute',
-    opacity: 0,
-    zIndex: -1,
-    width: 1,
-    height: 1,
-    overflow: 'hidden'
-  } })),
-      React.createElement( Box, { as: CheckboxIcon, 'aria-hidden': "true", __themeKey: "forms", variant: variant, className: className, sx: sx, __css: {
-    mr: 2,
-    borderRadius: 4,
-    color: 'gray',
-    'input:checked ~ &': {
-      color: 'primary'
-    },
-    'input:focus ~ &': {
-      color: 'primary',
-      bg: 'highlight'
+  return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    as: "input",
+    type: "checkbox"
+  }, props, {
+    sx: {
+      position: 'absolute',
+      opacity: 0,
+      zIndex: -1,
+      width: 1,
+      height: 1,
+      overflow: 'hidden'
     }
-  } })
-    );
+  })), /*#__PURE__*/React.createElement(Box, {
+    as: CheckboxIcon,
+    "aria-hidden": "true",
+    __themeKey: "forms",
+    variant: variant,
+    className: className,
+    sx: sx,
+    __css: {
+      mr: 2,
+      borderRadius: 4,
+      color: 'gray',
+      flexShrink: 0,
+      'input:checked ~ &': {
+        color: 'primary'
+      },
+      'input:focus ~ &': {
+        color: 'primary',
+        bg: 'highlight'
+      }
+    }
+  }), children);
 });
@@ -292,68 +476,91 @@
 };
-var Slider = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "input", type: "range", variant: "slider" }, props, { __themeKey: "forms", __css: {
-  display: 'block',
-  width: '100%',
-  height: 4,
-  my: 2,
-  cursor: 'pointer',
-  appearance: 'none',
-  borderRadius: 9999,
-  color: 'inherit',
-  bg: 'gray',
-  ':focus': {
-    outline: 'none',
-    color: 'primary'
-  },
-  '&::-webkit-slider-thumb': thumb,
-  '&::-moz-range-thumb': thumb,
-  '&::-ms-thumb': thumb
-} })); });
+var Slider = React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    as: "input",
+    type: "range",
+    variant: "slider"
+  }, props, {
+    __themeKey: "forms",
+    __css: {
+      display: 'block',
+      width: '100%',
+      height: 4,
+      my: 2,
+      cursor: 'pointer',
+      appearance: 'none',
+      borderRadius: 9999,
+      color: 'inherit',
+      bg: 'gray',
+      ':focus': {
+        outline: 'none',
+        color: 'primary'
+      },
+      '&::-webkit-slider-thumb': thumb,
+      '&::-moz-range-thumb': thumb,
+      '&::-ms-thumb': thumb
+    }
+  }));
+});
 
-function objectWithoutProperties$4 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
-var Field = React.forwardRef(function (ref$1, ref) {
-  var Control = ref$1.as; if ( Control === void 0 ) Control = Input;
-  var label = ref$1.label;
-  var name = ref$1.name;
-  var rest = objectWithoutProperties$4( ref$1, ["as", "label", "name"] );
-  var props = rest;
+var Field = React.forwardRef(function (_ref, ref) {
+  var _ref$as = _ref.as,
+      Control = _ref$as === void 0 ? Input : _ref$as,
+      label = _ref.label,
+      name = _ref.name,
+      props = _objectWithoutPropertiesLoose(_ref, ["as", "label", "name"]);
 
-  return React.createElement( Box, getMargin(props),
-        React.createElement( Label, { htmlFor: name }, label),
-        React.createElement( Control, Object.assign({}, { ref: ref, id: name, name: name }, omitMargin(props)))
-      );
+  return /*#__PURE__*/React.createElement(Box, getMargin(props), /*#__PURE__*/React.createElement(Label, {
+    htmlFor: name
+  }, label), /*#__PURE__*/React.createElement(Control, _extends({
+    ref: ref,
+    id: name,
+    name: name
+  }, omitMargin(props))));
 });
 
-var Progress = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "progress", variant: "styles.progress" }, props, { __css: {
-  display: 'block',
-  width: '100%',
-  height: '4px',
-  margin: 0,
-  padding: 0,
-  overflow: 'hidden',
-  appearance: 'none',
-  color: 'primary',
-  bg: 'gray',
-  borderRadius: 9999,
-  border: 'none',
-  '&::-webkit-progress-bar': {
-    bg: 'transparent'
-  },
-  '&::-webkit-progress-value': {
-    bg: 'currentcolor'
-  },
-  '&::-moz-progress-bar': {
-    bg: 'currentcolor'
-  }
-} })); });
+var Progress = React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    as: "progress",
+    variant: "styles.progress"
+  }, props, {
+    __css: {
+      display: 'block',
+      width: '100%',
+      height: '4px',
+      margin: 0,
+      padding: 0,
+      overflow: 'hidden',
+      appearance: 'none',
+      color: 'primary',
+      bg: 'gray',
+      borderRadius: 9999,
+      border: 'none',
+      '&::-webkit-progress-bar': {
+        bg: 'transparent'
+      },
+      '&::-webkit-progress-value': {
+        bg: 'currentcolor'
+      },
+      '&::-moz-progress-bar': {
+        bg: 'currentcolor'
+      }
+    }
+  }));
+});
 
-function objectWithoutProperties$5 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
-var Donut = React.forwardRef(function (ref$1, ref) {
-  var size = ref$1.size; if ( size === void 0 ) size = 128;
-  var strokeWidth = ref$1.strokeWidth; if ( strokeWidth === void 0 ) strokeWidth = 2;
-  var value = ref$1.value; if ( value === void 0 ) value = 0;
-  var min = ref$1.min; if ( min === void 0 ) min = 0;
-  var max = ref$1.max; if ( max === void 0 ) max = 1;
-  var title = ref$1.title;
-  var rest = objectWithoutProperties$5( ref$1, ["size", "strokeWidth", "value", "min", "max", "title"] );
-  var props = rest;
+var Donut = React.forwardRef(function (_ref, ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 128 : _ref$size,
+      _ref$strokeWidth = _ref.strokeWidth,
+      strokeWidth = _ref$strokeWidth === void 0 ? 2 : _ref$strokeWidth,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? 0 : _ref$value,
+      _ref$min = _ref.min,
+      min = _ref$min === void 0 ? 0 : _ref$min,
+      _ref$max = _ref.max,
+      max = _ref$max === void 0 ? 1 : _ref$max,
+      title = _ref.title,
+      props = _objectWithoutPropertiesLoose(_ref, ["size", "strokeWidth", "value", "min", "max", "title"]);
 
@@ -363,12 +570,34 @@ var r = 16 - strokeWidth;
   var offset = C - (value - min) / (max - min) * C;
-  return React.createElement( Box, Object.assign({}, { ref: ref, as: "svg", viewBox: "0 0 32 32", width: size, height: size, strokeWidth: strokeWidth, fill: "none", stroke: "currentcolor", role: "img", 'aria-valuenow': value, 'aria-valuemin': min, 'aria-valuemax': max }, props, { __css: {
-    color: 'primary'
-  } }),
-        title && React.createElement( 'title', null, title ),
-        React.createElement( 'circle', { cx: 16, cy: 16, r: r, opacity: 1 / 8 }),
-        React.createElement( 'circle', { cx: 16, cy: 16, r: r, strokeDasharray: C, strokeDashoffset: offset, transform: "rotate(-90 16 16)" })
-      );
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    as: "svg",
+    viewBox: "0 0 32 32",
+    width: size,
+    height: size,
+    strokeWidth: strokeWidth,
+    fill: "none",
+    stroke: "currentcolor",
+    role: "img",
+    "aria-valuenow": value,
+    "aria-valuemin": min,
+    "aria-valuemax": max
+  }, props, {
+    __css: {
+      color: 'primary'
+    }
+  }), title && /*#__PURE__*/React.createElement("title", null, title), /*#__PURE__*/React.createElement("circle", {
+    cx: 16,
+    cy: 16,
+    r: r,
+    opacity: 1 / 8
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: 16,
+    cy: 16,
+    r: r,
+    strokeDasharray: C,
+    strokeDashoffset: offset,
+    transform: "rotate(-90 16 16)"
+  }));
 });
 
-function objectWithoutProperties$6 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
 var spin = keyframes({
@@ -382,9 +611,12 @@ from: {
 });
-var Spinner = React.forwardRef(function (ref$1, ref) {
-  var size = ref$1.size; if ( size === void 0 ) size = 48;
-  var strokeWidth = ref$1.strokeWidth; if ( strokeWidth === void 0 ) strokeWidth = 4;
-  var title = ref$1.title; if ( title === void 0 ) title = 'Loading...';
-  var duration = ref$1.duration; if ( duration === void 0 ) duration = 500;
-  var rest = objectWithoutProperties$6( ref$1, ["size", "strokeWidth", "max", "title", "duration"] );
-  var props = rest;
+var Spinner = React.forwardRef(function (_ref, ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 48 : _ref$size,
+      _ref$strokeWidth = _ref.strokeWidth,
+      strokeWidth = _ref$strokeWidth === void 0 ? 4 : _ref$strokeWidth,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? 'Loading...' : _ref$title,
+      _ref$duration = _ref.duration,
+      duration = _ref$duration === void 0 ? 500 : _ref$duration,
+      props = _objectWithoutPropertiesLoose(_ref, ["size", "strokeWidth", "max", "title", "duration"]);
 
@@ -394,9 +626,30 @@ var r = 16 - strokeWidth;
   var offset = C - 1 / 4 * C;
-  return React.createElement( Box, Object.assign({}, { ref: ref, as: "svg", viewBox: "0 0 32 32", width: size, height: size, strokeWidth: strokeWidth, fill: "none", stroke: "currentcolor", role: "img" }, props, { __css: {
-    color: 'primary',
-    overflow: 'visible'
-  } }),
-        React.createElement( 'title', null, title ),
-        React.createElement( 'circle', { cx: 16, cy: 16, r: r, opacity: 1 / 8 }),
-        React.createElement( Box, { as: "circle", cx: 16, cy: 16, r: r, strokeDasharray: C, strokeDashoffset: offset, __css: {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    as: "svg",
+    viewBox: "0 0 32 32",
+    width: size,
+    height: size,
+    strokeWidth: strokeWidth,
+    fill: "none",
+    stroke: "currentcolor",
+    role: "img"
+  }, props, {
+    __css: {
+      color: 'primary',
+      overflow: 'visible'
+    }
+  }), /*#__PURE__*/React.createElement("title", null, title), /*#__PURE__*/React.createElement("circle", {
+    cx: 16,
+    cy: 16,
+    r: r,
+    opacity: 1 / 8
+  }), /*#__PURE__*/React.createElement(Box, {
+    as: "circle",
+    cx: 16,
+    cy: 16,
+    r: r,
+    strokeDasharray: C,
+    strokeDashoffset: offset,
+    __css: {
       transformOrigin: '50% 50%',
@@ -407,193 +660,295 @@ animationName: spin.toString(),
       animationIterationCount: 'infinite'
-    } })
-      );
+    }
+  }));
 });
 
-function objectWithoutProperties$7 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
-var Avatar = React.forwardRef(function (ref$1, ref) {
-  var size = ref$1.size; if ( size === void 0 ) size = 48;
-  var rest = objectWithoutProperties$7( ref$1, ["size"] );
-  var props = rest;
+var Avatar = React.forwardRef(function (_ref, ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 48 : _ref$size,
+      props = _objectWithoutPropertiesLoose(_ref, ["size"]);
 
-  return React.createElement( Image, Object.assign({}, { ref: ref, width: size, height: size, variant: "avatar" }, props, { __css: {
-  borderRadius: 9999
-} }));
+  return /*#__PURE__*/React.createElement(Image, _extends({
+    ref: ref,
+    width: size,
+    height: size,
+    variant: "avatar"
+  }, props, {
+    __css: {
+      borderRadius: 9999
+    }
+  }));
 });
 
-var Badge = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref }, props, { __themeKey: "badges", __css: {
-  display: 'inline-block',
-  verticalAlign: 'baseline',
-  fontSize: 0,
-  fontWeight: 'bold',
-  whiteSpace: 'nowrap',
-  px: 1,
-  borderRadius: 2,
-  color: 'white',
-  bg: 'primary'
-} })); });
+var Badge = React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    variant: "primary"
+  }, props, {
+    __themeKey: "badges",
+    __css: {
+      display: 'inline-block',
+      verticalAlign: 'baseline',
+      fontSize: 0,
+      fontWeight: 'bold',
+      whiteSpace: 'nowrap',
+      px: 1,
+      borderRadius: 2,
+      color: 'white',
+      bg: 'primary'
+    }
+  }));
+});
 
-function objectWithoutProperties$8 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
-var IconButton = React.forwardRef(function (ref$1, ref) {
-  var size = ref$1.size; if ( size === void 0 ) size = 32;
-  var rest = objectWithoutProperties$8( ref$1, ["size"] );
-  var props = rest;
+var IconButton = React.forwardRef(function (_ref, ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 32 : _ref$size,
+      props = _objectWithoutPropertiesLoose(_ref, ["size"]);
 
-  return React.createElement( Box, Object.assign({}, { ref: ref, as: "button", variant: "icon" }, props, { __themeKey: "buttons", __css: {
-  appearance: 'none',
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  padding: 1,
-  width: size,
-  height: size,
-  color: 'inherit',
-  bg: 'transparent',
-  border: 'none',
-  borderRadius: 4
-} }));
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    as: "button",
+    variant: "icon"
+  }, props, {
+    __themeKey: "buttons",
+    __css: {
+      appearance: 'none',
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: 1,
+      width: size,
+      height: size,
+      color: 'inherit',
+      bg: 'transparent',
+      border: 'none',
+      borderRadius: 4
+    }
+  }));
 });
 
-function objectWithoutProperties$9 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
-var x = React.createElement( 'svg', { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "currentcolor", viewBox: "0 0 24 24" },
-    React.createElement( 'path', { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })
-  );
-var Close = React.forwardRef(function (ref$1, ref) {
-  var rest = objectWithoutProperties$9( ref$1, ["size"] );
-  var props = rest;
+var x = /*#__PURE__*/React.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  fill: "currentcolor",
+  viewBox: "0 0 24 24"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+}));
+var Close = React.forwardRef(function (_ref, ref) {
+  var props = _objectWithoutPropertiesLoose(_ref, ["size"]);
 
-  return React.createElement( IconButton, Object.assign({}, { ref: ref, title: "Close", 'aria-label': "Close", variant: "close" }, props, { children: x }));
+  return /*#__PURE__*/React.createElement(IconButton, _extends({
+    ref: ref,
+    title: "Close",
+    "aria-label": "Close",
+    variant: "close"
+  }, props, {
+    children: x
+  }));
 });
 
-var Alert = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref }, props, { __themeKey: "alerts", __css: {
-  display: 'flex',
-  alignItems: 'center',
-  px: 3,
-  py: 2,
-  fontWeight: 'bold',
-  color: 'white',
-  bg: 'primary',
-  borderRadius: 4
-} })); });
+var Alert = React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    variant: "primary"
+  }, props, {
+    __themeKey: "alerts",
+    __css: {
+      display: 'flex',
+      alignItems: 'center',
+      px: 3,
+      py: 2,
+      fontWeight: 'bold',
+      color: 'white',
+      bg: 'primary',
+      borderRadius: 4
+    }
+  }));
+});
 
-var Divider = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "hr", variant: "styles.hr" }, props, { __css: {
-  color: 'gray',
-  m: 0,
-  my: 2,
-  border: 0,
-  borderBottom: '1px solid'
-} })); });
+var Divider = React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    as: "hr",
+    variant: "styles.hr"
+  }, props, {
+    __css: {
+      color: 'gray',
+      m: 0,
+      my: 2,
+      border: 0,
+      borderBottom: '1px solid'
+    }
+  }));
+});
 
-function objectWithoutProperties$a (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
-var Embed = React.forwardRef(function (ref$1, ref) {
-  var ratio = ref$1.ratio; if ( ratio === void 0 ) ratio = 16 / 9;
-  var src = ref$1.src;
-  var frameBorder = ref$1.frameBorder; if ( frameBorder === void 0 ) frameBorder = 0;
-  var allowFullScreen = ref$1.allowFullScreen; if ( allowFullScreen === void 0 ) allowFullScreen = true;
-  var width = ref$1.width; if ( width === void 0 ) width = 560;
-  var height = ref$1.height; if ( height === void 0 ) height = 315;
-  var allow = ref$1.allow;
-  var rest = objectWithoutProperties$a( ref$1, ["ratio", "src", "frameBorder", "allowFullScreen", "width", "height", "allow"] );
-  var props = rest;
+var Embed = React.forwardRef(function (_ref, ref) {
+  var _ref$ratio = _ref.ratio,
+      ratio = _ref$ratio === void 0 ? 16 / 9 : _ref$ratio,
+      src = _ref.src,
+      _ref$frameBorder = _ref.frameBorder,
+      frameBorder = _ref$frameBorder === void 0 ? 0 : _ref$frameBorder,
+      _ref$allowFullScreen = _ref.allowFullScreen,
+      allowFullScreen = _ref$allowFullScreen === void 0 ? true : _ref$allowFullScreen,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? 560 : _ref$width,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? 315 : _ref$height,
+      allow = _ref.allow,
+      props = _objectWithoutPropertiesLoose(_ref, ["ratio", "src", "frameBorder", "allowFullScreen", "width", "height", "allow"]);
 
-  return React.createElement( Box, Object.assign({}, props, { __css: {
-  width: '100%',
-  height: 0,
-  paddingBottom: 100 / ratio + '%',
-  position: 'relative',
-  overflow: 'hidden'
-} }),
-      React.createElement( Box, { ref: ref, as: "iframe", src: src, width: width, height: height, frameBorder: frameBorder, allowFullScreen: allowFullScreen, allow: allow, __css: {
-    position: 'absolute',
-    width: '100%',
-    height: '100%',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    border: 0
-  } })
-    );
+  return /*#__PURE__*/React.createElement(Box, _extends({}, props, {
+    __css: {
+      width: '100%',
+      height: 0,
+      paddingBottom: 100 / ratio + '%',
+      position: 'relative',
+      overflow: 'hidden'
+    }
+  }), /*#__PURE__*/React.createElement(Box, {
+    ref: ref,
+    as: "iframe",
+    src: src,
+    width: width,
+    height: height,
+    frameBorder: frameBorder,
+    allowFullScreen: allowFullScreen,
+    allow: allow,
+    __css: {
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      top: 0,
+      bottom: 0,
+      left: 0,
+      border: 0
+    }
+  }));
 });
 
-function objectWithoutProperties$b (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
-var AspectRatio = React.forwardRef(function (ref$1, ref) {
-  var ratio = ref$1.ratio; if ( ratio === void 0 ) ratio = 4 / 3;
-  var children = ref$1.children;
-  var rest = objectWithoutProperties$b( ref$1, ["ratio", "children"] );
-  var props = rest;
+var AspectRatio = React.forwardRef(function (_ref, ref) {
+  var _ref$ratio = _ref.ratio,
+      ratio = _ref$ratio === void 0 ? 4 / 3 : _ref$ratio,
+      children = _ref.children,
+      props = _objectWithoutPropertiesLoose(_ref, ["ratio", "children"]);
 
-  return React.createElement( Box, { ref: ref, sx: {
-  position: 'relative',
-  overflow: 'hidden'
-} },
-      React.createElement( Box, { sx: {
-    width: '100%',
-    height: 0,
-    paddingBottom: 100 / ratio + '%'
-  } }),
-      React.createElement( Box, Object.assign({}, props, { __css: {
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0
-  } }),
-        children
-      )
-    );
+  return /*#__PURE__*/React.createElement(Box, {
+    ref: ref,
+    sx: {
+      position: 'relative',
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      width: '100%',
+      height: 0,
+      paddingBottom: 100 / ratio + '%'
+    }
+  }), /*#__PURE__*/React.createElement(Box, _extends({}, props, {
+    __css: {
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0
+    }
+  }), children));
 });
 
-function objectWithoutProperties$c (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
-var AspectImage = React.forwardRef(function (ref$1, ref) {
-  var ratio = ref$1.ratio;
-  var rest = objectWithoutProperties$c( ref$1, ["ratio"] );
-  var props = rest;
+var AspectImage = React.forwardRef(function (_ref, ref) {
+  var ratio = _ref.ratio,
+      props = _objectWithoutPropertiesLoose(_ref, ["ratio"]);
 
-  return React.createElement( AspectRatio, { ratio: ratio },
-    React.createElement( Image, Object.assign({}, { ref: ref }, props, { __css: {
-    objectFit: 'cover'
-  } }))
-  );
+  return /*#__PURE__*/React.createElement(AspectRatio, {
+    ratio: ratio
+  }, /*#__PURE__*/React.createElement(Image, _extends({
+    ref: ref
+  }, props, {
+    __css: {
+      objectFit: 'cover'
+    }
+  })));
 });
 
-var Container = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, variant: "container" }, props, { __themeKey: "layout", __css: {
-  width: '100%',
-  maxWidth: 'container',
-  mx: 'auto'
-} })); });
+var Container = React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    variant: "container"
+  }, props, {
+    __themeKey: "layout",
+    __css: {
+      width: '100%',
+      maxWidth: 'container',
+      mx: 'auto'
+    }
+  }));
+});
 
-var NavLink = React.forwardRef(function (props, ref) { return React.createElement( Link, Object.assign({}, { ref: ref, variant: "nav" }, props, { __css: {
-  color: 'inherit',
-  textDecoration: 'none',
-  fontWeight: 'bold',
-  display: 'inline-block',
-  '&:hover, &:focus, &.active': {
-    color: 'primary'
-  }
-} })); });
+var NavLink = React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Link, _extends({
+    ref: ref,
+    variant: "nav"
+  }, props, {
+    __css: {
+      color: 'inherit',
+      textDecoration: 'none',
+      fontWeight: 'bold',
+      display: 'inline-block',
+      '&:hover, &:focus, &.active': {
+        color: 'primary'
+      }
+    }
+  }));
+});
 
-var Message = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref }, props, { __themeKey: "messages", __css: {
-  padding: 3,
-  paddingLeft: function (t) { return t.space[3] - t.space[1]; },
-  borderLeftWidth: function (t) { return t.space[1]; },
-  borderLeftStyle: 'solid',
-  borderLeftColor: 'primary',
-  borderRadius: 4,
-  bg: 'highlight'
-} })); });
+var Message = React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref
+  }, props, {
+    __themeKey: "messages",
+    __css: {
+      padding: 3,
+      paddingLeft: function paddingLeft(t) {
+        return t.space[3] - t.space[1];
+      },
+      borderLeftWidth: function borderLeftWidth(t) {
+        return t.space[1];
+      },
+      borderLeftStyle: 'solid',
+      borderLeftColor: 'primary',
+      borderRadius: 4,
+      bg: 'highlight'
+    }
+  }));
+});
 
-var MenuIcon = function (ref) {
-  var size = ref.size; if ( size === void 0 ) size = 24;
-
-  return React.createElement( Box, { as: "svg", xmlns: "http://www.w3.org/2000/svg", width: size, height: size, fill: "currentcolor", viewBox: "0 0 24 24", sx: {
-  display: 'block',
-  margin: 0
-} },
-    React.createElement( 'path', { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" })
-  );
+var MenuIcon = function MenuIcon(_ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size;
+  return /*#__PURE__*/React.createElement(Box, {
+    as: "svg",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    fill: "currentcolor",
+    viewBox: "0 0 24 24",
+    sx: {
+      display: 'block',
+      margin: 0
+    }
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+  }));
 };
-var MenuButton = React.forwardRef(function (props, ref) { return React.createElement( IconButton, Object.assign({}, { ref: ref, title: "Menu", 'aria-label': "Toggle Menu", variant: "menu" }, props),
-    React.createElement( MenuIcon, null )
-  ); });
+var MenuButton = React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(IconButton, _extends({
+    ref: ref,
+    title: "Menu",
+    "aria-label": "Toggle Menu",
+    variant: "menu"
+  }, props), /*#__PURE__*/React.createElement(MenuIcon, null));
+});
 
-export { Box, Flex, Grid, Button, Link, Text, Heading, Image, Card, Label, Input, Select, Textarea, Radio, Checkbox, Slider, Field, Progress, Donut, Spinner, Avatar, Badge, Close, Alert, Divider, Embed, AspectRatio, AspectImage, Container, NavLink, Message, IconButton, MenuButton };
+export { Alert, AspectImage, AspectRatio, Avatar, Badge, Box, Button, Card, Checkbox, Close, Container, Divider, Donut, Embed, Field, Flex, Grid, Heading, IconButton, Image, Input, Label, Link, MenuButton, Message, NavLink, Progress, Radio, Select, Slider, Spinner, Text, Textarea };
 //# sourceMappingURL=index.esm.js.map

dist/index.js

 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
+var styled = _interopDefault(require('@emotion/styled'));
 var css = require('@theme-ui/css');
-var shouldForwardProp = require('@styled-system/should-forward-prop');
+var shouldForwardProp$1 = require('@styled-system/should-forward-prop');
 var space = _interopDefault(require('@styled-system/space'));
 var color = _interopDefault(require('@styled-system/color'));
-var styled = _interopDefault(require('@emotion/styled'));
+var React = _interopDefault(require('react'));
 var core = require('@emotion/core');
-var React = _interopDefault(require('react'));
 
-var shouldForwardProp$1 = shouldForwardProp.createShouldForwardProp(( space.propNames ).concat( color.propNames));
+var shouldForwardProp = shouldForwardProp$1.createShouldForwardProp([].concat(space.propNames, color.propNames));
 
-var sx = function (props) { return css.css(props.sx)(props.theme); };
+var sx = function sx(props) {
+  return css.css(props.sx)(props.theme);
+};
 
-var base = function (props) { return css.css(props.__css)(props.theme); };
+var base = function base(props) {
+  return css.css(props.__css)(props.theme);
+};
 
-var variant = function (ref) {
-  var theme = ref.theme;
-  var variant = ref.variant;
-  var __themeKey = ref.__themeKey; if ( __themeKey === void 0 ) __themeKey = 'variants';
+var variant = function variant(_ref) {
+  var theme = _ref.theme,
+      variant = _ref.variant,
+      _ref$__themeKey = _ref.__themeKey,
+      __themeKey = _ref$__themeKey === void 0 ? 'variants' : _ref$__themeKey;
 
@@ -26,3 +31,3 @@ return css.css(css.get(theme, __themeKey + '.' + variant, css.get(theme, variant)));
 var Box = styled('div', {
-  shouldForwardProp: shouldForwardProp$1
+  shouldForwardProp: shouldForwardProp
 })({
@@ -32,3 +37,5 @@ boxSizing: 'border-box',
   minWidth: 0
-}, base, variant, space, color, sx, function (props) { return props.css; });
+}, base, variant, space, color, sx, function (props) {
+  return props.css;
+});
 
@@ -39,245 +46,422 @@ var Flex = styled(Box)({
 
-function objectWithoutProperties (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
 
-var px = function (n) { return typeof n === 'number' ? n + 'px' : n; };
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
 
-var widthToColumns = function (width) { return Array.isArray(width) ? width.map(widthToColumns) : !!width && ("repeat(auto-fit, minmax(" + (px(width)) + ", 1fr))"); };
+    return target;
+  };
 
-var countToColumns = function (n) { return Array.isArray(n) ? n.map(countToColumns) : !!n && (typeof n === 'number' ? ("repeat(" + n + ", 1fr)") : n); };
+  return _extends.apply(this, arguments);
+}
 
-var Grid = React.forwardRef(function (ref$1, ref) {
-  var width = ref$1.width;
-  var columns = ref$1.columns;
-  var gap = ref$1.gap; if ( gap === void 0 ) gap = 3;
-  var rest = objectWithoutProperties( ref$1, ["width", "columns", "gap"] );
-  var props = rest;
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
 
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+var px = function px(n) {
+  return typeof n === 'number' ? n + 'px' : n;
+};
+
+var widthToColumns = function widthToColumns(width) {
+  return Array.isArray(width) ? width.map(widthToColumns) : !!width && "repeat(auto-fit, minmax(" + px(width) + ", 1fr))";
+};
+
+var countToColumns = function countToColumns(n) {
+  return Array.isArray(n) ? n.map(countToColumns) : !!n && (typeof n === 'number' ? "repeat(" + n + ", 1fr)" : n);
+};
+
+var Grid = React.forwardRef(function (_ref, ref) {
+  var width = _ref.width,
+      columns = _ref.columns,
+      _ref$gap = _ref.gap,
+      gap = _ref$gap === void 0 ? 3 : _ref$gap,
+      props = _objectWithoutPropertiesLoose(_ref, ["width", "columns", "gap"]);
+
   var gridTemplateColumns = !!width ? widthToColumns(width) : countToColumns(columns);
-  return React.createElement( Box, Object.assign({}, { ref: ref }, props, { __themeKey: "grids", __css: {
-    display: 'grid',
-    gridGap: gap,
-    gridTemplateColumns: gridTemplateColumns
-  } }));
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref
+  }, props, {
+    __themeKey: "grids",
+    __css: {
+      display: 'grid',
+      gridGap: gap,
+      gridTemplateColumns: gridTemplateColumns
+    }
+  }));
 });
 
-var Button = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "button", variant: "primary" }, props, { __themeKey: "buttons", __css: {
-  appearance: 'none',
-  display: 'inline-block',
-  textAlign: 'center',
-  lineHeight: 'inherit',
-  textDecoration: 'none',
-  fontSize: 'inherit',
-  px: 3,
-  py: 2,
-  color: 'white',
-  bg: 'primary',
-  border: 0,
-  borderRadius: 4
-} })); });
+var Button = React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    as: "button",
+    variant: "primary"
+  }, props, {
+    __themeKey: "buttons",
+    __css: {
+      appearance: 'none',
+      display: 'inline-block',
+      textAlign: 'center',
+      lineHeight: 'inherit',
+      textDecoration: 'none',
+      fontSize: 'inherit',
+      px: 3,
+      py: 2,
+      color: 'white',
+      bg: 'primary',
+      border: 0,
+      borderRadius: 4
+    }
+  }));
+});
 
-var Link = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "a", variant: "styles.a" }, props, { __themeKey: "links" })); });
+var Link = React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    as: "a",
+    variant: "styles.a"
+  }, props, {
+    __themeKey: "links"
+  }));
+});
 
-var Text = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, variant: "default" }, props, { __themeKey: "text" })); });
+var Text = React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    variant: "default"
+  }, props, {
+    __themeKey: "text"
+  }));
+});
 
-var Heading = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "h2", variant: "heading" }, props, { __themeKey: "text", __css: {
-  fontFamily: 'heading',
-  fontWeight: 'heading',
-  lineHeight: 'heading'
-} })); });
+var Heading = React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    as: "h2",
+    variant: "heading"
+  }, props, {
+    __themeKey: "text",
+    __css: {
+      fontFamily: 'heading',
+      fontWeight: 'heading',
+      lineHeight: 'heading'
+    }
+  }));
+});
 
-var Image = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "img" }, props, { __themeKey: "images", __css: Object.assign({}, {maxWidth: '100%',
-  height: 'auto'},
-  props.__css) })); });
+var Image = React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    as: "img"
+  }, props, {
+    __themeKey: "images",
+    __css: _extends({
+      maxWidth: '100%',
+      height: 'auto'
+    }, props.__css)
+  }));
+});
 
-var Card = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, variant: "primary" }, props, { __themeKey: "cards" })); });
+var Card = React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    variant: "primary"
+  }, props, {
+    __themeKey: "cards"
+  }));
+});
 
-var Label = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "label", variant: "label" }, props, { __themeKey: "forms", __css: {
-  width: '100%',
-  display: 'flex'
-} })); });
+var Label = React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    as: "label",
+    variant: "label"
+  }, props, {
+    __themeKey: "forms",
+    __css: {
+      width: '100%',
+      display: 'flex'
+    }
+  }));
+});
 
-var Input = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "input", variant: "input" }, props, { __themeKey: "forms", __css: {
-  display: 'block',
-  width: '100%',
-  p: 2,
-  appearance: 'none',
-  fontSize: 'inherit',
-  lineHeight: 'inherit',
-  border: '1px solid',
-  borderRadius: 4,
-  color: 'inherit',
-  bg: 'transparent'
-} })); });
+var Input = React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    as: "input",
+    variant: "input"
+  }, props, {
+    __themeKey: "forms",
+    __css: {
+      display: 'block',
+      width: '100%',
+      p: 2,
+      appearance: 'none',
+      fontSize: 'inherit',
+      lineHeight: 'inherit',
+      border: '1px solid',
+      borderRadius: 4,
+      color: 'inherit',
+      bg: 'transparent'
+    }
+  }));
+});
 
-function objectWithoutProperties$1 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
-var SVG = (function (ref) {
-  var size = ref.size; if ( size === void 0 ) size = 24;
-  var rest = objectWithoutProperties$1( ref, ["size"] );
-  var props = rest;
+var SVG = (function (_ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      props = _objectWithoutPropertiesLoose(_ref, ["size"]);
 
-  return React.createElement( Box, Object.assign({}, { as: "svg", xmlns: "http://www.w3.org/2000/svg", width: size + '', height: size + '', viewBox: "0 0 24 24", fill: "currentcolor" }, props));
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: "svg",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size + '',
+    height: size + '',
+    viewBox: "0 0 24 24",
+    fill: "currentcolor"
+  }, props));
 });
 
-var getProps = function (test) { return function (props) {
-  var next = {};
+var getProps = function getProps(test) {
+  return function (props) {
+    var next = {};
 
-  for (var key in props) {
-    if (test(key || '')) { next[key] = props[key]; }
-  }
+    for (var key in props) {
+      if (test(key || '')) next[key] = props[key];
+    }
 
-  return next;
-}; };
+    return next;
+  };
+};
 var MRE = /^m[trblxy]?$/;
-var getMargin = getProps(function (k) { return MRE.test(k); });
-var omitMargin = getProps(function (k) { return !MRE.test(k); });
+var getMargin = getProps(function (k) {
+  return MRE.test(k);
+});
+var omitMargin = getProps(function (k) {
+  return !MRE.test(k);
+});
 
-var DownArrow = function (props) { return React.createElement( SVG, props,
-    React.createElement( 'path', { d: "M7 10l5 5 5-5z" })
-  ); };
+var DownArrow = function DownArrow(props) {
+  return /*#__PURE__*/React.createElement(SVG, props, /*#__PURE__*/React.createElement("path", {
+    d: "M7 10l5 5 5-5z"
+  }));
+};
 
-var Select = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, getMargin(props), { sx: {
-  display: 'flex'
-} }),
-    React.createElement( Box, Object.assign({}, { ref: ref, as: "select", variant: "select" }, omitMargin(props), { __themeKey: "forms", __css: {
-    display: 'block',
-    width: '100%',
-    p: 2,
-    appearance: 'none',
-    fontSize: 'inherit',
-    lineHeight: 'inherit',
-    border: '1px solid',
-    borderRadius: 4,
-    color: 'inherit',
-    bg: 'transparent'
-  } })),
-    React.createElement( DownArrow, { sx: {
-    ml: -28,
-    alignSelf: 'center',
-    pointerEvents: 'none'
-  } })
-  ); });
+var Select = React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Box, _extends({}, getMargin(props), {
+    sx: {
+      display: 'flex'
+    }
+  }), /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    as: "select",
+    variant: "select"
+  }, omitMargin(props), {
+    __themeKey: "forms",
+    __css: {
+      display: 'block',
+      width: '100%',
+      p: 2,
+      appearance: 'none',
+      fontSize: 'inherit',
+      lineHeight: 'inherit',
+      border: '1px solid',
+      borderRadius: 4,
+      color: 'inherit',
+      bg: 'transparent'
+    }
+  })), /*#__PURE__*/React.createElement(DownArrow, {
+    sx: {
+      ml: -28,
+      alignSelf: 'center',
+      pointerEvents: 'none'
+    }
+  }));
+});
 
-var Textarea = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "textarea", variant: "textarea" }, props, { __themeKey: "forms", __css: {
-  display: 'block',
-  width: '100%',
-  p: 2,
-  appearance: 'none',
-  fontSize: 'inherit',
-  lineHeight: 'inherit',
-  border: '1px solid',
-  borderRadius: 4,
-  color: 'inherit',
-  bg: 'transparent'
-} })); });
+var Textarea = React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    as: "textarea",
+    variant: "textarea"
+  }, props, {
+    __themeKey: "forms",
+    __css: {
+      display: 'block',
+      width: '100%',
+      p: 2,
+      appearance: 'none',
+      fontSize: 'inherit',
+      lineHeight: 'inherit',
+      border: '1px solid',
+      borderRadius: 4,
+      color: 'inherit',
+      bg: 'transparent'
+    }
+  }));
+});
 
-function objectWithoutProperties$2 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
+var RadioChecked = function RadioChecked(props) {
+  return /*#__PURE__*/React.createElement(SVG, props, /*#__PURE__*/React.createElement("path", {
+    d: "M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+  }));
+};
 
-var RadioChecked = function (props) { return React.createElement( SVG, props,
-    React.createElement( 'path', { d: "M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" })
-  ); };
+var RadioUnchecked = function RadioUnchecked(props) {
+  return /*#__PURE__*/React.createElement(SVG, props, /*#__PURE__*/React.createElement("path", {
+    d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+  }));
+};
 
-var RadioUnchecked = function (props) { return React.createElement( SVG, props,
-    React.createElement( 'path', { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" })
-  ); };
-
-var RadioIcon = function (props) { return React.createElement( React.Fragment, null,
-    React.createElement( RadioChecked, Object.assign({}, props, { __css: {
-    display: 'none',
-    'input:checked ~ &': {
-      display: 'block'
+var RadioIcon = function RadioIcon(props) {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RadioChecked, _extends({}, props, {
+    __css: {
+      display: 'none',
+      'input:checked ~ &': {
+        display: 'block'
+      }
     }
-  } })),
-    React.createElement( RadioUnchecked, Object.assign({}, props, { __css: {
-    display: 'block',
-    'input:checked ~ &': {
-      display: 'none'
+  })), /*#__PURE__*/React.createElement(RadioUnchecked, _extends({}, props, {
+    __css: {
+      display: 'block',
+      'input:checked ~ &': {
+        display: 'none'
+      }
     }
-  } }))
-  ); };
+  })));
+};
 
-var Radio = React.forwardRef(function (ref$1, ref) {
-  var className = ref$1.className;
-  var sx = ref$1.sx;
-  var variant = ref$1.variant; if ( variant === void 0 ) variant = 'radio';
-  var rest = objectWithoutProperties$2( ref$1, ["className", "sx", "variant"] );
-  var props = rest;
+var Radio = React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+      sx = _ref.sx,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'radio' : _ref$variant,
+      props = _objectWithoutPropertiesLoose(_ref, ["className", "sx", "variant"]);
 
-  return React.createElement( Box, null,
-      React.createElement( Box, Object.assign({}, { ref: ref, as: "input", type: "radio" }, props, { sx: {
-    position: 'absolute',
-    opacity: 0,
-    zIndex: -1,
-    width: 1,
-    height: 1,
-    overflow: 'hidden'
-  } })),
-      React.createElement( Box, { as: RadioIcon, 'aria-hidden': "true", __themeKey: "forms", variant: variant, className: className, sx: sx, __css: {
-    // todo: system props??
-    mr: 2,
-    borderRadius: 9999,
-    color: 'gray',
-    'input:checked ~ &': {
-      color: 'primary'
-    },
-    'input:focus ~ &': {
-      bg: 'highlight'
+  return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    as: "input",
+    type: "radio"
+  }, props, {
+    sx: {
+      position: 'absolute',
+      opacity: 0,
+      zIndex: -1,
+      width: 1,
+      height: 1,
+      overflow: 'hidden'
     }
-  } })
-    );
+  })), /*#__PURE__*/React.createElement(Box, {
+    as: RadioIcon,
+    "aria-hidden": "true",
+    __themeKey: "forms",
+    variant: variant,
+    className: className,
+    sx: sx,
+    __css: {
+      // todo: system props??
+      mr: 2,
+      borderRadius: 9999,
+      color: 'gray',
+      flexShrink: 0,
+      'input:checked ~ &': {
+        color: 'primary'
+      },
+      'input:focus ~ &': {
+        bg: 'highlight'
+      }
+    }
+  }));
 });
 
-function objectWithoutProperties$3 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
+var CheckboxChecked = function CheckboxChecked(props) {
+  return /*#__PURE__*/React.createElement(SVG, props, /*#__PURE__*/React.createElement("path", {
+    d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+  }));
+};
 
-var CheckboxChecked = function (props) { return React.createElement( SVG, props,
-    React.createElement( 'path', { d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" })
-  ); };
+var CheckboxUnchecked = function CheckboxUnchecked(props) {
+  return /*#__PURE__*/React.createElement(SVG, props, /*#__PURE__*/React.createElement("path", {
+    d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+  }));
+};
 
-var CheckboxUnchecked = function (props) { return React.createElement( SVG, props,
-    React.createElement( 'path', { d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" })
-  ); };
-
-var CheckboxIcon = function (props) { return React.createElement( React.Fragment, null,
-    React.createElement( CheckboxChecked, Object.assign({}, props, { __css: {
-    display: 'none',
-    'input:checked ~ &': {
-      display: 'block'
+var CheckboxIcon = function CheckboxIcon(props) {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CheckboxChecked, _extends({}, props, {
+    __css: {
+      display: 'none',
+      'input:checked ~ &': {
+        display: 'block'
+      }
     }
-  } })),
-    React.createElement( CheckboxUnchecked, Object.assign({}, props, { __css: {
-    display: 'block',
-    'input:checked ~ &': {
-      display: 'none'
+  })), /*#__PURE__*/React.createElement(CheckboxUnchecked, _extends({}, props, {
+    __css: {
+      display: 'block',
+      'input:checked ~ &': {
+        display: 'none'
+      }
     }
-  } }))
-  ); };
+  })));
+};
 
-var Checkbox = React.forwardRef(function (ref$1, ref) {
-  var className = ref$1.className;
-  var sx = ref$1.sx;
-  var variant = ref$1.variant; if ( variant === void 0 ) variant = 'checkbox';
-  var rest = objectWithoutProperties$3( ref$1, ["className", "sx", "variant"] );
-  var props = rest;
+var Checkbox = React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+      sx = _ref.sx,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'checkbox' : _ref$variant,
+      children = _ref.children,
+      props = _objectWithoutPropertiesLoose(_ref, ["className", "sx", "variant", "children"]);
 
-  return React.createElement( Box, null,
-      React.createElement( Box, Object.assign({}, { ref: ref, as: "input", type: "checkbox" }, props, { sx: {
-    position: 'absolute',
-    opacity: 0,
-    zIndex: -1,
-    width: 1,
-    height: 1,
-    overflow: 'hidden'
-  } })),
-      React.createElement( Box, { as: CheckboxIcon, 'aria-hidden': "true", __themeKey: "forms", variant: variant, className: className, sx: sx, __css: {
-    mr: 2,
-    borderRadius: 4,
-    color: 'gray',
-    'input:checked ~ &': {
-      color: 'primary'
-    },
-    'input:focus ~ &': {
-      color: 'primary',
-      bg: 'highlight'
+  return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    as: "input",
+    type: "checkbox"
+  }, props, {
+    sx: {
+      position: 'absolute',
+      opacity: 0,
+      zIndex: -1,
+      width: 1,
+      height: 1,
+      overflow: 'hidden'
     }
-  } })
-    );
+  })), /*#__PURE__*/React.createElement(Box, {
+    as: CheckboxIcon,
+    "aria-hidden": "true",
+    __themeKey: "forms",
+    variant: variant,
+    className: className,
+    sx: sx,
+    __css: {
+      mr: 2,
+      borderRadius: 4,
+      color: 'gray',
+      flexShrink: 0,
+      'input:checked ~ &': {
+        color: 'primary'
+      },
+      'input:focus ~ &': {
+        color: 'primary',
+        bg: 'highlight'
+      }
+    }
+  }), children);
 });
@@ -294,68 +478,91 @@
 };
-var Slider = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "input", type: "range", variant: "slider" }, props, { __themeKey: "forms", __css: {
-  display: 'block',
-  width: '100%',
-  height: 4,
-  my: 2,
-  cursor: 'pointer',
-  appearance: 'none',
-  borderRadius: 9999,
-  color: 'inherit',
-  bg: 'gray',
-  ':focus': {
-    outline: 'none',
-    color: 'primary'
-  },
-  '&::-webkit-slider-thumb': thumb,
-  '&::-moz-range-thumb': thumb,
-  '&::-ms-thumb': thumb
-} })); });
+var Slider = React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    as: "input",
+    type: "range",
+    variant: "slider"
+  }, props, {
+    __themeKey: "forms",
+    __css: {
+      display: 'block',
+      width: '100%',
+      height: 4,
+      my: 2,
+      cursor: 'pointer',
+      appearance: 'none',
+      borderRadius: 9999,
+      color: 'inherit',
+      bg: 'gray',
+      ':focus': {
+        outline: 'none',
+        color: 'primary'
+      },
+      '&::-webkit-slider-thumb': thumb,
+      '&::-moz-range-thumb': thumb,
+      '&::-ms-thumb': thumb
+    }
+  }));
+});
 
-function objectWithoutProperties$4 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
-var Field = React.forwardRef(function (ref$1, ref) {
-  var Control = ref$1.as; if ( Control === void 0 ) Control = Input;
-  var label = ref$1.label;
-  var name = ref$1.name;
-  var rest = objectWithoutProperties$4( ref$1, ["as", "label", "name"] );
-  var props = rest;
+var Field = React.forwardRef(function (_ref, ref) {
+  var _ref$as = _ref.as,
+      Control = _ref$as === void 0 ? Input : _ref$as,
+      label = _ref.label,
+      name = _ref.name,
+      props = _objectWithoutPropertiesLoose(_ref, ["as", "label", "name"]);
 
-  return React.createElement( Box, getMargin(props),
-        React.createElement( Label, { htmlFor: name }, label),
-        React.createElement( Control, Object.assign({}, { ref: ref, id: name, name: name }, omitMargin(props)))
-      );
+  return /*#__PURE__*/React.createElement(Box, getMargin(props), /*#__PURE__*/React.createElement(Label, {
+    htmlFor: name
+  }, label), /*#__PURE__*/React.createElement(Control, _extends({
+    ref: ref,
+    id: name,
+    name: name
+  }, omitMargin(props))));
 });
 
-var Progress = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "progress", variant: "styles.progress" }, props, { __css: {
-  display: 'block',
-  width: '100%',
-  height: '4px',
-  margin: 0,
-  padding: 0,
-  overflow: 'hidden',
-  appearance: 'none',
-  color: 'primary',
-  bg: 'gray',
-  borderRadius: 9999,
-  border: 'none',
-  '&::-webkit-progress-bar': {
-    bg: 'transparent'
-  },
-  '&::-webkit-progress-value': {
-    bg: 'currentcolor'
-  },
-  '&::-moz-progress-bar': {
-    bg: 'currentcolor'
-  }
-} })); });
+var Progress = React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    as: "progress",
+    variant: "styles.progress"
+  }, props, {
+    __css: {
+      display: 'block',
+      width: '100%',
+      height: '4px',
+      margin: 0,
+      padding: 0,
+      overflow: 'hidden',
+      appearance: 'none',
+      color: 'primary',
+      bg: 'gray',
+      borderRadius: 9999,
+      border: 'none',
+      '&::-webkit-progress-bar': {
+        bg: 'transparent'
+      },
+      '&::-webkit-progress-value': {
+        bg: 'currentcolor'
+      },
+      '&::-moz-progress-bar': {
+        bg: 'currentcolor'
+      }
+    }
+  }));
+});
 
-function objectWithoutProperties$5 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
-var Donut = React.forwardRef(function (ref$1, ref) {
-  var size = ref$1.size; if ( size === void 0 ) size = 128;
-  var strokeWidth = ref$1.strokeWidth; if ( strokeWidth === void 0 ) strokeWidth = 2;
-  var value = ref$1.value; if ( value === void 0 ) value = 0;
-  var min = ref$1.min; if ( min === void 0 ) min = 0;
-  var max = ref$1.max; if ( max === void 0 ) max = 1;
-  var title = ref$1.title;
-  var rest = objectWithoutProperties$5( ref$1, ["size", "strokeWidth", "value", "min", "max", "title"] );
-  var props = rest;
+var Donut = React.forwardRef(function (_ref, ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 128 : _ref$size,
+      _ref$strokeWidth = _ref.strokeWidth,
+      strokeWidth = _ref$strokeWidth === void 0 ? 2 : _ref$strokeWidth,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? 0 : _ref$value,
+      _ref$min = _ref.min,
+      min = _ref$min === void 0 ? 0 : _ref$min,
+      _ref$max = _ref.max,
+      max = _ref$max === void 0 ? 1 : _ref$max,
+      title = _ref.title,
+      props = _objectWithoutPropertiesLoose(_ref, ["size", "strokeWidth", "value", "min", "max", "title"]);
 
@@ -365,12 +572,34 @@ var r = 16 - strokeWidth;
   var offset = C - (value - min) / (max - min) * C;
-  return React.createElement( Box, Object.assign({}, { ref: ref, as: "svg", viewBox: "0 0 32 32", width: size, height: size, strokeWidth: strokeWidth, fill: "none", stroke: "currentcolor", role: "img", 'aria-valuenow': value, 'aria-valuemin': min, 'aria-valuemax': max }, props, { __css: {
-    color: 'primary'
-  } }),
-        title && React.createElement( 'title', null, title ),
-        React.createElement( 'circle', { cx: 16, cy: 16, r: r, opacity: 1 / 8 }),
-        React.createElement( 'circle', { cx: 16, cy: 16, r: r, strokeDasharray: C, strokeDashoffset: offset, transform: "rotate(-90 16 16)" })
-      );
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    as: "svg",
+    viewBox: "0 0 32 32",
+    width: size,
+    height: size,
+    strokeWidth: strokeWidth,
+    fill: "none",
+    stroke: "currentcolor",
+    role: "img",
+    "aria-valuenow": value,
+    "aria-valuemin": min,
+    "aria-valuemax": max
+  }, props, {
+    __css: {
+      color: 'primary'
+    }
+  }), title && /*#__PURE__*/React.createElement("title", null, title), /*#__PURE__*/React.createElement("circle", {
+    cx: 16,
+    cy: 16,
+    r: r,
+    opacity: 1 / 8
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: 16,
+    cy: 16,
+    r: r,
+    strokeDasharray: C,
+    strokeDashoffset: offset,
+    transform: "rotate(-90 16 16)"
+  }));
 });
 
-function objectWithoutProperties$6 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
 var spin = core.keyframes({
@@ -384,9 +613,12 @@ from: {
 });
-var Spinner = React.forwardRef(function (ref$1, ref) {
-  var size = ref$1.size; if ( size === void 0 ) size = 48;
-  var strokeWidth = ref$1.strokeWidth; if ( strokeWidth === void 0 ) strokeWidth = 4;
-  var title = ref$1.title; if ( title === void 0 ) title = 'Loading...';
-  var duration = ref$1.duration; if ( duration === void 0 ) duration = 500;
-  var rest = objectWithoutProperties$6( ref$1, ["size", "strokeWidth", "max", "title", "duration"] );
-  var props = rest;
+var Spinner = React.forwardRef(function (_ref, ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 48 : _ref$size,
+      _ref$strokeWidth = _ref.strokeWidth,
+      strokeWidth = _ref$strokeWidth === void 0 ? 4 : _ref$strokeWidth,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? 'Loading...' : _ref$title,
+      _ref$duration = _ref.duration,
+      duration = _ref$duration === void 0 ? 500 : _ref$duration,
+      props = _objectWithoutPropertiesLoose(_ref, ["size", "strokeWidth", "max", "title", "duration"]);
 
@@ -396,9 +628,30 @@ var r = 16 - strokeWidth;
   var offset = C - 1 / 4 * C;
-  return React.createElement( Box, Object.assign({}, { ref: ref, as: "svg", viewBox: "0 0 32 32", width: size, height: size, strokeWidth: strokeWidth, fill: "none", stroke: "currentcolor", role: "img" }, props, { __css: {
-    color: 'primary',
-    overflow: 'visible'
-  } }),
-        React.createElement( 'title', null, title ),
-        React.createElement( 'circle', { cx: 16, cy: 16, r: r, opacity: 1 / 8 }),
-        React.createElement( Box, { as: "circle", cx: 16, cy: 16, r: r, strokeDasharray: C, strokeDashoffset: offset, __css: {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    as: "svg",
+    viewBox: "0 0 32 32",
+    width: size,
+    height: size,
+    strokeWidth: strokeWidth,
+    fill: "none",
+    stroke: "currentcolor",
+    role: "img"
+  }, props, {
+    __css: {
+      color: 'primary',
+      overflow: 'visible'
+    }
+  }), /*#__PURE__*/React.createElement("title", null, title), /*#__PURE__*/React.createElement("circle", {
+    cx: 16,
+    cy: 16,
+    r: r,
+    opacity: 1 / 8
+  }), /*#__PURE__*/React.createElement(Box, {
+    as: "circle",
+    cx: 16,
+    cy: 16,
+    r: r,
+    strokeDasharray: C,
+    strokeDashoffset: offset,
+    __css: {
       transformOrigin: '50% 50%',
@@ -409,225 +662,327 @@ animationName: spin.toString(),
       animationIterationCount: 'infinite'
-    } })
-      );
+    }
+  }));
 });
 
-function objectWithoutProperties$7 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
-var Avatar = React.forwardRef(function (ref$1, ref) {
-  var size = ref$1.size; if ( size === void 0 ) size = 48;
-  var rest = objectWithoutProperties$7( ref$1, ["size"] );
-  var props = rest;
+var Avatar = React.forwardRef(function (_ref, ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 48 : _ref$size,
+      props = _objectWithoutPropertiesLoose(_ref, ["size"]);
 
-  return React.createElement( Image, Object.assign({}, { ref: ref, width: size, height: size, variant: "avatar" }, props, { __css: {
-  borderRadius: 9999
-} }));
+  return /*#__PURE__*/React.createElement(Image, _extends({
+    ref: ref,
+    width: size,
+    height: size,
+    variant: "avatar"
+  }, props, {
+    __css: {
+      borderRadius: 9999
+    }
+  }));
 });
 
-var Badge = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref }, props, { __themeKey: "badges", __css: {
-  display: 'inline-block',
-  verticalAlign: 'baseline',
-  fontSize: 0,
-  fontWeight: 'bold',
-  whiteSpace: 'nowrap',
-  px: 1,
-  borderRadius: 2,
-  color: 'white',
-  bg: 'primary'
-} })); });
+var Badge = React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    variant: "primary"
+  }, props, {
+    __themeKey: "badges",
+    __css: {
+      display: 'inline-block',
+      verticalAlign: 'baseline',
+      fontSize: 0,
+      fontWeight: 'bold',
+      whiteSpace: 'nowrap',
+      px: 1,
+      borderRadius: 2,
+      color: 'white',
+      bg: 'primary'
+    }
+  }));
+});
 
-function objectWithoutProperties$8 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
-var IconButton = React.forwardRef(function (ref$1, ref) {
-  var size = ref$1.size; if ( size === void 0 ) size = 32;
-  var rest = objectWithoutProperties$8( ref$1, ["size"] );
-  var props = rest;
+var IconButton = React.forwardRef(function (_ref, ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 32 : _ref$size,
+      props = _objectWithoutPropertiesLoose(_ref, ["size"]);
 
-  return React.createElement( Box, Object.assign({}, { ref: ref, as: "button", variant: "icon" }, props, { __themeKey: "buttons", __css: {
-  appearance: 'none',
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  padding: 1,
-  width: size,
-  height: size,
-  color: 'inherit',
-  bg: 'transparent',
-  border: 'none',
-  borderRadius: 4
-} }));
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    as: "button",
+    variant: "icon"
+  }, props, {
+    __themeKey: "buttons",
+    __css: {
+      appearance: 'none',
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: 1,
+      width: size,
+      height: size,
+      color: 'inherit',
+      bg: 'transparent',
+      border: 'none',
+      borderRadius: 4
+    }
+  }));
 });
 
-function objectWithoutProperties$9 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
-var x = React.createElement( 'svg', { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "currentcolor", viewBox: "0 0 24 24" },
-    React.createElement( 'path', { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })
-  );
-var Close = React.forwardRef(function (ref$1, ref) {
-  var rest = objectWithoutProperties$9( ref$1, ["size"] );
-  var props = rest;
+var x = /*#__PURE__*/React.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  fill: "currentcolor",
+  viewBox: "0 0 24 24"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+}));
+var Close = React.forwardRef(function (_ref, ref) {
+  var props = _objectWithoutPropertiesLoose(_ref, ["size"]);
 
-  return React.createElement( IconButton, Object.assign({}, { ref: ref, title: "Close", 'aria-label': "Close", variant: "close" }, props, { children: x }));
+  return /*#__PURE__*/React.createElement(IconButton, _extends({
+    ref: ref,
+    title: "Close",
+    "aria-label": "Close",
+    variant: "close"
+  }, props, {
+    children: x
+  }));
 });
 
-var Alert = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref }, props, { __themeKey: "alerts", __css: {
-  display: 'flex',
-  alignItems: 'center',
-  px: 3,
-  py: 2,
-  fontWeight: 'bold',
-  color: 'white',
-  bg: 'primary',
-  borderRadius: 4
-} })); });
+var Alert = React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    variant: "primary"
+  }, props, {
+    __themeKey: "alerts",
+    __css: {
+      display: 'flex',
+      alignItems: 'center',
+      px: 3,
+      py: 2,
+      fontWeight: 'bold',
+      color: 'white',
+      bg: 'primary',
+      borderRadius: 4
+    }
+  }));
+});
 
-var Divider = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "hr", variant: "styles.hr" }, props, { __css: {
-  color: 'gray',
-  m: 0,
-  my: 2,
-  border: 0,
-  borderBottom: '1px solid'
-} })); });
+var Divider = React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    as: "hr",
+    variant: "styles.hr"
+  }, props, {
+    __css: {
+      color: 'gray',
+      m: 0,
+      my: 2,
+      border: 0,
+      borderBottom: '1px solid'
+    }
+  }));
+});
 
-function objectWithoutProperties$a (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
-var Embed = React.forwardRef(function (ref$1, ref) {
-  var ratio = ref$1.ratio; if ( ratio === void 0 ) ratio = 16 / 9;
-  var src = ref$1.src;
-  var frameBorder = ref$1.frameBorder; if ( frameBorder === void 0 ) frameBorder = 0;
-  var allowFullScreen = ref$1.allowFullScreen; if ( allowFullScreen === void 0 ) allowFullScreen = true;
-  var width = ref$1.width; if ( width === void 0 ) width = 560;
-  var height = ref$1.height; if ( height === void 0 ) height = 315;
-  var allow = ref$1.allow;
-  var rest = objectWithoutProperties$a( ref$1, ["ratio", "src", "frameBorder", "allowFullScreen", "width", "height", "allow"] );
-  var props = rest;
+var Embed = React.forwardRef(function (_ref, ref) {
+  var _ref$ratio = _ref.ratio,
+      ratio = _ref$ratio === void 0 ? 16 / 9 : _ref$ratio,
+      src = _ref.src,
+      _ref$frameBorder = _ref.frameBorder,
+      frameBorder = _ref$frameBorder === void 0 ? 0 : _ref$frameBorder,
+      _ref$allowFullScreen = _ref.allowFullScreen,
+      allowFullScreen = _ref$allowFullScreen === void 0 ? true : _ref$allowFullScreen,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? 560 : _ref$width,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? 315 : _ref$height,
+      allow = _ref.allow,
+      props = _objectWithoutPropertiesLoose(_ref, ["ratio", "src", "frameBorder", "allowFullScreen", "width", "height", "allow"]);
 
-  return React.createElement( Box, Object.assign({}, props, { __css: {
-  width: '100%',
-  height: 0,
-  paddingBottom: 100 / ratio + '%',
-  position: 'relative',
-  overflow: 'hidden'
-} }),
-      React.createElement( Box, { ref: ref, as: "iframe", src: src, width: width, height: height, frameBorder: frameBorder, allowFullScreen: allowFullScreen, allow: allow, __css: {
-    position: 'absolute',
-    width: '100%',
-    height: '100%',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    border: 0
-  } })
-    );
+  return /*#__PURE__*/React.createElement(Box, _extends({}, props, {
+    __css: {
+      width: '100%',
+      height: 0,
+      paddingBottom: 100 / ratio + '%',
+      position: 'relative',
+      overflow: 'hidden'
+    }
+  }), /*#__PURE__*/React.createElement(Box, {
+    ref: ref,
+    as: "iframe",
+    src: src,
+    width: width,
+    height: height,
+    frameBorder: frameBorder,
+    allowFullScreen: allowFullScreen,
+    allow: allow,
+    __css: {
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      top: 0,
+      bottom: 0,
+      left: 0,
+      border: 0
+    }
+  }));
 });
 
-function objectWithoutProperties$b (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
-var AspectRatio = React.forwardRef(function (ref$1, ref) {
-  var ratio = ref$1.ratio; if ( ratio === void 0 ) ratio = 4 / 3;
-  var children = ref$1.children;
-  var rest = objectWithoutProperties$b( ref$1, ["ratio", "children"] );
-  var props = rest;
+var AspectRatio = React.forwardRef(function (_ref, ref) {
+  var _ref$ratio = _ref.ratio,
+      ratio = _ref$ratio === void 0 ? 4 / 3 : _ref$ratio,
+      children = _ref.children,
+      props = _objectWithoutPropertiesLoose(_ref, ["ratio", "children"]);
 
-  return React.createElement( Box, { ref: ref, sx: {
-  position: 'relative',
-  overflow: 'hidden'
-} },
-      React.createElement( Box, { sx: {
-    width: '100%',
-    height: 0,
-    paddingBottom: 100 / ratio + '%'
-  } }),
-      React.createElement( Box, Object.assign({}, props, { __css: {
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0
-  } }),
-        children
-      )
-    );
+  return /*#__PURE__*/React.createElement(Box, {
+    ref: ref,
+    sx: {
+      position: 'relative',
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      width: '100%',
+      height: 0,
+      paddingBottom: 100 / ratio + '%'
+    }
+  }), /*#__PURE__*/React.createElement(Box, _extends({}, props, {
+    __css: {
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0
+    }
+  }), children));
 });
 
-function objectWithoutProperties$c (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
-var AspectImage = React.forwardRef(function (ref$1, ref) {
-  var ratio = ref$1.ratio;
-  var rest = objectWithoutProperties$c( ref$1, ["ratio"] );
-  var props = rest;
+var AspectImage = React.forwardRef(function (_ref, ref) {
+  var ratio = _ref.ratio,
+      props = _objectWithoutPropertiesLoose(_ref, ["ratio"]);
 
-  return React.createElement( AspectRatio, { ratio: ratio },
-    React.createElement( Image, Object.assign({}, { ref: ref }, props, { __css: {
-    objectFit: 'cover'
-  } }))
-  );
+  return /*#__PURE__*/React.createElement(AspectRatio, {
+    ratio: ratio
+  }, /*#__PURE__*/React.createElement(Image, _extends({
+    ref: ref
+  }, props, {
+    __css: {
+      objectFit: 'cover'
+    }
+  })));
 });
 
-var Container = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, variant: "container" }, props, { __themeKey: "layout", __css: {
-  width: '100%',
-  maxWidth: 'container',
-  mx: 'auto'
-} })); });
+var Container = React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    variant: "container"
+  }, props, {
+    __themeKey: "layout",
+    __css: {
+      width: '100%',
+      maxWidth: 'container',
+      mx: 'auto'
+    }
+  }));
+});
 
-var NavLink = React.forwardRef(function (props, ref) { return React.createElement( Link, Object.assign({}, { ref: ref, variant: "nav" }, props, { __css: {
-  color: 'inherit',
-  textDecoration: 'none',
-  fontWeight: 'bold',
-  display: 'inline-block',
-  '&:hover, &:focus, &.active': {
-    color: 'primary'
-  }
-} })); });
+var NavLink = React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Link, _extends({
+    ref: ref,
+    variant: "nav"
+  }, props, {
+    __css: {
+      color: 'inherit',
+      textDecoration: 'none',
+      fontWeight: 'bold',
+      display: 'inline-block',
+      '&:hover, &:focus, &.active': {
+        color: 'primary'
+      }
+    }
+  }));
+});
 
-var Message = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref }, props, { __themeKey: "messages", __css: {
-  padding: 3,
-  paddingLeft: function (t) { return t.space[3] - t.space[1]; },
-  borderLeftWidth: function (t) { return t.space[1]; },
-  borderLeftStyle: 'solid',
-  borderLeftColor: 'primary',
-  borderRadius: 4,
-  bg: 'highlight'
-} })); });
+var Message = React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref
+  }, props, {
+    __themeKey: "messages",
+    __css: {
+      padding: 3,
+      paddingLeft: function paddingLeft(t) {
+        return t.space[3] - t.space[1];
+      },
+      borderLeftWidth: function borderLeftWidth(t) {
+        return t.space[1];
+      },
+      borderLeftStyle: 'solid',
+      borderLeftColor: 'primary',
+      borderRadius: 4,
+      bg: 'highlight'
+    }
+  }));
+});
 
-var MenuIcon = function (ref) {
-  var size = ref.size; if ( size === void 0 ) size = 24;
-
-  return React.createElement( Box, { as: "svg", xmlns: "http://www.w3.org/2000/svg", width: size, height: size, fill: "currentcolor", viewBox: "0 0 24 24", sx: {
-  display: 'block',
-  margin: 0
-} },
-    React.createElement( 'path', { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" })
-  );
+var MenuIcon = function MenuIcon(_ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size;
+  return /*#__PURE__*/React.createElement(Box, {
+    as: "svg",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    fill: "currentcolor",
+    viewBox: "0 0 24 24",
+    sx: {
+      display: 'block',
+      margin: 0
+    }
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+  }));
 };
-var MenuButton = React.forwardRef(function (props, ref) { return React.createElement( IconButton, Object.assign({}, { ref: ref, title: "Menu", 'aria-label': "Toggle Menu", variant: "menu" }, props),
-    React.createElement( MenuIcon, null )
-  ); });
+var MenuButton = React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(IconButton, _extends({
+    ref: ref,
+    title: "Menu",
+    "aria-label": "Toggle Menu",
+    variant: "menu"
+  }, props), /*#__PURE__*/React.createElement(MenuIcon, null));
+});
 
+exports.Alert = Alert;
+exports.AspectImage = AspectImage;
+exports.AspectRatio = AspectRatio;
+exports.Avatar = Avatar;
+exports.Badge = Badge;
 exports.Box = Box;
+exports.Button = Button;
+exports.Card = Card;
+exports.Checkbox = Checkbox;
+exports.Close = Close;
+exports.Container = Container;
+exports.Divider = Divider;
+exports.Donut = Donut;
+exports.Embed = Embed;
+exports.Field = Field;
 exports.Flex = Flex;
 exports.Grid = Grid;
-exports.Button = Button;
-exports.Link = Link;
-exports.Text = Text;
 exports.Heading = Heading;
+exports.IconButton = IconButton;
 exports.Image = Image;
-exports.Card = Card;
+exports.Input = Input;
 exports.Label = Label;
-exports.Input = Input;
+exports.Link = Link;
+exports.MenuButton = MenuButton;
+exports.Message = Message;
+exports.NavLink = NavLink;
+exports.Progress = Progress;
+exports.Radio = Radio;
 exports.Select = Select;
-exports.Textarea = Textarea;
-exports.Radio = Radio;
-exports.Checkbox = Checkbox;
 exports.Slider = Slider;
-exports.Field = Field;
-exports.Progress = Progress;
-exports.Donut = Donut;
 exports.Spinner = Spinner;
-exports.Avatar = Avatar;
-exports.Badge = Badge;
-exports.Close = Close;
-exports.Alert = Alert;
-exports.Divider = Divider;
-exports.Embed = Embed;
-exports.AspectRatio = AspectRatio;
-exports.AspectImage = AspectImage;
-exports.Container = Container;
-exports.NavLink = NavLink;
-exports.Message = Message;
-exports.IconButton = IconButton;
-exports.MenuButton = MenuButton;
+exports.Text = Text;
+exports.Textarea = Textarea;
 //# sourceMappingURL=index.js.map

dist/index.umd.js

 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@theme-ui/css'), require('@styled-system/should-forward-prop'), require('@styled-system/space'), require('@styled-system/color'), require('@emotion/styled'), require('@emotion/core'), require('react')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@theme-ui/css', '@styled-system/should-forward-prop', '@styled-system/space', '@styled-system/color', '@emotion/styled', '@emotion/core', 'react'], factory) :
-  (factory((global.components = {}),global.css,global.shouldForwardProp,global.space,global.color,global.styled,global.core,global.react));
-}(this, (function (exports,css,shouldForwardProp,space,color,styled,core,React) {
-  space = space && space.hasOwnProperty('default') ? space['default'] : space;
-  color = color && color.hasOwnProperty('default') ? color['default'] : color;
-  styled = styled && styled.hasOwnProperty('default') ? styled['default'] : styled;
-  React = React && React.hasOwnProperty('default') ? React['default'] : React;
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@emotion/styled'), require('@theme-ui/css'), require('@styled-system/should-forward-prop'), require('@styled-system/space'), require('@styled-system/color'), require('react'), require('@emotion/core')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@emotion/styled', '@theme-ui/css', '@styled-system/should-forward-prop', '@styled-system/space', '@styled-system/color', 'react', '@emotion/core'], factory) :
+  (global = global || self, factory(global.components = {}, global.styled, global.css, global.shouldForwardProp$1, global.space, global.color, global.react, global.core));
+}(this, (function (exports, styled, css, shouldForwardProp$1, space, color, React, core) {
+  styled = styled && Object.prototype.hasOwnProperty.call(styled, 'default') ? styled['default'] : styled;
+  space = space && Object.prototype.hasOwnProperty.call(space, 'default') ? space['default'] : space;
+  color = color && Object.prototype.hasOwnProperty.call(color, 'default') ? color['default'] : color;
+  React = React && Object.prototype.hasOwnProperty.call(React, 'default') ? React['default'] : React;
 
-  var shouldForwardProp$1 = shouldForwardProp.createShouldForwardProp(( space.propNames ).concat( color.propNames));
+  var shouldForwardProp = shouldForwardProp$1.createShouldForwardProp([].concat(space.propNames, color.propNames));
 
-  var sx = function (props) { return css.css(props.sx)(props.theme); };
+  var sx = function sx(props) {
+    return css.css(props.sx)(props.theme);
+  };
 
-  var base = function (props) { return css.css(props.__css)(props.theme); };
+  var base = function base(props) {
+    return css.css(props.__css)(props.theme);
+  };
 
-  var variant = function (ref) {
-    var theme = ref.theme;
-    var variant = ref.variant;
-    var __themeKey = ref.__themeKey; if ( __themeKey === void 0 ) __themeKey = 'variants';
+  var variant = function variant(_ref) {
+    var theme = _ref.theme,
+        variant = _ref.variant,
+        _ref$__themeKey = _ref.__themeKey,
+        __themeKey = _ref$__themeKey === void 0 ? 'variants' : _ref$__themeKey;
 
@@ -26,3 +31,3 @@ return css.css(css.get(theme, __themeKey + '.' + variant, css.get(theme, variant)));
   var Box = styled('div', {
-    shouldForwardProp: shouldForwardProp$1
+    shouldForwardProp: shouldForwardProp
   })({
@@ -32,3 +37,5 @@ boxSizing: 'border-box',
     minWidth: 0
-  }, base, variant, space, color, sx, function (props) { return props.css; });
+  }, base, variant, space, color, sx, function (props) {
+    return props.css;
+  });
 
@@ -39,245 +46,422 @@ var Flex = styled(Box)({
 
-  function objectWithoutProperties (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
+  function _extends() {
+    _extends = Object.assign || function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
 
-  var px = function (n) { return typeof n === 'number' ? n + 'px' : n; };
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
 
-  var widthToColumns = function (width) { return Array.isArray(width) ? width.map(widthToColumns) : !!width && ("repeat(auto-fit, minmax(" + (px(width)) + ", 1fr))"); };
+      return target;
+    };
 
-  var countToColumns = function (n) { return Array.isArray(n) ? n.map(countToColumns) : !!n && (typeof n === 'number' ? ("repeat(" + n + ", 1fr)") : n); };
+    return _extends.apply(this, arguments);
+  }
 
-  var Grid = React.forwardRef(function (ref$1, ref) {
-    var width = ref$1.width;
-    var columns = ref$1.columns;
-    var gap = ref$1.gap; if ( gap === void 0 ) gap = 3;
-    var rest = objectWithoutProperties( ref$1, ["width", "columns", "gap"] );
-    var props = rest;
+  function _objectWithoutPropertiesLoose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
 
+    for (i = 0; i < sourceKeys.length; i++) {
+      key = sourceKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
+    }
+
+    return target;
+  }
+
+  var px = function px(n) {
+    return typeof n === 'number' ? n + 'px' : n;
+  };
+
+  var widthToColumns = function widthToColumns(width) {
+    return Array.isArray(width) ? width.map(widthToColumns) : !!width && "repeat(auto-fit, minmax(" + px(width) + ", 1fr))";
+  };
+
+  var countToColumns = function countToColumns(n) {
+    return Array.isArray(n) ? n.map(countToColumns) : !!n && (typeof n === 'number' ? "repeat(" + n + ", 1fr)" : n);
+  };
+
+  var Grid = React.forwardRef(function (_ref, ref) {
+    var width = _ref.width,
+        columns = _ref.columns,
+        _ref$gap = _ref.gap,
+        gap = _ref$gap === void 0 ? 3 : _ref$gap,
+        props = _objectWithoutPropertiesLoose(_ref, ["width", "columns", "gap"]);
+
     var gridTemplateColumns = !!width ? widthToColumns(width) : countToColumns(columns);
-    return React.createElement( Box, Object.assign({}, { ref: ref }, props, { __themeKey: "grids", __css: {
-      display: 'grid',
-      gridGap: gap,
-      gridTemplateColumns: gridTemplateColumns
-    } }));
+    return /*#__PURE__*/React.createElement(Box, _extends({
+      ref: ref
+    }, props, {
+      __themeKey: "grids",
+      __css: {
+        display: 'grid',
+        gridGap: gap,
+        gridTemplateColumns: gridTemplateColumns
+      }
+    }));
   });
 
-  var Button = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "button", variant: "primary" }, props, { __themeKey: "buttons", __css: {
-    appearance: 'none',
-    display: 'inline-block',
-    textAlign: 'center',
-    lineHeight: 'inherit',
-    textDecoration: 'none',
-    fontSize: 'inherit',
-    px: 3,
-    py: 2,
-    color: 'white',
-    bg: 'primary',
-    border: 0,
-    borderRadius: 4
-  } })); });
+  var Button = React.forwardRef(function (props, ref) {
+    return /*#__PURE__*/React.createElement(Box, _extends({
+      ref: ref,
+      as: "button",
+      variant: "primary"
+    }, props, {
+      __themeKey: "buttons",
+      __css: {
+        appearance: 'none',
+        display: 'inline-block',
+        textAlign: 'center',
+        lineHeight: 'inherit',
+        textDecoration: 'none',
+        fontSize: 'inherit',
+        px: 3,
+        py: 2,
+        color: 'white',
+        bg: 'primary',
+        border: 0,
+        borderRadius: 4
+      }
+    }));
+  });
 
-  var Link = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "a", variant: "styles.a" }, props, { __themeKey: "links" })); });
+  var Link = React.forwardRef(function (props, ref) {
+    return /*#__PURE__*/React.createElement(Box, _extends({
+      ref: ref,
+      as: "a",
+      variant: "styles.a"
+    }, props, {
+      __themeKey: "links"
+    }));
+  });
 
-  var Text = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, variant: "default" }, props, { __themeKey: "text" })); });
+  var Text = React.forwardRef(function (props, ref) {
+    return /*#__PURE__*/React.createElement(Box, _extends({
+      ref: ref,
+      variant: "default"
+    }, props, {
+      __themeKey: "text"
+    }));
+  });
 
-  var Heading = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "h2", variant: "heading" }, props, { __themeKey: "text", __css: {
-    fontFamily: 'heading',
-    fontWeight: 'heading',
-    lineHeight: 'heading'
-  } })); });
+  var Heading = React.forwardRef(function (props, ref) {
+    return /*#__PURE__*/React.createElement(Box, _extends({
+      ref: ref,
+      as: "h2",
+      variant: "heading"
+    }, props, {
+      __themeKey: "text",
+      __css: {
+        fontFamily: 'heading',
+        fontWeight: 'heading',
+        lineHeight: 'heading'
+      }
+    }));
+  });
 
-  var Image = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "img" }, props, { __themeKey: "images", __css: Object.assign({}, {maxWidth: '100%',
-    height: 'auto'},
-    props.__css) })); });
+  var Image = React.forwardRef(function (props, ref) {
+    return /*#__PURE__*/React.createElement(Box, _extends({
+      ref: ref,
+      as: "img"
+    }, props, {
+      __themeKey: "images",
+      __css: _extends({
+        maxWidth: '100%',
+        height: 'auto'
+      }, props.__css)
+    }));
+  });
 
-  var Card = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, variant: "primary" }, props, { __themeKey: "cards" })); });
+  var Card = React.forwardRef(function (props, ref) {
+    return /*#__PURE__*/React.createElement(Box, _extends({
+      ref: ref,
+      variant: "primary"
+    }, props, {
+      __themeKey: "cards"
+    }));
+  });
 
-  var Label = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "label", variant: "label" }, props, { __themeKey: "forms", __css: {
-    width: '100%',
-    display: 'flex'
-  } })); });
+  var Label = React.forwardRef(function (props, ref) {
+    return /*#__PURE__*/React.createElement(Box, _extends({
+      ref: ref,
+      as: "label",
+      variant: "label"
+    }, props, {
+      __themeKey: "forms",
+      __css: {
+        width: '100%',
+        display: 'flex'
+      }
+    }));
+  });
 
-  var Input = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "input", variant: "input" }, props, { __themeKey: "forms", __css: {
-    display: 'block',
-    width: '100%',
-    p: 2,
-    appearance: 'none',
-    fontSize: 'inherit',
-    lineHeight: 'inherit',
-    border: '1px solid',
-    borderRadius: 4,
-    color: 'inherit',
-    bg: 'transparent'
-  } })); });
+  var Input = React.forwardRef(function (props, ref) {
+    return /*#__PURE__*/React.createElement(Box, _extends({
+      ref: ref,
+      as: "input",
+      variant: "input"
+    }, props, {
+      __themeKey: "forms",
+      __css: {
+        display: 'block',
+        width: '100%',
+        p: 2,
+        appearance: 'none',
+        fontSize: 'inherit',
+        lineHeight: 'inherit',
+        border: '1px solid',
+        borderRadius: 4,
+        color: 'inherit',
+        bg: 'transparent'
+      }
+    }));
+  });
 
-  function objectWithoutProperties$1 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
-  var SVG = (function (ref) {
-    var size = ref.size; if ( size === void 0 ) size = 24;
-    var rest = objectWithoutProperties$1( ref, ["size"] );
-    var props = rest;
+  var SVG = (function (_ref) {
+    var _ref$size = _ref.size,
+        size = _ref$size === void 0 ? 24 : _ref$size,
+        props = _objectWithoutPropertiesLoose(_ref, ["size"]);
 
-    return React.createElement( Box, Object.assign({}, { as: "svg", xmlns: "http://www.w3.org/2000/svg", width: size + '', height: size + '', viewBox: "0 0 24 24", fill: "currentcolor" }, props));
+    return /*#__PURE__*/React.createElement(Box, _extends({
+      as: "svg",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size + '',
+      height: size + '',
+      viewBox: "0 0 24 24",
+      fill: "currentcolor"
+    }, props));
   });
 
-  var getProps = function (test) { return function (props) {
-    var next = {};
+  var getProps = function getProps(test) {
+    return function (props) {
+      var next = {};
 
-    for (var key in props) {
-      if (test(key || '')) { next[key] = props[key]; }
-    }
+      for (var key in props) {
+        if (test(key || '')) next[key] = props[key];
+      }
 
-    return next;
-  }; };
+      return next;
+    };
+  };
   var MRE = /^m[trblxy]?$/;
-  var getMargin = getProps(function (k) { return MRE.test(k); });
-  var omitMargin = getProps(function (k) { return !MRE.test(k); });
+  var getMargin = getProps(function (k) {
+    return MRE.test(k);
+  });
+  var omitMargin = getProps(function (k) {
+    return !MRE.test(k);
+  });
 
-  var DownArrow = function (props) { return React.createElement( SVG, props,
-      React.createElement( 'path', { d: "M7 10l5 5 5-5z" })
-    ); };
+  var DownArrow = function DownArrow(props) {
+    return /*#__PURE__*/React.createElement(SVG, props, /*#__PURE__*/React.createElement("path", {
+      d: "M7 10l5 5 5-5z"
+    }));
+  };
 
-  var Select = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, getMargin(props), { sx: {
-    display: 'flex'
-  } }),
-      React.createElement( Box, Object.assign({}, { ref: ref, as: "select", variant: "select" }, omitMargin(props), { __themeKey: "forms", __css: {
-      display: 'block',
-      width: '100%',
-      p: 2,
-      appearance: 'none',
-      fontSize: 'inherit',
-      lineHeight: 'inherit',
-      border: '1px solid',
-      borderRadius: 4,
-      color: 'inherit',
-      bg: 'transparent'
-    } })),
-      React.createElement( DownArrow, { sx: {
-      ml: -28,
-      alignSelf: 'center',
-      pointerEvents: 'none'
-    } })
-    ); });
+  var Select = React.forwardRef(function (props, ref) {
+    return /*#__PURE__*/React.createElement(Box, _extends({}, getMargin(props), {
+      sx: {
+        display: 'flex'
+      }
+    }), /*#__PURE__*/React.createElement(Box, _extends({
+      ref: ref,
+      as: "select",
+      variant: "select"
+    }, omitMargin(props), {
+      __themeKey: "forms",
+      __css: {
+        display: 'block',
+        width: '100%',
+        p: 2,
+        appearance: 'none',
+        fontSize: 'inherit',
+        lineHeight: 'inherit',
+        border: '1px solid',
+        borderRadius: 4,
+        color: 'inherit',
+        bg: 'transparent'
+      }
+    })), /*#__PURE__*/React.createElement(DownArrow, {
+      sx: {
+        ml: -28,
+        alignSelf: 'center',
+        pointerEvents: 'none'
+      }
+    }));
+  });
 
-  var Textarea = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "textarea", variant: "textarea" }, props, { __themeKey: "forms", __css: {
-    display: 'block',
-    width: '100%',
-    p: 2,
-    appearance: 'none',
-    fontSize: 'inherit',
-    lineHeight: 'inherit',
-    border: '1px solid',
-    borderRadius: 4,
-    color: 'inherit',
-    bg: 'transparent'
-  } })); });
+  var Textarea = React.forwardRef(function (props, ref) {
+    return /*#__PURE__*/React.createElement(Box, _extends({
+      ref: ref,
+      as: "textarea",
+      variant: "textarea"
+    }, props, {
+      __themeKey: "forms",
+      __css: {
+        display: 'block',
+        width: '100%',
+        p: 2,
+        appearance: 'none',
+        fontSize: 'inherit',
+        lineHeight: 'inherit',
+        border: '1px solid',
+        borderRadius: 4,
+        color: 'inherit',
+        bg: 'transparent'
+      }
+    }));
+  });
 
-  function objectWithoutProperties$2 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
+  var RadioChecked = function RadioChecked(props) {
+    return /*#__PURE__*/React.createElement(SVG, props, /*#__PURE__*/React.createElement("path", {
+      d: "M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+    }));
+  };
 
-  var RadioChecked = function (props) { return React.createElement( SVG, props,
-      React.createElement( 'path', { d: "M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" })
-    ); };
+  var RadioUnchecked = function RadioUnchecked(props) {
+    return /*#__PURE__*/React.createElement(SVG, props, /*#__PURE__*/React.createElement("path", {
+      d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+    }));
+  };
 
-  var RadioUnchecked = function (props) { return React.createElement( SVG, props,
-      React.createElement( 'path', { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" })
-    ); };
-
-  var RadioIcon = function (props) { return React.createElement( React.Fragment, null,
-      React.createElement( RadioChecked, Object.assign({}, props, { __css: {
-      display: 'none',
-      'input:checked ~ &': {
-        display: 'block'
+  var RadioIcon = function RadioIcon(props) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RadioChecked, _extends({}, props, {
+      __css: {
+        display: 'none',
+        'input:checked ~ &': {
+          display: 'block'
+        }
       }
-    } })),
-      React.createElement( RadioUnchecked, Object.assign({}, props, { __css: {
-      display: 'block',
-      'input:checked ~ &': {
-        display: 'none'
+    })), /*#__PURE__*/React.createElement(RadioUnchecked, _extends({}, props, {
+      __css: {
+        display: 'block',
+        'input:checked ~ &': {
+          display: 'none'
+        }
       }
-    } }))
-    ); };
+    })));
+  };
 
-  var Radio = React.forwardRef(function (ref$1, ref) {
-    var className = ref$1.className;
-    var sx = ref$1.sx;
-    var variant = ref$1.variant; if ( variant === void 0 ) variant = 'radio';
-    var rest = objectWithoutProperties$2( ref$1, ["className", "sx", "variant"] );
-    var props = rest;
+  var Radio = React.forwardRef(function (_ref, ref) {
+    var className = _ref.className,
+        sx = _ref.sx,
+        _ref$variant = _ref.variant,
+        variant = _ref$variant === void 0 ? 'radio' : _ref$variant,
+        props = _objectWithoutPropertiesLoose(_ref, ["className", "sx", "variant"]);
 
-    return React.createElement( Box, null,
-        React.createElement( Box, Object.assign({}, { ref: ref, as: "input", type: "radio" }, props, { sx: {
-      position: 'absolute',
-      opacity: 0,
-      zIndex: -1,
-      width: 1,
-      height: 1,
-      overflow: 'hidden'
-    } })),
-        React.createElement( Box, { as: RadioIcon, 'aria-hidden': "true", __themeKey: "forms", variant: variant, className: className, sx: sx, __css: {
-      // todo: system props??
-      mr: 2,
-      borderRadius: 9999,
-      color: 'gray',
-      'input:checked ~ &': {
-        color: 'primary'
-      },
-      'input:focus ~ &': {
-        bg: 'highlight'
+    return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Box, _extends({
+      ref: ref,
+      as: "input",
+      type: "radio"
+    }, props, {
+      sx: {
+        position: 'absolute',
+        opacity: 0,
+        zIndex: -1,
+        width: 1,
+        height: 1,
+        overflow: 'hidden'
       }
-    } })
-      );
+    })), /*#__PURE__*/React.createElement(Box, {
+      as: RadioIcon,
+      "aria-hidden": "true",
+      __themeKey: "forms",
+      variant: variant,
+      className: className,
+      sx: sx,
+      __css: {
+        // todo: system props??
+        mr: 2,
+        borderRadius: 9999,
+        color: 'gray',
+        flexShrink: 0,
+        'input:checked ~ &': {
+          color: 'primary'
+        },
+        'input:focus ~ &': {
+          bg: 'highlight'
+        }
+      }
+    }));
   });
 
-  function objectWithoutProperties$3 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
+  var CheckboxChecked = function CheckboxChecked(props) {
+    return /*#__PURE__*/React.createElement(SVG, props, /*#__PURE__*/React.createElement("path", {
+      d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+    }));
+  };
 
-  var CheckboxChecked = function (props) { return React.createElement( SVG, props,
-      React.createElement( 'path', { d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" })
-    ); };
+  var CheckboxUnchecked = function CheckboxUnchecked(props) {
+    return /*#__PURE__*/React.createElement(SVG, props, /*#__PURE__*/React.createElement("path", {
+      d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+    }));
+  };
 
-  var CheckboxUnchecked = function (props) { return React.createElement( SVG, props,
-      React.createElement( 'path', { d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" })
-    ); };
-
-  var CheckboxIcon = function (props) { return React.createElement( React.Fragment, null,
-      React.createElement( CheckboxChecked, Object.assign({}, props, { __css: {
-      display: 'none',
-      'input:checked ~ &': {
-        display: 'block'
+  var CheckboxIcon = function CheckboxIcon(props) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CheckboxChecked, _extends({}, props, {
+      __css: {
+        display: 'none',
+        'input:checked ~ &': {
+          display: 'block'
+        }
       }
-    } })),
-      React.createElement( CheckboxUnchecked, Object.assign({}, props, { __css: {
-      display: 'block',
-      'input:checked ~ &': {
-        display: 'none'
+    })), /*#__PURE__*/React.createElement(CheckboxUnchecked, _extends({}, props, {
+      __css: {
+        display: 'block',
+        'input:checked ~ &': {
+          display: 'none'
+        }
       }
-    } }))
-    ); };
+    })));
+  };
 
-  var Checkbox = React.forwardRef(function (ref$1, ref) {
-    var className = ref$1.className;
-    var sx = ref$1.sx;
-    var variant = ref$1.variant; if ( variant === void 0 ) variant = 'checkbox';
-    var rest = objectWithoutProperties$3( ref$1, ["className", "sx", "variant"] );
-    var props = rest;
+  var Checkbox = React.forwardRef(function (_ref, ref) {
+    var className = _ref.className,
+        sx = _ref.sx,
+        _ref$variant = _ref.variant,
+        variant = _ref$variant === void 0 ? 'checkbox' : _ref$variant,
+        children = _ref.children,
+        props = _objectWithoutPropertiesLoose(_ref, ["className", "sx", "variant", "children"]);
 
-    return React.createElement( Box, null,
-        React.createElement( Box, Object.assign({}, { ref: ref, as: "input", type: "checkbox" }, props, { sx: {
-      position: 'absolute',
-      opacity: 0,
-      zIndex: -1,
-      width: 1,
-      height: 1,
-      overflow: 'hidden'
-    } })),
-        React.createElement( Box, { as: CheckboxIcon, 'aria-hidden': "true", __themeKey: "forms", variant: variant, className: className, sx: sx, __css: {
-      mr: 2,
-      borderRadius: 4,
-      color: 'gray',
-      'input:checked ~ &': {
-        color: 'primary'
-      },
-      'input:focus ~ &': {
-        color: 'primary',
-        bg: 'highlight'
+    return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Box, _extends({
+      ref: ref,
+      as: "input",
+      type: "checkbox"
+    }, props, {
+      sx: {
+        position: 'absolute',
+        opacity: 0,
+        zIndex: -1,
+        width: 1,
+        height: 1,
+        overflow: 'hidden'
       }
-    } })
-      );
+    })), /*#__PURE__*/React.createElement(Box, {
+      as: CheckboxIcon,
+      "aria-hidden": "true",
+      __themeKey: "forms",
+      variant: variant,
+      className: className,
+      sx: sx,
+      __css: {
+        mr: 2,
+        borderRadius: 4,
+        color: 'gray',
+        flexShrink: 0,
+        'input:checked ~ &': {
+          color: 'primary'
+        },
+        'input:focus ~ &': {
+          color: 'primary',
+          bg: 'highlight'
+        }
+      }
+    }), children);
   });
@@ -294,68 +478,91 @@
   };
-  var Slider = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "input", type: "range", variant: "slider" }, props, { __themeKey: "forms", __css: {
-    display: 'block',
-    width: '100%',
-    height: 4,
-    my: 2,
-    cursor: 'pointer',
-    appearance: 'none',
-    borderRadius: 9999,
-    color: 'inherit',
-    bg: 'gray',
-    ':focus': {
-      outline: 'none',
-      color: 'primary'
-    },
-    '&::-webkit-slider-thumb': thumb,
-    '&::-moz-range-thumb': thumb,
-    '&::-ms-thumb': thumb
-  } })); });
+  var Slider = React.forwardRef(function (props, ref) {
+    return /*#__PURE__*/React.createElement(Box, _extends({
+      ref: ref,
+      as: "input",
+      type: "range",
+      variant: "slider"
+    }, props, {
+      __themeKey: "forms",
+      __css: {
+        display: 'block',
+        width: '100%',
+        height: 4,
+        my: 2,
+        cursor: 'pointer',
+        appearance: 'none',
+        borderRadius: 9999,
+        color: 'inherit',
+        bg: 'gray',
+        ':focus': {
+          outline: 'none',
+          color: 'primary'
+        },
+        '&::-webkit-slider-thumb': thumb,
+        '&::-moz-range-thumb': thumb,
+        '&::-ms-thumb': thumb
+      }
+    }));
+  });
 
-  function objectWithoutProperties$4 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
-  var Field = React.forwardRef(function (ref$1, ref) {
-    var Control = ref$1.as; if ( Control === void 0 ) Control = Input;
-    var label = ref$1.label;
-    var name = ref$1.name;
-    var rest = objectWithoutProperties$4( ref$1, ["as", "label", "name"] );
-    var props = rest;
+  var Field = React.forwardRef(function (_ref, ref) {
+    var _ref$as = _ref.as,
+        Control = _ref$as === void 0 ? Input : _ref$as,
+        label = _ref.label,
+        name = _ref.name,
+        props = _objectWithoutPropertiesLoose(_ref, ["as", "label", "name"]);
 
-    return React.createElement( Box, getMargin(props),
-          React.createElement( Label, { htmlFor: name }, label),
-          React.createElement( Control, Object.assign({}, { ref: ref, id: name, name: name }, omitMargin(props)))
-        );
+    return /*#__PURE__*/React.createElement(Box, getMargin(props), /*#__PURE__*/React.createElement(Label, {
+      htmlFor: name
+    }, label), /*#__PURE__*/React.createElement(Control, _extends({
+      ref: ref,
+      id: name,
+      name: name
+    }, omitMargin(props))));
   });
 
-  var Progress = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "progress", variant: "styles.progress" }, props, { __css: {
-    display: 'block',
-    width: '100%',
-    height: '4px',
-    margin: 0,
-    padding: 0,
-    overflow: 'hidden',
-    appearance: 'none',
-    color: 'primary',
-    bg: 'gray',
-    borderRadius: 9999,
-    border: 'none',
-    '&::-webkit-progress-bar': {
-      bg: 'transparent'
-    },
-    '&::-webkit-progress-value': {
-      bg: 'currentcolor'
-    },
-    '&::-moz-progress-bar': {
-      bg: 'currentcolor'
-    }
-  } })); });
+  var Progress = React.forwardRef(function (props, ref) {
+    return /*#__PURE__*/React.createElement(Box, _extends({
+      ref: ref,
+      as: "progress",
+      variant: "styles.progress"
+    }, props, {
+      __css: {
+        display: 'block',
+        width: '100%',
+        height: '4px',
+        margin: 0,
+        padding: 0,
+        overflow: 'hidden',
+        appearance: 'none',
+        color: 'primary',
+        bg: 'gray',
+        borderRadius: 9999,
+        border: 'none',
+        '&::-webkit-progress-bar': {
+          bg: 'transparent'
+        },
+        '&::-webkit-progress-value': {
+          bg: 'currentcolor'
+        },
+        '&::-moz-progress-bar': {
+          bg: 'currentcolor'
+        }
+      }
+    }));
+  });
 
-  function objectWithoutProperties$5 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
-  var Donut = React.forwardRef(function (ref$1, ref) {
-    var size = ref$1.size; if ( size === void 0 ) size = 128;
-    var strokeWidth = ref$1.strokeWidth; if ( strokeWidth === void 0 ) strokeWidth = 2;
-    var value = ref$1.value; if ( value === void 0 ) value = 0;
-    var min = ref$1.min; if ( min === void 0 ) min = 0;
-    var max = ref$1.max; if ( max === void 0 ) max = 1;
-    var title = ref$1.title;
-    var rest = objectWithoutProperties$5( ref$1, ["size", "strokeWidth", "value", "min", "max", "title"] );
-    var props = rest;
+  var Donut = React.forwardRef(function (_ref, ref) {
+    var _ref$size = _ref.size,
+        size = _ref$size === void 0 ? 128 : _ref$size,
+        _ref$strokeWidth = _ref.strokeWidth,
+        strokeWidth = _ref$strokeWidth === void 0 ? 2 : _ref$strokeWidth,
+        _ref$value = _ref.value,
+        value = _ref$value === void 0 ? 0 : _ref$value,
+        _ref$min = _ref.min,
+        min = _ref$min === void 0 ? 0 : _ref$min,
+        _ref$max = _ref.max,
+        max = _ref$max === void 0 ? 1 : _ref$max,
+        title = _ref.title,
+        props = _objectWithoutPropertiesLoose(_ref, ["size", "strokeWidth", "value", "min", "max", "title"]);
 
@@ -365,12 +572,34 @@ var r = 16 - strokeWidth;
     var offset = C - (value - min) / (max - min) * C;
-    return React.createElement( Box, Object.assign({}, { ref: ref, as: "svg", viewBox: "0 0 32 32", width: size, height: size, strokeWidth: strokeWidth, fill: "none", stroke: "currentcolor", role: "img", 'aria-valuenow': value, 'aria-valuemin': min, 'aria-valuemax': max }, props, { __css: {
-      color: 'primary'
-    } }),
-          title && React.createElement( 'title', null, title ),
-          React.createElement( 'circle', { cx: 16, cy: 16, r: r, opacity: 1 / 8 }),
-          React.createElement( 'circle', { cx: 16, cy: 16, r: r, strokeDasharray: C, strokeDashoffset: offset, transform: "rotate(-90 16 16)" })
-        );
+    return /*#__PURE__*/React.createElement(Box, _extends({
+      ref: ref,
+      as: "svg",
+      viewBox: "0 0 32 32",
+      width: size,
+      height: size,
+      strokeWidth: strokeWidth,
+      fill: "none",
+      stroke: "currentcolor",
+      role: "img",
+      "aria-valuenow": value,
+      "aria-valuemin": min,
+      "aria-valuemax": max
+    }, props, {
+      __css: {
+        color: 'primary'
+      }
+    }), title && /*#__PURE__*/React.createElement("title", null, title), /*#__PURE__*/React.createElement("circle", {
+      cx: 16,
+      cy: 16,
+      r: r,
+      opacity: 1 / 8
+    }), /*#__PURE__*/React.createElement("circle", {
+      cx: 16,
+      cy: 16,
+      r: r,
+      strokeDasharray: C,
+      strokeDashoffset: offset,
+      transform: "rotate(-90 16 16)"
+    }));
   });
 
-  function objectWithoutProperties$6 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
   var spin = core.keyframes({
@@ -384,9 +613,12 @@ from: {
   });
-  var Spinner = React.forwardRef(function (ref$1, ref) {
-    var size = ref$1.size; if ( size === void 0 ) size = 48;
-    var strokeWidth = ref$1.strokeWidth; if ( strokeWidth === void 0 ) strokeWidth = 4;
-    var title = ref$1.title; if ( title === void 0 ) title = 'Loading...';
-    var duration = ref$1.duration; if ( duration === void 0 ) duration = 500;
-    var rest = objectWithoutProperties$6( ref$1, ["size", "strokeWidth", "max", "title", "duration"] );
-    var props = rest;
+  var Spinner = React.forwardRef(function (_ref, ref) {
+    var _ref$size = _ref.size,
+        size = _ref$size === void 0 ? 48 : _ref$size,
+        _ref$strokeWidth = _ref.strokeWidth,
+        strokeWidth = _ref$strokeWidth === void 0 ? 4 : _ref$strokeWidth,
+        _ref$title = _ref.title,
+        title = _ref$title === void 0 ? 'Loading...' : _ref$title,
+        _ref$duration = _ref.duration,
+        duration = _ref$duration === void 0 ? 500 : _ref$duration,
+        props = _objectWithoutPropertiesLoose(_ref, ["size", "strokeWidth", "max", "title", "duration"]);
 
@@ -396,9 +628,30 @@ var r = 16 - strokeWidth;
     var offset = C - 1 / 4 * C;
-    return React.createElement( Box, Object.assign({}, { ref: ref, as: "svg", viewBox: "0 0 32 32", width: size, height: size, strokeWidth: strokeWidth, fill: "none", stroke: "currentcolor", role: "img" }, props, { __css: {
-      color: 'primary',
-      overflow: 'visible'
-    } }),
-          React.createElement( 'title', null, title ),
-          React.createElement( 'circle', { cx: 16, cy: 16, r: r, opacity: 1 / 8 }),
-          React.createElement( Box, { as: "circle", cx: 16, cy: 16, r: r, strokeDasharray: C, strokeDashoffset: offset, __css: {
+    return /*#__PURE__*/React.createElement(Box, _extends({
+      ref: ref,
+      as: "svg",
+      viewBox: "0 0 32 32",
+      width: size,
+      height: size,
+      strokeWidth: strokeWidth,
+      fill: "none",
+      stroke: "currentcolor",
+      role: "img"
+    }, props, {
+      __css: {
+        color: 'primary',
+        overflow: 'visible'
+      }
+    }), /*#__PURE__*/React.createElement("title", null, title), /*#__PURE__*/React.createElement("circle", {
+      cx: 16,
+      cy: 16,
+      r: r,
+      opacity: 1 / 8
+    }), /*#__PURE__*/React.createElement(Box, {
+      as: "circle",
+      cx: 16,
+      cy: 16,
+      r: r,
+      strokeDasharray: C,
+      strokeDashoffset: offset,
+      __css: {
         transformOrigin: '50% 50%',
@@ -409,227 +662,329 @@ animationName: spin.toString(),
         animationIterationCount: 'infinite'
-      } })
-        );
+      }
+    }));
   });
 
-  function objectWithoutProperties$7 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
-  var Avatar = React.forwardRef(function (ref$1, ref) {
-    var size = ref$1.size; if ( size === void 0 ) size = 48;
-    var rest = objectWithoutProperties$7( ref$1, ["size"] );
-    var props = rest;
+  var Avatar = React.forwardRef(function (_ref, ref) {
+    var _ref$size = _ref.size,
+        size = _ref$size === void 0 ? 48 : _ref$size,
+        props = _objectWithoutPropertiesLoose(_ref, ["size"]);
 
-    return React.createElement( Image, Object.assign({}, { ref: ref, width: size, height: size, variant: "avatar" }, props, { __css: {
-    borderRadius: 9999
-  } }));
+    return /*#__PURE__*/React.createElement(Image, _extends({
+      ref: ref,
+      width: size,
+      height: size,
+      variant: "avatar"
+    }, props, {
+      __css: {
+        borderRadius: 9999
+      }
+    }));
   });
 
-  var Badge = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref }, props, { __themeKey: "badges", __css: {
-    display: 'inline-block',
-    verticalAlign: 'baseline',
-    fontSize: 0,
-    fontWeight: 'bold',
-    whiteSpace: 'nowrap',
-    px: 1,
-    borderRadius: 2,
-    color: 'white',
-    bg: 'primary'
-  } })); });
+  var Badge = React.forwardRef(function (props, ref) {
+    return /*#__PURE__*/React.createElement(Box, _extends({
+      ref: ref,
+      variant: "primary"
+    }, props, {
+      __themeKey: "badges",
+      __css: {
+        display: 'inline-block',
+        verticalAlign: 'baseline',
+        fontSize: 0,
+        fontWeight: 'bold',
+        whiteSpace: 'nowrap',
+        px: 1,
+        borderRadius: 2,
+        color: 'white',
+        bg: 'primary'
+      }
+    }));
+  });
 
-  function objectWithoutProperties$8 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
-  var IconButton = React.forwardRef(function (ref$1, ref) {
-    var size = ref$1.size; if ( size === void 0 ) size = 32;
-    var rest = objectWithoutProperties$8( ref$1, ["size"] );
-    var props = rest;
+  var IconButton = React.forwardRef(function (_ref, ref) {
+    var _ref$size = _ref.size,
+        size = _ref$size === void 0 ? 32 : _ref$size,
+        props = _objectWithoutPropertiesLoose(_ref, ["size"]);
 
-    return React.createElement( Box, Object.assign({}, { ref: ref, as: "button", variant: "icon" }, props, { __themeKey: "buttons", __css: {
-    appearance: 'none',
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 1,
-    width: size,
-    height: size,
-    color: 'inherit',
-    bg: 'transparent',
-    border: 'none',
-    borderRadius: 4
-  } }));
+    return /*#__PURE__*/React.createElement(Box, _extends({
+      ref: ref,
+      as: "button",
+      variant: "icon"
+    }, props, {
+      __themeKey: "buttons",
+      __css: {
+        appearance: 'none',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 1,
+        width: size,
+        height: size,
+        color: 'inherit',
+        bg: 'transparent',
+        border: 'none',
+        borderRadius: 4
+      }
+    }));
   });
 
-  function objectWithoutProperties$9 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
-  var x = React.createElement( 'svg', { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "currentcolor", viewBox: "0 0 24 24" },
-      React.createElement( 'path', { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })
-    );
-  var Close = React.forwardRef(function (ref$1, ref) {
-    var rest = objectWithoutProperties$9( ref$1, ["size"] );
-    var props = rest;
+  var x = /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    fill: "currentcolor",
+    viewBox: "0 0 24 24"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+  }));
+  var Close = React.forwardRef(function (_ref, ref) {
+    var props = _objectWithoutPropertiesLoose(_ref, ["size"]);
 
-    return React.createElement( IconButton, Object.assign({}, { ref: ref, title: "Close", 'aria-label': "Close", variant: "close" }, props, { children: x }));
+    return /*#__PURE__*/React.createElement(IconButton, _extends({
+      ref: ref,
+      title: "Close",
+      "aria-label": "Close",
+      variant: "close"
+    }, props, {
+      children: x
+    }));
   });
 
-  var Alert = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref }, props, { __themeKey: "alerts", __css: {
-    display: 'flex',
-    alignItems: 'center',
-    px: 3,
-    py: 2,
-    fontWeight: 'bold',
-    color: 'white',
-    bg: 'primary',
-    borderRadius: 4
-  } })); });
+  var Alert = React.forwardRef(function (props, ref) {
+    return /*#__PURE__*/React.createElement(Box, _extends({
+      ref: ref,
+      variant: "primary"
+    }, props, {
+      __themeKey: "alerts",
+      __css: {
+        display: 'flex',
+        alignItems: 'center',
+        px: 3,
+        py: 2,
+        fontWeight: 'bold',
+        color: 'white',
+        bg: 'primary',
+        borderRadius: 4
+      }
+    }));
+  });
 
-  var Divider = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "hr", variant: "styles.hr" }, props, { __css: {
-    color: 'gray',
-    m: 0,
-    my: 2,
-    border: 0,
-    borderBottom: '1px solid'
-  } })); });
+  var Divider = React.forwardRef(function (props, ref) {
+    return /*#__PURE__*/React.createElement(Box, _extends({
+      ref: ref,
+      as: "hr",
+      variant: "styles.hr"
+    }, props, {
+      __css: {
+        color: 'gray',
+        m: 0,
+        my: 2,
+        border: 0,
+        borderBottom: '1px solid'
+      }
+    }));
+  });
 
-  function objectWithoutProperties$a (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
-  var Embed = React.forwardRef(function (ref$1, ref) {
-    var ratio = ref$1.ratio; if ( ratio === void 0 ) ratio = 16 / 9;
-    var src = ref$1.src;
-    var frameBorder = ref$1.frameBorder; if ( frameBorder === void 0 ) frameBorder = 0;
-    var allowFullScreen = ref$1.allowFullScreen; if ( allowFullScreen === void 0 ) allowFullScreen = true;
-    var width = ref$1.width; if ( width === void 0 ) width = 560;
-    var height = ref$1.height; if ( height === void 0 ) height = 315;
-    var allow = ref$1.allow;
-    var rest = objectWithoutProperties$a( ref$1, ["ratio", "src", "frameBorder", "allowFullScreen", "width", "height", "allow"] );
-    var props = rest;
+  var Embed = React.forwardRef(function (_ref, ref) {
+    var _ref$ratio = _ref.ratio,
+        ratio = _ref$ratio === void 0 ? 16 / 9 : _ref$ratio,
+        src = _ref.src,
+        _ref$frameBorder = _ref.frameBorder,
+        frameBorder = _ref$frameBorder === void 0 ? 0 : _ref$frameBorder,
+        _ref$allowFullScreen = _ref.allowFullScreen,
+        allowFullScreen = _ref$allowFullScreen === void 0 ? true : _ref$allowFullScreen,
+        _ref$width = _ref.width,
+        width = _ref$width === void 0 ? 560 : _ref$width,
+        _ref$height = _ref.height,
+        height = _ref$height === void 0 ? 315 : _ref$height,
+        allow = _ref.allow,
+        props = _objectWithoutPropertiesLoose(_ref, ["ratio", "src", "frameBorder", "allowFullScreen", "width", "height", "allow"]);
 
-    return React.createElement( Box, Object.assign({}, props, { __css: {
-    width: '100%',
-    height: 0,
-    paddingBottom: 100 / ratio + '%',
-    position: 'relative',
-    overflow: 'hidden'
-  } }),
-        React.createElement( Box, { ref: ref, as: "iframe", src: src, width: width, height: height, frameBorder: frameBorder, allowFullScreen: allowFullScreen, allow: allow, __css: {
-      position: 'absolute',
-      width: '100%',
-      height: '100%',
-      top: 0,
-      bottom: 0,
-      left: 0,
-      border: 0
-    } })
-      );
+    return /*#__PURE__*/React.createElement(Box, _extends({}, props, {
+      __css: {
+        width: '100%',
+        height: 0,
+        paddingBottom: 100 / ratio + '%',
+        position: 'relative',
+        overflow: 'hidden'
+      }
+    }), /*#__PURE__*/React.createElement(Box, {
+      ref: ref,
+      as: "iframe",
+      src: src,
+      width: width,
+      height: height,
+      frameBorder: frameBorder,
+      allowFullScreen: allowFullScreen,
+      allow: allow,
+      __css: {
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        border: 0
+      }
+    }));
   });
 
-  function objectWithoutProperties$b (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
-  var AspectRatio = React.forwardRef(function (ref$1, ref) {
-    var ratio = ref$1.ratio; if ( ratio === void 0 ) ratio = 4 / 3;
-    var children = ref$1.children;
-    var rest = objectWithoutProperties$b( ref$1, ["ratio", "children"] );
-    var props = rest;
+  var AspectRatio = React.forwardRef(function (_ref, ref) {
+    var _ref$ratio = _ref.ratio,
+        ratio = _ref$ratio === void 0 ? 4 / 3 : _ref$ratio,
+        children = _ref.children,
+        props = _objectWithoutPropertiesLoose(_ref, ["ratio", "children"]);
 
-    return React.createElement( Box, { ref: ref, sx: {
-    position: 'relative',
-    overflow: 'hidden'
-  } },
-        React.createElement( Box, { sx: {
-      width: '100%',
-      height: 0,
-      paddingBottom: 100 / ratio + '%'
-    } }),
-        React.createElement( Box, Object.assign({}, props, { __css: {
-      position: 'absolute',
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0
-    } }),
-          children
-        )
-      );
+    return /*#__PURE__*/React.createElement(Box, {
+      ref: ref,
+      sx: {
+        position: 'relative',
+        overflow: 'hidden'
+      }
+    }, /*#__PURE__*/React.createElement(Box, {
+      sx: {
+        width: '100%',
+        height: 0,
+        paddingBottom: 100 / ratio + '%'
+      }
+    }), /*#__PURE__*/React.createElement(Box, _extends({}, props, {
+      __css: {
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0
+      }
+    }), children));
   });
 
-  function objectWithoutProperties$c (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
-  var AspectImage = React.forwardRef(function (ref$1, ref) {
-    var ratio = ref$1.ratio;
-    var rest = objectWithoutProperties$c( ref$1, ["ratio"] );
-    var props = rest;
+  var AspectImage = React.forwardRef(function (_ref, ref) {
+    var ratio = _ref.ratio,
+        props = _objectWithoutPropertiesLoose(_ref, ["ratio"]);
 
-    return React.createElement( AspectRatio, { ratio: ratio },
-      React.createElement( Image, Object.assign({}, { ref: ref }, props, { __css: {
-      objectFit: 'cover'
-    } }))
-    );
+    return /*#__PURE__*/React.createElement(AspectRatio, {
+      ratio: ratio
+    }, /*#__PURE__*/React.createElement(Image, _extends({
+      ref: ref
+    }, props, {
+      __css: {
+        objectFit: 'cover'
+      }
+    })));
   });
 
-  var Container = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, variant: "container" }, props, { __themeKey: "layout", __css: {
-    width: '100%',
-    maxWidth: 'container',
-    mx: 'auto'
-  } })); });
+  var Container = React.forwardRef(function (props, ref) {
+    return /*#__PURE__*/React.createElement(Box, _extends({
+      ref: ref,
+      variant: "container"
+    }, props, {
+      __themeKey: "layout",
+      __css: {
+        width: '100%',
+        maxWidth: 'container',
+        mx: 'auto'
+      }
+    }));
+  });
 
-  var NavLink = React.forwardRef(function (props, ref) { return React.createElement( Link, Object.assign({}, { ref: ref, variant: "nav" }, props, { __css: {
-    color: 'inherit',
-    textDecoration: 'none',
-    fontWeight: 'bold',
-    display: 'inline-block',
-    '&:hover, &:focus, &.active': {
-      color: 'primary'
-    }
-  } })); });
+  var NavLink = React.forwardRef(function (props, ref) {
+    return /*#__PURE__*/React.createElement(Link, _extends({
+      ref: ref,
+      variant: "nav"
+    }, props, {
+      __css: {
+        color: 'inherit',
+        textDecoration: 'none',
+        fontWeight: 'bold',
+        display: 'inline-block',
+        '&:hover, &:focus, &.active': {
+          color: 'primary'
+        }
+      }
+    }));
+  });
 
-  var Message = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref }, props, { __themeKey: "messages", __css: {
-    padding: 3,
-    paddingLeft: function (t) { return t.space[3] - t.space[1]; },
-    borderLeftWidth: function (t) { return t.space[1]; },
-    borderLeftStyle: 'solid',
-    borderLeftColor: 'primary',
-    borderRadius: 4,
-    bg: 'highlight'
-  } })); });
+  var Message = React.forwardRef(function (props, ref) {
+    return /*#__PURE__*/React.createElement(Box, _extends({
+      ref: ref
+    }, props, {
+      __themeKey: "messages",
+      __css: {
+        padding: 3,
+        paddingLeft: function paddingLeft(t) {
+          return t.space[3] - t.space[1];
+        },
+        borderLeftWidth: function borderLeftWidth(t) {
+          return t.space[1];
+        },
+        borderLeftStyle: 'solid',
+        borderLeftColor: 'primary',
+        borderRadius: 4,
+        bg: 'highlight'
+      }
+    }));
+  });
 
-  var MenuIcon = function (ref) {
-    var size = ref.size; if ( size === void 0 ) size = 24;
-
-    return React.createElement( Box, { as: "svg", xmlns: "http://www.w3.org/2000/svg", width: size, height: size, fill: "currentcolor", viewBox: "0 0 24 24", sx: {
-    display: 'block',
-    margin: 0
-  } },
-      React.createElement( 'path', { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" })
-    );
+  var MenuIcon = function MenuIcon(_ref) {
+    var _ref$size = _ref.size,
+        size = _ref$size === void 0 ? 24 : _ref$size;
+    return /*#__PURE__*/React.createElement(Box, {
+      as: "svg",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      fill: "currentcolor",
+      viewBox: "0 0 24 24",
+      sx: {
+        display: 'block',
+        margin: 0
+      }
+    }, /*#__PURE__*/React.createElement("path", {
+      d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+    }));
   };
-  var MenuButton = React.forwardRef(function (props, ref) { return React.createElement( IconButton, Object.assign({}, { ref: ref, title: "Menu", 'aria-label': "Toggle Menu", variant: "menu" }, props),
-      React.createElement( MenuIcon, null )
-    ); });
+  var MenuButton = React.forwardRef(function (props, ref) {
+    return /*#__PURE__*/React.createElement(IconButton, _extends({
+      ref: ref,
+      title: "Menu",
+      "aria-label": "Toggle Menu",
+      variant: "menu"
+    }, props), /*#__PURE__*/React.createElement(MenuIcon, null));
+  });
 
+  exports.Alert = Alert;
+  exports.AspectImage = AspectImage;
+  exports.AspectRatio = AspectRatio;
+  exports.Avatar = Avatar;
+  exports.Badge = Badge;
   exports.Box = Box;
+  exports.Button = Button;
+  exports.Card = Card;
+  exports.Checkbox = Checkbox;
+  exports.Close = Close;
+  exports.Container = Container;
+  exports.Divider = Divider;
+  exports.Donut = Donut;
+  exports.Embed = Embed;
+  exports.Field = Field;
   exports.Flex = Flex;
   exports.Grid = Grid;
-  exports.Button = Button;
-  exports.Link = Link;
-  exports.Text = Text;
   exports.Heading = Heading;
+  exports.IconButton = IconButton;
   exports.Image = Image;
-  exports.Card = Card;
+  exports.Input = Input;
   exports.Label = Label;
-  exports.Input = Input;
+  exports.Link = Link;
+  exports.MenuButton = MenuButton;
+  exports.Message = Message;
+  exports.NavLink = NavLink;
+  exports.Progress = Progress;
+  exports.Radio = Radio;
   exports.Select = Select;
-  exports.Textarea = Textarea;
-  exports.Radio = Radio;
-  exports.Checkbox = Checkbox;
   exports.Slider = Slider;
-  exports.Field = Field;
-  exports.Progress = Progress;
-  exports.Donut = Donut;
   exports.Spinner = Spinner;
-  exports.Avatar = Avatar;
-  exports.Badge = Badge;
-  exports.Close = Close;
-  exports.Alert = Alert;
-  exports.Divider = Divider;
-  exports.Embed = Embed;
-  exports.AspectRatio = AspectRatio;
-  exports.AspectImage = AspectImage;
-  exports.Container = Container;
-  exports.NavLink = NavLink;
-  exports.Message = Message;
-  exports.IconButton = IconButton;
-  exports.MenuButton = MenuButton;
+  exports.Text = Text;
+  exports.Textarea = Textarea;
 
 })));
 //# sourceMappingURL=index.umd.js.map

package.json

 {
   "name": "@theme-ui/components",
-  "version": "0.4.0-rc.1",
+  "version": "0.4.0-rc.3",
   "main": "dist/index.js",
@@ -19,3 +19,3 @@ "module": "dist/index.esm.js",
     "@styled-system/space": "^5.1.2",
-    "@theme-ui/css": "^0.4.0-rc.1"
+    "@theme-ui/css": "^0.4.0-rc.3"
   },
@@ -30,3 +30,3 @@ "peerDependencies": {
   "license": "MIT",
-  "gitHead": "66281f5681031ae26f80fbaef007e0b28ba07142"
+  "gitHead": "2c3fea31b3e8fd892968bef49bd6407d8999a848"
 }

src/Alert.js

@@ -7,2 +7,3 @@ import React from 'react'
     ref={ref}
+    variant="primary"
     {...props}
@@ -9,0 +10,0 @@ __themeKey="alerts"

src/Badge.js

@@ -7,2 +7,3 @@ import React from 'react'
     ref={ref}
+    variant="primary"
     {...props}
@@ -9,0 +10,0 @@ __themeKey="badges"

src/Checkbox.js

@@ -5,3 +5,3 @@ import React from 'react'
 
-const CheckboxChecked = props => (
+const CheckboxChecked = (props) => (
   <SVG {...props}>
@@ -12,3 +12,3 @@ <path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
 
-const CheckboxUnchecked = props => (
+const CheckboxUnchecked = (props) => (
   <SVG {...props}>
@@ -19,3 +19,3 @@ <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" />
 
-const CheckboxIcon = props => (
+const CheckboxIcon = (props) => (
   <React.Fragment>
@@ -44,3 +44,3 @@ <CheckboxChecked
 export const Checkbox = React.forwardRef(
-  ({ className, sx, variant = 'checkbox', ...props }, ref) => (
+  ({ className, sx, variant = 'checkbox', children, ...props }, ref) => (
     <Box>
@@ -72,2 +72,3 @@ <Box
           color: 'gray',
+          flexShrink: 0,
           'input:checked ~ &': {
@@ -82,4 +83,5 @@ color: 'primary',
       />
+      {children}
     </Box>
   )
 )

src/Radio.js

@@ -5,3 +5,3 @@ import React from 'react'
 
-const RadioChecked = props => (
+const RadioChecked = (props) => (
   <SVG {...props}>
@@ -12,3 +12,3 @@ <path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" />
 
-const RadioUnchecked = props => (
+const RadioUnchecked = (props) => (
   <SVG {...props}>
@@ -19,3 +19,3 @@ <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" />
 
-const RadioIcon = props => (
+const RadioIcon = (props) => (
   <React.Fragment>
@@ -72,2 +72,3 @@ <RadioChecked
           color: 'gray',
+          flexShrink: 0,
           'input:checked ~ &': {
@@ -74,0 +75,0 @@ color: 'primary',

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

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

Total package byte prevSize

342838

increased by33.11%

Number of package files

51

increased by4.08%

Lines of code

5209

increased by53.07%

Dependency changes

• Updated@theme-ui/css@^0.4.0-rc.3