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

package/dist/Tabs/__tests__/TabLink.tests.js

@@ -0,0 +1,83 @@
+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 __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 { MemoryRouter as Router } from 'react-router';
+import TabLink from '../TabLink';
+import 'jest-styled-components';
+import { COLORS } from '../../styles';
+jest.mock('react-router-dom', function () { return (__assign(__assign({}, jest.requireActual('react-router-dom')), { useLocation: function () { return ({
+        pathname: 'localhost:3000/test',
+    }); } })); });
+describe('<TabLink />', function () {
+    it('Renders primary button', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, queryByText, getByTestId;
+        return __generator(this, function (_b) {
+            _a = render(React.createElement(Router, { initialEntries: ['/some-route'] },
+                React.createElement(TabLink, { requiredLine: "This is a required line", onLinkClick: function () { }, to: "/test", testId: "TestTabLink" }))), queryByText = _a.queryByText, getByTestId = _a.getByTestId;
+            expect(queryByText('This is a required line')).toBeDefined();
+            expect(getByTestId('TestTabLink')).toHaveStyle('background-color: transparent');
+            expect(getByTestId('TestTabLink')).toHaveStyle("color: ".concat(COLORS.neutral_600));
+            expect(getByTestId('TestTabLink')).toHaveStyle('font-size: 16px');
+            // Check that click takes you to correct route
+            getByTestId('TestTabLink').click();
+            return [2 /*return*/];
+        });
+    }); });
+    it('Renders notification dot if defined', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, queryByText, getByTestId;
+        return __generator(this, function (_b) {
+            _a = render(React.createElement(Router, { initialEntries: ['/some-route'] },
+                React.createElement(TabLink, { requiredLine: "This is a required line", onLinkClick: function () { }, to: "/test", testId: "TestTabLinkWithNotifcationDot", showNotificationDot: true }))), queryByText = _a.queryByText, getByTestId = _a.getByTestId;
+            expect(queryByText('This is a required line')).toBeDefined();
+            expect(getByTestId('NotificationDot')).toBeDefined();
+            expect(getByTestId('NotificationDot')).toHaveStyleRule('background-color', COLORS.critical_500);
+            return [2 /*return*/];
+        });
+    }); });
+});

package/dist/Tabs/__tests__/Tablist.tests.js

@@ -0,0 +1,78 @@
+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 Tabs from '../Tabs';
+import { Size } from '../../types';
+import 'jest-styled-components';
+import '@testing-library/jest-dom/extend-expect';
+describe('<Tabs />', function () {
+    it('Renders tabs component', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var queryByRole;
+        var _a;
+        return __generator(this, function (_b) {
+            queryByRole = render(React.createElement(Tabs, { size: Size.Small })).queryByRole;
+            expect(queryByRole('tablist')).toBeDefined();
+            expect((_a = queryByRole('tablist')) === null || _a === void 0 ? void 0 : _a.children).toHaveLength(0);
+            return [2 /*return*/];
+        });
+    }); });
+    it('Renders tabs component with children and medium size', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var queryByRole;
+        var _a;
+        return __generator(this, function (_b) {
+            queryByRole = render(React.createElement(Tabs, { size: Size.Medium },
+                React.createElement("a", { "data-testid": "child" }, "test tab"))).queryByRole;
+            expect(queryByRole('tablist')).toBeTruthy();
+            expect((_a = queryByRole('tablist')) === null || _a === void 0 ? void 0 : _a.children).toHaveLength(1);
+            expect(queryByRole('tablist')).toHaveStyleRule('height', '56px', { modifier: 'a' });
+            expect(queryByRole('tablist')).toHaveStyleRule('margin', '10px 0 3px 16px', { modifier: 'a > div:first-child' });
+            return [2 /*return*/];
+        });
+    }); });
+    it('Renders tabs component with children and large size', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var queryByRole;
+        return __generator(this, function (_a) {
+            queryByRole = render(React.createElement(Tabs, { size: Size.Large },
+                React.createElement("a", { "data-testid": "child" }, "test tab"))).queryByRole;
+            expect(queryByRole('tablist')).toBeTruthy();
+            expect(queryByRole('tablist')).toHaveStyleRule('height', '64px', { modifier: 'a' });
+            expect(queryByRole('tablist')).toHaveStyleRule('margin', '12px 0 4px 16px', { modifier: 'a > div:first-child' });
+            return [2 /*return*/];
+        });
+    }); });
+});

