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

package/dist/stories/AuthPage.stories.js

@@ -0,0 +1,88 @@
+import React, { useEffect } from 'react';
+import AuthPage from '../src/AuthPage/AuthPage';
+import image from './assets/PlaceholderModalImage.png';
+export default {
+    title: 'Components/AuthPage',
+    component: AuthPage,
+    decorators: [function (Story) { return React.createElement("div", { style: { width: '100%', height: '100vh', margin: '-1rem' } },
+            React.createElement(Story, null)); }]
+};
+var SingInPanel = {
+    media: {
+        type: 'image',
+        src: image,
+        alt: 'Sign in',
+    },
+    title: 'Welcome to Laerdal',
+    content: 'Sign in with your account'
+};
+var SignUpPanel = {
+    media: {
+        type: 'image',
+        src: image,
+        alt: 'Sign up',
+    },
+    title: 'One account. All of Laerdal.',
+    content: 'Register to get instant access to a collection of complimentary scenarios.'
+};
+export var AuthPageDemo = function () {
+    var _a = React.useState(SingInPanel), panel = _a[0], setPanel = _a[1];
+    useEffect(function () {
+        var _a;
+        // @ts-ignore
+        (_a = window === null || window === void 0 ? void 0 : window.gigya) === null || _a === void 0 ? void 0 : _a.accounts.showScreenSet({
+            screenSet: 'Default-RegistrationLogin',
+            containerID: 'gigya-container',
+            startScreen: 'gigya-login-screen',
+            context: {
+                onBeforeScreenLoadFn: function (event) {
+                    if (event.screen === 'gigya-register-screen') {
+                        setPanel(SignUpPanel);
+                    }
+                    else {
+                        setPanel(SingInPanel);
+                    }
+                }
+            }
+        });
+    }, []);
+    return (React.createElement(AuthPage, { screenSetsContainerId: 'gigya-container', panel: panel }));
+};
+export var AuthPageReverseDemo = function () {
+    var _a = React.useState(SingInPanel), panel = _a[0], setPanel = _a[1];
+    useEffect(function () {
+        var _a;
+        // @ts-ignore
+        (_a = window === null || window === void 0 ? void 0 : window.gigya) === null || _a === void 0 ? void 0 : _a.accounts.showScreenSet({
+            screenSet: 'Default-RegistrationLogin',
+            containerID: 'gigya-container',
+            startScreen: 'gigya-login-screen',
+            context: {
+                onBeforeScreenLoadFn: function (event) {
+                    if (event.screen === 'gigya-register-screen') {
+                        setPanel(SignUpPanel);
+                    }
+                    else {
+                        setPanel(SingInPanel);
+                    }
+                }
+            }
+        });
+    }, []);
+    return (React.createElement(AuthPage, { order: 'reverse', screenSetsContainerId: 'gigya-container', panel: panel }));
+};
+export var AuthPageCarouselDemo = function () {
+    useEffect(function () {
+        var _a;
+        // @ts-ignore
+        (_a = window === null || window === void 0 ? void 0 : window.gigya) === null || _a === void 0 ? void 0 : _a.accounts.showScreenSet({
+            screenSet: 'Default-RegistrationLogin',
+            containerID: 'gigya-container',
+            startScreen: 'gigya-login-screen',
+        });
+    }, []);
+    return (React.createElement(AuthPage, { screenSetsContainerId: 'gigya-container', panel: {
+            type: 'carousel',
+            items: [SingInPanel, SignUpPanel, SingInPanel, SignUpPanel]
+        } }));
+};

package/dist/stories/Banner.stories.d.ts

@@ -4,7 +4,7 @@ import Banner from '../src/Banners/Banner';
 import { Size } from '../src/types';
 declare const meta: Meta<typeof Banner>;
 export default meta;
-type Story = StoryObj<typeof Banner>;
+declare type Story = StoryObj<typeof Banner>;
 export declare const Primary: Story;
 export declare const HeaderItemDemo: () => React.JSX.Element;
 export declare const BannerWithCustomAction: (size: Size.Small | Size.Medium | Size.Large) => React.JSX.Element;

