@pingux/astro 1.37.2 → 1.38.0-alpha.1

package/lib/components/Chip/Chip.js

@@ -1,24 +1,8 @@
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
-import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
-import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
-import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-
-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) { _defineProperty(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; }
-
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ChipContext } from './ChipContext';
-import Box from '../Box/Box';
-import Text from '../Text/Text';
-import * as colors from '../../styles/colors';
+import Badge from './Badge';
+import { useDeprecationWarning } from '../../hooks';
 /**
  * Chip component.
  * Built on top of the [Box from Theme-UI](https://theme-ui.com/components/box/) and uses the
@@ -27,40 +11,10 @@ import * as colors from '../../styles/colors';
 
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Chip = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var bg = props.bg,
-      children = props.children,
-      textColor = props.textColor,
-      textProps = props.textProps,
-      label = props.label,
-      align = props.align,
-      isUppercase = props.isUppercase;
-
-  var sx = _objectSpread({}, isUppercase && {
-    paddingBottom: '3px'
-  });
-
-  if (align) {
-    sx.position = 'absolute';
-    sx[align] = '15px';
-  }
-
-  return ___EmotionJSX(ChipContext.Provider, {
-    value: {
-      bg: bg
-    }
-  }, ___EmotionJSX(Box, _extends({
-    isRow: true,
-    variant: "boxes.chip",
-    sx: sx,
+  useDeprecationWarning('The Chip component will be deprecated in Astro-UI 2.0.0 and replaced by the `Badge` component instead.');
+  return ___EmotionJSX(Badge, _extends({
     ref: ref
-  }, props), ___EmotionJSX(Text, _extends({
-    variant: "label",
-    color: textColor,
-    sx: isUppercase && {
-      textTransform: 'uppercase',
-      fontSize: '11px'
-    }
-  }, textProps), label), children));
+  }, props));
 });
 Chip.propTypes = {
   /** The text color of the chip. */
