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

package/dist/stories/Icon.stories.js

@@ -0,0 +1,86 @@
+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 { ContentIcons, SystemIcons } from '../src/index';
+import COLORS from '../src/styles/colors';
+import { UpperCase } from '../src/styles/typography';
+export default {
+    title: 'Components/Icons',
+    decorators: [],
+    parameter: {},
+};
+var IconContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n"])));
+var SystemIconWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1 0 %15;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n  transition: 0.3s;\n  width: 15%;\n  height: 80px;\n  text-align: center;\n  padding: 30px 10px 10px 10px;\n  border: 1px solid ", ";\n  border-radius: 5px;\n  margin-right: 10px;\n  margin-bottom: 10px;\n  &:hover {\n    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);\n  }\n  svg {\n  }\n  .container {\n    padding-top: 30px;\n    &.small {\n      padding-top: 14px;\n    }\n  }\n"], ["\n  flex: 1 0 %15;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n  transition: 0.3s;\n  width: 15%;\n  height: 80px;\n  text-align: center;\n  padding: 30px 10px 10px 10px;\n  border: 1px solid ", ";\n  border-radius: 5px;\n  margin-right: 10px;\n  margin-bottom: 10px;\n  &:hover {\n    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);\n  }\n  svg {\n  }\n  .container {\n    padding-top: 30px;\n    &.small {\n      padding-top: 14px;\n    }\n  }\n"])), COLORS.neutral_20);
+var ContentIconWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: 1 0 %15;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n  transition: 0.3s;\n  width: 15%;\n  height: 80px;\n  text-align: center;\n  padding: 10px 10px 10px 10px;\n  border: 1px solid ", ";\n  border-radius: 5px;\n  margin-right: 10px;\n  margin-bottom: 10px;\n  &:hover {\n    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);\n  }\n  svg {\n  }\n  .container {\n    padding-top: 5px;\n    &.small {\n      padding-top: 14px;\n    }\n  }\n"], ["\n  flex: 1 0 %15;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n  transition: 0.3s;\n  width: 15%;\n  height: 80px;\n  text-align: center;\n  padding: 10px 10px 10px 10px;\n  border: 1px solid ", ";\n  border-radius: 5px;\n  margin-right: 10px;\n  margin-bottom: 10px;\n  &:hover {\n    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);\n  }\n  svg {\n  }\n  .container {\n    padding-top: 5px;\n    &.small {\n      padding-top: 14px;\n    }\n  }\n"])), COLORS.neutral_20);
+var IconWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n  transition: 0.3s;\n  width: 15%;\n  text-align: center;\n  padding: 16px 8px 8px 8px;\n  border: 1px solid ", ";\n  border-radius: 5px;\n  margin-right: 10px;\n  margin-bottom: 10px;\n  &:hover {\n    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);\n  }\n  svg {\n  }\n"], ["\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n  transition: 0.3s;\n  width: 15%;\n  text-align: center;\n  padding: 16px 8px 8px 8px;\n  border: 1px solid ", ";\n  border-radius: 5px;\n  margin-right: 10px;\n  margin-bottom: 10px;\n  &:hover {\n    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);\n  }\n  svg {\n  }\n"])), COLORS.neutral_20);
+export var IconsDemo = function () {
+    return (React.createElement("div", null,
+        React.createElement(UpperCase, null, "Notes about icons"),
+        React.createElement("p", null, "Icons may be displayed in any color. When using icons to express state, do not use color alone for this."),
+        React.createElement("p", null,
+            "For more details, check: ",
+            React.createElement("a", { href: "https://www.w3.org/WAI/WCAG21/Understanding/use-of-color" }, "https://www.w3.org/WAI/WCAG21/Understanding/use-of-color")),
+        React.createElement("p", null, "Each icon has a default accessible name, and an image role included in the SVG asset. Default accessible names are in ENGLISH. This means that all instances of these icons (including as button labels) will inherit those names."),
+        React.createElement("p", null, "This has consequences for internationalisation. In some instances, we will want to suppress the role. (e.g. wrap it with aria-hidden=\"true\")"),
+        React.createElement(IconContainer, null,
+            React.createElement(IconWrapper, null,
+                React.createElement("div", { style: { marginBottom: '16px', color: COLORS.neutral_600 } }, "Default system icon 24px"),
+                React.createElement(SystemIcons.Attachment, null)),
+            React.createElement(IconWrapper, null,
+                React.createElement("div", { style: { marginBottom: '16px', color: COLORS.neutral_600 } }, "System icon with color 24px"),
+                React.createElement(SystemIcons.Attachment, { color: COLORS.accent1_600 })),
+            React.createElement(IconWrapper, null,
+                React.createElement("div", { style: { marginBottom: '16px', color: COLORS.neutral_600 } }, "Sized system icon 32px"),
+                React.createElement(SystemIcons.Attachment, { size: '32' })),
+            React.createElement(IconWrapper, null,
+                React.createElement("div", { style: { marginBottom: '16px', color: COLORS.neutral_600 } }, "With color and tooltip 32px"),
+                React.createElement(SystemIcons.Attachment, { size: '32', color: COLORS.accent1_600, label: "Custom label" }))),
+        React.createElement(IconContainer, null,
+            React.createElement(IconWrapper, null,
+                React.createElement("div", { style: { marginBottom: '16px', color: COLORS.neutral_600 } }, "Default content icon 32px"),
+                React.createElement(ContentIcons.DefribilatorMonitor, null)),
+            React.createElement(IconWrapper, null,
+                React.createElement("div", { style: { marginBottom: '16px', color: COLORS.neutral_600 } }, "Content icon with color 32px"),
+                React.createElement(ContentIcons.DefribilatorMonitor, { color: COLORS.warning_400 })),
+            React.createElement(IconWrapper, null,
+                React.createElement("div", { style: { marginBottom: '16px', color: COLORS.neutral_600 } }, "Sized content icon 48px"),
+                React.createElement(ContentIcons.DefribilatorMonitor, { size: '48' })),
+            React.createElement(IconWrapper, null,
+                React.createElement("div", { style: { marginBottom: '16px', color: COLORS.neutral_600 } }, "With color and tooltip 48px"),
+                React.createElement(ContentIcons.DefribilatorMonitor, { size: '48', color: COLORS.warning_400, label: "Custom label" })))));
+};
+export var SystemIconsGallery = function () {
+    return (React.createElement("div", null,
+        React.createElement("h5", null, "System icons"),
+        React.createElement("ul", null,
+            React.createElement("li", null, "The smallest icons in Life."),
+            React.createElement("li", null, "They are mostly used for UI elements like buttons, on their own or together with text."),
+            React.createElement("li", null, "The icons are square SVGs readymade for implementation."),
+            React.createElement("li", null, "Their minimum size is 16x16 px and can be scaled up proportionally. ")),
+        React.createElement(IconContainer, null, Object.keys(SystemIcons).map(function (key, index) {
+            if (key == "LoadingSmall" || key == "LoadingMedium")
+                return React.createElement(React.Fragment, null);
+            var iconkey = key;
+            var Icon = SystemIcons[iconkey];
+            return (React.createElement(SystemIconWrapper, { key: index },
+                React.createElement(Icon, { size: "24px", label: key }),
+                React.createElement("div", { className: "container", color: COLORS.neutral_300 }, key)));
+        }))));
+};
+export var ContentIconsGallery = function () { return (React.createElement("div", null,
+    React.createElement("h5", null, "Content icons"),
+    React.createElement("ul", null,
+        React.createElement("li", null, "The large single-color icons."),
+        React.createElement("li", null, "They are mostly used as illustrative icons for supporting text and decoration."),
+        React.createElement("li", null, "Their minimum size is 32x32 px and can be scaled up proportionally. ")),
+    React.createElement(IconContainer, null, Object.keys(ContentIcons).map(function (key, index) {
+        var iconkey = key;
+        var Icon = ContentIcons[iconkey];
+        return (React.createElement(ContentIconWrapper, { key: index },
+            React.createElement(Icon, null),
+            React.createElement("div", { className: "container", color: COLORS.neutral_300 }, key)));
+    })))); };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/stories/InputFields/CheckboxDemo.stories.d.ts

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

