@pingux/astro 1.42.0 → 2.0.0-alpha.1

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

@@ -8,7 +8,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 
 var _react = _interopRequireDefault(require("react"));
 
-var _collections = require("@react-stately/collections");
+var _reactStately = require("react-stately");
 
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 
@@ -41,17 +41,17 @@ var selectedAccordionKeys = ['identityProvider', 'identityProvider1'];
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _testWrapper.render)((0, _react2.jsx)(_AccordionGroup["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_collections.Item, {
+  return (0, _testWrapper.render)((0, _react2.jsx)(_AccordionGroup["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_reactStately.Item, {
     key: "first",
     textValue: "Duplicate",
     "data-id": "first",
     label: "Accordion item"
-  }, (0, _react2.jsx)(_Text["default"], null, "Render me!")), (0, _react2.jsx)(_collections.Item, {
+  }, (0, _react2.jsx)(_Text["default"], null, "Render me!")), (0, _react2.jsx)(_reactStately.Item, {
     key: "second",
     textValue: "Duplicate",
     "data-id": "second",
     label: "Accordion item"
-  }, (0, _react2.jsx)(_Text["default"], null, "Render me!")), (0, _react2.jsx)(_collections.Item, {
+  }, (0, _react2.jsx)(_Text["default"], null, "Render me!")), (0, _react2.jsx)(_reactStately.Item, {
     key: "third",
     textValue: "Duplicate",
     "data-id": "third",
@@ -67,15 +67,15 @@ var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return (0, _testWrapper.render)((0, _react2.jsx)(_index.OverlayPanel, {
     isOpen: true
-  }, (0, _react2.jsx)(_AccordionGroup["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_collections.Item, {
+  }, (0, _react2.jsx)(_AccordionGroup["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_reactStately.Item, {
     key: "first",
     textValue: "Duplicate",
     "data-id": "first"
-  }, (0, _react2.jsx)(_Text["default"], null, "Render me!")), (0, _react2.jsx)(_collections.Item, {
+  }, (0, _react2.jsx)(_Text["default"], null, "Render me!")), (0, _react2.jsx)(_reactStately.Item, {
     key: "second",
     textValue: "Duplicate",
     "data-id": "second"
-  }, (0, _react2.jsx)(_Text["default"], null, "Render me!")), (0, _react2.jsx)(_collections.Item, {
+  }, (0, _react2.jsx)(_Text["default"], null, "Render me!")), (0, _react2.jsx)(_reactStately.Item, {
     key: "third",
     textValue: "Duplicate",
     "data-id": "third"
@@ -84,12 +84,12 @@ var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
 
 var getComponentWithInput = function getComponentWithInput() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _testWrapper.render)((0, _react2.jsx)(_AccordionGroup["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_collections.Item, {
+  return (0, _testWrapper.render)((0, _react2.jsx)(_AccordionGroup["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_reactStately.Item, {
     key: "first",
     textValue: "Duplicate",
     "data-id": "first",
     label: "Accordion item"
-  }, (0, _react2.jsx)(_Text["default"], null, "Render me!")), (0, _react2.jsx)(_collections.Item, {
+  }, (0, _react2.jsx)(_Text["default"], null, "Render me!")), (0, _react2.jsx)(_reactStately.Item, {
     key: "second",
     textValue: "Duplicate",
     "data-id": "second",
@@ -109,11 +109,11 @@ var getComponentWithPopover = function getComponentWithPopover() {
     "data-testid": "popoverbutton"
   }, "Click me"), (0, _react2.jsx)(_index.Menu, {
     onAction: function onAction() {}
-  }, (0, _react2.jsx)(_collections.Item, {
+  }, (0, _react2.jsx)(_reactStately.Item, {
     key: "edit"
-  }, "Edit"), (0, _react2.jsx)(_collections.Item, {
+  }, "Edit"), (0, _react2.jsx)(_reactStately.Item, {
     key: "duplicate"
-  }, "Duplicate"), (0, _react2.jsx)(_collections.Item, {
+  }, "Duplicate"), (0, _react2.jsx)(_reactStately.Item, {
     key: "delete",
     textValue: "delete"
   }, (0, _react2.jsx)(_Text["default"], {
@@ -122,7 +122,7 @@ var getComponentWithPopover = function getComponentWithPopover() {
     items: items,
     defaultExpandedKeys: selectedAccordionKeys
   }, function (item) {
-    return (0, _react2.jsx)(_collections.Item, {
+    return (0, _react2.jsx)(_reactStately.Item, {
       key: item.key,
       textValue: item.label,
       label: item.label
@@ -137,7 +137,7 @@ var getComponentWithMultipleAccordion = function getComponentWithMultipleAccordi
     width: "50%"
   }, (0, _react2.jsx)(_AccordionGroup["default"], {
     defaultExpandedKeys: ['customConfiguration']
-  }, (0, _react2.jsx)(_collections.Item, {
+  }, (0, _react2.jsx)(_reactStately.Item, {
     key: "customConfiguration",
     label: "connection.configuration",
     regionProps: {
@@ -151,7 +151,7 @@ var getComponentWithMultipleAccordion = function getComponentWithMultipleAccordi
     "data-id": "connection-configuration-custom-form"
   }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_Text["default"], null, "other text"), (0, _react2.jsx)(_Text["default"], null, "another text"))))), (0, _react2.jsx)(_AccordionGroup["default"], {
     defaultExpandedKeys: ['customConfiguration1']
-  }, (0, _react2.jsx)(_collections.Item, {
+  }, (0, _react2.jsx)(_reactStately.Item, {
     key: "customConfiguration",
     label: "connection.configuration1",
     regionProps: {

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