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

package/dist/umd/List/ListRow.js

@@ -0,0 +1,327 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "prop-types", "react", "styled-components", "../styles", "../styles/typography", "../Tooltips", "../Dropdown", "../icons", "../types", "../styles/z-indexes"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../styles"), require("../styles/typography"), require("../Tooltips"), require("../Dropdown"), require("../icons"), require("../types"), require("../styles/z-indexes"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.typography, global.Tooltips, global.Dropdown, global.icons, global.types, global.zIndexes);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _typography, _Tooltips, _Dropdown, _icons, _types, _zIndexes) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+
+  var _propTypes2 = _interopRequireDefault(_propTypes);
+
+  var React = _interopRequireWildcard(_react);
+
+  var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+  function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function (nodeInterop) {
+      return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+  }
+
+  function _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+      return obj;
+    }
+
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+      return {
+        default: obj
+      };
+    }
+
+    var cache = _getRequireWildcardCache(nodeInterop);
+
+    if (cache && cache.has(obj)) {
+      return cache.get(obj);
+    }
+
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+
+    for (var key in obj) {
+      if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+        var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+
+        if (desc && (desc.get || desc.set)) {
+          Object.defineProperty(newObj, key, desc);
+        } else {
+          newObj[key] = obj[key];
+        }
+      }
+    }
+
+    newObj.default = obj;
+
+    if (cache) {
+      cache.set(obj, newObj);
+    }
+
+    return newObj;
+  }
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  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);
+  }
+
+  const Row = _styledComponents2.default.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  border-bottom: 1px solid ${_styles.COLORS.neutral_100};
+  box-sizing: border-box;
+  position: relative;
+
+  color: ${_styles.COLORS.neutral_600};
+  background-color: ${_styles.COLORS.white};
+
+
+  cursor: default;
+
+  &.interactive {
+    cursor: pointer;
+  }
+
+  &.interactive.disabled {
+    cursor: not-allowed;
+  }
+
+  &.interactive:hover:not(.in-action):not(.disabled) {
+    background-color: ${_styles.COLORS.primary_20};
+    color: ${_styles.COLORS.primary_700};
+    z-index: ${_zIndexes.Z_INDEXES.hover};
+  }
+
+  &.interactive:active:not(.in-action):not(.disabled) {
+    background-color: ${_styles.COLORS.primary_100};
+    color: ${_styles.COLORS.primary_800};
+    box-shadow: none;
+    z-index: ${_zIndexes.Z_INDEXES.active};
+  }
+
+  &.interactive:focus {
+    outline: none;
+    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;
+    z-index: ${_zIndexes.Z_INDEXES.focus};
+  }
+
+  &.disabled {
+    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {
+      color: ${_styles.COLORS.neutral_300};
+    }
+  }
+
+
+  &.small {
+    min-height: 48px;
+    padding: 0 8px;
+
+    .list-item-icon {
+      margin-right: 8px;
+    }
+
+    .list-item-main-text {
+      ${(0, _typography.ComponentSStyling)(_styles.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 {
+      ${(0, _typography.ComponentMStyling)(_styles.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 {
+      ${(0, _typography.ComponentLStyling)(_styles.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 {
+    ${(0, _typography.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, null)}
+  }
+
+  .list-item-note {
+    color: ${_styles.COLORS.neutral_600};
+    word-break: initial;
+    ${(0, _typography.ComponentXSStyling)(_styles.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: ${_styles.COLORS.neutral_600};
+    display: flex;
+    align-items: center;
+
+    button div {
+      background-color: transparent;
+    }
+  }
+`;
+
+  const ListRow = ({
+    size = _types.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(_Tooltips.TooltipWrapper, {
+      label: noteTooltip,
+      size: size === _types.Size.Large ? _types.Size.Medium : size === _types.Size.Small ? _types.Size.XSmall : _types.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(_Dropdown.DropdownButton, _extends({}, dropdown, {
+      disabled: disabled || dropdown.disabled,
+      icon: variant === 'overlay' ? /*#__PURE__*/React.createElement(_icons.SystemIcons.ArrowDropDown, null) : /*#__PURE__*/React.createElement(_icons.SystemIcons.MoreVertical, null)
+    }))));
+  };
+
+  ListRow.propTypes = {
+    variant: _propTypes2.default.oneOf(['normal', 'overlay']),
+    icon: _propTypes2.default.node,
+    mainText: _propTypes2.default.string.isRequired,
+    secondaryText: _propTypes2.default.string,
+    note: _propTypes2.default.string,
+    noteTooltip: _propTypes2.default.string,
+    disabled: _propTypes2.default.bool,
+    action: _propTypes2.default.func
+  };
+  exports.default = ListRow;
+});
+//# sourceMappingURL=ListRow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/List/ListRow.tsx"],"names":["Row","styled","div","COLORS","neutral_100","neutral_600","white","primary_20","primary_700","Z_INDEXES","hover","primary_100","primary_800","active","focus","neutral_300","ComponentSStyling","ComponentTextStyle","ComponentMStyling","ComponentLStyling","ComponentXXSStyling","ComponentXSStyling","variant","icon","mainText","secondaryText","note","noteTooltip","disabled","action","ListRow","size","Size","React","handleKeyPress","e","rowClassName","inAction","setInAction","dropdown"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,QAAMA,GAAG,GAAGC,2BAAOC,GAAI;AACvB;AACA;AACA;AACA;AACA,6BAA6BC,eAAOC,WAAY;AAChD;AACA;AACA;AACA,WAAWD,eAAOE,WAAY;AAC9B,sBAAsBF,eAAOG,KAAM;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBH,eAAOI,UAAW;AAC1C,aAAaJ,eAAOK,WAAY;AAChC,eAAeC,oBAAUC,KAAM;AAC/B;AACA;AACA;AACA,wBAAwBP,eAAOQ,WAAY;AAC3C,aAAaR,eAAOS,WAAY;AAChC;AACA,eAAeH,oBAAUI,MAAO;AAChC;AACA;AACA;AACA;AACA;AACA,eAAeJ,oBAAUK,KAAM;AAC/B;AACA;AACA;AACA;AACA,eAAeX,eAAOY,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQC,mCAAkBC,2BAAD,OAAjBD,EAAiB,IAAjBA,CAAoD;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQE,mCAAkBD,2BAAD,OAAjBC,EAAiB,IAAjBA,CAAoD;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQC,mCAAkBF,2BAAD,OAAjBE,EAAiB,IAAjBA,CAAoD;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,qCAAoBH,2BAAD,OAAnBG,EAAmB,IAAnBA,CAAsD;AAC5D;AACA;AACA;AACA,aA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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/umd/List/__tests__/ListRow.tests.js

@@ -0,0 +1,38 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["react", "@testing-library/react", "../index", "../../types", "../../icons"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(require("react"), require("@testing-library/react"), require("../index"), require("../../types"), require("../../icons"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(global.react, global.react, global.index, global.types, global.icons);
+    global.undefined = mod.exports;
+  }
+})(this, function (_react, _react3, _index, _types, _icons) {
+  "use strict";
+
+  var _react2 = _interopRequireDefault(_react);
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  describe('<ListRow />', () => {
+    it('Renders', async () => {
+      const {
+        getByText
+      } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_index.ListRow, {
+        icon: /*#__PURE__*/_react2.default.createElement(_icons.SystemIcons.Institute, null),
+        mainText: 'Laerdal Medical AS',
+        size: _types.Size.Small,
+        disabled: false
+      }));
+      expect(getByText('Laerdal Medical AS')).toBeDefined();
+    });
+  });
+});
+//# sourceMappingURL=ListRow.tests.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/List/__tests__/ListRow.tests.tsx"],"names":["describe","it","getByText","render","Size","expect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAMAA,EAAAA,QAAQ,CAAA,aAAA,EAAgB,MAAM;AAC5BC,IAAAA,EAAE,CAAA,SAAA,EAAY,YAAY;AACxB,YAAM;AAACC,QAAAA;AAAD,UAAcC,qBAAM,aACxB,gBAAA,aAAA,CAAA,cAAA,EAAA;AACE,QAAA,IAAI,EAAA,aAAE,gBAAA,aAAA,CAAA,mBAAA,SAAA,EADR,IACQ,CADR;AAEE,QAAA,QAAQ,EAFV,oBAAA;AAGE,QAAA,IAAI,EAAEC,YAHR,KAAA;AAIE,QAAA,QAAQ,EAAE;AAJZ,OAAA,CADkBD,CAApB;AAOAE,MAAAA,MAAM,CAACH,SAAS,CAAhBG,oBAAgB,CAAV,CAANA,CAAAA,WAAAA;AARFJ,KAAE,CAAFA;AADFD,GAAQ,CAARA","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/umd/List/index.js

@@ -0,0 +1,31 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "./ListRow"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("./ListRow"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.ListRow);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _ListRow) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.ListRow = undefined;
+
+  var _ListRow2 = _interopRequireDefault(_ListRow);
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  exports.ListRow = _ListRow2.default;
+});
+//# sourceMappingURL=index.js.map

package/dist/umd/List/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/List/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;UAEA,O,GAAA,iB","sourcesContent":["import ListRow from './ListRow';\n\nexport {ListRow};\n"],"file":"index.js"}

package/dist/umd/LoadingIndicator/LoadingIndicator.js

@@ -0,0 +1,132 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "prop-types", "react", "styled-components", "../styles", "../types", "../icons/systemicons/SystemIcons"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../styles"), require("../types"), require("../icons/systemicons/SystemIcons"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.types, global.SystemIcons);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _types, _SystemIcons) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+
+  var _propTypes2 = _interopRequireDefault(_propTypes);
+
+  var React = _interopRequireWildcard(_react);
+
+  var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+  function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function (nodeInterop) {
+      return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+  }
+
+  function _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+      return obj;
+    }
+
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+      return {
+        default: obj
+      };
+    }
+
+    var cache = _getRequireWildcardCache(nodeInterop);
+
+    if (cache && cache.has(obj)) {
+      return cache.get(obj);
+    }
+
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+
+    for (var key in obj) {
+      if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+        var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+
+        if (desc && (desc.get || desc.set)) {
+          Object.defineProperty(newObj, key, desc);
+        } else {
+          newObj[key] = obj[key];
+        }
+      }
+    }
+
+    newObj.default = obj;
+
+    if (cache) {
+      cache.set(obj, newObj);
+    }
+
+    return newObj;
+  }
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  const LoadingWrapper = _styledComponents2.default.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 = _types.Size.Medium,
+    color = _styles.COLORS.primary
+  }) => {
+    switch (size) {
+      case _types.Size.Medium:
+        return /*#__PURE__*/React.createElement(LoadingWrapper, null, /*#__PURE__*/React.createElement(_SystemIcons.LoadingMedium, {
+          color: color
+        }));
+
+      case _types.Size.Small:
+        return /*#__PURE__*/React.createElement(LoadingWrapper, null, /*#__PURE__*/React.createElement(_SystemIcons.LoadingSmall, {
+          color: color
+        }));
+
+      default:
+        return /*#__PURE__*/React.createElement(LoadingWrapper, null, /*#__PURE__*/React.createElement(_SystemIcons.LoadingMedium, {
+          color: color
+        }));
+    }
+  };
+
+  LoadingIndicator.propTypes = {
+    color: _propTypes2.default.string
+  };
+  exports.default = LoadingIndicator;
+});
+//# sourceMappingURL=LoadingIndicator.js.map

package/dist/umd/LoadingIndicator/LoadingIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/LoadingIndicator/LoadingIndicator.tsx"],"names":["LoadingWrapper","styled","div","color","LoadingIndicator","size","Size","COLORS","primary"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,QAAMA,cAAc,GAAGC,2BAAOC,GAAI;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AApBA,CAAA;;AA4BA,QAAME,gBAAgB,GAAG,CAAC;AAAEC,IAAAA,IAAI,GAAGC,YAAT,MAAA;AAAsBH,IAAAA,KAAK,GAAGI,eAAOC;AAArC,GAAD,KAA2E;AAClG,YAAA,IAAA;AACE,WAAKF,YAAL,MAAA;AACE,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,0BAAA,EAAA;AAAe,UAAA,KAAK,EAAEH;AAAtB,SAAA,CADF,CADF;;AAKF,WAAKG,YAAL,KAAA;AACE,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,yBAAA,EAAA;AAAc,UAAA,KAAK,EAAEH;AAArB,SAAA,CADF,CADF;;AAKF;AACE,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,0BAAA,EAAA;AAAe,UAAA,KAAK,EAAEA;AAAtB,SAAA,CADF,CADF;AAdJ;AADF,GAAA;;;AAHEA,IAAAA,K;;oBA0BF,gB","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/umd/LoadingIndicator/index.js

@@ -0,0 +1,32 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "./LoadingIndicator"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("./LoadingIndicator"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.LoadingIndicator);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _LoadingIndicator) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  Object.defineProperty(exports, "LoadingIndicator", {
+    enumerable: true,
+    get: function () {
+      return _interopRequireDefault(_LoadingIndicator).default;
+    }
+  });
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+});
+//# sourceMappingURL=index.js.map

package/dist/umd/LoadingIndicator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/LoadingIndicator/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;uDAAA,O","sourcesContent":["export { default as LoadingIndicator } from './LoadingIndicator';\n"],"file":"index.js"}