@laerdal/life-react-components 1.2.2-dev.7 → 1.3.0

package/dist/js/Modals/ModalDialog.js

@@ -25,24 +25,16 @@ var _ModalStyles = require("./ModalStyles");
 
 var _ModalNote = require("./ModalNote");
 
+var _Tooltips = require("../Tooltips");
+
+var _ = require("..");
+
 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 var ModalDialog = function ModalDialog(_ref) {
   var size = _ref.size,
       isModalOpen = _ref.isModalOpen,
@@ -50,6 +42,7 @@ var ModalDialog = function ModalDialog(_ref) {
       title = _ref.title,
       topImage = _ref.topImage,
       buttons = _ref.buttons,
+      leftFooterAction = _ref.leftFooterAction,
       backButton = _ref.backButton,
       closeAction = _ref.closeAction,
       submitAction = _ref.submitAction,
@@ -58,11 +51,6 @@ var ModalDialog = function ModalDialog(_ref) {
       note = _ref.note,
       state = _ref.state;
 
-  var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      tooltipOpen = _React$useState2[0],
-      setTooltipOpen = _React$useState2[1];
-
   var getMinWidth = function getMinWidth() {
     switch (size) {
       case _types.Size.Small:
@@ -163,6 +151,24 @@ var ModalDialog = function ModalDialog(_ref) {
     }
   };
 
+  var ModalTootip = function ModalTootip(tooltip) {
+    return /*#__PURE__*/React.createElement(_ModalStyles.ModalHoverModifier, null, /*#__PURE__*/React.createElement(_Tooltips.TooltipWrapper, {
+      delay: "0s",
+      size: _types.Size.XSmall,
+      align: "center",
+      position: "top",
+      withArrow: false,
+      label: tooltip
+    }, /*#__PURE__*/React.createElement(_Button.IconButton, {
+      variant: "secondary",
+      shape: "circular",
+      action: function action() {}
+    }, /*#__PURE__*/React.createElement(_SystemIcons.Help, {
+      size: "24px",
+      color: _styles.COLORS.neutral_600
+    }))));
+  };
+
   var ModalCloseButton = function ModalCloseButton(onClick) {
     return /*#__PURE__*/React.createElement(_ModalStyles.CloseButtonWrapper, {
       hasImage: !!topImage,
@@ -199,11 +205,54 @@ var ModalDialog = function ModalDialog(_ref) {
     }
   };
 
-  buttons === null || buttons === void 0 ? void 0 : buttons.reverse();
-  var lastLeftButton = buttons === null || buttons === void 0 ? void 0 : buttons.find(function (a) {
-    return a.position === 'left';
-  });
-  buttons === null || buttons === void 0 ? void 0 : buttons.reverse();
+  var getLeftActionIconElement = function getLeftActionIconElement(icon) {
+    return /*#__PURE__*/React.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__*/React.createElement(_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'
+          }
+        }, text);
+
+      case 'hyperlink':
+        return /*#__PURE__*/React.createElement(_.HyperLink, {
+          id: "left-action-hyperlink",
+          className: "footer-action",
+          href: leftFooterAction.href,
+          disabled: disabled,
+          variant: "default"
+        }, icon && getLeftActionIconElement(icon), text);
+
+      case 'note':
+        return /*#__PURE__*/React.createElement("div", {
+          className: "footer-action note"
+        }, icon && getLeftActionIconElement(icon), /*#__PURE__*/React.createElement("span", null, text));
+    }
+  };
+
   return /*#__PURE__*/React.createElement(_ModalContainer.default, {
     showModal: isModalOpen,
     closeModal: closeModalAndClearInput,
@@ -220,19 +269,9 @@ var ModalDialog = function ModalDialog(_ref) {
   }, /*#__PURE__*/React.createElement("img", {
     src: topImage,
     alt: "Modal top"
-  }), ModalBackButton(), ModalCloseButton(closeAction)), /*#__PURE__*/React.createElement(_ModalStyles.ModalTitleSection, null, !topImage && ModalBackButton(), title && ModalTitle(title, size), tooltip && /*#__PURE__*/React.createElement("div", {
-    id: "tooltip"
-  }, /*#__PURE__*/React.createElement("div", {
-    onMouseOver: function onMouseOver() {
-      return setTooltipOpen(true);
-    },
-    onMouseOut: function onMouseOut() {
-      return setTooltipOpen(false);
-    }
-  }, /*#__PURE__*/React.createElement(_SystemIcons.Help, {
-    size: "24px",
-    color: _styles.COLORS.neutral_600
-  })), tooltipOpen && /*#__PURE__*/React.createElement("span", null, tooltip)), !topImage && ModalCloseButton(closeAction)), /*#__PURE__*/React.createElement(_ModalStyles.ModalBody, {
+  }), /*#__PURE__*/React.createElement(_ModalStyles.ModalHeaderActionsWithImage, {
+    hasBackButton: !!backButton
+  }, ModalBackButton(), ModalCloseButton(closeAction))), /*#__PURE__*/React.createElement(_ModalStyles.ModalTitleSection, null, /*#__PURE__*/React.createElement(_ModalStyles.FlexContainer, null, !topImage && ModalBackButton(), title && ModalTitle(title, size)), /*#__PURE__*/React.createElement(_ModalStyles.ModalHeaderActions, null, tooltip && ModalTootip(tooltip), !topImage && ModalCloseButton(closeAction))), /*#__PURE__*/React.createElement(_ModalStyles.ModalBody, {
     size: size
   }, children), note && /*#__PURE__*/React.createElement(_ModalNote.ModalNote, {
     note: note,
@@ -240,7 +279,7 @@ var ModalDialog = function ModalDialog(_ref) {
     size: size
   }), /*#__PURE__*/React.createElement(_ModalStyles.ModalFooter, {
     size: size
-  }, buttons === null || buttons === void 0 ? void 0 : buttons.map(function (b, i) {
+  }, leftFooterAction && LeftFooterAction(leftFooterAction), buttons === null || buttons === void 0 ? void 0 : buttons.map(function (b, i) {
     return /*#__PURE__*/React.createElement(_Button.Button, {
       key: b.id || i,
       id: b.id,
@@ -249,11 +288,7 @@ var ModalDialog = function ModalDialog(_ref) {
       size: size,
       onClick: b.action,
       type: b.type,
-      variant: b.variant,
-      style: b.position === 'left' ? {
-        order: -1,
-        marginRight: b === lastLeftButton ? 'auto' : undefined
-      } : undefined
+      variant: b.variant
     }, b.text);
   })))));
 };
@@ -264,11 +299,7 @@ ModalDialog.propTypes = {
   closeModalAndClearInput: _propTypes.default.any.isRequired,
   title: _propTypes.default.string,
   topImage: _propTypes.default.any,
-  buttons: _propTypes.default.arrayOf(_propTypes.default.shape({
-    action: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.func]),
-    text: _propTypes.default.string.isRequired,
-    position: _propTypes.default.oneOf(['left', 'right'])
-  })),
+  buttons: _propTypes.default.array,
   tooltip: _propTypes.default.string,
   backButton: _propTypes.default.func,
   closeAction: _propTypes.default.func.isRequired,

package/dist/js/Modals/ModalDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Modals/ModalDialog.tsx"],"names":["ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","buttons","backButton","closeAction","submitAction","tooltip","children","note","state","React","useState","tooltipOpen","setTooltipOpen","getMinWidth","Size","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","ComponentTextStyle","Bold","ModalCloseButton","onClick","COLORS","black","ModalBackButton","reverse","lastLeftButton","find","a","position","neutral_600","map","b","i","id","disabled","loading","action","type","variant","order","marginRight","undefined","text"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { SystemIcon, SystemIcons } from '..';\nimport {Button, IconButton} from '../Button';\nimport {ButtonProps} from '../Button/Button';\nimport {ArrowLineLeft, Close, Help} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL} from '../styles';\nimport {Size} from '../types'\nimport ModalContainer from './ModalContainer';\nimport {\n  BackButtonWrapper,\n  CloseButtonWrapper,\n  Column,\n  ModalBody,\n  ModalFooter,\n  ModalTitleSection,\n  StyledModalHeader\n} from './ModalStyles';\n\nimport {ModalNote} from './ModalNote';\n\ninterface ButtonAction extends Pick<ButtonProps, 'variant' | 'id' | 'loading' | 'disabled' | 'icon' | 'type'> {\n  action?: (() => void) | ((e: any) => void);\n  text: string;\n  position?: 'left' | 'right';\n}\n\ninterface NewModalProps {\n  size?: Size;\n  isModalOpen: boolean;\n  closeModalAndClearInput: any;\n  title?: string;\n  topImage?: any;\n  buttons?: ButtonAction[];\n  tooltip?: string;\n  backButton?: () => void;\n  closeAction: () => void;\n  submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n  note?: string;\n  state?: string;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  topImage,\n  buttons,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n  children,\n  note,\n  state\n}) => {\n  const [tooltipOpen, setTooltipOpen] = React.useState<boolean>(false);\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 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 ModalCloseButton = (onClick: any) => {\n    return (\n      <CloseButtonWrapper hasImage={!!topImage} 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} 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  buttons?.reverse();\n  const lastLeftButton = buttons?.find(a => a.position === 'left');\n  buttons?.reverse();\n\n  return (\n    <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()}>\n      <Column>\n        <form onSubmit={submitAction}>\n          {topImage && (\n            <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n              <img src={topImage} alt=\"Modal top\" />\n              {ModalBackButton()}\n              {ModalCloseButton(closeAction)}\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            {!topImage && ModalBackButton()}\n            {title && ModalTitle(title, size)}\n            {tooltip && (\n              <div id=\"tooltip\">\n                <div onMouseOver={() => setTooltipOpen(true)} onMouseOut={() => setTooltipOpen(false)}>\n                  <Help size=\"24px\" color={COLORS.neutral_600} />\n                </div>\n                {tooltipOpen && <span>{tooltip}</span>}\n              </div>\n            )}\n            {!topImage && ModalCloseButton(closeAction)}\n          </ModalTitleSection>\n\n          <ModalBody size={size}>{children}</ModalBody>\n\n          { note && <ModalNote note={note} state={state} size={size}/> }\n\n          <ModalFooter size={size}>\n              {buttons?.map((b, i) => (\n                  <Button key={b.id || i}\n                          id={b.id}\n                          disabled={b.disabled}\n                          loading={b.loading}\n                          size={size}\n                          onClick={b.action}\n                          type={b.type}\n                          variant={b.variant}\n                          style={\n                            b.position === 'left'\n                              ? {\n                                order: -1,\n                                marginRight: b === lastLeftButton ? 'auto' : undefined\n                              }\n                              : undefined\n                          }>\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":["ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","getMinWidth","Size","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","ComponentTextStyle","Bold","ModalTootip","XSmall","COLORS","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","icon","React","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","map","b","i","id"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } 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 { ReactNode } from 'react';\nimport { HyperLink } from '..';\n\ninterface NewModalProps {\n  size?: Size;\n  isModalOpen: boolean;\n  closeModalAndClearInput: any;\n  title?: string;\n  topImage?: any;\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;\n  state?: string;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  topImage,\n  buttons,\n  leftFooterAction,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n  children,\n  note,\n  state,\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 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 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} 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} 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: 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 id=\"left-action-hyperlink\" className=\"footer-action\" href={(leftFooterAction as LeftFooterHyperlink).href} disabled={disabled} variant=\"default\">\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  return (\n    <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()}>\n      <Column>\n        <form onSubmit={submitAction}>\n          {topImage && (\n            <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n              <img src={topImage} alt=\"Modal top\" />\n              <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n                {ModalBackButton()}\n                {ModalCloseButton(closeAction)}\n              </ModalHeaderActionsWithImage>\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            <FlexContainer>\n              {!topImage && ModalBackButton()}\n              {title && ModalTitle(title, size)}\n            </FlexContainer>\n            <ModalHeaderActions>\n              {tooltip && ModalTootip(tooltip)}\n              {!topImage && ModalCloseButton(closeAction)}\n            </ModalHeaderActions>\n          </ModalTitleSection>\n\n          <ModalBody size={size}>{children}</ModalBody>\n\n          {note && <ModalNote note={note} state={state} size={size} />}\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/js/Modals/ModalStyles.d.ts

