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

package/dist/stories/InputFields/NumberFieldDemo.stories.js

@@ -0,0 +1,147 @@
+import React from "react";
+import { InputLabel, NumberField, Size, States, SystemIcons } from "../../src/index";
+var meta = {
+    title: 'Components/InputFields/NumberField',
+    component: NumberField,
+    decorators: [],
+    tags: ['autodocs'],
+    parameters: {},
+};
+export default meta;
+export var Primary = {
+    args: {},
+};
+export var NumberFieldDemoStories = function () {
+    var _a = React.useState(9876543219876543219876543210), inputVal = _a[0], setInputVal = _a[1];
+    return React.createElement("div", { style: { display: '-ms-grid' } },
+        React.createElement("h3", null, "Number field demo"),
+        React.createElement("div", { style: {
+                display: 'flex',
+                flexDirection: 'row',
+                justifyContent: 'flex-start',
+                padding: '0px 0px 32px',
+                gap: '80px'
+            } },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', width: '320px', gap: '16px' } },
+                React.createElement("h5", null, "Small"),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: 'Number', text: 'Number Field', size: Size.Small }),
+                    React.createElement(NumberField, { size: Size.Small, id: 'Number', onChange: function (e) { return console.log("value is: ".concat(e)); } })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: 'NumberRequired', text: 'Required Number Field', required: true, size: Size.Small }),
+                    React.createElement(NumberField, { type: "NumberField", size: Size.Small, required: true, onChange: function (e) { return console.log("value is: ".concat(e)); } })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: 'NumberDisabled', text: 'Disabled Number Field', size: Size.Small }),
+                    React.createElement(NumberField, { type: "NumberField", size: Size.Small, disabled: true })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: 'NumberReadOnly', text: 'ReadOnly Number Field', size: Size.Small }),
+                    React.createElement(NumberField, { type: "NumberField", size: Size.Small, readOnly: true, value: 25 })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: 'NumberValid', text: 'Valid Number Field', size: Size.Small }),
+                    React.createElement(NumberField, { type: "NumberField", size: Size.Small, state: States.Valid, note: "valid note", noteIcon: React.createElement(SystemIcons.CheckMark, null), onChange: function (e) { return console.log("value is: ".concat(e)); } })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: 'NumberInvalid', text: 'Invalid Number Field', size: Size.Small }),
+                    React.createElement(NumberField, { type: "NumberField", size: Size.Small, state: States.Invalid, note: "invalid note", noteIcon: React.createElement(SystemIcons.TechnicalWarning, null), onChange: function (e) { return console.log("value is: ".concat(e)); } })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: 'NumberOverflow', text: 'Overflow test (tooltip + ellipsis)', size: Size.Small }),
+                    React.createElement(NumberField, { id: "overflowTest", type: "NumberField", size: Size.Small, allowNegative: true, decimalPrecision: 2, minValue: -5, value: inputVal, maxValue: 987654321098765432109876543210, onChange: function (e) { return setInputVal(e); } })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: 'NumberRange', text: 'Negative Number Field in range -5 to 10', size: Size.Small }),
+                    React.createElement(NumberField, { type: "NumberField", size: Size.Small, allowNegative: true, minValue: -5, maxValue: 10, onChange: function (e) { return console.log("value is: ".concat(e)); } })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: 'NumberDecimal', text: 'Negative Decimal Number Field in range -5 to 10', size: Size.Small }),
+                    React.createElement(NumberField, { type: "NumberField", size: Size.Small, allowNegative: true, decimalPrecision: 2, minValue: -5, maxValue: 10, onChange: function (e) { return console.log("value is: ".concat(e)); } })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: 'NumberPrefix', text: 'Number field with prefix', size: Size.Small }),
+                    React.createElement(NumberField, { type: "NumberField", size: Size.Small, prefix: "$", onChange: function (e) { return console.log("value is: ".concat(e)); } }))),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', width: '400px', gap: '16px' } },
+                React.createElement("h5", null, "Medium"),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: 'Number', text: 'Number Field', size: Size.Medium }),
+                    React.createElement(NumberField, { size: Size.Medium, id: 'Number', onChange: function (e) { return console.log("value is: ".concat(e)); } })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: 'NumberRequired', text: 'Required Number Field', required: true, size: Size.Medium }),
+                    React.createElement(NumberField, { type: "NumberField", size: Size.Medium, required: true, onChange: function (e) { return console.log("value is: ".concat(e)); } })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: 'NumberDisabled', text: 'Disabled Number Field', size: Size.Medium }),
+                    React.createElement(NumberField, { type: "NumberField", size: Size.Medium, disabled: true })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: 'NumberReadOnly', text: 'ReadOnly Number Field', size: Size.Medium }),
+                    React.createElement(NumberField, { type: "NumberField", size: Size.Medium, readOnly: true, value: 25 })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: 'NumberValid', text: 'Valid Number Field', size: Size.Medium }),
+                    React.createElement(NumberField, { type: "NumberField", size: Size.Medium, state: States.Valid, note: "valid note", noteIcon: React.createElement(SystemIcons.CheckMark, null), onChange: function (e) { return console.log("value is: ".concat(e)); } })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: 'NumberInvalid', text: 'Invalid Number Field', size: Size.Medium }),
+                    React.createElement(NumberField, { type: "NumberField", size: Size.Medium, state: States.Invalid, note: "invalid note", noteIcon: React.createElement(SystemIcons.TechnicalWarning, null), onChange: function (e) { return console.log("value is: ".concat(e)); } })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: 'NumberOverflow', text: 'Overflow test (tooltip + ellipsis)', size: Size.Medium }),
+                    React.createElement(NumberField, { id: "overflowTest", type: "NumberField", size: Size.Medium, allowNegative: true, decimalPrecision: 2, minValue: -5, value: inputVal, maxValue: 987654321098765432109876543210, onChange: function (e) { return setInputVal(e); } })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: 'NumberRange', text: 'Negative Number Field in range -5 to 10', size: Size.Medium }),
+                    React.createElement(NumberField, { type: "NumberField", size: Size.Medium, allowNegative: true, minValue: -5, maxValue: 10, onChange: function (e) { return console.log("value is: ".concat(e)); } })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: 'NumberDecimal', text: 'Negative Decimal Number Field in range -5 to 10', size: Size.Medium }),
+                    React.createElement(NumberField, { type: "NumberField", size: Size.Medium, allowNegative: true, decimalPrecision: 2, minValue: -5, maxValue: 10, onChange: function (e) { return console.log("value is: ".concat(e)); } })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: 'NumberPrefix', text: 'Number field with prefix', size: Size.Medium }),
+                    React.createElement(NumberField, { type: "NumberField", size: Size.Medium, prefix: "$", onChange: function (e) { return console.log("value is: ".concat(e)); } })))));
+};
+export var NumberInputDemoStories = function () {
+    var _a = React.useState(9876543219876543219876543210), inputVal = _a[0], setInputVal = _a[1];
+    return React.createElement("div", { style: { display: '-ms-grid' } },
+        React.createElement("h3", null, "Number input demo"),
+        React.createElement("div", { style: {
+                display: 'flex',
+                flexDirection: 'row',
+                justifyContent: 'flex-start',
+                padding: '0px 0px 32px',
+                gap: '80px'
+            } },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', width: '160px', gap: '16px' } },
+                React.createElement("h5", null, "Small"),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: 'NumberInput', text: 'Number Input', size: Size.Small }),
+                    React.createElement(NumberField, { type: "NumberInput", size: Size.Small, onChange: function (e) { return console.log("value is: ".concat(e)); } })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: 'NumberInputRequired', text: 'Required Number Input', required: true, size: Size.Small }),
+                    React.createElement(NumberField, { type: "NumberInput", size: Size.Small, required: true, onChange: function (e) { return console.log("value is: ".concat(e)); } })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: 'NumberInputDisabled', text: 'Disabled Number Input', size: Size.Small }),
+                    React.createElement(NumberField, { type: "NumberInput", size: Size.Small, disabled: true })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: 'NumberInputReadOnly', text: 'ReadOnly Number Input', size: Size.Small }),
+                    React.createElement(NumberField, { type: "NumberInput", size: Size.Small, readOnly: true, value: 25 })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: 'NumberInputValid', text: 'Valid Number Input', size: Size.Small }),
+                    React.createElement(NumberField, { type: "NumberInput", size: Size.Small, state: States.Valid, note: "valid note", noteIcon: React.createElement(SystemIcons.CheckMark, null), onChange: function (e) { return console.log("value is: ".concat(e)); } })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: 'NumberInputInvalid', text: 'Invalid Number Input', size: Size.Small }),
+                    React.createElement(NumberField, { type: "NumberInput", size: Size.Small, state: States.Invalid, note: "invalid note", noteIcon: React.createElement(SystemIcons.TechnicalWarning, null), onChange: function (e) { return console.log("value is: ".concat(e)); } })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: 'NumberInputOverflow', text: 'Simple Number Input (with overflow)', size: Size.Small }),
+                    React.createElement(NumberField, { id: "NumberInputOverflow", dataTestId: "someCustomTestId", value: inputVal, type: "NumberInput", size: Size.Small, onChange: function (e) { return setInputVal(e); } }))),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', width: '240px', gap: '16px' } },
+                React.createElement("h5", null, "Medium"),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: 'NumberInput', text: 'Number Input', size: Size.Medium }),
+                    React.createElement(NumberField, { type: "NumberInput", size: Size.Medium, onChange: function (e) { return console.log("value is: ".concat(e)); } })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: 'NumberInputRequired', text: 'Required Number Input', required: true, size: Size.Medium }),
+                    React.createElement(NumberField, { type: "NumberInput", size: Size.Medium, required: true, onChange: function (e) { return console.log("value is: ".concat(e)); } })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: 'NumberInputDisabled', text: 'Disabled Number Input', size: Size.Medium }),
+                    React.createElement(NumberField, { type: "NumberInput", size: Size.Medium, disabled: true })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: 'NumberInputReadOnly', text: 'ReadOnly Number Input', size: Size.Medium }),
+                    React.createElement(NumberField, { type: "NumberInput", size: Size.Medium, readOnly: true, value: 25 })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: 'NumberInputValid', text: 'Valid Number Input', size: Size.Medium }),
+                    React.createElement(NumberField, { type: "NumberInput", size: Size.Medium, state: States.Valid, note: "valid note", noteIcon: React.createElement(SystemIcons.CheckMark, null), onChange: function (e) { return console.log("value is: ".concat(e)); } })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: 'NumberInputInvalid', text: 'Invalid Number Input', size: Size.Medium }),
+                    React.createElement(NumberField, { type: "NumberInput", size: Size.Medium, state: States.Invalid, note: "invalid note", noteIcon: React.createElement(SystemIcons.TechnicalWarning, null), onChange: function (e) { return console.log("value is: ".concat(e)); } })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: 'NumberInputOverflow', text: 'Simple Number Input (with overflow)', size: Size.Medium }),
+                    React.createElement(NumberField, { id: "NumberInputOverflow", dataTestId: "someCustomTestId", value: inputVal, type: "NumberInput", size: Size.Medium, onChange: function (e) { return setInputVal(e); } })))));
+};

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

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

