@jobber/components 8.20.2 → 8.21.0

package/dist/unstyledPrimitives/index.mjs

@@ -1,3081 +1,128 @@
 import * as React from 'react';
-import { j as useControlled, a as useStableCallback, k as useValueAsRef, c as useTransitionStatus, d as useIsoLayoutEffect, x as createGenericEventDetails, r as inputClear, q as inputChange, m as createChangeEventDetails, _ as focusOut, a4 as outsidePress, g as getTarget, a3 as itemPress, f as useOpenChangeComplete, B as useValueChanged, n as none, ao as inputPress, v as visuallyHiddenInput, p as visuallyHidden, L as contains, ap as pointer, b as useTimeout, A as useButton, o as ownerDocument, C as stopEvent, W as listNavigation, a2 as closePress, u as useBaseUiId, am as isAndroid, aq as isFirefox, P as escapeKey, ar as clearPress, t as transitionStatusMapping, a7 as imperativeAction, i as clamp, as as swipe, aa as useAnimationFrame, ak as TransitionStatusDataAttributes, R as triggerHover, a5 as useAnimationsFinished, S as SafeReact, e as error, at as chipRemovePress, au as scrub, ac as isWebKit } from '../clamp-es.js';
-import { K as createSelector, ad as useStore, T as useOpenInteractionType, a3 as useClick, Y as useDismiss, $ as useInteractions, O as useOnFirstRender, ae as Store, a8 as pressableTriggerOpenStateMapping, v as useDirection, ac as triggerOpenStateMapping, A as FloatingPortal, y as popupStateMapping, W as useScrollLock, I as InternalBackdrop, E as inertValue, H as DROPDOWN_COLLISION_AVOIDANCE, z as FloatingFocusManager, x as useDialogRootContext, af as useDrawerProviderContext, ag as DrawerBackdropCssVars, ah as DrawerPopupCssVars, ai as DrawerProviderContext, aj as CommonPopupDataAttributes, ak as useDialogPortalContext, al as DialogStore, am as useDrawerRootContext, ab as useTriggerRegistration, an as DrawerPopupDataAttributes, ao as useDrawerSnapPoints, ap as DrawerViewportContext, aq as BASE_UI_SWIPE_IGNORE_SELECTOR, ar as DRAWER_CONTENT_ATTRIBUTE, c as DrawerBackdrop, f as DrawerContent, d as DrawerPopup, b as DrawerPortal, a as DrawerRoot, D as DrawerTrigger, as as useScrollAreaRootContext, at as getOffset, au as ScrollAreaRootCssVars, av as scrollAreaStateAttributesMapping, aw as useScrollAreaViewportContext, S as ScrollAreaRoot, e as ScrollAreaViewport } from '../ScrollAreaViewport-es.js';
-import { f as formatErrorMessage, d as EMPTY_ARRAY, a as useRefWithInit, b as useMergedRefs, N as NOOP, E as EMPTY_OBJECT, u as useRenderElement, m as mergeProps } from '../useRenderElement-es.js';
+import { a as useStableCallback, ar as pointer, u as useBaseUiId, d as useIsoLayoutEffect, t as transitionStatusMapping, n as createChangeEventDetails, Q as imperativeAction, o as ownerDocument, m as contains, g as getTarget, b as useTimeout, as as swipe, ac as useAnimationFrame, al as TransitionStatusDataAttributes, a4 as triggerHover, B as useControlled, a6 as itemPress, c as useTransitionStatus, f as useOpenChangeComplete, a8 as useAnimationsFinished, ao as isFirefox, at as scrub, K as createGenericEventDetails, V as isWebKit } from '../useButton-es.js';
+import { A as useCoreFilter, B as AriaCombobox, D as stringifyAsLabel, E as useComboboxInputValueContext, l as ComboboxArrow, i as ComboboxBackdrop, x as ComboboxClear, v as ComboboxCollection, w as ComboboxEmpty, n as ComboboxGroup, o as ComboboxGroupLabel, m as ComboboxIcon, c as ComboboxInput, d as ComboboxInputGroup, p as ComboboxItem, f as ComboboxList, k as ComboboxPopup, h as ComboboxPortal, j as ComboboxPositioner, u as ComboboxRow, g as ComboboxStatus, e as ComboboxTrigger, z as useFilteredItems, s as ComboboxChip, t as ComboboxChipRemove, r as ComboboxChips, q as ComboboxItemIndicator, a as ComboboxLabel, C as ComboboxRoot, b as ComboboxValue, y as useComboboxFilter } from '../ComboboxChipRemove-es.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { a as useFormContext, b as useFieldRootContext, j as useLabelableId, k as useField, f as fieldValidityMapping, u as useLabelableContext, l as DEFAULT_FIELD_STATE_ATTRIBUTES, c as useLabel, m as useNumberFieldRootContext, n as DEFAULT_STEP, s as stateAttributesMapping$9, i as NumberFieldDecrement, d as NumberFieldGroup, h as NumberFieldIncrement, e as NumberFieldInput, N as NumberFieldRoot } from '../NumberFieldInput-es.js';
-import { u as useFloatingRootContext, o as useListNavigation, p as useTypeahead, q as getPseudoElementBounds, C as CompositeList, r as useAnchorPositioning, s as getDisabledMountTransitionStyles, t as useCompositeListItem, I as IndexGuessBehavior, a as DrawerClose, D as DrawerTitle, v as useMenuRootContext, w as useMenuPositionerContext, x as useContextMenuRootContext, y as useMenuItem, R as REGULAR_ITEM, z as itemMapping, A as MenuStore, l as MenuGroup, n as MenuGroupLabel, c as MenuItem, b as MenuLinkItem, j as MenuPopup, h as MenuPortal, i as MenuPositioner, k as MenuRadioGroup, d as MenuRadioItem, e as MenuRadioItemIndicator, g as MenuRoot, m as MenuSubmenuRoot, f as MenuSubmenuTrigger, M as MenuTrigger } from '../MenuSubmenuTrigger-es.js';
-import * as ReactDOM from 'react-dom';
 import { S as Separator } from '../Separator-es.js';
+import { u as useDialogRootContext, n as useDrawerProviderContext, o as DrawerBackdropCssVars, q as DrawerPopupCssVars, r as DrawerProviderContext, s as useDialogPortalContext, t as DialogStore, v as useDrawerRootContext, m as useTriggerRegistration, w as DrawerPopupDataAttributes, x as useDrawerSnapPoints, y as DrawerViewportContext, z as DRAWER_CONTENT_ATTRIBUTE, c as DrawerBackdrop, f as DrawerContent, d as DrawerPopup, b as DrawerPortal, a as DrawerRoot, D as DrawerTrigger, A as useScrollAreaRootContext, B as getOffset, E as ScrollAreaRootCssVars, F as scrollAreaStateAttributesMapping, G as useScrollAreaViewportContext, S as ScrollAreaRoot, e as ScrollAreaViewport } from '../ScrollAreaViewport-es.js';
+import { a as DrawerClose, D as DrawerTitle, u as useMenuRootContext, o as useMenuPositionerContext, p as useContextMenuRootContext, q as useMenuItem, R as REGULAR_ITEM, r as itemMapping, s as MenuStore, l as MenuGroup, n as MenuGroupLabel, c as MenuItem, b as MenuLinkItem, j as MenuPopup, h as MenuPortal, i as MenuPositioner, k as MenuRadioGroup, d as MenuRadioItem, e as MenuRadioItemIndicator, g as MenuRoot, m as MenuSubmenuRoot, f as MenuSubmenuTrigger, M as MenuTrigger } from '../MenuSubmenuTrigger-es.js';
+import { u as useRenderElement, m as mergeProps, f as formatErrorMessage, N as NOOP, E as EMPTY_OBJECT } from '../useRenderElement-es.js';
 import { a as isHTMLElement, f as getComputedStyle, b as isElement, k as getWindow } from '../floating-ui.utils.dom-es.js';
+import { c as clamp } from '../clamp-es.js';
+import { C as CommonPopupDataAttributes, p as popupStateMapping, $ as BASE_UI_SWIPE_IGNORE_SELECTOR, m as useDirection, r as inertValue } from '../InternalBackdrop-es.js';
+import * as ReactDOM from 'react-dom';
+import { u as useCompositeListItem } from '../useCompositeListItem-es.js';
 import { y as round } from '../index.esm-es.js';
+import { u as useNumberFieldRootContext, D as DEFAULT_STEP, s as stateAttributesMapping$6, d as NumberFieldDecrement, a as NumberFieldGroup, c as NumberFieldIncrement, b as NumberFieldInput, N as NumberFieldRoot } from '../NumberFieldInput-es.js';
+import '../useLabel-es.js';
 import '../floating-ui.react-dom-es.js';
 
