@dfds-ui/modal 2.2.0-alpha.8d87a90d → 2.2.0-alpha.e010e72f

package/cjs/modal/ModalHeadline.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ModalHeadline = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactComponents = require("@dfds-ui/react-components");
+var _react2 = require("@emotion/react");
+var _theme = require("@dfds-ui/theme");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ModalHeadline = ({
+  className,
+  children
+}) => {
+  return (0, _react2.jsx)(_reactComponents.SmallHeadline, {
+    css: /*#__PURE__*/(0, _react2.css)("color:", _theme.theme.colors.primary.dark, ";margin:0.625rem 0;" + (process.env.NODE_ENV === "production" ? "" : ";label:ModalHeadline;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9tb2RhbC9Nb2RhbEhlYWRsaW5lLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFhYyIsImZpbGUiOiIuLi8uLi8uLi9zcmMvbW9kYWwvTW9kYWxIZWFkbGluZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBTbWFsbEhlYWRsaW5lIH0gZnJvbSAnQGRmZHMtdWkvcmVhY3QtY29tcG9uZW50cydcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tICdAZGZkcy11aS90aGVtZSdcblxuZXhwb3J0IHR5cGUgTW9kYWxIZWFkbGluZVByb3BzID0ge1xuICBjbGFzc05hbWU/OiBzdHJpbmdcbiAgY2hpbGRyZW4/OiBSZWFjdE5vZGVcbn1cblxuZXhwb3J0IGNvbnN0IE1vZGFsSGVhZGxpbmUgPSAoeyBjbGFzc05hbWUsIGNoaWxkcmVuIH06IE1vZGFsSGVhZGxpbmVQcm9wcykgPT4ge1xuICByZXR1cm4gKFxuICAgIDxTbWFsbEhlYWRsaW5lXG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgY29sb3I6ICR7dGhlbWUuY29sb3JzLnByaW1hcnkuZGFya307XG4gICAgICAgIG1hcmdpbjogMC42MjVyZW0gMDtcbiAgICAgIGB9XG4gICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICA+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9TbWFsbEhlYWRsaW5lPlxuICApXG59XG5cbmV4cG9ydCBkZWZhdWx0IE1vZGFsSGVhZGxpbmVcbiJdfQ== */"),
+    className: className
+  }, children);
+};
+exports.ModalHeadline = ModalHeadline;
+var _default = ModalHeadline;
+exports.default = _default;

package/cjs/modal/ModalPanel.d.ts

@@ -0,0 +1,49 @@
+import { ReactNode } from 'react';
+export declare type ModalPanelProps = {
+    /**
+     * Determines if the modal should be shown or not.
+     */
+    isOpen: boolean;
+    /**
+     * Determines if pressing esc should close the modal.
+     */
+    shouldCloseOnEsc?: boolean;
+    /**
+     * Callback when the modal is requested to be closed.
+     */
+    onRequestClose?: () => void;
+    /**
+     * zIndex for the modal.
+     */
+    zIndex?: number;
+    /**
+     * className to be assigned to component.
+     */
+    className?: string;
+    children?: ReactNode;
+};
+export declare const ModalPanel: ({ isOpen, shouldCloseOnEsc, onRequestClose, zIndex, className, children, }: ModalPanelProps) => JSX.Element;
+export declare type ModalPanelHeaderProps = {
+    /**
+     * className to be assigned to component
+     */
+    className?: string;
+    children: ReactNode;
+};
+export declare const ModalPanelHeader: ({ className, children }: ModalPanelHeaderProps) => JSX.Element;
+export declare type ModalPanelContent = {
+    /**
+     * className to be assigned to component
+     */
+    className?: string;
+    children: ReactNode;
+};
+export declare const ModalPanelContent: ({ className, children }: ModalPanelContent) => JSX.Element;
+export declare type ModalPanelFooterProps = {
+    /**
+     * className to be assigned to component
+     */
+    className?: string;
+    children: ReactNode;
+};
+export declare const ModalPanelFooter: ({ className, children }: ModalPanelFooterProps) => JSX.Element;

package/cjs/modal/ModalPanel.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ModalPanelHeader = exports.ModalPanelFooter = exports.ModalPanelContent = exports.ModalPanel = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _ReactModalWrapper = require("./ReactModalWrapper");
+var _reactComponents = require("@dfds-ui/react-components");
+var _theme = require("@dfds-ui/theme");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const modalPanelStyles = ({
+  zIndex
+}) => {
+  return /*#__PURE__*/(0, _react2.css)("&__overlay{position:relative;z-index:", zIndex, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:modalPanelStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9tb2RhbC9Nb2RhbFBhbmVsLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUErQlkiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL21vZGFsL01vZGFsUGFuZWwudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgeyBSZWFjdE1vZGFsV3JhcHBlciB9IGZyb20gJy4vUmVhY3RNb2RhbFdyYXBwZXInXG5pbXBvcnQgeyBMb2NrQm9keVNjcm9sbCB9IGZyb20gJ0BkZmRzLXVpL3JlYWN0LWNvbXBvbmVudHMnXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gJ0BkZmRzLXVpL3RoZW1lJ1xuXG5leHBvcnQgdHlwZSBNb2RhbFBhbmVsUHJvcHMgPSB7XG4gIC8qKlxuICAgKiBEZXRlcm1pbmVzIGlmIHRoZSBtb2RhbCBzaG91bGQgYmUgc2hvd24gb3Igbm90LlxuICAgKi9cbiAgaXNPcGVuOiBib29sZWFuXG4gIC8qKlxuICAgKiBEZXRlcm1pbmVzIGlmIHByZXNzaW5nIGVzYyBzaG91bGQgY2xvc2UgdGhlIG1vZGFsLlxuICAgKi9cbiAgc2hvdWxkQ2xvc2VPbkVzYz86IGJvb2xlYW5cbiAgLyoqXG4gICAqIENhbGxiYWNrIHdoZW4gdGhlIG1vZGFsIGlzIHJlcXVlc3RlZCB0byBiZSBjbG9zZWQuXG4gICAqL1xuICBvblJlcXVlc3RDbG9zZT86ICgpID0+IHZvaWRcbiAgLyoqXG4gICAqIHpJbmRleCBmb3IgdGhlIG1vZGFsLlxuICAgKi9cbiAgekluZGV4PzogbnVtYmVyXG4gIC8qKlxuICAgKiBjbGFzc05hbWUgdG8gYmUgYXNzaWduZWQgdG8gY29tcG9uZW50LlxuICAgKi9cbiAgY2xhc3NOYW1lPzogc3RyaW5nXG4gIGNoaWxkcmVuPzogUmVhY3ROb2RlXG59XG5cbmNvbnN0IG1vZGFsUGFuZWxTdHlsZXMgPSAoeyB6SW5kZXggfTogeyB6SW5kZXg/OiBudW1iZXIgfSkgPT4ge1xuICByZXR1cm4gY3NzYFxuICAgICZfX292ZXJsYXkge1xuICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgei1pbmRleDogJHt6SW5kZXh9O1xuICAgIH1cbiAgYFxufVxuXG5leHBvcnQgY29uc3QgTW9kYWxQYW5lbCA9ICh7XG4gIGlzT3BlbixcbiAgc2hvdWxkQ2xvc2VPbkVzYyxcbiAgb25SZXF1ZXN0Q2xvc2UsXG4gIHpJbmRleCA9IDkwMDAsXG4gIGNsYXNzTmFtZSxcbiAgY2hpbGRyZW4sXG59OiBNb2RhbFBhbmVsUHJvcHMpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8TG9ja0JvZHlTY3JvbGwgZW5hYmxlZD17aXNPcGVufT5cbiAgICAgIDxSZWFjdE1vZGFsV3JhcHBlclxuICAgICAgICBpc09wZW49e2lzT3Blbn1cbiAgICAgICAgc2hvdWxkQ2xvc2VPbkVzYz17c2hvdWxkQ2xvc2VPbkVzY31cbiAgICAgICAgb25SZXF1ZXN0Q2xvc2U9e29uUmVxdWVzdENsb3NlfVxuICAgICAgICBhcmlhSGlkZUFwcD17ZmFsc2V9XG4gICAgICAgIGNzcz17bW9kYWxQYW5lbFN0eWxlcyh7IHpJbmRleCB9KX1cbiAgICAgID5cbiAgICAgICAgPGRpdlxuICAgICAgICAgIGNzcz17Y3NzYFxuICAgICAgICAgICAgdG9wOiAwO1xuICAgICAgICAgICAgYm90dG9tOiAwO1xuICAgICAgICAgICAgbGVmdDogMDtcbiAgICAgICAgICAgIHJpZ2h0OiAwO1xuICAgICAgICAgICAgcG9zaXRpb246IGZpeGVkO1xuICAgICAgICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICAgICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUuY29sb3JzLnN1cmZhY2UucHJpbWFyeX07XG4gICAgICAgICAgICB6LWluZGV4OiAxMDAwO1xuICAgICAgICAgIGB9XG4gICAgICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWV9XG4gICAgICAgID5cbiAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9SZWFjdE1vZGFsV3JhcHBlcj5cbiAgICA8L0xvY2tCb2R5U2Nyb2xsPlxuICApXG59XG5cbmV4cG9ydCB0eXBlIE1vZGFsUGFuZWxIZWFkZXJQcm9wcyA9IHtcbiAgLyoqXG4gICAqIGNsYXNzTmFtZSB0byBiZSBhc3NpZ25lZCB0byBjb21wb25lbnRcbiAgICovXG4gIGNsYXNzTmFtZT86IHN0cmluZ1xuICBjaGlsZHJlbjogUmVhY3ROb2RlXG59XG5cbmV4cG9ydCBjb25zdCBNb2RhbFBhbmVsSGVhZGVyID0gKHsgY2xhc3NOYW1lLCBjaGlsZHJlbiB9OiBNb2RhbFBhbmVsSGVhZGVyUHJvcHMpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8aGVhZGVyXG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgYH1cbiAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgID5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L2hlYWRlcj5cbiAgKVxufVxuXG5leHBvcnQgdHlwZSBNb2RhbFBhbmVsQ29udGVudCA9IHtcbiAgLyoqXG4gICAqIGNsYXNzTmFtZSB0byBiZSBhc3NpZ25lZCB0byBjb21wb25lbnRcbiAgICovXG4gIGNsYXNzTmFtZT86IHN0cmluZ1xuICBjaGlsZHJlbjogUmVhY3ROb2RlXG59XG5cbmV4cG9ydCBjb25zdCBNb2RhbFBhbmVsQ29udGVudCA9ICh7IGNsYXNzTmFtZSwgY2hpbGRyZW4gfTogTW9kYWxQYW5lbENvbnRlbnQpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8c2VjdGlvblxuICAgICAgY3NzPXtjc3NgXG4gICAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICAgIGZvbnQtc2l6ZTogMTRweDtcbiAgICAgICAgbGluZS1oZWlnaHQ6IDE4cHg7XG4gICAgICAgIGZvbnQtd2VpZ2h0OiA0MDA7XG4gICAgICAgIGZsZXg6IDEgMSBhdXRvO1xuICAgICAgICBvdmVyZmxvdzogYXV0bztcbiAgICAgICAgLXdlYmtpdC1vdmVyZmxvdy1zY3JvbGxpbmc6IHRvdWNoO1xuICAgICAgYH1cbiAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgID5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L3NlY3Rpb24+XG4gIClcbn1cblxuZXhwb3J0IHR5cGUgTW9kYWxQYW5lbEZvb3RlclByb3BzID0ge1xuICAvKipcbiAgICogY2xhc3NOYW1lIHRvIGJlIGFzc2lnbmVkIHRvIGNvbXBvbmVudFxuICAgKi9cbiAgY2xhc3NOYW1lPzogc3RyaW5nXG4gIGNoaWxkcmVuOiBSZWFjdE5vZGVcbn1cblxuZXhwb3J0IGNvbnN0IE1vZGFsUGFuZWxGb290ZXIgPSAoeyBjbGFzc05hbWUsIGNoaWxkcmVuIH06IE1vZGFsUGFuZWxGb290ZXJQcm9wcykgPT4ge1xuICByZXR1cm4gKFxuICAgIDxmb290ZXJcbiAgICAgIGNzcz17Y3NzYFxuICAgICAgICBmbGV4OiAwIDAgYXV0bztcbiAgICAgIGB9XG4gICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICA+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9mb290ZXI+XG4gIClcbn1cbiJdfQ== */");
+};
+const ModalPanel = ({
+  isOpen,
+  shouldCloseOnEsc,
+  onRequestClose,
+  zIndex = 9000,
+  className,
+  children
+}) => {
+  return (0, _react2.jsx)(_reactComponents.LockBodyScroll, {
+    enabled: isOpen
+  }, (0, _react2.jsx)(_ReactModalWrapper.ReactModalWrapper, {
+    isOpen: isOpen,
+    shouldCloseOnEsc: shouldCloseOnEsc,
+    onRequestClose: onRequestClose,
+    ariaHideApp: false,
+    css: modalPanelStyles({
+      zIndex
+    })
+  }, (0, _react2.jsx)("div", {
+    css: /*#__PURE__*/(0, _react2.css)("top:0;bottom:0;left:0;right:0;position:fixed;width:100%;display:flex;flex-direction:column;background-color:", _theme.theme.colors.surface.primary, ";z-index:1000;" + (process.env.NODE_ENV === "production" ? "" : ";label:ModalPanel;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9tb2RhbC9Nb2RhbFBhbmVsLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5RGtCIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9tb2RhbC9Nb2RhbFBhbmVsLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHsgUmVhY3RNb2RhbFdyYXBwZXIgfSBmcm9tICcuL1JlYWN0TW9kYWxXcmFwcGVyJ1xuaW1wb3J0IHsgTG9ja0JvZHlTY3JvbGwgfSBmcm9tICdAZGZkcy11aS9yZWFjdC1jb21wb25lbnRzJ1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tICdAZGZkcy11aS90aGVtZSdcblxuZXhwb3J0IHR5cGUgTW9kYWxQYW5lbFByb3BzID0ge1xuICAvKipcbiAgICogRGV0ZXJtaW5lcyBpZiB0aGUgbW9kYWwgc2hvdWxkIGJlIHNob3duIG9yIG5vdC5cbiAgICovXG4gIGlzT3BlbjogYm9vbGVhblxuICAvKipcbiAgICogRGV0ZXJtaW5lcyBpZiBwcmVzc2luZyBlc2Mgc2hvdWxkIGNsb3NlIHRoZSBtb2RhbC5cbiAgICovXG4gIHNob3VsZENsb3NlT25Fc2M/OiBib29sZWFuXG4gIC8qKlxuICAgKiBDYWxsYmFjayB3aGVuIHRoZSBtb2RhbCBpcyByZXF1ZXN0ZWQgdG8gYmUgY2xvc2VkLlxuICAgKi9cbiAgb25SZXF1ZXN0Q2xvc2U/OiAoKSA9PiB2b2lkXG4gIC8qKlxuICAgKiB6SW5kZXggZm9yIHRoZSBtb2RhbC5cbiAgICovXG4gIHpJbmRleD86IG51bWJlclxuICAvKipcbiAgICogY2xhc3NOYW1lIHRvIGJlIGFzc2lnbmVkIHRvIGNvbXBvbmVudC5cbiAgICovXG4gIGNsYXNzTmFtZT86IHN0cmluZ1xuICBjaGlsZHJlbj86IFJlYWN0Tm9kZVxufVxuXG5jb25zdCBtb2RhbFBhbmVsU3R5bGVzID0gKHsgekluZGV4IH06IHsgekluZGV4PzogbnVtYmVyIH0pID0+IHtcbiAgcmV0dXJuIGNzc2BcbiAgICAmX19vdmVybGF5IHtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIHotaW5kZXg6ICR7ekluZGV4fTtcbiAgICB9XG4gIGBcbn1cblxuZXhwb3J0IGNvbnN0IE1vZGFsUGFuZWwgPSAoe1xuICBpc09wZW4sXG4gIHNob3VsZENsb3NlT25Fc2MsXG4gIG9uUmVxdWVzdENsb3NlLFxuICB6SW5kZXggPSA5MDAwLFxuICBjbGFzc05hbWUsXG4gIGNoaWxkcmVuLFxufTogTW9kYWxQYW5lbFByb3BzKSA9PiB7XG4gIHJldHVybiAoXG4gICAgPExvY2tCb2R5U2Nyb2xsIGVuYWJsZWQ9e2lzT3Blbn0+XG4gICAgICA8UmVhY3RNb2RhbFdyYXBwZXJcbiAgICAgICAgaXNPcGVuPXtpc09wZW59XG4gICAgICAgIHNob3VsZENsb3NlT25Fc2M9e3Nob3VsZENsb3NlT25Fc2N9XG4gICAgICAgIG9uUmVxdWVzdENsb3NlPXtvblJlcXVlc3RDbG9zZX1cbiAgICAgICAgYXJpYUhpZGVBcHA9e2ZhbHNlfVxuICAgICAgICBjc3M9e21vZGFsUGFuZWxTdHlsZXMoeyB6SW5kZXggfSl9XG4gICAgICA+XG4gICAgICAgIDxkaXZcbiAgICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICAgIHRvcDogMDtcbiAgICAgICAgICAgIGJvdHRvbTogMDtcbiAgICAgICAgICAgIGxlZnQ6IDA7XG4gICAgICAgICAgICByaWdodDogMDtcbiAgICAgICAgICAgIHBvc2l0aW9uOiBmaXhlZDtcbiAgICAgICAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgICAgICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLmNvbG9ycy5zdXJmYWNlLnByaW1hcnl9O1xuICAgICAgICAgICAgei1pbmRleDogMTAwMDtcbiAgICAgICAgICBgfVxuICAgICAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgICAgICA+XG4gICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvUmVhY3RNb2RhbFdyYXBwZXI+XG4gICAgPC9Mb2NrQm9keVNjcm9sbD5cbiAgKVxufVxuXG5leHBvcnQgdHlwZSBNb2RhbFBhbmVsSGVhZGVyUHJvcHMgPSB7XG4gIC8qKlxuICAgKiBjbGFzc05hbWUgdG8gYmUgYXNzaWduZWQgdG8gY29tcG9uZW50XG4gICAqL1xuICBjbGFzc05hbWU/OiBzdHJpbmdcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZVxufVxuXG5leHBvcnQgY29uc3QgTW9kYWxQYW5lbEhlYWRlciA9ICh7IGNsYXNzTmFtZSwgY2hpbGRyZW4gfTogTW9kYWxQYW5lbEhlYWRlclByb3BzKSA9PiB7XG4gIHJldHVybiAoXG4gICAgPGhlYWRlclxuICAgICAgY3NzPXtjc3NgXG4gICAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIGB9XG4gICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICA+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9oZWFkZXI+XG4gIClcbn1cblxuZXhwb3J0IHR5cGUgTW9kYWxQYW5lbENvbnRlbnQgPSB7XG4gIC8qKlxuICAgKiBjbGFzc05hbWUgdG8gYmUgYXNzaWduZWQgdG8gY29tcG9uZW50XG4gICAqL1xuICBjbGFzc05hbWU/OiBzdHJpbmdcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZVxufVxuXG5leHBvcnQgY29uc3QgTW9kYWxQYW5lbENvbnRlbnQgPSAoeyBjbGFzc05hbWUsIGNoaWxkcmVuIH06IE1vZGFsUGFuZWxDb250ZW50KSA9PiB7XG4gIHJldHVybiAoXG4gICAgPHNlY3Rpb25cbiAgICAgIGNzcz17Y3NzYFxuICAgICAgICBkaXNwbGF5OiBibG9jaztcbiAgICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgICBmb250LXNpemU6IDE0cHg7XG4gICAgICAgIGxpbmUtaGVpZ2h0OiAxOHB4O1xuICAgICAgICBmb250LXdlaWdodDogNDAwO1xuICAgICAgICBmbGV4OiAxIDEgYXV0bztcbiAgICAgICAgb3ZlcmZsb3c6IGF1dG87XG4gICAgICAgIC13ZWJraXQtb3ZlcmZsb3ctc2Nyb2xsaW5nOiB0b3VjaDtcbiAgICAgIGB9XG4gICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICA+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9zZWN0aW9uPlxuICApXG59XG5cbmV4cG9ydCB0eXBlIE1vZGFsUGFuZWxGb290ZXJQcm9wcyA9IHtcbiAgLyoqXG4gICAqIGNsYXNzTmFtZSB0byBiZSBhc3NpZ25lZCB0byBjb21wb25lbnRcbiAgICovXG4gIGNsYXNzTmFtZT86IHN0cmluZ1xuICBjaGlsZHJlbjogUmVhY3ROb2RlXG59XG5cbmV4cG9ydCBjb25zdCBNb2RhbFBhbmVsRm9vdGVyID0gKHsgY2xhc3NOYW1lLCBjaGlsZHJlbiB9OiBNb2RhbFBhbmVsRm9vdGVyUHJvcHMpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8Zm9vdGVyXG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgZmxleDogMCAwIGF1dG87XG4gICAgICBgfVxuICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWV9XG4gICAgPlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvZm9vdGVyPlxuICApXG59XG4iXX0= */"),
+    className: className
+  }, children)));
+};
+exports.ModalPanel = ModalPanel;
+var _ref3 = process.env.NODE_ENV === "production" ? {
+  name: "bjn8wh",
+  styles: "position:relative"
+} : {
+  name: "1pgnmsq-ModalPanelHeader",
+  styles: "position:relative;label:ModalPanelHeader;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9tb2RhbC9Nb2RhbFBhbmVsLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5RmMiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL21vZGFsL01vZGFsUGFuZWwudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgeyBSZWFjdE1vZGFsV3JhcHBlciB9IGZyb20gJy4vUmVhY3RNb2RhbFdyYXBwZXInXG5pbXBvcnQgeyBMb2NrQm9keVNjcm9sbCB9IGZyb20gJ0BkZmRzLXVpL3JlYWN0LWNvbXBvbmVudHMnXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gJ0BkZmRzLXVpL3RoZW1lJ1xuXG5leHBvcnQgdHlwZSBNb2RhbFBhbmVsUHJvcHMgPSB7XG4gIC8qKlxuICAgKiBEZXRlcm1pbmVzIGlmIHRoZSBtb2RhbCBzaG91bGQgYmUgc2hvd24gb3Igbm90LlxuICAgKi9cbiAgaXNPcGVuOiBib29sZWFuXG4gIC8qKlxuICAgKiBEZXRlcm1pbmVzIGlmIHByZXNzaW5nIGVzYyBzaG91bGQgY2xvc2UgdGhlIG1vZGFsLlxuICAgKi9cbiAgc2hvdWxkQ2xvc2VPbkVzYz86IGJvb2xlYW5cbiAgLyoqXG4gICAqIENhbGxiYWNrIHdoZW4gdGhlIG1vZGFsIGlzIHJlcXVlc3RlZCB0byBiZSBjbG9zZWQuXG4gICAqL1xuICBvblJlcXVlc3RDbG9zZT86ICgpID0+IHZvaWRcbiAgLyoqXG4gICAqIHpJbmRleCBmb3IgdGhlIG1vZGFsLlxuICAgKi9cbiAgekluZGV4PzogbnVtYmVyXG4gIC8qKlxuICAgKiBjbGFzc05hbWUgdG8gYmUgYXNzaWduZWQgdG8gY29tcG9uZW50LlxuICAgKi9cbiAgY2xhc3NOYW1lPzogc3RyaW5nXG4gIGNoaWxkcmVuPzogUmVhY3ROb2RlXG59XG5cbmNvbnN0IG1vZGFsUGFuZWxTdHlsZXMgPSAoeyB6SW5kZXggfTogeyB6SW5kZXg/OiBudW1iZXIgfSkgPT4ge1xuICByZXR1cm4gY3NzYFxuICAgICZfX292ZXJsYXkge1xuICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgei1pbmRleDogJHt6SW5kZXh9O1xuICAgIH1cbiAgYFxufVxuXG5leHBvcnQgY29uc3QgTW9kYWxQYW5lbCA9ICh7XG4gIGlzT3BlbixcbiAgc2hvdWxkQ2xvc2VPbkVzYyxcbiAgb25SZXF1ZXN0Q2xvc2UsXG4gIHpJbmRleCA9IDkwMDAsXG4gIGNsYXNzTmFtZSxcbiAgY2hpbGRyZW4sXG59OiBNb2RhbFBhbmVsUHJvcHMpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8TG9ja0JvZHlTY3JvbGwgZW5hYmxlZD17aXNPcGVufT5cbiAgICAgIDxSZWFjdE1vZGFsV3JhcHBlclxuICAgICAgICBpc09wZW49e2lzT3Blbn1cbiAgICAgICAgc2hvdWxkQ2xvc2VPbkVzYz17c2hvdWxkQ2xvc2VPbkVzY31cbiAgICAgICAgb25SZXF1ZXN0Q2xvc2U9e29uUmVxdWVzdENsb3NlfVxuICAgICAgICBhcmlhSGlkZUFwcD17ZmFsc2V9XG4gICAgICAgIGNzcz17bW9kYWxQYW5lbFN0eWxlcyh7IHpJbmRleCB9KX1cbiAgICAgID5cbiAgICAgICAgPGRpdlxuICAgICAgICAgIGNzcz17Y3NzYFxuICAgICAgICAgICAgdG9wOiAwO1xuICAgICAgICAgICAgYm90dG9tOiAwO1xuICAgICAgICAgICAgbGVmdDogMDtcbiAgICAgICAgICAgIHJpZ2h0OiAwO1xuICAgICAgICAgICAgcG9zaXRpb246IGZpeGVkO1xuICAgICAgICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICAgICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUuY29sb3JzLnN1cmZhY2UucHJpbWFyeX07XG4gICAgICAgICAgICB6LWluZGV4OiAxMDAwO1xuICAgICAgICAgIGB9XG4gICAgICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWV9XG4gICAgICAgID5cbiAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9SZWFjdE1vZGFsV3JhcHBlcj5cbiAgICA8L0xvY2tCb2R5U2Nyb2xsPlxuICApXG59XG5cbmV4cG9ydCB0eXBlIE1vZGFsUGFuZWxIZWFkZXJQcm9wcyA9IHtcbiAgLyoqXG4gICAqIGNsYXNzTmFtZSB0byBiZSBhc3NpZ25lZCB0byBjb21wb25lbnRcbiAgICovXG4gIGNsYXNzTmFtZT86IHN0cmluZ1xuICBjaGlsZHJlbjogUmVhY3ROb2RlXG59XG5cbmV4cG9ydCBjb25zdCBNb2RhbFBhbmVsSGVhZGVyID0gKHsgY2xhc3NOYW1lLCBjaGlsZHJlbiB9OiBNb2RhbFBhbmVsSGVhZGVyUHJvcHMpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8aGVhZGVyXG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgYH1cbiAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgID5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L2hlYWRlcj5cbiAgKVxufVxuXG5leHBvcnQgdHlwZSBNb2RhbFBhbmVsQ29udGVudCA9IHtcbiAgLyoqXG4gICAqIGNsYXNzTmFtZSB0byBiZSBhc3NpZ25lZCB0byBjb21wb25lbnRcbiAgICovXG4gIGNsYXNzTmFtZT86IHN0cmluZ1xuICBjaGlsZHJlbjogUmVhY3ROb2RlXG59XG5cbmV4cG9ydCBjb25zdCBNb2RhbFBhbmVsQ29udGVudCA9ICh7IGNsYXNzTmFtZSwgY2hpbGRyZW4gfTogTW9kYWxQYW5lbENvbnRlbnQpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8c2VjdGlvblxuICAgICAgY3NzPXtjc3NgXG4gICAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICAgIGZvbnQtc2l6ZTogMTRweDtcbiAgICAgICAgbGluZS1oZWlnaHQ6IDE4cHg7XG4gICAgICAgIGZvbnQtd2VpZ2h0OiA0MDA7XG4gICAgICAgIGZsZXg6IDEgMSBhdXRvO1xuICAgICAgICBvdmVyZmxvdzogYXV0bztcbiAgICAgICAgLXdlYmtpdC1vdmVyZmxvdy1zY3JvbGxpbmc6IHRvdWNoO1xuICAgICAgYH1cbiAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgID5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L3NlY3Rpb24+XG4gIClcbn1cblxuZXhwb3J0IHR5cGUgTW9kYWxQYW5lbEZvb3RlclByb3BzID0ge1xuICAvKipcbiAgICogY2xhc3NOYW1lIHRvIGJlIGFzc2lnbmVkIHRvIGNvbXBvbmVudFxuICAgKi9cbiAgY2xhc3NOYW1lPzogc3RyaW5nXG4gIGNoaWxkcmVuOiBSZWFjdE5vZGVcbn1cblxuZXhwb3J0IGNvbnN0IE1vZGFsUGFuZWxGb290ZXIgPSAoeyBjbGFzc05hbWUsIGNoaWxkcmVuIH06IE1vZGFsUGFuZWxGb290ZXJQcm9wcykgPT4ge1xuICByZXR1cm4gKFxuICAgIDxmb290ZXJcbiAgICAgIGNzcz17Y3NzYFxuICAgICAgICBmbGV4OiAwIDAgYXV0bztcbiAgICAgIGB9XG4gICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICA+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9mb290ZXI+XG4gIClcbn1cbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+const ModalPanelHeader = ({
+  className,
+  children
+}) => {
+  return (0, _react2.jsx)("header", {
+    css: _ref3,
+    className: className
+  }, children);
+};
+exports.ModalPanelHeader = ModalPanelHeader;
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "1ua03vx",
+  styles: "display:block;position:relative;font-size:14px;line-height:18px;font-weight:400;flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch"
+} : {
+  name: "13s7etd-ModalPanelContent",
+  styles: "display:block;position:relative;font-size:14px;line-height:18px;font-weight:400;flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;label:ModalPanelContent;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9tb2RhbC9Nb2RhbFBhbmVsLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE4R2MiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL21vZGFsL01vZGFsUGFuZWwudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgeyBSZWFjdE1vZGFsV3JhcHBlciB9IGZyb20gJy4vUmVhY3RNb2RhbFdyYXBwZXInXG5pbXBvcnQgeyBMb2NrQm9keVNjcm9sbCB9IGZyb20gJ0BkZmRzLXVpL3JlYWN0LWNvbXBvbmVudHMnXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gJ0BkZmRzLXVpL3RoZW1lJ1xuXG5leHBvcnQgdHlwZSBNb2RhbFBhbmVsUHJvcHMgPSB7XG4gIC8qKlxuICAgKiBEZXRlcm1pbmVzIGlmIHRoZSBtb2RhbCBzaG91bGQgYmUgc2hvd24gb3Igbm90LlxuICAgKi9cbiAgaXNPcGVuOiBib29sZWFuXG4gIC8qKlxuICAgKiBEZXRlcm1pbmVzIGlmIHByZXNzaW5nIGVzYyBzaG91bGQgY2xvc2UgdGhlIG1vZGFsLlxuICAgKi9cbiAgc2hvdWxkQ2xvc2VPbkVzYz86IGJvb2xlYW5cbiAgLyoqXG4gICAqIENhbGxiYWNrIHdoZW4gdGhlIG1vZGFsIGlzIHJlcXVlc3RlZCB0byBiZSBjbG9zZWQuXG4gICAqL1xuICBvblJlcXVlc3RDbG9zZT86ICgpID0+IHZvaWRcbiAgLyoqXG4gICAqIHpJbmRleCBmb3IgdGhlIG1vZGFsLlxuICAgKi9cbiAgekluZGV4PzogbnVtYmVyXG4gIC8qKlxuICAgKiBjbGFzc05hbWUgdG8gYmUgYXNzaWduZWQgdG8gY29tcG9uZW50LlxuICAgKi9cbiAgY2xhc3NOYW1lPzogc3RyaW5nXG4gIGNoaWxkcmVuPzogUmVhY3ROb2RlXG59XG5cbmNvbnN0IG1vZGFsUGFuZWxTdHlsZXMgPSAoeyB6SW5kZXggfTogeyB6SW5kZXg/OiBudW1iZXIgfSkgPT4ge1xuICByZXR1cm4gY3NzYFxuICAgICZfX292ZXJsYXkge1xuICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgei1pbmRleDogJHt6SW5kZXh9O1xuICAgIH1cbiAgYFxufVxuXG5leHBvcnQgY29uc3QgTW9kYWxQYW5lbCA9ICh7XG4gIGlzT3BlbixcbiAgc2hvdWxkQ2xvc2VPbkVzYyxcbiAgb25SZXF1ZXN0Q2xvc2UsXG4gIHpJbmRleCA9IDkwMDAsXG4gIGNsYXNzTmFtZSxcbiAgY2hpbGRyZW4sXG59OiBNb2RhbFBhbmVsUHJvcHMpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8TG9ja0JvZHlTY3JvbGwgZW5hYmxlZD17aXNPcGVufT5cbiAgICAgIDxSZWFjdE1vZGFsV3JhcHBlclxuICAgICAgICBpc09wZW49e2lzT3Blbn1cbiAgICAgICAgc2hvdWxkQ2xvc2VPbkVzYz17c2hvdWxkQ2xvc2VPbkVzY31cbiAgICAgICAgb25SZXF1ZXN0Q2xvc2U9e29uUmVxdWVzdENsb3NlfVxuICAgICAgICBhcmlhSGlkZUFwcD17ZmFsc2V9XG4gICAgICAgIGNzcz17bW9kYWxQYW5lbFN0eWxlcyh7IHpJbmRleCB9KX1cbiAgICAgID5cbiAgICAgICAgPGRpdlxuICAgICAgICAgIGNzcz17Y3NzYFxuICAgICAgICAgICAgdG9wOiAwO1xuICAgICAgICAgICAgYm90dG9tOiAwO1xuICAgICAgICAgICAgbGVmdDogMDtcbiAgICAgICAgICAgIHJpZ2h0OiAwO1xuICAgICAgICAgICAgcG9zaXRpb246IGZpeGVkO1xuICAgICAgICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICAgICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUuY29sb3JzLnN1cmZhY2UucHJpbWFyeX07XG4gICAgICAgICAgICB6LWluZGV4OiAxMDAwO1xuICAgICAgICAgIGB9XG4gICAgICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWV9XG4gICAgICAgID5cbiAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9SZWFjdE1vZGFsV3JhcHBlcj5cbiAgICA8L0xvY2tCb2R5U2Nyb2xsPlxuICApXG59XG5cbmV4cG9ydCB0eXBlIE1vZGFsUGFuZWxIZWFkZXJQcm9wcyA9IHtcbiAgLyoqXG4gICAqIGNsYXNzTmFtZSB0byBiZSBhc3NpZ25lZCB0byBjb21wb25lbnRcbiAgICovXG4gIGNsYXNzTmFtZT86IHN0cmluZ1xuICBjaGlsZHJlbjogUmVhY3ROb2RlXG59XG5cbmV4cG9ydCBjb25zdCBNb2RhbFBhbmVsSGVhZGVyID0gKHsgY2xhc3NOYW1lLCBjaGlsZHJlbiB9OiBNb2RhbFBhbmVsSGVhZGVyUHJvcHMpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8aGVhZGVyXG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgYH1cbiAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgID5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L2hlYWRlcj5cbiAgKVxufVxuXG5leHBvcnQgdHlwZSBNb2RhbFBhbmVsQ29udGVudCA9IHtcbiAgLyoqXG4gICAqIGNsYXNzTmFtZSB0byBiZSBhc3NpZ25lZCB0byBjb21wb25lbnRcbiAgICovXG4gIGNsYXNzTmFtZT86IHN0cmluZ1xuICBjaGlsZHJlbjogUmVhY3ROb2RlXG59XG5cbmV4cG9ydCBjb25zdCBNb2RhbFBhbmVsQ29udGVudCA9ICh7IGNsYXNzTmFtZSwgY2hpbGRyZW4gfTogTW9kYWxQYW5lbENvbnRlbnQpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8c2VjdGlvblxuICAgICAgY3NzPXtjc3NgXG4gICAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICAgIGZvbnQtc2l6ZTogMTRweDtcbiAgICAgICAgbGluZS1oZWlnaHQ6IDE4cHg7XG4gICAgICAgIGZvbnQtd2VpZ2h0OiA0MDA7XG4gICAgICAgIGZsZXg6IDEgMSBhdXRvO1xuICAgICAgICBvdmVyZmxvdzogYXV0bztcbiAgICAgICAgLXdlYmtpdC1vdmVyZmxvdy1zY3JvbGxpbmc6IHRvdWNoO1xuICAgICAgYH1cbiAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgID5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L3NlY3Rpb24+XG4gIClcbn1cblxuZXhwb3J0IHR5cGUgTW9kYWxQYW5lbEZvb3RlclByb3BzID0ge1xuICAvKipcbiAgICogY2xhc3NOYW1lIHRvIGJlIGFzc2lnbmVkIHRvIGNvbXBvbmVudFxuICAgKi9cbiAgY2xhc3NOYW1lPzogc3RyaW5nXG4gIGNoaWxkcmVuOiBSZWFjdE5vZGVcbn1cblxuZXhwb3J0IGNvbnN0IE1vZGFsUGFuZWxGb290ZXIgPSAoeyBjbGFzc05hbWUsIGNoaWxkcmVuIH06IE1vZGFsUGFuZWxGb290ZXJQcm9wcykgPT4ge1xuICByZXR1cm4gKFxuICAgIDxmb290ZXJcbiAgICAgIGNzcz17Y3NzYFxuICAgICAgICBmbGV4OiAwIDAgYXV0bztcbiAgICAgIGB9XG4gICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICA+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9mb290ZXI+XG4gIClcbn1cbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+const ModalPanelContent = ({
+  className,
+  children
+}) => {
+  return (0, _react2.jsx)("section", {
+    css: _ref2,
+    className: className
+  }, children);
+};
+exports.ModalPanelContent = ModalPanelContent;
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "ou8xsw",
+  styles: "flex:0 0 auto"
+} : {
+  name: "1a68hcn-ModalPanelFooter",
+  styles: "flex:0 0 auto;label:ModalPanelFooter;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9tb2RhbC9Nb2RhbFBhbmVsLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEwSWMiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL21vZGFsL01vZGFsUGFuZWwudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgeyBSZWFjdE1vZGFsV3JhcHBlciB9IGZyb20gJy4vUmVhY3RNb2RhbFdyYXBwZXInXG5pbXBvcnQgeyBMb2NrQm9keVNjcm9sbCB9IGZyb20gJ0BkZmRzLXVpL3JlYWN0LWNvbXBvbmVudHMnXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gJ0BkZmRzLXVpL3RoZW1lJ1xuXG5leHBvcnQgdHlwZSBNb2RhbFBhbmVsUHJvcHMgPSB7XG4gIC8qKlxuICAgKiBEZXRlcm1pbmVzIGlmIHRoZSBtb2RhbCBzaG91bGQgYmUgc2hvd24gb3Igbm90LlxuICAgKi9cbiAgaXNPcGVuOiBib29sZWFuXG4gIC8qKlxuICAgKiBEZXRlcm1pbmVzIGlmIHByZXNzaW5nIGVzYyBzaG91bGQgY2xvc2UgdGhlIG1vZGFsLlxuICAgKi9cbiAgc2hvdWxkQ2xvc2VPbkVzYz86IGJvb2xlYW5cbiAgLyoqXG4gICAqIENhbGxiYWNrIHdoZW4gdGhlIG1vZGFsIGlzIHJlcXVlc3RlZCB0byBiZSBjbG9zZWQuXG4gICAqL1xuICBvblJlcXVlc3RDbG9zZT86ICgpID0+IHZvaWRcbiAgLyoqXG4gICAqIHpJbmRleCBmb3IgdGhlIG1vZGFsLlxuICAgKi9cbiAgekluZGV4PzogbnVtYmVyXG4gIC8qKlxuICAgKiBjbGFzc05hbWUgdG8gYmUgYXNzaWduZWQgdG8gY29tcG9uZW50LlxuICAgKi9cbiAgY2xhc3NOYW1lPzogc3RyaW5nXG4gIGNoaWxkcmVuPzogUmVhY3ROb2RlXG59XG5cbmNvbnN0IG1vZGFsUGFuZWxTdHlsZXMgPSAoeyB6SW5kZXggfTogeyB6SW5kZXg/OiBudW1iZXIgfSkgPT4ge1xuICByZXR1cm4gY3NzYFxuICAgICZfX292ZXJsYXkge1xuICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgei1pbmRleDogJHt6SW5kZXh9O1xuICAgIH1cbiAgYFxufVxuXG5leHBvcnQgY29uc3QgTW9kYWxQYW5lbCA9ICh7XG4gIGlzT3BlbixcbiAgc2hvdWxkQ2xvc2VPbkVzYyxcbiAgb25SZXF1ZXN0Q2xvc2UsXG4gIHpJbmRleCA9IDkwMDAsXG4gIGNsYXNzTmFtZSxcbiAgY2hpbGRyZW4sXG59OiBNb2RhbFBhbmVsUHJvcHMpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8TG9ja0JvZHlTY3JvbGwgZW5hYmxlZD17aXNPcGVufT5cbiAgICAgIDxSZWFjdE1vZGFsV3JhcHBlclxuICAgICAgICBpc09wZW49e2lzT3Blbn1cbiAgICAgICAgc2hvdWxkQ2xvc2VPbkVzYz17c2hvdWxkQ2xvc2VPbkVzY31cbiAgICAgICAgb25SZXF1ZXN0Q2xvc2U9e29uUmVxdWVzdENsb3NlfVxuICAgICAgICBhcmlhSGlkZUFwcD17ZmFsc2V9XG4gICAgICAgIGNzcz17bW9kYWxQYW5lbFN0eWxlcyh7IHpJbmRleCB9KX1cbiAgICAgID5cbiAgICAgICAgPGRpdlxuICAgICAgICAgIGNzcz17Y3NzYFxuICAgICAgICAgICAgdG9wOiAwO1xuICAgICAgICAgICAgYm90dG9tOiAwO1xuICAgICAgICAgICAgbGVmdDogMDtcbiAgICAgICAgICAgIHJpZ2h0OiAwO1xuICAgICAgICAgICAgcG9zaXRpb246IGZpeGVkO1xuICAgICAgICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICAgICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUuY29sb3JzLnN1cmZhY2UucHJpbWFyeX07XG4gICAgICAgICAgICB6LWluZGV4OiAxMDAwO1xuICAgICAgICAgIGB9XG4gICAgICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWV9XG4gICAgICAgID5cbiAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9SZWFjdE1vZGFsV3JhcHBlcj5cbiAgICA8L0xvY2tCb2R5U2Nyb2xsPlxuICApXG59XG5cbmV4cG9ydCB0eXBlIE1vZGFsUGFuZWxIZWFkZXJQcm9wcyA9IHtcbiAgLyoqXG4gICAqIGNsYXNzTmFtZSB0byBiZSBhc3NpZ25lZCB0byBjb21wb25lbnRcbiAgICovXG4gIGNsYXNzTmFtZT86IHN0cmluZ1xuICBjaGlsZHJlbjogUmVhY3ROb2RlXG59XG5cbmV4cG9ydCBjb25zdCBNb2RhbFBhbmVsSGVhZGVyID0gKHsgY2xhc3NOYW1lLCBjaGlsZHJlbiB9OiBNb2RhbFBhbmVsSGVhZGVyUHJvcHMpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8aGVhZGVyXG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgYH1cbiAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgID5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L2hlYWRlcj5cbiAgKVxufVxuXG5leHBvcnQgdHlwZSBNb2RhbFBhbmVsQ29udGVudCA9IHtcbiAgLyoqXG4gICAqIGNsYXNzTmFtZSB0byBiZSBhc3NpZ25lZCB0byBjb21wb25lbnRcbiAgICovXG4gIGNsYXNzTmFtZT86IHN0cmluZ1xuICBjaGlsZHJlbjogUmVhY3ROb2RlXG59XG5cbmV4cG9ydCBjb25zdCBNb2RhbFBhbmVsQ29udGVudCA9ICh7IGNsYXNzTmFtZSwgY2hpbGRyZW4gfTogTW9kYWxQYW5lbENvbnRlbnQpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8c2VjdGlvblxuICAgICAgY3NzPXtjc3NgXG4gICAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICAgIGZvbnQtc2l6ZTogMTRweDtcbiAgICAgICAgbGluZS1oZWlnaHQ6IDE4cHg7XG4gICAgICAgIGZvbnQtd2VpZ2h0OiA0MDA7XG4gICAgICAgIGZsZXg6IDEgMSBhdXRvO1xuICAgICAgICBvdmVyZmxvdzogYXV0bztcbiAgICAgICAgLXdlYmtpdC1vdmVyZmxvdy1zY3JvbGxpbmc6IHRvdWNoO1xuICAgICAgYH1cbiAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgID5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L3NlY3Rpb24+XG4gIClcbn1cblxuZXhwb3J0IHR5cGUgTW9kYWxQYW5lbEZvb3RlclByb3BzID0ge1xuICAvKipcbiAgICogY2xhc3NOYW1lIHRvIGJlIGFzc2lnbmVkIHRvIGNvbXBvbmVudFxuICAgKi9cbiAgY2xhc3NOYW1lPzogc3RyaW5nXG4gIGNoaWxkcmVuOiBSZWFjdE5vZGVcbn1cblxuZXhwb3J0IGNvbnN0IE1vZGFsUGFuZWxGb290ZXIgPSAoeyBjbGFzc05hbWUsIGNoaWxkcmVuIH06IE1vZGFsUGFuZWxGb290ZXJQcm9wcykgPT4ge1xuICByZXR1cm4gKFxuICAgIDxmb290ZXJcbiAgICAgIGNzcz17Y3NzYFxuICAgICAgICBmbGV4OiAwIDAgYXV0bztcbiAgICAgIGB9XG4gICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICA+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9mb290ZXI+XG4gIClcbn1cbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+const ModalPanelFooter = ({
+  className,
+  children
+}) => {
+  return (0, _react2.jsx)("footer", {
+    css: _ref,
+    className: className
+  }, children);
+};
+exports.ModalPanelFooter = ModalPanelFooter;

