@laerdal/life-react-components 3.5.1-dev.17 → 3.5.1-dev.18

package/dist/src/Accordion/styles.js

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

package/dist/src/AuthPage/AuthPage.js

@@ -1,29 +0,0 @@
-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.d.ts

@@ -1,4 +0,0 @@
-declare const ScreenSetsContainer: import("styled-components").StyledComponent<"section", any, {
-    centerContents: boolean;
-}, never>;
-export default ScreenSetsContainer;

package/dist/src/AuthPage/ScreenSetsContainer.js

@@ -1,9 +0,0 @@
-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.d.ts

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

package/dist/src/AuthPage/index.js

@@ -1,4 +0,0 @@
-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

@@ -1,71 +0,0 @@
-import * as React from 'react';
-import { Size } from '../types';
-/**
- * Styles for <Banner />
- */
-export declare type StyleBannerProps = BannerProps & {
-    $type: string;
-    linkVisited: string;
-    linkFocused: string;
-};
-export declare const BannerContainerStyles: import("styled-components").StyledComponent<"div", any, React.HTMLAttributes<HTMLDivElement> & {
-    /** Size of the banner. */
-    size?: Size.Small | Size.Medium | Size.Large | undefined;
-    /** Type of the banner. Different types have different color schemes. */
-    type?: "warning" | "critical" | "positive" | "neutral" | undefined;
-    /** Link that will be shown after the children of the component. */
-    link?: string | undefined;
-    /** Text of the link */
-    linkText?: string | undefined;
-    /** If provided, then after user clicks on the link instead of following the link this method will be executed. */
-    linkAction?: ((ev: React.MouseEvent) => void) | undefined;
-    /** If set to true, then Banner will have 'margin-top' set to auto, and will render it at the bottom of the parent. */
-    bottom?: boolean | undefined;
-    /** For testing purposes. Will be set on top level container. */
-    testId?: string | undefined;
-    /** Icon to be shown instead of default icon on the left side of the Banner. */
-    icon?: React.ReactNode;
-    /** Callback event to be executed when user clicks on Close button. */
-    onClose?: (() => void) | undefined;
-    /** By default different banner types have different icons shown. If this flag is set, then no icon will be shown */
-    noIcon?: boolean | undefined;
-    /** Modifies margin of the banner for the cases when Banner stretches to full page width. */
-    fullWidth?: boolean | undefined;
-} & {
-    $type: string;
-    linkVisited: string;
-    linkFocused: string;
-}, never>;
-export declare const BannerCenterStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const BannerCloseButtonWrapperStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const BannerCloseButtonContainerStyles: import("styled-components").StyledComponent<"div", any, {
-    $type?: string | undefined;
-}, never>;
-export declare const BannerContentWrapperStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
-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. */
-    type?: 'warning' | 'critical' | 'positive' | 'neutral';
-    /** Link that will be shown after the children of the component. */
-    link?: string;
-    /** Text of the link */
-    linkText?: string;
-    /** If provided, then after user clicks on the link instead of following the link this method will be executed. */
-    linkAction?: (ev: React.MouseEvent) => void;
-    /** If set to true, then Banner will have 'margin-top' set to auto, and will render it at the bottom of the parent. */
-    bottom?: boolean;
-    /** For testing purposes. Will be set on top level container. */
-    testId?: string;
-    /** Icon to be shown instead of default icon on the left side of the Banner. */
-    icon?: React.ReactNode;
-    /** Callback event to be executed when user clicks on Close button. */
-    onClose?: () => void;
-    /** By default different banner types have different icons shown. If this flag is set, then no icon will be shown */
-    noIcon?: boolean;
-    /** Modifies margin of the banner for the cases when Banner stretches to full page width. */
-    fullWidth?: boolean;
-};
-/** Banner component is used as a middle-interrupting message to the user with zero to one actions. */
-declare const Banner: React.FunctionComponent<BannerProps>;
-export default Banner;

package/dist/src/Banners/Banner.js

@@ -1,112 +0,0 @@
-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