package/dist/stories/InputFields/PasswordDemo.stories.js

@@ -0,0 +1,52 @@
+import { InputLabel, PasswordField, Size } from "../../src/index";
+import React from "react";
+var meta = {
+    title: 'Components/InputFields/PasswordField',
+    component: PasswordField,
+    decorators: [],
+    tags: ['autodocs'],
+    parameters: {},
+};
+export default meta;
+export var Primary = {
+    args: {},
+};
+export var PasswordDemoStories = function () {
+    return React.createElement("div", { style: { display: '-ms-grid' } },
+        React.createElement("h3", null, "Password field demo"),
+        React.createElement("div", { style: {
+                display: 'flex',
+                flexDirection: 'row',
+                justifyContent: 'flex-start',
+                padding: '0px 0px 32px',
+                gap: '80px'
+            } },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', width: '320px', gap: '16px' } },
+                React.createElement("h5", null, "Small"),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "DemoPasswordField", text: "Default", size: Size.Small }),
+                    React.createElement(PasswordField, { id: "DemoPasswordField", dataTestId: "customDataTestId", placeholder: "Enter 8 characters or more...", size: Size.Small })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "DemoPasswordFieldDisabled", text: "Disabled", size: Size.Small }),
+                    React.createElement(PasswordField, { id: "DemoPasswordFieldDisabled", placeholder: "Enter 8 characters or more...", disabled: true, size: Size.Small })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "DemoPasswordFieldInvalid", text: "Invalid", size: Size.Small }),
+                    React.createElement(PasswordField, { id: "DemoPasswordFieldInvalid", placeholder: "Enter 8 characters or more...", validationMessage: 'This field is required', size: Size.Small })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "DemoPasswordFieldRequired", text: "Required", size: Size.Small }),
+                    React.createElement(PasswordField, { id: "DemoPasswordFieldRequired", placeholder: "Enter 8 characters or more...", required: true, size: Size.Small }))),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', width: '400px', gap: '16px' } },
+                React.createElement("h5", null, "Medium"),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "DemoPasswordField", text: "Default", size: Size.Medium }),
+                    React.createElement(PasswordField, { id: "DemoPasswordField", dataTestId: "customDataTestId", placeholder: "Enter 8 characters or more...", size: Size.Medium })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "DemoPasswordFieldDisabled", text: "Disabled", size: Size.Medium }),
+                    React.createElement(PasswordField, { id: "DemoPasswordFieldDisabled", placeholder: "Enter 8 characters or more...", disabled: true, size: Size.Medium })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "DemoPasswordFieldInvalid", text: "Invalid", size: Size.Medium }),
+                    React.createElement(PasswordField, { id: "DemoPasswordFieldInvalid", placeholder: "Enter 8 characters or more...", validationMessage: 'This field is required', size: Size.Medium })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "DemoPasswordFieldRequired", text: "Required", size: Size.Medium }),
+                    React.createElement(PasswordField, { id: "DemoPasswordFieldRequired", placeholder: "Enter 8 characters or more...", required: true, size: Size.Medium })))));
+};

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

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

