@laerdal/life-react-components 2.1.1-dev.3 → 2.1.1-dev.5

package/dist/Modals/ModalContent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ModalContent.cjs","names":["HeaderText","styled","div","HeaderTitle","ComponentMStyling","ComponentTextStyle","Bold","COLORS","black","HeaderNote","ComponentXXSStyling","Regular","neutral_600","HeaderActions","Header","TooltipContainer","Content","scrollBarStyling","Size","Small","FooterLeftContainer","FooterLeftNote","FooterLeftLink","ComponentSStyling","primary_500","FooterRightContainer","Footer","Wrapper","ComponentLStyling","ComponentXSStyling","ComponentXLStyling","ModalContent","props","tooltip","XSmall","cursor","headerActions","map","action","index","icon","rest","id","getLeftActionIconElement","leftFooterAction","React","cloneElement","size","Large","actionType","text","variant","e","preventDefault","isModalOpen","closeAction","Medium","title","note","children","footerActions","item","a","key","zIndex"],"sources":["../../src/Modals/ModalContent.tsx"],"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  zIndex?: number;\n  children?: React.ReactNode;\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"],"mappings":"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"}
+{"version":3,"file":"ModalContent.cjs","names":["HeaderText","styled","div","HeaderTitle","ComponentMStyling","ComponentTextStyle","Bold","COLORS","black","HeaderNote","ComponentXXSStyling","Regular","neutral_600","HeaderActions","Header","TooltipContainer","Content","scrollBarStyling","Size","Small","FooterLeftContainer","FooterLeftNote","FooterLeftLink","ComponentSStyling","primary_500","FooterRightContainer","Footer","Wrapper","ComponentLStyling","ComponentXSStyling","ComponentXLStyling","ModalContent","props","tooltip","XSmall","cursor","headerActions","map","action","index","icon","rest","id","getLeftActionIconElement","leftFooterAction","React","cloneElement","size","Large","actionType","text","variant","e","preventDefault","isModalOpen","closeAction","Medium","title","note","children","footerActions","item","a","key","zIndex"],"sources":["../../src/Modals/ModalContent.tsx"],"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  zIndex?: number;\n  children?: React.ReactNode;\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 dataTestId={'content-modal-close-button'} 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"],"mappings":"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"}

package/dist/Modals/ModalContent.js