@@ -1,13 +0,0 @@
-import * as React from 'react';
-export declare const OverviewBannerWrapperStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const OverviewBannerContentStyles: import("styled-components").StyledComponent<"div", any, {
-    useMaxWidth?: boolean | undefined;
-    maxWidth?: number | undefined;
-    unsetMargin?: boolean | undefined;
-}, never>;
-export declare type OverviewBannerProps = {
-    children: any;
-    testId?: string;
-} & React.HTMLAttributes<HTMLDivElement>;
-declare const OverviewBanner: ({ children, testId, ...rest }: OverviewBannerProps) => React.JSX.Element;
-export default OverviewBanner;

package/dist/src/Banners/OverviewBanner.js

@@ -1,39 +0,0 @@
-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.d.ts

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

package/dist/src/Banners/index.js

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

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

@@ -1 +0,0 @@
-export declare const getButtonStyle: (type: string) => import("styled-components").FlattenSimpleInterpolation;

package/dist/src/Banners/styles.js

@@ -1,55 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { css } from 'styled-components';
-import { IconButtonStyledSecondary } from '../Button/Iconbutton';
-import { COLORS } from '../styles';
-export var getButtonStyle = function (type) {
-    var style = {
-        svgFill: COLORS.primary_500,
-        hoverBgColor: COLORS.primary_200,
-        hoverSvgFill: COLORS.primary_700,
-        activeBgColor: COLORS.primary_300,
-        activeSvgFill: COLORS.primary_800,
-        focusBgColor: COLORS.primary_200,
-        focusSvgFill: COLORS.primary_700
-    };
-    switch (type) {
-        case 'warning':
-            style = {
-                svgFill: COLORS.warning_500,
-                hoverBgColor: COLORS.warning_200,
-                hoverSvgFill: COLORS.warning_700,
-                activeBgColor: COLORS.warning_300,
-                activeSvgFill: COLORS.warning_800,
-                focusBgColor: COLORS.warning_200,
-                focusSvgFill: COLORS.warning_700
-            };
-            break;
-        case 'critical':
-            style = {
-                svgFill: COLORS.critical_600,
-                hoverBgColor: COLORS.critical_200,
-                hoverSvgFill: COLORS.critical_700,
-                activeBgColor: COLORS.critical_300,
-                activeSvgFill: COLORS.critical_800,
-                focusBgColor: COLORS.critical_200,
-                focusSvgFill: COLORS.critical_700
-            };
-            break;
-        case 'positive':
-            style = {
-                svgFill: COLORS.correct_500,
-                hoverBgColor: COLORS.correct_200,
-                hoverSvgFill: COLORS.correct_700,
-                activeBgColor: COLORS.correct_300,
-                activeSvgFill: COLORS.correct_800,
-                focusBgColor: COLORS.correct_200,
-                focusSvgFill: COLORS.correct_700
-            };
-            break;
-    }
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", " {\n    div {\n      background-color: transparent;\n    }\n    div svg path,\n    div svg {\n      fill: ", ";\n    }\n    &:hover:not(:disabled) {\n      div {\n        background-color: ", ";\n      }\n      div svg path,\n      div svg {\n        fill: ", ";\n      }\n    }\n    &:active:not(:disabled) {\n      div {\n        background: ", ";\n      }\n      div svg path,\n      div svg {\n        fill: ", ";\n      }\n    }\n  }"], ["\n    ", " {\n    div {\n      background-color: transparent;\n    }\n    div svg path,\n    div svg {\n      fill: ", ";\n    }\n    &:hover:not(:disabled) {\n      div {\n        background-color: ", ";\n      }\n      div svg path,\n      div svg {\n        fill: ", ";\n      }\n    }\n    &:active:not(:disabled) {\n      div {\n        background: ", ";\n      }\n      div svg path,\n      div svg {\n        fill: ", ";\n      }\n    }\n  }"])), IconButtonStyledSecondary, style.svgFill, style.hoverBgColor, style.hoverSvgFill, style.activeBgColor, style.activeSvgFill);
-};
-var templateObject_1;

