@pingux/astro 1.10.1-alpha.1 → 1.11.0

package/lib/components/{MultiselectListContainer/MultiselectBadge.js → CollapsiblePanelContainer/CollapsiblePanelBadge.js}

@@ -5,12 +5,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Chip from '../Chip';
 /**
- * The MultiselectBadge serves as a badge to display selected count.
+ * The CollapsiblePanelBadge serves as a badge to display selected count.
  */
 
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
-var MultiselectBadge = function MultiselectBadge(props) {
+var CollapsiblePanelBadge = function CollapsiblePanelBadge(props) {
   var selectedFilterCount = props.selectedFilterCount,
       others = _objectWithoutProperties(props, _excluded);
 
@@ -19,14 +19,14 @@ var MultiselectBadge = function MultiselectBadge(props) {
     bg: "neutral.90",
     label: selectedFilterCount.toString(),
     textColor: "neutral.30",
-    variant: "multiselectListContainer.multiselectListBadge",
+    variant: "collapsiblePanel.collapsiblePanelBadge",
     isUppercase: true
   }, others));
 };
 
-MultiselectBadge.propTypes = {
+CollapsiblePanelBadge.propTypes = {
   selectedFilterCount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   margin: PropTypes.string
 };
-MultiselectBadge.displayName = 'MultiselectBadge';
-export default MultiselectBadge;
+CollapsiblePanelBadge.displayName = 'CollapsiblePanelBadge';
+export default CollapsiblePanelBadge;

package/lib/components/{MultiselectListContainer/MultiselectBadge.test.js → CollapsiblePanelContainer/CollapsiblePanelBadge.test.js}

@@ -2,9 +2,9 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
-import MultiselectBadge from './MultiselectBadge';
+import CollapsiblePanelBadge from './CollapsiblePanelBadge';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var testId = 'test-multiselectBadge';
+var testId = 'test-collapsiblePanelBadge';
 var defaultProps = {
   'data-testid': testId,
   selectedFilterCount: 9
@@ -12,7 +12,7 @@ var defaultProps = {
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return render(___EmotionJSX(MultiselectBadge, _extends({}, defaultProps, props)));
+  return render(___EmotionJSX(CollapsiblePanelBadge, _extends({}, defaultProps, props)));
 };
 
 afterEach(function () {
@@ -20,15 +20,15 @@ afterEach(function () {
 }); // Need to be added to each test file to test accessibility using axe.
 
 axeTest(getComponent);
-test('default multiselectBadge', function () {
+test('default CollapsiblePanelBadge', function () {
   getComponent();
-  var multiselectBadge = screen.getByTestId(testId);
-  expect(multiselectBadge).toBeInTheDocument();
+  var collapsiblePanelBadge = screen.getByTestId(testId);
+  expect(collapsiblePanelBadge).toBeInTheDocument();
 });
 test('custom classname can be passed', function () {
   getComponent({
     className: 'testing-class'
   });
-  var multiselectBadge = screen.getByTestId(testId);
-  expect(multiselectBadge).toHaveClass('testing-class');
+  var collapsiblePanelBadge = screen.getByTestId(testId);
+  expect(collapsiblePanelBadge).toHaveClass('testing-class');
 });

package/lib/components/{MultiselectListContainer/MultiselectListContainer.js → CollapsiblePanelContainer/CollapsiblePanelContainer.js}

@@ -20,16 +20,16 @@ import PropTypes from 'prop-types';
 import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
 import ChevronLeftIcon from 'mdi-react/ChevronLeftIcon';
 import { useOverlayTriggerState } from '@react-stately/overlays';
-import MultiselectBadge from './MultiselectBadge';
+import CollapsiblePanelBadge from './CollapsiblePanelBadge';
 import { Icon, IconButton, Box } from '../../index';
 import { useStatusClasses } from '../../hooks';
 /**
- * The MultiselectListContainer serves as a wrapper around a list and its associated trigger,
+ * The CollapsiblePanelContainer serves as a wrapper around a list and its associated trigger,
  * linking the list's open state with the trigger's press state and providing necessary context.
  */
 
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var MultiselectListContainer = /*#__PURE__*/forwardRef(function (props, ref) {
+var CollapsiblePanelContainer = /*#__PURE__*/forwardRef(function (props, ref) {
   var selectedFilterCount = props.selectedFilterCount,
       className = props.className,
       children = props.children,
@@ -71,28 +71,28 @@ var MultiselectListContainer = /*#__PURE__*/forwardRef(function (props, ref) {
     className: classNames,
     onKeyUp: handleClose,
     ref: ref,
-    variant: "multiselectListContainer.multiselectListContainer",
+    variant: "collapsiblePanel.collapsiblePanelContainer",
     isRow: true
   }, others), ___EmotionJSX(IconButton, {
     isRow: true,
     "aria-label": state.isOpen ? closeAriaLabel : openAriaLabel,
-    "data-testid": "multiselect-list-button",
+    "data-testid": "collapsible-panel-button",
     onPress: handleButtonPress,
     ref: triggerRef,
-    variant: "multiselectToggle",
+    variant: "collapsiblePanelToggle",
     pr: "sm"
   }, ___EmotionJSX(Icon, {
     color: "active",
     icon: state.isOpen ? ChevronRightIcon : ChevronLeftIcon,
     role: "button",
     size: "30px"
-  }), !state.isOpen && selectedFilterCount && ___EmotionJSX(MultiselectBadge, {
-    "data-testid": "multiselect-list-badge",
+  }), !state.isOpen && selectedFilterCount && ___EmotionJSX(CollapsiblePanelBadge, {
+    "data-testid": "collapsible-panel-badge",
     margin: "auto",
     selectedFilterCount: selectedFilterCount
   })), state.isOpen && _objectSpread({}, children));
 });
-MultiselectListContainer.propTypes = {
+CollapsiblePanelContainer.propTypes = {
   /** Amount of selected items indicator. */
   selectedFilterCount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
@@ -116,9 +116,9 @@ MultiselectListContainer.propTypes = {
   /** Defines a string value that labels the trigger icon when menu is closed. */
   openAriaLabel: PropTypes.string
 };
-MultiselectListContainer.defaultProps = {
+CollapsiblePanelContainer.defaultProps = {
   openAriaLabel: 'Open filter menu?',
   closeAriaLabel: 'Close filter menu?'
 };
-MultiselectListContainer.displayName = 'MultiselectListContainer';
-export default MultiselectListContainer;
+CollapsiblePanelContainer.displayName = 'CollapsiblePanelContainer';
+export default CollapsiblePanelContainer;

package/lib/components/{MultiselectListContainer/MultiselectListContainer.test.js → CollapsiblePanelContainer/CollapsiblePanelContainer.test.js}

@@ -3,20 +3,20 @@ import React from 'react';
 import userEvent from '@testing-library/user-event';
 import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
-import MultiselectListContainer from './MultiselectListContainer';
+import CollapsiblePanelContainer from './CollapsiblePanelContainer';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var testId = 'test-multiselectListContainer';
-var multiselectListBadgeId = 'multiselect-list-badge';
-var multiselectListButtonId = 'multiselect-list-button';
-var multiselectFilterId = 'multiselect-filter';
+var testId = 'test-collapsiblePanelContainer';
+var collapsiblePanelBadgeId = 'collapsible-panel-badge';
+var collapsiblePanelButtonId = 'collapsible-panel-button';
+var collapsiblePanelId = 'collapsible-panel';
 var defaultProps = {
   'data-testid': testId
 };
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return render(___EmotionJSX(MultiselectListContainer, _extends({}, defaultProps, props), ___EmotionJSX("div", {
-    "data-testid": multiselectFilterId
+  return render(___EmotionJSX(CollapsiblePanelContainer, _extends({}, defaultProps, props), ___EmotionJSX("div", {
+    "data-testid": collapsiblePanelId
   })));
 };
 
@@ -25,17 +25,17 @@ afterEach(function () {
 }); // Need to be added to each test file to test accessibility using axe.
 
 axeTest(getComponent);
-test('default MultiselectListContainer', function () {
+test('default CollapsiblePanelContainer', function () {
   getComponent();
-  var multiselectListContainer = screen.getByTestId(testId);
-  expect(multiselectListContainer).toBeInTheDocument();
+  var collapsiblePanelContainer = screen.getByTestId(testId);
+  expect(collapsiblePanelContainer).toBeInTheDocument();
 });
 test('custom classname can be passed', function () {
   getComponent({
     className: 'testing-class'
   });
-  var multiselectListContainer = screen.getByTestId(testId);
-  expect(multiselectListContainer).toHaveClass('testing-class');
+  var collapsiblePanelContainer = screen.getByTestId(testId);
+  expect(collapsiblePanelContainer).toHaveClass('testing-class');
 });
 test('shows badge when container is closed', function () {
   getComponent({
@@ -44,7 +44,7 @@ test('shows badge when container is closed', function () {
       isOpen: false
     }
   });
-  var badge = screen.getByTestId(multiselectListBadgeId);
+  var badge = screen.getByTestId(collapsiblePanelBadgeId);
   expect(badge).toBeInTheDocument();
 });
 test('updates aria label when button is clicked', function () {
@@ -54,28 +54,28 @@ test('updates aria label when button is clicked', function () {
   getComponent({
     state: state
   });
-  var button = screen.getByTestId(multiselectListButtonId);
+  var button = screen.getByTestId(collapsiblePanelButtonId);
   userEvent.click(button);
-  var multiSelect = screen.queryByTestId(multiselectFilterId);
+  var collapsiblePanel = screen.queryByTestId(collapsiblePanelId);
   expect(button).toHaveAttribute('aria-label', 'Close filter menu?');
-  expect(multiSelect).toBeInTheDocument();
+  expect(collapsiblePanel).toBeInTheDocument();
   userEvent.click(button);
   expect(button).toHaveAttribute('aria-label', 'Open filter menu?');
-  expect(multiSelect).not.toBeInTheDocument();
+  expect(collapsiblePanel).not.toBeInTheDocument();
 });
 test('shows children when isOpen is true', function () {
   getComponent({
     isOpen: true
   });
-  var multiselectFilter = screen.getByTestId(multiselectFilterId);
-  expect(multiselectFilter).toBeInTheDocument();
+  var collapsiblePanel = screen.getByTestId(collapsiblePanelId);
+  expect(collapsiblePanel).toBeInTheDocument();
 });
 test('should hide children when pressing the escape key', function () {
   getComponent();
-  var button = screen.getByTestId(multiselectListButtonId);
+  var button = screen.getByTestId(collapsiblePanelButtonId);
   userEvent.click(button);
-  var multiSelect = screen.queryByTestId(multiselectFilterId);
-  expect(multiSelect).toBeInTheDocument();
+  var collapsiblePanel = screen.queryByTestId(collapsiblePanelId);
+  expect(collapsiblePanel).toBeInTheDocument();
   userEvent.type(button, '{esc}');
-  expect(multiSelect).not.toBeInTheDocument();
+  expect(collapsiblePanel).not.toBeInTheDocument();
 });

package/lib/components/CollapsiblePanelContainer/index.js

@@ -0,0 +1 @@
+export { default } from './CollapsiblePanelContainer';

package/lib/components/{MultiselectFilterItem/MultiselectFilterItem.js → CollapsiblePanelItem/CollapsiblePanelItem.js}

@@ -2,25 +2,25 @@ import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { Box, Icon, IconButton, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var MultiselectFilterItem = /*#__PURE__*/forwardRef(function (props, ref) {
+var CollapsiblePanelItem = /*#__PURE__*/forwardRef(function (props, ref) {
   var text = props.text,
       icon = props.icon,
       isDefaultSelected = props.isDefaultSelected,
       onPress = props.onPress;
 
   var iconElement = icon && ___EmotionJSX(Icon, {
-    "data-testid": "multiselect-filter-data-icon",
+    "data-testid": "collapsible-panel-data-icon",
     icon: icon,
     color: isDefaultSelected ? 'neutral.10' : 'active',
     size: 13
   });
 
   return ___EmotionJSX(Box, {
-    "data-testid": "multiselect-filter-item",
+    "data-testid": "collapsible-panel-item",
     isRow: true,
     ref: ref
   }, ___EmotionJSX(Text, {
-    variant: "multiselectFilterItem"
+    variant: "collapsiblePanellItem"
   }, text), iconElement && (isDefaultSelected ? iconElement : ___EmotionJSX(IconButton, {
     sx: {
       width: 13,
@@ -33,7 +33,7 @@ var MultiselectFilterItem = /*#__PURE__*/forwardRef(function (props, ref) {
     onPress: onPress
   }, iconElement)));
 });
-MultiselectFilterItem.propTypes = {
+CollapsiblePanelItem.propTypes = {
   /**
      * Display text.
      */
@@ -55,5 +55,5 @@ MultiselectFilterItem.propTypes = {
    */
   onPress: PropTypes.func
 };
-MultiselectFilterItem.displayName = 'MultiselectFilterItem';
-export default MultiselectFilterItem;
+CollapsiblePanelItem.displayName = 'CollapsiblePanelItem';
+export default CollapsiblePanelItem;

package/lib/components/{MultiselectFilterItem/MultiselectFilterItem.test.js → CollapsiblePanelItem/CollapsiblePanelItem.test.js}

@@ -3,17 +3,17 @@ import React from 'react';
 import FilterIcon from 'mdi-react/FilterIcon';
 import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
-import MultiselectFilterItem from './MultiselectFilterItem';
+import CollapsiblePanelItem from './CollapsiblePanelItem';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var testId = 'multiselect-filter-item';
-var iconId = 'multiselect-filter-data-icon';
+var testId = 'collapsible-panel-item';
+var iconId = 'collapsible-panel-data-icon';
 var defaultProps = {
   text: 'Item name'
 };
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return render(___EmotionJSX(MultiselectFilterItem, _extends({}, defaultProps, props)));
+  return render(___EmotionJSX(CollapsiblePanelItem, _extends({}, defaultProps, props)));
 };
 
 afterEach(function () {
@@ -21,12 +21,12 @@ afterEach(function () {
 }); // Need to be added to each test file to test accessibility using axe.
 
 axeTest(getComponent);
-test('default multiselectFilter', function () {
+test('default collapsiblePanel', function () {
   getComponent();
-  var multiselectFilterItem = screen.getByTestId(testId);
+  var collapsiblePanelItem = screen.getByTestId(testId);
   var icon = screen.queryByTestId(iconId);
   expect(icon).not.toBeInTheDocument();
-  expect(multiselectFilterItem).toBeInTheDocument();
+  expect(collapsiblePanelItem).toBeInTheDocument();
 });
 test('icon button displays when icon prop is present', function () {
   getComponent({

package/lib/components/CollapsiblePanelItem/index.js

@@ -0,0 +1 @@
+export { default } from './CollapsiblePanelItem';

package/lib/components/MultivaluesField/MultivaluesField.js

@@ -67,6 +67,8 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       onOpenChange = props.onOpenChange,
       onSelectionChange = props.onSelectionChange,
       placeholder = props.placeholder,
+      _props$readOnlyKeys = props.readOnlyKeys,
+      readOnlyKeys = _props$readOnlyKeys === void 0 ? [] : _props$readOnlyKeys,
       selectedKeys = props.selectedKeys,
       scrollBoxProps = props.scrollBoxProps;
   var hasCustomValue = mode === 'non-restrictive';
@@ -115,7 +117,10 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
         return contains(item.textValue, filterString);
       });
     },
-    items: items,
+    items: _filterInstanceProperty(items).call(items, function (_ref) {
+      var key = _ref.key;
+      return !_includesInstanceProperty(readOnlyKeys).call(readOnlyKeys, key);
+    }),
     onSelectionChange: toggleItems,
     selectionMode: 'multiple'
   }));
@@ -262,10 +267,8 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     selectionManager.toggleSelection(key);
   };
 
-  var selectedItems = ___EmotionJSX(React.Fragment, null, _mapInstanceProperty(_context4 = _Array$from(selectionManager.selectedKeys)).call(_context4, function (key) {
-    var _context5, _context6;
-
-    var item = _findInstanceProperty(_context5 = _concatInstanceProperty(_context6 = []).call(_context6, initialItems, customItems)).call(_context5, function (el) {
+  var readOnlyItems = ___EmotionJSX(React.Fragment, null, _mapInstanceProperty(readOnlyKeys).call(readOnlyKeys, function (key) {
+    var item = _findInstanceProperty(initialItems).call(initialItems, function (el) {
       return el.key === key;
     });
 
@@ -273,25 +276,34 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       return ___EmotionJSX(Chip, {
         key: item.key,
         role: "presentation",
-        bg: "active",
-        color: "white",
         label: item.name,
-        sx: {
-          alignSelf: 'center',
-          cursor: 'default',
-          height: '100%',
-          m: 5,
-          mr: 10,
-          ml: 0,
-          py: 3,
-          pr: 0
-        },
+        variant: "boxes.readOnlyChip",
+        bg: "white",
         textProps: {
           sx: {
-            fontWeight: 500,
-            textTransform: 'none'
+            color: 'text.primary'
           }
         }
+      });
+    }
+
+    return null;
+  }));
+
+  var selectedItems = ___EmotionJSX(React.Fragment, null, _mapInstanceProperty(_context4 = _Array$from(selectionManager.selectedKeys)).call(_context4, function (key) {
+    var _context5, _context6;
+
+    var item = _findInstanceProperty(_context5 = _concatInstanceProperty(_context6 = []).call(_context6, initialItems, customItems)).call(_context5, function (el) {
+      return el.key === key;
+    });
+
+    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() {
@@ -360,7 +372,7 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       return _onKeyUp && _onKeyUp(e.nativeEvent);
     },
     slots: {
-      beforeInput: selectedItems
+      beforeInput: ___EmotionJSX(React.Fragment, null, readOnlyItems, " ", selectedItems)
     },
     value: filterString
   }, inputProps)), ___EmotionJSX(PopoverContainer, {
@@ -471,6 +483,11 @@ MultivaluesField.propTypes = {
   /** Temporary text that occupies the text input when it is empty. */
   placeholder: PropTypes.string,
 
+  /**
+   * The item keys that are readonly. These items cannot be changed or selected.
+   */
+  readOnlyKeys: PropTypes.arrayOf(PropTypes.string),
+
   /** The currently selected keys in the collection (controlled). */
   selectedKeys: isIterableProp,
   // /** Props object that is spread directly into the ScrollBox element. */

package/lib/components/MultivaluesField/MultivaluesField.stories.js

@@ -171,4 +171,15 @@ export var WithCustomSize = function WithCustomSize(args) {
       "data-id": item.name
     }, item.name);
   }))));
+};
+export var WithReadOnlyValues = function WithReadOnlyValues(args) {
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(MultivaluesField, _extends({
+    readOnlyKeys: ['Aardvark', 'Snake'],
+    items: items
+  }, args), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.key,
+      "data-id": item.name
+    }, item.name);
+  }));
 };

package/lib/components/MultivaluesField/MultivaluesField.test.js

@@ -342,4 +342,19 @@ test('should have no accessibility violations', /*#__PURE__*/_asyncToGenerator(
       }
     }
   }, _callee);
-})));
+})));
+test('read only keys', function () {
+  getComponent({
+    readOnlyKeys: [items[1].key, items[2].key]
+  });
+  var listbox = screen.queryByRole('listbox');
+  expect(listbox).not.toBeInTheDocument();
+  var firstChip = screen.getByText(items[1].name);
+  var deleteButton1 = firstChip.nextSibling;
+  expect(firstChip).toBeInTheDocument();
+  expect(deleteButton1).toBeNull();
+  var secondChip = screen.getByText(items[2].name);
+  expect(secondChip).toBeInTheDocument();
+  var deleteButton2 = firstChip.nextSibling;
+  expect(deleteButton2).toBeNull();
+});

package/lib/index.js

@@ -72,12 +72,12 @@ export { default as Messages } from './components/Messages';
 export * from './components/Messages';
 export { default as Modal } from './components/Modal';
 export * from './components/Modal';
-export { default as MultiselectFilter } from './components/MultiselectFilter';
-export * from './components/MultiselectFilter';
-export { default as MultiselectFilterItem } from './components/MultiselectFilterItem';
-export * from './components/MultiselectFilterItem';
-export { default as MultiselectListContainer } from './components/MultiselectListContainer';
-export * from './components/MultiselectListContainer';
+export { default as CollapsiblePanel } from './components/CollapsiblePanel';
+export * from './components/CollapsiblePanel';
+export { default as CollapsiblePanelItem } from './components/CollapsiblePanelItem';
+export * from './components/CollapsiblePanelItem';
+export { default as CollapsiblePanelContainer } from './components/CollapsiblePanelContainer';
+export * from './components/CollapsiblePanelContainer';
 export { default as NavBar } from './components/NavBar';
 export * from './components/NavBar';
 export { default as NavBarSection } from './components/NavBarSection';

package/lib/recipes/{MultiselectListContainer.stories.js → CollapsiblePanel.stories.js}

@@ -24,10 +24,10 @@ import CheckIcon from 'mdi-react/CheckIcon';
 import Clear from 'mdi-react/CloseIcon';
 import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
 import SearchIcon from 'mdi-react/SearchIcon';
-import { Breadcrumbs, Box, CheckboxField, Chip, Icon, IconButton, Item, ListView, MultiselectFilter, MultiselectFilterItem, SearchField, Text } from '..';
+import { Breadcrumbs, Box, CheckboxField, Chip, Icon, IconButton, Item, ListView, CollapsiblePanel, CollapsiblePanelItem, SearchField, Text } from '..';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Recipes/MultiselectListContainer'
+  title: 'Recipes/CollapsiblePanel with List'
 };
 var data = [{
   id: '1',
@@ -283,7 +283,7 @@ export var Default = function Default() {
         return el.key === item.key;
       })
     }));
-  })), ___EmotionJSX(MultiselectFilter, {
+  })), ___EmotionJSX(CollapsiblePanel, {
     items: selectedItems,
     selectedFilterCount: selectedItems.length.toString(),
     listTitle: "Selected Groups",
@@ -294,7 +294,7 @@ export var Default = function Default() {
       key: item.key,
       textValue: item.name,
       "data-id": item.key
-    }, ___EmotionJSX(MultiselectFilterItem, {
+    }, ___EmotionJSX(CollapsiblePanelItem, {
       text: item.name,
       icon: item.isDefaultSelected ? CheckIcon : Clear,
       isDefaultSelected: item.isDefaultSelected,

package/lib/styles/variants/boxes.js

@@ -113,6 +113,27 @@ export var chip = {
     }
   }
 };
+
+var multivaluesChip = _objectSpread(_objectSpread({}, chip), {}, {
+  alignSelf: 'center',
+  cursor: 'default',
+  height: '100%',
+  m: 5,
+  mr: 10,
+  ml: 0
+});
+
+var selectedItemChip = _objectSpread(_objectSpread({}, multivaluesChip), {}, {
+  py: 3,
+  pr: 0
+});
+
+var readOnlyChip = _objectSpread(_objectSpread({}, multivaluesChip), {}, {
+  p: 3,
+  border: '1px solid',
+  borderColor: 'neutral.80'
+});
+
 var inputInContainerSlot = {
   position: 'absolute',
   bg: 'transparent',
@@ -289,6 +310,8 @@ export default {
   base: base,
   card: card,
   chip: chip,
+  selectedItemChip: selectedItemChip,
+  readOnlyChip: readOnlyChip,
   copy: copy,
   datePicker: datePicker,
   environmentChip: environmentChip,

package/lib/styles/variants/buttons.js

@@ -126,7 +126,7 @@ var modalCloseButton = _objectSpread(_objectSpread({}, iconButton), {}, {
   right: 10
 });
 
-var multiselectToggle = _objectSpread(_objectSpread({}, square), {}, {
+var collapsiblePanelToggle = _objectSpread(_objectSpread({}, square), {}, {
   bg: 'accent.99',
   height: '40px',
   minWidth: 'max-content',
@@ -700,6 +700,6 @@ export default {
   tooltipInline: tooltipInline,
   colorBlock: colorBlock,
   menuTab: menuTab,
-  multiselectToggle: multiselectToggle,
+  collapsiblePanelToggle: collapsiblePanelToggle,
   neutralText: neutralText
 };

package/lib/styles/variants/{multiselectListContainer.js → collapsiblePanel.js}

@@ -1,10 +1,10 @@
-var multiselectListContainer = {
+var collapsiblePanelContainer = {
   overflowX: 'hidden',
   pr: 'sm',
   transition: 'right 500ms',
   minHeight: '80vh'
 };
-var multiselectListContent = {
+var collapsiblePanelContent = {
   bg: 'accent.99',
   fontSize: 'sm',
   height: '100%',
@@ -23,7 +23,7 @@ var multiselectListContent = {
     justifyContent: 'space-between'
   }
 };
-var multiselectListTitle = {
+var collapsiblePanelContainerTitle = {
   alignContent: 'center',
   bg: 'accent.99',
   display: 'flex',
@@ -35,7 +35,7 @@ var multiselectListTitle = {
   maxWidth: 'max-content !important',
   margin: '0'
 };
-var multiselectListBadge = {
+var collapsiblePanelBadge = {
   borderRadius: '5px',
   display: 'flex',
   height: '17px',
@@ -48,14 +48,14 @@ var multiselectListBadge = {
   alignItems: 'center',
   fontWeight: 500
 };
-var multiselectFilterItem = {
+var collapsiblePanellItem = {
   minHeight: '45px',
   margin: 'auto'
 };
 export default {
-  multiselectListContainer: multiselectListContainer,
-  multiselectListContent: multiselectListContent,
-  multiselectListTitle: multiselectListTitle,
-  multiselectListBadge: multiselectListBadge,
-  multiselectFilterItem: multiselectFilterItem
+  collapsiblePanelContainer: collapsiblePanelContainer,
+  collapsiblePanelContent: collapsiblePanelContent,
+  collapsiblePanelContainerTitle: collapsiblePanelContainerTitle,
+  collapsiblePanelBadge: collapsiblePanelBadge,
+  collapsiblePanellItem: collapsiblePanellItem
 };