'use strict';

var React = require('react');
var jobberHooks = require('@jobber/hooks');
var classnames = require('classnames');
var framerMotion = require('framer-motion');
var floatingUi_react = require('./floating-ui.react-cjs.js');
var Button = require('./Button-cjs.js');
var Typography = require('./Typography-cjs.js');
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 useRenderElement = require('./useRenderElement-cjs.js');
var buttonRenderAdapter = require('./buttonRenderAdapter-cjs.js');
var BottomSheet = require('./BottomSheet-cjs.js');
var ScrollAreaViewport = require('./ScrollAreaViewport-cjs.js');
var OverlaySeparator = require('./OverlaySeparator-cjs.js');
var DrawerTitle = require('./DrawerTitle-cjs.js');
var MenuSubmenuTrigger$1 = require('./MenuSubmenuTrigger-cjs.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-"};

const SMALL_SCREEN_BREAKPOINT = 490;
const MENU_OFFSET = 6;
const MENU_MAX_HEIGHT_PERCENTAGE = 72;
const Y_TRANSLATION_DESKTOP = 10;
const Y_TRANSLATION_MOBILE = 150;
const MENU_ANIMATION_DURATION = 0.25;
const OVERLAY_ANIMATION_DURATION = 0.15;
const MENU_ANIMATION_CONFIG = {
    duration: MENU_ANIMATION_DURATION,
    type: "tween",
};
const OVERLAY_ANIMATION_CONFIG = {
    duration: OVERLAY_ANIMATION_DURATION,
    type: "tween",
};

function isMobileDevice() {
    if (typeof window === "undefined") {
        return false;
    }
    return window.innerWidth <= SMALL_SCREEN_BREAKPOINT;
}
const animationVariation = {
    overlayStartStop: { opacity: 0 },
    startOrStop: (placement) => {
        let y = Y_TRANSLATION_DESKTOP;
        if (placement === null || placement === void 0 ? void 0 : placement.includes("bottom"))
            y *= -1;
        if (isMobileDevice())
            y = Y_TRANSLATION_MOBILE;
        return { opacity: 0, y };
    },
    done: { opacity: 1, y: 0 },
};
// eslint-disable-next-line max-statements
function MenuLegacy({ activator, items, UNSAFE_className, UNSAFE_style, }) {
    var _a;
    const [visible, setVisible] = React.useState(false);
    const [referenceElement, setReferenceElement] = React.useState(null);
    const [activeIndex, setActiveIndex] = React.useState(null);
    const listRef = React.useRef([]);
    const { width } = jobberHooks.useWindowDimensions();
    const buttonID = React.useId();
    const menuID = React.useId();
    const fullWidth = ((_a = activator === null || activator === void 0 ? void 0 : activator.props) === null || _a === void 0 ? void 0 : _a.fullWidth) || false;
    const wrapperClasses = classnames(styles$2.wrapper, {
        [styles$2.fullWidth]: fullWidth,
    });
    jobberHooks.useRefocusOnActivator(visible);
    const isLargeScreen = width >= SMALL_SCREEN_BREAKPOINT;
    const middleware = React.useMemo(() => {
        if (isLargeScreen) {
            return [
                floatingUi_reactDom.offset(MENU_OFFSET),
                floatingUi_reactDom.flip({ fallbackPlacements: ["bottom-end", "top-start", "top-end"] }),
                floatingUi_reactDom.size({
                    apply({ availableHeight, elements }) {
                        const menuElement = elements.floating.querySelector('[role="menu"]');
                        if (menuElement) {
                            const viewportHeight = window.innerHeight;
                            const maxHeightVh = (viewportHeight * MENU_MAX_HEIGHT_PERCENTAGE) / 100;
                            const maxHeight$1 = maxHeight.calculateMaxHeight(availableHeight, {
                                maxHeight: maxHeightVh,
                            });
                            Object.assign(menuElement.style, {
                                maxHeight: `${maxHeight$1}px`,
                            });
                        }
                    },
                }),
            ];
        }
        return [];
    }, [isLargeScreen]);
    const { refs, floatingStyles, context } = floatingUi_react.useFloating({
        open: visible,
        onOpenChange: (isOpen) => {
            setVisible(isOpen);
        },
        placement: "bottom-start",
        strategy: "fixed",
        middleware,
        elements: {
            reference: referenceElement,
        },
        whileElementsMounted: floatingUi_reactDom.autoUpdate,
    });
    const dismiss = floatingUi_react.useDismiss(context);
    const listNavigation = floatingUi_react.useListNavigation(context, {
        listRef,
        activeIndex,
        onNavigate: setActiveIndex,
        loop: true,
    });
    const { getReferenceProps, getFloatingProps, getItemProps } = floatingUi_react.useInteractions([dismiss, listNavigation]);
    const positionAttributes = isLargeScreen
        ? {
            style: floatingStyles,
        }
        : {};
    if (!activator) {
        activator = (React.createElement(Button.Button, { fullWidth: true, label: "More Actions", icon: "more", type: "secondary" }));
    }
    let itemIndexCounter = 0;
    const renderedSections = items === null || items === void 0 ? void 0 : items.map((item, key) => (React.createElement("div", { key: key, className: styles$2.legacySection },
        item.header && (React.createElement(SectionHeader, { text: item.header, UNSAFE_style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.header, UNSAFE_className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.header })),
        item.actions.map(action => {
            const currentIndex = itemIndexCounter++;
            return (React.createElement(Action, Object.assign({ UNSAFE_style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.action, UNSAFE_className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.action, sectionLabel: item.header, key: action.label, tabIndex: activeIndex === currentIndex ? 0 : -1, setItemNode: node => {
                    listRef.current[currentIndex] = node;
                }, getItemProps: getItemProps }, action)));
        }))));
    return (React.createElement("div", { className: wrapperClasses, onClick: handleParentClick },
        React.createElement("div", Object.assign({ ref: setReferenceElement }, getReferenceProps()), React.cloneElement(activator, {
            onClick: toggle(activator.props.onClick),
            id: buttonID,
            ariaControls: menuID,
            ariaExpanded: visible,
            ariaHaspopup: true,
        })),
        React.createElement(MenuPortal, null,
            React.createElement(framerMotion.AnimatePresence, null, visible && (React.createElement(React.Fragment, null,
                React.createElement(framerMotion.motion.div, { className: styles$2.overlay, onClick: toggle(), variants: animationVariation, initial: "overlayStartStop", animate: "done", exit: "overlayStartStop", transition: Object.assign({}, OVERLAY_ANIMATION_CONFIG) }),
                React.createElement("div", Object.assign({ ref: refs.setFloating, className: styles$2.floatingContainer }, getFloatingProps({
                    onKeyDown: event => {
                        if (event.key === "Tab") {
                            event.preventDefault();
                        }
                    },
                }), positionAttributes, useFormFieldFocus.formFieldFocusAttribute), items.length > 0 && (React.createElement(framerMotion.motion.div, { className: classnames(styles$2.menu, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.menu), role: "menu", "data-elevation": "elevated", "aria-labelledby": buttonID, id: menuID, onClick: hide, variants: animationVariation, initial: "startOrStop", animate: "done", exit: "startOrStop", custom: context === null || context === void 0 ? void 0 : context.placement, transition: Object.assign({}, MENU_ANIMATION_CONFIG), style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.menu }, renderedSections)))))))));
    function toggle(callbackPassthrough) {
        return (event) => {
            setVisible(!visible);
            callbackPassthrough && callbackPassthrough(event);
        };
    }
    function hide() {
        setVisible(false);
        setActiveIndex(null);
    }
    function handleParentClick(event) {
        event.stopPropagation();
    }
}
function SectionHeader({ text, UNSAFE_style, UNSAFE_className, }) {
    return (React.createElement("div", { className: classnames(styles$2.sectionHeader, UNSAFE_className), "aria-hidden": true, style: UNSAFE_style },
        React.createElement(DefaultHeaderContent, null, text)));
}
function Action(props) {
    const { label, sectionLabel, icon, iconColor, destructive, UNSAFE_style, UNSAFE_className, onClick, tabIndex, setItemNode, getItemProps, } = props;
    const buttonClasses = classnames(styles$2.action, styles$2.legacyAction, {
        [styles$2.destructive]: destructive,
    });
    return (React.createElement("button", Object.assign({ className: classnames(buttonClasses, UNSAFE_className), style: UNSAFE_style, key: label, type: "button" }, getItemProps({
        ref: setItemNode,
        role: "menuitem",
        onClick,
        tabIndex,
    })),
        React.createElement(DefaultItemContent, { label: label, icon: icon, iconColor: iconColor, destructive: destructive, sectionLabel: sectionLabel })));
}
function DefaultItemContent({ label, icon, iconColor, destructive, sectionLabel, }) {
    return (React.createElement(React.Fragment, null,
        icon && (React.createElement("div", null,
            React.createElement(Icon.Icon, { color: destructive ? "destructive" : iconColor, name: icon }))),
        React.createElement(Typography.Typography, { element: "span", fontWeight: "semiBold", textColor: destructive ? "destructive" : "text" },
            sectionLabel && (React.createElement("span", { className: styles$2.screenReaderOnly }, sectionLabel)),
            label)));
}
function DefaultHeaderContent({ children, }) {
    return (React.createElement(Typography.Typography, { element: "h6", size: "base", textColor: "textSecondary", fontWeight: "regular", textCase: "none" }, children));
}
function MenuPortal({ children }) {
    if (typeof document === "undefined") {
        return null;
    }
    return React.createElement(floatingUi_react.FloatingPortal, null, children);
}

var styles$1 = {"submenuHeader":"Vw9MFreevMU-","submenuTitle":"wpNMcBuNwwY-","spinning":"nOEBQCC4Cos-"};

var styles = {"wrapper":"fpi0W91w2ag-","floatingContainer":"ba-Kj6mvQUw-","composableBackdrop":"wqvf3hcDMM0-","menu":"-DayvgvIcVo-","legacySection":"VsRRunpS6Yo-","separator":"jnggqK3YTIU-","triggerWrapper":"oRQQVVq-yxA-","composableMenu":"atokGnmWVls-","composableDropdownPopup":"Uk14qmg-Fqc-","composableDropdownScroller":"CJKnGqldjF0-","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,
    });
}

