@servicetitan/anvil2 1.44.1 → 1.45.0

package/dist/{Combobox-Ct30JT3y.js → useInfiniteCombobox-BN2uGhBh.js}

@@ -1,29 +1,102 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useTrackingId } from './useTrackingId.js';
-import React__default, { useRef, useEffect, useMemo, useCallback, useLayoutEffect, useReducer, cloneElement, Component, useState, createContext, useId, useContext, useDeferredValue } from 'react';
-import { g as getDefaultExportFromCjs, c as cx } from './index-tZvMCc77.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React__default, { forwardRef, useState, useEffect, createContext, useContext, useRef, useMemo, useCallback, useLayoutEffect, useReducer, cloneElement, Component, useId, useDeferredValue } from 'react';
+import { c as cx, g as getDefaultExportFromCjs } from './index-tZvMCc77.js';
 import { a as _extends, _ as _objectWithoutPropertiesLoose } from './extends-Bg2s_OKl.js';
-import { e as PopoverLegacy, P as Popover, u as usePopoverLegacyContext, f as usePopoverContext } from './Popover-CU2cGVD8-Casl3vM1.js';
-import { s as styles$3 } from './Listbox.module-DcBE8Zmo-DcBE8Zmo.js';
-import { L as Label, s as supportsPopover } from './ProgressBar-BRvB-bD4-DppwBrFg.js';
-import { F as Flex } from './Flex-CiK7uNUu-BfxHG4L0.js';
-import { B as Button } from './Button-BaHFf1AT-BQy-PFB5.js';
-import { C as Chip } from './Chip-MbBEXeAm-DmAcwPRJ.js';
+import { P as Popover, u as usePopoverLegacyContext, f as usePopoverContext } from './Popover-r26xMIfm.js';
+import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DjD5IMh0.js';
+import { s as supportsPopover } from './DrawerContext-DboTgTmo.js';
+import { i as isMultiple, u as useDownshiftEnvironment$1, a as defaultItemToKey$1, d as defaultItemToString$1, S as SelectTriggerBase, A as ADD_NEW$1 } from './SelectTriggerBase-BMMxnXrw.js';
+import { s as styles$4 } from './Listbox.module-DcBE8Zmo.js';
+import { T as Text } from './Text-BqvcbXyp.js';
+import { F as Flex } from './Flex-BdQMekvA.js';
+import { B as Button } from './Button-BxFXQ0-n.js';
+import { C as Chip } from './Chip-Bz-vlQ4D.js';
 import { S as SvgClose } from './close-DZj38AEh.js';
 import { S as SvgChevronRight } from './chevron_right-BdpsxX7x.js';
-import { H as Helper } from './Helper-h7k80qls-DHPFHTvI.js';
-import { T as Text } from './Text-CED_yrId-DsRYZw2-.js';
-import { S as Spinner } from './Spinner-DliJVzdW-BQlZEj4V.js';
-import { s as styles$2 } from './ListView.module-MVsNF0X0-MVsNF0X0.js';
-import { I as Icon$2 } from './Icon-B6HmlQiR-BxQkO3X5.js';
-import { c as checkboxStyles, S as SvgIndeterminateCheckBox, a as SvgCheckBox, b as SvgCheckBoxOutlineBlank } from './Checkbox.module-DZ58p15b-BUsQC1lW.js';
+import { S as SvgInfo } from './info-CYpG6tcI.js';
+import { S as SrOnly } from './SrOnly-CTsYSuby.js';
+import { T as Tooltip } from './Tooltip-BI3Xs75X.js';
+import { I as Icon$2 } from './Icon-D8SPKeO4.js';
+import { H as Helper } from './Helper-BkIDJqgA.js';
+import { A as Avatar } from './Avatar-CyGjhToG.js';
+import { c as childrenToString } from './childrenToString-Bz9MqbHb.js';
+import { useTrackingId } from './useTrackingId.js';
+import { s as styles$3 } from './ListView.module-MVsNF0X0.js';
+import { c as checkboxStyles, S as SvgIndeterminateCheckBox, a as SvgCheckBox, b as SvgCheckBoxOutlineBlank } from './indeterminate_check_box-Bg24oeHy.js';
 import { S as SvgCheck } from './check-Cf67OWrZ.js';
-import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DWACCL8v-CZNrcQT-.js';
-import { u as useDownshiftEnvironment$1, a as defaultItemToKey$1, d as defaultItemToString$1, S as SelectTriggerBase } from './SelectTriggerBase-C0fhFfuj-DfR6h1Lq.js';
-import { c as childrenToString } from './childrenToString-Bz9MqbHb-Bz9MqbHb.js';
-import { a as Avatar } from './Avatar-C7cbRTCt-DCvzmr2C.js';
+import { S as Spinner } from './Spinner-wmO8Epw0.js';
+
+import './useInfiniteCombobox.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$1 = function() {
+  const context = useContext(
+    ComboboxContext
+  );
+  if (context == null) {
+    throw new Error("useCombobox must be wrapped in <Combobox />");
+  }
+  return context;
+};
 
