@laerdal/life-react-components 1.6.0-dev.7.full → 1.6.0-dev.9

package/dist/Modals/ModalContent.js

@@ -0,0 +1,204 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _excluded = ["icon"],
+    _excluded2 = ["text", "variant", "action"],
+    _excluded3 = ["text", "variant", "action"],
+    _excluded4 = ["action", "text"];
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import React from 'react';
+import { Size } from '../types';
+import { ModalContainer } from './index';
+import styled from 'styled-components';
+import { COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXLStyling, ComponentXSStyling, ComponentXXSStyling } from '../styles';
+import { TooltipContainer, TooltipWrapper } from '../Tooltips';
+import { Button, IconButton } from '../Button';
+import { Close, Help } from '../icons/systemicons/SystemIcons';
+import { HyperLink } from '../HyperLink';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var HeaderText = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  padding: 12px 0 12px 12px;\n  gap: 4px\n"])));
+var HeaderTitle = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n"])), ComponentMStyling(ComponentTextStyle.Bold, COLORS.black));
+var HeaderNote = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n"])), ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600));
+var HeaderActions = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n"])));
+var Header = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  padding: 4px;\n\n  ", " {\n    height: max-content;\n  }\n"])), TooltipContainer);
+var Content = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-right: 8px;\n  padding: 0 8px 0 16px;\n  overflow: auto;\n\n  /* width */\n\n  ::-webkit-scrollbar {\n    width: 4px;\n    cursor: pointer;\n  }\n\n  /* Track */\n\n  ::-webkit-scrollbar-track {\n    background: ", ";\n    border-radius: 8px;\n  }\n\n  /* Handle */\n\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n\n  ::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), COLORS.neutral_100, COLORS.neutral_600, COLORS.neutral_500);
+var FooterLeftContainer = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
+var FooterLeftNote = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 4px;\n\n  ", "\n"])), ComponentXXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
+var FooterLeftLink = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ", "\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500));
+var FooterRightContainer = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  gap: 8px;\n  margin-left: auto;\n"])));
+var Footer = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  padding: 8px 16px;\n"])));
+var Wrapper = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  width: max-content;\n\n  max-height: calc(100vh - 32px);\n  max-width: calc(100vw - 32px);\n\n  &.medium {\n    max-height: calc(100vh - 64px);\n    max-width: calc(100vw - 64px);\n\n    ", " {\n      padding: 12px 12px 4px 12px;\n\n      ", " {\n        padding: 12px 0 12px 12px;\n        gap: 4px;\n\n        ", " {\n          ", "\n        }\n\n        ", " {\n          ", "\n        }\n      }\n    }\n\n    ", " {\n      padding: 0 16px 0 24px;\n    }\n\n    ", " {\n      padding: 12px 24px 20px 24px;\n\n      ", " {\n        ", "\n        gap: 6px;\n      }\n\n      ", " {\n        a {\n          gap: 6px;\n        }\n\n        ", "\n      }\n\n      ", " {\n        gap: 8px;\n      }\n    }\n  }\n\n  &.large {\n    max-height: calc(100vh - 112px);\n    max-width: calc(100vw - 112px);\n\n    ", " {\n      padding: 20px 20px 4px 20px;\n\n      ", " {\n        padding: 10px 0 10px 12px;\n        gap: 8px;\n\n        ", " {\n          ", "\n        }\n\n        ", " {\n          ", "\n        }\n      }\n    }\n\n    ", " {\n      padding: 0 24px 0 32px;\n    }\n\n    ", " {\n      padding: 16px 32px 32px 32px;\n\n      ", " {\n        ", "\n        gap: 8px;\n      }\n\n      ", " {\n        a {\n          gap: 8px;\n        }\n\n        ", "\n      }\n\n      ", " {\n        gap: 16px;\n      }\n    }\n  }\n"])), Header, HeaderText, HeaderTitle, ComponentLStyling(ComponentTextStyle.Bold, null), HeaderNote, ComponentXSStyling(ComponentTextStyle.Regular, null), Content, Footer, FooterLeftNote, ComponentXSStyling(ComponentTextStyle.Bold, null), FooterLeftLink, ComponentMStyling(ComponentTextStyle.Bold, null), FooterRightContainer, Header, HeaderText, HeaderTitle, ComponentXLStyling(ComponentTextStyle.Bold, null), HeaderNote, ComponentSStyling(ComponentTextStyle.Regular, null), Content, Footer, FooterLeftNote, ComponentSStyling(ComponentTextStyle.Bold, null), FooterLeftLink, ComponentLStyling(ComponentTextStyle.Bold, null), FooterRightContainer);
+
+var ModalContent = function ModalContent(props) {
+  var _props$size, _props$footerActions;
+
+  var tooltip = function tooltip() {
+    return !!props.tooltip && /*#__PURE__*/_jsx(TooltipWrapper, {
+      delay: "0s",
+      size: Size.XSmall,
+      align: "center",
+      position: "bottom",
+      withArrow: false,
+      label: props.tooltip,
+      children: /*#__PURE__*/_jsx(IconButton, {
+        variant: "secondary",
+        shape: "circular",
+        style: {
+          cursor: 'help'
+        },
+        action: function action() {},
+        children: /*#__PURE__*/_jsx(Help, {
+          size: "24px",
+          color: COLORS.neutral_600
+        })
+      })
+    });
+  };
+
+  var headerActions = function headerActions() {
+    var _props$headerActions;
+
+    return (_props$headerActions = props.headerActions) === null || _props$headerActions === void 0 ? void 0 : _props$headerActions.map(function (action, index) {
+      var icon = action.icon,
+          rest = _objectWithoutProperties(action, _excluded);
+
+      return /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({}, rest), {}, {
+        children: icon
+      }), action.id || index);
+    });
+  };
+
+  var getLeftActionIconElement = function getLeftActionIconElement() {
+    var _props$leftFooterActi, _props$leftFooterActi2;
+
+    return !!((_props$leftFooterActi = props.leftFooterAction) !== null && _props$leftFooterActi !== void 0 && _props$leftFooterActi.icon) && /*#__PURE__*/React.cloneElement((_props$leftFooterActi2 = props.leftFooterAction) === null || _props$leftFooterActi2 === void 0 ? void 0 : _props$leftFooterActi2.icon, {
+      size: props.size === Size.Small ? '20px' : props.size === Size.Large ? '28px' : '24px'
+    });
+  };
+
+  var leftFooterAction = function leftFooterAction() {
+    if (!props.leftFooterAction) return null;
+
+    switch (props.leftFooterAction.actionType) {
+      case 'button':
+        {
+          var _ref = props.leftFooterAction,
+              text = _ref.text,
+              variant = _ref.variant,
+              action = _ref.action,
+              rest = _objectWithoutProperties(_ref, _excluded2);
+
+          return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, rest), {}, {
+            size: props.size,
+            onClick: action,
+            variant: variant !== null && variant !== void 0 ? variant : 'secondary',
+            children: text
+          }));
+        }
+
+      case 'hyperlink':
+        {
+          var _ref2 = props.leftFooterAction,
+              _text = _ref2.text,
+              _variant = _ref2.variant,
+              _action = _ref2.action,
+              _rest = _objectWithoutProperties(_ref2, _excluded3);
+
+          return /*#__PURE__*/_jsx(FooterLeftLink, {
+            children: /*#__PURE__*/_jsxs(HyperLink, _objectSpread(_objectSpread({}, _rest), {}, {
+              variant: _variant !== null && _variant !== void 0 ? _variant : 'default',
+              onClick: function onClick(e) {
+                if (_action) {
+                  e.preventDefault();
+
+                  _action(e);
+                }
+              },
+              children: [getLeftActionIconElement(), _text]
+            }))
+          });
+        }
+
+      case 'note':
+        {
+          var _text2 = props.leftFooterAction.text;
+          return /*#__PURE__*/_jsxs(FooterLeftNote, {
+            children: [getLeftActionIconElement(), /*#__PURE__*/_jsx("span", {
+              children: _text2
+            })]
+          });
+        }
+    }
+  };
+
+  return /*#__PURE__*/_jsx(ModalContainer, {
+    showModal: props.isModalOpen,
+    closeModal: props.closeAction,
+    children: /*#__PURE__*/_jsxs(Wrapper, {
+      className: (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : Size.Medium,
+      children: [/*#__PURE__*/_jsxs(Header, {
+        children: [/*#__PURE__*/_jsxs(HeaderText, {
+          children: [/*#__PURE__*/_jsx(HeaderTitle, {
+            children: props.title
+          }), !!props.note && /*#__PURE__*/_jsx(HeaderNote, {
+            children: props.note
+          })]
+        }), /*#__PURE__*/_jsxs(HeaderActions, {
+          children: [tooltip(), headerActions(), /*#__PURE__*/_jsx(IconButton, {
+            id: 'content-modal-close-button',
+            variant: "secondary",
+            shape: "circular",
+            action: props.closeAction,
+            children: /*#__PURE__*/_jsx(Close, {
+              size: "24px",
+              color: COLORS.neutral_600
+            })
+          })]
+        })]
+      }), /*#__PURE__*/_jsx(Content, {
+        children: props.children
+      }), /*#__PURE__*/_jsxs(Footer, {
+        children: [/*#__PURE__*/_jsx(FooterLeftContainer, {
+          children: leftFooterAction()
+        }), /*#__PURE__*/_jsx(FooterRightContainer, {
+          children: (_props$footerActions = props.footerActions) === null || _props$footerActions === void 0 ? void 0 : _props$footerActions.map(function (item, index) {
+            var action = item.action,
+                text = item.text,
+                rest = _objectWithoutProperties(item, _excluded4);
+
+            return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, rest), {}, {
+              onClick: action,
+              size: props.size,
+              onKeyDown: function onKeyDown(a) {
+                return (a.key === 'Enter' || a.key === ' ') && action(a);
+              },
+              children: text
+            }), rest.id || index);
+          })
+        })]
+      })]
+    })
+  });
+};
+
+ModalContent.propTypes = {
+  isModalOpen: _pt.bool.isRequired,
+  closeAction: _pt.func.isRequired,
+  title: _pt.string.isRequired,
+  note: _pt.string,
+  headerActions: _pt.array,
+  footerActions: _pt.array,
+  tooltip: _pt.string,
+  yOffset: _pt.number,
+  zIndex: _pt.number
+};
+export default ModalContent;
+//# sourceMappingURL=ModalContent.js.map