// New composable menu pieces prefer standard DOM props, but we still accept the
// 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) {
    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.
function hasMenuSlot(children, slot) {
    return React.Children.toArray(children).some(child => {
        if (!React.isValidElement(child)) {
            return false;
        }
        if (typeof child.type === "string" || !("menuSlot" in child.type)) {
            return false;
        }
        return child.type.menuSlot === slot;
    });
}
// Falls back to the default Atlantis button trigger when a consumer does not
// provide a custom render function or element.
function resolveMenuTriggerRender({ children, render, }) {
    if (render) {
        if (typeof render === "function") {
            return (props) => {
                const renderedElement = render(buttonRenderAdapter.normalizeBaseUiButtonProps(props));
                return buttonRenderAdapter.isAtlantisButtonRenderTarget(renderedElement)
                    ? buttonRenderAdapter.stripNativeTypeFromButtonRenderTarget(renderedElement)
                    : renderedElement;
            };
        }
        return buttonRenderAdapter.isAtlantisButtonRenderTarget(render)
            ? buttonRenderAdapter.renderAtlantisButtonTarget(render)
            : render;
    }
    if (buttonRenderAdapter.isAtlantisButtonRenderTarget(children)) {
        return buttonRenderAdapter.renderAtlantisButtonTarget(children);
    }
    if (React.isValidElement(children)) {
        return children;
    }
    return buttonRenderAdapter.renderAtlantisButtonTarget(React.createElement(Button.Button, { type: "secondary" },
        React.createElement(Button.Button.Label, null, children)));
}
const MenuItemContext = React.createContext(null);
function MenuItemProvider({ children, variation, }) {
    return (React.createElement(MenuItemContext.Provider, { value: { variation } }, children));
}
function useMenuItemContext() {
    const context = React.useContext(MenuItemContext);
    return context !== null && context !== void 0 ? context : {};
}
function SharedMenuItemIcon(props) {
    const { variation } = useMenuItemContext();
    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 (
    // 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) {
    const { className, style } = resolveComposableBaseProps(props);
    return (React.createElement("div", { className: className, "data-menu-slot": "prefix", style: style }, props.children));
}
function SharedMenuItemSuffix(props) {
    const { className, style } = resolveComposableBaseProps(props);
    return (React.createElement("div", { className: className, "data-menu-slot": "suffix", style: style }, props.children));
}
const sharedMenuGroupLabelClassName = `${styles.composableGroupHeader} ${styles.composableGroupLabel}`;
function DefaultGroupLabelContent({ children, }) {
    return (React.createElement(Typography.Typography, { element: "span", size: "base", textColor: "textSecondary", fontWeight: "regular", textCase: "none" }, children));
}
function SharedMenuGroupLabelContent(props) {
    return React.createElement(DefaultGroupLabelContent, null, props.children);
}

const BottomSheetContext = React.createContext(null);
const BottomSheetRadioGroupContext = React.createContext(null);
const BottomSheetGroupContext = React.createContext(null);
const BottomSheetSubmenuContext = React.createContext(null);
const MENU_ITEM_SELECTOR = '[role="menuitem"], [role="menuitemradio"]';
function useBottomSheetContext() {
    const context = React.useContext(BottomSheetContext);
    if (!context) {
        throw new Error("BottomSheetContext used outside provider");
    }
    return context;
}
function useBottomSheetRadioGroupContext() {
    return React.useContext(BottomSheetRadioGroupContext);
}
function useBottomSheetGroupContext() {
    const context = React.useContext(BottomSheetGroupContext);
    if (!context) {
        throw new Error("BottomSheetGroupContext used outside provider");
    }
    return context;
}
function useBottomSheetSubmenuContext() {
    const context = React.useContext(BottomSheetSubmenuContext);
    if (!context) {
        throw new Error("BottomSheetSubmenuContext used outside provider");
    }
    return context;
}
function getTextContent(node) {
    if (typeof node === "string" || typeof node === "number") {
        return String(node);
    }
    if (Array.isArray(node)) {
        return node.map(child => getTextContent(child)).join(" ");
    }
    if (!React.isValidElement(node)) {
        return "";
    }
    return getTextContent(node.props.children);
}
function getBottomSheetContentStyle(style) {
    if (!style) {
        return undefined;
    }
    const safeStyle = Object.assign({}, style);
    delete safeStyle.height;
    delete safeStyle.maxHeight;
    delete safeStyle.minHeight;
    delete safeStyle.width;
    return safeStyle;
}
// Bottom sheet menu interaction helpers. These adapt Drawer semantics into the
// menu-style keyboard and focus behavior we want for the mobile shell.
function getNavigableMenuItems(target) {
    const menu = target.closest('[role="menu"]');
    if (!menu) {
        return [];
    }
    return Array.from(menu.querySelectorAll(MENU_ITEM_SELECTOR)).filter(item => !item.hasAttribute("disabled"));
}
function moveBottomSheetMenuFocus(currentTarget, direction) {
    var _a, _b;
    const items = getNavigableMenuItems(currentTarget);
    if (items.length === 0) {
        return;
    }
    const boundaryIndex = direction === "first" ? 0 : direction === "last" ? items.length - 1 : null;
    if (boundaryIndex !== null) {
        (_a = items[boundaryIndex]) === null || _a === void 0 ? void 0 : _a.focus();
        return;
    }
    const currentIndex = items.indexOf(currentTarget);
    const startIndex = currentIndex === -1 ? 0 : currentIndex;
    const offset = direction === "next" ? 1 : -1;
    const nextIndex = (startIndex + offset + items.length) % items.length;
    (_b = items[nextIndex]) === null || _b === void 0 ? void 0 : _b.focus();
}
function handleBottomSheetMenuItemKeyDown(event) {
    switch (event.key) {
        case "ArrowDown":
            event.preventDefault();
            moveBottomSheetMenuFocus(event.currentTarget, "next");
            break;
        case "ArrowUp":
            event.preventDefault();
            moveBottomSheetMenuFocus(event.currentTarget, "previous");
            break;
        case "Home":
            event.preventDefault();
            moveBottomSheetMenuFocus(event.currentTarget, "first");
            break;
        case "End":
            event.preventDefault();
            moveBottomSheetMenuFocus(event.currentTarget, "last");
            break;
    }
}
function updateBottomSheetHighlight(event, focusModalityRef, setHighlighted) {
    setHighlighted(focusModalityRef.current === "keyboard" ||
        event.currentTarget.matches(":focus-visible"));
}
function useBottomSheetMenuItemInteractions() {
    const { focusModalityRef } = useBottomSheetContext();
    const [isHighlighted, setIsHighlighted] = React.useState(false);
    return {
        isHighlighted,
        interactionProps: {
            onPointerDown: () => {
                focusModalityRef.current = "pointer";
            },
            onFocus: (event) => {
                updateBottomSheetHighlight(event, focusModalityRef, setIsHighlighted);
            },
            onBlur: () => {
                setIsHighlighted(false);
            },
            onKeyDown: (event) => {
                focusModalityRef.current = "keyboard";
                handleBottomSheetMenuItemKeyDown(event);
            },
        },
    };
}
function getInitialBottomSheetFocus(menuRef, focusModalityRef) {
    return (openType) => {
        var _a;
        if (openType === "keyboard") {
            focusModalityRef.current = "keyboard";
            return (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(MENU_ITEM_SELECTOR);
        }
        focusModalityRef.current = "pointer";
        return menuRef.current;
    };
}
function handleBottomSheetMenuContainerKeyDown(event) {
    if (event.target !== event.currentTarget) {
        return;
    }
    switch (event.key) {
        case "ArrowDown":
        case "Home":
            event.preventDefault();
            moveBottomSheetMenuFocus(event.currentTarget, "first");
            break;
        case "ArrowUp":
        case "End":
            event.preventDefault();
            moveBottomSheetMenuFocus(event.currentTarget, "last");
            break;
    }
}
function BottomSheetMenuSurface({ children, className, menuRef, style, }) {
    const { focusModalityRef } = useBottomSheetContext();
    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));
}
function BottomSheetRoot({ children, onOpenChange, open, defaultOpen, }) {
    // Mobile submenu drill-downs use their own drawer layer. We track that here
    // so the parent sheet can hide while a nested submenu is open.
    const [submenuOpen, setSubmenuOpen] = React.useState(false);
    const focusModalityRef = React.useRef("pointer");
    const actionsRef = React.useRef(null);
    return (React.createElement(BottomSheet.BottomSheet.Root, { actionsRef: actionsRef, open: open, defaultOpen: defaultOpen, onOpenChange: nextOpen => {
            if (!nextOpen) {
                setSubmenuOpen(false);
            }
            onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(nextOpen);
        } },
        React.createElement(BottomSheetContext.Provider, { value: {
                close: () => {
                    var _a;
                    (_a = actionsRef.current) === null || _a === void 0 ? void 0 : _a.close();
                },
                focusModalityRef,
                setSubmenuOpen,
                submenuOpen,
            } }, children)));
}
const BottomSheetTrigger = React.forwardRef(function BottomSheetTrigger({ ariaLabel, children, style, className, render, UNSAFE_style, UNSAFE_className, }, ref) {
    const resolvedBaseProps = resolveComposableBaseProps({
        className,
        style,
        UNSAFE_className,
        UNSAFE_style,
    });
    return (React.createElement(ScrollAreaViewport.DrawerTrigger, { "aria-label": ariaLabel, className: classnames(styles.triggerWrapper, resolvedBaseProps.className), style: resolvedBaseProps.style, render: resolveMenuTriggerRender({ children, render }), ref: ref }));
});
function BottomSheetContent({ children, style, className, UNSAFE_style, UNSAFE_className, }) {
    const { focusModalityRef, submenuOpen } = useBottomSheetContext();
    const menuRef = React.useRef(null);
    const resolvedBaseProps = resolveComposableBaseProps({
        className,
        style,
        UNSAFE_className,
        UNSAFE_style,
    });
    const bottomSheetStyle = getBottomSheetContentStyle(resolvedBaseProps.style);
    return (React.createElement(BottomSheet.BottomSheet.Popup, { initialFocus: getInitialBottomSheetFocus(menuRef, focusModalityRef), className: classnames({
            [styles.menuHidden]: submenuOpen,
        }) },
        React.createElement(BottomSheet.BottomSheet.Content, null,
            React.createElement(BottomSheetMenuSurface, { menuRef: menuRef, className: classnames(styles.bottomSheetMenuContent, resolvedBaseProps.className), style: bottomSheetStyle }, children))));
}
function BottomSheetSeparator({ style, className, UNSAFE_style, UNSAFE_className, }) {
    const resolvedBaseProps = resolveComposableBaseProps({
        className,
        style,
        UNSAFE_className,
        UNSAFE_style,
    });
    return (React.createElement(OverlaySeparator.OverlaySeparator, { className: classnames(styles.separator, resolvedBaseProps.className), style: resolvedBaseProps.style, "data-testid": "ATL-Menu-Separator" }));
}
function BottomSheetRadioGroup({ children, value, defaultValue, onValueChange, className, style, UNSAFE_style, UNSAFE_className, }) {
    const resolvedBaseProps = resolveComposableBaseProps({
        className,
        style,
        UNSAFE_className,
        UNSAFE_style,
    });
    const [internalValue, setInternalValue] = React.useState(defaultValue);
    const selectedValue = value !== null && value !== void 0 ? value : internalValue;
    return (React.createElement(BottomSheetRadioGroupContext.Provider, { value: {
            value: selectedValue,
            setValue: nextValue => {
                if (value === undefined) {
                    setInternalValue(nextValue);
                }
                onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(nextValue);
            },
        } },
        React.createElement("div", { className: classnames(styles.composableRadioGroup, resolvedBaseProps.className), style: resolvedBaseProps.style }, children)));
}
function BottomSheetGroup(props) {
    const { className, style } = resolveComposableBaseProps(props);
    const labelId = React.useId();
    const [hasLabel, setHasLabel] = React.useState(false);
    const registerLabel = React.useCallback((nextHasLabel) => {
        setHasLabel(nextHasLabel);
    }, []);
    return (React.createElement(BottomSheetGroupContext.Provider, { value: { labelId, registerLabel } },
        React.createElement("div", { role: "group", "aria-labelledby": hasLabel ? labelId : undefined, "aria-label": !hasLabel ? props.ariaLabel : undefined, className: classnames(styles.composableGroup, className), style: style }, props.children)));
}
const BottomSheetItem = React.forwardRef(function BottomSheetItem(props, ref) {
    const { close } = useBottomSheetContext();
    const { isHighlighted, interactionProps } = useBottomSheetMenuItemInteractions();
    const { className: itemClassName, style } = resolveComposableBaseProps(props);
    const hasLeadingContent = hasMenuSlot(props.children, "icon") ||
        hasMenuSlot(props.children, "prefix");
    const className = classnames(styles.action, styles.composableItem, {
        [styles.composableItemNoLeadingSlot]: !hasLeadingContent,
    }, {
        [styles.destructive]: props.variation === "destructive",
    }, itemClassName);
    if (props.href) {
        const { href, target, rel, onClick, closeOnClick = true } = props;
        return (React.createElement("a", Object.assign({ ref: ref, className: className, "data-highlighted": isHighlighted ? "" : undefined, style: style, href: href, role: "menuitem", target: target, rel: rel }, interactionProps, { onClick: event => {
                onClick === null || onClick === void 0 ? void 0 : onClick(event);
                if (closeOnClick) {
                    close();
                }
            } }),
            React.createElement(MenuItemProvider, { variation: props.variation }, props.children)));
    }
    return (React.createElement("button", Object.assign({ ref: ref, className: className, "data-highlighted": isHighlighted ? "" : undefined, style: style, type: "button", role: "menuitem" }, interactionProps, { onClick: () => {
            var _a;
            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props);
            if (props.closeOnClick !== false) {
                close();
            }
        }, onKeyUp: event => {
            if (event.key === " ") {
                close();
            }
        } }),
        React.createElement(MenuItemProvider, { variation: props.variation }, props.children)));
});
const BottomSheetRadioItem = React.forwardRef(function BottomSheetRadioItem(props, ref) {
    const { close } = useBottomSheetContext();
    const radioGroup = useBottomSheetRadioGroupContext();
    const { isHighlighted, interactionProps } = useBottomSheetMenuItemInteractions();
    const { className, style } = resolveComposableBaseProps(props);
    const checked = (radioGroup === null || radioGroup === void 0 ? void 0 : radioGroup.value) === props.value;
    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.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) {
                close();
            }
        } }),
        React.createElement(MenuItemProvider, null,
            props.children,
            !hasCustomSuffix ? (React.createElement("div", { "data-menu-slot": "suffix", "data-checked": checked ? "" : undefined, "data-unchecked": !checked ? "" : undefined },
                React.createElement(Icon.Icon, { color: "icon", name: "checkmark" }))) : null)));
});
function BottomSheetSubmenu({ children, open, defaultOpen, onOpenChange, }) {
    const { setSubmenuOpen } = useBottomSheetContext();
    // The trigger writes its title here during render; the content reads it
    // when the drill-down sheet mounts. No setState, no effect roundtrip.
    const titleRef = React.useRef("");
    React.useEffect(() => {
        // Safety reset so the parent sheet is never left hidden if this submenu
        // unmounts unexpectedly while it controls the nested-drawer state.
        return () => {
            setSubmenuOpen(false);
        };
    }, [setSubmenuOpen]);
    return (React.createElement(BottomSheetSubmenuContext.Provider, { value: { titleRef } },
        React.createElement(BottomSheet.BottomSheet.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: isOpen => {
                setSubmenuOpen(isOpen);
                onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(isOpen);
            } }, children)));
}
const BottomSheetSubmenuTrigger = React.forwardRef(function BottomSheetSubmenuTrigger({ children, className, style, textValue, UNSAFE_style, UNSAFE_className }, ref) {
    const { isHighlighted, interactionProps } = useBottomSheetMenuItemInteractions();
    const resolvedBaseProps = resolveComposableBaseProps({
        className,
        style,
        UNSAFE_className,
        UNSAFE_style,
    });
    const hasCustomSuffix = hasMenuSlot(children, "suffix");
    const hasLeadingContent = hasMenuSlot(children, "icon") || hasMenuSlot(children, "prefix");
    const { titleRef } = useBottomSheetSubmenuContext();
    // Publish the title synchronously during render so the drill-down sheet
    // 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(ScrollAreaViewport.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" },
            React.createElement(Icon.Icon, { color: "icon", name: "arrowRight" }))) : null));
});
function BottomSheetSubmenuContent({ children, className, style, UNSAFE_style, UNSAFE_className, }) {
    const { titleRef } = useBottomSheetSubmenuContext();
    const title = titleRef.current;
    const { focusModalityRef } = useBottomSheetContext();
    const menuRef = React.useRef(null);
    const resolvedBaseProps = resolveComposableBaseProps({
        className,
        style,
        UNSAFE_className,
        UNSAFE_style,
    });
    const bottomSheetStyle = getBottomSheetContentStyle(resolvedBaseProps.style);
    return (React.createElement(BottomSheet.BottomSheet.Popup, { initialFocus: getInitialBottomSheetFocus(menuRef, focusModalityRef), className: classnames(styles.menu, styles.bottomSheetSubmenuPopup) },
        React.createElement(BottomSheet.BottomSheet.Content, { style: bottomSheetStyle },
            title ? (React.createElement(DrawerTitle.DrawerTitle, { className: styles.screenReaderOnly }, title)) : null,
            React.createElement("div", { className: styles$1.submenuHeader },
                React.createElement(DrawerTitle.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.composableSection, resolvedBaseProps.className) }, children))));
}
function BottomSheetGroupLabel(props) {
    const { className, style } = resolveComposableBaseProps(props);
    const { labelId, registerLabel } = useBottomSheetGroupContext();
    React.useEffect(() => {
        registerLabel(true);
        return () => {
            registerLabel(false);
        };
    }, [registerLabel]);
    return (React.createElement("div", { id: labelId, role: "presentation", className: classnames(sharedMenuGroupLabelClassName, className), style: style },
        React.createElement(SharedMenuGroupLabelContent, Object.assign({}, props))));
}
const MenuBottomSheet = Object.assign(BottomSheetRoot, {
    Trigger: BottomSheetTrigger,
    Content: BottomSheetContent,
    Separator: BottomSheetSeparator,
    RadioGroup: BottomSheetRadioGroup,
    RadioItem: BottomSheetRadioItem,
    Submenu: BottomSheetSubmenu,
    SubmenuTrigger: BottomSheetSubmenuTrigger,
    SubmenuContent: BottomSheetSubmenuContent,
    Group: BottomSheetGroup,
    Item: BottomSheetItem,
    ItemIcon: SharedMenuItemIcon,
    ItemLabel: SharedMenuItemLabel,
    ItemPrefix: SharedMenuItemPrefix,
    ItemSuffix: SharedMenuItemSuffix,
    GroupLabel: BottomSheetGroupLabel,
});

