@arc-ui/components 12.0.0-beta.16 → 12.0.0-beta.18

package/lib/Menu/Menu.cjs

@@ -0,0 +1,261 @@
+'use strict';
+
+var filterAttrs = require('../_shared/cjs/filter-attrs-eK6E_34o.cjs');
+var React = require('react');
+var MenuSubContent = require('../_shared/cjs/MenuSubContent-Bs2_ebS3.cjs');
+var index = require('../_shared/cjs/index-CTlXMLug.cjs');
+var Icon = require('../_shared/cjs/Icon-KMACQ1i3.cjs');
+var Text = require('../_shared/cjs/Text-Cr5nmYmx.cjs');
+var Rule = require('../_shared/cjs/Rule-DMQsi2L6.cjs');
+var index$1 = require('../_shared/cjs/index-DXNM3D1d.cjs');
+var BtIconChevronRightMid = require('../_shared/cjs/BtIconChevronRightMid-eGxk3ae6.cjs');
+require('../_shared/cjs/Combination-B-rSVLfT.cjs');
+require('react/jsx-runtime');
+require('react-dom');
+require('../_shared/cjs/index-EFXw1jWg.cjs');
+require('../_shared/cjs/index-Bt7hfZBc.cjs');
+require('../_shared/cjs/index-B11wQrRa.cjs');
+require('../_shared/cjs/index-Dv1xvB_E.cjs');
+require('../_shared/cjs/suffix-modifier-DLUGR-yG.cjs');
+require('../_shared/cjs/index-DR8Rkav9.cjs');
+require('../_shared/cjs/Surface-BFx1yNsq.cjs');
+
+/**
+ * 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(MenuSubContent.Root2, filterAttrs.__assign({ defaultOpen: defaultOpen, open: open, onOpenChange: onOpenChange, modal: modal }, filterAttrs.filterAttrs(props)), children));
+};
+
+var MenuItemContentTemplate = function (_a) {
+    var leadingIcon = _a.leadingIcon, supportingText = _a.supportingText, keyCommands = _a.keyCommands, trailingIcon = _a.trailingIcon, children = _a.children;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "arc-MenuItem-content" },
+            leadingIcon && (React.createElement("div", { className: "arc-MenuItem-leadingIcon" },
+                React.createElement(Icon.Icon, { icon: leadingIcon, size: 24 }))),
+            React.createElement("div", { className: "arc-MenuItem-text" },
+                React.createElement(Text.Text, { size: "m" }, children),
+                supportingText && React.createElement(Text.Text, { size: "xs" }, supportingText))),
+        keyCommands || trailingIcon ? (React.createElement("div", { className: "arc-MenuItem-actions" },
+            keyCommands && (React.createElement("div", { className: "arc-MenuItem-keyCommands" }, keyCommands)),
+            trailingIcon && (React.createElement("div", { className: "arc-MenuItem-trailingIcon" },
+                React.createElement(Icon.Icon, { icon: trailingIcon, size: 24 }))))) : null));
+};
+
+var MenuCheckboxItem = 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(MenuSubContent.CheckboxItem2, filterAttrs.__assign({ className: "arc-MenuItem arc-MenuCheckboxItem", 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.classNames("arc-MenuCheckboxItem-box", {
+                "arc-MenuCheckboxItem-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(MenuItemContentTemplate, null, children)));
+};
+
+/**
+ * Displays footer content at the bottom of the menu.
+ */
+var MenuFooter = 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-MenuFooter", style: {
+            position: "relative",
+        } },
+        React.createElement("div", { style: {
+                height: "12px",
+                background: "linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))",
+                position: "absolute",
+                width: "100%",
+                zIndex: 3,
+                top: -12,
+            } }),
+        React.createElement("div", { className: "arc-MenuSeparator", style: { paddingTop: 0 } },
+            React.createElement(Rule.Rule, null)),
+        React.createElement(MenuSubContent.Item2, { className: "arc-MenuItem", "aria-label": ariaLabel, onClick: onClick, disabled: isDisabled },
+            React.createElement(MenuItemContentTemplate, { leadingIcon: leadingIcon, trailingIcon: trailingIcon, supportingText: supportingText, keyCommands: keyCommands }, children))));
+};
+
+/**
+ * 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(MenuSubContent.Group2, filterAttrs.__assign({ className: "arc-MenuGroup" }, filterAttrs.filterAttrs(props)), children));
+};
+
+/**
+ * Displays a header within the dropdown menu.
+ */
+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(MenuSubContent.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,
+            } },
+            React.createElement(Rule.Rule, null),
+            React.createElement("div", { style: {
+                    height: "12px",
+                    background: "linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))",
+                    position: "absolute",
+                    width: "100%",
+                    zIndex: 3,
+                } }))));
+};
+
+/**
+ * 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(MenuSubContent.Item2, filterAttrs.__assign({ className: "arc-MenuItem", asChild: true, "aria-label": ariaLabel, onClick: 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(MenuSubContent.Label2, filterAttrs.__assign({ className: "arc-MenuLabel" }, filterAttrs.filterAttrs(props)), children));
+};
+
+/**
+ * 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 _b = index$1.useThemeElement(), themeElement = _b[0], setThemeElement = _b[1];
+    return (React.createElement("span", { ref: setThemeElement, style: { display: "none" } },
+        React.createElement(MenuSubContent.Portal2, filterAttrs.__assign({ container: themeElement }, filterAttrs.filterAttrs(props)), children)));
+};
+
+/**
+ * Groups menu items allowing single selection from multiple options.
+ */
+var MenuRadioGroup = function (_a) {
+    var children = _a.children, value = _a.value, onValueChange = _a.onValueChange, props = filterAttrs.__rest(_a, ["children", "value", "onValueChange"]);
+    return (React.createElement(MenuSubContent.RadioGroup2, filterAttrs.__assign({ className: "arc-MenuRadioGroup", 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 MenuRadioItem = 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(MenuSubContent.RadioItem2, filterAttrs.__assign({ className: "arc-MenuItem arc-MenuRadioItem", value: value, disabled: disabled, onSelect: function (event) {
+            if (shouldKeepOpen) {
+                event.preventDefault();
+            }
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect();
+        } }, filterAttrs.filterAttrs(props)),
+        React.createElement(MenuItemContentTemplate, { leadingIcon: leadingIcon, supportingText: supportingText, trailingIcon: BtIconTickAlt2Px }, children)));
+};
+
+/**
+ * Scrollable container that adjusts height based on surrounding menu content.
+ */
+var MenuScrollable = function (_a) {
+    var children = _a.children;
+    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");
+        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)
+        Array.from(contentContainer.children).forEach(function (child) {
+            if (child !== el) {
+                totalSiblingHeight += child.offsetHeight + 6;
+            }
+        });
+        var availableHeight = "calc(var(--radix-dropdown-menu-content-available-height) - ".concat(totalSiblingHeight, "px - 25px)");
+        el.style.height = "".concat(el.scrollHeight, "px");
+        el.style.maxHeight = availableHeight;
+    };
+    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(MenuSubContent.Separator2, filterAttrs.__assign({ className: "arc-MenuSeparator" }, filterAttrs.filterAttrs(props)),
+        React.createElement(Rule.Rule, null)));
+};
+
+/**
+ * Container for submenu content within a dropdown menu.
+ */
+var MenuSub = function (_a) {
+    var children = _a.children, props = filterAttrs.__rest(_a, ["children"]);
+    return React.createElement(MenuSubContent.Sub2, filterAttrs.__assign({}, filterAttrs.filterAttrs(props)),
+        " ",
+        children);
+};
+
+/**
+ * Trigger element that opens a submenu when selected.
+ */
+var MenuSubTrigger = 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(MenuSubContent.SubTrigger2, filterAttrs.__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 }))),
+            React.createElement("div", { className: "arc-MenuItem-text" },
+                React.createElement(Text.Text, { size: "m" }, children),
+                supportingText && React.createElement(Text.Text, { size: "xs" }, supportingText))),
+        React.createElement("div", { className: "arc-MenuItem-actions" },
+            keyCommands && (React.createElement("div", { className: "arc-MenuItem-keyCommands" }, keyCommands)),
+            React.createElement("div", { className: "arc-MenuItem-trailingIcon" },
+                React.createElement(Icon.Icon, { icon: BtIconChevronRightMid.BtIconChevronRightMid, size: 24 })))));
+};
+
+/**
+ * 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(MenuSubContent.Trigger, filterAttrs.__assign({ className: ".arc-MenuItem arc-MenuTrigger", asChild: asChild }, filterAttrs.filterAttrs(props)), children));
+};
+
+exports.MenuContent = MenuSubContent.MenuContent;
+exports.MenuSubContent = MenuSubContent.MenuSubContent;
+exports.Menu = Menu;
+exports.MenuCheckboxItem = MenuCheckboxItem;
+exports.MenuFooter = MenuFooter;
+exports.MenuGroup = MenuGroup;
+exports.MenuHeader = MenuHeader;
+exports.MenuItem = MenuItem;
+exports.MenuItemContentTemplate = MenuItemContentTemplate;
+exports.MenuLabel = MenuLabel;
+exports.MenuPortal = MenuPortal;
+exports.MenuRadioGroup = MenuRadioGroup;
+exports.MenuRadioItem = MenuRadioItem;
+exports.MenuScrollable = MenuScrollable;
+exports.MenuSeparator = MenuSeparator;
+exports.MenuSub = MenuSub;
+exports.MenuSubTrigger = MenuSubTrigger;
+exports.MenuTrigger = MenuTrigger;

package/lib/Menu/Menu.mjs

@@ -0,0 +1,243 @@
+import { _ as __rest, a as __assign, f as filterAttrs } from '../_shared/esm/filter-attrs-B6CM-NUr.mjs';
+import React__default from 'react';
+import { R as Root2, C as CheckboxItem2, I as Item2, G as Group2, L as Label2, P as Portal2, a as RadioGroup2, b as RadioItem2, S as Separator2, c as Sub2, d as SubTrigger2, T as Trigger } from '../_shared/esm/MenuSubContent-Cv9mSn58.mjs';
+export { M as MenuContent, e as MenuSubContent } from '../_shared/esm/MenuSubContent-Cv9mSn58.mjs';
+import { c as classNames } from '../_shared/esm/index-5C0-U8cc.mjs';
+import { I as Icon } from '../_shared/esm/Icon-MZfaoOo9.mjs';
+import { T as Text } from '../_shared/esm/Text-CBlnm5CT.mjs';
+import { R as Rule } from '../_shared/esm/Rule-3gdMHH-R.mjs';
+import { e as useThemeElement } from '../_shared/esm/index-Bz2JQq34.mjs';
+import { B as BtIconChevronRightMid } from '../_shared/esm/BtIconChevronRightMid-DE4lmVaG.mjs';
+import '../_shared/esm/Combination-BpO6XTeS.mjs';
+import 'react/jsx-runtime';
+import 'react-dom';
+import '../_shared/esm/index-BbAu4d3T.mjs';
+import '../_shared/esm/index-DLovItWo.mjs';
+import '../_shared/esm/index-CWHcEz3_.mjs';
+import '../_shared/esm/index-DXTwueLZ.mjs';
+import '../_shared/esm/suffix-modifier-B_pO0UkF.mjs';
+import '../_shared/esm/index-Spae4j7j.mjs';
+import '../_shared/esm/Surface-Colbp3Zx.mjs';
+
+/**
+ * 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 MenuItemContentTemplate = function (_a) {
+    var leadingIcon = _a.leadingIcon, supportingText = _a.supportingText, keyCommands = _a.keyCommands, trailingIcon = _a.trailingIcon, children = _a.children;
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", { className: "arc-MenuItem-content" },
+            leadingIcon && (React__default.createElement("div", { className: "arc-MenuItem-leadingIcon" },
+                React__default.createElement(Icon, { icon: leadingIcon, size: 24 }))),
+            React__default.createElement("div", { className: "arc-MenuItem-text" },
+                React__default.createElement(Text, { size: "m" }, children),
+                supportingText && React__default.createElement(Text, { size: "xs" }, supportingText))),
+        keyCommands || trailingIcon ? (React__default.createElement("div", { className: "arc-MenuItem-actions" },
+            keyCommands && (React__default.createElement("div", { className: "arc-MenuItem-keyCommands" }, keyCommands)),
+            trailingIcon && (React__default.createElement("div", { className: "arc-MenuItem-trailingIcon" },
+                React__default.createElement(Icon, { icon: trailingIcon, size: 24 }))))) : null));
+};
+
+var MenuCheckboxItem = 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 = __rest(_a, ["children", "checked", "onCheckedChange", "isDisabled", "onSelect", "id", "shouldKeepOpen"]);
+    return (React__default.createElement(CheckboxItem2, __assign({ className: "arc-MenuItem arc-MenuCheckboxItem", 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(props)),
+        React__default.createElement("div", { className: classNames("arc-MenuCheckboxItem-box", {
+                "arc-MenuCheckboxItem-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(MenuItemContentTemplate, null, children)));
+};
+
+/**
+ * Displays footer content at the bottom of the menu.
+ */
+var MenuFooter = 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-MenuFooter", style: {
+            position: "relative",
+        } },
+        React__default.createElement("div", { style: {
+                height: "12px",
+                background: "linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))",
+                position: "absolute",
+                width: "100%",
+                zIndex: 3,
+                top: -12,
+            } }),
+        React__default.createElement("div", { className: "arc-MenuSeparator", style: { paddingTop: 0 } },
+            React__default.createElement(Rule, null)),
+        React__default.createElement(Item2, { className: "arc-MenuItem", "aria-label": ariaLabel, onClick: onClick, disabled: isDisabled },
+            React__default.createElement(MenuItemContentTemplate, { leadingIcon: leadingIcon, trailingIcon: trailingIcon, supportingText: supportingText, keyCommands: keyCommands }, children))));
+};
+
+/**
+ * Groups related menu items together within a dropdown menu.
+ */
+var MenuGroup = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (React__default.createElement(Group2, __assign({ className: "arc-MenuGroup" }, filterAttrs(props)), children));
+};
+
+/**
+ * Displays a header within the dropdown menu.
+ */
+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(MenuItemContentTemplate, { leadingIcon: leadingIcon, trailingIcon: trailingIcon, supportingText: supportingText, keyCommands: keyCommands }, children)),
+        React__default.createElement("div", { className: "arc-MenuSeparator", style: {
+                paddingBottom: 0,
+            } },
+            React__default.createElement(Rule, null),
+            React__default.createElement("div", { style: {
+                    height: "12px",
+                    background: "linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))",
+                    position: "absolute",
+                    width: "100%",
+                    zIndex: 3,
+                } }))));
+};
+
+/**
+ * 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: 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.
+ */
+var MenuLabel = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (React__default.createElement(Label2, __assign({ className: "arc-MenuLabel" }, filterAttrs(props)), children));
+};
+
+/**
+ * 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 = __rest(_a, ["children"]);
+    var _b = useThemeElement(), themeElement = _b[0], setThemeElement = _b[1];
+    return (React__default.createElement("span", { ref: setThemeElement, style: { display: "none" } },
+        React__default.createElement(Portal2, __assign({ container: themeElement }, filterAttrs(props)), children)));
+};
+
+/**
+ * Groups menu items allowing single selection from multiple options.
+ */
+var MenuRadioGroup = function (_a) {
+    var children = _a.children, value = _a.value, onValueChange = _a.onValueChange, props = __rest(_a, ["children", "value", "onValueChange"]);
+    return (React__default.createElement(RadioGroup2, __assign({ className: "arc-MenuRadioGroup", 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.
+ */
+var MenuRadioItem = 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 = __rest(_a, ["children", "value", "disabled", "onSelect", "leadingIcon", "supportingText", "shouldKeepOpen"]);
+    return (React__default.createElement(RadioItem2, __assign({ className: "arc-MenuItem arc-MenuRadioItem", value: value, disabled: disabled, onSelect: function (event) {
+            if (shouldKeepOpen) {
+                event.preventDefault();
+            }
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect();
+        } }, filterAttrs(props)),
+        React__default.createElement(MenuItemContentTemplate, { leadingIcon: leadingIcon, supportingText: supportingText, trailingIcon: BtIconTickAlt2Px }, children)));
+};
+
+/**
+ * Scrollable container that adjusts height based on surrounding menu content.
+ */
+var MenuScrollable = function (_a) {
+    var children = _a.children;
+    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");
+        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)
+        Array.from(contentContainer.children).forEach(function (child) {
+            if (child !== el) {
+                totalSiblingHeight += child.offsetHeight + 6;
+            }
+        });
+        var availableHeight = "calc(var(--radix-dropdown-menu-content-available-height) - ".concat(totalSiblingHeight, "px - 25px)");
+        el.style.height = "".concat(el.scrollHeight, "px");
+        el.style.maxHeight = availableHeight;
+    };
+    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 submenu content within a dropdown menu.
+ */
+var MenuSub = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return React__default.createElement(Sub2, __assign({}, filterAttrs(props)),
+        " ",
+        children);
+};
+
+/**
+ * Trigger element that opens a submenu when selected.
+ */
+var MenuSubTrigger = 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"]);
+    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" },
+                React__default.createElement(Icon, { icon: leadingIcon, size: 24 }))),
+            React__default.createElement("div", { className: "arc-MenuItem-text" },
+                React__default.createElement(Text, { size: "m" }, children),
+                supportingText && React__default.createElement(Text, { size: "xs" }, supportingText))),
+        React__default.createElement("div", { className: "arc-MenuItem-actions" },
+            keyCommands && (React__default.createElement("div", { className: "arc-MenuItem-keyCommands" }, keyCommands)),
+            React__default.createElement("div", { className: "arc-MenuItem-trailingIcon" },
+                React__default.createElement(Icon, { icon: BtIconChevronRightMid, size: 24 })))));
+};
+
+/**
+ * The element that toggles the menu.
+ */
+var MenuTrigger = function (_a) {
+    var children = _a.children, asChild = _a.asChild, props = __rest(_a, ["children", "asChild"]);
+    return (React__default.createElement(Trigger, __assign({ className: ".arc-MenuItem arc-MenuTrigger", asChild: asChild }, filterAttrs(props)), children));
+};
+
+export { Menu, MenuCheckboxItem, MenuFooter, MenuGroup, MenuHeader, MenuItem, MenuItemContentTemplate, MenuLabel, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuScrollable, MenuSeparator, MenuSub, MenuSubTrigger, MenuTrigger };