@@ -69,6 +23,12 @@ Chip.propTypes = {
   /** The background color of the chip. */
   bg: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
 
+  /** Provides a way to insert markup in specified places. */
+  slots: PropTypes.shape({
+    /** The given node will be inserted into left side of the chip. */
+    leftIcon: PropTypes.node
+  }),
+
   /** The label of the chip. */
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
 
@@ -81,9 +41,4 @@ Chip.propTypes = {
   /** Alignment of chip relative to parent container. */
   align: PropTypes.oneOf(['top', 'right', 'bottom', 'left'])
 };
-Chip.defaultProps = {
-  textColor: 'white',
-  bg: colors.neutral[10],
-  isUppercase: false
-};
 export default Chip;

package/lib/components/CodeView/CodeView.stories.js

@@ -7,7 +7,7 @@ import { Text } from '../..';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var code = "{\n  \"_links\": {\n    \"self\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad\"\n    },\n    \"password\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/password\"\n    },\n    \"password.set\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/password\"\n    },\n    \"password.reset\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/password\"\n    },\n    \"password.check\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/password\"\n    },\n    \"password.recover\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/password\"\n    },\n    \"account.sendVerificationCode\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad\"\n    },\n    \"linkedAccounts\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/linkedAccounts\"\n    }\n  },\n  \"id\": \"5a5d4c0c-8383-4796-9cdc-16b5a22f45ad\",\n  \"environment\": {\n    \"id\": \"94e3268d-847d-47aa-a45e-1ef8dd8f4df0\"\n  },\n  \"account\": {\n    \"canAuthenticate\": true,\n    \"status\": \"OK\"\n  },\n  \"createdAt\": \"2021-09-03T15:01:43.555Z\",\n  \"email\": \"allegraweldon@pingidentity.com\",\n  \"enabled\": true,\n  \"identityProvider\": {\n    \"type\": \"PING_ONE\"\n  },\n  \"lifecycle\": {\n    \"status\": \"ACCOUNT_OK\"\n  },\n  \"mfaEnabled\": false,\n  \"population\": {\n    \"id\": \"c1adbc29-f188-4ea6-a015-49bddd74bc84\"\n  },\n  \"updatedAt\": \"2021-09-03T15:01:43.555Z\",\n  \"username\": \"allegraweldon@pingidentity.com\",\n  \"verifyStatus\": \"NOT_INITIATED\"\n}";
 export default {
-  title: 'CodeView',
+  title: 'Components/CodeView',
   component: CodeView,
   argTypes: {
     children: {

package/lib/components/CollapsiblePanel/CollapsiblePanel.stories.js

@@ -29,7 +29,7 @@ import { useOverlayPanelState } from '../../hooks';
 import { Breadcrumbs, Box, Button, CheckboxField, Chip, ListView, Item, Icon, IconButton, CollapsiblePanelItem, OverlayPanel, OverlayProvider, SearchField, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'CollapsiblePanel',
+  title: 'Components/CollapsiblePanel',
   component: CollapsiblePanel,
   argTypes: {
     listTitle: {

package/lib/components/CollapsiblePanelContainer/CollapsiblePanelBadge.js

@@ -19,7 +19,7 @@ var CollapsiblePanelBadge = function CollapsiblePanelBadge(props) {
     bg: "neutral.90",
     label: selectedFilterCount.toString(),
     textColor: "neutral.30",
-    variant: "collapsiblePanel.collapsiblePanelBadge",
+    variant: "variants.collapsiblePanel.collapsiblePanelBadge",
     isUppercase: true
   }, others));
 };

package/lib/components/ComboBoxField/ComboBoxField.stories.js

@@ -21,7 +21,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-import React, { useState, useMemo } from 'react';
+import React, { useState } from 'react';
 import { action } from '@storybook/addon-actions';
 import { useFilter } from '@react-aria/i18n';
 import { useAsyncList } from '@react-stately/data';
@@ -324,22 +324,65 @@ export var ControlledFiltering = function ControlledFiltering() {
   }),
       startsWith = _startsWithInstanceProperty(_useFilter);
 
-  var _useState7 = useState(''),
+  var _useState7 = useState({
+    inputValue: '',
+    selectedKey: '',
+    itemsList: items
+  }),
       _useState8 = _slicedToArray(_useState7, 2),
-      filterValue = _useState8[0],
-      setFilterValue = _useState8[1];
+      fieldState = _useState8[0],
+      setFieldState = _useState8[1];
+
+  var onSelectionChange = function onSelectionChange(key) {
+    var selectedItem = _filterInstanceProperty(items).call(items, function (_ref2) {
+      var id = _ref2.id;
+      return id === key;
+    });
+
+    setFieldState({
+      inputValue: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name,
+      selectedKey: key,
+      itemsList: _filterInstanceProperty(items).call(items, function (item) {
+        var _selectedItem$name;
+
+        return startsWith(item.name, (_selectedItem$name = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name) !== null && _selectedItem$name !== void 0 ? _selectedItem$name : '');
+      })
+    });
+  };
 
-  var filteredItems = useMemo(function () {
-    return _filterInstanceProperty(items).call(items, function (item) {
-      return startsWith(item.name, filterValue);
+  var onInputChange = function onInputChange(value) {
+    setFieldState(function (oldValues) {
+      return {
+        inputValue: value,
+        selectedKey: value === '' ? null : oldValues.selectedKey,
+        itemsList: _filterInstanceProperty(items).call(items, function (item) {
+          return startsWith(item.name, value);
+        })
+      };
     });
-  }, [startsWith, filterValue]);
+  };
+
+  var onOpenChange = function onOpenChange(isOpen, menuTrigger) {
+    if (menuTrigger === 'manual' && isOpen) {
+      setFieldState(function (oldValues) {
+        return {
+          inputValue: oldValues.inputValue,
+          selectedKey: oldValues.selectedKey,
+          itemsList: items
+        };
+      });
+    }
+  };
+
   return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
     label: "Example label"
   }, actions, {
-    items: filteredItems,
-    inputValue: filterValue,
-    onInputChange: setFilterValue
+    items: fieldState.itemsList,
+    inputValue: fieldState.inputValue,
+    selectedKey: fieldState.selectedKey,
+    onInputChange: onInputChange,
+    onSelectionChange: onSelectionChange,
+    onOpenChange: onOpenChange
   }), function (item) {
     return ___EmotionJSX(Item, {
       key: item.name
@@ -504,8 +547,8 @@ export var ControlledWithAddOption = function ControlledWithAddOption() {
 
   var onSelectionChange = function onSelectionChange(key) {
     // Add new option to options array
-    if (key && !_findInstanceProperty(options).call(options, function (_ref2) {
-      var name = _ref2.name;
+    if (key && !_findInstanceProperty(options).call(options, function (_ref3) {
+      var name = _ref3.name;
       return name === key;
     })) {
       var _context2;

package/lib/components/ComboBoxField/ComboBoxField.test.js

@@ -20,7 +20,7 @@ import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-sta
 import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
-import React, { useState, useMemo } from 'react';
+import React, { useState } from 'react';
 import { fireEvent } from '@testing-library/react';
 import { axe } from 'jest-axe';
 import { useFilter } from '@react-aria/i18n';
@@ -66,25 +66,69 @@ var ComboBoxWithCustomFilter = function ComboBoxWithCustomFilter() {
   }),
       startsWith = _startsWithInstanceProperty(_useFilter);
 
-  var _useState = useState(''),
+  var _useState = useState({
+    inputValue: '',
+    selectedKey: '',
+    itemsList: items
+  }),
       _useState2 = _slicedToArray(_useState, 2),
-      filterValue = _useState2[0],
-      setFilterValue = _useState2[1];
+      fieldState = _useState2[0],
+      setFieldState = _useState2[1];
+
+  var onSelectionChange = function onSelectionChange(key) {
+    var selectedItem = _filterInstanceProperty(items).call(items, function (_ref2) {
+      var id = _ref2.id;
+      return id === key;
+    });
+
+    setFieldState({
+      inputValue: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name,
+      selectedKey: key,
+      itemsList: _filterInstanceProperty(items).call(items, function (item) {
+        var _selectedItem$name;
 
-  var filteredItems = useMemo(function () {
-    return _filterInstanceProperty(items).call(items, function (item) {
-      return startsWith(item.name, filterValue);
+        return startsWith(item.name, (_selectedItem$name = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name) !== null && _selectedItem$name !== void 0 ? _selectedItem$name : '');
+      })
     });
-  }, [startsWith, filterValue]);
-  return ___EmotionJSX(ComboBoxField, _extends({}, defaultProps, {
-    items: filteredItems,
-    inputValue: filterValue,
-    onInputChange: setFilterValue
-  }), function (item) {
+  };
+
+  var onInputChange = function onInputChange(value) {
+    setFieldState(function (oldValues) {
+      return {
+        inputValue: value,
+        selectedKey: value === '' ? null : oldValues.selectedKey,
+        itemsList: _filterInstanceProperty(items).call(items, function (item) {
+          return startsWith(item.name, value);
+        })
+      };
+    });
+  };
+
+  var onOpenChange = function onOpenChange(isOpen, menuTrigger) {
+    if (menuTrigger === 'manual' && isOpen) {
+      setFieldState(function (oldValues) {
+        return {
+          inputValue: oldValues.inputValue,
+          selectedKey: oldValues.selectedKey,
+          itemsList: items
+        };
+      });
+    }
+  };
+
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
+    label: "Example label",
+    items: fieldState.itemsList,
+    inputValue: fieldState.inputValue,
+    selectedKey: fieldState.selectedKey,
+    onInputChange: onInputChange,
+    onSelectionChange: onSelectionChange,
+    onOpenChange: onOpenChange
+  }, defaultProps), function (item) {
     return ___EmotionJSX(Item, {
-      id: item.id
+      key: item.name
     }, item.name);
-  });
+  }));
 };
 
 var ComboBoxWithAddOption = function ComboBoxWithAddOption() {
@@ -104,8 +148,8 @@ var ComboBoxWithAddOption = function ComboBoxWithAddOption() {
       setSelectedKey = _useState8[1];
 
   var onSelectionChange = function onSelectionChange(key) {
-    if (key && !_findInstanceProperty(options).call(options, function (_ref2) {
-      var name = _ref2.name;
+    if (key && !_findInstanceProperty(options).call(options, function (_ref3) {
+      var name = _ref3.name;
       return name === key;
     })) {
       var _context;

package/lib/components/CopyText/CopyText.stories.js

@@ -5,7 +5,7 @@ import Text from '../Text';
 import CopyText from './CopyText';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'CopyText',
+  title: 'Components/CopyText',
   component: CopyText,
   argTypes: {
     mode: {

package/lib/components/DataTable/DataTable.stories.js

@@ -17,7 +17,7 @@ import isChromatic from 'chromatic/isChromatic';
 import { DataTable, DataTableBody, DataTableCell, DataTableColumn, DataTableHeader, DataTableRow, DataTableChip, DataTableMenu, DataTableMultiLine } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'DataTable',
+  title: 'Components/DataTable',
   component: DataTable,
   parameters: {
     docs: {

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.stories.js

@@ -24,7 +24,7 @@ import EnvironmentBreadcrumb from './EnvironmentBreadcrumb';
 import { Item, Section, Chip, Box, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'EnvironmentBreadcrumb',
+  title: 'Components/EnvironmentBreadcrumb',
   component: EnvironmentBreadcrumb
 };
 var defaultEnvironments = [{
@@ -103,7 +103,7 @@ export var Default = function Default(args) {
     color: "inherit"
   }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Chip, {
     label: "SANDBOX",
-    variant: "boxes.environmentChip",
+    variant: "variants.boxes.environmentChip",
     bg: "neutral.40"
   }) : null);
 
@@ -132,7 +132,7 @@ export var Default = function Default(args) {
       textValue: name
     }, name, isSandbox ? ___EmotionJSX(Chip, {
       label: "SANDBOX",
-      variant: "boxes.environmentChip",
+      variant: "variants.boxes.environmentChip",
       bg: "neutral.40"
     }) : null);
   });
@@ -215,7 +215,7 @@ export var WithSections = function WithSections() {
     color: "inherit"
   }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Chip, {
     label: "SANDBOX",
-    variant: "boxes.environmentChip",
+    variant: "variants.boxes.environmentChip",
     bg: "neutral.40"
   }) : null);
 
@@ -245,7 +245,7 @@ export var WithSections = function WithSections() {
         isRow: true
       }, itemName, isSandbox ? ___EmotionJSX(Chip, {
         label: "SANDBOX",
-        variant: "boxes.environmentChip",
+        variant: "variants.boxes.environmentChip",
         bg: "neutral.40"
       }) : null));
     });
@@ -272,7 +272,7 @@ export var DefaultOpen = function DefaultOpen() {
     color: "inherit"
   }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Chip, {
     label: "SANDBOX",
-    variant: "boxes.environmentChip",
+    variant: "variants.boxes.environmentChip",
     bg: "neutral.40"
   }) : null);
 
@@ -302,7 +302,7 @@ export var DefaultOpen = function DefaultOpen() {
       textValue: name
     }, name, isSandbox ? ___EmotionJSX(Chip, {
       label: "SANDBOX",
-      variant: "boxes.environmentChip",
+      variant: "variants.boxes.environmentChip",
       bg: "neutral.40"
     }) : null);
   });
@@ -328,7 +328,7 @@ export var ControlledMenu = function ControlledMenu() {
     color: "inherit"
   }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Chip, {
     label: "SANDBOX",
-    variant: "boxes.environmentChip",
+    variant: "variants.boxes.environmentChip",
     bg: "neutral.40"
   }) : null);
 
@@ -359,7 +359,7 @@ export var ControlledMenu = function ControlledMenu() {
       textValue: name
     }, name, isSandbox ? ___EmotionJSX(Chip, {
       label: "SANDBOX",
-      variant: "boxes.environmentChip",
+      variant: "variants.boxes.environmentChip",
       bg: "neutral.40"
     }) : null);
   });
