@arc-ui/components 12.0.0-beta.23 → 12.0.0-beta.24

package/lib/Menu/Menu.cjs

@@ -1,24 +1,30 @@
 'use client';
 'use strict';
 
-var filterAttrs = require('../_shared/cjs/filter-attrs-eK6E_34o.cjs');
+var tslib_es6 = require('../_shared/cjs/tslib.es6-CCZ3TN_7.cjs');
 var React = require('react');
-var Combination = require('../_shared/cjs/Combination-B-rSVLfT.cjs');
+var Combination = require('../_shared/cjs/Combination-6m6aOXZq.cjs');
 var index$1 = require('../_shared/cjs/index-DXNM3D1d.cjs');
-var index = require('../_shared/cjs/index-EFXw1jWg.cjs');
-var index$2 = require('../_shared/cjs/index-Bt7hfZBc.cjs');
-var index$3 = require('../_shared/cjs/index-Dv1xvB_E.cjs');
+var index = require('../_shared/cjs/index-CklPiHsS.cjs');
+var index$2 = require('../_shared/cjs/index-KrMgv4q_.cjs');
+var index$3 = require('../_shared/cjs/index-BGGFOAAx.cjs');
 var jsxRuntime = require('react/jsx-runtime');
+var filterAttrs = require('../_shared/cjs/filter-attrs-D19P2s1V.cjs');
+var Icon = require('../_shared/cjs/Icon-Dk2XHa7V.cjs');
+var Text = require('../_shared/cjs/Text-jwsn80lQ.cjs');
+var CheckboxIcon = require('../_shared/cjs/CheckboxIcon-B94mtYCX.cjs');
 var index$4 = require('../_shared/cjs/index-CTlXMLug.cjs');
-var Icon = require('../_shared/cjs/Icon-CzhyKqMd.cjs');
-var Text = require('../_shared/cjs/Text-Cr5nmYmx.cjs');
-var Rule = require('../_shared/cjs/Rule-DMQsi2L6.cjs');
+var Rule = require('../_shared/cjs/Rule-jmvOpci7.cjs');
 var BtIconChevronRightMid = require('../_shared/cjs/BtIconChevronRightMid-eGxk3ae6.cjs');
+var Surface = require('../_shared/cjs/Surface-DIU5ciDT.cjs');
 require('react-dom');
 require('../_shared/cjs/index-B11wQrRa.cjs');
 require('../_shared/cjs/suffix-modifier-DLUGR-yG.cjs');
 require('../_shared/cjs/index-DR8Rkav9.cjs');
-require('../_shared/cjs/Surface-BFx1yNsq.cjs');
+require('../_shared/cjs/ThemeIcon-Def4RZfK.cjs');
+require('../_shared/cjs/FormControl-DiERJpGW.cjs');
+require('../_shared/cjs/DisclosureMini-KEuIc8tE.cjs');
+require('../_shared/cjs/VisuallyHidden-CQg3cOVK.cjs');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -267,7 +273,7 @@ var [createMenuContext, createMenuScope] = index$1.createContextScope(MENU_NAME,
 ]);
 var usePopperScope = index$2.createPopperScope();
 var useRovingFocusGroupScope = createRovingFocusGroupScope();
