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

package/dist/cjs/components/modal/MrlModal/MrlModal.js

@@ -0,0 +1,233 @@
+"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.MrlModal = void 0;
+const React = __importStar(require("react"));
+const utils_1 = require("../../../utils");
+const constants_1 = require("../constants");
+const __1 = require("../../");
+const ds_icons_1 = require("@muraldevkit/ds-icons");
+const classnames_1 = __importDefault(require("classnames"));
+const MrlModal_module_scss_1 = __importDefault(require("./MrlModal.module.scss.js"));
+const layers_1 = require("../../../utils/layers");
+require("./MrlModal.global.css");
+const MrlModalContext_1 = require("../MrlModalContext");
+/**
+ * Modal Component.
+ * @param props - Modal props
+ * @returns an instance of the MrlModal
+ */
+exports.MrlModal = React.forwardRef(function MrlModal(props, ref) {
+    const { ariaLabel, children, className, closable = true, loading = false, size = constants_1.defaults.size, state = 'close', hookClose = undefined, preventBackgroundScroll = true, attrs = {} } = props, rest = __rest(props, ["ariaLabel", "children", "className", "closable", "loading", "size", "state", "hookClose", "preventBackgroundScroll", "attrs"]);
+    /**
+     * Reference to the modal container.
+     */
+    const modalContainer = React.useRef(null);
+    /**
+     * Reference to the modal
+     */
+    const modal = React.useRef(null);
+    React.useImperativeHandle(ref, () => {
+        return modalContainer.current;
+    });
+    /**
+     * Reference to the modal close button.
+     */
+    const closeButton = React.useRef(null);
+    /**
+     * Reference to the modal heading element.
+     */
+    const heading = React.useRef(null);
+    /**
+     * Open/Closed state of the modal
+     */
+    const [modalState, setModalState] = React.useState(() => state);
+    /**
+     * Sets the state of the modal for fading in and out opacity
+     */
+    const [fadeState, setFadeState] = React.useState('');
+    /**
+     * Sets state of the modal for when it is completely hidden from the DOM
+     */
+    const [displayState, setDisplayState] = React.useState('hide');
+    /**
+     * Sets aria-labelledby attribute on the modal for assistive technology
+     */
+    const [modalLabel, setModalLabel] = React.useState(null);
+    /**
+     * Store the previous overflow value of the body before we set it to hidden
+     */
+    const [prevOverflow, setPrevOverflow] = React.useState('');
+    /**
+     *  Indicates if the content is scrollable, calculated in the MrlModalContent component
+     */
+    const [scrollableContent, setScrollableContent] = React.useState({
+        hasScrollBottom: false,
+        hasScrollTop: false,
+        isContentScrollable: false
+    });
+    /**
+     * Modal title for context
+     */
+    const [title, setTitle] = React.useState('');
+    /**
+     * Handles when the user clicks on the overlay to close the modal
+     * @param {React.KeyEvent} e - key event data
+     */
+    const handleKeyDismiss = (e) => {
+        if (e.key === 'Escape')
+            setModalState('close');
+    };
+    /**
+     * Handles when the user clicks on the overlay to close the modal
+     * @param {MouseEvent} e - mouse event data
+     */
+    const handleDismiss = (e) => {
+        if (modalContainer.current !== e.target)
+            return;
+        handleClose();
+    };
+    /**
+     * Handler logic for closing the modal
+     */
+    const handleClose = React.useCallback(() => {
+        setFadeState(MrlModal_module_scss_1.default['fade-out']);
+        /**
+         * Set timeout to allow for fade out animation to complete
+         * before we hide the modal from the DOM and call the close hook
+         */
+        const timeoutId = setTimeout(() => {
+            if (modal.current) {
+                setDisplayState(MrlModal_module_scss_1.default['hide']);
+            }
+            hookClose && hookClose();
+        }, constants_1.TransitionDuration);
+        if (preventBackgroundScroll)
+            document.body.style.overflow = prevOverflow;
+        // cleanup setTimeout
+        return () => {
+            clearTimeout(timeoutId);
+        };
+    }, [hookClose, prevOverflow, preventBackgroundScroll]);
+    /**
+     * Handler logic for opening the modal
+     */
+    const handleOpen = React.useCallback(() => {
+        setDisplayState(MrlModal_module_scss_1.default['display']);
+        setFadeState(MrlModal_module_scss_1.default['fade-in']);
+        if (preventBackgroundScroll) {
+            setPrevOverflow(document.body.style.overflow);
+            document.body.style.overflow = 'hidden';
+        }
+    }, [preventBackgroundScroll]);
+    /**
+     * Sets the open/close state of the UI
+     */
+    React.useEffect(() => {
+        if (modalState === 'open') {
+            handleOpen();
+        }
+        else if (modalState === 'close') {
+            // setup reference so we can clean up the funciton
+            const cleanup = handleClose();
+            // cleanup handleClose
+            return cleanup;
+        }
+    }, [modalState, handleOpen, handleClose]);
+    /**
+     * Sets modal state when the state prop changes
+     */
+    React.useEffect(() => {
+        setModalState(state);
+    }, [state]);
+    /**
+     * ComponentDidLoad
+     */
+    React.useEffect(() => {
+        const el = modalContainer.current;
+        if (el) {
+            /**
+             * Setting up aria-labelledby association for assitive technology users
+             */
+            if (el.getAttribute('aria-labelledby') === null) {
+                heading.current = el.querySelector('.mrl-modal-text-heading');
+                if (heading.current) {
+                    let id = heading.current.getAttribute('id');
+                    if (!id) {
+                        id = (0, utils_1.getUniqueId)('mrl-modal');
+                        heading.current.setAttribute('id', id);
+                    }
+                    setModalLabel(id);
+                }
+            }
+        }
+    }, []);
+    /**
+     * Cleanup overflow hidden when component unmounts
+     */
+    React.useEffect(() => {
+        return () => {
+            document.body.style.overflow = '';
+        };
+    }, []);
+    const containerClasses = (0, classnames_1.default)('mrl-modal-container', 'mrl-modal-backdrop', className, MrlModal_module_scss_1.default['mrl-modal-backdrop'], fadeState, displayState);
+    const modalClasses = (0, classnames_1.default)('mrl-modal', MrlModal_module_scss_1.default['mrl-modal'], attrs.class || attrs.className, {
+        [`mrl-modal--${size}`]: size !== constants_1.defaults.size
+    });
+    const closeClasses = (0, classnames_1.default)('mrl-modal-close', MrlModal_module_scss_1.default['mrl-modal-close']);
+    const attrConfig = Object.assign(Object.assign({ 'aria-hidden': (modalState === 'close').toString() }, (ariaLabel
+        ? { 'aria-label': ariaLabel }
+        : modalLabel !== null
+            ? { 'aria-labelledby': modalLabel }
+            : { 'aria-label': 'Modal' })), { 'aria-modal': 'true', role: 'dialog' });
+    delete attrs.class;
+    delete attrs.className;
+    const attributes = (0, utils_1.setAttributes)(attrs, attrConfig);
+    return (React.createElement(MrlModalContext_1.MrlModalContext.Provider, { value: {
+            scrollableContent,
+            setScrollableContent,
+            setTitle,
+            title
+        } },
+        React.createElement(__1.MrlFocusTrap, { disabled: loading, containerRef: modalContainer },
+            React.createElement("div", Object.assign({}, rest, { id: layers_1.PORTAL_LAYERS.MODAL.name, ref: modalContainer }, attributes, { className: containerClasses }, (closable && { onMouseDown: handleDismiss }), (closable && { onKeyDown: handleKeyDismiss }), { role: "dialog", style: { zIndex: layers_1.PORTAL_LAYERS.MODAL.zIndex } }),
+                React.createElement("div", { ref: modal, className: modalClasses },
+                    children,
+                    closable && (React.createElement(__1.MrlIconButton, { wrapperClassName: closeClasses, icon: React.createElement(__1.MrlSvg, { svg: ds_icons_1.close }), onClick: handleClose, text: "Close", state: "default", position: "bottom", tipAnchor: "center", ref: closeButton })))))));
+});

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

