@theme-ui/components - npm Package Compare versions

Comparing version 0.4.0-rc.11 to 0.4.0-rc.12

dist/index.modern.js

@@ -33,2 +33,35 @@ import styled from '@emotion/styled';
 
+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;
@@ -40,11 +73,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
@@ -55,3 +90,3 @@ }, props, {
       display: 'grid',
-      gridGap: _gap,
+      gridGap: gap,
       gridTemplateColumns
@@ -62,3 +97,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,
@@ -85,3 +120,3 @@ as: "button",
 
-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,
@@ -94,3 +129,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,
@@ -102,3 +137,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,
@@ -116,3 +151,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,
@@ -122,10 +157,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,
@@ -137,3 +171,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,
@@ -150,3 +184,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,
@@ -171,14 +205,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 => {
@@ -201,36 +239,40 @@ const next = {};
 
-const Select = React.forwardRef(({
-  arrow,
-  ...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'
-  }
-})), arrow || /*#__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,
@@ -263,3 +305,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: {
@@ -271,3 +313,3 @@ display: 'none',
   }
-})), /*#__PURE__*/React.createElement(RadioUnchecked, Object.assign({}, props, {
+})), /*#__PURE__*/React.createElement(RadioUnchecked, _extends({}, props, {
   __css: {
@@ -281,45 +323,49 @@ display: 'block',
 
-const Radio = React.forwardRef(({
-  className,
-  sx,
-  variant: _variant = 'radio',
-  ...props
-}, ref) => /*#__PURE__*/React.createElement(Box, {
-  sx: {
-    minWidth: 'min-content'
-  }
-}, /*#__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'
+      }
+    }
+  }));
+});
 
@@ -334,3 +380,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: {
@@ -342,3 +388,3 @@ display: 'none',
   }
-})), /*#__PURE__*/React.createElement(CheckboxUnchecked, Object.assign({}, props, {
+})), /*#__PURE__*/React.createElement(CheckboxUnchecked, _extends({}, props, {
   __css: {
@@ -352,56 +398,62 @@ display: 'block',
 
-const Checkbox = React.forwardRef(({
-  className,
-  sx,
-  variant: _variant = 'checkbox',
-  children,
-  ...props
-}, ref) => /*#__PURE__*/React.createElement(Box, {
-  sx: {
-    minWidth: 'min-content'
-  }
-}, /*#__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'
-    },
-    'input:focus ~ &': {
-      color: 'primary',
-      bg: 'highlight'
+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'
     }
-  }
-}), children));
+  }, /*#__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(({
-  className,
-  label,
-  sx,
-  variant: _variant = 'switch',
-  ...props
-}, ref) => {
+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, {
@@ -411,3 +463,3 @@ sx: {
     }
-  }, /*#__PURE__*/React.createElement(Box, Object.assign({
+  }, /*#__PURE__*/React.createElement(Box, _extends({
     ref: ref,
@@ -432,3 +484,3 @@ as: "input",
     __themeKey: "forms",
-    variant: _variant,
+    variant: variant,
     className: className,
@@ -478,3 +530,3 @@ sx: sx,
 };
-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,
@@ -506,13 +558,15 @@ as: "input",
 
-const Field = React.forwardRef(({
-  as: Control = Input,
-  label,
-  id,
-  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: fieldIdentifier
-  }, label), /*#__PURE__*/React.createElement(Control, Object.assign({
+  }, label), /*#__PURE__*/React.createElement(Control, _extends({
     ref: ref,
@@ -524,3 +578,3 @@ id: fieldIdentifier,
 
-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,
@@ -554,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, {
@@ -607,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",
@@ -634,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,
@@ -651,3 +709,3 @@ cy: 16,
       animationTimingFunction: 'linear',
-      animationDuration: _duration + 'ms',
+      animationDuration: duration + 'ms',
       animationIterationCount: 'infinite'
@@ -658,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,
@@ -691,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", {
@@ -725,16 +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,
-  size: _size,
-  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,
@@ -756,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,
@@ -771,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,
@@ -860,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,
@@ -876,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
@@ -908,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,
@@ -911,0 +993,0 @@ title: "Menu",

package.json

 {
   "name": "@theme-ui/components",
-  "version": "0.4.0-rc.11",
+  "version": "0.4.0-rc.12",
   "main": "dist/index.js",
@@ -30,3 +30,3 @@ "module": "dist/index.esm.js",
   "license": "MIT",
-  "gitHead": "7a97b423774254db514139cb557d8636d5231725"
+  "gitHead": "3ed98e25cb915f0f6d55c64ac8c5026ef81e074f"
 }

test/index.js

 import React from 'react'
-import renderer from 'react-test-renderer'
+import { renderJSON } from '@theme-ui/test-utils'
 import { matchers } from 'jest-emotion'
@@ -43,4 +43,2 @@ import { ThemeProvider } from 'theme-ui'
 
-const renderJSON = (el) => renderer.create(el).toJSON()
-
 const theme = {
@@ -47,0 +45,0 @@ boxes: {

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

390849

increased by0.95%

Lines of code

6106

increased by0.98%

No dependency changes