package/dist/stories/InputFields/CheckboxDemo.stories.js

@@ -0,0 +1,63 @@
+import { Checkbox, HyperLink, InputLabel, Size } from "../../src/index";
+import React from "react";
+var meta = {
+    title: 'Components/InputFields/Checkbox',
+    component: Checkbox,
+    decorators: [],
+    tags: ['autodocs'],
+    parameters: {},
+};
+export default meta;
+export var Primary = {
+    args: {},
+};
+export var CheckboxDemoStories = function () { return (React.createElement(React.Fragment, null,
+    React.createElement("h3", null, "Checkbox input"),
+    React.createElement("p", null, "Allows for multiple selection."),
+    React.createElement("h6", null, "States"),
+    React.createElement("div", { style: { width: '400px' } },
+        React.createElement(InputLabel, { inputId: "DemoCheckbox", text: "Unchecked" }),
+        React.createElement(Checkbox, { id: "DemoCheckbox", selected: false, select: function () {
+                console.log('click');
+            } },
+            "This is a uncheckedsa das das kdas kdaks dakls dakls",
+            ' ',
+            React.createElement(HyperLink, { variant: 'default', href: '#', onClick: function (event) { return event.preventDefault(); } }, "dakls daks"),
+            ' ',
+            "dakls dklsadngfsdg fnsalkd gfasjd fkjasdfjkasdfakj checkbox"),
+        React.createElement(InputLabel, { inputId: "DemoCheckbox2", text: "Checked" }),
+        React.createElement(Checkbox, { id: "DemoCheckbox2", selected: true, select: function () {
+                console.log('click');
+            }, label: "This is a checked checkbox" }),
+        React.createElement(InputLabel, { inputId: "DemoCheckboxInvalid", text: "Invalid" }),
+        React.createElement(Checkbox, { id: "DemoCheckboxInvalid", invalid: true, selected: false, select: function () {
+                console.log('click');
+            } }, "This is a checkbox with invalid"),
+        React.createElement(InputLabel, { inputId: "DemoCheckboxDisabled", text: "Disabled false" }),
+        React.createElement(Checkbox, { id: "DemoCheckboxDisabled", disabled: true, selected: false, select: function () {
+                console.log('click');
+            }, label: "This is a disabled checkbox" }),
+        React.createElement(InputLabel, { inputId: "DemoCheckboxDisabledTrue", text: "Disabled true" }),
+        React.createElement(Checkbox, { id: "DemoCheckboxDisabledTrue", disabled: true, selected: true, select: function () {
+                console.log('click');
+            }, label: "This is a disabled true checkbox" })),
+    React.createElement("h6", null, "Sizes"),
+    React.createElement("div", null,
+        React.createElement(InputLabel, { inputId: "DemoCheckboxSmall", text: "Small" }),
+        React.createElement(Checkbox, { id: "DemoCheckbox", size: Size.Small, selected: true, select: function () {
+                console.log('click');
+            }, label: "This is a small checkbox" }),
+        React.createElement(InputLabel, { inputId: "DemoCheckboxMedium", text: "Checked" }),
+        React.createElement(Checkbox, { id: "DemoCheckboxMedium", size: Size.Medium, selected: true, select: function () {
+                console.log('click');
+            }, label: "This is a medium checkbox" }),
+        React.createElement(InputLabel, { inputId: "DemoCheckboxLarge", text: "Invalid" }),
+        React.createElement(Checkbox, { id: "DemoCheckboxLarge", size: Size.Large, selected: true, select: function () {
+                console.log('click');
+            }, label: "This is a large checkbox" })),
+    React.createElement("h6", null, "Semi Selected"),
+    React.createElement("div", null,
+        React.createElement(InputLabel, { inputId: "DemoCheckboxSemiSelected", text: "Semi Selected" }),
+        React.createElement(Checkbox, { id: "DemoCheckbox", selected: false, semiSelected: true, select: function () {
+                console.log('click');
+            }, label: "This is a semi-selected checkbox" })))); };

