@jobber/components 7.11.2 → 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/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);

package/dist/Menu-es.js

@@ -2,15 +2,15 @@ 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, 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';
@@ -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);
@@ -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);

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/floating-ui.react-es.js

@@ -3233,4 +3233,4 @@ function useTransitionStyles(context, props) {
   };
 }
 
-export { FloatingPortal as F, useFloatingParentNodeId as a, useFloatingNodeId as b, useDismiss as c, useInteractions as d, FloatingTree as e, FloatingNode as f, useListNavigation as g, useRole as h, FloatingFocusManager as i, FloatingOverlay as j, useClick as k, useTransitionStyles as l, FloatingArrow as m, useFloating as u };
+export { FloatingPortal as F, useFloatingParentNodeId as a, useFloatingNodeId as b, useDismiss as c, useInteractions as d, FloatingTree as e, FloatingNode as f, useRole as g, FloatingFocusManager as h, FloatingOverlay as i, useListNavigation as j, useClick as k, useTransitionStyles as l, FloatingArrow as m, useFloating as u };

package/dist/styles.css

@@ -3501,7 +3501,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   outline: none;
 }
 
-.QInUBKqkrl0- {
+.atokGnmWVls- {
   display: grid;
   max-height: inherit;
   grid-template-columns: auto 1fr auto;
@@ -3521,7 +3521,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   padding-bottom: var(--menu-space);
 }
 
-.bWR8m7-LKg4- {
+.zSMkwrZodBk- {
   display: grid;
   grid-template-columns: subgrid;
   grid-column: 1 / -1;
@@ -3532,8 +3532,8 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   gap: var(--menu-item-gap);
 }
 
-.bWR8m7-LKg4- > [data-menu-slot="icon"],
-.bWR8m7-LKg4- > [data-menu-slot="prefix"] {
+.zSMkwrZodBk- > [data-menu-slot="icon"],
+.zSMkwrZodBk- > [data-menu-slot="prefix"] {
   display: -ms-inline-flexbox;
   display: inline-flex;
   -ms-flex-align: center;
@@ -3543,18 +3543,18 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   grid-row-start: 1;
 }
 
-.bWR8m7-LKg4- > [data-menu-slot="label"] {
+.zSMkwrZodBk- > [data-menu-slot="label"] {
   grid-column-start: 2;
   width: 100%;
   min-width: 0;
   justify-self: start;
 }
 
-.fzLvI88EH3s- > [data-menu-slot="label"] {
+.qbDWOwkPouM- > [data-menu-slot="label"] {
   grid-column: 1 / 3;
 }
 
-.bWR8m7-LKg4- > [data-menu-slot="suffix"] {
+.zSMkwrZodBk- > [data-menu-slot="suffix"] {
   display: -ms-inline-flexbox;
   display: inline-flex;
   -ms-flex-align: center;
@@ -3568,11 +3568,11 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   min-width: calc(var(--base-unit) * 1.5);
 }
 
-.bWR8m7-LKg4- > [data-menu-slot="suffix"][data-unchecked] {
+.zSMkwrZodBk- > [data-menu-slot="suffix"][data-unchecked] {
   visibility: hidden;
 }
 
-.PH5vvtLgvXI-,
+._353OIWGazfE-,
 .Q0ssxff-Qo4- {
   display: grid;
   grid-template-columns: subgrid;
@@ -3580,25 +3580,25 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   grid-column-start: 1;
 }
 
-._2hYsKO-OHAI- {
+._2VyPM45lQBE- {
   display: grid;
   grid-template-columns: subgrid;
   grid-column: 1 / -1;
   grid-column-start: 1;
 }
 
-.QInUBKqkrl0- .PH5vvtLgvXI-:not(:first-child),
-.QInUBKqkrl0- .Q0ssxff-Qo4-:not(:first-child) {
+.atokGnmWVls- ._353OIWGazfE-:not(:first-child),
+.atokGnmWVls- .Q0ssxff-Qo4-:not(:first-child) {
   margin-top: 8px;
   margin-top: var(--space-small);
 }
 
-.QInUBKqkrl0- .jnggqK3YTIU- + .PH5vvtLgvXI-,
-.QInUBKqkrl0- .jnggqK3YTIU- + .Q0ssxff-Qo4- {
+.atokGnmWVls- .jnggqK3YTIU- + ._353OIWGazfE-,
+.atokGnmWVls- .jnggqK3YTIU- + .Q0ssxff-Qo4- {
   margin-top: 0;
 }
 
-.iJjIifpa9bk-,
+.efA-ozx9w0w-,
 .BklkzNPbJ5Q- {
   grid-column: 1 / -1;
   grid-column-start: 1;
@@ -3668,7 +3668,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   -webkit-tap-highlight-color: transparent;
 }
 
-.fzLvI88EH3s- {
+.qbDWOwkPouM- {
   --menu-item-padding-right: var(--space-smaller);
 }
 

package/dist/utils/mergeUnsafeProps.d.ts

@@ -0,0 +1,8 @@
+import type { CSSProperties } from "react";
+export interface UnsafeProps {
+    readonly className?: string;
+    readonly style?: CSSProperties;
+    readonly UNSAFE_className?: string;
+    readonly UNSAFE_style?: CSSProperties;
+}
+export declare function mergeUnsafeProps(props: UnsafeProps): Pick<UnsafeProps, "className" | "style">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "7.11.2",
+  "version": "7.11.3",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -583,5 +583,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "af4bf90a9ac5663ff26d0cfad49e3761457e4646"
+  "gitHead": "1adc75fc6e71cd2166f7c5b497dad8d0c095f35b"
 }