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

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

@@ -17,6 +17,8 @@ var _index = require("../../styles/index");
 
 var _styling = require("../styling");
 
+var _typography = require("../../styles/typography");
+
 var _templateObject, _templateObject2;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -29,7 +31,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 
 var DisabledState = (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n  pointer-events: none;\n  background-color: transparent !important;\n  box-shadow: none !important;\n"])), _index.COLORS.neutral_100);
 
-var StyledSearchField = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  border: solid 2px transparent;\n  box-shadow: inset 0px 0px 0px 1px ", ";\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: ", ";\n  }\n  ", " {\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 ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    border-color: transparent;\n  }\n  &:focus-within {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    border-color: transparent;\n  }\n  &:disabled {\n    border: 1px solid ", ";\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n  div {\n    color: ", ";\n  }\n  ", "\n  ", "\n  ", "\n"])), _index.COLORS.neutral_300, _index.COLORS.neutral_400, _index.BREAKPOINTS.MEDIUM, _index.COLORS.primary_700, _index.COLORS.primary_700, _index.COLORS.primary_700, _index.COLORS.primary_800, _index.COLORS.primary_800, _index.COLORS.primary_800, _index.COLORS.neutral_100, _index.COLORS.neutral_600, function (props) {
+var StyledSearchField = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  border: solid 2px transparent;\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  box-sizing: border-box;\n  border-radius: 56px;\n  align-items: center;\n  position: relative;\n  height: 48px;\n  appearance: none;\n\n  ", "\n\n  padding: 0 !important;\n  width: 100%;\n  ::placeholder {\n    ", "\n  }\n  ", " {\n    ", "\n\n    height: 56px;\n    padding: 0 4px !important;\n    &::placeholder {\n      ", "\n    }\n  }\n  &.small {\n    ", "\n    height: 48px;\n    padding: 0 !important;\n    &::placeholder {\n      ", "\n    }\n  }\n  &.medium {\n    ", "\n    height: 56px;\n    &::placeholder {\n      ", "\n    }\n  }\n  &:hover {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    border-color: transparent;\n  }\n  &:focus-within {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    border-color: transparent;\n  }\n  &:disabled {\n    border: 1px solid ", ";\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n  div {\n    color: ", ";\n  }\n  ", "\n  ", "\n  ", "\n"])), _index.COLORS.neutral_300, (0, _typography.ComponentSStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.black), (0, _typography.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_500), _index.BREAKPOINTS.MEDIUM, (0, _typography.ComponentMStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.black), (0, _typography.ComponentMStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_500), (0, _typography.ComponentSStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.black), (0, _typography.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_500), (0, _typography.ComponentMStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.black), (0, _typography.ComponentMStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_500), _index.COLORS.primary_700, _index.COLORS.primary_700, _index.COLORS.primary_700, _index.COLORS.primary_800, _index.COLORS.primary_800, _index.COLORS.primary_800, _index.COLORS.neutral_100, _index.COLORS.neutral_600, function (props) {
   return props.disabled ? DisabledState : '';
 }, function (props) {
   return props.activeValidationMessage ? _styling.activeValidationMessageState : '';

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/InputFields/components/SearchField.tsx"],"names":["DisabledState","css","COLORS","neutral_100","StyledSearchField","styled","div","neutral_300","neutral_400","BREAKPOINTS","MEDIUM","primary_700","primary_800","neutral_600","props","disabled","activeValidationMessage","activeValidationMessageState","tabbedHere","tabbedHereStyle","SearchField","id","searchTerm","validationMessage","children","size","concat","undefined"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,aAAa,OAAGC,qBAAH,0MACGC,cAAOC,WADV,CAAnB;;AAOO,IAAMC,iBAAiB,GAAGC,0BAAOC,GAAV,m7CAIQJ,cAAOK,WAJf,EAgBjBL,cAAOM,WAhBU,EAkB1BC,mBAAYC,MAlBc,EA2CkBR,cAAOS,WA3CzB,EA4CeT,cAAOS,WA5CtB,EA6CUT,cAAOS,WA7CjB,EAiDkBT,cAAOU,WAjDzB,EAkDeV,cAAOU,WAlDtB,EAmDUV,cAAOU,WAnDjB,EAuDNV,cAAOC,WAvDD,EA4DjBD,cAAOW,WA5DU,EA8D1B,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,QAAN,GAAiBf,aAAjB,GAAiC,EAA7C;AAAA,CA9D0B,EA+D1B,UAACc,KAAD;AAAA,SAAYA,KAAK,CAACE,uBAAN,GAAgCC,qCAAhC,GAA+D,EAA3E;AAAA,CA/D0B,EAgE1B,UAACH,KAAD;AAAA,SAAYA,KAAK,CAACI,UAAN,GAAmBC,wBAAnB,GAAqC,EAAjD;AAAA,CAhE0B,CAAvB;;;;AA6EP,IAAMC,WAAqD,GAAG,SAAxDA,WAAwD,OAAiF;AAAA,MAA9EC,EAA8E,QAA9EA,EAA8E;AAAA,MAA1EC,UAA0E,QAA1EA,UAA0E;AAAA,MAA9DP,QAA8D,QAA9DA,QAA8D;AAAA,MAApDQ,iBAAoD,QAApDA,iBAAoD;AAAA,MAAjCC,QAAiC,QAAjCA,QAAiC;AAAA,MAAvBN,UAAuB,QAAvBA,UAAuB;AAAA,MAAXO,IAAW,QAAXA,IAAW;AAC7I,sBACE,oBAAC,iBAAD;AACE,IAAA,EAAE,YAAKJ,EAAL,UADJ;AAEE,IAAA,SAAS,EAAE,CAACC,UAAU,KAAK,EAAf,GAAoB,eAApB,GAAsC,EAAvC,EAA2CI,MAA3C,CAAkDD,IAAI,GAAGA,IAAH,GAAU,EAAhE,CAFb;AAGE,IAAA,QAAQ,EAAEV,QAHZ;AAIE,IAAA,UAAU,EAAEG,UAJd;AAKE,IAAA,QAAQ,EAAE,CAAC,CALb;AAME,IAAA,uBAAuB,EAAEK,iBAAiB,KAAKI,SAAtB,IAAmCJ,iBAAiB,KAAK;AANpF,KAOGC,QAPH,CADF;AAWD,CAZD;;;AATEH,EAAAA,E;AACAC,EAAAA,U;AACAP,EAAAA,Q;AACAQ,EAAAA,iB;AACAC,EAAAA,Q;AACAN,EAAAA,U;AACAO,EAAAA,I;;eAiBaL,W","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":["DisabledState","css","COLORS","neutral_100","StyledSearchField","styled","div","neutral_300","ComponentTextStyle","Regular","black","Italic","neutral_500","BREAKPOINTS","MEDIUM","primary_700","primary_800","neutral_600","props","disabled","activeValidationMessage","activeValidationMessageState","tabbedHere","tabbedHereStyle","SearchField","id","searchTerm","validationMessage","children","size","concat","undefined"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,aAAa,OAAGC,qBAAH,0MACGC,cAAOC,WADV,CAAnB;;AAOO,IAAMC,iBAAiB,GAAGC,0BAAOC,GAAV,4yCAIQJ,cAAOK,WAJf,EAY1B,mCAAkBC,0BAAmBC,OAArC,EAA8CP,cAAOQ,KAArD,CAZ0B,EAiBxB,mCAAkBF,0BAAmBG,MAArC,EAA6CT,cAAOU,WAApD,CAjBwB,EAmB1BC,mBAAYC,MAnBc,EAoBxB,mCAAkBN,0BAAmBC,OAArC,EAA8CP,cAAOQ,KAArD,CApBwB,EAyBtB,mCAAkBF,0BAAmBG,MAArC,EAA6CT,cAAOU,WAApD,CAzBsB,EA6BxB,mCAAkBJ,0BAAmBC,OAArC,EAA8CP,cAAOQ,KAArD,CA7BwB,EAiCtB,mCAAkBF,0BAAmBG,MAArC,EAA6CT,cAAOU,WAApD,CAjCsB,EAqCxB,mCAAkBJ,0BAAmBC,OAArC,EAA8CP,cAAOQ,KAArD,CArCwB,EAwCtB,mCAAkBF,0BAAmBG,MAArC,EAA6CT,cAAOU,WAApD,CAxCsB,EA4CkBV,cAAOa,WA5CzB,EA6Ceb,cAAOa,WA7CtB,EA8CUb,cAAOa,WA9CjB,EAkDkBb,cAAOc,WAlDzB,EAmDed,cAAOc,WAnDtB,EAoDUd,cAAOc,WApDjB,EAwDNd,cAAOC,WAxDD,EA6DjBD,cAAOe,WA7DU,EA+D1B,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,QAAN,GAAiBnB,aAAjB,GAAiC,EAA7C;AAAA,CA/D0B,EAgE1B,UAACkB,KAAD;AAAA,SAAYA,KAAK,CAACE,uBAAN,GAAgCC,qCAAhC,GAA+D,EAA3E;AAAA,CAhE0B,EAiE1B,UAACH,KAAD;AAAA,SAAYA,KAAK,CAACI,UAAN,GAAmBC,wBAAnB,GAAqC,EAAjD;AAAA,CAjE0B,CAAvB;;;;AA8EP,IAAMC,WAAqD,GAAG,SAAxDA,WAAwD,OAAiF;AAAA,MAA9EC,EAA8E,QAA9EA,EAA8E;AAAA,MAA1EC,UAA0E,QAA1EA,UAA0E;AAAA,MAA9DP,QAA8D,QAA9DA,QAA8D;AAAA,MAApDQ,iBAAoD,QAApDA,iBAAoD;AAAA,MAAjCC,QAAiC,QAAjCA,QAAiC;AAAA,MAAvBN,UAAuB,QAAvBA,UAAuB;AAAA,MAAXO,IAAW,QAAXA,IAAW;AAC7I,sBACE,oBAAC,iBAAD;AACE,IAAA,EAAE,YAAKJ,EAAL,UADJ;AAEE,IAAA,SAAS,EAAE,CAACC,UAAU,KAAK,EAAf,GAAoB,eAApB,GAAsC,EAAvC,EAA2CI,MAA3C,CAAkDD,IAAI,GAAGA,IAAH,GAAU,EAAhE,CAFb;AAGE,IAAA,QAAQ,EAAEV,QAHZ;AAIE,IAAA,UAAU,EAAEG,UAJd;AAKE,IAAA,QAAQ,EAAE,CAAC,CALb;AAME,IAAA,uBAAuB,EAAEK,iBAAiB,KAAKI,SAAtB,IAAmCJ,iBAAiB,KAAK;AANpF,KAOGC,QAPH,CADF;AAWD,CAZD;;;AATEH,EAAAA,E;AACAC,EAAAA,U;AACAP,EAAAA,Q;AACAQ,EAAAA,iB;AACAC,EAAAA,Q;AACAN,EAAAA,U;AACAO,EAAAA,I;;eAiBaL,W","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/js/List/ListRow.js

@@ -21,6 +21,8 @@ var _styles = require("../styles");
 
 var _ListRowDropdown = _interopRequireDefault(require("./ListRowDropdown"));
 
+var _typography = require("../styles/typography");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -47,7 +49,7 @@ var EditRow = _styledComponents.default.div(_templateObject || (_templateObject
   return props.disableDifferentBackgroundforEvenNumbers ? 'inherit' : _styles.COLORS.neutral_20;
 }, _styles.COLORS.neutral_100);
 
-var LeftSection = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  font-size: 16px;\n  align-items: center;\n  svg {\n    margin-right: 12px;\n  }\n"])));
+var LeftSection = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  ", "\n\n  svg {\n    margin-right: 12px;\n  }\n"])), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, 'inherit'));
 
 var MainInfo = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: auto 1em auto 0;\n  display: flex;\n  flex-direction: column;\n"])));
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/List/ListRow.tsx"],"names":["EditRow","styled","div","props","disableDifferentBackgroundforEvenNumbers","COLORS","neutral_20","neutral_100","LeftSection","MainInfo","ButtonWrapper","UserDropdownButton","Button","white","StyledMoreVertical","MoreVertical","primary_20","primary_100","ListRow","key","Icon","mainInfo","dropdownOptions","color","black","React","useState","dropdownActive","setDropdownActive","neutral_500"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAGA;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,OAAO,GAAGC,0BAAOC,GAAV,ubAOW,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACC,wCAAN,GAAiD,SAAjD,GAA6DC,eAAOC,UAAzE;AAAA,CAPhB,EAqBWD,eAAOE,WArBlB,CAAb;;AAyBA,IAAMC,WAAW,GAAGP,0BAAOC,GAAV,sMAAjB;;AAUA,IAAMO,QAAQ,GAAGR,0BAAOC,GAAV,kJAAd;;AAMA,IAAMQ,aAAa,GAAGT,0BAAOC,GAAV,2FAAnB;;AAIA,IAAMS,kBAAkB,GAAG,+BAAOC,cAAP,CAAH,mVAWNP,eAAOQ,KAXD,CAAxB;AAeA,IAAMC,kBAAkB,GAAG,+BAAOC,yBAAP,CAAH,sPAINV,eAAOW,UAJD,EAQNX,eAAOY,WARD,CAAxB;;AAqBA,IAAMC,OAAuC,GAAG,SAA1CA,OAA0C,OAA+F;AAAA,MAA5FC,GAA4F,QAA5FA,GAA4F;AAAA,MAAvFC,IAAuF,QAAvFA,IAAuF;AAAA,MAAjFC,QAAiF,QAAjFA,QAAiF;AAAA,MAAvEC,eAAuE,QAAvEA,eAAuE;AAAA,MAAtDlB,wCAAsD,QAAtDA,wCAAsD;AAC7I,MAAMmB,KAAK,GAAGlB,eAAOmB,KAArB;;AACA,wBAA4CC,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAA5C;AAAA;AAAA,MAAOC,cAAP;AAAA,MAAuBC,iBAAvB;;AAEA,sBACE,oBAAC,OAAD;AAAS,IAAA,GAAG,EAAET,GAAd;AAAmB,IAAA,wCAAwC,EAAEf;AAA7D,kBACE,oBAAC,WAAD;AAAa,IAAA,KAAK,EAAEmB,KAApB;AAA2B;AAA3B,KACGH,IAAI,iBAAI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAC,MAAX;AAAkB,IAAA,KAAK,EAAEG,KAAzB;AAAgC,IAAA,SAAS,EAAC;AAA1C,IADX,eAEE,oBAAC,QAAD;AAAU;AAAV,KAA4BF,QAA5B,CAFF,CADF,eAME,oBAAC,aAAD;AAAe,IAAA,SAAS,EAAC;AAAzB,kBACE,oBAAC,kBAAD;AACE,IAAA,OAAO,EAAC,MADV;AAEE,IAAA,OAAO,EAAE,mBAAM;AACbO,MAAAA,iBAAiB,CAAC,IAAD,CAAjB;AACD;AAJH,kBAKE;AAAK,IAAA,QAAQ,EAAE,CAAC;AAAhB,kBACE,oBAAC,kBAAD;AAAoB,IAAA,IAAI,EAAC,MAAzB;AAAgC,IAAA,KAAK,EAAEvB,eAAOwB;AAA9C,IADF,CALF,CADF,EAUGF,cAAc,iBAAI,oBAAC,wBAAD;AAAiB,IAAA,aAAa,EAAE;AAAA,aAAMC,iBAAiB,CAAC,KAAD,CAAvB;AAAA,KAAhC;AAAgE,IAAA,OAAO,EAAEN;AAAzE,IAVrB,CANF,CADF;AAqBD,CAzBD;;;AAPEH,EAAAA,G;AACAC,EAAAA,I;AACAC,EAAAA,Q;AACAC,EAAAA,e;AACAlB,EAAAA,wC;;eA8Bac,O","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":["EditRow","styled","div","props","disableDifferentBackgroundforEvenNumbers","COLORS","neutral_20","neutral_100","LeftSection","ComponentTextStyle","Regular","MainInfo","ButtonWrapper","UserDropdownButton","Button","white","StyledMoreVertical","MoreVertical","primary_20","primary_100","ListRow","key","Icon","mainInfo","dropdownOptions","color","black","React","useState","dropdownActive","setDropdownActive","neutral_500"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAGA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,OAAO,GAAGC,0BAAOC,GAAV,ubAOW,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACC,wCAAN,GAAiD,SAAjD,GAA6DC,eAAOC,UAAzE;AAAA,CAPhB,EAqBWD,eAAOE,WArBlB,CAAb;;AAyBA,IAAMC,WAAW,GAAGP,0BAAOC,GAAV,+LAKb,mCAAkBO,2BAAmBC,OAArC,EAA8C,SAA9C,CALa,CAAjB;;AAYA,IAAMC,QAAQ,GAAGV,0BAAOC,GAAV,kJAAd;;AAMA,IAAMU,aAAa,GAAGX,0BAAOC,GAAV,2FAAnB;;AAIA,IAAMW,kBAAkB,GAAG,+BAAOC,cAAP,CAAH,mVAWNT,eAAOU,KAXD,CAAxB;AAeA,IAAMC,kBAAkB,GAAG,+BAAOC,yBAAP,CAAH,sPAINZ,eAAOa,UAJD,EAQNb,eAAOc,WARD,CAAxB;;AAqBA,IAAMC,OAAuC,GAAG,SAA1CA,OAA0C,OAA+F;AAAA,MAA5FC,GAA4F,QAA5FA,GAA4F;AAAA,MAAvFC,IAAuF,QAAvFA,IAAuF;AAAA,MAAjFC,QAAiF,QAAjFA,QAAiF;AAAA,MAAvEC,eAAuE,QAAvEA,eAAuE;AAAA,MAAtDpB,wCAAsD,QAAtDA,wCAAsD;AAC7I,MAAMqB,KAAK,GAAGpB,eAAOqB,KAArB;;AACA,wBAA4CC,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAA5C;AAAA;AAAA,MAAOC,cAAP;AAAA,MAAuBC,iBAAvB;;AAEA,sBACE,oBAAC,OAAD;AAAS,IAAA,GAAG,EAAET,GAAd;AAAmB,IAAA,wCAAwC,EAAEjB;AAA7D,kBACE,oBAAC,WAAD;AAAa,IAAA,KAAK,EAAEqB,KAApB;AAA2B;AAA3B,KACGH,IAAI,iBAAI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAC,MAAX;AAAkB,IAAA,KAAK,EAAEG,KAAzB;AAAgC,IAAA,SAAS,EAAC;AAA1C,IADX,eAEE,oBAAC,QAAD;AAAU;AAAV,KAA4BF,QAA5B,CAFF,CADF,eAME,oBAAC,aAAD;AAAe,IAAA,SAAS,EAAC;AAAzB,kBACE,oBAAC,kBAAD;AACE,IAAA,OAAO,EAAC,MADV;AAEE,IAAA,OAAO,EAAE,mBAAM;AACbO,MAAAA,iBAAiB,CAAC,IAAD,CAAjB;AACD;AAJH,kBAKE;AAAK,IAAA,QAAQ,EAAE,CAAC;AAAhB,kBACE,oBAAC,kBAAD;AAAoB,IAAA,IAAI,EAAC,MAAzB;AAAgC,IAAA,KAAK,EAAEzB,eAAO0B;AAA9C,IADF,CALF,CADF,EAUGF,cAAc,iBAAI,oBAAC,wBAAD;AAAiB,IAAA,aAAa,EAAE;AAAA,aAAMC,iBAAiB,CAAC,KAAD,CAAvB;AAAA,KAAhC;AAAgE,IAAA,OAAO,EAAEN;AAAzE,IAVrB,CANF,CADF;AAqBD,CAzBD;;;AAPEH,EAAAA,G;AACAC,EAAAA,I;AACAC,EAAAA,Q;AACAC,EAAAA,e;AACApB,EAAAA,wC;;eA8BagB,O","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/js/List/ListRowDropdown.js

@@ -15,6 +15,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _styles = require("../styles");
 
+var _typography = require("../styles/typography");
+
 var _templateObject, _templateObject2, _templateObject3;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -41,7 +43,7 @@ var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject
 
 var DropdownMenuContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  flex-direction: column;\n  background: ", ";\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"])), _styles.COLORS.white);
 
-var Content = _styledComponents.default.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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: ", ";\n\n  background-color: ", ";\n  border-width: 0;\n\n  &:hover,\n  &:focus {\n    cursor: pointer;\n  }\n\n  &:hover {\n    background: ", ";\n    border-radius: 4px;\n  }\n  &:active {\n    background: ", ";\n    border-radius: 4px;\n  }\n"])), _styles.COLORS.neutral_600, _styles.COLORS.white, _styles.COLORS.primary_20, _styles.COLORS.primary_100);
+var Content = _styledComponents.default.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  min-width: 100%;\n  padding: 12px 16px;\n\n  text-align: left;\n  height: 48px;\n\n  ", "\n\n  background-color: ", ";\n  border-width: 0;\n\n  &:hover,\n  &:focus {\n    cursor: pointer;\n  }\n\n  &:hover {\n    background: ", ";\n    border-radius: 4px;\n  }\n  &:active {\n    background: ", ";\n    border-radius: 4px;\n  }\n"])), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), _styles.COLORS.white, _styles.COLORS.primary_20, _styles.COLORS.primary_100);
 
 var ListRowDropdown = function ListRowDropdown(_ref) {
   var options = _ref.options,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/List/ListRowDropdown.tsx"],"names":["Wrapper","styled","div","DropdownMenuContainer","COLORS","white","Content","button","neutral_600","primary_20","primary_100","ListRowDropdown","options","closeDropdown","React","useState","classname","setClassname","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":["Wrapper","styled","div","DropdownMenuContainer","COLORS","white","Content","button","ComponentTextStyle","Regular","neutral_600","primary_20","primary_100","ListRowDropdown","options","closeDropdown","React","useState","classname","setClassname","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/js/LoadingPage/GlobalLoadingPage.js

@@ -19,6 +19,8 @@ var _LoadingIndicator = _interopRequireDefault(require("../LoadingIndicator/Load
 
 var _styles = require("../styles");
 
+var _typography = require("../styles/typography");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -33,7 +35,7 @@ var LoadingMain = _styledComponents.default.main(_templateObject || (_templateOb
 
 var Header = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 64px;\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n"])), _styles.COLORS.white, _styles.COLORS.neutral_200);
 
-var LogoAndMessage = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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: ", ";\n    width: 320px;\n    text-align: center;\n  }\n"])), _styles.COLORS.neutral_600);
+var LogoAndMessage = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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    ", "\n  }\n"])), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600));
 
 var LoadingIndicatorContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])));
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/LoadingPage/GlobalLoadingPage.tsx"],"names":["LoadingMain","styled","main","COLORS","primary_20","Header","div","white","neutral_200","LogoAndMessage","neutral_600","LoadingIndicatorContainer","LoadingPage","optionalMessage","includeHeader"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;;;;;AAEA,IAAMA,WAAW,GAAGC,0BAAOC,IAAV,6KAIKC,eAAOC,UAJZ,CAAjB;;AAQA,IAAMC,MAAM,GAAGJ,0BAAOK,GAAV,wJAEUH,eAAOI,KAFjB,EAGiBJ,eAAOK,WAHxB,CAAZ;;AAMA,IAAMC,cAAc,GAAGR,0BAAOK,GAAV,6XAaPH,eAAOO,WAbA,CAApB;;AAmBA,IAAMC,yBAAyB,GAAGV,0BAAOK,GAAV,gKAA/B;;AAYA,IAAMM,WAAiD,GAAG,SAApDA,WAAoD,OAAqD;AAAA,MAAlDC,eAAkD,QAAlDA,eAAkD;AAAA,MAAjCC,aAAiC,QAAjCA,aAAiC;AAC7G,sBACE,oBAAC,WAAD;AAAa,mBAAY;AAAzB,KACGA,aAAa,iBAAI,oBAAC,MAAD,OADpB,eAEE,oBAAC,yBAAD,qBACE,oBAAC,yBAAD,OADF,CAFF,eAKE,oBAAC,cAAD;AAAgB,mBAAY;AAA5B,KACGD,eAAe,iBAAI,kCAAOA,eAAP,CADtB,eAEE,oBAAC,0BAAD,OAFF,CALF,CADF;AAYD,CAbD;;;AAJEA,EAAAA,e;AACAC,EAAAA,a;;eAkBaF,W","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":["LoadingMain","styled","main","COLORS","primary_20","Header","div","white","neutral_200","LogoAndMessage","ComponentTextStyle","Regular","neutral_600","LoadingIndicatorContainer","LoadingPage","optionalMessage","includeHeader"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,WAAW,GAAGC,0BAAOC,IAAV,6KAIKC,eAAOC,UAJZ,CAAjB;;AAQA,IAAMC,MAAM,GAAGJ,0BAAOK,GAAV,wJAEUH,eAAOI,KAFjB,EAGiBJ,eAAOK,WAHxB,CAAZ;;AAMA,IAAMC,cAAc,GAAGR,0BAAOK,GAAV,qWAed,mCAAkBI,2BAAmBC,OAArC,EAA8CR,eAAOS,WAArD,CAfc,CAApB;;AAmBA,IAAMC,yBAAyB,GAAGZ,0BAAOK,GAAV,gKAA/B;;AAYA,IAAMQ,WAAiD,GAAG,SAApDA,WAAoD,OAAqD;AAAA,MAAlDC,eAAkD,QAAlDA,eAAkD;AAAA,MAAjCC,aAAiC,QAAjCA,aAAiC;AAC7G,sBACE,oBAAC,WAAD;AAAa,mBAAY;AAAzB,KACGA,aAAa,iBAAI,oBAAC,MAAD,OADpB,eAEE,oBAAC,yBAAD,qBACE,oBAAC,yBAAD,OADF,CAFF,eAKE,oBAAC,cAAD;AAAgB,mBAAY;AAA5B,KACGD,eAAe,iBAAI,kCAAOA,eAAP,CADtB,eAEE,oBAAC,0BAAD,OAFF,CALF,CADF;AAYD,CAbD;;;AAJEA,EAAAA,e;AACAC,EAAAA,a;;eAkBaF,W","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/js/MiniProductCard/MiniProductCard.js

@@ -19,6 +19,8 @@ var _styles = require("../styles");
 
 var _SystemIcons = require("../icons/systemicons/SystemIcons");
 
+var _typography = require("../styles/typography");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -35,9 +37,9 @@ var ProductThing = _styledComponents.default.div(_templateObject2 || (_templateO
 
 var ProductImage = _styledComponents.default.img(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 95px;\n  height: 75px;\n  object-fit: fill;\n  border-radius: 8px;\n"])));
 
-var ProductName = _styledComponents.default.h2(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-size: 18px;\n  line-height: 1.2;\n  margin: 0;\n  margin-top: 3px;\n"])));
+var ProductName = _styledComponents.default.h2(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n  margin: 0;\n  margin-top: 3px;\n"])), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black));
 
-var ProductType = _styledComponents.default.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  font-size: 16px;\n  line-height: 1.2;\n  margin: 0;\n"])));
+var ProductType = _styledComponents.default.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", "\n  margin: 0;\n"])), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black));
 
 var ProductInnerWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: 12px 18px;\n  flex: 1;\n"])));
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/MiniProductCard/MiniProductCard.tsx"],"names":["ProductLink","Link","COLORS","black","BREAKPOINTS","MEDIUM","ProductThing","styled","div","primary_20","primary_600","primary_100","ProductImage","img","ProductName","h2","ProductType","span","ProductInnerWrapper","RightIconWrapper","MiniProductCard","url","product","image","name","type","primary"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAOA,IAAMA,WAAW,GAAG,+BAAOC,oBAAP,CAAH,yMAINC,eAAOC,KAJD,EAObC,oBAAYC,MAPC,CAAjB;;AAYA,IAAMC,YAAY,GAAGC,0BAAOC,GAAV,0ZAQAN,eAAOO,UARP,EAWJP,eAAOQ,WAXH,EAeAR,eAAOS,WAfP,EAkBJT,eAAOQ,WAlBH,CAAlB;;AAuBA,IAAME,YAAY,GAAGL,0BAAOM,GAAV,sJAAlB;;AAOA,IAAMC,WAAW,GAAGP,0BAAOQ,EAAV,oJAAjB;;AAOA,IAAMC,WAAW,GAAGT,0BAAOU,IAAV,gIAAjB;;AAMA,IAAMC,mBAAmB,GAAGX,0BAAOC,GAAV,yJAAzB;;AAOA,IAAMW,gBAAgB,GAAGZ,0BAAOC,GAAV,wKAAtB;;AAOA,IAAMY,eAAe,GAAG,SAAlBA,eAAkB,OAAiC;AAAA,MAA9BC,GAA8B,QAA9BA,GAA8B;AAAA,MAAzBC,OAAyB,QAAzBA,OAAyB;AACvD,sBACE,oBAAC,WAAD;AAAa,IAAA,EAAE,EAAED,GAAF,aAAEA,GAAF,cAAEA,GAAF,GAAS;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,yBAAD;AAAc,IAAA,KAAK,EAAEvB,eAAOwB,OAA5B;AAAqC,IAAA,SAAS,EAAE,uBAAhD;AAAyE,IAAA,IAAI,EAAE;AAA/E,IADF,CANF,CADF,CADF;AAcD,CAfD;;;AAvEEL,EAAAA,G;;eAwFaD,e","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":["ProductLink","Link","COLORS","black","BREAKPOINTS","MEDIUM","ProductThing","styled","div","primary_20","primary_600","primary_100","ProductImage","img","ProductName","h2","ComponentTextStyle","Regular","ProductType","span","ProductInnerWrapper","RightIconWrapper","MiniProductCard","url","product","image","name","type","primary"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;;;;;;;AAMA,IAAMA,WAAW,GAAG,+BAAOC,oBAAP,CAAH,yMAINC,eAAOC,KAJD,EAObC,oBAAYC,MAPC,CAAjB;;AAYA,IAAMC,YAAY,GAAGC,0BAAOC,GAAV,0ZAQAN,eAAOO,UARP,EAWJP,eAAOQ,WAXH,EAeAR,eAAOS,WAfP,EAkBJT,eAAOQ,WAlBH,CAAlB;;AAuBA,IAAME,YAAY,GAAGL,0BAAOM,GAAV,sJAAlB;;AAOA,IAAMC,WAAW,GAAGP,0BAAOQ,EAAV,oHACb,mCAAkBC,2BAAmBC,OAArC,EAA8Cf,eAAOC,KAArD,CADa,CAAjB;;AAMA,IAAMe,WAAW,GAAGX,0BAAOY,IAAV,gGACb,mCAAkBH,2BAAmBC,OAArC,EAA8Cf,eAAOC,KAArD,CADa,CAAjB;;AAKA,IAAMiB,mBAAmB,GAAGb,0BAAOC,GAAV,yJAAzB;;AAOA,IAAMa,gBAAgB,GAAGd,0BAAOC,GAAV,wKAAtB;;AAOA,IAAMc,eAAe,GAAG,SAAlBA,eAAkB,OAAiC;AAAA,MAA9BC,GAA8B,QAA9BA,GAA8B;AAAA,MAAzBC,OAAyB,QAAzBA,OAAyB;AACvD,sBACE,oBAAC,WAAD;AAAa,IAAA,EAAE,EAAED,GAAF,aAAEA,GAAF,cAAEA,GAAF,GAAS;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,yBAAD;AAAc,IAAA,KAAK,EAAEzB,eAAO0B,OAA5B;AAAqC,IAAA,SAAS,EAAE,uBAAhD;AAAyE,IAAA,IAAI,EAAE;AAA/E,IADF,CANF,CADF,CADF;AAcD,CAfD;;;AArEEL,EAAAA,G;;eAsFaD,e","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/js/Modals/ModalDialog.d.ts

@@ -15,7 +15,7 @@ interface NewModalProps {
     tooltip?: string;
     backButton?: () => void;
     closeAction: () => void;
-    submitAction: () => void;
+    submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;
 }
 export declare const ModalDialog: React.FunctionComponent<NewModalProps>;
 export default ModalDialog;

package/dist/js/Modals/ModalDialog.js

@@ -105,7 +105,7 @@ var ModalDialog = function ModalDialog(_ref) {
     }
   };
 
-  var getPaddingAndMarginBottom = function getPaddingAndMarginBottom() {
+  var getMarginBottom = function getMarginBottom() {
     switch (size) {
       case 'small':
         return '16px';
@@ -121,6 +121,22 @@ var ModalDialog = function ModalDialog(_ref) {
     }
   };
 
+  var getPadding = function getPadding() {
+    switch (size) {
+      case 'small':
+        return '16px 16px 8px';
+
+      case 'medium':
+        return '24px 24px 16px';
+
+      case 'large':
+        return '32px';
+
+      default:
+        return '24px 24px 16px';
+    }
+  };
+
   var ModalTitle = function ModalTitle(title, size) {
     switch (size) {
       case 'small':
@@ -152,7 +168,9 @@ var ModalDialog = function ModalDialog(_ref) {
     }, /*#__PURE__*/React.createElement(_Button.IconButton, {
       variant: "secondary",
       shape: "circular",
-      action: onClick,
+      action: function action() {
+        return onClick();
+      },
       borderRadius: 48
     }, /*#__PURE__*/React.createElement(_SystemIcons.Close, {
       size: "24px",
@@ -185,19 +203,17 @@ var ModalDialog = function ModalDialog(_ref) {
     minWidth: getMinWidth(),
     maxWidth: getMaxWidth(),
     modalHeight: "auto",
-    padding: getPaddingAndMarginBottom()
+    padding: getPadding()
   }, /*#__PURE__*/React.createElement(_ModalStyles.Column, null, /*#__PURE__*/React.createElement("form", {
     onSubmit: submitAction
   }, topImage && /*#__PURE__*/React.createElement(_ModalStyles.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(_ModalStyles.ModalTitleSection, null, !topImage && ModalBackButton(), title && ModalTitle(title, size), tooltip && /*#__PURE__*/React.createElement("div", {
+  }), ModalBackButton(), ModalCloseButton(closeAction)), /*#__PURE__*/React.createElement(_ModalStyles.ModalTitleSection, null, !topImage && ModalBackButton(), title && ModalTitle(title, size), tooltip && /*#__PURE__*/React.createElement("div", {
     id: "tooltip"
   }, /*#__PURE__*/React.createElement("div", {
     onMouseOver: function onMouseOver() {
@@ -209,9 +225,7 @@ var ModalDialog = function ModalDialog(_ref) {
   }, /*#__PURE__*/React.createElement(_SystemIcons.Help, {
     size: "24px",
     color: _styles.COLORS.neutral_600
-  })), tooltipOpen && /*#__PURE__*/React.createElement("span", null, tooltip)), !topImage && /*#__PURE__*/React.createElement(ModalCloseButton, {
-    onClick: closeAction
-  })), /*#__PURE__*/React.createElement(_ModalStyles.ModalBody, {
+  })), tooltipOpen && /*#__PURE__*/React.createElement("span", null, tooltip)), !topImage && ModalCloseButton(closeAction)), /*#__PURE__*/React.createElement(_ModalStyles.ModalBody, {
     size: size
   }, body), /*#__PURE__*/React.createElement(_ModalStyles.ModalFooter, {
     size: size

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Modals/ModalDialog.tsx"],"names":["ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","body","buttons","backButton","closeAction","submitAction","tooltip","React","useState","tooltipOpen","setTooltipOpen","getMinWidth","getMaxWidth","getImageHeight","getPaddingAndMarginBottom","ModalTitle","ComponentTextStyle","Bold","ModalCloseButton","onClick","COLORS","black","ModalBackButton","neutral_600","map","b","action","variant","text"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAqBO,IAAMA,WAAmD,GAAG,SAAtDA,WAAsD,OAY7D;AAAA,MAXJC,IAWI,QAXJA,IAWI;AAAA,MAVJC,WAUI,QAVJA,WAUI;AAAA,MATJC,uBASI,QATJA,uBASI;AAAA,MARJC,KAQI,QARJA,KAQI;AAAA,MAPJC,QAOI,QAPJA,QAOI;AAAA,MANJC,IAMI,QANJA,IAMI;AAAA,MALJC,OAKI,QALJA,OAKI;AAAA,MAJJC,UAII,QAJJA,UAII;AAAA,MAHJC,WAGI,QAHJA,WAGI;AAAA,MAFJC,YAEI,QAFJA,YAEI;AAAA,MADJC,OACI,QADJA,OACI;;AACJ,wBAAsCC,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAAtC;AAAA;AAAA,MAAOC,WAAP;AAAA,MAAoBC,cAApB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,YAAQf,IAAR;AACE,WAAK,OAAL;AACE,eAAO,OAAP;;AACF,WAAK,QAAL;AACE,eAAO,OAAP;;AACF,WAAK,OAAL;AACE,eAAO,OAAP;;AACF;AACE,eAAO,OAAP;AARJ;AAUD,GAXD;;AAaA,MAAMgB,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,YAAQhB,IAAR;AACE,WAAK,OAAL;AACE,eAAO,OAAP;;AACF,WAAK,QAAL;AACE,eAAO,OAAP;;AACF,WAAK,OAAL;AACE,eAAO,OAAP;;AACF;AACE,eAAO,OAAP;AARJ;AAUD,GAXD;;AAaA,MAAMiB,cAAc,GAAG,SAAjBA,cAAiB,GAAM;AAC3B,YAAQjB,IAAR;AACE,WAAK,OAAL;AACE,eAAO,GAAP;;AACF,WAAK,QAAL;AACE,eAAO,GAAP;;AACF,WAAK,OAAL;AACE,eAAO,GAAP;;AACF;AACE,eAAO,GAAP;AARJ;AAUD,GAXD;;AAYA,MAAMkB,yBAAyB,GAAG,SAA5BA,yBAA4B,GAAM;AACtC,YAAQlB,IAAR;AACE,WAAK,OAAL;AACE,eAAO,MAAP;;AACF,WAAK,QAAL;AACE,eAAO,MAAP;;AACF,WAAK,OAAL;AACE,eAAO,MAAP;;AACF;AACE,eAAO,MAAP;AARJ;AAUD,GAXD;;AAaA,MAAMmB,UAAU,GAAG,SAAbA,UAAa,CAAChB,KAAD,EAAgBH,IAAhB,EAAwD;AACzE,YAAQA,IAAR;AACE,WAAK,OAAL;AACE,4BAAO,oBAAC,kBAAD;AAAY,UAAA,SAAS,EAAEoB,2BAAmBC;AAA1C,WAAiDlB,KAAjD,CAAP;;AACF,WAAK,QAAL;AACE,4BAAO,oBAAC,kBAAD;AAAY,UAAA,SAAS,EAAEiB,2BAAmBC;AAA1C,WAAiDlB,KAAjD,CAAP;;AACF,WAAK,OAAL;AACE,4BAAO,oBAAC,mBAAD;AAAa,UAAA,SAAS,EAAEiB,2BAAmBC;AAA3C,WAAkDlB,KAAlD,CAAP;;AACF;AACE,4BAAO,oBAAC,kBAAD;AAAY,UAAA,SAAS,EAAEiB,2BAAmBC;AAA1C,WAAiDlB,KAAjD,CAAP;AARJ;AAUD,GAXD;;AAaA,MAAMmB,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,OAAD,EAAkB;AACzC,wBACE,oBAAC,+BAAD;AAAoB,MAAA,QAAQ,EAAE,CAAC,CAACnB,QAAhC;AAA0C,MAAA,IAAI,EAAEJ;AAAhD,oBACE,oBAAC,kBAAD;AAAY,MAAA,OAAO,EAAC,WAApB;AAAgC,MAAA,KAAK,EAAC,UAAtC;AAAiD,MAAA,MAAM,EAAEuB,OAAzD;AAAkE,MAAA,YAAY,EAAE;AAAhF,oBACE,oBAAC,kBAAD;AAAO,MAAA,IAAI,EAAC,MAAZ;AAAmB,MAAA,KAAK,EAAEC,eAAOC;AAAjC,MADF,CADF,CADF;AAOD,GARD;;AAUA,MAAMC,eAAe,GAAG,SAAlBA,eAAkB,GAAM;AAC5B,QAAInB,UAAJ,EAAgB;AACd,0BACE,oBAAC,8BAAD;AAAmB,QAAA,QAAQ,EAAE,CAAC,CAACH,QAA/B;AAAyC,QAAA,IAAI,EAAEJ;AAA/C,sBACE,oBAAC,kBAAD;AAAY,QAAA,OAAO,EAAC,WAApB;AAAgC,QAAA,KAAK,EAAC,UAAtC;AAAiD,QAAA,MAAM,EAAE;AAAA,iBAAMO,UAAU,EAAhB;AAAA,SAAzD;AAA6E,QAAA,YAAY,EAAE;AAA3F,sBACE,oBAAC,0BAAD;AAAe,QAAA,IAAI,EAAC,MAApB;AAA2B,QAAA,KAAK,EAAEiB,eAAOC;AAAzC,QADF,CADF,CADF;AAOD;AACF,GAVD;;AAYA,sBACE,oBAAC,uBAAD;AACE,IAAA,SAAS,EAAExB,WADb;AAEE,IAAA,UAAU,EAAEC,uBAFd;AAGE,IAAA,QAAQ,EAAEa,WAAW,EAHvB;AAIE,IAAA,QAAQ,EAAEC,WAAW,EAJvB;AAKE,IAAA,WAAW,EAAC,MALd;AAME,IAAA,OAAO,EAAEE,yBAAyB;AANpC,kBAOE,oBAAC,mBAAD,qBACE;AAAM,IAAA,QAAQ,EAAET;AAAhB,KACGL,QAAQ,iBACP,oBAAC,8BAAD;AAAmB,IAAA,IAAI,EAAEJ,IAAzB;AAA+B,IAAA,MAAM,EAAEiB,cAAc,EAArD;AAAyD,IAAA,YAAY,EAAEC,yBAAyB;AAAhG,kBACE;AAAK,IAAA,GAAG,EAAEd,QAAV;AAAoB,IAAA,GAAG,EAAC;AAAxB,IADF,EAEGsB,eAAe,EAFlB,eAGE,oBAAC,gBAAD;AAAkB,IAAA,OAAO,EAAElB;AAA3B,IAHF,CAFJ,eAQE,oBAAC,8BAAD,QACG,CAACJ,QAAD,IAAasB,eAAe,EAD/B,EAEGvB,KAAK,IAAIgB,UAAU,CAAChB,KAAD,EAAQH,IAAR,CAFtB,EAGGU,OAAO,iBACN;AAAK,IAAA,EAAE,EAAC;AAAR,kBACE;AAAK,IAAA,WAAW,EAAE;AAAA,aAAMI,cAAc,CAAC,IAAD,CAApB;AAAA,KAAlB;AAA8C,IAAA,UAAU,EAAE;AAAA,aAAMA,cAAc,CAAC,KAAD,CAApB;AAAA;AAA1D,kBACE,oBAAC,iBAAD;AAAM,IAAA,IAAI,EAAC,MAAX;AAAkB,IAAA,KAAK,EAAEU,eAAOG;AAAhC,IADF,CADF,EAIGd,WAAW,iBAAI,kCAAOH,OAAP,CAJlB,CAJJ,EAWG,CAACN,QAAD,iBAAa,oBAAC,gBAAD;AAAkB,IAAA,OAAO,EAAEI;AAA3B,IAXhB,CARF,eAsBE,oBAAC,sBAAD;AAAW,IAAA,IAAI,EAAER;AAAjB,KAAwBK,IAAxB,CAtBF,eAwBE,oBAAC,wBAAD;AAAa,IAAA,IAAI,EAAEL;AAAnB,kBACE,oBAAC,+BAAD;AAAoB,IAAA,IAAI,EAAEA;AAA1B,KACGM,OADH,aACGA,OADH,uBACGA,OAAO,CAAEsB,GAAT,CAAa,UAACC,CAAD;AAAA,wBACZ,oBAAC,cAAD;AAAQ,MAAA,IAAI,EAAE7B,IAAI,KAAK,OAAT,GAAmB,KAAnB,GAA2BA,IAAI,KAAK,QAAT,GAAoB,QAApB,GAA+BA,IAAxE;AAA8E,MAAA,OAAO,EAAE6B,CAAC,CAACC,MAAzF;AAAiG,MAAA,OAAO,EAAED,CAAC,CAACE;AAA5G,OACGF,CAAC,CAACG,IADL,CADY;AAAA,GAAb,CADH,CADF,CAxBF,CADF,CAPF,CADF;AA8CD,CAnJM;;;;AAbLhC,EAAAA,I,4BAAO,O,EAAU,Q,EAAW,O;AAC5BC,EAAAA,W;AACAC,EAAAA,uB;AACAC,EAAAA,K;AACAC,EAAAA,Q;AACAC,EAAAA,I;AACAC,EAAAA,O;AAXAwB,IAAAA,M;AACAE,IAAAA,I;;AAWAtB,EAAAA,O;AACAH,EAAAA,U;AACAC,EAAAA,W;AACAC,EAAAA,Y;;eAwJaV,W","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":["ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","body","buttons","backButton","closeAction","submitAction","tooltip","React","useState","tooltipOpen","setTooltipOpen","getMinWidth","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","ComponentTextStyle","Bold","ModalCloseButton","onClick","COLORS","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/js/Paginator/Paginator.js

@@ -19,6 +19,8 @@ var _styles = require("../styles");
 
 var _SystemIcons = require("../icons/systemicons/SystemIcons");
 
+var _typography = require("../styles/typography");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -33,7 +35,7 @@ var Container = _styledComponents.default.nav(_templateObject || (_templateObjec
 
 var Items = _styledComponents.default.ul(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n"])));
 
-var Item = _styledComponents.default.li(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 48px;\n  height: 45px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 19px;\n  line-height: 23px;\n  font-weight: 400;\n\n  & > * {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    text-decoration: none;\n    font-family: 'Lato', sans-serif;\n    color: ", ";\n    border-bottom: 3px solid transparent;\n    &:focus,\n    &:focus-within {\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n      outline-width: 0;\n    }\n  }\n  & > a:hover {\n    color: ", ";\n    background-color: ", ";\n    border-bottom: 3px solid transparent;\n    box-shadow: none;\n  }\n  & > a:active {\n    color: ", ";\n    background-color: ", ";\n    border-bottom: 3px solid transparent;\n    box-shadow: none;\n  }\n\n  & > a.active {\n    color: ", ";\n    border-bottom: 3px solid ", ";\n    background-color: ", ";\n    cursor: default;\n    box-shadow: none;\n    &:hover {\n      color: ", ";\n      background-color: ", ";\n      border-bottom: 3px solid ", ";\n    }\n    &:active {\n      color: ", ";\n      background-color: ", ";\n      border-bottom: 3px solid ", ";\n    }\n  }\n"])), _styles.COLORS.neutral_600, _styles.COLORS.primary_800, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_100, _styles.COLORS.neutral_800, _styles.COLORS.primary_500, _styles.COLORS.neutral_20, _styles.COLORS.primary_800, _styles.COLORS.primary_20, _styles.COLORS.primary_500, _styles.COLORS.primary_700, _styles.COLORS.primary_100, _styles.COLORS.primary_500);
+var Item = _styledComponents.default.li(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 48px;\n  height: 45px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  & > * {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    text-decoration: none;\n    border-bottom: 3px solid transparent;\n\n    ", "\n\n    &:focus,\n    &:focus-within {\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n      outline-width: 0;\n    }\n  }\n  & > a:hover {\n    color: ", ";\n    background-color: ", ";\n    border-bottom: 3px solid transparent;\n    box-shadow: none;\n  }\n  & > a:active {\n    color: ", ";\n    background-color: ", ";\n    border-bottom: 3px solid transparent;\n    box-shadow: none;\n  }\n\n  & > a.active {\n    color: ", ";\n    border-bottom: 3px solid ", ";\n    background-color: ", ";\n    cursor: default;\n    box-shadow: none;\n    &:hover {\n      color: ", ";\n      background-color: ", ";\n      border-bottom: 3px solid ", ";\n    }\n    &:active {\n      color: ", ";\n      background-color: ", ";\n      border-bottom: 3px solid ", ";\n    }\n  }\n"])), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), _styles.COLORS.primary_800, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_100, _styles.COLORS.neutral_800, _styles.COLORS.primary_500, _styles.COLORS.neutral_20, _styles.COLORS.primary_800, _styles.COLORS.primary_20, _styles.COLORS.primary_500, _styles.COLORS.primary_700, _styles.COLORS.primary_100, _styles.COLORS.primary_500);
 
 var Dots = (0, _styledComponents.default)(Item)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding-top: 1%;\n  cursor: not-allowed;\n"])));
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Paginator/Paginator.tsx"],"names":["Container","styled","nav","BREAKPOINTS","MEDIUM","Items","ul","Item","li","COLORS","neutral_600","primary_800","primary_20","primary_700","primary_100","neutral_800","primary_500","neutral_20","Dots","Step","up","target","disabled","page","onPageChange","testId","cursor","neutral_300","Paginator","pageCount","currentPage","baseUrl","pages","from","to","i","push","findIndex","item","map"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,SAAS,GAAGC,0BAAOC,GAAV,2KAKXC,oBAAYC,MALD,CAAf;;AAUA,IAAMC,KAAK,GAAGJ,0BAAOK,EAAV,6IAAX;;AAOA,IAAMC,IAAI,GAAGN,0BAAOO,EAAV,4wCAkBGC,eAAOC,WAlBV,EA2BGD,eAAOE,WA3BV,EA4BcF,eAAOG,UA5BrB,EAiCGH,eAAOI,WAjCV,EAkCcJ,eAAOK,WAlCrB,EAwCGL,eAAOM,WAxCV,EAyCqBN,eAAOO,WAzC5B,EA0CcP,eAAOQ,UA1CrB,EA8CKR,eAAOE,WA9CZ,EA+CgBF,eAAOG,UA/CvB,EAgDuBH,eAAOO,WAhD9B,EAmDKP,eAAOI,WAnDZ,EAoDgBJ,eAAOK,WApDvB,EAqDuBL,eAAOO,WArD9B,CAAV;;AA0DA,IAAME,IAAI,GAAG,+BAAOX,IAAP,CAAH,qHAAV;;AAYA,IAAMY,IAAI,GAAG,SAAPA,IAAO,OAcP;AAAA,qBAbJC,EAaI;AAAA,MAbJA,EAaI,wBAbC,IAaD;AAAA,yBAZJC,MAYI;AAAA,MAZJA,MAYI,4BAZK,EAYL;AAAA,2BAXJC,QAWI;AAAA,MAXJA,QAWI,8BAXO,KAWP;AAAA,MAVJC,IAUI,QAVJA,IAUI;AAAA,MATJC,YASI,QATJA,YASI;AAAA,MARJC,MAQI,QARJA,MAQI;AACJ,MAAIH,QAAJ,EACE,oBACE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAE;AAAEI,MAAAA,MAAM,EAAE;AAAV,KAAb;AAAwC,6BAAgBD,MAAhB;AAAxC,KACGL,EAAE,gBAAG,oBAAC,yBAAD;AAAc,IAAA,IAAI,EAAC,IAAnB;AAAwB,IAAA,KAAK,EAAEX,eAAOkB;AAAtC,IAAH,gBAA2D,oBAAC,wBAAD;AAAa,IAAA,IAAI,EAAC,IAAlB;AAAuB,IAAA,KAAK,EAAElB,eAAOkB;AAArC,IADhE,CADF;AAKF,sBACE,oBAAC,IAAD;AAAM,6BAAgBF,MAAhB;AAAN,kBACE,oBAAC,uBAAD;AACE,IAAA,EAAE,EAAEJ,MADN;AAEE,IAAA,OAAO,EAAE,mBAAM;AACb,UAAIG,YAAJ,EAAkBA,YAAY,CAACD,IAAD,CAAZ;AACnB;AAJH,KAKGH,EAAE,gBAAG,oBAAC,yBAAD;AAAc,IAAA,IAAI,EAAC;AAAnB,IAAH,gBAAgC,oBAAC,wBAAD,OALrC,CADF,CADF;AAWD,CAhCD;;AAkCA,IAAMQ,SAAS,GAAG,SAAZA,SAAY,QAAoF;AAAA,8BAAjFC,SAAiF;AAAA,MAAjFA,SAAiF,gCAArE,CAAqE;AAAA,gCAAlEC,WAAkE;AAAA,MAAlEA,WAAkE,kCAApD,CAAoD;AAAA,4BAAjDC,OAAiD;AAAA,MAAjDA,OAAiD,8BAAvC,EAAuC;AAAA,MAAnCP,aAAmC,SAAnCA,YAAmC;AACpG,MAAMQ,KAAK,GAAG,EAAd;AACA,MAAIC,IAAI,GAAG,CAAX;AACA,MAAIC,EAAE,GAAG,CAAT;AACA,MAAIL,SAAS,KAAK,CAAlB,EAAqB,OAAO,IAAP;;AAErB,MAAIA,SAAS,GAAG,CAAhB,EAAmB;AACjB,QAAIC,WAAW,IAAI,CAAf,IAAoBA,WAAW,IAAID,SAAS,GAAG,CAAnD,EAAsD;AACpDI,MAAAA,IAAI,GAAGH,WAAW,GAAG,CAArB;AACAI,MAAAA,EAAE,GAAGJ,WAAW,GAAG,CAAnB;AACD,KAHD,MAGO,IAAID,SAAS,GAAG,CAAZ,GAAgB,CAAhB,IAAqBC,WAAW,GAAGD,SAAS,GAAG,CAAnD,EAAsD;AAC3DI,MAAAA,IAAI,GAAGJ,SAAS,GAAG,CAAnB;AACAK,MAAAA,EAAE,GAAGL,SAAS,GAAG,CAAjB;AACD;;AACD,QAAIK,EAAE,GAAGL,SAAT,EAAoB;AAClBK,MAAAA,EAAE,GAAGL,SAAL;AACD;;AACD,SAAK,IAAIM,CAAC,GAAGF,IAAb,EAAmBE,CAAC,IAAID,EAAxB,EAA4BC,CAAC,IAAI,CAAjC,EAAoC;AAClCH,MAAAA,KAAK,CAACI,IAAN,CAAWD,CAAX;AACD;AACF;;AAED,sBACE,oBAAC,SAAD,qBACE,oBAAC,KAAD,qBACE,oBAAC,IAAD;AACE,IAAA,EAAE,EAAE,KADN;AAEE,IAAA,MAAM,YAAKJ,OAAL,cAAgBD,WAAW,GAAG,CAA9B,CAFR;AAGE,IAAA,IAAI,EAAEA,WAAW,GAAG,CAHtB;AAIE,IAAA,QAAQ,EAAEA,WAAW,KAAK,CAJ5B;AAKE,IAAA,YAAY,EAAE,wBAAM;AAClB,UAAIN,aAAJ,EAAkBA,aAAY,CAACM,WAAW,GAAG,CAAf,CAAZ;AACnB,KAPH;AAQE,IAAA,MAAM,EAAC;AART,IADF,EAWGE,KAAK,CAACK,SAAN,CAAgB,UAAAC,IAAI;AAAA,WAAIA,IAAI,KAAK,CAAb;AAAA,GAApB,MAAwC,CAAC,CAAzC,iBACC,oBAAC,IAAD,qBACE,oBAAC,uBAAD;AACE,IAAA,EAAE,YAAKP,OAAL,OADJ;AAEE,IAAA,OAAO,EAAE,mBAAM;AACb,UAAIP,aAAJ,EAAkBA,aAAY,CAAC,CAAD,CAAZ;AACnB;AAJH,SADF,CAZJ,EAsBGM,WAAW,IAAI,CAAf,IAAoBD,SAAS,GAAG,CAAhC,IAAqCA,SAArC,IAAkDG,KAAK,CAACK,SAAN,CAAgB,UAAAC,IAAI;AAAA,WAAIA,IAAI,KAAK,CAAb;AAAA,GAApB,MAAwC,CAAC,CAA3F,iBACC,oBAAC,IAAD,qBACE,oBAAC,2BAAD;AAAgB,IAAA,KAAK,EAAE7B,eAAOC;AAA9B,IADF,CAvBJ,EA2BGsB,KAAK,CAACO,GAAN,CAAU,UAAAhB,IAAI;AAAA,wBACb,oBAAC,IAAD;AAAM,MAAA,GAAG,EAAEA;AAAX,oBACE,oBAAC,uBAAD;AACE,MAAA,EAAE,YAAKQ,OAAL,cAAgBR,IAAhB,CADJ;AAEE,MAAA,OAAO,EAAE,mBAAM;AACb,YAAIC,aAAJ,EAAkBA,aAAY,CAACD,IAAD,CAAZ;AACnB;AAJH,OAKGA,IALH,CADF,CADa;AAAA,GAAd,CA3BH,EAsCGM,SAAS,GAAG,CAAZ,IAAiBC,WAAW,IAAID,SAAS,GAAG,CAA5C,iBACC,oBAAC,IAAD,qBACE,oBAAC,2BAAD;AAAgB,IAAA,KAAK,EAAEpB,eAAOC;AAA9B,IADF,CAvCJ,EA2CGsB,KAAK,CAACK,SAAN,CAAgB,UAAAC,IAAI;AAAA,WAAIA,IAAI,KAAKT,SAAb;AAAA,GAApB,MAAgD,CAAC,CAAjD,IAAsDA,SAAS,KAAK,CAApE,iBACC,oBAAC,IAAD,qBACE,oBAAC,uBAAD;AACE,IAAA,EAAE,YAAKE,OAAL,cAAgBF,SAAhB,CADJ;AAEE,IAAA,OAAO,EAAE,mBAAM;AACb,UAAIL,aAAJ,EAAkBA,aAAY,CAACK,SAAD,CAAZ;AACnB;AAJH,KAKGA,SALH,CADF,CA5CJ,eAsDE,oBAAC,IAAD;AACE,IAAA,EAAE,MADJ;AAEE,IAAA,MAAM,YAAKE,OAAL,cAAgBD,WAAW,GAAG,CAA9B,CAFR;AAGE,IAAA,IAAI,EAAEA,WAAW,GAAG,CAHtB;AAIE,IAAA,QAAQ,EAAEA,WAAW,KAAKD,SAJ5B;AAKE,IAAA,YAAY,EAAE,wBAAM;AAClB,UAAIL,aAAJ,EAAkBA,aAAY,CAACM,WAAW,GAAG,CAAf,CAAZ;AACnB,KAPH;AAQE,IAAA,MAAM,EAAC;AART,IAtDF,CADF,CADF;AAqED,CA3FD;;;AAxCED,EAAAA,S;AACAC,EAAAA,W;AACAC,EAAAA,O;AACAP,EAAAA,Y;;eAkIaI,S","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { NavLink } from 'react-router-dom';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { ChevronLeft, ChevronRight, MoreHorizontal } from '../icons/systemicons/SystemIcons';\n\nconst Container = styled.nav`\n  margin: 20px 0;\n  display: flex;\n  justify-content: center;\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 75%;\n  }\n`;\n\nconst Items = styled.ul`\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n`;\n\nconst Item = styled.li`\n  width: 48px;\n  height: 45px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 19px;\n  line-height: 23px;\n  font-weight: 400;\n\n  & > * {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    text-decoration: none;\n    font-family: 'Lato', sans-serif;\n    color: ${COLORS.neutral_600};\n    border-bottom: 3px solid transparent;\n    &:focus,\n    &:focus-within {\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n      outline-width: 0;\n    }\n  }\n  & > a:hover {\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_20};\n    border-bottom: 3px solid transparent;\n    box-shadow: none;\n  }\n  & > a:active {\n    color: ${COLORS.primary_700};\n    background-color: ${COLORS.primary_100};\n    border-bottom: 3px solid transparent;\n    box-shadow: none;\n  }\n\n  & > a.active {\n    color: ${COLORS.neutral_800};\n    border-bottom: 3px solid ${COLORS.primary_500};\n    background-color: ${COLORS.neutral_20};\n    cursor: default;\n    box-shadow: none;\n    &:hover {\n      color: ${COLORS.primary_800};\n      background-color: ${COLORS.primary_20};\n      border-bottom: 3px solid ${COLORS.primary_500};\n    }\n    &:active {\n      color: ${COLORS.primary_700};\n      background-color: ${COLORS.primary_100};\n      border-bottom: 3px solid ${COLORS.primary_500};\n    }\n  }\n`;\n\nconst Dots = styled(Item)`\n  padding-top: 1%;\n  cursor: not-allowed;\n`;\n\ntype PaginatorProps = {\n  pageCount: number;\n  currentPage: number;\n  baseUrl: string;\n  onPageChange?: (page: number) => void;\n};\n\nconst Step = ({\n  up = true,\n  target = '',\n  disabled = false,\n  page,\n  onPageChange,\n  testId,\n}: {\n  up: boolean;\n  target: string;\n  disabled: boolean;\n  page: number;\n  onPageChange?: (page: number) => void;\n  testId?: string;\n}) => {\n  if (disabled)\n    return (\n      <Item style={{ cursor: 'not-allowed' }} data-testid={`${testId}_Disabled`}>\n        {up ? <ChevronRight size=\"20\" color={COLORS.neutral_300} /> : <ChevronLeft size=\"20\" color={COLORS.neutral_300} />}\n      </Item>\n    );\n  return (\n    <Item data-testid={`${testId}_Enabled`}>\n      <NavLink\n        to={target}\n        onClick={() => {\n          if (onPageChange) onPageChange(page);\n        }}>\n        {up ? <ChevronRight size=\"20\" /> : <ChevronLeft />}\n      </NavLink>\n    </Item>\n  );\n};\n\nconst Paginator = ({ pageCount = 1, currentPage = 1, baseUrl = '', onPageChange }: PaginatorProps) => {\n  const pages = [];\n  let from = 2;\n  let to = 4;\n  if (pageCount === 0) return null;\n\n  if (pageCount > 1) {\n    if (currentPage >= 4 && currentPage <= pageCount - 2) {\n      from = currentPage - 1;\n      to = currentPage + 1;\n    } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {\n      from = pageCount - 3;\n      to = pageCount - 1;\n    }\n    if (to > pageCount) {\n      to = pageCount;\n    }\n    for (let i = from; i <= to; i += 1) {\n      pages.push(i);\n    }\n  }\n\n  return (\n    <Container>\n      <Items>\n        <Step\n          up={false}\n          target={`${baseUrl}/${currentPage - 1}`}\n          page={currentPage - 1}\n          disabled={currentPage === 1}\n          onPageChange={() => {\n            if (onPageChange) onPageChange(currentPage - 1);\n          }}\n          testId=\"Test-StepLeft\"\n        />\n        {pages.findIndex(item => item === 1) === -1 && (\n          <Item>\n            <NavLink\n              to={`${baseUrl}/1`}\n              onClick={() => {\n                if (onPageChange) onPageChange(1);\n              }}>\n              1\n            </NavLink>\n          </Item>\n        )}\n        {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\n          <Dots>\n            <MoreHorizontal color={COLORS.neutral_600} />\n          </Dots>\n        )}\n        {pages.map(page => (\n          <Item key={page}>\n            <NavLink\n              to={`${baseUrl}/${page}`}\n              onClick={() => {\n                if (onPageChange) onPageChange(page);\n              }}>\n              {page}\n            </NavLink>\n          </Item>\n        ))}\n        {pageCount > 5 && currentPage <= pageCount - 3 && (\n          <Dots>\n            <MoreHorizontal color={COLORS.neutral_600} />\n          </Dots>\n        )}\n        {pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && (\n          <Item>\n            <NavLink\n              to={`${baseUrl}/${pageCount}`}\n              onClick={() => {\n                if (onPageChange) onPageChange(pageCount);\n              }}>\n              {pageCount}\n            </NavLink>\n          </Item>\n        )}\n        <Step\n          up\n          target={`${baseUrl}/${currentPage + 1}`}\n          page={currentPage + 1}\n          disabled={currentPage === pageCount}\n          onPageChange={() => {\n            if (onPageChange) onPageChange(currentPage + 1);\n          }}\n          testId=\"Test-StepRight\"\n        />\n      </Items>\n    </Container>\n  );\n};\n\nexport default Paginator;\n"],"file":"Paginator.js"}
+{"version":3,"sources":["../../../src/Paginator/Paginator.tsx"],"names":["Container","styled","nav","BREAKPOINTS","MEDIUM","Items","ul","Item","li","ComponentTextStyle","Regular","COLORS","neutral_600","primary_800","primary_20","primary_700","primary_100","neutral_800","primary_500","neutral_20","Dots","Step","up","target","disabled","page","onPageChange","testId","cursor","neutral_300","Paginator","pageCount","currentPage","baseUrl","pages","from","to","i","push","findIndex","item","map"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ChevronLeft, ChevronRight, MoreHorizontal} from '../icons/systemicons/SystemIcons';\nimport {ComponentMStyling} from '../styles/typography';\n\nconst Container = styled.nav`\n  margin: 20px 0;\n  display: flex;\n  justify-content: center;\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 75%;\n  }\n`;\n\nconst Items = styled.ul`\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n`;\n\nconst Item = styled.li`\n  width: 48px;\n  height: 45px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  & > * {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    text-decoration: none;\n    border-bottom: 3px solid transparent;\n\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n    &:focus,\n    &:focus-within {\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n      outline-width: 0;\n    }\n  }\n  & > a:hover {\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_20};\n    border-bottom: 3px solid transparent;\n    box-shadow: none;\n  }\n  & > a:active {\n    color: ${COLORS.primary_700};\n    background-color: ${COLORS.primary_100};\n    border-bottom: 3px solid transparent;\n    box-shadow: none;\n  }\n\n  & > a.active {\n    color: ${COLORS.neutral_800};\n    border-bottom: 3px solid ${COLORS.primary_500};\n    background-color: ${COLORS.neutral_20};\n    cursor: default;\n    box-shadow: none;\n    &:hover {\n      color: ${COLORS.primary_800};\n      background-color: ${COLORS.primary_20};\n      border-bottom: 3px solid ${COLORS.primary_500};\n    }\n    &:active {\n      color: ${COLORS.primary_700};\n      background-color: ${COLORS.primary_100};\n      border-bottom: 3px solid ${COLORS.primary_500};\n    }\n  }\n`;\n\nconst Dots = styled(Item)`\n  padding-top: 1%;\n  cursor: not-allowed;\n`;\n\ntype PaginatorProps = {\n  pageCount: number;\n  currentPage: number;\n  baseUrl: string;\n  onPageChange?: (page: number) => void;\n};\n\nconst Step = ({\n  up = true,\n  target = '',\n  disabled = false,\n  page,\n  onPageChange,\n  testId,\n}: {\n  up: boolean;\n  target: string;\n  disabled: boolean;\n  page: number;\n  onPageChange?: (page: number) => void;\n  testId?: string;\n}) => {\n  if (disabled)\n    return (\n      <Item style={{ cursor: 'not-allowed' }} data-testid={`${testId}_Disabled`}>\n        {up ? <ChevronRight size=\"20\" color={COLORS.neutral_300} /> : <ChevronLeft size=\"20\" color={COLORS.neutral_300} />}\n      </Item>\n    );\n  return (\n    <Item data-testid={`${testId}_Enabled`}>\n      <NavLink\n        to={target}\n        onClick={() => {\n          if (onPageChange) onPageChange(page);\n        }}>\n        {up ? <ChevronRight size=\"20\" /> : <ChevronLeft />}\n      </NavLink>\n    </Item>\n  );\n};\n\nconst Paginator = ({ pageCount = 1, currentPage = 1, baseUrl = '', onPageChange }: PaginatorProps) => {\n  const pages = [];\n  let from = 2;\n  let to = 4;\n  if (pageCount === 0) return null;\n\n  if (pageCount > 1) {\n    if (currentPage >= 4 && currentPage <= pageCount - 2) {\n      from = currentPage - 1;\n      to = currentPage + 1;\n    } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {\n      from = pageCount - 3;\n      to = pageCount - 1;\n    }\n    if (to > pageCount) {\n      to = pageCount;\n    }\n    for (let i = from; i <= to; i += 1) {\n      pages.push(i);\n    }\n  }\n\n  return (\n    <Container>\n      <Items>\n        <Step\n          up={false}\n          target={`${baseUrl}/${currentPage - 1}`}\n          page={currentPage - 1}\n          disabled={currentPage === 1}\n          onPageChange={() => {\n            if (onPageChange) onPageChange(currentPage - 1);\n          }}\n          testId=\"Test-StepLeft\"\n        />\n        {pages.findIndex(item => item === 1) === -1 && (\n          <Item>\n            <NavLink\n              to={`${baseUrl}/1`}\n              onClick={() => {\n                if (onPageChange) onPageChange(1);\n              }}>\n              1\n            </NavLink>\n          </Item>\n        )}\n        {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\n          <Dots>\n            <MoreHorizontal color={COLORS.neutral_600} />\n          </Dots>\n        )}\n        {pages.map(page => (\n          <Item key={page}>\n            <NavLink\n              to={`${baseUrl}/${page}`}\n              onClick={() => {\n                if (onPageChange) onPageChange(page);\n              }}>\n              {page}\n            </NavLink>\n          </Item>\n        ))}\n        {pageCount > 5 && currentPage <= pageCount - 3 && (\n          <Dots>\n            <MoreHorizontal color={COLORS.neutral_600} />\n          </Dots>\n        )}\n        {pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && (\n          <Item>\n            <NavLink\n              to={`${baseUrl}/${pageCount}`}\n              onClick={() => {\n                if (onPageChange) onPageChange(pageCount);\n              }}>\n              {pageCount}\n            </NavLink>\n          </Item>\n        )}\n        <Step\n          up\n          target={`${baseUrl}/${currentPage + 1}`}\n          page={currentPage + 1}\n          disabled={currentPage === pageCount}\n          onPageChange={() => {\n            if (onPageChange) onPageChange(currentPage + 1);\n          }}\n          testId=\"Test-StepRight\"\n        />\n      </Items>\n    </Container>\n  );\n};\n\nexport default Paginator;\n"],"file":"Paginator.js"}

package/dist/js/SkipToContent/SkipToContent.js

@@ -13,6 +13,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _styles = require("../styles");
 
+var _typography = require("../styles/typography");
+
 var _templateObject, _templateObject2;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -23,7 +25,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var SkipToContentLink = _styledComponents.default.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  font-weight: bold;\n  font-size: 16px;\n  font-family: ", ";\n  text-decoration: underline;\n"])), _styles.COLORS.black, _styles.TYPOGRAPHY.fontFamily);
+var SkipToContentLink = _styledComponents.default.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  \n  text-decoration: underline;\n"])), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.black));
 
 var SkipToContentWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  text-decoration: none;\n  z-index: -1000;\n  height: 0px;\n  overflow-x: hidden;\n\n  &:focus-within {\n    height: auto;\n    padding: 16px;\n    z-index: 100000;\n\n    background: ", ";\n  }\n\n  @media print {\n    display: none;\n  }\n"])), _styles.COLORS.accent2_200);
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/SkipToContent/SkipToContent.tsx"],"names":["SkipToContentLink","styled","a","COLORS","black","TYPOGRAPHY","fontFamily","SkipToContentWrapper","div","accent2_200","SkipToContent","children"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;;;;;;;;;;;AAIA,IAAMA,iBAAiB,GAAGC,0BAAOC,CAAV,uLACZC,eAAOC,KADK,EAINC,mBAAWC,UAJL,CAAvB;;AAQA,IAAMC,oBAAoB,GAAGN,0BAAOO,GAAV,4TAWRL,eAAOM,WAXC,CAA1B;;AAmBA,IAAMC,aAA0D,GAAG,SAA7DA,aAA6D,OAAkB;AAAA,MAAfC,QAAe,QAAfA,QAAe;AACnF,sBACE,oBAAC,oBAAD,qBACE,oBAAC,iBAAD;AAAmB,IAAA,IAAI,EAAC;AAAxB,KAAiCA,QAAjC,CADF,CADF;AAKD,CAND;;eAQeD,a","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { COLORS, TYPOGRAPHY } from '../styles';\n\ntype SkipToContentProps = {};\n\nconst SkipToContentLink = styled.a`\n  color: ${COLORS.black};\n  font-weight: bold;\n  font-size: 16px;\n  font-family: ${TYPOGRAPHY.fontFamily};\n  text-decoration: underline;\n`;\n\nconst SkipToContentWrapper = styled.div`\n  text-decoration: none;\n  z-index: -1000;\n  height: 0px;\n  overflow-x: hidden;\n\n  &:focus-within {\n    height: auto;\n    padding: 16px;\n    z-index: 100000;\n\n    background: ${COLORS.accent2_200};\n  }\n\n  @media print {\n    display: none;\n  }\n`;\n\nconst SkipToContent: React.FunctionComponent<SkipToContentProps> = ({ children }) => {\n  return (\n    <SkipToContentWrapper>\n      <SkipToContentLink href=\"#main\">{children}</SkipToContentLink>\n    </SkipToContentWrapper>\n  );\n};\n\nexport default SkipToContent;\n"],"file":"SkipToContent.js"}
+{"version":3,"sources":["../../../src/SkipToContent/SkipToContent.tsx"],"names":["SkipToContentLink","styled","a","ComponentTextStyle","Bold","COLORS","black","SkipToContentWrapper","div","accent2_200","SkipToContent","children"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;;;;;;;AAIA,IAAMA,iBAAiB,GAAGC,0BAAOC,CAAV,mHACnB,mCAAkBC,2BAAmBC,IAArC,EAA2CC,eAAOC,KAAlD,CADmB,CAAvB;;AAMA,IAAMC,oBAAoB,GAAGN,0BAAOO,GAAV,4TAWRH,eAAOI,WAXC,CAA1B;;AAmBA,IAAMC,aAA0D,GAAG,SAA7DA,aAA6D,OAAkB;AAAA,MAAfC,QAAe,QAAfA,QAAe;AACnF,sBACE,oBAAC,oBAAD,qBACE,oBAAC,iBAAD;AAAmB,IAAA,IAAI,EAAC;AAAxB,KAAiCA,QAAjC,CADF,CADF;AAKD,CAND;;eAQeD,a","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {COLORS, ComponentTextStyle, TYPOGRAPHY} from '../styles';\nimport {ComponentSStyling} from '../styles/typography';\n\ntype SkipToContentProps = {};\n\nconst SkipToContentLink = styled.a`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.black)}\n  \n  text-decoration: underline;\n`;\n\nconst SkipToContentWrapper = styled.div`\n  text-decoration: none;\n  z-index: -1000;\n  height: 0px;\n  overflow-x: hidden;\n\n  &:focus-within {\n    height: auto;\n    padding: 16px;\n    z-index: 100000;\n\n    background: ${COLORS.accent2_200};\n  }\n\n  @media print {\n    display: none;\n  }\n`;\n\nconst SkipToContent: React.FunctionComponent<SkipToContentProps> = ({ children }) => {\n  return (\n    <SkipToContentWrapper>\n      <SkipToContentLink href=\"#main\">{children}</SkipToContentLink>\n    </SkipToContentWrapper>\n  );\n};\n\nexport default SkipToContent;\n"],"file":"SkipToContent.js"}

package/dist/js/Switcher/MobileSwitcherMenu.js

@@ -23,6 +23,8 @@ var _CommonStyles = require("../GlobalNavigationBar/mobile/CommonStyles");
 
 var _SwitcherMenuItem = _interopRequireDefault(require("./SwitcherMenuItem"));
 
+var _typography = require("../styles/typography");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -39,7 +41,7 @@ var MenuSection = _styledComponents.default.li(_templateObject2 || (_templateObj
 
 var MenuSectionList = _styledComponents.default.ul(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  list-style: none;\n  margin: 0;\n  overflow-y: unset !important;\n  padding-inline-start: 0;\n\n  ", "\n"])), _CommonStyles.UserMenuSectionListStyling);
 
-var Top = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 22px 12px 0 12px;\n  color: ", ";\n\n  h3 {\n    margin-block-start: 0 !important;\n    margin-block-end: 0 !important;\n    margin-inline-start: 0px;\n    margin-inline-end: 0px;\n    font-weight: normal;\n    font-size: 16px;\n    color: inherit;\n    margin-left: 24px;\n  }\n"])), _styles.COLORS.neutral_600);
+var Top = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 22px 12px 0 12px;\n  color: ", ";\n\n  h3 {\n    margin-block-start: 0 !important;\n    margin-block-end: 0 !important;\n    margin-inline-start: 0px;\n    margin-inline-end: 0px;\n    margin-left: 24px;\n\n    ", "\n  }\n"])), _styles.COLORS.neutral_600, (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, 'inherit'));
 
 var LabelLine = _styledComponents.default.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  height: 32px;\n  background-color: ", ";\n  padding-left: 24px;\n  display: flex;\n  line-height: 32px;\n"])), _styles.COLORS.neutral_20);
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Switcher/MobileSwitcherMenu.tsx"],"names":["Menu","styled","ul","COLORS","white","flowDown","BREAKPOINTS","SMALL","scrollBarStyling","MenuSection","li","MenuSectionList","UserMenuSectionListStyling","Top","div","neutral_600","LabelLine","span","neutral_20","MobileSwitcherMenu","header","elementsHeader","clickMenuAction","elements","React","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","length","map","element","to","label","icon"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAGA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,IAAI,GAAGC,0BAAOC,EAAV,+gBAGYC,eAAOC,KAHnB,EAMaC,sBANb,EAOKA,sBAPL,EAeNC,oBAAYC,KAfN,EAwBNC,wBAxBM,CAAV;;AA2BA,IAAMC,WAAW,GAAGR,0BAAOS,EAAV,uNAAjB;;AAWA,IAAMC,eAAe,GAAGV,0BAAOC,EAAV,oLAMjBU,wCANiB,CAArB;;AASA,IAAMC,GAAG,GAAGZ,0BAAOa,GAAV,8aAKEX,eAAOY,WALT,CAAT;;AAmBA,IAAMC,SAAS,GAAGf,0BAAOgB,IAAV,qLAEOd,eAAOe,UAFd,CAAf;;AAeA,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,OAAkE;AAAA,MAA/DC,MAA+D,QAA/DA,MAA+D;AAAA,MAAvDC,cAAuD,QAAvDA,cAAuD;AAAA,MAAvCC,eAAuC,QAAvCA,eAAuC;AAAA,MAAtBC,QAAsB,QAAtBA,QAAsB;AAC3FC,EAAAA,KAAK,CAACC,SAAN,CAAgB,YAAM;AACpB,aAASC,cAAT,CAAwBC,CAAxB,EAAgC;AAC9B,UAAIA,CAAC,CAACC,OAAF,KAAc,EAAlB,EAAsB;AACpBN,QAAAA,eAAe;AAChB;AACF;;AAEDO,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,SAA1B,EAAqCJ,cAArC,EAAqD,KAArD;AACA,WAAO,YAAM;AACXG,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,SAA7B,EAAwCL,cAAxC,EAAwD,KAAxD;AACD,KAFD;AAGD,GAXD,EAWG,CAACJ,eAAD,CAXH;AAaA,sBACE,oBAAC,IAAD;AAAM,IAAA,OAAO,EAAE,mBAAM,CAAE,CAAvB;AAAyB,IAAA,IAAI,EAAC,MAA9B;AAAqC,uBAAgB;AAArD,kBACE,oBAAC,GAAD,qBACE,oBAAC,kBAAD;AAAY,IAAA,OAAO,EAAC,WAApB;AAAgC,IAAA,KAAK,EAAC,UAAtC;AAAiD,IAAA,MAAM,EAAEA,eAAzD;AAA0E,IAAA,cAAc,EAAE;AAA1F,kBACE,oBAAC,0BAAD;AAAe,IAAA,IAAI,EAAC,MAApB;AAA2B,IAAA,KAAK,EAAEnB,eAAOY;AAAzC,IADF,CADF,eAIE,gCAAKK,MAAL,CAJF,eAKE,oBAAC,mBAAD,qBACE,oBAAC,kBAAD;AAAY,IAAA,OAAO,EAAC,WAApB;AAAgC,IAAA,KAAK,EAAC,UAAtC;AAAiD,IAAA,MAAM,EAAEE,eAAzD;AAA0E,IAAA,cAAc,EAAE;AAA1F,kBACE,oBAAC,kBAAD;AAAO,IAAA,IAAI,EAAC;AAAZ,IADF,CADF,CALF,CADF,EAYGC,QAAQ,IAAI,CAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAES,MAAV,IAAmB,CAA/B,iBACC,oBAAC,WAAD,qBACE,oBAAC,SAAD,QAAYX,cAAZ,CADF,eAEE,oBAAC,eAAD,QACGE,QADH,aACGA,QADH,uBACGA,QAAQ,CAAEU,GAAV,CAAc,UAACC,OAAD;AAAA,wBACb,oBAAC,yBAAD;AAAkB,MAAA,GAAG,EAAEA,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEC,EAAhC;AAAoC,MAAA,KAAK,EAAED,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEE,KAApD;AAA2D,MAAA,IAAI,EAAEF,OAAO,CAACG;AAAzE,MADa;AAAA,GAAd,CADH,CAFF,CAbJ,CADF;AAyBD,CAvCD;;;AANEjB,EAAAA,M;AACAC,EAAAA,c;AACAC,EAAAA,e;AACAC,EAAAA,Q;;eA4CaJ,kB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS, scrollBarStyling } from '../styles';\n\nimport { UserMenuItem } from '../types';\nimport { IconButton } from '../Button';\nimport { ArrowLineLeft, Close } from '../icons/systemicons/SystemIcons';\nimport { flowDown, Right, UserMenuSectionListStyling } from '../GlobalNavigationBar/mobile/CommonStyles';\nimport SwitcherMenuItem from './SwitcherMenuItem';\n\nconst Menu = styled.ul`\n  list-style: none;\n  margin: 0;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\n  animation: ${flowDown} 0.2s ease-in-out;\n  position: absolute;\n  border-radius: 4px;\n  z-index: 100;\n  height: 100%;\n  width: 320px;\n  padding-inline-start: 0;\n  overflow-y: scroll;\n  ${BREAKPOINTS.SMALL} {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: flex;\n    flex-direction: column;\n  }\n\n  ${scrollBarStyling};\n`;\n\nconst MenuSection = styled.li`\n  padding: 8px 0;\n  position: relative;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n`;\n\nconst MenuSectionList = styled.ul`\n  list-style: none;\n  margin: 0;\n  overflow-y: unset !important;\n  padding-inline-start: 0;\n\n  ${UserMenuSectionListStyling}\n`;\n\nconst Top = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 22px 12px 0 12px;\n  color: ${COLORS.neutral_600};\n\n  h3 {\n    margin-block-start: 0 !important;\n    margin-block-end: 0 !important;\n    margin-inline-start: 0px;\n    margin-inline-end: 0px;\n    font-weight: normal;\n    font-size: 16px;\n    color: inherit;\n    margin-left: 24px;\n  }\n`;\n\nconst LabelLine = styled.span`\n  height: 32px;\n  background-color: ${COLORS.neutral_20};\n  padding-left: 24px;\n  display: flex;\n  line-height: 32px;\n`;\n\ninterface Props {\n  header: string;\n  elementsHeader: string;\n  clickMenuAction: () => void;\n  elements?: UserMenuItem[];\n}\n\nconst MobileSwitcherMenu = ({ header, elementsHeader, clickMenuAction, elements }: Props) => {\n  React.useEffect(() => {\n    function handleKeyPress(e: any) {\n      if (e.keyCode === 27) {\n        clickMenuAction();\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyPress, false);\n    return () => {\n      document.removeEventListener('keydown', handleKeyPress, false);\n    };\n  }, [clickMenuAction]);\n\n  return (\n    <Menu onClick={() => {}} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n      <Top>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n          <ArrowLineLeft size=\"24px\" color={COLORS.neutral_600} />\n        </IconButton>\n        <h3>{header}</h3>\n        <Right>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n            <Close size=\"24px\" />\n          </IconButton>\n        </Right>\n      </Top>\n      {elements && elements?.length > 0 && (\n        <MenuSection>\n          <LabelLine>{elementsHeader}</LabelLine>\n          <MenuSectionList>\n            {elements?.map((element) => (\n              <SwitcherMenuItem url={element?.to} label={element?.label} Icon={element.icon} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n    </Menu>\n  );\n};\n\nexport default MobileSwitcherMenu;\n"],"file":"MobileSwitcherMenu.js"}
+{"version":3,"sources":["../../../src/Switcher/MobileSwitcherMenu.tsx"],"names":["Menu","styled","ul","COLORS","white","flowDown","BREAKPOINTS","SMALL","scrollBarStyling","MenuSection","li","MenuSectionList","UserMenuSectionListStyling","Top","div","neutral_600","ComponentTextStyle","Regular","LabelLine","span","neutral_20","MobileSwitcherMenu","header","elementsHeader","clickMenuAction","elements","React","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","length","map","element","to","label","icon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, scrollBarStyling} from '../styles';\n\nimport {UserMenuItem} from '../types';\nimport {IconButton} from '../Button';\nimport {ArrowLineLeft, Close} from '../icons/systemicons/SystemIcons';\nimport {flowDown, Right, UserMenuSectionListStyling} from '../GlobalNavigationBar/mobile/CommonStyles';\nimport SwitcherMenuItem from './SwitcherMenuItem';\nimport {ComponentSStyling} from '../styles/typography';\n\nconst Menu = styled.ul`\n  list-style: none;\n  margin: 0;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\n  animation: ${flowDown} 0.2s ease-in-out;\n  position: absolute;\n  border-radius: 4px;\n  z-index: 100;\n  height: 100%;\n  width: 320px;\n  padding-inline-start: 0;\n  overflow-y: scroll;\n  ${BREAKPOINTS.SMALL} {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: flex;\n    flex-direction: column;\n  }\n\n  ${scrollBarStyling};\n`;\n\nconst MenuSection = styled.li`\n  padding: 8px 0;\n  position: relative;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n`;\n\nconst MenuSectionList = styled.ul`\n  list-style: none;\n  margin: 0;\n  overflow-y: unset !important;\n  padding-inline-start: 0;\n\n  ${UserMenuSectionListStyling}\n`;\n\nconst Top = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 22px 12px 0 12px;\n  color: ${COLORS.neutral_600};\n\n  h3 {\n    margin-block-start: 0 !important;\n    margin-block-end: 0 !important;\n    margin-inline-start: 0px;\n    margin-inline-end: 0px;\n    margin-left: 24px;\n\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n  }\n`;\n\nconst LabelLine = styled.span`\n  height: 32px;\n  background-color: ${COLORS.neutral_20};\n  padding-left: 24px;\n  display: flex;\n  line-height: 32px;\n`;\n\ninterface Props {\n  header: string;\n  elementsHeader: string;\n  clickMenuAction: () => void;\n  elements?: UserMenuItem[];\n}\n\nconst MobileSwitcherMenu = ({ header, elementsHeader, clickMenuAction, elements }: Props) => {\n  React.useEffect(() => {\n    function handleKeyPress(e: any) {\n      if (e.keyCode === 27) {\n        clickMenuAction();\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyPress, false);\n    return () => {\n      document.removeEventListener('keydown', handleKeyPress, false);\n    };\n  }, [clickMenuAction]);\n\n  return (\n    <Menu onClick={() => {}} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n      <Top>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n          <ArrowLineLeft size=\"24px\" color={COLORS.neutral_600} />\n        </IconButton>\n        <h3>{header}</h3>\n        <Right>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n            <Close size=\"24px\" />\n          </IconButton>\n        </Right>\n      </Top>\n      {elements && elements?.length > 0 && (\n        <MenuSection>\n          <LabelLine>{elementsHeader}</LabelLine>\n          <MenuSectionList>\n            {elements?.map((element) => (\n              <SwitcherMenuItem url={element?.to} label={element?.label} Icon={element.icon} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n    </Menu>\n  );\n};\n\nexport default MobileSwitcherMenu;\n"],"file":"MobileSwitcherMenu.js"}