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

package/dist/stories/InputFields/TextFieldDemo.stories.js

@@ -0,0 +1,113 @@
+import React, { useState } from "react";
+import { InputLabel, Size, States, SystemIcons, TextField } from "../../src/index";
+var meta = {
+    title: 'Components/InputFields/TextField',
+    component: TextField,
+    decorators: [],
+    tags: ['autodocs'],
+    parameters: {},
+};
+export default meta;
+export var Primary = {
+    args: {},
+};
+export var TextFieldDemoStories = function () {
+    var _a = useState('0123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789'), inputVal = _a[0], setInputVal = _a[1];
+    return React.createElement("div", { style: { display: '-ms-grid' } },
+        React.createElement("h3", null, "Text 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: "DemoTextField", text: "Default", size: Size.Small }),
+                    React.createElement(TextField, { id: "DemoTextField", "data-testId": "someCustomTestId", value: "0123456789", placeholder: "Enter text here", size: Size.Small })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "DemoTextFieldOverflow", text: "Default with overflow (triggers tooltip)", size: Size.Small }),
+                    React.createElement(TextField, { id: "DemoTextFieldOverflow", "data-testId": "someCustomTestIdOverflow", onChange: function (val) { return setInputVal(val); }, value: inputVal, placeholder: "Enter text here", size: Size.Small })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "DemoTextFieldDisabled", text: "Disabled", size: Size.Small }),
+                    React.createElement(TextField, { id: "DemoTextFieldDisabled", disabled: true, value: "This is a disabled field", size: Size.Small })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "DemoTextFieldDisabledNovalue", text: "Disabled no value", size: Size.Small }),
+                    React.createElement(TextField, { id: "DemoTextFieldDisabledNovalue", disabled: true, value: "", placeholder: "Some placeholder", size: Size.Small })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "DemoTextFieldDisabledWithvalue", text: "Disabled with value", size: Size.Small }),
+                    React.createElement(TextField, { id: "DemoTextFieldDisabledWithvalue", disabled: true, value: "Value", placeholder: "Some placeholder", size: Size.Small })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "DemoTextFieldRequired", text: "Required", size: Size.Small }),
+                    React.createElement(TextField, { id: "DemoTextFieldRequired", placeholder: "Tip text", required: true, size: Size.Small })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "DemoTextFieldReadOnly", text: "Readonly", size: Size.Small }),
+                    React.createElement(TextField, { id: "DemoTextFieldReadOnly", readOnly: true, value: "This is a read only field", size: Size.Small })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { showCopyButton: true, inputId: "DemoTextField", text: "Text field with quick copy value", size: Size.Small }),
+                    React.createElement(TextField, { id: "DemoTextField", "data-testId": "someCustomTestId", value: "0123456789", placeholder: "Enter text here", size: Size.Small })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "DemoTextFieldNoteAndNoValidation", text: "Input with note and no validation", size: Size.Small }),
+                    React.createElement(TextField, { id: "DemoTextFieldNoteAndNoValidation", placeholder: "Tip text", size: Size.Small, note: { icon: React.createElement(SystemIcons.Accessibility, null), message: 'Some info text' } })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "DemoTextFieldValid", text: "Valid without validation message", size: Size.Small }),
+                    React.createElement(TextField, { id: "DemoTextFieldValid", size: Size.Small, state: States.Valid })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "DemoTextFieldError", text: "Invalid", size: Size.Small }),
+                    React.createElement(TextField, { id: "DemoTextFieldError", validationMessage: "This is an error", size: Size.Small })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "DemoTextFieldValid", text: "Valid with validation message", size: Size.Small }),
+                    React.createElement(TextField, { id: "DemoTextFieldValid", size: Size.Small, state: States.Valid, validationMessage: 'Validated' })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "DemoTextFieldValid", text: "Valid with validation message and note", size: Size.Small }),
+                    React.createElement(TextField, { id: "DemoTextFieldValid", size: Size.Small, state: States.Valid, validationMessage: 'Validated', note: { icon: React.createElement(SystemIcons.Attention, null), message: 'This field has additional notes' } })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "DemoTextFieldValidWithNote", text: "Input valid state and additional note", size: Size.Small }),
+                    React.createElement(TextField, { id: "DemoTextFieldValidWithNote", placeholder: "Tip text", size: Size.Small, state: States.Invalid, validationMessage: 'This field is valid', note: { icon: React.createElement(SystemIcons.Book, null), message: 'Some info text' } }))),
+            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: "DemoTextField", text: "Default", size: Size.Medium }),
+                    React.createElement(TextField, { id: "DemoTextField", "data-testId": "someCustomTestId", value: "0123456789", placeholder: "Enter text here", size: Size.Medium })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "DemoTextFieldOverflow", text: "Default with overflow (triggers tooltip)", size: Size.Medium }),
+                    React.createElement(TextField, { id: "DemoTextFieldOverflow", "data-testId": "someCustomTestIdOverflow", onChange: function (val) { return setInputVal(val); }, value: inputVal, placeholder: "Enter text here", size: Size.Medium })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "DemoTextFieldDisabled", text: "Disabled", size: Size.Medium }),
+                    React.createElement(TextField, { id: "DemoTextFieldDisabled", disabled: true, value: "This is a disabled field", size: Size.Medium })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "DemoTextFieldDisabledNovalue", text: "Disabled no value", size: Size.Medium }),
+                    React.createElement(TextField, { id: "DemoTextFieldDisabledNovalue", disabled: true, value: "", placeholder: "Some placeholder", size: Size.Medium })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "DemoTextFieldDisabledWithvalue", text: "Disabled with value", size: Size.Medium }),
+                    React.createElement(TextField, { id: "DemoTextFieldDisabledWithvalue", disabled: true, value: "Value", placeholder: "Some placeholder", size: Size.Medium })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "DemoTextFieldRequired", text: "Required", size: Size.Medium }),
+                    React.createElement(TextField, { id: "DemoTextFieldRequired", placeholder: "Tip text", required: true, size: Size.Medium })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "DemoTextFieldReadOnly", text: "Readonly", size: Size.Medium }),
+                    React.createElement(TextField, { id: "DemoTextFieldReadOnly", readOnly: true, value: "This is a read only field", size: Size.Medium })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { showCopyButton: true, inputId: "DemoTextField", text: "Text field with quick copy value", size: Size.Medium }),
+                    React.createElement(TextField, { id: "DemoTextField", "data-testId": "someCustomTestId", value: "0123456789", placeholder: "Enter text here", size: Size.Medium })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "DemoTextFieldNoteAndNoValidation", text: "Input with note and no validation", size: Size.Medium }),
+                    React.createElement(TextField, { id: "DemoTextFieldNoteAndNoValidation", placeholder: "Tip text", size: Size.Medium, note: { icon: React.createElement(SystemIcons.Accessibility, null), message: 'Some info text' } })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "DemoTextFieldValid", text: "Valid without validation message", size: Size.Medium }),
+                    React.createElement(TextField, { id: "DemoTextFieldValid", size: Size.Medium, state: States.Valid })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "DemoTextFieldError", text: "Invalid", size: Size.Medium }),
+                    React.createElement(TextField, { id: "DemoTextFieldError", validationMessage: "This is an error", size: Size.Medium })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "DemoTextFieldValid", text: "Valid with validation message", size: Size.Medium }),
+                    React.createElement(TextField, { id: "DemoTextFieldValid", size: Size.Medium, state: States.Valid, validationMessage: 'Validated' })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "DemoTextFieldValid", text: "Valid with validation message and note", size: Size.Medium }),
+                    React.createElement(TextField, { id: "DemoTextFieldValid", size: Size.Medium, state: States.Valid, validationMessage: 'Validated', note: { icon: React.createElement(SystemIcons.Attention, null), message: 'This field has additional notes' } })),
+                React.createElement("div", null,
+                    React.createElement(InputLabel, { inputId: "DemoTextFieldValidWithNote", text: "Input valid state and additional note", size: Size.Medium }),
+                    React.createElement(TextField, { id: "DemoTextFieldValidWithNote", placeholder: "Tip text", size: Size.Medium, state: States.Invalid, validationMessage: 'This field is valid', note: { icon: React.createElement(SystemIcons.Book, null), message: 'Some info text' } })))));
+};

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

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

