@muraldevkit/ui-toolkit 4.67.0 → 4.68.0-dev-5W5E.1

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

@@ -0,0 +1,315 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var constants = require('../constants.js');
+var dsIcons = require('@muraldevkit/ds-icons');
+var classnames = require('classnames');
+var MrlModal_module = require('./MrlModal.module.scss.js');
+var index = require('../../../utils/layers/index.js');
+var setAttributes = require('../../../utils/setAttributes/setAttributes.js');
+var MrlModalContext = require('../MrlModalContext/MrlModalContext.js');
+var MrlFocusTrap = require('../../focus-trap/MrlFocusTrap/MrlFocusTrap.js');
+var MrlIconButton = require('../../button/MrlIconButton/MrlIconButton.js');
+var MrlSvg = require('../../svg/MrlSvg/MrlSvg.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+	if (e && e.__esModule) return e;
+	var n = Object.create(null);
+	if (e) {
+		Object.keys(e).forEach(function (k) {
+			if (k !== 'default') {
+				var d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: function () { return e[k]; }
+				});
+			}
+		});
+	}
+	n.default = e;
+	return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+
+var _excluded = ["ariaLabel", "children", "className", "closable", "loading", "size", "state", "hookClose", "preventBackgroundScroll", "attrs"];
+/**
+ * Modal Component.
+ * @param props - Modal props
+ * @returns an instance of the MrlModal
+ */
+var MrlModal = /*#__PURE__*/React__namespace.forwardRef(function MrlModal(props, ref) {
+  var ariaLabel = props.ariaLabel,
+    children = props.children,
+    className = props.className,
+    _props$closable = props.closable,
+    closable = _props$closable === void 0 ? true : _props$closable,
+    _props$loading = props.loading,
+    loading = _props$loading === void 0 ? false : _props$loading,
+    _props$size = props.size,
+    size = _props$size === void 0 ? constants.defaults.size : _props$size,
+    _props$state = props.state,
+    state = _props$state === void 0 ? 'close' : _props$state,
+    _props$hookClose = props.hookClose,
+    hookClose = _props$hookClose === void 0 ? undefined : _props$hookClose,
+    _props$preventBackgro = props.preventBackgroundScroll,
+    preventBackgroundScroll = _props$preventBackgro === void 0 ? true : _props$preventBackgro,
+    _props$attrs = props.attrs,
+    attrs = _props$attrs === void 0 ? {} : _props$attrs,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
+  /**
+   * Reference to the modal container.
+   */
+  var modalContainer = React__namespace.useRef(null);
+
+  /**
+   * Reference to the modal
+   */
+  var modal = React__namespace.useRef(null);
+  React__namespace.useImperativeHandle(ref, () => {
+    return modalContainer.current;
+  });
+
+  /**
+   * Reference to the modal close button.
+   */
+  var closeButton = React__namespace.useRef(null);
+
+  /**
+   * Reference to the modal heading element.
+   */
+  var heading = React__namespace.useRef(null);
+
+  /**
+   * Open/Closed state of the modal
+   */
+  var _React$useState = React__namespace.useState(() => state),
+    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
+    modalState = _React$useState2[0],
+    setModalState = _React$useState2[1];
+
+  /**
+   * Sets the state of the modal for fading in and out opacity
+   */
+  var _React$useState3 = React__namespace.useState(''),
+    _React$useState4 = _rollupPluginBabelHelpers.slicedToArray(_React$useState3, 2),
+    fadeState = _React$useState4[0],
+    setFadeState = _React$useState4[1];
+
+  /**
+   * Sets state of the modal for when it is completely hidden from the DOM
+   */
+  var _React$useState5 = React__namespace.useState('hide'),
+    _React$useState6 = _rollupPluginBabelHelpers.slicedToArray(_React$useState5, 2),
+    displayState = _React$useState6[0],
+    setDisplayState = _React$useState6[1];
+
+  /**
+   * Sets aria-labelledby attribute on the modal for assistive technology
+   */
+  var _React$useState7 = React__namespace.useState(null),
+    _React$useState8 = _rollupPluginBabelHelpers.slicedToArray(_React$useState7, 2),
+    modalLabel = _React$useState8[0],
+    setModalLabel = _React$useState8[1];
+
+  /**
+   * Store the previous overflow value of the body before we set it to hidden
+   */
+  var _React$useState9 = React__namespace.useState(''),
+    _React$useState0 = _rollupPluginBabelHelpers.slicedToArray(_React$useState9, 2),
+    prevOverflow = _React$useState0[0],
+    setPrevOverflow = _React$useState0[1];
+
+  /**
+   *  Indicates if the content is scrollable, calculated in the MrlModalContent component
+   */
+  var _React$useState1 = React__namespace.useState({
+      hasScrollBottom: false,
+      hasScrollTop: false,
+      isContentScrollable: false
+    }),
+    _React$useState10 = _rollupPluginBabelHelpers.slicedToArray(_React$useState1, 2),
+    scrollableContent = _React$useState10[0],
+    setScrollableContent = _React$useState10[1];
+
+  /**
+   * Modal title for context
+   */
+  var _React$useState11 = React__namespace.useState(''),
+    _React$useState12 = _rollupPluginBabelHelpers.slicedToArray(_React$useState11, 2),
+    title = _React$useState12[0],
+    setTitle = _React$useState12[1];
+
+  /**
+   * Handles when the user clicks on the overlay to close the modal
+   * @param {React.KeyEvent} e - key event data
+   */
+  var 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
+   */
+  var handleDismiss = e => {
+    if (modalContainer.current !== e.target) return;
+    handleClose();
+  };
+
+  /**
+   * Handler logic for closing the modal
+   */
+  var handleClose = React__namespace.useCallback(() => {
+    setFadeState(MrlModal_module.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
+     */
+    var timeoutId = setTimeout(() => {
+      if (modal.current) {
+        setDisplayState(MrlModal_module.default['hide']);
+      }
+      hookClose && hookClose();
+    }, constants.TransitionDuration);
+    if (preventBackgroundScroll) document.body.style.overflow = prevOverflow;
+
+    // cleanup setTimeout
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [hookClose, prevOverflow, preventBackgroundScroll]);
+
+  /**
+   * Handler logic for opening the modal
+   */
+  var handleOpen = React__namespace.useCallback(() => {
+    setDisplayState(MrlModal_module.default['display']);
+    setFadeState(MrlModal_module.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__namespace.useEffect(() => {
+    if (modalState === 'open') {
+      handleOpen();
+    } else if (modalState === 'close') {
+      // setup reference so we can clean up the funciton
+      var cleanup = handleClose();
+
+      // cleanup handleClose
+      return cleanup;
+    }
+  }, [modalState, handleOpen, handleClose]);
+
+  /**
+   * Sets modal state when the state prop changes
+   */
+  React__namespace.useEffect(() => {
+    setModalState(state);
+  }, [state]);
+
+  /**
+   * ComponentDidLoad
+   */
+  React__namespace.useEffect(() => {
+    var 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) {
+          var id = heading.current.getAttribute('id');
+          if (!id) {
+            id = setAttributes.getUniqueId('mrl-modal');
+            heading.current.setAttribute('id', id);
+          }
+          setModalLabel(id);
+        }
+      }
+    }
+  }, []);
+
+  /**
+   * Cleanup overflow hidden when component unmounts
+   */
+  React__namespace.useEffect(() => {
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, []);
+  var containerClasses = classnames__default.default('mrl-modal-container', 'mrl-modal-backdrop', className, MrlModal_module.default['mrl-modal-backdrop'], fadeState, displayState);
+  var modalClasses = classnames__default.default('mrl-modal', MrlModal_module.default['mrl-modal'], attrs.class || attrs.className, {
+    ["mrl-modal--".concat(size)]: size !== constants.defaults.size
+  });
+  var closeClasses = classnames__default.default('mrl-modal-close', MrlModal_module.default['mrl-modal-close']);
+  var attrConfig = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
+    '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;
+  var attributes = setAttributes.setAttributes(attrs, attrConfig);
+  return /*#__PURE__*/React__namespace.createElement(MrlModalContext.MrlModalContext.Provider, {
+    value: {
+      scrollableContent,
+      setScrollableContent,
+      setTitle,
+      title
+    }
+  }, /*#__PURE__*/React__namespace.createElement(MrlFocusTrap.MrlFocusTrap, {
+    disabled: loading,
+    containerRef: modalContainer
+  }, /*#__PURE__*/React__namespace.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
+    id: index.PORTAL_LAYERS.MODAL.name,
+    ref: modalContainer
+  }, attributes, {
+    className: containerClasses
+  }, closable && {
+    onMouseDown: handleDismiss
+  }, closable && {
+    onKeyDown: handleKeyDismiss
+  }, {
+    role: "dialog",
+    style: {
+      zIndex: index.PORTAL_LAYERS.MODAL.zIndex
+    }
+  }), /*#__PURE__*/React__namespace.createElement("div", {
+    ref: modal,
+    className: modalClasses
+  }, children, closable && /*#__PURE__*/React__namespace.createElement(MrlIconButton.MrlIconButton, {
+    wrapperClassName: closeClasses,
+    icon: /*#__PURE__*/React__namespace.createElement(MrlSvg.MrlSvg, {
+      svg: dsIcons.close
+    }),
+    onClick: handleClose,
+    text: "Close",
+    state: "default",
+    position: "bottom",
+    tipAnchor: "center",
+    ref: closeButton
+  })))));
+});
+
+exports.MrlModal = MrlModal;
+//# sourceMappingURL=MrlModal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MrlModal.js","sources":["../../../../../src/components/modal/MrlModal/MrlModal.tsx"],"sourcesContent":["import * as React from 'react';\nimport { MrlComponentProps, setAttributes, getUniqueId } from '../../../utils';\nimport { defaults, ModalSize, ModalState, TransitionDuration } from '../constants';\nimport { MrlIconButton, MrlFocusTrap, MrlSvg } from '../../';\nimport { close } from '@muraldevkit/ds-icons';\nimport classNames from 'classnames';\nimport styles from './MrlModal.module.scss';\nimport { PORTAL_LAYERS } from '../../../utils/layers';\nimport './MrlModal.global.scss';\nimport { MrlModalContext } from '../MrlModalContext';\n\ninterface ModalProps extends MrlComponentProps {\n\t/**\n\t * Aria label for the modal\n\t */\n\tariaLabel?: string;\n\n\t/**\n\t * Content of the modal\n\t */\n\tchildren: React.ReactElement | React.ReactElement[];\n\n\t/**\n\t * Modal Wrapper Class\n\t */\n\tclassName?: string;\n\n\t/**\n\t * !!!!! WARNING: do not use this prop without an explicit requirement from the design team !!!!!\n\t *\n\t * Enables/disables the ability to close the modal. This prop does the following:\n\t * - removes close button\n\t * - disables clicking on the overlay to close the modal\n\t * - disables the escape key to close the modal\n\t */\n\tclosable?: boolean;\n\n\t/**\n\t * Tells the modal whether we are in a loading state.\n\t * This is used to disabled FocusTrap until the contents of the modal are loaded\n\t */\n\tloading?: boolean;\n\n\t/**\n\t * Prevents the background from scrolling when the modal is open\n\t */\n\tpreventBackgroundScroll?: boolean;\n\n\t/** The size of the modal container */\n\tsize?: ModalSize;\n\n\t/** Current state of the modal based on user interactions or permissions */\n\tstate?: ModalState;\n\n\t/** Additional function to be run when the modal closes */\n\thookClose?: (() => void) | undefined;\n}\n\n/**\n * Modal Component.\n * @param props - Modal props\n * @returns an instance of the MrlModal\n */\nexport const MrlModal = React.forwardRef<HTMLDivElement, ModalProps>(\n\tfunction MrlModal(props, ref): JSX.Element {\n\t\tconst {\n\t\t\tariaLabel,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tclosable = true,\n\t\t\tloading = false,\n\t\t\tsize = defaults.size,\n\t\t\tstate = 'close',\n\t\t\thookClose = undefined,\n\t\t\tpreventBackgroundScroll = true,\n\t\t\tattrs = {},\n\t\t\t...rest\n\t\t} = props;\n\t\t/**\n\t\t * Reference to the modal container.\n\t\t */\n\t\tconst modalContainer = React.useRef<HTMLDivElement>(null);\n\n\t\t/**\n\t\t * Reference to the modal\n\t\t */\n\t\tconst modal = React.useRef<HTMLDivElement>(null);\n\n\t\tReact.useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(ref, () => {\n\t\t\treturn modalContainer.current;\n\t\t});\n\n\t\t/**\n\t\t * Reference to the modal close button.\n\t\t */\n\t\tconst closeButton = React.useRef<HTMLButtonElement | null>(null);\n\n\t\t/**\n\t\t * Reference to the modal heading element.\n\t\t */\n\t\tconst heading = React.useRef<HTMLHeadingElement | null>(null);\n\n\t\t/**\n\t\t * Open/Closed state of the modal\n\t\t */\n\t\tconst [modalState, setModalState] = React.useState(() => state);\n\n\t\t/**\n\t\t * Sets the state of the modal for fading in and out opacity\n\t\t */\n\t\tconst [fadeState, setFadeState] = React.useState('');\n\n\t\t/**\n\t\t * Sets state of the modal for when it is completely hidden from the DOM\n\t\t */\n\t\tconst [displayState, setDisplayState] = React.useState('hide');\n\n\t\t/**\n\t\t * Sets aria-labelledby attribute on the modal for assistive technology\n\t\t */\n\t\tconst [modalLabel, setModalLabel] = React.useState<string | null>(null);\n\n\t\t/**\n\t\t * Store the previous overflow value of the body before we set it to hidden\n\t\t */\n\t\tconst [prevOverflow, setPrevOverflow] = React.useState('');\n\n\t\t/**\n\t\t *  Indicates if the content is scrollable, calculated in the MrlModalContent component\n\t\t */\n\t\tconst [scrollableContent, setScrollableContent] = React.useState({\n\t\t\thasScrollBottom: false,\n\t\t\thasScrollTop: false,\n\t\t\tisContentScrollable: false\n\t\t});\n\n\t\t/**\n\t\t * Modal title for context\n\t\t */\n\t\tconst [title, setTitle] = React.useState('');\n\n\t\t/**\n\t\t * Handles when the user clicks on the overlay to close the modal\n\t\t * @param {React.KeyEvent} e - key event data\n\t\t */\n\t\tconst handleKeyDismiss = (e: React.KeyboardEvent): void => {\n\t\t\tif (e.key === 'Escape') setModalState('close');\n\t\t};\n\n\t\t/**\n\t\t * Handles when the user clicks on the overlay to close the modal\n\t\t * @param {MouseEvent} e - mouse event data\n\t\t */\n\t\tconst handleDismiss = (e: React.MouseEvent): void => {\n\t\t\tif (modalContainer.current !== e.target) return;\n\n\t\t\thandleClose();\n\t\t};\n\n\t\t/**\n\t\t * Handler logic for closing the modal\n\t\t */\n\t\tconst handleClose = React.useCallback(() => {\n\t\t\tsetFadeState(styles['fade-out']);\n\n\t\t\t/**\n\t\t\t * Set timeout to allow for fade out animation to complete\n\t\t\t * before we hide the modal from the DOM and call the close hook\n\t\t\t */\n\t\t\tconst timeoutId = setTimeout(() => {\n\t\t\t\tif (modal.current) {\n\t\t\t\t\tsetDisplayState(styles['hide']);\n\t\t\t\t}\n\t\t\t\thookClose && hookClose();\n\t\t\t}, TransitionDuration);\n\n\t\t\tif (preventBackgroundScroll) document.body.style.overflow = prevOverflow;\n\n\t\t\t// cleanup setTimeout\n\t\t\treturn () => {\n\t\t\t\tclearTimeout(timeoutId);\n\t\t\t};\n\t\t}, [hookClose, prevOverflow, preventBackgroundScroll]);\n\n\t\t/**\n\t\t * Handler logic for opening the modal\n\t\t */\n\t\tconst handleOpen = React.useCallback(() => {\n\t\t\tsetDisplayState(styles['display']);\n\t\t\tsetFadeState(styles['fade-in']);\n\n\t\t\tif (preventBackgroundScroll) {\n\t\t\t\tsetPrevOverflow(document.body.style.overflow);\n\t\t\t\tdocument.body.style.overflow = 'hidden';\n\t\t\t}\n\t\t}, [preventBackgroundScroll]);\n\n\t\t/**\n\t\t * Sets the open/close state of the UI\n\t\t */\n\t\tReact.useEffect(() => {\n\t\t\tif (modalState === 'open') {\n\t\t\t\thandleOpen();\n\t\t\t} else if (modalState === 'close') {\n\t\t\t\t// setup reference so we can clean up the funciton\n\t\t\t\tconst cleanup = handleClose();\n\n\t\t\t\t// cleanup handleClose\n\t\t\t\treturn cleanup;\n\t\t\t}\n\t\t}, [modalState, handleOpen, handleClose]);\n\n\t\t/**\n\t\t * Sets modal state when the state prop changes\n\t\t */\n\t\tReact.useEffect(() => {\n\t\t\tsetModalState(state);\n\t\t}, [state]);\n\n\t\t/**\n\t\t * ComponentDidLoad\n\t\t */\n\t\tReact.useEffect(() => {\n\t\t\tconst el = modalContainer.current;\n\n\t\t\tif (el) {\n\t\t\t\t/**\n\t\t\t\t * Setting up aria-labelledby association for assitive technology users\n\t\t\t\t */\n\t\t\t\tif (el.getAttribute('aria-labelledby') === null) {\n\t\t\t\t\theading.current = el.querySelector('.mrl-modal-text-heading');\n\n\t\t\t\t\tif (heading.current) {\n\t\t\t\t\t\tlet id = heading.current.getAttribute('id');\n\t\t\t\t\t\tif (!id) {\n\t\t\t\t\t\t\tid = getUniqueId('mrl-modal');\n\t\t\t\t\t\t\theading.current.setAttribute('id', id);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tsetModalLabel(id);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}, []);\n\n\t\t/**\n\t\t * Cleanup overflow hidden when component unmounts\n\t\t */\n\t\tReact.useEffect(() => {\n\t\t\treturn () => {\n\t\t\t\tdocument.body.style.overflow = '';\n\t\t\t};\n\t\t}, []);\n\t\tconst containerClasses = classNames(\n\t\t\t'mrl-modal-container',\n\t\t\t'mrl-modal-backdrop',\n\t\t\tclassName,\n\t\t\tstyles['mrl-modal-backdrop'],\n\t\t\tfadeState,\n\t\t\tdisplayState\n\t\t);\n\n\t\tconst modalClasses = classNames(\n\t\t\t'mrl-modal',\n\t\t\tstyles['mrl-modal'],\n\t\t\tattrs.class || attrs.className,\n\t\t\t{\n\t\t\t\t[`mrl-modal--${size}`]: size !== defaults.size\n\t\t\t}\n\t\t);\n\n\t\tconst closeClasses = classNames('mrl-modal-close', styles['mrl-modal-close']);\n\n\t\tconst attrConfig = {\n\t\t\t'aria-hidden': (modalState === 'close').toString(),\n\t\t\t...(ariaLabel\n\t\t\t\t? { 'aria-label': ariaLabel }\n\t\t\t\t: modalLabel !== null\n\t\t\t\t\t? { 'aria-labelledby': modalLabel }\n\t\t\t\t\t: { 'aria-label': 'Modal' }),\n\t\t\t'aria-modal': 'true',\n\t\t\trole: 'dialog'\n\t\t};\n\n\t\tdelete attrs.class;\n\t\tdelete attrs.className;\n\n\t\tconst attributes = setAttributes(attrs, attrConfig);\n\n\t\treturn (\n\t\t\t<MrlModalContext.Provider\n\t\t\t\tvalue={{\n\t\t\t\t\tscrollableContent,\n\t\t\t\t\tsetScrollableContent,\n\t\t\t\t\tsetTitle,\n\t\t\t\t\ttitle\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<MrlFocusTrap disabled={loading} containerRef={modalContainer}>\n\t\t\t\t\t{/*eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions*/}\n\t\t\t\t\t<div\n\t\t\t\t\t\t{...rest}\n\t\t\t\t\t\tid={PORTAL_LAYERS.MODAL.name}\n\t\t\t\t\t\tref={modalContainer}\n\t\t\t\t\t\t{...attributes}\n\t\t\t\t\t\tclassName={containerClasses}\n\t\t\t\t\t\t{...(closable && { onMouseDown: handleDismiss })}\n\t\t\t\t\t\t{...(closable && { onKeyDown: handleKeyDismiss })}\n\t\t\t\t\t\trole=\"dialog\"\n\t\t\t\t\t\tstyle={{ zIndex: PORTAL_LAYERS.MODAL.zIndex }}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div ref={modal} className={modalClasses}>\n\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t\t{closable && (\n\t\t\t\t\t\t\t\t<MrlIconButton\n\t\t\t\t\t\t\t\t\twrapperClassName={closeClasses}\n\t\t\t\t\t\t\t\t\ticon={<MrlSvg svg={close} />}\n\t\t\t\t\t\t\t\t\tonClick={handleClose}\n\t\t\t\t\t\t\t\t\ttext=\"Close\"\n\t\t\t\t\t\t\t\t\tstate=\"default\"\n\t\t\t\t\t\t\t\t\tposition=\"bottom\"\n\t\t\t\t\t\t\t\t\ttipAnchor=\"center\"\n\t\t\t\t\t\t\t\t\tref={closeButton}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</MrlFocusTrap>\n\t\t\t</MrlModalContext.Provider>\n\t\t);\n\t}\n);\n"],"names":["MrlModal","React","forwardRef","props","ref","ariaLabel","children","className","_props$closable","closable","_props$loading","loading","_props$size","size","defaults","_props$state","state","_props$hookClose","hookClose","undefined","_props$preventBackgro","preventBackgroundScroll","_props$attrs","attrs","rest","_objectWithoutProperties","_excluded","modalContainer","useRef","modal","useImperativeHandle","current","closeButton","heading","_React$useState","useState","_React$useState2","_slicedToArray","modalState","setModalState","_React$useState3","_React$useState4","fadeState","setFadeState","_React$useState5","_React$useState6","displayState","setDisplayState","_React$useState7","_React$useState8","modalLabel","setModalLabel","_React$useState9","_React$useState0","prevOverflow","setPrevOverflow","_React$useState1","hasScrollBottom","hasScrollTop","isContentScrollable","_React$useState10","scrollableContent","setScrollableContent","_React$useState11","_React$useState12","title","setTitle","handleKeyDismiss","e","key","handleDismiss","target","handleClose","useCallback","styles","timeoutId","setTimeout","TransitionDuration","document","body","style","overflow","clearTimeout","handleOpen","useEffect","cleanup","el","getAttribute","querySelector","id","getUniqueId","setAttribute","containerClasses","classNames","modalClasses","class","concat","closeClasses","attrConfig","_objectSpread","toString","role","attributes","setAttributes","createElement","MrlModalContext","Provider","value","MrlFocusTrap","disabled","containerRef","_extends","PORTAL_LAYERS","MODAL","name","onMouseDown","onKeyDown","zIndex","MrlIconButton","wrapperClassName","icon","MrlSvg","svg","close","onClick","text","position","tipAnchor"],"mappings":"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"}

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

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"mrl-modal":"mrl-modal--zpjbp","mrl-modal-backdrop":"mrl-modal-backdrop--omXDu","fade-in":"fade-in--FQdjA","fade-out":"fade-out--c_sPn","display":"display--GKMDd","hide":"hide--DHOpR","mrl-modal-close":"mrl-modal-close--amYN3"};
+
+exports.default = styles;
+//# sourceMappingURL=MrlModal.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MrlModal.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

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

