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

package/dist/index.js

@@ -1,46 +1,45 @@
-export * from './styles';
-export * from './icons';
-export * from './types';
-export * from './AuthPage';
-export * from './Button';
-export * from './Breadcrumb';
-export * from './Chips';
-export * from './SkipToContent';
-export * from './Footer';
-export * from './LoadingIndicator';
-export * from './MiniProductCard';
-export * from './NavItem';
-export * from './Layouts';
-export * from './GlobalNavigationBar';
-export * from './Tabs';
-export * from './Banners';
-export * from './Toasters';
-export * from './InputFields';
-export * from './Dropdown';
-export * from './Switcher';
-export * from './LoadingPage';
-export * from './List';
-export * from './Modals';
-export * from './Paginator';
-export * from './Table';
-export * from './Toggles';
-export * from './HyperLink';
-export { NotificationDot } from './NotificationDot';
-export * from './Accordion';
-export * from './Tooltips';
-export * from './common';
-export * from './QuizButton';
-export * from './LinearProgress';
-export * from './SegmentControl';
-export * from './Card';
-export * from './MenuItem';
-export * from './Tag';
-export * from './Image';
-export * from './ChipsInput';
-export * from './Tile';
-export * from './ProfileButton';
-export { LaerdalLogo } from './assets';
-export * from './Popover';
-export * from './SideMenu';
-export * from './Panel';
-//# sourceMappingURL=index.js.map
+export * from './styles';
+export * from './icons';
+export * from './types';
+export * from './AuthPage';
+export * from './Button';
+export * from './Breadcrumb';
+export * from './Chips';
+export * from './SkipToContent';
+export * from './Footer';
+export * from './LoadingIndicator';
+export * from './MiniProductCard';
+export * from './NavItem';
+export * from './Layouts';
+export * from './GlobalNavigationBar';
+export * from './Tabs';
+export * from './Banners';
+export * from './Toasters';
+export * from './InputFields';
+export * from './Dropdown';
+export * from './Switcher';
+export * from './LoadingPage';
+export * from './List';
+export * from './Modals';
+export * from './Paginator';
+export * from './Table';
+export * from './Toggles';
+export * from './HyperLink';
+export { NotificationDot } from './NotificationDot';
+export * from './Accordion';
+export * from './Tooltips';
+export * from './common';
+export * from './QuizButton';
+export * from './LinearProgress';
+export * from './SegmentControl';
+export * from './Card';
+export * from './MenuItem';
+export * from './Tag';
+export * from './Image';
+export * from './ChipsInput';
+export * from './Tile';
+export * from './ProfileButton';
+export { LaerdalLogo } from './assets';
+export * from './Popover';
+export * from './SideMenu';
+export * from './Panel';

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;

package/dist/src/AuthPage/AuthPage.js

