@laerdal/life-react-components 1.4.1-dev.6.full → 1.4.1-dev.8.full

package/dist/InputFields/components/SearchField.js

@@ -0,0 +1,44 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+
+var _templateObject, _templateObject2;
+
+import * as React from 'react';
+import styled, { css } from 'styled-components';
+import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';
+import { activeValidationMessageState } from '../styling';
+import { ComponentMStyling, ComponentSStyling } from '../../styles';
+import { Z_INDEXES } from '../../styles/z-indexes';
+import { jsx as _jsx } from "react/jsx-runtime";
+var DisabledState = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n  pointer-events: none;\n  background-color: transparent !important;\n  box-shadow: none !important;\n"])), COLORS.neutral_100);
+export var StyledSearchField = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  box-sizing: border-box;\n  border-radius: 56px;\n  align-items: center;\n  position: relative;\n  height: 48px;\n  appearance: none;\n  background-color: ", ";\n\n  ", "\n\n  padding: 0 !important;\n  width: 100%;\n\n  ::placeholder {\n    ", "\n  }\n\n  ", " {\n    ", "\n\n    height: 56px;\n    padding: 0 4px !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    height: 48px;\n    padding: 0 !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    ", "\n    height: 56px;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    border-color: transparent;\n  }\n\n  &.focus-visible-within{\n    outline: none;\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    z-index: ", ";\n  }\n  \n  &:focus-within {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    border-color: transparent;\n  }\n\n  &:disabled {\n    border: 1px solid ", ";\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n\n  div {\n    color: ", ";\n    background-color: transparent;\n  }\n\n  ", "\n  ", "\n"])), COLORS.neutral_400, COLORS.white, ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500), BREAKPOINTS.MEDIUM, ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500), COLORS.primary_700, Z_INDEXES.focus, COLORS.primary_800, COLORS.neutral_100, COLORS.neutral_600, function (props) {
+  return props.disabled ? DisabledState : '';
+}, function (props) {
+  return props.activeValidationMessage ? activeValidationMessageState : '';
+});
+var SearchField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var id = _ref.id,
+      searchTerm = _ref.searchTerm,
+      disabled = _ref.disabled,
+      validationMessage = _ref.validationMessage,
+      children = _ref.children,
+      size = _ref.size;
+  return /*#__PURE__*/_jsx(StyledSearchField, {
+    id: "".concat(id, "_main"),
+    ref: ref,
+    className: (searchTerm !== '' ? 'searchactive ' : '').concat(size ? size : ''),
+    disabled: disabled,
+    activeValidationMessage: validationMessage !== undefined && validationMessage !== '',
+    children: children
+  });
+});
+SearchField.propTypes = {
+  id: _pt.string.isRequired,
+  searchTerm: _pt.string,
+  disabled: _pt.bool,
+  validationMessage: _pt.string,
+  children: _pt.any.isRequired,
+  size: _pt.string.isRequired
+};
+export default SearchField;
+//# sourceMappingURL=SearchField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/InputFields/components/SearchField.tsx"],"names":["React","styled","css","BREAKPOINTS","COLORS","ComponentTextStyle","activeValidationMessageState","ComponentMStyling","ComponentSStyling","Z_INDEXES","DisabledState","neutral_100","StyledSearchField","div","neutral_400","white","Regular","black","Italic","neutral_500","MEDIUM","primary_700","focus","primary_800","neutral_600","props","disabled","activeValidationMessage","SearchField","forwardRef","ref","id","searchTerm","validationMessage","children","size","concat","undefined"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,IAAgBC,GAAhB,QAA0B,mBAA1B;AACA,SAAQC,WAAR,EAAqBC,MAArB,EAA6BC,kBAA7B,QAAsD,oBAAtD;AACA,SAAQC,4BAAR,QAA2C,YAA3C;AACA,SAAQC,iBAAR,EAA2BC,iBAA3B,QAAmD,cAAnD;AACA,SAAQC,SAAR,QAAwB,wBAAxB;;AAEA,IAAMC,aAAa,GAAGR,GAAH,yMACGE,MAAM,CAACO,WADV,CAAnB;AAOA,OAAO,IAAMC,iBAAiB,GAAGX,MAAM,CAACY,GAAV,oyCAGQT,MAAM,CAACU,WAHf,EAURV,MAAM,CAACW,KAVC,EAY1BP,iBAAiB,CAACH,kBAAkB,CAACW,OAApB,EAA6BZ,MAAM,CAACa,KAApC,CAZS,EAkBxBT,iBAAiB,CAACH,kBAAkB,CAACa,MAApB,EAA4Bd,MAAM,CAACe,WAAnC,CAlBO,EAqB1BhB,WAAW,CAACiB,MArBc,EAsBxBb,iBAAiB,CAACF,kBAAkB,CAACW,OAApB,EAA6BZ,MAAM,CAACa,KAApC,CAtBO,EA4BtBV,iBAAiB,CAACF,kBAAkB,CAACa,MAApB,EAA4Bd,MAAM,CAACe,WAAnC,CA5BK,EAiCxBX,iBAAiB,CAACH,kBAAkB,CAACW,OAApB,EAA6BZ,MAAM,CAACa,KAApC,CAjCO,EAsCtBT,iBAAiB,CAACH,kBAAkB,CAACa,MAApB,EAA4Bd,MAAM,CAACe,WAAnC,CAtCK,EA2CxBZ,iBAAiB,CAACF,kBAAkB,CAACW,OAApB,EAA6BZ,MAAM,CAACa,KAApC,CA3CO,EA+CtBV,iBAAiB,CAACF,kBAAkB,CAACa,MAApB,EAA4Bd,MAAM,CAACe,WAAnC,CA/CK,EAoDUf,MAAM,CAACiB,WApDjB,EA2DfZ,SAAS,CAACa,KA3DK,EA+DUlB,MAAM,CAACmB,WA/DjB,EAoENnB,MAAM,CAACO,WApED,EA0EjBP,MAAM,CAACoB,WA1EU,EA8E1B,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,QAAN,GAAiBhB,aAAjB,GAAiC,EAA7C;AAAA,CA9E0B,EA+E1B,UAACe,KAAD;AAAA,SAAYA,KAAK,CAACE,uBAAN,GAAgCrB,4BAAhC,GAA+D,EAA3E;AAAA,CA/E0B,CAAvB;AA2FP,IAAMsB,WAAW,gBAAG5B,KAAK,CAAC6B,UAAN,CAAkD,gBAOMC,GAPN,EAOc;AAAA,MANTC,EAMS,QANTA,EAMS;AAAA,MALTC,UAKS,QALTA,UAKS;AAAA,MAJTN,QAIS,QAJTA,QAIS;AAAA,MAHTO,iBAGS,QAHTA,iBAGS;AAAA,MAFTC,QAES,QAFTA,QAES;AAAA,MADTC,IACS,QADTA,IACS;AAClF,sBACE,KAAC,iBAAD;AACE,IAAA,EAAE,YAAKJ,EAAL,UADJ;AAEE,IAAA,GAAG,EAAED,GAFP;AAGE,IAAA,SAAS,EAAE,CAACE,UAAU,KAAK,EAAf,GAAoB,eAApB,GAAsC,EAAvC,EAA2CI,MAA3C,CAAkDD,IAAI,GAAGA,IAAH,GAAU,EAAhE,CAHb;AAIE,IAAA,QAAQ,EAAET,QAJZ;AAKE,IAAA,uBAAuB,EAAEO,iBAAiB,KAAKI,SAAtB,IAAmCJ,iBAAiB,KAAK,EALpF;AAAA,cAMGC;AANH,IADF;AAUD,CAlBmB,CAApB;;AAREH,EAAAA,E;AACAC,EAAAA,U;AACAN,EAAAA,Q;AACAO,EAAAA,iB;AACAC,EAAAA,Q;AACAC,EAAAA,I;;AAuBF,eAAeP,WAAf","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../../styles/index';\nimport {activeValidationMessageState} from '../styling';\nimport {ComponentMStyling, ComponentSStyling} from '../../styles';\nimport {Z_INDEXES} from '../../styles/z-indexes';\n\nconst DisabledState = css`\n  border: 1px solid ${COLORS.neutral_100};\n  pointer-events: none;\n  background-color: transparent !important;\n  box-shadow: none !important;\n`;\n\nexport const StyledSearchField = styled.div<{ disabled?: boolean; activeValidationMessage?: boolean; }>`\n  display: flex;\n  flex-direction: row;\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n  box-sizing: border-box;\n  border-radius: 56px;\n  align-items: center;\n  position: relative;\n  height: 48px;\n  appearance: none;\n  background-color: ${COLORS.white};\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  padding: 0 !important;\n  width: 100%;\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n    height: 56px;\n    padding: 0 4px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 48px;\n    padding: 0 !important;\n\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 56px;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    border-color: transparent;\n  }\n\n  &.focus-visible-within{\n    outline: none;\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    z-index: ${Z_INDEXES.focus};\n  }\n  \n  &:focus-within {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    border-color: transparent;\n  }\n\n  &:disabled {\n    border: 1px solid ${COLORS.neutral_100};\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n\n  div {\n    color: ${COLORS.neutral_600};\n    background-color: transparent;\n  }\n\n  ${(props) => (props.disabled ? DisabledState : '')}\n  ${(props) => (props.activeValidationMessage ? activeValidationMessageState : '')}\n`;\n\ntype SeachFieldProps = {\n  id: string;\n  searchTerm?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  children: any;\n  size: string;\n};\n\nconst SearchField = React.forwardRef<HTMLDivElement, SeachFieldProps>(({\n                                                                           id,\n                                                                           searchTerm,\n                                                                           disabled,\n                                                                           validationMessage,\n                                                                           children,\n                                                                           size\n                                                                         }, ref) => {\n  return (\n    <StyledSearchField\n      id={`${id}_main`}\n      ref={ref}\n      className={(searchTerm !== '' ? 'searchactive ' : '').concat(size ? size : '')}\n      disabled={disabled}\n      activeValidationMessage={validationMessage !== undefined && validationMessage !== ''}>\n      {children}\n    </StyledSearchField>\n  );\n});\n\nexport default SearchField;\n"],"file":"SearchField.js"}

