@jobber/components 8.21.1 → 8.23.0

package/dist/unstyledPrimitives/index.mjs

@@ -1,19 +1,26 @@
 import * as React from 'react';
-import { a as useStableCallback, ar as pointer, u as useBaseUiId, d as useIsoLayoutEffect, t as transitionStatusMapping, n as createChangeEventDetails, Q as imperativeAction, o as ownerDocument, m as contains, g as getTarget, b as useTimeout, as as swipe, ac as useAnimationFrame, al as TransitionStatusDataAttributes, a4 as triggerHover, B as useControlled, a6 as itemPress, c as useTransitionStatus, f as useOpenChangeComplete, a8 as useAnimationsFinished, ao as isFirefox, at as scrub, K as createGenericEventDetails, V as isWebKit } from '../useButton-es.js';
-import { A as useCoreFilter, B as AriaCombobox, D as stringifyAsLabel, E as useComboboxInputValueContext, l as ComboboxArrow, i as ComboboxBackdrop, x as ComboboxClear, v as ComboboxCollection, w as ComboboxEmpty, n as ComboboxGroup, o as ComboboxGroupLabel, m as ComboboxIcon, c as ComboboxInput, d as ComboboxInputGroup, p as ComboboxItem, f as ComboboxList, k as ComboboxPopup, h as ComboboxPortal, j as ComboboxPositioner, u as ComboboxRow, g as ComboboxStatus, e as ComboboxTrigger, z as useFilteredItems, s as ComboboxChip, t as ComboboxChipRemove, r as ComboboxChips, q as ComboboxItemIndicator, a as ComboboxLabel, C as ComboboxRoot, b as ComboboxValue, y as useComboboxFilter } from '../ComboboxChipRemove-es.js';
+import { b as useStableCallback, as as pointer, a as useIsoLayoutEffect, o as ownerDocument, r as contains, g as getTarget, h as useTimeout, u as useBaseUiId, d as createChangeEventDetails, at as swipe, W as useAnimationFrame, aq as TransitionStatusDataAttributes, E as useControlled, Z as itemPress, k as useTransitionStatus, f as useOpenChangeComplete, ab as useAnimationsFinished, af as isFirefox, au as scrub, N as createGenericEventDetails, X as isWebKit, t as transitionStatusMapping } from '../useButton-es.js';
+import { A as useCoreFilter, B as AriaCombobox, D as useComboboxInputValueContext, l as ComboboxArrow, i as ComboboxBackdrop, x as ComboboxClear, v as ComboboxCollection, w as ComboboxEmpty, n as ComboboxGroup, o as ComboboxGroupLabel, m as ComboboxIcon, c as ComboboxInput, d as ComboboxInputGroup, p as ComboboxItem, f as ComboboxList, k as ComboboxPopup, h as ComboboxPortal, j as ComboboxPositioner, u as ComboboxRow, g as ComboboxStatus, e as ComboboxTrigger, z as useFilteredItems, s as ComboboxChip, t as ComboboxChipRemove, r as ComboboxChips, q as ComboboxItemIndicator, a as ComboboxLabel, C as ComboboxRoot, b as ComboboxValue, y as useComboboxFilter } from '../ComboboxChipRemove-es.js';
+import { i as stringifyAsLabel, k as getDefaultLabelId } from '../resolveAriaLabelledBy-es.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { S as Separator } from '../Separator-es.js';
-import { u as useDialogRootContext, n as useDrawerProviderContext, o as DrawerBackdropCssVars, q as DrawerPopupCssVars, r as DrawerProviderContext, s as useDialogPortalContext, t as DialogStore, v as useDrawerRootContext, m as useTriggerRegistration, w as DrawerPopupDataAttributes, x as useDrawerSnapPoints, y as DrawerViewportContext, z as DRAWER_CONTENT_ATTRIBUTE, c as DrawerBackdrop, f as DrawerContent, d as DrawerPopup, b as DrawerPortal, a as DrawerRoot, D as DrawerTrigger, A as useScrollAreaRootContext, B as getOffset, E as ScrollAreaRootCssVars, F as scrollAreaStateAttributesMapping, G as useScrollAreaViewportContext, S as ScrollAreaRoot, e as ScrollAreaViewport } from '../ScrollAreaViewport-es.js';
-import { a as DrawerClose, D as DrawerTitle, u as useMenuRootContext, o as useMenuPositionerContext, p as useContextMenuRootContext, q as useMenuItem, R as REGULAR_ITEM, r as itemMapping, s as MenuStore, l as MenuGroup, n as MenuGroupLabel, c as MenuItem, b as MenuLinkItem, j as MenuPopup, h as MenuPortal, i as MenuPositioner, k as MenuRadioGroup, d as MenuRadioItem, e as MenuRadioItemIndicator, g as MenuRoot, m as MenuSubmenuRoot, f as MenuSubmenuTrigger, M as MenuTrigger } from '../MenuSubmenuTrigger-es.js';
+import { a as DialogBackdrop, d as DialogDescription, f as DialogHandle, c as DialogPopup, b as DialogViewport, e as createDialogHandle, D as DrawerDescription } from '../DrawerDescription-es.js';
+import { c as DialogClose, b as DialogTitle, a as DrawerClose, D as DrawerTitle } from '../DrawerTitle-es.js';
+import { i as DialogPortal, g as DialogRoot, h as DialogTrigger, t as useDrawerProviderContext, v as DrawerBackdropCssVars, w as DrawerPopupCssVars, x as DrawerProviderContext, u as useDialogRootContext, y as useDrawerRootContext, s as useTriggerRegistration, z as DrawerPopupDataAttributes, A as useDrawerSnapPoints, B as DrawerViewportContext, C as DRAWER_CONTENT_ATTRIBUTE, c as DrawerBackdrop, f as DrawerContent, d as DrawerPopup, b as DrawerPortal, a as DrawerRoot, D as DrawerTrigger, E as useScrollAreaRootContext, F as getOffset, G as ScrollAreaRootCssVars, H as scrollAreaStateAttributesMapping, I as useScrollAreaViewportContext, S as ScrollAreaRoot, e as ScrollAreaViewport } from '../ScrollAreaViewport-es.js';
 import { u as useRenderElement, m as mergeProps, f as formatErrorMessage, N as NOOP, E as EMPTY_OBJECT } from '../useRenderElement-es.js';
