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

package/dist/LoadingPage/GlobalLoadingPage.js

@@ -1,26 +1,36 @@
-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;
+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

package/dist/LoadingPage/index.js

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

package/dist/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 | undefined) => import("styled-components").FlattenSimpleInterpolation;
+export declare const DropdownButtonCSS: (size?: Size) => import("styled-components").FlattenSimpleInterpolation;
 declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLButtonElement>>;
 export default MenuItem;

package/dist/MenuItem/MenuItem.js

@@ -1,60 +1,101 @@
-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;
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _excluded = ["active", "item", "onClickHandler", "size", "className", "tabIndex", "iconRight", "id"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+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, { 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';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var DropdownButton = styled.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), function (props) {
+  return DropdownButtonCSS(props.size);
+});
+export var ItemLabel = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
+export var ItemIcon = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([""])));
+export var ItemIconRight = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n"])));
+export var ItemContent = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\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 DropdownButtonCSS(size) {
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\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 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _item$displayLabel;
+  var active = _ref.active,
+    item = _ref.item,
+    onClickHandler = _ref.onClickHandler,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? Size.Medium : _ref$size,
+    className = _ref.className,
+    tabIndex = _ref.tabIndex,
+    iconRight = _ref.iconRight,
+    id = _ref.id,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsxs(DropdownButton, _objectSpread(_objectSpread({
+    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), {}, {
+    children: [item.showDividerAbove && /*#__PURE__*/_jsx("div", {
+      className: "divider"
+    }), /*#__PURE__*/_jsxs(ItemContent, {
+      size: size,
+      children: [item.icon && /*#__PURE__*/_jsx(ItemIcon, {
+        children: item.icon
+      }), /*#__PURE__*/_jsxs(ItemLabel, {
+        children: [/*#__PURE__*/_jsxs("div", {
+          children: [/*#__PURE__*/_jsx("div", {
+            children: (_item$displayLabel = item.displayLabel) !== null && _item$displayLabel !== void 0 ? _item$displayLabel : item.value
+          }), item.noteLabel && /*#__PURE__*/_jsx("div", {
+            style: {
+              fontSize: '12px',
+              lineHeight: '16px'
+            },
+            children: item.noteLabel
+          })]
+        }), item.locked && /*#__PURE__*/_jsx(ItemIconRight, {
+          children: /*#__PURE__*/_jsx(SystemIcons.LockedOn, {
+            color: COLORS.neutral_400,
+            className: "extraMargin",
+            size: "24px"
+          })
+        }), !item.locked && !!iconRight && /*#__PURE__*/_jsx(ItemIconRight, {
+          children: /*#__PURE__*/React.cloneElement(iconRight, {
+            className: 'extraMargin',
+            size: '24px'
+          })
+        })]
+      })]
+    })]
+  }));
+});
+MenuItem.propTypes = {
+  onClickHandler: _pt.func.isRequired,
+  active: _pt.bool.isRequired,
+  id: _pt.string.isRequired,
+  iconRight: _pt.element
+};
+export default MenuItem;
+//# sourceMappingURL=MenuItem.js.map

package/dist/MenuItem/index.js

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

package/dist/MiniProductCard/MiniProductCard.d.ts

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

package/dist/MiniProductCard/MiniProductCard.js

@@ -1,30 +1,47 @@
-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;
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+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';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var ProductLink = styled(Link)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 95px;\n  height: 75px;\n  object-fit: fill;\n  border-radius: 8px;\n"])));
+var ProductName = styled.h2(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n  margin: 0;\n  margin-top: 3px;\n"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black));
+var ProductType = styled.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", "\n  margin: 0;\n"])), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black));
+var ProductInnerWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: 12px 18px;\n  flex: 1;\n"])));
+var RightIconWrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-self: flex-start;\n  align-items: center;\n  padding-right: 12px;\n"])));
+var MiniProductCard = function MiniProductCard(_ref) {
+  var url = _ref.url,
+    product = _ref.product;
+  return /*#__PURE__*/_jsx(ProductLink, {
+    to: url !== null && url !== void 0 ? url : '',
+    children: /*#__PURE__*/_jsxs(ProductThing, {
+      children: [product.image && /*#__PURE__*/_jsx(ProductImage, {
+        src: product.image
+      }), /*#__PURE__*/_jsxs(ProductInnerWrapper, {
+        children: [/*#__PURE__*/_jsx(ProductName, {
+          children: product.name
+        }), /*#__PURE__*/_jsx(ProductType, {
+          children: product.type
+        })]
+      }), /*#__PURE__*/_jsx(RightIconWrapper, {
+        children: /*#__PURE__*/_jsx(SystemIcons.ChevronRight, {
+          color: COLORS.primary,
+          className: 'product-chevron-right',
+          size: '24px'
+        })
+      })]
+    })
+  });
+};
+MiniProductCard.propTypes = {
+  url: _pt.string
+};
+export default MiniProductCard;
+//# sourceMappingURL=MiniProductCard.js.map

package/dist/MiniProductCard/index.js

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

package/dist/Modals/Modal.d.ts

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

package/dist/Modals/Modal.js

@@ -1,38 +1,57 @@
-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';
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _templateObject, _templateObject2;
+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;
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+var Column = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n"])));
+var StyledButton = styled(IconButton)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n"])));
+export var ModalCloseButton = function ModalCloseButton(_ref) {
+  var onClick = _ref.onClick;
+  return /*#__PURE__*/_jsx(StyledButton, {
+    variant: "secondary",
+    shape: "square",
+    action: onClick,
+    children: /*#__PURE__*/_jsx(SystemIcons.Close, {
+      size: "24px",
+      color: COLORS.black
+    })
+  });
+};
+var Modal = function Modal(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/_jsx(Column, {
+    children: children
+  });
+};
+Modal.propTypes = {
+  children: _pt.any.isRequired
+};
+Modal.Header = function (_ref3) {
+  var children = _ref3.children;
+  return /*#__PURE__*/_jsx(ModalHeader, {
+    children: children
+  });
+};
+Modal.Body = function (_ref4) {
+  var children = _ref4.children;
+  return /*#__PURE__*/_jsx(ModalBody, {
+    children: children
+  });
+};
+Modal.Footer = function (_ref5) {
+  var children = _ref5.children;
+  return /*#__PURE__*/_jsx(ModalFooter, {
+    children: children
+  });
+};
+export default Modal;
+//# sourceMappingURL=Modal.js.map

package/dist/Modals/ModalContainer.d.ts

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