@laerdal/life-react-components 3.4.2 → 3.5.0

package/dist/esm/Layouts/index.js

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

package/dist/esm/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,MAAMC,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,MAAME,SAAS,GAAGR,MAAM,CAACS,GAAkD;AAClF;AACA,cAAcP,IAAI,CAACK,MAAL,CAAYH,KAAM;AAChC;AACA,IAAIH,WAAW,CAACI,MAAO;AACvB,gBAAgBH,IAAI,CAACK,MAAL,CAAYF,MAAO;AACnC;AACA,IAAIJ,WAAW,CAACK,KAAM;AACtB,gBAAgBJ,IAAI,CAACK,MAAL,CAAYD,KAAM;AAClC;AACA;AACA,IAAIL,WAAW,CAACS,MAAO;AACvB,iBAAkBC,KAAD,IAAYA,KAAK,CAACC,WAAN,GAAqBD,KAAK,CAACE,QAAN,GAAiB,sBAAsBF,KAAK,CAACE,QAA5B,GAAuC,KAAxD,GAAgE,oBAArF,GAA6G,QAAU;AACpJ;AACA;AACA,CAfO;AAiBP,OAAO,MAAMC,OAAO,GAAGd,MAAM,CAACe,OAAmE;AACjG;AACA;AACA,cAAeJ,KAAD,IAAWA,KAAK,CAACK,GAAN,IAAad,IAAI,CAACC,GAAL,CAASC,KAAM;AACrD;AACA;AACA,IAAIH,WAAW,CAACI,MAAO;AACvB,6BAA8BM,KAAD,IAAWA,KAAK,CAACM,OAAQ;AACtD,wBAAyBN,KAAD,IAAWA,KAAK,CAACM,OAAQ;AACjD,gBAAiBN,KAAD,IAAWA,KAAK,CAACK,GAAN,IAAad,IAAI,CAACC,GAAL,CAASE,MAAO;AACxD;AACA;AACA,IAAIJ,WAAW,CAACK,KAAM;AACtB,gBAAiBK,KAAD,IAAWA,KAAK,CAACK,GAAN,IAAad,IAAI,CAACC,GAAL,CAASG,KAAM;AACvD;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqBJ,IAAI,CAACC,GAAL,CAASE,MAAO;AACrC;AACA;AACA;AACA;AACA;AACA,6BAA8BM,KAAD,IAAWA,KAAK,CAACO,YAAN,IAAsB,MAAO;AACrE;AACA,CA5BO;AA8BP,OAAO,MAAMC,gBAAgB,GAAGnB,MAAM,CAACS,GAAI;AAC3C;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,CA9BO","sourcesContent":["import styled from 'styled-components';\r\n\r\nimport { BREAKPOINTS } from '../styles';\r\n\r\nconst GRID = {\r\n  GAP: {\r\n    SMALL: '24px',\r\n    MEDIUM: '32px',\r\n    LARGE: '40px',\r\n  },\r\n  GUTTER: {\r\n    SMALL: '16px',\r\n    MEDIUM: '32px',\r\n    LARGE: '56px',\r\n  },\r\n};\r\n\r\nexport const PageWidth = styled.div<{ useMaxWidth?: boolean; maxWidth?: number }>`\r\n  display: block;\r\n  margin: 0 ${GRID.GUTTER.SMALL};\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    margin: 0 ${GRID.GUTTER.MEDIUM};\r\n  }\r\n  ${BREAKPOINTS.LARGE} {\r\n    margin: 0 ${GRID.GUTTER.LARGE};\r\n  }\r\n\r\n  ${BREAKPOINTS.XLARGE} {\r\n    max-width: ${(props) => (props.useMaxWidth ? (props.maxWidth ? 'min(100% - 112px,' + props.maxWidth + 'px)' : 'calc(100% - 112px)') : '1088px')};\r\n    margin: 0 auto;\r\n  }\r\n`;\r\n\r\nexport const Columns = styled.section<{ gap?: string; columns?: string; printColumns?: string }>`\r\n  width: 100%;\r\n  display: grid;\r\n  grid-gap: ${(props) => props.gap || GRID.GAP.SMALL};\r\n  word-break: break-word; /* Prevent long words from breaking the layout – consider making this rule global */\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    grid-template-columns: ${(props) => props.columns};\r\n    -ms-grid-columns: ${(props) => props.columns};\r\n    grid-gap: ${(props) => props.gap || GRID.GAP.MEDIUM};\r\n  }\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    grid-gap: ${(props) => props.gap || GRID.GAP.LARGE};\r\n  }\r\n\r\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\r\n    display: -ms-grid;\r\n\r\n    > *:not(:first-child) {\r\n      margin-left: ${GRID.GAP.MEDIUM};\r\n    }\r\n  }\r\n\r\n  @media print {\r\n    grid-gap: 0;\r\n    grid-template-columns: ${(props) => props.printColumns || 'none'};\r\n  }\r\n`;\r\n\r\nexport const ContainerMargins = styled.div`\r\n  /* X small devices (mobile phones, 320px and up) */\r\n  @media only screen and (min-width: 320px) {\r\n    margin: 16px;\r\n    column-gap: 16px;\r\n  }\r\n\r\n  /* Small devices (portrait tablets, 576px and up) */\r\n  @media only screen and (min-width: 576px) {\r\n    margin: 16px;\r\n    column-gap: 16px;\r\n  }\r\n\r\n  /* Medium devices (landscape tablets, 768px and up) */\r\n  @media only screen and (min-width: 768px) {\r\n    margin: 32px;\r\n    column-gap: 32px;\r\n  }\r\n\r\n  /* Large devices (laptops/desktops, 992px and up) */\r\n  @media only screen and (min-width: 992px) {\r\n    margin: 56px;\r\n    column-gap: 24px;\r\n  }\r\n\r\n  /* X large devices (laptops/desktops, 1200px and up) */\r\n  @media only screen and (min-width: 1200px) {\r\n    margin: 56px;\r\n    column-gap: 40px;\r\n  }\r\n`;\r\n"],"file":"index.js"}