package/dist/InputFields/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/InputFields/index.ts"],"names":["TextField","PasswordField","Checkbox","RadioButton","SearchBar","InputLabel","DatepickerField","Textarea","QuickSearch"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,aAAtB;AACA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AACA,OAAOC,SAAP,MAAsB,aAAtB;AACA,OAAOC,UAAP,MAAuB,SAAvB;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AAEA,SAASR,SAAT,EAAoBC,aAApB,EAAmCC,QAAnC,EAA6CC,WAA7C,EAA0DC,SAA1D,EAAqEC,UAArE,EAAiFC,eAAjF,EAAkGC,QAAlG,EAA4GC,WAA5G","sourcesContent":["import TextField from './TextField';\nimport PasswordField from './PasswordField';\nimport Checkbox from './Checkbox';\nimport RadioButton from './RadioButton';\nimport SearchBar from './SearchBar';\nimport InputLabel from './Label';\nimport DatepickerField from './DatepickerField';\nimport Textarea from './Textarea';\nimport QuickSearch from './QuickSearch';\n\nexport { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch };\n"],"file":"index.js"}

package/dist/InputFields/styling.d.ts

@@ -0,0 +1,24 @@
+export declare const InputWrapper: import("styled-components").StyledComponent<"div", any, {
+    locked?: boolean | undefined;
+    disabled?: boolean | undefined;
+    margin?: string | undefined;
+}, never>;
+export declare const activeValidationMessageState: import("styled-components").FlattenSimpleInterpolation;
+declare const InputFieldStyling: import("styled-components").StyledComponent<"input", any, {
+    locked?: boolean | undefined;
+    activeValidationMessage?: boolean | undefined;
+    activeErrorMessage?: boolean | undefined;
+    correctInput?: boolean | undefined;
+    active?: boolean | undefined;
+    withoutBorder?: boolean | undefined;
+    size?: string | undefined;
+}, never>;
+declare const ValidationStyling: import("styled-components").FlattenSimpleInterpolation;
+export declare const RequiredStar: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const Warning: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WarningMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ErrorMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const AutofilledMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
+export { ValidationStyling, InputFieldStyling };
+export declare const StyledIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SearchIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/InputFields/styling.js

@@ -0,0 +1,38 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+
+import styled, { css } from 'styled-components';
+import { BREAKPOINTS, COLORS } from '../styles';
+import { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling } from '../styles/typography';
+import { Z_INDEXES } from '../styles/z-indexes';
+export var InputWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  outline: none;\n  ", ";\n  ", "\n"])), function (props) {
+  return props.locked || props.disabled ? 'cursor: not-allowed;' : '';
+}, function (props) {
+  return props.margin ? "margin: ".concat(props.margin, ";") : '';
+});
+var lockedState = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", " !important;\n  color: ", " !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n"])), COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_600);
+export var activeValidationMessageState = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n  -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n  box-shadow: inset 0px 0px 0px 2px ", ";\n"])), COLORS.warning_400, COLORS.warning_400, COLORS.warning_400);
+var activeErrorMessageState = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n  -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n  box-shadow: inset 0px 0px 0px 2px ", ";\n"])), COLORS.critical_400, COLORS.critical_400, COLORS.critical_400);
+var activeCorrectInput = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n  -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n  box-shadow: inset 0px 0px 0px 2px ", ";\n"])), COLORS.correct_500, COLORS.correct_500, COLORS.correct_500);
+var InputFieldStyling = styled.input(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ", "\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 16px !important;\n\n  outline: none;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ", "\n  }\n\n  ", " {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ", " !important;\n\n  ", "\n  ", "\n  ", "\n  ", "\n\n  &:disabled {\n    border: 1px solid ", ";\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ", " !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n  \n  &.focus-visible{\n    outline: none;\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    z-index: ", ";\n  }\n\n  &.error {\n    border-radius: 4px;\n    border-style: solid;\n    border-width: 2px;\n    border-color: #e97116;\n    padding: 0 15px !important;\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &.error {\n    margin-bottom: 0 !important;\n  }\n\n  &:hover {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.active {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n  \n"])), function (props) {
+  return props.withoutBorder ? "-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      " : "-webkit-box-shadow: inset 0px 0px 0px 1px ".concat(COLORS.neutral_400, ";\n      -moz-box-shadow: inset 0px 0px 0px 1px ").concat(COLORS.neutral_400, ";\n      box-shadow: inset 0px 0px 0px 1px ").concat(COLORS.neutral_400, ";");
+}, ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), BREAKPOINTS.MEDIUM, ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600), COLORS.black, function (props) {
+  return props.locked ? lockedState : '';
+}, function (props) {
+  return props.activeValidationMessage ? activeValidationMessageState : '';
+}, function (props) {
+  return props.activeErrorMessage ? activeErrorMessageState : '';
+}, function (props) {
+  return props.correctInput ? activeCorrectInput : '';
+}, COLORS.neutral_100, COLORS.neutral_300, COLORS.primary_800, Z_INDEXES.focus, COLORS.primary_700, COLORS.primary_700, COLORS.primary_700, COLORS.primary_800, COLORS.primary_800, COLORS.primary_800);
+var ValidationStyling = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  &.error-msg {\n    ", "\n    text-align: center;\n    font-weight: 400;\n    box-sizing: border-box;\n  }\n\n  &.error-msg {\n    padding-top: 8px;\n    padding-bottom: 0;\n    ", "\n    font-weight: 700;\n    line-height: 15px;\n  }\n"])), ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468'));
+export var RequiredStar = styled.span(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 28px;\n  line-height: 12px;\n  font-weight: 700;\n  position: relative;\n  top: 10px;\n"])), COLORS.critical_500);
+export var Warning = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  font-size: 12px;\n  line-height: 140%;\n\n  ", " {\n    font-size: 14px;\n  }\n\n  &.small {\n    font-size: 12px;\n  }\n  &.medium {\n    font-size: 14px;\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 4px;\n  }\n"])), BREAKPOINTS.MEDIUM);
+export var WarningMessage = styled(Warning)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), COLORS.warning_500);
+export var ErrorMessage = styled(Warning)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), COLORS.critical_500);
+export var AutofilledMessage = styled(Warning)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), COLORS.neutral_600);
+export { ValidationStyling, InputFieldStyling };
+export var StyledIcon = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  border-radius: 50%;\n"])));
+export var SearchIconWrapper = styled(StyledIcon)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  position: absolute;\n  border-radius: 50%;\n"])));
+//# sourceMappingURL=styling.js.map

