@laerdal/life-react-components 1.4.1-dev.2 → 1.4.1-dev.4.full

package/dist/esm/Modals/ModalContainer.js

@@ -0,0 +1,153 @@
+import _pt from "prop-types";
+
+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; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import * as React from 'react';
+import ReactModal from 'react-modal';
+import { BOXSHADOWS } from '../styles';
+import { Z_INDEXES } from '../styles/z-indexes';
+const 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: BOXSHADOWS.BOXSHADOW_L3
+  }
+}; //override modal classes to define the animations
+
+const modalTransitions = `
+.ReactModal__Overlay {
+  opacity: 0;
+  z-index: ${Z_INDEXES.backdrop};
+}
+
+.ReactModal__Overlay--after-open {
+  opacity: 1;
+  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);
+}
+
+.ReactModal__Content{
+  z-index: ${Z_INDEXES.modal};
+  opacity:0;
+  transform: translate(-50%, -50%) scale(1.1, 1.1);
+}
+
+.ReactModal__Content--after-open{
+  opacity: 1;
+  transform: translate(-50%, -50%) scale(1.0, 1.0);
+  transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);
+}
+
+.ReactModal__Overlay--before-close {
+  opacity: 0;
+  transition: opacity 120ms linear;
+}
+
+.ReactModal__Content--before-close{
+  opacity: 0;
+  transform: translate(-50%, -50%) scale(1.1, 1.1);
+  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);
+}
+
+.ReactModal__Body--open,
+.ReactModal__Html--open {
+  overflow: hidden;
+}
+`;
+
+class ModalContainer extends React.Component {
+  constructor(...args) {
+    super(...args);
+
+    _defineProperty(this, "GetSize", (modalHeight = 'auto', modalWidth = 'auto') => ({
+      height: modalHeight,
+      width: modalWidth
+    }));
+
+    _defineProperty(this, "GetOverflow", (modalOverflow = 'visible') => modalOverflow);
+  }
+
+  componentDidMount() {
+    if (ReactModal.defaultStyles.overlay) {
+      ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';
+    } //append style node to override modal transition classes
+
+
+    if (!document.querySelector('[modal-custom-styling="active"]')) {
+      const head = document.head || document.getElementsByTagName('head')[0];
+      const style = document.createElement('style');
+      style.setAttribute('modal-custom-styling', 'active');
+      head.appendChild(style);
+      style.appendChild(document.createTextNode(modalTransitions));
+    }
+  }
+
+  render() {
+    const {
+      id,
+      showModal,
+      closeModal,
+      children,
+      modalHeight,
+      modalWidth,
+      modalOverflow,
+      padding,
+      minWidth = '',
+      maxWidth = ''
+    } = this.props;
+    const sizes = this.GetSize(modalHeight, modalWidth);
+    const {
+      height,
+      width
+    } = sizes;
+    const overflow = this.GetOverflow(modalOverflow);
+    const stylesConfiguration = Object.assign(_objectSpread({}, ModalContainerStyles.content), {
+      height,
+      width,
+      padding,
+      overflow,
+      minWidth,
+      maxWidth
+    });
+    const styles = {
+      content: stylesConfiguration
+    };
+    return /*#__PURE__*/React.createElement(ReactModal, {
+      id: id,
+      isOpen: showModal,
+      closeTimeoutMS: 120,
+      onRequestClose: () => closeModal(),
+      style: styles,
+      appElement: document.getElementById('root') || ''
+    }, children);
+  }
+
+}
+
+_defineProperty(ModalContainer, "propTypes", {
+  id: _pt.string,
+  showModal: _pt.bool.isRequired,
+  closeModal: _pt.func.isRequired,
+  children: _pt.any.isRequired,
+  modalHeight: _pt.any,
+  modalWidth: _pt.any,
+  modalOverflow: _pt.string,
+  padding: _pt.string,
+  minWidth: _pt.string,
+  maxWidth: _pt.string
+});
+
+export default ModalContainer;
+//# sourceMappingURL=ModalContainer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Modals/ModalContainer.tsx"],"names":["React","ReactModal","BOXSHADOWS","Z_INDEXES","ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOW_L3","modalTransitions","backdrop","modal","ModalContainer","Component","modalHeight","modalWidth","modalOverflow","componentDidMount","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","render","id","showModal","closeModal","children","padding","minWidth","maxWidth","props","sizes","GetSize","GetOverflow","stylesConfiguration","Object","assign","styles","getElementById"],"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/esm/Modals/ModalDialog.js