package/dist/stories/InputFields/TextareaDemo.stories.js

@@ -0,0 +1,80 @@
+import { InputLabel, Size, States, SystemIcons, Textarea } from "../../src/index";
+import React from "react";
+var meta = {
+    title: 'Components/InputFields/Textarea',
+    component: Textarea,
+    decorators: [],
+    tags: ['autodocs'],
+    parameters: {},
+};
+export default meta;
+export var Primary = {
+    args: {},
+};
+export var TextareaDemoStories = function () { return (React.createElement(React.Fragment, null,
+    React.createElement("h3", null, "Text area 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: '8px' } },
+            React.createElement("h5", null, "Small"),
+            React.createElement("div", null,
+                React.createElement(InputLabel, { inputId: "DemoTextAreaSmall", text: "Default text area", size: Size.Small }),
+                React.createElement(Textarea, { id: "DemoTextAreaSmall", dataTestId: "someCustomTestId", placeholder: "This is a small text area", size: Size.Small, onChange: function (value) { return console.log('entered new value', value); } })),
+            React.createElement("div", null,
+                React.createElement(InputLabel, { inputId: "DemoTextAreaRequired", text: "Required text area", size: Size.Small }),
+                React.createElement(Textarea, { id: "DemoTextAreaRequired", required: true, placeholder: "This is a required text area", size: Size.Small })),
+            React.createElement("div", null,
+                React.createElement(InputLabel, { inputId: "DemoTextAreaDisabled", text: "Disabled text area", size: Size.Small }),
+                React.createElement(Textarea, { id: "DemoTextAreaDisabled", placeholder: "This is a disabled text area", size: Size.Small, disabled: true })),
+            React.createElement("div", null,
+                React.createElement(InputLabel, { inputId: "DemoTextAreaReadonly", text: "Read-only text area", size: Size.Small }),
+                React.createElement(Textarea, { id: "DemoTextAreaReadonly", placeholder: "This is a readonly text area", size: Size.Small, readOnly: true })),
+            React.createElement("div", null,
+                React.createElement(InputLabel, { inputId: "DemoTextAreaError", text: "Text area without validation with note", size: Size.Small }),
+                React.createElement(Textarea, { id: "DemoTextAreaError", size: Size.Small, placeholder: "This is a error text area", note: { icon: React.createElement(SystemIcons.Information, null), message: 'This field has additional notes' }, onChange: function (value) { return console.log('entered new value', value); } })),
+            React.createElement("div", null,
+                React.createElement(InputLabel, { inputId: "DemoTextAreaNote", text: "Valid text area with note without validation message", size: Size.Small }),
+                React.createElement(Textarea, { id: "DemoTextAreaNote", placeholder: "Text area with note", size: Size.Small, state: States.Valid, onChange: function (value) { return console.log('entered new value', value); }, note: { icon: React.createElement(SystemIcons.Asterisk, null), message: 'This field has additional notes' } })),
+            React.createElement("div", null,
+                React.createElement(InputLabel, { inputId: "DemoTextAreaNoteAndValidationMessage", text: "Valid text area with note and validation message", size: Size.Small }),
+                React.createElement(Textarea, { id: "DemoTextAreaNoteAndValidationMessage", placeholder: "Tip text", size: Size.Small, state: States.Valid, onChange: function (value) { return console.log('entered new value', value); }, validationMessage: "This field is valid", note: { icon: React.createElement(SystemIcons.Information, null), message: 'Note text (optional)' } })),
+            React.createElement("div", null,
+                React.createElement(InputLabel, { inputId: "DemoTextAreaErrorWithNote", text: "Error text area with note without validation message", size: Size.Small }),
+                React.createElement(Textarea, { id: "DemoTextAreaErrorWithNote", size: Size.Small, state: States.Invalid, note: { icon: React.createElement(SystemIcons.Information, null), message: 'This field has additional notes' } })),
+            React.createElement("div", null,
+                React.createElement(InputLabel, { inputId: "DemoTextAreaErrorWithNote", text: "Error text area with note", size: Size.Small }),
+                React.createElement(Textarea, { id: "DemoTextAreaErrorWithNote", size: Size.Small, validationMessage: "Invalid field", note: { icon: React.createElement(SystemIcons.Attention, null), message: 'This field has additional notes' } }))),
+        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: "DemoTextAreaMedium", text: "Default text area" }),
+                React.createElement(Textarea, { id: "DemoTextAreaMedium", placeholder: "This is a medium text area", size: Size.Medium, onChange: function (value) { return console.log('entered new value', value); } })),
+            React.createElement("div", null,
+                React.createElement(InputLabel, { inputId: "DemoTextAreaRequired", text: "Required text area" }),
+                React.createElement(Textarea, { id: "DemoTextAreaRequired", required: true, placeholder: "This is a required text area", size: Size.Medium })),
+            React.createElement("div", null,
+                React.createElement(InputLabel, { inputId: "DemoTextAreaDisabled", text: "Disabled text area" }),
+                React.createElement(Textarea, { id: "DemoTextAreaDisabled", placeholder: "This is a disabled text area", size: Size.Medium, disabled: true })),
+            React.createElement("div", null,
+                React.createElement(InputLabel, { inputId: "DemoTextAreaReadonly", text: "Read-only text area" }),
+                React.createElement(Textarea, { id: "DemoTextAreaReadonly", placeholder: "This is a readonly text area", size: Size.Medium, readOnly: true })),
+            React.createElement("div", null,
+                React.createElement(InputLabel, { inputId: "DemoTextAreaError", text: "Text area without validation with note" }),
+                React.createElement(Textarea, { id: "DemoTextAreaError", placeholder: "This is a error text area", size: Size.Medium, note: { icon: React.createElement(SystemIcons.Information, null), message: 'This field has additional notes' }, onChange: function (value) { return console.log('entered new value', value); } })),
+            React.createElement("div", null,
+                React.createElement(InputLabel, { inputId: "DemoTextAreaNote", text: "Valid text area with note without validation message" }),
+                React.createElement(Textarea, { id: "DemoTextAreaNote", placeholder: "Text area with note", size: Size.Medium, state: States.Valid, onChange: function (value) { return console.log('entered new value', value); }, note: { icon: React.createElement(SystemIcons.Asterisk, null), message: 'This field has additional notes' } })),
+            React.createElement("div", null,
+                React.createElement(InputLabel, { inputId: "DemoTextAreaNoteAndValidationMessage", text: "Valid text area with note and validation message" }),
+                React.createElement(Textarea, { id: "DemoTextAreaNoteAndValidationMessage", placeholder: "Tip text", size: Size.Medium, state: States.Valid, onChange: function (value) { return console.log('entered new value', value); }, validationMessage: "This field is valid", note: { icon: React.createElement(SystemIcons.Information, null), message: 'Note text (optional)' } })),
+            React.createElement("div", null,
+                React.createElement(InputLabel, { inputId: "DemoTextAreaErrorWithNote", text: "Error text area with note without validation message" }),
+                React.createElement(Textarea, { id: "DemoTextAreaErrorWithNote", size: Size.Medium, state: States.Invalid, note: { icon: React.createElement(SystemIcons.Information, null), message: 'This field has additional notes' } })),
+            React.createElement("div", null,
+                React.createElement(InputLabel, { inputId: "DemoTextAreaErrorWithNote", text: "Error text area with note" }),
+                React.createElement(Textarea, { id: "DemoTextAreaErrorWithNote", size: Size.Medium, validationMessage: "Invalid field", note: { icon: React.createElement(SystemIcons.Attention, null), message: 'This field has additional notes' } })))))); };