package/dist/InputFields/styling.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/InputFields/styling.ts"],"names":["styled","css","BREAKPOINTS","COLORS","ComponentXXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","Z_INDEXES","InputWrapper","div","props","locked","disabled","margin","lockedState","neutral_100","neutral_300","neutral_600","activeValidationMessageState","warning_400","activeErrorMessageState","critical_400","activeCorrectInput","correct_500","InputFieldStyling","input","withoutBorder","neutral_400","Italic","MEDIUM","black","activeValidationMessage","activeErrorMessage","correctInput","primary_800","focus","primary_700","ValidationStyling","Regular","RequiredStar","span","critical_500","Warning","WarningMessage","warning_500","ErrorMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling } from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nexport const InputWrapper = styled.div<{ locked?: boolean; disabled?: boolean; margin?: string }>`\n  outline: none;\n  ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : '')};\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nconst lockedState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300} !important;\n  color: ${COLORS.neutral_600} !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n`;\nexport const activeValidationMessageState = 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`;\nconst activeErrorMessageState = css`\n  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n`;\nconst activeCorrectInput = css`\n  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.correct_500};\n  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.correct_500};\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.correct_500};\n`;\n\nconst InputFieldStyling = styled.input<{\n  locked?: boolean;\n  activeValidationMessage?: boolean;\n  activeErrorMessage?: boolean;\n  correctInput?: boolean;\n  active?: boolean;\n  withoutBorder?: boolean;\n  size?: string;\n}>`\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ${(props) =>\n    props.withoutBorder\n      ? `-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      `\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};`}\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 16px !important;\n\n  outline: none;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ${COLORS.black} !important;\n\n  ${(props) => (props.locked ? lockedState : '')}\n  ${(props) => (props.activeValidationMessage ? activeValidationMessageState : '')}\n  ${(props) => (props.activeErrorMessage ? activeErrorMessageState : '')}\n  ${(props) => (props.correctInput ? activeCorrectInput : '')}\n\n  &:disabled {\n    border: 1px solid ${COLORS.neutral_100};\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300} !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n  \n  &.focus-visible{\n    outline: none;\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    z-index: ${Z_INDEXES.focus};\n  }\n\n  &.error {\n    border-radius: 4px;\n    border-style: solid;\n    border-width: 2px;\n    border-color: #e97116;\n    padding: 0 15px !important;\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &.error {\n    margin-bottom: 0 !important;\n  }\n\n  &:hover {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n  }\n\n  &.active {\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\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n  \n`;\n\nconst ValidationStyling = css`\n  &.error-msg {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    text-align: center;\n    font-weight: 400;\n    box-sizing: border-box;\n  }\n\n  &.error-msg {\n    padding-top: 8px;\n    padding-bottom: 0;\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\n    font-weight: 700;\n    line-height: 15px;\n  }\n`;\n\nexport const RequiredStar = styled.span`\n  color: ${COLORS.critical_500};\n  font-size: 28px;\n  line-height: 12px;\n  font-weight: 700;\n  position: relative;\n  top: 10px;\n`;\nexport const Warning = styled.div`\n  font-size: 12px;\n  line-height: 140%;\n\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 14px;\n  }\n\n  &.small {\n    font-size: 12px;\n  }\n  &.medium {\n    font-size: 14px;\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 4px;\n  }\n`;\nexport const WarningMessage = styled(Warning)`\n  color: ${COLORS.warning_500};\n`;\nexport const ErrorMessage = styled(Warning)`\n  color: ${COLORS.critical_500};\n`;\nexport const AutofilledMessage = styled(Warning)`\n  color: ${COLORS.neutral_600};\n`;\n\nexport { ValidationStyling, InputFieldStyling };\n\nexport const StyledIcon = styled.div`\n  border-radius: 50%;\n`;\n\nexport const SearchIconWrapper = styled(StyledIcon)`\n  position: absolute;\n  border-radius: 50%;\n`;\n"],"file":"styling.js"}

package/dist/Layouts/index.d.ts

@@ -0,0 +1,10 @@
+export declare const PageWidth: import("styled-components").StyledComponent<"div", any, {
+    useMaxWidth?: boolean | undefined;
+    maxWidth?: number | undefined;
+}, never>;
+export declare const Columns: import("styled-components").StyledComponent<"section", any, {
+    gap?: string | undefined;
+    columns?: string | undefined;
+    printColumns?: string | undefined;
+}, never>;
+export declare const ContainerMargins: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Layouts/index.js

