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

package/dist/stories/Card/HorizontalCard.stories.d.ts

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

package/dist/stories/Card/HorizontalCard.stories.js

@@ -0,0 +1,116 @@
+import React from 'react';
+import Image from '../assets/PlaceholderModalImage.png';
+import { ContentIcons } from '../../src/icons';
+import { SystemIcons } from '../../src/icons';
+import COLORS from '../../src/styles/colors';
+import { HorizontalCard } from '../../src/Card/HorizontalCard';
+var action = function () {
+    console.log('action');
+};
+var actions = [
+    { componentType: 'icon', action: action, icon: React.createElement(SystemIcons.Share, null), tooltip: { label: 'Tooltip' } },
+    { componentType: 'icon', action: action, icon: React.createElement(SystemIcons.OpenNewWindow, null), tooltip: { label: 'Tooltip' } },
+    { componentType: 'toggle', active: false,
+        onChange: action,
+        defaultState: { icon: React.createElement(SystemIcons.Play, null), color: COLORS.neutral_200 },
+        activeState: { icon: React.createElement(SystemIcons.Pause, null), color: COLORS.neutral_200 } },
+];
+var tags = [{ label: 'label 1', variant: 'critical' }, { label: 'label 2', variant: 'positive' }, { label: 'label 3', variant: 'warning' }];
+var meta = {
+    title: 'Components/Card/HorizontalCard',
+    component: HorizontalCard,
+    decorators: [],
+    tags: ['autodocs'],
+    parameters: {},
+};
+export default meta;
+export var Primary = {
+    args: {
+        title: 'Title',
+        description: 'Description',
+        variant: 'elevated',
+        actions: actions,
+        tags: tags,
+        icon: React.createElement(ContentIcons.MoodHappy, null),
+        action: action
+    },
+};
+var progress = { max: 100, value: 30 };
+export var Outline = function () {
+    return (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '24px', background: COLORS.neutral_20 } },
+        React.createElement("div", { style: { display: 'flex', width: '1000px', gap: '24px' } },
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', action: action }),
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', action: action, disabled: true })),
+        React.createElement("div", { style: { display: 'flex', width: '1000px', gap: '24px' } },
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', icon: React.createElement(ContentIcons.MoodHappy, null), action: action }),
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', icon: React.createElement(ContentIcons.MoodHappy, null), action: action, disabled: true })),
+        React.createElement("div", { style: { display: 'flex', width: '1000px', gap: '24px' } },
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', image: { alt: 'placeholas da sdas d asdas das das dader', src: 'bla bla', fallbackSrc: Image }, action: action }),
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', image: { alt: 'placeholder', src: Image }, action: action, disabled: true })),
+        React.createElement("div", { style: { display: 'flex', width: '1000px', gap: '24px' } },
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', actions: actions, action: action }),
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', action: action, actions: actions, disabled: true })),
+        React.createElement("div", { style: { display: 'flex', width: '1000px', gap: '24px' } },
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', actions: actions, icon: React.createElement(ContentIcons.MoodHappy, null), action: action }),
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', icon: React.createElement(ContentIcons.MoodHappy, null), actions: actions, action: action, disabled: true })),
+        React.createElement("div", { style: { display: 'flex', width: '1000px', gap: '24px' } },
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', image: { alt: 'placeholder', src: Image }, actions: actions, action: action }),
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', image: { alt: 'placeholder', src: Image }, actions: actions, action: action, disabled: true })),
+        React.createElement("div", { style: { display: 'flex', width: '1000px', gap: '24px' } },
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', actions: actions, tags: tags, action: action }),
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', tags: tags, action: action, actions: actions, disabled: true })),
+        React.createElement("div", { style: { display: 'flex', width: '1000px', gap: '24px' } },
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', actions: actions, tags: tags, icon: React.createElement(ContentIcons.MoodHappy, null), action: action }),
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', icon: React.createElement(ContentIcons.MoodHappy, null), actions: actions, tags: tags, action: action, disabled: true })),
+        React.createElement("div", { style: { display: 'flex', width: '1000px', gap: '24px' } },
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', image: { alt: 'placeholder', src: Image }, actions: actions, tags: tags, action: action }),
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', image: { alt: 'placeholder', src: Image }, actions: actions, tags: tags, action: action, disabled: true })),
+        React.createElement("div", { style: { display: 'flex', width: '1000px', gap: '24px' } },
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', actions: actions, progress: progress, tags: tags, action: action }),
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', tags: tags, progress: progress, action: action, actions: actions, disabled: true })),
+        React.createElement("div", { style: { display: 'flex', width: '1000px', gap: '24px' } },
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', actions: actions, progress: progress, tags: tags, icon: React.createElement(ContentIcons.MoodHappy, null), action: action }),
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', icon: React.createElement(ContentIcons.MoodHappy, null), actions: actions, tags: tags, action: action, disabled: true })),
+        React.createElement("div", { style: { display: 'flex', width: '1000px', gap: '24px' } },
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', image: { alt: 'placeholder', src: Image }, actions: actions, progress: progress, tags: tags, action: action }),
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', image: { alt: 'placeholder', src: Image }, actions: actions, progress: progress, tags: tags, action: action, disabled: true }))));
+};
+export var Elevated = function () {
+    return (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '24px', background: COLORS.neutral_20 } },
+        React.createElement("div", { style: { display: 'flex', width: '1000px', gap: '24px' } },
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', variant: 'elevated', action: action }),
+            React.createElement(HorizontalCard, { title: 'Title', variant: 'elevated', description: 'Description', action: action, disabled: true })),
+        React.createElement("div", { style: { display: 'flex', width: '1000px', gap: '24px' } },
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', variant: 'elevated', icon: React.createElement(ContentIcons.MoodHappy, null), action: action }),
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', variant: 'elevated', icon: React.createElement(ContentIcons.MoodHappy, null), action: action, disabled: true })),
+        React.createElement("div", { style: { display: 'flex', width: '1000px', gap: '24px' } },
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', variant: 'elevated', image: { alt: 'placeholder', src: Image }, action: action }),
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', image: { alt: 'placeholder', src: Image }, variant: 'elevated', action: action, disabled: true })),
+        React.createElement("div", { style: { display: 'flex', width: '1000px', gap: '24px' } },
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', variant: 'elevated', actions: actions, action: action }),
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', variant: 'elevated', action: action, actions: actions, disabled: true })),
+        React.createElement("div", { style: { display: 'flex', width: '1000px', gap: '24px' } },
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', actions: actions, variant: 'elevated', icon: React.createElement(ContentIcons.MoodHappy, null), action: action }),
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', icon: React.createElement(ContentIcons.MoodHappy, null), actions: actions, variant: 'elevated', action: action, disabled: true })),
+        React.createElement("div", { style: { display: 'flex', width: '1000px', gap: '24px' } },
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', image: { alt: 'placeholder', src: Image }, variant: 'elevated', actions: actions, action: action }),
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', image: { alt: 'placeholder', src: Image }, actions: actions, variant: 'elevated', action: action, disabled: true })),
+        React.createElement("div", { style: { display: 'flex', width: '1000px', gap: '24px' } },
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', actions: actions, variant: 'elevated', tags: tags, action: action }),
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', tags: tags, action: action, variant: 'elevated', actions: actions, disabled: true })),
+        React.createElement("div", { style: { display: 'flex', width: '1000px', gap: '24px' } },
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', variant: 'elevated', actions: actions, tags: tags, icon: React.createElement(ContentIcons.MoodHappy, null), action: action }),
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', icon: React.createElement(ContentIcons.MoodHappy, null), actions: actions, variant: 'elevated', tags: tags, action: action, disabled: true })),
+        React.createElement("div", { style: { display: 'flex', width: '1000px', gap: '24px' } },
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', image: { alt: 'placeholder', src: Image }, actions: actions, tags: tags, variant: 'elevated', action: action }),
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', image: { alt: 'placeholder', src: Image }, actions: actions, variant: 'elevated', tags: tags, action: action, disabled: true })),
+        React.createElement("div", { style: { display: 'flex', width: '1000px', gap: '24px' } },
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', actions: actions, variant: 'elevated', progress: progress, tags: tags, action: action }),
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', tags: tags, variant: 'elevated', progress: progress, action: action, actions: actions, disabled: true })),
+        React.createElement("div", { style: { display: 'flex', width: '1000px', gap: '24px' } },
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', actions: actions, progress: progress, variant: 'elevated', tags: tags, icon: React.createElement(ContentIcons.MoodHappy, null), action: action }),
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', icon: React.createElement(ContentIcons.MoodHappy, null), variant: 'elevated', actions: actions, tags: tags, action: action, disabled: true })),
+        React.createElement("div", { style: { display: 'flex', width: '1000px', gap: '24px' } },
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', image: { alt: 'placeholder', src: Image }, actions: actions, variant: 'elevated', progress: progress, tags: tags, action: action }),
+            React.createElement(HorizontalCard, { title: 'Title', description: 'Description', image: { alt: 'placeholder', src: Image }, actions: actions, progress: progress, variant: 'elevated', tags: tags, action: action, disabled: true }))));
+};

package/dist/stories/Chip/ActionChip.stories.d.ts

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

package/dist/stories/Chip/ActionChip.stories.js

@@ -0,0 +1,69 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import ActionChip from '../../src/Chips/ActionChip';
+import { Size } from '../../src/types';
+import { SystemIcons } from '../../src/icons';
+import styled from 'styled-components';
+var meta = {
+    title: 'Components/Chips/ActionChip',
+    component: ActionChip,
+    tags: ['autodocs'],
+};
+export default meta;
+export var ActionChipDocs = {
+    args: {
+        text: "Send E-mail", icon: React.createElement(SystemIcons.Mail, null), size: Size.Small
+    }
+};
+var ChipContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n"])));
+var ChipWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1 0 calc(16.6% - 16px);\n  padding: 8px;\n\n  h5 {\n    padding: 0 0 0 10px;\n    font-size: 16px;\n    margin: 0;\n  }\n"], ["\n  flex: 1 0 calc(16.6% - 16px);\n  padding: 8px;\n\n  h5 {\n    padding: 0 0 0 10px;\n    font-size: 16px;\n    margin: 0;\n  }\n"])));
+export var ActionChipDemo = function () { return (React.createElement(React.Fragment, null,
+    React.createElement("h5", null, "Action Chips"),
+    React.createElement("p", null,
+        React.createElement("b", null, "ARIA (Accessibility Rich Internet Application) NOTE:"),
+        " ",
+        React.createElement("br", null),
+        "Official guidance for this kind of UI element is poor. Some adjustment is likely. ",
+        React.createElement("br", null)),
+    React.createElement("h6", null, "Chips with icons"),
+    React.createElement(ChipContainer, null,
+        React.createElement(ChipWrapper, null, "Small"),
+        React.createElement(ChipWrapper, null, "Medium"),
+        React.createElement(ChipWrapper, null, "Large")),
+    React.createElement(ChipContainer, null,
+        React.createElement(ChipWrapper, null,
+            React.createElement(ActionChip, { dataTestId: 'someCustomDataTestId', text: "Send E-mail", icon: React.createElement(SystemIcons.Mail, null), size: Size.Small, onClick: function () { return console.log('Clicked on a chip'); } })),
+        React.createElement(ChipWrapper, null,
+            React.createElement(ActionChip, { text: "Send E-mail", icon: React.createElement(SystemIcons.Mail, null), size: Size.Medium, onClick: function () { return console.log('Clicked on a chip'); } })),
+        React.createElement(ChipWrapper, null,
+            React.createElement(ActionChip, { text: "Send E-mail", icon: React.createElement(SystemIcons.Mail, null), size: Size.Large, onClick: function () { return console.log('Clicked on a chip'); } }))),
+    React.createElement(ChipContainer, null,
+        React.createElement(ChipWrapper, null,
+            React.createElement(ActionChip, { text: "Send E-mail", icon: React.createElement(SystemIcons.Mail, null), size: Size.Small, disabled: true, onClick: function () { return console.log('Clicked on a chip'); } })),
+        React.createElement(ChipWrapper, null,
+            React.createElement(ActionChip, { text: "Send E-mail", icon: React.createElement(SystemIcons.Mail, null), size: Size.Medium, disabled: true, onClick: function () { return console.log('Clicked on a chip'); } })),
+        React.createElement(ChipWrapper, null,
+            React.createElement(ActionChip, { text: "Send E-mail", icon: React.createElement(SystemIcons.Mail, null), size: Size.Large, disabled: true, onClick: function () { return console.log('Clicked on a chip'); } }))),
+    React.createElement("h6", null, "Chips Without Icons"),
+    React.createElement(ChipContainer, null,
+        React.createElement(ChipWrapper, null, "Small"),
+        React.createElement(ChipWrapper, null, "Medium"),
+        React.createElement(ChipWrapper, null, "Large")),
+    React.createElement(ChipContainer, null,
+        React.createElement(ChipWrapper, null,
+            React.createElement(ActionChip, { text: "Send E-mail", size: Size.Small, onClick: function () { return console.log('Clicked on a chip'); } })),
+        React.createElement(ChipWrapper, null,
+            React.createElement(ActionChip, { text: "Send E-mail", size: Size.Medium, onClick: function () { return console.log('Clicked on a chip'); } })),
+        React.createElement(ChipWrapper, null,
+            React.createElement(ActionChip, { text: "Send E-mail", size: Size.Large, onClick: function () { return console.log('Clicked on a chip'); } }))),
+    React.createElement(ChipContainer, null,
+        React.createElement(ChipWrapper, null,
+            React.createElement(ActionChip, { text: "Send E-mail", size: Size.Small, disabled: true, onClick: function () { return console.log('Clicked on a chip'); } })),
+        React.createElement(ChipWrapper, null,
+            React.createElement(ActionChip, { text: "Send E-mail", size: Size.Medium, disabled: true, onClick: function () { return console.log('Clicked on a chip'); } })),
+        React.createElement(ChipWrapper, null,
+            React.createElement(ActionChip, { text: "Send E-mail", size: Size.Large, disabled: true, onClick: function () { return console.log('Clicked on a chip'); } }))))); };
+var templateObject_1, templateObject_2;

package/dist/stories/Chip/ChoiceChip.stories.d.ts

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

package/dist/stories/Chip/ChoiceChip.stories.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import ChoiceChips from '../../src/Chips/ChoiceChips';
+import { Size } from '../../src/types';
+var meta = {
+    title: 'Components/Chips/ChoiceChips',
+    component: ChoiceChips,
+    tags: ['autodocs'],
+};
+export default meta;
+export var ChoiceChipDocs = {
+    args: {
+        selected: '',
+        values: [{ label: 'Chip 1', value: 'small', size: Size.Medium },
+            { label: 'Chip 2', value: 'medium', size: Size.Medium },
+            { label: 'Chip 3', value: 'large', size: Size.Medium }],
+    },
+};
+export var ChoiceChipDemo = function () { return (React.createElement(React.Fragment, null,
+    React.createElement("h5", null, "Choice Chips"),
+    React.createElement("p", null,
+        React.createElement("b", null, "ARIA (Accessibility Rich Internet Application) NOTE:"),
+        " ",
+        React.createElement("br", null),
+        "Official guidance for this kind of UI element is poor. Some adjustment is likely. ",
+        React.createElement("br", null)),
+    React.createElement("h6", null, "No Selected Chips"),
+    React.createElement(ChoiceChips, { selected: 'small', dataTestId: 'somecustomtestid', onClick: function (value) { return console.log('Clicked on a chip', value); }, values: [
+            { label: 'Small', value: 'small', size: Size.Small },
+            { label: 'Medium', value: 'medium', size: Size.Medium },
+            { label: 'Large', value: 'large', size: Size.Large },
+        ] }),
+    React.createElement("h6", null, "Selected Chip"),
+    React.createElement(ChoiceChips, { selected: 'small', onClick: function (value) { return console.log('Clicked on a chip', value); }, values: [
+            { label: 'Small', value: 'small', size: Size.Small },
+            { label: 'Medium', value: 'medium', size: Size.Medium },
+            { label: 'Large', value: 'large', size: Size.Large },
+        ] }),
+    React.createElement("h6", null, "Disabled Chips"),
+    React.createElement(ChoiceChips, { selected: 'small', onClick: function (value) { return console.log('Clicked on a chip', value); }, values: [
+            { label: 'Small', value: 'small', size: Size.Small },
+            { label: 'Medium', value: 'medium', size: Size.Medium },
+            { label: 'Large', value: 'large', size: Size.Large },
+        ], disabled: true }))); };

package/dist/stories/Chip/FilterChip.stories.d.ts

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

package/dist/stories/Chip/FilterChip.stories.js

@@ -0,0 +1,68 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import FilterChip from '../../src/Chips/FilterChip';
+import { Size } from '../../src/types';
+import styled from 'styled-components';
+var meta = {
+    title: 'Components/Chips/FilterChip',
+    component: FilterChip,
+    tags: ['autodocs'],
+};
+export default meta;
+export var FilterChipDocs = {
+    args: {
+        size: Size.Medium,
+        text: 'Label',
+        selected: false
+    },
+};
+var ChipContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n"])));
+var ChipWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1 0 calc(16.6% - 16px);\n  padding: 8px;\n\n  h5 {\n    padding: 0 0 0 10px;\n    font-size: 16px;\n    margin: 0;\n  }\n"], ["\n  flex: 1 0 calc(16.6% - 16px);\n  padding: 8px;\n\n  h5 {\n    padding: 0 0 0 10px;\n    font-size: 16px;\n    margin: 0;\n  }\n"])));
+export var FilterChipDemo = function () { return (React.createElement(React.Fragment, null,
+    React.createElement("h5", null, "Filter Chips"),
+    React.createElement("p", null,
+        React.createElement("b", null, "ARIA (Accessibility Rich Internet Application) NOTE:"),
+        " ",
+        React.createElement("br", null),
+        "Official guidance for this kind of UI element is poor. Some adjustment is likely. ",
+        React.createElement("br", null)),
+    React.createElement("h6", null, "Selected Chips"),
+    React.createElement(ChipContainer, null,
+        React.createElement(ChipWrapper, null, "Small"),
+        React.createElement(ChipWrapper, null, "Medium"),
+        React.createElement(ChipWrapper, null, "Large")),
+    React.createElement(ChipContainer, null,
+        React.createElement(ChipWrapper, null,
+            React.createElement(FilterChip, { dataTestId: 'someCustomTestId', text: "Normal chip", selected: true, size: Size.Small, onClick: function () { return console.log('Clicked on a chip'); } })),
+        React.createElement(ChipWrapper, null,
+            React.createElement(FilterChip, { text: "Normal chip", selected: true, size: Size.Medium, onClick: function () { return console.log('Clicked on a chip'); } })),
+        React.createElement(ChipWrapper, null,
+            React.createElement(FilterChip, { text: "Normal chip", selected: true, size: Size.Large, onClick: function () { return console.log('Clicked on a chip'); } }))),
+    React.createElement("h6", null, "Unselected Chips"),
+    React.createElement(ChipContainer, null,
+        React.createElement(ChipWrapper, null, "Small"),
+        React.createElement(ChipWrapper, null, "Medium"),
+        React.createElement(ChipWrapper, null, "Large")),
+    React.createElement(ChipContainer, null,
+        React.createElement(ChipWrapper, null,
+            React.createElement(FilterChip, { text: "Normal chip", size: Size.Small, selected: false, onClick: function () { return console.log('Clicked on a chip'); } })),
+        React.createElement(ChipWrapper, null,
+            React.createElement(FilterChip, { text: "Normal chip", size: Size.Medium, selected: false, onClick: function () { return console.log('Clicked on a chip'); } })),
+        React.createElement(ChipWrapper, null,
+            React.createElement(FilterChip, { text: "Normal chip", size: Size.Large, selected: false, onClick: function () { return console.log('Clicked on a chip'); } }))),
+    React.createElement("h6", null, "Disabled Chips"),
+    React.createElement(ChipContainer, null,
+        React.createElement(ChipWrapper, null, "Small"),
+        React.createElement(ChipWrapper, null, "Medium"),
+        React.createElement(ChipWrapper, null, "Large")),
+    React.createElement(ChipContainer, null,
+        React.createElement(ChipWrapper, null,
+            React.createElement(FilterChip, { text: "Disabled chip", size: Size.Small, disabled: true, selected: false, onClick: function () { return console.log('Clicked on a chip'); } })),
+        React.createElement(ChipWrapper, null,
+            React.createElement(FilterChip, { text: "Disabled chip", size: Size.Medium, disabled: true, selected: false, onClick: function () { return console.log('Clicked on a chip'); } })),
+        React.createElement(ChipWrapper, null,
+            React.createElement(FilterChip, { text: "Disabled chip", size: Size.Large, disabled: true, selected: false, onClick: function () { return console.log('Clicked on a chip'); } }))))); };
+var templateObject_1, templateObject_2;

package/dist/stories/Chip/InputChip.stories.d.ts

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

package/dist/stories/Chip/InputChip.stories.js

@@ -0,0 +1,94 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import InputChip from '../../src/Chips/InputChip';
+import ChipInput from '../../src/ChipsInput/ChipInput';
+import InputLabel from '../../src/InputFields/Label';
+import { Size } from '../../src/types';
+import { SystemIcons } from '../../src/icons';
+import { States } from '../../src/types';
+import styled from 'styled-components';
+var meta = {
+    title: 'Components/Chips/InputChip',
+    component: InputChip,
+    tags: ['autodocs'],
+};
+export default meta;
+export var InputChipDocs = {
+    args: {
+        text: "Normal chip",
+        size: Size.Small,
+        icon: React.createElement(SystemIcons.User, null)
+    }
+};
+var ChipContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n"])));
+var ChipWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1 0 calc(16.6% - 16px);\n  padding: 8px;\n\n  h5 {\n    padding: 0 0 0 10px;\n    font-size: 16px;\n    margin: 0;\n  }\n"], ["\n  flex: 1 0 calc(16.6% - 16px);\n  padding: 8px;\n\n  h5 {\n    padding: 0 0 0 10px;\n    font-size: 16px;\n    margin: 0;\n  }\n"])));
+export var InputChipDemo = function () { return (React.createElement(React.Fragment, null,
+    React.createElement("h5", null, "Input Chips"),
+    React.createElement("p", null,
+        React.createElement("b", null, "ARIA (Accessibility Rich Internet Application) NOTE:"),
+        " ",
+        React.createElement("br", null),
+        "Official guidance for this kind of UI element is poor. Some adjustment is likely. ",
+        React.createElement("br", null)),
+    React.createElement("h6", null, "Chips with icons"),
+    React.createElement(ChipContainer, null,
+        React.createElement(ChipWrapper, null, "Small"),
+        React.createElement(ChipWrapper, null, "Medium"),
+        React.createElement(ChipWrapper, null, "Large")),
+    React.createElement(ChipContainer, null,
+        React.createElement(ChipWrapper, null,
+            React.createElement(InputChip, { dataTestId: 'someCustomInputChip', text: "Normal chip", size: Size.Small, icon: React.createElement(SystemIcons.User, null), onClick: function () { return console.log('Clicked on a chip'); }, onRemove: function () { return console.log('Clicked on Remove'); } })),
+        React.createElement(ChipWrapper, null,
+            React.createElement(InputChip, { text: "Normal chip", size: Size.Medium, icon: React.createElement(SystemIcons.User, null), onClick: function () { return console.log('Clicked on a chip'); }, onRemove: function () { return console.log('Clicked on Remove'); } })),
+        React.createElement(ChipWrapper, null,
+            React.createElement(InputChip, { text: "Normal chip", size: Size.Large, icon: React.createElement(SystemIcons.User, null), onClick: function () { return console.log('Clicked on a chip'); }, onRemove: function () { return console.log('Clicked on Remove'); } }))),
+    React.createElement(ChipContainer, null,
+        React.createElement(ChipWrapper, null,
+            React.createElement(InputChip, { text: "Invalid chip", size: Size.Small, variant: States.Invalid, icon: React.createElement(SystemIcons.User, null), onClick: function () { return console.log('Clicked on a chip'); }, onRemove: function () { return console.log('Clicked on Remove'); } })),
+        React.createElement(ChipWrapper, null,
+            React.createElement(InputChip, { text: "Invalid chip", size: Size.Medium, variant: States.Invalid, icon: React.createElement(SystemIcons.User, null), onClick: function () { return console.log('Clicked on a chip'); }, onRemove: function () { return console.log('Clicked on Remove'); } })),
+        React.createElement(ChipWrapper, null,
+            React.createElement(InputChip, { text: "Invalid chip", size: Size.Large, variant: States.Invalid, icon: React.createElement(SystemIcons.User, null), onClick: function () { return console.log('Clicked on a chip'); }, onRemove: function () { return console.log('Clicked on Remove'); } }))),
+    React.createElement(ChipContainer, null,
+        React.createElement(ChipWrapper, null,
+            React.createElement(InputChip, { text: "Disabled chip", size: Size.Small, variant: States.Invalid, icon: React.createElement(SystemIcons.User, null), disabled: true, onClick: function () { return console.log('Clicked on a chip'); }, onRemove: function () { return console.log('Clicked on Remove'); } })),
+        React.createElement(ChipWrapper, null,
+            React.createElement(InputChip, { text: "Disabled chip", size: Size.Medium, variant: States.Invalid, icon: React.createElement(SystemIcons.User, null), disabled: true, onClick: function () { return console.log('Clicked on a chip'); }, onRemove: function () { return console.log('Clicked on Remove'); } })),
+        React.createElement(ChipWrapper, null,
+            React.createElement(InputChip, { text: "Disabled chip", size: Size.Large, variant: States.Invalid, icon: React.createElement(SystemIcons.User, null), disabled: true, onClick: function () { return console.log('Clicked on a chip'); }, onRemove: function () { return console.log('Clicked on Remove'); } }))),
+    React.createElement("h6", null, "Chips without icons"),
+    React.createElement(ChipContainer, null,
+        React.createElement(ChipWrapper, null, "Small"),
+        React.createElement(ChipWrapper, null, "Medium"),
+        React.createElement(ChipWrapper, null, "Large")),
+    React.createElement(ChipContainer, null,
+        React.createElement(ChipWrapper, null,
+            React.createElement(InputChip, { text: "Normal chip", size: Size.Small, onClick: function () { return console.log('Clicked on a chip'); }, onRemove: function () { return console.log('Clicked on Remove'); } })),
+        React.createElement(ChipWrapper, null,
+            React.createElement(InputChip, { text: "Normal chip", size: Size.Medium, onClick: function () { return console.log('Clicked on a chip'); }, onRemove: function () { return console.log('Clicked on Remove'); } })),
+        React.createElement(ChipWrapper, null,
+            React.createElement(InputChip, { text: "Normal chip", size: Size.Large, onClick: function () { return console.log('Clicked on a chip'); }, onRemove: function () { return console.log('Clicked on Remove'); } }))),
+    React.createElement(ChipContainer, null,
+        React.createElement(ChipWrapper, null,
+            React.createElement(InputChip, { text: "Invalid chip", size: Size.Small, variant: States.Invalid, onClick: function () { return console.log('Clicked on a chip'); }, onRemove: function () { return console.log('Clicked on Remove'); } })),
+        React.createElement(ChipWrapper, null,
+            React.createElement(InputChip, { text: "Invalid chip", size: Size.Medium, variant: States.Invalid, onClick: function () { return console.log('Clicked on a chip'); }, onRemove: function () { return console.log('Clicked on Remove'); } })),
+        React.createElement(ChipWrapper, null,
+            React.createElement(InputChip, { text: "Invalid chip", size: Size.Large, variant: States.Invalid, onClick: function () { return console.log('Clicked on a chip'); }, onRemove: function () { return console.log('Clicked on Remove'); } }))),
+    React.createElement(ChipContainer, null,
+        React.createElement(ChipWrapper, null,
+            React.createElement(InputChip, { text: "Disabled chip", size: Size.Small, variant: States.Invalid, disabled: true, onClick: function () { return console.log('Clicked on a chip'); }, onRemove: function () { return console.log('Clicked on Remove'); } })),
+        React.createElement(ChipWrapper, null,
+            React.createElement(InputChip, { text: "Disabled chip", size: Size.Medium, variant: States.Invalid, disabled: true, onClick: function () { return console.log('Clicked on a chip'); }, onRemove: function () { return console.log('Clicked on Remove'); } })),
+        React.createElement(ChipWrapper, null,
+            React.createElement(InputChip, { text: "Disabled chip", size: Size.Large, variant: States.Invalid, disabled: true, onClick: function () { return console.log('Clicked on a chip'); }, onRemove: function () { return console.log('Clicked on Remove'); } }))),
+    React.createElement("h6", null, "Chips in input field normal"),
+    React.createElement(InputLabel, { inputId: "emails", text: "Emails" }),
+    React.createElement(ChipInput, { icon: React.createElement(SystemIcons.Team, null), autoSave: true, inputId: "emails", values: ['user@email.com', 'user2@gmail.com'], onValueChange: function (newValue) { return console.log(newValue); }, placeholder: "Enter e-mail addresses" }),
+    React.createElement("h6", null, "Invalid chips in input field "),
+    React.createElement(InputLabel, { inputId: "emails-invalid", text: "Emails" }),
+    React.createElement(ChipInput, { icon: React.createElement(SystemIcons.Team, null), multiLine: false, size: Size.Small, inputId: "emails-invalid", variants: [States.Invalid], values: ['user'], onValueChange: function (newValue) { return console.log(newValue); }, placeholder: "Enter e-mail addresses", validationMessage: "user is not a valid e-mail address" }))); };
+var templateObject_1, templateObject_2;

package/dist/stories/Dropdown/BasicDropdown.stories.d.ts

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

package/dist/stories/Dropdown/BasicDropdown.stories.js

@@ -0,0 +1,122 @@
+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, { useState } from 'react';
+import BasicDropdown from '../../src/Dropdown/BasicDropdown';
+import { SystemIcons } from '../../src/icons';
+import { Size } from '../../src/types';
+var meta = {
+    title: 'Components/Dropdown/BasicDropdown',
+    component: BasicDropdown,
+    decorators: [function (Story) { return (React.createElement("div", { style: { height: '300px', position: 'relative' } },
+            React.createElement(Story, null))); },],
+    tags: ['autodocs'],
+    parameters: {
+        docs: { story: {} }
+    }
+};
+export default meta;
+var list = [
+    {
+        value: 'Val_Contact',
+        displayLabel: 'Contact 123456789012345678901asdasdasd',
+    },
+    {
+        value: 'Val_About',
+        displayLabel: 'About',
+    },
+    {
+        value: 'Val_Base',
+        displayLabel: 'Base',
+    },
+    {
+        value: 'Val_Blog',
+        displayLabel: 'Blog',
+        disabled: true,
+    },
+    {
+        value: 'Val_Contact 3',
+        displayLabel: 'Contact 3',
+    },
+    {
+        value: 'Val_Custom',
+        displayLabel: 'Custom',
+    },
+    {
+        value: 'Val_Support',
+        displayLabel: 'Support',
+    },
+    {
+        value: 'Val_Tools',
+        displayLabel: 'Tools',
+    },
+    {
+        value: 'Val_Tools 2',
+        displayLabel: 'Tools 2',
+    },
+    {
+        value: 'Val_Tools 3',
+        displayLabel: 'Tools 3',
+    },
+];
+export var BasicDropdownAutoDocs = {
+    args: {
+        list: __spreadArray([], list.slice(0, 3), true),
+        itemsType: 'checkbox',
+        onSelect: function () { },
+        id: 'demoId'
+    },
+};
+var BasicDropdownWithExtendedCapabilities = function () {
+    var extendedCapabilitiesList = [
+        {
+            value: 'allergy_immunuology',
+            displayLabel: 'Allergy and Immunuology',
+        },
+        {
+            value: 'anesthesiology',
+            displayLabel: 'Anesthesiology',
+        },
+        {
+            value: 'cardio',
+            displayLabel: 'Cardiology',
+        },
+        {
+            value: 'critical_care',
+            displayLabel: 'Critical Care Medicine',
+        },
+        {
+            value: 'dermathology',
+            displayLabel: 'Dermathology',
+        },
+    ];
+    var _a = useState(['allergy_immunuology', 'anesthesiology']), selectedValue = _a[0], setSelectedValues = _a[1];
+    return (React.createElement(BasicDropdown, { id: "dropdownExtendedCapabilities", size: Size.Small, list: extendedCapabilitiesList, placeholder: "Select ...", value: selectedValue, actionVariant: "tertiary", actionDisabled: !selectedValue.length, actionLabel: "Clear all", itemsType: "checkbox", scrollable: true, multiSelect: true, minWidth: '280px', actionIcon: React.createElement(SystemIcons.Clear, null), action: function () { return setSelectedValues([]); }, onSelect: function (vals) { return setSelectedValues(vals); }, messageOnNoResults: "No results found" }));
+};
+export var BasicDropdownDemo = function () { return (React.createElement(React.Fragment, null,
+    "Standard",
+    React.createElement("div", { style: { width: '344px' } },
+        React.createElement(BasicDropdown, { id: "test", dataTestId: 'someCustomTestId', list: list, size: Size.Medium, placeholder: "Select ...", onSelect: function (value) { return console.log('Item selected ' + value); }, messageOnNoResults: "No results found" })),
+    "Standard with default value",
+    React.createElement("div", { style: { width: '344px', marginTop: '12px' } },
+        React.createElement(BasicDropdown, { id: "test_with_default_value", list: list, value: list[1].value, size: Size.Medium, placeholder: "Select ...", onSelect: function (value) { return console.log('Item selected ' + value); }, messageOnNoResults: "No results found" })),
+    "Invalid",
+    React.createElement("div", { style: { width: '344px', marginTop: '12px' } },
+        React.createElement(BasicDropdown, { id: "testwarning", activeValidationMessage: "You forgot to select", list: list, size: Size.Medium, placeholder: "Select ...", onSelect: function (value) { return console.log('Item selected ' + value); }, messageOnNoResults: "No results found" })),
+    "Read only",
+    React.createElement("div", { style: { width: '344px', marginTop: '12px' } },
+        React.createElement(BasicDropdown, { id: "testdisabled", readOnly: true, list: list, size: Size.Medium, placeholder: "Select ...", onSelect: function (value) { return console.log('Item selected ' + value); }, messageOnNoResults: "No results found" })),
+    "Disabled",
+    React.createElement("div", { style: { width: '344px', marginTop: '12px' } },
+        React.createElement(BasicDropdown, { id: "testdisabled", disabled: true, list: list, size: Size.Medium, placeholder: "Select ...", onSelect: function (value) { return console.log('Item selected ' + value); }, messageOnNoResults: "No results found" })),
+    "Autofilled",
+    React.createElement("div", { style: { width: '344px', marginTop: '12px' } },
+        React.createElement(BasicDropdown, { id: "testautofilled", size: Size.Small, autofilledMessage: "This input is auto filled", list: list, placeholder: "Select ...", onSelect: function (value) { return console.log('Item selected ' + value); }, messageOnNoResults: "No results found" })),
+    "Interactive Dropdown with minimum width",
+    React.createElement("div", { style: { width: '344px', marginTop: '12px' } }, BasicDropdownWithExtendedCapabilities()))); };

package/dist/stories/Dropdown/ButtonDropdown.stories.d.ts

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