@activecollab/components 1.0.146 → 1.0.149

package/dist/index.js

@@ -1,14 +1,14 @@
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('styled-components'), require('classnames'), require('resize-observer-polyfill'), require('react-focus-lock'), require('react-remove-scroll'), require('react-dom'), require('@popperjs/core'), require('react-transition-group'), require('moment'), require('react-day-picker/moment'), require('react-day-picker'), require('lodash.debounce'), require('react-custom-scrollbars')) :
   typeof define === 'function' && define.amd ? define(['exports', 'react', 'styled-components', 'classnames', 'resize-observer-polyfill', 'react-focus-lock', 'react-remove-scroll', 'react-dom', '@popperjs/core', 'react-transition-group', 'moment', 'react-day-picker/moment', 'react-day-picker', 'lodash.debounce', 'react-custom-scrollbars'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.components = {}, global.React, global.styled, global.classnames, global.ResizeObserver, global.FocusLock, global.reactRemoveScroll, global.ReactDOM, global.core, global.reactTransitionGroup, global.moment, global.MomentLocaleUtils, global.DayPicker, global.debounce, global.reactCustomScrollbars));
-})(this, (function (exports, React, styled, classnames, ResizeObserver, FocusLock, reactRemoveScroll, ReactDOM, core, reactTransitionGroup, moment, MomentLocaleUtils, DayPicker, debounce, reactCustomScrollbars) { 'use strict';
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.components = {}, global.React, global.styled, global.classNames, global.ResizeObserver, global.FocusLock, global.reactRemoveScroll, global.ReactDOM, global.core, global.reactTransitionGroup, global.moment, global.MomentLocaleUtils, global.DayPicker, global.debounce, global.reactCustomScrollbars));
+})(this, (function (exports, React, styled, classNames, ResizeObserver, FocusLock, reactRemoveScroll, ReactDOM, core, reactTransitionGroup, moment, MomentLocaleUtils, DayPicker, debounce, reactCustomScrollbars) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
   var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
   var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-  var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+  var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
   var ResizeObserver__default = /*#__PURE__*/_interopDefaultLegacy(ResizeObserver);
   var FocusLock__default = /*#__PURE__*/_interopDefaultLegacy(FocusLock);
   var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
@@ -332,7 +332,7 @@
 
     return /*#__PURE__*/React__default["default"].createElement(StyledButton$2, _extends({
       disabled: disabled,
-      className: classnames__default["default"]("c-btn", className, {
+      className: classNames__default["default"]("c-btn", className, {
         "c-btn--contained": variant === "primary" || variant === "contained",
         "c-btn--outlined": variant === "secondary" || variant === "outlined",
         "c-btn--text_colored": variant === "tertiary" || variant === "text colored",
@@ -392,7 +392,7 @@
       ref: ref,
       variant: "contained",
       disabled: disabled,
-      className: classnames__default["default"]("c-global-add-btn", className)
+      className: classNames__default["default"]("c-global-add-btn", className)
     }, rest), /*#__PURE__*/React__default["default"].createElement(AddCrossTinyIcon$1, null));
   });
   GlobalAddButton.displayName = "GlobalAddButton";
@@ -427,7 +427,7 @@
 
     return /*#__PURE__*/React__default["default"].createElement(StyledButtonGroup$1, _extends({
       ref: ref,
-      className: classnames__default["default"]("c-btn-group", className)
+      className: classNames__default["default"]("c-btn-group", className)
     }, rest), children);
   });
   ButtonGroup.displayName = "ButtonGroup";
@@ -613,7 +613,7 @@
         rest = _objectWithoutProperties(_ref, _excluded$$);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledOverlay, _extends({
-      className: classnames__default["default"]("c-overlay", className),
+      className: classNames__default["default"]("c-overlay", className),
       $disableBackgroundColor: disableBackgroundColor
     }, rest));
   };
@@ -720,7 +720,7 @@
       }, style),
       onKeyDown: handleKeyDown,
       tabIndex: 0,
-      className: classnames__default["default"]("c-window", className),
+      className: classNames__default["default"]("c-window", className),
       onClick: handleClick
     }), children))));
   });
@@ -757,7 +757,7 @@
 
     return /*#__PURE__*/React__default["default"].createElement(StyledBubble, _extends({}, rest, {
       ref: innerRef,
-      className: classnames__default["default"]("c-bubble", className),
+      className: classNames__default["default"]("c-bubble", className),
       style: style
     }), children);
   };
@@ -888,7 +888,7 @@
       className: popperClassName,
       tabIndex: -1
     }, /*#__PURE__*/React__default["default"].createElement(StyledMenu$1, {
-      className: classnames__default["default"]("c-simple-menu__paper", "c-simple-menu__".concat(mode), menuClassName, className),
+      className: classNames__default["default"]("c-simple-menu__paper", "c-simple-menu__".concat(mode), menuClassName, className),
       $mode: mode,
       onMouseDown: onMenuClick
     }, /*#__PURE__*/React__default["default"].createElement(MenuContextProvider, {
@@ -1100,7 +1100,7 @@
     var Component = as || "div";
     return /*#__PURE__*/React__default["default"].createElement(StyledTypography, _extends({
       as: Component,
-      className: classnames__default["default"]("typography", className),
+      className: classNames__default["default"]("typography", className),
       $italic: italic,
       $tabularNums: tabularNums,
       $letterSpacing: letterSpacing,
@@ -1128,7 +1128,7 @@
         props = _objectWithoutProperties(_ref, _excluded$X);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledMenuHeader, _extends({}, props, {
-      className: classnames__default["default"]("c-menu-header", className),
+      className: classNames__default["default"]("c-menu-header", className),
       ref: ref
     }), leftElement || /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
@@ -1158,7 +1158,7 @@
         props = _objectWithoutProperties(_ref, _excluded$W);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledMenuFooter, _extends({}, props, {
-      className: classnames__default["default"]("c-menu-footer", className),
+      className: classNames__default["default"]("c-menu-footer", className),
       ref: ref
     }), children);
   });
@@ -1216,7 +1216,7 @@
         props = _objectWithoutProperties(_ref, _excluded$U);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledListItem, _extends({}, props, {
-      className: classnames__default["default"]("c-list-item", className),
+      className: classNames__default["default"]("c-list-item", className),
       ref: ref
     }), children);
   });
@@ -1225,7 +1225,7 @@
   var ListSeparator = function ListSeparator(_ref) {
     var className = _ref.className;
     return /*#__PURE__*/React__default["default"].createElement(StyledListSeparator, {
-      className: classnames__default["default"]("c-list-separator", className)
+      className: classNames__default["default"]("c-list-separator", className)
     });
   };
   ListSeparator.displayName = "ListSeparator";
@@ -3984,7 +3984,7 @@
       return /*#__PURE__*/React__default["default"].createElement(TransitionComponent, _extends({}, transitionProps, {
         style: style
       }), /*#__PURE__*/React__default["default"].createElement(StyledTooltip, {
-        className: classnames__default["default"]("c-tooltip-ds", className),
+        className: classNames__default["default"]("c-tooltip-ds", className),
         $isLight: isLight
       }, title));
     })));