package/dist/Modals/ModalContent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Modals/ModalContent.tsx"],"names":["React","Size","ModalContainer","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXLStyling","ComponentXSStyling","ComponentXXSStyling","TooltipContainer","TooltipWrapper","Button","IconButton","Close","Help","HyperLink","HeaderText","div","HeaderTitle","Bold","black","HeaderNote","Regular","neutral_600","HeaderActions","Header","Content","neutral_100","neutral_500","FooterLeftContainer","FooterLeftNote","FooterLeftLink","primary_500","FooterRightContainer","Footer","Wrapper","ModalContent","props","tooltip","XSmall","cursor","headerActions","map","action","index","icon","rest","id","getLeftActionIconElement","leftFooterAction","cloneElement","size","Small","Large","actionType","text","variant","e","preventDefault","isModalOpen","closeAction","Medium","title","note","children","footerActions","item","a","key","yOffset","zIndex"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport {ButtonAction, IconButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink} from './ModalTypes';\nimport {ModalContainer} from './index';\nimport styled from 'styled-components';\nimport {\n  COLORS,\n  ComponentLStyling,\n  ComponentMStyling, ComponentSStyling,\n  ComponentTextStyle, ComponentXLStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles';\nimport {TooltipContainer, TooltipWrapper} from '../Tooltips';\nimport {Button, IconButton} from '../Button';\nimport {Close, Help} from '../icons/systemicons/SystemIcons';\nimport {HyperLink} from '../HyperLink';\n\nconst HeaderText = styled.div`\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  padding: 12px 0 12px 12px;\n  gap: 4px\n`;\nconst HeaderTitle = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n`;\nconst HeaderNote = styled.div`\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst HeaderActions = styled.div`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst Header = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 4px;\n\n  ${TooltipContainer} {\n    height: max-content;\n  }\n`;\n\nconst Content = styled.div`\n  margin-right: 8px;\n  padding: 0 8px 0 16px;\n  overflow: auto;\n\n  /* width */\n\n  ::-webkit-scrollbar {\n    width: 4px;\n    cursor: pointer;\n  }\n\n  /* Track */\n\n  ::-webkit-scrollbar-track {\n    background: ${COLORS.neutral_100};\n    border-radius: 8px;\n  }\n\n  /* Handle */\n\n  ::-webkit-scrollbar-thumb {\n    background: ${COLORS.neutral_600};\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n\n  ::-webkit-scrollbar-thumb:hover {\n    background: ${COLORS.neutral_500};\n  }\n`;\n\nconst FooterLeftContainer = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst FooterLeftNote = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 4px;\n\n  ${ComponentXXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\nconst FooterLeftLink = styled.div`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n`;\n\nconst FooterRightContainer = styled.div`\n  gap: 8px;\n  margin-left: auto;\n`\n\nconst Footer = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 8px 16px;\n`;\n\n\nconst Wrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: max-content;\n\n  max-height: calc(100vh - 32px);\n  max-width: calc(100vw - 32px);\n\n  &.medium {\n    max-height: calc(100vh - 64px);\n    max-width: calc(100vw - 64px);\n\n    ${Header} {\n      padding: 12px 12px 4px 12px;\n\n      ${HeaderText} {\n        padding: 12px 0 12px 12px;\n        gap: 4px;\n\n        ${HeaderTitle} {\n          ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n        }\n\n        ${HeaderNote} {\n          ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n        }\n      }\n    }\n\n    ${Content} {\n      padding: 0 16px 0 24px;\n    }\n\n    ${Footer} {\n      padding: 12px 24px 20px 24px;\n\n      ${FooterLeftNote} {\n        ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n        gap: 6px;\n      }\n\n      ${FooterLeftLink} {\n        a {\n          gap: 6px;\n        }\n\n        ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      ${FooterRightContainer} {\n        gap: 8px;\n      }\n    }\n  }\n\n  &.large {\n    max-height: calc(100vh - 112px);\n    max-width: calc(100vw - 112px);\n\n    ${Header} {\n      padding: 20px 20px 4px 20px;\n\n      ${HeaderText} {\n        padding: 10px 0 10px 12px;\n        gap: 8px;\n\n        ${HeaderTitle} {\n          ${ComponentXLStyling(ComponentTextStyle.Bold, null)}\n        }\n\n        ${HeaderNote} {\n          ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n        }\n      }\n    }\n\n    ${Content} {\n      padding: 0 24px 0 32px;\n    }\n\n    ${Footer} {\n      padding: 16px 32px 32px 32px;\n\n      ${FooterLeftNote} {\n        ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n        gap: 8px;\n      }\n\n      ${FooterLeftLink} {\n        a {\n          gap: 8px;\n        }\n\n        ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      ${FooterRightContainer} {\n        gap: 16px;\n      }\n    }\n  }\n`;\n\n\ninterface ModalContentProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  isModalOpen: boolean;\n  closeAction: () => void;\n  title: string;\n  note?: string;\n  headerActions?: IconButtonAction[];\n  footerActions?: ButtonAction[];\n  leftFooterAction?: LeftFooterAction;\n  tooltip?: string;\n  yOffset?: number;\n  zIndex?: number;\n}\n\nconst ModalContent: React.FC<ModalContentProps> = (props) => {\n\n  const tooltip = () =>\n    !!props.tooltip &&\n    <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"bottom\" withArrow={false}\n                    label={props.tooltip}>\n      <IconButton variant=\"secondary\" shape=\"circular\" style={{cursor: 'help'}} action={() => {\n      }}>\n        <Help size=\"24px\" color={COLORS.neutral_600}/>\n      </IconButton>\n    </TooltipWrapper>;\n\n  const headerActions = () => props.headerActions?.map((action, index) => {\n      const {icon, ...rest} = action;\n      return <IconButton key={action.id || index}\n                         {...rest}>\n        {icon}\n      </IconButton>\n    }\n  );\n\n  const getLeftActionIconElement = () =>\n    !!props.leftFooterAction?.icon &&\n    React.cloneElement(props.leftFooterAction?.icon as React.ReactElement, {\n      size:\n        props.size === Size.Small\n          ? '20px'\n          : props.size === Size.Large\n            ? '28px'\n            : '24px'\n    });\n\n  const leftFooterAction = () => {\n    if (!props.leftFooterAction) return null;\n\n    switch (props.leftFooterAction.actionType) {\n      case 'button': {\n        const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterButton;\n        return (\n          <Button{...rest}\n                 size={props.size}\n                 onClick={action}\n                 variant={variant ?? 'secondary'}>\n            {text}\n          </Button>\n        );\n      }\n      case 'hyperlink': {\n        const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterHyperlink;\n        return (\n          <FooterLeftLink>\n            <HyperLink {...rest}\n                       variant={variant ?? 'default'}\n                       onClick={(e) => {\n                         if (action) {\n                           e.preventDefault();\n                           action(e);\n                         }\n                       }}>\n              {getLeftActionIconElement()}\n              {text}\n            </HyperLink>\n          </FooterLeftLink>\n        );\n\n      }\n      case 'note': {\n        const {text} = props.leftFooterAction;\n        return (\n          <FooterLeftNote>\n            {getLeftActionIconElement()}\n            <span>{text}</span>\n          </FooterLeftNote>\n        );\n      }\n    }\n  };\n\n\n  return (\n    <ModalContainer showModal={props.isModalOpen} closeModal={props.closeAction}>\n      <Wrapper className={props.size ?? Size.Medium}>\n        <Header>\n          <HeaderText>\n            <HeaderTitle>{props.title}</HeaderTitle>\n            {!!props.note && <HeaderNote>{props.note}</HeaderNote>}\n          </HeaderText>\n          <HeaderActions>\n            {tooltip()}\n            {headerActions()}\n            <IconButton id={'content-modal-close-button'} variant=\"secondary\" shape=\"circular\"\n                        action={props.closeAction}>\n              <Close size=\"24px\" color={COLORS.neutral_600}/>\n            </IconButton>\n          </HeaderActions>\n        </Header>\n        <Content>\n          {props.children}\n        </Content>\n        <Footer>\n          <FooterLeftContainer>\n            {leftFooterAction()}\n          </FooterLeftContainer>\n          <FooterRightContainer>\n            {props.footerActions?.map((item, index) => {\n                const {action, text, ...rest} = item;\n                return <Button key={rest.id || index}\n                               {...rest}\n                               onClick={action}\n                               size={props.size}\n                               onKeyDown={a => (a.key === 'Enter' || a.key === ' ') && action!(a)}>\n                  {text}\n                </Button>\n              }\n            )}\n          </FooterRightContainer>\n        </Footer>\n      </Wrapper>\n    </ModalContainer>\n  );\n};\n\nexport default ModalContent;\n"],"file":"ModalContent.js"}

package/dist/Modals/ModalDialog.cjs

