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

package/dist/umd/Tabs/HorizontalTabs.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "../styles", "styled-components"], factory);
+    define(["exports", "prop-types", "react", "../styles", "styled-components", "../styles/typography"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("../styles"), require("styled-components"));
+    factory(exports, require("prop-types"), require("react"), require("../styles"), require("styled-components"), require("../styles/typography"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.styles, global.styledComponents);
+    factory(mod.exports, global.propTypes, global.react, global.styles, global.styledComponents, global.typography);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _styles, _styledComponents) {
+})(this, function (exports, _propTypes, _react, _styles, _styledComponents, _typography) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -222,32 +222,28 @@
     }
 
     &.size-XS {
-      font-size: 14px;
-      font-weight: 400;
+      ${(0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null)}
       padding: 0px 16px;
       height: 32px;
       margin-top: 16px;
     }
 
     &.size-S {
-      font-size: 16px;
-      font-weight: 400;
+      ${(0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null)}
       padding: 0px 16px;
       height: 40px;
       margin-top: 8px;
     }
 
     &.size-M {
-      font-size: 18px;
-      font-weight: 400;
+      ${(0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null)}
       height: 48px;
       min-width: 96px;
       padding: 0px 16px;
     }
 
     &.size-L {
-      font-size: 20px;
-      font-weight: 400;
+      ${(0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null)}
       height: 56px;
       min-width: 144px;
       padding: 0px 16px;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tabs/HorizontalTabs.tsx"],"names":["HorizontalTabContainer","styled","div","TabSideFill","COLORS","neutral_100","white","TabButton","button","neutral_800","neutral_300","primary_20","primary_700","primary_800","focus_25","focus","primary_500","primary_100","size","tabs","sideFill","fullWidth","onTabChange","value","selected","to","disabled","HorizontalTabs","doTabChange","document","tab","index","width","length"],"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":["HorizontalTabContainer","styled","div","TabSideFill","COLORS","neutral_100","white","TabButton","button","neutral_800","neutral_300","primary_20","primary_700","primary_800","focus_25","focus","primary_500","primary_100","ComponentXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","ComponentLStyling","size","tabs","sideFill","fullWidth","onTabChange","value","selected","to","disabled","HorizontalTabs","doTabChange","document","tab","index","width","length"],"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, 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/umd/Toasters/Toast.js

@@ -209,7 +209,7 @@
     font-weight: bold;
   }
 
-  color: ${_styles.COLORS.white};
+  ${(0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.white)}
 
   &.${_types.ToastColor[_types.ToastColor.BLACK]} {
     background-color: ${_styles.COLORS.neutral_800};
@@ -277,7 +277,6 @@
   }
 `;
   const TextContainer = _styledComponents2.default.span`
-  ${(0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black)}
   font-feature-settings: 'liga' off;
   width: 240px;
   display: flex;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Toasters/Toast.tsx"],"names":["LoaderAnimationKeyframes","keyframes","Loader","styled","div","props","duration","ToastColor","COLORS","neutral_200","neutral_800","neutral_400","white","accent1_200","accent1_600","correct_200","correct_500","warning_200","warning_500","critical_200","critical_500","Container","BOXSHADOWS","BOXSHADOW_L2","bezier","transform","black","ActionButtons","CloseButton","neutral_600","TextContainer","span","ComponentSStyling","ComponentTextStyle","IconContainer","autoClose","delay","showCloseButton","action","label","handler","icon","remove","content","options","testId","DEFAULT_OPTIONS","color","position","ToastPosition","enterFrom","ToastEntryDirection","TOP","Toast","removeRef","React","elementRef","width","height","opts","id","setTimeout","setShouldRemove","clearTimeout","setDimensions","clientWidth","animation","animations","shouldRemove","direction","fromY","dimensions","toY","fromX","toX","prop","theme","ToastActionType","event","enter","fromHeight","toHeight","fromWidth","toWidth","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":["LoaderAnimationKeyframes","keyframes","Loader","styled","div","props","duration","ToastColor","COLORS","neutral_200","neutral_800","neutral_400","white","accent1_200","accent1_600","correct_200","correct_500","warning_200","warning_500","critical_200","critical_500","Container","BOXSHADOWS","BOXSHADOW_L2","bezier","transform","ComponentSStyling","ComponentTextStyle","black","ActionButtons","CloseButton","neutral_600","TextContainer","span","IconContainer","autoClose","delay","showCloseButton","action","label","handler","icon","remove","content","options","testId","DEFAULT_OPTIONS","color","position","ToastPosition","enterFrom","ToastEntryDirection","TOP","Toast","removeRef","React","elementRef","width","height","opts","id","setTimeout","setShouldRemove","clearTimeout","setDimensions","clientWidth","animation","animations","shouldRemove","direction","fromY","dimensions","toY","fromX","toX","prop","theme","ToastActionType","event","enter","fromHeight","toHeight","fromWidth","toWidth","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/umd/styles/typography.js