package/dist/src/Breadcrumb/Breadcrumb.d.ts

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import { Size } from '..';
-import { BreadcrumbItem } from './BreadcrumbItem';
-export declare type BreadcrumbProps = React.HTMLAttributes<HTMLDivElement> & {
-    /** If set to false, then instead of 'Home' icon, link will be shown. Defaults to 'true' */
-    homeIcon?: boolean;
-    /** Label of the home link. Will be shown only if homeIcon is set to false. Defaults to 'Home' */
-    homeLabel?: string;
-    /** URL of the home link. Defaults to '/' */
-    homeUrl?: string;
-    /** Array of items to show. */
-    items?: BreadcrumbItem[];
-    /** Size of Breadcrumb component and items. Can be Small, Medium or XSmall. Defaults to 'Small' */
-    size?: Size.Small | Size.Medium | Size.XSmall;
-    /** Displays last item as label, and not as a link by default. */
-    lastItemAsLabel?: boolean;
-};
-/** Breadcrumbs is a list of links that help visualize a page's location within a site's hierarchical structure, it allows navigation up to any of the ancestors. */
-declare const Breadcrumb: React.FunctionComponent<BreadcrumbProps>;
-export default Breadcrumb;

package/dist/src/Breadcrumb/Breadcrumb.js

@@ -1,67 +0,0 @@
-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 { COLORS } from '../styles';
-import { Size, SystemIcons } from '..';
-import { useNavigate } from 'react-router';
-import { HyperLink, IconButton } from '..';
-import DropdownButton from '../Dropdown/DropdownButton';
-import { BreadcrumbContainerStyles, BreadcrumbItemLastStyles } from './styles';
-/** Breadcrumbs is a list of links that help visualize a page's location within a site's hierarchical structure, it allows navigation up to any of the ancestors. */
-var Breadcrumb = function (_a) {
-    var items = _a.items, _b = _a.size, size = _b === void 0 ? Size.Small : _b, _c = _a.homeIcon, homeIcon = _c === void 0 ? true : _c, _d = _a.homeLabel, homeLabel = _d === void 0 ? 'Home' : _d, _e = _a.lastItemAsLabel, lastItemAsLabel = _e === void 0 ? false : _e, _f = _a.homeUrl, homeUrl = _f === void 0 ? '/' : _f, rest = __rest(_a, ["items", "size", "homeIcon", "homeLabel", "lastItemAsLabel", "homeUrl"]);
-    var navigateHook = useNavigate();
-    var dropdownItems = items ? items.slice(0, items.length - 2).map(function (x) { return ({ value: x.url, displayLabel: x.label }); }) : [];
-    var navigate = function (links) {
-        navigateHook(links[0]);
-    };
-    var chevronSize = size == Size.Medium ? '24px' : size == Size.Small ? '20px' : '16px';
-    var renderChevron = function () { return (React.createElement("div", { "aria-hidden": "true" },
-        React.createElement(SystemIcons.ForwardSlash, { className: "chevronicon", color: COLORS.neutral_500, size: chevronSize }))); };
-    var renderBreadcrumbLinkItem = function (index, item) {
-        return (React.createElement(React.Fragment, null,
-            renderChevron(),
-            React.createElement(HyperLink, { id: 'link-item-' + index, onClick: function (e) {
-                    e.preventDefault();
-                    navigateHook(item.url);
-                }, target: "_self", variant: "default", href: item.url }, item.label)));
-    };
-    return (React.createElement(BreadcrumbContainerStyles, __assign({ size: size, "data-testid": 'breacrumbContainer' }, rest),
-        homeIcon ? (React.createElement(IconButton, { id: "homeIcon", variant: "secondary", shape: "circular", action: function () { return navigateHook(homeUrl); } },
-            React.createElement(SystemIcons.Home, { size: chevronSize }))) : (React.createElement(HyperLink, { id: 'homelink', variant: "default", href: homeUrl, onClick: function (e) {
-                e.preventDefault();
-                navigateHook(homeUrl);
-            } }, homeLabel)),
-        !!items &&
-            items.length > 2 &&
-            (items.length > 3 ? (React.createElement(React.Fragment, null,
-                renderChevron(),
-                React.createElement(DropdownButton, { type: 'icon', alignLeft: true, items: dropdownItems, size: size == Size.XSmall ? Size.Small : size, icon: React.createElement(SystemIcons.MoreHorizontal, { color: COLORS.neutral_600, size: "20px" }), onClick: navigate }))) : (React.createElement(React.Fragment, null, renderBreadcrumbLinkItem(items.length - 3, items[items.length - 3])))),
-        !!items && items.length > 1 && React.createElement(React.Fragment, null, renderBreadcrumbLinkItem(items.length - 2, items[items.length - 2])),
-        !!items && items.length > 0 && (React.createElement(React.Fragment, null, lastItemAsLabel ? (React.createElement(React.Fragment, null,
-            renderChevron(),
-            React.createElement(BreadcrumbItemLastStyles, { size: size }, items[items.length - 1].label))) : (React.createElement(React.Fragment, null,
-            renderBreadcrumbLinkItem(items.length - 1, items[items.length - 1]),
-            renderChevron()))))));
-};
-export default Breadcrumb;