@@ -379,7 +379,7 @@ export var RightAlignedChips = function RightAlignedChips(args) {
     color: "inherit"
   }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Chip, {
     label: "SANDBOX",
-    variant: "boxes.environmentChip",
+    variant: "variants.boxes.environmentChip",
     bg: "neutral.40"
   }) : null);
 
@@ -437,7 +437,7 @@ export var RightAlignedChips = function RightAlignedChips(args) {
       textValue: name
     }, name, isSandbox ? ___EmotionJSX(Chip, {
       label: "SANDBOX",
-      variant: "boxes.environmentChip",
+      variant: "variants.boxes.environmentChip",
       bg: "neutral.40",
       align: "right"
     }) : null);

package/lib/components/HelpHint/HelpHint.stories.js

@@ -3,7 +3,7 @@ import HelpHint from '.';
 import Box from '../Box';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'HelpHint',
+  title: 'Components/HelpHint',
   component: HelpHint,
   argTypes: {
     children: {

package/lib/components/Icon/Icon.stories.js

@@ -14,7 +14,7 @@ import { flatColorList } from '../../styles/colors';
 import { tShirtSizes } from '../../utils/devUtils/constants/tShirtSizes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Icon',
+  title: 'Components/Icon',
   component: Icon,
   parameters: {
     docs: {

package/lib/components/IconBadge/IconBadge.stories.js

@@ -6,7 +6,7 @@ import IconBadge from '.';
 import { Icon, Box } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'IconBadge',
+  title: 'Components/IconBadge',
   component: IconBadge,
   parameters: {
     docs: {

package/lib/components/IconButton/IconButton.js

@@ -23,7 +23,7 @@ import { useFocusRing } from '@react-aria/focus';
 import { Pressable, useHover } from '@react-aria/interactions';
 import { mergeProps } from '@react-aria/utils';
 import { useAriaLabelWarning, useStatusClasses } from '../../hooks';
-import { ChipContext } from '../Chip/ChipContext';
+import { BadgeContext } from '../../context/BadgeContext';
 import TooltipTrigger, { Tooltip } from '../TooltipTrigger';
 /**
  * Convenience wrapper for a Button + Icon. This component applies specific styles necessary for
@@ -58,7 +58,7 @@ var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
       buttonProps = _useButton.buttonProps,
       isPressed = _useButton.isPressed;
 
-  var _useContext = useContext(ChipContext),
+  var _useContext = useContext(BadgeContext),
       chipBg = _useContext.bg;
 
   var _useHover = useHover(props),

package/lib/components/IconButton/IconButton.stories.js

@@ -8,7 +8,7 @@ import PencilIcon from 'mdi-react/PencilIcon';
 import { Box, Icon, IconButton, Table, TableHead, TableRow, TableCell, TableBody, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'IconButton',
+  title: 'Components/IconButton',
   component: IconButton,
   parameters: {
     docs: {

package/lib/components/IconButtonToggle/IconButtonToggle.stories.js

@@ -6,7 +6,7 @@ import EyeOffIcon from 'mdi-react/EyeOffOutlineIcon';
 import IconButtonToggle from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'IconButtonToggle',
+  title: 'Components/IconButtonToggle',
   component: IconButtonToggle
 };
 export var Default = function Default(args) {

package/lib/components/Image/Image.stories.js

@@ -8,7 +8,7 @@ import { htmlElements } from '../../utils/devUtils/constants/htmlElements';
 import { Box, Button } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Image',
+  title: 'Components/Image',
   component: Image,
   argTypes: {
     isDisabled: {},

package/lib/components/Link/Link.stories.js

@@ -6,7 +6,7 @@ import { htmlElements } from '../../utils/devUtils/constants/htmlElements';
 import variants from '../../styles/variants/links';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Link',
+  title: 'Components/Link',
   component: Link,
   argTypes: {
     href: {

package/lib/components/ListItem/ListItem.stories.js

@@ -9,7 +9,7 @@ import Text from '../Text';
 import Separator from '../Separator';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'ListItem',
+  title: 'Components/ListItem',
   component: ListItem
 };
 export var Default = function Default(args) {

package/lib/components/ListView/ListView.stories.js

@@ -22,7 +22,7 @@ import Text from '../Text';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'ListView',
+  title: 'Components/ListView',
   component: ListView,
   argTypes: {
     loadingState: {

package/lib/components/Loader/Loader.stories.js

@@ -5,7 +5,7 @@ import Loader from './';
 import { flatColorList } from '../../styles/colors';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Loader',
+  title: 'Components/Loader',
   component: Loader,
   argTypes: {
     color: {

package/lib/components/Menu/Menu.stories.js

@@ -5,7 +5,7 @@ import Menu from '../Menu';
 import Text from '../Text';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Menu',
+  title: 'Components/Menu',
   component: Menu,
   parameters: {
     actions: {

package/lib/components/Messages/Messages.stories.js

@@ -26,7 +26,7 @@ import { Box, Button, Messages } from '../..';
 import { messagesReducerStory as messagesReducer, multiMessagesReducerStory as multiMessagesReducer } from './index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Messages',
+  title: 'Components/Messages',
   component: Messages,
   argTypes: {
     items: {

package/lib/components/Modal/Modal.stories.js

@@ -4,7 +4,7 @@ import { useModalState } from '../../hooks';
 import { OverlayProvider, Box, Button, Text, Modal } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Modal',
+  title: 'Components/Modal',
   component: Modal,
   argTypes: {
     title: {

package/lib/components/MultivaluesField/MultivaluesField.js

@@ -351,7 +351,7 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
         key: item.key,
         role: "presentation",
         label: item.name,
-        variant: "boxes.readOnlyChip",
+        variant: "variants.boxes.readOnlyChip",
         bg: "white",
         textProps: {
           sx: {
@@ -364,6 +364,27 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     return null;
   }));
 
+  var multivaluesFieldChip = function multivaluesFieldChip(item) {
+    return ___EmotionJSX(Chip, _extends({
+      key: item.key,
+      role: "presentation",
+      variant: "variants.boxes.selectedItemChip",
+      bg: "active",
+      label: item.name,
+      slots: item.slots
+    }, item.chipProps), ___EmotionJSX(IconButton, _extends({
+      "aria-label": "delete",
+      onPress: function onPress() {
+        return deleteItem(item.key);
+      },
+      variant: "buttons.chipDeleteButton"
+    }, item.buttonProps), ___EmotionJSX(Icon, {
+      icon: Clear,
+      color: "white",
+      size: 14
+    })));
+  };
+
   var selectedItems = ___EmotionJSX(React.Fragment, null, _mapInstanceProperty(_context7 = _Array$from(selectionManager.selectedKeys)).call(_context7, function (key) {
     var _context8, _context9;
 
@@ -372,23 +393,7 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     });
 
     if (item) {
-      return ___EmotionJSX(Chip, {
-        key: item.key,
-        role: "presentation",
-        variant: "boxes.selectedItemChip",
-        bg: "active",
-        label: item.name
-      }, ___EmotionJSX(IconButton, {
-        "aria-label": "delete",
-        onPress: function onPress() {
-          return deleteItem(item.key);
-        },
-        variant: "buttons.chipDeleteButton"
-      }, ___EmotionJSX(Icon, {
-        icon: Clear,
-        color: "white",
-        size: 14
-      })));
+      return multivaluesFieldChip(item);
     }
 
     return null;