package/dist/esm/List/ListRow.js

@@ -0,0 +1,240 @@
+import _pt from "prop-types";
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+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';
+const Row = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  border-bottom: 1px solid ${COLORS.neutral_100};
+  box-sizing: border-box;
+  position: relative;
+
+  color: ${COLORS.neutral_600};
+  background-color: ${COLORS.white};
+
+
+  cursor: default;
+
+  &.interactive {
+    cursor: pointer;
+  }
+
+  &.interactive.disabled {
+    cursor: not-allowed;
+  }
+
+  &.interactive:hover:not(.in-action):not(.disabled) {
+    background-color: ${COLORS.primary_20};
+    color: ${COLORS.primary_700};
+    z-index: ${Z_INDEXES.hover};
+  }
+
+  &.interactive:active:not(.in-action):not(.disabled) {
+    background-color: ${COLORS.primary_100};
+    color: ${COLORS.primary_800};
+    box-shadow: none;
+    z-index: ${Z_INDEXES.active};
+  }
+
+  &.interactive:focus {
+    outline: none;
+    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;
+    z-index: ${Z_INDEXES.focus};
+  }
+
+  &.disabled {
+    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {
+      color: ${COLORS.neutral_300};
+    }
+  }
+
+
+  &.small {
+    min-height: 48px;
+    padding: 0 8px;
+
+    .list-item-icon {
+      margin-right: 8px;
+    }
+
+    .list-item-main-text {
+      ${ComponentSStyling(ComponentTextStyle.Regular, null)}
+    }
+
+    .list-item-actions {
+      margin-right: -8px;
+    }
+  }
+
+  &.medium {
+    min-height: 56px;
+    padding: 0 12px;
+
+    .list-item-icon {
+      margin-right: 12px;
+    }
+
+    .list-item-main-text {
+      ${ComponentMStyling(ComponentTextStyle.Regular, null)}
+    }
+
+    .list-item-actions {
+      margin-right: -12px;
+    }
+  }
+
+  &.large {
+    min-height: 64px;
+    padding: 0 16px;
+
+    .list-item-icon {
+      margin-right: 16px;
+    }
+
+    .list-item-main-text {
+      ${ComponentLStyling(ComponentTextStyle.Regular, null)}
+    }
+
+    .list-item-actions {
+      margin-right: -16px;
+    }
+  }
+
+  &.overlay {
+    padding: 0 4px;
+
+    .list-item-actions {
+      margin-right: -4px;
+    }
+  }
+
+  .list-item-icon {
+    width: 24px;
+    height: 24px;
+
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  .list-item-content {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .list-item-main-text {
+  }
+
+  .list-item-secondary-text {
+    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}
+  }
+
+  .list-item-note {
+    color: ${COLORS.neutral_600};
+    word-break: initial;
+    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}
+  }
+
+  .list-item-note.with-tooltip {
+    cursor: pointer;
+
+    > div {
+      text-decoration-line: underline;
+      text-decoration-style: dashed;
+      text-underline-offset: 1px;
+      text-decoration-thickness: 1px;
+    }
+  }
+
+  .list-item-actions {
+    color: ${COLORS.neutral_600};
+    display: flex;
+    align-items: center;
+
+    button div {
+      background-color: transparent;
+    }
+  }
+`;
+
+const ListRow = ({
+  size = Size.Medium,
+  variant = 'normal',
+  icon,
+  mainText,
+  secondaryText,
+  dropdown,
+  note,
+  noteTooltip,
+  disabled = false,
+  action
+}) => {
+  const [inAction, setInAction] = React.useState(false);
+
+  const handleKeyPress = e => {
+    if (e.key === 'Enter') {
+      action && action();
+    }
+  };
+
+  const rowClassName = (inAction ? 'in-action ' : '').concat(disabled ? 'disabled ' : '').concat(!!action ? 'interactive ' : '').concat('list-item-row ').concat(`${variant} `).concat(`${size}`);
+  return /*#__PURE__*/React.createElement(Row, {
+    tabIndex: !!action && !disabled ? 0 : undefined,
+    className: rowClassName,
+    onKeyPress: e => !disabled && handleKeyPress(e),
+    onClick: e => {
+      !disabled && action && action();
+    },
+    "data-hj-suppress": true
+  }, !!icon && /*#__PURE__*/React.createElement("div", {
+    className: 'list-item-icon'
+  }, icon), /*#__PURE__*/React.createElement("div", {
+    className: 'list-item-content'
+  }, /*#__PURE__*/React.createElement("div", {
+    className: 'list-item-main-text'
+  }, mainText), !!secondaryText && /*#__PURE__*/React.createElement("div", {
+    className: 'list-item-secondary-text'
+  }, secondaryText)), !!note && /*#__PURE__*/React.createElement(React.Fragment, null, !!noteTooltip && /*#__PURE__*/React.createElement("div", {
+    className: 'list-item-note with-tooltip'
+  }, /*#__PURE__*/React.createElement(TooltipWrapper, {
+    label: noteTooltip,
+    size: size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small,
+    position: 'top',
+    withArrow: true
+  }, note)), !noteTooltip && /*#__PURE__*/React.createElement("div", {
+    className: 'list-item-note'
+  }, note)), !!dropdown && /*#__PURE__*/React.createElement("div", {
+    className: 'list-item-actions',
+    onMouseEnter: () => setInAction(!dropdown?.disabled),
+    onMouseLeave: () => setInAction(false)
+  }, /*#__PURE__*/React.createElement(DropdownButton, _extends({}, dropdown, {
+    disabled: disabled || dropdown.disabled,
+    icon: variant === 'overlay' ? /*#__PURE__*/React.createElement(SystemIcons.ArrowDropDown, null) : /*#__PURE__*/React.createElement(SystemIcons.MoreVertical, null)
+  }))));
+};
+
+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/esm/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","inAction","setInAction","useState","handleKeyPress","e","key","rowClassName","concat","undefined","Large","Small","XSmall"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,EAAgBC,kBAAhB,QAAyC,WAAzC;AAEA,SACEC,iBADF,EAEEC,iBAFF,EAGEC,iBAHF,EAIEC,kBAJF,EAKEC,mBALF,QAMO,sBANP;AAQA,SAAQC,cAAR,QAA6B,aAA7B;AACA,SAAQC,cAAR,QAA6B,aAA7B;AACA,SAAQC,WAAR,QAA0B,UAA1B;AACA,SAAQC,IAAR,QAAmB,UAAnB;AACA,SAAQC,SAAR,QAAwB,qBAAxB;AAEA,MAAMC,GAAG,GAAGb,MAAM,CAACc,GAAI;AACvB;AACA;AACA;AACA;AACA,6BAA6Bb,MAAM,CAACc,WAAY;AAChD;AACA;AACA;AACA,WAAWd,MAAM,CAACe,WAAY;AAC9B,sBAAsBf,MAAM,CAACgB,KAAM;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBhB,MAAM,CAACiB,UAAW;AAC1C,aAAajB,MAAM,CAACkB,WAAY;AAChC,eAAeP,SAAS,CAACQ,KAAM;AAC/B;AACA;AACA;AACA,wBAAwBnB,MAAM,CAACoB,WAAY;AAC3C,aAAapB,MAAM,CAACqB,WAAY;AAChC;AACA,eAAeV,SAAS,CAACW,MAAO;AAChC;AACA;AACA;AACA;AACA;AACA,eAAeX,SAAS,CAACY,KAAM;AAC/B;AACA;AACA;AACA;AACA,eAAevB,MAAM,CAACwB,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQpB,iBAAiB,CAACH,kBAAkB,CAACwB,OAApB,EAA6B,IAA7B,CAAmC;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQtB,iBAAiB,CAACF,kBAAkB,CAACwB,OAApB,EAA6B,IAA7B,CAAmC;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;A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","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentTextStyle} from '../styles';\r\n\r\nimport {\r\n  ComponentLStyling,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentXSStyling,\r\n  ComponentXXSStyling\r\n} from '../styles/typography';\r\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\r\nimport {TooltipWrapper} from '../Tooltips';\r\nimport {DropdownButton} from '../Dropdown';\r\nimport {SystemIcons} from '../icons';\r\nimport {Size} from '../types';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\n\r\nconst Row = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border-bottom: 1px solid ${COLORS.neutral_100};\r\n  box-sizing: border-box;\r\n  position: relative;\r\n\r\n  color: ${COLORS.neutral_600};\r\n  background-color: ${COLORS.white};\r\n\r\n\r\n  cursor: default;\r\n\r\n  &.interactive {\r\n    cursor: pointer;\r\n  }\r\n\r\n  &.interactive.disabled {\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  &.interactive:hover:not(.in-action):not(.disabled) {\r\n    background-color: ${COLORS.primary_20};\r\n    color: ${COLORS.primary_700};\r\n    z-index: ${Z_INDEXES.hover};\r\n  }\r\n\r\n  &.interactive:active:not(.in-action):not(.disabled) {\r\n    background-color: ${COLORS.primary_100};\r\n    color: ${COLORS.primary_800};\r\n    box-shadow: none;\r\n    z-index: ${Z_INDEXES.active};\r\n  }\r\n\r\n  &.interactive:focus {\r\n    outline: none;\r\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\r\n    z-index: ${Z_INDEXES.focus};\r\n  }\r\n\r\n  &.disabled {\r\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\r\n      color: ${COLORS.neutral_300};\r\n    }\r\n  }\r\n\r\n\r\n  &.small {\r\n    min-height: 48px;\r\n    padding: 0 8px;\r\n\r\n    .list-item-icon {\r\n      margin-right: 8px;\r\n    }\r\n\r\n    .list-item-main-text {\r\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    .list-item-actions {\r\n      margin-right: -8px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    min-height: 56px;\r\n    padding: 0 12px;\r\n\r\n    .list-item-icon {\r\n      margin-right: 12px;\r\n    }\r\n\r\n    .list-item-main-text {\r\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    .list-item-actions {\r\n      margin-right: -12px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    min-height: 64px;\r\n    padding: 0 16px;\r\n\r\n    .list-item-icon {\r\n      margin-right: 16px;\r\n    }\r\n\r\n    .list-item-main-text {\r\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    .list-item-actions {\r\n      margin-right: -16px;\r\n    }\r\n  }\r\n\r\n  &.overlay {\r\n    padding: 0 4px;\r\n\r\n    .list-item-actions {\r\n      margin-right: -4px;\r\n    }\r\n  }\r\n\r\n  .list-item-icon {\r\n    width: 24px;\r\n    height: 24px;\r\n\r\n    svg {\r\n      width: 24px;\r\n      height: 24px;\r\n    }\r\n  }\r\n\r\n  .list-item-content {\r\n    flex-grow: 1;\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  .list-item-main-text {\r\n  }\r\n\r\n  .list-item-secondary-text {\r\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n\r\n  .list-item-note {\r\n    color: ${COLORS.neutral_600};\r\n    word-break: initial;\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n\r\n  .list-item-note.with-tooltip {\r\n    cursor: pointer;\r\n\r\n    > div {\r\n      text-decoration-line: underline;\r\n      text-decoration-style: dashed;\r\n      text-underline-offset: 1px;\r\n      text-decoration-thickness: 1px;\r\n    }\r\n  }\r\n\r\n  .list-item-actions {\r\n    color: ${COLORS.neutral_600};\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    button div {\r\n      background-color: transparent;\r\n    }\r\n  }\r\n`;\r\n\r\n\r\ntype Props = {\r\n  size?: Size;\r\n  variant?: 'normal' | 'overlay';\r\n  icon?: React.ReactNode;\r\n  mainText: string;\r\n  secondaryText?: string;\r\n  dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;\r\n  note?: string;\r\n  noteTooltip?: string;\r\n  disabled?: boolean;\r\n  action?: () => void;\r\n};\r\n\r\nconst ListRow: React.FunctionComponent<Props> = ({\r\n                                                   size = Size.Medium,\r\n                                                   variant = 'normal',\r\n                                                   icon,\r\n                                                   mainText,\r\n                                                   secondaryText,\r\n                                                   dropdown,\r\n                                                   note,\r\n                                                   noteTooltip,\r\n                                                   disabled = false,\r\n                                                   action\r\n                                                 }: Props) => {\r\n\r\n  const [inAction, setInAction] = React.useState<Boolean>(false);\r\n\r\n  const handleKeyPress = (e: any) => {\r\n    if (e.key === 'Enter') {\r\n      action && action()\r\n    }\r\n  }\r\n\r\n  const rowClassName = (inAction ? 'in-action ' : '')\r\n    .concat(disabled ? 'disabled ' : '')\r\n    .concat(!!action ? 'interactive ' : '')\r\n    .concat('list-item-row ')\r\n    .concat(`${variant} `)\r\n    .concat(`${size}`);\r\n\r\n  return (\r\n    <Row tabIndex={!!action && !disabled ? 0 : undefined}\r\n         className={rowClassName}\r\n         onKeyPress={(e) => !disabled && handleKeyPress(e)}\r\n         onClick={e => {\r\n           !disabled && action && action();\r\n         }}\r\n         data-hj-suppress>\r\n      {\r\n        !!icon &&\r\n        <div className={'list-item-icon'}>{icon}</div>\r\n      }\r\n      <div className={'list-item-content'}>\r\n        <div className={'list-item-main-text'}>{mainText}</div>\r\n        {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\r\n      </div>\r\n      {\r\n        !!note &&\r\n        <>\r\n          {\r\n            !!noteTooltip &&\r\n            <div className={'list-item-note with-tooltip'}>\r\n              <TooltipWrapper label={noteTooltip}\r\n                              size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\r\n                              position={'top'}\r\n                              withArrow={true}>\r\n                {note}\r\n              </TooltipWrapper>\r\n            </div>\r\n          }\r\n          {\r\n            !noteTooltip &&\r\n            <div className={'list-item-note'}>\r\n              {note}\r\n            </div>\r\n          }\r\n        </>\r\n      }\r\n      {\r\n        !!dropdown &&\r\n        <div className={'list-item-actions'}\r\n             onMouseEnter={() => setInAction(!dropdown?.disabled)}\r\n             onMouseLeave={() => setInAction(false)}>\r\n          <DropdownButton {...dropdown}\r\n                          disabled={disabled || dropdown.disabled}\r\n                          icon={variant === 'overlay'\r\n                            ? <SystemIcons.ArrowDropDown/>\r\n                            : <SystemIcons.MoreVertical/>}\r\n          />\r\n        </div>\r\n      }\r\n    </Row>\r\n  );\r\n};\r\n\r\nexport default ListRow;\r\n\r\n"],"file":"ListRow.js"}

package/dist/esm/List/ListRowDropdown.js

@@ -0,0 +1,125 @@
+import _pt from "prop-types";
+import * as React from 'react';
+import styled from 'styled-components';
+import { COLORS, ComponentTextStyle } from '../styles';
+import { ComponentMStyling } from '../styles/typography';
+const Wrapper = styled.div`
+  .isInside {
+    top: 42px;
+  }
+  .isOutside {
+    bottom: 42px;
+  }
+`;
+const DropdownMenuContainer = styled.div`
+  position: absolute;
+  flex-direction: column;
+  background: ${COLORS.white};
+  font-size: 1em;
+  z-index: 1;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  right: 0;
+  width: max-content;
+  min-width: 260px;
+`;
+const Content = styled.button`
+  min-width: 100%;
+  padding: 12px 16px;
+
+  text-align: left;
+  height: inherit;
+
+  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}
+
+  background-color: ${COLORS.white};
+  border-width: 0;
+
+  &:hover,
+  &:focus {
+    cursor: pointer;
+  }
+
+  &:hover {
+    background: ${COLORS.primary_20};
+    border-radius: 4px;
+  }
+  &:active {
+    background: ${COLORS.primary_100};
+    border-radius: 4px;
+  }
+`;
+const DropdownValue = styled.div`
+  height: ${props => handleDropdownHeight(props.size)}
+`;
+
+const handleDropdownHeight = size => {
+  switch (size) {
+    case 'small':
+      return '48px;';
+
+    case 'medium':
+      return '56px;';
+
+    default:
+      return '64px;';
+  }
+};
+
+const ListRowDropdown = ({
+  options,
+  closeDropdown,
+  size
+}) => {
+  const [classname, setClassname] = React.useState('isInside');
+  const reference = React.useRef(null);
+
+  const clickIsOutside = e => reference && reference?.current && !reference?.current.contains(e.target);
+
+  const handleClick = e => {
+    if (e.keyCode) {
+      if (e.keyCode === 27) {
+        closeDropdown();
+      }
+    } else if (clickIsOutside(e)) {
+      closeDropdown();
+    }
+  };
+
+  const isInViewport = (offset = 0) => {
+    if (!reference.current) return;
+    const top = reference.current.getBoundingClientRect().bottom;
+    const inside = top + offset >= 0 && top - offset <= window.innerHeight;
+
+    if (!inside) {
+      setClassname('isOutside');
+    }
+  };
+
+  React.useEffect(() => {
+    document.addEventListener('mousedown', handleClick, false);
+    document.addEventListener('keydown', handleClick, false);
+    isInViewport();
+    return () => {
+      document.removeEventListener('mousedown', handleClick, false);
+      document.removeEventListener('keydown', handleClick, false);
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(DropdownMenuContainer, {
+    ref: reference,
+    className: classname
+  }, options.map(option => /*#__PURE__*/React.createElement(DropdownValue, {
+    size: size
+  }, /*#__PURE__*/React.createElement(Content, {
+    key: option.key,
+    onClick: option.action
+  }, option.label)))));
+};
+
+ListRowDropdown.propTypes = {
+  options: _pt.array.isRequired,
+  closeDropdown: _pt.any.isRequired,
+  size: _pt.string.isRequired
+};
+export default ListRowDropdown;
+//# sourceMappingURL=ListRowDropdown.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/List/ListRowDropdown.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentMStyling","Wrapper","div","DropdownMenuContainer","white","Content","button","Regular","neutral_600","primary_20","primary_100","DropdownValue","props","handleDropdownHeight","size","ListRowDropdown","options","closeDropdown","classname","setClassname","useState","reference","useRef","clickIsOutside","e","current","contains","target","handleClick","keyCode","isInViewport","offset","top","getBoundingClientRect","bottom","inside","window","innerHeight","useEffect","document","addEventListener","removeEventListener","map","option","key","action","label"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,EAAgBC,kBAAhB,QAAyC,WAAzC;AAEA,SAAQC,iBAAR,QAAgC,sBAAhC;AAEA,MAAMC,OAAO,GAAGJ,MAAM,CAACK,GAAI;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA,CAPA;AASA,MAAMC,qBAAqB,GAAGN,MAAM,CAACK,GAAI;AACzC;AACA;AACA,gBAAgBJ,MAAM,CAACM,KAAM;AAC7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAXA;AAaA,MAAMC,OAAO,GAAGR,MAAM,CAACS,MAAO;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA,IAAIN,iBAAiB,CAACD,kBAAkB,CAACQ,OAApB,EAA6BT,MAAM,CAACU,WAApC,CAAiD;AACtE;AACA,sBAAsBV,MAAM,CAACM,KAAM;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBN,MAAM,CAACW,UAAW;AACpC;AACA;AACA;AACA,kBAAkBX,MAAM,CAACY,WAAY;AACrC;AACA;AACA,CAzBA;AA2BA,MAAMC,aAAa,GAAGd,MAAM,CAACK,GAAmB;AAChD,YAAYU,KAAK,IAAGC,oBAAoB,CAACD,KAAK,CAACE,IAAP,CAAa;AACrD,CAFA;;AAIA,MAAMD,oBAAoB,GAAIC,IAAD,IAAiB;AAC5C,UAAOA,IAAP;AAEE,SAAK,OAAL;AAAe,aAAO,OAAP;;AACf,SAAK,QAAL;AAAgB,aAAO,OAAP;;AAChB;AAAU,aAAO,OAAP;AAJZ;AAMD,CAPD;;AAeA,MAAMC,eAA2D,GAAG,CAAC;AAAEC,EAAAA,OAAF;AAAWC,EAAAA,aAAX;AAA0BH,EAAAA;AAA1B,CAAD,KAAyD;AAC3H,QAAM,CAACI,SAAD,EAAYC,YAAZ,IAA4BvB,KAAK,CAACwB,QAAN,CAAe,UAAf,CAAlC;AACA,QAAMC,SAAS,GAAGzB,KAAK,CAAC0B,MAAN,CAA6B,IAA7B,CAAlB;;AAEA,QAAMC,cAAc,GAAIC,CAAD,IAAYH,SAAS,IAAIA,SAAS,EAAEI,OAAxB,IAAmC,CAACJ,SAAS,EAAEI,OAAX,CAAmBC,QAAnB,CAA4BF,CAAC,CAACG,MAA9B,CAAvE;;AAEA,QAAMC,WAAW,GAAIJ,CAAD,IAAY;AAC9B,QAAIA,CAAC,CAACK,OAAN,EAAe;AACb,UAAIL,CAAC,CAACK,OAAF,KAAc,EAAlB,EAAsB;AACpBZ,QAAAA,aAAa;AACd;AACF,KAJD,MAIO,IAAIM,cAAc,CAACC,CAAD,CAAlB,EAAuB;AAC5BP,MAAAA,aAAa;AACd;AACF,GARD;;AAUA,QAAMa,YAAY,GAAG,CAACC,MAAM,GAAG,CAAV,KAAgB;AACnC,QAAI,CAACV,SAAS,CAACI,OAAf,EAAwB;AACxB,UAAMO,GAAG,GAAGX,SAAS,CAACI,OAAV,CAAkBQ,qBAAlB,GAA0CC,MAAtD;AACA,UAAMC,MAAM,GAAGH,GAAG,GAAGD,MAAN,IAAgB,CAAhB,IAAqBC,GAAG,GAAGD,MAAN,IAAgBK,MAAM,CAACC,WAA3D;;AACA,QAAI,CAACF,MAAL,EAAa;AACXhB,MAAAA,YAAY,CAAC,WAAD,CAAZ;AACD;AACF,GAPD;;AASAvB,EAAAA,KAAK,CAAC0C,SAAN,CAAgB,MAAM;AACpBC,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,WAA1B,EAAuCZ,WAAvC,EAAoD,KAApD;AACAW,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,SAA1B,EAAqCZ,WAArC,EAAkD,KAAlD;AACAE,IAAAA,YAAY;AACZ,WAAO,MAAM;AACXS,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,WAA7B,EAA0Cb,WAA1C,EAAuD,KAAvD;AACAW,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,SAA7B,EAAwCb,WAAxC,EAAqD,KAArD;AACD,KAHD,CAJoB,CAQpB;AACD,GATD,EASG,EATH;AAWA,sBACE,oBAAC,OAAD,qBACE,oBAAC,qBAAD;AAAuB,IAAA,GAAG,EAAEP,SAA5B;AAAuC,IAAA,SAAS,EAAEH;AAAlD,KACGF,OAAO,CAAC0B,GAAR,CAAYC,MAAM,iBACjB,oBAAC,aAAD;AAAe,IAAA,IAAI,EAAE7B;AAArB,kBACE,oBAAC,OAAD;AAAS,IAAA,GAAG,EAAE6B,MAAM,CAACC,GAArB;AAA0B,IAAA,OAAO,EAAED,MAAM,CAACE;AAA1C,KACGF,MAAM,CAACG,KADV,CADF,CADD,CADH,CADF,CADF;AAaD,CAjDD;;;AALE9B,EAAAA,O;AACAC,EAAAA,a;AACAH,EAAAA,I;;AAsDF,eAAeC,eAAf","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentTextStyle} from '../styles';\r\nimport {ListRowDropdownOption} from '../types';\r\nimport {ComponentMStyling} from '../styles/typography';\r\n\r\nconst Wrapper = styled.div`\r\n  .isInside {\r\n    top: 42px;\r\n  }\r\n  .isOutside {\r\n    bottom: 42px;\r\n  }\r\n`;\r\n\r\nconst DropdownMenuContainer = styled.div`\r\n  position: absolute;\r\n  flex-direction: column;\r\n  background: ${COLORS.white};\r\n  font-size: 1em;\r\n  z-index: 1;\r\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);\r\n  border-radius: 4px;\r\n  right: 0;\r\n  width: max-content;\r\n  min-width: 260px;\r\n`;\r\n\r\nconst Content = styled.button`\r\n  min-width: 100%;\r\n  padding: 12px 16px;\r\n\r\n  text-align: left;\r\n  height: inherit;\r\n\r\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n\r\n  background-color: ${COLORS.white};\r\n  border-width: 0;\r\n\r\n  &:hover,\r\n  &:focus {\r\n    cursor: pointer;\r\n  }\r\n\r\n  &:hover {\r\n    background: ${COLORS.primary_20};\r\n    border-radius: 4px;\r\n  }\r\n  &:active {\r\n    background: ${COLORS.primary_100};\r\n    border-radius: 4px;\r\n  }\r\n`;\r\n\r\nconst DropdownValue = styled.div<{size:string}>`\r\n  height: ${props=> handleDropdownHeight(props.size)}\r\n`;\r\n\r\nconst handleDropdownHeight = (size:string) => {\r\n  switch(size)\r\n  {\r\n    case 'small' : return '48px;';\r\n    case 'medium' : return '56px;';\r\n    default : return '64px;';\r\n  }\r\n}\r\n\r\ntype DropdownMenuProps = {\r\n  options: ListRowDropdownOption[];\r\n  closeDropdown: any;\r\n  size: string;\r\n};\r\n\r\nconst ListRowDropdown: React.FunctionComponent<DropdownMenuProps> = ({ options, closeDropdown, size }: DropdownMenuProps) => {\r\n  const [classname, setClassname] = React.useState('isInside');\r\n  const reference = React.useRef<HTMLDivElement>(null);\r\n\r\n  const clickIsOutside = (e: any) => reference && reference?.current && !reference?.current.contains(e.target);\r\n\r\n  const handleClick = (e: any) => {\r\n    if (e.keyCode) {\r\n      if (e.keyCode === 27) {\r\n        closeDropdown();\r\n      }\r\n    } else if (clickIsOutside(e)) {\r\n      closeDropdown();\r\n    }\r\n  };\r\n\r\n  const isInViewport = (offset = 0) => {\r\n    if (!reference.current) return;\r\n    const top = reference.current.getBoundingClientRect().bottom;\r\n    const inside = top + offset >= 0 && top - offset <= window.innerHeight;\r\n    if (!inside) {\r\n      setClassname('isOutside');\r\n    }\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    document.addEventListener('mousedown', handleClick, false);\r\n    document.addEventListener('keydown', handleClick, false);\r\n    isInViewport();\r\n    return () => {\r\n      document.removeEventListener('mousedown', handleClick, false);\r\n      document.removeEventListener('keydown', handleClick, false);\r\n    };\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n  }, []);\r\n\r\n  return (\r\n    <Wrapper>\r\n      <DropdownMenuContainer ref={reference} className={classname}>\r\n        {options.map(option => (\r\n          <DropdownValue size={size}>\r\n            <Content key={option.key} onClick={option.action} >\r\n              {option.label}\r\n            </Content>\r\n          </DropdownValue>\r\n        ))}\r\n      </DropdownMenuContainer>\r\n    </Wrapper>\r\n  );\r\n};\r\n\r\nexport default ListRowDropdown;\r\n"],"file":"ListRowDropdown.js"}

package/dist/esm/List/__tests__/ListRow.tests.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ListRow } from '../index';
+import { Size } from '../../types';
+import { SystemIcons } from '../../icons';
+describe('<ListRow />', () => {
+  it('Renders', async () => {
+    const {
+      getByText
+    } = render( /*#__PURE__*/React.createElement(ListRow, {
+      icon: /*#__PURE__*/React.createElement(SystemIcons.Institute, null),
+      mainText: 'Laerdal Medical AS',
+      size: Size.Small,
+      disabled: false
+    }));
+    expect(getByText('Laerdal Medical AS')).toBeDefined();
+  });
+});
+//# sourceMappingURL=ListRow.tests.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/List/__tests__/ListRow.tests.tsx"],"names":["React","render","ListRow","Size","SystemIcons","describe","it","getByText","Small","expect","toBeDefined"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAQC,MAAR,QAAqB,wBAArB;AACA,SAAQC,OAAR,QAAsB,UAAtB;AACA,SAAQC,IAAR,QAAmB,aAAnB;AACA,SAAQC,WAAR,QAA0B,aAA1B;AAEAC,QAAQ,CAAC,aAAD,EAAgB,MAAM;AAC5BC,EAAAA,EAAE,CAAC,SAAD,EAAY,YAAY;AACxB,UAAM;AAACC,MAAAA;AAAD,QAAcN,MAAM,eACxB,oBAAC,OAAD;AACE,MAAA,IAAI,eAAE,oBAAC,WAAD,CAAa,SAAb,OADR;AAEE,MAAA,QAAQ,EAAE,oBAFZ;AAGE,MAAA,IAAI,EAAEE,IAAI,CAACK,KAHb;AAIE,MAAA,QAAQ,EAAE;AAJZ,MADwB,CAA1B;AAOAC,IAAAA,MAAM,CAACF,SAAS,CAAC,oBAAD,CAAV,CAAN,CAAwCG,WAAxC;AACD,GATC,CAAF;AAUD,CAXO,CAAR","sourcesContent":["import React from 'react';\r\nimport {render} from '@testing-library/react';\r\nimport {ListRow} from '../index';\r\nimport {Size} from '../../types';\r\nimport {SystemIcons} from '../../icons';\r\n\r\ndescribe('<ListRow />', () => {\r\n  it('Renders', async () => {\r\n    const {getByText} = render(\r\n      <ListRow\r\n        icon={<SystemIcons.Institute/>}\r\n        mainText={'Laerdal Medical AS'}\r\n        size={Size.Small}\r\n        disabled={false}/>,\r\n    );\r\n    expect(getByText('Laerdal Medical AS')).toBeDefined();\r\n  });\r\n});\r\n"],"file":"ListRow.tests.js"}

package/dist/esm/List/index.js

@@ -0,0 +1,3 @@
+import ListRow from './ListRow';
+export { ListRow };
+//# sourceMappingURL=index.js.map

package/dist/esm/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';\r\n\r\nexport {ListRow};\r\n"],"file":"index.js"}

package/dist/esm/LoadingIndicator/LoadingIndicator.js

@@ -0,0 +1,56 @@
+import _pt from "prop-types";
+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';
+const LoadingWrapper = styled.div`
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  svg {
+    animation-name: spin;
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+    transform-origin: 50% 50%;
+
+    @keyframes spin {
+      from {
+        transform: rotate(0deg);
+      }
+      to {
+        transform: rotate(360deg);
+      }
+    }
+  }
+`;
+
+const LoadingIndicator = ({
+  size = Size.Medium,
+  color = COLORS.primary
+}) => {
+  switch (size) {
+    case Size.Medium:
+      return /*#__PURE__*/React.createElement(LoadingWrapper, null, /*#__PURE__*/React.createElement(LoadingMedium, {
+        color: color
+      }));
+
+    case Size.Small:
+      return /*#__PURE__*/React.createElement(LoadingWrapper, null, /*#__PURE__*/React.createElement(LoadingSmall, {
+        color: color
+      }));
+
+    default:
+      return /*#__PURE__*/React.createElement(LoadingWrapper, null, /*#__PURE__*/React.createElement(LoadingMedium, {
+        color: color
+      }));
+  }
+};
+
+LoadingIndicator.propTypes = {
+  color: _pt.string
+};
+export default LoadingIndicator;
+//# sourceMappingURL=LoadingIndicator.js.map

package/dist/esm/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,MAAMC,cAAc,GAAGL,MAAM,CAACM,GAAI;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CArBA;;AA4BA,MAAMC,gBAAgB,GAAG,CAAC;AAAEC,EAAAA,IAAI,GAAGN,IAAI,CAACO,MAAd;AAAsBC,EAAAA,KAAK,GAAGT,MAAM,CAACU;AAArC,CAAD,KAA2E;AAClG,UAAQH,IAAR;AACE,SAAKN,IAAI,CAACO,MAAV;AACE,0BACE,oBAAC,cAAD,qBACE,oBAAC,aAAD;AAAe,QAAA,KAAK,EAAEC;AAAtB,QADF,CADF;;AAKF,SAAKR,IAAI,CAACU,KAAV;AACE,0BACE,oBAAC,cAAD,qBACE,oBAAC,YAAD;AAAc,QAAA,KAAK,EAAEF;AAArB,QADF,CADF;;AAKF;AACE,0BACE,oBAAC,cAAD,qBACE,oBAAC,aAAD;AAAe,QAAA,KAAK,EAAEA;AAAtB,QADF,CADF;AAdJ;AAoBD,CArBD;;;AAHEA,EAAAA,K;;AA0BF,eAAeH,gBAAf","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { COLORS } from '../styles';\r\nimport { Size } from '../types';\r\nimport { LoadingMedium, LoadingSmall } from '../icons/systemicons/SystemIcons';\r\n\r\nconst LoadingWrapper = styled.div`\r\n  height: 100%;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n\r\n  svg {\r\n    animation-name: spin;\r\n    animation-duration: 1s;\r\n    animation-iteration-count: infinite;\r\n    transform-origin: 50% 50%;\r\n\r\n    @keyframes spin {\r\n      from {\r\n        transform: rotate(0deg);\r\n      }\r\n      to {\r\n        transform: rotate(360deg);\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\ntype LoadingIndicatorProps = {\r\n  size?: Size.Small | Size.Medium;\r\n  color?: string;\r\n};\r\n\r\nconst LoadingIndicator = ({ size = Size.Medium, color = COLORS.primary }: LoadingIndicatorProps) => {\r\n  switch (size) {\r\n    case Size.Medium:\r\n      return (\r\n        <LoadingWrapper>\r\n          <LoadingMedium color={color} />\r\n        </LoadingWrapper>\r\n      );\r\n    case Size.Small:\r\n      return (\r\n        <LoadingWrapper>\r\n          <LoadingSmall color={color} />\r\n        </LoadingWrapper>\r\n      );\r\n    default:\r\n      return (\r\n        <LoadingWrapper>\r\n          <LoadingMedium color={color} />\r\n        </LoadingWrapper>\r\n      );\r\n  }\r\n};\r\n\r\nexport default LoadingIndicator;\r\n"],"file":"LoadingIndicator.js"}

package/dist/esm/LoadingIndicator/index.js

@@ -0,0 +1,2 @@
+export { default as LoadingIndicator } from './LoadingIndicator';
+//# sourceMappingURL=index.js.map

package/dist/esm/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';\r\n"],"file":"index.js"}