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-CyB7yzSf.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-Do7lQ5rw.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-CfpLm9pS.js';
import { T as Text } from './Text-J5YtSSXY.js';
import { D as Divider } from './Divider-Ds3WKsKa.js';
import { F as Flex } from './Flex-DOUtHiPi.js';
import { S as Spinner } from './Spinner-lPMo68yW.js';
import { l as listViewStyles } from './ListView.module-CRk9NfLG.js';
import { I as Icon } from './Icon-BMMbp40n.js';
import { c as checkboxStyles } from './Checkbox.module-TYMeYIxw.js';
import { S as SvgCheckBox, a as SvgCheckBoxOutlineBlank } from './check_box-0U1tbEAd.js';
import { A as Avatar } from './Avatar-NbFc4Ovc.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_9blix_2";
const listview = "_listview_9blix_13";
const empty = "_empty_9blix_18";
const group = "_group_9blix_34";
const item = "_item_9blix_70";
const scrolled = "_scrolled_9blix_191";
const styles = {
	combobox: combobox,
	"popover-content": "_popover-content_9blix_7",
	listview: listview,
	empty: empty,
	"scroll-sentinel": "_scroll-sentinel_9blix_25",
	group: group,
	"group-title": "_group-title_9blix_51",
	"group-list": "_group-list_9blix_57",
	item: item,
	"listview-option": "_listview-option_9blix_135",
	"listview-option-disabled": "_listview-option-disabled_9blix_141",
	"icon-disabled": "_icon-disabled_9blix_147",
	"select-all": "_select-all_9blix_185",
	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-BffGTugd.js.map
