npm - @laerdal/life-react-components - Versions diffs - 1.0.1-dev.19.full → 1.0.1-dev.22.full - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (198) hide show

package/dist/esm/Dropdown/CommonStyling.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/Dropdown/CommonStyling.tsx"],"names":["styled","css","CommonInteractionStyling","BREAKPOINTS","COLORS","ComponentMStyling","ComponentTextStyle","ComponentXXSStyling","Dropdown","div","props","isButton","locked","disabled","margin","primary_600","primary_800","lockedState","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","warning_400","placeholderStyling","Italic","StyledField","MEDIUM","primary_200","primary_300","neutral_800","neutral_20","showValidationMessage","isPlaceholder","ButtonDropdownContentStyling","DropdownContent","neutral_200","neutral_400","DropdownButton","button","primary_500","primary_20","primary_100","ButtonDropdownWrapper","primary_700"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAASC,wBAAT,QAAyC,WAAzC;AACA,SAASC,WAAT,EAAsBC,MAAtB,QAAoC,WAApC;AACA,SAASC,iBAAT,EAA4BC,kBAA5B,EAAgDC,mBAAhD,QAA2E,sBAA3E;AAEA,OAAO,MAAMC,QAAQ,GAAGR,MAAM,CAACS,GAAkF;AACjH;AACA;AACA,IAAKC,KAAD,IAAW,CAACA,KAAK,CAACC,QAAP,IAAmB,gCAAiC;AACnE,IAAKD,KAAD,IAAYA,KAAK,CAACE,MAAN,IAAgBF,KAAK,CAACG,QAAtB,GAAiC,sBAAjC,GAA0D,EAAI;AAC9E,IAAKH,KAAD,IAAYA,KAAK,CAACI,MAAN,GAAgB,WAAUJ,KAAK,CAACI,MAAO,GAAvC,GAA4C,EAAI;AAChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaV,MAAM,CAACW,WAAY;AAChC;AACA;AACA;AACA,aAAaX,MAAM,CAACY,WAAY;AAChC;AACA,CA9BO;AAgCP,MAAMC,WAAW,GAAGhB,GAAI;AACxB,sBAAsBG,MAAM,CAACc,WAAY;AACzC,sCAAsCd,MAAM,CAACe,WAAY;AACzD,WAAWf,MAAM,CAACgB,WAAY;AAC9B;AACA;AACA;AACA,aAAahB,MAAM,CAACgB,WAAY;AAChC;AACA,CATA;AAWA,MAAMC,aAAa,GAAGpB,GAAI;AAC1B,sBAAsBG,MAAM,CAACkB,KAAM;AACnC,sCAAsClB,MAAM,CAACc,WAAY;AACzD,WAAWd,MAAM,CAACe,WAAY;AAC9B;AACA;AACA;AACA,aAAaf,MAAM,CAACe,WAAY;AAChC;AACA;AACA,aAAaf,MAAM,CAACe,WAAY;AAChC;AACA,eAAef,MAAM,CAACe,WAAY;AAClC;AACA;AACA,CAfA;AAiBA,MAAMI,uBAAuB,GAAGtB,GAAI;AACpC,8CAA8CG,MAAM,CAACoB,WAAY;AACjE,2CAA2CpB,MAAM,CAACoB,WAAY;AAC9D,sCAAsCpB,MAAM,CAACoB,WAAY;AACzD,CAJA;AAMA,MAAMC,kBAAkB,GAAGxB,GAAI;AAC/B,IAAII,iBAAiB,CAACC,kBAAkB,CAACoB,MAApB,EAA4BtB,MAAM,CAACgB,WAAnC,CAAgD;AACrE,CAFA;AAIA,OAAO,MAAMO,WAAW,GAAG3B,MAAM,CAACS,GAAyH;AAC3J;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAgBL,MAAM,CAACkB,KAAM;AAC7B,sCAAsClB,MAAM,CAACe,WAAY;AACzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMZ,mBAAmB,CAACD,kBAAkB,CAACoB,MAApB,EAA4BtB,MAAM,CAACgB,WAAnC,CAAgD;AACzE;AACA;AACA,IAAIjB,WAAW,CAACyB,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gDAAgDxB,MAAM,CAACY,WAAY;AACnE,6CAA6CZ,MAAM,CAACY,WAAY;AAChE,wCAAwCZ,MAAM,CAACY,WAAY;AAC3D;AACA;AACA,wCAAwCZ,MAAM,CAACyB,WAAY;AAC3D;AACA;AACA,iBAAiBzB,MAAM,CAACW,WAAY;AACpC;AACA;AACA;AACA;AACA;AACA,wCAAwCX,MAAM,CAAC0B,WAAY;AAC3D;AACA;AACA,iBAAiB1B,MAAM,CAACY,WAAY;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAcN,KAAD,IAAYA,KAAK,CAACG,QAAN,GAAiBT,MAAM,CAACe,WAAxB,GAAsCf,MAAM,CAACgB,WAAa;AACnF;AACA;AACA,eAAehB,MAAM,CAAC2B,WAAY;AAClC,oBAAoB3B,MAAM,CAAC4B,UAAW;AACtC;AACA;AACA;AACA,IAAKtB,KAAD,IAAYA,KAAK,CAACG,QAAN,GAAiBQ,aAAjB,GAAiC,EAAI;AACrD,IAAKX,KAAD,IAAYA,KAAK,CAACE,MAAN,GAAeK,WAAf,GAA6B,EAAI;AACjD,IAAKP,KAAD,IAAYA,KAAK,CAACuB,qBAAN,GAA8BV,uBAA9B,GAAwD,EAAI;AAC5E,IAAKb,KAAD,IAAYA,KAAK,CAACwB,aAAN,GAAsBT,kBAAtB,GAA2C,EAAI;AAC/D;AACA,IAAIvB,wBAAyB;AAC7B,CAzGO;AA2GP,MAAMiC,4BAA4B,GAAGlC,GAAI;AACzC;AACA;AACA,CAHA;AAKA,OAAO,MAAMmC,eAAe,GAAGpC,MAAM,CAACS,GAA2B;AACjE;AACA;AACA,sBAAsBL,MAAM,CAACkB,KAAM;AACnC;AACA;AACA,gBAAiBZ,KAAD,IAAYA,KAAK,CAACC,QAAN,GAAiB,MAAjB,GAA0B,KAAO;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAKD,KAAD,IAAYA,KAAK,CAACC,QAAN,GAAiBwB,4BAAjB,GAAgD,EAAI;AACpE;AACA,sBAAsB/B,MAAM,CAACc,WAAY;AACzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBd,MAAM,CAACkB,KAAM;AAC/B;AACA;AACA;AACA;AACA,kBAAkBlB,MAAM,CAACiC,WAAY;AACrC;AACA;AACA;AACA;AACA;AACA,kBAAkBjC,MAAM,CAACkC,WAAY;AACrC;AACA,CAjDO;AAmDP,OAAO,MAAMC,cAAc,GAAGvC,MAAM,CAACwC,MAAO;AAC5C,WAAWpC,MAAM,CAACgB,WAAY;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBhB,MAAM,CAACkB,KAAM;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIpB,wBAAyB;AAC7B;AACA;AACA,kBAAkBE,MAAM,CAAC4B,UAAW;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0B5B,MAAM,CAACqC,WAAY;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBrC,MAAM,CAACsC,UAAW;AAC1C;AACA,eAAetC,MAAM,CAACW,WAAY;AAClC;AACA;AACA,0BAA0BX,MAAM,CAACqC,WAAY;AAC7C;AACA;AACA;AACA,wBAAwBrC,MAAM,CAACuC,WAAY;AAC3C;AACA,eAAevC,MAAM,CAACY,WAAY;AAClC;AACA;AACA;AACA,0BAA0BZ,MAAM,CAACqC,WAAY;AAC7C;AACA;AACA,CAnFO;AAqFP,OAAO,MAAMG,qBAAqB,GAAG5C,MAAM,CAACS,GAA8C;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA,IAAKC,KAAD,IAAYA,KAAK,CAACE,MAAN,IAAgBF,KAAK,CAACG,QAAtB,GAAiC,sBAAjC,GAA0D,kBAAoB;AAC9F,IAAKH,KAAD,IAAYA,KAAK,CAACG,QAAN,GAAiB,uBAAjB,GAA2C,EAAI;AAC/D;AACA;AACA;AACA,wBAAwBT,MAAM,CAACsC,UAAW;AAC1C,aAAatC,MAAM,CAACyC,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBzC,MAAM,CAACuC,WAAY;AAC3C,aAAavC,MAAM,CAACY,WAAY;AAChC;AACA;AACA,EA7BO","sourcesContent":["import styled, { css } from 'styled-components';\nimport { CommonInteractionStyling } from '../common';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { ComponentMStyling, ComponentTextStyle, ComponentXXSStyling } from '../styles/typography';\n\nexport const Dropdown = styled.div<{ isButton: boolean; locked?: boolean; disabled?: boolean; margin?: string }>`\n position: relative;\n display: inline-block;\n ${(props) => !props.isButton && 'width: 100%; min-width: 344px;'}\n ${(props) => (props.locked \|\| props.disabled ? 'cursor: not-allowed;' : '')}\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n\n .show {\n display: block;\n }\n\n .value {\n flex-grow: 1;\n }\n\n .icon {\n width: 24px;\n height: 24px;\n svg {\n cursor: pointer;\n }\n }\n\n input:hover + div {\n color: ${COLORS.primary_600};\n }\n\n input:active + div {\n color: ${COLORS.primary_800};\n }\n`;\n\nconst lockedState = css`\n background-color: ${COLORS.neutral_100};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n color: ${COLORS.neutral_600};\n pointer-events: none;\n cursor: not-allowed;\n input {\n color: ${COLORS.neutral_600} !important;\n }\n`;\n\nconst disabledState = css`\n background-color: ${COLORS.white};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n pointer-events: none;\n cursor: not-allowed;\n svg {\n color: ${COLORS.neutral_300} !important;\n }\n input {\n color: ${COLORS.neutral_300} !important;\n ::placeholder {\n color: ${COLORS.neutral_300} !important;\n }\n }\n`;\n\nconst activeValidationMessage = css`\n -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n`;\n\nconst placeholderStyling = css`\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n`;\n\nexport const StyledField = styled.div<{ disabled: boolean; locked: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string }>`\n font-weight: normal;\n font-size: 16px;\n\n padding: 12px 16px;\n height: 48px;\n min-width: 344px;\n width: 100%;\n\n background: ${COLORS.white};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n box-sizing: border-box;\n border-radius: 4px;\n cursor: pointer;\n line-height: 16px;\n\n display: flex;\n align-items: center;\n gap: 4px;\n\n &::placeholder {\n ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n\n ${BREAKPOINTS.MEDIUM} {\n font-size: 18px;\n line-height: 16px;\n padding: 16px;\n height: 56px;\n &::placeholder {\n font-size: 14px;\n }\n }\n\n &.small {\n font-size: 16px;\n line-height: 16px;\n padding: 12px 16px;\n height: 48px;\n &::placeholder {\n font-size: 12px;\n }\n }\n &.medium {\n font-size: 18px;\n line-height: 18px;\n height: 56px;\n padding: 16px;\n &::placeholder {\n font-size: 14px;\n }\n }\n\n &:focus {\n outline: 3px solid #ddd;\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 }\n &:hover {\n box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\n input {\n ::placeholder {\n color: ${COLORS.primary_600};\n }\n }\n cursor: pointer;\n }\n &:active {\n box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n input {\n ::placeholder {\n color: ${COLORS.primary_800};\n }\n }\n }\n\n &.button {\n font-size: 16px !important;\n line-height: 20px !important;\n box-sizing: border-box;\n height: 32px;\n padding: 0 8px;\n width: initial;\n min-width: initial;\n border: none !important;\n box-shadow: none;\n font-weight: bold;\n border-radius: 4px;\n color: ${(props) => (props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)};\n\n &.expanded {\n color: ${COLORS.neutral_800};\n background: ${COLORS.neutral_20};\n }\n }\n\n ${(props) => (props.disabled ? disabledState : '')}\n ${(props) => (props.locked ? lockedState : '')}\n ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\n ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\n\n ${CommonInteractionStyling};\n`;\n\nconst ButtonDropdownContentStyling = css`\n min-width: 344px;\n right: 0;\n`;\n\nexport const DropdownContent = styled.div<{ isButton: boolean }>`\n display: none;\n position: absolute;\n background-color: ${COLORS.white};\n width: 100%;\n z-index: 1;\n margin-top: ${(props) => (props.isButton ? '-4px' : '2px')};\n\n &.show {\n display: block;\n }\n\n &.up {\n top: auto;\n bottom: 100%;\n }\n\n ${(props) => (props.isButton ? ButtonDropdownContentStyling : '')};\n\n border: 1px solid ${COLORS.neutral_100};\n box-sizing: border-box;\n box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n border-radius: 4px;\n padding: 4px 0;\n\n max-height: 240px;\n overflow-y: auto;\n\n /* width /\n ::-webkit-scrollbar {\n width: 4px;\n cursor: pointer;\n }\n\n / Track /\n ::-webkit-scrollbar-track {\n background: ${COLORS.white};\n }\n\n / Handle /\n ::-webkit-scrollbar-thumb {\n background: ${COLORS.neutral_200};\n border-radius: 8px;\n }\n\n / Handle on hover */\n ::-webkit-scrollbar-thumb:hover {\n background: ${COLORS.neutral_400};\n }\n`;\n\nexport const DropdownButton = styled.button`\n color: ${COLORS.neutral_600};\n\n position: relative;\n text-decoration: none;\n display: block;\n font-family: Lato;\n font-style: normal;\n font-weight: normal;\n font-size: 16px;\n line-height: 120%;\n height: 48px;\n background-color: ${COLORS.white};\n border: none;\n cursor: pointer;\n background: transparent;\n width: 100%;\n text-align: left;\n\n &.show-divider-above > span,\n &.show-divider-above > div {\n display: block;\n width: calc(100% - 32px);\n border-top: 1px solid #e5e5e5;\n }\n span {\n margin: auto 0 auto 16px;\n line-height: 48px;\n }\n div.item-content {\n margin: auto 0 auto 16px;\n line-height: 48px;\n display: flex;\n align-items: center;\n div.item-label {\n flex: 1 0 calc(100% - 40px);\n }\n div.item-icon {\n flex: 1 0 40px;\n display: flex;\n justify-content: flex-end;\n }\n }\n\n ${CommonInteractionStyling};\n\n &.active {\n background: ${COLORS.neutral_20};\n &::after {\n position: absolute;\n content: ' ';\n width: 4px;\n top: 0;\n bottom: 0;\n left: 2px;\n background-color: ${COLORS.primary_500};\n\n border-top-left-radius: 2px;\n border-top-right-radius: 2px;\n border-bottom-left-radius: 2px;\n border-bottom-right-radius: 2px;\n }\n }\n\n &.active:hover {\n background-color: ${COLORS.primary_20};\n svg {\n color: ${COLORS.primary_600};\n }\n &::after {\n background-color: ${COLORS.primary_500};\n }\n }\n &.active:active {\n background-color: ${COLORS.primary_100};\n svg {\n color: ${COLORS.primary_800};\n }\n\n &::after {\n background-color: ${COLORS.primary_500};\n }\n }\n`;\n\nexport const ButtonDropdownWrapper = styled.div<{ locked?: boolean; disabled?: boolean }>`\n box-sizing: border-box;\n min-height: 48px;\n display: flex;\n align-items: center;\n width: fit-content;\n\n ${(props) => (props.locked \|\| props.disabled ? 'cursor: not-allowed;' : 'cursor: pointer;')}\n ${(props) => (props.disabled ? 'pointer-events: none;' : '')}\n \n &:hover .button,\n & > .button:hover {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n }\n\n &:focus .button,\n & > .button:focus {\n box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;\n outline: none;\n }\n\n &:active .button,\n & > .button:active {\n box-shadow: none;\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n\n}`;\n"],"file":"CommonStyling.js"}
1	+ {"version":3,"sources":["../../../src/Dropdown/CommonStyling.tsx"],"names":["styled","css","CommonInteractionStyling","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","Dropdown","div","props","isButton","locked","disabled","margin","primary_600","primary_800","lockedState","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","warning_400","placeholderStyling","Italic","StyledField","Regular","MEDIUM","primary_200","primary_300","Bold","neutral_800","neutral_20","showValidationMessage","isPlaceholder","ButtonDropdownContentStyling","DropdownContent","neutral_200","neutral_400","DropdownButton","button","primary_500","primary_20","primary_100","ButtonDropdownWrapper","primary_700"],"mappings":"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,kBAAkBhB,MAAM,CAACoB,KAAM;AAC/B;AACA;AACA;AACA;AACA,kBAAkBpB,MAAM,CAACqC,WAAY;AACrC;AACA;AACA;AACA;AACA;AACA,kBAAkBrC,MAAM,CAACsC,WAAY;AACrC;AACA,CAjDO;AAmDP,OAAO,MAAMC,cAAc,GAAG3C,MAAM,CAAC4C,MAAO;AAC5C,IAAIrC,iBAAiB,CAACF,kBAAkB,CAACyB,OAApB,EAA6B1B,MAAM,CAACkB,WAApC,CAAiD;AACtE;AACA;AACA;AACA;AACA;AACA,sBAAsBlB,MAAM,CAACoB,KAAM;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAItB,wBAAyB;AAC7B;AACA;AACA,kBAAkBE,MAAM,CAACgC,UAAW;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0BhC,MAAM,CAACyC,WAAY;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBzC,MAAM,CAAC0C,UAAW;AAC1C;AACA;AACA,eAAe1C,MAAM,CAACa,WAAY;AAClC;AACA;AACA;AACA,0BAA0Bb,MAAM,CAACyC,WAAY;AAC7C;AACA;AACA;AACA;AACA,wBAAwBzC,MAAM,CAAC2C,WAAY;AAC3C;AACA;AACA,eAAe3C,MAAM,CAACc,WAAY;AAClC;AACA;AACA;AACA,0BAA0Bd,MAAM,CAACyC,WAAY;AAC7C;AACA;AACA,CApFO;AAsFP,OAAO,MAAMG,qBAAqB,GAAGhD,MAAM,CAACW,GAA8C;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA,IAAKC,KAAD,IAAYA,KAAK,CAACE,MAAN,IAAgBF,KAAK,CAACG,QAAtB,GAAiC,sBAAjC,GAA0D,kBAAoB;AAC9F,IAAKH,KAAD,IAAYA,KAAK,CAACG,QAAN,GAAiB,uBAAjB,GAA2C,EAAI;AAC/D;AACA;AACA;AACA,wBAAwBX,MAAM,CAAC0C,UAAW;AAC1C,aAAa1C,MAAM,CAAC6C,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB7C,MAAM,CAAC2C,WAAY;AAC3C,aAAa3C,MAAM,CAACc,WAAY;AAChC;AACA;AACA,EA7BO","sourcesContent":["import styled, {css} from 'styled-components';\nimport {CommonInteractionStyling} from '../common';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling} from '../styles/typography';\n\nexport const Dropdown = styled.div<{ isButton: boolean; locked?: boolean; disabled?: boolean; margin?: string }>`\n position: relative;\n display: inline-block;\n ${(props) => !props.isButton && 'width: 100%; min-width: 344px;'}\n ${(props) => (props.locked \|\| props.disabled ? 'cursor: not-allowed;' : '')}\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n\n .show {\n display: block;\n }\n\n .value {\n flex-grow: 1;\n }\n\n .icon {\n width: 24px;\n height: 24px;\n svg {\n cursor: pointer;\n }\n }\n\n input:hover + div {\n color: ${COLORS.primary_600};\n }\n\n input:active + div {\n color: ${COLORS.primary_800};\n }\n`;\n\nconst lockedState = css`\n background-color: ${COLORS.neutral_100};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n color: ${COLORS.neutral_600};\n pointer-events: none;\n cursor: not-allowed;\n input {\n color: ${COLORS.neutral_600} !important;\n }\n`;\n\nconst disabledState = css`\n background-color: ${COLORS.white};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n pointer-events: none;\n cursor: not-allowed;\n svg {\n color: ${COLORS.neutral_300} !important;\n }\n input {\n color: ${COLORS.neutral_300} !important;\n ::placeholder {\n color: ${COLORS.neutral_300} !important;\n }\n }\n`;\n\nconst activeValidationMessage = css`\n -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n`;\n\nconst placeholderStyling = css`\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n`;\n\nexport const StyledField = styled.div<{ disabled: boolean; locked: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string }>`\n ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n padding: 12px 16px;\n height: 48px;\n min-width: 344px;\n width: 100%;\n\n background: ${COLORS.white};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n box-sizing: border-box;\n border-radius: 4px;\n cursor: pointer;\n\n display: flex;\n align-items: center;\n gap: 4px;\n \n input{\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n }\n\n &::placeholder {\n ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n\n ${BREAKPOINTS.MEDIUM} {\n ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n padding: 16px;\n height: 56px;\n &::placeholder {\n ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n &.small {\n ${ComponentXSStyling(ComponentTextStyle.Regular, 'inherit')}\n padding: 12px 16px;\n height: 48px;\n &::placeholder {\n ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n &.medium {\n ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n height: 56px;\n padding: 16px;\n &::placeholder {\n ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n &:focus {\n outline: 3px solid #ddd;\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 }\n &:hover {\n box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\n input {\n ::placeholder {\n color: ${COLORS.primary_600};\n }\n }\n cursor: pointer;\n }\n &:active {\n box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n input {\n ::placeholder {\n color: ${COLORS.primary_800};\n }\n }\n }\n\n &.button {\n ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}\n\n box-sizing: border-box;\n height: 32px;\n padding: 0 8px;\n width: initial;\n min-width: initial;\n border: none !important;\n box-shadow: none;\n border-radius: 4px;\n\n &.expanded {\n color: ${COLORS.neutral_800};\n background: ${COLORS.neutral_20};\n }\n }\n\n ${(props) => (props.disabled ? disabledState : '')}\n ${(props) => (props.locked ? lockedState : '')}\n ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\n ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\n\n ${CommonInteractionStyling};\n`;\n\nconst ButtonDropdownContentStyling = css`\n min-width: 344px;\n right: 0;\n`;\n\nexport const DropdownContent = styled.div<{ isButton: boolean }>`\n display: none;\n position: absolute;\n background-color: ${COLORS.white};\n width: 100%;\n z-index: 1;\n margin-top: ${(props) => (props.isButton ? '-4px' : '2px')};\n\n &.show {\n display: block;\n }\n\n &.up {\n top: auto;\n bottom: 100%;\n }\n\n ${(props) => (props.isButton ? ButtonDropdownContentStyling : '')};\n\n border: 1px solid ${COLORS.neutral_100};\n box-sizing: border-box;\n box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n border-radius: 4px;\n padding: 4px 0;\n\n max-height: 240px;\n overflow-y: auto;\n\n /* width /\n ::-webkit-scrollbar {\n width: 4px;\n cursor: pointer;\n }\n\n / Track /\n ::-webkit-scrollbar-track {\n background: ${COLORS.white};\n }\n\n / Handle /\n ::-webkit-scrollbar-thumb {\n background: ${COLORS.neutral_200};\n border-radius: 8px;\n }\n\n / Handle on hover */\n ::-webkit-scrollbar-thumb:hover {\n background: ${COLORS.neutral_400};\n }\n`;\n\nexport const DropdownButton = styled.button`\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n position: relative;\n text-decoration: none;\n display: block;\n height: 48px;\n background-color: ${COLORS.white};\n border: none;\n cursor: pointer;\n background: transparent;\n width: 100%;\n text-align: left;\n\n &.show-divider-above > span,\n &.show-divider-above > div {\n display: block;\n width: calc(100% - 32px);\n border-top: 1px solid #e5e5e5;\n }\n\n span {\n margin: auto 0 auto 16px;\n line-height: 48px;\n }\n\n div.item-content {\n margin: auto 0 auto 16px;\n line-height: 48px;\n display: flex;\n align-items: center;\n\n div.item-label {\n flex: 1 0 calc(100% - 40px);\n }\n\n div.item-icon {\n flex: 1 0 40px;\n display: flex;\n justify-content: flex-end;\n }\n }\n\n ${CommonInteractionStyling};\n\n &.active {\n background: ${COLORS.neutral_20};\n\n &::after {\n position: absolute;\n content: ' ';\n width: 4px;\n top: 0;\n bottom: 0;\n left: 2px;\n background-color: ${COLORS.primary_500};\n\n border-radius: 2px;\n }\n }\n\n &.active:hover {\n background-color: ${COLORS.primary_20};\n\n svg {\n color: ${COLORS.primary_600};\n }\n\n &::after {\n background-color: ${COLORS.primary_500};\n }\n }\n\n &.active:active {\n background-color: ${COLORS.primary_100};\n\n svg {\n color: ${COLORS.primary_800};\n }\n\n &::after {\n background-color: ${COLORS.primary_500};\n }\n }\n`;\n\nexport const ButtonDropdownWrapper = styled.div<{ locked?: boolean; disabled?: boolean }>`\n box-sizing: border-box;\n min-height: 48px;\n display: flex;\n align-items: center;\n width: fit-content;\n\n ${(props) => (props.locked \|\| props.disabled ? 'cursor: not-allowed;' : 'cursor: pointer;')}\n ${(props) => (props.disabled ? 'pointer-events: none;' : '')}\n \n &:hover .button,\n & > .button:hover {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n }\n\n &:focus .button,\n & > .button:focus {\n box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;\n outline: none;\n }\n\n &:active .button,\n & > .button:active {\n box-shadow: none;\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n\n}`;\n"],"file":"CommonStyling.js"}

