@pingux/astro 2.0.0-alpha.1 → 2.0.0-alpha.5

package/lib/cjs/components/Box/Box.js

@@ -1,106 +1,68 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-
 var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
-
 var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
-
 var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
-
 var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-
 var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
-
 var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
-
 var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
-
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
 var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 exports["default"] = void 0;
-
 var _isNan = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/number/is-nan"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
-
 var _base = _interopRequireDefault(require("@emotion/styled/base"));
-
 var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
+var _propTypes = require("@styled-system/prop-types");
+var _lodash = require("lodash");
+var _propTypes2 = _interopRequireDefault(require("prop-types"));
 var _styledSystem = require("styled-system");
-
 var _themeUi = require("theme-ui");
-
-var _propTypes2 = require("@styled-system/prop-types");
-
-var _lodash = require("lodash");
-
 var _hooks = require("../../hooks");
-
 var _react2 = require("@emotion/react");
-
 var _excluded = ["flexDirection", "gap", "isRow", "isDisabled", "className", "fontSize", "sx"];
-
 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 ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-var ExtendedBox = ( /*#__PURE__*/0, _base["default"])(_themeUi.Box, process.env.NODE_ENV === "production" ? {
+var ExtendedBox = /*#__PURE__*/(0, _base["default"])(_themeUi.Box, process.env.NODE_ENV === "production" ? {
   target: "e146bxl90"
 } : {
   target: "e146bxl90",
   label: "ExtendedBox"
-})(_styledSystem.layout, _styledSystem.flexbox, _styledSystem.typography, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0JveC9Cb3guanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBU29CIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0JveC9Cb3guanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgZm9yd2FyZFJlZiwgdXNlTWVtbyB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBsYXlvdXQsIGZsZXhib3gsIHR5cG9ncmFwaHkgfSBmcm9tICdzdHlsZWQtc3lzdGVtJztcbmltcG9ydCB7IEJveCBhcyBUaGVtZVVJQm94IH0gZnJvbSAndGhlbWUtdWknO1xuaW1wb3J0IHsgcHJvcFR5cGUgYXMgc3R5bGVQcm9wVHlwZSB9IGZyb20gJ0BzdHlsZWQtc3lzdGVtL3Byb3AtdHlwZXMnO1xuaW1wb3J0IHsgdG9OdW1iZXIgfSBmcm9tICdsb2Rhc2gnO1xuaW1wb3J0IHsgdXNlU3RhdHVzQ2xhc3NlcywgdXNlUHJvcFdhcm5pbmcgfSBmcm9tICcuLi8uLi9ob29rcyc7XG5cbmNvbnN0IEV4dGVuZGVkQm94ID0gc3R5bGVkKFRoZW1lVUlCb3gpKGxheW91dCwgZmxleGJveCwgdHlwb2dyYXBoeSk7XG5cbmNvbnN0IEJveCA9IGZvcndhcmRSZWYoKHByb3BzLCByZWYpID0+IHtcbiAgY29uc3Qge1xuICAgIGZsZXhEaXJlY3Rpb24sIC8vIGVzbGludC1kaXNhYmxlLWxpbmVcbiAgICBnYXAsXG4gICAgaXNSb3csXG4gICAgaXNEaXNhYmxlZCxcbiAgICBjbGFzc05hbWUsXG4gICAgZm9udFNpemUsXG4gICAgc3gsIC8vIGVzbGludC1kaXNhYmxlLWxpbmVcbiAgICAuLi5vdGhlcnNcbiAgfSA9IHByb3BzO1xuICBjb25zdCBmZCA9IGZsZXhEaXJlY3Rpb24gfHwgaXNSb3cgPyAncm93JyA6ICdjb2x1bW4nO1xuICBjb25zdCBjdXN0b20gPSB7IC4uLnN4IH07XG5cbiAgY29uc3QgeyBjbGFzc05hbWVzIH0gPSB1c2VTdGF0dXNDbGFzc2VzKGNsYXNzTmFtZSwgeyBpc0Rpc2FibGVkIH0pO1xuICB1c2VQcm9wV2FybmluZyhwcm9wcywgJ2Rpc2FibGVkJywgJ2lzRGlzYWJsZWQnKTtcblxuICBpZiAoZ2FwKSB7XG4gICAgY3VzdG9tWycmID4gKiArICo6bm90KDpmaXJzdC1jaGlsZCkgLyogZW1vdGlvbi1kaXNhYmxlLXNlcnZlci1yZW5kZXJpbmctdW5zYWZlLXNlbGVjdG9yLXdhcm5pbmctcGxlYXNlLWRvLW5vdC11c2UtdGhpcy10aGUtd2FybmluZy1leGlzdHMtZm9yLWEtcmVhc29uICovJ10gPSB7XG4gICAgICBbZmQgPT09ICdyb3cnID8gJ21hcmdpbkxlZnQnIDogJ21hcmdpblRvcCddOiBnYXAsXG4gICAgfTtcbiAgfVxuXG4gIGNvbnN0IGN1c3RvbUZvbnRTaXplID0gdXNlTWVtbygoKSA9PiB7XG4gICAgY29uc3QgbnVtZXJpY2FsRm9udFNpemUgPSB0b051bWJlcihmb250U2l6ZSk7XG4gICAgaWYgKE51bWJlci5pc05hTihudW1lcmljYWxGb250U2l6ZSkpIHtcbiAgICAgIHJldHVybiBmb250U2l6ZTtcbiAgICB9XG4gICAgcmV0dXJuIG51bWVyaWNhbEZvbnRTaXplO1xuICB9LCBbZm9udFNpemVdKTtcblxuICByZXR1cm4gKFxuICAgIDxFeHRlbmRlZEJveFxuICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWVzfVxuICAgICAgcmVmPXtyZWZ9XG4gICAgICBkaXNwbGF5PVwiZmxleFwiXG4gICAgICBmbGV4RGlyZWN0aW9uPXtmZH1cbiAgICAgIHZhcmlhbnQ9XCJib3guYmFzZVwiXG4gICAgICBmb250U2l6ZT17Y3VzdG9tRm9udFNpemV9XG4gICAgICB7Li4ub3RoZXJzfVxuICAgICAgc3g9e2N1c3RvbX1cbiAgICAvPlxuICApO1xufSk7XG5cbkJveC5wcm9wVHlwZXMgPSB7XG4gIC8qKiBUaGUgYmFja2dyb3VuZCBjb2xvciBvZiB0aGUgYm94LiAqL1xuICBiZzogUHJvcFR5cGVzLnN0cmluZyxcbiAgLyoqIFdoZXRoZXIgdGhlIGJveCBpcyBkaXNhYmxlZC4gKi9cbiAgaXNEaXNhYmxlZDogUHJvcFR5cGVzLm9uZU9mVHlwZShbUHJvcFR5cGVzLmJvb2wsIFByb3BUeXBlcy5vYmplY3RdKSxcbiAgLyoqIFRoZSBiYXNlIEhUTUwgdGFnIG5hbWUgb3IgUmVhY3QgY29tcG9uZW50IHR5cGUgdG8gcmVuZGVyICovXG4gIGFzOiBQcm9wVHlwZXMub25lT2ZUeXBlKFtQcm9wVHlwZXMuc3RyaW5nLCBQcm9wVHlwZXMuZWxlbWVudFR5cGVdKSxcbiAgLyoqIFdoZW4gdHJ1ZSwgZGlzcGxheSBhcyBhIHJvdyByYXRoZXIgdGhhbiBhIGNvbHVtbi4gKi9cbiAgaXNSb3c6IFByb3BUeXBlcy5ib29sLFxuICAvKiogR2FwIGJldHdlZW4gaXRlbXMsIHdoZXRoZXIgaW4gYSByb3cgb3IgY29sdW1uLiAqL1xuICBnYXA6IHN0eWxlUHJvcFR5cGUsXG4gIGZvbnRTaXplOiBQcm9wVHlwZXMub25lT2ZUeXBlKFtQcm9wVHlwZXMuc3RyaW5nLCBQcm9wVHlwZXMubnVtYmVyXSksXG59O1xuXG5Cb3guZGVmYXVsdFByb3BzID0ge1xuICBhczogJ2RpdicsXG4gIGlzUm93OiBmYWxzZSxcbiAgaXNEaXNhYmxlZDogZmFsc2UsXG59O1xuXG5Cb3guZGlzcGxheU5hbWUgPSAnQm94JztcblxuZXhwb3J0IGRlZmF1bHQgQm94O1xuIl19 */");
+})(_styledSystem.layout, _styledSystem.flexbox, _styledSystem.typography, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0JveC9Cb3guanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVW9CIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0JveC9Cb3guanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgZm9yd2FyZFJlZiwgdXNlTWVtbyB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHByb3BUeXBlIGFzIHN0eWxlUHJvcFR5cGUgfSBmcm9tICdAc3R5bGVkLXN5c3RlbS9wcm9wLXR5cGVzJztcbmltcG9ydCB7IHRvTnVtYmVyIH0gZnJvbSAnbG9kYXNoJztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgeyBmbGV4Ym94LCBsYXlvdXQsIHR5cG9ncmFwaHkgfSBmcm9tICdzdHlsZWQtc3lzdGVtJztcbmltcG9ydCB7IEJveCBhcyBUaGVtZVVJQm94IH0gZnJvbSAndGhlbWUtdWknO1xuXG5pbXBvcnQgeyB1c2VQcm9wV2FybmluZywgdXNlU3RhdHVzQ2xhc3NlcyB9IGZyb20gJy4uLy4uL2hvb2tzJztcblxuY29uc3QgRXh0ZW5kZWRCb3ggPSBzdHlsZWQoVGhlbWVVSUJveCkobGF5b3V0LCBmbGV4Ym94LCB0eXBvZ3JhcGh5KTtcblxuY29uc3QgQm94ID0gZm9yd2FyZFJlZigocHJvcHMsIHJlZikgPT4ge1xuICBjb25zdCB7XG4gICAgZmxleERpcmVjdGlvbiwgLy8gZXNsaW50LWRpc2FibGUtbGluZVxuICAgIGdhcCxcbiAgICBpc1JvdyxcbiAgICBpc0Rpc2FibGVkLFxuICAgIGNsYXNzTmFtZSxcbiAgICBmb250U2l6ZSxcbiAgICBzeCwgLy8gZXNsaW50LWRpc2FibGUtbGluZVxuICAgIC4uLm90aGVyc1xuICB9ID0gcHJvcHM7XG4gIGNvbnN0IGZkID0gZmxleERpcmVjdGlvbiB8fCBpc1JvdyA/ICdyb3cnIDogJ2NvbHVtbic7XG4gIGNvbnN0IGN1c3RvbSA9IHsgLi4uc3ggfTtcblxuICBjb25zdCB7IGNsYXNzTmFtZXMgfSA9IHVzZVN0YXR1c0NsYXNzZXMoY2xhc3NOYW1lLCB7IGlzRGlzYWJsZWQgfSk7XG4gIHVzZVByb3BXYXJuaW5nKHByb3BzLCAnZGlzYWJsZWQnLCAnaXNEaXNhYmxlZCcpO1xuXG4gIGlmIChnYXApIHtcbiAgICBjdXN0b21bJyYgPiAqICsgKjpub3QoOmZpcnN0LWNoaWxkKSAvKiBlbW90aW9uLWRpc2FibGUtc2VydmVyLXJlbmRlcmluZy11bnNhZmUtc2VsZWN0b3Itd2FybmluZy1wbGVhc2UtZG8tbm90LXVzZS10aGlzLXRoZS13YXJuaW5nLWV4aXN0cy1mb3ItYS1yZWFzb24gKi8nXSA9IHtcbiAgICAgIFtmZCA9PT0gJ3JvdycgPyAnbWFyZ2luTGVmdCcgOiAnbWFyZ2luVG9wJ106IGdhcCxcbiAgICB9O1xuICB9XG5cbiAgY29uc3QgY3VzdG9tRm9udFNpemUgPSB1c2VNZW1vKCgpID0+IHtcbiAgICBjb25zdCBudW1lcmljYWxGb250U2l6ZSA9IHRvTnVtYmVyKGZvbnRTaXplKTtcbiAgICBpZiAoTnVtYmVyLmlzTmFOKG51bWVyaWNhbEZvbnRTaXplKSkge1xuICAgICAgcmV0dXJuIGZvbnRTaXplO1xuICAgIH1cbiAgICByZXR1cm4gbnVtZXJpY2FsRm9udFNpemU7XG4gIH0sIFtmb250U2l6ZV0pO1xuXG4gIHJldHVybiAoXG4gICAgPEV4dGVuZGVkQm94XG4gICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZXN9XG4gICAgICByZWY9e3JlZn1cbiAgICAgIGRpc3BsYXk9XCJmbGV4XCJcbiAgICAgIGZsZXhEaXJlY3Rpb249e2ZkfVxuICAgICAgdmFyaWFudD1cImJveC5iYXNlXCJcbiAgICAgIGZvbnRTaXplPXtjdXN0b21Gb250U2l6ZX1cbiAgICAgIHsuLi5vdGhlcnN9XG4gICAgICBzeD17Y3VzdG9tfVxuICAgIC8+XG4gICk7XG59KTtcblxuQm94LnByb3BUeXBlcyA9IHtcbiAgLyoqIFRoZSBiYWNrZ3JvdW5kIGNvbG9yIG9mIHRoZSBib3guICovXG4gIGJnOiBQcm9wVHlwZXMuc3RyaW5nLFxuICAvKiogV2hldGhlciB0aGUgYm94IGlzIGRpc2FibGVkLiAqL1xuICBpc0Rpc2FibGVkOiBQcm9wVHlwZXMub25lT2ZUeXBlKFtQcm9wVHlwZXMuYm9vbCwgUHJvcFR5cGVzLm9iamVjdF0pLFxuICAvKiogVGhlIGJhc2UgSFRNTCB0YWcgbmFtZSBvciBSZWFjdCBjb21wb25lbnQgdHlwZSB0byByZW5kZXIgKi9cbiAgYXM6IFByb3BUeXBlcy5vbmVPZlR5cGUoW1Byb3BUeXBlcy5zdHJpbmcsIFByb3BUeXBlcy5lbGVtZW50VHlwZV0pLFxuICAvKiogV2hlbiB0cnVlLCBkaXNwbGF5IGFzIGEgcm93IHJhdGhlciB0aGFuIGEgY29sdW1uLiAqL1xuICBpc1JvdzogUHJvcFR5cGVzLmJvb2wsXG4gIC8qKiBHYXAgYmV0d2VlbiBpdGVtcywgd2hldGhlciBpbiBhIHJvdyBvciBjb2x1bW4uICovXG4gIGdhcDogc3R5bGVQcm9wVHlwZSxcbiAgZm9udFNpemU6IFByb3BUeXBlcy5vbmVPZlR5cGUoW1Byb3BUeXBlcy5zdHJpbmcsIFByb3BUeXBlcy5udW1iZXJdKSxcbn07XG5cbkJveC5kZWZhdWx0UHJvcHMgPSB7XG4gIGFzOiAnZGl2JyxcbiAgaXNSb3c6IGZhbHNlLFxuICBpc0Rpc2FibGVkOiBmYWxzZSxcbn07XG5cbkJveC5kaXNwbGF5TmFtZSA9ICdCb3gnO1xuXG5leHBvcnQgZGVmYXVsdCBCb3g7XG4iXX0= */");
 var Box = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var flexDirection = props.flexDirection,
-      gap = props.gap,
-      isRow = props.isRow,
-      isDisabled = props.isDisabled,
-      className = props.className,
-      fontSize = props.fontSize,
-      sx = props.sx,
-      others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+    gap = props.gap,
+    isRow = props.isRow,
+    isDisabled = props.isDisabled,
+    className = props.className,
+    fontSize = props.fontSize,
+    sx = props.sx,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var fd = flexDirection || isRow ? 'row' : 'column';
-
   var custom = _objectSpread({}, sx);
-
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
-    isDisabled: isDisabled
-  }),
-      classNames = _useStatusClasses.classNames;
-
+      isDisabled: isDisabled
+    }),
+    classNames = _useStatusClasses.classNames;
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
-
   if (gap) {
     custom['& > * + *:not(:first-child) /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */'] = (0, _defineProperty2["default"])({}, fd === 'row' ? 'marginLeft' : 'marginTop', gap);
   }
