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

package/dist/stories/Toast.stories.d.ts

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

package/dist/stories/Toast.stories.js

@@ -0,0 +1,294 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import styled from 'styled-components';
+import { Toast, ToastColor, Button, ToastContext, ToastPosition, ToastEntryDirection, ToastActionType, SystemIcons } from '../src/index';
+var meta = {
+    title: 'Components/Toast',
+    component: Toast,
+    decorators: [],
+    tags: ['autodocs'],
+    parameters: {},
+};
+export default meta;
+export var Primary = {
+    args: {
+        remove: function () { },
+        options: {
+            color: ToastColor.BLUE,
+            autoClose: true,
+            delay: 5000,
+            showCloseButton: false,
+            position: ToastPosition.TOPLEFT,
+            enterFrom: ToastEntryDirection.TOP,
+        },
+        content: 'This is content of the toast, can be a ReactNode',
+    },
+};
+export var ToastDemo = function () { return (React.createElement(React.Fragment, null,
+    "In order to render Toasts in your application, you need to wrap your app code with ",
+    '<ToastProvider>',
+    " ",
+    React.createElement("br", null),
+    "And call 'addToast' function from useToast hook. ",
+    React.createElement("br", null),
+    " ",
+    React.createElement("br", null),
+    React.createElement(Toast, { key: "a", remove: function () { }, options: {
+            color: ToastColor.BLACK,
+            position: ToastPosition.TOPMIDDLE,
+            icon: React.createElement(SystemIcons.Calendar, { size: "24px" }),
+        }, content: React.createElement("span", null,
+            "This is a warning ",
+            React.createElement("a", { href: '#', onClick: function (e) { return e.preventDefault(); } }, "Navigate to this link")) }),
+    React.createElement(Toast, { key: "b", remove: function () { }, options: {
+            color: ToastColor.WHITE,
+            position: ToastPosition.TOPMIDDLE,
+            icon: React.createElement(SystemIcons.Calendar, { size: "24px" }),
+        }, content: React.createElement("span", null,
+            "This is a warning ",
+            React.createElement("a", { href: '#', onClick: function (e) { return e.preventDefault(); } }, "Navigate to this link")) }),
+    React.createElement(Toast, { key: "c", remove: function () { }, options: {
+            color: ToastColor.BLUE,
+            position: ToastPosition.TOPMIDDLE,
+            icon: React.createElement(SystemIcons.Calendar, { size: "24px" }),
+        }, content: React.createElement("span", null,
+            "This is a warning ",
+            React.createElement("a", { href: '#', onClick: function (e) { return e.preventDefault(); } }, "Navigate to this link")) }),
+    React.createElement(Toast, { key: "d", remove: function () { }, options: {
+            color: ToastColor.GREEN,
+            position: ToastPosition.TOPMIDDLE,
+            icon: React.createElement(SystemIcons.Calendar, { size: "24px" }),
+        }, content: React.createElement("span", null,
+            "This is a warning ",
+            React.createElement("a", { href: '#', onClick: function (e) { return e.preventDefault(); } }, "Navigate to this link")) }),
+    React.createElement(Toast, { key: "e", remove: function () { }, options: {
+            color: ToastColor.ORANGE,
+            position: ToastPosition.TOPMIDDLE,
+            icon: React.createElement(SystemIcons.Calendar, { size: "24px" }),
+        }, content: React.createElement("span", null,
+            "This is a warning ",
+            React.createElement("a", { href: '#', onClick: function (e) { return e.preventDefault(); } }, "Navigate to this link")) }),
+    React.createElement(Toast, { key: "f", remove: function () { }, options: {
+            color: ToastColor.RED,
+            position: ToastPosition.TOPMIDDLE,
+            icon: React.createElement(SystemIcons.Calendar, { size: "24px" }),
+        }, content: React.createElement("span", null,
+            "This is a warning ",
+            React.createElement("a", { href: '#', onClick: function (e) { return e.preventDefault(); } }, "Navigate to this link")) }),
+    React.createElement(Toast, { key: "g", remove: function () { }, options: {
+            color: ToastColor.BLACK,
+            position: ToastPosition.TOPMIDDLE,
+            action: [
+                { label: 'Button', handler: function () { }, type: ToastActionType.SECONDARY },
+                { label: 'Button 2', handler: function () { } },
+            ],
+        }, content: "This is a warning" }),
+    React.createElement(Toast, { key: "h", remove: function () { }, options: {
+            color: ToastColor.WHITE,
+            position: ToastPosition.TOPMIDDLE,
+            action: [
+                { label: 'Button', handler: function () { }, type: ToastActionType.SECONDARY },
+                { label: 'Button 2', handler: function () { } },
+            ],
+        }, content: "This is a warning" }),
+    React.createElement(Toast, { key: "i", remove: function () { }, options: {
+            color: ToastColor.BLUE,
+            position: ToastPosition.TOPMIDDLE,
+            action: [
+                { label: 'Button', handler: function () { }, type: ToastActionType.SECONDARY },
+                { label: 'Button 2', handler: function () { } },
+            ],
+        }, content: "This is a warning" }),
+    React.createElement(Toast, { key: "j", remove: function () { }, options: {
+            color: ToastColor.GREEN,
+            position: ToastPosition.TOPMIDDLE,
+            action: [
+                { label: 'Button', handler: function () { }, type: ToastActionType.SECONDARY },
+                { label: 'Button 2', handler: function () { } },
+            ],
+        }, content: "This is a warning" }),
+    React.createElement(Toast, { key: "k", remove: function () { }, options: {
+            color: ToastColor.ORANGE,
+            position: ToastPosition.TOPMIDDLE,
+            action: [
+                { label: 'Button', handler: function () { }, type: ToastActionType.SECONDARY },
+                { label: 'Button 2', handler: function () { } },
+            ],
+        }, content: "This is a warning" }),
+    React.createElement(Toast, { key: "l", remove: function () { }, options: {
+            color: ToastColor.RED,
+            position: ToastPosition.TOPMIDDLE,
+            action: [
+                { label: 'Button', handler: function () { }, type: ToastActionType.SECONDARY },
+                { label: 'Button 2', handler: function () { } },
+            ],
+        }, content: "This is a warning" }),
+    React.createElement(Toast, { key: "m", remove: function () { }, options: {
+            color: ToastColor.BLACK,
+            position: ToastPosition.TOPMIDDLE,
+            action: [{ label: 'Button', handler: function () { } }],
+        }, content: "This is a warning" }),
+    React.createElement(Toast, { key: "n", remove: function () { }, options: {
+            color: ToastColor.WHITE,
+            position: ToastPosition.TOPMIDDLE,
+            action: [{ label: 'Button', handler: function () { } }],
+        }, content: "This is a warning" }),
+    React.createElement(Toast, { key: "o", remove: function () { }, options: {
+            color: ToastColor.BLUE,
+            position: ToastPosition.TOPMIDDLE,
+            action: [{ label: 'Button', handler: function () { } }],
+        }, content: "This is a warning" }),
+    React.createElement(Toast, { key: "p", remove: function () { }, options: {
+            color: ToastColor.GREEN,
+            position: ToastPosition.TOPMIDDLE,
+            action: [{ label: 'Button', handler: function () { } }],
+        }, content: "This is a warning" }),
+    React.createElement(Toast, { key: "q", remove: function () { }, options: {
+            color: ToastColor.ORANGE,
+            position: ToastPosition.TOPMIDDLE,
+            action: [{ label: 'Button', handler: function () { } }],
+        }, content: "This is a warning" }),
+    React.createElement(Toast, { key: "s", remove: function () { }, options: {
+            color: ToastColor.RED,
+            position: ToastPosition.TOPMIDDLE,
+            action: [{ label: 'Button', handler: function () { } }],
+        }, content: "This is a warning" }),
+    React.createElement(Toast, { key: "t", remove: function () { }, options: {
+            color: ToastColor.BLACK,
+            position: ToastPosition.TOPMIDDLE,
+            action: [{ label: 'Button', handler: function () { } }],
+            showCloseButton: true,
+            autoClose: false,
+        }, content: "This is a warning" }),
+    React.createElement(Toast, { key: "u", remove: function () { }, options: {
+            color: ToastColor.WHITE,
+            position: ToastPosition.TOPMIDDLE,
+            action: [{ label: 'Button', handler: function () { } }],
+            showCloseButton: true,
+            autoClose: false,
+        }, content: "This is a warning" }),
+    React.createElement(Toast, { key: "v", remove: function () { }, options: {
+            color: ToastColor.BLUE,
+            position: ToastPosition.TOPMIDDLE,
+            action: [{ label: 'Button', handler: function () { } }],
+            showCloseButton: true,
+            autoClose: false,
+        }, content: "This is a warning" }),
+    React.createElement(Toast, { key: "w", remove: function () { }, options: {
+            color: ToastColor.GREEN,
+            position: ToastPosition.TOPMIDDLE,
+            action: [{ label: 'Button', handler: function () { } }],
+            showCloseButton: true,
+            autoClose: false,
+        }, content: "This is a warning" }),
+    React.createElement(Toast, { key: "x", remove: function () { }, options: {
+            color: ToastColor.ORANGE,
+            position: ToastPosition.TOPMIDDLE,
+            action: [{ label: 'Button', handler: function () { } }],
+            showCloseButton: true,
+            autoClose: false,
+        }, content: "This is a warning" }),
+    React.createElement(Toast, { key: "y", remove: function () { }, options: {
+            color: ToastColor.RED,
+            position: ToastPosition.TOPMIDDLE,
+            action: [{ label: 'Button', handler: function () { } }],
+            showCloseButton: true,
+            autoClose: false,
+        }, content: "This is a warning" }))); };
+var ButtonWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: 20%;\n\n  button {\n    margin-top: 10px;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: 20%;\n\n  button {\n    margin-top: 10px;\n  }\n"])));
+export var ToastDemo2 = function () {
+    return React.createElement(React.Fragment, null, GetButtons());
+};
+var GetButtons = function () {
+    return (React.createElement(ToastContext.Consumer, null, function (_a) {
+        var addToast = _a.addToast;
+        return (React.createElement(ButtonWrapper, null,
+            "In order to render Toasts in your application, you need to wrap your app code with ",
+            '<ToastProvider>',
+            " ",
+            React.createElement("br", null),
+            "And call 'addToast' function from useToast hook. ",
+            React.createElement("br", null),
+            " ",
+            React.createElement("br", null),
+            React.createElement(Button, { onClick: function () {
+                    addToast('This toaster has a really really really really really really really really really really long text', {
+                        color: ToastColor.BLACK,
+                        action: [{ label: 'Button', handler: function () { } }],
+                        showCloseButton: true,
+                        autoClose: false,
+                        position: ToastPosition.TOPMIDDLE,
+                        enterFrom: ToastEntryDirection.TOP,
+                        icon: React.createElement(SystemIcons.Calendar, { size: "24px" }),
+                    });
+                    console.log('Pressed');
+                } }, "Activate multiline Black Toast"),
+            React.createElement(Button, { onClick: function () {
+                    addToast('This toaster has a really really long text like this one', {
+                        color: ToastColor.BLUE,
+                        action: [
+                            {
+                                label: 'Button',
+                                handler: function () {
+                                    console.log('Click!');
+                                },
+                            },
+                        ],
+                        showCloseButton: true,
+                        autoClose: true,
+                        position: ToastPosition.BOTTOMMIDDLE,
+                        enterFrom: ToastEntryDirection.BOTTOM,
+                    });
+                    console.log('Pressed');
+                } }, "Activate long Blue Toast"),
+            React.createElement(Button, { onClick: function () {
+                    addToast('Hei', {
+                        color: ToastColor.WHITE,
+                        action: [{ label: 'Button', handler: function () { } }],
+                        showCloseButton: true,
+                        autoClose: false,
+                        position: ToastPosition.TOPLEFT,
+                        enterFrom: ToastEntryDirection.LEFT,
+                    });
+                    console.log('Pressed');
+                } }, "Activate White Toast"),
+            React.createElement(Button, { onClick: function () {
+                    addToast('Hei', {
+                        color: ToastColor.RED,
+                        action: [{ label: 'Button', handler: function () { } }],
+                        showCloseButton: true,
+                        autoClose: false,
+                        position: ToastPosition.TOPRIGHT,
+                        enterFrom: ToastEntryDirection.RIGHT,
+                    });
+                    console.log('Pressed');
+                } }, "Activate Red Toast"),
+            React.createElement(Button, { onClick: function () {
+                    addToast('Hei', {
+                        color: ToastColor.ORANGE,
+                        action: [{ label: 'Button', handler: function () { } }],
+                        showCloseButton: true,
+                        autoClose: false,
+                        position: ToastPosition.TOPMIDDLE,
+                    });
+                    console.log('Pressed');
+                } }, "Activate Orange Toast"),
+            React.createElement(Button, { onClick: function () {
+                    addToast('Hei', {
+                        color: ToastColor.GREEN,
+                        action: [
+                            { label: 'Button', handler: function () { } },
+                            { label: 'Button', handler: function () { }, type: ToastActionType.SECONDARY },
+                        ],
+                        showCloseButton: true,
+                        autoClose: false,
+                        position: ToastPosition.TOPMIDDLE,
+                    });
+                    console.log('Pressed');
+                } }, "Activate Green Toast")));
+    }));
+};
+var templateObject_1;

package/dist/stories/ToggleButton.stories.d.ts

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

package/dist/stories/ToggleButton.stories.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { COLORS, InputLabel, SystemIcons, ToggleButton } from '../src/index';
+var meta = {
+    title: 'Components/Toggle/Button',
+    component: ToggleButton,
+    decorators: [],
+    tags: ['autodocs'],
+    parameters: {},
+};
+export default meta;
+export var Primary = {
+    args: {
+        active: false,
+        defaultState: { icon: React.createElement(SystemIcons.Pause, null), color: "#DD0000" },
+        activeState: { icon: React.createElement(SystemIcons.Play, null), color: "#00DD00" },
+    },
+};
+export var ToggleButtonDemo = function () {
+    return (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '24px' } },
+        React.createElement("div", null,
+            React.createElement(InputLabel, { inputId: '1', text: 'Generic toggle' }),
+            React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+                React.createElement(ToggleButton, { active: false, id: 'test1', defaultState: { icon: React.createElement(SystemIcons.PlayList, null) } }),
+                React.createElement(ToggleButton, { active: true, id: 'test2', defaultState: { icon: React.createElement(SystemIcons.PlayList, null) } }),
+                React.createElement(ToggleButton, { active: true, id: 'test3', disabled: true, defaultState: { icon: React.createElement(SystemIcons.PlayList, null) } }))),
+        React.createElement("div", null,
+            React.createElement(InputLabel, { inputId: '1', text: 'Volume on/off' }),
+            React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+                React.createElement(ToggleButton, { active: false, defaultState: { icon: React.createElement(SystemIcons.VolumeUp, null) }, activeState: { icon: React.createElement(SystemIcons.VolumeOff, null) } }),
+                React.createElement(ToggleButton, { active: true, defaultState: { icon: React.createElement(SystemIcons.VolumeUp, null) }, activeState: { icon: React.createElement(SystemIcons.VolumeOff, null) } }),
+                React.createElement(ToggleButton, { active: true, disabled: true, defaultState: { icon: React.createElement(SystemIcons.VolumeUp, null) }, activeState: { icon: React.createElement(SystemIcons.VolumeOff, null) } }))),
+        React.createElement("div", null,
+            React.createElement(InputLabel, { inputId: '1', text: 'Play/Pause' }),
+            React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+                React.createElement(ToggleButton, { active: false, defaultState: { icon: React.createElement(SystemIcons.Play, null) }, activeState: { icon: React.createElement(SystemIcons.Pause, null) } }),
+                React.createElement(ToggleButton, { active: true, defaultState: { icon: React.createElement(SystemIcons.Play, null) }, activeState: { icon: React.createElement(SystemIcons.Pause, null) } }),
+                React.createElement(ToggleButton, { active: true, disabled: true, defaultState: { icon: React.createElement(SystemIcons.Play, null) }, activeState: { icon: React.createElement(SystemIcons.Pause, null) } }))),
+        React.createElement("div", null,
+            React.createElement(InputLabel, { inputId: '1', text: 'Visibility on/off' }),
+            React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+                React.createElement(ToggleButton, { active: false, defaultState: { icon: React.createElement(SystemIcons.VisibleOn, null) }, activeState: { icon: React.createElement(SystemIcons.VisibleOff, null) } }),
+                React.createElement(ToggleButton, { active: true, defaultState: { icon: React.createElement(SystemIcons.VisibleOn, null) }, activeState: { icon: React.createElement(SystemIcons.VisibleOff, null) } }),
+                React.createElement(ToggleButton, { active: true, disabled: true, defaultState: { icon: React.createElement(SystemIcons.VisibleOn, null) }, activeState: { icon: React.createElement(SystemIcons.VisibleOff, null) } }))),
+        React.createElement("div", null,
+            React.createElement(InputLabel, { inputId: '1', text: 'Bookmark on/off' }),
+            React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+                React.createElement(ToggleButton, { active: false, defaultState: { icon: React.createElement(SystemIcons.BookmarkOff, null) }, activeState: { icon: React.createElement(SystemIcons.BookmarkOn, null) } }),
+                React.createElement(ToggleButton, { active: true, defaultState: { icon: React.createElement(SystemIcons.BookmarkOff, null) }, activeState: { icon: React.createElement(SystemIcons.BookmarkOn, null) } }),
+                React.createElement(ToggleButton, { active: true, disabled: true, defaultState: { icon: React.createElement(SystemIcons.BookmarkOff, null) }, activeState: { icon: React.createElement(SystemIcons.BookmarkOn, null) } }))),
+        React.createElement("div", null,
+            React.createElement(InputLabel, { inputId: '1', text: 'Lock on/off' }),
+            React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+                React.createElement(ToggleButton, { active: false, defaultState: { icon: React.createElement(SystemIcons.LockedOff, null) }, activeState: { icon: React.createElement(SystemIcons.LockedOn, null) } }),
+                React.createElement(ToggleButton, { active: true, defaultState: { icon: React.createElement(SystemIcons.LockedOff, null) }, activeState: { icon: React.createElement(SystemIcons.LockedOn, null) } }),
+                React.createElement(ToggleButton, { active: true, disabled: true, defaultState: { icon: React.createElement(SystemIcons.LockedOff, null) }, activeState: { icon: React.createElement(SystemIcons.LockedOn, null) } }))),
+        React.createElement("div", null,
+            React.createElement(InputLabel, { inputId: '1', text: 'Star on/off' }),
+            React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+                React.createElement(ToggleButton, { active: false, defaultState: { icon: React.createElement(SystemIcons.StarOutlined, null) }, activeState: { icon: React.createElement(SystemIcons.StarFilled, null), color: COLORS.primary_500 } }),
+                React.createElement(ToggleButton, { active: true, defaultState: { icon: React.createElement(SystemIcons.StarOutlined, null) }, activeState: { icon: React.createElement(SystemIcons.StarFilled, null), color: COLORS.primary_500 } }),
+                React.createElement(ToggleButton, { active: true, disabled: true, defaultState: { icon: React.createElement(SystemIcons.StarOutlined, null) }, activeState: { icon: React.createElement(SystemIcons.StarFilled, null), color: COLORS.primary_500 } }))),
+        React.createElement("div", null,
+            React.createElement(InputLabel, { inputId: '1', text: 'More on/off' }),
+            React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+                React.createElement(ToggleButton, { active: false, defaultState: { icon: React.createElement(SystemIcons.Plus, null) }, activeState: { icon: React.createElement(SystemIcons.Minus, null) } }),
+                React.createElement(ToggleButton, { active: true, defaultState: { icon: React.createElement(SystemIcons.Plus, null) }, activeState: { icon: React.createElement(SystemIcons.Minus, null) } }),
+                React.createElement(ToggleButton, { active: true, disabled: true, defaultState: { icon: React.createElement(SystemIcons.Plus, null) }, activeState: { icon: React.createElement(SystemIcons.Minus, null) } }))),
+        React.createElement("div", null,
+            React.createElement(InputLabel, { inputId: '1', text: 'Fullscreen on/off' }),
+            React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+                React.createElement(ToggleButton, { active: false, defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) }, activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) } }),
+                React.createElement(ToggleButton, { active: true, defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) }, activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) } }),
+                React.createElement(ToggleButton, { active: true, disabled: true, defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) }, activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) } })))));
+};

