@muraldevkit/ui-toolkit 4.66.0-dev-DhSN.1 → 4.66.0-dev-QELk.1

package/dist/cjs/components/menu/hooks/useMenuScroll.js

@@ -1,128 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMenuScroll = void 0;
-const react_1 = require("react");
-const SCREEN_OFFSET = 16;
-const DEFAULT_SCROLL_STATE = {
-    isScrolling: false,
-    maxHeight: undefined
-};
-/**
- * useMenuScroll hook
- *
- * Detects when a menu cannot fit on screen in either its preferred or flipped position,
- * and constrains its height to enable internal scrolling.
- *
- * Behavior by position:
- * - **top/bottom**: If the menu doesn't fit in the preferred direction AND doesn't fit
- *   in the opposite direction (flip), it reverts to the original position and constrains
- *   the height to the space between the trigger edge and the viewport edge.
- * - **left/right**: Only checks vertical overflow. If the menu is taller than the viewport,
- *   it constrains the height to the available vertical space.
- *
- * Uses `scrollHeight` on the list element to determine the natural (unconstrained) content
- * height. This value remains stable even when `maxHeight` is applied, preventing feedback
- * loops with external positioning hooks that use ResizeObserver.
- *
- * Uses `useLayoutEffect` for the initial calculation so that `maxHeight` is applied
- * synchronously before the browser paints. This prevents visible flicker when the menu
- * opens in a constrained space, because the positioning hook (useTriggerPosition) will
- * see the already-constrained height on its first measurement via requestAnimationFrame.
- *
- * @param triggerRef - Reference to the trigger element that opens the menu
- * @param listRef - Reference to the ul element inside the menu (the scrollable container)
- * @param position - The preferred menu position relative to the trigger
- * @param menuOffset - The gap between the trigger and the menu in pixels
- * @param isOpen - Whether the menu is currently open
- * @param disable - Whether to disable the hook entirely
- * @returns An object with `maxHeight` (inline style value) and `isScrolling` (class toggle)
- */
-const useMenuScroll = (triggerRef, listRef, position, menuOffset, isOpen, disable) => {
-    const [scrollState, setScrollState] = (0, react_1.useState)(DEFAULT_SCROLL_STATE);
-    const calculateScroll = (0, react_1.useCallback)(() => {
-        // Reset scroll constraints when the menu closes or refs aren't available.
-        if (!isOpen || disable || !(triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) || !listRef.current) {
-            setScrollState((prev) => {
-                if (prev.maxHeight === undefined && !prev.isScrolling)
-                    return prev;
-                return DEFAULT_SCROLL_STATE;
-            });
-            return;
-        }
-        const triggerRect = triggerRef.current.getBoundingClientRect();
-        const naturalHeight = listRef.current.scrollHeight;
-        const viewportHeight = window.innerHeight;
-        let maxHeight;
-        let isScrolling = false;
-        switch (position) {
-            case 'bottom': {
-                const availableBelow = viewportHeight - triggerRect.bottom - menuOffset - SCREEN_OFFSET;
-                const availableAbove = triggerRect.top - menuOffset - SCREEN_OFFSET;
-                if (naturalHeight > availableBelow && naturalHeight > availableAbove) {
-                    isScrolling = true;
-                    maxHeight = availableBelow;
-                }
-                break;
-            }
-            case 'top': {
-                const availableAbove = triggerRect.top - menuOffset - SCREEN_OFFSET;
-                const availableBelow = viewportHeight - triggerRect.bottom - menuOffset - SCREEN_OFFSET;
-                if (naturalHeight > availableAbove && naturalHeight > availableBelow) {
-                    isScrolling = true;
-                    maxHeight = availableAbove;
-                }
-                break;
-            }
-            case 'left':
-            case 'right': {
-                const availableVertical = viewportHeight - 2 * SCREEN_OFFSET;
-                if (naturalHeight > availableVertical) {
-                    isScrolling = true;
-                    maxHeight = availableVertical;
-                }
-                break;
-            }
-        }
-        /**
-         * Floor the maxHeight and subtract 1px to avoid sub-pixel rounding that can
-         * cause the element being positioned to flip between flipped/unflipped states.
-         */
-        const safeMaxHeight = maxHeight !== undefined ? Math.floor(maxHeight) - 1 : undefined;
-        setScrollState((prev) => {
-            if (prev.maxHeight === safeMaxHeight && prev.isScrolling === isScrolling)
-                return prev;
-            return { isScrolling, maxHeight: safeMaxHeight };
-        });
-    }, [isOpen, disable, triggerRef, listRef, position, menuOffset]);
-    /**
-     * Calculate synchronously before paint to prevent flicker.
-     * This ensures maxHeight is applied to the DOM before useTriggerPosition's
-     * requestAnimationFrame fires, so it measures the constrained height on its first pass.
-     */
-    (0, react_1.useLayoutEffect)(() => {
-        if (isOpen && !disable) {
-            calculateScroll();
-        }
-    }, [isOpen, disable, calculateScroll]);
-    /**
-     * Respond to window resize and content size changes (e.g. images loading,
-     * lazy content, dynamically added items).
-     */
-    (0, react_1.useEffect)(() => {
-        if (!isOpen || disable)
-            return;
-        window.addEventListener('resize', calculateScroll);
-        const listElement = listRef.current;
-        let resizeObserver;
-        if (listElement) {
-            resizeObserver = new ResizeObserver(calculateScroll);
-            resizeObserver.observe(listElement);
-        }
-        return () => {
-            window.removeEventListener('resize', calculateScroll);
-            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
-        };
-    }, [isOpen, disable, calculateScroll, listRef]);
-    return scrollState;
-};
-exports.useMenuScroll = useMenuScroll;

