@automattic/vip-design-system 0.10.0 → 0.10.3

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

@@ -1,28 +1,32 @@
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+"use strict";
 
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+exports.__esModule = true;
+exports.usePortal = exports["default"] = exports.Single = exports.Multi = exports.Inline = exports.DropdownMenu = exports.Async = void 0;
 
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var _react = require("react");
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 /**
  * External dependencies
  */
-import React, { useState } from 'react';
+
 /**
  * Internal dependencies
  */
-
-import { Box, Dialog, DialogMenu, DialogMenuItem, DialogDivider, Select, Button } from '..';
-export default {
+var _default = {
   title: 'Select',
-  component: Dialog
+  component: _.Dialog
 };
+exports["default"] = _default;
 var options = [{
   value: 'chocolate',
   label: 'Chocolate'
@@ -33,88 +37,200 @@ var options = [{
   value: 'vanilla',
   label: 'Vanilla'
 }];
-var DropdownContent = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DialogMenu, null, /*#__PURE__*/React.createElement(DialogMenuItem, null, "Profile"), /*#__PURE__*/React.createElement(DialogMenuItem, null, "Account"), /*#__PURE__*/React.createElement(DialogMenuItem, null, "Dark Mode")), /*#__PURE__*/React.createElement(DialogDivider, null), /*#__PURE__*/React.createElement(DialogMenu, null, /*#__PURE__*/React.createElement(DialogMenuItem, null, "Logout")));
-var DropdownTrigger = /*#__PURE__*/React.createElement(Button, {
-  variant: "secondary"
-}, "Trigger Dropdown");
-export var Multi = function Multi() {
-  var _useState = useState([]),
-      _useState2 = _slicedToArray(_useState, 2),
+var DropdownContent = (0, _jsxRuntime.jsxs)("div", {
+  children: [(0, _jsxRuntime.jsxs)(_.DialogMenu, {
+    children: [(0, _jsxRuntime.jsx)(_.DialogMenuItem, {
+      children: "Profile"
+    }), (0, _jsxRuntime.jsx)(_.DialogMenuItem, {
+      children: "Account"
+    }), (0, _jsxRuntime.jsx)(_.DialogMenuItem, {
+      children: "Dark Mode"
+    })]
+  }), (0, _jsxRuntime.jsx)(_.DialogDivider, {}), (0, _jsxRuntime.jsx)(_.DialogMenu, {
+    children: (0, _jsxRuntime.jsx)(_.DialogMenuItem, {
+      children: "Logout"
+    })
+  })]
+});
+var DropdownTrigger = (0, _jsxRuntime.jsx)(_.Button, {
+  variant: "secondary",
+  children: "Trigger Dropdown"
+});
+
+var Multi = function Multi() {
+  var _useState = (0, _react.useState)([]),
+      value = _useState[0],
+      setValue = _useState[1];
+
+  return (0, _jsxRuntime.jsx)(_.Box, {
+    sx: {
+      mr: 2,
+      width: 400
+    },
+    children: (0, _jsxRuntime.jsx)(_.Select, {
+      label: "Type",
+      value: value,
+      isMulti: true,
+      placeholder: "Select domains...",
+      options: options,
+      onChange: function onChange(newValue) {
+        return setValue(newValue);
+      }
+    })
+  });
+};
+
+exports.Multi = Multi;
+
+var usePortal = function usePortal() {
+  var _useState2 = (0, _react.useState)([]),
       value = _useState2[0],
       setValue = _useState2[1];
 
-  return /*#__PURE__*/React.createElement(Box, {
+  return (0, _jsxRuntime.jsx)(_.Box, {
     sx: {
       mr: 2,
       width: 400
-    }
-  }, /*#__PURE__*/React.createElement(Select, {
-    label: "Type",
-    value: value,
-    isMulti: true,
-    placeholder: "Select domains...",
-    options: options,
-    onChange: function onChange(newValue) {
-      return setValue(newValue);
-    }
-  }));
+    },
+    children: (0, _jsxRuntime.jsx)(_.Select, {
+      label: "Type",
+      value: value,
+      isMulti: true,
+      placeholder: "Select domains...",
+      usePortal: true,
+      options: options,
+      onChange: function onChange(newValue) {
+        return setValue(newValue);
+      }
+    })
+  });
 };
-export var Single = function Single() {
-  var _useState3 = useState([]),
-      _useState4 = _slicedToArray(_useState3, 2),
-      value = _useState4[0],
-      setValue = _useState4[1];
 
-  return /*#__PURE__*/React.createElement(Box, {
+exports.usePortal = usePortal;
+
+var Single = function Single() {
+  var _useState3 = (0, _react.useState)([]),
+      value = _useState3[0],
+      setValue = _useState3[1];
+
+  return (0, _jsxRuntime.jsx)(_.Box, {
     sx: {
       mr: 2,
       width: 200
-    }
-  }, /*#__PURE__*/React.createElement(Select, {
-    label: "User",
-    value: value,
-    placeholder: "Select a domain...",
-    options: options,
-    onChange: function onChange(newValue) {
-      return setValue(newValue);
-    }
-  }));
+    },
+    children: (0, _jsxRuntime.jsx)(_.Select, {
+      label: "User",
+      value: value,
+      placeholder: "Select a domain...",
+      options: options,
+      onChange: function onChange(newValue) {
+        return setValue(newValue);
+      }
+    })
+  });
 };
-export var Inline = function Inline() {
-  var _useState5 = useState([]),
-      _useState6 = _slicedToArray(_useState5, 2),
-      value = _useState6[0],
-      setValue = _useState6[1];
 
-  return /*#__PURE__*/React.createElement(Box, {
+exports.Single = Single;
+
+var Inline = function Inline() {
+  var _useState4 = (0, _react.useState)([]),
+      value = _useState4[0],
+      setValue = _useState4[1];
+
+  return (0, _jsxRuntime.jsx)(_.Box, {
     sx: {
       mr: 2,
       width: 200
-    }
-  }, /*#__PURE__*/React.createElement(Select, {
-    label: "User",
-    value: value,
-    isInline: true,
-    isMulti: true,
-    noneLabel: "Everyone",
-    placeholder: "Filter by user...",
-    options: options,
-    onChange: function onChange(newValue) {
-      return setValue(newValue);
-    }
-  }));
+    },
+    children: (0, _jsxRuntime.jsx)(_.Select, {
+      label: "User",
+      value: value,
+      isInline: true,
+      isMulti: true,
+      noneLabel: "Everyone",
+      placeholder: "Filter by user...",
+      options: options,
+      onChange: function onChange(newValue) {
+        return setValue(newValue);
+      }
+    })
+  });
 };
-export var DropdownMenu = function DropdownMenu() {
-  return /*#__PURE__*/React.createElement(Box, {
+
+exports.Inline = Inline;
+
+var Async = function Async() {
+  var _useState5 = (0, _react.useState)([]),
+      value = _useState5[0],
+      setValue = _useState5[1];
+
+  var loadOptions = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              return _context.abrupt("return", new Promise(function (resolve) {
+                setTimeout(function () {
+                  resolve({
+                    options: [].concat(options, [{
+                      value: 'newvanilla',
+                      label: 'New Vanilla'
+                    }])
+                  });
+                }, 2000);
+              }));
+
+            case 1:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function loadOptions() {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  return (0, _jsxRuntime.jsx)(_.Box, {
     sx: {
       mr: 2,
       width: 200
-    }
-  }, /*#__PURE__*/React.createElement(Dialog, {
-    trigger: DropdownTrigger,
-    content: DropdownContent,
+    },
+    children: (0, _jsxRuntime.jsx)(_.Select, {
+      label: "Async Select",
+      value: value,
+      isAsync: true,
+      usePortal: true,
+      loadOptions: loadOptions,
+      noneLabel: "Everyone",
+      placeholder: "Load async...",
+      options: options,
+      onChange: function onChange(newValue) {
+        return setValue(newValue);
+      }
+    })
+  });
+};
+
+exports.Async = Async;
+
+var DropdownMenu = function DropdownMenu() {
+  return (0, _jsxRuntime.jsx)(_.Box, {
     sx: {
+      mr: 2,
       width: 200
-    }
-  }));
-};
+    },
+    children: (0, _jsxRuntime.jsx)(_.Dialog, {
+      trigger: DropdownTrigger,
+      content: DropdownContent,
+      sx: {
+        width: 200
+      }
+    })
+  });
+};
+
+exports.DropdownMenu = DropdownMenu;

