@pingux/astro 1.42.0-alpha.0 → 2.0.0-alpha.1

package/lib/cjs/components/AccordionItem/AccordionItem.js

@@ -28,15 +28,13 @@ var _MenuDownIcon = _interopRequireDefault(require("mdi-react/MenuDownIcon"));
 
 var _MenuUpIcon = _interopRequireDefault(require("mdi-react/MenuUpIcon"));
 
-var _themeUi = require("theme-ui");
-
-var _interactions = require("@react-aria/interactions");
+var _reactAria = require("react-aria");
 
-var _utils = require("@react-aria/utils");
+var _themeUi = require("theme-ui");
 
 var _accordion = require("@react-aria/accordion");
 
-var _button = require("@react-aria/button");
+var _interactions = require("@react-aria/interactions");
 
 var _focus = require("@react-aria/focus");
 
@@ -91,7 +89,7 @@ var AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return buttonRef.current;
   });
 
-  var _useButton = (0, _button.useButton)(props, buttonRef),
+  var _useButton = (0, _reactAria.useButton)(props, buttonRef),
       isPressed = _useButton.isPressed,
       raButtonProps = _useButton.buttonProps;
 
@@ -121,18 +119,18 @@ var AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       px: '0',
       height: 'unset'
     },
-    variant: "accordionHeader",
+    variant: "variants.accordion.header",
     className: buttonClasses
-  }, (0, _utils.mergeProps)(hoverProps, accordionButtonProps, raButtonProps, buttonProps, focusProps)), (0, _react2.jsx)(_index.Text, {
+  }, (0, _reactAria.mergeProps)(hoverProps, accordionButtonProps, raButtonProps, buttonProps, focusProps)), (0, _react2.jsx)(_index.Text, {
     className: buttonClasses,
-    variant: "accordion.accordionTitle"
+    variant: "accordion.title"
   }, item.props.label), (0, _react2.jsx)(_index.Box, {
     as: "span",
     ml: "5px"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: isOpen ? _MenuUpIcon["default"] : _MenuDownIcon["default"]
   }))), isOpen && (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
-    variant: "accordion.accordionBody"
+    variant: "accordion.body"
   }, accordionRegionProps, regionProps, {
     className: itemClasses
   }), item.rendered));

package/lib/cjs/components/ArrayField/ArrayField.js

@@ -46,20 +46,16 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _label = require("@react-aria/label");
-
-var _utils = require("@react-aria/utils");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _reactAria = require("react-aria");
+
 var _uuid = require("uuid");
 
 var _ = require("../../");
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
-var _ArrayFieldItem = _interopRequireDefault(require("./ArrayFieldItem"));
-
 var _isValidPositiveInt = _interopRequireDefault(require("../../utils/devUtils/props/isValidPositiveInt"));
 
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
@@ -177,16 +173,24 @@ var ArrayField = function ArrayField(props) {
     });
   }, [createEmptyField, isControlled]);
 
-  var _useLabel = (0, _label.useLabel)(_objectSpread({}, props)),
+  var _useLabel = (0, _reactAria.useLabel)(_objectSpread({}, props)),
       raLabelProps = _useLabel.labelProps;
 
   var isLimitReached = !!maxSize && (value || fieldValues).length >= maxSize;
+  var isDisabled = (value || fieldValues).length === 1;
+  var renderedItem = (0, _react.useCallback)(function (id, fieldValue, otherFieldProps, onComponentRender) {
+    if (onComponentRender) {
+      return onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps);
+    }
+
+    return renderField(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps);
+  }, [onFieldValueChange, onFieldDelete, renderField, isDisabled]);
 
   var _getAriaAttributeProp = (0, _ariaAttributes.getAriaAttributeProps)(others),
       ariaProps = _getAriaAttributeProp.ariaProps,
       nonAriaProps = _getAriaAttributeProp.nonAriaProps;
 