package/dist/cjs/components/menu/hooks/useSubMenuElementPosition.js

@@ -1,68 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSubMenuElementPosition = void 0;
-const react_1 = require("react");
-const utilities_1 = require("../MrlMenu/utilities");
-/**
- * Calculates the position of the sub menu element
- *
- * @param triggerRef - The trigger element ref
- * @param menuRef - The menu element ref
- * @param isSubMenu - Is the menu a sub menu
- * @param isOpen - Is the element visible
- * @param originalMenuRect - The menu element rect
- * @param disable - Should the menu be disabled
- * @returns The sub menu position
- */
-const useSubMenuElementPosition = (triggerRef, menuRef, isSubMenu, isOpen, originalMenuRect, disable) => {
-    const [subMenuPosition, setSubMenuPosition] = (0, react_1.useState)({
-        left: 'calc(100% - 5px)',
-        top: ''
-    });
-    const [menuRect, setMenuRect] = (0, react_1.useState)(null);
-    (0, react_1.useEffect)(() => {
-        if (!disable && isOpen && menuRef.current && !originalMenuRect) {
-            setMenuRect(menuRef.current.getBoundingClientRect());
-        }
-    }, [
-        disable,
-        isOpen,
-        menuRef,
-        originalMenuRect
-    ]);
-    (0, react_1.useEffect)(() => {
-        if (disable ||
-            !(triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) ||
-            !menuRef.current ||
-            !isSubMenu ||
-            !isOpen ||
-            !menuRect ||
-            !isSubMenu)
-            return;
-        const parentMenu = (0, utilities_1.findClosestMenuParent)(triggerRef.current);
-        const triggerRect = triggerRef.current.getBoundingClientRect();
-        if (!(parentMenu === null || parentMenu === void 0 ? void 0 : parentMenu.parentElement))
-            return;
-        const parentMenuRect = parentMenu.getBoundingClientRect();
-        const menuHeight = menuRef.current.getBoundingClientRect().height;
-        const overlapsRight = window.innerWidth < menuRect.right;
-        const overlapsLeft = triggerRect.left - menuRect.width < menuRect.width;
-        const newLeft = (0, utilities_1.calculateLeftPosition)(overlapsRight, overlapsLeft, menuRect, triggerRef);
-        let newTop = (0, utilities_1.calculateTopPosition)(overlapsRight, overlapsLeft, triggerRef, menuRect, parentMenu, triggerRect);
-        // if the submenu height is smaller than the menu height, we want to top align the submenu so it doesn't go off
-        // of the top of the screen
-        if (menuHeight > parentMenuRect.height) {
-            newTop = `0px`;
-        }
-        setSubMenuPosition({ left: newLeft, top: newTop });
-    }, [
-        disable,
-        triggerRef,
-        menuRef,
-        menuRect,
-        isSubMenu,
-        isOpen
-    ]);
-    return subMenuPosition;
-};
-exports.useSubMenuElementPosition = useSubMenuElementPosition;

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

