@jobber/components 8.20.2 → 8.21.0

package/dist/unstyledPrimitives/index.cjs

@@ -1,16 +1,21 @@
 'use strict';
 
 var React = require('react');
-var clamp = require('../clamp-cjs.js');
-var ScrollAreaViewport = require('../ScrollAreaViewport-cjs.js');
-var useRenderElement = require('../useRenderElement-cjs.js');
+var useButton = require('../useButton-cjs.js');
+var ComboboxChipRemove = require('../ComboboxChipRemove-cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
-var NumberFieldInput = require('../NumberFieldInput-cjs.js');
-var MenuSubmenuTrigger = require('../MenuSubmenuTrigger-cjs.js');
-var ReactDOM = require('react-dom');
 var Separator = require('../Separator-cjs.js');
+var ScrollAreaViewport = require('../ScrollAreaViewport-cjs.js');
+var MenuSubmenuTrigger = require('../MenuSubmenuTrigger-cjs.js');
+var useRenderElement = require('../useRenderElement-cjs.js');
 var floatingUi_utils_dom = require('../floating-ui.utils.dom-cjs.js');
+var clamp = require('../clamp-cjs.js');
+var InternalBackdrop = require('../InternalBackdrop-cjs.js');
+var ReactDOM = require('react-dom');
+var useCompositeListItem = require('../useCompositeListItem-cjs.js');
 var index_esm = require('../index.esm-cjs.js');
+var NumberFieldInput = require('../NumberFieldInput-cjs.js');
+require('../useLabel-cjs.js');
 require('../floating-ui.react-dom-cjs.js');
 
 function _interopNamespaceDefault(e) {
@@ -33,3098 +38,140 @@ function _interopNamespaceDefault(e) {
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 var ReactDOM__namespace = /*#__PURE__*/_interopNamespaceDefault(ReactDOM);
 
-const ComboboxRootContext = /*#__PURE__*/React__namespace.createContext(undefined);
-if (process.env.NODE_ENV !== "production") ComboboxRootContext.displayName = "ComboboxRootContext";
-const ComboboxFloatingContext = /*#__PURE__*/React__namespace.createContext(undefined);
-if (process.env.NODE_ENV !== "production") ComboboxFloatingContext.displayName = "ComboboxFloatingContext";
-const ComboboxDerivedItemsContext = /*#__PURE__*/React__namespace.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__namespace.createContext('');
-if (process.env.NODE_ENV !== "production") ComboboxInputValueContext.displayName = "ComboboxInputValueContext";
-function useComboboxRootContext() {
-  const context = React__namespace.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>.' : useRenderElement.formatErrorMessage(22));
-  }
-  return context;
-}
-function useComboboxFloatingContext() {
-  const context = React__namespace.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>.' : useRenderElement.formatErrorMessage(23));
-  }
-  return context;
-}
-function useComboboxDerivedItemsContext() {
-  const context = React__namespace.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>.' : useRenderElement.formatErrorMessage(24));
-  }
-  return context;
-}
-function useComboboxInputValueContext() {
-  return React__namespace.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__*/jsxRuntime.jsx(React__namespace.Fragment, {
-      children: resolveSelectedLabel(value, items, itemToStringLabel)
-    }, index));
-    return acc;
-  }, []);
-}
-
-const selectors = {
-  id: ScrollAreaViewport.createSelector(state => state.id),
-  labelId: ScrollAreaViewport.createSelector(state => state.labelId),
-  query: ScrollAreaViewport.createSelector(state => state.query),
-  items: ScrollAreaViewport.createSelector(state => state.items),
-  selectedValue: ScrollAreaViewport.createSelector(state => state.selectedValue),
-  hasSelectionChips: ScrollAreaViewport.createSelector(state => {
-    const selectedValue = state.selectedValue;
-    return Array.isArray(selectedValue) && selectedValue.length > 0;
-  }),
-  hasSelectedValue: ScrollAreaViewport.createSelector(state => {
-    const {
-      selectedValue,
-      selectionMode
-    } = state;
-    if (selectedValue == null) {
-      return false;
-    }
-    if (selectionMode === 'multiple' && Array.isArray(selectedValue)) {
-      return selectedValue.length > 0;
-    }
-    return true;
-  }),
-  hasNullItemLabel: ScrollAreaViewport.createSelector((state, enabled) => {
-    return enabled ? hasNullItemLabel(state.items) : false;
-  }),
-  open: ScrollAreaViewport.createSelector(state => state.open),
-  mounted: ScrollAreaViewport.createSelector(state => state.mounted),
-  forceMounted: ScrollAreaViewport.createSelector(state => state.forceMounted),
-  inline: ScrollAreaViewport.createSelector(state => state.inline),
-  activeIndex: ScrollAreaViewport.createSelector(state => state.activeIndex),
-  selectedIndex: ScrollAreaViewport.createSelector(state => state.selectedIndex),
-  isActive: ScrollAreaViewport.createSelector((state, index) => state.activeIndex === index),
-  isSelected: ScrollAreaViewport.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: ScrollAreaViewport.createSelector(state => state.transitionStatus),
-  popupProps: ScrollAreaViewport.createSelector(state => state.popupProps),
-  inputProps: ScrollAreaViewport.createSelector(state => state.inputProps),
-  triggerProps: ScrollAreaViewport.createSelector(state => state.triggerProps),
-  getItemProps: ScrollAreaViewport.createSelector(state => state.getItemProps),
-  positionerElement: ScrollAreaViewport.createSelector(state => state.positionerElement),
-  listElement: ScrollAreaViewport.createSelector(state => state.listElement),
-  triggerElement: ScrollAreaViewport.createSelector(state => state.triggerElement),
-  inputElement: ScrollAreaViewport.createSelector(state => state.inputElement),
-  inputGroupElement: ScrollAreaViewport.createSelector(state => state.inputGroupElement),
-  popupSide: ScrollAreaViewport.createSelector(state => state.popupSide),
-  openMethod: ScrollAreaViewport.createSelector(state => state.openMethod),
-  inputInsidePopup: ScrollAreaViewport.createSelector(state => state.inputInsidePopup),
-  selectionMode: ScrollAreaViewport.createSelector(state => state.selectionMode),
-  listRef: ScrollAreaViewport.createSelector(state => state.listRef),
-  labelsRef: ScrollAreaViewport.createSelector(state => state.labelsRef),
-  popupRef: ScrollAreaViewport.createSelector(state => state.popupRef),
-  emptyRef: ScrollAreaViewport.createSelector(state => state.emptyRef),
-  inputRef: ScrollAreaViewport.createSelector(state => state.inputRef),
-  keyboardActiveRef: ScrollAreaViewport.createSelector(state => state.keyboardActiveRef),
-  chipsContainerRef: ScrollAreaViewport.createSelector(state => state.chipsContainerRef),
-  clearRef: ScrollAreaViewport.createSelector(state => state.clearRef),
-  valuesRef: ScrollAreaViewport.createSelector(state => state.valuesRef),
-  allValuesRef: ScrollAreaViewport.createSelector(state => state.allValuesRef),
-  name: ScrollAreaViewport.createSelector(state => state.name),
-  disabled: ScrollAreaViewport.createSelector(state => state.disabled),
-  readOnly: ScrollAreaViewport.createSelector(state => state.readOnly),
-  required: ScrollAreaViewport.createSelector(state => state.required),
-  grid: ScrollAreaViewport.createSelector(state => state.grid),
-  isGrouped: ScrollAreaViewport.createSelector(state => state.isGrouped),
-  virtualized: ScrollAreaViewport.createSelector(state => state.virtualized),
-  onOpenChangeComplete: ScrollAreaViewport.createSelector(state => state.onOpenChangeComplete),
-  openOnInputClick: ScrollAreaViewport.createSelector(state => state.openOnInputClick),
-  itemToStringLabel: ScrollAreaViewport.createSelector(state => state.itemToStringLabel),
-  isItemEqualToValue: ScrollAreaViewport.createSelector(state => state.isItemEqualToValue),
-  modal: ScrollAreaViewport.createSelector(state => state.modal),
-  autoHighlight: ScrollAreaViewport.createSelector(state => state.autoHighlight),
-  submitOnItemClick: ScrollAreaViewport.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__namespace.useCallback((item, query, itemToString) => {
-    if (multiple) {
-      return createCollatorItemFilter(coreFilter, itemToString)(item, query);
-    }
-    return createSingleSelectionCollatorFilter(coreFilter, itemToString, value)(item, query);
-  }, [coreFilter, value, multiple]);
-  return React__namespace.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
-  } = NumberFieldInput.useFormContext();
-  const {
-    setDirty,
-    validityData,
-    shouldValidateOnChange,
-    setFilled,
-    name: fieldName,
-    disabled: fieldDisabled,
-    setTouched,
-    setFocused,
-    validationMode,
-    validation
-  } = NumberFieldInput.useFieldRootContext();
-  const id = NumberFieldInput.useLabelableId({
-    id: idProp
-  });
-  const collatorFilter = useCoreFilter({
-    locale
-  });
-  const [queryChangedAfterOpen, setQueryChangedAfterOpen] = React__namespace.useState(false);
-  const [closeQuery, setCloseQuery] = React__namespace.useState(null);
-  const listRef = React__namespace.useRef([]);
-  const labelsRef = React__namespace.useRef([]);
-  const popupRef = React__namespace.useRef(null);
-  const inputRef = React__namespace.useRef(null);
-  const startDismissRef = React__namespace.useRef(null);
-  const endDismissRef = React__namespace.useRef(null);
-  const emptyRef = React__namespace.useRef(null);
-  const keyboardActiveRef = React__namespace.useRef(true);
-  const hadInputClearRef = React__namespace.useRef(false);
-  const chipsContainerRef = React__namespace.useRef(null);
-  const clearRef = React__namespace.useRef(null);
-  const selectionEventRef = React__namespace.useRef(null);
-  const lastHighlightRef = React__namespace.useRef(INITIAL_LAST_HIGHLIGHT);
-  const pendingQueryHighlightRef = React__namespace.useRef(null);
-
-  /**
-   * Contains the currently visible list of item values post-filtering.
-   */
-  const valuesRef = React__namespace.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__namespace.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] = clamp.useControlled({
-    controlled: selectedValueProp,
-    default: multiple ? defaultSelectedValue ?? useRenderElement.EMPTY_ARRAY : defaultSelectedValue,
-    name: 'Combobox',
-    state: 'selectedValue'
-  });
-  const filter = React__namespace.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]);
-
-  // 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 = useRenderElement.useRefWithInit(() => {
-    if (hasInputValue) {
-      return defaultInputValueProp ?? '';
-    }
-    if (single) {
-      return stringifyAsLabel(selectedValue, itemToStringLabel);
-    }
-    return '';
-  }).current;
-  const [inputValue, setInputValueUnwrapped] = clamp.useControlled({
-    controlled: inputValueProp,
-    default: initialDefaultInputValue,
-    name: 'Combobox',
-    state: 'inputValue'
-  });
-  const [open, setOpenUnwrapped] = clamp.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__namespace.useMemo(() => {
-    if (!items) {
-      return useRenderElement.EMPTY_ARRAY;
-    }
-    if (isGrouped) {
-      return items.flatMap(group => group.items);
-    }
-    return items;
-  }, [items, isGrouped]);
-  const filteredItems = React__namespace.useMemo(() => {
-    if (filteredItemsProp && !shouldIgnoreExternalFiltering) {
-      return filteredItemsProp;
-    }
-    if (!items) {
-      return useRenderElement.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__namespace.useMemo(() => {
-    if (isGrouped) {
-      const groups = filteredItems;
-      return groups.flatMap(g => g.items);
-    }
-    return filteredItems;
-  }, [filteredItems, isGrouped]);
-  const store = useRenderElement.useRefWithInit(() => new ScrollAreaViewport.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 || useRenderElement.NOOP,
-    // Placeholder callbacks replaced on first render
-    setOpen: useRenderElement.NOOP,
-    setInputValue: useRenderElement.NOOP,
-    setSelectedValue: useRenderElement.NOOP,
-    setIndices: useRenderElement.NOOP,
-    onItemHighlighted: useRenderElement.NOOP,
-    handleSelection: useRenderElement.NOOP,
-    getItemProps: () => useRenderElement.EMPTY_OBJECT,
-    forceMount: useRenderElement.NOOP,
-    requestSubmit: useRenderElement.NOOP
-  })).current;
-  const fieldRawValue = selectionMode === 'none' ? inputValue : selectedValue;
-  const fieldStringValue = React__namespace.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 = clamp.useStableCallback(onItemHighlightedProp);
-  const onOpenChangeComplete = clamp.useStableCallback(onOpenChangeCompleteProp);
-  const activeIndex = ScrollAreaViewport.useStore(store, selectors.activeIndex);
-  const selectedIndex = ScrollAreaViewport.useStore(store, selectors.selectedIndex);
-  const positionerElement = ScrollAreaViewport.useStore(store, selectors.positionerElement);
-  const listElement = ScrollAreaViewport.useStore(store, selectors.listElement);
-  const triggerElement = ScrollAreaViewport.useStore(store, selectors.triggerElement);
-  const inputElement = ScrollAreaViewport.useStore(store, selectors.inputElement);
-  const inputGroupElement = ScrollAreaViewport.useStore(store, selectors.inputGroupElement);
-  const inline = ScrollAreaViewport.useStore(store, selectors.inline);
-  const inputInsidePopup = ScrollAreaViewport.useStore(store, selectors.inputInsidePopup);
-  const triggerRef = clamp.useValueAsRef(triggerElement);
-  const {
-    mounted,
-    setMounted,
-    transitionStatus
-  } = clamp.useTransitionStatus(open);
-  const {
-    openMethod,
-    triggerProps
-  } = ScrollAreaViewport.useOpenInteractionType(open);
-  NumberFieldInput.useField({
-    id,
-    name,
-    commit: validation.commit,
-    value: fieldRawValue,
-    controlRef: inputInsidePopup ? triggerRef : inputRef,
-    getValue: () => fieldStringValue
-  });
-  const forceMount = clamp.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__namespace.useRef(selectedValue);
-  clamp.useIsoLayoutEffect(() => {
-    // Ensure the values and labels are registered for programmatic value changes.
-    if (selectedValue !== initialSelectedValueRef.current) {
-      forceMount();
-    }
-  }, [forceMount, selectedValue]);
-  const setIndices = clamp.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, clamp.createGenericEventDetails(type, undefined, {
-          index: -1
-        }));
-      }
-    } else {
-      const activeValue = valuesRef.current[options.activeIndex];
-      lastHighlightRef.current = {
-        value: activeValue,
-        index: options.activeIndex
-      };
-      onItemHighlighted(activeValue, clamp.createGenericEventDetails(type, undefined, {
-        index: options.activeIndex
-      }));
-    }
-  });
-  const setInputValue = clamp.useStableCallback((next, eventDetails) => {
-    hadInputClearRef.current = eventDetails.reason === clamp.inputClear;
-    props.onInputValueChange?.(next, eventDetails);
-    if (eventDetails.isCanceled) {
-      return;
-    }
+  const enableInline = mode === 'inline' || mode === 'both';
+  const staticItems = mode === 'inline' || mode === 'none';
 
-    // 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 === clamp.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);
-        }
-      }
-    }
-    setInputValueUnwrapped(next);
-  });
-  const setOpen = clamp.useStableCallback((nextOpen, eventDetails) => {
-    if (open === nextOpen) {
-      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__namespace.useState(defaultValue ?? '');
+  const [inlineInputValue, setInlineInputValue] = React__namespace.useState('');
+  React__namespace.useEffect(() => {
+    if (isControlled) {
+      setInlineInputValue('');
     }
+  }, [value, isControlled]);
 
-    // 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('', clamp.createChangeEventDetails(clamp.inputClear, eventDetails.event));
-      }
-    }
-    setOpenUnwrapped(nextOpen);
-    if (!nextOpen && inputInsidePopup && (eventDetails.reason === clamp.focusOut || eventDetails.reason === clamp.outsidePress)) {
-      setTouched(true);
-      setFocused(false);
-      if (validationMode === 'onBlur') {
-        const valueToValidate = selectionMode === 'none' ? inputValue : selectedValue;
-        validation.commit(valueToValidate);
-      }
-    }
-  });
-  const setSelectedValue = clamp.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), clamp.createChangeEventDetails(eventDetails.reason, eventDetails.event));
-    }
-    if (single && nextValue != null && eventDetails.reason !== clamp.inputChange && queryChangedAfterOpen && !inline) {
-      setCloseQuery(query);
+  // 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 = useButton.useStableCallback((nextValue, eventDetails) => {
+    setInlineInputValue('');
+    if (!isControlled) {
+      setInternalValue(nextValue);
     }
+    onValueChange?.(nextValue, eventDetails);
   });