package/dist/Tabs/index.d.ts

@@ -1,5 +1,5 @@
 import VerticalTabs from './VerticalTabs';
 import HorizontalTabs from './HorizontalTabs';
-export type { VerticalTabEntry } from './VerticalTabs';
+export type { VerticalTabEntry, VerticalTabsProps } from './VerticalTabs';
 export type { HorizontalTab } from './HorizontalTabs';
 export { VerticalTabs, HorizontalTabs };

package/dist/Tag/Tag.d.ts

@@ -1,8 +1,11 @@
 import * as React from 'react';
 export type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';
 export type TagProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** Optional. Label to be shown in the Tag. */
     label?: string;
+    /** Optional. Icon to be shown in the tag. */
     icon?: React.ReactNode;
+    /** Optional. Style Variant of the Tag. Defaults to 'neutral' */
     variant?: TagVariants;
 };
 declare const Tag: React.FunctionComponent<TagProps>;

package/dist/Tile/TileCommonItems.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { TileDropdownButton, TileHyperLink, TileIconButton, TileNote, TileStandardButton, TileToggleButton } from './TileTypes';
+import React from 'react';
 import { Size } from '../types';
 export declare const TileNoteText: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TileNoteIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -7,4 +7,4 @@ export declare const TileNoteWrapper: import("styled-components").StyledComponen
 export declare const TileHyperLinkIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TileHyperLinkText: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TileHyperLinkWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const RenderTileItem: (item: TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton | TileNote | TileHyperLink, size: Size, key?: any | undefined) => JSX.Element;
+export declare const RenderTileItem: (item: TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton | TileNote | TileHyperLink, size: Size, key?: any | undefined) => React.JSX.Element;

package/dist/Toasters/Toast.d.ts

@@ -16,17 +16,25 @@ export declare const ToastCloseButton: import("styled-components").StyledCompone
 export declare const ToastTextContainer: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const ToastIconContainer: import("styled-components").StyledComponent<"span", any, {}, never>;
 export type ToastOptions = {
+    /** Optional. Color of the toast. Defaults to 'BLACK' */
     color?: ToastColor;
+    /** Optional. If set Toast will automatically close after delay. Defaults to 'true' */
     autoClose?: boolean;
+    /** Optional. Delay after which toast will disappear in milliseconds. Defaults to '5000' */
     delay?: number;
+    /** Optional. If set then Close button will be shown on the right side of the Toast. Defaults to 'false' */
     showCloseButton?: boolean;
+    /** Optional. Custom action to be available in the Toast, will be shown on the right side of the Toast. */
     action?: {
         label: string;
         handler: () => void;
         type?: ToastActionType;
     }[];
+    /** Required. Position on the screen at which Toast will be shown */
     position: ToastPosition;
+    /** Optional. From which side of the screen appearance animation will start. Defaults to 'TOP' */
     enterFrom?: ToastEntryDirection;
+    /** Optional. Icon that will be shown on the left side of the Toast */
     icon?: React.ReactNode;
 };
 type Props = {
@@ -35,5 +43,5 @@ type Props = {
     options?: ToastOptions;
     testId?: string;
 };
-declare const Toast: ({ content, remove, options, testId }: Props) => JSX.Element;
+declare const Toast: ({ content, remove, options, testId }: Props) => React.JSX.Element;
 export default Toast;

package/dist/Toggles/ToggleButton.d.ts

@@ -4,10 +4,15 @@ export interface ToggleButtonState {
     color?: string;
 }
 export interface ToggleButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'disabled' | 'onClick'> {
+    /** Required. Initial state of the toggle. */
     active: boolean;
+    /** Optional. Handler to be called when toggle state changes. */
     onChange?: (value: boolean) => void;
+    /** Optional. If set user can not interact with ToggleButton. */
     disabled?: boolean;
+    /** Required. Icon and color of toggle in default state. */
     defaultState: ToggleButtonState;
+    /** Optional. Icon and color of toggle in active state. */
     activeState?: ToggleButtonState;
 }
 export declare const ToggleButton: React.ForwardRefExoticComponent<ToggleButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/Toggles/TogglerTypes.d.ts

@@ -4,11 +4,18 @@ import { Size } from '..';
  * Types for the table.
  */
 export interface ToggleSwitchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onKeyDown' | 'onClick' | 'tabIndex'> {
+    /** Required. Id of the ToggleSwitch will be set to top level StyledSwitch div component. */
     id: string;
+    /** Optional. Label to be shown on the right side of the toggle. */
     label?: string;
+    /** Optional. If set user can not interact with Toggle. */
     disabled?: boolean;
+    /** Optional. Initial state of the Toggle, defaults to 'false' */
     selected?: boolean;
+    /** Optional. If set then 'critical_500' will be used as color for unselected state.*/
     isSemantic?: boolean;
+    /** Optional. Defaults to 'medium' */
     size?: Size;
+    /** Required. Handler to handle toggle state change. */
     onToggle: (selected: boolean) => void;
 }