@@ -1,22 +0,0 @@
-"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);
-__exportStar(require("./MrlMenuItem"), exports);
-__exportStar(require("./MrlMenuItemLink"), exports);
-__exportStar(require("./MrlMenuGroup"), exports);
-__exportStar(require("./constants"), exports);
-__exportStar(require("./utilities"), exports);

package/dist/cjs/components/menu/utilities/flip-position.js

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.flipPosition = void 0;
-/**
- * Flips the given position to its opposite.
- *
- * @param pos - The position to flip. Can be 'left', 'right', 'top', or 'bottom'.
- * @returns The flipped position. Will be 'right' for 'left', 'left' for 'right', 'bottom' for 'top', and 'top' for 'bottom'.
- */
-const flipPosition = (pos) => {
-    switch (pos) {
-        case 'left':
-            return 'right';
-        case 'right':
-            return 'left';
-        case 'top':
-            return 'bottom';
-        case 'bottom':
-            return 'top';
-    }
-    return pos;
-};
-exports.flipPosition = flipPosition;

package/dist/cjs/components/menu/utilities/get-scrollable-parent.js

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getScrollableParent = void 0;
-/**
- * Returns the closest scrollable parent of the provided element.
- *
- * @param element - The element to start from
- * @returns The closest scrollable ancestor or the document's scrolling element
- */
-function getScrollableParent(element) {
-    if (!element)
-        return window;
-    let current = element;
-    while (current && current !== document.body) {
-        const overflowY = window.getComputedStyle(current).overflowY;
-        const isScrollable = ['auto', 'scroll', 'overlay'].includes(overflowY);
-        if (isScrollable && current.scrollHeight > current.clientHeight) {
-            return current;
-        }
-        current = current.parentElement;
-    }
-    return window;
-}
-exports.getScrollableParent = getScrollableParent;

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

@@ -1,18 +0,0 @@
-"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("./flip-position"), exports);
-__exportStar(require("./get-scrollable-parent"), exports);

package/dist/cjs/components/modal/MrlModal/MrlModal.global.css

