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

package/dist/esm/InputFields/components/SearchBarInput.js

@@ -1,13 +1,14 @@
 import _pt from "prop-types";
 import * as React from 'react';
 import styled from 'styled-components';
-import { BREAKPOINTS, COLORS } from '../../styles/index';
+import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';
+import { ComponentMStyling, ComponentSStyling } from '../../styles/typography';
 export const Search = styled.input.attrs(() => ({
   type: 'search'
 }))`
   appearance: none;
-  font-size: 1rem;
   width: calc(100% - 96px);
+  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}
 
   /* To prevent browser putting its own cross inside the search bar */
   ::-ms-clear {
@@ -28,8 +29,7 @@ export const Search = styled.input.attrs(() => ({
   }
 
   ::placeholder {
-    font-style: italic;
-    color: ${COLORS.neutral_400};
+    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}
   }
 
   &:focus {
@@ -38,28 +38,28 @@ export const Search = styled.input.attrs(() => ({
 `;
 export const BigSearch = styled(Search)`
   height: 32px;
-  font-size: 1.125rem;
   border-width: 0;
   margin-left: 50px;
-  color: ${COLORS.black};
   outline: none;
+
+  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}
+
   ::placeholder {
-    color: ${COLORS.neutral_600};
-    font-size: 16px;
+    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}
   }
   ${BREAKPOINTS.MEDIUM} {
     ::placeholder {
-      font-size: 18px;
+      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}
     }
   }
   &.small {
     ::placeholder {
-      font-size: 16px;
+      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}
     }
   }
   &.medium {
     ::placeholder {
-      font-size: 18px;
+      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}
     }
   }
   &:disabled {

package/dist/esm/InputFields/components/SearchBarInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/InputFields/components/SearchBarInput.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","Search","input","attrs","type","neutral_400","BigSearch","black","neutral_600","MEDIUM","SearchBarInput","forwardRef","props","ref","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","setTabbedHere","onBlur","isPressingEnter","e","key","preventDefault","stopPropagation","target","value"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,WAAT,EAAsBC,MAAtB,QAAoC,oBAApC;AAEA,OAAO,MAAMC,MAAM,GAAGH,MAAM,CAACI,KAAP,CAAaC,KAAb,CAAmB,OAAO;AAAEC,EAAAA,IAAI,EAAE;AAAR,CAAP,CAAnB,CAA+C;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaJ,MAAM,CAACK,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA,CA/BO;AAiCP,OAAO,MAAMC,SAAS,GAAGR,MAAM,CAACG,MAAD,CAAS;AACxC;AACA;AACA;AACA;AACA,WAAWD,MAAM,CAACO,KAAM;AACxB;AACA;AACA,aAAaP,MAAM,CAACQ,WAAY;AAChC;AACA;AACA,IAAIT,WAAW,CAACU,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CA9BO;AA6CP,MAAMC,cAAc,gBAAGb,KAAK,CAACc,UAAN,CAAwD,CAACC,KAAD,EAA6BC,GAA7B,KAAqC;AAClH,QAAM;AAAEC,IAAAA,EAAF;AAAMC,IAAAA,UAAN;AAAkBC,IAAAA,aAAlB;AAAiCC,IAAAA,WAAjC;AAA8CC,IAAAA,WAA9C;AAA2DC,IAAAA,QAA3D;AAAqEC,IAAAA,SAArE;AAAgFC,IAAAA,IAAhF;AAAsFC,IAAAA,aAAtF;AAAqGC,IAAAA;AAArG,MAAgHX,KAAtH;;AACA,QAAMY,eAAe,GAAIC,CAAD,IAAY;AAClC,QAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuB;AACrBD,MAAAA,CAAC,CAACE,cAAF;AACAF,MAAAA,CAAC,CAACG,eAAF;AACA,aAAO,IAAP;AACD;;AACD,WAAO,KAAP;AACD,GAPD;;AASA,sBACE,oBAAC,SAAD;AACE,IAAA,WAAW,EAAET,QAAQ,GAAG,EAAH,GAAQD,WAD/B;AAEE,IAAA,EAAE,EAAEJ,EAFN;AAGE,mBAAaA,EAHf;AAIE,IAAA,SAAS,EAAEO,IAAI,GAAGA,IAAH,GAAU,EAJ3B;AAKE,IAAA,QAAQ,EAAE,CAAC,CALb;AAME,IAAA,QAAQ,EAAEF,QANZ;AAOE,IAAA,QAAQ,EAAGM,CAAD,IAAYT,aAAa,CAACS,CAAC,CAACI,MAAF,CAASC,KAAV,CAPrC;AAQE,IAAA,KAAK,EAAEf,UART;AASE,IAAA,GAAG,EAAEF,GATP;AAUE,IAAA,MAAM,EAAGY,CAAD,IAAQF,MAAM,GAAGA,MAAM,CAACE,CAAD,CAAT,GAAeH,aAAa,CAAC,KAAD,CAVpD;AAWE,IAAA,SAAS,EAAEF,SAXb;AAYE,IAAA,UAAU,EAAGK,CAAD,IAAaD,eAAe,CAACC,CAAD,CAAf,GAAqBR,WAAW,CAACQ,CAAD,CAAhC,GAAsC;AAZjE,IADF;AAgBD,CA3BsB,CAAvB;;AAZEX,EAAAA,E;AACAC,EAAAA,U;AACAC,EAAAA,a;AACAC,EAAAA,W;AACAC,EAAAA,W;AACAC,EAAAA,Q;AACAC,EAAAA,S;AACAC,EAAAA,I,aAAO,O,EAAU,Q;AACjBC,EAAAA,a;AACAC,EAAAA,M;;AAgCF,eAAeb,cAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS } from '../../styles/index';\n\nexport const Search = styled.input.attrs(() => ({ type: 'search' }))`\n  appearance: none;\n  font-size: 1rem;\n  width: calc(100% - 96px);\n\n  /* To prevent browser putting its own cross inside the search bar */\n  ::-ms-clear {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n  ::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    display: none;\n  }\n\n  ::placeholder {\n    font-style: italic;\n    color: ${COLORS.neutral_400};\n  }\n\n  &:focus {\n    outline-width: 0;\n  }\n`;\n\nexport const BigSearch = styled(Search)`\n  height: 32px;\n  font-size: 1.125rem;\n  border-width: 0;\n  margin-left: 50px;\n  color: ${COLORS.black};\n  outline: none;\n  ::placeholder {\n    color: ${COLORS.neutral_600};\n    font-size: 16px;\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    ::placeholder {\n      font-size: 18px;\n    }\n  }\n  &.small {\n    ::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    ::placeholder {\n      font-size: 18px;\n    }\n  }\n  &:disabled {\n    background: transparent;\n    border: none;\n  }\n`;\n\ntype SearchBarInputProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: 'small' | 'medium';\n  setTabbedHere: (tabbedHere: boolean) => void;\n  onBlur?: (e: any) => void;\n};\n\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\n  const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, setTabbedHere, onBlur } = props;\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  return (\n    <BigSearch\n      placeholder={disabled ? '' : placeholder}\n      id={id}\n      data-testid={id}\n      className={size ? size : ''}\n      tabIndex={-1}\n      disabled={disabled}\n      onChange={(e: any) => setSearchTerm(e.target.value)}\n      value={searchTerm}\n      ref={ref}\n      onBlur={(e) => (onBlur ? onBlur(e) : setTabbedHere(false))}\n      onKeyDown={onKeyDown}\n      onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}\n    />\n  );\n});\n\nexport default SearchBarInput;\n"],"file":"SearchBarInput.js"}
+{"version":3,"sources":["../../../../src/InputFields/components/SearchBarInput.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentSStyling","Search","input","attrs","type","Regular","black","Italic","neutral_500","BigSearch","neutral_600","MEDIUM","SearchBarInput","forwardRef","props","ref","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","setTabbedHere","onBlur","isPressingEnter","e","key","preventDefault","stopPropagation","target","value"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../../styles/index';\nimport {ComponentMStyling, ComponentSStyling} from '../../styles/typography';\n\nexport const Search = styled.input.attrs(() => ({ type: 'search' }))`\n  appearance: none;\n  width: calc(100% - 96px);\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  /* To prevent browser putting its own cross inside the search bar */\n  ::-ms-clear {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n  ::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    display: none;\n  }\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  &:focus {\n    outline-width: 0;\n  }\n`;\n\nexport const BigSearch = styled(Search)`\n  height: 32px;\n  border-width: 0;\n  margin-left: 50px;\n  outline: none;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    ::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n  &.small {\n    ::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n  &.medium {\n    ::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n  &:disabled {\n    background: transparent;\n    border: none;\n  }\n`;\n\ntype SearchBarInputProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: 'small' | 'medium';\n  setTabbedHere: (tabbedHere: boolean) => void;\n  onBlur?: (e: any) => void;\n};\n\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\n  const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, setTabbedHere, onBlur } = props;\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  return (\n    <BigSearch\n      placeholder={disabled ? '' : placeholder}\n      id={id}\n      data-testid={id}\n      className={size ? size : ''}\n      tabIndex={-1}\n      disabled={disabled}\n      onChange={(e: any) => setSearchTerm(e.target.value)}\n      value={searchTerm}\n      ref={ref}\n      onBlur={(e) => (onBlur ? onBlur(e) : setTabbedHere(false))}\n      onKeyDown={onKeyDown}\n      onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}\n    />\n  );\n});\n\nexport default SearchBarInput;\n"],"file":"SearchBarInput.js"}

package/dist/esm/InputFields/components/SearchField.js

@@ -1,8 +1,9 @@
 import _pt from "prop-types";
 import * as React from 'react';
 import styled, { css } from 'styled-components';
-import { BREAKPOINTS, COLORS } from '../../styles/index';
+import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';
 import { activeValidationMessageState, tabbedHereStyle } from '../styling';
+import { ComponentMStyling, ComponentSStyling } from '../../styles/typography';
 const DisabledState = css`
   border: 1px solid ${COLORS.neutral_100};
   pointer-events: none;
@@ -20,35 +21,36 @@ export const StyledSearchField = styled.div`
   position: relative;
   height: 48px;
   appearance: none;
-  font-size: 1rem;
+
+  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}
+
   padding: 0 !important;
   width: 100%;
   ::placeholder {
-    font-style: italic;
-    color: ${COLORS.neutral_400};
+    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}
   }
   ${BREAKPOINTS.MEDIUM} {
-    font-size: 18px;
-    line-height: 18px;
+    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}
+
     height: 56px;
     padding: 0 4px !important;
     &::placeholder {
-      font-size: 18px;
+      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}
     }
   }
   &.small {
-    font-size: 16px;
+    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}
     height: 48px;
     padding: 0 !important;
     &::placeholder {
-      font-size: 16px;
+      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}
     }
   }
   &.medium {
-    font-size: 18px;
+    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}
     height: 56px;
     &::placeholder {
-      font-size: 18px;
+      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}
     }
   }
   &:hover {

package/dist/esm/InputFields/components/SearchField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/InputFields/components/SearchField.tsx"],"names":["React","styled","css","BREAKPOINTS","COLORS","activeValidationMessageState","tabbedHereStyle","DisabledState","neutral_100","StyledSearchField","div","neutral_300","neutral_400","MEDIUM","primary_700","primary_800","neutral_600","props","disabled","activeValidationMessage","tabbedHere","SearchField","id","searchTerm","validationMessage","children","size","concat","undefined"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAASC,WAAT,EAAsBC,MAAtB,QAAoC,oBAApC;AACA,SAASC,4BAAT,EAAuCC,eAAvC,QAA8D,YAA9D;AAEA,MAAMC,aAAa,GAAGL,GAAI;AAC1B,sBAAsBE,MAAM,CAACI,WAAY;AACzC;AACA;AACA;AACA,CALA;AAOA,OAAO,MAAMC,iBAAiB,GAAGR,MAAM,CAACS,GAAqF;AAC7H;AACA;AACA;AACA,sCAAsCN,MAAM,CAACO,WAAY;AACzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaP,MAAM,CAACQ,WAAY;AAChC;AACA,IAAIT,WAAW,CAACU,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gDAAgDT,MAAM,CAACU,WAAY;AACnE,6CAA6CV,MAAM,CAACU,WAAY;AAChE,wCAAwCV,MAAM,CAACU,WAAY;AAC3D;AACA;AACA;AACA,gDAAgDV,MAAM,CAACW,WAAY;AACnE,6CAA6CX,MAAM,CAACW,WAAY;AAChE,wCAAwCX,MAAM,CAACW,WAAY;AAC3D;AACA;AACA;AACA,wBAAwBX,MAAM,CAACI,WAAY;AAC3C;AACA;AACA;AACA;AACA,aAAaJ,MAAM,CAACY,WAAY;AAChC;AACA,IAAKC,KAAD,IAAYA,KAAK,CAACC,QAAN,GAAiBX,aAAjB,GAAiC,EAAI;AACrD,IAAKU,KAAD,IAAYA,KAAK,CAACE,uBAAN,GAAgCd,4BAAhC,GAA+D,EAAI;AACnF,IAAKY,KAAD,IAAYA,KAAK,CAACG,UAAN,GAAmBd,eAAnB,GAAqC,EAAI;AACzD,CAjEO;;AA6EP,MAAMe,WAAqD,GAAG,CAAC;AAAEC,EAAAA,EAAF;AAAMC,EAAAA,UAAN;AAAkBL,EAAAA,QAAlB;AAA4BM,EAAAA,iBAA5B;AAA+CC,EAAAA,QAA/C;AAAyDL,EAAAA,UAAzD;AAAqEM,EAAAA;AAArE,CAAD,KAAiF;AAC7I,sBACE,oBAAC,iBAAD;AACE,IAAA,EAAE,EAAG,GAAEJ,EAAG,OADZ;AAEE,IAAA,SAAS,EAAE,CAACC,UAAU,KAAK,EAAf,GAAoB,eAApB,GAAsC,EAAvC,EAA2CI,MAA3C,CAAkDD,IAAI,GAAGA,IAAH,GAAU,EAAhE,CAFb;AAGE,IAAA,QAAQ,EAAER,QAHZ;AAIE,IAAA,UAAU,EAAEE,UAJd;AAKE,IAAA,QAAQ,EAAE,CAAC,CALb;AAME,IAAA,uBAAuB,EAAEI,iBAAiB,KAAKI,SAAtB,IAAmCJ,iBAAiB,KAAK;AANpF,KAOGC,QAPH,CADF;AAWD,CAZD;;;AATEH,EAAAA,E;AACAC,EAAAA,U;AACAL,EAAAA,Q;AACAM,EAAAA,iB;AACAC,EAAAA,Q;AACAL,EAAAA,U;AACAM,EAAAA,I;;AAiBF,eAAeL,WAAf","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport { BREAKPOINTS, COLORS } from '../../styles/index';\nimport { activeValidationMessageState, tabbedHereStyle } from '../styling';\n\nconst DisabledState = css`\n  border: 1px solid ${COLORS.neutral_100};\n  pointer-events: none;\n  background-color: transparent !important;\n  box-shadow: none !important;\n`;\n\nexport const StyledSearchField = styled.div<{ disabled?: boolean; activeValidationMessage?: boolean; tabbedHere?: boolean }>`\n  display: flex;\n  flex-direction: row;\n  border: solid 2px transparent;\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n  box-sizing: border-box;\n  border-radius: 56px;\n  align-items: center;\n  position: relative;\n  height: 48px;\n  appearance: none;\n  font-size: 1rem;\n  padding: 0 !important;\n  width: 100%;\n  ::placeholder {\n    font-style: italic;\n    color: ${COLORS.neutral_400};\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 4px !important;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    padding: 0 !important;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n  &:hover {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    border-color: transparent;\n  }\n  &:focus-within {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    border-color: transparent;\n  }\n  &:disabled {\n    border: 1px solid ${COLORS.neutral_100};\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n  div {\n    color: ${COLORS.neutral_600};\n  }\n  ${(props) => (props.disabled ? DisabledState : '')}\n  ${(props) => (props.activeValidationMessage ? activeValidationMessageState : '')}\n  ${(props) => (props.tabbedHere ? tabbedHereStyle : '')}\n`;\n\ntype SeachFieldProps = {\n  id: string;\n  searchTerm?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  children: any;\n  tabbedHere: boolean;\n  size: string;\n};\n\nconst SearchField: React.FunctionComponent<SeachFieldProps> = ({ id, searchTerm, disabled, validationMessage, children, tabbedHere, size }) => {\n  return (\n    <StyledSearchField\n      id={`${id}_main`}\n      className={(searchTerm !== '' ? 'searchactive ' : '').concat(size ? size : '')}\n      disabled={disabled}\n      tabbedHere={tabbedHere}\n      tabIndex={-1}\n      activeValidationMessage={validationMessage !== undefined && validationMessage !== ''}>\n      {children}\n    </StyledSearchField>\n  );\n};\n\nexport default SearchField;\n"],"file":"SearchField.js"}
+{"version":3,"sources":["../../../../src/InputFields/components/SearchField.tsx"],"names":["React","styled","css","BREAKPOINTS","COLORS","ComponentTextStyle","activeValidationMessageState","tabbedHereStyle","ComponentMStyling","ComponentSStyling","DisabledState","neutral_100","StyledSearchField","div","neutral_300","Regular","black","Italic","neutral_500","MEDIUM","primary_700","primary_800","neutral_600","props","disabled","activeValidationMessage","tabbedHere","SearchField","id","searchTerm","validationMessage","children","size","concat","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../../styles/index';\nimport {activeValidationMessageState, tabbedHereStyle} from '../styling';\nimport {ComponentMStyling, ComponentSStyling} from '../../styles/typography';\n\nconst DisabledState = css`\n  border: 1px solid ${COLORS.neutral_100};\n  pointer-events: none;\n  background-color: transparent !important;\n  box-shadow: none !important;\n`;\n\nexport const StyledSearchField = styled.div<{ disabled?: boolean; activeValidationMessage?: boolean; tabbedHere?: boolean }>`\n  display: flex;\n  flex-direction: row;\n  border: solid 2px transparent;\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n  box-sizing: border-box;\n  border-radius: 56px;\n  align-items: center;\n  position: relative;\n  height: 48px;\n  appearance: none;\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  padding: 0 !important;\n  width: 100%;\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n    height: 56px;\n    padding: 0 4px !important;\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 48px;\n    padding: 0 !important;\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 56px;\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n  &:hover {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    border-color: transparent;\n  }\n  &:focus-within {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    border-color: transparent;\n  }\n  &:disabled {\n    border: 1px solid ${COLORS.neutral_100};\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n  div {\n    color: ${COLORS.neutral_600};\n  }\n  ${(props) => (props.disabled ? DisabledState : '')}\n  ${(props) => (props.activeValidationMessage ? activeValidationMessageState : '')}\n  ${(props) => (props.tabbedHere ? tabbedHereStyle : '')}\n`;\n\ntype SeachFieldProps = {\n  id: string;\n  searchTerm?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  children: any;\n  tabbedHere: boolean;\n  size: string;\n};\n\nconst SearchField: React.FunctionComponent<SeachFieldProps> = ({ id, searchTerm, disabled, validationMessage, children, tabbedHere, size }) => {\n  return (\n    <StyledSearchField\n      id={`${id}_main`}\n      className={(searchTerm !== '' ? 'searchactive ' : '').concat(size ? size : '')}\n      disabled={disabled}\n      tabbedHere={tabbedHere}\n      tabIndex={-1}\n      activeValidationMessage={validationMessage !== undefined && validationMessage !== ''}>\n      {children}\n    </StyledSearchField>\n  );\n};\n\nexport default SearchField;\n"],"file":"SearchField.js"}

package/dist/esm/List/ListRow.js

@@ -3,8 +3,9 @@ import * as React from 'react';
 import styled from 'styled-components';
 import { Button } from '../Button';
 import { MoreVertical } from '../icons/systemicons/SystemIcons';
-import { COLORS } from '../styles';
+import { COLORS, ComponentTextStyle } from '../styles';
 import ListRowDropdown from './ListRowDropdown';
+import { ComponentSStyling } from '../styles/typography';
 const EditRow = styled.div`
   display: flex;
   justify-content: space-between;
@@ -32,8 +33,10 @@ const EditRow = styled.div`
 const LeftSection = styled.div`
   display: flex;
   flex-direction: row;
-  font-size: 16px;
   align-items: center;
+
+  ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}
+
   svg {
     margin-right: 12px;
   }

package/dist/esm/List/ListRow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/List/ListRow.tsx"],"names":["React","styled","Button","MoreVertical","COLORS","ListRowDropdown","EditRow","div","props","disableDifferentBackgroundforEvenNumbers","neutral_20","neutral_100","LeftSection","MainInfo","ButtonWrapper","UserDropdownButton","white","StyledMoreVertical","primary_20","primary_100","ListRow","key","Icon","mainInfo","dropdownOptions","color","black","dropdownActive","setDropdownActive","useState","neutral_500"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Button } from '../Button';\nimport { MoreVertical } from '../icons/systemicons/SystemIcons';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { ListRowDropdownOption } from '../types';\n\nimport ListRowDropdown from './ListRowDropdown';\n\nconst EditRow = styled.div<{ disableDifferentBackgroundforEvenNumbers?: boolean }>`\n  display: flex;\n  justify-content: space-between;\n  padding: 8px 12px;\n  align-items: center;\n\n  &:nth-child(even) {\n    background-color: ${props => (props.disableDifferentBackgroundforEvenNumbers ? 'inherit' : COLORS.neutral_20)};\n  }\n\n  .user-actions {\n    display: flex;\n    position: relative;\n    align-items: center;\n  }\n\n  .somePaddingForAlignment {\n    padding: 0 3px 0 0;\n  }\n\n  &.active {\n    background-color: ${COLORS.neutral_100};\n  }\n`;\n\nconst LeftSection = styled.div`\n  display: flex;\n  flex-direction: row;\n  font-size: 16px;\n  align-items: center;\n  svg {\n    margin-right: 12px;\n  }\n`;\n\nconst MainInfo = styled.div`\n  margin: auto 1em auto 0;\n  display: flex;\n  flex-direction: column;\n`;\n\nconst ButtonWrapper = styled.div`\n  outline: none;\n`;\n\nconst UserDropdownButton = styled(Button)`\n  display: flex;\n  text-decoration: none;\n  outline: none;\n  div {\n    outline: none;\n  }\n  &:focus > div {\n    box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    border-radius: 4px;\n    outline: none;\n    background: ${COLORS.white};\n  }\n`;\n\nconst StyledMoreVertical = styled(MoreVertical)`\n  padding: 8px 8px;\n  outline: none;\n  &:hover {\n    background: ${COLORS.primary_20};\n    border-radius: 4px;\n  }\n  &:active {\n    background: ${COLORS.primary_100};\n    border-radius: 4px;\n  }\n`;\n\ntype Props = {\n  key?: string;\n  Icon?: any;\n  mainInfo: any;\n  dropdownOptions: ListRowDropdownOption[];\n  disableDifferentBackgroundforEvenNumbers?: boolean;\n};\n\nconst ListRow: React.FunctionComponent<Props> = ({ key, Icon, mainInfo, dropdownOptions, disableDifferentBackgroundforEvenNumbers }: Props) => {\n  const color = COLORS.black;\n  const [dropdownActive, setDropdownActive] = React.useState<Boolean>(false);\n\n  return (\n    <EditRow key={key} disableDifferentBackgroundforEvenNumbers={disableDifferentBackgroundforEvenNumbers}>\n      <LeftSection color={color} data-hj-suppress>\n        {Icon && <Icon size=\"22px\" color={color} className=\"somePaddingForAlignment\" />}\n        <MainInfo data-hj-suppress>{mainInfo}</MainInfo>\n      </LeftSection>\n\n      <ButtonWrapper className=\"user-actions\">\n        <UserDropdownButton\n          variant=\"text\"\n          onClick={() => {\n            setDropdownActive(true);\n          }}>\n          <div tabIndex={-1}>\n            <StyledMoreVertical size=\"22px\" color={COLORS.neutral_500} />\n          </div>\n        </UserDropdownButton>\n        {dropdownActive && <ListRowDropdown closeDropdown={() => setDropdownActive(false)} options={dropdownOptions} />}\n      </ButtonWrapper>\n    </EditRow>\n  );\n};\n\nexport default ListRow;\n"],"file":"ListRow.js"}
+{"version":3,"sources":["../../../src/List/ListRow.tsx"],"names":["React","styled","Button","MoreVertical","COLORS","ComponentTextStyle","ListRowDropdown","ComponentSStyling","EditRow","div","props","disableDifferentBackgroundforEvenNumbers","neutral_20","neutral_100","LeftSection","Regular","MainInfo","ButtonWrapper","UserDropdownButton","white","StyledMoreVertical","primary_20","primary_100","ListRow","key","Icon","mainInfo","dropdownOptions","color","black","dropdownActive","setDropdownActive","useState","neutral_500"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Button} from '../Button';\nimport {MoreVertical} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport {ListRowDropdownOption} from '../types';\n\nimport ListRowDropdown from './ListRowDropdown';\nimport {ComponentSStyling} from '../styles/typography';\n\nconst EditRow = styled.div<{ disableDifferentBackgroundforEvenNumbers?: boolean }>`\n  display: flex;\n  justify-content: space-between;\n  padding: 8px 12px;\n  align-items: center;\n\n  &:nth-child(even) {\n    background-color: ${props => (props.disableDifferentBackgroundforEvenNumbers ? 'inherit' : COLORS.neutral_20)};\n  }\n\n  .user-actions {\n    display: flex;\n    position: relative;\n    align-items: center;\n  }\n\n  .somePaddingForAlignment {\n    padding: 0 3px 0 0;\n  }\n\n  &.active {\n    background-color: ${COLORS.neutral_100};\n  }\n`;\n\nconst LeftSection = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n  svg {\n    margin-right: 12px;\n  }\n`;\n\nconst MainInfo = styled.div`\n  margin: auto 1em auto 0;\n  display: flex;\n  flex-direction: column;\n`;\n\nconst ButtonWrapper = styled.div`\n  outline: none;\n`;\n\nconst UserDropdownButton = styled(Button)`\n  display: flex;\n  text-decoration: none;\n  outline: none;\n  div {\n    outline: none;\n  }\n  &:focus > div {\n    box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    border-radius: 4px;\n    outline: none;\n    background: ${COLORS.white};\n  }\n`;\n\nconst StyledMoreVertical = styled(MoreVertical)`\n  padding: 8px 8px;\n  outline: none;\n  &:hover {\n    background: ${COLORS.primary_20};\n    border-radius: 4px;\n  }\n  &:active {\n    background: ${COLORS.primary_100};\n    border-radius: 4px;\n  }\n`;\n\ntype Props = {\n  key?: string;\n  Icon?: any;\n  mainInfo: any;\n  dropdownOptions: ListRowDropdownOption[];\n  disableDifferentBackgroundforEvenNumbers?: boolean;\n};\n\nconst ListRow: React.FunctionComponent<Props> = ({ key, Icon, mainInfo, dropdownOptions, disableDifferentBackgroundforEvenNumbers }: Props) => {\n  const color = COLORS.black;\n  const [dropdownActive, setDropdownActive] = React.useState<Boolean>(false);\n\n  return (\n    <EditRow key={key} disableDifferentBackgroundforEvenNumbers={disableDifferentBackgroundforEvenNumbers}>\n      <LeftSection color={color} data-hj-suppress>\n        {Icon && <Icon size=\"22px\" color={color} className=\"somePaddingForAlignment\" />}\n        <MainInfo data-hj-suppress>{mainInfo}</MainInfo>\n      </LeftSection>\n\n      <ButtonWrapper className=\"user-actions\">\n        <UserDropdownButton\n          variant=\"text\"\n          onClick={() => {\n            setDropdownActive(true);\n          }}>\n          <div tabIndex={-1}>\n            <StyledMoreVertical size=\"22px\" color={COLORS.neutral_500} />\n          </div>\n        </UserDropdownButton>\n        {dropdownActive && <ListRowDropdown closeDropdown={() => setDropdownActive(false)} options={dropdownOptions} />}\n      </ButtonWrapper>\n    </EditRow>\n  );\n};\n\nexport default ListRow;\n"],"file":"ListRow.js"}

package/dist/esm/List/ListRowDropdown.js

@@ -1,7 +1,8 @@
 import _pt from "prop-types";
 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 Wrapper = styled.div`
   .isInside {
     top: 42px;
@@ -27,11 +28,9 @@ const Content = styled.button`
   padding: 12px 16px;
 
   text-align: left;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 16px;
   height: 48px;
-  color: ${COLORS.neutral_600};
+
+  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}
 
   background-color: ${COLORS.white};
   border-width: 0;

package/dist/esm/List/ListRowDropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/List/ListRowDropdown.tsx"],"names":["React","styled","COLORS","Wrapper","div","DropdownMenuContainer","white","Content","button","neutral_600","primary_20","primary_100","ListRowDropdown","options","closeDropdown","classname","setClassname","useState","reference","useRef","clickIsOutside","e","current","contains","target","handleClick","keyCode","isInViewport","offset","top","getBoundingClientRect","bottom","inside","window","innerHeight","useEffect","document","addEventListener","removeEventListener","map","option","key","action","label"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS } from '../styles';\nimport { ListRowDropdownOption } from '../types';\n\nconst Wrapper = styled.div`\n  .isInside {\n    top: 42px;\n  }\n  .isOutside {\n    bottom: 42px;\n  }\n`;\n\nconst DropdownMenuContainer = styled.div`\n  position: absolute;\n  flex-direction: column;\n  background: ${COLORS.white};\n  font-size: 1em;\n  z-index: 1;\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  right: 0;\n  width: max-content;\n  min-width: 260px;\n`;\n\nconst Content = styled.button`\n  min-width: 100%;\n  padding: 12px 16px;\n\n  text-align: left;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 16px;\n  height: 48px;\n  color: ${COLORS.neutral_600};\n\n  background-color: ${COLORS.white};\n  border-width: 0;\n\n  &:hover,\n  &:focus {\n    cursor: pointer;\n  }\n\n  &:hover {\n    background: ${COLORS.primary_20};\n    border-radius: 4px;\n  }\n  &:active {\n    background: ${COLORS.primary_100};\n    border-radius: 4px;\n  }\n`;\n\ntype DropdownMenuProps = {\n  options: ListRowDropdownOption[];\n  closeDropdown: any;\n};\n\nconst ListRowDropdown: React.FunctionComponent<DropdownMenuProps> = ({ options, closeDropdown }: DropdownMenuProps) => {\n  const [classname, setClassname] = React.useState('isInside');\n  const reference = React.useRef<HTMLDivElement>(null);\n\n  const clickIsOutside = (e: any) => reference && reference?.current && !reference?.current.contains(e.target);\n\n  const handleClick = (e: any) => {\n    if (e.keyCode) {\n      if (e.keyCode === 27) {\n        closeDropdown();\n      }\n    } else if (clickIsOutside(e)) {\n      closeDropdown();\n    }\n  };\n\n  const isInViewport = (offset = 0) => {\n    if (!reference.current) return;\n    const top = reference.current.getBoundingClientRect().bottom;\n    const inside = top + offset >= 0 && top - offset <= window.innerHeight;\n    if (!inside) {\n      setClassname('isOutside');\n    }\n  };\n\n  React.useEffect(() => {\n    document.addEventListener('mousedown', handleClick, false);\n    document.addEventListener('keydown', handleClick, false);\n    isInViewport();\n    return () => {\n      document.removeEventListener('mousedown', handleClick, false);\n      document.removeEventListener('keydown', handleClick, false);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return (\n    <Wrapper>\n      <DropdownMenuContainer ref={reference} className={classname}>\n        {options.map(option => (\n          <Content key={option.key} onClick={option.action}>\n            {option.label}\n          </Content>\n        ))}\n      </DropdownMenuContainer>\n    </Wrapper>\n  );\n};\n\nexport default ListRowDropdown;\n"],"file":"ListRowDropdown.js"}
+{"version":3,"sources":["../../../src/List/ListRowDropdown.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentMStyling","Wrapper","div","DropdownMenuContainer","white","Content","button","Regular","neutral_600","primary_20","primary_100","ListRowDropdown","options","closeDropdown","classname","setClassname","useState","reference","useRef","clickIsOutside","e","current","contains","target","handleClick","keyCode","isInViewport","offset","top","getBoundingClientRect","bottom","inside","window","innerHeight","useEffect","document","addEventListener","removeEventListener","map","option","key","action","label"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport {ListRowDropdownOption} from '../types';\nimport {ComponentMStyling} from '../styles/typography';\n\nconst Wrapper = styled.div`\n  .isInside {\n    top: 42px;\n  }\n  .isOutside {\n    bottom: 42px;\n  }\n`;\n\nconst DropdownMenuContainer = styled.div`\n  position: absolute;\n  flex-direction: column;\n  background: ${COLORS.white};\n  font-size: 1em;\n  z-index: 1;\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  right: 0;\n  width: max-content;\n  min-width: 260px;\n`;\n\nconst Content = styled.button`\n  min-width: 100%;\n  padding: 12px 16px;\n\n  text-align: left;\n  height: 48px;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  background-color: ${COLORS.white};\n  border-width: 0;\n\n  &:hover,\n  &:focus {\n    cursor: pointer;\n  }\n\n  &:hover {\n    background: ${COLORS.primary_20};\n    border-radius: 4px;\n  }\n  &:active {\n    background: ${COLORS.primary_100};\n    border-radius: 4px;\n  }\n`;\n\ntype DropdownMenuProps = {\n  options: ListRowDropdownOption[];\n  closeDropdown: any;\n};\n\nconst ListRowDropdown: React.FunctionComponent<DropdownMenuProps> = ({ options, closeDropdown }: DropdownMenuProps) => {\n  const [classname, setClassname] = React.useState('isInside');\n  const reference = React.useRef<HTMLDivElement>(null);\n\n  const clickIsOutside = (e: any) => reference && reference?.current && !reference?.current.contains(e.target);\n\n  const handleClick = (e: any) => {\n    if (e.keyCode) {\n      if (e.keyCode === 27) {\n        closeDropdown();\n      }\n    } else if (clickIsOutside(e)) {\n      closeDropdown();\n    }\n  };\n\n  const isInViewport = (offset = 0) => {\n    if (!reference.current) return;\n    const top = reference.current.getBoundingClientRect().bottom;\n    const inside = top + offset >= 0 && top - offset <= window.innerHeight;\n    if (!inside) {\n      setClassname('isOutside');\n    }\n  };\n\n  React.useEffect(() => {\n    document.addEventListener('mousedown', handleClick, false);\n    document.addEventListener('keydown', handleClick, false);\n    isInViewport();\n    return () => {\n      document.removeEventListener('mousedown', handleClick, false);\n      document.removeEventListener('keydown', handleClick, false);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return (\n    <Wrapper>\n      <DropdownMenuContainer ref={reference} className={classname}>\n        {options.map(option => (\n          <Content key={option.key} onClick={option.action}>\n            {option.label}\n          </Content>\n        ))}\n      </DropdownMenuContainer>\n    </Wrapper>\n  );\n};\n\nexport default ListRowDropdown;\n"],"file":"ListRowDropdown.js"}

package/dist/esm/LoadingPage/GlobalLoadingPage.js

@@ -3,7 +3,8 @@ import * as React from 'react';
 import styled from 'styled-components';
 import { LaerdalLoadingLogo } from '../assets';
 import LoadingIndicator from '../LoadingIndicator/LoadingIndicator';
-import { COLORS } from '../styles';
+import { COLORS, ComponentTextStyle } from '../styles';
+import { ComponentMStyling } from '../styles/typography';
 const LoadingMain = styled.main`
   display: flex;
   flex: 1;
@@ -28,10 +29,10 @@ const LogoAndMessage = styled.div`
   span {
     margin-bottom: 40px;
     font-weight: normal;
-    font-size: 18px;
-    color: ${COLORS.neutral_600};
     width: 320px;
     text-align: center;
+    
+    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}
   }
 `;
 const LoadingIndicatorContainer = styled.div`

package/dist/esm/LoadingPage/GlobalLoadingPage.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/LoadingPage/GlobalLoadingPage.tsx"],"names":["React","styled","LaerdalLoadingLogo","LoadingIndicator","COLORS","LoadingMain","main","primary_20","Header","div","white","neutral_200","LogoAndMessage","neutral_600","LoadingIndicatorContainer","LoadingPage","optionalMessage","includeHeader"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,kBAAT,QAAmC,WAAnC;AAEA,OAAOC,gBAAP,MAA6B,sCAA7B;AACA,SAASC,MAAT,QAAuB,WAAvB;AAEA,MAAMC,WAAW,GAAGJ,MAAM,CAACK,IAAK;AAChC;AACA;AACA;AACA,sBAAsBF,MAAM,CAACG,UAAW;AACxC;AACA,CANA;AAQA,MAAMC,MAAM,GAAGP,MAAM,CAACQ,GAAiB;AACvC;AACA,sBAAsBL,MAAM,CAACM,KAAM;AACnC,6BAA6BN,MAAM,CAACO,WAAY;AAChD,CAJA;AAMA,MAAMC,cAAc,GAAGX,MAAM,CAACQ,GAAI;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaL,MAAM,CAACS,WAAY;AAChC;AACA;AACA;AACA,CAjBA;AAmBA,MAAMC,yBAAyB,GAAGb,MAAM,CAACQ,GAAI;AAC7C;AACA;AACA;AACA;AACA,CALA;;AAYA,MAAMM,WAAiD,GAAG,CAAC;AAAEC,EAAAA,eAAF;AAAmBC,EAAAA;AAAnB,CAAD,KAAqD;AAC7G,sBACE,oBAAC,WAAD;AAAa,mBAAY;AAAzB,KACGA,aAAa,iBAAI,oBAAC,MAAD,OADpB,eAEE,oBAAC,yBAAD,qBACE,oBAAC,gBAAD,OADF,CAFF,eAKE,oBAAC,cAAD;AAAgB,mBAAY;AAA5B,KACGD,eAAe,iBAAI,kCAAOA,eAAP,CADtB,eAEE,oBAAC,kBAAD,OAFF,CALF,CADF;AAYD,CAbD;;;AAJEA,EAAAA,e;AACAC,EAAAA,a;;AAkBF,eAAeF,WAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { LaerdalLoadingLogo } from '../assets';\n\nimport LoadingIndicator from '../LoadingIndicator/LoadingIndicator';\nimport { COLORS } from '../styles';\n\nconst LoadingMain = styled.main`\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  background-color: ${COLORS.primary_20};\n  height: 100%;\n`;\n\nconst Header = styled.div<LoaderProps>`\n  height: 64px;\n  background-color: ${COLORS.white};\n  border-bottom: 1px solid ${COLORS.neutral_200};\n`;\n\nconst LogoAndMessage = styled.div`\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  bottom: 36px;\n  left: 50%;\n  transform: translate(-50%);\n  align-items: center;\n\n  span {\n    margin-bottom: 40px;\n    font-weight: normal;\n    font-size: 18px;\n    color: ${COLORS.neutral_600};\n    width: 320px;\n    text-align: center;\n  }\n`;\n\nconst LoadingIndicatorContainer = styled.div`\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n`;\n\ninterface LoaderProps {\n  optionalMessage?: string;\n  includeHeader?: boolean;\n}\n\nconst LoadingPage: React.FunctionComponent<LoaderProps> = ({ optionalMessage, includeHeader }: LoaderProps) => {\n  return (\n    <LoadingMain data-testid=\"TestLoadingMain\">\n      {includeHeader && <Header />}\n      <LoadingIndicatorContainer>\n        <LoadingIndicator />\n      </LoadingIndicatorContainer>\n      <LogoAndMessage data-testid=\"TestLoadingLogoAndMessage\">\n        {optionalMessage && <span>{optionalMessage}</span>}\n        <LaerdalLoadingLogo />\n      </LogoAndMessage>\n    </LoadingMain>\n  );\n};\n\nexport default LoadingPage;\n"],"file":"GlobalLoadingPage.js"}
+{"version":3,"sources":["../../../src/LoadingPage/GlobalLoadingPage.tsx"],"names":["React","styled","LaerdalLoadingLogo","LoadingIndicator","COLORS","ComponentTextStyle","ComponentMStyling","LoadingMain","main","primary_20","Header","div","white","neutral_200","LogoAndMessage","Regular","neutral_600","LoadingIndicatorContainer","LoadingPage","optionalMessage","includeHeader"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,kBAAR,QAAiC,WAAjC;AAEA,OAAOC,gBAAP,MAA6B,sCAA7B;AACA,SAAQC,MAAR,EAAgBC,kBAAhB,QAAyC,WAAzC;AACA,SAAQC,iBAAR,QAAgC,sBAAhC;AAEA,MAAMC,WAAW,GAAGN,MAAM,CAACO,IAAK;AAChC;AACA;AACA;AACA,sBAAsBJ,MAAM,CAACK,UAAW;AACxC;AACA,CANA;AAQA,MAAMC,MAAM,GAAGT,MAAM,CAACU,GAAiB;AACvC;AACA,sBAAsBP,MAAM,CAACQ,KAAM;AACnC,6BAA6BR,MAAM,CAACS,WAAY;AAChD,CAJA;AAMA,MAAMC,cAAc,GAAGb,MAAM,CAACU,GAAI;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAML,iBAAiB,CAACD,kBAAkB,CAACU,OAApB,EAA6BX,MAAM,CAACY,WAApC,CAAiD;AACxE;AACA,CAjBA;AAmBA,MAAMC,yBAAyB,GAAGhB,MAAM,CAACU,GAAI;AAC7C;AACA;AACA;AACA;AACA,CALA;;AAYA,MAAMO,WAAiD,GAAG,CAAC;AAAEC,EAAAA,eAAF;AAAmBC,EAAAA;AAAnB,CAAD,KAAqD;AAC7G,sBACE,oBAAC,WAAD;AAAa,mBAAY;AAAzB,KACGA,aAAa,iBAAI,oBAAC,MAAD,OADpB,eAEE,oBAAC,yBAAD,qBACE,oBAAC,gBAAD,OADF,CAFF,eAKE,oBAAC,cAAD;AAAgB,mBAAY;AAA5B,KACGD,eAAe,iBAAI,kCAAOA,eAAP,CADtB,eAEE,oBAAC,kBAAD,OAFF,CALF,CADF;AAYD,CAbD;;;AAJEA,EAAAA,e;AACAC,EAAAA,a;;AAkBF,eAAeF,WAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {LaerdalLoadingLogo} from '../assets';\n\nimport LoadingIndicator from '../LoadingIndicator/LoadingIndicator';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport {ComponentMStyling} from '../styles/typography';\n\nconst LoadingMain = styled.main`\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  background-color: ${COLORS.primary_20};\n  height: 100%;\n`;\n\nconst Header = styled.div<LoaderProps>`\n  height: 64px;\n  background-color: ${COLORS.white};\n  border-bottom: 1px solid ${COLORS.neutral_200};\n`;\n\nconst LogoAndMessage = styled.div`\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  bottom: 36px;\n  left: 50%;\n  transform: translate(-50%);\n  align-items: center;\n\n  span {\n    margin-bottom: 40px;\n    font-weight: normal;\n    width: 320px;\n    text-align: center;\n    \n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n  }\n`;\n\nconst LoadingIndicatorContainer = styled.div`\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n`;\n\ninterface LoaderProps {\n  optionalMessage?: string;\n  includeHeader?: boolean;\n}\n\nconst LoadingPage: React.FunctionComponent<LoaderProps> = ({ optionalMessage, includeHeader }: LoaderProps) => {\n  return (\n    <LoadingMain data-testid=\"TestLoadingMain\">\n      {includeHeader && <Header />}\n      <LoadingIndicatorContainer>\n        <LoadingIndicator />\n      </LoadingIndicatorContainer>\n      <LogoAndMessage data-testid=\"TestLoadingLogoAndMessage\">\n        {optionalMessage && <span>{optionalMessage}</span>}\n        <LaerdalLoadingLogo />\n      </LogoAndMessage>\n    </LoadingMain>\n  );\n};\n\nexport default LoadingPage;\n"],"file":"GlobalLoadingPage.js"}

package/dist/esm/MiniProductCard/MiniProductCard.js

@@ -2,8 +2,9 @@ import _pt from "prop-types";
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
-import { COLORS, BREAKPOINTS } from '../styles';
+import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';
 import { ChevronRight } from '../icons/systemicons/SystemIcons';
+import { ComponentMStyling, ComponentSStyling } from '../styles/typography';
 const ProductLink = styled(Link)`
   display: flex;
   flex: 1;
@@ -44,14 +45,12 @@ const ProductImage = styled.img`
   border-radius: 8px;
 `;
 const ProductName = styled.h2`
-  font-size: 18px;
-  line-height: 1.2;
+  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}
   margin: 0;
   margin-top: 3px;
 `;
 const ProductType = styled.span`
-  font-size: 16px;
-  line-height: 1.2;
+  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}
   margin: 0;
 `;
 const ProductInnerWrapper = styled.div`

package/dist/esm/MiniProductCard/MiniProductCard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/MiniProductCard/MiniProductCard.tsx"],"names":["React","Link","styled","COLORS","BREAKPOINTS","ChevronRight","ProductLink","black","MEDIUM","ProductThing","div","primary_20","primary_600","primary_100","ProductImage","img","ProductName","h2","ProductType","span","ProductInnerWrapper","RightIconWrapper","MiniProductCard","url","product","image","name","type","primary"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,IAAT,QAAqB,kBAArB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,MAAT,EAAiBC,WAAjB,QAAoC,WAApC;AACA,SAASC,YAAT,QAA6B,kCAA7B;AAOA,MAAMC,WAAW,GAAGJ,MAAM,CAACD,IAAD,CAAO;AACjC;AACA;AACA;AACA,WAAWE,MAAM,CAACI,KAAM;AACxB;AACA;AACA,IAAIH,WAAW,CAACI,MAAO;AACvB;AACA;AACA,CAVA;AAYA,MAAMC,YAAY,GAAGP,MAAM,CAACQ,GAAI;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBP,MAAM,CAACQ,UAAW;AACpC;AACA;AACA,cAAcR,MAAM,CAACS,WAAY;AACjC;AACA;AACA;AACA,kBAAkBT,MAAM,CAACU,WAAY;AACrC;AACA;AACA,cAAcV,MAAM,CAACS,WAAY;AACjC;AACA;AACA,CArBA;AAuBA,MAAME,YAAY,GAAGZ,MAAM,CAACa,GAAI;AAChC;AACA;AACA;AACA;AACA,CALA;AAOA,MAAMC,WAAW,GAAGd,MAAM,CAACe,EAAG;AAC9B;AACA;AACA;AACA;AACA,CALA;AAOA,MAAMC,WAAW,GAAGhB,MAAM,CAACiB,IAAK;AAChC;AACA;AACA;AACA,CAJA;AAMA,MAAMC,mBAAmB,GAAGlB,MAAM,CAACQ,GAAI;AACvC;AACA;AACA;AACA;AACA,CALA;AAOA,MAAMW,gBAAgB,GAAGnB,MAAM,CAACQ,GAAI;AACpC;AACA;AACA;AACA;AACA,CALA;;AAOA,MAAMY,eAAe,GAAG,CAAC;AAAEC,EAAAA,GAAF;AAAOC,EAAAA;AAAP,CAAD,KAAiC;AACvD,sBACE,oBAAC,WAAD;AAAa,IAAA,EAAE,EAAED,GAAG,IAAI;AAAxB,kBACE,oBAAC,YAAD,QACGC,OAAO,CAACC,KAAR,iBAAiB,oBAAC,YAAD;AAAc,IAAA,GAAG,EAAED,OAAO,CAACC;AAA3B,IADpB,eAEE,oBAAC,mBAAD,qBACE,oBAAC,WAAD,QAAcD,OAAO,CAACE,IAAtB,CADF,eAEE,oBAAC,WAAD,QAAcF,OAAO,CAACG,IAAtB,CAFF,CAFF,eAME,oBAAC,gBAAD,qBACE,oBAAC,YAAD;AAAc,IAAA,KAAK,EAAExB,MAAM,CAACyB,OAA5B;AAAqC,IAAA,SAAS,EAAE,uBAAhD;AAAyE,IAAA,IAAI,EAAE;AAA/E,IADF,CANF,CADF,CADF;AAcD,CAfD;;;AAvEEL,EAAAA,G;;AAwFF,eAAeD,eAAf","sourcesContent":["import * as React from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { COLORS, BREAKPOINTS } from '../styles';\nimport { ChevronRight } from '../icons/systemicons/SystemIcons';\nimport { Product } from '../types';\n\ntype CardProps = {\n  product: Product;\n  url?: string;\n};\nconst ProductLink = styled(Link)`\n  display: flex;\n  flex: 1;\n  margin: 10px 8px;\n  color: ${COLORS.black};\n  text-decoration: none;\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 305px;\n  }\n`;\n\nconst ProductThing = styled.div`\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  border-radius: 8px;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n\n  &:hover {\n    background: ${COLORS.primary_20};\n\n    .product-chevron-right-path {\n      fill: ${COLORS.primary_600};\n    }\n  }\n  &:active {\n    background: ${COLORS.primary_100};\n\n    .product-chevron-right-path {\n      fill: ${COLORS.primary_600};\n    }\n  }\n`;\n\nconst ProductImage = styled.img`\n  width: 95px;\n  height: 75px;\n  object-fit: fill;\n  border-radius: 8px;\n`;\n\nconst ProductName = styled.h2`\n  font-size: 18px;\n  line-height: 1.2;\n  margin: 0;\n  margin-top: 3px;\n`;\n\nconst ProductType = styled.span`\n  font-size: 16px;\n  line-height: 1.2;\n  margin: 0;\n`;\n\nconst ProductInnerWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  padding: 12px 18px;\n  flex: 1;\n`;\n\nconst RightIconWrapper = styled.div`\n  display: flex;\n  justify-self: flex-start;\n  align-items: center;\n  padding-right: 12px;\n`;\n\nconst MiniProductCard = ({ url, product }: CardProps) => {\n  return (\n    <ProductLink to={url ?? ''}>\n      <ProductThing>\n        {product.image && <ProductImage src={product.image} />}\n        <ProductInnerWrapper>\n          <ProductName>{product.name}</ProductName>\n          <ProductType>{product.type}</ProductType>\n        </ProductInnerWrapper>\n        <RightIconWrapper>\n          <ChevronRight color={COLORS.primary} className={'product-chevron-right'} size={'24px'} />\n        </RightIconWrapper>\n      </ProductThing>\n    </ProductLink>\n  );\n};\n\nexport default MiniProductCard;\n"],"file":"MiniProductCard.js"}
+{"version":3,"sources":["../../../src/MiniProductCard/MiniProductCard.tsx"],"names":["React","Link","styled","BREAKPOINTS","COLORS","ComponentTextStyle","ChevronRight","ComponentMStyling","ComponentSStyling","ProductLink","black","MEDIUM","ProductThing","div","primary_20","primary_600","primary_100","ProductImage","img","ProductName","h2","Regular","ProductType","span","ProductInnerWrapper","RightIconWrapper","MiniProductCard","url","product","image","name","type","primary"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAAQC,IAAR,QAAmB,kBAAnB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,WAAR,EAAqBC,MAArB,EAA6BC,kBAA7B,QAAsD,WAAtD;AACA,SAAQC,YAAR,QAA2B,kCAA3B;AAEA,SAAQC,iBAAR,EAA2BC,iBAA3B,QAAmD,sBAAnD;AAMA,MAAMC,WAAW,GAAGP,MAAM,CAACD,IAAD,CAAO;AACjC;AACA;AACA;AACA,WAAWG,MAAM,CAACM,KAAM;AACxB;AACA;AACA,IAAIP,WAAW,CAACQ,MAAO;AACvB;AACA;AACA,CAVA;AAYA,MAAMC,YAAY,GAAGV,MAAM,CAACW,GAAI;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBT,MAAM,CAACU,UAAW;AACpC;AACA;AACA,cAAcV,MAAM,CAACW,WAAY;AACjC;AACA;AACA;AACA,kBAAkBX,MAAM,CAACY,WAAY;AACrC;AACA;AACA,cAAcZ,MAAM,CAACW,WAAY;AACjC;AACA;AACA,CArBA;AAuBA,MAAME,YAAY,GAAGf,MAAM,CAACgB,GAAI;AAChC;AACA;AACA;AACA;AACA,CALA;AAOA,MAAMC,WAAW,GAAGjB,MAAM,CAACkB,EAAG;AAC9B,IAAIb,iBAAiB,CAACF,kBAAkB,CAACgB,OAApB,EAA6BjB,MAAM,CAACM,KAApC,CAA2C;AAChE;AACA;AACA,CAJA;AAMA,MAAMY,WAAW,GAAGpB,MAAM,CAACqB,IAAK;AAChC,IAAIf,iBAAiB,CAACH,kBAAkB,CAACgB,OAApB,EAA6BjB,MAAM,CAACM,KAApC,CAA2C;AAChE;AACA,CAHA;AAKA,MAAMc,mBAAmB,GAAGtB,MAAM,CAACW,GAAI;AACvC;AACA;AACA;AACA;AACA,CALA;AAOA,MAAMY,gBAAgB,GAAGvB,MAAM,CAACW,GAAI;AACpC;AACA;AACA;AACA;AACA,CALA;;AAOA,MAAMa,eAAe,GAAG,CAAC;AAAEC,EAAAA,GAAF;AAAOC,EAAAA;AAAP,CAAD,KAAiC;AACvD,sBACE,oBAAC,WAAD;AAAa,IAAA,EAAE,EAAED,GAAG,IAAI;AAAxB,kBACE,oBAAC,YAAD,QACGC,OAAO,CAACC,KAAR,iBAAiB,oBAAC,YAAD;AAAc,IAAA,GAAG,EAAED,OAAO,CAACC;AAA3B,IADpB,eAEE,oBAAC,mBAAD,qBACE,oBAAC,WAAD,QAAcD,OAAO,CAACE,IAAtB,CADF,eAEE,oBAAC,WAAD,QAAcF,OAAO,CAACG,IAAtB,CAFF,CAFF,eAME,oBAAC,gBAAD,qBACE,oBAAC,YAAD;AAAc,IAAA,KAAK,EAAE3B,MAAM,CAAC4B,OAA5B;AAAqC,IAAA,SAAS,EAAE,uBAAhD;AAAyE,IAAA,IAAI,EAAE;AAA/E,IADF,CANF,CADF,CADF;AAcD,CAfD;;;AArEEL,EAAAA,G;;AAsFF,eAAeD,eAAf","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ChevronRight} from '../icons/systemicons/SystemIcons';\nimport {Product} from '../types';\nimport {ComponentMStyling, ComponentSStyling} from '../styles/typography';\n\ntype CardProps = {\n  product: Product;\n  url?: string;\n};\nconst ProductLink = styled(Link)`\n  display: flex;\n  flex: 1;\n  margin: 10px 8px;\n  color: ${COLORS.black};\n  text-decoration: none;\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 305px;\n  }\n`;\n\nconst ProductThing = styled.div`\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  border-radius: 8px;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n\n  &:hover {\n    background: ${COLORS.primary_20};\n\n    .product-chevron-right-path {\n      fill: ${COLORS.primary_600};\n    }\n  }\n  &:active {\n    background: ${COLORS.primary_100};\n\n    .product-chevron-right-path {\n      fill: ${COLORS.primary_600};\n    }\n  }\n`;\n\nconst ProductImage = styled.img`\n  width: 95px;\n  height: 75px;\n  object-fit: fill;\n  border-radius: 8px;\n`;\n\nconst ProductName = styled.h2`\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  margin: 0;\n  margin-top: 3px;\n`;\n\nconst ProductType = styled.span`\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n  margin: 0;\n`;\n\nconst ProductInnerWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  padding: 12px 18px;\n  flex: 1;\n`;\n\nconst RightIconWrapper = styled.div`\n  display: flex;\n  justify-self: flex-start;\n  align-items: center;\n  padding-right: 12px;\n`;\n\nconst MiniProductCard = ({ url, product }: CardProps) => {\n  return (\n    <ProductLink to={url ?? ''}>\n      <ProductThing>\n        {product.image && <ProductImage src={product.image} />}\n        <ProductInnerWrapper>\n          <ProductName>{product.name}</ProductName>\n          <ProductType>{product.type}</ProductType>\n        </ProductInnerWrapper>\n        <RightIconWrapper>\n          <ChevronRight color={COLORS.primary} className={'product-chevron-right'} size={'24px'} />\n        </RightIconWrapper>\n      </ProductThing>\n    </ProductLink>\n  );\n};\n\nexport default MiniProductCard;\n"],"file":"MiniProductCard.js"}

package/dist/esm/Modals/ModalDialog.js

@@ -68,7 +68,7 @@ export const ModalDialog = ({
     }
   };
 
-  const getPaddingAndMarginBottom = () => {
+  const getMarginBottom = () => {
     switch (size) {
       case 'small':
         return '16px';
@@ -84,6 +84,22 @@ export const ModalDialog = ({
     }
   };
 
+  const getPadding = () => {
+    switch (size) {
+      case 'small':
+        return '16px 16px 8px';
+
+      case 'medium':
+        return '24px 24px 16px';
+
+      case 'large':
+        return '32px';
+
+      default:
+        return '24px 24px 16px';
+    }
+  };
+
   const ModalTitle = (title, size) => {
     switch (size) {
       case 'small':
@@ -115,7 +131,7 @@ export const ModalDialog = ({
     }, /*#__PURE__*/React.createElement(IconButton, {
       variant: "secondary",
       shape: "circular",
-      action: onClick,
+      action: () => onClick(),
       borderRadius: 48
     }, /*#__PURE__*/React.createElement(Close, {
       size: "24px",
@@ -146,19 +162,17 @@ export const ModalDialog = ({
     minWidth: getMinWidth(),
     maxWidth: getMaxWidth(),
     modalHeight: "auto",
-    padding: getPaddingAndMarginBottom()
+    padding: getPadding()
   }, /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement("form", {
     onSubmit: submitAction
   }, topImage && /*#__PURE__*/React.createElement(StyledModalHeader, {
     size: size,
     height: getImageHeight(),
-    marginBottom: getPaddingAndMarginBottom()
+    marginBottom: getMarginBottom()
   }, /*#__PURE__*/React.createElement("img", {
     src: topImage,
     alt: "Modal top"
-  }), ModalBackButton(), /*#__PURE__*/React.createElement(ModalCloseButton, {
-    onClick: closeAction
-  })), /*#__PURE__*/React.createElement(ModalTitleSection, null, !topImage && ModalBackButton(), title && ModalTitle(title, size), tooltip && /*#__PURE__*/React.createElement("div", {
+  }), ModalBackButton(), ModalCloseButton(closeAction)), /*#__PURE__*/React.createElement(ModalTitleSection, null, !topImage && ModalBackButton(), title && ModalTitle(title, size), tooltip && /*#__PURE__*/React.createElement("div", {
     id: "tooltip"
   }, /*#__PURE__*/React.createElement("div", {
     onMouseOver: () => setTooltipOpen(true),
@@ -166,9 +180,7 @@ export const ModalDialog = ({
   }, /*#__PURE__*/React.createElement(Help, {
     size: "24px",
     color: COLORS.neutral_600
-  })), tooltipOpen && /*#__PURE__*/React.createElement("span", null, tooltip)), !topImage && /*#__PURE__*/React.createElement(ModalCloseButton, {
-    onClick: closeAction
-  })), /*#__PURE__*/React.createElement(ModalBody, {
+  })), tooltipOpen && /*#__PURE__*/React.createElement("span", null, tooltip)), !topImage && ModalCloseButton(closeAction)), /*#__PURE__*/React.createElement(ModalBody, {
     size: size
   }, body), /*#__PURE__*/React.createElement(ModalFooter, {
     size: size

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Modals/ModalDialog.tsx"],"names":["React","Button","IconButton","ArrowLineLeft","Close","Help","COLORS","ComponentL","ComponentM","ComponentTextStyle","ComponentXL","ModalContainer","BackButtonWrapper","CloseButtonWrapper","Column","ModalBody","ModalFooter","ModalFooterButtons","ModalTitleSection","StyledModalHeader","ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","body","buttons","backButton","closeAction","submitAction","tooltip","tooltipOpen","setTooltipOpen","useState","getMinWidth","getMaxWidth","getImageHeight","getPaddingAndMarginBottom","ModalTitle","Bold","ModalCloseButton","onClick","black","ModalBackButton","neutral_600","map","b","action","variant","text"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ButtonProps } from '../Button/Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport ModalContainer from './ModalContainer';\nimport { BackButtonWrapper, CloseButtonWrapper, Column, ModalBody, ModalFooter, ModalFooterButtons, ModalTitle, ModalTitleSection, StyledModalHeader } from './ModalStyles';\n\ninterface ButtonAction extends Pick<ButtonProps, 'variant'> {\n  action: () => void;\n  text: string;\n}\n\ninterface NewModalProps {\n  size?: 'small' | 'medium' | 'large';\n  isModalOpen: boolean;\n  closeModalAndClearInput: any;\n  title?: string;\n  topImage?: any;\n  body?: any;\n  buttons?: ButtonAction[];\n  tooltip?: string;\n  backButton?: () => void;\n  closeAction: () => void;\n  submitAction: () => void;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  topImage,\n  body,\n  buttons,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n}) => {\n  const [tooltipOpen, setTooltipOpen] = React.useState<boolean>(false);\n\n  const getMinWidth = () => {\n    switch (size) {\n      case 'small':\n        return '320px';\n      case 'medium':\n        return '400px';\n      case 'large':\n        return '480px';\n      default:\n        return '400px';\n    }\n  };\n\n  const getMaxWidth = () => {\n    switch (size) {\n      case 'small':\n        return '512px';\n      case 'medium':\n        return '400px';\n      case 'large':\n        return '588px';\n      default:\n        return '664px';\n    }\n  };\n\n  const getImageHeight = () => {\n    switch (size) {\n      case 'small':\n        return 160;\n      case 'medium':\n        return 200;\n      case 'large':\n        return 240;\n      default:\n        return 200;\n    }\n  };\n  const getPaddingAndMarginBottom = () => {\n    switch (size) {\n      case 'small':\n        return '16px';\n      case 'medium':\n        return '24px';\n      case 'large':\n        return '32px';\n      default:\n        return '24px';\n    }\n  };\n\n  const ModalTitle = (title: string, size?: 'small' | 'medium' | 'large') => {\n    switch (size) {\n      case 'small':\n        return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n      case 'medium':\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n      case 'large':\n        return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n      default:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n    }\n  };\n\n  const ModalCloseButton = (onClick: any) => {\n    return (\n      <CloseButtonWrapper hasImage={!!topImage} size={size}>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={onClick} borderRadius={48}>\n          <Close size=\"24px\" color={COLORS.black} />\n        </IconButton>\n      </CloseButtonWrapper>\n    );\n  };\n\n  const ModalBackButton = () => {\n    if (backButton) {\n      return (\n        <BackButtonWrapper hasImage={!!topImage} size={size}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n            <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n          </IconButton>\n        </BackButtonWrapper>\n      );\n    }\n  };\n\n  return (\n    <ModalContainer\n      showModal={isModalOpen}\n      closeModal={closeModalAndClearInput}\n      minWidth={getMinWidth()}\n      maxWidth={getMaxWidth()}\n      modalHeight=\"auto\"\n      padding={getPaddingAndMarginBottom()}>\n      <Column>\n        <form onSubmit={submitAction}>\n          {topImage && (\n            <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getPaddingAndMarginBottom()}>\n              <img src={topImage} alt=\"Modal top\" />\n              {ModalBackButton()}\n              <ModalCloseButton onClick={closeAction} />\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            {!topImage && ModalBackButton()}\n            {title && ModalTitle(title, size)}\n            {tooltip && (\n              <div id=\"tooltip\">\n                <div onMouseOver={() => setTooltipOpen(true)} onMouseOut={() => setTooltipOpen(false)}>\n                  <Help size=\"24px\" color={COLORS.neutral_600} />\n                </div>\n                {tooltipOpen && <span>{tooltip}</span>}\n              </div>\n            )}\n            {!topImage && <ModalCloseButton onClick={closeAction} />}\n          </ModalTitleSection>\n\n          <ModalBody size={size}>{body}</ModalBody>\n\n          <ModalFooter size={size}>\n            <ModalFooterButtons size={size}>\n              {buttons?.map((b) => (\n                <Button size={size === 'large' ? 'big' : size === 'medium' ? 'normal' : size} onClick={b.action} variant={b.variant}>\n                  {b.text}\n                </Button>\n              ))}\n            </ModalFooterButtons>\n          </ModalFooter>\n        </form>\n      </Column>\n    </ModalContainer>\n  );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}
+{"version":3,"sources":["../../../src/Modals/ModalDialog.tsx"],"names":["React","Button","IconButton","ArrowLineLeft","Close","Help","COLORS","ComponentL","ComponentM","ComponentTextStyle","ComponentXL","ModalContainer","BackButtonWrapper","CloseButtonWrapper","Column","ModalBody","ModalFooter","ModalFooterButtons","ModalTitleSection","StyledModalHeader","ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","body","buttons","backButton","closeAction","submitAction","tooltip","tooltipOpen","setTooltipOpen","useState","getMinWidth","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","Bold","ModalCloseButton","onClick","black","ModalBackButton","neutral_600","map","b","action","variant","text"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ButtonProps } from '../Button/Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport ModalContainer from './ModalContainer';\nimport { BackButtonWrapper, CloseButtonWrapper, Column, ModalBody, ModalFooter, ModalFooterButtons, ModalTitle, ModalTitleSection, StyledModalHeader } from './ModalStyles';\n\ninterface ButtonAction extends Pick<ButtonProps, 'variant'> {\n  action: () => void;\n  text: string;\n}\n\ninterface NewModalProps {\n  size?: 'small' | 'medium' | 'large';\n  isModalOpen: boolean;\n  closeModalAndClearInput: any;\n  title?: string;\n  topImage?: any;\n  body?: any;\n  buttons?: ButtonAction[];\n  tooltip?: string;\n  backButton?: () => void;\n  closeAction: () => void;\n  submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  topImage,\n  body,\n  buttons,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n}) => {\n  const [tooltipOpen, setTooltipOpen] = React.useState<boolean>(false);\n\n  const getMinWidth = () => {\n    switch (size) {\n      case 'small':\n        return '320px';\n      case 'medium':\n        return '400px';\n      case 'large':\n        return '480px';\n      default:\n        return '400px';\n    }\n  };\n\n  const getMaxWidth = () => {\n    switch (size) {\n      case 'small':\n        return '512px';\n      case 'medium':\n        return '400px';\n      case 'large':\n        return '588px';\n      default:\n        return '664px';\n    }\n  };\n\n  const getImageHeight = () => {\n    switch (size) {\n      case 'small':\n        return 160;\n      case 'medium':\n        return 200;\n      case 'large':\n        return 240;\n      default:\n        return 200;\n    }\n  };\n\n  const getMarginBottom = () => {\n    switch (size) {\n      case 'small':\n        return '16px';\n      case 'medium':\n        return '24px';\n      case 'large':\n        return '32px';\n      default:\n        return '24px';\n    }\n  };\n\n  const getPadding = () => {\n    switch (size) {\n      case 'small':\n        return '16px 16px 8px';\n      case 'medium':\n        return '24px 24px 16px';\n      case 'large':\n        return '32px';\n      default:\n        return '24px 24px 16px';\n    }\n  };\n\n  const ModalTitle = (title: string, size?: 'small' | 'medium' | 'large') => {\n    switch (size) {\n      case 'small':\n        return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n      case 'medium':\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n      case 'large':\n        return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n      default:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n    }\n  };\n\n  const ModalCloseButton = (onClick: any) => {\n    return (\n      <CloseButtonWrapper hasImage={!!topImage} size={size}>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n          <Close size=\"24px\" color={COLORS.black} />\n        </IconButton>\n      </CloseButtonWrapper>\n    );\n  };\n\n  const ModalBackButton = () => {\n    if (backButton) {\n      return (\n        <BackButtonWrapper hasImage={!!topImage} size={size}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n            <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n          </IconButton>\n        </BackButtonWrapper>\n      );\n    }\n  };\n\n  return (\n    <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()}>\n      <Column>\n        <form onSubmit={submitAction}>\n          {topImage && (\n            <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n              <img src={topImage} alt=\"Modal top\" />\n              {ModalBackButton()}\n              {ModalCloseButton(closeAction)}\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            {!topImage && ModalBackButton()}\n            {title && ModalTitle(title, size)}\n            {tooltip && (\n              <div id=\"tooltip\">\n                <div onMouseOver={() => setTooltipOpen(true)} onMouseOut={() => setTooltipOpen(false)}>\n                  <Help size=\"24px\" color={COLORS.neutral_600} />\n                </div>\n                {tooltipOpen && <span>{tooltip}</span>}\n              </div>\n            )}\n            {!topImage && ModalCloseButton(closeAction)}\n          </ModalTitleSection>\n\n          <ModalBody size={size}>{body}</ModalBody>\n\n          <ModalFooter size={size}>\n            <ModalFooterButtons size={size}>\n              {buttons?.map((b) => (\n                <Button size={size === 'large' ? 'big' : size === 'medium' ? 'normal' : size} onClick={b.action} variant={b.variant}>\n                  {b.text}\n                </Button>\n              ))}\n            </ModalFooterButtons>\n          </ModalFooter>\n        </form>\n      </Column>\n    </ModalContainer>\n  );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}

package/dist/esm/Paginator/Paginator.js

@@ -2,8 +2,9 @@ import _pt from "prop-types";
 import * as React from 'react';
 import styled from 'styled-components';
 import { NavLink } from 'react-router-dom';
-import { BREAKPOINTS, COLORS } from '../styles';
+import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';
 import { ChevronLeft, ChevronRight, MoreHorizontal } from '../icons/systemicons/SystemIcons';
+import { ComponentMStyling } from '../styles/typography';
 const Container = styled.nav`
   margin: 20px 0;
   display: flex;
@@ -25,9 +26,6 @@ const Item = styled.li`
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 19px;
-  line-height: 23px;
-  font-weight: 400;
 
   & > * {
     display: flex;
@@ -36,9 +34,10 @@ const Item = styled.li`
     width: 100%;
     height: 100%;
     text-decoration: none;
-    font-family: 'Lato', sans-serif;
-    color: ${COLORS.neutral_600};
     border-bottom: 3px solid transparent;
+
+    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}
+
     &:focus,
     &:focus-within {
       box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;