@laerdal/life-react-components 3.5.1-dev.10 → 3.5.1-dev.12

package/dist/List/ListRow.js

@@ -1,140 +1,83 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-import _pt from "prop-types";
-var _excluded = ["size", "variant", "icon", "mainText", "secondaryText", "dropdown", "note", "noteTooltip", "disabled", "action", "rightSideIcon", "rightSideAction", "rightSideIconDisabled", "className"];
-var _templateObject, _templateObject2;
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import * as React from 'react';
-import styled from 'styled-components';
-import { COLORS, ComponentTextStyle, focusStyles } from '../styles';
-import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling } from '../styles';
-import { TooltipWrapper } from '../Tooltips';
-import { DropdownButton } from '../Dropdown';
-import { SystemIcons } from '../icons';
-import { Size } from '../types';
-import { Z_INDEXES } from '../styles';
-import { defaultOnMouseDownHandler } from '../common';
-import { IconButton } from '../Button';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-var Row = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n\n  color: ", ";\n  background-color: ", ";\n\n\n  cursor: default;\n\n  &.interactive {\n    cursor: pointer;\n  }\n\n  &.interactive.disabled {\n    cursor: not-allowed;\n  }\n\n  &.interactive:hover:not(.in-action):not(.disabled) {\n    background-color: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  &.interactive:active:not(.in-action):not(.disabled) {\n    background-color: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  &.interactive:focus {\n    ", "\n  }\n\n  &.disabled {\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n      color: ", ";\n    }\n  }\n\n\n  &.small {\n    min-height: 48px;\n    padding: 0 8px;\n\n    .list-item-icon {\n      margin-right: 8px;\n    }\n\n    .list-item-main-text {\n      ", "\n    }\n\n    .list-item-actions {\n      margin-right: -8px;\n    }\n  }\n\n  &.medium {\n    min-height: 56px;\n    padding: 0 12px;\n\n    .list-item-icon {\n      margin-right: 12px;\n    }\n\n    .list-item-main-text {\n      ", "\n    }\n\n    .list-item-actions {\n      margin-right: -12px;\n    }\n  }\n\n  &.large {\n    min-height: 64px;\n    padding: 0 16px;\n\n    .list-item-icon {\n      margin-right: 16px;\n    }\n\n    .list-item-main-text {\n      ", "\n    }\n\n    .list-item-actions {\n      margin-right: -16px;\n    }\n  }\n\n  &.overlay {\n    padding: 0 4px;\n\n    .list-item-actions {\n      margin-right: -4px;\n    }\n  }\n\n  .list-item-icon {\n    width: 24px;\n    height: 24px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .list-item-content {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .list-item-main-text {\n  }\n\n  .list-item-secondary-text {\n    ", "\n  }\n\n  .list-item-note {\n    color: ", ";\n    word-break: initial;\n    ", "\n  }\n\n  .list-item-note.with-tooltip {\n    cursor: pointer;\n\n    > div {\n      text-decoration-line: underline;\n      text-decoration-style: dashed;\n      text-underline-offset: 1px;\n      text-decoration-thickness: 1px;\n    }\n  }\n\n  .list-item-actions {\n    display: flex;\n    align-items: center;\n\n    button div {\n      background-color: transparent;\n    }\n  }\n"])), COLORS.neutral_100, COLORS.neutral_600, COLORS.white, COLORS.primary_20, COLORS.primary_700, Z_INDEXES.hover, COLORS.primary_100, COLORS.primary_800, Z_INDEXES.active, focusStyles, COLORS.neutral_300, ComponentSStyling(ComponentTextStyle.Regular, null), ComponentMStyling(ComponentTextStyle.Regular, null), ComponentLStyling(ComponentTextStyle.Regular, null), ComponentXXSStyling(ComponentTextStyle.Regular, null), COLORS.neutral_600, ComponentXSStyling(ComponentTextStyle.Regular, null));
-var RightIcon = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 48px;\n  min-width: 48px;\n"])));
-;
-var ListRow = function ListRow(_ref) {
-  var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? Size.Medium : _ref$size,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'normal' : _ref$variant,
-    icon = _ref.icon,
-    mainText = _ref.mainText,
-    secondaryText = _ref.secondaryText,
-    dropdown = _ref.dropdown,
-    note = _ref.note,
-    noteTooltip = _ref.noteTooltip,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    action = _ref.action,
-    rightSideIcon = _ref.rightSideIcon,
-    rightSideAction = _ref.rightSideAction,
-    rightSideIconDisabled = _ref.rightSideIconDisabled,
-    className = _ref.className,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    inAction = _React$useState2[0],
-    setInAction = _React$useState2[1];
-  var handleKeyDown = function handleKeyDown(e) {
-    if (e.key === 'Enter') {
-      action && action();
-    }
-  };
-  var rowClassName = (inAction ? 'in-action ' : '').concat(disabled ? 'disabled ' : '').concat(!!action ? 'interactive ' : '').concat('list-item-row ').concat("".concat(variant, " ")).concat("".concat(size)).concat(className ? " ".concat(className) : '');
-  return /*#__PURE__*/_jsxs(Row, _objectSpread(_objectSpread({
-    tabIndex: !action || disabled ? -1 : 0,
-    className: rowClassName,
-    onMouseDown: defaultOnMouseDownHandler,
-    onKeyDown: function onKeyDown(e) {
-      return !disabled && handleKeyDown(e);
-    },
-    onClick: function onClick(e) {
-      !disabled && action && action();
-    },
-    "data-hj-suppress": true
-  }, rest), {}, {
-    children: [!!icon && /*#__PURE__*/_jsx("div", {
-      className: 'list-item-icon',
-      children: icon
-    }), /*#__PURE__*/_jsxs("div", {
-      className: 'list-item-content',
-      children: [/*#__PURE__*/_jsx("div", {
-        className: 'list-item-main-text',
-        children: mainText
-      }), !!secondaryText && /*#__PURE__*/_jsx("div", {
-        className: 'list-item-secondary-text',
-        children: secondaryText
-      })]
-    }), !!note && /*#__PURE__*/_jsxs(_Fragment, {
-      children: [!!noteTooltip && /*#__PURE__*/_jsx("div", {
-        className: 'list-item-note with-tooltip',
-        children: /*#__PURE__*/_jsx(TooltipWrapper, {
-          label: noteTooltip,
-          size: size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small,
-          position: 'top',
-          tabIndex: disabled ? -1 : 0,
-          withArrow: true,
-          children: note
-        })
-      }), !noteTooltip && /*#__PURE__*/_jsx("div", {
-        className: 'list-item-note',
-        children: note
-      })]
-    }), !!dropdown && /*#__PURE__*/_jsx("div", {
-      className: 'list-item-actions',
-      onMouseEnter: function onMouseEnter() {
-        return setInAction(!(dropdown !== null && dropdown !== void 0 && dropdown.disabled));
-      },
-      onMouseLeave: function onMouseLeave() {
-        return setInAction(false);
-      },
-      children: /*#__PURE__*/_jsx(DropdownButton, _objectSpread(_objectSpread({}, dropdown), {}, {
-        type: 'icon',
-        disabled: disabled || dropdown.disabled,
-        icon: variant === 'overlay' ? /*#__PURE__*/_jsx(SystemIcons.ArrowDropDown, {}) : /*#__PURE__*/_jsx(SystemIcons.MoreVertical, {})
-      }))
-    }), !!rightSideIcon && /*#__PURE__*/_jsxs(RightIcon, {
-      className: 'list-item-actions',
-      onMouseEnter: function onMouseEnter() {
-        return rightSideAction && setInAction(!(dropdown !== null && dropdown !== void 0 && dropdown.disabled));
-      },
-      onMouseLeave: function onMouseLeave() {
-        return rightSideAction && setInAction(false);
-      },
-      children: [rightSideAction && /*#__PURE__*/_jsx(IconButton, {
-        action: rightSideAction,
-        variant: "secondary",
-        shape: "circular",
-        disabled: disabled || rightSideIconDisabled,
-        children: rightSideIcon
-      }), !rightSideAction && rightSideIcon]
-    })]
-  }));
-};
-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,
-  rightSideIcon: _pt.node,
-  rightSideAction: _pt.func,
-  rightSideIconDisabled: _pt.bool
-};
-export default ListRow;
-//# sourceMappingURL=ListRow.js.map
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import { COLORS, ComponentTextStyle, focusStyles } from '../styles';
+import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling } from '../styles';
+import { TooltipWrapper } from '../Tooltips';
+import { DropdownButton } from '../Dropdown';
+import { SystemIcons } from '../icons';
+import { Size } from '../types';
+import { Z_INDEXES } from '../styles';
+import { defaultOnMouseDownHandler } from '../common';
+import { IconButton } from '../Button';
+var Row = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n\n  color: ", ";\n  background-color: ", ";\n\n\n  cursor: default;\n\n  &.interactive {\n    cursor: pointer;\n  }\n\n  &.interactive.disabled {\n    cursor: not-allowed;\n  }\n\n  &.interactive:hover:not(.in-action):not(.disabled) {\n    background-color: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  &.interactive:active:not(.in-action):not(.disabled) {\n    background-color: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  &.interactive:focus {\n    ", "\n  }\n\n  &.disabled {\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n      color: ", ";\n    }\n  }\n\n\n  &.small {\n    min-height: 48px;\n    padding: 0 8px;\n\n    .list-item-icon {\n      margin-right: 8px;\n    }\n\n    .list-item-main-text {\n      ", "\n    }\n\n    .list-item-actions {\n      margin-right: -8px;\n    }\n  }\n\n  &.medium {\n    min-height: 56px;\n    padding: 0 12px;\n\n    .list-item-icon {\n      margin-right: 12px;\n    }\n\n    .list-item-main-text {\n      ", "\n    }\n\n    .list-item-actions {\n      margin-right: -12px;\n    }\n  }\n\n  &.large {\n    min-height: 64px;\n    padding: 0 16px;\n\n    .list-item-icon {\n      margin-right: 16px;\n    }\n\n    .list-item-main-text {\n      ", "\n    }\n\n    .list-item-actions {\n      margin-right: -16px;\n    }\n  }\n\n  &.overlay {\n    padding: 0 4px;\n\n    .list-item-actions {\n      margin-right: -4px;\n    }\n  }\n\n  .list-item-icon {\n    width: 24px;\n    height: 24px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .list-item-content {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .list-item-main-text {\n  }\n\n  .list-item-secondary-text {\n    ", "\n  }\n\n  .list-item-note {\n    color: ", ";\n    word-break: initial;\n    ", "\n  }\n\n  .list-item-note.with-tooltip {\n    cursor: pointer;\n\n    > div {\n      text-decoration-line: underline;\n      text-decoration-style: dashed;\n      text-underline-offset: 1px;\n      text-decoration-thickness: 1px;\n    }\n  }\n\n  .list-item-actions {\n    display: flex;\n    align-items: center;\n\n    button div {\n      background-color: transparent;\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n\n  color: ", ";\n  background-color: ", ";\n\n\n  cursor: default;\n\n  &.interactive {\n    cursor: pointer;\n  }\n\n  &.interactive.disabled {\n    cursor: not-allowed;\n  }\n\n  &.interactive:hover:not(.in-action):not(.disabled) {\n    background-color: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  &.interactive:active:not(.in-action):not(.disabled) {\n    background-color: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  &.interactive:focus {\n    ", "\n  }\n\n  &.disabled {\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n      color: ", ";\n    }\n  }\n\n\n  &.small {\n    min-height: 48px;\n    padding: 0 8px;\n\n    .list-item-icon {\n      margin-right: 8px;\n    }\n\n    .list-item-main-text {\n      ", "\n    }\n\n    .list-item-actions {\n      margin-right: -8px;\n    }\n  }\n\n  &.medium {\n    min-height: 56px;\n    padding: 0 12px;\n\n    .list-item-icon {\n      margin-right: 12px;\n    }\n\n    .list-item-main-text {\n      ", "\n    }\n\n    .list-item-actions {\n      margin-right: -12px;\n    }\n  }\n\n  &.large {\n    min-height: 64px;\n    padding: 0 16px;\n\n    .list-item-icon {\n      margin-right: 16px;\n    }\n\n    .list-item-main-text {\n      ", "\n    }\n\n    .list-item-actions {\n      margin-right: -16px;\n    }\n  }\n\n  &.overlay {\n    padding: 0 4px;\n\n    .list-item-actions {\n      margin-right: -4px;\n    }\n  }\n\n  .list-item-icon {\n    width: 24px;\n    height: 24px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .list-item-content {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .list-item-main-text {\n  }\n\n  .list-item-secondary-text {\n    ", "\n  }\n\n  .list-item-note {\n    color: ", ";\n    word-break: initial;\n    ", "\n  }\n\n  .list-item-note.with-tooltip {\n    cursor: pointer;\n\n    > div {\n      text-decoration-line: underline;\n      text-decoration-style: dashed;\n      text-underline-offset: 1px;\n      text-decoration-thickness: 1px;\n    }\n  }\n\n  .list-item-actions {\n    display: flex;\n    align-items: center;\n\n    button div {\n      background-color: transparent;\n    }\n  }\n"])), COLORS.neutral_100, COLORS.neutral_600, COLORS.white, COLORS.primary_20, COLORS.primary_700, Z_INDEXES.hover, COLORS.primary_100, COLORS.primary_800, Z_INDEXES.active, focusStyles, COLORS.neutral_300, ComponentSStyling(ComponentTextStyle.Regular, null), ComponentMStyling(ComponentTextStyle.Regular, null), ComponentLStyling(ComponentTextStyle.Regular, null), ComponentXXSStyling(ComponentTextStyle.Regular, null), COLORS.neutral_600, ComponentXSStyling(ComponentTextStyle.Regular, null));
+var RightIcon = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 48px;\n  min-width: 48px;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 48px;\n  min-width: 48px;\n"])));
+;
+var ListRow = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? Size.Medium : _b, _c = _a.variant, variant = _c === void 0 ? 'normal' : _c, icon = _a.icon, mainText = _a.mainText, secondaryText = _a.secondaryText, dropdown = _a.dropdown, note = _a.note, noteTooltip = _a.noteTooltip, _d = _a.disabled, disabled = _d === void 0 ? false : _d, action = _a.action, rightSideIcon = _a.rightSideIcon, rightSideAction = _a.rightSideAction, rightSideIconDisabled = _a.rightSideIconDisabled, className = _a.className, rest = __rest(_a, ["size", "variant", "icon", "mainText", "secondaryText", "dropdown", "note", "noteTooltip", "disabled", "action", "rightSideIcon", "rightSideAction", "rightSideIconDisabled", "className"]);
+    var _e = React.useState(false), inAction = _e[0], setInAction = _e[1];
+    var handleKeyDown = function (e) {
+        if (e.key === 'Enter') {
+            action && action();
+        }
+    };
+    var rowClassName = (inAction ? 'in-action ' : '')
+        .concat(disabled ? 'disabled ' : '')
+        .concat(!!action ? 'interactive ' : '')
+        .concat('list-item-row ')
+        .concat("".concat(variant, " "))
+        .concat("".concat(size))
+        .concat(className ? " ".concat(className) : '');
+    return (React.createElement(Row, __assign({ tabIndex: !action || disabled ? -1 : 0, className: rowClassName, onMouseDown: defaultOnMouseDownHandler, onKeyDown: function (e) { return !disabled && handleKeyDown(e); }, onClick: function (e) {
+            !disabled && action && action();
+        }, "data-hj-suppress": true }, rest),
+        !!icon &&
+            React.createElement("div", { className: 'list-item-icon' }, icon),
+        React.createElement("div", { className: 'list-item-content' },
+            React.createElement("div", { className: 'list-item-main-text' }, mainText),
+            !!secondaryText && React.createElement("div", { className: 'list-item-secondary-text' }, secondaryText)),
+        !!note &&
+            React.createElement(React.Fragment, null,
+                !!noteTooltip &&
+                    React.createElement("div", { className: 'list-item-note with-tooltip' },
+                        React.createElement(TooltipWrapper, { label: noteTooltip, size: size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small, position: 'top', tabIndex: disabled ? -1 : 0, withArrow: true }, note)),
+                !noteTooltip &&
+                    React.createElement("div", { className: 'list-item-note' }, note)),
+        !!dropdown &&
+            React.createElement("div", { className: 'list-item-actions', onMouseEnter: function () { return setInAction(!(dropdown === null || dropdown === void 0 ? void 0 : dropdown.disabled)); }, onMouseLeave: function () { return setInAction(false); } },
+                React.createElement(DropdownButton, __assign({}, dropdown, { type: 'icon', disabled: disabled || dropdown.disabled, icon: variant === 'overlay'
+                        ? React.createElement(SystemIcons.ArrowDropDown, null)
+                        : React.createElement(SystemIcons.MoreVertical, null) }))),
+        !!rightSideIcon &&
+            React.createElement(RightIcon, { className: 'list-item-actions', onMouseEnter: function () { return rightSideAction && setInAction(!(dropdown === null || dropdown === void 0 ? void 0 : dropdown.disabled)); }, onMouseLeave: function () { return rightSideAction && setInAction(false); } },
+                rightSideAction &&
+                    React.createElement(IconButton, { action: rightSideAction, variant: 'secondary', shape: 'circular', disabled: disabled || rightSideIconDisabled }, rightSideIcon),
+                !rightSideAction && rightSideIcon)));
+};
+export default ListRow;
+var templateObject_1, templateObject_2;

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

@@ -0,0 +1,51 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ListRow } from '../index';
+import { Size } from '../../types';
+import { SystemIcons } from '../../icons';
+describe('<ListRow />', function () {
+    it('Renders', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var getByText;
+        return __generator(this, function (_a) {
+            getByText = render(React.createElement(ListRow, { icon: React.createElement(SystemIcons.Institute, null), mainText: 'Laerdal Medical AS', size: Size.Small, disabled: false })).getByText;
+            expect(getByText('Laerdal Medical AS')).toBeDefined();
+            return [2 /*return*/];
+        });
+    }); });
+});

package/dist/List/index.js

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

package/dist/LoadingIndicator/LoadingIndicator.d.ts

@@ -1,9 +1,12 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { Size } from '../types';
-type LoadingIndicatorProps = {
+export declare type LoadingIndicatorProps = {
+    /** Optional. Id of the loading indicator. */
     id?: string;
+    /** Optional. Size of the loading indicator. Defaults to 'Medium'. */
     size?: Size.Small | Size.Medium;
+    /** Optional. Color of the loading indicator, defaults to 'COLORS.primary'. */
     color?: string;
 };
-declare const LoadingIndicator: ({ size, color, id }: LoadingIndicatorProps) => JSX.Element;
+declare const LoadingIndicator: ({ size, color, id }: LoadingIndicatorProps) => React.JSX.Element;
 export default LoadingIndicator;

package/dist/LoadingIndicator/LoadingIndicator.js

@@ -1,46 +1,26 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-import _pt from "prop-types";
-var _templateObject;
-import * as React from 'react';
-import styled from 'styled-components';
-import { COLORS } from '../styles';
-import { Size } from '../types';
-import { SystemIcons } from '../icons';
-import { jsx as _jsx } from "react/jsx-runtime";
-var LoadingWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  svg {\n    animation-name: spin;\n    animation-duration: 1s;\n    animation-iteration-count: infinite;\n    animation-timing-function: cubic-bezier(.43,.08,.57,.9);\n    transform-origin: 50% 50%;\n    \n    @keyframes spin {\n      from {\n        transform: rotate(45deg);\n      }\n      to {\n        transform: rotate(405deg);\n      }\n    }\n  }\n"])));
-var LoadingIndicator = function LoadingIndicator(_ref) {
-  var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? Size.Medium : _ref$size,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? COLORS.primary : _ref$color,
-    id = _ref.id;
-  switch (size) {
-    case Size.Medium:
-      return /*#__PURE__*/_jsx(LoadingWrapper, {
-        id: id,
-        children: /*#__PURE__*/_jsx(SystemIcons.LoadingMedium, {
-          color: color
-        })
-      });
-    case Size.Small:
-      return /*#__PURE__*/_jsx(LoadingWrapper, {
-        id: id,
-        children: /*#__PURE__*/_jsx(SystemIcons.LoadingSmall, {
-          color: color
-        })
-      });
-    default:
-      return /*#__PURE__*/_jsx(LoadingWrapper, {
-        id: id,
-        children: /*#__PURE__*/_jsx(SystemIcons.LoadingMedium, {
-          color: color
-        })
-      });
-  }
-};
-LoadingIndicator.propTypes = {
-  id: _pt.string,
-  color: _pt.string
-};
-export default LoadingIndicator;
-//# sourceMappingURL=LoadingIndicator.js.map
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import { COLORS } from '../styles';
+import { Size } from '../types';
+import { SystemIcons } from '../icons';
+var LoadingWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\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    animation-timing-function: cubic-bezier(.43,.08,.57,.9);\n    transform-origin: 50% 50%;\n    \n    @keyframes spin {\n      from {\n        transform: rotate(45deg);\n      }\n      to {\n        transform: rotate(405deg);\n      }\n    }\n  }\n"], ["\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    animation-timing-function: cubic-bezier(.43,.08,.57,.9);\n    transform-origin: 50% 50%;\n    \n    @keyframes spin {\n      from {\n        transform: rotate(45deg);\n      }\n      to {\n        transform: rotate(405deg);\n      }\n    }\n  }\n"])));
+var LoadingIndicator = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? Size.Medium : _b, _c = _a.color, color = _c === void 0 ? COLORS.primary : _c, id = _a.id;
+    switch (size) {
+        case Size.Medium:
+            return (React.createElement(LoadingWrapper, { id: id },
+                React.createElement(SystemIcons.LoadingMedium, { color: color })));
+        case Size.Small:
+            return (React.createElement(LoadingWrapper, { id: id },
+                React.createElement(SystemIcons.LoadingSmall, { color: color })));
+        default:
+            return (React.createElement(LoadingWrapper, { id: id },
+                React.createElement(SystemIcons.LoadingMedium, { color: color })));
+    }
+};
+export default LoadingIndicator;
+var templateObject_1;

package/dist/LoadingIndicator/index.js

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

package/dist/LoadingPage/GlobalLoadingPage.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-interface LoaderProps {
+export interface LoaderProps {
     optionalMessage?: string;
     includeHeader?: boolean;
 }

package/dist/LoadingPage/GlobalLoadingPage.js

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

package/dist/LoadingPage/index.js

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

package/dist/MenuItem/MenuItem.d.ts

@@ -2,11 +2,17 @@ import * as React from 'react';
 import { Size } from '../types';
 import { DropdownItem } from '../Dropdown';
 export interface MenuItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'disabled' | 'onMouseDown' | 'onClick'> {
+    /** Required. Details of the item. */
     item: DropdownItem;
+    /** Required. Handler to be called when user clicks on the menu item */
     onClickHandler: (e: React.MouseEvent) => void;
+    /** Required. Styles are different for MenuItems in 'active' state.  */
     active: boolean;
+    /** Required. Id of the MenuItem.  */
     id: string;
-    size?: Size;
+    /** Optional. Size of the component. Defaults to 'medium'.  */
+    size?: Size.Small | Size.Medium | Size.Large;
+    /** Optional. Icon to be shown on the right side of the menu item. Icon will be shown only if 'locked' flag of 'item' is not set. */
     iconRight?: React.ReactElement;
 }
 export declare const DropdownButton: import("styled-components").StyledComponent<"button", any, {
@@ -18,6 +24,6 @@ export declare const ItemIconRight: import("styled-components").StyledComponent<
 export declare const ItemContent: import("styled-components").StyledComponent<"div", any, {
     size: Size;
 }, never>;
-export declare const DropdownButtonCSS: (size?: Size) => import("styled-components").FlattenSimpleInterpolation;
+export declare const DropdownButtonCSS: (size?: Size | undefined) => import("styled-components").FlattenSimpleInterpolation;
 declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLButtonElement>>;
 export default MenuItem;