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

package/dist/Modals/ModalDialog.d.ts

@@ -1,16 +1,12 @@
 import React from 'react';
-import { Size, ModalSubtitlePosition } from '../types';
+import { Size } from '../types';
 import { ButtonAction, LeftFooterAction } from './ModalTypes';
 import { ImageWithFallbacksProps } from '../Image/ImageWithFallbacks';
 interface NewModalProps {
     size?: Size;
-    titleSize?: Size;
-    subtitleSize?: Size;
     isModalOpen: boolean;
     closeModalAndClearInput: any;
-    title?: string;
-    subtitle?: string;
-    subtitlePosition?: ModalSubtitlePosition;
+    title?: string | React.ReactNode;
     topImage?: any;
     topImageWithFallbacksProps?: ImageWithFallbacksProps;
     buttons?: ButtonAction[];
@@ -26,6 +22,7 @@ interface NewModalProps {
     zIndex?: number;
     contentOverflow?: string;
     width?: string;
+    hasContentBorders?: boolean;
 }
 export declare const ModalDialog: React.FunctionComponent<NewModalProps>;
 export default ModalDialog;

package/dist/Modals/ModalDialog.js

@@ -2,24 +2,21 @@ import _pt from "prop-types";
 import React from 'react';
 import { Button, IconButton } from '../Button';
 import { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';
-import { COLORS, ComponentL, ComponentM, ComponentS, ComponentTextStyle, ComponentXL, ComponentXS } from '../styles';
-import { Size, ModalSubtitlePosition } from '../types';
+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, ImageWithFallbacks } from '..';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var ModalDialog = function ModalDialog(_ref) {
   var size = _ref.size,
-      titleSize = _ref.titleSize,
-      subtitleSize = _ref.subtitleSize,
       isModalOpen = _ref.isModalOpen,
       closeModalAndClearInput = _ref.closeModalAndClearInput,
       title = _ref.title,
-      subtitle = _ref.subtitle,
-      subtitlePosition = _ref.subtitlePosition,
       topImage = _ref.topImage,
       topImageWithFallbacksProps = _ref.topImageWithFallbacksProps,
       buttons = _ref.buttons,
@@ -35,7 +32,8 @@ export var ModalDialog = function ModalDialog(_ref) {
       yOffset = _ref.yOffset,
       zIndex = _ref.zIndex,
       contentOverflow = _ref.contentOverflow,
-      width = _ref.width;
+      width = _ref.width,
+      hasContentBorders = _ref.hasContentBorders;
 
   var getMinWidth = function getMinWidth() {
     switch (size) {
@@ -130,58 +128,36 @@ export var ModalDialog = function ModalDialog(_ref) {
   };
 
   var ModalTitle = function ModalTitle(title, size) {
-    switch (size) {
-      case Size.Small:
-        return /*#__PURE__*/_jsx(ComponentM, {
-          textStyle: ComponentTextStyle.Bold,
-          children: title
-        });
-
-      case Size.Medium:
-        return /*#__PURE__*/_jsx(ComponentL, {
-          textStyle: ComponentTextStyle.Bold,
-          children: title
-        });
-
-      case Size.Large:
-        return /*#__PURE__*/_jsx(ComponentXL, {
-          textStyle: ComponentTextStyle.Bold,
-          children: title
-        });
-
-      default:
-        return /*#__PURE__*/_jsx(ComponentL, {
-          textStyle: ComponentTextStyle.Bold,
-          children: title
-        });
-    }
-  };
-
-  var ModalSubtitle = function ModalSubtitle(subtitle, size) {
-    switch (size) {
-      case Size.Small:
-        return /*#__PURE__*/_jsx(ComponentXS, {
-          color: COLORS.neutral_500,
-          children: subtitle
-        });
-
-      case Size.Medium:
-        return /*#__PURE__*/_jsx(ComponentS, {
-          color: COLORS.neutral_500,
-          children: subtitle
-        });
-
-      case Size.Large:
-        return /*#__PURE__*/_jsx(ComponentM, {
-          color: COLORS.neutral_500,
-          children: subtitle
-        });
-
-      default:
-        return /*#__PURE__*/_jsx(ComponentS, {
-          color: COLORS.neutral_500,
-          children: subtitle
-        });
+    if (typeof size === 'string') {
+      switch (size) {
+        case Size.Small:
+          return /*#__PURE__*/_jsx(ComponentM, {
+            textStyle: ComponentTextStyle.Bold,
+            children: title
+          });
+
+        case Size.Medium:
+          return /*#__PURE__*/_jsx(ComponentL, {
+            textStyle: ComponentTextStyle.Bold,
+            children: title
+          });
+
+        case Size.Large:
+          return /*#__PURE__*/_jsx(ComponentXL, {
+            textStyle: ComponentTextStyle.Bold,
+            children: title
+          });
+
+        default:
+          return /*#__PURE__*/_jsx(ComponentL, {
+            textStyle: ComponentTextStyle.Bold,
+            children: title
+          });
+      }
+    } else {
+      return /*#__PURE__*/_jsx(_Fragment, {
+        children: title
+      });
     }
   };
 
@@ -353,13 +329,14 @@ export var ModalDialog = function ModalDialog(_ref) {
           })]
         }), /*#__PURE__*/_jsxs(ModalTitleSection, {
           children: [/*#__PURE__*/_jsxs(FlexContainer, {
-            children: [!(topImage || topImageWithFallbacksProps) && ModalBackButton(), subtitle && subtitlePosition === ModalSubtitlePosition.ABOVE && ModalSubtitle(subtitle, subtitleSize !== null && subtitleSize !== void 0 ? subtitleSize : size), title && ModalTitle(title, titleSize !== null && titleSize !== void 0 ? titleSize : size), subtitle && subtitlePosition === ModalSubtitlePosition.BELOW && ModalSubtitle(subtitle, subtitleSize !== null && subtitleSize !== void 0 ? subtitleSize : size)]
+            children: [!(topImage || topImageWithFallbacksProps) && ModalBackButton(), title && ModalTitle(title, size)]
           }), /*#__PURE__*/_jsxs(ModalHeaderActions, {
             children: [tooltip && ModalTootip(tooltip), !(topImage || topImageWithFallbacksProps) && ModalCloseButton(closeAction)]
           })]
         }), /*#__PURE__*/_jsx(ModalBody, {
           size: size,
           overflow: contentOverflow,
+          hasContentBorders: hasContentBorders,
           children: children
         }), note && /*#__PURE__*/_jsx(ModalNote, {
           note: note,
@@ -388,8 +365,7 @@ export var ModalDialog = function ModalDialog(_ref) {
 ModalDialog.propTypes = {
   isModalOpen: _pt.bool.isRequired,
   closeModalAndClearInput: _pt.any.isRequired,
-  title: _pt.string,
-  subtitle: _pt.string,
+  title: _pt.oneOfType([_pt.string, _pt.node]),
   topImage: _pt.any,
   buttons: _pt.array,
   tooltip: _pt.string,
@@ -402,7 +378,8 @@ ModalDialog.propTypes = {
   yOffset: _pt.number,
   zIndex: _pt.number,
   contentOverflow: _pt.string,
-  width: _pt.string
+  width: _pt.string,
+  hasContentBorders: _pt.bool
 };
 export default ModalDialog;
 //# sourceMappingURL=ModalDialog.js.map

package/dist/Modals/ModalDialog.js.map

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

package/dist/Modals/ModalStyles.cjs

@@ -15,6 +15,8 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _ = require("..");
 
+var _styles = require("../styles");
+
 var _types = require("../types");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
@@ -56,7 +58,7 @@ var ModalHeaderActions = _styledComponents.default.div(_templateObject6 || (_tem
 
 exports.ModalHeaderActions = ModalHeaderActions;
 
-var FlexContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n"])));
+var FlexContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n"])));
 
 exports.FlexContainer = FlexContainer;
 
@@ -96,11 +98,19 @@ var ModalNoteSection = _styledComponents.default.section(_templateObject14 || (_
 
 exports.ModalNoteSection = ModalNoteSection;
 
-var ModalBody = _styledComponents.default.section(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 1 auto;\n  overflow: ", ";\n\n  /* width */\n\n  ::-webkit-scrollbar {\n    width: 4px;\n\n    cursor: pointer;\n  }\n\n  /* Track */\n\n  ::-webkit-scrollbar-track {\n    background: ", ";\n\n    border-radius: 8px;\n  }\n\n  /* Handle */\n\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n\n  ::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n\n  > :first-child {\n    margin-top: 24px;\n  }\n\n  > :last-child {\n    margin-bottom: ", ";\n  }\n\n  p: first-of-type {\n    padding-bottom: ", ";\n  }\n"])), function (props) {
+var ModalBody = _styledComponents.default.section(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 1 auto;\n  overflow: ", ";\n  margin: ", ";\n\n  border-top: ", ";\n  border-bottom: ", ";\n\n  ", "\n\n  > :first-child {\n    margin-top: ", ";\n  }\n\n  > :last-child {\n    margin-bottom: ", ";\n  }\n\n  p: first-of-type {\n    padding-bottom: ", ";\n  }\n"])), function (props) {
   var _props$overflow;
 
   return (_props$overflow = props === null || props === void 0 ? void 0 : props.overflow) !== null && _props$overflow !== void 0 ? _props$overflow : 'unset';
-}, _.COLORS.neutral_100, _.COLORS.neutral_600, _.COLORS.neutral_500, function (props) {
+}, function (props) {
+  return (props === null || props === void 0 ? void 0 : props.size) === 'small' ? "8px 0" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '16px 0' : '12px 0';
+}, function (props) {
+  return props !== null && props !== void 0 && props.hasContentBorders ? "1px solid ".concat(_.COLORS.neutral_100) : 'none';
+}, function (props) {
+  return props !== null && props !== void 0 && props.hasContentBorders ? "1px solid ".concat(_.COLORS.neutral_100) : 'none';
+}, (0, _styles.scrollBarStyling)(_types.Size.Small), function (props) {
+  return (props === null || props === void 0 ? void 0 : props.size) === 'small' ? "16px" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '8px' : '12px';
+}, 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';
@@ -108,9 +118,7 @@ var ModalBody = _styledComponents.default.section(_templateObject15 || (_templat
 
 exports.ModalBody = ModalBody;
 
-var ModalFooter = _styledComponents.default.section(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\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) {
+var ModalFooter = _styledComponents.default.section(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\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) === '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';

package/dist/Modals/ModalStyles.cjs.map

@@ -1 +1 @@
-{"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","overflow","COLORS","neutral_100","neutral_600","neutral_500","ModalFooter","Size","Small","Large","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: 1 0 calc(50% - 5px);\n  flex-direction: column;\n  flex-basis: auto;\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  flex-direction: column;\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: calc(100% - 32px);\n    margin-left: 8px;\n    color: ${(props) => getNoteMessageColor(props.state)};\n  }\n`;\n\nexport const ModalBody = styled.section<{ size?: string; overflow?: string }>`\n  flex: 1 1 auto;\n  overflow: ${(props) => props?.overflow ?? 'unset'};\n\n  /* width */\n\n  ::-webkit-scrollbar {\n    width: 4px;\n\n    cursor: pointer;\n  }\n\n  /* Track */\n\n  ::-webkit-scrollbar-track {\n    background: ${COLORS.neutral_100};\n\n    border-radius: 8px;\n  }\n\n  /* Handle */\n\n  ::-webkit-scrollbar-thumb {\n    background: ${COLORS.neutral_600};\n\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n\n  ::-webkit-scrollbar-thumb:hover {\n    background: ${COLORS.neutral_500};\n  }\n\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.cjs"}
+{"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","overflow","hasContentBorders","COLORS","neutral_100","Size","Small","ModalFooter","Large","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 { scrollBarStyling } from '../styles';\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: 1 0 calc(50% - 5px);\n  flex-direction: column;\n  flex-basis: auto;\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: calc(100% - 32px);\n    margin-left: 8px;\n    color: ${(props) => getNoteMessageColor(props.state)};\n  }\n`;\n\nexport const ModalBody = styled.section<{ size?: string; overflow?: string; hasContentBorders?: boolean }>`\n  flex: 1 1 auto;\n  overflow: ${(props) => props?.overflow ?? 'unset'};\n  margin: ${(props) => (props?.size === 'small' ? `8px 0` : props?.size === 'large' ? '16px 0' : '12px 0')};\n\n  border-top: ${(props) => (props?.hasContentBorders ? `1px solid ${COLORS.neutral_100}` : 'none')};\n  border-bottom: ${(props) => (props?.hasContentBorders ? `1px solid ${COLORS.neutral_100}` : 'none')};\n\n  ${scrollBarStyling(Size.Small)}\n\n  > :first-child {\n    margin-top: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '8px' : '12px')};\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  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.cjs"}

package/dist/Modals/ModalStyles.d.ts

@@ -38,6 +38,7 @@ export declare const ModalNoteSection: import("styled-components").StyledCompone
 export declare const ModalBody: import("styled-components").StyledComponent<"section", any, {
     size?: string | undefined;
     overflow?: string | undefined;
+    hasContentBorders?: boolean | undefined;
 }, never>;
 export declare const ModalFooter: import("styled-components").StyledComponent<"section", any, {
     size?: Size | undefined;

package/dist/Modals/ModalStyles.js

@@ -4,6 +4,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 
 import styled, { css } from 'styled-components';
 import { COLORS } from '..';
+import { scrollBarStyling } from '../styles';
 import { Size } from '../types';
 /**
  * Modal styles
@@ -23,7 +24,7 @@ export var ModalHeaderActionsWithImage = styled.div(_templateObject5 || (_templa
   return !props.hasBackButton ? 'row-reverse' : 'row';
 });
 export var ModalHeaderActions = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  margin: -12px -12px 0 0;\n"])));
-export var FlexContainer = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
+export var FlexContainer = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n"])));
 export var ModalHoverModifier = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  button:hover {\n    cursor: help !important;\n  }\n"])));
 export var CloseButtonWrapper = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  button {\n    ", "\n  }\n"])), function (props) {
   return props.hasImage ? css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n            margin: -12px -12px 0 0 !important;\n          "]))) : css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n            left: unset;\n          "])));
@@ -45,18 +46,24 @@ export var ModalNoteSection = styled.section(_templateObject14 || (_templateObje
 }, function (props) {
   return getNoteMessageColor(props.state);
 });
-export var ModalBody = styled.section(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  flex: 1 1 auto;\n  overflow: ", ";\n\n  /* width */\n\n  ::-webkit-scrollbar {\n    width: 4px;\n\n    cursor: pointer;\n  }\n\n  /* Track */\n\n  ::-webkit-scrollbar-track {\n    background: ", ";\n\n    border-radius: 8px;\n  }\n\n  /* Handle */\n\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n\n  ::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n\n  > :first-child {\n    margin-top: 24px;\n  }\n\n  > :last-child {\n    margin-bottom: ", ";\n  }\n\n  p: first-of-type {\n    padding-bottom: ", ";\n  }\n"])), function (props) {
+export var ModalBody = styled.section(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  flex: 1 1 auto;\n  overflow: ", ";\n  margin: ", ";\n\n  border-top: ", ";\n  border-bottom: ", ";\n\n  ", "\n\n  > :first-child {\n    margin-top: ", ";\n  }\n\n  > :last-child {\n    margin-bottom: ", ";\n  }\n\n  p: first-of-type {\n    padding-bottom: ", ";\n  }\n"])), function (props) {
   var _props$overflow;
 
   return (_props$overflow = props === null || props === void 0 ? void 0 : props.overflow) !== null && _props$overflow !== void 0 ? _props$overflow : 'unset';
-}, COLORS.neutral_100, COLORS.neutral_600, COLORS.neutral_500, function (props) {
+}, function (props) {
+  return (props === null || props === void 0 ? void 0 : props.size) === 'small' ? "8px 0" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '16px 0' : '12px 0';
+}, function (props) {
+  return props !== null && props !== void 0 && props.hasContentBorders ? "1px solid ".concat(COLORS.neutral_100) : 'none';
+}, function (props) {
+  return props !== null && props !== void 0 && props.hasContentBorders ? "1px solid ".concat(COLORS.neutral_100) : 'none';
+}, scrollBarStyling(Size.Small), function (props) {
+  return (props === null || props === void 0 ? void 0 : props.size) === 'small' ? "16px" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '8px' : '12px';
+}, 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';
 });
-export var ModalFooter = styled.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) === Size.Small ? "20px" : (props === null || props === void 0 ? void 0 : props.size) === Size.Large ? '28px' : '24px';
-}, function (props) {
+export var ModalFooter = styled.section(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\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) === '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';

package/dist/Modals/ModalStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Modals/ModalStyles.ts"],"names":["styled","css","COLORS","Size","ModalHeader","section","props","marginBottom","StyledModalHeader","height","size","Column","div","ModalTitleSection","ModalHeaderActionsWithImage","hasBackButton","ModalHeaderActions","FlexContainer","ModalHoverModifier","CloseButtonWrapper","hasImage","BackButtonWrapper","ModalTitle","h5","fontSize","ModalNoteSection","getBackgroundColor","state","getNoteMessageColor","ModalBody","overflow","neutral_100","neutral_600","neutral_500","ModalFooter","Small","Large","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: 1 0 calc(50% - 5px);\n  flex-direction: column;\n  flex-basis: auto;\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  flex-direction: column;\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: calc(100% - 32px);\n    margin-left: 8px;\n    color: ${(props) => getNoteMessageColor(props.state)};\n  }\n`;\n\nexport const ModalBody = styled.section<{ size?: string; overflow?: string }>`\n  flex: 1 1 auto;\n  overflow: ${(props) => props?.overflow ?? 'unset'};\n\n  /* width */\n\n  ::-webkit-scrollbar {\n    width: 4px;\n\n    cursor: pointer;\n  }\n\n  /* Track */\n\n  ::-webkit-scrollbar-track {\n    background: ${COLORS.neutral_100};\n\n    border-radius: 8px;\n  }\n\n  /* Handle */\n\n  ::-webkit-scrollbar-thumb {\n    background: ${COLORS.neutral_600};\n\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n\n  ::-webkit-scrollbar-thumb:hover {\n    background: ${COLORS.neutral_500};\n  }\n\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"}
+{"version":3,"sources":["../../src/Modals/ModalStyles.ts"],"names":["styled","css","COLORS","scrollBarStyling","Size","ModalHeader","section","props","marginBottom","StyledModalHeader","height","size","Column","div","ModalTitleSection","ModalHeaderActionsWithImage","hasBackButton","ModalHeaderActions","FlexContainer","ModalHoverModifier","CloseButtonWrapper","hasImage","BackButtonWrapper","ModalTitle","h5","fontSize","ModalNoteSection","getBackgroundColor","state","getNoteMessageColor","ModalBody","overflow","hasContentBorders","neutral_100","Small","ModalFooter","Large","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 { scrollBarStyling } from '../styles';\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: 1 0 calc(50% - 5px);\n  flex-direction: column;\n  flex-basis: auto;\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: calc(100% - 32px);\n    margin-left: 8px;\n    color: ${(props) => getNoteMessageColor(props.state)};\n  }\n`;\n\nexport const ModalBody = styled.section<{ size?: string; overflow?: string; hasContentBorders?: boolean }>`\n  flex: 1 1 auto;\n  overflow: ${(props) => props?.overflow ?? 'unset'};\n  margin: ${(props) => (props?.size === 'small' ? `8px 0` : props?.size === 'large' ? '16px 0' : '12px 0')};\n\n  border-top: ${(props) => (props?.hasContentBorders ? `1px solid ${COLORS.neutral_100}` : 'none')};\n  border-bottom: ${(props) => (props?.hasContentBorders ? `1px solid ${COLORS.neutral_100}` : 'none')};\n\n  ${scrollBarStyling(Size.Small)}\n\n  > :first-child {\n    margin-top: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '8px' : '12px')};\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  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/Switcher/MobileSwitcherMenu.cjs

@@ -19,6 +19,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _styles = require("../styles");
 
+var _types = require("../types");
+
 var _Button = require("../Button");
 
 var _SystemIcons = require("../icons/systemicons/SystemIcons");
@@ -39,7 +41,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-var Menu = _styledComponents.default.ul(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  list-style: none;\n  margin: 0;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  -webkit-animation: ", " 0.2s ease-in-out;\n  animation: ", " 0.2s ease-in-out;\n  position: absolute;\n  border-radius: 4px;\n  z-index: ", ";\n  height: 100%;\n  width: 320px;\n  padding-inline-start: 0;\n  overflow-y: scroll;\n  ", " {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: flex;\n    flex-direction: column;\n  }\n\n  ", ";\n"])), _styles.COLORS.white, _CommonStyles.flowDown, _CommonStyles.flowDown, _zIndexes.Z_INDEXES.off_canvas, _styles.BREAKPOINTS.SMALL, _styles.scrollBarStyling);
+var Menu = _styledComponents.default.ul(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  list-style: none;\n  margin: 0;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  -webkit-animation: ", " 0.2s ease-in-out;\n  animation: ", " 0.2s ease-in-out;\n  position: absolute;\n  border-radius: 4px;\n  z-index: ", ";\n  height: 100%;\n  width: 320px;\n  padding-inline-start: 0;\n  overflow-y: scroll;\n  ", " {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: flex;\n    flex-direction: column;\n  }\n\n  ", ";\n"])), _styles.COLORS.white, _CommonStyles.flowDown, _CommonStyles.flowDown, _zIndexes.Z_INDEXES.off_canvas, _styles.BREAKPOINTS.SMALL, (0, _styles.scrollBarStyling)(_types.Size.Small));
 
 var MenuSection = _styledComponents.default.li(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 8px 0;\n  position: relative;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n"])));
 

package/dist/Switcher/MobileSwitcherMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Switcher/MobileSwitcherMenu.tsx"],"names":["Menu","styled","ul","COLORS","white","flowDown","Z_INDEXES","off_canvas","BREAKPOINTS","SMALL","scrollBarStyling","MenuSection","li","MenuSectionList","UserMenuSectionListStyling","Top","div","neutral_600","ComponentTextStyle","Regular","LabelLine","span","neutral_20","MobileSwitcherMenu","header","elementsHeader","clickMenuAction","elements","React","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","length","map","element","to","label","icon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, scrollBarStyling} from '../styles';\n\nimport {UserMenuItem} from '../types';\nimport {IconButton} from '../Button';\nimport {ArrowLineLeft, Close} from '../icons/systemicons/SystemIcons';\nimport {flowDown, Right, UserMenuSectionListStyling} from '../GlobalNavigationBar/mobile/CommonStyles';\nimport SwitcherMenuItem from './SwitcherMenuItem';\nimport {ComponentSStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst Menu = styled.ul`\n  list-style: none;\n  margin: 0;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\n  animation: ${flowDown} 0.2s ease-in-out;\n  position: absolute;\n  border-radius: 4px;\n  z-index: ${Z_INDEXES.off_canvas};\n  height: 100%;\n  width: 320px;\n  padding-inline-start: 0;\n  overflow-y: scroll;\n  ${BREAKPOINTS.SMALL} {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: flex;\n    flex-direction: column;\n  }\n\n  ${scrollBarStyling};\n`;\n\nconst MenuSection = styled.li`\n  padding: 8px 0;\n  position: relative;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n`;\n\nconst MenuSectionList = styled.ul`\n  list-style: none;\n  margin: 0;\n  overflow-y: unset !important;\n  padding-inline-start: 0;\n\n  ${UserMenuSectionListStyling}\n`;\n\nconst Top = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 22px 12px 0 12px;\n  color: ${COLORS.neutral_600};\n\n  h3 {\n    margin-block-start: 0 !important;\n    margin-block-end: 0 !important;\n    margin-inline-start: 0px;\n    margin-inline-end: 0px;\n    margin-left: 24px;\n\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n  }\n`;\n\nconst LabelLine = styled.span`\n  height: 32px;\n  background-color: ${COLORS.neutral_20};\n  padding-left: 24px;\n  display: flex;\n  line-height: 32px;\n`;\n\ninterface Props {\n  header: string;\n  elementsHeader: string;\n  clickMenuAction: () => void;\n  elements?: UserMenuItem[];\n}\n\nconst MobileSwitcherMenu = ({ header, elementsHeader, clickMenuAction, elements }: Props) => {\n  React.useEffect(() => {\n    function handleKeyPress(e: any) {\n      if (e.keyCode === 27) {\n        clickMenuAction();\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyPress, false);\n    return () => {\n      document.removeEventListener('keydown', handleKeyPress, false);\n    };\n  }, [clickMenuAction]);\n\n  return (\n    <Menu onClick={() => {}} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n      <Top>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n          <ArrowLineLeft size=\"24px\" color={COLORS.neutral_600} />\n        </IconButton>\n        <h3>{header}</h3>\n        <Right>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n            <Close size=\"24px\" />\n          </IconButton>\n        </Right>\n      </Top>\n      {elements && elements?.length > 0 && (\n        <MenuSection>\n          <LabelLine>{elementsHeader}</LabelLine>\n          <MenuSectionList>\n            {elements?.map((element) => (\n              <SwitcherMenuItem url={element?.to} label={element?.label} Icon={element.icon} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n    </Menu>\n  );\n};\n\nexport default MobileSwitcherMenu;\n"],"file":"MobileSwitcherMenu.cjs"}
+{"version":3,"sources":["../../src/Switcher/MobileSwitcherMenu.tsx"],"names":["Menu","styled","ul","COLORS","white","flowDown","Z_INDEXES","off_canvas","BREAKPOINTS","SMALL","Size","Small","MenuSection","li","MenuSectionList","UserMenuSectionListStyling","Top","div","neutral_600","ComponentTextStyle","Regular","LabelLine","span","neutral_20","MobileSwitcherMenu","header","elementsHeader","clickMenuAction","elements","React","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","length","map","element","to","label","icon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, scrollBarStyling} from '../styles';\n\nimport {Size, UserMenuItem} from '../types';\nimport {IconButton} from '../Button';\nimport {ArrowLineLeft, Close} from '../icons/systemicons/SystemIcons';\nimport {flowDown, Right, UserMenuSectionListStyling} from '../GlobalNavigationBar/mobile/CommonStyles';\nimport SwitcherMenuItem from './SwitcherMenuItem';\nimport {ComponentSStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst Menu = styled.ul`\n  list-style: none;\n  margin: 0;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\n  animation: ${flowDown} 0.2s ease-in-out;\n  position: absolute;\n  border-radius: 4px;\n  z-index: ${Z_INDEXES.off_canvas};\n  height: 100%;\n  width: 320px;\n  padding-inline-start: 0;\n  overflow-y: scroll;\n  ${BREAKPOINTS.SMALL} {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: flex;\n    flex-direction: column;\n  }\n\n  ${scrollBarStyling(Size.Small)};\n`;\n\nconst MenuSection = styled.li`\n  padding: 8px 0;\n  position: relative;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n`;\n\nconst MenuSectionList = styled.ul`\n  list-style: none;\n  margin: 0;\n  overflow-y: unset !important;\n  padding-inline-start: 0;\n\n  ${UserMenuSectionListStyling}\n`;\n\nconst Top = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 22px 12px 0 12px;\n  color: ${COLORS.neutral_600};\n\n  h3 {\n    margin-block-start: 0 !important;\n    margin-block-end: 0 !important;\n    margin-inline-start: 0px;\n    margin-inline-end: 0px;\n    margin-left: 24px;\n\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n  }\n`;\n\nconst LabelLine = styled.span`\n  height: 32px;\n  background-color: ${COLORS.neutral_20};\n  padding-left: 24px;\n  display: flex;\n  line-height: 32px;\n`;\n\ninterface Props {\n  header: string;\n  elementsHeader: string;\n  clickMenuAction: () => void;\n  elements?: UserMenuItem[];\n}\n\nconst MobileSwitcherMenu = ({ header, elementsHeader, clickMenuAction, elements }: Props) => {\n  React.useEffect(() => {\n    function handleKeyPress(e: any) {\n      if (e.keyCode === 27) {\n        clickMenuAction();\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyPress, false);\n    return () => {\n      document.removeEventListener('keydown', handleKeyPress, false);\n    };\n  }, [clickMenuAction]);\n\n  return (\n    <Menu onClick={() => {}} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n      <Top>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n          <ArrowLineLeft size=\"24px\" color={COLORS.neutral_600} />\n        </IconButton>\n        <h3>{header}</h3>\n        <Right>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n            <Close size=\"24px\" />\n          </IconButton>\n        </Right>\n      </Top>\n      {elements && elements?.length > 0 && (\n        <MenuSection>\n          <LabelLine>{elementsHeader}</LabelLine>\n          <MenuSectionList>\n            {elements?.map((element) => (\n              <SwitcherMenuItem url={element?.to} label={element?.label} Icon={element.icon} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n    </Menu>\n  );\n};\n\nexport default MobileSwitcherMenu;\n"],"file":"MobileSwitcherMenu.cjs"}

package/dist/Switcher/MobileSwitcherMenu.js

@@ -6,6 +6,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 import * as React from 'react';
 import styled from 'styled-components';
 import { BREAKPOINTS, COLORS, ComponentTextStyle, scrollBarStyling } from '../styles';
+import { Size } from '../types';
 import { IconButton } from '../Button';
 import { ArrowLineLeft, Close } from '../icons/systemicons/SystemIcons';
 import { flowDown, Right, UserMenuSectionListStyling } from '../GlobalNavigationBar/mobile/CommonStyles';
@@ -14,7 +15,7 @@ import { ComponentSStyling } from '../styles/typography';
 import { Z_INDEXES } from '../styles/z-indexes';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var Menu = styled.ul(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  list-style: none;\n  margin: 0;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  -webkit-animation: ", " 0.2s ease-in-out;\n  animation: ", " 0.2s ease-in-out;\n  position: absolute;\n  border-radius: 4px;\n  z-index: ", ";\n  height: 100%;\n  width: 320px;\n  padding-inline-start: 0;\n  overflow-y: scroll;\n  ", " {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: flex;\n    flex-direction: column;\n  }\n\n  ", ";\n"])), COLORS.white, flowDown, flowDown, Z_INDEXES.off_canvas, BREAKPOINTS.SMALL, scrollBarStyling);
+var Menu = styled.ul(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  list-style: none;\n  margin: 0;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  -webkit-animation: ", " 0.2s ease-in-out;\n  animation: ", " 0.2s ease-in-out;\n  position: absolute;\n  border-radius: 4px;\n  z-index: ", ";\n  height: 100%;\n  width: 320px;\n  padding-inline-start: 0;\n  overflow-y: scroll;\n  ", " {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: flex;\n    flex-direction: column;\n  }\n\n  ", ";\n"])), COLORS.white, flowDown, flowDown, Z_INDEXES.off_canvas, BREAKPOINTS.SMALL, scrollBarStyling(Size.Small));
 var MenuSection = styled.li(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 8px 0;\n  position: relative;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n"])));
 var MenuSectionList = styled.ul(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  list-style: none;\n  margin: 0;\n  overflow-y: unset !important;\n  padding-inline-start: 0;\n\n  ", "\n"])), UserMenuSectionListStyling);
 var Top = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 22px 12px 0 12px;\n  color: ", ";\n\n  h3 {\n    margin-block-start: 0 !important;\n    margin-block-end: 0 !important;\n    margin-inline-start: 0px;\n    margin-inline-end: 0px;\n    margin-left: 24px;\n\n    ", "\n  }\n"])), COLORS.neutral_600, ComponentSStyling(ComponentTextStyle.Regular, 'inherit'));