@jobber/components 8.21.1 → 8.23.0

package/dist/SelectGroupLabel-cjs.js

@@ -0,0 +1,1924 @@
+'use strict';
+
+var React = require('react');
+var useButton = require('./useButton-cjs.js');
+var useRenderElement = require('./useRenderElement-cjs.js');
+var InternalBackdrop = require('./InternalBackdrop-cjs.js');
+var useLabelableId = require('./useLabelableId-cjs.js');
+var resolveAriaLabelledBy = require('./resolveAriaLabelledBy-cjs.js');
+var jsxRuntime = require('react/jsx-runtime');
+var useCompositeListItem = require('./useCompositeListItem-cjs.js');
+var ReactDOM = require('react-dom');
+var index_esm = require('./index.esm-cjs.js');
+var CSPContext = require('./CSPContext-cjs.js');
+var ToolbarRootContext = require('./ToolbarRootContext-cjs.js');
+var clamp = require('./clamp-cjs.js');
+var floatingUi_utils_dom = require('./floating-ui.utils.dom-cjs.js');
+var floatingUi_reactDom = require('./floating-ui.react-dom-cjs.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var ReactDOM__namespace = /*#__PURE__*/_interopNamespaceDefault(ReactDOM);
+
+const SelectRootContext = /*#__PURE__*/React__namespace.createContext(null);
+if (process.env.NODE_ENV !== "production") SelectRootContext.displayName = "SelectRootContext";
+const SelectFloatingContext = /*#__PURE__*/React__namespace.createContext(null);
+if (process.env.NODE_ENV !== "production") SelectFloatingContext.displayName = "SelectFloatingContext";
+function useSelectRootContext() {
+  const context = React__namespace.useContext(SelectRootContext);
+  if (context === null) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: SelectRootContext is missing. Select parts must be placed within <Select.Root>.' : useRenderElement.formatErrorMessage(60));
+  }
+  return context;
+}
+function useSelectFloatingContext() {
+  const context = React__namespace.useContext(SelectFloatingContext);
+  if (context === null) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: SelectFloatingContext is missing. Select parts must be placed within <Select.Root>.' : useRenderElement.formatErrorMessage(61));
+  }
+  return context;
+}
+
+const selectors = {
+  id: InternalBackdrop.createSelector(state => state.id),
+  labelId: InternalBackdrop.createSelector(state => state.labelId),
+  modal: InternalBackdrop.createSelector(state => state.modal),
+  multiple: InternalBackdrop.createSelector(state => state.multiple),
+  items: InternalBackdrop.createSelector(state => state.items),
+  itemToStringLabel: InternalBackdrop.createSelector(state => state.itemToStringLabel),
+  itemToStringValue: InternalBackdrop.createSelector(state => state.itemToStringValue),
+  isItemEqualToValue: InternalBackdrop.createSelector(state => state.isItemEqualToValue),
+  value: InternalBackdrop.createSelector(state => state.value),
+  hasSelectedValue: InternalBackdrop.createSelector(state => {
+    const {
+      value,
+      multiple,
+      itemToStringValue
+    } = state;
+    if (value == null) {
+      return false;
+    }
+    if (multiple && Array.isArray(value)) {
+      return value.length > 0;
+    }
+    return resolveAriaLabelledBy.stringifyAsValue(value, itemToStringValue) !== '';
+  }),
+  hasNullItemLabel: InternalBackdrop.createSelector((state, enabled) => {
+    return enabled ? resolveAriaLabelledBy.hasNullItemLabel(state.items) : false;
+  }),
+  open: InternalBackdrop.createSelector(state => state.open),
+  mounted: InternalBackdrop.createSelector(state => state.mounted),
+  forceMount: InternalBackdrop.createSelector(state => state.forceMount),
+  transitionStatus: InternalBackdrop.createSelector(state => state.transitionStatus),
+  openMethod: InternalBackdrop.createSelector(state => state.openMethod),
+  activeIndex: InternalBackdrop.createSelector(state => state.activeIndex),
+  selectedIndex: InternalBackdrop.createSelector(state => state.selectedIndex),
+  isActive: InternalBackdrop.createSelector((state, index) => state.activeIndex === index),
+  isSelected: InternalBackdrop.createSelector((state, index, itemValue) => {
+    const comparer = state.isItemEqualToValue;
+    const storeValue = state.value;
+    if (state.multiple) {
+      return Array.isArray(storeValue) && storeValue.some(selectedItem => resolveAriaLabelledBy.compareItemEquality(itemValue, selectedItem, comparer));
+    }
+
+    // `selectedIndex` is only updated after the items mount for the first time,
+    // the value check avoids a re-render for the initially selected item.
+    if (state.selectedIndex === index && state.selectedIndex !== null) {
+      return true;
+    }
+    return resolveAriaLabelledBy.compareItemEquality(itemValue, storeValue, comparer);
+  }),
+  isSelectedByFocus: InternalBackdrop.createSelector((state, index) => {
+    return state.selectedIndex === index;
+  }),
+  popupProps: InternalBackdrop.createSelector(state => state.popupProps),
+  triggerProps: InternalBackdrop.createSelector(state => state.triggerProps),
+  triggerElement: InternalBackdrop.createSelector(state => state.triggerElement),
+  positionerElement: InternalBackdrop.createSelector(state => state.positionerElement),
+  listElement: InternalBackdrop.createSelector(state => state.listElement),
+  scrollUpArrowVisible: InternalBackdrop.createSelector(state => state.scrollUpArrowVisible),
+  scrollDownArrowVisible: InternalBackdrop.createSelector(state => state.scrollDownArrowVisible),
+  hasScrollArrows: InternalBackdrop.createSelector(state => state.hasScrollArrows)
+};
+
+function SelectRoot(props) {
+  const {
+    id,
+    value: valueProp,
+    defaultValue = null,
+    onValueChange,
+    open: openProp,
+    defaultOpen = false,
+    onOpenChange,
+    name: nameProp,
+    autoComplete,
+    disabled: disabledProp = false,
+    readOnly = false,
+    required = false,
+    modal = true,
+    actionsRef,
+    inputRef,
+    onOpenChangeComplete,
+    items,
+    multiple = false,
+    itemToStringLabel,
+    itemToStringValue,
+    isItemEqualToValue = resolveAriaLabelledBy.defaultItemEquality,
+    highlightItemOnHover = true,
+    children
+  } = props;
+  const {
+    clearErrors
+  } = useLabelableId.useFormContext();
+  const {
+    setDirty,
+    setTouched,
+    setFocused,
+    shouldValidateOnChange,
+    validityData,
+    setFilled,
+    name: fieldName,
+    disabled: fieldDisabled,
+    validation,
+    validationMode
+  } = useLabelableId.useFieldRootContext();
+  const generatedId = useLabelableId.useLabelableId({
+    id
+  });
+  const disabled = fieldDisabled || disabledProp;
+  const name = fieldName ?? nameProp;
+  const [value, setValueUnwrapped] = useButton.useControlled({
+    controlled: valueProp,
+    default: multiple ? defaultValue ?? useRenderElement.EMPTY_ARRAY : defaultValue,
+    name: 'Select',
+    state: 'value'
+  });
+  const [open, setOpenUnwrapped] = useButton.useControlled({
+    controlled: openProp,
+    default: defaultOpen,
+    name: 'Select',
+    state: 'open'
+  });
+  const listRef = React__namespace.useRef([]);
+  const labelsRef = React__namespace.useRef([]);
+  const popupRef = React__namespace.useRef(null);
+  const scrollHandlerRef = React__namespace.useRef(null);
+  const scrollArrowsMountedCountRef = React__namespace.useRef(0);
+  const valueRef = React__namespace.useRef(null);
+  const valuesRef = React__namespace.useRef([]);
+  const typingRef = React__namespace.useRef(false);
+  const keyboardActiveRef = React__namespace.useRef(false);
+  const selectedItemTextRef = React__namespace.useRef(null);
+  const selectionRef = React__namespace.useRef({
+    allowSelectedMouseUp: false,
+    allowUnselectedMouseUp: false
+  });
+  const alignItemWithTriggerActiveRef = React__namespace.useRef(false);
+  const {
+    mounted,
+    setMounted,
+    transitionStatus
+  } = useButton.useTransitionStatus(open);
+  const {
+    openMethod,
+    triggerProps: interactionTypeProps
+  } = InternalBackdrop.useOpenInteractionType(open);
+  const store = useRenderElement.useRefWithInit(() => new InternalBackdrop.Store({
+    id: generatedId,
+    labelId: undefined,
+    modal,
+    multiple,
+    itemToStringLabel,
+    itemToStringValue,
+    isItemEqualToValue,
+    value,
+    open,
+    mounted,
+    transitionStatus,
+    items,
+    forceMount: false,
+    openMethod: null,
+    activeIndex: null,
+    selectedIndex: null,
+    popupProps: {},
+    triggerProps: {},
+    triggerElement: null,
+    positionerElement: null,
+    listElement: null,
+    scrollUpArrowVisible: false,
+    scrollDownArrowVisible: false,
+    hasScrollArrows: false
+  })).current;
+  const activeIndex = InternalBackdrop.useStore(store, selectors.activeIndex);
+  const selectedIndex = InternalBackdrop.useStore(store, selectors.selectedIndex);
+  const triggerElement = InternalBackdrop.useStore(store, selectors.triggerElement);
+  const positionerElement = InternalBackdrop.useStore(store, selectors.positionerElement);
+  const serializedValue = React__namespace.useMemo(() => {
+    if (multiple && Array.isArray(value) && value.length === 0) {
+      return '';
+    }
+    return resolveAriaLabelledBy.stringifyAsValue(value, itemToStringValue);
+  }, [multiple, value, itemToStringValue]);
+  const fieldStringValue = React__namespace.useMemo(() => {
+    if (multiple && Array.isArray(value)) {
+      return value.map(currentValue => resolveAriaLabelledBy.stringifyAsValue(currentValue, itemToStringValue));
+    }
+    return resolveAriaLabelledBy.stringifyAsValue(value, itemToStringValue);
+  }, [multiple, value, itemToStringValue]);
+  const controlRef = useButton.useValueAsRef(store.state.triggerElement);
+  useLabelableId.useField({
+    id: generatedId,
+    commit: validation.commit,
+    value,
+    controlRef,
+    name,
+    getValue: () => fieldStringValue
+  });
+  const initialValueRef = React__namespace.useRef(value);
+  useButton.useIsoLayoutEffect(() => {
+    // Ensure the values and labels are registered for programmatic value changes.
+    if (value !== initialValueRef.current) {
+      store.set('forceMount', true);
+    }
+  }, [store, value]);
+  useButton.useIsoLayoutEffect(() => {
+    setFilled(multiple ? Array.isArray(value) && value.length > 0 : value != null);
+  }, [multiple, value, setFilled]);
+  useButton.useIsoLayoutEffect(function syncSelectedIndex() {
+    if (open) {
+      return;
+    }
+    const registry = valuesRef.current;
+    if (multiple) {
+      const currentValue = Array.isArray(value) ? value : [];
+      if (currentValue.length === 0) {
+        store.set('selectedIndex', null);
+        return;
+      }
+      const lastValue = currentValue[currentValue.length - 1];
+      const lastIndex = resolveAriaLabelledBy.findItemIndex(registry, lastValue, isItemEqualToValue);
+      store.set('selectedIndex', lastIndex === -1 ? null : lastIndex);
+      return;
+    }
+    const index = resolveAriaLabelledBy.findItemIndex(registry, value, isItemEqualToValue);
+    store.set('selectedIndex', index === -1 ? null : index);
+  }, [multiple, open, value, valuesRef, isItemEqualToValue, store]);
+  useButton.useValueChanged(value, () => {
+    clearErrors(name);
+    setDirty(value !== validityData.initialValue);
+    if (shouldValidateOnChange()) {
+      validation.commit(value);
+    } else {
+      validation.commit(value, true);
+    }
+  });
+  const setOpen = useButton.useStableCallback((nextOpen, eventDetails) => {
+    onOpenChange?.(nextOpen, eventDetails);
+    if (eventDetails.isCanceled) {
+      return;
+    }
+    setOpenUnwrapped(nextOpen);
+    if (!nextOpen && (eventDetails.reason === useButton.focusOut || eventDetails.reason === useButton.outsidePress)) {
+      setTouched(true);
+      setFocused(false);
+      if (validationMode === 'onBlur') {
+        validation.commit(value);
+      }
+    }
+
+    // The active index will sync to the last selected index on the next open.
+    // Workaround `enableFocusInside` in Floating UI setting `tabindex=0` of a non-highlighted
+    // option upon close when tabbing out due to `keepMounted=true`:
+    // https://github.com/floating-ui/floating-ui/pull/3004/files#diff-962a7439cdeb09ea98d4b622a45d517bce07ad8c3f866e089bda05f4b0bbd875R194-R199
+    // This otherwise causes options to retain `tabindex=0` incorrectly when the popup is closed
+    // when tabbing outside.
+    if (!nextOpen && store.state.activeIndex !== null) {
+      const activeOption = listRef.current[store.state.activeIndex];
+      // Wait for Floating UI's focus effect to have fired
+      queueMicrotask(() => {
+        activeOption?.setAttribute('tabindex', '-1');
+      });
+    }
+  });
+  const handleUnmount = useButton.useStableCallback(() => {
+    setMounted(false);
+    store.set('activeIndex', null);
+    onOpenChangeComplete?.(false);
+  });
+  useButton.useOpenChangeComplete({
+    enabled: !actionsRef,
+    open,
+    ref: popupRef,
+    onComplete() {
+      if (!open) {
+        handleUnmount();
+      }
+    }
+  });
+  React__namespace.useImperativeHandle(actionsRef, () => ({
+    unmount: handleUnmount
+  }), [handleUnmount]);
+  const setValue = useButton.useStableCallback((nextValue, eventDetails) => {
+    onValueChange?.(nextValue, eventDetails);
+    if (eventDetails.isCanceled) {
+      return;
+    }
+    setValueUnwrapped(nextValue);
+  });
+  const handleScrollArrowVisibility = useButton.useStableCallback(() => {
+    const scroller = store.state.listElement || popupRef.current;
+    if (!scroller) {
+      return;
+    }
+    const viewportTop = scroller.scrollTop;
+    const viewportBottom = scroller.scrollTop + scroller.clientHeight;
+    const shouldShowUp = viewportTop > 1;
+    const shouldShowDown = viewportBottom < scroller.scrollHeight - 1;
+    if (store.state.scrollUpArrowVisible !== shouldShowUp) {
+      store.set('scrollUpArrowVisible', shouldShowUp);
+    }
+    if (store.state.scrollDownArrowVisible !== shouldShowDown) {
+      store.set('scrollDownArrowVisible', shouldShowDown);
+    }
+  });
+  const floatingContext = useCompositeListItem.useFloatingRootContext({
+    open,
+    onOpenChange: setOpen,
+    elements: {
+      reference: triggerElement,
+      floating: positionerElement
+    }
+  });
+  const click = InternalBackdrop.useClick(floatingContext, {
+    enabled: !readOnly && !disabled,
+    event: 'mousedown'
+  });
+  const dismiss = InternalBackdrop.useDismiss(floatingContext, {
+    bubbles: false
+  });
+  const listNavigation = useCompositeListItem.useListNavigation(floatingContext, {
+    enabled: !readOnly && !disabled,
+    listRef,
+    activeIndex,
+    selectedIndex,
+    disabledIndices: useRenderElement.EMPTY_ARRAY,
+    onNavigate(nextActiveIndex) {
+      // Retain the highlight while transitioning out.
+      if (nextActiveIndex === null && !open) {
+        return;
+      }
+      store.set('activeIndex', nextActiveIndex);
+    },
+    // Implement our own listeners since `onPointerLeave` on each option fires while scrolling with
+    // the `alignItemWithTrigger=true`, causing a performance issue on Chrome.
+    focusItemOnHover: false
+  });
+  const typeahead = useCompositeListItem.useTypeahead(floatingContext, {
+    enabled: !readOnly && !disabled && (open || !multiple),
+    listRef: labelsRef,
+    activeIndex,
+    selectedIndex,
+    onMatch(index) {
+      if (open) {
+        store.set('activeIndex', index);
+      } else {
+        setValue(valuesRef.current[index], useButton.createChangeEventDetails('none'));
+      }
+    },
+    onTypingChange(typing) {
+      typingRef.current = typing;
+    }
+  });
+  const {
+    getReferenceProps,
+    getFloatingProps,
+    getItemProps
+  } = InternalBackdrop.useInteractions([click, dismiss, listNavigation, typeahead]);
+  const mergedTriggerProps = React__namespace.useMemo(() => {
+    return useRenderElement.mergeProps(getReferenceProps(), interactionTypeProps, generatedId ? {
+      id: generatedId
+    } : useRenderElement.EMPTY_OBJECT);
+  }, [getReferenceProps, interactionTypeProps, generatedId]);
+  InternalBackdrop.useOnFirstRender(() => {
+    store.update({
+      popupProps: getFloatingProps(),
+      triggerProps: mergedTriggerProps
+    });
+  });
+  useButton.useIsoLayoutEffect(() => {
+    store.update({
+      id: generatedId,
+      modal,
+      multiple,
+      value,
+      open,
+      mounted,
+      transitionStatus,
+      popupProps: getFloatingProps(),
+      triggerProps: mergedTriggerProps,
+      items,
+      itemToStringLabel,
+      itemToStringValue,
+      isItemEqualToValue,
+      openMethod
+    });
+  }, [store, generatedId, modal, multiple, value, open, mounted, transitionStatus, getFloatingProps, mergedTriggerProps, items, itemToStringLabel, itemToStringValue, isItemEqualToValue, openMethod]);
+  const contextValue = React__namespace.useMemo(() => ({
+    store,
+    name,
+    required,
+    disabled,
+    readOnly,
+    multiple,
+    itemToStringLabel,
+    itemToStringValue,
+    highlightItemOnHover,
+    setValue,
+    setOpen,
+    listRef,
+    popupRef,
+    scrollHandlerRef,
+    handleScrollArrowVisibility,
+    scrollArrowsMountedCountRef,
+    getItemProps,
+    events: floatingContext.context.events,
+    valueRef,
+    valuesRef,
+    labelsRef,
+    typingRef,
+    selectionRef,
+    selectedItemTextRef,
+    validation,
+    onOpenChangeComplete,
+    keyboardActiveRef,
+    alignItemWithTriggerActiveRef,
+    initialValueRef
+  }), [store, name, required, disabled, readOnly, multiple, itemToStringLabel, itemToStringValue, highlightItemOnHover, setValue, setOpen, getItemProps, floatingContext.context.events, validation, onOpenChangeComplete, handleScrollArrowVisibility]);
+  const ref = useRenderElement.useMergedRefs(inputRef, validation.inputRef);
+  const hasMultipleSelection = multiple && Array.isArray(value) && value.length > 0;
+  const hiddenInputName = multiple ? undefined : name;
+  const hiddenInputs = React__namespace.useMemo(() => {
+    if (!multiple || !Array.isArray(value) || !name) {
+      return null;
+    }
+    return value.map(v => {
+      const currentSerializedValue = resolveAriaLabelledBy.stringifyAsValue(v, itemToStringValue);
+      return /*#__PURE__*/jsxRuntime.jsx("input", {
+        type: "hidden",
+        name: name,
+        value: currentSerializedValue
+      }, currentSerializedValue);
+    });
+  }, [multiple, value, name, itemToStringValue]);
+  return /*#__PURE__*/jsxRuntime.jsx(SelectRootContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/jsxRuntime.jsxs(SelectFloatingContext.Provider, {
+      value: floatingContext,
+      children: [children, /*#__PURE__*/jsxRuntime.jsx("input", {
+        ...validation.getInputValidationProps({
+          onFocus() {
+            // Move focus to the trigger element when the hidden input is focused.
+            store.state.triggerElement?.focus({
+              // Supported in Chrome from 144 (January 2026)
+              // @ts-expect-error - focusVisible is not yet in the lib.dom.d.ts
+              focusVisible: true
+            });
+          },
+          // 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 = useButton.createChangeEventDetails(useButton.none, event.nativeEvent);
+            function handleChange() {
+              if (multiple) {
+                // Browser autofill only writes a single scalar value.
+                return;
+              }
+
+              // Handle single selection: match against registered values using serialization
+              const matchingValue = valuesRef.current.find(v => {
+                const candidate = resolveAriaLabelledBy.stringifyAsValue(v, itemToStringValue);
+                if (candidate.toLowerCase() === nextValue.toLowerCase()) {
+                  return true;
+                }
+                return false;
+              });
+              if (matchingValue != null) {
+                setDirty(matchingValue !== validityData.initialValue);
+                setValue(matchingValue, details);
+                if (shouldValidateOnChange()) {
+                  validation.commit(matchingValue);
+                }
+              }
+            }
+            store.set('forceMount', true);
+            queueMicrotask(handleChange);
+          }
+        }),
+        id: generatedId && hiddenInputName == null ? `${generatedId}-hidden-input` : undefined,
+        name: hiddenInputName,
+        autoComplete: autoComplete,
+        value: serializedValue,
+        disabled: disabled,
+        required: required && !hasMultipleSelection,
+        readOnly: readOnly,
+        ref: ref,
+        style: name ? useButton.visuallyHiddenInput : useButton.visuallyHidden,
+        tabIndex: -1,
+        "aria-hidden": true
+      }), hiddenInputs]
+    })
+  });
+}
+
+const BOUNDARY_OFFSET = 2;
+const SELECTED_DELAY = 400;
+const UNSELECTED_DELAY = 200;
+const stateAttributesMapping$2 = {
+  ...InternalBackdrop.pressableTriggerOpenStateMapping,
+  ...useLabelableId.fieldValidityMapping,
+  value: () => null
+};
+
+/**
+ * A button that opens the select popup.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
+ */
+const SelectTrigger = /*#__PURE__*/React__namespace.forwardRef(function SelectTrigger(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    id: idProp,
+    disabled: disabledProp = false,
+    nativeButton = true,
+    ...elementProps
+  } = componentProps;
+  const {
+    setTouched,
+    setFocused,
+    validationMode,
+    state: fieldState,
+    disabled: fieldDisabled
+  } = useLabelableId.useFieldRootContext();
+  const {
+    labelId: fieldLabelId
+  } = useLabelableId.useLabelableContext();
+  const {
+    store,
+    setOpen,
+    selectionRef,
+    validation,
+    readOnly,
+    required,
+    alignItemWithTriggerActiveRef,
+    disabled: selectDisabled,
+    keyboardActiveRef
+  } = useSelectRootContext();
+  const disabled = fieldDisabled || selectDisabled || disabledProp;
+  const open = InternalBackdrop.useStore(store, selectors.open);
+  const value = InternalBackdrop.useStore(store, selectors.value);
+  const triggerProps = InternalBackdrop.useStore(store, selectors.triggerProps);
+  const positionerElement = InternalBackdrop.useStore(store, selectors.positionerElement);
+  const listElement = InternalBackdrop.useStore(store, selectors.listElement);
+  const rootId = InternalBackdrop.useStore(store, selectors.id);
+  const selectLabelId = InternalBackdrop.useStore(store, selectors.labelId);
+  const hasSelectedValue = InternalBackdrop.useStore(store, selectors.hasSelectedValue);
+  const shouldCheckNullItemLabel = !hasSelectedValue && open;
+  const hasNullItemLabel = InternalBackdrop.useStore(store, selectors.hasNullItemLabel, shouldCheckNullItemLabel);
+  const id = idProp ?? rootId;
+  const ariaLabelledBy = resolveAriaLabelledBy.resolveAriaLabelledBy(fieldLabelId, selectLabelId);
+  useLabelableId.useLabelableId({
+    id
+  });
+  const positionerRef = useButton.useValueAsRef(positionerElement);
+  const triggerRef = React__namespace.useRef(null);
+  const {
+    getButtonProps,
+    buttonRef
+  } = useButton.useButton({
+    disabled,
+    native: nativeButton
+  });
+  const setTriggerElement = useButton.useStableCallback(element => {
+    store.set('triggerElement', element);
+  });
+  const mergedRef = useRenderElement.useMergedRefs(forwardedRef, triggerRef, buttonRef, setTriggerElement);
+  const timeoutFocus = useButton.useTimeout();
+  const timeoutMouseDown = useButton.useTimeout();
+  const selectedDelayTimeout = useButton.useTimeout();
+  const unselectedDelayTimeout = useButton.useTimeout();
+  React__namespace.useEffect(() => {
+    if (open) {
+      const hasSelectedItemInList = hasSelectedValue || hasNullItemLabel;
+      const shouldDelayUnselectedMouseUpLonger = !hasSelectedItemInList;
+
+      // When there is no selected item in the list (placeholder-only selects), a mousedown
+      // on the trigger followed by a quick mouseup over the first option can accidentally select
+      // within 200ms. Delay unselected mouseup to match the safer 400ms window.
+      if (shouldDelayUnselectedMouseUpLonger) {
+        selectedDelayTimeout.start(SELECTED_DELAY, () => {
+          selectionRef.current.allowUnselectedMouseUp = true;
+          selectionRef.current.allowSelectedMouseUp = true;
+        });
+      } else {
+        // mousedown -> move to unselected item -> mouseup should not select within 200ms.
+        unselectedDelayTimeout.start(UNSELECTED_DELAY, () => {
+          selectionRef.current.allowUnselectedMouseUp = true;
+
+          // mousedown -> mouseup on selected item should not select within 400ms.
+          selectedDelayTimeout.start(UNSELECTED_DELAY, () => {
+            selectionRef.current.allowSelectedMouseUp = true;
+          });
+        });
+      }
+      return () => {
+        selectedDelayTimeout.clear();
+        unselectedDelayTimeout.clear();
+      };
+    }
+    selectionRef.current = {
+      allowSelectedMouseUp: false,
+      allowUnselectedMouseUp: false
+    };
+    timeoutMouseDown.clear();
+    return undefined;
+  }, [open, hasSelectedValue, hasNullItemLabel, selectionRef, timeoutMouseDown, selectedDelayTimeout, unselectedDelayTimeout]);
+  const ariaControlsId = React__namespace.useMemo(() => {
+    return listElement?.id ?? useButton.getFloatingFocusElement(positionerElement)?.id;
+  }, [listElement, positionerElement]);
+  const props = useRenderElement.mergeProps(triggerProps, {
+    id,
+    role: 'combobox',
+    'aria-expanded': open ? 'true' : 'false',
+    'aria-haspopup': 'listbox',
+    'aria-controls': open ? ariaControlsId : undefined,
+    'aria-labelledby': ariaLabelledBy,
+    'aria-readonly': readOnly || undefined,
+    'aria-required': required || undefined,
+    tabIndex: disabled ? -1 : 0,
+    ref: mergedRef,
+    onFocus(event) {
+      setFocused(true);
+
+      // The popup element shouldn't obscure the focused trigger.
+      if (open && alignItemWithTriggerActiveRef.current) {
+        setOpen(false, useButton.createChangeEventDetails(useButton.none, event.nativeEvent));
+      }
+
+      // Saves a re-render on initial click: `forceMount === true` mounts
+      // the items before `open === true`. We could sync those cycles better
+      // without a timeout, but this is enough for now.
+      //
+      // XXX: might be causing `act()` warnings.
+      timeoutFocus.start(0, () => {
+        store.set('forceMount', true);
+      });
+    },
+    onBlur(event) {
+      // If focus is moving into the popup, don't count it as a blur.
+      if (useButton.contains(positionerElement, event.relatedTarget)) {
+        return;
+      }
+      setTouched(true);
+      setFocused(false);
+      if (validationMode === 'onBlur') {
+        validation.commit(value);
+      }
+    },
+    onPointerMove() {
+      keyboardActiveRef.current = false;
+    },
+    onKeyDown() {
+      keyboardActiveRef.current = true;
+    },
+    onMouseDown(event) {
+      if (open) {
+        return;
+      }
+      const doc = useButton.ownerDocument(event.currentTarget);
+      function handleMouseUp(mouseEvent) {
+        if (!triggerRef.current) {
+          return;
+        }
+        const mouseUpTarget = mouseEvent.target;
+
+        // Early return if clicked on trigger element or its children
+        if (useButton.contains(triggerRef.current, mouseUpTarget) || useButton.contains(positionerRef.current, mouseUpTarget) || mouseUpTarget === triggerRef.current) {
+          return;
+        }
+        const bounds = useCompositeListItem.getPseudoElementBounds(triggerRef.current);
+        if (mouseEvent.clientX >= bounds.left - BOUNDARY_OFFSET && mouseEvent.clientX <= bounds.right + BOUNDARY_OFFSET && mouseEvent.clientY >= bounds.top - BOUNDARY_OFFSET && mouseEvent.clientY <= bounds.bottom + BOUNDARY_OFFSET) {
+          return;
+        }
+        setOpen(false, useButton.createChangeEventDetails(useButton.cancelOpen, mouseEvent));
+      }
+
+      // Firefox can fire this upon mousedown
+      timeoutMouseDown.start(0, () => {
+        doc.addEventListener('mouseup', handleMouseUp, {
+          once: true
+        });
+      });
+    }
+  }, validation.getValidationProps, elementProps, getButtonProps);
+
+  // ensure nested useButton does not overwrite the combobox role:
+  // <Toolbar.Button render={<Select.Trigger />} />
+  props.role = 'combobox';
+  const state = {
+    ...fieldState,
+    open,
+    disabled,
+    value,
+    readOnly,
+    placeholder: !hasSelectedValue
+  };
+  return useRenderElement.useRenderElement('button', componentProps, {
+    ref: [forwardedRef, triggerRef],
+    state,
+    stateAttributesMapping: stateAttributesMapping$2,
+    props
+  });
+});
+if (process.env.NODE_ENV !== "production") SelectTrigger.displayName = "SelectTrigger";
+
+const stateAttributesMapping$1 = {
+  value: () => null
+};
+
+/**
+ * A text label of the currently selected item.
+ * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
+ */
+const SelectValue = /*#__PURE__*/React__namespace.forwardRef(function SelectValue(componentProps, forwardedRef) {
+  const {
+    className,
+    render,
+    children: childrenProp,
+    placeholder,
+    ...elementProps
+  } = componentProps;
+  const {
+    store,
+    valueRef
+  } = useSelectRootContext();
+  const value = InternalBackdrop.useStore(store, selectors.value);
+  const items = InternalBackdrop.useStore(store, selectors.items);
+  const itemToStringLabel = InternalBackdrop.useStore(store, selectors.itemToStringLabel);
+  const hasSelectedValue = InternalBackdrop.useStore(store, selectors.hasSelectedValue);
+  const shouldCheckNullItemLabel = !hasSelectedValue && placeholder != null && childrenProp == null;
+  const hasNullLabel = InternalBackdrop.useStore(store, selectors.hasNullItemLabel, shouldCheckNullItemLabel);
+  const state = {
+    value,
+    placeholder: !hasSelectedValue
+  };
+  let children = null;
+  if (typeof childrenProp === 'function') {
+    children = childrenProp(value);
+  } else if (childrenProp != null) {
+    children = childrenProp;
+  } else if (!hasSelectedValue && placeholder != null && !hasNullLabel) {
+    children = placeholder;
+  } else if (Array.isArray(value)) {
+    children = resolveAriaLabelledBy.resolveMultipleLabels(value, items, itemToStringLabel);
+  } else {
+    children = resolveAriaLabelledBy.resolveSelectedLabel(value, items, itemToStringLabel);
+  }
+  const element = useRenderElement.useRenderElement('span', componentProps, {
+    state,
+    ref: [forwardedRef, valueRef],
+    props: [{
+      children
+    }, elementProps],
+    stateAttributesMapping: stateAttributesMapping$1
+  });
+  return element;
+});
+if (process.env.NODE_ENV !== "production") SelectValue.displayName = "SelectValue";
+
+const SelectPortalContext = /*#__PURE__*/React__namespace.createContext(undefined);
+if (process.env.NODE_ENV !== "production") SelectPortalContext.displayName = "SelectPortalContext";
+
+const SelectPortal = /*#__PURE__*/React__namespace.forwardRef(function SelectPortal(portalProps, forwardedRef) {
+  const {
+    store
+  } = useSelectRootContext();
+  const mounted = InternalBackdrop.useStore(store, selectors.mounted);
+  const forceMount = InternalBackdrop.useStore(store, selectors.forceMount);
+  const shouldRender = mounted || forceMount;
+  if (!shouldRender) {
+    return null;
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(SelectPortalContext.Provider, {
+    value: true,
+    children: /*#__PURE__*/jsxRuntime.jsx(InternalBackdrop.FloatingPortal, {
+      ref: forwardedRef,
+      ...portalProps
+    })
+  });
+});
+if (process.env.NODE_ENV !== "production") SelectPortal.displayName = "SelectPortal";
+
+const SelectPositionerContext = /*#__PURE__*/React__namespace.createContext(undefined);
+if (process.env.NODE_ENV !== "production") SelectPositionerContext.displayName = "SelectPositionerContext";
+function useSelectPositionerContext() {
+  const context = React__namespace.useContext(SelectPositionerContext);
+  if (!context) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: SelectPositionerContext is missing. SelectPositioner parts must be placed within <Select.Positioner>.' : useRenderElement.formatErrorMessage(59));
+  }
+  return context;
+}
+
+function clearStyles(element, originalStyles) {
+  if (element) {
+    Object.assign(element.style, originalStyles);
+  }
+}
+const LIST_FUNCTIONAL_STYLES = {
+  position: 'relative',
+  maxHeight: '100%',
+  overflowX: 'hidden',
+  overflowY: 'auto'
+};
+
+const FIXED = {
+  position: 'fixed'
+};
+
+/**
+ * Positions the select popup.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
+ */
+const SelectPositioner = /*#__PURE__*/React__namespace.forwardRef(function SelectPositioner(componentProps, forwardedRef) {
+  const {
+    anchor,
+    positionMethod = 'absolute',
+    className,
+    render,
+    side = 'bottom',
+    align = 'center',
+    sideOffset = 0,
+    alignOffset = 0,
+    collisionBoundary = 'clipping-ancestors',
+    collisionPadding,
+    arrowPadding = 5,
+    sticky = false,
+    disableAnchorTracking,
+    alignItemWithTrigger = true,
+    collisionAvoidance = InternalBackdrop.DROPDOWN_COLLISION_AVOIDANCE,
+    ...elementProps
+  } = componentProps;
+  const {
+    store,
+    listRef,
+    labelsRef,
+    alignItemWithTriggerActiveRef,
+    selectedItemTextRef,
+    valuesRef,
+    initialValueRef,
+    popupRef,
+    setValue
+  } = useSelectRootContext();
+  const floatingRootContext = useSelectFloatingContext();
+  const open = InternalBackdrop.useStore(store, selectors.open);
+  const mounted = InternalBackdrop.useStore(store, selectors.mounted);
+  const modal = InternalBackdrop.useStore(store, selectors.modal);
+  const value = InternalBackdrop.useStore(store, selectors.value);
+  const openMethod = InternalBackdrop.useStore(store, selectors.openMethod);
+  const positionerElement = InternalBackdrop.useStore(store, selectors.positionerElement);
+  const triggerElement = InternalBackdrop.useStore(store, selectors.triggerElement);
+  const isItemEqualToValue = InternalBackdrop.useStore(store, selectors.isItemEqualToValue);
+  const transitionStatus = InternalBackdrop.useStore(store, selectors.transitionStatus);
+  const scrollUpArrowRef = React__namespace.useRef(null);
+  const scrollDownArrowRef = React__namespace.useRef(null);
+  const [controlledAlignItemWithTrigger, setControlledAlignItemWithTrigger] = React__namespace.useState(alignItemWithTrigger);
+  const alignItemWithTriggerActive = mounted && controlledAlignItemWithTrigger && openMethod !== 'touch';
+  if (!mounted && controlledAlignItemWithTrigger !== alignItemWithTrigger) {
+    setControlledAlignItemWithTrigger(alignItemWithTrigger);
+  }
+  useButton.useIsoLayoutEffect(() => {
+    if (!mounted) {
+      if (selectors.scrollUpArrowVisible(store.state)) {
+        store.set('scrollUpArrowVisible', false);
+      }
+      if (selectors.scrollDownArrowVisible(store.state)) {
+        store.set('scrollDownArrowVisible', false);
+      }
+    }
+  }, [store, mounted]);
+  React__namespace.useImperativeHandle(alignItemWithTriggerActiveRef, () => alignItemWithTriggerActive);
+  InternalBackdrop.useScrollLock((alignItemWithTriggerActive || modal) && open && openMethod !== 'touch', triggerElement);
+  const positioning = useCompositeListItem.useAnchorPositioning({
+    anchor,
+    floatingRootContext,
+    positionMethod,
+    mounted,
+    side,
+    sideOffset,
+    align,
+    alignOffset,
+    arrowPadding,
+    collisionBoundary,
+    collisionPadding,
+    sticky,
+    disableAnchorTracking: disableAnchorTracking ?? alignItemWithTriggerActive,
+    collisionAvoidance,
+    keepMounted: true
+  });
+  const renderedSide = alignItemWithTriggerActive ? 'none' : positioning.side;
+  const positionerStyles = alignItemWithTriggerActive ? FIXED : positioning.positionerStyles;
+  const defaultProps = React__namespace.useMemo(() => {
+    const hiddenStyles = {};
+    if (!open) {
+      hiddenStyles.pointerEvents = 'none';
+    }
+    return {
+      role: 'presentation',
+      hidden: !mounted,
+      style: {
+        ...positionerStyles,
+        ...hiddenStyles
+      }
+    };
+  }, [open, mounted, positionerStyles]);
+  const state = {
+    open,
+    side: renderedSide,
+    align: positioning.align,
+    anchorHidden: positioning.anchorHidden
+  };
+  const setPositionerElement = useButton.useStableCallback(element => {
+    store.set('positionerElement', element);
+  });
+  const element = useRenderElement.useRenderElement('div', componentProps, {
+    ref: [forwardedRef, setPositionerElement],
+    state,
+    stateAttributesMapping: InternalBackdrop.popupStateMapping,
+    props: [defaultProps, useCompositeListItem.getDisabledMountTransitionStyles(transitionStatus), elementProps]
+  });
+  const prevMapSizeRef = React__namespace.useRef(0);
+  const onMapChange = useButton.useStableCallback(map => {
+    if (map.size === 0 && prevMapSizeRef.current === 0) {
+      return;
+    }
+    if (valuesRef.current.length === 0) {
+      return;
+    }
+    const prevSize = prevMapSizeRef.current;
+    prevMapSizeRef.current = map.size;
+    if (map.size === prevSize) {
+      return;
+    }
+    const eventDetails = useButton.createChangeEventDetails(useButton.none);
+    if (prevSize !== 0 && !store.state.multiple && value !== null) {
+      const selectedValueIndex = resolveAriaLabelledBy.findItemIndex(valuesRef.current, value, isItemEqualToValue);
+      if (selectedValueIndex === -1) {
+        const initialSelectedValue = initialValueRef.current;
+        const hasInitial = initialSelectedValue != null && resolveAriaLabelledBy.findItemIndex(valuesRef.current, initialSelectedValue, isItemEqualToValue) !== -1;
+        const nextValue = hasInitial ? initialSelectedValue : null;
+        setValue(nextValue, eventDetails);
+        if (nextValue === null) {
+          store.set('selectedIndex', null);
+          selectedItemTextRef.current = null;
+        }
+      }
+    }
+    if (prevSize !== 0 && store.state.multiple && Array.isArray(value)) {
+      const hasVisibleItem = selectedItemValue => resolveAriaLabelledBy.findItemIndex(valuesRef.current, selectedItemValue, isItemEqualToValue) !== -1;
+      const nextValue = value.filter(selectedItemValue => hasVisibleItem(selectedItemValue));
+      if (nextValue.length !== value.length || nextValue.some(selectedItemValue => !resolveAriaLabelledBy.selectedValueIncludes(value, selectedItemValue, isItemEqualToValue))) {
+        setValue(nextValue, eventDetails);
+        if (nextValue.length === 0) {
+          store.set('selectedIndex', null);
+          selectedItemTextRef.current = null;
+        }
+      }
+    }
+    if (open && alignItemWithTriggerActive) {
+      store.update({
+        scrollUpArrowVisible: false,
+        scrollDownArrowVisible: false
+      });
+      const stylesToClear = {
+        height: ''
+      };
+      clearStyles(positionerElement, stylesToClear);
+      clearStyles(popupRef.current, stylesToClear);
+    }
+  });
+  const contextValue = React__namespace.useMemo(() => ({
+    ...positioning,
+    side: renderedSide,
+    alignItemWithTriggerActive,
+    setControlledAlignItemWithTrigger,
+    scrollUpArrowRef,
+    scrollDownArrowRef
+  }), [positioning, renderedSide, alignItemWithTriggerActive, setControlledAlignItemWithTrigger]);
+  return /*#__PURE__*/jsxRuntime.jsx(useCompositeListItem.CompositeList, {
+    elementsRef: listRef,
+    labelsRef: labelsRef,
+    onMapChange: onMapChange,
+    children: /*#__PURE__*/jsxRuntime.jsxs(SelectPositionerContext.Provider, {
+      value: contextValue,
+      children: [mounted && modal && /*#__PURE__*/jsxRuntime.jsx(InternalBackdrop.InternalBackdrop, {
+        inert: InternalBackdrop.inertValue(!open),
+        cutout: triggerElement
+      }), element]
+    })
+  });
+});
+if (process.env.NODE_ENV !== "production") SelectPositioner.displayName = "SelectPositioner";
+
+function isMouseWithinBounds(event) {
+  const targetRect = event.currentTarget.getBoundingClientRect();
+
+  // Safari randomly fires `mouseleave` incorrectly when the item is
+  // aligned to the trigger. This is a workaround to prevent the highlight
+  // from being removed while the cursor is still within the bounds of the item.
+  // https://github.com/mui/base-ui/issues/869
+  const isWithinBounds = targetRect.top + 1 <= event.clientY && event.clientY <= targetRect.bottom - 1 && targetRect.left + 1 <= event.clientX && event.clientX <= targetRect.right - 1;
+  return isWithinBounds;
+}
+
+const SCROLL_EPS_PX = 1;
+const stateAttributesMapping = {
+  ...InternalBackdrop.popupStateMapping,
+  ...useButton.transitionStatusMapping
+};
+
+/**
+ * A container for the select list.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
+ */
+const SelectPopup = /*#__PURE__*/React__namespace.forwardRef(function SelectPopup(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    finalFocus,
+    ...elementProps
+  } = componentProps;
+  const {
+    store,
+    popupRef,
+    onOpenChangeComplete,
+    setOpen,
+    valueRef,
+    selectedItemTextRef,
+    keyboardActiveRef,
+    multiple,
+    handleScrollArrowVisibility,
+    scrollHandlerRef,
+    highlightItemOnHover
+  } = useSelectRootContext();
+  const {
+    side,
+    align,
+    alignItemWithTriggerActive,
+    setControlledAlignItemWithTrigger,
+    scrollDownArrowRef,
+    scrollUpArrowRef
+  } = useSelectPositionerContext();
+  const insideToolbar = ToolbarRootContext.useToolbarRootContext(true) != null;
+  const floatingRootContext = useSelectFloatingContext();
+  const {
+    nonce,
+    disableStyleElements
+  } = CSPContext.useCSPContext();
+  const highlightTimeout = useButton.useTimeout();
+  const id = InternalBackdrop.useStore(store, selectors.id);
+  const open = InternalBackdrop.useStore(store, selectors.open);
+  const mounted = InternalBackdrop.useStore(store, selectors.mounted);
+  const popupProps = InternalBackdrop.useStore(store, selectors.popupProps);
+  const transitionStatus = InternalBackdrop.useStore(store, selectors.transitionStatus);
+  const triggerElement = InternalBackdrop.useStore(store, selectors.triggerElement);
+  const positionerElement = InternalBackdrop.useStore(store, selectors.positionerElement);
+  const listElement = InternalBackdrop.useStore(store, selectors.listElement);
+  const initialHeightRef = React__namespace.useRef(0);
+  const reachedMaxHeightRef = React__namespace.useRef(false);
+  const maxHeightRef = React__namespace.useRef(0);
+  const initialPlacedRef = React__namespace.useRef(false);
+  const originalPositionerStylesRef = React__namespace.useRef({});
+  const scrollArrowFrame = useButton.useAnimationFrame();
+  const handleScroll = useButton.useStableCallback(scroller => {
+    if (!positionerElement || !popupRef.current || !initialPlacedRef.current) {
+      return;
+    }
+    if (reachedMaxHeightRef.current || !alignItemWithTriggerActive) {
+      handleScrollArrowVisibility();
+      return;
+    }
+    const isTopPositioned = positionerElement.style.top === '0px';
+    const isBottomPositioned = positionerElement.style.bottom === '0px';
+    const currentHeight = positionerElement.getBoundingClientRect().height;
+    const doc = useButton.ownerDocument(positionerElement);
+    const positionerStyles = getComputedStyle(positionerElement);
+    const marginTop = parseFloat(positionerStyles.marginTop);
+    const marginBottom = parseFloat(positionerStyles.marginBottom);
+    const maxPopupHeight = getMaxPopupHeight(getComputedStyle(popupRef.current));
+    const maxAvailableHeight = Math.min(doc.documentElement.clientHeight - marginTop - marginBottom, maxPopupHeight);
+    const scrollTop = scroller.scrollTop;
+    const maxScrollTop = getMaxScrollTop(scroller);
+    let nextPositionerHeight = 0;
+    let nextScrollTop = null;
+    let setReachedMax = false;
+    let scrollToMax = false;
+    const setHeight = height => {
+      positionerElement.style.height = `${height}px`;
+    };
+    const handleSmallDiff = (diff, targetScrollTop) => {
+      const heightDelta = clamp.clamp(diff, 0, maxAvailableHeight - currentHeight);
+      if (heightDelta > 0) {
+        // Consume the remaining scroll in height.
+        setHeight(currentHeight + heightDelta);
+      }
+      scroller.scrollTop = targetScrollTop;
+      if (maxAvailableHeight - (currentHeight + heightDelta) <= SCROLL_EPS_PX) {
+        reachedMaxHeightRef.current = true;
+      }
+      handleScrollArrowVisibility();
+    };
+    if (isTopPositioned) {
+      const diff = maxScrollTop - scrollTop;
+      const idealHeight = currentHeight + diff;
+      const nextHeight = Math.min(idealHeight, maxAvailableHeight);
+      nextPositionerHeight = nextHeight;
+      if (diff <= SCROLL_EPS_PX) {
+        handleSmallDiff(diff, maxScrollTop);
+        return;
+      }
+      if (maxAvailableHeight - nextHeight > SCROLL_EPS_PX) {
+        scrollToMax = true;
+      } else {
+        setReachedMax = true;
+      }
+    } else if (isBottomPositioned) {
+      const diff = scrollTop;
+      const idealHeight = currentHeight + diff;
+      const nextHeight = Math.min(idealHeight, maxAvailableHeight);
+      const overshoot = idealHeight - maxAvailableHeight;
+      nextPositionerHeight = nextHeight;
+      if (diff <= SCROLL_EPS_PX) {
+        handleSmallDiff(diff, 0);
+        return;
+      }
+      if (maxAvailableHeight - nextHeight > SCROLL_EPS_PX) {
+        nextScrollTop = 0;
+      } else {
+        setReachedMax = true;
+        if (scrollTop < maxScrollTop) {
+          nextScrollTop = scrollTop - (diff - overshoot);
+        }
+      }
+    }
+    nextPositionerHeight = Math.ceil(nextPositionerHeight);
+    if (nextPositionerHeight !== 0) {
+      setHeight(nextPositionerHeight);
+    }
+    if (scrollToMax || nextScrollTop != null) {
+      // Recompute bounds after resizing (clientHeight likely changed).
+      const nextMaxScrollTop = getMaxScrollTop(scroller);
+      const target = scrollToMax ? nextMaxScrollTop : clamp.clamp(nextScrollTop, 0, nextMaxScrollTop);
+
+      // Avoid adjustments that re-trigger scroll events forever.
+      if (Math.abs(scroller.scrollTop - target) > SCROLL_EPS_PX) {
+        scroller.scrollTop = target;
+      }
+    }
+    if (setReachedMax || nextPositionerHeight >= maxAvailableHeight - SCROLL_EPS_PX) {
+      reachedMaxHeightRef.current = true;
+    }
+    handleScrollArrowVisibility();
+  });
+  React__namespace.useImperativeHandle(scrollHandlerRef, () => handleScroll, [handleScroll]);
+  useButton.useOpenChangeComplete({
+    open,
+    ref: popupRef,
+    onComplete() {
+      if (open) {
+        onOpenChangeComplete?.(true);
+      }
+    }
+  });
+  const state = {
+    open,
+    transitionStatus,
+    side,
+    align
+  };
+  useButton.useIsoLayoutEffect(() => {
+    if (!positionerElement || !popupRef.current || Object.keys(originalPositionerStylesRef.current).length) {
+      return;
+    }
+    originalPositionerStylesRef.current = {
+      top: positionerElement.style.top || '0',
+      left: positionerElement.style.left || '0',
+      right: positionerElement.style.right,
+      height: positionerElement.style.height,
+      bottom: positionerElement.style.bottom,
+      minHeight: positionerElement.style.minHeight,
+      maxHeight: positionerElement.style.maxHeight,
+      marginTop: positionerElement.style.marginTop,
+      marginBottom: positionerElement.style.marginBottom
+    };
+  }, [popupRef, positionerElement]);
+  useButton.useIsoLayoutEffect(() => {
+    if (open || alignItemWithTriggerActive) {
+      return;
+    }
+    initialPlacedRef.current = false;
+    reachedMaxHeightRef.current = false;
+    initialHeightRef.current = 0;
+    maxHeightRef.current = 0;
+    clearStyles(positionerElement, originalPositionerStylesRef.current);
+  }, [open, alignItemWithTriggerActive, positionerElement, popupRef]);
+  useButton.useIsoLayoutEffect(() => {
+    const popupElement = popupRef.current;
+    if (!open || !triggerElement || !positionerElement || !popupElement || store.state.transitionStatus === 'ending') {
+      return;
+    }
+    if (!alignItemWithTriggerActive) {
+      initialPlacedRef.current = true;
+      scrollArrowFrame.request(handleScrollArrowVisibility);
+      popupElement.style.removeProperty('--transform-origin');
+      return;
+    }
+
+    // Wait for `selectedItemTextRef.current` to be set.
+    queueMicrotask(() => {
+      // Ensure we remove any transforms that can affect the location of the popup
+      // and therefore the calculations.
+      const restoreTransformStyles = unsetTransformStyles(popupElement);
+      popupElement.style.removeProperty('--transform-origin');
+      try {
+        const positionerStyles = getComputedStyle(positionerElement);
+        const popupStyles = getComputedStyle(popupElement);
+        const doc = useButton.ownerDocument(triggerElement);
+        const win = floatingUi_utils_dom.getWindow(positionerElement);
+        const scale = getScale(triggerElement);
+        const triggerRect = normalizeRect(triggerElement.getBoundingClientRect(), scale);
+        const positionerRect = normalizeRect(positionerElement.getBoundingClientRect(), scale);
+        const triggerX = triggerRect.left;
+        const triggerHeight = triggerRect.height;
+        const scroller = listElement || popupElement;
+        const scrollHeight = scroller.scrollHeight;
+        const borderBottom = parseFloat(popupStyles.borderBottomWidth);
+        const marginTop = parseFloat(positionerStyles.marginTop) || 10;
+        const marginBottom = parseFloat(positionerStyles.marginBottom) || 10;
+        const minHeight = parseFloat(positionerStyles.minHeight) || 100;
+        const maxPopupHeight = getMaxPopupHeight(popupStyles);
+        const paddingLeft = 5;
+        const paddingRight = 5;
+        const triggerCollisionThreshold = 20;
+        const viewportHeight = doc.documentElement.clientHeight - marginTop - marginBottom;
+        const viewportWidth = doc.documentElement.clientWidth;
+        const availableSpaceBeneathTrigger = viewportHeight - triggerRect.bottom + triggerHeight;
+        const textElement = selectedItemTextRef.current;
+        const valueElement = valueRef.current;
+        let textRect;
+        let offsetX = 0;
+        let offsetY = 0;
+        if (textElement && valueElement) {
+          const valueRect = normalizeRect(valueElement.getBoundingClientRect(), scale);
+          textRect = normalizeRect(textElement.getBoundingClientRect(), scale);
+          const valueLeftFromTriggerLeft = valueRect.left - triggerX;
+          const textLeftFromPositionerLeft = textRect.left - positionerRect.left;
+          const valueCenterFromPositionerTop = valueRect.top - triggerRect.top + valueRect.height / 2;
+          const textCenterFromTriggerTop = textRect.top - positionerRect.top + textRect.height / 2;
+          offsetX = valueLeftFromTriggerLeft - textLeftFromPositionerLeft;
+          offsetY = textCenterFromTriggerTop - valueCenterFromPositionerTop;
+        }
+        const idealHeight = availableSpaceBeneathTrigger + offsetY + marginBottom + borderBottom;
+        let height = Math.min(viewportHeight, idealHeight);
+        const maxHeight = viewportHeight - marginTop - marginBottom;
+        const scrollTop = idealHeight - height;
+        const left = Math.max(paddingLeft, triggerX + offsetX);
+        const maxRight = viewportWidth - paddingRight;
+        const rightOverflow = Math.max(0, left + positionerRect.width - maxRight);
+        positionerElement.style.left = `${left - rightOverflow}px`;
+        positionerElement.style.height = `${height}px`;
+        positionerElement.style.maxHeight = 'auto';
+        positionerElement.style.marginTop = `${marginTop}px`;
+        positionerElement.style.marginBottom = `${marginBottom}px`;
+        popupElement.style.height = '100%';
+        const maxScrollTop = getMaxScrollTop(scroller);
+        const isTopPositioned = scrollTop >= maxScrollTop - SCROLL_EPS_PX;
+        if (isTopPositioned) {
+          height = Math.min(viewportHeight, positionerRect.height) - (scrollTop - maxScrollTop);
+        }
+
+        // When the trigger is too close to the top or bottom of the viewport, or the minHeight is
+        // reached, we fallback to aligning the popup to the trigger as the UX is poor otherwise.
+        const fallbackToAlignPopupToTrigger = triggerRect.top < triggerCollisionThreshold || triggerRect.bottom > viewportHeight - triggerCollisionThreshold || Math.ceil(height) + SCROLL_EPS_PX < Math.min(scrollHeight, minHeight);
+
+        // Safari doesn't position the popup correctly when pinch-zoomed.
+        const isPinchZoomed = (win.visualViewport?.scale ?? 1) !== 1 && useButton.isWebKit;
+        if (fallbackToAlignPopupToTrigger || isPinchZoomed) {
+          initialPlacedRef.current = true;
+          clearStyles(positionerElement, originalPositionerStylesRef.current);
+          ReactDOM__namespace.flushSync(() => setControlledAlignItemWithTrigger(false));
+          return;
+        }
+        if (isTopPositioned) {
+          const topOffset = Math.max(0, viewportHeight - idealHeight);
+          positionerElement.style.top = positionerRect.height >= maxHeight ? '0' : `${topOffset}px`;
+          positionerElement.style.height = `${height}px`;
+          scroller.scrollTop = getMaxScrollTop(scroller);
+          initialHeightRef.current = Math.max(minHeight, height);
+        } else {
+          positionerElement.style.bottom = '0';
+          initialHeightRef.current = Math.max(minHeight, height);
+          scroller.scrollTop = scrollTop;
+        }
+        if (textRect) {
+          const popupTop = positionerRect.top;
+          const popupHeight = positionerRect.height;
+          const textCenterY = textRect.top + textRect.height / 2;
+          const transformOriginY = popupHeight > 0 ? (textCenterY - popupTop) / popupHeight * 100 : 50;
+          const clampedY = clamp.clamp(transformOriginY, 0, 100);
+          popupElement.style.setProperty('--transform-origin', `50% ${clampedY}%`);
+        }
+        if (initialHeightRef.current === viewportHeight || height >= maxPopupHeight) {
+          reachedMaxHeightRef.current = true;
+        }
+        handleScrollArrowVisibility();
+
+        // Avoid the `onScroll` event logic from triggering before the popup is placed.
+        setTimeout(() => {
+          initialPlacedRef.current = true;
+        });
+      } finally {
+        restoreTransformStyles();
+      }
+    });
+  }, [store, open, positionerElement, triggerElement, valueRef, selectedItemTextRef, popupRef, handleScrollArrowVisibility, alignItemWithTriggerActive, setControlledAlignItemWithTrigger, scrollArrowFrame, scrollDownArrowRef, scrollUpArrowRef, listElement]);
+  React__namespace.useEffect(() => {
+    if (!alignItemWithTriggerActive || !positionerElement || !open) {
+      return undefined;
+    }
+    const win = floatingUi_utils_dom.getWindow(positionerElement);
+    function handleResize(event) {
+      setOpen(false, useButton.createChangeEventDetails(useButton.windowResize, event));
+    }
+    win.addEventListener('resize', handleResize);
+    return () => {
+      win.removeEventListener('resize', handleResize);
+    };
+  }, [setOpen, alignItemWithTriggerActive, positionerElement, open]);
+  const defaultProps = {
+    ...(listElement ? {
+      role: 'presentation',
+      'aria-orientation': undefined
+    } : {
+      role: 'listbox',
+      'aria-multiselectable': multiple || undefined,
+      id: `${id}-list`
+    }),
+    onKeyDown(event) {
+      keyboardActiveRef.current = true;
+      if (insideToolbar && CSPContext.COMPOSITE_KEYS.has(event.key)) {
+        event.stopPropagation();
+      }
+    },
+    onMouseMove() {
+      keyboardActiveRef.current = false;
+    },
+    onPointerLeave(event) {
+      if (!highlightItemOnHover || isMouseWithinBounds(event) || event.pointerType === 'touch') {
+        return;
+      }
+      const popup = event.currentTarget;
+      highlightTimeout.start(0, () => {
+        store.set('activeIndex', null);
+        popup.focus({
+          preventScroll: true
+        });
+      });
+    },
+    onScroll(event) {
+      if (listElement) {
+        return;
+      }
+      handleScroll(event.currentTarget);
+    },
+    ...(alignItemWithTriggerActive && {
+      style: listElement ? {
+        height: '100%'
+      } : LIST_FUNCTIONAL_STYLES
+    })
+  };
+  const element = useRenderElement.useRenderElement('div', componentProps, {
+    ref: [forwardedRef, popupRef],
+    state,
+    stateAttributesMapping,
+    props: [popupProps, defaultProps, useCompositeListItem.getDisabledMountTransitionStyles(transitionStatus), {
+      className: !listElement && alignItemWithTriggerActive ? CSPContext.styleDisableScrollbar.className : undefined
+    }, elementProps]
+  });
+  return /*#__PURE__*/jsxRuntime.jsxs(React__namespace.Fragment, {
+    children: [!disableStyleElements && CSPContext.styleDisableScrollbar.getElement(nonce), /*#__PURE__*/jsxRuntime.jsx(InternalBackdrop.FloatingFocusManager, {
+      context: floatingRootContext,
+      modal: false,
+      disabled: !mounted,
+      returnFocus: finalFocus,
+      restoreFocus: true,
+      children: element
+    })]
+  });
+});
+if (process.env.NODE_ENV !== "production") SelectPopup.displayName = "SelectPopup";
+function getMaxPopupHeight(popupStyles) {
+  const maxHeightStyle = popupStyles.maxHeight || '';
+  return maxHeightStyle.endsWith('px') ? parseFloat(maxHeightStyle) || Infinity : Infinity;
+}
+function getMaxScrollTop(scroller) {
+  return Math.max(0, scroller.scrollHeight - scroller.clientHeight);
+}
+function getScale(element) {
+  // The platform API is async-capable, but the DOM platform returns a plain scale object.
+  return floatingUi_reactDom.platform.getScale(element);
+}
+function normalizeRect(rect, scale) {
+  return index_esm.rectToClientRect({
+    x: rect.x / scale.x,
+    y: rect.y / scale.y,
+    width: rect.width / scale.x,
+    height: rect.height / scale.y
+  });
+}
+const TRANSFORM_STYLE_RESETS = [['transform', 'none'], ['scale', '1'], ['translate', '0 0']];
+function unsetTransformStyles(popupElement) {
+  const {
+    style
+  } = popupElement;
+  const originalStyles = {};
+  for (const [property, value] of TRANSFORM_STYLE_RESETS) {
+    originalStyles[property] = style.getPropertyValue(property);
+    style.setProperty(property, value, 'important');
+  }
+  return () => {
+    for (const [property] of TRANSFORM_STYLE_RESETS) {
+      const originalValue = originalStyles[property];
+      if (originalValue) {
+        style.setProperty(property, originalValue);
+      } else {
+        style.removeProperty(property);
+      }
+    }
+  };
+}
+
+/**
+ * A container for the select items.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
+ */
+const SelectList = /*#__PURE__*/React__namespace.forwardRef(function SelectList(componentProps, forwardedRef) {
+  const {
+    className,
+    render,
+    ...elementProps
+  } = componentProps;
+  const {
+    store,
+    scrollHandlerRef
+  } = useSelectRootContext();
+  const {
+    alignItemWithTriggerActive
+  } = useSelectPositionerContext();
+  const hasScrollArrows = InternalBackdrop.useStore(store, selectors.hasScrollArrows);
+  const openMethod = InternalBackdrop.useStore(store, selectors.openMethod);
+  const multiple = InternalBackdrop.useStore(store, selectors.multiple);
+  const id = InternalBackdrop.useStore(store, selectors.id);
+  const defaultProps = {
+    id: `${id}-list`,
+    role: 'listbox',
+    'aria-multiselectable': multiple || undefined,
+    onScroll(event) {
+      scrollHandlerRef.current?.(event.currentTarget);
+    },
+    ...(alignItemWithTriggerActive && {
+      style: LIST_FUNCTIONAL_STYLES
+    }),
+    className: hasScrollArrows && openMethod !== 'touch' ? CSPContext.styleDisableScrollbar.className : undefined
+  };
+  const setListElement = useButton.useStableCallback(element => {
+    store.set('listElement', element);
+  });
+  return useRenderElement.useRenderElement('div', componentProps, {
+    ref: [forwardedRef, setListElement],
+    props: [defaultProps, elementProps]
+  });
+});
+if (process.env.NODE_ENV !== "production") SelectList.displayName = "SelectList";
+
+const SelectItemContext = /*#__PURE__*/React__namespace.createContext(undefined);
+if (process.env.NODE_ENV !== "production") SelectItemContext.displayName = "SelectItemContext";
+function useSelectItemContext() {
+  const context = React__namespace.useContext(SelectItemContext);
+  if (!context) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: SelectItemContext is missing. SelectItem parts must be placed within <Select.Item>.' : useRenderElement.formatErrorMessage(57));
+  }
+  return context;
+}
+
+const SelectItem = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.forwardRef(function SelectItem(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    value: itemValue = null,
+    label,
+    disabled = false,
+    nativeButton = false,
+    ...elementProps
+  } = componentProps;
+  const textRef = React__namespace.useRef(null);
+  const listItem = useCompositeListItem.useCompositeListItem({
+    label,
+    textRef,
+    indexGuessBehavior: useCompositeListItem.IndexGuessBehavior.GuessFromOrder
+  });
+  const {
+    store,
+    getItemProps,
+    setOpen,
+    setValue,
+    selectionRef,
+    typingRef,
+    valuesRef,
+    keyboardActiveRef,
+    multiple,
+    highlightItemOnHover
+  } = useSelectRootContext();
+  const highlightTimeout = useButton.useTimeout();
+  const highlighted = InternalBackdrop.useStore(store, selectors.isActive, listItem.index);
+  const selected = InternalBackdrop.useStore(store, selectors.isSelected, listItem.index, itemValue);
+  const selectedByFocus = InternalBackdrop.useStore(store, selectors.isSelectedByFocus, listItem.index);
+  const isItemEqualToValue = InternalBackdrop.useStore(store, selectors.isItemEqualToValue);
+  const index = listItem.index;
+  const hasRegistered = index !== -1;
+  const itemRef = React__namespace.useRef(null);
+  const indexRef = useButton.useValueAsRef(index);
+  useButton.useIsoLayoutEffect(() => {
+    if (!hasRegistered) {
+      return undefined;
+    }
+    const values = valuesRef.current;
+    values[index] = itemValue;
+    return () => {
+      delete values[index];
+    };
+  }, [hasRegistered, index, itemValue, valuesRef]);
+  useButton.useIsoLayoutEffect(() => {
+    if (!hasRegistered) {
+      return undefined;
+    }
+    const selectedValue = store.state.value;
+    let selectedCandidate = selectedValue;
+    if (multiple && Array.isArray(selectedValue) && selectedValue.length > 0) {
+      selectedCandidate = selectedValue[selectedValue.length - 1];
+    }
+    if (selectedCandidate !== undefined && resolveAriaLabelledBy.compareItemEquality(itemValue, selectedCandidate, isItemEqualToValue)) {
+      store.set('selectedIndex', index);
+    }
+    return undefined;
+  }, [hasRegistered, index, multiple, isItemEqualToValue, store, itemValue]);
+  const state = {
+    disabled,
+    selected,
+    highlighted
+  };
+  const rootProps = getItemProps({
+    active: highlighted,
+    selected
+  });
+  // With our custom `focusItemOnHover` implementation, this interferes with the logic and can
+  // cause the index state to be stuck when leaving the select popup.
+  rootProps.onFocus = undefined;
+  rootProps.id = undefined;
+  const lastKeyRef = React__namespace.useRef(null);
+  const pointerTypeRef = React__namespace.useRef('mouse');
+  const didPointerDownRef = React__namespace.useRef(false);
+  const {
+    getButtonProps,
+    buttonRef
+  } = useButton.useButton({
+    disabled,
+    focusableWhenDisabled: true,
+    native: nativeButton,
+    composite: true
+  });
+  function commitSelection(event) {
+    const selectedValue = store.state.value;
+    if (multiple) {
+      const currentValue = Array.isArray(selectedValue) ? selectedValue : [];
+      const nextValue = selected ? resolveAriaLabelledBy.removeItem(currentValue, itemValue, isItemEqualToValue) : [...currentValue, itemValue];
+      setValue(nextValue, useButton.createChangeEventDetails(useButton.itemPress, event));
+    } else {
+      setValue(itemValue, useButton.createChangeEventDetails(useButton.itemPress, event));
+      setOpen(false, useButton.createChangeEventDetails(useButton.itemPress, event));
+    }
+  }
+  const defaultProps = {
+    role: 'option',
+    'aria-selected': selected,
+    tabIndex: highlighted ? 0 : -1,
+    onFocus() {
+      store.set('activeIndex', index);
+    },
+    onMouseEnter() {
+      if (!keyboardActiveRef.current && store.state.selectedIndex === null && highlightItemOnHover) {
+        store.set('activeIndex', index);
+      }
+    },
+    onMouseMove() {
+      if (highlightItemOnHover) {
+        store.set('activeIndex', index);
+      }
+    },
+    onMouseLeave(event) {
+      if (!highlightItemOnHover || keyboardActiveRef.current || isMouseWithinBounds(event)) {
+        return;
+      }
+      highlightTimeout.start(0, () => {
+        if (store.state.activeIndex === index) {
+          store.set('activeIndex', null);
+        }
+      });
+    },
+    onTouchStart() {
+      selectionRef.current = {
+        allowSelectedMouseUp: false,
+        allowUnselectedMouseUp: false
+      };
+    },
+    onKeyDown(event) {
+      lastKeyRef.current = event.key;
+      store.set('activeIndex', index);
+      if (event.key === ' ' && typingRef.current) {
+        event.preventDefault();
+      }
+    },
+    onClick(event) {
+      didPointerDownRef.current = false;
+
+      // Prevent double commit on {Enter}
+      if (event.type === 'keydown' && lastKeyRef.current === null) {
+        return;
+      }
+      if (disabled || event.type === 'keydown' && lastKeyRef.current === ' ' && typingRef.current || pointerTypeRef.current !== 'touch' && !highlighted) {
+        return;
+      }
+      lastKeyRef.current = null;
+      commitSelection(event.nativeEvent);
+    },
+    onPointerEnter(event) {
+      pointerTypeRef.current = event.pointerType;
+    },
+    onPointerDown(event) {
+      pointerTypeRef.current = event.pointerType;
+      didPointerDownRef.current = true;
+    },
+    onMouseUp() {
+      if (disabled) {
+        return;
+      }
+
+      // Regular click (pointerdown on this element) if didPointerDownRef is set, otherwise drag-to-select
+      if (didPointerDownRef.current) {
+        didPointerDownRef.current = false;
+        return;
+      }
+      const disallowSelectedMouseUp = !selectionRef.current.allowSelectedMouseUp && selected;
+      const disallowUnselectedMouseUp = !selectionRef.current.allowUnselectedMouseUp && !selected;
+      if (disallowSelectedMouseUp || disallowUnselectedMouseUp || pointerTypeRef.current !== 'touch' && !highlighted) {
+        return;
+      }
+      itemRef.current?.click();
+    }
+  };
+  const element = useRenderElement.useRenderElement('div', componentProps, {
+    ref: [buttonRef, forwardedRef, listItem.ref, itemRef],
+    state,
+    props: [rootProps, defaultProps, elementProps, getButtonProps]
+  });
+  const contextValue = React__namespace.useMemo(() => ({
+    selected,
+    indexRef,
+    textRef,
+    selectedByFocus,
+    hasRegistered
+  }), [selected, indexRef, textRef, selectedByFocus, hasRegistered]);
+  return /*#__PURE__*/jsxRuntime.jsx(SelectItemContext.Provider, {
+    value: contextValue,
+    children: element
+  });
+}));
+if (process.env.NODE_ENV !== "production") SelectItem.displayName = "SelectItem";
+
+const SelectItemIndicator = /*#__PURE__*/React__namespace.forwardRef(function SelectItemIndicator(componentProps, forwardedRef) {
+  const keepMounted = componentProps.keepMounted ?? false;
+  const {
+    selected
+  } = useSelectItemContext();
+  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") SelectItemIndicator.displayName = "SelectItemIndicator";
+const Inner = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.forwardRef((componentProps, forwardedRef) => {
+  const {
+    render,
+    className,
+    keepMounted,
+    ...elementProps
+  } = componentProps;
+  const {
+    selected
+  } = useSelectItemContext();
+  const indicatorRef = React__namespace.useRef(null);
+  const {
+    transitionStatus,
+    setMounted
+  } = useButton.useTransitionStatus(selected);
+  const state = {
+    selected,
+    transitionStatus
+  };
+  const element = useRenderElement.useRenderElement('span', componentProps, {
+    ref: [forwardedRef, indicatorRef],
+    state,
+    props: [{
+      'aria-hidden': true,
+      children: '✔️'
+    }, elementProps],
+    stateAttributesMapping: useButton.transitionStatusMapping
+  });
+  useButton.useOpenChangeComplete({
+    open: selected,
+    ref: indicatorRef,
+    onComplete() {
+      if (!selected) {
+        setMounted(false);
+      }
+    }
+  });
+  return element;
+}));
+if (process.env.NODE_ENV !== "production") Inner.displayName = "Inner";
+
+/**
+ * A text label of the select item.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
+ */
+const SelectItemText = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.forwardRef(function SelectItemText(componentProps, forwardedRef) {
+  const {
+    indexRef,
+    textRef,
+    selectedByFocus,
+    hasRegistered
+  } = useSelectItemContext();
+  const {
+    selectedItemTextRef
+  } = useSelectRootContext();
+  const {
+    className,
+    render,
+    ...elementProps
+  } = componentProps;
+  const localRef = React__namespace.useCallback(node => {
+    if (!node || !hasRegistered) {
+      return;
+    }
+    const hasNoSelectedItemText = selectedItemTextRef.current === null || !selectedItemTextRef.current.isConnected;
+    if (selectedByFocus || hasNoSelectedItemText && indexRef.current === 0) {
+      selectedItemTextRef.current = node;
+    }
+  }, [selectedItemTextRef, indexRef, selectedByFocus, hasRegistered]);
+  const element = useRenderElement.useRenderElement('div', componentProps, {
+    ref: [localRef, forwardedRef, textRef],
+    props: elementProps
+  });
+  return element;
+}));
+if (process.env.NODE_ENV !== "production") SelectItemText.displayName = "SelectItemText";
+
+const SelectGroupContext = /*#__PURE__*/React__namespace.createContext(undefined);
+if (process.env.NODE_ENV !== "production") SelectGroupContext.displayName = "SelectGroupContext";
+function useSelectGroupContext() {
+  const context = React__namespace.useContext(SelectGroupContext);
+  if (context === undefined) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: SelectGroupContext is missing. SelectGroup parts must be placed within <Select.Group>.' : useRenderElement.formatErrorMessage(56));
+  }
+  return context;
+}
+
+const SelectGroup = /*#__PURE__*/React__namespace.forwardRef(function SelectGroup(componentProps, forwardedRef) {
+  const {
+    className,
+    render,
+    ...elementProps
+  } = componentProps;
+  const [labelId, setLabelId] = React__namespace.useState();
+  const contextValue = React__namespace.useMemo(() => ({
+    labelId,
+    setLabelId
+  }), [labelId, setLabelId]);
+  const element = useRenderElement.useRenderElement('div', componentProps, {
+    ref: forwardedRef,
+    props: [{
+      role: 'group',
+      'aria-labelledby': labelId
+    }, elementProps]
+  });
+  return /*#__PURE__*/jsxRuntime.jsx(SelectGroupContext.Provider, {
+    value: contextValue,
+    children: element
+  });
+});
+if (process.env.NODE_ENV !== "production") SelectGroup.displayName = "SelectGroup";
+
+/**
+ * An accessible label that is automatically associated with its parent group.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
+ */
+const SelectGroupLabel = /*#__PURE__*/React__namespace.forwardRef(function SelectGroupLabel(componentProps, forwardedRef) {
+  const {
+    className,
+    render,
+    id: idProp,
+    ...elementProps
+  } = componentProps;
+  const {
+    setLabelId
+  } = useSelectGroupContext();
+  const id = useButton.useBaseUiId(idProp);
+  useButton.useIsoLayoutEffect(() => {
+    setLabelId(id);
+  }, [id, setLabelId]);
+  const element = useRenderElement.useRenderElement('div', componentProps, {
+    ref: forwardedRef,
+    props: [{
+      id
+    }, elementProps]
+  });
+  return element;
+});
+if (process.env.NODE_ENV !== "production") SelectGroupLabel.displayName = "SelectGroupLabel";
+
+exports.SelectGroup = SelectGroup;
+exports.SelectGroupLabel = SelectGroupLabel;
+exports.SelectItem = SelectItem;
+exports.SelectItemIndicator = SelectItemIndicator;
+exports.SelectItemText = SelectItemText;
+exports.SelectList = SelectList;
+exports.SelectPopup = SelectPopup;
+exports.SelectPortal = SelectPortal;
+exports.SelectPositioner = SelectPositioner;
+exports.SelectRoot = SelectRoot;
+exports.SelectTrigger = SelectTrigger;
+exports.SelectValue = SelectValue;
+exports.selectors = selectors;
+exports.useSelectPositionerContext = useSelectPositionerContext;
+exports.useSelectRootContext = useSelectRootContext;