@servicetitan/anvil2 1.27.2 → 1.29.0

package/dist/{Combobox-DnTI2I3L.js → Combobox-DCrEfyl2.js}

@@ -1,24 +1,25 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useTrackingId } from './useTrackingId.js';
-import React__default, { useRef, useCallback, useEffect, useMemo, cloneElement, useLayoutEffect, useReducer, Component, createContext, useState, useDeferredValue, useContext, useId } from 'react';
+import React__default, { useRef, useCallback, useEffect, useMemo, cloneElement, useLayoutEffect, useReducer, Component, createContext, useState, useId, useContext, useDeferredValue } from 'react';
 import { g as getDefaultExportFromCjs, c as cx } from './index-tZvMCc77.js';
 import { a as _extends, _ as _objectWithoutPropertiesLoose } from './extends-Bg2s_OKl.js';
-import { u as usePopoverContext, d as Popover } from './Popover-QKZtjN4_-CETYlWwq.js';
+import { e as PopoverLegacy, u as usePopoverLegacyContext, d as Popover, f as usePopoverContext } from './Popover-tu_N1aS6-CSLR1Xzc.js';
+import { s as styles$3 } from './Listbox.module-CJuWm7RR-CJuWm7RR.js';
+import { s as supportsPopover } from './supportsPopover-8aJR37cf-8aJR37cf.js';
 import { F as Flex } from './Flex-pdHNcZrF-CdQdYhOU.js';
-import { T as Text } from './Text-C2n3GDdC-rz_AelM0.js';
-import { S as Spinner } from './Spinner-DdirfhPp-c7cDfIit.js';
-import { s as styles$2 } from './Listbox.module-CJuWm7RR-CJuWm7RR.js';
-import { s as styles$1 } from './ListView.module-BqvHsIQ9-BqvHsIQ9.js';
-import { I as Icon$1 } from './Icon-DbHA5GV1-DwO2aGkj.js';
-import { c as checkboxStyles, a as SvgIndeterminateCheckBox, S as SvgCheckBox, b as SvgCheckBoxOutlineBlank } from './Checkbox.module-DMrZNVpb-DL8zOKBQ.js';
-import { S as SvgCheck } from './check-Cf67OWrZ.js';
-import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-C6qizVc6-BkgAan7h.js';
-import { L as Label } from './Label-DWF2pXeG-1BhzVgZG.js';
+import { L as Label } from './Label-CUVr-jvI-BXhER5eQ.js';
 import { B as Button } from './Button-Ce--YZ9L-Csh0Zzuf.js';
 import { C as Chip } from './Chip-CAxTyjIZ-DfkCTnYy.js';
 import { S as SvgClose } from './close-DZj38AEh.js';
 import { S as SvgChevronRight } from './chevron_right-BdpsxX7x.js';
 import { H as Helper } from './Helper-Ba5DBS51-DBtASfJG.js';
+import { T as Text } from './Text-C2n3GDdC-rz_AelM0.js';
+import { S as Spinner } from './Spinner-DdirfhPp-c7cDfIit.js';
+import { s as styles$2 } from './ListView.module-BqvHsIQ9-BqvHsIQ9.js';
+import { I as Icon$2 } from './Icon-DbHA5GV1-DwO2aGkj.js';
+import { c as checkboxStyles, a as SvgIndeterminateCheckBox, S as SvgCheckBox, b as SvgCheckBoxOutlineBlank } from './Checkbox.module-DMrZNVpb-DL8zOKBQ.js';
+import { S as SvgCheck } from './check-Cf67OWrZ.js';
+import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-C6qizVc6-BkgAan7h.js';
 import { c as childrenToString } from './childrenToString-Bz9MqbHb-Bz9MqbHb.js';
 
 import './Combobox.css';function _setPrototypeOf(t, e) {
@@ -6281,135 +6282,1937 @@ function getKeyAttributes(key) {
   };
 }
 
