@pingux/astro 1.42.2 → 2.0.0-alpha.4

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

@@ -0,0 +1,162 @@
+"use strict";
+
+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 _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.deleteButton = exports["default"] = exports.baseBadge = exports.badgeWithSlotDeleteButton = exports.badgeDeleteButton = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _Buttons = require("../Button/Buttons.styles");
+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 baseBadge = {
+  cursor: 'default',
+  p: '3px 5px 4px 5px',
+  alignItems: 'center',
+  justifyContent: 'center',
+  minWidth: '50px',
+  alignSelf: 'flex-start',
+  display: 'inline-flex !important',
+  borderRadius: '5px',
+  fontWeight: 1,
+  '& button': {
+    backgroundColor: 'transparent',
+    marginLeft: 'xs',
+    marginTop: '1px',
+    padding: '0',
+    '&.is-hovered': {
+      backgroundColor: 'white'
+    },
+    '& .mdi-icon': {
+      marginLeft: '0',
+      padding: '2px'
+    }
+  }
+};
+exports.baseBadge = baseBadge;
+var multivaluesBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
+  alignSelf: 'center',
+  cursor: 'default',
+  height: '100%',
+  m: 5,
+  mr: 10,
+  ml: 0,
+  '& span': {
+    mr: '2px'
+  }
+});
+var selectedItemBadge = _objectSpread(_objectSpread({}, multivaluesBadge), {}, {
+  py: 3,
+  pr: 0,
+  my: 3
+});
+var readOnlyBadge = _objectSpread(_objectSpread({}, multivaluesBadge), {}, {
+  p: 2.54,
+  border: '1px solid',
+  borderColor: 'neutral.80'
+});
+var itemBadgeWithSlot = _objectSpread(_objectSpread({}, readOnlyBadge), {}, {
+  p: 3,
+  my: 0,
+  backgroundColor: 'white',
+  '& span': {
+    color: 'text.primary',
+    mr: '2px',
+    lineHeight: '16px'
+  },
+  maxHeight: '22px'
+});
+var environmentBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
+  alignSelf: 'center',
+  height: '17px',
+  minWidth: 'fit-content',
+  ml: 8,
+  '& span': {
+    fontSize: 'xs',
+    lineHeight: 1
+  }
+});
+var deleteButton = {
+  borderRadius: '50%',
+  cursor: 'pointer',
+  height: 14,
+  p: 0,
+  width: 14,
+  mx: '3px !important'
+};
+exports.deleteButton = deleteButton;
+var badgeDeleteButton = _objectSpread(_objectSpread({}, deleteButton), {}, {
+  '&.is-focused': _objectSpread({
+    bg: 'accent.40'
+  }, _Buttons.focusWithCroppedOutline),
+  '&.is-hovered': {
+    bg: 'accent.40'
+  },
+  '&.is-pressed': {
+    bg: 'accent.20',
+    borderColor: 'accent.20'
+  }
+});
+exports.badgeDeleteButton = badgeDeleteButton;
+var badgeWithSlotDeleteButton = _objectSpread(_objectSpread({}, deleteButton), {}, {
+  path: {
+    fill: 'neutral.40'
+  },
+  '&.is-focused': _objectSpread({}, _Buttons.defaultFocus),
+  '&.is-hovered': {
+    backgroundColor: '#e5e9f8 !important',
+    path: {
+      fill: 'neutral.40'
+    }
+  },
+  '&.is-pressed': {
+    'path': {
+      fill: 'white'
+    },
+    bg: '#4462ED !important'
+  }
+});
+exports.badgeWithSlotDeleteButton = badgeWithSlotDeleteButton;
+var countDefault = _objectSpread(_objectSpread({}, baseBadge), {}, {
+  width: 'fit-content',
+  minWidth: '17px',
+  minHeight: '17px',
+  p: '2px 5px 2px 5px',
+  '& span': {
+    fontSize: '11px',
+    textTransform: 'uppercase'
+  }
+});
+var countBadge = _objectSpread(_objectSpread({}, countDefault), {}, {
+  backgroundColor: '#640099 !important'
+});
+var countNeutral = _objectSpread(_objectSpread({}, countDefault), {}, {
+  backgroundColor: '#E4E6E9 !important',
+  '& span': {
+    color: 'neutral.20',
+    fontSize: '11px',
+    textTransform: 'uppercase'
+  }
+});
+var _default = {
+  baseBadge: baseBadge,
+  environmentBadge: environmentBadge,
+  itemBadgeWithSlot: itemBadgeWithSlot,
+  multivaluesBadge: multivaluesBadge,
+  readOnlyBadge: readOnlyBadge,
+  selectedItemBadge: selectedItemBadge,
+  deleteButton: deleteButton,
+  countBadge: countBadge,
+  countNeutral: countNeutral,
+  badgeWithSlotDeleteButton: badgeWithSlotDeleteButton,
+  badgeDeleteButton: badgeDeleteButton
+};
+exports["default"] = _default;

