@laerdal/life-react-components 1.2.2-dev.13 → 1.2.2-dev.15

package/dist/umd/HyperLink/HyperLink.js

@@ -79,29 +79,88 @@
     };
   }
 
+  const _excluded = ["id", "className", "variant", "href", "margin", "children", "target"];
+
+  function _extends() {
+    _extends = Object.assign || function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+
+      return target;
+    };
+
+    return _extends.apply(this, arguments);
+  }
+
+  function _objectWithoutProperties(source, excluded) {
+    if (source == null) return {};
+
+    var target = _objectWithoutPropertiesLoose(source, excluded);
+
+    var key, i;
+
+    if (Object.getOwnPropertySymbols) {
+      var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+      for (i = 0; i < sourceSymbolKeys.length; i++) {
+        key = sourceSymbolKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+        target[key] = source[key];
+      }
+    }
+
+    return target;
+  }
+
+  function _objectWithoutPropertiesLoose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+
+    for (i = 0; i < sourceKeys.length; i++) {
+      key = sourceKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
+    }
+
+    return target;
+  }
+
   const StyledLink = _styledComponents2.default.a`
   ${props => props.variant === 'inverted' ? _styling.invertedStyle : _styling.defaultStyle}
   ${props => props.margin ? `margin: ${props.margin};` : ''}
 `;
 