-  const handleSelection = clamp.useStableCallback((event, passedValue) => {
-    let itemValue = passedValue;
-    if (itemValue === undefined) {
-      if (activeIndex === null) {
-        return;
-      }
-      itemValue = valuesRef.current[activeIndex];
+  const collator = ComboboxChipRemove.useCoreFilter();
+  const baseFilter = React__namespace.useMemo(() => {
+    if (other.filter !== undefined) {
+      return other.filter;
     }
-    const targetEl = clamp.getTarget(event);
-    const overrideEvent = selectionEventRef.current ?? event;
-    selectionEventRef.current = null;
-    const eventDetails = clamp.createChangeEventDetails(clamp.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('', clamp.createChangeEventDetails(clamp.inputClear, eventDetails.event));
-      } else {
-        setOpen(false, eventDetails);
-      }
-    } else {
-      setSelectedValue(itemValue, eventDetails);
-      setOpen(false, eventDetails);
-    }
-  });
-  const requestSubmit = clamp.useStableCallback(() => {
-    if (!store.state.submitOnItemClick) {
-      return;
-    }
-    const form = store.state.inputElement?.form;
-    if (form && typeof form.requestSubmit === 'function') {
-      form.requestSubmit();
-    }
-  });
-  const handleUnmount = clamp.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('', clamp.createChangeEventDetails(clamp.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('', clamp.createChangeEventDetails(clamp.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 === '' ? clamp.inputClear : clamp.none;
-          setInputValue(stringVal, clamp.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__namespace.useMemo(() => {
-    if (inline && positionerElement) {
-      return {
-        current: positionerElement.closest('[role="dialog"]')
-      };
-    }
-    return popupRef;
-  }, [inline, positionerElement]);
-  clamp.useOpenChangeComplete({
-    enabled: !props.actionsRef,
-    open,
-    ref: resolvedPopupRef,
-    onComplete() {
-      if (!open) {
-        handleUnmount();
-      }
-    }
-  });
-  React__namespace.useImperativeHandle(props.actionsRef, () => ({
-    unmount: handleUnmount
-  }), [handleUnmount]);
-  clamp.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]);
-  clamp.useIsoLayoutEffect(() => {
-    if (items) {
-      valuesRef.current = flatFilteredItems;
-      listRef.current.length = flatFilteredItems.length;
-    }
-  }, [items, flatFilteredItems]);
-  clamp.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, clamp.createGenericEventDetails(clamp.none, undefined, {
-          index: -1
-        }));
-      }
-      return;
-    }
-    if (storeActiveIndex >= candidateItems.length) {
-      if (lastHighlightRef.current !== INITIAL_LAST_HIGHLIGHT) {
-        lastHighlightRef.current = INITIAL_LAST_HIGHLIGHT;
-        store.state.onItemHighlighted(undefined, clamp.createGenericEventDetails(clamp.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, clamp.createGenericEventDetails(clamp.none, undefined, {
-        index: storeActiveIndex
-      }));
-    }
-  }, [activeIndex, autoHighlightMode, hasFilteredItemsProp, hasItems, flatFilteredItems, inline, open, store]);
-  clamp.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__namespace.useEffect(() => {
-    if (hasItems && autoHighlightMode && flatFilteredItems.length === 0) {
-      setIndices({
-        activeIndex: null
-      });
-    }
-  }, [hasItems, autoHighlightMode, flatFilteredItems.length, setIndices]);
-  clamp.useValueChanged(query, () => {
-    if (!open || query === '' || query === String(initialDefaultInputValue)) {
-      return;
-    }
-    setQueryChangedAfterOpen(true);
-  });
-  clamp.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, clamp.createChangeEventDetails(clamp.none));
-      }
-    }
-  });
-  clamp.useValueChanged(inputValue, () => {
-    if (selectionMode !== 'none') {
-      return;
-    }
-    clearErrors(name);
-    setDirty(inputValue !== validityData.initialValue);
-    if (shouldValidateOnChange()) {
-      validation.commit(inputValue);
-    } else {
-      validation.commit(inputValue, true);
-    }
-  });
-  clamp.useValueChanged(items, () => {
-    if (!single || hasInputValue || inputInsidePopup || queryChangedAfterOpen) {
-      return;
-    }
-    const nextInputValue = stringifyAsLabel(selectedValue, itemToStringLabel);
-    if (inputValue !== nextInputValue) {
-      setInputValue(nextInputValue, clamp.createChangeEventDetails(clamp.none));
-    }
-  });
-  const floatingRootContext = MenuSubmenuTrigger.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__namespace.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 = ScrollAreaViewport.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: clamp.inputPress
-  });
-  const dismiss = ScrollAreaViewport.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 = clamp.getTarget(event);
-      return !clamp.contains(triggerElement, target) && !clamp.contains(clearRef.current, target) && !clamp.contains(chipsContainerRef.current, target) && !clamp.contains(inputGroupElement, target);
-    }
-  });
-  const listNavigation = MenuSubmenuTrigger.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: useRenderElement.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
-  } = ScrollAreaViewport.useInteractions([role, click, dismiss, listNavigation]);
-  ScrollAreaViewport.useOnFirstRender(() => {
-    store.update({
-      inline: inlineProp,
-      popupProps: getFloatingProps(),
-      inputProps: getReferenceProps(),
-      triggerProps,
-      getItemProps,
-      setOpen,
-      setInputValue,
-      setSelectedValue,
-      setIndices,
-      onItemHighlighted,
-      handleSelection,
-      forceMount,
-      requestSubmit
-    });
-  });
-  clamp.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 = useRenderElement.useMergedRefs(inputRefProp, validation.inputRef);
-  const itemsContextValue = React__namespace.useMemo(() => ({
-    query,
-    hasItems,
-    filteredItems,
-    flatFilteredItems
-  }), [query, hasItems, filteredItems, flatFilteredItems]);
-  const serializedValue = React__namespace.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__namespace.useMemo(() => {
-    if (!multiple || !Array.isArray(selectedValue) || !name) {
-      return null;
-    }
-    return selectedValue.map(value => {
-      const currentSerializedValue = stringifyAsValue(value, itemToStringValue);
-      return /*#__PURE__*/jsxRuntime.jsx("input", {
-        type: "hidden",
-        name: name,
-        value: currentSerializedValue
-      }, currentSerializedValue);
-    });
-  }, [multiple, selectedValue, name, itemToStringValue]);
-  const children = /*#__PURE__*/jsxRuntime.jsxs(React__namespace.Fragment, {
-    children: [props.children, /*#__PURE__*/jsxRuntime.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 = clamp.createChangeEventDetails(clamp.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 ? clamp.visuallyHiddenInput : clamp.visuallyHidden,
-      tabIndex: -1,
-      "aria-hidden": true
-    }), hiddenInputs]
-  });
-  return /*#__PURE__*/jsxRuntime.jsx(ComboboxRootContext.Provider, {
-    value: store,
-    children: /*#__PURE__*/jsxRuntime.jsx(ComboboxFloatingContext.Provider, {
-      value: floatingRootContext,
-      children: /*#__PURE__*/jsxRuntime.jsx(ComboboxDerivedItemsContext.Provider, {
-        value: itemsContextValue,
-        children: /*#__PURE__*/jsxRuntime.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__namespace.useState(defaultValue ?? '');
-  const [inlineInputValue, setInlineInputValue] = React__namespace.useState('');
-  React__namespace.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 = clamp.useStableCallback((nextValue, eventDetails) => {
-    setInlineInputValue('');
-    if (!isControlled) {
-      setInternalValue(nextValue);
-    }
-    onValueChange?.(nextValue, eventDetails);
-  });
-  const collator = useCoreFilter();
-  const baseFilter = React__namespace.useMemo(() => {
-    if (other.filter !== undefined) {
-      return other.filter;
-    }
-    return collator.contains;
-  }, [other.filter, collator]);
-  const resolvedQuery = String(isControlled ? value : internalValue).trim();
+    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__namespace.useMemo(() => {
-    if (mode !== 'both') {
-      return staticItems ? null : baseFilter;
-    }
-    if (baseFilter === null) {
-      return null;
-    }
-    return (item, _query, toString) => {
-      return baseFilter(item, resolvedQuery, toString);
-    };
-  }, [baseFilter, mode, resolvedQuery, staticItems]);
-  const handleItemHighlighted = clamp.useStableCallback((highlightedValue, eventDetails) => {
-    props.onItemHighlighted?.(highlightedValue, eventDetails);
-    if (eventDetails.reason === clamp.pointer) {
-      return;
-    }
-    if (enableInline) {
-      if (highlightedValue == null) {
-        setInlineInputValue('');
-      } else {
-        setInlineInputValue(stringifyAsLabel(highlightedValue, itemToStringValue));
-      }
-    } else {
-      setInlineInputValue('');
-    }
-  });
-  return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(React__namespace.Fragment, {
-    children: returnValue
-  });
-}
-
-const triggerStateAttributesMapping = {
-  ...ScrollAreaViewport.pressableTriggerOpenStateMapping,
-  ...NumberFieldInput.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__namespace.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
-  } = NumberFieldInput.useFieldRootContext();
-  const {
-    labelId: fieldLabelId
-  } = NumberFieldInput.useLabelableContext();
-  const store = useComboboxRootContext();
-  const {
-    filteredItems
-  } = useComboboxDerivedItemsContext();
-  const selectionMode = ScrollAreaViewport.useStore(store, selectors.selectionMode);
-  const comboboxDisabled = ScrollAreaViewport.useStore(store, selectors.disabled);
-  const readOnly = ScrollAreaViewport.useStore(store, selectors.readOnly);
-  const required = ScrollAreaViewport.useStore(store, selectors.required);
-  const mounted = ScrollAreaViewport.useStore(store, selectors.mounted);
-  const popupSideValue = ScrollAreaViewport.useStore(store, selectors.popupSide);
-  const positionerElement = ScrollAreaViewport.useStore(store, selectors.positionerElement);
-  const listElement = ScrollAreaViewport.useStore(store, selectors.listElement);
-  const triggerProps = ScrollAreaViewport.useStore(store, selectors.triggerProps);
-  const triggerElement = ScrollAreaViewport.useStore(store, selectors.triggerElement);
-  const inputInsidePopup = ScrollAreaViewport.useStore(store, selectors.inputInsidePopup);
-  const rootId = ScrollAreaViewport.useStore(store, selectors.id);
-  const comboboxLabelId = ScrollAreaViewport.useStore(store, selectors.labelId);
-  const open = ScrollAreaViewport.useStore(store, selectors.open);
-  const selectedValue = ScrollAreaViewport.useStore(store, selectors.selectedValue);
-  const activeIndex = ScrollAreaViewport.useStore(store, selectors.activeIndex);
-  const selectedIndex = ScrollAreaViewport.useStore(store, selectors.selectedIndex);
-  const hasSelectedValue = ScrollAreaViewport.useStore(store, selectors.hasSelectedValue);
-  const floatingRootContext = useComboboxFloatingContext();
-  const inputValue = useComboboxInputValueContext();
-  const focusTimeout = clamp.useTimeout();
-  const disabled = fieldDisabled || comboboxDisabled || disabledProp;
-  const listEmpty = filteredItems.length === 0;
-  const popupSide = mounted && positionerElement ? popupSideValue : null;
-  NumberFieldInput.useLabelableId({
-    id: inputInsidePopup ? idProp : undefined
-  });
-  const id = inputInsidePopup ? idProp ?? rootId : idProp;
-  const ariaLabelledBy = resolveAriaLabelledBy(fieldLabelId, comboboxLabelId);
-  const currentPointerTypeRef = React__namespace.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__namespace.useEffect(() => {
-    if (!inputInsidePopup) {
-      return;
-    }
-    if (triggerElement && triggerElement !== domReference) {
-      floatingRootContext.set('domReferenceElement', triggerElement);
-    }
-  }, [triggerElement, domReference, floatingRootContext, inputInsidePopup]);
-  const {
-    reference: triggerTypeaheadProps
-  } = MenuSubmenuTrigger.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, clamp.createChangeEventDetails('none'));
-      }
-    }
-  });
-  const {
-    reference: triggerClickProps
-  } = ScrollAreaViewport.useClick(floatingRootContext, {
-    enabled: !readOnly && !comboboxDisabled,
-    event: 'mousedown'
-  });
-  const {
-    buttonRef,
-    getButtonProps
-  } = clamp.useButton({
-    native: nativeButton,
-    disabled
-  });
-  const state = {
-    ...fieldState,
-    open,
-    disabled,
-    popupSide,
-    listEmpty,
-    placeholder: !hasSelectedValue
-  };
-  const setTriggerElement = clamp.useStableCallback(element => {
-    store.set('triggerElement', element);
-  });
-  const element = useRenderElement.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 (clamp.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 = clamp.ownerDocument(event.currentTarget);
-        function handleMouseUp(mouseEvent) {
-          if (!triggerElement) {
-            return;
-          }
-          const mouseUpTarget = clamp.getTarget(mouseEvent);
-          const positioner = store.state.positionerElement;
-          const list = store.state.listElement;
-          if (clamp.contains(triggerElement, mouseUpTarget) || clamp.contains(positioner, mouseUpTarget) || clamp.contains(list, mouseUpTarget) || mouseUpTarget === triggerElement) {
-            return;
-          }
-          const bounds = MenuSubmenuTrigger.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, clamp.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') {
-          clamp.stopEvent(event);
-          store.state.setOpen(true, clamp.createChangeEventDetails(clamp.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__namespace.createContext(undefined);
-if (process.env.NODE_ENV !== "production") ComboboxChipsContext.displayName = "ComboboxChipsContext";
-function useComboboxChipsContext() {
-  return React__namespace.useContext(ComboboxChipsContext);
-}
-
-const ComboboxPositionerContext = /*#__PURE__*/React__namespace.createContext(undefined);
-if (process.env.NODE_ENV !== "production") ComboboxPositionerContext.displayName = "ComboboxPositionerContext";
-function useComboboxPositionerContext(optional) {
-  const context = React__namespace.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' : useRenderElement.formatErrorMessage(21));
-  }
-  return context;
-}
-
-/**
- * @internal
- */
-const ComboboxInternalDismissButton = /*#__PURE__*/React__namespace.forwardRef(function ComboboxInternalDismissButton(_, forwardedRef) {
-  const store = useComboboxRootContext();
-  const {
-    buttonRef,
-    getButtonProps
-  } = clamp.useButton({
-    native: false
-  });
-  const mergedRef = useRenderElement.useMergedRefs(forwardedRef, buttonRef);
-  const handleDismiss = clamp.useStableCallback(event => {
-    store.state.setOpen(false, clamp.createChangeEventDetails(clamp.closePress, event.nativeEvent, event.currentTarget));
-  });
-  const dismissProps = getButtonProps({
-    onClick: handleDismiss
-  });
-  return /*#__PURE__*/jsxRuntime.jsx("span", {
-    ref: mergedRef,
-    ...dismissProps,
-    "aria-label": "Dismiss",
-    tabIndex: undefined,
-    style: clamp.visuallyHiddenInput
-  });
-});
-if (process.env.NODE_ENV !== "production") ComboboxInternalDismissButton.displayName = "ComboboxInternalDismissButton";
-
-const ComboboxInput = /*#__PURE__*/React__namespace.forwardRef(function ComboboxInput(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    disabled: disabledProp = false,
-    id: idProp,
-    ...elementProps
-  } = componentProps;
-  const {
-    state: fieldState,
-    disabled: fieldDisabled,
-    setTouched,
-    setFocused,
-    validationMode,
-    validation
-  } = NumberFieldInput.useFieldRootContext();
-  const {
-    labelId: fieldLabelId
-  } = NumberFieldInput.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 = ScrollAreaViewport.useDirection();
-  const required = ScrollAreaViewport.useStore(store, selectors.required);
-  const comboboxDisabled = ScrollAreaViewport.useStore(store, selectors.disabled);
-  const readOnly = ScrollAreaViewport.useStore(store, selectors.readOnly);
-  const name = ScrollAreaViewport.useStore(store, selectors.name);
-  const selectionMode = ScrollAreaViewport.useStore(store, selectors.selectionMode);
-  const autoHighlightMode = ScrollAreaViewport.useStore(store, selectors.autoHighlight);
-  const inputProps = ScrollAreaViewport.useStore(store, selectors.inputProps);
-  const triggerProps = ScrollAreaViewport.useStore(store, selectors.triggerProps);
-  const open = ScrollAreaViewport.useStore(store, selectors.open);
-  const mounted = ScrollAreaViewport.useStore(store, selectors.mounted);
-  const selectedValue = ScrollAreaViewport.useStore(store, selectors.selectedValue);
-  const popupSideValue = ScrollAreaViewport.useStore(store, selectors.popupSide);
-  const positionerElement = ScrollAreaViewport.useStore(store, selectors.positionerElement);
-  const rootId = ScrollAreaViewport.useStore(store, selectors.id);
-  const inline = ScrollAreaViewport.useStore(store, selectors.inline);
-  const modal = ScrollAreaViewport.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 = clamp.useBaseUiId(idProp ?? (!isInsidePopup ? rootId : undefined));
-  const ariaLabelledBy = resolveAriaLabelledBy(fieldLabelId, undefined);
-  const fieldStateForInput = hasPositionerParent ? NumberFieldInput.DEFAULT_FIELD_STATE_ATTRIBUTES : fieldState;
-  const [composingValue, setComposingValue] = React__namespace.useState(null);
-  const isComposingRef = React__namespace.useRef(false);
-  const lastActiveIndexRef = React__namespace.useRef(null);
-  const shouldRestoreActiveIndexRef = React__namespace.useRef(false);
-  const setInputElement = clamp.useStableCallback(element => {
-    const nextIsInsidePopup = hasPositionerParent || store.state.inline;
-    if (nextIsInsidePopup && !store.state.hasInputValue) {
-      store.state.setInputValue('', clamp.createChangeEventDetails(clamp.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.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 (clamp.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, clamp.createChangeEventDetails(clamp.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, clamp.createChangeEventDetails(clamp.inputClear, event.nativeEvent));
-          }
-          const trimmed = nextVal.trim();
-          const shouldMaintainHighlight = autoHighlightEnabled && trimmed !== '';
-          if (!readOnly && !disabled && trimmed) {
-            if (shouldOpenOnInput) {
-              store.state.setOpen(true, clamp.createChangeEventDetails(clamp.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, clamp.createChangeEventDetails(clamp.inputChange, event.nativeEvent));
-        const empty = event.currentTarget.value === '';
-        const clearDetails = clamp.createChangeEventDetails(clamp.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, clamp.createChangeEventDetails(clamp.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') {
-          clamp.stopEvent(event);
-          const cursor = clamp.isFirefox && isRTL ? input.value.length : 0;
-          input.setSelectionRange(cursor, cursor);
-          input.scrollLeft = 0;
-          return;
-        }
-        if (event.key === 'End') {
-          clamp.stopEvent(event);
-          const cursor = clamp.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 = clamp.createChangeEventDetails(clamp.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, clamp.createChangeEventDetails(clamp.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, clamp.createChangeEventDetails(clamp.none, nativeEvent));
-            return;
-          }
-          clamp.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__*/jsxRuntime.jsxs(React__namespace.Fragment, {
-    children: [open && focusManagerModal && /*#__PURE__*/jsxRuntime.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__namespace.forwardRef(function ComboboxInputGroup(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    ...elementProps
-  } = componentProps;
-  const {
-    state: fieldState,
-    disabled: fieldDisabled
-  } = NumberFieldInput.useFieldRootContext();
-  const store = useComboboxRootContext();
-  const {
-    filteredItems
-  } = useComboboxDerivedItemsContext();
-  const open = ScrollAreaViewport.useStore(store, selectors.open);
-  const mounted = ScrollAreaViewport.useStore(store, selectors.mounted);
-  const popupSideValue = ScrollAreaViewport.useStore(store, selectors.popupSide);
-  const positionerElement = ScrollAreaViewport.useStore(store, selectors.positionerElement);
-  const comboboxDisabled = ScrollAreaViewport.useStore(store, selectors.disabled);
-  const readOnly = ScrollAreaViewport.useStore(store, selectors.readOnly);
-  const hasSelectedValue = ScrollAreaViewport.useStore(store, selectors.hasSelectedValue);
-  const selectionMode = ScrollAreaViewport.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 = clamp.useStableCallback(element => {
-    store.set('inputGroupElement', element);
-  });
-  return useRenderElement.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__namespace.forwardRef(function ComboboxIcon(componentProps, forwardedRef) {
-  const {
-    className,
-    render,
-    ...elementProps
-  } = componentProps;
-  const element = useRenderElement.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 = {
-  ...clamp.transitionStatusMapping,
-  ...ScrollAreaViewport.triggerOpenStateMapping
-};
-
-/**
- * Clears the value when clicked.
- * Renders a `<button>` element.
- */
-const ComboboxClear = /*#__PURE__*/React__namespace.forwardRef(function ComboboxClear(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    disabled: disabledProp = false,
-    nativeButton = true,
-    keepMounted = false,
-    ...elementProps
-  } = componentProps;
-  const {
-    disabled: fieldDisabled
-  } = NumberFieldInput.useFieldRootContext();
-  const store = useComboboxRootContext();
-  const selectionMode = ScrollAreaViewport.useStore(store, selectors.selectionMode);
-  const comboboxDisabled = ScrollAreaViewport.useStore(store, selectors.disabled);
-  const readOnly = ScrollAreaViewport.useStore(store, selectors.readOnly);
-  const open = ScrollAreaViewport.useStore(store, selectors.open);
-  const selectedValue = ScrollAreaViewport.useStore(store, selectors.selectedValue);
-  const hasSelectionChips = ScrollAreaViewport.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
-  } = clamp.useButton({
-    native: nativeButton,
-    disabled
-  });
-  const {
-    mounted,
-    transitionStatus,
-    setMounted
-  } = clamp.useTransitionStatus(visible);
-  const state = {
-    disabled,
-    open,
-    transitionStatus
-  };
-  clamp.useOpenChangeComplete({
-    open: visible,
-    ref: store.state.clearRef,
-    onComplete() {
-      if (!visible) {
-        setMounted(false);
-      }
-    }
-  });
-  const element = useRenderElement.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('', clamp.createChangeEventDetails(clamp.clearPress, event.nativeEvent));
-        if (selectionMode !== 'none') {
-          store.state.setSelectedValue(Array.isArray(selectedValue) ? [] : null, clamp.createChangeEventDetails(clamp.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__namespace.createContext(null);
-if (process.env.NODE_ENV !== "production") GroupCollectionContext.displayName = "GroupCollectionContext";
-function useGroupCollectionContext() {
-  return React__namespace.useContext(GroupCollectionContext);
-}
-function GroupCollectionProvider(props) {
-  const {
-    children,
-    items
-  } = props;
-  const contextValue = React__namespace.useMemo(() => ({
-    items
-  }), [items]);
-  return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(React__namespace.Fragment, {
-    children: itemsToRender.map(children)
-  });
-}
-
-const ComboboxList = /*#__PURE__*/React__namespace.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 = ScrollAreaViewport.useStore(store, selectors.items);
-  const labelsRef = ScrollAreaViewport.useStore(store, selectors.labelsRef);
-  const listRef = ScrollAreaViewport.useStore(store, selectors.listRef);
-  const selectionMode = ScrollAreaViewport.useStore(store, selectors.selectionMode);
-  const grid = ScrollAreaViewport.useStore(store, selectors.grid);
-  const popupProps = ScrollAreaViewport.useStore(store, selectors.popupProps);
-  const disabled = ScrollAreaViewport.useStore(store, selectors.disabled);
-  const readOnly = ScrollAreaViewport.useStore(store, selectors.readOnly);
-  const virtualized = ScrollAreaViewport.useStore(store, selectors.virtualized);
-  const multiple = selectionMode === 'multiple';
-  const empty = filteredItems.length === 0;
-  const setPositionerElement = clamp.useStableCallback(element => {
-    store.set('positionerElement', element);
-  });
-  const setListElement = clamp.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__namespace.useMemo(() => {
-    if (typeof children === 'function') {
-      return _ComboboxCollection || (_ComboboxCollection = /*#__PURE__*/jsxRuntime.jsx(ComboboxCollection, {
-        children: children
-      }));
-    }
-    return children;
-  }, [children]);
-  const state = {
-    empty
-  };
-  const floatingId = floatingRootContext.useState('floatingId');
-  const element = useRenderElement.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;
-          }
-          clamp.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__*/jsxRuntime.jsx(MenuSubmenuTrigger.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__namespace.forwardRef(function ComboboxStatus(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    ...elementProps
-  } = componentProps;
-  return useRenderElement.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__namespace.createContext(undefined);
-if (process.env.NODE_ENV !== "production") ComboboxPortalContext.displayName = "ComboboxPortalContext";
-function useComboboxPortalContext() {
-  const context = React__namespace.useContext(ComboboxPortalContext);
-  if (context === undefined) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Combobox.Portal> is missing.' : useRenderElement.formatErrorMessage(20));
-  }
-  return context;
-}
-
-const ComboboxPortal = /*#__PURE__*/React__namespace.forwardRef(function ComboboxPortal(props, forwardedRef) {
-  const {
-    keepMounted = false,
-    ...portalProps
-  } = props;
-  const store = useComboboxRootContext();
-  const mounted = ScrollAreaViewport.useStore(store, selectors.mounted);
-  const forceMounted = ScrollAreaViewport.useStore(store, selectors.forceMounted);
-  const shouldRender = mounted || keepMounted || forceMounted;
-  if (!shouldRender) {
-    return null;
-  }
-  return /*#__PURE__*/jsxRuntime.jsx(ComboboxPortalContext.Provider, {
-    value: keepMounted,
-    children: /*#__PURE__*/jsxRuntime.jsx(ScrollAreaViewport.FloatingPortal, {
-      ref: forwardedRef,
-      ...portalProps
-    })
-  });
-});
-if (process.env.NODE_ENV !== "production") ComboboxPortal.displayName = "ComboboxPortal";
-
-const stateAttributesMapping$7 = {
-  ...ScrollAreaViewport.popupStateMapping,
-  ...clamp.transitionStatusMapping
-};
-
-/**
- * An overlay displayed beneath the popup.
- * Renders a `<div>` element.
- */
-const ComboboxBackdrop = /*#__PURE__*/React__namespace.forwardRef(function ComboboxBackdrop(componentProps, forwardedRef) {
-  const {
-    className,
-    render,
-    ...elementProps
-  } = componentProps;
-  const store = useComboboxRootContext();
-  const open = ScrollAreaViewport.useStore(store, selectors.open);
-  const mounted = ScrollAreaViewport.useStore(store, selectors.mounted);
-  const transitionStatus = ScrollAreaViewport.useStore(store, selectors.transitionStatus);
-  const state = {
-    open,
-    transitionStatus
-  };
-  return useRenderElement.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__namespace.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 = ScrollAreaViewport.DROPDOWN_COLLISION_AVOIDANCE,
-    ...elementProps
-  } = componentProps;
-  const store = useComboboxRootContext();
-  const {
-    filteredItems
-  } = useComboboxDerivedItemsContext();
-  const floatingRootContext = useComboboxFloatingContext();
-  const keepMounted = useComboboxPortalContext();
-  const modal = ScrollAreaViewport.useStore(store, selectors.modal);
-  const open = ScrollAreaViewport.useStore(store, selectors.open);
-  const mounted = ScrollAreaViewport.useStore(store, selectors.mounted);
-  const openMethod = ScrollAreaViewport.useStore(store, selectors.openMethod);
-  const triggerElement = ScrollAreaViewport.useStore(store, selectors.triggerElement);
-  const inputElement = ScrollAreaViewport.useStore(store, selectors.inputElement);
-  const inputGroupElement = ScrollAreaViewport.useStore(store, selectors.inputGroupElement);
-  const inputInsidePopup = ScrollAreaViewport.useStore(store, selectors.inputInsidePopup);
-  const transitionStatus = ScrollAreaViewport.useStore(store, selectors.transitionStatus);
-  const empty = filteredItems.length === 0;
-  const resolvedAnchor = anchor ?? (inputInsidePopup ? triggerElement : inputGroupElement ?? inputElement);
-  const positioning = MenuSubmenuTrigger.useAnchorPositioning({
-    anchor: resolvedAnchor,
-    floatingRootContext,
-    positionMethod,
-    mounted,
-    side,
-    sideOffset,
-    align,
-    alignOffset,
-    arrowPadding,
-    collisionBoundary,
-    collisionPadding,
-    sticky,
-    disableAnchorTracking,
-    keepMounted,
-    collisionAvoidance,
-    lazyFlip: true
-  });
-  ScrollAreaViewport.useScrollLock(open && modal && openMethod !== 'touch', triggerElement);
-  const defaultProps = React__namespace.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
-  };
-  clamp.useIsoLayoutEffect(() => {
-    store.set('popupSide', positioning.side);
-  }, [store, positioning.side]);
-  const contextValue = React__namespace.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 = clamp.useStableCallback(element => {
-    store.set('positionerElement', element);
-  });
-  const element = useRenderElement.useRenderElement('div', componentProps, {
-    state,
-    ref: [forwardedRef, setPositionerElement],
-    props: [defaultProps, MenuSubmenuTrigger.getDisabledMountTransitionStyles(transitionStatus), elementProps],
-    stateAttributesMapping: ScrollAreaViewport.popupStateMapping
-  });
-  return /*#__PURE__*/jsxRuntime.jsxs(ComboboxPositionerContext.Provider, {
-    value: contextValue,
-    children: [mounted && modal && /*#__PURE__*/jsxRuntime.jsx(ScrollAreaViewport.InternalBackdrop, {
-      inert: ScrollAreaViewport.inertValue(!open),
-      cutout: inputGroupElement ?? inputElement ?? triggerElement
-    }), element]
-  });
-});
-if (process.env.NODE_ENV !== "production") ComboboxPositioner.displayName = "ComboboxPositioner";
-
-const stateAttributesMapping$6 = {
-  ...ScrollAreaViewport.popupStateMapping,
-  ...clamp.transitionStatusMapping
-};
-
-/**
- * A container for the list.
- * Renders a `<div>` element.
- */
-const ComboboxPopup = /*#__PURE__*/React__namespace.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 = ScrollAreaViewport.useStore(store, selectors.mounted);
-  const open = ScrollAreaViewport.useStore(store, selectors.open);
-  const openMethod = ScrollAreaViewport.useStore(store, selectors.openMethod);
-  const transitionStatus = ScrollAreaViewport.useStore(store, selectors.transitionStatus);
-  const inputInsidePopup = ScrollAreaViewport.useStore(store, selectors.inputInsidePopup);
-  const inputElement = ScrollAreaViewport.useStore(store, selectors.inputElement);
-  const modal = ScrollAreaViewport.useStore(store, selectors.modal);
-  const empty = filteredItems.length === 0;
-  clamp.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.useRenderElement('div', componentProps, {
-    state,
-    ref: [forwardedRef, store.state.popupRef],
-    props: [{
-      role: inputInsidePopup ? 'dialog' : 'presentation',
-      tabIndex: -1,
-      onFocus(event) {
-        const target = clamp.getTarget(event.nativeEvent);
-        if (openMethod !== 'touch' && (clamp.contains(store.state.listElement, target) || target === event.currentTarget)) {
-          store.state.inputRef.current?.focus();
-        }
-      }
-    }, MenuSubmenuTrigger.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__*/jsxRuntime.jsx(ScrollAreaViewport.FloatingFocusManager, {
-    context: floatingRootContext,
-    disabled: !mounted,
-    modal: focusManagerModal,
-    openInteractionType: openMethod,
-    initialFocus: resolvedInitialFocus,
-    returnFocus: resolvedFinalFocus,
-    getInsideElements: () => [store.state.startDismissRef.current, store.state.endDismissRef.current],
-    children: /*#__PURE__*/jsxRuntime.jsxs(React__namespace.Fragment, {
-      children: [element, focusManagerModal && /*#__PURE__*/jsxRuntime.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__namespace.forwardRef(function ComboboxArrow(componentProps, forwardedRef) {
-  const {
-    className,
-    render,
-    ...elementProps
-  } = componentProps;
-  const store = useComboboxRootContext();
-  const {
-    arrowRef,
-    side,
-    align,
-    arrowUncentered,
-    arrowStyles
-  } = useComboboxPositionerContext();
-  const open = ScrollAreaViewport.useStore(store, selectors.open);
-  const state = {
-    open,
-    side,
-    align,
-    uncentered: arrowUncentered
-  };
-  return useRenderElement.useRenderElement('div', componentProps, {
-    ref: [arrowRef, forwardedRef],
-    stateAttributesMapping: ScrollAreaViewport.popupStateMapping,
-    state,
-    props: {
-      style: arrowStyles,
-      'aria-hidden': true,
-      ...elementProps
-    }
-  });
-});
-if (process.env.NODE_ENV !== "production") ComboboxArrow.displayName = "ComboboxArrow";
-
-const ComboboxGroupContext = /*#__PURE__*/React__namespace.createContext(undefined);
-if (process.env.NODE_ENV !== "production") ComboboxGroupContext.displayName = "ComboboxGroupContext";
-function useComboboxGroupContext() {
-  const context = React__namespace.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>.' : useRenderElement.formatErrorMessage(18));
-  }
-  return context;
-}
-
-const ComboboxGroup = /*#__PURE__*/React__namespace.forwardRef(function ComboboxGroup(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    items,
-    ...elementProps
-  } = componentProps;
-  const [labelId, setLabelId] = React__namespace.useState();
-  const contextValue = React__namespace.useMemo(() => ({
-    labelId,
-    setLabelId,
-    items
-  }), [labelId, setLabelId, items]);
-  const element = useRenderElement.useRenderElement('div', componentProps, {
-    ref: forwardedRef,
-    props: [{
-      role: 'group',
-      'aria-labelledby': labelId
-    }, elementProps]
-  });
-  const wrappedElement = /*#__PURE__*/jsxRuntime.jsx(ComboboxGroupContext.Provider, {
-    value: contextValue,
-    children: element
-  });
-  if (items) {
-    return /*#__PURE__*/jsxRuntime.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__namespace.forwardRef(function ComboboxGroupLabel(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    id: idProp,
-    ...elementProps
-  } = componentProps;
-  const {
-    setLabelId
-  } = useComboboxGroupContext();
-  const id = clamp.useBaseUiId(idProp);
-  clamp.useIsoLayoutEffect(() => {
-    setLabelId(id);
-    return () => {
-      setLabelId(undefined);
-    };
-  }, [id, setLabelId]);
-  const element = useRenderElement.useRenderElement('div', componentProps, {
-    ref: forwardedRef,
-    props: [{
-      id
-    }, elementProps]
-  });
-  return element;
-});
-if (process.env.NODE_ENV !== "production") ComboboxGroupLabel.displayName = "ComboboxGroupLabel";
-
-const ComboboxItemContext = /*#__PURE__*/React__namespace.createContext(undefined);
-if (process.env.NODE_ENV !== "production") ComboboxItemContext.displayName = "ComboboxItemContext";
-function useComboboxItemContext() {
-  const context = React__namespace.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>.' : useRenderElement.formatErrorMessage(19));
-  }
-  return context;
-}
-
-const ComboboxRowContext = /*#__PURE__*/React__namespace.createContext(false);
-if (process.env.NODE_ENV !== "production") ComboboxRowContext.displayName = "ComboboxRowContext";
-function useComboboxRowContext() {
-  return React__namespace.useContext(ComboboxRowContext);
-}
-
-const ComboboxItem = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.forwardRef(function ComboboxItem(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    value: itemValue = null,
-    index: indexProp,
-    disabled = false,
-    nativeButton = false,
-    ...elementProps
-  } = componentProps;
-  const didPointerDownRef = React__namespace.useRef(false);
-  const textRef = React__namespace.useRef(null);
-  const listItem = MenuSubmenuTrigger.useCompositeListItem({
-    index: indexProp,
-    textRef,
-    indexGuessBehavior: MenuSubmenuTrigger.IndexGuessBehavior.GuessFromOrder
-  });
-  const store = useComboboxRootContext();
-  const isRow = useComboboxRowContext();
-  const {
-    flatFilteredItems,
-    hasItems
-  } = useComboboxDerivedItemsContext();
-  const open = ScrollAreaViewport.useStore(store, selectors.open);
-  const selectionMode = ScrollAreaViewport.useStore(store, selectors.selectionMode);
-  const readOnly = ScrollAreaViewport.useStore(store, selectors.readOnly);
-  const virtualized = ScrollAreaViewport.useStore(store, selectors.virtualized);
-  const isItemEqualToValue = ScrollAreaViewport.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 = ScrollAreaViewport.useStore(store, selectors.id);
-  const highlighted = ScrollAreaViewport.useStore(store, selectors.isActive, index);
-  const matchesSelectedValue = ScrollAreaViewport.useStore(store, selectors.isSelected, itemValue);
-  const getItemProps = ScrollAreaViewport.useStore(store, selectors.getItemProps);
-  const itemRef = React__namespace.useRef(null);
-  const id = rootId != null && hasRegistered ? `${rootId}-${index}` : undefined;
-  const selected = matchesSelectedValue && selectable;
-  clamp.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]);
-  clamp.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]);
-  clamp.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
-  } = clamp.useButton({
-    disabled,
-    focusableWhenDisabled: true,
-    native: nativeButton,
-    composite: true
-  });
-  function commitSelection(nativeEvent) {
-    function selectItem() {
-      store.state.handleSelection(nativeEvent, itemValue);
+    if (mode !== 'both') {
+      return staticItems ? null : baseFilter;
     }
-    if (store.state.submitOnItemClick) {
-      ReactDOM__namespace.flushSync(selectItem);
-      store.state.requestSubmit();
-    } else {
-      selectItem();
+    if (baseFilter === null) {
+      return null;
     }
-  }
-  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;
+    return (item, _query, toString) => {
+      return baseFilter(item, resolvedQuery, toString);
+    };
+  }, [baseFilter, mode, resolvedQuery, staticItems]);
+  const handleItemHighlighted = useButton.useStableCallback((highlightedValue, eventDetails) => {
+    props.onItemHighlighted?.(highlightedValue, eventDetails);
+    if (eventDetails.reason === useButton.pointer) {
+      return;
+    }
+    if (enableInline) {
+      if (highlightedValue == null) {
+        setInlineInputValue('');
+      } else {
+        setInlineInputValue(ComboboxChipRemove.stringifyAsLabel(highlightedValue, itemToStringValue));
       }
-      commitSelection(event.nativeEvent);
+    } else {
+      setInlineInputValue('');
     }
-  };
-  const element = useRenderElement.useRenderElement('div', componentProps, {
-    ref: [buttonRef, forwardedRef, listItem.ref, itemRef],
-    state,
-    props: [rootProps, defaultProps, elementProps, getButtonProps]
-  });
-  const contextValue = React__namespace.useMemo(() => ({
-    selected,
-    textRef
-  }), [selected, textRef]);
-  return /*#__PURE__*/jsxRuntime.jsx(ComboboxItemContext.Provider, {
-    value: contextValue,
-    children: element
-  });
-}));
-if (process.env.NODE_ENV !== "production") ComboboxItem.displayName = "ComboboxItem";
-
-const ComboboxRow = /*#__PURE__*/React__namespace.forwardRef(function ComboboxRow(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    ...elementProps
-  } = componentProps;
-  const element = useRenderElement.useRenderElement('div', componentProps, {
-    ref: forwardedRef,
-    props: [{
-      role: 'row'
-    }, elementProps]
   });
-  return /*#__PURE__*/jsxRuntime.jsx(ComboboxRowContext.Provider, {
-    value: true,
-    children: element
+  return /*#__PURE__*/jsxRuntime.jsx(ComboboxChipRemove.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__namespace.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.useRenderElement('div', componentProps, {
-    ref: [forwardedRef, store.state.emptyRef],
-    props: [{
-      children,
-      role: 'status',
-      'aria-live': 'polite',
-      'aria-atomic': true
-    }, elementProps]
+    children
+  } = props;
+  const inputValue = ComboboxChipRemove.useComboboxInputValueContext();
+  let returnValue = null;
+  if (typeof children === 'function') {
+    returnValue = children(String(inputValue));
+  } else if (children != null) {
+    returnValue = children;
+  } else {
+    returnValue = inputValue;
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(React__namespace.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({
   __proto__: null,
-  Arrow: ComboboxArrow,
-  Backdrop: ComboboxBackdrop,
-  Clear: ComboboxClear,
-  Collection: ComboboxCollection,
-  Empty: ComboboxEmpty,
-  Group: ComboboxGroup,
-  GroupLabel: ComboboxGroupLabel,
-  Icon: ComboboxIcon,
-  Input: ComboboxInput,
-  InputGroup: ComboboxInputGroup,
-  Item: ComboboxItem,
-  List: ComboboxList,
-  Popup: ComboboxPopup,
-  Portal: ComboboxPortal,
-  Positioner: ComboboxPositioner,
+  Arrow: ComboboxChipRemove.ComboboxArrow,
+  Backdrop: ComboboxChipRemove.ComboboxBackdrop,
+  Clear: ComboboxChipRemove.ComboboxClear,
+  Collection: ComboboxChipRemove.ComboboxCollection,
+  Empty: ComboboxChipRemove.ComboboxEmpty,
+  Group: ComboboxChipRemove.ComboboxGroup,
+  GroupLabel: ComboboxChipRemove.ComboboxGroupLabel,
+  Icon: ComboboxChipRemove.ComboboxIcon,
+  Input: ComboboxChipRemove.ComboboxInput,
+  InputGroup: ComboboxChipRemove.ComboboxInputGroup,
+  Item: ComboboxChipRemove.ComboboxItem,
+  List: ComboboxChipRemove.ComboboxList,
+  Popup: ComboboxChipRemove.ComboboxPopup,
+  Portal: ComboboxChipRemove.ComboboxPortal,
+  Positioner: ComboboxChipRemove.ComboboxPositioner,
   Root: AutocompleteRoot,
-  Row: ComboboxRow,
+  Row: ComboboxChipRemove.ComboboxRow,
   Separator: Separator.Separator,
-  Status: ComboboxStatus,
-  Trigger: ComboboxTrigger,
+  Status: ComboboxChipRemove.ComboboxStatus,
+  Trigger: ComboboxChipRemove.ComboboxTrigger,
   Value: AutocompleteValue,
-  useFilter: useCoreFilter,
-  useFilteredItems: useFilteredItems
+  useFilter: ComboboxChipRemove.useCoreFilter,
+  useFilteredItems: ComboboxChipRemove.useFilteredItems
 });
 
 /**
@@ -3143,7 +190,7 @@ const DialogDescription = /*#__PURE__*/React__namespace.forwardRef(function Dial
   const {
     store
   } = ScrollAreaViewport.useDialogRootContext();
-  const id = clamp.useBaseUiId(idProp);
+  const id = useButton.useBaseUiId(idProp);
   store.useSyncedValueWithCleanup('descriptionElementId', id);
   return useRenderElement.useRenderElement('p', componentProps, {
     ref: forwardedRef,
@@ -3192,7 +239,7 @@ const DrawerIndent = /*#__PURE__*/React__namespace.forwardRef(function DrawerInd
   const active = providerContext?.active ?? false;
   const visualStateStore = providerContext?.visualStateStore;
   const indentRef = React__namespace.useRef(null);
-  clamp.useIsoLayoutEffect(() => {
+  useButton.useIsoLayoutEffect(() => {
     const element = indentRef.current;
     if (!element || !visualStateStore) {
       return undefined;
@@ -3282,7 +329,7 @@ function DrawerProvider(props) {
   } = props;
   const [openById, setOpenById] = React__namespace.useState(() => new Map());
   const [visualStateStore] = React__namespace.useState(createVisualStateStore);
-  const setDrawerOpen = clamp.useStableCallback((drawerId, open) => {
+  const setDrawerOpen = useButton.useStableCallback((drawerId, open) => {
     setOpenById(prev => {
       const prevOpen = prev.get(drawerId);
       if (prevOpen === open) {
@@ -3293,7 +340,7 @@ function DrawerProvider(props) {
       return next;
     });
   });
-  const removeDrawer = clamp.useStableCallback(drawerId => {
+  const removeDrawer = useButton.useStableCallback(drawerId => {
     setOpenById(prev => {
       if (!prev.has(drawerId)) {
         return prev;
@@ -3363,19 +410,19 @@ let DialogViewportDataAttributes = function (DialogViewportDataAttributes) {
   /**
    * Present when the dialog is open.
    */
-  DialogViewportDataAttributes[DialogViewportDataAttributes["open"] = ScrollAreaViewport.CommonPopupDataAttributes.open] = "open";
+  DialogViewportDataAttributes[DialogViewportDataAttributes["open"] = InternalBackdrop.CommonPopupDataAttributes.open] = "open";
   /**
    * Present when the dialog is closed.
    */
-  DialogViewportDataAttributes[DialogViewportDataAttributes["closed"] = ScrollAreaViewport.CommonPopupDataAttributes.closed] = "closed";
+  DialogViewportDataAttributes[DialogViewportDataAttributes["closed"] = InternalBackdrop.CommonPopupDataAttributes.closed] = "closed";
   /**
    * Present when the dialog is animating in.
    */
-  DialogViewportDataAttributes[DialogViewportDataAttributes["startingStyle"] = ScrollAreaViewport.CommonPopupDataAttributes.startingStyle] = "startingStyle";
+  DialogViewportDataAttributes[DialogViewportDataAttributes["startingStyle"] = InternalBackdrop.CommonPopupDataAttributes.startingStyle] = "startingStyle";
   /**
    * Present when the dialog is animating out.
    */
-  DialogViewportDataAttributes[DialogViewportDataAttributes["endingStyle"] = ScrollAreaViewport.CommonPopupDataAttributes.endingStyle] = "endingStyle";
+  DialogViewportDataAttributes[DialogViewportDataAttributes["endingStyle"] = InternalBackdrop.CommonPopupDataAttributes.endingStyle] = "endingStyle";
   /**
    * Present when the dialog is nested within another dialog.
    */
@@ -3388,8 +435,8 @@ let DialogViewportDataAttributes = function (DialogViewportDataAttributes) {
 }({});
 
 const stateAttributesMapping$3 = {
-  ...ScrollAreaViewport.popupStateMapping,
-  ...clamp.transitionStatusMapping,
+  ...InternalBackdrop.popupStateMapping,
+  ...useButton.transitionStatusMapping,
   nested(value) {
     return value ? {
       [DialogViewportDataAttributes.nested]: ''
@@ -3477,7 +524,7 @@ class DialogHandle {
         console.warn(`Base UI: DialogHandle.open: No trigger found with id "${triggerId}". The dialog will open, but the trigger will not be associated with the dialog.`);
       }
     }
-    this.store.setOpen(true, clamp.createChangeEventDetails(clamp.imperativeAction, undefined, triggerElement));
+    this.store.setOpen(true, useButton.createChangeEventDetails(useButton.imperativeAction, undefined, triggerElement));
   }
 
   /**
@@ -3488,14 +535,14 @@ class DialogHandle {
    */
   openWithPayload(payload) {
     this.store.set('payload', payload);
-    this.store.setOpen(true, clamp.createChangeEventDetails(clamp.imperativeAction, undefined, undefined));
+    this.store.setOpen(true, useButton.createChangeEventDetails(useButton.imperativeAction, undefined, undefined));
   }
 
   /**
    * Closes the dialog.
    */
   close() {
-    this.store.setOpen(false, clamp.createChangeEventDetails(clamp.imperativeAction, undefined, undefined));
+    this.store.setOpen(false, useButton.createChangeEventDetails(useButton.imperativeAction, undefined, undefined));
   }
 
   /**
@@ -3707,7 +754,7 @@ function useSwipeDismiss(options) {
   });
   const lastProgressDetailsRef = React__namespace.useRef(null);
   const isSwipingRef = React__namespace.useRef(false);
-  const setSwiping = clamp.useStableCallback(nextSwiping => {
+  const setSwiping = useButton.useStableCallback(nextSwiping => {
     if (isSwipingRef.current === nextSwiping) {
       return;
     }
@@ -3733,7 +780,7 @@ function useSwipeDismiss(options) {
     });
     swipeThresholdRef.current = Math.max(0, value);
   }
-  const updateSwipeProgress = clamp.useStableCallback((progress, details) => {
+  const updateSwipeProgress = useButton.useStableCallback((progress, details) => {
     const nextProgress = Number.isFinite(progress) ? clamp.clamp(progress, 0, 1) : 0;
     const progressChanged = nextProgress !== swipeProgressRef.current;
     let detailsChanged = false;
@@ -3850,9 +897,9 @@ function useSwipeDismiss(options) {
     return event.pointerType === 'touch';
   }
   function getTargetAtPoint(position, nativeEvent) {
-    const doc = clamp.ownerDocument(elementRef.current);
+    const doc = useButton.ownerDocument(elementRef.current);
     const elementAtPoint = getElementAtPoint(doc, position.x, position.y);
-    const target = elementAtPoint ?? clamp.getTarget(nativeEvent);
+    const target = elementAtPoint ?? useButton.getTarget(nativeEvent);
     return target;
   }
   function findGestureScrollableTouchTarget(target, root) {
@@ -3868,7 +915,7 @@ function useSwipeDismiss(options) {
     swipeFromScrollableRef.current = false;
     const touchLike = isTouchLikeEvent(event);
     const target = getTargetAtPoint(position, event.nativeEvent);
-    const doc = clamp.ownerDocument(elementRef.current);
+    const doc = useButton.ownerDocument(elementRef.current);
     const body = doc.body;
     const scrollableTarget = touchLike && body ? findGestureScrollableTouchTarget(target, body) : null;
     const ignoreScrollableTarget = startOptions?.ignoreScrollableTarget ?? false;
@@ -4010,7 +1057,7 @@ function useSwipeDismiss(options) {
     }
     return null;
   }
-  const handleStart = clamp.useStableCallback(event => {
+  const handleStart = useButton.useStableCallback(event => {
     if (!enabled) {
       return;
     }
@@ -4043,7 +1090,7 @@ function useSwipeDismiss(options) {
     if (!enabled || !isSwipingRef.current) {
       return;
     }
-    const target = clamp.getTarget(event.nativeEvent);
+    const target = useButton.getTarget(event.nativeEvent);
     if (isTouchLikeEvent(event) && !swipeFromScrollableRef.current) {
       const boundaryElement = event.currentTarget;
       if (findGestureScrollableTouchTarget(target, boundaryElement)) {
@@ -4206,7 +1253,7 @@ function useSwipeDismiss(options) {
       direction: swipeDirectionDetails
     });
   }
-  const handleMove = clamp.useStableCallback(event => {
+  const handleMove = useButton.useStableCallback(event => {
     const currentPos = getPrimaryPointerPosition(event);
     if (!currentPos) {
       return;
@@ -4241,10 +1288,10 @@ function useSwipeDismiss(options) {
           const element = elementRef.current;
           if (pendingStartPos && element) {
             const target = getTargetAtPoint(currentPos, event.nativeEvent);
-            const doc = clamp.ownerDocument(element);
+            const doc = useButton.ownerDocument(element);
             const body = doc.body;
             const scrollTarget = body ? findGestureScrollableTouchTarget(target, body) : null;
-            if (scrollTarget && (clamp.contains(element, scrollTarget) || clamp.contains(scrollTarget, element))) {
+            if (scrollTarget && (useButton.contains(element, scrollTarget) || useButton.contains(scrollTarget, element))) {
               const deltaX = currentPos.x - pendingStartPos.x;
               const deltaY = currentPos.y - pendingStartPos.y;
               const canSwipeFromEdge = canSwipeFromScrollEdgeOnPendingMove(scrollTarget, deltaX, deltaY);
@@ -4291,7 +1338,7 @@ function useSwipeDismiss(options) {
     lastMovePosRef.current = currentPos;
     handleMoveCore(event, currentPos, movement);
   });
-  const handleEnd = clamp.useStableCallback(event => {
+  const handleEnd = useButton.useStableCallback(event => {
     if (!enabled) {
       return;
     }
@@ -4488,11 +1535,11 @@ let DrawerSwipeAreaDataAttributes = function (DrawerSwipeAreaDataAttributes) {
   /**
    * Present when the drawer is open.
    */
-  DrawerSwipeAreaDataAttributes[DrawerSwipeAreaDataAttributes["open"] = ScrollAreaViewport.CommonPopupDataAttributes.open] = "open";
+  DrawerSwipeAreaDataAttributes[DrawerSwipeAreaDataAttributes["open"] = InternalBackdrop.CommonPopupDataAttributes.open] = "open";
   /**
    * Present when the drawer is closed.
    */
-  DrawerSwipeAreaDataAttributes[DrawerSwipeAreaDataAttributes["closed"] = ScrollAreaViewport.CommonPopupDataAttributes.closed] = "closed";
+  DrawerSwipeAreaDataAttributes[DrawerSwipeAreaDataAttributes["closed"] = InternalBackdrop.CommonPopupDataAttributes.closed] = "closed";
   /**
    * Present when the swipe area is disabled.
    */
@@ -4574,7 +1621,7 @@ const DrawerSwipeArea = /*#__PURE__*/React__namespace.forwardRef(function Drawer
   } = ScrollAreaViewport.useDrawerRootContext();
   const providerContext = ScrollAreaViewport.useDrawerProviderContext();
   const [swipeActive, setSwipeActive] = React__namespace.useState(false);
-  const releaseDismissTimeout = clamp.useTimeout();
+  const releaseDismissTimeout = useButton.useTimeout();
   const swipeAreaRef = React__namespace.useRef(null);
   const swipeStartEventRef = React__namespace.useRef(null);
   const openedBySwipeRef = React__namespace.useRef(false);
@@ -4585,13 +1632,13 @@ const DrawerSwipeArea = /*#__PURE__*/React__namespace.forwardRef(function Drawer
   const closedOffsetRef = React__namespace.useRef(null);
   const appliedSwipeStylesRef = React__namespace.useRef(false);
   const popupTransitionRef = React__namespace.useRef(null);
-  const swipeAreaId = clamp.useBaseUiId(componentProps.id);
+  const swipeAreaId = useButton.useBaseUiId(componentProps.id);
   const registerTrigger = ScrollAreaViewport.useTriggerRegistration(swipeAreaId, store);
   const open = store.useState('open');
   const resolvedSwipeDirection = swipeDirectionProp ?? oppositeSwipeDirection[swipeDirection];
   const dismissDirection = oppositeSwipeDirection[resolvedSwipeDirection];
   const enabled = !disabled && (!open || swipeActive);
-  const resetDragDelta = clamp.useStableCallback(() => {
+  const resetDragDelta = useButton.useStableCallback(() => {
     dragDeltaRef.current.x = 0;
     dragDeltaRef.current.y = 0;
   });
@@ -4698,7 +1745,7 @@ const DrawerSwipeArea = /*#__PURE__*/React__namespace.forwardRef(function Drawer
     });
     appliedSwipeStylesRef.current = true;
   }
-  const clearSwipeStyles = clamp.useStableCallback(() => {
+  const clearSwipeStyles = useButton.useStableCallback(() => {
     const popupElement = store.context.popupRef.current;
     if (popupElement && appliedSwipeStylesRef.current) {
       popupElement.style.removeProperty(ScrollAreaViewport.DrawerPopupCssVars.swipeMovementX);
@@ -4726,13 +1773,13 @@ const DrawerSwipeArea = /*#__PURE__*/React__namespace.forwardRef(function Drawer
       return;
     }
     openedBySwipeRef.current = true;
-    store.setOpen(true, clamp.createChangeEventDetails(clamp.swipe, event, swipeAreaRef.current ?? undefined));
+    store.setOpen(true, useButton.createChangeEventDetails(useButton.swipe, event, swipeAreaRef.current ?? undefined));
   }
   function closeDrawer(event) {
     if (!store.select('open')) {
       return;
     }
-    store.setOpen(false, clamp.createChangeEventDetails(clamp.swipe, event, swipeAreaRef.current ?? undefined));
+    store.setOpen(false, useButton.createChangeEventDetails(useButton.swipe, event, swipeAreaRef.current ?? undefined));
   }
   const swipe = useSwipeDismiss({
     enabled,
@@ -4931,7 +1978,7 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
   const [swipeRelease, setSwipeRelease] = React__namespace.useState(null);
   const pendingSwipeCloseSnapPointRef = React__namespace.useRef(undefined);
   const resetSwipeRef = React__namespace.useRef(null);
-  const controlledDismissFrame = clamp.useAnimationFrame();
+  const controlledDismissFrame = useButton.useAnimationFrame();
   const nestedSwipeActiveRef = React__namespace.useRef(false);
   const lastPointerTypeRef = React__namespace.useRef('');
   const ignoreNextTouchStartFromPenRef = React__namespace.useRef(false);
@@ -4979,15 +2026,15 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
     }
     return [swipeDirection];
   }, [snapPoints, swipeDirection]);
-  const setSwipeDismissed = clamp.useStableCallback(dismissed => {
+  const setSwipeDismissed = useButton.useStableCallback(dismissed => {
     setSwipeDismissedElements(store.context.popupRef.current, store.context.backdropRef.current, dismissed);
   });
-  const clearSwipeRelease = clamp.useStableCallback(() => {
+  const clearSwipeRelease = useButton.useStableCallback(() => {
     setSwipeDismissed(false);
-    store.context.popupRef.current?.removeAttribute(clamp.TransitionStatusDataAttributes.endingStyle);
+    store.context.popupRef.current?.removeAttribute(useButton.TransitionStatusDataAttributes.endingStyle);
     setSwipeRelease(null);
   });
-  const applySwipeProgress = clamp.useStableCallback(({
+  const applySwipeProgress = useButton.useStableCallback(({
     resolvedProgress,
     shouldTrackProgress,
     notifyParent
@@ -5101,14 +2148,14 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
       if (!popupElement) {
         return;
       }
-      const doc = clamp.ownerDocument(popupElement);
+      const doc = useButton.ownerDocument(popupElement);
       const selection = doc.getSelection?.();
       if (!selection || selection.isCollapsed) {
         return;
       }
       const anchorElement = floatingUi_utils_dom.isElement(selection.anchorNode) ? selection.anchorNode : selection.anchorNode?.parentElement;
       const focusElement = floatingUi_utils_dom.isElement(selection.focusNode) ? selection.focusNode : selection.focusNode?.parentElement;
-      if (!clamp.contains(popupElement, anchorElement) && !clamp.contains(popupElement, focusElement)) {
+      if (!useButton.contains(popupElement, anchorElement) && !useButton.contains(popupElement, focusElement)) {
         return;
       }
       selection.removeAllRanges();
@@ -5133,7 +2180,7 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
       }
       const doc = popupElement.ownerDocument;
       const elementAtPoint = getElementAtPoint(doc, position.x, position.y);
-      if (!elementAtPoint || !clamp.contains(popupElement, elementAtPoint)) {
+      if (!elementAtPoint || !useButton.contains(popupElement, elementAtPoint)) {
         return false;
       }
       const nativeEvent = details.nativeEvent;
@@ -5202,7 +2249,7 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
         notifyParentSwipingChange?.(false);
         setSwipeDismissed(true);
         popupElement.style.removeProperty('transition');
-        popupElement.setAttribute(clamp.TransitionStatusDataAttributes.endingStyle, '');
+        popupElement.setAttribute(useButton.TransitionStatusDataAttributes.endingStyle, '');
         ReactDOM__namespace.flushSync(() => {
           setSwipeRelease(resolveSwipeRelease({
             direction: resolvedDirection,
@@ -5273,7 +2320,7 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
       const dragTargetOffset = clamp.clamp(currentOffset + dragDelta, 0, popupHeight);
       const velocityOffset = Number.isFinite(resolvedDirectionalVelocity) && Math.abs(resolvedDirectionalVelocity) >= SNAP_VELOCITY_THRESHOLD ? clamp.clamp(resolvedDirectionalVelocity, -MAX_SNAP_VELOCITY, MAX_SNAP_VELOCITY) * SNAP_VELOCITY_MULTIPLIER : 0;
       const targetOffset = snapToSequentialPoints ? dragTargetOffset : clamp.clamp(dragTargetOffset + velocityOffset, 0, popupHeight);
-      const snapPointEventDetails = clamp.createChangeEventDetails(clamp.swipe, event);
+      const snapPointEventDetails = useButton.createChangeEventDetails(useButton.swipe, event);
       const closeFromSnapPoints = () => {
         pendingSwipeCloseSnapPointRef.current = activeSnapPoint;
         setActiveSnapPoint?.(null, snapPointEventDetails);
@@ -5361,12 +2408,12 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
         backdropElement.style.setProperty(ScrollAreaViewport.DrawerBackdropCssVars.swipeProgress, '0');
         backdropElement.style.removeProperty(ScrollAreaViewport.DrawerPopupCssVars.height);
       }
-      const dismissEventDetails = clamp.createChangeEventDetails(clamp.swipe, event);
+      const dismissEventDetails = useButton.createChangeEventDetails(useButton.swipe, event);
       store.setOpen(false, dismissEventDetails);
       if (dismissEventDetails.isCanceled) {
         const pendingSnapPoint = pendingSwipeCloseSnapPointRef.current;
         if (pendingSnapPoint !== undefined) {
-          setActiveSnapPoint?.(pendingSnapPoint, clamp.createChangeEventDetails(clamp.swipe, event));
+          setActiveSnapPoint?.(pendingSnapPoint, useButton.createChangeEventDetails(useButton.swipe, event));
         }
         pendingSwipeCloseSnapPointRef.current = undefined;
         resetSwipeRef.current?.();
@@ -5388,7 +2435,7 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
             // Parent rejected: revert animation and restore snap point.
             const pendingSnapPoint = pendingSwipeCloseSnapPointRef.current;
             if (pendingSnapPoint !== undefined) {
-              setActiveSnapPoint?.(pendingSnapPoint, clamp.createChangeEventDetails(clamp.swipe, savedEvent));
+              setActiveSnapPoint?.(pendingSnapPoint, useButton.createChangeEventDetails(useButton.swipe, savedEvent));
             }
             pendingSwipeCloseSnapPointRef.current = undefined;
             clearSwipeRelease();
@@ -5414,7 +2461,7 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
       return undefined;
     }
     const resolvedRootElement = rootElement;
-    const doc = clamp.ownerDocument(resolvedRootElement);
+    const doc = useButton.ownerDocument(resolvedRootElement);
     const win = floatingUi_utils_dom.getWindow(doc);
     function handleNativeTouchMove(event) {
       if (ignoreTouchSwipeRef.current) {
@@ -5557,7 +2604,7 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
         if (!open || !mounted || nestedDrawerOpen) {
           return;
         }
-        const doc = clamp.ownerDocument(event.currentTarget);
+        const doc = useButton.ownerDocument(event.currentTarget);
         const elementAtPoint = getElementAtPoint(doc, event.clientX, event.clientY);
         if (isSwipeIgnoredTarget(elementAtPoint) || isDrawerContentTarget(elementAtPoint)) {
           return;
@@ -5613,7 +2660,7 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
           touchScrollStateRef.current = null;
           return;
         }
-        const doc = clamp.ownerDocument(event.currentTarget);
+        const doc = useButton.ownerDocument(event.currentTarget);
         const elementAtPoint = getElementAtPoint(doc, touch.clientX, touch.clientY);
         ignoreTouchSwipeRef.current = isSwipeIgnoredTarget(elementAtPoint);
         if (ignoreTouchSwipeRef.current) {
@@ -5624,7 +2671,7 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
         const target = floatingUi_utils_dom.isElement(event.target) ? event.target : null;
         let scrollTarget = null;
         let hasCrossAxisScrollableContent = false;
-        if (rootElement && target && clamp.contains(rootElement, target)) {
+        if (rootElement && target && useButton.contains(rootElement, target)) {
           scrollTarget = findScrollableTouchTarget(target, rootElement, scrollAxis);
           hasCrossAxisScrollableContent = findScrollableTouchTarget(target, rootElement, crossScrollAxis) != null;
         }
@@ -5700,7 +2747,7 @@ function setBackdropSwipingAttribute(backdropElement, swiping) {
   backdropElement.removeAttribute(ScrollAreaViewport.DrawerPopupDataAttributes.swiping);
 }
 function isSwipeIgnoredTarget(target) {
-  return Boolean(target?.closest(ScrollAreaViewport.BASE_UI_SWIPE_IGNORE_SELECTOR));
+  return Boolean(target?.closest(InternalBackdrop.BASE_UI_SWIPE_IGNORE_SELECTOR));
 }
 function isDrawerContentTarget(target) {
   return Boolean(target?.closest(DRAWER_CONTENT_SELECTOR));
@@ -5721,11 +2768,11 @@ function isTextSelectionControl(target) {
 function hasExpandedSelectionWithinTarget(selection, target) {
   const anchorElement = floatingUi_utils_dom.isElement(selection.anchorNode) ? selection.anchorNode : selection.anchorNode?.parentElement;
   const focusElement = floatingUi_utils_dom.isElement(selection.focusNode) ? selection.focusNode : selection.focusNode?.parentElement;
-  return selection.containsNode(target, true) || clamp.contains(target, anchorElement) || clamp.contains(target, focusElement);
+  return selection.containsNode(target, true) || useButton.contains(target, anchorElement) || useButton.contains(target, focusElement);
 }
 function shouldIgnoreSwipeForTextSelection(doc, rootElement) {
   const activeElement = doc.activeElement;
-  const activeElementWithinRoot = Boolean(activeElement && clamp.contains(rootElement, activeElement));
+  const activeElementWithinRoot = Boolean(activeElement && useButton.contains(rootElement, activeElement));
   if (activeElementWithinRoot && isTextSelectionControl(activeElement)) {
     const {
       selectionStart,
@@ -5885,7 +2932,7 @@ const MenuArrow = /*#__PURE__*/React__namespace.forwardRef(function MenuArrow(co
   };
   return useRenderElement.useRenderElement('div', componentProps, {
     ref: [arrowRef, forwardedRef],
-    stateAttributesMapping: ScrollAreaViewport.popupStateMapping,
+    stateAttributesMapping: InternalBackdrop.popupStateMapping,
     state,
     props: {
       style: arrowStyles,
@@ -5897,8 +2944,8 @@ const MenuArrow = /*#__PURE__*/React__namespace.forwardRef(function MenuArrow(co
 if (process.env.NODE_ENV !== "production") MenuArrow.displayName = "MenuArrow";
 
 const stateAttributesMapping$1 = {
-  ...ScrollAreaViewport.popupStateMapping,
-  ...clamp.transitionStatusMapping
+  ...InternalBackdrop.popupStateMapping,
+  ...useButton.transitionStatusMapping
 };
 
 /**
@@ -5933,7 +2980,7 @@ const MenuBackdrop = /*#__PURE__*/React__namespace.forwardRef(function MenuBackd
       role: 'presentation',
       hidden: !mounted,
       style: {
-        pointerEvents: lastOpenChangeReason === clamp.triggerHover ? 'none' : undefined,
+        pointerEvents: lastOpenChangeReason === useButton.triggerHover ? 'none' : undefined,
         userSelect: 'none',
         WebkitUserSelect: 'none'
       }
@@ -5972,17 +3019,17 @@ const MenuCheckboxItem = /*#__PURE__*/React__namespace.forwardRef(function MenuC
     onCheckedChange,
     ...elementProps
   } = componentProps;
-  const listItem = MenuSubmenuTrigger.useCompositeListItem({
+  const listItem = useCompositeListItem.useCompositeListItem({
     label
   });
   const menuPositionerContext = MenuSubmenuTrigger.useMenuPositionerContext(true);
-  const id = clamp.useBaseUiId(idProp);
+  const id = useButton.useBaseUiId(idProp);
   const {
     store
   } = MenuSubmenuTrigger.useMenuRootContext();
   const highlighted = store.useState('isActive', listItem.index);
   const itemProps = store.useState('itemProps');
-  const [checked, setChecked] = clamp.useControlled({
+  const [checked, setChecked] = useButton.useControlled({
     controlled: checkedProp,
     default: defaultChecked ?? false,
     name: 'MenuCheckboxItem',
@@ -6006,9 +3053,9 @@ const MenuCheckboxItem = /*#__PURE__*/React__namespace.forwardRef(function MenuC
     highlighted,
     checked
   }), [disabled, highlighted, checked]);
-  const handleClick = clamp.useStableCallback(event => {
+  const handleClick = useButton.useStableCallback(event => {
     const details = {
-      ...clamp.createChangeEventDetails(clamp.itemPress, event.nativeEvent),
+      ...useButton.createChangeEventDetails(useButton.itemPress, event.nativeEvent),
       preventUnmountOnClose: () => {}
     };
     onCheckedChange?.(!checked, details);
@@ -6052,8 +3099,8 @@ const MenuCheckboxItemIndicator = /*#__PURE__*/React__namespace.forwardRef(funct
   const {
     transitionStatus,
     setMounted
-  } = clamp.useTransitionStatus(item.checked);
-  clamp.useOpenChangeComplete({
+  } = useButton.useTransitionStatus(item.checked);
+  useButton.useOpenChangeComplete({
     open: item.checked,
     ref: indicatorRef,
     onComplete() {
@@ -6138,14 +3185,14 @@ function usePopupAutoResize(parameters) {
     side,
     direction
   } = parameters;
-  const runOnceAnimationsFinish = clamp.useAnimationsFinished(popupElement, true, false);
-  const animationFrame = clamp.useAnimationFrame();
+  const runOnceAnimationsFinish = useButton.useAnimationsFinished(popupElement, true, false);
+  const animationFrame = useButton.useAnimationFrame();
   const committedDimensionsRef = React__namespace.useRef(null);
   const liveDimensionsRef = React__namespace.useRef(null);
   const isInitialRenderRef = React__namespace.useRef(true);
   const restoreAnchoringStylesRef = React__namespace.useRef(useRenderElement.NOOP);
-  const onMeasureLayout = clamp.useStableCallback(onMeasureLayoutParam);
-  const onMeasureLayoutComplete = clamp.useStableCallback(onMeasureLayoutCompleteParam);
+  const onMeasureLayout = useButton.useStableCallback(onMeasureLayoutParam);
+  const onMeasureLayoutComplete = useButton.useStableCallback(onMeasureLayoutCompleteParam);
   const anchoringStyles = React__namespace.useMemo(() => {
     // Ensure popup size transitions correctly when anchored to `bottom` (side=top) or `right` (side=left).
     let isOriginSide = side === 'top';
@@ -6163,7 +3210,7 @@ function usePopupAutoResize(parameters) {
       [isPhysicalLeft ? 'right' : 'left']: '0'
     } : useRenderElement.EMPTY_OBJECT;
   }, [side, direction]);
-  clamp.useIsoLayoutEffect(() => {
+  useButton.useIsoLayoutEffect(() => {
     // Reset the state when the popup is closed.
     if (!mounted || !enabled() || typeof ResizeObserver !== 'function') {
       restoreAnchoringStylesRef.current = useRenderElement.NOOP;
@@ -6304,7 +3351,7 @@ function usePopupViewport(parameters) {
     cssVars,
     children
   } = parameters;
-  const direction = ScrollAreaViewport.useDirection();
+  const direction = InternalBackdrop.useDirection();
   const activeTrigger = store.useState('activeTriggerElement');
   const activeTriggerId = store.useState('activeTriggerId');
   const open = store.useState('open');
@@ -6321,22 +3368,22 @@ function usePopupViewport(parameters) {
   const [newTriggerOffset, setNewTriggerOffset] = React__namespace.useState(null);
   const currentContainerRef = React__namespace.useRef(null);
   const previousContainerRef = React__namespace.useRef(null);
-  const onAnimationsFinished = clamp.useAnimationsFinished(currentContainerRef, true, false);
-  const cleanupFrame = clamp.useAnimationFrame();
+  const onAnimationsFinished = useButton.useAnimationsFinished(currentContainerRef, true, false);
+  const cleanupFrame = useButton.useAnimationFrame();
   const [previousContentDimensions, setPreviousContentDimensions] = React__namespace.useState(null);
   const [showStartingStyleAttribute, setShowStartingStyleAttribute] = React__namespace.useState(false);
-  clamp.useIsoLayoutEffect(() => {
+  useButton.useIsoLayoutEffect(() => {
     store.set('hasViewport', true);
     return () => {
       store.set('hasViewport', false);
     };
   }, [store]);
-  const handleMeasureLayout = clamp.useStableCallback(() => {
+  const handleMeasureLayout = useButton.useStableCallback(() => {
     currentContainerRef.current?.style.setProperty('animation', 'none');
     currentContainerRef.current?.style.setProperty('transition', 'none');
     previousContainerRef.current?.style.setProperty('display', 'none');
   });
-  const handleMeasureLayoutComplete = clamp.useStableCallback(previousDimensions => {
+  const handleMeasureLayoutComplete = useButton.useStableCallback(previousDimensions => {
     currentContainerRef.current?.style.removeProperty('animation');
     currentContainerRef.current?.style.removeProperty('transition');
     previousContainerRef.current?.style.removeProperty('display');
@@ -6345,7 +3392,7 @@ function usePopupViewport(parameters) {
     }
   });
   const lastHandledTriggerRef = React__namespace.useRef(null);
-  clamp.useIsoLayoutEffect(() => {
+  useButton.useIsoLayoutEffect(() => {
     // When a trigger changes, set the captured children HTML to state,
     // so we can render both new and old content.
     if (activeTrigger && previousActiveTrigger && activeTrigger !== previousActiveTrigger && lastHandledTriggerRef.current !== activeTrigger && capturedNodeRef.current) {
@@ -6372,7 +3419,7 @@ function usePopupViewport(parameters) {
 
   // Capture a clone of the current content DOM subtree when not transitioning.
   // We can't store previous React nodes as they may be stateful; instead we capture DOM clones for visual continuity.
-  clamp.useIsoLayoutEffect(() => {
+  useButton.useIsoLayoutEffect(() => {
     // When a transition is in progress, we store the next content in capturedNodeRef.
     // This handles the case where the trigger changes multiple times before the transition finishes.
     // We want to always capture the latest content for the previous snapshot.
@@ -6401,7 +3448,7 @@ function usePopupViewport(parameters) {
     childrenToRender = /*#__PURE__*/jsxRuntime.jsxs(React__namespace.Fragment, {
       children: [/*#__PURE__*/jsxRuntime.jsx("div", {
         "data-previous": true,
-        inert: ScrollAreaViewport.inertValue(true),
+        inert: InternalBackdrop.inertValue(true),
         ref: previousContainerRef,
         style: {
           ...(previousContentDimensions ? {
@@ -6421,7 +3468,7 @@ function usePopupViewport(parameters) {
   }
 
   // When previousContentNode is present, imperatively populate the previous container with the cloned children.
-  clamp.useIsoLayoutEffect(() => {
+  useButton.useIsoLayoutEffect(() => {
     const container = previousContainerRef.current;
     if (!container || !previousContentNode) {
       return;
@@ -6508,7 +3555,7 @@ function usePopupContentKey(activeTriggerId, payload) {
   const previousActiveTriggerIdRef = React__namespace.useRef(activeTriggerId);
   const previousPayloadRef = React__namespace.useRef(payload);
   const pendingPayloadUpdateRef = React__namespace.useRef(false);
-  clamp.useIsoLayoutEffect(() => {
+  useButton.useIsoLayoutEffect(() => {
     // Compare against the last committed values to decide whether we need a new DOM subtree.
     const previousActiveTriggerId = previousActiveTriggerIdRef.current;
     const previousPayload = previousPayloadRef.current;
@@ -6621,14 +3668,14 @@ class MenuHandle {
     if (triggerId && !triggerElement) {
       throw new Error(process.env.NODE_ENV !== "production" ? `Base UI: MenuHandle.open: No trigger found with id "${triggerId}".` : useRenderElement.formatErrorMessage(83, triggerId));
     }
-    this.store.setOpen(true, clamp.createChangeEventDetails('imperative-action', undefined, triggerElement));
+    this.store.setOpen(true, useButton.createChangeEventDetails('imperative-action', undefined, triggerElement));
   }
 
   /**
    * Closes the menu.
    */
   close() {
-    this.store.setOpen(false, clamp.createChangeEventDetails('imperative-action', undefined, undefined));
+    this.store.setOpen(false, useButton.createChangeEventDetails('imperative-action', undefined, undefined));
   }
 
   /**
@@ -6742,7 +3789,7 @@ const ScrollAreaScrollbar = /*#__PURE__*/React__namespace.forwardRef(function Sc
     overflowYEnd: overflowEdges.yEnd,
     cornerHidden: hiddenState.corner
   };
-  const direction = ScrollAreaViewport.useDirection();
+  const direction = InternalBackdrop.useDirection();
   const hideTrackUntilMeasured = !hasMeasuredScrollbar && !keepMounted;
   React__namespace.useEffect(() => {
     const viewportEl = viewportRef.current;
@@ -6900,7 +3947,7 @@ const ScrollAreaContent = /*#__PURE__*/React__namespace.forwardRef(function Scro
   const {
     viewportState
   } = ScrollAreaViewport.useScrollAreaRootContext();
-  clamp.useIsoLayoutEffect(() => {
+  useButton.useIsoLayoutEffect(() => {
     if (typeof ResizeObserver === 'undefined') {
       return undefined;
     }
@@ -7040,434 +4087,36 @@ var index_parts$2 = /*#__PURE__*/Object.freeze({
   Viewport: ScrollAreaViewport.ScrollAreaViewport
 });
 
-function ComboboxRoot(props) {
-  const {
-    multiple = false,
-    defaultValue,
-    value,
-    onValueChange,
-    autoComplete,
-    ...other
-  } = props;
-  return /*#__PURE__*/jsxRuntime.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__namespace.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 = NumberFieldInput.useFieldRootContext();
-  const store = useComboboxRootContext();
-  const inputInsidePopup = ScrollAreaViewport.useStore(store, selectors.inputInsidePopup);
-  const triggerElement = ScrollAreaViewport.useStore(store, selectors.triggerElement);
-  const inputElement = ScrollAreaViewport.useStore(store, selectors.inputElement);
-  const rootId = ScrollAreaViewport.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__namespace.useEffect(() => {
-      if (!inputElement || inputInsidePopup) {
-        return;
-      }
-      const ownerStackMessage = clamp.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.';
-      clamp.error(`${message}${ownerStackMessage}`);
-    }, [inputElement, inputInsidePopup]);
-  }
-  const labelProps = NumberFieldInput.useLabel({
-    id: defaultLabelId,
-    fallbackControlId: localControlId,
-    setLabelId(nextLabelId) {
-      store.set('labelId', nextLabelId);
-    }
-  });
-  return useRenderElement.useRenderElement('div', componentProps, {
-    ref: forwardedRef,
-    state: fieldRootContext.state,
-    props: [labelProps, elementProps],
-    stateAttributesMapping: NumberFieldInput.fieldValidityMapping
-  });
-});
-if (process.env.NODE_ENV !== "production") ComboboxLabel.displayName = "ComboboxLabel";
-
-function ComboboxValue(props) {
-  const {
-    children: childrenProp,
-    placeholder
-  } = props;
-  const store = useComboboxRootContext();
-  const itemToStringLabel = ScrollAreaViewport.useStore(store, selectors.itemToStringLabel);
-  const selectedValue = ScrollAreaViewport.useStore(store, selectors.selectedValue);
-  const items = ScrollAreaViewport.useStore(store, selectors.items);
-  const multiple = ScrollAreaViewport.useStore(store, selectors.selectionMode) === 'multiple';
-  const hasSelectedValue = ScrollAreaViewport.useStore(store, selectors.hasSelectedValue);
-  const shouldCheckNullItemLabel = !hasSelectedValue && placeholder != null && childrenProp == null;
-  const hasNullLabel = ScrollAreaViewport.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__*/jsxRuntime.jsx(React__namespace.Fragment, {
-    children: children
-  });
-}
-
-const ComboboxItemIndicator = /*#__PURE__*/React__namespace.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__*/jsxRuntime.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__namespace.memo(/*#__PURE__*/React__namespace.forwardRef((componentProps, forwardedRef) => {
-  const {
-    render,
-    className,
-    keepMounted,
-    ...elementProps
-  } = componentProps;
-  const {
-    selected
-  } = useComboboxItemContext();
-  const indicatorRef = React__namespace.useRef(null);
-  const {
-    transitionStatus,
-    setMounted
-  } = clamp.useTransitionStatus(selected);
-  const state = {
-    selected,
-    transitionStatus
-  };
-  const element = useRenderElement.useRenderElement('span', componentProps, {
-    ref: [forwardedRef, indicatorRef],
-    state,
-    props: [{
-      'aria-hidden': true,
-      children: '✔️'
-    }, elementProps],
-    stateAttributesMapping: clamp.transitionStatusMapping
-  });
-  clamp.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__namespace.forwardRef(function ComboboxChips(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    ...elementProps
-  } = componentProps;
-  const store = useComboboxRootContext();
-  const open = ScrollAreaViewport.useStore(store, selectors.open);
-  const hasSelectionChips = ScrollAreaViewport.useStore(store, selectors.hasSelectionChips);
-  const [highlightedChipIndex, setHighlightedChipIndex] = React__namespace.useState(undefined);
-  if (open && highlightedChipIndex !== undefined) {
-    setHighlightedChipIndex(undefined);
-  }
-  const chipsRef = React__namespace.useRef([]);
-  const element = useRenderElement.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'
-    } : useRenderElement.EMPTY_OBJECT, elementProps]
-  });
-  const contextValue = React__namespace.useMemo(() => ({
-    highlightedChipIndex,
-    setHighlightedChipIndex,
-    chipsRef
-  }), [highlightedChipIndex, setHighlightedChipIndex, chipsRef]);
-  return /*#__PURE__*/jsxRuntime.jsx(ComboboxChipsContext.Provider, {
-    value: contextValue,
-    children: /*#__PURE__*/jsxRuntime.jsx(MenuSubmenuTrigger.CompositeList, {
-      elementsRef: chipsRef,
-      children: element
-    })
-  });
-});
-if (process.env.NODE_ENV !== "production") ComboboxChips.displayName = "ComboboxChips";
-
-const ComboboxChipContext = /*#__PURE__*/React__namespace.createContext(undefined);
-if (process.env.NODE_ENV !== "production") ComboboxChipContext.displayName = "ComboboxChipContext";
-function useComboboxChipContext() {
-  const context = React__namespace.useContext(ComboboxChipContext);
-  if (!context) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'useComboboxChipContext must be used within a ComboboxChip' : useRenderElement.formatErrorMessage(17));
-  }
-  return context;
-}
-
-const ComboboxChip = /*#__PURE__*/React__namespace.forwardRef(function ComboboxChip(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    ...elementProps
-  } = componentProps;
-  const store = useComboboxRootContext();
-  const {
-    setHighlightedChipIndex,
-    chipsRef
-  } = useComboboxChipsContext();
-  const disabled = ScrollAreaViewport.useStore(store, selectors.disabled);
-  const readOnly = ScrollAreaViewport.useStore(store, selectors.readOnly);
-  const selectedValue = ScrollAreaViewport.useStore(store, selectors.selectedValue);
-  const {
-    ref,
-    index
-  } = MenuSubmenuTrigger.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;
-      clamp.stopEvent(event);
-      store.state.setIndices({
-        activeIndex: null,
-        selectedIndex: null,
-        type: 'keyboard'
-      });
-      store.state.setSelectedValue(selectedValue.filter((_, i) => i !== index), clamp.createChangeEventDetails(clamp.none, event.nativeEvent));
-    } else if (event.key === 'Enter' || event.key === ' ') {
-      clamp.stopEvent(event);
-      nextIndex = undefined;
-    } else if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
-      clamp.stopEvent(event);
-      store.state.setOpen(true, clamp.createChangeEventDetails(clamp.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.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__namespace.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__namespace.useMemo(() => ({
-    index
-  }), [index]);
-  return /*#__PURE__*/jsxRuntime.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__namespace.forwardRef(function ComboboxChipRemove(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    disabled: disabledProp = false,
-    nativeButton = true,
-    ...elementProps
-  } = componentProps;
-  const store = useComboboxRootContext();
-  const {
-    index
-  } = useComboboxChipContext();
-  const comboboxDisabled = ScrollAreaViewport.useStore(store, selectors.disabled);
-  const readOnly = ScrollAreaViewport.useStore(store, selectors.readOnly);
-  const selectedValue = ScrollAreaViewport.useStore(store, selectors.selectedValue);
-  const isItemEqualToValue = ScrollAreaViewport.useStore(store, selectors.isItemEqualToValue);
-  const disabled = comboboxDisabled || disabledProp;
-  const {
-    buttonRef,
-    getButtonProps
-  } = clamp.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 = clamp.createChangeEventDetails(clamp.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.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) {
-            clamp.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,
-  Backdrop: ComboboxBackdrop,
-  Chip: ComboboxChip,
-  ChipRemove: ComboboxChipRemove,
-  Chips: ComboboxChips,
-  Clear: ComboboxClear,
-  Collection: ComboboxCollection,
-  Empty: ComboboxEmpty,
-  Group: ComboboxGroup,
-  GroupLabel: ComboboxGroupLabel,
-  Icon: ComboboxIcon,
-  Input: ComboboxInput,
-  InputGroup: ComboboxInputGroup,
-  Item: ComboboxItem,
-  ItemIndicator: ComboboxItemIndicator,
-  Label: ComboboxLabel,
-  List: ComboboxList,
-  Popup: ComboboxPopup,
-  Portal: ComboboxPortal,
-  Positioner: ComboboxPositioner,
-  Root: ComboboxRoot,
-  Row: ComboboxRow,
+  Arrow: ComboboxChipRemove.ComboboxArrow,
+  Backdrop: ComboboxChipRemove.ComboboxBackdrop,
+  Chip: ComboboxChipRemove.ComboboxChip,
+  ChipRemove: ComboboxChipRemove.ComboboxChipRemove,
+  Chips: ComboboxChipRemove.ComboboxChips,
+  Clear: ComboboxChipRemove.ComboboxClear,
+  Collection: ComboboxChipRemove.ComboboxCollection,
+  Empty: ComboboxChipRemove.ComboboxEmpty,
+  Group: ComboboxChipRemove.ComboboxGroup,
+  GroupLabel: ComboboxChipRemove.ComboboxGroupLabel,
+  Icon: ComboboxChipRemove.ComboboxIcon,
+  Input: ComboboxChipRemove.ComboboxInput,
+  InputGroup: ComboboxChipRemove.ComboboxInputGroup,
+  Item: ComboboxChipRemove.ComboboxItem,
+  ItemIndicator: ComboboxChipRemove.ComboboxItemIndicator,
+  Label: ComboboxChipRemove.ComboboxLabel,
+  List: ComboboxChipRemove.ComboboxList,
+  Popup: ComboboxChipRemove.ComboboxPopup,
+  Portal: ComboboxChipRemove.ComboboxPortal,
+  Positioner: ComboboxChipRemove.ComboboxPositioner,
+  Root: ComboboxChipRemove.ComboboxRoot,
+  Row: ComboboxChipRemove.ComboboxRow,
   Separator: Separator.Separator,
-  Status: ComboboxStatus,
-  Trigger: ComboboxTrigger,
-  Value: ComboboxValue,
-  useFilter: useComboboxFilter,
-  useFilteredItems: useFilteredItems
+  Status: ComboboxChipRemove.ComboboxStatus,
+  Trigger: ComboboxChipRemove.ComboboxTrigger,
+  Value: ComboboxChipRemove.ComboboxValue,
+  useFilter: ComboboxChipRemove.useComboboxFilter,
+  useFilteredItems: ComboboxChipRemove.useFilteredItems
 });
 
 const NumberFieldScrubAreaContext = /*#__PURE__*/React__namespace.createContext(undefined);
@@ -7559,7 +4208,7 @@ const NumberFieldScrubArea = /*#__PURE__*/React__namespace.forwardRef(function N
     y: 0
   });
   const visualScaleRef = React__namespace.useRef(1);
-  const exitPointerLockTimeout = clamp.useTimeout();
+  const exitPointerLockTimeout = useButton.useTimeout();
   const [isTouchInput, setIsTouchInput] = React__namespace.useState(false);
   const [isPointerLockDenied, setIsPointerLockDenied] = React__namespace.useState(false);
   const [isScrubbing, setIsScrubbing] = React__namespace.useState(false);
@@ -7574,7 +4223,7 @@ const NumberFieldScrubArea = /*#__PURE__*/React__namespace.forwardRef(function N
       scrubAreaCursorRef.current.style.transform = `translate3d(${x}px,${y}px,0) scale(${1 / visualScaleRef.current})`;
     }
   }
-  const onScrub = clamp.useStableCallback(({
+  const onScrub = useButton.useStableCallback(({
     movementX,
     movementY
   }) => {
@@ -7604,7 +4253,7 @@ const NumberFieldScrubArea = /*#__PURE__*/React__namespace.forwardRef(function N
     virtualCursorCoords.current = newCoords;
     updateCursorTransform(newCoords.x, newCoords.y);
   });
-  const onScrubbingChange = clamp.useStableCallback((scrubbingValue, {
+  const onScrubbingChange = useButton.useStableCallback((scrubbingValue, {
     clientX,
     clientY
   }) => {
@@ -7632,13 +4281,13 @@ const NumberFieldScrubArea = /*#__PURE__*/React__namespace.forwardRef(function N
     function handleScrubPointerUp(event) {
       function handler() {
         try {
-          clamp.ownerDocument(scrubAreaRef.current).exitPointerLock();
+          useButton.ownerDocument(scrubAreaRef.current).exitPointerLock();
         } catch {
           // Ignore errors.
         } finally {
           isScrubbingRef.current = false;
           onScrubbingChange(false, event);
-          onValueCommitted(lastChangedValueRef.current ?? valueRef.current, clamp.createGenericEventDetails(clamp.scrub, event));
+          onValueCommitted(lastChangedValueRef.current ?? valueRef.current, useButton.createGenericEventDetails(useButton.scrub, event));
 
           // Manually dispatch a click event if no movement happened, since
           // preventDefault on pointerdown prevents the browser click event.
@@ -7652,7 +4301,7 @@ const NumberFieldScrubArea = /*#__PURE__*/React__namespace.forwardRef(function N
           pointerDownTargetRef.current = null;
         }
       }
-      if (clamp.isFirefox) {
+      if (useButton.isFirefox) {
         // Firefox needs a small delay here when soft-clicking as the pointer
         // lock will not release otherwise.
         exitPointerLockTimeout.start(20, handler);
@@ -7683,7 +4332,7 @@ const NumberFieldScrubArea = /*#__PURE__*/React__namespace.forwardRef(function N
           incrementValue(Math.abs(rawAmount), {
             direction: rawAmount >= 0 ? 1 : -1,
             event,
-            reason: clamp.scrub
+            reason: useButton.scrub
           });
         }
       }
@@ -7738,12 +4387,12 @@ const NumberFieldScrubArea = /*#__PURE__*/React__namespace.forwardRef(function N
       onScrubbingChange(true, event.nativeEvent);
 
       // WebKit causes significant layout shift with the native message, so we can't use it.
-      if (!isTouch && !clamp.isWebKit) {
+      if (!isTouch && !useButton.isWebKit) {
         try {
           // Avoid non-deterministic errors in testing environments. This error sometimes
           // appears:
           // "The root document of this element is not valid for pointer lock."
-          await clamp.ownerDocument(scrubAreaRef.current).body.requestPointerLock();
+          await useButton.ownerDocument(scrubAreaRef.current).body.requestPointerLock();
           setIsPointerLockDenied(false);
         } catch (error) {
           setIsPointerLockDenied(true);
@@ -7805,7 +4454,7 @@ const NumberFieldScrubAreaCursor = /*#__PURE__*/React__namespace.forwardRef(func
     scrubAreaCursorRef
   } = useNumberFieldScrubAreaContext();
   const [domElement, setDomElement] = React__namespace.useState(null);
-  const shouldRender = isScrubbing && !clamp.isWebKit && !isTouchInput && !isPointerLockDenied;
+  const shouldRender = isScrubbing && !useButton.isWebKit && !isTouchInput && !isPointerLockDenied;
   const element = useRenderElement.useRenderElement('span', componentProps, {
     enabled: shouldRender,
     ref: [forwardedRef, scrubAreaCursorRef, setDomElement],
@@ -7821,7 +4470,7 @@ const NumberFieldScrubAreaCursor = /*#__PURE__*/React__namespace.forwardRef(func
     }, elementProps],
     stateAttributesMapping: NumberFieldInput.stateAttributesMapping
   });
-  return element && /*#__PURE__*/ReactDOM__namespace.createPortal(element, clamp.ownerDocument(domElement).body);
+  return element && /*#__PURE__*/ReactDOM__namespace.createPortal(element, useButton.ownerDocument(domElement).body);
 });
 if (process.env.NODE_ENV !== "production") NumberFieldScrubAreaCursor.displayName = "NumberFieldScrubAreaCursor";