@muraldevkit/ui-toolkit 4.65.3-dev-IWCo.1 → 4.66.0-dev-avUr.1

package/dist/cjs/components/menu/MrlMenu/MrlMenu.module.css

@@ -0,0 +1,41 @@
+.MrlMenu--qA8g1 {
+  background: var(--mrl-color-background);
+  border-radius: var(--mrl-border-radius-functional-large);
+  box-shadow: var(--mrl-shadows-raised);
+  flex-direction: column;
+  opacity: 0;
+  overflow: visible;
+  z-index: 500;
+}
+.MrlMenu--qA8g1 ul[role=menu] {
+  min-height: var(--mrl-spacing-10);
+  overflow-x: visible;
+  padding: var(--mrl-spacing-04);
+}
+.MrlMenu--internal--tT8nK {
+  box-shadow: none;
+}
+.MrlMenu--internal--tT8nK ul[role=menu] {
+  padding: 0;
+}
+.MrlMenu--compact--BJPOI ul[role=menu] {
+  padding: var(--mrl-space-stack-related);
+}
+.MrlMenu--scrolling--RzEb4 ul[role=menu] {
+  box-sizing: border-box;
+  min-height: calc(3 * var(--mrl-spacing-08) + 3 * var(--mrl-spacing-03));
+  overflow: hidden auto;
+}
+.MrlMenu--ignore--mcm7y {
+  max-height: calc(100vh - 32px);
+}
+.MrlMenu--ignore--mcm7y ul[role=menu] {
+  overflow: hidden auto;
+}
+.MrlMenu--submenu--L9zHN {
+  left: 97%;
+  position: absolute;
+}
+.MrlMenu--qA8g1.open--4Zy6p {
+  display: flex;
+}

package/dist/cjs/components/menu/MrlMenu/MrlMenu.module.scss.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./MrlMenu.module.css");
+exports.default = {
+	"MrlMenu": "MrlMenu--qA8g1",
+	"MrlMenu--internal": "MrlMenu--internal--tT8nK",
+	"MrlMenu--compact": "MrlMenu--compact--BJPOI",
+	"MrlMenu--scrolling": "MrlMenu--scrolling--RzEb4",
+	"MrlMenu--ignore": "MrlMenu--ignore--mcm7y",
+	"MrlMenu--submenu": "MrlMenu--submenu--L9zHN",
+	"open": "open--4Zy6p"
+};

package/dist/cjs/components/menu/MrlMenu/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./MrlMenu"), exports);