package/dist/stories/Layout.stories.js

@@ -0,0 +1,15 @@
+import { PageWidth } from '../src/index';
+import React from 'react';
+export default {
+    title: 'Components/PageWidth',
+    component: PageWidth,
+    decorators: [],
+    parameter: {},
+};
+export var PageWidthDemo = function () { return (React.createElement(React.Fragment, null,
+    React.createElement(PageWidth, null,
+        React.createElement("div", { style: { background: '#efefef', padding: '30px', marginBottom: '30px' } }, "PageWidth Demo")),
+    React.createElement(PageWidth, { useMaxWidth: true },
+        React.createElement("div", { style: { background: '#efefef', padding: '30px', marginBottom: '30px' } }, "PageWidth Demo with useMaxWidth = true")),
+    React.createElement(PageWidth, { useMaxWidth: true, maxWidth: 1300 },
+        React.createElement("div", { style: { background: '#efefef', padding: '30px', marginBottom: '30px' } }, "PageWidth Demo with useMaxWidth = true and maxWidth = 1300")))); };

package/dist/stories/LinearProgress.stories.d.ts

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

package/dist/stories/LinearProgress.stories.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import LinearProgress, { LinearProgressType, LinearProgressVariant, } from '../src/LinearProgress/LinearProgress';
+import { Size } from '../src/types';
+import COLORS from '../src/styles/colors';
+var meta = {
+    title: 'Components/Linear Progress',
+    component: LinearProgress,
+    decorators: [],
+    tags: ['autodocs'],
+    parameters: {},
+};
+export default meta;
+export var Primary = {
+    args: {},
+};
+export var LinearProgressDotsDemo = function () {
+    return (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '56px', padding: '32px 8px' } },
+        React.createElement(LinearProgress, { value: 3.5, max: 16, size: Size.Small, label: 'Dots small', variant: LinearProgressVariant.Normal, type: LinearProgressType.Dots }),
+        React.createElement(LinearProgress, { value: 3.5, max: 16, size: Size.Medium, label: 'Dots medium', variant: LinearProgressVariant.Normal, type: LinearProgressType.Dots }),
+        React.createElement(LinearProgress, { value: 3.5, max: 16, size: Size.Large, label: 'Dots large', variant: LinearProgressVariant.Normal, type: LinearProgressType.Dots })));
+};
+export var LinearProgressBarsDemo = function () {
+    return (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '56px', padding: '32px 8px' } },
+        React.createElement(LinearProgress, { value: 3.5, max: 10, size: Size.Small, label: 'Bars small', variant: LinearProgressVariant.Normal, type: LinearProgressType.Bars }),
+        React.createElement(LinearProgress, { value: 3.5, max: 10, size: Size.Medium, label: 'Bars medium', variant: LinearProgressVariant.Normal, type: LinearProgressType.Bars }),
+        React.createElement(LinearProgress, { value: 3.5, max: 10, size: Size.Large, label: 'Bars large', variant: LinearProgressVariant.Normal, type: LinearProgressType.Bars })));
+};
+export var LinearProgressLineDemo = function () {
+    return (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '56px', padding: '32px 8px' } },
+        React.createElement(LinearProgress, { value: 2.1, max: 10, size: Size.Small, label: 'Line small', variant: LinearProgressVariant.Normal, type: LinearProgressType.Line }),
+        React.createElement(LinearProgress, { value: 2.1, max: 10, size: Size.Medium, label: 'Line medium', variant: LinearProgressVariant.Normal, type: LinearProgressType.Line }),
+        React.createElement(LinearProgress, { value: 2.1, max: 10, size: Size.Large, label: 'Line large', variant: LinearProgressVariant.Normal, type: LinearProgressType.Line })));
+};
+export var LinearProgressInvertedDotsDemo = function () {
+    return (React.createElement("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '56px',
+            padding: '32px 8px',
+            backgroundColor: COLORS.primary_800
+        } },
+        React.createElement(LinearProgress, { value: 3.5, max: 16, size: Size.Small, label: 'Dots inverted small', variant: LinearProgressVariant.Inverted, type: LinearProgressType.Dots }),
+        React.createElement(LinearProgress, { value: 3.5, max: 16, size: Size.Medium, label: 'Dots inverted medium', variant: LinearProgressVariant.Inverted, type: LinearProgressType.Dots }),
+        React.createElement(LinearProgress, { value: 3.5, max: 16, size: Size.Large, label: 'Dots inverted large', variant: LinearProgressVariant.Inverted, type: LinearProgressType.Dots })));
+};
+export var LinearProgressInvertedBarsDemo = function () {
+    return (React.createElement("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '56px',
+            padding: '32px 8px',
+            backgroundColor: COLORS.primary_800
+        } },
+        React.createElement(LinearProgress, { value: 3.5, max: 10, size: Size.Small, label: 'Bars inverted small', variant: LinearProgressVariant.Inverted, type: LinearProgressType.Bars }),
+        React.createElement(LinearProgress, { value: 3.5, max: 10, size: Size.Medium, label: 'Bars inverted medium', variant: LinearProgressVariant.Inverted, type: LinearProgressType.Bars }),
+        React.createElement(LinearProgress, { value: 3.5, max: 10, size: Size.Large, label: 'Bars inverted large', variant: LinearProgressVariant.Inverted, type: LinearProgressType.Bars })));
+};
+export var LinearProgressInvertedLineDemo = function () {
+    return (React.createElement("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '56px',
+            padding: '32px 8px',
+            backgroundColor: COLORS.primary_800
+        } },
+        React.createElement(LinearProgress, { value: 2.1, max: 10, size: Size.Small, label: 'Line inverted small', variant: LinearProgressVariant.Inverted, type: LinearProgressType.Line }),
+        React.createElement(LinearProgress, { value: 2.1, max: 10, size: Size.Medium, label: 'Line inverted medium', variant: LinearProgressVariant.Inverted, type: LinearProgressType.Line }),
+        React.createElement(LinearProgress, { value: 2.1, max: 10, size: Size.Large, label: 'Line inverted large', variant: LinearProgressVariant.Inverted, type: LinearProgressType.Line })));
+};

