@servicetitan/anvil2 1.49.4 → 1.49.6

package/dist/Combobox-Dy4IZDg1.js

@@ -0,0 +1,4281 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useState, useEffect, createContext, useContext, useRef, useMemo, useLayoutEffect, useId } from 'react';
+import { s as supportsPopover } from './DrawerContext-Cs3k160L.js';
+import { P as Popover, u as usePopoverLegacyContext, f as usePopoverContext } from './Popover-CcMDyKTj.js';
+import { c as cx } from './index-tZvMCc77.js';
+import { a as useMultipleSelection, u as useCombobox$1, m as matchSorter, b as useSelect } from './match-sorter.esm-CtBw0MrM.js';
+import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-BlIWftBb.js';
+import { i as isMultiple, u as useDownshiftEnvironment$1, b as SELECT_ALL, a as defaultItemToKey$1, d as defaultItemToString$1, g as getScrollParent, A as ADD_NEW$1, S as SelectTriggerBase } from './SelectTriggerBase-Cv6hGsrC.js';
+import { l as listboxStyles } from './Listbox.module-XuKszT3X.js';
+import { T as Text } from './Text-kPA-VzsB.js';
+import { D as Divider } from './Divider-Olv8yWXD.js';
+import { F as Flex } from './Flex-CjPHUTeq.js';
+import { S as Spinner } from './Spinner-xEFwsq8_.js';
+import { l as listViewStyles } from './ListView.module-BilDg12y.js';
+import { I as Icon$2 } from './Icon-BSuTVNaa.js';
+import { c as checkboxStyles } from './Checkbox.module-D4EgXL0i.js';
+import { S as SvgIndeterminateCheckBox, a as SvgCheckBox, b as SvgCheckBoxOutlineBlank } from './indeterminate_check_box-B4zobNlt.js';
+import { B as Button } from './Button-92_FKAyV.js';
+import { C as Chip } from './Chip-UqdorCE2.js';
+import { S as SvgClose } from './close-DZj38AEh.js';
+import { S as SvgChevronRight } from './chevron_right-BdpsxX7x.js';
+import { S as SvgInfo } from './info-CYpG6tcI.js';
+import { S as SrOnly } from './SrOnly-CTsYSuby.js';
+import { T as Tooltip } from './Tooltip-CBy7srE2.js';
+import { H as Helper } from './Helper-DjWotFtO.js';
+import { A as Avatar } from './Avatar-DeEV-v-b.js';
+import { c as childrenToString } from './childrenToString-Bz9MqbHb.js';
+import { useTrackingId } from './useTrackingId.js';
+import { S as SvgCheck } from './check-Cf67OWrZ.js';
+
+import './Combobox.css';const label = "_label_jfzvd_2";
+const required = "_required_jfzvd_46";
+const styles$2 = {
+	label: label,
+	"top-container": "_top-container_jfzvd_37",
+	"label-text": "_label-text_jfzvd_42",
+	required: required,
+	"info-trigger": "_info-trigger_jfzvd_51",
+	"info-content": "_info-content_jfzvd_56"
+};
+
+const LabelMoreInfoIcon = ({
+  moreInfo,
+  openMoreInfo
+}) => {
+  const [open, setOpen] = useState(openMoreInfo);
+  useEffect(() => {
+    if (openMoreInfo) {
+      setOpen(true);
+    } else {
+      setOpen(false);
+      setTimeout(() => {
+        setOpen(void 0);
+      });
+    }
+  }, [openMoreInfo]);
+  return /* @__PURE__ */ jsxs(
+    Tooltip,
+    {
+      open,
+      placement: "top",
+      offset: 5,
+      fallbackPlacements: ["right", "bottom", "left"],
+      children: [
+        /* @__PURE__ */ jsx(Tooltip.Trigger, { className: styles$2["info-trigger"], children: /* @__PURE__ */ jsx(Icon$2, { svg: SvgInfo }) }),
+        /* @__PURE__ */ jsx(Tooltip.Content, { className: styles$2["info-content"], children: moreInfo })
+      ]
+    }
+  );
+};
+const Label = forwardRef((props, ref) => {
+  const { children, className, moreInfo, required, openMoreInfo, ...rest } = props;
+  const LabelClassNames = cx([styles$2["label"]], className);
+  return /* @__PURE__ */ jsxs("label", { className: LabelClassNames, "data-anv": "label", ref, ...rest, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles$2["top-container"], "aria-atomic": "true", children: [
+      /* @__PURE__ */ jsxs("span", { className: styles$2["label-text"], children: [
+        children,
+        required ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: styles$2["required"], children: "*" }),
+          /* @__PURE__ */ jsx(SrOnly, { children: "Required" })
+        ] }) : null
+      ] }),
+      moreInfo ? /* @__PURE__ */ jsx(LabelMoreInfoIcon, { moreInfo, openMoreInfo }) : null
+    ] }),
+    moreInfo ? /* @__PURE__ */ jsx(SrOnly, { children: moreInfo }) : null
+  ] });
+});
+Label.displayName = "Label";
+
+const ComboboxContext = createContext(null);
+const useCombobox = function() {
+  const context = useContext(
+    ComboboxContext
+  );
+  if (context == null) {
+    throw new Error("useCombobox must be wrapped in <Combobox />");
+  }
+  return context;
+};
+
+const ADD_NEW = Symbol.for("add-new");
+const defaultItemToString = function(item) {
+  return item != null ? String(item) : "";
+};
+const defaultItemToKey = function(item) {
+  return item;
+};
+const ComboboxLegacyContext = createContext(null);
+const useDownshiftEnvironment = () => {
+  const wrapperDivRef = useRef(null);
+  const shadowRoot = wrapperDivRef.current ? wrapperDivRef.current.getRootNode() : null;
+  const shadowDocument = wrapperDivRef.current && shadowRoot ? shadowRoot.ownerDocument : null;
+  const environment = shadowDocument ? {
+    document: shadowDocument,
+    addEventListener: shadowDocument.addEventListener.bind(shadowRoot),
+    removeEventListener: shadowDocument.removeEventListener.bind(shadowRoot),
+    Node
+  } : void 0;
+  return { ref: wrapperDivRef, environment };
+};
+const useComboboxLegacy = function() {
+  const context = useContext(
+    ComboboxLegacyContext
+  );
+  if (context == null) {
+    throw new Error("useComboboxLegacy must be wrapped in <ComboboxLegacy />");
+  }
+  return context;
+};
+
+const item$1 = "_item_rxmcz_5";
+const input = "_input_rxmcz_18";
+const prefix = "_prefix_rxmcz_46";
+const suffix = "_suffix_rxmcz_47";
+const combobox$1 = "_combobox_rxmcz_62";
+const select = "_select_rxmcz_71";
+const chip = "_chip_rxmcz_167";
+const listview$1 = "_listview_rxmcz_208";
+const empty$1 = "_empty_rxmcz_216";
+const Icon$1 = "_Icon_rxmcz_247";
+const small = "_small_rxmcz_252";
+const large = "_large_rxmcz_255";
+const error = "_error_rxmcz_273";
+const styles$1 = {
+	"buttons-wrapper": "_buttons-wrapper_rxmcz_3",
+	"search-field": "_search-field_rxmcz_4",
+	item: item$1,
+	input: input,
+	"input-wrapper": "_input-wrapper_rxmcz_19",
+	"toggle-button-wrapper": "_toggle-button-wrapper_rxmcz_32",
+	"close-button-wrapper": "_close-button-wrapper_rxmcz_33",
+	prefix: prefix,
+	suffix: suffix,
+	combobox: combobox$1,
+	select: select,
+	"popover-content": "_popover-content_rxmcz_74",
+	"no-clear-button": "_no-clear-button_rxmcz_93",
+	"input-flex": "_input-flex_rxmcz_96",
+	"fake-placeholder": "_fake-placeholder_rxmcz_124",
+	"close-button": "_close-button_rxmcz_33",
+	"toggle-button": "_toggle-button_rxmcz_32",
+	"rows-wrapper": "_rows-wrapper_rxmcz_157",
+	"chip-wrapper": "_chip-wrapper_rxmcz_167",
+	chip: chip,
+	listview: listview$1,
+	empty: empty$1,
+	Icon: Icon$1,
+	small: small,
+	large: large,
+	error: error,
+	"listview-option": "_listview-option_rxmcz_304"
+};
+
+const ComboboxLegacySingle = function(props) {
+  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
+  const {
+    className,
+    style,
+    children,
+    open,
+    disabled,
+    readOnly,
+    items: itemsProp,
+    itemToString: itemToStringProp,
+    itemToKey: itemToKeyProp,
+    onChange,
+    disableCloseOnClickOutside = false,
+    disableMatchReferenceWidth = false,
+    disableCloseOnSelectItem = false,
+    filterOptions,
+    loading = false,
+    root,
+    onInputValueChange,
+    environment: environmentProp,
+    ...rest
+  } = componentProps;
+  const ComboboxLegacyClassNames = cx(styles$1["combobox"], className);
+  const [items, setItems] = useState(itemsProp);
+  const [hasAddNew, setHasAddNew] = useState(false);
+  const [onSelectItemAddNew, setOnSelectItemAddNew] = useState(void 0);
+  const [hasExactMatch, setHasExactMatch] = useState(false);
+  const [hasDisabledPopover, setHasDisabledPopover] = useState(false);
+  const [hasEmpty, setHasEmpty] = useState(false);
+  const [disabledItems, setDisabledItems] = useState([]);
+  const [isReadOnly, setIsReadOnly] = useState(readOnly);
+  const [isDisabled, setIsDisabled] = useState(disabled);
+  const referenceRef = useRef(null);
+  const contentRef = useRef(null);
+  const handleOutsidePress = (e) => {
+    const clickedInsideReference = referenceRef.current && e.target != null && referenceRef.current.contains(e.target);
+    if (!clickedInsideReference) {
+      closeMenu();
+      return true;
+    } else {
+      return false;
+    }
+  };
+  const { ref: wrapperDivRef, environment } = useDownshiftEnvironment();
+  const showAddNew = hasAddNew && !hasExactMatch;
+  const combinedItems = useMemo(
+    () => showAddNew ? [...items, ADD_NEW] : items,
+    [items, showAddNew]
+  );
+  const itemToString = itemToStringProp ?? defaultItemToString;
+  const itemToKey = itemToKeyProp ?? defaultItemToKey;
+  const {
+    isOpen,
+    getLabelProps,
+    getInputProps,
+    getToggleButtonProps,
+    getMenuProps,
+    getItemProps,
+    highlightedIndex,
+    selectedItem,
+    selectItem,
+    setInputValue,
+    inputValue,
+    closeMenu
+  } = useCombobox$1({
+    ...rest,
+    items: combinedItems,
+    itemToString,
+    itemToKey,
+    isOpen: open,
+    initialIsOpen: open,
+    environment: environmentProp ?? environment,
+    // NOTE: Reducer needs to be pure, side-effects should be in event handlers
+    stateReducer(state, { type, changes }) {
+      switch (type) {
+        // keep ComboboxLegacy open onBlur, will call close using Popover's onOutsidePress
+        case useCombobox$1.stateChangeTypes.InputBlur:
+          return {
+            ...changes,
+            isOpen: open != null ? open : true,
+            highlightedIndex: state.highlightedIndex
+          };
+        case useCombobox$1.stateChangeTypes.InputKeyDownEnter:
+        case useCombobox$1.stateChangeTypes.ItemClick:
+          if (changes.selectedItem === ADD_NEW) {
+            const stateInputValue = state.inputValue;
+            setTimeout(() => {
+              onSelectItemAddNew?.(stateInputValue);
+            }, 0);
+            return {
+              ...changes,
+              selectedItem: state.selectedItem,
+              inputValue: ""
+            };
+          } else {
+            return {
+              ...changes,
+              isOpen: open != null ? open : disableCloseOnSelectItem ? true : changes.isOpen,
+              highlightedIndex: disableCloseOnSelectItem ? 0 : changes.highlightedIndex
+            };
+          }
+        // prevent this from closing the popover by default
+        case useCombobox$1.stateChangeTypes.InputClick:
+          return { ...changes, isOpen: open != null ? open : true };
+        default:
+          return changes;
+      }
+    },
+    onInputValueChange: onInputValueChange ?? (({ inputValue: inputValue2, type, selectedItem: selectedItem2 }) => {
+      const inputValueMatchesSelectedItem = selectedItem2 != null && inputValue2 === itemToString(selectedItem2);
+      const inputValueIsEmpty = inputValue2 == null || inputValue2 === "";
+      if (type === useCombobox$1.stateChangeTypes.InputKeyDownEnter || type === useCombobox$1.stateChangeTypes.ItemClick) {
+        setItems(itemsProp);
+        setHasExactMatch(true);
+      } else if (!inputValueMatchesSelectedItem && !inputValueIsEmpty) {
+        setItems(matchSorter(itemsProp, inputValue2, filterOptions));
+        setHasExactMatch(
+          matchSorter(itemsProp, inputValue2, {
+            ...filterOptions,
+            threshold: matchSorter.rankings.EQUAL
+          }).length > 0
+        );
+      } else {
+        setItems(itemsProp);
+        setHasExactMatch(true);
+      }
+    }),
+    onSelectedItemChange(changes) {
+      const { selectedItem: selectedItem2 } = changes;
+      if (onChange != null)
+        onChange(selectedItem2 != null ? selectedItem2 : null);
+    },
+    onIsOpenChange({ isOpen: isOpen2, inputValue: inputValue2, selectedItem: selectedItem2 }) {
+      if (isOpen2 === false) {
+        setItems(itemsProp);
+        if (inputValue2 === "") {
+          selectItem(null);
+        } else {
+          setInputValue(selectedItem2 != null ? itemToString(selectedItem2) : "");
+        }
+      }
+    },
+    isItemDisabled(item) {
+      if (isDisabled || isReadOnly) {
+        return !!isDisabled || !!isReadOnly;
+      }
+      if (item && item instanceof Object && "disabled" in item && item.disabled) {
+        return true;
+      }
+      if (item && item instanceof Object && "readOnly" in item && item.readOnly) {
+        return true;
+      }
+      if (disabledItems.includes(item)) {
+        return true;
+      }
+      return false;
+    }
+  });
+  const firstRenderRef = useRef(true);
+  useEffect(() => {
+    if (firstRenderRef.current === true) {
+      firstRenderRef.current = false;
+    }
+  }, []);
+  useEffect(() => {
+    setIsDisabled(disabled);
+  }, [disabled]);
+  useEffect(() => {
+    setIsReadOnly(readOnly);
+  }, [readOnly]);
+  useEffect(() => {
+    if (firstRenderRef.current) return;
+    const inputValueMatchesSelectedItem = selectedItem != null && inputValue === itemToString(selectedItem);
+    const inputValueIsEmpty = inputValue == null || inputValue === "";
+    if (!inputValueMatchesSelectedItem && !inputValueIsEmpty) {
+      setItems(matchSorter(itemsProp, inputValue, filterOptions));
+      setHasExactMatch(
+        matchSorter(itemsProp, inputValue, {
+          ...filterOptions,
+          threshold: matchSorter.rankings.EQUAL
+        }).length > 0
+      );
+    } else {
+      setItems(itemsProp);
+      setHasExactMatch(true);
+    }
+  }, [itemsProp]);
+  return /* @__PURE__ */ jsx(
+    ComboboxLegacyContext.Provider,
+    {
+      value: {
+        multiple: false,
+        select: false,
+        items,
+        itemToString,
+        itemToKey,
+        isOpen,
+        getLabelProps,
+        getInputProps,
+        getToggleButtonProps,
+        getMenuProps,
+        getItemProps,
+        highlightedIndex,
+        selectedItem,
+        selectedItems: [],
+        disabledItems,
+        setDisabledItems,
+        getSelectedItemProps: void 0,
+        getDropdownProps: void 0,
+        selectItem,
+        inputValue,
+        isDisabled,
+        isReadOnly,
+        setIsReadOnly,
+        setIsDisabled,
+        hasDisabledPopover,
+        setHasDisabledPopover,
+        hasEmpty,
+        setHasEmpty,
+        hasAddNew,
+        setHasAddNew,
+        onSelectItemAddNew,
+        setOnSelectItemAddNew,
+        hasExactMatch,
+        setHasExactMatch,
+        loading,
+        referenceRef,
+        contentRef,
+        closeMenu
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: ComboboxLegacyClassNames,
+          "data-anv": "combobox",
+          style: { ...style, ...layoutStyles },
+          ref: wrapperDivRef,
+          children: /* @__PURE__ */ jsx(
+            Popover,
+            {
+              root,
+              open: isOpen,
+              noPadding: true,
+              disableCaret: true,
+              fitScreen: true,
+              disableFlipFallback: true,
+              placement: "bottom-start",
+              matchReferenceWidth: !disableMatchReferenceWidth,
+              disableCloseOnClickOutside,
+              onOutsidePress: handleOutsidePress,
+              children
+            }
+          )
+        }
+      )
+    }
+  );
+};
+const ComboboxLegacyMultiple = function(props) {
+  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
+  const {
+    className,
+    style,
+    children,
+    open,
+    items: itemsProp,
+    itemToString: itemToStringProp,
+    itemToKey: itemToKeyProp,
+    onChange,
+    onSelectedItemsChange,
+    disableCloseOnClickOutside = false,
+    disableMatchReferenceWidth = false,
+    disableCloseOnSelectItem = false,
+    disableClearInputValueOnSelectItem = false,
+    filterOptions,
+    loading = false,
+    root,
+    disabled,
+    readOnly,
+    stateReducer: _,
+    onInputValueChange,
+    initialSelectedItems,
+    initialActiveIndex,
+    defaultSelectedItems,
+    defaultActiveIndex,
+    activeIndex: activeIndexProp,
+    selectedItems: selectedItemsProp,
+    environment: environmentProp,
+    ...rest
+  } = componentProps;
+  const ComboboxLegacyClassNames = cx(styles$1["combobox"], className);
+  const [items, setItems] = useState(itemsProp);
+  const [hasAddNew, setHasAddNew] = useState(false);
+  const [onSelectItemAddNew, setOnSelectItemAddNew] = useState(void 0);
+  const [hasExactMatch, setHasExactMatch] = useState(false);
+  const [hasDisabledPopover, setHasDisabledPopover] = useState(false);
+  const [hasEmpty, setHasEmpty] = useState(false);
+  const [disabledItems, setDisabledItems] = useState([]);
+  const [isReadOnly, setIsReadOnly] = useState(readOnly);
+  const [isDisabled, setIsDisabled] = useState(disabled);
+  let storedSetInputValue = void 0;
+  const referenceRef = useRef(null);
+  const contentRef = useRef(null);
+  const handleOutsidePress = (e) => {
+    const clickedInsideReference = referenceRef.current && e.target != null && referenceRef.current.contains(e.target);
+    if (!clickedInsideReference) {
+      closeMenu();
+      return true;
+    } else {
+      return false;
+    }
+  };
+  const { ref: wrapperDivRef, environment } = useDownshiftEnvironment();
+  const showAddNew = hasAddNew && !hasExactMatch;
+  const combinedItems = useMemo(
+    () => showAddNew ? [...items, ADD_NEW] : items,
+    [items, showAddNew]
+  );
+  const itemToString = itemToStringProp ?? defaultItemToString;
+  const itemToKey = itemToKeyProp ?? defaultItemToKey;
+  const {
+    getSelectedItemProps,
+    getDropdownProps,
+    reset,
+    selectedItems,
+    addSelectedItem,
+    removeSelectedItem,
+    setSelectedItems
+  } = useMultipleSelection({
+    itemToKey,
+    initialSelectedItems,
+    initialActiveIndex,
+    defaultSelectedItems,
+    defaultActiveIndex,
+    activeIndex: activeIndexProp,
+    selectedItems: selectedItemsProp,
+    environment: environmentProp ?? environment,
+    stateReducer(state, { type, changes }) {
+      switch (type) {
+        // the Chip itself will handle "Backspace" and "Delete"
+        // just return previous state
+        case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace:
+        case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete:
+          return state;
+        case useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem:
+          return { ...changes, activeIndex: -1 };
+        case useMultipleSelection.stateChangeTypes.FunctionReset:
+          return { ...changes, selectedItems: [] };
+        default:
+          return changes;
+      }
+    },
+    onStateChange({ type }) {
+      switch (type) {
+        case useMultipleSelection.stateChangeTypes.FunctionReset:
+          storedSetInputValue?.("");
+          break;
+      }
+    },
+    onSelectedItemsChange(changes) {
+      const { selectedItems: selectedItems2 } = changes;
+      if (onChange != null) onChange(selectedItems2);
+      if (onSelectedItemsChange != null) onSelectedItemsChange(changes);
+    }
+  });
+  const {
+    isOpen,
+    getLabelProps,
+    getInputProps,
+    getToggleButtonProps,
+    getMenuProps,
+    getItemProps,
+    highlightedIndex,
+    selectedItem,
+    selectItem,
+    setInputValue,
+    inputValue,
+    closeMenu
+  } = useCombobox$1({
+    ...rest,
+    items: combinedItems,
+    itemToString,
+    itemToKey,
+    selectedItem: null,
+    isOpen: open,
+    initialIsOpen: open,
+    environment: environmentProp ?? environment,
+    // NOTE: Reducer needs to be pure, side-effects should be in event handlers
+    stateReducer(state, { type, changes }) {
+      switch (type) {
+        // keep ComboboxLegacy open onBlur, will call close using Popover's onOutsidePress
+        case useCombobox$1.stateChangeTypes.InputBlur:
+          return {
+            ...changes,
+            inputValue: state.inputValue,
+            selectedItem: null,
+            isOpen: open != null ? open : true,
+            highlightedIndex: state.highlightedIndex
+          };
+        case useCombobox$1.stateChangeTypes.InputKeyDownEnter:
+        case useCombobox$1.stateChangeTypes.ItemClick:
+          if (changes.selectedItem === ADD_NEW) {
+            const stateInputValue = state.inputValue;
+            setTimeout(() => {
+              onSelectItemAddNew?.(stateInputValue);
+            }, 0);
+            return {
+              ...changes,
+              selectedItem: state.selectedItem,
+              inputValue: ""
+            };
+          } else {
+            return {
+              ...changes,
+              isOpen: open != null ? open : disableCloseOnSelectItem ? true : changes.isOpen,
+              highlightedIndex: disableCloseOnSelectItem ? disableClearInputValueOnSelectItem || !state.inputValue ? state.highlightedIndex : 0 : changes.highlightedIndex,
+              inputValue: disableClearInputValueOnSelectItem ? state.inputValue : ""
+            };
+          }
+        // prevent this from closing the popover by default
+        case useCombobox$1.stateChangeTypes.InputClick:
+          return { ...changes, isOpen: open != null ? open : true };
+        // prevent this from clearing the input value by default
+        case useCombobox$1.stateChangeTypes.ControlledPropUpdatedSelectedItem:
+          return { ...changes, inputValue: state.inputValue };
+        default:
+          return changes;
+      }
+    },
+    onStateChange({ type, selectedItem: newSelectedItem }) {
+      switch (type) {
+        case useCombobox$1.stateChangeTypes.InputKeyDownEnter:
+        case useCombobox$1.stateChangeTypes.ItemClick:
+        case useCombobox$1.stateChangeTypes.InputBlur:
+          if (newSelectedItem != null) {
+            const itemAlreadySelected = selectedItems.some(
+              (item) => itemToKey(item) === itemToKey(newSelectedItem)
+            );
+            if (itemAlreadySelected) {
+              removeSelectedItem(newSelectedItem);
+            } else {
+              addSelectedItem(newSelectedItem);
+            }
+          }
+          break;
+      }
+    },
+    onInputValueChange: onInputValueChange ?? (({ inputValue: inputValue2, ...changes }) => {
+      const { type, selectedItem: selectedItem2 } = changes;
+      const inputValueMatchesSelectedItem = selectedItem2 != null && inputValue2 === itemToString(selectedItem2);
+      const inputValueIsEmpty = inputValue2 == null || inputValue2 === "";
+      if (type === useCombobox$1.stateChangeTypes.InputKeyDownEnter || type === useCombobox$1.stateChangeTypes.ItemClick) {
+        setItems(itemsProp);
+        setHasExactMatch(true);
+      } else if (!inputValueMatchesSelectedItem && !inputValueIsEmpty) {
+        setItems(matchSorter(itemsProp, inputValue2, filterOptions));
+        setHasExactMatch(
+          matchSorter(itemsProp, inputValue2, {
+            ...filterOptions,
+            threshold: matchSorter.rankings.EQUAL
+          }).length > 0
+        );
+      } else {
+        setItems(itemsProp);
+        setHasExactMatch(true);
+      }
+    }),
+    onIsOpenChange({ isOpen: isOpen2 }) {
+      if (isOpen2 === false) {
+        setInputValue("");
+        setItems(itemsProp);
+      }
+    },
+    isItemDisabled(item) {
+      if (isDisabled || isReadOnly) {
+        return !!isDisabled || !!isReadOnly;
+      }
+      if (item && item instanceof Object && "disabled" in item && item.disabled) {
+        return true;
+      }
+      if (item && item instanceof Object && "readOnly" in item && item.readOnly) {
+        return true;
+      }
+      if (disabledItems.includes(item)) {
+        return true;
+      }
+      return false;
+    }
+  });
+  storedSetInputValue = setInputValue;
+  const firstRenderRef = useRef(true);
+  useEffect(() => {
+    if (firstRenderRef.current === true) {
+      firstRenderRef.current = false;
+    }
+  }, []);
+  useEffect(() => {
+    setIsDisabled(disabled);
+  }, [disabled]);
+  useEffect(() => {
+    setIsReadOnly(readOnly);
+  }, [readOnly]);
+  useEffect(() => {
+    if (firstRenderRef.current) return;
+    const inputValueIsEmpty = inputValue == null || inputValue === "";
+    if (!inputValueIsEmpty) {
+      setItems(matchSorter(itemsProp, inputValue, filterOptions));
+      setHasExactMatch(
+        matchSorter(itemsProp, inputValue, {
+          ...filterOptions,
+          threshold: matchSorter.rankings.EQUAL
+        }).length > 0
+      );
+    } else {
+      setItems(itemsProp);
+      setHasExactMatch(true);
+    }
+  }, [itemsProp]);
+  return /* @__PURE__ */ jsx(
+    ComboboxLegacyContext.Provider,
+    {
+      value: {
+        multiple: true,
+        select: false,
+        items,
+        itemToString,
+        itemToKey,
+        isOpen,
+        getLabelProps,
+        getInputProps,
+        getToggleButtonProps,
+        getMenuProps,
+        getItemProps,
+        highlightedIndex,
+        selectedItem,
+        selectedItems,
+        disabledItems,
+        setDisabledItems,
+        getSelectedItemProps,
+        getDropdownProps,
+        reset,
+        addSelectedItem,
+        removeSelectedItem,
+        setSelectedItems,
+        selectItem,
+        inputValue,
+        isDisabled,
+        isReadOnly,
+        setIsReadOnly,
+        setIsDisabled,
+        hasDisabledPopover,
+        setHasDisabledPopover,
+        hasEmpty,
+        setHasEmpty,
+        hasAddNew,
+        setHasAddNew,
+        onSelectItemAddNew,
+        setOnSelectItemAddNew,
+        hasExactMatch,
+        setHasExactMatch,
+        loading,
+        referenceRef,
+        contentRef,
+        closeMenu
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: ComboboxLegacyClassNames,
+          "data-anv": "combobox",
+          style: { ...style, ...layoutStyles },
+          ref: wrapperDivRef,
+          children: /* @__PURE__ */ jsx(
+            Popover,
+            {
+              root,
+              open: !isDisabled && isOpen,
+              noPadding: true,
+              disableCaret: true,
+              fitScreen: true,
+              disableFlipFallback: true,
+              placement: "bottom-start",
+              matchReferenceWidth: !disableMatchReferenceWidth,
+              disableCloseOnClickOutside,
+              onOutsidePress: handleOutsidePress,
+              children
+            }
+          )
+        }
+      )
+    }
+  );
+};
+const SelectLegacySingle = function(props) {
+  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
+  const {
+    className,
+    style,
+    children,
+    open,
+    disabled,
+    readOnly,
+    items,
+    itemToString: itemToStringProp,
+    itemToKey: itemToKeyProp,
+    onChange,
+    disableClearSelection = false,
+    disableCloseOnClickOutside = false,
+    disableMatchReferenceWidth = false,
+    disableCloseOnSelectItem = false,
+    loading = false,
+    root,
+    environment: environmentProp,
+    ...rest
+  } = componentProps;
+  const ComboboxLegacyClassNames = cx(styles$1["combobox"], className);
+  const [hasDisabledPopover, setHasDisabledPopover] = useState(false);
+  const [hasEmpty, setHasEmpty] = useState(false);
+  const [disabledItems, setDisabledItems] = useState([]);
+  const [isReadOnly, setIsReadOnly] = useState(readOnly);
+  const [isDisabled, setIsDisabled] = useState(disabled);
+  const referenceRef = useRef(null);
+  const contentRef = useRef(null);
+  const handleOutsidePress = (e) => {
+    const clickedInsideReference = referenceRef.current && e.target != null && referenceRef.current.contains(e.target);
+    if (!clickedInsideReference) {
+      closeMenu();
+      return true;
+    } else {
+      return false;
+    }
+  };
+  const { ref: wrapperDivRef, environment } = useDownshiftEnvironment();
+  const itemToString = itemToStringProp ?? defaultItemToString;
+  const itemToKey = itemToKeyProp ?? defaultItemToKey;
+  const {
+    isOpen,
+    getLabelProps,
+    getToggleButtonProps,
+    getMenuProps,
+    getItemProps,
+    highlightedIndex,
+    selectedItem,
+    selectItem,
+    inputValue,
+    closeMenu
+  } = useSelect({
+    ...rest,
+    items,
+    itemToString,
+    itemToKey,
+    isOpen: open,
+    initialIsOpen: open,
+    environment: environmentProp ?? environment,
+    // NOTE: Reducer needs to be pure, side-effects should be in event handlers
+    stateReducer(state, { type, changes }) {
+      switch (type) {
+        // keep ComboboxLegacy open onBlur, will call close using Popover's onOutsidePress
+        case useSelect.stateChangeTypes.ToggleButtonBlur:
+          return {
+            ...changes,
+            isOpen: open != null ? open : true,
+            highlightedIndex: state.highlightedIndex
+          };
+        case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
+        case useSelect.stateChangeTypes.ItemClick:
+          return {
+            ...changes,
+            isOpen: open != null ? open : disableCloseOnSelectItem ? true : changes.isOpen,
+            highlightedIndex: disableCloseOnSelectItem ? 0 : changes.highlightedIndex
+          };
+        // prevent this from closing the popover by default
+        case useSelect.stateChangeTypes.ToggleButtonClick:
+          return { ...changes, isOpen: open != null ? open : true };
+        default:
+          return changes;
+      }
+    },
+    onSelectedItemChange(changes) {
+      const { selectedItem: selectedItem2 } = changes;
+      if (onChange != null)
+        onChange(selectedItem2 != null ? selectedItem2 : null);
+    },
+    isItemDisabled(item) {
+      if (isDisabled || isReadOnly) {
+        return !!isDisabled || !!isReadOnly;
+      }
+      if (item && item instanceof Object && "disabled" in item && item.disabled) {
+        return true;
+      }
+      if (item && item instanceof Object && "readOnly" in item && item.readOnly) {
+        return true;
+      }
+      if (disabledItems.includes(item)) {
+        return true;
+      }
+      return false;
+    }
+  });
+  useEffect(() => {
+    setIsDisabled(disabled);
+  }, [disabled]);
+  useEffect(() => {
+    setIsReadOnly(readOnly);
+  }, [readOnly]);
+  return /* @__PURE__ */ jsx(
+    ComboboxLegacyContext.Provider,
+    {
+      value: {
+        multiple: false,
+        select: true,
+        disableClearSelection,
+        items,
+        itemToString,
+        itemToKey,
+        isOpen,
+        getLabelProps,
+        getToggleButtonProps,
+        getMenuProps,
+        getItemProps,
+        highlightedIndex,
+        selectedItem,
+        selectedItems: [],
+        disabledItems,
+        setDisabledItems,
+        selectItem,
+        inputValue,
+        isDisabled,
+        isReadOnly,
+        setIsReadOnly,
+        setIsDisabled,
+        hasDisabledPopover,
+        setHasDisabledPopover,
+        hasEmpty,
+        setHasEmpty,
+        loading,
+        referenceRef,
+        contentRef,
+        closeMenu
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: ComboboxLegacyClassNames,
+          "data-anv": "combobox",
+          style: { ...style, ...layoutStyles },
+          ref: wrapperDivRef,
+          children: /* @__PURE__ */ jsx(
+            Popover,
+            {
+              root,
+              open: isOpen,
+              noPadding: true,
+              disableCaret: true,
+              fitScreen: true,
+              disableFlipFallback: true,
+              placement: "bottom-start",
+              matchReferenceWidth: !disableMatchReferenceWidth,
+              disableCloseOnClickOutside,
+              onOutsidePress: handleOutsidePress,
+              children
+            }
+          )
+        }
+      )
+    }
+  );
+};
+const SelectLegacyMultiple = function(props) {
+  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
+  const {
+    className,
+    style,
+    children,
+    open,
+    items,
+    itemToString: itemToStringProp,
+    itemToKey: itemToKeyProp,
+    onChange,
+    onSelectedItemsChange,
+    disableCloseOnClickOutside = false,
+    disableMatchReferenceWidth = false,
+    disableCloseOnSelectItem = false,
+    loading = false,
+    root,
+    disabled,
+    readOnly,
+    stateReducer: _,
+    initialSelectedItems,
+    initialActiveIndex,
+    defaultSelectedItems,
+    defaultActiveIndex,
+    activeIndex: activeIndexProp,
+    selectedItems: selectedItemsProp,
+    environment: environmentProp,
+    ...rest
+  } = componentProps;
+  const ComboboxLegacyClassNames = cx(styles$1["combobox"], className);
+  const [hasDisabledPopover, setHasDisabledPopover] = useState(false);
+  const [hasEmpty, setHasEmpty] = useState(false);
+  const [disabledItems, setDisabledItems] = useState([]);
+  const [isReadOnly, setIsReadOnly] = useState(readOnly);
+  const [isDisabled, setIsDisabled] = useState(disabled);
+  const referenceRef = useRef(null);
+  const contentRef = useRef(null);
+  const handleOutsidePress = (e) => {
+    const clickedInsideReference = referenceRef.current && e.target != null && referenceRef.current.contains(e.target);
+    if (!clickedInsideReference) {
+      closeMenu();
+      return true;
+    } else {
+      return false;
+    }
+  };
+  const { ref: wrapperDivRef, environment } = useDownshiftEnvironment();
+  const itemToString = itemToStringProp ?? defaultItemToString;
+  const itemToKey = itemToKeyProp ?? defaultItemToKey;
+  const {
+    getSelectedItemProps,
+    getDropdownProps,
+    reset,
+    selectedItems,
+    addSelectedItem,
+    removeSelectedItem,
+    setSelectedItems
+  } = useMultipleSelection({
+    itemToKey,
+    initialSelectedItems,
+    initialActiveIndex,
+    defaultSelectedItems,
+    defaultActiveIndex,
+    activeIndex: activeIndexProp,
+    selectedItems: selectedItemsProp,
+    environment: environmentProp ?? environment,
+    stateReducer(state, { type, changes }) {
+      switch (type) {
+        // the Chip itself will handle "Backspace" and "Delete"
+        // just return previous state
+        case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace:
+        case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete:
+          return state;
+        case useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem:
+          return { ...changes, activeIndex: -1 };
+        case useMultipleSelection.stateChangeTypes.FunctionReset:
+          return { ...changes, selectedItems: [] };
+        default:
+          return changes;
+      }
+    },
+    onSelectedItemsChange(changes) {
+      const { selectedItems: selectedItems2 } = changes;
+      if (onChange != null) onChange(selectedItems2);
+      if (onSelectedItemsChange != null) onSelectedItemsChange(changes);
+    }
+  });
+  const {
+    isOpen,
+    getLabelProps,
+    getToggleButtonProps,
+    getMenuProps,
+    getItemProps,
+    highlightedIndex,
+    selectedItem,
+    selectItem,
+    inputValue,
+    closeMenu
+  } = useSelect({
+    ...rest,
+    items,
+    itemToString,
+    itemToKey,
+    selectedItem: null,
+    isOpen: open,
+    initialIsOpen: open,
+    environment: environmentProp ?? environment,
+    // NOTE: Reducer needs to be pure, side-effects should be in event handlers
+    stateReducer(state, { type, changes }) {
+      switch (type) {
+        // keep ComboboxLegacy open onBlur, will call close using Popover's onOutsidePress
+        case useSelect.stateChangeTypes.ToggleButtonBlur:
+          return {
+            ...changes,
+            selectedItem: null,
+            isOpen: open != null ? open : true,
+            highlightedIndex: state.highlightedIndex
+          };
+        case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
+        case useSelect.stateChangeTypes.ItemClick:
+          return {
+            ...changes,
+            isOpen: open != null ? open : disableCloseOnSelectItem ? true : changes.isOpen,
+            highlightedIndex: disableCloseOnSelectItem ? 0 : changes.highlightedIndex
+          };
+        // prevent this from closing the popover by default
+        case useSelect.stateChangeTypes.ToggleButtonClick:
+          return { ...changes, isOpen: open != null ? open : true };
+        default:
+          return changes;
+      }
+    },
+    onStateChange({ type, selectedItem: newSelectedItem }) {
+      switch (type) {
+        case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
+        case useSelect.stateChangeTypes.ItemClick:
+        case useSelect.stateChangeTypes.ToggleButtonBlur:
+          if (newSelectedItem != null) {
+            const itemAlreadySelected = selectedItems.some(
+              (item) => itemToKey(item) === itemToKey(newSelectedItem)
+            );
+            if (itemAlreadySelected) {
+              removeSelectedItem(newSelectedItem);
+            } else {
+              addSelectedItem(newSelectedItem);
+            }
+          }
+          break;
+      }
+    },
+    isItemDisabled(item) {
+      if (isDisabled || isReadOnly) {
+        return !!isDisabled || !!isReadOnly;
+      }
+      if (item && item instanceof Object && "disabled" in item && item.disabled) {
+        return true;
+      }
+      if (item && item instanceof Object && "readOnly" in item && item.readOnly) {
+        return true;
+      }
+      if (disabledItems.includes(item)) {
+        return true;
+      }
+      return false;
+    }
+  });
+  useEffect(() => {
+    setIsDisabled(disabled);
+  }, [disabled]);
+  useEffect(() => {
+    setIsReadOnly(readOnly);
+  }, [readOnly]);
+  return /* @__PURE__ */ jsx(
+    ComboboxLegacyContext.Provider,
+    {
+      value: {
+        multiple: true,
+        select: true,
+        items,
+        itemToString,
+        itemToKey,
+        isOpen,
+        getLabelProps,
+        getToggleButtonProps,
+        getMenuProps,
+        getItemProps,
+        highlightedIndex,
+        selectedItem,
+        selectedItems,
+        disabledItems,
+        setDisabledItems,
+        getSelectedItemProps,
+        getDropdownProps,
+        reset,
+        addSelectedItem,
+        removeSelectedItem,
+        setSelectedItems,
+        selectItem,
+        inputValue,
+        isDisabled,
+        isReadOnly,
+        setIsReadOnly,
+        setIsDisabled,
+        hasDisabledPopover,
+        setHasDisabledPopover,
+        hasEmpty,
+        setHasEmpty,
+        loading,
+        referenceRef,
+        contentRef,
+        closeMenu
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: ComboboxLegacyClassNames,
+          "data-anv": "combobox",
+          style: { ...style, ...layoutStyles },
+          ref: wrapperDivRef,
+          children: /* @__PURE__ */ jsx(
+            Popover,
+            {
+              root,
+              open: !isDisabled && isOpen,
+              noPadding: true,
+              disableCaret: true,
+              fitScreen: true,
+              disableFlipFallback: true,
+              placement: "bottom-start",
+              matchReferenceWidth: !disableMatchReferenceWidth,
+              disableCloseOnClickOutside,
+              onOutsidePress: handleOutsidePress,
+              children
+            }
+          )
+        }
+      )
+    }
+  );
+};
+
+const ComboboxLegacyTrigger = ({
+  // variant: variantProp = "combobox",
+  className,
+  label,
+  size,
+  error,
+  hint,
+  description,
+  required,
+  moreInfo,
+  openMoreInfo,
+  prefix,
+  suffix,
+  maxRows,
+  id,
+  disabled,
+  readOnly,
+  ...rest
+}) => {
+  const {
+    select,
+    disableClearSelection,
+    itemToString,
+    getLabelProps,
+    getInputProps,
+    getToggleButtonProps,
+    selectedItem,
+    selectedItems,
+    getSelectedItemProps,
+    getDropdownProps,
+    reset,
+    removeSelectedItem,
+    selectItem,
+    inputValue,
+    isDisabled,
+    isReadOnly,
+    referenceRef,
+    contentRef,
+    closeMenu,
+    setIsDisabled,
+    setIsReadOnly
+  } = useComboboxLegacy();
+  const variant = select ? "select" : "combobox";
+  const context = usePopoverLegacyContext();
+  const inputRef = useRef(null);
+  const ComboboxLegacyTriggerClassNames = cx(styles$1["search-field"], {
+    [styles$1["select"]]: variant === "select"
+  });
+  const noClearButton = isDisabled || isReadOnly || disableClearSelection;
+  const ComboboxLegacyInputWrapperClassNames = cx(
+    styles$1["input-wrapper"],
+    className ? {
+      [className]: variant === "select"
+    } : {},
+    {
+      [styles$1["small"]]: size === "small",
+      [styles$1["large"]]: size === "large",
+      [styles$1["no-clear-button"]]: noClearButton
+    }
+  );
+  const ComboboxLegacyInputClassNames = cx(
+    styles$1["input"],
+    className ? {
+      [className]: variant === "combobox"
+    } : {},
+    {
+      [styles$1["error"]]: error
+    }
+  );
+  useLayoutEffect(() => {
+    if (typeof disabled === "undefined") return;
+    setIsDisabled(disabled);
+  }, [disabled, setIsDisabled]);
+  useLayoutEffect(() => {
+    if (typeof readOnly === "undefined") return;
+    setIsReadOnly(readOnly);
+  }, [readOnly, setIsReadOnly]);
+  const labelUid = "label" + useId();
+  const helperUid = "helper" + useId();
+  const placeholderUid = "placeholder" + useId();
+  const ariaDescribedBy = `${helperUid} ${placeholderUid}`;
+  const errorMessage = typeof error !== "boolean" ? error : void 0;
+  const handleBlur = (e) => {
+    const target = e.relatedTarget ?? e.target;
+    const focusedOnReference = referenceRef.current && referenceRef.current.contains(target);
+    const focusedOnContent = contentRef.current && contentRef.current.contains(target);
+    if (!focusedOnReference && !focusedOnContent) {
+      closeMenu();
+    }
+  };
+  const rowsRef = useRef(null);
+  const [stillCalculating, setStillCalculating] = useState(false);
+  const [collapsedChips, setCollapsedChips] = useState(false);
+  const [visibleChipsCount, setVisibleChipsCount] = useState(
+    null
+  );
+  const [forceRenderCount, setForceRenderCount] = useState(0);
+  useLayoutEffect(() => {
+    if (maxRows === void 0) return;
+    if (stillCalculating === false) {
+      setStillCalculating(true);
+      setCollapsedChips(false);
+      setVisibleChipsCount(null);
+      setForceRenderCount((x) => x + 1);
+    } else if (rowsRef?.current?.children) {
+      const children = rowsRef?.current?.children;
+      const rowData = Array.from(children).reduce(
+        (acc, child) => {
+          const top = child.getBoundingClientRect().top;
+          if (!acc.length) {
+            return [{ count: 1, top }];
+          } else if (acc[acc.length - 1].top === top) {
+            return [
+              ...acc.slice(0, -1),
+              { count: acc[acc.length - 1].count + 1, top }
+            ];
+          } else if (acc[acc.length - 1].top !== top) {
+            return [...acc, { count: 1, top }];
+          } else {
+            return acc;
+          }
+        },
+        []
+      );
+      if (!rowData[maxRows] || visibleChipsCount === 0) {
+        setStillCalculating(false);
+      } else {
+        setCollapsedChips(true);
+        if (visibleChipsCount == null) {
+          const firstGuess = Math.max(
+            rowData.reduce((sum, row) => sum + row.count, -2),
+            0
+          );
+          setVisibleChipsCount(firstGuess);
+        } else {
+          setVisibleChipsCount(visibleChipsCount - 1);
+        }
+        setForceRenderCount((x) => x + 1);
+      }
+    }
+  }, [selectedItems.length, maxRows, forceRenderCount]);
+  const selectedItemsDisplayCount = collapsedChips && maxRows != null && visibleChipsCount !== null ? visibleChipsCount : selectedItems.length;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: ComboboxLegacyTriggerClassNames,
+      "data-anv": "combobox-searchfield",
+      ref: referenceRef,
+      onBlur: handleBlur,
+      children: [
+        label ? /* @__PURE__ */ jsx(
+          Label,
+          {
+            ...getLabelProps({
+              className: styles$1["label"],
+              required,
+              moreInfo,
+              openMoreInfo,
+              id: labelUid
+            }),
+            children: label
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: ComboboxLegacyInputWrapperClassNames,
+            role: "presentation",
+            ...variant === "select" ? {
+              ...getToggleButtonProps({
+                disabled: isDisabled,
+                readOnly: isReadOnly,
+                ref: context.refs.setReference,
+                id,
+                "aria-describedby": ariaDescribedBy,
+                "aria-labelledby": labelUid
+              })
+            } : {
+              ref: context.refs.setReference,
+              onClick: () => inputRef.current?.focus()
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: styles$1["buttons-wrapper"], children: [
+                (inputValue || selectedItem || selectedItems.length) && !noClearButton ? /* @__PURE__ */ jsx("div", { className: styles$1["close-button-wrapper"], children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    "aria-label": "clear selection",
+                    appearance: "ghost",
+                    size: "small",
+                    icon: SvgClose,
+                    className: styles$1["close-button"],
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      if (reset != null) {
+                        reset();
+                      } else {
+                        selectItem(null);
+                      }
+                    },
+                    tabIndex: -1
+                  }
+                ) }) : null,
+                /* @__PURE__ */ jsx("div", { className: styles$1["toggle-button-wrapper"], children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    ...variant === "select" ? { tabIndex: -1 } : getToggleButtonProps(),
+                    className: styles$1["toggle-button"],
+                    "aria-label": "toggle menu",
+                    icon: SvgChevronRight,
+                    appearance: "ghost",
+                    size: "small",
+                    disabled: isDisabled
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: styles$1["rows-wrapper"], ref: rowsRef, children: [
+                selectedItems.length && removeSelectedItem != null && getSelectedItemProps != null ? selectedItems.slice(0, selectedItemsDisplayCount).map((item, index) => {
+                  const { onClick, ...selectedItemProps } = getSelectedItemProps({
+                    selectedItem: item,
+                    index
+                  });
+                  return /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: styles$1["chip-wrapper"],
+                      children: /* @__PURE__ */ jsx(
+                        Chip,
+                        {
+                          ...selectedItemProps,
+                          label: itemToString(item),
+                          onClose: isDisabled || isReadOnly ? void 0 : (_e) => {
+                            removeSelectedItem(item);
+                          },
+                          className: styles$1["chip"],
+                          title: itemToString(item)
+                        }
+                      )
+                    },
+                    `selected-item-${index}`
+                  );
+                }) : null,
+                collapsedChips && maxRows != null ? /* @__PURE__ */ jsx("div", { className: styles$1["chip-wrapper"], children: /* @__PURE__ */ jsx(
+                  Chip,
+                  {
+                    label: `+${selectedItems.length - selectedItemsDisplayCount}`,
+                    className: styles$1["chip"],
+                    title: selectedItems.slice(selectedItemsDisplayCount).map((item) => itemToString(item)).join(", ")
+                  }
+                ) }) : null,
+                /* @__PURE__ */ jsxs(Flex, { className: styles$1["input-flex"], alignItems: "center", children: [
+                  prefix ? /* @__PURE__ */ jsx("div", { className: styles$1["prefix"], children: prefix }) : null,
+                  variant === "select" ? /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      ...getDropdownProps != null ? getDropdownProps({
+                        className: ComboboxLegacyInputClassNames,
+                        required,
+                        preventKeyAction: false
+                      }) : {
+                        className: ComboboxLegacyInputClassNames,
+                        required
+                      },
+                      children: selectedItems.length ? null : selectedItem ? itemToString(selectedItem) : /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: styles$1["fake-placeholder"],
+                          id: placeholderUid,
+                          children: rest.placeholder
+                        }
+                      )
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      ...getDropdownProps != null && getInputProps != null ? getInputProps(
+                        getDropdownProps({
+                          ...rest,
+                          className: ComboboxLegacyInputClassNames,
+                          disabled: isDisabled,
+                          readOnly: isReadOnly,
+                          required,
+                          autoComplete: "off",
+                          id,
+                          "aria-describedby": ariaDescribedBy,
+                          "aria-labelledby": labelUid,
+                          preventKeyAction: false,
+                          ref: inputRef
+                        })
+                      ) : getInputProps != null ? getInputProps({
+                        ...rest,
+                        className: ComboboxLegacyInputClassNames,
+                        disabled: isDisabled,
+                        readOnly: isReadOnly,
+                        required,
+                        autoComplete: "off",
+                        id,
+                        "aria-describedby": ariaDescribedBy,
+                        "aria-labelledby": labelUid,
+                        ref: inputRef
+                      }) : {}
+                    }
+                  ),
+                  suffix ? /* @__PURE__ */ jsx("div", { className: styles$1["suffix"], children: suffix }) : null
+                ] })
+              ] })
+            ]
+          }
+        ),
+        hint || errorMessage || description ? /* @__PURE__ */ jsx(
+          Helper,
+          {
+            id: helperUid,
+            errorMessage,
+            hint,
+            description
+          }
+        ) : null
+      ]
+    }
+  );
+};
+
+const ComboboxLegacyContent = function({
+  children,
+  className,
+  disablePopover = false,
+  ...rest
+}) {
+  const {
+    items,
+    itemToKey,
+    inputValue,
+    selectedItem,
+    selectedItems,
+    setHasDisabledPopover,
+    getMenuProps,
+    getItemProps,
+    isDisabled,
+    isReadOnly,
+    referenceRef,
+    contentRef,
+    closeMenu
+  } = useComboboxLegacy();
+  const ComboboxLegacyPopoverContentClassNames = cx(
+    styles$1["popover-content"],
+    className
+  );
+  useEffect(() => {
+    setHasDisabledPopover(disablePopover);
+    return () => {
+      setHasDisabledPopover(false);
+    };
+  }, [disablePopover, setHasDisabledPopover]);
+  const handleBlur = (e) => {
+    const target = e.relatedTarget ?? e.target;
+    const focusedOnReference = referenceRef.current && referenceRef.current.contains(target);
+    const focusedOnContent = contentRef.current && contentRef.current.contains(target);
+    if (!focusedOnReference && !focusedOnContent) {
+      closeMenu();
+    }
+  };
+  return disablePopover ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      className: ComboboxLegacyPopoverContentClassNames,
+      ref: contentRef,
+      onBlur: handleBlur,
+      children: children ? children({
+        items,
+        inputValue,
+        selectedItem,
+        getMenuProps,
+        getItemProps,
+        listProps: {
+          ...getMenuProps({}, { suppressRefError: true }),
+          style: {
+            display: items.length ? "" : "none",
+            overflow: "auto"
+          }
+        },
+        options: items.map((item, index) => ({
+          optionProps: {
+            ...getItemProps({
+              item,
+              index
+            }),
+            selected: itemToKey(selectedItem) === itemToKey(item) || selectedItems.some(
+              (selectedItem2) => itemToKey(selectedItem2) === itemToKey(item)
+            ),
+            disabled: !!isDisabled || !!isReadOnly
+            // also see "isItemDisabled" function
+          },
+          item,
+          index
+        }))
+      }) : null
+    }
+  ) : /* @__PURE__ */ jsx(
+    Popover.Content,
+    {
+      "data-anv": "combobox-content",
+      ...rest,
+      className: ComboboxLegacyPopoverContentClassNames,
+      ref: getMenuProps({ ref: contentRef }, { suppressRefError: true }).ref,
+      onBlur: handleBlur,
+      children: children ? children({
+        items,
+        inputValue,
+        selectedItem,
+        getMenuProps,
+        getItemProps,
+        listProps: {
+          ...getMenuProps({}, { suppressRefError: true }),
+          style: {
+            display: items.length ? void 0 : "none",
+            overflow: "auto"
+          }
+        },
+        options: items.map((item, index) => ({
+          optionProps: {
+            ...getItemProps({
+              item,
+              index
+            }),
+            selected: itemToKey(selectedItem) === itemToKey(item) || selectedItems.some(
+              (selectedItem2) => itemToKey(selectedItem2) === itemToKey(item)
+            ),
+            disabled: !!isDisabled || !!isReadOnly
+            // also see "isItemDisabled" function
+          },
+          item,
+          index
+        }))
+      }) : null
+    }
+  );
+};
+
+const ComboboxLegacyList = function({
+  children,
+  ...rest
+}) {
+  const {
+    getMenuProps,
+    multiple,
+    items,
+    hasAddNew = false,
+    hasEmpty,
+    loading
+  } = useComboboxLegacy();
+  if (multiple) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ...getMenuProps(rest),
+          "data-anv": "combobox-list",
+          className: cx(styles$1["listview"], listViewStyles["listview"]),
+          style: {
+            display: items.length || hasAddNew ? void 0 : "none",
+            overflow: "auto"
+          },
+          children: [
+            children,
+            loading ? /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Spinner, { size: "small" }) }) : null
+          ]
+        }
+      ),
+      !items.length && !hasEmpty ? /* @__PURE__ */ jsx("div", { className: styles$1["empty"], children: /* @__PURE__ */ jsx(Text, { subdued: true, size: "small", children: "No match found" }) }) : null
+    ] });
+  } else {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "ul",
+        {
+          ...getMenuProps(rest),
+          "data-anv": "combobox-list",
+          className: listboxStyles["listbox"],
+          style: {
+            display: items.length || hasAddNew ? void 0 : "none",
+            overflow: "auto"
+          },
+          children: [
+            children,
+            loading ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Spinner, { size: "small" }) }) }) : null
+          ]
+        }
+      ),
+      !items.length && !hasEmpty ? /* @__PURE__ */ jsx("div", { className: styles$1["empty"], children: /* @__PURE__ */ jsx(Text, { subdued: true, size: "small", children: "No match found" }) }) : null
+    ] });
+  }
+};
+
+const ComboboxLegacyItem = function({
+  children,
+  disabled: disabledProp,
+  item,
+  index,
+  alignItems,
+  justifyItems,
+  alignContent,
+  justifyContent,
+  placeItems,
+  placeContent,
+  gap,
+  rowGap,
+  columnGap,
+  ...rest
+}) {
+  const {
+    itemToKey,
+    getItemProps,
+    multiple,
+    selectedItem,
+    selectedItems,
+    disabledItems,
+    setDisabledItems,
+    highlightedIndex
+  } = useComboboxLegacy();
+  const disabled = disabledProp || item && item instanceof Object && "disabled" in item && item.disabled;
+  useEffect(() => {
+    if (disabledProp && !disabledItems.includes(item)) {
+      setDisabledItems([...disabledItems, item]);
+    } else if (disabledItems.includes(item)) {
+      setDisabledItems(disabledItems.filter((prevItem) => prevItem === item));
+    }
+    return () => {
+      if (disabledItems.includes(item)) {
+        setDisabledItems(disabledItems.filter((prevItem) => prevItem === item));
+      }
+    };
+  }, [item, disabledProp, setDisabledItems]);
+  if (multiple) {
+    const checked = selectedItems.some(
+      (selectedItem2) => itemToKey(selectedItem2) === itemToKey(item)
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-anv": "combobox-item",
+        ...getItemProps({
+          item,
+          index,
+          "aria-selected": highlightedIndex === index,
+          ...rest
+        }),
+        className: cx(
+          styles$1["listview-option"],
+          listViewStyles["listview-option"]
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: cx(styles$1["cell"], listViewStyles["cell"]), children: /* @__PURE__ */ jsx("div", { className: checkboxStyles["wrapper"], children: /* @__PURE__ */ jsxs("div", { className: checkboxStyles["checkbox"], children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked,
+                "aria-checked": checked,
+                "aria-label": "Select",
+                readOnly: true,
+                ...disabled ? { disabled: true } : {}
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: checkboxStyles["icon-wrapper"], "aria-hidden": true, children: [
+              /* @__PURE__ */ jsx(
+                Icon$2,
+                {
+                  size: "large",
+                  svg: SvgIndeterminateCheckBox,
+                  className: checkboxStyles["icon-indeterminate"]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Icon$2,
+                {
+                  size: "large",
+                  svg: SvgCheckBox,
+                  className: checkboxStyles["icon-checked"]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Icon$2,
+                {
+                  size: "large",
+                  svg: SvgCheckBoxOutlineBlank,
+                  className: checkboxStyles["icon-unchecked"]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true })
+          ] }) }) }),
+          /* @__PURE__ */ jsx(
+            Flex,
+            {
+              grow: 1,
+              shrink: 1,
+              alignItems,
+              justifyItems,
+              alignContent,
+              justifyContent,
+              placeItems,
+              placeContent,
+              gap,
+              rowGap,
+              columnGap,
+              children
+            }
+          )
+        ]
+      }
+    );
+  } else {
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        ...getItemProps({
+          item,
+          index,
+          "aria-selected": highlightedIndex === index,
+          ...rest
+        }),
+        "data-anv": "combobox-item",
+        "data-checked": itemToKey(selectedItem) === itemToKey(item),
+        className: styles$1["item"],
+        ...disabled ? { "aria-disabled": true } : {},
+        children: [
+          /* @__PURE__ */ jsx(
+            Flex,
+            {
+              className: listboxStyles["children"],
+              grow: 1,
+              shrink: 1,
+              alignItems,
+              justifyItems,
+              alignContent,
+              justifyContent,
+              placeItems,
+              placeContent,
+              gap,
+              rowGap,
+              columnGap,
+              children
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Icon$2,
+            {
+              "aria-hidden": true,
+              svg: SvgCheck,
+              inherit: true,
+              className: styles$1["Icon"],
+              style: {
+                opacity: itemToKey(selectedItem) === itemToKey(item) ? 1 : 0
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+};
+const ComboboxLegacyItemAddNew = function({
+  onSelection,
+  ...props
+}) {
+  const { items, setHasAddNew, hasExactMatch, setOnSelectItemAddNew } = useComboboxLegacy();
+  useEffect(() => {
+    setHasAddNew?.(true);
+    return () => {
+      setHasAddNew?.(false);
+    };
+  }, []);
+  useEffect(() => {
+    setOnSelectItemAddNew?.(() => onSelection);
+    return () => {
+      setOnSelectItemAddNew?.(void 0);
+    };
+  }, [setOnSelectItemAddNew, onSelection]);
+  const firstRenderRef = useRef(true);
+  useEffect(() => {
+    if (firstRenderRef.current === true) {
+      firstRenderRef.current = false;
+    }
+  }, []);
+  return !hasExactMatch && !firstRenderRef.current ? /* @__PURE__ */ jsx(
+    ComboboxLegacyItem,
+    {
+      ...props,
+      item: ADD_NEW,
+      index: items.length
+    }
+  ) : null;
+};
+
+const ComboboxLegacyEmpty = function({
+  children
+}) {
+  const { items, setHasEmpty } = useComboboxLegacy();
+  useEffect(() => {
+    setHasEmpty?.(true);
+    return () => {
+      setHasEmpty?.(false);
+    };
+  });
+  return !items.length ? children : null;
+};
+
+const ComboboxEmptyElement = function({
+  children
+}) {
+  const { items, setHasEmpty } = useCombobox();
+  useEffect(() => {
+    setHasEmpty?.(true);
+    return () => {
+      setHasEmpty?.(false);
+    };
+  });
+  if (!supportsPopover()) return;
+  return !items.length ? children : null;
+};
+const ComboboxEmpty = function({
+  children
+}) {
+  if (!supportsPopover())
+    return /* @__PURE__ */ jsx(ComboboxLegacyEmpty, { children });
+  return /* @__PURE__ */ jsx(ComboboxEmptyElement, { children });
+};
+
+const item = "_item_11q9l_22";
+const group = "_group_11q9l_35";
+const combobox = "_combobox_11q9l_50";
+const listview = "_listview_11q9l_59";
+const empty = "_empty_11q9l_63";
+const Icon = "_Icon_11q9l_117";
+const scrolled = "_scrolled_11q9l_165";
+const styles = {
+	item: item,
+	group: group,
+	combobox: combobox,
+	"popover-content": "_popover-content_11q9l_54",
+	listview: listview,
+	empty: empty,
+	"group-title": "_group-title_11q9l_75",
+	"group-list": "_group-list_11q9l_81",
+	Icon: Icon,
+	"scroll-sentinel": "_scroll-sentinel_11q9l_120",
+	"listview-option": "_listview-option_11q9l_129",
+	"select-all": "_select-all_11q9l_159",
+	scrolled: scrolled
+};
+
+function useGroups({
+  items,
+  groupBy,
+  groupToString,
+  groupSorter = (a, b) => `${a}`.localeCompare(`${b}`)
+}) {
+  const { groups, orderedItems } = useMemo(() => {
+    if (!groupBy) return { groups: [], orderedItems: items };
+    const groupsSansItems = [];
+    const groupedItems = {};
+    items.forEach((item) => {
+      const groupKey = item[groupBy];
+      if (!groupedItems[groupKey]) {
+        groupedItems[groupKey] = [];
+      }
+      groupedItems[groupKey].push(item);
+    });
+    Object.keys(groupedItems).forEach((key) => {
+      groupsSansItems.push({
+        key,
+        label: groupToString ? groupToString?.(key) : key
+      });
+    });
+    groupsSansItems.sort((a, b) => groupSorter(a.key, b.key));
+    const orderedItems2 = [];
+    const groups2 = groupsSansItems.map((group) => ({
+      ...group,
+      items: groupedItems[group.key].map((item) => {
+        orderedItems2.push(item);
+        return item;
+      })
+    }));
+    return { groups: groups2, orderedItems: orderedItems2 };
+  }, [groupBy, groupSorter, groupToString, items]);
+  return { groups, orderedItems };
+}
+
+const SelectSingle = function(props) {
+  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
+  const {
+    className,
+    style,
+    children,
+    open,
+    disabled,
+    readOnly,
+    items,
+    itemToString: itemToStringProp,
+    itemToKey: itemToKeyProp,
+    onChange,
+    disableClearSelection = false,
+    disableCloseOnClickOutside = false,
+    disableMatchReferenceWidth = false,
+    disableCloseOnSelectItem = false,
+    loading = false,
+    minPopoverHeight,
+    root,
+    environment: environmentProp,
+    groupBy,
+    groupToString,
+    ...rest
+  } = componentProps;
+  const ComboboxClassNames = cx(styles["combobox"], className);
+  const [hasDisabledPopover, setHasDisabledPopover] = useState(false);
+  const [hasEmpty, setHasEmpty] = useState(false);
+  const [disabledItems, setDisabledItems] = useState([]);
+  const [forceCloseOnSelectItems, setForceCloseOnSelectItems] = useState([]);
+  const [, setForceClearInputValueOnSelectItems] = useState([]);
+  const [isReadOnly, setIsReadOnly] = useState(readOnly);
+  const [isDisabled, setIsDisabled] = useState(disabled);
+  const referenceRef = useRef(null);
+  const contentRef = useRef(null);
+  const listRef = useRef(null);
+  const handleOutsidePress = (_e) => {
+    if (disableCloseOnClickOutside) return;
+    closeMenu();
+  };
+  const { ref: wrapperDivRef, environment } = useDownshiftEnvironment$1();
+  const itemToString = itemToStringProp ?? defaultItemToString$1;
+  const itemToKey = itemToKeyProp ?? defaultItemToKey$1;
+  const { groups, orderedItems } = useGroups({
+    items,
+    groupBy,
+    groupToString
+  });
+  const {
+    isOpen,
+    getLabelProps,
+    getToggleButtonProps,
+    getMenuProps,
+    getItemProps,
+    highlightedIndex,
+    selectedItem,
+    selectItem,
+    inputValue,
+    closeMenu
+  } = useSelect({
+    ...rest,
+    items: orderedItems,
+    itemToString,
+    itemToKey,
+    isOpen: open,
+    initialIsOpen: open,
+    environment: environmentProp ?? environment,
+    // NOTE: Reducer needs to be pure, side-effects should be in event handlers
+    stateReducer(state, { type, changes }) {
+      switch (type) {
+        case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
+        case useSelect.stateChangeTypes.ItemClick:
+          return {
+            ...changes,
+            isOpen: open != null ? open : forceCloseOnSelectItems.includes(changes.selectedItem) ? false : disableCloseOnSelectItem ? true : changes.isOpen,
+            highlightedIndex: disableCloseOnSelectItem ? state.highlightedIndex : changes.highlightedIndex
+          };
+        default:
+          return changes;
+      }
+    },
+    onSelectedItemChange(changes) {
+      const { selectedItem: selectedItem2 } = changes;
+      if (onChange != null)
+        onChange(selectedItem2 != null ? selectedItem2 : null);
+    },
+    isItemDisabled(item) {
+      if (isDisabled || isReadOnly) {
+        return !!isDisabled || !!isReadOnly;
+      }
+      if (item && item instanceof Object && "disabled" in item && item.disabled) {
+        return true;
+      }
+      if (item && item instanceof Object && "readOnly" in item && item.readOnly) {
+        return true;
+      }
+      if (disabledItems.includes(item)) {
+        return true;
+      }
+      return false;
+    }
+  });
+  useEffect(() => {
+    setIsDisabled(disabled);
+  }, [disabled]);
+  useEffect(() => {
+    setIsReadOnly(readOnly);
+  }, [readOnly]);
+  return /* @__PURE__ */ jsx(
+    ComboboxContext.Provider,
+    {
+      value: {
+        multiple: false,
+        select: true,
+        disableClearSelection,
+        items: orderedItems,
+        itemToString,
+        itemToKey,
+        isOpen,
+        getLabelProps,
+        getToggleButtonProps,
+        getMenuProps,
+        getItemProps,
+        highlightedIndex,
+        selectedItem,
+        selectedItems: [],
+        disabledItems,
+        setDisabledItems,
+        setForceCloseOnSelectItems,
+        setForceClearInputValueOnSelectItems,
+        selectItem,
+        inputValue,
+        isDisabled,
+        isReadOnly,
+        setIsReadOnly,
+        setIsDisabled,
+        hasDisabledPopover,
+        setHasDisabledPopover,
+        hasEmpty,
+        setHasEmpty,
+        loading,
+        referenceRef,
+        contentRef,
+        closeMenu,
+        groups,
+        groupBy,
+        groupToString,
+        listRef
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: ComboboxClassNames,
+          "data-anv": "combobox",
+          style: { ...style, ...layoutStyles },
+          ref: wrapperDivRef,
+          children: /* @__PURE__ */ jsx(
+            Popover,
+            {
+              open: isOpen,
+              noPadding: true,
+              disableCaret: true,
+              fitScreen: true,
+              disableFlipFallback: true,
+              placement: "bottom-start",
+              matchReferenceWidth: !disableMatchReferenceWidth,
+              disableCloseOnClickOutside,
+              onOutsidePress: handleOutsidePress,
+              minHeight: minPopoverHeight,
+              children
+            }
+          )
+        }
+      )
+    }
+  );
+};
+const SelectMultiple = function(props) {
+  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
+  const {
+    className,
+    style,
+    children,
+    open,
+    items,
+    itemToString: itemToStringProp,
+    itemToKey: itemToKeyProp,
+    onChange,
+    onSelectedItemsChange,
+    onStateChange,
+    disableCloseOnClickOutside = false,
+    disableMatchReferenceWidth = false,
+    disableCloseOnSelectItem = false,
+    loading = false,
+    minPopoverHeight,
+    root,
+    disabled,
+    readOnly,
+    stateReducer: _,
+    initialSelectedItems,
+    initialActiveIndex,
+    defaultSelectedItems,
+    defaultActiveIndex,
+    activeIndex: activeIndexProp,
+    selectedItems: selectedItemsProp,
+    environment: environmentProp,
+    groupBy,
+    groupToString,
+    selectAll,
+    ...rest
+  } = componentProps;
+  const ComboboxClassNames = cx(styles["combobox"], className);
+  const [hasDisabledPopover, setHasDisabledPopover] = useState(false);
+  const [hasEmpty, setHasEmpty] = useState(false);
+  const [disabledItems, setDisabledItems] = useState([]);
+  const [forceCloseOnSelectItems, setForceCloseOnSelectItems] = useState([]);
+  const [, setForceClearInputValueOnSelectItems] = useState([]);
+  const [isReadOnly, setIsReadOnly] = useState(readOnly);
+  const [isDisabled, setIsDisabled] = useState(disabled);
+  const referenceRef = useRef(null);
+  const contentRef = useRef(null);
+  const listRef = useRef(null);
+  const handleOutsidePress = (_e) => {
+    if (disableCloseOnClickOutside) return;
+    closeMenu();
+  };
+  const { ref: wrapperDivRef, environment } = useDownshiftEnvironment$1();
+  const itemToString = itemToStringProp ?? defaultItemToString$1;
+  const itemToKey = itemToKeyProp ?? defaultItemToKey$1;
+  const { groups, orderedItems: orderedItemsBase } = useGroups({
+    items,
+    groupBy,
+    groupToString
+  });
+  const orderedItems = selectAll ? [SELECT_ALL, ...orderedItemsBase] : orderedItemsBase;
+  const {
+    getSelectedItemProps,
+    getDropdownProps,
+    reset,
+    selectedItems,
+    addSelectedItem,
+    removeSelectedItem,
+    setSelectedItems
+  } = useMultipleSelection({
+    itemToKey,
+    initialSelectedItems,
+    initialActiveIndex,
+    defaultSelectedItems,
+    defaultActiveIndex,
+    activeIndex: activeIndexProp,
+    selectedItems: selectedItemsProp,
+    environment: environmentProp ?? environment,
+    stateReducer(state, { type, changes }) {
+      switch (type) {
+        // the Chip itself will handle "Backspace" and "Delete"
+        // just return previous state
+        case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace:
+        case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete:
+          return state;
+        case useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem:
+          return { ...changes, activeIndex: -1 };
+        case useMultipleSelection.stateChangeTypes.FunctionReset:
+          return { ...changes, selectedItems: [] };
+        default:
+          return changes;
+      }
+    },
+    onStateChange,
+    onSelectedItemsChange(changes) {
+      const { selectedItems: selectedItems2 } = changes;
+      if (onChange != null) onChange(selectedItems2);
+      if (onSelectedItemsChange != null) onSelectedItemsChange(changes);
+    }
+  });
+  const {
+    isOpen,
+    getLabelProps,
+    getToggleButtonProps,
+    getMenuProps,
+    getItemProps,
+    highlightedIndex,
+    selectedItem,
+    selectItem,
+    inputValue,
+    closeMenu
+  } = useSelect({
+    ...rest,
+    items: orderedItems,
+    itemToString,
+    itemToKey,
+    selectedItem: null,
+    isOpen: open,
+    initialIsOpen: open,
+    environment: environmentProp ?? environment,
+    // NOTE: Reducer needs to be pure, side-effects should be in event handlers
+    stateReducer(state, { type, changes }) {
+      switch (type) {
+        case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
+        case useSelect.stateChangeTypes.ItemClick:
+          return {
+            ...changes,
+            isOpen: open != null ? open : forceCloseOnSelectItems.includes(changes.selectedItem) ? false : disableCloseOnSelectItem ? true : changes.isOpen,
+            highlightedIndex: disableCloseOnSelectItem ? state.highlightedIndex : changes.highlightedIndex
+          };
+        default:
+          return changes;
+      }
+    },
+    onStateChange(changes) {
+      const { type, selectedItem: newSelectedItem } = changes;
+      switch (type) {
+        case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
+        case useSelect.stateChangeTypes.ItemClick:
+        case useSelect.stateChangeTypes.ToggleButtonBlur:
+          if (changes.selectedItem === SELECT_ALL) {
+            selectAll?.onSelection();
+            return {
+              ...changes,
+              selectedItem: null
+            };
+          }
+          if (newSelectedItem != null) {
+            const itemAlreadySelected = selectedItems.some(
+              (item) => itemToKey(item) === itemToKey(newSelectedItem)
+            );
+            if (itemAlreadySelected) {
+              removeSelectedItem(newSelectedItem);
+            } else {
+              addSelectedItem(newSelectedItem);
+            }
+          }
+          break;
+      }
+      onStateChange?.(changes);
+    },
+    isItemDisabled(item) {
+      if (isDisabled || isReadOnly) {
+        return !!isDisabled || !!isReadOnly;
+      }
+      if (item && item instanceof Object && "disabled" in item && item.disabled) {
+        return true;
+      }
+      if (item && item instanceof Object && "readOnly" in item && item.readOnly) {
+        return true;
+      }
+      if (disabledItems.includes(item)) {
+        return true;
+      }
+      return false;
+    },
+    onHighlightedIndexChange(changes) {
+      if (selectAll && changes.highlightedIndex === 0 && [
+        useSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown,
+        useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp,
+        useSelect.stateChangeTypes.ToggleButtonKeyDownPageDown,
+        useSelect.stateChangeTypes.ToggleButtonKeyDownPageUp,
+        useSelect.stateChangeTypes.ToggleButtonKeyDownHome,
+        useSelect.stateChangeTypes.ToggleButtonKeyDownEnd
+      ].includes(changes.type) && listRef.current) {
+        const scrollParent = getScrollParent(listRef.current);
+        if (scrollParent) {
+          scrollParent.scrollTop = 0;
+        }
+      }
+    }
+  });
+  useEffect(() => {
+    setIsDisabled(disabled);
+  }, [disabled]);
+  useEffect(() => {
+    setIsReadOnly(readOnly);
+  }, [readOnly]);
+  return /* @__PURE__ */ jsx(
+    ComboboxContext.Provider,
+    {
+      value: {
+        multiple: true,
+        select: true,
+        items: orderedItems,
+        itemToString,
+        itemToKey,
+        isOpen,
+        getLabelProps,
+        getToggleButtonProps,
+        getMenuProps,
+        getItemProps,
+        highlightedIndex,
+        selectedItem,
+        selectedItems,
+        disabledItems,
+        setDisabledItems,
+        setForceCloseOnSelectItems,
+        setForceClearInputValueOnSelectItems,
+        getSelectedItemProps,
+        getDropdownProps,
+        reset,
+        addSelectedItem,
+        removeSelectedItem,
+        setSelectedItems,
+        selectItem,
+        inputValue,
+        isDisabled,
+        isReadOnly,
+        setIsReadOnly,
+        setIsDisabled,
+        hasDisabledPopover,
+        setHasDisabledPopover,
+        hasEmpty,
+        setHasEmpty,
+        loading,
+        referenceRef,
+        contentRef,
+        closeMenu,
+        groupBy,
+        groupToString,
+        groups,
+        listRef,
+        selectAll
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: ComboboxClassNames,
+          "data-anv": "combobox",
+          style: { ...style, ...layoutStyles },
+          ref: wrapperDivRef,
+          children: /* @__PURE__ */ jsx(
+            Popover,
+            {
+              open: !isDisabled && isOpen,
+              noPadding: true,
+              disableCaret: true,
+              fitScreen: true,
+              disableFlipFallback: true,
+              placement: "bottom-start",
+              matchReferenceWidth: !disableMatchReferenceWidth,
+              disableCloseOnClickOutside,
+              onOutsidePress: handleOutsidePress,
+              minHeight: minPopoverHeight,
+              children
+            }
+          )
+        }
+      )
+    }
+  );
+};
+const ComboboxSelect = function(props) {
+  if (!supportsPopover()) {
+    if (isMultiple(props)) {
+      return /* @__PURE__ */ jsx(SelectLegacyMultiple, { ...props });
+    } else {
+      return /* @__PURE__ */ jsx(SelectLegacySingle, { ...props });
+    }
+  }
+  if (isMultiple(props)) {
+    return /* @__PURE__ */ jsx(SelectMultiple, { ...props });
+  } else {
+    return /* @__PURE__ */ jsx(SelectSingle, { ...props });
+  }
+};
+
+const ComboboxItemVisual = forwardRef(
+  ({
+    children,
+    disabled,
+    checked,
+    hideCheckbox,
+    rootDivProps,
+    flexProps
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-anv": "combobox-item",
+        ...rootDivProps,
+        className: cx(
+          styles["listview-option"],
+          listViewStyles["listview-option"],
+          rootDivProps.className
+        ),
+        children: [
+          !hideCheckbox ? /* @__PURE__ */ jsx("div", { className: cx(styles["cell"], listViewStyles["cell"]), children: /* @__PURE__ */ jsx("div", { className: checkboxStyles["wrapper"], children: /* @__PURE__ */ jsxs("div", { className: checkboxStyles["checkbox"], children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked,
+                "aria-checked": checked,
+                "aria-label": "Select",
+                readOnly: true,
+                tabIndex: -1,
+                ...disabled ? { disabled: true } : {}
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: checkboxStyles["icon-wrapper"], "aria-hidden": true, children: [
+              /* @__PURE__ */ jsx(
+                Icon$2,
+                {
+                  size: "large",
+                  svg: SvgIndeterminateCheckBox,
+                  className: checkboxStyles["icon-indeterminate"]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Icon$2,
+                {
+                  size: "large",
+                  svg: SvgCheckBox,
+                  className: checkboxStyles["icon-checked"]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Icon$2,
+                {
+                  size: "large",
+                  svg: SvgCheckBoxOutlineBlank,
+                  className: checkboxStyles["icon-unchecked"]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true })
+          ] }) }) }) : null,
+          /* @__PURE__ */ jsx(Flex, { grow: 1, shrink: 1, ...flexProps, children })
+        ]
+      }
+    );
+  }
+);
+ComboboxItemVisual.displayName = "ComboboxItemVisual";
+
+const ComboboxSelectAll = function({ className }) {
+  const {
+    getItemProps,
+    setForceCloseOnSelectItems,
+    highlightedIndex,
+    items,
+    selectAll
+  } = useCombobox();
+  const item = SELECT_ALL;
+  const index = items.indexOf(item);
+  const ref = useRef(null);
+  useEffect(() => {
+    return () => {
+      setForceCloseOnSelectItems((forceCloseOnSelectItems) => {
+        if (forceCloseOnSelectItems.includes(item)) {
+          return forceCloseOnSelectItems.filter(
+            (prevItem) => prevItem !== item
+          );
+        } else {
+          return forceCloseOnSelectItems;
+        }
+      });
+    };
+  }, [item, setForceCloseOnSelectItems]);
+  return /* @__PURE__ */ jsx(
+    ComboboxItemVisual,
+    {
+      ref,
+      rootDivProps: getItemProps({
+        item: SELECT_ALL,
+        index,
+        "aria-selected": highlightedIndex === index,
+        className: cx(styles["select-all"], className)
+      }),
+      hideCheckbox: false,
+      disabled: false,
+      checked: !!selectAll?.isChecked,
+      children: selectAll?.label
+    },
+    "select-all"
+  );
+};
+
+const ComboboxGroupContext = createContext(null);
+const useComboboxGroupContext = () => useContext(ComboboxGroupContext);
+
+const ComboboxGroupList = function({
+  children,
+  ...rest
+}) {
+  const {
+    getMenuProps,
+    multiple,
+    items,
+    hasAddNew = false,
+    hasEmpty,
+    loading,
+    selectAll,
+    listRef
+  } = useCombobox();
+  const scrollSentinelRef = useRef(null);
+  const [isScrolled, setIsScrolled] = useState(false);
+  const { key: groupKey } = useComboboxGroupContext() ?? {};
+  const isAGroup = !!groupKey;
+  useEffect(() => {
+    if (!scrollSentinelRef.current) return;
+    const intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (!entry.isIntersecting) {
+            setIsScrolled(true);
+          } else {
+            setIsScrolled(false);
+          }
+        });
+      },
+      { threshold: 0 }
+    );
+    intersectionObserver.observe(scrollSentinelRef.current);
+    return () => {
+      intersectionObserver.disconnect();
+    };
+  }, [scrollSentinelRef, setIsScrolled]);
+  if (!supportsPopover())
+    return /* @__PURE__ */ jsx(ComboboxLegacyList, { ...rest, children });
+  if (isAGroup) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  if (multiple) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "ul",
+        {
+          ...getMenuProps(rest),
+          ref: listRef,
+          "data-anv": "combobox-list",
+          className: cx(styles["listview"], listViewStyles["listview"], {
+            [styles.scrolled]: isScrolled
+          }),
+          style: {
+            display: items.length || hasAddNew ? void 0 : "none"
+          },
+          children: [
+            /* @__PURE__ */ jsx("div", { ref: scrollSentinelRef, className: styles["scroll-sentinel"] }),
+            !loading && selectAll && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(ComboboxSelectAll, {}),
+              /* @__PURE__ */ jsx(Divider, {})
+            ] }),
+            children
+          ]
+        }
+      ),
+      loading ? /* @__PURE__ */ jsx("div", { className: styles["empty"], children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Spinner, { size: "small" }) }) }) : !items.length && !hasEmpty ? /* @__PURE__ */ jsx("div", { className: styles["empty"], children: /* @__PURE__ */ jsx(Text, { subdued: true, size: "small", children: "No match found" }) }) : null
+    ] });
+  } else {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "ul",
+        {
+          ...getMenuProps(rest),
+          ref: listRef,
+          "data-anv": "combobox-list",
+          className: listboxStyles["listbox"],
+          style: {
+            display: items.length || hasAddNew ? void 0 : "none"
+          },
+          children
+        }
+      ),
+      loading ? /* @__PURE__ */ jsx("div", { className: styles["empty"], children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Spinner, { size: "small" }) }) }) : !items.length && !hasEmpty ? /* @__PURE__ */ jsx("div", { className: styles["empty"], children: /* @__PURE__ */ jsx(Text, { subdued: true, size: "small", children: "No match found" }) }) : null
+    ] });
+  }
+};
+
+const ComboboxGroupProvider = ComboboxGroupContext.Provider;
+
+const ComboboxContentElement = function({
+  children,
+  className,
+  disablePopover = false,
+  ...rest
+}) {
+  const {
+    items,
+    itemToKey,
+    inputValue,
+    selectedItem,
+    selectedItems,
+    setHasDisabledPopover,
+    getMenuProps,
+    getItemProps,
+    isDisabled,
+    isReadOnly,
+    contentRef,
+    closeMenu,
+    groups
+  } = useCombobox();
+  const ComboboxPopoverContentClassNames = cx(
+    styles["popover-content"],
+    className
+  );
+  useEffect(() => {
+    setHasDisabledPopover(disablePopover);
+    return () => {
+      setHasDisabledPopover(false);
+    };
+  }, [disablePopover, setHasDisabledPopover]);
+  const context = usePopoverContext();
+  const handleBlur = (_e) => {
+    if (context?.controlled) return;
+    context?.popover.close?.(closeMenu);
+  };
+  const resolveChildren = (groupItems) => children?.({
+    items: groupItems,
+    inputValue,
+    selectedItem,
+    getMenuProps,
+    getItemProps,
+    listProps: {
+      ...getMenuProps({}, { suppressRefError: true }),
+      style: {
+        display: groupItems.length ? void 0 : "none",
+        overflow: "auto"
+      }
+    },
+    options: groupItems.map((item, index) => ({
+      optionProps: {
+        ...getItemProps({
+          item,
+          index
+        }),
+        tabIndex: disablePopover ? -1 : void 0,
+        selected: itemToKey(selectedItem) === itemToKey(item) || selectedItems.some(
+          (selectedItem2) => itemToKey(selectedItem2) === itemToKey(item)
+        ),
+        disabled: !!isDisabled || !!isReadOnly
+        // also see "isItemDisabled" function
+      },
+      item,
+      index
+    }))
+  });
+  const id = useId();
+  const filterAlreadyRenderedItems = (items2) => {
+    return items2.filter((item) => item !== ADD_NEW$1 && item !== SELECT_ALL);
+  };
+  return disablePopover ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      className: ComboboxPopoverContentClassNames,
+      ref: contentRef,
+      onBlur: handleBlur,
+      children: groups?.length ? /* @__PURE__ */ jsx(ComboboxGroupList, { children: groups.map((group, i) => /* @__PURE__ */ jsxs(ComboboxGroupProvider, { value: group, children: [
+        i !== 0 && /* @__PURE__ */ jsx(Divider, {}),
+        /* @__PURE__ */ jsxs(
+          "li",
+          {
+            "aria-labelledby": `${id}-group-${group.key}`,
+            className: cx(styles["group"], listboxStyles["listbox"]),
+            "data-anv": "combobox-group",
+            role: "group",
+            children: [
+              group.label != null ? /* @__PURE__ */ jsx(
+                Text,
+                {
+                  className: styles["group-title"],
+                  id: `${id}-group-${group.key}`,
+                  variant: "eyebrow",
+                  children: group.label
+                }
+              ) : null,
+              /* @__PURE__ */ jsx("ul", { className: styles["group-list"], children: resolveChildren(filterAlreadyRenderedItems(group.items)) })
+            ]
+          }
+        )
+      ] }, group.key)) }) : resolveChildren(filterAlreadyRenderedItems(items))
+    }
+  ) : /* @__PURE__ */ jsx(
+    Popover.Content,
+    {
+      "data-anv": "combobox-content",
+      ...rest,
+      className: ComboboxPopoverContentClassNames,
+      ref: getMenuProps({ ref: contentRef }, { suppressRefError: true }).ref,
+      tabIndex: -1,
+      onBlur: handleBlur,
+      children: groups?.length ? /* @__PURE__ */ jsx(ComboboxGroupList, { children: groups.map((group, i) => /* @__PURE__ */ jsxs(ComboboxGroupProvider, { value: group, children: [
+        i !== 0 && /* @__PURE__ */ jsx(Divider, {}),
+        /* @__PURE__ */ jsxs(
+          "li",
+          {
+            "aria-labelledby": `${id}-group-${group.key}`,
+            className: cx(styles["group"], listboxStyles["listbox"]),
+            "data-anv": "combobox-group",
+            role: "group",
+            children: [
+              group.label != null ? /* @__PURE__ */ jsx(
+                Text,
+                {
+                  className: styles["group-title"],
+                  id: `${id}-group-${group.key}`,
+                  variant: "eyebrow",
+                  children: group.label
+                }
+              ) : null,
+              /* @__PURE__ */ jsx("ul", { className: styles["group-list"], children: resolveChildren(filterAlreadyRenderedItems(group.items)) })
+            ]
+          }
+        )
+      ] }, group.key)) }) : resolveChildren(filterAlreadyRenderedItems(items))
+    }
+  );
+};
+const ComboboxContent = function({
+  children,
+  className,
+  disablePopover = false,
+  ...rest
+}) {
+  if (!supportsPopover())
+    return /* @__PURE__ */ jsx(
+      ComboboxLegacyContent,
+      {
+        disablePopover,
+        className,
+        ...rest,
+        children
+      }
+    );
+  return /* @__PURE__ */ jsx(
+    ComboboxContentElement,
+    {
+      className,
+      disablePopover,
+      ...rest,
+      children
+    }
+  );
+};
+
+const ComboboxTrigger = function(props) {
+  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
+  const {
+    // variant: variantProp = "combobox",
+    className,
+    style,
+    label,
+    size,
+    error,
+    hint,
+    description,
+    required,
+    moreInfo,
+    openMoreInfo,
+    prefix,
+    suffix,
+    maxRows,
+    selectedItemProps = () => ({}),
+    id,
+    placeholder,
+    disabled,
+    readOnly,
+    onClear,
+    ...rest
+  } = componentProps;
+  const {
+    select,
+    disableClearSelection,
+    itemToString,
+    getLabelProps,
+    getInputProps,
+    getToggleButtonProps,
+    getMenuProps,
+    selectedItem,
+    selectedItems,
+    getSelectedItemProps,
+    getDropdownProps,
+    reset,
+    removeSelectedItem,
+    selectItem,
+    inputValue,
+    isDisabled,
+    isReadOnly,
+    referenceRef,
+    closeMenu,
+    setIsDisabled,
+    setIsReadOnly
+  } = useCombobox();
+  const context = usePopoverContext();
+  useLayoutEffect(() => {
+    if (typeof disabled === "undefined") return;
+    setIsDisabled(disabled);
+  }, [disabled, setIsDisabled]);
+  useLayoutEffect(() => {
+    if (typeof readOnly === "undefined") return;
+    setIsReadOnly(readOnly);
+  }, [readOnly, setIsReadOnly]);
+  const handleBlur = (e) => {
+    const target = e.relatedTarget ?? e.target;
+    const focusedOnReference = context?.invoker.ref.current && context?.invoker.ref.current.contains(target);
+    const focusedOnContent = context?.popover.ref.current && context?.popover.ref.current.contains(target) || context?.popover.element?.contains(target);
+    if (!focusedOnReference && !focusedOnContent || !e.relatedTarget) {
+      closeMenu();
+    }
+  };
+  const labelProps = getLabelProps({
+    required,
+    moreInfo,
+    openMoreInfo
+  });
+  const inputRef = useRef(null);
+  const inputWrapperProps = {
+    ...select ? {
+      ...getToggleButtonProps({
+        disabled: isDisabled,
+        readOnly: isReadOnly,
+        id,
+        ref: context?.invoker.ref
+      })
+    } : {
+      onClick: () => inputRef.current?.focus(),
+      ref: context?.invoker.ref
+    }
+  };
+  const toggleButtonProps = select ? {} : getToggleButtonProps();
+  const handleClearButtonClick = (_e) => {
+    if (onClear) {
+      onClear();
+    } else {
+      if (reset != null) {
+        reset();
+      } else {
+        selectItem(null);
+      }
+    }
+  };
+  const styleCombined = {
+    ...style,
+    ...layoutStyles
+  };
+  return /* @__PURE__ */ jsx(
+    SelectTriggerBase,
+    {
+      "data-anv": select ? "combobox-select-trigger" : "combobox-search-field",
+      className,
+      style: styleCombined,
+      label,
+      size,
+      error,
+      hint,
+      description,
+      prefix,
+      suffix,
+      maxRows,
+      selectedItemProps,
+      placeholder,
+      labelProps,
+      inputWrapperProps,
+      toggleButtonProps,
+      itemToString,
+      removeSelectedItem,
+      variant: select ? "select" : "combobox",
+      disableClearSelection,
+      selectedItem,
+      selectedItems,
+      inputValue,
+      disabled: isDisabled,
+      readOnly: isReadOnly,
+      referenceRef,
+      onBlur: handleBlur,
+      onClearButtonClick: handleClearButtonClick,
+      chipProps: (item, index) => {
+        if (getSelectedItemProps != null) {
+          const { onClick: _, ...chipProps } = getSelectedItemProps({
+            selectedItem: item,
+            index
+          });
+          return chipProps;
+        }
+        return {};
+      },
+      inputProps: select ? {
+        ...getDropdownProps != null ? getDropdownProps({
+          required,
+          preventKeyAction: false
+        }) : {
+          required
+        },
+        ["aria-expanded"]: context?.invoker["aria-expanded"],
+        ["aria-details"]: getMenuProps().id,
+        ["aria-haspopup"]: context?.invoker["aria-haspopup"]
+      } : {
+        ["aria-expanded"]: context?.invoker["aria-expanded"],
+        ["aria-details"]: getMenuProps().id,
+        ["aria-haspopup"]: context?.invoker["aria-haspopup"],
+        ["aria-controls"]: getMenuProps().id,
+        ...getDropdownProps != null && getInputProps != null ? getInputProps(
+          getDropdownProps({
+            ...rest,
+            disabled: isDisabled,
+            readOnly: isReadOnly,
+            required,
+            autoComplete: "off",
+            id,
+            preventKeyAction: false,
+            ref: inputRef
+          })
+        ) : getInputProps != null ? getInputProps({
+          ...rest,
+          disabled: isDisabled,
+          readOnly: isReadOnly,
+          required,
+          autoComplete: "off",
+          id,
+          ref: inputRef
+        }) : {}
+      }
+    }
+  );
+};
+const ComboboxSearchFieldElement = function({
+  onClear,
+  ...props
+}) {
+  if (!supportsPopover())
+    return /* @__PURE__ */ jsx(ComboboxLegacyTrigger, { ...props, variant: "combobox" });
+  return /* @__PURE__ */ jsx(ComboboxTrigger, { onClear, ...props, variant: "combobox" });
+};
+const ComboboxSearchField = function({
+  prefix: prefixProp,
+  ...props
+}) {
+  const data = {
+    label: childrenToString(props.label),
+    size: props.size,
+    required: props.required,
+    moreInfo: props.moreInfo,
+    openMoreInfo: props.openMoreInfo,
+    description: childrenToString(props.description),
+    hint: props.hint,
+    labelProps: props.labelProps
+  };
+  const trackingId = useTrackingId({
+    name: "ComboboxSearchField",
+    data,
+    hasOverride: !!props["data-tracking-id"]
+  });
+  const prefix = prefixProp == null || typeof prefixProp === "string" ? prefixProp : "icon" in prefixProp ? /* @__PURE__ */ jsx(Icon$2, { ...prefixProp.icon }) : "avatar" in prefixProp ? /* @__PURE__ */ jsx(
+    Avatar,
+    {
+      ...prefixProp.avatar,
+      size: props.size === "small" ? "small" : "medium"
+    }
+  ) : prefixProp;
+  return /* @__PURE__ */ jsx(
+    ComboboxSearchFieldElement,
+    {
+      "data-tracking-id": trackingId,
+      ...props,
+      prefix
+    }
+  );
+};
+const ComboboxSelectTriggerElement = function(props) {
+  if (!supportsPopover())
+    return /* @__PURE__ */ jsx(ComboboxLegacyTrigger, { ...props, variant: "select" });
+  return /* @__PURE__ */ jsx(ComboboxTrigger, { ...props, variant: "select" });
+};
+const ComboboxSelectTrigger = function({
+  prefix: prefixProp,
+  ...props
+}) {
+  const data = {
+    label: childrenToString(props.label),
+    size: props.size,
+    required: props.required,
+    moreInfo: props.moreInfo,
+    openMoreInfo: props.openMoreInfo,
+    description: childrenToString(props.description),
+    hint: props.hint,
+    labelProps: props.labelProps
+  };
+  const trackingId = useTrackingId({
+    name: "ComboboxSearchField",
+    data,
+    hasOverride: !!props["data-tracking-id"]
+  });
+  const prefix = prefixProp == null || typeof prefixProp === "string" ? prefixProp : "icon" in prefixProp ? /* @__PURE__ */ jsx(Icon$2, { ...prefixProp.icon }) : "avatar" in prefixProp ? /* @__PURE__ */ jsx(
+    Avatar,
+    {
+      ...prefixProp.avatar,
+      size: props.size === "small" ? "small" : "medium"
+    }
+  ) : prefixProp;
+  return /* @__PURE__ */ jsx(
+    ComboboxSelectTriggerElement,
+    {
+      "data-tracking-id": trackingId,
+      ...props,
+      prefix
+    }
+  );
+};
+
+const CoreComboboxItemElement = function({
+  children,
+  disabled: disabledProp,
+  item,
+  index: indexProp,
+  hideCheckbox,
+  forceCloseOnSelect,
+  forceClearInputValueOnSelect,
+  alignItems,
+  justifyItems,
+  alignContent,
+  justifyContent,
+  placeItems,
+  placeContent,
+  gap,
+  rowGap,
+  columnGap,
+  ...rest
+}) {
+  const {
+    itemToKey,
+    getItemProps,
+    multiple,
+    selectedItem,
+    selectedItems,
+    disabledItems,
+    setDisabledItems,
+    setForceCloseOnSelectItems,
+    setForceClearInputValueOnSelectItems,
+    highlightedIndex,
+    items
+  } = useCombobox();
+  const index = item === ADD_NEW$1 && !multiple ? indexProp : items.indexOf(item);
+  const disabled = disabledProp || item && item instanceof Object && "disabled" in item && item.disabled;
+  useEffect(() => {
+    if (disabledProp && !disabledItems.includes(item)) {
+      setDisabledItems([...disabledItems, item]);
+    } else if (disabledItems.includes(item)) {
+      setDisabledItems(disabledItems.filter((prevItem) => prevItem !== item));
+    }
+    return () => {
+      if (disabledItems.includes(item)) {
+        setDisabledItems(disabledItems.filter((prevItem) => prevItem !== item));
+      }
+    };
+  }, [item, disabledProp, setDisabledItems]);
+  useEffect(() => {
+    if (forceCloseOnSelect) {
+      setForceCloseOnSelectItems((forceCloseOnSelectItems) => {
+        if (forceCloseOnSelectItems.includes(item)) {
+          return forceCloseOnSelectItems;
+        } else {
+          return [...forceCloseOnSelectItems, item];
+        }
+      });
+    }
+    return () => {
+      setForceCloseOnSelectItems((forceCloseOnSelectItems) => {
+        if (forceCloseOnSelectItems.includes(item)) {
+          return forceCloseOnSelectItems.filter(
+            (prevItem) => prevItem !== item
+          );
+        } else {
+          return forceCloseOnSelectItems;
+        }
+      });
+    };
+  }, [item, forceCloseOnSelect, setForceCloseOnSelectItems]);
+  useEffect(() => {
+    if (forceClearInputValueOnSelect) {
+      setForceClearInputValueOnSelectItems(
+        (forceClearInputValueOnSelectItems) => {
+          if (forceClearInputValueOnSelectItems.includes(item)) {
+            return forceClearInputValueOnSelectItems;
+          } else {
+            return [...forceClearInputValueOnSelectItems, item];
+          }
+        }
+      );
+    }
+    return () => {
+      setForceClearInputValueOnSelectItems(
+        (forceClearInputValueOnSelectItems) => {
+          if (forceClearInputValueOnSelectItems.includes(item)) {
+            return forceClearInputValueOnSelectItems.filter(
+              (prevItem) => prevItem !== item
+            );
+          } else {
+            return forceClearInputValueOnSelectItems;
+          }
+        }
+      );
+    };
+  }, [
+    item,
+    forceClearInputValueOnSelect,
+    setForceClearInputValueOnSelectItems
+  ]);
+  const flexProps = {
+    alignItems,
+    justifyItems,
+    alignContent,
+    justifyContent,
+    placeItems,
+    placeContent,
+    gap,
+    rowGap,
+    columnGap
+  };
+  if (multiple) {
+    const checked = selectedItems.some(
+      (selectedItem2) => itemToKey(selectedItem2) === itemToKey(item)
+    );
+    return /* @__PURE__ */ jsx(
+      ComboboxItemVisual,
+      {
+        rootDivProps: getItemProps({
+          item,
+          index,
+          "aria-selected": highlightedIndex === index,
+          ...rest
+        }),
+        disabled,
+        checked,
+        hideCheckbox: hideCheckbox || item === ADD_NEW$1,
+        flexProps,
+        children
+      }
+    );
+  } else {
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        ...getItemProps({
+          item,
+          index,
+          "aria-selected": highlightedIndex === index,
+          ...rest
+        }),
+        "data-anv": "combobox-item",
+        "data-checked": itemToKey(selectedItem) === itemToKey(item),
+        className: styles["item"],
+        ...disabled ? { "aria-disabled": true } : {},
+        children: [
+          /* @__PURE__ */ jsx(
+            Flex,
+            {
+              className: listboxStyles["children"],
+              grow: 1,
+              shrink: 1,
+              ...flexProps,
+              children
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Icon$2,
+            {
+              "aria-hidden": true,
+              svg: SvgCheck,
+              inherit: true,
+              className: styles["Icon"],
+              style: {
+                opacity: itemToKey(selectedItem) === itemToKey(item) ? 1 : 0
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+};
+const ComboboxItemElement = function(props) {
+  if (!supportsPopover()) return /* @__PURE__ */ jsx(ComboboxLegacyItem, { ...props });
+  return /* @__PURE__ */ jsx(CoreComboboxItemElement, { ...props });
+};
+const ComboboxItem = function(props) {
+  const data = {
+    item: props.item
+  };
+  const trackingId = useTrackingId({
+    name: "ComboboxItem",
+    data,
+    hasOverride: !!props["data-tracking-id"]
+  });
+  return /* @__PURE__ */ jsx(ComboboxItemElement, { "data-tracking-id": trackingId, ...props });
+};
+const CoreComboboxItemAddNewElement = function({
+  onSelection,
+  ...props
+}) {
+  const { items, setHasAddNew, hasExactMatch, setOnSelectItemAddNew } = useCombobox();
+  useEffect(() => {
+    setHasAddNew?.(true);
+    return () => {
+      setHasAddNew?.(false);
+    };
+  }, []);
+  useEffect(() => {
+    setOnSelectItemAddNew?.(() => onSelection);
+    return () => {
+      setOnSelectItemAddNew?.(void 0);
+    };
+  }, [setOnSelectItemAddNew, onSelection]);
+  const firstRenderRef = useRef(true);
+  useEffect(() => {
+    if (firstRenderRef.current === true) {
+      firstRenderRef.current = false;
+    }
+  }, []);
+  return !hasExactMatch && !firstRenderRef.current ? /* @__PURE__ */ jsx(
+    ComboboxItem,
+    {
+      ...props,
+      item: ADD_NEW$1,
+      index: items.length
+    }
+  ) : null;
+};
+const ComboboxItemAddNewElement = function(props) {
+  if (!supportsPopover()) return /* @__PURE__ */ jsx(ComboboxLegacyItemAddNew, { ...props });
+  return /* @__PURE__ */ jsx(CoreComboboxItemAddNewElement, { ...props });
+};
+const ComboboxItemAddNew = function(props) {
+  const data = {
+    item: "add-new"
+  };
+  const trackingId = useTrackingId({
+    name: "ComboboxItemAddNew",
+    data,
+    hasOverride: !!props["data-tracking-id"]
+  });
+  return /* @__PURE__ */ jsx(ComboboxItemAddNewElement, { "data-tracking-id": trackingId, ...props });
+};
+
+const ComboboxListElement = function({
+  children,
+  ...rest
+}) {
+  const {
+    getMenuProps,
+    multiple,
+    items,
+    hasAddNew = false,
+    hasEmpty,
+    loading,
+    selectAll,
+    listRef
+  } = useCombobox();
+  const scrollSentinelRef = useRef(null);
+  const [isScrolled, setIsScrolled] = useState(false);
+  const { key: groupKey } = useComboboxGroupContext() ?? {};
+  const isAGroup = !!groupKey;
+  useEffect(() => {
+    if (!scrollSentinelRef.current) return;
+    const intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (!entry.isIntersecting) {
+            setIsScrolled(true);
+          } else {
+            setIsScrolled(false);
+          }
+        });
+      },
+      { threshold: 0 }
+    );
+    intersectionObserver.observe(scrollSentinelRef.current);
+    return () => {
+      intersectionObserver.disconnect();
+    };
+  }, [scrollSentinelRef, setIsScrolled]);
+  if (!supportsPopover())
+    return /* @__PURE__ */ jsx(ComboboxLegacyList, { ...rest, children });
+  if (isAGroup) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  if (multiple) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "ul",
+        {
+          ...getMenuProps(rest),
+          ref: listRef,
+          "data-anv": "combobox-list",
+          className: cx(styles["listview"], listViewStyles["listview"], {
+            [styles.scrolled]: isScrolled
+          }),
+          style: {
+            display: items.length || hasAddNew ? void 0 : "none"
+          },
+          children: [
+            /* @__PURE__ */ jsx("div", { ref: scrollSentinelRef, className: styles["scroll-sentinel"] }),
+            !loading && selectAll && /* @__PURE__ */ jsx(ComboboxSelectAll, {}),
+            children
+          ]
+        }
+      ),
+      loading ? /* @__PURE__ */ jsx("div", { className: styles["empty"], children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Spinner, { size: "small" }) }) }) : !items.length && !hasEmpty ? /* @__PURE__ */ jsx("div", { className: styles["empty"], children: /* @__PURE__ */ jsx(Text, { subdued: true, size: "small", children: "No match found" }) }) : null
+    ] });
+  } else {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "ul",
+        {
+          ...getMenuProps(rest),
+          ref: listRef,
+          "data-anv": "combobox-list",
+          className: listboxStyles["listbox"],
+          style: {
+            display: items.length || hasAddNew ? void 0 : "none"
+          },
+          children
+        }
+      ),
+      loading ? /* @__PURE__ */ jsx("div", { className: styles["empty"], children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Spinner, { size: "small" }) }) }) : !items.length && !hasEmpty ? /* @__PURE__ */ jsx("div", { className: styles["empty"], children: /* @__PURE__ */ jsx(Text, { subdued: true, size: "small", children: "No match found" }) }) : null
+    ] });
+  }
+};
+const ComboboxList = function({
+  children,
+  className,
+  ...rest
+}) {
+  if (!supportsPopover())
+    return /* @__PURE__ */ jsx(ComboboxLegacyList, { className, ...rest, children });
+  return /* @__PURE__ */ jsx(ComboboxListElement, { className, ...rest, children });
+};
+
+const ComboboxSingle = function(props) {
+  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
+  const {
+    className,
+    style,
+    children,
+    open,
+    disabled,
+    readOnly,
+    items: itemsProp,
+    itemToString: itemToStringProp,
+    itemToKey: itemToKeyProp,
+    onChange,
+    disableCloseOnClickOutside = false,
+    disableMatchReferenceWidth = false,
+    disableCloseOnSelectItem = false,
+    filterOptions,
+    disableFilter = false,
+    loading = false,
+    minPopoverHeight,
+    root,
+    onInputValueChange,
+    environment: environmentProp,
+    groupBy,
+    groupToString,
+    groupSorter,
+    ...rest
+  } = componentProps;
+  const ComboboxClassNames = cx(styles["combobox"], className);
+  const [items, setItems] = useState(itemsProp);
+  const [hasAddNew, setHasAddNew] = useState(false);
+  const [onSelectItemAddNew, setOnSelectItemAddNew] = useState(void 0);
+  const [hasExactMatch, setHasExactMatch] = useState(false);
+  const [hasDisabledPopover, setHasDisabledPopover] = useState(false);
+  const [hasEmpty, setHasEmpty] = useState(false);
+  const [disabledItems, setDisabledItems] = useState([]);
+  const [forceCloseOnSelectItems, setForceCloseOnSelectItems] = useState([]);
+  const [, setForceClearInputValueOnSelectItems] = useState([]);
+  const [isReadOnly, setIsReadOnly] = useState(readOnly);
+  const [isDisabled, setIsDisabled] = useState(disabled);
+  const referenceRef = useRef(null);
+  const contentRef = useRef(null);
+  const listRef = useRef(null);
+  const handleOutsidePress = (_e) => {
+    if (disableCloseOnClickOutside) return;
+    closeMenu();
+  };
+  const { ref: wrapperDivRef, environment } = useDownshiftEnvironment$1();
+  const { orderedItems: allItemsOrderedByGroup } = useGroups({
+    items: itemsProp,
+    groupBy,
+    groupToString,
+    groupSorter
+  });
+  const { groups: searchedGroups, orderedItems: searchedItemsOrderedByGroup } = useGroups({
+    items,
+    groupBy,
+    groupToString,
+    groupSorter
+  });
+  const showAddNew = hasAddNew && !hasExactMatch;
+  const combinedItems = useMemo(
+    () => showAddNew ? [...searchedItemsOrderedByGroup, ADD_NEW$1] : searchedItemsOrderedByGroup,
+    [searchedItemsOrderedByGroup, showAddNew]
+  );
+  const itemToString = itemToStringProp ?? defaultItemToString$1;
+  const itemToKey = itemToKeyProp ?? defaultItemToKey$1;
+  const {
+    isOpen,
+    getLabelProps,
+    getInputProps,
+    getToggleButtonProps,
+    getMenuProps,
+    getItemProps,
+    highlightedIndex,
+    selectedItem,
+    selectItem,
+    setInputValue,
+    inputValue,
+    closeMenu
+  } = useCombobox$1({
+    ...rest,
+    items: combinedItems,
+    itemToString,
+    itemToKey,
+    isOpen: open,
+    initialIsOpen: open,
+    environment: environmentProp ?? environment,
+    // NOTE: Reducer needs to be pure, side-effects should be in event handlers
+    stateReducer(state, { type, changes }) {
+      switch (type) {
+        // keep Combobox open onBlur, will call close using Popover's onOutsidePress
+        case useCombobox$1.stateChangeTypes.InputBlur:
+          return {
+            ...changes,
+            isOpen: open != null ? open : true,
+            highlightedIndex: state.highlightedIndex
+          };
+        case useCombobox$1.stateChangeTypes.InputKeyDownEnter:
+        case useCombobox$1.stateChangeTypes.ItemClick:
+          if (changes.selectedItem === ADD_NEW$1) {
+            const stateInputValue = state.inputValue;
+            setTimeout(() => {
+              onSelectItemAddNew?.(stateInputValue);
+            }, 250);
+            return {
+              ...changes,
+              selectedItem: state.selectedItem,
+              inputValue: ""
+            };
+          } else {
+            const forceClose = forceCloseOnSelectItems.includes(
+              changes.selectedItem
+            );
+            return {
+              ...changes,
+              isOpen: open != null ? open : forceClose ? false : disableCloseOnSelectItem ? true : changes.isOpen,
+              highlightedIndex: disableCloseOnSelectItem ? itemToString(state.selectedItem) === state.inputValue || !state.inputValue ? state.highlightedIndex : 0 : changes.highlightedIndex
+            };
+          }
+        // prevent this from closing the popover by default
+        case useCombobox$1.stateChangeTypes.InputClick:
+          return { ...changes, isOpen: open != null ? open : true };
+        default:
+          return changes;
+      }
+    },
+    onInputValueChange: onInputValueChange ?? (({ inputValue: inputValue2, type, selectedItem: selectedItem2 }) => {
+      const inputValueMatchesSelectedItem = selectedItem2 != null && inputValue2 === itemToString(selectedItem2);
+      const inputValueIsEmpty = inputValue2 == null || inputValue2 === "";
+      if (type === useCombobox$1.stateChangeTypes.InputKeyDownEnter || type === useCombobox$1.stateChangeTypes.ItemClick) {
+        setItems(allItemsOrderedByGroup);
+        setHasExactMatch(true);
+      } else if (!inputValueMatchesSelectedItem && !inputValueIsEmpty && !disableFilter) {
+        setItems(
+          matchSorter(allItemsOrderedByGroup, inputValue2, filterOptions)
+        );
+        setHasExactMatch(
+          matchSorter(allItemsOrderedByGroup, inputValue2, {
+            ...filterOptions,
+            threshold: matchSorter.rankings.EQUAL
+          }).length > 0
+        );
+      } else {
+        setItems(allItemsOrderedByGroup);
+        setHasExactMatch(true);
+      }
+    }),
+    onSelectedItemChange(changes) {
+      const { selectedItem: selectedItem2 } = changes;
+      if (onChange != null)
+        onChange(selectedItem2 != null ? selectedItem2 : null);
+    },
+    onIsOpenChange({ isOpen: isOpen2, inputValue: inputValue2, selectedItem: selectedItem2 }) {
+      if (isOpen2 === false) {
+        setTimeout(() => {
+          setItems(allItemsOrderedByGroup);
+          if (inputValue2 === "") {
+            selectItem(null);
+          } else {
+            setInputValue(
+              selectedItem2 != null ? itemToString(selectedItem2) : ""
+            );
+          }
+        }, 200);
+      }
+    },
+    isItemDisabled(item) {
+      if (isDisabled || isReadOnly) {
+        return !!isDisabled || !!isReadOnly;
+      }
+      if (item && item instanceof Object && "disabled" in item && item.disabled) {
+        return true;
+      }
+      if (item && item instanceof Object && "readOnly" in item && item.readOnly) {
+        return true;
+      }
+      if (disabledItems.includes(item)) {
+        return true;
+      }
+      return false;
+    }
+  });
+  const firstRenderRef = useRef(true);
+  useEffect(() => {
+    if (firstRenderRef.current === true) {
+      firstRenderRef.current = false;
+    }
+  }, []);
+  useEffect(() => {
+    setIsDisabled(disabled);
+  }, [disabled]);
+  useEffect(() => {
+    setIsReadOnly(readOnly);
+  }, [readOnly]);
+  useEffect(() => {
+    if (firstRenderRef.current) return;
+    setTimeout(() => {
+      const inputValueMatchesSelectedItem = selectedItem != null && inputValue === itemToString(selectedItem);
+      const inputValueIsEmpty = inputValue == null || inputValue === "";
+      if (!inputValueMatchesSelectedItem && !inputValueIsEmpty && !disableFilter) {
+        setItems(
+          matchSorter(allItemsOrderedByGroup, inputValue, filterOptions)
+        );
+        setHasExactMatch(
+          matchSorter(allItemsOrderedByGroup, inputValue, {
+            ...filterOptions,
+            threshold: matchSorter.rankings.EQUAL
+          }).length > 0
+        );
+      } else {
+        setItems(allItemsOrderedByGroup);
+        setHasExactMatch(true);
+      }
+    }, 200);
+  }, [allItemsOrderedByGroup]);
+  return /* @__PURE__ */ jsx(
+    ComboboxContext.Provider,
+    {
+      value: {
+        multiple: false,
+        select: false,
+        items: searchedItemsOrderedByGroup,
+        itemToString,
+        itemToKey,
+        isOpen,
+        getLabelProps,
+        getInputProps,
+        getToggleButtonProps,
+        getMenuProps,
+        getItemProps,
+        highlightedIndex,
+        selectedItem,
+        selectedItems: [],
+        disabledItems,
+        setDisabledItems,
+        setForceCloseOnSelectItems,
+        setForceClearInputValueOnSelectItems,
+        getSelectedItemProps: void 0,
+        getDropdownProps: void 0,
+        selectItem,
+        inputValue,
+        isDisabled,
+        isReadOnly,
+        setIsReadOnly,
+        setIsDisabled,
+        hasDisabledPopover,
+        setHasDisabledPopover,
+        hasEmpty,
+        setHasEmpty,
+        hasAddNew,
+        setHasAddNew,
+        onSelectItemAddNew,
+        setOnSelectItemAddNew,
+        hasExactMatch,
+        setHasExactMatch,
+        loading,
+        referenceRef,
+        contentRef,
+        listRef,
+        closeMenu,
+        groupBy,
+        groupToString,
+        groups: searchedGroups
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: ComboboxClassNames,
+          "data-anv": "combobox",
+          style: { ...style, ...layoutStyles },
+          ref: wrapperDivRef,
+          children: /* @__PURE__ */ jsx(
+            Popover,
+            {
+              open: isOpen,
+              noPadding: true,
+              disableCaret: true,
+              fitScreen: true,
+              disableFlipFallback: true,
+              placement: "bottom-start",
+              matchReferenceWidth: !disableMatchReferenceWidth,
+              disableCloseOnClickOutside,
+              onOutsidePress: handleOutsidePress,
+              minHeight: minPopoverHeight,
+              children
+            }
+          )
+        }
+      )
+    }
+  );
+};
+const ComboboxMultiple = function(props) {
+  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
+  const {
+    className,
+    style,
+    children,
+    open,
+    items: itemsProp,
+    itemToString: itemToStringProp,
+    itemToKey: itemToKeyProp,
+    onChange,
+    onSelectedItemsChange,
+    onStateChange,
+    disableCloseOnClickOutside = false,
+    disableMatchReferenceWidth = false,
+    disableCloseOnSelectItem = false,
+    disableClearInputValueOnSelectItem = false,
+    filterOptions,
+    disableFilter = false,
+    loading = false,
+    minPopoverHeight,
+    root,
+    disabled,
+    readOnly,
+    stateReducer: _,
+    onInputValueChange,
+    initialSelectedItems,
+    initialActiveIndex,
+    defaultSelectedItems,
+    defaultActiveIndex,
+    activeIndex: activeIndexProp,
+    selectedItems: selectedItemsProp,
+    environment: environmentProp,
+    selectAll,
+    groupBy,
+    groupToString,
+    ...rest
+  } = componentProps;
+  const ComboboxClassNames = cx(styles["combobox"], className);
+  const [items, setItems] = useState(itemsProp);
+  const [hasAddNew, setHasAddNew] = useState(false);
+  const [onSelectItemAddNew, setOnSelectItemAddNew] = useState(void 0);
+  const [hasExactMatch, setHasExactMatch] = useState(false);
+  const [hasDisabledPopover, setHasDisabledPopover] = useState(false);
+  const [hasEmpty, setHasEmpty] = useState(false);
+  const [disabledItems, setDisabledItems] = useState([]);
+  const [forceCloseOnSelectItems, setForceCloseOnSelectItems] = useState([]);
+  const [
+    forceClearInputValueOnSelectItems,
+    setForceClearInputValueOnSelectItems
+  ] = useState([]);
+  const [isReadOnly, setIsReadOnly] = useState(readOnly);
+  const [isDisabled, setIsDisabled] = useState(disabled);
+  let storedSetInputValue = void 0;
+  const referenceRef = useRef(null);
+  const contentRef = useRef(null);
+  const listRef = useRef(null);
+  const handleOutsidePress = (_e) => {
+    if (disableCloseOnClickOutside) return;
+    closeMenu();
+  };
+  const { ref: wrapperDivRef, environment } = useDownshiftEnvironment$1();
+  const { orderedItems: allItemsOrderedByGroup } = useGroups({
+    items: itemsProp,
+    groupBy,
+    groupToString
+  });
+  const { groups: searchedGroups, orderedItems: searchedItemsOrderedByGroup } = useGroups({
+    items,
+    groupBy,
+    groupToString
+  });
+  const showAddNew = hasAddNew && !hasExactMatch;
+  const combinedItems = useMemo(() => {
+    let items2 = searchedItemsOrderedByGroup;
+    if (showAddNew) {
+      items2 = [...items2, ADD_NEW$1];
+    }
+    if (selectAll) {
+      items2 = [SELECT_ALL, ...items2];
+    }
+    return items2;
+  }, [searchedItemsOrderedByGroup, showAddNew, selectAll]);
+  const itemToString = itemToStringProp ?? defaultItemToString$1;
+  const itemToKey = itemToKeyProp ?? defaultItemToKey$1;
+  const {
+    getSelectedItemProps,
+    getDropdownProps,
+    reset,
+    selectedItems,
+    addSelectedItem,
+    removeSelectedItem,
+    setSelectedItems
+  } = useMultipleSelection({
+    itemToKey,
+    initialSelectedItems,
+    initialActiveIndex,
+    defaultSelectedItems,
+    defaultActiveIndex,
+    activeIndex: activeIndexProp,
+    selectedItems: selectedItemsProp,
+    environment: environmentProp ?? environment,
+    stateReducer(state, { type, changes }) {
+      switch (type) {
+        // the Chip itself will handle "Backspace" and "Delete"
+        // just return previous state
+        case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace:
+        case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete:
+          return state;
+        case useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem:
+          return { ...changes, activeIndex: -1 };
+        case useMultipleSelection.stateChangeTypes.FunctionReset:
+          return { ...changes, selectedItems: [] };
+        default:
+          return changes;
+      }
+    },
+    onStateChange(changes) {
+      const { type } = changes;
+      switch (type) {
+        case useMultipleSelection.stateChangeTypes.FunctionReset:
+          storedSetInputValue?.("");
+          break;
+      }
+      onStateChange?.(changes);
+    },
+    onSelectedItemsChange(changes) {
+      const { selectedItems: selectedItems2 } = changes;
+      if (onChange != null) onChange(selectedItems2);
+      if (onSelectedItemsChange != null) onSelectedItemsChange(changes);
+    }
+  });
+  const {
+    isOpen,
+    getLabelProps,
+    getInputProps,
+    getToggleButtonProps,
+    getMenuProps,
+    getItemProps,
+    highlightedIndex,
+    selectedItem,
+    selectItem,
+    setInputValue,
+    inputValue,
+    closeMenu
+  } = useCombobox$1({
+    ...rest,
+    items: combinedItems,
+    itemToString,
+    itemToKey,
+    selectedItem: null,
+    isOpen: open,
+    initialIsOpen: open,
+    environment: environmentProp ?? environment,
+    // NOTE: Reducer needs to be pure, side-effects should be in event handlers
+    stateReducer(state, { type, changes }) {
+      switch (type) {
+        // keep Combobox open onBlur, will call close using Popover's onOutsidePress
+        case useCombobox$1.stateChangeTypes.InputBlur:
+          return {
+            ...changes,
+            inputValue: state.inputValue,
+            selectedItem: null,
+            isOpen: open != null ? open : true,
+            highlightedIndex: state.highlightedIndex
+          };
+        case useCombobox$1.stateChangeTypes.InputKeyDownEnter:
+        case useCombobox$1.stateChangeTypes.ItemClick:
+          if (changes.selectedItem === ADD_NEW$1) {
+            const stateInputValue = state.inputValue;
+            setTimeout(() => {
+              onSelectItemAddNew?.(stateInputValue);
+            }, 250);
+            return {
+              ...changes,
+              selectedItem: state.selectedItem,
+              inputValue: ""
+            };
+          } else if (changes.selectedItem === SELECT_ALL) {
+            selectAll?.onSelection();
+            return {
+              ...changes,
+              selectedItem: null
+            };
+          } else {
+            const forceClose = forceCloseOnSelectItems.includes(
+              changes.selectedItem
+            );
+            const forceClearInputValue = forceClearInputValueOnSelectItems.includes(
+              changes.selectedItem
+            );
+            return {
+              ...changes,
+              isOpen: open != null ? open : forceClose ? false : disableCloseOnSelectItem ? true : changes.isOpen,
+              highlightedIndex: forceClearInputValue ? 0 : disableCloseOnSelectItem ? disableClearInputValueOnSelectItem || !state.inputValue ? state.highlightedIndex : 0 : changes.highlightedIndex,
+              inputValue: forceClearInputValue ? "" : disableClearInputValueOnSelectItem ? state.inputValue : ""
+            };
+          }
+        // prevent this from closing the popover by default
+        case useCombobox$1.stateChangeTypes.InputClick:
+          return { ...changes, isOpen: open != null ? open : true };
+        // prevent this from clearing the input value by default
+        case useCombobox$1.stateChangeTypes.ControlledPropUpdatedSelectedItem:
+          return { ...changes, inputValue: state.inputValue };
+        default:
+          return changes;
+      }
+    },
+    onStateChange(changes) {
+      const { type, selectedItem: newSelectedItem } = changes;
+      switch (type) {
+        case useCombobox$1.stateChangeTypes.InputKeyDownEnter:
+        case useCombobox$1.stateChangeTypes.ItemClick:
+        case useCombobox$1.stateChangeTypes.InputBlur:
+          if (newSelectedItem != null) {
+            const itemAlreadySelected = selectedItems.some(
+              (item) => itemToKey(item) === itemToKey(newSelectedItem)
+            );
+            if (itemAlreadySelected) {
+              removeSelectedItem(newSelectedItem);
+            } else {
+              addSelectedItem(newSelectedItem);
+            }
+          }
+          break;
+      }
+      onStateChange?.(changes);
+    },
+    onInputValueChange: onInputValueChange ?? (({ inputValue: inputValue2, ...changes }) => {
+      const { type, selectedItem: selectedItem2 } = changes;
+      const inputValueMatchesSelectedItem = selectedItem2 != null && inputValue2 === itemToString(selectedItem2);
+      const inputValueIsEmpty = inputValue2 == null || inputValue2 === "";
+      if (type === useCombobox$1.stateChangeTypes.InputKeyDownEnter || type === useCombobox$1.stateChangeTypes.ItemClick) {
+        setItems(allItemsOrderedByGroup);
+        setHasExactMatch(true);
+      } else if (!inputValueMatchesSelectedItem && !inputValueIsEmpty && !disableFilter) {
+        setItems(
+          matchSorter(allItemsOrderedByGroup, inputValue2, filterOptions)
+        );
+        setHasExactMatch(
+          matchSorter(allItemsOrderedByGroup, inputValue2, {
+            ...filterOptions,
+            threshold: matchSorter.rankings.EQUAL
+          }).length > 0
+        );
+      } else {
+        setItems(allItemsOrderedByGroup);
+        setHasExactMatch(true);
+      }
+    }),
+    onIsOpenChange({ isOpen: isOpen2 }) {
+      if (isOpen2 === false) {
+        setTimeout(() => {
+          setInputValue("");
+          setItems(allItemsOrderedByGroup);
+        }, 200);
+      }
+    },
+    isItemDisabled(item) {
+      if (isDisabled || isReadOnly) {
+        return !!isDisabled || !!isReadOnly;
+      }
+      if (item && item instanceof Object && "disabled" in item && item.disabled) {
+        return true;
+      }
+      if (item && item instanceof Object && "readOnly" in item && item.readOnly) {
+        return true;
+      }
+      if (disabledItems.includes(item)) {
+        return true;
+      }
+      return false;
+    },
+    onHighlightedIndexChange(changes) {
+      if (selectAll && changes.highlightedIndex === 0 && [
+        useCombobox$1.stateChangeTypes.InputKeyDownHome,
+        useCombobox$1.stateChangeTypes.InputKeyDownEnd,
+        useCombobox$1.stateChangeTypes.InputKeyDownArrowDown,
+        useCombobox$1.stateChangeTypes.InputKeyDownArrowUp,
+        useCombobox$1.stateChangeTypes.InputKeyDownPageDown,
+        useCombobox$1.stateChangeTypes.InputKeyDownPageUp
+      ].includes(changes.type) && listRef.current) {
+        const scrollParent = getScrollParent(listRef.current);
+        if (scrollParent) {
+          scrollParent.scrollTop = 0;
+        }
+      }
+    }
+  });
+  storedSetInputValue = setInputValue;
+  const firstRenderRef = useRef(true);
+  useEffect(() => {
+    if (firstRenderRef.current === true) {
+      firstRenderRef.current = false;
+    }
+  }, []);
+  useEffect(() => {
+    setIsDisabled(disabled);
+  }, [disabled]);
+  useEffect(() => {
+    setIsReadOnly(readOnly);
+  }, [readOnly]);
+  useEffect(() => {
+    if (firstRenderRef.current) return;
+    setTimeout(() => {
+      const inputValueIsEmpty = inputValue == null || inputValue === "";
+      if (!inputValueIsEmpty && !disableFilter) {
+        setItems(matchSorter(itemsProp, inputValue, filterOptions));
+        setHasExactMatch(
+          matchSorter(itemsProp, inputValue, {
+            ...filterOptions,
+            threshold: matchSorter.rankings.EQUAL
+          }).length > 0
+        );
+      } else {
+        setItems(itemsProp);
+        setHasExactMatch(true);
+      }
+    }, 200);
+  }, [itemsProp]);
+  return /* @__PURE__ */ jsx(
+    ComboboxContext.Provider,
+    {
+      value: {
+        multiple: true,
+        select: false,
+        items: combinedItems,
+        itemToString,
+        itemToKey,
+        isOpen,
+        getLabelProps,
+        getInputProps,
+        getToggleButtonProps,
+        getMenuProps,
+        getItemProps,
+        highlightedIndex,
+        selectedItem,
+        selectedItems,
+        disabledItems,
+        setDisabledItems,
+        setForceCloseOnSelectItems,
+        setForceClearInputValueOnSelectItems,
+        getSelectedItemProps,
+        getDropdownProps,
+        reset,
+        addSelectedItem,
+        removeSelectedItem,
+        setSelectedItems,
+        selectItem,
+        inputValue,
+        isDisabled,
+        isReadOnly,
+        setIsReadOnly,
+        setIsDisabled,
+        hasDisabledPopover,
+        setHasDisabledPopover,
+        hasEmpty,
+        setHasEmpty,
+        hasAddNew,
+        setHasAddNew,
+        onSelectItemAddNew,
+        setOnSelectItemAddNew,
+        hasExactMatch,
+        setHasExactMatch,
+        loading,
+        referenceRef,
+        contentRef,
+        listRef,
+        closeMenu,
+        groupBy,
+        groupToString,
+        groups: searchedGroups,
+        selectAll
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: ComboboxClassNames,
+          "data-anv": "combobox",
+          style: { ...style, ...layoutStyles },
+          ref: wrapperDivRef,
+          children: /* @__PURE__ */ jsx(
+            Popover,
+            {
+              open: !isDisabled && isOpen,
+              noPadding: true,
+              disableCaret: true,
+              fitScreen: true,
+              disableFlipFallback: true,
+              placement: "bottom-start",
+              matchReferenceWidth: !disableMatchReferenceWidth,
+              disableCloseOnClickOutside,
+              onOutsidePress: handleOutsidePress,
+              minHeight: minPopoverHeight,
+              children
+            }
+          )
+        }
+      )
+    }
+  );
+};
+const ComboboxElement = function(props) {
+  if (!supportsPopover()) {
+    if (isMultiple(props)) {
+      return /* @__PURE__ */ jsx(ComboboxLegacyMultiple, { ...props });
+    } else {
+      return /* @__PURE__ */ jsx(ComboboxLegacySingle, { ...props });
+    }
+  }
+  if (isMultiple(props)) {
+    return /* @__PURE__ */ jsx(ComboboxMultiple, { ...props });
+  } else {
+    return /* @__PURE__ */ jsx(ComboboxSingle, { ...props });
+  }
+};
+const Combobox = Object.assign(ComboboxElement, {
+  /**
+   * ComboboxSelect component for selecting items from a predefined list.
+   *
+   * Features:
+   * - Single and multiple item selection from predefined options
+   * - Dropdown-style selection interface
+   * - Grouping support with custom group labels and sorting
+   * - Loading states with spinner indicators
+   * - Disabled and read-only states
+   * - Customizable popover behavior and positioning
+   * - Full accessibility support with ARIA attributes
+   * - Keyboard navigation support
+   * - Layout utility props for positioning and spacing
+   * - Automatic tracking ID generation for analytics
+   *
+   * @example
+   * <Combobox.Select
+   *   items={items}
+   *   itemToString={(item) => item.name}
+   *   onChange={setSelectedItem}
+   * >
+   *   <Combobox.SelectTrigger label="Select an item" />
+   *   <Combobox.Content>
+   *     {({ items }) => (
+   *       <Combobox.List>
+   *         {items.map((item, i) => (
+   *           <Combobox.Item key={item.id} item={item} index={i}>
+   *             {item.name}
+   *           </Combobox.Item>
+   *         ))}
+   *       </Combobox.List>
+   *     )}
+   *   </Combobox.Content>
+   * </Combobox.Select>
+   */
+  Select: ComboboxSelect,
+  /**
+   * ComboboxSearchField component for the search input field.
+   *
+   * Features:
+   * - Search input with clear button functionality
+   * - Supports multiple selection with chip display
+   * - Handles keyboard navigation and accessibility
+   * - Integrates with combobox state management
+   * - Supports custom styling and layout
+   * - Manages focus and blur events
+   * - Enhanced prefix support for icons and avatars
+   * - Automatic tracking ID generation for analytics
+   *
+   * @example
+   * <Combobox.SearchField
+   *   label="Search users"
+   *   placeholder="Type to search..."
+   *   prefix={{ icon: { svg: SearchIcon } }}
+   * />
+   */
+  SearchField: ComboboxSearchField,
+  /**
+   * ComboboxSelectTrigger component for the select trigger field.
+   *
+   * Features:
+   * - Select input with dropdown trigger
+   * - Supports single selection display
+   * - Handles keyboard navigation and accessibility
+   * - Integrates with combobox state management
+   * - Supports custom styling and layout
+   * - Manages focus and blur events
+   * - Enhanced prefix support for icons and avatars
+   * - Automatic tracking ID generation for analytics
+   *
+   * @example
+   * <Combobox.SelectTrigger
+   *   label="Select user"
+   *   placeholder="Choose a user..."
+   *   prefix={{ avatar: { name: "User" } }}
+   * />
+   */
+  SelectTrigger: ComboboxSelectTrigger,
+  /**
+   * ComboboxContent component for rendering the content area of a combobox.
+   *
+   * Features:
+   * - Supports both popover and inline rendering modes
+   * - Provides render props pattern for flexible content rendering
+   * - Handles grouped items with proper ARIA labels
+   * - Integrates with combobox state management
+   * - Supports custom styling and layout
+   * - Manages focus and blur events for popover behavior
+   *
+   * @example
+   * <Combobox.Content>
+   *   {({ items }) => (
+   *     <Combobox.List>
+   *       {items.map((item, index) => (
+   *         <Combobox.Item key={item.id} item={item} index={index}>
+   *           {item.name}
+   *         </Combobox.Item>
+   *       ))}
+   *     </Combobox.List>
+   *   )}
+   * </Combobox.Content>
+   */
+  Content: ComboboxContent,
+  /**
+   * ComboboxList component for rendering the list of items.
+   *
+   * Features:
+   * - Renders list of items with proper accessibility
+   * - Supports both single and multiple selection modes
+   * - Loading state with spinner
+   * - Empty state handling
+   * - Automatic tracking ID generation for analytics
+   *
+   * @example
+   * <Combobox.List>
+   *   {items.map((item, i) => (
+   *     <Combobox.Item key={item.id} item={item} index={i}>
+   *       {item.name}
+   *     </Combobox.Item>
+   *   ))}
+   * </Combobox.List>
+   */
+  List: ComboboxList,
+  /**
+   * ComboboxItem component for rendering individual items in the list.
+   *
+   * Features:
+   * - Individual item rendering with proper accessibility
+   * - Support for disabled state
+   * - Custom content rendering
+   * - Automatic tracking ID generation for analytics
+   *
+   * @example
+   * <Combobox.Item item={item} index={index}>
+   *   <Flex direction="column">
+   *     <Text>{item.name}</Text>
+   *     <Text size="small" subdued>{item.description}</Text>
+   *   </Flex>
+   * </Combobox.Item>
+   */
+  Item: ComboboxItem,
+  /**
+   * ComboboxItemAddNew component for rendering an "Add New" option.
+   *
+   * Features:
+   * - "Add New" option that appears when no exact match is found
+   * - Customizable content rendering
+   * - Callback when selected
+   * - Automatic tracking ID generation for analytics
+   *
+   * @example
+   * <Combobox.ItemAddNew onSelection={(inputValue) => addNewItem(inputValue)}>
+   *   Add "{inputValue}" as new item
+   * </Combobox.ItemAddNew>
+   */
+  ItemAddNew: ComboboxItemAddNew,
+  /**
+   * ComboboxEmpty component for rendering content when no items are available.
+   *
+   * Features:
+   * - Renders content when list is empty
+   * - Customizable empty state message
+   * - Automatic tracking ID generation for analytics
+   *
+   * @example
+   * <Combobox.Empty>
+   *   <Text>No items found. Try adjusting your search.</Text>
+   * </Combobox.Empty>
+   */
+  Empty: ComboboxEmpty
+});
+
+export { Combobox as C, ComboboxElement as a, ComboboxSelect as b, ComboboxContent as c, ComboboxList as d, ComboboxItem as e, ComboboxItemAddNew as f, ComboboxSearchField as g, ComboboxSelectTrigger as h, ComboboxEmpty as i };
+//# sourceMappingURL=Combobox-Dy4IZDg1.js.map