-
   var customFontSize = (0, _react.useMemo)(function () {
     var numericalFontSize = (0, _lodash.toNumber)(fontSize);
-
     if ((0, _isNan["default"])(numericalFontSize)) {
       return fontSize;
     }
-
     return numericalFontSize;
   }, [fontSize]);
   return (0, _react2.jsx)(ExtendedBox, (0, _extends2["default"])({
@@ -116,20 +78,16 @@ var Box = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 });
 Box.propTypes = {
   /** The background color of the box. */
-  bg: _propTypes["default"].string,
-
+  bg: _propTypes2["default"].string,
   /** Whether the box is disabled. */
-  isDisabled: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].object]),
-
+  isDisabled: _propTypes2["default"].oneOfType([_propTypes2["default"].bool, _propTypes2["default"].object]),
   /** The base HTML tag name or React component type to render */
-  as: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].elementType]),
-
+  as: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].elementType]),
   /** When true, display as a row rather than a column. */
-  isRow: _propTypes["default"].bool,
-
+  isRow: _propTypes2["default"].bool,
   /** Gap between items, whether in a row or column. */
-  gap: _propTypes2.propType,
-  fontSize: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
+  gap: _propTypes.propType,
+  fontSize: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].number])
 };
 Box.defaultProps = {
   as: 'div',

package/lib/cjs/components/Box/Box.stories.js

@@ -1,42 +1,26 @@
 "use strict";
 
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 exports["default"] = exports.Disabled = exports.Default = exports.BoxesWithGaps = void 0;
-
+var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectDestructuringEmpty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
-
 var _react = _interopRequireDefault(require("react"));
-
-var _ = _interopRequireDefault(require("."));
-
-var _index = require("../../index");
-
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
-
-var _images = require("../../utils/devUtils/constants/images");
-
+var _index = require("../../index");
 var _colors = require("../../styles/colors.js");
-
 var _htmlElements = require("../../utils/devUtils/constants/htmlElements");
-
+var _images = require("../../utils/devUtils/constants/images");
 var _Box = _interopRequireDefault(require("./Box.mdx"));
-
 var _react2 = require("@emotion/react");
-
 var _default = {
   title: 'Components/Box',
-  component: _["default"],
+  component: _index.Box,
   parameters: {
     docs: {
       page: function page() {
@@ -53,8 +37,7 @@ var _default = {
         type: 'select',
         options: (0, _map["default"])(_colors.flatColorList).call(_colors.flatColorList, function (_ref) {
           var _ref2 = (0, _slicedToArray2["default"])(_ref, 1),
-              colorName = _ref2[0];
-
+            colorName = _ref2[0];
           return colorName;
         })
       },
@@ -77,36 +60,33 @@ var _default = {
   }
 };
 exports["default"] = _default;
-
 var Default = function Default(_ref3) {
-  var args = (0, _extends2["default"])({}, _ref3);
-  return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({
+  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref3), _ref3));
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     bg: "active",
     width: "100%",
     p: "xl"
-  }, args), (0, _react2.jsx)(_["default"], {
+  }, args), (0, _react2.jsx)(_index.Box, {
     width: 30,
     height: 15,
     m: "sm",
     bg: "success.bright"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 100,
     height: 50,
     m: "sm",
     bg: "critical.bright"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 190,
     height: 45,
     m: "sm",
     bg: "warning.bright"
   }));
 };