package/dist/cjs/components/menu/MrlMenu/utilities.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculateTopPosition = exports.calculateLeftPosition = exports.findClosestMenuParent = void 0;
+/**
+ * Find the closest menu parent of an element
+ *
+ * @param el - The element to start searching from
+ * @returns The closest menu parent or null if none is found
+ */
+const findClosestMenuParent = (el) => el === null || el === void 0 ? void 0 : el.closest('[role="menu"]');
+exports.findClosestMenuParent = findClosestMenuParent;
+/**
+ * Calculate the horizontal positioning of the submenu
+ *
+ * @param overlapsRight - Whether the menu overlaps the right side of the screen
+ * @param overlapsLeft - Whether the menu overlaps the left side of the screen
+ * @param menuRect - The bounding rectangle of the menu
+ * @param triggerRef - The ref of the trigger element
+ * @returns The left position of the menu
+ */
+const calculateLeftPosition = (overlapsRight, overlapsLeft, menuRect, triggerRef) => {
+    var _a;
+    if (overlapsRight && overlapsLeft) {
+        // if we overlap on the left and right, provide an offset value so the menu
+        // isn't flush left with the trigger element (per design specs)
+        return '55px';
+    }
+    else if (overlapsRight) {
+        // if we overlap on the right, move the menu to the left side of the trigger
+        return `-${menuRect.width - 5}px`;
+    }
+    else if (triggerRef.current) {
+        // otherwise display on the right
+        return `${((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) + 13}px`;
+    }
+    return '0';
+};
+exports.calculateLeftPosition = calculateLeftPosition;
+/**
+ * Calculate vertical positioning of the submenu
+ *
+ * @param overlapsRight - Whether the menu overlaps the right side of the screen
+ * @param overlapsLeft - Whether the menu overlaps the left side of the screen
+ * @param triggerRef - The ref of the trigger element
+ * @param menuRect - The bounding rectangle of the menu
+ * @param parentMenu - The parent menu element
+ * @param triggerRect - The bounding rectangle of the trigger element
+ * @returns The top position of the menu
+ */
+const calculateTopPosition = (overlapsRight, overlapsLeft, triggerRef, menuRect, parentMenu, triggerRect) => {
+    if (triggerRef.current) {
+        const parentContainer = parentMenu.parentElement;
+        if (parentContainer) {
+            const menuBottom = triggerRect.top + menuRect.height;
+            const parentRect = parentContainer.getBoundingClientRect();
+            // if we overlap both left and right, we want to position the menu above or below the trigger
+            if (overlapsRight && overlapsLeft) {
+                // if the menu overlaps and is below the trigger, position it above, otherwise position it below
+                return menuBottom > window.innerHeight
+                    ? `${triggerRef.current.offsetTop - menuRect.height - 21 - parentMenu.scrollTop}px`
+                    : `${triggerRef.current.offsetTop + triggerRect.height - parentMenu.scrollTop}px`;
+            }
+            else if (menuBottom > parentRect.bottom) {
+                // if the menu's bottom edge is below the parent container's bottom, align bottom
+                const topPosition = parentRect.height - menuRect.height;
+                const offset = hasOverflowY(parentMenu) ? 20 : 0;
+                return `${topPosition - offset}px`;
+            }
+            else {
+                // otherwise align it with the top of the trigger
+                return `${triggerRef.current.offsetTop - parentMenu.scrollTop - 12}px`;
+            }
+        }
+    }
+    return '0';
+};
+exports.calculateTopPosition = calculateTopPosition;
+/*
+ * Check if an element has overflow-y set to auto
+ *
+ * @param element - The element to check
+ * @returns Whether the element has overflow-y set to auto
+ */
+const hasOverflowY = (element) => {
+    const style = window.getComputedStyle(element);
+    return style.overflowY === 'auto';
+};

package/dist/cjs/components/menu/MrlMenuGroup/MrlMenuGroup.js

@@ -0,0 +1,59 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MrlMenuGroup = void 0;
+const text_1 = require("../../text");
+const divider_1 = require("../../divider");
+const React = __importStar(require("react"));
+const MrlMenuGroup_module_scss_1 = __importDefault(require("./MrlMenuGroup.module.scss.js"));
+/**
+ * MrlMenuGroup
+ * @param props - component properties
+ * @returns JSX.Element
+ */
+const MrlMenuGroup = (_a) => {
+    var { children, divider = true, groupLabel } = _a, rest = __rest(_a, ["children", "divider", "groupLabel"]);
+    return (React.createElement("li", Object.assign({ role: "none" }, rest),
+        groupLabel && (React.createElement(text_1.MrlTextHeading, { attrs: {
+                className: MrlMenuGroup_module_scss_1.default['MrlMenuGroup--label']
+            }, hierarchy: "primary", kind: "title", level: "2", size: "small" }, groupLabel)),
+        React.createElement("ul", { role: "none" }, children),
+        divider && React.createElement(divider_1.MrlDivider, null)));
+};
+exports.MrlMenuGroup = MrlMenuGroup;

package/dist/cjs/components/menu/MrlMenuGroup/MrlMenuGroup.module.css

@@ -0,0 +1,3 @@
+.MrlMenuGroup--label--NWFQ2 {
+  margin-bottom: var(--mrl-spacing-03);
+}

package/dist/cjs/components/menu/MrlMenuGroup/MrlMenuGroup.module.scss.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./MrlMenuGroup.module.css");
+exports.default = {
+	"MrlMenuGroup--label": "MrlMenuGroup--label--NWFQ2"
+};