package/dist/stories/InputFields/QuickSearchDemo.stories.js

@@ -0,0 +1,78 @@
+import React, { useState } from "react";
+import { QuickSearch, Size } from "../../src/index";
+var meta = {
+    title: 'Components/InputFields/QuickSearch',
+    component: QuickSearch,
+    decorators: [],
+    tags: ['autodocs'],
+    parameters: {},
+};
+export default meta;
+export var Primary = {
+    args: {},
+};
+var getQuickSearchWithContent = function (size, searchTerm, setSearchTerm) {
+    return (React.createElement(QuickSearch, { id: "DemoSearchBarWithContent", placeholder: "Placeholder", searchTerm: searchTerm, setSearchTerm: function (term) {
+            console.log('Set search term: ' + term);
+            setSearchTerm(term);
+        }, enterSearch: function () {
+            console.log('Seach entered');
+        }, removeSearch: function () {
+            setSearchTerm('');
+        }, size: size }));
+};
+export var QuickSearchDemoStories = function () {
+    var _a = useState('Search term'), searchTermSmall = _a[0], setSearchTermSmall = _a[1];
+    var _b = useState('Search term'), searchTermMedium = _b[0], setSearchTermMedium = _b[1];
+    return React.createElement(React.Fragment, null,
+        React.createElement("h3", null, "Quick search field demo"),
+        React.createElement("div", { style: {
+                display: 'flex',
+                flexDirection: 'row',
+                justifyContent: 'flex-start',
+                padding: '0px 0px 32px',
+                gap: '80px'
+            } },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', width: '400px', gap: '8px' } },
+                React.createElement("h5", null, "Small"),
+                React.createElement("div", null,
+                    React.createElement("p", null, "This is a quick search bar - click to expand it."),
+                    React.createElement(QuickSearch, { id: "DemoSearchBar", placeholder: "Placeholder", setSearchTerm: function (term) {
+                            console.log('Set search term: ' + term);
+                        }, enterSearch: function () {
+                            console.log('Seach entered');
+                        }, removeSearch: function () {
+                        }, size: Size.Small })),
+                React.createElement("div", null,
+                    React.createElement("p", null, "This is a quick search bar with the loading icon spinning"),
+                    React.createElement(QuickSearch, { id: "DemoSearchBarLoading", placeholder: "Placeholder", setSearchTerm: function (term) {
+                            console.log('Set search term: ' + term);
+                        }, enterSearch: function () {
+                            console.log('Seach entered');
+                        }, removeSearch: function () {
+                        }, size: Size.Small, loading: true })),
+                React.createElement("div", null,
+                    React.createElement("p", null, "Click the clear icon to reset the input value."),
+                    getQuickSearchWithContent(Size.Small, searchTermSmall, setSearchTermSmall))),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', width: '400px', gap: '8px' } },
+                React.createElement("h5", null, "Medium"),
+                React.createElement("div", null,
+                    React.createElement("p", null, "This is a quick search bar - click to expand it."),
+                    React.createElement(QuickSearch, { id: "DemoSearchBar", placeholder: "Placeholder", setSearchTerm: function (term) {
+                            console.log('Set search term: ' + term);
+                        }, enterSearch: function () {
+                            console.log('Seach entered');
+                        }, removeSearch: function () {
+                        }, size: Size.Medium })),
+                React.createElement("div", null,
+                    React.createElement("p", null, "Click to expand and see the loading icon spinning."),
+                    React.createElement(QuickSearch, { id: "DemoSearchBarLoading", placeholder: "Placeholder", setSearchTerm: function (term) {
+                            console.log('Set search term: ' + term);
+                        }, enterSearch: function () {
+                            console.log('Seach entered');
+                        }, removeSearch: function () {
+                        }, size: Size.Medium, loading: true })),
+                React.createElement("div", null,
+                    React.createElement("p", null, "Click the clear icon to reset the input value."),
+                    getQuickSearchWithContent(Size.Medium, searchTermMedium, setSearchTermMedium)))));
+};

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

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