package/dist/stories/InputFields/ChipInputField.stories.d.ts

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

package/dist/stories/InputFields/ChipInputField.stories.js

@@ -0,0 +1,195 @@
+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, { useState } from "react";
+import { ChipDropdownInput, ChipInput, InputLabel, Size, States, SystemIcons } from "../../src/index";
+var meta = {
+    title: 'Components/InputFields/ChipInput',
+    component: ChipDropdownInput,
+    tags: ['autodocs'],
+    parameters: {},
+};
+export default meta;
+export var Primary = {
+    args: {
+        list: ["Item1", "Item2", "Item3"],
+        values: []
+    },
+};
+var otherList = [
+    { label: 'Label 1', value: 'Value 1' },
+    { label: 'Label 2', value: 'Value 2' },
+    { label: 'Label 3', value: 'Value 3' },
+    { label: 'Label 4', value: 'Value 4' },
+    { label: 'Label 5', value: 'Value 5' },
+    { label: 'Label 6', value: 'Value 6' },
+];
+var secondaryList = [
+    { label: 'Label 1', value: 'Value 1', secondaryLabel: 'Secondary 1' },
+    { label: 'Label 2', value: 'Value 2', secondaryLabel: 'Secondary 2' },
+    { label: 'Label 3', value: 'Value 3' },
+];
+var regex = /\S+@\S+\.\S+/;
+export var ChipInputFieldStories = function () {
+    var _a = useState(''), suggestion = _a[0], setSuggestion = _a[1];
+    var _b = useState([
+        ['Base'],
+        ['Base'],
+        ['Base'],
+        ['Base'],
+        ['Base'],
+        ['Base'],
+        ['Base'],
+        ['Base'],
+        ['Base'],
+        ['Base'],
+        ['Base'],
+        ['Base'],
+        ['Base'],
+        ['Base'],
+        ['Base'],
+        ['Base'],
+    ]), values = _b[0], setValues = _b[1];
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { style: { display: 'flex', gap: '32px' } },
+            React.createElement("div", { style: { width: '500px', display: 'flex', flexDirection: 'column', gap: '12px' } },
+                React.createElement("h6", { style: { margin: '0' } }, "Small"),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: 'test3', text: 'Chip dropdown input with dropdown' }),
+                    React.createElement(ChipDropdownInput, { inputId: "test3", icon: React.createElement(SystemIcons.User, null), list: secondaryList, size: Size.Small, values: values[0], onValueChange: function (input) {
+                            console.log(input);
+                            setValues(__assign(__assign({}, values), { 0: input }));
+                        }, placeholder: "Search by name or email", altPlaceholder: "Add more", messageOnNoResults: "No results found" })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: 'test6', text: 'Chip dropdown input with max selected items' }),
+                    React.createElement(ChipDropdownInput, { inputId: "test6", icon: React.createElement(SystemIcons.User, null), list: otherList, values: values[1], onValueChange: function (input) {
+                            console.log(input);
+                            setValues(__assign(__assign({}, values), { 1: input }));
+                        }, placeholder: "Search by name or email", altPlaceholder: "Add more", maxSelectedItems: 2, size: Size.Small, messageOnNoResults: "No results found" })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: 'test3', text: 'Chip dropdown input with suggested item with email validation' }),
+                    React.createElement(ChipDropdownInput, { inputId: "test4", suggestion: suggestion
+                            ? {
+                                label: suggestion,
+                                value: suggestion,
+                                icon: React.createElement(SystemIcons.Mail, null),
+                                secondaryLabel: 'Suggested item',
+                                disabled: !regex.test(suggestion),
+                            }
+                            : undefined, icon: React.createElement(SystemIcons.User, null), list: secondaryList, values: values[2], onValueChange: function (input) {
+                            console.log(input);
+                            setValues(__assign(__assign({}, values), { 2: input }));
+                        }, size: Size.Small, placeholder: "Search by name or email", altPlaceholder: "Add more", messageOnNoResults: "No results found", onInputChange: setSuggestion })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: 'test3', text: 'Chip dropdown input disabled' }),
+                    React.createElement(ChipDropdownInput, { inputId: "test4", suggestion: suggestion
+                            ? {
+                                label: suggestion,
+                                value: suggestion,
+                                icon: React.createElement(SystemIcons.Mail, null),
+                                secondaryLabel: 'Suggested item',
+                                disabled: !regex.test(suggestion),
+                            }
+                            : undefined, icon: React.createElement(SystemIcons.User, null), list: secondaryList, values: values[3], onValueChange: function (input) {
+                            console.log(input);
+                            setValues(__assign(__assign({}, values), { 3: input }));
+                        }, size: Size.Small, disabled: true, placeholder: "Search by name or email", altPlaceholder: "Add more", messageOnNoResults: "No results found", onInputChange: setSuggestion })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "emails", text: "Chip input" }),
+                    React.createElement(ChipInput, { icon: React.createElement(SystemIcons.Team, null), size: Size.Small, inputId: "emails", values: values[4], onValueChange: function (input) {
+                            console.log(input);
+                            setValues(__assign(__assign({}, values), { 4: input }));
+                        }, placeholder: "Search by name or email", altPlaceholder: "Add more" })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "emails-invalid", text: "Chip input with invalid" }),
+                    React.createElement(ChipInput, { icon: React.createElement(SystemIcons.Team, null), multiLine: false, size: Size.Small, inputId: "emails-invalid", variants: [States.Invalid], values: values[5], onValueChange: function (input) {
+                            console.log(input);
+                            setValues(__assign(__assign({}, values), { 5: input }));
+                        }, placeholder: "Search by name or email", altPlaceholder: "Add more", validationMessage: "user is not a valid e-mail address" })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "disabled", text: "Disabled chip input" }),
+                    React.createElement(ChipInput, { icon: React.createElement(SystemIcons.Team, null), multiLine: false, size: Size.Small, inputId: "disabled", values: values[6], onValueChange: function (input) {
+                            console.log(input);
+                            setValues(__assign(__assign({}, values), { 6: input }));
+                        }, disabled: true, placeholder: "Search by name or email", altPlaceholder: "Add more" })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: 'test6', text: 'Chip dropdown with loading indicator' }),
+                    React.createElement(ChipDropdownInput, { inputId: "test6", icon: React.createElement(SystemIcons.User, null), list: otherList, values: values[7], onValueChange: function (input) {
+                            console.log(input);
+                            setValues(__assign(__assign({}, values), { 7: input }));
+                        }, loading: true, placeholder: "Search by name or email", altPlaceholder: "Add more", size: Size.Small, messageOnNoResults: "No results found" }))),
+            React.createElement("div", { style: { width: '500px', display: 'flex', flexDirection: 'column', gap: '12px' } },
+                React.createElement("h6", { style: { margin: '0' } }, "Medium"),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: 'test3', text: 'Chip dropdown input with dropdown' }),
+                    React.createElement(ChipDropdownInput, { inputId: "test3", icon: React.createElement(SystemIcons.User, null), list: secondaryList, size: Size.Medium, values: values[8], onValueChange: function (input) {
+                            console.log(input);
+                            setValues(__assign(__assign({}, values), { 8: input }));
+                        }, placeholder: "Search by name or email", altPlaceholder: "Add more", messageOnNoResults: "No results found" })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: 'test6', text: 'Chip dropdown input with max selected items' }),
+                    React.createElement(ChipDropdownInput, { inputId: "test6", icon: React.createElement(SystemIcons.User, null), list: otherList, values: values[9], onValueChange: function (input) {
+                            console.log(input);
+                            setValues(__assign(__assign({}, values), { 9: input }));
+                        }, placeholder: "Search by name or email", altPlaceholder: "Add more", maxSelectedItems: 2, size: Size.Medium, messageOnNoResults: "No results found" })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: 'test3', text: 'Chip dropdown input with suggested item with email validation' }),
+                    React.createElement(ChipDropdownInput, { inputId: "test4", suggestion: suggestion
+                            ? {
+                                label: suggestion,
+                                value: suggestion,
+                                secondaryLabel: 'Suggested item',
+                                icon: React.createElement(SystemIcons.Mail, null),
+                                disabled: !/\S+@\S+\.\S+/.test(suggestion),
+                            }
+                            : undefined, icon: React.createElement(SystemIcons.User, null), list: secondaryList, values: values[10], onValueChange: function (input) {
+                            console.log(input);
+                            setValues(__assign(__assign({}, values), { 10: input }));
+                        }, size: Size.Medium, placeholder: "Search by name or email", altPlaceholder: "Add more", messageOnNoResults: "No results found", onInputChange: setSuggestion })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: 'test3', text: 'Chip dropdown input with suggested item with email validation' }),
+                    React.createElement(ChipDropdownInput, { inputId: "test4", suggestion: suggestion
+                            ? {
+                                label: suggestion,
+                                value: suggestion,
+                                secondaryLabel: 'Suggested item',
+                                icon: React.createElement(SystemIcons.Mail, null),
+                                disabled: !/\S+@\S+\.\S+/.test(suggestion),
+                            }
+                            : undefined, icon: React.createElement(SystemIcons.User, null), list: secondaryList, disabled: true, values: values[11], onValueChange: function (input) {
+                            console.log(input);
+                            setValues(__assign(__assign({}, values), { 11: input }));
+                        }, size: Size.Medium, placeholder: "Search by name or email", altPlaceholder: "Add more", messageOnNoResults: "No results found", onInputChange: setSuggestion })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "emails", text: "Chip input" }),
+                    React.createElement(ChipInput, { icon: React.createElement(SystemIcons.Team, null), size: Size.Medium, inputId: "emails", values: values[12], onValueChange: function (input) {
+                            console.log(input);
+                            setValues(__assign(__assign({}, values), { 12: input }));
+                        }, placeholder: "Search by name or email", altPlaceholder: "Add more" })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "emails-invalid", text: "Chip input with invalid" }),
+                    React.createElement(ChipInput, { icon: React.createElement(SystemIcons.Team, null), multiLine: false, size: Size.Medium, inputId: "emails-invalid", variants: [States.Invalid], values: values[13], onValueChange: function (input) {
+                            console.log(input);
+                            setValues(__assign(__assign({}, values), { 13: input }));
+                        }, placeholder: "Search by name or email", altPlaceholder: "Add more", validationMessage: "user is not a valid e-mail address" })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "disabled", text: "Chip input disabled" }),
+                    React.createElement(ChipInput, { icon: React.createElement(SystemIcons.Team, null), multiLine: false, size: Size.Medium, inputId: "disabled", values: values[14], onValueChange: function (input) {
+                            console.log(input);
+                            setValues(__assign(__assign({}, values), { 14: input }));
+                        }, disabled: true, placeholder: "Search by name or email", altPlaceholder: "Add more" })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: 'test6', text: 'Chip dropdown with loading indicator' }),
+                    React.createElement(ChipDropdownInput, { inputId: "test6", icon: React.createElement(SystemIcons.User, null), list: otherList, values: values[15], onValueChange: function (input) {
+                            console.log(input);
+                            setValues(__assign(__assign({}, values), { 15: input }));
+                        }, loading: true, placeholder: "Search by name or email", altPlaceholder: "Add more", size: Size.Medium, messageOnNoResults: "No results found" }))))));
+};

