@theme-ui/components - npm Package Compare versions

Comparing version 0.3.3 to 0.3.4

dist/index.modern.js

@@ -7,3 +7,3 @@ import styled from '@emotion/styled';
 import React from 'react';
-import { keyframes } from '@emotion/core';
+import { keyframes } from '@emotion/react';
 
@@ -34,2 +34,35 @@ const shouldForwardProp = createShouldForwardProp([...space.propNames, ...color.propNames]);
 
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+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;
+}
+
 const px = n => typeof n === 'number' ? n + 'px' : n;
@@ -41,11 +74,13 @@
 
-const Grid = React.forwardRef(({
-  width,
-  columns,
-  gap: _gap = 3,
-  repeat: _repeat = 'fit',
-  ...props
-}, ref) => {
-  const gridTemplateColumns = !!width ? widthToColumns(width, _repeat) : countToColumns(columns);
-  return /*#__PURE__*/React.createElement(Box, Object.assign({
+const Grid = React.forwardRef((_ref, ref) => {
+  let {
+    width,
+    columns,
+    gap = 3,
+    repeat = 'fit'
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, ["width", "columns", "gap", "repeat"]);
+
+  const gridTemplateColumns = !!width ? widthToColumns(width, repeat) : countToColumns(columns);
+  return /*#__PURE__*/React.createElement(Box, _extends({
     ref: ref
@@ -56,3 +91,3 @@ }, props, {
       display: 'grid',
-      gridGap: _gap,
+      gridGap: gap,
       gridTemplateColumns
@@ -63,3 +98,3 @@ }
 
-const Button = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({
+const Button = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({
   ref: ref,
@@ -72,3 +107,3 @@ as: "button",
     appearance: 'none',
-    display: 'inline-block',
+    display: props.hidden ? undefined : 'inline-block',
     textAlign: 'center',
@@ -87,3 +122,3 @@ lineHeight: 'inherit',
 
-const Link = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({
+const Link = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({
   ref: ref,
@@ -96,3 +131,3 @@ as: "a",
 
-const Text = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({
+const Text = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({
   ref: ref,
@@ -104,3 +139,3 @@ variant: "default"
 
-const Heading = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({
+const Heading = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({
   ref: ref,
@@ -118,3 +153,3 @@ as: "h2",
 
-const Image = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({
+const Image = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({
   ref: ref,
@@ -124,10 +159,9 @@ as: "img"
   __themeKey: "images",
-  __css: {
+  __css: _extends({
     maxWidth: '100%',
-    height: 'auto',
-    ...props.__css
-  }
+    height: 'auto'
+  }, props.__css)
 })));
 
-const Card = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({
+const Card = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({
   ref: ref,
@@ -139,3 +173,3 @@ variant: "primary"
 
-const Label = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({
+const Label = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({
   ref: ref,
@@ -152,3 +186,3 @@ as: "label",
 
-const Input = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({
+const Input = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({
   ref: ref,
@@ -173,14 +207,18 @@ as: "input",
 
-var SVG = (({
-  size: _size = 24,
-  ...props
-}) => /*#__PURE__*/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)));
+var SVG = ((_ref) => {
+  let {
+    size = 24
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, ["size"]);
 
+  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));
+});
+
 const getProps = test => props => {
@@ -203,33 +241,40 @@ const next = {};
 
-const Select = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({}, getMargin(props), {
-  sx: {
-    display: 'flex'
-  }
-}), /*#__PURE__*/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'
-  }
-})), /*#__PURE__*/React.createElement(DownArrow, {
-  sx: {
-    ml: -28,
-    alignSelf: 'center',
-    pointerEvents: 'none'
-  }
-})));
+const Select = React.forwardRef((_ref, ref) => {
+  let {
+    arrow
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, ["arrow"]);
 
-const Textarea = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({
+  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'
+    }
+  })), arrow || /*#__PURE__*/React.createElement(DownArrow, {
+    sx: {
+      ml: -28,
+      alignSelf: 'center',
+      pointerEvents: 'none'
+    }
+  }));
+});
+
+const Textarea = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({
   ref: ref,
@@ -262,3 +307,3 @@ as: "textarea",
 
-const RadioIcon = props => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RadioChecked, Object.assign({}, props, {
+const RadioIcon = props => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RadioChecked, _extends({}, props, {
   __css: {
@@ -270,3 +315,3 @@ display: 'none',
   }
-})), /*#__PURE__*/React.createElement(RadioUnchecked, Object.assign({}, props, {
+})), /*#__PURE__*/React.createElement(RadioUnchecked, _extends({}, props, {
   __css: {
@@ -280,41 +325,49 @@ display: 'block',
 
-const Radio = React.forwardRef(({
-  className,
-  sx,
-  variant: _variant = 'radio',
-  ...props
-}, ref) => /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/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'
-  }
-})), /*#__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'
+const Radio = React.forwardRef((_ref, ref) => {
+  let {
+    className,
+    sx,
+    variant = 'radio'
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, ["className", "sx", "variant"]);
+
+  return /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      minWidth: 'min-content'
     }
-  }
-})));
+  }, /*#__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'
+      }
+    }
+  }));
+});
 
@@ -329,3 +382,3 @@ const CheckboxChecked = props => /*#__PURE__*/React.createElement(SVG, props, /*#__PURE__*/React.createElement("path", {
 
-const CheckboxIcon = props => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CheckboxChecked, Object.assign({}, props, {
+const CheckboxIcon = props => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CheckboxChecked, _extends({}, props, {
   __css: {
@@ -337,3 +390,3 @@ display: 'none',
   }
-})), /*#__PURE__*/React.createElement(CheckboxUnchecked, Object.assign({}, props, {
+})), /*#__PURE__*/React.createElement(CheckboxUnchecked, _extends({}, props, {
   __css: {
@@ -347,42 +400,121 @@ display: 'block',
 
-const Checkbox = React.forwardRef(({
-  className,
-  sx,
-  variant: _variant = 'checkbox',
-  children,
-  ...props
-}, ref) => /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/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'
-  }
-})), /*#__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'
+const Checkbox = React.forwardRef((_ref, ref) => {
+  let {
+    className,
+    sx,
+    variant = 'checkbox',
+    children
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, ["className", "sx", "variant", "children"]);
+
+  return /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      minWidth: 'min-content'
+    }
+  }, /*#__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);
+});
+
+const GUTTER = 2;
+const SIZE = 18;
+const Switch = React.forwardRef((_ref, ref) => {
+  let {
+    className,
+    label,
+    sx,
+    variant = 'switch'
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, ["className", "label", "sx", "variant"]);
+
+  return /*#__PURE__*/React.createElement(Label, {
+    sx: {
+      cursor: 'pointer'
+    }
+  }, /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    as: "input",
+    type: "checkbox",
+    __themeKey: "forms",
+    "aria-label": label
+  }, props, {
+    sx: {
+      position: 'absolute',
+      opacity: 0,
+      zIndex: -1,
+      width: 1,
+      height: 1,
+      overflow: 'hidden'
+    }
+  })), /*#__PURE__*/React.createElement(Box, {
+    css: {
+      padding: GUTTER
     },
-    'input:focus ~ &': {
-      color: 'primary',
-      bg: 'highlight'
+    __themeKey: "forms",
+    variant: variant,
+    className: className,
+    sx: sx,
+    __css: {
+      position: 'relative',
+      bg: 'gray',
+      borderRadius: SIZE,
+      height: SIZE + GUTTER * 2,
+      width: SIZE * 2 + GUTTER * 2,
+      mr: 2,
+      'input:disabled ~ &': {
+        opacity: 0.5,
+        cursor: 'not-allowed'
+      },
+      '& > div': {
+        display: 'flex',
+        alignItems: 'center',
+        borderRadius: '50%',
+        height: SIZE,
+        width: SIZE,
+        bg: 'white',
+        boxShadow: '0 1px 2px rgba(0, 0, 0, 0.1)',
+        position: 'relative',
+        transform: 'translateX(0%)',
+        transition: `transform 240ms cubic-bezier(0.165, 0.840, 0.440, 1.000)`
+      },
+      'input:checked ~ &': {
+        bg: 'primary',
+        '> div': {
+          transform: 'translateX(100%)'
+        }
+      }
     }
-  }
-}), children));
+  }, /*#__PURE__*/React.createElement(Box, null)), /*#__PURE__*/React.createElement("span", null, label));
+});
 
@@ -398,3 +530,3 @@ const thumb = {
 };
-const Slider = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({
+const Slider = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({
   ref: ref,
@@ -426,13 +558,17 @@ as: "input",
 
-const Field = React.forwardRef(({
-  as: Control = Input,
-  label,
-  name,
-  ...props
-}, ref) => {
+const Field = React.forwardRef((_ref, ref) => {
+  let {
+    as: Control = Input,
+    label,
+    id,
+    name
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, ["as", "label", "id", "name"]);
+
+  const fieldIdentifier = id || name;
   return /*#__PURE__*/React.createElement(Box, getMargin(props), /*#__PURE__*/React.createElement(Label, {
-    htmlFor: name
-  }, label), /*#__PURE__*/React.createElement(Control, Object.assign({
+    htmlFor: fieldIdentifier
+  }, label), /*#__PURE__*/React.createElement(Control, _extends({
     ref: ref,
-    id: name,
+    id: fieldIdentifier,
     name: name
@@ -442,3 +578,3 @@ }, omitMargin(props))));
 
-const Progress = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({
+const Progress = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({
   ref: ref,
@@ -472,27 +608,29 @@ as: "progress",
 
-const Donut = React.forwardRef(({
-  size: _size = 128,
-  strokeWidth: _strokeWidth = 2,
-  value: _value = 0,
-  min: _min = 0,
-  max: _max = 1,
-  title,
-  ...props
-}, ref) => {
-  const r = 16 - _strokeWidth;
+const Donut = React.forwardRef((_ref, ref) => {
+  let {
+    size = 128,
+    strokeWidth = 2,
+    value = 0,
+    min = 0,
+    max = 1,
+    title
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, ["size", "strokeWidth", "value", "min", "max", "title"]);
+
+  const r = 16 - strokeWidth;
   const C = 2 * r * Math.PI;
-  const offset = C - (_value - _min) / (_max - _min) * C;
-  return /*#__PURE__*/React.createElement(Box, Object.assign({
+  const offset = C - (value - min) / (max - min) * C;
+  return /*#__PURE__*/React.createElement(Box, _extends({
     ref: ref,
     as: "svg",
     viewBox: "0 0 32 32",
-    width: _size,
-    height: _size,
-    strokeWidth: _strokeWidth,
+    width: size,
+    height: size,
+    strokeWidth: strokeWidth,
     fill: "none",
     stroke: "currentcolor",
     role: "img",
-    "aria-valuenow": _value,
-    "aria-valuemin": _min,
-    "aria-valuemax": _max
+    "aria-valuenow": value,
+    "aria-valuemin": min,
+    "aria-valuemax": max
   }, props, {
@@ -525,20 +663,22 @@ __css: {
 });
-const Spinner = React.forwardRef(({
-  size: _size = 48,
-  strokeWidth: _strokeWidth = 4,
-  max: _max = 1,
-  title: _title = 'Loading...',
-  duration: _duration = 500,
-  ...props
-}, ref) => {
-  const r = 16 - _strokeWidth;
+const Spinner = React.forwardRef((_ref, ref) => {
+  let {
+    size = 48,
+    strokeWidth = 4,
+    max = 1,
+    title = 'Loading...',
+    duration = 500
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, ["size", "strokeWidth", "max", "title", "duration"]);
+
+  const r = 16 - strokeWidth;
   const C = 2 * r * Math.PI;
   const offset = C - 1 / 4 * C;
-  return /*#__PURE__*/React.createElement(Box, Object.assign({
+  return /*#__PURE__*/React.createElement(Box, _extends({
     ref: ref,
     as: "svg",
     viewBox: "0 0 32 32",
-    width: _size,
-    height: _size,
-    strokeWidth: _strokeWidth,
+    width: size,
+    height: size,
+    strokeWidth: strokeWidth,
     fill: "none",
@@ -552,3 +692,3 @@ stroke: "currentcolor",
     }
-  }), /*#__PURE__*/React.createElement("title", null, _title), /*#__PURE__*/React.createElement("circle", {
+  }), /*#__PURE__*/React.createElement("title", null, title), /*#__PURE__*/React.createElement("circle", {
     cx: 16,
@@ -569,3 +709,3 @@ cy: 16,
       animationTimingFunction: 'linear',
-      animationDuration: _duration + 'ms',
+      animationDuration: duration + 'ms',
       animationIterationCount: 'infinite'
@@ -576,17 +716,21 @@ }
 
-const Avatar = React.forwardRef(({
-  size: _size = 48,
-  ...props
-}, ref) => /*#__PURE__*/React.createElement(Image, Object.assign({
-  ref: ref,
-  width: _size,
-  height: _size,
-  variant: "avatar"
-}, props, {
-  __css: {
-    borderRadius: 9999
-  }
-})));
+const Avatar = React.forwardRef((_ref, ref) => {
+  let {
+    size = 48
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, ["size"]);
 
-const Badge = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({
+  return /*#__PURE__*/React.createElement(Image, _extends({
+    ref: ref,
+    width: size,
+    height: size,
+    variant: "avatar"
+  }, props, {
+    __css: {
+      borderRadius: 9999
+    }
+  }));
+});
+
+const Badge = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({
   ref: ref,
@@ -609,26 +753,30 @@ variant: "primary"
 
-const IconButton = React.forwardRef(({
-  size: _size = 32,
-  ...props
-}, ref) => /*#__PURE__*/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
-  }
-})));
+const IconButton = React.forwardRef((_ref, ref) => {
+  let {
+    size = 32
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, ["size"]);
 
+  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
+    }
+  }));
+});
+
 const x = /*#__PURE__*/React.createElement("svg", {
@@ -643,15 +791,20 @@ xmlns: "http://www.w3.org/2000/svg",
 }));
-const Close = React.forwardRef(({
-  size: _size = 32,
-  ...props
-}, ref) => /*#__PURE__*/React.createElement(IconButton, Object.assign({
-  ref: ref,
-  title: "Close",
-  "aria-label": "Close",
-  variant: "close"
-}, props, {
-  children: x
-})));
+const Close = React.forwardRef((_ref, ref) => {
+  let {
+    size = 32
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, ["size"]);
 
-const Alert = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({
+  return /*#__PURE__*/React.createElement(IconButton, _extends({
+    ref: ref,
+    size: size,
+    title: "Close",
+    "aria-label": "Close",
+    variant: "close"
+  }, props, {
+    children: x
+  }));
+});
+
+const Alert = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({
   ref: ref,
@@ -673,3 +826,3 @@ variant: "primary"
 
-const Divider = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({
+const Divider = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({
   ref: ref,
@@ -688,79 +841,91 @@ as: "hr",
 
-const Embed = React.forwardRef(({
-  ratio: _ratio = 16 / 9,
-  src,
-  frameBorder: _frameBorder = 0,
-  allowFullScreen: _allowFullScreen = true,
-  width: _width = 560,
-  height: _height = 315,
-  allow,
-  ...props
-}, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({}, 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
-  }
-})));
+const Embed = React.forwardRef((_ref, ref) => {
+  let {
+    ratio = 16 / 9,
+    src,
+    frameBorder = 0,
+    allowFullScreen = true,
+    width = 560,
+    height = 315,
+    allow
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, ["ratio", "src", "frameBorder", "allowFullScreen", "width", "height", "allow"]);
 
-const AspectRatio = React.forwardRef(({
-  ratio: _ratio = 4 / 3,
-  children,
-  ...props
-}, ref) => /*#__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, Object.assign({}, props, {
-  __css: {
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0
-  }
-}), children)));
+  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
+    }
+  }));
+});
 
-const AspectImage = React.forwardRef(({
-  ratio,
-  ...props
-}, ref) => /*#__PURE__*/React.createElement(AspectRatio, {
-  ratio: ratio
-}, /*#__PURE__*/React.createElement(Image, Object.assign({
-  ref: ref
-}, props, {
-  __css: {
-    objectFit: 'cover'
-  }
-}))));
+const AspectRatio = React.forwardRef((_ref, ref) => {
+  let {
+    ratio = 4 / 3,
+    children
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, ["ratio", "children"]);
 
-const Container = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({
+  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));
+});
+
+const AspectImage = React.forwardRef((_ref, ref) => {
+  let {
+    ratio
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, ["ratio"]);
+
+  return /*#__PURE__*/React.createElement(AspectRatio, {
+    ratio: ratio
+  }, /*#__PURE__*/React.createElement(Image, _extends({
+    ref: ref
+  }, props, {
+    __css: {
+      objectFit: 'cover'
+    }
+  })));
+});
+
+const Container = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({
   ref: ref,
@@ -777,3 +942,3 @@ variant: "container"
 
-const NavLink = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Link, Object.assign({
+const NavLink = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Link, _extends({
   ref: ref,
@@ -793,3 +958,3 @@ variant: "nav"
 
-const Message = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({
+const Message = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({
   ref: ref
@@ -825,3 +990,3 @@ }, props, {
 }));
-const MenuButton = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(IconButton, Object.assign({
+const MenuButton = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(IconButton, _extends({
   ref: ref,
@@ -833,3 +998,3 @@ title: "Menu",
 
-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 };
+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, Switch, Text, Textarea };
 //# sourceMappingURL=index.modern.js.map

package.json

 {
   "name": "@theme-ui/components",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "main": "dist/index.js",
@@ -17,3 +17,3 @@ "module": "dist/index.esm.js",
     "@styled-system/space": "^5.1.2",
-    "@theme-ui/css": "^0.3.3"
+    "@theme-ui/css": "^0.3.4"
   },
@@ -28,3 +28,3 @@ "peerDependencies": {
   "license": "MIT",
-  "gitHead": "bfba2df8fdd01119c3af6a233355db1955c54ba0"
+  "gitHead": "7840f829dea27b554c5cd1cb00470770fceca2eb"
 }

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

316626

increased by3.18%

Lines of code

3960

increased by3.72%

Dependency changes

• Updated@theme-ui/css@^0.3.4