-import './Combobox.css';function _setPrototypeOf(t, e) {
+function _setPrototypeOf(t, e) {
   return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
     return t.__proto__ = e, t;
   }, _setPrototypeOf(t, e);
@@ -4517,12 +4590,12 @@ var _excluded$1 = ["onMouseLeave", "refKey", "ref"],
   _excluded2$1 = ["item", "index", "refKey", "ref", "onMouseMove", "onMouseDown", "onClick", "onPress", "disabled"],
   _excluded3 = ["onClick", "onPress", "refKey", "ref"],
   _excluded4 = ["onKeyDown", "onChange", "onInput", "onBlur", "onChangeText", "onClick", "refKey", "ref"];
-useCombobox$1.stateChangeTypes = stateChangeTypes$1;
-function useCombobox$1(userProps) {
+useCombobox.stateChangeTypes = stateChangeTypes$1;
+function useCombobox(userProps) {
   if (userProps === void 0) {
     userProps = {};
   }
-  validatePropTypes$1(userProps, useCombobox$1);
+  validatePropTypes$1(userProps, useCombobox);
   // Props defaults and destructuring.
   var props = _extends({}, defaultProps$1, userProps);
   var items = props.items,
@@ -6343,7 +6416,7 @@ const styles$1 = {
 	"listview-option": "_listview-option_rxmcz_304"
 };
 
-const ADD_NEW$1 = Symbol.for("add-new");
+const ADD_NEW = Symbol.for("add-new");
 const ComboboxLegacyContext = createContext(null);
 const useComboboxLegacy = function() {
   const context = useContext(
@@ -6401,7 +6474,7 @@ const ComboboxLegacySingle = function(props) {
   const { ref: wrapperDivRef, environment } = useDownshiftEnvironment();
   const showAddNew = hasAddNew && !hasExactMatch;
   const combinedItems = useMemo(
-    () => showAddNew ? [...items, ADD_NEW$1] : items,
+    () => showAddNew ? [...items, ADD_NEW] : items,
     [items, showAddNew]
   );
   const itemToString = itemToStringProp ?? defaultItemToString;
@@ -6419,7 +6492,7 @@ const ComboboxLegacySingle = function(props) {
     setInputValue,
     inputValue,
     closeMenu
-  } = useCombobox$1({
+  } = useCombobox({
     ...rest,
     items: combinedItems,
     itemToString,
@@ -6431,15 +6504,15 @@ const ComboboxLegacySingle = function(props) {
     stateReducer(state, { type, changes }) {
       switch (type) {
         // keep ComboboxLegacy open onBlur, will call close using Popover's onOutsidePress
-        case useCombobox$1.stateChangeTypes.InputBlur:
+        case useCombobox.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) {
+        case useCombobox.stateChangeTypes.InputKeyDownEnter:
+        case useCombobox.stateChangeTypes.ItemClick:
+          if (changes.selectedItem === ADD_NEW) {
             const stateInputValue = state.inputValue;
             setTimeout(() => {
               onSelectItemAddNew?.(stateInputValue);
@@ -6457,7 +6530,7 @@ const ComboboxLegacySingle = function(props) {
             };
           }
         // prevent this from closing the popover by default
-        case useCombobox$1.stateChangeTypes.InputClick:
+        case useCombobox.stateChangeTypes.InputClick:
           return { ...changes, isOpen: open != null ? open : true };
         default:
           return changes;
@@ -6466,7 +6539,7 @@ const ComboboxLegacySingle = function(props) {
     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) {
+      if (type === useCombobox.stateChangeTypes.InputKeyDownEnter || type === useCombobox.stateChangeTypes.ItemClick) {
         setItems(itemsProp);
         setHasExactMatch(true);
       } else if (!inputValueMatchesSelectedItem && !inputValueIsEmpty) {
@@ -6593,7 +6666,7 @@ const ComboboxLegacySingle = function(props) {
           style: { ...style, ...layoutStyles },
           ref: wrapperDivRef,
           children: /* @__PURE__ */ jsx(
-            PopoverLegacy,
+            Popover,
             {
               root,
               open: isOpen,
@@ -6670,7 +6743,7 @@ const ComboboxLegacyMultiple = function(props) {
   const { ref: wrapperDivRef, environment } = useDownshiftEnvironment();
   const showAddNew = hasAddNew && !hasExactMatch;
   const combinedItems = useMemo(
-    () => showAddNew ? [...items, ADD_NEW$1] : items,
+    () => showAddNew ? [...items, ADD_NEW] : items,
     [items, showAddNew]
   );
   const itemToString = itemToStringProp ?? defaultItemToString;
@@ -6733,7 +6806,7 @@ const ComboboxLegacyMultiple = function(props) {
     setInputValue,
     inputValue,
     closeMenu
-  } = useCombobox$1({
+  } = useCombobox({
     ...rest,
     items: combinedItems,
     itemToString,
@@ -6746,7 +6819,7 @@ const ComboboxLegacyMultiple = function(props) {
     stateReducer(state, { type, changes }) {
       switch (type) {
         // keep ComboboxLegacy open onBlur, will call close using Popover's onOutsidePress
-        case useCombobox$1.stateChangeTypes.InputBlur:
+        case useCombobox.stateChangeTypes.InputBlur:
           return {
             ...changes,
             inputValue: state.inputValue,
@@ -6754,9 +6827,9 @@ const ComboboxLegacyMultiple = function(props) {
             isOpen: open != null ? open : true,
             highlightedIndex: state.highlightedIndex
           };
-        case useCombobox$1.stateChangeTypes.InputKeyDownEnter:
-        case useCombobox$1.stateChangeTypes.ItemClick:
-          if (changes.selectedItem === ADD_NEW$1) {
+        case useCombobox.stateChangeTypes.InputKeyDownEnter:
+        case useCombobox.stateChangeTypes.ItemClick:
+          if (changes.selectedItem === ADD_NEW) {
             const stateInputValue = state.inputValue;
             setTimeout(() => {
               onSelectItemAddNew?.(stateInputValue);
@@ -6775,10 +6848,10 @@ const ComboboxLegacyMultiple = function(props) {
             };
           }
         // prevent this from closing the popover by default
-        case useCombobox$1.stateChangeTypes.InputClick:
+        case useCombobox.stateChangeTypes.InputClick:
           return { ...changes, isOpen: open != null ? open : true };
         // prevent this from clearing the input value by default
-        case useCombobox$1.stateChangeTypes.ControlledPropUpdatedSelectedItem:
+        case useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
           return { ...changes, inputValue: state.inputValue };
         default:
           return changes;
@@ -6786,9 +6859,9 @@ const ComboboxLegacyMultiple = function(props) {
     },
     onStateChange({ type, selectedItem: newSelectedItem }) {
       switch (type) {
-        case useCombobox$1.stateChangeTypes.InputKeyDownEnter:
-        case useCombobox$1.stateChangeTypes.ItemClick:
-        case useCombobox$1.stateChangeTypes.InputBlur:
+        case useCombobox.stateChangeTypes.InputKeyDownEnter:
+        case useCombobox.stateChangeTypes.ItemClick:
+        case useCombobox.stateChangeTypes.InputBlur:
           if (newSelectedItem != null) {
             const itemAlreadySelected = selectedItems.some(
               (item) => itemToKey(item) === itemToKey(newSelectedItem)
@@ -6806,7 +6879,7 @@ const ComboboxLegacyMultiple = function(props) {
       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) {
+      if (type === useCombobox.stateChangeTypes.InputKeyDownEnter || type === useCombobox.stateChangeTypes.ItemClick) {
         setItems(itemsProp);
         setHasExactMatch(true);
       } else if (!inputValueMatchesSelectedItem && !inputValueIsEmpty) {
@@ -6928,7 +7001,7 @@ const ComboboxLegacyMultiple = function(props) {
           style: { ...style, ...layoutStyles },
           ref: wrapperDivRef,
           children: /* @__PURE__ */ jsx(
-            PopoverLegacy,
+            Popover,
             {
               root,
               open: !isDisabled && isOpen,
@@ -7103,7 +7176,7 @@ const SelectLegacySingle = function(props) {
           style: { ...style, ...layoutStyles },
           ref: wrapperDivRef,
           children: /* @__PURE__ */ jsx(
-            PopoverLegacy,
+            Popover,
             {
               root,
               open: isOpen,
@@ -7343,7 +7416,7 @@ const SelectLegacyMultiple = function(props) {
           style: { ...style, ...layoutStyles },
           ref: wrapperDivRef,
           children: /* @__PURE__ */ jsx(
-            PopoverLegacy,
+            Popover,
             {
               root,
               open: !isDisabled && isOpen,
@@ -7822,7 +7895,7 @@ const ComboboxLegacyList = function({
         {
           ...getMenuProps(rest),
           "data-anv": "combobox-list",
-          className: cx(styles$1["listview"], styles$2["listview"]),
+          className: cx(styles$1["listview"], styles$3["listview"]),
           style: {
             display: items.length || hasAddNew ? void 0 : "none",
             overflow: "auto"
@@ -7842,7 +7915,7 @@ const ComboboxLegacyList = function({
         {
           ...getMenuProps(rest),
           "data-anv": "combobox-list",
-          className: styles$3["listbox"],
+          className: styles$4["listbox"],
           style: {
             display: items.length || hasAddNew ? void 0 : "none",
             overflow: "auto"
@@ -7913,10 +7986,10 @@ const ComboboxLegacyItem = function({
         }),
         className: cx(
           styles$1["listview-option"],
-          styles$2["listview-option"]
+          styles$3["listview-option"]
         ),
         children: [
-          /* @__PURE__ */ jsx("div", { className: cx(styles$1["cell"], styles$2["cell"]), children: /* @__PURE__ */ jsx("div", { className: checkboxStyles["wrapper"], children: /* @__PURE__ */ jsxs("div", { className: checkboxStyles["checkbox"], children: [
+          /* @__PURE__ */ jsx("div", { className: cx(styles$1["cell"], styles$3["cell"]), children: /* @__PURE__ */ jsx("div", { className: checkboxStyles["wrapper"], children: /* @__PURE__ */ jsxs("div", { className: checkboxStyles["checkbox"], children: [
             /* @__PURE__ */ jsx(
               "input",
               {
@@ -7994,7 +8067,7 @@ const ComboboxLegacyItem = function({
           /* @__PURE__ */ jsx(
             Flex,
             {
-              className: styles$3["children"],
+              className: styles$4["children"],
               grow: 1,
               shrink: 1,
               alignItems,
@@ -8053,7 +8126,7 @@ const ComboboxLegacyItemAddNew = function({
     ComboboxLegacyItem,
     {
       ...props,
-      item: ADD_NEW$1,
+      item: ADD_NEW,
       index: items.length
     }
   ) : null;
@@ -8072,469 +8145,959 @@ const ComboboxLegacyEmpty = function({
   return !items.length ? children : null;
 };
 
-const ComboboxTrigger = function(props) {
+const ComboboxEmptyElement = function({
+  children
+}) {
+  const { items, setHasEmpty } = useCombobox$1();
+  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_156am_18";
+const group = "_group_156am_31";
+const combobox = "_combobox_156am_46";
+const listview = "_listview_156am_55";
+const empty = "_empty_156am_63";
+const Icon = "_Icon_156am_108";
+const styles = {
+	item: item,
+	group: group,
+	combobox: combobox,
+	"popover-content": "_popover-content_156am_50",
+	listview: listview,
+	"loading-spinner": "_loading-spinner_156am_59",
+	empty: empty,
+	"group-title": "_group-title_156am_74",
+	Icon: Icon,
+	"listview-option": "_listview-option_156am_113"
+};
+
+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?.(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 {
-    // variant: variantProp = "combobox",
     className,
     style,
-    label,
-    size,
-    error,
-    hint,
-    description,
-    required,
-    moreInfo,
-    openMoreInfo,
-    prefix,
-    suffix,
-    maxRows,
-    selectedItemProps = () => ({}),
-    id,
-    placeholder,
+    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 [isReadOnly, setIsReadOnly] = useState(readOnly);
+  const [isDisabled, setIsDisabled] = useState(disabled);
+  const referenceRef = useRef(null);
+  const contentRef = 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 {
-    select,
-    disableClearSelection,
-    itemToString,
+    isOpen,
     getLabelProps,
-    getInputProps,
     getToggleButtonProps,
     getMenuProps,
+    getItemProps,
+    highlightedIndex,
     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();
+    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 : 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;
     }
-  };
-  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 (reset != null) {
-      reset();
-    } else {
-      selectItem(null);
-    }
-  };
-  const styleCombined = {
-    ...style,
-    ...layoutStyles
-  };
+  useEffect(() => {
+    setIsDisabled(disabled);
+  }, [disabled]);
+  useEffect(() => {
+    setIsReadOnly(readOnly);
+  }, [readOnly]);
   return /* @__PURE__ */ jsx(
-    SelectTriggerBase,
+    ComboboxContext.Provider,
     {
-      "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 {};
+      value: {
+        multiple: false,
+        select: true,
+        disableClearSelection,
+        items: orderedItems,
+        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,
+        groups,
+        groupBy,
+        groupToString
       },
-      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
-        }) : {}
-      }
+      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 ComboboxSearchField$1 = function(props) {
-  if (!supportsPopover())
-    return /* @__PURE__ */ jsx(ComboboxLegacyTrigger, { ...props, variant: "combobox" });
-  return /* @__PURE__ */ jsx(ComboboxTrigger, { ...props, variant: "combobox" });
-};
-const ComboboxSelectTrigger$1 = function(props) {
-  if (!supportsPopover())
-    return /* @__PURE__ */ jsx(ComboboxLegacyTrigger, { ...props, variant: "select" });
-  return /* @__PURE__ */ jsx(ComboboxTrigger, { ...props, variant: "select" });
-};
-
-const item = "_item_1wcw0_2";
-const group = "_group_1wcw0_15";
-const combobox = "_combobox_1wcw0_30";
-const listview = "_listview_1wcw0_39";
-const empty = "_empty_1wcw0_47";
-const Icon = "_Icon_1wcw0_92";
-const styles = {
-	item: item,
-	group: group,
-	combobox: combobox,
-	"popover-content": "_popover-content_1wcw0_34",
-	listview: listview,
-	"loading-spinner": "_loading-spinner_1wcw0_43",
-	empty: empty,
-	"group-title": "_group-title_1wcw0_58",
-	Icon: Icon,
-	"listview-option": "_listview-option_1wcw0_97"
-};
-
-const ComboboxGroupContext = createContext(null);
-const ComboboxGroupProvider = ComboboxGroupContext.Provider;
-
-const ComboboxContentElement = function({
-  children,
-  className,
-  disablePopover = false,
-  ...rest
-}) {
+const SelectMultiple = function(props) {
+  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
   const {
+    className,
+    style,
+    children,
+    open,
     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);
+    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,
+    ...rest
+  } = componentProps;
+  const ComboboxClassNames = cx(styles["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) => {
+    if (disableCloseOnClickOutside) return;
+    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: items.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 { ref: wrapperDivRef, environment } = useDownshiftEnvironment$1();
+  const itemToString = itemToStringProp ?? defaultItemToString$1;
+  const itemToKey = itemToKeyProp ?? defaultItemToKey$1;
+  const { groups, orderedItems } = useGroups({ items, groupBy, groupToString });
+  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 id = useId();
-  return disablePopover ? /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...rest,
-      className: ComboboxPopoverContentClassNames,
-      ref: contentRef,
-      onBlur: handleBlur,
-      children: groups?.length ? groups.map((group) => /* @__PURE__ */ jsx(ComboboxGroupProvider, { value: group, children: /* @__PURE__ */ jsx(
-        "ul",
-        {
-          "aria-labelledby": `${id}-group-${group.key}`,
-          className: cx(styles["group"], styles$3["listbox"]),
-          "data-anv": "combobox-group",
-          role: "group",
-          children: /* @__PURE__ */ jsxs("li", { children: [
-            /* @__PURE__ */ jsx(
-              Text,
-              {
-                className: styles["group-title"],
-                id: `${id}-group-${group.key}`,
-                variant: "eyebrow",
-                children: group.label
-              }
-            ),
-            resolveChildren(group.items)
-          ] })
-        }
-      ) }, group.key)) : resolveChildren(items)
+  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 : 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 (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;
     }
-  ) : /* @__PURE__ */ jsx(
-    Popover.Content,
+  });
+  useEffect(() => {
+    setIsDisabled(disabled);
+  }, [disabled]);
+  useEffect(() => {
+    setIsReadOnly(readOnly);
+  }, [readOnly]);
+  return /* @__PURE__ */ jsx(
+    ComboboxContext.Provider,
     {
-      "data-anv": "combobox-content",
-      ...rest,
-      className: ComboboxPopoverContentClassNames,
-      ref: getMenuProps({ ref: contentRef }, { suppressRefError: true }).ref,
-      tabIndex: -1,
-      onBlur: handleBlur,
-      children: groups?.length ? groups.map((group) => /* @__PURE__ */ jsx(ComboboxGroupProvider, { value: group, children: /* @__PURE__ */ jsx(
-        "ul",
+      value: {
+        multiple: true,
+        select: true,
+        items: orderedItems,
+        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,
+        groupBy,
+        groupToString,
+        groups
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
         {
-          "aria-labelledby": `${id}-group-${group.key}`,
-          className: cx(styles["group"], styles$3["listbox"]),
-          "data-anv": "combobox-group",
-          role: "group",
-          children: /* @__PURE__ */ jsxs("li", { children: [
-            /* @__PURE__ */ jsx(
-              Text,
-              {
-                className: styles["group-title"],
-                id: `${id}-group-${group.key}`,
-                variant: "eyebrow",
-                children: group.label
-              }
-            ),
-            resolveChildren(group.items)
-          ] })
+          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
+            }
+          )
         }
-      ) }, group.key)) : resolveChildren(items)
+      )
     }
   );
 };
-const ComboboxContent$1 = 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 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 ComboboxListElement = function({
+const ComboboxGroupContext = createContext(null);
+const ComboboxGroupProvider = ComboboxGroupContext.Provider;
+
+const ComboboxContentElement = function({
   children,
+  className,
+  disablePopover = false,
   ...rest
 }) {
   const {
-    getMenuProps,
-    multiple,
     items,
-    hasAddNew = false,
-    hasEmpty,
-    loading
-  } = useCombobox();
-  if (!supportsPopover())
-    return /* @__PURE__ */ jsx(ComboboxLegacyList, { ...rest, children });
-  if (multiple) {
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        "div",
+    itemToKey,
+    inputValue,
+    selectedItem,
+    selectedItems,
+    setHasDisabledPopover,
+    getMenuProps,
+    getItemProps,
+    isDisabled,
+    isReadOnly,
+    contentRef,
+    closeMenu,
+    groups
+  } = useCombobox$1();
+  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: items.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();
+  return disablePopover ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      className: ComboboxPopoverContentClassNames,
+      ref: contentRef,
+      onBlur: handleBlur,
+      children: groups?.length ? groups.map((group) => /* @__PURE__ */ jsx(ComboboxGroupProvider, { value: group, children: /* @__PURE__ */ jsx(
+        "ul",
         {
-          ...getMenuProps(rest),
-          "data-anv": "combobox-list",
-          className: cx(styles["listview"], styles$2["listview"]),
-          style: {
-            display: items.length || hasAddNew ? void 0 : "none",
-            overflow: "auto"
-          },
-          children
+          "aria-labelledby": `${id}-group-${group.key}`,
+          className: cx(styles["group"], styles$4["listbox"]),
+          "data-anv": "combobox-group",
+          role: "group",
+          children: /* @__PURE__ */ jsxs("li", { children: [
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                className: styles["group-title"],
+                id: `${id}-group-${group.key}`,
+                variant: "eyebrow",
+                children: group.label
+              }
+            ),
+            resolveChildren(group.items)
+          ] })
         }
-      ),
-      loading ? /* @__PURE__ */ jsx("div", { className: styles["empty"], children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Spinner, { className: styles["loading-spinner"] }) }) }) : !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(
+      ) }, group.key)) : resolveChildren(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 ? groups.map((group) => /* @__PURE__ */ jsx(ComboboxGroupProvider, { value: group, children: /* @__PURE__ */ jsx(
         "ul",
         {
-          ...getMenuProps(rest),
-          "data-anv": "combobox-list",
-          className: styles$3["listbox"],
-          style: {
-            display: items.length || hasAddNew ? void 0 : "none",
-            overflow: "auto"
-          },
-          children
+          "aria-labelledby": `${id}-group-${group.key}`,
+          className: cx(styles["group"], styles$4["listbox"]),
+          "data-anv": "combobox-group",
+          role: "group",
+          children: /* @__PURE__ */ jsxs("li", { children: [
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                className: styles["group-title"],
+                id: `${id}-group-${group.key}`,
+                variant: "eyebrow",
+                children: group.label
+              }
+            ),
+            resolveChildren(group.items)
+          ] })
         }
-      ),
-      loading ? /* @__PURE__ */ jsx("div", { className: styles["empty"], children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Spinner, { className: styles["loading-spinner"] }) }) }) : !items.length && !hasEmpty ? /* @__PURE__ */ jsx("div", { className: styles["empty"], children: /* @__PURE__ */ jsx(Text, { subdued: true, size: "small", children: "No match found" }) }) : null
-    ] });
-  }
+      ) }, group.key)) : resolveChildren(items)
+    }
+  );
 };
-const ComboboxList$1 = function({
+const ComboboxContent = function({
   children,
   className,
+  disablePopover = false,
   ...rest
 }) {
   if (!supportsPopover())
-    return /* @__PURE__ */ jsx(ComboboxLegacyList, { className, ...rest, children });
-  return /* @__PURE__ */ jsx(ComboboxListElement, { className, ...rest, children });
+    return /* @__PURE__ */ jsx(
+      ComboboxLegacyContent,
+      {
+        disablePopover,
+        className,
+        ...rest,
+        children
+      }
+    );
+  return /* @__PURE__ */ jsx(
+    ComboboxContentElement,
+    {
+      className,
+      disablePopover,
+      ...rest,
+      children
+    }
+  );
 };
 
-const ComboboxItemElement = function({
-  children,
-  disabled: disabledProp,
-  item,
-  index: indexProp,
-  alignItems,
-  justifyItems,
-  alignContent,
-  justifyContent,
-  placeItems,
-  placeContent,
-  gap,
-  rowGap,
-  columnGap,
-  ...rest
-}) {
+const ComboboxTrigger = function(props) {
+  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
   const {
-    itemToKey,
-    getItemProps,
-    multiple,
+    // variant: variantProp = "combobox",
+    className,
+    style,
+    label,
+    size,
+    error,
+    hint,
+    description,
+    required,
+    moreInfo,
+    openMoreInfo,
+    prefix,
+    suffix,
+    maxRows,
+    selectedItemProps = () => ({}),
+    id,
+    placeholder,
+    disabled,
+    readOnly,
+    ...rest
+  } = componentProps;
+  const {
+    select,
+    disableClearSelection,
+    itemToString,
+    getLabelProps,
+    getInputProps,
+    getToggleButtonProps,
+    getMenuProps,
     selectedItem,
     selectedItems,
-    disabledItems,
-    setDisabledItems,
-    highlightedIndex,
-    items,
-    groupBy
-  } = useCombobox();
+    getSelectedItemProps,
+    getDropdownProps,
+    reset,
+    removeSelectedItem,
+    selectItem,
+    inputValue,
+    isDisabled,
+    isReadOnly,
+    referenceRef,
+    closeMenu,
+    setIsDisabled,
+    setIsReadOnly
+  } = useCombobox$1();
+  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 (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(props) {
+  if (!supportsPopover())
+    return /* @__PURE__ */ jsx(ComboboxLegacyTrigger, { ...props, variant: "combobox" });
+  return /* @__PURE__ */ jsx(ComboboxTrigger, { ...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,
+  alignItems,
+  justifyItems,
+  alignContent,
+  justifyContent,
+  placeItems,
+  placeContent,
+  gap,
+  rowGap,
+  columnGap,
+  ...rest
+}) {
+  const {
+    itemToKey,
+    getItemProps,
+    multiple,
+    selectedItem,
+    selectedItems,
+    disabledItems,
+    setDisabledItems,
+    highlightedIndex,
+    items,
+    groupBy
+  } = useCombobox$1();
   const index = groupBy ? items.indexOf(item) : indexProp;
   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));
+      setDisabledItems(
+        disabledItems.filter((prevItem) => prevItem === item)
+      );
     }
     return () => {
       if (disabledItems.includes(item)) {
-        setDisabledItems(disabledItems.filter((prevItem) => prevItem === item));
+        setDisabledItems(
+          disabledItems.filter((prevItem) => prevItem === item)
+        );
       }
     };
   }, [item, disabledProp, setDisabledItems]);
@@ -8554,10 +9117,10 @@ const ComboboxItemElement = function({
         }),
         className: cx(
           styles["listview-option"],
-          styles$2["listview-option"]
+          styles$3["listview-option"]
         ),
         children: [
-          item !== ADD_NEW ? /* @__PURE__ */ jsx("div", { className: cx(styles["cell"], styles$2["cell"]), children: /* @__PURE__ */ jsx("div", { className: checkboxStyles["wrapper"], children: /* @__PURE__ */ jsxs("div", { className: checkboxStyles["checkbox"], children: [
+          item !== ADD_NEW$1 ? /* @__PURE__ */ jsx("div", { className: cx(styles["cell"], styles$3["cell"]), children: /* @__PURE__ */ jsx("div", { className: checkboxStyles["wrapper"], children: /* @__PURE__ */ jsxs("div", { className: checkboxStyles["checkbox"], children: [
             /* @__PURE__ */ jsx(
               "input",
               {
@@ -8636,7 +9199,7 @@ const ComboboxItemElement = function({
           /* @__PURE__ */ jsx(
             Flex,
             {
-              className: styles$3["children"],
+              className: styles$4["children"],
               grow: 1,
               shrink: 1,
               alignItems,
@@ -8668,21 +9231,32 @@ const ComboboxItemElement = function({
     );
   }
 };
-const ComboboxItem$1 = function(props) {
+const ComboboxItemElement = function(props) {
   if (!supportsPopover()) return /* @__PURE__ */ jsx(ComboboxLegacyItem, { ...props });
-  return /* @__PURE__ */ jsx(ComboboxItemElement, { ...props });
+  return /* @__PURE__ */ jsx(CoreComboboxItemElement, { ...props });
 };
-const ComboboxItemAddNewElement = function({
-  onSelection,
-  ...props
-}) {
-  const { items, setHasAddNew, hasExactMatch, setOnSelectItemAddNew } = useCombobox();
-  useEffect(() => {
-    setHasAddNew?.(true);
-    return () => {
-      setHasAddNew?.(false);
-    };
-  }, []);
+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$1();
+  useEffect(() => {
+    setHasAddNew?.(true);
+    return () => {
+      setHasAddNew?.(false);
+    };
+  }, []);
   useEffect(() => {
     setOnSelectItemAddNew?.(() => onSelection);
     return () => {
@@ -8696,88 +9270,90 @@ const ComboboxItemAddNewElement = function({
     }
   }, []);
   return !hasExactMatch && !firstRenderRef.current ? /* @__PURE__ */ jsx(
-    ComboboxItem$1,
+    ComboboxItem,
     {
       ...props,
-      item: ADD_NEW,
+      item: ADD_NEW$1,
       index: items.length
     }
   ) : null;
 };
-const ComboboxItemAddNew$1 = function(props) {
+const ComboboxItemAddNewElement = function(props) {
   if (!supportsPopover()) return /* @__PURE__ */ jsx(ComboboxLegacyItemAddNew, { ...props });
-  return /* @__PURE__ */ jsx(ComboboxItemAddNewElement, { ...props });
+  return /* @__PURE__ */ jsx(CoreComboboxItemAddNewElement, { ...props });
 };
-
-const ComboboxEmptyElement = function({
-  children
-}) {
-  const { items, setHasEmpty } = useCombobox();
-  useEffect(() => {
-    setHasEmpty?.(true);
-    return () => {
-      setHasEmpty?.(false);
-    };
+const ComboboxItemAddNew = function(props) {
+  const data = {
+    item: "add-new"
+  };
+  const trackingId = useTrackingId({
+    name: "ComboboxItemAddNew",
+    data,
+    hasOverride: !!props["data-tracking-id"]
   });
-  if (!supportsPopover()) return;
-  return !items.length ? children : null;
+  return /* @__PURE__ */ jsx(ComboboxItemAddNewElement, { "data-tracking-id": trackingId, ...props });
 };
-const ComboboxEmpty$1 = function({
-  children
+
+const ComboboxListElement = function({
+  children,
+  ...rest
 }) {
+  const {
+    getMenuProps,
+    multiple,
+    items,
+    hasAddNew = false,
+    hasEmpty,
+    loading
+  } = useCombobox$1();
   if (!supportsPopover())
-    return /* @__PURE__ */ jsx(ComboboxLegacyEmpty, { children });
-  return /* @__PURE__ */ jsx(ComboboxEmptyElement, { children });
+    return /* @__PURE__ */ jsx(ComboboxLegacyList, { ...rest, children });
+  if (multiple) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...getMenuProps(rest),
+          "data-anv": "combobox-list",
+          className: cx(styles["listview"], styles$3["listview"]),
+          style: {
+            display: items.length || hasAddNew ? void 0 : "none",
+            overflow: "auto"
+          },
+          children
+        }
+      ),
+      loading ? /* @__PURE__ */ jsx("div", { className: styles["empty"], children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Spinner, { className: styles["loading-spinner"] }) }) }) : !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),
+          "data-anv": "combobox-list",
+          className: styles$4["listbox"],
+          style: {
+            display: items.length || hasAddNew ? void 0 : "none",
+            overflow: "auto"
+          },
+          children
+        }
+      ),
+      loading ? /* @__PURE__ */ jsx("div", { className: styles["empty"], children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Spinner, { className: styles["loading-spinner"] }) }) }) : !items.length && !hasEmpty ? /* @__PURE__ */ jsx("div", { className: styles["empty"], children: /* @__PURE__ */ jsx(Text, { subdued: true, size: "small", children: "No match found" }) }) : null
+    ] });
+  }
 };
-
-function useGroups({
-  items,
-  groupBy,
-  groupToString,
-  groupSorter = (a, b) => `${a}`.localeCompare(`${b}`)
+const ComboboxList = function({
+  children,
+  className,
+  ...rest
 }) {
-  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?.(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 ADD_NEW = Symbol.for("add-new");
-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;
+  if (!supportsPopover())
+    return /* @__PURE__ */ jsx(ComboboxLegacyList, { className, ...rest, children });
+  return /* @__PURE__ */ jsx(ComboboxListElement, { className, ...rest, children });
 };
-function isMultiple(props) {
-  return Object.hasOwn(props, "multiple") && props.multiple === true;
-}
+
 const ComboboxSingle = function(props) {
   const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
   const {
@@ -8837,7 +9413,7 @@ const ComboboxSingle = function(props) {
   });
   const showAddNew = hasAddNew && !hasExactMatch;
   const combinedItems = useMemo(
-    () => showAddNew ? [...searchedItemsOrderedByGroup, ADD_NEW] : searchedItemsOrderedByGroup,
+    () => showAddNew ? [...searchedItemsOrderedByGroup, ADD_NEW$1] : searchedItemsOrderedByGroup,
     [searchedItemsOrderedByGroup, showAddNew]
   );
   const itemToString = itemToStringProp ?? defaultItemToString$1;
@@ -8855,7 +9431,7 @@ const ComboboxSingle = function(props) {
     setInputValue,
     inputValue,
     closeMenu
-  } = useCombobox$1({
+  } = useCombobox({
     ...rest,
     items: combinedItems,
     itemToString,
@@ -8867,15 +9443,15 @@ const ComboboxSingle = function(props) {
     stateReducer(state, { type, changes }) {
       switch (type) {
         // keep Combobox open onBlur, will call close using Popover's onOutsidePress
-        case useCombobox$1.stateChangeTypes.InputBlur:
+        case useCombobox.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) {
+        case useCombobox.stateChangeTypes.InputKeyDownEnter:
+        case useCombobox.stateChangeTypes.ItemClick:
+          if (changes.selectedItem === ADD_NEW$1) {
             const stateInputValue = state.inputValue;
             setTimeout(() => {
               onSelectItemAddNew?.(stateInputValue);
@@ -8893,7 +9469,7 @@ const ComboboxSingle = function(props) {
             };
           }
         // prevent this from closing the popover by default
-        case useCombobox$1.stateChangeTypes.InputClick:
+        case useCombobox.stateChangeTypes.InputClick:
           return { ...changes, isOpen: open != null ? open : true };
         default:
           return changes;
@@ -8902,7 +9478,7 @@ const ComboboxSingle = function(props) {
     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) {
+      if (type === useCombobox.stateChangeTypes.InputKeyDownEnter || type === useCombobox.stateChangeTypes.ItemClick) {
         setItems(allItemsOrderedByGroup);
         setHasExactMatch(true);
       } else if (!inputValueMatchesSelectedItem && !inputValueIsEmpty && !disableFilter) {
@@ -9125,7 +9701,7 @@ const ComboboxMultiple = function(props) {
   });
   const showAddNew = hasAddNew && !hasExactMatch;
   const combinedItems = useMemo(
-    () => showAddNew ? [...items, ADD_NEW] : searchedItemsOrderedByGroup,
+    () => showAddNew ? [...items, ADD_NEW$1] : searchedItemsOrderedByGroup,
     [items, searchedItemsOrderedByGroup, showAddNew]
   );
   const itemToString = itemToStringProp ?? defaultItemToString$1;
@@ -9190,7 +9766,7 @@ const ComboboxMultiple = function(props) {
     setInputValue,
     inputValue,
     closeMenu
-  } = useCombobox$1({
+  } = useCombobox({
     ...rest,
     items: combinedItems,
     itemToString,
@@ -9203,7 +9779,7 @@ const ComboboxMultiple = function(props) {
     stateReducer(state, { type, changes }) {
       switch (type) {
         // keep Combobox open onBlur, will call close using Popover's onOutsidePress
-        case useCombobox$1.stateChangeTypes.InputBlur:
+        case useCombobox.stateChangeTypes.InputBlur:
           return {
             ...changes,
             inputValue: state.inputValue,
@@ -9211,935 +9787,222 @@ const ComboboxMultiple = function(props) {
             isOpen: open != null ? open : true,
             highlightedIndex: state.highlightedIndex
           };
-        case useCombobox$1.stateChangeTypes.InputKeyDownEnter:
-        case useCombobox$1.stateChangeTypes.ItemClick:
-          if (changes.selectedItem === ADD_NEW) {
+        case useCombobox.stateChangeTypes.InputKeyDownEnter:
+        case useCombobox.stateChangeTypes.ItemClick:
+          if (changes.selectedItem === ADD_NEW$1) {
             const stateInputValue = state.inputValue;
             setTimeout(() => {
               onSelectItemAddNew?.(stateInputValue);
-            }, 250);
-            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(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;
-    }
-  });
-  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 && !disableFilter) {
-      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(
-    ComboboxContext.Provider,
-    {
-      value: {
-        multiple: true,
-        select: false,
-        items: searchedItemsOrderedByGroup,
-        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,
-        groupBy,
-        groupToString,
-        groups: searchedGroups
-      },
-      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 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 [isReadOnly, setIsReadOnly] = useState(readOnly);
-  const [isDisabled, setIsDisabled] = useState(disabled);
-  const referenceRef = useRef(null);
-  const contentRef = 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 : 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,
-        selectItem,
-        inputValue,
-        isDisabled,
-        isReadOnly,
-        setIsReadOnly,
-        setIsDisabled,
-        hasDisabledPopover,
-        setHasDisabledPopover,
-        hasEmpty,
-        setHasEmpty,
-        loading,
-        referenceRef,
-        contentRef,
-        closeMenu,
-        groups,
-        groupBy,
-        groupToString
-      },
-      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,
-    ...rest
-  } = componentProps;
-  const ComboboxClassNames = cx(styles["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) => {
-    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 {
-    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 : 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 (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;
-    }
-  });
-  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,
-        getSelectedItemProps,
-        getDropdownProps,
-        reset,
-        addSelectedItem,
-        removeSelectedItem,
-        setSelectedItems,
-        selectItem,
-        inputValue,
-        isDisabled,
-        isReadOnly,
-        setIsReadOnly,
-        setIsDisabled,
-        hasDisabledPopover,
-        setHasDisabledPopover,
-        hasEmpty,
-        setHasEmpty,
-        loading,
-        referenceRef,
-        contentRef,
-        closeMenu,
-        groupBy,
-        groupToString,
-        groups
-      },
-      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$1 = 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 ComboboxSelect$1 = 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 Combobox$1 = Object.assign(ComboboxElement$1, {
-  Select: ComboboxSelect$1,
-  SearchField: ComboboxSearchField$1,
-  SelectTrigger: ComboboxSelectTrigger$1,
-  Content: ComboboxContent$1,
-  List: ComboboxList$1,
-  Item: ComboboxItem$1,
-  ItemAddNew: ComboboxItemAddNew$1,
-  Empty: ComboboxEmpty$1
-});
-
-const SCROLL_THRESHOLD = 0.64;
-function useInfiniteCombobox({
-  query,
-  queryInitialItems,
-  initialItems = [],
-  initialPage = 0,
-  initialLoading = false,
-  initialInputValue,
-  defaultInputValue,
-  initialSelectedItem,
-  defaultSelectedItem,
-  initialSelectedItems,
-  defaultSelectedItems,
-  updateOnInputValueChange = true,
-  updateOnSelectedItemChange = true,
-  updateOnSelectedItemsChange = true,
-  queryOnFirstRender = false,
-  shouldTriggerQuery: shouldTriggerQueryProp
-}) {
-  const [items, setItems] = useState(initialItems);
-  const deferredItems = useDeferredValue(items);
-  const [page, setPage] = useState(initialPage);
-  const [loading, setLoading] = useState(initialLoading);
-  const deferredLoading = useDeferredValue(loading);
-  const [inputValue, setInputValue] = useState(
-    initialInputValue ?? defaultInputValue ?? ""
-  );
-  const [selectedItem, setSelectedItem] = useState(
-    initialSelectedItem ?? defaultSelectedItem ?? null
-  );
-  const [selectedItems, setSelectedItems] = useState(
-    initialSelectedItems ?? defaultSelectedItems ?? []
-  );
-  const scrollerRef = useRef(null);
-  const defaultShouldTriggerQuery = (element) => {
-    const totalScrollHeight = element.scrollHeight - element.clientHeight;
-    return element.scrollTop / totalScrollHeight > SCROLL_THRESHOLD;
-  };
-  const [triggerQueryCount, setTriggerQueryCount] = useState(0);
-  const triggerQueryCountRef = useRef(0);
-  const triggerQuery = () => {
-    setTriggerQueryCount((x) => x + 1);
-    triggerQueryCountRef.current += 1;
-  };
-  const [done, setDone] = useState(false);
-  const firstRenderRef = useRef(true);
-  const scrollTimeoutRef = useRef(false);
-  const loadingRef = useRef(false);
-  const setLoadingStateAndRef = (isLoading) => {
-    setLoading(isLoading);
-    loadingRef.current = isLoading;
-  };
-  const queryRetryCountRef = useRef(0);
-  useEffect(() => {
-    if (firstRenderRef.current && queryInitialItems) {
-      setItems(queryInitialItems());
-    }
-    if (firstRenderRef.current && !queryOnFirstRender) {
-      firstRenderRef.current = false;
-      return;
-    }
-    setLoadingStateAndRef(true);
-    const timeoutID = setTimeout(() => {
-      if (triggerQueryCount < triggerQueryCountRef.current) return;
-      query({
-        page,
-        inputValue,
-        selectedItem,
-        selectedItems
-      }).then((res) => {
-        queryRetryCountRef.current = 0;
-        if (triggerQueryCount < triggerQueryCountRef.current) return;
-        setLoadingStateAndRef(false);
-        setPage((x) => x + 1);
-        if (res == null || page > 0 && res.length === 0) {
-          setDone(true);
-        } else if (page === 0) {
-          setItems(() => [...res]);
-        } else {
-          setItems((prevItems) => [...prevItems, ...res]);
-        }
-      }).catch(() => {
-        queryRetryCountRef.current += 1;
-        if (queryRetryCountRef.current > 7) {
-          queryRetryCountRef.current = 0;
-          return;
-        } else {
-          setTimeout(
-            () => {
-              triggerQuery();
-            },
-            2 ** queryRetryCountRef.current * 160
-          );
-        }
-      });
-    }, 160);
-    return () => {
-      clearTimeout(timeoutID);
-    };
-  }, [triggerQueryCount]);
-  useLayoutEffect(() => {
-    setTimeout(() => {
-      if (scrollerRef.current && scrollerRef.current.scrollHeight > 0 && scrollerRef.current.clientHeight > 0 && scrollerRef.current.scrollHeight <= scrollerRef.current.clientHeight) {
-        triggerQuery();
+            }, 250);
+            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.stateChangeTypes.InputClick:
+          return { ...changes, isOpen: open != null ? open : true };
+        // prevent this from clearing the input value by default
+        case useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
+          return { ...changes, inputValue: state.inputValue };
+        default:
+          return changes;
       }
-    }, 160);
-  }, [items]);
-  const isEmpty = items.length === 0 && page === 0;
-  const onStateChange = useCallback(
-    (changes) => {
-      if (isEmpty && "isOpen" in changes && changes.isOpen === true) {
-        triggerQuery();
+    },
+    onStateChange(changes) {
+      const { type, selectedItem: newSelectedItem } = changes;
+      switch (type) {
+        case useCombobox.stateChangeTypes.InputKeyDownEnter:
+        case useCombobox.stateChangeTypes.ItemClick:
+        case useCombobox.stateChangeTypes.InputBlur:
+          if (newSelectedItem != null) {
+            const itemAlreadySelected = selectedItems.some(
+              (item) => itemToKey(item) === itemToKey(newSelectedItem)
+            );
+            if (itemAlreadySelected) {
+              removeSelectedItem(newSelectedItem);
+            } else {
+              addSelectedItem(newSelectedItem);
+            }
+          }
+          break;
       }
-      const inputValueShouldUpdate = updateOnInputValueChange && "inputValue" in changes;
-      const selectedItemsShouldUpdate = updateOnSelectedItemsChange && "selectedItems" in changes && changes.selectedItems;
-      const selectedItemShouldUpdate = updateOnSelectedItemChange && "selectedItem" in changes && changes.selectedItem !== void 0;
-      if (inputValueShouldUpdate) {
-        setInputValue(changes.inputValue ?? "");
+      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.stateChangeTypes.InputKeyDownEnter || type === useCombobox.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);
       }
-      if (selectedItemsShouldUpdate) {
-        setSelectedItems(changes.selectedItems ?? []);
+    }),
+    onIsOpenChange({ isOpen: isOpen2 }) {
+      if (isOpen2 === false) {
+        setTimeout(() => {
+          setInputValue("");
+          setItems(allItemsOrderedByGroup);
+        }, 200);
       }
-      if (selectedItemShouldUpdate) {
-        setSelectedItem(changes.selectedItem);
+    },
+    isItemDisabled(item) {
+      if (isDisabled || isReadOnly) {
+        return !!isDisabled || !!isReadOnly;
       }
-      if (inputValueShouldUpdate || selectedItemsShouldUpdate || selectedItemShouldUpdate) {
-        setPage(0);
-        setDone(false);
-        triggerQuery();
+      if (item && item instanceof Object && "disabled" in item && item.disabled) {
+        return true;
       }
-    },
-    [
-      isEmpty,
-      updateOnInputValueChange,
-      updateOnSelectedItemsChange,
-      updateOnSelectedItemChange
-    ]
-  );
-  const onScroll = useCallback(
-    (e) => {
-      const element = e.currentTarget;
-      if (!scrollTimeoutRef.current && !loadingRef.current) {
-        setTimeout(() => {
-          const shouldTriggerQuery = shouldTriggerQueryProp ?? defaultShouldTriggerQuery;
-          if (shouldTriggerQuery(element) && !done) {
-            triggerQuery();
-          }
-          scrollTimeoutRef.current = false;
-        }, 40);
-        scrollTimeoutRef.current = true;
+      if (item && item instanceof Object && "readOnly" in item && item.readOnly) {
+        return true;
       }
-    },
-    [done, shouldTriggerQueryProp]
-  );
-  return {
-    comboboxProps: {
-      items: deferredItems,
-      loading: deferredLoading,
-      initialInputValue,
-      defaultInputValue,
-      initialSelectedItem,
-      defaultSelectedItem,
-      initialSelectedItems,
-      defaultSelectedItems,
-      disableFilter: true,
-      // assume the query will return a filtered/sorted list
-      onStateChange
-    },
-    contentProps: {
-      onScroll,
-      scrollerRef
+      if (disabledItems.includes(item)) {
+        return true;
+      }
+      return false;
     }
-  };
-}
-
-const ComboboxElement = function(props) {
-  return /* @__PURE__ */ jsx(Combobox$1, { ...props });
-};
-const ComboboxSelect = function(props) {
-  return /* @__PURE__ */ jsx(ComboboxSelect$1, { ...props });
-};
-const ComboboxContent = function(props) {
-  return /* @__PURE__ */ jsx(Combobox$1.Content, { ...props });
-};
-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"
+  storedSetInputValue = setInputValue;
+  const firstRenderRef = useRef(true);
+  useEffect(() => {
+    if (firstRenderRef.current === true) {
+      firstRenderRef.current = false;
     }
-  ) : prefixProp;
+  }, []);
+  useEffect(() => {
+    setIsDisabled(disabled);
+  }, [disabled]);
+  useEffect(() => {
+    setIsReadOnly(readOnly);
+  }, [readOnly]);
+  useEffect(() => {
+    if (firstRenderRef.current) return;
+    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);
+    }
+  }, [itemsProp]);
   return /* @__PURE__ */ jsx(
-    Combobox$1.SearchField,
+    ComboboxContext.Provider,
     {
-      "data-tracking-id": trackingId,
-      ...props,
-      prefix
+      value: {
+        multiple: true,
+        select: false,
+        items: searchedItemsOrderedByGroup,
+        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,
+        groupBy,
+        groupToString,
+        groups: searchedGroups
+      },
+      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 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(
-    Combobox$1.SelectTrigger,
-    {
-      "data-tracking-id": trackingId,
-      ...props,
-      prefix
+const ComboboxElement = function(props) {
+  if (!supportsPopover()) {
+    if (isMultiple(props)) {
+      return /* @__PURE__ */ jsx(ComboboxLegacyMultiple, { ...props });
+    } else {
+      return /* @__PURE__ */ jsx(ComboboxLegacySingle, { ...props });
     }
-  );
-};
-const ComboboxList = function(props) {
-  return /* @__PURE__ */ jsx(Combobox$1.List, { ...props });
-};
-const ComboboxItem = function(props) {
-  const data = {
-    item: props.item
-  };
-  const trackingId = useTrackingId({
-    name: "ComboboxItem",
-    data,
-    hasOverride: !!props["data-tracking-id"]
-  });
-  return /* @__PURE__ */ jsx(Combobox$1.Item, { "data-tracking-id": trackingId, ...props });
-};
-const ComboboxItemAddNew = function(props) {
-  const data = {
-    item: "add-new"
-  };
-  const trackingId = useTrackingId({
-    name: "ComboboxItemAddNew",
-    data,
-    hasOverride: !!props["data-tracking-id"]
-  });
-  return /* @__PURE__ */ jsx(Combobox$1.ItemAddNew, { "data-tracking-id": trackingId, ...props });
-};
-const ComboboxEmpty = function(props) {
-  return /* @__PURE__ */ jsx(Combobox$1.Empty, { ...props });
+  }
+  if (isMultiple(props)) {
+    return /* @__PURE__ */ jsx(ComboboxMultiple, { ...props });
+  } else {
+    return /* @__PURE__ */ jsx(ComboboxSingle, { ...props });
+  }
 };
 const Combobox = Object.assign(ComboboxElement, {
   /**
@@ -10314,5 +10177,180 @@ const Combobox = Object.assign(ComboboxElement, {
   Empty: ComboboxEmpty
 });
 
-export { Combobox as C, ComboboxElement as a, ComboboxSelect as b, ComboboxContent as c, ComboboxSearchField as d, ComboboxSelectTrigger as e, ComboboxList as f, ComboboxItem as g, ComboboxItemAddNew as h, ComboboxEmpty as i, useInfiniteCombobox as u };
-//# sourceMappingURL=Combobox-Ct30JT3y.js.map
+const SCROLL_THRESHOLD = 0.64;
+function useInfiniteCombobox({
+  query,
+  queryInitialItems,
+  initialItems = [],
+  initialPage = 0,
+  initialLoading = false,
+  initialInputValue,
+  defaultInputValue,
+  initialSelectedItem,
+  defaultSelectedItem,
+  initialSelectedItems,
+  defaultSelectedItems,
+  updateOnInputValueChange = true,
+  updateOnSelectedItemChange = true,
+  updateOnSelectedItemsChange = true,
+  queryOnFirstRender = false,
+  shouldTriggerQuery: shouldTriggerQueryProp
+}) {
+  const [items, setItems] = useState(initialItems);
+  const deferredItems = useDeferredValue(items);
+  const [page, setPage] = useState(initialPage);
+  const [loading, setLoading] = useState(initialLoading);
+  const deferredLoading = useDeferredValue(loading);
+  const [inputValue, setInputValue] = useState(
+    initialInputValue ?? defaultInputValue ?? ""
+  );
+  const [selectedItem, setSelectedItem] = useState(
+    initialSelectedItem ?? defaultSelectedItem ?? null
+  );
+  const [selectedItems, setSelectedItems] = useState(
+    initialSelectedItems ?? defaultSelectedItems ?? []
+  );
+  const scrollerRef = useRef(null);
+  const defaultShouldTriggerQuery = (element) => {
+    const totalScrollHeight = element.scrollHeight - element.clientHeight;
+    return element.scrollTop / totalScrollHeight > SCROLL_THRESHOLD;
+  };
+  const [triggerQueryCount, setTriggerQueryCount] = useState(0);
+  const triggerQueryCountRef = useRef(0);
+  const triggerQuery = () => {
+    setTriggerQueryCount((x) => x + 1);
+    triggerQueryCountRef.current += 1;
+  };
+  const [done, setDone] = useState(false);
+  const firstRenderRef = useRef(true);
+  const scrollTimeoutRef = useRef(false);
+  const loadingRef = useRef(false);
+  const setLoadingStateAndRef = (isLoading) => {
+    setLoading(isLoading);
+    loadingRef.current = isLoading;
+  };
+  const queryRetryCountRef = useRef(0);
+  useEffect(() => {
+    if (firstRenderRef.current && queryInitialItems) {
+      setItems(queryInitialItems());
+    }
+    if (firstRenderRef.current && !queryOnFirstRender) {
+      firstRenderRef.current = false;
+      return;
+    }
+    setLoadingStateAndRef(true);
+    const timeoutID = setTimeout(() => {
+      if (triggerQueryCount < triggerQueryCountRef.current) return;
+      query({
+        page,
+        inputValue,
+        selectedItem,
+        selectedItems
+      }).then((res) => {
+        queryRetryCountRef.current = 0;
+        if (triggerQueryCount < triggerQueryCountRef.current) return;
+        setLoadingStateAndRef(false);
+        setPage((x) => x + 1);
+        if (res == null || page > 0 && res.length === 0) {
+          setDone(true);
+        } else if (page === 0) {
+          setItems(() => [...res]);
+        } else {
+          setItems((prevItems) => [...prevItems, ...res]);
+        }
+      }).catch(() => {
+        queryRetryCountRef.current += 1;
+        if (queryRetryCountRef.current > 7) {
+          queryRetryCountRef.current = 0;
+          return;
+        } else {
+          setTimeout(
+            () => {
+              triggerQuery();
+            },
+            2 ** queryRetryCountRef.current * 160
+          );
+        }
+      });
+    }, 160);
+    return () => {
+      clearTimeout(timeoutID);
+    };
+  }, [triggerQueryCount]);
+  useLayoutEffect(() => {
+    setTimeout(() => {
+      if (scrollerRef.current && scrollerRef.current.scrollHeight > 0 && scrollerRef.current.clientHeight > 0 && scrollerRef.current.scrollHeight <= scrollerRef.current.clientHeight) {
+        triggerQuery();
+      }
+    }, 160);
+  }, [items]);
+  const isEmpty = items.length === 0 && page === 0;
+  const onStateChange = useCallback(
+    (changes) => {
+      if (isEmpty && "isOpen" in changes && changes.isOpen === true) {
+        triggerQuery();
+      }
+      const inputValueShouldUpdate = updateOnInputValueChange && "inputValue" in changes;
+      const selectedItemsShouldUpdate = updateOnSelectedItemsChange && "selectedItems" in changes && changes.selectedItems;
+      const selectedItemShouldUpdate = updateOnSelectedItemChange && "selectedItem" in changes && changes.selectedItem !== void 0;
+      if (inputValueShouldUpdate) {
+        setInputValue(changes.inputValue ?? "");
+      }
+      if (selectedItemsShouldUpdate) {
+        setSelectedItems(changes.selectedItems ?? []);
+      }
+      if (selectedItemShouldUpdate) {
+        setSelectedItem(changes.selectedItem);
+      }
+      if (inputValueShouldUpdate || selectedItemsShouldUpdate || selectedItemShouldUpdate) {
+        setPage(0);
+        setDone(false);
+        triggerQuery();
+      }
+    },
+    [
+      isEmpty,
+      updateOnInputValueChange,
+      updateOnSelectedItemsChange,
+      updateOnSelectedItemChange
+    ]
+  );
+  const onScroll = useCallback(
+    (e) => {
+      const element = e.currentTarget;
+      if (!scrollTimeoutRef.current && !loadingRef.current) {
+        setTimeout(() => {
+          const shouldTriggerQuery = shouldTriggerQueryProp ?? defaultShouldTriggerQuery;
+          if (shouldTriggerQuery(element) && !done) {
+            triggerQuery();
+          }
+          scrollTimeoutRef.current = false;
+        }, 40);
+        scrollTimeoutRef.current = true;
+      }
+    },
+    [done, shouldTriggerQueryProp]
+  );
+  return {
+    comboboxProps: {
+      items: deferredItems,
+      loading: deferredLoading,
+      initialInputValue,
+      defaultInputValue,
+      initialSelectedItem,
+      defaultSelectedItem,
+      initialSelectedItems,
+      defaultSelectedItems,
+      disableFilter: true,
+      // assume the query will return a filtered/sorted list
+      onStateChange
+    },
+    contentProps: {
+      onScroll,
+      scrollerRef
+    }
+  };
+}
+
+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, useInfiniteCombobox as u };
+//# sourceMappingURL=useInfiniteCombobox-BN2uGhBh.js.map