package/dist/stories/InputFields/DatepickerDemo.stories.d.ts

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

package/dist/stories/InputFields/DatepickerDemo.stories.js

@@ -0,0 +1,54 @@
+import React, { useState } from "react";
+import { DatepickerField, InputLabel } from "../../src/index";
+var meta = {
+    title: 'Components/InputFields/Datepicker',
+    component: DatepickerField,
+    tags: ['autodocs'],
+    parameters: {
+        docs: { story: {
+                height: '500px'
+            } },
+    },
+};
+export default meta;
+export var Primary = {
+    args: {
+        value: new Date(),
+        onChange: function (date) { }
+    },
+};
+var pastDate = new Date();
+pastDate.setTime(new Date().getTime() - 10000000000);
+var now = new Date();
+export var DatepickerDemoStories = function () {
+    var _a = useState(new Date()), dateValue = _a[0], setDateValue = _a[1];
+    return React.createElement("div", { style: { display: '-ms-grid', flexDirection: 'row', gap: '32px' } },
+        React.createElement("h3", null, "Date picker demo"),
+        React.createElement("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', padding: '0px 0px 32px' } },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', width: '320px', gap: '8px' } },
+                React.createElement("h5", null, "Medium"),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "DemoDatepicker", text: "Default Datepicker" }),
+                    React.createElement(DatepickerField, { id: "DemoDatepicker", dataTestId: "SomeCustomDataTestId", placeholder: "This is a datepicker", onChange: function (value) { return console.log('Selected new date', value); } })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "DemoDatepickerQuarterPicker", text: "Default Quarterpicker" }),
+                    React.createElement(DatepickerField, { showQuarterYearPicker: true, id: "DemoDatepicker_QuarterPicker", value: dateValue, dataTestId: "SomeCustomDataTestIdQuarterPicker", placeholder: "This is a quarter datepicker", onChange: function (value) { return setDateValue(value); } })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "DemoDatepickerRequired", text: "Required Datepicker" }),
+                    React.createElement(DatepickerField, { id: "DemoDatepickerRequired", required: true, placeholder: "This is a required datepicker", onChange: function (value) { return console.log('Selected new date', value); } })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "DemoDatepickerDisabled", text: "Disabled Datepicker" }),
+                    React.createElement(DatepickerField, { id: "DemoDatepickerDisabled", disabled: true, placeholder: "This is a disabled datepicker", onChange: function (value) { return console.log('Selected new date', value); } })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "DemoDatepickerReadOnly", text: "Read only Datepicker" }),
+                    React.createElement(DatepickerField, { id: "DemoDatepickerReadOnly", readOnly: true, placeholder: "This is a read only datepicker", onChange: function (value) { return console.log('Selected new date', value); } })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "DemoDatepickerInvalid", text: "Invalid Datepicker" }),
+                    React.createElement(DatepickerField, { id: "DemoDatepickerInvalid", placeholder: "This is an invalid datepicker", invalid: true, validationMessage: "Datepicker value must be a date in the future", onChange: function (value) { return console.log('Selected new date', value); }, value: pastDate })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "DemoDatepickerCustomFormat", text: "Custom Date Format Datepicker" }),
+                    React.createElement(DatepickerField, { id: "DemoDatepickerCustomFormat", value: now, dateFormat: "MMMM D, YYYY", onChange: function (value) { return console.log('Selected new date', value); } })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "DemoDatepickerCustomFormat", text: "With year selector" }),
+                    React.createElement(DatepickerField, { id: "DemoDatepickerCustomFormat", value: dateValue, yearPicker: true, onChange: function (value) { return setDateValue(value); } })))));
+};