@@ -14,6 +14,12 @@ export declare const StyledModalHeader: import("styled-components").StyledCompon
 }, never>;
 export declare const Column: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ModalTitleSection: import("styled-components").StyledComponent<"section", any, {}, never>;
+export declare const ModalHeaderActionsWithImage: import("styled-components").StyledComponent<"div", any, {
+    hasBackButton?: boolean;
+}, never>;
+export declare const ModalHeaderActions: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FlexContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ModalHoverModifier: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CloseButtonWrapper: import("styled-components").StyledComponent<"div", any, {
     size?: Size;
     hasImage?: boolean;

package/dist/js/Modals/ModalStyles.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getNoteMessageColor = exports.getBackgroundColor = exports.ModalFooter = exports.ModalBody = exports.ModalNoteSection = exports.ModalTitle = exports.BackButtonWrapper = exports.CloseButtonWrapper = exports.ModalTitleSection = exports.Column = exports.StyledModalHeader = exports.ModalHeader = void 0;
+exports.getNoteMessageColor = exports.getBackgroundColor = exports.ModalFooter = exports.ModalBody = exports.ModalNoteSection = exports.ModalTitle = exports.BackButtonWrapper = exports.CloseButtonWrapper = exports.ModalHoverModifier = exports.FlexContainer = exports.ModalHeaderActions = exports.ModalHeaderActionsWithImage = exports.ModalTitleSection = exports.Column = exports.StyledModalHeader = exports.ModalHeader = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -13,7 +13,7 @@ var _ = require("..");
 
 var _types = require("../types");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
 
 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); }
 
