@jobber/components 8.21.1 → 8.23.0

package/dist/unstyledPrimitives/index.cjs

@@ -3,19 +3,26 @@
 var React = require('react');
 var useButton = require('../useButton-cjs.js');
 var ComboboxChipRemove = require('../ComboboxChipRemove-cjs.js');
+var resolveAriaLabelledBy = require('../resolveAriaLabelledBy-cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
 var Separator = require('../Separator-cjs.js');
+var DrawerDescription = require('../DrawerDescription-cjs.js');
+var DrawerTitle = require('../DrawerTitle-cjs.js');
 var ScrollAreaViewport = require('../ScrollAreaViewport-cjs.js');
-var MenuSubmenuTrigger = require('../MenuSubmenuTrigger-cjs.js');
 var useRenderElement = require('../useRenderElement-cjs.js');
 var floatingUi_utils_dom = require('../floating-ui.utils.dom-cjs.js');
 var clamp = require('../clamp-cjs.js');
 var InternalBackdrop = require('../InternalBackdrop-cjs.js');
 var ReactDOM = require('react-dom');
+var MenuSubmenuTrigger = require('../MenuSubmenuTrigger-cjs.js');
 var useCompositeListItem = require('../useCompositeListItem-cjs.js');
 var index_esm = require('../index.esm-cjs.js');
 var NumberFieldInput = require('../NumberFieldInput-cjs.js');
-require('../useLabel-cjs.js');
+var SelectGroupLabel = require('../SelectGroupLabel-cjs.js');
+var useLabelableId = require('../useLabelableId-cjs.js');
+var useLabel = require('../useLabel-cjs.js');
+require('../CSPContext-cjs.js');
+require('../ToolbarRootContext-cjs.js');
 require('../floating-ui.react-dom-cjs.js');
 
 function _interopNamespaceDefault(e) {
@@ -108,7 +115,7 @@ function AutocompleteRoot(props) {
       if (highlightedValue == null) {
         setInlineInputValue('');
       } else {
-        setInlineInputValue(ComboboxChipRemove.stringifyAsLabel(highlightedValue, itemToStringValue));
+        setInlineInputValue(resolveAriaLabelledBy.stringifyAsLabel(highlightedValue, itemToStringValue));
       }
     } else {
       setInlineInputValue('');
@@ -147,7 +154,7 @@ function AutocompleteValue(props) {
   });
 }
 
-var index_parts$5 = /*#__PURE__*/Object.freeze({
+var index_parts$7 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Arrow: ComboboxChipRemove.ComboboxArrow,
   Backdrop: ComboboxChipRemove.ComboboxBackdrop,
@@ -174,40 +181,20 @@ var index_parts$5 = /*#__PURE__*/Object.freeze({
   useFilteredItems: ComboboxChipRemove.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__namespace.forwardRef(function DialogDescription(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    id: idProp,
-    ...elementProps
-  } = componentProps;
-  const {
-    store
-  } = ScrollAreaViewport.useDialogRootContext();
-  const id = useButton.useBaseUiId(idProp);
-  store.useSyncedValueWithCleanup('descriptionElementId', id);
-  return useRenderElement.useRenderElement('p', componentProps, {
-    ref: forwardedRef,
-    props: [{
-      id
-    }, elementProps]
-  });
+var index_parts$6 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Backdrop: DrawerDescription.DialogBackdrop,
+  Close: DrawerTitle.DialogClose,
+  Description: DrawerDescription.DialogDescription,
+  Handle: DrawerDescription.DialogHandle,
+  Popup: DrawerDescription.DialogPopup,
+  Portal: ScrollAreaViewport.DialogPortal,
+  Root: ScrollAreaViewport.DialogRoot,
+  Title: DrawerTitle.DialogTitle,
+  Trigger: ScrollAreaViewport.DialogTrigger,
+  Viewport: DrawerDescription.DialogViewport,
+  createHandle: DrawerDescription.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) {
@@ -406,160 +393,6 @@ function createVisualStateStore() {
   };
 }
 
-let DialogViewportDataAttributes = function (DialogViewportDataAttributes) {
-  /**
-   * Present when the dialog is open.
-   */
-  DialogViewportDataAttributes[DialogViewportDataAttributes["open"] = InternalBackdrop.CommonPopupDataAttributes.open] = "open";
-  /**
-   * Present when the dialog is closed.
-   */
-  DialogViewportDataAttributes[DialogViewportDataAttributes["closed"] = InternalBackdrop.CommonPopupDataAttributes.closed] = "closed";
-  /**
-   * Present when the dialog is animating in.
-   */
-  DialogViewportDataAttributes[DialogViewportDataAttributes["startingStyle"] = InternalBackdrop.CommonPopupDataAttributes.startingStyle] = "startingStyle";
-  /**
-   * Present when the dialog is animating out.
-   */
-  DialogViewportDataAttributes[DialogViewportDataAttributes["endingStyle"] = InternalBackdrop.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 = {
-  ...InternalBackdrop.popupStateMapping,
-  ...useButton.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__namespace.forwardRef(function DialogViewport(componentProps, forwardedRef) {
-  const {
-    className,
-    render,
-    children,
-    ...elementProps
-  } = componentProps;
-  const keepMounted = ScrollAreaViewport.useDialogPortalContext();
-  const {
-    store
-  } = ScrollAreaViewport.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.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 ScrollAreaViewport.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, useButton.createChangeEventDetails(useButton.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, useButton.createChangeEventDetails(useButton.imperativeAction, undefined, undefined));
-  }
-
-  /**
-   * Closes the dialog.
-   */
-  close() {
-    this.store.setOpen(false, useButton.createChangeEventDetails(useButton.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 = floatingUi_utils_dom.getComputedStyle(element);
   if (axis === 'vertical') {
@@ -1572,7 +1405,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;
   },
@@ -1877,7 +1710,7 @@ const DrawerSwipeArea = /*#__PURE__*/React__namespace.forwardRef(function Drawer
   return useRenderElement.useRenderElement('div', componentProps, {
     state,
     ref: [forwardedRef, swipeAreaRef, registerTrigger],
-    stateAttributesMapping: stateAttributesMapping$2,
+    stateAttributesMapping: stateAttributesMapping$3,
     props: [{
       role: 'presentation',
       'aria-hidden': true,
@@ -2593,7 +2426,7 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
     lastPointerTypeRef.current = '';
     ignoreNextTouchStartFromPenRef.current = false;
   }
-  return /*#__PURE__*/jsxRuntime.jsx(DialogViewport, {
+  return /*#__PURE__*/jsxRuntime.jsx(DrawerDescription.DialogViewport, {
     ref: forwardedRef,
     className: className,
     render: render,
@@ -2881,13 +2714,13 @@ function shouldDismissFromStartEdge(direction, axis) {
   return null;
 }
 
-var index_parts$4 = /*#__PURE__*/Object.freeze({
+var index_parts$5 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Backdrop: ScrollAreaViewport.DrawerBackdrop,
-  Close: MenuSubmenuTrigger.DrawerClose,
+  Close: DrawerTitle.DrawerClose,
   Content: ScrollAreaViewport.DrawerContent,
-  Description: DrawerDescription,
-  Handle: DialogHandle,
+  Description: DrawerDescription.DrawerDescription,
+  Handle: DrawerDescription.DialogHandle,
   Indent: DrawerIndent,
   IndentBackground: DrawerIndentBackground,
   Popup: ScrollAreaViewport.DrawerPopup,
@@ -2895,10 +2728,10 @@ var index_parts$4 = /*#__PURE__*/Object.freeze({
   Provider: DrawerProvider,
   Root: ScrollAreaViewport.DrawerRoot,
   SwipeArea: DrawerSwipeArea,
-  Title: MenuSubmenuTrigger.DrawerTitle,
+  Title: DrawerTitle.DrawerTitle,
   Trigger: ScrollAreaViewport.DrawerTrigger,
   Viewport: DrawerViewport,
-  createHandle: createDialogHandle
+  createHandle: DrawerDescription.createDialogHandle
 });
 
 /**
@@ -2943,52 +2776,6 @@ const MenuArrow = /*#__PURE__*/React__namespace.forwardRef(function MenuArrow(co
 });
 if (process.env.NODE_ENV !== "production") MenuArrow.displayName = "MenuArrow";
 
-const stateAttributesMapping$1 = {
-  ...InternalBackdrop.popupStateMapping,
-  ...useButton.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__namespace.forwardRef(function MenuBackdrop(componentProps, forwardedRef) {
-  const {
-    className,
-    render,
-    ...elementProps
-  } = componentProps;
-  const {
-    store
-  } = MenuSubmenuTrigger.useMenuRootContext();
-  const open = store.useState('open');
-  const mounted = store.useState('mounted');
-  const transitionStatus = store.useState('transitionStatus');
-  const lastOpenChangeReason = store.useState('lastOpenChangeReason');
-  const contextMenuContext = MenuSubmenuTrigger.useContextMenuRootContext();
-  const state = {
-    open,
-    transitionStatus
-  };
-  return useRenderElement.useRenderElement('div', componentProps, {
-    ref: contextMenuContext?.backdropRef ? [forwardedRef, contextMenuContext.backdropRef] : forwardedRef,
-    state,
-    stateAttributesMapping: stateAttributesMapping$1,
-    props: [{
-      role: 'presentation',
-      hidden: !mounted,
-      style: {
-        pointerEvents: lastOpenChangeReason === useButton.triggerHover ? 'none' : undefined,
-        userSelect: 'none',
-        WebkitUserSelect: 'none'
-      }
-    }, elementProps]
-  });
-});
-if (process.env.NODE_ENV !== "production") MenuBackdrop.displayName = "MenuBackdrop";
-
 const MenuCheckboxItemContext = /*#__PURE__*/React__namespace.createContext(undefined);
 if (process.env.NODE_ENV !== "production") MenuCheckboxItemContext.displayName = "MenuCheckboxItemContext";
 function useMenuCheckboxItemContext() {
@@ -3594,7 +3381,7 @@ let MenuViewportCssVars = /*#__PURE__*/function (MenuViewportCssVars) {
   return MenuViewportCssVars;
 }({});
 
-const stateAttributesMapping = {
+const stateAttributesMapping$2 = {
   activationDirection: value => value ? {
     'data-activation-direction': value
   } : null
@@ -3642,7 +3429,7 @@ const MenuViewport = /*#__PURE__*/React__namespace.forwardRef(function MenuViewp
     props: [elementProps, {
       children: childrenToRender
     }],
-    stateAttributesMapping
+    stateAttributesMapping: stateAttributesMapping$2
   });
 });
 if (process.env.NODE_ENV !== "production") MenuViewport.displayName = "MenuViewport";
@@ -3693,10 +3480,10 @@ 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,
+  Backdrop: MenuSubmenuTrigger.MenuBackdrop,
   CheckboxItem: MenuCheckboxItem,
   CheckboxItemIndicator: MenuCheckboxItemIndicator,
   Group: MenuSubmenuTrigger.MenuGroup,
@@ -4077,7 +3864,7 @@ const ScrollAreaCorner = /*#__PURE__*/React__namespace.forwardRef(function Scrol
 });
 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,
@@ -4087,7 +3874,7 @@ var index_parts$2 = /*#__PURE__*/Object.freeze({
   Viewport: ScrollAreaViewport.ScrollAreaViewport
 });
 
-var index_parts$1 = /*#__PURE__*/Object.freeze({
+var index_parts$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Arrow: ComboboxChipRemove.ComboboxArrow,
   Backdrop: ComboboxChipRemove.ComboboxBackdrop,
@@ -4474,7 +4261,7 @@ const NumberFieldScrubAreaCursor = /*#__PURE__*/React__namespace.forwardRef(func
 });
 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: NumberFieldInput.NumberFieldDecrement,
   Group: NumberFieldInput.NumberFieldGroup,
@@ -4485,6 +4272,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__namespace.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 = useLabelableId.useFieldRootContext();
+  const {
+    store
+  } = SelectGroupLabel.useSelectRootContext();
+  const triggerElement = InternalBackdrop.useStore(store, SelectGroupLabel.selectors.triggerElement);
+  const rootId = InternalBackdrop.useStore(store, SelectGroupLabel.selectors.id);
+  const defaultLabelId = resolveAriaLabelledBy.getDefaultLabelId(rootId);
+  const labelProps = useLabel.useLabel({
+    id: defaultLabelId,
+    fallbackControlId: triggerElement?.id ?? rootId,
+    setLabelId(nextLabelId) {
+      store.set('labelId', nextLabelId);
+    }
+  });
+  return useRenderElement.useRenderElement('div', componentProps, {
+    ref: forwardedRef,
+    state: fieldRootContext.state,
+    props: [labelProps, elementProps],
+    stateAttributesMapping: useLabelableId.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__namespace.forwardRef(function SelectIcon(componentProps, forwardedRef) {
+  const {
+    className,
+    render,
+    ...elementProps
+  } = componentProps;
+  const {
+    store
+  } = SelectGroupLabel.useSelectRootContext();
+  const open = InternalBackdrop.useStore(store, SelectGroupLabel.selectors.open);
+  const state = {
+    open
+  };
+  const element = useRenderElement.useRenderElement('span', componentProps, {
+    state,
+    ref: forwardedRef,
+    props: [{
+      'aria-hidden': true,
+      children: '▼'
+    }, elementProps],
+    stateAttributesMapping: InternalBackdrop.triggerOpenStateMapping
+  });
+  return element;
+});
+if (process.env.NODE_ENV !== "production") SelectIcon.displayName = "SelectIcon";
+
+const stateAttributesMapping$1 = {
+  ...InternalBackdrop.popupStateMapping,
+  ...useButton.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__namespace.forwardRef(function SelectBackdrop(componentProps, forwardedRef) {
+  const {
+    className,
+    render,
+    ...elementProps
+  } = componentProps;
+  const {
+    store
+  } = SelectGroupLabel.useSelectRootContext();
+  const open = InternalBackdrop.useStore(store, SelectGroupLabel.selectors.open);
+  const mounted = InternalBackdrop.useStore(store, SelectGroupLabel.selectors.mounted);
+  const transitionStatus = InternalBackdrop.useStore(store, SelectGroupLabel.selectors.transitionStatus);
+  const state = {
+    open,
+    transitionStatus
+  };
+  const element = useRenderElement.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 = {
+  ...InternalBackdrop.popupStateMapping,
+  ...useButton.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__namespace.forwardRef(function SelectArrow(componentProps, forwardedRef) {
+  const {
+    className,
+    render,
+    ...elementProps
+  } = componentProps;
+  const {
+    store
+  } = SelectGroupLabel.useSelectRootContext();
+  const {
+    side,
+    align,
+    arrowRef,
+    arrowStyles,
+    arrowUncentered,
+    alignItemWithTriggerActive
+  } = SelectGroupLabel.useSelectPositionerContext();
+  const open = InternalBackdrop.useStore(store, SelectGroupLabel.selectors.open, true);
+  const state = {
+    open,
+    side,
+    align,
+    uncentered: arrowUncentered
+  };
+  const element = useRenderElement.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__namespace.forwardRef(function SelectScrollArrow(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    direction,
+    keepMounted = false,
+    ...elementProps
+  } = componentProps;
+  const {
+    store,
+    popupRef,
+    listRef,
+    handleScrollArrowVisibility,
+    scrollArrowsMountedCountRef
+  } = SelectGroupLabel.useSelectRootContext();
+  const {
+    side,
+    scrollDownArrowRef,
+    scrollUpArrowRef
+  } = SelectGroupLabel.useSelectPositionerContext();
+  const visibleSelector = direction === 'up' ? SelectGroupLabel.selectors.scrollUpArrowVisible : SelectGroupLabel.selectors.scrollDownArrowVisible;
+  const stateVisible = InternalBackdrop.useStore(store, visibleSelector);
+  const openMethod = InternalBackdrop.useStore(store, SelectGroupLabel.selectors.openMethod);
+
+  // Scroll arrows are disabled for touch modality as they are a hover-only element.
+  const visible = stateVisible && openMethod !== 'touch';
+  const timeout = useButton.useTimeout();
+  const scrollArrowRef = direction === 'up' ? scrollUpArrowRef : scrollDownArrowRef;
+  const {
+    transitionStatus,
+    setMounted
+  } = useButton.useTransitionStatus(visible);
+  useButton.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]);
+  useButton.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.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__namespace.forwardRef(function SelectScrollDownArrow(props, forwardedRef) {
+  return /*#__PURE__*/jsxRuntime.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__namespace.forwardRef(function SelectScrollUpArrow(props, forwardedRef) {
+  return /*#__PURE__*/jsxRuntime.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: SelectGroupLabel.SelectGroup,
+  GroupLabel: SelectGroupLabel.SelectGroupLabel,
+  Icon: SelectIcon,
+  Item: SelectGroupLabel.SelectItem,
+  ItemIndicator: SelectGroupLabel.SelectItemIndicator,
+  ItemText: SelectGroupLabel.SelectItemText,
+  Label: SelectLabel,
+  List: SelectGroupLabel.SelectList,
+  Popup: SelectGroupLabel.SelectPopup,
+  Portal: SelectGroupLabel.SelectPortal,
+  Positioner: SelectGroupLabel.SelectPositioner,
+  Root: SelectGroupLabel.SelectRoot,
+  ScrollDownArrow: SelectScrollDownArrow,
+  ScrollUpArrow: SelectScrollUpArrow,
+  Separator: Separator.Separator,
+  Trigger: SelectGroupLabel.SelectTrigger,
+  Value: SelectGroupLabel.SelectValue
+});
+
 /**
  * Renders a Base UI element.
  *
@@ -4495,10 +4668,12 @@ function useRender(params) {
 }
 
 exports.Separator = Separator.Separator;
-exports.Autocomplete = index_parts$5;
-exports.Combobox = index_parts$1;
-exports.Drawer = index_parts$4;
-exports.Menu = index_parts$3;
-exports.NumberField = index_parts;
-exports.ScrollArea = index_parts$2;
+exports.Autocomplete = index_parts$7;
+exports.Combobox = index_parts$2;
+exports.Dialog = index_parts$6;
+exports.Drawer = index_parts$5;
+exports.Menu = index_parts$4;
+exports.NumberField = index_parts$1;
+exports.ScrollArea = index_parts$3;
+exports.Select = index_parts;
 exports.useRender = useRender;