@laerdal/life-react-components 1.2.2-dev.24 → 1.2.2-dev.25

package/dist/esm/Modals/ModalDialog.js

@@ -5,7 +5,7 @@ import { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';
 import { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';
 import { Size } from '../types';
 import ModalContainer from './ModalContainer';
-import { BackButtonWrapper, CloseButtonWrapper, Column, FlexContainer, ModalBody, ModalFooter, ModalHeaderActions, ModalHeaderActionsWithImage, ModalTitleSection, StyledModalHeader } from './ModalStyles';
+import { BackButtonWrapper, CloseButtonWrapper, Column, FlexContainer, ModalBody, ModalFooter, ModalHeaderActions, ModalHeaderActionsWithImage, ModalTitleSection, StyledModalHeader, ModalHoverModifier } from './ModalStyles';
 import { ModalNote } from './ModalNote';
 import { TooltipWrapper } from '../Tooltips';
 import { HyperLink } from '..';
@@ -126,7 +126,8 @@ export const ModalDialog = ({
   };
 
   const ModalTootip = tooltip => {
-    return /*#__PURE__*/React.createElement(TooltipWrapper, {
+    return /*#__PURE__*/React.createElement(ModalHoverModifier, null, /*#__PURE__*/React.createElement(TooltipWrapper, {
+      delay: "0s",
       size: Size.XSmall,
       align: "center",
       position: "top",
@@ -139,7 +140,7 @@ export const ModalDialog = ({
     }, /*#__PURE__*/React.createElement(Help, {
       size: "24px",
       color: COLORS.neutral_600
-    })));
+    }))));
   };
 
   const ModalCloseButton = onClick => {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Modals/ModalDialog.tsx"],"names":["React","Button","IconButton","ArrowLineLeft","Close","Help","COLORS","ComponentL","ComponentM","ComponentTextStyle","ComponentXL","Size","ModalContainer","BackButtonWrapper","CloseButtonWrapper","Column","FlexContainer","ModalBody","ModalFooter","ModalHeaderActions","ModalHeaderActionsWithImage","ModalTitleSection","StyledModalHeader","ModalNote","TooltipWrapper","HyperLink","ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","getMinWidth","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","Bold","ModalTootip","XSmall","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","icon","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","map","b","i","id"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } from '../types';\nimport ModalContainer from './ModalContainer';\nimport {\n  BackButtonWrapper,\n  CloseButtonWrapper,\n  Column,\n  FlexContainer,\n  ModalBody,\n  ModalFooter,\n  ModalHeaderActions,\n  ModalHeaderActionsWithImage,\n  ModalTitleSection,\n  StyledModalHeader,\n} from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { TooltipWrapper } from '../Tooltips';\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { ReactNode } from 'react';\nimport { HyperLink } from '..';\n\ninterface NewModalProps {\n  size?: Size;\n  isModalOpen: boolean;\n  closeModalAndClearInput: any;\n  title?: string;\n  topImage?: any;\n  buttons?: ButtonAction[];\n  leftFooterAction?: LeftFooterAction;\n  tooltip?: string;\n  backButton?: () => void;\n  closeAction: () => void;\n  submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n  note?: string;\n  state?: string;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  topImage,\n  buttons,\n  leftFooterAction,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n  children,\n  note,\n  state,\n}) => {\n  const getMinWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '320px';\n      case Size.Large:\n        return '640px';\n      case Size.Medium:\n      default:\n        return '480px';\n    }\n  };\n\n  const getMaxWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '480px';\n      case Size.Large:\n        return '720px';\n      case Size.Medium:\n      default:\n        return '640px';\n    }\n  };\n\n  const getImageHeight = () => {\n    switch (size) {\n      case Size.Small:\n        return 160;\n      case Size.Medium:\n        return 200;\n      case Size.Large:\n        return 240;\n      default:\n        return 200;\n    }\n  };\n\n  const getMarginBottom = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px';\n      case Size.Medium:\n        return '24px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px';\n    }\n  };\n\n  const getPadding = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px 16px 8px';\n      case Size.Medium:\n        return '24px 24px 20px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px 24px 16px';\n    }\n  };\n\n  const ModalTitle = (title: string, size?: Size) => {\n    switch (size) {\n      case Size.Small:\n        return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n      case Size.Medium:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n      case Size.Large:\n        return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n      default:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n    }\n  };\n\n  const ModalTootip = (tooltip: string) => {\n    return (\n      <TooltipWrapper 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    );\n  };\n\n  const ModalCloseButton = (onClick: any) => {\n    return (\n      <CloseButtonWrapper hasImage={!!topImage} size={size}>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n          <Close size=\"24px\" color={COLORS.black} />\n        </IconButton>\n      </CloseButtonWrapper>\n    );\n  };\n\n  const ModalBackButton = () => {\n    if (backButton) {\n      return (\n        <BackButtonWrapper hasImage={!!topImage} size={size}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n            <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n          </IconButton>\n        </BackButtonWrapper>\n      );\n    }\n  };\n\n  const getLeftActionIconElement = (icon: ReactNode) => {\n    return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n  };\n\n  const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n    const { text, actionType, disabled, icon, action } = leftFooterAction;\n    switch (actionType) {\n      case 'button':\n        return (\n          <Button\n            id={'left-action-button'}\n            type={(leftFooterAction as LeftFooterButton)?.type}\n            disabled={disabled}\n            loading={(leftFooterAction as LeftFooterButton)?.loading}\n            icon={icon}\n            size={size}\n            onClick={action}\n            variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n            style={{ order: -1, marginRight: 'auto' }}>\n            {text}\n          </Button>\n        );\n      case 'hyperlink':\n        return (\n          <HyperLink id=\"left-action-hyperlink\" className=\"footer-action\" href={(leftFooterAction as LeftFooterHyperlink).href} disabled={disabled} variant=\"default\">\n            {icon && getLeftActionIconElement(icon)}\n            {text}\n          </HyperLink>\n        );\n      case 'note':\n        return (\n          <div className=\"footer-action note\">\n            {icon && getLeftActionIconElement(icon)}\n            <span>{text}</span>\n          </div>\n        );\n    }\n  };\n\n  return (\n    <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()}>\n      <Column>\n        <form onSubmit={submitAction}>\n          {topImage && (\n            <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n              <img src={topImage} alt=\"Modal top\" />\n              <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n                {ModalBackButton()}\n                {ModalCloseButton(closeAction)}\n              </ModalHeaderActionsWithImage>\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            <FlexContainer>\n              {!topImage && ModalBackButton()}\n              {title && ModalTitle(title, size)}\n            </FlexContainer>\n            <ModalHeaderActions>\n              {tooltip && ModalTootip(tooltip)}\n              {!topImage && ModalCloseButton(closeAction)}\n            </ModalHeaderActions>\n          </ModalTitleSection>\n\n          <ModalBody size={size}>{children}</ModalBody>\n\n          {note && <ModalNote note={note} state={state} size={size} />}\n\n          <ModalFooter size={size}>\n            {leftFooterAction && LeftFooterAction(leftFooterAction)}\n            {buttons?.map((b, i) => (\n              <Button key={b.id || i} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n                {b.text}\n              </Button>\n            ))}\n          </ModalFooter>\n        </form>\n      </Column>\n    </ModalContainer>\n  );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}
+{"version":3,"sources":["../../../src/Modals/ModalDialog.tsx"],"names":["React","Button","IconButton","ArrowLineLeft","Close","Help","COLORS","ComponentL","ComponentM","ComponentTextStyle","ComponentXL","Size","ModalContainer","BackButtonWrapper","CloseButtonWrapper","Column","FlexContainer","ModalBody","ModalFooter","ModalHeaderActions","ModalHeaderActionsWithImage","ModalTitleSection","StyledModalHeader","ModalHoverModifier","ModalNote","TooltipWrapper","HyperLink","ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","getMinWidth","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","Bold","ModalTootip","XSmall","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","icon","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","map","b","i","id"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } from '../types';\nimport ModalContainer from './ModalContainer';\nimport {\n  BackButtonWrapper,\n  CloseButtonWrapper,\n  Column,\n  FlexContainer,\n  ModalBody,\n  ModalFooter,\n  ModalHeaderActions,\n  ModalHeaderActionsWithImage,\n  ModalTitleSection,\n  StyledModalHeader,\n  ModalHoverModifier\n} from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { TooltipWrapper } from '../Tooltips';\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { ReactNode } from 'react';\nimport { HyperLink } from '..';\n\ninterface NewModalProps {\n  size?: Size;\n  isModalOpen: boolean;\n  closeModalAndClearInput: any;\n  title?: string;\n  topImage?: any;\n  buttons?: ButtonAction[];\n  leftFooterAction?: LeftFooterAction;\n  tooltip?: string;\n  backButton?: () => void;\n  closeAction: () => void;\n  submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n  note?: string;\n  state?: string;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  topImage,\n  buttons,\n  leftFooterAction,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n  children,\n  note,\n  state,\n}) => {\n  const getMinWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '320px';\n      case Size.Large:\n        return '640px';\n      case Size.Medium:\n      default:\n        return '480px';\n    }\n  };\n\n  const getMaxWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '480px';\n      case Size.Large:\n        return '720px';\n      case Size.Medium:\n      default:\n        return '640px';\n    }\n  };\n\n  const getImageHeight = () => {\n    switch (size) {\n      case Size.Small:\n        return 160;\n      case Size.Medium:\n        return 200;\n      case Size.Large:\n        return 240;\n      default:\n        return 200;\n    }\n  };\n\n  const getMarginBottom = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px';\n      case Size.Medium:\n        return '24px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px';\n    }\n  };\n\n  const getPadding = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px 16px 8px';\n      case Size.Medium:\n        return '24px 24px 20px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px 24px 16px';\n    }\n  };\n\n  const ModalTitle = (title: string, size?: Size) => {\n    switch (size) {\n      case Size.Small:\n        return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n      case Size.Medium:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n      case Size.Large:\n        return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n      default:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n    }\n  };\n\n  const ModalTootip = (tooltip: string) => {\n    return (\n      <ModalHoverModifier>\n        <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"top\" withArrow={false} label={tooltip}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => {}}>\n            <Help size=\"24px\" color={COLORS.neutral_600} />\n          </IconButton>\n        </TooltipWrapper>\n      </ModalHoverModifier>\n    );\n  };\n\n  const ModalCloseButton = (onClick: any) => {\n    return (\n      <CloseButtonWrapper hasImage={!!topImage} size={size}>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n          <Close size=\"24px\" color={COLORS.black} />\n        </IconButton>\n      </CloseButtonWrapper>\n    );\n  };\n\n  const ModalBackButton = () => {\n    if (backButton) {\n      return (\n        <BackButtonWrapper hasImage={!!topImage} size={size}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n            <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n          </IconButton>\n        </BackButtonWrapper>\n      );\n    }\n  };\n\n  const getLeftActionIconElement = (icon: ReactNode) => {\n    return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n  };\n\n  const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n    const { text, actionType, disabled, icon, action } = leftFooterAction;\n    switch (actionType) {\n      case 'button':\n        return (\n          <Button\n            id={'left-action-button'}\n            type={(leftFooterAction as LeftFooterButton)?.type}\n            disabled={disabled}\n            loading={(leftFooterAction as LeftFooterButton)?.loading}\n            icon={icon}\n            size={size}\n            onClick={action}\n            variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n            style={{ order: -1, marginRight: 'auto' }}>\n            {text}\n          </Button>\n        );\n      case 'hyperlink':\n        return (\n          <HyperLink id=\"left-action-hyperlink\" className=\"footer-action\" href={(leftFooterAction as LeftFooterHyperlink).href} disabled={disabled} variant=\"default\">\n            {icon && getLeftActionIconElement(icon)}\n            {text}\n          </HyperLink>\n        );\n      case 'note':\n        return (\n          <div className=\"footer-action note\">\n            {icon && getLeftActionIconElement(icon)}\n            <span>{text}</span>\n          </div>\n        );\n    }\n  };\n\n  return (\n    <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()}>\n      <Column>\n        <form onSubmit={submitAction}>\n          {topImage && (\n            <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n              <img src={topImage} alt=\"Modal top\" />\n              <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n                {ModalBackButton()}\n                {ModalCloseButton(closeAction)}\n              </ModalHeaderActionsWithImage>\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            <FlexContainer>\n              {!topImage && ModalBackButton()}\n              {title && ModalTitle(title, size)}\n            </FlexContainer>\n            <ModalHeaderActions>\n              {tooltip && ModalTootip(tooltip)}\n              {!topImage && ModalCloseButton(closeAction)}\n            </ModalHeaderActions>\n          </ModalTitleSection>\n\n          <ModalBody size={size}>{children}</ModalBody>\n\n          {note && <ModalNote note={note} state={state} size={size} />}\n\n          <ModalFooter size={size}>\n            {leftFooterAction && LeftFooterAction(leftFooterAction)}\n            {buttons?.map((b, i) => (\n              <Button key={b.id || i} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n                {b.text}\n              </Button>\n            ))}\n          </ModalFooter>\n        </form>\n      </Column>\n    </ModalContainer>\n  );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}

package/dist/esm/Modals/ModalStyles.js

@@ -54,6 +54,11 @@ export const ModalHeaderActions = styled.div`
 export const FlexContainer = styled.div`
   display: flex;
 `;
+export const ModalHoverModifier = styled.div`
+  button:hover {
+    cursor: help !important;
+  }
+`;
 export const CloseButtonWrapper = styled.div`
   button {
     ${props => props.hasImage ? css`

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

package/dist/esm/Tooltips/TooltipStyles.js

@@ -62,17 +62,17 @@ Tooltip.defaultProps = {
   align: 'center',
   position: 'bottom'
 };
-export const TooltipTrigger = css`
+export const TooltipTrigger = delay => css`
   &:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {
     opacity: 1;
     transition: 0.5s;
-    transition-delay: 1s;
+    transition-delay: ${delay ?? '1s'};
   }
 `;
 export const TooltipContainer = styled.div`
   display: inline-block;
   position: relative;
 
-  ${TooltipTrigger}
+  ${props => TooltipTrigger(props.delay)}
 `;
 //# sourceMappingURL=TooltipStyles.js.map

package/dist/esm/Tooltips/TooltipStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tooltips/TooltipStyles.tsx"],"names":["styled","css","Size","BOXSHADOWS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentSStyling","ComponentXSStyling","Z_INDEXES","distanceToEdge","size","XSmall","Small","Tooltip","div","props","Medium","Regular","white","align","BOXSHADOW_L2","height","primary_800","tooltip","position","withArrow","defaultProps","TooltipTrigger","TooltipContainer"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { Size } from '../types';\nimport { BOXSHADOWS, COLORS, ComponentTextStyle } from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst distanceToEdge = (size: Size | undefined) => {\n  return size == Size.XSmall ? '8px' : (!size || size == Size.Small) ? '12px' : '16px';\n}\n\nexport const Tooltip = styled.div<{\n  withArrow?: boolean;\n  size?: Size;\n  height?: string;\n  align?: 'start' | 'end' | 'center' | undefined;\n  position?: 'top' | 'right' | 'bottom' | 'left' | undefined;\n}>`\n\n    pointer-events: none;\n    ${props => (props.size == Size.Small || props.size != Size.Medium ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.size == Size.XSmall  ? ComponentXSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.size == Size.Medium ? ComponentMStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.align == 'center' ? 'text-align: center;' : '')}\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n    \n    padding: ${props => props.size == Size.XSmall ? '4px 8px' : props.size == Size.Medium ? '8px 12px' : '6px 10px'};\n    border-radius: 2px;\n    width: max-content;\n    height: ${props => props.height};\n    max-width: 34em;\n    background: ${COLORS.primary_800};\n    position: absolute; \n    opacity: 0; \n    z-index: ${Z_INDEXES.tooltip};\n    ${props => (props.position == 'top' ? 'bottom: 110%;' : props.position == 'bottom' ? 'top: 110%;' : '')}\n\n    ${props => (props.position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : '')}\n    ${props => (props.position == 'right' ? 'bottom: 50%;left: 110%; transform: translateY(50%);' : '')}\n            \n    ${props =>\n      props.position == 'left' || props.position == 'right'\n        ? ''\n        : props.align == 'start'\n        ? 'left: 0%;'\n        : props.align == 'end'\n        ? 'right: 0%;'\n        : 'left: 50%; transform: translateX(-50%);'}\n\n\n&::after {\n    ${props => (!props.withArrow ? 'display: none;' : '')}\n    content: \"\";\n    position: absolute;\n    ${props => (props.position == 'top' ? 'top: 100%;' : props.position == 'bottom' ? 'bottom: 100%;' : '')}\n    \n    ${props => (props.position == 'right' ? 'right: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n    ${props => (props.position == 'left' ? 'left: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n\n    ${props =>\n      props.position == 'left' || props.position == 'right' ? '' : \n      props.align == 'start' ? `left: ${distanceToEdge(props.size)};` : props.align == 'end' ? `right: ${distanceToEdge(props.size)};` : 'left: 50%;'}\n\n    ${props => (props.position == 'left' ? '' : 'margin-left: -5px;')}\n    margin: -0.5px;\n    border-width: 4px;\n    border-style: solid;\n    border-color: ${props => (props.position == 'top' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'right' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'bottom' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'left' ? COLORS.primary_800 : 'transparent')};\n  }\n`;\n\nTooltip.defaultProps = {\n  withArrow: false,\n  size: Size.Small,\n  height: 'auto',\n  align: 'center',\n  position: 'bottom'\n}\n\nexport const TooltipTrigger = css`\n  &:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {\n    opacity: 1;\n    transition: 0.5s;\n    transition-delay: 1s;\n  }\n`;\n\nexport const TooltipContainer = styled.div`\n  display: inline-block;\n  position: relative;\n\n  ${TooltipTrigger}\n`;\n"],"file":"TooltipStyles.js"}
+{"version":3,"sources":["../../../src/Tooltips/TooltipStyles.tsx"],"names":["styled","css","Size","BOXSHADOWS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentSStyling","ComponentXSStyling","Z_INDEXES","distanceToEdge","size","XSmall","Small","Tooltip","div","props","Medium","Regular","white","align","BOXSHADOW_L2","height","primary_800","tooltip","position","withArrow","defaultProps","TooltipTrigger","delay","TooltipContainer"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAASC,IAAT,QAAqB,UAArB;AACA,SAASC,UAAT,EAAqBC,MAArB,EAA6BC,kBAA7B,QAAuD,WAAvD;AACA,SAASC,iBAAT,EAA4BC,iBAA5B,EAA+CC,kBAA/C,QAAyE,sBAAzE;AACA,SAAQC,SAAR,QAAwB,qBAAxB;;AAEA,MAAMC,cAAc,GAAIC,IAAD,IAA4B;AACjD,SAAOA,IAAI,IAAIT,IAAI,CAACU,MAAb,GAAsB,KAAtB,GAA+B,CAACD,IAAD,IAASA,IAAI,IAAIT,IAAI,CAACW,KAAvB,GAAgC,MAAhC,GAAyC,MAA9E;AACD,CAFD;;AAIA,OAAO,MAAMC,OAAO,GAAGd,MAAM,CAACe,GAM3B;AACH;AACA;AACA,MAAMC,KAAK,IAAKA,KAAK,CAACL,IAAN,IAAcT,IAAI,CAACW,KAAnB,IAA4BG,KAAK,CAACL,IAAN,IAAcT,IAAI,CAACe,MAA/C,GAAwDV,iBAAiB,CAACF,kBAAkB,CAACa,OAApB,EAA6Bd,MAAM,CAACe,KAApC,CAAzE,GAAsH,EAAI;AAC1I,MAAMH,KAAK,IAAKA,KAAK,CAACL,IAAN,IAAcT,IAAI,CAACU,MAAnB,GAA6BJ,kBAAkB,CAACH,kBAAkB,CAACa,OAApB,EAA6Bd,MAAM,CAACe,KAApC,CAA/C,GAA4F,EAAI;AAChH,MAAMH,KAAK,IAAKA,KAAK,CAACL,IAAN,IAAcT,IAAI,CAACe,MAAnB,GAA4BX,iBAAiB,CAACD,kBAAkB,CAACa,OAApB,EAA6Bd,MAAM,CAACe,KAApC,CAA7C,GAA0F,EAAI;AAC9G,MAAMH,KAAK,IAAKA,KAAK,CAACI,KAAN,IAAe,QAAf,GAA0B,qBAA1B,GAAkD,EAAI;AACtE,kBAAkBjB,UAAU,CAACkB,YAAa;AAC1C;AACA,eAAeL,KAAK,IAAIA,KAAK,CAACL,IAAN,IAAcT,IAAI,CAACU,MAAnB,GAA4B,SAA5B,GAAwCI,KAAK,CAACL,IAAN,IAAcT,IAAI,CAACe,MAAnB,GAA4B,UAA5B,GAAyC,UAAW;AACpH;AACA;AACA,cAAcD,KAAK,IAAIA,KAAK,CAACM,MAAO;AACpC;AACA,kBAAkBlB,MAAM,CAACmB,WAAY;AACrC;AACA;AACA,eAAed,SAAS,CAACe,OAAQ;AACjC,MAAMR,KAAK,IAAKA,KAAK,CAACS,QAAN,IAAkB,KAAlB,GAA0B,eAA1B,GAA4CT,KAAK,CAACS,QAAN,IAAkB,QAAlB,GAA6B,YAA7B,GAA4C,EAAI;AAC5G;AACA,MAAMT,KAAK,IAAKA,KAAK,CAACS,QAAN,IAAkB,MAAlB,GAA2B,4DAA3B,GAA0F,EAAI;AAC9G,MAAMT,KAAK,IAAKA,KAAK,CAACS,QAAN,IAAkB,OAAlB,GAA4B,qDAA5B,GAAoF,EAAI;AACxG;AACA,MAAMT,KAAK,IACLA,KAAK,CAACS,QAAN,IAAkB,MAAlB,IAA4BT,KAAK,CAACS,QAAN,IAAkB,OAA9C,GACI,EADJ,GAEIT,KAAK,CAACI,KAAN,IAAe,OAAf,GACA,WADA,GAEAJ,KAAK,CAACI,KAAN,IAAe,KAAf,GACA,YADA,GAEA,yCAA0C;AACpD;AACA;AACA;AACA,MAAMJ,KAAK,IAAK,CAACA,KAAK,CAACU,SAAP,GAAmB,gBAAnB,GAAsC,EAAI;AAC1D;AACA;AACA,MAAMV,KAAK,IAAKA,KAAK,CAACS,QAAN,IAAkB,KAAlB,GAA0B,YAA1B,GAAyCT,KAAK,CAACS,QAAN,IAAkB,QAAlB,GAA6B,eAA7B,GAA+C,EAAI;AAC5G;AACA,MAAMT,KAAK,IAAKA,KAAK,CAACS,QAAN,IAAkB,OAAlB,GAA4B,uDAA5B,GAAsF,EAAI;AAC1G,MAAMT,KAAK,IAAKA,KAAK,CAACS,QAAN,IAAkB,MAAlB,GAA2B,sDAA3B,GAAoF,EAAI;AACxG;AACA,MAAMT,KAAK,IACLA,KAAK,CAACS,QAAN,IAAkB,MAAlB,IAA4BT,KAAK,CAACS,QAAN,IAAkB,OAA9C,GAAwD,EAAxD,GACAT,KAAK,CAACI,KAAN,IAAe,OAAf,GAA0B,SAAQV,cAAc,CAACM,KAAK,CAACL,IAAP,CAAa,GAA7D,GAAkEK,KAAK,CAACI,KAAN,IAAe,KAAf,GAAwB,UAASV,cAAc,CAACM,KAAK,CAACL,IAAP,CAAa,GAA5D,GAAiE,YAAa;AACtJ;AACA,MAAMK,KAAK,IAAKA,KAAK,CAACS,QAAN,IAAkB,MAAlB,GAA2B,EAA3B,GAAgC,oBAAsB;AACtE;AACA;AACA;AACA,oBAAoBT,KAAK,IAAKA,KAAK,CAACS,QAAN,IAAkB,KAAlB,GAA0BrB,MAAM,CAACmB,WAAjC,GAA+C,aAAe;AAC5F,sBAAsBP,KAAK,IAAKA,KAAK,CAACS,QAAN,IAAkB,OAAlB,GAA4BrB,MAAM,CAACmB,WAAnC,GAAiD,aAAe;AAChG,sBAAsBP,KAAK,IAAKA,KAAK,CAACS,QAAN,IAAkB,QAAlB,GAA6BrB,MAAM,CAACmB,WAApC,GAAkD,aAAe;AACjG,sBAAsBP,KAAK,IAAKA,KAAK,CAACS,QAAN,IAAkB,MAAlB,GAA2BrB,MAAM,CAACmB,WAAlC,GAAgD,aAAe;AAC/F;AACA,CA7DO;AA+DPT,OAAO,CAACa,YAAR,GAAuB;AACrBD,EAAAA,SAAS,EAAE,KADU;AAErBf,EAAAA,IAAI,EAAET,IAAI,CAACW,KAFU;AAGrBS,EAAAA,MAAM,EAAE,MAHa;AAIrBF,EAAAA,KAAK,EAAE,QAJc;AAKrBK,EAAAA,QAAQ,EAAE;AALW,CAAvB;AAQA,OAAO,MAAMG,cAAc,GAAIC,KAAD,IAAoB5B,GAAI;AACtD,YAAYa,OAAQ,oBAAmBA,OAAQ,aAAYA,OAAQ;AACnE;AACA;AACA,wBAAwBe,KAAK,IAAI,IAAK;AACtC;AACA,CANO;AAQP,OAAO,MAAMC,gBAAgB,GAAG9B,MAAM,CAACe,GAAsB;AAC7D;AACA;AACA;AACA,IAAIC,KAAK,IAAIY,cAAc,CAACZ,KAAK,CAACa,KAAP,CAAc;AACzC,CALO","sourcesContent":["import styled, { css } from 'styled-components';\nimport { Size } from '../types';\nimport { BOXSHADOWS, COLORS, ComponentTextStyle } from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst distanceToEdge = (size: Size | undefined) => {\n  return size == Size.XSmall ? '8px' : (!size || size == Size.Small) ? '12px' : '16px';\n}\n\nexport const Tooltip = styled.div<{\n  withArrow?: boolean;\n  size?: Size;\n  height?: string;\n  align?: 'start' | 'end' | 'center' | undefined;\n  position?: 'top' | 'right' | 'bottom' | 'left' | undefined;\n}>`\n\n    pointer-events: none;\n    ${props => (props.size == Size.Small || props.size != Size.Medium ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.size == Size.XSmall  ? ComponentXSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.size == Size.Medium ? ComponentMStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.align == 'center' ? 'text-align: center;' : '')}\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n    \n    padding: ${props => props.size == Size.XSmall ? '4px 8px' : props.size == Size.Medium ? '8px 12px' : '6px 10px'};\n    border-radius: 2px;\n    width: max-content;\n    height: ${props => props.height};\n    max-width: 34em;\n    background: ${COLORS.primary_800};\n    position: absolute; \n    opacity: 0; \n    z-index: ${Z_INDEXES.tooltip};\n    ${props => (props.position == 'top' ? 'bottom: 110%;' : props.position == 'bottom' ? 'top: 110%;' : '')}\n\n    ${props => (props.position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : '')}\n    ${props => (props.position == 'right' ? 'bottom: 50%;left: 110%; transform: translateY(50%);' : '')}\n            \n    ${props =>\n      props.position == 'left' || props.position == 'right'\n        ? ''\n        : props.align == 'start'\n        ? 'left: 0%;'\n        : props.align == 'end'\n        ? 'right: 0%;'\n        : 'left: 50%; transform: translateX(-50%);'}\n\n\n&::after {\n    ${props => (!props.withArrow ? 'display: none;' : '')}\n    content: \"\";\n    position: absolute;\n    ${props => (props.position == 'top' ? 'top: 100%;' : props.position == 'bottom' ? 'bottom: 100%;' : '')}\n    \n    ${props => (props.position == 'right' ? 'right: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n    ${props => (props.position == 'left' ? 'left: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n\n    ${props =>\n      props.position == 'left' || props.position == 'right' ? '' : \n      props.align == 'start' ? `left: ${distanceToEdge(props.size)};` : props.align == 'end' ? `right: ${distanceToEdge(props.size)};` : 'left: 50%;'}\n\n    ${props => (props.position == 'left' ? '' : 'margin-left: -5px;')}\n    margin: -0.5px;\n    border-width: 4px;\n    border-style: solid;\n    border-color: ${props => (props.position == 'top' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'right' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'bottom' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'left' ? COLORS.primary_800 : 'transparent')};\n  }\n`;\n\nTooltip.defaultProps = {\n  withArrow: false,\n  size: Size.Small,\n  height: 'auto',\n  align: 'center',\n  position: 'bottom'\n}\n\nexport const TooltipTrigger = (delay?: string) => css`\n  &:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {\n    opacity: 1;\n    transition: 0.5s;\n    transition-delay: ${delay ?? '1s'};\n  }\n`;\n\nexport const TooltipContainer = styled.div<{delay?: string}>`\n  display: inline-block;\n  position: relative;\n\n  ${props => TooltipTrigger(props.delay)}\n`;\n"],"file":"TooltipStyles.js"}

package/dist/esm/Tooltips/TooltipTypes.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tooltips/TooltipTypes.tsx"],"names":[],"mappings":"AAEA;AACA;AACA;AAUG","sourcesContent":["import { Size } from \"../types\";\n\n/**\n * Types for the table.\n */\n export interface TooltipProps {\n    label?: string;\n    withArrow?: boolean;\n    width?: string;\n    size?: Size;\n    height?: string;\n    align? : 'start' | 'end' | 'center' | undefined;\n    position? : 'top' | 'right' | 'bottom' | 'left' | undefined;\n    children?: React.ReactNode;\n  };\n  "],"file":"TooltipTypes.js"}
+{"version":3,"sources":["../../../src/Tooltips/TooltipTypes.tsx"],"names":[],"mappings":"AAEA;AACA;AACA;AAWG","sourcesContent":["import { Size } from \"../types\";\n\n/**\n * Types for the table.\n */\n export interface TooltipProps {\n    label?: string;\n    withArrow?: boolean;\n    width?: string;\n    size?: Size;\n    delay?: string;\n    height?: string;\n    align? : 'start' | 'end' | 'center' | undefined;\n    position? : 'top' | 'right' | 'bottom' | 'left' | undefined;\n    children?: React.ReactNode;\n  };\n  "],"file":"TooltipTypes.js"}

package/dist/esm/Tooltips/TooltipWrapper.js

@@ -8,10 +8,13 @@ const TooltipWrapper = ({
   withArrow,
   size = Size.Small,
   height = 'auto',
+  delay = undefined,
   align = 'center',
   position = 'bottom'
 }) => {
-  return /*#__PURE__*/React.createElement(TooltipContainer, null, /*#__PURE__*/React.createElement(Tooltip, {
+  return /*#__PURE__*/React.createElement(TooltipContainer, {
+    delay: delay
+  }, /*#__PURE__*/React.createElement(Tooltip, {
     align: align,
     height: height,
     size: size,

package/dist/esm/Tooltips/TooltipWrapper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tooltips/TooltipWrapper.tsx"],"names":["React","TooltipContainer","Tooltip","Size","TooltipWrapper","label","children","withArrow","size","Small","height","align","position"],"mappings":"AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAIA,SAASC,gBAAT,EAA2BC,OAA3B,QAA0C,iBAA1C;AACA,SAASC,IAAT,QAAqB,IAArB;;AAEC,MAAMC,cAAc,GAAG,CAAC;AACtBC,EAAAA,KADsB;AACfC,EAAAA,QADe;AAEtBC,EAAAA,SAFsB;AAGtBC,EAAAA,IAAI,GAAGL,IAAI,CAACM,KAHU;AAItBC,EAAAA,MAAM,GAAG,MAJa;AAKtBC,EAAAA,KAAK,GAAG,QALc;AAMtBC,EAAAA,QAAQ,GAAG;AANW,CAAD,KAMoB;AAExC,sBAAO,oBAAC,gBAAD,qBACC,oBAAC,OAAD;AAAS,IAAA,KAAK,EAAED,KAAhB;AACG,IAAA,MAAM,EAAED,MADX;AAEG,IAAA,IAAI,EAAEF,IAFT;AAGG,IAAA,SAAS,EAAED,SAHd;AAIG,IAAA,QAAQ,EAAEK;AAJb,KAKIP,KALJ,CADD,EAQDC,QARC,CAAP;AAUF,CAlBD;;AAoBA,eAAeF,cAAf","sourcesContent":["\nimport * as React from 'react';\n\nimport { TooltipProps } from './TooltipTypes';\n\nimport { TooltipContainer, Tooltip } from './TooltipStyles';\nimport { Size } from '..';\n \n const TooltipWrapper = ({\n   label, children,\n   withArrow,\n   size = Size.Small,\n   height = 'auto',\n   align = 'center', \n   position = 'bottom' } : TooltipProps) => {\n \n    return <TooltipContainer>\n            <Tooltip align={align} \n               height={height} \n               size={size}\n               withArrow={withArrow} \n               position={position}>\n               {label}\n            </Tooltip>\n         {children}\n       </TooltipContainer>;\n };\n \n export default TooltipWrapper;"],"file":"TooltipWrapper.js"}
+{"version":3,"sources":["../../../src/Tooltips/TooltipWrapper.tsx"],"names":["React","TooltipContainer","Tooltip","Size","TooltipWrapper","label","children","withArrow","size","Small","height","delay","undefined","align","position"],"mappings":"AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAIA,SAASC,gBAAT,EAA2BC,OAA3B,QAA0C,iBAA1C;AACA,SAASC,IAAT,QAAqB,IAArB;;AAEC,MAAMC,cAAc,GAAG,CAAC;AACtBC,EAAAA,KADsB;AACfC,EAAAA,QADe;AAEtBC,EAAAA,SAFsB;AAGtBC,EAAAA,IAAI,GAAGL,IAAI,CAACM,KAHU;AAItBC,EAAAA,MAAM,GAAG,MAJa;AAKtBC,EAAAA,KAAK,GAAGC,SALc;AAMtBC,EAAAA,KAAK,GAAG,QANc;AAOtBC,EAAAA,QAAQ,GAAG;AAPW,CAAD,KAOoB;AAExC,sBAAO,oBAAC,gBAAD;AAAkB,IAAA,KAAK,EAAEH;AAAzB,kBACC,oBAAC,OAAD;AAAS,IAAA,KAAK,EAAEE,KAAhB;AACG,IAAA,MAAM,EAAEH,MADX;AAEG,IAAA,IAAI,EAAEF,IAFT;AAGG,IAAA,SAAS,EAAED,SAHd;AAIG,IAAA,QAAQ,EAAEO;AAJb,KAKIT,KALJ,CADD,EAQDC,QARC,CAAP;AAUF,CAnBD;;AAqBA,eAAeF,cAAf","sourcesContent":["\nimport * as React from 'react';\n\nimport { TooltipProps } from './TooltipTypes';\n\nimport { TooltipContainer, Tooltip } from './TooltipStyles';\nimport { Size } from '..';\n \n const TooltipWrapper = ({\n   label, children,\n   withArrow,\n   size = Size.Small,\n   height = 'auto',\n   delay = undefined,\n   align = 'center', \n   position = 'bottom' } : TooltipProps) => {\n \n    return <TooltipContainer delay={delay}>\n            <Tooltip align={align}\n               height={height}\n               size={size}\n               withArrow={withArrow}\n               position={position}>\n               {label}\n            </Tooltip>\n         {children}\n       </TooltipContainer>;\n };\n \n export default TooltipWrapper;"],"file":"TooltipWrapper.js"}

package/dist/esm/icons/index.js

@@ -19,7 +19,7 @@ export const getSize = size => {
 };
 const Container = styled.div`
   position: relative;
-  ${TooltipTrigger}
+  ${TooltipTrigger()}
 `;
 const IconComponent = styled.svg`
   width: ${props => props.width};

package/dist/esm/icons/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/icons/index.tsx"],"names":["React","styled","Tooltip","TooltipTrigger","ContentIcons","SystemIcons","getSize","size","indexOf","Container","div","IconComponent","svg","props","width","height","renderIcon","children","viewBox","tooltip","className","BaseIcon","SystemIcon","ContentIcon"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,OAAT,EAAkBC,cAAlB,QAAwC,2BAAxC;AACA,OAAO,KAAKC,YAAZ,MAA8B,6BAA9B;AACA,OAAO,KAAKC,WAAZ,MAA6B,2BAA7B;;AAkBA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,OAAO,GAAIC,IAAD,IAAkB;AACvC,MAAI,OAAOA,IAAP,KAAgB,QAAhB,IAA4BA,IAAI,CAACC,OAAL,CAAa,IAAb,MAAuB,CAAC,CAAxD,EAA2D;AACzD,WAAQ,GAAED,IAAK,IAAf;AACD,GAFD,MAEO;AACL,WAAOA,IAAP;AACD;AACF,CANM;AAQP,MAAME,SAAS,GAAGR,MAAM,CAACS,GAAI;AAC7B;AACA,IAAIP,cAAe;AACnB,CAHA;AAIA,MAAMQ,aAAa,GAAGV,MAAM,CAACW,GAAuC;AACpE,WAAWC,KAAK,IAAIA,KAAK,CAACC,KAAM;AAChC,YAAYD,KAAK,IAAIA,KAAK,CAACE,MAAO;AAClC,CAHA;;AAKA,MAAMC,UAAU,GAAG,CAACC,QAAD,EAA4BH,KAA5B,EAA2CC,MAA3C,EAA2DG,OAA3D,EAA4EC,OAA5E,EAA8FC,SAA9F,KAAqH;AACtI,SAAOD,OAAO,gBACZ,oBAAC,SAAD,qBACE,oBAAC,aAAD;AAAe,IAAA,SAAS,EAAEC,SAA1B;AAAqC,IAAA,KAAK,EAAEN,KAA5C;AAAmD,IAAA,MAAM,EAAEC,MAA3D;AAAmE,IAAA,OAAO,EAAEG,OAA5E;AAAqF,IAAA,IAAI,EAAC,MAA1F;AAAiG,IAAA,KAAK,EAAC;AAAvG,KACGD,QADH,CADF,eAIE,oBAAC,OAAD,QAAUE,OAAV,CAJF,CADY,gBAQZ,oBAAC,aAAD;AAAe,IAAA,SAAS,EAAEC,SAA1B;AAAqC,IAAA,KAAK,EAAEN,KAA5C;AAAmD,IAAA,MAAM,EAAEC,MAA3D;AAAmE,IAAA,OAAO,EAAEG,OAA5E;AAAqF,IAAA,IAAI,EAAC,MAA1F;AAAiG,IAAA,KAAK,EAAC;AAAvG,KACGD,QADH,CARF;AAYD,CAbD;;AAeA,OAAO,MAAMI,QAA4C,GAAG,CAAC;AAAED,EAAAA,SAAF;AAAaH,EAAAA,QAAb;AAAuBV,EAAAA,IAAI,GAAG,MAA9B;AAAsCW,EAAAA,OAAO,GAAG,WAAhD;AAA6DC,EAAAA,OAAO,GAAG;AAAvE,CAAD,KAAiF;AAC3I,SAAOH,UAAU,CAACC,QAAD,EAAWX,OAAO,CAACC,IAAD,CAAlB,EAA0BD,OAAO,CAACC,IAAD,CAAjC,EAAyCW,OAAzC,EAAkDC,OAAlD,EAA2DC,SAA3D,CAAjB;AACD,CAFM;;AApDLA,EAAAA,S;AACAH,EAAAA,Q;AACAV,EAAAA,I;AACAW,EAAAA,O;AACAC,EAAAA,O;;AAoDF,OAAO,MAAMG,UAA8C,GAAG,CAAC;AAAEF,EAAAA,SAAF;AAAaH,EAAAA,QAAb;AAAuBV,EAAAA,IAAI,GAAG,MAA9B;AAAsCW,EAAAA,OAAO,GAAG,WAAhD;AAA6DC,EAAAA,OAAO,GAAG;AAAvE,CAAD,KAAiF;AAC7I,SAAOH,UAAU,CAACC,QAAD,EAAWX,OAAO,CAACC,IAAD,CAAlB,EAA0BD,OAAO,CAACC,IAAD,CAAjC,EAAyCW,OAAzC,EAAkDC,OAAlD,EAA2DC,SAA3D,CAAjB;AACD,CAFM;;AAxDLA,EAAAA,S;AACAH,EAAAA,Q;AACAV,EAAAA,I;AACAW,EAAAA,O;AACAC,EAAAA,O;;AAwDF,OAAO,MAAMI,WAA+C,GAAG,CAAC;AAAEH,EAAAA,SAAF;AAAaH,EAAAA,QAAb;AAAuBV,EAAAA,IAAI,GAAG,MAA9B;AAAsCW,EAAAA,OAAO,GAAG,WAAhD;AAA6DC,EAAAA,OAAO,GAAG;AAAvE,CAAD,KAAiF;AAC9I,SAAOH,UAAU,CAACC,QAAD,EAAWX,OAAO,CAACC,IAAD,CAAlB,EAA0BD,OAAO,CAACC,IAAD,CAAjC,EAAyCW,OAAzC,EAAkDC,OAAlD,EAA2DC,SAA3D,CAAjB;AACD,CAFM;;AA5DLA,EAAAA,S;AACAH,EAAAA,Q;AACAV,EAAAA,I;AACAW,EAAAA,O;AACAC,EAAAA,O;;AA4DF,SAASd,WAAT;AACA,SAASD,YAAT","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Tooltip, TooltipTrigger } from '../Tooltips/TooltipStyles';\nimport * as ContentIcons from './contenticons/ContentIcons';\nimport * as SystemIcons from './systemicons/SystemIcons';\n\nexport type BaseProps = {\n  className?: string;\n  children?: any;\n  size?: string;\n  viewBox?: string;\n  tooltip?: string;\n};\n\nexport type IconProps = {\n  label?: string;\n  className?: string;\n  color?: string;\n  size?: string;\n  viewBox?: string;\n};\n\n/**\n * Retrieves the size of the icon.\n * @param size - Original size which was passed to the icon.\n * @returns Numeric value indicating the size of the icon.\n */\nexport const getSize = (size: string) => {\n  if (typeof size === 'string' && size.indexOf('px') === -1) {\n    return `${size}px`;\n  } else {\n    return size;\n  }\n};\n\nconst Container = styled.div`\n  position: relative;\n  ${TooltipTrigger}\n`;\nconst IconComponent = styled.svg<{ width: string; height: string }>`\n  width: ${props => props.width};\n  height: ${props => props.height};\n`;\n\nconst renderIcon = (children: React.ReactNode, width: string, height: string, viewBox: string, tooltip?: string, className?: string) => {\n  return tooltip ? (\n    <Container>\n      <IconComponent className={className} width={width} height={height} viewBox={viewBox} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        {children}\n      </IconComponent>\n      <Tooltip>{tooltip}</Tooltip>\n    </Container>\n  ) : (\n    <IconComponent className={className} width={width} height={height} viewBox={viewBox} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      {children}\n    </IconComponent>\n  );\n};\n\nexport const BaseIcon: React.FunctionComponent<BaseProps> = ({ className, children, size = '16px', viewBox = '0 0 25 25', tooltip = '' }) => {\n  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);\n};\n\nexport const SystemIcon: React.FunctionComponent<BaseProps> = ({ className, children, size = '24px', viewBox = '0 0 24 24', tooltip = '' }) => {\n  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);\n};\n\nexport const ContentIcon: React.FunctionComponent<BaseProps> = ({ className, children, size = '48px', viewBox = '0 0 48 48', tooltip = '' }) => {\n  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);\n};\n\nexport { SystemIcons };\nexport { ContentIcons };\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/icons/index.tsx"],"names":["React","styled","Tooltip","TooltipTrigger","ContentIcons","SystemIcons","getSize","size","indexOf","Container","div","IconComponent","svg","props","width","height","renderIcon","children","viewBox","tooltip","className","BaseIcon","SystemIcon","ContentIcon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Tooltip, TooltipTrigger } from '../Tooltips/TooltipStyles';\nimport * as ContentIcons from './contenticons/ContentIcons';\nimport * as SystemIcons from './systemicons/SystemIcons';\n\nexport type BaseProps = {\n  className?: string;\n  children?: any;\n  size?: string;\n  viewBox?: string;\n  tooltip?: string;\n};\n\nexport type IconProps = {\n  label?: string;\n  className?: string;\n  color?: string;\n  size?: string;\n  viewBox?: string;\n};\n\n/**\n * Retrieves the size of the icon.\n * @param size - Original size which was passed to the icon.\n * @returns Numeric value indicating the size of the icon.\n */\nexport const getSize = (size: string) => {\n  if (typeof size === 'string' && size.indexOf('px') === -1) {\n    return `${size}px`;\n  } else {\n    return size;\n  }\n};\n\nconst Container = styled.div`\n  position: relative;\n  ${TooltipTrigger()}\n`;\nconst IconComponent = styled.svg<{ width: string; height: string }>`\n  width: ${props => props.width};\n  height: ${props => props.height};\n`;\n\nconst renderIcon = (children: React.ReactNode, width: string, height: string, viewBox: string, tooltip?: string, className?: string) => {\n  return tooltip ? (\n    <Container>\n      <IconComponent className={className} width={width} height={height} viewBox={viewBox} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        {children}\n      </IconComponent>\n      <Tooltip>{tooltip}</Tooltip>\n    </Container>\n  ) : (\n    <IconComponent className={className} width={width} height={height} viewBox={viewBox} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      {children}\n    </IconComponent>\n  );\n};\n\nexport const BaseIcon: React.FunctionComponent<BaseProps> = ({ className, children, size = '16px', viewBox = '0 0 25 25', tooltip = '' }) => {\n  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);\n};\n\nexport const SystemIcon: React.FunctionComponent<BaseProps> = ({ className, children, size = '24px', viewBox = '0 0 24 24', tooltip = '' }) => {\n  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);\n};\n\nexport const ContentIcon: React.FunctionComponent<BaseProps> = ({ className, children, size = '48px', viewBox = '0 0 48 48', tooltip = '' }) => {\n  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);\n};\n\nexport { SystemIcons };\nexport { ContentIcons };\n"],"file":"index.js"}

package/dist/js/Modals/ModalDialog.js

@@ -152,7 +152,8 @@ var ModalDialog = function ModalDialog(_ref) {
   };
 
   var ModalTootip = function ModalTootip(tooltip) {
-    return /*#__PURE__*/React.createElement(_Tooltips.TooltipWrapper, {
+    return /*#__PURE__*/React.createElement(_ModalStyles.ModalHoverModifier, null, /*#__PURE__*/React.createElement(_Tooltips.TooltipWrapper, {
+      delay: "0s",
       size: _types.Size.XSmall,
       align: "center",
       position: "top",
@@ -165,7 +166,7 @@ var ModalDialog = function ModalDialog(_ref) {
     }, /*#__PURE__*/React.createElement(_SystemIcons.Help, {
       size: "24px",
       color: _styles.COLORS.neutral_600
-    })));
+    }))));
   };
 
   var ModalCloseButton = function ModalCloseButton(onClick) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Modals/ModalDialog.tsx"],"names":["ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","getMinWidth","Size","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","ComponentTextStyle","Bold","ModalTootip","XSmall","COLORS","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","icon","React","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","map","b","i","id"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } from '../types';\nimport ModalContainer from './ModalContainer';\nimport {\n  BackButtonWrapper,\n  CloseButtonWrapper,\n  Column,\n  FlexContainer,\n  ModalBody,\n  ModalFooter,\n  ModalHeaderActions,\n  ModalHeaderActionsWithImage,\n  ModalTitleSection,\n  StyledModalHeader,\n} from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { TooltipWrapper } from '../Tooltips';\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { ReactNode } from 'react';\nimport { HyperLink } from '..';\n\ninterface NewModalProps {\n  size?: Size;\n  isModalOpen: boolean;\n  closeModalAndClearInput: any;\n  title?: string;\n  topImage?: any;\n  buttons?: ButtonAction[];\n  leftFooterAction?: LeftFooterAction;\n  tooltip?: string;\n  backButton?: () => void;\n  closeAction: () => void;\n  submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n  note?: string;\n  state?: string;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  topImage,\n  buttons,\n  leftFooterAction,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n  children,\n  note,\n  state,\n}) => {\n  const getMinWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '320px';\n      case Size.Large:\n        return '640px';\n      case Size.Medium:\n      default:\n        return '480px';\n    }\n  };\n\n  const getMaxWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '480px';\n      case Size.Large:\n        return '720px';\n      case Size.Medium:\n      default:\n        return '640px';\n    }\n  };\n\n  const getImageHeight = () => {\n    switch (size) {\n      case Size.Small:\n        return 160;\n      case Size.Medium:\n        return 200;\n      case Size.Large:\n        return 240;\n      default:\n        return 200;\n    }\n  };\n\n  const getMarginBottom = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px';\n      case Size.Medium:\n        return '24px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px';\n    }\n  };\n\n  const getPadding = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px 16px 8px';\n      case Size.Medium:\n        return '24px 24px 20px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px 24px 16px';\n    }\n  };\n\n  const ModalTitle = (title: string, size?: Size) => {\n    switch (size) {\n      case Size.Small:\n        return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n      case Size.Medium:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n      case Size.Large:\n        return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n      default:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n    }\n  };\n\n  const ModalTootip = (tooltip: string) => {\n    return (\n      <TooltipWrapper 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    );\n  };\n\n  const ModalCloseButton = (onClick: any) => {\n    return (\n      <CloseButtonWrapper hasImage={!!topImage} size={size}>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n          <Close size=\"24px\" color={COLORS.black} />\n        </IconButton>\n      </CloseButtonWrapper>\n    );\n  };\n\n  const ModalBackButton = () => {\n    if (backButton) {\n      return (\n        <BackButtonWrapper hasImage={!!topImage} size={size}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n            <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n          </IconButton>\n        </BackButtonWrapper>\n      );\n    }\n  };\n\n  const getLeftActionIconElement = (icon: ReactNode) => {\n    return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n  };\n\n  const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n    const { text, actionType, disabled, icon, action } = leftFooterAction;\n    switch (actionType) {\n      case 'button':\n        return (\n          <Button\n            id={'left-action-button'}\n            type={(leftFooterAction as LeftFooterButton)?.type}\n            disabled={disabled}\n            loading={(leftFooterAction as LeftFooterButton)?.loading}\n            icon={icon}\n            size={size}\n            onClick={action}\n            variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n            style={{ order: -1, marginRight: 'auto' }}>\n            {text}\n          </Button>\n        );\n      case 'hyperlink':\n        return (\n          <HyperLink id=\"left-action-hyperlink\" className=\"footer-action\" href={(leftFooterAction as LeftFooterHyperlink).href} disabled={disabled} variant=\"default\">\n            {icon && getLeftActionIconElement(icon)}\n            {text}\n          </HyperLink>\n        );\n      case 'note':\n        return (\n          <div className=\"footer-action note\">\n            {icon && getLeftActionIconElement(icon)}\n            <span>{text}</span>\n          </div>\n        );\n    }\n  };\n\n  return (\n    <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()}>\n      <Column>\n        <form onSubmit={submitAction}>\n          {topImage && (\n            <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n              <img src={topImage} alt=\"Modal top\" />\n              <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n                {ModalBackButton()}\n                {ModalCloseButton(closeAction)}\n              </ModalHeaderActionsWithImage>\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            <FlexContainer>\n              {!topImage && ModalBackButton()}\n              {title && ModalTitle(title, size)}\n            </FlexContainer>\n            <ModalHeaderActions>\n              {tooltip && ModalTootip(tooltip)}\n              {!topImage && ModalCloseButton(closeAction)}\n            </ModalHeaderActions>\n          </ModalTitleSection>\n\n          <ModalBody size={size}>{children}</ModalBody>\n\n          {note && <ModalNote note={note} state={state} size={size} />}\n\n          <ModalFooter size={size}>\n            {leftFooterAction && LeftFooterAction(leftFooterAction)}\n            {buttons?.map((b, i) => (\n              <Button key={b.id || i} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n                {b.text}\n              </Button>\n            ))}\n          </ModalFooter>\n        </form>\n      </Column>\n    </ModalContainer>\n  );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}
+{"version":3,"sources":["../../../src/Modals/ModalDialog.tsx"],"names":["ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","getMinWidth","Size","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","ComponentTextStyle","Bold","ModalTootip","XSmall","COLORS","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","icon","React","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","map","b","i","id"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } from '../types';\nimport ModalContainer from './ModalContainer';\nimport {\n  BackButtonWrapper,\n  CloseButtonWrapper,\n  Column,\n  FlexContainer,\n  ModalBody,\n  ModalFooter,\n  ModalHeaderActions,\n  ModalHeaderActionsWithImage,\n  ModalTitleSection,\n  StyledModalHeader,\n  ModalHoverModifier\n} from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { TooltipWrapper } from '../Tooltips';\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { ReactNode } from 'react';\nimport { HyperLink } from '..';\n\ninterface NewModalProps {\n  size?: Size;\n  isModalOpen: boolean;\n  closeModalAndClearInput: any;\n  title?: string;\n  topImage?: any;\n  buttons?: ButtonAction[];\n  leftFooterAction?: LeftFooterAction;\n  tooltip?: string;\n  backButton?: () => void;\n  closeAction: () => void;\n  submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n  note?: string;\n  state?: string;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  topImage,\n  buttons,\n  leftFooterAction,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n  children,\n  note,\n  state,\n}) => {\n  const getMinWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '320px';\n      case Size.Large:\n        return '640px';\n      case Size.Medium:\n      default:\n        return '480px';\n    }\n  };\n\n  const getMaxWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '480px';\n      case Size.Large:\n        return '720px';\n      case Size.Medium:\n      default:\n        return '640px';\n    }\n  };\n\n  const getImageHeight = () => {\n    switch (size) {\n      case Size.Small:\n        return 160;\n      case Size.Medium:\n        return 200;\n      case Size.Large:\n        return 240;\n      default:\n        return 200;\n    }\n  };\n\n  const getMarginBottom = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px';\n      case Size.Medium:\n        return '24px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px';\n    }\n  };\n\n  const getPadding = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px 16px 8px';\n      case Size.Medium:\n        return '24px 24px 20px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px 24px 16px';\n    }\n  };\n\n  const ModalTitle = (title: string, size?: Size) => {\n    switch (size) {\n      case Size.Small:\n        return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n      case Size.Medium:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n      case Size.Large:\n        return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n      default:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n    }\n  };\n\n  const ModalTootip = (tooltip: string) => {\n    return (\n      <ModalHoverModifier>\n        <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"top\" withArrow={false} label={tooltip}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => {}}>\n            <Help size=\"24px\" color={COLORS.neutral_600} />\n          </IconButton>\n        </TooltipWrapper>\n      </ModalHoverModifier>\n    );\n  };\n\n  const ModalCloseButton = (onClick: any) => {\n    return (\n      <CloseButtonWrapper hasImage={!!topImage} size={size}>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n          <Close size=\"24px\" color={COLORS.black} />\n        </IconButton>\n      </CloseButtonWrapper>\n    );\n  };\n\n  const ModalBackButton = () => {\n    if (backButton) {\n      return (\n        <BackButtonWrapper hasImage={!!topImage} size={size}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n            <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n          </IconButton>\n        </BackButtonWrapper>\n      );\n    }\n  };\n\n  const getLeftActionIconElement = (icon: ReactNode) => {\n    return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n  };\n\n  const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n    const { text, actionType, disabled, icon, action } = leftFooterAction;\n    switch (actionType) {\n      case 'button':\n        return (\n          <Button\n            id={'left-action-button'}\n            type={(leftFooterAction as LeftFooterButton)?.type}\n            disabled={disabled}\n            loading={(leftFooterAction as LeftFooterButton)?.loading}\n            icon={icon}\n            size={size}\n            onClick={action}\n            variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n            style={{ order: -1, marginRight: 'auto' }}>\n            {text}\n          </Button>\n        );\n      case 'hyperlink':\n        return (\n          <HyperLink id=\"left-action-hyperlink\" className=\"footer-action\" href={(leftFooterAction as LeftFooterHyperlink).href} disabled={disabled} variant=\"default\">\n            {icon && getLeftActionIconElement(icon)}\n            {text}\n          </HyperLink>\n        );\n      case 'note':\n        return (\n          <div className=\"footer-action note\">\n            {icon && getLeftActionIconElement(icon)}\n            <span>{text}</span>\n          </div>\n        );\n    }\n  };\n\n  return (\n    <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()}>\n      <Column>\n        <form onSubmit={submitAction}>\n          {topImage && (\n            <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n              <img src={topImage} alt=\"Modal top\" />\n              <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n                {ModalBackButton()}\n                {ModalCloseButton(closeAction)}\n              </ModalHeaderActionsWithImage>\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            <FlexContainer>\n              {!topImage && ModalBackButton()}\n              {title && ModalTitle(title, size)}\n            </FlexContainer>\n            <ModalHeaderActions>\n              {tooltip && ModalTootip(tooltip)}\n              {!topImage && ModalCloseButton(closeAction)}\n            </ModalHeaderActions>\n          </ModalTitleSection>\n\n          <ModalBody size={size}>{children}</ModalBody>\n\n          {note && <ModalNote note={note} state={state} size={size} />}\n\n          <ModalFooter size={size}>\n            {leftFooterAction && LeftFooterAction(leftFooterAction)}\n            {buttons?.map((b, i) => (\n              <Button key={b.id || i} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n                {b.text}\n              </Button>\n            ))}\n          </ModalFooter>\n        </form>\n      </Column>\n    </ModalContainer>\n  );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}

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

@@ -19,6 +19,7 @@ export declare const ModalHeaderActionsWithImage: import("styled-components").St
 }, never>;
 export declare const ModalHeaderActions: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const FlexContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ModalHoverModifier: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CloseButtonWrapper: import("styled-components").StyledComponent<"div", any, {
     size?: Size;
     hasImage?: boolean;

package/dist/js/Modals/ModalStyles.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getNoteMessageColor = exports.getBackgroundColor = exports.ModalFooter = exports.ModalBody = exports.ModalNoteSection = exports.ModalTitle = exports.BackButtonWrapper = exports.CloseButtonWrapper = exports.FlexContainer = exports.ModalHeaderActions = exports.ModalHeaderActionsWithImage = exports.ModalTitleSection = exports.Column = exports.StyledModalHeader = exports.ModalHeader = void 0;
+exports.getNoteMessageColor = exports.getBackgroundColor = exports.ModalFooter = exports.ModalBody = exports.ModalNoteSection = exports.ModalTitle = exports.BackButtonWrapper = exports.CloseButtonWrapper = exports.ModalHoverModifier = exports.FlexContainer = exports.ModalHeaderActions = exports.ModalHeaderActionsWithImage = exports.ModalTitleSection = exports.Column = exports.StyledModalHeader = exports.ModalHeader = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -13,7 +13,7 @@ var _ = require("..");
 
 var _types = require("../types");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -58,23 +58,27 @@ var FlexContainer = _styledComponents.default.div(_templateObject7 || (_template
 
 exports.FlexContainer = FlexContainer;
 
-var CloseButtonWrapper = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  button {\n    ", "\n  }\n"])), function (props) {
-  return props.hasImage ? (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n            margin: -12px -12px 0 0 !important;\n          "]))) : (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n            left: unset;\n          "])));
+var ModalHoverModifier = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  button:hover {\n    cursor: help !important;\n  }\n"])));
+
+exports.ModalHoverModifier = ModalHoverModifier;
+
+var CloseButtonWrapper = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  button {\n    ", "\n  }\n"])), function (props) {
+  return props.hasImage ? (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n            margin: -12px -12px 0 0 !important;\n          "]))) : (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n            left: unset;\n          "])));
 });
 
 exports.CloseButtonWrapper = CloseButtonWrapper;
 
-var BackButtonWrapper = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  button {\n    margin: -12px 0 0 -12px !important;\n  }\n"])));
+var BackButtonWrapper = _styledComponents.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  button {\n    margin: -12px 0 0 -12px !important;\n  }\n"])));
 
 exports.BackButtonWrapper = BackButtonWrapper;
 
-var ModalTitle = _styledComponents.default.h5(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  margin: 0;\n  font-size: ", ";\n  font-weight: bold;\n"])), function (props) {
+var ModalTitle = _styledComponents.default.h5(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  margin: 0;\n  font-size: ", ";\n  font-weight: bold;\n"])), function (props) {
   return props.fontSize || '1.25em';
 });
 
 exports.ModalTitle = ModalTitle;
 
-var ModalNoteSection = _styledComponents.default.section(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  font-size: ", ";\n  margin-top: ", ";\n  margin-bottom: ", ";\n  display: flex;\n  flex-direction: row;\n  padding: ", ";\n  border-radius: 2px;\n\n  span {\n    display: block;\n    width: 80%;\n    margin-left: 8px;\n    color: ", ";\n  }\n"])), function (props) {
+var ModalNoteSection = _styledComponents.default.section(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  font-size: ", ";\n  margin-top: ", ";\n  margin-bottom: ", ";\n  display: flex;\n  flex-direction: row;\n  padding: ", ";\n  border-radius: 2px;\n\n  span {\n    display: block;\n    width: 80%;\n    margin-left: 8px;\n    color: ", ";\n  }\n"])), function (props) {
   return getBackgroundColor(props.state);
 }, function (props) {
   return (props === null || props === void 0 ? void 0 : props.size) === 'small' ? "16px" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '20px' : '18px';
@@ -90,7 +94,7 @@ var ModalNoteSection = _styledComponents.default.section(_templateObject13 || (_
 
 exports.ModalNoteSection = ModalNoteSection;
 
-var ModalBody = _styledComponents.default.section(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  > :first-child {\n    margin-top: 24px;\n  }\n\n  > :last-child {\n    margin-bottom: ", ";\n  }\n\n  p: first-of-type {\n    padding-bottom: ", ";\n  }\n"])), function (props) {
+var ModalBody = _styledComponents.default.section(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  > :first-child {\n    margin-top: 24px;\n  }\n\n  > :last-child {\n    margin-bottom: ", ";\n  }\n\n  p: first-of-type {\n    padding-bottom: ", ";\n  }\n"])), function (props) {
   return (props === null || props === void 0 ? void 0 : props.size) === 'small' ? "8px" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '24px' : '16px';
 }, function (props) {
   return (props === null || props === void 0 ? void 0 : props.size) === 'small' ? "8px" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '24px' : '16px';
@@ -98,7 +102,7 @@ var ModalBody = _styledComponents.default.section(_templateObject14 || (_templat
 
 exports.ModalBody = ModalBody;
 
-var ModalFooter = _styledComponents.default.section(_templateObject15 || (_templateObject15 = _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) {
+var ModalFooter = _styledComponents.default.section(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  display: flex;\n  justify-content: flex-end;\n\n  gap: ", ";\n\n  .footer-action {\n    order: -1;\n    margin-right: auto;\n    display: flex;\n    align-items: center;\n    font-size: ", ";\n    gap: ", ";\n  }\n\n  .footer-action.note {\n    color: ", ";\n  }\n"])), function (props) {
   return (props === null || props === void 0 ? void 0 : props.size) === _types.Size.Small ? "20px" : (props === null || props === void 0 ? void 0 : props.size) === _types.Size.Large ? '28px' : '24px';
 }, function (props) {
   return (props === null || props === void 0 ? void 0 : props.size) === 'large' ? "16px" : '8px';

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Modals/ModalStyles.ts"],"names":["ModalHeader","styled","section","props","marginBottom","StyledModalHeader","height","size","Column","div","ModalTitleSection","ModalHeaderActionsWithImage","hasBackButton","ModalHeaderActions","FlexContainer","CloseButtonWrapper","hasImage","css","BackButtonWrapper","ModalTitle","h5","fontSize","ModalNoteSection","getBackgroundColor","state","getNoteMessageColor","ModalBody","ModalFooter","Size","Small","Large","COLORS","neutral_600","correct_100","warning_100","critical_100","primary_100","correct_700","warning_700","critical_700","primary_700"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;AAEA;AACA;AACA;AACO,IAAMA,WAAW,GAAGC,0BAAOC,OAAV,6KAIL,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACC,YAAN,IAAsB,MAAjC;AAAA,CAJK,CAAjB;;;AAOA,IAAMC,iBAAiB,GAAG,+BAAOL,WAAP,CAAH,0WAKlB,UAACG,KAAD;AAAA,SAAYA,KAAK,CAACG,MAAN,aAAkBH,KAAK,CAACG,MAAN,IAAgBH,KAAK,CAACI,IAAN,KAAe,OAAf,GAAyB,EAAzB,GAA8BJ,KAAK,CAACI,IAAN,KAAe,OAAf,GAAyB,EAAzB,GAA8B,EAA5E,CAAlB,UAAwG,EAApH;AAAA,CALkB,EAQhB,UAACJ,KAAD;AAAA,mBAAcA,KAAK,CAACG,MAApB;AAAA,CARgB,CAAvB;;;AAkBA,IAAME,MAAM,GAAGP,0BAAOQ,GAAV,oKAAZ;;;;AAOA,IAAMC,iBAAiB,GAAGT,0BAAOC,OAAV,yKAAvB;;;;AAOA,IAAMS,2BAA2B,GAAGV,0BAAOQ,GAAV,uLAEpB,UAACN,KAAD;AAAA,SAAY,CAACA,KAAK,CAACS,aAAP,GAAuB,aAAvB,GAAuC,KAAnD;AAAA,CAFoB,CAAjC;;;;AAQA,IAAMC,kBAAkB,GAAGZ,0BAAOQ,GAAV,uHAAxB;;;;AAKA,IAAMK,aAAa,GAAGb,0BAAOQ,GAAV,2FAAnB;;;;AAIA,IAAMM,kBAAkB,GAAGd,0BAAOQ,GAAV,qGAEzB,UAACN,KAAD;AAAA,SACAA,KAAK,CAACa,QAAN,OACIC,qBADJ,4IAIIA,qBAJJ,gHADA;AAAA,CAFyB,CAAxB;;;;AAaA,IAAMC,iBAAiB,GAAGjB,0BAAOQ,GAAV,qIAAvB;;;;AAMA,IAAMU,UAAU,GAAGlB,0BAAOmB,EAAV,oIAER,UAACjB,KAAD;AAAA,SAAWA,KAAK,CAACkB,QAAN,IAAkB,QAA7B;AAAA,CAFQ,CAAhB;;;;AAMA,IAAMC,gBAAgB,GAAGrB,0BAAOC,OAAV,2VACP,UAACC,KAAD;AAAA,SAAWoB,kBAAkB,CAACpB,KAAK,CAACqB,KAAP,CAA7B;AAAA,CADO,EAEd,UAACrB,KAAD;AAAA,SAAY,CAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,IAAP,MAAgB,OAAhB,YAAmC,CAAAJ,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,IAAP,MAAgB,OAAhB,GAA0B,MAA1B,GAAmC,MAAlF;AAAA,CAFc,EAGb,UAACJ,KAAD;AAAA,SAAY,CAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,IAAP,MAAgB,OAAhB,WAAkC,CAAAJ,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,IAAP,MAAgB,OAAhB,GAA0B,MAA1B,GAAmC,KAAjF;AAAA,CAHa,EAIV,UAACJ,KAAD;AAAA,SAAY,CAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,IAAP,MAAgB,OAAhB,WAAkC,CAAAJ,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,IAAP,MAAgB,OAAhB,GAA0B,MAA1B,GAAmC,MAAjF;AAAA,CAJU,EAOhB,UAACJ,KAAD;AAAA,SAAY,CAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,IAAP,MAAgB,OAAhB,WAAkC,CAAAJ,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,IAAP,MAAgB,OAAhB,GAA0B,MAA1B,GAAmC,MAAjF;AAAA,CAPgB,EAchB,UAACJ,KAAD;AAAA,SAAWsB,mBAAmB,CAACtB,KAAK,CAACqB,KAAP,CAA9B;AAAA,CAdgB,CAAtB;;;;AAkBA,IAAME,SAAS,GAAGzB,0BAAOC,OAAV,wOAMD,UAACC,KAAD;AAAA,SAAY,CAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,IAAP,MAAgB,OAAhB,WAAkC,CAAAJ,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,IAAP,MAAgB,OAAhB,GAA0B,MAA1B,GAAmC,MAAjF;AAAA,CANC,EAUA,UAACJ,KAAD;AAAA,SAAY,CAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,IAAP,MAAgB,OAAhB,WAAkC,CAAAJ,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,IAAP,MAAgB,OAAhB,GAA0B,MAA1B,GAAmC,MAAjF;AAAA,CAVA,CAAf;;;;AAcA,IAAMoB,WAAW,GAAG1B,0BAAOC,OAAV,2WACR,UAACC,KAAD;AAAA,SAAY,CAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,IAAP,MAAgBqB,YAAKC,KAArB,YAAsC,CAAA1B,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,IAAP,MAAgBqB,YAAKE,KAArB,GAA6B,MAA7B,GAAsC,MAAxF;AAAA,CADQ,EAKf,UAAC3B,KAAD;AAAA,SAAY,CAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,IAAP,MAAgB,OAAhB,YAAmC,KAA/C;AAAA,CALe,EAYP,UAACJ,KAAD;AAAA,SAAY,CAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,IAAP,MAAgB,OAAhB,YAAmC,CAAAJ,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,IAAP,MAAgB,OAAhB,GAA0B,MAA1B,GAAmC,MAAlF;AAAA,CAZO,EAab,UAACJ,KAAD;AAAA,SAAY,CAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,IAAP,MAAgBqB,YAAKE,KAArB,WAAqC,CAAA3B,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,IAAP,MAAgBqB,YAAKC,KAArB,GAA6B,KAA7B,GAAqC,KAAtF;AAAA,CAba,EAiBXE,SAAOC,WAjBI,CAAjB;;;;AAqBA,IAAMT,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,KAAD,EAAmB;AACnD,UAAQA,KAAR;AACE,SAAK,UAAL;AACE,aAAOO,SAAOE,WAAd;;AACF,SAAK,SAAL;AACE,aAAOF,SAAOG,WAAd;;AACF,SAAK,UAAL;AACE,aAAOH,SAAOI,YAAd;;AACF;AACE,aAAOJ,SAAOK,WAAd;AARJ;AAUD,CAXM;;;;AAaA,IAAMX,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACD,KAAD,EAAmB;AACpD,UAAQA,KAAR;AACE,SAAK,UAAL;AACE,aAAOO,SAAOM,WAAd;;AACF,SAAK,SAAL;AACE,aAAON,SAAOO,WAAd;;AACF,SAAK,UAAL;AACE,aAAOP,SAAOQ,YAAd;;AACF;AACE,aAAOR,SAAOS,WAAd;AARJ;AAUD,CAXM","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '..';\nimport { Size } from '../types';\n\n/**\n * Modal styles\n */\nexport const ModalHeader = styled.section<{ marginBottom?: string }>`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: ${(props) => props.marginBottom || '24px'};\n`;\n\nexport const StyledModalHeader = styled(ModalHeader)<{ marginBottom?: string; size?: string; height?: number }>`\n  flex: 0 calc(50% - 5px);\n  flex-direction: column;\n  position: relative;\n  text-align: left;\n  height: ${(props) => (props.height ? `${props.height - (props.size === 'small' ? 16 : props.size === 'large' ? 32 : 24)}px` : '')};\n  img {\n    width: 100%;\n    height: ${(props) => `${props.height}px`};\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    border-radius: 8px 8px 0 0;\n    object-fit: cover;\n  }\n`;\n\nexport const Column = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n`;\n\nexport const ModalTitleSection = styled.section`\n  word-break: break-word;\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n`;\n\nexport const ModalHeaderActionsWithImage = styled.div<{ hasBackButton?: boolean }>`\n  display: flex;\n  flex-direction: ${(props) => (!props.hasBackButton ? 'row-reverse' : 'row')};\n  justify-content: space-between;\n  width: 100%;\n  z-index: 1;\n`;\n\nexport const ModalHeaderActions = styled.div`\n  display: flex;\n  margin: -12px -12px 0 0;\n`;\n\nexport const FlexContainer = styled.div`\n  display: flex;\n`;\n\nexport const CloseButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n  button {\n    ${(props) =>\n      props.hasImage\n        ? css`\n            margin: -12px -12px 0 0 !important;\n          `\n        : css`\n            left: unset;\n          `}\n  }\n`;\n\nexport const BackButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n  button {\n    margin: -12px 0 0 -12px !important;\n  }\n`;\n\nexport const ModalTitle = styled.h5<{ fontSize?: string }>`\n  margin: 0;\n  font-size: ${(props) => props.fontSize || '1.25em'};\n  font-weight: bold;\n`;\n\nexport const ModalNoteSection = styled.section<{ state: string; size?: string }>`\n  background-color: ${(props) => getBackgroundColor(props.state)};\n  font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n  margin-top: ${(props) => (props?.size === 'small' ? `0px` : props?.size === 'large' ? '16px' : '4px')};\n  margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  display: flex;\n  flex-direction: row;\n  padding: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '16px' : '12px')};\n  border-radius: 2px;\n\n  span {\n    display: block;\n    width: 80%;\n    margin-left: 8px;\n    color: ${(props) => getNoteMessageColor(props.state)};\n  }\n`;\n\nexport const ModalBody = styled.section<{ size?: string }>`\n  > :first-child {\n    margin-top: 24px;\n  }\n\n  > :last-child {\n    margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  }\n\n  p: first-of-type {\n    padding-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  }\n`;\n\nexport const ModalFooter = styled.section<{ size?: Size }>`\n  margin-top: ${(props) => (props?.size === Size.Small ? `20px` : props?.size === Size.Large ? '28px' : '24px')};\n  display: flex;\n  justify-content: flex-end;\n\n  gap: ${(props) => (props?.size === 'large' ? `16px` : '8px')};\n\n  .footer-action {\n    order: -1;\n    margin-right: auto;\n    display: flex;\n    align-items: center;\n    font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n    gap: ${(props) => (props?.size === Size.Large ? `8px` : props?.size === Size.Small ? '4px' : '6px')};\n  }\n\n  .footer-action.note {\n    color: ${COLORS.neutral_600};\n  }\n`;\n\nexport const getBackgroundColor = (state: string) => {\n  switch (state) {\n    case 'positive':\n      return COLORS.correct_100;\n    case 'warning':\n      return COLORS.warning_100;\n    case 'critical':\n      return COLORS.critical_100;\n    default:\n      return COLORS.primary_100;\n  }\n};\n\nexport const getNoteMessageColor = (state: string) => {\n  switch (state) {\n    case 'positive':\n      return COLORS.correct_700;\n    case 'warning':\n      return COLORS.warning_700;\n    case 'critical':\n      return COLORS.critical_700;\n    default:\n      return COLORS.primary_700;\n  }\n};\n"],"file":"ModalStyles.js"}
+{"version":3,"sources":["../../../src/Modals/ModalStyles.ts"],"names":["ModalHeader","styled","section","props","marginBottom","StyledModalHeader","height","size","Column","div","ModalTitleSection","ModalHeaderActionsWithImage","hasBackButton","ModalHeaderActions","FlexContainer","ModalHoverModifier","CloseButtonWrapper","hasImage","css","BackButtonWrapper","ModalTitle","h5","fontSize","ModalNoteSection","getBackgroundColor","state","getNoteMessageColor","ModalBody","ModalFooter","Size","Small","Large","COLORS","neutral_600","correct_100","warning_100","critical_100","primary_100","correct_700","warning_700","critical_700","primary_700"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '..';\nimport { Size } from '../types';\n\n/**\n * Modal styles\n */\nexport const ModalHeader = styled.section<{ marginBottom?: string }>`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: ${(props) => props.marginBottom || '24px'};\n`;\n\nexport const StyledModalHeader = styled(ModalHeader)<{ marginBottom?: string; size?: string; height?: number }>`\n  flex: 0 calc(50% - 5px);\n  flex-direction: column;\n  position: relative;\n  text-align: left;\n  height: ${(props) => (props.height ? `${props.height - (props.size === 'small' ? 16 : props.size === 'large' ? 32 : 24)}px` : '')};\n  img {\n    width: 100%;\n    height: ${(props) => `${props.height}px`};\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    border-radius: 8px 8px 0 0;\n    object-fit: cover;\n  }\n`;\n\nexport const Column = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n`;\n\nexport const ModalTitleSection = styled.section`\n  word-break: break-word;\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n`;\n\nexport const ModalHeaderActionsWithImage = styled.div<{ hasBackButton?: boolean }>`\n  display: flex;\n  flex-direction: ${(props) => (!props.hasBackButton ? 'row-reverse' : 'row')};\n  justify-content: space-between;\n  width: 100%;\n  z-index: 1;\n`;\n\nexport const ModalHeaderActions = styled.div`\n  display: flex;\n  margin: -12px -12px 0 0;\n`;\n\nexport const FlexContainer = styled.div`\n  display: flex;\n`;\n\nexport const ModalHoverModifier = styled.div`\n  button:hover {\n    cursor: help !important;\n  }\n`;\n\nexport const CloseButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n  button {\n    ${(props) =>\n      props.hasImage\n        ? css`\n            margin: -12px -12px 0 0 !important;\n          `\n        : css`\n            left: unset;\n          `}\n  }\n`;\n\nexport const BackButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n  button {\n    margin: -12px 0 0 -12px !important;\n  }\n`;\n\nexport const ModalTitle = styled.h5<{ fontSize?: string }>`\n  margin: 0;\n  font-size: ${(props) => props.fontSize || '1.25em'};\n  font-weight: bold;\n`;\n\nexport const ModalNoteSection = styled.section<{ state: string; size?: string }>`\n  background-color: ${(props) => getBackgroundColor(props.state)};\n  font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n  margin-top: ${(props) => (props?.size === 'small' ? `0px` : props?.size === 'large' ? '16px' : '4px')};\n  margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  display: flex;\n  flex-direction: row;\n  padding: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '16px' : '12px')};\n  border-radius: 2px;\n\n  span {\n    display: block;\n    width: 80%;\n    margin-left: 8px;\n    color: ${(props) => getNoteMessageColor(props.state)};\n  }\n`;\n\nexport const ModalBody = styled.section<{ size?: string }>`\n  > :first-child {\n    margin-top: 24px;\n  }\n\n  > :last-child {\n    margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  }\n\n  p: first-of-type {\n    padding-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  }\n`;\n\nexport const ModalFooter = styled.section<{ size?: Size }>`\n  margin-top: ${(props) => (props?.size === Size.Small ? `20px` : props?.size === Size.Large ? '28px' : '24px')};\n  display: flex;\n  justify-content: flex-end;\n\n  gap: ${(props) => (props?.size === 'large' ? `16px` : '8px')};\n\n  .footer-action {\n    order: -1;\n    margin-right: auto;\n    display: flex;\n    align-items: center;\n    font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n    gap: ${(props) => (props?.size === Size.Large ? `8px` : props?.size === Size.Small ? '4px' : '6px')};\n  }\n\n  .footer-action.note {\n    color: ${COLORS.neutral_600};\n  }\n`;\n\nexport const getBackgroundColor = (state: string) => {\n  switch (state) {\n    case 'positive':\n      return COLORS.correct_100;\n    case 'warning':\n      return COLORS.warning_100;\n    case 'critical':\n      return COLORS.critical_100;\n    default:\n      return COLORS.primary_100;\n  }\n};\n\nexport const getNoteMessageColor = (state: string) => {\n  switch (state) {\n    case 'positive':\n      return COLORS.correct_700;\n    case 'warning':\n      return COLORS.warning_700;\n    case 'critical':\n      return COLORS.critical_700;\n    default:\n      return COLORS.primary_700;\n  }\n};\n"],"file":"ModalStyles.js"}

package/dist/js/Tooltips/TooltipStyles.d.ts

@@ -6,5 +6,7 @@ export declare const Tooltip: import("styled-components").StyledComponent<"div",
     align?: 'start' | 'end' | 'center' | undefined;
     position?: 'top' | 'right' | 'bottom' | 'left' | undefined;
 }, never>;
-export declare const TooltipTrigger: import("styled-components").FlattenSimpleInterpolation;
-export declare const TooltipContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TooltipTrigger: (delay?: string) => import("styled-components").FlattenSimpleInterpolation;
+export declare const TooltipContainer: import("styled-components").StyledComponent<"div", any, {
+    delay?: string;
+}, never>;

package/dist/js/Tooltips/TooltipStyles.js

@@ -79,10 +79,16 @@ Tooltip.defaultProps = {
   align: 'center',
   position: 'bottom'
 };
-var TooltipTrigger = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &:hover ", ", &:focus-within ", ", &:focus ", " {\n    opacity: 1;\n    transition: 0.5s;\n    transition-delay: 1s;\n  }\n"])), Tooltip, Tooltip, Tooltip);
+
+var TooltipTrigger = function TooltipTrigger(delay) {
+  return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &:hover ", ", &:focus-within ", ", &:focus ", " {\n    opacity: 1;\n    transition: 0.5s;\n    transition-delay: ", ";\n  }\n"])), Tooltip, Tooltip, Tooltip, delay !== null && delay !== void 0 ? delay : '1s');
+};
+
 exports.TooltipTrigger = TooltipTrigger;
 
-var TooltipContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inline-block;\n  position: relative;\n\n  ", "\n"])), TooltipTrigger);
+var TooltipContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inline-block;\n  position: relative;\n\n  ", "\n"])), function (props) {
+  return TooltipTrigger(props.delay);
+});
 
 exports.TooltipContainer = TooltipContainer;
 //# sourceMappingURL=TooltipStyles.js.map

package/dist/js/Tooltips/TooltipStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tooltips/TooltipStyles.tsx"],"names":["distanceToEdge","size","Size","XSmall","Small","Tooltip","styled","div","props","Medium","ComponentTextStyle","Regular","COLORS","white","align","BOXSHADOWS","BOXSHADOW_L2","height","primary_800","Z_INDEXES","tooltip","position","withArrow","defaultProps","TooltipTrigger","css","TooltipContainer"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { Size } from '../types';\nimport { BOXSHADOWS, COLORS, ComponentTextStyle } from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst distanceToEdge = (size: Size | undefined) => {\n  return size == Size.XSmall ? '8px' : (!size || size == Size.Small) ? '12px' : '16px';\n}\n\nexport const Tooltip = styled.div<{\n  withArrow?: boolean;\n  size?: Size;\n  height?: string;\n  align?: 'start' | 'end' | 'center' | undefined;\n  position?: 'top' | 'right' | 'bottom' | 'left' | undefined;\n}>`\n\n    pointer-events: none;\n    ${props => (props.size == Size.Small || props.size != Size.Medium ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.size == Size.XSmall  ? ComponentXSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.size == Size.Medium ? ComponentMStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.align == 'center' ? 'text-align: center;' : '')}\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n    \n    padding: ${props => props.size == Size.XSmall ? '4px 8px' : props.size == Size.Medium ? '8px 12px' : '6px 10px'};\n    border-radius: 2px;\n    width: max-content;\n    height: ${props => props.height};\n    max-width: 34em;\n    background: ${COLORS.primary_800};\n    position: absolute; \n    opacity: 0; \n    z-index: ${Z_INDEXES.tooltip};\n    ${props => (props.position == 'top' ? 'bottom: 110%;' : props.position == 'bottom' ? 'top: 110%;' : '')}\n\n    ${props => (props.position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : '')}\n    ${props => (props.position == 'right' ? 'bottom: 50%;left: 110%; transform: translateY(50%);' : '')}\n            \n    ${props =>\n      props.position == 'left' || props.position == 'right'\n        ? ''\n        : props.align == 'start'\n        ? 'left: 0%;'\n        : props.align == 'end'\n        ? 'right: 0%;'\n        : 'left: 50%; transform: translateX(-50%);'}\n\n\n&::after {\n    ${props => (!props.withArrow ? 'display: none;' : '')}\n    content: \"\";\n    position: absolute;\n    ${props => (props.position == 'top' ? 'top: 100%;' : props.position == 'bottom' ? 'bottom: 100%;' : '')}\n    \n    ${props => (props.position == 'right' ? 'right: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n    ${props => (props.position == 'left' ? 'left: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n\n    ${props =>\n      props.position == 'left' || props.position == 'right' ? '' : \n      props.align == 'start' ? `left: ${distanceToEdge(props.size)};` : props.align == 'end' ? `right: ${distanceToEdge(props.size)};` : 'left: 50%;'}\n\n    ${props => (props.position == 'left' ? '' : 'margin-left: -5px;')}\n    margin: -0.5px;\n    border-width: 4px;\n    border-style: solid;\n    border-color: ${props => (props.position == 'top' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'right' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'bottom' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'left' ? COLORS.primary_800 : 'transparent')};\n  }\n`;\n\nTooltip.defaultProps = {\n  withArrow: false,\n  size: Size.Small,\n  height: 'auto',\n  align: 'center',\n  position: 'bottom'\n}\n\nexport const TooltipTrigger = css`\n  &:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {\n    opacity: 1;\n    transition: 0.5s;\n    transition-delay: 1s;\n  }\n`;\n\nexport const TooltipContainer = styled.div`\n  display: inline-block;\n  position: relative;\n\n  ${TooltipTrigger}\n`;\n"],"file":"TooltipStyles.js"}
+{"version":3,"sources":["../../../src/Tooltips/TooltipStyles.tsx"],"names":["distanceToEdge","size","Size","XSmall","Small","Tooltip","styled","div","props","Medium","ComponentTextStyle","Regular","COLORS","white","align","BOXSHADOWS","BOXSHADOW_L2","height","primary_800","Z_INDEXES","tooltip","position","withArrow","defaultProps","TooltipTrigger","delay","css","TooltipContainer"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { Size } from '../types';\nimport { BOXSHADOWS, COLORS, ComponentTextStyle } from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst distanceToEdge = (size: Size | undefined) => {\n  return size == Size.XSmall ? '8px' : (!size || size == Size.Small) ? '12px' : '16px';\n}\n\nexport const Tooltip = styled.div<{\n  withArrow?: boolean;\n  size?: Size;\n  height?: string;\n  align?: 'start' | 'end' | 'center' | undefined;\n  position?: 'top' | 'right' | 'bottom' | 'left' | undefined;\n}>`\n\n    pointer-events: none;\n    ${props => (props.size == Size.Small || props.size != Size.Medium ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.size == Size.XSmall  ? ComponentXSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.size == Size.Medium ? ComponentMStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.align == 'center' ? 'text-align: center;' : '')}\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n    \n    padding: ${props => props.size == Size.XSmall ? '4px 8px' : props.size == Size.Medium ? '8px 12px' : '6px 10px'};\n    border-radius: 2px;\n    width: max-content;\n    height: ${props => props.height};\n    max-width: 34em;\n    background: ${COLORS.primary_800};\n    position: absolute; \n    opacity: 0; \n    z-index: ${Z_INDEXES.tooltip};\n    ${props => (props.position == 'top' ? 'bottom: 110%;' : props.position == 'bottom' ? 'top: 110%;' : '')}\n\n    ${props => (props.position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : '')}\n    ${props => (props.position == 'right' ? 'bottom: 50%;left: 110%; transform: translateY(50%);' : '')}\n            \n    ${props =>\n      props.position == 'left' || props.position == 'right'\n        ? ''\n        : props.align == 'start'\n        ? 'left: 0%;'\n        : props.align == 'end'\n        ? 'right: 0%;'\n        : 'left: 50%; transform: translateX(-50%);'}\n\n\n&::after {\n    ${props => (!props.withArrow ? 'display: none;' : '')}\n    content: \"\";\n    position: absolute;\n    ${props => (props.position == 'top' ? 'top: 100%;' : props.position == 'bottom' ? 'bottom: 100%;' : '')}\n    \n    ${props => (props.position == 'right' ? 'right: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n    ${props => (props.position == 'left' ? 'left: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n\n    ${props =>\n      props.position == 'left' || props.position == 'right' ? '' : \n      props.align == 'start' ? `left: ${distanceToEdge(props.size)};` : props.align == 'end' ? `right: ${distanceToEdge(props.size)};` : 'left: 50%;'}\n\n    ${props => (props.position == 'left' ? '' : 'margin-left: -5px;')}\n    margin: -0.5px;\n    border-width: 4px;\n    border-style: solid;\n    border-color: ${props => (props.position == 'top' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'right' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'bottom' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'left' ? COLORS.primary_800 : 'transparent')};\n  }\n`;\n\nTooltip.defaultProps = {\n  withArrow: false,\n  size: Size.Small,\n  height: 'auto',\n  align: 'center',\n  position: 'bottom'\n}\n\nexport const TooltipTrigger = (delay?: string) => css`\n  &:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {\n    opacity: 1;\n    transition: 0.5s;\n    transition-delay: ${delay ?? '1s'};\n  }\n`;\n\nexport const TooltipContainer = styled.div<{delay?: string}>`\n  display: inline-block;\n  position: relative;\n\n  ${props => TooltipTrigger(props.delay)}\n`;\n"],"file":"TooltipStyles.js"}

package/dist/js/Tooltips/TooltipTypes.d.ts

@@ -7,6 +7,7 @@ export interface TooltipProps {
     withArrow?: boolean;
     width?: string;
     size?: Size;
+    delay?: string;
     height?: string;
     align?: 'start' | 'end' | 'center' | undefined;
     position?: 'top' | 'right' | 'bottom' | 'left' | undefined;

package/dist/js/Tooltips/TooltipTypes.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tooltips/TooltipTypes.tsx"],"names":[],"mappings":";;;;;;AAEA;AACA;AACA;AAUG","sourcesContent":["import { Size } from \"../types\";\n\n/**\n * Types for the table.\n */\n export interface TooltipProps {\n    label?: string;\n    withArrow?: boolean;\n    width?: string;\n    size?: Size;\n    height?: string;\n    align? : 'start' | 'end' | 'center' | undefined;\n    position? : 'top' | 'right' | 'bottom' | 'left' | undefined;\n    children?: React.ReactNode;\n  };\n  "],"file":"TooltipTypes.js"}
+{"version":3,"sources":["../../../src/Tooltips/TooltipTypes.tsx"],"names":[],"mappings":";;;;;;AAEA;AACA;AACA;AAWG","sourcesContent":["import { Size } from \"../types\";\n\n/**\n * Types for the table.\n */\n export interface TooltipProps {\n    label?: string;\n    withArrow?: boolean;\n    width?: string;\n    size?: Size;\n    delay?: string;\n    height?: string;\n    align? : 'start' | 'end' | 'center' | undefined;\n    position? : 'top' | 'right' | 'bottom' | 'left' | undefined;\n    children?: React.ReactNode;\n  };\n  "],"file":"TooltipTypes.js"}

package/dist/js/Tooltips/TooltipWrapper.d.ts

@@ -1,3 +1,3 @@
 import { TooltipProps } from './TooltipTypes';
-declare const TooltipWrapper: ({ label, children, withArrow, size, height, align, position }: TooltipProps) => JSX.Element;
+declare const TooltipWrapper: ({ label, children, withArrow, size, height, delay, align, position }: TooltipProps) => JSX.Element;
 export default TooltipWrapper;

package/dist/js/Tooltips/TooltipWrapper.js

@@ -25,11 +25,15 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
       size = _ref$size === void 0 ? _.Size.Small : _ref$size,
       _ref$height = _ref.height,
       height = _ref$height === void 0 ? 'auto' : _ref$height,
+      _ref$delay = _ref.delay,
+      delay = _ref$delay === void 0 ? undefined : _ref$delay,
       _ref$align = _ref.align,
       align = _ref$align === void 0 ? 'center' : _ref$align,
       _ref$position = _ref.position,
       position = _ref$position === void 0 ? 'bottom' : _ref$position;
-  return /*#__PURE__*/React.createElement(_TooltipStyles.TooltipContainer, null, /*#__PURE__*/React.createElement(_TooltipStyles.Tooltip, {
+  return /*#__PURE__*/React.createElement(_TooltipStyles.TooltipContainer, {
+    delay: delay
+  }, /*#__PURE__*/React.createElement(_TooltipStyles.Tooltip, {
     align: align,
     height: height,
     size: size,

package/dist/js/Tooltips/TooltipWrapper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tooltips/TooltipWrapper.tsx"],"names":["TooltipWrapper","label","children","withArrow","size","Size","Small","height","align","position"],"mappings":";;;;;;;;;AACA;;AAIA;;AACA;;;;;;AAEC,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,OAMoB;AAAA,MALzCC,KAKyC,QALzCA,KAKyC;AAAA,MALlCC,QAKkC,QALlCA,QAKkC;AAAA,MAJzCC,SAIyC,QAJzCA,SAIyC;AAAA,uBAHzCC,IAGyC;AAAA,MAHzCA,IAGyC,0BAHlCC,OAAKC,KAG6B;AAAA,yBAFzCC,MAEyC;AAAA,MAFzCA,MAEyC,4BAFhC,MAEgC;AAAA,wBADzCC,KACyC;AAAA,MADzCA,KACyC,2BADjC,QACiC;AAAA,2BAAzCC,QAAyC;AAAA,MAAzCA,QAAyC,8BAA9B,QAA8B;AAExC,sBAAO,oBAAC,+BAAD,qBACC,oBAAC,sBAAD;AAAS,IAAA,KAAK,EAAED,KAAhB;AACG,IAAA,MAAM,EAAED,MADX;AAEG,IAAA,IAAI,EAAEH,IAFT;AAGG,IAAA,SAAS,EAAED,SAHd;AAIG,IAAA,QAAQ,EAAEM;AAJb,KAKIR,KALJ,CADD,EAQDC,QARC,CAAP;AAUF,CAlBD;;eAoBeF,c","sourcesContent":["\nimport * as React from 'react';\n\nimport { TooltipProps } from './TooltipTypes';\n\nimport { TooltipContainer, Tooltip } from './TooltipStyles';\nimport { Size } from '..';\n \n const TooltipWrapper = ({\n   label, children,\n   withArrow,\n   size = Size.Small,\n   height = 'auto',\n   align = 'center', \n   position = 'bottom' } : TooltipProps) => {\n \n    return <TooltipContainer>\n            <Tooltip align={align} \n               height={height} \n               size={size}\n               withArrow={withArrow} \n               position={position}>\n               {label}\n            </Tooltip>\n         {children}\n       </TooltipContainer>;\n };\n \n export default TooltipWrapper;"],"file":"TooltipWrapper.js"}
+{"version":3,"sources":["../../../src/Tooltips/TooltipWrapper.tsx"],"names":["TooltipWrapper","label","children","withArrow","size","Size","Small","height","delay","undefined","align","position"],"mappings":";;;;;;;;;AACA;;AAIA;;AACA;;;;;;AAEC,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,OAOoB;AAAA,MANzCC,KAMyC,QANzCA,KAMyC;AAAA,MANlCC,QAMkC,QANlCA,QAMkC;AAAA,MALzCC,SAKyC,QALzCA,SAKyC;AAAA,uBAJzCC,IAIyC;AAAA,MAJzCA,IAIyC,0BAJlCC,OAAKC,KAI6B;AAAA,yBAHzCC,MAGyC;AAAA,MAHzCA,MAGyC,4BAHhC,MAGgC;AAAA,wBAFzCC,KAEyC;AAAA,MAFzCA,KAEyC,2BAFjCC,SAEiC;AAAA,wBADzCC,KACyC;AAAA,MADzCA,KACyC,2BADjC,QACiC;AAAA,2BAAzCC,QAAyC;AAAA,MAAzCA,QAAyC,8BAA9B,QAA8B;AAExC,sBAAO,oBAAC,+BAAD;AAAkB,IAAA,KAAK,EAAEH;AAAzB,kBACC,oBAAC,sBAAD;AAAS,IAAA,KAAK,EAAEE,KAAhB;AACG,IAAA,MAAM,EAAEH,MADX;AAEG,IAAA,IAAI,EAAEH,IAFT;AAGG,IAAA,SAAS,EAAED,SAHd;AAIG,IAAA,QAAQ,EAAEQ;AAJb,KAKIV,KALJ,CADD,EAQDC,QARC,CAAP;AAUF,CAnBD;;eAqBeF,c","sourcesContent":["\nimport * as React from 'react';\n\nimport { TooltipProps } from './TooltipTypes';\n\nimport { TooltipContainer, Tooltip } from './TooltipStyles';\nimport { Size } from '..';\n \n const TooltipWrapper = ({\n   label, children,\n   withArrow,\n   size = Size.Small,\n   height = 'auto',\n   delay = undefined,\n   align = 'center', \n   position = 'bottom' } : TooltipProps) => {\n \n    return <TooltipContainer delay={delay}>\n            <Tooltip align={align}\n               height={height}\n               size={size}\n               withArrow={withArrow}\n               position={position}>\n               {label}\n            </Tooltip>\n         {children}\n       </TooltipContainer>;\n };\n \n export default TooltipWrapper;"],"file":"TooltipWrapper.js"}

package/dist/js/icons/index.js

@@ -48,7 +48,7 @@ var getSize = function getSize(size) {
 
 exports.getSize = getSize;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  ", "\n"])), _TooltipStyles.TooltipTrigger);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  ", "\n"])), (0, _TooltipStyles.TooltipTrigger)());
 
 var IconComponent = _styledComponents.default.svg(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: ", ";\n  height: ", ";\n"])), function (props) {
   return props.width;

package/dist/js/icons/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/icons/index.tsx"],"names":["getSize","size","indexOf","Container","styled","div","TooltipTrigger","IconComponent","svg","props","width","height","renderIcon","children","viewBox","tooltip","className","BaseIcon","SystemIcon","ContentIcon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Tooltip, TooltipTrigger } from '../Tooltips/TooltipStyles';\nimport * as ContentIcons from './contenticons/ContentIcons';\nimport * as SystemIcons from './systemicons/SystemIcons';\n\nexport type BaseProps = {\n  className?: string;\n  children?: any;\n  size?: string;\n  viewBox?: string;\n  tooltip?: string;\n};\n\nexport type IconProps = {\n  label?: string;\n  className?: string;\n  color?: string;\n  size?: string;\n  viewBox?: string;\n};\n\n/**\n * Retrieves the size of the icon.\n * @param size - Original size which was passed to the icon.\n * @returns Numeric value indicating the size of the icon.\n */\nexport const getSize = (size: string) => {\n  if (typeof size === 'string' && size.indexOf('px') === -1) {\n    return `${size}px`;\n  } else {\n    return size;\n  }\n};\n\nconst Container = styled.div`\n  position: relative;\n  ${TooltipTrigger}\n`;\nconst IconComponent = styled.svg<{ width: string; height: string }>`\n  width: ${props => props.width};\n  height: ${props => props.height};\n`;\n\nconst renderIcon = (children: React.ReactNode, width: string, height: string, viewBox: string, tooltip?: string, className?: string) => {\n  return tooltip ? (\n    <Container>\n      <IconComponent className={className} width={width} height={height} viewBox={viewBox} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        {children}\n      </IconComponent>\n      <Tooltip>{tooltip}</Tooltip>\n    </Container>\n  ) : (\n    <IconComponent className={className} width={width} height={height} viewBox={viewBox} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      {children}\n    </IconComponent>\n  );\n};\n\nexport const BaseIcon: React.FunctionComponent<BaseProps> = ({ className, children, size = '16px', viewBox = '0 0 25 25', tooltip = '' }) => {\n  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);\n};\n\nexport const SystemIcon: React.FunctionComponent<BaseProps> = ({ className, children, size = '24px', viewBox = '0 0 24 24', tooltip = '' }) => {\n  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);\n};\n\nexport const ContentIcon: React.FunctionComponent<BaseProps> = ({ className, children, size = '48px', viewBox = '0 0 48 48', tooltip = '' }) => {\n  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);\n};\n\nexport { SystemIcons };\nexport { ContentIcons };\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/icons/index.tsx"],"names":["getSize","size","indexOf","Container","styled","div","IconComponent","svg","props","width","height","renderIcon","children","viewBox","tooltip","className","BaseIcon","SystemIcon","ContentIcon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Tooltip, TooltipTrigger } from '../Tooltips/TooltipStyles';\nimport * as ContentIcons from './contenticons/ContentIcons';\nimport * as SystemIcons from './systemicons/SystemIcons';\n\nexport type BaseProps = {\n  className?: string;\n  children?: any;\n  size?: string;\n  viewBox?: string;\n  tooltip?: string;\n};\n\nexport type IconProps = {\n  label?: string;\n  className?: string;\n  color?: string;\n  size?: string;\n  viewBox?: string;\n};\n\n/**\n * Retrieves the size of the icon.\n * @param size - Original size which was passed to the icon.\n * @returns Numeric value indicating the size of the icon.\n */\nexport const getSize = (size: string) => {\n  if (typeof size === 'string' && size.indexOf('px') === -1) {\n    return `${size}px`;\n  } else {\n    return size;\n  }\n};\n\nconst Container = styled.div`\n  position: relative;\n  ${TooltipTrigger()}\n`;\nconst IconComponent = styled.svg<{ width: string; height: string }>`\n  width: ${props => props.width};\n  height: ${props => props.height};\n`;\n\nconst renderIcon = (children: React.ReactNode, width: string, height: string, viewBox: string, tooltip?: string, className?: string) => {\n  return tooltip ? (\n    <Container>\n      <IconComponent className={className} width={width} height={height} viewBox={viewBox} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        {children}\n      </IconComponent>\n      <Tooltip>{tooltip}</Tooltip>\n    </Container>\n  ) : (\n    <IconComponent className={className} width={width} height={height} viewBox={viewBox} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      {children}\n    </IconComponent>\n  );\n};\n\nexport const BaseIcon: React.FunctionComponent<BaseProps> = ({ className, children, size = '16px', viewBox = '0 0 25 25', tooltip = '' }) => {\n  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);\n};\n\nexport const SystemIcon: React.FunctionComponent<BaseProps> = ({ className, children, size = '24px', viewBox = '0 0 24 24', tooltip = '' }) => {\n  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);\n};\n\nexport const ContentIcon: React.FunctionComponent<BaseProps> = ({ className, children, size = '48px', viewBox = '0 0 48 48', tooltip = '' }) => {\n  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);\n};\n\nexport { SystemIcons };\nexport { ContentIcons };\n"],"file":"index.js"}

package/dist/umd/Modals/ModalDialog.js

@@ -197,7 +197,8 @@
     };
 
     const ModalTootip = tooltip => {
-      return /*#__PURE__*/React.createElement(_Tooltips.TooltipWrapper, {
+      return /*#__PURE__*/React.createElement(_ModalStyles.ModalHoverModifier, null, /*#__PURE__*/React.createElement(_Tooltips.TooltipWrapper, {
+        delay: "0s",
         size: _types.Size.XSmall,
         align: "center",
         position: "top",
@@ -210,7 +211,7 @@
       }, /*#__PURE__*/React.createElement(_SystemIcons.Help, {
         size: "24px",
         color: _styles.COLORS.neutral_600
-      })));
+      }))));
     };
 
     const ModalCloseButton = onClick => {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Modals/ModalDialog.tsx"],"names":["isModalOpen","closeModalAndClearInput","title","topImage","buttons","tooltip","backButton","closeAction","submitAction","note","state","ModalDialog","getMinWidth","Size","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","ComponentTextStyle","Bold","ModalTootip","COLORS","neutral_600","ModalCloseButton","onClick","size","black","ModalBackButton","getLeftActionIconElement","icon","LeftFooterAction","leftFooterAction","action","order","marginRight","b","variant"],"mappings":";;;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCO,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,UAAME,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,WAAW,GAAIhB,OAAD,IAAqB;AACvC,aAAA,aACE,KAAA,CAAA,aAAA,CAAA,wBAAA,EAAA;AAAgB,QAAA,IAAI,EAAEQ,YAAtB,MAAA;AAAmC,QAAA,KAAK,EAAxC,QAAA;AAAkD,QAAA,QAAQ,EAA1D,KAAA;AAAiE,QAAA,SAAS,EAA1E,KAAA;AAAmF,QAAA,KAAK,EAAER;AAA1F,OAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAY,QAAA,OAAO,EAAnB,WAAA;AAAgC,QAAA,KAAK,EAArC,UAAA;AAAiD,QAAA,MAAM,EAAE,MAAM,CAAE;AAAjE,OAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,iBAAA,EAAA;AAAM,QAAA,IAAI,EAAV,MAAA;AAAkB,QAAA,KAAK,EAAEiB,eAAOC;AAAhC,OAAA,CADF,CADF,CADF;AADF,KAAA;;AAUA,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,EAAEH,eAAOK;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,EAAEF;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,MAAMpB,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,EAAEgB,eAAOK;AAAzC,SAAA,CADF,CADF,CADF;AAOD;AATH,KAAA;;AAYA,UAAME,wBAAwB,GAAIC,IAAD,IAAqB;AACpD,aAAA,aAAO,KAAK,CAAL,YAAA,CAAA,IAAA,EAA+C;AAAEJ,QAAAA,IAAI,EAAEA,IAAI,KAAKb,YAATa,KAAAA,GAAAA,MAAAA,GAA+BA,IAAI,KAAKb,YAATa,KAAAA,GAAAA,MAAAA,GAA+B;AAAtE,OAA/C,CAAP;AADF,KAAA;;AAIA,UAAMK,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,EAAEjB,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,EAAET;AAAhB,KAAA,EACGL,QAAQ,IAAA,aACP,KAAA,CAAA,aAAA,CAAA,8BAAA,EAAA;AAAmB,MAAA,IAAI,EAAvB,IAAA;AAA+B,MAAA,MAAM,EAAEY,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,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,wCAAA,EAAA;AAA6B,MAAA,aAAa,EAAE,CAAC,CAACV;AAA9C,KAAA,EACGsB,eADH,EAAA,EAEGJ,gBAAgB,CANzB,WAMyB,CAFnB,CAFF,CAFJ,EAAA,aAUE,KAAA,CAAA,aAAA,CAAA,8BAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,0BAAA,EAAA,IAAA,EACG,CAAA,QAAA,IAAaI,eADhB,EAAA,EAEG1B,KAAK,IAAIgB,UAAU,CAAA,KAAA,EAHxB,IAGwB,CAFtB,CADF,EAAA,aAKE,KAAA,CAAA,aAAA,CAAA,+BAAA,EAAA,IAAA,EACGb,OAAO,IAAIgB,WAAW,CADzB,OACyB,CADzB,EAEG,CAAA,QAAA,IAAaG,gBAAgB,CAjBpC,WAiBoC,CAFhC,CALF,CAVF,EAAA,aAqBE,KAAA,CAAA,aAAA,CAAA,sBAAA,EAAA;AAAW,MAAA,IAAI,EAAEE;AAAjB,KAAA,EArBF,QAqBE,CArBF,EAuBGjB,IAAI,IAAA,aAAI,KAAA,CAAA,aAAA,CAAA,oBAAA,EAAA;AAAW,MAAA,IAAI,EAAf,IAAA;AAAuB,MAAA,KAAK,EAA5B,KAAA;AAAqC,MAAA,IAAI,EAAEiB;AAA3C,KAAA,CAvBX,EAAA,aAyBE,KAAA,CAAA,aAAA,CAAA,wBAAA,EAAA;AAAa,MAAA,IAAI,EAAEA;AAAnB,KAAA,EACGM,gBAAgB,IAAID,gBAAgB,CADvC,gBACuC,CADvC,EAEG,OAAO,EAAP,GAAA,CAAa,CAAA,CAAA,EAAA,CAAA,KAAA,aACZ,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA;AAAQ,MAAA,GAAG,EAAEK,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,CAhChB,IA+BY,CADD,CAFH,CAzBF,CADF,CADF,CADF;AAnKK,GAAA;;;AAdLpC,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;;oBAgNF,W","sourcesContent":["import * as React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } from '../types';\nimport ModalContainer from './ModalContainer';\nimport {\n  BackButtonWrapper,\n  CloseButtonWrapper,\n  Column,\n  FlexContainer,\n  ModalBody,\n  ModalFooter,\n  ModalHeaderActions,\n  ModalHeaderActionsWithImage,\n  ModalTitleSection,\n  StyledModalHeader,\n} from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { TooltipWrapper } from '../Tooltips';\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { ReactNode } from 'react';\nimport { HyperLink } from '..';\n\ninterface NewModalProps {\n  size?: Size;\n  isModalOpen: boolean;\n  closeModalAndClearInput: any;\n  title?: string;\n  topImage?: any;\n  buttons?: ButtonAction[];\n  leftFooterAction?: LeftFooterAction;\n  tooltip?: string;\n  backButton?: () => void;\n  closeAction: () => void;\n  submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n  note?: string;\n  state?: string;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  topImage,\n  buttons,\n  leftFooterAction,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n  children,\n  note,\n  state,\n}) => {\n  const getMinWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '320px';\n      case Size.Large:\n        return '640px';\n      case Size.Medium:\n      default:\n        return '480px';\n    }\n  };\n\n  const getMaxWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '480px';\n      case Size.Large:\n        return '720px';\n      case Size.Medium:\n      default:\n        return '640px';\n    }\n  };\n\n  const getImageHeight = () => {\n    switch (size) {\n      case Size.Small:\n        return 160;\n      case Size.Medium:\n        return 200;\n      case Size.Large:\n        return 240;\n      default:\n        return 200;\n    }\n  };\n\n  const getMarginBottom = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px';\n      case Size.Medium:\n        return '24px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px';\n    }\n  };\n\n  const getPadding = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px 16px 8px';\n      case Size.Medium:\n        return '24px 24px 20px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px 24px 16px';\n    }\n  };\n\n  const ModalTitle = (title: string, size?: Size) => {\n    switch (size) {\n      case Size.Small:\n        return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n      case Size.Medium:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n      case Size.Large:\n        return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n      default:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n    }\n  };\n\n  const ModalTootip = (tooltip: string) => {\n    return (\n      <TooltipWrapper 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    );\n  };\n\n  const ModalCloseButton = (onClick: any) => {\n    return (\n      <CloseButtonWrapper hasImage={!!topImage} size={size}>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n          <Close size=\"24px\" color={COLORS.black} />\n        </IconButton>\n      </CloseButtonWrapper>\n    );\n  };\n\n  const ModalBackButton = () => {\n    if (backButton) {\n      return (\n        <BackButtonWrapper hasImage={!!topImage} size={size}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n            <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n          </IconButton>\n        </BackButtonWrapper>\n      );\n    }\n  };\n\n  const getLeftActionIconElement = (icon: ReactNode) => {\n    return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n  };\n\n  const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n    const { text, actionType, disabled, icon, action } = leftFooterAction;\n    switch (actionType) {\n      case 'button':\n        return (\n          <Button\n            id={'left-action-button'}\n            type={(leftFooterAction as LeftFooterButton)?.type}\n            disabled={disabled}\n            loading={(leftFooterAction as LeftFooterButton)?.loading}\n            icon={icon}\n            size={size}\n            onClick={action}\n            variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n            style={{ order: -1, marginRight: 'auto' }}>\n            {text}\n          </Button>\n        );\n      case 'hyperlink':\n        return (\n          <HyperLink id=\"left-action-hyperlink\" className=\"footer-action\" href={(leftFooterAction as LeftFooterHyperlink).href} disabled={disabled} variant=\"default\">\n            {icon && getLeftActionIconElement(icon)}\n            {text}\n          </HyperLink>\n        );\n      case 'note':\n        return (\n          <div className=\"footer-action note\">\n            {icon && getLeftActionIconElement(icon)}\n            <span>{text}</span>\n          </div>\n        );\n    }\n  };\n\n  return (\n    <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()}>\n      <Column>\n        <form onSubmit={submitAction}>\n          {topImage && (\n            <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n              <img src={topImage} alt=\"Modal top\" />\n              <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n                {ModalBackButton()}\n                {ModalCloseButton(closeAction)}\n              </ModalHeaderActionsWithImage>\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            <FlexContainer>\n              {!topImage && ModalBackButton()}\n              {title && ModalTitle(title, size)}\n            </FlexContainer>\n            <ModalHeaderActions>\n              {tooltip && ModalTootip(tooltip)}\n              {!topImage && ModalCloseButton(closeAction)}\n            </ModalHeaderActions>\n          </ModalTitleSection>\n\n          <ModalBody size={size}>{children}</ModalBody>\n\n          {note && <ModalNote note={note} state={state} size={size} />}\n\n          <ModalFooter size={size}>\n            {leftFooterAction && LeftFooterAction(leftFooterAction)}\n            {buttons?.map((b, i) => (\n              <Button key={b.id || i} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n                {b.text}\n              </Button>\n            ))}\n          </ModalFooter>\n        </form>\n      </Column>\n    </ModalContainer>\n  );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}
+{"version":3,"sources":["../../../src/Modals/ModalDialog.tsx"],"names":["isModalOpen","closeModalAndClearInput","title","topImage","buttons","tooltip","backButton","closeAction","submitAction","note","state","ModalDialog","getMinWidth","Size","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","ComponentTextStyle","Bold","ModalTootip","COLORS","neutral_600","ModalCloseButton","onClick","size","black","ModalBackButton","getLeftActionIconElement","icon","LeftFooterAction","leftFooterAction","action","order","marginRight","b","variant"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } from '../types';\nimport ModalContainer from './ModalContainer';\nimport {\n  BackButtonWrapper,\n  CloseButtonWrapper,\n  Column,\n  FlexContainer,\n  ModalBody,\n  ModalFooter,\n  ModalHeaderActions,\n  ModalHeaderActionsWithImage,\n  ModalTitleSection,\n  StyledModalHeader,\n  ModalHoverModifier\n} from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { TooltipWrapper } from '../Tooltips';\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { ReactNode } from 'react';\nimport { HyperLink } from '..';\n\ninterface NewModalProps {\n  size?: Size;\n  isModalOpen: boolean;\n  closeModalAndClearInput: any;\n  title?: string;\n  topImage?: any;\n  buttons?: ButtonAction[];\n  leftFooterAction?: LeftFooterAction;\n  tooltip?: string;\n  backButton?: () => void;\n  closeAction: () => void;\n  submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n  note?: string;\n  state?: string;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  topImage,\n  buttons,\n  leftFooterAction,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n  children,\n  note,\n  state,\n}) => {\n  const getMinWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '320px';\n      case Size.Large:\n        return '640px';\n      case Size.Medium:\n      default:\n        return '480px';\n    }\n  };\n\n  const getMaxWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '480px';\n      case Size.Large:\n        return '720px';\n      case Size.Medium:\n      default:\n        return '640px';\n    }\n  };\n\n  const getImageHeight = () => {\n    switch (size) {\n      case Size.Small:\n        return 160;\n      case Size.Medium:\n        return 200;\n      case Size.Large:\n        return 240;\n      default:\n        return 200;\n    }\n  };\n\n  const getMarginBottom = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px';\n      case Size.Medium:\n        return '24px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px';\n    }\n  };\n\n  const getPadding = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px 16px 8px';\n      case Size.Medium:\n        return '24px 24px 20px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px 24px 16px';\n    }\n  };\n\n  const ModalTitle = (title: string, size?: Size) => {\n    switch (size) {\n      case Size.Small:\n        return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n      case Size.Medium:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n      case Size.Large:\n        return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n      default:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n    }\n  };\n\n  const ModalTootip = (tooltip: string) => {\n    return (\n      <ModalHoverModifier>\n        <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"top\" withArrow={false} label={tooltip}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => {}}>\n            <Help size=\"24px\" color={COLORS.neutral_600} />\n          </IconButton>\n        </TooltipWrapper>\n      </ModalHoverModifier>\n    );\n  };\n\n  const ModalCloseButton = (onClick: any) => {\n    return (\n      <CloseButtonWrapper hasImage={!!topImage} size={size}>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n          <Close size=\"24px\" color={COLORS.black} />\n        </IconButton>\n      </CloseButtonWrapper>\n    );\n  };\n\n  const ModalBackButton = () => {\n    if (backButton) {\n      return (\n        <BackButtonWrapper hasImage={!!topImage} size={size}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n            <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n          </IconButton>\n        </BackButtonWrapper>\n      );\n    }\n  };\n\n  const getLeftActionIconElement = (icon: ReactNode) => {\n    return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n  };\n\n  const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n    const { text, actionType, disabled, icon, action } = leftFooterAction;\n    switch (actionType) {\n      case 'button':\n        return (\n          <Button\n            id={'left-action-button'}\n            type={(leftFooterAction as LeftFooterButton)?.type}\n            disabled={disabled}\n            loading={(leftFooterAction as LeftFooterButton)?.loading}\n            icon={icon}\n            size={size}\n            onClick={action}\n            variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n            style={{ order: -1, marginRight: 'auto' }}>\n            {text}\n          </Button>\n        );\n      case 'hyperlink':\n        return (\n          <HyperLink id=\"left-action-hyperlink\" className=\"footer-action\" href={(leftFooterAction as LeftFooterHyperlink).href} disabled={disabled} variant=\"default\">\n            {icon && getLeftActionIconElement(icon)}\n            {text}\n          </HyperLink>\n        );\n      case 'note':\n        return (\n          <div className=\"footer-action note\">\n            {icon && getLeftActionIconElement(icon)}\n            <span>{text}</span>\n          </div>\n        );\n    }\n  };\n\n  return (\n    <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()}>\n      <Column>\n        <form onSubmit={submitAction}>\n          {topImage && (\n            <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n              <img src={topImage} alt=\"Modal top\" />\n              <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n                {ModalBackButton()}\n                {ModalCloseButton(closeAction)}\n              </ModalHeaderActionsWithImage>\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            <FlexContainer>\n              {!topImage && ModalBackButton()}\n              {title && ModalTitle(title, size)}\n            </FlexContainer>\n            <ModalHeaderActions>\n              {tooltip && ModalTootip(tooltip)}\n              {!topImage && ModalCloseButton(closeAction)}\n            </ModalHeaderActions>\n          </ModalTitleSection>\n\n          <ModalBody size={size}>{children}</ModalBody>\n\n          {note && <ModalNote note={note} state={state} size={size} />}\n\n          <ModalFooter size={size}>\n            {leftFooterAction && LeftFooterAction(leftFooterAction)}\n            {buttons?.map((b, i) => (\n              <Button key={b.id || i} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n                {b.text}\n              </Button>\n            ))}\n          </ModalFooter>\n        </form>\n      </Column>\n    </ModalContainer>\n  );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}

package/dist/umd/Modals/ModalStyles.js

@@ -16,7 +16,7 @@
   Object.defineProperty(exports, "__esModule", {
     value: true
   });
-  exports.getNoteMessageColor = exports.getBackgroundColor = exports.ModalFooter = exports.ModalBody = exports.ModalNoteSection = exports.ModalTitle = exports.BackButtonWrapper = exports.CloseButtonWrapper = exports.FlexContainer = exports.ModalHeaderActions = exports.ModalHeaderActionsWithImage = exports.ModalTitleSection = exports.Column = exports.StyledModalHeader = exports.ModalHeader = undefined;
+  exports.getNoteMessageColor = exports.getBackgroundColor = exports.ModalFooter = exports.ModalBody = exports.ModalNoteSection = exports.ModalTitle = exports.BackButtonWrapper = exports.CloseButtonWrapper = exports.ModalHoverModifier = exports.FlexContainer = exports.ModalHeaderActions = exports.ModalHeaderActionsWithImage = exports.ModalTitleSection = exports.Column = exports.StyledModalHeader = exports.ModalHeader = undefined;
 
   var _styledComponents2 = _interopRequireDefault(_styledComponents);
 
@@ -77,6 +77,11 @@
 `;
   const FlexContainer = exports.FlexContainer = _styledComponents2.default.div`
   display: flex;
+`;
+  const ModalHoverModifier = exports.ModalHoverModifier = _styledComponents2.default.div`
+  button:hover {
+    cursor: help !important;
+  }
 `;
   const CloseButtonWrapper = exports.CloseButtonWrapper = _styledComponents2.default.div`
   button {

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

package/dist/umd/Tooltips/TooltipStyles.js

@@ -84,18 +84,20 @@
     align: 'center',
     position: 'bottom'
   };
-  const TooltipTrigger = exports.TooltipTrigger = _styledComponents.css`
+
+  const TooltipTrigger = exports.TooltipTrigger = delay => _styledComponents.css`
   &:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {
     opacity: 1;
     transition: 0.5s;
-    transition-delay: 1s;
+    transition-delay: ${delay ?? '1s'};
   }
 `;
+
   const TooltipContainer = exports.TooltipContainer = _styledComponents2.default.div`
   display: inline-block;
   position: relative;
 
-  ${TooltipTrigger}
+  ${props => TooltipTrigger(props.delay)}
 `;
 });
 //# sourceMappingURL=TooltipStyles.js.map

package/dist/umd/Tooltips/TooltipStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tooltips/TooltipStyles.tsx"],"names":["distanceToEdge","size","Size","Tooltip","styled","div","props","ComponentSStyling","ComponentTextStyle","COLORS","ComponentXSStyling","ComponentMStyling","BOXSHADOWS","BOXSHADOW_L2","height","primary_800","Z_INDEXES","tooltip","withArrow","align","position","TooltipTrigger","css","TooltipContainer"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,QAAMA,cAAc,GAAIC,IAAD,IAA4B;AACjD,WAAOA,IAAI,IAAIC,YAARD,MAAAA,GAAAA,KAAAA,GAA+B,CAAA,IAAA,IAASA,IAAI,IAAIC,YAAlB,KAAC,GAAD,MAAC,GAAtC,MAAA;AADF,GAAA;;AAIO,QAAMC,OAAO,WAAPA,OAAO,GAAGC,2BAAOC,GAM3B;AACH;AACA;AACA,MAAMC,KAAK,IAAKA,KAAK,CAALA,IAAAA,IAAcJ,YAAdI,KAAAA,IAA4BA,KAAK,CAALA,IAAAA,IAAcJ,YAA1CI,MAAAA,GAAwDC,mCAAkBC,2BAAD,OAAjBD,EAA8CE,eAAtGH,KAAwDC,CAAxDD,GAAsH,EAAI;AAC1I,MAAMA,KAAK,IAAKA,KAAK,CAALA,IAAAA,IAAcJ,YAAdI,MAAAA,GAA6BI,oCAAmBF,2BAAD,OAAlBE,EAA+CD,eAA5EH,KAA6BI,CAA7BJ,GAA4F,EAAI;AAChH,MAAMA,KAAK,IAAKA,KAAK,CAALA,IAAAA,IAAcJ,YAAdI,MAAAA,GAA4BK,mCAAkBH,2BAAD,OAAjBG,EAA8CF,eAA1EH,KAA4BK,CAA5BL,GAA0F,EAAI;AAC9G,MAAMA,KAAK,IAAKA,KAAK,CAALA,KAAAA,IAAAA,QAAAA,GAAAA,qBAAAA,GAAkD,EAAI;AACtE,kBAAkBM,mBAAWC,YAAa;AAC1C;AACA,eAAeP,KAAK,IAAIA,KAAK,CAALA,IAAAA,IAAcJ,YAAdI,MAAAA,GAAAA,SAAAA,GAAwCA,KAAK,CAALA,IAAAA,IAAcJ,YAAdI,MAAAA,GAAAA,UAAAA,GAAyC,UAAW;AACpH;AACA;AACA,cAAcA,KAAK,IAAIA,KAAK,CAACQ,MAAO;AACpC;AACA,kBAAkBL,eAAOM,WAAY;AACrC;AACA;AACA,eAAeC,oBAAUC,OAAQ;AACjC,MAAMX,KAAK,IAAKA,KAAK,CAALA,QAAAA,IAAAA,KAAAA,GAAAA,eAAAA,GAA4CA,KAAK,CAALA,QAAAA,IAAAA,QAAAA,GAAAA,YAAAA,GAA4C,EAAI;AAC5G;AACA,MAAMA,KAAK,IAAKA,KAAK,CAALA,QAAAA,IAAAA,MAAAA,GAAAA,4DAAAA,GAA0F,EAAI;AAC9G,MAAMA,KAAK,IAAKA,KAAK,CAALA,QAAAA,IAAAA,OAAAA,GAAAA,qDAAAA,GAAoF,EAAI;AACxG;AACA,MAAMA,KAAK,IACLA,KAAK,CAALA,QAAAA,IAAAA,MAAAA,IAA4BA,KAAK,CAALA,QAAAA,IAA5BA,OAAAA,GAAAA,EAAAA,GAEIA,KAAK,CAALA,KAAAA,IAAAA,OAAAA,GAAAA,WAAAA,GAEAA,KAAK,CAALA,KAAAA,IAAAA,KAAAA,GAAAA,YAAAA,GAEA,yCAA0C;AACpD;AACA;AACA;AACA,MAAMA,KAAK,IAAK,CAACA,KAAK,CAAN,SAAA,GAAA,gBAAA,GAAsC,EAAI;AAC1D;AACA;AACA,MAAMA,KAAK,IAAKA,KAAK,CAALA,QAAAA,IAAAA,KAAAA,GAAAA,YAAAA,GAAyCA,KAAK,CAALA,QAAAA,IAAAA,QAAAA,GAAAA,eAAAA,GAA+C,EAAI;AAC5G;AACA,MAAMA,KAAK,IAAKA,KAAK,CAALA,QAAAA,IAAAA,OAAAA,GAAAA,uDAAAA,GAAsF,EAAI;AAC1G,MAAMA,KAAK,IAAKA,KAAK,CAALA,QAAAA,IAAAA,MAAAA,GAAAA,sDAAAA,GAAoF,EAAI;AACxG;AACA,MAAMA,KAAK,IACLA,KAAK,CAALA,QAAAA,IAAAA,MAAAA,IAA4BA,KAAK,CAALA,QAAAA,IAA5BA,OAAAA,GAAAA,EAAAA,GACAA,KAAK,CAALA,KAAAA,IAAAA,OAAAA,GAA0B,SAAQN,cAAc,CAACM,KAAK,CAAN,IAAA,CAAhDA,GAAAA,GAAkEA,KAAK,CAALA,KAAAA,IAAAA,KAAAA,GAAwB,UAASN,cAAc,CAACM,KAAK,CAAN,IAAA,CAA/CA,GAAAA,GAAiE,YAAa;AACtJ;AACA,MAAMA,KAAK,IAAKA,KAAK,CAALA,QAAAA,IAAAA,MAAAA,GAAAA,EAAAA,GAAgC,oBAAsB;AACtE;AACA;AACA;AACA,oBAAoBA,KAAK,IAAKA,KAAK,CAALA,QAAAA,IAAAA,KAAAA,GAA0BG,eAA1BH,WAAAA,GAA+C,aAAe;AAC5F,sBAAsBA,KAAK,IAAKA,KAAK,CAALA,QAAAA,IAAAA,OAAAA,GAA4BG,eAA5BH,WAAAA,GAAiD,aAAe;AAChG,sBAAsBA,KAAK,IAAKA,KAAK,CAALA,QAAAA,IAAAA,QAAAA,GAA6BG,eAA7BH,WAAAA,GAAkD,aAAe;AACjG,sBAAsBA,KAAK,IAAKA,KAAK,CAALA,QAAAA,IAAAA,MAAAA,GAA2BG,eAA3BH,WAAAA,GAAgD,aAAe;AAC/F;AA5DO,CAAA;AA+DPH,EAAAA,OAAO,CAAPA,YAAAA,GAAuB;AACrBe,IAAAA,SAAS,EADY,KAAA;AAErBjB,IAAAA,IAAI,EAAEC,YAFe,KAAA;AAGrBY,IAAAA,MAAM,EAHe,MAAA;AAIrBK,IAAAA,KAAK,EAJgB,QAAA;AAKrBC,IAAAA,QAAQ,EAAE;AALW,GAAvBjB;AAQO,QAAMkB,cAAc,WAAdA,cAAc,GAAGC,qBAAI;AAClC,YAAYnB,OAAQ,oBAAmBA,OAAQ,aAAYA,OAAQ;AACnE;AACA;AACA;AACA;AALO,CAAA;AAQA,QAAMoB,gBAAgB,WAAhBA,gBAAgB,GAAGnB,2BAAOC,GAAI;AAC3C;AACA;AACA;AACA,IAAIgB,cAAe;AAJZ,CAAA","sourcesContent":["import styled, { css } from 'styled-components';\nimport { Size } from '../types';\nimport { BOXSHADOWS, COLORS, ComponentTextStyle } from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst distanceToEdge = (size: Size | undefined) => {\n  return size == Size.XSmall ? '8px' : (!size || size == Size.Small) ? '12px' : '16px';\n}\n\nexport const Tooltip = styled.div<{\n  withArrow?: boolean;\n  size?: Size;\n  height?: string;\n  align?: 'start' | 'end' | 'center' | undefined;\n  position?: 'top' | 'right' | 'bottom' | 'left' | undefined;\n}>`\n\n    pointer-events: none;\n    ${props => (props.size == Size.Small || props.size != Size.Medium ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.size == Size.XSmall  ? ComponentXSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.size == Size.Medium ? ComponentMStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.align == 'center' ? 'text-align: center;' : '')}\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n    \n    padding: ${props => props.size == Size.XSmall ? '4px 8px' : props.size == Size.Medium ? '8px 12px' : '6px 10px'};\n    border-radius: 2px;\n    width: max-content;\n    height: ${props => props.height};\n    max-width: 34em;\n    background: ${COLORS.primary_800};\n    position: absolute; \n    opacity: 0; \n    z-index: ${Z_INDEXES.tooltip};\n    ${props => (props.position == 'top' ? 'bottom: 110%;' : props.position == 'bottom' ? 'top: 110%;' : '')}\n\n    ${props => (props.position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : '')}\n    ${props => (props.position == 'right' ? 'bottom: 50%;left: 110%; transform: translateY(50%);' : '')}\n            \n    ${props =>\n      props.position == 'left' || props.position == 'right'\n        ? ''\n        : props.align == 'start'\n        ? 'left: 0%;'\n        : props.align == 'end'\n        ? 'right: 0%;'\n        : 'left: 50%; transform: translateX(-50%);'}\n\n\n&::after {\n    ${props => (!props.withArrow ? 'display: none;' : '')}\n    content: \"\";\n    position: absolute;\n    ${props => (props.position == 'top' ? 'top: 100%;' : props.position == 'bottom' ? 'bottom: 100%;' : '')}\n    \n    ${props => (props.position == 'right' ? 'right: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n    ${props => (props.position == 'left' ? 'left: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n\n    ${props =>\n      props.position == 'left' || props.position == 'right' ? '' : \n      props.align == 'start' ? `left: ${distanceToEdge(props.size)};` : props.align == 'end' ? `right: ${distanceToEdge(props.size)};` : 'left: 50%;'}\n\n    ${props => (props.position == 'left' ? '' : 'margin-left: -5px;')}\n    margin: -0.5px;\n    border-width: 4px;\n    border-style: solid;\n    border-color: ${props => (props.position == 'top' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'right' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'bottom' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'left' ? COLORS.primary_800 : 'transparent')};\n  }\n`;\n\nTooltip.defaultProps = {\n  withArrow: false,\n  size: Size.Small,\n  height: 'auto',\n  align: 'center',\n  position: 'bottom'\n}\n\nexport const TooltipTrigger = css`\n  &:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {\n    opacity: 1;\n    transition: 0.5s;\n    transition-delay: 1s;\n  }\n`;\n\nexport const TooltipContainer = styled.div`\n  display: inline-block;\n  position: relative;\n\n  ${TooltipTrigger}\n`;\n"],"file":"TooltipStyles.js"}
+{"version":3,"sources":["../../../src/Tooltips/TooltipStyles.tsx"],"names":["distanceToEdge","size","Size","Tooltip","styled","div","props","ComponentSStyling","ComponentTextStyle","COLORS","ComponentXSStyling","ComponentMStyling","BOXSHADOWS","BOXSHADOW_L2","height","primary_800","Z_INDEXES","tooltip","withArrow","align","position","TooltipTrigger","delay","css","TooltipContainer"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { Size } from '../types';\nimport { BOXSHADOWS, COLORS, ComponentTextStyle } from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst distanceToEdge = (size: Size | undefined) => {\n  return size == Size.XSmall ? '8px' : (!size || size == Size.Small) ? '12px' : '16px';\n}\n\nexport const Tooltip = styled.div<{\n  withArrow?: boolean;\n  size?: Size;\n  height?: string;\n  align?: 'start' | 'end' | 'center' | undefined;\n  position?: 'top' | 'right' | 'bottom' | 'left' | undefined;\n}>`\n\n    pointer-events: none;\n    ${props => (props.size == Size.Small || props.size != Size.Medium ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.size == Size.XSmall  ? ComponentXSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.size == Size.Medium ? ComponentMStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.align == 'center' ? 'text-align: center;' : '')}\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n    \n    padding: ${props => props.size == Size.XSmall ? '4px 8px' : props.size == Size.Medium ? '8px 12px' : '6px 10px'};\n    border-radius: 2px;\n    width: max-content;\n    height: ${props => props.height};\n    max-width: 34em;\n    background: ${COLORS.primary_800};\n    position: absolute; \n    opacity: 0; \n    z-index: ${Z_INDEXES.tooltip};\n    ${props => (props.position == 'top' ? 'bottom: 110%;' : props.position == 'bottom' ? 'top: 110%;' : '')}\n\n    ${props => (props.position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : '')}\n    ${props => (props.position == 'right' ? 'bottom: 50%;left: 110%; transform: translateY(50%);' : '')}\n            \n    ${props =>\n      props.position == 'left' || props.position == 'right'\n        ? ''\n        : props.align == 'start'\n        ? 'left: 0%;'\n        : props.align == 'end'\n        ? 'right: 0%;'\n        : 'left: 50%; transform: translateX(-50%);'}\n\n\n&::after {\n    ${props => (!props.withArrow ? 'display: none;' : '')}\n    content: \"\";\n    position: absolute;\n    ${props => (props.position == 'top' ? 'top: 100%;' : props.position == 'bottom' ? 'bottom: 100%;' : '')}\n    \n    ${props => (props.position == 'right' ? 'right: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n    ${props => (props.position == 'left' ? 'left: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n\n    ${props =>\n      props.position == 'left' || props.position == 'right' ? '' : \n      props.align == 'start' ? `left: ${distanceToEdge(props.size)};` : props.align == 'end' ? `right: ${distanceToEdge(props.size)};` : 'left: 50%;'}\n\n    ${props => (props.position == 'left' ? '' : 'margin-left: -5px;')}\n    margin: -0.5px;\n    border-width: 4px;\n    border-style: solid;\n    border-color: ${props => (props.position == 'top' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'right' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'bottom' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'left' ? COLORS.primary_800 : 'transparent')};\n  }\n`;\n\nTooltip.defaultProps = {\n  withArrow: false,\n  size: Size.Small,\n  height: 'auto',\n  align: 'center',\n  position: 'bottom'\n}\n\nexport const TooltipTrigger = (delay?: string) => css`\n  &:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {\n    opacity: 1;\n    transition: 0.5s;\n    transition-delay: ${delay ?? '1s'};\n  }\n`;\n\nexport const TooltipContainer = styled.div<{delay?: string}>`\n  display: inline-block;\n  position: relative;\n\n  ${props => TooltipTrigger(props.delay)}\n`;\n"],"file":"TooltipStyles.js"}

package/dist/umd/Tooltips/TooltipTypes.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tooltips/TooltipTypes.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAEA;AACA;AACA;AAUG","sourcesContent":["import { Size } from \"../types\";\n\n/**\n * Types for the table.\n */\n export interface TooltipProps {\n    label?: string;\n    withArrow?: boolean;\n    width?: string;\n    size?: Size;\n    height?: string;\n    align? : 'start' | 'end' | 'center' | undefined;\n    position? : 'top' | 'right' | 'bottom' | 'left' | undefined;\n    children?: React.ReactNode;\n  };\n  "],"file":"TooltipTypes.js"}
+{"version":3,"sources":["../../../src/Tooltips/TooltipTypes.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAEA;AACA;AACA;AAWG","sourcesContent":["import { Size } from \"../types\";\n\n/**\n * Types for the table.\n */\n export interface TooltipProps {\n    label?: string;\n    withArrow?: boolean;\n    width?: string;\n    size?: Size;\n    delay?: string;\n    height?: string;\n    align? : 'start' | 'end' | 'center' | undefined;\n    position? : 'top' | 'right' | 'bottom' | 'left' | undefined;\n    children?: React.ReactNode;\n  };\n  "],"file":"TooltipTypes.js"}

package/dist/umd/Tooltips/TooltipWrapper.js

@@ -75,10 +75,13 @@
     withArrow,
     size = _.Size.Small,
     height = 'auto',
+    delay = undefined,
     align = 'center',
     position = 'bottom'
   }) => {
-    return /*#__PURE__*/React.createElement(_TooltipStyles.TooltipContainer, null, /*#__PURE__*/React.createElement(_TooltipStyles.Tooltip, {
+    return /*#__PURE__*/React.createElement(_TooltipStyles.TooltipContainer, {
+      delay: delay
+    }, /*#__PURE__*/React.createElement(_TooltipStyles.Tooltip, {
       align: align,
       height: height,
       size: size,

package/dist/umd/Tooltips/TooltipWrapper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tooltips/TooltipWrapper.tsx"],"names":["TooltipWrapper","size","Size","height","align","position"],"mappings":";;;;;;;;;;;;;;;;;;;MACA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOC,QAAMA,cAAc,GAAG,CAAC;AAAA,IAAA,KAAA;AAAA,IAAA,QAAA;AAAA,IAAA,SAAA;AAGtBC,IAAAA,IAAI,GAAGC,OAHe,KAAA;AAItBC,IAAAA,MAAM,GAJgB,MAAA;AAKtBC,IAAAA,KAAK,GALiB,QAAA;AAMtBC,IAAAA,QAAQ,GAAG;AANW,GAAD,KAMoB;AAExC,WAAA,aAAO,KAAA,CAAA,aAAA,CAAA,+BAAA,EAAA,IAAA,EAAA,aACC,KAAA,CAAA,aAAA,CAAA,sBAAA,EAAA;AAAS,MAAA,KAAK,EAAd,KAAA;AACG,MAAA,MAAM,EADT,MAAA;AAEG,MAAA,IAAI,EAFP,IAAA;AAGG,MAAA,SAAS,EAHZ,SAAA;AAIG,MAAA,QAAQ,EAAEA;AAJb,KAAA,EADD,KACC,CADD,EAAP,QAAO,CAAP;AARH,GAAA;;oBAoBA,c","sourcesContent":["\nimport * as React from 'react';\n\nimport { TooltipProps } from './TooltipTypes';\n\nimport { TooltipContainer, Tooltip } from './TooltipStyles';\nimport { Size } from '..';\n \n const TooltipWrapper = ({\n   label, children,\n   withArrow,\n   size = Size.Small,\n   height = 'auto',\n   align = 'center', \n   position = 'bottom' } : TooltipProps) => {\n \n    return <TooltipContainer>\n            <Tooltip align={align} \n               height={height} \n               size={size}\n               withArrow={withArrow} \n               position={position}>\n               {label}\n            </Tooltip>\n         {children}\n       </TooltipContainer>;\n };\n \n export default TooltipWrapper;"],"file":"TooltipWrapper.js"}
+{"version":3,"sources":["../../../src/Tooltips/TooltipWrapper.tsx"],"names":["TooltipWrapper","size","Size","height","delay","align","position"],"mappings":";;;;;;;;;;;;;;;;;;;MACA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOC,QAAMA,cAAc,GAAG,CAAC;AAAA,IAAA,KAAA;AAAA,IAAA,QAAA;AAAA,IAAA,SAAA;AAGtBC,IAAAA,IAAI,GAAGC,OAHe,KAAA;AAItBC,IAAAA,MAAM,GAJgB,MAAA;AAKtBC,IAAAA,KAAK,GALiB,SAAA;AAMtBC,IAAAA,KAAK,GANiB,QAAA;AAOtBC,IAAAA,QAAQ,GAAG;AAPW,GAAD,KAOoB;AAExC,WAAA,aAAO,KAAA,CAAA,aAAA,CAAA,+BAAA,EAAA;AAAkB,MAAA,KAAK,EAAEF;AAAzB,KAAA,EAAA,aACC,KAAA,CAAA,aAAA,CAAA,sBAAA,EAAA;AAAS,MAAA,KAAK,EAAd,KAAA;AACG,MAAA,MAAM,EADT,MAAA;AAEG,MAAA,IAAI,EAFP,IAAA;AAGG,MAAA,SAAS,EAHZ,SAAA;AAIG,MAAA,QAAQ,EAAEE;AAJb,KAAA,EADD,KACC,CADD,EAAP,QAAO,CAAP;AATH,GAAA;;oBAqBA,c","sourcesContent":["\nimport * as React from 'react';\n\nimport { TooltipProps } from './TooltipTypes';\n\nimport { TooltipContainer, Tooltip } from './TooltipStyles';\nimport { Size } from '..';\n \n const TooltipWrapper = ({\n   label, children,\n   withArrow,\n   size = Size.Small,\n   height = 'auto',\n   delay = undefined,\n   align = 'center', \n   position = 'bottom' } : TooltipProps) => {\n \n    return <TooltipContainer delay={delay}>\n            <Tooltip align={align}\n               height={height}\n               size={size}\n               withArrow={withArrow}\n               position={position}>\n               {label}\n            </Tooltip>\n         {children}\n       </TooltipContainer>;\n };\n \n export default TooltipWrapper;"],"file":"TooltipWrapper.js"}

package/dist/umd/icons/index.js

@@ -99,7 +99,7 @@
 
   const Container = _styledComponents2.default.div`
   position: relative;
-  ${_TooltipStyles.TooltipTrigger}
+  ${(0, _TooltipStyles.TooltipTrigger)()}
 `;
   const IconComponent = _styledComponents2.default.svg`
   width: ${props => props.width};

package/dist/umd/icons/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/icons/index.tsx"],"names":["className","children","size","viewBox","tooltip","getSize","Container","styled","div","TooltipTrigger","IconComponent","svg","props","width","height","renderIcon","BaseIcon","SystemIcon","ContentIcon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Tooltip, TooltipTrigger } from '../Tooltips/TooltipStyles';\nimport * as ContentIcons from './contenticons/ContentIcons';\nimport * as SystemIcons from './systemicons/SystemIcons';\n\nexport type BaseProps = {\n  className?: string;\n  children?: any;\n  size?: string;\n  viewBox?: string;\n  tooltip?: string;\n};\n\nexport type IconProps = {\n  label?: string;\n  className?: string;\n  color?: string;\n  size?: string;\n  viewBox?: string;\n};\n\n/**\n * Retrieves the size of the icon.\n * @param size - Original size which was passed to the icon.\n * @returns Numeric value indicating the size of the icon.\n */\nexport const getSize = (size: string) => {\n  if (typeof size === 'string' && size.indexOf('px') === -1) {\n    return `${size}px`;\n  } else {\n    return size;\n  }\n};\n\nconst Container = styled.div`\n  position: relative;\n  ${TooltipTrigger}\n`;\nconst IconComponent = styled.svg<{ width: string; height: string }>`\n  width: ${props => props.width};\n  height: ${props => props.height};\n`;\n\nconst renderIcon = (children: React.ReactNode, width: string, height: string, viewBox: string, tooltip?: string, className?: string) => {\n  return tooltip ? (\n    <Container>\n      <IconComponent className={className} width={width} height={height} viewBox={viewBox} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        {children}\n      </IconComponent>\n      <Tooltip>{tooltip}</Tooltip>\n    </Container>\n  ) : (\n    <IconComponent className={className} width={width} height={height} viewBox={viewBox} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      {children}\n    </IconComponent>\n  );\n};\n\nexport const BaseIcon: React.FunctionComponent<BaseProps> = ({ className, children, size = '16px', viewBox = '0 0 25 25', tooltip = '' }) => {\n  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);\n};\n\nexport const SystemIcon: React.FunctionComponent<BaseProps> = ({ className, children, size = '24px', viewBox = '0 0 24 24', tooltip = '' }) => {\n  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);\n};\n\nexport const ContentIcon: React.FunctionComponent<BaseProps> = ({ className, children, size = '48px', viewBox = '0 0 48 48', tooltip = '' }) => {\n  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);\n};\n\nexport { SystemIcons };\nexport { ContentIcons };\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/icons/index.tsx"],"names":["className","children","size","viewBox","tooltip","getSize","Container","styled","div","TooltipTrigger","IconComponent","svg","props","width","height","renderIcon","BaseIcon","SystemIcon","ContentIcon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Tooltip, TooltipTrigger } from '../Tooltips/TooltipStyles';\nimport * as ContentIcons from './contenticons/ContentIcons';\nimport * as SystemIcons from './systemicons/SystemIcons';\n\nexport type BaseProps = {\n  className?: string;\n  children?: any;\n  size?: string;\n  viewBox?: string;\n  tooltip?: string;\n};\n\nexport type IconProps = {\n  label?: string;\n  className?: string;\n  color?: string;\n  size?: string;\n  viewBox?: string;\n};\n\n/**\n * Retrieves the size of the icon.\n * @param size - Original size which was passed to the icon.\n * @returns Numeric value indicating the size of the icon.\n */\nexport const getSize = (size: string) => {\n  if (typeof size === 'string' && size.indexOf('px') === -1) {\n    return `${size}px`;\n  } else {\n    return size;\n  }\n};\n\nconst Container = styled.div`\n  position: relative;\n  ${TooltipTrigger()}\n`;\nconst IconComponent = styled.svg<{ width: string; height: string }>`\n  width: ${props => props.width};\n  height: ${props => props.height};\n`;\n\nconst renderIcon = (children: React.ReactNode, width: string, height: string, viewBox: string, tooltip?: string, className?: string) => {\n  return tooltip ? (\n    <Container>\n      <IconComponent className={className} width={width} height={height} viewBox={viewBox} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        {children}\n      </IconComponent>\n      <Tooltip>{tooltip}</Tooltip>\n    </Container>\n  ) : (\n    <IconComponent className={className} width={width} height={height} viewBox={viewBox} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      {children}\n    </IconComponent>\n  );\n};\n\nexport const BaseIcon: React.FunctionComponent<BaseProps> = ({ className, children, size = '16px', viewBox = '0 0 25 25', tooltip = '' }) => {\n  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);\n};\n\nexport const SystemIcon: React.FunctionComponent<BaseProps> = ({ className, children, size = '24px', viewBox = '0 0 24 24', tooltip = '' }) => {\n  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);\n};\n\nexport const ContentIcon: React.FunctionComponent<BaseProps> = ({ className, children, size = '48px', viewBox = '0 0 48 48', tooltip = '' }) => {\n  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);\n};\n\nexport { SystemIcons };\nexport { ContentIcons };\n"],"file":"index.js"}

package/package.json

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