package/dist/stories/ToggleSwitch.stories.d.ts

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

package/dist/stories/ToggleSwitch.stories.js

@@ -0,0 +1,94 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React, { useReducer } from 'react';
+import { Size, ToggleSwitch } from '../src/index';
+var meta = {
+    title: 'Components/Toggle/Switch',
+    component: ToggleSwitch,
+    decorators: [],
+    tags: ['autodocs'],
+    parameters: {},
+};
+export default meta;
+export var Primary = {
+    args: {},
+};
+export var ToggleSwitchDemo = function () {
+    var _a = useReducer(reducer, initialSwitchState), state = _a[0], dispatch = _a[1];
+    return (React.createElement(React.Fragment, null,
+        React.createElement("h6", null, "Toggle Switches Without Label"),
+        React.createElement(ToggleSwitch, { id: "TogglerWithoutLabelNormal", selected: state.togglerWithoutLabelNormal, onToggle: function (state) { return dispatch({ type: 'togglerWithoutLabelNormal', payload: state }); } }),
+        React.createElement(ToggleSwitch, { id: "TogglerWithoutLabelNormalSelected", selected: state.togglerWithoutLabelNormalSelected, onToggle: function (state) { return dispatch({ type: 'togglerWithoutLabelNormalSelected', payload: state }); } }),
+        React.createElement(ToggleSwitch, { id: "TogglerWithoutLabelNormalDisabled", disabled: true, onToggle: function (state) { return console.log("Toggler state changed to ".concat(state)); } }),
+        React.createElement(ToggleSwitch, { id: "TogglerWithoutLabelNormalDisabledSelected", selected: true, disabled: true, onToggle: function (state) { return console.log("Toggler state changed to ".concat(state)); } }),
+        React.createElement("h6", null, "Toggle Switches With Label"),
+        React.createElement(ToggleSwitch, { id: "TogglerWithLabelNormal", selected: state.togglerWithLabelNormal, label: "Normal toggle switch that is turned off", onToggle: function (state) { return dispatch({ type: 'togglerWithLabelNormal', payload: state }); } }),
+        React.createElement(ToggleSwitch, { id: "TogglerWithLabelNormalSelected", selected: state.togglerWithLabelNormalSelected, label: "Normal toggle switch that is turned on", onToggle: function (state) { return dispatch({ type: 'togglerWithLabelNormalSelected', payload: state }); } }),
+        React.createElement(ToggleSwitch, { id: "TogglerWithLabelNormalDisabled", disabled: true, label: "Normal toggle switch that is disabled and turned off", onToggle: function (state) { return console.log("Toggler state changed to ".concat(state)); } }),
+        React.createElement(ToggleSwitch, { id: "TogglerWithLabelNormalDisabledSelected", selected: true, disabled: true, label: "Normal toggle switch that is disabled and turned on", onToggle: function (state) { return console.log("Toggler state changed to ".concat(state)); } }),
+        React.createElement("h6", null, "Semantic Toggle Switches Without Label"),
+        React.createElement(ToggleSwitch, { id: "TogglerWithoutLabelSemantic", isSemantic: true, selected: state.togglerWithoutLabelSemantic, onToggle: function (state) { return dispatch({ type: 'togglerWithoutLabelSemantic', payload: state }); } }),
+        React.createElement(ToggleSwitch, { id: "TogglerWithoutLabelSemanticSelected", selected: state.togglerWithoutLabelSemanticSelected, isSemantic: true, onToggle: function (state) { return dispatch({ type: 'togglerWithoutLabelSemanticSelected', payload: state }); } }),
+        React.createElement(ToggleSwitch, { id: "TogglerWithoutLabelSemanticDisabled", disabled: true, isSemantic: true, onToggle: function (state) { return console.log("Toggler state changed to ".concat(state)); } }),
+        React.createElement(ToggleSwitch, { id: "TogglerWithoutLabelSemanticDisabledSelected", selected: true, disabled: true, isSemantic: true, onToggle: function (state) { return console.log("Toggler state changed to ".concat(state)); } }),
+        React.createElement("h6", null, "Semantic Toggle Switches With Label"),
+        React.createElement(ToggleSwitch, { id: "TogglerWithLabelSemantic", label: "Semantic toggle switch that is turned off", isSemantic: true, selected: state.togglerWithLabelSemantic, onToggle: function (state) { return dispatch({ type: 'togglerWithLabelSemantic', payload: state }); } }),
+        React.createElement(ToggleSwitch, { id: "TogglerWithLabelSemanticSelected", selected: state.togglerWithLabelSemanticSelected, label: "Semantic toggle switch that is turned on", isSemantic: true, onToggle: function (state) { return dispatch({ type: 'togglerWithLabelSemanticSelected', payload: state }); } }),
+        React.createElement(ToggleSwitch, { id: "TogglerWithLabelSemanticDisabled", disabled: true, label: "Semantic toggle switch that is disabled and turned off", isSemantic: true, onToggle: function (state) { return console.log("Toggler state changed to ".concat(state)); } }),
+        React.createElement(ToggleSwitch, { id: "TogglerWithLabelSemanticDisabledSelected", selected: true, disabled: true, label: "Semantic toggle switch that is disabled and turned on", isSemantic: true, onToggle: function (state) { return console.log("Toggler state changed to ".concat(state)); } }),
+        React.createElement("h6", null, "Sizes"),
+        React.createElement(ToggleSwitch, { id: "smallTogglerWithoutLabelNormal", selected: state.smallTogglerWithoutLabelNormal, label: "Small toggle", size: Size.Small, onToggle: function (state) { return dispatch({ type: 'smallTogglerWithoutLabelNormal', payload: state }); } }),
+        React.createElement(ToggleSwitch, { id: "mediumTogglerWithoutLabelNormal", selected: state.mediumTogglerWithoutLabelNormal, label: "Medium toggle", size: Size.Medium, onToggle: function (state) { return dispatch({ type: 'mediumTogglerWithoutLabelNormal', payload: state }); } }),
+        React.createElement(ToggleSwitch, { id: "largeTogglerWithoutLabelNormal", selected: state.largeTogglerWithoutLabelNormal, label: "Large toggle", size: Size.Large, onToggle: function (state) { return dispatch({ type: 'largeTogglerWithoutLabelNormal', payload: state }); } })));
+};
+var initialSwitchState = {
+    togglerWithoutLabelNormal: false,
+    togglerWithoutLabelNormalSelected: true,
+    togglerWithLabelNormal: false,
+    togglerWithLabelNormalSelected: true,
+    togglerWithoutLabelSemantic: false,
+    togglerWithoutLabelSemanticSelected: true,
+    togglerWithLabelSemantic: false,
+    togglerWithLabelSemanticSelected: true,
+    smallTogglerWithoutLabelNormal: false,
+    mediumTogglerWithoutLabelNormal: false,
+    largeTogglerWithoutLabelNormal: false,
+};
+function reducer(state, action) {
+    var type = action.type, payload = action.payload;
+    switch (type) {
+        case 'togglerWithoutLabelNormal':
+            return __assign(__assign({}, state), { type: payload, togglerWithoutLabelNormal: payload });
+        case 'togglerWithoutLabelNormalSelected':
+            return __assign(__assign({}, state), { togglerWithoutLabelNormalSelected: payload });
+        case 'togglerWithLabelNormal':
+            return __assign(__assign({}, state), { togglerWithLabelNormal: payload });
+        case 'togglerWithLabelNormalSelected':
+            return __assign(__assign({}, state), { togglerWithLabelNormalSelected: payload });
+        case 'togglerWithoutLabelSemantic':
+            return __assign(__assign({}, state), { togglerWithoutLabelSemantic: payload });
+        case 'togglerWithoutLabelSemanticSelected':
+            return __assign(__assign({}, state), { togglerWithoutLabelSemanticSelected: payload });
+        case 'togglerWithLabelSemantic':
+            return __assign(__assign({}, state), { togglerWithLabelSemantic: payload });
+        case 'togglerWithLabelSemanticSelected':
+            return __assign(__assign({}, state), { togglerWithLabelSemanticSelected: payload });
+        case 'smallTogglerWithoutLabelNormal':
+            return __assign(__assign({}, state), { smallTogglerWithoutLabelNormal: payload });
+        case 'mediumTogglerWithoutLabelNormal':
+            return __assign(__assign({}, state), { mediumTogglerWithoutLabelNormal: payload });
+        case 'largeTogglerWithoutLabelNormal':
+            return __assign(__assign({}, state), { largeTogglerWithoutLabelNormal: payload });
+        default:
+            return null;
+    }
+}