-const item = "_item_1ued6_5";
-const input = "_input_1ued6_18";
-const prefix = "_prefix_1ued6_46";
-const suffix = "_suffix_1ued6_47";
-const combobox = "_combobox_1ued6_62";
-const select = "_select_1ued6_71";
-const chip = "_chip_1ued6_167";
-const listview = "_listview_1ued6_208";
-const empty = "_empty_1ued6_216";
-const children = "_children_1ued6_244";
-const Icon = "_Icon_1ued6_247";
-const small = "_small_1ued6_252";
-const large = "_large_1ued6_255";
-const error = "_error_1ued6_273";
-const disabled = "_disabled_1ued6_286";
-const styles = {
-	"buttons-wrapper": "_buttons-wrapper_1ued6_3",
-	"search-field": "_search-field_1ued6_4",
-	item: item,
-	input: input,
-	"input-wrapper": "_input-wrapper_1ued6_19",
-	"toggle-button-wrapper": "_toggle-button-wrapper_1ued6_32",
-	"close-button-wrapper": "_close-button-wrapper_1ued6_33",
-	prefix: prefix,
-	suffix: suffix,
-	combobox: combobox,
-	select: select,
-	"popover-content": "_popover-content_1ued6_74",
-	"no-clear-button": "_no-clear-button_1ued6_93",
-	"input-flex": "_input-flex_1ued6_96",
-	"fake-placeholder": "_fake-placeholder_1ued6_124",
-	"close-button": "_close-button_1ued6_33",
-	"toggle-button": "_toggle-button_1ued6_32",
-	"rows-wrapper": "_rows-wrapper_1ued6_157",
-	"chip-wrapper": "_chip-wrapper_1ued6_167",
-	chip: chip,
-	listview: listview,
-	"loading-spinner": "_loading-spinner_1ued6_212",
-	empty: empty,
-	children: children,
-	Icon: Icon,
-	small: small,
-	large: large,
-	error: error,
-	"loading-infinite": "_loading-infinite_1ued6_286",
-	"loading-progress": "_loading-progress_1ued6_286",
-	disabled: disabled,
-	"listview-option": "_listview-option_1ued6_304"
+const defaultItemToString$1 = function(item) {
+  return item != null ? String(item) : "";
+};
+const defaultItemToKey$1 = function(item) {
+  return item;
+};
+const useDownshiftEnvironment$1 = () => {
+  const wrapperDivRef = useRef(null);
+  const shadowRoot = wrapperDivRef.current ? wrapperDivRef.current.getRootNode() : null;
+  const shadowDocument = wrapperDivRef.current && shadowRoot ? shadowRoot.ownerDocument : null;
+  const environment = shadowDocument ? {
+    document: shadowDocument,
+    addEventListener: shadowDocument.addEventListener.bind(shadowRoot),
+    removeEventListener: shadowDocument.removeEventListener.bind(shadowRoot),
+    Node
+  } : undefined;
+  return { ref: wrapperDivRef, environment };
 };
 
-const ComboboxTrigger = ({
-  variant: variantProp = "combobox",
-  className,
-  label,
-  size,
-  error,
-  hint,
-  description,
-  required,
-  moreInfo,
-  openMoreInfo,
-  prefix,
-  suffix,
-  maxRows,
-  id,
-  disabled,
-  readOnly,
-  ...rest
-}) => {
+const item$1 = "_item_tpkx3_6";
+const input$1 = "_input_tpkx3_19";
+const prefix$1 = "_prefix_tpkx3_47";
+const suffix$1 = "_suffix_tpkx3_48";
+const combobox$1 = "_combobox_tpkx3_63";
+const select$1 = "_select_tpkx3_72";
+const chip$1 = "_chip_tpkx3_168";
+const listview$1 = "_listview_tpkx3_209";
+const empty$1 = "_empty_tpkx3_217";
+const children$1 = "_children_tpkx3_245";
+const Icon$1 = "_Icon_tpkx3_248";
+const small$1 = "_small_tpkx3_253";
+const large$1 = "_large_tpkx3_256";
+const error$1 = "_error_tpkx3_274";
+const disabled$1 = "_disabled_tpkx3_287";
+const styles$1 = {
+	"buttons-wrapper": "_buttons-wrapper_tpkx3_4",
+	"search-field": "_search-field_tpkx3_5",
+	item: item$1,
+	input: input$1,
+	"input-wrapper": "_input-wrapper_tpkx3_20",
+	"toggle-button-wrapper": "_toggle-button-wrapper_tpkx3_33",
+	"close-button-wrapper": "_close-button-wrapper_tpkx3_34",
+	prefix: prefix$1,
+	suffix: suffix$1,
+	combobox: combobox$1,
+	select: select$1,
+	"popover-content": "_popover-content_tpkx3_75",
+	"no-clear-button": "_no-clear-button_tpkx3_94",
+	"input-flex": "_input-flex_tpkx3_97",
+	"fake-placeholder": "_fake-placeholder_tpkx3_125",
+	"close-button": "_close-button_tpkx3_34",
+	"toggle-button": "_toggle-button_tpkx3_33",
+	"rows-wrapper": "_rows-wrapper_tpkx3_158",
+	"chip-wrapper": "_chip-wrapper_tpkx3_168",
+	chip: chip$1,
+	listview: listview$1,
+	"loading-spinner": "_loading-spinner_tpkx3_213",
+	empty: empty$1,
+	children: children$1,
+	Icon: Icon$1,
+	small: small$1,
+	large: large$1,
+	error: error$1,
+	"loading-infinite": "_loading-infinite_tpkx3_287",
+	"loading-progress": "_loading-progress_tpkx3_287",
+	disabled: disabled$1,
+	"listview-option": "_listview-option_tpkx3_305"
+};
+
+const ADD_NEW$1 = Symbol.for("add-new");
+const ComboboxLegacyContext = createContext(null);
+const useComboboxLegacy = function() {
+  const context = useContext(
+    ComboboxLegacyContext
+  );
+  if (context == null) {
+    throw new Error("useComboboxLegacy must be wrapped in <ComboboxLegacy />");
+  }
+  return context;
+};
+const ComboboxLegacySingle = function(props) {
+  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
+  const {
+    className,
+    style,
+    children,
+    open,
+    disabled,
+    readOnly,
+    items: itemsProp,
+    itemToString: itemToStringProp,
+    itemToKey: itemToKeyProp,
+    onChange,
+    disableCloseOnClickOutside = false,
+    disableMatchReferenceWidth = false,
+    disableCloseOnSelectItem = false,
+    filterOptions,
+    loading = false,
+    root,
+    onInputValueChange,
+    environment: environmentProp,
+    ...rest
+  } = componentProps;
+  const ComboboxLegacyClassNames = cx(styles$1["combobox"], className);
+  const [items, setItems] = useState(itemsProp);
+  const [hasAddNew, setHasAddNew] = useState(false);
+  const [onSelectItemAddNew, setOnSelectItemAddNew] = useState(undefined);
+  const [hasExactMatch, setHasExactMatch] = useState(false);
+  const [hasDisabledPopover, setHasDisabledPopover] = useState(false);
+  const [hasEmpty, setHasEmpty] = useState(false);
+  const [disabledItems, setDisabledItems] = useState([]);
+  const [isReadOnly, setIsReadOnly] = useState(readOnly);
+  const [isDisabled, setIsDisabled] = useState(disabled);
+  const referenceRef = useRef(null);
+  const contentRef = useRef(null);
+  const handleOutsidePress = (e) => {
+    const clickedInsideReference = referenceRef.current && e.target != null && referenceRef.current.contains(e.target);
+    if (!clickedInsideReference) {
+      closeMenu();
+      return true;
+    } else {
+      return false;
+    }
+  };
+  const { ref: wrapperDivRef, environment } = useDownshiftEnvironment$1();
+  const showAddNew = hasAddNew && !hasExactMatch;
+  const combinedItems = useMemo(
+    () => showAddNew ? [...items, ADD_NEW$1] : items,
+    [items, showAddNew]
+  );
+  const itemToString = itemToStringProp ?? defaultItemToString$1;
+  const itemToKey = itemToKeyProp ?? defaultItemToKey$1;
   const {
-    select,
-    disableClearSelection,
     isOpen,
-    itemToString,
     getLabelProps,
     getInputProps,
     getToggleButtonProps,
     getMenuProps,
+    getItemProps,
+    highlightedIndex,
     selectedItem,
-    selectedItems,
-    getSelectedItemProps,
-    getDropdownProps,
-    reset,
-    removeSelectedItem,
     selectItem,
+    setInputValue,
     inputValue,
-    isDisabled,
-    isReadOnly,
-    referenceRef,
-    closeMenu,
-    setIsDisabled,
-    setIsReadOnly
-  } = useCombobox();
-  const variant = select ? "select" : "combobox";
-  const context = usePopoverContext();
-  const inputRef = useRef(null);
-  const ComboboxTriggerClassNames = cx(styles["search-field"], {
-    [styles["select"]]: variant === "select"
-  });
-  const noClearButton = isDisabled || isReadOnly || disableClearSelection;
-  const ComboboxInputWrapperClassNames = cx(
-    styles["input-wrapper"],
-    className ? {
-      [className]: variant === "select"
-    } : {},
-    {
-      [styles["small"]]: size === "small",
-      [styles["large"]]: size === "large",
-      [styles["no-clear-button"]]: noClearButton
+    closeMenu
+  } = useCombobox$1({
+    ...rest,
+    items: combinedItems,
+    itemToString,
+    itemToKey,
+    isOpen: open,
+    initialIsOpen: open,
+    environment: environmentProp ?? environment,
+    // NOTE: Reducer needs to be pure, side-effects should be in event handlers
+    stateReducer(state, { type, changes }) {
+      switch (type) {
+        // keep ComboboxLegacy open onBlur, will call close using Popover's onOutsidePress
+        case useCombobox$1.stateChangeTypes.InputBlur:
+          return {
+            ...changes,
+            isOpen: open != null ? open : true,
+            highlightedIndex: state.highlightedIndex
+          };
+        case useCombobox$1.stateChangeTypes.InputKeyDownEnter:
+        case useCombobox$1.stateChangeTypes.ItemClick:
+          if (changes.selectedItem === ADD_NEW$1) {
+            const stateInputValue = state.inputValue;
+            setTimeout(() => {
+              onSelectItemAddNew?.(stateInputValue);
+            }, 0);
+            return {
+              ...changes,
+              selectedItem: state.selectedItem,
+              inputValue: ""
+            };
+          } else {
+            return {
+              ...changes,
+              isOpen: open != null ? open : disableCloseOnSelectItem ? true : changes.isOpen,
+              highlightedIndex: disableCloseOnSelectItem ? 0 : changes.highlightedIndex
+            };
+          }
+        // prevent this from closing the popover by default
+        case useCombobox$1.stateChangeTypes.InputClick:
+          return { ...changes, isOpen: open != null ? open : true };
+        default:
+          return changes;
+      }
+    },
+    onInputValueChange: onInputValueChange ?? (({ inputValue: inputValue2, type, selectedItem: selectedItem2 }) => {
+      const inputValueMatchesSelectedItem = selectedItem2 != null && inputValue2 === itemToString(selectedItem2);
+      const inputValueIsEmpty = inputValue2 == null || inputValue2 === "";
+      if (type === useCombobox$1.stateChangeTypes.InputKeyDownEnter || type === useCombobox$1.stateChangeTypes.ItemClick) {
+        setItems(itemsProp);
+        setHasExactMatch(true);
+      } else if (!inputValueMatchesSelectedItem && !inputValueIsEmpty) {
+        setItems(matchSorter(itemsProp, inputValue2, filterOptions));
+        setHasExactMatch(
+          matchSorter(itemsProp, inputValue2, {
+            ...filterOptions,
+            threshold: matchSorter.rankings.EQUAL
+          }).length > 0
+        );
+      } else {
+        setItems(itemsProp);
+        setHasExactMatch(true);
+      }
+    }),
+    onSelectedItemChange(changes) {
+      const { selectedItem: selectedItem2 } = changes;
+      if (onChange != null)
+        onChange(selectedItem2 != null ? selectedItem2 : null);
+    },
+    onIsOpenChange({ isOpen: isOpen2, inputValue: inputValue2, selectedItem: selectedItem2 }) {
+      if (isOpen2 === false) {
+        setItems(itemsProp);
+        if (inputValue2 === "") {
+          selectItem(null);
+        } else {
+          setInputValue(selectedItem2 != null ? itemToString(selectedItem2) : "");
+        }
+      }
+    },
+    isItemDisabled(item) {
+      if (isDisabled || isReadOnly) {
+        return !!isDisabled || !!isReadOnly;
+      }
+      if (item && item instanceof Object && "disabled" in item && item.disabled) {
+        return true;
+      }
+      if (item && item instanceof Object && "readOnly" in item && item.readOnly) {
+        return true;
+      }
+      if (disabledItems.includes(item)) {
+        return true;
+      }
+      return false;
     }
-  );
-  const ComboboxInputClassNames = cx(
-    styles["input"],
-    className ? {
-      [className]: variant === "combobox"
-    } : {},
-    {
-      [styles["error"]]: error
+  });
+  const firstRenderRef = useRef(true);
+  useEffect(() => {
+    if (firstRenderRef.current === true) {
+      firstRenderRef.current = false;
     }
-  );
-  useLayoutEffect(() => {
-    if (typeof disabled === "undefined") return;
+  }, []);
+  useEffect(() => {
     setIsDisabled(disabled);
-  }, [disabled, setIsDisabled]);
-  useLayoutEffect(() => {
-    if (typeof readOnly === "undefined") return;
+  }, [disabled]);
+  useEffect(() => {
     setIsReadOnly(readOnly);
-  }, [readOnly, setIsReadOnly]);
-  const helperUid = "helper" + useId();
+  }, [readOnly]);
+  useEffect(() => {
+    if (firstRenderRef.current) return;
+    const inputValueMatchesSelectedItem = selectedItem != null && inputValue === itemToString(selectedItem);
+    const inputValueIsEmpty = inputValue == null || inputValue === "";
+    if (!inputValueMatchesSelectedItem && !inputValueIsEmpty) {
+      setItems(matchSorter(itemsProp, inputValue, filterOptions));
+      setHasExactMatch(
+        matchSorter(itemsProp, inputValue, {
+          ...filterOptions,
+          threshold: matchSorter.rankings.EQUAL
+        }).length > 0
+      );
+    } else {
+      setItems(itemsProp);
+      setHasExactMatch(true);
+    }
+  }, [itemsProp]);
+  return /* @__PURE__ */ jsx(
+    ComboboxLegacyContext.Provider,
+    {
+      value: {
+        multiple: false,
+        select: false,
+        items,
+        itemToString,
+        itemToKey,
+        isOpen,
+        getLabelProps,
+        getInputProps,
+        getToggleButtonProps,
+        getMenuProps,
+        getItemProps,
+        highlightedIndex,
+        selectedItem,
+        selectedItems: [],
+        disabledItems,
+        setDisabledItems,
+        getSelectedItemProps: undefined,
+        getDropdownProps: undefined,
+        selectItem,
+        inputValue,
+        isDisabled,
+        isReadOnly,
+        setIsReadOnly,
+        setIsDisabled,
+        hasDisabledPopover,
+        setHasDisabledPopover,
+        hasEmpty,
+        setHasEmpty,
+        hasAddNew,
+        setHasAddNew,
+        onSelectItemAddNew,
+        setOnSelectItemAddNew,
+        hasExactMatch,
+        setHasExactMatch,
+        loading,
+        referenceRef,
+        contentRef,
+        closeMenu
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: ComboboxLegacyClassNames,
+          "data-anv": "combobox",
+          style: { ...style, ...layoutStyles },
+          ref: wrapperDivRef,
+          children: /* @__PURE__ */ jsx(
+            PopoverLegacy,
+            {
+              root,
+              open: isOpen,
+              noPadding: true,
+              disableCaret: true,
+              fitScreen: true,
+              disableFlipFallback: true,
+              placement: "bottom-start",
+              matchReferenceWidth: !disableMatchReferenceWidth,
+              disableCloseOnClickOutside,
+              onOutsidePress: handleOutsidePress,
+              children
+            }
+          )
+        }
+      )
+    }
+  );
+};
+const ComboboxLegacyMultiple = function(props) {
+  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
+  const {
+    className,
+    style,
+    children,
+    open,
+    items: itemsProp,
+    itemToString: itemToStringProp,
+    itemToKey: itemToKeyProp,
+    onChange,
+    onSelectedItemsChange,
+    disableCloseOnClickOutside = false,
+    disableMatchReferenceWidth = false,
+    disableCloseOnSelectItem = false,
+    disableClearInputValueOnSelectItem = false,
+    filterOptions,
+    loading = false,
+    root,
+    disabled,
+    readOnly,
+    stateReducer: _,
+    onInputValueChange,
+    initialSelectedItems,
+    initialActiveIndex,
+    defaultSelectedItems,
+    defaultActiveIndex,
+    activeIndex: activeIndexProp,
+    selectedItems: selectedItemsProp,
+    environment: environmentProp,
+    ...rest
+  } = componentProps;
+  const ComboboxLegacyClassNames = cx(styles$1["combobox"], className);
+  const [items, setItems] = useState(itemsProp);
+  const [hasAddNew, setHasAddNew] = useState(false);
+  const [onSelectItemAddNew, setOnSelectItemAddNew] = useState(undefined);
+  const [hasExactMatch, setHasExactMatch] = useState(false);
+  const [hasDisabledPopover, setHasDisabledPopover] = useState(false);
+  const [hasEmpty, setHasEmpty] = useState(false);
+  const [disabledItems, setDisabledItems] = useState([]);
+  const [isReadOnly, setIsReadOnly] = useState(readOnly);
+  const [isDisabled, setIsDisabled] = useState(disabled);
+  let storedSetInputValue = undefined;
+  const referenceRef = useRef(null);
+  const contentRef = useRef(null);
+  const handleOutsidePress = (e) => {
+    const clickedInsideReference = referenceRef.current && e.target != null && referenceRef.current.contains(e.target);
+    if (!clickedInsideReference) {
+      closeMenu();
+      return true;
+    } else {
+      return false;
+    }
+  };
+  const { ref: wrapperDivRef, environment } = useDownshiftEnvironment$1();
+  const showAddNew = hasAddNew && !hasExactMatch;
+  const combinedItems = useMemo(
+    () => showAddNew ? [...items, ADD_NEW$1] : items,
+    [items, showAddNew]
+  );
+  const itemToString = itemToStringProp ?? defaultItemToString$1;
+  const itemToKey = itemToKeyProp ?? defaultItemToKey$1;
+  const {
+    getSelectedItemProps,
+    getDropdownProps,
+    reset,
+    selectedItems,
+    addSelectedItem,
+    removeSelectedItem,
+    setSelectedItems
+  } = useMultipleSelection({
+    itemToKey,
+    initialSelectedItems,
+    initialActiveIndex,
+    defaultSelectedItems,
+    defaultActiveIndex,
+    activeIndex: activeIndexProp,
+    selectedItems: selectedItemsProp,
+    environment: environmentProp ?? environment,
+    stateReducer(state, { type, changes }) {
+      switch (type) {
+        // the Chip itself will handle "Backspace" and "Delete"
+        // just return previous state
+        case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace:
+        case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete:
+          return state;
+        case useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem:
+          return { ...changes, activeIndex: -1 };
+        case useMultipleSelection.stateChangeTypes.FunctionReset:
+          return { ...changes, selectedItems: [] };
+        default:
+          return changes;
+      }
+    },
+    onStateChange({ type }) {
+      switch (type) {
+        case useMultipleSelection.stateChangeTypes.FunctionReset:
+          storedSetInputValue?.("");
+          break;
+      }
+    },
+    onSelectedItemsChange(changes) {
+      const { selectedItems: selectedItems2 } = changes;
+      if (onChange != null) onChange(selectedItems2);
+      if (onSelectedItemsChange != null) onSelectedItemsChange(changes);
+    }
+  });
+  const {
+    isOpen,
+    getLabelProps,
+    getInputProps,
+    getToggleButtonProps,
+    getMenuProps,
+    getItemProps,
+    highlightedIndex,
+    selectedItem,
+    selectItem,
+    setInputValue,
+    inputValue,
+    closeMenu
+  } = useCombobox$1({
+    ...rest,
+    items: combinedItems,
+    itemToString,
+    itemToKey,
+    selectedItem: null,
+    isOpen: open,
+    initialIsOpen: open,
+    environment: environmentProp ?? environment,
+    // NOTE: Reducer needs to be pure, side-effects should be in event handlers
+    stateReducer(state, { type, changes }) {
+      switch (type) {
+        // keep ComboboxLegacy open onBlur, will call close using Popover's onOutsidePress
+        case useCombobox$1.stateChangeTypes.InputBlur:
+          return {
+            ...changes,
+            inputValue: state.inputValue,
+            selectedItem: null,
+            isOpen: open != null ? open : true,
+            highlightedIndex: state.highlightedIndex
+          };
+        case useCombobox$1.stateChangeTypes.InputKeyDownEnter:
+        case useCombobox$1.stateChangeTypes.ItemClick:
+          if (changes.selectedItem === ADD_NEW$1) {
+            const stateInputValue = state.inputValue;
+            setTimeout(() => {
+              onSelectItemAddNew?.(stateInputValue);
+            }, 0);
+            return {
+              ...changes,
+              selectedItem: state.selectedItem,
+              inputValue: ""
+            };
+          } else {
+            return {
+              ...changes,
+              isOpen: open != null ? open : disableCloseOnSelectItem ? true : changes.isOpen,
+              highlightedIndex: disableCloseOnSelectItem ? disableClearInputValueOnSelectItem || !state.inputValue ? state.highlightedIndex : 0 : changes.highlightedIndex,
+              inputValue: disableClearInputValueOnSelectItem ? state.inputValue : ""
+            };
+          }
+        // prevent this from closing the popover by default
+        case useCombobox$1.stateChangeTypes.InputClick:
+          return { ...changes, isOpen: open != null ? open : true };
+        // prevent this from clearing the input value by default
+        case useCombobox$1.stateChangeTypes.ControlledPropUpdatedSelectedItem:
+          return { ...changes, inputValue: state.inputValue };
+        default:
+          return changes;
+      }
+    },
+    onStateChange({ type, selectedItem: newSelectedItem }) {
+      switch (type) {
+        case useCombobox$1.stateChangeTypes.InputKeyDownEnter:
+        case useCombobox$1.stateChangeTypes.ItemClick:
+        case useCombobox$1.stateChangeTypes.InputBlur:
+          if (newSelectedItem != null) {
+            const itemAlreadySelected = selectedItems.some(
+              (item) => itemToKey(item) === itemToKey(newSelectedItem)
+            );
+            if (itemAlreadySelected) {
+              removeSelectedItem(newSelectedItem);
+            } else {
+              addSelectedItem(newSelectedItem);
+            }
+          }
+          break;
+      }
+    },
+    onInputValueChange: onInputValueChange ?? (({ inputValue: inputValue2, ...changes }) => {
+      const { type, selectedItem: selectedItem2 } = changes;
+      const inputValueMatchesSelectedItem = selectedItem2 != null && inputValue2 === itemToString(selectedItem2);
+      const inputValueIsEmpty = inputValue2 == null || inputValue2 === "";
+      if (type === useCombobox$1.stateChangeTypes.InputKeyDownEnter || type === useCombobox$1.stateChangeTypes.ItemClick) {
+        setItems(itemsProp);
+        setHasExactMatch(true);
+      } else if (!inputValueMatchesSelectedItem && !inputValueIsEmpty) {
+        setItems(matchSorter(itemsProp, inputValue2, filterOptions));
+        setHasExactMatch(
+          matchSorter(itemsProp, inputValue2, {
+            ...filterOptions,
+            threshold: matchSorter.rankings.EQUAL
+          }).length > 0
+        );
+      } else {
+        setItems(itemsProp);
+        setHasExactMatch(true);
+      }
+    }),
+    onIsOpenChange({ isOpen: isOpen2 }) {
+      if (isOpen2 === false) {
+        setInputValue("");
+        setItems(itemsProp);
+      }
+    },
+    isItemDisabled(item) {
+      if (isDisabled || isReadOnly) {
+        return !!isDisabled || !!isReadOnly;
+      }
+      if (item && item instanceof Object && "disabled" in item && item.disabled) {
+        return true;
+      }
+      if (item && item instanceof Object && "readOnly" in item && item.readOnly) {
+        return true;
+      }
+      if (disabledItems.includes(item)) {
+        return true;
+      }
+      return false;
+    }
+  });
+  storedSetInputValue = setInputValue;
+  const firstRenderRef = useRef(true);
+  useEffect(() => {
+    if (firstRenderRef.current === true) {
+      firstRenderRef.current = false;
+    }
+  }, []);
+  useEffect(() => {
+    setIsDisabled(disabled);
+  }, [disabled]);
+  useEffect(() => {
+    setIsReadOnly(readOnly);
+  }, [readOnly]);
+  useEffect(() => {
+    if (firstRenderRef.current) return;
+    const inputValueIsEmpty = inputValue == null || inputValue === "";
+    if (!inputValueIsEmpty) {
+      setItems(matchSorter(itemsProp, inputValue, filterOptions));
+      setHasExactMatch(
+        matchSorter(itemsProp, inputValue, {
+          ...filterOptions,
+          threshold: matchSorter.rankings.EQUAL
+        }).length > 0
+      );
+    } else {
+      setItems(itemsProp);
+      setHasExactMatch(true);
+    }
+  }, [itemsProp]);
+  return /* @__PURE__ */ jsx(
+    ComboboxLegacyContext.Provider,
+    {
+      value: {
+        multiple: true,
+        select: false,
+        items,
+        itemToString,
+        itemToKey,
+        isOpen,
+        getLabelProps,
+        getInputProps,
+        getToggleButtonProps,
+        getMenuProps,
+        getItemProps,
+        highlightedIndex,
+        selectedItem,
+        selectedItems,
+        disabledItems,
+        setDisabledItems,
+        getSelectedItemProps,
+        getDropdownProps,
+        reset,
+        addSelectedItem,
+        removeSelectedItem,
+        setSelectedItems,
+        selectItem,
+        inputValue,
+        isDisabled,
+        isReadOnly,
+        setIsReadOnly,
+        setIsDisabled,
+        hasDisabledPopover,
+        setHasDisabledPopover,
+        hasEmpty,
+        setHasEmpty,
+        hasAddNew,
+        setHasAddNew,
+        onSelectItemAddNew,
+        setOnSelectItemAddNew,
+        hasExactMatch,
+        setHasExactMatch,
+        loading,
+        referenceRef,
+        contentRef,
+        closeMenu
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: ComboboxLegacyClassNames,
+          "data-anv": "combobox",
+          style: { ...style, ...layoutStyles },
+          ref: wrapperDivRef,
+          children: /* @__PURE__ */ jsx(
+            PopoverLegacy,
+            {
+              root,
+              open: !isDisabled && isOpen,
+              noPadding: true,
+              disableCaret: true,
+              fitScreen: true,
+              disableFlipFallback: true,
+              placement: "bottom-start",
+              matchReferenceWidth: !disableMatchReferenceWidth,
+              disableCloseOnClickOutside,
+              onOutsidePress: handleOutsidePress,
+              children
+            }
+          )
+        }
+      )
+    }
+  );
+};
+const SelectLegacySingle = function(props) {
+  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
+  const {
+    className,
+    style,
+    children,
+    open,
+    disabled,
+    readOnly,
+    items,
+    itemToString: itemToStringProp,
+    itemToKey: itemToKeyProp,
+    onChange,
+    disableClearSelection = false,
+    disableCloseOnClickOutside = false,
+    disableMatchReferenceWidth = false,
+    disableCloseOnSelectItem = false,
+    loading = false,
+    root,
+    environment: environmentProp,
+    ...rest
+  } = componentProps;
+  const ComboboxLegacyClassNames = cx(styles$1["combobox"], className);
+  const [hasDisabledPopover, setHasDisabledPopover] = useState(false);
+  const [hasEmpty, setHasEmpty] = useState(false);
+  const [disabledItems, setDisabledItems] = useState([]);
+  const [isReadOnly, setIsReadOnly] = useState(readOnly);
+  const [isDisabled, setIsDisabled] = useState(disabled);
+  const referenceRef = useRef(null);
+  const contentRef = useRef(null);
+  const handleOutsidePress = (e) => {
+    const clickedInsideReference = referenceRef.current && e.target != null && referenceRef.current.contains(e.target);
+    if (!clickedInsideReference) {
+      closeMenu();
+      return true;
+    } else {
+      return false;
+    }
+  };
+  const { ref: wrapperDivRef, environment } = useDownshiftEnvironment$1();
+  const itemToString = itemToStringProp ?? defaultItemToString$1;
+  const itemToKey = itemToKeyProp ?? defaultItemToKey$1;
+  const {
+    isOpen,
+    getLabelProps,
+    getToggleButtonProps,
+    getMenuProps,
+    getItemProps,
+    highlightedIndex,
+    selectedItem,
+    selectItem,
+    inputValue,
+    closeMenu
+  } = useSelect({
+    ...rest,
+    items,
+    itemToString,
+    itemToKey,
+    isOpen: open,
+    initialIsOpen: open,
+    environment: environmentProp ?? environment,
+    // NOTE: Reducer needs to be pure, side-effects should be in event handlers
+    stateReducer(state, { type, changes }) {
+      switch (type) {
+        // keep ComboboxLegacy open onBlur, will call close using Popover's onOutsidePress
+        case useSelect.stateChangeTypes.ToggleButtonBlur:
+          return {
+            ...changes,
+            isOpen: open != null ? open : true,
+            highlightedIndex: state.highlightedIndex
+          };
+        case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
+        case useSelect.stateChangeTypes.ItemClick:
+          return {
+            ...changes,
+            isOpen: open != null ? open : disableCloseOnSelectItem ? true : changes.isOpen,
+            highlightedIndex: disableCloseOnSelectItem ? 0 : changes.highlightedIndex
+          };
+        // prevent this from closing the popover by default
+        case useSelect.stateChangeTypes.ToggleButtonClick:
+          return { ...changes, isOpen: open != null ? open : true };
+        default:
+          return changes;
+      }
+    },
+    onSelectedItemChange(changes) {
+      const { selectedItem: selectedItem2 } = changes;
+      if (onChange != null)
+        onChange(selectedItem2 != null ? selectedItem2 : null);
+    },
+    isItemDisabled(item) {
+      if (isDisabled || isReadOnly) {
+        return !!isDisabled || !!isReadOnly;
+      }
+      if (item && item instanceof Object && "disabled" in item && item.disabled) {
+        return true;
+      }
+      if (item && item instanceof Object && "readOnly" in item && item.readOnly) {
+        return true;
+      }
+      if (disabledItems.includes(item)) {
+        return true;
+      }
+      return false;
+    }
+  });
+  useEffect(() => {
+    setIsDisabled(disabled);
+  }, [disabled]);
+  useEffect(() => {
+    setIsReadOnly(readOnly);
+  }, [readOnly]);
+  return /* @__PURE__ */ jsx(
+    ComboboxLegacyContext.Provider,
+    {
+      value: {
+        multiple: false,
+        select: true,
+        disableClearSelection,
+        items,
+        itemToString,
+        itemToKey,
+        isOpen,
+        getLabelProps,
+        getToggleButtonProps,
+        getMenuProps,
+        getItemProps,
+        highlightedIndex,
+        selectedItem,
+        selectedItems: [],
+        disabledItems,
+        setDisabledItems,
+        selectItem,
+        inputValue,
+        isDisabled,
+        isReadOnly,
+        setIsReadOnly,
+        setIsDisabled,
+        hasDisabledPopover,
+        setHasDisabledPopover,
+        hasEmpty,
+        setHasEmpty,
+        loading,
+        referenceRef,
+        contentRef,
+        closeMenu
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: ComboboxLegacyClassNames,
+          "data-anv": "combobox",
+          style: { ...style, ...layoutStyles },
+          ref: wrapperDivRef,
+          children: /* @__PURE__ */ jsx(
+            PopoverLegacy,
+            {
+              root,
+              open: isOpen,
+              noPadding: true,
+              disableCaret: true,
+              fitScreen: true,
+              disableFlipFallback: true,
+              placement: "bottom-start",
+              matchReferenceWidth: !disableMatchReferenceWidth,
+              disableCloseOnClickOutside,
+              onOutsidePress: handleOutsidePress,
+              children
+            }
+          )
+        }
+      )
+    }
+  );
+};
+const SelectLegacyMultiple = function(props) {
+  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
+  const {
+    className,
+    style,
+    children,
+    open,
+    items,
+    itemToString: itemToStringProp,
+    itemToKey: itemToKeyProp,
+    onChange,
+    onSelectedItemsChange,
+    disableCloseOnClickOutside = false,
+    disableMatchReferenceWidth = false,
+    disableCloseOnSelectItem = false,
+    loading = false,
+    root,
+    disabled,
+    readOnly,
+    stateReducer: _,
+    initialSelectedItems,
+    initialActiveIndex,
+    defaultSelectedItems,
+    defaultActiveIndex,
+    activeIndex: activeIndexProp,
+    selectedItems: selectedItemsProp,
+    environment: environmentProp,
+    ...rest
+  } = componentProps;
+  const ComboboxLegacyClassNames = cx(styles$1["combobox"], className);
+  const [hasDisabledPopover, setHasDisabledPopover] = useState(false);
+  const [hasEmpty, setHasEmpty] = useState(false);
+  const [disabledItems, setDisabledItems] = useState([]);
+  const [isReadOnly, setIsReadOnly] = useState(readOnly);
+  const [isDisabled, setIsDisabled] = useState(disabled);
+  const referenceRef = useRef(null);
+  const contentRef = useRef(null);
+  const handleOutsidePress = (e) => {
+    const clickedInsideReference = referenceRef.current && e.target != null && referenceRef.current.contains(e.target);
+    if (!clickedInsideReference) {
+      closeMenu();
+      return true;
+    } else {
+      return false;
+    }
+  };
+  const { ref: wrapperDivRef, environment } = useDownshiftEnvironment$1();
+  const itemToString = itemToStringProp ?? defaultItemToString$1;
+  const itemToKey = itemToKeyProp ?? defaultItemToKey$1;
+  const {
+    getSelectedItemProps,
+    getDropdownProps,
+    reset,
+    selectedItems,
+    addSelectedItem,
+    removeSelectedItem,
+    setSelectedItems
+  } = useMultipleSelection({
+    itemToKey,
+    initialSelectedItems,
+    initialActiveIndex,
+    defaultSelectedItems,
+    defaultActiveIndex,
+    activeIndex: activeIndexProp,
+    selectedItems: selectedItemsProp,
+    environment: environmentProp ?? environment,
+    stateReducer(state, { type, changes }) {
+      switch (type) {
+        // the Chip itself will handle "Backspace" and "Delete"
+        // just return previous state
+        case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace:
+        case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete:
+          return state;
+        case useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem:
+          return { ...changes, activeIndex: -1 };
+        case useMultipleSelection.stateChangeTypes.FunctionReset:
+          return { ...changes, selectedItems: [] };
+        default:
+          return changes;
+      }
+    },
+    onSelectedItemsChange(changes) {
+      const { selectedItems: selectedItems2 } = changes;
+      if (onChange != null) onChange(selectedItems2);
+      if (onSelectedItemsChange != null) onSelectedItemsChange(changes);
+    }
+  });
+  const {
+    isOpen,
+    getLabelProps,
+    getToggleButtonProps,
+    getMenuProps,
+    getItemProps,
+    highlightedIndex,
+    selectedItem,
+    selectItem,
+    inputValue,
+    closeMenu
+  } = useSelect({
+    ...rest,
+    items,
+    itemToString,
+    itemToKey,
+    selectedItem: null,
+    isOpen: open,
+    initialIsOpen: open,
+    environment: environmentProp ?? environment,
+    // NOTE: Reducer needs to be pure, side-effects should be in event handlers
+    stateReducer(state, { type, changes }) {
+      switch (type) {
+        // keep ComboboxLegacy open onBlur, will call close using Popover's onOutsidePress
+        case useSelect.stateChangeTypes.ToggleButtonBlur:
+          return {
+            ...changes,
+            selectedItem: null,
+            isOpen: open != null ? open : true,
+            highlightedIndex: state.highlightedIndex
+          };
+        case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
+        case useSelect.stateChangeTypes.ItemClick:
+          return {
+            ...changes,
+            isOpen: open != null ? open : disableCloseOnSelectItem ? true : changes.isOpen,
+            highlightedIndex: disableCloseOnSelectItem ? 0 : changes.highlightedIndex
+          };
+        // prevent this from closing the popover by default
+        case useSelect.stateChangeTypes.ToggleButtonClick:
+          return { ...changes, isOpen: open != null ? open : true };
+        default:
+          return changes;
+      }
+    },
+    onStateChange({ type, selectedItem: newSelectedItem }) {
+      switch (type) {
+        case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
+        case useSelect.stateChangeTypes.ItemClick:
+        case useSelect.stateChangeTypes.ToggleButtonBlur:
+          if (newSelectedItem != null) {
+            const itemAlreadySelected = selectedItems.some(
+              (item) => itemToKey(item) === itemToKey(newSelectedItem)
+            );
+            if (itemAlreadySelected) {
+              removeSelectedItem(newSelectedItem);
+            } else {
+              addSelectedItem(newSelectedItem);
+            }
+          }
+          break;
+      }
+    },
+    isItemDisabled(item) {
+      if (isDisabled || isReadOnly) {
+        return !!isDisabled || !!isReadOnly;
+      }
+      if (item && item instanceof Object && "disabled" in item && item.disabled) {
+        return true;
+      }
+      if (item && item instanceof Object && "readOnly" in item && item.readOnly) {
+        return true;
+      }
+      if (disabledItems.includes(item)) {
+        return true;
+      }
+      return false;
+    }
+  });
+  useEffect(() => {
+    setIsDisabled(disabled);
+  }, [disabled]);
+  useEffect(() => {
+    setIsReadOnly(readOnly);
+  }, [readOnly]);
+  return /* @__PURE__ */ jsx(
+    ComboboxLegacyContext.Provider,
+    {
+      value: {
+        multiple: true,
+        select: true,
+        items,
+        itemToString,
+        itemToKey,
+        isOpen,
+        getLabelProps,
+        getToggleButtonProps,
+        getMenuProps,
+        getItemProps,
+        highlightedIndex,
+        selectedItem,
+        selectedItems,
+        disabledItems,
+        setDisabledItems,
+        getSelectedItemProps,
+        getDropdownProps,
+        reset,
+        addSelectedItem,
+        removeSelectedItem,
+        setSelectedItems,
+        selectItem,
+        inputValue,
+        isDisabled,
+        isReadOnly,
+        setIsReadOnly,
+        setIsDisabled,
+        hasDisabledPopover,
+        setHasDisabledPopover,
+        hasEmpty,
+        setHasEmpty,
+        loading,
+        referenceRef,
+        contentRef,
+        closeMenu
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: ComboboxLegacyClassNames,
+          "data-anv": "combobox",
+          style: { ...style, ...layoutStyles },
+          ref: wrapperDivRef,
+          children: /* @__PURE__ */ jsx(
+            PopoverLegacy,
+            {
+              root,
+              open: !isDisabled && isOpen,
+              noPadding: true,
+              disableCaret: true,
+              fitScreen: true,
+              disableFlipFallback: true,
+              placement: "bottom-start",
+              matchReferenceWidth: !disableMatchReferenceWidth,
+              disableCloseOnClickOutside,
+              onOutsidePress: handleOutsidePress,
+              children
+            }
+          )
+        }
+      )
+    }
+  );
+};
+
+const ComboboxLegacyTrigger = ({
+  variant: variantProp = "combobox",
+  className,
+  label,
+  size,
+  error,
+  hint,
+  description,
+  required,
+  moreInfo,
+  openMoreInfo,
+  prefix,
+  suffix,
+  maxRows,
+  id,
+  disabled,
+  readOnly,
+  ...rest
+}) => {
+  const {
+    select,
+    disableClearSelection,
+    isOpen,
+    itemToString,
+    getLabelProps,
+    getInputProps,
+    getToggleButtonProps,
+    selectedItem,
+    selectedItems,
+    getSelectedItemProps,
+    getDropdownProps,
+    reset,
+    removeSelectedItem,
+    selectItem,
+    inputValue,
+    isDisabled,
+    isReadOnly,
+    referenceRef,
+    contentRef,
+    closeMenu,
+    setIsDisabled,
+    setIsReadOnly
+  } = useComboboxLegacy();
+  const variant = select ? "select" : "combobox";
+  const context = usePopoverLegacyContext();
+  const inputRef = useRef(null);
+  const ComboboxLegacyTriggerClassNames = cx(styles$1["search-field"], {
+    [styles$1["select"]]: variant === "select"
+  });
+  const noClearButton = isDisabled || isReadOnly || disableClearSelection;
+  const ComboboxLegacyInputWrapperClassNames = cx(
+    styles$1["input-wrapper"],
+    className ? {
+      [className]: variant === "select"
+    } : {},
+    {
+      [styles$1["small"]]: size === "small",
+      [styles$1["large"]]: size === "large",
+      [styles$1["no-clear-button"]]: noClearButton
+    }
+  );
+  const ComboboxLegacyInputClassNames = cx(
+    styles$1["input"],
+    className ? {
+      [className]: variant === "combobox"
+    } : {},
+    {
+      [styles$1["error"]]: error
+    }
+  );
+  useLayoutEffect(() => {
+    if (typeof disabled === "undefined") return;
+    setIsDisabled(disabled);
+  }, [disabled, setIsDisabled]);
+  useLayoutEffect(() => {
+    if (typeof readOnly === "undefined") return;
+    setIsReadOnly(readOnly);
+  }, [readOnly, setIsReadOnly]);
+  const labelUid = "label" + useId();
+  const helperUid = "helper" + useId();
+  const placeholderUid = "placeholder" + useId();
+  const ariaDescribedBy = `${helperUid} ${placeholderUid}`;
+  const errorMessage = typeof error !== "boolean" ? error : undefined;
+  const handleBlur = (e) => {
+    const target = e.relatedTarget ?? e.target;
+    const focusedOnReference = referenceRef.current && referenceRef.current.contains(target);
+    const focusedOnContent = contentRef.current && contentRef.current.contains(target);
+    if (!focusedOnReference && !focusedOnContent) {
+      closeMenu();
+    }
+  };
+  const rowsRef = useRef(null);
+  const [stillCalculating, setStillCalculating] = useState(false);
+  const [collapsedChips, setCollapsedChips] = useState(false);
+  const [visibleChipsCount, setVisibleChipsCount] = useState(
+    null
+  );
+  const [forceRenderCount, setForceRenderCount] = useState(0);
+  useLayoutEffect(() => {
+    if (maxRows === undefined) return;
+    if (stillCalculating === false) {
+      setStillCalculating(true);
+      setCollapsedChips(false);
+      setVisibleChipsCount(null);
+      setForceRenderCount((x) => x + 1);
+    } else if (rowsRef?.current?.children) {
+      const children = rowsRef?.current?.children;
+      const rowData = Array.from(children).reduce(
+        (acc, child) => {
+          const top = child.getBoundingClientRect().top;
+          if (!acc.length) {
+            return [{ count: 1, top }];
+          } else if (acc[acc.length - 1].top === top) {
+            return [
+              ...acc.slice(0, -1),
+              { count: acc[acc.length - 1].count + 1, top }
+            ];
+          } else if (acc[acc.length - 1].top !== top) {
+            return [...acc, { count: 1, top }];
+          } else {
+            return acc;
+          }
+        },
+        []
+      );
+      if (!rowData[maxRows] || visibleChipsCount === 0) {
+        setStillCalculating(false);
+      } else {
+        setCollapsedChips(true);
+        if (visibleChipsCount == null) {
+          const firstGuess = Math.max(
+            rowData.reduce((sum, row) => sum + row.count, -2),
+            0
+          );
+          setVisibleChipsCount(firstGuess);
+        } else {
+          setVisibleChipsCount(visibleChipsCount - 1);
+        }
+        setForceRenderCount((x) => x + 1);
+      }
+    }
+  }, [selectedItems.length, maxRows, forceRenderCount]);
+  const selectedItemsDisplayCount = collapsedChips && maxRows != null && visibleChipsCount !== null ? visibleChipsCount : selectedItems.length;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: ComboboxLegacyTriggerClassNames,
+      "data-anv": "combobox-searchfield",
+      ref: referenceRef,
+      onBlur: handleBlur,
+      children: [
+        label ? /* @__PURE__ */ jsx(
+          Label,
+          {
+            ...getLabelProps({
+              className: styles$1["label"],
+              required,
+              moreInfo,
+              openMoreInfo,
+              id: labelUid
+            }),
+            children: label
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: ComboboxLegacyInputWrapperClassNames,
+            role: "presentation",
+            ...variant === "select" ? {
+              ...getToggleButtonProps({
+                disabled: isDisabled,
+                readOnly: isReadOnly,
+                ref: context.refs.setReference,
+                id,
+                "aria-describedby": ariaDescribedBy,
+                "aria-labelledby": labelUid
+              })
+            } : {
+              ref: context.refs.setReference,
+              onClick: () => inputRef.current?.focus()
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: styles$1["buttons-wrapper"], children: [
+                (inputValue || selectedItem || selectedItems.length) && !noClearButton ? /* @__PURE__ */ jsx("div", { className: styles$1["close-button-wrapper"], children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    "aria-label": "clear selection",
+                    appearance: "ghost",
+                    size: "small",
+                    icon: SvgClose,
+                    className: styles$1["close-button"],
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      if (reset != null) {
+                        reset();
+                      } else {
+                        selectItem(null);
+                      }
+                    },
+                    tabIndex: -1
+                  }
+                ) }) : null,
+                /* @__PURE__ */ jsx("div", { className: styles$1["toggle-button-wrapper"], children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    ...variant === "select" ? { tabIndex: -1 } : getToggleButtonProps(),
+                    className: styles$1["toggle-button"],
+                    "aria-label": "toggle menu",
+                    icon: SvgChevronRight,
+                    appearance: "ghost",
+                    size: "small",
+                    disabled: isDisabled
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: styles$1["rows-wrapper"], ref: rowsRef, children: [
+                selectedItems.length && removeSelectedItem != null && getSelectedItemProps != null ? selectedItems.slice(0, selectedItemsDisplayCount).map((item, index) => {
+                  const { onClick, ...selectedItemProps } = getSelectedItemProps({
+                    selectedItem: item,
+                    index
+                  });
+                  return /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: styles$1["chip-wrapper"],
+                      children: /* @__PURE__ */ jsx(
+                        Chip,
+                        {
+                          ...selectedItemProps,
+                          label: itemToString(item),
+                          onClose: isDisabled || isReadOnly ? undefined : (e) => {
+                            removeSelectedItem(item);
+                          },
+                          className: styles$1["chip"],
+                          title: itemToString(item)
+                        }
+                      )
+                    },
+                    `selected-item-${index}`
+                  );
+                }) : null,
+                collapsedChips && maxRows != null ? /* @__PURE__ */ jsx("div", { className: styles$1["chip-wrapper"], children: /* @__PURE__ */ jsx(
+                  Chip,
+                  {
+                    label: `+${selectedItems.length - selectedItemsDisplayCount}`,
+                    className: styles$1["chip"],
+                    title: selectedItems.slice(selectedItemsDisplayCount).map((item) => itemToString(item)).join(", ")
+                  }
+                ) }) : null,
+                /* @__PURE__ */ jsxs(Flex, { className: styles$1["input-flex"], alignItems: "center", children: [
+                  prefix ? /* @__PURE__ */ jsx("div", { className: styles$1["prefix"], children: prefix }) : null,
+                  variant === "select" ? /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      ...getDropdownProps != null ? getDropdownProps({
+                        className: ComboboxLegacyInputClassNames,
+                        required,
+                        preventKeyAction: isOpen
+                      }) : {
+                        className: ComboboxLegacyInputClassNames,
+                        required
+                      },
+                      children: selectedItems.length ? null : selectedItem ? itemToString(selectedItem) : /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: styles$1["fake-placeholder"],
+                          id: placeholderUid,
+                          children: rest.placeholder
+                        }
+                      )
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      ...getDropdownProps != null && getInputProps != null ? getInputProps(
+                        getDropdownProps({
+                          ...rest,
+                          className: ComboboxLegacyInputClassNames,
+                          disabled: isDisabled,
+                          readOnly: isReadOnly,
+                          required,
+                          autoComplete: "off",
+                          id,
+                          "aria-describedby": ariaDescribedBy,
+                          "aria-labelledby": labelUid,
+                          preventKeyAction: isOpen,
+                          ref: inputRef
+                        })
+                      ) : getInputProps != null ? getInputProps({
+                        ...rest,
+                        className: ComboboxLegacyInputClassNames,
+                        disabled: isDisabled,
+                        readOnly: isReadOnly,
+                        required,
+                        autoComplete: "off",
+                        id,
+                        "aria-describedby": ariaDescribedBy,
+                        "aria-labelledby": labelUid,
+                        ref: inputRef
+                      }) : {}
+                    }
+                  ),
+                  suffix ? /* @__PURE__ */ jsx("div", { className: styles$1["suffix"], children: suffix }) : null
+                ] })
+              ] })
+            ]
+          }
+        ),
+        hint || errorMessage || description ? /* @__PURE__ */ jsx(
+          Helper,
+          {
+            id: helperUid,
+            errorMessage,
+            hint,
+            description
+          }
+        ) : null
+      ]
+    }
+  );
+};
+
+const ComboboxLegacyContent = function({
+  children,
+  className,
+  disablePopover = false,
+  ...rest
+}) {
+  const {
+    items,
+    itemToKey,
+    inputValue,
+    selectedItem,
+    selectedItems,
+    setHasDisabledPopover,
+    getMenuProps,
+    getItemProps,
+    isDisabled,
+    isReadOnly,
+    referenceRef,
+    contentRef,
+    closeMenu
+  } = useComboboxLegacy();
+  const ComboboxLegacyPopoverContentClassNames = cx(
+    styles$1["popover-content"],
+    className
+  );
+  useEffect(() => {
+    setHasDisabledPopover(disablePopover);
+    return () => {
+      setHasDisabledPopover(false);
+    };
+  }, [disablePopover, setHasDisabledPopover]);
+  const handleBlur = (e) => {
+    const target = e.relatedTarget ?? e.target;
+    const focusedOnReference = referenceRef.current && referenceRef.current.contains(target);
+    const focusedOnContent = contentRef.current && contentRef.current.contains(target);
+    if (!focusedOnReference && !focusedOnContent) {
+      closeMenu();
+    }
+  };
+  return disablePopover ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      className: ComboboxLegacyPopoverContentClassNames,
+      ref: contentRef,
+      onBlur: handleBlur,
+      children: children ? children({
+        items,
+        inputValue,
+        selectedItem,
+        getMenuProps,
+        getItemProps,
+        listProps: {
+          ...getMenuProps({}, { suppressRefError: true }),
+          style: {
+            display: items.length ? "" : "none",
+            overflow: "auto"
+          }
+        },
+        options: items.map((item, index) => ({
+          optionProps: {
+            ...getItemProps({
+              item,
+              index
+            }),
+            selected: itemToKey(selectedItem) === itemToKey(item) || selectedItems.some(
+              (selectedItem2) => itemToKey(selectedItem2) === itemToKey(item)
+            ),
+            disabled: !!isDisabled || !!isReadOnly
+            // also see "isItemDisabled" function
+          },
+          item,
+          index
+        }))
+      }) : null
+    }
+  ) : /* @__PURE__ */ jsx(
+    Popover.Content,
+    {
+      "data-anv": "combobox-content",
+      ...rest,
+      className: ComboboxLegacyPopoverContentClassNames,
+      ref: getMenuProps({ ref: contentRef }, { suppressRefError: true }).ref,
+      onBlur: handleBlur,
+      children: children ? children({
+        items,
+        inputValue,
+        selectedItem,
+        getMenuProps,
+        getItemProps,
+        listProps: {
+          ...getMenuProps({}, { suppressRefError: true }),
+          style: {
+            display: items.length ? undefined : "none",
+            overflow: "auto"
+          }
+        },
+        options: items.map((item, index) => ({
+          optionProps: {
+            ...getItemProps({
+              item,
+              index
+            }),
+            selected: itemToKey(selectedItem) === itemToKey(item) || selectedItems.some(
+              (selectedItem2) => itemToKey(selectedItem2) === itemToKey(item)
+            ),
+            disabled: !!isDisabled || !!isReadOnly
+            // also see "isItemDisabled" function
+          },
+          item,
+          index
+        }))
+      }) : null
+    }
+  );
+};
+
+const ComboboxLegacyList = function({
+  children,
+  ...rest
+}) {
+  const {
+    getMenuProps,
+    multiple,
+    items,
+    hasAddNew = false,
+    hasEmpty,
+    loading
+  } = useComboboxLegacy();
+  if (multiple) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ...getMenuProps(rest),
+          "data-anv": "combobox-list",
+          className: cx(styles$1["listview"], styles$2["listview"]),
+          style: {
+            display: items.length || hasAddNew ? undefined : "none",
+            overflow: "auto"
+          },
+          children: [
+            children,
+            loading ? /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Spinner, { className: styles$1["loading-spinner"] }) }) : null
+          ]
+        }
+      ),
+      !items.length && !hasEmpty ? /* @__PURE__ */ jsx("div", { className: styles$1["empty"], children: /* @__PURE__ */ jsx(Text, { subdued: true, size: "small", children: "No match found" }) }) : null
+    ] });
+  } else {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "ul",
+        {
+          ...getMenuProps(rest),
+          "data-anv": "combobox-list",
+          className: styles$3["listbox"],
+          style: {
+            display: items.length || hasAddNew ? undefined : "none",
+            overflow: "auto"
+          },
+          children: [
+            children,
+            loading ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Spinner, { className: styles$1["loading-spinner"] }) }) }) : null
+          ]
+        }
+      ),
+      !items.length && !hasEmpty ? /* @__PURE__ */ jsx("div", { className: styles$1["empty"], children: /* @__PURE__ */ jsx(Text, { subdued: true, size: "small", children: "No match found" }) }) : null
+    ] });
+  }
+};
+
+const ComboboxLegacyItem = function({
+  children,
+  disabled: disabledProp,
+  item,
+  index,
+  alignItems,
+  justifyItems,
+  alignContent,
+  justifyContent,
+  placeItems,
+  placeContent,
+  gap,
+  rowGap,
+  columnGap,
+  ...rest
+}) {
+  const {
+    itemToKey,
+    getItemProps,
+    multiple,
+    selectedItem,
+    selectedItems,
+    disabledItems,
+    setDisabledItems,
+    highlightedIndex
+  } = useComboboxLegacy();
+  const disabled = disabledProp || item && item instanceof Object && "disabled" in item && item.disabled;
+  useEffect(() => {
+    if (disabledProp && !disabledItems.includes(item)) {
+      setDisabledItems([...disabledItems, item]);
+    } else if (disabledItems.includes(item)) {
+      setDisabledItems(disabledItems.filter((prevItem) => prevItem === item));
+    }
+    return () => {
+      if (disabledItems.includes(item)) {
+        setDisabledItems(disabledItems.filter((prevItem) => prevItem === item));
+      }
+    };
+  }, [item, disabledProp, setDisabledItems]);
+  if (multiple) {
+    const checked = selectedItems.some(
+      (selectedItem2) => itemToKey(selectedItem2) === itemToKey(item)
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-anv": "combobox-item",
+        ...getItemProps({
+          item,
+          index,
+          "aria-selected": highlightedIndex === index,
+          ...rest
+        }),
+        className: cx(
+          styles$1["listview-option"],
+          styles$2["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(
+              "input",
+              {
+                type: "checkbox",
+                checked,
+                "aria-checked": checked,
+                "aria-label": "Select",
+                readOnly: true,
+                ...disabled ? { disabled: true } : {}
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: checkboxStyles["icon-wrapper"], "aria-hidden": true, children: [
+              /* @__PURE__ */ jsx(
+                Icon$2,
+                {
+                  size: "large",
+                  svg: SvgIndeterminateCheckBox,
+                  className: checkboxStyles["icon-indeterminate"]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Icon$2,
+                {
+                  size: "large",
+                  svg: SvgCheckBox,
+                  className: checkboxStyles["icon-checked"]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Icon$2,
+                {
+                  size: "large",
+                  svg: SvgCheckBoxOutlineBlank,
+                  className: checkboxStyles["icon-unchecked"]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true })
+          ] }) }) }),
+          /* @__PURE__ */ jsx(
+            Flex,
+            {
+              grow: 1,
+              shrink: 1,
+              alignItems,
+              justifyItems,
+              alignContent,
+              justifyContent,
+              placeItems,
+              placeContent,
+              gap,
+              rowGap,
+              columnGap,
+              children
+            }
+          )
+        ]
+      }
+    );
+  } else {
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        ...getItemProps({
+          item,
+          index,
+          "aria-selected": highlightedIndex === index,
+          ...rest
+        }),
+        "data-anv": "combobox-item",
+        "data-checked": itemToKey(selectedItem) === itemToKey(item),
+        className: styles$1["item"],
+        ...disabled ? { "aria-disabled": true } : {},
+        children: [
+          /* @__PURE__ */ jsx(
+            Flex,
+            {
+              className: styles$3["children"],
+              grow: 1,
+              shrink: 1,
+              alignItems,
+              justifyItems,
+              alignContent,
+              justifyContent,
+              placeItems,
+              placeContent,
+              gap,
+              rowGap,
+              columnGap,
+              children
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Icon$2,
+            {
+              "aria-hidden": true,
+              svg: SvgCheck,
+              inherit: true,
+              className: styles$1["Icon"],
+              style: {
+                opacity: itemToKey(selectedItem) === itemToKey(item) ? 1 : 0
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+};
+const ComboboxLegacyItemAddNew = function({
+  onSelection,
+  ...props
+}) {
+  const { items, setHasAddNew, hasExactMatch, setOnSelectItemAddNew } = useComboboxLegacy();
+  useEffect(() => {
+    setHasAddNew?.(true);
+    return () => {
+      setHasAddNew?.(false);
+    };
+  }, []);
+  useEffect(() => {
+    setOnSelectItemAddNew?.(() => onSelection);
+    return () => {
+      setOnSelectItemAddNew?.(undefined);
+    };
+  }, [setOnSelectItemAddNew, onSelection]);
+  const firstRenderRef = useRef(true);
+  useEffect(() => {
+    if (firstRenderRef.current === true) {
+      firstRenderRef.current = false;
+    }
+  }, []);
+  return !hasExactMatch && !firstRenderRef.current ? /* @__PURE__ */ jsx(
+    ComboboxLegacyItem,
+    {
+      ...props,
+      item: ADD_NEW$1,
+      index: items.length
+    }
+  ) : null;
+};
+
+const ComboboxLegacyEmpty = function({
+  children
+}) {
+  const { items, setHasEmpty } = useComboboxLegacy();
+  useEffect(() => {
+    setHasEmpty?.(true);
+    return () => {
+      setHasEmpty?.(false);
+    };
+  });
+  return !items.length ? children : null;
+};
+
+const item = "_item_pdvrn_5";
+const group = "_group_pdvrn_18";
+const input = "_input_pdvrn_31";
+const prefix = "_prefix_pdvrn_59";
+const suffix = "_suffix_pdvrn_60";
+const combobox = "_combobox_pdvrn_75";
+const select = "_select_pdvrn_84";
+const chip = "_chip_pdvrn_180";
+const listview = "_listview_pdvrn_221";
+const empty = "_empty_pdvrn_229";
+const children = "_children_pdvrn_271";
+const Icon = "_Icon_pdvrn_274";
+const small = "_small_pdvrn_279";
+const large = "_large_pdvrn_282";
+const error = "_error_pdvrn_300";
+const disabled = "_disabled_pdvrn_313";
+const styles = {
+	"buttons-wrapper": "_buttons-wrapper_pdvrn_3",
+	"search-field": "_search-field_pdvrn_4",
+	item: item,
+	group: group,
+	input: input,
+	"input-wrapper": "_input-wrapper_pdvrn_32",
+	"toggle-button-wrapper": "_toggle-button-wrapper_pdvrn_45",
+	"close-button-wrapper": "_close-button-wrapper_pdvrn_46",
+	prefix: prefix,
+	suffix: suffix,
+	combobox: combobox,
+	select: select,
+	"popover-content": "_popover-content_pdvrn_87",
+	"no-clear-button": "_no-clear-button_pdvrn_106",
+	"input-flex": "_input-flex_pdvrn_109",
+	"fake-placeholder": "_fake-placeholder_pdvrn_137",
+	"close-button": "_close-button_pdvrn_46",
+	"toggle-button": "_toggle-button_pdvrn_45",
+	"rows-wrapper": "_rows-wrapper_pdvrn_170",
+	"chip-wrapper": "_chip-wrapper_pdvrn_180",
+	chip: chip,
+	listview: listview,
+	"loading-spinner": "_loading-spinner_pdvrn_225",
+	empty: empty,
+	"group-title": "_group-title_pdvrn_240",
+	children: children,
+	Icon: Icon,
+	small: small,
+	large: large,
+	error: error,
+	"loading-infinite": "_loading-infinite_pdvrn_313",
+	"loading-progress": "_loading-progress_pdvrn_313",
+	disabled: disabled,
+	"listview-option": "_listview-option_pdvrn_331"
+};
+
+const ComboboxTrigger = ({
+  variant: variantProp = "combobox",
+  className,
+  label,
+  size,
+  error,
+  hint,
+  description,
+  required,
+  moreInfo,
+  openMoreInfo,
+  prefix,
+  suffix,
+  maxRows,
+  id,
+  disabled,
+  readOnly,
+  ...rest
+}) => {
+  const {
+    select,
+    disableClearSelection,
+    isOpen,
+    itemToString,
+    getLabelProps,
+    getInputProps,
+    getToggleButtonProps,
+    getMenuProps,
+    selectedItem,
+    selectedItems,
+    getSelectedItemProps,
+    getDropdownProps,
+    reset,
+    removeSelectedItem,
+    selectItem,
+    inputValue,
+    isDisabled,
+    isReadOnly,
+    referenceRef,
+    closeMenu,
+    setIsDisabled,
+    setIsReadOnly
+  } = useCombobox();
+  const variant = select ? "select" : "combobox";
+  const context = usePopoverContext();
+  const inputRef = useRef(null);
+  const ComboboxTriggerClassNames = cx(styles["search-field"], {
+    [styles["select"]]: variant === "select"
+  });
+  const noClearButton = isDisabled || isReadOnly || disableClearSelection;
+  const ComboboxInputWrapperClassNames = cx(
+    styles["input-wrapper"],
+    className ? {
+      [className]: variant === "select"
+    } : {},
+    {
+      [styles["small"]]: size === "small",
+      [styles["large"]]: size === "large",
+      [styles["no-clear-button"]]: noClearButton
+    }
+  );
+  const ComboboxInputClassNames = cx(
+    styles["input"],
+    className ? {
+      [className]: variant === "combobox"
+    } : {},
+    {
+      [styles["error"]]: error
+    }
+  );
+  useLayoutEffect(() => {
+    if (typeof disabled === "undefined") return;
+    setIsDisabled(disabled);
+  }, [disabled, setIsDisabled]);
+  useLayoutEffect(() => {
+    if (typeof readOnly === "undefined") return;
+    setIsReadOnly(readOnly);
+  }, [readOnly, setIsReadOnly]);
+  const helperUid = "helper" + useId();
   const placeholderUid = "placeholder" + useId();
   const ariaDescribedBy = `${helperUid} ${placeholderUid}`;
   const errorMessage = typeof error !== "boolean" ? error : undefined;
@@ -6655,13 +8458,19 @@ const ComboboxTrigger = ({
   );
 };
 const ComboboxSearchField$1 = (props) => {
+  if (!supportsPopover()) return /* @__PURE__ */ jsx(ComboboxLegacyTrigger, { ...props });
   return /* @__PURE__ */ jsx(ComboboxTrigger, { ...props, variant: "combobox" });
 };
 const ComboboxSelectTrigger$1 = (props) => {
+  if (!supportsPopover())
+    return /* @__PURE__ */ jsx(ComboboxLegacyTrigger, { ...props, variant: "select" });
   return /* @__PURE__ */ jsx(ComboboxTrigger, { ...props, variant: "select" });
 };
 
-const ComboboxContent$1 = function({
+const ComboboxGroupContext = createContext(null);
+const ComboboxGroupProvider = ComboboxGroupContext.Provider;
+
+const ComboboxContentElement = function({
   children,
   className,
   disablePopover = false,
@@ -6679,7 +8488,8 @@ const ComboboxContent$1 = function({
     isDisabled,
     isReadOnly,
     contentRef,
-    closeMenu
+    closeMenu,
+    groups
   } = useCombobox();
   const ComboboxPopoverContentClassNames = cx(
     styles["popover-content"],
@@ -6696,6 +8506,37 @@ const ComboboxContent$1 = function({
     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 ? undefined : "none",
+        overflow: "auto"
+      }
+    },
+    options: items.map((item, index) => ({
+      optionProps: {
+        ...getItemProps({
+          item,
+          index
+        }),
+        tabIndex: disablePopover ? -1 : undefined,
+        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",
     {
@@ -6703,35 +8544,27 @@ const ComboboxContent$1 = function({
       className: ComboboxPopoverContentClassNames,
       ref: contentRef,
       onBlur: handleBlur,
-      children: children ? children({
-        items,
-        inputValue,
-        selectedItem,
-        getMenuProps,
-        getItemProps,
-        listProps: {
-          ...getMenuProps({}, { suppressRefError: true }),
-          style: {
-            display: items.length ? "" : "none",
-            overflow: "auto"
-          }
-        },
-        options: items.map((item, index) => ({
-          optionProps: {
-            ...getItemProps({
-              item,
-              index
-            }),
-            selected: itemToKey(selectedItem) === itemToKey(item) || selectedItems.some(
-              (selectedItem2) => itemToKey(selectedItem2) === itemToKey(item)
+      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
+              }
             ),
-            disabled: !!isDisabled || !!isReadOnly
-            // also see "isItemDisabled" function
-          },
-          item,
-          index
-        }))
-      }) : null
+            resolveChildren(group.items)
+          ] })
+        }
+      ) }, group.key)) : resolveChildren(items)
     }
   ) : /* @__PURE__ */ jsx(
     Popover.Content,
@@ -6742,41 +8575,58 @@ const ComboboxContent$1 = function({
       ref: getMenuProps({ ref: contentRef }, { suppressRefError: true }).ref,
       tabIndex: -1,
       onBlur: handleBlur,
-      children: children ? children({
-        items,
-        inputValue,
-        selectedItem,
-        getMenuProps,
-        getItemProps,
-        listProps: {
-          ...getMenuProps({}, { suppressRefError: true }),
-          style: {
-            display: items.length ? undefined : "none",
-            overflow: "auto"
-          }
-        },
-        options: items.map((item, index) => ({
-          optionProps: {
-            ...getItemProps({
-              item,
-              index
-            }),
-            tabIndex: -1,
-            selected: itemToKey(selectedItem) === itemToKey(item) || selectedItems.some(
-              (selectedItem2) => itemToKey(selectedItem2) === itemToKey(item)
+      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
+              }
             ),
-            disabled: !!isDisabled || !!isReadOnly
-            // also see "isItemDisabled" function
-          },
-          item,
-          index
-        }))
-      }) : null
+            resolveChildren(group.items)
+          ] })
+        }
+      ) }, 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,
+    {
+      disablePopover,
+      className,
+      ...rest,
+      children
     }
   );
 };
 
-const ComboboxList$1 = function({
+const ComboboxListElement = function({
   children,
   ...rest
 }) {
@@ -6788,6 +8638,8 @@ const ComboboxList$1 = function({
     hasEmpty,
     loading
   } = useCombobox();
+  if (!supportsPopover())
+    return /* @__PURE__ */ jsx(ComboboxLegacyList, { ...rest, children });
   if (multiple) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
@@ -6795,7 +8647,7 @@ const ComboboxList$1 = function({
         {
           ...getMenuProps(rest),
           "data-anv": "combobox-list",
-          className: cx(styles["listview"], styles$1["listview"]),
+          className: cx(styles["listview"], styles$2["listview"]),
           style: {
             display: items.length || hasAddNew ? undefined : "none",
             overflow: "auto"
@@ -6812,7 +8664,7 @@ const ComboboxList$1 = function({
         {
           ...getMenuProps(rest),
           "data-anv": "combobox-list",
-          className: styles$2["listbox"],
+          className: styles$3["listbox"],
           style: {
             display: items.length || hasAddNew ? undefined : "none",
             overflow: "auto"
@@ -6824,12 +8676,21 @@ const ComboboxList$1 = function({
     ] });
   }
 };
+const ComboboxList$1 = function({
+  children,
+  className,
+  ...rest
+}) {
+  if (!supportsPopover())
+    return /* @__PURE__ */ jsx(ComboboxLegacyList, { className, ...rest, children });
+  return /* @__PURE__ */ jsx(ComboboxListElement, { className, ...rest, children });
+};
 
-const ComboboxItem$1 = function({
+const ComboboxItemElement = function({
   children,
   disabled: disabledProp,
   item,
-  index,
+  index: indexProp,
   alignItems,
   justifyItems,
   alignContent,
@@ -6849,8 +8710,11 @@ const ComboboxItem$1 = function({
     selectedItems,
     disabledItems,
     setDisabledItems,
-    highlightedIndex
+    highlightedIndex,
+    items,
+    groupBy
   } = useCombobox();
+  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)) {
@@ -6880,10 +8744,10 @@ const ComboboxItem$1 = function({
         }),
         className: cx(
           styles["listview-option"],
-          styles$1["listview-option"]
+          styles$2["listview-option"]
         ),
         children: [
-          item !== ADD_NEW ? /* @__PURE__ */ jsx("div", { className: cx(styles["cell"], styles$1["cell"]), children: /* @__PURE__ */ jsx("div", { className: checkboxStyles["wrapper"], children: /* @__PURE__ */ jsxs("div", { className: checkboxStyles["checkbox"], 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: [
             /* @__PURE__ */ jsx(
               "input",
               {
@@ -6898,7 +8762,7 @@ const ComboboxItem$1 = function({
             ),
             /* @__PURE__ */ jsxs("span", { className: checkboxStyles["icon-wrapper"], "aria-hidden": true, children: [
               /* @__PURE__ */ jsx(
-                Icon$1,
+                Icon$2,
                 {
                   size: "large",
                   svg: SvgIndeterminateCheckBox,
@@ -6906,7 +8770,7 @@ const ComboboxItem$1 = function({
                 }
               ),
               /* @__PURE__ */ jsx(
-                Icon$1,
+                Icon$2,
                 {
                   size: "large",
                   svg: SvgCheckBox,
@@ -6914,7 +8778,7 @@ const ComboboxItem$1 = function({
                 }
               ),
               /* @__PURE__ */ jsx(
-                Icon$1,
+                Icon$2,
                 {
                   size: "large",
                   svg: SvgCheckBoxOutlineBlank,
@@ -6962,7 +8826,7 @@ const ComboboxItem$1 = function({
           /* @__PURE__ */ jsx(
             Flex,
             {
-              className: styles$2["children"],
+              className: styles$3["children"],
               grow: 1,
               shrink: 1,
               alignItems,
@@ -6978,7 +8842,7 @@ const ComboboxItem$1 = function({
             }
           ),
           /* @__PURE__ */ jsx(
-            Icon$1,
+            Icon$2,
             {
               "aria-hidden": true,
               svg: SvgCheck,
@@ -6994,7 +8858,11 @@ const ComboboxItem$1 = function({
     );
   }
 };
-const ComboboxItemAddNew$1 = function({
+const ComboboxItem$1 = function(props) {
+  if (!supportsPopover()) return /* @__PURE__ */ jsx(ComboboxLegacyItem, { ...props });
+  return /* @__PURE__ */ jsx(ComboboxItemElement, { ...props });
+};
+const ComboboxItemAddNewElement = function({
   onSelection,
   ...props
 }) {
@@ -7026,8 +8894,12 @@ const ComboboxItemAddNew$1 = function({
     }
   ) : null;
 };
+const ComboboxItemAddNew$1 = function(props) {
+  if (!supportsPopover()) return /* @__PURE__ */ jsx(ComboboxLegacyItemAddNew, { ...props });
+  return /* @__PURE__ */ jsx(ComboboxItemAddNewElement, { ...props });
+};
 
-const ComboboxEmpty$1 = function({
+const ComboboxEmptyElement = function({
   children
 }) {
   const { items, setHasEmpty } = useCombobox();
@@ -7037,8 +8909,16 @@ const ComboboxEmpty$1 = function({
       setHasEmpty?.(false);
     };
   });
+  if (!supportsPopover()) return;
   return !items.length ? children : null;
 };
+const ComboboxEmpty$1 = function({
+  children
+}) {
+  if (!supportsPopover())
+    return /* @__PURE__ */ jsx(ComboboxLegacyEmpty, { children });
+  return /* @__PURE__ */ jsx(ComboboxEmptyElement, { children });
+};
 
 const defaultItemToString = function(item) {
   return item != null ? String(item) : "";
@@ -7059,6 +8939,40 @@ const useDownshiftEnvironment = () => {
   return { ref: wrapperDivRef, environment };
 };
 
+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 ADD_NEW = Symbol.for("add-new");
 const ComboboxContext = createContext(null);
 const useCombobox = function() {
@@ -7096,6 +9010,9 @@ const ComboboxSingle = function(props) {
     root,
     onInputValueChange,
     environment: environmentProp,
+    groupBy,
+    groupToString,
+    groupSorter,
     ...rest
   } = componentProps;
   const ComboboxClassNames = cx(styles["combobox"], className);
@@ -7115,10 +9032,22 @@ const ComboboxSingle = function(props) {
     closeMenu();
   };
   const { ref: wrapperDivRef, environment } = useDownshiftEnvironment();
+  const { orderedItems: allItemsOrderedByGroup } = useGroups({
+    items: itemsProp,
+    groupBy,
+    groupToString,
+    groupSorter
+  });
+  const { groups: searchedGroups, orderedItems: searchedItemsOrderedByGroup } = useGroups({
+    items,
+    groupBy,
+    groupToString,
+    groupSorter
+  });
   const showAddNew = hasAddNew && !hasExactMatch;
   const combinedItems = useMemo(
-    () => showAddNew ? [...items, ADD_NEW] : items,
-    [items, showAddNew]
+    () => showAddNew ? [...searchedItemsOrderedByGroup, ADD_NEW] : searchedItemsOrderedByGroup,
+    [searchedItemsOrderedByGroup, showAddNew]
   );
   const itemToString = itemToStringProp ?? defaultItemToString;
   const itemToKey = itemToKeyProp ?? defaultItemToKey;
@@ -7183,18 +9112,20 @@ const ComboboxSingle = function(props) {
       const inputValueMatchesSelectedItem = selectedItem2 != null && inputValue2 === itemToString(selectedItem2);
       const inputValueIsEmpty = inputValue2 == null || inputValue2 === "";
       if (type === useCombobox$1.stateChangeTypes.InputKeyDownEnter || type === useCombobox$1.stateChangeTypes.ItemClick) {
-        setItems(itemsProp);
+        setItems(allItemsOrderedByGroup);
         setHasExactMatch(true);
       } else if (!inputValueMatchesSelectedItem && !inputValueIsEmpty && !disableFilter) {
-        setItems(matchSorter(itemsProp, inputValue2, filterOptions));
+        setItems(
+          matchSorter(allItemsOrderedByGroup, inputValue2, filterOptions)
+        );
         setHasExactMatch(
-          matchSorter(itemsProp, inputValue2, {
+          matchSorter(allItemsOrderedByGroup, inputValue2, {
             ...filterOptions,
             threshold: matchSorter.rankings.EQUAL
           }).length > 0
         );
       } else {
-        setItems(itemsProp);
+        setItems(allItemsOrderedByGroup);
         setHasExactMatch(true);
       }
     }),
@@ -7206,7 +9137,7 @@ const ComboboxSingle = function(props) {
     onIsOpenChange({ isOpen: isOpen2, inputValue: inputValue2, selectedItem: selectedItem2 }) {
       if (isOpen2 === false) {
         setTimeout(() => {
-          setItems(itemsProp);
+          setItems(allItemsOrderedByGroup);
           if (inputValue2 === "") {
             selectItem(null);
           } else {
@@ -7250,25 +9181,25 @@ const ComboboxSingle = function(props) {
     const inputValueMatchesSelectedItem = selectedItem != null && inputValue === itemToString(selectedItem);
     const inputValueIsEmpty = inputValue == null || inputValue === "";
     if (!inputValueMatchesSelectedItem && !inputValueIsEmpty && !disableFilter) {
-      setItems(matchSorter(itemsProp, inputValue, filterOptions));
+      setItems(matchSorter(allItemsOrderedByGroup, inputValue, filterOptions));
       setHasExactMatch(
-        matchSorter(itemsProp, inputValue, {
+        matchSorter(allItemsOrderedByGroup, inputValue, {
           ...filterOptions,
           threshold: matchSorter.rankings.EQUAL
         }).length > 0
       );
     } else {
-      setItems(itemsProp);
+      setItems(allItemsOrderedByGroup);
       setHasExactMatch(true);
     }
-  }, [itemsProp]);
+  }, [allItemsOrderedByGroup]);
   return /* @__PURE__ */ jsx(
     ComboboxContext.Provider,
     {
       value: {
         multiple: false,
         select: false,
-        items,
+        items: searchedItemsOrderedByGroup,
         itemToString,
         itemToKey,
         isOpen,
@@ -7303,7 +9234,10 @@ const ComboboxSingle = function(props) {
         loading,
         referenceRef,
         contentRef,
-        closeMenu
+        closeMenu,
+        groupBy,
+        groupToString,
+        groups: searchedGroups
       },
       children: /* @__PURE__ */ jsx(
         "div",
@@ -7366,6 +9300,8 @@ const ComboboxMultiple = function(props) {
     activeIndex: activeIndexProp,
     selectedItems: selectedItemsProp,
     environment: environmentProp,
+    groupBy,
+    groupToString,
     ...rest
   } = componentProps;
   const ComboboxClassNames = cx(styles["combobox"], className);
@@ -7386,10 +9322,20 @@ const ComboboxMultiple = function(props) {
     closeMenu();
   };
   const { ref: wrapperDivRef, environment } = useDownshiftEnvironment();
+  const { orderedItems: allItemsOrderedByGroup } = useGroups({
+    items: itemsProp,
+    groupBy,
+    groupToString
+  });
+  const { groups: searchedGroups, orderedItems: searchedItemsOrderedByGroup } = useGroups({
+    items,
+    groupBy,
+    groupToString
+  });
   const showAddNew = hasAddNew && !hasExactMatch;
   const combinedItems = useMemo(
-    () => showAddNew ? [...items, ADD_NEW] : items,
-    [items, showAddNew]
+    () => showAddNew ? [...items, ADD_NEW] : searchedItemsOrderedByGroup,
+    [items, searchedItemsOrderedByGroup, showAddNew]
   );
   const itemToString = itemToStringProp ?? defaultItemToString;
   const itemToKey = itemToKeyProp ?? defaultItemToKey;
@@ -7529,18 +9475,20 @@ const ComboboxMultiple = function(props) {
       const inputValueMatchesSelectedItem = selectedItem2 != null && inputValue2 === itemToString(selectedItem2);
       const inputValueIsEmpty = inputValue2 == null || inputValue2 === "";
       if (type === useCombobox$1.stateChangeTypes.InputKeyDownEnter || type === useCombobox$1.stateChangeTypes.ItemClick) {
-        setItems(itemsProp);
+        setItems(allItemsOrderedByGroup);
         setHasExactMatch(true);
       } else if (!inputValueMatchesSelectedItem && !inputValueIsEmpty && !disableFilter) {
-        setItems(matchSorter(itemsProp, inputValue2, filterOptions));
+        setItems(
+          matchSorter(allItemsOrderedByGroup, inputValue2, filterOptions)
+        );
         setHasExactMatch(
-          matchSorter(itemsProp, inputValue2, {
+          matchSorter(allItemsOrderedByGroup, inputValue2, {
             ...filterOptions,
             threshold: matchSorter.rankings.EQUAL
           }).length > 0
         );
       } else {
-        setItems(itemsProp);
+        setItems(allItemsOrderedByGroup);
         setHasExactMatch(true);
       }
     }),
@@ -7548,7 +9496,7 @@ const ComboboxMultiple = function(props) {
       if (isOpen2 === false) {
         setTimeout(() => {
           setInputValue("");
-          setItems(itemsProp);
+          setItems(allItemsOrderedByGroup);
         }, 200);
       }
     },
@@ -7603,7 +9551,7 @@ const ComboboxMultiple = function(props) {
       value: {
         multiple: true,
         select: false,
-        items,
+        items: searchedItemsOrderedByGroup,
         itemToString,
         itemToKey,
         isOpen,
@@ -7642,7 +9590,10 @@ const ComboboxMultiple = function(props) {
         loading,
         referenceRef,
         contentRef,
-        closeMenu
+        closeMenu,
+        groupBy,
+        groupToString,
+        groups: searchedGroups
       },
       children: /* @__PURE__ */ jsx(
         "div",
@@ -7693,6 +9644,8 @@ const SelectSingle = function(props) {
     minPopoverHeight,
     root,
     environment: environmentProp,
+    groupBy,
+    groupToString,
     ...rest
   } = componentProps;
   const ComboboxClassNames = cx(styles["combobox"], className);
@@ -7710,6 +9663,11 @@ const SelectSingle = function(props) {
   const { ref: wrapperDivRef, environment } = useDownshiftEnvironment();
   const itemToString = itemToStringProp ?? defaultItemToString;
   const itemToKey = itemToKeyProp ?? defaultItemToKey;
+  const { groups, orderedItems } = useGroups({
+    items,
+    groupBy,
+    groupToString
+  });
   const {
     isOpen,
     getLabelProps,
@@ -7723,7 +9681,7 @@ const SelectSingle = function(props) {
     closeMenu
   } = useSelect({
     ...rest,
-    items,
+    items: orderedItems,
     itemToString,
     itemToKey,
     isOpen: open,
@@ -7777,7 +9735,7 @@ const SelectSingle = function(props) {
         multiple: false,
         select: true,
         disableClearSelection,
-        items,
+        items: orderedItems,
         itemToString,
         itemToKey,
         isOpen,
@@ -7803,7 +9761,10 @@ const SelectSingle = function(props) {
         loading,
         referenceRef,
         contentRef,
-        closeMenu
+        closeMenu,
+        groups,
+        groupBy,
+        groupToString
       },
       children: /* @__PURE__ */ jsx(
         "div",
@@ -7862,6 +9823,8 @@ const SelectMultiple = function(props) {
     activeIndex: activeIndexProp,
     selectedItems: selectedItemsProp,
     environment: environmentProp,
+    groupBy,
+    groupToString,
     ...rest
   } = componentProps;
   const ComboboxClassNames = cx(styles["combobox"], className);
@@ -7879,6 +9842,7 @@ const SelectMultiple = function(props) {
   const { ref: wrapperDivRef, environment } = useDownshiftEnvironment();
   const itemToString = itemToStringProp ?? defaultItemToString;
   const itemToKey = itemToKeyProp ?? defaultItemToKey;
+  const { groups, orderedItems } = useGroups({ items, groupBy, groupToString });
   const {
     getSelectedItemProps,
     getDropdownProps,
@@ -7931,7 +9895,7 @@ const SelectMultiple = function(props) {
     closeMenu
   } = useSelect({
     ...rest,
-    items,
+    items: orderedItems,
     itemToString,
     itemToKey,
     selectedItem: null,
@@ -8000,7 +9964,7 @@ const SelectMultiple = function(props) {
       value: {
         multiple: true,
         select: true,
-        items,
+        items: orderedItems,
         itemToString,
         itemToKey,
         isOpen,
@@ -8032,7 +9996,10 @@ const SelectMultiple = function(props) {
         loading,
         referenceRef,
         contentRef,
-        closeMenu
+        closeMenu,
+        groupBy,
+        groupToString,
+        groups
       },
       children: /* @__PURE__ */ jsx(
         "div",
@@ -8063,6 +10030,13 @@ const SelectMultiple = function(props) {
   );
 };
 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 {
@@ -8070,6 +10044,13 @@ const ComboboxElement$1 = function(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 {
@@ -8347,4 +10328,4 @@ const Combobox = Object.assign(ComboboxElement, {
 });
 
 export { Combobox as C, ComboboxElement as a, ComboboxSelect as b, ComboboxSearchField as c, ComboboxSelectTrigger as d, ComboboxContent as e, ComboboxList as f, ComboboxItem as g, ComboboxItemAddNew as h, ComboboxEmpty as i, useInfiniteCombobox as u };
-//# sourceMappingURL=Combobox-DnTI2I3L.js.map
+//# sourceMappingURL=Combobox-DCrEfyl2.js.map