package/dist/Tooltips/TooltipOverflow.d.ts

@@ -6,5 +6,5 @@ interface TooltipOverflowProps extends TooltipProps {
     width?: string;
     value?: string;
 }
-declare const TooltipOverflow: ({ label, children, input, withArrow, maxWidth, width, value, size, height, align, position, ...props }: TooltipOverflowProps) => JSX.Element;
+declare const TooltipOverflow: ({ label, children, input, withArrow, maxWidth, width, value, size, height, align, position, ...props }: TooltipOverflowProps) => React.JSX.Element;
 export default TooltipOverflow;

package/dist/Tooltips/TooltipStyles.d.ts

@@ -8,7 +8,8 @@ export declare const Tooltip: import("styled-components").StyledComponent<"div",
     position?: 'top' | 'right' | 'bottom' | 'left' | undefined;
     width?: string | undefined;
 }, never>;
-export declare const TooltipTrigger: (delay?: string) => import("styled-components").FlattenSimpleInterpolation;
+export declare const TooltipTrigger: (triggerType: 'hover' | 'click', delay?: string) => import("styled-components").FlattenSimpleInterpolation;
 export declare const TooltipContainer: import("styled-components").StyledComponent<"div", any, {
+    triggerType: 'hover' | 'click';
     delay?: string | undefined;
 }, never>;

package/dist/Tooltips/TooltipTypes.d.ts

@@ -5,15 +5,25 @@ import { Size } from "../types";
  */
 export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
     label?: string;
+    /** Optional. If set, then there will be an arrow at the edge closest to children components */
     withArrow?: boolean;
+    /** Optional.  */
     width?: string;
+    /** Optional. Defaults to 'Small'. */
     size?: Size;
+    /** Optional. Delay in appearance of the tooltip. Defaults to 0.7s for 'hover' trigger type. */
     delay?: string;
+    /** Optional. TabIndex property set to TooltipContainer  */
     tabIndex?: number;
+    /** Optional. Defaults to 'auto'. */
     height?: string;
+    /** Optional. To which edge of wrapped components tooltip will be aligned. Defaults to 'center'.  */
     align?: 'start' | 'end' | 'center' | undefined;
+    /** Optional. Defaults to 'bottom'.  */
     position?: 'top' | 'right' | 'bottom' | 'left' | undefined;
     children?: React.ReactNode;
+    /** Optional. What should trigger the appearance of the tooltip - hover or click event. */
     trigger?: 'hover' | 'click';
+    /** Optional. How long tooltip will be visible after appearing to the user in milliseconds. Works only for trigger type 'click'. Defaults to '5000' */
     hideAfter?: number;
 }

package/dist/Tooltips/TooltipWrapper.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { TooltipProps } from './TooltipTypes';
-declare const TooltipWrapper: ({ label, children, withArrow, tabIndex, size, height, delay, align, position, trigger, hideAfter, ...props }: TooltipProps) => JSX.Element;
+declare const TooltipWrapper: ({ label, children, withArrow, tabIndex, size, height, delay, align, position, trigger, hideAfter, ...props }: TooltipProps) => React.JSX.Element;
 export default TooltipWrapper;

package/dist/index.d.ts

@@ -25,7 +25,7 @@ export * from './Paginator';
 export * from './Table';
 export * from './Toggles';
 export * from './HyperLink';
-export * from './NotificationDot';
+export { NotificationDot } from './NotificationDot';
 export * from './Accordion';
 export * from './Tooltips';
 export * from './common';

package/dist/src/Accordion/AccordionItem.js