-  return (0, _react2.jsx)(_.Box, nonAriaProps, (0, _react2.jsx)(_.Label, (0, _extends2["default"])({}, raLabelProps, (0, _utils.mergeProps)(labelProps, raLabelProps, {
+  return (0, _react2.jsx)(_.Box, nonAriaProps, (0, _react2.jsx)(_.Label, (0, _extends2["default"])({}, raLabelProps, (0, _reactAria.mergeProps)(labelProps, raLabelProps, {
     children: label
   }))), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     as: "ul",
@@ -196,24 +200,18 @@ var ArrayField = function ArrayField(props) {
         onComponentRender = _ref2.onComponentRender,
         fieldValue = _ref2.fieldValue,
         otherFieldProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
-    var isDisabled = (value || fieldValues).length === 1;
-    return (0, _react2.jsx)(_ArrayFieldItem["default"], (0, _extends2["default"])({
-      key: id,
-      id: id,
-      isDisabled: isDisabled,
-      fieldValue: fieldValue,
-      onComponentRender: onComponentRender,
-      onFieldValueChange: onFieldValueChange,
-      onFieldDelete: onFieldDelete,
-      renderField: renderField
-    }, otherFieldProps));
+    return (0, _react2.jsx)(_.Box, {
+      as: "li",
+      mb: "xs",
+      key: id
+    }, renderedItem(id, fieldValue, otherFieldProps, onComponentRender));
   })), helperText && (0, _react2.jsx)(_.FieldHelperText, {
     status: status
   }, helperText), isLimitReached && (0, _react2.jsx)(_.FieldHelperText, {
     status: _statuses["default"].DEFAULT
   }, maxSizeText || "Maximum ".concat(maxSize, " items.")), !isLimitReached && (0, _react2.jsx)(_.Button, {
     "aria-label": "Add field",
-    variant: "text",
+    variant: "link",
     onPress: onFieldAdd,
     sx: {
       width: 'fit-content',

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

@@ -36,7 +36,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 
 var _react = _interopRequireDefault(require("react"));
 
-var _overlays = require("@react-aria/overlays");
+var _reactAria = require("react-aria");
 
 var _uuid = require("uuid");
 
@@ -147,7 +147,7 @@ var Controlled = function Controlled() {
     id: (0, _uuid.v4)(),
     fieldValue: 'red',
     onComponentRender: function onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
-      return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_.SelectField, (0, _extends2["default"])({
+      return (0, _react2.jsx)(_reactAria.OverlayProvider, null, (0, _react2.jsx)(_.SelectField, (0, _extends2["default"])({
         defaultSelectedKey: fieldValue,
         onSelectionChange: function onSelectionChange(e) {
           return onFieldValueChange(e, id);
@@ -173,7 +173,7 @@ var Controlled = function Controlled() {
     id: (0, _uuid.v4)(),
     fieldValue: 'black',
     onComponentRender: function onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
-      return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_.SelectField, (0, _extends2["default"])({
+      return (0, _react2.jsx)(_reactAria.OverlayProvider, null, (0, _react2.jsx)(_.SelectField, (0, _extends2["default"])({
         defaultSelectedKey: fieldValue,
         onSelectionChange: function onSelectionChange(key) {
           return onFieldValueChange(key, id);
@@ -200,7 +200,7 @@ var Controlled = function Controlled() {
     id: (0, _uuid.v4)(),
     fieldValue: 'blue',
     onComponentRender: function onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
-      return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_.SelectField, (0, _extends2["default"])({
+      return (0, _react2.jsx)(_reactAria.OverlayProvider, null, (0, _react2.jsx)(_.SelectField, (0, _extends2["default"])({
         defaultSelectedKey: fieldValue,
         onSelectionChange: function onSelectionChange(e) {
           return onFieldValueChange(e, id);

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

@@ -99,7 +99,7 @@ var Badge = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   }, (0, _react2.jsx)(_themeUi.Badge, (0, _extends2["default"])({
     isRow: true
   }, badgeProps, {
-    variant: props.variant ? fixedVariant : 'variants.boxes.chip'
+    variant: props.variant ? fixedVariant : 'baseBadge'
   }), (slots === null || slots === void 0 ? void 0 : slots.leftIcon) && (0, _react2.jsx)(_.Box, {
     mr: "xs"
   }, slots.leftIcon), (0, _react2.jsx)(_.Text, (0, _extends2["default"])({

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

@@ -8,7 +8,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = exports.Default = exports.CountChip = exports.ChipWithLeftSlotAndIcon = exports.ChipWithIcon = exports.ChipWithCustomColors = void 0;
+exports["default"] = exports.Default = exports.CountBadge = exports.BadgeWithLeftSlotAndIcon = exports.BadgeWithIcon = exports.BadgeWithCustomColors = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
@@ -36,20 +36,13 @@ var _colors = require("../../styles/colors.js");
 
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 
-var _Chip = _interopRequireDefault(require("./Chip.mdx"));
+var _Badge = _interopRequireDefault(require("./Badge.mdx"));
 
 var _react2 = require("@emotion/react");
 
 var _default = {
-  title: 'Components/Chip',
+  title: 'Badge',
   component: _["default"],
-  parameters: {
-    docs: {
-      page: function page() {
-        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Chip["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
-      }
-    }
-  },
   argTypes: {
     bg: {
       control: {
@@ -87,6 +80,16 @@ var _default = {
         type: 'boolean'
       }
     }
+  },
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      },
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Badge["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      }
+    }
   }
 };
 exports["default"] = _default;
@@ -128,23 +131,23 @@ var Default = function Default(_ref5) {
 
 exports.Default = Default;
 
-var CountChip = function CountChip(_ref6) {
+var CountBadge = function CountBadge(_ref6) {
   var args = (0, _extends2["default"])({}, _ref6);
   return (0, _react2.jsx)(_Box["default"], null, (0, _react2.jsx)(_["default"], (0, _extends2["default"])({
     color: "white"
   }, args, {
     label: "1",
-    variant: "variants.boxes.countChip",
+    variant: "countBadge",
     mb: "12px"
   })), (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, args, {
     label: "1",
-    variant: "variants.boxes.countNeutral"
+    variant: "countNeutral"
   })));
 };
 
-exports.CountChip = CountChip;
+exports.CountBadge = CountBadge;
 
-var ChipWithCustomColors = function ChipWithCustomColors() {
+var BadgeWithCustomColors = function BadgeWithCustomColors() {
   return (0, _react2.jsx)(_["default"], {
     label: "Custom Colors",
     bg: "green",
@@ -152,14 +155,14 @@ var ChipWithCustomColors = function ChipWithCustomColors() {
   });
 };
 
-exports.ChipWithCustomColors = ChipWithCustomColors;
+exports.BadgeWithCustomColors = BadgeWithCustomColors;
 
-var ChipWithIcon = function ChipWithIcon() {
+var BadgeWithIcon = function BadgeWithIcon() {
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_["default"], {
-    label: "Chip with Icon Button",
+    label: "Badge with Icon Button",
     bg: "navy"
   }, (0, _react2.jsx)(_IconButton["default"], {
-    "aria-label": "Clear Chip with Icon Button",
+    "aria-label": "Clear Badge with Icon Button",
     variant: "inverted"
   }, (0, _react2.jsx)(_Icon["default"], {
     icon: _CloseIcon["default"],
@@ -170,9 +173,9 @@ var ChipWithIcon = function ChipWithIcon() {
       padding: '5px'
     }
   }), (0, _react2.jsx)(_["default"], {
-    label: "Chip with Icon Button"
+    label: "Badge with Icon Button"
   }, (0, _react2.jsx)(_IconButton["default"], {
-    "aria-label": "Clear Chip with Icon Button",
+    "aria-label": "Clear Badge with Icon Button",
     variant: "inverted"
   }, (0, _react2.jsx)(_Icon["default"], {
     icon: _EarthIcon["default"],
@@ -183,7 +186,7 @@ var ChipWithIcon = function ChipWithIcon() {
       padding: '5px'
     }
   }), (0, _react2.jsx)(_["default"], {
-    label: "Chip with Icon",
+    label: "Badge with Icon",
     bg: "green"
   }, (0, _react2.jsx)(_Icon["default"], {
     icon: _ContentCopyIcon["default"],
@@ -195,13 +198,13 @@ var ChipWithIcon = function ChipWithIcon() {
   })));
 };
 
-exports.ChipWithIcon = ChipWithIcon;
+exports.BadgeWithIcon = BadgeWithIcon;
 
-var ChipWithLeftSlotAndIcon = function ChipWithLeftSlotAndIcon() {
+var BadgeWithLeftSlotAndIcon = function BadgeWithLeftSlotAndIcon() {
   return (0, _react2.jsx)(_["default"], {
     label: "Chip with Icon Button and Left Slot",
     bg: "white",
-    variant: "variants.boxes.itemChipWithSlot",
+    variant: "itemBadgeWithSlot",
     slots: {
       leftIcon: (0, _react2.jsx)(_Icon["default"], {
         icon: VariableIcon,
@@ -217,4 +220,4 @@ var ChipWithLeftSlotAndIcon = function ChipWithLeftSlotAndIcon() {
   })));
 };
 
-exports.ChipWithLeftSlotAndIcon = ChipWithLeftSlotAndIcon;
+exports.BadgeWithLeftSlotAndIcon = BadgeWithLeftSlotAndIcon;

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

@@ -0,0 +1,191 @@
+"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

@@ -10,7 +10,7 @@ var _react2 = require("@testing-library/react");
 
 var _EarthIcon = _interopRequireDefault(require("mdi-react/EarthIcon"));
 
-var _Chip = _interopRequireDefault(require("../Chip/Chip"));
+var _Badge = _interopRequireDefault(require("./Badge"));
 
 var _Button = _interopRequireDefault(require("../Button/Button"));
 
@@ -28,19 +28,19 @@ var defaultProps = {
 
 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)));
+  return (0, _react2.render)((0, _react3.jsx)(_Badge["default"], (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 () {
+test('renders children within Badge component', function () {
   var children = (0, _react3.jsx)(_Button["default"], null);
   getComponent({
     children: children
@@ -50,7 +50,7 @@ test('renders children within Chip component', function () {
 
   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 +59,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

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

@@ -11,8 +11,8 @@ _Object$defineProperty(exports, "__esModule", {
 _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

@@ -69,7 +69,7 @@ var ExtendedBox = ( /*#__PURE__*/0, _base["default"])(_themeUi.Box, process.env.
 } : {
   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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0JveC9Cb3guanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBU29CIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0JveC9Cb3guanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgZm9yd2FyZFJlZiwgdXNlTWVtbyB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBsYXlvdXQsIGZsZXhib3gsIHR5cG9ncmFwaHkgfSBmcm9tICdzdHlsZWQtc3lzdGVtJztcbmltcG9ydCB7IEJveCBhcyBUaGVtZVVJQm94IH0gZnJvbSAndGhlbWUtdWknO1xuaW1wb3J0IHsgcHJvcFR5cGUgYXMgc3R5bGVQcm9wVHlwZSB9IGZyb20gJ0BzdHlsZWQtc3lzdGVtL3Byb3AtdHlwZXMnO1xuaW1wb3J0IHsgdG9OdW1iZXIgfSBmcm9tICdsb2Rhc2gnO1xuaW1wb3J0IHsgdXNlU3RhdHVzQ2xhc3NlcywgdXNlUHJvcFdhcm5pbmcgfSBmcm9tICcuLi8uLi9ob29rcyc7XG5cbmNvbnN0IEV4dGVuZGVkQm94ID0gc3R5bGVkKFRoZW1lVUlCb3gpKGxheW91dCwgZmxleGJveCwgdHlwb2dyYXBoeSk7XG5cbmNvbnN0IEJveCA9IGZvcndhcmRSZWYoKHByb3BzLCByZWYpID0+IHtcbiAgY29uc3Qge1xuICAgIGZsZXhEaXJlY3Rpb24sIC8vIGVzbGludC1kaXNhYmxlLWxpbmVcbiAgICBnYXAsXG4gICAgaXNSb3csXG4gICAgaXNEaXNhYmxlZCxcbiAgICBjbGFzc05hbWUsXG4gICAgZm9udFNpemUsXG4gICAgc3gsIC8vIGVzbGludC1kaXNhYmxlLWxpbmVcbiAgICAuLi5vdGhlcnNcbiAgfSA9IHByb3BzO1xuICBjb25zdCBmZCA9IGZsZXhEaXJlY3Rpb24gfHwgaXNSb3cgPyAncm93JyA6ICdjb2x1bW4nO1xuICBjb25zdCBjdXN0b20gPSB7IC4uLnN4IH07XG5cbiAgY29uc3QgeyBjbGFzc05hbWVzIH0gPSB1c2VTdGF0dXNDbGFzc2VzKGNsYXNzTmFtZSwgeyBpc0Rpc2FibGVkIH0pO1xuICB1c2VQcm9wV2FybmluZyhwcm9wcywgJ2Rpc2FibGVkJywgJ2lzRGlzYWJsZWQnKTtcblxuICBpZiAoZ2FwKSB7XG4gICAgY3VzdG9tWycmID4gKiArICo6bm90KDpmaXJzdC1jaGlsZCkgLyogZW1vdGlvbi1kaXNhYmxlLXNlcnZlci1yZW5kZXJpbmctdW5zYWZlLXNlbGVjdG9yLXdhcm5pbmctcGxlYXNlLWRvLW5vdC11c2UtdGhpcy10aGUtd2FybmluZy1leGlzdHMtZm9yLWEtcmVhc29uICovJ10gPSB7XG4gICAgICBbZmQgPT09ICdyb3cnID8gJ21hcmdpbkxlZnQnIDogJ21hcmdpblRvcCddOiBnYXAsXG4gICAgfTtcbiAgfVxuXG4gIGNvbnN0IGN1c3RvbUZvbnRTaXplID0gdXNlTWVtbygoKSA9PiB7XG4gICAgY29uc3QgbnVtZXJpY2FsRm9udFNpemUgPSB0b051bWJlcihmb250U2l6ZSk7XG4gICAgaWYgKE51bWJlci5pc05hTihudW1lcmljYWxGb250U2l6ZSkpIHtcbiAgICAgIHJldHVybiBmb250U2l6ZTtcbiAgICB9XG4gICAgcmV0dXJuIG51bWVyaWNhbEZvbnRTaXplO1xuICB9LCBbZm9udFNpemVdKTtcblxuICByZXR1cm4gKFxuICAgIDxFeHRlbmRlZEJveFxuICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWVzfVxuICAgICAgcmVmPXtyZWZ9XG4gICAgICBkaXNwbGF5PVwiZmxleFwiXG4gICAgICBmbGV4RGlyZWN0aW9uPXtmZH1cbiAgICAgIHZhcmlhbnQ9XCJib3guYmFzZVwiXG4gICAgICBmb250U2l6ZT17Y3VzdG9tRm9udFNpemV9XG4gICAgICB7Li4ub3RoZXJzfVxuICAgICAgc3g9e2N1c3RvbX1cbiAgICAvPlxuICApO1xufSk7XG5cbkJveC5wcm9wVHlwZXMgPSB7XG4gIC8qKiBUaGUgYmFja2dyb3VuZCBjb2xvciBvZiB0aGUgYm94LiAqL1xuICBiZzogUHJvcFR5cGVzLnN0cmluZyxcbiAgLyoqIFdoZXRoZXIgdGhlIGJveCBpcyBkaXNhYmxlZC4gKi9cbiAgaXNEaXNhYmxlZDogUHJvcFR5cGVzLm9uZU9mVHlwZShbUHJvcFR5cGVzLmJvb2wsIFByb3BUeXBlcy5vYmplY3RdKSxcbiAgLyoqIFRoZSBiYXNlIEhUTUwgdGFnIG5hbWUgb3IgUmVhY3QgY29tcG9uZW50IHR5cGUgdG8gcmVuZGVyICovXG4gIGFzOiBQcm9wVHlwZXMub25lT2ZUeXBlKFtQcm9wVHlwZXMuc3RyaW5nLCBQcm9wVHlwZXMuZWxlbWVudFR5cGVdKSxcbiAgLyoqIFdoZW4gdHJ1ZSwgZGlzcGxheSBhcyBhIHJvdyByYXRoZXIgdGhhbiBhIGNvbHVtbi4gKi9cbiAgaXNSb3c6IFByb3BUeXBlcy5ib29sLFxuICAvKiogR2FwIGJldHdlZW4gaXRlbXMsIHdoZXRoZXIgaW4gYSByb3cgb3IgY29sdW1uLiAqL1xuICBnYXA6IHN0eWxlUHJvcFR5cGUsXG4gIGZvbnRTaXplOiBQcm9wVHlwZXMub25lT2ZUeXBlKFtQcm9wVHlwZXMuc3RyaW5nLCBQcm9wVHlwZXMubnVtYmVyXSksXG59O1xuXG5Cb3guZGVmYXVsdFByb3BzID0ge1xuICBhczogJ2RpdicsXG4gIGlzUm93OiBmYWxzZSxcbiAgaXNEaXNhYmxlZDogZmFsc2UsXG59O1xuXG5Cb3guZGlzcGxheU5hbWUgPSAnQm94JztcblxuZXhwb3J0IGRlZmF1bHQgQm94O1xuIl19 */");
 var Box = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var flexDirection = props.flexDirection,
       gap = props.gap,
@@ -108,7 +108,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

package/lib/cjs/{styles/variants/tooltip.js → components/Box/Box.styles.js}

@@ -7,10 +7,10 @@ _Object$defineProperty(exports, "__esModule", {
 });
 
 exports["default"] = void 0;
-var tooltipContainer = {
-  p: 'sm'
+var base = {
+  display: 'flex'
 };
 var _default = {
-  tooltipContainer: tooltipContainer
+  base: base
 };
 exports["default"] = _default;

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

@@ -47,7 +47,7 @@ var Bracket = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return bracketRef.current;
   });
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
-    variant: "boxes.bracketBase"
+    variant: "bracket.base"
   }, others), !isLast && (0, _react2.jsx)(_index.Box, {
     width: 15,
     sx: {