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

package/dist/src/SideMenu/SideMenuBody.js

@@ -0,0 +1,24 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import styled from 'styled-components';
+import { scrollBarStyling } from '../styles';
+import { Size } from '../types';
+import { useDimensionsRef } from 'rooks';
+var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 8px 0;\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n"], ["\n  padding: 8px 0;\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n"])));
+var ScrollableContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  overflow-y: auto;\n  max-height: 100%;\n\n  &.scrollable {\n    margin-right: 6px;\n    padding-right: 6px;\n  }\n\n  ", "\n"], ["\n  flex: 1;\n  display: flex;\n  overflow-y: auto;\n  max-height: 100%;\n\n  &.scrollable {\n    margin-right: 6px;\n    padding-right: 6px;\n  }\n\n  ", "\n"])), scrollBarStyling(Size.Small));
+export var SideMenuBody = function (props) {
+    var _a = React.useState(false), scrollable = _a[0], setScrollable = _a[1];
+    var _b = useDimensionsRef({ updateOnResize: true }), ref = _b[0], dimensions = _b[1], node = _b[2];
+    React.useEffect(function () {
+        var _a, _b;
+        var clientHeight = (_a = node === null || node === void 0 ? void 0 : node.clientHeight) !== null && _a !== void 0 ? _a : 0;
+        var scrollHeight = (_b = node === null || node === void 0 ? void 0 : node.scrollHeight) !== null && _b !== void 0 ? _b : 0;
+        setScrollable(scrollHeight > clientHeight);
+    }, [dimensions, node, props.children]);
+    return (React.createElement(Wrapper, null,
+        React.createElement(ScrollableContainer, { ref: ref, className: scrollable ? 'scrollable' : '' }, props.children)));
+};
+var templateObject_1, templateObject_2;

package/dist/src/SideMenu/SideMenuFooter.js