package/dist/stories/InputFields/RadioButtonDemo.stories.js

@@ -0,0 +1,52 @@
+import { InputLabel, RadioButton, Size } from "../../src/index";
+import React from "react";
+var meta = {
+    title: 'Components/InputFields/RadioButton',
+    component: RadioButton,
+    decorators: [],
+    tags: ['autodocs'],
+    parameters: {},
+};
+export default meta;
+export var Primary = {
+    args: {},
+};
+export var RadioButtonDemoStories = function () { return (React.createElement(React.Fragment, null,
+    React.createElement("h3", null, "Radio button input"),
+    React.createElement("p", null, "Allows for single selection."),
+    React.createElement("h6", null, "States"),
+    React.createElement("div", { style: { width: 400 } },
+        React.createElement(InputLabel, { inputId: "DemoRadioButton", text: "Unchecked" }),
+        React.createElement(RadioButton, { id: "DemoRadioButton", selected: false, select: function () {
+                console.log('click');
+            }, label: "This is an unchecked radio button with a lot of text, this is an unchecked radio button with a lot of text" }),
+        React.createElement(InputLabel, { inputId: "DemoRadioButton2", text: "Checked" }),
+        React.createElement(RadioButton, { id: "DemoRadioButton2", selected: true, select: function () {
+                console.log('click');
+            }, label: "This is a checked radio button" }),
+        React.createElement(InputLabel, { inputId: "DemoRadioButtonInvalid", text: "Invalid" }),
+        React.createElement(RadioButton, { id: "DemoRadioButtonInvalid", invalid: true, selected: false, select: function () {
+                console.log('click');
+            }, label: "This is a invalid radio button" }),
+        React.createElement(InputLabel, { inputId: "DemoRadioButtonDisabled", text: "Disabled false" }),
+        React.createElement(RadioButton, { id: "DemoRadioButtonDisabled", disabled: true, selected: false, select: function () {
+                console.log('click');
+            }, label: "This is a disabled radio button" }),
+        React.createElement(InputLabel, { inputId: "DemoRadioButtonDisabledTrue", text: "Disabled true" }),
+        React.createElement(RadioButton, { id: "DemoRadioButtonDisabledTrue", disabled: true, selected: true, select: function () {
+                console.log('click');
+            }, label: "This is a disabled true radio button" })),
+    React.createElement("h6", null, "Sizes"),
+    React.createElement("div", null,
+        React.createElement(InputLabel, { inputId: "DemoRadioButtonSmall", text: "Small" }),
+        React.createElement(RadioButton, { id: "DemoRadioButtonSmall", size: Size.Small, selected: true, select: function () {
+                console.log('click');
+            }, label: "This is a small radio button", additionalLabel: 'additional text' }),
+        React.createElement(InputLabel, { inputId: "DemoRadioButtonMedium", text: "Medium" }),
+        React.createElement(RadioButton, { id: "DemoRadioButtonMedium", size: Size.Medium, selected: true, select: function () {
+                console.log('click');
+            }, label: "This is a medium radio button", additionalLabel: 'additional text' }),
+        React.createElement(InputLabel, { inputId: "DemoRadioButtonLarge", text: "Large" }),
+        React.createElement(RadioButton, { id: "DemoRadioButtonLarge", size: Size.Large, selected: true, select: function () {
+                console.log('click');
+            }, label: "This is a large radio button", additionalLabel: 'additional text' })))); };

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

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