@@ -40,34 +40,50 @@ var Column = _styledComponents.default.div(_templateObject3 || (_templateObject3
 
 exports.Column = Column;
 
-var ModalTitleSection = _styledComponents.default.section(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  div#tooltip {\n    margin-left: 12px;\n  }\n"])));
+var ModalTitleSection = _styledComponents.default.section(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  word-break: break-word;\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n"])));
 
 exports.ModalTitleSection = ModalTitleSection;
 
-var CloseButtonWrapper = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  button {\n    ", "\n  }\n"])), function (props) {
-  return props.hasImage ? (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n            position: absolute;\n            right: 0;\n            top: 0;\n            margin: -12px !important;\n          "]))) : (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n            position: absolute;\n            top: 0;\n            right: 0;\n            left: unset;\n            margin: ", " !important;\n          "])), props.size === _types.Size.Small ? '4px 4px 0 0' : props.size === _types.Size.Large ? '20px 20px 0 0' : '12px 12px 0 0');
+var ModalHeaderActionsWithImage = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: space-between;\n  width: 100%;\n  z-index: 1;\n"])), function (props) {
+  return !props.hasBackButton ? 'row-reverse' : 'row';
 });
 
-exports.CloseButtonWrapper = CloseButtonWrapper;
+exports.ModalHeaderActionsWithImage = ModalHeaderActionsWithImage;
+
+var ModalHeaderActions = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  margin: -12px -12px 0 0;\n"])));
+
+exports.ModalHeaderActions = ModalHeaderActions;
+
+var FlexContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n"])));
 