package/dist/stories/List.stories.d.ts

@@ -3,7 +3,7 @@ import ListRow from '../src/List/ListRow';
 import { Meta, StoryObj } from "@storybook/react/*";
 declare const meta: Meta<typeof ListRow>;
 export default meta;
-type Story = StoryObj<typeof ListRow>;
+declare type Story = StoryObj<typeof ListRow>;
 export declare const ListRowAutoDocs: Story;
 export declare const SmallListItemsDemo: () => React.JSX.Element;
 export declare const MediumListItemsDemo: () => React.JSX.Element;

package/dist/stories/List.stories.js

@@ -0,0 +1,290 @@
+import React from 'react';
+import { Size } from '../src/types';
+import { SystemIcons } from '../src/icons';
+import ListRow from '../src/List/ListRow';
+var meta = {
+    title: 'Components/List',
+    component: ListRow,
+    decorators: [function (Story) { return (React.createElement("div", { style: { height: '300px', position: 'relative' } },
+            React.createElement(Story, null))); },],
+    tags: ['autodocs'],
+    parameters: {},
+};
+export default meta;
+export var ListRowAutoDocs = {
+    args: {
+        mainText: 'overlay list item with dropdown',
+        icon: React.createElement(SystemIcons.Institute, null),
+        secondaryText: 'with secondary text',
+        note: 'with note',
+        noteTooltip: 'tooltip',
+        variant: 'overlay',
+        size: Size.Small,
+        dropdown: {
+            width: '200px', onClick: function (values) { return console.log(values); }, items: [
+                {
+                    value: 'action 1'
+                },
+                {
+                    value: 'action 2'
+                }
+            ]
+        }
+    }
+};
+export var SmallListItemsDemo = function () { return (React.createElement(React.Fragment, null,
+    React.createElement("div", null,
+        React.createElement(ListRow, { mainText: 'list item', size: Size.Small }),
+        React.createElement(ListRow, { mainText: 'list item', secondaryText: 'with secondary text', size: Size.Small }),
+        React.createElement(ListRow, { mainText: 'list item with icon', icon: React.createElement(SystemIcons.Institute, null), size: Size.Small }),
+        React.createElement(ListRow, { mainText: 'list item with icon', secondaryText: 'with secondary text', icon: React.createElement(SystemIcons.Institute, null), size: Size.Small }),
+        React.createElement(ListRow, { mainText: 'list item', note: 'with note', size: Size.Small }),
+        React.createElement(ListRow, { mainText: 'list item', secondaryText: 'with secondary text', note: 'with note', size: Size.Small }),
+        React.createElement(ListRow, { mainText: 'list item with icon', secondaryText: 'with secondary text', note: 'with note', icon: React.createElement(SystemIcons.Institute, null), size: Size.Small }),
+        React.createElement(ListRow, { mainText: 'list item with dropdown', size: Size.Small, dropdown: {
+                width: '200px', onClick: function (values) { return console.log(values); }, items: [
+                    {
+                        value: 'action 1'
+                    },
+                    {
+                        value: 'action 2'
+                    }
+                ]
+            } }),
+        React.createElement(ListRow, { mainText: 'list item with icon button', size: Size.Small, rightSideIcon: React.createElement(SystemIcons.Download, null), rightSideAction: function () { return console.log('custom icon clicked'); } }),
+        React.createElement(ListRow, { mainText: 'list item with dropdown', secondaryText: 'with secondary text', size: Size.Small, dropdown: {
+                width: '200px', onClick: function (values) { return console.log(values); }, items: [
+                    {
+                        value: 'action 1'
+                    },
+                    {
+                        value: 'action 2'
+                    }
+                ]
+            } }),
+        React.createElement(ListRow, { mainText: 'list item with icon button', secondaryText: 'with secondary text', size: Size.Small, rightSideIcon: React.createElement(SystemIcons.Download, null), rightSideAction: function () { return console.log('custom icon clicked'); } }),
+        React.createElement(ListRow, { mainText: 'list item with dropdown', secondaryText: 'with secondary text', note: 'with note', size: Size.Small, dropdown: {
+                disabled: true,
+                width: '200px', onClick: function (values) { return console.log(values); }, items: [
+                    {
+                        value: 'action 1'
+                    },
+                    {
+                        value: 'action 2'
+                    }
+                ]
+            } }),
+        React.createElement(ListRow, { mainText: 'list item with with icon button', secondaryText: 'with secondary text', note: 'with note', size: Size.Small, rightSideIcon: React.createElement(SystemIcons.Download, null), rightSideAction: function () { return console.log('custom icon clicked'); }, rightSideIconDisabled: true }),
+        React.createElement(ListRow, { mainText: 'list item with dropdown', icon: React.createElement(SystemIcons.Institute, null), secondaryText: 'with secondary text', note: 'with note', noteTooltip: 'tooltip', size: Size.Small, dropdown: {
+                width: '200px', onClick: function (values) { return console.log(values); }, items: [
+                    {
+                        value: 'action 1'
+                    },
+                    {
+                        value: 'action 2'
+                    }
+                ]
+            } }),
+        React.createElement(ListRow, { mainText: 'list item with icon button', icon: React.createElement(SystemIcons.Institute, null), secondaryText: 'with secondary text', note: 'with note', noteTooltip: 'tooltip', size: Size.Small, rightSideIcon: React.createElement(SystemIcons.Download, null), rightSideAction: function () { return console.log('custom icon clicked'); } }),
+        React.createElement(ListRow, { mainText: 'overlay list item with dropdown', icon: React.createElement(SystemIcons.Institute, null), secondaryText: 'with secondary text', note: 'with note', noteTooltip: 'tooltip', variant: 'overlay', size: Size.Small, dropdown: {
+                width: '200px', onClick: function (values) { return console.log(values); }, items: [
+                    {
+                        value: 'action 1'
+                    },
+                    {
+                        value: 'action 2'
+                    }
+                ]
+            } })))); };
+export var MediumListItemsDemo = function () { return (React.createElement(React.Fragment, null,
+    React.createElement("div", null,
+        React.createElement(ListRow, { mainText: 'list item', size: Size.Medium }),
+        React.createElement(ListRow, { mainText: 'list item', secondaryText: 'with secondary text', size: Size.Medium }),
+        React.createElement(ListRow, { mainText: 'list item with icon', icon: React.createElement(SystemIcons.Institute, null), size: Size.Medium }),
+        React.createElement(ListRow, { mainText: 'list item with icon', secondaryText: 'with secondary text', icon: React.createElement(SystemIcons.Institute, null), size: Size.Medium }),
+        React.createElement(ListRow, { mainText: 'list item', note: 'with note', size: Size.Medium }),
+        React.createElement(ListRow, { mainText: 'list item', secondaryText: 'with secondary text', note: 'with note', size: Size.Medium }),
+        React.createElement(ListRow, { mainText: 'list item with icon', secondaryText: 'with secondary text', note: 'with note', icon: React.createElement(SystemIcons.Institute, null), size: Size.Medium }),
+        React.createElement(ListRow, { mainText: 'list item with dropdown', size: Size.Medium, dropdown: {
+                width: '200px', onClick: function (values) { return console.log(values); }, items: [
+                    {
+                        value: 'action 1'
+                    },
+                    {
+                        value: 'action 2'
+                    }
+                ]
+            } }),
+        React.createElement(ListRow, { mainText: 'list item with icon button', size: Size.Medium, rightSideAction: function () { return console.log('custom icon button clicked'); }, rightSideIcon: React.createElement(SystemIcons.Download, null) }),
+        React.createElement(ListRow, { mainText: 'list item with dropdown', secondaryText: 'with secondary text', size: Size.Medium, dropdown: {
+                width: '200px', onClick: function (values) { return console.log(values); }, items: [
+                    {
+                        value: 'action 1'
+                    },
+                    {
+                        value: 'action 2'
+                    }
+                ]
+            } }),
+        React.createElement(ListRow, { mainText: 'list item with icon button', secondaryText: 'with secondary text', size: Size.Medium, rightSideAction: function () { return console.log('custom icon button clicked'); }, rightSideIcon: React.createElement(SystemIcons.Download, null) }),
+        React.createElement(ListRow, { mainText: 'list item with dropdown', secondaryText: 'with secondary text', note: 'with note', size: Size.Medium, dropdown: {
+                disabled: true,
+                width: '200px', onClick: function (values) { return console.log(values); }, items: [
+                    {
+                        value: 'action 1'
+                    },
+                    {
+                        value: 'action 2'
+                    }
+                ]
+            } }),
+        React.createElement(ListRow, { mainText: 'list item with icon button', secondaryText: 'with secondary text', note: 'with note', size: Size.Medium, rightSideAction: function () { return console.log('custom icon button clicked'); }, rightSideIcon: React.createElement(SystemIcons.Download, null), rightSideIconDisabled: true }),
+        React.createElement(ListRow, { mainText: 'list item with dropdown', icon: React.createElement(SystemIcons.Institute, null), secondaryText: 'with secondary text', note: 'with note', noteTooltip: 'tooltip', size: Size.Medium, dropdown: {
+                width: '200px', onClick: function (values) { return console.log(values); }, items: [
+                    {
+                        value: 'action 1'
+                    },
+                    {
+                        value: 'action 2'
+                    }
+                ]
+            } }),
+        React.createElement(ListRow, { mainText: 'list item with icon button', icon: React.createElement(SystemIcons.Institute, null), secondaryText: 'with secondary text', note: 'with note', noteTooltip: 'tooltip', size: Size.Medium, rightSideAction: function () { return console.log('custom icon button clicked'); }, rightSideIcon: React.createElement(SystemIcons.Download, null) }),
+        React.createElement(ListRow, { mainText: 'overlay list item with dropdown', icon: React.createElement(SystemIcons.Institute, null), secondaryText: 'with secondary text', note: 'with note', noteTooltip: 'tooltip', variant: 'overlay', size: Size.Medium, dropdown: {
+                width: '200px', onClick: function (values) { return console.log(values); }, items: [
+                    {
+                        value: 'action 1'
+                    },
+                    {
+                        value: 'action 2'
+                    }
+                ]
+            } })))); };
+export var LargeListItemsDemo = function () { return (React.createElement(React.Fragment, null,
+    React.createElement("div", null,
+        React.createElement(ListRow, { mainText: 'list item', size: Size.Large }),
+        React.createElement(ListRow, { mainText: 'list item', secondaryText: 'with secondary text', size: Size.Large }),
+        React.createElement(ListRow, { mainText: 'list item with icon', icon: React.createElement(SystemIcons.Institute, null), size: Size.Large }),
+        React.createElement(ListRow, { mainText: 'list item with icon', secondaryText: 'with secondary text', icon: React.createElement(SystemIcons.Institute, null), size: Size.Large }),
+        React.createElement(ListRow, { mainText: 'list item', note: 'with note', size: Size.Large }),
+        React.createElement(ListRow, { mainText: 'list item', secondaryText: 'with secondary text', note: 'with note', size: Size.Large }),
+        React.createElement(ListRow, { mainText: 'list item with icon', secondaryText: 'with secondary text', note: 'with note', icon: React.createElement(SystemIcons.Institute, null), size: Size.Large }),
+        React.createElement(ListRow, { mainText: 'list item with dropdown', size: Size.Large, dropdown: {
+                width: '200px', onClick: function (values) { return console.log(values); }, items: [
+                    {
+                        value: 'action 1'
+                    },
+                    {
+                        value: 'action 2'
+                    }
+                ]
+            } }),
+        React.createElement(ListRow, { mainText: 'list item with icon button', size: Size.Large, rightSideIcon: React.createElement(SystemIcons.Download, null), rightSideAction: function () { return console.log('custom icon clicked'); } }),
+        React.createElement(ListRow, { mainText: 'list item with dropdown', secondaryText: 'with secondary text', size: Size.Large, dropdown: {
+                width: '200px', onClick: function (values) { return console.log(values); }, items: [
+                    {
+                        value: 'action 1'
+                    },
+                    {
+                        value: 'action 2'
+                    }
+                ]
+            } }),
+        React.createElement(ListRow, { mainText: 'list item with icon button', secondaryText: 'with secondary text', size: Size.Large, rightSideIcon: React.createElement(SystemIcons.Download, null), rightSideAction: function () { return console.log('custom icon clicked'); } }),
+        React.createElement(ListRow, { mainText: 'list item with dropdown', secondaryText: 'with secondary text', note: 'with note', size: Size.Large, dropdown: {
+                disabled: true,
+                width: '200px', onClick: function (values) { return console.log(values); }, items: [
+                    {
+                        value: 'action 1'
+                    },
+                    {
+                        value: 'action 2'
+                    }
+                ]
+            } }),
+        React.createElement(ListRow, { mainText: 'list item with icon button', secondaryText: 'with secondary text', note: 'with note', size: Size.Large, rightSideIcon: React.createElement(SystemIcons.Download, null), rightSideAction: function () { return console.log('custom icon clicked'); }, rightSideIconDisabled: true }),
+        React.createElement(ListRow, { mainText: 'list item with dropdown', icon: React.createElement(SystemIcons.Institute, null), secondaryText: 'with secondary text', note: 'with note', noteTooltip: 'tooltip', size: Size.Large, dropdown: {
+                width: '200px', onClick: function (values) { return console.log(values); }, items: [
+                    {
+                        value: 'action 1'
+                    },
+                    {
+                        value: 'action 2'
+                    }
+                ]
+            } }),
+        React.createElement(ListRow, { mainText: 'list item with icon button', icon: React.createElement(SystemIcons.Institute, null), secondaryText: 'with secondary text', note: 'with note', noteTooltip: 'tooltip', size: Size.Large, rightSideIcon: React.createElement(SystemIcons.Download, null), rightSideAction: function () { return console.log('custom icon clicked'); } }),
+        React.createElement(ListRow, { mainText: 'overlay list item with dropdown', icon: React.createElement(SystemIcons.Institute, null), secondaryText: 'with secondary text', note: 'with note', noteTooltip: 'tooltip', variant: 'overlay', size: Size.Large, dropdown: {
+                width: '200px', onClick: function (values) { return console.log(values); }, items: [
+                    {
+                        value: 'action 1'
+                    },
+                    {
+                        value: 'action 2'
+                    }
+                ]
+            } })))); };
+export var MediumListItemsWithActionDemo = function () { return (React.createElement(React.Fragment, null,
+    React.createElement("div", null,
+        React.createElement(ListRow, { mainText: 'list item', action: function () { return console.log('click'); }, size: Size.Medium }),
+        React.createElement(ListRow, { mainText: 'list item', action: function () { return console.log('click'); }, secondaryText: 'with secondary text', size: Size.Medium }),
+        React.createElement(ListRow, { mainText: 'list item with icon', action: function () { return console.log('click'); }, icon: React.createElement(SystemIcons.Institute, null), size: Size.Medium }),
+        React.createElement(ListRow, { mainText: 'list item with icon', action: function () { return console.log('click'); }, secondaryText: 'with secondary text', icon: React.createElement(SystemIcons.Institute, null), size: Size.Medium }),
+        React.createElement(ListRow, { mainText: 'list item', action: function () { return console.log('click'); }, note: 'with note', size: Size.Medium }),
+        React.createElement(ListRow, { mainText: 'list item', action: function () { return console.log('click'); }, secondaryText: 'with secondary text', note: 'with note', size: Size.Medium }),
+        React.createElement(ListRow, { mainText: 'list item with icon', action: function () { return console.log('click'); }, secondaryText: 'with secondary text', note: 'with note', icon: React.createElement(SystemIcons.Institute, null), size: Size.Medium }),
+        React.createElement(ListRow, { mainText: 'list item with dropdown', action: function () { return console.log('click'); }, size: Size.Medium, dropdown: {
+                width: '200px', onClick: function (values) { return console.log(values); }, items: [
+                    {
+                        value: 'action 1'
+                    },
+                    {
+                        value: 'action 2'
+                    }
+                ]
+            } }),
+        React.createElement(ListRow, { mainText: 'list item with icon button', action: function () { return console.log('click'); }, size: Size.Medium, rightSideIcon: React.createElement(SystemIcons.Download, null) }),
+        React.createElement(ListRow, { mainText: 'list item with dropdown', action: function () { return console.log('click'); }, secondaryText: 'with secondary text', size: Size.Medium, dropdown: {
+                width: '200px', onClick: function (values) { return console.log(values); }, items: [
+                    {
+                        value: 'action 1'
+                    },
+                    {
+                        value: 'action 2'
+                    }
+                ]
+            } }),
+        React.createElement(ListRow, { mainText: 'list item with icon button', action: function () { return console.log('click'); }, secondaryText: 'with secondary text', size: Size.Medium, rightSideAction: function () { return console.log('custom icon button clicked'); }, rightSideIcon: React.createElement(SystemIcons.Download, null) }),
+        React.createElement(ListRow, { mainText: 'list item with dropdown', action: function () { return console.log('click'); }, secondaryText: 'with secondary text', note: 'with note', size: Size.Medium, dropdown: {
+                disabled: true,
+                width: '200px', onClick: function (values) { return console.log(values); }, items: [
+                    {
+                        value: 'action 1'
+                    },
+                    {
+                        value: 'action 2'
+                    }
+                ]
+            } }),
+        React.createElement(ListRow, { mainText: 'list item with icon button', action: function () { return console.log('click'); }, secondaryText: 'with secondary text', note: 'with note', size: Size.Medium, rightSideAction: function () { return console.log('custom icon button clicked'); }, rightSideIcon: React.createElement(SystemIcons.Download, null), rightSideIconDisabled: true }),
+        React.createElement(ListRow, { mainText: 'list item with dropdown', action: function () { return console.log('click'); }, icon: React.createElement(SystemIcons.Institute, null), secondaryText: 'with secondary text', note: 'with note', disabled: true, noteTooltip: 'tooltip', size: Size.Medium, dropdown: {
+                width: '200px', onClick: function (values) { return console.log(values); }, items: [
+                    {
+                        value: 'action 1'
+                    },
+                    {
+                        value: 'action 2'
+                    }
+                ]
+            } }),
+        React.createElement(ListRow, { mainText: 'list item with icon button', action: function () { return console.log('click'); }, icon: React.createElement(SystemIcons.Institute, null), secondaryText: 'with secondary text', note: 'with note', disabled: true, noteTooltip: 'tooltip', size: Size.Medium, rightSideAction: function () { return console.log('custom icon button clicked'); }, rightSideIcon: React.createElement(SystemIcons.Download, null) }),
+        React.createElement(ListRow, { mainText: 'overlay list item with dropdown', action: function () { return console.log('click'); }, icon: React.createElement(SystemIcons.Institute, null), secondaryText: 'with secondary text', note: 'with note', variant: 'overlay', noteTooltip: 'tooltip', size: Size.Medium, dropdown: {
+                width: '200px', onClick: function (values) { return console.log(values); }, items: [
+                    {
+                        value: 'action 1'
+                    },
+                    {
+                        value: 'action 2'
+                    }
+                ]
+            } })))); };