package/dist/stories/InputFields/RichTextFieldDemo.stories.js

@@ -0,0 +1,74 @@
+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, { useState } from "react";
+import { InputLabel, RichTextField, Size, SystemIcons } from "../../src/index";
+import styled from "styled-components";
+var meta = {
+    title: 'Components/InputFields/RichTextField',
+    component: RichTextField,
+    decorators: [],
+    tags: ['autodocs'],
+    parameters: {},
+};
+export default meta;
+export var Primary = {
+    args: {},
+};
+var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
+var Container = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 16px 0;\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  gap: 16px;\n"], ["\n  padding: 16px 0;\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  gap: 16px;\n"])));
+export var RichTextFieldDemo = function () {
+    var _a = useState(''), value = _a[0], setValue = _a[1];
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Container, null,
+            React.createElement(Wrapper, null,
+                React.createElement(InputLabel, { inputId: 'rich', text: 'RTF' }),
+                React.createElement(RichTextField, { id: 'rich', note: { icon: React.createElement(SystemIcons.Information, null), message: 'Note' }, placeholder: 'Placeholder', size: Size.Small, value: value, onChange: setValue })),
+            React.createElement(Wrapper, null,
+                React.createElement(InputLabel, { inputId: 'rich', text: 'RTF' }),
+                React.createElement(RichTextField, { id: 'rich', note: { icon: React.createElement(SystemIcons.Information, null), message: 'Note' }, placeholder: 'Placeholder', size: Size.Medium, value: value, onChange: setValue }))),
+        React.createElement(Container, null,
+            React.createElement(Wrapper, null,
+                React.createElement(InputLabel, { inputId: 'readonly', text: 'Readonly RTF' }),
+                React.createElement(RichTextField, { id: 'readonly', note: { icon: React.createElement(SystemIcons.Information, null), message: 'Note' }, placeholder: 'Placeholder', readOnly: true, size: Size.Small, value: value, onChange: setValue })),
+            React.createElement(Wrapper, null,
+                React.createElement(InputLabel, { inputId: 'readonly', text: 'Readonly RTF' }),
+                React.createElement(RichTextField, { id: 'readonly', note: { icon: React.createElement(SystemIcons.Information, null), message: 'Note' }, placeholder: 'Placeholder', readOnly: true, size: Size.Medium, value: value, onChange: setValue }))),
+        React.createElement(Container, null,
+            React.createElement(Wrapper, null,
+                React.createElement(InputLabel, { inputId: 'disabled', text: 'Disabled RTF' }),
+                React.createElement(RichTextField, { id: 'disabled', note: { icon: React.createElement(SystemIcons.Information, null), message: 'Note' }, placeholder: 'Placeholder', disabled: true, size: Size.Small, value: value, onChange: setValue })),
+            React.createElement(Wrapper, null,
+                React.createElement(InputLabel, { inputId: 'disabled', text: 'Disabled RTF' }),
+                React.createElement(RichTextField, { id: 'disabled', note: { icon: React.createElement(SystemIcons.Information, null), message: 'Note' }, placeholder: 'Placeholder', disabled: true, size: Size.Medium, value: value, onChange: setValue })))));
+};
+var ResizableWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-top: 16px;\n  width: 100%;\n  height: 50%;\n\n  .ql-container {\n    height: 150px;\n  }\n"], ["\n  padding-top: 16px;\n  width: 100%;\n  height: 50%;\n\n  .ql-container {\n    height: 150px;\n  }\n"])));
+export var RichTextFieldResizableDemo = function () {
+    var _a = useState(''), value = _a[0], setValue = _a[1];
+    return (React.createElement(ResizableWrapper, null,
+        React.createElement(InputLabel, { inputId: 'rich', text: 'Label' }),
+        React.createElement(RichTextField, { id: 'rich', note: { icon: React.createElement(SystemIcons.Information, null), message: 'Note' }, value: value, resizable: true, onChange: setValue })));
+};
+var FullToolbarWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding-top: 16px;\n  width: 100%;\n  height: 50%;\n"], ["\n  padding-top: 16px;\n  width: 100%;\n  height: 50%;\n"])));
+export var RichTextFieldFullToolbarDemo = function () {
+    var _a = useState(''), value = _a[0], setValue = _a[1];
+    var modules = {
+        toolbar: [
+            [{ 'font': [] }],
+            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+            ['bold', 'italic', 'underline', 'strike'],
+            [{ 'color': [] }, { 'background': [] }],
+            [{ 'script': 'sub' }, { 'script': 'super' }],
+            [{ 'header': 1 }, { 'header': 2 }, 'blockquote', 'code-block'],
+            [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }],
+            [{ 'direction': 'rtl' }, { 'align': [] }],
+            ['link', 'image', 'video', 'formula'],
+            ['clean']
+        ]
+    };
+    return (React.createElement(FullToolbarWrapper, { style: { height: '50%' } },
+        React.createElement(InputLabel, { inputId: 'rich', text: 'Label' }),
+        React.createElement(RichTextField, { id: 'rich', note: { icon: React.createElement(SystemIcons.Information, null), message: 'Note' }, value: value, modules: modules, onChange: setValue })));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

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

