@laerdal/life-react-components 1.6.0-dev.12.full → 1.6.0-dev.14

package/dist/Modals/ModalContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Modals/ModalContent.tsx"],"names":["React","Size","ModalContainer","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXLStyling","ComponentXSStyling","ComponentXXSStyling","TooltipContainer","TooltipWrapper","Button","IconButton","Close","Help","HyperLink","HeaderText","div","HeaderTitle","Bold","black","HeaderNote","Regular","neutral_600","HeaderActions","Header","Content","neutral_100","neutral_500","FooterLeftContainer","FooterLeftNote","FooterLeftLink","primary_500","FooterRightContainer","Footer","Wrapper","ModalContent","props","tooltip","XSmall","cursor","headerActions","map","action","index","icon","rest","id","getLeftActionIconElement","leftFooterAction","cloneElement","size","Small","Large","actionType","text","variant","e","preventDefault","isModalOpen","closeAction","Medium","title","note","children","footerActions","item","a","key","yOffset","zIndex"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport {ButtonAction, IconButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink} from './ModalTypes';\nimport {ModalContainer} from './index';\nimport styled from 'styled-components';\nimport {\n  COLORS,\n  ComponentLStyling,\n  ComponentMStyling, ComponentSStyling,\n  ComponentTextStyle, ComponentXLStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles';\nimport {TooltipContainer, TooltipWrapper} from '../Tooltips';\nimport {Button, IconButton} from '../Button';\nimport {Close, Help} from '../icons/systemicons/SystemIcons';\nimport {HyperLink} from '../HyperLink';\n\nconst HeaderText = styled.div`\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  padding: 12px 0 12px 12px;\n  gap: 4px\n`;\nconst HeaderTitle = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n`;\nconst HeaderNote = styled.div`\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst HeaderActions = styled.div`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst Header = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 4px;\n\n  ${TooltipContainer} {\n    height: max-content;\n  }\n`;\n\nconst Content = styled.div`\n  margin-right: 8px;\n  padding: 0 8px 0 16px;\n  overflow: auto;\n\n  /* width */\n\n  ::-webkit-scrollbar {\n    width: 4px;\n    cursor: pointer;\n  }\n\n  /* Track */\n\n  ::-webkit-scrollbar-track {\n    background: ${COLORS.neutral_100};\n    border-radius: 8px;\n  }\n\n  /* Handle */\n\n  ::-webkit-scrollbar-thumb {\n    background: ${COLORS.neutral_600};\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n\n  ::-webkit-scrollbar-thumb:hover {\n    background: ${COLORS.neutral_500};\n  }\n`;\n\nconst FooterLeftContainer = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst FooterLeftNote = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 4px;\n\n  ${ComponentXXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\nconst FooterLeftLink = styled.div`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n`;\n\nconst FooterRightContainer = styled.div`\n  gap: 8px;\n  margin-left: auto;\n`\n\nconst Footer = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 8px 16px;\n`;\n\n\nconst Wrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: max-content;\n\n  max-height: calc(100vh - 32px);\n  max-width: calc(100vw - 32px);\n\n  &.medium {\n    max-height: calc(100vh - 64px);\n    max-width: calc(100vw - 64px);\n\n    ${Header} {\n      padding: 12px 12px 4px 12px;\n\n      ${HeaderText} {\n        padding: 12px 0 12px 12px;\n        gap: 4px;\n\n        ${HeaderTitle} {\n          ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n        }\n\n        ${HeaderNote} {\n          ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n        }\n      }\n    }\n\n    ${Content} {\n      padding: 0 16px 0 24px;\n    }\n\n    ${Footer} {\n      padding: 12px 24px 20px 24px;\n\n      ${FooterLeftNote} {\n        ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n        gap: 6px;\n      }\n\n      ${FooterLeftLink} {\n        a {\n          gap: 6px;\n        }\n\n        ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      ${FooterRightContainer} {\n        gap: 8px;\n      }\n    }\n  }\n\n  &.large {\n    max-height: calc(100vh - 112px);\n    max-width: calc(100vw - 112px);\n\n    ${Header} {\n      padding: 20px 20px 4px 20px;\n\n      ${HeaderText} {\n        padding: 10px 0 10px 12px;\n        gap: 8px;\n\n        ${HeaderTitle} {\n          ${ComponentXLStyling(ComponentTextStyle.Bold, null)}\n        }\n\n        ${HeaderNote} {\n          ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n        }\n      }\n    }\n\n    ${Content} {\n      padding: 0 24px 0 32px;\n    }\n\n    ${Footer} {\n      padding: 16px 32px 32px 32px;\n\n      ${FooterLeftNote} {\n        ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n        gap: 8px;\n      }\n\n      ${FooterLeftLink} {\n        a {\n          gap: 8px;\n        }\n\n        ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      ${FooterRightContainer} {\n        gap: 16px;\n      }\n    }\n  }\n`;\n\n\ninterface ModalContentProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  isModalOpen: boolean;\n  closeAction: () => void;\n  title: string;\n  note?: string;\n  headerActions?: IconButtonAction[];\n  footerActions?: ButtonAction[];\n  leftFooterAction?: LeftFooterAction;\n  tooltip?: string;\n  yOffset?: number;\n  zIndex?: number;\n}\n\nconst ModalContent: React.FC<ModalContentProps> = (props) => {\n\n  const tooltip = () =>\n    !!props.tooltip &&\n    <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"bottom\" withArrow={false}\n                    label={props.tooltip}>\n      <IconButton variant=\"secondary\" shape=\"circular\" style={{cursor: 'help'}} action={() => {\n      }}>\n        <Help size=\"24px\" color={COLORS.neutral_600}/>\n      </IconButton>\n    </TooltipWrapper>;\n\n  const headerActions = () => props.headerActions?.map((action, index) => {\n      const {icon, ...rest} = action;\n      return <IconButton key={action.id || index}\n                         {...rest}>\n        {icon}\n      </IconButton>\n    }\n  );\n\n  const getLeftActionIconElement = () =>\n    !!props.leftFooterAction?.icon &&\n    React.cloneElement(props.leftFooterAction?.icon as React.ReactElement, {\n      size:\n        props.size === Size.Small\n          ? '20px'\n          : props.size === Size.Large\n            ? '28px'\n            : '24px'\n    });\n\n  const leftFooterAction = () => {\n    if (!props.leftFooterAction) return null;\n\n    switch (props.leftFooterAction.actionType) {\n      case 'button': {\n        const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterButton;\n        return (\n          <Button{...rest}\n                 size={props.size}\n                 onClick={action}\n                 variant={variant ?? 'secondary'}>\n            {text}\n          </Button>\n        );\n      }\n      case 'hyperlink': {\n        const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterHyperlink;\n        return (\n          <FooterLeftLink>\n            <HyperLink {...rest}\n                       variant={variant ?? 'default'}\n                       onClick={(e) => {\n                         if (action) {\n                           e.preventDefault();\n                           action(e);\n                         }\n                       }}>\n              {getLeftActionIconElement()}\n              {text}\n            </HyperLink>\n          </FooterLeftLink>\n        );\n\n      }\n      case 'note': {\n        const {text} = props.leftFooterAction;\n        return (\n          <FooterLeftNote>\n            {getLeftActionIconElement()}\n            <span>{text}</span>\n          </FooterLeftNote>\n        );\n      }\n    }\n  };\n\n\n  return (\n    <ModalContainer showModal={props.isModalOpen} closeModal={props.closeAction}>\n      <Wrapper className={props.size ?? Size.Medium}>\n        <Header>\n          <HeaderText>\n            <HeaderTitle>{props.title}</HeaderTitle>\n            {!!props.note && <HeaderNote>{props.note}</HeaderNote>}\n          </HeaderText>\n          <HeaderActions>\n            {tooltip()}\n            {headerActions()}\n            <IconButton id={'content-modal-close-button'} variant=\"secondary\" shape=\"circular\"\n                        action={props.closeAction}>\n              <Close size=\"24px\" color={COLORS.neutral_600}/>\n            </IconButton>\n          </HeaderActions>\n        </Header>\n        <Content>\n          {props.children}\n        </Content>\n        <Footer>\n          <FooterLeftContainer>\n            {leftFooterAction()}\n          </FooterLeftContainer>\n          <FooterRightContainer>\n            {props.footerActions?.map((item, index) => {\n                const {action, text, ...rest} = item;\n                return <Button key={rest.id || index}\n                               {...rest}\n                               onClick={action}\n                               size={props.size}\n                               onKeyDown={a => (a.key === 'Enter' || a.key === ' ') && action!(a)}>\n                  {text}\n                </Button>\n              }\n            )}\n          </FooterRightContainer>\n        </Footer>\n      </Wrapper>\n    </ModalContainer>\n  );\n};\n\nexport default ModalContent;\n"],"file":"ModalContent.js"}
+{"version":3,"sources":["../../src/Modals/ModalContent.tsx"],"names":["React","Size","ModalContainer","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXLStyling","ComponentXSStyling","ComponentXXSStyling","scrollBarStyling","TooltipContainer","TooltipWrapper","Button","IconButton","Close","Help","HyperLink","HeaderText","div","HeaderTitle","Bold","black","HeaderNote","Regular","neutral_600","HeaderActions","Header","Content","Small","FooterLeftContainer","FooterLeftNote","FooterLeftLink","primary_500","FooterRightContainer","Footer","Wrapper","ModalContent","props","tooltip","XSmall","cursor","headerActions","map","action","index","icon","rest","id","getLeftActionIconElement","leftFooterAction","cloneElement","size","Large","actionType","text","variant","e","preventDefault","isModalOpen","closeAction","Medium","title","note","children","footerActions","item","a","key","yOffset","zIndex"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport {ButtonAction, IconButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink} from './ModalTypes';\nimport {ModalContainer} from './index';\nimport styled from 'styled-components';\nimport {\n  COLORS,\n  ComponentLStyling,\n  ComponentMStyling, ComponentSStyling,\n  ComponentTextStyle, ComponentXLStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling,\n  scrollBarStyling\n} from '../styles';\nimport {TooltipContainer, TooltipWrapper} from '../Tooltips';\nimport {Button, IconButton} from '../Button';\nimport {Close, Help} from '../icons/systemicons/SystemIcons';\nimport {HyperLink} from '../HyperLink';\n\nconst HeaderText = styled.div`\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  padding: 12px 0 12px 12px;\n  gap: 4px\n`;\nconst HeaderTitle = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n`;\nconst HeaderNote = styled.div`\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst HeaderActions = styled.div`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst Header = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 4px;\n\n  ${TooltipContainer} {\n    height: max-content;\n  }\n`;\n\nconst Content = styled.div`\n  margin-right: 8px;\n  padding: 0 8px 0 16px;\n  overflow: auto;\n\n  ${scrollBarStyling(Size.Small)}\n`;\n\nconst FooterLeftContainer = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst FooterLeftNote = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 4px;\n\n  ${ComponentXXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\nconst FooterLeftLink = styled.div`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n`;\n\nconst FooterRightContainer = styled.div`\n  gap: 8px;\n  margin-left: auto;\n`\n\nconst Footer = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 8px 16px;\n`;\n\n\nconst Wrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: max-content;\n\n  max-height: calc(100vh - 32px);\n  max-width: calc(100vw - 32px);\n\n  &.medium {\n    max-height: calc(100vh - 64px);\n    max-width: calc(100vw - 64px);\n\n    ${Header} {\n      padding: 12px 12px 4px 12px;\n\n      ${HeaderText} {\n        padding: 12px 0 12px 12px;\n        gap: 4px;\n\n        ${HeaderTitle} {\n          ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n        }\n\n        ${HeaderNote} {\n          ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n        }\n      }\n    }\n\n    ${Content} {\n      padding: 0 16px 0 24px;\n    }\n\n    ${Footer} {\n      padding: 12px 24px 20px 24px;\n\n      ${FooterLeftNote} {\n        ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n        gap: 6px;\n      }\n\n      ${FooterLeftLink} {\n        a {\n          gap: 6px;\n        }\n\n        ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      ${FooterRightContainer} {\n        gap: 8px;\n      }\n    }\n  }\n\n  &.large {\n    max-height: calc(100vh - 112px);\n    max-width: calc(100vw - 112px);\n\n    ${Header} {\n      padding: 20px 20px 4px 20px;\n\n      ${HeaderText} {\n        padding: 10px 0 10px 12px;\n        gap: 8px;\n\n        ${HeaderTitle} {\n          ${ComponentXLStyling(ComponentTextStyle.Bold, null)}\n        }\n\n        ${HeaderNote} {\n          ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n        }\n      }\n    }\n\n    ${Content} {\n      padding: 0 24px 0 32px;\n    }\n\n    ${Footer} {\n      padding: 16px 32px 32px 32px;\n\n      ${FooterLeftNote} {\n        ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n        gap: 8px;\n      }\n\n      ${FooterLeftLink} {\n        a {\n          gap: 8px;\n        }\n\n        ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      ${FooterRightContainer} {\n        gap: 16px;\n      }\n    }\n  }\n`;\n\n\ninterface ModalContentProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  isModalOpen: boolean;\n  closeAction: () => void;\n  title: string;\n  note?: string;\n  headerActions?: IconButtonAction[];\n  footerActions?: ButtonAction[];\n  leftFooterAction?: LeftFooterAction;\n  tooltip?: string;\n  yOffset?: number;\n  zIndex?: number;\n}\n\nconst ModalContent: React.FC<ModalContentProps> = (props) => {\n\n  const tooltip = () =>\n    !!props.tooltip &&\n    <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"bottom\" withArrow={false}\n                    label={props.tooltip}>\n      <IconButton variant=\"secondary\" shape=\"circular\" style={{cursor: 'help'}} action={() => {\n      }}>\n        <Help size=\"24px\" color={COLORS.neutral_600}/>\n      </IconButton>\n    </TooltipWrapper>;\n\n  const headerActions = () => props.headerActions?.map((action, index) => {\n      const {icon, ...rest} = action;\n      return <IconButton key={action.id || index}\n                         {...rest}>\n        {icon}\n      </IconButton>\n    }\n  );\n\n  const getLeftActionIconElement = () =>\n    !!props.leftFooterAction?.icon &&\n    React.cloneElement(props.leftFooterAction?.icon as React.ReactElement, {\n      size:\n        props.size === Size.Small\n          ? '20px'\n          : props.size === Size.Large\n            ? '28px'\n            : '24px'\n    });\n\n  const leftFooterAction = () => {\n    if (!props.leftFooterAction) return null;\n\n    switch (props.leftFooterAction.actionType) {\n      case 'button': {\n        const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterButton;\n        return (\n          <Button{...rest}\n                 size={props.size}\n                 onClick={action}\n                 variant={variant ?? 'secondary'}>\n            {text}\n          </Button>\n        );\n      }\n      case 'hyperlink': {\n        const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterHyperlink;\n        return (\n          <FooterLeftLink>\n            <HyperLink {...rest}\n                       variant={variant ?? 'default'}\n                       onClick={(e) => {\n                         if (action) {\n                           e.preventDefault();\n                           action(e);\n                         }\n                       }}>\n              {getLeftActionIconElement()}\n              {text}\n            </HyperLink>\n          </FooterLeftLink>\n        );\n\n      }\n      case 'note': {\n        const {text} = props.leftFooterAction;\n        return (\n          <FooterLeftNote>\n            {getLeftActionIconElement()}\n            <span>{text}</span>\n          </FooterLeftNote>\n        );\n      }\n    }\n  };\n\n\n  return (\n    <ModalContainer showModal={props.isModalOpen} closeModal={props.closeAction}>\n      <Wrapper className={props.size ?? Size.Medium}>\n        <Header>\n          <HeaderText>\n            <HeaderTitle>{props.title}</HeaderTitle>\n            {!!props.note && <HeaderNote>{props.note}</HeaderNote>}\n          </HeaderText>\n          <HeaderActions>\n            {tooltip()}\n            {headerActions()}\n            <IconButton id={'content-modal-close-button'} variant=\"secondary\" shape=\"circular\"\n                        action={props.closeAction}>\n              <Close size=\"24px\" color={COLORS.neutral_600}/>\n            </IconButton>\n          </HeaderActions>\n        </Header>\n        <Content>\n          {props.children}\n        </Content>\n        <Footer>\n          <FooterLeftContainer>\n            {leftFooterAction()}\n          </FooterLeftContainer>\n          <FooterRightContainer>\n            {props.footerActions?.map((item, index) => {\n                const {action, text, ...rest} = item;\n                return <Button key={rest.id || index}\n                               {...rest}\n                               onClick={action}\n                               size={props.size}\n                               onKeyDown={a => (a.key === 'Enter' || a.key === ' ') && action!(a)}>\n                  {text}\n                </Button>\n              }\n            )}\n          </FooterRightContainer>\n        </Footer>\n      </Wrapper>\n    </ModalContainer>\n  );\n};\n\nexport default ModalContent;\n"],"file":"ModalContent.js"}

package/dist/Modals/ModalStyles.cjs

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

package/dist/Modals/ModalStyles.cjs.map

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

package/dist/Modals/ModalStyles.js

@@ -4,6 +4,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 
 import styled, { css } from 'styled-components';
 import { COLORS } from '..';
+import { scrollBarStyling } from '../styles';
 import { Size } from '../types';
 /**
  * Modal styles
@@ -49,7 +50,7 @@ export var ModalNoteSection = styled.section(_templateObject14 || (_templateObje
 }, function (props) {
   return getNoteMessageColor(props.state);
 });
-export var ModalBody = styled.section(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  flex: 1 1 auto;\n  overflow: ", ";\n  margin-top: ", ";\n  margin-bottom: ", ";\n\n  border-top: ", ";\n  border-bottom: ", ";\n\n  /* width */\n\n  ::-webkit-scrollbar {\n    width: 4px;\n\n    cursor: pointer;\n  }\n\n  /* Track */\n\n  ::-webkit-scrollbar-track {\n    background: ", ";\n\n    border-radius: 8px;\n  }\n\n  /* Handle */\n\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n\n  ::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n\n  > :first-child {\n    margin-top: ", ";\n  }\n\n  > :last-child {\n    margin-bottom: ", ";\n  }\n\n  p: first-of-type {\n    padding-bottom: ", ";\n  }\n"])), function (props) {
+export var ModalBody = styled.section(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  flex: 1 1 auto;\n  overflow: ", ";\n  margin-top: ", ";\n  margin-bottom: ", ";\n\n  border-top: ", ";\n  border-bottom: ", ";\n\n  ", "\n\n  > :first-child {\n    margin-top: ", ";\n  }\n\n  > :last-child {\n    margin-bottom: ", ";\n  }\n\n  p: first-of-type {\n    padding-bottom: ", ";\n  }\n"])), function (props) {
   var _props$overflow;
 
   return (_props$overflow = props === null || props === void 0 ? void 0 : props.overflow) !== null && _props$overflow !== void 0 ? _props$overflow : 'unset';
@@ -61,7 +62,7 @@ export var ModalBody = styled.section(_templateObject15 || (_templateObject15 =
   return props !== null && props !== void 0 && props.hasContentBorders ? "1px solid ".concat(COLORS.neutral_100) : 'none';
 }, function (props) {
   return props !== null && props !== void 0 && props.hasContentBorders ? "1px solid ".concat(COLORS.neutral_100) : 'none';
-}, COLORS.neutral_100, COLORS.neutral_600, COLORS.neutral_500, function (props) {
+}, scrollBarStyling(Size.Small), function (props) {
   return (props === null || props === void 0 ? void 0 : props.size) === 'small' ? "16px" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '8px' : '12px';
 }, function (props) {
   return (props === null || props === void 0 ? void 0 : props.size) === 'small' ? "8px" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '24px' : '16px';

package/dist/Modals/ModalStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Modals/ModalStyles.ts"],"names":["styled","css","COLORS","Size","ModalHeader","section","props","marginBottom","StyledModalHeader","height","size","Column","div","ModalTitleSection","ModalHeaderActionsWithImage","hasBackButton","ModalHeaderActions","FlexContainer","flexDirection","ModalHoverModifier","CloseButtonWrapper","hasImage","BackButtonWrapper","ModalTitle","h5","fontSize","ModalNoteSection","getBackgroundColor","state","getNoteMessageColor","ModalBody","overflow","hasContentBorders","neutral_100","neutral_600","neutral_500","ModalFooter","Small","Large","correct_100","warning_100","critical_100","primary_100","correct_700","warning_700","critical_700","primary_700"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '..';\nimport { Size } from '../types';\n\n/**\n * Modal styles\n */\nexport const ModalHeader = styled.section<{ marginBottom?: string }>`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: ${(props) => props.marginBottom || '24px'};\n`;\n\nexport const StyledModalHeader = styled(ModalHeader)<{ marginBottom?: string; size?: string; height?: number }>`\n  flex: 1 0 calc(50% - 5px);\n  flex-direction: column;\n  flex-basis: auto;\n  position: relative;\n  text-align: left;\n  height: ${(props) => (props.height ? `${props.height - (props.size === 'small' ? 16 : props.size === 'large' ? 32 : 24)}px` : '')};\n  img {\n    width: 100%;\n    height: ${(props) => `${props.height}px`};\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    border-radius: 8px 8px 0 0;\n    object-fit: cover;\n  }\n`;\n\nexport const Column = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n`;\n\nexport const ModalTitleSection = styled.section`\n  word-break: break-word;\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n`;\n\nexport const ModalHeaderActionsWithImage = styled.div<{ hasBackButton?: boolean }>`\n  display: flex;\n  flex-direction: ${(props) => (!props.hasBackButton ? 'row-reverse' : 'row')};\n  justify-content: space-between;\n  width: 100%;\n  z-index: 1;\n`;\n\nexport const ModalHeaderActions = styled.div`\n  display: flex;\n  margin: -12px -12px 0 0;\n`;\n\nexport const FlexContainer = styled.div<{ flexDirection?: string }>`\n  display: flex;\n  flex-direction: ${(props) => props.flexDirection ?? 'row'};\n`;\n\nexport const ModalHoverModifier = styled.div`\n  button:hover {\n    cursor: help !important;\n  }\n`;\n\nexport const CloseButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n  button {\n    ${(props) =>\n      props.hasImage\n        ? css`\n            margin: -12px -12px 0 0 !important;\n          `\n        : css`\n            left: unset;\n          `}\n  }\n`;\n\nexport const BackButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n  button {\n    margin: -12px 0 0 -12px !important;\n  }\n`;\n\nexport const ModalTitle = styled.h5<{ fontSize?: string }>`\n  margin: 0;\n  font-size: ${(props) => props.fontSize || '1.25em'};\n  font-weight: bold;\n`;\n\nexport const ModalNoteSection = styled.section<{ state: string; size?: string }>`\n  background-color: ${(props) => getBackgroundColor(props.state)};\n  font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n  margin-top: ${(props) => (props?.size === 'small' ? `0px` : props?.size === 'large' ? '16px' : '4px')};\n  margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  display: flex;\n  flex-direction: row;\n  padding: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '16px' : '12px')};\n  border-radius: 2px;\n\n  span {\n    display: block;\n    width: calc(100% - 32px);\n    margin-left: 8px;\n    color: ${(props) => getNoteMessageColor(props.state)};\n  }\n`;\n\nexport const ModalBody = styled.section<{ size?: string; overflow?: string; hasContentBorders?: boolean }>`\n  flex: 1 1 auto;\n  overflow: ${(props) => props?.overflow ?? 'unset'};\n  margin-top: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '16px' : '12px')};\n  margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '16px' : '12px')};\n\n  border-top: ${(props) => (props?.hasContentBorders ? `1px solid ${COLORS.neutral_100}` : 'none')};\n  border-bottom: ${(props) => (props?.hasContentBorders ? `1px solid ${COLORS.neutral_100}` : 'none')};\n\n  /* width */\n\n  ::-webkit-scrollbar {\n    width: 4px;\n\n    cursor: pointer;\n  }\n\n  /* Track */\n\n  ::-webkit-scrollbar-track {\n    background: ${COLORS.neutral_100};\n\n    border-radius: 8px;\n  }\n\n  /* Handle */\n\n  ::-webkit-scrollbar-thumb {\n    background: ${COLORS.neutral_600};\n\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n\n  ::-webkit-scrollbar-thumb:hover {\n    background: ${COLORS.neutral_500};\n  }\n\n  > :first-child {\n    margin-top: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '8px' : '12px')};\n  }\n\n  > :last-child {\n    margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  }\n\n  p: first-of-type {\n    padding-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  }\n`;\n\nexport const ModalFooter = styled.section<{ size?: Size }>`\n  margin-top: ${(props) => (props?.size === Size.Small ? `20px` : props?.size === Size.Large ? '28px' : '24px')};\n  display: flex;\n  justify-content: flex-end;\n\n  gap: ${(props) => (props?.size === 'large' ? `16px` : '8px')};\n\n  .footer-action {\n    order: -1;\n    margin-right: auto;\n    display: flex;\n    align-items: center;\n    font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n    gap: ${(props) => (props?.size === Size.Large ? `8px` : props?.size === Size.Small ? '4px' : '6px')};\n  }\n\n  .footer-action.note {\n    color: ${COLORS.neutral_600};\n  }\n`;\n\nexport const getBackgroundColor = (state: string) => {\n  switch (state) {\n    case 'positive':\n      return COLORS.correct_100;\n    case 'warning':\n      return COLORS.warning_100;\n    case 'critical':\n      return COLORS.critical_100;\n    default:\n      return COLORS.primary_100;\n  }\n};\n\nexport const getNoteMessageColor = (state: string) => {\n  switch (state) {\n    case 'positive':\n      return COLORS.correct_700;\n    case 'warning':\n      return COLORS.warning_700;\n    case 'critical':\n      return COLORS.critical_700;\n    default:\n      return COLORS.primary_700;\n  }\n};\n"],"file":"ModalStyles.js"}
+{"version":3,"sources":["../../src/Modals/ModalStyles.ts"],"names":["styled","css","COLORS","scrollBarStyling","Size","ModalHeader","section","props","marginBottom","StyledModalHeader","height","size","Column","div","ModalTitleSection","ModalHeaderActionsWithImage","hasBackButton","ModalHeaderActions","FlexContainer","flexDirection","ModalHoverModifier","CloseButtonWrapper","hasImage","BackButtonWrapper","ModalTitle","h5","fontSize","ModalNoteSection","getBackgroundColor","state","getNoteMessageColor","ModalBody","overflow","hasContentBorders","neutral_100","Small","ModalFooter","Large","neutral_600","correct_100","warning_100","critical_100","primary_100","correct_700","warning_700","critical_700","primary_700"],"mappings":";;;;AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAASC,MAAT,QAAuB,IAAvB;AACA,SAASC,gBAAT,QAAiC,WAAjC;AACA,SAASC,IAAT,QAAqB,UAArB;AAEA;AACA;AACA;;AACA,OAAO,IAAMC,WAAW,GAAGL,MAAM,CAACM,OAAV,6KAIL,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACC,YAAN,IAAsB,MAAjC;AAAA,CAJK,CAAjB;AAOP,OAAO,IAAMC,iBAAiB,GAAGT,MAAM,CAACK,WAAD,CAAT,iYAMlB,UAACE,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,CANkB,EAShB,UAACJ,KAAD;AAAA,mBAAcA,KAAK,CAACG,MAApB;AAAA,CATgB,CAAvB;AAmBP,OAAO,IAAME,MAAM,GAAGZ,MAAM,CAACa,GAAV,oKAAZ;AAOP,OAAO,IAAMC,iBAAiB,GAAGd,MAAM,CAACM,OAAV,yKAAvB;AAOP,OAAO,IAAMS,2BAA2B,GAAGf,MAAM,CAACa,GAAV,uLAEpB,UAACN,KAAD;AAAA,SAAY,CAACA,KAAK,CAACS,aAAP,GAAuB,aAAvB,GAAuC,KAAnD;AAAA,CAFoB,CAAjC;AAQP,OAAO,IAAMC,kBAAkB,GAAGjB,MAAM,CAACa,GAAV,uHAAxB;AAKP,OAAO,IAAMK,aAAa,GAAGlB,MAAM,CAACa,GAAV,qHAEN,UAACN,KAAD;AAAA;;AAAA,iCAAWA,KAAK,CAACY,aAAjB,uEAAkC,KAAlC;AAAA,CAFM,CAAnB;AAKP,OAAO,IAAMC,kBAAkB,GAAGpB,MAAM,CAACa,GAAV,8HAAxB;AAMP,OAAO,IAAMQ,kBAAkB,GAAGrB,MAAM,CAACa,GAAV,qGAEzB,UAACN,KAAD;AAAA,SACAA,KAAK,CAACe,QAAN,GACIrB,GADJ,yIAIIA,GAJJ,+GADA;AAAA,CAFyB,CAAxB;AAaP,OAAO,IAAMsB,iBAAiB,GAAGvB,MAAM,CAACa,GAAV,qIAAvB;AAMP,OAAO,IAAMW,UAAU,GAAGxB,MAAM,CAACyB,EAAV,oIAER,UAAClB,KAAD;AAAA,SAAWA,KAAK,CAACmB,QAAN,IAAkB,QAA7B;AAAA,CAFQ,CAAhB;AAMP,OAAO,IAAMC,gBAAgB,GAAG3B,MAAM,CAACM,OAAV,yWACP,UAACC,KAAD;AAAA,SAAWqB,kBAAkB,CAACrB,KAAK,CAACsB,KAAP,CAA7B;AAAA,CADO,EAEd,UAACtB,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,SAAWuB,mBAAmB,CAACvB,KAAK,CAACsB,KAAP,CAA9B;AAAA,CAdgB,CAAtB;AAkBP,OAAO,IAAME,SAAS,GAAG/B,MAAM,CAACM,OAAV,sXAER,UAACC,KAAD;AAAA;;AAAA,4BAAWA,KAAX,aAAWA,KAAX,uBAAWA,KAAK,CAAEyB,QAAlB,6DAA8B,OAA9B;AAAA,CAFQ,EAGN,UAACzB,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,CAHM,EAIH,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,CAJG,EAMN,UAACJ,KAAD;AAAA,SAAYA,KAAK,SAAL,IAAAA,KAAK,WAAL,IAAAA,KAAK,CAAE0B,iBAAP,uBAAwC/B,MAAM,CAACgC,WAA/C,IAA+D,MAA3E;AAAA,CANM,EAOH,UAAC3B,KAAD;AAAA,SAAYA,KAAK,SAAL,IAAAA,KAAK,WAAL,IAAAA,KAAK,CAAE0B,iBAAP,uBAAwC/B,MAAM,CAACgC,WAA/C,IAA+D,MAA3E;AAAA,CAPG,EASlB/B,gBAAgB,CAACC,IAAI,CAAC+B,KAAN,CATE,EAYJ,UAAC5B,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,KAA1B,GAAkC,MAAjF;AAAA,CAZI,EAgBD,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,CAhBC,EAoBA,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,CApBA,CAAf;AAwBP,OAAO,IAAMyB,WAAW,GAAGpC,MAAM,CAACM,OAAV,2WACR,UAACC,KAAD;AAAA,SAAY,CAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,IAAP,MAAgBP,IAAI,CAAC+B,KAArB,YAAsC,CAAA5B,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,IAAP,MAAgBP,IAAI,CAACiC,KAArB,GAA6B,MAA7B,GAAsC,MAAxF;AAAA,CADQ,EAKf,UAAC9B,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,MAAgBP,IAAI,CAACiC,KAArB,WAAqC,CAAA9B,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,IAAP,MAAgBP,IAAI,CAAC+B,KAArB,GAA6B,KAA7B,GAAqC,KAAtF;AAAA,CAba,EAiBXjC,MAAM,CAACoC,WAjBI,CAAjB;AAqBP,OAAO,IAAMV,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,KAAD,EAAmB;AACnD,UAAQA,KAAR;AACE,SAAK,UAAL;AACE,aAAO3B,MAAM,CAACqC,WAAd;;AACF,SAAK,SAAL;AACE,aAAOrC,MAAM,CAACsC,WAAd;;AACF,SAAK,UAAL;AACE,aAAOtC,MAAM,CAACuC,YAAd;;AACF;AACE,aAAOvC,MAAM,CAACwC,WAAd;AARJ;AAUD,CAXM;AAaP,OAAO,IAAMZ,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACD,KAAD,EAAmB;AACpD,UAAQA,KAAR;AACE,SAAK,UAAL;AACE,aAAO3B,MAAM,CAACyC,WAAd;;AACF,SAAK,SAAL;AACE,aAAOzC,MAAM,CAAC0C,WAAd;;AACF,SAAK,UAAL;AACE,aAAO1C,MAAM,CAAC2C,YAAd;;AACF;AACE,aAAO3C,MAAM,CAAC4C,WAAd;AARJ;AAUD,CAXM","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '..';\nimport { scrollBarStyling } from '../styles';\nimport { Size } from '../types';\n\n/**\n * Modal styles\n */\nexport const ModalHeader = styled.section<{ marginBottom?: string }>`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: ${(props) => props.marginBottom || '24px'};\n`;\n\nexport const StyledModalHeader = styled(ModalHeader)<{ marginBottom?: string; size?: string; height?: number }>`\n  flex: 1 0 calc(50% - 5px);\n  flex-direction: column;\n  flex-basis: auto;\n  position: relative;\n  text-align: left;\n  height: ${(props) => (props.height ? `${props.height - (props.size === 'small' ? 16 : props.size === 'large' ? 32 : 24)}px` : '')};\n  img {\n    width: 100%;\n    height: ${(props) => `${props.height}px`};\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    border-radius: 8px 8px 0 0;\n    object-fit: cover;\n  }\n`;\n\nexport const Column = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n`;\n\nexport const ModalTitleSection = styled.section`\n  word-break: break-word;\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n`;\n\nexport const ModalHeaderActionsWithImage = styled.div<{ hasBackButton?: boolean }>`\n  display: flex;\n  flex-direction: ${(props) => (!props.hasBackButton ? 'row-reverse' : 'row')};\n  justify-content: space-between;\n  width: 100%;\n  z-index: 1;\n`;\n\nexport const ModalHeaderActions = styled.div`\n  display: flex;\n  margin: -12px -12px 0 0;\n`;\n\nexport const FlexContainer = styled.div<{ flexDirection?: string }>`\n  display: flex;\n  flex-direction: ${(props) => props.flexDirection ?? 'row'};\n`;\n\nexport const ModalHoverModifier = styled.div`\n  button:hover {\n    cursor: help !important;\n  }\n`;\n\nexport const CloseButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n  button {\n    ${(props) =>\n      props.hasImage\n        ? css`\n            margin: -12px -12px 0 0 !important;\n          `\n        : css`\n            left: unset;\n          `}\n  }\n`;\n\nexport const BackButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n  button {\n    margin: -12px 0 0 -12px !important;\n  }\n`;\n\nexport const ModalTitle = styled.h5<{ fontSize?: string }>`\n  margin: 0;\n  font-size: ${(props) => props.fontSize || '1.25em'};\n  font-weight: bold;\n`;\n\nexport const ModalNoteSection = styled.section<{ state: string; size?: string }>`\n  background-color: ${(props) => getBackgroundColor(props.state)};\n  font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n  margin-top: ${(props) => (props?.size === 'small' ? `0px` : props?.size === 'large' ? '16px' : '4px')};\n  margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  display: flex;\n  flex-direction: row;\n  padding: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '16px' : '12px')};\n  border-radius: 2px;\n\n  span {\n    display: block;\n    width: calc(100% - 32px);\n    margin-left: 8px;\n    color: ${(props) => getNoteMessageColor(props.state)};\n  }\n`;\n\nexport const ModalBody = styled.section<{ size?: string; overflow?: string; hasContentBorders?: boolean }>`\n  flex: 1 1 auto;\n  overflow: ${(props) => props?.overflow ?? 'unset'};\n  margin-top: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '16px' : '12px')};\n  margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '16px' : '12px')};\n\n  border-top: ${(props) => (props?.hasContentBorders ? `1px solid ${COLORS.neutral_100}` : 'none')};\n  border-bottom: ${(props) => (props?.hasContentBorders ? `1px solid ${COLORS.neutral_100}` : 'none')};\n\n  ${scrollBarStyling(Size.Small)}\n\n  > :first-child {\n    margin-top: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '8px' : '12px')};\n  }\n\n  > :last-child {\n    margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  }\n\n  p: first-of-type {\n    padding-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  }\n`;\n\nexport const ModalFooter = styled.section<{ size?: Size }>`\n  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/Switcher/MobileSwitcherMenu.cjs

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

package/dist/Switcher/MobileSwitcherMenu.cjs.map

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

package/dist/Switcher/MobileSwitcherMenu.js

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

package/dist/Switcher/MobileSwitcherMenu.js.map

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

package/dist/styles/index.cjs

@@ -279,10 +279,16 @@ var _typography = require("./typography");
 
 var _global = _interopRequireDefault(require("./global"));
 
+var _types = require("../types");
+
 var _zIndexes = require("./z-indexes");
 
 var _templateObject;
 
-var scrollBarStyling = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ", ";\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), _colors.default.white, _colors.default.neutral_200, _colors.default.neutral_400);
+var scrollBarStyling = function scrollBarStyling() {
+  var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _types.Size.Small;
+  return (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  \n  ::-webkit-scrollbar {\n    width: ", ";\n    height: ", ";\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ", ";\n    border-radius: 6px;\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 4px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:active {\n    background: ", ";\n  }\n"])), size == _types.Size.Medium ? '6px' : '4px', size == _types.Size.Medium ? '6px' : '4px', _colors.default.neutral_100, _colors.default.neutral_500, _colors.default.primary_700, _colors.default.primary_800);
+};
+
 exports.scrollBarStyling = scrollBarStyling;
 //# sourceMappingURL=index.cjs.map

package/dist/styles/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/styles/index.ts"],"names":["scrollBarStyling","css","COLORS","white","neutral_200","neutral_400"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AAQA;;AAoCA;;;;AAxBO,IAAMA,gBAAgB,OAAGC,qBAAH,ybASXC,gBAAOC,KATI,EAcXD,gBAAOE,WAdI,EAoBXF,gBAAOG,WApBI,CAAtB","sourcesContent":["import { css } from 'styled-components';\nimport COLORS from './colors';\nimport BREAKPOINTS from './breakpoints';\nimport { BOXSHADOWS } from './shadowstyles';\n\nimport { TYPOGRAPHY } from './typography';\nimport { HeadlineXL, HeadlineL, HeadlineM, HeadlineS, HeadlineXS, HeadlineXXS } from './typography';\nimport { ParagraphTextStyle, ParagraphXL, ParagraphL, ParagraphM, ParagraphS, ParagraphXS } from './typography';\nimport { ComponentTextStyle, ComponentXL, ComponentL, ComponentM, ComponentS, ComponentXS, ComponentXXS, ComponentResponsive } from './typography';\nimport { ComponentXLStyling, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling } from './typography';\nimport { ParagraphXlStyling, ParagraphLStyling, ParagraphMStyling, ParagraphSStyling, ParagraphXSStyling } from './typography';\nimport { HeadlineXLStyling, HeadlineLStyling, HeadlineMStyling, HeadlineSStyling, HeadlineXSStyling, HeadlineXXSStyling } from './typography';\n\nimport globalStyles from './global';\n\nexport { COLORS, BREAKPOINTS, BOXSHADOWS, globalStyles };\n\nexport { TYPOGRAPHY };\nexport { HeadlineXL, HeadlineL, HeadlineM, HeadlineS, HeadlineXS, HeadlineXXS };\nexport { ParagraphTextStyle, ParagraphXL, ParagraphL, ParagraphM, ParagraphS, ParagraphXS };\nexport { ComponentTextStyle, ComponentXL, ComponentL, ComponentM, ComponentS, ComponentXS, ComponentXXS, ComponentResponsive };\nexport { ComponentXLStyling, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling };\nexport { ParagraphXlStyling, ParagraphLStyling, ParagraphMStyling, ParagraphSStyling, ParagraphXSStyling };\nexport { HeadlineXLStyling, HeadlineLStyling, HeadlineMStyling, HeadlineSStyling, HeadlineXSStyling, HeadlineXXSStyling };\n\nexport const scrollBarStyling = css`\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ${COLORS.white};\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ${COLORS.neutral_200};\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ${COLORS.neutral_400};\n  }\n`;\n\nexport {Z_INDEXES} from './z-indexes'\n"],"file":"index.cjs"}
+{"version":3,"sources":["../../src/styles/index.ts"],"names":["scrollBarStyling","size","Size","Small","css","Medium","COLORS","neutral_100","neutral_500","primary_700","primary_800"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AAQA;;AACA;;AA2CA;;;;AA/BO,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB;AAAA,MAACC,IAAD,uEAAkCC,YAAKC,KAAvC;AAAA,aAAiDC,qBAAjD,wjBAGnBH,IAAI,IAAIC,YAAKG,MAAb,GAAsB,KAAtB,GAA8B,KAHX,EAIlBJ,IAAI,IAAIC,YAAKG,MAAb,GAAsB,KAAtB,GAA8B,KAJZ,EAUdC,gBAAOC,WAVO,EAgBdD,gBAAOE,WAhBO,EAsBdF,gBAAOG,WAtBO,EA2BdH,gBAAOI,WA3BO;AAAA,CAAzB","sourcesContent":["import { css } from 'styled-components';\nimport COLORS from './colors';\nimport BREAKPOINTS from './breakpoints';\nimport { BOXSHADOWS } from './shadowstyles';\n\nimport { TYPOGRAPHY } from './typography';\nimport { HeadlineXL, HeadlineL, HeadlineM, HeadlineS, HeadlineXS, HeadlineXXS } from './typography';\nimport { ParagraphTextStyle, ParagraphXL, ParagraphL, ParagraphM, ParagraphS, ParagraphXS } from './typography';\nimport { ComponentTextStyle, ComponentXL, ComponentL, ComponentM, ComponentS, ComponentXS, ComponentXXS, ComponentResponsive } from './typography';\nimport { ComponentXLStyling, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling } from './typography';\nimport { ParagraphXlStyling, ParagraphLStyling, ParagraphMStyling, ParagraphSStyling, ParagraphXSStyling } from './typography';\nimport { HeadlineXLStyling, HeadlineLStyling, HeadlineMStyling, HeadlineSStyling, HeadlineXSStyling, HeadlineXXSStyling } from './typography';\n\nimport globalStyles from './global';\nimport { Size } from '../types';\n\nexport { COLORS, BREAKPOINTS, BOXSHADOWS, globalStyles };\n\nexport { TYPOGRAPHY };\nexport { HeadlineXL, HeadlineL, HeadlineM, HeadlineS, HeadlineXS, HeadlineXXS };\nexport { ParagraphTextStyle, ParagraphXL, ParagraphL, ParagraphM, ParagraphS, ParagraphXS };\nexport { ComponentTextStyle, ComponentXL, ComponentL, ComponentM, ComponentS, ComponentXS, ComponentXXS, ComponentResponsive };\nexport { ComponentXLStyling, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling };\nexport { ParagraphXlStyling, ParagraphLStyling, ParagraphMStyling, ParagraphSStyling, ParagraphXSStyling };\nexport { HeadlineXLStyling, HeadlineLStyling, HeadlineMStyling, HeadlineSStyling, HeadlineXSStyling, HeadlineXXSStyling };\n\nexport const scrollBarStyling = (size: Size.Small | Size.Medium = Size.Small) => css`\n  \n  ::-webkit-scrollbar {\n    width: ${size == Size.Medium ? '6px' : '4px'};\n    height: ${size == Size.Medium ? '6px' : '4px'};\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ${COLORS.neutral_100};\n    border-radius: 6px;\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ${COLORS.neutral_500};\n    border-radius: 4px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ${COLORS.primary_700};\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:active {\n    background: ${COLORS.primary_800};\n  }\n`;\n\nexport {Z_INDEXES} from './z-indexes'\n"],"file":"index.cjs"}

package/dist/styles/index.d.ts

@@ -9,6 +9,7 @@ import { ComponentXLStyling, ComponentLStyling, ComponentMStyling, ComponentSSty
 import { ParagraphXlStyling, ParagraphLStyling, ParagraphMStyling, ParagraphSStyling, ParagraphXSStyling } from './typography';
 import { HeadlineXLStyling, HeadlineLStyling, HeadlineMStyling, HeadlineSStyling, HeadlineXSStyling, HeadlineXXSStyling } from './typography';
 import globalStyles from './global';
+import { Size } from '../types';
 export { COLORS, BREAKPOINTS, BOXSHADOWS, globalStyles };
 export { TYPOGRAPHY };
 export { HeadlineXL, HeadlineL, HeadlineM, HeadlineS, HeadlineXS, HeadlineXXS };
@@ -17,5 +18,5 @@ export { ComponentTextStyle, ComponentXL, ComponentL, ComponentM, ComponentS, Co
 export { ComponentXLStyling, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling };
 export { ParagraphXlStyling, ParagraphLStyling, ParagraphMStyling, ParagraphSStyling, ParagraphXSStyling };
 export { HeadlineXLStyling, HeadlineLStyling, HeadlineMStyling, HeadlineSStyling, HeadlineXSStyling, HeadlineXXSStyling };
-export declare const scrollBarStyling: import("styled-components").FlattenSimpleInterpolation;
+export declare const scrollBarStyling: (size?: Size.Small | Size.Medium) => import("styled-components").FlattenSimpleInterpolation;
 export { Z_INDEXES } from './z-indexes';

package/dist/styles/index.js

@@ -14,6 +14,7 @@ import { ComponentXLStyling, ComponentLStyling, ComponentMStyling, ComponentSSty
 import { ParagraphXlStyling, ParagraphLStyling, ParagraphMStyling, ParagraphSStyling, ParagraphXSStyling } from './typography';
 import { HeadlineXLStyling, HeadlineLStyling, HeadlineMStyling, HeadlineSStyling, HeadlineXSStyling, HeadlineXXSStyling } from './typography';
 import globalStyles from './global';
+import { Size } from '../types';
 export { COLORS, BREAKPOINTS, BOXSHADOWS, globalStyles };
 export { TYPOGRAPHY };
 export { HeadlineXL, HeadlineL, HeadlineM, HeadlineS, HeadlineXS, HeadlineXXS };
@@ -22,6 +23,9 @@ export { ComponentTextStyle, ComponentXL, ComponentL, ComponentM, ComponentS, Co
 export { ComponentXLStyling, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling };
 export { ParagraphXlStyling, ParagraphLStyling, ParagraphMStyling, ParagraphSStyling, ParagraphXSStyling };
 export { HeadlineXLStyling, HeadlineLStyling, HeadlineMStyling, HeadlineSStyling, HeadlineXSStyling, HeadlineXXSStyling };
-export var scrollBarStyling = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ", ";\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), COLORS.white, COLORS.neutral_200, COLORS.neutral_400);
+export var scrollBarStyling = function scrollBarStyling() {
+  var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Size.Small;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  \n  ::-webkit-scrollbar {\n    width: ", ";\n    height: ", ";\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ", ";\n    border-radius: 6px;\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 4px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:active {\n    background: ", ";\n  }\n"])), size == Size.Medium ? '6px' : '4px', size == Size.Medium ? '6px' : '4px', COLORS.neutral_100, COLORS.neutral_500, COLORS.primary_700, COLORS.primary_800);
+};
 export { Z_INDEXES } from './z-indexes';
 //# sourceMappingURL=index.js.map

package/dist/styles/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/styles/index.ts"],"names":["css","COLORS","BREAKPOINTS","BOXSHADOWS","TYPOGRAPHY","HeadlineXL","HeadlineL","HeadlineM","HeadlineS","HeadlineXS","HeadlineXXS","ParagraphTextStyle","ParagraphXL","ParagraphL","ParagraphM","ParagraphS","ParagraphXS","ComponentTextStyle","ComponentXL","ComponentL","ComponentM","ComponentS","ComponentXS","ComponentXXS","ComponentResponsive","ComponentXLStyling","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","ParagraphXlStyling","ParagraphLStyling","ParagraphMStyling","ParagraphSStyling","ParagraphXSStyling","HeadlineXLStyling","HeadlineLStyling","HeadlineMStyling","HeadlineSStyling","HeadlineXSStyling","HeadlineXXSStyling","globalStyles","scrollBarStyling","white","neutral_200","neutral_400","Z_INDEXES"],"mappings":";;;;AAAA,SAASA,GAAT,QAAoB,mBAApB;AACA,OAAOC,MAAP,MAAmB,UAAnB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AACA,SAASC,UAAT,QAA2B,gBAA3B;AAEA,SAASC,UAAT,QAA2B,cAA3B;AACA,SAASC,UAAT,EAAqBC,SAArB,EAAgCC,SAAhC,EAA2CC,SAA3C,EAAsDC,UAAtD,EAAkEC,WAAlE,QAAqF,cAArF;AACA,SAASC,kBAAT,EAA6BC,WAA7B,EAA0CC,UAA1C,EAAsDC,UAAtD,EAAkEC,UAAlE,EAA8EC,WAA9E,QAAiG,cAAjG;AACA,SAASC,kBAAT,EAA6BC,WAA7B,EAA0CC,UAA1C,EAAsDC,UAAtD,EAAkEC,UAAlE,EAA8EC,WAA9E,EAA2FC,YAA3F,EAAyGC,mBAAzG,QAAoI,cAApI;AACA,SAASC,kBAAT,EAA6BC,iBAA7B,EAAgDC,iBAAhD,EAAmEC,iBAAnE,EAAsFC,kBAAtF,EAA0GC,mBAA1G,QAAqI,cAArI;AACA,SAASC,kBAAT,EAA6BC,iBAA7B,EAAgDC,iBAAhD,EAAmEC,iBAAnE,EAAsFC,kBAAtF,QAAgH,cAAhH;AACA,SAASC,iBAAT,EAA4BC,gBAA5B,EAA8CC,gBAA9C,EAAgEC,gBAAhE,EAAkFC,iBAAlF,EAAqGC,kBAArG,QAA+H,cAA/H;AAEA,OAAOC,YAAP,MAAyB,UAAzB;AAEA,SAASzC,MAAT,EAAiBC,WAAjB,EAA8BC,UAA9B,EAA0CuC,YAA1C;AAEA,SAAStC,UAAT;AACA,SAASC,UAAT,EAAqBC,SAArB,EAAgCC,SAAhC,EAA2CC,SAA3C,EAAsDC,UAAtD,EAAkEC,WAAlE;AACA,SAASC,kBAAT,EAA6BC,WAA7B,EAA0CC,UAA1C,EAAsDC,UAAtD,EAAkEC,UAAlE,EAA8EC,WAA9E;AACA,SAASC,kBAAT,EAA6BC,WAA7B,EAA0CC,UAA1C,EAAsDC,UAAtD,EAAkEC,UAAlE,EAA8EC,WAA9E,EAA2FC,YAA3F,EAAyGC,mBAAzG;AACA,SAASC,kBAAT,EAA6BC,iBAA7B,EAAgDC,iBAAhD,EAAmEC,iBAAnE,EAAsFC,kBAAtF,EAA0GC,mBAA1G;AACA,SAASC,kBAAT,EAA6BC,iBAA7B,EAAgDC,iBAAhD,EAAmEC,iBAAnE,EAAsFC,kBAAtF;AACA,SAASC,iBAAT,EAA4BC,gBAA5B,EAA8CC,gBAA9C,EAAgEC,gBAAhE,EAAkFC,iBAAlF,EAAqGC,kBAArG;AAEA,OAAO,IAAME,gBAAgB,GAAG3C,GAAH,0aASXC,MAAM,CAAC2C,KATI,EAcX3C,MAAM,CAAC4C,WAdI,EAoBX5C,MAAM,CAAC6C,WApBI,CAAtB;AAwBP,SAAQC,SAAR,QAAwB,aAAxB","sourcesContent":["import { css } from 'styled-components';\nimport COLORS from './colors';\nimport BREAKPOINTS from './breakpoints';\nimport { BOXSHADOWS } from './shadowstyles';\n\nimport { TYPOGRAPHY } from './typography';\nimport { HeadlineXL, HeadlineL, HeadlineM, HeadlineS, HeadlineXS, HeadlineXXS } from './typography';\nimport { ParagraphTextStyle, ParagraphXL, ParagraphL, ParagraphM, ParagraphS, ParagraphXS } from './typography';\nimport { ComponentTextStyle, ComponentXL, ComponentL, ComponentM, ComponentS, ComponentXS, ComponentXXS, ComponentResponsive } from './typography';\nimport { ComponentXLStyling, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling } from './typography';\nimport { ParagraphXlStyling, ParagraphLStyling, ParagraphMStyling, ParagraphSStyling, ParagraphXSStyling } from './typography';\nimport { HeadlineXLStyling, HeadlineLStyling, HeadlineMStyling, HeadlineSStyling, HeadlineXSStyling, HeadlineXXSStyling } from './typography';\n\nimport globalStyles from './global';\n\nexport { COLORS, BREAKPOINTS, BOXSHADOWS, globalStyles };\n\nexport { TYPOGRAPHY };\nexport { HeadlineXL, HeadlineL, HeadlineM, HeadlineS, HeadlineXS, HeadlineXXS };\nexport { ParagraphTextStyle, ParagraphXL, ParagraphL, ParagraphM, ParagraphS, ParagraphXS };\nexport { ComponentTextStyle, ComponentXL, ComponentL, ComponentM, ComponentS, ComponentXS, ComponentXXS, ComponentResponsive };\nexport { ComponentXLStyling, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling };\nexport { ParagraphXlStyling, ParagraphLStyling, ParagraphMStyling, ParagraphSStyling, ParagraphXSStyling };\nexport { HeadlineXLStyling, HeadlineLStyling, HeadlineMStyling, HeadlineSStyling, HeadlineXSStyling, HeadlineXXSStyling };\n\nexport const scrollBarStyling = css`\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ${COLORS.white};\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ${COLORS.neutral_200};\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ${COLORS.neutral_400};\n  }\n`;\n\nexport {Z_INDEXES} from './z-indexes'\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/styles/index.ts"],"names":["css","COLORS","BREAKPOINTS","BOXSHADOWS","TYPOGRAPHY","HeadlineXL","HeadlineL","HeadlineM","HeadlineS","HeadlineXS","HeadlineXXS","ParagraphTextStyle","ParagraphXL","ParagraphL","ParagraphM","ParagraphS","ParagraphXS","ComponentTextStyle","ComponentXL","ComponentL","ComponentM","ComponentS","ComponentXS","ComponentXXS","ComponentResponsive","ComponentXLStyling","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","ParagraphXlStyling","ParagraphLStyling","ParagraphMStyling","ParagraphSStyling","ParagraphXSStyling","HeadlineXLStyling","HeadlineLStyling","HeadlineMStyling","HeadlineSStyling","HeadlineXSStyling","HeadlineXXSStyling","globalStyles","Size","scrollBarStyling","size","Small","Medium","neutral_100","neutral_500","primary_700","primary_800","Z_INDEXES"],"mappings":";;;;AAAA,SAASA,GAAT,QAAoB,mBAApB;AACA,OAAOC,MAAP,MAAmB,UAAnB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AACA,SAASC,UAAT,QAA2B,gBAA3B;AAEA,SAASC,UAAT,QAA2B,cAA3B;AACA,SAASC,UAAT,EAAqBC,SAArB,EAAgCC,SAAhC,EAA2CC,SAA3C,EAAsDC,UAAtD,EAAkEC,WAAlE,QAAqF,cAArF;AACA,SAASC,kBAAT,EAA6BC,WAA7B,EAA0CC,UAA1C,EAAsDC,UAAtD,EAAkEC,UAAlE,EAA8EC,WAA9E,QAAiG,cAAjG;AACA,SAASC,kBAAT,EAA6BC,WAA7B,EAA0CC,UAA1C,EAAsDC,UAAtD,EAAkEC,UAAlE,EAA8EC,WAA9E,EAA2FC,YAA3F,EAAyGC,mBAAzG,QAAoI,cAApI;AACA,SAASC,kBAAT,EAA6BC,iBAA7B,EAAgDC,iBAAhD,EAAmEC,iBAAnE,EAAsFC,kBAAtF,EAA0GC,mBAA1G,QAAqI,cAArI;AACA,SAASC,kBAAT,EAA6BC,iBAA7B,EAAgDC,iBAAhD,EAAmEC,iBAAnE,EAAsFC,kBAAtF,QAAgH,cAAhH;AACA,SAASC,iBAAT,EAA4BC,gBAA5B,EAA8CC,gBAA9C,EAAgEC,gBAAhE,EAAkFC,iBAAlF,EAAqGC,kBAArG,QAA+H,cAA/H;AAEA,OAAOC,YAAP,MAAyB,UAAzB;AACA,SAASC,IAAT,QAAqB,UAArB;AAEA,SAAS1C,MAAT,EAAiBC,WAAjB,EAA8BC,UAA9B,EAA0CuC,YAA1C;AAEA,SAAStC,UAAT;AACA,SAASC,UAAT,EAAqBC,SAArB,EAAgCC,SAAhC,EAA2CC,SAA3C,EAAsDC,UAAtD,EAAkEC,WAAlE;AACA,SAASC,kBAAT,EAA6BC,WAA7B,EAA0CC,UAA1C,EAAsDC,UAAtD,EAAkEC,UAAlE,EAA8EC,WAA9E;AACA,SAASC,kBAAT,EAA6BC,WAA7B,EAA0CC,UAA1C,EAAsDC,UAAtD,EAAkEC,UAAlE,EAA8EC,WAA9E,EAA2FC,YAA3F,EAAyGC,mBAAzG;AACA,SAASC,kBAAT,EAA6BC,iBAA7B,EAAgDC,iBAAhD,EAAmEC,iBAAnE,EAAsFC,kBAAtF,EAA0GC,mBAA1G;AACA,SAASC,kBAAT,EAA6BC,iBAA7B,EAAgDC,iBAAhD,EAAmEC,iBAAnE,EAAsFC,kBAAtF;AACA,SAASC,iBAAT,EAA4BC,gBAA5B,EAA8CC,gBAA9C,EAAgEC,gBAAhE,EAAkFC,iBAAlF,EAAqGC,kBAArG;AAEA,OAAO,IAAMG,gBAAgB,GAAG,SAAnBA,gBAAmB;AAAA,MAACC,IAAD,uEAAkCF,IAAI,CAACG,KAAvC;AAAA,SAAiD9C,GAAjD,yiBAGnB6C,IAAI,IAAIF,IAAI,CAACI,MAAb,GAAsB,KAAtB,GAA8B,KAHX,EAIlBF,IAAI,IAAIF,IAAI,CAACI,MAAb,GAAsB,KAAtB,GAA8B,KAJZ,EAUd9C,MAAM,CAAC+C,WAVO,EAgBd/C,MAAM,CAACgD,WAhBO,EAsBdhD,MAAM,CAACiD,WAtBO,EA2BdjD,MAAM,CAACkD,WA3BO;AAAA,CAAzB;AA+BP,SAAQC,SAAR,QAAwB,aAAxB","sourcesContent":["import { css } from 'styled-components';\nimport COLORS from './colors';\nimport BREAKPOINTS from './breakpoints';\nimport { BOXSHADOWS } from './shadowstyles';\n\nimport { TYPOGRAPHY } from './typography';\nimport { HeadlineXL, HeadlineL, HeadlineM, HeadlineS, HeadlineXS, HeadlineXXS } from './typography';\nimport { ParagraphTextStyle, ParagraphXL, ParagraphL, ParagraphM, ParagraphS, ParagraphXS } from './typography';\nimport { ComponentTextStyle, ComponentXL, ComponentL, ComponentM, ComponentS, ComponentXS, ComponentXXS, ComponentResponsive } from './typography';\nimport { ComponentXLStyling, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling } from './typography';\nimport { ParagraphXlStyling, ParagraphLStyling, ParagraphMStyling, ParagraphSStyling, ParagraphXSStyling } from './typography';\nimport { HeadlineXLStyling, HeadlineLStyling, HeadlineMStyling, HeadlineSStyling, HeadlineXSStyling, HeadlineXXSStyling } from './typography';\n\nimport globalStyles from './global';\nimport { Size } from '../types';\n\nexport { COLORS, BREAKPOINTS, BOXSHADOWS, globalStyles };\n\nexport { TYPOGRAPHY };\nexport { HeadlineXL, HeadlineL, HeadlineM, HeadlineS, HeadlineXS, HeadlineXXS };\nexport { ParagraphTextStyle, ParagraphXL, ParagraphL, ParagraphM, ParagraphS, ParagraphXS };\nexport { ComponentTextStyle, ComponentXL, ComponentL, ComponentM, ComponentS, ComponentXS, ComponentXXS, ComponentResponsive };\nexport { ComponentXLStyling, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling };\nexport { ParagraphXlStyling, ParagraphLStyling, ParagraphMStyling, ParagraphSStyling, ParagraphXSStyling };\nexport { HeadlineXLStyling, HeadlineLStyling, HeadlineMStyling, HeadlineSStyling, HeadlineXSStyling, HeadlineXXSStyling };\n\nexport const scrollBarStyling = (size: Size.Small | Size.Medium = Size.Small) => css`\n  \n  ::-webkit-scrollbar {\n    width: ${size == Size.Medium ? '6px' : '4px'};\n    height: ${size == Size.Medium ? '6px' : '4px'};\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ${COLORS.neutral_100};\n    border-radius: 6px;\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ${COLORS.neutral_500};\n    border-radius: 4px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ${COLORS.primary_700};\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:active {\n    background: ${COLORS.primary_800};\n  }\n`;\n\nexport {Z_INDEXES} from './z-indexes'\n"],"file":"index.js"}

package/package.json

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