@laerdal/life-react-components 1.4.1-dev.2 → 1.4.1-dev.3

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';\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/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';\nimport {render} from '@testing-library/react';\nimport {ListRow} from '../index';\nimport {Size} from '../../types';\nimport {SystemIcons} from '../../icons';\n\ndescribe('<ListRow />', () => {\n  it('Renders', async () => {\n    const {getByText} = render(\n      <ListRow\n        icon={<SystemIcons.Institute/>}\n        mainText={'Laerdal Medical AS'}\n        size={Size.Small}\n        disabled={false}/>,\n    );\n    expect(getByText('Laerdal Medical AS')).toBeDefined();\n  });\n});\n"],"file":"ListRow.tests.js"}

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

package/dist/esm/LoadingPage/GlobalLoadingPage.js

@@ -0,0 +1,61 @@
+import _pt from "prop-types";
+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';
+const LoadingMain = styled.main`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  background-color: ${COLORS.primary_20};
+  height: 100%;
+`;
+const Header = styled.div`
+  height: 64px;
+  background-color: ${COLORS.white};
+  border-bottom: 1px solid ${COLORS.neutral_200};
+`;
+const LogoAndMessage = styled.div`
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  bottom: 36px;
+  left: 50%;
+  transform: translate(-50%);
+  align-items: center;
+
+  span {
+    margin-bottom: 40px;
+    font-weight: normal;
+    width: 320px;
+    text-align: center;
+    
+    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}
+  }
+`;
+const LoadingIndicatorContainer = styled.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+`;
+
+const LoadingPage = ({
+  optionalMessage,
+  includeHeader
+}) => {
+  return /*#__PURE__*/React.createElement(LoadingMain, {
+    "data-testid": "TestLoadingMain"
+  }, includeHeader && /*#__PURE__*/React.createElement(Header, null), /*#__PURE__*/React.createElement(LoadingIndicatorContainer, null, /*#__PURE__*/React.createElement(LoadingIndicator, null)), /*#__PURE__*/React.createElement(LogoAndMessage, {
+    "data-testid": "TestLoadingLogoAndMessage"
+  }, optionalMessage && /*#__PURE__*/React.createElement("span", null, optionalMessage), /*#__PURE__*/React.createElement(LaerdalLoadingLogo, null)));
+};
+
+LoadingPage.propTypes = {
+  optionalMessage: _pt.string,
+  includeHeader: _pt.bool
+};
+export default LoadingPage;
+//# sourceMappingURL=GlobalLoadingPage.js.map

package/dist/esm/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,MAAMC,WAAW,GAAGN,MAAM,CAACO,IAAK;AAChC;AACA;AACA;AACA,sBAAsBJ,MAAM,CAACK,UAAW;AACxC;AACA,CANA;AAQA,MAAMC,MAAM,GAAGT,MAAM,CAACU,GAAiB;AACvC;AACA,sBAAsBP,MAAM,CAACQ,KAAM;AACnC,6BAA6BR,MAAM,CAACS,WAAY;AAChD,CAJA;AAMA,MAAMC,cAAc,GAAGb,MAAM,CAACU,GAAI;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAML,iBAAiB,CAACD,kBAAkB,CAACU,OAApB,EAA6BX,MAAM,CAACY,WAApC,CAAiD;AACxE;AACA,CAjBA;AAmBA,MAAMC,yBAAyB,GAAGhB,MAAM,CAACU,GAAI;AAC7C;AACA;AACA;AACA;AACA,CALA;;AAYA,MAAMO,WAAiD,GAAG,CAAC;AAAEC,EAAAA,eAAF;AAAmBC,EAAAA;AAAnB,CAAD,KAAqD;AAC7G,sBACE,oBAAC,WAAD;AAAa,mBAAY;AAAzB,KACGA,aAAa,iBAAI,oBAAC,MAAD,OADpB,eAEE,oBAAC,yBAAD,qBACE,oBAAC,gBAAD,OADF,CAFF,eAKE,oBAAC,cAAD;AAAgB,mBAAY;AAA5B,KACGD,eAAe,iBAAI,kCAAOA,eAAP,CADtB,eAEE,oBAAC,kBAAD,OAFF,CALF,CADF;AAYD,CAbD;;;AAJEA,EAAAA,e;AACAC,EAAAA,a;;AAkBF,eAAeF,WAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {LaerdalLoadingLogo} from '../assets';\n\nimport LoadingIndicator from '../LoadingIndicator/LoadingIndicator';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport {ComponentMStyling} from '../styles/typography';\n\nconst LoadingMain = styled.main`\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  background-color: ${COLORS.primary_20};\n  height: 100%;\n`;\n\nconst Header = styled.div<LoaderProps>`\n  height: 64px;\n  background-color: ${COLORS.white};\n  border-bottom: 1px solid ${COLORS.neutral_200};\n`;\n\nconst LogoAndMessage = styled.div`\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  bottom: 36px;\n  left: 50%;\n  transform: translate(-50%);\n  align-items: center;\n\n  span {\n    margin-bottom: 40px;\n    font-weight: normal;\n    width: 320px;\n    text-align: center;\n    \n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n  }\n`;\n\nconst LoadingIndicatorContainer = styled.div`\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n`;\n\ninterface LoaderProps {\n  optionalMessage?: string;\n  includeHeader?: boolean;\n}\n\nconst LoadingPage: React.FunctionComponent<LoaderProps> = ({ optionalMessage, includeHeader }: LoaderProps) => {\n  return (\n    <LoadingMain data-testid=\"TestLoadingMain\">\n      {includeHeader && <Header />}\n      <LoadingIndicatorContainer>\n        <LoadingIndicator />\n      </LoadingIndicatorContainer>\n      <LogoAndMessage data-testid=\"TestLoadingLogoAndMessage\">\n        {optionalMessage && <span>{optionalMessage}</span>}\n        <LaerdalLoadingLogo />\n      </LogoAndMessage>\n    </LoadingMain>\n  );\n};\n\nexport default LoadingPage;\n"],"file":"GlobalLoadingPage.js"}

package/dist/esm/LoadingPage/__tests__/GlobalLoadingPage.test.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { GlobalLoadingPage } from '../index';
+import 'jest-styled-components';
+import { COLORS } from '../../styles';
+describe('<GlobalLoadingPage />', () => {
+  it('Renders GlobalLoadingPage', async () => {
+    const optionalMessage = 'This is the optional message';
+    const {
+      queryByText,
+      getByTestId
+    } = render( /*#__PURE__*/React.createElement(GlobalLoadingPage, {
+      optionalMessage: optionalMessage
+    }));
+    expect(queryByText(optionalMessage)).toBeDefined();
+    expect(getByTestId('TestLoadingMain')).toBeDefined();
+    expect(getByTestId('TestLoadingMain')).toHaveStyleRule('background-color', COLORS.primary_20);
+    expect(getByTestId('TestLoadingMain')).toHaveStyleRule('height', '100%');
+    expect(getByTestId('TestLoadingLogoAndMessage')).toBeDefined();
+    expect(getByTestId('TestLoadingLogoAndMessage')).toHaveStyleRule('position', 'absolute');
+    expect(getByTestId('TestLoadingLogoAndMessage')).toHaveStyleRule('align-items', 'center');
+    expect(getByTestId('TestLoadingLogoAndMessage')).toHaveStyleRule('bottom', '36px');
+  });
+});
+//# sourceMappingURL=GlobalLoadingPage.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/LoadingPage/__tests__/GlobalLoadingPage.test.tsx"],"names":["React","render","GlobalLoadingPage","COLORS","describe","it","optionalMessage","queryByText","getByTestId","expect","toBeDefined","toHaveStyleRule","primary_20"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,MAAT,QAAuB,wBAAvB;AACA,SAASC,iBAAT,QAAkC,UAAlC;AACA,OAAO,wBAAP;AACA,SAASC,MAAT,QAAuB,cAAvB;AAEAC,QAAQ,CAAC,uBAAD,EAA0B,MAAM;AACtCC,EAAAA,EAAE,CAAC,2BAAD,EAA8B,YAAY;AAC1C,UAAMC,eAAe,GAAG,8BAAxB;AACA,UAAM;AAAEC,MAAAA,WAAF;AAAeC,MAAAA;AAAf,QAA+BP,MAAM,eAAC,oBAAC,iBAAD;AAAmB,MAAA,eAAe,EAAEK;AAApC,MAAD,CAA3C;AACAG,IAAAA,MAAM,CAACF,WAAW,CAACD,eAAD,CAAZ,CAAN,CAAqCI,WAArC;AACAD,IAAAA,MAAM,CAACD,WAAW,CAAC,iBAAD,CAAZ,CAAN,CAAuCE,WAAvC;AACAD,IAAAA,MAAM,CAACD,WAAW,CAAC,iBAAD,CAAZ,CAAN,CAAuCG,eAAvC,CAAuD,kBAAvD,EAA2ER,MAAM,CAACS,UAAlF;AACAH,IAAAA,MAAM,CAACD,WAAW,CAAC,iBAAD,CAAZ,CAAN,CAAuCG,eAAvC,CAAuD,QAAvD,EAAiE,MAAjE;AACAF,IAAAA,MAAM,CAACD,WAAW,CAAC,2BAAD,CAAZ,CAAN,CAAiDE,WAAjD;AACAD,IAAAA,MAAM,CAACD,WAAW,CAAC,2BAAD,CAAZ,CAAN,CAAiDG,eAAjD,CAAiE,UAAjE,EAA6E,UAA7E;AACAF,IAAAA,MAAM,CAACD,WAAW,CAAC,2BAAD,CAAZ,CAAN,CAAiDG,eAAjD,CAAiE,aAAjE,EAAgF,QAAhF;AACAF,IAAAA,MAAM,CAACD,WAAW,CAAC,2BAAD,CAAZ,CAAN,CAAiDG,eAAjD,CAAiE,QAAjE,EAA2E,MAA3E;AACD,GAXC,CAAF;AAYD,CAbO,CAAR","sourcesContent":["import React from 'react';\nimport { render } from '@testing-library/react';\nimport { GlobalLoadingPage } from '../index';\nimport 'jest-styled-components';\nimport { COLORS } from '../../styles';\n\ndescribe('<GlobalLoadingPage />', () => {\n  it('Renders GlobalLoadingPage', async () => {\n    const optionalMessage = 'This is the optional message';\n    const { queryByText, getByTestId } = render(<GlobalLoadingPage optionalMessage={optionalMessage} />);\n    expect(queryByText(optionalMessage)).toBeDefined();\n    expect(getByTestId('TestLoadingMain')).toBeDefined();\n    expect(getByTestId('TestLoadingMain')).toHaveStyleRule('background-color', COLORS.primary_20);\n    expect(getByTestId('TestLoadingMain')).toHaveStyleRule('height', '100%');\n    expect(getByTestId('TestLoadingLogoAndMessage')).toBeDefined();\n    expect(getByTestId('TestLoadingLogoAndMessage')).toHaveStyleRule('position', 'absolute');\n    expect(getByTestId('TestLoadingLogoAndMessage')).toHaveStyleRule('align-items', 'center');\n    expect(getByTestId('TestLoadingLogoAndMessage')).toHaveStyleRule('bottom', '36px');\n  });\n});\n"],"file":"GlobalLoadingPage.test.js"}

package/dist/esm/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/esm/MiniProductCard/MiniProductCard.js

@@ -0,0 +1,88 @@
+import _pt from "prop-types";
+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';
+const ProductLink = styled(Link)`
+  display: flex;
+  flex: 1;
+  margin: 10px 8px;
+  color: ${COLORS.black};
+  text-decoration: none;
+
+  ${BREAKPOINTS.MEDIUM} {
+    width: 305px;
+  }
+`;
+const ProductThing = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  border-radius: 8px;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
+
+  &:hover {
+    background: ${COLORS.primary_20};
+
+    .product-chevron-right-path {
+      fill: ${COLORS.primary_600};
+    }
+  }
+  &:active {
+    background: ${COLORS.primary_100};
+
+    .product-chevron-right-path {
+      fill: ${COLORS.primary_600};
+    }
+  }
+`;
+const ProductImage = styled.img`
+  width: 95px;
+  height: 75px;
+  object-fit: fill;
+  border-radius: 8px;
+`;
+const ProductName = styled.h2`
+  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}
+  margin: 0;
+  margin-top: 3px;
+`;
+const ProductType = styled.span`
+  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}
+  margin: 0;
+`;
+const ProductInnerWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 12px 18px;
+  flex: 1;
+`;
+const RightIconWrapper = styled.div`
+  display: flex;
+  justify-self: flex-start;
+  align-items: center;
+  padding-right: 12px;
+`;
+
+const MiniProductCard = ({
+  url,
+  product
+}) => {
+  return /*#__PURE__*/React.createElement(ProductLink, {
+    to: url ?? ''
+  }, /*#__PURE__*/React.createElement(ProductThing, null, product.image && /*#__PURE__*/React.createElement(ProductImage, {
+    src: product.image
+  }), /*#__PURE__*/React.createElement(ProductInnerWrapper, null, /*#__PURE__*/React.createElement(ProductName, null, product.name), /*#__PURE__*/React.createElement(ProductType, null, product.type)), /*#__PURE__*/React.createElement(RightIconWrapper, null, /*#__PURE__*/React.createElement(ChevronRight, {
+    color: COLORS.primary,
+    className: 'product-chevron-right',
+    size: '24px'
+  }))));
+};
+
+MiniProductCard.propTypes = {
+  url: _pt.string
+};
+export default MiniProductCard;
+//# sourceMappingURL=MiniProductCard.js.map

package/dist/esm/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,MAAMC,WAAW,GAAGP,MAAM,CAACD,IAAD,CAAO;AACjC;AACA;AACA;AACA,WAAWG,MAAM,CAACM,KAAM;AACxB;AACA;AACA,IAAIP,WAAW,CAACQ,MAAO;AACvB;AACA;AACA,CAVA;AAYA,MAAMC,YAAY,GAAGV,MAAM,CAACW,GAAI;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBT,MAAM,CAACU,UAAW;AACpC;AACA;AACA,cAAcV,MAAM,CAACW,WAAY;AACjC;AACA;AACA;AACA,kBAAkBX,MAAM,CAACY,WAAY;AACrC;AACA;AACA,cAAcZ,MAAM,CAACW,WAAY;AACjC;AACA;AACA,CArBA;AAuBA,MAAME,YAAY,GAAGf,MAAM,CAACgB,GAAI;AAChC;AACA;AACA;AACA;AACA,CALA;AAOA,MAAMC,WAAW,GAAGjB,MAAM,CAACkB,EAAG;AAC9B,IAAIb,iBAAiB,CAACF,kBAAkB,CAACgB,OAApB,EAA6BjB,MAAM,CAACM,KAApC,CAA2C;AAChE;AACA;AACA,CAJA;AAMA,MAAMY,WAAW,GAAGpB,MAAM,CAACqB,IAAK;AAChC,IAAIf,iBAAiB,CAACH,kBAAkB,CAACgB,OAApB,EAA6BjB,MAAM,CAACM,KAApC,CAA2C;AAChE;AACA,CAHA;AAKA,MAAMc,mBAAmB,GAAGtB,MAAM,CAACW,GAAI;AACvC;AACA;AACA;AACA;AACA,CALA;AAOA,MAAMY,gBAAgB,GAAGvB,MAAM,CAACW,GAAI;AACpC;AACA;AACA;AACA;AACA,CALA;;AAOA,MAAMa,eAAe,GAAG,CAAC;AAAEC,EAAAA,GAAF;AAAOC,EAAAA;AAAP,CAAD,KAAiC;AACvD,sBACE,oBAAC,WAAD;AAAa,IAAA,EAAE,EAAED,GAAG,IAAI;AAAxB,kBACE,oBAAC,YAAD,QACGC,OAAO,CAACC,KAAR,iBAAiB,oBAAC,YAAD;AAAc,IAAA,GAAG,EAAED,OAAO,CAACC;AAA3B,IADpB,eAEE,oBAAC,mBAAD,qBACE,oBAAC,WAAD,QAAcD,OAAO,CAACE,IAAtB,CADF,eAEE,oBAAC,WAAD,QAAcF,OAAO,CAACG,IAAtB,CAFF,CAFF,eAME,oBAAC,gBAAD,qBACE,oBAAC,YAAD;AAAc,IAAA,KAAK,EAAE3B,MAAM,CAAC4B,OAA5B;AAAqC,IAAA,SAAS,EAAE,uBAAhD;AAAyE,IAAA,IAAI,EAAE;AAA/E,IADF,CANF,CADF,CADF;AAcD,CAfD;;;AArEEL,EAAAA,G;;AAsFF,eAAeD,eAAf","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ChevronRight} from '../icons/systemicons/SystemIcons';\nimport {Product} from '../types';\nimport {ComponentMStyling, ComponentSStyling} from '../styles/typography';\n\ntype CardProps = {\n  product: Product;\n  url?: string;\n};\nconst ProductLink = styled(Link)`\n  display: flex;\n  flex: 1;\n  margin: 10px 8px;\n  color: ${COLORS.black};\n  text-decoration: none;\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 305px;\n  }\n`;\n\nconst ProductThing = styled.div`\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  border-radius: 8px;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n\n  &:hover {\n    background: ${COLORS.primary_20};\n\n    .product-chevron-right-path {\n      fill: ${COLORS.primary_600};\n    }\n  }\n  &:active {\n    background: ${COLORS.primary_100};\n\n    .product-chevron-right-path {\n      fill: ${COLORS.primary_600};\n    }\n  }\n`;\n\nconst ProductImage = styled.img`\n  width: 95px;\n  height: 75px;\n  object-fit: fill;\n  border-radius: 8px;\n`;\n\nconst ProductName = styled.h2`\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  margin: 0;\n  margin-top: 3px;\n`;\n\nconst ProductType = styled.span`\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n  margin: 0;\n`;\n\nconst ProductInnerWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  padding: 12px 18px;\n  flex: 1;\n`;\n\nconst RightIconWrapper = styled.div`\n  display: flex;\n  justify-self: flex-start;\n  align-items: center;\n  padding-right: 12px;\n`;\n\nconst MiniProductCard = ({ url, product }: CardProps) => {\n  return (\n    <ProductLink to={url ?? ''}>\n      <ProductThing>\n        {product.image && <ProductImage src={product.image} />}\n        <ProductInnerWrapper>\n          <ProductName>{product.name}</ProductName>\n          <ProductType>{product.type}</ProductType>\n        </ProductInnerWrapper>\n        <RightIconWrapper>\n          <ChevronRight color={COLORS.primary} className={'product-chevron-right'} size={'24px'} />\n        </RightIconWrapper>\n      </ProductThing>\n    </ProductLink>\n  );\n};\n\nexport default MiniProductCard;\n"],"file":"MiniProductCard.js"}

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

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