@@ -0,0 +1,29 @@
+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 * as React from 'react';
+import ScreenSetsContainer from './ScreenSetsContainer';
+import styled from "styled-components";
+import { Panel } from "../Panel";
+import { BREAKPOINTS } from "../styles";
+export var AuthPageWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  height: 100%;\n\n  .panel {\n    flex: 1;\n    display: none;\n  }\n\n  ", " {\n    .panel {\n      display: flex;\n    }\n  }\n\n  &.reverse {\n    flex-direction: row-reverse;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  height: 100%;\n\n  .panel {\n    flex: 1;\n    display: none;\n  }\n\n  ", " {\n    .panel {\n      display: flex;\n    }\n  }\n\n  &.reverse {\n    flex-direction: row-reverse;\n  }\n"])), BREAKPOINTS.MEDIUM);
+var AuthPage = function (_a) {
+    var screenSetsContainerId = _a.screenSetsContainerId, panel = _a.panel, _b = _a.order, order = _b === void 0 ? 'default' : _b;
+    return (React.createElement(AuthPageWrapper, { className: order },
+        panel && React.createElement(Panel, __assign({}, panel, { order: order, className: "panel ".concat(panel.className || '') })),
+        React.createElement(ScreenSetsContainer, { id: screenSetsContainerId, centerContents: !panel })));
+};
+export default AuthPage;
+var templateObject_1;

package/dist/src/AuthPage/ScreenSetsContainer.js

@@ -0,0 +1,9 @@
+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 { BREAKPOINTS } from '../styles';
+var ScreenSetsContainer = styled.section(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  box-sizing: border-box;\n\n  padding: 8px;\n  width: 100%;\n  align-items: ", ";\n\n  .gigya-screen-caption {\n    display: none;\n  }\n\n  .gigya-screen {\n    max-width: 100%;\n    margin: auto;\n  }\n\n  ", " {\n    padding: 24px;\n    width: 50%;\n\n    .gigya-screen {\n      margin: 0;\n      padding: 36px 25px !important;\n    }\n  }\n\n  ", " {\n    .gigya-screen {\n      max-width: 550px;\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  box-sizing: border-box;\n\n  padding: 8px;\n  width: 100%;\n  align-items: ", ";\n\n  .gigya-screen-caption {\n    display: none;\n  }\n\n  .gigya-screen {\n    max-width: 100%;\n    margin: auto;\n  }\n\n  ", " {\n    padding: 24px;\n    width: 50%;\n\n    .gigya-screen {\n      margin: 0;\n      padding: 36px 25px !important;\n    }\n  }\n\n  ", " {\n    .gigya-screen {\n      max-width: 550px;\n    }\n  }\n"])), function (props) { return (props.centerContents ? 'center' : 'unset'); }, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE);
+export default ScreenSetsContainer;
+var templateObject_1;

package/dist/src/AuthPage/index.js

@@ -0,0 +1,4 @@
+export * from './ScreenSetsContainer';
+export * from './AuthPage';
+export { default as ScreenSetsContainer } from './ScreenSetsContainer';
+export { default as AuthPage } from './AuthPage';

package/dist/src/Banners/Banner.d.ts

@@ -3,7 +3,7 @@ import { Size } from '../types';
 /**
  * Styles for <Banner />
  */
-export type StyleBannerProps = BannerProps & {
+export declare type StyleBannerProps = BannerProps & {
     $type: string;
     linkVisited: string;
     linkFocused: string;
@@ -42,7 +42,7 @@ export declare const BannerCloseButtonContainerStyles: import("styled-components
     $type?: string | undefined;
 }, never>;
 export declare const BannerContentWrapperStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
-export type BannerProps = React.HTMLAttributes<HTMLDivElement> & {
+export declare type BannerProps = React.HTMLAttributes<HTMLDivElement> & {
     /** Size of the banner. */
     size?: Size.Small | Size.Medium | Size.Large;
     /** Type of the banner. Different types have different color schemes. */

package/dist/src/Banners/Banner.js

@@ -0,0 +1,112 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';
+import { SystemIcons } from '../icons';
+import { IconButton } from '../Button';
+import { getButtonStyle } from './styles';
+import { ComponentMStyling, ComponentResponsive } from '../styles';
+import { HyperLink } from '../HyperLink';
+import { StyledLink } from '../HyperLink';
+import { hasWindow } from '../utils/utils';
+export var BannerContainerStyles = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: ", ";\n  min-height: 48px;\n  display: flex;\n  color: ", ";\n  margin-top: ", ";\n  border-radius: 4px;\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ", " {\n      margin: 0 0 0 16px;\n    }\n    ", " {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  ", " {\n    &:link {\n      color: ", ";\n    }\n    &:visited {\n      color: ", ";\n    }\n    &:focus,\n    &:active {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.full-width-banner {\n    margin: 8px;\n  }\n"], ["\n  background: ", ";\n  min-height: 48px;\n  display: flex;\n  color: ", ";\n  margin-top: ", ";\n  border-radius: 4px;\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ", " {\n      margin: 0 0 0 16px;\n    }\n    ", " {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  ", " {\n    &:link {\n      color: ", ";\n    }\n    &:visited {\n      color: ", ";\n    }\n    &:focus,\n    &:active {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.full-width-banner {\n    margin: 8px;\n  }\n"])), function (props) { return (props.$type ? props.$type : COLORS.correct_100); }, COLORS.black, function (props) { return (props.bottom ? 'auto' : '0'); }, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE, StyledLink, function (props) { return props.link; }, function (props) { return props.linkVisited; }, function (props) { return props.linkFocused; }, COLORS.white);
+export var BannerCenterStyles = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n\n  display: flex;\n  width: 100%;\n  margin: 0 16px;\n  ", " {\n    margin: 0 32px;\n  }\n  ", " {\n    margin: 0 56px;\n  }\n  &.small {\n    margin: 0 16px;\n  }\n  &.medium {\n    margin: 0 32px;\n  }\n  &.large {\n    margin: 0 64px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n\n  .full-width-banner & {\n    margin: 0 16px;\n\n    ", " {\n      margin: 0 32px;\n    }\n    ", " {\n      margin: 0 64px;\n    }\n\n    &.small {\n      margin: 0 16px;\n    }\n\n    &.medium {\n      margin: 0 32px;\n    }\n\n    &.large {\n      margin: 0 64px;\n    }\n  }\n"], ["\n  ", "\n\n  display: flex;\n  width: 100%;\n  margin: 0 16px;\n  ", " {\n    margin: 0 32px;\n  }\n  ", " {\n    margin: 0 56px;\n  }\n  &.small {\n    margin: 0 16px;\n  }\n  &.medium {\n    margin: 0 32px;\n  }\n  &.large {\n    margin: 0 64px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n\n  .full-width-banner & {\n    margin: 0 16px;\n\n    ", " {\n      margin: 0 32px;\n    }\n    ", " {\n      margin: 0 64px;\n    }\n\n    &.small {\n      margin: 0 16px;\n    }\n\n    &.medium {\n      margin: 0 32px;\n    }\n\n    &.large {\n      margin: 0 64px;\n    }\n  }\n"])), ComponentMStyling(ComponentTextStyle.Regular, null), BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE);
+export var BannerCloseButtonWrapperStyles = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0 0 0 auto;\n"], ["\n  margin: 0 0 0 auto;\n"])));
+export var BannerCloseButtonContainerStyles = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: contents;\n  ", ";\n"], ["\n  display: contents;\n  ", ";\n"])), function (props) { return (props.$type ? getButtonStyle(props.$type) : null); });
+export var BannerContentWrapperStyles = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n"])));
+/** Banner component is used as a middle-interrupting message to the user with zero to one actions. */
+var Banner = function (_a) {
+    var size = _a.size, _b = _a.type, type = _b === void 0 ? 'neutral' : _b, children = _a.children, bottom = _a.bottom, testId = _a.testId, linkText = _a.linkText, link = _a.link, onClose = _a.onClose, icon = _a.icon, noIcon = _a.noIcon, linkAction = _a.linkAction, fullWidth = _a.fullWidth, className = _a.className, rest = __rest(_a, ["size", "type", "children", "bottom", "testId", "linkText", "link", "onClose", "icon", "noIcon", "linkAction", "fullWidth", "className"]);
+    var _c = React.useState(hasWindow() ? window.innerWidth : -1), width = _c[0], setWidth = _c[1];
+    React.useEffect(function () {
+        function handleResize() {
+            setWidth(window.innerWidth);
+        }
+        window.addEventListener('resize', handleResize);
+        return function () { return window.removeEventListener('resize', handleResize); };
+    }, []);
+    var bannerParams = {
+        typeColor: COLORS.primary_100,
+        accentColor: COLORS.primary_700,
+        closeIconColor: COLORS.primary_500,
+        icon: SystemIcons.Tip,
+        containerType: type,
+        focusBgColor: COLORS.primary_200,
+        linkVisited: COLORS.primary_600,
+        linkFocused: COLORS.primary_800,
+    };
+    switch (type) {
+        case 'warning':
+            bannerParams.typeColor = COLORS.warning_100;
+            bannerParams.accentColor = COLORS.warning_700;
+            bannerParams.focusBgColor = COLORS.warning_200;
+            bannerParams.icon = SystemIcons.Help;
+            bannerParams.closeIconColor = COLORS.warning_500;
+            bannerParams.linkVisited = COLORS.warning_800;
+            bannerParams.linkFocused = COLORS.warning_800;
+            break;
+        case 'critical':
+            bannerParams.typeColor = COLORS.critical_100;
+            bannerParams.accentColor = COLORS.critical_700;
+            bannerParams.focusBgColor = COLORS.critical_200;
+            bannerParams.icon = SystemIcons.TechnicalWarning;
+            bannerParams.closeIconColor = COLORS.critical_500;
+            bannerParams.linkVisited = COLORS.critical_800;
+            bannerParams.linkFocused = COLORS.critical_800;
+            break;
+        case 'positive':
+            bannerParams.typeColor = COLORS.correct_100;
+            bannerParams.accentColor = COLORS.correct_700;
+            bannerParams.focusBgColor = COLORS.correct_200;
+            bannerParams.icon = SystemIcons.ThumbsUp;
+            bannerParams.closeIconColor = COLORS.correct_500;
+            bannerParams.linkVisited = COLORS.correct_800;
+            bannerParams.linkFocused = COLORS.correct_800;
+            break;
+    }
+    var cls = "".concat(className !== null && className !== void 0 ? className : '', " ").concat(fullWidth ? 'full-width-banner' : '');
+    return (React.createElement(BannerContainerStyles, __assign({ "data-testid": testId, "$type": bannerParams.typeColor, linkFocused: bannerParams.linkFocused, linkVisited: bannerParams.linkVisited, link: bannerParams.accentColor, bottom: bottom, className: cls, role: "note" }, rest),
+        React.createElement(BannerCenterStyles, { style: { color: bannerParams.accentColor }, className: size },
+            icon ? icon : noIcon ? null : React.createElement(bannerParams.icon, { color: bannerParams.accentColor, size: "24px" }),
+            React.createElement(BannerContentWrapperStyles, null,
+                React.createElement(ComponentResponsive, { size: size, width: width, color: bannerParams.accentColor },
+                    children,
+                    "\u00A0",
+                    link && linkText && (React.createElement(HyperLink, { id: "".concat(Math.floor(Math.random() * 999999999999), "_BannerLink"), onClick: function (e) {
+                            if (linkAction) {
+                                e.preventDefault();
+                                linkAction(e);
+                            }
+                        }, href: link, variant: "default" }, linkText)))),
+            onClose && (React.createElement(BannerCloseButtonWrapperStyles, null,
+                React.createElement(BannerCloseButtonContainerStyles, { "$type": bannerParams.containerType },
+                    React.createElement(IconButton, { variant: "secondary", shape: "circular", useTransparentBackground: true, action: function () { return onClose(); } },
+                        React.createElement(SystemIcons.Close, { color: bannerParams.closeIconColor, size: "24px" }))))))));
+};
+export default Banner;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/src/Banners/OverviewBanner.d.ts

@@ -5,7 +5,7 @@ export declare const OverviewBannerContentStyles: import("styled-components").St
     maxWidth?: number | undefined;
     unsetMargin?: boolean | undefined;
 }, never>;
-export type OverviewBannerProps = {
+export declare type OverviewBannerProps = {
     children: any;
     testId?: string;
 } & React.HTMLAttributes<HTMLDivElement>;

package/dist/src/Banners/OverviewBanner.js

@@ -0,0 +1,39 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import { BREAKPOINTS, COLORS } from '../styles';
+import { PageWidth } from '../Layouts';
+export var OverviewBannerWrapperStyles = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), COLORS.primary_20);
+export var OverviewBannerContentStyles = styled(PageWidth)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n\n  ", " {\n    flex-direction: row;\n    padding: 48px 12px;\n  }\n\n  & > *:first-child {\n    padding-top: 12px;\n    width: 320px;\n    height: 180px;\n\n    ", " {\n      padding-top: 0;\n      margin-right: 20px;\n      width: 384px;\n      height: 216px;\n    }\n  }\n\n  & h2, h3, h4, h5, h6 {\n    margin: 16px 0 24px 0;\n  }\n\n  & p {\n    margin: 0;\n    padding: 0 0 28px 0;\n    max-width: 310px;\n  }\n\n  & div {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-direction: column;\n    margin-bottom: 18px;\n\n    ", " {\n      margin-left: 20px;\n      align-items: start;\n      justify-content: start;\n      width: 384px;\n    }\n  }\n"], ["\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n\n  ", " {\n    flex-direction: row;\n    padding: 48px 12px;\n  }\n\n  & > *:first-child {\n    padding-top: 12px;\n    width: 320px;\n    height: 180px;\n\n    ", " {\n      padding-top: 0;\n      margin-right: 20px;\n      width: 384px;\n      height: 216px;\n    }\n  }\n\n  & h2, h3, h4, h5, h6 {\n    margin: 16px 0 24px 0;\n  }\n\n  & p {\n    margin: 0;\n    padding: 0 0 28px 0;\n    max-width: 310px;\n  }\n\n  & div {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-direction: column;\n    margin-bottom: 18px;\n\n    ", " {\n      margin-left: 20px;\n      align-items: start;\n      justify-content: start;\n      width: 384px;\n    }\n  }\n"])), COLORS.primary_20, BREAKPOINTS.MEDIUM, BREAKPOINTS.MEDIUM, BREAKPOINTS.MEDIUM);
+var OverviewBanner = function (_a) {
+    var children = _a.children, testId = _a.testId, rest = __rest(_a, ["children", "testId"]);
+    return (React.createElement(OverviewBannerWrapperStyles, __assign({}, rest),
+        React.createElement(OverviewBannerContentStyles, { "data-testid": testId }, children)));
+};
+export default OverviewBanner;
+var templateObject_1, templateObject_2;

package/dist/src/Banners/index.js

@@ -0,0 +1,4 @@
+export { default as Banner } from './Banner';
+export { default as OverviewBanner } from './OverviewBanner';
+export * from './Banner';
+export * from './OverviewBanner';