@laerdal/life-react-components 1.4.0 → 1.4.1-dev.11

package/dist/cjs/Modals/Modal.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ModalCloseButton = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Button = require("../Button");
+
+var _SystemIcons = require("../icons/systemicons/SystemIcons");
+
+var _styles = require("../styles");
+
+var _ModalStyles = require("./ModalStyles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * Modal styles
+ */
+var Column = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n"])));
+
+var StyledButton = (0, _styledComponents.default)(_Button.IconButton)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n"])));
+
+var ModalCloseButton = function ModalCloseButton(_ref) {
+  var onClick = _ref.onClick;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledButton, {
+    variant: "secondary",
+    shape: "square",
+    action: onClick,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.Close, {
+      size: "24px",
+      color: _styles.COLORS.black
+    })
+  });
+};
+
+exports.ModalCloseButton = ModalCloseButton;
+
+var Modal = function Modal(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Column, {
+    children: children
+  });
+};
+
+Modal.propTypes = {
+  children: _propTypes.default.any.isRequired
+};
+
+Modal.Header = function (_ref3) {
+  var children = _ref3.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalStyles.ModalHeader, {
+    children: children
+  });
+};
+
+Modal.Body = function (_ref4) {
+  var children = _ref4.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalStyles.ModalBody, {
+    children: children
+  });
+};
+
+Modal.Footer = function (_ref5) {
+  var children = _ref5.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalStyles.ModalFooter, {
+    children: children
+  });
+};
+
+var _default = Modal;
+exports.default = _default;
+//# sourceMappingURL=Modal.js.map

package/dist/cjs/Modals/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Modals/Modal.tsx"],"names":["Column","styled","div","StyledButton","IconButton","ModalCloseButton","onClick","COLORS","black","Modal","children","Header","Body","Footer"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA;AACA;AACA;AACA,IAAMA,MAAM,GAAGC,0BAAOC,GAAV,gLAAZ;;AAOA,IAAMC,YAAY,GAAG,+BAAOC,kBAAP,CAAH,yGAAlB;;AAIO,IAAMC,gBAAkE,GAAG,SAArEA,gBAAqE,OAAiB;AAAA,MAAdC,OAAc,QAAdA,OAAc;AACjG,sBACE,qBAAC,YAAD;AAAc,IAAA,OAAO,EAAC,WAAtB;AAAkC,IAAA,KAAK,EAAC,QAAxC;AAAiD,IAAA,MAAM,EAAEA,OAAzD;AAAA,2BACE,qBAAC,kBAAD;AAAO,MAAA,IAAI,EAAC,MAAZ;AAAmB,MAAA,KAAK,EAAEC,eAAOC;AAAjC;AADF,IADF;AAKD,CANM;;;;AAYP,IAAMC,KAAK,GAAG,SAARA,KAAQ;AAAA,MAAGC,QAAH,SAAGA,QAAH;AAAA,sBAA8B,qBAAC,MAAD;AAAA,cAASA;AAAT,IAA9B;AAAA,CAAd;;;AAHEA,EAAAA,Q;;;AAKFD,KAAK,CAACE,MAAN,GAAe;AAAA,MAAGD,QAAH,SAAGA,QAAH;AAAA,sBAA8B,qBAAC,wBAAD;AAAA,cAAcA;AAAd,IAA9B;AAAA,CAAf;;AAEAD,KAAK,CAACG,IAAN,GAAa;AAAA,MAAGF,QAAH,SAAGA,QAAH;AAAA,sBAA8B,qBAAC,sBAAD;AAAA,cAAYA;AAAZ,IAA9B;AAAA,CAAb;;AAEAD,KAAK,CAACI,MAAN,GAAe;AAAA,MAAGH,QAAH,SAAGA,QAAH;AAAA,sBAA8B,qBAAC,wBAAD;AAAA,cAAcA;AAAd,IAA9B;AAAA,CAAf;;eAEeD,K","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { IconButton } from '../Button';\nimport { Close } from '../icons/systemicons/SystemIcons';\nimport { COLORS } from '../styles';\nimport { ModalHeader, ModalBody, ModalFooter } from './ModalStyles';\n\n/**\n * Modal styles\n */\nconst Column = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n`;\n\nconst StyledButton = styled(IconButton)`\n  display: flex;\n`;\n\nexport const ModalCloseButton: React.FunctionComponent<{ onClick: () => void }> = ({ onClick }) => {\n  return (\n    <StyledButton variant=\"secondary\" shape=\"square\" action={onClick}>\n      <Close size=\"24px\" color={COLORS.black} />\n    </StyledButton>\n  );\n};\n\ntype ModalProps = {\n  children: any;\n};\n\nconst Modal = ({ children }: ModalProps) => <Column>{children}</Column>;\n\nModal.Header = ({ children }: ModalProps) => <ModalHeader>{children}</ModalHeader>;\n\nModal.Body = ({ children }: ModalProps) => <ModalBody>{children}</ModalBody>;\n\nModal.Footer = ({ children }: ModalProps) => <ModalFooter>{children}</ModalFooter>;\n\nexport default Modal;\n"],"file":"Modal.js"}

