@jobber/components 7.11.1 → 7.11.3

package/dist/Autocomplete/index.mjs

@@ -1,5 +1,5 @@
 import React__default, { useState, useRef, useEffect, useCallback, useMemo, forwardRef } from 'react';
-import { u as useFloating, k as useClick, g as useListNavigation, c as useDismiss, d as useInteractions, F as FloatingPortal, i as FloatingFocusManager, l as useTransitionStyles } from '../floating-ui.react-es.js';
+import { u as useFloating, k as useClick, j as useListNavigation, c as useDismiss, d as useInteractions, F as FloatingPortal, h as FloatingFocusManager, l as useTransitionStyles } from '../floating-ui.react-es.js';
 import classnames from 'classnames';
 import { tokens } from '@jobber/design';
 import { useCallbackRef, useDebounce, useSafeLayoutEffect, useIsMounted, useOnKeyDown } from '@jobber/hooks';

package/dist/Menu/Menu.d.ts

@@ -32,6 +32,27 @@ export interface MenuComponent {
     ItemPrefix: typeof MenuItemPrefix;
     ItemSuffix: typeof MenuItemSuffix;
 }
+export declare function Menu(props: MenuProps): ReactElement;
+export declare namespace Menu {
+    var Group: typeof MenuGroup;
+    var GroupLabel: typeof MenuGroupLabel;
+    var Section: typeof MenuSection;
+    var Header: typeof MenuHeader;
+    var HeaderLabel: typeof MenuHeaderLabel;
+    var Item: React.ForwardRefExoticComponent<ComposableMenuItemProps & React.RefAttributes<HTMLElement>>;
+    var Trigger: React.ForwardRefExoticComponent<ComposableMenuTriggerProps & React.RefAttributes<HTMLDivElement>>;
+    var Content: typeof MenuContent;
+    var Separator: typeof MenuSeparator;
+    var RadioGroup: typeof MenuRadioGroup;
+    var RadioItem: React.ForwardRefExoticComponent<ComposableMenuRadioItemProps & React.RefAttributes<HTMLElement>>;
+    var Submenu: typeof MenuSubmenu;
+    var SubmenuTrigger: React.ForwardRefExoticComponent<ComposableMenuSubmenuTriggerProps & React.RefAttributes<HTMLElement>>;
+    var SubmenuContent: typeof MenuSubmenuContent;
+    var ItemIcon: typeof MenuItemIcon;
+    var ItemLabel: typeof MenuItemLabel;
+    var ItemPrefix: typeof MenuItemPrefix;
+    var ItemSuffix: typeof MenuItemSuffix;
+}
 declare const MenuTrigger: React.ForwardRefExoticComponent<ComposableMenuTriggerProps & React.RefAttributes<HTMLDivElement>>;
 declare function MenuContent(props: ComposableMenuContentProps): React.JSX.Element;
 declare function MenuSeparator(props: ComposableMenuSeparatorProps): React.JSX.Element;
@@ -65,5 +86,4 @@ declare function MenuHeader(props: MenuHeaderComposableProps): React.JSX.Element
  * Menu.Header > Menu.HeaderLabel continues to compose onto the new GroupLabel.
  */
 declare function MenuHeaderLabel(props: MenuHeaderLabelComposableProps): React.JSX.Element;
-export declare const Menu: MenuComponent;
 export {};

package/dist/Menu/menuComposableShared.d.ts

