@laerdal/life-react-components 1.0.1-dev.19.full → 1.0.1-dev.22.full

package/dist/esm/Paginator/Paginator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Paginator/Paginator.tsx"],"names":["React","styled","NavLink","BREAKPOINTS","COLORS","ChevronLeft","ChevronRight","MoreHorizontal","Container","nav","MEDIUM","Items","ul","Item","li","neutral_600","primary_800","primary_20","primary_700","primary_100","neutral_800","primary_500","neutral_20","Dots","Step","up","target","disabled","page","onPageChange","testId","cursor","neutral_300","Paginator","pageCount","currentPage","baseUrl","pages","from","to","i","push","findIndex","item","map"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { NavLink } from 'react-router-dom';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { ChevronLeft, ChevronRight, MoreHorizontal } from '../icons/systemicons/SystemIcons';\n\nconst Container = styled.nav`\n  margin: 20px 0;\n  display: flex;\n  justify-content: center;\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 75%;\n  }\n`;\n\nconst Items = styled.ul`\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n`;\n\nconst Item = styled.li`\n  width: 48px;\n  height: 45px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 19px;\n  line-height: 23px;\n  font-weight: 400;\n\n  & > * {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    text-decoration: none;\n    font-family: 'Lato', sans-serif;\n    color: ${COLORS.neutral_600};\n    border-bottom: 3px solid transparent;\n    &:focus,\n    &:focus-within {\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n      outline-width: 0;\n    }\n  }\n  & > a:hover {\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_20};\n    border-bottom: 3px solid transparent;\n    box-shadow: none;\n  }\n  & > a:active {\n    color: ${COLORS.primary_700};\n    background-color: ${COLORS.primary_100};\n    border-bottom: 3px solid transparent;\n    box-shadow: none;\n  }\n\n  & > a.active {\n    color: ${COLORS.neutral_800};\n    border-bottom: 3px solid ${COLORS.primary_500};\n    background-color: ${COLORS.neutral_20};\n    cursor: default;\n    box-shadow: none;\n    &:hover {\n      color: ${COLORS.primary_800};\n      background-color: ${COLORS.primary_20};\n      border-bottom: 3px solid ${COLORS.primary_500};\n    }\n    &:active {\n      color: ${COLORS.primary_700};\n      background-color: ${COLORS.primary_100};\n      border-bottom: 3px solid ${COLORS.primary_500};\n    }\n  }\n`;\n\nconst Dots = styled(Item)`\n  padding-top: 1%;\n  cursor: not-allowed;\n`;\n\ntype PaginatorProps = {\n  pageCount: number;\n  currentPage: number;\n  baseUrl: string;\n  onPageChange?: (page: number) => void;\n};\n\nconst Step = ({\n  up = true,\n  target = '',\n  disabled = false,\n  page,\n  onPageChange,\n  testId,\n}: {\n  up: boolean;\n  target: string;\n  disabled: boolean;\n  page: number;\n  onPageChange?: (page: number) => void;\n  testId?: string;\n}) => {\n  if (disabled)\n    return (\n      <Item style={{ cursor: 'not-allowed' }} data-testid={`${testId}_Disabled`}>\n        {up ? <ChevronRight size=\"20\" color={COLORS.neutral_300} /> : <ChevronLeft size=\"20\" color={COLORS.neutral_300} />}\n      </Item>\n    );\n  return (\n    <Item data-testid={`${testId}_Enabled`}>\n      <NavLink\n        to={target}\n        onClick={() => {\n          if (onPageChange) onPageChange(page);\n        }}>\n        {up ? <ChevronRight size=\"20\" /> : <ChevronLeft />}\n      </NavLink>\n    </Item>\n  );\n};\n\nconst Paginator = ({ pageCount = 1, currentPage = 1, baseUrl = '', onPageChange }: PaginatorProps) => {\n  const pages = [];\n  let from = 2;\n  let to = 4;\n  if (pageCount === 0) return null;\n\n  if (pageCount > 1) {\n    if (currentPage >= 4 && currentPage <= pageCount - 2) {\n      from = currentPage - 1;\n      to = currentPage + 1;\n    } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {\n      from = pageCount - 3;\n      to = pageCount - 1;\n    }\n    if (to > pageCount) {\n      to = pageCount;\n    }\n    for (let i = from; i <= to; i += 1) {\n      pages.push(i);\n    }\n  }\n\n  return (\n    <Container>\n      <Items>\n        <Step\n          up={false}\n          target={`${baseUrl}/${currentPage - 1}`}\n          page={currentPage - 1}\n          disabled={currentPage === 1}\n          onPageChange={() => {\n            if (onPageChange) onPageChange(currentPage - 1);\n          }}\n          testId=\"Test-StepLeft\"\n        />\n        {pages.findIndex(item => item === 1) === -1 && (\n          <Item>\n            <NavLink\n              to={`${baseUrl}/1`}\n              onClick={() => {\n                if (onPageChange) onPageChange(1);\n              }}>\n              1\n            </NavLink>\n          </Item>\n        )}\n        {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\n          <Dots>\n            <MoreHorizontal color={COLORS.neutral_600} />\n          </Dots>\n        )}\n        {pages.map(page => (\n          <Item key={page}>\n            <NavLink\n              to={`${baseUrl}/${page}`}\n              onClick={() => {\n                if (onPageChange) onPageChange(page);\n              }}>\n              {page}\n            </NavLink>\n          </Item>\n        ))}\n        {pageCount > 5 && currentPage <= pageCount - 3 && (\n          <Dots>\n            <MoreHorizontal color={COLORS.neutral_600} />\n          </Dots>\n        )}\n        {pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && (\n          <Item>\n            <NavLink\n              to={`${baseUrl}/${pageCount}`}\n              onClick={() => {\n                if (onPageChange) onPageChange(pageCount);\n              }}>\n              {pageCount}\n            </NavLink>\n          </Item>\n        )}\n        <Step\n          up\n          target={`${baseUrl}/${currentPage + 1}`}\n          page={currentPage + 1}\n          disabled={currentPage === pageCount}\n          onPageChange={() => {\n            if (onPageChange) onPageChange(currentPage + 1);\n          }}\n          testId=\"Test-StepRight\"\n        />\n      </Items>\n    </Container>\n  );\n};\n\nexport default Paginator;\n"],"file":"Paginator.js"}
+{"version":3,"sources":["../../../src/Paginator/Paginator.tsx"],"names":["React","styled","NavLink","BREAKPOINTS","COLORS","ComponentTextStyle","ChevronLeft","ChevronRight","MoreHorizontal","ComponentMStyling","Container","nav","MEDIUM","Items","ul","Item","li","Regular","neutral_600","primary_800","primary_20","primary_700","primary_100","neutral_800","primary_500","neutral_20","Dots","Step","up","target","disabled","page","onPageChange","testId","cursor","neutral_300","Paginator","pageCount","currentPage","baseUrl","pages","from","to","i","push","findIndex","item","map"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ChevronLeft, ChevronRight, MoreHorizontal} from '../icons/systemicons/SystemIcons';\nimport {ComponentMStyling} from '../styles/typography';\n\nconst Container = styled.nav`\n  margin: 20px 0;\n  display: flex;\n  justify-content: center;\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 75%;\n  }\n`;\n\nconst Items = styled.ul`\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n`;\n\nconst Item = styled.li`\n  width: 48px;\n  height: 45px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  & > * {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    text-decoration: none;\n    border-bottom: 3px solid transparent;\n\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n    &:focus,\n    &:focus-within {\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n      outline-width: 0;\n    }\n  }\n  & > a:hover {\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_20};\n    border-bottom: 3px solid transparent;\n    box-shadow: none;\n  }\n  & > a:active {\n    color: ${COLORS.primary_700};\n    background-color: ${COLORS.primary_100};\n    border-bottom: 3px solid transparent;\n    box-shadow: none;\n  }\n\n  & > a.active {\n    color: ${COLORS.neutral_800};\n    border-bottom: 3px solid ${COLORS.primary_500};\n    background-color: ${COLORS.neutral_20};\n    cursor: default;\n    box-shadow: none;\n    &:hover {\n      color: ${COLORS.primary_800};\n      background-color: ${COLORS.primary_20};\n      border-bottom: 3px solid ${COLORS.primary_500};\n    }\n    &:active {\n      color: ${COLORS.primary_700};\n      background-color: ${COLORS.primary_100};\n      border-bottom: 3px solid ${COLORS.primary_500};\n    }\n  }\n`;\n\nconst Dots = styled(Item)`\n  padding-top: 1%;\n  cursor: not-allowed;\n`;\n\ntype PaginatorProps = {\n  pageCount: number;\n  currentPage: number;\n  baseUrl: string;\n  onPageChange?: (page: number) => void;\n};\n\nconst Step = ({\n  up = true,\n  target = '',\n  disabled = false,\n  page,\n  onPageChange,\n  testId,\n}: {\n  up: boolean;\n  target: string;\n  disabled: boolean;\n  page: number;\n  onPageChange?: (page: number) => void;\n  testId?: string;\n}) => {\n  if (disabled)\n    return (\n      <Item style={{ cursor: 'not-allowed' }} data-testid={`${testId}_Disabled`}>\n        {up ? <ChevronRight size=\"20\" color={COLORS.neutral_300} /> : <ChevronLeft size=\"20\" color={COLORS.neutral_300} />}\n      </Item>\n    );\n  return (\n    <Item data-testid={`${testId}_Enabled`}>\n      <NavLink\n        to={target}\n        onClick={() => {\n          if (onPageChange) onPageChange(page);\n        }}>\n        {up ? <ChevronRight size=\"20\" /> : <ChevronLeft />}\n      </NavLink>\n    </Item>\n  );\n};\n\nconst Paginator = ({ pageCount = 1, currentPage = 1, baseUrl = '', onPageChange }: PaginatorProps) => {\n  const pages = [];\n  let from = 2;\n  let to = 4;\n  if (pageCount === 0) return null;\n\n  if (pageCount > 1) {\n    if (currentPage >= 4 && currentPage <= pageCount - 2) {\n      from = currentPage - 1;\n      to = currentPage + 1;\n    } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {\n      from = pageCount - 3;\n      to = pageCount - 1;\n    }\n    if (to > pageCount) {\n      to = pageCount;\n    }\n    for (let i = from; i <= to; i += 1) {\n      pages.push(i);\n    }\n  }\n\n  return (\n    <Container>\n      <Items>\n        <Step\n          up={false}\n          target={`${baseUrl}/${currentPage - 1}`}\n          page={currentPage - 1}\n          disabled={currentPage === 1}\n          onPageChange={() => {\n            if (onPageChange) onPageChange(currentPage - 1);\n          }}\n          testId=\"Test-StepLeft\"\n        />\n        {pages.findIndex(item => item === 1) === -1 && (\n          <Item>\n            <NavLink\n              to={`${baseUrl}/1`}\n              onClick={() => {\n                if (onPageChange) onPageChange(1);\n              }}>\n              1\n            </NavLink>\n          </Item>\n        )}\n        {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\n          <Dots>\n            <MoreHorizontal color={COLORS.neutral_600} />\n          </Dots>\n        )}\n        {pages.map(page => (\n          <Item key={page}>\n            <NavLink\n              to={`${baseUrl}/${page}`}\n              onClick={() => {\n                if (onPageChange) onPageChange(page);\n              }}>\n              {page}\n            </NavLink>\n          </Item>\n        ))}\n        {pageCount > 5 && currentPage <= pageCount - 3 && (\n          <Dots>\n            <MoreHorizontal color={COLORS.neutral_600} />\n          </Dots>\n        )}\n        {pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && (\n          <Item>\n            <NavLink\n              to={`${baseUrl}/${pageCount}`}\n              onClick={() => {\n                if (onPageChange) onPageChange(pageCount);\n              }}>\n              {pageCount}\n            </NavLink>\n          </Item>\n        )}\n        <Step\n          up\n          target={`${baseUrl}/${currentPage + 1}`}\n          page={currentPage + 1}\n          disabled={currentPage === pageCount}\n          onPageChange={() => {\n            if (onPageChange) onPageChange(currentPage + 1);\n          }}\n          testId=\"Test-StepRight\"\n        />\n      </Items>\n    </Container>\n  );\n};\n\nexport default Paginator;\n"],"file":"Paginator.js"}

package/dist/esm/SkipToContent/SkipToContent.js

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import { COLORS, TYPOGRAPHY } from '../styles';
+import { COLORS, ComponentTextStyle } from '../styles';
+import { ComponentSStyling } from '../styles/typography';
 const SkipToContentLink = styled.a`
-  color: ${COLORS.black};
-  font-weight: bold;
-  font-size: 16px;
-  font-family: ${TYPOGRAPHY.fontFamily};
+  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.black)}
+  
   text-decoration: underline;
 `;
 const SkipToContentWrapper = styled.div`

package/dist/esm/SkipToContent/SkipToContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/SkipToContent/SkipToContent.tsx"],"names":["React","styled","COLORS","TYPOGRAPHY","SkipToContentLink","a","black","fontFamily","SkipToContentWrapper","div","accent2_200","SkipToContent","children"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAEA,SAASC,MAAT,EAAiBC,UAAjB,QAAmC,WAAnC;AAIA,MAAMC,iBAAiB,GAAGH,MAAM,CAACI,CAAE;AACnC,WAAWH,MAAM,CAACI,KAAM;AACxB;AACA;AACA,iBAAiBH,UAAU,CAACI,UAAW;AACvC;AACA,CANA;AAQA,MAAMC,oBAAoB,GAAGP,MAAM,CAACQ,GAAI;AACxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBP,MAAM,CAACQ,WAAY;AACrC;AACA;AACA;AACA;AACA;AACA,CAjBA;;AAmBA,MAAMC,aAA0D,GAAG,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAkB;AACnF,sBACE,oBAAC,oBAAD,qBACE,oBAAC,iBAAD;AAAmB,IAAA,IAAI,EAAC;AAAxB,KAAiCA,QAAjC,CADF,CADF;AAKD,CAND;;AAQA,eAAeD,aAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { COLORS, TYPOGRAPHY } from '../styles';\n\ntype SkipToContentProps = {};\n\nconst SkipToContentLink = styled.a`\n  color: ${COLORS.black};\n  font-weight: bold;\n  font-size: 16px;\n  font-family: ${TYPOGRAPHY.fontFamily};\n  text-decoration: underline;\n`;\n\nconst SkipToContentWrapper = styled.div`\n  text-decoration: none;\n  z-index: -1000;\n  height: 0px;\n  overflow-x: hidden;\n\n  &:focus-within {\n    height: auto;\n    padding: 16px;\n    z-index: 100000;\n\n    background: ${COLORS.accent2_200};\n  }\n\n  @media print {\n    display: none;\n  }\n`;\n\nconst SkipToContent: React.FunctionComponent<SkipToContentProps> = ({ children }) => {\n  return (\n    <SkipToContentWrapper>\n      <SkipToContentLink href=\"#main\">{children}</SkipToContentLink>\n    </SkipToContentWrapper>\n  );\n};\n\nexport default SkipToContent;\n"],"file":"SkipToContent.js"}
+{"version":3,"sources":["../../../src/SkipToContent/SkipToContent.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentSStyling","SkipToContentLink","a","Bold","black","SkipToContentWrapper","div","accent2_200","SkipToContent","children"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAEA,SAAQC,MAAR,EAAgBC,kBAAhB,QAAqD,WAArD;AACA,SAAQC,iBAAR,QAAgC,sBAAhC;AAIA,MAAMC,iBAAiB,GAAGJ,MAAM,CAACK,CAAE;AACnC,IAAIF,iBAAiB,CAACD,kBAAkB,CAACI,IAApB,EAA0BL,MAAM,CAACM,KAAjC,CAAwC;AAC7D;AACA;AACA,CAJA;AAMA,MAAMC,oBAAoB,GAAGR,MAAM,CAACS,GAAI;AACxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBR,MAAM,CAACS,WAAY;AACrC;AACA;AACA;AACA;AACA;AACA,CAjBA;;AAmBA,MAAMC,aAA0D,GAAG,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAkB;AACnF,sBACE,oBAAC,oBAAD,qBACE,oBAAC,iBAAD;AAAmB,IAAA,IAAI,EAAC;AAAxB,KAAiCA,QAAjC,CADF,CADF;AAKD,CAND;;AAQA,eAAeD,aAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {COLORS, ComponentTextStyle, TYPOGRAPHY} from '../styles';\nimport {ComponentSStyling} from '../styles/typography';\n\ntype SkipToContentProps = {};\n\nconst SkipToContentLink = styled.a`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.black)}\n  \n  text-decoration: underline;\n`;\n\nconst SkipToContentWrapper = styled.div`\n  text-decoration: none;\n  z-index: -1000;\n  height: 0px;\n  overflow-x: hidden;\n\n  &:focus-within {\n    height: auto;\n    padding: 16px;\n    z-index: 100000;\n\n    background: ${COLORS.accent2_200};\n  }\n\n  @media print {\n    display: none;\n  }\n`;\n\nconst SkipToContent: React.FunctionComponent<SkipToContentProps> = ({ children }) => {\n  return (\n    <SkipToContentWrapper>\n      <SkipToContentLink href=\"#main\">{children}</SkipToContentLink>\n    </SkipToContentWrapper>\n  );\n};\n\nexport default SkipToContent;\n"],"file":"SkipToContent.js"}

package/dist/esm/Switcher/MobileSwitcherMenu.js

@@ -1,11 +1,12 @@
 import _pt from "prop-types";
 import * as React from 'react';
 import styled from 'styled-components';
-import { BREAKPOINTS, COLORS, scrollBarStyling } from '../styles';
+import { BREAKPOINTS, COLORS, ComponentTextStyle, scrollBarStyling } from '../styles';
 import { IconButton } from '../Button';
 import { ArrowLineLeft, Close } from '../icons/systemicons/SystemIcons';
 import { flowDown, Right, UserMenuSectionListStyling } from '../GlobalNavigationBar/mobile/CommonStyles';
 import SwitcherMenuItem from './SwitcherMenuItem';
+import { ComponentSStyling } from '../styles/typography';
 const Menu = styled.ul`
   list-style: none;
   margin: 0;