package/dist/stories/Tooltip.stories.d.ts

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

package/dist/stories/Tooltip.stories.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import { TooltipWrapper } from '../src/index';
+import { Size } from '../src/index';
+import { Button, IconButton, SystemIcons } from '../src/index';
+var meta = {
+    title: 'Components/Tooltip',
+    component: TooltipWrapper,
+    decorators: [],
+    tags: ['autodocs'],
+    parameters: {},
+};
+export default meta;
+export var Primary = {
+    args: {
+        children: React.createElement(Button, null, "Hover me"),
+        label: 'Tooltip label'
+    },
+};
+export var TooltipDemo = function () { return (React.createElement(React.Fragment, null,
+    React.createElement("h6", null, "XSmall tooltips"),
+    React.createElement("div", { style: { paddingLeft: '150px', paddingRight: '150px' } },
+        React.createElement("div", { style: { display: 'flex', justifyContent: 'space-around', marginTop: '30px', marginBottom: '30px' } },
+            React.createElement(TooltipWrapper, { size: Size.XSmall, align: "start", trigger: 'click', position: "top", withArrow: true, label: "Top start (arrow)" },
+                React.createElement(IconButton, { variant: "primary", shape: "circular", action: function () { return console.log('Icon button pressed'); } },
+                    React.createElement(SystemIcons.Language, { size: "24px" }))),
+            React.createElement(TooltipWrapper, { size: Size.XSmall, align: "center", position: "top", label: "Top center (no arrow)" },
+                React.createElement(IconButton, { variant: "primary", shape: "circular", action: function () { return console.log('Icon button pressed'); } },
+                    React.createElement(SystemIcons.GearSettings, { size: "24px" }))),
+            React.createElement(TooltipWrapper, { size: Size.XSmall, align: "end", position: "top", label: "Top end (no arrow)" },
+                React.createElement(IconButton, { variant: "primary", shape: "circular", action: function () { return console.log('Icon button pressed'); } },
+                    React.createElement(SystemIcons.GridView, { size: "24px" })))),
+        React.createElement("div", { style: { display: 'flex', justifyContent: 'space-around', marginBottom: '30px' } },
+            React.createElement(TooltipWrapper, { size: Size.XSmall, position: "left", withArrow: true, label: "Left (arrow)" }, "Placeholder"),
+            React.createElement("div", { style: { width: '84px' } }),
+            React.createElement(TooltipWrapper, { size: Size.XSmall, position: "right", withArrow: true, label: "Right (arrow)" }, "Placeholder")),
+        React.createElement("div", { style: { display: 'flex', justifyContent: 'space-around', marginBottom: '30px' } },
+            React.createElement(TooltipWrapper, { size: Size.XSmall, align: "start", position: "bottom", label: "Bottom start (no arrow)" },
+                React.createElement(Button, null, "Click me")),
+            React.createElement(TooltipWrapper, { size: Size.XSmall, align: "center", withArrow: true, position: "bottom", label: "Bottom center (arrow)" },
+                React.createElement(Button, null, "Click me")),
+            React.createElement(TooltipWrapper, { size: Size.XSmall, align: "end", withArrow: true, position: "bottom", label: "Bottom end (arrow)" },
+                React.createElement(Button, null, "Click me")))),
+    React.createElement("h6", null, "Small tooltips"),
+    React.createElement("div", { style: { paddingLeft: '150px', paddingRight: '150px' } },
+        React.createElement("div", { style: { display: 'flex', justifyContent: 'space-around', marginTop: '30px', marginBottom: '30px' } },
+            React.createElement(TooltipWrapper, { size: Size.Small, align: "start", position: "top", withArrow: true, label: "Top start (arrow)" },
+                React.createElement(IconButton, { variant: "primary", shape: "circular", action: function () { return console.log('Icon button pressed'); } },
+                    React.createElement(SystemIcons.Language, { size: "24px" }))),
+            React.createElement(TooltipWrapper, { size: Size.Small, withArrow: true, align: "center", position: "top", label: "Top center" },
+                React.createElement(IconButton, { variant: "primary", shape: "circular", action: function () { return console.log('Icon button pressed'); } },
+                    React.createElement(SystemIcons.GearSettings, { size: "24px" }))),
+            React.createElement(TooltipWrapper, { size: Size.Small, withArrow: true, align: "end", position: "top", label: "Top end" },
+                React.createElement(IconButton, { variant: "primary", shape: "circular", action: function () { return console.log('Icon button pressed'); } },
+                    React.createElement(SystemIcons.GridView, { size: "24px" })))),
+        React.createElement("div", { style: { display: 'flex', justifyContent: 'space-around', marginBottom: '30px' } },
+            React.createElement(TooltipWrapper, { size: Size.Small, position: "left", withArrow: true, label: "Left (arrow)" }, "Placeholder"),
+            React.createElement("div", { style: { width: '84px' } }),
+            React.createElement(TooltipWrapper, { size: Size.Small, position: "right", withArrow: true, label: "Right (arrow)" }, "Placeholder")),
+        React.createElement("div", { style: { display: 'flex', justifyContent: 'space-around', marginBottom: '30px' } },
+            React.createElement(TooltipWrapper, { size: Size.Small, align: "start", position: "bottom", label: "Bottom start (no arrow)" },
+                React.createElement(Button, null, "Click me")),
+            React.createElement(TooltipWrapper, { size: Size.Small, align: "center", withArrow: true, position: "bottom", label: "Bottom center (arrow)" },
+                React.createElement(Button, null, "Click me")),
+            React.createElement(TooltipWrapper, { size: Size.Small, align: "end", withArrow: true, position: "bottom", label: "Bottom end (arrow)" },
+                React.createElement(Button, null, "Click me")))),
+    React.createElement("h6", null, "Medium tooltips"),
+    React.createElement("div", { style: { paddingLeft: '150px', paddingRight: '150px' } },
+        React.createElement("div", { style: { display: 'flex', justifyContent: 'space-around', marginTop: '30px', marginBottom: '30px' } },
+            React.createElement(TooltipWrapper, { size: Size.Medium, align: "start", position: "top", withArrow: true, label: "Top start (arrow)" },
+                React.createElement(IconButton, { variant: "primary", shape: "circular", action: function () { return console.log('Icon button pressed'); } },
+                    React.createElement(SystemIcons.Language, { size: "24px" }))),
+            React.createElement(TooltipWrapper, { size: Size.Medium, align: "center", position: "top", label: "Top center (no arrow)" },
+                React.createElement(IconButton, { variant: "primary", shape: "circular", action: function () { return console.log('Icon button pressed'); } },
+                    React.createElement(SystemIcons.GearSettings, { size: "24px" }))),
+            React.createElement(TooltipWrapper, { size: Size.Medium, align: "end", position: "top", label: "Top end (no arrow)" },
+                React.createElement(IconButton, { variant: "primary", shape: "circular", action: function () { return console.log('Icon button pressed'); } },
+                    React.createElement(SystemIcons.GridView, { size: "24px" })))),
+        React.createElement("div", { style: { display: 'flex', justifyContent: 'space-around', marginBottom: '30px' } },
+            React.createElement(TooltipWrapper, { size: Size.Medium, position: "left", withArrow: true, label: "Left (arrow)" }, "Placeholder"),
+            React.createElement("div", { style: { width: '84px' } }),
+            React.createElement(TooltipWrapper, { size: Size.Medium, position: "right", withArrow: true, label: "Right (arrow)" }, "Placeholder")),
+        React.createElement("div", { style: { display: 'flex', justifyContent: 'space-around', marginBottom: '30px' } },
+            React.createElement(TooltipWrapper, { size: Size.Medium, align: "start", position: "bottom", label: "Bottom start (no arrow)" },
+                React.createElement(Button, null, "Click me")),
+            React.createElement(TooltipWrapper, { size: Size.Medium, align: "center", withArrow: true, position: "bottom", label: "Bottom center (arrow)" },
+                React.createElement(Button, null, "Click me")),
+            React.createElement(TooltipWrapper, { size: Size.Medium, align: "end", withArrow: true, position: "bottom", label: "Bottom end (arrow)" },
+                React.createElement(Button, null, "Click me")))))); };