@@ -0,0 +1,47 @@
+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 { Size } from '..';
+import { SystemIcons } from '../icons';
+import { AccordionItemContainer, AccordionItemBodyContainer, AccordionItemHeaderContainer } from './styles';
+import { defaultOnMouseDownHandler } from '../common';
+var AccordionItem = function (props) {
+    var id = props.id, onSelect = props.onSelect, isActive = props.isActive, title = props.title, icon = props.icon, disabled = props.disabled, isLast = props.isLast, padding = props.padding, children = props.children, className = props.className, _a = props.size, size = _a === void 0 ? Size.Medium : _a, rest = __rest(props, ["id", "onSelect", "isActive", "title", "icon", "disabled", "isLast", "padding", "children", "className", "size"]);
+    var cls = (isActive ? 'active' : '') + (disabled ? ' disabled' : '') + (className ? " ".concat(className) : '');
+    return (React.createElement(AccordionItemContainer, { id: id, className: size },
+        React.createElement(AccordionItemHeaderContainer, __assign({ role: "button", "aria-expanded": isActive, id: "itemHeaderFor_".concat(id), "aria-controls": "itemContentFor_".concat(id), tabIndex: !disabled ? 0 : undefined, onClick: function () {
+                if (!disabled) {
+                    onSelect(id);
+                }
+            }, onKeyDown: function (e) {
+                if (e.key === 'Enter')
+                    onSelect(id);
+            }, onMouseDown: defaultOnMouseDownHandler, className: cls }, rest),
+            icon,
+            React.createElement("span", null, title),
+            React.createElement("div", { "aria-hidden": "true" },
+                isActive && React.createElement(SystemIcons.ChevronUp, null),
+                !isActive && React.createElement(SystemIcons.ChevronDown, null))),
+        isActive && (React.createElement(AccordionItemBodyContainer, { id: "itemContentFor_".concat(id), padding: padding }, children))));
+};
+export default AccordionItem;

package/dist/src/Accordion/AccordionMenu.js

@@ -0,0 +1,66 @@
+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;
+};
+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 * as React from 'react';
+import AccordionItem from './AccordionItem';
+import { AccordionMenuWrapper } from './styles';
+/**
+ * AccordionMenu component that is capable of displaying multiple collapsable sections.
+ */
+var AccordionMenu = function (props) {
+    var items = props.items, selectedItems = props.selectedItems, setSelectedItems = props.setSelectedItems, onSelect = props.onSelect, multipleActive = props.multipleActive, padding = props.padding, size = props.size, rest = __rest(props, ["items", "selectedItems", "setSelectedItems", "onSelect", "multipleActive", "padding", "size"]);
+    var _a = React.useState([]), builtinSelectedItems = _a[0], builtinSetSelectedItems = _a[1];
+    var getCollection = function () {
+        return selectedItems ? selectedItems : builtinSelectedItems;
+    };
+    var getUpdateFunction = function () {
+        return setSelectedItems ? setSelectedItems : builtinSetSelectedItems;
+    };
+    var onSelected = function (id) {
+        var collection = getCollection();
+        var updateFunc = getUpdateFunction();
+        var isActive = !!collection.find(function (x) { return x == id; });
+        if (multipleActive) {
+            if (isActive)
+                updateFunc(collection.filter(function (x) { return x != id; }));
+            else
+                updateFunc(__spreadArray(__spreadArray([], collection, true), [id], false));
+        }
+        else
+            updateFunc(isActive ? [] : [id]);
+        onSelect && onSelect(id);
+    };
+    return (React.createElement(AccordionMenuWrapper, __assign({}, rest), items.map(function (_a, index) {
+        var id = _a.id, disabled = _a.disabled, title = _a.title, icon = _a.icon, children = _a.children, rest = __rest(_a, ["id", "disabled", "title", "icon", "children"]);
+        return (React.createElement(AccordionItem, __assign({ key: id, id: id, disabled: disabled, title: title, "aria-expanded": !!getCollection().find(function (x) { return x == id; }), icon: icon, isActive: !!getCollection().find(function (x) { return x == id; }), isLast: index === items.length - 1, onSelect: onSelected, padding: padding, size: size }, rest), children));
+    })));
+};
+export default AccordionMenu;

package/dist/src/Accordion/ContentAccordion.js