@@ -0,0 +1,96 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var classnames = require('classnames');
+var index$1 = require('../../../utils/isElementScrollable/index.js');
+var MrlModalContent_module = require('./MrlModalContent.module.scss.js');
+var hasScrollContent = require('../../../utils/hasScrollContent/hasScrollContent.js');
+var index = require('../../../hooks/useHasFocusableDescendant/index.js');
+var MrlModalContext = require('../MrlModalContext/MrlModalContext.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+	if (e && e.__esModule) return e;
+	var n = Object.create(null);
+	if (e) {
+		Object.keys(e).forEach(function (k) {
+			if (k !== 'default') {
+				var d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: function () { return e[k]; }
+				});
+			}
+		});
+	}
+	n.default = e;
+	return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+
+var _excluded = ["children", "className"];
+/**
+ * Modal Content component for the MrlModal
+ * @param {object} props - The props object
+ * @param {React.ReactElement} props.children - The children to be rendered within the component
+ * @returns {React.ReactElement}} The rendered MrlModalContent component
+ */
+var MrlModalContent = _ref => {
+  var children = _ref.children,
+    className = _ref.className,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var _useMrlModalContext = MrlModalContext.useMrlModalContext(),
+    scrollableContent = _useMrlModalContext.scrollableContent,
+    setScrollableContent = _useMrlModalContext.setScrollableContent,
+    title = _useMrlModalContext.title;
+  var contentAreaRef = React__namespace.useRef(null);
+  var hasFocusableDescendant = index.useHasFocusableDescendant(contentAreaRef);
+  React__namespace.useEffect(() => {
+    if (!contentAreaRef.current) return;
+
+    /**
+     * Sets up observer to toggle tabindex value on the scrollable region within the modal. When
+     * the content area is overflowed and has no focusable descendants, we want to set tabindex
+     * to 0 so that keyboard-only users can scroll through the content. Per ACT rule 0ssw9k a
+     * scrollable region passes WCAG 2.1.1 Keyboard either by being focusable itself or by having
+     * a focusable descendant, so we omit `tabindex="0"` whenever a descendant control is
+     * already keyboard reachable. The labeled `role="region"` is preserved whenever the modal
+     * content overflows so screen-reader users get a landmark in either case.
+     * https://www.w3.org/WAI/standards-guidelines/act/rules/0ssw9k/
+     */
+    var contentArea = contentAreaRef.current;
+    contentArea.addEventListener('scroll', () => {
+      setScrollableContent(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, hasScrollContent.hasScrollContent(contentArea)), {}, {
+        isContentScrollable: index$1.isElementScrollable(contentArea)
+      }));
+    });
+    var observer = new ResizeObserver(() => {
+      setScrollableContent(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, hasScrollContent.hasScrollContent(contentArea)), {}, {
+        isContentScrollable: index$1.isElementScrollable(contentArea)
+      }));
+    });
+    observer.observe(contentArea);
+    return () => {
+      observer.disconnect();
+    };
+  }, [setScrollableContent]);
+  var contentClasses = classnames__default.default('mrl-modal-content', className, MrlModalContent_module.default['mrl-modal-content'], {
+    'mrl-modal-content-scrollable': scrollableContent.isContentScrollable
+  });
+  return /*#__PURE__*/React__namespace.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
+    ref: contentAreaRef,
+    className: contentClasses
+  }, scrollableContent.isContentScrollable && _rollupPluginBabelHelpers.objectSpread2({
+    'aria-label': title ? "".concat(title, " modal scrollable content") : 'modal scrollable content',
+    role: 'region'
+  }, !hasFocusableDescendant && {
+    tabIndex: 0
+  })), children);
+};
+
+exports.MrlModalContent = MrlModalContent;
+//# sourceMappingURL=MrlModalContent.js.map