package/dist/esm/Footer/Components/FooterDropdownLinks.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import _pt from "prop-types";
 import * as React from 'react';
 import styled from 'styled-components';
-import { COLORS } from '../../styles';
+import { COLORS, ComponentTextStyle } from '../../styles';
 import { ChevronDown, ChevronUp } from '../../icons/systemicons/SystemIcons';
-import { ComponentSStyling, ComponentTextStyle } from '../../styles/typography';
+import { ComponentMStyling, ComponentSStyling } from '../../styles/typography';
 const Wrapper = styled.div`
   width: 100%;
   border-top: 1px solid ${COLORS.neutral_100};
@@ -45,9 +45,7 @@ const DropdownLinkBlock = styled.button`
   h3 {
     margin: auto 0;
-    font-size: 18px;
-    line-height: 24px;
-    font-weight: 400;
+    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}
   }
   .open {
@@ -72,11 +70,13 @@ const LinkBlock = styled.div`
   }
   a {
-    color: white;
     text-decoration: none;
-    font-weight: bold;
-    font-size: 16px;
-    line-height: 48px;
+    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.white)}
+    display: flex;
+    align-items: center;
     padding: 0 16px;
     height: 48px;

package/dist/esm/Footer/Components/FooterDropdownLinks.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/Footer/Components/FooterDropdownLinks.tsx"],"names":["React","styled","COLORS","ChevronDown","ChevronUp","~~ComponentSStyling~~","~~ComponentTextStyle~~","Wrapper","div","neutral_100","DropdownLinkBlock","button","Bold","white","props","width","neutral_20","primary_700","primary_100","primary_800","neutral_800","LinkBlock","FooterDropdownLinks","navSection","dropdownActive","setDropdownActive","useState","header","links","map","item","Math","floor","random","to","label"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAEA,~~SAASC~~,~~MAAT~~,~~QAAuB~~,~~cAAvB~~;AACA,~~SAASC~~,~~WAAT~~,~~EAAsBC~~,~~SAAtB~~,~~QAAuC~~,~~qCAAvC~~;AAEA,~~SAASC~~,~~iBAAT~~,~~EAA4BC~~,~~kBAA5B~~,~~QAAsD~~,~~yBAAtD~~;AAEA,MAAMC,OAAO,~~GAAGN~~,MAAM,~~CAACO~~,GAAI;AAC3B;AACA,~~0BAA0BN~~,MAAM,~~CAACO~~,WAAY;AAC7C;AACA;AACA,+BAA+BP,MAAM,~~CAACO~~,WAAY;AAClD;AACA,CAPA;AASA,MAAMC,iBAAiB,~~GAAGT~~,MAAM,~~CAACU~~,MAA0B;AAC3D,~~IAAIN~~,iBAAiB,~~CAACC~~,kBAAkB,~~CAACM~~,IAApB,~~EAA0BV~~,MAAM,~~CAACW~~,KAAjC,CAAwC;AAC7D;AACA,aAAcC,KAAD,IAAYA,KAAK,CAACC,KAAN,GAAc,GAAd,GAAoB,MAApB,GAA6B,MAAQ;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,~~wBAAwBb~~,MAAM,~~CAACc~~,UAAW;AAC1C,~~aAAad~~,MAAM,~~CAACe~~,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,~~wBAAwBf~~,MAAM,~~CAACgB~~,WAAY;AAC3C,~~aAAahB~~,MAAM,~~CAACiB~~,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;~~AACA~~;AACA;AACA;AACA;AACA~~;AACA;AACA~~,~~0BAA0BjB~~,MAAM,~~CAACc~~,UAAW;AAC5C,~~eAAed~~,MAAM,~~CAACkB~~,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA;AACA,~~CAhDA~~;~~AAkDA~~,MAAMC,SAAS,~~GAAGpB~~,MAAM,~~CAACO~~,GAAuB;AAChD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,~~0BAA0BN~~,MAAM,~~CAACc~~,UAAW;AAC5C,~~eAAed~~,MAAM,~~CAACe~~,WAAY;AAClC;AACA;AACA;AACA;AACA,~~0BAA0Bf~~,MAAM,~~CAACc~~,UAAW;AAC5C;AACA;AACA;AACA;AACA;AACA,~~0BAA0Bd~~,MAAM,~~CAACgB~~,WAAY;AAC7C,~~eAAehB~~,MAAM,~~CAACiB~~,WAAY;AAClC;AACA;AACA,~~CApCA~~;;~~AA2CA~~,~~MAAMG~~,mBAAmB,GAAG,CAAC;AAAEC,EAAAA,UAAF;~~AAAcR~~,EAAAA;AAAd,CAAD,KAAkD;AAC5E,QAAM,~~CAACS~~,cAAD,EAAiBC,iBAAjB,~~IAAsCzB~~,KAAK,~~CAAC0B~~,QAAN,CAAwB,KAAxB,CAA5C;AACA,sBACE,oBAAC,OAAD,qBACE,oBAAC,iBAAD;AAAmB,IAAA,KAAK,~~EAAEX~~,KAA1B;AAAiC,IAAA,SAAS,~~EAAES~~,cAAc,GAAG,MAAH,GAAY,EAAtE;AAA0E,IAAA,OAAO,EAAE,MAAMC,iBAAiB,CAAC,CAACD,cAAF;AAA1G,kBACE,gCAAKD,UAAU,CAACI,MAAhB,CADF,EAEGH,cAAc,gBAAG,oBAAC,SAAD;AAAW,IAAA,IAAI,EAAC;AAAhB,IAAH,gBAA+B,oBAAC,WAAD;AAAa,IAAA,IAAI,EAAC;AAAlB,IAFhD,CADF,eAKE,oBAAC,SAAD;AAAW,IAAA,KAAK,~~EAAET~~,KAAlB;AAAyB,IAAA,SAAS,~~EAAES~~,cAAc,GAAG,MAAH,GAAY;AAA9D,KACGD,UAAU,CAACK,KAAX,CAAiBC,GAAjB,CAAsBC,IAAD,iBACpB;AAAG,IAAA,GAAG,EAAG,gBAAeC,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAyC,EAAjE;AAAoE,IAAA,IAAI,EAAEH,IAAI,CAACI,EAA/E;AAAmF,IAAA,MAAM,EAAC,QAA1F;AAAmG,IAAA,GAAG,EAAC;AAAvG,KACGJ,IAAI,CAACK,KADR,CADD,CADH,CALF,CADF;AAeD,CAjBD;;;~~AAHEpB~~,EAAAA,K;;AAsBF,~~eAAeO~~,mBAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { COLORS } from '../../styles';\nimport { ChevronDown, ChevronUp } from '../../icons/systemicons/SystemIcons';\nimport { NavSection } from '../../types';\nimport { ComponentSStyling~~, ComponentTextStyle~~ } from '../../styles/typography';\n\nconst Wrapper = styled.div`\n width: 100%;\n border-top: 1px solid ${COLORS.neutral_100};\n\n &:last-child {\n border-bottom: 1px solid ${COLORS.neutral_100};\n }\n`;\n\nconst DropdownLinkBlock = styled.button<{ width: number }>`\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.white)}\n\n display: ${(props) => (props.width > 768 ? 'none' : 'flex')};\n justify-content: space-between;\n width: 100%;\n height: 48px;\n background-color: transparent;\n border: none;\n padding: 0 16px;\n\n &:hover,\n .open {\n background-color: ${COLORS.neutral_20};\n color: ${COLORS.primary_700};\n }\n\n &:hover {\n cursor: pointer;\n }\n\n &:active {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n\n &:focus {\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n outline: none;\n }\n\n h3 {\n margin: auto 0;\n ~~font-size:~~ ~~18px;\~~n ~~line-height: 24px;\n font-weight: 400;\n~~ }\n\n .open {\n h3 {\n background-color: ${COLORS.neutral_20};\n color: ${COLORS.neutral_800};\n }\n }\n\n svg {\n margin: auto 0;\n }\n`;\n\nconst LinkBlock = styled.div<{ width: number }>`\n display: none;\n flex-direction: column;\n font-weight: normal;\n width: 100%;\n\n &.show {\n display: flex;\n }\n\n a {\n ~~color: white;\n~~ text-decoration: none;\n ~~font-weight:~~ ~~bold;\~~n ~~font-size~~: ~~16px~~;\n ~~line~~-~~height~~: ~~48px~~;\n padding: 0 16px;\n height: 48px;\n\n &:hover {\n background-color: ${COLORS.neutral_20};\n color: ${COLORS.primary_700};\n cursor: pointer;\n }\n\n &:focus {\n background-color: ${COLORS.neutral_20};\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n outline: none;\n }\n\n &:active {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n }\n`;\n\ninterface FooterNavSectionProps {\n navSection: NavSection;\n width: number;\n}\n\nconst FooterDropdownLinks = ({ navSection, width }: FooterNavSectionProps) => {\n const [dropdownActive, setDropdownActive] = React.useState<boolean>(false);\n return (\n <Wrapper>\n <DropdownLinkBlock width={width} className={dropdownActive ? 'open' : ''} onClick={() => setDropdownActive(!dropdownActive)}>\n <h3>{navSection.header}</h3>\n {dropdownActive ? <ChevronUp size=\"24px\" /> : <ChevronDown size=\"24px\" />}\n </DropdownLinkBlock>\n <LinkBlock width={width} className={dropdownActive ? 'show' : ''}>\n {navSection.links.map((item) => (\n <a key={`dropdownlink_${Math.floor(Math.random() * 999999999999)}`} href={item.to} target=\"_blank\" rel=\"noreferrer noopener\">\n {item.label}\n </a>\n ))}\n </LinkBlock>\n </Wrapper>\n );\n};\n\nexport default FooterDropdownLinks;\n"],"file":"FooterDropdownLinks.js"}
1	+ {"version":3,"sources":["../../../../src/Footer/Components/FooterDropdownLinks.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ChevronDown","ChevronUp","ComponentMStyling","ComponentSStyling","Wrapper","div","neutral_100","DropdownLinkBlock","button","Bold","white","props","width","neutral_20","primary_700","primary_100","primary_800","Regular","neutral_800","LinkBlock","FooterDropdownLinks","navSection","dropdownActive","setDropdownActive","useState","header","links","map","item","Math","floor","random","to","label"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {COLORS, ComponentTextStyle} from '../../styles';\nimport {ChevronDown, ChevronUp} from '../../icons/systemicons/SystemIcons';\nimport {NavSection} from '../../types';\nimport {ComponentMStyling, ComponentSStyling} from '../../styles/typography';\n\nconst Wrapper = styled.div`\n width: 100%;\n border-top: 1px solid ${COLORS.neutral_100};\n\n &:last-child {\n border-bottom: 1px solid ${COLORS.neutral_100};\n }\n`;\n\nconst DropdownLinkBlock = styled.button<{ width: number }>`\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.white)}\n\n display: ${(props) => (props.width > 768 ? 'none' : 'flex')};\n justify-content: space-between;\n width: 100%;\n height: 48px;\n background-color: transparent;\n border: none;\n padding: 0 16px;\n\n &:hover,\n .open {\n background-color: ${COLORS.neutral_20};\n color: ${COLORS.primary_700};\n }\n\n &:hover {\n cursor: pointer;\n }\n\n &:active {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n\n &:focus {\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n outline: none;\n }\n\n h3 {\n margin: auto 0;\n ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n }\n\n .open {\n h3 {\n background-color: ${COLORS.neutral_20};\n color: ${COLORS.neutral_800};\n }\n }\n\n svg {\n margin: auto 0;\n }\n`;\n\nconst LinkBlock = styled.div<{ width: number }>`\n display: none;\n flex-direction: column;\n font-weight: normal;\n width: 100%;\n\n &.show {\n display: flex;\n }\n\n a {\n text-decoration: none;\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.white)}\n \n display: flex;\n align-items: center;\n \n padding: 0 16px;\n height: 48px;\n\n &:hover {\n background-color: ${COLORS.neutral_20};\n color: ${COLORS.primary_700};\n cursor: pointer;\n }\n\n &:focus {\n background-color: ${COLORS.neutral_20};\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n outline: none;\n }\n\n &:active {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n }\n`;\n\ninterface FooterNavSectionProps {\n navSection: NavSection;\n width: number;\n}\n\nconst FooterDropdownLinks = ({ navSection, width }: FooterNavSectionProps) => {\n const [dropdownActive, setDropdownActive] = React.useState<boolean>(false);\n return (\n <Wrapper>\n <DropdownLinkBlock width={width} className={dropdownActive ? 'open' : ''} onClick={() => setDropdownActive(!dropdownActive)}>\n <h3>{navSection.header}</h3>\n {dropdownActive ? <ChevronUp size=\"24px\" /> : <ChevronDown size=\"24px\" />}\n </DropdownLinkBlock>\n <LinkBlock width={width} className={dropdownActive ? 'show' : ''}>\n {navSection.links.map((item) => (\n <a key={`dropdownlink_${Math.floor(Math.random() * 999999999999)}`} href={item.to} target=\"_blank\" rel=\"noreferrer noopener\">\n {item.label}\n </a>\n ))}\n </LinkBlock>\n </Wrapper>\n );\n};\n\nexport default FooterDropdownLinks;\n"],"file":"FooterDropdownLinks.js"}

package/dist/esm/Footer/Components/FooterNavSection.js CHANGED Viewed

@@ -1,8 +1,9 @@
 import _pt from "prop-types";
 import * as React from 'react';
 import styled from 'styled-components';
-import { BREAKPOINTS } from '../../styles';
+import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles';
 import FooterDropdownLinks from './FooterDropdownLinks';
+import { ComponentLStyling, ComponentSStyling } from '../../styles/typography';
 const NavSection = styled.section`
   display: flex;
   flex-direction: row;