package/dist/stories/InputFields/SearchBarDemo.stories.js

@@ -0,0 +1,108 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React from "react";
+import { InputLabel, SearchBar, Size, SystemIcons } from "../../src/index";
+var meta = {
+    title: 'Components/InputFields/SearchBar',
+    component: SearchBar,
+    decorators: [],
+    tags: ['autodocs'],
+    parameters: {},
+};
+export default meta;
+export var Primary = {
+    args: {},
+};
+var searches = [
+    { value: 'Recent searches', suggestion: true, disabled: true },
+    { value: 'search 1' },
+    { value: 'search 2' },
+    { value: 'search 3' },
+];
+var clearSearchList = function (list, callback) {
+    var newList = list.filter(function (x) { return x.suggestion === true; });
+    callback(__spreadArray([], newList, true));
+};
+export var SearchBarDemoStories = function () {
+    var _a = React.useState(''), searchTermNormalSmall = _a[0], setSearchTermNormalSmall = _a[1];
+    var _b = React.useState(''), searchTermNormalMedium = _b[0], setSearchTermNormalMedium = _b[1];
+    var _c = React.useState(''), searchTermDropdownSmall = _c[0], setSearchTermDropdownSmall = _c[1];
+    var _d = React.useState(''), searchTermDropdownMedium = _d[0], setSearchTermDropdownMedium = _d[1];
+    var _e = React.useState(''), searchTermValidationSmall = _e[0], setSearchTermValidationSmall = _e[1];
+    var _f = React.useState(''), searchTermValidationMedium = _f[0], setSearchTermValidationMedium = _f[1];
+    var _g = React.useState(searches), searchListSmall = _g[0], setSearchListSmall = _g[1];
+    var _h = React.useState(searches), searchListMedium = _h[0], setSearchListMedium = _h[1];
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { style: { display: '-ms-grid' } },
+            React.createElement("h3", null, "Search field demo"),
+            React.createElement("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    justifyContent: 'flex-start',
+                    padding: '0px 0px 32px',
+                    gap: "80px"
+                } },
+                React.createElement("div", { style: { display: 'flex', flexDirection: 'column', width: '320px', gap: '16px' } },
+                    React.createElement("h5", null, "Small"),
+                    React.createElement("div", null,
+                        React.createElement(InputLabel, { inputId: "DemoSearchBarSmall", text: "Normal", size: Size.Small }),
+                        React.createElement(SearchBar, { id: "DemoSearchBarSmall", placeholder: "This is the placeholder", enterSearch: function () {
+                                console.log('Seach entered');
+                            }, setSearchTerm: setSearchTermNormalSmall, searchTerm: searchTermNormalSmall, removeSearch: function () {
+                                setSearchTermNormalSmall('');
+                            }, size: Size.Small })),
+                    React.createElement("div", null,
+                        React.createElement(InputLabel, { inputId: "DemoSearchBarDisabledSmall", text: "Disabled", size: Size.Small }),
+                        React.createElement(SearchBar, { id: "DemoSearchBarDisabledSmall", disabled: true, placeholder: "This is the placeholder", setSearchTerm: function () {
+                            }, enterSearch: function () {
+                            }, removeSearch: function () {
+                            }, size: Size.Small })),
+                    React.createElement("div", null,
+                        React.createElement(InputLabel, { inputId: "DemoSearchBarValidationSmall", text: "Validation", size: Size.Small }),
+                        React.createElement(SearchBar, { id: "DemoSearchBarValidationSmall", validationMessage: !searchTermValidationSmall ? 'No search results found' : '', setSearchTerm: setSearchTermValidationSmall, searchTerm: searchTermValidationSmall !== null && searchTermValidationSmall !== void 0 ? searchTermValidationSmall : '', enterSearch: function () {
+                                setSearchTermValidationSmall('');
+                            }, removeSearch: function () {
+                                setSearchTermValidationSmall('');
+                            }, size: Size.Small })),
+                    React.createElement("div", null,
+                        React.createElement(InputLabel, { inputId: "DemoSearchBarDropdownSmall", text: "Normal", size: Size.Small }),
+                        React.createElement(SearchBar, { id: "DemoSearchBarDropdownSmall", placeholder: "This is the placeholder", enterSearch: function () {
+                                console.log('Seach entered');
+                            }, setSearchTerm: setSearchTermDropdownSmall, searchTerm: searchTermDropdownSmall, removeSearch: function () {
+                                setSearchTermDropdownSmall('');
+                            }, size: Size.Small, showDropdown: true, dropdownButtonIcon: React.createElement(SystemIcons.Clear, null), dropdownButtonLabel: 'Clear search history', dropdownButtonVariant: 'tertiary', dropdownButtonAction: function () { return clearSearchList(searchListSmall, setSearchListSmall); }, searchList: searchListSmall, addToSearchList: function (e) { return setSearchListSmall(__spreadArray(__spreadArray([], searchListSmall, true), [e], false)); } }))),
+                React.createElement("div", { style: { display: 'flex', flexDirection: 'column', width: '400px', gap: '8px' } },
+                    React.createElement("h5", null, "Medium"),
+                    React.createElement("div", null,
+                        React.createElement(InputLabel, { inputId: "DemoSearchBarMedium", text: "Normal", size: Size.Medium }),
+                        React.createElement(SearchBar, { id: "DemoSearchBarMedium", placeholder: "This is the placeholder", setSearchTerm: setSearchTermNormalMedium, searchTerm: searchTermNormalMedium, enterSearch: function () {
+                                console.log('Seach entered');
+                            }, removeSearch: function () { return setSearchTermNormalMedium(''); }, size: Size.Medium })),
+                    React.createElement("div", null,
+                        React.createElement(InputLabel, { inputId: "DemoSearchBarDisabledMedium", text: "Disabled", size: Size.Medium }),
+                        React.createElement(SearchBar, { id: "DemoSearchBarDisabledMedium", disabled: true, placeholder: "This is the placeholder", setSearchTerm: function () {
+                            }, searchTerm: '', enterSearch: function () {
+                            }, removeSearch: function () {
+                            }, size: Size.Medium })),
+                    React.createElement("div", null,
+                        React.createElement(InputLabel, { inputId: "DemoSearchBarValidationMedium", text: "Validation", size: Size.Medium }),
+                        React.createElement(SearchBar, { id: "DemoSearchBarValidationMedium", validationMessage: !searchTermValidationMedium ? 'No search results found' : '', searchTerm: searchTermValidationMedium !== null && searchTermValidationMedium !== void 0 ? searchTermValidationMedium : '', setSearchTerm: setSearchTermValidationMedium, enterSearch: function () {
+                                setSearchTermValidationMedium('');
+                            }, removeSearch: function () {
+                                setSearchTermValidationMedium('');
+                            }, size: Size.Medium })),
+                    React.createElement("div", null,
+                        React.createElement(InputLabel, { inputId: "DemoSearchBarDropdownMedium", text: "Normal", size: Size.Medium }),
+                        React.createElement(SearchBar, { id: "DemoSearchBarDropdownMedium", placeholder: "This is the placeholder", enterSearch: function () {
+                                console.log('Seach entered');
+                            }, setSearchTerm: setSearchTermDropdownMedium, searchTerm: searchTermDropdownMedium, removeSearch: function () {
+                                setSearchTermDropdownMedium('');
+                            }, size: Size.Medium, showDropdown: true, dropdownButtonIcon: React.createElement(SystemIcons.Clear, null), dropdownButtonLabel: 'Clear search history', dropdownButtonVariant: 'tertiary', dropdownButtonAction: function () { return clearSearchList(searchListMedium, setSearchListMedium); }, searchList: searchListMedium, addToSearchList: function (e) { return setSearchListMedium(__spreadArray(__spreadArray([], searchListMedium, true), [e], false)); }, dropdownScrollable: true })))))));
+};

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

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