@@ -4059,7 +4059,7 @@
     return /*#__PURE__*/React__default["default"].createElement(StyledCounterButtonWrapper, {
       className: className
     }, /*#__PURE__*/React__default["default"].createElement(StyledCounterButton, _extends({
-      className: classnames__default["default"]("c-counter-button", {
+      className: classNames__default["default"]("c-counter-button", {
         "c-counter-button__selected": counter
       })
     }, args, {
@@ -4068,7 +4068,7 @@
       $active: counter > 0 || active,
       $selected: counter > 0
     }), icon && /*#__PURE__*/React__default["default"].cloneElement(icon, {
-      className: classnames__default["default"]("c-counter-button__icon")
+      className: classNames__default["default"]("c-counter-button__icon")
     }), label && /*#__PURE__*/React__default["default"].createElement(StyledCounterButtonLabel, {
       color: "secondary",
       weight: "medium",
@@ -5034,7 +5034,7 @@
       }), _ref2;
     }, [isDisabled]);
     return /*#__PURE__*/React__default["default"].createElement(StyledButtonGroup, {
-      className: classnames__default["default"]("c-date-stepper", className)
+      className: classNames__default["default"]("c-date-stepper", className)
     }, renderLeftRightButtons ? /*#__PURE__*/React__default["default"].createElement(Button, {
       type: "button",
       variant: "secondary",
@@ -5118,7 +5118,7 @@
       });
     }, [activeStep, progressive, steps]);
     return /*#__PURE__*/React__default["default"].createElement(StyledSteps, {
-      className: classnames__default["default"]("c-steps-wrapper", wrapperClassName),
+      className: classNames__default["default"]("c-steps-wrapper", wrapperClassName),
       ref: ref
     }, steps.map(function (step) {
       return /*#__PURE__*/React__default["default"].createElement(StyledStep, {
@@ -5294,7 +5294,7 @@
       className: "c-table__wrap"
     }, /*#__PURE__*/React__default["default"].createElement(StyledTable, {
       ref: innerRef,
-      className: classnames__default["default"]("c-table", className),
+      className: classNames__default["default"]("c-table", className),
       $striped: striped
     }, children));
   };
@@ -5303,7 +5303,7 @@
     var children = _ref2.children,
         className = _ref2.className;
     return /*#__PURE__*/React__default["default"].createElement(StyledTableHead, {
-      className: classnames__default["default"]("c-table__head", className)
+      className: classNames__default["default"]("c-table__head", className)
     }, children);
   };
   Thead.displayName = "Thead";
@@ -5311,7 +5311,7 @@
     var children = _ref3.children,
         className = _ref3.className;
     return /*#__PURE__*/React__default["default"].createElement(StyledTableBody, {
-      className: classnames__default["default"]("c-table__body", className)
+      className: classNames__default["default"]("c-table__body", className)
     }, children);
   };
   Tbody.displayName = "Tbody";
@@ -5519,7 +5519,7 @@
     var renderNoResults = React.useCallback(function () {
       return /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
         colSpan: header.length,
-        className: classnames__default["default"]({
+        className: classNames__default["default"]({
           "text-center": !noResultsCallback
         })
       }, noResultsCallback ? noResultsCallback() : "There is no data."));
@@ -5556,7 +5556,7 @@
       }, header.map(function (h, colIndex) {
         return /*#__PURE__*/React__default["default"].createElement("td", {
           key: colIndex,
-          className: classnames__default["default"]("c-table__cell c-data-table__item", {
+          className: classNames__default["default"]("c-table__cell c-data-table__item", {
             hovered: hovered === h.key
           }),
           "data-key": h.key,
@@ -5587,19 +5587,19 @@
               onClick: toggleCollapse,
               className: "c-table__body__icon c-table--toggle-collapsed"
             }, /*#__PURE__*/React__default["default"].createElement(CollapseExpandSingleIcon$1, {
-              className: classnames__default["default"]({
+              className: classNames__default["default"]({
                 "c-table__collapse_icon--expanded": !collapsed[key],
                 "c-table__collapse_icon--collapsed": collapsed[key]
               })
             })))), /*#__PURE__*/React__default["default"].createElement(Tbody, {
-              className: classnames__default["default"]("c-table__grouped__head", "head_".concat(i), {
+              className: classNames__default["default"]("c-table__grouped__head", "head_".concat(i), {
                 "c-table__grouped__head--expanded": isCollapsible && !collapsed[key],
                 "c-table__grouped__head--collapsed": isCollapsible && collapsed[key],
                 last: i === keys.length - 1,
                 first: i === 0
               })
             }, groupHead(data[key], keys[i] !== "null" ? keys[i].trim() : null)), /*#__PURE__*/React__default["default"].createElement(Tbody, {
-              className: classnames__default["default"]("c-table__group c-table_group_".concat(i), {
+              className: classNames__default["default"]("c-table__group c-table_group_".concat(i), {
                 hidden: collapsed[key]
               })
             }, data[key].map(function (row, index) {
@@ -5649,7 +5649,7 @@
     return /*#__PURE__*/React__default["default"].createElement(StyledDataTable, _extends({
       as: Table,
       innerRef: tableRef,
-      className: classnames__default["default"]("c-data-table", className, {
+      className: classNames__default["default"]("c-data-table", className, {
         "c-table__grouped": groupBy,
         "c-table__collapsible": isCollapsible,
         "padding-b-0": groupBy && collapsed[Object.keys(data).slice(-1)[0]]
@@ -5661,7 +5661,7 @@
     }, header.map(function (h, index) {
       return /*#__PURE__*/React__default["default"].createElement("th", {
         key: h.key,
-        className: classnames__default["default"]("c-table__cell", {
+        className: classNames__default["default"]("c-table__cell", {
           "c-table__cell--hovered": hovered === h.key,
           "c-table__head--hidden": groupBy && allGroupsCollapsed && h.hideCollapsed
         }),
@@ -5685,7 +5685,7 @@
       }), /*#__PURE__*/React__default["default"].createElement("div", {
         onClick: sortColumn,
         "data-index": index,
-        className: classnames__default["default"]("c-table__icon-wrapper", {
+        className: classNames__default["default"]("c-table__icon-wrapper", {
           "cursor-pointer": h.sortable === true
         })
       }, /*#__PURE__*/React__default["default"].createElement("span", {
@@ -5693,7 +5693,7 @@
       }, h.label), h.sortable && /*#__PURE__*/React__default["default"].createElement(SortIcon$1, {
         width: "10px",
         height: "10px",
-        className: classnames__default["default"]("c-table__icon", {
+        className: classNames__default["default"]("c-table__icon", {
           "c-table__icon--inactive": h.key !== active,
           "c-table__icon--active": h.key === active,
           "c-table__icon--asc": columnDirection === exports.SortDirection.Asc && h.key === active,
@@ -5759,7 +5759,7 @@
         checkMarkClassName = _ref.checkMarkClassName;
     return /*#__PURE__*/React__default["default"].createElement(StyledCompleteCheckbox, {
       onClick: onClick,
-      className: classnames__default["default"]("c-complete-checkbox", className),
+      className: classNames__default["default"]("c-complete-checkbox", className),
       $primary: primary,
       $completed: completed,
       $disabled: disabled,
@@ -5803,7 +5803,7 @@
         rest = _objectWithoutProperties(_ref, _excluded$N);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledPaper, _extends({
-      className: classnames__default["default"](className, {
+      className: classNames__default["default"](className, {
         "ac-shadow--raised--lg": !useOptimizedShadow && hover && type === "paper-1",
         "ac-shadow-optimized--lg": useOptimizedShadow && hover && type === "paper-1",
         "ac-shadow--lg": !hover && type === "paper-1",
@@ -5838,7 +5838,7 @@
     var width = _ref.width,
         className = _ref.className;
     return /*#__PURE__*/React__default["default"].createElement(StyledScaleBar, {
-      className: classnames__default["default"]("c-scale-bar", className)
+      className: classNames__default["default"]("c-scale-bar", className)
     }, /*#__PURE__*/React__default["default"].createElement(StyledScaleBarInner, {
       className: "c-scale-bar__progress",
       $width: width
@@ -5866,7 +5866,7 @@
 
     return /*#__PURE__*/React__default["default"].createElement(StyledCard, _extends({}, rest, {
       type: paperType,
-      className: classnames__default["default"]("c-card", className),
+      className: classNames__default["default"]("c-card", className),
       hover: hoverable,
       useOptimizedShadow: true,
       ref: ref
@@ -5934,7 +5934,7 @@
     return /*#__PURE__*/React__default["default"].createElement(StyledEntityCard, {
       ref: ref,
       hoverable: true,
-      className: classnames__default["default"]("entity-card-wrapper", {
+      className: classNames__default["default"]("entity-card-wrapper", {
         "grid-item": renderAs === "grid-item",
         "list-item": renderAs === "list-item"
       }, className),
@@ -6122,7 +6122,7 @@
     }, [value]);
     var renderSignifier = React.useMemo(function () {
       return /*#__PURE__*/React__default["default"].createElement(StyledSignifier, {
-        className: classnames__default["default"]("c-signifier", className),
+        className: classNames__default["default"]("c-signifier", className),
         $direction: direction
       }, /*#__PURE__*/React__default["default"].createElement(StyledIcon, {
         as: Component
@@ -6193,7 +6193,7 @@
         rest = _objectWithoutProperties(_ref, _excluded$D);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDot, _extends({
-      className: classnames__default["default"]("c-dot", className),
+      className: classNames__default["default"]("c-dot", className),
       ref: ref,
       $color: color,
       $size: size
@@ -6240,7 +6240,7 @@
         rest = _objectWithoutProperties(_ref, _excluded$C);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledTag, _extends({
-      className: classnames__default["default"]("c-tag", className),
+      className: classNames__default["default"]("c-tag", className),
       ref: ref
     }, rest), showDot ? /*#__PURE__*/React__default["default"].createElement(StyledTagDot, {
       $showText: showText,
@@ -6264,7 +6264,7 @@
 
     return /*#__PURE__*/React__default["default"].createElement(StyledLinearLoader, _extends({
       ref: ref,
-      className: classnames__default["default"]("c-loader c-loader--linear", className)
+      className: classNames__default["default"]("c-loader c-loader--linear", className)
     }, rest));
   });
   LinearLoader.displayName = "LinearLoader";
@@ -6282,7 +6282,7 @@
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDotsLoader, _extends({
       ref: ref,
-      className: classnames__default["default"]("c-loader c-loader--dots", className)
+      className: classNames__default["default"]("c-loader c-loader--dots", className)
     }, rest), /*#__PURE__*/React__default["default"].createElement("span", null), /*#__PURE__*/React__default["default"].createElement("span", null), /*#__PURE__*/React__default["default"].createElement("span", null));
   });
   DotsLoader.displayName = "DotsLoader";
@@ -6291,7 +6291,7 @@
   var StyledSpinnerLoader = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledSpinnerLoader",
     componentId: "sc-1ht53g9-0"
-  })(["", " border-radius:100%;", " ", " ", " ", ""], BoxSizingStyle, function (props) {
+  })(["", " border-radius:100%;flex-shrink:0;", " ", " ", " ", ""], BoxSizingStyle, function (props) {
     return styled.css(["width:", "px;height:", "px;animation:", " ", "s infinite linear;"], props.$diameter, props.$diameter, rotateAnimation, props.$rotateDurationInSeconds);
   }, function (props) {
     return props.$activeColorPercentage === "25%" && styled.css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$activeStrokeColor);
@@ -6421,7 +6421,7 @@
       ref: hover ? ref : null,
       title: name,
       onMouseEnter: handleOnMouseEnter,
-      className: classnames__default["default"]("c-option", className),
+      className: classNames__default["default"]("c-option", className),
       hover: hover,
       onClick: onClick
     }, renderOption ? renderOption : name);
@@ -6459,7 +6459,7 @@
         rest = _objectWithoutProperties(_ref, _excluded$y);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledCheckbox$1, {
-      className: classnames__default["default"]("c-checkbox", {
+      className: classNames__default["default"]("c-checkbox", {
         "c-checkbox__hover": hover,
         "c-checkbox__controlled": typeof hover === "boolean"
       }, className),
@@ -6479,21 +6479,25 @@
   });
   Checkbox.displayName = "Checkbox";
 
+  var StyledOptionGroupLi = styled__default["default"].li.withConfig({
+    displayName: "Styles__StyledOptionGroupLi",
+    componentId: "sc-16v5afu-0"
+  })(["flex-direction:column;"]);
   var StyledOptionGroup = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledOptionGroup",
-    componentId: "sc-16v5afu-0"
+    componentId: "sc-16v5afu-1"
   })(["", " ", " ", ""], {
     "userSelect": "none"
   }, FontStyle, BoxSizingStyle);
   StyledOptionGroup.displayName = "StyledOptionGroup";
   var StyledOptionGroupHeader = styled__default["default"].h3.withConfig({
     displayName: "Styles__StyledOptionGroupHeader",
-    componentId: "sc-16v5afu-1"
+    componentId: "sc-16v5afu-2"
   })(["height:28px;display:flex;justify-content:space-between;align-items:center;padding:0 16px;color:var(--color-theme-900);margin:6px 0;*{margin:auto 0;}"]);
   StyledOptionGroupHeader.displayName = "StyledOptionGroupHeader";
   var StyledOptionGroupOption = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledOptionGroupOption",
-    componentId: "sc-16v5afu-2"
+    componentId: "sc-16v5afu-3"
   })(["", ""], function (props) {
     return props.hover && styled.css(["background-color:var(--color-theme-200);"]);
   });
@@ -6555,9 +6559,9 @@
         }
       }
     }, [allOptionValues, checked, isAllOptionsChecked, onChange]);
-    return /*#__PURE__*/React__default["default"].createElement("li", {
+    return /*#__PURE__*/React__default["default"].createElement(StyledOptionGroupLi, {
       key: id,
-      className: classnames__default["default"]("c-option-group tw-flex-col", optionGroupClassName)
+      className: classNames__default["default"]("c-option-group", optionGroupClassName)
     }, /*#__PURE__*/React__default["default"].createElement(StyledOptionGroup, {
       key: id
     }, /*#__PURE__*/React__default["default"].createElement(StyledOptionGroupOption, {
@@ -6719,7 +6723,7 @@
     }, [invertHorizontal, invertVertical, disableVertical, disableHorizontal]);
     return /*#__PURE__*/React__default["default"].createElement(StyledScrollShadow, _extends({}, rest, {
       ref: ref,
-      className: classnames__default["default"]("c-scroll-shadow", className)
+      className: classNames__default["default"]("c-scroll-shadow", className)
     }), children({
       onScroll: handleScroll
     }), !disableVertical ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledScrollShadowTop, {
@@ -6801,7 +6805,7 @@
 
     var props = _objectSpread2(_objectSpread2({}, rest), {}, {
       ref: handleRef,
-      className: classnames__default["default"]("c-scroll-element", className),
+      className: classNames__default["default"]("c-scroll-element", className),
       style: _objectSpread2({
         overflow: "auto"
       }, style)
@@ -6844,6 +6848,9 @@
   });
   StyledAutocompleteNewItem.displayName = "StyledAutocompleteNewItem";
 
+  function isOptionGroup(item) {
+    return item.options !== undefined;
+  }
   var Autocomplete = function Autocomplete(_ref) {
     var type = _ref.type,
         _ref$options = _ref.options,
@@ -6940,14 +6947,9 @@
         by: "mouse"
       });
     }, []);
-
-    function isGroup(item) {
-      return item.options !== undefined;
-    }
-
     var showAddNew = React.useMemo(function () {
       return !!(emptyValue && filter.trim() && options.every(function (option) {
-        if (isGroup(option)) {
+        if (isOptionGroup(option)) {
           return option.options.every(function (v) {
             return v.name.toLowerCase() !== filter.trim().toLowerCase();
           });
@@ -6967,7 +6969,7 @@
     }, [emptyValue, handleEmpty, hover, onAddNewMouseEnter]);
     var filterOptions = React.useCallback(function (options, filter) {
       var trimmedFilter = filter.trim();
-      var isGrouped = options[0] && isGroup(options[0]);
+      var isGrouped = options[0] && isOptionGroup(options[0]);
 
       if (isGrouped) {
         var hovered = false;
@@ -7022,7 +7024,7 @@
     }, [defaultValue, filter]);
     var flatOptions = React.useMemo(function () {
       var options = list.reduce(function (acc, option) {
-        if (!isGroup(option)) {
+        if (!isOptionGroup(option)) {
           return [].concat(_toConsumableArray(acc), [option]);
         }
 
@@ -7091,7 +7093,7 @@
       toggleSelected(hover.item);
     }, [toggleSelected, hover]);
     var handleRenderOption = React.useCallback(function (item, index) {
-      if (isGroup(item)) {
+      if (isOptionGroup(item)) {
         return /*#__PURE__*/React__default["default"].createElement(OptionGroup, {
           checked: selectedOptions,
           name: item.name,
@@ -7276,7 +7278,7 @@
   var StyledInput = styled__default["default"].input.withConfig({
     displayName: "Styles__StyledInput",
     componentId: "sc-ce8kcp-1"
-  })(["", " ", " ", " ", " ", " ", " padding:0px;margin:0 4px;background-color:var(--input-background-color);border:none;outline:none;&::placeholder{", "}", " ", ""], {
+  })(["", " ", " ", " ", " ", " ", " padding:0px;margin:0 4px;background-color:var(--input-background-color);border:none;outline:none;&::placeholder{", "}", " ", " ", ""], {
     "fontSize": "0.875rem"
   }, {
     "color": "var(--color-theme-900)"
@@ -7298,6 +7300,8 @@
     return props.disabled && styled.css(["", ""], {
       "cursor": "not-allowed"
     });
+  }, function (props) {
+    return props.$loading && styled.css(["cursor:progress;"]);
   });
   StyledInput.displayName = "StyledInput";
 
@@ -7331,7 +7335,7 @@
       $invalid: invalid,
       $disabled: disabled,
       style: style,
-      className: classnames__default["default"]("c-input-wrapper", className),
+      className: classNames__default["default"]("c-input-wrapper", className),
       onClick: handleWrapperClick,
       ref: wrapRef
     }, startAdornment, /*#__PURE__*/React__default["default"].createElement(StyledInput, _extends({
@@ -7380,7 +7384,7 @@
         props = _objectWithoutProperties(_ref, _excluded$u);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledRadioButton$1, {
-      className: classnames__default["default"]("c-radio-btn", {
+      className: classNames__default["default"]("c-radio-btn", {
         "c-radio-btn__hover": hover,
         "c-radio-btn__controlled": typeof hover === "boolean"
       }, className),
@@ -7521,10 +7525,6 @@
         open = _useState4[0],
         setOpen = _useState4[1];
 
-    function isGroup(item) {
-      return item.options !== undefined;
-    }
-
     var selectedOptions = React.useMemo(function () {
       return selected instanceof Array ? selected : [selected];
     }, [selected]);
@@ -7537,7 +7537,7 @@
     }, [options]);
     var allOptionValues = React.useMemo(function () {
       return selectOptions.reduce(function (acc, option) {
-        if (!isGroup(option)) {
+        if (!isOptionGroup(option)) {
           return [].concat(_toConsumableArray(acc), [option.id]);
         }
 
@@ -7579,7 +7579,7 @@
     var props = React.useMemo(function () {
       if (target) {
         return {
-          menuClassName: classnames__default["default"]("c-select", selectClassName),
+          menuClassName: classNames__default["default"]("c-select", selectClassName),
           onClose: onClose,
           onOpen: onOpen,
           target: target,
@@ -7590,7 +7590,7 @@
       }
 
       return {
-        className: classnames__default["default"]("c-select", selectClassName)
+        className: classNames__default["default"]("c-select", selectClassName)
       };
     }, [target, selectClassName, onClose, onOpen, mode, open, position]);
     var handleEmptyAction = React.useCallback(function (value) {
@@ -7779,7 +7779,7 @@
         rest = _objectWithoutProperties(_ref, _excluded$s);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledNavListItem, _extends({
-      className: classnames__default["default"]("c-nav__item", {
+      className: classNames__default["default"]("c-nav__item", {
         "c-nav__item--active": active
       }, className),
       ref: ref
@@ -8077,7 +8077,7 @@
       return setMoreOpened(false);
     }, []);
     return /*#__PURE__*/React__default["default"].createElement(StyledNav, {
-      className: classnames__default["default"]("c-nav", className),
+      className: classNames__default["default"]("c-nav", className),
       $align: alignment,
       $role: role
     }, /*#__PURE__*/React__default["default"].createElement(StyledNavList, {
@@ -8234,7 +8234,7 @@
       }
     }, [onChange]);
     return /*#__PURE__*/React__default["default"].createElement(StyledMenuSelector, {
-      className: classnames__default["default"]("c-menu-selector", className)
+      className: classNames__default["default"]("c-menu-selector", className)
     }, /*#__PURE__*/React__default["default"].createElement(StyledMenuSelectorInner, null, typeof onBack === "function" ? /*#__PURE__*/React__default["default"].createElement(StyledMenuSelectorBack, {
       onClick: onBack,
       width: "16px",
@@ -8387,7 +8387,7 @@
       $invalid: invalid,
       ref: ref,
       disabled: disabled,
-      className: classnames__default["default"]("c-textarea", {
+      className: classNames__default["default"]("c-textarea", {
         "c-textarea__disabled": disabled
       }, className)
     }));
@@ -8651,7 +8651,7 @@
       onClick: handleBackgroundClick,
       disableBackgroundColor: disableBackgroundColor
     }) : null, /*#__PURE__*/React__default["default"].createElement(StyledSheetWrapper, {
-      className: classnames__default["default"]("c-sheet__wrapper", bodyClassName),
+      className: classNames__default["default"]("c-sheet__wrapper", bodyClassName),
       style: bodyStyle,
       $position: position,
       $mode: mode
@@ -8712,7 +8712,7 @@
 
     return /*#__PURE__*/React__default["default"].createElement(StyledHeader, _extends({
       type: "paper-2",
-      className: classnames__default["default"]("c-header", className),
+      className: classNames__default["default"]("c-header", className),
       size: size,
       ref: ref
     }, rest), children);
@@ -8795,7 +8795,7 @@
       onKeyDown: handleTextAreaKeyDown,
       onFocus: handleFocus,
       rows: rows,
-      className: classnames__default["default"]("c-autoresizetextarea", className),
+      className: classNames__default["default"]("c-autoresizetextarea", className),
       style: {
         minHeight: "".concat(lineHeight, "px"),
         lineHeight: "".concat(lineHeight, "px")
@@ -8893,7 +8893,7 @@
         customToggleIcon: customToggleIcon
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledAccordion, {
-      className: classnames__default["default"]("accordion", className)
+      className: classNames__default["default"]("accordion", className)
     }, children));
   };
   Accordion.displayName = "Accordion";
@@ -8918,7 +8918,7 @@
         id: itemId
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledAccordionItem, {
-      className: classnames__default["default"]("accordionItem", className)
+      className: classNames__default["default"]("accordionItem", className)
     }, children));
   };
   AccordionItem.displayName = "AccordionItem";
@@ -8957,7 +8957,7 @@
     }, [customToggleIcon]);
     return /*#__PURE__*/React__default["default"].createElement(StyledAccordionItemHead, {
       onClick: onClickCallback,
-      className: classnames__default["default"]("accordionItemHead", className)
+      className: classNames__default["default"]("accordionItemHead", className)
     }, /*#__PURE__*/React__default["default"].createElement(StyledAccordionItemHeadText, {
       className: "accordionItemHead__text"
     }, children), /*#__PURE__*/React__default["default"].createElement(StyledAccordionItemHeadIcon, {
@@ -8997,7 +8997,7 @@
     }, function (state) {
       return /*#__PURE__*/React__default["default"].createElement(StyledAccordionItemBody, {
         ref: divRef,
-        className: classnames__default["default"]("accordionItemBody", className),
+        className: classNames__default["default"]("accordionItemBody", className),
         style: _objectSpread2(_objectSpread2({}, defaultStyle), transitionStyles[state])
       }, children);
     });
@@ -9048,7 +9048,7 @@
 
     return /*#__PURE__*/React__default["default"].createElement(StyledChoose, _extends({
       disabled: disabled,
-      className: classnames__default["default"]("c-choose", className),
+      className: classNames__default["default"]("c-choose", className),
       active: active
     }, args), children);
   };
@@ -9148,7 +9148,7 @@
         args = _objectWithoutProperties(_ref, _excluded$i);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledBackLink, _extends({
-      className: classnames__default["default"]("c-back-link", className)
+      className: classNames__default["default"]("c-back-link", className)
     }, args), children);
   };
   BackLink.displayName = "BackLink";
@@ -9170,7 +9170,7 @@
 
     return /*#__PURE__*/React__default["default"].createElement(StyledLink, _extends({
       disabled: disabled,
-      className: classnames__default["default"]("c-link", className, {
+      className: classNames__default["default"]("c-link", className, {
         "c-link--contained": variant === "primary" || variant === "contained",
         "c-link--outlined": variant === "secondary" || variant === "outlined",
         "c-link--text_colored": variant === "tertiary" || variant === "text colored",
@@ -9306,7 +9306,7 @@
     }, /*#__PURE__*/React__default["default"].createElement(SlideFromTop, {
       in: open
     }, /*#__PURE__*/React__default["default"].createElement(StyledDialog, {
-      className: classnames__default["default"]("c-dialog", className)
+      className: classNames__default["default"]("c-dialog", className)
     }, children)));
   });
   Dialog.displayName = "Dialog";
@@ -9318,7 +9318,7 @@
         rest = _objectWithoutProperties(_ref, _excluded$g);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDialogContent, _extends({
-      className: classnames__default["default"]("c-dialog-content", className)
+      className: classNames__default["default"]("c-dialog-content", className)
     }, rest), children);
   };
   DialogContent.displayName = "DialogContent";
@@ -9326,7 +9326,7 @@
   var DialogContentDivider = function DialogContentDivider(_ref) {
     var className = _ref.className;
     return /*#__PURE__*/React__default["default"].createElement(StyledDialogContentDivider, {
-      className: classnames__default["default"]("c-dialog-content-divider", className)
+      className: classNames__default["default"]("c-dialog-content-divider", className)
     });
   };
   DialogContentDivider.displayName = "DialogContentDivider";
@@ -9340,7 +9340,7 @@
         rest = _objectWithoutProperties(_ref, _excluded$f);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDialogTitle, _extends({
-      className: classnames__default["default"]("c-dialog-title-wrapper", className)
+      className: classNames__default["default"]("c-dialog-title-wrapper", className)
     }, rest), disableDefaultHeading ? children : /*#__PURE__*/React__default["default"].createElement(Header3, null, children));
   };
   DialogTitle.displayName = "DialogTitle";
@@ -9352,7 +9352,7 @@
         rest = _objectWithoutProperties(_ref, _excluded$e);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDialogActions, _extends({
-      className: classnames__default["default"]("c-dialog-actions", className)
+      className: classNames__default["default"]("c-dialog-actions", className)
     }, rest), children);
   };
   DialogActions.displayName = "DialogActions";
@@ -9377,7 +9377,7 @@
       ref: ref,
       open: open,
       onClose: onCancel,
-      className: classnames__default["default"]("c-confirm-dialog", className)
+      className: classNames__default["default"]("c-confirm-dialog", className)
     }, /*#__PURE__*/React__default["default"].createElement(DialogTitle, null, dialogTitle), /*#__PURE__*/React__default["default"].createElement(DialogContentDivider, null), /*#__PURE__*/React__default["default"].createElement(DialogContent, null, /*#__PURE__*/React__default["default"].createElement(Body2, {
       lineHeight: "loose",
       color: "secondary",
@@ -9574,7 +9574,7 @@
     return /*#__PURE__*/React__default["default"].createElement(StyledPressed, _extends({
       active: active,
       ref: ref,
-      className: classnames__default["default"]({
+      className: classNames__default["default"]({
         "c-pressed__active": active
       }, className)
     }, args), children);
@@ -9607,7 +9607,7 @@
       type: "button"
     }, /*#__PURE__*/React__default["default"].createElement(StyledIconComponent, {
       as: IconComponent,
-      className: classnames__default["default"]("date-picker-target", targetIconClassName)
+      className: classNames__default["default"]("date-picker-target", targetIconClassName)
     })));
   });
   SelectDateTarget.displayName = "SelectDateTarget";
@@ -9992,7 +9992,7 @@
 
       return /*#__PURE__*/React__default["default"].createElement(StyledSelectDateButton, {
         type: "button",
-        className: classnames__default["default"]("date-picker-target", targetClassName)
+        className: classNames__default["default"]("date-picker-target", targetClassName)
       }, /*#__PURE__*/React__default["default"].createElement("span", {
         className: targetTextClassName
       }, labelText));
@@ -10518,7 +10518,7 @@
         args = _objectWithoutProperties(_ref, _excluded$4);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledToggle, {
-      className: classnames__default["default"]("c-toggle", className),
+      className: classNames__default["default"]("c-toggle", className),
       $isHovered: hovered,
       tabIndex: 0
     }, /*#__PURE__*/React__default["default"].createElement(StyledToggleCheckbox, _extends({
@@ -10531,9 +10531,7 @@
   var StyledComboBoxInput = styled__default["default"](Input).withConfig({
     displayName: "Styles__StyledComboBoxInput",
     componentId: "sc-5qvkpb-0"
-  })(["overflow:hidden;text-overflow:ellipsis;width:100%;", ""], function (props) {
-    return props.$loading && styled.css(["cursor:progress;"]);
-  });
+  })(["overflow:hidden;text-overflow:ellipsis;width:100%;"]);
   StyledComboBoxInput.displayName = "StyledComboBoxInput";
   var StyledIconDefaults = styled.css(["flex-shrink:0;cursor:pointer;"]);
   var StyledComboBoxCollapseExpandSingleIcon = styled__default["default"](CollapseExpandSingleIcon$1).withConfig({
@@ -10546,7 +10544,7 @@
   var StyledComboBoxCloseSmallIcon = styled__default["default"](CloseSmallIcon$1).withConfig({
     displayName: "Styles__StyledComboBoxCloseSmallIcon",
     componentId: "sc-5qvkpb-2"
-  })(["", " opacity:0;transition-property:all;transition-duration:0.2s;transition-delay:0.5s;", ":hover &{opacity:1;transition-delay:0s;}"], StyledIconDefaults, StyledComboBoxInput);
+  })(["", " opacity:0;transition-property:all;transition-duration:0.2s;transition-delay:0.5s;", ":hover,", ":hover &{opacity:1;transition-delay:0s;}"], StyledIconDefaults, StyledComboBoxInput, StyledInputWrapper);
   StyledComboBoxCloseSmallIcon.displayName = "StyledComboBoxCloseSmallIcon";
   var StyledComboBoxList = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledComboBoxList",
@@ -10556,7 +10554,149 @@
   });
   StyledComboBoxList.displayName = "StyledComboBoxList";
 
-  var _excluded$3 = ["options", "selected", "loading", "loadingText", "onChange", "placeholder", "handleEmptyAction", "disabled", "size", "invalid"];
+  var ChipContainer = styled__default["default"].div.withConfig({
+    displayName: "Styles__ChipContainer",
+    componentId: "sc-7s0bd1-0"
+  })(["min-width:44px;max-width:220px;", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], {
+    "height": "1.5rem"
+  }, {
+    "borderRadius": "0.25rem"
+  }, {
+    "display": "flex"
+  }, {
+    "alignItems": "center"
+  }, {
+    "paddingLeft": "0.375rem"
+  }, {
+    "overflow": "hidden"
+  }, FontStyle, BoxSizingStyle, {
+    "fontSize": "0.875rem"
+  }, {
+    "color": "var(--color-theme-900)"
+  }, {
+    "lineHeight": "1.375"
+  }, {
+    "letterSpacing": "0.02em"
+  }, {
+    "fontWeight": "400"
+  }, {
+    "backgroundColor": "var(--color-theme-400)"
+  }, function (props) {
+    return props.$showClose ? null : styled.css(["", ""], {
+      "paddingRight": "0.375rem"
+    });
+  }, function (props) {
+    return props.$size === "regular" && styled.css(["height:24px;"]);
+  }, function (props) {
+    return props.$size === "small" && styled.css(["height:18px;"]);
+  }, function (props) {
+    return props.$size === "big" && styled.css(["height:30px;"]);
+  });
+  ChipContainer.displayName = "ChipContainer";
+  var ChipLabel = styled__default["default"].span.withConfig({
+    displayName: "Styles__ChipLabel",
+    componentId: "sc-7s0bd1-1"
+  })(["", " ", ""], {
+    "width": "100%"
+  }, {
+    "overflow": "hidden",
+    "textOverflow": "ellipsis",
+    "whiteSpace": "nowrap"
+  });
+  ChipLabel.displayName = "ChipLabel";
+  var ChipTrigger = styled__default["default"](Trigger).withConfig({
+    displayName: "Styles__ChipTrigger",
+    componentId: "sc-7s0bd1-2"
+  })(["", " ", " ", " &:hover{", "}", " ", " ", ""], {
+    "display": "flex"
+  }, {
+    "alignItems": "center"
+  }, {
+    "justifyContent": "center"
+  }, {
+    "backgroundColor": "var(--color-theme-transparent-400)"
+  }, function (props) {
+    return props.$size === "regular" && styled.css(["height:24px;width:24px;"]);
+  }, function (props) {
+    return props.$size === "small" && styled.css(["height:18px;width:18px;"]);
+  }, function (props) {
+    return props.$size === "big" && styled.css(["height:30px;width:30px;"]);
+  });
+  ChipTrigger.displayName = "ChipTrigger";
+  var ChipCloseIcon = styled__default["default"](CloseSmallIcon$1).withConfig({
+    displayName: "Styles__ChipCloseIcon",
+    componentId: "sc-7s0bd1-3"
+  })(["", ""], {
+    "color": "var(--color-theme-700)"
+  });
+  ChipCloseIcon.displayName = "ChipCloseIcon";
+
+  var _excluded$3 = ["leftAdornment", "label", "onClose", "size"];
+  var Chip = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+    var leftAdornment = _ref.leftAdornment,
+        label = _ref.label,
+        onClose = _ref.onClose,
+        _ref$size = _ref.size,
+        size = _ref$size === void 0 ? "regular" : _ref$size,
+        rest = _objectWithoutProperties(_ref, _excluded$3);
+
+    var showClose = typeof onClose === "function";
+    var variant = React.useMemo(function () {
+      switch (size) {
+        case "regular":
+          return "Body 2";
+
+        case "big":
+          return "Body 1";
+
+        default:
+          return "Caption 1";
+      }
+    }, [size]);
+    return /*#__PURE__*/React__default["default"].createElement(ChipContainer, _extends({}, rest, {
+      ref: ref,
+      $size: size,
+      $showClose: showClose
+    }), leftAdornment, /*#__PURE__*/React__default["default"].createElement(Typography, {
+      variant: variant,
+      className: "tw-flex-1 tw-truncate"
+    }, label), showClose ? /*#__PURE__*/React__default["default"].createElement(ChipTrigger, {
+      $size: size,
+      onClick: onClose,
+      className: "tw-ml-0.5"
+    }, /*#__PURE__*/React__default["default"].createElement(ChipCloseIcon, {
+      fill: "currentColor"
+    })) : null);
+  });
+  Chip.displayName = "Chip";
+
+  function useOnClickOutside(ref, handler) {
+    React.useEffect(function () {
+      var listener = function listener(event) {
+        // Do nothing if clicking ref's element or descendent elements
+        if (!ref.current || ref.current.contains(event.target)) {
+          return;
+        }
+
+        handler(event);
+      };
+
+      document.addEventListener("mousedown", listener);
+      document.addEventListener("touchstart", listener);
+      return function () {
+        document.removeEventListener("mousedown", listener);
+        document.removeEventListener("touchstart", listener);
+      };
+    }, // Add ref and handler to effect dependencies
+    // It's worth noting that because passed in handler is a new ...
+    // ... function on every render that will cause this effect ...
+    // ... callback/cleanup to run every render. It's not a big deal ...
+    // ... but to optimize you can wrap handler in useCallback before ...
+    // ... passing it into this hook.
+    [ref, handler]);
+  }
+
+  var _excluded$2 = ["options", "selected", "loading", "loadingText", "onChange", "placeholder", "handleEmptyAction", "disabled", "size", "invalid", "type", "renderChip", "forceCloseMenu", "renderOption", "limitChips", "hiddenNumberText"];
   var ComboBox = function ComboBox(_ref) {
     var _comboBoxRef$current;
 
@@ -10575,9 +10715,17 @@
         size = _ref$size === void 0 ? "regular" : _ref$size,
         _ref$invalid = _ref.invalid,
         invalid = _ref$invalid === void 0 ? false : _ref$invalid,
-        prop = _objectWithoutProperties(_ref, _excluded$3);
+        _ref$type = _ref.type,
+        type = _ref$type === void 0 ? "single" : _ref$type,
+        renderChip = _ref.renderChip,
+        _ref$forceCloseMenu = _ref.forceCloseMenu,
+        forceCloseMenu = _ref$forceCloseMenu === void 0 ? type === "single" : _ref$forceCloseMenu,
+        renderOption = _ref.renderOption,
+        _ref$limitChips = _ref.limitChips,
+        limitChips = _ref$limitChips === void 0 ? 2 : _ref$limitChips,
+        hiddenNumberText = _ref.hiddenNumberText,
+        prop = _objectWithoutProperties(_ref, _excluded$2);
 
-    var timeoutRef = React.useRef();
     var selectedName = React.useMemo(function () {
       var value = "";
 
@@ -10619,19 +10767,28 @@
 
     var elementRef = React.useRef(null);
     var handleRef = useForkRef(setChildNode, elementRef);
+    var wrapperRef = React.useRef(null);
+    var chipWrapper = React.useRef(null);
 
     var _useState5 = React.useState(false),
         _useState6 = _slicedToArray(_useState5, 2),
         open = _useState6[0],
         setOpen = _useState6[1];
 
+    useOnClickOutside(wrapperRef, function () {
+      return setOpen(false);
+    });
     var handleOnKeyDown = React.useCallback(function (e) {
       if (e.key === "Escape" && open) {
         setOpen(false);
         setValue(selectedName);
         e.stopPropagation();
       }
-    }, [open, selectedName]);
+
+      if (e.key === "Enter" && type === "multiple") {
+        setValue("");
+      }
+    }, [open, selectedName, type]);
     React.useEffect(function () {
       open && (childNode === null || childNode === void 0 ? void 0 : childNode.focus());
       !open && (childNode === null || childNode === void 0 ? void 0 : childNode.blur());
@@ -10644,46 +10801,191 @@
       setOpen(false);
     }, [handleEmptyAction]);
     var handleChange = React.useCallback(function (selectedValue) {
-      if (selectedValue) {
-        onChange === null || onChange === void 0 ? void 0 : onChange(selectedValue);
+      onChange === null || onChange === void 0 ? void 0 : onChange(selectedValue);
+
+      if (forceCloseMenu) {
         setOpen(false);
       }
-    }, [onChange]);
+    }, [forceCloseMenu, onChange]);
     var onOpen = React.useCallback(function () {
       if (!disabled) {
         setOpen(true);
       }
     }, [disabled]);
     var handleRenderOption = React.useCallback(function (option, props) {
+      if (typeof renderOption === "function") {
+        return renderOption(option, props);
+      }
+
+      if (type === "multiple") {
+        return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(OptionContent, {
+          imageUrl: option.image,
+          color: option.color,
+          textColor: option.textColor,
+          name: option.name
+        }), /*#__PURE__*/React__default["default"].createElement(Checkbox, props));
+      }
+
       return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(OptionContent, {
         imageUrl: option.image,
         color: option.color,
         textColor: option.textColor,
         name: option.name
       }), /*#__PURE__*/React__default["default"].createElement(RadioButton, props));
-    }, []);
+    }, [type, renderOption]);
     var handleDeselect = React.useCallback(function (e) {
       e.stopPropagation();
-      onChange === null || onChange === void 0 ? void 0 : onChange("");
+
+      if (type === "multiple") {
+        onChange === null || onChange === void 0 ? void 0 : onChange([]);
+      } else {
+        onChange === null || onChange === void 0 ? void 0 : onChange("");
+      }
+
       setOpen(false);
-    }, [onChange]);
+    }, [type, onChange]);
     var handleMouseDown = React.useCallback(function (e) {
       e.preventDefault();
     }, []);
     var comboBoxRef = React.useRef(null);
     var handleBlur = React.useCallback(function () {
       setValue(selectedName);
-      timeoutRef.current = setTimeout(function () {
-        setOpen(false);
-      }, 200);
     }, [selectedName]);
-    React.useEffect(function () {
-      return function () {
-        timeoutRef.current && clearTimeout(timeoutRef.current);
+    var renderChipAdornment = React.useCallback(function (option, index) {
+      if (typeof renderChip === "function") {
+        return renderChip(option, index);
+      }
+
+      var avatarProps = {
+        className: "tw-my-0.5 tw-mr-0.5",
+        size: 18
       };
-    }, []);
-    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledComboBoxInput, {
+
+      switch (size) {
+        case "big":
+          avatarProps.size = 22;
+          break;
+
+        case "small":
+          avatarProps.size = 14;
+          break;
+      }
+
+      var leftAdornment = option.image ? /*#__PURE__*/React__default["default"].createElement(Avatar, _extends({
+        url: option.image
+      }, avatarProps)) : undefined;
+      return /*#__PURE__*/React__default["default"].createElement(Chip, {
+        className: "c-combo-box-chip",
+        leftAdornment: leftAdornment,
+        label: option.name,
+        key: index,
+        onClose: !disabled ? function (e) {
+          e.preventDefault();
+          e.stopPropagation();
+
+          if (Array.isArray(selected) && selected.includes(option.id)) {
+            if (typeof onChange === "function") {
+              var newSelected = selected.filter(function (item) {
+                return item !== option.id;
+              });
+              onChange(newSelected);
+            }
+          }
+        } : undefined,
+        size: size
+      });
+    }, [disabled, onChange, renderChip, selected, size]);
+    var autoSize = React.useMemo(function () {
+      if (type === "multiple" && open && Array.isArray(selected) && selected.length > 1) {
+        return "auto";
+      }
+
+      return size;
+    }, [open, selected, size, type]);
+    var startAdornment = React.useMemo(function () {
+      if (type === "multiple" && Array.isArray(selected) && selected.length > 0) {
+        var elements = [];
+        var total = 0;
+        options.forEach(function (option, index) {
+          var isGrouped = isOptionGroup(option);
+
+          if (selected.includes(option.id) && !isGrouped) {
+            total = total + 1;
+            elements.push(renderChipAdornment(option, index));
+          } else if (isGrouped) {
+            var groupedOptions = option.options.filter(function (o) {
+              return selected.includes(o.id);
+            });
+            total = total + groupedOptions.length;
+
+            if (groupedOptions.length > 0) {
+              groupedOptions.forEach(function (o, _index) {
+                elements.push(renderChipAdornment(o, "".concat(index, "_").concat(_index)));
+              });
+            }
+          }
+        });
+        var _hidden = 0;
+
+        if (!open && limitChips > 0 && elements.length > limitChips) {
+          _hidden = elements.splice(limitChips, elements.length - limitChips).length;
+        }
+
+        return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, elements, _hidden > 0 && /*#__PURE__*/React__default["default"].createElement(Typography, {
+          variant: size === "small" ? "Caption 1" : size === "regular" ? "Body 2" : "Body 1",
+          className: "tw-flex tw-items-center tw-shrink-0",
+          key: "hidden"
+        }, typeof hiddenNumberText === "function" ? hiddenNumberText(_hidden) : "+".concat(_hidden)));
+      }
+
+      return undefined;
+    }, [type, selected, options, open, limitChips, hiddenNumberText, renderChipAdornment, size]);
+    var showXIcon = Array.isArray(selected) && type === "multiple" && selected.length > 0;
+    var hasSelected = type === "multiple" && Array.isArray(selected) && selected.length > 0;
+    return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "c-combo-box",
+      ref: wrapperRef
+    }, type === "multiple" ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledInputWrapper, {
+      $size: size,
+      $invalid: invalid,
+      className: classNames__default["default"]("tw-flex tw-space-between tw-flex-1", {
+        "tw-h-auto": autoSize === "auto"
+      }),
+      onClick: function onClick() {
+        var _elementRef$current;
+
+        (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.focus();
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: classNames__default["default"]("tw-flex tw-gap-1 tw-flex-1", {
+        "tw-flex-wrap tw-w-full": autoSize === "auto",
+        "tw-items-center": autoSize !== "auto",
+        "tw-overflow-hidden": !open
+      }),
+      ref: chipWrapper
+    }, startAdornment, /*#__PURE__*/React__default["default"].createElement(StyledInput, {
+      className: classNames__default["default"]("tw-flex tw-flex-1 tw-self-center tw-m-0", {
+        "tw-w-full": !selected || Array.isArray(selected) && selected.length === 0,
+        "tw-w-auto": autoSize === "auto"
+      }),
+      onBlur: handleBlur,
+      onFocus: onOpen,
+      ref: handleRef,
+      value: loading && loadingText ? loadingText : value,
+      onKeyDown: handleOnKeyDown,
+      onChange: handleOnChange,
+      placeholder: !hasSelected ? placeholder : undefined,
+      disabled: disabled,
+      $size: size,
+      $loading: loading
+    })), !disabled && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, loading ? /*#__PURE__*/React__default["default"].createElement(SpinnerLoader, null) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, showXIcon && /*#__PURE__*/React__default["default"].createElement(Trigger, {
+      onMouseDown: handleMouseDown,
+      onClick: handleDeselect,
+      className: "tw-flex tw-justify-content-center",
+      "data-testid": "deselect-all"
+    }, /*#__PURE__*/React__default["default"].createElement(StyledComboBoxCloseSmallIcon, null)), /*#__PURE__*/React__default["default"].createElement(StyledComboBoxCollapseExpandSingleIcon, {
+      $open: open
+    }))))) : /*#__PURE__*/React__default["default"].createElement(StyledComboBoxInput, {
       onBlur: handleBlur,
       onFocus: onOpen,
       wrapRef: comboBoxRef,
@@ -10696,6 +10998,7 @@
       size: size,
       invalid: invalid,
       $loading: loading,
+      startAdornment: startAdornment,
       endAdornment: !disabled ? /*#__PURE__*/React__default["default"].createElement(InputAdornment, {
         disablePointerEvents: disabled
       }, loading ? /*#__PURE__*/React__default["default"].createElement(SpinnerLoader, null) : selected ? /*#__PURE__*/React__default["default"].createElement(Button, {
@@ -10725,7 +11028,7 @@
       handleChange: handleChange,
       renderOption: handleRenderOption,
       options: options,
-      type: "single",
+      type: type,
       handleEmptyAction: emptyAction
     }))))) : null);
   };
@@ -11125,7 +11428,7 @@
   ThumbsDownIcon.displayName = "ThumbsDownIcon";
   var ThumbsDownIcon$1 = ThumbsDownIcon;
 
-  var _excluded$2 = ["invalid", "required", "size", "children", "className", "weight"];
+  var _excluded$1 = ["invalid", "required", "size", "children", "className", "weight"];
   var Label = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$invalid = _ref.invalid,
         invalid = _ref$invalid === void 0 ? false : _ref$invalid,
@@ -11137,13 +11440,13 @@
         className = _ref.className,
         _ref$weight = _ref.weight,
         weight = _ref$weight === void 0 ? "bold" : _ref$weight,
-        props = _objectWithoutProperties(_ref, _excluded$2);
+        props = _objectWithoutProperties(_ref, _excluded$1);
 
     var color = invalid ? "alert" : "primary";
     var variant = size === "regular" ? "Body 2" : "Caption 1";
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       as: "label",
-      className: classnames__default["default"]("c-label", className),
+      className: classNames__default["default"]("c-label", className),
       variant: variant,
       color: color,
       weight: weight,
@@ -11228,7 +11531,7 @@
     return /*#__PURE__*/React__default["default"].createElement(StyledSvg, {
       height: radius * 2,
       width: radius * 2,
-      className: classnames__default["default"](className)
+      className: classNames__default["default"](className)
     }, /*#__PURE__*/React__default["default"].createElement(StyledBackgroundCircle, {
       $color: backgroundColor,
       $strokeDashOffset: -strokeDashoffsetOuter,
@@ -11256,11 +11559,11 @@
   };
   ProgressRing.displayName = "ProgressRing";
 
-  var _excluded$1 = ["withDocuments"];
+  var _excluded = ["withDocuments"];
   var FolderIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
     var _ref$withDocuments = _ref.withDocuments,
         withDocuments = _ref$withDocuments === void 0 ? false : _ref$withDocuments,
-        props = _objectWithoutProperties(_ref, _excluded$1);
+        props = _objectWithoutProperties(_ref, _excluded);
 
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 100,
@@ -11312,94 +11615,6 @@
   FolderIcon.displayName = "FolderIcon";
   var FolderIcon$1 = FolderIcon;
 
-  var ChipContainer = styled__default["default"].div.withConfig({
-    displayName: "Styles__ChipContainer",
-    componentId: "sc-7s0bd1-0"
-  })(["min-width:80px;max-width:220px;", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], {
-    "height": "1.5rem"
-  }, {
-    "borderRadius": "0.25rem"
-  }, {
-    "display": "inline-flex"
-  }, {
-    "alignItems": "center"
-  }, {
-    "justifyContent": "center"
-  }, {
-    "gap": "0.25rem"
-  }, {
-    "paddingLeft": "0.375rem"
-  }, {
-    "overflow": "hidden"
-  }, FontStyle, BoxSizingStyle, {
-    "fontSize": "0.875rem"
-  }, {
-    "color": "var(--color-theme-900)"
-  }, {
-    "lineHeight": "1.375"
-  }, {
-    "letterSpacing": "0.02em"
-  }, {
-    "fontWeight": "400"
-  }, {
-    "backgroundColor": "var(--color-theme-400)"
-  }, function (props) {
-    return props.$showClose ? null : styled.css(["", ""], {
-      "paddingRight": "0.375rem"
-    });
-  });
-  ChipContainer.displayName = "ChipContainer";
-  var ChipLabel = styled__default["default"].span.withConfig({
-    displayName: "Styles__ChipLabel",
-    componentId: "sc-7s0bd1-1"
-  })(["", " ", ""], {
-    "width": "100%"
-  }, {
-    "overflow": "hidden",
-    "textOverflow": "ellipsis",
-    "whiteSpace": "nowrap"
-  });
-  ChipLabel.displayName = "ChipLabel";
-  var ChipTrigger = styled__default["default"](Trigger).withConfig({
-    displayName: "Styles__ChipTrigger",
-    componentId: "sc-7s0bd1-2"
-  })(["", " ", " ", " &:hover{", "}"], {
-    "display": "flex"
-  }, {
-    "alignItems": "center"
-  }, {
-    "justifyContent": "center"
-  }, {
-    "backgroundColor": "var(--color-theme-transparent-400)"
-  });
-  ChipTrigger.displayName = "ChipTrigger";
-  var ChipCloseIcon = styled__default["default"](CloseSmallIcon$1).withConfig({
-    displayName: "Styles__ChipCloseIcon",
-    componentId: "sc-7s0bd1-3"
-  })(["", ""], {
-    "color": "var(--color-theme-700)"
-  });
-  ChipCloseIcon.displayName = "ChipCloseIcon";
-
-  var _excluded = ["leftAdornment", "label", "onClose"];
-  var Chip = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
-    var leftAdornment = _ref.leftAdornment,
-        label = _ref.label,
-        onClose = _ref.onClose,
-        rest = _objectWithoutProperties(_ref, _excluded);
-
-    var showClose = typeof onClose === "function";
-    return /*#__PURE__*/React__default["default"].createElement(ChipContainer, _extends({}, rest, {
-      ref: ref,
-      $showClose: showClose
-    }), leftAdornment, /*#__PURE__*/React__default["default"].createElement(ChipLabel, null, label), showClose ? /*#__PURE__*/React__default["default"].createElement(ChipTrigger, {
-      onClick: onClose
-    }, /*#__PURE__*/React__default["default"].createElement(ChipCloseIcon, {
-      fill: "currentColor"
-    })) : null);
-  });
-  Chip.displayName = "Chip";
-
   exports.Accordion = Accordion;
   exports.AccordionContext = AccordionContext;
   exports.AccordionItem = AccordionItem;
@@ -11663,6 +11878,7 @@
   exports.Window = Window;
   exports.WorkloadIcon = WorkloadIcon$1;
   exports.YearMonthPicker = YearMonthPicker;
+  exports.isOptionGroup = isOptionGroup;
   exports.layers = layers;
   exports.signifierTypes = signifierTypes;
   exports.useForkRef = useForkRef;