package/lib/cjs/components/{Chip → Badge}/Badge.test.js

@@ -1,56 +1,39 @@
 "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 _EarthIcon = _interopRequireDefault(require("mdi-react/EarthIcon"));
-
-var _Chip = _interopRequireDefault(require("../Chip/Chip"));
-
-var _Button = _interopRequireDefault(require("../Button/Button"));
-
-var _Icon = _interopRequireDefault(require("../Icon/Icon"));
-
+var _ = require("../..");
 var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
-
 var _react3 = require("@emotion/react");
-
 var testId = 'test-separator';
 var defaultProps = {
   'data-testid': testId,
   label: 'Test Label'
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _react2.render)((0, _react3.jsx)(_Chip["default"], (0, _extends2["default"])({}, defaultProps, props)));
-}; // Need to be added to each test file to test accessibility using axe.
-
+  return (0, _react2.render)((0, _react3.jsx)(_.Badge, (0, _extends2["default"])({}, defaultProps, props)));
+};
 
+// Need to be added to each test file to test accessibility using axe.
 (0, _testAxe["default"])(getComponent);
-test('renders Chip component', function () {
+test('renders Badge component', function () {
   getComponent();
-
   var chip = _react2.screen.getByTestId(testId);
-
   expect(chip).toBeInTheDocument();
 });
-test('renders children within Chip component', function () {
-  var children = (0, _react3.jsx)(_Button["default"], null);
+test('renders children within Badge component', function () {
+  var children = (0, _react3.jsx)(_.Button, null);
   getComponent({
     children: children
   });
-
   var mockedChildren = _react2.screen.getByRole('button');
-
   expect(mockedChildren).toBeInTheDocument();
 });
-test('renders Chip component with uppercase', function () {
+test('renders Badge component with uppercase', function () {
   var label = 'uppercase';
   var isUppercase = true;
   getComponent({
@@ -59,7 +42,7 @@ test('renders Chip component with uppercase', function () {
   });
   expect(_react2.screen.queryByText('uppercase')).toHaveStyleRule('text-transform', 'uppercase');
 });
-test('renders Chip component with custom alignment', function () {
+test('renders Badge component with custom alignment', function () {
   var align = 'right';
   getComponent({
     align: align
@@ -69,7 +52,7 @@ test('renders Chip component with custom alignment', function () {
 });
 test('renders Chip component with left slot', function () {
   var slots = {
-    leftIcon: (0, _react3.jsx)(_Icon["default"], {
+    leftIcon: (0, _react3.jsx)(_.Icon, {
       icon: _EarthIcon["default"],
       size: 14,
       "data-testid": "iconId"

package/lib/cjs/components/{Chip → Badge}/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 _Chip["default"];
+    return _Badge["default"];
   }
 });
-
-var _Chip = _interopRequireDefault(require("./Chip"));
+var _Badge = _interopRequireDefault(require("./Badge"));

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+IHtcbiAgY29uc3Qge1xuICAgIGZsZXhEaXJlY3Rpb24sIC8vIGVzbGludC1kaXNhYmxlLWxpbmVcbiAgICBnYXAsXG4gICAgaXNSb3csXG4gICAgaXNEaXNhYmxlZCxcbiAgICBjbGFzc05hbWUsXG4gICAgZm9udFNpemUsXG4gICAgc3gsIC8vIGVzbGludC1kaXNhYmxlLWxpbmVcbiAgICAuLi5vdGhlcnNcbiAgfSA9IHByb3BzO1xuICBjb25zdCBmZCA9IGZsZXhEaXJlY3Rpb24gfHwgaXNSb3cgPyAncm93JyA6ICdjb2x1bW4nO1xuICBjb25zdCBjdXN0b20gPSB7IC4uLnN4IH07XG5cbiAgY29uc3QgeyBjbGFzc05hbWVzIH0gPSB1c2VTdGF0dXNDbGFzc2VzKGNsYXNzTmFtZSwgeyBpc0Rpc2FibGVkIH0pO1xuICB1c2VQcm9wV2FybmluZyhwcm9wcywgJ2Rpc2FibGVkJywgJ2lzRGlzYWJsZWQnKTtcblxuICBpZiAoZ2FwKSB7XG4gICAgY3VzdG9tWycmID4gKiArICo6bm90KDpmaXJzdC1jaGlsZCkgLyogZW1vdGlvbi1kaXNhYmxlLXNlcnZlci1yZW5kZXJpbmctdW5zYWZlLXNlbGVjdG9yLXdhcm5pbmctcGxlYXNlLWRvLW5vdC11c2UtdGhpcy10aGUtd2FybmluZy1leGlzdHMtZm9yLWEtcmVhc29uICovJ10gPSB7XG4gICAgICBbZmQgPT09ICdyb3cnID8gJ21hcmdpbkxlZnQnIDogJ21hcmdpblRvcCddOiBnYXAsXG4gICAgfTtcbiAgfVxuXG4gIGNvbnN0IGN1c3RvbUZvbnRTaXplID0gdXNlTWVtbygoKSA9PiB7XG4gICAgY29uc3QgbnVtZXJpY2FsRm9udFNpemUgPSB0b051bWJlcihmb250U2l6ZSk7XG4gICAgaWYgKE51bWJlci5pc05hTihudW1lcmljYWxGb250U2l6ZSkpIHtcbiAgICAgIHJldHVybiBmb250U2l6ZTtcbiAgICB9XG4gICAgcmV0dXJuIG51bWVyaWNhbEZvbnRTaXplO1xuICB9LCBbZm9udFNpemVdKTtcblxuICByZXR1cm4gKFxuICAgIDxFeHRlbmRlZEJveFxuICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWVzfVxuICAgICAgcmVmPXtyZWZ9XG4gICAgICBkaXNwbGF5PVwiZmxleFwiXG4gICAgICBmbGV4RGlyZWN0aW9uPXtmZH1cbiAgICAgIHZhcmlhbnQ9XCJib3hlcy5iYXNlXCJcbiAgICAgIGZvbnRTaXplPXtjdXN0b21Gb250U2l6ZX1cbiAgICAgIHsuLi5vdGhlcnN9XG4gICAgICBzeD17Y3VzdG9tfVxuICAgIC8+XG4gICk7XG59KTtcblxuQm94LnByb3BUeXBlcyA9IHtcbiAgLyoqIFRoZSBiYWNrZ3JvdW5kIGNvbG9yIG9mIHRoZSBib3guICovXG4gIGJnOiBQcm9wVHlwZXMuc3RyaW5nLFxuICAvKiogV2hldGhlciB0aGUgYm94IGlzIGRpc2FibGVkLiAqL1xuICBpc0Rpc2FibGVkOiBQcm9wVHlwZXMub25lT2ZUeXBlKFtQcm9wVHlwZXMuYm9vbCwgUHJvcFR5cGVzLm9iamVjdF0pLFxuICAvKiogVGhlIGJhc2UgSFRNTCB0YWcgbmFtZSBvciBSZWFjdCBjb21wb25lbnQgdHlwZSB0byByZW5kZXIgKi9cbiAgYXM6IFByb3BUeXBlcy5vbmVPZlR5cGUoW1Byb3BUeXBlcy5zdHJpbmcsIFByb3BUeXBlcy5lbGVtZW50VHlwZV0pLFxuICAvKiogV2hlbiB0cnVlLCBkaXNwbGF5IGFzIGEgcm93IHJhdGhlciB0aGFuIGEgY29sdW1uLiAqL1xuICBpc1JvdzogUHJvcFR5cGVzLmJvb2wsXG4gIC8qKiBHYXAgYmV0d2VlbiBpdGVtcywgd2hldGhlciBpbiBhIHJvdyBvciBjb2x1bW4uICovXG4gIGdhcDogc3R5bGVQcm9wVHlwZSxcbiAgZm9udFNpemU6IFByb3BUeXBlcy5vbmVPZlR5cGUoW1Byb3BUeXBlcy5zdHJpbmcsIFByb3BUeXBlcy5udW1iZXJdKSxcbn07XG5cbkJveC5kZWZhdWx0UHJvcHMgPSB7XG4gIGFzOiAnZGl2JyxcbiAgaXNSb3c6IGZhbHNlLFxuICBpc0Rpc2FibGVkOiBmYWxzZSxcbn07XG5cbkJveC5kaXNwbGF5TmFtZSA9ICdCb3gnO1xuXG5leHBvcnQgZGVmYXVsdCBCb3g7XG4iXX0= */");
+})(_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"])({
@@ -108,7 +70,7 @@ var Box = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: ref,
     display: "flex",
     flexDirection: fd,
-    variant: "boxes.base",
+    variant: "box.base",
     fontSize: customFontSize
   }, others, {
     sx: custom
@@ -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',