@@ -16,7 +16,7 @@
   Object.defineProperty(exports, "__esModule", {
     value: true
   });
-  exports.ComponentXXSStyling = exports.ComponentXSStyling = exports.ComponentSStyling = exports.ComponentMStyling = exports.ComponentLStyling = exports.ComponentXLStyling = exports.ComponentResponsive = exports.ComponentXXS = exports.ComponentXS = exports.ComponentS = exports.ComponentM = exports.ComponentL = exports.ComponentXL = exports.ComponentTextStyle = exports.ParagraphXS = exports.ParagraphS = exports.ParagraphM = exports.ParagraphL = exports.ParagraphXL = exports.ParagraphTextStyle = exports.HeadlineXXS = exports.HeadlineXS = exports.HeadlineS = exports.HeadlineM = exports.HeadlineL = exports.HeadlineXL = exports.TYPOGRAPHY = undefined;
+  exports.HeadlineXXSStyling = exports.HeadlineXSStyling = exports.HeadlineSStyling = exports.HeadlineMStyling = exports.HeadlineLStyling = exports.HeadlineXLStyling = exports.ParagraphXSStyling = exports.ParagraphSStyling = exports.ParagraphMStyling = exports.ParagraphLStyling = exports.ParagraphXlStyling = exports.ComponentXXSStyling = exports.ComponentXSStyling = exports.ComponentSStyling = exports.ComponentMStyling = exports.ComponentLStyling = exports.ComponentXLStyling = exports.ComponentResponsive = exports.ComponentXXS = exports.ComponentXS = exports.ComponentS = exports.ComponentM = exports.ComponentL = exports.ComponentXL = exports.ComponentTextStyle = exports.ParagraphXS = exports.ParagraphS = exports.ParagraphM = exports.ParagraphL = exports.ParagraphXL = exports.ParagraphTextStyle = exports.HeadlineXXS = exports.HeadlineXS = exports.HeadlineS = exports.HeadlineM = exports.HeadlineL = exports.HeadlineXL = exports.TYPOGRAPHY = undefined;
 
   var _propTypes2 = _interopRequireDefault(_propTypes);
 
@@ -51,6 +51,16 @@
     fontStyle: fontStyle ? fontStyle : 'normal',
     color: color ? color : _.COLORS.black
   }));
+
+  const HeadlineBaseStyling = (fontSize, lineHeight, color) => {
+    return _styledComponents.css`
+    font-size: ${fontSize};
+    line-height: ${lineHeight};
+    font-weight: 700;
+    color: ${color};
+  `;
+  };
+
   const HeadlineBase = (0, _styledComponents2.default)(TypographyBase)(({
     color,
     lineHeight,
@@ -61,6 +71,9 @@
     lineHeight: lineHeight,
     color: color
   }));
+
+  const HeadlineXLStyling = color => HeadlineBaseStyling('48px', '64px', color);
+
   const HeadlineXL = (0, _styledComponents2.default)(HeadlineBase)(({
     color
   }) => ({
@@ -68,6 +81,9 @@
     lineHeight: '64px',
     color: color
   }));
+
+  const HeadlineLStyling = color => HeadlineBaseStyling('40px', '52px', color);
+
   const HeadlineL = (0, _styledComponents2.default)(HeadlineBase)(({
     color
   }) => ({
@@ -75,6 +91,9 @@
     lineHeight: '52px',
     color: color
   }));
+
+  const HeadlineMStyling = color => HeadlineBaseStyling('32px', '40px', color);
+
   const HeadlineM = (0, _styledComponents2.default)(HeadlineBase)(({
     color
   }) => ({
@@ -82,6 +101,9 @@
     lineHeight: '40px',
     color: color
   }));