package/cjs/modal/ReactModalWrapper.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import ReactModal from 'react-modal';
+export declare type ReactModalWrapperProps = ReactModal.Props & {
+    className?: string;
+    children?: React.ReactNode;
+};
+export declare const ReactModalWrapper: ({ className, ...rest }: ReactModalWrapperProps) => JSX.Element;

package/cjs/modal/ReactModalWrapper.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReactModalWrapper = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactModal = _interopRequireDefault(require("react-modal"));
+var _react2 = require("@emotion/react");
+const _excluded = ["className"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+const ReactModalWrapper = _ref => {
+  let className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  const classArr = className ? className.split(' ') : ['__modal'];
+  const append = str => classArr.join(str + ' ') + str;
+  return (0, _react2.jsx)(_reactModal.default, _extends({
+    closeTimeoutMS: 200,
+    className: {
+      base: append('__content'),
+      afterOpen: append('__content--after-open'),
+      beforeClose: append('__content--before-close')
+    },
+    portalClassName: append(''),
+    overlayClassName: {
+      base: append('__overlay '),
+      afterOpen: append('__overlay--after-open'),
+      beforeClose: append('__overlay--before-close')
+    }
+  }, rest));
+};
+exports.ReactModalWrapper = ReactModalWrapper;

package/cjs/modal/index.d.ts

@@ -0,0 +1,11 @@
+export * from './Modal';
+export { default as ModalDialog } from './ModalDialog';
+export * from './ModalDialog';
+export * from './ModalCloseButton';
+export * from './ModalHeader';
+export * from './ModalFooter';
+export * from './ModalBody';
+export * from './ModalHeadline';
+export { default as ModalAction } from './ModalAction';
+export { default as ModalActionsContainer } from './ModalActionsContainer';
+export * from './ModalPanel';

package/cjs/modal/index.js

@@ -0,0 +1,128 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  ModalDialog: true,
+  ModalAction: true,
+  ModalActionsContainer: true
+};
+Object.defineProperty(exports, "ModalAction", {
+  enumerable: true,
+  get: function get() {
+    return _ModalAction.default;
+  }
+});
+Object.defineProperty(exports, "ModalActionsContainer", {
+  enumerable: true,
+  get: function get() {
+    return _ModalActionsContainer.default;
+  }
+});
+Object.defineProperty(exports, "ModalDialog", {
+  enumerable: true,
+  get: function get() {
+    return _ModalDialog.default;
+  }
+});
+var _Modal = require("./Modal");
+Object.keys(_Modal).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Modal[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Modal[key];
+    }
+  });
+});
+var _ModalDialog = _interopRequireWildcard(require("./ModalDialog"));
+Object.keys(_ModalDialog).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ModalDialog[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ModalDialog[key];
+    }
+  });
+});
+var _ModalCloseButton = require("./ModalCloseButton");
+Object.keys(_ModalCloseButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ModalCloseButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ModalCloseButton[key];
+    }
+  });
+});
+var _ModalHeader = require("./ModalHeader");
+Object.keys(_ModalHeader).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ModalHeader[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ModalHeader[key];
+    }
+  });
+});
+var _ModalFooter = require("./ModalFooter");
+Object.keys(_ModalFooter).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ModalFooter[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ModalFooter[key];
+    }
+  });
+});
+var _ModalBody = require("./ModalBody");
+Object.keys(_ModalBody).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ModalBody[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ModalBody[key];
+    }
+  });
+});
+var _ModalHeadline = require("./ModalHeadline");
+Object.keys(_ModalHeadline).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ModalHeadline[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ModalHeadline[key];
+    }
+  });
+});
+var _ModalAction = _interopRequireDefault(require("./ModalAction"));
+var _ModalActionsContainer = _interopRequireDefault(require("./ModalActionsContainer"));
+var _ModalPanel = require("./ModalPanel");
+Object.keys(_ModalPanel).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ModalPanel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ModalPanel[key];
+    }
+  });
+});
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }

package/index.d.ts

@@ -0,0 +1 @@
+export * from './modal';

package/index.js

@@ -0,0 +1 @@
+export * from './modal';

package/modal/Modal.d.ts

@@ -0,0 +1,93 @@
+import React from 'react';
+import { ModalSizes, ModalVariation, Backdrop, BackdropVariant } from './ModalDialog';
+export declare type ModalProps = React.PropsWithChildren<{
+    /**
+     * If set to `true` the modal is shown
+     */
+    isOpen: boolean;
+    /**
+     * Close the Modal after invoking the provided callback.
+     */
+    onRequestClose?: () => void;
+    /**
+     * Modal closes on overlay click.
+     */
+    shouldCloseOnOverlayClick?: boolean;
+    /**
+     * Modal closes on ESC key.
+     */
+    shouldCloseOnEsc?: boolean;
+    /**
+     * Gives the user the possibility to close the Modal.
+     */
+    showClose?: boolean;
+    /**
+     * Class name to be added to the Modal.
+     */
+    className?: string;
+    /**
+     * Add heading on the Modal.
+     */
+    heading?: React.ReactNode;
+    /**
+     * Class name to be added to the header of the Modal.
+     */
+    headerClassName?: string;
+    /**
+     * *DEPRECATED* use `sizes` instead.
+     *
+     * Fullscreen only has an effect on mobile.
+     */
+    variation?: ModalVariation;
+    /**
+     * Add or remove padding inside the Modal.
+     */
+    noContentPadding?: boolean;
+    /**
+     * Add a z-index prop to modal to specify the stack order.
+     */
+    zIndex?: number;
+    /**
+     * Removes the modal from the default navigation flow and also allows it to receive programmatic focus.
+     */
+    closeTabIndex?: number;
+    /**
+     * Specifies the ariaLabel to be added to the close(x) button
+     */
+    closeLabel?: string;
+    /**
+     * Display content in a column direction.
+     */
+    column?: boolean;
+    /**
+     * Actions to be displayed inside the Modal.
+     */
+    actions?: React.ReactNode;
+    /**
+     * Sizes (width) of the modal for the different breakpoints.
+     * Apart from normal css units a special value of `fullscreen` is also
+     * supported.
+     * @example
+     *  sizes={{ s: 'fullscreen', m: 'fullscreen', l: '80%', xl: '80%', xxl: '80%' }}
+     */
+    sizes?: ModalSizes;
+    /**
+     * If set to `true` the modal will no be vertical centered.
+     * When not specified the modal will be fixed for small devices but centered when larger.
+     */
+    fixedTopPosition?: boolean;
+    /**
+     * If `true` the modal will render even if not open.
+     */
+    renderWhenClosed?: boolean;
+    /**
+     * Overlay backdrop
+     */
+    backdrop?: Backdrop;
+    /**
+     * Overlay variant. Either transparent or solid.
+     */
+    backdropVariant?: BackdropVariant;
+}>;
+export declare const Modal: ({ showClose, heading, headerClassName, noContentPadding, onRequestClose, children, closeTabIndex, closeLabel, column, zIndex, sizes, renderWhenClosed, backdrop, backdropVariant, actions, ...rest }: ModalProps) => JSX.Element;
+export default Modal;