// Desktop/dropdown implementation for Menu. This maps the Atlantis
// sugar API onto Base UI Menu primitives while sharing the visual slot layer
// with the mobile BottomSheet implementation.
const MenuDropdownContext = React.createContext(null);
function useMenuDropdownContext() {
    const context = React.useContext(MenuDropdownContext);
    if (!context) {
        throw new Error("MenuDropdownContext used outside provider");
    }
    return context;
}
function getFloatingLayerStyle(style) {
    if ((style === null || style === void 0 ? void 0 : style.zIndex) == null)
        return undefined;
    return { zIndex: style.zIndex };
}
function getMenuPopupStyle(style) {
    return Object.assign({ maxHeight: `min(${MENU_MAX_HEIGHT_PERCENTAGE}vh, max(0px, calc(var(--available-height) - var(--space-base))))` }, style);
}
function MenuDropdownRoot({ children, onOpenChange, open, defaultOpen, }) {
    const actionsRef = React.useRef(null);
    return (React.createElement(MenuDropdownContext.Provider, { value: {
            close: () => {
                var _a;
                (_a = actionsRef.current) === null || _a === void 0 ? void 0 : _a.close();
            },
        } },
        React.createElement(MenuSubmenuTrigger$1.MenuRoot, { actionsRef: actionsRef, open: open, defaultOpen: defaultOpen, onOpenChange: isOpen => {
                onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(isOpen);
            } }, children)));
}
const MenuDropdownTrigger = React.forwardRef(function MenuDropdownTrigger({ ariaLabel, children, style, className, render, UNSAFE_style, UNSAFE_className, }, ref) {
    const resolvedBaseProps = resolveComposableBaseProps({
        className,
        style,
        UNSAFE_className,
        UNSAFE_style,
    });
    // ComposableMenu.Trigger is Atlantis sugar over Base UI's trigger render API,
    // letting us provide a default Atlantis trigger while still allowing custom renders.
    return (React.createElement(MenuSubmenuTrigger$1.MenuTrigger, { "aria-label": ariaLabel, className: classnames(styles.triggerWrapper, resolvedBaseProps.className), style: resolvedBaseProps.style, render: resolveMenuTriggerRender({ children, render }), ref: ref }));
});
function MenuDropdownContent({ children, style, className, preferredPlacement, UNSAFE_style, UNSAFE_className, }) {
    var _a;
    const resolvedBaseProps = resolveComposableBaseProps({
        className,
        style,
        UNSAFE_className,
        UNSAFE_style,
    });
    // Safe assertion: MenuPlacement is a bare side or a "side align" pair.
    const [side = "bottom", align = "start"] = ((_a = preferredPlacement === null || preferredPlacement === void 0 ? void 0 : preferredPlacement.split(" ")) !== null && _a !== void 0 ? _a : []);
    const floatingLayerStyle = getFloatingLayerStyle(resolvedBaseProps.style);
    const popupStyle = getMenuPopupStyle(resolvedBaseProps.style);
    return (React.createElement(MenuSubmenuTrigger$1.MenuPortal, null,
        React.createElement(MenuSubmenuTrigger$1.MenuBackdrop, { className: styles.composableBackdrop }),
        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.composableDropdownPopup, resolvedBaseProps.className), style: popupStyle },
                React.createElement("div", { className: classnames(styles.composableMenu, styles.composableDropdownScroller) }, children)))));
}
function MenuDropdownRadioGroup({ children, value, defaultValue, onValueChange, className, style, UNSAFE_style, UNSAFE_className, }) {
    const resolvedBaseProps = resolveComposableBaseProps({
        className,
        style,
        UNSAFE_className,
        UNSAFE_style,
    });
    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.composableRadioGroup, resolvedBaseProps.className), style: resolvedBaseProps.style }, children));
}
function MenuDropdownSeparator({ style, className, UNSAFE_style, UNSAFE_className, }) {
    const resolvedBaseProps = resolveComposableBaseProps({
        className,
        style,
        UNSAFE_className,
        UNSAFE_style,
    });
    return (React.createElement(OverlaySeparator.OverlaySeparator, { className: classnames(styles.separator, resolvedBaseProps.className), style: resolvedBaseProps.style, "data-testid": "ATL-Menu-Separator" }));
}
function MenuDropdownGroup(props) {
    const { className, style } = resolveComposableBaseProps(props);
    return (React.createElement(MenuSubmenuTrigger$1.MenuGroup, { "aria-label": props.ariaLabel, className: classnames(styles.composableGroup, className), style: style }, props.children));
}
const MenuDropdownItem = React.forwardRef(function MenuDropdownItem(props, ref) {
    const { close } = useMenuDropdownContext();
    const { className: itemClassName, style } = resolveComposableBaseProps(props);
    const { textValue } = props;
    const hasLeadingContent = hasMenuSlot(props.children, "icon") ||
        hasMenuSlot(props.children, "prefix");
    const className = classnames(styles.action, styles.composableItem, {
        [styles.composableItemNoLeadingSlot]: !hasLeadingContent,
        [styles.destructive]: props.variation === "destructive",
    }, itemClassName);
    if (props.href) {
        const { href, target, rel, onClick, closeOnClick = true } = props;
        return (React.createElement(MenuSubmenuTrigger$1.MenuLinkItem, { ref: ref, className: className, style: style, label: textValue, href: href, target: target, rel: rel, closeOnClick: closeOnClick, onClick: onClick },
            React.createElement(MenuItemProvider, { variation: props.variation }, props.children)));
    }
    return (React.createElement(MenuSubmenuTrigger$1.MenuItem, { ref: ref, className: className, style: style, label: textValue, closeOnClick: props.closeOnClick, nativeButton: true, render: React.createElement("button", { type: "button" }), onClick: () => {
            var _a;
            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props);
        }, onKeyUp: event => {
            // Base UI handles dismissal on click, but this keeps the Atlantis
            // button-rendered item path closing consistently on Space as well.
            if (event.key === " ") {
                close();
            }
        } },
        React.createElement(MenuItemProvider, { variation: props.variation }, props.children)));
});
const MenuDropdownRadioItem = React.forwardRef(function MenuDropdownRadioItem(props, ref) {
    const { className, style } = resolveComposableBaseProps(props);
    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.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,
            !hasCustomSuffix ? (React.createElement(MenuSubmenuTrigger$1.MenuRadioItemIndicator, { "data-menu-slot": "suffix", keepMounted: true },
                React.createElement(Icon.Icon, { color: "icon", name: "checkmark" }))) : null)));
});
function MenuDropdownSubmenu({ children, open, defaultOpen, onOpenChange, }) {
    return (React.createElement(MenuSubmenuTrigger$1.MenuSubmenuRoot, { open: open, defaultOpen: defaultOpen, onOpenChange: isOpen => {
            onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(isOpen);
        } }, children));
}
const MenuDropdownSubmenuTrigger = React.forwardRef(function MenuDropdownSubmenuTrigger(props, ref) {
    const resolvedBaseProps = resolveComposableBaseProps(props);
    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.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" },
            React.createElement(Icon.Icon, { color: "icon", name: "arrowRight" }))) : null));
});
function MenuDropdownSubmenuContent({ children, className, style, UNSAFE_style, UNSAFE_className, }) {
    const resolvedBaseProps = resolveComposableBaseProps({
        className,
        style,
        UNSAFE_className,
        UNSAFE_style,
    });
    const floatingLayerStyle = getFloatingLayerStyle(resolvedBaseProps.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.composableDropdownPopup, resolvedBaseProps.className), style: popupStyle },
                React.createElement("div", { className: classnames(styles.composableMenu, styles.composableDropdownScroller) }, children)))));
}
function MenuDropdownGroupLabel(props) {
    const { className, style } = resolveComposableBaseProps(props);
    return (React.createElement(MenuSubmenuTrigger$1.MenuGroupLabel, { className: classnames(sharedMenuGroupLabelClassName, className), style: style },
        React.createElement(SharedMenuGroupLabelContent, Object.assign({}, props))));
}
const MenuDropdown = Object.assign(MenuDropdownRoot, {
    Trigger: MenuDropdownTrigger,
    Content: MenuDropdownContent,
    Separator: MenuDropdownSeparator,
    RadioGroup: MenuDropdownRadioGroup,
    RadioItem: MenuDropdownRadioItem,
    Submenu: MenuDropdownSubmenu,
    SubmenuTrigger: MenuDropdownSubmenuTrigger,
    SubmenuContent: MenuDropdownSubmenuContent,
    Group: MenuDropdownGroup,
    Item: MenuDropdownItem,
    ItemIcon: SharedMenuItemIcon,
    ItemLabel: SharedMenuItemLabel,
    ItemPrefix: SharedMenuItemPrefix,
    ItemSuffix: SharedMenuItemSuffix,
    GroupLabel: MenuDropdownGroupLabel,
});