-var BackButtonWrapper = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  button {\n    ", "\n  }\n"])), function (props) {
-  return props.hasImage ? (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n            left: 0;\n            top: 0;\n            position: absolute;\n            margin: -12px 0 0 -12px !important;\n          "]))) : (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n            position: unset;\n            margin: -12px 0 0 -12px !important;\n          "])));
+exports.FlexContainer = FlexContainer;
+
+var ModalHoverModifier = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  button:hover {\n    cursor: help !important;\n  }\n"])));
+
+exports.ModalHoverModifier = ModalHoverModifier;
+
+var CloseButtonWrapper = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  button {\n    ", "\n  }\n"])), function (props) {
+  return props.hasImage ? (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n            margin: -12px -12px 0 0 !important;\n          "]))) : (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n            left: unset;\n          "])));
 });
 
+exports.CloseButtonWrapper = CloseButtonWrapper;
+
+var BackButtonWrapper = _styledComponents.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  button {\n    margin: -12px 0 0 -12px !important;\n  }\n"])));
+
 exports.BackButtonWrapper = BackButtonWrapper;
 
-var ModalTitle = _styledComponents.default.h5(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  margin: 0;\n  font-size: ", ";\n  font-weight: bold;\n"])), function (props) {
+var ModalTitle = _styledComponents.default.h5(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  margin: 0;\n  font-size: ", ";\n  font-weight: bold;\n"])), function (props) {
   return props.fontSize || '1.25em';
 });
 
 exports.ModalTitle = ModalTitle;
 