package/dist/cjs/components/modal/MrlModalContent/MrlModalContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MrlModalContent.js","sources":["../../../../../src/components/modal/MrlModalContent/MrlModalContent.tsx"],"sourcesContent":["import * as React from 'react';\nimport classNames from 'classnames';\nimport { isElementScrollable } from '../../../utils/isElementScrollable';\n\nimport styles from './MrlModalContent.module.scss';\nimport { useMrlModalContext } from '../MrlModalContext';\nimport { hasScrollContent } from '../../../utils/hasScrollContent/hasScrollContent';\nimport { useHasFocusableDescendant } from '../../../hooks/useHasFocusableDescendant';\n\ninterface MrlModalContentProps {\n\t/**\n\t * Children to be rendered within the component.\n\t */\n\tchildren: React.ReactElement | React.ReactElement[];\n\n\t/**\n\t * Wrapper Class\n\t */\n\tclassName?: string;\n}\n\n/**\n * Modal Content component for the MrlModal\n * @param {object} props - The props object\n * @param {React.ReactElement} props.children - The children to be rendered within the component\n * @returns {React.ReactElement}} The rendered MrlModalContent component\n */\nexport const MrlModalContent = ({\n\tchildren,\n\tclassName,\n\t...rest\n}: MrlModalContentProps): JSX.Element => {\n\tconst { scrollableContent, setScrollableContent, title } = useMrlModalContext();\n\tconst contentAreaRef = React.useRef<HTMLDivElement>(null);\n\tconst hasFocusableDescendant = useHasFocusableDescendant(contentAreaRef);\n\n\tReact.useEffect(() => {\n\t\tif (!contentAreaRef.current) return;\n\n\t\t/**\n\t\t * Sets up observer to toggle tabindex value on the scrollable region within the modal. When\n\t\t * the content area is overflowed and has no focusable descendants, we want to set tabindex\n\t\t * to 0 so that keyboard-only users can scroll through the content. Per ACT rule 0ssw9k a\n\t\t * scrollable region passes WCAG 2.1.1 Keyboard either by being focusable itself or by having\n\t\t * a focusable descendant, so we omit `tabindex=\"0\"` whenever a descendant control is\n\t\t * already keyboard reachable. The labeled `role=\"region\"` is preserved whenever the modal\n\t\t * content overflows so screen-reader users get a landmark in either case.\n\t\t * https://www.w3.org/WAI/standards-guidelines/act/rules/0ssw9k/\n\t\t */\n\t\tconst contentArea = contentAreaRef.current;\n\n\t\tcontentArea.addEventListener('scroll', () => {\n\t\t\tsetScrollableContent({\n\t\t\t\t...hasScrollContent(contentArea),\n\t\t\t\tisContentScrollable: isElementScrollable(contentArea)\n\t\t\t});\n\t\t});\n\n\t\tconst observer = new ResizeObserver(() => {\n\t\t\tsetScrollableContent({\n\t\t\t\t...hasScrollContent(contentArea),\n\t\t\t\tisContentScrollable: isElementScrollable(contentArea)\n\t\t\t});\n\t\t});\n\n\t\tobserver.observe(contentArea);\n\n\t\treturn () => {\n\t\t\tobserver.disconnect();\n\t\t};\n\t}, [setScrollableContent]);\n\n\tconst contentClasses = classNames('mrl-modal-content', className, styles['mrl-modal-content'], {\n\t\t'mrl-modal-content-scrollable': scrollableContent.isContentScrollable\n\t});\n\n\treturn (\n\t\t<div\n\t\t\t{...rest}\n\t\t\tref={contentAreaRef}\n\t\t\tclassName={contentClasses}\n\t\t\t{...(scrollableContent.isContentScrollable && {\n\t\t\t\t'aria-label': title ? `${title} modal scrollable content` : 'modal scrollable content',\n\t\t\t\trole: 'region',\n\t\t\t\t...(!hasFocusableDescendant && { tabIndex: 0 })\n\t\t\t})}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n};\n"],"names":["MrlModalContent","_ref","children","className","rest","_objectWithoutProperties","_excluded","_useMrlModalContext","useMrlModalContext","scrollableContent","setScrollableContent","title","contentAreaRef","React","useRef","hasFocusableDescendant","useHasFocusableDescendant","useEffect","current","contentArea","addEventListener","_objectSpread","hasScrollContent","isContentScrollable","isElementScrollable","observer","ResizeObserver","observe","disconnect","contentClasses","classNames","styles","createElement","_extends","ref","concat","role","tabIndex"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,eAAe,GAAGC,IAAA,IAIU;AAAA,EAAA,IAHxCC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,SAAS,GAAAF,IAAA,CAATE,SAAS;AACNC,IAAAA,IAAI,GAAAC,iDAAA,CAAAJ,IAAA,EAAAK,SAAA,CAAA;AAEP,EAAA,IAAAC,mBAAA,GAA2DC,kCAAkB,EAAE;IAAvEC,iBAAiB,GAAAF,mBAAA,CAAjBE,iBAAiB;IAAEC,oBAAoB,GAAAH,mBAAA,CAApBG,oBAAoB;IAAEC,KAAK,GAAAJ,mBAAA,CAALI,KAAK;AACtD,EAAA,IAAMC,cAAc,GAAGC,gBAAK,CAACC,MAAM,CAAiB,IAAI,CAAC;AACzD,EAAA,IAAMC,sBAAsB,GAAGC,+BAAyB,CAACJ,cAAc,CAAC;EAExEC,gBAAK,CAACI,SAAS,CAAC,MAAM;AACrB,IAAA,IAAI,CAACL,cAAc,CAACM,OAAO,EAAE;;AAE7B;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACE,IAAA,IAAMC,WAAW,GAAGP,cAAc,CAACM,OAAO;AAE1CC,IAAAA,WAAW,CAACC,gBAAgB,CAAC,QAAQ,EAAE,MAAM;MAC5CV,oBAAoB,CAAAW,uCAAA,CAAAA,uCAAA,KAChBC,iCAAgB,CAACH,WAAW,CAAC,CAAA,EAAA,EAAA,EAAA;QAChCI,mBAAmB,EAAEC,2BAAmB,CAACL,WAAW;AAAC,OAAA,CACrD,CAAC;AACH,IAAA,CAAC,CAAC;AAEF,IAAA,IAAMM,QAAQ,GAAG,IAAIC,cAAc,CAAC,MAAM;MACzChB,oBAAoB,CAAAW,uCAAA,CAAAA,uCAAA,KAChBC,iCAAgB,CAACH,WAAW,CAAC,CAAA,EAAA,EAAA,EAAA;QAChCI,mBAAmB,EAAEC,2BAAmB,CAACL,WAAW;AAAC,OAAA,CACrD,CAAC;AACH,IAAA,CAAC,CAAC;AAEFM,IAAAA,QAAQ,CAACE,OAAO,CAACR,WAAW,CAAC;AAE7B,IAAA,OAAO,MAAM;MACZM,QAAQ,CAACG,UAAU,EAAE;IACtB,CAAC;AACF,EAAA,CAAC,EAAE,CAAClB,oBAAoB,CAAC,CAAC;AAE1B,EAAA,IAAMmB,cAAc,GAAGC,2BAAU,CAAC,mBAAmB,EAAE3B,SAAS,EAAE4B,8BAAM,CAAC,mBAAmB,CAAC,EAAE;IAC9F,8BAA8B,EAAEtB,iBAAiB,CAACc;AACnD,GAAC,CAAC;AAEF,EAAA,oBACCV,gBAAA,CAAAmB,aAAA,CAAA,KAAA,EAAAC,iCAAA,KACK7B,IAAI,EAAA;AACR8B,IAAAA,GAAG,EAAEtB,cAAe;AACpBT,IAAAA,SAAS,EAAE0B;AAAe,GAAA,EACrBpB,iBAAiB,CAACc,mBAAmB,IAAAF,uCAAA,CAAA;AACzC,IAAA,YAAY,EAAEV,KAAK,GAAA,EAAA,CAAAwB,MAAA,CAAMxB,KAAK,iCAA8B,0BAA0B;AACtFyB,IAAAA,IAAI,EAAE;GAAQ,EACV,CAACrB,sBAAsB,IAAI;AAAEsB,IAAAA,QAAQ,EAAE;GAAG,CAC9C,CAAA,EAEAnC,QACG,CAAC;AAER;;;;"}

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

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"mrl-modal-content":"mrl-modal-content--khend"};
+
+exports.default = styles;
+//# sourceMappingURL=MrlModalContent.module.scss.js.map

