@innovaccer/design-system 2.28.2 → 2.29.0

package/dist/index.esm.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1709017853977 
+   * Generated on: 1710344054629 
    *      Package: @innovaccer/design-system
-   *      Version: v2.28.2
+   *      Version: v2.29.0
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -905,7 +905,9 @@ var Avatar = function Avatar(props) {
       lastName = props.lastName,
       className = props.className,
       appearance = props.appearance,
-      shape = props.shape;
+      shape = props.shape,
+      _props$role = props.role,
+      role = _props$role === void 0 ? 'presentation' : _props$role;
   var baseProps = extractBaseProps(props);
   var initials = children && typeof children === 'string' ? children.trim().slice(0, initialsLength) : "".concat(firstName ? firstName.trim()[0] : '').concat(lastName ? lastName.trim()[0] : '');
   var tooltip = children && typeof children === 'string' ? children : "".concat(firstName || '', " ").concat(lastName || '') || '';
@@ -913,7 +915,7 @@ var Avatar = function Avatar(props) {
   var AvatarClassNames = classnames((_classNames = {
     Avatar: true
   }, _defineProperty$1(_classNames, 'Avatar--square', shape === 'square'), _defineProperty$1(_classNames, "Avatar--".concat(size), shape !== 'square'), _defineProperty$1(_classNames, "Avatar--".concat(AvatarAppearance), AvatarAppearance), _defineProperty$1(_classNames, 'Avatar--disabled', !initials || !withTooltip), _classNames), className);
-  var AvatarWrapperClassNames = classnames((_classNames2 = {}, _defineProperty$1(_classNames2, 'Avatar--wrapper', shape === 'square'), _defineProperty$1(_classNames2, "Avatar--".concat(size), shape === 'square'), _classNames2), className);
+  var AvatarWrapperClassNames = classnames((_classNames2 = {}, _defineProperty$1(_classNames2, 'Avatar--wrapper', shape === 'square'), _defineProperty$1(_classNames2, "Avatar--".concat(size), shape === 'square'), _classNames2));
   var TextClassNames = classnames((_classNames3 = {}, _defineProperty$1(_classNames3, "Avatar-content--".concat(size), size), _defineProperty$1(_classNames3, "Avatar-content--".concat(AvatarAppearance), AvatarAppearance), _classNames3));
   var IconClassNames = classnames(_defineProperty$1({}, "Avatar-content--".concat(AvatarAppearance), AvatarAppearance));
   var sharedProp = {
@@ -927,7 +929,8 @@ var Avatar = function Avatar(props) {
     if (children && typeof children !== 'string') {
       return /*#__PURE__*/React.createElement("span", {
         "data-test": "DesignSystem-AvatarWrapper",
-        className: AvatarWrapperClassNames
+        className: AvatarWrapperClassNames,
+        role: role
       }, /*#__PURE__*/React.createElement(AvatarProvider, {
         value: sharedProp
       }, /*#__PURE__*/React.createElement("span", _extends$2({
@@ -939,7 +942,8 @@ var Avatar = function Avatar(props) {
 
     return /*#__PURE__*/React.createElement("span", {
       "data-test": "DesignSystem-AvatarWrapper",
-      className: AvatarWrapperClassNames
+      className: AvatarWrapperClassNames,
+      role: role
     }, /*#__PURE__*/React.createElement("span", _extends$2({
       "data-test": "DesignSystem-Avatar"
     }, baseProps, {
@@ -1354,7 +1358,7 @@ var Breadcrumbs = function Breadcrumbs(props) {
   })));
 };
 
-var _excluded$G = ["size", "appearance", "iconAlign", "tabIndex", "largeIcon", "type", "children", "icon", "expanded", "selected", "loading", "disabled", "className", "tooltip", "iconType"];
+var _excluded$R = ["size", "appearance", "iconAlign", "tabIndex", "largeIcon", "type", "children", "icon", "expanded", "selected", "loading", "disabled", "className", "tooltip", "iconType"];
 var sizeMapping$3 = {
   tiny: 12,
   regular: 16,
@@ -1383,7 +1387,7 @@ var ButtonElement = /*#__PURE__*/React.forwardRef(function (props, ref) {
       className = props.className;
       props.tooltip;
       var iconType = props.iconType,
-      rest = _objectWithoutProperties(props, _excluded$G);
+      rest = _objectWithoutProperties(props, _excluded$R);
 
   var buttonClass = classnames((_classNames = {}, _defineProperty$1(_classNames, 'Button', true), _defineProperty$1(_classNames, 'Button--expanded', expanded), _defineProperty$1(_classNames, "Button--".concat(size), size), _defineProperty$1(_classNames, "Button--".concat(size, "Square"), !children), _defineProperty$1(_classNames, "Button--".concat(appearance), appearance), _defineProperty$1(_classNames, 'Button--selected', selected && (appearance === 'basic' || appearance === 'transparent')), _defineProperty$1(_classNames, "Button--iconAlign-".concat(iconAlign), children && iconAlign), _defineProperty$1(_classNames, "".concat(className), className), _classNames));
   var iconClass = classnames((_classNames2 = {}, _defineProperty$1(_classNames2, 'Button-icon', true), _defineProperty$1(_classNames2, "Button-icon--".concat(iconAlign), children && iconAlign), _classNames2));
@@ -2237,7 +2241,9 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
       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); // if(noOfRows !== 6 && monthsInView <= 1) ?
 
@@ -2692,7 +2698,7 @@ _defineProperty$1(Calendar, "defaultProps", {
   jumpView: true
 });
 
-var _excluded$F = ["shadow", "children", "className"];
+var _excluded$Q = ["shadow", "children", "className"];
 var Card = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _classNames;
 
@@ -2700,7 +2706,7 @@ var Card = /*#__PURE__*/React.forwardRef(function (props, ref) {
       shadow = _props$shadow === void 0 ? 'shadow10' : _props$shadow,
       children = props.children,
       className = props.className,
-      rest = _objectWithoutProperties(props, _excluded$F);
+      rest = _objectWithoutProperties(props, _excluded$Q);
 
   var classes = classnames((_classNames = {
     Card: true
@@ -2717,12 +2723,12 @@ Card.defaultProps = {
   shadow: 'shadow10'
 };
 
-var _excluded$E = ["border", "children", "className"];
+var _excluded$P = ["border", "children", "className"];
 var CardSubdued = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var border = props.border,
       children = props.children,
       className = props.className,
-      rest = _objectWithoutProperties(props, _excluded$E);
+      rest = _objectWithoutProperties(props, _excluded$P);
 
   var classes = classnames(_defineProperty$1({
     CardSubdued: true
@@ -2789,7 +2795,7 @@ var isSpaceKey = function isSpaceKey(e) {
   return e.key === 'Space';
 };
 
-var _excluded$D = ["onClick", "onKeyDown", "role", "tabIndex"];
+var _excluded$O = ["onClick", "onKeyDown", "role", "tabIndex"];
 var allowed = {
   button: new Set(['Enter', 'Space', 'Spacebar', ' ']),
   link: new Set(['Enter']),
@@ -2813,7 +2819,7 @@ var useAccessibilityProps = function useAccessibilityProps(_ref) {
       _ref$role = _ref.role,
       role = _ref$role === void 0 ? 'button' : _ref$role,
       tabIndex = _ref.tabIndex,
-      rest = _objectWithoutProperties(_ref, _excluded$D);
+      rest = _objectWithoutProperties(_ref, _excluded$O);
 
   return _objectSpread2({}, onClick ? {
     onClick: onClick,
@@ -2931,21 +2937,21 @@ Icon.defaultProps = {
   size: 16
 };
 
-var _excluded$C = ["children", "componentType", "className"];
+var _excluded$N = ["children", "componentType", "className"];
 
 var GenericText = function GenericText(_ref) {
   var children = _ref.children,
       _ref$componentType = _ref.componentType,
       componentType = _ref$componentType === void 0 ? 'span' : _ref$componentType,
       className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded$C);
+      props = _objectWithoutProperties(_ref, _excluded$N);
 
   return /*#__PURE__*/React.createElement(componentType, _objectSpread2(_objectSpread2({}, props), {}, {
     className: className
   }), children);
 };
 
-var _excluded$B = ["appearance", "size", "children", "weight", "small", "className", "color"];
+var _excluded$M = ["appearance", "size", "children", "weight", "small", "className", "color"];
 var Text = function Text(props) {
   var _classNames;
 
@@ -2956,7 +2962,7 @@ var Text = function Text(props) {
       small = props.small,
       className = props.className,
       color = props.color,
-      rest = _objectWithoutProperties(props, _excluded$B);
+      rest = _objectWithoutProperties(props, _excluded$M);
 
   var classes = classnames((_classNames = {
     Text: true
@@ -3243,7 +3249,7 @@ var CheckboxIcon = function CheckboxIcon(props) {
   }
 };
 
-var _excluded$A = ["size", "tabIndex", "defaultChecked", "indeterminate", "label", "error", "disabled", "onChange", "name", "value", "className", "checked", "helpText", "id"];
+var _excluded$L = ["size", "tabIndex", "defaultChecked", "indeterminate", "label", "error", "disabled", "onChange", "name", "value", "className", "checked", "helpText", "id"];
 var Checkbox = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
   var _classNames, _classNames2, _classNames3, _classNames4, _classNames5, _classNames6;
 
@@ -3264,7 +3270,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
       helpText = props.helpText,
       _props$id = props.id,
       id = _props$id === void 0 ? "".concat(name, "-").concat(label, "-").concat(uidGenerator()) : _props$id,
-      rest = _objectWithoutProperties(props, _excluded$A);
+      rest = _objectWithoutProperties(props, _excluded$L);
 
   var ref = React.useRef(null);
   React.useImperativeHandle(forwardedRef, function () {
@@ -3345,7 +3351,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
 });
 Checkbox.displayName = 'Checkbox';
 
-var _excluded$z = ["size", "sizeXS", "sizeS", "sizeM", "sizeL", "sizeXL", "className", "children"];
+var _excluded$K = ["size", "sizeXS", "sizeS", "sizeM", "sizeL", "sizeXL", "className", "children"];
 var Column = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _classNames;
 
@@ -3357,7 +3363,7 @@ var Column = /*#__PURE__*/React.forwardRef(function (props, ref) {
       sizeXL = props.sizeXL,
       className = props.className,
       children = props.children,
-      rest = _objectWithoutProperties(props, _excluded$z);
+      rest = _objectWithoutProperties(props, _excluded$K);
 
   var classes = classnames((_classNames = {}, _defineProperty$1(_classNames, 'Col', true), _defineProperty$1(_classNames, "Col--".concat(size), size), _defineProperty$1(_classNames, "Col--xs-".concat(sizeXS), sizeXS), _defineProperty$1(_classNames, "Col--s-".concat(sizeS), sizeS), _defineProperty$1(_classNames, "Col--m-".concat(sizeM), sizeM), _defineProperty$1(_classNames, "Col--l-".concat(sizeL), sizeL), _defineProperty$1(_classNames, "Col--xl-".concat(sizeXL), sizeXL), _defineProperty$1(_classNames, "".concat(className), className), _classNames));
   return /*#__PURE__*/React.createElement("div", _extends$2({
@@ -3468,7 +3474,7 @@ var Trigger$1 = function Trigger(props) {
   }));
 };
 
-var _excluded$y = ["date", "open", "position", "inputFormat", "outputFormat", "inputOptions", "validators", "withInput", "disabledBefore", "disabledAfter", "onDateChange", "closeOnSelect", "size", "showTodayDate", "children", "view"];
+var _excluded$J = ["date", "open", "position", "inputFormat", "outputFormat", "inputOptions", "validators", "withInput", "disabledBefore", "disabledAfter", "onDateChange", "closeOnSelect", "size", "showTodayDate", "children", "view"];
 var DatePicker = /*#__PURE__*/function (_React$Component) {
   _inherits(DatePicker, _React$Component);
 
@@ -3623,7 +3629,7 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
           _this$props4$children = _this$props4.children,
           children = _this$props4$children === void 0 ? /*#__PURE__*/React.createElement(React.Fragment, null) : _this$props4$children,
           view = _this$props4.view,
-          rest = _objectWithoutProperties(_this$props4, _excluded$y);
+          rest = _objectWithoutProperties(_this$props4, _excluded$J);
 
       var date = this.state.date;
       var months = config.months;
@@ -4689,7 +4695,7 @@ function debounce$1 (delay, atBegin, callback) {
   return callback === undefined ? throttle(delay, atBegin, false) : throttle(delay, callback, atBegin !== false);
 }
 
-var _excluded$x = ["triggerSize", "placeholder", "menu", "children", "icon", "disabled", "open", "inlineLabel", "error", "iconType"];
+var _excluded$I = ["triggerSize", "placeholder", "menu", "children", "icon", "disabled", "open", "inlineLabel", "error", "iconType"];
 var DropdownButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _classNames, _classNames2;
 
@@ -4706,7 +4712,7 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
       inlineLabel = props.inlineLabel,
       error = props.error,
       iconType = props.iconType,
-      rest = _objectWithoutProperties(props, _excluded$x);
+      rest = _objectWithoutProperties(props, _excluded$I);
 
   var buttonDisabled = disabled ? 'disabled' : 'default';
   var trimmedPlaceholder = placeholder.trim();
@@ -5779,7 +5785,7 @@ var DropdownList = function DropdownList(props) {
 
 DropdownList.displayName = 'DropdownList';
 
-var _excluded$w = ["triggerOptions", "selected", "tabIndex"];
+var _excluded$H = ["triggerOptions", "selected", "tabIndex"];
 var inputRef = /*#__PURE__*/React.createRef();
 
 /**
@@ -6471,7 +6477,7 @@ var Dropdown = /*#__PURE__*/function (_React$Component) {
           triggerOptions = _this$props14$trigger === void 0 ? {} : _this$props14$trigger;
           _this$props14.selected;
           var tabIndex = _this$props14.tabIndex,
-          rest = _objectWithoutProperties(_this$props14, _excluded$w);
+          rest = _objectWithoutProperties(_this$props14, _excluded$H);
 
       var remainingOptionsLen = searchedOptionsLength - options.length;
       var firstEnabledOption = tabIndex ? tabIndex : _isSelectAllPresent(searchTerm, remainingOptionsLen, withSelectAll, withCheckbox) ? 0 : options.findIndex(function (option) {
@@ -6519,7 +6525,7 @@ _defineProperty$1(Dropdown, "defaultProps", {
   searchDebounceDuration: 300
 });
 
-var _excluded$v = ["appearance", "size", "children", "className", "color"];
+var _excluded$G = ["appearance", "size", "children", "className", "color"];
 var sizeMap = {
   s: 'h5',
   m: 'h4',
@@ -6535,7 +6541,7 @@ var Heading = function Heading(props) {
       children = props.children,
       className = props.className,
       color = props.color,
-      rest = _objectWithoutProperties(props, _excluded$v);
+      rest = _objectWithoutProperties(props, _excluded$G);
 
   var classes = classnames((_classNames = {
     Heading: true
@@ -6553,13 +6559,13 @@ Heading.defaultProps = {
   size: 'm'
 };
 
-var _excluded$u = ["className", "iconType"];
+var _excluded$F = ["className", "iconType"];
 var ActionButton$1 = function ActionButton(props) {
   var _classNames;
 
   var className = props.className,
       iconType = props.iconType,
-      rest = _objectWithoutProperties(props, _excluded$u);
+      rest = _objectWithoutProperties(props, _excluded$F);
 
   var iconClass = classnames((_classNames = {}, _defineProperty$1(_classNames, 'ActionButton', true), _defineProperty$1(_classNames, "".concat(className), className), _classNames));
   return /*#__PURE__*/React.createElement(Icon, _extends$2({
@@ -6574,7 +6580,7 @@ ActionButton$1.defaultProps = {
   type: 'rounded'
 };
 
-var _excluded$t = ["size", "type", "minWidth", "defaultValue", "name", "placeholder", "value", "icon", "inlineLabel", "required", "error", "info", "onChange", "onClick", "onClear", "onBlur", "onFocus", "onPaste", "actionIcon", "className", "autoFocus", "disabled", "readOnly", "iconType"];
+var _excluded$E = ["size", "type", "minWidth", "defaultValue", "name", "placeholder", "value", "icon", "inlineLabel", "required", "error", "info", "onChange", "onClick", "onClear", "onBlur", "onFocus", "onPaste", "actionIcon", "className", "autoFocus", "disabled", "readOnly", "iconType"];
 var sizeMapping$2 = {
   tiny: 12,
   regular: 16,
@@ -6616,7 +6622,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
       disabled = props.disabled,
       readOnly = props.readOnly,
       iconType = props.iconType,
-      rest = _objectWithoutProperties(props, _excluded$t);
+      rest = _objectWithoutProperties(props, _excluded$E);
 
   var ref = React.useRef(null);
 
@@ -6725,7 +6731,7 @@ Object.assign(Input, {
   ActionButton: ActionButton$1
 });
 
-var _excluded$s = ["size", "defaultValue", "name", "placeholder", "icon", "prefix", "suffix", "error", "min", "max", "onChange", "onClick", "onBlur", "onFocus", "className", "autoFocus", "disabled", "readOnly", "value", "showActionButton", "onKeyDown", "iconType"];
+var _excluded$D = ["size", "defaultValue", "name", "placeholder", "icon", "prefix", "suffix", "error", "min", "max", "onChange", "onClick", "onBlur", "onFocus", "className", "autoFocus", "disabled", "readOnly", "value", "showActionButton", "onKeyDown", "iconType"];
 var sizeMapping$1 = {
   regular: 16,
   large: 20
@@ -6776,7 +6782,7 @@ var MetricInput = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
       showActionButton = _props$showActionButt === void 0 ? true : _props$showActionButt,
       onKeyDown = props.onKeyDown,
       iconType = props.iconType,
-      rest = _objectWithoutProperties(props, _excluded$s);
+      rest = _objectWithoutProperties(props, _excluded$D);
 
   var ref = React.useRef(null);
   var isUncontrolled = valueProp === undefined;
@@ -6942,7 +6948,7 @@ var getDefaultValue = function getDefaultValue(mask, placeholderChar) {
   return val;
 };
 
-var _excluded$r = ["mask", "value", "placeholderChar", "validators", "clearOnEmptyBlur", "defaultValue", "mask", "error", "caption", "required", "onChange", "onPaste", "onBlur", "onFocus", "onClear", "className", "id", "helpText"];
+var _excluded$C = ["mask", "value", "placeholderChar", "validators", "clearOnEmptyBlur", "defaultValue", "mask", "error", "caption", "required", "onChange", "onPaste", "onBlur", "onFocus", "onClear", "className", "id", "helpText"];
 
 /**
  * It works as Uncontrolled Input
@@ -6971,7 +6977,7 @@ var InputMask = /*#__PURE__*/React.forwardRef(function (props, forwardRef) {
       className = props.className,
       id = props.id,
       helpText = props.helpText,
-      rest = _objectWithoutProperties(props, _excluded$r);
+      rest = _objectWithoutProperties(props, _excluded$C);
 
   var isEditable = React.useCallback(function (pos) {
     return _typeof(mask[pos]) === 'object';
@@ -7275,7 +7281,7 @@ InputMask.utils = {
 };
 var X = InputMask;
 
-var _excluded$q = ["required", "optional", "withInput", "disabled", "children", "className", "info"];
+var _excluded$B = ["required", "optional", "withInput", "disabled", "children", "className", "info"];
 
 /**
  * *NOTE: Extends props with HTMLProps<HTMLLabelElement>*
@@ -7290,7 +7296,7 @@ var Label = function Label(props) {
       children = props.children,
       className = props.className,
       info = props.info,
-      rest = _objectWithoutProperties(props, _excluded$q);
+      rest = _objectWithoutProperties(props, _excluded$B);
 
   var baseProps = extractBaseProps(props);
   var LabelClass = classnames((_classNames = {
@@ -7448,7 +7454,7 @@ var Editable = function Editable(props) {
 };
 Editable.displayName = 'Editable';
 
-var _excluded$p = ["onChange", "onClose"];
+var _excluded$A = ["onChange", "onClose"];
 var EditableDropdown = function EditableDropdown(props) {
   var _classNames2;
 
@@ -7459,7 +7465,7 @@ var EditableDropdown = function EditableDropdown(props) {
 
   var onDropdownChange = dropdownOptions.onChange,
       onDropdownClose = dropdownOptions.onClose,
-      rest = _objectWithoutProperties(dropdownOptions, _excluded$p);
+      rest = _objectWithoutProperties(dropdownOptions, _excluded$A);
 
   var _React$useState = React.useState(placeholder),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -7540,7 +7546,7 @@ EditableDropdown.defaultProps = {
   dropdownOptions: {}
 };
 
-var _excluded$o = ["children", "className", "appearance", "size", "disabled"];
+var _excluded$z = ["children", "className", "appearance", "size", "disabled"];
 var Link = function Link(props) {
   var _classNames;
 
@@ -7549,7 +7555,7 @@ var Link = function Link(props) {
       appearance = props.appearance,
       size = props.size,
       disabled = props.disabled,
-      rest = _objectWithoutProperties(props, _excluded$o);
+      rest = _objectWithoutProperties(props, _excluded$z);
 
   var classes = classnames((_classNames = {
     Link: true
@@ -8445,12 +8451,12 @@ _defineProperty$1(MultiSlider, "defaultProps", {
 
 _defineProperty$1(MultiSlider, "Handle", MultiSliderHandle);
 
-var _excluded$n = ["children", "className", "onOutsideClick"];
+var _excluded$y = ["children", "className", "onOutsideClick"];
 var OutsideClick = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       className = props.className,
       onOutsideClick = props.onOutsideClick,
-      rest = _objectWithoutProperties(props, _excluded$n);
+      rest = _objectWithoutProperties(props, _excluded$y);
 
   var innerRef = React.useRef(null);
   React.useImperativeHandle(ref, function () {
@@ -8482,7 +8488,7 @@ var OutsideClick = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 OutsideClick.displayName = 'OutsideClick';
 
-var _excluded$m = ["appearance", "children", "className", "color"];
+var _excluded$x = ["appearance", "children", "className", "color"];
 var Paragraph = function Paragraph(props) {
   var _classNames;
 
@@ -8490,7 +8496,7 @@ var Paragraph = function Paragraph(props) {
       children = props.children,
       className = props.className,
       color = props.color,
-      rest = _objectWithoutProperties(props, _excluded$m);
+      rest = _objectWithoutProperties(props, _excluded$x);
 
   var classes = classnames((_classNames = {
     Text: true
@@ -8538,7 +8544,7 @@ ProgressBar.defaultProps = {
   size: 'regular'
 };
 
-var _excluded$l = ["size", "label", "disabled", "onChange", "name", "value", "checked", "defaultChecked", "className", "helpText", "error"];
+var _excluded$w = ["size", "label", "disabled", "onChange", "name", "value", "checked", "defaultChecked", "className", "helpText", "error"];
 var Radio = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
   var _classNames, _classNames2, _classNames3;
 
@@ -8554,7 +8560,7 @@ var Radio = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
       className = props.className,
       helpText = props.helpText,
       error = props.error,
-      rest = _objectWithoutProperties(props, _excluded$l);
+      rest = _objectWithoutProperties(props, _excluded$w);
 
   var ref = React.useRef(null);
   React.useImperativeHandle(forwardedRef, function () {
@@ -8605,11 +8611,11 @@ var Radio = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
 });
 Radio.displayName = 'Radio';
 
-var _excluded$k = ["className", "children"];
+var _excluded$v = ["className", "children"];
 var Row = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var className = props.className,
       children = props.children,
-      rest = _objectWithoutProperties(props, _excluded$k);
+      rest = _objectWithoutProperties(props, _excluded$v);
 
   var classes = classnames(_defineProperty$1({
     Row: true
@@ -8726,13 +8732,13 @@ Spinner.defaultProps = {
   size: 'medium'
 };
 
-var _excluded$j = ["value", "defaultValue", "onRelease", "onChange"];
+var _excluded$u = ["value", "defaultValue", "onRelease", "onChange"];
 var Slider = function Slider(props) {
   var valueProp = props.value,
       defaultValue = props.defaultValue,
       onRelease = props.onRelease,
       onChange = props.onChange,
-      rest = _objectWithoutProperties(props, _excluded$j);
+      rest = _objectWithoutProperties(props, _excluded$u);
 
   var _React$useState = React.useState(valueProp === undefined ? defaultValue : valueProp),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -8765,7 +8771,7 @@ Slider.defaultProps = _objectSpread2(_objectSpread2({}, MultiSlider.defaultProps
   defaultValue: 0
 });
 
-var _excluded$i = ["value", "defaultValue", "onChange", "onRelease"];
+var _excluded$t = ["value", "defaultValue", "onChange", "onRelease"];
 var RangeIndex;
 
 (function (RangeIndex) {
@@ -8778,7 +8784,7 @@ var RangeSlider = function RangeSlider(props) {
       defaultValue = props.defaultValue,
       onChange = props.onChange,
       onRelease = props.onRelease,
-      rest = _objectWithoutProperties(props, _excluded$i);
+      rest = _objectWithoutProperties(props, _excluded$t);
 
   var _React$useState = React.useState(valueProp === undefined ? defaultValue : valueProp),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -8814,7 +8820,7 @@ RangeSlider.defaultProps = _objectSpread2(_objectSpread2({}, MultiSlider.default
   defaultValue: [0, 10]
 });
 
-var _excluded$h = ["appearance", "children", "className", "color"];
+var _excluded$s = ["appearance", "children", "className", "color"];
 var Subheading = function Subheading(props) {
   var _classNames;
 
@@ -8822,7 +8828,7 @@ var Subheading = function Subheading(props) {
       children = props.children,
       className = props.className,
       color = props.color,
-      rest = _objectWithoutProperties(props, _excluded$h);
+      rest = _objectWithoutProperties(props, _excluded$s);
 
   var classes = classnames((_classNames = {
     Subheading: true
@@ -8839,7 +8845,7 @@ Subheading.defaultProps = {
   appearance: 'default'
 };
 
-var _excluded$g = ["size", "defaultChecked", "disabled", "onChange", "name", "value", "className", "appearance", "checked"];
+var _excluded$r = ["size", "defaultChecked", "disabled", "onChange", "name", "value", "className", "appearance", "checked"];
 
 /**
  * ######Switch has two types:
@@ -8859,7 +8865,7 @@ var Switch = /*#__PURE__*/React.forwardRef(function (props, ref) {
       className = props.className;
       props.appearance;
       var checkedProp = props.checked,
-      rest = _objectWithoutProperties(props, _excluded$g);
+      rest = _objectWithoutProperties(props, _excluded$r);
 
   var _React$useState = React.useState(checkedProp === undefined ? defaultChecked : checkedProp),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -8898,7 +8904,7 @@ var Switch = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 Switch.displayName = 'Switch';
 
-var _excluded$f = ["rows", "resize", "disabled", "name", "placeholder", "value", "defaultValue", "required", "error", "onChange", "onClick", "onBlur", "onFocus", "className"];
+var _excluded$q = ["rows", "resize", "disabled", "name", "placeholder", "value", "defaultValue", "required", "error", "onChange", "onClick", "onBlur", "onFocus", "className"];
 var Textarea = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _classNames;
 
@@ -8918,7 +8924,7 @@ var Textarea = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onBlur = props.onBlur,
       onFocus = props.onFocus,
       className = props.className,
-      rest = _objectWithoutProperties(props, _excluded$f);
+      rest = _objectWithoutProperties(props, _excluded$q);
 
   var classes = classnames((_classNames = {}, _defineProperty$1(_classNames, 'Textarea', true), _defineProperty$1(_classNames, 'Textarea--resize', resize), _defineProperty$1(_classNames, 'Textarea--error', error), _classNames), className);
   return /*#__PURE__*/React.createElement("textarea", _extends$2({
@@ -14047,7 +14053,7 @@ _defineProperty$1(PopperWrapper, "defaultProps", {
   style: {}
 });
 
-var _excluded$e = ["position", "customStyle", "dark", "children", "onToggle", "className", "hideOnReferenceEscape", "boundaryElement"];
+var _excluded$p = ["position", "customStyle", "dark", "children", "onToggle", "className", "hideOnReferenceEscape", "boundaryElement"];
 var propsList = ['appendToBody', 'trigger', 'hoverable', 'on', 'open', 'closeOnBackdropClick', 'offset', 'closeOnScroll'];
 var Popover = function Popover(props) {
   var position = props.position,
@@ -14059,7 +14065,7 @@ var Popover = function Popover(props) {
       hideOnReferenceEscape = props.hideOnReferenceEscape,
       _props$boundaryElemen = props.boundaryElement,
       boundaryElement = _props$boundaryElemen === void 0 ? document.body : _props$boundaryElemen,
-      rest = _objectWithoutProperties(props, _excluded$e);
+      rest = _objectWithoutProperties(props, _excluded$p);
 
   var _React$useState = React.useState(!!props.open),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -14111,8 +14117,8 @@ Popover.defaultProps = Object.assign({}, filterProps(PopperWrapper.defaultProps,
   customStyle: {}
 });
 
-var _excluded$d = ["type", "onClick"];
-var keyCodes = {
+var _excluded$o = ["type", "onClick"];
+var keyCodes$1 = {
   BACKSPACE: 'Backspace',
   DELETE: 'Delete',
   ENTER: 'Enter'
@@ -14201,15 +14207,15 @@ var ChipInput = function ChipInput(props) {
     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;
@@ -14230,7 +14236,7 @@ var ChipInput = function ChipInput(props) {
     var _chipOptions$type = chipOptions.type,
         type = _chipOptions$type === void 0 ? 'input' : _chipOptions$type,
         _onClick = chipOptions.onClick,
-        rest = _objectWithoutProperties(chipOptions, _excluded$d);
+        rest = _objectWithoutProperties(chipOptions, _excluded$o);
 
     return /*#__PURE__*/React.createElement(Chip, _extends$2({
       "data-test": "DesignSystem-ChipInput--Chip",
@@ -14743,7 +14749,7 @@ var HorizontalNav = function HorizontalNav(props) {
   }), list);
 };
 
-var _excluded$c = ["children", "tooltip", "showTooltip"];
+var _excluded$n = ["children", "tooltip", "showTooltip"];
 var tooltipPropsList = ['trigger', 'on', 'open', 'offset', 'onToggle', 'dark', 'customStyle', 'closeOnBackdropClick', 'hideOnReferenceEscape', 'closeOnScroll'];
 var positionValue = {
   bottom: 'bottom',
@@ -14759,7 +14765,7 @@ var Tooltip = function Tooltip(props) {
   var children = props.children,
       tooltip = props.tooltip,
       showTooltip = props.showTooltip,
-      rest = _objectWithoutProperties(props, _excluded$c);
+      rest = _objectWithoutProperties(props, _excluded$n);
 
   if (!showTooltip) {
     // If showTooltip is false skip the Popover and return the children directly
@@ -14841,7 +14847,7 @@ Dialog.defaultProps = {
   secondaryButtonAppearance: 'basic'
 };
 
-var _excluded$b = ["label"];
+var _excluded$m = ["label"];
 var OverlayFooter = function OverlayFooter(props) {
   var open = props.open,
       className = props.className,
@@ -14878,7 +14884,7 @@ var OverlayFooter = function OverlayFooter(props) {
       className: classes
     }), actions.map(function (_ref, index) {
       _ref.label;
-          var options = _objectWithoutProperties(_ref, _excluded$b);
+          var options = _objectWithoutProperties(_ref, _excluded$m);
 
       return /*#__PURE__*/React.createElement(Button, _extends$2({
         type: "button"
@@ -16239,7 +16245,7 @@ Pagination.defaultProps = {
   pageJumpDebounceDuration: 750
 };
 
-var _excluded$a = ["onChange"];
+var _excluded$l = ["onChange"];
 var EditableInput = function EditableInput(props) {
   var _classNames2, _classNames4;
 
@@ -16253,7 +16259,7 @@ var EditableInput = function EditableInput(props) {
       className = props.className;
 
   var onInputChange = inputOptions.onChange,
-      rest = _objectWithoutProperties(inputOptions, _excluded$a);
+      rest = _objectWithoutProperties(inputOptions, _excluded$l);
 
   var _React$useState = React.useState(props.value),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -16416,8 +16422,8 @@ EditableInput.defaultProps = {
   inputOptions: {}
 };
 
-var _excluded$9 = ["onChange", "chipOptions"],
-    _excluded2$1 = ["onClick"];
+var _excluded$k = ["onChange", "chipOptions"],
+    _excluded2$2 = ["onClick"];
 var EditableChipInput = function EditableChipInput(props) {
   var _classNames3;
 
@@ -16430,10 +16436,10 @@ var EditableChipInput = function EditableChipInput(props) {
   var onChipInputChange = chipInputOptions.onChange,
       _chipInputOptions$chi = chipInputOptions.chipOptions,
       chipOptions = _chipInputOptions$chi === void 0 ? {} : _chipInputOptions$chi,
-      rest = _objectWithoutProperties(chipInputOptions, _excluded$9);
+      rest = _objectWithoutProperties(chipInputOptions, _excluded$k);
 
   var _onClick = chipOptions.onClick,
-      chipObject = _objectWithoutProperties(chipOptions, _excluded2$1);
+      chipObject = _objectWithoutProperties(chipOptions, _excluded2$2);
 
   var _React$useState = React.useState(props.value),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -17246,7 +17252,7 @@ var getCustomDates = function getCustomDates() {
   };
 };
 
-var _excluded$8 = ["startDate", "endDate", "yearNav", "monthNav", "open", "inputFormat", "outputFormat", "startInputOptions", "endInputOptions", "validators", "withInput", "position", "disabledBefore", "disabledAfter", "onRangeChange", "rangeLimit"];
+var _excluded$j = ["startDate", "endDate", "yearNav", "monthNav", "open", "inputFormat", "outputFormat", "startInputOptions", "endInputOptions", "validators", "withInput", "position", "disabledBefore", "disabledAfter", "onRangeChange", "rangeLimit"];
 var DateRangePicker = /*#__PURE__*/function (_React$Component) {
   _inherits(DateRangePicker, _React$Component);
 
@@ -17516,7 +17522,7 @@ var DateRangePicker = /*#__PURE__*/function (_React$Component) {
           disabledAfter = _this$props6.disabledAfter;
           _this$props6.onRangeChange;
           var rangeLimit = _this$props6.rangeLimit,
-          rest = _objectWithoutProperties(_this$props6, _excluded$8);
+          rest = _objectWithoutProperties(_this$props6, _excluded$j);
 
       var _this$state3 = this.state,
           startDate = _this$state3.startDate,
@@ -18420,8 +18426,8 @@ function _fromFileEntry() {
   return _fromFileEntry.apply(this, arguments);
 }
 
-var _excluded$7 = ["refKey", "onKeyDown", "onFocus", "onBlur", "onClick", "onDragEnterCallback", "onDragOverCallback", "onDragLeaveCallback", "onDropCallback"],
-    _excluded2 = ["refKey", "onChange", "onClick"];
+var _excluded$i = ["refKey", "onKeyDown", "onFocus", "onBlur", "onClick", "onDragEnterCallback", "onDragOverCallback", "onDragLeaveCallback", "onDropCallback"],
+    _excluded2$1 = ["refKey", "onChange", "onClick"];
 var initialState = {
   isFocused: false,
   isFileDialogActive: false,
@@ -18698,7 +18704,7 @@ var DropzoneBase = function DropzoneBase(props) {
           onDragOverCallback = _ref.onDragOverCallback,
           onDragLeaveCallback = _ref.onDragLeaveCallback,
           onDropCallback = _ref.onDropCallback,
-          rest = _objectWithoutProperties(_ref, _excluded$7);
+          rest = _objectWithoutProperties(_ref, _excluded$i);
 
       return _objectSpread2(_defineProperty$1({
         onDragEnter: composeDragHandler(composeEventHandlers(onDragEnterCallback, onDragEnterCb)),
@@ -18718,7 +18724,7 @@ var DropzoneBase = function DropzoneBase(props) {
           refKey = _ref2$refKey === void 0 ? 'ref' : _ref2$refKey,
           onChange = _ref2.onChange,
           onClick = _ref2.onClick,
-          rest = _objectWithoutProperties(_ref2, _excluded2);
+          rest = _objectWithoutProperties(_ref2, _excluded2$1);
 
       var inputProps = _defineProperty$1({
         accept: accept,
@@ -20896,7 +20902,7 @@ Header.defaultProps = {
   showFilters: true
 };
 
-var _excluded$6 = ["children"];
+var _excluded$h = ["children"];
 
 var defaultErrorTemplate = function defaultErrorTemplate(props) {
   var _props$errorType = props.errorType,
@@ -21281,7 +21287,7 @@ var Table = /*#__PURE__*/function (_React$Component) {
 
       var _ref = headerOptions,
           headerChildren = _ref.children,
-          headerAttr = _objectWithoutProperties(_ref, _excluded$6);
+          headerAttr = _objectWithoutProperties(_ref, _excluded$h);
 
       var classes = className ? " ".concat(className) : '';
       var totalRecords = this.state.totalRecords;
@@ -21845,7 +21851,7 @@ FileList.defaultProps = {
 };
 FileList.displayName = 'FileList';
 
-var _excluded$5 = ["type", "fields", "placeholder", "autoFocus", "onComplete", "onFocus", "onBlur", "className", "value"];
+var _excluded$g = ["type", "fields", "placeholder", "autoFocus", "onComplete", "onFocus", "onBlur", "className", "value"];
 var KEY_CODE = {
   backspace: 'Backspace',
   left: 'ArrowLeft',
@@ -21870,7 +21876,7 @@ var VerificationCodeInput = function VerificationCodeInput(props) {
       onBlur = props.onBlur,
       className = props.className;
       props.value;
-      var rest = _objectWithoutProperties(props, _excluded$5);
+      var rest = _objectWithoutProperties(props, _excluded$g);
 
   var initialValues = useMemo(function () {
     if (props.value && props.value.length) {
@@ -22281,7 +22287,7 @@ var HelpText = function HelpText(props) {
 };
 HelpText.displayName = 'HelpText';
 
-var _excluded$4 = ["children", "type", "className", "disabled", "tabIndex", "icon", "subtle", "size", "iconAlign", "iconType"];
+var _excluded$f = ["children", "type", "className", "disabled", "tabIndex", "icon", "subtle", "size", "iconAlign", "iconType"];
 var sizeMapping = {
   tiny: 12,
   regular: 16
@@ -22299,7 +22305,7 @@ var LinkButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
       size = props.size,
       iconAlign = props.iconAlign,
       iconType = props.iconType,
-      rest = _objectWithoutProperties(props, _excluded$4);
+      rest = _objectWithoutProperties(props, _excluded$f);
 
   var buttonClass = classnames((_classNames = {}, _defineProperty$1(_classNames, 'LinkButton', true), _defineProperty$1(_classNames, "LinkButton--".concat(size), size), _defineProperty$1(_classNames, 'LinkButton--default', !subtle), _defineProperty$1(_classNames, 'LinkButton--subtle', subtle), _defineProperty$1(_classNames, "LinkButton--iconAlign-".concat(iconAlign), children && iconAlign), _defineProperty$1(_classNames, "".concat(className), className), _classNames));
   var iconClass = classnames((_classNames2 = {}, _defineProperty$1(_classNames2, 'LinkButton-icon', true), _defineProperty$1(_classNames2, "LinkButton-icon--".concat(iconAlign), children && iconAlign), _classNames2));
@@ -22326,7 +22332,7 @@ LinkButton.defaultProps = {
   iconAlign: 'left'
 };
 
-var _excluded$3 = ["children", "disabled", "className", "zIndex", "onClick"];
+var _excluded$e = ["children", "disabled", "className", "zIndex", "onClick"];
 var ActionCard = function ActionCard(props) {
   var _classNames;
 
@@ -22335,7 +22341,7 @@ var ActionCard = function ActionCard(props) {
       className = props.className,
       zIndex = props.zIndex,
       onClick = props.onClick,
-      rest = _objectWithoutProperties(props, _excluded$3);
+      rest = _objectWithoutProperties(props, _excluded$e);
 
   var classes = classnames((_classNames = {}, _defineProperty$1(_classNames, 'ActionCard', true), _defineProperty$1(_classNames, 'ActionCard--disabled', disabled), _classNames), className);
 
@@ -22437,7 +22443,7 @@ function useSingleSelect() {
   };
 }
 
-var _excluded$2 = ["children", "onClick", "disabled", "id", "cardValue", "overlayZIndex", "selected", "className"];
+var _excluded$d = ["children", "onClick", "disabled", "id", "cardValue", "overlayZIndex", "selected", "className"];
 var SelectionCard = function SelectionCard(props) {
   var _classNames;
 
@@ -22449,7 +22455,7 @@ var SelectionCard = function SelectionCard(props) {
       overlayZIndex = props.overlayZIndex,
       selected = props.selected,
       className = props.className,
-      rest = _objectWithoutProperties(props, _excluded$2);
+      rest = _objectWithoutProperties(props, _excluded$d);
 
   var classes = classnames((_classNames = {}, _defineProperty$1(_classNames, 'Selection-card', true), _defineProperty$1(_classNames, 'Selection-card--selected', selected), _defineProperty$1(_classNames, 'Selection-card--disabled', disabled && !selected), _defineProperty$1(_classNames, 'Selection-card--selected-disabled', disabled && selected), _classNames), className);
 
@@ -23257,7 +23263,8 @@ var ListBody = function ListBody(props) {
       className = props.className,
       disabled = props.disabled,
       selected = props.selected,
-      activated = props.activated;
+      activated = props.activated,
+      tabIndex = props.tabIndex;
   var contextProp = React.useContext(ListboxContext);
   var size = contextProp.size,
       type = contextProp.type,
@@ -23268,7 +23275,7 @@ var ListBody = function ListBody(props) {
   return /*#__PURE__*/React.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"
@@ -23360,7 +23367,7 @@ var NestedList = function NestedList(props) {
   }, nestedBody));
 };
 
-var _excluded$1 = ["nestedBody", "expanded", "id", "onClick", "value", "tagName"];
+var _excluded$c = ["nestedBody", "expanded", "id", "onClick", "value", "tagName"];
 var ListboxItem = function ListboxItem(props) {
   var nestedBody = props.nestedBody,
       expanded = props.expanded,
@@ -23368,7 +23375,7 @@ var ListboxItem = function ListboxItem(props) {
       onClick = props.onClick,
       value = props.value,
       Tag = props.tagName,
-      rest = _objectWithoutProperties(props, _excluded$1);
+      rest = _objectWithoutProperties(props, _excluded$c);
 
   var contextProp = React.useContext(ListboxContext);
   var showDivider = contextProp.showDivider,
@@ -23381,13 +23388,13 @@ var ListboxItem = function ListboxItem(props) {
   var tagClass = classnames(_defineProperty$1({}, 'Listbox-item-wrapper', !draggable));
   return /*#__PURE__*/React.createElement(Tag, _extends$2({
     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.createElement(ListBody, props), nestedBody && /*#__PURE__*/React.createElement(NestedList, {
+  }, rest), /*#__PURE__*/React.createElement(ListBody, props), nestedBody && /*#__PURE__*/React.createElement(NestedList, {
     expanded: expanded,
     nestedBody: nestedBody
   }), showDivider && /*#__PURE__*/React.createElement(Divider, {
@@ -23399,7 +23406,7 @@ ListboxItem.defaultProps = {
   tagName: 'li'
 };
 
-var _excluded = ["children", "className", "draggable", "size", "type", "showDivider", "tagName"];
+var _excluded$b = ["children", "className", "draggable", "size", "type", "showDivider", "tagName"];
 var ListboxContext = /*#__PURE__*/React.createContext({
   size: 'standard',
   type: 'resource',
@@ -23415,7 +23422,7 @@ var Listbox = function Listbox(props) {
       type = props.type,
       showDivider = props.showDivider,
       Tag = props.tagName,
-      rest = _objectWithoutProperties(props, _excluded);
+      rest = _objectWithoutProperties(props, _excluded$b);
 
   var baseProps = extractBaseProps(props);
   var classes = classnames({
@@ -23609,6 +23616,2038 @@ var TextField = function TextField(props) {
 };
 TextField.displayName = 'TextField';
 
-var version = "2.28.2";
+var _excluded$a = ["icon", "image"];
+var SelectionAvatar = function SelectionAvatar(props) {
+  var icon = props.icon,
+      image = props.image,
+      rest = _objectWithoutProperties(props, _excluded$a);
+
+  return /*#__PURE__*/React.createElement(Avatar, _extends$2({
+    role: "checkbox"
+  }, rest, {
+    withTooltip: true,
+    className: "cursor-pointer"
+  }), image || icon);
+};
+
+var AvatarSelectionContext = /*#__PURE__*/React.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.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 && selectedItems.includes(item)) {
+      list = selectedItems.filter(function (selectedItem) {
+        return selectedItem !== item;
+      });
+    } else {
+      var _list;
+
+      (_list = list) === null || _list === void 0 ? void 0 : _list.push(item);
+    }
+
+    list && (setSelectedItems === null || setSelectedItems === void 0 ? void 0 : setSelectedItems(_toConsumableArray(list)));
+    onSelect && onSelect(list);
+  };
+
+  var handleKeyDown = function handleKeyDown(event, item) {
+    switch (event.key) {
+      case 'Enter':
+        onClickHandler(item);
+        break;
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, avatarList.map(function (avatarItem, index) {
+    var _classNames;
+
+    var appearance = avatarItem.appearance,
+        firstName = avatarItem.firstName,
+        lastName = avatarItem.lastName,
+        icon = avatarItem.icon,
+        image = avatarItem.image;
+    var GroupClass = classnames((_classNames = {}, _defineProperty$1(_classNames, "SelectionAvatarGroup-item", true), _defineProperty$1(_classNames, "SelectionAvatarGroup-item--selected", selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.includes(avatarItem)), _classNames));
+
+    if (avatarRenderer) {
+      return avatarRenderer(avatarItem);
+    }
+
+    return /*#__PURE__*/React.createElement("span", {
+      key: index,
+      className: "SelectionAvatarGroup-wrapper"
+    }, /*#__PURE__*/React.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.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 _listRef$current2, _targetOption, _targetOption2, _targetOption2$scroll;
+
+  if (withSearch && position === 'down') {
+    var _listRef$current, _searchInput$;
+
+    var searchInput = (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.querySelectorAll('[data-test="DesignSystem-AvatarSelection--Input"]');
+    searchInput && ((_searchInput$ = searchInput[0]) === null || _searchInput$ === void 0 ? void 0 : _searchInput$.focus());
+    setFocusedOption === null || setFocusedOption === void 0 ? void 0 : setFocusedOption(searchInput);
+    return;
+  }
+
+  var listItems = (_listRef$current2 = listRef.current) === null || _listRef$current2 === void 0 ? void 0 : _listRef$current2.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];
+  }
+
+  (_targetOption = targetOption) === null || _targetOption === void 0 ? void 0 : _targetOption.focus();
+  (_targetOption2 = targetOption) === null || _targetOption2 === void 0 ? void 0 : (_targetOption2$scroll = _targetOption2.scrollIntoView) === null || _targetOption2$scroll === void 0 ? void 0 : _targetOption2$scroll.call(_targetOption2, {
+    block: 'center'
+  });
+  setFocusedOption && setFocusedOption(targetOption);
+};
+
+var AvatarSelectionCount = function AvatarSelectionCount(props) {
+  var _classNames;
+
+  var hiddenAvatarCount = props.hiddenAvatarCount,
+      avatarStyle = props.avatarStyle,
+      size = props.size,
+      hiddenAvatarList = props.hiddenAvatarList;
+  var contextProp = React.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 _React$useState = React.useState(0),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      selectedItemCount = _React$useState2[0],
+      setSelectedItemCount = _React$useState2[1];
+
+  var wrapperClassName = classnames((_classNames = {}, _defineProperty$1(_classNames, 'SelectionAvatarCount-wrapper', true), _defineProperty$1(_classNames, 'SelectionAvatarCount--selected', selectedItemCount > 0), _classNames));
+  React.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.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.createElement(Avatar, {
+    size: size,
+    appearance: "secondary",
+    className: "SelectionAvatarCount cursor-pointer"
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: "overflow-hidden"
+  }, "+".concat(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) {
+  focusedOption === null || focusedOption === void 0 ? void 0 : focusedOption.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 _listRef$current, _targetOption, _targetOption2, _targetOption2$scroll;
+
+  var listItems = (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.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;
+  }
+
+  (_targetOption = targetOption) === null || _targetOption === void 0 ? void 0 : _targetOption.focus();
+  (_targetOption2 = targetOption) === null || _targetOption2 === void 0 ? void 0 : (_targetOption2$scroll = _targetOption2.scrollIntoView) === null || _targetOption2$scroll === void 0 ? void 0 : _targetOption2$scroll.call(_targetOption2, {
+    block: 'center'
+  });
+  setFocusedOption && setFocusedOption(targetOption);
+};
+
+var AvatarSelectionInput = function AvatarSelectionInput(props) {
+  var contextProp = React.useContext(AvatarSelectionContext);
+  var listRef = contextProp.listRef,
+      setFocusedOption = contextProp.setFocusedOption,
+      setOpenPopover = contextProp.setOpenPopover,
+      triggerRef = contextProp.triggerRef;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "SelectionAvatar-inputWrapper"
+  }, /*#__PURE__*/React.createElement(Input, _extends$2({
+    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.createElement(Listbox, props, props.children);
+};
+AvatarSelectionList.defaultProps = {
+  type: 'option',
+  showDivider: false,
+  size: 'compressed',
+  tagName: 'ul'
+};
+
+var _excluded$9 = ["children", "value"];
+var AvatarSelectionOption = function AvatarSelectionOption(props) {
+  var children = props.children,
+      value = props.value,
+      rest = _objectWithoutProperties(props, _excluded$9);
+
+  var contextProp = React.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 ? _toConsumableArray(selectedItems) : [];
+
+    if (selectedItems !== null && selectedItems !== 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(_toConsumableArray(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.createElement(Listbox.Item, _extends$2({
+    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.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.createElement(Text, {
+    className: "text-align-center mb-3",
+    weight: "strong"
+  }, title), description && /*#__PURE__*/React.createElement(Text, {
+    className: "text-align-center mb-6",
+    weight: "medium",
+    size: "small",
+    appearance: "subtle"
+  }, description));
+};
+
+var AvatarSelectionPopover = function AvatarSelectionPopover(props) {
+  var _classNames;
+
+  var hiddenAvatarList = props.hiddenAvatarList,
+      customStyle = props.customStyle,
+      searchPlaceholder = props.searchPlaceholder,
+      searchComparator = props.searchComparator,
+      children = props.children;
+
+  var _React$useState = React.useState(hiddenAvatarList),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      searchList = _React$useState2[0],
+      setSearchList = _React$useState2[1];
+
+  var _React$useState3 = React.useState(''),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      searchValue = _React$useState4[0],
+      setSearchValue = _React$useState4[1];
+
+  var contextProp = React.useContext(AvatarSelectionContext);
+  var selectedItems = contextProp.selectedItems,
+      listRef = contextProp.listRef,
+      withSearch = contextProp.withSearch,
+      popoverId = contextProp.popoverId;
+
+  if (children) {
+    return /*#__PURE__*/React.createElement(React.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 _firstName$toLowerCas, _lastName$toLowerCase;
+
+      var firstName = avatarData.firstName,
+          lastName = avatarData.lastName;
+
+      if (searchComparator) {
+        return searchComparator(searchValue, avatarData);
+      }
+
+      return (firstName === null || firstName === void 0 ? void 0 : (_firstName$toLowerCas = firstName.toLowerCase()) === null || _firstName$toLowerCas === void 0 ? void 0 : _firstName$toLowerCas.startsWith(searchValue.toLowerCase())) || (lastName === null || lastName === void 0 ? void 0 : (_lastName$toLowerCase = lastName.toLowerCase()) === null || _lastName$toLowerCase === void 0 ? void 0 : _lastName$toLowerCase.startsWith(searchValue.toLowerCase()));
+    });
+    setSearchValue(searchValue);
+    setSearchList(list);
+  };
+
+  var onClearHandler = function onClearHandler() {
+    setSearchValue('');
+    setSearchList(hiddenAvatarList);
+  };
+
+  var popperClassName = classnames((_classNames = {}, _defineProperty$1(_classNames, 'py-3', !withSearch), _defineProperty$1(_classNames, 'pb-3', withSearch), _defineProperty$1(_classNames, 'SelectionAvatarGroup-popper', true), _defineProperty$1(_classNames, 'overflow-hidden', true), _classNames));
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: customStyle.width
+    },
+    ref: listRef,
+    "data-test": "DesignSystem-AvatarSelection--Popover",
+    id: popoverId
+  }, withSearch && /*#__PURE__*/React.createElement(AvatarSelectionInput, {
+    placeholder: searchPlaceholder,
+    onChange: onSearchHandler,
+    value: searchValue,
+    onClear: onClearHandler
+  }), /*#__PURE__*/React.createElement("div", {
+    style: customStyle,
+    className: popperClassName
+  }, searchList.length === 0 && /*#__PURE__*/React.createElement(AvatarSelectionEmptyState, {
+    height: customStyle.maxHeight,
+    title: "No users found",
+    description: "Try modifying your search to find what you are looking for."
+  }), /*#__PURE__*/React.createElement(AvatarSelectionList, null, searchList.map(function (avatarData, index) {
+    var _avatarData$firstName = avatarData.firstName,
+        firstName = _avatarData$firstName === void 0 ? '' : _avatarData$firstName,
+        _avatarData$lastName = avatarData.lastName,
+        lastName = _avatarData$lastName === void 0 ? '' : _avatarData$lastName;
+    var name = "".concat(firstName, " ").concat(lastName);
+    var isSelected = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.includes(avatarData);
+    return /*#__PURE__*/React.createElement(AvatarSelectionOption, {
+      key: index,
+      value: avatarData
+    }, /*#__PURE__*/React.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 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 _React$useState = React.useState([]),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      selectedItems = _React$useState2[0],
+      setSelectedItems = _React$useState2[1];
+
+  var _React$useState3 = React.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      openPopover = _React$useState4[0],
+      setOpenPopover = _React$useState4[1];
+
+  var _React$useState5 = React.useState(),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      focusedOption = _React$useState6[0],
+      setFocusedOption = _React$useState6[1];
+
+  var _React$useState7 = React.useState(false),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      highlightFirstItem = _React$useState8[0],
+      setHighlightFirstItem = _React$useState8[1];
+
+  var _React$useState9 = React.useState(false),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      highlightLastItem = _React$useState10[0],
+      setHighlightLastItem = _React$useState10[1];
+
+  var listRef = /*#__PURE__*/React.createRef();
+  var triggerRef = /*#__PURE__*/React.createRef();
+  React.useEffect(function () {
+    var selectedList = [];
+    list.forEach(function (avatarItem) {
+      if (avatarItem.selected) {
+        selectedList.push(avatarItem);
+      }
+    });
+    setSelectedItems(selectedList);
+  }, []);
+  React.useEffect(function () {
+    if (!openPopover) {
+      setHighlightFirstItem(false);
+      setHighlightLastItem(false);
+    } else {
+      setHighlightFirstItem(true);
+    }
+  }, [openPopover]);
+  React.useEffect(function () {
+    if (highlightFirstItem && openPopover) {
+      requestAnimationFrame(function () {
+        return focusListItem$2('down', setFocusedOption, listRef, withSearch);
+      });
+    }
+  }, [highlightFirstItem]);
+  React.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: "".concat(borderColor),
+    boxShadow: "0 0 0  calc(var(--spacing-xs) + var(--spacing-s)) ".concat(borderColor)
+  };
+  var AvatarSelectionClass = classnames(_defineProperty$1({}, 'SelectionAvatarGroup', true), 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-".concat(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.createElement(AvatarSelectionContext.Provider, {
+    value: contextProp
+  }, /*#__PURE__*/React.createElement("div", _extends$2({
+    "data-test": "DesignSystem-AvatarSelection"
+  }, baseProps, {
+    className: AvatarSelectionClass
+  }), /*#__PURE__*/React.createElement(SelectionAvatarsWrapper, {
+    size: size,
+    avatarStyle: avatarStyle,
+    avatarList: list.slice(0, max),
+    avatarRenderer: avatarRenderer,
+    tooltipPosition: tooltipPosition
+  }), (hiddenAvatarCount > 0 || children && hiddenAvatarCount > 0) && /*#__PURE__*/React.createElement(Popover, {
+    open: openPopover,
+    position: "bottom-end",
+    trigger: /*#__PURE__*/React.createElement(AvatarSelectionCount, triggerProps),
+    triggerClass: "flex-grow-0",
+    onToggle: onToggleHandler
+  }, /*#__PURE__*/React.createElement(AvatarSelectionPopover, 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.createElement(Listbox, _extends$2({
+    className: "py-3"
+  }, props, {
+    role: "listbox"
+  }), props.children);
+};
+ComboboxList.defaultProps = {
+  type: 'option',
+  showDivider: false,
+  tagName: 'ul',
+  size: 'compressed'
+};
+
+var ComboboxContext = /*#__PURE__*/React.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) {
+  focusedOption === null || focusedOption === void 0 ? void 0 : focusedOption.click();
+
+  if (!multiSelect) {
+    inputTriggerRef.current.focus();
+  } else {
+    // to focus first option by default when last option is selected
+    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 _targetOption$scrollI;
+
+  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);
+  targetOption === null || targetOption === void 0 ? void 0 : (_targetOption$scrollI = targetOption.scrollIntoView) === null || _targetOption$scrollI === void 0 ? void 0 : _targetOption$scrollI.call(targetOption, {
+    block: 'center'
+  });
+};
+
+var _excluded$8 = ["children", "option", "onClick"];
+var ComboboxOption = function ComboboxOption(props) {
+  var children = props.children,
+      option = props.option,
+      onClick = props.onClick,
+      rest = _objectWithoutProperties(props, _excluded$8);
+
+  var contextProp = React.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(_objectSpread2(_objectSpread2({}, option), {}, {
+      isSelectedOption: true
+    }));
+  };
+
+  var onKeyDownHandler = function onKeyDownHandler(event) {
+    handleKeyDown$2(event, focusedOption, setFocusedOption, setOpenPopover, inputTriggerRef, setHighlightFirstItem, setHighlightLastItem, multiSelect, listRef);
+  };
+
+  return /*#__PURE__*/React.createElement(Listbox.Item, _extends$2({
+    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 _listRef$current, _targetOption;
+
+  var listItems = (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.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];
+  }
+
+  (_targetOption = targetOption) === null || _targetOption === void 0 ? void 0 : _targetOption.focus();
+
+  if (targetOption && typeof targetOption.scrollIntoView === 'function') {
+    var _targetOption2;
+
+    (_targetOption2 = targetOption) === null || _targetOption2 === void 0 ? void 0 : _targetOption2.scrollIntoView({
+      block: 'center',
+      behavior: 'smooth'
+    });
+  }
+
+  setFocusedOption && setFocusedOption(targetOption);
+};
+
+var InputBox = function InputBox(props) {
+  var contextProp = React.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 _props$onClear;
+
+    event.stopPropagation();
+    var newValue = {
+      label: '',
+      value: '',
+      isSelectedOption: false
+    };
+    setInputValue && setInputValue(newValue);
+    setOpenPopover === null || setOpenPopover === void 0 ? void 0 : setOpenPopover(true);
+    (_props$onClear = props.onClear) === null || _props$onClear === void 0 ? void 0 : _props$onClear.call(props, event);
+  };
+
+  var onKeyDownHandler = function onKeyDownHandler(event) {
+    handleKeyDown$1(event, setOpenPopover, setHighlightFirstItem, setHighlightLastItem);
+  };
+
+  return /*#__PURE__*/React.createElement(Input, _extends$2({}, 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 _excluded$7 = ["chipOptions", "allowDuplicates", "disabled", "error", "placeholder", "defaultValue", "value", "className", "autoFocus", "onChange", "onBlur", "onFocus", "onKeyDown", "onInputChange", "tabIndex", "role"],
+    _excluded2 = ["type", "onClick"];
+var keyCodes = {
+  BACKSPACE: 'Backspace',
+  DELETE: 'Delete',
+  ENTER: 'Enter'
+};
+var MultiSelectTrigger = function MultiSelectTrigger(props) {
+  var _classNames, _classNames2;
+
+  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 = _objectWithoutProperties(props, _excluded$7);
+
+  var inputRef = /*#__PURE__*/React.createRef();
+
+  var _React$useState = React.useState(value || defaultValue),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      chips = _React$useState2[0],
+      setChips = _React$useState2[1];
+
+  var _React$useState3 = React.useState(''),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      inputValue = _React$useState4[0],
+      setInputValue = _React$useState4[1];
+
+  var baseProps = extractBaseProps(props);
+  React.useEffect(function () {
+    if (value !== undefined) {
+      setChips(value);
+      setInputValue('');
+    }
+  }, [value]);
+  var ChipInputBorderClass = classnames((_classNames = {}, _defineProperty$1(_classNames, 'ChipInput-border', true), _defineProperty$1(_classNames, 'ChipInput-border--error', error), _classNames));
+  var ChipInputClass = classnames((_classNames2 = {
+    ChipInput: true
+  }, _defineProperty$1(_classNames2, 'ChipInput--disabled', disabled), _defineProperty$1(_classNames2, 'ChipInput--withChips', chips && chips.length > 0), _defineProperty$1(_classNames2, 'ChipInput--error', error), _classNames2), className);
+
+  var onUpdateChips = function onUpdateChips(updatedChips) {
+    if (onChange) onChange(updatedChips);
+  };
+
+  var onChipDeleteHandler = function onChipDeleteHandler(index) {
+    var updatedChips = _toConsumableArray(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 = [].concat(_toConsumableArray(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 _inputRef$current;
+
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+  };
+
+  var chipComponents = chips.map(function (chip, index) {
+    var _chipOptions$type = chipOptions.type,
+        type = _chipOptions$type === void 0 ? 'input' : _chipOptions$type,
+        _onClick = chipOptions.onClick,
+        rest = _objectWithoutProperties(chipOptions, _excluded2);
+
+    var chipLabel = typeof chip === 'string' ? chip : chip === null || chip === void 0 ? void 0 : chip.label;
+    return /*#__PURE__*/React.createElement(Chip, _extends$2({
+      "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__*/
+
+    /* TODO(a11y): fix accessibility  */
+
+    /* eslint-disable  */
+    React.createElement("div", {
+      "data-test": "DesignSystem-MultiSelectTrigger--Border",
+      className: ChipInputBorderClass
+    }, /*#__PURE__*/React.createElement("div", _extends$2({
+      "data-test": "DesignSystem-MultiSelectTrigger"
+    }, baseProps, {
+      className: ChipInputClass,
+      onClick: onClickHandler,
+      tabIndex: disabled ? -1 : tabIndex || 0
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "ChipInput-wrapper"
+    }, chips && chips.length > 0 && chipComponents, /*#__PURE__*/React.createElement("input", _extends$2({}, 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.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.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 _event$target;
+
+    var value = event === null || event === void 0 ? void 0 : (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.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.createElement(MultiSelectTrigger, _extends$2({}, 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 _excluded$6 = ["multiSelect", "chipValue", "value"];
+var ComboboxTrigger = function ComboboxTrigger(props) {
+  var multiSelect = props.multiSelect,
+      chipValue = props.chipValue,
+      value = props.value,
+      rest = _objectWithoutProperties(props, _excluded$6);
+
+  if (multiSelect) {
+    var icon = props.icon,
+        clearButton = props.clearButton,
+        iconType = props.iconType;
+    var chipInputOptions = {
+      icon: icon,
+      clearButton: clearButton,
+      iconType: iconType
+    };
+    return /*#__PURE__*/React.createElement(ChipInputBox, _extends$2({
+      defaultValue: [],
+      chipOptions: _objectSpread2({}, chipInputOptions)
+    }, rest, {
+      value: chipValue
+    }));
+  }
+
+  return /*#__PURE__*/React.createElement(InputBox, _extends$2({}, 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 _React$useState = React.useState(),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      popoverStyle = _React$useState2[0],
+      setPopoverStyle = _React$useState2[1];
+
+  var _React$useState3 = React.useState({}),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      wrapperStyle = _React$useState4[0],
+      setWrapperStyle = _React$useState4[1];
+
+  var triggerRef = /*#__PURE__*/React.createRef();
+  var listRef = /*#__PURE__*/React.createRef();
+
+  var _React$useState5 = React.useState(false),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      openPopover = _React$useState6[0],
+      setOpenPopover = _React$useState6[1];
+
+  var _React$useState7 = React.useState(false),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      isOptionSelected = _React$useState8[0],
+      setIsOptionSelected = _React$useState8[1];
+
+  var _React$useState9 = React.useState(),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      focusedOption = _React$useState10[0],
+      setFocusedOption = _React$useState10[1];
+
+  var _React$useState11 = React.useState(value || {
+    label: '',
+    value: ''
+  }),
+      _React$useState12 = _slicedToArray(_React$useState11, 2),
+      inputValue = _React$useState12[0],
+      setInputValue = _React$useState12[1];
+
+  var _React$useState13 = React.useState(chipValue),
+      _React$useState14 = _slicedToArray(_React$useState13, 2),
+      chipInputValue = _React$useState14[0],
+      setChipInputValue = _React$useState14[1];
+
+  var _React$useState15 = React.useState(''),
+      _React$useState16 = _slicedToArray(_React$useState15, 2),
+      chipInputText = _React$useState16[0],
+      setChipInputText = _React$useState16[1];
+
+  var _React$useState17 = React.useState(false),
+      _React$useState18 = _slicedToArray(_React$useState17, 2),
+      highlightFirstItem = _React$useState18[0],
+      setHighlightFirstItem = _React$useState18[1];
+
+  var _React$useState19 = React.useState(false),
+      _React$useState20 = _slicedToArray(_React$useState19, 2),
+      highlightLastItem = _React$useState20[0],
+      setHighlightLastItem = _React$useState20[1];
+
+  var inputTriggerRef = React.useRef();
+  var popoverId = "DesignSystem-Combobox--Popover-".concat(uidGenerator());
+  React.useEffect(function () {
+    var _triggerRef$current;
+
+    var popperWidth = (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.clientWidth;
+    var popperWrapperStyle = {
+      width: width || popperWidth
+    };
+    var wrapperStyle = {
+      maxHeight: maxHeight || 'var(--spacing-9)',
+      overflowY: 'auto',
+      boxSizing: 'border-box'
+    };
+    setWrapperStyle(wrapperStyle);
+    setPopoverStyle(popperWrapperStyle);
+  }, []);
+  React.useEffect(function () {
+    if (isOptionSelected) {
+      multiSelect ? setOpenPopover(true) : setOpenPopover(false);
+      setIsOptionSelected(false);
+    }
+
+    var value = multiSelect ? chipInputValue : inputValue;
+    onChange && !isOptionSelected && onChange(value);
+  }, [inputValue, chipInputValue]);
+  React.useEffect(function () {
+    if (highlightFirstItem && openPopover) {
+      requestAnimationFrame(function () {
+        return focusListItem$1('down', setFocusedOption, listRef);
+      });
+    }
+  }, [highlightFirstItem]);
+  React.useEffect(function () {
+    if (highlightLastItem && openPopover) {
+      requestAnimationFrame(function () {
+        return focusListItem$1('up', setFocusedOption, listRef);
+      });
+    }
+  }, [highlightLastItem]);
+  React.useEffect(function () {
+    if (!openPopover) {
+      setHighlightFirstItem(false);
+      setHighlightLastItem(false);
+    }
+  }, [openPopover]);
+  React.useEffect(function () {
+    onSearch && onSearch(chipInputText);
+  }, [chipInputText]);
+
+  var onOptionClick = function onOptionClick(option) {
+    setIsOptionSelected(true);
+
+    if (!multiSelect) {
+      setInputValue(option);
+      onChange && onChange(option);
+    } else {
+      var chipList = chipInputValue ? [].concat(_toConsumableArray(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.createElement(ComboboxContext.Provider, {
+    value: contextProp
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: triggerRef,
+    className: className
+  }, /*#__PURE__*/React.createElement(OutsideClick, {
+    onOutsideClick: outsideClickHandler
+  }, /*#__PURE__*/React.createElement(Popover, {
+    open: openPopover && !disabled,
+    triggerClass: "d-block",
+    customStyle: popoverStyle,
+    onToggle: onToggleHandler,
+    trigger: /*#__PURE__*/React.createElement(ComboboxTrigger, triggerProps)
+  }, /*#__PURE__*/React.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.createContext({});
+
+var _excluded$5 = ["children"];
+var SelectList = function SelectList(props) {
+  var contextProp = React.useContext(SelectContext);
+  var withSearch = contextProp.withSearch,
+      minHeight = contextProp.minHeight,
+      maxHeight = contextProp.maxHeight,
+      multiSelect = contextProp.multiSelect;
+
+  var children = props.children,
+      rest = _objectWithoutProperties(props, _excluded$5);
+
+  var searchInputHeight = 33;
+  var wrapperStyle = {
+    maxHeight: withSearch ? maxHeight - searchInputHeight : maxHeight,
+    overflowY: 'auto',
+    minHeight: minHeight
+  };
+  return /*#__PURE__*/React.createElement(Listbox, _extends$2({
+    "aria-label": "Options item list",
+    "aria-multiselectable": multiSelect,
+    className: "my-3"
+  }, rest), /*#__PURE__*/React.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 = _toConsumableArray(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 "".concat(pair.label);
+    }).join(', ');
+  } else {
+    return "".concat(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 _listRef$current, _listRef$current2, _targetOption, _targetOption2;
+
+  var searchInput = (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.querySelectorAll('[data-test="DesignSystem-Select--Input"]');
+  var listItems = (_listRef$current2 = listRef.current) === null || _listRef$current2 === void 0 ? void 0 : _listRef$current2.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];
+  }
+
+  (_targetOption = targetOption) === null || _targetOption === void 0 ? void 0 : _targetOption.focus();
+  (_targetOption2 = targetOption) === null || _targetOption2 === void 0 ? void 0 : _targetOption2.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) {
+  focusedOption === null || focusedOption === void 0 ? void 0 : focusedOption.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 _listRef$current3, _targetOption3, _targetOption4;
+
+  var listItems = (_listRef$current3 = listRef.current) === null || _listRef$current3 === void 0 ? void 0 : _listRef$current3.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;
+  }
+
+  (_targetOption3 = targetOption) === null || _targetOption3 === void 0 ? void 0 : _targetOption3.focus();
+  (_targetOption4 = targetOption) === null || _targetOption4 === void 0 ? void 0 : _targetOption4.scrollIntoView({
+    block: 'center'
+  });
+  setFocusedOption && setFocusedOption(targetOption);
+};
+
+var _excluded$4 = ["children", "option", "checkedState", "onClick", "withCheckbox", "disabled"];
+var SelectOption = function SelectOption(props) {
+  var children = props.children,
+      option = props.option,
+      checkedState = props.checkedState,
+      onClick = props.onClick,
+      _props$withCheckbox = props.withCheckbox,
+      withCheckbox = _props$withCheckbox === void 0 ? true : _props$withCheckbox,
+      disabled = props.disabled,
+      rest = _objectWithoutProperties(props, _excluded$4);
+
+  var contextProp = React.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.createElement(Listbox.Item, _extends$2({
+    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.createElement("div", {
+    className: "d-flex align-items-center"
+  }, multiSelect && withCheckbox && /*#__PURE__*/React.createElement(Checkbox, {
+    tabIndex: -1,
+    "aria-checked": indeterminate ? 'mixed' : checked,
+    checked: checked,
+    indeterminate: indeterminate
+  }), /*#__PURE__*/React.createElement("div", {
+    className: multiSelect ? 'Select-trigger-text pt-2' : 'Select-trigger-text'
+  }, children)));
+};
+SelectOption.defaultProps = {
+  withCheckbox: true
+};
+
+var _excluded$3 = ["triggerSize", "placeholder", "withClearButton", "icon", "disabled", "inlineLabel", "iconType", "onClear", "setLabel"];
+
+var SelectTrigger = function SelectTrigger(props) {
+  var _classNames, _classNames2;
+
+  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 = _objectWithoutProperties(props, _excluded$3);
+
+  var contextProp = React.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((_classNames = {}, _defineProperty$1(_classNames, 'Button', true), _defineProperty$1(_classNames, 'Select-trigger', true), _defineProperty$1(_classNames, "Select-trigger--".concat(triggerSize), triggerSize), _defineProperty$1(_classNames, 'Select-trigger--placeholder', !isOptionSelected), _defineProperty$1(_classNames, 'Select-trigger--icon', icon), _defineProperty$1(_classNames, 'Select-trigger--open', openPopover), _classNames));
+  var textClass = classnames((_classNames2 = {}, _defineProperty$1(_classNames2, 'Text', true), _defineProperty$1(_classNames2, 'Text--regular', true), _defineProperty$1(_classNames2, 'Select-trigger-text', true), _classNames2));
+  return /*#__PURE__*/React.createElement("button", _extends$2({
+    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.createElement("div", {
+    className: "Select-trigger-wrapper"
+  }, inlineLabel && /*#__PURE__*/React.createElement(Text, {
+    appearance: "subtle",
+    className: "mr-4 white-space-nowrap"
+  }, "".concat(inlineLabel.trim().charAt(0).toUpperCase()).concat(inlineLabel.trim().slice(1))), icon && !inlineLabel && /*#__PURE__*/React.createElement(Icon, {
+    appearance: buttonDisabled,
+    className: "d-flex align-items-center mr-4",
+    name: icon,
+    type: iconType
+  }), value && /*#__PURE__*/React.createElement("span", {
+    className: textClass
+  }, value)), isOptionSelected && withClearButton && /*#__PURE__*/React.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.createElement(Icon, {
+    appearance: buttonDisabled,
+    name: iconName,
+    type: iconType
+  }));
+};
+
+SelectTrigger.defaultProps = {
+  triggerSize: 'regular',
+  placeholder: 'Select',
+  withClearButton: true
+};
+
+var _excluded$2 = ["onChange", "onClear"];
+var SearchInput = function SearchInput(props) {
+  var contextProp = React.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 = _objectWithoutProperties(props, _excluded$2);
+
+  React.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.createElement("div", {
+    className: "Select-inputWrapper"
+  }, /*#__PURE__*/React.createElement(Input, _extends$2({}, rest, {
+    icon: 'search',
+    onKeyDown: function onKeyDown(event) {
+      return handleInputKeyDown(event, listRef, setFocusedOption, setOpenPopover, triggerRef);
+    } // TODO(a11y): research more on this.
+    // eslint-disable-next-line jsx-a11y/no-autofocus
+    ,
+    autoFocus: true,
+    onChange: searchHandler,
+    onClear: searchClearHandler,
+    autoComplete: 'off',
+    "aria-label": "Search",
+    "aria-haspopup": "listbox",
+    className: "Select-input",
+    "data-test": "DesignSystem-Select--Input"
+  })));
+};
+
+var _excluded$1 = ["title", "description", "children"];
+var SelectEmptyTemplate = function SelectEmptyTemplate(props) {
+  var contextProp = React.useContext(SelectContext);
+  var maxHeight = contextProp.maxHeight,
+      withSearch = contextProp.withSearch;
+
+  var title = props.title,
+      description = props.description,
+      children = props.children,
+      rest = _objectWithoutProperties(props, _excluded$1);
+
+  var searchInputHeight = 33;
+  var wrapperStyle = {
+    minHeight: withSearch ? maxHeight - searchInputHeight : maxHeight
+  };
+  return /*#__PURE__*/React.createElement("div", _extends$2({
+    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.createElement("div", {
+    "aria-labelledby": title,
+    "aria-describedby": description,
+    className: "d-flex flex-column justify-content-center align-items-center"
+  }, title && /*#__PURE__*/React.createElement(Text, {
+    id: title,
+    role: "heading",
+    className: "text-align-center mb-3",
+    weight: "strong"
+  }, title), description && /*#__PURE__*/React.createElement(Text, {
+    id: description,
+    className: "text-align-center mb-6",
+    weight: "medium",
+    size: "small",
+    appearance: "subtle"
+  }, description), children && children));
+};
+
+var _excluded = ["children"];
+var SelectFooter = function SelectFooter(props) {
+  var children = props.children,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  return /*#__PURE__*/React.createElement("div", _extends$2({
+    className: "Select-buttonWrapper"
+  }, rest), children);
+};
+
+var Select = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var children = props.children,
+      onSelect = props.onSelect,
+      width = props.width,
+      maxHeight = props.maxHeight,
+      minHeight = props.minHeight,
+      value = props.value,
+      _props$multiSelect = props.multiSelect,
+      multiSelect = _props$multiSelect === void 0 ? false : _props$multiSelect,
+      onOutsideClick = props.onOutsideClick,
+      triggerOptions = props.triggerOptions,
+      popoverWidth = props.popoverWidth;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      openPopover = _React$useState2[0],
+      setOpenPopover = _React$useState2[1];
+
+  var mapValue = mapInitialValue(multiSelect, value);
+
+  var _React$useState3 = React.useState(mapValue),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      selectValue = _React$useState4[0],
+      setSelectValue = _React$useState4[1];
+
+  var _React$useState5 = React.useState(false),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      isOptionSelected = _React$useState6[0],
+      setIsOptionSelected = _React$useState6[1];
+
+  var triggerRef = /*#__PURE__*/React.createRef();
+  var listRef = React.useRef(null);
+
+  var _React$useState7 = React.useState(false),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      withSearch = _React$useState8[0],
+      setWithSearch = _React$useState8[1];
+
+  var _React$useState9 = React.useState(),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      focusedOption = _React$useState10[0],
+      setFocusedOption = _React$useState10[1];
+
+  var _React$useState11 = React.useState(false),
+      _React$useState12 = _slicedToArray(_React$useState11, 2),
+      highlightFirstItem = _React$useState12[0],
+      setHighlightFirstItem = _React$useState12[1];
+
+  var _React$useState13 = React.useState(false),
+      _React$useState14 = _slicedToArray(_React$useState13, 2),
+      highlightLastItem = _React$useState14[0],
+      setHighlightLastItem = _React$useState14[1];
+
+  var triggerStyle = {
+    width: width
+  };
+  var popoverStyle = {
+    width: popoverWidth ? popoverWidth : width
+  };
+  React.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.useEffect(function () {
+    if (!openPopover) {
+      setHighlightFirstItem(false);
+      setHighlightLastItem(false);
+    }
+  }, [openPopover]);
+  React.useEffect(function () {
+    if (highlightFirstItem && openPopover) {
+      requestAnimationFrame(function () {
+        return focusListItem('down', setFocusedOption, listRef);
+      });
+    }
+  }, [highlightFirstItem]);
+  React.useEffect(function () {
+    if (highlightLastItem && openPopover) {
+      requestAnimationFrame(function () {
+        return focusListItem('up', setFocusedOption, listRef);
+      });
+    }
+  }, [highlightLastItem]);
+  React.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.createElement(SelectContext.Provider, {
+    value: contextProp
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-test": "DesignSystem-Select",
+    "aria-haspopup": "listbox",
+    "aria-expanded": openPopover,
+    style: triggerStyle
+  }, /*#__PURE__*/React.createElement(Popover, {
+    open: openPopover,
+    onToggle: onToggleHandler,
+    className: "mt-3",
+    triggerClass: "d-block",
+    customStyle: popoverStyle,
+    trigger: /*#__PURE__*/React.createElement(SelectTrigger, _extends$2({
+      "aria-controls": "select-listbox"
+    }, triggerOptions))
+  }, /*#__PURE__*/React.createElement(OutsideClick, {
+    onOutsideClick: onOutsideClickHandler
+  }, /*#__PURE__*/React.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";
 
-export { ActionCard, Avatar, AvatarGroup, Backdrop, Badge, Breadcrumbs, Button, Calendar, Caption, Card, CardBody, CardFooter, CardHeader, CardSubdued, ChatMessage, Checkbox, Chip, ChipGroup, ChipInput, ChoiceList, Collapsible, Column, DatePicker, DateRangePicker, Dialog, Divider, Dropdown, Dropzone, EditableChipInput, EditableDropdown, EditableInput, EmptyState, FileList, FileUploader, FileUploaderList, FullscreenModal, Grid, GridCell, Heading, HelpText, HorizontalNav, Icon, InlineMessage, Input, X as InputMask, Label, Legend, Link, LinkButton, List, Listbox, Message, MetaList, MetricInput, Modal, ModalBody, ModalDescription, ModalFooter, ModalHeader, MultiSlider, Navigation, OutsideClick, PageHeader, Pagination, Paragraph, Pills, Placeholder, PlaceholderImage, PlaceholderParagraph, Popover, ProgressBar, ProgressRing, Radio, RangeSlider, Row, SelectionCard, Sidesheet, Slider, Spinner, StatusHint, Stepper, Subheading, Switch, Tab, Table, Tabs, TabsWrapper, Text, TextField, Textarea, TimePicker, Toast, Tooltip, index as Utils, VerificationCodeInput, VerticalNav, version };
+export { ActionCard, Avatar, AvatarGroup, AvatarSelection, Backdrop, Badge, Breadcrumbs, Button, Calendar, Caption, Card, CardBody, CardFooter, CardHeader, CardSubdued, ChatMessage, Checkbox, Chip, ChipGroup, ChipInput, ChoiceList, Collapsible, Column, Combobox, DatePicker, DateRangePicker, Dialog, Divider, Dropdown, Dropzone, EditableChipInput, EditableDropdown, EditableInput, EmptyState, FileList, FileUploader, FileUploaderList, FullscreenModal, Grid, GridCell, Heading, HelpText, HorizontalNav, Icon, InlineMessage, Input, X as InputMask, Label, Legend, Link, LinkButton, List, Listbox, Message, MetaList, MetricInput, Modal, ModalBody, ModalDescription, ModalFooter, ModalHeader, MultiSlider, Navigation, OutsideClick, PageHeader, Pagination, Paragraph, Pills, Placeholder, PlaceholderImage, PlaceholderParagraph, Popover, ProgressBar, ProgressRing, Radio, RangeSlider, Row, Select, SelectionCard, Sidesheet, Slider, Spinner, StatusHint, Stepper, Subheading, Switch, Tab, Table, Tabs, TabsWrapper, Text, TextField, Textarea, TimePicker, Toast, Tooltip, index as Utils, VerificationCodeInput, VerticalNav, version };