@@ -0,0 +1,286 @@
+import _pt from "prop-types";
+import * as React from 'react';
+import { Button, IconButton } from '../Button';
+import { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';
+import { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';
+import { Size } from '../types';
+import ModalContainer from './ModalContainer';
+import { BackButtonWrapper, CloseButtonWrapper, Column, FlexContainer, ModalBody, ModalFooter, ModalHeaderActions, ModalHeaderActionsWithImage, ModalTitleSection, StyledModalHeader, ModalHoverModifier } from './ModalStyles';
+import { ModalNote } from './ModalNote';
+import { TooltipWrapper } from '../Tooltips';
+import { HyperLink } from '..';
+export const ModalDialog = ({
+  size,
+  isModalOpen,
+  closeModalAndClearInput,
+  title,
+  topImage,
+  buttons,
+  leftFooterAction,
+  backButton,
+  closeAction,
+  submitAction,
+  tooltip,
+  children,
+  note,
+  state,
+  icon
+}) => {
+  const getMinWidth = () => {
+    switch (size) {
+      case Size.Small:
+        return '320px';
+
+      case Size.Large:
+        return '640px';
+
+      case Size.Medium:
+      default:
+        return '480px';
+    }
+  };
+
+  const getMaxWidth = () => {
+    switch (size) {
+      case Size.Small:
+        return '480px';
+
+      case Size.Large:
+        return '720px';
+
+      case Size.Medium:
+      default:
+        return '640px';
+    }
+  };
+
+  const getImageHeight = () => {
+    switch (size) {
+      case Size.Small:
+        return 160;
+
+      case Size.Medium:
+        return 200;
+
+      case Size.Large:
+        return 240;
+
+      default:
+        return 200;
+    }
+  };
+
+  const getMarginBottom = () => {
+    switch (size) {
+      case Size.Small:
+        return '16px';
+
+      case Size.Medium:
+        return '24px';
+
+      case Size.Large:
+        return '32px';
+
+      default:
+        return '24px';
+    }
+  };
+
+  const getPadding = () => {
+    switch (size) {
+      case Size.Small:
+        return '16px 16px 8px';
+
+      case Size.Medium:
+        return '24px 24px 20px';
+
+      case Size.Large:
+        return '32px';
+
+      default:
+        return '24px 24px 16px';
+    }
+  };
+
+  const ModalTitle = (title, size) => {
+    switch (size) {
+      case Size.Small:
+        return /*#__PURE__*/React.createElement(ComponentM, {
+          textStyle: ComponentTextStyle.Bold
+        }, title);
+
+      case Size.Medium:
+        return /*#__PURE__*/React.createElement(ComponentL, {
+          textStyle: ComponentTextStyle.Bold
+        }, title);
+
+      case Size.Large:
+        return /*#__PURE__*/React.createElement(ComponentXL, {
+          textStyle: ComponentTextStyle.Bold
+        }, title);
+
+      default:
+        return /*#__PURE__*/React.createElement(ComponentL, {
+          textStyle: ComponentTextStyle.Bold
+        }, title);
+    }
+  };
+
+  const ModalTootip = tooltip => {
+    return /*#__PURE__*/React.createElement(ModalHoverModifier, null, /*#__PURE__*/React.createElement(TooltipWrapper, {
+      delay: "0s",
+      size: Size.XSmall,
+      align: "center",
+      position: "top",
+      withArrow: false,
+      label: tooltip
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      variant: "secondary",
+      shape: "circular",
+      action: () => {}
+    }, /*#__PURE__*/React.createElement(Help, {
+      size: "24px",
+      color: COLORS.neutral_600
+    }))));
+  };
+
+  const ModalCloseButton = onClick => {
+    return /*#__PURE__*/React.createElement(CloseButtonWrapper, {
+      hasImage: !!topImage,
+      size: size
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      variant: "secondary",
+      shape: "circular",
+      action: () => onClick(),
+      borderRadius: 48
+    }, /*#__PURE__*/React.createElement(Close, {
+      size: "24px",
+      color: COLORS.black
+    })));
+  };
+
+  const ModalBackButton = () => {
+    if (backButton) {
+      return /*#__PURE__*/React.createElement(BackButtonWrapper, {
+        hasImage: !!topImage,
+        size: size
+      }, /*#__PURE__*/React.createElement(IconButton, {
+        variant: "secondary",
+        shape: "circular",
+        action: () => backButton(),
+        borderRadius: 48
+      }, /*#__PURE__*/React.createElement(ArrowLineLeft, {
+        size: "24px",
+        color: COLORS.black
+      })));
+    }
+  };
+
+  const getLeftActionIconElement = icon => {
+    return /*#__PURE__*/React.cloneElement(icon, {
+      size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px'
+    });
+  };
+
+  const LeftFooterAction = leftFooterAction => {
+    const {
+      text,
+      actionType,
+      disabled,
+      icon,
+      action
+    } = leftFooterAction;
+
+    switch (actionType) {
+      case 'button':
+        return /*#__PURE__*/React.createElement(Button, {
+          id: 'left-action-button',
+          type: leftFooterAction?.type,
+          disabled: disabled,
+          loading: leftFooterAction?.loading,
+          icon: icon,
+          size: size,
+          onClick: action,
+          variant: leftFooterAction?.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",
+          onClick: e => {
+            if (action) {
+              e.preventDefault();
+              action(e);
+            }
+          }
+        }, 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, {
+    showModal: isModalOpen,
+    closeModal: closeModalAndClearInput,
+    minWidth: getMinWidth(),
+    maxWidth: getMaxWidth(),
+    modalHeight: "auto",
+    padding: getPadding()
+  }, /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement("form", {
+    onSubmit: submitAction
+  }, topImage && /*#__PURE__*/React.createElement(StyledModalHeader, {
+    size: size,
+    height: getImageHeight(),
+    marginBottom: getMarginBottom()
+  }, /*#__PURE__*/React.createElement("img", {
+    src: topImage,
+    alt: "Modal top"
+  }), /*#__PURE__*/React.createElement(ModalHeaderActionsWithImage, {
+    hasBackButton: !!backButton
+  }, ModalBackButton(), ModalCloseButton(closeAction))), /*#__PURE__*/React.createElement(ModalTitleSection, null, /*#__PURE__*/React.createElement(FlexContainer, null, !topImage && ModalBackButton(), title && ModalTitle(title, size)), /*#__PURE__*/React.createElement(ModalHeaderActions, null, tooltip && ModalTootip(tooltip), !topImage && ModalCloseButton(closeAction))), /*#__PURE__*/React.createElement(ModalBody, {
+    size: size
+  }, children), note && /*#__PURE__*/React.createElement(ModalNote, {
+    note: note,
+    state: state,
+    size: size,
+    icon: icon
+  }), /*#__PURE__*/React.createElement(ModalFooter, {
+    size: size
+  }, leftFooterAction && LeftFooterAction(leftFooterAction), buttons?.map((b, i) => /*#__PURE__*/React.createElement(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
+  }, b.text))))));
+};
+ModalDialog.propTypes = {
+  isModalOpen: _pt.bool.isRequired,
+  closeModalAndClearInput: _pt.any.isRequired,
+  title: _pt.string,
+  topImage: _pt.any,
+  buttons: _pt.array,
+  tooltip: _pt.string,
+  backButton: _pt.func,
+  closeAction: _pt.func.isRequired,
+  submitAction: _pt.func.isRequired,
+  note: _pt.oneOfType([_pt.string, _pt.node]),
+  state: _pt.string,
+  icon: _pt.node
+};
+export default ModalDialog;
+//# sourceMappingURL=ModalDialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Modals/ModalDialog.tsx"],"names":["React","Button","IconButton","ArrowLineLeft","Close","Help","COLORS","ComponentL","ComponentM","ComponentTextStyle","ComponentXL","Size","ModalContainer","BackButtonWrapper","CloseButtonWrapper","Column","FlexContainer","ModalBody","ModalFooter","ModalHeaderActions","ModalHeaderActionsWithImage","ModalTitleSection","StyledModalHeader","ModalHoverModifier","ModalNote","TooltipWrapper","HyperLink","ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","icon","getMinWidth","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","Bold","ModalTootip","XSmall","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","e","preventDefault","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 | React.ReactNode;\n  state?: string;\n  icon?: React.ReactNode;\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  icon,\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\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  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} 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/esm/Modals/ModalNote.js