@@ -0,0 +1,36 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3;
+
+import styled from 'styled-components';
+import { BREAKPOINTS } from '../styles';
+var GRID = {
+  GAP: {
+    SMALL: '24px',
+    MEDIUM: '32px',
+    LARGE: '40px'
+  },
+  GUTTER: {
+    SMALL: '16px',
+    MEDIUM: '32px',
+    LARGE: '56px'
+  }
+};
+export var PageWidth = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  margin: 0 ", ";\n\n  ", " {\n    margin: 0 ", ";\n  }\n  ", " {\n    margin: 0 ", ";\n  }\n\n  ", " {\n    max-width: ", ";\n    margin: 0 auto;\n  }\n"])), GRID.GUTTER.SMALL, BREAKPOINTS.MEDIUM, GRID.GUTTER.MEDIUM, BREAKPOINTS.LARGE, GRID.GUTTER.LARGE, BREAKPOINTS.XLARGE, function (props) {
+  return props.useMaxWidth ? props.maxWidth ? 'min(100% - 112px,' + props.maxWidth + 'px)' : 'calc(100% - 112px)' : '1088px';
+});
+export var Columns = styled.section(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: grid;\n  grid-gap: ", ";\n  word-break: break-word; /* Prevent long words from breaking the layout \u2013 consider making this rule global */\n\n  ", " {\n    grid-template-columns: ", ";\n    -ms-grid-columns: ", ";\n    grid-gap: ", ";\n  }\n\n  ", " {\n    grid-gap: ", ";\n  }\n\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n    display: -ms-grid;\n\n    > *:not(:first-child) {\n      margin-left: ", ";\n    }\n  }\n\n  @media print {\n    grid-gap: 0;\n    grid-template-columns: ", ";\n  }\n"])), function (props) {
+  return props.gap || GRID.GAP.SMALL;
+}, BREAKPOINTS.MEDIUM, function (props) {
+  return props.columns;
+}, function (props) {
+  return props.columns;
+}, function (props) {
+  return props.gap || GRID.GAP.MEDIUM;
+}, BREAKPOINTS.LARGE, function (props) {
+  return props.gap || GRID.GAP.LARGE;
+}, GRID.GAP.MEDIUM, function (props) {
+  return props.printColumns || 'none';
+});
+export var ContainerMargins = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  /* X small devices (mobile phones, 320px and up) */\n  @media only screen and (min-width: 320px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Small devices (portrait tablets, 576px and up) */\n  @media only screen and (min-width: 576px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Medium devices (landscape tablets, 768px and up) */\n  @media only screen and (min-width: 768px) {\n    margin: 32px;\n    column-gap: 32px;\n  }\n\n  /* Large devices (laptops/desktops, 992px and up) */\n  @media only screen and (min-width: 992px) {\n    margin: 56px;\n    column-gap: 24px;\n  }\n\n  /* X large devices (laptops/desktops, 1200px and up) */\n  @media only screen and (min-width: 1200px) {\n    margin: 56px;\n    column-gap: 40px;\n  }\n"])));
+//# sourceMappingURL=index.js.map

package/dist/Layouts/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Layouts/index.ts"],"names":["styled","BREAKPOINTS","GRID","GAP","SMALL","MEDIUM","LARGE","GUTTER","PageWidth","div","XLARGE","props","useMaxWidth","maxWidth","Columns","section","gap","columns","printColumns","ContainerMargins"],"mappings":";;;;AAAA,OAAOA,MAAP,MAAmB,mBAAnB;AAEA,SAASC,WAAT,QAA4B,WAA5B;AAEA,IAAMC,IAAI,GAAG;AACXC,EAAAA,GAAG,EAAE;AACHC,IAAAA,KAAK,EAAE,MADJ;AAEHC,IAAAA,MAAM,EAAE,MAFL;AAGHC,IAAAA,KAAK,EAAE;AAHJ,GADM;AAMXC,EAAAA,MAAM,EAAE;AACNH,IAAAA,KAAK,EAAE,MADD;AAENC,IAAAA,MAAM,EAAE,MAFF;AAGNC,IAAAA,KAAK,EAAE;AAHD;AANG,CAAb;AAaA,OAAO,IAAME,SAAS,GAAGR,MAAM,CAACS,GAAV,oPAERP,IAAI,CAACK,MAAL,CAAYH,KAFJ,EAIlBH,WAAW,CAACI,MAJM,EAKNH,IAAI,CAACK,MAAL,CAAYF,MALN,EAOlBJ,WAAW,CAACK,KAPM,EAQNJ,IAAI,CAACK,MAAL,CAAYD,KARN,EAWlBL,WAAW,CAACS,MAXM,EAYL,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,WAAN,GAAqBD,KAAK,CAACE,QAAN,GAAiB,sBAAsBF,KAAK,CAACE,QAA5B,GAAuC,KAAxD,GAAgE,oBAArF,GAA6G,QAAzH;AAAA,CAZK,CAAf;AAiBP,OAAO,IAAMC,OAAO,GAAGd,MAAM,CAACe,OAAV,snBAGN,UAACJ,KAAD;AAAA,SAAWA,KAAK,CAACK,GAAN,IAAad,IAAI,CAACC,GAAL,CAASC,KAAjC;AAAA,CAHM,EAMhBH,WAAW,CAACI,MANI,EAOS,UAACM,KAAD;AAAA,SAAWA,KAAK,CAACM,OAAjB;AAAA,CAPT,EAQI,UAACN,KAAD;AAAA,SAAWA,KAAK,CAACM,OAAjB;AAAA,CARJ,EASJ,UAACN,KAAD;AAAA,SAAWA,KAAK,CAACK,GAAN,IAAad,IAAI,CAACC,GAAL,CAASE,MAAjC;AAAA,CATI,EAYhBJ,WAAW,CAACK,KAZI,EAaJ,UAACK,KAAD;AAAA,SAAWA,KAAK,CAACK,GAAN,IAAad,IAAI,CAACC,GAAL,CAASG,KAAjC;AAAA,CAbI,EAoBCJ,IAAI,CAACC,GAAL,CAASE,MApBV,EA0BS,UAACM,KAAD;AAAA,SAAWA,KAAK,CAACO,YAAN,IAAsB,MAAjC;AAAA,CA1BT,CAAb;AA8BP,OAAO,IAAMC,gBAAgB,GAAGnB,MAAM,CAACS,GAAV,o0BAAtB","sourcesContent":["import styled from 'styled-components';\n\nimport { BREAKPOINTS } from '../styles';\n\nconst GRID = {\n  GAP: {\n    SMALL: '24px',\n    MEDIUM: '32px',\n    LARGE: '40px',\n  },\n  GUTTER: {\n    SMALL: '16px',\n    MEDIUM: '32px',\n    LARGE: '56px',\n  },\n};\n\nexport const PageWidth = styled.div<{ useMaxWidth?: boolean; maxWidth?: number }>`\n  display: block;\n  margin: 0 ${GRID.GUTTER.SMALL};\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 ${GRID.GUTTER.MEDIUM};\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 ${GRID.GUTTER.LARGE};\n  }\n\n  ${BREAKPOINTS.XLARGE} {\n    max-width: ${(props) => (props.useMaxWidth ? (props.maxWidth ? 'min(100% - 112px,' + props.maxWidth + 'px)' : 'calc(100% - 112px)') : '1088px')};\n    margin: 0 auto;\n  }\n`;\n\nexport const Columns = styled.section<{ gap?: string; columns?: string; printColumns?: string }>`\n  width: 100%;\n  display: grid;\n  grid-gap: ${(props) => props.gap || GRID.GAP.SMALL};\n  word-break: break-word; /* Prevent long words from breaking the layout – consider making this rule global */\n\n  ${BREAKPOINTS.MEDIUM} {\n    grid-template-columns: ${(props) => props.columns};\n    -ms-grid-columns: ${(props) => props.columns};\n    grid-gap: ${(props) => props.gap || GRID.GAP.MEDIUM};\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    grid-gap: ${(props) => props.gap || GRID.GAP.LARGE};\n  }\n\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n    display: -ms-grid;\n\n    > *:not(:first-child) {\n      margin-left: ${GRID.GAP.MEDIUM};\n    }\n  }\n\n  @media print {\n    grid-gap: 0;\n    grid-template-columns: ${(props) => props.printColumns || 'none'};\n  }\n`;\n\nexport const ContainerMargins = styled.div`\n  /* X small devices (mobile phones, 320px and up) */\n  @media only screen and (min-width: 320px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Small devices (portrait tablets, 576px and up) */\n  @media only screen and (min-width: 576px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Medium devices (landscape tablets, 768px and up) */\n  @media only screen and (min-width: 768px) {\n    margin: 32px;\n    column-gap: 32px;\n  }\n\n  /* Large devices (laptops/desktops, 992px and up) */\n  @media only screen and (min-width: 992px) {\n    margin: 56px;\n    column-gap: 24px;\n  }\n\n  /* X large devices (laptops/desktops, 1200px and up) */\n  @media only screen and (min-width: 1200px) {\n    margin: 56px;\n    column-gap: 40px;\n  }\n`;\n"],"file":"index.js"}

package/dist/List/ListRow.js

@@ -0,0 +1,116 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+
+var _templateObject;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import * as React from 'react';
+import styled from 'styled-components';
+import { COLORS, ComponentTextStyle } from '../styles';
+import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';
+import { TooltipWrapper } from '../Tooltips';
+import { DropdownButton } from '../Dropdown';
+import { SystemIcons } from '../icons';
+import { Size } from '../types';
+import { Z_INDEXES } from '../styles/z-indexes';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var Row = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  position: relative;\n\n  color: ", ";\n  background-color: ", ";\n\n\n  cursor: default;\n\n  &.interactive {\n    cursor: pointer;\n  }\n\n  &.interactive.disabled {\n    cursor: not-allowed;\n  }\n\n  &.interactive:hover:not(.in-action):not(.disabled) {\n    background-color: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  &.interactive:active:not(.in-action):not(.disabled) {\n    background-color: ", ";\n    color: ", ";\n    box-shadow: none;\n    z-index: ", ";\n  }\n\n  &.interactive:focus {\n    outline: none;\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n    z-index: ", ";\n  }\n\n  &.disabled {\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n      color: ", ";\n    }\n  }\n\n\n  &.small {\n    min-height: 48px;\n    padding: 0 8px;\n\n    .list-item-icon {\n      margin-right: 8px;\n    }\n\n    .list-item-main-text {\n      ", "\n    }\n\n    .list-item-actions {\n      margin-right: -8px;\n    }\n  }\n\n  &.medium {\n    min-height: 56px;\n    padding: 0 12px;\n\n    .list-item-icon {\n      margin-right: 12px;\n    }\n\n    .list-item-main-text {\n      ", "\n    }\n\n    .list-item-actions {\n      margin-right: -12px;\n    }\n  }\n\n  &.large {\n    min-height: 64px;\n    padding: 0 16px;\n\n    .list-item-icon {\n      margin-right: 16px;\n    }\n\n    .list-item-main-text {\n      ", "\n    }\n\n    .list-item-actions {\n      margin-right: -16px;\n    }\n  }\n\n  &.overlay {\n    padding: 0 4px;\n\n    .list-item-actions {\n      margin-right: -4px;\n    }\n  }\n\n  .list-item-icon {\n    width: 24px;\n    height: 24px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .list-item-content {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .list-item-main-text {\n  }\n\n  .list-item-secondary-text {\n    ", "\n  }\n\n  .list-item-note {\n    color: ", ";\n    word-break: initial;\n    ", "\n  }\n\n  .list-item-note.with-tooltip {\n    cursor: pointer;\n\n    > div {\n      text-decoration-line: underline;\n      text-decoration-style: dashed;\n      text-underline-offset: 1px;\n      text-decoration-thickness: 1px;\n    }\n  }\n\n  .list-item-actions {\n    color: ", ";\n    display: flex;\n    align-items: center;\n\n    button div {\n      background-color: transparent;\n    }\n  }\n"])), COLORS.neutral_100, COLORS.neutral_600, COLORS.white, COLORS.primary_20, COLORS.primary_700, Z_INDEXES.hover, COLORS.primary_100, COLORS.primary_800, Z_INDEXES.active, Z_INDEXES.focus, COLORS.neutral_300, ComponentSStyling(ComponentTextStyle.Regular, null), ComponentMStyling(ComponentTextStyle.Regular, null), ComponentLStyling(ComponentTextStyle.Regular, null), ComponentXXSStyling(ComponentTextStyle.Regular, null), COLORS.neutral_600, ComponentXSStyling(ComponentTextStyle.Regular, null), COLORS.neutral_600);
+
+var ListRow = function ListRow(_ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? Size.Medium : _ref$size,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'normal' : _ref$variant,
+      icon = _ref.icon,
+      mainText = _ref.mainText,
+      secondaryText = _ref.secondaryText,
+      dropdown = _ref.dropdown,
+      note = _ref.note,
+      noteTooltip = _ref.noteTooltip,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      action = _ref.action;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      inAction = _React$useState2[0],
+      setInAction = _React$useState2[1];
+
+  var handleKeyPress = function handleKeyPress(e) {
+    if (e.key === 'Enter') {
+      action && action();
+    }
+  };
+
+  var rowClassName = (inAction ? 'in-action ' : '').concat(disabled ? 'disabled ' : '').concat(!!action ? 'interactive ' : '').concat('list-item-row ').concat("".concat(variant, " ")).concat("".concat(size));
+  return /*#__PURE__*/_jsxs(Row, {
+    tabIndex: !!action && !disabled ? 0 : undefined,
+    className: rowClassName,
+    onKeyPress: function onKeyPress(e) {
+      return !disabled && handleKeyPress(e);
+    },
+    onClick: function onClick(e) {
+      !disabled && action && action();
+    },
+    "data-hj-suppress": true,
+    children: [!!icon && /*#__PURE__*/_jsx("div", {
+      className: 'list-item-icon',
+      children: icon
+    }), /*#__PURE__*/_jsxs("div", {
+      className: 'list-item-content',
+      children: [/*#__PURE__*/_jsx("div", {
+        className: 'list-item-main-text',
+        children: mainText
+      }), !!secondaryText && /*#__PURE__*/_jsx("div", {
+        className: 'list-item-secondary-text',
+        children: secondaryText
+      })]
+    }), !!note && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [!!noteTooltip && /*#__PURE__*/_jsx("div", {
+        className: 'list-item-note with-tooltip',
+        children: /*#__PURE__*/_jsx(TooltipWrapper, {
+          label: noteTooltip,
+          size: size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small,
+          position: 'top',
+          withArrow: true,
+          children: note
+        })
+      }), !noteTooltip && /*#__PURE__*/_jsx("div", {
+        className: 'list-item-note',
+        children: note
+      })]
+    }), !!dropdown && /*#__PURE__*/_jsx("div", {
+      className: 'list-item-actions',
+      onMouseEnter: function onMouseEnter() {
+        return setInAction(!(dropdown !== null && dropdown !== void 0 && dropdown.disabled));
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setInAction(false);
+      },
+      children: /*#__PURE__*/_jsx(DropdownButton, _objectSpread(_objectSpread({}, dropdown), {}, {
+        disabled: disabled || dropdown.disabled,
+        icon: variant === 'overlay' ? /*#__PURE__*/_jsx(SystemIcons.ArrowDropDown, {}) : /*#__PURE__*/_jsx(SystemIcons.MoreVertical, {})
+      }))
+    })]
+  });
+};
+
+ListRow.propTypes = {
+  variant: _pt.oneOf(['normal', 'overlay']),
+  icon: _pt.node,
+  mainText: _pt.string.isRequired,
+  secondaryText: _pt.string,
+  note: _pt.string,
+  noteTooltip: _pt.string,
+  disabled: _pt.bool,
+  action: _pt.func
+};
+export default ListRow;
+//# sourceMappingURL=ListRow.js.map

package/dist/List/ListRow.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/List/ListRow.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","TooltipWrapper","DropdownButton","SystemIcons","Size","Z_INDEXES","Row","div","neutral_100","neutral_600","white","primary_20","primary_700","hover","primary_100","primary_800","active","focus","neutral_300","Regular","ListRow","size","Medium","variant","icon","mainText","secondaryText","dropdown","note","noteTooltip","disabled","action","useState","inAction","setInAction","handleKeyPress","e","key","rowClassName","concat","undefined","Large","Small","XSmall"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle} from '../styles';\n\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles/typography';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {TooltipWrapper} from '../Tooltips';\nimport {DropdownButton} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst Row = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  box-sizing: border-box;\n  position: relative;\n\n  color: ${COLORS.neutral_600};\n  background-color: ${COLORS.white};\n\n\n  cursor: default;\n\n  &.interactive {\n    cursor: pointer;\n  }\n\n  &.interactive.disabled {\n    cursor: not-allowed;\n  }\n\n  &.interactive:hover:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &.interactive:active:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n    box-shadow: none;\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &.interactive:focus {\n    outline: none;\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n    z-index: ${Z_INDEXES.focus};\n  }\n\n  &.disabled {\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n\n  &.small {\n    min-height: 48px;\n    padding: 0 8px;\n\n    .list-item-icon {\n      margin-right: 8px;\n    }\n\n    .list-item-main-text {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -8px;\n    }\n  }\n\n  &.medium {\n    min-height: 56px;\n    padding: 0 12px;\n\n    .list-item-icon {\n      margin-right: 12px;\n    }\n\n    .list-item-main-text {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -12px;\n    }\n  }\n\n  &.large {\n    min-height: 64px;\n    padding: 0 16px;\n\n    .list-item-icon {\n      margin-right: 16px;\n    }\n\n    .list-item-main-text {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -16px;\n    }\n  }\n\n  &.overlay {\n    padding: 0 4px;\n\n    .list-item-actions {\n      margin-right: -4px;\n    }\n  }\n\n  .list-item-icon {\n    width: 24px;\n    height: 24px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .list-item-content {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .list-item-main-text {\n  }\n\n  .list-item-secondary-text {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note {\n    color: ${COLORS.neutral_600};\n    word-break: initial;\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note.with-tooltip {\n    cursor: pointer;\n\n    > div {\n      text-decoration-line: underline;\n      text-decoration-style: dashed;\n      text-underline-offset: 1px;\n      text-decoration-thickness: 1px;\n    }\n  }\n\n  .list-item-actions {\n    color: ${COLORS.neutral_600};\n    display: flex;\n    align-items: center;\n\n    button div {\n      background-color: transparent;\n    }\n  }\n`;\n\n\ntype Props = {\n  size?: Size;\n  variant?: 'normal' | 'overlay';\n  icon?: React.ReactNode;\n  mainText: string;\n  secondaryText?: string;\n  dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;\n  note?: string;\n  noteTooltip?: string;\n  disabled?: boolean;\n  action?: () => void;\n};\n\nconst ListRow: React.FunctionComponent<Props> = ({\n                                                   size = Size.Medium,\n                                                   variant = 'normal',\n                                                   icon,\n                                                   mainText,\n                                                   secondaryText,\n                                                   dropdown,\n                                                   note,\n                                                   noteTooltip,\n                                                   disabled = false,\n                                                   action\n                                                 }: Props) => {\n\n  const [inAction, setInAction] = React.useState<Boolean>(false);\n\n  const handleKeyPress = (e: any) => {\n    if (e.key === 'Enter') {\n      action && action()\n    }\n  }\n\n  const rowClassName = (inAction ? 'in-action ' : '')\n    .concat(disabled ? 'disabled ' : '')\n    .concat(!!action ? 'interactive ' : '')\n    .concat('list-item-row ')\n    .concat(`${variant} `)\n    .concat(`${size}`);\n\n  return (\n    <Row tabIndex={!!action && !disabled ? 0 : undefined}\n         className={rowClassName}\n         onKeyPress={(e) => !disabled && handleKeyPress(e)}\n         onClick={e => {\n           !disabled && action && action();\n         }}\n         data-hj-suppress>\n      {\n        !!icon &&\n        <div className={'list-item-icon'}>{icon}</div>\n      }\n      <div className={'list-item-content'}>\n        <div className={'list-item-main-text'}>{mainText}</div>\n        {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\n      </div>\n      {\n        !!note &&\n        <>\n          {\n            !!noteTooltip &&\n            <div className={'list-item-note with-tooltip'}>\n              <TooltipWrapper label={noteTooltip}\n                              size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\n                              position={'top'}\n                              withArrow={true}>\n                {note}\n              </TooltipWrapper>\n            </div>\n          }\n          {\n            !noteTooltip &&\n            <div className={'list-item-note'}>\n              {note}\n            </div>\n          }\n        </>\n      }\n      {\n        !!dropdown &&\n        <div className={'list-item-actions'}\n             onMouseEnter={() => setInAction(!dropdown?.disabled)}\n             onMouseLeave={() => setInAction(false)}>\n          <DropdownButton {...dropdown}\n                          disabled={disabled || dropdown.disabled}\n                          icon={variant === 'overlay'\n                            ? <SystemIcons.ArrowDropDown/>\n                            : <SystemIcons.MoreVertical/>}\n          />\n        </div>\n      }\n    </Row>\n  );\n};\n\nexport default ListRow;\n\n"],"file":"ListRow.js"}