package/dist/cjs/components/modal/MrlModalContent/MrlModalContent.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MrlModalContent.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

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

@@ -0,0 +1,42 @@
+'use strict';
+
+var React = require('react');
+
+function _interopNamespace(e) {
+	if (e && e.__esModule) return e;
+	var n = Object.create(null);
+	if (e) {
+		Object.keys(e).forEach(function (k) {
+			if (k !== 'default') {
+				var d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: function () { return e[k]; }
+				});
+			}
+		});
+	}
+	n.default = e;
+	return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var MrlModalContext = /*#__PURE__*/React__namespace.createContext(undefined);
+
+/**
+ * Returns the MrlModalContext state.
+ *
+ * @returns The MrlModalContext state.
+ */
+var useMrlModalContext = () => {
+  var context = React__namespace.useContext(MrlModalContext);
+  if (!context) {
+    throw new Error('MrlModalContext must be used within a MrlModalContextProvider');
+  }
+  return context;
+};
+
+exports.MrlModalContext = MrlModalContext;
+exports.useMrlModalContext = useMrlModalContext;
+//# sourceMappingURL=MrlModalContext.js.map

package/dist/cjs/components/modal/MrlModalContext/MrlModalContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MrlModalContext.js","sources":["../../../../../src/components/modal/MrlModalContext/MrlModalContext.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport type MrlModalScrollableContent = {\n\tisContentScrollable: boolean;\n\thasScrollTop: boolean;\n\thasScrollBottom: boolean;\n};\n\nexport type MrlModalContextState = {\n\tscrollableContent: MrlModalScrollableContent;\n\tsetScrollableContent: React.Dispatch<React.SetStateAction<MrlModalScrollableContent>>;\n\ttitle: string;\n\tsetTitle: React.Dispatch<React.SetStateAction<string>>;\n};\n\nexport const MrlModalContext = React.createContext<MrlModalContextState | undefined>(undefined);\n\n/**\n * Returns the MrlModalContext state.\n *\n * @returns The MrlModalContext state.\n */\nexport const useMrlModalContext = (): MrlModalContextState => {\n\tconst context = React.useContext(MrlModalContext);\n\tif (!context) {\n\t\tthrow new Error('MrlModalContext must be used within a MrlModalContextProvider');\n\t}\n\treturn context;\n};\n"],"names":["MrlModalContext","React","createContext","undefined","useMrlModalContext","context","useContext","Error"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAeO,IAAMA,eAAe,gBAAGC,gBAAK,CAACC,aAAa,CAAmCC,SAAS;;AAE9F;AACA;AACA;AACA;AACA;AACO,IAAMC,kBAAkB,GAAGA,MAA4B;AAC7D,EAAA,IAAMC,OAAO,GAAGJ,gBAAK,CAACK,UAAU,CAACN,eAAe,CAAC;EACjD,IAAI,CAACK,OAAO,EAAE;AACb,IAAA,MAAM,IAAIE,KAAK,CAAC,+DAA+D,CAAC;AACjF,EAAA;AACA,EAAA,OAAOF,OAAO;AACf;;;;;"}

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