@@ -1,338 +0,0 @@
-:root {
-  --mrl-button-background-color-skeleton: var(--mrl-color-skeleton);
-  --mrl-button-border-radius: var(--mrl-border-radius-functional);
-}
-
-.mrl-u-preHydrateSkeleton mrl-button:not(.hydrated),
-.mrl-u-preHydrateSkeleton mrl-icon-button:not(.hydrated),
-.mrl-u-preHydrateSkeleton mrl-shadow-button:not(.hydrated) {
-  min-height: var(--mrl-spacing-09);
-  min-width: var(--mrl-spacing-09);
-  background: var(--mrl-button-background-color-skeleton);
-  border-radius: var(--mrl-button-border-radius);
-  box-shadow: none;
-  color: transparent;
-  display: inline-flex;
-  font-family: var(--mrl-body-font);
-  pointer-events: none;
-  visibility: inherit;
-}
-.mrl-u-preHydrateSkeleton mrl-button[kind=inverse]:not(.hydrated),
-.mrl-u-preHydrateSkeleton mrl-button[kind=ghost-inverse]:not(.hydrated),
-.mrl-u-preHydrateSkeleton mrl-icon-button[kind=inverse]:not(.hydrated),
-.mrl-u-preHydrateSkeleton mrl-icon-button[kind=ghost-inverse]:not(.hydrated),
-.mrl-u-preHydrateSkeleton mrl-shadow-button[kind=inverse]:not(.hydrated),
-.mrl-u-preHydrateSkeleton mrl-shadow-button[kind=ghost-inverse]:not(.hydrated) {
-  --mrl-button-background-color-skeleton: var(--mrl-color-skeleton-inverse);
-}
-
-mrl-button[size=small],
-mrl-shadow-button[size=small] {
-  min-height: var(--mrl-spacing-08);
-}
-
-mrl-icon-button[size=small] {
-  min-height: var(--mrl-spacing-08);
-  min-width: var(--mrl-spacing-08);
-}
-
-mrl-button[size=large],
-mrl-shadow-button[size=large] {
-  min-height: calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));
-}
-
-mrl-icon-button[size=large] {
-  min-height: calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));
-  min-width: calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));
-}
-
-mrl-icon-button[size=xsmall][kind=ghost],
-mrl-icon-button[size=xsmall][kind=ghost-inverse] {
-  min-height: var(--mrl-spacing-07);
-  min-width: var(--mrl-spacing-07);
-}
-
-.mrlIconButton,
-.mrlButton {
-  --mrl-button-background-color: var(--mrl-color-background);
-  --mrl-button-background-color-active: rgba(var(--mrl-gray-20), 1);
-  --mrl-button-background-color-disabled: var(--mrl-color-background);
-  --mrl-button-background-color-hover: rgba(var(--mrl-gray-10), 1);
-  --mrl-button-border-color: rgba(var(--mrl-gray-30), 1);
-  --mrl-button-border-color-active: rgba(var(--mrl-gray-50), 1);
-  --mrl-button-border-color-disabled: rgba(var(--mrl-gray-20), 1);
-  --mrl-button-border-color-hover: rgba(var(--mrl-gray-40), 1);
-  --mrl-button-border-width: var(--mrl-line-width-border);
-  --mrl-button-icon-size: var(--mrl-spacing-07);
-  --mrl-button-text-color: rgba(var(--mrl-gray-80), 1);
-  --mrl-button-text-color-active: rgba(var(--mrl-black), 1);
-  --mrl-button-text-color-disabled: var(--mrl-color-text-disabled);
-  --mrl-button-text-color-hover: rgba(var(--mrl-gray-90), 1);
-  --mrl-button-inset-vertical: 0;
-  --mrl-button-inset-horizontal: var(--mrl-space-inset-control-large);
-  --mrl-button-icon-margin-right: var(--mrl-space-inline-related);
-}
-.mrlIconButton--small,
-.mrlButton--small {
-  min-height: var(--mrl-spacing-08);
-  --mrl-button-icon-size: var(--mrl-spacing-06);
-  --mrl-button-inset-horizontal: var(--mrl-spacing-04);
-}
-.mrlIconButton.mrlIconButton--xsmall,
-.mrlButton.mrlIconButton--xsmall {
-  --mrl-button-icon-size: var(--mrl-spacing-06);
-}
-.mrlIconButton.mrlButton--xsmall,
-.mrlButton.mrlButton--xsmall {
-  --mrl-button-icon-size: var(--mrl-spacing-05);
-}
-.mrlIconButton.mrlIconButton--small,
-.mrlButton.mrlIconButton--small {
-  min-height: var(--mrl-spacing-08);
-  min-width: var(--mrl-spacing-08);
-}
-.mrlIconButton.mrlIconButton--small + .mrl-tooltip-content,
-.mrlButton.mrlIconButton--small + .mrl-tooltip-content {
-  --mrl-tooltip-arrow-spacing: calc(
-  	(var(--mrl-spacing-08) - var(--mrl-tooltip-arrow-size)) / 2
-  );
-}
-.mrlIconButton--large,
-.mrlButton--large {
-  min-height: calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));
-  --mrl-button-inset-horizontal: var(--mrl-spacing-05);
-}
-.mrlIconButton.mrlIconButton--large,
-.mrlButton.mrlIconButton--large {
-  min-height: calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));
-  min-width: calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));
-}
-.mrlIconButton.mrlButton--primary, .mrlIconButton.mrlButton--ghost, .mrlIconButton.mrlButton--ghost-inverse, .mrlIconButton.mrlIconButton--primary, .mrlIconButton.mrlIconButton--ghost, .mrlIconButton.mrlIconButton--ghost-inverse,
-.mrlButton.mrlButton--primary,
-.mrlButton.mrlButton--ghost,
-.mrlButton.mrlButton--ghost-inverse,
-.mrlButton.mrlIconButton--primary,
-.mrlButton.mrlIconButton--ghost,
-.mrlButton.mrlIconButton--ghost-inverse {
-  --mrl-button-border-color: transparent;
-  --mrl-button-border-color-active: transparent;
-  --mrl-button-border-color-hover: transparent;
-  --mrl-button-border-color-disabled: transparent;
-}
-.mrlIconButton--secondary-native,
-.mrlButton--secondary-native {
-  --mrl-button-border-color: transparent;
-  --mrl-button-border-color-active: transparent;
-  --mrl-button-border-color-hover: transparent;
-  --mrl-button-border-color-disabled: transparent;
-}
-.mrlIconButton--primary,
-.mrlButton--primary {
-  --mrl-button-background-color: var(--mrl-color-brand);
-  --mrl-button-background-color-active: var(--mrl-color-brand-active);
-  --mrl-button-background-color-disabled: var(--mrl-color-background-disabled);
-  --mrl-button-background-color-hover: var(--mrl-color-brand-hover);
-  --mrl-button-text-color: var(--mrl-color-text-inverse);
-  --mrl-button-text-color-active: var(--mrl-color-text-inverse);
-  --mrl-button-text-color-disabled: var(--mrl-color-text-inverse);
-  --mrl-button-text-color-hover: var(--mrl-color-text-inverse);
-}
-.mrlIconButton--primary-native,
-.mrlButton--primary-native {
-  --mrl-button-background-color: transparent;
-  --mrl-button-background-color-active: var(--mrl-black-opacity-01);
-  --mrl-button-background-color-disabled: transparent;
-  --mrl-button-background-color-hover: var(--mrl-black-opacity-00);
-  --mrl-button-border-color: transparent;
-  --mrl-button-border-color-active: transparent;
-  --mrl-button-border-color-hover: transparent;
-  --mrl-button-border-color-disabled: transparent;
-  --mrl-button-text-color: rgba(var(--mrl-blue-70), 1);
-  --mrl-button-text-color-active: rgba(var(--mrl-blue-70), 1);
-  --mrl-button-text-color-disabled: var(--mrl-black-opacity-03);
-  --mrl-button-text-color-hover: rgba(var(--mrl-blue-70), 1);
-}
-.mrlIconButton--ghost,
-.mrlButton--ghost {
-  --mrl-button-background-color: transparent;
-  --mrl-button-background-color-active: var(--mrl-black-opacity-01);
-  --mrl-button-background-color-hover: var(--mrl-black-opacity-00);
-  --mrl-button-background-color-disabled: transparent;
-  --mrl-button-text-color: rgba(var(--mrl-gray-100), 1);
-  --mrl-button-text-color-active: rgba(var(--mrl-gray-100), 1);
-  --mrl-button-text-color-disabled: var(--mrl-black-opacity-03);
-  --mrl-button-text-color-hover: rgba(var(--mrl-gray-100), 1);
-  --mrl-button-inset-horizontal: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
-  --mrl-button-icon-margin-right: var(--mrl-spacing-02);
-}
-.mrlIconButton--ghost[aria-pressed=true], .mrlIconButton--ghost[aria-checked=true], .mrlIconButton--ghost[aria-expanded=true], .mrlIconButton--ghost[aria-selected=true],
-.mrlButton--ghost[aria-pressed=true],
-.mrlButton--ghost[aria-checked=true],
-.mrlButton--ghost[aria-expanded=true],
-.mrlButton--ghost[aria-selected=true] {
-  --mrl-button-background-color: var(--mrl-color-background-inverse);
-  --mrl-button-text-color: var(--mrl-color-text-inverse);
-}
-.mrlIconButton--ghost-inverse,
-.mrlButton--ghost-inverse {
-  --mrl-button-background-color: transparent;
-  --mrl-button-background-color-active: var(--mrl-white-opacity-04);
-  --mrl-button-background-color-hover: var(--mrl-white-opacity-02);
-  --mrl-button-background-color-disabled: transparent;
-  --mrl-button-text-color: var(--mrl-color-text-inverse);
-  --mrl-button-text-color-active: var(--mrl-color-text-inverse);
-  --mrl-button-text-color-hover: var(--mrl-color-text-inverse);
-  --mrl-button-text-color-disabled: var(--mrl-white-opacity-04);
-  --mrl-button-inset-horizontal: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
-  --mrl-button-icon-margin-right: var(--mrl-spacing-02);
-}
-.mrlIconButton--ghost-inverse.mrlButton--skeleton,
-.mrlButton--ghost-inverse.mrlButton--skeleton {
-  --mrl-button-background-color-skeleton: var(--mrl-color-skeleton-inverse);
-}
-.mrlIconButton--ghost-inverse.toggleStyle--default[aria-pressed=true], .mrlIconButton--ghost-inverse.toggleStyle--default[aria-checked=true], .mrlIconButton--ghost-inverse.toggleStyle--default[aria-expanded=true], .mrlIconButton--ghost-inverse.toggleStyle--default[aria-selected=true],
-.mrlButton--ghost-inverse.toggleStyle--default[aria-pressed=true],
-.mrlButton--ghost-inverse.toggleStyle--default[aria-checked=true],
-.mrlButton--ghost-inverse.toggleStyle--default[aria-expanded=true],
-.mrlButton--ghost-inverse.toggleStyle--default[aria-selected=true] {
-  --mrl-button-background-color: var(--mrl-color-background);
-  --mrl-button-text-color: var(--mrl-color-text);
-}
-.mrlIconButton--ghost-inverse.toggleStyle--secondary[aria-pressed=true], .mrlIconButton--ghost-inverse.toggleStyle--secondary[aria-checked=true], .mrlIconButton--ghost-inverse.toggleStyle--secondary[aria-expanded=true], .mrlIconButton--ghost-inverse.toggleStyle--secondary[aria-selected=true],
-.mrlButton--ghost-inverse.toggleStyle--secondary[aria-pressed=true],
-.mrlButton--ghost-inverse.toggleStyle--secondary[aria-checked=true],
-.mrlButton--ghost-inverse.toggleStyle--secondary[aria-expanded=true],
-.mrlButton--ghost-inverse.toggleStyle--secondary[aria-selected=true] {
-  --mrl-button-background-color: var(--mrl-color-accent);
-  --mrl-button-text-color: var(--mrl-color-text-inverse);
-}
-.mrlIconButton--ghost-inverse[aria-disabled=true][aria-pressed=true], .mrlIconButton--ghost-inverse[aria-disabled=true][aria-checked=true], .mrlIconButton--ghost-inverse[aria-disabled=true][aria-expanded=true], .mrlIconButton--ghost-inverse[aria-disabled=true][aria-selected=true],
-.mrlButton--ghost-inverse[aria-disabled=true][aria-pressed=true],
-.mrlButton--ghost-inverse[aria-disabled=true][aria-checked=true],
-.mrlButton--ghost-inverse[aria-disabled=true][aria-expanded=true],
-.mrlButton--ghost-inverse[aria-disabled=true][aria-selected=true] {
-  --mrl-button-background-color-disabled: var(--mrl-white-opacity-03);
-  --mrl-button-text-color-disabled: var(--mrl-white-opacity-04);
-}
-.mrlIconButton--inverse,
-.mrlButton--inverse {
-  --mrl-button-background-color: var(--mrl-color-background);
-  --mrl-button-background-color-active: var(--mrl-white-opacity-06);
-  --mrl-button-background-color-hover: var(--mrl-white-opacity-08);
-  --mrl-button-background-color-disabled: var(--mrl-white-opacity-03);
-  --mrl-button-border-color: transparent;
-  --mrl-button-border-color-active: transparent;
-  --mrl-button-border-color-hover: transparent;
-  --mrl-button-border-color-disabled: transparent;
-  --mrl-button-text-color: rgba(var(--mrl-gray-100), 1);
-  --mrl-button-text-color-active: rgba(var(--mrl-gray-100), 1);
-  --mrl-button-text-color-disabled: var(--mrl-black-opacity-03);
-}
-.mrlIconButton--inverse.mrlButton--skeleton,
-.mrlButton--inverse.mrlButton--skeleton {
-  --mrl-button-background-color-skeleton: var(--mrl-color-skeleton-inverse);
-}
-.mrlIconButton[aria-disabled=true][aria-pressed=true], .mrlIconButton[aria-disabled=true][aria-checked=true], .mrlIconButton[aria-disabled=true][aria-expanded=true], .mrlIconButton[aria-disabled=true][aria-selected=true],
-.mrlButton[aria-disabled=true][aria-pressed=true],
-.mrlButton[aria-disabled=true][aria-checked=true],
-.mrlButton[aria-disabled=true][aria-expanded=true],
-.mrlButton[aria-disabled=true][aria-selected=true] {
-  --mrl-button-background-color-disabled: var(--mrl-black-opacity-03);
-  --mrl-button-text-color-disabled: var(--mrl-color-text-inverse);
-}
-
-.mrl-modal {
-  --mrl-modal-header-text-color: rgba(var(--mrl-gray-100), 1);
-  --mrl-modal-padding-vertical: var(--mrl-spacing-07);
-  --mrl-modal-padding-vertical-bottom: var(--mrl-spacing-06);
-  --mrl-modal-padding-vertical-top: var(--mrl-spacing-07);
-  --mrl-modal-padding-vertical-footer: var(--mrl-spacing-07);
-  --mrl-modal-padding-vertical-content: var(--mrl-spacing-02);
-  --mrl-modal-padding-horizontal: var(--mrl-spacing-07);
-  --mrl-modal-close-inline-margin: var(--mrl-space-inline-related);
-  --mrl-modal-close-offset: var(--mrl-spacing-06);
-}
-
-@media screen and (min-width: 37.5rem) {
-  .mrl-modal,
-  .mrl-modal .footer.slotted .mrl-modal-footer,
-  .mrl-modal .header.slotted .mrl-modal-header {
-    --mrl-modal-padding-horizontal: var(--mrl-spacing-08);
-  }
-  .mrl-modal--large,
-  .mrl-modal--large .footer.slotted .mrl-modal-footer,
-  .mrl-modal--large .header.slotted .mrl-modal-header {
-    --mrl-modal-padding-horizontal: var(--mrl-spacing-09);
-  }
-}
-.mrl-native-modal,
-.mrl-display-modal {
-  --mrl-modal-padding-horizontal: var(--mrl-spacing-05);
-}
-
-.mrl-modal-backdrop {
-  --mrl-modal-backdrop-background: var(--mrl-black-opacity-05);
-}
-
-.mrl-modal {
-  --mrl-modal-size: 600px;
-  --mrl-modal-border-radius: var(--mrl-radii-05);
-  --mrl-modal-background: var(--mrl-color-background);
-  --mrl-modal-max-height: 95vh;
-}
-
-@media screen and (min-width: 37.5rem) {
-  .mrl-modal--small {
-    --mrl-modal-size: 400px;
-  }
-  .mrl-modal--large {
-    --mrl-modal-size: 800px;
-  }
-}
-.mrl-native-modal,
-.mrl-display-modal {
-  --mrl-modal-border-radius: var(--mrl-radii-04);
-  --mrl-modal-size: 600px;
-  --mrl-modal-max-height: 642px;
-}
-
-@media screen and (min-width: 37.5rem) {
-  .mrl-modal {
-    border-radius: var(--mrl-modal-border-radius);
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), var(--mrl-shadow-03);
-    height: auto;
-    margin: var(--mrl-spacing-08);
-    max-height: var(--mrl-modal-max-height);
-    max-width: var(--mrl-modal-size);
-  }
-  .mrl-native-modal,
-  .mrl-display-modal {
-    height: min(var(--mrl-modal-max-height), 100vh - var(--mrl-spacing-09) - var(--mrl-spacing-08));
-    margin-bottom: initial;
-    max-height: initial;
-  }
-}
-.mrl-native-modal,
-.mrl-display-modal {
-  border-radius: var(--mrl-modal-border-radius) var(--mrl-modal-border-radius) 0 0;
-}
-@media screen and (min-width: 37.5rem) {
-  .mrl-native-modal,
-  .mrl-display-modal {
-    border-radius: var(--mrl-modal-border-radius);
-  }
-}
-.mrl-native-modal .mrl-modal-close,
-.mrl-display-modal .mrl-modal-close {
-  display: none;
-}
-.mrl-native-modal .mrl-modal-header,
-.mrl-display-modal .mrl-modal-header {
-  position: relative;
-  text-align: center;
-}
-.mrl-native-modal .mrl-modal-header .mrl-text-heading,
-.mrl-display-modal .mrl-modal-header .mrl-text-heading {
-  text-align: center;
-  width: 100%;
-}