package/lib/Menu/styles.css

@@ -0,0 +1 @@
+.arc-v12-0-0-beta-18 .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}.arc-v12-0-0-beta-18 .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-18 .arc .arc-MenuItem--link,.arc-v12-0-0-beta-18 .arc .arc-MenuItem--link[data-highlighted]{color:var(--menu-card-text-primary);text-decoration:none}.arc-v12-0-0-beta-18 .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-18 .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-18 .arc .arc-MenuItem[data-disabled]{color:var(--menu-card-text-disabled);cursor:not-allowed}.arc-v12-0-0-beta-18 .arc .arc-MenuItem-content{display:flex;gap:var(--menu-card-gap-m)}.arc-v12-0-0-beta-18 .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-18 .arc .arc-MenuItem[data-state="checked"],.arc-v12-0-0-beta-18 .arc .arc-MenuItem[aria-expanded="true"]{background:var(--menu-card-bg-active)}.arc-v12-0-0-beta-18 .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-18 .arc .arc-MenuSeparator{margin-left:-12px;margin-right:-12px;padding:var(--menu-card-padding-m) 0}.arc-v12-0-0-beta-18 .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-18 .arc .arc-MenuTrigger{background:transparent;border:none}.arc-v12-0-0-beta-18 .arc .arc-MenuCheckboxItem-box{align-items:center;background:var(--checkbox-colors-light-bg-default-alt);border:var(--checkbox-border-weight-s) solid var(--checkbox-colors-light-border-default);border-radius:var(--checkbox-border-radius-s);color:var(--checkbox-colors-light-fg-default);display:inline-flex;flex-shrink:0;height:var(--checkbox-size-s);justify-content:center;margin-right:var(--checkbox-gap-s);width:var(--checkbox-size-s)}.arc-v12-0-0-beta-18 .arc .arc-MenuCheckboxItem-box--checked{background:var(--checkbox-colors-light-bg-default);border-color:transparent}.arc-v12-0-0-beta-18 .arc .arc-MenuCheckboxItem[data-state="checked"]{background:var(--menu-card-bg-default)}.arc-v12-0-0-beta-18 .arc .arc-MenuCheckboxItem[data-state="checked"]:hover{background-color:var(--menu-card-bg-hover)}.arc-v12-0-0-beta-18 .arc .arc-MenuRadioItem[data-state="unchecked"] .arc-MenuItem-actions{visibility:hidden}.arc-v12-0-0-beta-18 .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-18 .arc .arc-MenuGroup{display:flex;flex-direction:column;gap:var(--menu-card-gap-xs)}.arc-v12-0-0-beta-18 .arc div[data-radix-popper-content-wrapper][\:has\(.arc-MenuContent\)]{min-width:auto !important}.arc-v12-0-0-beta-18 .arc div[data-radix-popper-content-wrapper]:has(.arc-MenuContent){min-width:auto !important}