package/dist/esm/Modals/Modal.js

@@ -0,0 +1,55 @@
+import _pt from "prop-types";
+import * as React from 'react';
+import styled from 'styled-components';
+import { IconButton } from '../Button';
+import { Close } from '../icons/systemicons/SystemIcons';
+import { COLORS } from '../styles';
+import { ModalHeader, ModalBody, ModalFooter } from './ModalStyles';
+/**
+ * Modal styles
+ */
+
+const Column = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: stretch;
+  height: 100%;
+`;
+const StyledButton = styled(IconButton)`
+  display: flex;
+`;
+export const ModalCloseButton = ({
+  onClick
+}) => {
+  return /*#__PURE__*/React.createElement(StyledButton, {
+    variant: "secondary",
+    shape: "square",
+    action: onClick
+  }, /*#__PURE__*/React.createElement(Close, {
+    size: "24px",
+    color: COLORS.black
+  }));
+};
+
+const Modal = ({
+  children
+}) => /*#__PURE__*/React.createElement(Column, null, children);
+
+Modal.propTypes = {
+  children: _pt.any.isRequired
+};
+
+Modal.Header = ({
+  children
+}) => /*#__PURE__*/React.createElement(ModalHeader, null, children);
+
+Modal.Body = ({
+  children
+}) => /*#__PURE__*/React.createElement(ModalBody, null, children);
+
+Modal.Footer = ({
+  children
+}) => /*#__PURE__*/React.createElement(ModalFooter, null, children);
+
+export default Modal;
+//# sourceMappingURL=Modal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Modals/Modal.tsx"],"names":["React","styled","IconButton","Close","COLORS","ModalHeader","ModalBody","ModalFooter","Column","div","StyledButton","ModalCloseButton","onClick","black","Modal","children","Header","Body","Footer"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,UAAT,QAA2B,WAA3B;AACA,SAASC,KAAT,QAAsB,kCAAtB;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,WAAT,EAAsBC,SAAtB,EAAiCC,WAAjC,QAAoD,eAApD;AAEA;AACA;AACA;;AACA,MAAMC,MAAM,GAAGP,MAAM,CAACQ,GAAI;AAC1B;AACA;AACA;AACA;AACA,CALA;AAOA,MAAMC,YAAY,GAAGT,MAAM,CAACC,UAAD,CAAa;AACxC;AACA,CAFA;AAIA,OAAO,MAAMS,gBAAkE,GAAG,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAiB;AACjG,sBACE,oBAAC,YAAD;AAAc,IAAA,OAAO,EAAC,WAAtB;AAAkC,IAAA,KAAK,EAAC,QAAxC;AAAiD,IAAA,MAAM,EAAEA;AAAzD,kBACE,oBAAC,KAAD;AAAO,IAAA,IAAI,EAAC,MAAZ;AAAmB,IAAA,KAAK,EAAER,MAAM,CAACS;AAAjC,IADF,CADF;AAKD,CANM;;AAYP,MAAMC,KAAK,GAAG,CAAC;AAAEC,EAAAA;AAAF,CAAD,kBAA8B,oBAAC,MAAD,QAASA,QAAT,CAA5C;;;AAHEA,EAAAA,Q;;;AAKFD,KAAK,CAACE,MAAN,GAAe,CAAC;AAAED,EAAAA;AAAF,CAAD,kBAA8B,oBAAC,WAAD,QAAcA,QAAd,CAA7C;;AAEAD,KAAK,CAACG,IAAN,GAAa,CAAC;AAAEF,EAAAA;AAAF,CAAD,kBAA8B,oBAAC,SAAD,QAAYA,QAAZ,CAA3C;;AAEAD,KAAK,CAACI,MAAN,GAAe,CAAC;AAAEH,EAAAA;AAAF,CAAD,kBAA8B,oBAAC,WAAD,QAAcA,QAAd,CAA7C;;AAEA,eAAeD,KAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { IconButton } from '../Button';\nimport { Close } from '../icons/systemicons/SystemIcons';\nimport { COLORS } from '../styles';\nimport { ModalHeader, ModalBody, ModalFooter } from './ModalStyles';\n\n/**\n * Modal styles\n */\nconst Column = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n`;\n\nconst StyledButton = styled(IconButton)`\n  display: flex;\n`;\n\nexport const ModalCloseButton: React.FunctionComponent<{ onClick: () => void }> = ({ onClick }) => {\n  return (\n    <StyledButton variant=\"secondary\" shape=\"square\" action={onClick}>\n      <Close size=\"24px\" color={COLORS.black} />\n    </StyledButton>\n  );\n};\n\ntype ModalProps = {\n  children: any;\n};\n\nconst Modal = ({ children }: ModalProps) => <Column>{children}</Column>;\n\nModal.Header = ({ children }: ModalProps) => <ModalHeader>{children}</ModalHeader>;\n\nModal.Body = ({ children }: ModalProps) => <ModalBody>{children}</ModalBody>;\n\nModal.Footer = ({ children }: ModalProps) => <ModalFooter>{children}</ModalFooter>;\n\nexport default Modal;\n"],"file":"Modal.js"}