package/dist/src/Breadcrumb/BreadcrumbItem.d.ts

@@ -1,6 +0,0 @@
-export interface BreadcrumbItem {
-    /** Label of the item */
-    label: string;
-    /** URL of the item link */
-    url: string;
-}

package/dist/src/Breadcrumb/BreadcrumbItem.js

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

package/dist/src/Breadcrumb/index.d.ts

@@ -1,4 +0,0 @@
-export { default as Breadcrumb } from './Breadcrumb';
-export * from './Breadcrumb';
-export * from './BreadcrumbItem';
-export * from './styles';

package/dist/src/Breadcrumb/index.js

@@ -1,4 +0,0 @@
-export { default as Breadcrumb } from './Breadcrumb';
-export * from './Breadcrumb';
-export * from './BreadcrumbItem';
-export * from './styles';

package/dist/src/Breadcrumb/styles.d.ts

@@ -1,7 +0,0 @@
-import { Size } from '../types';
-export declare const BreadcrumbItemLastStyles: import("styled-components").StyledComponent<"label", any, {
-    size: Size;
-}, never>;
-export declare const BreadcrumbContainerStyles: import("styled-components").StyledComponent<"div", any, {
-    size: Size | undefined;
-}, never>;

package/dist/src/Breadcrumb/styles.js

@@ -1,24 +0,0 @@
-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, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXXSStyling } from '../styles';
-import { Size } from '../types';
-var marginRight = function (size) {
-    return size == Size.Small || size == Size.Medium ? 'margin-right: 8px;' : 'margin-right: 4px;';
-};
-var FontStyles = function (size, textStyle, color) {
-    switch (size) {
-        case Size.XSmall:
-            return ComponentXXSStyling(textStyle, color);
-        case Size.Medium:
-            return ComponentMStyling(textStyle, color);
-        case Size.Small:
-        default:
-            return ComponentSStyling(textStyle, color);
-    }
-};
-export var BreadcrumbItemLastStyles = styled.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), function (props) { return FontStyles(props.size, ComponentTextStyle.Bold, COLORS.neutral_800); }, function (props) { return marginRight(props.size); });
-export var BreadcrumbContainerStyles = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  min-height: 48px;\n\n  a {\n    text-decoration: none;\n    ", "\n    ", "\n  }\n\n  .chevronicon {\n    ", "\n  }\n\n  a:hover {\n    color: ", ";\n  }\n  a:active {\n    color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  min-height: 48px;\n\n  a {\n    text-decoration: none;\n    ", "\n    ", "\n  }\n\n  .chevronicon {\n    ", "\n  }\n\n  a:hover {\n    color: ", ";\n  }\n  a:active {\n    color: ", ";\n  }\n"])), function (props) { return FontStyles(props.size, ComponentTextStyle.Regular, COLORS.neutral_600); }, function (props) { return marginRight(props.size); }, function (props) { return marginRight(props.size); }, COLORS.primary_700, COLORS.primary_800);
-var templateObject_1, templateObject_2;

package/dist/src/Button/BackButton.d.ts

@@ -1,15 +0,0 @@
-import * as React from 'react';
-import { Size, Testable } from '../types';
-export declare const BackButtonContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export interface BackButtonProps extends Testable, React.ButtonHTMLAttributes<HTMLButtonElement> {
-    /**
-   * Required. The size of the back button. Can be 'Small' or 'XSmall'.
-   */
-    size: Size.Small | Size.XSmall;
-    /**
-   * Optional. A boolean indicating whether the back button is disabled.
-   */
-    disabled?: boolean;
-}
-declare const BackButton: React.FunctionComponent<BackButtonProps>;
-export default BackButton;