package/dist/cjs/Modals/ModalContainer.js

@@ -0,0 +1,176 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _reactModal = _interopRequireDefault(require("react-modal"));
+
+var _styles = require("../styles");
+
+var _zIndexes = require("../styles/z-indexes");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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) { (0, _defineProperty2.default)(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; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var ModalContainerStyles = {
+  content: {
+    top: '50%',
+    left: '50%',
+    right: 'auto',
+    bottom: 'auto',
+    marginRight: '-50%',
+    width: '640px',
+    height: '320px',
+    borderRadius: '8px',
+    boxSizing: 'border-box',
+    margin: 0,
+    overflow: 'auto',
+    boxShadow: _styles.BOXSHADOWS.BOXSHADOW_L3
+  }
+}; //override modal classes to define the animations
+
+var modalTransitions = "\n.ReactModal__Overlay {\n  opacity: 0;\n  z-index: ".concat(_zIndexes.Z_INDEXES.backdrop, ";\n}\n\n.ReactModal__Overlay--after-open {\n  opacity: 1;\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n  z-index: ").concat(_zIndexes.Z_INDEXES.modal, ";\n  opacity:0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1.0, 1.0);\n  transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Overlay--before-close {\n  opacity: 0;\n  transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n  opacity: 0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n\n.ReactModal__Body--open,\n.ReactModal__Html--open {\n  overflow: hidden;\n}\n");
+
+var ModalContainer = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(ModalContainer, _React$Component);
+
+  var _super = _createSuper(ModalContainer);
+
+  function ModalContainer() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, ModalContainer);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "GetSize", function () {
+      var modalHeight = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'auto';
+      var modalWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'auto';
+      return {
+        height: modalHeight,
+        width: modalWidth
+      };
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "GetOverflow", function () {
+      var modalOverflow = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'visible';
+      return modalOverflow;
+    });
+    return _this;
+  }
+
+  (0, _createClass2.default)(ModalContainer, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (_reactModal.default.defaultStyles.overlay) {
+        _reactModal.default.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';
+      } //append style node to override modal transition classes
+
+
+      if (!document.querySelector('[modal-custom-styling="active"]')) {
+        var head = document.head || document.getElementsByTagName('head')[0];
+        var style = document.createElement('style');
+        style.setAttribute('modal-custom-styling', 'active');
+        head.appendChild(style);
+        style.appendChild(document.createTextNode(modalTransitions));
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          id = _this$props.id,
+          showModal = _this$props.showModal,
+          closeModal = _this$props.closeModal,
+          children = _this$props.children,
+          modalHeight = _this$props.modalHeight,
+          modalWidth = _this$props.modalWidth,
+          modalOverflow = _this$props.modalOverflow,
+          padding = _this$props.padding,
+          _this$props$minWidth = _this$props.minWidth,
+          minWidth = _this$props$minWidth === void 0 ? '' : _this$props$minWidth,
+          _this$props$maxWidth = _this$props.maxWidth,
+          maxWidth = _this$props$maxWidth === void 0 ? '' : _this$props$maxWidth;
+      var sizes = this.GetSize(modalHeight, modalWidth);
+      var height = sizes.height,
+          width = sizes.width;
+      var overflow = this.GetOverflow(modalOverflow);
+      var stylesConfiguration = Object.assign(_objectSpread({}, ModalContainerStyles.content), {
+        height: height,
+        width: width,
+        padding: padding,
+        overflow: overflow,
+        minWidth: minWidth,
+        maxWidth: maxWidth
+      });
+      var styles = {
+        content: stylesConfiguration
+      };
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactModal.default, {
+        id: id,
+        isOpen: showModal,
+        closeTimeoutMS: 120,
+        onRequestClose: function onRequestClose() {
+          return closeModal();
+        },
+        style: styles,
+        appElement: document.getElementById('root') || '',
+        children: children
+      });
+    }
+  }]);
+  return ModalContainer;
+}(React.Component);
+
+(0, _defineProperty2.default)(ModalContainer, "propTypes", {
+  id: _propTypes.default.string,
+  showModal: _propTypes.default.bool.isRequired,
+  closeModal: _propTypes.default.func.isRequired,
+  children: _propTypes.default.any.isRequired,
+  modalHeight: _propTypes.default.any,
+  modalWidth: _propTypes.default.any,
+  modalOverflow: _propTypes.default.string,
+  padding: _propTypes.default.string,
+  minWidth: _propTypes.default.string,
+  maxWidth: _propTypes.default.string
+});
+var _default = ModalContainer;
+exports.default = _default;
+//# sourceMappingURL=ModalContainer.js.map