@@ -0,0 +1,363 @@
+/* stylelint-disable scss/operator-no-newline-after */
+.mrl-u-focus-wrapper--hBNvo {
+  position: relative;
+}
+
+:root {
+  --mrl-button-background-color-skeleton: var(--mrl-color-skeleton);
+  --mrl-button-border-radius: var(--mrl-border-radius-functional);
+}
+
+.mrl-u-preHydrateSkeleton--gcWWn mrl-button:not(.hydrated--gfrtB),
+.mrl-u-preHydrateSkeleton--gcWWn mrl-icon-button:not(.hydrated--gfrtB),
+.mrl-u-preHydrateSkeleton--gcWWn mrl-shadow-button:not(.hydrated--gfrtB) {
+  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--gcWWn mrl-button[kind=inverse]:not(.hydrated--gfrtB),
+.mrl-u-preHydrateSkeleton--gcWWn mrl-button[kind=ghost-inverse]:not(.hydrated--gfrtB),
+.mrl-u-preHydrateSkeleton--gcWWn mrl-icon-button[kind=inverse]:not(.hydrated--gfrtB),
+.mrl-u-preHydrateSkeleton--gcWWn mrl-icon-button[kind=ghost-inverse]:not(.hydrated--gfrtB),
+.mrl-u-preHydrateSkeleton--gcWWn mrl-shadow-button[kind=inverse]:not(.hydrated--gfrtB),
+.mrl-u-preHydrateSkeleton--gcWWn mrl-shadow-button[kind=ghost-inverse]:not(.hydrated--gfrtB) {
+  --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--QZVia,
+.mrlButton--oCxtQ {
+  --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--rCea9,
+.mrlButton--small--sP81w {
+  min-height: var(--mrl-spacing-08);
+  --mrl-button-icon-size: var(--mrl-spacing-06);
+  --mrl-button-inset-horizontal: var(--mrl-spacing-04);
+}
+.mrlIconButton--QZVia.mrlIconButton--xsmall--6it2q,
+.mrlButton--oCxtQ.mrlIconButton--xsmall--6it2q {
+  --mrl-button-icon-size: var(--mrl-spacing-06);
+}
+.mrlIconButton--QZVia.mrlButton--xsmall--3QnHQ,
+.mrlButton--oCxtQ.mrlButton--xsmall--3QnHQ {
+  --mrl-button-icon-size: var(--mrl-spacing-05);
+}
+.mrlIconButton--QZVia.mrlIconButton--small--rCea9,
+.mrlButton--oCxtQ.mrlIconButton--small--rCea9 {
+  min-height: var(--mrl-spacing-08);
+  min-width: var(--mrl-spacing-08);
+}
+.mrlIconButton--QZVia.mrlIconButton--small--rCea9 + .mrl-tooltip-content--dCKBJ,
+.mrlButton--oCxtQ.mrlIconButton--small--rCea9 + .mrl-tooltip-content--dCKBJ {
+  --mrl-tooltip-arrow-spacing: calc(
+  	(var(--mrl-spacing-08) - var(--mrl-tooltip-arrow-size)) / 2
+  );
+}
+.mrlIconButton--large--QSMD4,
+.mrlButton--large---aciN {
+  min-height: calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));
+  --mrl-button-inset-horizontal: var(--mrl-spacing-05);
+}
+.mrlIconButton--QZVia.mrlIconButton--large--QSMD4,
+.mrlButton--oCxtQ.mrlIconButton--large--QSMD4 {
+  min-height: calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));
+  min-width: calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));
+}
+.mrlIconButton--QZVia.mrlButton--primary--Znoyd, .mrlIconButton--QZVia.mrlButton--ghost--phgeh, .mrlIconButton--QZVia.mrlButton--ghost-inverse--xy4xq, .mrlIconButton--QZVia.mrlIconButton--primary--6VJ39, .mrlIconButton--QZVia.mrlIconButton--ghost--7b69p, .mrlIconButton--QZVia.mrlIconButton--ghost-inverse--AqwHJ,
+.mrlButton--oCxtQ.mrlButton--primary--Znoyd,
+.mrlButton--oCxtQ.mrlButton--ghost--phgeh,
+.mrlButton--oCxtQ.mrlButton--ghost-inverse--xy4xq,
+.mrlButton--oCxtQ.mrlIconButton--primary--6VJ39,
+.mrlButton--oCxtQ.mrlIconButton--ghost--7b69p,
+.mrlButton--oCxtQ.mrlIconButton--ghost-inverse--AqwHJ {
+  --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--ztdCO,
+.mrlButton--secondary-native--Sz5ef {
+  --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--6VJ39,
+.mrlButton--primary--Znoyd {
+  --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--iL-Og,
+.mrlButton--primary-native--w1rva {
+  --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--7b69p,
+.mrlButton--ghost--phgeh {
+  --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--7b69p[aria-pressed=true], .mrlIconButton--ghost--7b69p[aria-checked=true], .mrlIconButton--ghost--7b69p[aria-expanded=true], .mrlIconButton--ghost--7b69p[aria-selected=true],
+.mrlButton--ghost--phgeh[aria-pressed=true],
+.mrlButton--ghost--phgeh[aria-checked=true],
+.mrlButton--ghost--phgeh[aria-expanded=true],
+.mrlButton--ghost--phgeh[aria-selected=true] {
+  --mrl-button-background-color: var(--mrl-color-background-inverse);
+  --mrl-button-text-color: var(--mrl-color-text-inverse);
+}
+.mrlIconButton--ghost-inverse--AqwHJ,
+.mrlButton--ghost-inverse--xy4xq {
+  --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--AqwHJ.mrlButton--skeleton--S-lon,
+.mrlButton--ghost-inverse--xy4xq.mrlButton--skeleton--S-lon {
+  --mrl-button-background-color-skeleton: var(--mrl-color-skeleton-inverse);
+}
+.mrlIconButton--ghost-inverse--AqwHJ.toggleStyle--default--gPVgx[aria-pressed=true], .mrlIconButton--ghost-inverse--AqwHJ.toggleStyle--default--gPVgx[aria-checked=true], .mrlIconButton--ghost-inverse--AqwHJ.toggleStyle--default--gPVgx[aria-expanded=true], .mrlIconButton--ghost-inverse--AqwHJ.toggleStyle--default--gPVgx[aria-selected=true],
+.mrlButton--ghost-inverse--xy4xq.toggleStyle--default--gPVgx[aria-pressed=true],
+.mrlButton--ghost-inverse--xy4xq.toggleStyle--default--gPVgx[aria-checked=true],
+.mrlButton--ghost-inverse--xy4xq.toggleStyle--default--gPVgx[aria-expanded=true],
+.mrlButton--ghost-inverse--xy4xq.toggleStyle--default--gPVgx[aria-selected=true] {
+  --mrl-button-background-color: var(--mrl-color-background);
+  --mrl-button-text-color: var(--mrl-color-text);
+}
+.mrlIconButton--ghost-inverse--AqwHJ.toggleStyle--secondary--uf-JP[aria-pressed=true], .mrlIconButton--ghost-inverse--AqwHJ.toggleStyle--secondary--uf-JP[aria-checked=true], .mrlIconButton--ghost-inverse--AqwHJ.toggleStyle--secondary--uf-JP[aria-expanded=true], .mrlIconButton--ghost-inverse--AqwHJ.toggleStyle--secondary--uf-JP[aria-selected=true],
+.mrlButton--ghost-inverse--xy4xq.toggleStyle--secondary--uf-JP[aria-pressed=true],
+.mrlButton--ghost-inverse--xy4xq.toggleStyle--secondary--uf-JP[aria-checked=true],
+.mrlButton--ghost-inverse--xy4xq.toggleStyle--secondary--uf-JP[aria-expanded=true],
+.mrlButton--ghost-inverse--xy4xq.toggleStyle--secondary--uf-JP[aria-selected=true] {
+  --mrl-button-background-color: var(--mrl-color-accent);
+  --mrl-button-text-color: var(--mrl-color-text-inverse);
+}
+.mrlIconButton--ghost-inverse--AqwHJ[aria-disabled=true][aria-pressed=true], .mrlIconButton--ghost-inverse--AqwHJ[aria-disabled=true][aria-checked=true], .mrlIconButton--ghost-inverse--AqwHJ[aria-disabled=true][aria-expanded=true], .mrlIconButton--ghost-inverse--AqwHJ[aria-disabled=true][aria-selected=true],
+.mrlButton--ghost-inverse--xy4xq[aria-disabled=true][aria-pressed=true],
+.mrlButton--ghost-inverse--xy4xq[aria-disabled=true][aria-checked=true],
+.mrlButton--ghost-inverse--xy4xq[aria-disabled=true][aria-expanded=true],
+.mrlButton--ghost-inverse--xy4xq[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--xeTCf,
+.mrlButton--inverse--nJdza {
+  --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--xeTCf.mrlButton--skeleton--S-lon,
+.mrlButton--inverse--nJdza.mrlButton--skeleton--S-lon {
+  --mrl-button-background-color-skeleton: var(--mrl-color-skeleton-inverse);
+}
+.mrlIconButton--QZVia[aria-disabled=true][aria-pressed=true], .mrlIconButton--QZVia[aria-disabled=true][aria-checked=true], .mrlIconButton--QZVia[aria-disabled=true][aria-expanded=true], .mrlIconButton--QZVia[aria-disabled=true][aria-selected=true],
+.mrlButton--oCxtQ[aria-disabled=true][aria-pressed=true],
+.mrlButton--oCxtQ[aria-disabled=true][aria-checked=true],
+.mrlButton--oCxtQ[aria-disabled=true][aria-expanded=true],
+.mrlButton--oCxtQ[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--91TwE {
+  --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--91TwE,
+  .mrl-modal--91TwE .footer--sEp2T.slotted--ipAJs .mrl-modal-footer--oPZLD,
+  .mrl-modal--91TwE .header--1BP9z.slotted--ipAJs .mrl-modal-header--AujeT {
+    --mrl-modal-padding-horizontal: var(--mrl-spacing-08);
+  }
+  .mrl-modal--large---Kpg0,
+  .mrl-modal--large---Kpg0 .footer--sEp2T.slotted--ipAJs .mrl-modal-footer--oPZLD,
+  .mrl-modal--large---Kpg0 .header--1BP9z.slotted--ipAJs .mrl-modal-header--AujeT {
+    --mrl-modal-padding-horizontal: var(--mrl-spacing-09);
+  }
+}
+.mrl-native-modal--RKYv-,
+.mrl-display-modal--xP9Ms {
+  --mrl-modal-padding-horizontal: var(--mrl-spacing-05);
+}
+
+.mrl-modal-backdrop--XHDxP {
+  --mrl-modal-backdrop-background: var(--mrl-black-opacity-05);
+}
+
+.mrl-modal--91TwE {
+  --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--9W1z0 {
+    --mrl-modal-size: 400px;
+  }
+  .mrl-modal--large---Kpg0 {
+    --mrl-modal-size: 800px;
+  }
+}
+.mrl-native-modal--RKYv-,
+.mrl-display-modal--xP9Ms {
+  --mrl-modal-border-radius: var(--mrl-radii-04);
+  --mrl-modal-size: 600px;
+  --mrl-modal-max-height: 642px;
+}
+
+.mrl-modal-backdrop--XHDxP {
+  align-items: center;
+  background: var(--mrl-modal-backdrop-background);
+  display: flex;
+  inset: 0;
+  justify-content: center;
+  opacity: 0;
+  position: fixed;
+  transition: opacity 300ms ease-in-out;
+  z-index: 1000;
+}
+.mrl-modal-backdrop--XHDxP.fade-in--KA34s {
+  opacity: 1;
+  transition-duration: var(--mrl-duration-04);
+  transition-property: opacity;
+  transition-timing-function: var(--mrl-timing-m1);
+}
+.mrl-modal-backdrop--XHDxP.fade-out--oKqCD {
+  opacity: 0;
+  transition-duration: var(--mrl-duration-03);
+  transition-timing-function: var(--mrl-timing-m3);
+}
+.mrl-modal-backdrop--XHDxP.display--mg2v3 {
+  display: fixed;
+}
+.mrl-modal-backdrop--XHDxP.hide--6-Apt {
+  display: none;
+}
+.mrl-modal-backdrop--native--1un74, .mrl-modal-backdrop--display--FZILO {
+  align-items: flex-start;
+}
+
+.mrl-modal--91TwE {
+  background: var(--mrl-modal-background);
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  height: 100dvh;
+  position: relative;
+  width: 100dvw;
+}
+.mrl-modal--91TwE .mrl-modal-close--j8QKl {
+  position: absolute;
+  right: var(--mrl-modal-close-offset);
+  top: var(--mrl-modal-close-offset);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .mrl-modal-backdrop--XHDxP.fade-in--KA34s .mrl-modal--91TwE {
+    transform: translate(0, 0);
+    transition-duration: var(--mrl-duration-04);
+    transition-property: transform;
+    transition-timing-function: var(--mrl-timing-m1);
+  }
+  .mrl-modal-backdrop--XHDxP.fade-out--oKqCD .mrl-modal--91TwE {
+    transform: translate(0, var(--mrl-distance-02));
+    transition-duration: var(--mrl-duration-03);
+    transition-timing-function: var(--mrl-timing-m3);
+  }
+}

package/dist/cjs/components/modal/MrlModal/MrlModal.module.scss.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./MrlModal.module.css");
+exports.default = {
+	"mrl-u-focus-wrapper": "mrl-u-focus-wrapper--hBNvo",
+	"mrl-u-preHydrateSkeleton": "mrl-u-preHydrateSkeleton--gcWWn",
+	"hydrated": "hydrated--gfrtB",
+	"mrlIconButton": "mrlIconButton--QZVia",
+	"mrlButton": "mrlButton--oCxtQ",
+	"mrlIconButton--small": "mrlIconButton--small--rCea9",
+	"mrlButton--small": "mrlButton--small--sP81w",
+	"mrlIconButton--xsmall": "mrlIconButton--xsmall--6it2q",
+	"mrlButton--xsmall": "mrlButton--xsmall--3QnHQ",
+	"mrl-tooltip-content": "mrl-tooltip-content--dCKBJ",
+	"mrlIconButton--large": "mrlIconButton--large--QSMD4",
+	"mrlButton--large": "mrlButton--large---aciN",
+	"mrlButton--primary": "mrlButton--primary--Znoyd",
+	"mrlButton--ghost": "mrlButton--ghost--phgeh",
+	"mrlButton--ghost-inverse": "mrlButton--ghost-inverse--xy4xq",
+	"mrlIconButton--primary": "mrlIconButton--primary--6VJ39",
+	"mrlIconButton--ghost": "mrlIconButton--ghost--7b69p",
+	"mrlIconButton--ghost-inverse": "mrlIconButton--ghost-inverse--AqwHJ",
+	"mrlIconButton--secondary-native": "mrlIconButton--secondary-native--ztdCO",
+	"mrlButton--secondary-native": "mrlButton--secondary-native--Sz5ef",
+	"mrlIconButton--primary-native": "mrlIconButton--primary-native--iL-Og",
+	"mrlButton--primary-native": "mrlButton--primary-native--w1rva",
+	"mrlButton--skeleton": "mrlButton--skeleton--S-lon",
+	"toggleStyle--default": "toggleStyle--default--gPVgx",
+	"toggleStyle--secondary": "toggleStyle--secondary--uf-JP",
+	"mrlIconButton--inverse": "mrlIconButton--inverse--xeTCf",
+	"mrlButton--inverse": "mrlButton--inverse--nJdza",
+	"mrl-modal": "mrl-modal--91TwE",
+	"footer": "footer--sEp2T",
+	"slotted": "slotted--ipAJs",
+	"mrl-modal-footer": "mrl-modal-footer--oPZLD",
+	"header": "header--1BP9z",
+	"mrl-modal-header": "mrl-modal-header--AujeT",
+	"mrl-modal--large": "mrl-modal--large---Kpg0",
+	"mrl-native-modal": "mrl-native-modal--RKYv-",
+	"mrl-display-modal": "mrl-display-modal--xP9Ms",
+	"mrl-modal-backdrop": "mrl-modal-backdrop--XHDxP",
+	"mrl-modal--small": "mrl-modal--small--9W1z0",
+	"fade-in": "fade-in--KA34s",
+	"fade-out": "fade-out--oKqCD",
+	"display": "display--mg2v3",
+	"hide": "hide--6-Apt",
+	"mrl-modal-backdrop--native": "mrl-modal-backdrop--native--1un74",
+	"mrl-modal-backdrop--display": "mrl-modal-backdrop--display--FZILO",
+	"mrl-modal-close": "mrl-modal-close--j8QKl"
+};

package/dist/cjs/components/modal/MrlModal/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MrlModal = void 0;
+var MrlModal_1 = require("./MrlModal");
+Object.defineProperty(exports, "MrlModal", { enumerable: true, get: function () { return MrlModal_1.MrlModal; } });

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

@@ -0,0 +1,33 @@
+/* stylelint-disable */
+#anchor--components-modal-mrlmodal--default .mrl-modal-container,
+#story--components-modal-mrlmodal--default .mrl-modal-container {
+  display: block;
+  position: static;
+}
+
+#story--components-modal-mrlmodal--default {
+  min-height: 400px;
+}
+
+#anchor--components-modal-mrlmodal--default .mrl-modal-backdrop,
+#story--components-modal-mrlmodal--default .mrl-modal-backdrop {
+  background: none;
+}
+
+.story-content p,
+.story-content h1,
+.story-content h2 {
+  margin-bottom: var(--mrl-spacing-06);
+}
+
+.modal-trigger-demo-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrl-spacing-05);
+}
+
+.modal-trigger-demo-form__field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrl-spacing-02);
+}