package/dist/List/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/List/index.ts"],"names":["ListRow"],"mappings":"AAAA,OAAOA,OAAP,MAAoB,WAApB;AAEA,SAAQA,OAAR","sourcesContent":["import ListRow from './ListRow';\n\nexport {ListRow};\n"],"file":"index.js"}

package/dist/LoadingIndicator/LoadingIndicator.js

@@ -0,0 +1,48 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+
+var _templateObject;
+
+import * as React from 'react';
+import styled from 'styled-components';
+import { COLORS } from '../styles';
+import { Size } from '../types';
+import { LoadingMedium, LoadingSmall } from '../icons/systemicons/SystemIcons';
+import { jsx as _jsx } from "react/jsx-runtime";
+var LoadingWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  svg {\n    animation-name: spin;\n    animation-duration: 1s;\n    animation-iteration-count: infinite;\n    transform-origin: 50% 50%;\n\n    @keyframes spin {\n      from {\n        transform: rotate(0deg);\n      }\n      to {\n        transform: rotate(360deg);\n      }\n    }\n  }\n"])));
+
+var LoadingIndicator = function LoadingIndicator(_ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? Size.Medium : _ref$size,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? COLORS.primary : _ref$color;
+
+  switch (size) {
+    case Size.Medium:
+      return /*#__PURE__*/_jsx(LoadingWrapper, {
+        children: /*#__PURE__*/_jsx(LoadingMedium, {
+          color: color
+        })
+      });
+
+    case Size.Small:
+      return /*#__PURE__*/_jsx(LoadingWrapper, {
+        children: /*#__PURE__*/_jsx(LoadingSmall, {
+          color: color
+        })
+      });
+
+    default:
+      return /*#__PURE__*/_jsx(LoadingWrapper, {
+        children: /*#__PURE__*/_jsx(LoadingMedium, {
+          color: color
+        })
+      });
+  }
+};
+
+LoadingIndicator.propTypes = {
+  color: _pt.string
+};
+export default LoadingIndicator;
+//# sourceMappingURL=LoadingIndicator.js.map