@@ -53,7 +53,9 @@ var ModalDialog = function ModalDialog(_ref) {
       state = _ref.state,
       icon = _ref.icon,
       yOffset = _ref.yOffset,
-      zIndex = _ref.zIndex;
+      zIndex = _ref.zIndex,
+      contentOverflow = _ref.contentOverflow,
+      width = _ref.width;
 
   var getMinWidth = function getMinWidth() {
     switch (size) {
@@ -345,6 +347,7 @@ var ModalDialog = function ModalDialog(_ref) {
     modalHeight: "auto",
     padding: getPadding(),
     zIndex: zIndex,
+    modalWidth: width,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalStyles.Column, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("form", {
         onSubmit: submitAction,
@@ -377,6 +380,7 @@ var ModalDialog = function ModalDialog(_ref) {
           })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalStyles.ModalBody, {
           size: size,
+          overflow: contentOverflow,
           children: children
         }), note && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalNote.ModalNote, {
           note: note,
@@ -419,7 +423,9 @@ ModalDialog.propTypes = {
   state: _propTypes.default.string,
   icon: _propTypes.default.node,
   yOffset: _propTypes.default.number,
-  zIndex: _propTypes.default.number
+  zIndex: _propTypes.default.number,
+  contentOverflow: _propTypes.default.string,
+  width: _propTypes.default.string
 };
 var _default = ModalDialog;
 exports.default = _default;

package/dist/Modals/ModalDialog.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Modals/ModalDialog.tsx"],"names":["ModalDialog","size","titleSize","subtitleSize","isModalOpen","closeModalAndClearInput","title","subtitle","subtitlePosition","topImage","topImageWithFallbacksProps","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","icon","yOffset","zIndex","getMinWidth","Size","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","getMaxHeight","ModalTitle","ComponentTextStyle","Bold","ModalSubtitle","COLORS","neutral_500","ModalTootip","XSmall","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","React","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","e","preventDefault","useEffect","yPos","document","body","setAttribute","window","scrollTo","display","flexDirection","maxHeight","loader","alt","fallbacks","src","ModalSubtitlePosition","ABOVE","BELOW","map","b","i","id"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAcA;;AACA;;AAEA;;;;AA2BO,IAAMA,WAAmD,GAAG,SAAtDA,WAAsD,OAuB7D;AAAA,MAtBJC,IAsBI,QAtBJA,IAsBI;AAAA,MArBJC,SAqBI,QArBJA,SAqBI;AAAA,MApBJC,YAoBI,QApBJA,YAoBI;AAAA,MAnBJC,WAmBI,QAnBJA,WAmBI;AAAA,MAlBJC,uBAkBI,QAlBJA,uBAkBI;AAAA,MAjBJC,KAiBI,QAjBJA,KAiBI;AAAA,MAhBJC,QAgBI,QAhBJA,QAgBI;AAAA,MAfJC,gBAeI,QAfJA,gBAeI;AAAA,MAdJC,QAcI,QAdJA,QAcI;AAAA,MAbJC,0BAaI,QAbJA,0BAaI;AAAA,MAZJC,OAYI,QAZJA,OAYI;AAAA,MAXJC,gBAWI,QAXJA,gBAWI;AAAA,MAVJC,UAUI,QAVJA,UAUI;AAAA,MATJC,WASI,QATJA,WASI;AAAA,MARJC,YAQI,QARJA,YAQI;AAAA,MAPJC,OAOI,QAPJA,OAOI;AAAA,MANJC,QAMI,QANJA,QAMI;AAAA,MALJC,IAKI,QALJA,IAKI;AAAA,MAJJC,KAII,QAJJA,KAII;AAAA,MAHJC,IAGI,QAHJA,IAGI;AAAA,MAFJC,OAEI,QAFJA,OAEI;AAAA,MADJC,MACI,QADJA,MACI;;AACJ,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,YAAQtB,IAAR;AACE,WAAKuB,YAAKC,KAAV;AACE,eAAO,OAAP;;AACF,WAAKD,YAAKE,KAAV;AACE,eAAO,OAAP;;AACF,WAAKF,YAAKG,MAAV;AACA;AACE,eAAO,OAAP;AAPJ;AASD,GAVD;;AAYA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,YAAQ3B,IAAR;AACE,WAAKuB,YAAKC,KAAV;AACE,eAAO,OAAP;;AACF,WAAKD,YAAKE,KAAV;AACE,eAAO,OAAP;;AACF,WAAKF,YAAKG,MAAV;AACA;AACE,eAAO,OAAP;AAPJ;AASD,GAVD;;AAYA,MAAME,cAAc,GAAG,SAAjBA,cAAiB,GAAM;AAC3B,YAAQ5B,IAAR;AACE,WAAKuB,YAAKC,KAAV;AACE,eAAO,GAAP;;AACF,WAAKD,YAAKG,MAAV;AACE,eAAO,GAAP;;AACF,WAAKH,YAAKE,KAAV;AACE,eAAO,GAAP;;AACF;AACE,eAAO,GAAP;AARJ;AAUD,GAXD;;AAaA,MAAMI,eAAe,GAAG,SAAlBA,eAAkB,GAAM;AAC5B,YAAQ7B,IAAR;AACE,WAAKuB,YAAKC,KAAV;AACE,eAAO,MAAP;;AACF,WAAKD,YAAKG,MAAV;AACE,eAAO,MAAP;;AACF,WAAKH,YAAKE,KAAV;AACE,eAAO,MAAP;;AACF;AACE,eAAO,MAAP;AARJ;AAUD,GAXD;;AAaA,MAAMK,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvB,YAAQ9B,IAAR;AACE,WAAKuB,YAAKC,KAAV;AACE,eAAO,eAAP;;AACF,WAAKD,YAAKG,MAAV;AACE,eAAO,gBAAP;;AACF,WAAKH,YAAKE,KAAV;AACE,eAAO,MAAP;;AACF;AACE,eAAO,gBAAP;AARJ;AAUD,GAXD;;AAaA,MAAMM,YAAY,GAAG,SAAfA,YAAe,GAAM;AACzB,YAAQ/B,IAAR;AACE,WAAKuB,YAAKC,KAAV;AACE,eAAO,oBAAP;;AACF,WAAKD,YAAKG,MAAV;AACE,eAAO,oBAAP;;AACF,WAAKH,YAAKE,KAAV;AACE,eAAO,oBAAP;;AACF;AACE,eAAO,oBAAP;AARJ;AAUD,GAXD;;AAaA,MAAMO,UAAU,GAAG,SAAbA,UAAa,CAAC3B,KAAD,EAAgBL,IAAhB,EAAgC;AACjD,YAAQA,IAAR;AACE,WAAKuB,YAAKC,KAAV;AACE,4BAAO,qBAAC,kBAAD;AAAY,UAAA,SAAS,EAAES,2BAAmBC,IAA1C;AAAA,oBAAiD7B;AAAjD,UAAP;;AACF,WAAKkB,YAAKG,MAAV;AACE,4BAAO,qBAAC,kBAAD;AAAY,UAAA,SAAS,EAAEO,2BAAmBC,IAA1C;AAAA,oBAAiD7B;AAAjD,UAAP;;AACF,WAAKkB,YAAKE,KAAV;AACE,4BAAO,qBAAC,mBAAD;AAAa,UAAA,SAAS,EAAEQ,2BAAmBC,IAA3C;AAAA,oBAAkD7B;AAAlD,UAAP;;AACF;AACE,4BAAO,qBAAC,kBAAD;AAAY,UAAA,SAAS,EAAE4B,2BAAmBC,IAA1C;AAAA,oBAAiD7B;AAAjD,UAAP;AARJ;AAUD,GAXD;;AAaA,MAAM8B,aAAa,GAAG,SAAhBA,aAAgB,CAAC7B,QAAD,EAAmBN,IAAnB,EAAmC;AACvD,YAAQA,IAAR;AACE,WAAKuB,YAAKC,KAAV;AACE,4BAAO,qBAAC,mBAAD;AAAa,UAAA,KAAK,EAAEY,eAAOC,WAA3B;AAAA,oBAAyC/B;AAAzC,UAAP;;AACF,WAAKiB,YAAKG,MAAV;AACE,4BAAO,qBAAC,kBAAD;AAAY,UAAA,KAAK,EAAEU,eAAOC,WAA1B;AAAA,oBAAwC/B;AAAxC,UAAP;;AACF,WAAKiB,YAAKE,KAAV;AACE,4BAAO,qBAAC,kBAAD;AAAY,UAAA,KAAK,EAAEW,eAAOC,WAA1B;AAAA,oBAAwC/B;AAAxC,UAAP;;AACF;AACE,4BAAO,qBAAC,kBAAD;AAAY,UAAA,KAAK,EAAE8B,eAAOC,WAA1B;AAAA,oBAAwC/B;AAAxC,UAAP;AARJ;AAUD,GAXD;;AAaA,MAAMgC,WAAW,GAAG,SAAdA,WAAc,CAACvB,OAAD,EAAqB;AACvC,wBACE,qBAAC,+BAAD;AAAA,6BACE,qBAAC,wBAAD;AAAgB,QAAA,KAAK,EAAC,IAAtB;AAA2B,QAAA,IAAI,EAAEQ,YAAKgB,MAAtC;AAA8C,QAAA,KAAK,EAAC,QAApD;AAA6D,QAAA,QAAQ,EAAC,KAAtE;AAA4E,QAAA,SAAS,EAAE,KAAvF;AAA8F,QAAA,KAAK,EAAExB,OAArG;AAAA,+BACE,qBAAC,kBAAD;AAAY,UAAA,OAAO,EAAC,WAApB;AAAgC,UAAA,KAAK,EAAC,UAAtC;AAAiD,UAAA,MAAM,EAAE,kBAAM,CAAE,CAAjE;AAAA,iCACE,qBAAC,iBAAD;AAAM,YAAA,IAAI,EAAC,MAAX;AAAkB,YAAA,KAAK,EAAEqB,eAAOI;AAAhC;AADF;AADF;AADF,MADF;AASD,GAVD;;AAYA,MAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,OAAD,EAAkB;AACzC,wBACE,qBAAC,+BAAD;AAAoB,MAAA,QAAQ,EAAE,CAAC,CAAClC,QAAF,IAAc,CAAC,CAACC,0BAA9C;AAA0E,MAAA,IAAI,EAAET,IAAhF;AAAA,6BACE,qBAAC,kBAAD;AAAY,QAAA,OAAO,EAAC,WAApB;AAAgC,QAAA,KAAK,EAAC,UAAtC;AAAiD,QAAA,MAAM,EAAE;AAAA,iBAAM0C,OAAO,EAAb;AAAA,SAAzD;AAA0E,QAAA,YAAY,EAAE,EAAxF;AAAA,+BACE,qBAAC,kBAAD;AAAO,UAAA,IAAI,EAAC,MAAZ;AAAmB,UAAA,KAAK,EAAEN,eAAOO;AAAjC;AADF;AADF,MADF;AAOD,GARD;;AAUA,MAAMC,eAAe,GAAG,SAAlBA,eAAkB,GAAM;AAC5B,QAAIhC,UAAJ,EAAgB;AACd,0BACE,qBAAC,8BAAD;AAAmB,QAAA,QAAQ,EAAE,CAAC,CAACJ,QAAF,IAAc,CAAC,CAACC,0BAA7C;AAAyE,QAAA,IAAI,EAAET,IAA/E;AAAA,+BACE,qBAAC,kBAAD;AAAY,UAAA,OAAO,EAAC,WAApB;AAAgC,UAAA,KAAK,EAAC,UAAtC;AAAiD,UAAA,MAAM,EAAE;AAAA,mBAAMY,UAAU,EAAhB;AAAA,WAAzD;AAA6E,UAAA,YAAY,EAAE,EAA3F;AAAA,iCACE,qBAAC,0BAAD;AAAe,YAAA,IAAI,EAAC,MAApB;AAA2B,YAAA,KAAK,EAAEwB,eAAOO;AAAzC;AADF;AADF,QADF;AAOD;AACF,GAVD;;AAYA,MAAME,wBAAwB,GAAG,SAA3BA,wBAA2B,CAAC1B,IAAD,EAA2B;AAC1D,wBAAO2B,eAAMC,YAAN,CAAmB5B,IAAnB,EAA+C;AAAEnB,MAAAA,IAAI,EAAEA,IAAI,KAAKuB,YAAKC,KAAd,GAAsB,MAAtB,GAA+BxB,IAAI,KAAKuB,YAAKE,KAAd,GAAsB,MAAtB,GAA+B;AAAtE,KAA/C,CAAP;AACD,GAFD;;AAIA,MAAMuB,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACrC,gBAAD,EAAwC;AAAA;;AAC/D,QAAQsC,IAAR,GAAqDtC,gBAArD,CAAQsC,IAAR;AAAA,QAAcC,UAAd,GAAqDvC,gBAArD,CAAcuC,UAAd;AAAA,QAA0BC,QAA1B,GAAqDxC,gBAArD,CAA0BwC,QAA1B;AAAA,QAAoChC,IAApC,GAAqDR,gBAArD,CAAoCQ,IAApC;AAAA,QAA0CiC,MAA1C,GAAqDzC,gBAArD,CAA0CyC,MAA1C;;AACA,YAAQF,UAAR;AACE,WAAK,QAAL;AACE,4BACE,qBAAC,cAAD;AACE,UAAA,EAAE,EAAE,oBADN;AAEE,UAAA,IAAI,EAAGvC,gBAAH,aAAGA,gBAAH,uBAAGA,gBAAD,CAAwC0C,IAFhD;AAGE,UAAA,QAAQ,EAAEF,QAHZ;AAIE,UAAA,OAAO,EAAGxC,gBAAH,aAAGA,gBAAH,uBAAGA,gBAAD,CAAwC2C,OAJnD;AAKE,UAAA,IAAI,EAAEnC,IALR;AAME,UAAA,IAAI,EAAEnB,IANR;AAOE,UAAA,OAAO,EAAEoD,MAPX;AAQE,UAAA,OAAO,cAAGzC,gBAAH,aAAGA,gBAAH,uBAAGA,gBAAD,CAAwC4C,OAA1C,+CAAqD,WAR9D;AASE,UAAA,KAAK,EAAE;AAAEC,YAAAA,KAAK,EAAE,CAAC,CAAV;AAAaC,YAAAA,WAAW,EAAE;AAA1B,WATT;AAAA,oBAUGR;AAVH,UADF;;AAcF,WAAK,WAAL;AACE,4BACE,sBAAC,WAAD;AACE,UAAA,EAAE,EAAC,uBADL;AAEE,UAAA,SAAS,EAAC,eAFZ;AAGE,UAAA,IAAI,EAAGtC,gBAAD,CAA0C+C,IAHlD;AAIE,UAAA,QAAQ,EAAEP,QAJZ;AAKE,UAAA,OAAO,EAAC,SALV;AAME,UAAA,OAAO,EAAE,iBAACQ,CAAD,EAAO;AACd,gBAAIP,MAAJ,EAAY;AACVO,cAAAA,CAAC,CAACC,cAAF;AACAR,cAAAA,MAAM,CAACO,CAAD,CAAN;AACD;AACF,WAXH;AAAA,qBAYGxC,IAAI,IAAI0B,wBAAwB,CAAC1B,IAAD,CAZnC,EAaG8B,IAbH;AAAA,UADF;;AAiBF,WAAK,MAAL;AACE,4BACE;AAAK,UAAA,SAAS,EAAC,oBAAf;AAAA,qBACG9B,IAAI,IAAI0B,wBAAwB,CAAC1B,IAAD,CADnC,eAEE;AAAA,sBAAO8B;AAAP,YAFF;AAAA,UADF;AAnCJ;AA0CD,GA5CD;;AA8CAH,iBAAMe,SAAN,CAAgB,YAAM;AACpB,QAAIC,IAAI,GAAG1C,OAAO,GAAGA,OAAH,GAAa,CAA/B;;AACA,QAAIjB,WAAJ,EAAiB;AACf4D,MAAAA,QAAQ,CAACC,IAAT,CAAcC,YAAd,CACE,OADF,8IAI6CH,IAJ7C;AAMD;;AACD,WAAO,YAAM;AACXC,MAAAA,QAAQ,CAACC,IAAT,CAAcC,YAAd,CAA2B,OAA3B,EAAoC,EAApC;AACAC,MAAAA,MAAM,CAACC,QAAP,CAAgB,CAAhB,EAAmBL,IAAnB;AACD,KAHD;AAID,GAdD,EAcG,CAAC3D,WAAD,CAdH;;AAgBA,sBACE,qBAAC,uBAAD;AACE,IAAA,SAAS,EAAEA,WADb;AAEE,IAAA,UAAU,EAAEC,uBAFd;AAGE,IAAA,QAAQ,EAAEkB,WAAW,EAHvB;AAIE,IAAA,QAAQ,EAAEK,WAAW,EAJvB;AAKE,IAAA,WAAW,EAAC,MALd;AAME,IAAA,OAAO,EAAEG,UAAU,EANrB;AAOE,IAAA,MAAM,EAAET,MAPV;AAAA,2BAQE,qBAAC,mBAAD;AAAA,6BACE;AAAM,QAAA,QAAQ,EAAEP,YAAhB;AAA8B,QAAA,KAAK,EAAE;AAAEsD,UAAAA,OAAO,EAAE,MAAX;AAAmBC,UAAAA,aAAa,EAAE,QAAlC;AAA4CC,UAAAA,SAAS,EAAEvC,YAAY;AAAnE,SAArC;AAAA,mBACG,CAACvB,QAAQ,IAAIC,0BAAb,kBACC,sBAAC,8BAAD;AAAmB,UAAA,IAAI,EAAET,IAAzB;AAA+B,UAAA,MAAM,EAAE4B,cAAc,EAArD;AAAyD,UAAA,YAAY,EAAEC,eAAe,EAAtF;AAAA,qBACGrB,QAAQ,iBAAI;AAAK,YAAA,GAAG,EAAEA,QAAV;AAAoB,YAAA,GAAG,EAAC;AAAxB,YADf,EAEG,CAACA,QAAD,IAAaC,0BAAb,iBACC,qBAAC,oBAAD;AACE,YAAA,MAAM,EAAEA,0BAA0B,CAAC8D,MADrC;AAEE,YAAA,GAAG,EAAE9D,0BAA0B,CAAC+D,GAFlC;AAGE,YAAA,SAAS,EAAE/D,0BAA0B,CAACgE,SAHxC;AAIE,YAAA,GAAG,EAAEhE,0BAA0B,CAACiE;AAJlC,YAHJ,eASE,sBAAC,wCAAD;AAA6B,YAAA,aAAa,EAAE,CAAC,CAAC9D,UAA9C;AAAA,uBACGgC,eAAe,EADlB,EAEGH,gBAAgB,CAAC5B,WAAD,CAFnB;AAAA,YATF;AAAA,UAFJ,eAiBE,sBAAC,8BAAD;AAAA,kCACE,sBAAC,0BAAD;AAAA,uBACG,EAAEL,QAAQ,IAAIC,0BAAd,KAA6CmC,eAAe,EAD/D,EAEGtC,QAAQ,IAAIC,gBAAgB,KAAKoE,6BAAsBC,KAAvD,IAAgEzC,aAAa,CAAC7B,QAAD,EAAWJ,YAAX,aAAWA,YAAX,cAAWA,YAAX,GAA2BF,IAA3B,CAFhF,EAGGK,KAAK,IAAI2B,UAAU,CAAC3B,KAAD,EAAQJ,SAAR,aAAQA,SAAR,cAAQA,SAAR,GAAqBD,IAArB,CAHtB,EAIGM,QAAQ,IAAIC,gBAAgB,KAAKoE,6BAAsBE,KAAvD,IAAgE1C,aAAa,CAAC7B,QAAD,EAAWJ,YAAX,aAAWA,YAAX,cAAWA,YAAX,GAA2BF,IAA3B,CAJhF;AAAA,YADF,eAOE,sBAAC,+BAAD;AAAA,uBACGe,OAAO,IAAIuB,WAAW,CAACvB,OAAD,CADzB,EAEG,EAAEP,QAAQ,IAAIC,0BAAd,KAA6CgC,gBAAgB,CAAC5B,WAAD,CAFhE;AAAA,YAPF;AAAA,UAjBF,eA8BE,qBAAC,sBAAD;AAAW,UAAA,IAAI,EAAEb,IAAjB;AAAA,oBAAwBgB;AAAxB,UA9BF,EAgCGC,IAAI,iBAAI,qBAAC,oBAAD;AAAW,UAAA,IAAI,EAAEA,IAAjB;AAAuB,UAAA,KAAK,EAAEC,KAA9B;AAAqC,UAAA,IAAI,EAAElB,IAA3C;AAAiD,UAAA,IAAI,EAAEmB;AAAvD,UAhCX,eAkCE,sBAAC,wBAAD;AAAa,UAAA,IAAI,EAAEnB,IAAnB;AAAA,qBACGW,gBAAgB,IAAIqC,gBAAgB,CAACrC,gBAAD,CADvC,EAEGD,OAFH,aAEGA,OAFH,uBAEGA,OAAO,CAAEoE,GAAT,CAAa,UAACC,CAAD,EAAIC,CAAJ;AAAA,gCACZ,qBAAC,cAAD;AAAwB,cAAA,EAAE,EAAED,CAAC,CAACE,EAA9B;AAAkC,cAAA,QAAQ,EAAEF,CAAC,CAAC5B,QAA9C;AAAwD,cAAA,OAAO,EAAE4B,CAAC,CAACzB,OAAnE;AAA4E,cAAA,IAAI,EAAEtD,IAAlF;AAAwF,cAAA,OAAO,EAAE+E,CAAC,CAAC3B,MAAnG;AAA2G,cAAA,IAAI,EAAE2B,CAAC,CAAC1B,IAAnH;AAAyH,cAAA,OAAO,EAAE0B,CAAC,CAACxB,OAApI;AAAA,wBACGwB,CAAC,CAAC9B;AADL,eAAa8B,CAAC,CAACE,EAAF,IAAQD,CAArB,CADY;AAAA,WAAb,CAFH;AAAA,UAlCF;AAAA;AADF;AARF,IADF;AAwDD,CA1RM;;;;AApBL7E,EAAAA,W;AACAC,EAAAA,uB;AACAC,EAAAA,K;AACAC,EAAAA,Q;AAEAE,EAAAA,Q;AAEAE,EAAAA,O;AAEAK,EAAAA,O;AACAH,EAAAA,U;AACAC,EAAAA,W;AACAC,EAAAA,Y;AACAG,EAAAA,I;AACAC,EAAAA,K;AACAC,EAAAA,I;AACAC,EAAAA,O;AACAC,EAAAA,M;;eA+RatB,W","sourcesContent":["import React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentS, ComponentTextStyle, ComponentXL, ComponentXS } from '../styles';\nimport { Size, ModalSubtitlePosition } from '../types';\nimport ModalContainer from './ModalContainer';\nimport {\n  BackButtonWrapper,\n  CloseButtonWrapper,\n  Column,\n  FlexContainer,\n  ModalBody,\n  ModalFooter,\n  ModalHeaderActions,\n  ModalHeaderActionsWithImage,\n  ModalTitleSection,\n  StyledModalHeader,\n  ModalHoverModifier,\n} from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { TooltipWrapper } from '../Tooltips';\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { HyperLink, ImageWithFallbacks } from '..';\nimport { ImageWithFallbacksProps } from '../Image/ImageWithFallbacks';\n\ninterface NewModalProps {\n  size?: Size;\n  titleSize?: Size;\n  subtitleSize?: Size;\n  isModalOpen: boolean;\n  closeModalAndClearInput: any;\n  title?: string;\n  subtitle?: string;\n  subtitlePosition?: ModalSubtitlePosition;\n  topImage?: any;\n  topImageWithFallbacksProps?: ImageWithFallbacksProps;\n  buttons?: ButtonAction[];\n  leftFooterAction?: LeftFooterAction;\n  tooltip?: string;\n  backButton?: () => void;\n  closeAction: () => void;\n  submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n  note?: string | React.ReactNode;\n  state?: string;\n  icon?: React.ReactNode;\n  yOffset?: number;\n  zIndex?: number;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  titleSize,\n  subtitleSize,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  subtitle,\n  subtitlePosition,\n  topImage,\n  topImageWithFallbacksProps,\n  buttons,\n  leftFooterAction,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n  children,\n  note,\n  state,\n  icon,\n  yOffset,\n  zIndex,\n}) => {\n  const getMinWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '320px';\n      case Size.Large:\n        return '640px';\n      case Size.Medium:\n      default:\n        return '480px';\n    }\n  };\n\n  const getMaxWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '480px';\n      case Size.Large:\n        return '720px';\n      case Size.Medium:\n      default:\n        return '640px';\n    }\n  };\n\n  const getImageHeight = () => {\n    switch (size) {\n      case Size.Small:\n        return 160;\n      case Size.Medium:\n        return 200;\n      case Size.Large:\n        return 240;\n      default:\n        return 200;\n    }\n  };\n\n  const getMarginBottom = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px';\n      case Size.Medium:\n        return '24px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px';\n    }\n  };\n\n  const getPadding = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px 16px 8px';\n      case Size.Medium:\n        return '24px 24px 20px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px 24px 16px';\n    }\n  };\n\n  const getMaxHeight = () => {\n    switch (size) {\n      case Size.Small:\n        return 'calc(100vh - 56px)';\n      case Size.Medium:\n        return 'calc(100vh - 76px)';\n      case Size.Large:\n        return 'calc(100vh - 96px)';\n      default:\n        return 'calc(100vh - 72px)';\n    }\n  };\n\n  const ModalTitle = (title: string, size?: Size) => {\n    switch (size) {\n      case Size.Small:\n        return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n      case Size.Medium:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n      case Size.Large:\n        return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n      default:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n    }\n  };\n\n  const ModalSubtitle = (subtitle: string, size?: Size) => {\n    switch (size) {\n      case Size.Small:\n        return <ComponentXS color={COLORS.neutral_500}>{subtitle}</ComponentXS>;\n      case Size.Medium:\n        return <ComponentS color={COLORS.neutral_500}>{subtitle}</ComponentS>;\n      case Size.Large:\n        return <ComponentM color={COLORS.neutral_500}>{subtitle}</ComponentM>;\n      default:\n        return <ComponentS color={COLORS.neutral_500}>{subtitle}</ComponentS>;\n    }\n  };\n\n  const ModalTootip = (tooltip: string) => {\n    return (\n      <ModalHoverModifier>\n        <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"top\" withArrow={false} label={tooltip}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => {}}>\n            <Help size=\"24px\" color={COLORS.neutral_600} />\n          </IconButton>\n        </TooltipWrapper>\n      </ModalHoverModifier>\n    );\n  };\n\n  const ModalCloseButton = (onClick: any) => {\n    return (\n      <CloseButtonWrapper hasImage={!!topImage || !!topImageWithFallbacksProps} size={size}>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n          <Close size=\"24px\" color={COLORS.black} />\n        </IconButton>\n      </CloseButtonWrapper>\n    );\n  };\n\n  const ModalBackButton = () => {\n    if (backButton) {\n      return (\n        <BackButtonWrapper hasImage={!!topImage || !!topImageWithFallbacksProps} size={size}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n            <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n          </IconButton>\n        </BackButtonWrapper>\n      );\n    }\n  };\n\n  const getLeftActionIconElement = (icon: React.ReactNode) => {\n    return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n  };\n\n  const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n    const { text, actionType, disabled, icon, action } = leftFooterAction;\n    switch (actionType) {\n      case 'button':\n        return (\n          <Button\n            id={'left-action-button'}\n            type={(leftFooterAction as LeftFooterButton)?.type}\n            disabled={disabled}\n            loading={(leftFooterAction as LeftFooterButton)?.loading}\n            icon={icon}\n            size={size}\n            onClick={action}\n            variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n            style={{ order: -1, marginRight: 'auto' }}>\n            {text}\n          </Button>\n        );\n      case 'hyperlink':\n        return (\n          <HyperLink\n            id=\"left-action-hyperlink\"\n            className=\"footer-action\"\n            href={(leftFooterAction as LeftFooterHyperlink).href}\n            disabled={disabled}\n            variant=\"default\"\n            onClick={(e) => {\n              if (action) {\n                e.preventDefault();\n                action(e);\n              }\n            }}>\n            {icon && getLeftActionIconElement(icon)}\n            {text}\n          </HyperLink>\n        );\n      case 'note':\n        return (\n          <div className=\"footer-action note\">\n            {icon && getLeftActionIconElement(icon)}\n            <span>{text}</span>\n          </div>\n        );\n    }\n  };\n\n  React.useEffect(() => {\n    let yPos = yOffset ? yOffset : 0;\n    if (isModalOpen) {\n      document.body.setAttribute(\n        'style',\n        `position: fixed;\n                                           left: 0; right: 0;\n                                           top: -${yPos}px`,\n      );\n    }\n    return () => {\n      document.body.setAttribute('style', '');\n      window.scrollTo(0, yPos);\n    };\n  }, [isModalOpen]);\n\n  return (\n    <ModalContainer\n      showModal={isModalOpen}\n      closeModal={closeModalAndClearInput}\n      minWidth={getMinWidth()}\n      maxWidth={getMaxWidth()}\n      modalHeight=\"auto\"\n      padding={getPadding()}\n      zIndex={zIndex}>\n      <Column>\n        <form onSubmit={submitAction} style={{ display: 'flex', flexDirection: 'column', maxHeight: getMaxHeight() }}>\n          {(topImage || topImageWithFallbacksProps) && (\n            <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n              {topImage && <img src={topImage} alt=\"Modal top\" />}\n              {!topImage && topImageWithFallbacksProps && (\n                <ImageWithFallbacks\n                  loader={topImageWithFallbacksProps.loader}\n                  alt={topImageWithFallbacksProps.alt}\n                  fallbacks={topImageWithFallbacksProps.fallbacks}\n                  src={topImageWithFallbacksProps.src}></ImageWithFallbacks>\n              )}\n              <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n                {ModalBackButton()}\n                {ModalCloseButton(closeAction)}\n              </ModalHeaderActionsWithImage>\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            <FlexContainer>\n              {!(topImage || topImageWithFallbacksProps) && ModalBackButton()}\n              {subtitle && subtitlePosition === ModalSubtitlePosition.ABOVE && ModalSubtitle(subtitle, subtitleSize ?? size)}\n              {title && ModalTitle(title, titleSize ?? size)}\n              {subtitle && subtitlePosition === ModalSubtitlePosition.BELOW && ModalSubtitle(subtitle, subtitleSize ?? size)}\n            </FlexContainer>\n            <ModalHeaderActions>\n              {tooltip && ModalTootip(tooltip)}\n              {!(topImage || topImageWithFallbacksProps) && ModalCloseButton(closeAction)}\n            </ModalHeaderActions>\n          </ModalTitleSection>\n\n          <ModalBody size={size}>{children}</ModalBody>\n\n          {note && <ModalNote note={note} state={state} size={size} icon={icon} />}\n\n          <ModalFooter size={size}>\n            {leftFooterAction && LeftFooterAction(leftFooterAction)}\n            {buttons?.map((b, i) => (\n              <Button key={b.id || i} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n                {b.text}\n              </Button>\n            ))}\n          </ModalFooter>\n        </form>\n      </Column>\n    </ModalContainer>\n  );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.cjs"}
+{"version":3,"sources":["../../src/Modals/ModalDialog.tsx"],"names":["ModalDialog","size","titleSize","subtitleSize","isModalOpen","closeModalAndClearInput","title","subtitle","subtitlePosition","topImage","topImageWithFallbacksProps","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","icon","yOffset","zIndex","contentOverflow","width","getMinWidth","Size","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","getMaxHeight","ModalTitle","ComponentTextStyle","Bold","ModalSubtitle","COLORS","neutral_500","ModalTootip","XSmall","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","React","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","e","preventDefault","useEffect","yPos","document","body","setAttribute","window","scrollTo","display","flexDirection","maxHeight","loader","alt","fallbacks","src","ModalSubtitlePosition","ABOVE","BELOW","map","b","i","id"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentS, ComponentTextStyle, ComponentXL, ComponentXS } from '../styles';\nimport { Size, ModalSubtitlePosition } from '../types';\nimport ModalContainer from './ModalContainer';\nimport {\n  BackButtonWrapper,\n  CloseButtonWrapper,\n  Column,\n  FlexContainer,\n  ModalBody,\n  ModalFooter,\n  ModalHeaderActions,\n  ModalHeaderActionsWithImage,\n  ModalTitleSection,\n  StyledModalHeader,\n  ModalHoverModifier,\n} from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { TooltipWrapper } from '../Tooltips';\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { HyperLink, ImageWithFallbacks } from '..';\nimport { ImageWithFallbacksProps } from '../Image/ImageWithFallbacks';\n\ninterface NewModalProps {\n  size?: Size;\n  titleSize?: Size;\n  subtitleSize?: Size;\n  isModalOpen: boolean;\n  closeModalAndClearInput: any;\n  title?: string;\n  subtitle?: string;\n  subtitlePosition?: ModalSubtitlePosition;\n  topImage?: any;\n  topImageWithFallbacksProps?: ImageWithFallbacksProps;\n  buttons?: ButtonAction[];\n  leftFooterAction?: LeftFooterAction;\n  tooltip?: string;\n  backButton?: () => void;\n  closeAction: () => void;\n  submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n  note?: string | React.ReactNode;\n  state?: string;\n  icon?: React.ReactNode;\n  yOffset?: number;\n  zIndex?: number;\n  contentOverflow?: string;\n  width?: string;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  titleSize,\n  subtitleSize,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  subtitle,\n  subtitlePosition,\n  topImage,\n  topImageWithFallbacksProps,\n  buttons,\n  leftFooterAction,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n  children,\n  note,\n  state,\n  icon,\n  yOffset,\n  zIndex,\n  contentOverflow,\n  width,\n}) => {\n  const getMinWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '320px';\n      case Size.Large:\n        return '640px';\n      case Size.Medium:\n      default:\n        return '480px';\n    }\n  };\n\n  const getMaxWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '480px';\n      case Size.Large:\n        return '720px';\n      case Size.Medium:\n      default:\n        return '640px';\n    }\n  };\n\n  const getImageHeight = () => {\n    switch (size) {\n      case Size.Small:\n        return 160;\n      case Size.Medium:\n        return 200;\n      case Size.Large:\n        return 240;\n      default:\n        return 200;\n    }\n  };\n\n  const getMarginBottom = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px';\n      case Size.Medium:\n        return '24px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px';\n    }\n  };\n\n  const getPadding = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px 16px 8px';\n      case Size.Medium:\n        return '24px 24px 20px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px 24px 16px';\n    }\n  };\n\n  const getMaxHeight = () => {\n    switch (size) {\n      case Size.Small:\n        return 'calc(100vh - 56px)';\n      case Size.Medium:\n        return 'calc(100vh - 76px)';\n      case Size.Large:\n        return 'calc(100vh - 96px)';\n      default:\n        return 'calc(100vh - 72px)';\n    }\n  };\n\n  const ModalTitle = (title: string, size?: Size) => {\n    switch (size) {\n      case Size.Small:\n        return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n      case Size.Medium:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n      case Size.Large:\n        return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n      default:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n    }\n  };\n\n  const ModalSubtitle = (subtitle: string, size?: Size) => {\n    switch (size) {\n      case Size.Small:\n        return <ComponentXS color={COLORS.neutral_500}>{subtitle}</ComponentXS>;\n      case Size.Medium:\n        return <ComponentS color={COLORS.neutral_500}>{subtitle}</ComponentS>;\n      case Size.Large:\n        return <ComponentM color={COLORS.neutral_500}>{subtitle}</ComponentM>;\n      default:\n        return <ComponentS color={COLORS.neutral_500}>{subtitle}</ComponentS>;\n    }\n  };\n\n  const ModalTootip = (tooltip: string) => {\n    return (\n      <ModalHoverModifier>\n        <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"top\" withArrow={false} label={tooltip}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => {}}>\n            <Help size=\"24px\" color={COLORS.neutral_600} />\n          </IconButton>\n        </TooltipWrapper>\n      </ModalHoverModifier>\n    );\n  };\n\n  const ModalCloseButton = (onClick: any) => {\n    return (\n      <CloseButtonWrapper hasImage={!!topImage || !!topImageWithFallbacksProps} size={size}>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n          <Close size=\"24px\" color={COLORS.black} />\n        </IconButton>\n      </CloseButtonWrapper>\n    );\n  };\n\n  const ModalBackButton = () => {\n    if (backButton) {\n      return (\n        <BackButtonWrapper hasImage={!!topImage || !!topImageWithFallbacksProps} size={size}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n            <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n          </IconButton>\n        </BackButtonWrapper>\n      );\n    }\n  };\n\n  const getLeftActionIconElement = (icon: React.ReactNode) => {\n    return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n  };\n\n  const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n    const { text, actionType, disabled, icon, action } = leftFooterAction;\n    switch (actionType) {\n      case 'button':\n        return (\n          <Button\n            id={'left-action-button'}\n            type={(leftFooterAction as LeftFooterButton)?.type}\n            disabled={disabled}\n            loading={(leftFooterAction as LeftFooterButton)?.loading}\n            icon={icon}\n            size={size}\n            onClick={action}\n            variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n            style={{ order: -1, marginRight: 'auto' }}>\n            {text}\n          </Button>\n        );\n      case 'hyperlink':\n        return (\n          <HyperLink\n            id=\"left-action-hyperlink\"\n            className=\"footer-action\"\n            href={(leftFooterAction as LeftFooterHyperlink).href}\n            disabled={disabled}\n            variant=\"default\"\n            onClick={(e) => {\n              if (action) {\n                e.preventDefault();\n                action(e);\n              }\n            }}>\n            {icon && getLeftActionIconElement(icon)}\n            {text}\n          </HyperLink>\n        );\n      case 'note':\n        return (\n          <div className=\"footer-action note\">\n            {icon && getLeftActionIconElement(icon)}\n            <span>{text}</span>\n          </div>\n        );\n    }\n  };\n\n  React.useEffect(() => {\n    let yPos = yOffset ? yOffset : 0;\n    if (isModalOpen) {\n      document.body.setAttribute(\n        'style',\n        `position: fixed;\n                                           left: 0; right: 0;\n                                           top: -${yPos}px`,\n      );\n    }\n    return () => {\n      document.body.setAttribute('style', '');\n      window.scrollTo(0, yPos);\n    };\n  }, [isModalOpen]);\n\n  return (\n    <ModalContainer\n      showModal={isModalOpen}\n      closeModal={closeModalAndClearInput}\n      minWidth={getMinWidth()}\n      maxWidth={getMaxWidth()}\n      modalHeight=\"auto\"\n      padding={getPadding()}\n      zIndex={zIndex}\n      modalWidth={width}>\n      <Column>\n        <form onSubmit={submitAction} style={{ display: 'flex', flexDirection: 'column', maxHeight: getMaxHeight() }}>\n          {(topImage || topImageWithFallbacksProps) && (\n            <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n              {topImage && <img src={topImage} alt=\"Modal top\" />}\n              {!topImage && topImageWithFallbacksProps && (\n                <ImageWithFallbacks\n                  loader={topImageWithFallbacksProps.loader}\n                  alt={topImageWithFallbacksProps.alt}\n                  fallbacks={topImageWithFallbacksProps.fallbacks}\n                  src={topImageWithFallbacksProps.src}></ImageWithFallbacks>\n              )}\n              <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n                {ModalBackButton()}\n                {ModalCloseButton(closeAction)}\n              </ModalHeaderActionsWithImage>\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            <FlexContainer>\n              {!(topImage || topImageWithFallbacksProps) && ModalBackButton()}\n              {subtitle && subtitlePosition === ModalSubtitlePosition.ABOVE && ModalSubtitle(subtitle, subtitleSize ?? size)}\n              {title && ModalTitle(title, titleSize ?? size)}\n              {subtitle && subtitlePosition === ModalSubtitlePosition.BELOW && ModalSubtitle(subtitle, subtitleSize ?? size)}\n            </FlexContainer>\n            <ModalHeaderActions>\n              {tooltip && ModalTootip(tooltip)}\n              {!(topImage || topImageWithFallbacksProps) && ModalCloseButton(closeAction)}\n            </ModalHeaderActions>\n          </ModalTitleSection>\n\n          <ModalBody size={size} overflow={contentOverflow}>\n            {children}\n          </ModalBody>\n\n          {note && <ModalNote note={note} state={state} size={size} icon={icon} />}\n\n          <ModalFooter size={size}>\n            {leftFooterAction && LeftFooterAction(leftFooterAction)}\n            {buttons?.map((b, i) => (\n              <Button key={b.id || i} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n                {b.text}\n              </Button>\n            ))}\n          </ModalFooter>\n        </form>\n      </Column>\n    </ModalContainer>\n  );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.cjs"}

package/dist/Modals/ModalDialog.d.ts

@@ -24,6 +24,8 @@ interface NewModalProps {
     icon?: React.ReactNode;
     yOffset?: number;
     zIndex?: number;
+    contentOverflow?: string;
+    width?: string;
 }
 export declare const ModalDialog: React.FunctionComponent<NewModalProps>;
 export default ModalDialog;

package/dist/Modals/ModalDialog.js

@@ -33,7 +33,9 @@ export var ModalDialog = function ModalDialog(_ref) {
       state = _ref.state,
       icon = _ref.icon,
       yOffset = _ref.yOffset,
-      zIndex = _ref.zIndex;
+      zIndex = _ref.zIndex,
+      contentOverflow = _ref.contentOverflow,
+      width = _ref.width;
 
   var getMinWidth = function getMinWidth() {
     switch (size) {
@@ -324,6 +326,7 @@ export var ModalDialog = function ModalDialog(_ref) {
     modalHeight: "auto",
     padding: getPadding(),
     zIndex: zIndex,
+    modalWidth: width,
     children: /*#__PURE__*/_jsx(Column, {
       children: /*#__PURE__*/_jsxs("form", {
         onSubmit: submitAction,
@@ -356,6 +359,7 @@ export var ModalDialog = function ModalDialog(_ref) {
           })]
         }), /*#__PURE__*/_jsx(ModalBody, {
           size: size,
+          overflow: contentOverflow,
           children: children
         }), note && /*#__PURE__*/_jsx(ModalNote, {
           note: note,
@@ -396,7 +400,9 @@ ModalDialog.propTypes = {
   state: _pt.string,
   icon: _pt.node,
   yOffset: _pt.number,
-  zIndex: _pt.number
+  zIndex: _pt.number,
+  contentOverflow: _pt.string,
+  width: _pt.string
 };
 export default ModalDialog;
 //# sourceMappingURL=ModalDialog.js.map

package/dist/Modals/ModalDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Modals/ModalDialog.tsx"],"names":["React","Button","IconButton","ArrowLineLeft","Close","Help","COLORS","ComponentL","ComponentM","ComponentS","ComponentTextStyle","ComponentXL","ComponentXS","Size","ModalSubtitlePosition","ModalContainer","BackButtonWrapper","CloseButtonWrapper","Column","FlexContainer","ModalBody","ModalFooter","ModalHeaderActions","ModalHeaderActionsWithImage","ModalTitleSection","StyledModalHeader","ModalHoverModifier","ModalNote","TooltipWrapper","HyperLink","ImageWithFallbacks","ModalDialog","size","titleSize","subtitleSize","isModalOpen","closeModalAndClearInput","title","subtitle","subtitlePosition","topImage","topImageWithFallbacksProps","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","icon","yOffset","zIndex","getMinWidth","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","getMaxHeight","ModalTitle","Bold","ModalSubtitle","neutral_500","ModalTootip","XSmall","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","e","preventDefault","useEffect","yPos","document","body","setAttribute","window","scrollTo","display","flexDirection","maxHeight","loader","alt","fallbacks","src","ABOVE","BELOW","map","b","i","id"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentS, ComponentTextStyle, ComponentXL, ComponentXS } from '../styles';\nimport { Size, ModalSubtitlePosition } from '../types';\nimport ModalContainer from './ModalContainer';\nimport {\n  BackButtonWrapper,\n  CloseButtonWrapper,\n  Column,\n  FlexContainer,\n  ModalBody,\n  ModalFooter,\n  ModalHeaderActions,\n  ModalHeaderActionsWithImage,\n  ModalTitleSection,\n  StyledModalHeader,\n  ModalHoverModifier,\n} from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { TooltipWrapper } from '../Tooltips';\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { HyperLink, ImageWithFallbacks } from '..';\nimport { ImageWithFallbacksProps } from '../Image/ImageWithFallbacks';\n\ninterface NewModalProps {\n  size?: Size;\n  titleSize?: Size;\n  subtitleSize?: Size;\n  isModalOpen: boolean;\n  closeModalAndClearInput: any;\n  title?: string;\n  subtitle?: string;\n  subtitlePosition?: ModalSubtitlePosition;\n  topImage?: any;\n  topImageWithFallbacksProps?: ImageWithFallbacksProps;\n  buttons?: ButtonAction[];\n  leftFooterAction?: LeftFooterAction;\n  tooltip?: string;\n  backButton?: () => void;\n  closeAction: () => void;\n  submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n  note?: string | React.ReactNode;\n  state?: string;\n  icon?: React.ReactNode;\n  yOffset?: number;\n  zIndex?: number;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  titleSize,\n  subtitleSize,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  subtitle,\n  subtitlePosition,\n  topImage,\n  topImageWithFallbacksProps,\n  buttons,\n  leftFooterAction,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n  children,\n  note,\n  state,\n  icon,\n  yOffset,\n  zIndex,\n}) => {\n  const getMinWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '320px';\n      case Size.Large:\n        return '640px';\n      case Size.Medium:\n      default:\n        return '480px';\n    }\n  };\n\n  const getMaxWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '480px';\n      case Size.Large:\n        return '720px';\n      case Size.Medium:\n      default:\n        return '640px';\n    }\n  };\n\n  const getImageHeight = () => {\n    switch (size) {\n      case Size.Small:\n        return 160;\n      case Size.Medium:\n        return 200;\n      case Size.Large:\n        return 240;\n      default:\n        return 200;\n    }\n  };\n\n  const getMarginBottom = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px';\n      case Size.Medium:\n        return '24px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px';\n    }\n  };\n\n  const getPadding = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px 16px 8px';\n      case Size.Medium:\n        return '24px 24px 20px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px 24px 16px';\n    }\n  };\n\n  const getMaxHeight = () => {\n    switch (size) {\n      case Size.Small:\n        return 'calc(100vh - 56px)';\n      case Size.Medium:\n        return 'calc(100vh - 76px)';\n      case Size.Large:\n        return 'calc(100vh - 96px)';\n      default:\n        return 'calc(100vh - 72px)';\n    }\n  };\n\n  const ModalTitle = (title: string, size?: Size) => {\n    switch (size) {\n      case Size.Small:\n        return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n      case Size.Medium:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n      case Size.Large:\n        return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n      default:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n    }\n  };\n\n  const ModalSubtitle = (subtitle: string, size?: Size) => {\n    switch (size) {\n      case Size.Small:\n        return <ComponentXS color={COLORS.neutral_500}>{subtitle}</ComponentXS>;\n      case Size.Medium:\n        return <ComponentS color={COLORS.neutral_500}>{subtitle}</ComponentS>;\n      case Size.Large:\n        return <ComponentM color={COLORS.neutral_500}>{subtitle}</ComponentM>;\n      default:\n        return <ComponentS color={COLORS.neutral_500}>{subtitle}</ComponentS>;\n    }\n  };\n\n  const ModalTootip = (tooltip: string) => {\n    return (\n      <ModalHoverModifier>\n        <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"top\" withArrow={false} label={tooltip}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => {}}>\n            <Help size=\"24px\" color={COLORS.neutral_600} />\n          </IconButton>\n        </TooltipWrapper>\n      </ModalHoverModifier>\n    );\n  };\n\n  const ModalCloseButton = (onClick: any) => {\n    return (\n      <CloseButtonWrapper hasImage={!!topImage || !!topImageWithFallbacksProps} size={size}>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n          <Close size=\"24px\" color={COLORS.black} />\n        </IconButton>\n      </CloseButtonWrapper>\n    );\n  };\n\n  const ModalBackButton = () => {\n    if (backButton) {\n      return (\n        <BackButtonWrapper hasImage={!!topImage || !!topImageWithFallbacksProps} size={size}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n            <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n          </IconButton>\n        </BackButtonWrapper>\n      );\n    }\n  };\n\n  const getLeftActionIconElement = (icon: React.ReactNode) => {\n    return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n  };\n\n  const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n    const { text, actionType, disabled, icon, action } = leftFooterAction;\n    switch (actionType) {\n      case 'button':\n        return (\n          <Button\n            id={'left-action-button'}\n            type={(leftFooterAction as LeftFooterButton)?.type}\n            disabled={disabled}\n            loading={(leftFooterAction as LeftFooterButton)?.loading}\n            icon={icon}\n            size={size}\n            onClick={action}\n            variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n            style={{ order: -1, marginRight: 'auto' }}>\n            {text}\n          </Button>\n        );\n      case 'hyperlink':\n        return (\n          <HyperLink\n            id=\"left-action-hyperlink\"\n            className=\"footer-action\"\n            href={(leftFooterAction as LeftFooterHyperlink).href}\n            disabled={disabled}\n            variant=\"default\"\n            onClick={(e) => {\n              if (action) {\n                e.preventDefault();\n                action(e);\n              }\n            }}>\n            {icon && getLeftActionIconElement(icon)}\n            {text}\n          </HyperLink>\n        );\n      case 'note':\n        return (\n          <div className=\"footer-action note\">\n            {icon && getLeftActionIconElement(icon)}\n            <span>{text}</span>\n          </div>\n        );\n    }\n  };\n\n  React.useEffect(() => {\n    let yPos = yOffset ? yOffset : 0;\n    if (isModalOpen) {\n      document.body.setAttribute(\n        'style',\n        `position: fixed;\n                                           left: 0; right: 0;\n                                           top: -${yPos}px`,\n      );\n    }\n    return () => {\n      document.body.setAttribute('style', '');\n      window.scrollTo(0, yPos);\n    };\n  }, [isModalOpen]);\n\n  return (\n    <ModalContainer\n      showModal={isModalOpen}\n      closeModal={closeModalAndClearInput}\n      minWidth={getMinWidth()}\n      maxWidth={getMaxWidth()}\n      modalHeight=\"auto\"\n      padding={getPadding()}\n      zIndex={zIndex}>\n      <Column>\n        <form onSubmit={submitAction} style={{ display: 'flex', flexDirection: 'column', maxHeight: getMaxHeight() }}>\n          {(topImage || topImageWithFallbacksProps) && (\n            <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n              {topImage && <img src={topImage} alt=\"Modal top\" />}\n              {!topImage && topImageWithFallbacksProps && (\n                <ImageWithFallbacks\n                  loader={topImageWithFallbacksProps.loader}\n                  alt={topImageWithFallbacksProps.alt}\n                  fallbacks={topImageWithFallbacksProps.fallbacks}\n                  src={topImageWithFallbacksProps.src}></ImageWithFallbacks>\n              )}\n              <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n                {ModalBackButton()}\n                {ModalCloseButton(closeAction)}\n              </ModalHeaderActionsWithImage>\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            <FlexContainer>\n              {!(topImage || topImageWithFallbacksProps) && ModalBackButton()}\n              {subtitle && subtitlePosition === ModalSubtitlePosition.ABOVE && ModalSubtitle(subtitle, subtitleSize ?? size)}\n              {title && ModalTitle(title, titleSize ?? size)}\n              {subtitle && subtitlePosition === ModalSubtitlePosition.BELOW && ModalSubtitle(subtitle, subtitleSize ?? size)}\n            </FlexContainer>\n            <ModalHeaderActions>\n              {tooltip && ModalTootip(tooltip)}\n              {!(topImage || topImageWithFallbacksProps) && ModalCloseButton(closeAction)}\n            </ModalHeaderActions>\n          </ModalTitleSection>\n\n          <ModalBody size={size}>{children}</ModalBody>\n\n          {note && <ModalNote note={note} state={state} size={size} icon={icon} />}\n\n          <ModalFooter size={size}>\n            {leftFooterAction && LeftFooterAction(leftFooterAction)}\n            {buttons?.map((b, i) => (\n              <Button key={b.id || i} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n                {b.text}\n              </Button>\n            ))}\n          </ModalFooter>\n        </form>\n      </Column>\n    </ModalContainer>\n  );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}
+{"version":3,"sources":["../../src/Modals/ModalDialog.tsx"],"names":["React","Button","IconButton","ArrowLineLeft","Close","Help","COLORS","ComponentL","ComponentM","ComponentS","ComponentTextStyle","ComponentXL","ComponentXS","Size","ModalSubtitlePosition","ModalContainer","BackButtonWrapper","CloseButtonWrapper","Column","FlexContainer","ModalBody","ModalFooter","ModalHeaderActions","ModalHeaderActionsWithImage","ModalTitleSection","StyledModalHeader","ModalHoverModifier","ModalNote","TooltipWrapper","HyperLink","ImageWithFallbacks","ModalDialog","size","titleSize","subtitleSize","isModalOpen","closeModalAndClearInput","title","subtitle","subtitlePosition","topImage","topImageWithFallbacksProps","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","icon","yOffset","zIndex","contentOverflow","width","getMinWidth","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","getMaxHeight","ModalTitle","Bold","ModalSubtitle","neutral_500","ModalTootip","XSmall","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","e","preventDefault","useEffect","yPos","document","body","setAttribute","window","scrollTo","display","flexDirection","maxHeight","loader","alt","fallbacks","src","ABOVE","BELOW","map","b","i","id"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentS, ComponentTextStyle, ComponentXL, ComponentXS } from '../styles';\nimport { Size, ModalSubtitlePosition } from '../types';\nimport ModalContainer from './ModalContainer';\nimport {\n  BackButtonWrapper,\n  CloseButtonWrapper,\n  Column,\n  FlexContainer,\n  ModalBody,\n  ModalFooter,\n  ModalHeaderActions,\n  ModalHeaderActionsWithImage,\n  ModalTitleSection,\n  StyledModalHeader,\n  ModalHoverModifier,\n} from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { TooltipWrapper } from '../Tooltips';\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { HyperLink, ImageWithFallbacks } from '..';\nimport { ImageWithFallbacksProps } from '../Image/ImageWithFallbacks';\n\ninterface NewModalProps {\n  size?: Size;\n  titleSize?: Size;\n  subtitleSize?: Size;\n  isModalOpen: boolean;\n  closeModalAndClearInput: any;\n  title?: string;\n  subtitle?: string;\n  subtitlePosition?: ModalSubtitlePosition;\n  topImage?: any;\n  topImageWithFallbacksProps?: ImageWithFallbacksProps;\n  buttons?: ButtonAction[];\n  leftFooterAction?: LeftFooterAction;\n  tooltip?: string;\n  backButton?: () => void;\n  closeAction: () => void;\n  submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n  note?: string | React.ReactNode;\n  state?: string;\n  icon?: React.ReactNode;\n  yOffset?: number;\n  zIndex?: number;\n  contentOverflow?: string;\n  width?: string;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  titleSize,\n  subtitleSize,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  subtitle,\n  subtitlePosition,\n  topImage,\n  topImageWithFallbacksProps,\n  buttons,\n  leftFooterAction,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n  children,\n  note,\n  state,\n  icon,\n  yOffset,\n  zIndex,\n  contentOverflow,\n  width,\n}) => {\n  const getMinWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '320px';\n      case Size.Large:\n        return '640px';\n      case Size.Medium:\n      default:\n        return '480px';\n    }\n  };\n\n  const getMaxWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '480px';\n      case Size.Large:\n        return '720px';\n      case Size.Medium:\n      default:\n        return '640px';\n    }\n  };\n\n  const getImageHeight = () => {\n    switch (size) {\n      case Size.Small:\n        return 160;\n      case Size.Medium:\n        return 200;\n      case Size.Large:\n        return 240;\n      default:\n        return 200;\n    }\n  };\n\n  const getMarginBottom = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px';\n      case Size.Medium:\n        return '24px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px';\n    }\n  };\n\n  const getPadding = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px 16px 8px';\n      case Size.Medium:\n        return '24px 24px 20px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px 24px 16px';\n    }\n  };\n\n  const getMaxHeight = () => {\n    switch (size) {\n      case Size.Small:\n        return 'calc(100vh - 56px)';\n      case Size.Medium:\n        return 'calc(100vh - 76px)';\n      case Size.Large:\n        return 'calc(100vh - 96px)';\n      default:\n        return 'calc(100vh - 72px)';\n    }\n  };\n\n  const ModalTitle = (title: string, size?: Size) => {\n    switch (size) {\n      case Size.Small:\n        return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n      case Size.Medium:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n      case Size.Large:\n        return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n      default:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n    }\n  };\n\n  const ModalSubtitle = (subtitle: string, size?: Size) => {\n    switch (size) {\n      case Size.Small:\n        return <ComponentXS color={COLORS.neutral_500}>{subtitle}</ComponentXS>;\n      case Size.Medium:\n        return <ComponentS color={COLORS.neutral_500}>{subtitle}</ComponentS>;\n      case Size.Large:\n        return <ComponentM color={COLORS.neutral_500}>{subtitle}</ComponentM>;\n      default:\n        return <ComponentS color={COLORS.neutral_500}>{subtitle}</ComponentS>;\n    }\n  };\n\n  const ModalTootip = (tooltip: string) => {\n    return (\n      <ModalHoverModifier>\n        <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"top\" withArrow={false} label={tooltip}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => {}}>\n            <Help size=\"24px\" color={COLORS.neutral_600} />\n          </IconButton>\n        </TooltipWrapper>\n      </ModalHoverModifier>\n    );\n  };\n\n  const ModalCloseButton = (onClick: any) => {\n    return (\n      <CloseButtonWrapper hasImage={!!topImage || !!topImageWithFallbacksProps} size={size}>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n          <Close size=\"24px\" color={COLORS.black} />\n        </IconButton>\n      </CloseButtonWrapper>\n    );\n  };\n\n  const ModalBackButton = () => {\n    if (backButton) {\n      return (\n        <BackButtonWrapper hasImage={!!topImage || !!topImageWithFallbacksProps} size={size}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n            <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n          </IconButton>\n        </BackButtonWrapper>\n      );\n    }\n  };\n\n  const getLeftActionIconElement = (icon: React.ReactNode) => {\n    return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n  };\n\n  const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n    const { text, actionType, disabled, icon, action } = leftFooterAction;\n    switch (actionType) {\n      case 'button':\n        return (\n          <Button\n            id={'left-action-button'}\n            type={(leftFooterAction as LeftFooterButton)?.type}\n            disabled={disabled}\n            loading={(leftFooterAction as LeftFooterButton)?.loading}\n            icon={icon}\n            size={size}\n            onClick={action}\n            variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n            style={{ order: -1, marginRight: 'auto' }}>\n            {text}\n          </Button>\n        );\n      case 'hyperlink':\n        return (\n          <HyperLink\n            id=\"left-action-hyperlink\"\n            className=\"footer-action\"\n            href={(leftFooterAction as LeftFooterHyperlink).href}\n            disabled={disabled}\n            variant=\"default\"\n            onClick={(e) => {\n              if (action) {\n                e.preventDefault();\n                action(e);\n              }\n            }}>\n            {icon && getLeftActionIconElement(icon)}\n            {text}\n          </HyperLink>\n        );\n      case 'note':\n        return (\n          <div className=\"footer-action note\">\n            {icon && getLeftActionIconElement(icon)}\n            <span>{text}</span>\n          </div>\n        );\n    }\n  };\n\n  React.useEffect(() => {\n    let yPos = yOffset ? yOffset : 0;\n    if (isModalOpen) {\n      document.body.setAttribute(\n        'style',\n        `position: fixed;\n                                           left: 0; right: 0;\n                                           top: -${yPos}px`,\n      );\n    }\n    return () => {\n      document.body.setAttribute('style', '');\n      window.scrollTo(0, yPos);\n    };\n  }, [isModalOpen]);\n\n  return (\n    <ModalContainer\n      showModal={isModalOpen}\n      closeModal={closeModalAndClearInput}\n      minWidth={getMinWidth()}\n      maxWidth={getMaxWidth()}\n      modalHeight=\"auto\"\n      padding={getPadding()}\n      zIndex={zIndex}\n      modalWidth={width}>\n      <Column>\n        <form onSubmit={submitAction} style={{ display: 'flex', flexDirection: 'column', maxHeight: getMaxHeight() }}>\n          {(topImage || topImageWithFallbacksProps) && (\n            <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n              {topImage && <img src={topImage} alt=\"Modal top\" />}\n              {!topImage && topImageWithFallbacksProps && (\n                <ImageWithFallbacks\n                  loader={topImageWithFallbacksProps.loader}\n                  alt={topImageWithFallbacksProps.alt}\n                  fallbacks={topImageWithFallbacksProps.fallbacks}\n                  src={topImageWithFallbacksProps.src}></ImageWithFallbacks>\n              )}\n              <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n                {ModalBackButton()}\n                {ModalCloseButton(closeAction)}\n              </ModalHeaderActionsWithImage>\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            <FlexContainer>\n              {!(topImage || topImageWithFallbacksProps) && ModalBackButton()}\n              {subtitle && subtitlePosition === ModalSubtitlePosition.ABOVE && ModalSubtitle(subtitle, subtitleSize ?? size)}\n              {title && ModalTitle(title, titleSize ?? size)}\n              {subtitle && subtitlePosition === ModalSubtitlePosition.BELOW && ModalSubtitle(subtitle, subtitleSize ?? size)}\n            </FlexContainer>\n            <ModalHeaderActions>\n              {tooltip && ModalTootip(tooltip)}\n              {!(topImage || topImageWithFallbacksProps) && ModalCloseButton(closeAction)}\n            </ModalHeaderActions>\n          </ModalTitleSection>\n\n          <ModalBody size={size} overflow={contentOverflow}>\n            {children}\n          </ModalBody>\n\n          {note && <ModalNote note={note} state={state} size={size} icon={icon} />}\n\n          <ModalFooter size={size}>\n            {leftFooterAction && LeftFooterAction(leftFooterAction)}\n            {buttons?.map((b, i) => (\n              <Button key={b.id || i} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n                {b.text}\n              </Button>\n            ))}\n          </ModalFooter>\n        </form>\n      </Column>\n    </ModalContainer>\n  );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}

package/dist/Modals/ModalStyles.cjs

@@ -96,7 +96,11 @@ var ModalNoteSection = _styledComponents.default.section(_templateObject14 || (_
 
 exports.ModalNoteSection = ModalNoteSection;
 
-var ModalBody = _styledComponents.default.section(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 1 auto;\n  overflow: auto;\n\n  /* width */\n\n  ::-webkit-scrollbar {\n    width: 4px;\n\n    cursor: pointer;\n  }\n\n  /* Track */\n\n  ::-webkit-scrollbar-track {\n    background: ", ";\n\n    border-radius: 8px;\n  }\n\n  /* Handle */\n\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n\n  ::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n\n  > :first-child {\n    margin-top: 24px;\n  }\n\n  > :last-child {\n    margin-bottom: ", ";\n  }\n\n  p: first-of-type {\n    padding-bottom: ", ";\n  }\n"])), _.COLORS.neutral_100, _.COLORS.neutral_600, _.COLORS.neutral_500, function (props) {
+var ModalBody = _styledComponents.default.section(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 1 auto;\n  overflow: ", ";\n\n  /* width */\n\n  ::-webkit-scrollbar {\n    width: 4px;\n\n    cursor: pointer;\n  }\n\n  /* Track */\n\n  ::-webkit-scrollbar-track {\n    background: ", ";\n\n    border-radius: 8px;\n  }\n\n  /* Handle */\n\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n\n  ::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n\n  > :first-child {\n    margin-top: 24px;\n  }\n\n  > :last-child {\n    margin-bottom: ", ";\n  }\n\n  p: first-of-type {\n    padding-bottom: ", ";\n  }\n"])), function (props) {
+  var _props$overflow;
+
+  return (_props$overflow = props === null || props === void 0 ? void 0 : props.overflow) !== null && _props$overflow !== void 0 ? _props$overflow : 'unset';
+}, _.COLORS.neutral_100, _.COLORS.neutral_600, _.COLORS.neutral_500, function (props) {
   return (props === null || props === void 0 ? void 0 : props.size) === 'small' ? "8px" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '24px' : '16px';
 }, function (props) {
   return (props === null || props === void 0 ? void 0 : props.size) === 'small' ? "8px" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '24px' : '16px';