@innovaccer/design-system 2.28.3 → 2.29.0

package/dist/index.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1709299646293 
+   * Generated on: 1710344054873 
    *      Package: @innovaccer/design-system
-   *      Version: v2.28.3
+   *      Version: v2.29.0
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -547,7 +547,9 @@
           lastName = props.lastName,
           className = props.className,
           appearance = props.appearance,
-          shape = props.shape;
+          shape = props.shape,
+          _e = props.role,
+          role = _e === void 0 ? 'presentation' : _e;
       var baseProps = extractBaseProps(props);
       var initials = children && typeof children === 'string' ? children.trim().slice(0, initialsLength) : "" + (firstName ? firstName.trim()[0] : '') + (lastName ? lastName.trim()[0] : '');
       var tooltip = children && typeof children === 'string' ? children : (firstName || '') + " " + (lastName || '') || '';
@@ -569,7 +571,8 @@
         if (children && typeof children !== 'string') {
           return /*#__PURE__*/React__namespace.createElement("span", {
             "data-test": "DesignSystem-AvatarWrapper",
-            className: AvatarWrapperClassNames
+            className: AvatarWrapperClassNames,
+            role: role
           }, /*#__PURE__*/React__namespace.createElement(AvatarProvider, {
             value: sharedProp
           }, /*#__PURE__*/React__namespace.createElement("span", __assign({
@@ -581,7 +584,8 @@
 
         return /*#__PURE__*/React__namespace.createElement("span", {
           "data-test": "DesignSystem-AvatarWrapper",
-          className: AvatarWrapperClassNames
+          className: AvatarWrapperClassNames,
+          role: role
         }, /*#__PURE__*/React__namespace.createElement("span", __assign({
           "data-test": "DesignSystem-Avatar"
         }, baseProps, {
@@ -1871,7 +1875,9 @@
           var prevYear = yearNavVal;
           var prevMonthDayRange = getDaysInMonth(prevYear, prevMonth);
           var dayRange = getDaysInMonth(yearNavVal, monthNavVal);
-          var dayDiff = getFirstDayOfMonth(yearNavVal, monthNavVal) - getIndexOfDay(firstDayOfWeek);
+          var firstDayIndex = getFirstDayOfMonth(yearNavVal, monthNavVal);
+          var desiredFirstDayIndex = getIndexOfDay(firstDayOfWeek);
+          var dayDiff = (firstDayIndex - desiredFirstDayIndex + 7) % 7;
           var dummyDays = Math.abs(dayDiff);
           var noOfRows = Math.ceil((dayRange + dummyDays) / daysInRow);
 
@@ -8786,7 +8792,7 @@
       customStyle: {}
     });
 
-    var keyCodes = {
+    var keyCodes$1 = {
       BACKSPACE: 'Backspace',
       DELETE: 'Delete',
       ENTER: 'Enter'
@@ -8873,15 +8879,15 @@
         var chipsLength = chips.length;
 
         switch (event.key) {
-          case keyCodes.DELETE:
-          case keyCodes.BACKSPACE:
+          case keyCodes$1.DELETE:
+          case keyCodes$1.BACKSPACE:
             if (inputValue === '' && chipsLength > 0) {
               onChipDeleteHandler(chipsLength - 1);
             }
 
             break;
 
-          case keyCodes.ENTER:
+          case keyCodes$1.ENTER:
             event.preventDefault();
             onChipAddHandler();
             break;
@@ -17497,7 +17503,8 @@
           className = props.className,
           disabled = props.disabled,
           selected = props.selected,
-          activated = props.activated;
+          activated = props.activated,
+          tabIndex = props.tabIndex;
       var contextProp = React__namespace.useContext(ListboxContext);
       var size = contextProp.size,
           type = contextProp.type,
@@ -17508,7 +17515,7 @@
       return /*#__PURE__*/React__namespace.createElement("div", {
         "data-disabled": disabled,
         "data-test": "DesignSystem-Listbox-ItemWrapper",
-        tabIndex: draggable ? -1 : 0,
+        tabIndex: draggable ? -1 : tabIndex || 0,
         className: itemClass,
         onKeyDown: onKeyDown,
         role: "tablist"
@@ -17619,13 +17626,13 @@
       var tagClass = classNames__default["default"]((_a = {}, _a['Listbox-item-wrapper'] = !draggable, _a));
       return /*#__PURE__*/React__namespace.createElement(Tag, __assign({
         id: id,
-        key: id
+        key: id,
+        "data-test": "DesignSystem-Listbox-Item"
       }, rest, {
-        "data-test": "DesignSystem-Listbox-Item",
         onClick: onClickHandler,
         "data-value": value,
         className: tagClass
-      }), /*#__PURE__*/React__namespace.createElement(ListBody, __assign({}, props)), nestedBody && /*#__PURE__*/React__namespace.createElement(NestedList, {
+      }, rest), /*#__PURE__*/React__namespace.createElement(ListBody, __assign({}, props)), nestedBody && /*#__PURE__*/React__namespace.createElement(NestedList, {
         expanded: expanded,
         nestedBody: nestedBody
       }), showDivider && /*#__PURE__*/React__namespace.createElement(Divider, {
@@ -17842,11 +17849,1996 @@
     };
     TextField.displayName = 'TextField';
 
-    var version = "2.28.3";
+    var SelectionAvatar = function SelectionAvatar(props) {
+      var icon = props.icon,
+          image = props.image,
+          rest = __rest(props, ["icon", "image"]);
+
+      return /*#__PURE__*/React__namespace.createElement(Avatar, __assign({
+        role: "checkbox"
+      }, rest, {
+        withTooltip: true,
+        className: "cursor-pointer"
+      }), image || icon);
+    };
+
+    var AvatarSelectionContext = /*#__PURE__*/React__namespace.createContext({});
+
+    var SelectionAvatarsWrapper = function SelectionAvatarsWrapper(props) {
+      var avatarList = props.avatarList,
+          avatarStyle = props.avatarStyle,
+          tooltipPosition = props.tooltipPosition,
+          size = props.size,
+          avatarRenderer = props.avatarRenderer;
+      var contextProp = React__namespace.useContext(AvatarSelectionContext);
+      var setSelectedItems = contextProp.setSelectedItems,
+          selectedItems = contextProp.selectedItems,
+          onSelect = contextProp.onSelect;
+
+      var onClickHandler = function onClickHandler(item) {
+        var list = selectedItems;
+
+        if (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.includes(item)) {
+          list = selectedItems.filter(function (selectedItem) {
+            return selectedItem !== item;
+          });
+        } else {
+          list === null || list === void 0 ? void 0 : list.push(item);
+        }
+
+        list && (setSelectedItems === null || setSelectedItems === void 0 ? void 0 : setSelectedItems(__spreadArrays(list)));
+        onSelect && onSelect(list);
+      };
+
+      var handleKeyDown = function handleKeyDown(event, item) {
+        switch (event.key) {
+          case 'Enter':
+            onClickHandler(item);
+            break;
+        }
+      };
+
+      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, avatarList.map(function (avatarItem, index) {
+        var _a;
+
+        var appearance = avatarItem.appearance,
+            firstName = avatarItem.firstName,
+            lastName = avatarItem.lastName,
+            icon = avatarItem.icon,
+            image = avatarItem.image;
+        var GroupClass = classNames__default["default"]((_a = {}, _a["SelectionAvatarGroup-item"] = true, _a["SelectionAvatarGroup-item--selected"] = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.includes(avatarItem), _a));
+
+        if (avatarRenderer) {
+          return avatarRenderer(avatarItem);
+        }
+
+        return /*#__PURE__*/React__namespace.createElement("span", {
+          key: index,
+          className: "SelectionAvatarGroup-wrapper"
+        }, /*#__PURE__*/React__namespace.createElement("div", {
+          tabIndex: 0,
+          role: "checkbox",
+          style: avatarStyle,
+          className: GroupClass,
+          "data-test": "DesignSystem-AvatarSelection--Avatar",
+          "aria-checked": selectedItems && selectedItems.includes(avatarItem),
+          onClick: function onClick() {
+            return onClickHandler(avatarItem);
+          },
+          onKeyDown: function onKeyDown(event) {
+            return handleKeyDown(event, avatarItem);
+          }
+        }, /*#__PURE__*/React__namespace.createElement(SelectionAvatar, {
+          size: size,
+          appearance: appearance,
+          firstName: firstName,
+          lastName: lastName,
+          withTooltip: true,
+          tooltipPosition: tooltipPosition,
+          icon: icon,
+          image: image
+        })));
+      }));
+    };
+
+    var handleKeyDown$4 = function handleKeyDown(event, setOpenPopover, setHighlightFirstItem, setHighlightLastItem) {
+      switch (event.key) {
+        case 'Enter':
+          setOpenPopover === null || setOpenPopover === void 0 ? void 0 : setOpenPopover(true);
+          setHighlightFirstItem === null || setHighlightFirstItem === void 0 ? void 0 : setHighlightFirstItem(true);
+          break;
+
+        case 'ArrowDown':
+          setOpenPopover === null || setOpenPopover === void 0 ? void 0 : setOpenPopover(true);
+          setHighlightFirstItem === null || setHighlightFirstItem === void 0 ? void 0 : setHighlightFirstItem(true);
+          break;
+
+        case 'ArrowUp':
+          setOpenPopover === null || setOpenPopover === void 0 ? void 0 : setOpenPopover(true);
+          setHighlightLastItem === null || setHighlightLastItem === void 0 ? void 0 : setHighlightLastItem(true);
+          break;
+      }
+    };
+    var focusListItem$2 = function focusListItem(position, setFocusedOption, listRef, withSearch) {
+      var _a, _b, _c, _d, _e;
+
+      if (withSearch && position === 'down') {
+        var searchInput = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[data-test="DesignSystem-AvatarSelection--Input"]');
+        searchInput && ((_b = searchInput[0]) === null || _b === void 0 ? void 0 : _b.focus());
+        setFocusedOption === null || setFocusedOption === void 0 ? void 0 : setFocusedOption(searchInput);
+        return;
+      }
+
+      var listItems = (_c = listRef.current) === null || _c === void 0 ? void 0 : _c.querySelectorAll('[data-test="DesignSystem-Listbox-ItemWrapper"]');
+      var targetOption;
+
+      if (position === 'down') {
+        targetOption = listItems === null || listItems === void 0 ? void 0 : listItems[0];
+      } else {
+        targetOption = listItems === null || listItems === void 0 ? void 0 : listItems[listItems.length - 1];
+      }
+
+      (_d = targetOption) === null || _d === void 0 ? void 0 : _d.focus();
+      (_e = targetOption === null || targetOption === void 0 ? void 0 : targetOption.scrollIntoView) === null || _e === void 0 ? void 0 : _e.call(targetOption, {
+        block: 'center'
+      });
+      setFocusedOption && setFocusedOption(targetOption);
+    };
+
+    var AvatarSelectionCount = function AvatarSelectionCount(props) {
+      var _a;
+
+      var hiddenAvatarCount = props.hiddenAvatarCount,
+          avatarStyle = props.avatarStyle,
+          size = props.size,
+          hiddenAvatarList = props.hiddenAvatarList;
+      var contextProp = React__namespace.useContext(AvatarSelectionContext);
+      var selectedItems = contextProp.selectedItems,
+          setHighlightFirstItem = contextProp.setHighlightFirstItem,
+          setHighlightLastItem = contextProp.setHighlightLastItem,
+          triggerRef = contextProp.triggerRef,
+          setOpenPopover = contextProp.setOpenPopover,
+          openPopover = contextProp.openPopover,
+          popoverId = contextProp.popoverId;
+
+      var _b = React__namespace.useState(0),
+          selectedItemCount = _b[0],
+          setSelectedItemCount = _b[1];
+
+      var wrapperClassName = classNames__default["default"]((_a = {}, _a['SelectionAvatarCount-wrapper'] = true, _a['SelectionAvatarCount--selected'] = selectedItemCount > 0, _a));
+      React__namespace.useEffect(function () {
+        var selectedList = hiddenAvatarList.filter(function (data1) {
+          return selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.some(function (data2) {
+            return data2 === data1;
+          });
+        });
+        setSelectedItemCount(selectedList.length);
+      }, [selectedItems]);
+      return /*#__PURE__*/React__namespace.createElement("div", {
+        "data-test": "DesignSystem-AvatarSelection--TriggerAvatar",
+        className: wrapperClassName,
+        onKeyDown: function onKeyDown(event) {
+          return handleKeyDown$4(event, setOpenPopover, setHighlightFirstItem, setHighlightLastItem);
+        },
+        style: avatarStyle,
+        tabIndex: 0,
+        role: "button",
+        "aria-haspopup": "listbox",
+        "aria-expanded": openPopover,
+        "aria-controls": popoverId,
+        ref: triggerRef
+      }, /*#__PURE__*/React__namespace.createElement(Avatar, {
+        size: size,
+        appearance: "secondary",
+        className: "SelectionAvatarCount cursor-pointer"
+      }, /*#__PURE__*/React__namespace.createElement(Text, {
+        className: "overflow-hidden"
+      }, "+" + hiddenAvatarCount)));
+    };
+
+    var handleKeyDown$3 = function handleKeyDown(event, focusedOption, setFocusedOption, setHighlightFirstItem, setHighlightLastItem, listRef, withSearch, setOpenPopover, triggerRef) {
+      switch (event.key) {
+        case 'ArrowUp':
+          event.preventDefault();
+          navigateOptions$2('up', focusedOption, setFocusedOption, listRef, withSearch);
+          break;
+
+        case 'ArrowDown':
+          event.preventDefault();
+          navigateOptions$2('down', focusedOption, setFocusedOption, listRef, withSearch);
+          break;
+
+        case 'Enter':
+          handleEnterKey$2(focusedOption);
+          setHighlightLastItem === null || setHighlightLastItem === void 0 ? void 0 : setHighlightLastItem(false);
+          setHighlightFirstItem === null || setHighlightFirstItem === void 0 ? void 0 : setHighlightFirstItem(false);
+          break;
+
+        case 'Escape':
+          setOpenPopover === null || setOpenPopover === void 0 ? void 0 : setOpenPopover(false);
+          triggerRef.current.focus();
+          setFocusedOption === null || setFocusedOption === void 0 ? void 0 : setFocusedOption(undefined);
+          break;
+      }
+    };
+
+    var handleEnterKey$2 = function handleEnterKey(focusedOption) {
+      var _a;
+
+      (_a = focusedOption) === null || _a === void 0 ? void 0 : _a.click();
+    };
+
+    var navigateOptions$2 = function navigateOptions(direction, focusedOption, setFocusedOption, listRef, withSearch) {
+      var listItems = listRef === null || listRef === void 0 ? void 0 : listRef.current.querySelectorAll('[data-test="DesignSystem-Listbox-ItemWrapper"]');
+      var index = Array.from(listItems).findIndex(function (item) {
+        return item == focusedOption;
+      });
+
+      if (index === -1) {
+        index = direction === 'up' ? listItems.length - 1 : 0;
+      } else if (withSearch && index === 0 && direction === 'up' || withSearch && index === listItems.length - 1 && direction === 'down') {
+        var searchInput = listRef.current.querySelector('[data-test="DesignSystem-AvatarSelection--Input"]');
+        searchInput.focus();
+        setFocusedOption && setFocusedOption(searchInput);
+      } else {
+        index = direction === 'up' ? (index - 1 + listItems.length) % listItems.length : (index + 1) % listItems.length;
+        var targetOption = listItems[index];
+        targetOption.focus();
+        setFocusedOption && setFocusedOption(targetOption);
+        targetOption.scrollIntoView({
+          block: 'center'
+        });
+      }
+    };
+
+    var handleInputKeyDown$1 = function handleInputKeyDown(event, listRef, setFocusedOption, setOpenPopover, triggerRef) {
+      var _a, _b, _c;
+
+      var listItems = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[data-test="DesignSystem-Listbox-ItemWrapper"]');
+      var targetOption;
+
+      switch (event.key) {
+        case 'ArrowUp':
+          event.preventDefault();
+          targetOption = listItems[listItems.length - 1];
+          break;
+
+        case 'ArrowDown':
+          event.preventDefault();
+          targetOption = listItems[0];
+          break;
+
+        case 'Escape':
+          setOpenPopover === null || setOpenPopover === void 0 ? void 0 : setOpenPopover(false);
+          triggerRef.current.focus();
+          setFocusedOption === null || setFocusedOption === void 0 ? void 0 : setFocusedOption(undefined);
+          break;
+      }
+
+      (_b = targetOption) === null || _b === void 0 ? void 0 : _b.focus();
+      (_c = targetOption === null || targetOption === void 0 ? void 0 : targetOption.scrollIntoView) === null || _c === void 0 ? void 0 : _c.call(targetOption, {
+        block: 'center'
+      });
+      setFocusedOption && setFocusedOption(targetOption);
+    };
+
+    var AvatarSelectionInput = function AvatarSelectionInput(props) {
+      var contextProp = React__namespace.useContext(AvatarSelectionContext);
+      var listRef = contextProp.listRef,
+          setFocusedOption = contextProp.setFocusedOption,
+          setOpenPopover = contextProp.setOpenPopover,
+          triggerRef = contextProp.triggerRef;
+      return /*#__PURE__*/React__namespace.createElement("div", {
+        className: "SelectionAvatar-inputWrapper"
+      }, /*#__PURE__*/React__namespace.createElement(Input, __assign({
+        icon: "search",
+        onKeyDown: function onKeyDown(event) {
+          return handleInputKeyDown$1(event, listRef, setFocusedOption, setOpenPopover, triggerRef);
+        },
+        className: "w-100 SelectionAvatar-input",
+        "data-test": "DesignSystem-AvatarSelection--Input"
+      }, props)));
+    };
+
+    var AvatarSelectionList = function AvatarSelectionList(props) {
+      return /*#__PURE__*/React__namespace.createElement(Listbox, __assign({}, props), props.children);
+    };
+    AvatarSelectionList.defaultProps = {
+      type: 'option',
+      showDivider: false,
+      size: 'compressed',
+      tagName: 'ul'
+    };
+
+    var AvatarSelectionOption = function AvatarSelectionOption(props) {
+      var children = props.children,
+          value = props.value,
+          rest = __rest(props, ["children", "value"]);
+
+      var contextProp = React__namespace.useContext(AvatarSelectionContext);
+      var setSelectedItems = contextProp.setSelectedItems,
+          selectedItems = contextProp.selectedItems,
+          onSelect = contextProp.onSelect,
+          focusedOption = contextProp.focusedOption,
+          setFocusedOption = contextProp.setFocusedOption,
+          setHighlightFirstItem = contextProp.setHighlightFirstItem,
+          setHighlightLastItem = contextProp.setHighlightLastItem,
+          listRef = contextProp.listRef,
+          withSearch = contextProp.withSearch,
+          setOpenPopover = contextProp.setOpenPopover,
+          triggerRef = contextProp.triggerRef;
+
+      var onSelectHandler = function onSelectHandler(event, avatarData) {
+        event.preventDefault();
+        var list = selectedItems ? __spreadArrays(selectedItems) : [];
+
+        if (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.includes(avatarData)) {
+          list = selectedItems.filter(function (selectedItem) {
+            return selectedItem !== avatarData;
+          });
+        } else {
+          list.push(avatarData);
+        }
+
+        setSelectedItems === null || setSelectedItems === void 0 ? void 0 : setSelectedItems(__spreadArrays(list));
+        setOpenPopover === null || setOpenPopover === void 0 ? void 0 : setOpenPopover(true);
+        onSelect && onSelect(list);
+      };
+
+      var onKeyDownHandler = function onKeyDownHandler(event) {
+        handleKeyDown$3(event, focusedOption, setFocusedOption, setHighlightFirstItem, setHighlightLastItem, listRef, withSearch, setOpenPopover, triggerRef);
+      };
+
+      return /*#__PURE__*/React__namespace.createElement(Listbox.Item, __assign({
+        onClick: function onClick(event) {
+          return onSelectHandler(event, value);
+        },
+        onKeyDown: function onKeyDown(event) {
+          return onKeyDownHandler(event);
+        },
+        selected: selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.includes(value),
+        "data-test": "DesignSystem-AvatarSelection--Option",
+        tabIndex: -1
+      }, rest), children);
+    };
+    AvatarSelectionOption.defaultProps = {
+      tagName: 'li'
+    };
+
+    var AvatarSelectionEmptyState = function AvatarSelectionEmptyState(props) {
+      var height = props.height,
+          title = props.title,
+          description = props.description;
+      return /*#__PURE__*/React__namespace.createElement("div", {
+        className: "d-flex flex-column justify-content-center align-items-center",
+        style: {
+          height: height ? height - 4 : ''
+        },
+        "data-test": "DesignSystem-AvatarSelection--EmptyState"
+      }, title && /*#__PURE__*/React__namespace.createElement(Text, {
+        className: "text-align-center mb-3",
+        weight: "strong"
+      }, title), description && /*#__PURE__*/React__namespace.createElement(Text, {
+        className: "text-align-center mb-6",
+        weight: "medium",
+        size: "small",
+        appearance: "subtle"
+      }, description));
+    };
+
+    var AvatarSelectionPopover = function AvatarSelectionPopover(props) {
+      var _a;
+
+      var hiddenAvatarList = props.hiddenAvatarList,
+          customStyle = props.customStyle,
+          searchPlaceholder = props.searchPlaceholder,
+          searchComparator = props.searchComparator,
+          children = props.children;
+
+      var _b = React__namespace.useState(hiddenAvatarList),
+          searchList = _b[0],
+          setSearchList = _b[1];
+
+      var _c = React__namespace.useState(''),
+          searchValue = _c[0],
+          setSearchValue = _c[1];
+
+      var contextProp = React__namespace.useContext(AvatarSelectionContext);
+      var selectedItems = contextProp.selectedItems,
+          listRef = contextProp.listRef,
+          withSearch = contextProp.withSearch,
+          popoverId = contextProp.popoverId;
+
+      if (children) {
+        return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, children);
+      }
+
+      var onSearchHandler = function onSearchHandler(event) {
+        var searchValue = event.target.value;
+        var list = hiddenAvatarList === null || hiddenAvatarList === void 0 ? void 0 : hiddenAvatarList.filter(function (avatarData) {
+          var _a, _b;
+
+          var firstName = avatarData.firstName,
+              lastName = avatarData.lastName;
+
+          if (searchComparator) {
+            return searchComparator(searchValue, avatarData);
+          }
+
+          return ((_a = firstName === null || firstName === void 0 ? void 0 : firstName.toLowerCase()) === null || _a === void 0 ? void 0 : _a.startsWith(searchValue.toLowerCase())) || ((_b = lastName === null || lastName === void 0 ? void 0 : lastName.toLowerCase()) === null || _b === void 0 ? void 0 : _b.startsWith(searchValue.toLowerCase()));
+        });
+        setSearchValue(searchValue);
+        setSearchList(list);
+      };
+
+      var onClearHandler = function onClearHandler() {
+        setSearchValue('');
+        setSearchList(hiddenAvatarList);
+      };
+
+      var popperClassName = classNames__default["default"]((_a = {}, _a['py-3'] = !withSearch, _a['pb-3'] = withSearch, _a['SelectionAvatarGroup-popper'] = true, _a['overflow-hidden'] = true, _a));
+      return /*#__PURE__*/React__namespace.createElement("div", {
+        style: {
+          width: customStyle.width
+        },
+        ref: listRef,
+        "data-test": "DesignSystem-AvatarSelection--Popover",
+        id: popoverId
+      }, withSearch && /*#__PURE__*/React__namespace.createElement(AvatarSelectionInput, {
+        placeholder: searchPlaceholder,
+        onChange: onSearchHandler,
+        value: searchValue,
+        onClear: onClearHandler
+      }), /*#__PURE__*/React__namespace.createElement("div", {
+        style: customStyle,
+        className: popperClassName
+      }, searchList.length === 0 && /*#__PURE__*/React__namespace.createElement(AvatarSelectionEmptyState, {
+        height: customStyle.maxHeight,
+        title: "No users found",
+        description: "Try modifying your search to find what you are looking for."
+      }), /*#__PURE__*/React__namespace.createElement(AvatarSelectionList, null, searchList.map(function (avatarData, index) {
+        var _a = avatarData.firstName,
+            firstName = _a === void 0 ? '' : _a,
+            _b = avatarData.lastName,
+            lastName = _b === void 0 ? '' : _b;
+        var name = firstName + " " + lastName;
+        var isSelected = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.includes(avatarData);
+        return /*#__PURE__*/React__namespace.createElement(AvatarSelectionOption, {
+          key: index,
+          value: avatarData
+        }, /*#__PURE__*/React__namespace.createElement(Checkbox, {
+          defaultChecked: isSelected,
+          checked: isSelected,
+          label: name,
+          size: "regular",
+          tabIndex: -1,
+          className: "ellipsis--noWrap",
+          "data-test": "DesignSystem-AvatarSelection--Checkbox"
+        }));
+      }))));
+    };
+
+    var AvatarSelection = function AvatarSelection(props) {
+      var _a;
+
+      var max = props.max,
+          borderColor = props.borderColor,
+          tooltipPosition = props.tooltipPosition,
+          list = props.list,
+          className = props.className,
+          size = props.size,
+          avatarRenderer = props.avatarRenderer,
+          onSelect = props.onSelect,
+          width = props.width,
+          maxHeight = props.maxHeight,
+          minHeight = props.minHeight,
+          searchPlaceholder = props.searchPlaceholder,
+          withSearch = props.withSearch,
+          searchComparator = props.searchComparator,
+          children = props.children;
+
+      var _b = React__namespace.useState([]),
+          selectedItems = _b[0],
+          setSelectedItems = _b[1];
+
+      var _c = React__namespace.useState(false),
+          openPopover = _c[0],
+          setOpenPopover = _c[1];
+
+      var _d = React__namespace.useState(),
+          focusedOption = _d[0],
+          setFocusedOption = _d[1];
+
+      var _e = React__namespace.useState(false),
+          highlightFirstItem = _e[0],
+          setHighlightFirstItem = _e[1];
+
+      var _f = React__namespace.useState(false),
+          highlightLastItem = _f[0],
+          setHighlightLastItem = _f[1];
+
+      var listRef = /*#__PURE__*/React__namespace.createRef();
+      var triggerRef = /*#__PURE__*/React__namespace.createRef();
+      React__namespace.useEffect(function () {
+        var selectedList = [];
+        list.forEach(function (avatarItem) {
+          if (avatarItem.selected) {
+            selectedList.push(avatarItem);
+          }
+        });
+        setSelectedItems(selectedList);
+      }, []);
+      React__namespace.useEffect(function () {
+        if (!openPopover) {
+          setHighlightFirstItem(false);
+          setHighlightLastItem(false);
+        } else {
+          setHighlightFirstItem(true);
+        }
+      }, [openPopover]);
+      React__namespace.useEffect(function () {
+        if (highlightFirstItem && openPopover) {
+          requestAnimationFrame(function () {
+            return focusListItem$2('down', setFocusedOption, listRef, withSearch);
+          });
+        }
+      }, [highlightFirstItem]);
+      React__namespace.useEffect(function () {
+        if (highlightLastItem && openPopover) {
+          requestAnimationFrame(function () {
+            return focusListItem$2('up', setFocusedOption, listRef, withSearch);
+          });
+        }
+      }, [highlightLastItem]);
+      var baseProps = extractBaseProps(props);
+      var hiddenAvatarCount = list.length - max;
+      var avatarStyle = {
+        backgroundColor: "" + borderColor,
+        boxShadow: "0 0 0  calc(var(--spacing-xs) + var(--spacing-s)) " + borderColor
+      };
+      var AvatarSelectionClass = classNames__default["default"]((_a = {}, _a['SelectionAvatarGroup'] = true, _a), className);
+      var searchInputHeight = 36;
+      var searchBorder = 1;
+      var customStyle = {
+        width: width,
+        minHeight: minHeight,
+        maxHeight: withSearch ? maxHeight - searchInputHeight - searchBorder : maxHeight
+      };
+      var hiddenAvatarList = list.slice(max, list.length);
+      var popoverId = "DesignSystem-AvatarSelection-Popover-" + uidGenerator();
+      var popoverProps = {
+        hiddenAvatarList: hiddenAvatarList,
+        customStyle: customStyle,
+        searchPlaceholder: searchPlaceholder,
+        searchComparator: searchComparator,
+        children: children
+      };
+      var triggerProps = {
+        size: size,
+        avatarStyle: avatarStyle,
+        hiddenAvatarCount: hiddenAvatarCount,
+        hiddenAvatarList: hiddenAvatarList
+      };
+
+      var onToggleHandler = function onToggleHandler(open) {
+        open ? setOpenPopover(true) : setOpenPopover(false);
+      };
+
+      var contextProp = {
+        listRef: listRef,
+        onSelect: onSelect,
+        withSearch: withSearch,
+        triggerRef: triggerRef,
+        selectedItems: selectedItems,
+        focusedOption: focusedOption,
+        openPopover: openPopover,
+        setSelectedItems: setSelectedItems,
+        setFocusedOption: setFocusedOption,
+        setHighlightFirstItem: setHighlightFirstItem,
+        setHighlightLastItem: setHighlightLastItem,
+        setOpenPopover: setOpenPopover,
+        popoverId: popoverId
+      };
+      return /*#__PURE__*/React__namespace.createElement(AvatarSelectionContext.Provider, {
+        value: contextProp
+      }, /*#__PURE__*/React__namespace.createElement("div", __assign({
+        "data-test": "DesignSystem-AvatarSelection"
+      }, baseProps, {
+        className: AvatarSelectionClass
+      }), /*#__PURE__*/React__namespace.createElement(SelectionAvatarsWrapper, {
+        size: size,
+        avatarStyle: avatarStyle,
+        avatarList: list.slice(0, max),
+        avatarRenderer: avatarRenderer,
+        tooltipPosition: tooltipPosition
+      }), (hiddenAvatarCount > 0 || children && hiddenAvatarCount > 0) && /*#__PURE__*/React__namespace.createElement(Popover, {
+        open: openPopover,
+        position: "bottom-end",
+        trigger: /*#__PURE__*/React__namespace.createElement(AvatarSelectionCount, __assign({}, triggerProps)),
+        triggerClass: "flex-grow-0",
+        onToggle: onToggleHandler
+      }, /*#__PURE__*/React__namespace.createElement(AvatarSelectionPopover, __assign({}, popoverProps)))));
+    };
+    AvatarSelection.displayName = 'AvatarSelection';
+    AvatarSelection.defaultProps = {
+      max: 5,
+      tooltipPosition: 'bottom',
+      borderColor: 'white',
+      size: 'regular',
+      width: 176,
+      maxHeight: 256
+    };
+    AvatarSelection.Input = AvatarSelectionInput;
+    AvatarSelection.List = AvatarSelectionList;
+    AvatarSelection.Option = AvatarSelectionOption;
+    AvatarSelection.EmptyState = AvatarSelectionEmptyState;
+
+    var ComboboxList = function ComboboxList(props) {
+      return /*#__PURE__*/React__namespace.createElement(Listbox, __assign({
+        className: "py-3"
+      }, props, {
+        role: "listbox"
+      }), props.children);
+    };
+    ComboboxList.defaultProps = {
+      type: 'option',
+      showDivider: false,
+      tagName: 'ul',
+      size: 'compressed'
+    };
+
+    var ComboboxContext = /*#__PURE__*/React__namespace.createContext({});
+
+    var handleKeyDown$2 = function handleKeyDown(event, focusedOption, setFocusedOption, setOpenPopover, inputTriggerRef, setHighlightFirstItem, setHighlightLastItem, multiSelect, listRef) {
+      switch (event.key) {
+        case 'ArrowUp':
+          event.preventDefault();
+          navigateOptions$1('up', focusedOption, setFocusedOption, listRef);
+          break;
+
+        case 'ArrowDown':
+          event.preventDefault();
+          navigateOptions$1('down', focusedOption, setFocusedOption, listRef);
+          break;
+
+        case 'Enter':
+          handleEnterKey$1(focusedOption, multiSelect, inputTriggerRef, listRef, setFocusedOption);
+          setHighlightLastItem === null || setHighlightLastItem === void 0 ? void 0 : setHighlightLastItem(false);
+          setHighlightFirstItem === null || setHighlightFirstItem === void 0 ? void 0 : setHighlightFirstItem(false);
+          break;
+
+        case 'Escape':
+          setOpenPopover === null || setOpenPopover === void 0 ? void 0 : setOpenPopover(false);
+          inputTriggerRef.current.focus();
+          setFocusedOption === null || setFocusedOption === void 0 ? void 0 : setFocusedOption(undefined);
+          break;
+      }
+    };
+
+    var handleEnterKey$1 = function handleEnterKey(focusedOption, multiSelect, inputTriggerRef, listRef, setFocusedOption) {
+      var _a;
+
+      (_a = focusedOption) === null || _a === void 0 ? void 0 : _a.click();
+
+      if (!multiSelect) {
+        inputTriggerRef.current.focus();
+      } else {
+        var listItems = listRef.current.querySelectorAll('[data-test="DesignSystem-Listbox-ItemWrapper"]');
+        var listArr = Array.from(listItems);
+        var index = listArr.findIndex(function (item) {
+          return item == focusedOption;
+        });
+
+        if (index === listArr.length - 1) {
+          listItems[0].focus();
+          setFocusedOption && setFocusedOption(listItems[0]);
+          listItems[0].scrollIntoView({
+            block: 'center'
+          });
+        }
+      }
+    };
+
+    var navigateOptions$1 = function navigateOptions(direction, focusedOption, setFocusedOption, listRef) {
+      var _a;
+
+      var listItems = listRef.current.querySelectorAll('[data-test="DesignSystem-Listbox-ItemWrapper"]');
+      var index = Array.from(listItems).findIndex(function (item) {
+        return item == focusedOption;
+      });
+
+      if (index === -1) {
+        index = direction === 'up' ? listItems.length - 1 : 0;
+      } else {
+        index = direction === 'up' ? (index - 1 + listItems.length) % listItems.length : (index + 1) % listItems.length;
+      }
+
+      var targetOption = listItems[index];
+      targetOption.focus();
+      setFocusedOption && setFocusedOption(targetOption);
+      (_a = targetOption === null || targetOption === void 0 ? void 0 : targetOption.scrollIntoView) === null || _a === void 0 ? void 0 : _a.call(targetOption, {
+        block: 'center'
+      });
+    };
+
+    var ComboboxOption = function ComboboxOption(props) {
+      var children = props.children,
+          option = props.option,
+          onClick = props.onClick,
+          rest = __rest(props, ["children", "option", "onClick"]);
+
+      var contextProp = React__namespace.useContext(ComboboxContext);
+      var onOptionClick = contextProp.onOptionClick,
+          inputValue = contextProp.inputValue,
+          focusedOption = contextProp.focusedOption,
+          setFocusedOption = contextProp.setFocusedOption,
+          setOpenPopover = contextProp.setOpenPopover,
+          inputTriggerRef = contextProp.inputTriggerRef,
+          setHighlightFirstItem = contextProp.setHighlightFirstItem,
+          setHighlightLastItem = contextProp.setHighlightLastItem,
+          multiSelect = contextProp.multiSelect,
+          listRef = contextProp.listRef;
+
+      var onClickHandler = function onClickHandler() {
+        if (onClick) {
+          return onClick(option);
+        }
+
+        return onOptionClick && onOptionClick(__assign(__assign({}, option), {
+          isSelectedOption: true
+        }));
+      };
+
+      var onKeyDownHandler = function onKeyDownHandler(event) {
+        handleKeyDown$2(event, focusedOption, setFocusedOption, setOpenPopover, inputTriggerRef, setHighlightFirstItem, setHighlightLastItem, multiSelect, listRef);
+      };
+
+      return /*#__PURE__*/React__namespace.createElement(Listbox.Item, __assign({
+        onClick: onClickHandler,
+        selected: option.label === (inputValue === null || inputValue === void 0 ? void 0 : inputValue.label),
+        onKeyDown: onKeyDownHandler,
+        tabIndex: -1,
+        role: "option",
+        "data-test": "DesignSystem-Combobox-Option"
+      }, rest), children);
+    };
+    ComboboxOption.defaultProps = {
+      tagName: 'li'
+    };
+
+    var handleKeyDown$1 = function handleKeyDown(event, setOpenPopover, setHighlightFirstItem, setHighlightLastItem) {
+      switch (event.key) {
+        case 'ArrowUp':
+          setOpenPopover === null || setOpenPopover === void 0 ? void 0 : setOpenPopover(true);
+          setHighlightLastItem === null || setHighlightLastItem === void 0 ? void 0 : setHighlightLastItem(true);
+          break;
+
+        case 'ArrowDown':
+          setOpenPopover === null || setOpenPopover === void 0 ? void 0 : setOpenPopover(true);
+          setHighlightFirstItem === null || setHighlightFirstItem === void 0 ? void 0 : setHighlightFirstItem(true);
+          break;
+
+        case 'Escape':
+        case 'Tab':
+          setOpenPopover === null || setOpenPopover === void 0 ? void 0 : setOpenPopover(false);
+          break;
+      }
+    };
+    var focusListItem$1 = function focusListItem(position, setFocusedOption, listRef) {
+      var _a, _b, _c;
+
+      var listItems = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[data-test="DesignSystem-Listbox-ItemWrapper"]');
+      var targetOption;
+
+      if (position === 'down') {
+        targetOption = listItems === null || listItems === void 0 ? void 0 : listItems[0];
+      } else {
+        targetOption = listItems[listItems.length - 1];
+      }
+
+      (_b = targetOption) === null || _b === void 0 ? void 0 : _b.focus();
+
+      if (targetOption && typeof targetOption.scrollIntoView === 'function') {
+        (_c = targetOption) === null || _c === void 0 ? void 0 : _c.scrollIntoView({
+          block: 'center',
+          behavior: 'smooth'
+        });
+      }
+
+      setFocusedOption && setFocusedOption(targetOption);
+    };
+
+    var InputBox = function InputBox(props) {
+      var contextProp = React__namespace.useContext(ComboboxContext);
+      var inputValue = contextProp.inputValue,
+          setInputValue = contextProp.setInputValue,
+          setFocusedOption = contextProp.setFocusedOption,
+          setOpenPopover = contextProp.setOpenPopover,
+          inputTriggerRef = contextProp.inputTriggerRef,
+          setHighlightFirstItem = contextProp.setHighlightFirstItem,
+          setHighlightLastItem = contextProp.setHighlightLastItem,
+          openPopover = contextProp.openPopover,
+          popoverId = contextProp.popoverId;
+
+      var onChangeHandler = function onChangeHandler(event) {
+        var value = event.target.value;
+        setFocusedOption && setFocusedOption(undefined);
+        var newValue = {
+          label: value,
+          value: value,
+          isSelectedOption: false
+        };
+        setInputValue && setInputValue(newValue);
+
+        if (value !== '') {
+          setOpenPopover === null || setOpenPopover === void 0 ? void 0 : setOpenPopover(true);
+        }
+      };
+
+      var onClearHandler = function onClearHandler(event) {
+        var _a;
+
+        event.stopPropagation();
+        var newValue = {
+          label: '',
+          value: '',
+          isSelectedOption: false
+        };
+        setInputValue && setInputValue(newValue);
+        setOpenPopover === null || setOpenPopover === void 0 ? void 0 : setOpenPopover(true);
+        (_a = props.onClear) === null || _a === void 0 ? void 0 : _a.call(props, event);
+      };
+
+      var onKeyDownHandler = function onKeyDownHandler(event) {
+        handleKeyDown$1(event, setOpenPopover, setHighlightFirstItem, setHighlightLastItem);
+      };
+
+      return /*#__PURE__*/React__namespace.createElement(Input, __assign({}, props, {
+        ref: inputTriggerRef,
+        value: inputValue === null || inputValue === void 0 ? void 0 : inputValue.label,
+        onChange: onChangeHandler,
+        onKeyDown: onKeyDownHandler,
+        onClear: onClearHandler,
+        role: "combobox",
+        "aria-haspopup": "listbox",
+        "aria-controls": popoverId,
+        "aria-label": props.placeholder || 'Combobox-Input-Trigger',
+        "aria-expanded": openPopover,
+        "data-test": "DesignSystem-Combobox-Input"
+      }));
+    };
+
+    var keyCodes = {
+      BACKSPACE: 'Backspace',
+      DELETE: 'Delete',
+      ENTER: 'Enter'
+    };
+    var MultiSelectTrigger = function MultiSelectTrigger(props) {
+      var _a, _b;
+
+      var chipOptions = props.chipOptions,
+          allowDuplicates = props.allowDuplicates,
+          disabled = props.disabled,
+          error = props.error,
+          placeholder = props.placeholder,
+          defaultValue = props.defaultValue,
+          value = props.value,
+          className = props.className,
+          autoFocus = props.autoFocus,
+          onChange = props.onChange,
+          onBlur = props.onBlur,
+          onFocus = props.onFocus,
+          onKeyDown = props.onKeyDown,
+          onInputChange = props.onInputChange,
+          tabIndex = props.tabIndex,
+          role = props.role,
+          rest = __rest(props, ["chipOptions", "allowDuplicates", "disabled", "error", "placeholder", "defaultValue", "value", "className", "autoFocus", "onChange", "onBlur", "onFocus", "onKeyDown", "onInputChange", "tabIndex", "role"]);
+
+      var inputRef = /*#__PURE__*/React__namespace.createRef();
+
+      var _c = React__namespace.useState(value || defaultValue),
+          chips = _c[0],
+          setChips = _c[1];
+
+      var _d = React__namespace.useState(''),
+          inputValue = _d[0],
+          setInputValue = _d[1];
+
+      var baseProps = extractBaseProps(props);
+      React__namespace.useEffect(function () {
+        if (value !== undefined) {
+          setChips(value);
+          setInputValue('');
+        }
+      }, [value]);
+      var ChipInputBorderClass = classNames__default["default"]((_a = {}, _a['ChipInput-border'] = true, _a['ChipInput-border--error'] = error, _a));
+      var ChipInputClass = classNames__default["default"]((_b = {
+        ChipInput: true
+      }, _b['ChipInput--disabled'] = disabled, _b['ChipInput--withChips'] = chips && chips.length > 0, _b['ChipInput--error'] = error, _b), className);
+
+      var onUpdateChips = function onUpdateChips(updatedChips) {
+        if (onChange) onChange(updatedChips);
+      };
+
+      var onChipDeleteHandler = function onChipDeleteHandler(index) {
+        var updatedChips = __spreadArrays(chips);
+
+        updatedChips.splice(index, 1);
+
+        if (!value) {
+          setChips(updatedChips);
+        }
+
+        onUpdateChips(updatedChips);
+      };
+
+      var onChipAddHandler = function onChipAddHandler() {
+        if (!inputValue) return;
+        var chip = inputValue.trim();
+        var isChipExist = chips.filter(function (item) {
+          return item.label === chip;
+        }).length > 0;
+
+        if ((allowDuplicates || !isChipExist) && chip) {
+          var updatedChips = __spreadArrays(chips, [{
+            label: chip,
+            value: chip,
+            isSelectedOption: false
+          }]);
+
+          if (!value) {
+            setChips(updatedChips);
+          }
+
+          onUpdateChips(updatedChips);
+          setInputValue('');
+        }
+      };
+
+      var onDeleteAllHandler = function onDeleteAllHandler(e) {
+        e.stopPropagation();
+        var updatedChips = [];
+
+        if (!value) {
+          setChips(updatedChips);
+        }
+
+        onUpdateChips(updatedChips);
+        setInputValue('');
+        onInputChange && onInputChange();
+      };
+
+      var onKeyDownHandler = function onKeyDownHandler(event) {
+        var chipsLength = chips.length;
+
+        switch (event.key) {
+          case keyCodes.DELETE:
+          case keyCodes.BACKSPACE:
+            if (inputValue === '' && chipsLength > 0) {
+              onChipDeleteHandler(chipsLength - 1);
+            }
+
+            break;
+
+          case keyCodes.ENTER:
+            event.preventDefault();
+            onChipAddHandler();
+            break;
+        }
+
+        onKeyDown && onKeyDown(event);
+      };
+
+      var onInputChangeHandler = function onInputChangeHandler(event) {
+        setInputValue(event.target.value);
+        onInputChange && onInputChange(event);
+      };
+
+      var onClickHandler = function onClickHandler() {
+        var _a;
+
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      };
+
+      var chipComponents = chips.map(function (chip, index) {
+        var _a = chipOptions.type,
+            type = _a === void 0 ? 'input' : _a,
+            _onClick = chipOptions.onClick,
+            rest = __rest(chipOptions, ["type", "onClick"]);
+
+        var chipLabel = typeof chip === 'string' ? chip : chip === null || chip === void 0 ? void 0 : chip.label;
+        return /*#__PURE__*/React__namespace.createElement(Chip, __assign({
+          "data-test": "DesignSystem-MultiSelectTrigger--Chip",
+          label: chipLabel,
+          name: chip,
+          type: type,
+          disabled: disabled,
+          key: index,
+          className: "my-3 mx-2",
+          onClick: function onClick() {
+            return _onClick && _onClick(chip, index);
+          },
+          onClose: function onClose() {
+            return onChipDeleteHandler(index);
+          }
+        }, rest));
+      });
+      return /*#__PURE__*/React__namespace.createElement("div", {
+        "data-test": "DesignSystem-MultiSelectTrigger--Border",
+        className: ChipInputBorderClass
+      }, /*#__PURE__*/React__namespace.createElement("div", __assign({
+        "data-test": "DesignSystem-MultiSelectTrigger"
+      }, baseProps, {
+        className: ChipInputClass,
+        onClick: onClickHandler,
+        tabIndex: disabled ? -1 : tabIndex || 0
+      }), /*#__PURE__*/React__namespace.createElement("div", {
+        className: "ChipInput-wrapper"
+      }, chips && chips.length > 0 && chipComponents, /*#__PURE__*/React__namespace.createElement("input", __assign({}, rest, {
+        "data-test": "DesignSystem-MultiSelectTrigger--Input",
+        ref: props.forwardedRef || inputRef,
+        className: "ChipInput-input",
+        autoFocus: autoFocus,
+        placeholder: chips && chips.length > 0 ? '' : placeholder,
+        disabled: disabled,
+        value: inputValue,
+        onBlur: onBlur,
+        onFocus: onFocus,
+        onChange: onInputChangeHandler,
+        onKeyDown: onKeyDownHandler,
+        role: role
+      }))), (chips.length > 0 || inputValue.length > 0) && /*#__PURE__*/React__namespace.createElement(Icon, {
+        "data-test": "DesignSystem-MultiSelectTrigger--Icon",
+        name: "close",
+        appearance: disabled ? 'disabled' : 'subtle',
+        className: "ChipInput-icon",
+        onClick: onDeleteAllHandler,
+        tabIndex: disabled ? -1 : 0
+      })));
+    };
+    MultiSelectTrigger.displayName = 'MultiSelectTrigger';
+    MultiSelectTrigger.defaultProps = {
+      chipOptions: {},
+      defaultValue: [],
+      allowDuplicates: false,
+      autoFocus: false
+    };
+
+    var ChipInputBox = function ChipInputBox(props) {
+      var contextProp = React__default["default"].useContext(ComboboxContext);
+      var chipInputValue = contextProp.chipInputValue,
+          setChipInputValue = contextProp.setChipInputValue,
+          setOpenPopover = contextProp.setOpenPopover,
+          setFocusedOption = contextProp.setFocusedOption,
+          setChipInputText = contextProp.setChipInputText,
+          setHighlightFirstItem = contextProp.setHighlightFirstItem,
+          setHighlightLastItem = contextProp.setHighlightLastItem,
+          inputTriggerRef = contextProp.inputTriggerRef,
+          openPopover = contextProp.openPopover,
+          popoverId = contextProp.popoverId;
+
+      var onChangeHandler = function onChangeHandler(chips) {
+        setFocusedOption && setFocusedOption(undefined);
+        setChipInputValue && setChipInputValue(chips);
+
+        if (chips.length === 0) {
+          setOpenPopover === null || setOpenPopover === void 0 ? void 0 : setOpenPopover(true);
+        }
+      };
+
+      var onUpdateHandler = function onUpdateHandler(event) {
+        var _a;
+
+        var value = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value;
+
+        if (!value) {
+          setChipInputText === null || setChipInputText === void 0 ? void 0 : setChipInputText('');
+          setOpenPopover === null || setOpenPopover === void 0 ? void 0 : setOpenPopover(true);
+          inputTriggerRef === null || inputTriggerRef === void 0 ? void 0 : inputTriggerRef.current.focus();
+          return;
+        }
+
+        setChipInputText && setChipInputText(value);
+
+        if (value !== '') {
+          setOpenPopover === null || setOpenPopover === void 0 ? void 0 : setOpenPopover(true);
+        }
+      };
+
+      var onKeyDownHandler = function onKeyDownHandler(event) {
+        handleKeyDown$1(event, setOpenPopover, setHighlightFirstItem, setHighlightLastItem);
+      };
+
+      return /*#__PURE__*/React__default["default"].createElement(MultiSelectTrigger, __assign({}, props, {
+        value: chipInputValue,
+        onChange: onChangeHandler,
+        onInputChange: onUpdateHandler,
+        onKeyDown: onKeyDownHandler,
+        tabIndex: -1,
+        forwardedRef: inputTriggerRef,
+        role: "combobox",
+        "aria-haspopup": "listbox",
+        "aria-controls": popoverId,
+        "aria-label": props.placeholder || 'Combobox-ChipInput-Trigger',
+        "aria-expanded": openPopover,
+        "data-test": "DesignSystem-Combobox-ChipInput"
+      }));
+    };
+
+    var ComboboxTrigger = function ComboboxTrigger(props) {
+      var multiSelect = props.multiSelect,
+          chipValue = props.chipValue,
+          value = props.value,
+          rest = __rest(props, ["multiSelect", "chipValue", "value"]);
+
+      if (multiSelect) {
+        var icon = props.icon,
+            clearButton = props.clearButton,
+            iconType = props.iconType;
+        var chipInputOptions = {
+          icon: icon,
+          clearButton: clearButton,
+          iconType: iconType
+        };
+        return /*#__PURE__*/React__namespace.createElement(ChipInputBox, __assign({
+          defaultValue: [],
+          chipOptions: __assign({}, chipInputOptions)
+        }, rest, {
+          value: chipValue
+        }));
+      }
+
+      return /*#__PURE__*/React__namespace.createElement(InputBox, __assign({}, props, {
+        value: value === null || value === void 0 ? void 0 : value.label
+      }));
+    };
+
+    var Combobox = function Combobox(props) {
+      var children = props.children,
+          onChange = props.onChange,
+          multiSelect = props.multiSelect,
+          className = props.className,
+          maxHeight = props.maxHeight,
+          width = props.width,
+          value = props.value,
+          placeholder = props.placeholder,
+          disabled = props.disabled,
+          error = props.error,
+          onBlur = props.onBlur,
+          onFocus = props.onFocus,
+          onClear = props.onClear,
+          icon = props.icon,
+          iconType = props.iconType,
+          size = props.size,
+          chipValue = props.chipValue,
+          clearButton = props.clearButton,
+          onSearch = props.onSearch;
+
+      var _a = React__namespace.useState(),
+          popoverStyle = _a[0],
+          setPopoverStyle = _a[1];
+
+      var _b = React__namespace.useState({}),
+          wrapperStyle = _b[0],
+          setWrapperStyle = _b[1];
+
+      var triggerRef = /*#__PURE__*/React__namespace.createRef();
+      var listRef = /*#__PURE__*/React__namespace.createRef();
+
+      var _c = React__namespace.useState(false),
+          openPopover = _c[0],
+          setOpenPopover = _c[1];
+
+      var _d = React__namespace.useState(false),
+          isOptionSelected = _d[0],
+          setIsOptionSelected = _d[1];
+
+      var _e = React__namespace.useState(),
+          focusedOption = _e[0],
+          setFocusedOption = _e[1];
+
+      var _f = React__namespace.useState(value || {
+        label: '',
+        value: ''
+      }),
+          inputValue = _f[0],
+          setInputValue = _f[1];
+
+      var _g = React__namespace.useState(chipValue),
+          chipInputValue = _g[0],
+          setChipInputValue = _g[1];
+
+      var _h = React__namespace.useState(''),
+          chipInputText = _h[0],
+          setChipInputText = _h[1];
+
+      var _j = React__namespace.useState(false),
+          highlightFirstItem = _j[0],
+          setHighlightFirstItem = _j[1];
+
+      var _k = React__namespace.useState(false),
+          highlightLastItem = _k[0],
+          setHighlightLastItem = _k[1];
+
+      var inputTriggerRef = React__namespace.useRef();
+      var popoverId = "DesignSystem-Combobox--Popover-" + uidGenerator();
+      React__namespace.useEffect(function () {
+        var _a;
+
+        var popperWidth = (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
+        var popperWrapperStyle = {
+          width: width || popperWidth
+        };
+        var wrapperStyle = {
+          maxHeight: maxHeight || 'var(--spacing-9)',
+          overflowY: 'auto',
+          boxSizing: 'border-box'
+        };
+        setWrapperStyle(wrapperStyle);
+        setPopoverStyle(popperWrapperStyle);
+      }, []);
+      React__namespace.useEffect(function () {
+        if (isOptionSelected) {
+          multiSelect ? setOpenPopover(true) : setOpenPopover(false);
+          setIsOptionSelected(false);
+        }
+
+        var value = multiSelect ? chipInputValue : inputValue;
+        onChange && !isOptionSelected && onChange(value);
+      }, [inputValue, chipInputValue]);
+      React__namespace.useEffect(function () {
+        if (highlightFirstItem && openPopover) {
+          requestAnimationFrame(function () {
+            return focusListItem$1('down', setFocusedOption, listRef);
+          });
+        }
+      }, [highlightFirstItem]);
+      React__namespace.useEffect(function () {
+        if (highlightLastItem && openPopover) {
+          requestAnimationFrame(function () {
+            return focusListItem$1('up', setFocusedOption, listRef);
+          });
+        }
+      }, [highlightLastItem]);
+      React__namespace.useEffect(function () {
+        if (!openPopover) {
+          setHighlightFirstItem(false);
+          setHighlightLastItem(false);
+        }
+      }, [openPopover]);
+      React__namespace.useEffect(function () {
+        onSearch && onSearch(chipInputText);
+      }, [chipInputText]);
+
+      var onOptionClick = function onOptionClick(option) {
+        setIsOptionSelected(true);
+
+        if (!multiSelect) {
+          setInputValue(option);
+          onChange && onChange(option);
+        } else {
+          var chipList = chipInputValue ? __spreadArrays(chipInputValue, [option]) : [option];
+          setChipInputValue(chipList);
+          onChange && onChange(chipList);
+        }
+      };
+
+      var outsideClickHandler = function outsideClickHandler() {
+        !multiSelect && setOpenPopover(false);
+      };
+
+      var onToggleHandler = function onToggleHandler(open) {
+        open ? setOpenPopover(true) : setOpenPopover(false);
+      };
+
+      var triggerProps = {
+        value: value,
+        placeholder: placeholder,
+        disabled: disabled,
+        error: error,
+        onBlur: onBlur,
+        onFocus: onFocus,
+        onClear: onClear,
+        icon: icon,
+        iconType: iconType,
+        size: size,
+        multiSelect: multiSelect,
+        chipValue: chipValue,
+        clearButton: clearButton
+      };
+      var contextProp = {
+        inputValue: inputValue,
+        setInputValue: setInputValue,
+        onOptionClick: onOptionClick,
+        openPopover: openPopover,
+        setOpenPopover: setOpenPopover,
+        isOptionSelected: isOptionSelected,
+        setIsOptionSelected: setIsOptionSelected,
+        chipInputValue: chipInputValue,
+        setChipInputValue: setChipInputValue,
+        focusedOption: focusedOption,
+        setFocusedOption: setFocusedOption,
+        chipInputText: chipInputText,
+        setChipInputText: setChipInputText,
+        inputTriggerRef: inputTriggerRef,
+        setHighlightFirstItem: setHighlightFirstItem,
+        setHighlightLastItem: setHighlightLastItem,
+        multiSelect: multiSelect,
+        listRef: listRef,
+        onSearch: onSearch,
+        popoverId: popoverId
+      };
+      return /*#__PURE__*/React__namespace.createElement(ComboboxContext.Provider, {
+        value: contextProp
+      }, /*#__PURE__*/React__namespace.createElement("div", {
+        ref: triggerRef,
+        className: className
+      }, /*#__PURE__*/React__namespace.createElement(OutsideClick, {
+        onOutsideClick: outsideClickHandler
+      }, /*#__PURE__*/React__namespace.createElement(Popover, {
+        open: openPopover && !disabled,
+        triggerClass: "d-block",
+        customStyle: popoverStyle,
+        onToggle: onToggleHandler,
+        trigger: /*#__PURE__*/React__namespace.createElement(ComboboxTrigger, __assign({}, triggerProps))
+      }, /*#__PURE__*/React__namespace.createElement("div", {
+        style: wrapperStyle,
+        ref: listRef,
+        id: popoverId
+      }, children && typeof children === 'function' ? children(contextProp) : children)))));
+    };
+    Combobox.List = ComboboxList;
+    Combobox.Option = ComboboxOption;
+
+    var SelectContext = /*#__PURE__*/React__namespace.createContext({});
+
+    var SelectList = function SelectList(props) {
+      var contextProp = React__namespace.useContext(SelectContext);
+      var withSearch = contextProp.withSearch,
+          minHeight = contextProp.minHeight,
+          maxHeight = contextProp.maxHeight,
+          multiSelect = contextProp.multiSelect;
+
+      var children = props.children,
+          rest = __rest(props, ["children"]);
+
+      var searchInputHeight = 33;
+      var wrapperStyle = {
+        maxHeight: withSearch ? maxHeight - searchInputHeight : maxHeight,
+        overflowY: 'auto',
+        minHeight: minHeight
+      };
+      return /*#__PURE__*/React__namespace.createElement(Listbox, __assign({
+        "aria-label": "Options item list",
+        "aria-multiselectable": multiSelect,
+        className: "my-3"
+      }, rest), /*#__PURE__*/React__namespace.createElement("div", {
+        style: wrapperStyle
+      }, children));
+    };
+    SelectList.defaultProps = {
+      type: 'option',
+      showDivider: false,
+      size: 'compressed',
+      tagName: 'ul'
+    };
+
+    var mapInitialValue = function mapInitialValue(multiSelect, selectedValue) {
+      if (multiSelect) {
+        return selectedValue && !Array.isArray(selectedValue) ? [selectedValue] : selectedValue || [];
+      } else {
+        return selectedValue || {
+          label: '',
+          value: ''
+        };
+      }
+    };
+    var elementExist = function elementExist(targetObject, mainList) {
+      if (!Array.isArray(mainList)) {
+        return targetObject.value === (mainList === null || mainList === void 0 ? void 0 : mainList.value) ? 0 : -1;
+      }
+
+      return mainList.findIndex(function (item) {
+        return item.value === targetObject.value;
+      });
+    };
+    var removeOrAddToList = function removeOrAddToList(targetObject, prevList) {
+      var newList = __spreadArrays(prevList);
+
+      var existingIndex = elementExist(targetObject, newList);
+
+      if (existingIndex !== -1) {
+        newList.splice(existingIndex, 1);
+      } else {
+        newList.push(targetObject);
+      }
+
+      return newList;
+    };
+    var computeValue = function computeValue(multiSelect, selectValue, setLabel) {
+      if (!multiSelect) {
+        return (selectValue === null || selectValue === void 0 ? void 0 : selectValue.label.trim()) || '';
+      }
+
+      var label = setLabel === null || setLabel === void 0 ? void 0 : setLabel(selectValue.length);
+
+      if (label) {
+        return label;
+      }
+
+      if (selectValue.length <= 2) {
+        return selectValue.map(function (pair) {
+          return "" + pair.label;
+        }).join(', ');
+      } else {
+        return selectValue.length + " Selected";
+      }
+    };
+    var handleKeyDownTrigger = function handleKeyDownTrigger(event, setOpenPopover, setHighlightFirstItem, setHighlightLastItem) {
+      switch (event.key) {
+        case 'Enter':
+          event.preventDefault();
+          setOpenPopover === null || setOpenPopover === void 0 ? void 0 : setOpenPopover(true);
+          setHighlightFirstItem === null || setHighlightFirstItem === void 0 ? void 0 : setHighlightFirstItem(true);
+          break;
+
+        case 'ArrowDown':
+          setOpenPopover === null || setOpenPopover === void 0 ? void 0 : setOpenPopover(true);
+          setHighlightFirstItem === null || setHighlightFirstItem === void 0 ? void 0 : setHighlightFirstItem(true);
+          break;
+
+        case 'ArrowUp':
+          setOpenPopover === null || setOpenPopover === void 0 ? void 0 : setOpenPopover(true);
+          setHighlightLastItem === null || setHighlightLastItem === void 0 ? void 0 : setHighlightLastItem(true);
+          break;
+      }
+    };
+    var focusListItem = function focusListItem(position, setFocusedOption, listRef) {
+      var _a, _b, _c;
+
+      var searchInput = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[data-test="DesignSystem-Select--Input"]');
+      var listItems = (_b = listRef.current) === null || _b === void 0 ? void 0 : _b.querySelectorAll('[data-test="DesignSystem-Listbox-ItemWrapper"]');
+      var targetOption;
+
+      if (position === 'down') {
+        targetOption = (searchInput === null || searchInput === void 0 ? void 0 : searchInput[0]) || (listItems === null || listItems === void 0 ? void 0 : listItems[0]);
+      } else {
+        targetOption = listItems === null || listItems === void 0 ? void 0 : listItems[listItems.length - 1];
+      }
+
+      (_c = targetOption) === null || _c === void 0 ? void 0 : _c.focus();
+      targetOption === null || targetOption === void 0 ? void 0 : targetOption.scrollIntoView({
+        block: 'center'
+      });
+      setFocusedOption && setFocusedOption(targetOption);
+    };
+    var handleKeyDown = function handleKeyDown(event, focusedOption, setFocusedOption, setHighlightFirstItem, setHighlightLastItem, listRef, withSearch, setOpenPopover, triggerRef) {
+      switch (event.key) {
+        case 'ArrowUp':
+          event.preventDefault();
+          navigateOptions('up', focusedOption, setFocusedOption, listRef, withSearch);
+          break;
+
+        case 'ArrowDown':
+          event.preventDefault();
+          navigateOptions('down', focusedOption, setFocusedOption, listRef, withSearch);
+          break;
+
+        case 'Enter':
+          handleEnterKey(focusedOption);
+          setHighlightLastItem === null || setHighlightLastItem === void 0 ? void 0 : setHighlightLastItem(false);
+          setHighlightFirstItem === null || setHighlightFirstItem === void 0 ? void 0 : setHighlightFirstItem(false);
+          break;
+
+        case 'Tab':
+          setHighlightLastItem === null || setHighlightLastItem === void 0 ? void 0 : setHighlightLastItem(false);
+          setHighlightFirstItem === null || setHighlightFirstItem === void 0 ? void 0 : setHighlightFirstItem(false);
+          break;
+
+        case 'Escape':
+          setOpenPopover === null || setOpenPopover === void 0 ? void 0 : setOpenPopover(false);
+          triggerRef.current.focus();
+          setFocusedOption === null || setFocusedOption === void 0 ? void 0 : setFocusedOption(undefined);
+          break;
+      }
+    };
+    var handleEnterKey = function handleEnterKey(focusedOption) {
+      var _a;
+
+      (_a = focusedOption) === null || _a === void 0 ? void 0 : _a.click();
+    };
+    var navigateOptions = function navigateOptions(direction, focusedOption, setFocusedOption, listRef, withSearch) {
+      var listItems = listRef.current.querySelectorAll('[data-test="DesignSystem-Listbox-ItemWrapper"]');
+      var index = Array.from(listItems).findIndex(function (item) {
+        return item == focusedOption;
+      });
+
+      if (index === -1) {
+        index = direction === 'up' ? listItems.length - 1 : 0;
+      } else if (withSearch && index === 0 && direction === 'up' || withSearch && index === listItems.length - 1 && direction === 'down') {
+        var searchInput = listRef.current.querySelector('[data-test="DesignSystem-Select--Input"]');
+        searchInput.focus();
+        setFocusedOption && setFocusedOption(searchInput);
+      } else {
+        index = direction === 'up' ? (index - 1 + listItems.length) % listItems.length : (index + 1) % listItems.length;
+        var targetOption = listItems[index];
+        targetOption.focus();
+        setFocusedOption && setFocusedOption(targetOption);
+        targetOption.scrollIntoView({
+          block: 'center'
+        });
+      }
+    };
+    var handleInputKeyDown = function handleInputKeyDown(event, listRef, setFocusedOption, setOpenPopover, triggerRef) {
+      var _a, _b;
+
+      var listItems = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[data-test="DesignSystem-Listbox-ItemWrapper"]');
+      var targetOption;
+
+      switch (event.key) {
+        case 'ArrowUp':
+          event.preventDefault();
+          targetOption = listItems[listItems.length - 1];
+          break;
+
+        case 'ArrowDown':
+          event.preventDefault();
+          targetOption = listItems[0];
+          break;
+
+        case 'Escape':
+          setOpenPopover === null || setOpenPopover === void 0 ? void 0 : setOpenPopover(false);
+          triggerRef.current.focus();
+          setFocusedOption === null || setFocusedOption === void 0 ? void 0 : setFocusedOption(undefined);
+          break;
+      }
+
+      (_b = targetOption) === null || _b === void 0 ? void 0 : _b.focus();
+      targetOption === null || targetOption === void 0 ? void 0 : targetOption.scrollIntoView({
+        block: 'center'
+      });
+      setFocusedOption && setFocusedOption(targetOption);
+    };
+
+    var SelectOption = function SelectOption(props) {
+      var children = props.children,
+          option = props.option,
+          checkedState = props.checkedState,
+          onClick = props.onClick,
+          _a = props.withCheckbox,
+          withCheckbox = _a === void 0 ? true : _a,
+          disabled = props.disabled,
+          rest = __rest(props, ["children", "option", "checkedState", "onClick", "withCheckbox", "disabled"]);
+
+      var contextProp = React__namespace.useContext(SelectContext);
+      var onOptionClick = contextProp.onOptionClick,
+          selectValue = contextProp.selectValue,
+          setSelectValue = contextProp.setSelectValue,
+          multiSelect = contextProp.multiSelect,
+          setIsOptionSelected = contextProp.setIsOptionSelected,
+          focusedOption = contextProp.focusedOption,
+          setFocusedOption = contextProp.setFocusedOption,
+          setHighlightFirstItem = contextProp.setHighlightFirstItem,
+          setHighlightLastItem = contextProp.setHighlightLastItem,
+          listRef = contextProp.listRef,
+          withSearch = contextProp.withSearch,
+          setOpenPopover = contextProp.setOpenPopover,
+          triggerRef = contextProp.triggerRef;
+
+      var onClickHandler = function onClickHandler() {
+        if (disabled) return;
+
+        if (onClick) {
+          onClick(option);
+          return;
+        }
+
+        var newList = multiSelect && Array.isArray(selectValue) ? removeOrAddToList(option, selectValue) : option;
+        setIsOptionSelected === null || setIsOptionSelected === void 0 ? void 0 : setIsOptionSelected(Array.isArray(newList) ? newList.length !== 0 : true);
+        setSelectValue === null || setSelectValue === void 0 ? void 0 : setSelectValue(newList);
+        onOptionClick === null || onOptionClick === void 0 ? void 0 : onOptionClick(newList);
+      };
+
+      var checked = checkedState === 'checked' || elementExist(option, selectValue) !== -1;
+      var indeterminate = checkedState === 'indeterminate';
+
+      var onKeyDownHandler = function onKeyDownHandler(event) {
+        handleKeyDown(event, focusedOption, setFocusedOption, setHighlightFirstItem, setHighlightLastItem, listRef, withSearch, setOpenPopover, triggerRef);
+      };
+
+      return /*#__PURE__*/React__namespace.createElement(Listbox.Item, __assign({
+        role: "option",
+        onClick: onClickHandler,
+        "aria-selected": checked,
+        "aria-label": "option item",
+        onKeyDown: function onKeyDown(event) {
+          return onKeyDownHandler(event);
+        },
+        selected: checked,
+        tabIndex: -1,
+        disabled: disabled,
+        "data-test": "DesignSystem-Select-Option"
+      }, rest), /*#__PURE__*/React__namespace.createElement("div", {
+        className: "d-flex align-items-center"
+      }, multiSelect && withCheckbox && /*#__PURE__*/React__namespace.createElement(Checkbox, {
+        tabIndex: -1,
+        "aria-checked": indeterminate ? 'mixed' : checked,
+        checked: checked,
+        indeterminate: indeterminate
+      }), /*#__PURE__*/React__namespace.createElement("div", {
+        className: multiSelect ? 'Select-trigger-text pt-2' : 'Select-trigger-text'
+      }, children)));
+    };
+    SelectOption.defaultProps = {
+      withCheckbox: true
+    };
+
+    var SelectTrigger = function SelectTrigger(props) {
+      var _a, _b;
+
+      var triggerSize = props.triggerSize,
+          placeholder = props.placeholder,
+          withClearButton = props.withClearButton,
+          icon = props.icon,
+          disabled = props.disabled,
+          inlineLabel = props.inlineLabel,
+          iconType = props.iconType,
+          onClear = props.onClear,
+          setLabel = props.setLabel,
+          rest = __rest(props, ["triggerSize", "placeholder", "withClearButton", "icon", "disabled", "inlineLabel", "iconType", "onClear", "setLabel"]);
+
+      var contextProp = React__namespace.useContext(SelectContext);
+      var openPopover = contextProp.openPopover,
+          selectValue = contextProp.selectValue,
+          setSelectValue = contextProp.setSelectValue,
+          isOptionSelected = contextProp.isOptionSelected,
+          setIsOptionSelected = contextProp.setIsOptionSelected,
+          multiSelect = contextProp.multiSelect,
+          setOpenPopover = contextProp.setOpenPopover,
+          setHighlightFirstItem = contextProp.setHighlightFirstItem,
+          setHighlightLastItem = contextProp.setHighlightLastItem,
+          triggerRef = contextProp.triggerRef;
+      var buttonDisabled = disabled ? 'disabled' : 'default';
+      var trimmedPlaceholder = placeholder === null || placeholder === void 0 ? void 0 : placeholder.trim();
+      var displayValue = computeValue(multiSelect, selectValue, setLabel);
+      var value = isOptionSelected && displayValue.length > 0 ? displayValue : trimmedPlaceholder;
+      var iconName = openPopover ? 'keyboard_arrow_up' : 'keyboard_arrow_down';
+
+      var onClearHandler = function onClearHandler(event) {
+        event.stopPropagation();
+        var emptyValue = multiSelect ? [] : {
+          label: '',
+          value: ''
+        };
+        setSelectValue === null || setSelectValue === void 0 ? void 0 : setSelectValue(emptyValue);
+        setIsOptionSelected === null || setIsOptionSelected === void 0 ? void 0 : setIsOptionSelected(false);
+
+        if (onClear) {
+          onClear(event);
+        }
+      };
+
+      var buttonClass = classNames__default["default"]((_a = {}, _a['Button'] = true, _a['Select-trigger'] = true, _a["Select-trigger--" + triggerSize] = triggerSize, _a['Select-trigger--placeholder'] = !isOptionSelected, _a['Select-trigger--icon'] = icon, _a['Select-trigger--open'] = openPopover, _a));
+      var textClass = classNames__default["default"]((_b = {}, _b['Text'] = true, _b['Text--regular'] = true, _b['Select-trigger-text'] = true, _b));
+      return /*#__PURE__*/React__namespace.createElement("button", __assign({
+        ref: triggerRef,
+        onKeyDown: function onKeyDown(event) {
+          return handleKeyDownTrigger(event, setOpenPopover, setHighlightFirstItem, setHighlightLastItem);
+        },
+        type: "button",
+        className: buttonClass,
+        disabled: disabled,
+        tabIndex: 0,
+        "aria-haspopup": "listbox",
+        "aria-expanded": openPopover,
+        "aria-label": "trigger",
+        "data-test": "DesignSystem-Select-trigger"
+      }, rest), /*#__PURE__*/React__namespace.createElement("div", {
+        className: "Select-trigger-wrapper"
+      }, inlineLabel && /*#__PURE__*/React__namespace.createElement(Text, {
+        appearance: "subtle",
+        className: "mr-4 white-space-nowrap"
+      }, "" + inlineLabel.trim().charAt(0).toUpperCase() + inlineLabel.trim().slice(1)), icon && !inlineLabel && /*#__PURE__*/React__namespace.createElement(Icon, {
+        appearance: buttonDisabled,
+        className: "d-flex align-items-center mr-4",
+        name: icon,
+        type: iconType
+      }), value && /*#__PURE__*/React__namespace.createElement("span", {
+        className: textClass
+      }, value)), isOptionSelected && withClearButton && /*#__PURE__*/React__namespace.createElement(Icon, {
+        appearance: buttonDisabled,
+        onClick: onClearHandler,
+        className: "align-items-center mr-2 ml-3 Select-crossButton",
+        size: 12,
+        name: "close",
+        "aria-label": "clear selected",
+        type: iconType,
+        "data-test": "DesignSystem-Select--closeIcon"
+      }), /*#__PURE__*/React__namespace.createElement(Icon, {
+        appearance: buttonDisabled,
+        name: iconName,
+        type: iconType
+      }));
+    };
+
+    SelectTrigger.defaultProps = {
+      triggerSize: 'regular',
+      placeholder: 'Select',
+      withClearButton: true
+    };
+
+    var SearchInput = function SearchInput(props) {
+      var contextProp = React__namespace.useContext(SelectContext);
+      var setWithSearch = contextProp.setWithSearch,
+          maxHeight = contextProp.maxHeight,
+          listRef = contextProp.listRef,
+          setFocusedOption = contextProp.setFocusedOption,
+          setOpenPopover = contextProp.setOpenPopover,
+          triggerRef = contextProp.triggerRef;
+
+      var onChange = props.onChange,
+          onClear = props.onClear,
+          rest = __rest(props, ["onChange", "onClear"]);
+
+      React__namespace.useEffect(function () {
+        setWithSearch === null || setWithSearch === void 0 ? void 0 : setWithSearch(true);
+      }, [maxHeight]);
+
+      var searchHandler = function searchHandler(event) {
+        if (onChange) onChange(event.target.value);
+      };
+
+      var searchClearHandler = function searchClearHandler(event) {
+        if (onClear) onClear(event);
+      };
+
+      return /*#__PURE__*/React__namespace.createElement("div", {
+        className: "Select-inputWrapper"
+      }, /*#__PURE__*/React__namespace.createElement(Input, __assign({}, rest, {
+        icon: 'search',
+        onKeyDown: function onKeyDown(event) {
+          return handleInputKeyDown(event, listRef, setFocusedOption, setOpenPopover, triggerRef);
+        },
+        autoFocus: true,
+        onChange: searchHandler,
+        onClear: searchClearHandler,
+        autoComplete: 'off',
+        "aria-label": "Search",
+        "aria-haspopup": "listbox",
+        className: "Select-input",
+        "data-test": "DesignSystem-Select--Input"
+      })));
+    };
+
+    var SelectEmptyTemplate = function SelectEmptyTemplate(props) {
+      var contextProp = React__namespace.useContext(SelectContext);
+      var maxHeight = contextProp.maxHeight,
+          withSearch = contextProp.withSearch;
+
+      var title = props.title,
+          description = props.description,
+          children = props.children,
+          rest = __rest(props, ["title", "description", "children"]);
+
+      var searchInputHeight = 33;
+      var wrapperStyle = {
+        minHeight: withSearch ? maxHeight - searchInputHeight : maxHeight
+      };
+      return /*#__PURE__*/React__namespace.createElement("div", __assign({
+        className: "px-7 d-flex justify-content-center align-items-center",
+        style: wrapperStyle,
+        "data-test": "DesignSystem-Select-EmptyState--wrapper",
+        "aria-live": "polite",
+        role: "alert"
+      }, rest), /*#__PURE__*/React__namespace.createElement("div", {
+        "aria-labelledby": title,
+        "aria-describedby": description,
+        className: "d-flex flex-column justify-content-center align-items-center"
+      }, title && /*#__PURE__*/React__namespace.createElement(Text, {
+        id: title,
+        role: "heading",
+        className: "text-align-center mb-3",
+        weight: "strong"
+      }, title), description && /*#__PURE__*/React__namespace.createElement(Text, {
+        id: description,
+        className: "text-align-center mb-6",
+        weight: "medium",
+        size: "small",
+        appearance: "subtle"
+      }, description), children && children));
+    };
+
+    var SelectFooter = function SelectFooter(props) {
+      var children = props.children,
+          rest = __rest(props, ["children"]);
+
+      return /*#__PURE__*/React__namespace.createElement("div", __assign({
+        className: "Select-buttonWrapper"
+      }, rest), children);
+    };
+
+    var Select = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
+      var children = props.children,
+          onSelect = props.onSelect,
+          width = props.width,
+          maxHeight = props.maxHeight,
+          minHeight = props.minHeight,
+          value = props.value,
+          _a = props.multiSelect,
+          multiSelect = _a === void 0 ? false : _a,
+          onOutsideClick = props.onOutsideClick,
+          triggerOptions = props.triggerOptions,
+          popoverWidth = props.popoverWidth;
+
+      var _b = React__namespace.useState(false),
+          openPopover = _b[0],
+          setOpenPopover = _b[1];
+
+      var mapValue = mapInitialValue(multiSelect, value);
+
+      var _c = React__namespace.useState(mapValue),
+          selectValue = _c[0],
+          setSelectValue = _c[1];
+
+      var _d = React__namespace.useState(false),
+          isOptionSelected = _d[0],
+          setIsOptionSelected = _d[1];
+
+      var triggerRef = /*#__PURE__*/React__namespace.createRef();
+      var listRef = React__namespace.useRef(null);
+
+      var _e = React__namespace.useState(false),
+          withSearch = _e[0],
+          setWithSearch = _e[1];
+
+      var _f = React__namespace.useState(),
+          focusedOption = _f[0],
+          setFocusedOption = _f[1];
+
+      var _g = React__namespace.useState(false),
+          highlightFirstItem = _g[0],
+          setHighlightFirstItem = _g[1];
+
+      var _h = React__namespace.useState(false),
+          highlightLastItem = _h[0],
+          setHighlightLastItem = _h[1];
+
+      var triggerStyle = {
+        width: width
+      };
+      var popoverStyle = {
+        width: popoverWidth ? popoverWidth : width
+      };
+      React__namespace.useImperativeHandle(ref, function () {
+        return {
+          setOpen: function setOpen(open) {
+            setOpenPopover === null || setOpenPopover === void 0 ? void 0 : setOpenPopover(open);
+          },
+          setFocusFirstItem: function setFocusFirstItem() {
+            if (openPopover) {
+              requestAnimationFrame(function () {
+                return focusListItem('down', setFocusedOption, listRef);
+              });
+              setHighlightFirstItem(true);
+            }
+          },
+          setFocusLastItem: function setFocusLastItem() {
+            if (openPopover) {
+              requestAnimationFrame(function () {
+                return focusListItem('up', setFocusedOption, listRef);
+              });
+              setHighlightLastItem(true);
+            }
+          }
+        };
+      });
+      React__namespace.useEffect(function () {
+        if (!openPopover) {
+          setHighlightFirstItem(false);
+          setHighlightLastItem(false);
+        }
+      }, [openPopover]);
+      React__namespace.useEffect(function () {
+        if (highlightFirstItem && openPopover) {
+          requestAnimationFrame(function () {
+            return focusListItem('down', setFocusedOption, listRef);
+          });
+        }
+      }, [highlightFirstItem]);
+      React__namespace.useEffect(function () {
+        if (highlightLastItem && openPopover) {
+          requestAnimationFrame(function () {
+            return focusListItem('up', setFocusedOption, listRef);
+          });
+        }
+      }, [highlightLastItem]);
+      React__namespace.useEffect(function () {
+        if (value) {
+          setSelectValue(value);
+          setIsOptionSelected(Array.isArray(value) ? value.length > 0 : value.value.trim().length > 0);
+        }
+      }, [value]);
+
+      var onToggleHandler = function onToggleHandler(open) {
+        if (triggerOptions && triggerOptions.disabled) {
+          setOpenPopover(false);
+        } else {
+          setHighlightFirstItem(open);
+          setOpenPopover(open);
+        }
+      };
+
+      var onOptionClick = function onOptionClick(option) {
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(option);
+        !multiSelect && setOpenPopover(false);
+      };
+
+      var onOutsideClickHandler = function onOutsideClickHandler() {
+        onOutsideClick === null || onOutsideClick === void 0 ? void 0 : onOutsideClick();
+      };
+
+      var contextProp = {
+        openPopover: openPopover,
+        setOpenPopover: setOpenPopover,
+        selectValue: selectValue,
+        setSelectValue: setSelectValue,
+        isOptionSelected: isOptionSelected,
+        setIsOptionSelected: setIsOptionSelected,
+        onOptionClick: onOptionClick,
+        maxHeight: maxHeight,
+        minHeight: minHeight,
+        withSearch: withSearch,
+        setWithSearch: setWithSearch,
+        multiSelect: multiSelect,
+        listRef: listRef,
+        triggerRef: triggerRef,
+        focusedOption: focusedOption,
+        setFocusedOption: setFocusedOption,
+        setHighlightFirstItem: setHighlightFirstItem,
+        setHighlightLastItem: setHighlightLastItem
+      };
+      return /*#__PURE__*/React__namespace.createElement(SelectContext.Provider, {
+        value: contextProp
+      }, /*#__PURE__*/React__namespace.createElement("div", {
+        "data-test": "DesignSystem-Select",
+        "aria-haspopup": "listbox",
+        "aria-expanded": openPopover,
+        style: triggerStyle
+      }, /*#__PURE__*/React__namespace.createElement(Popover, {
+        open: openPopover,
+        onToggle: onToggleHandler,
+        className: "mt-3",
+        triggerClass: "d-block",
+        customStyle: popoverStyle,
+        trigger: /*#__PURE__*/React__namespace.createElement(SelectTrigger, __assign({
+          "aria-controls": "select-listbox"
+        }, triggerOptions))
+      }, /*#__PURE__*/React__namespace.createElement(OutsideClick, {
+        onOutsideClick: onOutsideClickHandler
+      }, /*#__PURE__*/React__namespace.createElement("div", {
+        role: "listbox",
+        id: "select-listbox",
+        tabIndex: 0,
+        ref: listRef
+      }, children)))));
+    });
+    Select.displayName = 'Select';
+    Select.defaultProps = {
+      maxHeight: 256,
+      width: 176
+    };
+    Select.Option = SelectOption;
+    Select.List = SelectList;
+    Select.SearchInput = SearchInput;
+    Select.EmptyTemplate = SelectEmptyTemplate;
+    Select.Footer = SelectFooter;
+
+    var version = "2.29.0";
 
     exports.ActionCard = ActionCard;
     exports.Avatar = Avatar;
     exports.AvatarGroup = AvatarGroup;
+    exports.AvatarSelection = AvatarSelection;
     exports.Backdrop = Backdrop;
     exports.Badge = Badge;
     exports.Breadcrumbs = Breadcrumbs;
@@ -17866,6 +19858,7 @@
     exports.ChoiceList = ChoiceList;
     exports.Collapsible = Collapsible;
     exports.Column = Column;
+    exports.Combobox = Combobox;
     exports.DatePicker = DatePicker;
     exports.DateRangePicker = DateRangePicker;
     exports.Dialog = Dialog;
@@ -17919,6 +19912,7 @@
     exports.Radio = Radio;
     exports.RangeSlider = RangeSlider;
     exports.Row = Row;
+    exports.Select = Select;
     exports.SelectionCard = SelectionCard;
     exports.Sidesheet = Sidesheet;
     exports.Slider = Slider;