package/modal/Modal.js

@@ -0,0 +1,60 @@
+var _excluded = ["showClose", "heading", "headerClassName", "noContentPadding", "onRequestClose", "children", "closeTabIndex", "closeLabel", "column", "zIndex", "sizes", "renderWhenClosed", "backdrop", "backdropVariant", "actions"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) { ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) { o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) { if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } } return t; }
+import React from 'react';
+import ModalHeader from './ModalHeader';
+import ModalCloseButton from './ModalCloseButton';
+import ModalDialog, { defaultProps } from './ModalDialog';
+import ModalBody from './ModalBody';
+import ModalActionsContainer from './ModalActionsContainer';
+import ModalHeadline from './ModalHeadline';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var Modal = function Modal(_ref) {
+  var _ref$showClose = _ref.showClose,
+    showClose = _ref$showClose === void 0 ? true : _ref$showClose,
+    heading = _ref.heading,
+    headerClassName = _ref.headerClassName,
+    _ref$noContentPadding = _ref.noContentPadding,
+    noContentPadding = _ref$noContentPadding === void 0 ? false : _ref$noContentPadding,
+    onRequestClose = _ref.onRequestClose,
+    children = _ref.children,
+    _ref$closeTabIndex = _ref.closeTabIndex,
+    closeTabIndex = _ref$closeTabIndex === void 0 ? -1 : _ref$closeTabIndex,
+    _ref$closeLabel = _ref.closeLabel,
+    closeLabel = _ref$closeLabel === void 0 ? 'Close' : _ref$closeLabel,
+    _ref$column = _ref.column,
+    column = _ref$column === void 0 ? false : _ref$column,
+    _ref$zIndex = _ref.zIndex,
+    zIndex = _ref$zIndex === void 0 ? defaultProps.zIndex : _ref$zIndex,
+    _ref$sizes = _ref.sizes,
+    sizes = _ref$sizes === void 0 ? defaultProps.sizes : _ref$sizes,
+    _ref$renderWhenClosed = _ref.renderWhenClosed,
+    renderWhenClosed = _ref$renderWhenClosed === void 0 ? defaultProps.renderWhenClosed : _ref$renderWhenClosed,
+    _ref$backdrop = _ref.backdrop,
+    backdrop = _ref$backdrop === void 0 ? defaultProps.backdrop : _ref$backdrop,
+    _ref$backdropVariant = _ref.backdropVariant,
+    backdropVariant = _ref$backdropVariant === void 0 ? defaultProps.backdropVariant : _ref$backdropVariant,
+    actions = _ref.actions,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var showHeader = heading !== undefined || showClose;
+  return ___EmotionJSX(ModalDialog, _extends({
+    onRequestClose: onRequestClose,
+    sizes: sizes,
+    renderWhenClosed: renderWhenClosed,
+    backdrop: backdrop,
+    backdropVariant: backdropVariant
+  }, rest), showHeader && ___EmotionJSX(ModalHeader, {
+    className: headerClassName
+  }, ___EmotionJSX(ModalHeadline, null, heading), showClose && ___EmotionJSX(ModalCloseButton, {
+    onRequestClose: onRequestClose,
+    tabIndex: closeTabIndex,
+    closeLabel: closeLabel
+  })), ___EmotionJSX(ModalBody, {
+    hasPadding: !noContentPadding,
+    column: column
+  }, children), ___EmotionJSX(ModalActionsContainer, {
+    actions: actions
+  }));
+};
+export default Modal;