@@ -62,10 +63,9 @@ const Top = styled.div`
     margin-block-end: 0 !important;
     margin-inline-start: 0px;
     margin-inline-end: 0px;
-    font-weight: normal;
-    font-size: 16px;
-    color: inherit;
     margin-left: 24px;
+
+    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}
   }
 `;
 const LabelLine = styled.span`

package/dist/esm/Switcher/MobileSwitcherMenu.js.map

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

package/dist/esm/Switcher/SwitcherMenuItem.js

@@ -1,10 +1,8 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import { COLORS } from '../styles';
+import { COLORS, ComponentTextStyle } from '../styles';
+import { ComponentMStyling } from '../styles/typography';
 const StyledSwitcherItem = styled.div`
-  font-style: normal;
-  font-weight: normal;
-  font-size: 19px;
   padding: 16px 25px;
   margin: 0 2px;
 
@@ -13,7 +11,8 @@ const StyledSwitcherItem = styled.div`
   text-align: center;
   position: relative;
 
-  color: ${COLORS.neutral_600};
+  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}
+
   text-decoration: none;
 
   svg {
@@ -29,15 +28,13 @@ const StyledSwitcherItem = styled.div`
     bottom: 4px;
     width: 4px;
     background-color: transparent;
-    border-top-left-radius: 2px;
-    border-top-right-radius: 2px;
-    border-bottom-left-radius: 2px;
-    border-bottom-right-radius: 2px;
+    border-radius: 2px;
   }
 
   &.active:not(.disabled) {
     font-weight: bold;
     color: ${COLORS.neutral_800};
+
     &:after {
       background-color: ${COLORS.primary_500};
     }
@@ -65,9 +62,11 @@ const StyledSwitcherItem = styled.div`
     color: ${COLORS.primary_800};
     background-color: ${COLORS.primary_100};
     box-shadow: none;
+
     &:after {
       background-color: ${COLORS.primary_500};
     }
+
     svg path {
       fill: ${COLORS.primary_800};
     }

package/dist/esm/Switcher/SwitcherMenuItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Switcher/SwitcherMenuItem.tsx"],"names":["React","styled","COLORS","StyledSwitcherItem","div","neutral_600","neutral_800","primary_500","neutral_300","neutral_100","primary_600","primary_20","primary_800","primary_100","A","a","SwitcherMenuItem","label","url","disabled","Icon","as","testId","window","location","href"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,MAAT,QAAuB,WAAvB;AAGA,MAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAAI;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAWF,MAAM,CAACG,WAAY;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaH,MAAM,CAACI,WAAY;AAChC;AACA,0BAA0BJ,MAAM,CAACK,WAAY;AAC7C;AACA;AACA;AACA,cAAcL,MAAM,CAACI,WAAY;AACjC;AACA;AACA;AACA;AACA,aAAaJ,MAAM,CAACM,WAAY;AAChC,wBAAwBN,MAAM,CAACO,WAAY;AAC3C;AACA;AACA;AACA,aAAaP,MAAM,CAACQ,WAAY;AAChC,wBAAwBR,MAAM,CAACS,UAAW;AAC1C;AACA;AACA,cAAcT,MAAM,CAACQ,WAAY;AACjC;AACA;AACA;AACA;AACA,aAAaR,MAAM,CAACU,WAAY;AAChC,wBAAwBV,MAAM,CAACW,WAAY;AAC3C;AACA;AACA,0BAA0BX,MAAM,CAACK,WAAY;AAC7C;AACA;AACA,cAAcL,MAAM,CAACU,WAAY;AACjC;AACA;AACA;AACA;AACA,8BAA8BV,MAAM,CAACK,WAAY;AACjD;AACA;AACA,CA5EA;AA8EA,MAAMO,CAAC,GAAGb,MAAM,CAACc,CAAE,EAAnB;;AAEA,MAAMC,gBAAgB,GAAG,CAAC;AAAEC,EAAAA,KAAF;AAASC,EAAAA,GAAT;AAAcC,EAAAA,QAAd;AAAwBC,EAAAA,IAAxB;AAA8BC,EAAAA,EAAE,GAAGP,CAAnC;AAAsCQ,EAAAA;AAAtC,CAAD,kBACvB,oBAAC,kBAAD;AACE,EAAA,OAAO,EAAE,MAAOC,MAAM,CAACC,QAAP,CAAgBC,IAAhB,GAAuBP,GAAG,IAAI,EADhD;AAEE,EAAA,EAAE,EAAEG,EAFN;AAGE,EAAA,IAAI,EAAEH,GAAG,IAAI,EAHf;AAIE,EAAA,MAAM,EAAC,SAJT;AAKE,EAAA,GAAG,EAAED,KALP;AAME,EAAA,SAAS,EAAEE,QAAQ,GAAG,UAAH,GAAgB,EANrC;AAOE,iBAAaG;AAPf,GAQGF,IAAI,iBAAI,oBAAC,IAAD;AAAM,EAAA,IAAI,EAAC,MAAX;AAAkB,EAAA,KAAK,EAAC;AAAxB,EARX,EASGH,KATH,CADF;;AAcA,eAAeD,gBAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS } from '../styles';\nimport { SwitcherNavItem } from '../types';\n\nconst StyledSwitcherItem = styled.div`\n  font-style: normal;\n  font-weight: normal;\n  font-size: 19px;\n  padding: 16px 25px;\n  margin: 0 2px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  color: ${COLORS.neutral_600};\n  text-decoration: none;\n\n  svg {\n    margin-right: 16px;\n  }\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    left: 4px;\n    top: 4px;\n    bottom: 4px;\n    width: 4px;\n    background-color: transparent;\n    border-top-left-radius: 2px;\n    border-top-right-radius: 2px;\n    border-bottom-left-radius: 2px;\n    border-bottom-right-radius: 2px;\n  }\n\n  &.active:not(.disabled) {\n    font-weight: bold;\n    color: ${COLORS.neutral_800};\n    &:after {\n      background-color: ${COLORS.primary_500};\n    }\n\n    svg path {\n      fill: ${COLORS.neutral_800};\n    }\n  }\n\n  &.disabled {\n    color: ${COLORS.neutral_300};\n    background-color: ${COLORS.neutral_100};\n  }\n\n  &:hover:not(.disabled) {\n    color: ${COLORS.primary_600};\n    background-color: ${COLORS.primary_20};\n\n    svg path {\n      fill: ${COLORS.primary_600};\n    }\n  }\n\n  &:active:not(.disabled) {\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_100};\n    box-shadow: none;\n    &:after {\n      background-color: ${COLORS.primary_500};\n    }\n    svg path {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:focus:not(.disabled) {\n    box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n  }\n`;\n\nconst A = styled.a``;\n\nconst SwitcherMenuItem = ({ label, url, disabled, Icon, as = A, testId }: SwitcherNavItem) => (\n  <StyledSwitcherItem\n    onClick={() => (window.location.href = url || '')}\n    as={as}\n    href={url || ''}\n    target=\"_parent\"\n    key={label}\n    className={disabled ? 'disabled' : ''}\n    data-testid={testId}>\n    {Icon && <Icon size=\"22px\" color=\"#666666\" />}\n    {label}\n  </StyledSwitcherItem>\n);\n\nexport default SwitcherMenuItem;\n"],"file":"SwitcherMenuItem.js"}
+{"version":3,"sources":["../../../src/Switcher/SwitcherMenuItem.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentMStyling","StyledSwitcherItem","div","Regular","neutral_600","neutral_800","primary_500","neutral_300","neutral_100","primary_600","primary_20","primary_800","primary_100","A","a","SwitcherMenuItem","label","url","disabled","Icon","as","testId","window","location","href"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,EAAgBC,kBAAhB,QAAyC,WAAzC;AAEA,SAAQC,iBAAR,QAAgC,sBAAhC;AAEA,MAAMC,kBAAkB,GAAGJ,MAAM,CAACK,GAAI;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIF,iBAAiB,CAACD,kBAAkB,CAACI,OAApB,EAA6BL,MAAM,CAACM,WAApC,CAAiD;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaN,MAAM,CAACO,WAAY;AAChC;AACA;AACA,0BAA0BP,MAAM,CAACQ,WAAY;AAC7C;AACA;AACA;AACA,cAAcR,MAAM,CAACO,WAAY;AACjC;AACA;AACA;AACA;AACA,aAAaP,MAAM,CAACS,WAAY;AAChC,wBAAwBT,MAAM,CAACU,WAAY;AAC3C;AACA;AACA;AACA,aAAaV,MAAM,CAACW,WAAY;AAChC,wBAAwBX,MAAM,CAACY,UAAW;AAC1C;AACA;AACA,cAAcZ,MAAM,CAACW,WAAY;AACjC;AACA;AACA;AACA;AACA,aAAaX,MAAM,CAACa,WAAY;AAChC,wBAAwBb,MAAM,CAACc,WAAY;AAC3C;AACA;AACA;AACA,0BAA0Bd,MAAM,CAACQ,WAAY;AAC7C;AACA;AACA;AACA,cAAcR,MAAM,CAACa,WAAY;AACjC;AACA;AACA;AACA;AACA,8BAA8Bb,MAAM,CAACQ,WAAY;AACjD;AACA;AACA,CA1EA;AA4EA,MAAMO,CAAC,GAAGhB,MAAM,CAACiB,CAAE,EAAnB;;AAEA,MAAMC,gBAAgB,GAAG,CAAC;AAAEC,EAAAA,KAAF;AAASC,EAAAA,GAAT;AAAcC,EAAAA,QAAd;AAAwBC,EAAAA,IAAxB;AAA8BC,EAAAA,EAAE,GAAGP,CAAnC;AAAsCQ,EAAAA;AAAtC,CAAD,kBACvB,oBAAC,kBAAD;AACE,EAAA,OAAO,EAAE,MAAOC,MAAM,CAACC,QAAP,CAAgBC,IAAhB,GAAuBP,GAAG,IAAI,EADhD;AAEE,EAAA,EAAE,EAAEG,EAFN;AAGE,EAAA,IAAI,EAAEH,GAAG,IAAI,EAHf;AAIE,EAAA,MAAM,EAAC,SAJT;AAKE,EAAA,GAAG,EAAED,KALP;AAME,EAAA,SAAS,EAAEE,QAAQ,GAAG,UAAH,GAAgB,EANrC;AAOE,iBAAaG;AAPf,GAQGF,IAAI,iBAAI,oBAAC,IAAD;AAAM,EAAA,IAAI,EAAC,MAAX;AAAkB,EAAA,KAAK,EAAC;AAAxB,EARX,EASGH,KATH,CADF;;AAcA,eAAeD,gBAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport {SwitcherNavItem} from '../types';\nimport {ComponentMStyling} from '../styles/typography';\n\nconst StyledSwitcherItem = styled.div`\n  padding: 16px 25px;\n  margin: 0 2px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  text-decoration: none;\n\n  svg {\n    margin-right: 16px;\n  }\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    left: 4px;\n    top: 4px;\n    bottom: 4px;\n    width: 4px;\n    background-color: transparent;\n    border-radius: 2px;\n  }\n\n  &.active:not(.disabled) {\n    font-weight: bold;\n    color: ${COLORS.neutral_800};\n\n    &:after {\n      background-color: ${COLORS.primary_500};\n    }\n\n    svg path {\n      fill: ${COLORS.neutral_800};\n    }\n  }\n\n  &.disabled {\n    color: ${COLORS.neutral_300};\n    background-color: ${COLORS.neutral_100};\n  }\n\n  &:hover:not(.disabled) {\n    color: ${COLORS.primary_600};\n    background-color: ${COLORS.primary_20};\n\n    svg path {\n      fill: ${COLORS.primary_600};\n    }\n  }\n\n  &:active:not(.disabled) {\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_100};\n    box-shadow: none;\n\n    &:after {\n      background-color: ${COLORS.primary_500};\n    }\n\n    svg path {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:focus:not(.disabled) {\n    box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n  }\n`;\n\nconst A = styled.a``;\n\nconst SwitcherMenuItem = ({ label, url, disabled, Icon, as = A, testId }: SwitcherNavItem) => (\n  <StyledSwitcherItem\n    onClick={() => (window.location.href = url || '')}\n    as={as}\n    href={url || ''}\n    target=\"_parent\"\n    key={label}\n    className={disabled ? 'disabled' : ''}\n    data-testid={testId}>\n    {Icon && <Icon size=\"22px\" color=\"#666666\" />}\n    {label}\n  </StyledSwitcherItem>\n);\n\nexport default SwitcherMenuItem;\n"],"file":"SwitcherMenuItem.js"}

package/dist/esm/Tabs/HorizontalTabs.js

@@ -8,12 +8,13 @@ import * as React from 'react';
  * Import custom styles.
  */
 
-import { COLORS } from '../styles';
+import { COLORS, ComponentTextStyle } from '../styles';
 /**
  * Import third-party libraries.
  */
 
-import styled from 'styled-components'; // Add custom styles
+import styled from 'styled-components';
+import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography'; // Add custom styles
 
 const HorizontalTabContainer = styled.div`
   width: 100%;
@@ -146,32 +147,28 @@ const TabButton = styled.button`
     }
 
     &.size-XS {
-      font-size: 14px;
-      font-weight: 400;
+      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}
       padding: 0px 16px;
       height: 32px;
       margin-top: 16px;
     }
 
     &.size-S {
-      font-size: 16px;
-      font-weight: 400;
+      ${ComponentSStyling(ComponentTextStyle.Regular, null)}
       padding: 0px 16px;
       height: 40px;
       margin-top: 8px;
     }
 
     &.size-M {
-      font-size: 18px;
-      font-weight: 400;
+      ${ComponentMStyling(ComponentTextStyle.Regular, null)}
       height: 48px;
       min-width: 96px;
       padding: 0px 16px;
     }
 
     &.size-L {
-      font-size: 20px;
-      font-weight: 400;
+      ${ComponentLStyling(ComponentTextStyle.Regular, null)}
       height: 56px;
       min-width: 144px;
       padding: 0px 16px;

package/dist/esm/Tabs/HorizontalTabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tabs/HorizontalTabs.tsx"],"names":["React","COLORS","styled","HorizontalTabContainer","div","TabSideFill","neutral_100","white","TabButton","button","neutral_800","neutral_300","primary_20","primary_700","primary_800","focus_25","focus","primary_500","primary_100","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","doTabChange","to","document","activeElement","HTMLElement","blur","map","tab","index","width","length","selected","disabled","value"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { COLORS } from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n`;\n\nconst TabSideFill = styled.div`\n  position: absolute;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  height: Calc(100% - 1px);\n  z-index: 1;\n  width: 100%;\n\n  &.fill {\n    background: ${COLORS.white};\n  }\n`;\n\nconst TabButton = styled.button`\n  color: ${COLORS.neutral_800};\n  border: none;\n  background-color: transparent;\n  z-index: 2;\n  cursor: pointer;\n  padding: 0px;\n\n  &.disabled {\n    &:hover, &:focus {\n      cursor: not-allowed;\n      \n      div {\n        color: ${COLORS.neutral_300};\n        box-shadow: none !important;\n        background-color: transparent;\n        color: ${COLORS.neutral_300};\n      }\n    }\n  }\n\n  &:hover {\n    div {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  }\n  \n  &:focus {\n    div {\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  \n    &.selected {\n      background-color: ${COLORS.white};\n      border-top: 2px solid ${COLORS.primary_500};\n      border-bottom: 0px;\n      border-left: 1px solid ${COLORS.neutral_100};\n      border-right: 1px solid ${COLORS.neutral_100};\n    }\n  \n    &:focus {\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  \n    &:active {\n      background: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  \n    &.disabled {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      box-shadow: none !important;\n  \n      &:hover, &:focus {\n        background-color: transparent;\n        color: ${COLORS.neutral_300};\n      }\n    }\n\n    &.size-XS {\n      font-size: 14px;\n      font-weight: 400;\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-S {\n      font-size: 16px;\n      font-weight: 400;\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-M {\n      font-size: 18px;\n      font-weight: 400;\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-L {\n      font-size: 20px;\n      font-weight: 400;\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps {\n  size: HorizontalTabSizes;\n  tabs: HorizontalTab[];\n  sideFill?: boolean;\n  fullWidth?: boolean;\n  onTabChange: (to: string) => void;\n}\n\ninterface HorizontalTab {\n  value: string;\n  selected: boolean;\n  to: string;\n  disabled?: boolean;\n}\n\ntype HorizontalTabSizes = 'XS' | 'S' | 'M' | 'L';\n\nconst HorizontalTabs = ({ size, tabs, sideFill, fullWidth, onTabChange }: HorizontalTabProps) => {\n  /**\n   * Informs parent component of tab change and clears focus.\n   * @param to - A link to which user should be navigated.\n   */\n  const doTabChange = (to: string): void => {\n    // Let's inform parent component\n    onTabChange(to);\n\n    // Let's clear focus\n    if (document.activeElement instanceof HTMLElement) {\n      document.activeElement!.blur();\n    }\n  };\n\n  return (\n    <HorizontalTabContainer>\n      <TabSideFill className={`${sideFill ? 'fill' : ''}`} />\n      {tabs.map((tab: HorizontalTab, index: number) => (\n        <TabButton\n          key={`${tab}_${index}`}\n          style={fullWidth ? { width: `${100 / tabs.length}%` } : {}}\n          className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}\n          onClick={() => !tab.disabled && doTabChange(tab.to)}>\n          <div className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}>\n            {tab.value}\n          </div>\n        </TabButton>\n      ))}\n    </HorizontalTabContainer>\n  );\n};\n\nexport default HorizontalTabs;\n"],"file":"HorizontalTabs.js"}
+{"version":3,"sources":["../../../src/Tabs/HorizontalTabs.tsx"],"names":["React","COLORS","ComponentTextStyle","styled","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","HorizontalTabContainer","div","TabSideFill","neutral_100","white","TabButton","button","neutral_800","neutral_300","primary_20","primary_700","primary_800","focus_25","focus","primary_500","primary_100","Regular","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","doTabChange","to","document","activeElement","HTMLElement","blur","map","tab","index","width","length","selected","disabled","value"],"mappings":";;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,SAAQC,MAAR,EAAgBC,kBAAhB,QAAyC,WAAzC;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,iBAAR,EAA2BC,iBAA3B,EAA8CC,iBAA9C,EAAiEC,kBAAjE,QAA0F,sBAA1F,C,CAEA;;AACA,MAAMC,sBAAsB,GAAGL,MAAM,CAACM,GAAI;AAC1C;AACA;AACA;AACA;AACA,CALA;AAOA,MAAMC,WAAW,GAAGP,MAAM,CAACM,GAAI;AAC/B;AACA,6BAA6BR,MAAM,CAACU,WAAY;AAChD;AACA;AACA;AACA;AACA;AACA,kBAAkBV,MAAM,CAACW,KAAM;AAC/B;AACA,CAVA;AAYA,MAAMC,SAAS,GAAGV,MAAM,CAACW,MAAO;AAChC,WAAWb,MAAM,CAACc,WAAY;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiBd,MAAM,CAACe,WAAY;AACpC;AACA;AACA,iBAAiBf,MAAM,CAACe,WAAY;AACpC;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoBf,MAAM,CAACgB,UAAW;AACtC,eAAehB,MAAM,CAACiB,WAAY;AAClC;AACA;AACA,gCAAgCjB,MAAM,CAACiB,WAAY;AACnD;AACA,iCAAiCjB,MAAM,CAACU,WAAY;AACpD,kCAAkCV,MAAM,CAACU,WAAY;AACrD;AACA;AACA;AACA;AACA;AACA;AACA,eAAeV,MAAM,CAACkB,WAAY;AAClC,iCAAiClB,MAAM,CAACmB,QAAS,iBAAgBnB,MAAM,CAACoB,KAAM;AAC9E;AACA;AACA;AACA,gCAAgCpB,MAAM,CAACkB,WAAY;AACnD;AACA,iCAAiClB,MAAM,CAACU,WAAY;AACpD,kCAAkCV,MAAM,CAACU,WAAY;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoBV,MAAM,CAACgB,UAAW;AACtC,eAAehB,MAAM,CAACiB,WAAY;AAClC;AACA;AACA,gCAAgCjB,MAAM,CAACiB,WAAY;AACnD;AACA,iCAAiCjB,MAAM,CAACU,WAAY;AACpD,kCAAkCV,MAAM,CAACU,WAAY;AACrD;AACA;AACA;AACA;AACA,0BAA0BV,MAAM,CAACW,KAAM;AACvC,8BAA8BX,MAAM,CAACqB,WAAY;AACjD;AACA,+BAA+BrB,MAAM,CAACU,WAAY;AAClD,gCAAgCV,MAAM,CAACU,WAAY;AACnD;AACA;AACA;AACA,eAAeV,MAAM,CAACkB,WAAY;AAClC,iCAAiClB,MAAM,CAACmB,QAAS,iBAAgBnB,MAAM,CAACoB,KAAM;AAC9E;AACA;AACA;AACA,gCAAgCpB,MAAM,CAACkB,WAAY;AACnD;AACA,iCAAiClB,MAAM,CAACU,WAAY;AACpD,kCAAkCV,MAAM,CAACU,WAAY;AACrD;AACA;AACA;AACA;AACA,oBAAoBV,MAAM,CAACsB,WAAY;AACvC,eAAetB,MAAM,CAACkB,WAAY;AAClC,iCAAiClB,MAAM,CAACmB,QAAS,iBAAgBnB,MAAM,CAACoB,KAAM;AAC9E;AACA;AACA;AACA,gCAAgCpB,MAAM,CAACkB,WAAY;AACnD;AACA,iCAAiClB,MAAM,CAACU,WAAY;AACpD,kCAAkCV,MAAM,CAACU,WAAY;AACrD;AACA;AACA;AACA;AACA,eAAeV,MAAM,CAACe,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA,iBAAiBf,MAAM,CAACe,WAAY;AACpC;AACA;AACA;AACA;AACA,QAAQT,kBAAkB,CAACL,kBAAkB,CAACsB,OAApB,EAA6B,IAA7B,CAAmC;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA,QAAQlB,iBAAiB,CAACJ,kBAAkB,CAACsB,OAApB,EAA6B,IAA7B,CAAmC;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA,QAAQnB,iBAAiB,CAACH,kBAAkB,CAACsB,OAApB,EAA6B,IAA7B,CAAmC;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA,QAAQpB,iBAAiB,CAACF,kBAAkB,CAACsB,OAApB,EAA6B,IAA7B,CAAmC;AAC5D;AACA;AACA;AACA;AACA;AACA,CA7IA,C,CA+IA;;AAkBA,MAAMC,cAAc,GAAG,CAAC;AAAEC,EAAAA,IAAF;AAAQC,EAAAA,IAAR;AAAcC,EAAAA,QAAd;AAAwBC,EAAAA,SAAxB;AAAmCC,EAAAA;AAAnC,CAAD,KAA0E;AAC/F;AACF;AACA;AACA;AACE,QAAMC,WAAW,GAAIC,EAAD,IAAsB;AACxC;AACAF,IAAAA,WAAW,CAACE,EAAD,CAAX,CAFwC,CAIxC;;AACA,QAAIC,QAAQ,CAACC,aAAT,YAAkCC,WAAtC,EAAmD;AACjDF,MAAAA,QAAQ,CAACC,aAAT,CAAwBE,IAAxB;AACD;AACF,GARD;;AAUA,sBACE,oBAAC,sBAAD,qBACE,oBAAC,WAAD;AAAa,IAAA,SAAS,EAAG,GAAER,QAAQ,GAAG,MAAH,GAAY,EAAG;AAAlD,IADF,EAEGD,IAAI,CAACU,GAAL,CAAS,CAACC,GAAD,EAAqBC,KAArB,kBACR,oBAAC,SAAD;AACE,IAAA,GAAG,EAAG,GAAED,GAAI,IAAGC,KAAM,EADvB;AAEE,IAAA,KAAK,EAAEV,SAAS,GAAG;AAAEW,MAAAA,KAAK,EAAG,GAAE,MAAMb,IAAI,CAACc,MAAO;AAA9B,KAAH,GAAwC,EAF1D;AAGE,IAAA,SAAS,EAAG,QAAOf,IAAK,IAAGY,GAAG,CAACI,QAAJ,GAAe,UAAf,GAA4B,EAAG,IAAGJ,GAAG,CAACK,QAAJ,GAAe,UAAf,GAA4B,EAAG,EAH9F;AAIE,IAAA,OAAO,EAAE,MAAM,CAACL,GAAG,CAACK,QAAL,IAAiBZ,WAAW,CAACO,GAAG,CAACN,EAAL;AAJ7C,kBAKE;AAAK,IAAA,SAAS,EAAG,QAAON,IAAK,IAAGY,GAAG,CAACI,QAAJ,GAAe,UAAf,GAA4B,EAAG,IAAGJ,GAAG,CAACK,QAAJ,GAAe,UAAf,GAA4B,EAAG;AAAjG,KACGL,GAAG,CAACM,KADP,CALF,CADD,CAFH,CADF;AAgBD,CA/BD;;;AAhBElB,EAAAA,I,aAcwB,I,EAAO,G,EAAM,G,EAAM,G;AAb3CC,EAAAA,I;AAOAiB,IAAAA,K;AACAF,IAAAA,Q;AACAV,IAAAA,E;AACAW,IAAAA,Q;;AATAf,EAAAA,Q;AACAC,EAAAA,S;AACAC,EAAAA,W;;AA6CF,eAAeL,cAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport {COLORS, ComponentTextStyle} from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling} from '../styles/typography';\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n`;\n\nconst TabSideFill = styled.div`\n  position: absolute;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  height: Calc(100% - 1px);\n  z-index: 1;\n  width: 100%;\n\n  &.fill {\n    background: ${COLORS.white};\n  }\n`;\n\nconst TabButton = styled.button`\n  color: ${COLORS.neutral_800};\n  border: none;\n  background-color: transparent;\n  z-index: 2;\n  cursor: pointer;\n  padding: 0px;\n\n  &.disabled {\n    &:hover, &:focus {\n      cursor: not-allowed;\n      \n      div {\n        color: ${COLORS.neutral_300};\n        box-shadow: none !important;\n        background-color: transparent;\n        color: ${COLORS.neutral_300};\n      }\n    }\n  }\n\n  &:hover {\n    div {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  }\n  \n  &:focus {\n    div {\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  \n    &.selected {\n      background-color: ${COLORS.white};\n      border-top: 2px solid ${COLORS.primary_500};\n      border-bottom: 0px;\n      border-left: 1px solid ${COLORS.neutral_100};\n      border-right: 1px solid ${COLORS.neutral_100};\n    }\n  \n    &:focus {\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  \n    &:active {\n      background: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  \n    &.disabled {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      box-shadow: none !important;\n  \n      &:hover, &:focus {\n        background-color: transparent;\n        color: ${COLORS.neutral_300};\n      }\n    }\n\n    &.size-XS {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-S {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-M {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-L {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps {\n  size: HorizontalTabSizes;\n  tabs: HorizontalTab[];\n  sideFill?: boolean;\n  fullWidth?: boolean;\n  onTabChange: (to: string) => void;\n}\n\ninterface HorizontalTab {\n  value: string;\n  selected: boolean;\n  to: string;\n  disabled?: boolean;\n}\n\ntype HorizontalTabSizes = 'XS' | 'S' | 'M' | 'L';\n\nconst HorizontalTabs = ({ size, tabs, sideFill, fullWidth, onTabChange }: HorizontalTabProps) => {\n  /**\n   * Informs parent component of tab change and clears focus.\n   * @param to - A link to which user should be navigated.\n   */\n  const doTabChange = (to: string): void => {\n    // Let's inform parent component\n    onTabChange(to);\n\n    // Let's clear focus\n    if (document.activeElement instanceof HTMLElement) {\n      document.activeElement!.blur();\n    }\n  };\n\n  return (\n    <HorizontalTabContainer>\n      <TabSideFill className={`${sideFill ? 'fill' : ''}`} />\n      {tabs.map((tab: HorizontalTab, index: number) => (\n        <TabButton\n          key={`${tab}_${index}`}\n          style={fullWidth ? { width: `${100 / tabs.length}%` } : {}}\n          className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}\n          onClick={() => !tab.disabled && doTabChange(tab.to)}>\n          <div className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}>\n            {tab.value}\n          </div>\n        </TabButton>\n      ))}\n    </HorizontalTabContainer>\n  );\n};\n\nexport default HorizontalTabs;\n"],"file":"HorizontalTabs.js"}

package/dist/esm/Toasters/Toast.js

@@ -90,7 +90,7 @@ const Container = styled.div`
     font-weight: bold;
   }
 