-
 exports.Default = Default;
-
 var Disabled = function Disabled(_ref4) {
-  var args = (0, _extends2["default"])({}, _ref4);
-  return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({
+  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref4), _ref4));
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     bg: "white",
     isDisabled: true,
     width: "100%",
@@ -122,7 +102,6 @@ var Disabled = function Disabled(_ref4) {
     fontSize: "xl"
   }, "Exceptional Experiences Start with Secure Identity"));
 };
-
 exports.Disabled = Disabled;
 Disabled.parameters = {
   docs: {
@@ -140,8 +119,7 @@ Disabled.args = {
       type: 'select',
       options: (0, _map["default"])(_colors.flatColorList).call(_colors.flatColorList, function (_ref5) {
         var _ref6 = (0, _slicedToArray2["default"])(_ref5, 1),
-            colorName = _ref6[0];
-
+          colorName = _ref6[0];
         return colorName;
       })
     },
@@ -155,146 +133,144 @@ Disabled.args = {
     gap: '10px'
   }
 };
-
 var BoxesWithGaps = function BoxesWithGaps() {
-  return (0, _react2.jsx)(_["default"], {
+  return (0, _react2.jsx)(_index.Box, {
     gap: "xs"
-  }, (0, _react2.jsx)(_["default"], {
+  }, (0, _react2.jsx)(_index.Box, {
     bg: "accent.5",
     isRow: true,
     gap: "xl",
     justifyContent: "center"
-  }, (0, _react2.jsx)(_["default"], {
+  }, (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorativeLight.1"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorativeLight.2"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorativeLight.3"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorativeLight.4"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorativeLight.5"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorativeLight.6"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorativeLight.7"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorativeLight.8"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorativeLight.9"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorativeLight.10"
-  })), (0, _react2.jsx)(_["default"], {
+  })), (0, _react2.jsx)(_index.Box, {
     bg: "accent.50",
     isRow: true,
     gap: "lg",
     justifyContent: "center"
-  }, (0, _react2.jsx)(_["default"], {
+  }, (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorative.1"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorative.2"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorative.3"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorative.4"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorative.5"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorative.6"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorative.7"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorative.8"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorative.9"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorative.10"
-  })), (0, _react2.jsx)(_["default"], {
+  })), (0, _react2.jsx)(_index.Box, {
     bg: "accent.90",
     isRow: true,
     gap: "md",
     justifyContent: "center"
-  }, (0, _react2.jsx)(_["default"], {
+  }, (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorativeDark.1"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorativeDark.2"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorativeDark.3"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorativeDark.4"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorativeDark.5"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorativeDark.6"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorativeDark.7"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorativeDark.8"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorativeDark.9"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorativeDark.10"
   })));
 };
-
 exports.BoxesWithGaps = BoxesWithGaps;

package/lib/cjs/components/Box/Box.styles.js

@@ -1,11 +1,9 @@
 "use strict";
 
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 exports["default"] = void 0;
 var base = {
   display: 'flex'

package/lib/cjs/components/Box/Box.test.js

@@ -1,21 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
 var _react = _interopRequireDefault(require("react"));
-
-var _react2 = require("@testing-library/react");
-
-var _react3 = require("@emotion/react");
-
 var _cache = _interopRequireDefault(require("@emotion/cache"));
-
-var _ = _interopRequireDefault(require("."));
-
+var _react2 = require("@emotion/react");
+var _react3 = require("@testing-library/react");
 var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
-
+var _ = _interopRequireDefault(require("."));
 // Emotion Cache added as test fails otherwise, root cause of this failure is unknown.
 // Failure occured with ThemeUI refactor.
 // https://github.com/emotion-js/emotion/issues/1105#issuecomment-557726922
@@ -27,21 +19,18 @@ var testId = 'test-box';
 var defaultProps = {
   'data-testid': testId
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _react2.render)((0, _react3.jsx)(_react3.CacheProvider, {
+  return (0, _react3.render)((0, _react2.jsx)(_react2.CacheProvider, {
     value: emotionCache
-  }, (0, _react3.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props))));
-}; // Need to be added to each test file to test accessibility using axe.
-
+  }, (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props))));
+};
 