@@ -0,0 +1,43 @@
+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);
+};
+import React from 'react';
+import styled from 'styled-components';
+import { COLORS, ComponentTextStyle, ComponentXXSStyling } from '../styles';
+import { LaerdalLogo } from '../assets';
+import { Button } from '../Button';
+import { MenuItem } from '../MenuItem';
+var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  box-sizing: border-box;\n  width: 100%;\n\n  border-top: 1px solid ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  box-sizing: border-box;\n  width: 100%;\n\n  border-top: 1px solid ", ";\n"])), COLORS.neutral_200);
+var ItemsContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 8px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: 100%;\n"], ["\n  padding: 8px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: 100%;\n"])));
+var ButtonsContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  padding: 8px 16px;\n  gap: 10px;\n  width: 100%;\n\n  button {\n    flex: 1;\n  }\n\n  .small & {\n    gap: 0;\n    flex-direction: column-reverse;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  padding: 8px 16px;\n  gap: 10px;\n  width: 100%;\n\n  button {\n    flex: 1;\n  }\n\n  .small & {\n    gap: 0;\n    flex-direction: column-reverse;\n  }\n"])));
+var LogoContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  min-height: 80px;\n  padding: 8px 16px;\n  background-color: ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  min-height: 80px;\n  padding: 8px 16px;\n  background-color: ", ";\n  width: 100%;\n"])), COLORS.neutral_20);
+var NoteContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_500));
+export var SideMenuFooter = function (props) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    return (React.createElement(Wrapper, null,
+        !!((_b = (_a = props.footer) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.length) &&
+            React.createElement(ItemsContainer, null, props.footer.items.map(function (item, index) {
+                return React.createElement(MenuItem, __assign({ key: index, size: props.size }, item));
+            })),
+        !!((_d = (_c = props.footer) === null || _c === void 0 ? void 0 : _c.buttons) === null || _d === void 0 ? void 0 : _d.length) &&
+            React.createElement(ButtonsContainer, null, props.footer.buttons.map(function (button, index) {
+                return React.createElement(Button, __assign({ key: index, size: props.size }, button), button.label);
+            })),
+        !((_f = (_e = props.footer) === null || _e === void 0 ? void 0 : _e.buttons) === null || _f === void 0 ? void 0 : _f.length) &&
+            React.createElement(LogoContainer, null,
+                React.createElement(LaerdalLogo, { height: '36px', width: '66px' }),
+                React.createElement(NoteContainer, null, (_g = props.footer) === null || _g === void 0 ? void 0 : _g.note))));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/src/SideMenu/SideMenuHeader.js

@@ -0,0 +1,46 @@
+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 React from 'react';
+import styled from 'styled-components';
+import { COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles';
+import { IconButton } from '../Button';
+import { SystemIcons } from '../icons';
+var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 0 8px;\n\n  .small & {\n    min-height: 48px;\n  }\n\n  .medium & {\n    min-height: 56px;\n  }\n\n  .large & {\n    min-height: 64px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 0 8px;\n\n  .small & {\n    min-height: 48px;\n  }\n\n  .medium & {\n    min-height: 56px;\n  }\n\n  .large & {\n    min-height: 64px;\n  }\n"])));
+var LabelContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-left: 8px;\n\n  .small & {\n    ", "\n  }\n\n  .medium & {\n    ", "\n  }\n\n  .large & {\n    ", "\n  }\n"], ["\n  margin-left: 8px;\n\n  .small & {\n    ", "\n  }\n\n  .medium & {\n    ", "\n  }\n\n  .large & {\n    ", "\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600), ComponentLStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
+export var SideMenuHeader = function (props) {
+    var _a, _b, _c;
+    return (React.createElement(Wrapper, null, (_b = (_a = props.header) === null || _a === void 0 ? void 0 : _a.actions) === null || _b === void 0 ? void 0 :
+        _b.map(function (_a, index) {
+            var icon = _a.icon, rest = __rest(_a, ["icon"]);
+            return React.createElement(IconButton, __assign({ key: index, variant: 'secondary', shape: 'circular' }, rest), icon);
+        }),
+        ((_c = props.header) === null || _c === void 0 ? void 0 : _c.label) &&
+            React.createElement(LabelContainer, null, props.header.label),
+        React.createElement(IconButton, { action: props.onClose, variant: 'secondary', shape: 'circular', style: { marginLeft: 'auto' } },
+            React.createElement(SystemIcons.Close, null))));
+};
+var templateObject_1, templateObject_2;

package/dist/src/SideMenu/index.js

@@ -0,0 +1,2 @@
+export { default as SideMenu } from './SideMenu';
+export * from './types';

package/dist/src/SideMenu/types.d.ts

@@ -3,13 +3,13 @@ import { ButtonProps } from '../Button/Button';
 import { IconButtonProps } from '../Button/Iconbutton';
 import { MenuItemProps } from '../MenuItem/MenuItem';
 import { Size } from '../types';
-export type SideMenuAction = Omit<IconButtonProps, 'variant' | 'shape' | 'isInMobileMenu' | 'borderRadius' | 'flatEdge' | 'focusBackgroundColor' | 'useTransparentBackground' | 'unsetIconSize' | 'shouldNotInteract' | 'invertFocus' | 'hideOnLowWidth' | 'children'> & {
+export declare type SideMenuAction = Omit<IconButtonProps, 'variant' | 'shape' | 'isInMobileMenu' | 'borderRadius' | 'flatEdge' | 'focusBackgroundColor' | 'useTransparentBackground' | 'unsetIconSize' | 'shouldNotInteract' | 'invertFocus' | 'hideOnLowWidth' | 'children'> & {
     icon: React.ReactNode;
 };
-export type SideMenuButton = Omit<ButtonProps, 'size' | 'iconOnly' | 'minWidth' | 'testId' | 'width' | 'invertFocus' | 'colorTheme' | 'flatEdge' | 'children'> & {
+export declare type SideMenuButton = Omit<ButtonProps, 'size' | 'iconOnly' | 'minWidth' | 'testId' | 'width' | 'invertFocus' | 'colorTheme' | 'flatEdge' | 'children'> & {
     label: string;
 };
-export type SideMenuItem = Omit<MenuItemProps, 'size'>;
+export declare type SideMenuItem = Omit<MenuItemProps, 'size'>;
 export interface SideMenuHeader {
     actions?: SideMenuAction[];
     label?: string;

package/dist/src/SideMenu/types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/SkipToContent/SkipToContent.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export type SkipToContentProps = {
+export declare type SkipToContentProps = {
     children: React.ReactNode;
 };
 declare const SkipToContent: React.FunctionComponent<SkipToContentProps>;

package/dist/src/SkipToContent/SkipToContent.js

@@ -0,0 +1,17 @@
+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, ComponentTextStyle } from '../styles';
+import { ComponentSStyling } from '../styles';
+var SkipToContentLink = styled.a(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n\n  text-decoration: underline;\n"], ["\n  ", "\n\n  text-decoration: underline;\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.black));
+var SkipToContentWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  text-decoration: none;\n  z-index: -1000;\n  height: 0px;\n  overflow-x: hidden;\n\n  &:focus-within {\n    height: auto;\n    padding: 16px;\n    z-index: 100000;\n    flex: 1 0 auto;\n    background: ", ";\n  }\n\n  @media print {\n    display: none;\n  }\n"], ["\n  text-decoration: none;\n  z-index: -1000;\n  height: 0px;\n  overflow-x: hidden;\n\n  &:focus-within {\n    height: auto;\n    padding: 16px;\n    z-index: 100000;\n    flex: 1 0 auto;\n    background: ", ";\n  }\n\n  @media print {\n    display: none;\n  }\n"])), COLORS.accent2_200);
+var SkipToContent = function (_a) {
+    var children = _a.children;
+    return (React.createElement(SkipToContentWrapper, null,
+        React.createElement(SkipToContentLink, { href: "#main" }, children)));
+};
+export default SkipToContent;
+var templateObject_1, templateObject_2;

package/dist/src/SkipToContent/index.js

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

package/dist/src/Switcher/MobileCustomMenuContent.js

@@ -0,0 +1,26 @@
+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 React from 'react';
+import { useScrollableContainer } from '../common/ScrollableContainer';
+import { MobileHeaderContainer, MobileHeaderNote, MobileHeaderText, MobileMenuWrapper, ScrollableContainer } from '../GlobalNavigationBar/mobile/CommonStyles';
+import { MobileActionContainer } from '../GlobalNavigationBar/mobile/MobileActionContainer';
+export var MobileCustomMenuContent = function (_a) {
+    var children = _a.children, header = _a.header, action = _a.action;
+    var _b = useScrollableContainer([children]), scrollContainerRef = _b[0], scrollable = _b[1];
+    return (React.createElement(MobileMenuWrapper, null,
+        React.createElement(ScrollableContainer, { ref: scrollContainerRef, className: scrollable ? 'scrollable' : '' },
+            !!header && (React.createElement(MobileHeaderContainer, null,
+                React.createElement(MobileHeaderText, null, header.header),
+                header.note && React.createElement(MobileHeaderNote, null, header.note))),
+            children),
+        action && React.createElement(MobileActionContainer, __assign({}, action))));
+};

package/dist/src/Switcher/MobileSwitcherMenu.js

@@ -0,0 +1,21 @@
+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 { BREAKPOINTS } from '../styles';
+import { Z_INDEXES } from '../styles';
+import MobileMenuHeader from '../GlobalNavigationBar/mobile/MobileMenuHeader';
+import MobileMenuContent from '../GlobalNavigationBar/mobile/MobileMenuContent';
+import { MobileCustomMenuContent } from './MobileCustomMenuContent';
+var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 320px;\n  z-index: ", ";\n  height: 100%;\n  box-sizing: border-box;\n\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  ", " {\n    width: 400px;\n  }\n"], ["\n  width: 320px;\n  z-index: ", ";\n  height: 100%;\n  box-sizing: border-box;\n\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  ", " {\n    width: 400px;\n  }\n"])), Z_INDEXES.off_canvas, BREAKPOINTS.SMALL);
+var MobileSwitcherMenu = function (_a) {
+    var label = _a.label, header = _a.header, note = _a.note, onMenuClose = _a.onMenuClose, customContent = _a.customContent, items = _a.items, footerAction = _a.footerAction;
+    return (React.createElement(Wrapper, { role: "menu", "aria-labelledby": "UserMenuButton" },
+        React.createElement(MobileMenuHeader, { onGoBack: onMenuClose, label: label, onClose: onMenuClose }),
+        items && React.createElement(MobileMenuContent, { header: { header: header, note: note }, items: items, action: footerAction }),
+        customContent && (React.createElement(MobileCustomMenuContent, { header: { header: header, note: note }, action: footerAction }, customContent))));
+};
+export default MobileSwitcherMenu;
+var templateObject_1;

package/dist/src/Switcher/SwitcherMenuItem.js

@@ -0,0 +1,18 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import styled from 'styled-components';
+import { Z_INDEXES, ComponentMStyling, COLORS, ComponentTextStyle, focusStyles } from '../styles';
+import { defaultOnMouseDownHandler } from '../common';
+var StyledSwitcherItem = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 16px 25px;\n  margin: 0 2px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  ", "\n\n  text-decoration: none;\n\n  svg {\n    margin-right: 16px;\n  }\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    left: 4px;\n    top: 4px;\n    bottom: 4px;\n    width: 4px;\n    background-color: transparent;\n    border-radius: 2px;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ", ";\n    font-weight: bold;\n    color: ", ";\n\n    &:after {\n      background-color: ", ";\n    }\n\n    svg path {\n      fill: ", ";\n    }\n  }\n\n  &.disabled {\n    color: ", ";\n    background-color: ", ";\n  }\n\n  &:hover:not(.disabled) {\n    z-index: ", ";\n    color: ", ";\n    background-color: ", ";\n\n    svg path {\n      fill: ", ";\n    }\n  }\n\n  &:active:not(.disabled) {\n    z-index: ", ";\n    color: ", ";\n    background-color: ", ";\n\n    &:after {\n      background-color: ", ";\n    }\n\n    svg path {\n      fill: ", ";\n    }\n  }\n\n  &:focus:not(.disabled) {\n    ", ";\n    \n    outline-offset: -2px;\n  }\n"], ["\n  padding: 16px 25px;\n  margin: 0 2px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  ", "\n\n  text-decoration: none;\n\n  svg {\n    margin-right: 16px;\n  }\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    left: 4px;\n    top: 4px;\n    bottom: 4px;\n    width: 4px;\n    background-color: transparent;\n    border-radius: 2px;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ", ";\n    font-weight: bold;\n    color: ", ";\n\n    &:after {\n      background-color: ", ";\n    }\n\n    svg path {\n      fill: ", ";\n    }\n  }\n\n  &.disabled {\n    color: ", ";\n    background-color: ", ";\n  }\n\n  &:hover:not(.disabled) {\n    z-index: ", ";\n    color: ", ";\n    background-color: ", ";\n\n    svg path {\n      fill: ", ";\n    }\n  }\n\n  &:active:not(.disabled) {\n    z-index: ", ";\n    color: ", ";\n    background-color: ", ";\n\n    &:after {\n      background-color: ", ";\n    }\n\n    svg path {\n      fill: ", ";\n    }\n  }\n\n  &:focus:not(.disabled) {\n    ", ";\n    \n    outline-offset: -2px;\n  }\n"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), Z_INDEXES.active, COLORS.neutral_800, COLORS.primary_500, COLORS.neutral_800, COLORS.neutral_300, COLORS.neutral_100, Z_INDEXES.hover, COLORS.primary_600, COLORS.primary_20, COLORS.primary_600, Z_INDEXES.active, COLORS.primary_800, COLORS.primary_100, COLORS.primary_500, COLORS.primary_800, focusStyles);
+var A = styled.a(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
+var SwitcherMenuItem = function (_a) {
+    var label = _a.label, url = _a.url, disabled = _a.disabled, icon = _a.icon, _b = _a.as, as = _b === void 0 ? A : _b, testId = _a.testId;
+    return (React.createElement(StyledSwitcherItem, { onClick: function () { return (window.location.href = url || ''); }, as: as, onMouseDown: defaultOnMouseDownHandler, href: url || '', target: "_parent", key: label, className: disabled ? 'disabled' : '', "data-testid": testId },
+        !!icon && React.cloneElement(icon, { size: '24px', color: '#666666' }),
+        label));
+};
+export default SwitcherMenuItem;
+var templateObject_1, templateObject_2;

package/dist/src/Switcher/__tests__/SwitcherMenuItem.js

@@ -0,0 +1,53 @@
+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 { SwitcherMenuItem } from '../index';
+import 'jest-styled-components';
+import { COLORS } from '../../styles';
+describe('<SwitcherMenuItem />', function () {
+    it('Renders SwitcherMenuItem', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, queryByText, getByTestId, testMenuItem;
+        return __generator(this, function (_b) {
+            _a = render(React.createElement(SwitcherMenuItem, { label: "TestLabel", url: "/test", testId: "TestSwitcherMenuItem" })), queryByText = _a.queryByText, getByTestId = _a.getByTestId;
+            expect(queryByText('TestLabel')).toBeDefined();
+            testMenuItem = getByTestId('TestSwitcherMenuItem');
+            expect(testMenuItem).toHaveStyleRule('color', COLORS.neutral_600);
+            return [2 /*return*/];
+        });
+    }); });
+});

package/dist/src/Switcher/index.js

@@ -0,0 +1,3 @@
+import SwitcherMenuItem from './SwitcherMenuItem';
+import MobileSwitcherMenu from './MobileSwitcherMenu';
+export { SwitcherMenuItem, MobileSwitcherMenu };

package/dist/src/Table/Table.js

@@ -0,0 +1,292 @@
+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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+/**
+ * Import React libraries.
+ */
+import * as React from 'react';
+/**
+ * Import custom components.
+ */
+import { Size } from '../types';
+/**
+ * Import custom styles.
+ */
+import { StyledTableSpinner, TableWrapper } from './TableStyles';
+import { LoadingIndicator } from '../LoadingIndicator';
+import TableHeader from './TableHeaders';
+import TableFooter from './TableFooter';
+import TableBody from './TableBody';
+var Table = function (props) {
+    var onPreviousPageClick = props.onPreviousPageClick, onNextPageClick = props.onNextPageClick, onRowsPerPageChange = props.onRowsPerPageChange, onTriggerSortingChange = props.onTriggerSortingChange, columns = props.columns, rows = props.rows, remoteOperations = props.remoteOperations, pagination = props.pagination, showLoadingIndicator = props.showLoadingIndicator, selectable = props.selectable, multiSelect = props.multiSelect, keyExpr = props.keyExpr, sortProps = props.sortProps, accordion = props.accordion, _a = props.collapsed, collapsed = _a === void 0 ? true : _a, collapsedRows = props.collapsedRows, rowsPerPageLabel = props.rowsPerPageLabel, loaderZIndex = props.loaderZIndex;
+    // States used within the component
+    var _b = React.useState(10), rowsPerPage = _b[0], setRowsPerPage = _b[1];
+    var _c = React.useState([]), filteredRows = _c[0], setFilteredRows = _c[1];
+    var _d = React.useState([]), currentPageRows = _d[0], setCurrentPageRows = _d[1];
+    var _e = React.useState(1), currentPage = _e[0], setCurrentPage = _e[1];
+    var _f = React.useState(), sort = _f[0], setSort = _f[1];
+    var _g = React.useState(), from = _g[0], setFrom = _g[1];
+    var _h = React.useState(), to = _h[0], setTo = _h[1];
+    var _j = React.useState(), total = _j[0], setTotal = _j[1];
+    var _k = React.useState(true), isCollapsed = _k[0], setIsCollapsed = _k[1];
+    var _l = React.useState('none'), selectAllState = _l[0], setSelectAllState = _l[1];
+    var _m = React.useState(multiSelect ? [] : undefined), selected = _m[0], setSelected = _m[1];
+    React.useEffect(function () {
+        var _a, _b;
+        setSort({
+            column: (_a = sortProps === null || sortProps === void 0 ? void 0 : sortProps.column) !== null && _a !== void 0 ? _a : '',
+            direction: (_b = sortProps === null || sortProps === void 0 ? void 0 : sortProps.direction) !== null && _b !== void 0 ? _b : 'asc',
+            allowClearingSort: (sortProps === null || sortProps === void 0 ? void 0 : sortProps.allowClearingSort) === undefined ? true : sortProps.allowClearingSort
+        });
+    }, [sortProps]);
+    React.useEffect(function () {
+        setSelected(props.selectedRows || (multiSelect ? [] : undefined));
+    }, [props.selectedRows, multiSelect]);
+    /**
+     * update select all checkbox state
+     */
+    React.useEffect(function () {
+        if (multiSelect) {
+            var currentList_1 = currentPageRows.map(function (row) { return keyExpr ? row[keyExpr] : row; });
+            var count = selected.filter(function (item) { return currentList_1.includes(item); }).length;
+            setSelectAllState(count === currentList_1.length ? 'all' : count > 0 ? 'some' : 'none');
+        }
+    }, [currentPageRows, multiSelect, selected, keyExpr]);
+    /**
+     * Takes care of remote pagination.
+     * Works only in case remote pagination is set to true.
+     */
+    React.useEffect(function () {
+        if (remoteOperations) {
+            setCurrentPageRows(rows);
+            // Let's assign pagination values
+            setFrom(pagination === null || pagination === void 0 ? void 0 : pagination.from);
+            setTo(pagination === null || pagination === void 0 ? void 0 : pagination.to);
+            setTotal(pagination === null || pagination === void 0 ? void 0 : pagination.total);
+            setCurrentPage(pagination === null || pagination === void 0 ? void 0 : pagination.currentPage);
+            setRowsPerPage(pagination === null || pagination === void 0 ? void 0 : pagination.rowsPerPage);
+        }
+    }, [remoteOperations, pagination, rows]);
+    /**
+     * Sets number of rows to display when accordion.
+     */
+    React.useEffect(function () {
+        if (!accordion)
+            return;
+        setRowsPerPage(isCollapsed ? collapsedRows || 10 : rows.length);
+    }, [rows, accordion, collapsedRows, isCollapsed]);
+    React.useEffect(function () {
+        if (!accordion)
+            return;
+        setIsCollapsed(!!collapsed);
+    }, [accordion, collapsed]);
+    /**
+     * Filters out a rows by specific column filters and sorts them if any sorting is set.
+     * @returns Filtered and sorted rows.
+     */
+    var filterAndSortRows = function () {
+        var tmpFilteredRows = rows.filter(function (row) {
+            // Let's start with matched filter criteria
+            var matchFilterCriteria = true;
+            // Let's go through columns
+            for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {
+                var column = columns_1[_i];
+                // Let's check if filter value is specified for the column
+                // And if it doesn't match the current row column value
+                // Then let's update match filter criteria to failed
+                if (column.filterValue && row[column.key].toLowerCase().indexOf(column.filterValue.toLowerCase()) === -1) {
+                    matchFilterCriteria = false;
+                }
+            }
+            // Let's return row only in case match filter criteria succeeds
+            if (matchFilterCriteria) {
+                return row;
+            }
+        });
+        // Let's apply sorting if needed
+        if (!!(sort === null || sort === void 0 ? void 0 : sort.column) && !!(sort === null || sort === void 0 ? void 0 : sort.direction)) {
+            // Let's sort the rows
+            tmpFilteredRows.sort(function (a, b) {
+                if (a[sort.column] > b[sort.column]) {
+                    return sort.direction === 'asc' ? 1 : -1;
+                }
+                else if (a[sort.column] < b[sort.column]) {
+                    return sort.direction === 'asc' ? -1 : 1;
+                }
+                else {
+                    return 0;
+                }
+            });
+        }
+        // Let's return filtered rows
+        return tmpFilteredRows;
+    };
+    /**
+     * Takes care of local pagination.
+     * Works only in case remote pagination is not defined or is set to false.
+     */
+    React.useEffect(function () {
+        if (!remoteOperations) {
+            // Let's retrieve temporary filtered rows and update globally filtered rows
+            var tmpFilteredRows = filterAndSortRows();
+            setFilteredRows(tmpFilteredRows);
+            setTotal(tmpFilteredRows.length);
+            // Assign rows from and rows to
+            var rowsFrom = (currentPage - 1) * rowsPerPage;
+            var rowsTo = rowsFrom + rowsPerPage >= tmpFilteredRows.length ? tmpFilteredRows.length : rowsFrom + rowsPerPage;
+            // Set from and to values
+            setFrom(rowsFrom + 1);
+            setTo(rowsTo);
+            // Filter out the rows
+            setCurrentPageRows(tmpFilteredRows.slice(rowsFrom, rowsTo));
+        }
+    }, [rowsPerPage, rows, currentPage, columns, sort, remoteOperations]);
+    /**
+     * Applies a specific sorting to a column.
+     * If no sorting exists, then applies ascending initially
+     * @param column - Column to which sorting should be applied.
+     */
+    var sortTableColumn = function (column) {
+        var columnKey = '';
+        var sortDirection = undefined;
+        if ((sort === null || sort === void 0 ? void 0 : sort.column) !== column.key) {
+            columnKey = column.key;
+            sortDirection = 'asc';
+        }
+        else {
+            if ((sort === null || sort === void 0 ? void 0 : sort.direction) === 'desc' && (sort === null || sort === void 0 ? void 0 : sort.allowClearingSort)) {
+                columnKey = '';
+                sortDirection = undefined;
+            }
+            else {
+                columnKey = sort.column;
+                sortDirection = sort.direction === 'asc' ? 'desc' : 'asc';
+            }
+        }
+        if (columnKey == '')
+            setSort({ column: '', direction: 'asc', allowClearingSort: sort === null || sort === void 0 ? void 0 : sort.allowClearingSort });
+        else
+            setSort({ column: columnKey, direction: sortDirection, allowClearingSort: sort === null || sort === void 0 ? void 0 : sort.allowClearingSort });
+        remoteOperations && onTriggerSortingChange && onTriggerSortingChange(columnKey, sortDirection);
+    };
+    /**
+     * Navigates user back to the previous page and updates the current table page.
+     */
+    var previousPage = function () {
+        if (remoteOperations) {
+            // Let's inform parent component about page change
+            if (onPreviousPageClick) {
+                onPreviousPageClick();
+            }
+        }
+        else {
+            // Let's change the page within the component
+            setCurrentPage(currentPage > 1 ? currentPage - 1 : 1);
+        }
+    };
+    /**
+     * Navigates user to the next page and updates the current table page.
+     */
+    var nextPage = function () {
+        if (remoteOperations) {
+            // Let's inform parent component about page change
+            if (onNextPageClick) {
+                onNextPageClick();
+            }
+        }
+        else {
+            // Let's change the page within the component
+            setCurrentPage(currentPage * rowsPerPage >= filteredRows.length ? currentPage : currentPage + 1);
+        }
+    };
+    /**
+     * Updates the rows per page value and refreshes the table content accordingly.
+     * @param value - Newly selected rows per page value.
+     */
+    var changeRowsPerPage = function (value) {
+        // Let's check if we are using remote pagination
+        if (remoteOperations) {
+            // Inform parent component about rows per page change
+            if (onRowsPerPageChange) {
+                onRowsPerPageChange(value);
+            }
+        }
+        else {
+            // Let's reset current page to 1
+            setCurrentPage(1);
+        }
+        // Let's set rows per page
+        setRowsPerPage(value);
+    };
+    /**
+     * Function which is called when a mouse click happens on a row to pass data to the parent component.
+     * @param row - Row in which the link is located.
+     */
+    var onRowClick = function (row) {
+        var _a;
+        var selectedText = (_a = window === null || window === void 0 ? void 0 : window.getSelection()) === null || _a === void 0 ? void 0 : _a.toString();
+        if ((selectedText === null || selectedText === void 0 ? void 0 : selectedText.length) === 0 && selectable) {
+            var value = keyExpr ? row[keyExpr] : row;
+            var currentSelection = value;
+            if (!!multiSelect) {
+                var existing = selected === null || selected === void 0 ? void 0 : selected.indexOf(value);
+                if (existing > -1) {
+                    currentSelection = __spreadArray([], selected, true);
+                    currentSelection.splice(existing, 1);
+                }
+                else {
+                    currentSelection = __spreadArray(__spreadArray([], selected, true), [currentSelection], false);
+                }
+            }
+            setSelected(currentSelection);
+            props.onSelectionChange && props.onSelectionChange(currentSelection);
+        }
+    };
+    /**
+     * Function which is called when user clicks checkbox to select or deselect all rows.
+     */
+    var onSelectAllClick = function () {
+        var currentList = currentPageRows.map(function (row) { return keyExpr ? row[keyExpr] : row; });
+        switch (selectAllState) {
+            case 'all':
+                setSelected(__spreadArray([], selected, true).filter(function (item) { return !currentList.includes(item); }));
+                setSelectAllState('none');
+                break;
+            case 'none':
+                setSelected(__spreadArray(__spreadArray([], selected, true), currentList, true));
+                setSelectAllState('all');
+                break;
+            case 'some':
+                setSelected(__spreadArray(__spreadArray([], selected, true), currentList.filter(function (item) { return !selected.includes(item); }), true));
+                setSelectAllState('all');
+                break;
+        }
+    };
+    /**
+     * Return Table component.
+     */
+    return (React.createElement(TableWrapper, { className: props.border ? 'border' : undefined },
+        React.createElement(TableHeader, __assign({}, props)),
+        React.createElement(TableBody, __assign({}, props, { currentPageRows: currentPageRows, selected: selected, onRowClick: onRowClick, sortByColumn: sortTableColumn, onSelectAllClick: onSelectAllClick, sortProps: sort, selectAllState: selectAllState })),
+        React.createElement(TableFooter, __assign({}, props, { onRowsPerPageChange: changeRowsPerPage, rowsPerPage: rowsPerPage, setIsCollapsed: setIsCollapsed, isCollapsed: isCollapsed, from: from, to: to, total: total, nextPage: nextPage, prevPage: previousPage })),
+        showLoadingIndicator && (React.createElement(StyledTableSpinner, { zindex: loaderZIndex },
+            React.createElement(LoadingIndicator, { size: Size.Medium })))));
+};
+export default Table;