package/modal/ModalAction.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ButtonProps } from '@dfds-ui/react-components';
+export declare type ModalActionVariation = 'primary' | 'secondary';
+export declare type ModalActionProps = {
+    actionVariation?: ModalActionVariation;
+    onClick?: () => void;
+    /**
+     * Class name to be assigned to the button
+     */
+    className?: string;
+    /**
+     * HTML tag or custom component being rendered
+     */
+    as?: React.ElementType;
+} & Omit<ButtonProps, 'variation'>;
+export declare const ModalAction: React.FunctionComponent<ModalActionProps>;
+export default ModalAction;

package/modal/ModalAction.js

@@ -0,0 +1,28 @@
+var _excluded = ["actionVariation"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) { ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) { o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) { if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } } return t; }
+import React from 'react';
+import { css } from '@emotion/react';
+import { theme } from '@dfds-ui/theme';
+import { typography } from '@dfds-ui/typography';
+import { Button } from '@dfds-ui/react-components';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var getVariationStyle = function getVariationStyle(actionVariation) {
+  if (actionVariation === 'primary') {
+    return /*#__PURE__*/css("color:", theme.colors.text.light.primary, ";background:", theme.colors.secondary.main, ";margin-right:", theme.spacing.s, ";&:hover{color:", theme.colors.text.light.primary, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:getVariationStyle;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9tb2RhbC9Nb2RhbEFjdGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUJjIiwiZmlsZSI6Ii4uLy4uL3NyYy9tb2RhbC9Nb2RhbEFjdGlvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSAnQGRmZHMtdWkvdGhlbWUnXG5pbXBvcnQgeyB0eXBvZ3JhcGh5IH0gZnJvbSAnQGRmZHMtdWkvdHlwb2dyYXBoeSdcbmltcG9ydCB7IEJ1dHRvbiwgQnV0dG9uUHJvcHMgfSBmcm9tICdAZGZkcy11aS9yZWFjdC1jb21wb25lbnRzJ1xuXG5leHBvcnQgdHlwZSBNb2RhbEFjdGlvblZhcmlhdGlvbiA9ICdwcmltYXJ5JyB8ICdzZWNvbmRhcnknXG5cbmV4cG9ydCB0eXBlIE1vZGFsQWN0aW9uUHJvcHMgPSB7XG4gIGFjdGlvblZhcmlhdGlvbj86IE1vZGFsQWN0aW9uVmFyaWF0aW9uXG4gIG9uQ2xpY2s/OiAoKSA9PiB2b2lkXG4gIC8qKlxuICAgKiBDbGFzcyBuYW1lIHRvIGJlIGFzc2lnbmVkIHRvIHRoZSBidXR0b25cbiAgICovXG4gIGNsYXNzTmFtZT86IHN0cmluZ1xuICAvKipcbiAgICogSFRNTCB0YWcgb3IgY3VzdG9tIGNvbXBvbmVudCBiZWluZyByZW5kZXJlZFxuICAgKi9cbiAgYXM/OiBSZWFjdC5FbGVtZW50VHlwZVxufSAmIE9taXQ8QnV0dG9uUHJvcHMsICd2YXJpYXRpb24nPlxuXG5jb25zdCBnZXRWYXJpYXRpb25TdHlsZSA9IChhY3Rpb25WYXJpYXRpb246IE1vZGFsQWN0aW9uVmFyaWF0aW9uKSA9PiB7XG4gIGlmIChhY3Rpb25WYXJpYXRpb24gPT09ICdwcmltYXJ5Jykge1xuICAgIHJldHVybiBjc3NgXG4gICAgICBjb2xvcjogJHt0aGVtZS5jb2xvcnMudGV4dC5saWdodC5wcmltYXJ5fTtcbiAgICAgIGJhY2tncm91bmQ6ICR7dGhlbWUuY29sb3JzLnNlY29uZGFyeS5tYWlufTtcbiAgICAgIG1hcmdpbi1yaWdodDogJHt0aGVtZS5zcGFjaW5nLnN9O1xuXG4gICAgICAmOmhvdmVyIHtcbiAgICAgICAgY29sb3I6ICR7dGhlbWUuY29sb3JzLnRleHQubGlnaHQucHJpbWFyeX07XG4gICAgICB9XG4gICAgYFxuICB9IGVsc2Uge1xuICAgIHJldHVybiBjc3NgXG4gICAgICBib3JkZXI6IDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5zZWNvbmRhcnkubWFpbn07XG4gICAgYFxuICB9XG59XG5cbmV4cG9ydCBjb25zdCBNb2RhbEFjdGlvbjogUmVhY3QuRnVuY3Rpb25Db21wb25lbnQ8TW9kYWxBY3Rpb25Qcm9wcz4gPSAoeyBhY3Rpb25WYXJpYXRpb24gPSAncHJpbWFyeScsIC4uLnJlc3QgfSkgPT4ge1xuICByZXR1cm4gKFxuICAgIDxCdXR0b25cbiAgICAgIHZhcmlhdGlvbj1cInRleHRcIlxuICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgJHt0eXBvZ3JhcGh5LmFjdGlvbn07XG4gICAgICAgIGZsZXg6IGF1dG87XG4gICAgICAgIGZsZXgtYmFzaXM6IGF1dG87XG4gICAgICAgIGZsZXgtZ3JvdzogMDtcbiAgICAgICAgbWFyZ2luLWxlZnQ6ICR7dGhlbWUuc3BhY2luZy54c307XG4gICAgICAgIHBhZGRpbmc6IDAgJHt0aGVtZS5zcGFjaW5nLnhzfTtcbiAgICAgICAgJHtnZXRWYXJpYXRpb25TdHlsZShhY3Rpb25WYXJpYXRpb24pfVxuICAgICAgYH1cbiAgICAgIHsuLi5yZXN0fVxuICAgIC8+XG4gIClcbn1cblxuZXhwb3J0IGRlZmF1bHQgTW9kYWxBY3Rpb25cbiJdfQ== */");
+  } else {
+    return /*#__PURE__*/css("border:1px solid ", theme.colors.secondary.main, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:getVariationStyle;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9tb2RhbC9Nb2RhbEFjdGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUNjIiwiZmlsZSI6Ii4uLy4uL3NyYy9tb2RhbC9Nb2RhbEFjdGlvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSAnQGRmZHMtdWkvdGhlbWUnXG5pbXBvcnQgeyB0eXBvZ3JhcGh5IH0gZnJvbSAnQGRmZHMtdWkvdHlwb2dyYXBoeSdcbmltcG9ydCB7IEJ1dHRvbiwgQnV0dG9uUHJvcHMgfSBmcm9tICdAZGZkcy11aS9yZWFjdC1jb21wb25lbnRzJ1xuXG5leHBvcnQgdHlwZSBNb2RhbEFjdGlvblZhcmlhdGlvbiA9ICdwcmltYXJ5JyB8ICdzZWNvbmRhcnknXG5cbmV4cG9ydCB0eXBlIE1vZGFsQWN0aW9uUHJvcHMgPSB7XG4gIGFjdGlvblZhcmlhdGlvbj86IE1vZGFsQWN0aW9uVmFyaWF0aW9uXG4gIG9uQ2xpY2s/OiAoKSA9PiB2b2lkXG4gIC8qKlxuICAgKiBDbGFzcyBuYW1lIHRvIGJlIGFzc2lnbmVkIHRvIHRoZSBidXR0b25cbiAgICovXG4gIGNsYXNzTmFtZT86IHN0cmluZ1xuICAvKipcbiAgICogSFRNTCB0YWcgb3IgY3VzdG9tIGNvbXBvbmVudCBiZWluZyByZW5kZXJlZFxuICAgKi9cbiAgYXM/OiBSZWFjdC5FbGVtZW50VHlwZVxufSAmIE9taXQ8QnV0dG9uUHJvcHMsICd2YXJpYXRpb24nPlxuXG5jb25zdCBnZXRWYXJpYXRpb25TdHlsZSA9IChhY3Rpb25WYXJpYXRpb246IE1vZGFsQWN0aW9uVmFyaWF0aW9uKSA9PiB7XG4gIGlmIChhY3Rpb25WYXJpYXRpb24gPT09ICdwcmltYXJ5Jykge1xuICAgIHJldHVybiBjc3NgXG4gICAgICBjb2xvcjogJHt0aGVtZS5jb2xvcnMudGV4dC5saWdodC5wcmltYXJ5fTtcbiAgICAgIGJhY2tncm91bmQ6ICR7dGhlbWUuY29sb3JzLnNlY29uZGFyeS5tYWlufTtcbiAgICAgIG1hcmdpbi1yaWdodDogJHt0aGVtZS5zcGFjaW5nLnN9O1xuXG4gICAgICAmOmhvdmVyIHtcbiAgICAgICAgY29sb3I6ICR7dGhlbWUuY29sb3JzLnRleHQubGlnaHQucHJpbWFyeX07XG4gICAgICB9XG4gICAgYFxuICB9IGVsc2Uge1xuICAgIHJldHVybiBjc3NgXG4gICAgICBib3JkZXI6IDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5zZWNvbmRhcnkubWFpbn07XG4gICAgYFxuICB9XG59XG5cbmV4cG9ydCBjb25zdCBNb2RhbEFjdGlvbjogUmVhY3QuRnVuY3Rpb25Db21wb25lbnQ8TW9kYWxBY3Rpb25Qcm9wcz4gPSAoeyBhY3Rpb25WYXJpYXRpb24gPSAncHJpbWFyeScsIC4uLnJlc3QgfSkgPT4ge1xuICByZXR1cm4gKFxuICAgIDxCdXR0b25cbiAgICAgIHZhcmlhdGlvbj1cInRleHRcIlxuICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgJHt0eXBvZ3JhcGh5LmFjdGlvbn07XG4gICAgICAgIGZsZXg6IGF1dG87XG4gICAgICAgIGZsZXgtYmFzaXM6IGF1dG87XG4gICAgICAgIGZsZXgtZ3JvdzogMDtcbiAgICAgICAgbWFyZ2luLWxlZnQ6ICR7dGhlbWUuc3BhY2luZy54c307XG4gICAgICAgIHBhZGRpbmc6IDAgJHt0aGVtZS5zcGFjaW5nLnhzfTtcbiAgICAgICAgJHtnZXRWYXJpYXRpb25TdHlsZShhY3Rpb25WYXJpYXRpb24pfVxuICAgICAgYH1cbiAgICAgIHsuLi5yZXN0fVxuICAgIC8+XG4gIClcbn1cblxuZXhwb3J0IGRlZmF1bHQgTW9kYWxBY3Rpb25cbiJdfQ== */");
+  }
+};
+export var ModalAction = function ModalAction(_ref) {
+  var _ref$actionVariation = _ref.actionVariation,
+    actionVariation = _ref$actionVariation === void 0 ? 'primary' : _ref$actionVariation,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return ___EmotionJSX(Button, _extends({
+    variation: "text",
+    type: "button",
+    css: /*#__PURE__*/css(typography.action, ";flex:auto;flex-basis:auto;flex-grow:0;margin-left:", theme.spacing.xs, ";padding:0 ", theme.spacing.xs, ";", getVariationStyle(actionVariation), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:ModalAction;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9tb2RhbC9Nb2RhbEFjdGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNENjIiwiZmlsZSI6Ii4uLy4uL3NyYy9tb2RhbC9Nb2RhbEFjdGlvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSAnQGRmZHMtdWkvdGhlbWUnXG5pbXBvcnQgeyB0eXBvZ3JhcGh5IH0gZnJvbSAnQGRmZHMtdWkvdHlwb2dyYXBoeSdcbmltcG9ydCB7IEJ1dHRvbiwgQnV0dG9uUHJvcHMgfSBmcm9tICdAZGZkcy11aS9yZWFjdC1jb21wb25lbnRzJ1xuXG5leHBvcnQgdHlwZSBNb2RhbEFjdGlvblZhcmlhdGlvbiA9ICdwcmltYXJ5JyB8ICdzZWNvbmRhcnknXG5cbmV4cG9ydCB0eXBlIE1vZGFsQWN0aW9uUHJvcHMgPSB7XG4gIGFjdGlvblZhcmlhdGlvbj86IE1vZGFsQWN0aW9uVmFyaWF0aW9uXG4gIG9uQ2xpY2s/OiAoKSA9PiB2b2lkXG4gIC8qKlxuICAgKiBDbGFzcyBuYW1lIHRvIGJlIGFzc2lnbmVkIHRvIHRoZSBidXR0b25cbiAgICovXG4gIGNsYXNzTmFtZT86IHN0cmluZ1xuICAvKipcbiAgICogSFRNTCB0YWcgb3IgY3VzdG9tIGNvbXBvbmVudCBiZWluZyByZW5kZXJlZFxuICAgKi9cbiAgYXM/OiBSZWFjdC5FbGVtZW50VHlwZVxufSAmIE9taXQ8QnV0dG9uUHJvcHMsICd2YXJpYXRpb24nPlxuXG5jb25zdCBnZXRWYXJpYXRpb25TdHlsZSA9IChhY3Rpb25WYXJpYXRpb246IE1vZGFsQWN0aW9uVmFyaWF0aW9uKSA9PiB7XG4gIGlmIChhY3Rpb25WYXJpYXRpb24gPT09ICdwcmltYXJ5Jykge1xuICAgIHJldHVybiBjc3NgXG4gICAgICBjb2xvcjogJHt0aGVtZS5jb2xvcnMudGV4dC5saWdodC5wcmltYXJ5fTtcbiAgICAgIGJhY2tncm91bmQ6ICR7dGhlbWUuY29sb3JzLnNlY29uZGFyeS5tYWlufTtcbiAgICAgIG1hcmdpbi1yaWdodDogJHt0aGVtZS5zcGFjaW5nLnN9O1xuXG4gICAgICAmOmhvdmVyIHtcbiAgICAgICAgY29sb3I6ICR7dGhlbWUuY29sb3JzLnRleHQubGlnaHQucHJpbWFyeX07XG4gICAgICB9XG4gICAgYFxuICB9IGVsc2Uge1xuICAgIHJldHVybiBjc3NgXG4gICAgICBib3JkZXI6IDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5zZWNvbmRhcnkubWFpbn07XG4gICAgYFxuICB9XG59XG5cbmV4cG9ydCBjb25zdCBNb2RhbEFjdGlvbjogUmVhY3QuRnVuY3Rpb25Db21wb25lbnQ8TW9kYWxBY3Rpb25Qcm9wcz4gPSAoeyBhY3Rpb25WYXJpYXRpb24gPSAncHJpbWFyeScsIC4uLnJlc3QgfSkgPT4ge1xuICByZXR1cm4gKFxuICAgIDxCdXR0b25cbiAgICAgIHZhcmlhdGlvbj1cInRleHRcIlxuICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgJHt0eXBvZ3JhcGh5LmFjdGlvbn07XG4gICAgICAgIGZsZXg6IGF1dG87XG4gICAgICAgIGZsZXgtYmFzaXM6IGF1dG87XG4gICAgICAgIGZsZXgtZ3JvdzogMDtcbiAgICAgICAgbWFyZ2luLWxlZnQ6ICR7dGhlbWUuc3BhY2luZy54c307XG4gICAgICAgIHBhZGRpbmc6IDAgJHt0aGVtZS5zcGFjaW5nLnhzfTtcbiAgICAgICAgJHtnZXRWYXJpYXRpb25TdHlsZShhY3Rpb25WYXJpYXRpb24pfVxuICAgICAgYH1cbiAgICAgIHsuLi5yZXN0fVxuICAgIC8+XG4gIClcbn1cblxuZXhwb3J0IGRlZmF1bHQgTW9kYWxBY3Rpb25cbiJdfQ== */")
+  }, rest));
+};
+export default ModalAction;

package/modal/ModalActionsContainer.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare type ModalActionsProps = {
+    /**
+     * Actions to be displayed at the bottom of the modal
+     */
+    actions?: React.ReactNode;
+};
+declare const ModalActionsContainer: React.FunctionComponent<ModalActionsProps>;
+export default ModalActionsContainer;