package/dist/LoadingIndicator/LoadingIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/LoadingIndicator/LoadingIndicator.tsx"],"names":["React","styled","COLORS","Size","LoadingMedium","LoadingSmall","LoadingWrapper","div","LoadingIndicator","size","Medium","color","primary","Small"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,IAAT,QAAqB,UAArB;AACA,SAASC,aAAT,EAAwBC,YAAxB,QAA4C,kCAA5C;;AAEA,IAAMC,cAAc,GAAGL,MAAM,CAACM,GAAV,kcAApB;;AA4BA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,OAA2E;AAAA,uBAAxEC,IAAwE;AAAA,MAAxEA,IAAwE,0BAAjEN,IAAI,CAACO,MAA4D;AAAA,wBAApDC,KAAoD;AAAA,MAApDA,KAAoD,2BAA5CT,MAAM,CAACU,OAAqC;;AAClG,UAAQH,IAAR;AACE,SAAKN,IAAI,CAACO,MAAV;AACE,0BACE,KAAC,cAAD;AAAA,+BACE,KAAC,aAAD;AAAe,UAAA,KAAK,EAAEC;AAAtB;AADF,QADF;;AAKF,SAAKR,IAAI,CAACU,KAAV;AACE,0BACE,KAAC,cAAD;AAAA,+BACE,KAAC,YAAD;AAAc,UAAA,KAAK,EAAEF;AAArB;AADF,QADF;;AAKF;AACE,0BACE,KAAC,cAAD;AAAA,+BACE,KAAC,aAAD;AAAe,UAAA,KAAK,EAAEA;AAAtB;AADF,QADF;AAdJ;AAoBD,CArBD;;;AAHEA,EAAAA,K;;AA0BF,eAAeH,gBAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS } from '../styles';\nimport { Size } from '../types';\nimport { LoadingMedium, LoadingSmall } from '../icons/systemicons/SystemIcons';\n\nconst LoadingWrapper = styled.div`\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  svg {\n    animation-name: spin;\n    animation-duration: 1s;\n    animation-iteration-count: infinite;\n    transform-origin: 50% 50%;\n\n    @keyframes spin {\n      from {\n        transform: rotate(0deg);\n      }\n      to {\n        transform: rotate(360deg);\n      }\n    }\n  }\n`;\n\ntype LoadingIndicatorProps = {\n  size?: Size.Small | Size.Medium;\n  color?: string;\n};\n\nconst LoadingIndicator = ({ size = Size.Medium, color = COLORS.primary }: LoadingIndicatorProps) => {\n  switch (size) {\n    case Size.Medium:\n      return (\n        <LoadingWrapper>\n          <LoadingMedium color={color} />\n        </LoadingWrapper>\n      );\n    case Size.Small:\n      return (\n        <LoadingWrapper>\n          <LoadingSmall color={color} />\n        </LoadingWrapper>\n      );\n    default:\n      return (\n        <LoadingWrapper>\n          <LoadingMedium color={color} />\n        </LoadingWrapper>\n      );\n  }\n};\n\nexport default LoadingIndicator;\n"],"file":"LoadingIndicator.js"}