package/dist/cjs/Modals/ModalContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Modals/ModalContainer.tsx"],"names":["ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOWS","BOXSHADOW_L3","modalTransitions","Z_INDEXES","backdrop","modal","ModalContainer","modalHeight","modalWidth","modalOverflow","ReactModal","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","props","id","showModal","closeModal","children","padding","minWidth","maxWidth","sizes","GetSize","GetOverflow","stylesConfiguration","Object","assign","styles","getElementById","React","Component"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\nimport { BOXSHADOWS } from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst ModalContainerStyles = {\n  content: {\n    top: '50%',\n    left: '50%',\n    right: 'auto',\n    bottom: 'auto',\n    marginRight: '-50%',\n    width: '640px',\n    height: '320px',\n    borderRadius: '8px',\n    boxSizing: 'border-box' as any,\n    margin: 0,\n    overflow: 'auto',\n    boxShadow: BOXSHADOWS.BOXSHADOW_L3,\n  },\n};\n\n//override modal classes to define the animations\nconst modalTransitions = `\n.ReactModal__Overlay {\n  opacity: 0;\n  z-index: ${Z_INDEXES.backdrop};\n}\n\n.ReactModal__Overlay--after-open {\n  opacity: 1;\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n  z-index: ${Z_INDEXES.modal};\n  opacity:0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1.0, 1.0);\n  transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Overlay--before-close {\n  opacity: 0;\n  transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n  opacity: 0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n\n.ReactModal__Body--open,\n.ReactModal__Html--open {\n  overflow: hidden;\n}\n`;\n\ntype ModalContainerProps = {\n  id?: string;\n  showModal: boolean;\n  closeModal: () => void;\n  children: any;\n  modalHeight?: any;\n  modalWidth?: any;\n  modalOverflow?: string;\n  padding?: string;\n  minWidth?: string;\n  maxWidth?: string;\n};\n\ntype ModalContainerState = {};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\n  componentDidMount() {\n    if (ReactModal.defaultStyles.overlay) {\n      ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\n    }\n\n    //append style node to override modal transition classes\n    if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\n      const head = document.head || document.getElementsByTagName('head')[0];\n      const style = document.createElement('style');\n      style.setAttribute('modal-custom-styling', 'active');\n      head.appendChild(style);\n      style.appendChild(document.createTextNode(modalTransitions));\n    }\n  }\n\n  GetSize = (modalHeight: string = 'auto', modalWidth: string = 'auto') => ({ height: modalHeight, width: modalWidth });\n  GetOverflow = (modalOverflow: string = 'visible') => modalOverflow;\n  render() {\n    const { id, showModal, closeModal, children, modalHeight, modalWidth, modalOverflow, padding, minWidth = '', maxWidth = '' } = this.props;\n    const sizes = this.GetSize(modalHeight, modalWidth);\n    const { height, width } = sizes;\n    const overflow = this.GetOverflow(modalOverflow);\n    const stylesConfiguration = Object.assign({ ...ModalContainerStyles.content }, { height, width, padding, overflow, minWidth, maxWidth });\n    const styles = { content: stylesConfiguration };\n\n    return (\n      <ReactModal id={id} isOpen={showModal} closeTimeoutMS={120} onRequestClose={() => closeModal()} style={styles} appElement={document.getElementById('root') || ''}>\n        {children}\n      </ReactModal>\n    );\n  }\n}\n\nexport default ModalContainer;\n"],"file":"ModalContainer.js"}

package/dist/cjs/Modals/ModalDialog.js