@@ -6,10 +6,7 @@ export declare function resolveComposableBaseProps(props: {
     readonly style?: React.CSSProperties;
     readonly UNSAFE_className?: string;
     readonly UNSAFE_style?: React.CSSProperties;
-}): {
-    className: string | undefined;
-    style: React.CSSProperties | undefined;
-};
+}): Pick<import("../utils/mergeUnsafeProps").UnsafeProps, "className" | "style">;
 export declare function hasMenuSlot(children: React.ReactNode, slot: MenuSlotName): boolean;
 export declare function resolveMenuTriggerRender({ children, render, }: {
     readonly children?: React.ReactNode;

package/dist/Menu-cjs.js

@@ -11,8 +11,8 @@ var Icon = require('./Icon-cjs.js');
 var useFormFieldFocus = require('./useFormFieldFocus-cjs.js');
 var maxHeight = require('./maxHeight-cjs.js');
 var floatingUi_reactDom = require('./floating-ui.react-dom-cjs.js');
-var tslib_es6 = require('./tslib.es6-cjs.js');
 var useRenderElement = require('./useRenderElement-cjs.js');
+var tslib_es6 = require('./tslib.es6-cjs.js');
 var BottomSheet = require('./BottomSheet-cjs.js');
 var OverlaySeparator = require('./OverlaySeparator-cjs.js');
 var MenuSubmenuTrigger$1 = require('./MenuSubmenuTrigger-cjs.js');
@@ -200,7 +200,17 @@ function MenuPortal({ children }) {
 
 var styles$1 = {"submenuHeader":"Vw9MFreevMU-","submenuTitle":"wpNMcBuNwwY-","spinning":"nOEBQCC4Cos-"};
 
-var styles = {"wrapper":"fpi0W91w2ag-","floatingContainer":"ba-Kj6mvQUw-","menu":"-DayvgvIcVo-","legacySection":"VsRRunpS6Yo-","separator":"jnggqK3YTIU-","triggerWrapper":"oRQQVVq-yxA-","ariaMenu":"QInUBKqkrl0-","bottomSheetMenuContent":"J3CW8IU48RM-","ariaItem":"bWR8m7-LKg4-","ariaItemNoLeadingSlot":"fzLvI88EH3s-","ariaSection":"PH5vvtLgvXI-","composableGroup":"Q0ssxff-Qo4-","ariaRadioGroup":"_2hYsKO-OHAI-","ariaSectionHeader":"iJjIifpa9bk-","composableGroupHeader":"BklkzNPbJ5Q-","composableGroupLabel":"_5-p9DbyRav4-","sectionHeader":"Bq7pLWj3jm4-","legacyAction":"P4Sdaq0-lZs-","action":"M1BgN-oCmKw-","destructive":"U9ihZZavz9w-","overlay":"_7we5hh6kYs8-","bottomSheetSubmenuPopup":"nf47GCAYI-c-","menuHidden":"cuw8ct7rX6s-","bottomSheetSubmenuBody":"a6uZEXgX8sg-","fullWidth":"_5OJ7B6mFcwk-","screenReaderOnly":"Bzvkz60bwWE-","spinning":"_0-VzuzHdi8o-"};
+var styles = {"wrapper":"fpi0W91w2ag-","floatingContainer":"ba-Kj6mvQUw-","menu":"-DayvgvIcVo-","legacySection":"VsRRunpS6Yo-","separator":"jnggqK3YTIU-","triggerWrapper":"oRQQVVq-yxA-","composableMenu":"atokGnmWVls-","bottomSheetMenuContent":"J3CW8IU48RM-","composableItem":"zSMkwrZodBk-","composableItemNoLeadingSlot":"qbDWOwkPouM-","composableSection":"_353OIWGazfE-","composableGroup":"Q0ssxff-Qo4-","composableRadioGroup":"_2VyPM45lQBE-","composableSectionHeader":"efA-ozx9w0w-","composableGroupHeader":"BklkzNPbJ5Q-","composableGroupLabel":"_5-p9DbyRav4-","sectionHeader":"Bq7pLWj3jm4-","legacyAction":"P4Sdaq0-lZs-","action":"M1BgN-oCmKw-","destructive":"U9ihZZavz9w-","overlay":"_7we5hh6kYs8-","bottomSheetSubmenuPopup":"nf47GCAYI-c-","menuHidden":"cuw8ct7rX6s-","bottomSheetSubmenuBody":"a6uZEXgX8sg-","fullWidth":"_5OJ7B6mFcwk-","screenReaderOnly":"Bzvkz60bwWE-","spinning":"_0-VzuzHdi8o-"};
+
+function mergeUnsafeProps(props) {
+    return useRenderElement.mergeProps({
+        className: props.UNSAFE_className,
+        style: props.UNSAFE_style,
+    }, {
+        className: props.className,
+        style: props.style,
+    });
+}
 
 function assignRef(ref, instance) {
     if (!ref) {
@@ -248,14 +258,10 @@ function stripNativeTypeFromButtonRenderTarget(element) {
 }
 
 // New composable menu pieces prefer standard DOM props, but we still accept the
-// old UNSAFE_* names during the migration window. When both are provided, the
-// standard prop wins because it is the forward-looking API.
+// old UNSAFE_* names during the migration window. Base UI's merge semantics let
+// either API path continue to work while standard props still win on conflicts.
 function resolveComposableBaseProps(props) {
-    var _a, _b;
-    return {
-        className: (_a = props.className) !== null && _a !== void 0 ? _a : props.UNSAFE_className,
-        style: (_b = props.style) !== null && _b !== void 0 ? _b : props.UNSAFE_style,
-    };
+    return mergeUnsafeProps(props);
 }
 // Detects whether a composed item already includes a specific slot so each
 // shell can adjust layout without needing to understand every child shape.
@@ -264,6 +270,9 @@ function hasMenuSlot(children, slot) {
         if (!React.isValidElement(child)) {
             return false;
         }
+        if (typeof child.type === "string" || !("menuSlot" in child.type)) {
+            return false;
+        }
         return child.type.menuSlot === slot;
     });
 }
@@ -302,12 +311,18 @@ function useMenuItemContext() {
 }
 function SharedMenuItemIcon(props) {
     const { variation } = useMenuItemContext();
-    return (React.createElement("div", { "data-menu-slot": "icon" },
+    return (
+    // TODO: Remove this wrapper once Icon can accept the data attributes needed
+    // for Menu slot styling directly.
+    React.createElement("div", { "data-menu-slot": "icon" },
         React.createElement(Icon.Icon, Object.assign({}, props, { color: variation === "destructive" ? "destructive" : props.color }))));
 }
 function SharedMenuItemLabel(props) {
     const { variation } = useMenuItemContext();
-    return (React.createElement("div", { "data-menu-slot": "label" },
+    return (
+    // TODO: Remove this wrapper once Typography can accept the data attributes
+    // needed for Menu slot styling directly.
+    React.createElement("div", { "data-menu-slot": "label" },
         React.createElement(Typography.Typography, { element: "span", size: "base", fontWeight: "semiBold", textColor: variation === "destructive" ? "destructive" : "text" }, props.children)));
 }
 function SharedMenuItemPrefix(props) {
@@ -480,7 +495,7 @@ function handleBottomSheetMenuContainerKeyDown(event) {
 }
 function BottomSheetMenuSurface({ children, className, menuRef, style, }) {
     const { focusModalityRef } = useBottomSheetContext();
-    return (React.createElement("div", { ref: menuRef, className: classnames(styles.ariaMenu, className), role: "menu", tabIndex: -1, onKeyDown: event => {
+    return (React.createElement("div", { ref: menuRef, className: classnames(styles.composableMenu, className), role: "menu", tabIndex: -1, onKeyDown: event => {
             focusModalityRef.current = "keyboard";
             handleBottomSheetMenuContainerKeyDown(event);
         }, style: style }, children));
@@ -559,7 +574,7 @@ function BottomSheetRadioGroup({ children, value, defaultValue, onValueChange, c
                 onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(nextValue);
             },
         } },
-        React.createElement("div", { className: classnames(styles.ariaRadioGroup, resolvedBaseProps.className), style: resolvedBaseProps.style }, children)));
+        React.createElement("div", { className: classnames(styles.composableRadioGroup, resolvedBaseProps.className), style: resolvedBaseProps.style }, children)));
 }
 function BottomSheetGroup(props) {
     const { className, style } = resolveComposableBaseProps(props);
@@ -577,8 +592,8 @@ const BottomSheetItem = React.forwardRef(function BottomSheetItem(props, ref) {
     const { className: itemClassName, style } = resolveComposableBaseProps(props);
     const hasLeadingContent = hasMenuSlot(props.children, "icon") ||
         hasMenuSlot(props.children, "prefix");
-    const className = classnames(styles.action, styles.ariaItem, {
-        [styles.ariaItemNoLeadingSlot]: !hasLeadingContent,
+    const className = classnames(styles.action, styles.composableItem, {
+        [styles.composableItemNoLeadingSlot]: !hasLeadingContent,
     }, {
         [styles.destructive]: props.variation === "destructive",
     }, itemClassName);
@@ -614,8 +629,8 @@ const BottomSheetRadioItem = React.forwardRef(function BottomSheetRadioItem(prop
     const hasCustomSuffix = hasMenuSlot(props.children, "suffix");
     const hasLeadingContent = hasMenuSlot(props.children, "icon") ||
         hasMenuSlot(props.children, "prefix");
-    return (React.createElement("button", Object.assign({ ref: ref, className: classnames(styles.action, styles.ariaItem, {
-            [styles.ariaItemNoLeadingSlot]: !hasLeadingContent,
+    return (React.createElement("button", Object.assign({ ref: ref, className: classnames(styles.action, styles.composableItem, {
+            [styles.composableItemNoLeadingSlot]: !hasLeadingContent,
         }, className), "data-highlighted": isHighlighted ? "" : undefined, style: style, type: "button", role: "menuitemradio", "aria-checked": checked }, interactionProps, { onClick: () => {
             radioGroup === null || radioGroup === void 0 ? void 0 : radioGroup.setValue(props.value);
             if (props.closeOnClick) {
@@ -660,8 +675,8 @@ const BottomSheetSubmenuTrigger = React.forwardRef(function BottomSheetSubmenuTr
     // header can read it the moment it mounts. Prefer the explicit textValue
     // used for type-to-select, and fall back to the rendered text content.
     titleRef.current = textValue !== null && textValue !== void 0 ? textValue : getTextContent(children).trim();
-    return (React.createElement(MenuSubmenuTrigger$1.DrawerTrigger, Object.assign({ ref: ref, role: "menuitem", "aria-haspopup": "menu", "data-highlighted": isHighlighted ? "" : undefined, className: classnames(styles.action, styles.ariaItem, {
-            [styles.ariaItemNoLeadingSlot]: !hasLeadingContent,
+    return (React.createElement(MenuSubmenuTrigger$1.DrawerTrigger, Object.assign({ ref: ref, role: "menuitem", "aria-haspopup": "menu", "data-highlighted": isHighlighted ? "" : undefined, className: classnames(styles.action, styles.composableItem, {
+            [styles.composableItemNoLeadingSlot]: !hasLeadingContent,
         }, resolvedBaseProps.className), style: resolvedBaseProps.style, nativeButton: true }, interactionProps, { render: React.createElement("button", { type: "button" }) }),
         children,
         !hasCustomSuffix ? (React.createElement("div", { "data-menu-slot": "suffix" },
@@ -686,7 +701,7 @@ function BottomSheetSubmenuContent({ children, className, style, UNSAFE_style, U
                 React.createElement(MenuSubmenuTrigger$1.DrawerClose, { "aria-label": title ? `Back to ${title}` : "Back", render: React.createElement(Button.Button, { ariaLabel: title ? `Back to ${title}` : "Back", icon: "arrowLeft", type: "tertiary", variation: "subtle" }) }),
                 title ? (React.createElement("div", { className: styles$1.submenuTitle },
                     React.createElement(Typography.Typography, { element: "span", size: "base", fontWeight: "semiBold", textColor: "text" }, title))) : null),
-            React.createElement(BottomSheetMenuSurface, { menuRef: menuRef, className: classnames(styles.bottomSheetSubmenuBody, styles.ariaSection, resolvedBaseProps.className) }, children))));
+            React.createElement(BottomSheetMenuSurface, { menuRef: menuRef, className: classnames(styles.bottomSheetSubmenuBody, styles.composableSection, resolvedBaseProps.className) }, children))));
 }
 function BottomSheetGroupLabel(props) {
     const { className, style } = resolveComposableBaseProps(props);
@@ -773,7 +788,7 @@ function MenuDropdownContent({ children, style, className, preferredPlacement, U
     const popupStyle = getMenuPopupStyle(resolvedBaseProps.style);
     return (React.createElement(MenuSubmenuTrigger$1.MenuPortal, null,
         React.createElement(MenuSubmenuTrigger$1.MenuPositioner, { className: styles.floatingContainer, style: floatingLayerStyle, align: align, side: side, sideOffset: MENU_OFFSET },
-            React.createElement(MenuSubmenuTrigger$1.MenuPopup, { className: classnames(styles.menu, styles.ariaMenu, resolvedBaseProps.className), style: popupStyle }, children))));
+            React.createElement(MenuSubmenuTrigger$1.MenuPopup, { className: classnames(styles.menu, styles.composableMenu, resolvedBaseProps.className), style: popupStyle }, children))));
 }
 function MenuDropdownRadioGroup({ children, value, defaultValue, onValueChange, className, style, UNSAFE_style, UNSAFE_className, }) {
     const resolvedBaseProps = resolveComposableBaseProps({
@@ -784,7 +799,7 @@ function MenuDropdownRadioGroup({ children, value, defaultValue, onValueChange,
     });
     return (React.createElement(MenuSubmenuTrigger$1.MenuRadioGroup, { value: value, defaultValue: defaultValue, onValueChange: nextValue => {
             onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(String(nextValue));
-        }, className: classnames(styles.ariaRadioGroup, resolvedBaseProps.className), style: resolvedBaseProps.style }, children));
+        }, className: classnames(styles.composableRadioGroup, resolvedBaseProps.className), style: resolvedBaseProps.style }, children));
 }
 function MenuDropdownSeparator({ style, className, UNSAFE_style, UNSAFE_className, }) {
     const resolvedBaseProps = resolveComposableBaseProps({
@@ -805,8 +820,8 @@ const MenuDropdownItem = React.forwardRef(function MenuDropdownItem(props, ref)
     const { textValue } = props;
     const hasLeadingContent = hasMenuSlot(props.children, "icon") ||
         hasMenuSlot(props.children, "prefix");
-    const className = classnames(styles.action, styles.ariaItem, {
-        [styles.ariaItemNoLeadingSlot]: !hasLeadingContent,
+    const className = classnames(styles.action, styles.composableItem, {
+        [styles.composableItemNoLeadingSlot]: !hasLeadingContent,
         [styles.destructive]: props.variation === "destructive",
     }, itemClassName);
     if (props.href) {
@@ -831,8 +846,8 @@ const MenuDropdownRadioItem = React.forwardRef(function MenuDropdownRadioItem(pr
     const hasCustomSuffix = hasMenuSlot(props.children, "suffix");
     const hasLeadingContent = hasMenuSlot(props.children, "icon") ||
         hasMenuSlot(props.children, "prefix");
-    return (React.createElement(MenuSubmenuTrigger$1.MenuRadioItem, { ref: ref, className: classnames(styles.action, styles.ariaItem, {
-            [styles.ariaItemNoLeadingSlot]: !hasLeadingContent,
+    return (React.createElement(MenuSubmenuTrigger$1.MenuRadioItem, { ref: ref, className: classnames(styles.action, styles.composableItem, {
+            [styles.composableItemNoLeadingSlot]: !hasLeadingContent,
         }, className), style: style, value: props.value, label: props.textValue, closeOnClick: props.closeOnClick, nativeButton: true, render: React.createElement("button", { type: "button" }) },
         React.createElement(MenuItemProvider, null,
             props.children,
@@ -849,8 +864,8 @@ const MenuDropdownSubmenuTrigger = React.forwardRef(function MenuDropdownSubmenu
     const hasCustomSuffix = hasMenuSlot(props.children, "suffix");
     const hasLeadingContent = hasMenuSlot(props.children, "icon") ||
         hasMenuSlot(props.children, "prefix");
-    return (React.createElement(MenuSubmenuTrigger$1.MenuSubmenuTrigger, { ref: ref, className: classnames(styles.action, styles.ariaItem, {
-            [styles.ariaItemNoLeadingSlot]: !hasLeadingContent,
+    return (React.createElement(MenuSubmenuTrigger$1.MenuSubmenuTrigger, { ref: ref, className: classnames(styles.action, styles.composableItem, {
+            [styles.composableItemNoLeadingSlot]: !hasLeadingContent,
         }, resolvedBaseProps.className), style: resolvedBaseProps.style, label: props.textValue, nativeButton: true, render: React.createElement("button", { type: "button" }) },
         props.children,
         !hasCustomSuffix ? (React.createElement("div", { "data-menu-slot": "suffix" },
@@ -867,7 +882,7 @@ function MenuDropdownSubmenuContent({ children, className, style, UNSAFE_style,
     const popupStyle = getMenuPopupStyle(resolvedBaseProps.style);
     return (React.createElement(MenuSubmenuTrigger$1.MenuPortal, null,
         React.createElement(MenuSubmenuTrigger$1.MenuPositioner, { className: styles.floatingContainer, style: floatingLayerStyle, align: "start", side: "right", sideOffset: MENU_OFFSET },
-            React.createElement(MenuSubmenuTrigger$1.MenuPopup, { className: classnames(styles.menu, styles.ariaMenu, resolvedBaseProps.className), style: popupStyle }, children))));
+            React.createElement(MenuSubmenuTrigger$1.MenuPopup, { className: classnames(styles.menu, styles.composableMenu, resolvedBaseProps.className), style: popupStyle }, children))));
 }
 function MenuDropdownGroupLabel(props) {
     const { className, style } = resolveComposableBaseProps(props);
@@ -914,7 +929,7 @@ function MenuComposableRoot(props) {
     return (React.createElement(MenuContext.Provider, { value: { isMobile } },
         React.createElement(RootComponent, { onOpenChange: props.onOpenChange, open: props.open, defaultOpen: props.defaultOpen }, props.children)));
 }
-function MenuRoot(props) {
+function Menu(props) {
     if (isLegacy(props)) {
         return React.createElement(MenuLegacy, Object.assign({}, props));
     }
@@ -1011,25 +1026,23 @@ function MenuHeaderLabel(props) {
 }
 // Menu now routes the legacy items-based API locally and owns the new
 // Base UI-backed composable implementation directly.
-const Menu = Object.assign(MenuRoot, {
-    Group: MenuGroup,
-    GroupLabel: MenuGroupLabel,
-    Section: MenuSection,
-    Header: MenuHeader,
-    HeaderLabel: MenuHeaderLabel,
-    Item: MenuItem,
-    Trigger: MenuTrigger,
-    Content: MenuContent,
-    Separator: MenuSeparator,
-    RadioGroup: MenuRadioGroup,
-    RadioItem: MenuRadioItem,
-    Submenu: MenuSubmenu,
-    SubmenuTrigger: MenuSubmenuTrigger,
-    SubmenuContent: MenuSubmenuContent,
-    ItemIcon: MenuItemIcon,
-    ItemLabel: MenuItemLabel,
-    ItemPrefix: MenuItemPrefix,
-    ItemSuffix: MenuItemSuffix,
-});
+Menu.Group = MenuGroup;
+Menu.GroupLabel = MenuGroupLabel;
+Menu.Section = MenuSection;
+Menu.Header = MenuHeader;
+Menu.HeaderLabel = MenuHeaderLabel;
+Menu.Item = MenuItem;
+Menu.Trigger = MenuTrigger;
+Menu.Content = MenuContent;
+Menu.Separator = MenuSeparator;
+Menu.RadioGroup = MenuRadioGroup;
+Menu.RadioItem = MenuRadioItem;
+Menu.Submenu = MenuSubmenu;
+Menu.SubmenuTrigger = MenuSubmenuTrigger;
+Menu.SubmenuContent = MenuSubmenuContent;
+Menu.ItemIcon = MenuItemIcon;
+Menu.ItemLabel = MenuItemLabel;
+Menu.ItemPrefix = MenuItemPrefix;
+Menu.ItemSuffix = MenuItemSuffix;
 
 exports.Menu = Menu;

package/dist/Menu-es.js

@@ -2,18 +2,18 @@ import React__default, { useState, useRef, useId, useMemo } from 'react';
 import { useWindowDimensions, useRefocusOnActivator } from '@jobber/hooks';
 import classnames from 'classnames';
 import { AnimatePresence, motion } from 'framer-motion';
-import { u as useFloating, c as useDismiss, g as useListNavigation, d as useInteractions, F as FloatingPortal } from './floating-ui.react-es.js';
+import { u as useFloating, c as useDismiss, j as useListNavigation, d as useInteractions, F as FloatingPortal } from './floating-ui.react-es.js';
 import { B as Button } from './Button-es.js';
 import { T as Typography } from './Typography-es.js';
 import { I as Icon } from './Icon-es.js';
 import { f as formFieldFocusAttribute } from './useFormFieldFocus-es.js';
 import { c as calculateMaxHeight } from './maxHeight-es.js';
 import { o as offset, f as flip, d as size, b as autoUpdate } from './floating-ui.react-dom-es.js';
-import { _ as __rest } from './tslib.es6-es.js';
 import { m as mergeProps } from './useRenderElement-es.js';
+import { _ as __rest } from './tslib.es6-es.js';
 import { B as BottomSheet } from './BottomSheet-es.js';
 import { O as OverlaySeparator } from './OverlaySeparator-es.js';
-import { D as DrawerTrigger, a as DrawerTitle, b as DrawerClose, M as MenuTrigger$1, c as MenuLinkItem, d as MenuItem$1, e as MenuRadioItem$1, f as MenuRadioItemIndicator, g as MenuSubmenuTrigger$1, h as MenuRoot$1, i as MenuPortal$1, j as MenuPositioner, k as MenuPopup, l as MenuRadioGroup$1, m as MenuGroup$1, n as MenuSubmenuRoot, o as MenuGroupLabel$1 } from './MenuSubmenuTrigger-es.js';
+import { D as DrawerTrigger, a as DrawerTitle, b as DrawerClose, M as MenuTrigger$1, c as MenuLinkItem, d as MenuItem$1, e as MenuRadioItem$1, f as MenuRadioItemIndicator, g as MenuSubmenuTrigger$1, h as MenuRoot, i as MenuPortal$1, j as MenuPositioner, k as MenuPopup, l as MenuRadioGroup$1, m as MenuGroup$1, n as MenuSubmenuRoot, o as MenuGroupLabel$1 } from './MenuSubmenuTrigger-es.js';
 
 var styles$2 = {"wrapper":"h-nk89U2n6Q-","floatingContainer":"krpkWzoaVcc-","menu":"_7sU7mp1w0jM-","legacySection":"_4x-vvEmn4gM-","separator":"i0QNcs4S-wk-","triggerWrapper":"_7CsejipGrzM-","ariaMenu":"bO7lGVQC42c-","ariaItem":"u6fDgbWmPck-","ariaSection":"-TSNrZBKZJI-","ariaSectionHeader":"zs7dS2pKjEw-","sectionHeader":"MZJgunQcmdQ-","legacyAction":"_-1GOlrzd098-","action":"NYXV5w4pd0c-","destructive":"baYK2zQ6-GA-","overlay":"A7T14ALVEKg-","fullWidth":"Lgbn9IRPI5Y-","screenReaderOnly":"o-ps580KdWI-","spinning":"f1oTdSTeUOM-"};
 
@@ -198,7 +198,17 @@ function MenuPortal({ children }) {
 
 var styles$1 = {"submenuHeader":"Vw9MFreevMU-","submenuTitle":"wpNMcBuNwwY-","spinning":"nOEBQCC4Cos-"};
 
-var styles = {"wrapper":"fpi0W91w2ag-","floatingContainer":"ba-Kj6mvQUw-","menu":"-DayvgvIcVo-","legacySection":"VsRRunpS6Yo-","separator":"jnggqK3YTIU-","triggerWrapper":"oRQQVVq-yxA-","ariaMenu":"QInUBKqkrl0-","bottomSheetMenuContent":"J3CW8IU48RM-","ariaItem":"bWR8m7-LKg4-","ariaItemNoLeadingSlot":"fzLvI88EH3s-","ariaSection":"PH5vvtLgvXI-","composableGroup":"Q0ssxff-Qo4-","ariaRadioGroup":"_2hYsKO-OHAI-","ariaSectionHeader":"iJjIifpa9bk-","composableGroupHeader":"BklkzNPbJ5Q-","composableGroupLabel":"_5-p9DbyRav4-","sectionHeader":"Bq7pLWj3jm4-","legacyAction":"P4Sdaq0-lZs-","action":"M1BgN-oCmKw-","destructive":"U9ihZZavz9w-","overlay":"_7we5hh6kYs8-","bottomSheetSubmenuPopup":"nf47GCAYI-c-","menuHidden":"cuw8ct7rX6s-","bottomSheetSubmenuBody":"a6uZEXgX8sg-","fullWidth":"_5OJ7B6mFcwk-","screenReaderOnly":"Bzvkz60bwWE-","spinning":"_0-VzuzHdi8o-"};
+var styles = {"wrapper":"fpi0W91w2ag-","floatingContainer":"ba-Kj6mvQUw-","menu":"-DayvgvIcVo-","legacySection":"VsRRunpS6Yo-","separator":"jnggqK3YTIU-","triggerWrapper":"oRQQVVq-yxA-","composableMenu":"atokGnmWVls-","bottomSheetMenuContent":"J3CW8IU48RM-","composableItem":"zSMkwrZodBk-","composableItemNoLeadingSlot":"qbDWOwkPouM-","composableSection":"_353OIWGazfE-","composableGroup":"Q0ssxff-Qo4-","composableRadioGroup":"_2VyPM45lQBE-","composableSectionHeader":"efA-ozx9w0w-","composableGroupHeader":"BklkzNPbJ5Q-","composableGroupLabel":"_5-p9DbyRav4-","sectionHeader":"Bq7pLWj3jm4-","legacyAction":"P4Sdaq0-lZs-","action":"M1BgN-oCmKw-","destructive":"U9ihZZavz9w-","overlay":"_7we5hh6kYs8-","bottomSheetSubmenuPopup":"nf47GCAYI-c-","menuHidden":"cuw8ct7rX6s-","bottomSheetSubmenuBody":"a6uZEXgX8sg-","fullWidth":"_5OJ7B6mFcwk-","screenReaderOnly":"Bzvkz60bwWE-","spinning":"_0-VzuzHdi8o-"};
+
+function mergeUnsafeProps(props) {
+    return mergeProps({
+        className: props.UNSAFE_className,
+        style: props.UNSAFE_style,
+    }, {
+        className: props.className,
+        style: props.style,
+    });
+}
 
 function assignRef(ref, instance) {
     if (!ref) {
@@ -246,14 +256,10 @@ function stripNativeTypeFromButtonRenderTarget(element) {
 }
 
 // New composable menu pieces prefer standard DOM props, but we still accept the
-// old UNSAFE_* names during the migration window. When both are provided, the
-// standard prop wins because it is the forward-looking API.
+// old UNSAFE_* names during the migration window. Base UI's merge semantics let
+// either API path continue to work while standard props still win on conflicts.
 function resolveComposableBaseProps(props) {
-    var _a, _b;
-    return {
-        className: (_a = props.className) !== null && _a !== void 0 ? _a : props.UNSAFE_className,
-        style: (_b = props.style) !== null && _b !== void 0 ? _b : props.UNSAFE_style,
-    };
+    return mergeUnsafeProps(props);
 }
 // Detects whether a composed item already includes a specific slot so each
 // shell can adjust layout without needing to understand every child shape.
@@ -262,6 +268,9 @@ function hasMenuSlot(children, slot) {
         if (!React__default.isValidElement(child)) {
             return false;
         }
+        if (typeof child.type === "string" || !("menuSlot" in child.type)) {
+            return false;
+        }
         return child.type.menuSlot === slot;
     });
 }
@@ -300,12 +309,18 @@ function useMenuItemContext() {
 }
 function SharedMenuItemIcon(props) {
     const { variation } = useMenuItemContext();
-    return (React__default.createElement("div", { "data-menu-slot": "icon" },
+    return (
+    // TODO: Remove this wrapper once Icon can accept the data attributes needed
+    // for Menu slot styling directly.
+    React__default.createElement("div", { "data-menu-slot": "icon" },
         React__default.createElement(Icon, Object.assign({}, props, { color: variation === "destructive" ? "destructive" : props.color }))));
 }
 function SharedMenuItemLabel(props) {
     const { variation } = useMenuItemContext();
-    return (React__default.createElement("div", { "data-menu-slot": "label" },
+    return (
+    // TODO: Remove this wrapper once Typography can accept the data attributes
+    // needed for Menu slot styling directly.
+    React__default.createElement("div", { "data-menu-slot": "label" },
         React__default.createElement(Typography, { element: "span", size: "base", fontWeight: "semiBold", textColor: variation === "destructive" ? "destructive" : "text" }, props.children)));
 }
 function SharedMenuItemPrefix(props) {
@@ -478,7 +493,7 @@ function handleBottomSheetMenuContainerKeyDown(event) {
 }
 function BottomSheetMenuSurface({ children, className, menuRef, style, }) {
     const { focusModalityRef } = useBottomSheetContext();
-    return (React__default.createElement("div", { ref: menuRef, className: classnames(styles.ariaMenu, className), role: "menu", tabIndex: -1, onKeyDown: event => {
+    return (React__default.createElement("div", { ref: menuRef, className: classnames(styles.composableMenu, className), role: "menu", tabIndex: -1, onKeyDown: event => {
             focusModalityRef.current = "keyboard";
             handleBottomSheetMenuContainerKeyDown(event);
         }, style: style }, children));
@@ -557,7 +572,7 @@ function BottomSheetRadioGroup({ children, value, defaultValue, onValueChange, c
                 onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(nextValue);
             },
         } },
-        React__default.createElement("div", { className: classnames(styles.ariaRadioGroup, resolvedBaseProps.className), style: resolvedBaseProps.style }, children)));
+        React__default.createElement("div", { className: classnames(styles.composableRadioGroup, resolvedBaseProps.className), style: resolvedBaseProps.style }, children)));
 }
 function BottomSheetGroup(props) {
     const { className, style } = resolveComposableBaseProps(props);
@@ -575,8 +590,8 @@ const BottomSheetItem = React__default.forwardRef(function BottomSheetItem(props
     const { className: itemClassName, style } = resolveComposableBaseProps(props);
     const hasLeadingContent = hasMenuSlot(props.children, "icon") ||
         hasMenuSlot(props.children, "prefix");
-    const className = classnames(styles.action, styles.ariaItem, {
-        [styles.ariaItemNoLeadingSlot]: !hasLeadingContent,
+    const className = classnames(styles.action, styles.composableItem, {
+        [styles.composableItemNoLeadingSlot]: !hasLeadingContent,
     }, {
         [styles.destructive]: props.variation === "destructive",
     }, itemClassName);
@@ -612,8 +627,8 @@ const BottomSheetRadioItem = React__default.forwardRef(function BottomSheetRadio
     const hasCustomSuffix = hasMenuSlot(props.children, "suffix");
     const hasLeadingContent = hasMenuSlot(props.children, "icon") ||
         hasMenuSlot(props.children, "prefix");
-    return (React__default.createElement("button", Object.assign({ ref: ref, className: classnames(styles.action, styles.ariaItem, {
-            [styles.ariaItemNoLeadingSlot]: !hasLeadingContent,
+    return (React__default.createElement("button", Object.assign({ ref: ref, className: classnames(styles.action, styles.composableItem, {
+            [styles.composableItemNoLeadingSlot]: !hasLeadingContent,
         }, className), "data-highlighted": isHighlighted ? "" : undefined, style: style, type: "button", role: "menuitemradio", "aria-checked": checked }, interactionProps, { onClick: () => {
             radioGroup === null || radioGroup === void 0 ? void 0 : radioGroup.setValue(props.value);
             if (props.closeOnClick) {
@@ -658,8 +673,8 @@ const BottomSheetSubmenuTrigger = React__default.forwardRef(function BottomSheet
     // header can read it the moment it mounts. Prefer the explicit textValue
     // used for type-to-select, and fall back to the rendered text content.
     titleRef.current = textValue !== null && textValue !== void 0 ? textValue : getTextContent(children).trim();
-    return (React__default.createElement(DrawerTrigger, Object.assign({ ref: ref, role: "menuitem", "aria-haspopup": "menu", "data-highlighted": isHighlighted ? "" : undefined, className: classnames(styles.action, styles.ariaItem, {
-            [styles.ariaItemNoLeadingSlot]: !hasLeadingContent,
+    return (React__default.createElement(DrawerTrigger, Object.assign({ ref: ref, role: "menuitem", "aria-haspopup": "menu", "data-highlighted": isHighlighted ? "" : undefined, className: classnames(styles.action, styles.composableItem, {
+            [styles.composableItemNoLeadingSlot]: !hasLeadingContent,
         }, resolvedBaseProps.className), style: resolvedBaseProps.style, nativeButton: true }, interactionProps, { render: React__default.createElement("button", { type: "button" }) }),
         children,
         !hasCustomSuffix ? (React__default.createElement("div", { "data-menu-slot": "suffix" },
@@ -684,7 +699,7 @@ function BottomSheetSubmenuContent({ children, className, style, UNSAFE_style, U
                 React__default.createElement(DrawerClose, { "aria-label": title ? `Back to ${title}` : "Back", render: React__default.createElement(Button, { ariaLabel: title ? `Back to ${title}` : "Back", icon: "arrowLeft", type: "tertiary", variation: "subtle" }) }),
                 title ? (React__default.createElement("div", { className: styles$1.submenuTitle },
                     React__default.createElement(Typography, { element: "span", size: "base", fontWeight: "semiBold", textColor: "text" }, title))) : null),
-            React__default.createElement(BottomSheetMenuSurface, { menuRef: menuRef, className: classnames(styles.bottomSheetSubmenuBody, styles.ariaSection, resolvedBaseProps.className) }, children))));
+            React__default.createElement(BottomSheetMenuSurface, { menuRef: menuRef, className: classnames(styles.bottomSheetSubmenuBody, styles.composableSection, resolvedBaseProps.className) }, children))));
 }
 function BottomSheetGroupLabel(props) {
     const { className, style } = resolveComposableBaseProps(props);
@@ -743,7 +758,7 @@ function MenuDropdownRoot({ children, onOpenChange, open, defaultOpen, }) {
                 (_a = actionsRef.current) === null || _a === void 0 ? void 0 : _a.close();
             },
         } },
-        React__default.createElement(MenuRoot$1, { actionsRef: actionsRef, open: open, defaultOpen: defaultOpen, onOpenChange: isOpen => {
+        React__default.createElement(MenuRoot, { actionsRef: actionsRef, open: open, defaultOpen: defaultOpen, onOpenChange: isOpen => {
                 onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(isOpen);
             } }, children)));
 }
@@ -771,7 +786,7 @@ function MenuDropdownContent({ children, style, className, preferredPlacement, U
     const popupStyle = getMenuPopupStyle(resolvedBaseProps.style);
     return (React__default.createElement(MenuPortal$1, null,
         React__default.createElement(MenuPositioner, { className: styles.floatingContainer, style: floatingLayerStyle, align: align, side: side, sideOffset: MENU_OFFSET },
-            React__default.createElement(MenuPopup, { className: classnames(styles.menu, styles.ariaMenu, resolvedBaseProps.className), style: popupStyle }, children))));
+            React__default.createElement(MenuPopup, { className: classnames(styles.menu, styles.composableMenu, resolvedBaseProps.className), style: popupStyle }, children))));
 }
 function MenuDropdownRadioGroup({ children, value, defaultValue, onValueChange, className, style, UNSAFE_style, UNSAFE_className, }) {
     const resolvedBaseProps = resolveComposableBaseProps({
@@ -782,7 +797,7 @@ function MenuDropdownRadioGroup({ children, value, defaultValue, onValueChange,
     });
     return (React__default.createElement(MenuRadioGroup$1, { value: value, defaultValue: defaultValue, onValueChange: nextValue => {
             onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(String(nextValue));
-        }, className: classnames(styles.ariaRadioGroup, resolvedBaseProps.className), style: resolvedBaseProps.style }, children));
+        }, className: classnames(styles.composableRadioGroup, resolvedBaseProps.className), style: resolvedBaseProps.style }, children));
 }
 function MenuDropdownSeparator({ style, className, UNSAFE_style, UNSAFE_className, }) {
     const resolvedBaseProps = resolveComposableBaseProps({
@@ -803,8 +818,8 @@ const MenuDropdownItem = React__default.forwardRef(function MenuDropdownItem(pro
     const { textValue } = props;
     const hasLeadingContent = hasMenuSlot(props.children, "icon") ||
         hasMenuSlot(props.children, "prefix");
-    const className = classnames(styles.action, styles.ariaItem, {
-        [styles.ariaItemNoLeadingSlot]: !hasLeadingContent,
+    const className = classnames(styles.action, styles.composableItem, {
+        [styles.composableItemNoLeadingSlot]: !hasLeadingContent,
         [styles.destructive]: props.variation === "destructive",
     }, itemClassName);
     if (props.href) {
@@ -829,8 +844,8 @@ const MenuDropdownRadioItem = React__default.forwardRef(function MenuDropdownRad
     const hasCustomSuffix = hasMenuSlot(props.children, "suffix");
     const hasLeadingContent = hasMenuSlot(props.children, "icon") ||
         hasMenuSlot(props.children, "prefix");
-    return (React__default.createElement(MenuRadioItem$1, { ref: ref, className: classnames(styles.action, styles.ariaItem, {
-            [styles.ariaItemNoLeadingSlot]: !hasLeadingContent,
+    return (React__default.createElement(MenuRadioItem$1, { ref: ref, className: classnames(styles.action, styles.composableItem, {
+            [styles.composableItemNoLeadingSlot]: !hasLeadingContent,
         }, className), style: style, value: props.value, label: props.textValue, closeOnClick: props.closeOnClick, nativeButton: true, render: React__default.createElement("button", { type: "button" }) },
         React__default.createElement(MenuItemProvider, null,
             props.children,
@@ -847,8 +862,8 @@ const MenuDropdownSubmenuTrigger = React__default.forwardRef(function MenuDropdo
     const hasCustomSuffix = hasMenuSlot(props.children, "suffix");
     const hasLeadingContent = hasMenuSlot(props.children, "icon") ||
         hasMenuSlot(props.children, "prefix");
-    return (React__default.createElement(MenuSubmenuTrigger$1, { ref: ref, className: classnames(styles.action, styles.ariaItem, {
-            [styles.ariaItemNoLeadingSlot]: !hasLeadingContent,
+    return (React__default.createElement(MenuSubmenuTrigger$1, { ref: ref, className: classnames(styles.action, styles.composableItem, {
+            [styles.composableItemNoLeadingSlot]: !hasLeadingContent,
         }, resolvedBaseProps.className), style: resolvedBaseProps.style, label: props.textValue, nativeButton: true, render: React__default.createElement("button", { type: "button" }) },
         props.children,
         !hasCustomSuffix ? (React__default.createElement("div", { "data-menu-slot": "suffix" },
@@ -865,7 +880,7 @@ function MenuDropdownSubmenuContent({ children, className, style, UNSAFE_style,
     const popupStyle = getMenuPopupStyle(resolvedBaseProps.style);
     return (React__default.createElement(MenuPortal$1, null,
         React__default.createElement(MenuPositioner, { className: styles.floatingContainer, style: floatingLayerStyle, align: "start", side: "right", sideOffset: MENU_OFFSET },
-            React__default.createElement(MenuPopup, { className: classnames(styles.menu, styles.ariaMenu, resolvedBaseProps.className), style: popupStyle }, children))));
+            React__default.createElement(MenuPopup, { className: classnames(styles.menu, styles.composableMenu, resolvedBaseProps.className), style: popupStyle }, children))));
 }
 function MenuDropdownGroupLabel(props) {
     const { className, style } = resolveComposableBaseProps(props);
@@ -912,7 +927,7 @@ function MenuComposableRoot(props) {
     return (React__default.createElement(MenuContext.Provider, { value: { isMobile } },
         React__default.createElement(RootComponent, { onOpenChange: props.onOpenChange, open: props.open, defaultOpen: props.defaultOpen }, props.children)));
 }
-function MenuRoot(props) {
+function Menu(props) {
     if (isLegacy(props)) {
         return React__default.createElement(MenuLegacy, Object.assign({}, props));
     }
@@ -1009,25 +1024,23 @@ function MenuHeaderLabel(props) {
 }
 // Menu now routes the legacy items-based API locally and owns the new
 // Base UI-backed composable implementation directly.
-const Menu = Object.assign(MenuRoot, {
-    Group: MenuGroup,
-    GroupLabel: MenuGroupLabel,
-    Section: MenuSection,
-    Header: MenuHeader,
-    HeaderLabel: MenuHeaderLabel,
-    Item: MenuItem,
-    Trigger: MenuTrigger,
-    Content: MenuContent,
-    Separator: MenuSeparator,
-    RadioGroup: MenuRadioGroup,
-    RadioItem: MenuRadioItem,
-    Submenu: MenuSubmenu,
-    SubmenuTrigger: MenuSubmenuTrigger,
-    SubmenuContent: MenuSubmenuContent,
-    ItemIcon: MenuItemIcon,
-    ItemLabel: MenuItemLabel,
-    ItemPrefix: MenuItemPrefix,
-    ItemSuffix: MenuItemSuffix,
-});
+Menu.Group = MenuGroup;
+Menu.GroupLabel = MenuGroupLabel;
+Menu.Section = MenuSection;
+Menu.Header = MenuHeader;
+Menu.HeaderLabel = MenuHeaderLabel;
+Menu.Item = MenuItem;
+Menu.Trigger = MenuTrigger;
+Menu.Content = MenuContent;
+Menu.Separator = MenuSeparator;
+Menu.RadioGroup = MenuRadioGroup;
+Menu.RadioItem = MenuRadioItem;
+Menu.Submenu = MenuSubmenu;
+Menu.SubmenuTrigger = MenuSubmenuTrigger;
+Menu.SubmenuContent = MenuSubmenuContent;
+Menu.ItemIcon = MenuItemIcon;
+Menu.ItemLabel = MenuItemLabel;
+Menu.ItemPrefix = MenuItemPrefix;
+Menu.ItemSuffix = MenuItemSuffix;
 
 export { Menu as M };

package/dist/Modal/index.mjs

@@ -7,7 +7,7 @@ import { H as Heading } from '../Heading-es.js';
 import { B as Button } from '../Button-es.js';
 import { B as ButtonDismiss } from '../ButtonDismiss-es.js';
 import { n as noop } from '../noop-es.js';
-import { b as useFloatingNodeId, u as useFloating, c as useDismiss, h as useRole, d as useInteractions, a as useFloatingParentNodeId, e as FloatingTree, f as FloatingNode, F as FloatingPortal, i as FloatingFocusManager, j as FloatingOverlay } from '../floating-ui.react-es.js';
+import { b as useFloatingNodeId, u as useFloating, c as useDismiss, g as useRole, d as useInteractions, a as useFloatingParentNodeId, e as FloatingTree, f as FloatingNode, F as FloatingPortal, h as FloatingFocusManager, i as FloatingOverlay } from '../floating-ui.react-es.js';
 import { b as identity } from '../identity-es.js';
 import { A as AtlantisPortalContent } from '../AtlantisPortalContent-es.js';
 import '../Typography-es.js';

package/dist/docs/AnimatedPresence/AnimatedPresence.md

@@ -71,4 +71,4 @@ example.
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `initial` | `boolean` | No | — | Whether or not to animate the children on mount. By default it's set to false. |
-| `transition` | `"fromBottom" | "fromTop" | "fromLeft" | "fromRight" | "popIn" | "fromLeftToRight" | "fromRightToLeft" | "fade"` | No | — | The type of transition you can use. |
+| `transition` | `"fade" | "fromBottom" | "fromLeft" | "fromLeftToRight" | "fromRight" | "fromRightToLeft" | "fromTop" | "popIn"` | No | — | The type of transition you can use. |

package/dist/docs/Autocomplete/AutocompleteV1.md

@@ -1323,7 +1323,7 @@ is, focus the extra element and if not it will focus the input.
 | `onFocus` | `(event?: FocusEvent<Element, Element>) => void` | No | — | Focus callback. |
 | `prefix` | `Affix` | No | — | Adds a prefix label and icon to the field |
 | `ref` | `Ref<InputTextRef>` | No | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (... |
-| `size` | `"small" | "large"` | No | — | Adjusts the interface to either have small or large spacing. |
+| `size` | `"large" | "small"` | No | — | Adjusts the interface to either have small or large spacing. |
 | `suffix` | `{ onClick: () => void; readonly ariaLabel: string; readonly icon: IconNames; readonly label?: string; } | { onClick?: never; ariaLabel?: never; readonly label?: string; readonly icon?: IconNames; }` | No | — | Adds a suffix label and icon with an optional action to the field |
 | `validations` | `RegisterOptions` | No | — | Validations to run on the input. |
 | `version` | `1` | No | `1` | Version of the component to use. |

package/dist/docs/Autocomplete/AutocompleteV2.md

@@ -811,7 +811,7 @@ This is not yet implemented fully. Avoid using.
 | `prefix` | `Affix` | No | — | Adds a prefix label and icon to the field. |
 | `readOnly` | `boolean` | No | — | Whether the input is read-only (HTML standard casing). |
 | `ref` | `Ref<HTMLInputElement | HTMLTextAreaElement>` | No | — |  |
-| `size` | `"small" | "large"` | No | — | Adjusts the interface to either have small or large spacing. |
+| `size` | `"large" | "small"` | No | — | Adjusts the interface to either have small or large spacing. |
 | `suffix` | `{ onClick: () => void; readonly ariaLabel: string; readonly icon: IconNames; readonly label?: string; } | { onClick?: never; ariaLabel?: never; readonly label?: string; readonly icon?: IconNames; }` | No | — | Adds a suffix label and icon with an optional action to the field. |
 | `UNSAFE_className` | `{ menu?: string; option?: string; section?: string; action?: string; input?: string; header?: string; footer?: string; selection?: string; }` | No | — | **Use at your own risk:** Custom class names for specific elements. This should only be used as a **last resort**. Us... |
 | `UNSAFE_styles` | `{ menu?: CSSProperties; option?: CSSProperties; section?: CSSProperties; action?: CSSProperties; input?: CSSProperties; header?: CSSProperties; footer?: CSSProperties; selection?: CSSProperties; }` | No | — | **Use at your own risk:** Custom style for specific elements. This should only be used as a **last resort**. Using th... |