-var ModalNoteSection = _styledComponents.default.section(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  font-size: ", ";\n  margin-top: ", ";\n  margin-bottom: ", ";\n  display: flex;\n  flex-direction: row;\n  padding: ", ";\n  border-radius: 2px;\n\n  span {\n    display:block;\n    width: 80%;\n    margin-left: 8px;\n    color: ", ";\n  }\n"])), function (props) {
+var ModalNoteSection = _styledComponents.default.section(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  font-size: ", ";\n  margin-top: ", ";\n  margin-bottom: ", ";\n  display: flex;\n  flex-direction: row;\n  padding: ", ";\n  border-radius: 2px;\n\n  span {\n    display: block;\n    width: 80%;\n    margin-left: 8px;\n    color: ", ";\n  }\n"])), function (props) {
   return getBackgroundColor(props.state);
 }, function (props) {
   return (props === null || props === void 0 ? void 0 : props.size) === 'small' ? "16px" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '20px' : '18px';
 }, 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';
+  return (props === null || props === void 0 ? void 0 : props.size) === 'small' ? "0px" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '16px' : '4px';
 }, 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) {
@@ -78,7 +94,7 @@ var ModalNoteSection = _styledComponents.default.section(_templateObject12 || (_
 
 exports.ModalNoteSection = ModalNoteSection;
 
-var ModalBody = _styledComponents.default.section(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\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 ModalBody = _styledComponents.default.section(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\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) {
   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';
@@ -86,11 +102,15 @@ var ModalBody = _styledComponents.default.section(_templateObject13 || (_templat
 
 exports.ModalBody = ModalBody;
 
-var ModalFooter = _styledComponents.default.section(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  display: flex;\n  justify-content: flex-end;\n\n  gap: ", ";\n"])), function (props) {
+var ModalFooter = _styledComponents.default.section(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  display: flex;\n  justify-content: flex-end;\n\n  gap: ", ";\n\n  .footer-action {\n    order: -1;\n    margin-right: auto;\n    display: flex;\n    align-items: center;\n    font-size: ", ";\n    gap: ", ";\n  }\n\n  .footer-action.note {\n    color: ", ";\n  }\n"])), function (props) {
   return (props === null || props === void 0 ? void 0 : props.size) === _types.Size.Small ? "20px" : (props === null || props === void 0 ? void 0 : props.size) === _types.Size.Large ? '28px' : '24px';
 }, function (props) {
   return (props === null || props === void 0 ? void 0 : props.size) === 'large' ? "16px" : '8px';
-});
+}, function (props) {
+  return (props === null || props === void 0 ? void 0 : props.size) === 'small' ? "16px" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '20px' : '18px';
+}, function (props) {
+  return (props === null || props === void 0 ? void 0 : props.size) === _types.Size.Large ? "8px" : (props === null || props === void 0 ? void 0 : props.size) === _types.Size.Small ? '4px' : '6px';
+}, _.COLORS.neutral_600);
 
 exports.ModalFooter = ModalFooter;
 

package/dist/js/Modals/ModalStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Modals/ModalStyles.ts"],"names":["ModalHeader","styled","section","props","marginBottom","StyledModalHeader","height","size","Column","div","ModalTitleSection","CloseButtonWrapper","hasImage","css","Size","Small","Large","BackButtonWrapper","ModalTitle","h5","fontSize","ModalNoteSection","getBackgroundColor","state","getNoteMessageColor","ModalBody","ModalFooter","COLORS","correct_100","warning_100","critical_100","primary_100","correct_700","warning_700","critical_700","primary_700"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '..';\nimport { Size } from '../types'\n\n/**\n * Modal styles\n */\nexport const ModalHeader = styled.section<{ marginBottom?: string }>`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: ${(props) => props.marginBottom || '24px'};\n`;\n\nexport const StyledModalHeader = styled(ModalHeader)<{ marginBottom?: string; size?: string; height?: number }>`\n  flex: 0 calc(50% - 5px);\n  flex-direction: column;\n  position: relative;\n  text-align: left;\n  height: ${(props) => (props.height ? `${props.height - (props.size === 'small' ? 16 : props.size === 'large' ? 32 : 24)}px` : '')};\n  img {\n    width: 100%;\n    height: ${(props) => `${props.height}px`};\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    border-radius: 8px 8px 0 0;\n    object-fit: cover;\n  }\n`;\n\nexport const Column = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n`;\n\nexport const ModalTitleSection = styled.section`\n  display: flex;\n  div#tooltip {\n    margin-left: 12px;\n  }\n`;\n\nexport const CloseButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n  button {\n    ${(props) =>\n      props.hasImage\n        ? css`\n            position: absolute;\n            right: 0;\n            top: 0;\n            margin: -12px !important;\n          `\n        : css`\n            position: absolute;\n            top: 0;\n            right: 0;\n            left: unset;\n            margin: ${props.size === Size.Small ? '4px 4px 0 0' : props.size === Size.Large ? '20px 20px 0 0' : '12px 12px 0 0'} !important;\n          `}\n  }\n`;\n\nexport const BackButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n  button {\n    ${(props) =>\n      props.hasImage\n        ? css`\n            left: 0;\n            top: 0;\n            position: absolute;\n            margin: -12px 0 0 -12px !important;\n          `\n        : css`\n            position: unset;\n            margin: -12px 0 0 -12px !important;\n          `}\n  }\n`;\n\nexport const ModalTitle = styled.h5<{ fontSize?: string }>`\n  margin: 0;\n  font-size: ${(props) => props.fontSize || '1.25em'};\n  font-weight: bold;\n`;\n\nexport const ModalNoteSection = styled.section<{state:string, size?:string}>`\n  background-color: ${(props)=> getBackgroundColor(props.state)};\n  font-size: ${(props)=> (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n  margin-top: ${(props)=> (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  margin-bottom: ${(props)=> (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  display: flex;\n  flex-direction: row;\n  padding: ${(props)=> (props?.size === 'small' ? `8px` : props?.size === 'large' ? '16px' : '12px')};\n  border-radius: 2px;\n\n  span {\n    display:block;\n    width: 80%;\n    margin-left: 8px;\n    color: ${(props)=> getNoteMessageColor(props.state)};\n  }\n`;\n\nexport const ModalBody = styled.section<{ size?: string }>`\n  > :first-child {\n    margin-top: 24px;\n  }\n\n  > :last-child {\n    margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  }\n\n  p: first-of-type {\n    padding-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  }\n`;\n\nexport const ModalFooter = styled.section<{ size?: Size }>`\n  margin-top: ${(props) => (props?.size === Size.Small ? `20px` : props?.size === Size.Large ? '28px' : '24px')};\n  display: flex;\n  justify-content: flex-end;\n\n  gap: ${(props) => (props?.size === 'large' ? `16px` : '8px')};\n`;\n\nexport const getBackgroundColor = (state:string) => {\n  switch(state){\n    case 'positive': return COLORS.correct_100;\n    case 'warning': return COLORS.warning_100;\n    case 'critical': return COLORS.critical_100;\n    default: return COLORS.primary_100;\n  }\n}\n\nexport const getNoteMessageColor = (state:string) => {\n  switch(state){\n    case 'positive': return COLORS.correct_700;\n    case 'warning': return COLORS.warning_700;\n    case 'critical': return COLORS.critical_700;\n    default: return COLORS.primary_700;\n  }\n}"],"file":"ModalStyles.js"}
+{"version":3,"sources":["../../../src/Modals/ModalStyles.ts"],"names":["ModalHeader","styled","section","props","marginBottom","StyledModalHeader","height","size","Column","div","ModalTitleSection","ModalHeaderActionsWithImage","hasBackButton","ModalHeaderActions","FlexContainer","ModalHoverModifier","CloseButtonWrapper","hasImage","css","BackButtonWrapper","ModalTitle","h5","fontSize","ModalNoteSection","getBackgroundColor","state","getNoteMessageColor","ModalBody","ModalFooter","Size","Small","Large","COLORS","neutral_600","correct_100","warning_100","critical_100","primary_100","correct_700","warning_700","critical_700","primary_700"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '..';\nimport { Size } from '../types';\n\n/**\n * Modal styles\n */\nexport const ModalHeader = styled.section<{ marginBottom?: string }>`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: ${(props) => props.marginBottom || '24px'};\n`;\n\nexport const StyledModalHeader = styled(ModalHeader)<{ marginBottom?: string; size?: string; height?: number }>`\n  flex: 0 calc(50% - 5px);\n  flex-direction: column;\n  position: relative;\n  text-align: left;\n  height: ${(props) => (props.height ? `${props.height - (props.size === 'small' ? 16 : props.size === 'large' ? 32 : 24)}px` : '')};\n  img {\n    width: 100%;\n    height: ${(props) => `${props.height}px`};\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    border-radius: 8px 8px 0 0;\n    object-fit: cover;\n  }\n`;\n\nexport const Column = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n`;\n\nexport const ModalTitleSection = styled.section`\n  word-break: break-word;\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n`;\n\nexport const ModalHeaderActionsWithImage = styled.div<{ hasBackButton?: boolean }>`\n  display: flex;\n  flex-direction: ${(props) => (!props.hasBackButton ? 'row-reverse' : 'row')};\n  justify-content: space-between;\n  width: 100%;\n  z-index: 1;\n`;\n\nexport const ModalHeaderActions = styled.div`\n  display: flex;\n  margin: -12px -12px 0 0;\n`;\n\nexport const FlexContainer = styled.div`\n  display: flex;\n`;\n\nexport const ModalHoverModifier = styled.div`\n  button:hover {\n    cursor: help !important;\n  }\n`;\n\nexport const CloseButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n  button {\n    ${(props) =>\n      props.hasImage\n        ? css`\n            margin: -12px -12px 0 0 !important;\n          `\n        : css`\n            left: unset;\n          `}\n  }\n`;\n\nexport const BackButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n  button {\n    margin: -12px 0 0 -12px !important;\n  }\n`;\n\nexport const ModalTitle = styled.h5<{ fontSize?: string }>`\n  margin: 0;\n  font-size: ${(props) => props.fontSize || '1.25em'};\n  font-weight: bold;\n`;\n\nexport const ModalNoteSection = styled.section<{ state: string; size?: string }>`\n  background-color: ${(props) => getBackgroundColor(props.state)};\n  font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n  margin-top: ${(props) => (props?.size === 'small' ? `0px` : props?.size === 'large' ? '16px' : '4px')};\n  margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  display: flex;\n  flex-direction: row;\n  padding: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '16px' : '12px')};\n  border-radius: 2px;\n\n  span {\n    display: block;\n    width: 80%;\n    margin-left: 8px;\n    color: ${(props) => getNoteMessageColor(props.state)};\n  }\n`;\n\nexport const ModalBody = styled.section<{ size?: string }>`\n  > :first-child {\n    margin-top: 24px;\n  }\n\n  > :last-child {\n    margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  }\n\n  p: first-of-type {\n    padding-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  }\n`;\n\nexport const ModalFooter = styled.section<{ size?: Size }>`\n  margin-top: ${(props) => (props?.size === Size.Small ? `20px` : props?.size === Size.Large ? '28px' : '24px')};\n  display: flex;\n  justify-content: flex-end;\n\n  gap: ${(props) => (props?.size === 'large' ? `16px` : '8px')};\n\n  .footer-action {\n    order: -1;\n    margin-right: auto;\n    display: flex;\n    align-items: center;\n    font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n    gap: ${(props) => (props?.size === Size.Large ? `8px` : props?.size === Size.Small ? '4px' : '6px')};\n  }\n\n  .footer-action.note {\n    color: ${COLORS.neutral_600};\n  }\n`;\n\nexport const getBackgroundColor = (state: string) => {\n  switch (state) {\n    case 'positive':\n      return COLORS.correct_100;\n    case 'warning':\n      return COLORS.warning_100;\n    case 'critical':\n      return COLORS.critical_100;\n    default:\n      return COLORS.primary_100;\n  }\n};\n\nexport const getNoteMessageColor = (state: string) => {\n  switch (state) {\n    case 'positive':\n      return COLORS.correct_700;\n    case 'warning':\n      return COLORS.warning_700;\n    case 'critical':\n      return COLORS.critical_700;\n    default:\n      return COLORS.primary_700;\n  }\n};\n"],"file":"ModalStyles.js"}

package/dist/js/Modals/ModalTypes.d.ts

@@ -0,0 +1,18 @@
+import { ButtonProps } from '../Button/Button';
+import { HyperlinkProps } from '../HyperLink/HyperLink';
+export interface ButtonAction extends Pick<ButtonProps, 'variant' | 'id' | 'loading' | 'disabled' | 'icon' | 'type'> {
+    action?: (() => void) | ((e: any) => void);
+    text: string;
+}
+export interface LeftFooterActionBase {
+    actionType: 'hyperlink' | 'note' | 'button';
+    text: string;
+    icon?: React.ReactNode;
+    action?: (() => void) | ((e: any) => void);
+}
+export interface LeftFooterHyperlink extends HyperlinkProps, LeftFooterActionBase {
+}
+export interface LeftFooterButton extends Pick<ButtonProps, 'variant' | 'id' | 'loading' | 'disabled' | 'icon' | 'type'>, LeftFooterActionBase {
+    text: string;
+}
+export declare type LeftFooterAction = LeftFooterButton | LeftFooterHyperlink;

package/dist/js/Modals/ModalTypes.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=ModalTypes.js.map

package/dist/js/Modals/ModalTypes.js.map

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

package/dist/js/NavItem/NavItem.js

@@ -11,13 +11,15 @@ var _styles = require("../styles");
 
 var _typography = require("../styles/typography");
 
+var _zIndexes = require("../styles/z-indexes");
+
 var _templateObject;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var NavItem = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n\n  margin: 0;\n  padding: 0 21px 0 21px;\n  height: 64px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 3px;\n    background-color: transparent;\n  }\n\n  &.active:not(.disabled) {\n    background-color: ", ";\n    color: ", ";\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &.disabled {\n    color: ", ";\n    background-color: ", ";\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &:hover:not(.disabled) {\n    background-color: ", ";\n    color: ", ";\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &:focus:not(.disabled) {\n    box-shadow: 0px 0px 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n    &:after {\n      background-color: ", ";\n    }\n  }\n"])), (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), _styles.COLORS.neutral_20, _styles.COLORS.neutral_800, _styles.COLORS.primary_600, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_600, _styles.COLORS.primary_500, _styles.COLORS.primary_600);
+var NavItem = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n\n  margin: 0;\n  padding: 0 21px 0 21px;\n  height: 64px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 3px;\n    background-color: transparent;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &.disabled {\n    color: ", ";\n    background-color: ", ";\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &:hover:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &:focus:not(.disabled) {\n    z-index: ", ";\n    box-shadow: 0px 0px 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n    &:after {\n      background-color: ", ";\n    }\n  }\n"])), (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), _zIndexes.Z_INDEXES.active, _styles.COLORS.neutral_20, _styles.COLORS.neutral_800, _styles.COLORS.primary_600, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_600, _zIndexes.Z_INDEXES.focus, _styles.COLORS.primary_500, _styles.COLORS.primary_600);
 
 var _default = NavItem;
 exports.default = _default;

package/dist/js/NavItem/NavItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/NavItem/NavItem.tsx"],"names":["NavItem","styled","div","ComponentTextStyle","Regular","COLORS","neutral_600","neutral_20","neutral_800","primary_600","neutral_300","neutral_100","primary_20","primary_700","primary_500"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;;;;;;;AAEA,IAAMA,OAAO,GAAGC,0BAAOC,GAAV,69BACT,mCAAkBC,+BAAmBC,OAArC,EAA8CC,eAAOC,WAArD,CADS,EAwBWD,eAAOE,UAxBlB,EAyBAF,eAAOG,WAzBP,EA2BaH,eAAOI,WA3BpB,EAgCAJ,eAAOK,WAhCP,EAiCWL,eAAOM,WAjClB,EAmCaN,eAAOM,WAnCpB,EAwCWN,eAAOO,UAxClB,EAyCAP,eAAOQ,WAzCP,EA2CaR,eAAOI,WA3CpB,EAgDiBJ,eAAOS,WAhDxB,EAmDaT,eAAOI,WAnDpB,CAAb;;eAwDeT,O","sourcesContent":["import styled from 'styled-components';\n\nimport { COLORS } from '../styles';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles/typography';\n\nconst NavItem = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  margin: 0;\n  padding: 0 21px 0 21px;\n  height: 64px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 3px;\n    background-color: transparent;\n  }\n\n  &.active:not(.disabled) {\n    background-color: ${COLORS.neutral_20};\n    color: ${COLORS.neutral_800};\n    &:after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &.disabled {\n    color: ${COLORS.neutral_300};\n    background-color: ${COLORS.neutral_100};\n    &:after {\n      background-color: ${COLORS.neutral_100};\n    }\n  }\n\n  &:hover:not(.disabled) {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    &:after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &:focus:not(.disabled) {\n    box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n    &:after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n`;\n\nexport default NavItem;\n"],"file":"NavItem.js"}
+{"version":3,"sources":["../../../src/NavItem/NavItem.tsx"],"names":["NavItem","styled","div","ComponentTextStyle","Regular","COLORS","neutral_600","Z_INDEXES","active","neutral_20","neutral_800","primary_600","neutral_300","neutral_100","hover","primary_20","primary_700","focus","primary_500"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AACA;;;;;;;;AAEA,IAAMA,OAAO,GAAGC,0BAAOC,GAAV,yhCACT,mCAAkBC,+BAAmBC,OAArC,EAA8CC,eAAOC,WAArD,CADS,EAwBEC,oBAAUC,MAxBZ,EAyBWH,eAAOI,UAzBlB,EA0BAJ,eAAOK,WA1BP,EA4BaL,eAAOM,WA5BpB,EAiCAN,eAAOO,WAjCP,EAkCWP,eAAOQ,WAlClB,EAoCaR,eAAOQ,WApCpB,EAyCEN,oBAAUO,KAzCZ,EA0CWT,eAAOU,UA1ClB,EA2CAV,eAAOW,WA3CP,EA6CaX,eAAOM,WA7CpB,EAkDEJ,oBAAUU,KAlDZ,EAmDiBZ,eAAOa,WAnDxB,EAsDab,eAAOM,WAtDpB,CAAb;;eA2DeX,O","sourcesContent":["import styled from 'styled-components';\n\nimport { COLORS } from '../styles';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst NavItem = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  margin: 0;\n  padding: 0 21px 0 21px;\n  height: 64px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 3px;\n    background-color: transparent;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.neutral_20};\n    color: ${COLORS.neutral_800};\n    &:after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &.disabled {\n    color: ${COLORS.neutral_300};\n    background-color: ${COLORS.neutral_100};\n    &:after {\n      background-color: ${COLORS.neutral_100};\n    }\n  }\n\n  &:hover:not(.disabled) {\n    z-index: ${Z_INDEXES.hover};\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    &:after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &:focus:not(.disabled) {\n    z-index: ${Z_INDEXES.focus};\n    box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n    &:after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n`;\n\nexport default NavItem;\n"],"file":"NavItem.js"}