-  color: ${COLORS.white};
+  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.white)}
 
   &.${ToastColor[ToastColor.BLACK]} {
     background-color: ${COLORS.neutral_800};
@@ -158,7 +158,6 @@ const CloseButton = styled.div`
   }
 `;
 const TextContainer = styled.span`
-  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}
   font-feature-settings: 'liga' off;
   width: 240px;
   display: flex;

package/dist/esm/Toasters/Toast.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Toasters/Toast.tsx"],"names":["React","styled","keyframes","ToastActionType","ToastColor","ToastEntryDirection","ToastPosition","BOXSHADOWS","COLORS","Close","Button","IconButton","ComponentSStyling","ComponentTextStyle","LoaderAnimationKeyframes","Loader","div","props","duration","BLACK","neutral_200","neutral_800","WHITE","neutral_400","white","BLUE","accent1_200","accent1_600","GREEN","correct_200","correct_500","ORANGE","warning_200","warning_500","RED","critical_200","critical_500","Container","BOXSHADOW_L2","animation","bezier","transform","withClose","withLoader","black","ActionButtons","CloseButton","neutral_600","TextContainer","span","Regular","IconContainer","DEFAULT_OPTIONS","color","autoClose","delay","showCloseButton","position","TOPLEFT","enterFrom","TOP","Toast","content","remove","options","testId","removeRef","useRef","current","elementRef","shouldRemove","setShouldRemove","useState","dimensions","setDimensions","width","height","opts","useEffect","id","setTimeout","clearTimeout","undefined","clientHeight","clientWidth","animations","direction","fromY","fromHeight","toY","toHeight","fromX","fromWidth","toX","toWidth","prop","theme","focus","icon","action","map","i","type","SECONDARY","handler","label","event","enter","BOTTOM","LEFT","RIGHT","leave"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { keyframes } from 'styled-components';\nimport { ToastActionType, ToastColor, ToastEntryDirection, ToastPosition } from '../types';\nimport { BOXSHADOWS, COLORS, TYPOGRAPHY } from '../styles';\nimport { Close } from '../icons/systemicons/SystemIcons';\nimport { Button, IconButton } from '../Button';\nimport { ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nconst LoaderAnimationKeyframes = keyframes`\n  0% {\n    background-position: right;\n  }\n  100% {\n    background-position: left;\n  }\n`;\n\nconst Loader = styled.div<{ duration: number }>`\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 4px;\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n\n  animation: ${LoaderAnimationKeyframes} ${(props) => props.duration}ms cubic-bezier(0.18, 0.39, 0.35, 1);\n\n  &.${ToastColor[ToastColor.BLACK]} {\n    background: linear-gradient(to right, ${COLORS.neutral_200} 50%, ${COLORS.neutral_800} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    background: linear-gradient(to right, ${COLORS.neutral_400} 50%, ${COLORS.white} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.BLUE]} {\n    background: linear-gradient(to right, ${COLORS.accent1_200} 50%, ${COLORS.accent1_600} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.GREEN]} {\n    background: linear-gradient(to right, ${COLORS.correct_200} 50%, ${COLORS.correct_500} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.ORANGE]} {\n    background: linear-gradient(to right, ${COLORS.warning_200} 50%, ${COLORS.warning_500} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.RED]} {\n    background: linear-gradient(to right, ${COLORS.critical_200} 50%, ${COLORS.critical_500} 50%) left;\n    background-size: 200% 100%;\n  }\n`;\n\nconst Container = styled.div<{ animation: { duration: string; bezier: string; transform: string; keyframes: any }; withLoader: boolean; withClose: boolean }>`\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n  border-radius: 4px;\n\n  animation: ${(props) => props.animation.keyframes} ${(props) => props.animation.duration} ${(props) => props.animation.bezier};\n  transform: ${(props) => props.animation.transform};\n\n  transition: all 300ms cubic-bezier(0.64, 0.04, 0.35, 1);\n\n  padding: 0 ${(props) => (props.withClose ? '0' : '16px')} ${(props) => (props.withLoader ? '4px' : '0')} 16px;\n\n  margin-bottom: 8px;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  justify-content: left;\n\n  position: relative;\n\n  width: max-content;\n  min-height: 48px;\n  box-sizing: border-box;\n\n  & a {\n    color: ${COLORS.white};\n    font-weight: bold;\n  }\n\n  color: ${COLORS.white};\n\n  &.${ToastColor[ToastColor.BLACK]} {\n    background-color: ${COLORS.neutral_800};\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    background-color: ${COLORS.white};\n    color: ${COLORS.black};\n\n    & a {\n      color: ${COLORS.black};\n      font-weight: bold;\n    }\n  }\n\n  &.${ToastColor[ToastColor.BLUE]} {\n    background-color: ${COLORS.accent1_600};\n  }\n\n  &.${ToastColor[ToastColor.GREEN]} {\n    background-color: ${COLORS.correct_500};\n  }\n\n  &.${ToastColor[ToastColor.ORANGE]} {\n    background-color: ${COLORS.warning_500};\n  }\n\n  &.${ToastColor[ToastColor.RED]} {\n    background-color: ${COLORS.critical_500};\n  }\n`;\n\nconst ActionButtons = styled.div`\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n\n  & .action {\n    height: unset;\n  }\n`;\n\nconst CloseButton = styled.div`\n  & > button {\n    background-color: transparent;\n    border: none;\n    margin-left: 16px;\n\n    & svg {\n      padding: 0;\n    }\n  }\n\n  & > button:focus:not(:disabled):not(:active):not(:hover) div svg path {\n    fill: ${COLORS.white};\n  }\n\n  & div svg path {\n    fill: ${COLORS.white};\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    & div svg path {\n      fill: ${COLORS.neutral_600};\n    }\n  }\n`;\n\nconst TextContainer = styled.span`\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n  font-feature-settings: 'liga' off;\n  width: 240px;\n  display: flex;\n  padding: 16px 0;\n\n  a {\n    display: contents;\n    text-decoration: none;\n  }\n  a:hover {\n    text-decoration: underline;\n  }\n`;\n\nconst IconContainer = styled.span`\n  margin-right: -8px;\n`;\n\nexport type ToastOptions = {\n  color?: ToastColor;\n  autoClose?: boolean;\n  delay?: number;\n  showCloseButton?: boolean;\n  action?: {\n    label: string;\n    handler: () => void;\n    type?: ToastActionType;\n  }[];\n  position: ToastPosition;\n  enterFrom?: ToastEntryDirection;\n  icon?: React.ReactNode;\n};\n\ntype Props = {\n  remove?: any;\n  content: any;\n  options?: ToastOptions;\n  testId?: string;\n};\n\nconst DEFAULT_OPTIONS: ToastOptions = {\n  color: ToastColor.BLACK,\n  autoClose: true,\n  delay: 5000,\n  showCloseButton: false,\n  position: ToastPosition.TOPLEFT,\n  enterFrom: ToastEntryDirection.TOP,\n};\n\nconst Toast = ({ content, remove, options = DEFAULT_OPTIONS, testId }: Props) => {\n  const removeRef = React.useRef();\n  removeRef.current = remove;\n\n  const elementRef = React.useRef<any>(null);\n\n  const [shouldRemove, setShouldRemove] = React.useState(false);\n  const [dimensions, setDimensions] = React.useState<{ width: number; height: number }>({ width: 0, height: 0 });\n\n  const opts = { ...DEFAULT_OPTIONS, ...options };\n\n  React.useEffect(() => {\n    if (opts?.autoClose) {\n      // @ts-ignore\n      const id = setTimeout(() => setShouldRemove(true), opts.delay);\n      return () => clearTimeout(id);\n    }\n    return undefined;\n  }, []);\n\n  React.useEffect(() => {\n    if (shouldRemove) {\n      // @ts-ignore\n      const id = setTimeout(() => removeRef.current(), 200);\n      return () => clearTimeout(id);\n    }\n  }, [shouldRemove]);\n\n  React.useEffect(() => {\n    setDimensions({ height: elementRef.current?.clientHeight, width: elementRef.current?.clientWidth });\n  }, []);\n\n  const animation = animations[shouldRemove ? 'leave' : 'enter'];\n  const direction = animation[opts.enterFrom ?? ToastEntryDirection.TOP];\n\n  const fromY = dimensions.height * direction.fromHeight;\n  const toY = dimensions.height * direction.toHeight;\n  const fromX = dimensions.width * direction.fromWidth;\n  const toX = dimensions.width * direction.toWidth;\n\n  let prop = {\n    duration: animation.duration,\n    bezier: animation.bezier,\n    transform: `translateY(${toY}) translateX(${toX})`,\n    keyframes: keyframes`\n        0% {\n          transform: translateY(${fromY}px) translateX(${fromX}px);\n        }\n        100% {\n          transform: translateY(${toY}px) translateX(${toX}px);\n        }`,\n  };\n\n  if (!dimensions.height) {\n    prop = {\n      ...prop,\n      ...{\n        transform: 'translateY(-1000vh) translateX(-1000vw)',\n        keyframes: keyframes``,\n      },\n    };\n  }\n\n  const theme = ToastColor[opts.color ?? ToastColor.BLACK];\n\n  setTimeout(() => elementRef?.current?.focus());\n\n  return (\n    <Container data-testid={testId} animation={prop} ref={elementRef} withLoader={!!opts.autoClose} className={theme} withClose={!!opts.showCloseButton} tabIndex={-1}>\n      {opts.icon && <IconContainer>{opts.icon}</IconContainer>}\n      <TextContainer className={'description'}>{content}</TextContainer>\n      {opts.action && (\n        <ActionButtons>\n          {opts.action.map((action, i) => (\n            <Button\n              size={'small'}\n              variant={action.type === ToastActionType.SECONDARY ? 'secondary' : 'primary'}\n              colorTheme={opts.color !== ToastColor.WHITE ? 'dark' : 'teal'}\n              key={i}\n              onClick={() => {\n                setShouldRemove(true);\n                action.handler();\n              }}\n              className={'action'}>\n              {action.label}\n            </Button>\n          ))}\n        </ActionButtons>\n      )}\n      {opts.showCloseButton && (\n        <CloseButton className={`close-button ${theme}`}>\n          <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground action={(event) => setShouldRemove(true)}>\n            <Close size=\"24px\" color={COLORS.neutral_600} />\n          </IconButton>\n        </CloseButton>\n      )}\n      {!!opts.autoClose && <Loader className={`loader ${theme}`} duration={opts.delay ?? 0} />}\n    </Container>\n  );\n};\n\nexport default Toast;\n\nconst animations = {\n  enter: {\n    bezier: 'cubic-bezier(0.22, 0.61, 0.35, 1)',\n    duration: '300ms',\n    [ToastEntryDirection.TOP]: {\n      fromHeight: -1,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.BOTTOM]: {\n      fromHeight: 1,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.LEFT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: -1,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.RIGHT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 1,\n      toWidth: 0,\n    },\n  },\n  leave: {\n    bezier: 'cubic-bezier(0.5, 0.05, 0.67, 0.19)',\n    duration: '205ms',\n    [ToastEntryDirection.TOP]: {\n      fromHeight: 0,\n      toHeight: -1,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.BOTTOM]: {\n      fromHeight: 0,\n      toHeight: 1,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.LEFT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: -1,\n    },\n    [ToastEntryDirection.RIGHT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 1,\n    },\n  },\n};\n"],"file":"Toast.js"}
+{"version":3,"sources":["../../../src/Toasters/Toast.tsx"],"names":["React","styled","keyframes","ToastActionType","ToastColor","ToastEntryDirection","ToastPosition","BOXSHADOWS","COLORS","Close","Button","IconButton","ComponentSStyling","ComponentTextStyle","LoaderAnimationKeyframes","Loader","div","props","duration","BLACK","neutral_200","neutral_800","WHITE","neutral_400","white","BLUE","accent1_200","accent1_600","GREEN","correct_200","correct_500","ORANGE","warning_200","warning_500","RED","critical_200","critical_500","Container","BOXSHADOW_L2","animation","bezier","transform","withClose","withLoader","Regular","black","ActionButtons","CloseButton","neutral_600","TextContainer","span","IconContainer","DEFAULT_OPTIONS","color","autoClose","delay","showCloseButton","position","TOPLEFT","enterFrom","TOP","Toast","content","remove","options","testId","removeRef","useRef","current","elementRef","shouldRemove","setShouldRemove","useState","dimensions","setDimensions","width","height","opts","useEffect","id","setTimeout","clearTimeout","undefined","clientHeight","clientWidth","animations","direction","fromY","fromHeight","toY","toHeight","fromX","fromWidth","toX","toWidth","prop","theme","focus","icon","action","map","i","type","SECONDARY","handler","label","event","enter","BOTTOM","LEFT","RIGHT","leave"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { keyframes } from 'styled-components';\nimport { ToastActionType, ToastColor, ToastEntryDirection, ToastPosition } from '../types';\nimport { BOXSHADOWS, COLORS, TYPOGRAPHY } from '../styles';\nimport { Close } from '../icons/systemicons/SystemIcons';\nimport { Button, IconButton } from '../Button';\nimport { ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nconst LoaderAnimationKeyframes = keyframes`\n  0% {\n    background-position: right;\n  }\n  100% {\n    background-position: left;\n  }\n`;\n\nconst Loader = styled.div<{ duration: number }>`\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 4px;\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n\n  animation: ${LoaderAnimationKeyframes} ${(props) => props.duration}ms cubic-bezier(0.18, 0.39, 0.35, 1);\n\n  &.${ToastColor[ToastColor.BLACK]} {\n    background: linear-gradient(to right, ${COLORS.neutral_200} 50%, ${COLORS.neutral_800} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    background: linear-gradient(to right, ${COLORS.neutral_400} 50%, ${COLORS.white} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.BLUE]} {\n    background: linear-gradient(to right, ${COLORS.accent1_200} 50%, ${COLORS.accent1_600} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.GREEN]} {\n    background: linear-gradient(to right, ${COLORS.correct_200} 50%, ${COLORS.correct_500} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.ORANGE]} {\n    background: linear-gradient(to right, ${COLORS.warning_200} 50%, ${COLORS.warning_500} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.RED]} {\n    background: linear-gradient(to right, ${COLORS.critical_200} 50%, ${COLORS.critical_500} 50%) left;\n    background-size: 200% 100%;\n  }\n`;\n\nconst Container = styled.div<{ animation: { duration: string; bezier: string; transform: string; keyframes: any }; withLoader: boolean; withClose: boolean }>`\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n  border-radius: 4px;\n\n  animation: ${(props) => props.animation.keyframes} ${(props) => props.animation.duration} ${(props) => props.animation.bezier};\n  transform: ${(props) => props.animation.transform};\n\n  transition: all 300ms cubic-bezier(0.64, 0.04, 0.35, 1);\n\n  padding: 0 ${(props) => (props.withClose ? '0' : '16px')} ${(props) => (props.withLoader ? '4px' : '0')} 16px;\n\n  margin-bottom: 8px;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  justify-content: left;\n\n  position: relative;\n\n  width: max-content;\n  min-height: 48px;\n  box-sizing: border-box;\n\n  & a {\n    color: ${COLORS.white};\n    font-weight: bold;\n  }\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.white)}\n\n  &.${ToastColor[ToastColor.BLACK]} {\n    background-color: ${COLORS.neutral_800};\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    background-color: ${COLORS.white};\n    color: ${COLORS.black};\n\n    & a {\n      color: ${COLORS.black};\n      font-weight: bold;\n    }\n  }\n\n  &.${ToastColor[ToastColor.BLUE]} {\n    background-color: ${COLORS.accent1_600};\n  }\n\n  &.${ToastColor[ToastColor.GREEN]} {\n    background-color: ${COLORS.correct_500};\n  }\n\n  &.${ToastColor[ToastColor.ORANGE]} {\n    background-color: ${COLORS.warning_500};\n  }\n\n  &.${ToastColor[ToastColor.RED]} {\n    background-color: ${COLORS.critical_500};\n  }\n`;\n\nconst ActionButtons = styled.div`\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n\n  & .action {\n    height: unset;\n  }\n`;\n\nconst CloseButton = styled.div`\n  & > button {\n    background-color: transparent;\n    border: none;\n    margin-left: 16px;\n\n    & svg {\n      padding: 0;\n    }\n  }\n\n  & > button:focus:not(:disabled):not(:active):not(:hover) div svg path {\n    fill: ${COLORS.white};\n  }\n\n  & div svg path {\n    fill: ${COLORS.white};\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    & div svg path {\n      fill: ${COLORS.neutral_600};\n    }\n  }\n`;\n\nconst TextContainer = styled.span`\n  font-feature-settings: 'liga' off;\n  width: 240px;\n  display: flex;\n  padding: 16px 0;\n\n  a {\n    display: contents;\n    text-decoration: none;\n  }\n  a:hover {\n    text-decoration: underline;\n  }\n`;\n\nconst IconContainer = styled.span`\n  margin-right: -8px;\n`;\n\nexport type ToastOptions = {\n  color?: ToastColor;\n  autoClose?: boolean;\n  delay?: number;\n  showCloseButton?: boolean;\n  action?: {\n    label: string;\n    handler: () => void;\n    type?: ToastActionType;\n  }[];\n  position: ToastPosition;\n  enterFrom?: ToastEntryDirection;\n  icon?: React.ReactNode;\n};\n\ntype Props = {\n  remove?: any;\n  content: any;\n  options?: ToastOptions;\n  testId?: string;\n};\n\nconst DEFAULT_OPTIONS: ToastOptions = {\n  color: ToastColor.BLACK,\n  autoClose: true,\n  delay: 5000,\n  showCloseButton: false,\n  position: ToastPosition.TOPLEFT,\n  enterFrom: ToastEntryDirection.TOP,\n};\n\nconst Toast = ({ content, remove, options = DEFAULT_OPTIONS, testId }: Props) => {\n  const removeRef = React.useRef();\n  removeRef.current = remove;\n\n  const elementRef = React.useRef<any>(null);\n\n  const [shouldRemove, setShouldRemove] = React.useState(false);\n  const [dimensions, setDimensions] = React.useState<{ width: number; height: number }>({ width: 0, height: 0 });\n\n  const opts = { ...DEFAULT_OPTIONS, ...options };\n\n  React.useEffect(() => {\n    if (opts?.autoClose) {\n      // @ts-ignore\n      const id = setTimeout(() => setShouldRemove(true), opts.delay);\n      return () => clearTimeout(id);\n    }\n    return undefined;\n  }, []);\n\n  React.useEffect(() => {\n    if (shouldRemove) {\n      // @ts-ignore\n      const id = setTimeout(() => removeRef.current(), 200);\n      return () => clearTimeout(id);\n    }\n  }, [shouldRemove]);\n\n  React.useEffect(() => {\n    setDimensions({ height: elementRef.current?.clientHeight, width: elementRef.current?.clientWidth });\n  }, []);\n\n  const animation = animations[shouldRemove ? 'leave' : 'enter'];\n  const direction = animation[opts.enterFrom ?? ToastEntryDirection.TOP];\n\n  const fromY = dimensions.height * direction.fromHeight;\n  const toY = dimensions.height * direction.toHeight;\n  const fromX = dimensions.width * direction.fromWidth;\n  const toX = dimensions.width * direction.toWidth;\n\n  let prop = {\n    duration: animation.duration,\n    bezier: animation.bezier,\n    transform: `translateY(${toY}) translateX(${toX})`,\n    keyframes: keyframes`\n        0% {\n          transform: translateY(${fromY}px) translateX(${fromX}px);\n        }\n        100% {\n          transform: translateY(${toY}px) translateX(${toX}px);\n        }`,\n  };\n\n  if (!dimensions.height) {\n    prop = {\n      ...prop,\n      ...{\n        transform: 'translateY(-1000vh) translateX(-1000vw)',\n        keyframes: keyframes``,\n      },\n    };\n  }\n\n  const theme = ToastColor[opts.color ?? ToastColor.BLACK];\n\n  setTimeout(() => elementRef?.current?.focus());\n\n  return (\n    <Container data-testid={testId} animation={prop} ref={elementRef} withLoader={!!opts.autoClose} className={theme} withClose={!!opts.showCloseButton} tabIndex={-1}>\n      {opts.icon && <IconContainer>{opts.icon}</IconContainer>}\n      <TextContainer className={'description'}>{content}</TextContainer>\n      {opts.action && (\n        <ActionButtons>\n          {opts.action.map((action, i) => (\n            <Button\n              size={'small'}\n              variant={action.type === ToastActionType.SECONDARY ? 'secondary' : 'primary'}\n              colorTheme={opts.color !== ToastColor.WHITE ? 'dark' : 'teal'}\n              key={i}\n              onClick={() => {\n                setShouldRemove(true);\n                action.handler();\n              }}\n              className={'action'}>\n              {action.label}\n            </Button>\n          ))}\n        </ActionButtons>\n      )}\n      {opts.showCloseButton && (\n        <CloseButton className={`close-button ${theme}`}>\n          <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground action={(event) => setShouldRemove(true)}>\n            <Close size=\"24px\" color={COLORS.neutral_600} />\n          </IconButton>\n        </CloseButton>\n      )}\n      {!!opts.autoClose && <Loader className={`loader ${theme}`} duration={opts.delay ?? 0} />}\n    </Container>\n  );\n};\n\nexport default Toast;\n\nconst animations = {\n  enter: {\n    bezier: 'cubic-bezier(0.22, 0.61, 0.35, 1)',\n    duration: '300ms',\n    [ToastEntryDirection.TOP]: {\n      fromHeight: -1,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.BOTTOM]: {\n      fromHeight: 1,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.LEFT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: -1,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.RIGHT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 1,\n      toWidth: 0,\n    },\n  },\n  leave: {\n    bezier: 'cubic-bezier(0.5, 0.05, 0.67, 0.19)',\n    duration: '205ms',\n    [ToastEntryDirection.TOP]: {\n      fromHeight: 0,\n      toHeight: -1,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.BOTTOM]: {\n      fromHeight: 0,\n      toHeight: 1,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.LEFT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: -1,\n    },\n    [ToastEntryDirection.RIGHT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 1,\n    },\n  },\n};\n"],"file":"Toast.js"}

package/dist/esm/styles/typography.js

@@ -23,6 +23,16 @@ const TypographyBase = styled('div')(({
   fontStyle: fontStyle ? fontStyle : 'normal',
   color: color ? color : COLORS.black
 }));
+
+const HeadlineBaseStyling = (fontSize, lineHeight, color) => {
+  return css`
+    font-size: ${fontSize};
+    line-height: ${lineHeight};
+    font-weight: 700;
+    color: ${color};
+  `;
+};
+
 const HeadlineBase = styled(TypographyBase)(({
   color,
   lineHeight,
@@ -33,6 +43,9 @@ const HeadlineBase = styled(TypographyBase)(({
   lineHeight: lineHeight,
   color: color
 }));
+
+const HeadlineXLStyling = color => HeadlineBaseStyling('48px', '64px', color);
+
 const HeadlineXL = styled(HeadlineBase)(({
   color
 }) => ({
@@ -40,6 +53,9 @@ const HeadlineXL = styled(HeadlineBase)(({
   lineHeight: '64px',
   color: color
 }));
+
+const HeadlineLStyling = color => HeadlineBaseStyling('40px', '52px', color);
+
 const HeadlineL = styled(HeadlineBase)(({
   color
 }) => ({
@@ -47,6 +63,9 @@ const HeadlineL = styled(HeadlineBase)(({
   lineHeight: '52px',
   color: color
 }));
+
+const HeadlineMStyling = color => HeadlineBaseStyling('32px', '40px', color);
+
 const HeadlineM = styled(HeadlineBase)(({
   color
 }) => ({
@@ -54,6 +73,9 @@ const HeadlineM = styled(HeadlineBase)(({
   lineHeight: '40px',
   color: color
 }));
+
+const HeadlineSStyling = color => HeadlineBaseStyling('28px', '36px', color);
+
 const HeadlineS = styled(HeadlineBase)(({
   color
 }) => ({
@@ -61,6 +83,9 @@ const HeadlineS = styled(HeadlineBase)(({
   lineHeight: '36px',
   color: color
 }));
+
+const HeadlineXSStyling = color => HeadlineBaseStyling('24px', '32px', color);
+
 const HeadlineXS = styled(HeadlineBase)(({
   color
 }) => ({
@@ -68,6 +93,9 @@ const HeadlineXS = styled(HeadlineBase)(({
   lineHeight: '32px',
   color: color
 }));
+
+const HeadlineXXSStyling = color => HeadlineBaseStyling('20px', '24px', color);
+
 const HeadlineXXS = styled(HeadlineBase)(({
   color
 }) => ({
@@ -148,6 +176,19 @@ const paragraphTextDecorationLine = textStyle => {
   return textDecoration;
 };
 
+const ParagraphBaseStyling = (fontSize, lineHeight, textStyle, color) => {
+  return css`
+    font-family: ${TYPOGRAPHY.fontFamily};
+    font-size: ${fontSize};
+    font-weight: ${paragraphFontWeight(textStyle)};
+    line-height: ${lineHeight};
+    font-style: ${paragraphFontStyle(textStyle)};
+    color: ${color};
+  `;
+};
+
+const ParagraphXlStyling = (textStyle, color) => ParagraphBaseStyling('24px', '36px', textStyle, color);
+
 const ParagraphXL = ({
   color,
   textStyle,
@@ -172,6 +213,8 @@ ParagraphXL.propTypes = {
   textStyle: _pt.oneOf([1, 2, 3, 4])
 };
 
+const ParagraphLStyling = (textStyle, color) => ParagraphBaseStyling('20px', '32px', textStyle, color);
+
 const ParagraphL = ({
   color,
   textStyle,
@@ -196,6 +239,8 @@ ParagraphL.propTypes = {
   textStyle: _pt.oneOf([1, 2, 3, 4])
 };
 
+const ParagraphMStyling = (textStyle, color) => ParagraphBaseStyling('18px', '28px', textStyle, color);
+
 const ParagraphM = ({
   color,
   textStyle,
@@ -220,6 +265,8 @@ ParagraphM.propTypes = {
   textStyle: _pt.oneOf([1, 2, 3, 4])
 };
 
+const ParagraphSStyling = (textStyle, color) => ParagraphBaseStyling('16px', '24px', textStyle, color);
+
 const ParagraphS = ({
   color,
   textStyle,
@@ -244,6 +291,8 @@ ParagraphS.propTypes = {
   textStyle: _pt.oneOf([1, 2, 3, 4])
 };
 
+const ParagraphXSStyling = (textStyle, color) => ParagraphBaseStyling('14px', '20px', textStyle, color);
+
 const ParagraphXS = ({
   color,
   textStyle,
@@ -303,7 +352,7 @@ const ComponentStyling = (fontSize, lineHeight, textStyle, color) => {
     font-weight: ${componentFontWeight(textStyle)};
     line-height: ${lineHeight};
     font-style: ${componentFontStyle(textStyle)};
-    color: ${color ? color : COLORS.black};
+    ${color === null ? '' : `color: ${color || COLORS.black};`}
   `;
 };
 
@@ -516,4 +565,6 @@ export { HeadlineXL, HeadlineL, HeadlineM, HeadlineS, HeadlineXS, HeadlineXXS };
 export { ParagraphTextStyle, ParagraphXL, ParagraphL, ParagraphM, ParagraphS, ParagraphXS };
 export { ComponentTextStyle, ComponentXL, ComponentL, ComponentM, ComponentS, ComponentXS, ComponentXXS, ComponentResponsive };
 export { ComponentXLStyling, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling };
+export { ParagraphXlStyling, ParagraphLStyling, ParagraphMStyling, ParagraphSStyling, ParagraphXSStyling };
+export { HeadlineXLStyling, HeadlineLStyling, HeadlineMStyling, HeadlineSStyling, HeadlineXSStyling, HeadlineXXSStyling };
 //# sourceMappingURL=typography.js.map