-const ComboboxRootContext = /*#__PURE__*/React.createContext(undefined);
-if (process.env.NODE_ENV !== "production") ComboboxRootContext.displayName = "ComboboxRootContext";
-const ComboboxFloatingContext = /*#__PURE__*/React.createContext(undefined);
-if (process.env.NODE_ENV !== "production") ComboboxFloatingContext.displayName = "ComboboxFloatingContext";
-const ComboboxDerivedItemsContext = /*#__PURE__*/React.createContext(undefined);
-// `inputValue` can't be placed in the store.
-// https://github.com/mui/base-ui/issues/2703
-if (process.env.NODE_ENV !== "production") ComboboxDerivedItemsContext.displayName = "ComboboxDerivedItemsContext";
-const ComboboxInputValueContext = /*#__PURE__*/React.createContext('');
-if (process.env.NODE_ENV !== "production") ComboboxInputValueContext.displayName = "ComboboxInputValueContext";
-function useComboboxRootContext() {
-  const context = React.useContext(ComboboxRootContext);
-  if (!context) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: ComboboxRootContext is missing. Combobox parts must be placed within <Combobox.Root>.' : formatErrorMessage(22));
-  }
-  return context;
-}
-function useComboboxFloatingContext() {
-  const context = React.useContext(ComboboxFloatingContext);
-  if (!context) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: ComboboxFloatingContext is missing. Combobox parts must be placed within <Combobox.Root>.' : formatErrorMessage(23));
-  }
-  return context;
-}
-function useComboboxDerivedItemsContext() {
-  const context = React.useContext(ComboboxDerivedItemsContext);
-  if (!context) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: ComboboxItemsContext is missing. Combobox parts must be placed within <Combobox.Root>.' : formatErrorMessage(24));
-  }
-  return context;
-}
-function useComboboxInputValueContext() {
-  return React.useContext(ComboboxInputValueContext);
-}
-
-const defaultItemEquality = (itemValue, selectedValue) => Object.is(itemValue, selectedValue);
-function compareItemEquality(itemValue, selectedValue, comparer) {
-  if (itemValue == null || selectedValue == null) {
-    return Object.is(itemValue, selectedValue);
-  }
-  return comparer(itemValue, selectedValue);
-}
-function selectedValueIncludes(selectedValues, itemValue, comparer) {
-  if (!selectedValues || selectedValues.length === 0) {
-    return false;
-  }
-  return selectedValues.some(selectedValue => {
-    if (selectedValue === undefined) {
-      return false;
-    }
-    return compareItemEquality(itemValue, selectedValue, comparer);
-  });
-}
-function findItemIndex(itemValues, selectedValue, comparer) {
-  if (!itemValues || itemValues.length === 0) {
-    return -1;
-  }
-  return itemValues.findIndex(itemValue => {
-    if (itemValue === undefined) {
-      return false;
-    }
-    return compareItemEquality(itemValue, selectedValue, comparer);
-  });
-}
-function removeItem(selectedValues, itemValue, comparer) {
-  return selectedValues.filter(selectedValue => !compareItemEquality(itemValue, selectedValue, comparer));
-}
-
-function serializeValue(value) {
-  if (value == null) {
-    return '';
-  }
-  if (typeof value === 'string') {
-    return value;
-  }
-  try {
-    return JSON.stringify(value);
-  } catch {
-    return String(value);
-  }
-}
-
-function isGroupedItems(items) {
-  return items != null && items.length > 0 && typeof items[0] === 'object' && items[0] != null && 'items' in items[0];
-}
-
-/**
- * Checks if the items array contains an item with a null value that has a non-null label.
- */
-function hasNullItemLabel(items) {
-  if (!Array.isArray(items)) {
-    return items != null && 'null' in items;
-  }
-  const arrayItems = items;
-  if (isGroupedItems(arrayItems)) {
-    for (const group of arrayItems) {
-      for (const item of group.items) {
-        if (item && item.value == null && item.label != null) {
-          return true;
-        }
-      }
-    }
-    return false;
-  }
-  for (const item of arrayItems) {
-    if (item && item.value == null && item.label != null) {
-      return true;
-    }
-  }
-  return false;
-}
-function stringifyAsLabel(item, itemToStringLabel) {
-  if (itemToStringLabel && item != null) {
-    return itemToStringLabel(item) ?? '';
-  }
-  if (item && typeof item === 'object') {
-    if ('label' in item && item.label != null) {
-      return String(item.label);
-    }
-    if ('value' in item) {
-      return String(item.value);
-    }
-  }
-  return serializeValue(item);
-}
-function stringifyAsValue(item, itemToStringValue) {
-  if (itemToStringValue && item != null) {
-    return itemToStringValue(item) ?? '';
-  }
-  if (item && typeof item === 'object' && 'value' in item && 'label' in item) {
-    return serializeValue(item.value);
-  }
-  return serializeValue(item);
-}
-function resolveSelectedLabel(value, items, itemToStringLabel) {
-  function fallback() {
-    return stringifyAsLabel(value, itemToStringLabel);
-  }
-  if (itemToStringLabel && value != null) {
-    return itemToStringLabel(value);
-  }
-
-  // Custom object with explicit label takes precedence
-  if (value && typeof value === 'object' && 'label' in value && value.label != null) {
-    return value.label;
-  }
-
-  // Items provided as plain record map
-  if (items && !Array.isArray(items)) {
-    return items[value] ?? fallback();
-  }
-
-  // Items provided as array (flat or grouped)
-  if (Array.isArray(items)) {
-    const arrayItems = items;
-    const flatItems = isGroupedItems(arrayItems) ? arrayItems.flatMap(group => group.items) : arrayItems;
-    if (value == null || typeof value !== 'object') {
-      const match = flatItems.find(item => item.value === value);
-      if (match && match.label != null) {
-        return match.label;
-      }
-      return fallback();
-    }
-
-    // Object without explicit label: try matching by its `value` property
-    if ('value' in value) {
-      const match = flatItems.find(item => item && item.value === value.value);
-      if (match && match.label != null) {
-        return match.label;
-      }
-    }
-  }
-  return fallback();
-}
-function resolveMultipleLabels(values, items, itemToStringLabel) {
-  return values.reduce((acc, value, index) => {
-    if (index > 0) {
-      acc.push(', ');
-    }
-    acc.push(/*#__PURE__*/jsx(React.Fragment, {
-      children: resolveSelectedLabel(value, items, itemToStringLabel)
-    }, index));
-    return acc;
-  }, []);
-}
-
-const selectors = {
-  id: createSelector(state => state.id),
-  labelId: createSelector(state => state.labelId),
-  query: createSelector(state => state.query),
-  items: createSelector(state => state.items),
-  selectedValue: createSelector(state => state.selectedValue),
-  hasSelectionChips: createSelector(state => {
-    const selectedValue = state.selectedValue;
-    return Array.isArray(selectedValue) && selectedValue.length > 0;
-  }),
-  hasSelectedValue: createSelector(state => {
-    const {
-      selectedValue,
-      selectionMode
-    } = state;
-    if (selectedValue == null) {
-      return false;
-    }
-    if (selectionMode === 'multiple' && Array.isArray(selectedValue)) {
-      return selectedValue.length > 0;
-    }
-    return true;
-  }),
-  hasNullItemLabel: createSelector((state, enabled) => {
-    return enabled ? hasNullItemLabel(state.items) : false;
-  }),
-  open: createSelector(state => state.open),
-  mounted: createSelector(state => state.mounted),
-  forceMounted: createSelector(state => state.forceMounted),
-  inline: createSelector(state => state.inline),
-  activeIndex: createSelector(state => state.activeIndex),
-  selectedIndex: createSelector(state => state.selectedIndex),
-  isActive: createSelector((state, index) => state.activeIndex === index),
-  isSelected: createSelector((state, itemValue) => {
-    const comparer = state.isItemEqualToValue;
-    const selectedValue = state.selectedValue;
-    if (Array.isArray(selectedValue)) {
-      return selectedValue.some(selectedItem => compareItemEquality(itemValue, selectedItem, comparer));
-    }
-    return compareItemEquality(itemValue, selectedValue, comparer);
-  }),
-  transitionStatus: createSelector(state => state.transitionStatus),
-  popupProps: createSelector(state => state.popupProps),
-  inputProps: createSelector(state => state.inputProps),
-  triggerProps: createSelector(state => state.triggerProps),
-  getItemProps: createSelector(state => state.getItemProps),
-  positionerElement: createSelector(state => state.positionerElement),
-  listElement: createSelector(state => state.listElement),
-  triggerElement: createSelector(state => state.triggerElement),
-  inputElement: createSelector(state => state.inputElement),
-  inputGroupElement: createSelector(state => state.inputGroupElement),
-  popupSide: createSelector(state => state.popupSide),
-  openMethod: createSelector(state => state.openMethod),
-  inputInsidePopup: createSelector(state => state.inputInsidePopup),
-  selectionMode: createSelector(state => state.selectionMode),
-  listRef: createSelector(state => state.listRef),
-  labelsRef: createSelector(state => state.labelsRef),
-  popupRef: createSelector(state => state.popupRef),
-  emptyRef: createSelector(state => state.emptyRef),
-  inputRef: createSelector(state => state.inputRef),
-  keyboardActiveRef: createSelector(state => state.keyboardActiveRef),
-  chipsContainerRef: createSelector(state => state.chipsContainerRef),
-  clearRef: createSelector(state => state.clearRef),
-  valuesRef: createSelector(state => state.valuesRef),
-  allValuesRef: createSelector(state => state.allValuesRef),
-  name: createSelector(state => state.name),
-  disabled: createSelector(state => state.disabled),
-  readOnly: createSelector(state => state.readOnly),
-  required: createSelector(state => state.required),
-  grid: createSelector(state => state.grid),
-  isGrouped: createSelector(state => state.isGrouped),
-  virtualized: createSelector(state => state.virtualized),
-  onOpenChangeComplete: createSelector(state => state.onOpenChangeComplete),
-  openOnInputClick: createSelector(state => state.openOnInputClick),
-  itemToStringLabel: createSelector(state => state.itemToStringLabel),
-  isItemEqualToValue: createSelector(state => state.isItemEqualToValue),
-  modal: createSelector(state => state.modal),
-  autoHighlight: createSelector(state => state.autoHighlight),
-  submitOnItemClick: createSelector(state => state.submitOnItemClick)
-};
-
-/**
- * Enhanced filter using Intl.Collator for more robust string matching.
- * Uses the provided `itemToStringLabel` function if available, otherwise falls back to:
- * • When `item` is an object with a `value` property, that property is used.
- * • When `item` is a primitive (e.g. `string`), it is used directly.
- */
-function createCollatorItemFilter(collatorFilter, itemToStringLabel) {
-  return (item, query) => {
-    if (item == null) {
-      return false;
-    }
-    const itemString = stringifyAsLabel(item, itemToStringLabel);
-    return collatorFilter.contains(itemString, query);
-  };
-}
-
-/**
- * Enhanced filter for single selection mode using Intl.Collator that shows all items
- * when query is empty or matches the current selection, making it easier to browse options.
- */
-function createSingleSelectionCollatorFilter(collatorFilter, itemToStringLabel, selectedValue) {
-  return (item, query) => {
-    if (item == null) {
-      return false;
-    }
-    if (!query) {
-      return true;
-    }
-    const itemString = stringifyAsLabel(item, itemToStringLabel);
-    const selectedString = selectedValue != null ? stringifyAsLabel(selectedValue, itemToStringLabel) : '';
-
-    // Handle case-insensitive matching consistently
-    if (selectedString && collatorFilter.contains(selectedString, query) && selectedString.length === query.length) {
-      return true;
-    }
-    return collatorFilter.contains(itemString, query);
-  };
-}
-
-const filterCache = new Map();
-function stringifyLocale(locale) {
-  if (Array.isArray(locale)) {
-    return locale.map(value => stringifyLocale(value)).join(',');
-  }
-  if (locale == null) {
-    return '';
-  }
-  return String(locale);
-}
-function getFilter(options = {}) {
-  const mergedOptions = {
-    usage: 'search',
-    sensitivity: 'base',
-    ignorePunctuation: true,
-    ...options
-  };
-  const cacheKey = `${stringifyLocale(options.locale)}|${JSON.stringify(mergedOptions)}`;
-  const cachedFilter = filterCache.get(cacheKey);
-  if (cachedFilter) {
-    return cachedFilter;
-  }
-  const collator = new Intl.Collator(options.locale, mergedOptions);
-  const filter = {
-    contains(item, query, itemToString) {
-      if (!query) {
-        return true;
-      }
-      const itemString = stringifyAsLabel(item, itemToString);
-      for (let i = 0; i <= itemString.length - query.length; i += 1) {
-        if (collator.compare(itemString.slice(i, i + query.length), query) === 0) {
-          return true;
-        }
-      }
-      return false;
-    },
-    startsWith(item, query, itemToString) {
-      if (!query) {
-        return true;
-      }
-      const itemString = stringifyAsLabel(item, itemToString);
-      return collator.compare(itemString.slice(0, query.length), query) === 0;
-    },
-    endsWith(item, query, itemToString) {
-      if (!query) {
-        return true;
-      }
-      const itemString = stringifyAsLabel(item, itemToString);
-      const queryLength = query.length;
-      return itemString.length >= queryLength && collator.compare(itemString.slice(itemString.length - queryLength), query) === 0;
-    }
-  };
-  filterCache.set(cacheKey, filter);
-  return filter;
-}
-
-/**
- * Matches items against a query using `Intl.Collator` for robust string matching.
- */
-const useCoreFilter = getFilter;
-/**
- * Matches items against a query using `Intl.Collator` for robust string matching.
- */
-function useComboboxFilter(options = {}) {
+function AutocompleteRoot(props) {
   const {
-    multiple = false,
+    openOnInputClick = false,
     value,
-    ...collatorOptions
-  } = options;
-  const coreFilter = getFilter(collatorOptions);
-  const contains = React.useCallback((item, query, itemToString) => {
-    if (multiple) {
-      return createCollatorItemFilter(coreFilter, itemToString)(item, query);
-    }
-    return createSingleSelectionCollatorFilter(coreFilter, itemToString, value)(item, query);
-  }, [coreFilter, value, multiple]);
-  return React.useMemo(() => ({
-    contains,
-    startsWith: coreFilter.startsWith,
-    endsWith: coreFilter.endsWith
-  }), [contains, coreFilter]);
-}
-
-const NO_ACTIVE_VALUE = Symbol('none');
-const INITIAL_LAST_HIGHLIGHT = {
-  value: NO_ACTIVE_VALUE,
-  index: -1
-};
-
-function AriaCombobox(props) {
-  const {
-    id: idProp,
-    onOpenChangeComplete: onOpenChangeCompleteProp,
-    defaultSelectedValue = null,
-    selectedValue: selectedValueProp,
-    onSelectedValueChange,
-    defaultInputValue: defaultInputValueProp,
-    inputValue: inputValueProp,
-    selectionMode = 'none',
-    onItemHighlighted: onItemHighlightedProp,
-    name: nameProp,
-    disabled: disabledProp = false,
-    readOnly = false,
-    required = false,
-    inputRef: inputRefProp,
-    grid = false,
-    items,
-    filteredItems: filteredItemsProp,
-    filter: filterProp,
-    openOnInputClick = true,
-    autoHighlight = false,
-    keepHighlight = false,
-    highlightItemOnHover = true,
-    loopFocus = true,
-    itemToStringLabel,
+    defaultValue,
+    onValueChange,
+    mode = 'list',
     itemToStringValue,
-    isItemEqualToValue = defaultItemEquality,
-    virtualized = false,
-    inline: inlineProp = false,
-    fillInputOnItemPress = true,
-    modal = false,
-    limit = -1,
-    autoComplete = 'list',
-    formAutoComplete,
-    locale,
-    submitOnItemClick = false
+    ...other
   } = props;
-  const {
-    clearErrors
-  } = useFormContext();
-  const {
-    setDirty,
-    validityData,
-    shouldValidateOnChange,
-    setFilled,
-    name: fieldName,
-    disabled: fieldDisabled,
-    setTouched,
-    setFocused,
-    validationMode,
-    validation
-  } = useFieldRootContext();
-  const id = useLabelableId({
-    id: idProp
-  });
-  const collatorFilter = useCoreFilter({
-    locale
-  });
-  const [queryChangedAfterOpen, setQueryChangedAfterOpen] = React.useState(false);
-  const [closeQuery, setCloseQuery] = React.useState(null);
-  const listRef = React.useRef([]);
-  const labelsRef = React.useRef([]);
-  const popupRef = React.useRef(null);
-  const inputRef = React.useRef(null);
-  const startDismissRef = React.useRef(null);
-  const endDismissRef = React.useRef(null);
-  const emptyRef = React.useRef(null);
-  const keyboardActiveRef = React.useRef(true);
-  const hadInputClearRef = React.useRef(false);
-  const chipsContainerRef = React.useRef(null);
-  const clearRef = React.useRef(null);
-  const selectionEventRef = React.useRef(null);
-  const lastHighlightRef = React.useRef(INITIAL_LAST_HIGHLIGHT);
-  const pendingQueryHighlightRef = React.useRef(null);
-
-  /**
-   * Contains the currently visible list of item values post-filtering.
-   */
-  const valuesRef = React.useRef([]);
-  /**
-   * Contains all item values in a stable, unfiltered order.
-   * This is only used when `items` prop is not provided.
-   * It accumulates values on first mount and does not remove them on unmount due to
-   * filtering, providing a stable index for selected value tracking.
-   */
-  const allValuesRef = React.useRef([]);
-  const disabled = fieldDisabled || disabledProp;
-  const name = fieldName ?? nameProp;
-  const multiple = selectionMode === 'multiple';
-  const single = selectionMode === 'single';
-  const hasInputValue = inputValueProp !== undefined || defaultInputValueProp !== undefined;
-  const hasItems = items !== undefined;
-  const hasFilteredItemsProp = filteredItemsProp !== undefined;
-  let autoHighlightMode;
-  if (autoHighlight === 'always') {
-    autoHighlightMode = 'always';
-  } else {
-    autoHighlightMode = autoHighlight ? 'input-change' : false;
-  }
-  const [selectedValue, setSelectedValueUnwrapped] = useControlled({
-    controlled: selectedValueProp,
-    default: multiple ? defaultSelectedValue ?? EMPTY_ARRAY : defaultSelectedValue,
-    name: 'Combobox',
-    state: 'selectedValue'
-  });
-  const filter = React.useMemo(() => {
-    if (filterProp === null) {
-      return () => true;
-    }
-    if (filterProp !== undefined) {
-      return filterProp;
-    }
-    if (single && !queryChangedAfterOpen) {
-      return createSingleSelectionCollatorFilter(collatorFilter, itemToStringLabel, selectedValue);
-    }
-    return createCollatorItemFilter(collatorFilter, itemToStringLabel);
-  }, [filterProp, single, selectedValue, queryChangedAfterOpen, collatorFilter, itemToStringLabel]);
+  const enableInline = mode === 'inline' || mode === 'both';
+  const staticItems = mode === 'inline' || mode === 'none';
 
-  // If neither inputValue nor defaultInputValue are provided, derive it from the
-  // selected value for single mode so the input reflects the selection on mount.
-  const initialDefaultInputValue = useRefWithInit(() => {
-    if (hasInputValue) {
-      return defaultInputValueProp ?? '';
-    }
-    if (single) {
-      return stringifyAsLabel(selectedValue, itemToStringLabel);
-    }
-    return '';
-  }).current;
-  const [inputValue, setInputValueUnwrapped] = useControlled({
-    controlled: inputValueProp,
-    default: initialDefaultInputValue,
-    name: 'Combobox',
-    state: 'inputValue'
-  });
-  const [open, setOpenUnwrapped] = useControlled({
-    controlled: props.open,
-    default: props.defaultOpen,
-    name: 'Combobox',
-    state: 'open'
-  });
-  const isGrouped = isGroupedItems(items);
-  const query = closeQuery ?? (inputValue === '' ? '' : String(inputValue).trim());
-  const selectedLabelString = single ? stringifyAsLabel(selectedValue, itemToStringLabel) : '';
-  const shouldBypassFiltering = single && !queryChangedAfterOpen && query !== '' && selectedLabelString !== '' && selectedLabelString.length === query.length && collatorFilter.contains(selectedLabelString, query);
-  const filterQuery = shouldBypassFiltering ? '' : query;
-  const shouldIgnoreExternalFiltering = hasItems && hasFilteredItemsProp && shouldBypassFiltering;
-  const flatItems = React.useMemo(() => {
-    if (!items) {
-      return EMPTY_ARRAY;
-    }
-    if (isGrouped) {
-      return items.flatMap(group => group.items);
-    }
-    return items;
-  }, [items, isGrouped]);
-  const filteredItems = React.useMemo(() => {
-    if (filteredItemsProp && !shouldIgnoreExternalFiltering) {
-      return filteredItemsProp;
-    }
-    if (!items) {
-      return EMPTY_ARRAY;
-    }
-    if (isGrouped) {
-      const groupedItems = items;
-      const resultingGroups = [];
-      let currentCount = 0;
-      for (const group of groupedItems) {
-        if (limit > -1 && currentCount >= limit) {
-          break;
-        }
-        const candidateItems = filterQuery === '' ? group.items : group.items.filter(item => filter(item, filterQuery, itemToStringLabel));
-        if (candidateItems.length === 0) {
-          continue;
-        }
-        const remainingLimit = limit > -1 ? limit - currentCount : Infinity;
-        const itemsToTake = candidateItems.slice(0, remainingLimit);
-        if (itemsToTake.length > 0) {
-          const newGroup = {
-            ...group,
-            items: itemsToTake
-          };
-          resultingGroups.push(newGroup);
-          currentCount += itemsToTake.length;
-        }
-      }
-      return resultingGroups;
-    }
-    if (filterQuery === '') {
-      return limit > -1 ? flatItems.slice(0, limit) :
-      // The cast here is done as `flatItems` is readonly.
-      // valuesRef.current, a mutable ref, can be set to `flatFilteredItems`, which may
-      // reference this exact readonly value, creating a mutation risk.
-      // However, <Combobox.Item> can never mutate this value as the mutating effect
-      // bails early when `items` is provided, and this is only ever returned
-      // when `items` is provided due to the early return at the top of this hook.
-      flatItems;
-    }
-    const limitedItems = [];
-    for (const item of flatItems) {
-      if (limit > -1 && limitedItems.length >= limit) {
-        break;
-      }
-      if (filter(item, filterQuery, itemToStringLabel)) {
-        limitedItems.push(item);
-      }
-    }
-    return limitedItems;
-  }, [filteredItemsProp, shouldIgnoreExternalFiltering, items, isGrouped, filterQuery, limit, filter, itemToStringLabel, flatItems]);
-  const flatFilteredItems = React.useMemo(() => {
-    if (isGrouped) {
-      const groups = filteredItems;
-      return groups.flatMap(g => g.items);
-    }
-    return filteredItems;
-  }, [filteredItems, isGrouped]);
-  const store = useRefWithInit(() => new Store({
-    id,
-    labelId: undefined,
-    selectedValue,
-    open,
-    filter,
-    query,
-    items,
-    selectionMode,
-    listRef,
-    labelsRef,
-    popupRef,
-    emptyRef,
-    inputRef,
-    startDismissRef,
-    endDismissRef,
-    keyboardActiveRef,
-    chipsContainerRef,
-    clearRef,
-    valuesRef,
-    allValuesRef,
-    selectionEventRef,
-    name,
-    disabled,
-    readOnly,
-    required,
-    grid,
-    isGrouped,
-    virtualized,
-    openOnInputClick,
-    itemToStringLabel,
-    isItemEqualToValue,
-    modal,
-    autoHighlight: autoHighlightMode,
-    submitOnItemClick,
-    hasInputValue,
-    mounted: false,
-    forceMounted: false,
-    transitionStatus: 'idle',
-    inline: inlineProp,
-    activeIndex: null,
-    selectedIndex: null,
-    popupProps: {},
-    inputProps: {},
-    triggerProps: {},
-    positionerElement: null,
-    listElement: null,
-    triggerElement: null,
-    inputElement: null,
-    inputGroupElement: null,
-    popupSide: null,
-    openMethod: null,
-    inputInsidePopup: true,
-    onOpenChangeComplete: onOpenChangeCompleteProp || NOOP,
-    // Placeholder callbacks replaced on first render
-    setOpen: NOOP,
-    setInputValue: NOOP,
-    setSelectedValue: NOOP,
-    setIndices: NOOP,
-    onItemHighlighted: NOOP,
-    handleSelection: NOOP,
-    getItemProps: () => EMPTY_OBJECT,
-    forceMount: NOOP,
-    requestSubmit: NOOP
-  })).current;
-  const fieldRawValue = selectionMode === 'none' ? inputValue : selectedValue;
-  const fieldStringValue = React.useMemo(() => {
-    if (selectionMode === 'none') {
-      return fieldRawValue;
-    }
-    if (Array.isArray(selectedValue)) {
-      return selectedValue.map(value => stringifyAsValue(value, itemToStringValue));
-    }
-    return stringifyAsValue(selectedValue, itemToStringValue);
-  }, [fieldRawValue, itemToStringValue, selectionMode, selectedValue]);
-  const onItemHighlighted = useStableCallback(onItemHighlightedProp);
-  const onOpenChangeComplete = useStableCallback(onOpenChangeCompleteProp);
-  const activeIndex = useStore(store, selectors.activeIndex);
-  const selectedIndex = useStore(store, selectors.selectedIndex);
-  const positionerElement = useStore(store, selectors.positionerElement);
-  const listElement = useStore(store, selectors.listElement);
-  const triggerElement = useStore(store, selectors.triggerElement);
-  const inputElement = useStore(store, selectors.inputElement);
-  const inputGroupElement = useStore(store, selectors.inputGroupElement);
-  const inline = useStore(store, selectors.inline);
-  const inputInsidePopup = useStore(store, selectors.inputInsidePopup);
-  const triggerRef = useValueAsRef(triggerElement);
-  const {
-    mounted,
-    setMounted,
-    transitionStatus
-  } = useTransitionStatus(open);
-  const {
-    openMethod,
-    triggerProps
-  } = useOpenInteractionType(open);
-  useField({
-    id,
-    name,
-    commit: validation.commit,
-    value: fieldRawValue,
-    controlRef: inputInsidePopup ? triggerRef : inputRef,
-    getValue: () => fieldStringValue
-  });
-  const forceMount = useStableCallback(() => {
-    if (items) {
-      // Ensure typeahead works on a closed list.
-      labelsRef.current = flatFilteredItems.map(item => stringifyAsLabel(item, itemToStringLabel));
-    } else {
-      store.set('forceMounted', true);
-    }
-  });
-  const initialSelectedValueRef = React.useRef(selectedValue);
-  useIsoLayoutEffect(() => {
-    // Ensure the values and labels are registered for programmatic value changes.
-    if (selectedValue !== initialSelectedValueRef.current) {
-      forceMount();
-    }
-  }, [forceMount, selectedValue]);
-  const setIndices = useStableCallback(options => {
-    store.update(options);
-    const type = options.type || 'none';
-    if (options.activeIndex === undefined) {
-      return;
-    }
-    if (options.activeIndex === null) {
-      if (lastHighlightRef.current !== INITIAL_LAST_HIGHLIGHT) {
-        lastHighlightRef.current = INITIAL_LAST_HIGHLIGHT;
-        onItemHighlighted(undefined, createGenericEventDetails(type, undefined, {
-          index: -1
-        }));
-      }
-    } else {
-      const activeValue = valuesRef.current[options.activeIndex];
-      lastHighlightRef.current = {
-        value: activeValue,
-        index: options.activeIndex
-      };
-      onItemHighlighted(activeValue, createGenericEventDetails(type, undefined, {
-        index: options.activeIndex
-      }));
-    }
-  });
-  const setInputValue = useStableCallback((next, eventDetails) => {
-    hadInputClearRef.current = eventDetails.reason === inputClear;
-    props.onInputValueChange?.(next, eventDetails);
-    if (eventDetails.isCanceled) {
-      return;
+  // Mirror the typed value for uncontrolled usage so we can compose the temporary
+  // inline input value.
+  const isControlled = value !== undefined;
+  const [internalValue, setInternalValue] = React.useState(defaultValue ?? '');
+  const [inlineInputValue, setInlineInputValue] = React.useState('');
+  React.useEffect(() => {
+    if (isControlled) {
+      setInlineInputValue('');
     }
+  }, [value, isControlled]);
 
-    // If user is typing, ensure we don't auto-highlight on open due to a race
-    // with the post-open effect that sets this flag.
-    if (eventDetails.reason === inputChange) {
-      const event = eventDetails.event;
-      const inputType = event.inputType;
-      // Treat composition commits as typed input; autofill may omit `inputType` or
-      // report `insertReplacementText`.
-      const isTypedInput = event.type === 'compositionend' || inputType != null && inputType !== '' && inputType !== 'insertReplacementText';
-      if (isTypedInput) {
-        const hasQuery = next.trim() !== '';
-        if (hasQuery) {
-          setQueryChangedAfterOpen(true);
-        }
-        // Defer index updates until after the filtered items have been derived to ensure
-        // `onItemHighlighted` receives the latest item.
-        pendingQueryHighlightRef.current = {
-          hasQuery
-        };
-        if (hasQuery && autoHighlightMode && store.state.activeIndex == null) {
-          store.set('activeIndex', 0);
-        }
-      }
+  // Compose the input value shown to the user: inline value takes precedence when present.
+  let resolvedInputValue;
+  if (enableInline && inlineInputValue !== '') {
+    resolvedInputValue = inlineInputValue;
+  } else if (isControlled) {
+    resolvedInputValue = value ?? '';
+  } else {
+    resolvedInputValue = internalValue;
+  }
+  const handleValueChange = useStableCallback((nextValue, eventDetails) => {
+    setInlineInputValue('');
+    if (!isControlled) {
+      setInternalValue(nextValue);
     }
-    setInputValueUnwrapped(next);
+    onValueChange?.(nextValue, eventDetails);
   });
-  const setOpen = useStableCallback((nextOpen, eventDetails) => {
-    if (open === nextOpen) {
-      return;
+  const collator = useCoreFilter();
+  const baseFilter = React.useMemo(() => {
+    if (other.filter !== undefined) {
+      return other.filter;
     }
+    return collator.contains;
+  }, [other.filter, collator]);
+  const resolvedQuery = String(isControlled ? value : internalValue).trim();
 
-    // If the `Empty` component is not used, the positioner or popup should be hidden
-    // with CSS. In this case, allow the Escape key to bubble to close a parent popup
-    // if there are no items to show.
-    if (eventDetails.reason === 'escape-key' && hasItems && flatFilteredItems.length === 0 && !store.state.emptyRef.current) {
-      eventDetails.allowPropagation();
-    }
-    props.onOpenChange?.(nextOpen, eventDetails);
-    if (eventDetails.isCanceled) {
-      return;
-    }
-    if (!nextOpen && queryChangedAfterOpen) {
-      if (single) {
-        if (!inline) {
-          setCloseQuery(query);
-        }
-        // Avoid a flicker when closing the popup with an empty query.
-        if (query === '') {
-          setQueryChangedAfterOpen(false);
-        }
-      } else if (multiple) {
-        if (inline || inputInsidePopup) {
-          setIndices({
-            activeIndex: null
-          });
-        } else {
-          // Freeze the current query so filtering remains stable while exiting.
-          setCloseQuery(query);
-        }
-        // Clear the input immediately on close while retaining filtering via closeQuery for exit animations
-        // if the input is outside the popup.
-        setInputValue('', createChangeEventDetails(inputClear, eventDetails.event));
-      }
-    }
-    setOpenUnwrapped(nextOpen);
-    if (!nextOpen && inputInsidePopup && (eventDetails.reason === focusOut || eventDetails.reason === outsidePress)) {
-      setTouched(true);
-      setFocused(false);
-      if (validationMode === 'onBlur') {
-        const valueToValidate = selectionMode === 'none' ? inputValue : selectedValue;
-        validation.commit(valueToValidate);
-      }
-    }
-  });
-  const setSelectedValue = useStableCallback((nextValue, eventDetails) => {
-    // Cast to `any` due to conditional value type (single vs. multiple).
-    // The runtime implementation already ensures the correct value shape.
-    onSelectedValueChange?.(nextValue, eventDetails);
-    if (eventDetails.isCanceled) {
-      return;
-    }
-    setSelectedValueUnwrapped(nextValue);
-    const shouldFillInput = selectionMode === 'none' && popupRef.current && fillInputOnItemPress || single && !store.state.inputInsidePopup;
-    if (shouldFillInput) {
-      setInputValue(stringifyAsLabel(nextValue, itemToStringLabel), createChangeEventDetails(eventDetails.reason, eventDetails.event));
-    }
-    if (single && nextValue != null && eventDetails.reason !== inputChange && queryChangedAfterOpen && !inline) {
-      setCloseQuery(query);
-    }
-  });
-  const handleSelection = useStableCallback((event, passedValue) => {
-    let itemValue = passedValue;
-    if (itemValue === undefined) {
-      if (activeIndex === null) {
-        return;
-      }
-      itemValue = valuesRef.current[activeIndex];
+  // In "both", wrap filtering to use only the typed value, ignoring the inline value.
+  const resolvedFilter = React.useMemo(() => {
+    if (mode !== 'both') {
+      return staticItems ? null : baseFilter;
     }
-    const targetEl = getTarget(event);
-    const overrideEvent = selectionEventRef.current ?? event;
-    selectionEventRef.current = null;
-    const eventDetails = createChangeEventDetails(itemPress, overrideEvent);
-
-    // Let the link handle the click.
-    const href = targetEl?.closest('a')?.getAttribute('href');
-    if (href) {
-      if (href.startsWith('#')) {
-        setOpen(false, eventDetails);
-      }
-      return;
-    }
-    if (multiple) {
-      const currentSelectedValue = Array.isArray(selectedValue) ? selectedValue : [];
-      const isCurrentlySelected = selectedValueIncludes(currentSelectedValue, itemValue, store.state.isItemEqualToValue);
-      const nextValue = isCurrentlySelected ? removeItem(currentSelectedValue, itemValue, store.state.isItemEqualToValue) : [...currentSelectedValue, itemValue];
-      setSelectedValue(nextValue, eventDetails);
-      const wasFiltering = inputRef.current ? inputRef.current.value.trim() !== '' : false;
-      if (!wasFiltering) {
-        return;
-      }
-      if (store.state.inputInsidePopup) {
-        setInputValue('', createChangeEventDetails(inputClear, eventDetails.event));
-      } else {
-        setOpen(false, eventDetails);
-      }
-    } else {
-      setSelectedValue(itemValue, eventDetails);
-      setOpen(false, eventDetails);
-    }
-  });
-  const requestSubmit = useStableCallback(() => {
-    if (!store.state.submitOnItemClick) {
-      return;
-    }
-    const form = store.state.inputElement?.form;
-    if (form && typeof form.requestSubmit === 'function') {
-      form.requestSubmit();
-    }
-  });
-  const handleUnmount = useStableCallback(() => {
-    setMounted(false);
-    onOpenChangeComplete?.(false);
-    setQueryChangedAfterOpen(false);
-    setCloseQuery(null);
-    if (selectionMode === 'none') {
-      setIndices({
-        activeIndex: null,
-        selectedIndex: null
-      });
-    } else {
-      setIndices({
-        activeIndex: null
-      });
-    }
-
-    // Multiple selection mode:
-    // If the user typed a filter and didn't select in multiple mode, clear the input
-    // after close completes to avoid mid-exit flicker and start fresh on next open.
-    if (multiple && inputRef.current && inputRef.current.value !== '' && !hadInputClearRef.current) {
-      setInputValue('', createChangeEventDetails(inputClear));
-    }
-
-    // Single selection mode:
-    // - If input is rendered inside the popup, clear it so the next open is blank
-    // - If input is outside the popup, sync it to the selected value
-    if (single) {
-      if (store.state.inputInsidePopup) {
-        if (inputRef.current && inputRef.current.value !== '') {
-          setInputValue('', createChangeEventDetails(inputClear));
-        }
-      } else {
-        const stringVal = stringifyAsLabel(selectedValue, itemToStringLabel);
-        if (inputRef.current && inputRef.current.value !== stringVal) {
-          // If no selection was made, treat this as clearing the typed filter.
-          const reason = stringVal === '' ? inputClear : none;
-          setInputValue(stringVal, createChangeEventDetails(reason));
-        }
-      }
-    }
-  });
-
-  // Support composing the Dialog component around an inline combobox.
-  // `[role="dialog"]` is more interoperable than using a context, e.g. it can work
-  // with third-party modal libraries, though the limitation is that the closest
-  // `role=dialog` part must be the animated element.
-  const resolvedPopupRef = React.useMemo(() => {
-    if (inline && positionerElement) {
-      return {
-        current: positionerElement.closest('[role="dialog"]')
-      };
-    }
-    return popupRef;
-  }, [inline, positionerElement]);
-  useOpenChangeComplete({
-    enabled: !props.actionsRef,
-    open,
-    ref: resolvedPopupRef,
-    onComplete() {
-      if (!open) {
-        handleUnmount();
-      }
-    }
-  });
-  React.useImperativeHandle(props.actionsRef, () => ({
-    unmount: handleUnmount
-  }), [handleUnmount]);
-  useIsoLayoutEffect(function syncSelectedIndex() {
-    if (open || selectionMode === 'none') {
-      return;
-    }
-    const registry = items ? flatItems : allValuesRef.current;
-    if (multiple) {
-      const currentValue = Array.isArray(selectedValue) ? selectedValue : [];
-      const lastValue = currentValue[currentValue.length - 1];
-      const lastIndex = findItemIndex(registry, lastValue, isItemEqualToValue);
-      setIndices({
-        selectedIndex: lastIndex === -1 ? null : lastIndex
-      });
-    } else {
-      const index = findItemIndex(registry, selectedValue, isItemEqualToValue);
-      setIndices({
-        selectedIndex: index === -1 ? null : index
-      });
-    }
-  }, [open, selectedValue, items, selectionMode, flatItems, multiple, isItemEqualToValue, setIndices]);
-  useIsoLayoutEffect(() => {
-    if (items) {
-      valuesRef.current = flatFilteredItems;
-      listRef.current.length = flatFilteredItems.length;
-    }
-  }, [items, flatFilteredItems]);
-  useIsoLayoutEffect(() => {
-    const pendingHighlight = pendingQueryHighlightRef.current;
-    if (pendingHighlight) {
-      if (pendingHighlight.hasQuery) {
-        if (autoHighlightMode) {
-          store.set('activeIndex', 0);
-        }
-      } else if (autoHighlightMode === 'always') {
-        store.set('activeIndex', 0);
-      }
-      pendingQueryHighlightRef.current = null;
-    }
-    if (!open && !inline) {
-      return;
-    }
-    const shouldUseFlatFilteredItems = hasItems || hasFilteredItemsProp;
-    const candidateItems = shouldUseFlatFilteredItems ? flatFilteredItems : valuesRef.current;
-    const storeActiveIndex = store.state.activeIndex;
-    if (storeActiveIndex == null) {
-      if (autoHighlightMode === 'always' && candidateItems.length > 0) {
-        store.set('activeIndex', 0);
-        return;
-      }
-      if (lastHighlightRef.current !== INITIAL_LAST_HIGHLIGHT) {
-        lastHighlightRef.current = INITIAL_LAST_HIGHLIGHT;
-        store.state.onItemHighlighted(undefined, createGenericEventDetails(none, undefined, {
-          index: -1
-        }));
-      }
-      return;
-    }
-    if (storeActiveIndex >= candidateItems.length) {
-      if (lastHighlightRef.current !== INITIAL_LAST_HIGHLIGHT) {
-        lastHighlightRef.current = INITIAL_LAST_HIGHLIGHT;
-        store.state.onItemHighlighted(undefined, createGenericEventDetails(none, undefined, {
-          index: -1
-        }));
-      }
-      store.set('activeIndex', null);
-      return;
-    }
-    const itemValue = candidateItems[storeActiveIndex];
-    const previouslyHighlightedItemValue = lastHighlightRef.current.value;
-    const isSameItem = previouslyHighlightedItemValue !== NO_ACTIVE_VALUE && compareItemEquality(itemValue, previouslyHighlightedItemValue, store.state.isItemEqualToValue);
-    if (lastHighlightRef.current.index !== storeActiveIndex || !isSameItem) {
-      lastHighlightRef.current = {
-        value: itemValue,
-        index: storeActiveIndex
-      };
-      store.state.onItemHighlighted(itemValue, createGenericEventDetails(none, undefined, {
-        index: storeActiveIndex
-      }));
-    }
-  }, [activeIndex, autoHighlightMode, hasFilteredItemsProp, hasItems, flatFilteredItems, inline, open, store]);
-  useIsoLayoutEffect(() => {
-    if (selectionMode === 'none') {
-      setFilled(String(inputValue) !== '');
-      return;
-    }
-    setFilled(multiple ? Array.isArray(selectedValue) && selectedValue.length > 0 : selectedValue != null);
-  }, [setFilled, selectionMode, inputValue, selectedValue, multiple]);
-
-  // Ensures that the active index is not set to 0 when the list is empty.
-  // This avoids needing to press ArrowDown twice under certain conditions.
-  React.useEffect(() => {
-    if (hasItems && autoHighlightMode && flatFilteredItems.length === 0) {
-      setIndices({
-        activeIndex: null
-      });
-    }
-  }, [hasItems, autoHighlightMode, flatFilteredItems.length, setIndices]);
-  useValueChanged(query, () => {
-    if (!open || query === '' || query === String(initialDefaultInputValue)) {
-      return;
-    }
-    setQueryChangedAfterOpen(true);
-  });
-  useValueChanged(selectedValue, () => {
-    if (selectionMode === 'none') {
-      return;
-    }
-    clearErrors(name);
-    setDirty(selectedValue !== validityData.initialValue);
-    if (shouldValidateOnChange()) {
-      validation.commit(selectedValue);
-    } else {
-      validation.commit(selectedValue, true);
-    }
-    if (single && !hasInputValue && !inputInsidePopup) {
-      const nextInputValue = stringifyAsLabel(selectedValue, itemToStringLabel);
-      if (inputValue !== nextInputValue) {
-        setInputValue(nextInputValue, createChangeEventDetails(none));
-      }
-    }
-  });
-  useValueChanged(inputValue, () => {
-    if (selectionMode !== 'none') {
-      return;
-    }
-    clearErrors(name);
-    setDirty(inputValue !== validityData.initialValue);
-    if (shouldValidateOnChange()) {
-      validation.commit(inputValue);
-    } else {
-      validation.commit(inputValue, true);
-    }
-  });
-  useValueChanged(items, () => {
-    if (!single || hasInputValue || inputInsidePopup || queryChangedAfterOpen) {
-      return;
-    }
-    const nextInputValue = stringifyAsLabel(selectedValue, itemToStringLabel);
-    if (inputValue !== nextInputValue) {
-      setInputValue(nextInputValue, createChangeEventDetails(none));
-    }
-  });
-  const floatingRootContext = useFloatingRootContext({
-    open: inline ? true : open,
-    onOpenChange: setOpen,
-    elements: {
-      reference: inputInsidePopup ? triggerElement : inputElement,
-      floating: positionerElement
-    }
-  });
-  let ariaHasPopup;
-  let ariaExpanded;
-  if (!inline) {
-    ariaHasPopup = grid ? 'grid' : 'listbox';
-    ariaExpanded = open ? 'true' : 'false';
-  }
-  const role = React.useMemo(() => {
-    const isPlainInput = inputElement?.tagName === 'INPUT';
-    // During SSR and initial hydration, the input ref is not available yet.
-    // Assume an input-like control so combobox ARIA attributes are present.
-    const shouldTreatAsInput = inputElement == null || isPlainInput;
-    const shouldApplyAria = shouldTreatAsInput || open;
-    const reference = shouldTreatAsInput ? {
-      autoComplete: 'off',
-      spellCheck: 'false',
-      autoCorrect: 'off',
-      autoCapitalize: 'none'
-    } : {};
-    if (shouldApplyAria) {
-      reference.role = 'combobox';
-      reference['aria-expanded'] = ariaExpanded;
-      reference['aria-haspopup'] = ariaHasPopup;
-      reference['aria-controls'] = open ? listElement?.id : undefined;
-      reference['aria-autocomplete'] = autoComplete;
-    }
-    return {
-      reference,
-      floating: {
-        role: 'presentation'
-      }
-    };
-  }, [inputElement, open, ariaExpanded, ariaHasPopup, listElement?.id, autoComplete]);
-  const click = useClick(floatingRootContext, {
-    enabled: !readOnly && !disabled && openOnInputClick,
-    event: 'mousedown-only',
-    toggle: false,
-    // Apply a small delay for touch to let iOS viewport centering settle.
-    // This avoids top-bottom flip flickers if the preferred position is "top" when first tapping.
-    touchOpenDelay: inputInsidePopup ? 0 : 50,
-    reason: inputPress
-  });
-  const dismiss = useDismiss(floatingRootContext, {
-    enabled: !readOnly && !disabled && !inline,
-    outsidePressEvent: {
-      mouse: 'sloppy',
-      // The visual viewport (affected by the mobile software keyboard) can be
-      // somewhat small. The user may want to scroll the screen to see more of
-      // the popup.
-      touch: 'intentional'
-    },
-    // Without a popup, let the Escape key bubble the event up to other popups' handlers.
-    bubbles: inline ? true : undefined,
-    outsidePress(event) {
-      const target = getTarget(event);
-      return !contains(triggerElement, target) && !contains(clearRef.current, target) && !contains(chipsContainerRef.current, target) && !contains(inputGroupElement, target);
-    }
-  });
-  const listNavigation = useListNavigation(floatingRootContext, {
-    enabled: !readOnly && !disabled,
-    id,
-    listRef,
-    activeIndex,
-    selectedIndex,
-    virtual: true,
-    loopFocus,
-    allowEscape: loopFocus && !autoHighlightMode,
-    focusItemOnOpen: queryChangedAfterOpen || selectionMode === 'none' && !autoHighlightMode ? false : 'auto',
-    focusItemOnHover: highlightItemOnHover,
-    resetOnPointerLeave: !keepHighlight,
-    // `cols` > 1 enables grid navigation.
-    // Since <Combobox.Row> infers column sizes (and is required when building a grid),
-    // it works correctly even with a value of `2`.
-    // Floating UI tests don't require `role="row"` wrappers, so retains the number API.
-    cols: grid ? 2 : 1,
-    orientation: grid ? 'horizontal' : undefined,
-    disabledIndices: EMPTY_ARRAY,
-    onNavigate(nextActiveIndex, event) {
-      // Retain the highlight only while actually transitioning out or closed.
-      if (!event && !open || transitionStatus === 'ending') {
-        return;
-      }
-      if (!event) {
-        setIndices({
-          activeIndex: nextActiveIndex
-        });
-      } else {
-        setIndices({
-          activeIndex: nextActiveIndex,
-          type: keyboardActiveRef.current ? 'keyboard' : 'pointer'
-        });
-      }
-    }
-  });
-  const {
-    getReferenceProps,
-    getFloatingProps,
-    getItemProps
-  } = useInteractions([role, click, dismiss, listNavigation]);
-  useOnFirstRender(() => {
-    store.update({
-      inline: inlineProp,
-      popupProps: getFloatingProps(),
-      inputProps: getReferenceProps(),
-      triggerProps,
-      getItemProps,
-      setOpen,
-      setInputValue,
-      setSelectedValue,
-      setIndices,
-      onItemHighlighted,
-      handleSelection,
-      forceMount,
-      requestSubmit
-    });
-  });
-  useIsoLayoutEffect(() => {
-    store.update({
-      id,
-      selectedValue,
-      open,
-      mounted,
-      transitionStatus,
-      items,
-      inline: inlineProp,
-      popupProps: getFloatingProps(),
-      inputProps: getReferenceProps(),
-      triggerProps,
-      openMethod,
-      getItemProps,
-      selectionMode,
-      name,
-      disabled,
-      readOnly,
-      required,
-      grid,
-      isGrouped,
-      virtualized,
-      onOpenChangeComplete,
-      openOnInputClick,
-      itemToStringLabel,
-      modal,
-      autoHighlight: autoHighlightMode,
-      isItemEqualToValue,
-      submitOnItemClick,
-      hasInputValue,
-      requestSubmit
-    });
-  }, [store, id, selectedValue, open, mounted, transitionStatus, items, getFloatingProps, getReferenceProps, getItemProps, openMethod, triggerProps, selectionMode, name, disabled, readOnly, required, validation, grid, isGrouped, virtualized, onOpenChangeComplete, openOnInputClick, itemToStringLabel, modal, isItemEqualToValue, submitOnItemClick, hasInputValue, inlineProp, requestSubmit, autoHighlightMode]);
-  const hiddenInputRef = useMergedRefs(inputRefProp, validation.inputRef);
-  const itemsContextValue = React.useMemo(() => ({
-    query,
-    hasItems,
-    filteredItems,
-    flatFilteredItems
-  }), [query, hasItems, filteredItems, flatFilteredItems]);
-  const serializedValue = React.useMemo(() => {
-    if (Array.isArray(fieldRawValue)) {
-      return '';
-    }
-    return stringifyAsValue(fieldRawValue, itemToStringValue);
-  }, [fieldRawValue, itemToStringValue]);
-  const hasMultipleSelection = multiple && Array.isArray(selectedValue) && selectedValue.length > 0;
-  const hiddenInputName = multiple || selectionMode === 'none' ? undefined : name;
-  const hiddenInputs = React.useMemo(() => {
-    if (!multiple || !Array.isArray(selectedValue) || !name) {
-      return null;
-    }
-    return selectedValue.map(value => {
-      const currentSerializedValue = stringifyAsValue(value, itemToStringValue);
-      return /*#__PURE__*/jsx("input", {
-        type: "hidden",
-        name: name,
-        value: currentSerializedValue
-      }, currentSerializedValue);
-    });
-  }, [multiple, selectedValue, name, itemToStringValue]);
-  const children = /*#__PURE__*/jsxs(React.Fragment, {
-    children: [props.children, /*#__PURE__*/jsx("input", {
-      ...validation.getInputValidationProps({
-        // Move focus when the hidden input is focused.
-        onFocus() {
-          if (inputInsidePopup) {
-            triggerElement?.focus();
-            return;
-          }
-          (inputRef.current || triggerElement)?.focus();
-        },
-        // Handle browser autofill.
-        onChange(event) {
-          // Workaround for https://github.com/facebook/react/issues/9023
-          if (event.nativeEvent.defaultPrevented) {
-            return;
-          }
-          const nextValue = event.target.value;
-          const details = createChangeEventDetails(none, event.nativeEvent);
-          function handleChange() {
-            // Browser autofill only writes a single scalar value.
-            if (multiple) {
-              return;
-            }
-            if (selectionMode === 'none') {
-              setDirty(nextValue !== validityData.initialValue);
-              setInputValue(nextValue, details);
-              if (shouldValidateOnChange()) {
-                validation.commit(nextValue);
-              }
-              return;
-            }
-            const matchingValue = valuesRef.current.find(v => {
-              const candidate = stringifyAsValue(v, itemToStringValue);
-              if (candidate.toLowerCase() === nextValue.toLowerCase()) {
-                return true;
-              }
-              return false;
-            });
-            if (matchingValue != null) {
-              setDirty(matchingValue !== validityData.initialValue);
-              setSelectedValue?.(matchingValue, details);
-              if (shouldValidateOnChange()) {
-                validation.commit(matchingValue);
-              }
-            }
-          }
-          if (items) {
-            handleChange();
-          } else {
-            forceMount();
-            queueMicrotask(handleChange);
-          }
-        }
-      }),
-      id: id && hiddenInputName == null ? `${id}-hidden-input` : undefined,
-      name: hiddenInputName,
-      autoComplete: formAutoComplete,
-      disabled: disabled,
-      required: required && !hasMultipleSelection,
-      readOnly: readOnly,
-      value: serializedValue,
-      ref: hiddenInputRef,
-      style: hiddenInputName ? visuallyHiddenInput : visuallyHidden,
-      tabIndex: -1,
-      "aria-hidden": true
-    }), hiddenInputs]
-  });
-  return /*#__PURE__*/jsx(ComboboxRootContext.Provider, {
-    value: store,
-    children: /*#__PURE__*/jsx(ComboboxFloatingContext.Provider, {
-      value: floatingRootContext,
-      children: /*#__PURE__*/jsx(ComboboxDerivedItemsContext.Provider, {
-        value: itemsContextValue,
-        children: /*#__PURE__*/jsx(ComboboxInputValueContext.Provider, {
-          value: inputValue,
-          children: children
-        })
-      })
-    })
-  });
-}
-
-function AutocompleteRoot(props) {
-  const {
-    openOnInputClick = false,
-    value,
-    defaultValue,
-    onValueChange,
-    mode = 'list',
-    itemToStringValue,
-    ...other
-  } = props;
-  const enableInline = mode === 'inline' || mode === 'both';
-  const staticItems = mode === 'inline' || mode === 'none';
-
-  // Mirror the typed value for uncontrolled usage so we can compose the temporary
-  // inline input value.
-  const isControlled = value !== undefined;
-  const [internalValue, setInternalValue] = React.useState(defaultValue ?? '');
-  const [inlineInputValue, setInlineInputValue] = React.useState('');
-  React.useEffect(() => {
-    if (isControlled) {
-      setInlineInputValue('');
-    }
-  }, [value, isControlled]);
-
-  // Compose the input value shown to the user: inline value takes precedence when present.
-  let resolvedInputValue;
-  if (enableInline && inlineInputValue !== '') {
-    resolvedInputValue = inlineInputValue;
-  } else if (isControlled) {
-    resolvedInputValue = value ?? '';
-  } else {
-    resolvedInputValue = internalValue;
-  }
-  const handleValueChange = useStableCallback((nextValue, eventDetails) => {
-    setInlineInputValue('');
-    if (!isControlled) {
-      setInternalValue(nextValue);
-    }
-    onValueChange?.(nextValue, eventDetails);
-  });
-  const collator = useCoreFilter();
-  const baseFilter = React.useMemo(() => {
-    if (other.filter !== undefined) {
-      return other.filter;
-    }
-    return collator.contains;
-  }, [other.filter, collator]);
-  const resolvedQuery = String(isControlled ? value : internalValue).trim();
-
-  // In "both", wrap filtering to use only the typed value, ignoring the inline value.
-  const resolvedFilter = React.useMemo(() => {
-    if (mode !== 'both') {
-      return staticItems ? null : baseFilter;
-    }
-    if (baseFilter === null) {
-      return null;
+    if (baseFilter === null) {
+      return null;
     }
     return (item, _query, toString) => {
       return baseFilter(item, resolvedQuery, toString);
     };
-  }, [baseFilter, mode, resolvedQuery, staticItems]);
-  const handleItemHighlighted = useStableCallback((highlightedValue, eventDetails) => {
-    props.onItemHighlighted?.(highlightedValue, eventDetails);
-    if (eventDetails.reason === pointer) {
-      return;
-    }
-    if (enableInline) {
-      if (highlightedValue == null) {
-        setInlineInputValue('');
-      } else {
-        setInlineInputValue(stringifyAsLabel(highlightedValue, itemToStringValue));
-      }
-    } else {
-      setInlineInputValue('');
-    }
-  });
-  return /*#__PURE__*/jsx(AriaCombobox, {
-    ...other,
-    itemToStringLabel: itemToStringValue,
-    openOnInputClick: openOnInputClick,
-    selectionMode: "none",
-    fillInputOnItemPress: true,
-    filter: resolvedFilter,
-    autoComplete: mode,
-    inputValue: resolvedInputValue,
-    defaultInputValue: defaultValue,
-    onInputValueChange: handleValueChange,
-    onItemHighlighted: handleItemHighlighted
-  });
-}
-
-function AutocompleteValue(props) {
-  const {
-    children
-  } = props;
-  const inputValue = useComboboxInputValueContext();
-  let returnValue = null;
-  if (typeof children === 'function') {
-    returnValue = children(String(inputValue));
-  } else if (children != null) {
-    returnValue = children;
-  } else {
-    returnValue = inputValue;
-  }
-  return /*#__PURE__*/jsx(React.Fragment, {
-    children: returnValue
-  });
-}
-
-const triggerStateAttributesMapping = {
-  ...pressableTriggerOpenStateMapping,
-  ...fieldValidityMapping,
-  popupSide: side => side ? {
-    'data-popup-side': side
-  } : null,
-  listEmpty: empty => empty ? {
-    'data-list-empty': ''
-  } : null
-};
-
-function getDefaultLabelId(id) {
-  return id == null ? undefined : `${id}-label`;
-}
-function resolveAriaLabelledBy(fieldLabelId, localLabelId) {
-  return fieldLabelId ?? localLabelId;
-}
-
-const BOUNDARY_OFFSET = 2;
-
-/**
- * A button that opens the popup.
- * Renders a `<button>` element.
- */
-const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTrigger(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    nativeButton = true,
-    disabled: disabledProp = false,
-    id: idProp,
-    ...elementProps
-  } = componentProps;
-  const {
-    state: fieldState,
-    disabled: fieldDisabled,
-    setTouched,
-    setFocused,
-    validationMode,
-    validation
-  } = useFieldRootContext();
-  const {
-    labelId: fieldLabelId
-  } = useLabelableContext();
-  const store = useComboboxRootContext();
-  const {
-    filteredItems
-  } = useComboboxDerivedItemsContext();
-  const selectionMode = useStore(store, selectors.selectionMode);
-  const comboboxDisabled = useStore(store, selectors.disabled);
-  const readOnly = useStore(store, selectors.readOnly);
-  const required = useStore(store, selectors.required);
-  const mounted = useStore(store, selectors.mounted);
-  const popupSideValue = useStore(store, selectors.popupSide);
-  const positionerElement = useStore(store, selectors.positionerElement);
-  const listElement = useStore(store, selectors.listElement);
-  const triggerProps = useStore(store, selectors.triggerProps);
-  const triggerElement = useStore(store, selectors.triggerElement);
-  const inputInsidePopup = useStore(store, selectors.inputInsidePopup);
-  const rootId = useStore(store, selectors.id);
-  const comboboxLabelId = useStore(store, selectors.labelId);
-  const open = useStore(store, selectors.open);
-  const selectedValue = useStore(store, selectors.selectedValue);
-  const activeIndex = useStore(store, selectors.activeIndex);
-  const selectedIndex = useStore(store, selectors.selectedIndex);
-  const hasSelectedValue = useStore(store, selectors.hasSelectedValue);
-  const floatingRootContext = useComboboxFloatingContext();
-  const inputValue = useComboboxInputValueContext();
-  const focusTimeout = useTimeout();
-  const disabled = fieldDisabled || comboboxDisabled || disabledProp;
-  const listEmpty = filteredItems.length === 0;
-  const popupSide = mounted && positionerElement ? popupSideValue : null;
-  useLabelableId({
-    id: inputInsidePopup ? idProp : undefined
-  });
-  const id = inputInsidePopup ? idProp ?? rootId : idProp;
-  const ariaLabelledBy = resolveAriaLabelledBy(fieldLabelId, comboboxLabelId);
-  const currentPointerTypeRef = React.useRef('');
-  function trackPointerType(event) {
-    currentPointerTypeRef.current = event.pointerType;
-  }
-  const domReference = floatingRootContext.useState('domReferenceElement');
-
-  // Update the floating root context to use the trigger element when it differs from the current reference.
-  // This ensures useClick and useTypeahead attach handlers to the correct element.
-  React.useEffect(() => {
-    if (!inputInsidePopup) {
-      return;
-    }
-    if (triggerElement && triggerElement !== domReference) {
-      floatingRootContext.set('domReferenceElement', triggerElement);
-    }
-  }, [triggerElement, domReference, floatingRootContext, inputInsidePopup]);
-  const {
-    reference: triggerTypeaheadProps
-  } = useTypeahead(floatingRootContext, {
-    enabled: !open && !readOnly && !comboboxDisabled && selectionMode === 'single',
-    listRef: store.state.labelsRef,
-    activeIndex,
-    selectedIndex,
-    onMatch(index) {
-      const nextSelectedValue = store.state.valuesRef.current[index];
-      if (nextSelectedValue !== undefined) {
-        store.state.setSelectedValue(nextSelectedValue, createChangeEventDetails('none'));
-      }
-    }
-  });
-  const {
-    reference: triggerClickProps
-  } = useClick(floatingRootContext, {
-    enabled: !readOnly && !comboboxDisabled,
-    event: 'mousedown'
-  });
-  const {
-    buttonRef,
-    getButtonProps
-  } = useButton({
-    native: nativeButton,
-    disabled
-  });
-  const state = {
-    ...fieldState,
-    open,
-    disabled,
-    popupSide,
-    listEmpty,
-    placeholder: !hasSelectedValue
-  };
-  const setTriggerElement = useStableCallback(element => {
-    store.set('triggerElement', element);
-  });
-  const element = useRenderElement('button', componentProps, {
-    ref: [forwardedRef, buttonRef, setTriggerElement],
-    state,
-    props: [triggerProps, triggerClickProps, triggerTypeaheadProps, {
-      id,
-      tabIndex: inputInsidePopup ? 0 : -1,
-      role: inputInsidePopup ? 'combobox' : undefined,
-      'aria-expanded': open ? 'true' : 'false',
-      'aria-haspopup': inputInsidePopup ? 'dialog' : 'listbox',
-      'aria-controls': open ? listElement?.id : undefined,
-      'aria-required': inputInsidePopup ? required || undefined : undefined,
-      'aria-labelledby': ariaLabelledBy,
-      onPointerDown: trackPointerType,
-      onPointerEnter: trackPointerType,
-      onFocus() {
-        setFocused(true);
-        if (disabled || readOnly) {
-          return;
-        }
-        focusTimeout.start(0, store.state.forceMount);
-      },
-      onBlur(event) {
-        // If focus is moving into the popup, don't count it as a blur.
-        if (contains(positionerElement, event.relatedTarget)) {
-          return;
-        }
-        setTouched(true);
-        setFocused(false);
-        if (validationMode === 'onBlur') {
-          const valueToValidate = selectionMode === 'none' ? inputValue : selectedValue;
-          validation.commit(valueToValidate);
-        }
-      },
-      onMouseDown(event) {
-        if (disabled || readOnly) {
-          return;
-        }
-        if (!inputInsidePopup) {
-          floatingRootContext.set('domReferenceElement', event.currentTarget);
-        }
-
-        // Ensure items are registered for initial selection highlight.
-        store.state.forceMount();
-        if (currentPointerTypeRef.current !== 'touch') {
-          store.state.inputRef.current?.focus();
-          if (!inputInsidePopup) {
-            event.preventDefault();
-          }
-        }
-        if (open) {
-          return;
-        }
-        const doc = ownerDocument(event.currentTarget);
-        function handleMouseUp(mouseEvent) {
-          if (!triggerElement) {
-            return;
-          }
-          const mouseUpTarget = getTarget(mouseEvent);
-          const positioner = store.state.positionerElement;
-          const list = store.state.listElement;
-          if (contains(triggerElement, mouseUpTarget) || contains(positioner, mouseUpTarget) || contains(list, mouseUpTarget) || mouseUpTarget === triggerElement) {
-            return;
-          }
-          const bounds = getPseudoElementBounds(triggerElement);
-          const withinHorizontal = mouseEvent.clientX >= bounds.left - BOUNDARY_OFFSET && mouseEvent.clientX <= bounds.right + BOUNDARY_OFFSET;
-          const withinVertical = mouseEvent.clientY >= bounds.top - BOUNDARY_OFFSET && mouseEvent.clientY <= bounds.bottom + BOUNDARY_OFFSET;
-          if (withinHorizontal && withinVertical) {
-            return;
-          }
-          store.state.setOpen(false, createChangeEventDetails('cancel-open', mouseEvent));
-        }
-        if (inputInsidePopup) {
-          doc.addEventListener('mouseup', handleMouseUp, {
-            once: true
-          });
-        }
-      },
-      onKeyDown(event) {
-        if (disabled || readOnly) {
-          return;
-        }
-        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
-          stopEvent(event);
-          store.state.setOpen(true, createChangeEventDetails(listNavigation, event.nativeEvent));
-          store.state.inputRef.current?.focus();
-        }
-      }
-    }, validation ? validation.getValidationProps(elementProps) : elementProps, getButtonProps],
-    stateAttributesMapping: triggerStateAttributesMapping
-  });
-  return element;
-});
-if (process.env.NODE_ENV !== "production") ComboboxTrigger.displayName = "ComboboxTrigger";
-
-const ComboboxChipsContext = /*#__PURE__*/React.createContext(undefined);
-if (process.env.NODE_ENV !== "production") ComboboxChipsContext.displayName = "ComboboxChipsContext";
-function useComboboxChipsContext() {
-  return React.useContext(ComboboxChipsContext);
-}
-
-const ComboboxPositionerContext = /*#__PURE__*/React.createContext(undefined);
-if (process.env.NODE_ENV !== "production") ComboboxPositionerContext.displayName = "ComboboxPositionerContext";
-function useComboboxPositionerContext(optional) {
-  const context = React.useContext(ComboboxPositionerContext);
-  if (context === undefined && !optional) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Combobox.Popup> and <Combobox.Arrow> must be used within the <Combobox.Positioner> component' : formatErrorMessage(21));
-  }
-  return context;
-}
-
-/**
- * @internal
- */
-const ComboboxInternalDismissButton = /*#__PURE__*/React.forwardRef(function ComboboxInternalDismissButton(_, forwardedRef) {
-  const store = useComboboxRootContext();
-  const {
-    buttonRef,
-    getButtonProps
-  } = useButton({
-    native: false
-  });
-  const mergedRef = useMergedRefs(forwardedRef, buttonRef);
-  const handleDismiss = useStableCallback(event => {
-    store.state.setOpen(false, createChangeEventDetails(closePress, event.nativeEvent, event.currentTarget));
-  });
-  const dismissProps = getButtonProps({
-    onClick: handleDismiss
-  });
-  return /*#__PURE__*/jsx("span", {
-    ref: mergedRef,
-    ...dismissProps,
-    "aria-label": "Dismiss",
-    tabIndex: undefined,
-    style: visuallyHiddenInput
-  });
-});
-if (process.env.NODE_ENV !== "production") ComboboxInternalDismissButton.displayName = "ComboboxInternalDismissButton";
-
-const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInput(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    disabled: disabledProp = false,
-    id: idProp,
-    ...elementProps
-  } = componentProps;
-  const {
-    state: fieldState,
-    disabled: fieldDisabled,
-    setTouched,
-    setFocused,
-    validationMode,
-    validation
-  } = useFieldRootContext();
-  const {
-    labelId: fieldLabelId
-  } = useLabelableContext();
-  const comboboxChipsContext = useComboboxChipsContext();
-  const positioning = useComboboxPositionerContext(true);
-  const hasPositionerParent = Boolean(positioning);
-  const store = useComboboxRootContext();
-  const {
-    filteredItems
-  } = useComboboxDerivedItemsContext();
-  // `inputValue` can't be placed in the store.
-  // https://github.com/mui/base-ui/issues/2703
-  const inputValue = useComboboxInputValueContext();
-  const direction = useDirection();
-  const required = useStore(store, selectors.required);
-  const comboboxDisabled = useStore(store, selectors.disabled);
-  const readOnly = useStore(store, selectors.readOnly);
-  const name = useStore(store, selectors.name);
-  const selectionMode = useStore(store, selectors.selectionMode);
-  const autoHighlightMode = useStore(store, selectors.autoHighlight);
-  const inputProps = useStore(store, selectors.inputProps);
-  const triggerProps = useStore(store, selectors.triggerProps);
-  const open = useStore(store, selectors.open);
-  const mounted = useStore(store, selectors.mounted);
-  const selectedValue = useStore(store, selectors.selectedValue);
-  const popupSideValue = useStore(store, selectors.popupSide);
-  const positionerElement = useStore(store, selectors.positionerElement);
-  const rootId = useStore(store, selectors.id);
-  const inline = useStore(store, selectors.inline);
-  const modal = useStore(store, selectors.modal);
-  const autoHighlightEnabled = Boolean(autoHighlightMode);
-  const popupSide = mounted && positionerElement ? popupSideValue : null;
-  const disabled = fieldDisabled || comboboxDisabled || disabledProp;
-  const listEmpty = filteredItems.length === 0;
-  const isInsidePopup = hasPositionerParent || inline;
-  const focusManagerModal = !isInsidePopup || modal;
-  const id = useBaseUiId(idProp ?? (!isInsidePopup ? rootId : undefined));
-  const ariaLabelledBy = resolveAriaLabelledBy(fieldLabelId, undefined);
-  const fieldStateForInput = hasPositionerParent ? DEFAULT_FIELD_STATE_ATTRIBUTES : fieldState;
-  const [composingValue, setComposingValue] = React.useState(null);
-  const isComposingRef = React.useRef(false);
-  const lastActiveIndexRef = React.useRef(null);
-  const shouldRestoreActiveIndexRef = React.useRef(false);
-  const setInputElement = useStableCallback(element => {
-    const nextIsInsidePopup = hasPositionerParent || store.state.inline;
-    if (nextIsInsidePopup && !store.state.hasInputValue) {
-      store.state.setInputValue('', createChangeEventDetails(none));
-    }
-    store.update({
-      inputElement: element,
-      inputInsidePopup: nextIsInsidePopup
-    });
-  });
-  const validationProps = hasPositionerParent || !validation ? elementProps : validation.getValidationProps(elementProps);
-  const state = {
-    ...fieldStateForInput,
-    open,
-    disabled,
-    readOnly,
-    popupSide,
-    listEmpty
-  };
-  function handleKeyDown(event) {
-    if (!comboboxChipsContext) {
-      return undefined;
-    }
-    let nextIndex;
-    const {
-      highlightedChipIndex
-    } = comboboxChipsContext;
-    if (highlightedChipIndex !== undefined) {
-      if (event.key === 'ArrowLeft') {
-        event.preventDefault();
-        if (highlightedChipIndex > 0) {
-          nextIndex = highlightedChipIndex - 1;
-        } else {
-          nextIndex = undefined;
-        }
-      } else if (event.key === 'ArrowRight') {
-        event.preventDefault();
-        if (highlightedChipIndex < selectedValue.length - 1) {
-          nextIndex = highlightedChipIndex + 1;
-        } else {
-          nextIndex = undefined;
-        }
-      } else if (event.key === 'Backspace' || event.key === 'Delete') {
-        event.preventDefault();
-        // Move highlight appropriately after removal.
-        const computedNextIndex = highlightedChipIndex >= selectedValue.length - 1 ? selectedValue.length - 2 : highlightedChipIndex;
-        // If the computed index is negative, treat it as no highlight.
-        nextIndex = computedNextIndex >= 0 ? computedNextIndex : undefined;
-        store.state.setIndices({
-          activeIndex: null,
-          selectedIndex: null,
-          type: 'keyboard'
-        });
-      }
-      return nextIndex;
-    }
-
-    // Handle navigation when no chip is highlighted
-    if (event.key === 'ArrowLeft' && (event.currentTarget.selectionStart ?? 0) === 0 && selectedValue.length > 0) {
-      event.preventDefault();
-      const lastChipIndex = Math.max(selectedValue.length - 1, 0);
-      nextIndex = lastChipIndex;
-    } else if (event.key === 'Backspace' && event.currentTarget.value === '' && selectedValue.length > 0) {
-      store.state.setIndices({
-        activeIndex: null,
-        selectedIndex: null,
-        type: 'keyboard'
-      });
-      event.preventDefault();
-    }
-    return nextIndex;
-  }
-  const element = useRenderElement('input', componentProps, {
-    state,
-    ref: [forwardedRef, store.state.inputRef, setInputElement],
-    props: [inputProps, triggerProps, {
-      type: 'text',
-      value: componentProps.value ?? composingValue ?? inputValue,
-      'aria-readonly': readOnly || undefined,
-      'aria-required': required || undefined,
-      'aria-labelledby': ariaLabelledBy,
-      disabled,
-      readOnly,
-      required: selectionMode === 'none' ? required : undefined,
-      ...(selectionMode === 'none' && name && {
-        name
-      }),
-      id,
-      onFocus() {
-        setFocused(true);
-        if (!inline || !shouldRestoreActiveIndexRef.current) {
-          return;
-        }
-        shouldRestoreActiveIndexRef.current = false;
-        const nextActiveIndex = lastActiveIndexRef.current;
-        if (nextActiveIndex == null ||
-        // `valuesRef` can be sparse, so guard against restoring a removed slot.
-        !Object.hasOwn(store.state.valuesRef.current, nextActiveIndex)) {
-          return;
-        }
-        store.state.setIndices({
-          activeIndex: nextActiveIndex
-        });
-      },
-      onBlur() {
-        setTouched(true);
-        setFocused(false);
-        const activeIndex = store.state.activeIndex;
-        if (inline && activeIndex !== null && autoHighlightMode !== 'always') {
-          lastActiveIndexRef.current = activeIndex;
-          shouldRestoreActiveIndexRef.current = true;
-          store.state.setIndices({
-            activeIndex: null
-          });
-        }
-        if (validationMode === 'onBlur') {
-          const valueToValidate = selectionMode === 'none' ? inputValue : selectedValue;
-          validation.commit(valueToValidate);
-        }
-      },
-      onCompositionStart(event) {
-        if (isAndroid) {
-          return;
-        }
-        isComposingRef.current = true;
-        setComposingValue(event.currentTarget.value);
-      },
-      onCompositionEnd(event) {
-        isComposingRef.current = false;
-        const next = event.currentTarget.value;
-        setComposingValue(null);
-        store.state.setInputValue(next, createChangeEventDetails(inputChange, event.nativeEvent));
-      },
-      onChange(event) {
-        // Autofill may not provide `inputType` (Chrome) or may report
-        // `insertReplacementText` (Firefox).
-        const inputType = event.nativeEvent.inputType;
-        const autofillLikeInput = !inputType || inputType === 'insertReplacementText';
-        const shouldOpenOnInput = isComposingRef.current || !autofillLikeInput;
-
-        // During IME composition, avoid propagating controlled updates to prevent
-        // filtering the options prematurely so `Empty` won't show incorrectly.
-        // We can't rely on this check for Android due to how it handles composition
-        // events with some keyboards (e.g. Samsung keyboard with predictive text on
-        // treats all text as always-composing).
-        // https://github.com/mui/base-ui/issues/2942
-        if (isComposingRef.current) {
-          const nextVal = event.currentTarget.value;
-          setComposingValue(nextVal);
-          if (nextVal === '' && !store.state.openOnInputClick && !store.state.inputInsidePopup) {
-            store.state.setOpen(false, createChangeEventDetails(inputClear, event.nativeEvent));
-          }
-          const trimmed = nextVal.trim();
-          const shouldMaintainHighlight = autoHighlightEnabled && trimmed !== '';
-          if (!readOnly && !disabled && trimmed) {
-            if (shouldOpenOnInput) {
-              store.state.setOpen(true, createChangeEventDetails(inputChange, event.nativeEvent));
-              if (!autoHighlightEnabled) {
-                store.state.setIndices({
-                  activeIndex: null,
-                  selectedIndex: null,
-                  type: store.state.keyboardActiveRef.current ? 'keyboard' : 'pointer'
-                });
-              }
-            }
-          }
-          if (open && store.state.activeIndex !== null && !shouldMaintainHighlight) {
-            store.state.setIndices({
-              activeIndex: null,
-              selectedIndex: null,
-              type: store.state.keyboardActiveRef.current ? 'keyboard' : 'pointer'
-            });
-          }
-          return;
-        }
-        store.state.setInputValue(event.currentTarget.value, createChangeEventDetails(inputChange, event.nativeEvent));
-        const empty = event.currentTarget.value === '';
-        const clearDetails = createChangeEventDetails(inputClear, event.nativeEvent);
-        if (empty && !store.state.inputInsidePopup) {
-          if (selectionMode === 'single') {
-            store.state.setSelectedValue(null, clearDetails);
-          }
-          if (!store.state.openOnInputClick) {
-            store.state.setOpen(false, clearDetails);
-          }
-        }
-        const trimmed = event.currentTarget.value.trim();
-        if (!readOnly && !disabled && trimmed) {
-          if (shouldOpenOnInput) {
-            store.state.setOpen(true, createChangeEventDetails(inputChange, event.nativeEvent));
-            // When autoHighlight is enabled, keep the highlight (will be set to 0 in root).
-            if (!autoHighlightEnabled) {
-              store.state.setIndices({
-                activeIndex: null,
-                selectedIndex: null,
-                type: store.state.keyboardActiveRef.current ? 'keyboard' : 'pointer'
-              });
-            }
-          }
-        }
-
-        // When the user types, ensure the list resets its highlight so that
-        // virtual focus returns to the input (aria-activedescendant is
-        // cleared).
-        if (open && store.state.activeIndex !== null && !autoHighlightEnabled) {
-          store.state.setIndices({
-            activeIndex: null,
-            selectedIndex: null,
-            type: store.state.keyboardActiveRef.current ? 'keyboard' : 'pointer'
-          });
-        }
-      },
-      onKeyDown(event) {
-        if (disabled || readOnly) {
-          return;
-        }
-        if (event.ctrlKey || event.shiftKey || event.altKey || event.metaKey) {
-          return;
-        }
-        store.state.keyboardActiveRef.current = true;
-        const input = event.currentTarget;
-        const scrollAmount = input.scrollWidth - input.clientWidth;
-        const isRTL = direction === 'rtl';
-        if (event.key === 'Home') {
-          stopEvent(event);
-          const cursor = isFirefox && isRTL ? input.value.length : 0;
-          input.setSelectionRange(cursor, cursor);
-          input.scrollLeft = 0;
-          return;
-        }
-        if (event.key === 'End') {
-          stopEvent(event);
-          const cursor = isFirefox && isRTL ? 0 : input.value.length;
-          input.setSelectionRange(cursor, cursor);
-          input.scrollLeft = isRTL ? -scrollAmount : scrollAmount;
-          return;
-        }
-        if (!mounted && event.key === 'Escape') {
-          const isClear = selectionMode === 'multiple' && Array.isArray(selectedValue) ? selectedValue.length === 0 : selectedValue === null;
-          const details = createChangeEventDetails(escapeKey, event.nativeEvent);
-          const value = selectionMode === 'multiple' ? [] : null;
-          store.state.setInputValue('', details);
-          store.state.setSelectedValue(value, details);
-          if (!isClear && !store.state.inline && !details.isPropagationAllowed) {
-            event.stopPropagation();
-          }
-          return;
-        }
-
-        // Handle deletion when no chip is highlighted and the input is empty.
-        if (comboboxChipsContext && event.key === 'Backspace' && input.value === '' && comboboxChipsContext.highlightedChipIndex === undefined && Array.isArray(selectedValue) && selectedValue.length > 0) {
-          const newValue = selectedValue.slice(0, -1);
-          // If the removed item was also the active (highlighted) item, clear highlight
-          store.state.setIndices({
-            activeIndex: null,
-            selectedIndex: null,
-            type: store.state.keyboardActiveRef.current ? 'keyboard' : 'pointer'
-          });
-          store.state.setSelectedValue(newValue, createChangeEventDetails(none, event.nativeEvent));
-          return;
-        }
-        const hadHighlightedChip = comboboxChipsContext?.highlightedChipIndex !== undefined;
-        const nextIndex = handleKeyDown(event);
-        comboboxChipsContext?.setHighlightedChipIndex(nextIndex);
-        if (nextIndex !== undefined) {
-          comboboxChipsContext?.chipsRef.current[nextIndex]?.focus();
-        } else if (hadHighlightedChip) {
-          store.state.inputRef.current?.focus();
-        }
-
-        // event.isComposing
-        if (event.which === 229) {
-          return;
-        }
-        if (event.key === 'Enter' && open) {
-          const activeIndex = store.state.activeIndex;
-          const nativeEvent = event.nativeEvent;
-          if (activeIndex === null) {
-            if (inline) {
-              return;
-            }
-
-            // Allow form submission when no item is highlighted.
-            store.state.setOpen(false, createChangeEventDetails(none, nativeEvent));
-            return;
-          }
-          stopEvent(event);
-          const listItem = store.state.listRef.current[activeIndex];
-          if (listItem) {
-            store.state.selectionEventRef.current = nativeEvent;
-            listItem.click();
-            store.state.selectionEventRef.current = null;
-          }
-        }
-      },
-      onPointerMove() {
-        store.state.keyboardActiveRef.current = false;
-      },
-      onPointerDown() {
-        store.state.keyboardActiveRef.current = false;
-      }
-    }, validationProps],
-    stateAttributesMapping: triggerStateAttributesMapping
-  });
-  return /*#__PURE__*/jsxs(React.Fragment, {
-    children: [open && focusManagerModal && /*#__PURE__*/jsx(ComboboxInternalDismissButton, {
-      ref: store.state.startDismissRef
-    }), element]
-  });
-});
-if (process.env.NODE_ENV !== "production") ComboboxInput.displayName = "ComboboxInput";
-
-/**
- * A wrapper for the input and its associated controls.
- * Renders a `<div>` element.
- */
-const ComboboxInputGroup = /*#__PURE__*/React.forwardRef(function ComboboxInputGroup(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    ...elementProps
-  } = componentProps;
-  const {
-    state: fieldState,
-    disabled: fieldDisabled
-  } = useFieldRootContext();
-  const store = useComboboxRootContext();
-  const {
-    filteredItems
-  } = useComboboxDerivedItemsContext();
-  const open = useStore(store, selectors.open);
-  const mounted = useStore(store, selectors.mounted);
-  const popupSideValue = useStore(store, selectors.popupSide);
-  const positionerElement = useStore(store, selectors.positionerElement);
-  const comboboxDisabled = useStore(store, selectors.disabled);
-  const readOnly = useStore(store, selectors.readOnly);
-  const hasSelectedValue = useStore(store, selectors.hasSelectedValue);
-  const selectionMode = useStore(store, selectors.selectionMode);
-  const popupSide = mounted && positionerElement ? popupSideValue : null;
-  const disabled = fieldDisabled || comboboxDisabled;
-  const listEmpty = filteredItems.length === 0;
-  const placeholder = selectionMode === 'none' ? false : !hasSelectedValue;
-  const state = {
-    ...fieldState,
-    open,
-    disabled,
-    readOnly,
-    popupSide,
-    listEmpty,
-    placeholder
-  };
-  const setInputGroupElement = useStableCallback(element => {
-    store.set('inputGroupElement', element);
-  });
-  return useRenderElement('div', componentProps, {
-    ref: [forwardedRef, setInputGroupElement],
-    props: [{
-      role: 'group'
-    }, elementProps],
-    state,
-    stateAttributesMapping: triggerStateAttributesMapping
-  });
-});
-if (process.env.NODE_ENV !== "production") ComboboxInputGroup.displayName = "ComboboxInputGroup";
-
-/**
- * An icon that indicates that the trigger button opens the popup.
- * Renders a `<span>` element.
- */
-const ComboboxIcon = /*#__PURE__*/React.forwardRef(function ComboboxIcon(componentProps, forwardedRef) {
-  const {
-    className,
-    render,
-    ...elementProps
-  } = componentProps;
-  const element = useRenderElement('span', componentProps, {
-    ref: forwardedRef,
-    props: [{
-      'aria-hidden': true,
-      children: '▼'
-    }, elementProps]
-  });
-  return element;
-});
-if (process.env.NODE_ENV !== "production") ComboboxIcon.displayName = "ComboboxIcon";
-
-const stateAttributesMapping$8 = {
-  ...transitionStatusMapping,
-  ...triggerOpenStateMapping
-};
-
-/**
- * Clears the value when clicked.
- * Renders a `<button>` element.
- */
-const ComboboxClear = /*#__PURE__*/React.forwardRef(function ComboboxClear(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    disabled: disabledProp = false,
-    nativeButton = true,
-    keepMounted = false,
-    ...elementProps
-  } = componentProps;
-  const {
-    disabled: fieldDisabled
-  } = useFieldRootContext();
-  const store = useComboboxRootContext();
-  const selectionMode = useStore(store, selectors.selectionMode);
-  const comboboxDisabled = useStore(store, selectors.disabled);
-  const readOnly = useStore(store, selectors.readOnly);
-  const open = useStore(store, selectors.open);
-  const selectedValue = useStore(store, selectors.selectedValue);
-  const hasSelectionChips = useStore(store, selectors.hasSelectionChips);
-  const inputValue = useComboboxInputValueContext();
-  let visible = false;
-  if (selectionMode === 'none') {
-    visible = inputValue !== '';
-  } else if (selectionMode === 'single') {
-    visible = selectedValue != null;
-  } else {
-    visible = hasSelectionChips;
-  }
-  const disabled = fieldDisabled || comboboxDisabled || disabledProp;
-  const {
-    buttonRef,
-    getButtonProps
-  } = useButton({
-    native: nativeButton,
-    disabled
-  });
-  const {
-    mounted,
-    transitionStatus,
-    setMounted
-  } = useTransitionStatus(visible);
-  const state = {
-    disabled,
-    open,
-    transitionStatus
-  };
-  useOpenChangeComplete({
-    open: visible,
-    ref: store.state.clearRef,
-    onComplete() {
-      if (!visible) {
-        setMounted(false);
-      }
-    }
-  });
-  const element = useRenderElement('button', componentProps, {
-    state,
-    ref: [forwardedRef, buttonRef, store.state.clearRef],
-    props: [{
-      tabIndex: -1,
-      children: 'x',
-      // Avoid stealing focus from the input.
-      onMouseDown(event) {
-        event.preventDefault();
-      },
-      onClick(event) {
-        if (disabled || readOnly) {
-          return;
-        }
-        const keyboardActiveRef = store.state.keyboardActiveRef;
-        store.state.setInputValue('', createChangeEventDetails(clearPress, event.nativeEvent));
-        if (selectionMode !== 'none') {
-          store.state.setSelectedValue(Array.isArray(selectedValue) ? [] : null, createChangeEventDetails(clearPress, event.nativeEvent));
-          store.state.setIndices({
-            activeIndex: null,
-            selectedIndex: null,
-            type: keyboardActiveRef.current ? 'keyboard' : 'pointer'
-          });
-        } else {
-          store.state.setIndices({
-            activeIndex: null,
-            type: keyboardActiveRef.current ? 'keyboard' : 'pointer'
-          });
-        }
-        store.state.inputRef.current?.focus();
-      }
-    }, elementProps, getButtonProps],
-    stateAttributesMapping: stateAttributesMapping$8
-  });
-  const shouldRender = keepMounted || mounted;
-  if (!shouldRender) {
-    return null;
-  }
-  return element;
-});
-if (process.env.NODE_ENV !== "production") ComboboxClear.displayName = "ComboboxClear";
-
-const GroupCollectionContext = /*#__PURE__*/React.createContext(null);
-if (process.env.NODE_ENV !== "production") GroupCollectionContext.displayName = "GroupCollectionContext";
-function useGroupCollectionContext() {
-  return React.useContext(GroupCollectionContext);
-}
-function GroupCollectionProvider(props) {
-  const {
-    children,
-    items
-  } = props;
-  const contextValue = React.useMemo(() => ({
-    items
-  }), [items]);
-  return /*#__PURE__*/jsx(GroupCollectionContext.Provider, {
-    value: contextValue,
-    children: children
-  });
-}
-
-function ComboboxCollection(props) {
-  const {
-    children
-  } = props;
-  const {
-    filteredItems
-  } = useComboboxDerivedItemsContext();
-  const groupContext = useGroupCollectionContext();
-  const itemsToRender = groupContext ? groupContext.items : filteredItems;
-  if (!itemsToRender) {
-    return null;
-  }
-  return /*#__PURE__*/jsx(React.Fragment, {
-    children: itemsToRender.map(children)
-  });
-}
-
-const ComboboxList = /*#__PURE__*/React.forwardRef(function ComboboxList(componentProps, forwardedRef) {
-  var _ComboboxCollection;
-  const {
-    render,
-    className,
-    children,
-    ...elementProps
-  } = componentProps;
-  const store = useComboboxRootContext();
-  const floatingRootContext = useComboboxFloatingContext();
-  const hasPositionerContext = Boolean(useComboboxPositionerContext(true));
-  const {
-    filteredItems
-  } = useComboboxDerivedItemsContext();
-  const items = useStore(store, selectors.items);
-  const labelsRef = useStore(store, selectors.labelsRef);
-  const listRef = useStore(store, selectors.listRef);
-  const selectionMode = useStore(store, selectors.selectionMode);
-  const grid = useStore(store, selectors.grid);
-  const popupProps = useStore(store, selectors.popupProps);
-  const disabled = useStore(store, selectors.disabled);
-  const readOnly = useStore(store, selectors.readOnly);
-  const virtualized = useStore(store, selectors.virtualized);
-  const multiple = selectionMode === 'multiple';
-  const empty = filteredItems.length === 0;
-  const setPositionerElement = useStableCallback(element => {
-    store.set('positionerElement', element);
-  });
-  const setListElement = useStableCallback(element => {
-    store.set('listElement', element);
-  });
-
-  // Support "closed template" API: if children is a function, implicitly wrap it
-  // with a Combobox.Collection that reads items from context/root.
-  // Ensures this component's `popupProps` subscription does not cause <Combobox.Item>
-  // to re-render on every active index change.
-  const resolvedChildren = React.useMemo(() => {
-    if (typeof children === 'function') {
-      return _ComboboxCollection || (_ComboboxCollection = /*#__PURE__*/jsx(ComboboxCollection, {
-        children: children
-      }));
-    }
-    return children;
-  }, [children]);
-  const state = {
-    empty
-  };
-  const floatingId = floatingRootContext.useState('floatingId');
-  const element = useRenderElement('div', componentProps, {
-    state,
-    ref: [forwardedRef, setListElement, hasPositionerContext ? null : setPositionerElement],
-    props: [popupProps, {
-      children: resolvedChildren,
-      tabIndex: -1,
-      id: floatingId,
-      role: grid ? 'grid' : 'listbox',
-      'aria-multiselectable': multiple ? 'true' : undefined,
-      onKeyDown(event) {
-        if (disabled || readOnly) {
-          return;
-        }
-        if (event.key === 'Enter') {
-          const activeIndex = store.state.activeIndex;
-          if (activeIndex == null) {
-            // Allow form submission when no item is highlighted.
-            return;
-          }
-          stopEvent(event);
-          const nativeEvent = event.nativeEvent;
-          const listItem = store.state.listRef.current[activeIndex];
-          if (listItem) {
-            store.state.selectionEventRef.current = nativeEvent;
-            listItem.click();
-            store.state.selectionEventRef.current = null;
-          }
-        }
-      },
-      onKeyDownCapture() {
-        store.state.keyboardActiveRef.current = true;
-      },
-      onPointerMoveCapture() {
-        store.state.keyboardActiveRef.current = false;
-      }
-    }, elementProps]
-  });
-  if (virtualized) {
-    return element;
-  }
-  return /*#__PURE__*/jsx(CompositeList, {
-    elementsRef: listRef,
-    labelsRef: items ? undefined : labelsRef,
-    children: element
-  });
-});
-if (process.env.NODE_ENV !== "production") ComboboxList.displayName = "ComboboxList";
-
-/**
- * Displays a status message whose content changes are announced politely to screen readers.
- * Useful for conveying the status of an asynchronously loaded list.
- * Renders a `<div>` element.
- */
-const ComboboxStatus = /*#__PURE__*/React.forwardRef(function ComboboxStatus(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    ...elementProps
-  } = componentProps;
-  return useRenderElement('div', componentProps, {
-    ref: forwardedRef,
-    props: [{
-      role: 'status',
-      'aria-live': 'polite',
-      'aria-atomic': true
-    }, elementProps]
-  });
-});
-if (process.env.NODE_ENV !== "production") ComboboxStatus.displayName = "ComboboxStatus";
-
-const ComboboxPortalContext = /*#__PURE__*/React.createContext(undefined);
-if (process.env.NODE_ENV !== "production") ComboboxPortalContext.displayName = "ComboboxPortalContext";
-function useComboboxPortalContext() {
-  const context = React.useContext(ComboboxPortalContext);
-  if (context === undefined) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Combobox.Portal> is missing.' : formatErrorMessage(20));
-  }
-  return context;
-}
-
-const ComboboxPortal = /*#__PURE__*/React.forwardRef(function ComboboxPortal(props, forwardedRef) {
-  const {
-    keepMounted = false,
-    ...portalProps
-  } = props;
-  const store = useComboboxRootContext();
-  const mounted = useStore(store, selectors.mounted);
-  const forceMounted = useStore(store, selectors.forceMounted);
-  const shouldRender = mounted || keepMounted || forceMounted;
-  if (!shouldRender) {
-    return null;
-  }
-  return /*#__PURE__*/jsx(ComboboxPortalContext.Provider, {
-    value: keepMounted,
-    children: /*#__PURE__*/jsx(FloatingPortal, {
-      ref: forwardedRef,
-      ...portalProps
-    })
-  });
-});
-if (process.env.NODE_ENV !== "production") ComboboxPortal.displayName = "ComboboxPortal";
-
-const stateAttributesMapping$7 = {
-  ...popupStateMapping,
-  ...transitionStatusMapping
-};
-
-/**
- * An overlay displayed beneath the popup.
- * Renders a `<div>` element.
- */
-const ComboboxBackdrop = /*#__PURE__*/React.forwardRef(function ComboboxBackdrop(componentProps, forwardedRef) {
-  const {
-    className,
-    render,
-    ...elementProps
-  } = componentProps;
-  const store = useComboboxRootContext();
-  const open = useStore(store, selectors.open);
-  const mounted = useStore(store, selectors.mounted);
-  const transitionStatus = useStore(store, selectors.transitionStatus);
-  const state = {
-    open,
-    transitionStatus
-  };
-  return useRenderElement('div', componentProps, {
-    state,
-    ref: forwardedRef,
-    stateAttributesMapping: stateAttributesMapping$7,
-    props: [{
-      role: 'presentation',
-      hidden: !mounted,
-      style: {
-        userSelect: 'none',
-        WebkitUserSelect: 'none'
-      }
-    }, elementProps]
-  });
-});
-if (process.env.NODE_ENV !== "production") ComboboxBackdrop.displayName = "ComboboxBackdrop";
-
-const ComboboxPositioner = /*#__PURE__*/React.forwardRef(function ComboboxPositioner(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    anchor,
-    positionMethod = 'absolute',
-    side = 'bottom',
-    align = 'center',
-    sideOffset = 0,
-    alignOffset = 0,
-    collisionBoundary = 'clipping-ancestors',
-    collisionPadding = 5,
-    arrowPadding = 5,
-    sticky = false,
-    disableAnchorTracking = false,
-    collisionAvoidance = DROPDOWN_COLLISION_AVOIDANCE,
-    ...elementProps
-  } = componentProps;
-  const store = useComboboxRootContext();
-  const {
-    filteredItems
-  } = useComboboxDerivedItemsContext();
-  const floatingRootContext = useComboboxFloatingContext();
-  const keepMounted = useComboboxPortalContext();
-  const modal = useStore(store, selectors.modal);
-  const open = useStore(store, selectors.open);
-  const mounted = useStore(store, selectors.mounted);
-  const openMethod = useStore(store, selectors.openMethod);
-  const triggerElement = useStore(store, selectors.triggerElement);
-  const inputElement = useStore(store, selectors.inputElement);
-  const inputGroupElement = useStore(store, selectors.inputGroupElement);
-  const inputInsidePopup = useStore(store, selectors.inputInsidePopup);
-  const transitionStatus = useStore(store, selectors.transitionStatus);
-  const empty = filteredItems.length === 0;
-  const resolvedAnchor = anchor ?? (inputInsidePopup ? triggerElement : inputGroupElement ?? inputElement);
-  const positioning = useAnchorPositioning({
-    anchor: resolvedAnchor,
-    floatingRootContext,
-    positionMethod,
-    mounted,
-    side,
-    sideOffset,
-    align,
-    alignOffset,
-    arrowPadding,
-    collisionBoundary,
-    collisionPadding,
-    sticky,
-    disableAnchorTracking,
-    keepMounted,
-    collisionAvoidance,
-    lazyFlip: true
-  });
-  useScrollLock(open && modal && openMethod !== 'touch', triggerElement);
-  const defaultProps = React.useMemo(() => {
-    const style = {
-      ...positioning.positionerStyles
-    };
-    if (!open) {
-      style.pointerEvents = 'none';
-    }
-    return {
-      role: 'presentation',
-      hidden: !mounted,
-      style
-    };
-  }, [open, mounted, positioning.positionerStyles]);
-  const state = {
-    open,
-    side: positioning.side,
-    align: positioning.align,
-    anchorHidden: positioning.anchorHidden,
-    empty
-  };
-  useIsoLayoutEffect(() => {
-    store.set('popupSide', positioning.side);
-  }, [store, positioning.side]);
-  const contextValue = React.useMemo(() => ({
-    side: positioning.side,
-    align: positioning.align,
-    arrowRef: positioning.arrowRef,
-    arrowUncentered: positioning.arrowUncentered,
-    arrowStyles: positioning.arrowStyles,
-    anchorHidden: positioning.anchorHidden,
-    isPositioned: positioning.isPositioned
-  }), [positioning.side, positioning.align, positioning.arrowRef, positioning.arrowUncentered, positioning.arrowStyles, positioning.anchorHidden, positioning.isPositioned]);
-  const setPositionerElement = useStableCallback(element => {
-    store.set('positionerElement', element);
-  });
-  const element = useRenderElement('div', componentProps, {
-    state,
-    ref: [forwardedRef, setPositionerElement],
-    props: [defaultProps, getDisabledMountTransitionStyles(transitionStatus), elementProps],
-    stateAttributesMapping: popupStateMapping
-  });
-  return /*#__PURE__*/jsxs(ComboboxPositionerContext.Provider, {
-    value: contextValue,
-    children: [mounted && modal && /*#__PURE__*/jsx(InternalBackdrop, {
-      inert: inertValue(!open),
-      cutout: inputGroupElement ?? inputElement ?? triggerElement
-    }), element]
-  });
-});
-if (process.env.NODE_ENV !== "production") ComboboxPositioner.displayName = "ComboboxPositioner";
-
-const stateAttributesMapping$6 = {
-  ...popupStateMapping,
-  ...transitionStatusMapping
-};
-
-/**
- * A container for the list.
- * Renders a `<div>` element.
- */
-const ComboboxPopup = /*#__PURE__*/React.forwardRef(function ComboboxPopup(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    initialFocus,
-    finalFocus,
-    ...elementProps
-  } = componentProps;
-  const store = useComboboxRootContext();
-  const positioning = useComboboxPositionerContext();
-  const floatingRootContext = useComboboxFloatingContext();
-  const {
-    filteredItems
-  } = useComboboxDerivedItemsContext();
-  const mounted = useStore(store, selectors.mounted);
-  const open = useStore(store, selectors.open);
-  const openMethod = useStore(store, selectors.openMethod);
-  const transitionStatus = useStore(store, selectors.transitionStatus);
-  const inputInsidePopup = useStore(store, selectors.inputInsidePopup);
-  const inputElement = useStore(store, selectors.inputElement);
-  const modal = useStore(store, selectors.modal);
-  const empty = filteredItems.length === 0;
-  useOpenChangeComplete({
-    open,
-    ref: store.state.popupRef,
-    onComplete() {
-      if (open) {
-        store.state.onOpenChangeComplete(true);
-      }
-    }
-  });
-  const state = {
-    open,
-    side: positioning.side,
-    align: positioning.align,
-    anchorHidden: positioning.anchorHidden,
-    transitionStatus,
-    empty
-  };
-  const element = useRenderElement('div', componentProps, {
-    state,
-    ref: [forwardedRef, store.state.popupRef],
-    props: [{
-      role: inputInsidePopup ? 'dialog' : 'presentation',
-      tabIndex: -1,
-      onFocus(event) {
-        const target = getTarget(event.nativeEvent);
-        if (openMethod !== 'touch' && (contains(store.state.listElement, target) || target === event.currentTarget)) {
-          store.state.inputRef.current?.focus();
-        }
-      }
-    }, getDisabledMountTransitionStyles(transitionStatus), elementProps],
-    stateAttributesMapping: stateAttributesMapping$6
-  });
-
-  // Default initial focus logic:
-  // If opened by touch, focus the popup element to prevent the virtual keyboard from opening
-  // (this is required for Android specifically as iOS handles this automatically).
-  const computedDefaultInitialFocus = inputInsidePopup ? interactionType => interactionType === 'touch' ? store.state.popupRef.current : inputElement : false;
-  const resolvedInitialFocus = initialFocus === undefined ? computedDefaultInitialFocus : initialFocus;
-  let resolvedFinalFocus;
-  if (finalFocus != null) {
-    resolvedFinalFocus = finalFocus;
-  } else {
-    resolvedFinalFocus = inputInsidePopup ? undefined : false;
-  }
-  const focusManagerModal = !inputInsidePopup || modal;
-  return /*#__PURE__*/jsx(FloatingFocusManager, {
-    context: floatingRootContext,
-    disabled: !mounted,
-    modal: focusManagerModal,
-    openInteractionType: openMethod,
-    initialFocus: resolvedInitialFocus,
-    returnFocus: resolvedFinalFocus,
-    getInsideElements: () => [store.state.startDismissRef.current, store.state.endDismissRef.current],
-    children: /*#__PURE__*/jsxs(React.Fragment, {
-      children: [element, focusManagerModal && /*#__PURE__*/jsx(ComboboxInternalDismissButton, {
-        ref: store.state.endDismissRef
-      })]
-    })
-  });
-});
-if (process.env.NODE_ENV !== "production") ComboboxPopup.displayName = "ComboboxPopup";
-
-/**
- * Displays an element positioned against the anchor.
- * Renders a `<div>` element.
- */
-const ComboboxArrow = /*#__PURE__*/React.forwardRef(function ComboboxArrow(componentProps, forwardedRef) {
-  const {
-    className,
-    render,
-    ...elementProps
-  } = componentProps;
-  const store = useComboboxRootContext();
-  const {
-    arrowRef,
-    side,
-    align,
-    arrowUncentered,
-    arrowStyles
-  } = useComboboxPositionerContext();
-  const open = useStore(store, selectors.open);
-  const state = {
-    open,
-    side,
-    align,
-    uncentered: arrowUncentered
-  };
-  return useRenderElement('div', componentProps, {
-    ref: [arrowRef, forwardedRef],
-    stateAttributesMapping: popupStateMapping,
-    state,
-    props: {
-      style: arrowStyles,
-      'aria-hidden': true,
-      ...elementProps
-    }
-  });
-});
-if (process.env.NODE_ENV !== "production") ComboboxArrow.displayName = "ComboboxArrow";
-
-const ComboboxGroupContext = /*#__PURE__*/React.createContext(undefined);
-if (process.env.NODE_ENV !== "production") ComboboxGroupContext.displayName = "ComboboxGroupContext";
-function useComboboxGroupContext() {
-  const context = React.useContext(ComboboxGroupContext);
-  if (context === undefined) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: ComboboxGroupContext is missing. ComboboxGroup parts must be placed within <Combobox.Group>.' : formatErrorMessage(18));
-  }
-  return context;
-}
-
-const ComboboxGroup = /*#__PURE__*/React.forwardRef(function ComboboxGroup(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    items,
-    ...elementProps
-  } = componentProps;
-  const [labelId, setLabelId] = React.useState();
-  const contextValue = React.useMemo(() => ({
-    labelId,
-    setLabelId,
-    items
-  }), [labelId, setLabelId, items]);
-  const element = useRenderElement('div', componentProps, {
-    ref: forwardedRef,
-    props: [{
-      role: 'group',
-      'aria-labelledby': labelId
-    }, elementProps]
-  });
-  const wrappedElement = /*#__PURE__*/jsx(ComboboxGroupContext.Provider, {
-    value: contextValue,
-    children: element
-  });
-  if (items) {
-    return /*#__PURE__*/jsx(GroupCollectionProvider, {
-      items: items,
-      children: wrappedElement
-    });
-  }
-  return wrappedElement;
-});
-if (process.env.NODE_ENV !== "production") ComboboxGroup.displayName = "ComboboxGroup";
-
-/**
- * An accessible label that is automatically associated with its parent group.
- * Renders a `<div>` element.
- */
-const ComboboxGroupLabel = /*#__PURE__*/React.forwardRef(function ComboboxGroupLabel(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    id: idProp,
-    ...elementProps
-  } = componentProps;
-  const {
-    setLabelId
-  } = useComboboxGroupContext();
-  const id = useBaseUiId(idProp);
-  useIsoLayoutEffect(() => {
-    setLabelId(id);
-    return () => {
-      setLabelId(undefined);
-    };
-  }, [id, setLabelId]);
-  const element = useRenderElement('div', componentProps, {
-    ref: forwardedRef,
-    props: [{
-      id
-    }, elementProps]
-  });
-  return element;
-});
-if (process.env.NODE_ENV !== "production") ComboboxGroupLabel.displayName = "ComboboxGroupLabel";
-
-const ComboboxItemContext = /*#__PURE__*/React.createContext(undefined);
-if (process.env.NODE_ENV !== "production") ComboboxItemContext.displayName = "ComboboxItemContext";
-function useComboboxItemContext() {
-  const context = React.useContext(ComboboxItemContext);
-  if (!context) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: ComboboxItemContext is missing. ComboboxItem parts must be placed within <Combobox.Item>.' : formatErrorMessage(19));
-  }
-  return context;
-}
-
-const ComboboxRowContext = /*#__PURE__*/React.createContext(false);
-if (process.env.NODE_ENV !== "production") ComboboxRowContext.displayName = "ComboboxRowContext";
-function useComboboxRowContext() {
-  return React.useContext(ComboboxRowContext);
-}
-
-const ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function ComboboxItem(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    value: itemValue = null,
-    index: indexProp,
-    disabled = false,
-    nativeButton = false,
-    ...elementProps
-  } = componentProps;
-  const didPointerDownRef = React.useRef(false);
-  const textRef = React.useRef(null);
-  const listItem = useCompositeListItem({
-    index: indexProp,
-    textRef,
-    indexGuessBehavior: IndexGuessBehavior.GuessFromOrder
-  });
-  const store = useComboboxRootContext();
-  const isRow = useComboboxRowContext();
-  const {
-    flatFilteredItems,
-    hasItems
-  } = useComboboxDerivedItemsContext();
-  const open = useStore(store, selectors.open);
-  const selectionMode = useStore(store, selectors.selectionMode);
-  const readOnly = useStore(store, selectors.readOnly);
-  const virtualized = useStore(store, selectors.virtualized);
-  const isItemEqualToValue = useStore(store, selectors.isItemEqualToValue);
-  const selectable = selectionMode !== 'none';
-  const index = indexProp ?? (virtualized ? findItemIndex(flatFilteredItems, itemValue, isItemEqualToValue) : listItem.index);
-  const hasRegistered = listItem.index !== -1;
-  const rootId = useStore(store, selectors.id);
-  const highlighted = useStore(store, selectors.isActive, index);
-  const matchesSelectedValue = useStore(store, selectors.isSelected, itemValue);
-  const getItemProps = useStore(store, selectors.getItemProps);
-  const itemRef = React.useRef(null);
-  const id = rootId != null && hasRegistered ? `${rootId}-${index}` : undefined;
-  const selected = matchesSelectedValue && selectable;
-  useIsoLayoutEffect(() => {
-    const shouldRun = hasRegistered && (virtualized || indexProp != null);
-    if (!shouldRun) {
-      return undefined;
-    }
-    const list = store.state.listRef.current;
-    list[index] = itemRef.current;
-    return () => {
-      delete list[index];
-    };
-  }, [hasRegistered, virtualized, index, indexProp, store]);
-  useIsoLayoutEffect(() => {
-    if (!hasRegistered || hasItems) {
-      return undefined;
-    }
-    const visibleMap = store.state.valuesRef.current;
-    visibleMap[index] = itemValue;
-
-    // Stable registry that doesn't depend on filtering. Assume that no
-    // filtering had occurred at this point; otherwise, an `items` prop is
-    // required.
-    if (selectionMode !== 'none') {
-      store.state.allValuesRef.current.push(itemValue);
-    }
-    return () => {
-      delete visibleMap[index];
-    };
-  }, [hasRegistered, hasItems, index, itemValue, store, selectionMode]);
-  useIsoLayoutEffect(() => {
-    if (!open) {
-      didPointerDownRef.current = false;
-      return;
-    }
-    if (!hasRegistered || hasItems) {
-      return;
-    }
-    const selectedValue = store.state.selectedValue;
-    const lastSelectedValue = Array.isArray(selectedValue) ? selectedValue[selectedValue.length - 1] : selectedValue;
-    if (compareItemEquality(itemValue, lastSelectedValue, isItemEqualToValue)) {
-      store.set('selectedIndex', index);
-    }
-  }, [hasRegistered, hasItems, open, store, index, itemValue, isItemEqualToValue]);
-  const state = {
-    disabled,
-    selected,
-    highlighted
-  };
-  const rootProps = getItemProps({
-    active: highlighted,
-    selected
-  });
-  rootProps.id = undefined;
-  rootProps.onFocus = undefined;
-  const {
-    getButtonProps,
-    buttonRef
-  } = useButton({
-    disabled,
-    focusableWhenDisabled: true,
-    native: nativeButton,
-    composite: true
-  });
-  function commitSelection(nativeEvent) {
-    function selectItem() {
-      store.state.handleSelection(nativeEvent, itemValue);
-    }
-    if (store.state.submitOnItemClick) {
-      ReactDOM.flushSync(selectItem);
-      store.state.requestSubmit();
-    } else {
-      selectItem();
+  }, [baseFilter, mode, resolvedQuery, staticItems]);
+  const handleItemHighlighted = useStableCallback((highlightedValue, eventDetails) => {
+    props.onItemHighlighted?.(highlightedValue, eventDetails);
+    if (eventDetails.reason === pointer) {
+      return;
     }
-  }
-  const defaultProps = {
-    id,
-    role: isRow ? 'gridcell' : 'option',
-    'aria-selected': selectable ? selected : undefined,
-    // Focusable items steal focus from the input upon mouseup.
-    // Warn if the user renders a natively focusable element like `<button>`,
-    // as it should be a `<div>` instead.
-    tabIndex: undefined,
-    onPointerDownCapture(event) {
-      didPointerDownRef.current = true;
-      event.preventDefault();
-    },
-    onClick(event) {
-      if (disabled || readOnly) {
-        return;
-      }
-      commitSelection(event.nativeEvent);
-    },
-    onMouseUp(event) {
-      const pointerStartedOnItem = didPointerDownRef.current;
-      didPointerDownRef.current = false;
-      if (disabled || readOnly || event.button !== 0 || pointerStartedOnItem || !highlighted) {
-        return;
+    if (enableInline) {
+      if (highlightedValue == null) {
+        setInlineInputValue('');
+      } else {
+        setInlineInputValue(stringifyAsLabel(highlightedValue, itemToStringValue));
       }
-      commitSelection(event.nativeEvent);
+    } else {
+      setInlineInputValue('');
     }
-  };
-  const element = useRenderElement('div', componentProps, {
-    ref: [buttonRef, forwardedRef, listItem.ref, itemRef],
-    state,
-    props: [rootProps, defaultProps, elementProps, getButtonProps]
-  });
-  const contextValue = React.useMemo(() => ({
-    selected,
-    textRef
-  }), [selected, textRef]);
-  return /*#__PURE__*/jsx(ComboboxItemContext.Provider, {
-    value: contextValue,
-    children: element
-  });
-}));
-if (process.env.NODE_ENV !== "production") ComboboxItem.displayName = "ComboboxItem";
-
-const ComboboxRow = /*#__PURE__*/React.forwardRef(function ComboboxRow(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    ...elementProps
-  } = componentProps;
-  const element = useRenderElement('div', componentProps, {
-    ref: forwardedRef,
-    props: [{
-      role: 'row'
-    }, elementProps]
   });
-  return /*#__PURE__*/jsx(ComboboxRowContext.Provider, {
-    value: true,
-    children: element
+  return /*#__PURE__*/jsx(AriaCombobox, {
+    ...other,
+    itemToStringLabel: itemToStringValue,
+    openOnInputClick: openOnInputClick,
+    selectionMode: "none",
+    fillInputOnItemPress: true,
+    filter: resolvedFilter,
+    autoComplete: mode,
+    inputValue: resolvedInputValue,
+    defaultInputValue: defaultValue,
+    onInputValueChange: handleValueChange,
+    onItemHighlighted: handleItemHighlighted
   });
-});
-if (process.env.NODE_ENV !== "production") ComboboxRow.displayName = "ComboboxRow";
+}
 