@@ -134,6 +134,7 @@ var ModalContent = function ModalContent(props) {
           })]
         }), /*#__PURE__*/_jsxs(HeaderActions, {
           children: [tooltip(), headerActions(), /*#__PURE__*/_jsx(IconButton, {
+            dataTestId: 'content-modal-close-button',
             id: 'content-modal-close-button',
             variant: "secondary",
             shape: "circular",

package/dist/Modals/ModalContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalContent.js","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","zIndex"],"sources":["../../src/Modals/ModalContent.tsx"],"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  zIndex?: number;\n  children?: React.ReactNode;\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"],"mappings":"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"}
+{"version":3,"file":"ModalContent.js","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","zIndex"],"sources":["../../src/Modals/ModalContent.tsx"],"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  zIndex?: number;\n  children?: React.ReactNode;\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 dataTestId={'content-modal-close-button'} 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"],"mappings":"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"}

package/dist/Tag/Tag.cjs

@@ -20,13 +20,11 @@ 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; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  height: 24px;\n  width: calc(100%);\n  max-width: fit-content;\n  justify-content: center;\n  min-width: ", ";\n  border-radius: 2px;\n\n  &.neutral {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.positive {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.warning {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.critical {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.accent1 {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.accent2 {\n    background-color: ", ";\n    color: ", ";\n  }\n\n"])), function (props) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  padding: 4px;\n  height: 24px;\n  width: calc(100%);\n  max-width: fit-content;\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  border-radius: 2px;\n  box-sizing: border-box;\n\n  &.neutral {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.positive {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.warning {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.critical {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.accent1 {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.accent2 {\n    background-color: ", ";\n    color: ", ";\n  }\n\n"])), function (props) {
   return props.isLabelPresent ? '64px' : '';
 }, _.COLORS.neutral_100, _.COLORS.neutral_600, _.COLORS.correct_100, _.COLORS.correct_600, _.COLORS.warning_100, _.COLORS.warning_600, _.COLORS.critical_100, _.COLORS.critical_600, _.COLORS.accent1_100, _.COLORS.accent1_600, _.COLORS.accent2_100, _.COLORS.accent2_600);
-var IconContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 2px;\n  margin: 4px;\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n"])));
-var TextContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 2px;\n  margin: ", ";\n  height: 16px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;  \n  ", "\n"])), function (props) {
-  return props.icon ? "4px 8px 4px 0" : "4px 8px";
-}, (0, _.ComponentXSStyling)(_.ComponentTextStyle.Bold, null));
+var IconContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 16px;\n  height: 16px;\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n"])));
+var TextContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  height: 16px;\n  padding: 0 4px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;  \n  ", "\n"])), (0, _.ComponentXSStyling)(_.ComponentTextStyle.Bold, null));
 var Tag = function Tag(_ref) {
   var label = _ref.label,
     icon = _ref.icon,

package/dist/Tag/Tag.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.cjs","names":["Container","styled","div","props","isLabelPresent","COLORS","neutral_100","neutral_600","correct_100","correct_600","warning_100","warning_600","critical_100","critical_600","accent1_100","accent1_600","accent2_100","accent2_600","IconContainer","TextContainer","icon","ComponentXSStyling","ComponentTextStyle","Bold","Tag","label","variant","className","rest","cls"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\n\nconst Container = styled.div<{variant: TagVariants, isLabelPresent: boolean}>`\n  display: flex;\n  height: 24px;\n  width: calc(100%);\n  max-width: fit-content;\n  justify-content: center;\n  min-width: ${props=>props.isLabelPresent ? '64px' : ''};\n  border-radius: 2px;\n\n  &.neutral {\n    background-color: ${COLORS.neutral_100};\n    color: ${COLORS.neutral_600};\n  }\n  &.positive {\n    background-color: ${COLORS.correct_100};\n    color: ${COLORS.correct_600};\n  }\n  &.warning {\n    background-color: ${COLORS.warning_100};\n    color: ${COLORS.warning_600};\n  }\n  &.critical {\n    background-color: ${COLORS.critical_100};\n    color: ${COLORS.critical_600};\n  }\n  &.accent1 {\n    background-color: ${COLORS.accent1_100};\n    color: ${COLORS.accent1_600};\n  }\n  &.accent2 {\n    background-color: ${COLORS.accent2_100};\n    color: ${COLORS.accent2_600};\n  }\n\n`;\n\nconst IconContainer = styled.div<{variant: TagVariants}>`\n  border-radius: 2px;\n  margin: 4px;\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n`;\n\nconst TextContainer = styled.div<{variant: TagVariants, icon: React.ReactNode}>`\n  border-radius: 2px;\n  margin: ${props=> props.icon ? `4px 8px 4px 0` : `4px 8px`};\n  height: 16px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;  \n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n`;\n\n\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\n\ntype TagProps = React.HTMLAttributes<HTMLDivElement> & {\n  label?: string;\n  icon?: React.ReactNode;\n  variant?: TagVariants;\n}\n\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral', className, ...rest}) => {\n  const cls = `${className ?? ''} ${variant}`;\n  return (   \n    <Container variant={variant} isLabelPresent={!!label} className={cls} {...rest}>\n      {icon && <IconContainer variant={variant} data-testid={'iconContainer'}>\n          {icon}\n        </IconContainer>\n      }\n      {label && <TextContainer variant={variant} icon={icon}>\n          {label}\n        </TextContainer>\n      }\n    </Container>\n  );\n};\n\nexport default Tag;\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AAAoE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEpE,IAAMA,SAAS,GAAGC,yBAAM,CAACC,GAAG,yoBAMb,UAAAC,KAAK;EAAA,OAAEA,KAAK,CAACC,cAAc,GAAG,MAAM,GAAG,EAAE;AAAA,GAIhCC,QAAM,CAACC,WAAW,EAC7BD,QAAM,CAACE,WAAW,EAGPF,QAAM,CAACG,WAAW,EAC7BH,QAAM,CAACI,WAAW,EAGPJ,QAAM,CAACK,WAAW,EAC7BL,QAAM,CAACM,WAAW,EAGPN,QAAM,CAACO,YAAY,EAC9BP,QAAM,CAACQ,YAAY,EAGRR,QAAM,CAACS,WAAW,EAC7BT,QAAM,CAACU,WAAW,EAGPV,QAAM,CAACW,WAAW,EAC7BX,QAAM,CAACY,WAAW,CAG9B;AAED,IAAMC,aAAa,GAAGjB,yBAAM,CAACC,GAAG,iLAO/B;AAED,IAAMiB,aAAa,GAAGlB,yBAAM,CAACC,GAAG,oOAEpB,UAAAC,KAAK;EAAA,OAAGA,KAAK,CAACiB,IAAI,8BAA8B;AAAA,GAKxD,IAAAC,oBAAkB,EAACC,oBAAkB,CAACC,IAAI,EAAE,IAAI,CAAC,CACpD;AAWD,IAAMC,GAAsC,GAAG,SAAzCA,GAAsC,OAA6D;EAAA,IAAxDC,KAAK,QAALA,KAAK;IAAEL,IAAI,QAAJA,IAAI;IAAA,oBAAEM,OAAO;IAAPA,OAAO,6BAAC,SAAS;IAAEC,SAAS,QAATA,SAAS;IAAKC,IAAI;EACjG,IAAMC,GAAG,aAAMF,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,EAAE,cAAID,OAAO,CAAE;EAC3C,oBACE,sBAAC,SAAS;IAAC,OAAO,EAAEA,OAAQ;IAAC,cAAc,EAAE,CAAC,CAACD,KAAM;IAAC,SAAS,EAAEI;EAAI,GAAKD,IAAI;IAAA,WAC3ER,IAAI,iBAAI,qBAAC,aAAa;MAAC,OAAO,EAAEM,OAAQ;MAAC,eAAa,eAAgB;MAAA,UAClEN;IAAI,EACS,EAEjBK,KAAK,iBAAI,qBAAC,aAAa;MAAC,OAAO,EAAEC,OAAQ;MAAC,IAAI,EAAEN,IAAK;MAAA,UACjDK;IAAK,EACQ;EAAA,GAER;AAEhB,CAAC;AAAC;EAnBAA,KAAK;EACLL,IAAI;EACJM,OAAO,4BALiB,SAAS,EAAG,UAAU,EAAG,SAAS,EAAG,UAAU,EAAG,SAAS,EAAG,SAAS;AAAA;AAAA,eAwBlFF,GAAG;AAAA"}
+{"version":3,"file":"Tag.cjs","names":["Container","styled","div","props","isLabelPresent","COLORS","neutral_100","neutral_600","correct_100","correct_600","warning_100","warning_600","critical_100","critical_600","accent1_100","accent1_600","accent2_100","accent2_600","IconContainer","TextContainer","ComponentXSStyling","ComponentTextStyle","Bold","Tag","label","icon","variant","className","rest","cls"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\n\nconst Container = styled.div<{variant: TagVariants, isLabelPresent: boolean}>`\n  display: flex;\n  padding: 4px;\n  height: 24px;\n  width: calc(100%);\n  max-width: fit-content;\n  align-items: center;\n  justify-content: center;\n  min-width: ${props=>props.isLabelPresent ? '64px' : ''};\n  border-radius: 2px;\n  box-sizing: border-box;\n\n  &.neutral {\n    background-color: ${COLORS.neutral_100};\n    color: ${COLORS.neutral_600};\n  }\n  &.positive {\n    background-color: ${COLORS.correct_100};\n    color: ${COLORS.correct_600};\n  }\n  &.warning {\n    background-color: ${COLORS.warning_100};\n    color: ${COLORS.warning_600};\n  }\n  &.critical {\n    background-color: ${COLORS.critical_100};\n    color: ${COLORS.critical_600};\n  }\n  &.accent1 {\n    background-color: ${COLORS.accent1_100};\n    color: ${COLORS.accent1_600};\n  }\n  &.accent2 {\n    background-color: ${COLORS.accent2_100};\n    color: ${COLORS.accent2_600};\n  }\n\n`;\n\nconst IconContainer = styled.div<{variant: TagVariants}>`\n  display: flex;\n  width: 16px;\n  height: 16px;\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n`;\n\nconst TextContainer = styled.div<{variant: TagVariants, icon: React.ReactNode}>`\n  height: 16px;\n  padding: 0 4px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;  \n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n`;\n\n\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\n\ntype TagProps = React.HTMLAttributes<HTMLDivElement> & {\n  label?: string;\n  icon?: React.ReactNode;\n  variant?: TagVariants;\n}\n\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral', className, ...rest}) => {\n  const cls = `${className ?? ''} ${variant}`;\n  return (   \n    <Container variant={variant} isLabelPresent={!!label} className={cls} {...rest}>\n      {icon && <IconContainer variant={variant} data-testid={'iconContainer'}>\n          {icon}\n        </IconContainer>\n      }\n      {label && <TextContainer variant={variant} icon={icon}>\n          {label}\n        </TextContainer>\n      }\n    </Container>\n  );\n};\n\nexport default Tag;\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AAAoE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEpE,IAAMA,SAAS,GAAGC,yBAAM,CAACC,GAAG,6sBAQb,UAAAC,KAAK;EAAA,OAAEA,KAAK,CAACC,cAAc,GAAG,MAAM,GAAG,EAAE;AAAA,GAKhCC,QAAM,CAACC,WAAW,EAC7BD,QAAM,CAACE,WAAW,EAGPF,QAAM,CAACG,WAAW,EAC7BH,QAAM,CAACI,WAAW,EAGPJ,QAAM,CAACK,WAAW,EAC7BL,QAAM,CAACM,WAAW,EAGPN,QAAM,CAACO,YAAY,EAC9BP,QAAM,CAACQ,YAAY,EAGRR,QAAM,CAACS,WAAW,EAC7BT,QAAM,CAACU,WAAW,EAGPV,QAAM,CAACW,WAAW,EAC7BX,QAAM,CAACY,WAAW,CAG9B;AAED,IAAMC,aAAa,GAAGjB,yBAAM,CAACC,GAAG,6LAQ/B;AAED,IAAMiB,aAAa,GAAGlB,yBAAM,CAACC,GAAG,+MAM5B,IAAAkB,oBAAkB,EAACC,oBAAkB,CAACC,IAAI,EAAE,IAAI,CAAC,CACpD;AAWD,IAAMC,GAAsC,GAAG,SAAzCA,GAAsC,OAA6D;EAAA,IAAxDC,KAAK,QAALA,KAAK;IAAEC,IAAI,QAAJA,IAAI;IAAA,oBAAEC,OAAO;IAAPA,OAAO,6BAAC,SAAS;IAAEC,SAAS,QAATA,SAAS;IAAKC,IAAI;EACjG,IAAMC,GAAG,aAAMF,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,EAAE,cAAID,OAAO,CAAE;EAC3C,oBACE,sBAAC,SAAS;IAAC,OAAO,EAAEA,OAAQ;IAAC,cAAc,EAAE,CAAC,CAACF,KAAM;IAAC,SAAS,EAAEK;EAAI,GAAKD,IAAI;IAAA,WAC3EH,IAAI,iBAAI,qBAAC,aAAa;MAAC,OAAO,EAAEC,OAAQ;MAAC,eAAa,eAAgB;MAAA,UAClED;IAAI,EACS,EAEjBD,KAAK,iBAAI,qBAAC,aAAa;MAAC,OAAO,EAAEE,OAAQ;MAAC,IAAI,EAAED,IAAK;MAAA,UACjDD;IAAK,EACQ;EAAA,GAER;AAEhB,CAAC;AAAC;EAnBAA,KAAK;EACLC,IAAI;EACJC,OAAO,4BALiB,SAAS,EAAG,UAAU,EAAG,SAAS,EAAG,UAAU,EAAG,SAAS,EAAG,SAAS;AAAA;AAAA,eAwBlFH,GAAG;AAAA"}

package/dist/Tag/Tag.js

@@ -11,13 +11,11 @@ import styled from 'styled-components';
 import { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  height: 24px;\n  width: calc(100%);\n  max-width: fit-content;\n  justify-content: center;\n  min-width: ", ";\n  border-radius: 2px;\n\n  &.neutral {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.positive {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.warning {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.critical {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.accent1 {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.accent2 {\n    background-color: ", ";\n    color: ", ";\n  }\n\n"])), function (props) {
+var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  padding: 4px;\n  height: 24px;\n  width: calc(100%);\n  max-width: fit-content;\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  border-radius: 2px;\n  box-sizing: border-box;\n\n  &.neutral {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.positive {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.warning {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.critical {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.accent1 {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.accent2 {\n    background-color: ", ";\n    color: ", ";\n  }\n\n"])), function (props) {
   return props.isLabelPresent ? '64px' : '';
 }, COLORS.neutral_100, COLORS.neutral_600, COLORS.correct_100, COLORS.correct_600, COLORS.warning_100, COLORS.warning_600, COLORS.critical_100, COLORS.critical_600, COLORS.accent1_100, COLORS.accent1_600, COLORS.accent2_100, COLORS.accent2_600);
-var IconContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-radius: 2px;\n  margin: 4px;\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n"])));
-var TextContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  border-radius: 2px;\n  margin: ", ";\n  height: 16px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;  \n  ", "\n"])), function (props) {
-  return props.icon ? "4px 8px 4px 0" : "4px 8px";
-}, ComponentXSStyling(ComponentTextStyle.Bold, null));
+var IconContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 16px;\n  height: 16px;\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n"])));
+var TextContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 16px;\n  padding: 0 4px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;  \n  ", "\n"])), ComponentXSStyling(ComponentTextStyle.Bold, null));
 var Tag = function Tag(_ref) {
   var label = _ref.label,
     icon = _ref.icon,

package/dist/Tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","names":["React","styled","COLORS","ComponentTextStyle","ComponentXSStyling","Container","div","props","isLabelPresent","neutral_100","neutral_600","correct_100","correct_600","warning_100","warning_600","critical_100","critical_600","accent1_100","accent1_600","accent2_100","accent2_600","IconContainer","TextContainer","icon","Bold","Tag","label","variant","className","rest","cls"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\n\nconst Container = styled.div<{variant: TagVariants, isLabelPresent: boolean}>`\n  display: flex;\n  height: 24px;\n  width: calc(100%);\n  max-width: fit-content;\n  justify-content: center;\n  min-width: ${props=>props.isLabelPresent ? '64px' : ''};\n  border-radius: 2px;\n\n  &.neutral {\n    background-color: ${COLORS.neutral_100};\n    color: ${COLORS.neutral_600};\n  }\n  &.positive {\n    background-color: ${COLORS.correct_100};\n    color: ${COLORS.correct_600};\n  }\n  &.warning {\n    background-color: ${COLORS.warning_100};\n    color: ${COLORS.warning_600};\n  }\n  &.critical {\n    background-color: ${COLORS.critical_100};\n    color: ${COLORS.critical_600};\n  }\n  &.accent1 {\n    background-color: ${COLORS.accent1_100};\n    color: ${COLORS.accent1_600};\n  }\n  &.accent2 {\n    background-color: ${COLORS.accent2_100};\n    color: ${COLORS.accent2_600};\n  }\n\n`;\n\nconst IconContainer = styled.div<{variant: TagVariants}>`\n  border-radius: 2px;\n  margin: 4px;\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n`;\n\nconst TextContainer = styled.div<{variant: TagVariants, icon: React.ReactNode}>`\n  border-radius: 2px;\n  margin: ${props=> props.icon ? `4px 8px 4px 0` : `4px 8px`};\n  height: 16px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;  \n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n`;\n\n\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\n\ntype TagProps = React.HTMLAttributes<HTMLDivElement> & {\n  label?: string;\n  icon?: React.ReactNode;\n  variant?: TagVariants;\n}\n\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral', className, ...rest}) => {\n  const cls = `${className ?? ''} ${variant}`;\n  return (   \n    <Container variant={variant} isLabelPresent={!!label} className={cls} {...rest}>\n      {icon && <IconContainer variant={variant} data-testid={'iconContainer'}>\n          {icon}\n        </IconContainer>\n      }\n      {label && <TextContainer variant={variant} icon={icon}>\n          {label}\n        </TextContainer>\n      }\n    </Container>\n  );\n};\n\nexport default Tag;\n"],"mappings":";;;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,MAAM,EAAEC,kBAAkB,EAAEC,kBAAkB,QAAQ,IAAI;AAAC;AAAA;AAEpE,IAAMC,SAAS,GAAGJ,MAAM,CAACK,GAAG,2nBAMb,UAAAC,KAAK;EAAA,OAAEA,KAAK,CAACC,cAAc,GAAG,MAAM,GAAG,EAAE;AAAA,GAIhCN,MAAM,CAACO,WAAW,EAC7BP,MAAM,CAACQ,WAAW,EAGPR,MAAM,CAACS,WAAW,EAC7BT,MAAM,CAACU,WAAW,EAGPV,MAAM,CAACW,WAAW,EAC7BX,MAAM,CAACY,WAAW,EAGPZ,MAAM,CAACa,YAAY,EAC9Bb,MAAM,CAACc,YAAY,EAGRd,MAAM,CAACe,WAAW,EAC7Bf,MAAM,CAACgB,WAAW,EAGPhB,MAAM,CAACiB,WAAW,EAC7BjB,MAAM,CAACkB,WAAW,CAG9B;AAED,IAAMC,aAAa,GAAGpB,MAAM,CAACK,GAAG,mKAO/B;AAED,IAAMgB,aAAa,GAAGrB,MAAM,CAACK,GAAG,sNAEpB,UAAAC,KAAK;EAAA,OAAGA,KAAK,CAACgB,IAAI,8BAA8B;AAAA,GAKxDnB,kBAAkB,CAACD,kBAAkB,CAACqB,IAAI,EAAE,IAAI,CAAC,CACpD;AAWD,IAAMC,GAAsC,GAAG,SAAzCA,GAAsC,OAA6D;EAAA,IAAxDC,KAAK,QAALA,KAAK;IAAEH,IAAI,QAAJA,IAAI;IAAA,oBAAEI,OAAO;IAAPA,OAAO,6BAAC,SAAS;IAAEC,SAAS,QAATA,SAAS;IAAKC,IAAI;EACjG,IAAMC,GAAG,aAAMF,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,EAAE,cAAID,OAAO,CAAE;EAC3C,oBACE,MAAC,SAAS;IAAC,OAAO,EAAEA,OAAQ;IAAC,cAAc,EAAE,CAAC,CAACD,KAAM;IAAC,SAAS,EAAEI;EAAI,GAAKD,IAAI;IAAA,WAC3EN,IAAI,iBAAI,KAAC,aAAa;MAAC,OAAO,EAAEI,OAAQ;MAAC,eAAa,eAAgB;MAAA,UAClEJ;IAAI,EACS,EAEjBG,KAAK,iBAAI,KAAC,aAAa;MAAC,OAAO,EAAEC,OAAQ;MAAC,IAAI,EAAEJ,IAAK;MAAA,UACjDG;IAAK,EACQ;EAAA,GAER;AAEhB,CAAC;AAAC;EAnBAA,KAAK;EACLH,IAAI;EACJI,OAAO,aALiB,SAAS,EAAG,UAAU,EAAG,SAAS,EAAG,UAAU,EAAG,SAAS,EAAG,SAAS;AAAA;AAwBjG,eAAeF,GAAG"}
+{"version":3,"file":"Tag.js","names":["React","styled","COLORS","ComponentTextStyle","ComponentXSStyling","Container","div","props","isLabelPresent","neutral_100","neutral_600","correct_100","correct_600","warning_100","warning_600","critical_100","critical_600","accent1_100","accent1_600","accent2_100","accent2_600","IconContainer","TextContainer","Bold","Tag","label","icon","variant","className","rest","cls"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\n\nconst Container = styled.div<{variant: TagVariants, isLabelPresent: boolean}>`\n  display: flex;\n  padding: 4px;\n  height: 24px;\n  width: calc(100%);\n  max-width: fit-content;\n  align-items: center;\n  justify-content: center;\n  min-width: ${props=>props.isLabelPresent ? '64px' : ''};\n  border-radius: 2px;\n  box-sizing: border-box;\n\n  &.neutral {\n    background-color: ${COLORS.neutral_100};\n    color: ${COLORS.neutral_600};\n  }\n  &.positive {\n    background-color: ${COLORS.correct_100};\n    color: ${COLORS.correct_600};\n  }\n  &.warning {\n    background-color: ${COLORS.warning_100};\n    color: ${COLORS.warning_600};\n  }\n  &.critical {\n    background-color: ${COLORS.critical_100};\n    color: ${COLORS.critical_600};\n  }\n  &.accent1 {\n    background-color: ${COLORS.accent1_100};\n    color: ${COLORS.accent1_600};\n  }\n  &.accent2 {\n    background-color: ${COLORS.accent2_100};\n    color: ${COLORS.accent2_600};\n  }\n\n`;\n\nconst IconContainer = styled.div<{variant: TagVariants}>`\n  display: flex;\n  width: 16px;\n  height: 16px;\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n`;\n\nconst TextContainer = styled.div<{variant: TagVariants, icon: React.ReactNode}>`\n  height: 16px;\n  padding: 0 4px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;  \n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n`;\n\n\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\n\ntype TagProps = React.HTMLAttributes<HTMLDivElement> & {\n  label?: string;\n  icon?: React.ReactNode;\n  variant?: TagVariants;\n}\n\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral', className, ...rest}) => {\n  const cls = `${className ?? ''} ${variant}`;\n  return (   \n    <Container variant={variant} isLabelPresent={!!label} className={cls} {...rest}>\n      {icon && <IconContainer variant={variant} data-testid={'iconContainer'}>\n          {icon}\n        </IconContainer>\n      }\n      {label && <TextContainer variant={variant} icon={icon}>\n          {label}\n        </TextContainer>\n      }\n    </Container>\n  );\n};\n\nexport default Tag;\n"],"mappings":";;;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,MAAM,EAAEC,kBAAkB,EAAEC,kBAAkB,QAAQ,IAAI;AAAC;AAAA;AAEpE,IAAMC,SAAS,GAAGJ,MAAM,CAACK,GAAG,+rBAQb,UAAAC,KAAK;EAAA,OAAEA,KAAK,CAACC,cAAc,GAAG,MAAM,GAAG,EAAE;AAAA,GAKhCN,MAAM,CAACO,WAAW,EAC7BP,MAAM,CAACQ,WAAW,EAGPR,MAAM,CAACS,WAAW,EAC7BT,MAAM,CAACU,WAAW,EAGPV,MAAM,CAACW,WAAW,EAC7BX,MAAM,CAACY,WAAW,EAGPZ,MAAM,CAACa,YAAY,EAC9Bb,MAAM,CAACc,YAAY,EAGRd,MAAM,CAACe,WAAW,EAC7Bf,MAAM,CAACgB,WAAW,EAGPhB,MAAM,CAACiB,WAAW,EAC7BjB,MAAM,CAACkB,WAAW,CAG9B;AAED,IAAMC,aAAa,GAAGpB,MAAM,CAACK,GAAG,+KAQ/B;AAED,IAAMgB,aAAa,GAAGrB,MAAM,CAACK,GAAG,iMAM5BF,kBAAkB,CAACD,kBAAkB,CAACoB,IAAI,EAAE,IAAI,CAAC,CACpD;AAWD,IAAMC,GAAsC,GAAG,SAAzCA,GAAsC,OAA6D;EAAA,IAAxDC,KAAK,QAALA,KAAK;IAAEC,IAAI,QAAJA,IAAI;IAAA,oBAAEC,OAAO;IAAPA,OAAO,6BAAC,SAAS;IAAEC,SAAS,QAATA,SAAS;IAAKC,IAAI;EACjG,IAAMC,GAAG,aAAMF,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,EAAE,cAAID,OAAO,CAAE;EAC3C,oBACE,MAAC,SAAS;IAAC,OAAO,EAAEA,OAAQ;IAAC,cAAc,EAAE,CAAC,CAACF,KAAM;IAAC,SAAS,EAAEK;EAAI,GAAKD,IAAI;IAAA,WAC3EH,IAAI,iBAAI,KAAC,aAAa;MAAC,OAAO,EAAEC,OAAQ;MAAC,eAAa,eAAgB;MAAA,UAClED;IAAI,EACS,EAEjBD,KAAK,iBAAI,KAAC,aAAa;MAAC,OAAO,EAAEE,OAAQ;MAAC,IAAI,EAAED,IAAK;MAAA,UACjDD;IAAK,EACQ;EAAA,GAER;AAEhB,CAAC;AAAC;EAnBAA,KAAK;EACLC,IAAI;EACJC,OAAO,aALiB,SAAS,EAAG,UAAU,EAAG,SAAS,EAAG,UAAU,EAAG,SAAS,EAAG,SAAS;AAAA;AAwBjG,eAAeH,GAAG"}

package/dist/styles/typography.cjs

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ParagraphXlStyling = exports.ParagraphXSStyling = exports.ParagraphXS = exports.ParagraphXL = exports.ParagraphTextStyle = exports.ParagraphSStyling = exports.ParagraphS = exports.ParagraphMStyling = exports.ParagraphM = exports.ParagraphLStyling = exports.ParagraphL = exports.HeadlineXXSStyling = exports.HeadlineXXS = exports.HeadlineXSStyling = exports.HeadlineXS = exports.HeadlineXLStyling = exports.HeadlineXL = exports.HeadlineSStyling = exports.HeadlineS = exports.HeadlineMStyling = exports.HeadlineM = exports.HeadlineLStyling = exports.HeadlineL = exports.ComponentXXSStyling = exports.ComponentXXS = exports.ComponentXSStyling = exports.ComponentXS = exports.ComponentXLStyling = exports.ComponentXL = exports.ComponentTextStyle = exports.ComponentSStyling = exports.ComponentS = exports.ComponentResponsive = exports.ComponentMStyling = exports.ComponentM = exports.ComponentLStyling = exports.ComponentL = void 0;
+exports.TypographyBase = exports.ParagraphXlStyling = exports.ParagraphXSStyling = exports.ParagraphXS = exports.ParagraphXL = exports.ParagraphTextStyle = exports.ParagraphSStyling = exports.ParagraphS = exports.ParagraphMStyling = exports.ParagraphM = exports.ParagraphLStyling = exports.ParagraphL = exports.HeadlineXXSStyling = exports.HeadlineXXS = exports.HeadlineXSStyling = exports.HeadlineXS = exports.HeadlineXLStyling = exports.HeadlineXL = exports.HeadlineSStyling = exports.HeadlineS = exports.HeadlineMStyling = exports.HeadlineM = exports.HeadlineLStyling = exports.HeadlineL = exports.ComponentXXSStyling = exports.ComponentXXS = exports.ComponentXSStyling = exports.ComponentXS = exports.ComponentXLStyling = exports.ComponentXL = exports.ComponentTextStyle = exports.ComponentSStyling = exports.ComponentS = exports.ComponentResponsive = exports.ComponentMStyling = exports.ComponentM = exports.ComponentLStyling = exports.ComponentL = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
@@ -34,6 +34,7 @@ var TypographyBase = (0, _styledComponents.default)('div')(function (_ref) {
     color: $color ? $color : _.COLORS.black
   };
 });
+exports.TypographyBase = TypographyBase;
 var HeadlineBaseStyling = function HeadlineBaseStyling(fontSize, lineHeight, color) {
   return (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    font-size: ", ";\n    line-height: ", ";\n    font-weight: 700;\n    color: ", ";\n  "])), fontSize, lineHeight, color);
 };

package/dist/styles/typography.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"typography.cjs","names":["TypographyBase","styled","$color","lineHeight","$fontSize","$fontWeight","$fontStyle","textTransform","textDecorationLine","fontSize","fontWeight","fontStyle","color","COLORS","black","HeadlineBaseStyling","css","HeadlineBase","HeadlineXLStyling","HeadlineXL","HeadlineLStyling","HeadlineL","HeadlineMStyling","HeadlineM","HeadlineSStyling","HeadlineS","HeadlineXSStyling","HeadlineXS","HeadlineXXSStyling","HeadlineXXS","ParagraphStyling","ParagraphBase","props","marginBetweenParagraphs","ParagraphTextStyle","paragraphFontWeight","textStyle","Bold","paragraphFontStyle","Italic","paragraphTextDecorationLine","textDecoration","Underline","ParagraphBaseStyling","ParagraphXlStyling","ParagraphXL","children","ParagraphLStyling","ParagraphL","ParagraphMStyling","ParagraphM","ParagraphSStyling","ParagraphS","ParagraphXSStyling","ParagraphXS","ComponentTextStyle","componentFontWeight","UppercaseBold","componentFontStyle","componentTextTransformation","ComponentStyling","ComponentXLStyling","ComponentXL","className","ComponentLStyling","ComponentL","ComponentMStyling","ComponentM","ComponentSStyling","ComponentS","ComponentXSStyling","ComponentXS","ComponentXXSStyling","ComponentXXS","ComponentResponsive","size","width","fontsize","Size","Medium","Small","Large","XXSmall","XSmall"],"sources":["../../src/styles/typography.tsx"],"sourcesContent":["import React from 'react';\nimport styled, { css } from 'styled-components';\nimport { COLORS } from '.';\nimport { Property } from 'csstype';\nimport { Size } from '../types';\n\ninterface ITypographyBase {\n  $color?: string;\n  lineHeight: number;\n  $fontSize: number;\n  $fontWeight: number;\n  $fontStyle?: string;\n  textTransform?: Property.TextTransform;\n  textDecorationLine?: Property.TextDecorationLine;\n}\n\nconst TypographyBase = styled('div')<ITypographyBase>(({ $color, lineHeight, $fontSize, $fontWeight, $fontStyle, textTransform, textDecorationLine }) => ({\n  fontSize: $fontSize,\n  fontWeight: $fontWeight,\n  lineHeight: lineHeight + 'px',\n  textTransform: textTransform ? textTransform : 'none',\n  textDecorationLine: textDecorationLine ? textDecorationLine : 'none',\n  fontStyle: $fontStyle ? $fontStyle : 'normal',\n  color: $color ? $color : COLORS.black,\n}));\n\ninterface IHeadline {\n  $color?: string;\n}\n\ninterface IHeadlineBase {\n  $color?: string;\n  lineHeight: number;\n  fontSize: number;\n}\n\nconst HeadlineBaseStyling = (fontSize: string, lineHeight: string, color: string) => {\n  return css`\n    font-size: ${fontSize};\n    line-height: ${lineHeight};\n    font-weight: 700;\n    color: ${color};\n  `;\n};\nconst HeadlineBase = styled(TypographyBase)<IHeadlineBase>(({ $color, lineHeight, fontSize }) => ({\n  fontSize: fontSize,\n  fontWeight: 700,\n  lineHeight: lineHeight,\n  color: $color,\n}));\n\nconst HeadlineXLStyling = (color: string) => HeadlineBaseStyling('48px', '64px', color);\nconst HeadlineXL = styled(HeadlineBase)<IHeadline>(({ $color }) => ({\n  fontSize: '48px',\n  lineHeight: '64px',\n  color: $color,\n}));\n\nconst HeadlineLStyling = (color: string) => HeadlineBaseStyling('40px', '52px', color);\nconst HeadlineL = styled(HeadlineBase)<IHeadline>(({ $color }) => ({\n  fontSize: '40px',\n  lineHeight: '52px',\n  color: $color,\n}));\n\nconst HeadlineMStyling = (color: string) => HeadlineBaseStyling('32px', '40px', color);\nconst HeadlineM = styled(HeadlineBase)<IHeadline>(({ $color }) => ({\n  fontSize: '32px',\n  lineHeight: '40px',\n  color: $color,\n}));\n\nconst HeadlineSStyling = (color: string) => HeadlineBaseStyling('28px', '36px', color);\nconst HeadlineS = styled(HeadlineBase)<IHeadline>(({ $color }) => ({\n  fontSize: '28px',\n  lineHeight: '36px',\n  color: $color,\n}));\n\nconst HeadlineXSStyling = (color: string) => HeadlineBaseStyling('24px', '32px', color);\nconst HeadlineXS = styled(HeadlineBase)<IHeadline>(({ $color }) => ({\n  fontSize: '24px',\n  lineHeight: '32px',\n  color: $color,\n}));\n\nconst HeadlineXXSStyling = (color: string) => HeadlineBaseStyling('20px', '24px', color);\nconst HeadlineXXS = styled(HeadlineBase)<IHeadline>(({ $color }) => ({\n  fontSize: '20px',\n  lineHeight: '24px',\n  color: $color,\n}));\n\nconst ParagraphStyling = css`\n  :lang(ja-jp) > h1,\n  h2,\n  h3,\n  h4,\n  p,\n  span {\n    max-width: 30em;\n  }\n  :lang(ko-kr) > h1,\n  h2,\n  h3,\n  h4,\n  p,\n  span {\n    max-width: 30em;\n  }\n  :lang(zh-CN) > h1,\n  h2,\n  h3,\n  h4,\n  p,\n  span {\n    max-width: 30em;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  p,\n  span {\n    max-width: 34em;\n  }\n`;\n\ninterface IParagraphBase {\n  color?: string;\n  lineHeight: number;\n  $fontSize: number;\n  marginBetweenParagraphs?: string;\n}\n\nconst ParagraphBase = styled(TypographyBase)<IParagraphBase>`\n  p {\n    margin-block-start: 0;\n    margin-block-end: 0;\n  }\n  p:not(:only-of-type) {\n    margin-bottom: ${(props) => props.marginBetweenParagraphs || '0'};\n  }\n  ${ParagraphStyling}\n`;\n\ninterface IParagraph {\n  color?: string;\n}\n\nenum ParagraphTextStyle {\n  Regular = 1,\n  Bold,\n  Italic,\n  Underline,\n}\n\ntype ParagraphProps = {\n  color?: string;\n  textStyle?: ParagraphTextStyle;\n  children?: React.ReactNode;\n};\n\nconst paragraphFontWeight = (textStyle?: ParagraphTextStyle) => {\n  let fontWeight = 400;\n  if (textStyle === ParagraphTextStyle.Bold) {\n    fontWeight = 700;\n  }\n  return fontWeight;\n};\n\nconst paragraphFontStyle = (textStyle?: ParagraphTextStyle) => {\n  let fontStyle = textStyle && textStyle === ParagraphTextStyle.Italic ? 'italic' : '';\n  return fontStyle;\n};\n\nconst paragraphTextDecorationLine = (textStyle?: ParagraphTextStyle): Property.TextDecorationLine => {\n  let textDecoration: Property.TextDecorationLine = textStyle && textStyle === ParagraphTextStyle.Underline ? 'underline' : 'none';\n  return textDecoration;\n};\n\nconst ParagraphBaseStyling = (fontSize: string, lineHeight: string, textStyle: ParagraphTextStyle, color: string) => {\n  return css`\n    font-size: ${fontSize};\n    font-weight: ${paragraphFontWeight(textStyle)};\n    line-height: ${lineHeight};\n    font-style: ${paragraphFontStyle(textStyle)};\n    color: ${color};\n  `;\n};\n\nconst ParagraphXlStyling = (textStyle: ParagraphTextStyle, color: string) => ParagraphBaseStyling('24px', '36px', textStyle, color);\nconst ParagraphXL: React.FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase\n      $color={color}\n      lineHeight={36}\n      $fontSize={24}\n      $fontWeight={fontWeight}\n      $fontStyle={fontStyle}\n      textDecorationLine={textDecorationLine}\n      marginBetweenParagraphs=\"18px\">\n      {children}\n    </ParagraphBase>\n  );\n};\n\nconst ParagraphLStyling = (textStyle: ParagraphTextStyle, color: string) => ParagraphBaseStyling('20px', '32px', textStyle, color);\nconst ParagraphL: React.FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase\n      $color={color}\n      lineHeight={32}\n      $fontSize={20}\n      $fontWeight={fontWeight}\n      $fontStyle={fontStyle}\n      textDecorationLine={textDecorationLine}\n      marginBetweenParagraphs=\"16px\">\n      {children}\n    </ParagraphBase>\n  );\n};\n\nconst ParagraphMStyling = (textStyle: ParagraphTextStyle, color: string) => ParagraphBaseStyling('18px', '28px', textStyle, color);\nconst ParagraphM: React.FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase\n      $color={color}\n      lineHeight={28}\n      $fontSize={18}\n      $fontWeight={fontWeight}\n      $fontStyle={fontStyle}\n      textDecorationLine={textDecorationLine}\n      marginBetweenParagraphs=\"14px\">\n      {children}\n    </ParagraphBase>\n  );\n};\n\nconst ParagraphSStyling = (textStyle: ParagraphTextStyle, color: string) => ParagraphBaseStyling('16px', '24px', textStyle, color);\nconst ParagraphS: React.FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase\n      $color={color}\n      lineHeight={24}\n      $fontSize={16}\n      $fontWeight={fontWeight}\n      $fontStyle={fontStyle}\n      textDecorationLine={textDecorationLine}\n      marginBetweenParagraphs=\"12px\">\n      {children}\n    </ParagraphBase>\n  );\n};\n\nconst ParagraphXSStyling = (textStyle: ParagraphTextStyle, color: string) => ParagraphBaseStyling('14px', '20px', textStyle, color);\nconst ParagraphXS: React.FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase\n      $color={color}\n      lineHeight={20}\n      $fontSize={14}\n      $fontWeight={fontWeight}\n      $fontStyle={fontStyle}\n      textDecorationLine={textDecorationLine}\n      marginBetweenParagraphs=\"10px\">\n      {children}\n    </ParagraphBase>\n  );\n};\n\nenum ComponentTextStyle {\n  Regular = 1,\n  Bold,\n  Italic,\n  UppercaseBold,\n}\n\ntype ComponentProps = {\n  color?: string;\n  className?: string;\n  textStyle?: ComponentTextStyle;\n  children?: React.ReactNode;\n};\n\nconst componentFontWeight = (textStyle?: ComponentTextStyle) => {\n  let fontWeight = 400;\n  if (textStyle === ComponentTextStyle.Bold || textStyle === ComponentTextStyle.UppercaseBold) {\n    fontWeight = 700;\n  }\n  return fontWeight;\n};\n\nconst componentFontStyle = (textStyle?: ComponentTextStyle) => {\n  let fontStyle = textStyle && textStyle === ComponentTextStyle.Italic ? 'italic' : '';\n  return fontStyle;\n};\n\nconst componentTextTransformation = (textStyle?: ComponentTextStyle): Property.TextTransform => {\n  let fontStyle: Property.TextTransform = textStyle && textStyle === ComponentTextStyle.UppercaseBold ? 'uppercase' : 'none';\n  return fontStyle;\n};\n\nconst ComponentStyling = (fontSize: string, lineHeight: string, textStyle: ComponentTextStyle, color: string | undefined | null) => {\n  return css`\n    font-size: ${fontSize};\n    font-weight: ${componentFontWeight(textStyle)};\n    line-height: ${lineHeight};\n    font-style: ${componentFontStyle(textStyle)};\n    ${color === null ? '' : `color: ${color || COLORS.black};`}\n  `;\n};\n\nconst ComponentXLStyling = (textStyle: ComponentTextStyle, color: string | null) => ComponentStyling('24px', '28px', textStyle, color);\nconst ComponentXL: React.FunctionComponent<ComponentProps> = ({ color, textStyle, children, className }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  return (\n    <TypographyBase className={className} $color={color} lineHeight={28} $fontSize={24} $fontWeight={fontWeight} $fontStyle={fontStyle}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentLStyling = (textStyle: ComponentTextStyle, color: string | null) => ComponentStyling('20px', '24px', textStyle, color);\nconst ComponentL: React.FunctionComponent<ComponentProps> = ({ color, textStyle, children, className }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  return (\n    <TypographyBase className={className} $color={color} lineHeight={24} $fontSize={20} $fontWeight={fontWeight} $fontStyle={fontStyle}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentMStyling = (textStyle: ComponentTextStyle, color: string | undefined | null) => ComponentStyling('18px', '24px', textStyle, color);\nconst ComponentM: React.FunctionComponent<ComponentProps> = ({ color, textStyle, children, className }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  return (\n    <TypographyBase className={className} $color={color} lineHeight={24} $fontSize={18} $fontWeight={fontWeight} $fontStyle={fontStyle}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentSStyling = (textStyle: ComponentTextStyle, color: string | null) => ComponentStyling('16px', '20px', textStyle, color);\nconst ComponentS: React.FunctionComponent<ComponentProps> = ({ color, textStyle, children, className }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  return (\n    <TypographyBase className={className} $color={color} lineHeight={20} $fontSize={16} $fontWeight={fontWeight} $fontStyle={fontStyle}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentXSStyling = (textStyle: ComponentTextStyle, color: string | null) => ComponentStyling('14px', '16px', textStyle, color);\nconst ComponentXS: React.FunctionComponent<ComponentProps> = ({ color, textStyle, children, className }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  let textTransform = componentTextTransformation(textStyle);\n  return (\n    <TypographyBase className={className} $color={color} lineHeight={16} $fontSize={14} $fontWeight={fontWeight} $fontStyle={fontStyle} textTransform={textTransform}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentXXSStyling = (textStyle: ComponentTextStyle, color: string | null) => ComponentStyling('12px', '16px', textStyle, color);\nconst ComponentXXS: React.FunctionComponent<ComponentProps> = ({ color, textStyle, children, className }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  let textTransform = componentTextTransformation(textStyle);\n  return (\n    <TypographyBase className={className} $color={color} lineHeight={16} $fontSize={12} $fontWeight={fontWeight} $fontStyle={fontStyle} textTransform={textTransform}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentResponsive: React.FunctionComponent<ComponentProps & { size?: Size; width: number }> = ({ color, textStyle, children, size, width }) => {\n  let fontsize = size;\n  if (!size) {\n    if (width == -1) {\n      fontsize = Size.Medium;\n    } else if (width < 768) {\n      fontsize = Size.Small;\n    } else if (width < 992) {\n      fontsize = Size.Medium;\n    } else {\n      fontsize = Size.Large;\n    }\n  }\n  switch (fontsize) {\n    case Size.XXSmall:\n      return <ComponentXXS color={color} textStyle={textStyle} children={children} />;\n    case Size.XSmall:\n      return <ComponentXS color={color} textStyle={textStyle} children={children} />;\n    case Size.Small:\n      return <ComponentS color={color} textStyle={textStyle} children={children} />;\n    case Size.Medium:\n      return <ComponentM color={color} textStyle={textStyle} children={children} />;\n    case Size.Large:\n    default:\n      return <ComponentL color={color} textStyle={textStyle} children={children} />;\n  }\n};\n\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"],"mappings":"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"}
+{"version":3,"file":"typography.cjs","names":["TypographyBase","styled","$color","lineHeight","$fontSize","$fontWeight","$fontStyle","textTransform","textDecorationLine","fontSize","fontWeight","fontStyle","color","COLORS","black","HeadlineBaseStyling","css","HeadlineBase","HeadlineXLStyling","HeadlineXL","HeadlineLStyling","HeadlineL","HeadlineMStyling","HeadlineM","HeadlineSStyling","HeadlineS","HeadlineXSStyling","HeadlineXS","HeadlineXXSStyling","HeadlineXXS","ParagraphStyling","ParagraphBase","props","marginBetweenParagraphs","ParagraphTextStyle","paragraphFontWeight","textStyle","Bold","paragraphFontStyle","Italic","paragraphTextDecorationLine","textDecoration","Underline","ParagraphBaseStyling","ParagraphXlStyling","ParagraphXL","children","ParagraphLStyling","ParagraphL","ParagraphMStyling","ParagraphM","ParagraphSStyling","ParagraphS","ParagraphXSStyling","ParagraphXS","ComponentTextStyle","componentFontWeight","UppercaseBold","componentFontStyle","componentTextTransformation","ComponentStyling","ComponentXLStyling","ComponentXL","className","ComponentLStyling","ComponentL","ComponentMStyling","ComponentM","ComponentSStyling","ComponentS","ComponentXSStyling","ComponentXS","ComponentXXSStyling","ComponentXXS","ComponentResponsive","size","width","fontsize","Size","Medium","Small","Large","XXSmall","XSmall"],"sources":["../../src/styles/typography.tsx"],"sourcesContent":["import React from 'react';\nimport styled, { css } from 'styled-components';\nimport { COLORS } from '.';\nimport { Property } from 'csstype';\nimport { Size } from '../types';\n\ninterface ITypographyBase {\n  $color?: string;\n  lineHeight: number;\n  $fontSize: number;\n  $fontWeight: number;\n  $fontStyle?: string;\n  textTransform?: Property.TextTransform;\n  textDecorationLine?: Property.TextDecorationLine;\n}\n\nexport const TypographyBase = styled('div')<ITypographyBase>(({ $color, lineHeight, $fontSize, $fontWeight, $fontStyle, textTransform, textDecorationLine }) => ({\n  fontSize: $fontSize,\n  fontWeight: $fontWeight,\n  lineHeight: lineHeight + 'px',\n  textTransform: textTransform ? textTransform : 'none',\n  textDecorationLine: textDecorationLine ? textDecorationLine : 'none',\n  fontStyle: $fontStyle ? $fontStyle : 'normal',\n  color: $color ? $color : COLORS.black,\n}));\n\ninterface IHeadline {\n  $color?: string;\n}\n\ninterface IHeadlineBase {\n  $color?: string;\n  lineHeight: number;\n  fontSize: number;\n}\n\nconst HeadlineBaseStyling = (fontSize: string, lineHeight: string, color: string) => {\n  return css`\n    font-size: ${fontSize};\n    line-height: ${lineHeight};\n    font-weight: 700;\n    color: ${color};\n  `;\n};\nconst HeadlineBase = styled(TypographyBase)<IHeadlineBase>(({ $color, lineHeight, fontSize }) => ({\n  fontSize: fontSize,\n  fontWeight: 700,\n  lineHeight: lineHeight,\n  color: $color,\n}));\n\nconst HeadlineXLStyling = (color: string) => HeadlineBaseStyling('48px', '64px', color);\nconst HeadlineXL = styled(HeadlineBase)<IHeadline>(({ $color }) => ({\n  fontSize: '48px',\n  lineHeight: '64px',\n  color: $color,\n}));\n\nconst HeadlineLStyling = (color: string) => HeadlineBaseStyling('40px', '52px', color);\nconst HeadlineL = styled(HeadlineBase)<IHeadline>(({ $color }) => ({\n  fontSize: '40px',\n  lineHeight: '52px',\n  color: $color,\n}));\n\nconst HeadlineMStyling = (color: string) => HeadlineBaseStyling('32px', '40px', color);\nconst HeadlineM = styled(HeadlineBase)<IHeadline>(({ $color }) => ({\n  fontSize: '32px',\n  lineHeight: '40px',\n  color: $color,\n}));\n\nconst HeadlineSStyling = (color: string) => HeadlineBaseStyling('28px', '36px', color);\nconst HeadlineS = styled(HeadlineBase)<IHeadline>(({ $color }) => ({\n  fontSize: '28px',\n  lineHeight: '36px',\n  color: $color,\n}));\n\nconst HeadlineXSStyling = (color: string) => HeadlineBaseStyling('24px', '32px', color);\nconst HeadlineXS = styled(HeadlineBase)<IHeadline>(({ $color }) => ({\n  fontSize: '24px',\n  lineHeight: '32px',\n  color: $color,\n}));\n\nconst HeadlineXXSStyling = (color: string) => HeadlineBaseStyling('20px', '24px', color);\nconst HeadlineXXS = styled(HeadlineBase)<IHeadline>(({ $color }) => ({\n  fontSize: '20px',\n  lineHeight: '24px',\n  color: $color,\n}));\n\nconst ParagraphStyling = css`\n  :lang(ja-jp) > h1,\n  h2,\n  h3,\n  h4,\n  p,\n  span {\n    max-width: 30em;\n  }\n  :lang(ko-kr) > h1,\n  h2,\n  h3,\n  h4,\n  p,\n  span {\n    max-width: 30em;\n  }\n  :lang(zh-CN) > h1,\n  h2,\n  h3,\n  h4,\n  p,\n  span {\n    max-width: 30em;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  p,\n  span {\n    max-width: 34em;\n  }\n`;\n\ninterface IParagraphBase {\n  color?: string;\n  lineHeight: number;\n  $fontSize: number;\n  marginBetweenParagraphs?: string;\n}\n\nconst ParagraphBase = styled(TypographyBase)<IParagraphBase>`\n  p {\n    margin-block-start: 0;\n    margin-block-end: 0;\n  }\n  p:not(:only-of-type) {\n    margin-bottom: ${(props) => props.marginBetweenParagraphs || '0'};\n  }\n  ${ParagraphStyling}\n`;\n\ninterface IParagraph {\n  color?: string;\n}\n\nenum ParagraphTextStyle {\n  Regular = 1,\n  Bold,\n  Italic,\n  Underline,\n}\n\ntype ParagraphProps = {\n  color?: string;\n  textStyle?: ParagraphTextStyle;\n  children?: React.ReactNode;\n};\n\nconst paragraphFontWeight = (textStyle?: ParagraphTextStyle) => {\n  let fontWeight = 400;\n  if (textStyle === ParagraphTextStyle.Bold) {\n    fontWeight = 700;\n  }\n  return fontWeight;\n};\n\nconst paragraphFontStyle = (textStyle?: ParagraphTextStyle) => {\n  let fontStyle = textStyle && textStyle === ParagraphTextStyle.Italic ? 'italic' : '';\n  return fontStyle;\n};\n\nconst paragraphTextDecorationLine = (textStyle?: ParagraphTextStyle): Property.TextDecorationLine => {\n  let textDecoration: Property.TextDecorationLine = textStyle && textStyle === ParagraphTextStyle.Underline ? 'underline' : 'none';\n  return textDecoration;\n};\n\nconst ParagraphBaseStyling = (fontSize: string, lineHeight: string, textStyle: ParagraphTextStyle, color: string) => {\n  return css`\n    font-size: ${fontSize};\n    font-weight: ${paragraphFontWeight(textStyle)};\n    line-height: ${lineHeight};\n    font-style: ${paragraphFontStyle(textStyle)};\n    color: ${color};\n  `;\n};\n\nconst ParagraphXlStyling = (textStyle: ParagraphTextStyle, color: string) => ParagraphBaseStyling('24px', '36px', textStyle, color);\nconst ParagraphXL: React.FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase\n      $color={color}\n      lineHeight={36}\n      $fontSize={24}\n      $fontWeight={fontWeight}\n      $fontStyle={fontStyle}\n      textDecorationLine={textDecorationLine}\n      marginBetweenParagraphs=\"18px\">\n      {children}\n    </ParagraphBase>\n  );\n};\n\nconst ParagraphLStyling = (textStyle: ParagraphTextStyle, color: string) => ParagraphBaseStyling('20px', '32px', textStyle, color);\nconst ParagraphL: React.FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase\n      $color={color}\n      lineHeight={32}\n      $fontSize={20}\n      $fontWeight={fontWeight}\n      $fontStyle={fontStyle}\n      textDecorationLine={textDecorationLine}\n      marginBetweenParagraphs=\"16px\">\n      {children}\n    </ParagraphBase>\n  );\n};\n\nconst ParagraphMStyling = (textStyle: ParagraphTextStyle, color: string) => ParagraphBaseStyling('18px', '28px', textStyle, color);\nconst ParagraphM: React.FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase\n      $color={color}\n      lineHeight={28}\n      $fontSize={18}\n      $fontWeight={fontWeight}\n      $fontStyle={fontStyle}\n      textDecorationLine={textDecorationLine}\n      marginBetweenParagraphs=\"14px\">\n      {children}\n    </ParagraphBase>\n  );\n};\n\nconst ParagraphSStyling = (textStyle: ParagraphTextStyle, color: string) => ParagraphBaseStyling('16px', '24px', textStyle, color);\nconst ParagraphS: React.FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase\n      $color={color}\n      lineHeight={24}\n      $fontSize={16}\n      $fontWeight={fontWeight}\n      $fontStyle={fontStyle}\n      textDecorationLine={textDecorationLine}\n      marginBetweenParagraphs=\"12px\">\n      {children}\n    </ParagraphBase>\n  );\n};\n\nconst ParagraphXSStyling = (textStyle: ParagraphTextStyle, color: string) => ParagraphBaseStyling('14px', '20px', textStyle, color);\nconst ParagraphXS: React.FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase\n      $color={color}\n      lineHeight={20}\n      $fontSize={14}\n      $fontWeight={fontWeight}\n      $fontStyle={fontStyle}\n      textDecorationLine={textDecorationLine}\n      marginBetweenParagraphs=\"10px\">\n      {children}\n    </ParagraphBase>\n  );\n};\n\nenum ComponentTextStyle {\n  Regular = 1,\n  Bold,\n  Italic,\n  UppercaseBold,\n}\n\ntype ComponentProps = {\n  color?: string;\n  className?: string;\n  textStyle?: ComponentTextStyle;\n  children?: React.ReactNode;\n};\n\nconst componentFontWeight = (textStyle?: ComponentTextStyle) => {\n  let fontWeight = 400;\n  if (textStyle === ComponentTextStyle.Bold || textStyle === ComponentTextStyle.UppercaseBold) {\n    fontWeight = 700;\n  }\n  return fontWeight;\n};\n\nconst componentFontStyle = (textStyle?: ComponentTextStyle) => {\n  let fontStyle = textStyle && textStyle === ComponentTextStyle.Italic ? 'italic' : '';\n  return fontStyle;\n};\n\nconst componentTextTransformation = (textStyle?: ComponentTextStyle): Property.TextTransform => {\n  let fontStyle: Property.TextTransform = textStyle && textStyle === ComponentTextStyle.UppercaseBold ? 'uppercase' : 'none';\n  return fontStyle;\n};\n\nconst ComponentStyling = (fontSize: string, lineHeight: string, textStyle: ComponentTextStyle, color: string | undefined | null) => {\n  return css`\n    font-size: ${fontSize};\n    font-weight: ${componentFontWeight(textStyle)};\n    line-height: ${lineHeight};\n    font-style: ${componentFontStyle(textStyle)};\n    ${color === null ? '' : `color: ${color || COLORS.black};`}\n  `;\n};\n\nconst ComponentXLStyling = (textStyle: ComponentTextStyle, color: string | null) => ComponentStyling('24px', '28px', textStyle, color);\nconst ComponentXL: React.FunctionComponent<ComponentProps> = ({ color, textStyle, children, className }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  return (\n    <TypographyBase className={className} $color={color} lineHeight={28} $fontSize={24} $fontWeight={fontWeight} $fontStyle={fontStyle}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentLStyling = (textStyle: ComponentTextStyle, color: string | null) => ComponentStyling('20px', '24px', textStyle, color);\nconst ComponentL: React.FunctionComponent<ComponentProps> = ({ color, textStyle, children, className }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  return (\n    <TypographyBase className={className} $color={color} lineHeight={24} $fontSize={20} $fontWeight={fontWeight} $fontStyle={fontStyle}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentMStyling = (textStyle: ComponentTextStyle, color: string | undefined | null) => ComponentStyling('18px', '24px', textStyle, color);\nconst ComponentM: React.FunctionComponent<ComponentProps> = ({ color, textStyle, children, className }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  return (\n    <TypographyBase className={className} $color={color} lineHeight={24} $fontSize={18} $fontWeight={fontWeight} $fontStyle={fontStyle}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentSStyling = (textStyle: ComponentTextStyle, color: string | null) => ComponentStyling('16px', '20px', textStyle, color);\nconst ComponentS: React.FunctionComponent<ComponentProps> = ({ color, textStyle, children, className }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  return (\n    <TypographyBase className={className} $color={color} lineHeight={20} $fontSize={16} $fontWeight={fontWeight} $fontStyle={fontStyle}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentXSStyling = (textStyle: ComponentTextStyle, color: string | null) => ComponentStyling('14px', '16px', textStyle, color);\nconst ComponentXS: React.FunctionComponent<ComponentProps> = ({ color, textStyle, children, className }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  let textTransform = componentTextTransformation(textStyle);\n  return (\n    <TypographyBase className={className} $color={color} lineHeight={16} $fontSize={14} $fontWeight={fontWeight} $fontStyle={fontStyle} textTransform={textTransform}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentXXSStyling = (textStyle: ComponentTextStyle, color: string | null) => ComponentStyling('12px', '16px', textStyle, color);\nconst ComponentXXS: React.FunctionComponent<ComponentProps> = ({ color, textStyle, children, className }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  let textTransform = componentTextTransformation(textStyle);\n  return (\n    <TypographyBase className={className} $color={color} lineHeight={16} $fontSize={12} $fontWeight={fontWeight} $fontStyle={fontStyle} textTransform={textTransform}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentResponsive: React.FunctionComponent<ComponentProps & { size?: Size; width: number }> = ({ color, textStyle, children, size, width }) => {\n  let fontsize = size;\n  if (!size) {\n    if (width == -1) {\n      fontsize = Size.Medium;\n    } else if (width < 768) {\n      fontsize = Size.Small;\n    } else if (width < 992) {\n      fontsize = Size.Medium;\n    } else {\n      fontsize = Size.Large;\n    }\n  }\n  switch (fontsize) {\n    case Size.XXSmall:\n      return <ComponentXXS color={color} textStyle={textStyle} children={children} />;\n    case Size.XSmall:\n      return <ComponentXS color={color} textStyle={textStyle} children={children} />;\n    case Size.Small:\n      return <ComponentS color={color} textStyle={textStyle} children={children} />;\n    case Size.Medium:\n      return <ComponentM color={color} textStyle={textStyle} children={children} />;\n    case Size.Large:\n    default:\n      return <ComponentL color={color} textStyle={textStyle} children={children} />;\n  }\n};\n\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"],"mappings":"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"}

package/dist/styles/typography.d.ts

@@ -10,6 +10,7 @@ interface ITypographyBase {
     textTransform?: Property.TextTransform;
     textDecorationLine?: Property.TextDecorationLine;
 }
+export declare const TypographyBase: import("styled-components").StyledComponent<"div", any, ITypographyBase, never>;
 interface IHeadline {
     $color?: string;
 }

package/dist/styles/typography.js

@@ -6,7 +6,7 @@ import styled, { css } from 'styled-components';
 import { COLORS } from '.';
 import { Size } from '../types';
 import { jsx as _jsx } from "react/jsx-runtime";
-var TypographyBase = styled('div')(function (_ref) {
+export var TypographyBase = styled('div')(function (_ref) {
   var $color = _ref.$color,
     lineHeight = _ref.lineHeight,
     $fontSize = _ref.$fontSize,