package/dist/cjs/components/menu/MrlMenuGroup/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./MrlMenuGroup"), exports);

package/dist/cjs/components/menu/MrlMenuItem/MrlMenuItem.js

@@ -0,0 +1,169 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MrlMenuItem = void 0;
+const React = __importStar(require("react"));
+const ds_icons_1 = require("@muraldevkit/ds-icons");
+const classnames_1 = __importDefault(require("classnames"));
+const __1 = require("../../../");
+const MrlMenuContext_1 = require("../context/MrlMenuContext");
+const MrlMenuItem_module_scss_1 = __importDefault(require("./MrlMenuItem.module.scss.js"));
+const getSubMenuType = (child) => {
+    if (React.isValidElement(child)) {
+        const type = child.type.componentType;
+        if (type === 'Menu' || type === 'Popover') {
+            return type;
+        }
+    }
+    return null;
+};
+/**
+ * MrlMenuItem component
+ *
+ * Renders a menu item to be used within the MrlMenu component
+ * @param {MrlMenuItemProps} props - The props for the MrlMenuItem component
+ * @returns {Element} - rendered MrlMenuItem component
+ */
+function MrlMenuItem(_a) {
+    var { ariaDescribedBy, ariaHasPopup, children, className, dataQa, disabled, icon, id, onClick, onMouseOut, onMouseOver, role = 'menuitem', selected } = _a, rest = __rest(_a, ["ariaDescribedBy", "ariaHasPopup", "children", "className", "dataQa", "disabled", "icon", "id", "onClick", "onMouseOut", "onMouseOver", "role", "selected"]);
+    const context = React.useContext(MrlMenuContext_1.MrlMenuContext);
+    const menuItemRef = React.useRef(null);
+    const [isSubElement, setIsSubElement] = React.useState(false);
+    const isSelectable = role === 'menuitemcheckbox' || role === 'menuitemradio';
+    const setFocusItem = () => {
+        var _a;
+        if (ariaHasPopup && ariaHasPopup !== 'menu' && ((_a = context === null || context === void 0 ? void 0 : context.triggerRef) === null || _a === void 0 ? void 0 : _a.current)) {
+            const triggerElement = context.triggerRef.current;
+            if (!triggerElement.id) {
+                triggerElement.id = (0, __1.getUniqueId)('menu-trigger');
+            }
+            document.body.setAttribute('data-focus-item', triggerElement.id);
+        }
+    };
+    const handleClick = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+        setFocusItem();
+        if (context && !!context.closeMenu && !isSubElement) {
+            context.closeMenu();
+        }
+    };
+    const handleKeyDown = (e) => {
+        var _a;
+        // WCAG specifices that space key should toggle the selection of a checkbox or radio button
+        // but not close the menu. When a user presses the enter key on these items the menu should close.
+        if (e.key === ' ' && !disabled) {
+            e.preventDefault();
+            e.stopPropagation();
+            onClick === null || onClick === void 0 ? void 0 : onClick();
+            // close the menu if we are not a selectable item (checkbox or radio button)
+            if (!isSelectable) {
+                setFocusItem();
+                (_a = context === null || context === void 0 ? void 0 : context.closeMenu) === null || _a === void 0 ? void 0 : _a.call(context);
+            }
+        }
+    };
+    const handleDisabled = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+    };
+    const handleFocusIn = () => {
+        onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver();
+    };
+    const handleFocusOut = () => {
+        onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut();
+    };
+    const renderMenu = () => {
+        return React.Children.map(children, (child) => {
+            if (React.isValidElement(child)) {
+                const type = child.type.componentType;
+                if (type === 'Menu') {
+                    return React.cloneElement(child, {
+                        alignment: 'start',
+                        closeParent: context === null || context === void 0 ? void 0 : context.closeParent,
+                        isSubMenu: true,
+                        position: 'right',
+                        triggerRef: menuItemRef
+                    });
+                }
+                else if (type === 'Popover') {
+                    return React.cloneElement(child, {
+                        alignment: 'start',
+                        isSubMenu: true,
+                        point: false,
+                        position: 'right',
+                        triggerRef: menuItemRef
+                    });
+                }
+                return null;
+            }
+        });
+    };
+    const renderChildren = () => {
+        return React.Children.map(children, (child) => {
+            if (!getSubMenuType(child)) {
+                return child;
+            }
+            return null;
+        });
+    };
+    React.useEffect(() => {
+        const hasSubMenu = React.Children.toArray(children).some((child) => getSubMenuType(child));
+        setIsSubElement(hasSubMenu);
+    }, [children]);
+    const menuItemClasses = (0, classnames_1.default)(MrlMenuItem_module_scss_1.default['MrlMenuItem'], 'MrlMenuItem');
+    const menuTriggerClasses = (0, classnames_1.default)(MrlMenuItem_module_scss_1.default['MrlMenuItem--item'], 'MrlMenuItem--item', {
+        [MrlMenuItem_module_scss_1.default['MrlMenuItem--item--selected']]: selected,
+        [MrlMenuItem_module_scss_1.default['MrlMenuItem--item--withIcon']]: !!icon
+    }, className);
+    const rightIcon = isSubElement ? ds_icons_1.chevronRight : selected ? ds_icons_1.check : null;
+    const hasPopup = isSubElement ? 'menu' : ariaHasPopup ? ariaHasPopup : undefined;
+    return (React.createElement("li", Object.assign({}, rest, { className: menuItemClasses, "data-qa": dataQa }),
+        React.createElement("button", Object.assign({ "aria-describedby": ariaDescribedBy, "aria-disabled": disabled, "aria-haspopup": hasPopup }, (isSelectable ? { 'aria-checked': selected ? 'true' : 'false' } : {}), { "data-selected": selected, "data-qa": dataQa && `${dataQa}-button`, id: id, ref: menuItemRef, role: role, type: "button", onClick: disabled ? handleDisabled : handleClick, onKeyDown: !disabled ? handleKeyDown : undefined, onMouseOver: !disabled && onMouseOver ? onMouseOver : undefined, onMouseOut: !disabled && onMouseOut ? onMouseOut : undefined, onFocus: !disabled && onMouseOver ? handleFocusIn : undefined, onBlur: !disabled && onMouseOut ? handleFocusOut : undefined, className: menuTriggerClasses }),
+            isSubElement && React.createElement("div", { className: MrlMenuItem_module_scss_1.default['MrlMenuItem--item--hoverArea'] }),
+            icon && (React.createElement("span", { className: MrlMenuItem_module_scss_1.default['MrlMenuItem--item--icon-left'] },
+                React.createElement(__1.MrlSvg, { size: "small", svg: icon }))),
+            renderChildren(),
+            rightIcon && (React.createElement("span", { className: MrlMenuItem_module_scss_1.default['MrlMenuItem--item--icon-right'] },
+                React.createElement("span", { className: MrlMenuItem_module_scss_1.default['MrlMenuItem--item--icon-right-container'] },
+                    React.createElement(__1.MrlSvg, { svg: rightIcon, size: "auto" }))))),
+        renderMenu()));
+}
+exports.MrlMenuItem = MrlMenuItem;