-/**
- * Renders its children only when the list is empty.
- * Requires the `items` prop on the root component.
- * Announces changes politely to screen readers.
- * Renders a `<div>` element.
- */
-const ComboboxEmpty = /*#__PURE__*/React.forwardRef(function ComboboxEmpty(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    children: childrenProp,
-    ...elementProps
-  } = componentProps;
+function AutocompleteValue(props) {
   const {
-    filteredItems
-  } = useComboboxDerivedItemsContext();
-  const store = useComboboxRootContext();
-  const children = filteredItems.length === 0 ? childrenProp : null;
-  return useRenderElement('div', componentProps, {
-    ref: [forwardedRef, store.state.emptyRef],
-    props: [{
-      children,
-      role: 'status',
-      'aria-live': 'polite',
-      'aria-atomic': true
-    }, elementProps]
+    children
+  } = props;
+  const inputValue = useComboboxInputValueContext();
+  let returnValue = null;
+  if (typeof children === 'function') {
+    returnValue = children(String(inputValue));
+  } else if (children != null) {
+    returnValue = children;
+  } else {
+    returnValue = inputValue;
+  }
+  return /*#__PURE__*/jsx(React.Fragment, {
+    children: returnValue
   });
-});
-if (process.env.NODE_ENV !== "production") ComboboxEmpty.displayName = "ComboboxEmpty";
-
-/**
- * Returns the internally filtered items.
- */
-function useFilteredItems() {
-  const items = useComboboxDerivedItemsContext();
-  return items.filteredItems;
 }
 
 var index_parts$5 = /*#__PURE__*/Object.freeze({
@@ -7018,404 +4065,6 @@ var index_parts$2 = /*#__PURE__*/Object.freeze({
   Viewport: ScrollAreaViewport
 });
 
-function ComboboxRoot(props) {
-  const {
-    multiple = false,
-    defaultValue,
-    value,
-    onValueChange,
-    autoComplete,
-    ...other
-  } = props;
-  return /*#__PURE__*/jsx(AriaCombobox, {
-    ...other,
-    selectionMode: multiple ? 'multiple' : 'single',
-    selectedValue: value,
-    defaultSelectedValue: defaultValue,
-    onSelectedValueChange: onValueChange,
-    formAutoComplete: autoComplete
-  });
-}
-
-/**
- * An accessible label that is automatically associated with the combobox trigger.
- * Renders a `<div>` element.
- *
- * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
- */
-const ComboboxLabel = /*#__PURE__*/React.forwardRef(function ComboboxLabel(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    ...elementProps
-  } = componentProps;
-  // Keep label id derived from the root and ignore runtime `id` overrides from untyped consumers.
-  const elementPropsWithoutId = elementProps;
-  delete elementPropsWithoutId.id;
-  const fieldRootContext = useFieldRootContext();
-  const store = useComboboxRootContext();
-  const inputInsidePopup = useStore(store, selectors.inputInsidePopup);
-  const triggerElement = useStore(store, selectors.triggerElement);
-  const inputElement = useStore(store, selectors.inputElement);
-  const rootId = useStore(store, selectors.id);
-  const defaultLabelId = getDefaultLabelId(rootId);
-  const localControlId = triggerElement?.id ?? (inputInsidePopup ? rootId : undefined);
-  if (process.env.NODE_ENV !== 'production') {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    React.useEffect(() => {
-      if (!inputElement || inputInsidePopup) {
-        return;
-      }
-      const ownerStackMessage = SafeReact.captureOwnerStack?.() || '';
-      const message = '<Combobox.Label> labels <Combobox.Trigger> only. ' + 'When <Combobox.Input> is the form control, use a native <label> or <Field.Label> instead.';
-      error(`${message}${ownerStackMessage}`);
-    }, [inputElement, inputInsidePopup]);
-  }
-  const labelProps = useLabel({
-    id: defaultLabelId,
-    fallbackControlId: localControlId,
-    setLabelId(nextLabelId) {
-      store.set('labelId', nextLabelId);
-    }
-  });
-  return useRenderElement('div', componentProps, {
-    ref: forwardedRef,
-    state: fieldRootContext.state,
-    props: [labelProps, elementProps],
-    stateAttributesMapping: fieldValidityMapping
-  });
-});
-if (process.env.NODE_ENV !== "production") ComboboxLabel.displayName = "ComboboxLabel";
-
-function ComboboxValue(props) {
-  const {
-    children: childrenProp,
-    placeholder
-  } = props;
-  const store = useComboboxRootContext();
-  const itemToStringLabel = useStore(store, selectors.itemToStringLabel);
-  const selectedValue = useStore(store, selectors.selectedValue);
-  const items = useStore(store, selectors.items);
-  const multiple = useStore(store, selectors.selectionMode) === 'multiple';
-  const hasSelectedValue = useStore(store, selectors.hasSelectedValue);
-  const shouldCheckNullItemLabel = !hasSelectedValue && placeholder != null && childrenProp == null;
-  const hasNullLabel = useStore(store, selectors.hasNullItemLabel, shouldCheckNullItemLabel);
-  let children = null;
-  if (typeof childrenProp === 'function') {
-    children = childrenProp(selectedValue);
-  } else if (childrenProp != null) {
-    children = childrenProp;
-  } else if (!hasSelectedValue && placeholder != null && !hasNullLabel) {
-    children = placeholder;
-  } else if (multiple && Array.isArray(selectedValue)) {
-    children = resolveMultipleLabels(selectedValue, items, itemToStringLabel);
-  } else {
-    children = resolveSelectedLabel(selectedValue, items, itemToStringLabel);
-  }
-  return /*#__PURE__*/jsx(React.Fragment, {
-    children: children
-  });
-}
-
-const ComboboxItemIndicator = /*#__PURE__*/React.forwardRef(function ComboboxItemIndicator(componentProps, forwardedRef) {
-  const keepMounted = componentProps.keepMounted ?? false;
-  const {
-    selected
-  } = useComboboxItemContext();
-  const shouldRender = keepMounted || selected;
-  if (!shouldRender) {
-    return null;
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-use-before-define
-  return /*#__PURE__*/jsx(Inner, {
-    ...componentProps,
-    ref: forwardedRef
-  });
-});
-
-/** The core implementation of the indicator is split here to avoid paying the hooks
- * costs unless the element needs to be mounted. */
-if (process.env.NODE_ENV !== "production") ComboboxItemIndicator.displayName = "ComboboxItemIndicator";
-const Inner = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef((componentProps, forwardedRef) => {
-  const {
-    render,
-    className,
-    keepMounted,
-    ...elementProps
-  } = componentProps;
-  const {
-    selected
-  } = useComboboxItemContext();
-  const indicatorRef = React.useRef(null);
-  const {
-    transitionStatus,
-    setMounted
-  } = useTransitionStatus(selected);
-  const state = {
-    selected,
-    transitionStatus
-  };
-  const element = useRenderElement('span', componentProps, {
-    ref: [forwardedRef, indicatorRef],
-    state,
-    props: [{
-      'aria-hidden': true,
-      children: '✔️'
-    }, elementProps],
-    stateAttributesMapping: transitionStatusMapping
-  });
-  useOpenChangeComplete({
-    open: selected,
-    ref: indicatorRef,
-    onComplete() {
-      if (!selected) {
-        setMounted(false);
-      }
-    }
-  });
-  return element;
-}));
-if (process.env.NODE_ENV !== "production") Inner.displayName = "Inner";
-
-const ComboboxChips = /*#__PURE__*/React.forwardRef(function ComboboxChips(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    ...elementProps
-  } = componentProps;
-  const store = useComboboxRootContext();
-  const open = useStore(store, selectors.open);
-  const hasSelectionChips = useStore(store, selectors.hasSelectionChips);
-  const [highlightedChipIndex, setHighlightedChipIndex] = React.useState(undefined);
-  if (open && highlightedChipIndex !== undefined) {
-    setHighlightedChipIndex(undefined);
-  }
-  const chipsRef = React.useRef([]);
-  const element = useRenderElement('div', componentProps, {
-    ref: [forwardedRef, store.state.chipsContainerRef],
-    // NVDA enters browse mode instead of staying in focus mode when navigating with
-    // arrow keys inside a container unless it has a toolbar role.
-    props: [hasSelectionChips ? {
-      role: 'toolbar'
-    } : EMPTY_OBJECT, elementProps]
-  });
-  const contextValue = React.useMemo(() => ({
-    highlightedChipIndex,
-    setHighlightedChipIndex,
-    chipsRef
-  }), [highlightedChipIndex, setHighlightedChipIndex, chipsRef]);
-  return /*#__PURE__*/jsx(ComboboxChipsContext.Provider, {
-    value: contextValue,
-    children: /*#__PURE__*/jsx(CompositeList, {
-      elementsRef: chipsRef,
-      children: element
-    })
-  });
-});
-if (process.env.NODE_ENV !== "production") ComboboxChips.displayName = "ComboboxChips";
-
-const ComboboxChipContext = /*#__PURE__*/React.createContext(undefined);
-if (process.env.NODE_ENV !== "production") ComboboxChipContext.displayName = "ComboboxChipContext";
-function useComboboxChipContext() {
-  const context = React.useContext(ComboboxChipContext);
-  if (!context) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'useComboboxChipContext must be used within a ComboboxChip' : formatErrorMessage(17));
-  }
-  return context;
-}
-
-const ComboboxChip = /*#__PURE__*/React.forwardRef(function ComboboxChip(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    ...elementProps
-  } = componentProps;
-  const store = useComboboxRootContext();
-  const {
-    setHighlightedChipIndex,
-    chipsRef
-  } = useComboboxChipsContext();
-  const disabled = useStore(store, selectors.disabled);
-  const readOnly = useStore(store, selectors.readOnly);
-  const selectedValue = useStore(store, selectors.selectedValue);
-  const {
-    ref,
-    index
-  } = useCompositeListItem();
-  function handleKeyDown(event) {
-    let nextIndex = index;
-    if (event.key === 'ArrowLeft') {
-      event.preventDefault();
-      if (index > 0) {
-        nextIndex = index - 1;
-      } else {
-        nextIndex = undefined;
-      }
-    } else if (event.key === 'ArrowRight') {
-      event.preventDefault();
-      if (index < selectedValue.length - 1) {
-        nextIndex = index + 1;
-      } else {
-        nextIndex = undefined;
-      }
-    } else if (event.key === 'Backspace' || event.key === 'Delete') {
-      const computedNextIndex = index >= selectedValue.length - 1 ? selectedValue.length - 2 : index;
-      nextIndex = computedNextIndex >= 0 ? computedNextIndex : undefined;
-      stopEvent(event);
-      store.state.setIndices({
-        activeIndex: null,
-        selectedIndex: null,
-        type: 'keyboard'
-      });
-      store.state.setSelectedValue(selectedValue.filter((_, i) => i !== index), createChangeEventDetails(none, event.nativeEvent));
-    } else if (event.key === 'Enter' || event.key === ' ') {
-      stopEvent(event);
-      nextIndex = undefined;
-    } else if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
-      stopEvent(event);
-      store.state.setOpen(true, createChangeEventDetails(listNavigation, event.nativeEvent));
-      nextIndex = undefined;
-    } else if (
-    // Check for printable characters (letters, numbers, symbols)
-    event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-      nextIndex = undefined;
-    }
-    return nextIndex;
-  }
-  const state = {
-    disabled
-  };
-  const element = useRenderElement('div', componentProps, {
-    ref: [forwardedRef, ref],
-    state,
-    props: [{
-      tabIndex: -1,
-      'aria-disabled': disabled || undefined,
-      'aria-readonly': readOnly || undefined,
-      onKeyDown(event) {
-        if (disabled || readOnly) {
-          return;
-        }
-        const nextIndex = handleKeyDown(event);
-        ReactDOM.flushSync(() => {
-          setHighlightedChipIndex(nextIndex);
-        });
-        if (nextIndex === undefined) {
-          store.state.inputRef.current?.focus();
-        } else {
-          chipsRef.current[nextIndex]?.focus();
-        }
-      },
-      onMouseDown(event) {
-        if (readOnly) {
-          return;
-        }
-        event.preventDefault();
-        if (disabled) {
-          return;
-        }
-        store.state.inputRef.current?.focus();
-      }
-    }, elementProps]
-  });
-  const contextValue = React.useMemo(() => ({
-    index
-  }), [index]);
-  return /*#__PURE__*/jsx(ComboboxChipContext.Provider, {
-    value: contextValue,
-    children: element
-  });
-});
-if (process.env.NODE_ENV !== "production") ComboboxChip.displayName = "ComboboxChip";
-
-/**
- * A button to remove a chip.
- * Renders a `<button>` element.
- */
-const ComboboxChipRemove = /*#__PURE__*/React.forwardRef(function ComboboxChipRemove(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    disabled: disabledProp = false,
-    nativeButton = true,
-    ...elementProps
-  } = componentProps;
-  const store = useComboboxRootContext();
-  const {
-    index
-  } = useComboboxChipContext();
-  const comboboxDisabled = useStore(store, selectors.disabled);
-  const readOnly = useStore(store, selectors.readOnly);
-  const selectedValue = useStore(store, selectors.selectedValue);
-  const isItemEqualToValue = useStore(store, selectors.isItemEqualToValue);
-  const disabled = comboboxDisabled || disabledProp;
-  const {
-    buttonRef,
-    getButtonProps
-  } = useButton({
-    native: nativeButton,
-    disabled: disabled || readOnly,
-    focusableWhenDisabled: true
-  });
-  const state = {
-    disabled
-  };
-  function clearActiveIndexForRemovedItem(removedItem) {
-    const activeIndex = store.state.activeIndex;
-    if (activeIndex == null) {
-      return;
-    }
-
-    // Try current visible list first; if not found, it's filtered out.
-    // No need to clear highlight in that case since it can't equal activeIndex.
-    const removedIndex = findItemIndex(store.state.valuesRef.current, removedItem, isItemEqualToValue);
-    if (removedIndex !== -1 && activeIndex === removedIndex) {
-      store.state.setIndices({
-        activeIndex: null,
-        type: store.state.keyboardActiveRef.current ? 'keyboard' : 'pointer'
-      });
-    }
-  }
-  function removeChip(event) {
-    const eventDetails = createChangeEventDetails(chipRemovePress, event.nativeEvent);
-    const removedItem = selectedValue[index];
-    clearActiveIndexForRemovedItem(removedItem);
-    store.state.setSelectedValue(selectedValue.filter((_, i) => i !== index), eventDetails);
-    store.state.inputRef.current?.focus();
-    return eventDetails;
-  }
-  const element = useRenderElement('button', componentProps, {
-    ref: [forwardedRef, buttonRef],
-    state,
-    props: [{
-      tabIndex: -1,
-      onClick(event) {
-        if (disabled || readOnly) {
-          return;
-        }
-        const eventDetails = removeChip(event);
-        if (!eventDetails.isPropagationAllowed) {
-          event.stopPropagation();
-        }
-      },
-      onKeyDown(event) {
-        if (disabled || readOnly) {
-          return;
-        }
-        if (event.key === 'Enter' || event.key === ' ') {
-          const eventDetails = removeChip(event);
-          if (!eventDetails.isPropagationAllowed) {
-            stopEvent(event);
-          }
-        }
-      }
-    }, elementProps, getButtonProps]
-  });
-  return element;
-});
-if (process.env.NODE_ENV !== "production") ComboboxChipRemove.displayName = "ComboboxChipRemove";
-
 var index_parts$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Arrow: ComboboxArrow,
@@ -7739,7 +4388,7 @@ const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function NumberFieldS
     ref: [forwardedRef, scrubAreaRef],
     state,
     props: [defaultProps, elementProps],
-    stateAttributesMapping: stateAttributesMapping$9
+    stateAttributesMapping: stateAttributesMapping$6
   });
   const contextValue = React.useMemo(() => ({
     isScrubbing,
@@ -7797,7 +4446,7 @@ const NumberFieldScrubAreaCursor = /*#__PURE__*/React.forwardRef(function Number
         pointerEvents: 'none'
       }
     }, elementProps],
-    stateAttributesMapping: stateAttributesMapping$9
+    stateAttributesMapping: stateAttributesMapping$6
   });
   return element && /*#__PURE__*/ReactDOM.createPortal(element, ownerDocument(domElement).body);
 });