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

package/lib/Menu/Menu.mjs

@@ -1,23 +1,29 @@
 'use client';
-import { _ as __rest, a as __assign, f as filterAttrs } from '../_shared/esm/filter-attrs-B6CM-NUr.mjs';
+import { b as __spreadArray, _ as __rest, a as __assign } from '../_shared/esm/tslib.es6-w7hdJ3oZ.mjs';
 import * as React from 'react';
-import React__default from 'react';
-import { u as useComposedRefs, P as Primitive, c as composeEventHandlers, h as hideOthers, a as useFocusGuards, F as FocusScope, D as DismissableLayer, d as composeRefs, R as ReactRemoveScroll, S as Slot, e as dispatchDiscreteCustomEvent, b as Portal$1 } from '../_shared/esm/Combination-BpO6XTeS.mjs';
+import React__default, { createContext, useContext, useState } from 'react';
+import { u as useComposedRefs, P as Primitive, c as composeEventHandlers, h as hideOthers, a as useFocusGuards, F as FocusScope, D as DismissableLayer, d as composeRefs, R as ReactRemoveScroll, S as Slot, e as dispatchDiscreteCustomEvent, b as Portal$1 } from '../_shared/esm/Combination-BQ4XBtF-.mjs';
 import { c as createContextScope, u as useControllableState, f as useCallbackRef, a as useId, e as useThemeElement } from '../_shared/esm/index-Bz2JQq34.mjs';
-import { c as createCollection, u as useDirection } from '../_shared/esm/index-BbAu4d3T.mjs';
-import { c as createPopperScope, A as Anchor, C as Content, a as Arrow, R as Root2$1 } from '../_shared/esm/index-DLovItWo.mjs';
-import { P as Presence } from '../_shared/esm/index-DXTwueLZ.mjs';
+import { c as createCollection, u as useDirection } from '../_shared/esm/index-u47CK8Y0.mjs';
+import { c as createPopperScope, A as Anchor, C as Content, a as Arrow, R as Root2$1 } from '../_shared/esm/index-BFKdmv_g.mjs';
+import { P as Presence } from '../_shared/esm/index-GCEHSsY8.mjs';
 import { jsx } from 'react/jsx-runtime';
+import { f as filterAttrs } from '../_shared/esm/filter-attrs-v_SweZXP.mjs';
+import { I as Icon } from '../_shared/esm/Icon-CCUbr_AO.mjs';
+import { T as Text } from '../_shared/esm/Text-BAzOkkzN.mjs';
+import { C as CheckboxIcon } from '../_shared/esm/CheckboxIcon-Bzto2Tke.mjs';
 import { c as classNames } from '../_shared/esm/index-5C0-U8cc.mjs';
-import { I as Icon } from '../_shared/esm/Icon-CcPOJcQm.mjs';
-import { T as Text } from '../_shared/esm/Text-CBlnm5CT.mjs';
-import { R as Rule } from '../_shared/esm/Rule-3gdMHH-R.mjs';
+import { R as Rule } from '../_shared/esm/Rule-I1w3EaZi.mjs';
 import { B as BtIconChevronRightMid } from '../_shared/esm/BtIconChevronRightMid-DE4lmVaG.mjs';
+import { C as Context } from '../_shared/esm/Surface-C69KVzkY.mjs';
 import 'react-dom';
 import '../_shared/esm/index-CWHcEz3_.mjs';
 import '../_shared/esm/suffix-modifier-B_pO0UkF.mjs';
 import '../_shared/esm/index-Spae4j7j.mjs';
-import '../_shared/esm/Surface-Colbp3Zx.mjs';
+import '../_shared/esm/ThemeIcon-B0SruPZC.mjs';
+import '../_shared/esm/FormControl-Pc1aHUNM.mjs';
+import '../_shared/esm/DisclosureMini-ClSe9sSt.mjs';
+import '../_shared/esm/VisuallyHidden-aSQ4RA1o.mjs';
 
 var ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus";
 var EVENT_OPTIONS = { bubbles: false, cancelable: true };
@@ -247,7 +253,7 @@ var [createMenuContext, createMenuScope] = createContextScope(MENU_NAME, [
 ]);
 var usePopperScope = 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;
