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

package/dist/esm/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%;
-}

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

@@ -1,204 +0,0 @@
-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;
-};
-import * as React from 'react';
-import { setAttributes, getUniqueId } from '../../../utils';
-import { defaults, TransitionDuration } from '../constants';
-import { MrlIconButton, MrlFocusTrap, MrlSvg } from '../../';
-import { close } from '@muraldevkit/ds-icons';
-import classNames from 'classnames';
-import styles from './MrlModal.module.scss.js';
-import { PORTAL_LAYERS } from '../../../utils/layers';
-import './MrlModal.global.css';
-import { MrlModalContext } from '../MrlModalContext';
-/**
- * Modal Component.
- * @param props - Modal props
- * @returns an instance of the MrlModal
- */
-export const MrlModal = React.forwardRef(function MrlModal(props, ref) {
-    const { ariaLabel, children, className, closable = true, loading = false, size = 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(styles['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(styles['hide']);
-            }
-            hookClose && hookClose();
-        }, 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(styles['display']);
-        setFadeState(styles['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 = 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 = classNames('mrl-modal-container', 'mrl-modal-backdrop', className, styles['mrl-modal-backdrop'], fadeState, displayState);
-    const modalClasses = classNames('mrl-modal', styles['mrl-modal'], attrs.class || attrs.className, {
-        [`mrl-modal--${size}`]: size !== defaults.size
-    });
-    const closeClasses = classNames('mrl-modal-close', styles['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 = setAttributes(attrs, attrConfig);
-    return (React.createElement(MrlModalContext.Provider, { value: {
-            scrollableContent,
-            setScrollableContent,
-            setTitle,
-            title
-        } },
-        React.createElement(MrlFocusTrap, { disabled: loading, containerRef: modalContainer },
-            React.createElement("div", Object.assign({}, rest, { id: PORTAL_LAYERS.MODAL.name, ref: modalContainer }, attributes, { className: containerClasses }, (closable && { onMouseDown: handleDismiss }), (closable && { onKeyDown: handleKeyDismiss }), { role: "dialog", style: { zIndex: PORTAL_LAYERS.MODAL.zIndex } }),
-                React.createElement("div", { ref: modal, className: modalClasses },
-                    children,
-                    closable && (React.createElement(MrlIconButton, { wrapperClassName: closeClasses, icon: React.createElement(MrlSvg, { svg: close }), onClick: handleClose, text: "Close", state: "default", position: "bottom", tipAnchor: "center", ref: closeButton })))))));
-});