function isLegacy(props) {
    return "items" in props;
}
const MenuContext = React.createContext(null);
function useMenuContext() {
    const context = React.useContext(MenuContext);
    if (!context) {
        throw new Error("Menu components must be rendered inside Menu");
    }
    return context;
}
function useMenuShell() {
    const { isMobile } = useMenuContext();
    return isMobile ? MenuBottomSheet : MenuDropdown;
}
function MenuComposableRoot(props) {
    const { width } = jobberHooks.useWindowDimensions();
    const isMobile = width !== undefined && width <= SMALL_SCREEN_BREAKPOINT;
    const RootComponent = isMobile ? MenuBottomSheet : MenuDropdown;
    return (React.createElement(MenuContext.Provider, { value: { isMobile } },
        React.createElement(RootComponent, { onOpenChange: props.onOpenChange, open: props.open, defaultOpen: props.defaultOpen }, props.children)));
}
function Menu(props) {
    if (isLegacy(props)) {
        return React.createElement(MenuLegacy, Object.assign({}, props));
    }
    return React.createElement(MenuComposableRoot, Object.assign({}, props));
}
const MenuTrigger = React.forwardRef(function MenuTrigger(props, ref) {
    const Shell = useMenuShell();
    return React.createElement(Shell.Trigger, Object.assign({}, props, { ref: ref }));
});
function MenuContent(props) {
    const Shell = useMenuShell();
    return React.createElement(Shell.Content, Object.assign({}, props));
}
function MenuSeparator(props) {
    const Shell = useMenuShell();
    return React.createElement(Shell.Separator, Object.assign({}, props));
}
function MenuRadioGroup(props) {
    const Shell = useMenuShell();
    return React.createElement(Shell.RadioGroup, Object.assign({}, props));
}
const MenuRadioItem = React.forwardRef(function MenuRadioItem(props, ref) {
    const Shell = useMenuShell();
    return React.createElement(Shell.RadioItem, Object.assign({}, props, { ref: ref }));
});
function MenuSubmenu(props) {
    const Shell = useMenuShell();
    return React.createElement(Shell.Submenu, Object.assign({}, props));
}
const MenuSubmenuTrigger = React.forwardRef(function MenuSubmenuTrigger(props, ref) {
    const Shell = useMenuShell();
    return React.createElement(Shell.SubmenuTrigger, Object.assign({}, props, { ref: ref }));
});
function MenuSubmenuContent(props) {
    const Shell = useMenuShell();
    return React.createElement(Shell.SubmenuContent, Object.assign({}, props));
}
function MenuGroup(props) {
    const Shell = useMenuShell();
    return React.createElement(Shell.Group, Object.assign({}, props));
}
/**
 * @deprecated Use Menu.Group instead.
 * This wrapper keeps the old composable authoring shape working while the
 * underlying menu structure uses grouped semantics.
 */