package/build/system/Form/Select.test.js

@@ -1,5 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
 var _react = require("@testing-library/react");
 
 var _jestAxe = require("jest-axe");
@@ -8,10 +14,13 @@ var _Select = require("./Select");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
-
-function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+/**
+ * External dependencies
+ */
 
+/**
+  * Internal dependencies
+  */
 describe('<Select />', function () {
   it('renders the Select component with the specified placeholder', function () {
     (0, _react.render)((0, _jsxRuntime.jsx)(_Select.Select, {
@@ -23,10 +32,10 @@ describe('<Select />', function () {
 
     expect(placeholder).toBeInTheDocument();
   });
-  it('renders the Select component with accessibility props', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+  it('renders the Select component with accessibility props', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
     var _render, container;
 
-    return regeneratorRuntime.wrap(function _callee$(_context) {
+    return _regenerator["default"].wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:

package/build/system/Form/Textarea.js

@@ -1,8 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.Textarea = 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 Textarea = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var variant = _ref.variant,
       label = _ref.label,
@@ -26,13 +26,12 @@ var Textarea = /*#__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)("textarea", _extends({}, props, {
+    }), (0, _jsxRuntime.jsx)("textarea", (0, _extends2["default"])({}, props, {
       ref: ref,
       sx: {
         border: '1px solid',

package/build/system/Form/Toggle.js

@@ -1,8 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.Toggle = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -11,22 +17,15 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["name", "className"];
 
-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 Toggle = function Toggle(_ref) {
   var _ref$name = _ref.name,
       name = _ref$name === void 0 ? 'toggle' : _ref$name,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? null : _ref$className,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   return (0, _jsxRuntime.jsxs)(CheckBoxWrapper, {
     className: (0, _classnames["default"])('vip-checkbox-component', className),
-    children: [(0, _jsxRuntime.jsx)(CheckBox, _extends({
+    children: [(0, _jsxRuntime.jsx)(CheckBox, (0, _extends2["default"])({
       name: name,
       id: name,
       type: "checkbox"
@@ -43,7 +42,7 @@ Toggle.propTypes = {
 };
 
 var CheckBoxWrapper = function CheckBoxWrapper(props) {
-  return (0, _jsxRuntime.jsx)("div", _extends({
+  return (0, _jsxRuntime.jsx)("div", (0, _extends2["default"])({
     sx: {
       position: 'relative'
     }
@@ -51,7 +50,7 @@ var CheckBoxWrapper = function CheckBoxWrapper(props) {
 };
 
 var CheckBoxLabel = function CheckBoxLabel(props) {
-  return (0, _jsxRuntime.jsx)("label", _extends({
+  return (0, _jsxRuntime.jsx)("label", (0, _extends2["default"])({
     sx: {
       position: 'absolute',
       top: '0',
@@ -77,7 +76,7 @@ var CheckBoxLabel = function CheckBoxLabel(props) {
 };
 
 var CheckBox = function CheckBox(props) {
-  return (0, _jsxRuntime.jsx)("input", _extends({
+  return (0, _jsxRuntime.jsx)("input", (0, _extends2["default"])({
     sx: {
       opacity: '0',
       zIndex: '1',

package/build/system/Form/ToggleGroup.js

@@ -1,8 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.ToggleGroup = 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 RadioGroupPrimitive = _interopRequireWildcard(require("@radix-ui/react-radio-group"));
@@ -15,20 +21,13 @@ 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; }
-
 var ToggleGroup = function ToggleGroup(_ref) {
   var onChange = _ref.onChange,
       groupLabel = _ref.groupLabel,
       value = _ref.value,
       options = _ref.options,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  return (0, _jsxRuntime.jsx)(RadioGroupPrimitive.Root, _extends({
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return (0, _jsxRuntime.jsx)(RadioGroupPrimitive.Root, (0, _extends2["default"])({
     onValueChange: onChange,
     value: value,
     "aria-label": groupLabel,

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

@@ -0,0 +1,50 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.Default = void 0;
+
+var _react = require("react");
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var _default = {
+  title: 'ToggleGroup',
+  component: _.ToggleGroup
+};
+exports["default"] = _default;
+var options = [{
+  label: 'One',
+  value: 'one'
+}, {
+  label: 'Two',
+  value: 'two'
+}, {
+  label: 'Three',
+  value: 'three'
+}];
+
+var Default = function Default() {
+  var _useState = (0, _react.useState)('one'),
+      value = _useState[0],
+      setValue = _useState[1];
+
+  return (0, _jsxRuntime.jsx)(_.ToggleGroup, {
+    value: value,
+    onChange: function onChange(newValue) {
+      return setValue(newValue);
+    },
+    groupLabel: "group",
+    options: options
+  });
+};
+
+exports.Default = Default;

package/build/system/Form/ToggleRow.js

@@ -1,8 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.ToggleRow = 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 _ = require("..");
@@ -11,12 +17,6 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["image", "badge", "title", "subTitle", "body", "meta", "sx"];
 
-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 ToggleRow = function ToggleRow(_ref) {
   var image = _ref.image,
       badge = _ref.badge,
@@ -25,10 +25,9 @@ var ToggleRow = function ToggleRow(_ref) {
       body = _ref.body,
       meta = _ref.meta,
       sx = _ref.sx,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   return (0, _jsxRuntime.jsxs)(_.Flex, {
-    sx: _extends({
+    sx: (0, _extends2["default"])({
       alignItems: 'center',
       py: 3,
       borderBottom: '1px solid',
@@ -89,7 +88,7 @@ var ToggleRow = function ToggleRow(_ref) {
         children: body
       }), meta && meta]
     }), (0, _jsxRuntime.jsx)(_.Box, {
-      children: (0, _jsxRuntime.jsx)(_.Toggle, _extends({}, props))
+      children: (0, _jsxRuntime.jsx)(_.Toggle, (0, _extends2["default"])({}, props))
     })]
   });
 };

package/build/system/Form/Validation.js

@@ -1,8 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.Validation = 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,19 +19,12 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["children", "isValid"];
 
-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 Validation = function Validation(_ref) {
   var children = _ref.children,
       isValid = _ref.isValid,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   var Icon = isValid ? _md.MdCheckCircle : _md.MdErrorOutline;
-  return (0, _jsxRuntime.jsxs)(_.Heading, _extends({
+  return (0, _jsxRuntime.jsxs)(_.Heading, (0, _extends2["default"])({
     variant: "h5",
     as: "p",
     sx: {

package/build/system/Grid/Grid.js

@@ -1,18 +1,25 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.Grid = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _themeUi = require("theme-ui");
 
 var _react = require("react");
 
 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 Grid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  return (0, _jsxRuntime.jsx)(_themeUi.Grid, _extends({}, props, {
+  return (0, _jsxRuntime.jsx)(_themeUi.Grid, (0, _extends2["default"])({}, props, {
     ref: ref
   }));
 });