package/dist/stories/InputFields/FormDemo.stories.js

@@ -0,0 +1,47 @@
+import { Button, Checkbox, DropdownFilter, InputLabel, RadioButton, Size, TextField } from "../../src/index";
+import React from "react";
+export default {
+    title: 'Components/InputFields/Form',
+    component: InputLabel,
+    decorators: [],
+    parameter: {},
+};
+var list = [
+    { value: 'Contact' },
+    { value: 'About' },
+    { value: 'Base' },
+    { value: 'Blog' },
+    { value: 'Contact 3' },
+    { value: 'Custom' },
+    { value: 'Support' },
+    { value: 'Tools' },
+];
+export var FormDemoStories = function () { return (React.createElement("div", { style: { width: '344px' } },
+    React.createElement("div", { style: { marginBottom: '16px' } },
+        React.createElement("h3", null, "Form demo"),
+        React.createElement("p", null, "Here is an example of how to combine input fields and buttons to create a simple form.")),
+    React.createElement("div", null,
+        React.createElement(InputLabel, { inputId: "DemoTextField", text: "Work email" }),
+        React.createElement(TextField, { id: "DemoTextField", placeholder: "e.g. annie@laerdal.com", required: true })),
+    React.createElement("div", { style: { margin: '8px 0px' } },
+        React.createElement(InputLabel, { inputId: "Checkboxes", text: "Select multiple" }),
+        React.createElement(Checkbox, { id: "DemoCheckbox1", selected: true, select: function () {
+            }, label: "English" }),
+        React.createElement(Checkbox, { id: "DemoCheckbox2", selected: true, select: function () {
+            }, label: "French" }),
+        React.createElement(Checkbox, { id: "DemoCheckbox3", selected: false, select: function () {
+            }, label: "Spanish" })),
+    React.createElement("div", { style: { margin: '8px 0px' } },
+        React.createElement(InputLabel, { inputId: "Radio buttons", text: "Select one" }),
+        React.createElement(RadioButton, { id: "DemoRadioButton1", selected: false, select: function () {
+            }, label: "Novice" }),
+        React.createElement(RadioButton, { id: "DemoRadioButton2", selected: true, select: function () {
+            }, label: "Intermediate" }),
+        React.createElement(RadioButton, { id: "DemoRadioButton3", selected: false, select: function () {
+            }, label: "Professional" })),
+    React.createElement("div", null,
+        React.createElement(InputLabel, { inputId: "DemoDropdownField", text: "Default Dropdown" }),
+        React.createElement(DropdownFilter, { id: "DemoDropdownField", list: list, placeholder: "Select ...", onSelect: function (value) { return console.log('Item selected ' + value); }, messageOnNoResults: "No results found" })),
+    React.createElement("div", { style: { display: 'flex', flexDirection: 'row-reverse', gap: '8px', margin: '8px 0px' } },
+        React.createElement(Button, { id: "ButtonSubmit", size: Size.Medium, variant: "primary" }, "Submit"),
+        React.createElement(Button, { id: "ButtonCancel", size: Size.Medium, variant: "tertiary" }, "Cancel")))); };

package/dist/stories/InputFields/NumberFieldDemo.stories.d.ts

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