-  const HyperLink = ({
-    id,
-    className,
-    variant,
-    href,
-    margin,
-    children,
-    target
-  }) => {
-    return /*#__PURE__*/React.createElement(StyledLink, {
+  const HyperLink = _ref => {
+    let {
+      id,
+      className,
+      variant,
+      href,
+      margin,
+      children,
+      target
+    } = _ref,
+        props = _objectWithoutProperties(_ref, _excluded);
+
+    return /*#__PURE__*/React.createElement(StyledLink, _extends({
       id: id,
       className: className,
       variant: variant,
       href: href,
-      target: target || "_blank",
+      target: target || '_blank',
       rel: "noopener noreferrer",
       margin: margin
-    }, children);
+    }, props), children);
   };
 
   HyperLink.propTypes = {

package/dist/umd/HyperLink/HyperLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/HyperLink/HyperLink.tsx"],"names":["StyledLink","styled","a","props","defaultStyle","margin","id","variant","href","disabled","children","className","HyperLink","target"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,QAAMA,UAAU,GAAGC,2BAAOC,CAGvB;AACH,IAAKC,KAAD,IAAYA,KAAK,CAALA,OAAAA,KAAAA,UAAAA,GAAAA,sBAAAA,GAA+CC,qBAAc;AAC7E,IAAKD,KAAD,IAAYA,KAAK,CAALA,MAAAA,GAAgB,WAAUA,KAAK,CAACE,MAAhCF,GAAAA,GAA4C,EAAI;AALhE,CAAA;;AAkBA,QAAMS,SAAyC,GAAG,CAAC;AAAA,IAAA,EAAA;AAAA,IAAA,SAAA;AAAA,IAAA,OAAA;AAAA,IAAA,IAAA;AAAA,IAAA,MAAA;AAAA,IAAA,QAAA;AAAkDC,IAAAA;AAAlD,GAAD,KAAuE;AACvH,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA;AAAY,MAAA,EAAE,EAAd,EAAA;AAAoB,MAAA,SAAS,EAA7B,SAAA;AAA0C,MAAA,OAAO,EAAjD,OAAA;AAA4D,MAAA,IAAI,EAAhE,IAAA;AAAwE,MAAA,MAAM,EAAEA,MAAM,IAAtF,QAAA;AAAoG,MAAA,GAAG,EAAvG,qBAAA;AAA8H,MAAA,MAAM,EAAER;AAAtI,KAAA,EADF,QACE,CADF;AADF,GAAA;;;AATEC,IAAAA,E;AACAC,IAAAA,O,6BAAS,S,EAAY,U;AACrBC,IAAAA,I;AACAC,IAAAA,Q;AACAJ,IAAAA,M;AACAK,IAAAA,Q;AACAC,IAAAA,S;;oBAWF,S","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { defaultStyle, invertedStyle } from './styling';\n\nconst StyledLink = styled.a<{\n  variant: 'default' | 'inverted';\n  margin?: string;\n}>`\n  ${(props) => (props.variant === 'inverted' ? invertedStyle : defaultStyle)}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\ninterface Props extends React.AnchorHTMLAttributes<HTMLAnchorElement>{\n  id: string;\n  variant: 'default' | 'inverted';\n  href: string;\n  disabled?: boolean;\n  margin?: string;\n  children?: any;\n  className?: string;\n}\n\nconst HyperLink: React.FunctionComponent<Props> = ({ id, className, variant, href, margin, children, target }: Props) => {\n  return (\n    <StyledLink id={id} className={className} variant={variant} href={href} target={target || \"_blank\"} rel=\"noopener noreferrer\" margin={margin}>\n      {children}\n    </StyledLink>\n  );\n};\n\nexport default HyperLink;\n"],"file":"HyperLink.js"}
+{"version":3,"sources":["../../../src/HyperLink/HyperLink.tsx"],"names":["StyledLink","styled","a","props","defaultStyle","margin","id","variant","href","disabled","children","className","HyperLink","target"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,QAAMA,UAAU,GAAGC,2BAAOC,CAGvB;AACH,IAAKC,KAAD,IAAYA,KAAK,CAALA,OAAAA,KAAAA,UAAAA,GAAAA,sBAAAA,GAA+CC,qBAAc;AAC7E,IAAKD,KAAD,IAAYA,KAAK,CAALA,MAAAA,GAAgB,WAAUA,KAAK,CAACE,MAAhCF,GAAAA,GAA4C,EAAI;AALhE,CAAA;;AAkBA,QAAMS,SAAkD,GAAG,IAAA,IAA0F;AAAA,QAAzF;AAAA,MAAA,EAAA;AAAA,MAAA,SAAA;AAAA,MAAA,OAAA;AAAA,MAAA,IAAA;AAAA,MAAA,MAAA;AAAA,MAAA,QAAA;AAAkDC,MAAAA;AAAlD,QAAyF,IAAA;AAAA,QAA5BV,KAA4B,GAAA,wBAAA,CAAA,IAAA,EAAA,SAAA,CAAA;;AACnJ,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,QAAA,CAAA;AAAY,MAAA,EAAE,EAAd,EAAA;AAAoB,MAAA,SAAS,EAA7B,SAAA;AAA0C,MAAA,OAAO,EAAjD,OAAA;AAA4D,MAAA,IAAI,EAAhE,IAAA;AAAwE,MAAA,MAAM,EAAEU,MAAM,IAAtF,QAAA;AAAoG,MAAA,GAAG,EAAvG,qBAAA;AAA8H,MAAA,MAAM,EAAER;AAAtI,KAAA,EAAA,KAAA,CAAA,EADF,QACE,CADF;AADF,GAAA;;;AATEC,IAAAA,E;AACAC,IAAAA,O,6BAAS,S,EAAY,U;AACrBC,IAAAA,I;AACAC,IAAAA,Q;AACAJ,IAAAA,M;AACAK,IAAAA,Q;AACAC,IAAAA,S;;oBAWF,S","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { defaultStyle, invertedStyle } from './styling';\n\nconst StyledLink = styled.a<{\n  variant: 'default' | 'inverted';\n  margin?: string;\n}>`\n  ${(props) => (props.variant === 'inverted' ? invertedStyle : defaultStyle)}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nexport interface HyperlinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  id: string;\n  variant: 'default' | 'inverted';\n  href: string;\n  disabled?: boolean;\n  margin?: string;\n  children?: any;\n  className?: string;\n}\n\nconst HyperLink: React.FunctionComponent<HyperlinkProps> = ({ id, className, variant, href, margin, children, target, ...props }: HyperlinkProps) => {\n  return (\n    <StyledLink id={id} className={className} variant={variant} href={href} target={target || '_blank'} rel=\"noopener noreferrer\" margin={margin} {...props}>\n      {children}\n    </StyledLink>\n  );\n};\n\nexport default HyperLink;\n"],"file":"HyperLink.js"}

package/dist/umd/Modals/ModalDialog.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "../Button", "../icons/systemicons/SystemIcons", "../styles", "../types", "./ModalContainer", "./ModalStyles", "./ModalNote"], factory);
+    define(["exports", "prop-types", "react", "..", "../Button", "../icons/systemicons/SystemIcons", "../styles", "../types", "./ModalContainer", "./ModalStyles", "./ModalNote"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("../Button"), require("../icons/systemicons/SystemIcons"), require("../styles"), require("../types"), require("./ModalContainer"), require("./ModalStyles"), require("./ModalNote"));
+    factory(exports, require("prop-types"), require("react"), require(".."), require("../Button"), require("../icons/systemicons/SystemIcons"), require("../styles"), require("../types"), require("./ModalContainer"), require("./ModalStyles"), require("./ModalNote"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.Button, global.SystemIcons, global.styles, global.types, global.ModalContainer, global.ModalStyles, global.ModalNote);
+    factory(mod.exports, global.propTypes, global.react, global._, global.Button, global.SystemIcons, global.styles, global.types, global.ModalContainer, global.ModalStyles, global.ModalNote);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _Button, _SystemIcons, _styles, _types, _ModalContainer, _ModalStyles, _ModalNote) {
+})(this, function (exports, _propTypes, _react, _, _Button, _SystemIcons, _styles, _types, _ModalContainer, _ModalStyles, _ModalNote) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -87,6 +87,7 @@
     title,
     topImage,
     buttons,
+    leftFooterAction,
     backButton,
     closeAction,
     submitAction,
@@ -229,9 +230,54 @@
       }
     };
 
-    buttons?.reverse();
-    const lastLeftButton = buttons?.find(a => a.position === 'left');
-    buttons?.reverse();
+    const getLeftActionIconElement = icon => {
+      return /*#__PURE__*/React.cloneElement(icon, {
+        size: size === _types.Size.Small ? '20px' : size === _types.Size.Large ? '28px' : '24px'
+      });
+    };
+
+    const LeftFooterAction = leftFooterAction => {
+      const {
+        text,
+        actionType,
+        disabled,
+        icon,
+        action
+      } = leftFooterAction;
+
+      switch (actionType) {
+        case 'button':
+          return /*#__PURE__*/React.createElement(_Button.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"
+          }, 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(_ModalContainer2.default, {
       showModal: isModalOpen,
       closeModal: closeModalAndClearInput,
@@ -272,12 +318,8 @@
       size: size,
       onClick: b.action,
       type: b.type,
-      variant: b.variant,
-      style: b.position === 'left' ? {
-        order: -1,
-        marginRight: b === lastLeftButton ? 'auto' : undefined
-      } : undefined
-    }, b.text))))));
+      variant: b.variant
+    }, b.text)), leftFooterAction && LeftFooterAction(leftFooterAction)))));
   };
 
   ModalDialog.propTypes = {
@@ -285,11 +327,7 @@
     closeModalAndClearInput: _propTypes2.default.any.isRequired,
     title: _propTypes2.default.string,
     topImage: _propTypes2.default.any,
-    buttons: _propTypes2.default.arrayOf(_propTypes2.default.shape({
-      action: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.func]),
-      text: _propTypes2.default.string.isRequired,
-      position: _propTypes2.default.oneOf(['left', 'right'])
-    })),
+    buttons: _propTypes2.default.array,
     tooltip: _propTypes2.default.string,
     backButton: _propTypes2.default.func,
     closeAction: _propTypes2.default.func.isRequired,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Modals/ModalDialog.tsx"],"names":["action","text","position","isModalOpen","closeModalAndClearInput","title","topImage","buttons","tooltip","backButton","closeAction","submitAction","note","state","ModalDialog","React","getMinWidth","Size","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","ComponentTextStyle","Bold","ModalCloseButton","onClick","size","COLORS","black","ModalBackButton","lastLeftButton","a","setTooltipOpen","neutral_600","tooltipOpen","b","order","marginRight","undefined"],"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":["isModalOpen","closeModalAndClearInput","title","topImage","buttons","tooltip","backButton","closeAction","submitAction","note","state","ModalDialog","React","getMinWidth","Size","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","ComponentTextStyle","Bold","ModalCloseButton","onClick","size","COLORS","black","ModalBackButton","getLeftActionIconElement","icon","LeftFooterAction","leftFooterAction","action","order","marginRight","setTooltipOpen","neutral_600","tooltipOpen","b","variant"],"mappings":";;;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BO,QAAMW,WAAmD,WAAnDA,WAAmD,GAAG,CAAC;AAAA,IAAA,IAAA;AAAA,IAAA,WAAA;AAAA,IAAA,uBAAA;AAAA,IAAA,KAAA;AAAA,IAAA,QAAA;AAAA,IAAA,OAAA;AAAA,IAAA,gBAAA;AAAA,IAAA,UAAA;AAAA,IAAA,WAAA;AAAA,IAAA,YAAA;AAAA,IAAA,OAAA;AAAA,IAAA,QAAA;AAAA,IAAA,IAAA;AAclED,IAAAA;AAdkE,GAAD,KAe7D;AACJ,UAAM,CAAA,WAAA,EAAA,cAAA,IAAgCE,KAAK,CAALA,QAAAA,CAAtC,KAAsCA,CAAtC;;AAEA,UAAMC,WAAW,GAAG,MAAM;AACxB,cAAA,IAAA;AACE,aAAKC,YAAL,KAAA;AACE,iBAAA,OAAA;;AACF,aAAKA,YAAL,KAAA;AACE,iBAAA,OAAA;;AACF,aAAKA,YAAL,MAAA;AACA;AACE,iBAAA,OAAA;AAPJ;AADF,KAAA;;AAYA,UAAMC,WAAW,GAAG,MAAM;AACxB,cAAA,IAAA;AACE,aAAKD,YAAL,KAAA;AACE,iBAAA,OAAA;;AACF,aAAKA,YAAL,KAAA;AACE,iBAAA,OAAA;;AACF,aAAKA,YAAL,MAAA;AACA;AACE,iBAAA,OAAA;AAPJ;AADF,KAAA;;AAYA,UAAME,cAAc,GAAG,MAAM;AAC3B,cAAA,IAAA;AACE,aAAKF,YAAL,KAAA;AACE,iBAAA,GAAA;;AACF,aAAKA,YAAL,MAAA;AACE,iBAAA,GAAA;;AACF,aAAKA,YAAL,KAAA;AACE,iBAAA,GAAA;;AACF;AACE,iBAAA,GAAA;AARJ;AADF,KAAA;;AAaA,UAAMG,eAAe,GAAG,MAAM;AAC5B,cAAA,IAAA;AACE,aAAKH,YAAL,KAAA;AACE,iBAAA,MAAA;;AACF,aAAKA,YAAL,MAAA;AACE,iBAAA,MAAA;;AACF,aAAKA,YAAL,KAAA;AACE,iBAAA,MAAA;;AACF;AACE,iBAAA,MAAA;AARJ;AADF,KAAA;;AAaA,UAAMI,UAAU,GAAG,MAAM;AACvB,cAAA,IAAA;AACE,aAAKJ,YAAL,KAAA;AACE,iBAAA,eAAA;;AACF,aAAKA,YAAL,MAAA;AACE,iBAAA,gBAAA;;AACF,aAAKA,YAAL,KAAA;AACE,iBAAA,MAAA;;AACF;AACE,iBAAA,gBAAA;AARJ;AADF,KAAA;;AAaA,UAAMK,UAAU,GAAG,CAAA,KAAA,EAAA,IAAA,KAAgC;AACjD,cAAA,IAAA;AACE,aAAKL,YAAL,KAAA;AACE,iBAAA,aAAO,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAY,YAAA,SAAS,EAAEM,2BAAmBC;AAA1C,WAAA,EAAP,KAAO,CAAP;;AACF,aAAKP,YAAL,MAAA;AACE,iBAAA,aAAO,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAY,YAAA,SAAS,EAAEM,2BAAmBC;AAA1C,WAAA,EAAP,KAAO,CAAP;;AACF,aAAKP,YAAL,KAAA;AACE,iBAAA,aAAO,KAAA,CAAA,aAAA,CAAA,mBAAA,EAAA;AAAa,YAAA,SAAS,EAAEM,2BAAmBC;AAA3C,WAAA,EAAP,KAAO,CAAP;;AACF;AACE,iBAAA,aAAO,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAY,YAAA,SAAS,EAAED,2BAAmBC;AAA1C,WAAA,EAAP,KAAO,CAAP;AARJ;AADF,KAAA;;AAaA,UAAMC,gBAAgB,GAAIC,OAAD,IAAkB;AACzC,aAAA,aACE,KAAA,CAAA,aAAA,CAAA,+BAAA,EAAA;AAAoB,QAAA,QAAQ,EAAE,CAAC,CAA/B,QAAA;AAA0C,QAAA,IAAI,EAAEC;AAAhD,OAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAY,QAAA,OAAO,EAAnB,WAAA;AAAgC,QAAA,KAAK,EAArC,UAAA;AAAiD,QAAA,MAAM,EAAE,MAAMD,OAA/D,EAAA;AAA0E,QAAA,YAAY,EAAE;AAAxF,OAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAO,QAAA,IAAI,EAAX,MAAA;AAAmB,QAAA,KAAK,EAAEE,eAAOC;AAAjC,OAAA,CADF,CADF,CADF;AADF,KAAA;;AAUA,UAAMC,eAAe,GAAG,MAAM;AAC5B,UAAA,UAAA,EAAgB;AACd,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,8BAAA,EAAA;AAAmB,UAAA,QAAQ,EAAE,CAAC,CAA9B,QAAA;AAAyC,UAAA,IAAI,EAAEH;AAA/C,SAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAY,UAAA,OAAO,EAAnB,WAAA;AAAgC,UAAA,KAAK,EAArC,UAAA;AAAiD,UAAA,MAAM,EAAE,MAAMlB,UAA/D,EAAA;AAA6E,UAAA,YAAY,EAAE;AAA3F,SAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,0BAAA,EAAA;AAAe,UAAA,IAAI,EAAnB,MAAA;AAA2B,UAAA,KAAK,EAAEmB,eAAOC;AAAzC,SAAA,CADF,CADF,CADF;AAOD;AATH,KAAA;;AAYA,UAAME,wBAAwB,GAAIC,IAAD,IAAqB;AACpD,aAAA,aAAO,KAAK,CAAL,YAAA,CAAA,IAAA,EAA+C;AAAEL,QAAAA,IAAI,EAAEA,IAAI,KAAKV,YAATU,KAAAA,GAAAA,MAAAA,GAA+BA,IAAI,KAAKV,YAATU,KAAAA,GAAAA,MAAAA,GAA+B;AAAtE,OAA/C,CAAP;AADF,KAAA;;AAIA,UAAMM,gBAAgB,GAAIC,gBAAD,IAAwC;AAC/D,YAAM;AAAA,QAAA,IAAA;AAAA,QAAA,UAAA;AAAA,QAAA,QAAA;AAAA,QAAA,IAAA;AAAoCC,QAAAA;AAApC,UAAN,gBAAA;;AACA,cAAA,UAAA;AACE,aAAA,QAAA;AACE,iBAAA,aACE,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA;AACE,YAAA,EAAE,EADJ,oBAAA;AAEE,YAAA,IAAI,EAAGD,gBAAD,EAFR,IAAA;AAGE,YAAA,QAAQ,EAHV,QAAA;AAIE,YAAA,OAAO,EAAGA,gBAAD,EAJX,OAAA;AAKE,YAAA,IAAI,EALN,IAAA;AAME,YAAA,IAAI,EANN,IAAA;AAOE,YAAA,OAAO,EAPT,MAAA;AAQE,YAAA,OAAO,EAAGA,gBAAD,EAAA,OAACA,IARZ,WAAA;AASE,YAAA,KAAK,EAAE;AAAEE,cAAAA,KAAK,EAAE,CAAT,CAAA;AAAaC,cAAAA,WAAW,EAAE;AAA1B;AATT,WAAA,EADF,IACE,CADF;;AAcF,aAAA,WAAA;AACE,iBAAA,aACE,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA;AAAW,YAAA,EAAE,EAAb,uBAAA;AAAsC,YAAA,SAAS,EAA/C,eAAA;AAAgE,YAAA,IAAI,EAAGH,gBAAD,CAAtE,IAAA;AAAsH,YAAA,QAAQ,EAA9H,QAAA;AAA0I,YAAA,OAAO,EAAC;AAAlJ,WAAA,EACGF,IAAI,IAAID,wBAAwB,CADnC,IACmC,CADnC,EADF,IACE,CADF;;AAMF,aAAA,MAAA;AACE,iBAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,YAAA,SAAS,EAAC;AAAf,WAAA,EACGC,IAAI,IAAID,wBAAwB,CADnC,IACmC,CADnC,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAHJ,IAGI,CAFF,CADF;AAxBJ;AAFF,KAAA;;AAmCA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,wBAAA,EAAA;AAAgB,MAAA,SAAS,EAAzB,WAAA;AAAwC,MAAA,UAAU,EAAlD,uBAAA;AAA6E,MAAA,QAAQ,EAAEf,WAAvF,EAAA;AAAsG,MAAA,QAAQ,EAAEE,WAAhH,EAAA;AAA+H,MAAA,WAAW,EAA1I,MAAA;AAAkJ,MAAA,OAAO,EAAEG,UAAU;AAArK,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,mBAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAM,MAAA,QAAQ,EAAEV;AAAhB,KAAA,EACGL,QAAQ,IAAA,aACP,KAAA,CAAA,aAAA,CAAA,8BAAA,EAAA;AAAmB,MAAA,IAAI,EAAvB,IAAA;AAA+B,MAAA,MAAM,EAAEa,cAAvC,EAAA;AAAyD,MAAA,YAAY,EAAEC,eAAe;AAAtF,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,MAAA,GAAG,EAAR,QAAA;AAAoB,MAAA,GAAG,EAAC;AAAxB,KAAA,CADF,EAEGU,eAFH,EAAA,EAGGL,gBAAgB,CALvB,WAKuB,CAHnB,CAFJ,EAAA,aAQE,KAAA,CAAA,aAAA,CAAA,8BAAA,EAAA,IAAA,EACG,CAAA,QAAA,IAAaK,eADhB,EAAA,EAEGzB,KAAK,IAAIiB,UAAU,CAAA,KAAA,EAFtB,IAEsB,CAFtB,EAGGd,OAAO,IAAA,aACN,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,MAAA,EAAE,EAAC;AAAR,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,MAAA,WAAW,EAAE,MAAM8B,cAAc,CAAtC,IAAsC,CAAtC;AAA8C,MAAA,UAAU,EAAE,MAAMA,cAAc,CAAA,KAAA;AAA9E,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,iBAAA,EAAA;AAAM,MAAA,IAAI,EAAV,MAAA;AAAkB,MAAA,KAAK,EAAEV,eAAOW;AAAhC,KAAA,CADF,CADF,EAIGC,WAAW,IAAA,aAAI,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EARtB,OAQsB,CAJlB,CAJJ,EAWG,CAAA,QAAA,IAAaf,gBAAgB,CAnBlC,WAmBkC,CAXhC,CARF,EAAA,aAsBE,KAAA,CAAA,aAAA,CAAA,sBAAA,EAAA;AAAW,MAAA,IAAI,EAAEE;AAAjB,KAAA,EAtBF,QAsBE,CAtBF,EAwBGf,IAAI,IAAA,aAAI,KAAA,CAAA,aAAA,CAAA,oBAAA,EAAA;AAAW,MAAA,IAAI,EAAf,IAAA;AAAuB,MAAA,KAAK,EAA5B,KAAA;AAAqC,MAAA,IAAI,EAAEe;AAA3C,KAAA,CAxBX,EAAA,aA0BE,KAAA,CAAA,aAAA,CAAA,wBAAA,EAAA;AAAa,MAAA,IAAI,EAAEA;AAAnB,KAAA,EACGpB,OAAO,EAAPA,GAAAA,CAAa,CAAA,CAAA,EAAA,CAAA,KAAA,aACZ,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA;AAAQ,MAAA,GAAG,EAAEkC,CAAC,CAADA,EAAAA,IAAb,CAAA;AAAwB,MAAA,EAAE,EAAEA,CAAC,CAA7B,EAAA;AAAkC,MAAA,QAAQ,EAAEA,CAAC,CAA7C,QAAA;AAAwD,MAAA,OAAO,EAAEA,CAAC,CAAlE,OAAA;AAA4E,MAAA,IAAI,EAAhF,IAAA;AAAwF,MAAA,OAAO,EAAEA,CAAC,CAAlG,MAAA;AAA2G,MAAA,IAAI,EAAEA,CAAC,CAAlH,IAAA;AAAyH,MAAA,OAAO,EAAEA,CAAC,CAACC;AAApI,KAAA,EACGD,CAAC,CAHR,IAEI,CADDlC,CADH,EAMG2B,gBAAgB,IAAID,gBAAgB,CAnC/C,gBAmC+C,CANvC,CA1BF,CADF,CADF,CADF;AA3JK,GAAA;;;AAdL9B,IAAAA,W;AACAC,IAAAA,uB;AACAC,IAAAA,K;AACAC,IAAAA,Q;AACAC,IAAAA,O;AAEAC,IAAAA,O;AACAC,IAAAA,U;AACAC,IAAAA,W;AACAC,IAAAA,Y;AACAC,IAAAA,I;AACAC,IAAAA,K;;oBAyMF,W","sourcesContent":["import * as React from 'react';\nimport { HyperLink } from '..';\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 { BackButtonWrapper, CloseButtonWrapper, Column, ModalBody, ModalFooter, ModalTitleSection, StyledModalHeader } from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { ButtonAction, LeftFooterAction, LeftFooterActionBase, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { ReactNode } from 'react';\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 [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  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              {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} 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            {leftFooterAction && LeftFooterAction(leftFooterAction)}\n          </ModalFooter>\n        </form>\n      </Column>\n    </ModalContainer>\n  );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}

package/dist/umd/Modals/ModalStyles.js

@@ -109,7 +109,7 @@
   border-radius: 2px;
 
   span {
-    display:block;
+    display: block;
     width: 80%;
     margin-left: 8px;
     color: ${props => getNoteMessageColor(props.state)};
@@ -134,6 +134,19 @@
   justify-content: flex-end;
 
   gap: ${props => props?.size === 'large' ? `16px` : '8px'};
+
+  .footer-action {
+    order: -1;
+    margin-right: auto;
+    display: flex;
+    align-items: center;
+    font-size: ${props => props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px'};
+    gap: ${props => props?.size === _types.Size.Large ? `8px` : props?.size === _types.Size.Small ? '4px' : '6px'};
+  }
+
+  .footer-action.note {
+    color: ${_.COLORS.neutral_600};
+  }
 `;
 
   const getBackgroundColor = exports.getBackgroundColor = state => {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Modals/ModalStyles.ts"],"names":["ModalHeader","styled","section","props","StyledModalHeader","height","Column","div","ModalTitleSection","CloseButtonWrapper","css","Size","BackButtonWrapper","ModalTitle","h5","ModalNoteSection","getBackgroundColor","getNoteMessageColor","ModalBody","ModalFooter","state","COLORS"],"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","StyledModalHeader","height","Column","div","ModalTitleSection","CloseButtonWrapper","css","Size","BackButtonWrapper","ModalTitle","h5","ModalNoteSection","getBackgroundColor","getNoteMessageColor","ModalBody","ModalFooter","COLORS","neutral_600","state"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA;AACA;AACA;AACO,QAAMA,WAAW,WAAXA,WAAW,GAAGC,2BAAOC,OAAmC;AACrE;AACA;AACA;AACA,mBAAoBC,KAAD,IAAWA,KAAK,CAALA,YAAAA,IAAsB,MAAO;AAJpD,CAAA;AAOA,QAAMC,iBAAiB,WAAjBA,iBAAiB,GAAGH,gCAAM,WAANA,CAA+E;AAChH;AACA;AACA;AACA;AACA,YAAaE,KAAD,IAAYA,KAAK,CAALA,MAAAA,GAAgB,GAAEA,KAAK,CAALA,MAAAA,IAAgBA,KAAK,CAALA,IAAAA,KAAAA,OAAAA,GAAAA,EAAAA,GAA8BA,KAAK,CAALA,IAAAA,KAAAA,OAAAA,GAAAA,EAAAA,GAA9CA,EAAAA,CAAlBA,IAAAA,GAAwG,EAAI;AACpI;AACA;AACA,cAAeA,KAAD,IAAY,GAAEA,KAAK,CAACE,MAAO,IAAI;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA;AAfO,CAAA;AAkBA,QAAMC,MAAM,WAANA,MAAM,GAAGL,2BAAOM,GAAI;AACjC;AACA;AACA;AACA;AAJO,CAAA;AAOA,QAAMC,iBAAiB,WAAjBA,iBAAiB,GAAGP,2BAAOC,OAAQ;AAChD;AACA;AACA;AACA;AAJO,CAAA;AAOA,QAAMO,kBAAkB,WAAlBA,kBAAkB,GAAGR,2BAAOM,GAAyC;AAClF;AACA,MAAOJ,KAAD,IACA,KAAK,CAAL,QAAA,GACIO,qBAAI;AACd;AACA;AACA;AACA;AALM,WAAA,GAOIA,qBAAI;AACd;AACA;AACA;AACA;AACA,sBAAsBP,KAAK,CAALA,IAAAA,KAAeQ,YAAfR,KAAAA,GAAAA,aAAAA,GAA4CA,KAAK,CAALA,IAAAA,KAAeQ,YAAfR,KAAAA,GAAAA,eAAAA,GAA8C,eAAgB;AAChI,WAAY;AACZ;AAjBO,CAAA;AAoBA,QAAMS,iBAAiB,WAAjBA,iBAAiB,GAAGX,2BAAOM,GAAyC;AACjF;AACA,MAAOJ,KAAD,IACA,KAAK,CAAL,QAAA,GACIO,qBAAI;AACd;AACA;AACA;AACA;AALM,WAAA,GAOIA,qBAAI;AACd;AACA;AACA,WAAY;AACZ;AAdO,CAAA;AAiBA,QAAMG,UAAU,WAAVA,UAAU,GAAGZ,2BAAOa,EAA0B;AAC3D;AACA,eAAgBX,KAAD,IAAWA,KAAK,CAALA,QAAAA,IAAkB,QAAS;AACrD;AAHO,CAAA;AAMA,QAAMY,gBAAgB,WAAhBA,gBAAgB,GAAGd,2BAAOC,OAA0C;AACjF,sBAAuBC,KAAD,IAAWa,kBAAkB,CAACb,KAAK,CAAN,KAAA,CAAc;AACjE,eAAgBA,KAAD,IAAYA,KAAK,EAALA,IAAAA,KAAAA,OAAAA,GAAAA,MAAAA,GAAmCA,KAAK,EAALA,IAAAA,KAAAA,OAAAA,GAAAA,MAAAA,GAAmC,MAAQ;AACzG,gBAAiBA,KAAD,IAAYA,KAAK,EAALA,IAAAA,KAAAA,OAAAA,GAAAA,KAAAA,GAAkCA,KAAK,EAALA,IAAAA,KAAAA,OAAAA,GAAAA,MAAAA,GAAmC,MAAQ;AACzG,mBAAoBA,KAAD,IAAYA,KAAK,EAALA,IAAAA,KAAAA,OAAAA,GAAAA,KAAAA,GAAkCA,KAAK,EAALA,IAAAA,KAAAA,OAAAA,GAAAA,MAAAA,GAAmC,MAAQ;AAC5G;AACA;AACA,aAAcA,KAAD,IAAYA,KAAK,EAALA,IAAAA,KAAAA,OAAAA,GAAAA,KAAAA,GAAkCA,KAAK,EAALA,IAAAA,KAAAA,OAAAA,GAAAA,MAAAA,GAAmC,MAAQ;AACtG;AACA;AACA;AACA;AACA;AACA;AACA,aAAcA,KAAD,IAAWc,mBAAmB,CAACd,KAAK,CAAN,KAAA,CAAc;AACzD;AAfO,CAAA;AAkBA,QAAMe,SAAS,WAATA,SAAS,GAAGjB,2BAAOC,OAA2B;AAC3D;AACA;AACA;AACA;AACA;AACA,qBAAsBC,KAAD,IAAYA,KAAK,EAALA,IAAAA,KAAAA,OAAAA,GAAAA,KAAAA,GAAkCA,KAAK,EAALA,IAAAA,KAAAA,OAAAA,GAAAA,MAAAA,GAAmC,MAAQ;AAC9G;AACA;AACA;AACA,sBAAuBA,KAAD,IAAYA,KAAK,EAALA,IAAAA,KAAAA,OAAAA,GAAAA,KAAAA,GAAkCA,KAAK,EAALA,IAAAA,KAAAA,OAAAA,GAAAA,MAAAA,GAAmC,MAAQ;AAC/G;AAXO,CAAA;AAcA,QAAMgB,WAAW,WAAXA,WAAW,GAAGlB,2BAAOC,OAAyB;AAC3D,gBAAiBC,KAAD,IAAYA,KAAK,EAALA,IAAAA,KAAgBQ,YAAhBR,KAAAA,GAAAA,MAAAA,GAAsCA,KAAK,EAALA,IAAAA,KAAgBQ,YAAhBR,KAAAA,GAAAA,MAAAA,GAAsC,MAAQ;AAChH;AACA;AACA;AACA,SAAUA,KAAD,IAAYA,KAAK,EAALA,IAAAA,KAAAA,OAAAA,GAAAA,MAAAA,GAAmC,KAAO;AAC/D;AACA;AACA;AACA;AACA;AACA;AACA,iBAAkBA,KAAD,IAAYA,KAAK,EAALA,IAAAA,KAAAA,OAAAA,GAAAA,MAAAA,GAAmCA,KAAK,EAALA,IAAAA,KAAAA,OAAAA,GAAAA,MAAAA,GAAmC,MAAQ;AAC3G,WAAYA,KAAD,IAAYA,KAAK,EAALA,IAAAA,KAAgBQ,YAAhBR,KAAAA,GAAAA,KAAAA,GAAqCA,KAAK,EAALA,IAAAA,KAAgBQ,YAAhBR,KAAAA,GAAAA,KAAAA,GAAqC,KAAO;AACxG;AACA;AACA;AACA,aAAaiB,SAAOC,WAAY;AAChC;AAlBO,CAAA;;AAqBA,QAAML,kBAAkB,WAAlBA,kBAAkB,GAAIM,KAAD,IAAmB;AACnD,YAAA,KAAA;AACE,WAAA,UAAA;AACE,eAAOF,SAAP,WAAA;;AACF,WAAA,SAAA;AACE,eAAOA,SAAP,WAAA;;AACF,WAAA,UAAA;AACE,eAAOA,SAAP,YAAA;;AACF;AACE,eAAOA,SAAP,WAAA;AARJ;AADK,GAAA;;AAaA,QAAMH,mBAAmB,WAAnBA,mBAAmB,GAAIK,KAAD,IAAmB;AACpD,YAAA,KAAA;AACE,WAAA,UAAA;AACE,eAAOF,SAAP,WAAA;;AACF,WAAA,SAAA;AACE,eAAOA,SAAP,WAAA;;AACF,WAAA,UAAA;AACE,eAAOA,SAAP,YAAA;;AACF;AACE,eAAOA,SAAP,WAAA;AARJ;AADK,GAAA","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  .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/umd/Modals/ModalTypes.js

@@ -0,0 +1,20 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports);
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+});
+//# sourceMappingURL=ModalTypes.js.map

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laerdal/life-react-components",
-  "version": "1.2.2-dev.13",
+  "version": "1.2.2-dev.15",
   "private": false,
   "author": "Thomas Kalve <thomas.kalve@laerdal.com>",
   "contributors": [