package/dist/cjs/components/menu/MrlMenuItem/MrlMenuItem.module.css

@@ -0,0 +1,156 @@
+/* stylelint-disable scss/operator-no-newline-after */
+.mrl-u-focus-wrapper--4ZhFe {
+  position: relative;
+}
+
+:root,
+.MrlDivider--OMEfB {
+  --mrl-divider-size: var(--mrl-spacing-01);
+  --mrl-divider-spacing: var(--mrl-space-stack-section-divider);
+  --mrl-divider-color: var(--mrl-black-opacity-01);
+}
+
+.MrlDivider--none--MCvVx {
+  --mrl-divider-spacing: 0;
+}
+
+.MrlDivider--small--s33sD {
+  --mrl-divider-spacing: var(--mrl-space-stack-section-divider-small);
+}
+
+.MrlDivider--large--sGMdQ {
+  --mrl-divider-spacing: var(--mrl-space-stack-section-divider-large);
+}
+
+.MrlDivider--xlarge--Ig6s8 {
+  --mrl-divider-spacing: var(--mrl-space-stack-section-divider-xlarge);
+}
+
+.MrlDivider--inverse---zHhY {
+  --mrl-divider-color: var(--mrl-white-opacity-02);
+}
+
+.MrlDivider--vertical--mLkmE {
+  --mrl-divider-spacing: var(--mrl-spacing-02);
+}
+.MrlDivider--vertical--mLkmE.MrlDivider--none--MCvVx {
+  --mrl-divider-spacing: 0;
+}
+
+.MrlDivider--thin--19wM7 {
+  --mrl-divider-size: var(--mrl-line-width-border-fine);
+}
+
+.MrlMenuItem--7BKSq {
+  border-radius: var(--mrl-border-radius-content-large);
+  list-style-type: none;
+  margin: 0;
+  margin-bottom: var(--mrl-space-stack-related-small);
+  text-align: left;
+  text-indent: 0;
+  white-space: nowrap;
+}
+.MrlMenuItem--7BKSq > .subMenu--5rXaO {
+  bottom: calc(var(--mrl-space-stack-controls) / 2);
+  display: none;
+  left: calc(100% + var(--mrl-space-stack-controls) / 2);
+  position: absolute;
+  top: calc(var(--mrl-space-stack-controls) / -2);
+}
+.MrlMenuItem--7BKSq > .subMenu--5rXaO::before {
+  bottom: calc(var(--mrl-space-stack-controls) / 2);
+  content: "";
+  cursor: pointer;
+  height: 100%;
+  left: calc(var(--mrl-space-stack-controls) * -1);
+  position: absolute;
+  top: calc(var(--mrl-space-stack-controls) / 2);
+  width: calc(var(--mrl-space-stack-controls) + 0.125rem);
+}
+.MrlMenuItem--7BKSq [aria-expanded=true] + .subMenu--5rXaO {
+  display: flex;
+}
+.MrlMenuItem--7BKSq a {
+  text-decoration: none;
+}
+.MrlMenuItem--7BKSq:last-child {
+  margin-bottom: 0;
+}
+
+.MrlMenuItem--item--d9WXo {
+  font-family: var(--mrl-body-font);
+  font-size: var(--mrl-type-size-text-xsmall);
+  font-weight: var(--mrl-type-weight-interactive);
+  letter-spacing: var(--mrl-type-spacing-interactive-xsmall);
+  line-height: var(--mrl-type-line-height-interactive-xsmall);
+  align-items: center;
+  background: none;
+  border: none;
+  border-radius: var(--mrl-border-radius-content-large);
+  color: var(--mrl-color-text);
+  cursor: pointer;
+  display: flex;
+  height: var(--mrl-spacing-08);
+  justify-content: flex-start;
+  padding: var(--mrl-space-inset);
+  padding-left: var(--mrl-spacing-04);
+  position: relative;
+  white-space: nowrap;
+  width: 100%;
+}
+.MrlMenuItem--item--selected--DD4Vp {
+  background: var(--mrl-color-background-inverse-hover);
+  color: var(--mrl-color-text-inverse);
+}
+.MrlMenuItem--item--withIcon--gH7VT {
+  padding: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02)) var(--mrl-space-inset) calc(var(--mrl-spacing-01) + var(--mrl-spacing-02)) var(--mrl-space-inset-control-small);
+}
+.MrlMenuItem--item--content--VzprM {
+  position: relative;
+  z-index: 1;
+}
+.MrlMenuItem--item--hoverArea--2L0-9 {
+  height: 100%;
+  left: -30px;
+  position: absolute;
+  width: 215px;
+}
+.MrlMenuItem--item--d9WXo .mrl-svg--DMW-- {
+  min-width: var(--mrl-spacing-06);
+}
+.MrlMenuItem--item--d9WXo.isLink--TPROU {
+  justify-content: flex-start;
+}
+.MrlMenuItem--item--d9WXo:focus-visible {
+  outline: var(--mrl-line-width-focus) solid var(--mrl-color-focus);
+  outline-offset: var(--mrl-spacing-01);
+}
+.MrlMenuItem--item--d9WXo:hover:not(.MrlMenuItem--item--selected--DD4Vp, [aria-disabled=true]), .MrlMenuItem--item--submenuOpen--nJuiK {
+  background: var(--mrl-black-opacity-00);
+  color: var(--mrl-color-text-hover);
+}
+.MrlMenuItem--item--d9WXo:active:not(.MrlMenuItem--item--selected--DD4Vp, [aria-disabled=true]) {
+  background: var(--mrl-black-opacity-01);
+  color: var(--mrl-color-text-active);
+}
+.MrlMenuItem--item--icon-left--ad7JL {
+  display: flex;
+  margin-right: calc(var(--mrl-spacing-01) + var(--mrl-spacing-03));
+}
+.MrlMenuItem--item--icon-right--HRheK {
+  margin-left: auto;
+}
+.MrlMenuItem--item--icon-right-container--9sJEO {
+  display: flex;
+  margin-left: var(--mrl-space-inset-control-small);
+  width: var(--mrl-spacing-05);
+}
+.MrlMenuItem--item--d9WXo[aria-disabled=true] {
+  background: transparent;
+  color: var(--mrl-color-text-disabled);
+  pointer-events: none;
+}
+.MrlMenuItem--item--d9WXo span,
+.MrlMenuItem--item--d9WXo svg {
+  pointer-events: none;
+}