package/lib/Modal/Modal.cjs

@@ -4,27 +4,28 @@
 var filterAttrs = require('../_shared/cjs/filter-attrs-eK6E_34o.cjs');
 var React = require('react');
 var index$2 = require('../_shared/cjs/index-CTlXMLug.cjs');
-var index$1 = require('../_shared/cjs/index-BMs6MHwq.cjs');
-var index = require('../_shared/cjs/index-DXNM3D1d.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-s8OF4enU.cjs');
+var ButtonV2 = require('../_shared/cjs/ButtonV2-CRNNZ_nd.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');
-require('../_shared/cjs/Combination-iNPq-pNP.cjs');
+var index = require('../_shared/cjs/index-DXNM3D1d.cjs');
+require('../_shared/cjs/Combination-B-rSVLfT.cjs');
 require('react/jsx-runtime');
 require('react-dom');
-require('../_shared/cjs/index-DNgUhsBO.cjs');
+require('../_shared/cjs/index-Dv1xvB_E.cjs');
 require('../_shared/cjs/index-DR8Rkav9.cjs');
 require('../_shared/cjs/suffix-modifier-DLUGR-yG.cjs');
-require('../_shared/cjs/Icon-DdqFr6bT.cjs');
+require('../_shared/cjs/Icon-KMACQ1i3.cjs');
 require('../_shared/cjs/Spinner-bbrOwxv2.cjs');
 
 /** Use `Modal` to display information that needs immediate action from a user. */
 var Modal = function (_a) {
-    var title = _a.title, description = _a.description, ariaDescribedBy = _a.ariaDescribedBy, isOpen = _a.isOpen, actions = _a.actions, onRequestClose = _a.onRequestClose, children = _a.children, _b = _a.role, role = _b === void 0 ? "dialog" : _b, _c = _a.shouldReturnFocus, shouldReturnFocus = _c === void 0 ? true : _c, _d = _a.isContentScrollable, isContentScrollable = _d === void 0 ? false : _d, _e = _a.size, size = _e === void 0 ? "l" : _e, _f = _a.fullBleed, fullBleed = _f === void 0 ? false : _f, customWidth = _a.customWidth, props = filterAttrs.__rest(_a, ["title", "description", "ariaDescribedBy", "isOpen", "actions", "onRequestClose", "children", "role", "shouldReturnFocus", "isContentScrollable", "size", "fullBleed", "customWidth"]);
-    var _g = index.useThemeElement(), themeElement = _g[0], setThemeElement = _g[1];
+    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 _h = index.useThemeElement(), themeElement = _h[0], setThemeElement = _h[1];
     var triggerRef = React.useRef(null);
     var setTriggerElement = function () {
         return shouldReturnFocus &&
@@ -46,10 +47,15 @@ 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", "arc-Modal-dialog--".concat(size), {
-                            "arc-Modal-dialog--maxHeightWindow": isContentScrollable,
-                            "arc-Modal-dialog--fullBleed": fullBleed,
-                        }) }, filterAttrs.filterAttrs(props), { style: { maxWidth: customWidth } }),
+                    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 = {},
+                            _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,
+                            _b["arc-Modal-dialog--m-span-".concat(customWidths === null || customWidths === void 0 ? void 0 : customWidths.m)] = customWidths === null || customWidths === void 0 ? void 0 : customWidths.m,
+                            _b["arc-Modal-dialog--l-span-".concat(customWidths === null || customWidths === void 0 ? void 0 : customWidths.l)] = customWidths === null || customWidths === void 0 ? void 0 : customWidths.l,
+                            _b["arc-Modal-dialog--maxHeightWindow"] = isContentScrollable,
+                            _b["arc-Modal-dialog--fullBleed"] = fullBleed,
+                            _b)) }, filterAttrs.filterAttrs(props)),
                         React.createElement(React.Fragment, null,
                             title && (React.createElement(React.Fragment, null,
                                 React.createElement("div", { className: "arc-Modal-section" },