package/dist/stories/Banner.stories.js

@@ -0,0 +1,107 @@
+import React, { useState } from 'react';
+import ModalDialog from '../src/Modals/ModalDialog';
+import Banner from '../src/Banners/Banner';
+import { Size } from '../src/types';
+import { SystemIcons } from '../src/icons';
+var meta = {
+    title: 'Components/Banner',
+    component: Banner,
+    tags: ['autodocs'],
+    args: {
+        size: Size.Small,
+        type: 'warning'
+    },
+    parameters: {}
+};
+export default meta;
+export var Primary = {
+    args: {
+        size: Size.Medium,
+        children: React.createElement(React.Fragment, null, "Dummy text set as child of Banner component")
+    },
+};
+export var HeaderItemDemo = function () { return (React.createElement("div", { style: { display: 'flex', flexDirection: 'column' } },
+    React.createElement("div", { style: { width: '400px', display: 'flex', flexDirection: 'column', gap: '16px' } },
+        React.createElement("p", null,
+            React.createElement("b", null, "ARIA (Accessibility Rich Internet Aplication) NOTE:"),
+            " ",
+            React.createElement("br", null),
+            "You can associate content with a banner by pointing at the banner's id from that other content with aria-details (from ARIA 1.3 not yet finished) or aria-describedby (only takes the text nodes)."),
+        React.createElement("h6", null, "Small"),
+        React.createElement(Banner, { type: "warning", onClose: function () { return console.log('Banner closed'); }, size: Size.Small }, "This is a warning message that is very very very very long and it will expand over multiple lines in a small banner"),
+        React.createElement(Banner, { type: "critical", onClose: function () { return console.log('Banner closed'); }, size: Size.Small }, "This is critical"),
+        React.createElement(Banner, { type: "positive", bottom: true, size: Size.Small }, "This is positive banner without close button"),
+        React.createElement(Banner, { type: "neutral", onClose: function () { return console.log('Banner closed'); }, size: Size.Small }, "This is neutral"),
+        React.createElement(Banner, { link: "https://laerdal.force.com/HelpCenter/s/", linkText: "Help Center", type: "warning", onClose: function () { return console.log('Banner closed'); }, size: Size.Small }, "This is warning with link that is very very very long"),
+        React.createElement(Banner, { icon: React.createElement(SystemIcons.ShoppingCart, { size: "24px" }), type: "neutral", onClose: function () { return console.log('Banner closed'); }, size: Size.Small }, "Banner with custom icon"),
+        React.createElement(Banner, { type: "neutral", noIcon: true, onClose: function () { return console.log('Banner closed'); }, size: Size.Small }, "Banner without icon"),
+        BannerWithCustomAction(Size.Small)),
+    React.createElement("div", { style: { width: '768px', display: 'flex', flexDirection: 'column', gap: '16px' } },
+        React.createElement("h6", null, "Medium"),
+        React.createElement(Banner, { type: "warning", onClose: function () { return console.log('Banner closed'); }, size: Size.Medium }, "This is a warning"),
+        React.createElement(Banner, { type: "critical", onClose: function () { return console.log('Banner closed'); }, size: Size.Medium }, "This is critical"),
+        React.createElement(Banner, { type: "positive", bottom: true, size: Size.Medium }, "This is positive banner without close button"),
+        React.createElement(Banner, { type: "neutral", onClose: function () { return console.log('Banner closed'); }, size: Size.Medium }, "This is neutral"),
+        React.createElement(Banner, { link: "https://laerdal.force.com/HelpCenter/s/", linkText: "Help Center", type: "warning", onClose: function () { return console.log('Banner closed'); }, size: Size.Medium }, "This is warning with link"),
+        React.createElement(Banner, { icon: React.createElement(SystemIcons.ShoppingCart, { size: "24px" }), type: "neutral", onClose: function () { return console.log('Banner closed'); }, size: Size.Medium }, "Banner with custom icon"),
+        React.createElement(Banner, { type: "neutral", noIcon: true, onClose: function () { return console.log('Banner closed'); }, size: Size.Medium }, "Banner without icon"),
+        BannerWithCustomAction(Size.Medium)),
+    React.createElement("div", { style: { width: '992px', display: 'flex', flexDirection: 'column', gap: '16px' } },
+        React.createElement("h6", null, "Large"),
+        React.createElement(Banner, { type: "warning", onClose: function () { return console.log('Banner closed'); }, size: Size.Large }, "This is a warning"),
+        React.createElement(Banner, { type: "critical", onClose: function () { return console.log('Banner closed'); }, size: Size.Large }, "This is critical"),
+        React.createElement(Banner, { type: "positive", bottom: true, size: Size.Large }, "This is positive banner without close button"),
+        React.createElement(Banner, { type: "neutral", onClose: function () { return console.log('Banner closed'); }, size: Size.Large }, "This is neutral"),
+        React.createElement(Banner, { link: "https://laerdal.force.com/HelpCenter/s/", linkText: "Help Center", type: "warning", onClose: function () { return console.log('Banner closed'); }, size: Size.Large }, "This is warning with link"),
+        React.createElement(Banner, { icon: React.createElement(SystemIcons.ShoppingCart, { size: "24px" }), type: "neutral", onClose: function () { return console.log('Banner closed'); }, size: Size.Large }, "Banner with custom icon"),
+        React.createElement(Banner, { type: "neutral", noIcon: true, onClose: function () { return console.log('Banner closed'); }, size: Size.Large }, "Banner without icon"),
+        BannerWithCustomAction(Size.Large)))); };
+export var BannerWithCustomAction = function (size) {
+    var _a = useState(false), modalOpen = _a[0], setModalOpen = _a[1];
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Banner, { link: "#", linkText: "Open info dialog", linkAction: function (ev) {
+                setModalOpen(true);
+            }, type: "warning", size: size }, "Header with custom link action"),
+        React.createElement(ModalDialog, { key: "testDialog", size: size, title: 'Header', isModalOpen: modalOpen, closeAction: function () { return setModalOpen(false); }, submitAction: function () { }, buttons: [
+                {
+                    action: function () {
+                        setModalOpen(false);
+                    },
+                    text: 'Close',
+                    variant: 'tertiary',
+                },
+            ] }, "Some info text")));
+};
+export var FullWidthBanners = function () { return (React.createElement("div", { style: { display: 'flex', flexDirection: 'column' } },
+    React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px' } },
+        React.createElement("p", null,
+            React.createElement("b", null, "ARIA (Accessibility Rich Internet Aplication) NOTE:"),
+            " ",
+            React.createElement("br", null),
+            "You can associate content with a banner by pointing at the banner's id from that other content with aria-details (from ARIA 1.3 not yet finished) or aria-describedby (only takes the text nodes)."),
+        React.createElement("h6", null, "Small"),
+        React.createElement(Banner, { type: "warning", onClose: function () { return console.log('Banner closed'); }, size: Size.Small, fullWidth: true }, "This is a warning message that is very very very very long and it will expand over multiple lines in a small banner"),
+        React.createElement(Banner, { type: "critical", onClose: function () { return console.log('Banner closed'); }, size: Size.Small, fullWidth: true }, "This is critical"),
+        React.createElement(Banner, { type: "positive", bottom: true, size: Size.Small, fullWidth: true }, "This is positive banner without close button"),
+        React.createElement(Banner, { type: "neutral", onClose: function () { return console.log('Banner closed'); }, size: Size.Small, fullWidth: true }, "This is neutral"),
+        React.createElement(Banner, { link: "https://laerdal.force.com/HelpCenter/s/", linkText: "Help Center", type: "warning", onClose: function () { return console.log('Banner closed'); }, size: Size.Small, fullWidth: true }, "This is warning with link that is very very very long"),
+        React.createElement(Banner, { icon: React.createElement(SystemIcons.ShoppingCart, { size: "24px" }), type: "neutral", onClose: function () { return console.log('Banner closed'); }, size: Size.Small, fullWidth: true }, "Banner with custom icon"),
+        React.createElement(Banner, { type: "neutral", noIcon: true, onClose: function () { return console.log('Banner closed'); }, size: Size.Small, fullWidth: true }, "Banner without icon")),
+    React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px' } },
+        React.createElement("h6", null, "Medium"),
+        React.createElement(Banner, { type: "warning", onClose: function () { return console.log('Banner closed'); }, size: Size.Medium, fullWidth: true }, "This is a warning"),
+        React.createElement(Banner, { type: "critical", onClose: function () { return console.log('Banner closed'); }, size: Size.Medium, fullWidth: true }, "This is critical"),
+        React.createElement(Banner, { type: "positive", bottom: true, size: Size.Medium, fullWidth: true }, "This is positive banner without close button"),
+        React.createElement(Banner, { type: "neutral", onClose: function () { return console.log('Banner closed'); }, size: Size.Medium, fullWidth: true }, "This is neutral"),
+        React.createElement(Banner, { link: "https://laerdal.force.com/HelpCenter/s/", linkText: "Help Center", type: "warning", onClose: function () { return console.log('Banner closed'); }, size: Size.Medium, fullWidth: true }, "This is warning with link"),
+        React.createElement(Banner, { icon: React.createElement(SystemIcons.ShoppingCart, { size: "24px" }), type: "neutral", onClose: function () { return console.log('Banner closed'); }, size: Size.Medium, fullWidth: true }, "Banner with custom icon"),
+        React.createElement(Banner, { type: "neutral", noIcon: true, onClose: function () { return console.log('Banner closed'); }, size: Size.Medium, fullWidth: true }, "Banner without icon")),
+    React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px' } },
+        React.createElement("h6", null, "Large"),
+        React.createElement(Banner, { type: "warning", onClose: function () { return console.log('Banner closed'); }, size: Size.Large, fullWidth: true }, "This is a warning"),
+        React.createElement(Banner, { type: "critical", onClose: function () { return console.log('Banner closed'); }, size: Size.Large, fullWidth: true }, "This is critical"),
+        React.createElement(Banner, { type: "positive", bottom: true, size: Size.Large, fullWidth: true }, "This is positive banner without close button"),
+        React.createElement(Banner, { type: "neutral", onClose: function () { return console.log('Banner closed'); }, size: Size.Large, fullWidth: true }, "This is neutral"),
+        React.createElement(Banner, { link: "https://laerdal.force.com/HelpCenter/s/", linkText: "Help Center", type: "warning", onClose: function () { return console.log('Banner closed'); }, size: Size.Large, fullWidth: true }, "This is warning with link"),
+        React.createElement(Banner, { icon: React.createElement(SystemIcons.ShoppingCart, { size: "24px" }), type: "neutral", onClose: function () { return console.log('Banner closed'); }, size: Size.Large, fullWidth: true }, "Banner with custom icon"),
+        React.createElement(Banner, { type: "neutral", noIcon: true, onClose: function () { return console.log('Banner closed'); }, size: Size.Large, fullWidth: true }, "Banner without icon")))); };

