@laerdal/life-react-components 3.5.1-dev.11 → 3.5.1-dev.13

package/dist/src/List/ListRow.js

@@ -0,0 +1,83 @@
+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/src/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/src/List/index.js

@@ -0,0 +1,2 @@
+import ListRow from './ListRow';
+export { ListRow };

package/dist/src/LoadingIndicator/LoadingIndicator.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Size } from '../types';
-export type LoadingIndicatorProps = {
+export declare type LoadingIndicatorProps = {
     /** Optional. Id of the loading indicator. */
     id?: string;
     /** Optional. Size of the loading indicator. Defaults to 'Medium'. */

package/dist/src/LoadingIndicator/LoadingIndicator.js

@@ -0,0 +1,26 @@
+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/src/LoadingIndicator/index.js

@@ -0,0 +1 @@
+export { default as LoadingIndicator } from './LoadingIndicator';

package/dist/src/LoadingPage/GlobalLoadingPage.js

@@ -0,0 +1,26 @@
+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/src/LoadingPage/index.js

@@ -0,0 +1 @@
+export { default as GlobalLoadingPage } from './GlobalLoadingPage';

package/dist/src/MenuItem/MenuItem.d.ts

@@ -24,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;

package/dist/src/MenuItem/MenuItem.js

@@ -0,0 +1,60 @@
+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, { css } from 'styled-components';
+import { COLORS, ComponentTextStyle, focusStyles } from '../styles';
+import { SystemIcons } from '../icons';
+import { Size } from '../types';
+import { ComponentLStyling, ComponentMStyling, ComponentSStyling } from '../styles';
+import { defaultOnMouseDownHandler } from '../common';
+export var DropdownButton = styled.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) { return DropdownButtonCSS(props.size); });
+export var ItemLabel = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
+export var ItemIcon = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
+export var ItemIconRight = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n"], ["\n  align-items: center;\n  display: flex;\n"])));
+export var ItemContent = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    margin: ", ";\n    display: flex;\n    align-items: center;\n    flex-grow: 2;\n\n    ", " {\n      margin: ", ";\n      flex: 1 0 calc(100% - 40px);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n    }\n\n    ", " {\n      margin-right: 8px;\n      svg {\n        display: block;\n        margin: auto;\n        height:", ";\n        width:", ";\n      }\n    }\n\n    ", " {\n      flex-grow: 2;\n\n      .extraMargin {\n        position: absolute;\n        right: ", ";\n      }\n    }\n"], ["\n    margin: ", ";\n    display: flex;\n    align-items: center;\n    flex-grow: 2;\n\n    ", " {\n      margin: ", ";\n      flex: 1 0 calc(100% - 40px);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n    }\n\n    ", " {\n      margin-right: 8px;\n      svg {\n        display: block;\n        margin: auto;\n        height:", ";\n        width:", ";\n      }\n    }\n\n    ", " {\n      flex-grow: 2;\n\n      .extraMargin {\n        position: absolute;\n        right: ", ";\n      }\n    }\n"])), function (props) { return props.size === Size.Small ? 'auto 0 auto 10px' : (props.size === Size.Large ? 'auto 0 auto 26px' : 'auto 0 auto 18px'); }, ItemLabel, function (props) { return props.size === Size.Small || props.size === Size.Medium ? '14px 0' : '16px 0'; }, ItemIcon, function (props) { return props.size === Size.Small ? '20px' : ''; }, function (props) { return props.size === Size.Small ? '20px' : ''; }, ItemIconRight, function (props) { return props.size === Size.Small ? '16px' : '24px'; });
+export var DropdownButtonCSS = function (size) {
+    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    ", "\n    ", "\n    ", "\n\n    position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ", ";\n    background-color: ", ";\n    border: none;\n    cursor: pointer;\n    background: none;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ", ", ", " {\n      color: ", ";\n    }\n\n    &:hover:not(.active):not(:disabled):not(.disabled-state),\n    &.hover-state:not(.active):not(:disabled):not(.disabled-state) {\n      background: ", ";\n      ", ", ", " {\n        color: ", ";\n      }\n    }\n\n    &:focus, &.focus-state, &.focus-visible {\n      ", "\n    }\n\n    &:active:not(.active):not(:disabled):not(.disabled-state), &.active-state {\n      background: ", ";\n      ", ", ", " {\n        color: ", ";\n      }\n    }\n\n    &.active {\n      background: ", ";\n\n      ", ", ", " {\n        color: ", ";\n      }\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: ", ";\n        bottom: ", ";\n        left: 4px;\n        background-color: ", ";\n\n        border-radius: 4px;\n      }\n    }\n\n\n    &.locked {\n      background: none;\n      cursor: not-allowed;\n      \n      ", ", ", " {\n        color: ", ";\n      }\n    }\n\n    &.active:hover:not(:disabled):not(.locked), &.active-hover-state {\n      background-color: ", ";\n\n      ", ", ", " {\n        color: ", ";\n      }      \n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active:active:not(:disabled):not(.locked), &.active-active-state {\n      background-color: ", ";\n\n      ", ", ", " {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active.locked {\n      &::after {\n        background-color: ", ";\n      } \n    }\n\n    &.active:disabled:not(.locked) {\n      &::after {\n        background-color: ", ";\n      }     \n    }\n\n    &:disabled:not(.locked), &.disabled-state {\n      background: none;\n      cursor: not-allowed;\n      \n      ", ", ", " {\n        color: ", " !important;\n      }\n    }\n\n    &.dropdown-hover:not(:disabled) {\n      background-color: ", ";\n      color: ", ";\n    }\n  "], ["\n    ", "\n    ", "\n    ", "\n\n    position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ", ";\n    background-color: ", ";\n    border: none;\n    cursor: pointer;\n    background: none;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ", ", ", " {\n      color: ", ";\n    }\n\n    &:hover:not(.active):not(:disabled):not(.disabled-state),\n    &.hover-state:not(.active):not(:disabled):not(.disabled-state) {\n      background: ", ";\n      ", ", ", " {\n        color: ", ";\n      }\n    }\n\n    &:focus, &.focus-state, &.focus-visible {\n      ", "\n    }\n\n    &:active:not(.active):not(:disabled):not(.disabled-state), &.active-state {\n      background: ", ";\n      ", ", ", " {\n        color: ", ";\n      }\n    }\n\n    &.active {\n      background: ", ";\n\n      ", ", ", " {\n        color: ", ";\n      }\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: ", ";\n        bottom: ", ";\n        left: 4px;\n        background-color: ", ";\n\n        border-radius: 4px;\n      }\n    }\n\n\n    &.locked {\n      background: none;\n      cursor: not-allowed;\n      \n      ", ", ", " {\n        color: ", ";\n      }\n    }\n\n    &.active:hover:not(:disabled):not(.locked), &.active-hover-state {\n      background-color: ", ";\n\n      ", ", ", " {\n        color: ", ";\n      }      \n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active:active:not(:disabled):not(.locked), &.active-active-state {\n      background-color: ", ";\n\n      ", ", ", " {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active.locked {\n      &::after {\n        background-color: ", ";\n      } \n    }\n\n    &.active:disabled:not(.locked) {\n      &::after {\n        background-color: ", ";\n      }     \n    }\n\n    &:disabled:not(.locked), &.disabled-state {\n      background: none;\n      cursor: not-allowed;\n      \n      ", ", ", " {\n        color: ", " !important;\n      }\n    }\n\n    &.dropdown-hover:not(:disabled) {\n      background-color: ", ";\n      color: ", ";\n    }\n  "])), size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600), size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600), size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px', COLORS.white, ItemLabel, ItemIcon, COLORS.neutral_600, COLORS.primary_20, ItemLabel, ItemIcon, COLORS.primary_700, focusStyles, COLORS.primary_100, ItemLabel, ItemIcon, COLORS.primary_800, COLORS.neutral_20, ItemLabel, ItemIcon, COLORS.neutral_800, size == Size.Large ? '8px' : size == Size.Medium ? '6px' : '4px', size == Size.Large ? '8px' : size == Size.Medium ? '6px' : '4px', COLORS.primary_500, ItemIcon, ItemLabel, COLORS.neutral_500, COLORS.primary_20, ItemIcon, ItemLabel, COLORS.primary_700, COLORS.primary_700, COLORS.primary_100, ItemIcon, ItemLabel, COLORS.primary_800, COLORS.primary_800, COLORS.neutral_500, COLORS.neutral_300, ItemIcon, ItemLabel, COLORS.neutral_300, COLORS.primary_20, COLORS.primary_600);
+};
+var MenuItem = React.forwardRef(function (_a, ref) {
+    var _b;
+    var active = _a.active, item = _a.item, onClickHandler = _a.onClickHandler, _c = _a.size, size = _c === void 0 ? Size.Medium : _c, className = _a.className, tabIndex = _a.tabIndex, iconRight = _a.iconRight, id = _a.id, rest = __rest(_a, ["active", "item", "onClickHandler", "size", "className", "tabIndex", "iconRight", "id"]);
+    return (React.createElement(DropdownButton, __assign({ type: "button", size: size, disabled: item.disabled || item.locked, tabIndex: tabIndex, onMouseDown: defaultOnMouseDownHandler, ref: ref, onClick: onClickHandler, className: className + ' ' + (item.locked ? 'locked' : '') + ' ' + (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (active ? 'active' : ''), id: id }, rest),
+        item.showDividerAbove && React.createElement("div", { className: "divider" }),
+        React.createElement(ItemContent, { size: size },
+            item.icon && React.createElement(ItemIcon, null, item.icon),
+            React.createElement(ItemLabel, null,
+                React.createElement("div", null,
+                    React.createElement("div", null, (_b = item.displayLabel) !== null && _b !== void 0 ? _b : item.value),
+                    item.noteLabel && React.createElement("div", { style: { fontSize: '12px', lineHeight: '16px' } }, item.noteLabel)),
+                item.locked &&
+                    React.createElement(ItemIconRight, null,
+                        React.createElement(SystemIcons.LockedOn, { color: COLORS.neutral_400, className: "extraMargin", size: "24px" })),
+                !item.locked && !!iconRight &&
+                    React.createElement(ItemIconRight, null, React.cloneElement(iconRight, { className: 'extraMargin', size: '24px', }))))));
+});
+export default MenuItem;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/src/MenuItem/index.js

@@ -0,0 +1 @@
+export { default as MenuItem } from './MenuItem';

package/dist/src/MiniProductCard/MiniProductCard.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Product } from '../types';
-type CardProps = {
+declare type CardProps = {
     product: Product;
     url?: string;
 };

package/dist/src/MiniProductCard/MiniProductCard.js

@@ -0,0 +1,30 @@
+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 { Link } from 'react-router-dom';
+import styled from 'styled-components';
+import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';
+import { SystemIcons } from '../icons';
+import { ComponentMStyling, ComponentSStyling } from '../styles';
+var ProductLink = styled(Link)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  margin: 10px 8px;\n  color: ", ";\n  text-decoration: none;\n\n  ", " {\n    width: 305px;\n  }\n"], ["\n  display: flex;\n  flex: 1;\n  margin: 10px 8px;\n  color: ", ";\n  text-decoration: none;\n\n  ", " {\n    width: 305px;\n  }\n"])), COLORS.black, BREAKPOINTS.MEDIUM);
+var ProductThing = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  border-radius: 8px;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n\n  &:hover {\n    background: ", ";\n\n    .product-chevron-right-path {\n      fill: ", ";\n    }\n  }\n  &:active {\n    background: ", ";\n\n    .product-chevron-right-path {\n      fill: ", ";\n    }\n  }\n"], ["\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  border-radius: 8px;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n\n  &:hover {\n    background: ", ";\n\n    .product-chevron-right-path {\n      fill: ", ";\n    }\n  }\n  &:active {\n    background: ", ";\n\n    .product-chevron-right-path {\n      fill: ", ";\n    }\n  }\n"])), COLORS.primary_20, COLORS.primary_600, COLORS.primary_100, COLORS.primary_600);
+var ProductImage = styled.img(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 95px;\n  height: 75px;\n  object-fit: fill;\n  border-radius: 8px;\n"], ["\n  width: 95px;\n  height: 75px;\n  object-fit: fill;\n  border-radius: 8px;\n"])));
+var ProductName = styled.h2(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n  margin: 0;\n  margin-top: 3px;\n"], ["\n  ", "\n  margin: 0;\n  margin-top: 3px;\n"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black));
+var ProductType = styled.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n  margin: 0;\n"], ["\n  ", "\n  margin: 0;\n"])), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black));
+var ProductInnerWrapper = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  padding: 12px 18px;\n  flex: 1;\n"], ["\n  display: flex;\n  flex-direction: column;\n  padding: 12px 18px;\n  flex: 1;\n"])));
+var RightIconWrapper = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  justify-self: flex-start;\n  align-items: center;\n  padding-right: 12px;\n"], ["\n  display: flex;\n  justify-self: flex-start;\n  align-items: center;\n  padding-right: 12px;\n"])));
+var MiniProductCard = function (_a) {
+    var url = _a.url, product = _a.product;
+    return (React.createElement(ProductLink, { to: url !== null && url !== void 0 ? url : '' },
+        React.createElement(ProductThing, null,
+            product.image && React.createElement(ProductImage, { src: product.image }),
+            React.createElement(ProductInnerWrapper, null,
+                React.createElement(ProductName, null, product.name),
+                React.createElement(ProductType, null, product.type)),
+            React.createElement(RightIconWrapper, null,
+                React.createElement(SystemIcons.ChevronRight, { color: COLORS.primary, className: 'product-chevron-right', size: '24px' })))));
+};
+export default MiniProductCard;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/src/MiniProductCard/index.js

@@ -0,0 +1 @@
+export { default as MiniProductCard } from './MiniProductCard';

package/dist/src/Modals/Modal.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 export declare const ModalCloseButton: React.FunctionComponent<{
     onClick: () => void;
 }>;
-type ModalProps = {
+declare type ModalProps = {
     children: any;
 };
 declare const Modal: {

package/dist/src/Modals/Modal.js

@@ -0,0 +1,38 @@
+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 { IconButton } from '../Button';
+import { SystemIcons } from '../icons';
+import { COLORS } from '../styles';
+import { ModalHeader, ModalBody, ModalFooter } from './ModalStyles';
+/**
+ * Modal styles
+ */
+var Column = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n"])));
+var StyledButton = styled(IconButton)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+export var ModalCloseButton = function (_a) {
+    var onClick = _a.onClick;
+    return (React.createElement(StyledButton, { variant: "secondary", shape: "square", action: onClick },
+        React.createElement(SystemIcons.Close, { size: "24px", color: COLORS.black })));
+};
+var Modal = function (_a) {
+    var children = _a.children;
+    return React.createElement(Column, null, children);
+};
+Modal.Header = function (_a) {
+    var children = _a.children;
+    return React.createElement(ModalHeader, null, children);
+};
+Modal.Body = function (_a) {
+    var children = _a.children;
+    return React.createElement(ModalBody, null, children);
+};
+Modal.Footer = function (_a) {
+    var children = _a.children;
+    return React.createElement(ModalFooter, null, children);
+};
+export default Modal;
+var templateObject_1, templateObject_2;

package/dist/src/Modals/ModalContainer.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-type ModalContainerProps = {
+declare type ModalContainerProps = {
     id?: string;
     showModal: boolean;
     closeModal: () => void;
@@ -12,7 +12,7 @@ type ModalContainerProps = {
     maxWidth?: string;
     zIndex?: number;
 };
-type ModalContainerState = {
+declare type ModalContainerState = {
     scroll: number;
 };
 declare class ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {

package/dist/src/Modals/ModalContainer.js

@@ -0,0 +1,130 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+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);
+};
+import * as React from 'react';
+import ReactModal from 'react-modal';
+import { BOXSHADOWS } from '../styles';
+import { Z_INDEXES } from '../styles';
+var ModalContainerStyles = {
+    content: {
+        top: 'auto',
+        left: 'auto',
+        right: 'auto',
+        bottom: 'auto',
+        marginRight: '-50%',
+        width: '640px',
+        height: '320px',
+        borderRadius: '8px',
+        boxSizing: 'border-box',
+        margin: 0,
+        overflow: 'auto',
+        boxShadow: BOXSHADOWS.BOXSHADOW_L3,
+    },
+};
+//override modal classes to define the animations
+var modalTransitions = "\n\n@keyframes modalOpenAnimation {\n  from{\n    transform: scale(1.1, 1.1);\n  }\n  to {\n    transform: scale(1, 1);\n  }\n}\n\n.ReactModal__Overlay {\n  opacity: 0;\n  z-index: ".concat(Z_INDEXES.backdrop, ";\n  display:flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.ReactModal__Overlay--after-open {\n  opacity: 1;\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n  z-index: ").concat(Z_INDEXES.modal, ";\n  opacity:0;\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content--after-open{\n  opacity: 1;\n  animation: modalOpenAnimation 150ms ease-in-out;\n}\n\n.ReactModal__Overlay--before-close {\n  opacity: 0;\n  transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n  opacity: 0;\n  transform: scale(1.1, 1.1);\n  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n");
+var ModalContainer = /** @class */ (function (_super) {
+    __extends(ModalContainer, _super);
+    function ModalContainer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ModalContainer.prototype.componentDidMount = function () {
+        if (ReactModal.defaultStyles.overlay) {
+            ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';
+        }
+        //append style node to override modal transition classes
+        if (!document.querySelector('[modal-custom-styling="active"]')) {
+            var head = document.head || document.getElementsByTagName('head')[0];
+            var style = document.createElement('style');
+            style.setAttribute('modal-custom-styling', 'active');
+            head.appendChild(style);
+            style.appendChild(document.createTextNode(modalTransitions));
+        }
+        if (this.props.showModal) {
+            this.preventScroll(window.scrollY);
+        }
+    };
+    ModalContainer.prototype.getSnapshotBeforeUpdate = function (prevProps, prevState) {
+        return { scroll: window.scrollY };
+    };
+    ModalContainer.prototype.componentDidUpdate = function (prevProps, prevState, snapshot) {
+        if (this.props.showModal && !prevProps.showModal) {
+            this.preventScroll(snapshot.scroll);
+        }
+        if (!this.props.showModal && prevProps.showModal) {
+            this.resetScroll();
+        }
+    };
+    ModalContainer.prototype.componentWillUnmount = function () {
+        if (this.props.showModal) {
+            this.resetScroll();
+        }
+    };
+    ModalContainer.prototype.render = function () {
+        var _a = this.props, id = _a.id, showModal = _a.showModal, closeModal = _a.closeModal, children = _a.children, _b = _a.height, height = _b === void 0 ? 'auto' : _b, _c = _a.width, width = _c === void 0 ? 'auto' : _c, _d = _a.overflow, overflow = _d === void 0 ? 'visible' : _d, padding = _a.padding, _e = _a.minWidth, minWidth = _e === void 0 ? '' : _e, _f = _a.maxWidth, maxWidth = _f === void 0 ? '' : _f, _g = _a.zIndex, zIndex = _g === void 0 ? parseInt(Z_INDEXES.modal) : _g;
+        // should be at least z-index of modal and below z-index of toast
+        var zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);
+        var stylesConfiguration = Object.assign(__assign({}, ModalContainerStyles.content), {
+            height: height,
+            width: width,
+            padding: padding,
+            overflow: overflow,
+            minWidth: minWidth,
+            maxWidth: maxWidth,
+            zIndex: zIndexValue
+        });
+        var styles = { content: stylesConfiguration };
+        return (React.createElement(ReactModal, { id: id, isOpen: showModal, closeTimeoutMS: 120, onRequestClose: function () { return closeModal(); }, style: styles, appElement: document.getElementById('root') || undefined }, children));
+    };
+    ModalContainer.prototype.preventScroll = function (offset) {
+        if (!ModalContainer.openInstances) {
+            this.setState({ scroll: offset });
+            document.body.style.position = 'fixed';
+            document.body.style.left = "0px";
+            document.body.style.right = "0px";
+            document.body.style.top = "-".concat(offset, "px");
+        }
+        ModalContainer.openInstances++;
+    };
+    ModalContainer.prototype.resetScroll = function () {
+        ModalContainer.openInstances--;
+        if (!ModalContainer.openInstances) {
+            //@ts-ignore
+            document.body.style.position = null;
+            //@ts-ignore
+            document.body.style.left = null;
+            //@ts-ignore
+            document.body.style.top = null;
+            //@ts-ignore
+            document.body.style.right = null;
+            this.state.scroll && window.scrollTo(0, this.state.scroll);
+            this.setState({ scroll: 0 });
+        }
+    };
+    ModalContainer.openInstances = 0;
+    return ModalContainer;
+}(React.Component));
+export default ModalContainer;