-import { a as isHTMLElement, f as getComputedStyle, b as isElement, k as getWindow } from '../floating-ui.utils.dom-es.js';
+import { a as isHTMLElement, f as getComputedStyle, b as isElement, o as getWindow } from '../floating-ui.utils.dom-es.js';
 import { c as clamp } from '../clamp-es.js';
-import { C as CommonPopupDataAttributes, p as popupStateMapping, $ as BASE_UI_SWIPE_IGNORE_SELECTOR, m as useDirection, r as inertValue } from '../InternalBackdrop-es.js';
+import { C as CommonPopupDataAttributes, $ as BASE_UI_SWIPE_IGNORE_SELECTOR, p as popupStateMapping, n as useDirection, A as inertValue, r as useStore, G as triggerOpenStateMapping } from '../InternalBackdrop-es.js';
 import * as ReactDOM from 'react-dom';
-import { u as useCompositeListItem } from '../useCompositeListItem-es.js';
+import { u as useMenuRootContext, o as useMenuPositionerContext, p as useMenuItem, R as REGULAR_ITEM, q as itemMapping, r as MenuStore, h as MenuBackdrop, l as MenuGroup, n as MenuGroupLabel, b as MenuItem, a as MenuLinkItem, j as MenuPopup, g as MenuPortal, i as MenuPositioner, k as MenuRadioGroup, c as MenuRadioItem, d as MenuRadioItemIndicator, f as MenuRoot, m as MenuSubmenuRoot, e as MenuSubmenuTrigger, M as MenuTrigger } from '../MenuSubmenuTrigger-es.js';
+import { e as useCompositeListItem } from '../useCompositeListItem-es.js';
 import { y as round } from '../index.esm-es.js';
 import { u as useNumberFieldRootContext, D as DEFAULT_STEP, s as stateAttributesMapping$6, d as NumberFieldDecrement, a as NumberFieldGroup, c as NumberFieldIncrement, b as NumberFieldInput, N as NumberFieldRoot } from '../NumberFieldInput-es.js';