@@ -0,0 +1,64 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var classnames = require('classnames');
+var MrlModalFooter_module = require('./MrlModalFooter.module.scss.js');
+var index = require('../../../hooks/useBreakpoint/index.js');
+var MrlModalContext = require('../MrlModalContext/MrlModalContext.js');
+var setAttributes = require('../../../utils/setAttributes/setAttributes.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+	if (e && e.__esModule) return e;
+	var n = Object.create(null);
+	if (e) {
+		Object.keys(e).forEach(function (k) {
+			if (k !== 'default') {
+				var d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: function () { return e[k]; }
+				});
+			}
+		});
+	}
+	n.default = e;
+	return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+
+var _excluded = ["attrs", "children", "className"];
+/**
+ * Modal Footer component for the MrlModal
+ * @param {AttrsObject} attrs - Additional HTML attributes for the `mrl-modal` element
+ * @returns {React.ReactElement} The rendered MrlModalFooter component
+ */
+var MrlModalFooter = _ref => {
+  var _ref$attrs = _ref.attrs,
+    attrs = _ref$attrs === void 0 ? {} : _ref$attrs,
+    children = _ref.children,
+    className = _ref.className,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var _useMrlModalContext = MrlModalContext.useMrlModalContext(),
+    scrollableContent = _useMrlModalContext.scrollableContent;
+  var breakpoint = index.useBreakpoint();
+  var attributes = setAttributes.setAttributes(attrs);
+  var modalFooterClasses = classnames__default.default(className, 'mrl-modal-footer', MrlModalFooter_module.default['mrl-modal-footer'], {
+    [MrlModalFooter_module.default['slotted']]: breakpoint === 'xs',
+    [MrlModalFooter_module.default['mrl-modal-scroll-shadow-bottom']]: scrollableContent.hasScrollBottom
+  });
+  delete attributes.class;
+  delete attributes.className;
+  return /*#__PURE__*/React__namespace.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, attributes, {
+    className: modalFooterClasses
+  }), /*#__PURE__*/React__namespace.createElement("div", {
+    className: classnames__default.default('mrl-modal-footer-wrapper', MrlModalFooter_module.default['mrl-modal-footer-wrapper'])
+  }, children));
+};
+
+exports.MrlModalFooter = MrlModalFooter;
+//# sourceMappingURL=MrlModalFooter.js.map