package/dist/LoadingIndicator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/LoadingIndicator/index.ts"],"names":["default","LoadingIndicator"],"mappings":"AAAA,SAASA,OAAO,IAAIC,gBAApB,QAA4C,oBAA5C","sourcesContent":["export { default as LoadingIndicator } from './LoadingIndicator';\n"],"file":"index.js"}

package/dist/LoadingPage/GlobalLoadingPage.js

@@ -0,0 +1,40 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+import * as React from 'react';
+import styled from 'styled-components';
+import { LaerdalLoadingLogo } from '../assets';
+import LoadingIndicator from '../LoadingIndicator/LoadingIndicator';
+import { COLORS, ComponentTextStyle } from '../styles';
+import { ComponentMStyling } from '../styles/typography';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var LoadingMain = styled.main(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  background-color: ", ";\n  height: 100%;\n"])), COLORS.primary_20);
+var Header = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 64px;\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n"])), COLORS.white, COLORS.neutral_200);
+var LogoAndMessage = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  bottom: 36px;\n  left: 50%;\n  transform: translate(-50%);\n  align-items: center;\n\n  span {\n    margin-bottom: 40px;\n    font-weight: normal;\n    width: 320px;\n    text-align: center;\n    \n    ", "\n  }\n"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600));
+var LoadingIndicatorContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])));
+
+var LoadingPage = function LoadingPage(_ref) {
+  var optionalMessage = _ref.optionalMessage,
+      includeHeader = _ref.includeHeader;
+  return /*#__PURE__*/_jsxs(LoadingMain, {
+    "data-testid": "TestLoadingMain",
+    children: [includeHeader && /*#__PURE__*/_jsx(Header, {}), /*#__PURE__*/_jsx(LoadingIndicatorContainer, {
+      children: /*#__PURE__*/_jsx(LoadingIndicator, {})
+    }), /*#__PURE__*/_jsxs(LogoAndMessage, {
+      "data-testid": "TestLoadingLogoAndMessage",
+      children: [optionalMessage && /*#__PURE__*/_jsx("span", {
+        children: optionalMessage
+      }), /*#__PURE__*/_jsx(LaerdalLoadingLogo, {})]
+    })]
+  });
+};
+
+LoadingPage.propTypes = {
+  optionalMessage: _pt.string,
+  includeHeader: _pt.bool
+};
+export default LoadingPage;
+//# sourceMappingURL=GlobalLoadingPage.js.map

package/dist/LoadingPage/GlobalLoadingPage.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/LoadingPage/GlobalLoadingPage.tsx"],"names":["React","styled","LaerdalLoadingLogo","LoadingIndicator","COLORS","ComponentTextStyle","ComponentMStyling","LoadingMain","main","primary_20","Header","div","white","neutral_200","LogoAndMessage","Regular","neutral_600","LoadingIndicatorContainer","LoadingPage","optionalMessage","includeHeader"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,kBAAR,QAAiC,WAAjC;AAEA,OAAOC,gBAAP,MAA6B,sCAA7B;AACA,SAAQC,MAAR,EAAgBC,kBAAhB,QAAyC,WAAzC;AACA,SAAQC,iBAAR,QAAgC,sBAAhC;;;AAEA,IAAMC,WAAW,GAAGN,MAAM,CAACO,IAAV,6KAIKJ,MAAM,CAACK,UAJZ,CAAjB;AAQA,IAAMC,MAAM,GAAGT,MAAM,CAACU,GAAV,wJAEUP,MAAM,CAACQ,KAFjB,EAGiBR,MAAM,CAACS,WAHxB,CAAZ;AAMA,IAAMC,cAAc,GAAGb,MAAM,CAACU,GAAV,qWAedL,iBAAiB,CAACD,kBAAkB,CAACU,OAApB,EAA6BX,MAAM,CAACY,WAApC,CAfH,CAApB;AAmBA,IAAMC,yBAAyB,GAAGhB,MAAM,CAACU,GAAV,gKAA/B;;AAYA,IAAMO,WAAiD,GAAG,SAApDA,WAAoD,OAAqD;AAAA,MAAlDC,eAAkD,QAAlDA,eAAkD;AAAA,MAAjCC,aAAiC,QAAjCA,aAAiC;AAC7G,sBACE,MAAC,WAAD;AAAa,mBAAY,iBAAzB;AAAA,eACGA,aAAa,iBAAI,KAAC,MAAD,KADpB,eAEE,KAAC,yBAAD;AAAA,6BACE,KAAC,gBAAD;AADF,MAFF,eAKE,MAAC,cAAD;AAAgB,qBAAY,2BAA5B;AAAA,iBACGD,eAAe,iBAAI;AAAA,kBAAOA;AAAP,QADtB,eAEE,KAAC,kBAAD,KAFF;AAAA,MALF;AAAA,IADF;AAYD,CAbD;;;AAJEA,EAAAA,e;AACAC,EAAAA,a;;AAkBF,eAAeF,WAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {LaerdalLoadingLogo} from '../assets';\n\nimport LoadingIndicator from '../LoadingIndicator/LoadingIndicator';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport {ComponentMStyling} from '../styles/typography';\n\nconst LoadingMain = styled.main`\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  background-color: ${COLORS.primary_20};\n  height: 100%;\n`;\n\nconst Header = styled.div<LoaderProps>`\n  height: 64px;\n  background-color: ${COLORS.white};\n  border-bottom: 1px solid ${COLORS.neutral_200};\n`;\n\nconst LogoAndMessage = styled.div`\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  bottom: 36px;\n  left: 50%;\n  transform: translate(-50%);\n  align-items: center;\n\n  span {\n    margin-bottom: 40px;\n    font-weight: normal;\n    width: 320px;\n    text-align: center;\n    \n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n  }\n`;\n\nconst LoadingIndicatorContainer = styled.div`\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n`;\n\ninterface LoaderProps {\n  optionalMessage?: string;\n  includeHeader?: boolean;\n}\n\nconst LoadingPage: React.FunctionComponent<LoaderProps> = ({ optionalMessage, includeHeader }: LoaderProps) => {\n  return (\n    <LoadingMain data-testid=\"TestLoadingMain\">\n      {includeHeader && <Header />}\n      <LoadingIndicatorContainer>\n        <LoadingIndicator />\n      </LoadingIndicatorContainer>\n      <LogoAndMessage data-testid=\"TestLoadingLogoAndMessage\">\n        {optionalMessage && <span>{optionalMessage}</span>}\n        <LaerdalLoadingLogo />\n      </LogoAndMessage>\n    </LoadingMain>\n  );\n};\n\nexport default LoadingPage;\n"],"file":"GlobalLoadingPage.js"}

package/dist/LoadingPage/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/LoadingPage/index.tsx"],"names":["default","GlobalLoadingPage"],"mappings":"AAAA,SAASA,OAAO,IAAIC,iBAApB,QAA6C,qBAA7C","sourcesContent":["export { default as GlobalLoadingPage } from './GlobalLoadingPage';\n"],"file":"index.js"}

package/dist/MiniProductCard/MiniProductCard.js