@@ -31,18 +32,13 @@ const LinkBlock = styled.div`
   }
   h3 {
-    font-size: 20px;
-    line-height: 24px;
-    font-weight: 400;
+    ${ComponentLStyling(ComponentTextStyle.Regular, 'inherit')}
   }
   a {
-    color: white;
     text-decoration: none;
-    font-size: 16px;
-    line-height: 20px;
-    font-weight: 700;
     padding: 8px 0px;
+    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.white)}
   }
 `;

package/dist/esm/Footer/Components/FooterNavSection.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/Footer/Components/FooterNavSection.tsx"],"names":["React","styled","BREAKPOINTS","FooterDropdownLinks","NavSection","section","LinkBlock","div","props","width","MEDIUM","LARGE","XLARGE","FooterNavSection","navOptions","setWidth","useState","window","innerWidth","useEffect","handleResize","addEventListener","sections","map","no","index","header","links","link","Math","floor","random","to","target","label","mainId"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAEA,~~SAASC~~,~~WAAT~~,~~QAA4B~~,~~cAA5B~~;AACA,OAAOC,mBAAP,MAAgC,uBAAhC;~~AAGA~~,MAAMC,UAAU,~~GAAGH~~,MAAM,~~CAACI~~,OAAQ;AAClC;AACA;AACA;AACA;AACA;AACA;AACA,CAPA;AASA,MAAMC,SAAS,~~GAAGL~~,MAAM,~~CAACM~~,GAAuB;AAChD,aAAcC,KAAD,IAAYA,KAAK,CAACC,KAAN,IAAe,GAAf,GAAqB,MAArB,GAA8B,MAAQ;AAC/D;AACA;AACA;AACA;AACA,~~IAAIP~~,WAAW,~~CAACQ~~,MAAO;AACvB;AACA;AACA;AACA;AACA,~~IAAIR~~,WAAW,~~CAACS~~,KAAM;AACtB;AACA;AACA,~~IAAIT~~,WAAW,~~CAACU~~,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA;~~AACA~~;AACA;AACA;AACA;AACA;AACA;~~AACA~~;AACA~~;AACA;AACA;AACA;AACA;AACA~~,~~CAjCA~~;;~~AAwCA~~,MAAMC,gBAAgB,GAAG,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAA2C;AAClE,QAAM,~~CAACL~~,KAAD,~~EAAQM~~,QAAR,~~IAAoBf~~,KAAK,~~CAACgB~~,QAAN,CAAuBC,MAAM,CAACC,UAA9B,CAA1B;~~AACAlB~~,EAAAA,KAAK,~~CAACmB~~,SAAN,CAAgB,MAAM;AACpB,aAASC,YAAT,GAAwB;AACtBL,MAAAA,QAAQ,CAACE,MAAM,CAACC,UAAR,CAAR;AACD;;AACDD,IAAAA,MAAM,CAACI,gBAAP,CAAwB,QAAxB,EAAkCD,YAAlC;AACD,GALD;AAOA,sBACE,oBAAC,UAAD,QACGN,UAAU,CAACQ,QAAX,EAAqBC,GAArB,CAAyB,CAACC,EAAD,EAAKC,KAAL,KAAe;AACvC,~~WAAOhB~~,KAAK,GAAG,GAAR,gBACL,oBAAC,SAAD;AAAW,MAAA,GAAG,EAAG,~~aAAYgB~~,KAAM,EAAnC;AAAsC,MAAA,KAAK,~~EAAEhB~~;AAA7C,oBACE,~~gCAAKe~~,EAAE,CAACE,MAAR,CADF,EAEGF,EAAE,CAACG,KAAH,CAASJ,GAAT,CAAcK,IAAD,iBACZ;AAAG,MAAA,GAAG,EAAG,gBAAeC,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAyC,EAAjE;AAAoE,MAAA,IAAI,EAAEH,IAAI,CAACI,EAA/E;AAAmF,MAAA,MAAM,EAAEJ,IAAI,CAACK,MAAL,IAAe,QAA1G;AAAoH,MAAA,GAAG,EAAC;AAAxH,OACGL,IAAI,CAACM,KADR,CADD,CAFH,CADK,gBAUL,oBAAC,mBAAD;AAAqB,MAAA,GAAG,EAAG,qBAAoBT,KAAM,EAArD;AAAwD,MAAA,UAAU,EAAED,EAApE;AAAwE,MAAA,KAAK,~~EAAEf~~;AAA/E,MAVF;AAYD,GAbA,CADH,CADF;AAkBD,CA3BD;;;~~AAHE0B~~,EAAAA,M;;AAgCF,eAAetB,gBAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS } from '../../styles';\nimport FooterDropdownLinks from './FooterDropdownLinks';\nimport { NavOptions } from '../../types';\n\nconst NavSection = styled.section`\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n flex-flow: flex-start;\n color: white;\n margin-bottom: 12px;\n`;\n\nconst LinkBlock = styled.div<{ width: number }>`\n display: ${(props) => (props.width <= 768 ? 'none' : 'flex')};\n flex-direction: column;\n font-weight: normal;\n width: 100%;\n\n ${BREAKPOINTS.MEDIUM} {\n padding: 0 24px 24px 0;\n width: calc(50% - 24px);\n }\n\n ${BREAKPOINTS.LARGE} {\n width: calc(33% - 24px);\n }\n ${BREAKPOINTS.XLARGE} {\n padding: 0 32px 32px 0;\n width: calc(33% - 32px);\n }\n\n h3 {\n ~~font-size:~~ ~~20px;\~~n ~~line-height: 24px;\n font-weight: 400;\n~~ }\n\n a {\n ~~color: white;\n~~ text-decoration: none;\n ~~font-size~~: ~~16px;\n line-height:~~ ~~20px~~;\n ~~font-weight:~~ ~~700;\~~n ~~padding: 8px 0px;\n~~ }\n`;\n\ninterface FooterNavSectionProps {\n navOptions: NavOptions;\n mainId: string;\n}\n\nconst FooterNavSection = ({ navOptions }: FooterNavSectionProps) => {\n const [width, setWidth] = React.useState<number>(window.innerWidth);\n React.useEffect(() => {\n function handleResize() {\n setWidth(window.innerWidth);\n }\n window.addEventListener('resize', handleResize);\n });\n\n return (\n <NavSection>\n {navOptions.sections?.map((no, index) => {\n return width > 768 ? (\n <LinkBlock key={`LinkBlock_${index}`} width={width}>\n <h3>{no.header}</h3>\n {no.links.map((link) => (\n <a key={`dropdownlink_${Math.floor(Math.random() * 999999999999)}`} href={link.to} target={link.target \|\| '_blank'} rel=\"noreferrer noopener\">\n {link.label}\n </a>\n ))}\n </LinkBlock>\n ) : (\n <FooterDropdownLinks key={`LinkBlockDropdown_${index}`} navSection={no} width={width} />\n );\n })}\n </NavSection>\n );\n};\n\nexport default FooterNavSection;\n"],"file":"FooterNavSection.js"}
1	+ {"version":3,"sources":["../../../../src/Footer/Components/FooterNavSection.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","FooterDropdownLinks","ComponentLStyling","ComponentSStyling","NavSection","section","LinkBlock","div","props","width","MEDIUM","LARGE","XLARGE","Regular","Bold","white","FooterNavSection","navOptions","setWidth","useState","window","innerWidth","useEffect","handleResize","addEventListener","sections","map","no","index","header","links","link","Math","floor","random","to","target","label","mainId"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAEA,SAAQC,WAAR,EAAqBC,MAArB,EAA6BC,kBAA7B,QAAsD,cAAtD;AACA,OAAOC,mBAAP,MAAgC,uBAAhC;AAEA,SAAQC,iBAAR,EAA2BC,iBAA3B,QAAmD,yBAAnD;AAEA,MAAMC,UAAU,GAAGP,MAAM,CAACQ,OAAQ;AAClC;AACA;AACA;AACA;AACA;AACA;AACA,CAPA;AASA,MAAMC,SAAS,GAAGT,MAAM,CAACU,GAAuB;AAChD,aAAcC,KAAD,IAAYA,KAAK,CAACC,KAAN,IAAe,GAAf,GAAqB,MAArB,GAA8B,MAAQ;AAC/D;AACA;AACA;AACA;AACA,IAAIX,WAAW,CAACY,MAAO;AACvB;AACA;AACA;AACA;AACA,IAAIZ,WAAW,CAACa,KAAM;AACtB;AACA;AACA,IAAIb,WAAW,CAACc,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA,MAAMV,iBAAiB,CAACF,kBAAkB,CAACa,OAApB,EAA6B,SAA7B,CAAwC;AAC/D;AACA;AACA;AACA;AACA;AACA,MAAMV,iBAAiB,CAACH,kBAAkB,CAACc,IAApB,EAA0Bf,MAAM,CAACgB,KAAjC,CAAwC;AAC/D;AACA,CA5BA;;AAmCA,MAAMC,gBAAgB,GAAG,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAA2C;AAClE,QAAM,CAACR,KAAD,EAAQS,QAAR,IAAoBtB,KAAK,CAACuB,QAAN,CAAuBC,MAAM,CAACC,UAA9B,CAA1B;AACAzB,EAAAA,KAAK,CAAC0B,SAAN,CAAgB,MAAM;AACpB,aAASC,YAAT,GAAwB;AACtBL,MAAAA,QAAQ,CAACE,MAAM,CAACC,UAAR,CAAR;AACD;;AACDD,IAAAA,MAAM,CAACI,gBAAP,CAAwB,QAAxB,EAAkCD,YAAlC;AACD,GALD;AAOA,sBACE,oBAAC,UAAD,QACGN,UAAU,CAACQ,QAAX,EAAqBC,GAArB,CAAyB,CAACC,EAAD,EAAKC,KAAL,KAAe;AACvC,WAAOnB,KAAK,GAAG,GAAR,gBACL,oBAAC,SAAD;AAAW,MAAA,GAAG,EAAG,aAAYmB,KAAM,EAAnC;AAAsC,MAAA,KAAK,EAAEnB;AAA7C,oBACE,gCAAKkB,EAAE,CAACE,MAAR,CADF,EAEGF,EAAE,CAACG,KAAH,CAASJ,GAAT,CAAcK,IAAD,iBACZ;AAAG,MAAA,GAAG,EAAG,gBAAeC,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAyC,EAAjE;AAAoE,MAAA,IAAI,EAAEH,IAAI,CAACI,EAA/E;AAAmF,MAAA,MAAM,EAAEJ,IAAI,CAACK,MAAL,IAAe,QAA1G;AAAoH,MAAA,GAAG,EAAC;AAAxH,OACGL,IAAI,CAACM,KADR,CADD,CAFH,CADK,gBAUL,oBAAC,mBAAD;AAAqB,MAAA,GAAG,EAAG,qBAAoBT,KAAM,EAArD;AAAwD,MAAA,UAAU,EAAED,EAApE;AAAwE,MAAA,KAAK,EAAElB;AAA/E,MAVF;AAYD,GAbA,CADH,CADF;AAkBD,CA3BD;;;AAHE6B,EAAAA,M;;AAgCF,eAAetB,gBAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../../styles';\nimport FooterDropdownLinks from './FooterDropdownLinks';\nimport {NavOptions} from '../../types';\nimport {ComponentLStyling, ComponentSStyling} from '../../styles/typography';\n\nconst NavSection = styled.section`\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n flex-flow: flex-start;\n color: white;\n margin-bottom: 12px;\n`;\n\nconst LinkBlock = styled.div<{ width: number }>`\n display: ${(props) => (props.width <= 768 ? 'none' : 'flex')};\n flex-direction: column;\n font-weight: normal;\n width: 100%;\n\n ${BREAKPOINTS.MEDIUM} {\n padding: 0 24px 24px 0;\n width: calc(50% - 24px);\n }\n\n ${BREAKPOINTS.LARGE} {\n width: calc(33% - 24px);\n }\n ${BREAKPOINTS.XLARGE} {\n padding: 0 32px 32px 0;\n width: calc(33% - 32px);\n }\n\n h3 {\n ${ComponentLStyling(ComponentTextStyle.Regular, 'inherit')}\n }\n\n a {\n text-decoration: none;\n padding: 8px 0px;\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.white)}\n }\n`;\n\ninterface FooterNavSectionProps {\n navOptions: NavOptions;\n mainId: string;\n}\n\nconst FooterNavSection = ({ navOptions }: FooterNavSectionProps) => {\n const [width, setWidth] = React.useState<number>(window.innerWidth);\n React.useEffect(() => {\n function handleResize() {\n setWidth(window.innerWidth);\n }\n window.addEventListener('resize', handleResize);\n });\n\n return (\n <NavSection>\n {navOptions.sections?.map((no, index) => {\n return width > 768 ? (\n <LinkBlock key={`LinkBlock_${index}`} width={width}>\n <h3>{no.header}</h3>\n {no.links.map((link) => (\n <a key={`dropdownlink_${Math.floor(Math.random() * 999999999999)}`} href={link.to} target={link.target \|\| '_blank'} rel=\"noreferrer noopener\">\n {link.label}\n </a>\n ))}\n </LinkBlock>\n ) : (\n <FooterDropdownLinks key={`LinkBlockDropdown_${index}`} navSection={no} width={width} />\n );\n })}\n </NavSection>\n );\n};\n\nexport default FooterNavSection;\n"],"file":"FooterNavSection.js"}

package/dist/esm/Footer/Components/FooterNewsletterAndSocialSection.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { BREAKPOINTS, COLORS } from '../../styles';
 import { TextField } from '../../InputFields';
 import { Facebook, Twitter, Youtube } from '../../icons/systemicons/SystemIcons';
 import { IconButton } from '../../Button';
-import { ComponentLStyling, ComponentSStyling, ComponentTextStyle } from '../../styles/typography';
+import { ComponentLStyling, ComponentTextStyle, ComponentXSStyling, ComponentXXSStyling } from '../../styles/typography';
 const NewsletterAndSocial = styled.section`
   display: flex;
   flex-direction: column;
@@ -25,7 +25,7 @@ const NewsletterEmailSection = styled.div`
   }
   label {
-    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.white)}
+    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.white)}
     margin-bottom: 2px;
   }
   div div {
@@ -82,8 +82,8 @@ const SocialMedia = styled.div`
   h4 {
     margin-top: 16px;
     margin-bottom: 8px;
-    font-weight: normal;
-    font-size: 16px;
+    ${ComponentXSStyling(ComponentTextStyle.Regular, 'inherit')}
   }
   ${BREAKPOINTS.MEDIUM} {

package/dist/esm/Footer/Components/FooterNewsletterAndSocialSection.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/Footer/Components/FooterNewsletterAndSocialSection.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","TextField","Facebook","Twitter","Youtube","IconButton","ComponentLStyling","~~ComponentSStyling~~","~~ComponentTextStyle~~","NewsletterAndSocial","section","MEDIUM","NewsletterEmailSection","div","Regular","white","NewsletterEmail","NewsletterButton","button","Bold","SocialMedia","SocialMediaButtons","neutral_600","primary_800","primary_100","primary_500","FooterNewsletterAndSocialSection","actionOnNewsletterSignup","newsletterLabel","placeholderEmail","emailInput","setEmailInput","useState","value","e","target","Math","floor","random"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAEA,~~SAASC~~,~~WAAT~~,~~EAAsBC~~,~~MAAtB~~,~~QAAoC~~,~~cAApC~~;AACA,~~SAASC~~,~~SAAT~~,~~QAA0B~~,~~mBAA1B~~;AACA,~~SAASC~~,~~QAAT~~,~~EAAmBC~~,~~OAAnB~~,~~EAA4BC~~,~~OAA5B~~,~~QAA2C~~,~~qCAA3C~~;AACA,~~SAASC~~,~~UAAT~~,~~QAA2B~~,~~cAA3B~~;AACA,~~SAASC~~,~~iBAAT~~,~~EAA4BC~~,~~iBAA5B~~,~~EAA+CC~~,~~kBAA/C~~,~~QAAyE~~,~~yBAAzE~~;~~AAEA~~,MAAMC,mBAAmB,~~GAAGX~~,MAAM,~~CAACY~~,OAAQ;AAC3C;AACA;AACA;AACA;AACA,~~IAAIX~~,WAAW,~~CAACY~~,MAAO;AACvB;AACA;AACA,CARA;AAUA,MAAMC,sBAAsB,~~GAAGd~~,MAAM,~~CAACe~~,GAAI;AAC1C;AACA;AACA;AACA,~~IAAId~~,WAAW,~~CAACY~~,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA,~~MAAMJ~~,~~iBAAiB~~,~~CAACC~~,kBAAkB,~~CAACM~~,OAApB,~~EAA6Bd~~,MAAM,~~CAACe~~,KAApC,CAA2C;~~AAClE~~;AACA;AACA;AACA;AACA,~~MAAMhB~~,WAAW,~~CAACY~~,MAAO;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAvBA;AAyBA,MAAMK,eAAe,~~GAAGlB~~,MAAM,~~CAACe~~,GAAI;AACnC;AACA;AACA;AACA;AACA;AACA,~~IAAId~~,WAAW,~~CAACY~~,MAAO;AACvB;AACA;AACA;AACA,CAVA;AAYA,MAAMM,gBAAgB,~~GAAGnB~~,MAAM,~~CAACoB~~,MAAO;AACvC;AACA;AACA;AACA,~~sBAAsBlB~~,MAAM,~~CAACe~~,KAAM;AACnC;AACA;AACA;AACA;AACA,~~IAAIT~~,iBAAiB,~~CAACE~~,kBAAkB,~~CAACW~~,IAApB,~~EAA0BnB~~,MAAM,~~CAACe~~,KAAjC,CAAwC;AAC7D;AACA,~~IAAIhB~~,WAAW,~~CAACY~~,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAnBA;AAqBA,MAAMS,WAAW,~~GAAGtB~~,MAAM,~~CAACe~~,GAAI;AAC/B,~~WAAWb~~,MAAM,~~CAACe~~,KAAM;AACxB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;~~AACA~~;AACA;AACA,IAAIhB,WAAW,~~CAACY~~,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA,CAtBA;AAwBA,MAAMU,kBAAkB,~~GAAGvB~~,MAAM,~~CAACe~~,GAAI;AACtC;AACA;AACA;AACA;AACA;AACA;AACA,~~aAAab~~,MAAM,~~CAACe~~,KAAM;AAC1B;AACA;AACA;AACA,~~cAAcf~~,MAAM,~~CAACe~~,KAAM;AAC3B;AACA,~~gBAAgBf~~,MAAM,~~CAACe~~,KAAM;AAC7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA,~~0BAA0Bf~~,MAAM,~~CAACe~~,KAAM;AACvC,~~eAAef~~,MAAM,~~CAACsB~~,WAAY;AAClC;AACA;AACA,~~0BAA0BtB~~,MAAM,~~CAACuB~~,WAAY;AAC7C,~~eAAevB~~,MAAM,~~CAACwB~~,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA;AACA,~~4BAA4BxB~~,MAAM,~~CAACe~~,KAAM;AACzC,~~iBAAiBf~~,MAAM,~~CAACsB~~,WAAY;AACpC;AACA,~~kCAAkCtB~~,MAAM,~~CAACyB~~,WAAY;AACrD;AACA;AACA;AACA,~~gBAAgBzB~~,MAAM,~~CAACsB~~,WAAY;AACnC;AACA;AACA;AACA;AACA,~~IAAIvB~~,WAAW,~~CAACY~~,MAAO;AACvB;AACA;AACA,CAhDA;;AAwDA,MAAMe,gCAAgC,GAAG,CAAC;AAAEC,EAAAA,wBAAF;AAA4BC,EAAAA,eAA5B;AAA6CC,EAAAA;AAA7C,CAAD,KAAuG;AAC9I,QAAM,CAACC,UAAD,EAAaC,aAAb,~~IAA8BlC~~,KAAK,~~CAACmC~~,QAAN,CAAuB,EAAvB,CAApC;AACA,sBACE,oBAAC,mBAAD,qBACE,oBAAC,sBAAD,qBACE,mCAAQJ,eAAR,CADF,eAEE,oBAAC,eAAD,qBACE,oBAAC,SAAD;AAAW,IAAA,EAAE,EAAC,iBAAd;AAAgC,IAAA,aAAa,EAAE,IAA/C;AAAqD,IAAA,WAAW,EAAEC,gBAAlE;AAAoF,IAAA,KAAK,EAAEC,UAA3F;AAAuG,IAAA,QAAQ,EAAGG,KAAD,IAAmBF,aAAa,CAACE,KAAD;AAAjJ,IADF,eAEE,oBAAC,gBAAD;AAAkB,IAAA,OAAO,EAAGC,CAAD,IAAYP,wBAAwB,IAAIA,wBAAwB,CAACO,CAAC,CAACC,MAAF,CAASF,KAAV;AAA3F,eAFF,CAFF,CADF,eAQE,oBAAC,WAAD,qBACE,4DADF,eAEE,oBAAC,kBAAD,qBACE;AAAG,IAAA,GAAG,EAAG,eAAcG,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAyC,EAAhE;AAAmE,IAAA,IAAI,EAAC,0CAAxE;AAAmH,IAAA,MAAM,EAAC,QAA1H;AAAmI,IAAA,GAAG,EAAC;AAAvI,kBACE,oBAAC,UAAD;AAAY,IAAA,OAAO,EAAC,WAApB;AAAgC,IAAA,MAAM,EAAE,MAAM,CAAE,CAAhD;AAAkD,IAAA,QAAQ,EAAE,CAAC;AAA7D,kBACE,oBAAC,QAAD,OADF,CADF,CADF,eAME;AAAG,IAAA,GAAG,EAAG,eAAcF,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAyC,EAAhE;AAAmE,IAAA,IAAI,EAAC,oCAAxE;AAA6G,IAAA,MAAM,EAAC,QAApH;AAA6H,IAAA,GAAG,EAAC;AAAjI,kBACE,oBAAC,UAAD;AAAY,IAAA,OAAO,EAAC,WAApB;AAAgC,IAAA,MAAM,EAAE,MAAM,CAAE,CAAhD;AAAkD,IAAA,QAAQ,EAAE,CAAC;AAA7D,kBACE,oBAAC,OAAD,OADF,CADF,CANF,eAWE;AAAG,IAAA,GAAG,EAAG,eAAcF,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAyC,EAAhE;AAAmE,IAAA,IAAI,EAAC,6CAAxE;AAAsH,IAAA,MAAM,EAAC,QAA7H;AAAsI,IAAA,GAAG,EAAC;AAA1I,kBACE,oBAAC,UAAD;AAAY,IAAA,OAAO,EAAC,WAApB;AAAgC,IAAA,MAAM,EAAE,MAAM,CAAE,CAAhD;AAAkD,IAAA,QAAQ,EAAE,CAAC;AAA7D,kBACE,oBAAC,OAAD,OADF,CADF,CAXF,CAFF,CARF,CADF;AA+BD,CAjCD;;;AALEX,EAAAA,wB;AACAC,EAAAA,e;AACAC,EAAAA,gB;;AAsCF,eAAeH,gCAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../../styles';\nimport { TextField } from '../../InputFields';\nimport { Facebook, Twitter, Youtube } from '../../icons/systemicons/SystemIcons';\nimport { IconButton } from '../../Button';\nimport { ComponentLStyling, ComponentSStyling, ComponentTextStyle } from '../../styles/typography';\n\nconst NewsletterAndSocial = styled.section`\n display: flex;\n flex-direction: column;\n margin-bottom: 16px;\n\n ${BREAKPOINTS.MEDIUM} {\n flex-direction: row;\n }\n`;\n\nconst NewsletterEmailSection = styled.div`\n width: 100%;\n margin: 16px auto 0 auto;\n\n ${BREAKPOINTS.MEDIUM} {\n width: 60%;\n margin: 16px 0 0 0;\n }\n\n label {\n ${~~ComponentSStyling~~(ComponentTextStyle.Regular, COLORS.white)}\n margin-bottom: 2px;\n }\n div div {\n width: 100%;\n ${BREAKPOINTS.MEDIUM} {\n width: calc(100% - 82px);\n width: 288px;\n }\n }\n input {\n height: 48px;\n }\n`;\n\nconst NewsletterEmail = styled.div`\n display: flex;\n flex-direction: column;\n margin-top: 2px;\n margin: 2px auto 0 auto;\n\n ${BREAKPOINTS.MEDIUM} {\n margin: 2px 0 0 0;\n flex-direction: row;\n }\n`;\n\nconst NewsletterButton = styled.button`\n background: transparent;\n width: 100%;\n height: 40px;\n border: 2px solid ${COLORS.white};\n box-sizing: border-box;\n border-radius: 8px;\n margin: 8px 0 4px 0;\n\n ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.white)}\n\n ${BREAKPOINTS.MEDIUM} {\n width: 94px;\n margin: auto 0 4px 8px;\n }\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst SocialMedia = styled.div`\n color: ${COLORS.white};\n margin: 0 auto;\n\n button div {\n box-sizing: border-box;\n border-radius: 4px;\n }\n\n h4 {\n margin-top: 16px;\n margin-bottom: 8px;\n ~~font-weight: normal;\~~n ~~font-size:~~ ~~16px;\~~n }\n\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 0 0 auto;\n button {\n margin: 0 0 0 12px;\n }\n }\n`;\n\nconst SocialMediaButtons = styled.div`\n display: flex;\n justify-content: center;\n\n button div {\n display: flex;\n background-color: transparent;\n color: ${COLORS.white};\n margin: 0 0 0 20px;\n\n svg {\n fill: ${COLORS.white};\n path {\n fill: ${COLORS.white};\n }\n }\n\n &:first-child {\n margin: 0;\n }\n &:hover {\n background-color: ${COLORS.white};\n color: ${COLORS.neutral_600};\n }\n &:active {\n background-color: ${COLORS.primary_800};\n color: ${COLORS.primary_100};\n }\n }\n a {\n &:focus {\n outline: none;\n div {\n background-color: ${COLORS.white};\n color: ${COLORS.neutral_600};\n outline: none;\n box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n }\n div svg path,\n div svg {\n fill: ${COLORS.neutral_600};\n }\n }\n }\n\n ${BREAKPOINTS.MEDIUM} {\n justify-content: flex-end;\n }\n`;\n\ninterface FooterNewsletterAndSocialSection {\n actionOnNewsletterSignup?: (email: string) => void;\n newsletterLabel: string;\n placeholderEmail?: string;\n}\n\nconst FooterNewsletterAndSocialSection = ({ actionOnNewsletterSignup, newsletterLabel, placeholderEmail }: FooterNewsletterAndSocialSection) => {\n const [emailInput, setEmailInput] = React.useState<string>('');\n return (\n <NewsletterAndSocial>\n <NewsletterEmailSection>\n <label>{newsletterLabel}</label>\n <NewsletterEmail>\n <TextField id=\"NewsletterEmail\" withoutBorder={true} placeholder={placeholderEmail} value={emailInput} onChange={(value: string) => setEmailInput(value)} />\n <NewsletterButton onClick={(e: any) => actionOnNewsletterSignup && actionOnNewsletterSignup(e.target.value)}>Sign up</NewsletterButton>\n </NewsletterEmail>\n </NewsletterEmailSection>\n <SocialMedia>\n <h4>Follow us on social media</h4>\n <SocialMediaButtons>\n <a key={`socialmedia_${Math.floor(Math.random() * 999999999999)}`} href=\"https://www.facebook.com/LaerdalMedical/\" target=\"_blank\" rel=\"noreferrer noopener\">\n <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n <Facebook />\n </IconButton>\n </a>\n <a key={`socialmedia_${Math.floor(Math.random() * 999999999999)}`} href=\"https://twitter.com/laerdalmedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n <Twitter />\n </IconButton>\n </a>\n <a key={`socialmedia_${Math.floor(Math.random() * 999999999999)}`} href=\"https://www.youtube.com/user/LaerdalMedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n <Youtube />\n </IconButton>\n </a>\n </SocialMediaButtons>\n </SocialMedia>\n </NewsletterAndSocial>\n );\n};\n\nexport default FooterNewsletterAndSocialSection;\n"],"file":"FooterNewsletterAndSocialSection.js"}
1	+ {"version":3,"sources":["../../../../src/Footer/Components/FooterNewsletterAndSocialSection.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","TextField","Facebook","Twitter","Youtube","IconButton","ComponentLStyling","ComponentTextStyle","ComponentXSStyling","ComponentXXSStyling","NewsletterAndSocial","section","MEDIUM","NewsletterEmailSection","div","Regular","white","NewsletterEmail","NewsletterButton","button","Bold","SocialMedia","SocialMediaButtons","neutral_600","primary_800","primary_100","primary_500","FooterNewsletterAndSocialSection","actionOnNewsletterSignup","newsletterLabel","placeholderEmail","emailInput","setEmailInput","useState","value","e","target","Math","floor","random"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {BREAKPOINTS, COLORS} from '../../styles';\nimport {TextField} from '../../InputFields';\nimport {Facebook, Twitter, Youtube} from '../../icons/systemicons/SystemIcons';\nimport {IconButton} from '../../Button';\nimport {\n ComponentLStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n ComponentXXSStyling\n} from '../../styles/typography';\n\nconst NewsletterAndSocial = styled.section`\n display: flex;\n flex-direction: column;\n margin-bottom: 16px;\n\n ${BREAKPOINTS.MEDIUM} {\n flex-direction: row;\n }\n`;\n\nconst NewsletterEmailSection = styled.div`\n width: 100%;\n margin: 16px auto 0 auto;\n\n ${BREAKPOINTS.MEDIUM} {\n width: 60%;\n margin: 16px 0 0 0;\n }\n\n label {\n ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.white)}\n margin-bottom: 2px;\n }\n div div {\n width: 100%;\n ${BREAKPOINTS.MEDIUM} {\n width: calc(100% - 82px);\n width: 288px;\n }\n }\n input {\n height: 48px;\n }\n`;\n\nconst NewsletterEmail = styled.div`\n display: flex;\n flex-direction: column;\n margin-top: 2px;\n margin: 2px auto 0 auto;\n\n ${BREAKPOINTS.MEDIUM} {\n margin: 2px 0 0 0;\n flex-direction: row;\n }\n`;\n\nconst NewsletterButton = styled.button`\n background: transparent;\n width: 100%;\n height: 40px;\n border: 2px solid ${COLORS.white};\n box-sizing: border-box;\n border-radius: 8px;\n margin: 8px 0 4px 0;\n\n ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.white)}\n\n ${BREAKPOINTS.MEDIUM} {\n width: 94px;\n margin: auto 0 4px 8px;\n }\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst SocialMedia = styled.div`\n color: ${COLORS.white};\n margin: 0 auto;\n\n button div {\n box-sizing: border-box;\n border-radius: 4px;\n }\n\n h4 {\n margin-top: 16px;\n margin-bottom: 8px;\n \n ${ComponentXSStyling(ComponentTextStyle.Regular, 'inherit')}\n }\n\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 0 0 auto;\n button {\n margin: 0 0 0 12px;\n }\n }\n`;\n\nconst SocialMediaButtons = styled.div`\n display: flex;\n justify-content: center;\n\n button div {\n display: flex;\n background-color: transparent;\n color: ${COLORS.white};\n margin: 0 0 0 20px;\n\n svg {\n fill: ${COLORS.white};\n path {\n fill: ${COLORS.white};\n }\n }\n\n &:first-child {\n margin: 0;\n }\n &:hover {\n background-color: ${COLORS.white};\n color: ${COLORS.neutral_600};\n }\n &:active {\n background-color: ${COLORS.primary_800};\n color: ${COLORS.primary_100};\n }\n }\n a {\n &:focus {\n outline: none;\n div {\n background-color: ${COLORS.white};\n color: ${COLORS.neutral_600};\n outline: none;\n box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n }\n div svg path,\n div svg {\n fill: ${COLORS.neutral_600};\n }\n }\n }\n\n ${BREAKPOINTS.MEDIUM} {\n justify-content: flex-end;\n }\n`;\n\ninterface FooterNewsletterAndSocialSection {\n actionOnNewsletterSignup?: (email: string) => void;\n newsletterLabel: string;\n placeholderEmail?: string;\n}\n\nconst FooterNewsletterAndSocialSection = ({ actionOnNewsletterSignup, newsletterLabel, placeholderEmail }: FooterNewsletterAndSocialSection) => {\n const [emailInput, setEmailInput] = React.useState<string>('');\n return (\n <NewsletterAndSocial>\n <NewsletterEmailSection>\n <label>{newsletterLabel}</label>\n <NewsletterEmail>\n <TextField id=\"NewsletterEmail\" withoutBorder={true} placeholder={placeholderEmail} value={emailInput} onChange={(value: string) => setEmailInput(value)} />\n <NewsletterButton onClick={(e: any) => actionOnNewsletterSignup && actionOnNewsletterSignup(e.target.value)}>Sign up</NewsletterButton>\n </NewsletterEmail>\n </NewsletterEmailSection>\n <SocialMedia>\n <h4>Follow us on social media</h4>\n <SocialMediaButtons>\n <a key={`socialmedia_${Math.floor(Math.random() * 999999999999)}`} href=\"https://www.facebook.com/LaerdalMedical/\" target=\"_blank\" rel=\"noreferrer noopener\">\n <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n <Facebook />\n </IconButton>\n </a>\n <a key={`socialmedia_${Math.floor(Math.random() * 999999999999)}`} href=\"https://twitter.com/laerdalmedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n <Twitter />\n </IconButton>\n </a>\n <a key={`socialmedia_${Math.floor(Math.random() * 999999999999)}`} href=\"https://www.youtube.com/user/LaerdalMedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n <Youtube />\n </IconButton>\n </a>\n </SocialMediaButtons>\n </SocialMedia>\n </NewsletterAndSocial>\n );\n};\n\nexport default FooterNewsletterAndSocialSection;\n"],"file":"FooterNewsletterAndSocialSection.js"}

package/dist/esm/Footer/Components/FooterTop.js CHANGED Viewed

@@ -5,6 +5,7 @@ import animateScrollTo from 'animated-scroll-to';
 import { COLORS } from '../../styles';
 import Logo from '../../GlobalNavigationBar/Logo';
 import { ArrowLineUp } from '../../icons/systemicons/SystemIcons';
+import { ComponentTextStyle, ComponentXSStyling } from '../../styles/typography';
 const FooterTopSection = styled.section`
   min-height: 8px;
   color: white;
@@ -29,9 +30,8 @@ const ToTop = styled.div`
     cursor: pointer;
   }
   span {
-    font-weight: bold;
-    font-size: 14px;
     margin: 14px auto 0 auto;
+    ${ComponentXSStyling(ComponentTextStyle.UppercaseBold, 'inherit')}
   }
   &:hover:not(:disabled) {

package/dist/esm/Footer/Components/FooterTop.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/Footer/Components/FooterTop.tsx"],"names":["React","styled","animateScrollTo","COLORS","Logo","ArrowLineUp","FooterTopSection","section","ToTop","div","primary_20","primary_700","primary_500","primary_100","primary_800","FooterTop","sitename","showBetaTag","toTopText","isPressingEnter","e","key","preventDefault","stopPropagation","action","white","neutral_800"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,eAAP,MAA4B,oBAA5B;AAEA,~~SAASC~~,~~MAAT~~,~~QAAuB~~,~~cAAvB~~;AACA,OAAOC,IAAP,MAAiB,gCAAjB;AACA,~~SAASC~~,~~WAAT~~,~~QAA4B~~,~~qCAA5B~~;~~AAGA~~,MAAMC,gBAAgB,~~GAAGL~~,MAAM,~~CAACM~~,OAAQ;AACxC;AACA;AACA;AACA;AACA;AACA,CANA;AAQA,MAAMC,KAAK,~~GAAGP~~,MAAM,~~CAACQ~~,GAAI;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;~~AACA~~;AACA;AACA;AACA~~;AACA~~,~~wBAAwBN~~,MAAM,~~CAACO~~,UAAW;AAC1C;AACA;AACA,~~cAAcP~~,MAAM,~~CAACQ~~,WAAY;AACjC;AACA;AACA,~~eAAeR~~,MAAM,~~CAACQ~~,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA,~~8BAA8BR~~,MAAM,~~CAACS~~,WAAY;AACjD;AACA;AACA;AACA,~~kBAAkBT~~,MAAM,~~CAACU~~,WAAY;AACrC;AACA;AACA;AACA,~~cAAcV~~,MAAM,~~CAACW~~,WAAY;AACjC;AACA;AACA,~~eAAeX~~,MAAM,~~CAACW~~,WAAY;AAClC;AACA;AACA,~~CAjDA~~;;~~AAyDA~~,MAAMC,SAAS,GAAG,CAAC;AAAEC,EAAAA,QAAF;AAAYC,EAAAA,WAAZ;AAAyBC,EAAAA;AAAzB,CAAD,KAA0D;AAC1E,QAAMC,eAAe,GAAIC,CAAD,IAAY;AAClC,QAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuB;AACrBD,MAAAA,CAAC,CAACE,cAAF;AACAF,MAAAA,CAAC,CAACG,eAAF;AACA,aAAO,IAAP;AACD;;AACD,WAAO,KAAP;AACD,GAPD;;AAQA,QAAMC,MAAM,GAAG,MAAM;~~AACnBtB~~,IAAAA,eAAe,CAAC,CAAD,CAAf;AACD,GAFD;;AAGA,sBACE,oBAAC,gBAAD,qBACE,oBAAC,IAAD;AACE,IAAA,IAAI,~~EAAEc~~,QAAQ,IAAI,EADpB;AAEE,IAAA,WAAW,EAAEC,WAFf;AAGE,IAAA,KAAK,~~EAAEd~~,MAAM,~~CAACsB~~,KAHhB;AAIE,IAAA,oBAAoB,EAAE,IAJxB;AAKE,IAAA,sBAAsB,~~EAAEtB~~,MAAM,~~CAACsB~~,KALjC;AAME,IAAA,YAAY,~~EAAEtB~~,MAAM,~~CAACuB~~;AANvB,IADF,eASE,oBAAC,KAAD;AAAO,IAAA,QAAQ,EAAE,CAAjB;AAAoB,IAAA,SAAS,EAAGN,CAAD,IAAaD,eAAe,CAACC,CAAD,CAAf,GAAqBI,MAAM,EAA3B,GAAgC,IAA5E;AAAmF,IAAA,OAAO,EAAEA;AAA5F,kBACE,oBAAC,WAAD;AAAa,IAAA,IAAI,EAAC,MAAlB;AAAyB,IAAA,KAAK,~~EAAErB~~,MAAM,~~CAACsB~~;AAAvC,IADF,eAEE,kCAAOP,SAAP,CAFF,CATF,CADF;AAgBD,CA5BD;;;AALEF,EAAAA,Q;AACAC,EAAAA,W;AACAC,EAAAA,S;;AAiCF,eAAeH,SAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport animateScrollTo from 'animated-scroll-to';\n\nimport { COLORS } from '../../styles';\nimport Logo from '../../GlobalNavigationBar/Logo';\nimport { ArrowLineUp } from '../../icons/systemicons/SystemIcons';\nimport { ComponentXSStyling~~, ComponentTextStyle~~ } from '../../styles/typography';\n\nconst FooterTopSection = styled.section`\n min-height: 8px;\n color: white;\n display: flex;\n flex-direction: row;\n margin-bottom: 16px;\n`;\n\nconst ToTop = styled.div`\n display: flex;\n flex-direction: column;\n margin: auto 0 auto auto;\n border-radius: 4px;\n height: 48px;\n width: 48px;\n padding: 8px;\n\n svg {\n margin: 0 auto;\n }\n\n &:hover {\n cursor: pointer;\n }\n span {\n ~~font-weight: bold;\n font-size: 14px;\n~~ margin: 14px auto 0 auto;\n }\n\n &:hover:not(:disabled) {\n background-color: ${COLORS.primary_20};\n svg path,\n svg {\n fill: ${COLORS.primary_700};\n }\n span {\n color: ${COLORS.primary_700};\n }\n }\n\n &:focus:not(:disabled) {\n outline: none;\n box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n }\n\n &:active:not(:disabled) {\n background: ${COLORS.primary_100};\n box-shadow: none;\n svg path,\n svg {\n fill: ${COLORS.primary_800};\n }\n span {\n color: ${COLORS.primary_800};\n }\n }\n`;\n\ninterface FooterTopProps {\n sitename?: string;\n showBetaTag?: boolean;\n toTopText: string;\n}\n\nconst FooterTop = ({ sitename, showBetaTag, toTopText }: FooterTopProps) => {\n const isPressingEnter = (e: any) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n return true;\n }\n return false;\n };\n const action = () => {\n animateScrollTo(0);\n };\n return (\n <FooterTopSection>\n <Logo\n name={sitename \|\| ''}\n showBetaTag={showBetaTag}\n color={COLORS.white}\n noSizeChangeOnMobile={true}\n betaTagBackgroundColor={COLORS.white}\n betaTagColor={COLORS.neutral_800}\n />\n <ToTop tabIndex={0} onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)} onClick={action}>\n <ArrowLineUp size=\"24px\" color={COLORS.white} />\n <span>{toTopText}</span>\n </ToTop>\n </FooterTopSection>\n );\n};\n\nexport default FooterTop;\n"],"file":"FooterTop.js"}
1	+ {"version":3,"sources":["../../../../src/Footer/Components/FooterTop.tsx"],"names":["React","styled","animateScrollTo","COLORS","Logo","ArrowLineUp","ComponentTextStyle","ComponentXSStyling","FooterTopSection","section","ToTop","div","UppercaseBold","primary_20","primary_700","primary_500","primary_100","primary_800","FooterTop","sitename","showBetaTag","toTopText","isPressingEnter","e","key","preventDefault","stopPropagation","action","white","neutral_800"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,eAAP,MAA4B,oBAA5B;AAEA,SAAQC,MAAR,QAAqB,cAArB;AACA,OAAOC,IAAP,MAAiB,gCAAjB;AACA,SAAQC,WAAR,QAA0B,qCAA1B;AACA,SAAQC,kBAAR,EAA4BC,kBAA5B,QAAqD,yBAArD;AAEA,MAAMC,gBAAgB,GAAGP,MAAM,CAACQ,OAAQ;AACxC;AACA;AACA;AACA;AACA;AACA,CANA;AAQA,MAAMC,KAAK,GAAGT,MAAM,CAACU,GAAI;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMJ,kBAAkB,CAACD,kBAAkB,CAACM,aAApB,EAAmC,SAAnC,CAA8C;AACtE;AACA;AACA;AACA,wBAAwBT,MAAM,CAACU,UAAW;AAC1C;AACA;AACA,cAAcV,MAAM,CAACW,WAAY;AACjC;AACA;AACA,eAAeX,MAAM,CAACW,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA,8BAA8BX,MAAM,CAACY,WAAY;AACjD;AACA;AACA;AACA,kBAAkBZ,MAAM,CAACa,WAAY;AACrC;AACA;AACA;AACA,cAAcb,MAAM,CAACc,WAAY;AACjC;AACA;AACA,eAAed,MAAM,CAACc,WAAY;AAClC;AACA;AACA,CAhDA;;AAwDA,MAAMC,SAAS,GAAG,CAAC;AAAEC,EAAAA,QAAF;AAAYC,EAAAA,WAAZ;AAAyBC,EAAAA;AAAzB,CAAD,KAA0D;AAC1E,QAAMC,eAAe,GAAIC,CAAD,IAAY;AAClC,QAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuB;AACrBD,MAAAA,CAAC,CAACE,cAAF;AACAF,MAAAA,CAAC,CAACG,eAAF;AACA,aAAO,IAAP;AACD;;AACD,WAAO,KAAP;AACD,GAPD;;AAQA,QAAMC,MAAM,GAAG,MAAM;AACnBzB,IAAAA,eAAe,CAAC,CAAD,CAAf;AACD,GAFD;;AAGA,sBACE,oBAAC,gBAAD,qBACE,oBAAC,IAAD;AACE,IAAA,IAAI,EAAEiB,QAAQ,IAAI,EADpB;AAEE,IAAA,WAAW,EAAEC,WAFf;AAGE,IAAA,KAAK,EAAEjB,MAAM,CAACyB,KAHhB;AAIE,IAAA,oBAAoB,EAAE,IAJxB;AAKE,IAAA,sBAAsB,EAAEzB,MAAM,CAACyB,KALjC;AAME,IAAA,YAAY,EAAEzB,MAAM,CAAC0B;AANvB,IADF,eASE,oBAAC,KAAD;AAAO,IAAA,QAAQ,EAAE,CAAjB;AAAoB,IAAA,SAAS,EAAGN,CAAD,IAAaD,eAAe,CAACC,CAAD,CAAf,GAAqBI,MAAM,EAA3B,GAAgC,IAA5E;AAAmF,IAAA,OAAO,EAAEA;AAA5F,kBACE,oBAAC,WAAD;AAAa,IAAA,IAAI,EAAC,MAAlB;AAAyB,IAAA,KAAK,EAAExB,MAAM,CAACyB;AAAvC,IADF,eAEE,kCAAOP,SAAP,CAFF,CATF,CADF;AAgBD,CA5BD;;;AALEF,EAAAA,Q;AACAC,EAAAA,W;AACAC,EAAAA,S;;AAiCF,eAAeH,SAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport animateScrollTo from 'animated-scroll-to';\n\nimport {COLORS} from '../../styles';\nimport Logo from '../../GlobalNavigationBar/Logo';\nimport {ArrowLineUp} from '../../icons/systemicons/SystemIcons';\nimport {ComponentTextStyle, ComponentXSStyling} from '../../styles/typography';\n\nconst FooterTopSection = styled.section`\n min-height: 8px;\n color: white;\n display: flex;\n flex-direction: row;\n margin-bottom: 16px;\n`;\n\nconst ToTop = styled.div`\n display: flex;\n flex-direction: column;\n margin: auto 0 auto auto;\n border-radius: 4px;\n height: 48px;\n width: 48px;\n padding: 8px;\n\n svg {\n margin: 0 auto;\n }\n\n &:hover {\n cursor: pointer;\n }\n span {\n margin: 14px auto 0 auto;\n ${ComponentXSStyling(ComponentTextStyle.UppercaseBold, 'inherit')}\n }\n\n &:hover:not(:disabled) {\n background-color: ${COLORS.primary_20};\n svg path,\n svg {\n fill: ${COLORS.primary_700};\n }\n span {\n color: ${COLORS.primary_700};\n }\n }\n\n &:focus:not(:disabled) {\n outline: none;\n box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n }\n\n &:active:not(:disabled) {\n background: ${COLORS.primary_100};\n box-shadow: none;\n svg path,\n svg {\n fill: ${COLORS.primary_800};\n }\n span {\n color: ${COLORS.primary_800};\n }\n }\n`;\n\ninterface FooterTopProps {\n sitename?: string;\n showBetaTag?: boolean;\n toTopText: string;\n}\n\nconst FooterTop = ({ sitename, showBetaTag, toTopText }: FooterTopProps) => {\n const isPressingEnter = (e: any) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n return true;\n }\n return false;\n };\n const action = () => {\n animateScrollTo(0);\n };\n return (\n <FooterTopSection>\n <Logo\n name={sitename \|\| ''}\n showBetaTag={showBetaTag}\n color={COLORS.white}\n noSizeChangeOnMobile={true}\n betaTagBackgroundColor={COLORS.white}\n betaTagColor={COLORS.neutral_800}\n />\n <ToTop tabIndex={0} onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)} onClick={action}>\n <ArrowLineUp size=\"24px\" color={COLORS.white} />\n <span>{toTopText}</span>\n </ToTop>\n </FooterTopSection>\n );\n};\n\nexport default FooterTop;\n"],"file":"FooterTop.js"}

package/dist/esm/GlobalNavigationBar/Logo.js CHANGED Viewed

@@ -3,7 +3,8 @@ import * as React from 'react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { LaerdalLogo, LaerdalWhiteLogo } from '../assets';
-import { BREAKPOINTS, COLORS } from '../styles';
+import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';
+import { ComponentMStyling, ComponentXSStyling } from '../styles/typography';
 const StyledLink = styled(Link)`
   text-align: center;
   text-decoration: none;
@@ -44,27 +45,23 @@ const Name = styled.span`
   margin-left: 12px;
   padding-left: 12px;
   border-left: 1px solid ${props => props.color || COLORS.black};
-  font-style: normal;
-  font-weight: 300;
-  font-size: ${props => props.noSizeChangeOnMobile ? '18px' : '14px'};
-  line-height: 140%;
   letter-spacing: -0.02em;
-  color: ${props => props.color || COLORS.black};
+  ${props => props.noSizeChangeOnMobile ? ComponentMStyling(ComponentTextStyle.Regular, props.color || COLORS.black) : ComponentXSStyling(ComponentTextStyle.Regular, props.color || COLORS.black)}
   ${BREAKPOINTS.MEDIUM} {
-    font-size: 18px;
+    ${props => ComponentMStyling(ComponentTextStyle.Regular, props.color || COLORS.black)}
   }
 `;
 const BetaTag = styled.span`
   background-color: ${props => props.backgroundColor || COLORS.accent2_500};
-  color: ${props => props.color || COLORS.white};
-  font-weight: bold;
-  font-size: 10px;
   padding: 4px;
-  line-height: 12px;
   margin-left: 8px;
   margin-top: 2px;
   border-left: none;
+  border-radius: 2px;
+  ${props => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.color || COLORS.white)}
 `;
 const Logo = ({

package/dist/esm/GlobalNavigationBar/Logo.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/GlobalNavigationBar/Logo.tsx"],"names":["React","Link","styled","LaerdalLogo","LaerdalWhiteLogo","BREAKPOINTS","COLORS","StyledLink","props","color","MEDIUM","LogoContainer","div","Name","span","black","noSizeChangeOnMobile","BetaTag","backgroundColor","accent2_500","white","Logo","name","showBetaTag","onClick","to","betaTagBackgroundColor","betaTagColor","e","preventDefault"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,~~SAASC~~,~~IAAT~~,~~QAAqB~~,~~kBAArB~~;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,~~SAASC~~,~~WAAT~~,~~EAAsBC~~,~~gBAAtB~~,~~QAA8C~~,~~WAA9C~~;AACA,~~SAASC~~,~~WAAT~~,~~EAAsBC~~,~~MAAtB~~,~~QAAoC~~,~~WAApC~~;AAEA,MAAMC,UAAU,~~GAAGL~~,MAAM,CAACD,IAAD,CAA2B;AACpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,~~aAAcO~~,KAAD,IAAWA,KAAK,CAACC,KAAM;AACpC,~~MAAMJ~~,WAAW,~~CAACK~~,MAAO;AACzB;AACA;AACA;AACA;AACA,CAjBA;AAmBA,MAAMC,aAAa,~~GAAGT~~,MAAM,~~CAACU~~,GAAI;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,~~IAAIP~~,WAAW,~~CAACK~~,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAjBA;AAmBA,MAAMG,IAAI,~~GAAGX~~,MAAM,~~CAACY~~,IAAwD;AAC5E;AACA;AACA,2BAA4BN,KAAD,IAAWA,KAAK,CAACC,KAAN,~~IAAeH~~,MAAM,~~CAACS~~,KAAM;AAClE;AACA;AACA,~~eAAgBP~~,KAAD,~~IAAYA~~,KAAK,CAACQ,oBAAN,~~GAA6B~~,~~MAA7B~~,~~GAAsC~~,~~MAAQ;AACzE;AACA;AACA~~,~~WAAYR~~,~~KAAD~~,~~IAAWA~~,KAAK,CAACC,KAAN,~~IAAeH~~,MAAM,~~CAACS~~,~~KAAM~~;~~AAClD~~;AACA,~~IAAIV~~,WAAW,~~CAACK~~,MAAO;AACvB;~~AACA~~;AACA,~~CAdA~~;~~AAgBA~~,~~MAAMO~~,OAAO,~~GAAGf~~,MAAM,~~CAACY~~,IAAmD;AAC1E,sBAAuBN,KAAD,IAAWA,KAAK,~~CAACU~~,eAAN,~~IAAyBZ~~,MAAM,~~CAACa~~,WAAY;AAC7E,~~WAAYX~~,KAAD,~~IAAWA~~,KAAK,CAACC,KAAN,~~IAAeH~~,MAAM,~~CAACc~~,~~KAAM~~;~~AAClD;AACA;AACA;AACA;AACA;AACA;AACA;AACA~~,~~CAVA~~;;~~AAuBA~~,MAAMC,IAAI,GAAG,CAAC;AAAEC,EAAAA,IAAF;AAAQC,EAAAA,WAAR;AAAqBC,EAAAA,OAArB;AAA8BC,EAAAA,EAA9B;~~AAAkChB~~,EAAAA,KAAlC;AAAyCO,EAAAA,oBAAzC;AAA+DU,EAAAA,sBAA/D;AAAuFC,EAAAA;AAAvF,CAAD,KAAqJ;AAChK,sBACE,oBAAC,aAAD,qBACE,oBAAC,UAAD;AACE,IAAA,EAAE,EAAEF,EAAE,IAAI,GADZ;AAEE,IAAA,WAAW,EAAGG,CAAD,IAAYA,CAAC,CAACC,cAAF,EAF3B;AAGE,IAAA,OAAO,EAAE,MAAM;AACb,UAAIL,OAAJ,EAAa;AACXA,QAAAA,OAAO;AACR;AACF,KAPH;AAQE,IAAA,KAAK,~~EAAEf~~;AART,KASGA,KAAK,~~KAAKH~~,MAAM,~~CAACc~~,KAAjB,gBAAyB,oBAAC,gBAAD,OAAzB,gBAAgD,oBAAC,WAAD,OATnD,eAUE,oBAAC,IAAD;AAAM,IAAA,KAAK,~~EAAEX~~,KAAb;AAAoB,IAAA,oBAAoB,EAAEO,oBAAoB,IAAI;AAAlE,~~KACGM~~,IADH,CAVF,EAaGC,WAAW,iBACV,oBAAC,OAAD;AAAS,IAAA,eAAe,EAAEG,sBAA1B;AAAkD,IAAA,KAAK,EAAEC;AAAzD,YAdJ,CADF,CADF;AAuBD,CAxBD;;;AAVEL,EAAAA,I;AACAC,EAAAA,W;AACAC,EAAAA,O;AACAC,EAAAA,E;~~AACAhB~~,EAAAA,K;AACAO,EAAAA,oB;~~AACAU~~,EAAAA,sB;AACAC,EAAAA,Y;;AA6BF,eAAeN,IAAf","sourcesContent":["import * as React from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { LaerdalLogo, LaerdalWhiteLogo } from '../assets';\nimport { BREAKPOINTS, COLORS } from '../styles';\n\nconst StyledLink = styled(Link)<{ color?: string }>`\n text-align: center;\n text-decoration: none;\n display: flex;\n align-items: center;\n &:focus-within {\n outline: none;\n }\n svg {\n width: 66px;\n height: 36px;\n color: ${(props) => props.color};\n ${BREAKPOINTS.MEDIUM} {\n width: 88px;\n height: 48px;\n }\n }\n`;\n\nconst LogoContainer = styled.div`\n display: flex;\n align-items: center;\n height: 40px;\n margin-right: 16px;\n box-sizing: border-box;\n padding: 24px 0;\n\n ${BREAKPOINTS.MEDIUM} {\n margin-top: 8px;\n margin-bottom: 7px;\n }\n\n &:focus-within {\n box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);\n outline: none;\n }\n`;\n\nconst Name = styled.span<{ color?: string; noSizeChangeOnMobile: boolean }>`\n margin-left: 12px;\n padding-left: 12px;\n border-left: 1px solid ${(props) => props.color \|\| COLORS.black};\n ~~font~~-~~style~~: ~~normal;\n font~~-~~weight: 300~~;\n ~~font-size:~~ ${(props) => (props.noSizeChangeOnMobile ? ~~'18px'~~ : ~~'14px')};\n line-height:~~ ~~140%;\n letter-spacing: -0~~.~~02em;\~~n ~~color~~: ${(~~props)~~ => props.color \|\| COLORS.black};\n\n ${BREAKPOINTS.MEDIUM} {\n ~~font-size:~~ ~~18px;\~~n }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; color?: string }>`\n background-color: ${(props) => props.backgroundColor \|\| COLORS.accent2_500};\n ~~color: ${(props) => props.color \|\| COLORS.white};\n font-weight: bold;\n font-size: 10px;\n~~ padding: 4px;\n ~~line-height: 12px;\n~~ margin-left: 8px;\n margin-top: 2px;\n border-left: none;\n`;\n\ntype LogoProps = {\n name: string;\n showBetaTag?: boolean;\n onClick?: () => void;\n to?: string;\n color?: string;\n noSizeChangeOnMobile?: boolean;\n betaTagBackgroundColor?: string;\n betaTagColor?: string;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor }: LogoProps): React.ReactElement<LogoProps> => {\n return (\n <LogoContainer>\n <StyledLink\n to={to \|\| '/'}\n onMouseDown={(e: any) => e.preventDefault()}\n onClick={() => {\n if (onClick) {\n onClick();\n }\n }}\n color={color}>\n {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n <Name color={color} noSizeChangeOnMobile={noSizeChangeOnMobile \|\| false}>\n {name}\n </Name>\n {showBetaTag && (\n <BetaTag backgroundColor={betaTagBackgroundColor} color={betaTagColor}>\n BETA\n </BetaTag>\n )}\n </StyledLink>\n </LogoContainer>\n );\n};\n\nexport default Logo;\n"],"file":"Logo.js"}
1	+ {"version":3,"sources":["../../../src/GlobalNavigationBar/Logo.tsx"],"names":["React","Link","styled","LaerdalLogo","LaerdalWhiteLogo","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentXSStyling","StyledLink","props","color","MEDIUM","LogoContainer","div","Name","span","black","noSizeChangeOnMobile","Regular","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","betaTagBackgroundColor","betaTagColor","e","preventDefault"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled from 'styled-components';\nimport {LaerdalLogo, LaerdalWhiteLogo} from '../assets';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ComponentMStyling, ComponentXSStyling} from '../styles/typography';\n\nconst StyledLink = styled(Link)<{ color?: string }>`\n text-align: center;\n text-decoration: none;\n display: flex;\n align-items: center;\n &:focus-within {\n outline: none;\n }\n svg {\n width: 66px;\n height: 36px;\n color: ${(props) => props.color};\n ${BREAKPOINTS.MEDIUM} {\n width: 88px;\n height: 48px;\n }\n }\n`;\n\nconst LogoContainer = styled.div`\n display: flex;\n align-items: center;\n height: 40px;\n margin-right: 16px;\n box-sizing: border-box;\n padding: 24px 0;\n\n ${BREAKPOINTS.MEDIUM} {\n margin-top: 8px;\n margin-bottom: 7px;\n }\n\n &:focus-within {\n box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);\n outline: none;\n }\n`;\n\nconst Name = styled.span<{ color?: string; noSizeChangeOnMobile: boolean }>`\n margin-left: 12px;\n padding-left: 12px;\n border-left: 1px solid ${(props) => props.color \|\| COLORS.black};\n letter-spacing: -0.02em;\n\n ${(props) => props.noSizeChangeOnMobile\n ? ComponentMStyling(ComponentTextStyle.Regular, props.color \|\| COLORS.black)\n : ComponentXSStyling(ComponentTextStyle.Regular, props.color \|\| COLORS.black)}\n\n ${BREAKPOINTS.MEDIUM} {\n ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.color \|\| COLORS.black)}\n }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; color?: string }>`\n background-color: ${(props) => props.backgroundColor \|\| COLORS.accent2_500};\n padding: 4px;\n margin-left: 8px;\n margin-top: 2px;\n border-left: none;\n border-radius: 2px;\n\n ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.color \|\| COLORS.white)}\n`;\n\ntype LogoProps = {\n name: string;\n showBetaTag?: boolean;\n onClick?: () => void;\n to?: string;\n color?: string;\n noSizeChangeOnMobile?: boolean;\n betaTagBackgroundColor?: string;\n betaTagColor?: string;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor }: LogoProps): React.ReactElement<LogoProps> => {\n return (\n <LogoContainer>\n <StyledLink\n to={to \|\| '/'}\n onMouseDown={(e: any) => e.preventDefault()}\n onClick={() => {\n if (onClick) {\n onClick();\n }\n }}\n color={color}>\n {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n <Name color={color} noSizeChangeOnMobile={noSizeChangeOnMobile \|\| false}>\n {name}\n </Name>\n {showBetaTag && (\n <BetaTag backgroundColor={betaTagBackgroundColor} color={betaTagColor}>\n BETA\n </BetaTag>\n )}\n </StyledLink>\n </LogoContainer>\n );\n};\n\nexport default Logo;\n"],"file":"Logo.js"}

package/dist/esm/GlobalNavigationBar/RightSideNav.js CHANGED Viewed

@@ -3,8 +3,9 @@ import * as React from 'react';
 import styled from 'styled-components';
 import { NavLink } from 'react-router-dom';
 import { NavItem } from '../NavItem';
-import { BREAKPOINTS } from '../styles';
+import { BREAKPOINTS, ComponentTextStyle } from '../styles';
 import { Button } from '../Button';
+import { ComponentMStyling } from '../styles/typography';
 const NavContainer = styled.div`
   display: flex;
   margin: auto 0 auto auto;
@@ -26,10 +27,10 @@ const NavContainer = styled.div`
   }
 `;
 const SecondaryButton = styled(Button)`
-  font-weight: bold;
-  font-size: 19px;
   height: 40px;
   margin: 0 8px;
+  ${ComponentMStyling(ComponentTextStyle.Bold, 'unset')}
 `;
 const RightSideNav = ({

package/dist/esm/GlobalNavigationBar/RightSideNav.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/GlobalNavigationBar/RightSideNav.tsx"],"names":["React","styled","NavLink","NavItem","BREAKPOINTS","Button","NavContainer","div","SMALL","MEDIUM","SecondaryButton","RightSideNav","navigationOptions","secondaryButton","preventFocusOnClick","e","preventDefault","getNavItem","navOption","disabled","label","exact","to","onClick","reverse","map","no","action"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,~~SAASC~~,~~OAAT~~,~~QAAwB~~,~~kBAAxB~~;AAEA,~~SAASC~~,~~OAAT~~,~~QAAwB~~,~~YAAxB~~;AAEA,~~SAASC~~,~~WAAT~~,~~QAAoC~~,~~WAApC~~;AACA,~~SAASC~~,~~MAAT~~,~~QAAuB~~,~~WAAvB~~;AAEA,MAAMC,YAAY,~~GAAGL~~,MAAM,~~CAACM~~,GAAI;AAChC;AACA;AACA;AACA;AACA;AACA,~~IAAIH~~,WAAW,~~CAACI~~,KAAM;AACtB;AACA;AACA,~~IAAIJ~~,WAAW,~~CAACK~~,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAnBA;AAqBA,MAAMC,eAAe,~~GAAGT~~,MAAM,~~CAACI~~,MAAD,CAAS;AACvC;AACA;AACA;AACA;~~AACA~~,CALA;;AAYA,~~MAAMM~~,YAAY,GAAG,CAAC;AAAEC,EAAAA,iBAAF;AAAqBC,EAAAA;AAArB,CAAD,KAA8E;AACjG,QAAMC,mBAAmB,GAAIC,CAAD,IAAY;AACtCA,IAAAA,CAAC,CAACC,cAAF;AACD,GAFD;;AAGA,QAAMC,UAAU,GAAIC,SAAD,IAA0B;AAC3C,QAAIA,SAAS,EAAEC,QAAf,EAAyB;AACvB,0BACE,oBAAC,OAAD;AAAS,QAAA,EAAE,~~EAAEd~~,MAAb;AAAqB,QAAA,SAAS,EAAC,UAA/B;AAA0C,QAAA,GAAG,~~EAAEa~~,SAAS,EAAEE;AAA1D,SACGF,SAAS,EAAEE,KADd,CADF;AAKD,KAND,MAMO;AACL,0BACE,oBAAC,OAAD;AACE,QAAA,EAAE,~~EAAElB~~,OADN;AAEE,QAAA,KAAK,~~EAAEgB~~,SAAS,EAAEG,KAFpB;AAGE,QAAA,EAAE,EAAEH,SAAS,EAAEI,EAAX,IAAiB,EAHvB;AAIE,QAAA,GAAG,EAAEJ,SAAS,EAAEE,KAJlB;AAKE,QAAA,WAAW,EAAEN,mBALf;AAME,QAAA,OAAO,EAAE,MAAM;AACb,cAAII,SAAS,EAAEK,OAAf,EAAwB;AACtBL,YAAAA,SAAS,EAAEK,OAAX;AACD;AACF;AAVH,SAWGL,SAAS,EAAEE,KAXd,CADF;AAeD;AACF,GAxBD;;AAyBA,sBACE,oBAAC,YAAD,QACGR,iBAAiB,EAAEY,OAAnB,GAA6BC,GAA7B,CAAiCC,EAAE,IAAIT,UAAU,CAACS,EAAD,CAAjD,CADH,EAGGb,eAAe,iBACd,oBAAC,eAAD;AAAiB,IAAA,OAAO,EAAC,WAAzB;AAAqC,IAAA,OAAO,EAAEA,eAAe,EAAEc;AAA/D,KACGd,eAAe,CAACO,KADnB,CAJJ,CADF;AAWD,CAxCD;;;AAJER,EAAAA,iB;;AA8CF,eAAeD,YAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { NavLink } from 'react-router-dom';\n\nimport { NavItem } from '../NavItem';\nimport { NavButton, NavOption } from '../types';\nimport { BREAKPOINTS, ~~COLORS~~ } from '../styles';\nimport { Button } from '../~~Button~~';\n\nconst NavContainer = styled.div`\n display: flex;\n margin: auto 0 auto auto;\n align-items: center;\n height: 48px;\n\n ${BREAKPOINTS.SMALL} {\n height: 56px;\n }\n ${BREAKPOINTS.MEDIUM} {\n height: 64px;\n }\n\n button,\n div {\n &:hover {\n cursor: pointer;\n }\n }\n`;\n\nconst SecondaryButton = styled(Button)`\n ~~font-weight: bold;\n font-size: 19px;\n~~ height: 40px;\n margin: 0 8px;\n`;\n\ntype Props = {\n navigationOptions?: NavOption[];\n secondaryButton?: NavButton;\n};\n\nconst RightSideNav = ({ navigationOptions, secondaryButton }: Props): React.ReactElement<Props> => {\n const preventFocusOnClick = (e: any) => {\n e.preventDefault();\n };\n const getNavItem = (navOption: NavOption) => {\n if (navOption?.disabled) {\n return (\n <NavItem as={Button} className=\"disabled\" key={navOption?.label}>\n {navOption?.label}\n </NavItem>\n );\n } else {\n return (\n <NavItem\n as={NavLink}\n exact={navOption?.exact}\n to={navOption?.to \|\| ''}\n key={navOption?.label}\n onMouseDown={preventFocusOnClick}\n onClick={() => {\n if (navOption?.onClick) {\n navOption?.onClick();\n }\n }}>\n {navOption?.label}\n </NavItem>\n );\n }\n };\n return (\n <NavContainer>\n {navigationOptions?.reverse().map(no => getNavItem(no))}\n\n {secondaryButton && (\n <SecondaryButton variant=\"secondary\" onClick={secondaryButton?.action}>\n {secondaryButton.label}\n </SecondaryButton>\n )}\n </NavContainer>\n );\n};\n\nexport default RightSideNav;\n"],"file":"RightSideNav.js"}
1	+ {"version":3,"sources":["../../../src/GlobalNavigationBar/RightSideNav.tsx"],"names":["React","styled","NavLink","NavItem","BREAKPOINTS","ComponentTextStyle","Button","ComponentMStyling","NavContainer","div","SMALL","MEDIUM","SecondaryButton","Bold","RightSideNav","navigationOptions","secondaryButton","preventFocusOnClick","e","preventDefault","getNavItem","navOption","disabled","label","exact","to","onClick","reverse","map","no","action"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,OAAR,QAAsB,kBAAtB;AAEA,SAAQC,OAAR,QAAsB,YAAtB;AAEA,SAAQC,WAAR,EAAqBC,kBAArB,QAA8C,WAA9C;AACA,SAAQC,MAAR,QAAqB,WAArB;AACA,SAAQC,iBAAR,QAAgC,sBAAhC;AAEA,MAAMC,YAAY,GAAGP,MAAM,CAACQ,GAAI;AAChC;AACA;AACA;AACA;AACA;AACA,IAAIL,WAAW,CAACM,KAAM;AACtB;AACA;AACA,IAAIN,WAAW,CAACO,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAnBA;AAqBA,MAAMC,eAAe,GAAGX,MAAM,CAACK,MAAD,CAAS;AACvC;AACA;AACA;AACA,IAAIC,iBAAiB,CAACF,kBAAkB,CAACQ,IAApB,EAA0B,OAA1B,CAAmC;AACxD,CALA;;AAYA,MAAMC,YAAY,GAAG,CAAC;AAAEC,EAAAA,iBAAF;AAAqBC,EAAAA;AAArB,CAAD,KAA8E;AACjG,QAAMC,mBAAmB,GAAIC,CAAD,IAAY;AACtCA,IAAAA,CAAC,CAACC,cAAF;AACD,GAFD;;AAGA,QAAMC,UAAU,GAAIC,SAAD,IAA0B;AAC3C,QAAIA,SAAS,EAAEC,QAAf,EAAyB;AACvB,0BACE,oBAAC,OAAD;AAAS,QAAA,EAAE,EAAEhB,MAAb;AAAqB,QAAA,SAAS,EAAC,UAA/B;AAA0C,QAAA,GAAG,EAAEe,SAAS,EAAEE;AAA1D,SACGF,SAAS,EAAEE,KADd,CADF;AAKD,KAND,MAMO;AACL,0BACE,oBAAC,OAAD;AACE,QAAA,EAAE,EAAErB,OADN;AAEE,QAAA,KAAK,EAAEmB,SAAS,EAAEG,KAFpB;AAGE,QAAA,EAAE,EAAEH,SAAS,EAAEI,EAAX,IAAiB,EAHvB;AAIE,QAAA,GAAG,EAAEJ,SAAS,EAAEE,KAJlB;AAKE,QAAA,WAAW,EAAEN,mBALf;AAME,QAAA,OAAO,EAAE,MAAM;AACb,cAAII,SAAS,EAAEK,OAAf,EAAwB;AACtBL,YAAAA,SAAS,EAAEK,OAAX;AACD;AACF;AAVH,SAWGL,SAAS,EAAEE,KAXd,CADF;AAeD;AACF,GAxBD;;AAyBA,sBACE,oBAAC,YAAD,QACGR,iBAAiB,EAAEY,OAAnB,GAA6BC,GAA7B,CAAiCC,EAAE,IAAIT,UAAU,CAACS,EAAD,CAAjD,CADH,EAGGb,eAAe,iBACd,oBAAC,eAAD;AAAiB,IAAA,OAAO,EAAC,WAAzB;AAAqC,IAAA,OAAO,EAAEA,eAAe,EAAEc;AAA/D,KACGd,eAAe,CAACO,KADnB,CAJJ,CADF;AAWD,CAxCD;;;AAJER,EAAAA,iB;;AA8CF,eAAeD,YAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\n\nimport {NavItem} from '../NavItem';\nimport {NavButton, NavOption} from '../types';\nimport {BREAKPOINTS, ComponentTextStyle} from '../styles';\nimport {Button} from '../Button';\nimport {ComponentMStyling} from '../styles/typography';\n\nconst NavContainer = styled.div`\n display: flex;\n margin: auto 0 auto auto;\n align-items: center;\n height: 48px;\n\n ${BREAKPOINTS.SMALL} {\n height: 56px;\n }\n ${BREAKPOINTS.MEDIUM} {\n height: 64px;\n }\n\n button,\n div {\n &:hover {\n cursor: pointer;\n }\n }\n`;\n\nconst SecondaryButton = styled(Button)`\n height: 40px;\n margin: 0 8px;\n\n ${ComponentMStyling(ComponentTextStyle.Bold, 'unset')}\n`;\n\ntype Props = {\n navigationOptions?: NavOption[];\n secondaryButton?: NavButton;\n};\n\nconst RightSideNav = ({ navigationOptions, secondaryButton }: Props): React.ReactElement<Props> => {\n const preventFocusOnClick = (e: any) => {\n e.preventDefault();\n };\n const getNavItem = (navOption: NavOption) => {\n if (navOption?.disabled) {\n return (\n <NavItem as={Button} className=\"disabled\" key={navOption?.label}>\n {navOption?.label}\n </NavItem>\n );\n } else {\n return (\n <NavItem\n as={NavLink}\n exact={navOption?.exact}\n to={navOption?.to \|\| ''}\n key={navOption?.label}\n onMouseDown={preventFocusOnClick}\n onClick={() => {\n if (navOption?.onClick) {\n navOption?.onClick();\n }\n }}>\n {navOption?.label}\n </NavItem>\n );\n }\n };\n return (\n <NavContainer>\n {navigationOptions?.reverse().map(no => getNavItem(no))}\n\n {secondaryButton && (\n <SecondaryButton variant=\"secondary\" onClick={secondaryButton?.action}>\n {secondaryButton.label}\n </SecondaryButton>\n )}\n </NavContainer>\n );\n};\n\nexport default RightSideNav;\n"],"file":"RightSideNav.js"}

package/dist/esm/GlobalNavigationBar/UserMenu/MenuLink.js CHANGED Viewed

@@ -2,23 +2,20 @@ import _pt from "prop-types";
 import * as React from 'react';
 import styled, { css } from 'styled-components';
 import { NavLink } from 'react-router-dom';
-import { COLORS } from '../../styles';
+import { COLORS, ComponentTextStyle } from '../../styles';
 import { Bullet, ChevronRight } from '../../icons/systemicons/SystemIcons';
+import { ComponentMStyling } from '../../styles/typography';
 const LinkStyles = css`
   border: none;
   background: transparent;
   padding: 16px 25px;
-  color: ${COLORS.black};
   text-decoration: none;
   text-align: left;
   align-items: center;
   display: flex;
-  font-weight: normal;
-  font-size: 19px;
-  line-height: 23px;
-  color: ${COLORS.neutral_600};
+  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}
   svg {
     margin-right: 15px;
     color: ${COLORS.neutral_600};

package/dist/esm/GlobalNavigationBar/UserMenu/MenuLink.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/GlobalNavigationBar/UserMenu/MenuLink.tsx"],"names":["React","styled","css","NavLink","COLORS","Bullet","ChevronRight","LinkStyles","~~black~~","neutral_600","InternalLink","ExternalLink","a","IconsRightSide","div","MenuLink","to","isExternal","menuText","Icon","notification","extendedMenu","onClick","getRightSide","critical_500"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,~~IAAiBC~~,~~GAAjB~~,~~QAA4B~~,~~mBAA5B~~;AACA,~~SAASC~~,~~OAAT~~,~~QAAwB~~,~~kBAAxB~~;AACA,~~SAASC~~,~~MAAT~~,~~QAAuB~~,~~cAAvB~~;AACA,~~SAASC~~,~~MAAT~~,~~EAAiBC~~,~~YAAjB~~,~~QAAqC~~,~~qCAArC~~;AAEA,MAAMC,UAAU,~~GAAGL~~,GAAI;AACvB;AACA;AACA;AACA;AACA~~,WAAWE,MAAM,CAACI,KAAM~~;~~AACxB;~~AACA;AACA;AACA;AACA;AACA~~;AACA;AACA~~,~~WAAWJ~~,~~MAAM~~,CAACK,~~WAAY~~;~~AAC9B~~;AACA;AACA~~;AACA~~,~~aAAaL~~,MAAM,~~CAACK~~,WAAY;AAChC;AACA,~~CAnBA~~;~~AAqBA~~,MAAMC,YAAY,~~GAAGT~~,MAAM,CAACE,OAAD,CAAU;AACrC,~~IAAII~~,UAAW;AACf,CAFA;AAIA,MAAMI,YAAY,~~GAAGV~~,MAAM,~~CAACW~~,CAAE;AAC9B,IAAIL,UAAW;AACf,CAFA;AAIA,MAAMM,cAAc,~~GAAGZ~~,MAAM,~~CAACa~~,GAAI;AAClC;AACA;AACA;AACA;AACA;AACA,CANA;;AAkBA,MAAMC,QAAQ,GAAG,CAAC;AAAEC,EAAAA,EAAF;AAAMC,EAAAA,UAAN;AAAkBC,EAAAA,QAAlB;AAA4BC,EAAAA,IAA5B;AAAkCC,EAAAA,YAAlC;AAAgDC,EAAAA,YAAhD;AAA8DC,EAAAA;AAA9D,CAAD,KAA4F;AAC3G,QAAMC,YAAY,GAAG,mBACnB,oBAAC,cAAD,QACGH,YAAY,gBAAG,oBAAC,MAAD;AAAQ,IAAA,IAAI,EAAC,MAAb;AAAoB,IAAA,KAAK,~~EAAEhB~~,MAAM,~~CAACoB~~;AAAlC,IAAH,GAAwD,IADvE,EAEGH,YAAY,gBAAG,oBAAC,YAAD;AAAc,IAAA,IAAI,EAAC,MAAnB;AAA0B,IAAA,KAAK,~~EAAEjB~~,MAAM,~~CAACK~~;AAAxC,IAAH,GAA6D,IAF5E,CADF;;AAMA,sBACE,gCACGQ,UAAU,gBACT,oBAAC,YAAD;AACE,IAAA,GAAG,EAAG,gBAAeD,EAAG,EAD1B;AAEE,IAAA,IAAI,EAAEA,EAFR;AAGE,IAAA,IAAI,EAAC,UAHP;AAIE,IAAA,SAAS,EAAC,cAJZ;AAKE,IAAA,OAAO,EAAE,MAAM;AACb,UAAIM,OAAJ,EAAa;AACXA,QAAAA,OAAO;AACR;AACF;AATH,KAUGH,IAAI,iBAAI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAC;AAAX,IAVX,eAWE,kCAAOD,QAAP,CAXF,EAYGK,YAAY,EAZf,CADS,gBAgBT,oBAAC,YAAD;AACE,IAAA,GAAG,EAAG,gBAAeP,EAAG,EAD1B;AAEE,IAAA,EAAE,EAAEA,EAFN;AAGE,IAAA,IAAI,EAAC,UAHP;AAIE,IAAA,SAAS,EAAC,cAJZ;AAKE,IAAA,OAAO,EAAE,MAAM;AACb,UAAIM,OAAJ,EAAa;AACXA,QAAAA,OAAO;AACR;AACF;AATH,KAUGH,IAAI,iBAAI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAC;AAAX,IAVX,eAWE,kCAAOD,QAAP,CAXF,EAYGK,YAAY,EAZf,CAjBJ,CADF;AAmCD,CA1CD;;;AATEP,EAAAA,E;AACAE,EAAAA,Q;AACAD,EAAAA,U;AACAE,EAAAA,I;AACAC,EAAAA,Y;AACAC,EAAAA,Y;AACAC,EAAAA,O;;AA+CF,eAAeP,QAAf","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport { NavLink } from 'react-router-dom';\nimport { COLORS } from '../../styles';\nimport { Bullet, ChevronRight } from '../../icons/systemicons/SystemIcons';\n\nconst LinkStyles = css`\n border: none;\n background: transparent;\n padding: 16px 25px;\n\n ~~color: ${COLORS.black};\n~~ text-decoration: none;\n text-align: left;\n align-items: center;\n display: flex;\n ~~font-weight: normal;\~~n ~~font-size: 19px;\n line-height: 23px;\n color:~~ ${COLORS.neutral_600}~~;\n~~\n svg {\n margin-right: 15px;\n color: ${COLORS.neutral_600};\n }\n`;\n\nconst InternalLink = styled(NavLink)`\n ${LinkStyles};\n`;\n\nconst ExternalLink = styled.a`\n ${LinkStyles};\n`;\n\nconst IconsRightSide = styled.div`\n margin: 0 0 0 auto;\n align-items: center;\n svg {\n margin-right: 0;\n }\n`;\n\ninterface MenuLinkProps {\n to: string;\n menuText: string;\n isExternal?: boolean;\n Icon?: any;\n notification?: boolean;\n extendedMenu?: boolean;\n onClick?: () => void;\n}\n\nconst MenuLink = ({ to, isExternal, menuText, Icon, notification, extendedMenu, onClick }: MenuLinkProps) => {\n const getRightSide = () => (\n <IconsRightSide>\n {notification ? <Bullet size=\"24px\" color={COLORS.critical_500} /> : null}\n {extendedMenu ? <ChevronRight size=\"24px\" color={COLORS.neutral_600} /> : null}\n </IconsRightSide>\n );\n return (\n <li>\n {isExternal ? (\n <ExternalLink\n key={`ExternalLink_${to}`}\n href={to}\n role=\"menuitem\"\n className=\"UserMenuLink\"\n onClick={() => {\n if (onClick) {\n onClick();\n }\n }}>\n {Icon && <Icon size=\"24px\" />}\n <span>{menuText}</span>\n {getRightSide()}\n </ExternalLink>\n ) : (\n <InternalLink\n key={`InternalLink_${to}`}\n to={to}\n role=\"menuitem\"\n className=\"UserMenuLink\"\n onClick={() => {\n if (onClick) {\n onClick();\n }\n }}>\n {Icon && <Icon size=\"24px\" />}\n <span>{menuText}</span>\n {getRightSide()}\n </InternalLink>\n )}\n </li>\n );\n};\n\nexport default MenuLink;\n"],"file":"MenuLink.js"}
1	+ {"version":3,"sources":["../../../../src/GlobalNavigationBar/UserMenu/MenuLink.tsx"],"names":["React","styled","css","NavLink","COLORS","ComponentTextStyle","Bullet","ChevronRight","ComponentMStyling","LinkStyles","Regular","neutral_600","InternalLink","ExternalLink","a","IconsRightSide","div","MenuLink","to","isExternal","menuText","Icon","notification","extendedMenu","onClick","getRightSide","critical_500"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,IAAgBC,GAAhB,QAA0B,mBAA1B;AACA,SAAQC,OAAR,QAAsB,kBAAtB;AACA,SAAQC,MAAR,EAAgBC,kBAAhB,QAAyC,cAAzC;AACA,SAAQC,MAAR,EAAgBC,YAAhB,QAAmC,qCAAnC;AACA,SAAQC,iBAAR,QAAgC,yBAAhC;AAEA,MAAMC,UAAU,GAAGP,GAAI;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIM,iBAAiB,CAACH,kBAAkB,CAACK,OAApB,EAA6BN,MAAM,CAACO,WAApC,CAAiD;AACtE;AACA;AACA,aAAaP,MAAM,CAACO,WAAY;AAChC;AACA,CAfA;AAiBA,MAAMC,YAAY,GAAGX,MAAM,CAACE,OAAD,CAAU;AACrC,IAAIM,UAAW;AACf,CAFA;AAIA,MAAMI,YAAY,GAAGZ,MAAM,CAACa,CAAE;AAC9B,IAAIL,UAAW;AACf,CAFA;AAIA,MAAMM,cAAc,GAAGd,MAAM,CAACe,GAAI;AAClC;AACA;AACA;AACA;AACA;AACA,CANA;;AAkBA,MAAMC,QAAQ,GAAG,CAAC;AAAEC,EAAAA,EAAF;AAAMC,EAAAA,UAAN;AAAkBC,EAAAA,QAAlB;AAA4BC,EAAAA,IAA5B;AAAkCC,EAAAA,YAAlC;AAAgDC,EAAAA,YAAhD;AAA8DC,EAAAA;AAA9D,CAAD,KAA4F;AAC3G,QAAMC,YAAY,GAAG,mBACnB,oBAAC,cAAD,QACGH,YAAY,gBAAG,oBAAC,MAAD;AAAQ,IAAA,IAAI,EAAC,MAAb;AAAoB,IAAA,KAAK,EAAElB,MAAM,CAACsB;AAAlC,IAAH,GAAwD,IADvE,EAEGH,YAAY,gBAAG,oBAAC,YAAD;AAAc,IAAA,IAAI,EAAC,MAAnB;AAA0B,IAAA,KAAK,EAAEnB,MAAM,CAACO;AAAxC,IAAH,GAA6D,IAF5E,CADF;;AAMA,sBACE,gCACGQ,UAAU,gBACT,oBAAC,YAAD;AACE,IAAA,GAAG,EAAG,gBAAeD,EAAG,EAD1B;AAEE,IAAA,IAAI,EAAEA,EAFR;AAGE,IAAA,IAAI,EAAC,UAHP;AAIE,IAAA,SAAS,EAAC,cAJZ;AAKE,IAAA,OAAO,EAAE,MAAM;AACb,UAAIM,OAAJ,EAAa;AACXA,QAAAA,OAAO;AACR;AACF;AATH,KAUGH,IAAI,iBAAI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAC;AAAX,IAVX,eAWE,kCAAOD,QAAP,CAXF,EAYGK,YAAY,EAZf,CADS,gBAgBT,oBAAC,YAAD;AACE,IAAA,GAAG,EAAG,gBAAeP,EAAG,EAD1B;AAEE,IAAA,EAAE,EAAEA,EAFN;AAGE,IAAA,IAAI,EAAC,UAHP;AAIE,IAAA,SAAS,EAAC,cAJZ;AAKE,IAAA,OAAO,EAAE,MAAM;AACb,UAAIM,OAAJ,EAAa;AACXA,QAAAA,OAAO;AACR;AACF;AATH,KAUGH,IAAI,iBAAI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAC;AAAX,IAVX,eAWE,kCAAOD,QAAP,CAXF,EAYGK,YAAY,EAZf,CAjBJ,CADF;AAmCD,CA1CD;;;AATEP,EAAAA,E;AACAE,EAAAA,Q;AACAD,EAAAA,U;AACAE,EAAAA,I;AACAC,EAAAA,Y;AACAC,EAAAA,Y;AACAC,EAAAA,O;;AA+CF,eAAeP,QAAf","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {NavLink} from 'react-router-dom';\nimport {COLORS, ComponentTextStyle} from '../../styles';\nimport {Bullet, ChevronRight} from '../../icons/systemicons/SystemIcons';\nimport {ComponentMStyling} from '../../styles/typography';\n\nconst LinkStyles = css`\n border: none;\n background: transparent;\n padding: 16px 25px;\n\n text-decoration: none;\n text-align: left;\n align-items: center;\n display: flex;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n svg {\n margin-right: 15px;\n color: ${COLORS.neutral_600};\n }\n`;\n\nconst InternalLink = styled(NavLink)`\n ${LinkStyles};\n`;\n\nconst ExternalLink = styled.a`\n ${LinkStyles};\n`;\n\nconst IconsRightSide = styled.div`\n margin: 0 0 0 auto;\n align-items: center;\n svg {\n margin-right: 0;\n }\n`;\n\ninterface MenuLinkProps {\n to: string;\n menuText: string;\n isExternal?: boolean;\n Icon?: any;\n notification?: boolean;\n extendedMenu?: boolean;\n onClick?: () => void;\n}\n\nconst MenuLink = ({ to, isExternal, menuText, Icon, notification, extendedMenu, onClick }: MenuLinkProps) => {\n const getRightSide = () => (\n <IconsRightSide>\n {notification ? <Bullet size=\"24px\" color={COLORS.critical_500} /> : null}\n {extendedMenu ? <ChevronRight size=\"24px\" color={COLORS.neutral_600} /> : null}\n </IconsRightSide>\n );\n return (\n <li>\n {isExternal ? (\n <ExternalLink\n key={`ExternalLink_${to}`}\n href={to}\n role=\"menuitem\"\n className=\"UserMenuLink\"\n onClick={() => {\n if (onClick) {\n onClick();\n }\n }}>\n {Icon && <Icon size=\"24px\" />}\n <span>{menuText}</span>\n {getRightSide()}\n </ExternalLink>\n ) : (\n <InternalLink\n key={`InternalLink_${to}`}\n to={to}\n role=\"menuitem\"\n className=\"UserMenuLink\"\n onClick={() => {\n if (onClick) {\n onClick();\n }\n }}>\n {Icon && <Icon size=\"24px\" />}\n <span>{menuText}</span>\n {getRightSide()}\n </InternalLink>\n )}\n </li>\n );\n};\n\nexport default MenuLink;\n"],"file":"MenuLink.js"}

package/dist/esm/GlobalNavigationBar/UserMenu/MobileUserMenu.js CHANGED Viewed

@@ -1,11 +1,12 @@
 import _pt from "prop-types";
 import * as React from 'react';
 import styled from 'styled-components';
-import { BREAKPOINTS, COLORS, scrollBarStyling } from '../../styles';
+import { BREAKPOINTS, COLORS, ComponentTextStyle, scrollBarStyling } from '../../styles';
 import MenuLink from './MenuLink';
 import { Button, IconButton } from '../../Button';
 import { ArrowLineLeft, Close } from '../../icons/systemicons/SystemIcons';
 import { flowDown, Right, UserMenuSectionListStyling } from '../mobile/CommonStyles';
+import { ComponentSStyling } from '../../styles/typography';
 const Menu = styled.ul`
   list-style: none;
   margin: 0;
@@ -68,12 +69,11 @@ const Top = styled.div`
   h3 {
     margin-block-start: 0 !important;
     margin-block-end: 0 !important;
-    margin-inline-start: 0px;
-    margin-inline-end: 0px;
-    font-weight: normal;
-    font-size: 16px;
-    color: inherit;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
     margin-left: 24px;
+    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}
   }
 `;
 const LabelLine = styled.span`
@@ -87,7 +87,10 @@ const StyledMenulink = styled(MenuLink)`
   width: 100%;
   height: 48px;
   margin: 0;
-  line-height: 48px;
+  & a {
+    height: 100%;
+  }
 `;
 const MobileUserMenu = ({