+
+  const HeadlineSStyling = color => HeadlineBaseStyling('28px', '36px', color);
+
   const HeadlineS = (0, _styledComponents2.default)(HeadlineBase)(({
     color
   }) => ({
@@ -89,6 +111,9 @@
     lineHeight: '36px',
     color: color
   }));
+
+  const HeadlineXSStyling = color => HeadlineBaseStyling('24px', '32px', color);
+
   const HeadlineXS = (0, _styledComponents2.default)(HeadlineBase)(({
     color
   }) => ({
@@ -96,6 +121,9 @@
     lineHeight: '32px',
     color: color
   }));
+
+  const HeadlineXXSStyling = color => HeadlineBaseStyling('20px', '24px', color);
+
   const HeadlineXXS = (0, _styledComponents2.default)(HeadlineBase)(({
     color
   }) => ({
@@ -176,6 +204,19 @@
     return textDecoration;
   };
 
+  const ParagraphBaseStyling = (fontSize, lineHeight, textStyle, color) => {
+    return _styledComponents.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,
@@ -200,6 +241,8 @@
     textStyle: _propTypes2.default.oneOf([1, 2, 3, 4])
   };
 
+  const ParagraphLStyling = (textStyle, color) => ParagraphBaseStyling('20px', '32px', textStyle, color);
+
   const ParagraphL = ({
     color,
     textStyle,
@@ -224,6 +267,8 @@
     textStyle: _propTypes2.default.oneOf([1, 2, 3, 4])
   };
 
+  const ParagraphMStyling = (textStyle, color) => ParagraphBaseStyling('18px', '28px', textStyle, color);
+
   const ParagraphM = ({
     color,
     textStyle,
@@ -248,6 +293,8 @@
     textStyle: _propTypes2.default.oneOf([1, 2, 3, 4])
   };
 
+  const ParagraphSStyling = (textStyle, color) => ParagraphBaseStyling('16px', '24px', textStyle, color);
+
   const ParagraphS = ({
     color,
     textStyle,
@@ -272,6 +319,8 @@
     textStyle: _propTypes2.default.oneOf([1, 2, 3, 4])
   };
 
+  const ParagraphXSStyling = (textStyle, color) => ParagraphBaseStyling('14px', '20px', textStyle, color);
+
   const ParagraphXS = ({
     color,
     textStyle,
@@ -331,7 +380,7 @@
     font-weight: ${componentFontWeight(textStyle)};
     line-height: ${lineHeight};
     font-style: ${componentFontStyle(textStyle)};
-    color: ${color ? color : _.COLORS.black};
+    ${color === null ? '' : `color: ${color || _.COLORS.black};`}
   `;
   };
 
@@ -566,5 +615,16 @@
   exports.ComponentSStyling = ComponentSStyling;
   exports.ComponentXSStyling = ComponentXSStyling;
   exports.ComponentXXSStyling = ComponentXXSStyling;
+  exports.ParagraphXlStyling = ParagraphXlStyling;
+  exports.ParagraphLStyling = ParagraphLStyling;
+  exports.ParagraphMStyling = ParagraphMStyling;
+  exports.ParagraphSStyling = ParagraphSStyling;
+  exports.ParagraphXSStyling = ParagraphXSStyling;
+  exports.HeadlineXLStyling = HeadlineXLStyling;
+  exports.HeadlineLStyling = HeadlineLStyling;
+  exports.HeadlineMStyling = HeadlineMStyling;
+  exports.HeadlineSStyling = HeadlineSStyling;
+  exports.HeadlineXSStyling = HeadlineXSStyling;
+  exports.HeadlineXXSStyling = HeadlineXXSStyling;
 });
 //# sourceMappingURL=typography.js.map

package/dist/umd/styles/typography.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/styles/typography.tsx"],"names":["TYPOGRAPHY","fontFamily","TypographyBase","textDecorationLine","fontSize","fontWeight","lineHeight","textTransform","fontStyle","color","COLORS","black","HeadlineBase","HeadlineXL","HeadlineL","HeadlineM","HeadlineS","HeadlineXS","HeadlineXXS","ParagraphStyling","css","ParagraphBase","styled","props","ParagraphTextStyle","textStyle","paragraphFontWeight","paragraphFontStyle","paragraphTextDecorationLine","textDecoration","ParagraphXL","children","ParagraphL","ParagraphM","ParagraphS","ParagraphXS","ComponentTextStyle","componentFontWeight","componentFontStyle","componentTextTransformation","ComponentStyling","ComponentXLStyling","ComponentXL","ComponentLStyling","ComponentL","ComponentMStyling","ComponentM","ComponentSStyling","ComponentS","ComponentXSStyling","ComponentXS","ComponentXXSStyling","ComponentXXS","ComponentResponsive","width","fontsize"],"mappings":"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","sourcesContent":["import React, { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { COLORS } from '.';\nimport { Property } from 'csstype';\n\nconst TYPOGRAPHY = {\n  fontFamily: 'Lato, sans-serif',\n};\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  fontFamily: TYPOGRAPHY.fontFamily,\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}\nconst HeadlineBase = styled(TypographyBase)<IHeadlineBase>(({ color, lineHeight, fontSize }) => ({\n  fontSize: fontSize,\n  fontWeight: 700,\n  lineHeight: lineHeight,\n  color: color,\n}));\n\nconst HeadlineXL = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n  fontSize: '48px',\n  lineHeight: '64px',\n  color: color,\n}));\n\nconst HeadlineL = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n  fontSize: '40px',\n  lineHeight: '52px',\n  color: color,\n}));\n\nconst HeadlineM = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n  fontSize: '32px',\n  lineHeight: '40px',\n  color: color,\n}));\n\nconst HeadlineS = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n  fontSize: '28px',\n  lineHeight: '36px',\n  color: color,\n}));\n\nconst HeadlineXS = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n  fontSize: '24px',\n  lineHeight: '32px',\n  color: color,\n}));\n\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};\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 ParagraphXL: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase color={color} lineHeight={36} fontSize={24} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} marginBetweenParagraphs=\"18px\">\n      {children}\n    </ParagraphBase>\n  );\n};\n\nconst ParagraphL: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase color={color} lineHeight={32} fontSize={20} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} marginBetweenParagraphs=\"16px\">\n      {children}\n    </ParagraphBase>\n  );\n};\n\nconst ParagraphM: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase color={color} lineHeight={28} fontSize={18} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} marginBetweenParagraphs=\"14px\">\n      {children}\n    </ParagraphBase>\n  );\n};\n\nconst ParagraphS: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase color={color} lineHeight={24} fontSize={16} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} marginBetweenParagraphs=\"12px\">\n      {children}\n    </ParagraphBase>\n  );\n};\n\nconst ParagraphXS: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase color={color} lineHeight={20} fontSize={14} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} 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  textStyle?: ComponentTextStyle;\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) => {\n  return css`\n    font-family: ${TYPOGRAPHY.fontFamily};\n    font-size: ${fontSize};\n    font-weight: ${componentFontWeight(textStyle)};\n    line-height: ${lineHeight};\n    font-style: ${componentFontStyle(textStyle)};\n    color: ${color ? color : COLORS.black};\n  `;\n};\n\nconst ComponentXLStyling = (textStyle: ComponentTextStyle, color: string) => ComponentStyling('24px', '28px', textStyle, color);\nconst ComponentXL: FunctionComponent<ComponentProps> = ({ color, textStyle, children }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  return (\n    <TypographyBase color={color} lineHeight={28} fontSize={24} fontWeight={fontWeight} fontStyle={fontStyle}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentLStyling = (textStyle: ComponentTextStyle, color: string) => ComponentStyling('20px', '24px', textStyle, color);\nconst ComponentL: FunctionComponent<ComponentProps> = ({ color, textStyle, children }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  return (\n    <TypographyBase color={color} lineHeight={24} fontSize={20} fontWeight={fontWeight} fontStyle={fontStyle}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentMStyling = (textStyle: ComponentTextStyle, color: string) => ComponentStyling('18px', '24px', textStyle, color);\nconst ComponentM: FunctionComponent<ComponentProps> = ({ color, textStyle, children }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  return (\n    <TypographyBase color={color} lineHeight={24} fontSize={18} fontWeight={fontWeight} fontStyle={fontStyle}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentSStyling = (textStyle: ComponentTextStyle, color: string) => ComponentStyling('16px', '20px', textStyle, color);\nconst ComponentS: FunctionComponent<ComponentProps> = ({ color, textStyle, children }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  return (\n    <TypographyBase color={color} lineHeight={20} fontSize={16} fontWeight={fontWeight} fontStyle={fontStyle}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentXSStyling = (textStyle: ComponentTextStyle, color: string) => ComponentStyling('14px', '16px', textStyle, color);\nconst ComponentXS: FunctionComponent<ComponentProps> = ({ color, textStyle, children }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  let textTransform = componentTextTransformation(textStyle);\n  return (\n    <TypographyBase 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) => ComponentStyling('12px', '16px', textStyle, color);\nconst ComponentXXS: FunctionComponent<ComponentProps> = ({ color, textStyle, children }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  let textTransform = componentTextTransformation(textStyle);\n  return (\n    <TypographyBase color={color} lineHeight={16} fontSize={12} fontWeight={fontWeight} fontStyle={fontStyle} textTransform={textTransform}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentResponsive: FunctionComponent<ComponentProps & { size?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large'; width: number }> = ({\n  color,\n  textStyle,\n  children,\n  size,\n  width,\n}) => {\n  let fontsize = size;\n  if (!size) {\n    if (width < 768) {\n      fontsize = 'small';\n    } else if (width < 992) {\n      fontsize = 'medium';\n    } else {\n      fontsize = 'large';\n    }\n  }\n  switch (fontsize) {\n    case 'xxsmall':\n      return <ComponentXXS color={color} textStyle={textStyle} children={children} />;\n    case 'xsmall':\n      return <ComponentXS color={color} textStyle={textStyle} children={children} />;\n    case 'small':\n      return <ComponentS color={color} textStyle={textStyle} children={children} />;\n    case 'medium':\n      return <ComponentM color={color} textStyle={textStyle} children={children} />;\n    case 'large':\n    default:\n      return <ComponentL color={color} textStyle={textStyle} children={children} />;\n  }\n};\n\nexport { TYPOGRAPHY };\nexport { HeadlineXL, HeadlineL, HeadlineM, HeadlineS, HeadlineXS, HeadlineXXS };\nexport { ParagraphTextStyle, ParagraphXL, ParagraphL, ParagraphM, ParagraphS, ParagraphXS };\nexport { ComponentTextStyle, ComponentXL, ComponentL, ComponentM, ComponentS, ComponentXS, ComponentXXS, ComponentResponsive };\nexport { ComponentXLStyling, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling };\n"],"file":"typography.js"}
+{"version":3,"sources":["../../../src/styles/typography.tsx"],"names":["TYPOGRAPHY","fontFamily","TypographyBase","textDecorationLine","fontSize","fontWeight","lineHeight","textTransform","fontStyle","color","COLORS","black","HeadlineBaseStyling","css","HeadlineBase","HeadlineXLStyling","HeadlineXL","HeadlineLStyling","HeadlineL","HeadlineMStyling","HeadlineM","HeadlineSStyling","HeadlineS","HeadlineXSStyling","HeadlineXS","HeadlineXXSStyling","HeadlineXXS","ParagraphStyling","ParagraphBase","styled","props","ParagraphTextStyle","textStyle","paragraphFontWeight","paragraphFontStyle","paragraphTextDecorationLine","textDecoration","ParagraphBaseStyling","ParagraphXlStyling","ParagraphXL","children","ParagraphLStyling","ParagraphL","ParagraphMStyling","ParagraphM","ParagraphSStyling","ParagraphS","ParagraphXSStyling","ParagraphXS","ComponentTextStyle","componentFontWeight","componentFontStyle","componentTextTransformation","ComponentStyling","ComponentXLStyling","ComponentXL","ComponentLStyling","ComponentL","ComponentMStyling","ComponentM","ComponentSStyling","ComponentS","ComponentXSStyling","ComponentXS","ComponentXXSStyling","ComponentXXS","ComponentResponsive","width","fontsize"],"mappings":"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","sourcesContent":["import React, { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { COLORS } from '.';\nimport { Property } from 'csstype';\n\nconst TYPOGRAPHY = {\n  fontFamily: 'Lato, sans-serif',\n};\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  fontFamily: TYPOGRAPHY.fontFamily,\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};\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-family: ${TYPOGRAPHY.fontFamily};\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: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase color={color} lineHeight={36} fontSize={24} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} marginBetweenParagraphs=\"18px\">\n      {children}\n    </ParagraphBase>\n  );\n};\n\nconst ParagraphLStyling = (textStyle: ParagraphTextStyle, color: string) => ParagraphBaseStyling('20px', '32px', textStyle, color);\nconst ParagraphL: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase color={color} lineHeight={32} fontSize={20} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} marginBetweenParagraphs=\"16px\">\n      {children}\n    </ParagraphBase>\n  );\n};\n\nconst ParagraphMStyling = (textStyle: ParagraphTextStyle, color: string) => ParagraphBaseStyling('18px', '28px', textStyle, color);\nconst ParagraphM: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase color={color} lineHeight={28} fontSize={18} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} marginBetweenParagraphs=\"14px\">\n      {children}\n    </ParagraphBase>\n  );\n};\n\nconst ParagraphSStyling = (textStyle: ParagraphTextStyle, color: string) => ParagraphBaseStyling('16px', '24px', textStyle, color);\nconst ParagraphS: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase color={color} lineHeight={24} fontSize={16} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} marginBetweenParagraphs=\"12px\">\n      {children}\n    </ParagraphBase>\n  );\n};\n\nconst ParagraphXSStyling = (textStyle: ParagraphTextStyle, color: string) => ParagraphBaseStyling('14px', '20px', textStyle, color);\nconst ParagraphXS: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase color={color} lineHeight={20} fontSize={14} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} 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  textStyle?: ComponentTextStyle;\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-family: ${TYPOGRAPHY.fontFamily};\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: FunctionComponent<ComponentProps> = ({ color, textStyle, children }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  return (\n    <TypographyBase 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: FunctionComponent<ComponentProps> = ({ color, textStyle, children }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  return (\n    <TypographyBase 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: FunctionComponent<ComponentProps> = ({ color, textStyle, children }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  return (\n    <TypographyBase 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: FunctionComponent<ComponentProps> = ({ color, textStyle, children }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  return (\n    <TypographyBase 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: FunctionComponent<ComponentProps> = ({ color, textStyle, children }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  let textTransform = componentTextTransformation(textStyle);\n  return (\n    <TypographyBase 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: FunctionComponent<ComponentProps> = ({ color, textStyle, children }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  let textTransform = componentTextTransformation(textStyle);\n  return (\n    <TypographyBase color={color} lineHeight={16} fontSize={12} fontWeight={fontWeight} fontStyle={fontStyle} textTransform={textTransform}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentResponsive: FunctionComponent<ComponentProps & { size?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large'; width: number }> = ({\n  color,\n  textStyle,\n  children,\n  size,\n  width,\n}) => {\n  let fontsize = size;\n  if (!size) {\n    if (width < 768) {\n      fontsize = 'small';\n    } else if (width < 992) {\n      fontsize = 'medium';\n    } else {\n      fontsize = 'large';\n    }\n  }\n  switch (fontsize) {\n    case 'xxsmall':\n      return <ComponentXXS color={color} textStyle={textStyle} children={children} />;\n    case 'xsmall':\n      return <ComponentXS color={color} textStyle={textStyle} children={children} />;\n    case 'small':\n      return <ComponentS color={color} textStyle={textStyle} children={children} />;\n    case 'medium':\n      return <ComponentM color={color} textStyle={textStyle} children={children} />;\n    case 'large':\n    default:\n      return <ComponentL color={color} textStyle={textStyle} children={children} />;\n  }\n};\n\nexport { TYPOGRAPHY };\nexport { HeadlineXL, HeadlineL, HeadlineM, HeadlineS, HeadlineXS, HeadlineXXS };\nexport { ParagraphTextStyle, ParagraphXL, ParagraphL, ParagraphM, ParagraphS, ParagraphXS };\nexport { ComponentTextStyle, ComponentXL, ComponentL, ComponentM, ComponentS, ComponentXS, ComponentXXS, ComponentResponsive };\nexport { ComponentXLStyling, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling };\nexport { ParagraphXlStyling, ParagraphLStyling, ParagraphMStyling, ParagraphSStyling, ParagraphXSStyling };\nexport { HeadlineXLStyling, HeadlineLStyling, HeadlineMStyling, HeadlineSStyling, HeadlineXSStyling, HeadlineXXSStyling };\n"],"file":"typography.js"}

package/package.json

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