package/dist/stories/Breadcrumb.stories.d.ts

@@ -3,6 +3,6 @@ import Breadcrumb from '../src/Breadcrumb/Breadcrumb';
 import { Meta, StoryObj } from "@storybook/react/*";
 declare const meta: Meta<typeof Breadcrumb>;
 export default meta;
-type Story = StoryObj<typeof Breadcrumb>;
+declare type Story = StoryObj<typeof Breadcrumb>;
 export declare const Primary: Story;
 export declare const BreadcrumbItemDemo: () => React.JSX.Element;

package/dist/stories/Breadcrumb.stories.js

@@ -0,0 +1,151 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import Breadcrumb from '../src/Breadcrumb/Breadcrumb';
+import COLORS from '../src/styles/colors';
+import { Size } from '../src/types';
+import styled from 'styled-components';
+var meta = {
+    title: 'Components/Breadcrumb',
+    component: Breadcrumb,
+    decorators: [],
+    tags: ['autodocs'],
+    parameters: {},
+};
+export default meta;
+var twoLevelsItems = [
+    { label: 'Level 1', url: '/products' },
+    { label: 'Level 2', url: '/products/1' },
+];
+var multiLevels = [
+    { label: 'Level 1', url: '/products' },
+    { label: 'Level 2', url: '/products/1' },
+    { label: 'Level 3', url: '/products/1/details' },
+];
+export var Primary = {
+    args: {
+        items: multiLevels
+    },
+};
+var BreadcrumbHeader = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n  border-bottom: solid 1px black;\n  padding-bottom: 8px;\n  margin: 20px 0 20px 0;\n"], ["\n  color: ", ";\n  border-bottom: solid 1px black;\n  padding-bottom: 8px;\n  margin: 20px 0 20px 0;\n"])), COLORS.black);
+var oneLevel = [{ label: 'Level 1', url: '/products' }];
+var usedropdownLevels = [
+    { label: 'Level 1', url: '/products' },
+    { label: 'Level 2', url: '/products/2' },
+    { label: 'Level 3', url: '/products/1' },
+    { label: 'Level 4', url: '/products/1/details' },
+];
+var BreadcrumbDemoContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-evenly;\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-evenly;\n"])));
+var BreadcrumbInstanceContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  min-height: 36px;\n"], ["\n  min-height: 36px;\n"])));
+export var BreadcrumbItemDemo = function () { return (React.createElement(BreadcrumbDemoContainer, null,
+    React.createElement("div", { style: { display: 'flex', flexDirection: 'column' } },
+        React.createElement(BreadcrumbHeader, null, "XSmall with home as icon"),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.XSmall, items: oneLevel })),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.XSmall, items: multiLevels })),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.XSmall, items: twoLevelsItems })),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.XSmall, items: usedropdownLevels })),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { lastItemAsLabel: true, size: Size.XSmall, items: oneLevel })),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.XSmall, lastItemAsLabel: true, items: twoLevelsItems })),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.XSmall, lastItemAsLabel: true, items: multiLevels })),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.XSmall, lastItemAsLabel: true, items: usedropdownLevels })),
+        React.createElement("br", null),
+        React.createElement(BreadcrumbHeader, null, "XSmall with home as label"),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.XSmall, homeIcon: false, items: oneLevel })),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.XSmall, homeIcon: false, items: twoLevelsItems })),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.XSmall, homeIcon: false, items: multiLevels })),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.XSmall, homeIcon: false, items: usedropdownLevels })),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.XSmall, lastItemAsLabel: true, homeIcon: false, items: oneLevel })),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.XSmall, lastItemAsLabel: true, homeIcon: false, items: twoLevelsItems })),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.XSmall, lastItemAsLabel: true, homeIcon: false, items: multiLevels })),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.XSmall, lastItemAsLabel: true, homeIcon: false, items: usedropdownLevels }))),
+    React.createElement("div", { style: { display: 'flex', flexDirection: 'column' } },
+        React.createElement(BreadcrumbHeader, null, "Small with home as icon"),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.Small, items: oneLevel })),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.Small, items: twoLevelsItems })),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.Small, items: multiLevels })),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.Small, items: usedropdownLevels })),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { lastItemAsLabel: true, size: Size.Small, items: oneLevel })),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.Small, lastItemAsLabel: true, items: twoLevelsItems })),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.Small, lastItemAsLabel: true, items: multiLevels })),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.Small, lastItemAsLabel: true, items: usedropdownLevels })),
+        React.createElement("br", null),
+        React.createElement(BreadcrumbHeader, null, "Small with home as label"),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.Small, homeIcon: false, items: oneLevel })),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.Small, homeIcon: false, items: twoLevelsItems })),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.Small, homeIcon: false, items: multiLevels })),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.Small, homeIcon: false, items: usedropdownLevels })),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.Small, lastItemAsLabel: true, homeIcon: false, items: oneLevel })),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.Small, lastItemAsLabel: true, homeIcon: false, items: twoLevelsItems })),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.Small, lastItemAsLabel: true, homeIcon: false, items: multiLevels })),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.Small, lastItemAsLabel: true, homeIcon: false, items: usedropdownLevels }))),
+    React.createElement("div", { style: { display: 'flex', flexDirection: 'column' } },
+        React.createElement(BreadcrumbHeader, null, "Medium with home as icon"),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.Medium, items: oneLevel })),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.Medium, items: twoLevelsItems })),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.Medium, items: multiLevels })),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.Medium, items: usedropdownLevels })),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { lastItemAsLabel: true, size: Size.Medium, items: oneLevel })),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.Medium, lastItemAsLabel: true, items: twoLevelsItems })),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.Medium, lastItemAsLabel: true, items: multiLevels })),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.Medium, lastItemAsLabel: true, items: usedropdownLevels })),
+        React.createElement("br", null),
+        React.createElement(BreadcrumbHeader, null, "Medium with home as label"),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.Medium, homeIcon: false, items: oneLevel })),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.Medium, homeIcon: false, items: twoLevelsItems })),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.Medium, homeIcon: false, items: multiLevels })),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.Medium, homeIcon: false, items: usedropdownLevels })),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.Medium, lastItemAsLabel: true, homeIcon: false, items: oneLevel })),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.Medium, lastItemAsLabel: true, homeIcon: false, items: twoLevelsItems })),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.Medium, lastItemAsLabel: true, homeIcon: false, items: multiLevels })),
+        React.createElement(BreadcrumbInstanceContainer, null,
+            React.createElement(Breadcrumb, { size: Size.Medium, lastItemAsLabel: true, homeIcon: false, items: usedropdownLevels }))))); };
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -3,6 +3,6 @@ import type { Meta, StoryObj } from '@storybook/react';
 import BackButton from '../../src/Button/BackButton';
 declare const meta: Meta<typeof BackButton>;
 export default meta;