package/dist/cjs/components/modal/MrlModalFooter/MrlModalFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MrlModalFooter.js","sources":["../../../../../src/components/modal/MrlModalFooter/MrlModalFooter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { AttrsObject, MrlComponentProps, setAttributes } from '../../../utils';\nimport classNames from 'classnames';\n\nimport styles from './MrlModalFooter.module.scss';\nimport './MrlModalFooter.global.scss';\nimport { useBreakpoint } from '../../../hooks/useBreakpoint';\nimport { useMrlModalContext } from '../MrlModalContext';\n\ninterface MrlModalFooterProps extends MrlComponentProps {\n\t/**\n\t * Content of the modal footer\n\t */\n\tchildren?: React.ReactElement | React.ReactElement[];\n\n\t/**\n\t * Wrapper Class\n\t */\n\tclassName?: string;\n}\n\n/**\n * Modal Footer component for the MrlModal\n * @param {AttrsObject} attrs - Additional HTML attributes for the `mrl-modal` element\n * @returns {React.ReactElement} The rendered MrlModalFooter component\n */\nexport const MrlModalFooter = ({\n\tattrs = {},\n\tchildren,\n\tclassName,\n\t...rest\n}: MrlModalFooterProps): JSX.Element => {\n\tconst { scrollableContent } = useMrlModalContext();\n\tconst breakpoint = useBreakpoint();\n\tconst attributes = setAttributes(attrs);\n\tconst modalFooterClasses = classNames(className, 'mrl-modal-footer', styles['mrl-modal-footer'], {\n\t\t[styles['slotted']]: breakpoint === 'xs',\n\t\t[styles['mrl-modal-scroll-shadow-bottom']]: scrollableContent.hasScrollBottom\n\t});\n\n\tdelete attributes.class;\n\tdelete attributes.className;\n\n\treturn (\n\t\t<div {...rest} {...attributes} className={modalFooterClasses}>\n\t\t\t<div className={classNames('mrl-modal-footer-wrapper', styles['mrl-modal-footer-wrapper'])}>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n"],"names":["MrlModalFooter","_ref","_ref$attrs","attrs","children","className","rest","_objectWithoutProperties","_excluded","_useMrlModalContext","useMrlModalContext","scrollableContent","breakpoint","useBreakpoint","attributes","setAttributes","modalFooterClasses","classNames","styles","hasScrollBottom","class","React","createElement","_extends"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA;AACA;AACA;AACA;AACA;AACO,IAAMA,cAAc,GAAGC,IAAA,IAKU;AAAA,EAAA,IAAAC,UAAA,GAAAD,IAAA,CAJvCE,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAA,MAAA,GAAG,EAAE,GAAAA,UAAA;IACVE,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,SAAS,GAAAJ,IAAA,CAATI,SAAS;AACNC,IAAAA,IAAI,GAAAC,iDAAA,CAAAN,IAAA,EAAAO,SAAA,CAAA;AAEP,EAAA,IAAAC,mBAAA,GAA8BC,kCAAkB,EAAE;IAA1CC,iBAAiB,GAAAF,mBAAA,CAAjBE,iBAAiB;AACzB,EAAA,IAAMC,UAAU,GAAGC,mBAAa,EAAE;AAClC,EAAA,IAAMC,UAAU,GAAGC,2BAAa,CAACZ,KAAK,CAAC;AACvC,EAAA,IAAMa,kBAAkB,GAAGC,2BAAU,CAACZ,SAAS,EAAE,kBAAkB,EAAEa,6BAAM,CAAC,kBAAkB,CAAC,EAAE;AAChG,IAAA,CAACA,6BAAM,CAAC,SAAS,CAAC,GAAGN,UAAU,KAAK,IAAI;AACxC,IAAA,CAACM,6BAAM,CAAC,gCAAgC,CAAC,GAAGP,iBAAiB,CAACQ;AAC/D,GAAC,CAAC;EAEF,OAAOL,UAAU,CAACM,KAAK;EACvB,OAAON,UAAU,CAACT,SAAS;EAE3B,oBACCgB,gBAAA,CAAAC,aAAA,CAAA,KAAA,EAAAC,iCAAA,CAAA,EAAA,EAASjB,IAAI,EAAMQ,UAAU,EAAA;AAAET,IAAAA,SAAS,EAAEW;GAAmB,CAAA,eAC5DK,gBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKjB,SAAS,EAAEY,2BAAU,CAAC,0BAA0B,EAAEC,6BAAM,CAAC,0BAA0B,CAAC;GAAE,EACzFd,QACG,CACD,CAAC;AAER;;;;"}

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

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"slotted":"slotted--k3mz9","mrl-modal-footer":"mrl-modal-footer--YG1gr","mrl-modal-footer-wrapper":"mrl-modal-footer-wrapper--NkwuH","mrl-modal-scroll-shadow-bottom":"mrl-modal-scroll-shadow-bottom--dcFcV"};
+
+exports.default = styles;
+//# sourceMappingURL=MrlModalFooter.module.scss.js.map

package/dist/cjs/components/modal/MrlModalFooter/MrlModalFooter.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MrlModalFooter.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}