package/dist/cjs/components/menu/MrlMenuItem/MrlMenuItem.module.scss.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./MrlMenuItem.module.css");
+exports.default = {
+	"mrl-u-focus-wrapper": "mrl-u-focus-wrapper--4ZhFe",
+	"MrlDivider": "MrlDivider--OMEfB",
+	"MrlDivider--none": "MrlDivider--none--MCvVx",
+	"MrlDivider--small": "MrlDivider--small--s33sD",
+	"MrlDivider--large": "MrlDivider--large--sGMdQ",
+	"MrlDivider--xlarge": "MrlDivider--xlarge--Ig6s8",
+	"MrlDivider--inverse": "MrlDivider--inverse---zHhY",
+	"MrlDivider--vertical": "MrlDivider--vertical--mLkmE",
+	"MrlDivider--thin": "MrlDivider--thin--19wM7",
+	"MrlMenuItem": "MrlMenuItem--7BKSq",
+	"subMenu": "subMenu--5rXaO",
+	"MrlMenuItem--item": "MrlMenuItem--item--d9WXo",
+	"MrlMenuItem--item--selected": "MrlMenuItem--item--selected--DD4Vp",
+	"MrlMenuItem--item--withIcon": "MrlMenuItem--item--withIcon--gH7VT",
+	"MrlMenuItem--item--content": "MrlMenuItem--item--content--VzprM",
+	"MrlMenuItem--item--hoverArea": "MrlMenuItem--item--hoverArea--2L0-9",
+	"mrl-svg": "mrl-svg--DMW--",
+	"isLink": "isLink--TPROU",
+	"MrlMenuItem--item--submenuOpen": "MrlMenuItem--item--submenuOpen--nJuiK",
+	"MrlMenuItem--item--icon-left": "MrlMenuItem--item--icon-left--ad7JL",
+	"MrlMenuItem--item--icon-right": "MrlMenuItem--item--icon-right--HRheK",
+	"MrlMenuItem--item--icon-right-container": "MrlMenuItem--item--icon-right-container--9sJEO"
+};

package/dist/cjs/components/menu/MrlMenuItem/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./MrlMenuItem"), exports);