@@ -0,0 +1,107 @@
+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;
+};
+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 from 'react';
+import styled from 'styled-components';
+import { Size } from '../types';
+import { SystemIcons } from '../icons';
+import { COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle, focusStyles, Z_INDEXES, } from '../styles';
+import { defaultOnMouseDownHandler } from '../common';
+export var ContentAccordionItemHeader = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: 48px;\n  color: ", ";\n  cursor: pointer;\n\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n    z-index: ", ";\n  }\n\n  &:focus {\n    ", "\n  }\n\n  &:active {\n    color: ", ";\n    background-color: ", ";\n    z-index: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: 48px;\n  color: ", ";\n  cursor: pointer;\n\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n    z-index: ", ";\n  }\n\n  &:focus {\n    ", "\n  }\n\n  &:active {\n    color: ", ";\n    background-color: ", ";\n    z-index: ", ";\n  }\n"])), COLORS.neutral_600, COLORS.primary_700, COLORS.primary_20, Z_INDEXES.hover, focusStyles, COLORS.primary_800, COLORS.primary_100, Z_INDEXES.active);
+export var ContentAccordionItemHeaderIcon = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 24px;\n  height: 24px;\n\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n"], ["\n  width: 24px;\n  height: 24px;\n\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n"])));
+export var ContentAccordionItemHeaderText = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
+export var ContentAccordionItemContent = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: none;\n  flex-direction: column;\n"], ["\n  display: none;\n  flex-direction: column;\n"])));
+export var ContentAccordionItemContentHeader = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject([""], [""])));
+export var ContentAccordionItemContentBody = styled.p(templateObject_6 || (templateObject_6 = __makeTemplateObject([""], [""])));
+export var ContentAccordionItemContentFooter = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject([""], [""])));
+export var ContentAccordionItem = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  border-top: 1px solid ", ";\n\n  &.active {\n    ", " {\n      display: flex;\n    }\n  }\n\n  &.disabled {\n    ", " {\n      color: ", ";\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  border-top: 1px solid ", ";\n\n  &.active {\n    ", " {\n      display: flex;\n    }\n  }\n\n  &.disabled {\n    ", " {\n      color: ", ";\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n  }\n"])), COLORS.neutral_100, ContentAccordionItemContent, ContentAccordionItemHeader, COLORS.neutral_300);
+export var ContentAccordionWrapper = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  width: 100%;\n  position: relative;\n\n  ", ":last-child {\n    border-bottom: 1px solid ", ";\n  }\n\n  &.small {\n    min-width: 320px;\n    max-width: 528px;\n\n    ", " {\n      gap: 8px;\n      padding: 0 8px;\n      ", "\n    }\n\n    ", " {\n      padding: 0 8px 16px 40px;\n      gap: 8px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        //TODO\n      }\n    }\n  }\n\n  &.medium {\n    min-width: 344px;\n    max-width: 584px;\n\n    ", " {\n      gap: 12px;\n      padding: 0 12px;\n      ", "\n    }\n\n    ", " {\n      padding: 8px 12px 24px 48px;\n      gap: 12px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        //TODO\n      }\n    }\n  }\n\n  &.large {\n    min-width: 384px;\n    max-width: 656px;\n\n    ", " {\n      gap: 16px;\n      padding: 0 16px;\n      ", "\n    }\n\n    ", " {\n      padding: 16px 16px 32px 56px;\n      gap: 16px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        //TODO\n      }\n    }\n  }\n"], ["\n  width: 100%;\n  position: relative;\n\n  ", ":last-child {\n    border-bottom: 1px solid ", ";\n  }\n\n  &.small {\n    min-width: 320px;\n    max-width: 528px;\n\n    ", " {\n      gap: 8px;\n      padding: 0 8px;\n      ", "\n    }\n\n    ", " {\n      padding: 0 8px 16px 40px;\n      gap: 8px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        //TODO\n      }\n    }\n  }\n\n  &.medium {\n    min-width: 344px;\n    max-width: 584px;\n\n    ", " {\n      gap: 12px;\n      padding: 0 12px;\n      ", "\n    }\n\n    ", " {\n      padding: 8px 12px 24px 48px;\n      gap: 12px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        //TODO\n      }\n    }\n  }\n\n  &.large {\n    min-width: 384px;\n    max-width: 656px;\n\n    ", " {\n      gap: 16px;\n      padding: 0 16px;\n      ", "\n    }\n\n    ", " {\n      padding: 16px 16px 32px 56px;\n      gap: 16px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        //TODO\n      }\n    }\n  }\n"])), ContentAccordionItem, COLORS.neutral_100, ContentAccordionItemHeader, ComponentSStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, ComponentSStyling(ComponentTextStyle.Bold, COLORS.black), ContentAccordionItemContentBody, ContentAccordionItemHeader, ComponentMStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, ComponentMStyling(ComponentTextStyle.Bold, COLORS.black), ContentAccordionItemContentBody, ContentAccordionItemHeader, ComponentLStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, ComponentLStyling(ComponentTextStyle.Bold, COLORS.black), ContentAccordionItemContentBody);
+/**
+ * ContentAccordion component that is capable of displaying multiple collapsable sections with content.
+ */
+export var ContentAccordion = function (_a) {
+    var items = _a.items, _b = _a.multi, multi = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? Size.Medium : _c, className = _a.className, onItemStateChanged = _a.onItemStateChanged, rest = __rest(_a, ["items", "multi", "size", "className", "onItemStateChanged"]);
+    var _d = React.useState([]), opened = _d[0], setOpened = _d[1];
+    React.useEffect(function () {
+        var _a;
+        if (multi) {
+            setOpened(items.filter(function (item) { return item.active; }).map(function (item) { return item.id; }));
+        }
+        else {
+            var active = (_a = items.find(function (item) { return !!item.active; })) === null || _a === void 0 ? void 0 : _a.id;
+            if (active) {
+                setOpened([active]);
+            }
+        }
+    }, [items, multi]);
+    var onItemClick = function (item) {
+        if (item.disabled)
+            return;
+        if (opened.includes(item.id)) {
+            var newOpened = opened.filter(function (key) { return key !== item.id; });
+            setOpened(newOpened);
+            onItemStateChanged && onItemStateChanged(newOpened);
+        }
+        else {
+            if (multi) {
+                var newOpened = __spreadArray(__spreadArray([], opened, true), [item.id], false);
+                setOpened(newOpened);
+                onItemStateChanged && onItemStateChanged(newOpened);
+            }
+            else {
+                var newOpened = [item.id];
+                setOpened(newOpened);
+                onItemStateChanged && onItemStateChanged(newOpened);
+            }
+        }
+    };
+    var renderItem = function (item) {
+        var id = item.id, title = item.title, header = item.header, body = item.body, footer = item.footer, disabled = item.disabled, active = item.active, rest = __rest(item, ["id", "title", "header", "body", "footer", "disabled", "active"]);
+        var isActive = opened.includes(id);
+        return (React.createElement(ContentAccordionItem, { key: id, id: "item_".concat(id), className: ''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '') },
+            React.createElement(ContentAccordionItemHeader, __assign({ role: "button", id: "headerFor_".concat(id), "aria-expanded": isActive, "aria-controls": "itemContentFor_".concat(id), tabIndex: !disabled ? 0 : undefined, onMouseDown: defaultOnMouseDownHandler, onClick: function () { return !disabled && onItemClick(item); }, onKeyDown: function (event) { return event.key === 'Enter' && onItemClick(item); } }, rest),
+                React.createElement(ContentAccordionItemHeaderIcon, null, multi ? isActive ? React.createElement(SystemIcons.Minus, { "aria-hidden": "true" }) : React.createElement(SystemIcons.Plus, { "aria-hidden": "true" }) : isActive ?
+                    React.createElement(SystemIcons.ChevronDown, { "aria-hidden": "true" }) : React.createElement(SystemIcons.ChevronRight, { "aria-hidden": "true" })),
+                React.createElement(ContentAccordionItemHeaderText, null, title)),
+            React.createElement(ContentAccordionItemContent, { id: "itemContentFor_".concat(id) },
+                header && React.createElement(ContentAccordionItemContentHeader, null, header),
+                React.createElement(ContentAccordionItemContentBody, null, body),
+                footer && React.createElement(ContentAccordionItemContentFooter, null, footer))));
+    };
+    var cls = "".concat(size, " ").concat(className !== null && className !== void 0 ? className : '').trim();
+    return React.createElement(ContentAccordionWrapper, { className: cls }, items.map(function (item) { return renderItem(item); }));
+};
+export default ContentAccordion;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/dist/src/Accordion/index.js

@@ -0,0 +1,7 @@
+export * from './AccordionMenu';
+export * from './AccordionItem';
+export * from './ContentAccordion';
+export { default as AccordionMenu } from './AccordionMenu';
+export { default as AccordionMenuItem } from './AccordionMenu';
+export { default as ContentAccordion } from './ContentAccordion';
+export { AccordionMenuWrapper } from './styles';

package/dist/src/Accordion/styles.js

@@ -0,0 +1,12 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from 'styled-components';
+import { COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle, focusStyles } from '../styles';
+import { Z_INDEXES } from '../styles/z-indexes';
+export var AccordionMenuWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  min-width: 320px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n"], ["\n  min-width: 320px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n"])));
+export var AccordionItemHeaderContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  outline: none;\n  box-sizing: border-box;\n\n  ", "\n\n  div:last-child {\n    margin-left: auto;\n  }\n\n  padding: 0 16px;\n  min-height: 48px;\n  \n  svg {\n    width: 20px;\n    height: 20px;\n  }\n  \n  .medium & {\n    ", "\n    padding: 0 24px;\n    min-height: 56px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .large & {\n    ", "\n    padding: 0 32px;\n    min-height: 64px;\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  :focus:not(:active) {\n    ", "\n  }\n\n  :hover {\n    background: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  :active {\n    color: ", ";\n    background: ", ";\n    z-index: ", ";\n  }\n\n  &.active {\n    color: ", ";\n  }\n\n  &.disabled {\n    background: ", "!important;\n    color: ", ";\n    cursor: not-allowed;\n    pointer-events: none;\n    svg {\n      color: ", "!important;\n    }\n  }\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  outline: none;\n  box-sizing: border-box;\n\n  ", "\n\n  div:last-child {\n    margin-left: auto;\n  }\n\n  padding: 0 16px;\n  min-height: 48px;\n  \n  svg {\n    width: 20px;\n    height: 20px;\n  }\n  \n  .medium & {\n    ", "\n    padding: 0 24px;\n    min-height: 56px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .large & {\n    ", "\n    padding: 0 32px;\n    min-height: 64px;\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  :focus:not(:active) {\n    ", "\n  }\n\n  :hover {\n    background: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  :active {\n    color: ", ";\n    background: ", ";\n    z-index: ", ";\n  }\n\n  &.active {\n    color: ", ";\n  }\n\n  &.disabled {\n    background: ", "!important;\n    color: ", ";\n    cursor: not-allowed;\n    pointer-events: none;\n    svg {\n      color: ", "!important;\n    }\n  }\n"])), ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600), ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600), focusStyles, COLORS.primary_20, COLORS.primary_700, Z_INDEXES.hover, COLORS.primary_800, COLORS.primary_100, Z_INDEXES.active, COLORS.neutral_800, COLORS.white, COLORS.neutral_300, COLORS.neutral_300);
+export var AccordionItemContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  \n  &:not(:last-child) ", ":not(.active) {\n    border-bottom: 1px solid ", ";\n  }\n"], ["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  \n  &:not(:last-child) ", ":not(.active) {\n    border-bottom: 1px solid ", ";\n  }\n"])), AccordionItemHeaderContainer, COLORS.neutral_100);
+export var AccordionItemBodyContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: ", ";\n  background: ", ";\n  \n  ", "\n  \n  .medium & {\n    padding: ", ";\n    ", "\n  }\n  \n  .large & {\n    padding: ", ";\n    ", "\n  }\n\n"], ["\n  padding: ", ";\n  background: ", ";\n  \n  ", "\n  \n  .medium & {\n    padding: ", ";\n    ", "\n  }\n  \n  .large & {\n    padding: ", ";\n    ", "\n  }\n\n"])), function (props) { return props.padding || '8px 16px'; }, COLORS.white, ComponentSStyling(ComponentTextStyle.Regular, null), function (props) { return props.padding || '12px 24px'; }, ComponentMStyling(ComponentTextStyle.Regular, null), function (props) { return props.padding || '14px 32px'; }, ComponentLStyling(ComponentTextStyle.Regular, null));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/AuthPage/AuthPage.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { PanelProps } from "../Panel";
 export declare const AuthPageWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export type AuthPageProps = {
+export declare type AuthPageProps = {
     panel?: PanelProps;
     order?: 'default' | 'reverse';
     screenSetsContainerId: string;