@@ -0,0 +1,56 @@
+import _pt from "prop-types";
+import * as React from 'react';
+import { COLORS } from '..';
+import { CheckComplete, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';
+import { ModalNoteSection } from './ModalStyles';
+export const ModalNote = ({
+  note,
+  icon,
+  size,
+  state = 'neutral'
+}) => {
+  const stateVal = state.toLowerCase();
+
+  switch (stateVal) {
+    case 'positive':
+      return /*#__PURE__*/React.createElement(ModalNoteSection, {
+        state: stateVal,
+        size: size
+      }, icon ? icon : /*#__PURE__*/React.createElement(CheckComplete, {
+        color: COLORS.correct_500
+      }), /*#__PURE__*/React.createElement("span", null, note));
+
+    case 'warning':
+      return /*#__PURE__*/React.createElement(ModalNoteSection, {
+        state: stateVal,
+        size: size
+      }, icon ? icon : /*#__PURE__*/React.createElement(TechnicalWarning, {
+        color: COLORS.warning_500
+      }), /*#__PURE__*/React.createElement("span", null, note));
+
+    case 'critical':
+      return /*#__PURE__*/React.createElement(ModalNoteSection, {
+        state: stateVal,
+        size: size
+      }, icon ? icon : /*#__PURE__*/React.createElement(TechnicalWarning, {
+        color: COLORS.warning_500
+      }), /*#__PURE__*/React.createElement("span", null, note));
+
+    default:
+      return /*#__PURE__*/React.createElement(ModalNoteSection, {
+        state: stateVal,
+        size: size
+      }, icon ? icon : /*#__PURE__*/React.createElement(Information, {
+        color: COLORS.primary_500,
+        className: size
+      }), /*#__PURE__*/React.createElement("span", null, note));
+  }
+};
+ModalNote.propTypes = {
+  note: _pt.oneOfType([_pt.string, _pt.node]).isRequired,
+  icon: _pt.node,
+  state: _pt.string,
+  size: _pt.string
+};
+export default ModalNote;
+//# sourceMappingURL=ModalNote.js.map

package/dist/esm/Modals/ModalNote.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Modals/ModalNote.tsx"],"names":["React","COLORS","CheckComplete","Information","TechnicalWarning","ModalNoteSection","ModalNote","note","icon","size","state","stateVal","toLowerCase","correct_500","warning_500","primary_500"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,MAAT,QAAuB,IAAvB;AACA,SAASC,aAAT,EAAwBC,WAAxB,EAAqCC,gBAArC,QAA6D,kCAA7D;AACA,SAASC,gBAAT,QAAiC,eAAjC;AASA,OAAO,MAAMC,SAA6C,GAAG,CAAC;AAAEC,EAAAA,IAAF;AAAQC,EAAAA,IAAR;AAAcC,EAAAA,IAAd;AAAoBC,EAAAA,KAAK,GAAG;AAA5B,CAAD,KAA6C;AACxG,QAAMC,QAAQ,GAAGD,KAAK,CAACE,WAAN,EAAjB;;AAEA,UAAQD,QAAR;AACE,SAAK,UAAL;AACE,0BACE,oBAAC,gBAAD;AAAkB,QAAA,KAAK,EAAEA,QAAzB;AAAmC,QAAA,IAAI,EAAEF;AAAzC,SACGD,IAAI,GAAGA,IAAH,gBAAU,oBAAC,aAAD;AAAe,QAAA,KAAK,EAAEP,MAAM,CAACY;AAA7B,QADjB,eAEE,kCAAON,IAAP,CAFF,CADF;;AAOF,SAAK,SAAL;AACE,0BACE,oBAAC,gBAAD;AAAkB,QAAA,KAAK,EAAEI,QAAzB;AAAmC,QAAA,IAAI,EAAEF;AAAzC,SACGD,IAAI,GAAGA,IAAH,gBAAU,oBAAC,gBAAD;AAAkB,QAAA,KAAK,EAAEP,MAAM,CAACa;AAAhC,QADjB,eAEE,kCAAOP,IAAP,CAFF,CADF;;AAOF,SAAK,UAAL;AACE,0BACE,oBAAC,gBAAD;AAAkB,QAAA,KAAK,EAAEI,QAAzB;AAAmC,QAAA,IAAI,EAAEF;AAAzC,SACGD,IAAI,GAAGA,IAAH,gBAAU,oBAAC,gBAAD;AAAkB,QAAA,KAAK,EAAEP,MAAM,CAACa;AAAhC,QADjB,eAEE,kCAAOP,IAAP,CAFF,CADF;;AAOF;AACE,0BACE,oBAAC,gBAAD;AAAkB,QAAA,KAAK,EAAEI,QAAzB;AAAmC,QAAA,IAAI,EAAEF;AAAzC,SACGD,IAAI,GAAGA,IAAH,gBAAU,oBAAC,WAAD;AAAa,QAAA,KAAK,EAAEP,MAAM,CAACc,WAA3B;AAAwC,QAAA,SAAS,EAAEN;AAAnD,QADjB,eAEE,kCAAOF,IAAP,CAFF,CADF;AA1BJ;AAiCD,CApCM;;AANLA,EAAAA,I;AACAC,EAAAA,I;AACAE,EAAAA,K;AACAD,EAAAA,I;;AAyCF,eAAeH,SAAf","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '..';\nimport { CheckComplete, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { ModalNoteSection } from './ModalStyles';\n\ninterface NoteProps {\n  note: string | React.ReactNode;\n  icon?: React.ReactNode;\n  state?: string;\n  size?: string;\n}\n\nexport const ModalNote: React.FunctionComponent<NoteProps> = ({ note, icon, size, state = 'neutral' }) => {\n  const stateVal = state.toLowerCase();\n\n  switch (stateVal) {\n    case 'positive':\n      return (\n        <ModalNoteSection state={stateVal} size={size}>\n          {icon ? icon : <CheckComplete color={COLORS.correct_500} />}\n          <span>{note}</span>\n        </ModalNoteSection>\n      );\n\n    case 'warning':\n      return (\n        <ModalNoteSection state={stateVal} size={size}>\n          {icon ? icon : <TechnicalWarning color={COLORS.warning_500} />}\n          <span>{note}</span>\n        </ModalNoteSection>\n      );\n\n    case 'critical':\n      return (\n        <ModalNoteSection state={stateVal} size={size}>\n          {icon ? icon : <TechnicalWarning color={COLORS.warning_500} />}\n          <span>{note}</span>\n        </ModalNoteSection>\n      );\n\n    default:\n      return (\n        <ModalNoteSection state={stateVal} size={size}>\n          {icon ? icon : <Information color={COLORS.primary_500} className={size} />}\n          <span>{note}</span>\n        </ModalNoteSection>\n      );\n  }\n};\n\nexport default ModalNote;\n"],"file":"ModalNote.js"}