-var [MenuProvider, useMenuContext] = createMenuContext(MENU_NAME);
+var [MenuProvider$1, useMenuContext$1] = createMenuContext(MENU_NAME);
 var [MenuRootProvider, useMenuRootContext] = createMenuContext(MENU_NAME);
 var Menu$1 = (props) => {
   const { __scopeMenu, open = false, children, dir, onOpenChange, modal = true } = props;
@@ -291,7 +297,7 @@ var Menu$1 = (props) => {
     };
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsx(index$2.Root2, { ...popperScope, children: /* @__PURE__ */ jsxRuntime.jsx(
-    MenuProvider,
+    MenuProvider$1,
     {
       scope: __scopeMenu,
       open,
@@ -328,7 +334,7 @@ var [PortalProvider, usePortalContext] = createMenuContext(PORTAL_NAME$1, {
 });
 var MenuPortal$1 = (props) => {
   const { __scopeMenu, forceMount, children, container } = props;
-  const context = useMenuContext(PORTAL_NAME$1, __scopeMenu);
+  const context = useMenuContext$1(PORTAL_NAME$1, __scopeMenu);
   return /* @__PURE__ */ jsxRuntime.jsx(PortalProvider, { scope: __scopeMenu, forceMount, children: /* @__PURE__ */ jsxRuntime.jsx(index$3.Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsxRuntime.jsx(Combination.Portal, { asChild: true, container, children }) }) });
 };
 MenuPortal$1.displayName = PORTAL_NAME$1;
@@ -338,14 +344,14 @@ var MenuContent$1 = React__namespace.forwardRef(
   (props, forwardedRef) => {
     const portalContext = usePortalContext(CONTENT_NAME$1, props.__scopeMenu);
     const { forceMount = portalContext.forceMount, ...contentProps } = props;
-    const context = useMenuContext(CONTENT_NAME$1, props.__scopeMenu);
+    const context = useMenuContext$1(CONTENT_NAME$1, props.__scopeMenu);
     const rootContext = useMenuRootContext(CONTENT_NAME$1, props.__scopeMenu);
     return /* @__PURE__ */ jsxRuntime.jsx(Collection.Provider, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsxRuntime.jsx(index$3.Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsxRuntime.jsx(Collection.Slot, { scope: props.__scopeMenu, children: rootContext.modal ? /* @__PURE__ */ jsxRuntime.jsx(MenuRootContentModal, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsxRuntime.jsx(MenuRootContentNonModal, { ...contentProps, ref: forwardedRef }) }) }) });
   }
 );
 var MenuRootContentModal = React__namespace.forwardRef(
   (props, forwardedRef) => {
-    const context = useMenuContext(CONTENT_NAME$1, props.__scopeMenu);
+    const context = useMenuContext$1(CONTENT_NAME$1, props.__scopeMenu);
     const ref = React__namespace.useRef(null);
     const composedRefs = Combination.useComposedRefs(forwardedRef, ref);
     React__namespace.useEffect(() => {
@@ -371,7 +377,7 @@ var MenuRootContentModal = React__namespace.forwardRef(
   }
 );
 var MenuRootContentNonModal = React__namespace.forwardRef((props, forwardedRef) => {
-  const context = useMenuContext(CONTENT_NAME$1, props.__scopeMenu);
+  const context = useMenuContext$1(CONTENT_NAME$1, props.__scopeMenu);
   return /* @__PURE__ */ jsxRuntime.jsx(
     MenuContentImpl,
     {
@@ -402,7 +408,7 @@ var MenuContentImpl = React__namespace.forwardRef(
       disableOutsideScroll,
       ...contentProps
     } = props;
-    const context = useMenuContext(CONTENT_NAME$1, __scopeMenu);
+    const context = useMenuContext$1(CONTENT_NAME$1, __scopeMenu);
     const rootContext = useMenuRootContext(CONTENT_NAME$1, __scopeMenu);
     const popperScope = usePopperScope(__scopeMenu);
     const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeMenu);
@@ -804,7 +810,7 @@ var SUB_NAME = "MenuSub";
 var [MenuSubProvider, useMenuSubContext] = createMenuContext(SUB_NAME);
 var MenuSub = (props) => {
   const { __scopeMenu, children, open = false, onOpenChange } = props;
-  const parentMenuContext = useMenuContext(SUB_NAME, __scopeMenu);
+  const parentMenuContext = useMenuContext$1(SUB_NAME, __scopeMenu);
   const popperScope = usePopperScope(__scopeMenu);
   const [trigger, setTrigger] = React__namespace.useState(null);
   const [content, setContent] = React__namespace.useState(null);
@@ -814,7 +820,7 @@ var MenuSub = (props) => {
     return () => handleOpenChange(false);
   }, [parentMenuContext.open, handleOpenChange]);
   return /* @__PURE__ */ jsxRuntime.jsx(index$2.Root2, { ...popperScope, children: /* @__PURE__ */ jsxRuntime.jsx(
-    MenuProvider,
+    MenuProvider$1,
     {
       scope: __scopeMenu,
       open,
@@ -839,7 +845,7 @@ MenuSub.displayName = SUB_NAME;
 var SUB_TRIGGER_NAME$1 = "MenuSubTrigger";
 var MenuSubTrigger = React__namespace.forwardRef(
   (props, forwardedRef) => {
-    const context = useMenuContext(SUB_TRIGGER_NAME$1, props.__scopeMenu);
+    const context = useMenuContext$1(SUB_TRIGGER_NAME$1, props.__scopeMenu);
     const rootContext = useMenuRootContext(SUB_TRIGGER_NAME$1, props.__scopeMenu);
     const subContext = useMenuSubContext(SUB_TRIGGER_NAME$1, props.__scopeMenu);
     const contentContext = useMenuContentContext(SUB_TRIGGER_NAME$1, props.__scopeMenu);
@@ -942,7 +948,7 @@ var MenuSubContent = React__namespace.forwardRef(
   (props, forwardedRef) => {
     const portalContext = usePortalContext(CONTENT_NAME$1, props.__scopeMenu);
     const { forceMount = portalContext.forceMount, ...subContentProps } = props;
-    const context = useMenuContext(CONTENT_NAME$1, props.__scopeMenu);
+    const context = useMenuContext$1(CONTENT_NAME$1, props.__scopeMenu);
     const rootContext = useMenuRootContext(CONTENT_NAME$1, props.__scopeMenu);
     const subContext = useMenuSubContext(SUB_CONTENT_NAME$1, props.__scopeMenu);
     const ref = React__namespace.useRef(null);
@@ -1307,12 +1313,74 @@ var Sub2 = DropdownMenuSub;
 var SubTrigger2 = DropdownMenuSubTrigger;
 var SubContent2 = DropdownMenuSubContent;
 
+var MenuContext = React.createContext(null);
+var useMenuContext = function () {
+    var ctx = React.useContext(MenuContext);
+    if (!ctx) {
+        throw new Error("useMenuContext must be used within a <MenuProvider>");
+    }
+    return ctx;
+};
+
+var MenuProvider = function (_a) {
+    var isMobileMenu = _a.isMobileMenu, defaultWidth = _a.defaultWidth, children = _a.children;
+    var _b = React.useState([]), stack = _b[0], setStack = _b[1];
+    var focusFirstMenuItem = function () {
+        requestAnimationFrame(function () {
+            var wrappers = document.querySelectorAll("[data-radix-popper-content-wrapper]");
+            var latestWrapper = wrappers[wrappers.length - 1];
+            if (!latestWrapper)
+                return;
+            var firstItem = latestWrapper.querySelector('[role="menuitem"]');
+            firstItem === null || firstItem === void 0 ? void 0 : firstItem.focus();
+        });
+    };
+    var goForward = function (item, navigatedViaKeyboard) {
+        setStack(function (prevStack) { return tslib_es6.__spreadArray(tslib_es6.__spreadArray([], prevStack, true), [item], false); });
+        if (navigatedViaKeyboard) {
+            focusFirstMenuItem();
+        }
+    };
+    var goBack = function (navigatedViaKeyboard) {
+        setStack(function (prevStack) {
+            var newStack = prevStack.slice(0, -1);
+            if (navigatedViaKeyboard) {
+                var last_1 = prevStack[prevStack.length - 1];
+                requestAnimationFrame(function () {
+                    var trigger = (last_1 === null || last_1 === void 0 ? void 0 : last_1.triggerId)
+                        ? document.querySelector("[data-menu-trigger=\"".concat(last_1.triggerId, "\"]"))
+                        : null;
+                    if (trigger) {
+                        trigger.focus();
+                    }
+                    else {
+                        focusFirstMenuItem();
+                    }
+                });
+            }
+            return newStack;
+        });
+    };
+    var reset = function () {
+        setStack([]);
+    };
+    return (React.createElement(MenuContext.Provider, { value: {
+            isMobileMenu: isMobileMenu,
+            stack: stack,
+            goForward: goForward,
+            goBack: goBack,
+            reset: reset,
+            defaultWidth: defaultWidth,
+        } }, children));
+};
+
 /**
  * Contains all the parts of a dropdown menu.
  */
 var Menu = function (_a) {
-    var defaultOpen = _a.defaultOpen, open = _a.open, onOpenChange = _a.onOpenChange, _b = _a.modal, modal = _b === void 0 ? false : _b, children = _a.children, props = filterAttrs.__rest(_a, ["defaultOpen", "open", "onOpenChange", "modal", "children"]);
-    return (React.createElement(Root2, filterAttrs.__assign({ defaultOpen: defaultOpen, open: open, onOpenChange: onOpenChange, modal: modal }, filterAttrs.filterAttrs(props)), children));
+    var defaultOpen = _a.defaultOpen, open = _a.open, onOpenChange = _a.onOpenChange, _b = _a.modal, modal = _b === void 0 ? true : _b, _c = _a.isMobileMenu, isMobileMenu = _c === void 0 ? false : _c, children = _a.children, defaultWidth = _a.defaultWidth, props = tslib_es6.__rest(_a, ["defaultOpen", "open", "onOpenChange", "modal", "isMobileMenu", "children", "defaultWidth"]);
+    return (React.createElement(Root2, tslib_es6.__assign({ defaultOpen: defaultOpen, open: open, onOpenChange: onOpenChange, modal: modal }, filterAttrs.filterAttrs(props)),
+        React.createElement(MenuProvider, { isMobileMenu: isMobileMenu, defaultWidth: defaultWidth }, children)));
 };
 
 var MenuItemContentTemplate = function (_a) {
@@ -1331,27 +1399,82 @@ var MenuItemContentTemplate = function (_a) {
 };
 
 var MenuItemCheckbox = function (_a) {
-    var children = _a.children, checked = _a.checked, onCheckedChange = _a.onCheckedChange, isDisabled = _a.isDisabled, onSelect = _a.onSelect, id = _a.id, _b = _a.shouldKeepOpen, shouldKeepOpen = _b === void 0 ? true : _b, props = filterAttrs.__rest(_a, ["children", "checked", "onCheckedChange", "isDisabled", "onSelect", "id", "shouldKeepOpen"]);
-    return (React.createElement(CheckboxItem2, filterAttrs.__assign({ className: "arc-MenuItem arc-MenuItemCheckbox", checked: checked, onCheckedChange: onCheckedChange, disabled: isDisabled, onSelect: function (event) {
+    var children = _a.children, checked = _a.checked, onCheckedChange = _a.onCheckedChange, isDisabled = _a.isDisabled, onSelect = _a.onSelect, id = _a.id, _b = _a.shouldKeepOpen, shouldKeepOpen = _b === void 0 ? true : _b, props = tslib_es6.__rest(_a, ["children", "checked", "onCheckedChange", "isDisabled", "onSelect", "id", "shouldKeepOpen"]);
+    return (React.createElement(CheckboxItem2, tslib_es6.__assign({ className: "arc-MenuItem arc-MenuItemCheckbox", checked: checked, onCheckedChange: onCheckedChange, disabled: isDisabled, onSelect: function (event) {
             if (shouldKeepOpen) {
                 event.preventDefault();
                 onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(!checked);
             }
             onSelect === null || onSelect === void 0 ? void 0 : onSelect(event);
         }, id: id }, filterAttrs.filterAttrs(props)),
-        React.createElement("div", { className: index$4.classNames("arc-MenuItemCheckbox-box", {
-                "arc-MenuItemCheckbox-box--checked": checked,
-            }) }, checked && (React.createElement("svg", { style: { width: 14, height: 11 }, viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-            React.createElement("path", { d: "M5.99459 14L0.350576 8.23277C0.126079 8.00285 0 7.69132 0 7.36653C0 7.04173 0.126079 6.7302 0.350576 6.50028C0.578979 6.27752 0.88258 6.15324 1.19832 6.15324C1.51405 6.15324 1.81765 6.27752 2.04606 6.50028L5.99459 10.535L15.9385 0.374054C16.0491 0.25703 16.1814 0.163688 16.3277 0.0994738C16.474 0.0352599 16.6313 0.00145997 16.7905 4.626e-05C16.9497 -0.00136745 17.1076 0.0296342 17.255 0.0912406C17.4023 0.152847 17.5362 0.243825 17.6488 0.358867C17.7614 0.473908 17.8504 0.610709 17.9107 0.761287C17.971 0.911865 18.0013 1.0732 18 1.23589C17.9986 1.39858 17.9655 1.55936 17.9026 1.70884C17.8398 1.85833 17.7485 1.99352 17.6339 2.10655L5.99459 14Z", fill: "currentColor" })))),
+        React.createElement(CheckboxIcon.CheckboxIcon, { size: "s", id: id, error: false, isDisabled: isDisabled, onChange: function () { return onCheckedChange; }, checked: checked, indeterminate: false }),
         React.createElement(MenuItemContentTemplate, null, children)));
 };
 
+/**
+ * Do not edit directly
+ * Generated file
+ */
+
+const BtIconChevronLeftMid =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath fill='currentColor' fill-rule='evenodd' d='m7.621 8 2.849 2.852a.673.673 0 0 1-.732 1.097.7.7 0 0 1-.218-.145L6.196 8.476a.673.673 0 0 1 0-.951L9.52 4.197a.67.67 0 0 1 1.146.476c0 .178-.07.349-.196.475z' clip-rule='evenodd'/%3e%3c/svg%3e";
+
+/**
+ * Do not edit directly
+ * Generated file
+ */
+
+const BtIconTickAlt2Px =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='m13.5 21.914-4.707-4.707a1 1 0 0 1 0-1.414 1.024 1.024 0 0 1 1.414 0l3.293 3.293 8.293-8.293a1 1 0 1 1 1.414 1.414Z'/%3e%3c/svg%3e";
+
+/**
+ * Renders a menu item, optionally as a link if `href` is provided.
+ */
+var MenuItem = function (_a) {
+    var leadingIcon = _a.leadingIcon, supportingText = _a.supportingText, keyCommands = _a.keyCommands, trailingIcon = _a.trailingIcon, children = _a.children, onClick = _a.onClick, _b = _a.shouldKeepOpen, shouldKeepOpen = _b === void 0 ? true : _b, isDisabled = _a.isDisabled, href = _a.href, ariaLabel = _a.ariaLabel, props = tslib_es6.__rest(_a, ["leadingIcon", "supportingText", "keyCommands", "trailingIcon", "children", "onClick", "shouldKeepOpen", "isDisabled", "href", "ariaLabel"]);
+    var Component = href ? "a" : "div";
+    return (React.createElement(Item2, tslib_es6.__assign({ className: "arc-MenuItem", asChild: true, "aria-label": ariaLabel, onClick: isDisabled ? undefined : onClick, onSelect: function (event) {
+            if (shouldKeepOpen) {
+                event.preventDefault();
+            }
+        }, disabled: isDisabled }, filterAttrs.filterAttrs(props)),
+        React.createElement(Component, tslib_es6.__assign({ className: href && "arc-MenuItem--link", href: href }, props),
+            React.createElement(MenuItemContentTemplate, { leadingIcon: leadingIcon, trailingIcon: trailingIcon, supportingText: supportingText, keyCommands: keyCommands }, children))));
+};
+
+/**
+ * Visual separator used to divide groups of menu items.
+ */
+var MenuSeparator = function (props) {
+    return (React.createElement(Separator2, tslib_es6.__assign({ className: "arc-MenuSeparator" }, filterAttrs.filterAttrs(props)),
+        React.createElement(Rule.Rule, null)));
+};
+
 /**
  * The component that pops out when the dropdown menu is open.
  */
 var MenuContent = React.forwardRef(function (_a, ref) {
-    var children = _a.children, width = _a.width, minWidth = _a.minWidth, maxWidth = _a.maxWidth, _b = _a.align, align = _b === void 0 ? "start" : _b, alignOffset = _a.alignOffset, side = _a.side, props = filterAttrs.__rest(_a, ["children", "width", "minWidth", "maxWidth", "align", "alignOffset", "side"]);
-    return (React.createElement(Content2, filterAttrs.__assign({ ref: ref, style: { width: width, minWidth: minWidth, maxWidth: maxWidth }, className: "arc-MenuContent", sideOffset: 12, loop: true, collisionPadding: 12, forceMount: true, align: align, alignOffset: alignOffset, side: side }, filterAttrs.filterAttrs(props)), children));
+    var children = _a.children, width = _a.width, minWidth = _a.minWidth, maxWidth = _a.maxWidth, _b = _a.align, align = _b === void 0 ? "start" : _b, alignOffset = _a.alignOffset, side = _a.side, initalTitle = _a.initalTitle, isFluidToViewport = _a.isFluidToViewport, props = tslib_es6.__rest(_a, ["children", "width", "minWidth", "maxWidth", "align", "alignOffset", "side", "initalTitle", "isFluidToViewport"]);
+    var _c = useMenuContext(), isMobileMenu = _c.isMobileMenu, stack = _c.stack, goBack = _c.goBack, defaultWidth = _c.defaultWidth, reset = _c.reset;
+    if (!isMobileMenu) {
+        return (React.createElement(Content2, tslib_es6.__assign({ ref: ref, style: { width: width !== null && width !== void 0 ? width : defaultWidth, minWidth: minWidth, maxWidth: maxWidth }, className: "arc-MenuContent", sideOffset: 12, loop: true, collisionPadding: 0, forceMount: true, align: align, alignOffset: alignOffset, side: side }, filterAttrs.filterAttrs(props)),
+            React.createElement("div", { className: "arc-MenuContent-content" }, children)));
+    }
+    var active = stack.length > 0 ? stack[stack.length - 1].content : children;
+    var prevTitle = stack.length > 1 ? stack[stack.length - 2].title : initalTitle || "Back";
+    return (React.createElement(Content2, tslib_es6.__assign({ style: { width: width !== null && width !== void 0 ? width : defaultWidth, minWidth: minWidth, maxWidth: maxWidth }, sideOffset: 12, collisionPadding: 12, className: index$4.classNames("arc-MenuContent arc-MenuContent--mobile", {
+            "arc-MenuContent--isFluid": isFluidToViewport || defaultWidth === "fluid",
+        }), side: "bottom", avoidCollisions: true, onKeyDown: function (e) {
+            if (stack.length > 0) {
+                if (e.key === "ArrowLeft") {
+                    goBack(true);
+                }
+            }
+        }, forceMount: true, onPointerDownOutside: reset, onEscapeKeyDown: reset }, filterAttrs.filterAttrs(props)),
+        stack.length > 0 && (React.createElement(React.Fragment, null,
+            React.createElement(MenuItem, { onClick: goBack, leadingIcon: BtIconChevronLeftMid }, prevTitle),
+            React.createElement(MenuSeparator, null))),
+        React.createElement("div", { key: stack.length, className: "arc-MenuContent-content arc-MenuContent-fade" }, active)));
 });
 
 /**
@@ -1372,8 +1495,8 @@ var MenuFooter = function (_a) {
  * Groups related menu items together within a dropdown menu.
  */
 var MenuGroup = function (_a) {
-    var children = _a.children, props = filterAttrs.__rest(_a, ["children"]);
-    return (React.createElement(Group2, filterAttrs.__assign({ className: "arc-MenuGroup" }, filterAttrs.filterAttrs(props)), children));
+    var children = _a.children, props = tslib_es6.__rest(_a, ["children"]);
+    return (React.createElement(Group2, tslib_es6.__assign({ className: "arc-MenuGroup" }, filterAttrs.filterAttrs(props)), children));
 };
 
 /**
@@ -1382,7 +1505,7 @@ var MenuGroup = function (_a) {
 var MenuHeader = function (_a) {
     var leadingIcon = _a.leadingIcon, trailingIcon = _a.trailingIcon, supportingText = _a.supportingText, keyCommands = _a.keyCommands, children = _a.children, onClick = _a.onClick, isDisabled = _a.isDisabled, ariaLabel = _a.ariaLabel;
     return (React.createElement("div", { className: "arc-MenuHeader" },
-        React.createElement(Item2, { className: "arc-MenuItem ", style: { marginBottom: 0 }, "aria-label": ariaLabel, onClick: onClick, disabled: isDisabled },
+        React.createElement(Item2, { className: "arc-MenuItem", style: { marginBottom: 0 }, "aria-label": ariaLabel, onClick: onClick, disabled: isDisabled },
             React.createElement(MenuItemContentTemplate, { leadingIcon: leadingIcon, trailingIcon: trailingIcon, supportingText: supportingText, keyCommands: keyCommands }, children)),
         React.createElement("div", { className: "arc-MenuSeparator", style: {
                 paddingBottom: 0,
@@ -1390,27 +1513,12 @@ var MenuHeader = function (_a) {
             React.createElement(Rule.Rule, null))));
 };
 
-/**
- * Renders a menu item, optionally as a link if `href` is provided.
- */
-var MenuItem = function (_a) {
-    var leadingIcon = _a.leadingIcon, supportingText = _a.supportingText, keyCommands = _a.keyCommands, trailingIcon = _a.trailingIcon, children = _a.children, onClick = _a.onClick, _b = _a.shouldKeepOpen, shouldKeepOpen = _b === void 0 ? true : _b, isDisabled = _a.isDisabled, href = _a.href, ariaLabel = _a.ariaLabel, props = filterAttrs.__rest(_a, ["leadingIcon", "supportingText", "keyCommands", "trailingIcon", "children", "onClick", "shouldKeepOpen", "isDisabled", "href", "ariaLabel"]);
-    var Component = href ? "a" : "div";
-    return (React.createElement(Item2, filterAttrs.__assign({ className: "arc-MenuItem", asChild: true, "aria-label": ariaLabel, onClick: isDisabled ? undefined : onClick, onSelect: function (event) {
-            if (shouldKeepOpen) {
-                event.preventDefault();
-            }
-        }, disabled: isDisabled }, filterAttrs.filterAttrs(props)),
-        React.createElement(Component, filterAttrs.__assign({ className: href && "arc-MenuItem--link", href: href }, props),
-            React.createElement(MenuItemContentTemplate, { leadingIcon: leadingIcon, trailingIcon: trailingIcon, supportingText: supportingText, keyCommands: keyCommands }, children))));
-};
-
 /**
  * Provides a label to group related menu items.
  */
 var MenuLabel = function (_a) {
-    var children = _a.children, props = filterAttrs.__rest(_a, ["children"]);
-    return (React.createElement(Item2, filterAttrs.__assign({ asChild: true, className: "arc-MenuLabel", tabIndex: 0, role: "presentation" }, filterAttrs.filterAttrs(props), { style: { pointerEvents: "none" } }),
+    var children = _a.children, props = tslib_es6.__rest(_a, ["children"]);
+    return (React.createElement(Item2, tslib_es6.__assign({ asChild: true, className: "arc-MenuLabel", tabIndex: 0, role: "presentation" }, filterAttrs.filterAttrs(props), { style: { pointerEvents: "none" } }),
         React.createElement("div", null, children)));
 };
 
@@ -1418,34 +1526,26 @@ var MenuLabel = function (_a) {
  * When used, portals the content part into the body. By default it's arc's theme element
  */
 var MenuPortal = function (_a) {
-    var children = _a.children, props = filterAttrs.__rest(_a, ["children"]);
+    var children = _a.children, props = tslib_es6.__rest(_a, ["children"]);
     var _b = index$1.useThemeElement(), themeElement = _b[0], setThemeElement = _b[1];
     return (React.createElement("span", { ref: setThemeElement, style: { display: "none" } },
-        React.createElement(Portal2, filterAttrs.__assign({ container: themeElement }, filterAttrs.filterAttrs(props)), children)));
+        React.createElement(Portal2, tslib_es6.__assign({ container: themeElement }, filterAttrs.filterAttrs(props)), children)));
 };
 
 /**
  * Groups menu items allowing single selection from multiple options.
  */
 var MenuGroupSingleSelect = function (_a) {
-    var children = _a.children, value = _a.value, onValueChange = _a.onValueChange, props = filterAttrs.__rest(_a, ["children", "value", "onValueChange"]);
-    return (React.createElement(RadioGroup2, filterAttrs.__assign({ className: "arc-MenuGroupSingleSelect", value: value, onValueChange: onValueChange }, filterAttrs.filterAttrs(props)), children));
+    var children = _a.children, value = _a.value, onValueChange = _a.onValueChange, props = tslib_es6.__rest(_a, ["children", "value", "onValueChange"]);
+    return (React.createElement(RadioGroup2, tslib_es6.__assign({ className: "arc-MenuGroupSingleSelect", value: value, onValueChange: onValueChange }, filterAttrs.filterAttrs(props)), children));
 };
 
-/**
- * Do not edit directly
- * Generated file
- */
-
-const BtIconTickAlt2Px =
-  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='m13.5 21.914-4.707-4.707a1 1 0 0 1 0-1.414 1.024 1.024 0 0 1 1.414 0l3.293 3.293 8.293-8.293a1 1 0 1 1 1.414 1.414Z'/%3e%3c/svg%3e";
-
 /**
  * A selectable menu item used within a radio group.
  */
 var MenuItemSingleSelect = function (_a) {
-    var children = _a.children, value = _a.value, _b = _a.disabled, disabled = _b === void 0 ? false : _b, onSelect = _a.onSelect, leadingIcon = _a.leadingIcon, supportingText = _a.supportingText, _c = _a.shouldKeepOpen, shouldKeepOpen = _c === void 0 ? true : _c, props = filterAttrs.__rest(_a, ["children", "value", "disabled", "onSelect", "leadingIcon", "supportingText", "shouldKeepOpen"]);
-    return (React.createElement(RadioItem2, filterAttrs.__assign({ className: "arc-MenuItem arc-MenuItemSingleSelect", value: value, disabled: disabled, onSelect: function (event) {
+    var children = _a.children, value = _a.value, _b = _a.disabled, disabled = _b === void 0 ? false : _b, onSelect = _a.onSelect, leadingIcon = _a.leadingIcon, supportingText = _a.supportingText, _c = _a.shouldKeepOpen, shouldKeepOpen = _c === void 0 ? true : _c, props = tslib_es6.__rest(_a, ["children", "value", "disabled", "onSelect", "leadingIcon", "supportingText", "shouldKeepOpen"]);
+    return (React.createElement(RadioItem2, tslib_es6.__assign({ className: "arc-MenuItem arc-MenuItemSingleSelect", value: value, disabled: disabled, onSelect: function (event) {
             if (shouldKeepOpen) {
                 event.preventDefault();
             }
@@ -1462,7 +1562,7 @@ var MenuScrollable = function (_a) {
     var scrollableRefFunc = function (el) {
         var totalSiblingHeight = 0;
         // get the closest Menu.Content element this will always exist within the menu component
-        var contentContainer = el === null || el === void 0 ? void 0 : el.closest(".arc-MenuContent");
+        var contentContainer = el === null || el === void 0 ? void 0 : el.closest(".arc-MenuContent-content");
         if (!contentContainer || !el)
             return;
         // loop over all children in Menu.Content children to get height of each non scrollable element (excluding the scroll element itself)
@@ -1478,38 +1578,73 @@ var MenuScrollable = function (_a) {
     return (React.createElement("div", { ref: scrollableRefFunc, className: "arc-MenuScrollable" }, children));
 };
 
-/**
- * Visual separator used to divide groups of menu items.
- */
-var MenuSeparator = function (props) {
-    return (React.createElement(Separator2, filterAttrs.__assign({ className: "arc-MenuSeparator" }, filterAttrs.filterAttrs(props)),
-        React.createElement(Rule.Rule, null)));
-};
-
 /**
  * Container for multi-level menu content within a dropdown menu.
  */
 var MenuItemMultiLevel = function (_a) {
-    var children = _a.children, props = filterAttrs.__rest(_a, ["children"]);
-    return React.createElement(Sub2, filterAttrs.__assign({}, filterAttrs.filterAttrs(props)),
-        " ",
-        children);
+    var _b;
+    var children = _a.children, props = tslib_es6.__rest(_a, ["children"]);
+    var isMobileMenu = useMenuContext().isMobileMenu;
+    if (!isMobileMenu) {
+        return React.createElement(Sub2, tslib_es6.__assign({}, filterAttrs.filterAttrs(props)), children);
+    }
+    var arr = React.Children.toArray(children);
+    // assuming that there will be two children in menu item multi level
+    var trigger = arr[0];
+    var portal = arr[1];
+    var pairedContent;
+    if (portal && ((_b = portal.props) === null || _b === void 0 ? void 0 : _b.children)) {
+        var portalChild = React.Children.toArray(portal.props.children);
+        pairedContent = portalChild.find(function (el) { var _a; return ((_a = el === null || el === void 0 ? void 0 : el.type) === null || _a === void 0 ? void 0 : _a.displayName) === "MenuItemMultiLevelContent"; });
+    }
+    if (!trigger || !pairedContent) {
+        console.warn("MenuItemMultiLevel requires both a Trigger and Portal");
+    }
+    // Inject content into the trigger,  skip rendering the portal in mobile
+    return React.cloneElement(trigger, { pairedContent: pairedContent });
 };
 
 /**
  * The multi-level menu content that pops out when a menu item with children is hovered or clicked.
  */
 var MenuItemMultiLevelContent = React.forwardRef(function (_a, ref) {
-    var children = _a.children, width = _a.width, minWidth = _a.minWidth, maxWidth = _a.maxWidth, alignOffset = _a.alignOffset, props = filterAttrs.__rest(_a, ["children", "width", "minWidth", "maxWidth", "alignOffset"]);
-    return (React.createElement(SubContent2, filterAttrs.__assign({ ref: ref, style: { width: width, minWidth: minWidth, maxWidth: maxWidth }, className: "arc-MenuContent", sideOffset: 24, collisionPadding: 12, avoidCollisions: true, alignOffset: alignOffset }, filterAttrs.filterAttrs(props)), children));
+    var children = _a.children, width = _a.width, minWidth = _a.minWidth, maxWidth = _a.maxWidth, alignOffset = _a.alignOffset, props = tslib_es6.__rest(_a, ["children", "width", "minWidth", "maxWidth", "alignOffset"]);
+    var _b = useMenuContext(), isMobileMenu = _b.isMobileMenu, defaultWidth = _b.defaultWidth;
+    if (isMobileMenu) {
+        return React.createElement(React.Fragment, null, children);
+    }
+    return (React.createElement(SubContent2, tslib_es6.__assign({ ref: ref, style: { width: width !== null && width !== void 0 ? width : defaultWidth, minWidth: minWidth, maxWidth: maxWidth }, className: "arc-MenuContent", sideOffset: 24, collisionPadding: 12, avoidCollisions: true, alignOffset: alignOffset }, filterAttrs.filterAttrs(props)), children));
 });
+MenuItemMultiLevelContent.displayName = "MenuItemMultiLevelContent";
 
 /**
  * Trigger element that opens a multi-level menu when selected.
  */
 var MenuItemMultiLevelTrigger = function (_a) {
-    var children = _a.children, isDisabled = _a.isDisabled, leadingIcon = _a.leadingIcon, supportingText = _a.supportingText, keyCommands = _a.keyCommands, ariaLabel = _a.ariaLabel, props = filterAttrs.__rest(_a, ["children", "isDisabled", "leadingIcon", "supportingText", "keyCommands", "ariaLabel"]);
-    return (React.createElement(SubTrigger2, filterAttrs.__assign({ className: "arc-MenuItem arc-MenuItem--trigger", disabled: isDisabled, "aria-label": ariaLabel }, filterAttrs.filterAttrs(props)),
+    var children = _a.children, isDisabled = _a.isDisabled, leadingIcon = _a.leadingIcon, supportingText = _a.supportingText, keyCommands = _a.keyCommands, ariaLabel = _a.ariaLabel, pairedContent = _a.pairedContent, props = tslib_es6.__rest(_a, ["children", "isDisabled", "leadingIcon", "supportingText", "keyCommands", "ariaLabel", "pairedContent"]);
+    var _b = useMenuContext(), isMobileMenu = _b.isMobileMenu, goForward = _b.goForward;
+    var moveFoward = function (e, navigatedViaKeyboard) {
+        e.preventDefault();
+        if (pairedContent) {
+            goForward({
+                title: String(children),
+                content: pairedContent,
+                triggerId: String(children),
+            }, navigatedViaKeyboard);
+        }
+    };
+    if (isMobileMenu) {
+        return (React.createElement(Item2, tslib_es6.__assign({ disabled: isDisabled, "aria-label": ariaLabel, onKeyDown: function (e) {
+                if (e.key === "ArrowRight") {
+                    moveFoward(e, true);
+                }
+            }, onClick: function (e) {
+                moveFoward(e, false);
+            }, className: "arc-MenuItem", "data-menu-trigger": children }, filterAttrs.filterAttrs(props)),
+            React.createElement(MenuItemContentTemplate, { leadingIcon: leadingIcon, trailingIcon: BtIconChevronRightMid.BtIconChevronRightMid, supportingText: supportingText, keyCommands: keyCommands }, "".concat(children))));
+    }
+    // desktop fallback
+    return (React.createElement(SubTrigger2, tslib_es6.__assign({ className: "arc-MenuItem arc-MenuItem--trigger", disabled: isDisabled, "aria-label": ariaLabel }, filterAttrs.filterAttrs(props)),
         React.createElement("div", { className: "arc-MenuItem-content" },
             leadingIcon && (React.createElement("div", { className: "arc-MenuItem-leadingIcon" },
                 React.createElement(Icon.Icon, { icon: leadingIcon, size: 24 }))),
@@ -1526,8 +1661,11 @@ var MenuItemMultiLevelTrigger = function (_a) {
  * The element that toggles the menu.
  */
 var MenuTrigger = function (_a) {
-    var children = _a.children, asChild = _a.asChild, props = filterAttrs.__rest(_a, ["children", "asChild"]);
-    return (React.createElement(Trigger, filterAttrs.__assign({ className: "arc-MenuTrigger", asChild: asChild }, filterAttrs.filterAttrs(props)), children));
+    var children = _a.children, asChild = _a.asChild, props = tslib_es6.__rest(_a, ["children", "asChild"]);
+    var surface = React.useContext(Surface.Context).surface;
+    return (React.createElement(Trigger, tslib_es6.__assign({ className: index$4.classNames("arc-MenuTrigger", {
+            "arc-MenuTrigger--onDarkSurface": surface === "dark",
+        }), asChild: asChild }, filterAttrs.filterAttrs(props)), children));
 };
 
 exports.Menu = Menu;