@automattic/vip-design-system 0.9.6 → 0.10.2

package/build/system/Dialog/Dialog.js

@@ -1,8 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.Dialog = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _framerMotion = require("framer-motion");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -15,12 +21,6 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["trigger", "position", "startOpen", "content", "disabled"];
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-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; }
-
 var Dialog = function Dialog(_ref) {
   var trigger = _ref.trigger,
       _ref$position = _ref.position,
@@ -30,7 +30,7 @@ var Dialog = function Dialog(_ref) {
       content = _ref.content,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
 
   var _useState = (0, _react.useState)(startOpen),
       isOpen = _useState[0],
@@ -81,6 +81,7 @@ var Dialog = function Dialog(_ref) {
       position: 'relative'
     },
     ref: dialogRef,
+    className: "vip-dialog-component",
     children: [(0, _jsxRuntime.jsx)(_.DialogTrigger, {
       tabIndex: "0",
       sx: {
@@ -92,7 +93,7 @@ var Dialog = function Dialog(_ref) {
       "aria-expanded": isOpen,
       children: trigger
     }), (0, _jsxRuntime.jsx)(_framerMotion.AnimatePresence, {
-      children: isOpen && (0, _jsxRuntime.jsx)(_.DialogContent, _extends({}, props, {
+      children: isOpen && (0, _jsxRuntime.jsx)(_.DialogContent, (0, _extends2["default"])({}, props, {
         position: position,
         onClose: function onClose() {
           return setIsOpen(false);

package/build/system/Dialog/Dialog.stories.js

@@ -1,20 +1,12 @@
 "use strict";
 
 exports.__esModule = true;
-exports.Default = exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
+exports["default"] = exports.Default = void 0;
 
 var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-/**
- * External dependencies
- */
-
 /**
  * Internal dependencies
  */

package/build/system/Dialog/DialogButton.js

@@ -1,8 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.DialogButton = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _md = require("react-icons/md");
@@ -13,21 +19,14 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["label", "variant", "value", "children"];
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-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; }
-
 var DialogButton = function DialogButton(_ref) {
   var label = _ref.label,
       _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? 'secondary' : _ref$variant,
       value = _ref.value,
       children = _ref.children,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  return (0, _jsxRuntime.jsxs)(_.Button, _extends({
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return (0, _jsxRuntime.jsxs)(_.Button, (0, _extends2["default"])({
     variant: variant,
     sx: {
       textAlign: 'left',

package/build/system/Dialog/DialogContent.js

@@ -1,8 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.DialogContent = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _framerMotion = require("framer-motion");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -18,12 +24,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-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; }
-
 /**
  * Internal dependencies
  */
@@ -33,7 +33,7 @@ var DialogContent = function DialogContent(_ref) {
       _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? 'dropdown' : _ref$variant,
       onClose = _ref.onClose,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
 
   var closeDialog = function closeDialog(e) {
     if (e.key === 27 || e.key === 'Escape') {
@@ -60,7 +60,7 @@ var DialogContent = function DialogContent(_ref) {
         opacity: 0.7,
         background: "linear-gradient(\n\t\t\t\t\t\t\t198.09deg,\n\t\t\t\t\t\t\t#E5F0F6 2.01%,\n\t\t\t\t\t\t\trgba(235, 238, 242, 0) 43.18%,\n\t\t\t\t\t\t\trgba(249, 234, 232, 0) 47.86%,\n\t\t\t\t\t\t\t#FFE9D1 94.31%\n\t\t\t\t\t\t),\n\t\t\t\t\t\tlinear-gradient(\n\t\t\t\t\t\t\t98.65deg,\n\t\t\t\t\t\t\t#FFE8E6 0.58%,\n\t\t\t\t\t\t\trgba(255, 233, 214, 0) 52.45%,\n\t\t\t\t\t\t\trgba(255, 233, 219, 0) 53.76%,\n\t\t\t\t\t\t\t#FFE9D1 105.86%\n\t\t\t\t\t\t), #F5F2F1"
       }
-    }), variant === 'sidebar' ? (0, _jsxRuntime.jsx)(SidebarMotion, _extends({}, props)) : (0, _jsxRuntime.jsx)(DialogMotion, _extends({
+    }), variant === 'sidebar' ? (0, _jsxRuntime.jsx)(SidebarMotion, (0, _extends2["default"])({}, props)) : (0, _jsxRuntime.jsx)(DialogMotion, (0, _extends2["default"])({
       position: position,
       variant: variant
     }, props))]
@@ -70,7 +70,7 @@ var DialogContent = function DialogContent(_ref) {
 exports.DialogContent = DialogContent;
 
 var SidebarMotion = function SidebarMotion(props) {
-  return (0, _jsxRuntime.jsx)(_framerMotion.motion.div, _extends({}, props, {
+  return (0, _jsxRuntime.jsx)(_framerMotion.motion.div, (0, _extends2["default"])({}, props, {
     initial: {
       x: -20,
       opacity: 0
@@ -104,8 +104,7 @@ var SidebarMotion = function SidebarMotion(props) {
 var DialogMotion = function DialogMotion(_ref2) {
   var variant = _ref2.variant,
       position = _ref2.position,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
-
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, _excluded2);
   var transformOrigin = 'center';
 
   if (variant === 'dropdown') {
@@ -116,7 +115,7 @@ var DialogMotion = function DialogMotion(_ref2) {
     }
   }
 
-  return (0, _jsxRuntime.jsx)(_framerMotion.motion.div, _extends({}, props, {
+  return (0, _jsxRuntime.jsx)(_framerMotion.motion.div, (0, _extends2["default"])({}, props, {
     initial: {
       scale: 0.9,
       x: variant === 'dropdown' ? 0 : '-50%',

package/build/system/Dialog/DialogDivider.js

@@ -1,11 +1,13 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.DialogDivider = void 0;
 
-var _jsxRuntime = require("theme-ui/jsx-runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-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); }
+var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 /** @jsxImportSource theme-ui */
 
@@ -13,7 +15,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
  * External dependencies
  */
 var DialogDivider = function DialogDivider(props) {
-  return (0, _jsxRuntime.jsx)("div", _extends({
+  return (0, _jsxRuntime.jsx)("div", (0, _extends2["default"])({
     sx: {
       height: 1,
       backgroundColor: 'border',

package/build/system/Dialog/DialogMenu.js

@@ -1,11 +1,13 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.DialogMenu = void 0;
 
-var _jsxRuntime = require("theme-ui/jsx-runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-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); }
+var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 /** @jsxImportSource theme-ui */
 
@@ -13,7 +15,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
  * External dependencies
  */
 var DialogMenu = function DialogMenu(props) {
-  return (0, _jsxRuntime.jsx)("ul", _extends({
+  return (0, _jsxRuntime.jsx)("ul", (0, _extends2["default"])({
     role: "menu",
     sx: {
       listStyleType: 'none',

package/build/system/Dialog/DialogMenuItem.js

@@ -1,8 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.DialogMenuItem = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = require("react");
@@ -13,18 +19,11 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["loading", "children"];
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-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; }
-
 var DialogMenuItem = function DialogMenuItem(_ref) {
   var _ref$loading = _ref.loading,
       loading = _ref$loading === void 0 ? false : _ref$loading,
       children = _ref.children,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   var itemRef = (0, _react.useRef)(null);
 
   var triggerClick = function triggerClick(e) {
@@ -44,7 +43,7 @@ var DialogMenuItem = function DialogMenuItem(_ref) {
   }, []);
   return (0, _jsxRuntime.jsx)("li", {
     role: "none",
-    children: (0, _jsxRuntime.jsxs)(_.Box, _extends({
+    children: (0, _jsxRuntime.jsxs)(_.Box, (0, _extends2["default"])({
       ref: itemRef,
       role: "menuitem",
       tabIndex: "0",

package/build/system/Dialog/DialogTrigger.js

@@ -1,16 +1,23 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.DialogTrigger = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _ = require("../");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-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); }
+/** @jsxImportSource theme-ui */
 
+/**
+ * Internal dependencies
+ */
 var DialogTrigger = function DialogTrigger(props) {
-  return (0, _jsxRuntime.jsx)(_.Box, _extends({
+  return (0, _jsxRuntime.jsx)(_.Box, (0, _extends2["default"])({
     sx: {
       display: 'inline'
     }

package/build/system/Flex/Flex.js

@@ -1,16 +1,23 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.Flex = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _themeUi = require("theme-ui");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-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); }
+/** @jsxImportSource theme-ui */
 
+/**
+ * External dependencies
+ */
 var Flex = function Flex(props) {
-  return (0, _jsxRuntime.jsx)(_themeUi.Flex, _extends({}, props));
+  return (0, _jsxRuntime.jsx)(_themeUi.Flex, (0, _extends2["default"])({}, props));
 };
 
 exports.Flex = Flex;

package/build/system/Flex/Flex.stories.js

@@ -1,20 +1,12 @@
 "use strict";
 
 exports.__esModule = true;
-exports.Default = exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
+exports["default"] = exports.Default = void 0;
 
 var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-/**
- * External dependencies
- */
-
 /**
  * Internal dependencies
  */

package/build/system/Form/AsyncSearchSelect.js

@@ -1,8 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.AsyncSearchSelect = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactSelectAsyncPaginate = require("react-select-async-paginate");
@@ -12,21 +18,13 @@ var _SearchSelect = require("./SearchSelect");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["options"];
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-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; }
-
 // Asynchronous search select to load paginated results asynchronously
 var CustomAsyncPaginate = (0, _reactSelectAsyncPaginate.withAsyncPaginate)(_SearchSelect.SearchSelect);
 
 var AsyncSearchSelect = function AsyncSearchSelect(_ref) {
   var options = _ref.options,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  return (0, _jsxRuntime.jsx)(CustomAsyncPaginate, _extends({
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return (0, _jsxRuntime.jsx)(CustomAsyncPaginate, (0, _extends2["default"])({
     SelectComponent: _SearchSelect.SearchSelect,
     loadOptions: options
   }, props));

package/build/system/Form/Checkbox.js

@@ -1,8 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.Checkbox = void 0;
 
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var CheckboxPrimitive = _interopRequireWildcard(require("@radix-ui/react-checkbox"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -13,18 +19,12 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["disabled"];
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-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; }
-
-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); }
-
 var StyledCheckbox = function StyledCheckbox(props) {
-  return (0, _jsxRuntime.jsx)(CheckboxPrimitive.Root, _extends({
+  return (0, _jsxRuntime.jsx)(CheckboxPrimitive.Root, (0, _extends2["default"])({
     sx: {
       all: 'unset',
       backgroundColor: 'grey.10',
@@ -52,7 +52,7 @@ var StyledCheckbox = function StyledCheckbox(props) {
 };
 
 var StyledIndicator = function StyledIndicator(props) {
-  return (0, _jsxRuntime.jsx)(CheckboxPrimitive.Indicator, _extends({
+  return (0, _jsxRuntime.jsx)(CheckboxPrimitive.Indicator, (0, _extends2["default"])({
     sx: {
       color: 'brand.0'
     }
@@ -61,9 +61,8 @@ var StyledIndicator = function StyledIndicator(props) {
 
 var Checkbox = function Checkbox(_ref) {
   var disabled = _ref.disabled,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  return (0, _jsxRuntime.jsx)(StyledCheckbox, _extends({
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return (0, _jsxRuntime.jsx)(StyledCheckbox, (0, _extends2["default"])({
     sx: {
       opacity: disabled ? 0.4 : 1,
       border: 'none'

package/build/system/Form/InlineSelect.js

@@ -1,8 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.InlineSelect = void 0;
 
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactSelect = _interopRequireDefault(require("react-select"));
@@ -14,16 +20,9 @@ var _SearchSelect = require("./SearchSelect");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["label", "value", "options", "noneLabel", "position"];
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-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; }
-
-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); }
-
 var selectStyles = {
   control: function control(provided) {
-    return _extends({}, provided, {
+    return (0, _extends2["default"])({}, provided, {
       minWidth: 240,
       margin: 0,
       border: 0,
@@ -32,17 +31,17 @@ var selectStyles = {
     });
   },
   container: function container(provided) {
-    return _extends({}, provided, {
+    return (0, _extends2["default"])({}, provided, {
       padding: 0
     });
   },
   input: function input(provided) {
-    return _extends({}, provided, {
+    return (0, _extends2["default"])({}, provided, {
       padding: 0
     });
   },
   option: function option(provided) {
-    return _extends({}, provided, {
+    return (0, _extends2["default"])({}, provided, {
       paddingTop: _.theme.space[1],
       paddingBottom: _.theme.space[1],
       paddingLeft: _.theme.space[2]
@@ -64,8 +63,7 @@ var InlineSelect = function InlineSelect(_ref) {
       noneLabel = _ref$noneLabel === void 0 ? 'All' : _ref$noneLabel,
       _ref$position = _ref.position,
       position = _ref$position === void 0 ? 'left' : _ref$position,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   var valueLabel = noneLabel;
 
   if (Array.isArray(value) && value.length) {
@@ -79,7 +77,7 @@ var InlineSelect = function InlineSelect(_ref) {
   }
 
   var Content = (0, _jsxRuntime.jsx)(_.Box, {
-    children: (0, _jsxRuntime.jsx)(_reactSelect["default"], _extends({
+    children: (0, _jsxRuntime.jsx)(_reactSelect["default"], (0, _extends2["default"])({
       autoFocus: true,
       backspaceRemovesValue: false,
       components: {

package/build/system/Form/Input.js

@@ -1,8 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.Input = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -13,12 +19,6 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["variant", "label", "forLabel", "hasError", "required", "errorMessage"];
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-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; }
-
 var Input = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var variant = _ref.variant,
       label = _ref.label,
@@ -26,13 +26,12 @@ var Input = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       hasError = _ref.hasError,
       required = _ref.required,
       errorMessage = _ref.errorMessage,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   return (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
     children: [label && (0, _jsxRuntime.jsxs)(_.Label, {
       htmlFor: forLabel,
       children: [label, required && '*']
-    }), (0, _jsxRuntime.jsx)("input", _extends({}, props, {
+    }), (0, _jsxRuntime.jsx)("input", (0, _extends2["default"])({}, props, {
       ref: ref,
       id: forLabel,
       required: required,

package/build/system/Form/Input.stories.js

@@ -1,19 +1,13 @@
 "use strict";
 
 exports.__esModule = true;
-exports.Default = exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
+exports["default"] = exports.Default = void 0;
 
 var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-/**
- * External dependencies
- */
+/** @jsxImportSource theme-ui */
 
 /**
  * Internal dependencies

package/build/system/Form/Label.js

@@ -1,16 +1,23 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.Label = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-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); }
+/** @jsxImportSource theme-ui */
 
+/**
+ * Internal dependencies
+ */
 var Label = function Label(props) {
-  return (0, _jsxRuntime.jsx)(_.Heading, _extends({
+  return (0, _jsxRuntime.jsx)(_.Heading, (0, _extends2["default"])({
     variant: "h4",
     as: "label",
     sx: {