@dfds-ui/modal 2.2.0-alpha.b94ad8b5 → 2.2.0-alpha.bfcaf58a

package/cjs/modal/Modal.d.ts

@@ -1,6 +1,10 @@
 import React from 'react';
 import { ModalSizes, ModalVariation, Backdrop, BackdropVariant } from './ModalDialog';
-export declare type ModalProps = React.PropsWithChildren<{
+export type ModalProps = {
+    /**
+     * Content to be displayed inside the Modal.
+     */
+    children?: React.ReactNode;
     /**
      * If set to `true` the modal is shown
      */
@@ -88,6 +92,6 @@ export declare type ModalProps = React.PropsWithChildren<{
      * 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) => React.JSX.Element;
 export default Modal;

package/cjs/modal/Modal.js

@@ -11,10 +11,9 @@ var _ModalDialog = _interopRequireWildcard(require("./ModalDialog"));
 var _ModalBody = _interopRequireDefault(require("./ModalBody"));
 var _ModalActionsContainer = _interopRequireDefault(require("./ModalActionsContainer"));
 var _ModalHeadline = _interopRequireDefault(require("./ModalHeadline"));
-var _react2 = require("@emotion/react");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (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); }
 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); }
 const Modal = ({
   showClose = true,
   heading,
@@ -34,25 +33,30 @@ const Modal = ({
   ...rest
 }) => {
   const showHeader = heading !== undefined || showClose;
-  return (0, _react2.jsx)(_ModalDialog.default, _extends({
+  return (0, _jsxRuntime.jsxs)(_ModalDialog.default, {
     onRequestClose: onRequestClose,
     sizes: sizes,
     renderWhenClosed: renderWhenClosed,
     backdrop: backdrop,
-    backdropVariant: backdropVariant
-  }, rest), showHeader && (0, _react2.jsx)(_ModalHeader.default, {
-    className: headerClassName
-  }, (0, _react2.jsx)(_ModalHeadline.default, null, heading), showClose && (0, _react2.jsx)(_ModalCloseButton.default, {
-    onRequestClose: onRequestClose,
-    tabIndex: closeTabIndex,
-    closeLabel: closeLabel
-  })), (0, _react2.jsx)(_ModalBody.default, {
-    hasPadding: !noContentPadding,
-    column: column
-  }, children), (0, _react2.jsx)(_ModalActionsContainer.default, {
-    actions: actions
-  }));
+    backdropVariant: backdropVariant,
+    ...rest,
+    children: [showHeader && (0, _jsxRuntime.jsxs)(_ModalHeader.default, {
+      className: headerClassName,
+      children: [(0, _jsxRuntime.jsx)(_ModalHeadline.default, {
+        children: heading
+      }), showClose && (0, _jsxRuntime.jsx)(_ModalCloseButton.default, {
+        onRequestClose: onRequestClose,
+        tabIndex: closeTabIndex,
+        closeLabel: closeLabel
+      })]
+    }), (0, _jsxRuntime.jsx)(_ModalBody.default, {
+      hasPadding: !noContentPadding,
+      column: column,
+      children: children
+    }), (0, _jsxRuntime.jsx)(_ModalActionsContainer.default, {
+      actions: actions
+    })]
+  });
 };
 exports.Modal = Modal;
-var _default = Modal;
-exports.default = _default;
+var _default = exports.default = Modal;

package/cjs/modal/ModalAction.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ButtonProps } from '@dfds-ui/react-components';
-export declare type ModalActionVariation = 'primary' | 'secondary';
-export declare type ModalActionProps = {
+export type ModalActionVariation = 'primary' | 'secondary';
+export type ModalActionProps = {
     actionVariation?: ModalActionVariation;
     onClick?: () => void;
     /**

package/cjs/modal/ModalAction.js

@@ -9,8 +9,8 @@ var _react2 = require("@emotion/react");
 var _theme = require("@dfds-ui/theme");
 var _typography = require("@dfds-ui/typography");
 var _reactComponents = require("@dfds-ui/react-components");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 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); }
 const getVariationStyle = actionVariation => {
   if (actionVariation === 'primary') {
     return /*#__PURE__*/(0, _react2.css)("color:", _theme.theme.colors.text.light.primary, ";background:", _theme.theme.colors.secondary.main, ";margin-right:", _theme.theme.spacing.s, ";&:hover{color:", _theme.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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9tb2RhbC9Nb2RhbEFjdGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUJjIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9tb2RhbC9Nb2RhbEFjdGlvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSAnQGRmZHMtdWkvdGhlbWUnXG5pbXBvcnQgeyB0eXBvZ3JhcGh5IH0gZnJvbSAnQGRmZHMtdWkvdHlwb2dyYXBoeSdcbmltcG9ydCB7IEJ1dHRvbiwgQnV0dG9uUHJvcHMgfSBmcm9tICdAZGZkcy11aS9yZWFjdC1jb21wb25lbnRzJ1xuXG5leHBvcnQgdHlwZSBNb2RhbEFjdGlvblZhcmlhdGlvbiA9ICdwcmltYXJ5JyB8ICdzZWNvbmRhcnknXG5cbmV4cG9ydCB0eXBlIE1vZGFsQWN0aW9uUHJvcHMgPSB7XG4gIGFjdGlvblZhcmlhdGlvbj86IE1vZGFsQWN0aW9uVmFyaWF0aW9uXG4gIG9uQ2xpY2s/OiAoKSA9PiB2b2lkXG4gIC8qKlxuICAgKiBDbGFzcyBuYW1lIHRvIGJlIGFzc2lnbmVkIHRvIHRoZSBidXR0b25cbiAgICovXG4gIGNsYXNzTmFtZT86IHN0cmluZ1xuICAvKipcbiAgICogSFRNTCB0YWcgb3IgY3VzdG9tIGNvbXBvbmVudCBiZWluZyByZW5kZXJlZFxuICAgKi9cbiAgYXM/OiBSZWFjdC5FbGVtZW50VHlwZVxufSAmIE9taXQ8QnV0dG9uUHJvcHMsICd2YXJpYXRpb24nPlxuXG5jb25zdCBnZXRWYXJpYXRpb25TdHlsZSA9IChhY3Rpb25WYXJpYXRpb246IE1vZGFsQWN0aW9uVmFyaWF0aW9uKSA9PiB7XG4gIGlmIChhY3Rpb25WYXJpYXRpb24gPT09ICdwcmltYXJ5Jykge1xuICAgIHJldHVybiBjc3NgXG4gICAgICBjb2xvcjogJHt0aGVtZS5jb2xvcnMudGV4dC5saWdodC5wcmltYXJ5fTtcbiAgICAgIGJhY2tncm91bmQ6ICR7dGhlbWUuY29sb3JzLnNlY29uZGFyeS5tYWlufTtcbiAgICAgIG1hcmdpbi1yaWdodDogJHt0aGVtZS5zcGFjaW5nLnN9O1xuXG4gICAgICAmOmhvdmVyIHtcbiAgICAgICAgY29sb3I6ICR7dGhlbWUuY29sb3JzLnRleHQubGlnaHQucHJpbWFyeX07XG4gICAgICB9XG4gICAgYFxuICB9IGVsc2Uge1xuICAgIHJldHVybiBjc3NgXG4gICAgICBib3JkZXI6IDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5zZWNvbmRhcnkubWFpbn07XG4gICAgYFxuICB9XG59XG5cbmV4cG9ydCBjb25zdCBNb2RhbEFjdGlvbjogUmVhY3QuRnVuY3Rpb25Db21wb25lbnQ8TW9kYWxBY3Rpb25Qcm9wcz4gPSAoeyBhY3Rpb25WYXJpYXRpb24gPSAncHJpbWFyeScsIC4uLnJlc3QgfSkgPT4ge1xuICByZXR1cm4gKFxuICAgIDxCdXR0b25cbiAgICAgIHZhcmlhdGlvbj1cInRleHRcIlxuICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgJHt0eXBvZ3JhcGh5LmFjdGlvbn07XG4gICAgICAgIGZsZXg6IGF1dG87XG4gICAgICAgIGZsZXgtYmFzaXM6IGF1dG87XG4gICAgICAgIGZsZXgtZ3JvdzogMDtcbiAgICAgICAgbWFyZ2luLWxlZnQ6ICR7dGhlbWUuc3BhY2luZy54c307XG4gICAgICAgIHBhZGRpbmc6IDAgJHt0aGVtZS5zcGFjaW5nLnhzfTtcbiAgICAgICAgJHtnZXRWYXJpYXRpb25TdHlsZShhY3Rpb25WYXJpYXRpb24pfVxuICAgICAgYH1cbiAgICAgIHsuLi5yZXN0fVxuICAgIC8+XG4gIClcbn1cblxuZXhwb3J0IGRlZmF1bHQgTW9kYWxBY3Rpb25cbiJdfQ== */");
@@ -22,12 +22,12 @@ const ModalAction = ({
   actionVariation = 'primary',
   ...rest
 }) => {
-  return (0, _react2.jsx)(_reactComponents.Button, _extends({
+  return (0, _jsxRuntime.jsx)(_reactComponents.Button, {
     variation: "text",
     type: "button",
-    css: /*#__PURE__*/(0, _react2.css)(_typography.typography.action, ";flex:auto;flex-basis:auto;flex-grow:0;margin-left:", _theme.theme.spacing.xs, ";padding:0 ", _theme.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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9tb2RhbC9Nb2RhbEFjdGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNENjIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9tb2RhbC9Nb2RhbEFjdGlvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSAnQGRmZHMtdWkvdGhlbWUnXG5pbXBvcnQgeyB0eXBvZ3JhcGh5IH0gZnJvbSAnQGRmZHMtdWkvdHlwb2dyYXBoeSdcbmltcG9ydCB7IEJ1dHRvbiwgQnV0dG9uUHJvcHMgfSBmcm9tICdAZGZkcy11aS9yZWFjdC1jb21wb25lbnRzJ1xuXG5leHBvcnQgdHlwZSBNb2RhbEFjdGlvblZhcmlhdGlvbiA9ICdwcmltYXJ5JyB8ICdzZWNvbmRhcnknXG5cbmV4cG9ydCB0eXBlIE1vZGFsQWN0aW9uUHJvcHMgPSB7XG4gIGFjdGlvblZhcmlhdGlvbj86IE1vZGFsQWN0aW9uVmFyaWF0aW9uXG4gIG9uQ2xpY2s/OiAoKSA9PiB2b2lkXG4gIC8qKlxuICAgKiBDbGFzcyBuYW1lIHRvIGJlIGFzc2lnbmVkIHRvIHRoZSBidXR0b25cbiAgICovXG4gIGNsYXNzTmFtZT86IHN0cmluZ1xuICAvKipcbiAgICogSFRNTCB0YWcgb3IgY3VzdG9tIGNvbXBvbmVudCBiZWluZyByZW5kZXJlZFxuICAgKi9cbiAgYXM/OiBSZWFjdC5FbGVtZW50VHlwZVxufSAmIE9taXQ8QnV0dG9uUHJvcHMsICd2YXJpYXRpb24nPlxuXG5jb25zdCBnZXRWYXJpYXRpb25TdHlsZSA9IChhY3Rpb25WYXJpYXRpb246IE1vZGFsQWN0aW9uVmFyaWF0aW9uKSA9PiB7XG4gIGlmIChhY3Rpb25WYXJpYXRpb24gPT09ICdwcmltYXJ5Jykge1xuICAgIHJldHVybiBjc3NgXG4gICAgICBjb2xvcjogJHt0aGVtZS5jb2xvcnMudGV4dC5saWdodC5wcmltYXJ5fTtcbiAgICAgIGJhY2tncm91bmQ6ICR7dGhlbWUuY29sb3JzLnNlY29uZGFyeS5tYWlufTtcbiAgICAgIG1hcmdpbi1yaWdodDogJHt0aGVtZS5zcGFjaW5nLnN9O1xuXG4gICAgICAmOmhvdmVyIHtcbiAgICAgICAgY29sb3I6ICR7dGhlbWUuY29sb3JzLnRleHQubGlnaHQucHJpbWFyeX07XG4gICAgICB9XG4gICAgYFxuICB9IGVsc2Uge1xuICAgIHJldHVybiBjc3NgXG4gICAgICBib3JkZXI6IDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5zZWNvbmRhcnkubWFpbn07XG4gICAgYFxuICB9XG59XG5cbmV4cG9ydCBjb25zdCBNb2RhbEFjdGlvbjogUmVhY3QuRnVuY3Rpb25Db21wb25lbnQ8TW9kYWxBY3Rpb25Qcm9wcz4gPSAoeyBhY3Rpb25WYXJpYXRpb24gPSAncHJpbWFyeScsIC4uLnJlc3QgfSkgPT4ge1xuICByZXR1cm4gKFxuICAgIDxCdXR0b25cbiAgICAgIHZhcmlhdGlvbj1cInRleHRcIlxuICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgJHt0eXBvZ3JhcGh5LmFjdGlvbn07XG4gICAgICAgIGZsZXg6IGF1dG87XG4gICAgICAgIGZsZXgtYmFzaXM6IGF1dG87XG4gICAgICAgIGZsZXgtZ3JvdzogMDtcbiAgICAgICAgbWFyZ2luLWxlZnQ6ICR7dGhlbWUuc3BhY2luZy54c307XG4gICAgICAgIHBhZGRpbmc6IDAgJHt0aGVtZS5zcGFjaW5nLnhzfTtcbiAgICAgICAgJHtnZXRWYXJpYXRpb25TdHlsZShhY3Rpb25WYXJpYXRpb24pfVxuICAgICAgYH1cbiAgICAgIHsuLi5yZXN0fVxuICAgIC8+XG4gIClcbn1cblxuZXhwb3J0IGRlZmF1bHQgTW9kYWxBY3Rpb25cbiJdfQ== */")
-  }, rest));
+    css: /*#__PURE__*/(0, _react2.css)(_typography.typography.action, ";flex:auto;flex-basis:auto;flex-grow:0;margin-left:", _theme.theme.spacing.xs, ";padding:0 ", _theme.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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9tb2RhbC9Nb2RhbEFjdGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNENjIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9tb2RhbC9Nb2RhbEFjdGlvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSAnQGRmZHMtdWkvdGhlbWUnXG5pbXBvcnQgeyB0eXBvZ3JhcGh5IH0gZnJvbSAnQGRmZHMtdWkvdHlwb2dyYXBoeSdcbmltcG9ydCB7IEJ1dHRvbiwgQnV0dG9uUHJvcHMgfSBmcm9tICdAZGZkcy11aS9yZWFjdC1jb21wb25lbnRzJ1xuXG5leHBvcnQgdHlwZSBNb2RhbEFjdGlvblZhcmlhdGlvbiA9ICdwcmltYXJ5JyB8ICdzZWNvbmRhcnknXG5cbmV4cG9ydCB0eXBlIE1vZGFsQWN0aW9uUHJvcHMgPSB7XG4gIGFjdGlvblZhcmlhdGlvbj86IE1vZGFsQWN0aW9uVmFyaWF0aW9uXG4gIG9uQ2xpY2s/OiAoKSA9PiB2b2lkXG4gIC8qKlxuICAgKiBDbGFzcyBuYW1lIHRvIGJlIGFzc2lnbmVkIHRvIHRoZSBidXR0b25cbiAgICovXG4gIGNsYXNzTmFtZT86IHN0cmluZ1xuICAvKipcbiAgICogSFRNTCB0YWcgb3IgY3VzdG9tIGNvbXBvbmVudCBiZWluZyByZW5kZXJlZFxuICAgKi9cbiAgYXM/OiBSZWFjdC5FbGVtZW50VHlwZVxufSAmIE9taXQ8QnV0dG9uUHJvcHMsICd2YXJpYXRpb24nPlxuXG5jb25zdCBnZXRWYXJpYXRpb25TdHlsZSA9IChhY3Rpb25WYXJpYXRpb246IE1vZGFsQWN0aW9uVmFyaWF0aW9uKSA9PiB7XG4gIGlmIChhY3Rpb25WYXJpYXRpb24gPT09ICdwcmltYXJ5Jykge1xuICAgIHJldHVybiBjc3NgXG4gICAgICBjb2xvcjogJHt0aGVtZS5jb2xvcnMudGV4dC5saWdodC5wcmltYXJ5fTtcbiAgICAgIGJhY2tncm91bmQ6ICR7dGhlbWUuY29sb3JzLnNlY29uZGFyeS5tYWlufTtcbiAgICAgIG1hcmdpbi1yaWdodDogJHt0aGVtZS5zcGFjaW5nLnN9O1xuXG4gICAgICAmOmhvdmVyIHtcbiAgICAgICAgY29sb3I6ICR7dGhlbWUuY29sb3JzLnRleHQubGlnaHQucHJpbWFyeX07XG4gICAgICB9XG4gICAgYFxuICB9IGVsc2Uge1xuICAgIHJldHVybiBjc3NgXG4gICAgICBib3JkZXI6IDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5zZWNvbmRhcnkubWFpbn07XG4gICAgYFxuICB9XG59XG5cbmV4cG9ydCBjb25zdCBNb2RhbEFjdGlvbjogUmVhY3QuRnVuY3Rpb25Db21wb25lbnQ8TW9kYWxBY3Rpb25Qcm9wcz4gPSAoeyBhY3Rpb25WYXJpYXRpb24gPSAncHJpbWFyeScsIC4uLnJlc3QgfSkgPT4ge1xuICByZXR1cm4gKFxuICAgIDxCdXR0b25cbiAgICAgIHZhcmlhdGlvbj1cInRleHRcIlxuICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgJHt0eXBvZ3JhcGh5LmFjdGlvbn07XG4gICAgICAgIGZsZXg6IGF1dG87XG4gICAgICAgIGZsZXgtYmFzaXM6IGF1dG87XG4gICAgICAgIGZsZXgtZ3JvdzogMDtcbiAgICAgICAgbWFyZ2luLWxlZnQ6ICR7dGhlbWUuc3BhY2luZy54c307XG4gICAgICAgIHBhZGRpbmc6IDAgJHt0aGVtZS5zcGFjaW5nLnhzfTtcbiAgICAgICAgJHtnZXRWYXJpYXRpb25TdHlsZShhY3Rpb25WYXJpYXRpb24pfVxuICAgICAgYH1cbiAgICAgIHsuLi5yZXN0fVxuICAgIC8+XG4gIClcbn1cblxuZXhwb3J0IGRlZmF1bHQgTW9kYWxBY3Rpb25cbiJdfQ== */"),
+    ...rest
+  });
 };
 exports.ModalAction = ModalAction;
-var _default = ModalAction;
-exports.default = _default;
+var _default = exports.default = ModalAction;

package/cjs/modal/ModalActionsContainer.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare type ModalActionsProps = {
+export type ModalActionsProps = {
     /**
      * Actions to be displayed at the bottom of the modal
      */

package/cjs/modal/ModalActionsContainer.js

@@ -7,18 +7,23 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _theme = require("@dfds-ui/theme");
 var _react2 = require("@emotion/react");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 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); }
 const ModalAction = props => {
-  return (0, _react2.jsx)("div", _extends({
-    css: /*#__PURE__*/(0, _react2.css)("display:flex;flex-wrap:nowrap;justify-content:flex-end;flex-grow:1;padding-top:", _theme.theme.spacing.s, ";padding-bottom:", _theme.theme.spacing.s, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:ModalAction;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9tb2RhbC9Nb2RhbEFjdGlvbnNDb250YWluZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWNjIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9tb2RhbC9Nb2RhbEFjdGlvbnNDb250YWluZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tICdAZGZkcy11aS90aGVtZSdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5leHBvcnQgdHlwZSBNb2RhbEFjdGlvbnNQcm9wcyA9IHtcbiAgLyoqXG4gICAqIEFjdGlvbnMgdG8gYmUgZGlzcGxheWVkIGF0IHRoZSBib3R0b20gb2YgdGhlIG1vZGFsXG4gICAqL1xuICBhY3Rpb25zPzogUmVhY3QuUmVhY3ROb2RlXG59XG5cbmNvbnN0IE1vZGFsQWN0aW9uOiBSZWFjdC5GdW5jdGlvbkNvbXBvbmVudDx7IGNoaWxkcmVuPzogUmVhY3QuUmVhY3ROb2RlOyBjbGFzc05hbWU/OiBzdHJpbmcgfT4gPSAocHJvcHMpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgICAgZmxleC13cmFwOiBub3dyYXA7XG4gICAgICAgIGp1c3RpZnktY29udGVudDogZmxleC1lbmQ7XG4gICAgICAgIGZsZXgtZ3JvdzogMTtcbiAgICAgICAgcGFkZGluZy10b3A6ICR7dGhlbWUuc3BhY2luZy5zfTtcbiAgICAgICAgcGFkZGluZy1ib3R0b206ICR7dGhlbWUuc3BhY2luZy5zfTtcbiAgICAgIGB9XG4gICAgICB7Li4ucHJvcHN9XG4gICAgLz5cbiAgKVxufVxuXG5jb25zdCBNb2RhbEFjdGlvbnNDb250YWluZXI6IFJlYWN0LkZ1bmN0aW9uQ29tcG9uZW50PE1vZGFsQWN0aW9uc1Byb3BzPiA9ICh7IGFjdGlvbnMsIC4uLnJlc3QgfSkgPT4ge1xuICByZXR1cm4gPGRpdiB7Li4ucmVzdH0+e2FjdGlvbnMgJiYgPE1vZGFsQWN0aW9uPnthY3Rpb25zfTwvTW9kYWxBY3Rpb24+fTwvZGl2PlxufVxuXG5leHBvcnQgZGVmYXVsdCBNb2RhbEFjdGlvbnNDb250YWluZXJcbiJdfQ== */")
-  }, props));
+  return (0, _jsxRuntime.jsx)("div", {
+    css: /*#__PURE__*/(0, _react2.css)("display:flex;flex-wrap:nowrap;justify-content:flex-end;flex-grow:1;padding-top:", _theme.theme.spacing.s, ";padding-bottom:", _theme.theme.spacing.s, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:ModalAction;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9tb2RhbC9Nb2RhbEFjdGlvbnNDb250YWluZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWNjIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9tb2RhbC9Nb2RhbEFjdGlvbnNDb250YWluZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tICdAZGZkcy11aS90aGVtZSdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5leHBvcnQgdHlwZSBNb2RhbEFjdGlvbnNQcm9wcyA9IHtcbiAgLyoqXG4gICAqIEFjdGlvbnMgdG8gYmUgZGlzcGxheWVkIGF0IHRoZSBib3R0b20gb2YgdGhlIG1vZGFsXG4gICAqL1xuICBhY3Rpb25zPzogUmVhY3QuUmVhY3ROb2RlXG59XG5cbmNvbnN0IE1vZGFsQWN0aW9uOiBSZWFjdC5GdW5jdGlvbkNvbXBvbmVudDx7IGNoaWxkcmVuPzogUmVhY3QuUmVhY3ROb2RlOyBjbGFzc05hbWU/OiBzdHJpbmcgfT4gPSAocHJvcHMpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgICAgZmxleC13cmFwOiBub3dyYXA7XG4gICAgICAgIGp1c3RpZnktY29udGVudDogZmxleC1lbmQ7XG4gICAgICAgIGZsZXgtZ3JvdzogMTtcbiAgICAgICAgcGFkZGluZy10b3A6ICR7dGhlbWUuc3BhY2luZy5zfTtcbiAgICAgICAgcGFkZGluZy1ib3R0b206ICR7dGhlbWUuc3BhY2luZy5zfTtcbiAgICAgIGB9XG4gICAgICB7Li4ucHJvcHN9XG4gICAgLz5cbiAgKVxufVxuXG5jb25zdCBNb2RhbEFjdGlvbnNDb250YWluZXI6IFJlYWN0LkZ1bmN0aW9uQ29tcG9uZW50PE1vZGFsQWN0aW9uc1Byb3BzPiA9ICh7IGFjdGlvbnMsIC4uLnJlc3QgfSkgPT4ge1xuICByZXR1cm4gPGRpdiB7Li4ucmVzdH0+e2FjdGlvbnMgJiYgPE1vZGFsQWN0aW9uPnthY3Rpb25zfTwvTW9kYWxBY3Rpb24+fTwvZGl2PlxufVxuXG5leHBvcnQgZGVmYXVsdCBNb2RhbEFjdGlvbnNDb250YWluZXJcbiJdfQ== */"),
+    ...props
+  });
 };
 const ModalActionsContainer = ({
   actions,
   ...rest
 }) => {
-  return (0, _react2.jsx)("div", rest, actions && (0, _react2.jsx)(ModalAction, null, actions));
+  return (0, _jsxRuntime.jsx)("div", {
+    ...rest,
+    children: actions && (0, _jsxRuntime.jsx)(ModalAction, {
+      children: actions
+    })
+  });
 };
-var _default = ModalActionsContainer;
-exports.default = _default;
+var _default = exports.default = ModalActionsContainer;

package/cjs/modal/ModalBody.d.ts

@@ -1,9 +1,9 @@
-export declare type ModalBodyProps = {
+export type ModalBodyProps = {
     hasPadding?: boolean;
     column?: boolean;
 };
 export declare const ModalBody: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & ModalBodyProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export default ModalBody;

package/cjs/modal/ModalBody.js

@@ -9,7 +9,7 @@ var _theme = require("@dfds-ui/theme");
 var _typography = require("@dfds-ui/typography");
 var _react = require("@emotion/react");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const ModalBody = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
+const ModalBody = exports.ModalBody = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
   target: "e1nrz8580"
 } : {
   target: "e1nrz8580",
@@ -18,6 +18,4 @@ const ModalBody = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV ==
     display: flex;
     flex-direction: column;
   `, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9tb2RhbC9Nb2RhbEJvZHkudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVVtRCIsImZpbGUiOiIuLi8uLi8uLi9zcmMvbW9kYWwvTW9kYWxCb2R5LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tICdAZGZkcy11aS90aGVtZSdcbmltcG9ydCB7IHR5cG9ncmFwaHkgfSBmcm9tICdAZGZkcy11aS90eXBvZ3JhcGh5J1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5cbmV4cG9ydCB0eXBlIE1vZGFsQm9keVByb3BzID0ge1xuICBoYXNQYWRkaW5nPzogYm9vbGVhblxuICBjb2x1bW4/OiBib29sZWFuXG59XG5cbmV4cG9ydCBjb25zdCBNb2RhbEJvZHkgPSBzdHlsZWQuZGl2PE1vZGFsQm9keVByb3BzPmBcbiAgJHt0eXBvZ3JhcGh5LmJvZHl9XG4gICR7KHApID0+XG4gICAgcC5oYXNQYWRkaW5nICYmXG4gICAgY3NzYFxuICAgICAgZmxleDogMSAxIGF1dG87XG4gICAgICBtYXJnaW46ICR7dGhlbWUuc3BhY2luZy54c30gJHt0aGVtZS5zcGFjaW5nLnN9IDAgJHt0aGVtZS5zcGFjaW5nLnN9O1xuICAgICAgcGFkZGluZy1ib3R0b206ICR7dGhlbWUuc3BhY2luZy5zfTtcbiAgICBgfVxuICAkeyhwKSA9PlxuICAgIHAuY29sdW1uICYmXG4gICAgYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgYH1cbmBcblxuZXhwb3J0IGRlZmF1bHQgTW9kYWxCb2R5XG4iXX0= */"));
-exports.ModalBody = ModalBody;
-var _default = ModalBody;
-exports.default = _default;
+var _default = exports.default = ModalBody;

package/cjs/modal/ModalCloseButton.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IconButtonSize } from '@dfds-ui/react-components';
-export declare type ModalCloseButtonProps = {
+export type ModalCloseButtonProps = {
     onRequestClose?: () => void;
     className?: string;
     icon?: React.ElementType;

package/cjs/modal/ModalCloseButton.js

@@ -9,8 +9,8 @@ var _reactComponents = require("@dfds-ui/react-components");
 var _system = require("@dfds-ui/icons/system");
 var _react2 = require("@emotion/react");
 var _theme = require("@dfds-ui/theme");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 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); }
 const ModalCloseButton = ({
   onRequestClose,
   className,
@@ -19,7 +19,7 @@ const ModalCloseButton = ({
   closeLabel = 'Close',
   ...rest
 }) => {
-  return (0, _react2.jsx)(_reactComponents.IconButton, _extends({
+  return (0, _jsxRuntime.jsx)(_reactComponents.IconButton, {
     disableOverlay: true,
     disableTooltip: true,
     hoverColor: _theme.theme.colors.secondary.main,
@@ -30,9 +30,9 @@ const ModalCloseButton = ({
     icon: icon,
     ariaLabel: closeLabel,
     "data-testid": "modal-close",
-    type: "button"
-  }, rest));
+    type: "button",
+    ...rest
+  });
 };
 exports.ModalCloseButton = ModalCloseButton;
-var _default = ModalCloseButton;
-exports.default = _default;
+var _default = exports.default = ModalCloseButton;

package/cjs/modal/ModalDialog.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 import { theme } from '@dfds-ui/theme';
-export declare type ModalVariation = 'default' | 'fullscreen';
-export declare type ModalSizes = Record<keyof typeof theme.breakpoints, string>;
-export declare type Backdrop = keyof typeof backdropsTransparent;
-export declare type BackdropVariant = 'transparent' | 'solid';
-export declare type ModalDialogProps = {
+export type ModalVariation = 'default' | 'fullscreen';
+export type ModalSizes = Record<keyof typeof theme.breakpoints, string>;
+export type Backdrop = keyof typeof backdropsTransparent;
+export type BackdropVariant = 'transparent' | 'solid';
+export type ModalDialogProps = {
     isOpen: boolean;
     onRequestClose?: () => void;
     shouldCloseOnOverlayClick?: boolean;
@@ -35,7 +35,7 @@ export declare const defaultProps: {
     };
     zIndex: number;
     renderWhenClosed: boolean;
-    backdrop: "lowEmphasis" | "mediumEmphasis" | "highEmphasis";
+    backdrop: Backdrop;
     backdropVariant: BackdropVariant;
 };
 declare const ModalDialog: ({ isOpen, onRequestClose, shouldCloseOnOverlayClick, shouldCloseOnEsc, variation, zIndex, className, sizes, fixedTopPosition, renderWhenClosed, backdrop, backdropVariant, children, ...rest }: ModalDialogProps) => React.JSX.Element | null;