function MenuSection(props) {
    return React.createElement(MenuGroup, Object.assign({}, props));
}
const MenuItem = React.forwardRef(function MenuItem(props, ref) {
    const Shell = useMenuShell();
    return React.createElement(Shell.Item, Object.assign({}, props, { ref: ref }));
});
function MenuItemIcon(props) {
    const Shell = useMenuShell();
    return React.createElement(Shell.ItemIcon, Object.assign({}, props));
}
function MenuItemLabel(props) {
    const Shell = useMenuShell();
    return React.createElement(Shell.ItemLabel, Object.assign({}, props));
}
function MenuItemPrefix(props) {
    const Shell = useMenuShell();
    return React.createElement(Shell.ItemPrefix, Object.assign({}, props));
}
function MenuItemSuffix(props) {
    const Shell = useMenuShell();
    return React.createElement(Shell.ItemSuffix, Object.assign({}, props));
}
MenuItemPrefix.menuSlot =
    "prefix";
MenuItemSuffix.menuSlot =
    "suffix";
MenuItemIcon.menuSlot = "icon";
function MenuGroupLabel(props) {
    const Shell = useMenuShell();
    return React.createElement(Shell.GroupLabel, Object.assign({}, props));
}
/**
 * @deprecated Use Menu.GroupLabel instead.
 * Header remains as a thin wrapper so older JSX can keep compiling without
 * recreating the old internal DOM structure.
 */
function MenuHeader(props) {
    return React.createElement(MenuGroupLabel, Object.assign({}, props));
}
/**
 * @deprecated Use Menu.GroupLabel content directly instead.
 * HeaderLabel is intentionally a pass-through so the old nested pattern:
 * Menu.Header > Menu.HeaderLabel continues to compose onto the new GroupLabel.
 */
function MenuHeaderLabel(props) {
    return React.createElement(React.Fragment, null, props.children);
}
// Menu now routes the legacy items-based API locally and owns the new
// Base UI-backed composable implementation directly.
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;