@@ -0,0 +1,51 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';
+import { ChevronRight } from '../icons/systemicons/SystemIcons';
+import { ComponentMStyling, ComponentSStyling } from '../styles/typography';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var ProductLink = styled(Link)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1;\n  margin: 10px 8px;\n  color: ", ";\n  text-decoration: none;\n\n  ", " {\n    width: 305px;\n  }\n"])), COLORS.black, BREAKPOINTS.MEDIUM);
+var ProductThing = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  border-radius: 8px;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n\n  &:hover {\n    background: ", ";\n\n    .product-chevron-right-path {\n      fill: ", ";\n    }\n  }\n  &:active {\n    background: ", ";\n\n    .product-chevron-right-path {\n      fill: ", ";\n    }\n  }\n"])), COLORS.primary_20, COLORS.primary_600, COLORS.primary_100, COLORS.primary_600);
+var ProductImage = styled.img(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 95px;\n  height: 75px;\n  object-fit: fill;\n  border-radius: 8px;\n"])));
+var ProductName = styled.h2(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n  margin: 0;\n  margin-top: 3px;\n"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black));
+var ProductType = styled.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", "\n  margin: 0;\n"])), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black));
+var ProductInnerWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: 12px 18px;\n  flex: 1;\n"])));
+var RightIconWrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-self: flex-start;\n  align-items: center;\n  padding-right: 12px;\n"])));
+
+var MiniProductCard = function MiniProductCard(_ref) {
+  var url = _ref.url,
+      product = _ref.product;
+  return /*#__PURE__*/_jsx(ProductLink, {
+    to: url !== null && url !== void 0 ? url : '',
+    children: /*#__PURE__*/_jsxs(ProductThing, {
+      children: [product.image && /*#__PURE__*/_jsx(ProductImage, {
+        src: product.image
+      }), /*#__PURE__*/_jsxs(ProductInnerWrapper, {
+        children: [/*#__PURE__*/_jsx(ProductName, {
+          children: product.name
+        }), /*#__PURE__*/_jsx(ProductType, {
+          children: product.type
+        })]
+      }), /*#__PURE__*/_jsx(RightIconWrapper, {
+        children: /*#__PURE__*/_jsx(ChevronRight, {
+          color: COLORS.primary,
+          className: 'product-chevron-right',
+          size: '24px'
+        })
+      })]
+    })
+  });
+};
+
+MiniProductCard.propTypes = {
+  url: _pt.string
+};
+export default MiniProductCard;
+//# sourceMappingURL=MiniProductCard.js.map

package/dist/MiniProductCard/MiniProductCard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/MiniProductCard/MiniProductCard.tsx"],"names":["React","Link","styled","BREAKPOINTS","COLORS","ComponentTextStyle","ChevronRight","ComponentMStyling","ComponentSStyling","ProductLink","black","MEDIUM","ProductThing","div","primary_20","primary_600","primary_100","ProductImage","img","ProductName","h2","Regular","ProductType","span","ProductInnerWrapper","RightIconWrapper","MiniProductCard","url","product","image","name","type","primary"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAAQC,IAAR,QAAmB,kBAAnB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,WAAR,EAAqBC,MAArB,EAA6BC,kBAA7B,QAAsD,WAAtD;AACA,SAAQC,YAAR,QAA2B,kCAA3B;AAEA,SAAQC,iBAAR,EAA2BC,iBAA3B,QAAmD,sBAAnD;;;AAMA,IAAMC,WAAW,GAAGP,MAAM,CAACD,IAAD,CAAT,yMAING,MAAM,CAACM,KAJD,EAObP,WAAW,CAACQ,MAPC,CAAjB;AAYA,IAAMC,YAAY,GAAGV,MAAM,CAACW,GAAV,0ZAQAT,MAAM,CAACU,UARP,EAWJV,MAAM,CAACW,WAXH,EAeAX,MAAM,CAACY,WAfP,EAkBJZ,MAAM,CAACW,WAlBH,CAAlB;AAuBA,IAAME,YAAY,GAAGf,MAAM,CAACgB,GAAV,sJAAlB;AAOA,IAAMC,WAAW,GAAGjB,MAAM,CAACkB,EAAV,oHACbb,iBAAiB,CAACF,kBAAkB,CAACgB,OAApB,EAA6BjB,MAAM,CAACM,KAApC,CADJ,CAAjB;AAMA,IAAMY,WAAW,GAAGpB,MAAM,CAACqB,IAAV,gGACbf,iBAAiB,CAACH,kBAAkB,CAACgB,OAApB,EAA6BjB,MAAM,CAACM,KAApC,CADJ,CAAjB;AAKA,IAAMc,mBAAmB,GAAGtB,MAAM,CAACW,GAAV,yJAAzB;AAOA,IAAMY,gBAAgB,GAAGvB,MAAM,CAACW,GAAV,wKAAtB;;AAOA,IAAMa,eAAe,GAAG,SAAlBA,eAAkB,OAAiC;AAAA,MAA9BC,GAA8B,QAA9BA,GAA8B;AAAA,MAAzBC,OAAyB,QAAzBA,OAAyB;AACvD,sBACE,KAAC,WAAD;AAAa,IAAA,EAAE,EAAED,GAAF,aAAEA,GAAF,cAAEA,GAAF,GAAS,EAAxB;AAAA,2BACE,MAAC,YAAD;AAAA,iBACGC,OAAO,CAACC,KAAR,iBAAiB,KAAC,YAAD;AAAc,QAAA,GAAG,EAAED,OAAO,CAACC;AAA3B,QADpB,eAEE,MAAC,mBAAD;AAAA,gCACE,KAAC,WAAD;AAAA,oBAAcD,OAAO,CAACE;AAAtB,UADF,eAEE,KAAC,WAAD;AAAA,oBAAcF,OAAO,CAACG;AAAtB,UAFF;AAAA,QAFF,eAME,KAAC,gBAAD;AAAA,+BACE,KAAC,YAAD;AAAc,UAAA,KAAK,EAAE3B,MAAM,CAAC4B,OAA5B;AAAqC,UAAA,SAAS,EAAE,uBAAhD;AAAyE,UAAA,IAAI,EAAE;AAA/E;AADF,QANF;AAAA;AADF,IADF;AAcD,CAfD;;;AArEEL,EAAAA,G;;AAsFF,eAAeD,eAAf","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ChevronRight} from '../icons/systemicons/SystemIcons';\nimport {Product} from '../types';\nimport {ComponentMStyling, ComponentSStyling} from '../styles/typography';\n\ntype CardProps = {\n  product: Product;\n  url?: string;\n};\nconst ProductLink = styled(Link)`\n  display: flex;\n  flex: 1;\n  margin: 10px 8px;\n  color: ${COLORS.black};\n  text-decoration: none;\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 305px;\n  }\n`;\n\nconst ProductThing = styled.div`\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  border-radius: 8px;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n\n  &:hover {\n    background: ${COLORS.primary_20};\n\n    .product-chevron-right-path {\n      fill: ${COLORS.primary_600};\n    }\n  }\n  &:active {\n    background: ${COLORS.primary_100};\n\n    .product-chevron-right-path {\n      fill: ${COLORS.primary_600};\n    }\n  }\n`;\n\nconst ProductImage = styled.img`\n  width: 95px;\n  height: 75px;\n  object-fit: fill;\n  border-radius: 8px;\n`;\n\nconst ProductName = styled.h2`\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  margin: 0;\n  margin-top: 3px;\n`;\n\nconst ProductType = styled.span`\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n  margin: 0;\n`;\n\nconst ProductInnerWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  padding: 12px 18px;\n  flex: 1;\n`;\n\nconst RightIconWrapper = styled.div`\n  display: flex;\n  justify-self: flex-start;\n  align-items: center;\n  padding-right: 12px;\n`;\n\nconst MiniProductCard = ({ url, product }: CardProps) => {\n  return (\n    <ProductLink to={url ?? ''}>\n      <ProductThing>\n        {product.image && <ProductImage src={product.image} />}\n        <ProductInnerWrapper>\n          <ProductName>{product.name}</ProductName>\n          <ProductType>{product.type}</ProductType>\n        </ProductInnerWrapper>\n        <RightIconWrapper>\n          <ChevronRight color={COLORS.primary} className={'product-chevron-right'} size={'24px'} />\n        </RightIconWrapper>\n      </ProductThing>\n    </ProductLink>\n  );\n};\n\nexport default MiniProductCard;\n"],"file":"MiniProductCard.js"}