-type Story = StoryObj<typeof BackButton>;
+declare type Story = StoryObj<typeof BackButton>;
 export declare const Primary: Story;
 export declare const BackButtonDemo: () => React.JSX.Element;

package/dist/stories/Button/BackButton.stories.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import BackButton from '../../src/Button/BackButton';
+import { Size } from '../../src/types';
+var meta = {
+    title: 'Components/Button/BackButton',
+    component: BackButton,
+    tags: ['autodocs']
+};
+export default meta;
+export var Primary = {
+    args: {
+        children: 'Label'
+    }
+};
+export var BackButtonDemo = function () { return (React.createElement(React.Fragment, null,
+    React.createElement("h3", null, "Back Button"),
+    React.createElement("div", { style: { display: 'grid', gridTemplateColumns: 'auto auto auto auto auto' } },
+        React.createElement("h6", null, "Normal"),
+        React.createElement("h6", null, "Hover"),
+        React.createElement("h6", null, "Pressed"),
+        React.createElement("h6", null, "Disabled"),
+        React.createElement("h6", null, "Focus"),
+        React.createElement(BackButton, { size: Size.Small, onClick: function () { return console.log('Back to page clicked'); } }, "Back to page"),
+        React.createElement(BackButton, { size: Size.Small, className: "hover-state" }, "Back to page"),
+        React.createElement(BackButton, { size: Size.Small, className: "active-state" }, "Back to page"),
+        React.createElement(BackButton, { size: Size.Small, disabled: true }, "Back to page"),
+        React.createElement(BackButton, { size: Size.Small, className: "focus-state" }, "Back to page"),
+        React.createElement(BackButton, { size: Size.XSmall }, "Back to page"),
+        React.createElement(BackButton, { size: Size.XSmall, className: "hover-state" }, "Back to page"),
+        React.createElement(BackButton, { size: Size.XSmall, className: "active-state" }, "Back to page"),
+        React.createElement(BackButton, { size: Size.XSmall, disabled: true }, "Back to page"),
+        React.createElement(BackButton, { size: Size.XSmall, className: "focus-state" }, "Back to page")))); };

package/dist/stories/Button/Button.stories.d.ts

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Button from '../../src/Button/Button';
 declare const meta: Meta<typeof Button>;
 export default meta;
-type Story = StoryObj<typeof Button>;
+declare type Story = StoryObj<typeof Button>;
 export declare const Primary: Story;
 export declare const TextButtonDemo: () => React.JSX.Element;
 export declare const TextButtonStates: () => React.JSX.Element;