+// Need to be added to each test file to test accessibility using axe.
 (0, _testAxe["default"])(getComponent);
 test('default box', function () {
   getComponent();
-
-  var box = _react2.screen.getByTestId(testId);
-
+  var box = _react3.screen.getByTestId(testId);
   expect(box).toBeInstanceOf(HTMLDivElement);
   expect(box).toBeInTheDocument();
 });
@@ -49,18 +38,14 @@ test('box as a row', function () {
   getComponent({
     isRow: true
   });
-
-  var box = _react2.screen.getByTestId(testId);
-
+  var box = _react3.screen.getByTestId(testId);
   expect(box).toHaveStyleRule('flex-direction', 'row');
 });
 test('box with default gap', function () {
   getComponent({
     gap: '30px'
   });
-
-  var box = _react2.screen.getByTestId(testId);
-
+  var box = _react3.screen.getByTestId(testId);
   expect(box).toHaveStyle('margin-top: 0px', {
     target: '> * + *'
   });
@@ -70,9 +55,7 @@ test('box as row with gap', function () {
     isRow: true,
     gap: '30px'
   });
-
-  var box = _react2.screen.getByTestId(testId);
-
+  var box = _react3.screen.getByTestId(testId);
   expect(box).toHaveStyle('margin-left: 0px', {
     target: '> * + *'
   });

package/lib/cjs/components/Box/index.js

@@ -1,18 +1,14 @@
 "use strict";
 
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 _Object$defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
     return _Box["default"];
   }
 });
-
 var _Box = _interopRequireDefault(require("./Box"));

package/lib/cjs/components/Bracket/Bracket.js

@@ -1,48 +1,31 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-
 var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
 var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 exports["default"] = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _index = require("../../index");
-
 var _colors = require("../../styles/colors");
-
 var _react2 = require("@emotion/react");
-
 var _excluded = ["isLast", "color"];
-
 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; }
-
 var Bracket = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var isLast = props.isLast,
-      color = props.color,
-      others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+    color = props.color,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var bracketRef = (0, _react.useRef)();
-  /* istanbul ignore next */
 
+  /* istanbul ignore next */
   (0, _react.useImperativeHandle)(ref, function () {
     return bracketRef.current;
   });
@@ -110,7 +93,6 @@ Bracket.defaultProps = {
 Bracket.propTypes = {
   /** A prop to set the strokes color. */
   color: _propTypes["default"].string,
-
   /** Whether or not the bracket is the last in a series of brackets. */
   isLast: _propTypes["default"].bool
 };