-import '../useLabel-es.js';
+import { u as useSelectRootContext, s as selectors, l as useSelectPositionerContext, j as SelectGroup, k as SelectGroupLabel, g as SelectItem, i as SelectItemIndicator, h as SelectItemText, f as SelectList, e as SelectPopup, a as SelectPortal, d as SelectPositioner, S as SelectRoot, b as SelectTrigger, c as SelectValue } from '../SelectGroupLabel-es.js';
+import { b as useFieldRootContext, f as fieldValidityMapping } from '../useLabelableId-es.js';
+import { u as useLabel } from '../useLabel-es.js';
+import '../CSPContext-es.js';
+import '../ToolbarRootContext-es.js';
 import '../floating-ui.react-dom-es.js';
 
 function AutocompleteRoot(props) {
@@ -125,7 +132,7 @@ function AutocompleteValue(props) {
   });
 }
 
-var index_parts$5 = /*#__PURE__*/Object.freeze({
+var index_parts$7 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Arrow: ComboboxArrow,
   Backdrop: ComboboxBackdrop,
@@ -152,40 +159,20 @@ var index_parts$5 = /*#__PURE__*/Object.freeze({
   useFilteredItems: useFilteredItems
 });
 
-/**
- * A paragraph with additional information about the dialog.
- * Renders a `<p>` element.
- *
- * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
- */
-const DialogDescription = /*#__PURE__*/React.forwardRef(function DialogDescription(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    id: idProp,
-    ...elementProps
-  } = componentProps;
-  const {
-    store
-  } = useDialogRootContext();
-  const id = useBaseUiId(idProp);
-  store.useSyncedValueWithCleanup('descriptionElementId', id);
-  return useRenderElement('p', componentProps, {
-    ref: forwardedRef,
-    props: [{
-      id
-    }, elementProps]
-  });
+var index_parts$6 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Backdrop: DialogBackdrop,
+  Close: DialogClose,
+  Description: DialogDescription,
+  Handle: DialogHandle,
+  Popup: DialogPopup,
+  Portal: DialogPortal,
+  Root: DialogRoot,
+  Title: DialogTitle,
+  Trigger: DialogTrigger,
+  Viewport: DialogViewport,
+  createHandle: createDialogHandle
 });
-if (process.env.NODE_ENV !== "production") DialogDescription.displayName = "DialogDescription";
-
-/**
- * A paragraph with additional information about the drawer.
- * Renders a `<p>` element.
- *
- * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
- */
-const DrawerDescription = DialogDescription;
 
 const stateAttributesMapping$5 = {
   active(value) {
@@ -384,160 +371,6 @@ function createVisualStateStore() {
   };
 }
 
-let DialogViewportDataAttributes = function (DialogViewportDataAttributes) {
-  /**
-   * Present when the dialog is open.
-   */
-  DialogViewportDataAttributes[DialogViewportDataAttributes["open"] = CommonPopupDataAttributes.open] = "open";
-  /**
-   * Present when the dialog is closed.
-   */
-  DialogViewportDataAttributes[DialogViewportDataAttributes["closed"] = CommonPopupDataAttributes.closed] = "closed";
-  /**
-   * Present when the dialog is animating in.
-   */
-  DialogViewportDataAttributes[DialogViewportDataAttributes["startingStyle"] = CommonPopupDataAttributes.startingStyle] = "startingStyle";
-  /**
-   * Present when the dialog is animating out.
-   */
-  DialogViewportDataAttributes[DialogViewportDataAttributes["endingStyle"] = CommonPopupDataAttributes.endingStyle] = "endingStyle";
-  /**
-   * Present when the dialog is nested within another dialog.
-   */
-  DialogViewportDataAttributes["nested"] = "data-nested";
-  /**
-   * Present when the dialog has other open dialogs nested within it.
-   */
-  DialogViewportDataAttributes["nestedDialogOpen"] = "data-nested-dialog-open";
-  return DialogViewportDataAttributes;
-}({});
-
-const stateAttributesMapping$3 = {
-  ...popupStateMapping,
-  ...transitionStatusMapping,
-  nested(value) {
-    return value ? {
-      [DialogViewportDataAttributes.nested]: ''
-    } : null;
-  },
-  nestedDialogOpen(value) {
-    return value ? {
-      [DialogViewportDataAttributes.nestedDialogOpen]: ''
-    } : null;
-  }
-};
-
-/**
- * A positioning container for the dialog popup that can be made scrollable.
- * Renders a `<div>` element.
- *
- * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
- */
-const DialogViewport = /*#__PURE__*/React.forwardRef(function DialogViewport(componentProps, forwardedRef) {
-  const {
-    className,
-    render,
-    children,
-    ...elementProps
-  } = componentProps;
-  const keepMounted = useDialogPortalContext();
-  const {
-    store
-  } = useDialogRootContext();
-  const open = store.useState('open');
-  const nested = store.useState('nested');
-  const transitionStatus = store.useState('transitionStatus');
-  const nestedOpenDialogCount = store.useState('nestedOpenDialogCount');
-  const mounted = store.useState('mounted');
-  const nestedDialogOpen = nestedOpenDialogCount > 0;
-  const state = {
-    open,
-    nested,
-    transitionStatus,
-    nestedDialogOpen
-  };
-  const shouldRender = keepMounted || mounted;
-  return useRenderElement('div', componentProps, {
-    enabled: shouldRender,
-    state,
-    ref: [forwardedRef, store.useStateSetter('viewportElement')],
-    stateAttributesMapping: stateAttributesMapping$3,
-    props: [{
-      role: 'presentation',
-      hidden: !mounted,
-      style: {
-        pointerEvents: !open ? 'none' : undefined
-      },
-      children
-    }, elementProps]
-  });
-});
-if (process.env.NODE_ENV !== "production") DialogViewport.displayName = "DialogViewport";
-
-/**
- * A handle to control a Dialog imperatively and to associate detached triggers with it.
- */
-class DialogHandle {
-  /**
-   * Internal store holding the dialog state.
-   * @internal
-   */
-
-  constructor(store) {
-    this.store = store ?? new DialogStore();
-  }
-
-  /**
-   * Opens the dialog and associates it with the trigger with the given id.
-   * The trigger, if provided, must be a Dialog.Trigger component with this handle passed as a prop.
-   *
-   * This method should only be called in an event handler or an effect (not during rendering).
-   *
-   * @param triggerId ID of the trigger to associate with the dialog. If null, the dialog will open without a trigger association.
-   */
-  open(triggerId) {
-    const triggerElement = triggerId ? this.store.context.triggerElements.getById(triggerId) : undefined;
-    if (process.env.NODE_ENV !== 'production') {
-      if (triggerId && !triggerElement) {
-        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, createChangeEventDetails(imperativeAction, undefined, triggerElement));
-  }
-
-  /**
-   * Opens the dialog and sets the payload.
-   * Does not associate the dialog with any trigger.
-   *
-   * @param payload Payload to set when opening the dialog.
-   */
-  openWithPayload(payload) {
-    this.store.set('payload', payload);
-    this.store.setOpen(true, createChangeEventDetails(imperativeAction, undefined, undefined));
-  }
-
-  /**
-   * Closes the dialog.
-   */
-  close() {
-    this.store.setOpen(false, createChangeEventDetails(imperativeAction, undefined, undefined));
-  }
-
-  /**
-   * Indicates whether the dialog is currently open.
-   */
-  get isOpen() {
-    return this.store.state.open;
-  }
-}
-
-/**
- * Creates a new handle to connect a Dialog.Root with detached Dialog.Trigger components.
- */
-function createDialogHandle() {
-  return new DialogHandle();
-}
-
 function isScrollable(element, axis) {
   const style = getComputedStyle(element);
   if (axis === 'vertical') {
@@ -1550,7 +1383,7 @@ const SWIPE_AREA_SWIPING_HOOK = {
 const SWIPE_AREA_DISABLED_HOOK = {
   [DrawerSwipeAreaDataAttributes.disabled]: ''
 };
-const stateAttributesMapping$2 = {
+const stateAttributesMapping$3 = {
   open(value) {
     return value ? SWIPE_AREA_OPEN_HOOK : SWIPE_AREA_CLOSED_HOOK;
   },
@@ -1855,7 +1688,7 @@ const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwipeArea(c
   return useRenderElement('div', componentProps, {
     state,
     ref: [forwardedRef, swipeAreaRef, registerTrigger],
-    stateAttributesMapping: stateAttributesMapping$2,
+    stateAttributesMapping: stateAttributesMapping$3,
     props: [{
       role: 'presentation',
       'aria-hidden': true,
@@ -2859,7 +2692,7 @@ function shouldDismissFromStartEdge(direction, axis) {
   return null;
 }
 
-var index_parts$4 = /*#__PURE__*/Object.freeze({
+var index_parts$5 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Backdrop: DrawerBackdrop,
   Close: DrawerClose,
@@ -2921,52 +2754,6 @@ const MenuArrow = /*#__PURE__*/React.forwardRef(function MenuArrow(componentProp
 });
 if (process.env.NODE_ENV !== "production") MenuArrow.displayName = "MenuArrow";
 
-const stateAttributesMapping$1 = {
-  ...popupStateMapping,
-  ...transitionStatusMapping
-};
-
-/**
- * An overlay displayed beneath the menu popup.
- * Renders a `<div>` element.
- *
- * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
- */
-const MenuBackdrop = /*#__PURE__*/React.forwardRef(function MenuBackdrop(componentProps, forwardedRef) {
-  const {
-    className,
-    render,
-    ...elementProps
-  } = componentProps;
-  const {
-    store
-  } = useMenuRootContext();
-  const open = store.useState('open');
-  const mounted = store.useState('mounted');
-  const transitionStatus = store.useState('transitionStatus');
-  const lastOpenChangeReason = store.useState('lastOpenChangeReason');
-  const contextMenuContext = useContextMenuRootContext();
-  const state = {
-    open,
-    transitionStatus
-  };
-  return useRenderElement('div', componentProps, {
-    ref: contextMenuContext?.backdropRef ? [forwardedRef, contextMenuContext.backdropRef] : forwardedRef,
-    state,
-    stateAttributesMapping: stateAttributesMapping$1,
-    props: [{
-      role: 'presentation',
-      hidden: !mounted,
-      style: {
-        pointerEvents: lastOpenChangeReason === triggerHover ? 'none' : undefined,
-        userSelect: 'none',
-        WebkitUserSelect: 'none'
-      }
-    }, elementProps]
-  });
-});
-if (process.env.NODE_ENV !== "production") MenuBackdrop.displayName = "MenuBackdrop";
-
 const MenuCheckboxItemContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== "production") MenuCheckboxItemContext.displayName = "MenuCheckboxItemContext";
 function useMenuCheckboxItemContext() {
@@ -3572,7 +3359,7 @@ let MenuViewportCssVars = /*#__PURE__*/function (MenuViewportCssVars) {
   return MenuViewportCssVars;
 }({});
 
-const stateAttributesMapping = {
+const stateAttributesMapping$2 = {
   activationDirection: value => value ? {
     'data-activation-direction': value
   } : null
@@ -3620,7 +3407,7 @@ const MenuViewport = /*#__PURE__*/React.forwardRef(function MenuViewport(compone
     props: [elementProps, {
       children: childrenToRender
     }],
-    stateAttributesMapping
+    stateAttributesMapping: stateAttributesMapping$2
   });
 });
 if (process.env.NODE_ENV !== "production") MenuViewport.displayName = "MenuViewport";
@@ -3671,7 +3458,7 @@ function createMenuHandle() {
   return new MenuHandle();
 }
 
-var index_parts$3 = /*#__PURE__*/Object.freeze({
+var index_parts$4 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Arrow: MenuArrow,
   Backdrop: MenuBackdrop,
@@ -4055,7 +3842,7 @@ const ScrollAreaCorner = /*#__PURE__*/React.forwardRef(function ScrollAreaCorner
 });
 if (process.env.NODE_ENV !== "production") ScrollAreaCorner.displayName = "ScrollAreaCorner";
 
-var index_parts$2 = /*#__PURE__*/Object.freeze({
+var index_parts$3 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Content: ScrollAreaContent,
   Corner: ScrollAreaCorner,
@@ -4065,7 +3852,7 @@ var index_parts$2 = /*#__PURE__*/Object.freeze({
   Viewport: ScrollAreaViewport
 });
 
-var index_parts$1 = /*#__PURE__*/Object.freeze({
+var index_parts$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Arrow: ComboboxArrow,
   Backdrop: ComboboxBackdrop,
@@ -4452,7 +4239,7 @@ const NumberFieldScrubAreaCursor = /*#__PURE__*/React.forwardRef(function Number
 });
 if (process.env.NODE_ENV !== "production") NumberFieldScrubAreaCursor.displayName = "NumberFieldScrubAreaCursor";
 
-var index_parts = /*#__PURE__*/Object.freeze({
+var index_parts$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Decrement: NumberFieldDecrement,
   Group: NumberFieldGroup,
@@ -4463,6 +4250,392 @@ var index_parts = /*#__PURE__*/Object.freeze({
   ScrubAreaCursor: NumberFieldScrubAreaCursor
 });
 
+/**
+ * An accessible label that is automatically associated with the select trigger.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
+ */
+const SelectLabel = /*#__PURE__*/React.forwardRef(function SelectLabel(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    ...elementProps
+  } = componentProps;
+  // Keep label id derived from the root and ignore runtime `id` overrides from untyped consumers.
+  const elementPropsWithoutId = elementProps;
+  delete elementPropsWithoutId.id;
+  const fieldRootContext = useFieldRootContext();
+  const {
+    store
+  } = useSelectRootContext();
+  const triggerElement = useStore(store, selectors.triggerElement);
+  const rootId = useStore(store, selectors.id);
+  const defaultLabelId = getDefaultLabelId(rootId);
+  const labelProps = useLabel({
+    id: defaultLabelId,
+    fallbackControlId: triggerElement?.id ?? rootId,
+    setLabelId(nextLabelId) {
+      store.set('labelId', nextLabelId);
+    }
+  });
+  return useRenderElement('div', componentProps, {
+    ref: forwardedRef,
+    state: fieldRootContext.state,
+    props: [labelProps, elementProps],
+    stateAttributesMapping: fieldValidityMapping
+  });
+});
+if (process.env.NODE_ENV !== "production") SelectLabel.displayName = "SelectLabel";
+
+/**
+ * An icon that indicates that the trigger button opens a select popup.
+ * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
+ */
+const SelectIcon = /*#__PURE__*/React.forwardRef(function SelectIcon(componentProps, forwardedRef) {
+  const {
+    className,
+    render,
+    ...elementProps
+  } = componentProps;
+  const {
+    store
+  } = useSelectRootContext();
+  const open = useStore(store, selectors.open);
+  const state = {
+    open
+  };
+  const element = useRenderElement('span', componentProps, {
+    state,
+    ref: forwardedRef,
+    props: [{
+      'aria-hidden': true,
+      children: '▼'
+    }, elementProps],
+    stateAttributesMapping: triggerOpenStateMapping
+  });
+  return element;
+});
+if (process.env.NODE_ENV !== "production") SelectIcon.displayName = "SelectIcon";
+
+const stateAttributesMapping$1 = {
+  ...popupStateMapping,
+  ...transitionStatusMapping
+};
+
+/**
+ * An overlay displayed beneath the menu popup.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
+ */
+const SelectBackdrop = /*#__PURE__*/React.forwardRef(function SelectBackdrop(componentProps, forwardedRef) {
+  const {
+    className,
+    render,
+    ...elementProps
+  } = componentProps;
+  const {
+    store
+  } = useSelectRootContext();
+  const open = useStore(store, selectors.open);
+  const mounted = useStore(store, selectors.mounted);
+  const transitionStatus = useStore(store, selectors.transitionStatus);
+  const state = {
+    open,
+    transitionStatus
+  };
+  const element = useRenderElement('div', componentProps, {
+    state,
+    ref: forwardedRef,
+    props: [{
+      role: 'presentation',
+      hidden: !mounted,
+      style: {
+        userSelect: 'none',
+        WebkitUserSelect: 'none'
+      }
+    }, elementProps],
+    stateAttributesMapping: stateAttributesMapping$1
+  });
+  return element;
+});
+if (process.env.NODE_ENV !== "production") SelectBackdrop.displayName = "SelectBackdrop";
+
+const stateAttributesMapping = {
+  ...popupStateMapping,
+  ...transitionStatusMapping
+};
+
+/**
+ * Displays an element positioned against the select popup anchor.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
+ */
+const SelectArrow = /*#__PURE__*/React.forwardRef(function SelectArrow(componentProps, forwardedRef) {
+  const {
+    className,
+    render,
+    ...elementProps
+  } = componentProps;
+  const {
+    store
+  } = useSelectRootContext();
+  const {
+    side,
+    align,
+    arrowRef,
+    arrowStyles,
+    arrowUncentered,
+    alignItemWithTriggerActive
+  } = useSelectPositionerContext();
+  const open = useStore(store, selectors.open, true);
+  const state = {
+    open,
+    side,
+    align,
+    uncentered: arrowUncentered
+  };
+  const element = useRenderElement('div', componentProps, {
+    state,
+    ref: [arrowRef, forwardedRef],
+    props: [{
+      style: arrowStyles,
+      'aria-hidden': true
+    }, elementProps],
+    stateAttributesMapping
+  });
+  if (alignItemWithTriggerActive) {
+    return null;
+  }
+  return element;
+});
+if (process.env.NODE_ENV !== "production") SelectArrow.displayName = "SelectArrow";
+
+/**
+ * @internal
+ */
+const SelectScrollArrow = /*#__PURE__*/React.forwardRef(function SelectScrollArrow(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    direction,
+    keepMounted = false,
+    ...elementProps
+  } = componentProps;
+  const {
+    store,
+    popupRef,
+    listRef,
+    handleScrollArrowVisibility,
+    scrollArrowsMountedCountRef
+  } = useSelectRootContext();
+  const {
+    side,
+    scrollDownArrowRef,
+    scrollUpArrowRef
+  } = useSelectPositionerContext();
+  const visibleSelector = direction === 'up' ? selectors.scrollUpArrowVisible : selectors.scrollDownArrowVisible;
+  const stateVisible = useStore(store, visibleSelector);
+  const openMethod = useStore(store, selectors.openMethod);
+
+  // Scroll arrows are disabled for touch modality as they are a hover-only element.
+  const visible = stateVisible && openMethod !== 'touch';
+  const timeout = useTimeout();
+  const scrollArrowRef = direction === 'up' ? scrollUpArrowRef : scrollDownArrowRef;
+  const {
+    transitionStatus,
+    setMounted
+  } = useTransitionStatus(visible);
+  useIsoLayoutEffect(() => {
+    scrollArrowsMountedCountRef.current += 1;
+    if (!store.state.hasScrollArrows) {
+      store.set('hasScrollArrows', true);
+    }
+    return () => {
+      scrollArrowsMountedCountRef.current = Math.max(0, scrollArrowsMountedCountRef.current - 1);
+      if (scrollArrowsMountedCountRef.current === 0 && store.state.hasScrollArrows) {
+        store.set('hasScrollArrows', false);
+      }
+    };
+  }, [store, scrollArrowsMountedCountRef]);
+  useOpenChangeComplete({
+    open: visible,
+    ref: scrollArrowRef,
+    onComplete() {
+      if (!visible) {
+        setMounted(false);
+      }
+    }
+  });
+  const state = {
+    direction,
+    visible,
+    side,
+    transitionStatus
+  };
+  const defaultProps = {
+    'aria-hidden': true,
+    children: direction === 'up' ? '▲' : '▼',
+    style: {
+      position: 'absolute'
+    },
+    onMouseMove(event) {
+      if (event.movementX === 0 && event.movementY === 0 || timeout.isStarted()) {
+        return;
+      }
+      store.set('activeIndex', null);
+      function scrollNextItem() {
+        const scroller = store.state.listElement ?? popupRef.current;
+        if (!scroller) {
+          return;
+        }
+        store.set('activeIndex', null);
+        handleScrollArrowVisibility();
+        const isScrolledToTop = scroller.scrollTop === 0;
+        const isScrolledToBottom = Math.round(scroller.scrollTop + scroller.clientHeight) >= scroller.scrollHeight;
+        const list = listRef.current;
+
+        // Fallback when there are no items registered yet.
+        if (list.length === 0) {
+          if (direction === 'up') {
+            store.set('scrollUpArrowVisible', !isScrolledToTop);
+          } else {
+            store.set('scrollDownArrowVisible', !isScrolledToBottom);
+          }
+        }
+        if (direction === 'up' && isScrolledToTop || direction === 'down' && isScrolledToBottom) {
+          timeout.clear();
+          return;
+        }
+        if ((store.state.listElement || popupRef.current) && listRef.current && listRef.current.length > 0) {
+          const items = listRef.current;
+          const scrollArrowHeight = scrollArrowRef.current?.offsetHeight || 0;
+          if (direction === 'up') {
+            let firstVisibleIndex = 0;
+            const scrollTop = scroller.scrollTop + scrollArrowHeight;
+            for (let i = 0; i < items.length; i += 1) {
+              const item = items[i];
+              if (item) {
+                const itemTop = item.offsetTop;
+                if (itemTop >= scrollTop) {
+                  firstVisibleIndex = i;
+                  break;
+                }
+              }
+            }
+            const targetIndex = Math.max(0, firstVisibleIndex - 1);
+            if (targetIndex < firstVisibleIndex) {
+              const targetItem = items[targetIndex];
+              if (targetItem) {
+                scroller.scrollTop = Math.max(0, targetItem.offsetTop - scrollArrowHeight);
+              }
+            } else {
+              // Already at the first item; ensure we reach the absolute top to account for group labels.
+              scroller.scrollTop = 0;
+            }
+          } else {
+            let lastVisibleIndex = items.length - 1;
+            const scrollBottom = scroller.scrollTop + scroller.clientHeight - scrollArrowHeight;
+            for (let i = 0; i < items.length; i += 1) {
+              const item = items[i];
+              if (item) {
+                const itemBottom = item.offsetTop + item.offsetHeight;
+                if (itemBottom > scrollBottom) {
+                  lastVisibleIndex = Math.max(0, i - 1);
+                  break;
+                }
+              }
+            }
+            const targetIndex = Math.min(items.length - 1, lastVisibleIndex + 1);
+            if (targetIndex > lastVisibleIndex) {
+              const targetItem = items[targetIndex];
+              if (targetItem) {
+                scroller.scrollTop = targetItem.offsetTop + targetItem.offsetHeight - scroller.clientHeight + scrollArrowHeight;
+              }
+            } else {
+              // Already at the last item; ensure we reach the true bottom.
+              scroller.scrollTop = scroller.scrollHeight - scroller.clientHeight;
+            }
+          }
+        }
+        timeout.start(40, scrollNextItem);
+      }
+      timeout.start(40, scrollNextItem);
+    },
+    onMouseLeave() {
+      timeout.clear();
+    }
+  };
+  const element = useRenderElement('div', componentProps, {
+    ref: [forwardedRef, scrollArrowRef],
+    state,
+    props: [defaultProps, elementProps]
+  });
+  const shouldRender = visible || keepMounted;
+  if (!shouldRender) {
+    return null;
+  }
+  return element;
+});
+if (process.env.NODE_ENV !== "production") SelectScrollArrow.displayName = "SelectScrollArrow";
+
+/**
+ * An element that scrolls the select popup down when hovered. Does not render when using touch input.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
+ */
+const SelectScrollDownArrow = /*#__PURE__*/React.forwardRef(function SelectScrollDownArrow(props, forwardedRef) {
+  return /*#__PURE__*/jsx(SelectScrollArrow, {
+    ...props,
+    ref: forwardedRef,
+    direction: "down"
+  });
+});
+if (process.env.NODE_ENV !== "production") SelectScrollDownArrow.displayName = "SelectScrollDownArrow";
+
+/**
+ * An element that scrolls the select popup up when hovered. Does not render when using touch input.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
+ */
+const SelectScrollUpArrow = /*#__PURE__*/React.forwardRef(function SelectScrollUpArrow(props, forwardedRef) {
+  return /*#__PURE__*/jsx(SelectScrollArrow, {
+    ...props,
+    ref: forwardedRef,
+    direction: "up"
+  });
+});
+if (process.env.NODE_ENV !== "production") SelectScrollUpArrow.displayName = "SelectScrollUpArrow";
+
+var index_parts = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Arrow: SelectArrow,
+  Backdrop: SelectBackdrop,
+  Group: SelectGroup,
+  GroupLabel: SelectGroupLabel,
+  Icon: SelectIcon,
+  Item: SelectItem,
+  ItemIndicator: SelectItemIndicator,
+  ItemText: SelectItemText,
+  Label: SelectLabel,
+  List: SelectList,
+  Popup: SelectPopup,
+  Portal: SelectPortal,
+  Positioner: SelectPositioner,
+  Root: SelectRoot,
+  ScrollDownArrow: SelectScrollDownArrow,
+  ScrollUpArrow: SelectScrollUpArrow,
+  Separator: Separator,
+  Trigger: SelectTrigger,
+  Value: SelectValue
+});
+
 /**
  * Renders a Base UI element.
  *
@@ -4472,4 +4645,4 @@ function useRender(params) {
   return useRenderElement(params.defaultTagName ?? 'div', params, params);
 }
 
-export { index_parts$5 as Autocomplete, index_parts$1 as Combobox, index_parts$4 as Drawer, index_parts$3 as Menu, index_parts as NumberField, index_parts$2 as ScrollArea, Separator, useRender };
+export { index_parts$7 as Autocomplete, index_parts$2 as Combobox, index_parts$6 as Dialog, index_parts$5 as Drawer, index_parts$4 as Menu, index_parts$1 as NumberField, index_parts$3 as ScrollArea, index_parts as Select, Separator, useRender };