@@ -0,0 +1,348 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ModalDialog = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Button = require("../Button");
+
+var _SystemIcons = require("../icons/systemicons/SystemIcons");
+
+var _styles = require("../styles");
+
+var _types = require("../types");
+
+var _ModalContainer = _interopRequireDefault(require("./ModalContainer"));
+
+var _ModalStyles = require("./ModalStyles");
+
+var _ModalNote = require("./ModalNote");
+
+var _Tooltips = require("../Tooltips");
+
+var _ = require("..");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var ModalDialog = function ModalDialog(_ref) {
+  var size = _ref.size,
+      isModalOpen = _ref.isModalOpen,
+      closeModalAndClearInput = _ref.closeModalAndClearInput,
+      title = _ref.title,
+      topImage = _ref.topImage,
+      buttons = _ref.buttons,
+      leftFooterAction = _ref.leftFooterAction,
+      backButton = _ref.backButton,
+      closeAction = _ref.closeAction,
+      submitAction = _ref.submitAction,
+      tooltip = _ref.tooltip,
+      children = _ref.children,
+      note = _ref.note,
+      state = _ref.state,
+      icon = _ref.icon;
+
+  var getMinWidth = function getMinWidth() {
+    switch (size) {
+      case _types.Size.Small:
+        return '320px';
+
+      case _types.Size.Large:
+        return '640px';
+
+      case _types.Size.Medium:
+      default:
+        return '480px';
+    }
+  };
+
+  var getMaxWidth = function getMaxWidth() {
+    switch (size) {
+      case _types.Size.Small:
+        return '480px';
+
+      case _types.Size.Large:
+        return '720px';
+
+      case _types.Size.Medium:
+      default:
+        return '640px';
+    }
+  };
+
+  var getImageHeight = function getImageHeight() {
+    switch (size) {
+      case _types.Size.Small:
+        return 160;
+
+      case _types.Size.Medium:
+        return 200;
+
+      case _types.Size.Large:
+        return 240;
+
+      default:
+        return 200;
+    }
+  };
+
+  var getMarginBottom = function getMarginBottom() {
+    switch (size) {
+      case _types.Size.Small:
+        return '16px';
+
+      case _types.Size.Medium:
+        return '24px';
+
+      case _types.Size.Large:
+        return '32px';
+
+      default:
+        return '24px';
+    }
+  };
+
+  var getPadding = function getPadding() {
+    switch (size) {
+      case _types.Size.Small:
+        return '16px 16px 8px';
+
+      case _types.Size.Medium:
+        return '24px 24px 20px';
+
+      case _types.Size.Large:
+        return '32px';
+
+      default:
+        return '24px 24px 16px';
+    }
+  };
+
+  var ModalTitle = function ModalTitle(title, size) {
+    switch (size) {
+      case _types.Size.Small:
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ComponentM, {
+          textStyle: _styles.ComponentTextStyle.Bold,
+          children: title
+        });
+
+      case _types.Size.Medium:
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ComponentL, {
+          textStyle: _styles.ComponentTextStyle.Bold,
+          children: title
+        });
+
+      case _types.Size.Large:
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ComponentXL, {
+          textStyle: _styles.ComponentTextStyle.Bold,
+          children: title
+        });
+
+      default:
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ComponentL, {
+          textStyle: _styles.ComponentTextStyle.Bold,
+          children: title
+        });
+    }
+  };
+
+  var ModalTootip = function ModalTootip(tooltip) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalStyles.ModalHoverModifier, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltips.TooltipWrapper, {
+        delay: "0s",
+        size: _types.Size.XSmall,
+        align: "center",
+        position: "top",
+        withArrow: false,
+        label: tooltip,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+          variant: "secondary",
+          shape: "circular",
+          action: function action() {},
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.Help, {
+            size: "24px",
+            color: _styles.COLORS.neutral_600
+          })
+        })
+      })
+    });
+  };
+
+  var ModalCloseButton = function ModalCloseButton(onClick) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalStyles.CloseButtonWrapper, {
+      hasImage: !!topImage,
+      size: size,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+        variant: "secondary",
+        shape: "circular",
+        action: function action() {
+          return onClick();
+        },
+        borderRadius: 48,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.Close, {
+          size: "24px",
+          color: _styles.COLORS.black
+        })
+      })
+    });
+  };
+
+  var ModalBackButton = function ModalBackButton() {
+    if (backButton) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalStyles.BackButtonWrapper, {
+        hasImage: !!topImage,
+        size: size,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+          variant: "secondary",
+          shape: "circular",
+          action: function action() {
+            return backButton();
+          },
+          borderRadius: 48,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.ArrowLineLeft, {
+            size: "24px",
+            color: _styles.COLORS.black
+          })
+        })
+      });
+    }
+  };
+
+  var getLeftActionIconElement = function getLeftActionIconElement(icon) {
+    return /*#__PURE__*/_react.default.cloneElement(icon, {
+      size: size === _types.Size.Small ? '20px' : size === _types.Size.Large ? '28px' : '24px'
+    });
+  };
+
+  var LeftFooterAction = function LeftFooterAction(leftFooterAction) {
+    var _variant;
+
+    var text = leftFooterAction.text,
+        actionType = leftFooterAction.actionType,
+        disabled = leftFooterAction.disabled,
+        icon = leftFooterAction.icon,
+        action = leftFooterAction.action;
+
+    switch (actionType) {
+      case 'button':
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
+          id: 'left-action-button',
+          type: leftFooterAction === null || leftFooterAction === void 0 ? void 0 : leftFooterAction.type,
+          disabled: disabled,
+          loading: leftFooterAction === null || leftFooterAction === void 0 ? void 0 : leftFooterAction.loading,
+          icon: icon,
+          size: size,
+          onClick: action,
+          variant: (_variant = leftFooterAction === null || leftFooterAction === void 0 ? void 0 : leftFooterAction.variant) !== null && _variant !== void 0 ? _variant : 'secondary',
+          style: {
+            order: -1,
+            marginRight: 'auto'
+          },
+          children: text
+        });
+
+      case 'hyperlink':
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.HyperLink, {
+          id: "left-action-hyperlink",
+          className: "footer-action",
+          href: leftFooterAction.href,
+          disabled: disabled,
+          variant: "default",
+          onClick: function onClick(e) {
+            if (action) {
+              e.preventDefault();
+              action(e);
+            }
+          },
+          children: [icon && getLeftActionIconElement(icon), text]
+        });
+
+      case 'note':
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "footer-action note",
+          children: [icon && getLeftActionIconElement(icon), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: text
+          })]
+        });
+    }
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalContainer.default, {
+    showModal: isModalOpen,
+    closeModal: closeModalAndClearInput,
+    minWidth: getMinWidth(),
+    maxWidth: getMaxWidth(),
+    modalHeight: "auto",
+    padding: getPadding(),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalStyles.Column, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("form", {
+        onSubmit: submitAction,
+        children: [topImage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalStyles.StyledModalHeader, {
+          size: size,
+          height: getImageHeight(),
+          marginBottom: getMarginBottom(),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+            src: topImage,
+            alt: "Modal top"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalStyles.ModalHeaderActionsWithImage, {
+            hasBackButton: !!backButton,
+            children: [ModalBackButton(), ModalCloseButton(closeAction)]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalStyles.ModalTitleSection, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalStyles.FlexContainer, {
+            children: [!topImage && ModalBackButton(), title && ModalTitle(title, size)]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalStyles.ModalHeaderActions, {
+            children: [tooltip && ModalTootip(tooltip), !topImage && ModalCloseButton(closeAction)]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalStyles.ModalBody, {
+          size: size,
+          children: children
+        }), note && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalNote.ModalNote, {
+          note: note,
+          state: state,
+          size: size,
+          icon: icon
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalStyles.ModalFooter, {
+          size: size,
+          children: [leftFooterAction && LeftFooterAction(leftFooterAction), buttons === null || buttons === void 0 ? void 0 : buttons.map(function (b, i) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
+              id: b.id,
+              disabled: b.disabled,
+              loading: b.loading,
+              size: size,
+              onClick: b.action,
+              type: b.type,
+              variant: b.variant,
+              children: b.text
+            }, b.id || i);
+          })]
+        })]
+      })
+    })
+  });
+};
+
+exports.ModalDialog = ModalDialog;
+ModalDialog.propTypes = {
+  isModalOpen: _propTypes.default.bool.isRequired,
+  closeModalAndClearInput: _propTypes.default.any.isRequired,
+  title: _propTypes.default.string,
+  topImage: _propTypes.default.any,
+  buttons: _propTypes.default.array,
+  tooltip: _propTypes.default.string,
+  backButton: _propTypes.default.func,
+  closeAction: _propTypes.default.func.isRequired,
+  submitAction: _propTypes.default.func.isRequired,
+  note: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
+  state: _propTypes.default.string,
+  icon: _propTypes.default.node
+};
+var _default = ModalDialog;
+exports.default = _default;
+//# sourceMappingURL=ModalDialog.js.map