@@ -271,7 +277,7 @@ var Menu$1 = (props) => {
     };
   }, []);
   return /* @__PURE__ */ jsx(Root2$1, { ...popperScope, children: /* @__PURE__ */ jsx(
-    MenuProvider,
+    MenuProvider$1,
     {
       scope: __scopeMenu,
       open,
@@ -308,7 +314,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__ */ jsx(PortalProvider, { scope: __scopeMenu, forceMount, children: /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx(Portal$1, { asChild: true, container, children }) }) });
 };
 MenuPortal$1.displayName = PORTAL_NAME$1;
@@ -318,14 +324,14 @@ var MenuContent$1 = React.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__ */ jsx(Collection.Provider, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx(Collection.Slot, { scope: props.__scopeMenu, children: rootContext.modal ? /* @__PURE__ */ jsx(MenuRootContentModal, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsx(MenuRootContentNonModal, { ...contentProps, ref: forwardedRef }) }) }) });
   }
 );
 var MenuRootContentModal = React.forwardRef(
   (props, forwardedRef) => {
-    const context = useMenuContext(CONTENT_NAME$1, props.__scopeMenu);
+    const context = useMenuContext$1(CONTENT_NAME$1, props.__scopeMenu);
     const ref = React.useRef(null);
     const composedRefs = useComposedRefs(forwardedRef, ref);
     React.useEffect(() => {
@@ -351,7 +357,7 @@ var MenuRootContentModal = React.forwardRef(
   }
 );
 var MenuRootContentNonModal = React.forwardRef((props, forwardedRef) => {
-  const context = useMenuContext(CONTENT_NAME$1, props.__scopeMenu);
+  const context = useMenuContext$1(CONTENT_NAME$1, props.__scopeMenu);
   return /* @__PURE__ */ jsx(
     MenuContentImpl,
     {
@@ -382,7 +388,7 @@ var MenuContentImpl = React.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);
@@ -784,7 +790,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.useState(null);
   const [content, setContent] = React.useState(null);
@@ -794,7 +800,7 @@ var MenuSub = (props) => {
     return () => handleOpenChange(false);
   }, [parentMenuContext.open, handleOpenChange]);
   return /* @__PURE__ */ jsx(Root2$1, { ...popperScope, children: /* @__PURE__ */ jsx(
-    MenuProvider,
+    MenuProvider$1,
     {
       scope: __scopeMenu,
       open,
@@ -819,7 +825,7 @@ MenuSub.displayName = SUB_NAME;
 var SUB_TRIGGER_NAME$1 = "MenuSubTrigger";
 var MenuSubTrigger = React.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);
@@ -922,7 +928,7 @@ var MenuSubContent = React.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.useRef(null);
@@ -1287,12 +1293,74 @@ var Sub2 = DropdownMenuSub;
 var SubTrigger2 = DropdownMenuSubTrigger;
 var SubContent2 = DropdownMenuSubContent;
 
+var MenuContext = createContext(null);
+var useMenuContext = function () {
+    var ctx = 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 = 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 __spreadArray(__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__default.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 = __rest(_a, ["defaultOpen", "open", "onOpenChange", "modal", "children"]);
-    return (React__default.createElement(Root2, __assign({ defaultOpen: defaultOpen, open: open, onOpenChange: onOpenChange, modal: modal }, 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 = __rest(_a, ["defaultOpen", "open", "onOpenChange", "modal", "isMobileMenu", "children", "defaultWidth"]);
+    return (React__default.createElement(Root2, __assign({ defaultOpen: defaultOpen, open: open, onOpenChange: onOpenChange, modal: modal }, filterAttrs(props)),
+        React__default.createElement(MenuProvider, { isMobileMenu: isMobileMenu, defaultWidth: defaultWidth }, children)));
 };
 
 var MenuItemContentTemplate = function (_a) {
@@ -1319,19 +1387,74 @@ var MenuItemCheckbox = function (_a) {
             }
             onSelect === null || onSelect === void 0 ? void 0 : onSelect(event);
         }, id: id }, filterAttrs(props)),
-        React__default.createElement("div", { className: classNames("arc-MenuItemCheckbox-box", {
-                "arc-MenuItemCheckbox-box--checked": checked,
-            }) }, checked && (React__default.createElement("svg", { style: { width: 14, height: 11 }, viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-            React__default.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__default.createElement(CheckboxIcon, { size: "s", id: id, error: false, isDisabled: isDisabled, onChange: function () { return onCheckedChange; }, checked: checked, indeterminate: false }),
         React__default.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 = __rest(_a, ["leadingIcon", "supportingText", "keyCommands", "trailingIcon", "children", "onClick", "shouldKeepOpen", "isDisabled", "href", "ariaLabel"]);
+    var Component = href ? "a" : "div";
+    return (React__default.createElement(Item2, __assign({ className: "arc-MenuItem", asChild: true, "aria-label": ariaLabel, onClick: isDisabled ? undefined : onClick, onSelect: function (event) {
+            if (shouldKeepOpen) {
+                event.preventDefault();
+            }
+        }, disabled: isDisabled }, filterAttrs(props)),
+        React__default.createElement(Component, __assign({ className: href && "arc-MenuItem--link", href: href }, props),
+            React__default.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__default.createElement(Separator2, __assign({ className: "arc-MenuSeparator" }, filterAttrs(props)),
+        React__default.createElement(Rule, null)));
+};
+
 /**
  * The component that pops out when the dropdown menu is open.
  */
 var MenuContent = React__default.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 = __rest(_a, ["children", "width", "minWidth", "maxWidth", "align", "alignOffset", "side"]);
-    return (React__default.createElement(Content2, __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(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 = __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__default.createElement(Content2, __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(props)),
+            React__default.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__default.createElement(Content2, __assign({ style: { width: width !== null && width !== void 0 ? width : defaultWidth, minWidth: minWidth, maxWidth: maxWidth }, sideOffset: 12, collisionPadding: 12, className: 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(props)),
+        stack.length > 0 && (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(MenuItem, { onClick: goBack, leadingIcon: BtIconChevronLeftMid }, prevTitle),
+            React__default.createElement(MenuSeparator, null))),
+        React__default.createElement("div", { key: stack.length, className: "arc-MenuContent-content arc-MenuContent-fade" }, active)));
 });
 
 /**
@@ -1362,7 +1485,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__default.createElement("div", { className: "arc-MenuHeader" },
-        React__default.createElement(Item2, { className: "arc-MenuItem ", style: { marginBottom: 0 }, "aria-label": ariaLabel, onClick: onClick, disabled: isDisabled },
+        React__default.createElement(Item2, { className: "arc-MenuItem", style: { marginBottom: 0 }, "aria-label": ariaLabel, onClick: onClick, disabled: isDisabled },
             React__default.createElement(MenuItemContentTemplate, { leadingIcon: leadingIcon, trailingIcon: trailingIcon, supportingText: supportingText, keyCommands: keyCommands }, children)),
         React__default.createElement("div", { className: "arc-MenuSeparator", style: {
                 paddingBottom: 0,
@@ -1370,21 +1493,6 @@ var MenuHeader = function (_a) {
             React__default.createElement(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 = __rest(_a, ["leadingIcon", "supportingText", "keyCommands", "trailingIcon", "children", "onClick", "shouldKeepOpen", "isDisabled", "href", "ariaLabel"]);
-    var Component = href ? "a" : "div";
-    return (React__default.createElement(Item2, __assign({ className: "arc-MenuItem", asChild: true, "aria-label": ariaLabel, onClick: isDisabled ? undefined : onClick, onSelect: function (event) {
-            if (shouldKeepOpen) {
-                event.preventDefault();
-            }
-        }, disabled: isDisabled }, filterAttrs(props)),
-        React__default.createElement(Component, __assign({ className: href && "arc-MenuItem--link", href: href }, props),
-            React__default.createElement(MenuItemContentTemplate, { leadingIcon: leadingIcon, trailingIcon: trailingIcon, supportingText: supportingText, keyCommands: keyCommands }, children))));
-};
-
 /**
  * Provides a label to group related menu items.
  */
@@ -1412,14 +1520,6 @@ var MenuGroupSingleSelect = function (_a) {
     return (React__default.createElement(RadioGroup2, __assign({ className: "arc-MenuGroupSingleSelect", value: value, onValueChange: onValueChange }, 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.
  */
@@ -1442,7 +1542,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)
@@ -1458,22 +1558,30 @@ var MenuScrollable = function (_a) {
     return (React__default.createElement("div", { ref: scrollableRefFunc, className: "arc-MenuScrollable" }, children));
 };
 
-/**
- * Visual separator used to divide groups of menu items.
- */
-var MenuSeparator = function (props) {
-    return (React__default.createElement(Separator2, __assign({ className: "arc-MenuSeparator" }, filterAttrs(props)),
-        React__default.createElement(Rule, null)));
-};
-
 /**
  * Container for multi-level menu content within a dropdown menu.
  */
 var MenuItemMultiLevel = function (_a) {
+    var _b;
     var children = _a.children, props = __rest(_a, ["children"]);
-    return React__default.createElement(Sub2, __assign({}, filterAttrs(props)),
-        " ",
-        children);
+    var isMobileMenu = useMenuContext().isMobileMenu;
+    if (!isMobileMenu) {
+        return React__default.createElement(Sub2, __assign({}, filterAttrs(props)), children);
+    }
+    var arr = React__default.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__default.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__default.cloneElement(trigger, { pairedContent: pairedContent });
 };
 
 /**
@@ -1481,14 +1589,41 @@ var MenuItemMultiLevel = function (_a) {
  */
 var MenuItemMultiLevelContent = React__default.forwardRef(function (_a, ref) {
     var children = _a.children, width = _a.width, minWidth = _a.minWidth, maxWidth = _a.maxWidth, alignOffset = _a.alignOffset, props = __rest(_a, ["children", "width", "minWidth", "maxWidth", "alignOffset"]);
-    return (React__default.createElement(SubContent2, __assign({ ref: ref, style: { width: width, minWidth: minWidth, maxWidth: maxWidth }, className: "arc-MenuContent", sideOffset: 24, collisionPadding: 12, avoidCollisions: true, alignOffset: alignOffset }, filterAttrs(props)), children));
+    var _b = useMenuContext(), isMobileMenu = _b.isMobileMenu, defaultWidth = _b.defaultWidth;
+    if (isMobileMenu) {
+        return React__default.createElement(React__default.Fragment, null, children);
+    }
+    return (React__default.createElement(SubContent2, __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(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 = __rest(_a, ["children", "isDisabled", "leadingIcon", "supportingText", "keyCommands", "ariaLabel"]);
+    var children = _a.children, isDisabled = _a.isDisabled, leadingIcon = _a.leadingIcon, supportingText = _a.supportingText, keyCommands = _a.keyCommands, ariaLabel = _a.ariaLabel, pairedContent = _a.pairedContent, props = __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__default.createElement(Item2, __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(props)),
+            React__default.createElement(MenuItemContentTemplate, { leadingIcon: leadingIcon, trailingIcon: BtIconChevronRightMid, supportingText: supportingText, keyCommands: keyCommands }, "".concat(children))));
+    }
+    // desktop fallback
     return (React__default.createElement(SubTrigger2, __assign({ className: "arc-MenuItem arc-MenuItem--trigger", disabled: isDisabled, "aria-label": ariaLabel }, filterAttrs(props)),
         React__default.createElement("div", { className: "arc-MenuItem-content" },
             leadingIcon && (React__default.createElement("div", { className: "arc-MenuItem-leadingIcon" },
@@ -1507,7 +1642,10 @@ var MenuItemMultiLevelTrigger = function (_a) {
  */
 var MenuTrigger = function (_a) {
     var children = _a.children, asChild = _a.asChild, props = __rest(_a, ["children", "asChild"]);
-    return (React__default.createElement(Trigger, __assign({ className: "arc-MenuTrigger", asChild: asChild }, filterAttrs(props)), children));
+    var surface = useContext(Context).surface;
+    return (React__default.createElement(Trigger, __assign({ className: classNames("arc-MenuTrigger", {
+            "arc-MenuTrigger--onDarkSurface": surface === "dark",
+        }), asChild: asChild }, filterAttrs(props)), children));
 };
 
 export { Menu, MenuContent, MenuFooter, MenuGroup, MenuGroupSingleSelect, MenuHeader, MenuItem, MenuItemCheckbox, MenuItemContentTemplate, MenuItemMultiLevel, MenuItemMultiLevelContent, MenuItemMultiLevelTrigger, MenuItemSingleSelect, MenuLabel, MenuPortal, MenuScrollable, MenuSeparator, MenuTrigger };

package/lib/Menu/styles.css

@@ -1 +1 @@
-.arc-v12-0-0-beta-23 .arc .arc-MenuContent{background:#ffffff;border-radius:12px;box-shadow:0 0 1px 0 rgba(0,0,0,0.2),0 4px 12px 0 rgba(0,0,0,0.1);display:flex;flex-direction:column;padding:12px;width:-moz-fit-content;width:fit-content;z-index:3}.arc-v12-0-0-beta-23 .arc .arc-MenuContent-enterDown-animation{animation:move-down 0.2s ease-out forwards}.arc-v12-0-0-beta-23 .arc .arc-MenuContent-enterLeft-animation{animation:move-left 0.2s ease-out forwards}.arc-v12-0-0-beta-23 .arc .arc-MenuContent-enterRight-animation{animation:move-right 0.2s ease-out forwards}@keyframes move-down{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes move-left{from{opacity:0.1;transform:translateX(-100%)}to{opacity:1;transform:translateX(0)}}@keyframes move-right{from{opacity:0.1;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}.arc-v12-0-0-beta-23 .arc .arc-MenuItem{border-radius:var(--menu-card-border-radius-s);display:flex;flex-direction:row;gap:var(--menu-card-gap-m);outline:none;padding:var(--menu-card-padding-m);position:relative}.arc-v12-0-0-beta-23 .arc .arc-MenuItem--link,.arc-v12-0-0-beta-23 .arc .arc-MenuItem--link[data-highlighted]{color:var(--menu-card-text-primary);text-decoration:none}.arc-v12-0-0-beta-23 .arc .arc-MenuItem[data-highlighted]{background-color:var(--menu-card-bg-hover);border-radius:var(--menu-card-border-radius-s);border-bottom-left-radius:4px;border-top-left-radius:4px;cursor:pointer;z-index:4}.arc-v12-0-0-beta-23 .arc .arc-MenuItem[data-highlighted]::before{background-color:var(--menu-card-foreground-hover);border-bottom-left-radius:var(--menu-card-border-radius-s);border-top-left-radius:var(--menu-card-border-radius-s);content:"";height:100%;left:0;position:absolute;top:0;transition:background-color 0.3s ease;width:3px}.arc-v12-0-0-beta-23 .arc .arc-MenuItem[data-disabled]{color:var(--menu-card-text-disabled);cursor:not-allowed}.arc-v12-0-0-beta-23 .arc .arc-MenuItem-content{display:flex;gap:var(--menu-card-gap-m)}.arc-v12-0-0-beta-23 .arc .arc-MenuItem-actions{display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--menu-card-gap-m);margin-left:auto;text-wrap:nowrap}.arc-v12-0-0-beta-23 .arc .arc-MenuItem[data-state="checked"],.arc-v12-0-0-beta-23 .arc .arc-MenuItem[aria-expanded="true"]{background:var(--menu-card-bg-active)}.arc-v12-0-0-beta-23 .arc .arc-MenuItem-text{display:flex;flex-direction:column;flex-wrap:nowrap;gap:var(--menu-card-gap-xs);text-wrap:wrap}.arc-v12-0-0-beta-23 .arc .arc-MenuSeparator{margin-left:-12px;margin-right:-12px;padding:var(--menu-card-padding-m) 0}.arc-v12-0-0-beta-23 .arc .arc-MenuLabel{overflow:auto;padding:12px;text-overflow:ellipsis;text-wrap:nowrap;color:#2a2a2a;font-size:14px;font-style:normal;font-weight:500;letter-spacing:1.4px;line-height:112%;text-transform:uppercase}.arc-v12-0-0-beta-23 .arc .arc-MenuLabel:focus{outline:var(--focus-border-weight-s) solid transparent;outline-offset:2px}.arc-v12-0-0-beta-23 .arc .arc-MenuLabel:focus-visible{outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-23 .arc .arc-MenuLabel.arc-MenuLabel--onDarkSurface:focus-visible{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v12-0-0-beta-23 .arc .arc-MenuTrigger{background:transparent;border:none;padding:0}.arc-v12-0-0-beta-23 .arc .arc-MenuTrigger:focus{outline:var(--focus-border-weight-s) solid transparent;outline-offset:2px}.arc-v12-0-0-beta-23 .arc .arc-MenuTrigger:focus-visible{outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-23 .arc .arc-MenuTrigger.arc-MenuTrigger--onDarkSurface:focus-visible{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v12-0-0-beta-23 .arc .arc-MenuItemCheckbox{align-items:center}.arc-v12-0-0-beta-23 .arc .arc-MenuItemCheckbox-box{align-items:center;background:var(--checkbox-colors-light-bg-default);border:var(--checkbox-border-weight) solid var(--checkbox-colors-light-border-default);border-radius:var(--checkbox-border-radius-s);color:var(--checkbox-colors-light-bg-default);display:inline-flex;flex-shrink:0;height:var(--checkbox-size-s);justify-content:center;width:var(--checkbox-size-s)}.arc-v12-0-0-beta-23 .arc .arc-MenuItemCheckbox-box--checked{background:var(--checkbox-colors-light-bg-active);border:none}.arc-v12-0-0-beta-23 .arc .arc-MenuItemCheckbox[data-state="checked"]{background-color:#ffffff}.arc-v12-0-0-beta-23 .arc .arc-MenuItemCheckbox[data-state="checked"]:hover,.arc-v12-0-0-beta-23 .arc .arc-MenuItemCheckbox[data-state="checked"][data-highlighted]{background-color:var(--menu-card-bg-hover)}.arc-v12-0-0-beta-23 .arc .arc-MenuItemSingleSelect[data-state="unchecked"] .arc-MenuItem-actions{visibility:hidden}.arc-v12-0-0-beta-23 .arc .arc-MenuGroupSingleSelect{display:flex;flex-direction:column;gap:var(--menu-card-gap-xs)}.arc-v12-0-0-beta-23 .arc .arc-MenuScrollable{margin-left:-12px;margin-right:-12px;overflow-x:hidden;overflow-y:scroll;padding:4px 12px;scrollbar-width:thin}.arc-v12-0-0-beta-23 .arc .arc-MenuGroup{display:flex;flex-direction:column;gap:var(--menu-card-gap-xs)}.arc-v12-0-0-beta-23 .arc div[data-radix-popper-content-wrapper][\:has\(.arc-MenuContent\)]{min-width:auto !important}.arc-v12-0-0-beta-23 .arc div[data-radix-popper-content-wrapper]:has(.arc-MenuContent){min-width:auto !important}
+.arc-v12-0-0-beta-24 .arc .arc-MenuContent{background:#ffffff;border-radius:12px;box-shadow:0 0 1px 0 rgba(0,0,0,0.2),0 4px 12px 0 rgba(0,0,0,0.1);display:flex;flex-direction:column;padding:12px;width:-moz-fit-content;width:fit-content;z-index:3}.arc-v12-0-0-beta-24 .arc .arc-MenuContent--mobile{margin-right:24px}.arc-v12-0-0-beta-24 .arc .arc-MenuContent--isFluid{width:var(--radix-dropdown-menu-content-available-width)}.arc-v12-0-0-beta-24 .arc .arc-MenuContent[data-side="bottom"]{animation:grow-down 0.2s ease-out forwards;transform-origin:top center}.arc-v12-0-0-beta-24 .arc .arc-MenuContent[data-side="top"]{animation:grow-up 0.2s ease-out forwards;transform-origin:bottom center}.arc-v12-0-0-beta-24 .arc .arc-MenuContent[data-side="left"]{animation:grow-left 0.2s ease-out forwards;transform-origin:center right}.arc-v12-0-0-beta-24 .arc .arc-MenuContent[data-side="right"]{animation:grow-right 0.2s ease-out forwards;transform-origin:center left}@keyframes grow-down{from{transform:scaleY(0.8)}to{transform:scaleY(1)}}@keyframes grow-up{from{opacity:0;transform:scaleY(0.8)}to{opacity:1;transform:scaleY(1)}}@keyframes grow-left{from{opacity:0;transform:scaleX(0.8)}to{opacity:1;transform:scaleX(1)}}@keyframes grow-right{from{opacity:0;transform:scaleX(0.8)}to{opacity:1;transform:scaleX(1)}}.arc-v12-0-0-beta-24 .arc .arc-MenuContent-fade{animation:fade-in 300ms ease forwards;opacity:0}@keyframes fade-in{from{opacity:0}to{opacity:1}}.arc-v12-0-0-beta-24 .arc .arc-MenuItem{border-radius:var(--menu-card-border-radius-s);display:flex;flex-direction:row;gap:var(--menu-card-gap-m);outline:none;padding:var(--menu-card-padding-m);position:relative}.arc-v12-0-0-beta-24 .arc .arc-MenuItem--link,.arc-v12-0-0-beta-24 .arc .arc-MenuItem--link[data-highlighted]{color:var(--menu-card-text-primary);text-decoration:none}.arc-v12-0-0-beta-24 .arc .arc-MenuItem[data-highlighted]{background-color:var(--menu-card-bg-hover);border-radius:var(--menu-card-border-radius-s);border-bottom-left-radius:4px;border-top-left-radius:4px;cursor:pointer;z-index:4}.arc-v12-0-0-beta-24 .arc .arc-MenuItem[data-highlighted]::before{background-color:var(--menu-card-foreground-hover);border-bottom-left-radius:var(--menu-card-border-radius-s);border-top-left-radius:var(--menu-card-border-radius-s);content:"";height:100%;left:0;position:absolute;top:0;transition:background-color 0.3s ease;width:3px}.arc-v12-0-0-beta-24 .arc .arc-MenuItem[data-disabled]{color:var(--menu-card-text-disabled);cursor:not-allowed}.arc-v12-0-0-beta-24 .arc .arc-MenuItem-content{display:flex;gap:var(--menu-card-gap-m)}.arc-v12-0-0-beta-24 .arc .arc-MenuItem-actions{display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--menu-card-gap-m);margin-left:auto;text-wrap:nowrap}.arc-v12-0-0-beta-24 .arc .arc-MenuItem[data-state="checked"],.arc-v12-0-0-beta-24 .arc .arc-MenuItem[aria-expanded="true"]{background:var(--menu-card-bg-active)}.arc-v12-0-0-beta-24 .arc .arc-MenuItem-text{display:flex;flex-direction:column;flex-wrap:nowrap;gap:var(--menu-card-gap-xs);text-wrap:wrap}.arc-v12-0-0-beta-24 .arc .arc-MenuSeparator{margin-left:-12px;margin-right:-12px;padding:var(--menu-card-padding-m) 0}.arc-v12-0-0-beta-24 .arc .arc-MenuLabel{overflow:auto;padding:12px;text-overflow:ellipsis;text-wrap:nowrap;color:#2a2a2a;font-size:14px;font-style:normal;font-weight:500;letter-spacing:1.4px;line-height:112%;text-transform:uppercase}.arc-v12-0-0-beta-24 .arc .arc-MenuLabel:focus{outline:var(--focus-border-weight-s) solid transparent;outline-offset:2px}.arc-v12-0-0-beta-24 .arc .arc-MenuLabel:focus-visible{outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-24 .arc .arc-MenuLabel.arc-MenuLabel--onDarkSurface:focus-visible{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v12-0-0-beta-24 .arc .arc-MenuTrigger{background:transparent;border:none;padding:0}.arc-v12-0-0-beta-24 .arc .arc-MenuTrigger:focus{border-radius:var(--focus-border-radius-s);outline:var(--focus-border-weight-s) solid transparent;outline-offset:2px}.arc-v12-0-0-beta-24 .arc .arc-MenuTrigger:focus-visible{outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-24 .arc .arc-MenuTrigger.arc-MenuTrigger--onDarkSurface:focus-visible{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v12-0-0-beta-24 .arc .arc-MenuItemCheckbox{align-items:center}.arc-v12-0-0-beta-24 .arc .arc-MenuItemCheckbox[data-state="checked"]{background-color:#ffffff}.arc-v12-0-0-beta-24 .arc .arc-MenuItemCheckbox[data-state="checked"]:hover,.arc-v12-0-0-beta-24 .arc .arc-MenuItemCheckbox[data-state="checked"][data-highlighted]{background-color:var(--menu-card-bg-hover)}.arc-v12-0-0-beta-24 .arc .arc-MenuItemSingleSelect[data-state="unchecked"] .arc-MenuItem-actions{visibility:hidden}.arc-v12-0-0-beta-24 .arc .arc-MenuGroupSingleSelect{display:flex;flex-direction:column;gap:var(--menu-card-gap-xs)}.arc-v12-0-0-beta-24 .arc .arc-MenuScrollable{margin-left:-12px;margin-right:-12px;overflow-x:hidden;overflow-y:scroll;padding:4px 12px;scrollbar-width:thin}.arc-v12-0-0-beta-24 .arc .arc-MenuGroup{display:flex;flex-direction:column;gap:var(--menu-card-gap-xs)}.arc-v12-0-0-beta-24 .arc div[data-radix-popper-content-wrapper][\:has\(.arc-MenuContent\)]{min-width:auto !important}.arc-v12-0-0-beta-24 .arc div[data-radix-popper-content-wrapper]:has(.arc-MenuContent){min-width:auto !important}

package/lib/Modal/Modal.cjs

@@ -1,30 +1,32 @@
 '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 index$2 = require('../_shared/cjs/index-CTlXMLug.cjs');
-var index$1 = require('../_shared/cjs/index-DAr_oO4-.cjs');
-var Heading = require('../_shared/cjs/Heading-BEMSkLYR.cjs');
-var ButtonV2 = require('../_shared/cjs/ButtonV2-Bta5SVVY.cjs');
-var Text = require('../_shared/cjs/Text-Cr5nmYmx.cjs');
-var VerticalSpace = require('../_shared/cjs/VerticalSpace-BJvST6WP.cjs');
-var ThemeIcon = require('../_shared/cjs/ThemeIcon-BoxbjTaQ.cjs');
-var Surface = require('../_shared/cjs/Surface-BFx1yNsq.cjs');
+var index$1 = require('../_shared/cjs/index-D9onmVh5.cjs');
+var filterAttrs = require('../_shared/cjs/filter-attrs-D19P2s1V.cjs');
+var Heading = require('../_shared/cjs/Heading-CoiZ2EmD.cjs');
+var ButtonV2 = require('../_shared/cjs/ButtonV2-BJlwsXlN.cjs');
+var Text = require('../_shared/cjs/Text-jwsn80lQ.cjs');
+var VerticalSpace = require('../_shared/cjs/VerticalSpace-DLQUYsvc.cjs');
+var ThemeIcon = require('../_shared/cjs/ThemeIcon-Def4RZfK.cjs');
+var Surface = require('../_shared/cjs/Surface-DIU5ciDT.cjs');
 var index = require('../_shared/cjs/index-DXNM3D1d.cjs');
-require('../_shared/cjs/Combination-B-rSVLfT.cjs');
+require('../_shared/cjs/Combination-6m6aOXZq.cjs');
 require('react/jsx-runtime');
 require('react-dom');
-require('../_shared/cjs/index-Dv1xvB_E.cjs');
+require('../_shared/cjs/index-BGGFOAAx.cjs');
 require('../_shared/cjs/index-DR8Rkav9.cjs');
 require('../_shared/cjs/suffix-modifier-DLUGR-yG.cjs');
-require('../_shared/cjs/Icon-CzhyKqMd.cjs');
-require('../_shared/cjs/Spinner-bbrOwxv2.cjs');
+require('../_shared/cjs/SemanticHeading-BPXN_z49.cjs');
+require('../_shared/cjs/Icon-Dk2XHa7V.cjs');
+require('../_shared/cjs/Spinner-427lpnHI.cjs');
 
 /** Use `Modal` to display information that needs immediate action from a user. */
 var Modal = function (_a) {
     var _b;
-    var title = _a.title, description = _a.description, ariaDescribedBy = _a.ariaDescribedBy, isOpen = _a.isOpen, actions = _a.actions, onRequestClose = _a.onRequestClose, children = _a.children, _c = _a.role, role = _c === void 0 ? "dialog" : _c, _d = _a.shouldReturnFocus, shouldReturnFocus = _d === void 0 ? true : _d, _e = _a.isContentScrollable, isContentScrollable = _e === void 0 ? false : _e, _f = _a.size, size = _f === void 0 ? "l" : _f, _g = _a.fullBleed, fullBleed = _g === void 0 ? false : _g, customWidths = _a.customWidths, props = filterAttrs.__rest(_a, ["title", "description", "ariaDescribedBy", "isOpen", "actions", "onRequestClose", "children", "role", "shouldReturnFocus", "isContentScrollable", "size", "fullBleed", "customWidths"]);
+    var title = _a.title, description = _a.description, ariaDescribedBy = _a.ariaDescribedBy, isOpen = _a.isOpen, actions = _a.actions, onRequestClose = _a.onRequestClose, children = _a.children, _c = _a.role, role = _c === void 0 ? "dialog" : _c, _d = _a.shouldReturnFocus, shouldReturnFocus = _d === void 0 ? true : _d, _e = _a.isContentScrollable, isContentScrollable = _e === void 0 ? false : _e, _f = _a.size, size = _f === void 0 ? "l" : _f, _g = _a.fullBleed, fullBleed = _g === void 0 ? false : _g, customWidths = _a.customWidths, props = tslib_es6.__rest(_a, ["title", "description", "ariaDescribedBy", "isOpen", "actions", "onRequestClose", "children", "role", "shouldReturnFocus", "isContentScrollable", "size", "fullBleed", "customWidths"]);
     var _h = index.useThemeElement(), themeElement = _h[0], setThemeElement = _h[1];
     var triggerRef = React.useRef(null);
     var setTriggerElement = function () {
@@ -37,7 +39,7 @@ var Modal = function (_a) {
         }
     };
     var canShowClose = role !== "alertdialog" && onRequestClose;
-    var ariaProps = filterAttrs.__assign({}, (ariaDescribedBy ? { "aria-describedby": ariaDescribedBy } : {}));
+    var ariaProps = tslib_es6.__assign({}, (ariaDescribedBy ? { "aria-describedby": ariaDescribedBy } : {}));
     var closeModal = function () {
         if (role !== "alertdialog" && onRequestClose) {
             onRequestClose();
@@ -47,7 +49,7 @@ var Modal = function (_a) {
         React.createElement(index$1.Root, { open: isOpen },
             React.createElement(index$1.Portal, { container: themeElement },
                 React.createElement(index$1.Overlay, { className: "arc-Modal-overlay" },
-                    React.createElement(index$1.Content, filterAttrs.__assign({}, ariaProps, { role: role, onOpenAutoFocus: setTriggerElement, onCloseAutoFocus: focusTriggerElement, onEscapeKeyDown: closeModal, onInteractOutside: closeModal, "aria-modal": "true", className: index$2.classNames("arc-Modal-dialog", (_b = {},
+                    React.createElement(index$1.Content, tslib_es6.__assign({}, ariaProps, { role: role, onOpenAutoFocus: setTriggerElement, onCloseAutoFocus: focusTriggerElement, onEscapeKeyDown: closeModal, onInteractOutside: closeModal, "aria-modal": "true", className: index$2.classNames("arc-Modal-dialog", (_b = {},
                             _b["arc-Modal-dialog--".concat(size)] = !customWidths,
                             _b["arc-Modal-dialog--xs-span-".concat(customWidths === null || customWidths === void 0 ? void 0 : customWidths.xs)] = customWidths === null || customWidths === void 0 ? void 0 : customWidths.xs,
                             _b["arc-Modal-dialog--s-span-".concat(customWidths === null || customWidths === void 0 ? void 0 : customWidths.s)] = customWidths === null || customWidths === void 0 ? void 0 : customWidths.s,
@@ -56,6 +58,9 @@ var Modal = function (_a) {
                             _b["arc-Modal-dialog--maxHeightWindow"] = isContentScrollable,
                             _b["arc-Modal-dialog--fullBleed"] = fullBleed,
                             _b)) }, filterAttrs.filterAttrs(props)),
+                        canShowClose && (React.createElement("div", { className: "arc-Modal-iconContainer" },
+                            React.createElement("button", { "aria-label": "close", onClick: closeModal, className: "arc-Modal-closeButton" },
+                                React.createElement(ThemeIcon.ThemeIcon, { size: 32, icon: "modalClose" })))),
                         React.createElement(React.Fragment, null,
                             title && (React.createElement(React.Fragment, null,
                                 React.createElement("div", { className: "arc-Modal-section" },
@@ -81,11 +86,8 @@ var Modal = function (_a) {
                                     React.createElement("div", { className: "arc-Modal-actions" }, actions.map(function (props, i) { return (React.createElement("div", { key: "arc-modal-button-".concat(i), className: index$2.classNames("arc-Modal-actionButton", {
                                             "arc-Modal-actionButton--compact": props.buttonStyle === "compact",
                                         }) },
-                                        React.createElement(ButtonV2.ButtonV2, filterAttrs.__assign({ isFullWidth: true }, props)))); })))),
-                            React.createElement(VerticalSpace.VerticalSpace, { size: "24" }))),
-                        canShowClose && (React.createElement("div", { className: "arc-Modal-iconContainer" },
-                            React.createElement("button", { "aria-label": "close", onClick: closeModal, className: "arc-Modal-closeButton" },
-                                React.createElement(ThemeIcon.ThemeIcon, { size: 32, icon: "modalClose" }))))))))));
+                                        React.createElement(ButtonV2.ButtonV2, tslib_es6.__assign({ isFullWidth: true }, props)))); })))),
+                            React.createElement(VerticalSpace.VerticalSpace, { size: "24" })))))))));
 };
 
 exports.Modal = Modal;