@servicetitan/anvil2 3.0.3 → 3.0.5

package/dist/Combobox-BXQFOwX4.js

@@ -0,0 +1,2475 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createContext, useContext, useEffect, useMemo, useState, useRef, forwardRef, useId, useLayoutEffect } from 'react';
+import { P as Popover, u as usePopoverContext } from './Popover-B3Vw4lDW.js';
+import { i as isMultiple, b as SELECT_ALL, a as defaultItemToKey, d as defaultItemToString, g as getScrollParent, A as ADD_NEW, S as SelectTriggerBase } from './SelectTriggerBase-4o1cqEbR.js';
+import { c as cx } from './index-De1g9FRV.js';
+import { u as useDownshiftEnvironment, c as useMultipleSelection, b as useSelect, a as useCombobox$1 } from './downshift.esm-xtSnQp44.js';
+import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-CB_zHDbW.js';
+import { l as listboxStyles } from './Listbox.module-K85jTwXo.js';
+import { T as Text } from './Text-BgPuOXJM.js';
+import { D as Divider } from './Divider-CxtTyw8_.js';
+import { F as Flex } from './Flex-_orhvoxS.js';
+import { S as Spinner } from './Spinner-B7tTWcP6.js';
+import { l as listViewStyles } from './ListView.module-CKUQP3kf.js';
+import { I as Icon } from './Icon-feeG7gXA.js';
+import { c as checkboxStyles } from './Checkbox.module-DVbXNsaN.js';
+import { S as SvgCheckBox, a as SvgCheckBoxOutlineBlank } from './check_box-0U1tbEAd.js';
+import { A as Avatar } from './Avatar-B_cRQqKR.js';
+import { c as childrenToString } from './childrenToString-Bz9MqbHb.js';
+import { useTrackingId } from './useTrackingId.js';
+import { S as SvgCheck } from './check-Cf67OWrZ.js';
+import { m as matchSorter } from './match-sorter.esm-CGAauEiU.js';
+
+import './Combobox.css';const ComboboxContext = createContext(null);
+const useCombobox = function() {
+  const context = useContext(
+    ComboboxContext
+  );
+  if (context == null) {
+    throw new Error("useCombobox must be wrapped in <Combobox />");
+  }
+  return context;
+};
+
+const ComboboxEmptyElement = function({
+  children
+}) {
+  const { items, setHasEmpty } = useCombobox();
+  useEffect(() => {
+    setHasEmpty?.(true);
+    return () => {
+      setHasEmpty?.(false);
+    };
+  });
+  return !items.length ? children : null;
+};
+const ComboboxEmpty = function({
+  children
+}) {
+  return /* @__PURE__ */ jsx(ComboboxEmptyElement, { children });
+};
+
+const combobox = "_combobox_8ya2y_2";
+const listview = "_listview_8ya2y_13";
+const empty = "_empty_8ya2y_18";
+const group = "_group_8ya2y_34";
+const item = "_item_8ya2y_69";
+const scrolled = "_scrolled_8ya2y_189";
+const styles = {
+	combobox: combobox,
+	"popover-content": "_popover-content_8ya2y_7",
+	listview: listview,
+	empty: empty,
+	"scroll-sentinel": "_scroll-sentinel_8ya2y_25",
+	group: group,
+	"group-title": "_group-title_8ya2y_50",
+	"group-list": "_group-list_8ya2y_56",
+	item: item,
+	"listview-option": "_listview-option_8ya2y_133",
+	"listview-option-disabled": "_listview-option-disabled_8ya2y_139",
+	"icon-disabled": "_icon-disabled_8ya2y_145",
+	"select-all": "_select-all_8ya2y_183",
+	scrolled: scrolled
+};
+
+function useGroups({
+  items,
+  groupBy,
+  groupToString,
+  groupSorter = (a, b) => `${a}`.localeCompare(`${b}`)
+}) {
+  const { groups, orderedItems } = useMemo(() => {
+    if (!groupBy) return { groups: [], orderedItems: items };
+    const groupsSansItems = [];
+    const groupedItems = {};
+    items.forEach((item) => {
+      const groupKey = item[groupBy];
+      if (!groupedItems[groupKey]) {
+        groupedItems[groupKey] = [];
+      }
+      groupedItems[groupKey].push(item);
+    });
+    Object.keys(groupedItems).forEach((key) => {
+      groupsSansItems.push({
+        key,
+        label: groupToString ? groupToString?.(key) : key
+      });
+    });
+    groupsSansItems.sort((a, b) => groupSorter(a.key, b.key));
+    const orderedItems2 = [];
+    const groups2 = groupsSansItems.map((group) => ({
+      ...group,
+      items: groupedItems[group.key].map((item) => {
+        orderedItems2.push(item);
+        return item;
+      })
+    }));
+    return { groups: groups2, orderedItems: orderedItems2 };
+  }, [groupBy, groupSorter, groupToString, items]);
+  return { groups, orderedItems };
+}
+
+const SelectSingle = function(props) {
+  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
+  const {
+    className,
+    style,
+    children,
+    open,
+    disabled,
+    readOnly,
+    items,
+    itemToString: itemToStringProp,
+    itemToKey: itemToKeyProp,
+    onChange,
+    disableClearSelection = false,
+    disableCloseOnClickOutside = false,
+    disableMatchReferenceWidth = false,
+    disableCloseOnSelectItem = false,
+    loading = false,
+    minPopoverHeight,
+    root,
+    environment: environmentProp,
+    groupBy,
+    groupToString,
+    groupSorter,
+    ...rest
+  } = componentProps;
+  const ComboboxClassNames = cx(styles["combobox"], className);
+  const [hasDisabledPopover, setHasDisabledPopover] = useState(false);
+  const [hasEmpty, setHasEmpty] = useState(false);
+  const [disabledItems, setDisabledItems] = useState([]);
+  const [forceCloseOnSelectItems, setForceCloseOnSelectItems] = useState([]);
+  const [, setForceClearInputValueOnSelectItems] = useState([]);
+  const [isReadOnly, setIsReadOnly] = useState(readOnly);
+  const [isDisabled, setIsDisabled] = useState(disabled);
+  const referenceRef = useRef(null);
+  const contentRef = useRef(null);
+  const listRef = useRef(null);
+  const handleOutsidePress = (_e) => {
+    if (disableCloseOnClickOutside) return;
+    closeMenu();
+  };
+  const { ref: wrapperDivRef, environment } = useDownshiftEnvironment();
+  const itemToString = itemToStringProp ?? defaultItemToString;
+  const itemToKey = itemToKeyProp ?? defaultItemToKey;
+  const { groups, orderedItems } = useGroups({
+    items,
+    groupBy,
+    groupToString,
+    groupSorter
+  });
+  const {
+    isOpen,
+    getLabelProps,
+    getToggleButtonProps,
+    getMenuProps,
+    getItemProps,
+    highlightedIndex,
+    selectedItem,
+    selectItem,
+    inputValue,
+    closeMenu
+  } = useSelect({
+    ...rest,
+    items: orderedItems,
+    itemToString,
+    itemToKey,
+    isOpen: open,
+    initialIsOpen: open,
+    environment: environmentProp ?? environment,
+    // NOTE: Reducer needs to be pure, side-effects should be in event handlers
+    stateReducer(state, { type, changes }) {
+      switch (type) {
+        case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
+        case useSelect.stateChangeTypes.ItemClick:
+          return {
+            ...changes,
+            isOpen: open != null ? open : forceCloseOnSelectItems.includes(changes.selectedItem) ? false : disableCloseOnSelectItem ? true : changes.isOpen,
+            highlightedIndex: disableCloseOnSelectItem ? state.highlightedIndex : changes.highlightedIndex
+          };
+        default:
+          return changes;
+      }
+    },
+    onSelectedItemChange(changes) {
+      const { selectedItem: selectedItem2 } = changes;
+      if (onChange != null)
+        onChange(selectedItem2 != null ? selectedItem2 : null);
+    },
+    isItemDisabled(item) {
+      if (isDisabled || isReadOnly) {
+        return !!isDisabled || !!isReadOnly;
+      }
+      if (item && item instanceof Object && "disabled" in item && item.disabled) {
+        return true;
+      }
+      if (item && item instanceof Object && "readOnly" in item && item.readOnly) {
+        return true;
+      }
+      if (disabledItems.includes(item)) {
+        return true;
+      }
+      return false;
+    }
+  });
+  useEffect(() => {
+    setIsDisabled(disabled);
+  }, [disabled]);
+  useEffect(() => {
+    setIsReadOnly(readOnly);
+  }, [readOnly]);
+  return /* @__PURE__ */ jsx(
+    ComboboxContext.Provider,
+    {
+      value: {
+        multiple: false,
+        select: true,
+        disableClearSelection,
+        items: orderedItems,
+        itemToString,
+        itemToKey,
+        isOpen,
+        getLabelProps,
+        getToggleButtonProps,
+        getMenuProps,
+        getItemProps,
+        highlightedIndex,
+        selectedItem,
+        selectedItems: [],
+        disabledItems,
+        setDisabledItems,
+        setForceCloseOnSelectItems,
+        setForceClearInputValueOnSelectItems,
+        selectItem,
+        inputValue,
+        isDisabled,
+        isReadOnly,
+        setIsReadOnly,
+        setIsDisabled,
+        hasDisabledPopover,
+        setHasDisabledPopover,
+        hasEmpty,
+        setHasEmpty,
+        loading,
+        referenceRef,
+        contentRef,
+        closeMenu,
+        groups,
+        groupBy,
+        groupToString,
+        listRef
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: ComboboxClassNames,
+          "data-anv": "combobox",
+          style: { ...style, ...layoutStyles },
+          ref: wrapperDivRef,
+          children: /* @__PURE__ */ jsx(
+            Popover,
+            {
+              open: isOpen,
+              noPadding: true,
+              disableCaret: true,
+              fitScreen: true,
+              disableFlipFallback: true,
+              placement: "bottom-start",
+              matchReferenceWidth: !disableMatchReferenceWidth,
+              disableCloseOnClickOutside,
+              onClickOutside: handleOutsidePress,
+              minHeight: minPopoverHeight,
+              children
+            }
+          )
+        }
+      )
+    }
+  );
+};
+const SelectMultiple = function(props) {
+  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
+  const {
+    className,
+    style,
+    children,
+    open,
+    items,
+    itemToString: itemToStringProp,
+    itemToKey: itemToKeyProp,
+    onChange,
+    onSelectedItemsChange,
+    onStateChange,
+    disableCloseOnClickOutside = false,
+    disableMatchReferenceWidth = false,
+    disableCloseOnSelectItem = false,
+    loading = false,
+    minPopoverHeight,
+    root,
+    disabled,
+    readOnly,
+    stateReducer: _,
+    initialSelectedItems,
+    initialActiveIndex,
+    defaultSelectedItems,
+    defaultActiveIndex,
+    activeIndex: activeIndexProp,
+    selectedItems: selectedItemsProp,
+    environment: environmentProp,
+    groupBy,
+    groupToString,
+    groupSorter,
+    selectAll,
+    ...rest
+  } = componentProps;
+  const ComboboxClassNames = cx(styles["combobox"], className);
+  const [hasDisabledPopover, setHasDisabledPopover] = useState(false);
+  const [hasEmpty, setHasEmpty] = useState(false);
+  const [disabledItems, setDisabledItems] = useState([]);
+  const [forceCloseOnSelectItems, setForceCloseOnSelectItems] = useState([]);
+  const [, setForceClearInputValueOnSelectItems] = useState([]);
+  const [isReadOnly, setIsReadOnly] = useState(readOnly);
+  const [isDisabled, setIsDisabled] = useState(disabled);
+  const referenceRef = useRef(null);
+  const contentRef = useRef(null);
+  const listRef = useRef(null);
+  const handleOutsidePress = (_e) => {
+    if (disableCloseOnClickOutside) return;
+    closeMenu();
+  };
+  const { ref: wrapperDivRef, environment } = useDownshiftEnvironment();
+  const itemToString = itemToStringProp ?? defaultItemToString;
+  const itemToKey = itemToKeyProp ?? defaultItemToKey;
+  const { groups, orderedItems: orderedItemsBase } = useGroups({
+    items,
+    groupBy,
+    groupToString,
+    groupSorter
+  });
+  const orderedItems = selectAll ? [SELECT_ALL, ...orderedItemsBase] : orderedItemsBase;
+  const {
+    getSelectedItemProps,
+    getDropdownProps,
+    reset,
+    selectedItems,
+    addSelectedItem,
+    removeSelectedItem,
+    setSelectedItems
+  } = useMultipleSelection({
+    itemToKey,
+    initialSelectedItems,
+    initialActiveIndex,
+    defaultSelectedItems,
+    defaultActiveIndex,
+    activeIndex: activeIndexProp,
+    selectedItems: selectedItemsProp,
+    environment: environmentProp ?? environment,
+    stateReducer(state, { type, changes }) {
+      switch (type) {
+        // the Chip itself will handle "Backspace" and "Delete"
+        // just return previous state
+        case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace:
+        case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete:
+          return state;
+        case useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem:
+          return { ...changes, activeIndex: -1 };
+        case useMultipleSelection.stateChangeTypes.FunctionReset:
+          return { ...changes, selectedItems: [] };
+        default:
+          return changes;
+      }
+    },
+    onStateChange,
+    onSelectedItemsChange(changes) {
+      const { selectedItems: selectedItems2 } = changes;
+      if (onChange != null) onChange(selectedItems2);
+      if (onSelectedItemsChange != null) onSelectedItemsChange(changes);
+    }
+  });
+  const {
+    isOpen,
+    getLabelProps,
+    getToggleButtonProps,
+    getMenuProps,
+    getItemProps,
+    highlightedIndex,
+    selectedItem,
+    selectItem,
+    inputValue,
+    closeMenu
+  } = useSelect({
+    ...rest,
+    items: orderedItems,
+    itemToString,
+    itemToKey,
+    selectedItem: null,
+    isOpen: open,
+    initialIsOpen: open,
+    environment: environmentProp ?? environment,
+    // NOTE: Reducer needs to be pure, side-effects should be in event handlers
+    stateReducer(state, { type, changes }) {
+      switch (type) {
+        case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
+        case useSelect.stateChangeTypes.ItemClick:
+          return {
+            ...changes,
+            isOpen: open != null ? open : forceCloseOnSelectItems.includes(changes.selectedItem) ? false : disableCloseOnSelectItem ? true : changes.isOpen,
+            highlightedIndex: disableCloseOnSelectItem ? state.highlightedIndex : changes.highlightedIndex
+          };
+        default:
+          return changes;
+      }
+    },
+    onStateChange(changes) {
+      const { type, selectedItem: newSelectedItem } = changes;
+      switch (type) {
+        case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
+        case useSelect.stateChangeTypes.ItemClick:
+        case useSelect.stateChangeTypes.ToggleButtonBlur:
+          if (changes.selectedItem === SELECT_ALL) {
+            selectAll?.onSelection();
+            return {
+              ...changes,
+              selectedItem: null
+            };
+          }
+          if (newSelectedItem != null) {
+            const itemAlreadySelected = selectedItems.some(
+              (item) => itemToKey(item) === itemToKey(newSelectedItem)
+            );
+            if (itemAlreadySelected) {
+              removeSelectedItem(newSelectedItem);
+            } else {
+              addSelectedItem(newSelectedItem);
+            }
+          }
+          break;
+      }
+      onStateChange?.(changes);
+    },
+    isItemDisabled(item) {
+      if (isDisabled || isReadOnly) {
+        return !!isDisabled || !!isReadOnly;
+      }
+      if (item && item instanceof Object && "disabled" in item && item.disabled) {
+        return true;
+      }
+      if (item && item instanceof Object && "readOnly" in item && item.readOnly) {
+        return true;
+      }
+      if (disabledItems.includes(item)) {
+        return true;
+      }
+      return false;
+    },
+    onHighlightedIndexChange(changes) {
+      if (selectAll && changes.highlightedIndex === 0 && [
+        useSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown,
+        useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp,
+        useSelect.stateChangeTypes.ToggleButtonKeyDownPageDown,
+        useSelect.stateChangeTypes.ToggleButtonKeyDownPageUp,
+        useSelect.stateChangeTypes.ToggleButtonKeyDownHome,
+        useSelect.stateChangeTypes.ToggleButtonKeyDownEnd
+      ].includes(changes.type) && listRef.current) {
+        const scrollParent = getScrollParent(listRef.current);
+        if (scrollParent) {
+          scrollParent.scrollTop = 0;
+        }
+      }
+    }
+  });
+  useEffect(() => {
+    setIsDisabled(disabled);
+  }, [disabled]);
+  useEffect(() => {
+    setIsReadOnly(readOnly);
+  }, [readOnly]);
+  return /* @__PURE__ */ jsx(
+    ComboboxContext.Provider,
+    {
+      value: {
+        multiple: true,
+        select: true,
+        items: orderedItems,
+        itemToString,
+        itemToKey,
+        isOpen,
+        getLabelProps,
+        getToggleButtonProps,
+        getMenuProps,
+        getItemProps,
+        highlightedIndex,
+        selectedItem,
+        selectedItems,
+        disabledItems,
+        setDisabledItems,
+        setForceCloseOnSelectItems,
+        setForceClearInputValueOnSelectItems,
+        getSelectedItemProps,
+        getDropdownProps,
+        reset,
+        addSelectedItem,
+        removeSelectedItem,
+        setSelectedItems,
+        selectItem,
+        inputValue,
+        isDisabled,
+        isReadOnly,
+        setIsReadOnly,
+        setIsDisabled,
+        hasDisabledPopover,
+        setHasDisabledPopover,
+        hasEmpty,
+        setHasEmpty,
+        loading,
+        referenceRef,
+        contentRef,
+        closeMenu,
+        groupBy,
+        groupToString,
+        groups,
+        listRef,
+        selectAll
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: ComboboxClassNames,
+          "data-anv": "combobox",
+          style: { ...style, ...layoutStyles },
+          ref: wrapperDivRef,
+          children: /* @__PURE__ */ jsx(
+            Popover,
+            {
+              open: !isDisabled && isOpen,
+              noPadding: true,
+              disableCaret: true,
+              fitScreen: true,
+              disableFlipFallback: true,
+              placement: "bottom-start",
+              matchReferenceWidth: !disableMatchReferenceWidth,
+              disableCloseOnClickOutside,
+              onClickOutside: handleOutsidePress,
+              minHeight: minPopoverHeight,
+              children
+            }
+          )
+        }
+      )
+    }
+  );
+};
+const ComboboxSelect = function(props) {
+  if (isMultiple(props)) {
+    return /* @__PURE__ */ jsx(SelectMultiple, { ...props });
+  } else {
+    return /* @__PURE__ */ jsx(SelectSingle, { ...props });
+  }
+};
+
+const ComboboxItemVisual = forwardRef(
+  ({
+    children,
+    disabled,
+    checked,
+    hideCheckbox,
+    rootDivProps,
+    flexProps
+  }, ref) => {
+    const checkboxClassNames = cx(checkboxStyles["checkbox"], {
+      [checkboxStyles["checkbox-checked"]]: checked
+    });
+    const listViewOptionClassNames = cx(
+      styles["listview-option"],
+      listViewStyles["listview-option"],
+      {
+        [styles["listview-option-disabled"]]: disabled
+      }
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-anv": "combobox-item",
+        ...rootDivProps,
+        className: listViewOptionClassNames,
+        children: [
+          !hideCheckbox ? /* @__PURE__ */ jsx("div", { className: cx(styles["cell"], listViewStyles["cell"]), children: /* @__PURE__ */ jsx("div", { className: checkboxStyles["wrapper"], children: /* @__PURE__ */ jsxs("div", { className: checkboxClassNames, children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked,
+                "aria-checked": checked,
+                "aria-label": "Select",
+                readOnly: true,
+                tabIndex: -1,
+                ...disabled ? { disabled: true } : {}
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: checkboxStyles["icon-wrapper"], "aria-hidden": true, children: /* @__PURE__ */ jsx(
+              Icon,
+              {
+                size: "large",
+                svg: checked ? SvgCheckBox : SvgCheckBoxOutlineBlank,
+                className: cx(checkboxStyles["icon"], {
+                  [styles["icon-disabled"]]: disabled
+                })
+              }
+            ) }),
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true })
+          ] }) }) }) : null,
+          /* @__PURE__ */ jsx(Flex, { grow: 1, shrink: 1, ...flexProps, children })
+        ]
+      }
+    );
+  }
+);
+ComboboxItemVisual.displayName = "ComboboxItemVisual";
+
+const ComboboxSelectAll = function({ className }) {
+  const {
+    getItemProps,
+    setForceCloseOnSelectItems,
+    highlightedIndex,
+    items,
+    selectAll
+  } = useCombobox();
+  const item = SELECT_ALL;
+  const index = items.indexOf(item);
+  const ref = useRef(null);
+  useEffect(() => {
+    return () => {
+      setForceCloseOnSelectItems((forceCloseOnSelectItems) => {
+        if (forceCloseOnSelectItems.includes(item)) {
+          return forceCloseOnSelectItems.filter(
+            (prevItem) => prevItem !== item
+          );
+        } else {
+          return forceCloseOnSelectItems;
+        }
+      });
+    };
+  }, [item, setForceCloseOnSelectItems]);
+  return /* @__PURE__ */ jsx(
+    ComboboxItemVisual,
+    {
+      ref,
+      rootDivProps: getItemProps({
+        item: SELECT_ALL,
+        index,
+        "aria-selected": highlightedIndex === index,
+        className: cx(styles["select-all"], className)
+      }),
+      hideCheckbox: false,
+      disabled: false,
+      checked: !!selectAll?.isChecked,
+      children: selectAll?.label
+    },
+    "select-all"
+  );
+};
+
+const ComboboxGroupContext = createContext(null);
+const useComboboxGroupContext = () => useContext(ComboboxGroupContext);
+
+const ComboboxGroupList = function({
+  children,
+  ...rest
+}) {
+  const {
+    getMenuProps,
+    multiple,
+    items,
+    hasAddNew = false,
+    hasEmpty,
+    loading,
+    selectAll,
+    listRef
+  } = useCombobox();
+  const scrollSentinelRef = useRef(null);
+  const [isScrolled, setIsScrolled] = useState(false);
+  const { key: groupKey } = useComboboxGroupContext() ?? {};
+  const isAGroup = !!groupKey;
+  useEffect(() => {
+    if (!scrollSentinelRef.current) return;
+    const intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (!entry.isIntersecting) {
+            setIsScrolled(true);
+          } else {
+            setIsScrolled(false);
+          }
+        });
+      },
+      { threshold: 0 }
+    );
+    intersectionObserver.observe(scrollSentinelRef.current);
+    return () => {
+      intersectionObserver.disconnect();
+    };
+  }, [scrollSentinelRef, setIsScrolled]);
+  if (isAGroup) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  if (multiple) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "ul",
+        {
+          ...getMenuProps(rest),
+          ref: listRef,
+          "data-anv": "combobox-list",
+          className: cx(styles["listview"], listViewStyles["listview"], {
+            [styles.scrolled]: isScrolled
+          }),
+          style: {
+            display: items.length || hasAddNew ? void 0 : "none"
+          },
+          children: [
+            /* @__PURE__ */ jsx("div", { ref: scrollSentinelRef, className: styles["scroll-sentinel"] }),
+            !loading && selectAll && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(ComboboxSelectAll, {}),
+              /* @__PURE__ */ jsx(Divider, {})
+            ] }),
+            children
+          ]
+        }
+      ),
+      loading ? /* @__PURE__ */ jsx("div", { className: styles["empty"], children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Spinner, { size: "small" }) }) }) : !items.length && !hasEmpty ? /* @__PURE__ */ jsx("div", { className: styles["empty"], children: /* @__PURE__ */ jsx(Text, { subdued: true, size: "small", children: "No match found" }) }) : null
+    ] });
+  } else {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "ul",
+        {
+          ...getMenuProps(rest),
+          ref: listRef,
+          "data-anv": "combobox-list",
+          className: listboxStyles["listbox"],
+          style: {
+            display: items.length || hasAddNew ? void 0 : "none"
+          },
+          children
+        }
+      ),
+      loading ? /* @__PURE__ */ jsx("div", { className: styles["empty"], children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Spinner, { size: "small" }) }) }) : !items.length && !hasEmpty ? /* @__PURE__ */ jsx("div", { className: styles["empty"], children: /* @__PURE__ */ jsx(Text, { subdued: true, size: "small", children: "No match found" }) }) : null
+    ] });
+  }
+};
+
+const ComboboxGroupProvider = ComboboxGroupContext.Provider;
+
+const ComboboxContentElement = function({
+  children,
+  className,
+  disablePopover = false,
+  ...rest
+}) {
+  const {
+    items,
+    itemToKey,
+    inputValue,
+    selectedItem,
+    selectedItems,
+    setHasDisabledPopover,
+    getMenuProps,
+    getItemProps,
+    isDisabled,
+    isReadOnly,
+    contentRef,
+    closeMenu,
+    groups
+  } = useCombobox();
+  const inlineContentClassNames = cx(styles["popover-content"], className);
+  const popoverContentClassNames = cx(className);
+  useEffect(() => {
+    setHasDisabledPopover(disablePopover);
+    return () => {
+      setHasDisabledPopover(false);
+    };
+  }, [disablePopover, setHasDisabledPopover]);
+  const context = usePopoverContext();
+  const handleBlur = (_e) => {
+    if (context?.controlled) return;
+    context?.popover.close?.(closeMenu);
+  };
+  const resolveChildren = (groupItems) => children?.({
+    items: groupItems,
+    inputValue,
+    selectedItem,
+    getMenuProps,
+    getItemProps,
+    listProps: {
+      ...getMenuProps({}, { suppressRefError: true }),
+      style: {
+        display: groupItems.length ? void 0 : "none",
+        overflow: "auto"
+      }
+    },
+    options: groupItems.map((item, index) => ({
+      optionProps: {
+        ...getItemProps({
+          item,
+          index
+        }),
+        tabIndex: disablePopover ? -1 : void 0,
+        selected: itemToKey(selectedItem) === itemToKey(item) || selectedItems.some(
+          (selectedItem2) => itemToKey(selectedItem2) === itemToKey(item)
+        ),
+        disabled: !!isDisabled || !!isReadOnly
+        // also see "isItemDisabled" function
+      },
+      item,
+      index
+    }))
+  });
+  const id = useId();
+  const filterAlreadyRenderedItems = (items2) => {
+    return items2.filter((item) => item !== ADD_NEW && item !== SELECT_ALL);
+  };
+  return disablePopover ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      className: inlineContentClassNames,
+      ref: contentRef,
+      onBlur: handleBlur,
+      children: groups?.length ? /* @__PURE__ */ jsx(ComboboxGroupList, { children: groups.map((group, i) => /* @__PURE__ */ jsxs(ComboboxGroupProvider, { value: group, children: [
+        i !== 0 && /* @__PURE__ */ jsx(Divider, {}),
+        /* @__PURE__ */ jsxs(
+          "li",
+          {
+            "aria-labelledby": `${id}-group-${group.key}`,
+            className: cx(styles["group"], listboxStyles["listbox"]),
+            "data-anv": "combobox-group",
+            role: "group",
+            children: [
+              group.label != null ? /* @__PURE__ */ jsx(
+                Text,
+                {
+                  className: styles["group-title"],
+                  id: `${id}-group-${group.key}`,
+                  variant: "eyebrow",
+                  children: group.label
+                }
+              ) : null,
+              /* @__PURE__ */ jsx("ul", { className: styles["group-list"], children: resolveChildren(filterAlreadyRenderedItems(group.items)) })
+            ]
+          }
+        )
+      ] }, group.key)) }) : resolveChildren(filterAlreadyRenderedItems(items))
+    }
+  ) : /* @__PURE__ */ jsx(
+    Popover.Content,
+    {
+      "data-anv": "combobox-content",
+      ...rest,
+      className: popoverContentClassNames,
+      ref: getMenuProps({ ref: contentRef }, { suppressRefError: true }).ref,
+      tabIndex: -1,
+      onBlur: handleBlur,
+      children: groups?.length ? /* @__PURE__ */ jsx(ComboboxGroupList, { children: groups.map((group, i) => /* @__PURE__ */ jsxs(ComboboxGroupProvider, { value: group, children: [
+        i !== 0 && /* @__PURE__ */ jsx(Divider, {}),
+        /* @__PURE__ */ jsxs(
+          "li",
+          {
+            "aria-labelledby": `${id}-group-${group.key}`,
+            className: cx(styles["group"], listboxStyles["listbox"]),
+            "data-anv": "combobox-group",
+            role: "group",
+            children: [
+              group.label != null ? /* @__PURE__ */ jsx(
+                Text,
+                {
+                  className: styles["group-title"],
+                  id: `${id}-group-${group.key}`,
+                  variant: "eyebrow",
+                  children: group.label
+                }
+              ) : null,
+              /* @__PURE__ */ jsx("ul", { className: styles["group-list"], children: resolveChildren(filterAlreadyRenderedItems(group.items)) })
+            ]
+          }
+        )
+      ] }, group.key)) }) : resolveChildren(filterAlreadyRenderedItems(items))
+    }
+  );
+};
+const ComboboxContent = function({
+  children,
+  className,
+  disablePopover = false,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    ComboboxContentElement,
+    {
+      className,
+      disablePopover,
+      ...rest,
+      children
+    }
+  );
+};
+
+const ComboboxTrigger = function(props) {
+  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
+  const {
+    // variant: variantProp = "combobox",
+    className,
+    style,
+    label,
+    size,
+    error,
+    hint,
+    description,
+    required,
+    moreInfo,
+    prefix,
+    suffix,
+    maxRows,
+    selectedItemProps = () => ({}),
+    id,
+    placeholder,
+    disabled,
+    readOnly,
+    onClear,
+    ...rest
+  } = componentProps;
+  const {
+    select,
+    disableClearSelection,
+    itemToString,
+    getLabelProps,
+    getInputProps,
+    getToggleButtonProps,
+    getMenuProps,
+    selectedItem,
+    selectedItems,
+    getSelectedItemProps,
+    getDropdownProps,
+    reset,
+    removeSelectedItem,
+    selectItem,
+    inputValue,
+    isDisabled,
+    isReadOnly,
+    referenceRef,
+    closeMenu,
+    setIsDisabled,
+    setIsReadOnly
+  } = useCombobox();
+  const context = usePopoverContext();
+  useLayoutEffect(() => {
+    if (typeof disabled === "undefined") return;
+    setIsDisabled(disabled);
+  }, [disabled, setIsDisabled]);
+  useLayoutEffect(() => {
+    if (typeof readOnly === "undefined") return;
+    setIsReadOnly(readOnly);
+  }, [readOnly, setIsReadOnly]);
+  const handleBlur = (e) => {
+    const target = e.relatedTarget ?? e.target;
+    const focusedOnReference = context?.invoker.ref.current && context?.invoker.ref.current.contains(target);
+    const focusedOnContent = context?.popover.ref.current && context?.popover.ref.current.contains(target) || context?.popover.element?.contains(target);
+    if (!focusedOnReference && !focusedOnContent || !e.relatedTarget) {
+      closeMenu();
+    }
+  };
+  const labelProps = getLabelProps({
+    required,
+    moreInfo
+  });
+  const inputRef = useRef(null);
+  const inputWrapperProps = {
+    ...select ? {
+      ...getToggleButtonProps({
+        disabled: isDisabled,
+        readOnly: isReadOnly,
+        id,
+        ref: context?.invoker.ref
+      })
+    } : {
+      onClick: () => inputRef.current?.focus(),
+      ref: context?.invoker.ref
+    }
+  };
+  const toggleButtonProps = select ? {} : getToggleButtonProps();
+  const handleClearButtonClick = (_e) => {
+    if (onClear) {
+      onClear();
+    } else {
+      if (reset != null) {
+        reset();
+      } else {
+        selectItem(null);
+      }
+    }
+  };
+  const styleCombined = {
+    ...style,
+    ...layoutStyles
+  };
+  return /* @__PURE__ */ jsx(
+    SelectTriggerBase,
+    {
+      "data-anv": select ? "combobox-select-trigger" : "combobox-search-field",
+      className,
+      style: styleCombined,
+      label,
+      size,
+      error,
+      hint,
+      description,
+      prefix,
+      suffix,
+      maxRows,
+      selectedItemProps,
+      placeholder,
+      labelProps,
+      inputWrapperProps,
+      toggleButtonProps,
+      itemToString,
+      removeSelectedItem,
+      variant: select ? "select" : "combobox",
+      disableClearSelection,
+      selectedItem,
+      selectedItems,
+      inputValue,
+      disabled: isDisabled,
+      readOnly: isReadOnly,
+      referenceRef,
+      onBlur: handleBlur,
+      onClearButtonClick: handleClearButtonClick,
+      chipProps: (item, index) => {
+        if (getSelectedItemProps != null) {
+          const { onClick: _, ...chipProps } = getSelectedItemProps({
+            selectedItem: item,
+            index
+          });
+          return chipProps;
+        }
+        return {};
+      },
+      inputProps: select ? {
+        ...getDropdownProps != null ? getDropdownProps({
+          required,
+          preventKeyAction: false
+        }) : {
+          required
+        },
+        ["aria-expanded"]: context?.invoker["aria-expanded"],
+        ["aria-details"]: getMenuProps().id,
+        ["aria-haspopup"]: context?.invoker["aria-haspopup"]
+      } : {
+        ["aria-expanded"]: context?.invoker["aria-expanded"],
+        ["aria-details"]: getMenuProps().id,
+        ["aria-haspopup"]: context?.invoker["aria-haspopup"],
+        ["aria-controls"]: getMenuProps().id,
+        ...getDropdownProps != null && getInputProps != null ? getInputProps(
+          getDropdownProps({
+            ...rest,
+            disabled: isDisabled,
+            readOnly: isReadOnly,
+            required,
+            autoComplete: "off",
+            id,
+            preventKeyAction: false,
+            ref: inputRef
+          })
+        ) : getInputProps != null ? getInputProps({
+          ...rest,
+          disabled: isDisabled,
+          readOnly: isReadOnly,
+          required,
+          autoComplete: "off",
+          id,
+          ref: inputRef
+        }) : {}
+      }
+    }
+  );
+};
+const ComboboxSearchFieldElement = function({
+  onClear,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(ComboboxTrigger, { onClear, ...props, variant: "combobox" });
+};
+const ComboboxSearchField = function({
+  prefix: prefixProp,
+  ...props
+}) {
+  const data = {
+    label: childrenToString(props.label),
+    size: props.size,
+    required: props.required,
+    moreInfo: props.moreInfo,
+    description: childrenToString(props.description),
+    hint: props.hint,
+    labelProps: props.labelProps
+  };
+  const trackingId = useTrackingId({
+    name: "ComboboxSearchField",
+    data,
+    hasOverride: !!props["data-tracking-id"]
+  });
+  const prefix = prefixProp == null || typeof prefixProp === "string" ? prefixProp : "icon" in prefixProp ? /* @__PURE__ */ jsx(Icon, { ...prefixProp.icon }) : "avatar" in prefixProp ? /* @__PURE__ */ jsx(
+    Avatar,
+    {
+      ...prefixProp.avatar,
+      size: props.size === "small" ? "small" : "medium"
+    }
+  ) : prefixProp;
+  return /* @__PURE__ */ jsx(
+    ComboboxSearchFieldElement,
+    {
+      "data-tracking-id": trackingId,
+      ...props,
+      prefix
+    }
+  );
+};
+const ComboboxSelectTriggerElement = function(props) {
+  return /* @__PURE__ */ jsx(ComboboxTrigger, { ...props, variant: "select" });
+};
+const ComboboxSelectTrigger = function({
+  prefix: prefixProp,
+  ...props
+}) {
+  const data = {
+    label: childrenToString(props.label),
+    size: props.size,
+    required: props.required,
+    moreInfo: props.moreInfo,
+    description: childrenToString(props.description),
+    hint: props.hint,
+    labelProps: props.labelProps
+  };
+  const trackingId = useTrackingId({
+    name: "ComboboxSearchField",
+    data,
+    hasOverride: !!props["data-tracking-id"]
+  });
+  const prefix = prefixProp == null || typeof prefixProp === "string" ? prefixProp : "icon" in prefixProp ? /* @__PURE__ */ jsx(Icon, { ...prefixProp.icon }) : "avatar" in prefixProp ? /* @__PURE__ */ jsx(
+    Avatar,
+    {
+      ...prefixProp.avatar,
+      size: props.size === "small" ? "small" : "medium"
+    }
+  ) : prefixProp;
+  return /* @__PURE__ */ jsx(
+    ComboboxSelectTriggerElement,
+    {
+      "data-tracking-id": trackingId,
+      ...props,
+      prefix
+    }
+  );
+};
+
+const CoreComboboxItemElement = function({
+  children,
+  disabled: disabledProp,
+  item,
+  index: indexProp,
+  hideCheckbox,
+  forceCloseOnSelect,
+  forceClearInputValueOnSelect,
+  alignItems,
+  justifyItems,
+  alignContent,
+  justifyContent,
+  placeItems,
+  placeContent,
+  gap,
+  rowGap,
+  columnGap,
+  ...rest
+}) {
+  const {
+    itemToKey,
+    getItemProps,
+    multiple,
+    selectedItem,
+    selectedItems,
+    disabledItems,
+    setDisabledItems,
+    setForceCloseOnSelectItems,
+    setForceClearInputValueOnSelectItems,
+    highlightedIndex,
+    items
+  } = useCombobox();
+  const index = item === ADD_NEW && !multiple ? indexProp : items.indexOf(item);
+  const disabled = disabledProp || item && item instanceof Object && "disabled" in item && item.disabled;
+  useEffect(() => {
+    if (disabledProp && !disabledItems.includes(item)) {
+      setDisabledItems([...disabledItems, item]);
+    } else if (disabledItems.includes(item)) {
+      setDisabledItems(disabledItems.filter((prevItem) => prevItem !== item));
+    }
+    return () => {
+      if (disabledItems.includes(item)) {
+        setDisabledItems(disabledItems.filter((prevItem) => prevItem !== item));
+      }
+    };
+  }, [item, disabledProp, setDisabledItems]);
+  useEffect(() => {
+    if (forceCloseOnSelect) {
+      setForceCloseOnSelectItems((forceCloseOnSelectItems) => {
+        if (forceCloseOnSelectItems.includes(item)) {
+          return forceCloseOnSelectItems;
+        } else {
+          return [...forceCloseOnSelectItems, item];
+        }
+      });
+    }
+    return () => {
+      setForceCloseOnSelectItems((forceCloseOnSelectItems) => {
+        if (forceCloseOnSelectItems.includes(item)) {
+          return forceCloseOnSelectItems.filter(
+            (prevItem) => prevItem !== item
+          );
+        } else {
+          return forceCloseOnSelectItems;
+        }
+      });
+    };
+  }, [item, forceCloseOnSelect, setForceCloseOnSelectItems]);
+  useEffect(() => {
+    if (forceClearInputValueOnSelect) {
+      setForceClearInputValueOnSelectItems(
+        (forceClearInputValueOnSelectItems) => {
+          if (forceClearInputValueOnSelectItems.includes(item)) {
+            return forceClearInputValueOnSelectItems;
+          } else {
+            return [...forceClearInputValueOnSelectItems, item];
+          }
+        }
+      );
+    }
+    return () => {
+      setForceClearInputValueOnSelectItems(
+        (forceClearInputValueOnSelectItems) => {
+          if (forceClearInputValueOnSelectItems.includes(item)) {
+            return forceClearInputValueOnSelectItems.filter(
+              (prevItem) => prevItem !== item
+            );
+          } else {
+            return forceClearInputValueOnSelectItems;
+          }
+        }
+      );
+    };
+  }, [
+    item,
+    forceClearInputValueOnSelect,
+    setForceClearInputValueOnSelectItems
+  ]);
+  const flexProps = {
+    alignItems,
+    justifyItems,
+    alignContent,
+    justifyContent,
+    placeItems,
+    placeContent,
+    gap,
+    rowGap,
+    columnGap
+  };
+  if (multiple) {
+    const checked = selectedItems.some(
+      (selectedItem2) => itemToKey(selectedItem2) === itemToKey(item)
+    );
+    return /* @__PURE__ */ jsx(
+      ComboboxItemVisual,
+      {
+        rootDivProps: getItemProps({
+          item,
+          index,
+          "aria-selected": highlightedIndex === index,
+          ...rest
+        }),
+        disabled,
+        checked,
+        hideCheckbox: hideCheckbox || item === ADD_NEW,
+        flexProps,
+        children
+      }
+    );
+  } else {
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        ...getItemProps({
+          item,
+          index,
+          "aria-selected": highlightedIndex === index,
+          ...rest
+        }),
+        "data-anv": "combobox-item",
+        "data-checked": itemToKey(selectedItem) === itemToKey(item),
+        className: styles["item"],
+        ...disabled ? { "aria-disabled": true } : {},
+        children: [
+          /* @__PURE__ */ jsx(
+            Flex,
+            {
+              className: listboxStyles["children"],
+              grow: 1,
+              shrink: 1,
+              ...flexProps,
+              children
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              "aria-hidden": true,
+              svg: SvgCheck,
+              inherit: true,
+              style: {
+                opacity: itemToKey(selectedItem) === itemToKey(item) ? 1 : 0
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+};
+const ComboboxItemElement = function(props) {
+  return /* @__PURE__ */ jsx(CoreComboboxItemElement, { ...props });
+};
+const ComboboxItem = function(props) {
+  const data = {
+    item: props.item
+  };
+  const trackingId = useTrackingId({
+    name: "ComboboxItem",
+    data,
+    hasOverride: !!props["data-tracking-id"]
+  });
+  return /* @__PURE__ */ jsx(ComboboxItemElement, { "data-tracking-id": trackingId, ...props });
+};
+const CoreComboboxItemAddNewElement = function({
+  onSelection,
+  ...props
+}) {
+  const { items, setHasAddNew, hasExactMatch, setOnSelectItemAddNew } = useCombobox();
+  useEffect(() => {
+    setHasAddNew?.(true);
+    return () => {
+      setHasAddNew?.(false);
+    };
+  }, []);
+  useEffect(() => {
+    setOnSelectItemAddNew?.(() => onSelection);
+    return () => {
+      setOnSelectItemAddNew?.(void 0);
+    };
+  }, [setOnSelectItemAddNew, onSelection]);
+  return !hasExactMatch ? /* @__PURE__ */ jsx(
+    ComboboxItem,
+    {
+      ...props,
+      item: ADD_NEW,
+      index: items.length
+    }
+  ) : null;
+};
+const ComboboxItemAddNewElement = function(props) {
+  return /* @__PURE__ */ jsx(CoreComboboxItemAddNewElement, { ...props });
+};
+const ComboboxItemAddNew = function(props) {
+  const data = {
+    item: "add-new"
+  };
+  const trackingId = useTrackingId({
+    name: "ComboboxItemAddNew",
+    data,
+    hasOverride: !!props["data-tracking-id"]
+  });
+  return /* @__PURE__ */ jsx(ComboboxItemAddNewElement, { "data-tracking-id": trackingId, ...props });
+};
+
+const ComboboxListElement = function({
+  children,
+  ...rest
+}) {
+  const {
+    getMenuProps,
+    multiple,
+    items,
+    hasAddNew = false,
+    hasEmpty,
+    loading,
+    selectAll,
+    listRef
+  } = useCombobox();
+  const scrollSentinelRef = useRef(null);
+  const [isScrolled, setIsScrolled] = useState(false);
+  const { key: groupKey } = useComboboxGroupContext() ?? {};
+  const isAGroup = !!groupKey;
+  useEffect(() => {
+    if (!scrollSentinelRef.current) return;
+    const intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (!entry.isIntersecting) {
+            setIsScrolled(true);
+          } else {
+            setIsScrolled(false);
+          }
+        });
+      },
+      { threshold: 0 }
+    );
+    intersectionObserver.observe(scrollSentinelRef.current);
+    return () => {
+      intersectionObserver.disconnect();
+    };
+  }, [scrollSentinelRef, setIsScrolled]);
+  if (isAGroup) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  if (multiple) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "ul",
+        {
+          ...getMenuProps(rest),
+          ref: listRef,
+          "data-anv": "combobox-list",
+          className: cx(styles["listview"], listViewStyles["listview"], {
+            [styles.scrolled]: isScrolled
+          }),
+          style: {
+            display: items.length || hasAddNew ? void 0 : "none"
+          },
+          children: [
+            /* @__PURE__ */ jsx("div", { ref: scrollSentinelRef, className: styles["scroll-sentinel"] }),
+            !loading && selectAll && /* @__PURE__ */ jsx(ComboboxSelectAll, {}),
+            children
+          ]
+        }
+      ),
+      loading ? /* @__PURE__ */ jsx("div", { className: styles["empty"], children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Spinner, { size: "small" }) }) }) : !items.length && !hasEmpty ? /* @__PURE__ */ jsx("div", { className: styles["empty"], children: /* @__PURE__ */ jsx(Text, { subdued: true, size: "small", children: "No match found" }) }) : null
+    ] });
+  } else {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "ul",
+        {
+          ...getMenuProps(rest),
+          ref: listRef,
+          "data-anv": "combobox-list",
+          className: listboxStyles["listbox"],
+          style: {
+            display: items.length || hasAddNew ? void 0 : "none"
+          },
+          children
+        }
+      ),
+      loading ? /* @__PURE__ */ jsx("div", { className: styles["empty"], children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Spinner, { size: "small" }) }) }) : !items.length && !hasEmpty ? /* @__PURE__ */ jsx("div", { className: styles["empty"], children: /* @__PURE__ */ jsx(Text, { subdued: true, size: "small", children: "No match found" }) }) : null
+    ] });
+  }
+};
+const ComboboxList = function({
+  children,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(ComboboxListElement, { className, ...rest, children });
+};
+
+const ComboboxSingle = function(props) {
+  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
+  const {
+    className,
+    style,
+    children,
+    open,
+    disabled,
+    readOnly,
+    items: itemsProp,
+    itemToString: itemToStringProp,
+    itemToKey: itemToKeyProp,
+    onChange,
+    disableCloseOnClickOutside = false,
+    disableMatchReferenceWidth = false,
+    disableCloseOnSelectItem = false,
+    filterOptions,
+    disableFilter = false,
+    loading = false,
+    minPopoverHeight,
+    root,
+    onInputValueChange,
+    environment: environmentProp,
+    groupBy,
+    groupToString,
+    groupSorter,
+    ...rest
+  } = componentProps;
+  const ComboboxClassNames = cx(styles["combobox"], className);
+  const [items, setItems] = useState(itemsProp);
+  const [hasAddNew, setHasAddNew] = useState(false);
+  const [onSelectItemAddNew, setOnSelectItemAddNew] = useState(void 0);
+  const [hasExactMatch, setHasExactMatch] = useState(false);
+  const [hasDisabledPopover, setHasDisabledPopover] = useState(false);
+  const [hasEmpty, setHasEmpty] = useState(false);
+  const [disabledItems, setDisabledItems] = useState([]);
+  const [forceCloseOnSelectItems, setForceCloseOnSelectItems] = useState([]);
+  const [, setForceClearInputValueOnSelectItems] = useState([]);
+  const [isReadOnly, setIsReadOnly] = useState(readOnly);
+  const [isDisabled, setIsDisabled] = useState(disabled);
+  const referenceRef = useRef(null);
+  const contentRef = useRef(null);
+  const listRef = useRef(null);
+  const handleOutsidePress = (_e) => {
+    if (disableCloseOnClickOutside) return;
+    closeMenu();
+  };
+  const { ref: wrapperDivRef, environment } = useDownshiftEnvironment();
+  const { orderedItems: allItemsOrderedByGroup } = useGroups({
+    items: itemsProp,
+    groupBy,
+    groupToString,
+    groupSorter
+  });
+  const { groups: searchedGroups, orderedItems: searchedItemsOrderedByGroup } = useGroups({
+    items,
+    groupBy,
+    groupToString,
+    groupSorter
+  });
+  const showAddNew = hasAddNew && !hasExactMatch;
+  const combinedItems = useMemo(
+    () => showAddNew ? [...searchedItemsOrderedByGroup, ADD_NEW] : searchedItemsOrderedByGroup,
+    [searchedItemsOrderedByGroup, showAddNew]
+  );
+  const itemToString = itemToStringProp ?? defaultItemToString;
+  const itemToKey = itemToKeyProp ?? defaultItemToKey;
+  const {
+    isOpen,
+    getLabelProps,
+    getInputProps,
+    getToggleButtonProps,
+    getMenuProps,
+    getItemProps,
+    highlightedIndex,
+    selectedItem,
+    selectItem,
+    setInputValue,
+    inputValue,
+    closeMenu
+  } = useCombobox$1({
+    ...rest,
+    items: combinedItems,
+    itemToString,
+    itemToKey,
+    isOpen: open,
+    initialIsOpen: open,
+    environment: environmentProp ?? environment,
+    // NOTE: Reducer needs to be pure, side-effects should be in event handlers
+    stateReducer(state, { type, changes }) {
+      switch (type) {
+        // keep Combobox open onBlur, will call close using Popover's onOutsidePress
+        case useCombobox$1.stateChangeTypes.InputBlur:
+          return {
+            ...changes,
+            isOpen: open != null ? open : true,
+            highlightedIndex: state.highlightedIndex
+          };
+        case useCombobox$1.stateChangeTypes.InputKeyDownEnter:
+        case useCombobox$1.stateChangeTypes.ItemClick:
+          if (changes.selectedItem === ADD_NEW) {
+            const stateInputValue = state.inputValue;
+            setTimeout(() => {
+              onSelectItemAddNew?.(stateInputValue);
+            }, 250);
+            return {
+              ...changes,
+              selectedItem: state.selectedItem,
+              inputValue: ""
+            };
+          } else {
+            const forceClose = forceCloseOnSelectItems.includes(
+              changes.selectedItem
+            );
+            return {
+              ...changes,
+              isOpen: open != null ? open : forceClose ? false : disableCloseOnSelectItem ? true : changes.isOpen,
+              highlightedIndex: disableCloseOnSelectItem ? itemToString(state.selectedItem) === state.inputValue || !state.inputValue ? state.highlightedIndex : 0 : changes.highlightedIndex
+            };
+          }
+        // prevent this from closing the popover by default
+        case useCombobox$1.stateChangeTypes.InputClick:
+          return { ...changes, isOpen: open != null ? open : true };
+        default:
+          return changes;
+      }
+    },
+    onInputValueChange: onInputValueChange ?? (({ inputValue: inputValue2, type, selectedItem: selectedItem2 }) => {
+      const inputValueMatchesSelectedItem = selectedItem2 != null && inputValue2 === itemToString(selectedItem2);
+      const inputValueIsEmpty = inputValue2 == null || inputValue2 === "";
+      if (type === useCombobox$1.stateChangeTypes.InputKeyDownEnter || type === useCombobox$1.stateChangeTypes.ItemClick) {
+        setItems(allItemsOrderedByGroup);
+        setHasExactMatch(true);
+      } else if (!inputValueMatchesSelectedItem && !inputValueIsEmpty && !disableFilter) {
+        const filteredItems = matchSorter(
+          allItemsOrderedByGroup,
+          inputValue2,
+          filterOptions
+        );
+        setItems(filteredItems);
+        setHasExactMatch(
+          matchSorter(filteredItems, inputValue2, {
+            ...filterOptions,
+            threshold: matchSorter.rankings.EQUAL
+          }).length > 0
+        );
+      } else {
+        setItems(allItemsOrderedByGroup);
+        setHasExactMatch(true);
+      }
+    }),
+    onSelectedItemChange(changes) {
+      const { selectedItem: selectedItem2 } = changes;
+      if (onChange != null)
+        onChange(selectedItem2 != null ? selectedItem2 : null);
+    },
+    onIsOpenChange({ isOpen: isOpen2, inputValue: inputValue2, selectedItem: selectedItem2 }) {
+      if (isOpen2 === false) {
+        setTimeout(() => {
+          setItems(allItemsOrderedByGroup);
+          if (inputValue2 === "") {
+            selectItem(null);
+          } else {
+            setInputValue(
+              selectedItem2 != null ? itemToString(selectedItem2) : ""
+            );
+          }
+        }, 200);
+      }
+    },
+    isItemDisabled(item) {
+      if (isDisabled || isReadOnly) {
+        return !!isDisabled || !!isReadOnly;
+      }
+      if (item && item instanceof Object && "disabled" in item && item.disabled) {
+        return true;
+      }
+      if (item && item instanceof Object && "readOnly" in item && item.readOnly) {
+        return true;
+      }
+      if (disabledItems.includes(item)) {
+        return true;
+      }
+      return false;
+    }
+  });
+  const firstRenderRef = useRef(true);
+  useEffect(() => {
+    if (firstRenderRef.current === true) {
+      firstRenderRef.current = false;
+    }
+  }, []);
+  useEffect(() => {
+    setIsDisabled(disabled);
+  }, [disabled]);
+  useEffect(() => {
+    setIsReadOnly(readOnly);
+  }, [readOnly]);
+  useEffect(() => {
+    if (firstRenderRef.current) return;
+    const inputValueMatchesSelectedItem = selectedItem != null && inputValue === itemToString(selectedItem);
+    const inputValueIsEmpty = inputValue == null || inputValue === "";
+    if (!isOpen && selectedItem != null && !inputValueMatchesSelectedItem) {
+      setInputValue(itemToString(selectedItem));
+      setItems(allItemsOrderedByGroup);
+      setHasExactMatch(true);
+      return;
+    }
+    if (!isOpen && selectedItem == null && !inputValueIsEmpty) {
+      setInputValue("");
+      setItems(allItemsOrderedByGroup);
+      setHasExactMatch(true);
+      return;
+    }
+    if (!inputValueMatchesSelectedItem && !inputValueIsEmpty && !disableFilter) {
+      const filteredItems = matchSorter(
+        allItemsOrderedByGroup,
+        inputValue,
+        filterOptions
+      );
+      setItems(filteredItems);
+      setHasExactMatch(
+        matchSorter(filteredItems, inputValue, {
+          ...filterOptions,
+          threshold: matchSorter.rankings.EQUAL
+        }).length > 0
+      );
+    } else {
+      setItems(allItemsOrderedByGroup);
+      setHasExactMatch(true);
+    }
+  }, [allItemsOrderedByGroup, selectedItem, inputValue, isOpen]);
+  const contextValue = useMemo(
+    () => ({
+      multiple: false,
+      select: false,
+      items: searchedItemsOrderedByGroup,
+      itemToString,
+      itemToKey,
+      isOpen,
+      getLabelProps,
+      getInputProps,
+      getToggleButtonProps,
+      getMenuProps,
+      getItemProps,
+      highlightedIndex,
+      selectedItem,
+      selectedItems: [],
+      disabledItems,
+      setDisabledItems,
+      setForceCloseOnSelectItems,
+      setForceClearInputValueOnSelectItems,
+      getSelectedItemProps: void 0,
+      getDropdownProps: void 0,
+      selectItem,
+      inputValue,
+      isDisabled,
+      isReadOnly,
+      setIsReadOnly,
+      setIsDisabled,
+      hasDisabledPopover,
+      setHasDisabledPopover,
+      hasEmpty,
+      setHasEmpty,
+      hasAddNew,
+      setHasAddNew,
+      onSelectItemAddNew,
+      setOnSelectItemAddNew,
+      hasExactMatch,
+      setHasExactMatch,
+      loading,
+      referenceRef,
+      contentRef,
+      listRef,
+      closeMenu,
+      groupBy,
+      groupToString,
+      groups: searchedGroups
+    }),
+    [
+      searchedItemsOrderedByGroup,
+      itemToString,
+      itemToKey,
+      isOpen,
+      getLabelProps,
+      getInputProps,
+      getToggleButtonProps,
+      getMenuProps,
+      getItemProps,
+      highlightedIndex,
+      selectedItem,
+      disabledItems,
+      setDisabledItems,
+      setForceCloseOnSelectItems,
+      setForceClearInputValueOnSelectItems,
+      selectItem,
+      inputValue,
+      isDisabled,
+      isReadOnly,
+      setIsReadOnly,
+      setIsDisabled,
+      hasDisabledPopover,
+      setHasDisabledPopover,
+      hasEmpty,
+      setHasEmpty,
+      hasAddNew,
+      setHasAddNew,
+      onSelectItemAddNew,
+      setOnSelectItemAddNew,
+      hasExactMatch,
+      setHasExactMatch,
+      loading,
+      referenceRef,
+      contentRef,
+      listRef,
+      closeMenu,
+      groupBy,
+      groupToString,
+      searchedGroups
+    ]
+  );
+  return /* @__PURE__ */ jsx(ComboboxContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: ComboboxClassNames,
+      "data-anv": "combobox",
+      style: { ...style, ...layoutStyles },
+      ref: wrapperDivRef,
+      children: /* @__PURE__ */ jsx(
+        Popover,
+        {
+          open: isOpen,
+          noPadding: true,
+          disableCaret: true,
+          fitScreen: true,
+          disableFlipFallback: true,
+          placement: "bottom-start",
+          matchReferenceWidth: !disableMatchReferenceWidth,
+          disableCloseOnClickOutside,
+          onClickOutside: handleOutsidePress,
+          minHeight: minPopoverHeight,
+          children
+        }
+      )
+    }
+  ) });
+};
+const ComboboxMultiple = function(props) {
+  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
+  const {
+    className,
+    style,
+    children,
+    open,
+    items: itemsProp,
+    itemToString: itemToStringProp,
+    itemToKey: itemToKeyProp,
+    onChange,
+    onSelectedItemsChange,
+    onStateChange,
+    disableCloseOnClickOutside = false,
+    disableMatchReferenceWidth = false,
+    disableCloseOnSelectItem = false,
+    disableClearInputValueOnSelectItem = false,
+    filterOptions,
+    disableFilter = false,
+    loading = false,
+    minPopoverHeight,
+    root,
+    disabled,
+    readOnly,
+    stateReducer: _,
+    onInputValueChange,
+    initialSelectedItems,
+    initialActiveIndex,
+    defaultSelectedItems,
+    defaultActiveIndex,
+    activeIndex: activeIndexProp,
+    selectedItems: selectedItemsProp,
+    environment: environmentProp,
+    selectAll,
+    groupBy,
+    groupToString,
+    groupSorter,
+    ...rest
+  } = componentProps;
+  const ComboboxClassNames = cx(styles["combobox"], className);
+  const [items, setItems] = useState(itemsProp);
+  const [hasAddNew, setHasAddNew] = useState(false);
+  const [onSelectItemAddNew, setOnSelectItemAddNew] = useState(void 0);
+  const [hasExactMatch, setHasExactMatch] = useState(false);
+  const [hasDisabledPopover, setHasDisabledPopover] = useState(false);
+  const [hasEmpty, setHasEmpty] = useState(false);
+  const [disabledItems, setDisabledItems] = useState([]);
+  const [forceCloseOnSelectItems, setForceCloseOnSelectItems] = useState([]);
+  const [
+    forceClearInputValueOnSelectItems,
+    setForceClearInputValueOnSelectItems
+  ] = useState([]);
+  const [isReadOnly, setIsReadOnly] = useState(readOnly);
+  const [isDisabled, setIsDisabled] = useState(disabled);
+  let storedSetInputValue = void 0;
+  const referenceRef = useRef(null);
+  const contentRef = useRef(null);
+  const listRef = useRef(null);
+  const handleOutsidePress = (_e) => {
+    if (disableCloseOnClickOutside) return;
+    closeMenu();
+  };
+  const { ref: wrapperDivRef, environment } = useDownshiftEnvironment();
+  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(() => {
+    let items2 = searchedItemsOrderedByGroup;
+    if (showAddNew) {
+      items2 = [...items2, ADD_NEW];
+    }
+    if (selectAll) {
+      items2 = [SELECT_ALL, ...items2];
+    }
+    return items2;
+  }, [searchedItemsOrderedByGroup, showAddNew, selectAll]);
+  const itemToString = itemToStringProp ?? defaultItemToString;
+  const itemToKey = itemToKeyProp ?? defaultItemToKey;
+  const {
+    getSelectedItemProps,
+    getDropdownProps,
+    reset,
+    selectedItems,
+    addSelectedItem,
+    removeSelectedItem,
+    setSelectedItems
+  } = useMultipleSelection({
+    itemToKey,
+    initialSelectedItems,
+    initialActiveIndex,
+    defaultSelectedItems,
+    defaultActiveIndex,
+    activeIndex: activeIndexProp,
+    selectedItems: selectedItemsProp,
+    environment: environmentProp ?? environment,
+    stateReducer(state, { type, changes }) {
+      switch (type) {
+        // the Chip itself will handle "Backspace" and "Delete"
+        // just return previous state
+        case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace:
+        case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete:
+          return state;
+        case useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem:
+          return { ...changes, activeIndex: -1 };
+        case useMultipleSelection.stateChangeTypes.FunctionReset:
+          return { ...changes, selectedItems: [] };
+        default:
+          return changes;
+      }
+    },
+    onStateChange(changes) {
+      const { type } = changes;
+      switch (type) {
+        case useMultipleSelection.stateChangeTypes.FunctionReset:
+          storedSetInputValue?.("");
+          break;
+      }
+      onStateChange?.(changes);
+    },
+    onSelectedItemsChange(changes) {
+      const { selectedItems: selectedItems2 } = changes;
+      if (onChange != null) onChange(selectedItems2);
+      if (onSelectedItemsChange != null) onSelectedItemsChange(changes);
+    }
+  });
+  const {
+    isOpen,
+    getLabelProps,
+    getInputProps,
+    getToggleButtonProps,
+    getMenuProps,
+    getItemProps,
+    highlightedIndex,
+    selectedItem,
+    selectItem,
+    setInputValue,
+    inputValue,
+    closeMenu
+  } = useCombobox$1({
+    ...rest,
+    items: combinedItems,
+    itemToString,
+    itemToKey,
+    selectedItem: null,
+    isOpen: open,
+    initialIsOpen: open,
+    environment: environmentProp ?? environment,
+    // NOTE: Reducer needs to be pure, side-effects should be in event handlers
+    stateReducer(state, { type, changes }) {
+      switch (type) {
+        // keep Combobox open onBlur, will call close using Popover's onOutsidePress
+        case useCombobox$1.stateChangeTypes.InputBlur:
+          return {
+            ...changes,
+            inputValue: state.inputValue,
+            selectedItem: null,
+            isOpen: open != null ? open : true,
+            highlightedIndex: state.highlightedIndex
+          };
+        case useCombobox$1.stateChangeTypes.InputKeyDownEnter:
+        case useCombobox$1.stateChangeTypes.ItemClick:
+          if (changes.selectedItem === ADD_NEW) {
+            const stateInputValue = state.inputValue;
+            setTimeout(() => {
+              onSelectItemAddNew?.(stateInputValue);
+            }, 250);
+            return {
+              ...changes,
+              selectedItem: state.selectedItem,
+              inputValue: ""
+            };
+          } else if (changes.selectedItem === SELECT_ALL) {
+            selectAll?.onSelection();
+            return {
+              ...changes,
+              selectedItem: null
+            };
+          } else {
+            const forceClose = forceCloseOnSelectItems.includes(
+              changes.selectedItem
+            );
+            const forceClearInputValue = forceClearInputValueOnSelectItems.includes(
+              changes.selectedItem
+            );
+            return {
+              ...changes,
+              isOpen: open != null ? open : forceClose ? false : disableCloseOnSelectItem ? true : changes.isOpen,
+              highlightedIndex: forceClearInputValue ? 0 : disableCloseOnSelectItem ? disableClearInputValueOnSelectItem || !state.inputValue ? state.highlightedIndex : 0 : changes.highlightedIndex,
+              inputValue: forceClearInputValue ? "" : disableClearInputValueOnSelectItem ? state.inputValue : ""
+            };
+          }
+        // prevent this from closing the popover by default
+        case useCombobox$1.stateChangeTypes.InputClick:
+          return { ...changes, isOpen: open != null ? open : true };
+        // prevent this from clearing the input value by default
+        case useCombobox$1.stateChangeTypes.ControlledPropUpdatedSelectedItem:
+          return { ...changes, inputValue: state.inputValue };
+        default:
+          return changes;
+      }
+    },
+    onStateChange(changes) {
+      const { type, selectedItem: newSelectedItem } = changes;
+      switch (type) {
+        case useCombobox$1.stateChangeTypes.InputKeyDownEnter:
+        case useCombobox$1.stateChangeTypes.ItemClick:
+        case useCombobox$1.stateChangeTypes.InputBlur:
+          if (newSelectedItem != null) {
+            const itemAlreadySelected = selectedItems.some(
+              (item) => itemToKey(item) === itemToKey(newSelectedItem)
+            );
+            if (itemAlreadySelected) {
+              removeSelectedItem(newSelectedItem);
+            } else {
+              addSelectedItem(newSelectedItem);
+            }
+          }
+          break;
+      }
+      onStateChange?.(changes);
+    },
+    onInputValueChange: onInputValueChange ?? (({ inputValue: inputValue2, ...changes }) => {
+      const { type, selectedItem: selectedItem2 } = changes;
+      const inputValueMatchesSelectedItem = selectedItem2 != null && inputValue2 === itemToString(selectedItem2);
+      const inputValueIsEmpty = inputValue2 == null || inputValue2 === "";
+      if (type === useCombobox$1.stateChangeTypes.InputKeyDownEnter || type === useCombobox$1.stateChangeTypes.ItemClick) {
+        setItems(allItemsOrderedByGroup);
+        setHasExactMatch(true);
+      } else if (!inputValueMatchesSelectedItem && !inputValueIsEmpty && !disableFilter) {
+        const filteredItems = matchSorter(
+          allItemsOrderedByGroup,
+          inputValue2,
+          filterOptions
+        );
+        setItems(filteredItems);
+        setHasExactMatch(
+          matchSorter(filteredItems, inputValue2, {
+            ...filterOptions,
+            threshold: matchSorter.rankings.EQUAL
+          }).length > 0
+        );
+      } else {
+        setItems(allItemsOrderedByGroup);
+        setHasExactMatch(true);
+      }
+    }),
+    onIsOpenChange({ isOpen: isOpen2 }) {
+      if (isOpen2 === false) {
+        setTimeout(() => {
+          setInputValue("");
+          setItems(allItemsOrderedByGroup);
+        }, 200);
+      }
+    },
+    isItemDisabled(item) {
+      if (isDisabled || isReadOnly) {
+        return !!isDisabled || !!isReadOnly;
+      }
+      if (item && item instanceof Object && "disabled" in item && item.disabled) {
+        return true;
+      }
+      if (item && item instanceof Object && "readOnly" in item && item.readOnly) {
+        return true;
+      }
+      if (disabledItems.includes(item)) {
+        return true;
+      }
+      return false;
+    },
+    onHighlightedIndexChange(changes) {
+      if (selectAll && changes.highlightedIndex === 0 && [
+        useCombobox$1.stateChangeTypes.InputKeyDownHome,
+        useCombobox$1.stateChangeTypes.InputKeyDownEnd,
+        useCombobox$1.stateChangeTypes.InputKeyDownArrowDown,
+        useCombobox$1.stateChangeTypes.InputKeyDownArrowUp,
+        useCombobox$1.stateChangeTypes.InputKeyDownPageDown,
+        useCombobox$1.stateChangeTypes.InputKeyDownPageUp
+      ].includes(changes.type) && listRef.current) {
+        const scrollParent = getScrollParent(listRef.current);
+        if (scrollParent) {
+          scrollParent.scrollTop = 0;
+        }
+      }
+    }
+  });
+  storedSetInputValue = setInputValue;
+  const firstRenderRef = useRef(true);
+  useEffect(() => {
+    if (firstRenderRef.current === true) {
+      firstRenderRef.current = false;
+    }
+  }, []);
+  useEffect(() => {
+    setIsDisabled(disabled);
+  }, [disabled]);
+  useEffect(() => {
+    setIsReadOnly(readOnly);
+  }, [readOnly]);
+  useEffect(() => {
+    if (firstRenderRef.current) return;
+    setTimeout(() => {
+      const inputValueIsEmpty = inputValue == null || inputValue === "";
+      if (!inputValueIsEmpty && !disableFilter) {
+        const filteredItems = matchSorter(itemsProp, inputValue, filterOptions);
+        setItems(filteredItems);
+        setHasExactMatch(
+          matchSorter(filteredItems, inputValue, {
+            ...filterOptions,
+            threshold: matchSorter.rankings.EQUAL
+          }).length > 0
+        );
+      } else {
+        setItems(itemsProp);
+        setHasExactMatch(true);
+      }
+    }, 200);
+  }, [itemsProp]);
+  const contextValue = useMemo(
+    () => ({
+      multiple: true,
+      select: false,
+      items: combinedItems,
+      itemToString,
+      itemToKey,
+      isOpen,
+      getLabelProps,
+      getInputProps,
+      getToggleButtonProps,
+      getMenuProps,
+      getItemProps,
+      highlightedIndex,
+      selectedItem,
+      selectedItems,
+      disabledItems,
+      setDisabledItems,
+      setForceCloseOnSelectItems,
+      setForceClearInputValueOnSelectItems,
+      getSelectedItemProps,
+      getDropdownProps,
+      reset,
+      addSelectedItem,
+      removeSelectedItem,
+      setSelectedItems,
+      selectItem,
+      inputValue,
+      isDisabled,
+      isReadOnly,
+      setIsReadOnly,
+      setIsDisabled,
+      hasDisabledPopover,
+      setHasDisabledPopover,
+      hasEmpty,
+      setHasEmpty,
+      hasAddNew,
+      setHasAddNew,
+      onSelectItemAddNew,
+      setOnSelectItemAddNew,
+      hasExactMatch,
+      setHasExactMatch,
+      loading,
+      referenceRef,
+      contentRef,
+      listRef,
+      closeMenu,
+      groupBy,
+      groupToString,
+      groups: searchedGroups,
+      selectAll
+    }),
+    [
+      combinedItems,
+      itemToString,
+      itemToKey,
+      isOpen,
+      getLabelProps,
+      getInputProps,
+      getToggleButtonProps,
+      getMenuProps,
+      getItemProps,
+      highlightedIndex,
+      selectedItem,
+      selectedItems,
+      disabledItems,
+      setDisabledItems,
+      setForceCloseOnSelectItems,
+      setForceClearInputValueOnSelectItems,
+      getSelectedItemProps,
+      getDropdownProps,
+      reset,
+      addSelectedItem,
+      removeSelectedItem,
+      setSelectedItems,
+      selectItem,
+      inputValue,
+      isDisabled,
+      isReadOnly,
+      setIsReadOnly,
+      setIsDisabled,
+      hasDisabledPopover,
+      setHasDisabledPopover,
+      hasEmpty,
+      setHasEmpty,
+      hasAddNew,
+      setHasAddNew,
+      onSelectItemAddNew,
+      setOnSelectItemAddNew,
+      hasExactMatch,
+      setHasExactMatch,
+      loading,
+      referenceRef,
+      contentRef,
+      listRef,
+      closeMenu,
+      groupBy,
+      groupToString,
+      searchedGroups,
+      selectAll
+    ]
+  );
+  return /* @__PURE__ */ jsx(ComboboxContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: ComboboxClassNames,
+      "data-anv": "combobox",
+      style: { ...style, ...layoutStyles },
+      ref: wrapperDivRef,
+      children: /* @__PURE__ */ jsx(
+        Popover,
+        {
+          open: !isDisabled && isOpen,
+          noPadding: true,
+          disableCaret: true,
+          fitScreen: true,
+          disableFlipFallback: true,
+          placement: "bottom-start",
+          matchReferenceWidth: !disableMatchReferenceWidth,
+          disableCloseOnClickOutside,
+          onClickOutside: handleOutsidePress,
+          minHeight: minPopoverHeight,
+          children
+        }
+      )
+    }
+  ) });
+};
+const Combobox = Object.assign(
+  function ComboboxInner(props) {
+    if (isMultiple(props)) {
+      return /* @__PURE__ */ jsx(ComboboxMultiple, { ...props });
+    } else {
+      return /* @__PURE__ */ jsx(ComboboxSingle, { ...props });
+    }
+  },
+  {
+    /**
+     * ComboboxSelect component for selecting items from a predefined list.
+     *
+     * Features:
+     * - Single and multiple item selection from predefined options
+     * - Dropdown-style selection interface
+     * - Grouping support with custom group labels and sorting
+     * - Loading states with spinner indicators
+     * - Disabled and read-only states
+     * - Customizable popover behavior and positioning
+     * - Full accessibility support with ARIA attributes
+     * - Keyboard navigation support
+     * - Layout utility props for positioning and spacing
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <Combobox.Select
+     *   items={items}
+     *   itemToString={(item) => item.name}
+     *   onChange={setSelectedItem}
+     * >
+     *   <Combobox.SelectTrigger label="Select an item" />
+     *   <Combobox.Content>
+     *     {({ items }) => (
+     *       <Combobox.List>
+     *         {items.map((item, i) => (
+     *           <Combobox.Item key={item.id} item={item} index={i}>
+     *             {item.name}
+     *           </Combobox.Item>
+     *         ))}
+     *       </Combobox.List>
+     *     )}
+     *   </Combobox.Content>
+     * </Combobox.Select>
+     */
+    Select: ComboboxSelect,
+    /**
+     * ComboboxSearchField component for the search input field.
+     *
+     * Features:
+     * - Search input with clear button functionality
+     * - Supports multiple selection with chip display
+     * - Handles keyboard navigation and accessibility
+     * - Integrates with combobox state management
+     * - Supports custom styling and layout
+     * - Manages focus and blur events
+     * - Enhanced prefix support for icons and avatars
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <Combobox.SearchField
+     *   label="Search users"
+     *   placeholder="Type to search..."
+     *   prefix={{ icon: { svg: SearchIcon } }}
+     * />
+     */
+    SearchField: ComboboxSearchField,
+    /**
+     * ComboboxSelectTrigger component for the select trigger field.
+     *
+     * Features:
+     * - Select input with dropdown trigger
+     * - Supports single selection display
+     * - Handles keyboard navigation and accessibility
+     * - Integrates with combobox state management
+     * - Supports custom styling and layout
+     * - Manages focus and blur events
+     * - Enhanced prefix support for icons and avatars
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <Combobox.SelectTrigger
+     *   label="Select user"
+     *   placeholder="Choose a user..."
+     *   prefix={{ avatar: { name: "User" } }}
+     * />
+     */
+    SelectTrigger: ComboboxSelectTrigger,
+    /**
+     * ComboboxContent component for rendering the content area of a combobox.
+     *
+     * Features:
+     * - Supports both popover and inline rendering modes
+     * - Provides render props pattern for flexible content rendering
+     * - Handles grouped items with proper ARIA labels
+     * - Integrates with combobox state management
+     * - Supports custom styling and layout
+     * - Manages focus and blur events for popover behavior
+     *
+     * @example
+     * <Combobox.Content>
+     *   {({ items }) => (
+     *     <Combobox.List>
+     *       {items.map((item, index) => (
+     *         <Combobox.Item key={item.id} item={item} index={index}>
+     *           {item.name}
+     *         </Combobox.Item>
+     *       ))}
+     *     </Combobox.List>
+     *   )}
+     * </Combobox.Content>
+     */
+    Content: ComboboxContent,
+    /**
+     * ComboboxList component for rendering the list of items.
+     *
+     * Features:
+     * - Renders list of items with proper accessibility
+     * - Supports both single and multiple selection modes
+     * - Loading state with spinner
+     * - Empty state handling
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <Combobox.List>
+     *   {items.map((item, i) => (
+     *     <Combobox.Item key={item.id} item={item} index={i}>
+     *       {item.name}
+     *     </Combobox.Item>
+     *   ))}
+     * </Combobox.List>
+     */
+    List: ComboboxList,
+    /**
+     * ComboboxItem component for rendering individual items in the list.
+     *
+     * Features:
+     * - Individual item rendering with proper accessibility
+     * - Support for disabled state
+     * - Custom content rendering
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <Combobox.Item item={item} index={index}>
+     *   <Flex direction="column">
+     *     <Text>{item.name}</Text>
+     *     <Text size="small" subdued>{item.description}</Text>
+     *   </Flex>
+     * </Combobox.Item>
+     */
+    Item: ComboboxItem,
+    /**
+     * ComboboxItemAddNew component for rendering an "Add New" option.
+     *
+     * Features:
+     * - "Add New" option that appears when no exact match is found
+     * - Customizable content rendering
+     * - Callback when selected
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <Combobox.ItemAddNew onSelection={(inputValue) => addNewItem(inputValue)}>
+     *   Add "{inputValue}" as new item
+     * </Combobox.ItemAddNew>
+     */
+    ItemAddNew: ComboboxItemAddNew,
+    /**
+     * ComboboxEmpty component for rendering content when no items are available.
+     *
+     * Features:
+     * - Renders content when list is empty
+     * - Customizable empty state message
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <Combobox.Empty>
+     *   <Text>No items found. Try adjusting your search.</Text>
+     * </Combobox.Empty>
+     */
+    Empty: ComboboxEmpty
+  }
+);
+const ComboboxElement = Combobox;
+
+export { Combobox as C, ComboboxElement as a, ComboboxSelect as b, ComboboxList as c };
+//# sourceMappingURL=Combobox-BXQFOwX4.js.map