@uva-glass/component-library 3.29.0 → 3.30.0

package/dist/components/ModalDialog/ModalDialog.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalDialog.stories.js","sources":["../../../src/components/ModalDialog/ModalDialog.stories.tsx"],"sourcesContent":["import { ModalProvider } from '@react-aria/overlays';\nimport { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { ModalDialogProps } from './ModalDialog';\n\nimport { ModalDialog } from './ModalDialog';\n\nimport { Button } from 'components/Buttons';\nimport { ButtonGroup } from 'components/ButtonGroup';\nimport { FormField } from 'components/FormField';\nimport { InputField } from 'components/InputField';\nimport { Label } from 'components/Label';\n\nconst codeString = `\n/* ModalDialog has more styling props (see Info-tab).\n Code example is made with the most commonly used props. **/\n  <ModalDialog isOpen={isOpen} title={title} onClose={onCloseFunction}\n    onSubmit={onSubmitFunction} buttons={buttons}> {children} </ModalDialog>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Molecules/ModalDialog',\n  component: ModalDialog,\n  argTypes: {\n    isOpen: {\n      table: {\n        disable: true,\n      },\n    },\n    noValidate: {\n      control: 'boolean',\n    },\n    role: {\n      control: 'radio',\n      options: ['dialog', 'alertdialog'],\n    },\n    onSubmit: {\n      table: {\n        disable: true,\n      },\n    },\n    onClose: {\n      table: {\n        disable: true,\n      },\n    },\n    buttons: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    inspectComponent: ModalDialog,\n    codeString: codeString,\n  },\n} as Meta<ModalDialogProps>;\n\nconst Template: StoryFn<ModalDialogProps> = (args: ModalDialogProps) => (\n  <ModalProvider>\n    <ModalDialog {...args}>\n      <FormField outerSpace>\n        <Label htmlFor=\"text-field\">Example Text Field</Label>\n        <InputField id=\"text-field\" />\n      </FormField>\n    </ModalDialog>\n  </ModalProvider>\n);\n\nconst defaultArgs: Partial<ModalDialogProps> = {\n  padded: false,\n  size: 'regular',\n  noButtonBorder: false,\n  variant: 'dialog',\n  role: 'dialog',\n  title: 'Example Title',\n  closeButtonAriaValueText: 'Close',\n  noValidate: false,\n  onSubmit: fn(),\n  onClose: fn(),\n  buttons: (\n    <ButtonGroup reversed>\n      <Button variant=\"primary\" onClick={fn()}>\n        OK\n      </Button>\n      <Button variant=\"secondary\" onClick={fn()}>\n        Cancel\n      </Button>\n    </ButtonGroup>\n  ),\n  isOpen: true,\n};\n\nexport const ModalDialogExample = Template.bind({});\nModalDialogExample.args = {\n  ...defaultArgs,\n};\n\nexport const Loading = Template.bind({});\nLoading.args = {\n  ...defaultArgs,\n  isLoading: true,\n  spinnerAriaValueText: 'Loading',\n};\n\nconst LongContentTemplate: StoryFn<ModalDialogProps> = (args: ModalDialogProps) => (\n  <ModalProvider>\n    <ModalDialog {...args}>\n      <FormField outerSpace>\n        <div>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac dui et nibh eleifend ultricies a id nulla.\n          Pellentesque eleifend sem a tellus dictum tempus. Proin non leo id risus placerat vulputate at ac erat. Ut\n          fringilla imperdiet sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere\n          cubilia curae; Cras molestie ante ac magna ornare rhoncus non at quam. Mauris elementum luctus euismod.\n          Pellentesque molestie malesuada purus, sed egestas lacus interdum sit amet. Morbi blandit lacus sit amet\n          dictum pulvinar. Ut semper nunc ac enim imperdiet, non interdum diam gravida. In nunc tortor, mollis ac\n          molestie dignissim, elementum sed quam. Suspendisse mollis venenatis libero, pellentesque vestibulum elit\n          consequat et. Aliquam fringilla tellus id libero tempus, sit amet suscipit augue tristique. Quisque cursus\n          neque vel justo tristique, eget semper turpis elementum. Etiam venenatis mattis sapien ac mattis. Mauris vitae\n          ultrices erat.\n        </div>\n        <div>\n          Aliquam facilisis massa sed justo rhoncus bibendum. Sed lobortis urna orci, vitae porta leo placerat nec. Nam\n          porta porttitor ornare. Suspendisse vehicula nunc nec egestas finibus. Aliquam non luctus risus. Phasellus ac\n          diam tincidunt, bibendum sem eget, sollicitudin neque. Curabitur mauris risus, feugiat ac euismod non,\n          vulputate ac justo. Curabitur pretium vehicula augue, blandit porta odio rutrum sit amet. Proin semper enim ut\n          sapien tempor, a ornare ipsum faucibus.\n        </div>\n      </FormField>\n    </ModalDialog>\n  </ModalProvider>\n);\n\nexport const WithLongContentAndNoBorder = LongContentTemplate.bind({});\nWithLongContentAndNoBorder.args = {\n  ...defaultArgs,\n  noButtonBorder: true,\n};\n"],"names":["codeString","ModalDialog_stories","ModalDialog","Template","args","jsx","ModalProvider","jsxs","FormField","Label","InputField","defaultArgs","fn","ButtonGroup","Button","ModalDialogExample","Loading","LongContentTemplate","WithLongContentAndNoBorder"],"mappings":";;;;;;;;;;;AAcA,MAAMA,IAAa;AAAA;AAAA;AAAA;AAAA;AAAA,GAQJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IAEb;AAAA,IACA,YAAY;AAAA,MACV,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS,CAAC,UAAU,aAAa;AAAA,IACnC;AAAA,IACA,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IAEb;AAAA,IACA,SAAS;AAAA,MACP,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IAEb;AAAA,IACA,SAAS;AAAA,MACP,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EAEJ;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAsC,CAACC,MAC3C,gBAAAC,EAACC,GACC,EAAA,UAAA,gBAAAD,EAACH,GAAa,EAAA,GAAGE,GACf,UAAA,gBAAAG,EAACC,GAAU,EAAA,YAAU,IACnB,UAAA;AAAA,EAAC,gBAAAH,EAAAI,GAAA,EAAM,SAAQ,cAAa,UAAkB,sBAAA;AAAA,EAC9C,gBAAAJ,EAACK,GAAW,EAAA,IAAG,aAAa,CAAA;AAAA,EAC9B,CAAA,EACF,CAAA,GACF,GAGIC,IAAyC;AAAA,EAC7C,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,MAAM;AAAA,EACN,OAAO;AAAA,EACP,0BAA0B;AAAA,EAC1B,YAAY;AAAA,EACZ,UAAUC,EAAG;AAAA,EACb,SAASA,EAAG;AAAA,EACZ,SACE,gBAAAL,EAACM,GAAY,EAAA,UAAQ,IACnB,UAAA;AAAA,IAAA,gBAAAR,EAACS,KAAO,SAAQ,WAAU,SAASF,KAAM,UAEzC,MAAA;AAAA,sBACCE,GAAO,EAAA,SAAQ,aAAY,SAASF,EAAA,GAAM,UAE3C,SAAA,CAAA;AAAA,EAAA,GACF;AAAA,EAEF,QAAQ;AACV,GAEaG,IAAqBZ,EAAS,KAAK,CAAE,CAAA;AAClDY,EAAmB,OAAO;AAAA,EACxB,GAAGJ;AACL;AAEO,MAAMK,IAAUb,EAAS,KAAK,CAAE,CAAA;AACvCa,EAAQ,OAAO;AAAA,EACb,GAAGL;AAAA,EACH,WAAW;AAAA,EACX,sBAAsB;AACxB;AAEA,MAAMM,IAAiD,CAACb,MACtD,gBAAAC,EAACC,GACC,EAAA,UAAA,gBAAAD,EAACH,GAAa,EAAA,GAAGE,GACf,UAAA,gBAAAG,EAACC,GAAU,EAAA,YAAU,IACnB,UAAA;AAAA,EAAA,gBAAAH,EAAC,SAAI,UAWL,88BAAA,CAAA;AAAA,EACA,gBAAAA,EAAC,SAAI,UAML,4dAAA,CAAA;AAAA,EACF,CAAA,EACF,CAAA,GACF,GAGWa,IAA6BD,EAAoB,KAAK,CAAE,CAAA;AACrEC,EAA2B,OAAO;AAAA,EAChC,GAAGP;AAAA,EACH,gBAAgB;AAClB;"}
+{"version":3,"file":"ModalDialog.stories.js","sources":["../../../src/components/ModalDialog/ModalDialog.stories.tsx"],"sourcesContent":["import { ModalProvider } from '@react-aria/overlays';\nimport { fn } from 'storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { ModalDialogProps } from './ModalDialog';\n\nimport { ModalDialog } from './ModalDialog';\n\nimport { Button } from 'components/Buttons';\nimport { ButtonGroup } from 'components/ButtonGroup';\nimport { FormField } from 'components/FormField';\nimport { InputField } from 'components/InputField';\nimport { Label } from 'components/Label';\n\nconst codeString = `\n/* ModalDialog has more styling props (see Info-tab).\n Code example is made with the most commonly used props. **/\n  <ModalDialog isOpen={isOpen} title={title} onClose={onCloseFunction}\n    onSubmit={onSubmitFunction} buttons={buttons}> {children} </ModalDialog>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Molecules/ModalDialog',\n  component: ModalDialog,\n  argTypes: {\n    isOpen: {\n      table: {\n        disable: true,\n      },\n    },\n    noValidate: {\n      control: 'boolean',\n    },\n    role: {\n      control: 'radio',\n      options: ['dialog', 'alertdialog'],\n    },\n    onSubmit: {\n      table: {\n        disable: true,\n      },\n    },\n    onClose: {\n      table: {\n        disable: true,\n      },\n    },\n    buttons: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    inspectComponent: ModalDialog,\n    codeString: codeString,\n  },\n} as Meta<ModalDialogProps>;\n\nconst Template: StoryFn<ModalDialogProps> = (args: ModalDialogProps) => (\n  <ModalProvider>\n    <ModalDialog {...args}>\n      <FormField outerSpace>\n        <Label htmlFor=\"text-field\">Example Text Field</Label>\n        <InputField id=\"text-field\" />\n      </FormField>\n    </ModalDialog>\n  </ModalProvider>\n);\n\nconst defaultArgs: Partial<ModalDialogProps> = {\n  padded: false,\n  size: 'regular',\n  noButtonBorder: false,\n  variant: 'dialog',\n  role: 'dialog',\n  title: 'Example Title',\n  closeButtonAriaValueText: 'Close',\n  noValidate: false,\n  onSubmit: fn(),\n  onClose: fn(),\n  buttons: (\n    <ButtonGroup reversed>\n      <Button variant=\"primary\" onClick={fn()}>\n        OK\n      </Button>\n      <Button variant=\"secondary\" onClick={fn()}>\n        Cancel\n      </Button>\n    </ButtonGroup>\n  ),\n  isOpen: true,\n};\n\nexport const ModalDialogExample = Template.bind({});\nModalDialogExample.args = {\n  ...defaultArgs,\n};\n\nexport const Loading = Template.bind({});\nLoading.args = {\n  ...defaultArgs,\n  isLoading: true,\n  spinnerAriaValueText: 'Loading',\n};\n\nconst LongContentTemplate: StoryFn<ModalDialogProps> = (args: ModalDialogProps) => (\n  <ModalProvider>\n    <ModalDialog {...args}>\n      <FormField outerSpace>\n        <div>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac dui et nibh eleifend ultricies a id nulla.\n          Pellentesque eleifend sem a tellus dictum tempus. Proin non leo id risus placerat vulputate at ac erat. Ut\n          fringilla imperdiet sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere\n          cubilia curae; Cras molestie ante ac magna ornare rhoncus non at quam. Mauris elementum luctus euismod.\n          Pellentesque molestie malesuada purus, sed egestas lacus interdum sit amet. Morbi blandit lacus sit amet\n          dictum pulvinar. Ut semper nunc ac enim imperdiet, non interdum diam gravida. In nunc tortor, mollis ac\n          molestie dignissim, elementum sed quam. Suspendisse mollis venenatis libero, pellentesque vestibulum elit\n          consequat et. Aliquam fringilla tellus id libero tempus, sit amet suscipit augue tristique. Quisque cursus\n          neque vel justo tristique, eget semper turpis elementum. Etiam venenatis mattis sapien ac mattis. Mauris vitae\n          ultrices erat.\n        </div>\n        <div>\n          Aliquam facilisis massa sed justo rhoncus bibendum. Sed lobortis urna orci, vitae porta leo placerat nec. Nam\n          porta porttitor ornare. Suspendisse vehicula nunc nec egestas finibus. Aliquam non luctus risus. Phasellus ac\n          diam tincidunt, bibendum sem eget, sollicitudin neque. Curabitur mauris risus, feugiat ac euismod non,\n          vulputate ac justo. Curabitur pretium vehicula augue, blandit porta odio rutrum sit amet. Proin semper enim ut\n          sapien tempor, a ornare ipsum faucibus.\n        </div>\n      </FormField>\n    </ModalDialog>\n  </ModalProvider>\n);\n\nexport const WithLongContentAndNoBorder = LongContentTemplate.bind({});\nWithLongContentAndNoBorder.args = {\n  ...defaultArgs,\n  noButtonBorder: true,\n};\n"],"names":["codeString","ModalDialog_stories","ModalDialog","Template","args","jsx","ModalProvider","jsxs","FormField","Label","InputField","defaultArgs","fn","ButtonGroup","Button","ModalDialogExample","Loading","LongContentTemplate","WithLongContentAndNoBorder"],"mappings":";;;;;;;;;;;AAcA,MAAMA,IAAa;AAAA;AAAA;AAAA;AAAA;AAAA,GAQnBC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,YAAY;AAAA,MACV,SAAS;AAAA,IAAA;AAAA,IAEX,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS,CAAC,UAAU,aAAa;AAAA,IAAA;AAAA,IAEnC,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,SAAS;AAAA,MACP,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,SAAS;AAAA,MACP,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAsC,CAACC,MAC3C,gBAAAC,EAACC,GAAA,EACC,UAAA,gBAAAD,EAACH,GAAA,EAAa,GAAGE,GACf,UAAA,gBAAAG,EAACC,GAAA,EAAU,YAAU,IACnB,UAAA;AAAA,EAAA,gBAAAH,EAACI,GAAA,EAAM,SAAQ,cAAa,UAAA,sBAAkB;AAAA,EAC9C,gBAAAJ,EAACK,GAAA,EAAW,IAAG,aAAA,CAAa;AAAA,EAAA,CAC9B,GACF,GACF,GAGIC,IAAyC;AAAA,EAC7C,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,MAAM;AAAA,EACN,OAAO;AAAA,EACP,0BAA0B;AAAA,EAC1B,YAAY;AAAA,EACZ,UAAUC,EAAA;AAAA,EACV,SAASA,EAAA;AAAA,EACT,SACE,gBAAAL,EAACM,GAAA,EAAY,UAAQ,IACnB,UAAA;AAAA,IAAA,gBAAAR,EAACS,KAAO,SAAQ,WAAU,SAASF,EAAA,GAAM,UAAA,MAEzC;AAAA,sBACCE,GAAA,EAAO,SAAQ,aAAY,SAASF,EAAA,GAAM,UAAA,SAAA,CAE3C;AAAA,EAAA,GACF;AAAA,EAEF,QAAQ;AACV,GAEaG,IAAqBZ,EAAS,KAAK,CAAA,CAAE;AAClDY,EAAmB,OAAO;AAAA,EACxB,GAAGJ;AACL;AAEO,MAAMK,IAAUb,EAAS,KAAK,CAAA,CAAE;AACvCa,EAAQ,OAAO;AAAA,EACb,GAAGL;AAAA,EACH,WAAW;AAAA,EACX,sBAAsB;AACxB;AAEA,MAAMM,IAAiD,CAACb,MACtD,gBAAAC,EAACC,GAAA,EACC,UAAA,gBAAAD,EAACH,GAAA,EAAa,GAAGE,GACf,UAAA,gBAAAG,EAACC,GAAA,EAAU,YAAU,IACnB,UAAA;AAAA,EAAA,gBAAAH,EAAC,SAAI,UAAA,88BAAA,CAWL;AAAA,EACA,gBAAAA,EAAC,SAAI,UAAA,4dAAA,CAML;AAAA,EAAA,CACF,GACF,GACF,GAGWa,IAA6BD,EAAoB,KAAK,CAAA,CAAE;AACrEC,EAA2B,OAAO;AAAA,EAChC,GAAGP;AAAA,EACH,gBAAgB;AAClB;"}

package/dist/components/MultiSelect/MultiSelect.stories.d.ts

@@ -3,6 +3,6 @@ import { Meta } from '@storybook/react';
 import { MultiSelectProps } from './MultiSelect';
 declare const _default: Meta<PropsWithChildren<MultiSelectProps>>;
 export default _default;
-export declare const MultiSelectExample: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, PropsWithChildren<MultiSelectProps>>;
-export declare const WithHeader: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, PropsWithChildren<MultiSelectProps>>;
-export declare const WithheaderAndWithoutScrollContainerAndBorder: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, PropsWithChildren<MultiSelectProps>>;
+export declare const MultiSelectExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, PropsWithChildren<MultiSelectProps>>;
+export declare const WithHeader: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, PropsWithChildren<MultiSelectProps>>;
+export declare const WithheaderAndWithoutScrollContainerAndBorder: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, PropsWithChildren<MultiSelectProps>>;

package/dist/components/MultiSelect/MultiSelect.stories.js

@@ -1,5 +1,5 @@
 import { jsxs as S, jsx as r } from "react/jsx-runtime";
-import { fn as d } from "../../index-Dwqes6RH.js";
+import { W as d } from "../../index-Di9WPZUe.js";
 import { useState as p } from "react";
 import { M as e } from "../../TablePlugin-NmJsn2fm.js";
 import { Container as M } from "../../storyComponents/Container/Container.js";
@@ -12,7 +12,7 @@ const C = `
         checked={stateItems.includes(itemValue)} onChange={handleChange} disabled={disabled} />
     ))}
   </MultiSelect>
-  `, H = {
+  `, A = {
   title: "Organisms/MultiSelect",
   component: e,
   argTypes: {
@@ -27,14 +27,14 @@ const C = `
     codeString: C
   }
 }, m = (i) => {
-  const [n, o] = p([]), I = [
+  const [n, o] = p([]), h = [
     { itemName: "AItem 1", itemValue: "1", disabled: !0 },
     { itemName: "BItem 2", itemValue: "2" },
     { itemName: "Multi line Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3", itemValue: "3" },
     { itemName: "CItem 4", itemValue: "4" },
     { itemName: "DItem 5", itemValue: "5" },
     { itemName: "EItem 6", itemValue: "6" }
-  ], h = () => {
+  ], I = () => {
     o([]), d()();
   }, b = (t) => {
     const { checked: l, value: a } = t.target;
@@ -49,10 +49,10 @@ const C = `
       {
         label: "Item list",
         clearTrigger: n.length > 0 ? "Clear Selection" : "",
-        onClear: h
+        onClear: I
       }
     ),
-    /* @__PURE__ */ r(e, { ...i, children: I.map(({ itemName: t, itemValue: l, disabled: a }) => /* @__PURE__ */ r(
+    /* @__PURE__ */ r(e, { ...i, children: h.map(({ itemName: t, itemValue: l, disabled: a }) => /* @__PURE__ */ r(
       e.MultiSelectItem,
       {
         label: t,
@@ -90,6 +90,6 @@ export {
   f as MultiSelectExample,
   N as WithHeader,
   V as WithheaderAndWithoutScrollContainerAndBorder,
-  H as default
+  A as default
 };
 //# sourceMappingURL=MultiSelect.stories.js.map

package/dist/components/MultiSelect/MultiSelect.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.stories.js","sources":["../../../src/components/MultiSelect/MultiSelect.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\nimport { useState } from 'react';\n\nimport type { ChangeEvent, PropsWithChildren } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { MultiSelectProps } from './MultiSelect';\n\nimport { MultiSelect } from './MultiSelect';\n\nimport { Container } from 'storyComponents/Container';\n\nconst codeString = `\n  // MultiSelectHeader can be added optionally\n  <MultiSelect.MultiSelectHeader label={label} clearTrigger={clearTrigger} onClear={handleClear} />\n  <MultiSelect noBorder={noBorder} scrollable={scrollable}>\n    {mockItems.map(({ itemName, itemValue, disabled }) => (\n      <MultiSelect.MultiSelectItem key={itemName} label={itemName} value={itemValue}\n        checked={stateItems.includes(itemValue)} onChange={handleChange} disabled={disabled} />\n    ))}\n  </MultiSelect>\n  `;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Organisms/MultiSelect',\n  component: MultiSelect,\n  argTypes: {\n    header: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    inspectComponent: MultiSelect,\n    codeString: codeString,\n  },\n} as Meta<PropsWithChildren<MultiSelectProps>>;\n\nconst Template: StoryFn<PropsWithChildren<MultiSelectProps>> = (args) => {\n  const [items, setItems] = useState<string[]>([]);\n\n  const mockItems = [\n    { itemName: 'AItem 1', itemValue: '1', disabled: true },\n    { itemName: 'BItem 2', itemValue: '2' },\n    { itemName: 'Multi line Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3', itemValue: '3' },\n    { itemName: 'CItem 4', itemValue: '4' },\n    { itemName: 'DItem 5', itemValue: '5' },\n    { itemName: 'EItem 6', itemValue: '6' },\n  ];\n\n  const handleClear = () => {\n    setItems([]);\n    fn()();\n  };\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const { checked, value } = event.target;\n    setItems((prevState) => {\n      const newItems = checked ? [...prevState, value] : prevState.filter((itemValue) => itemValue !== value);\n      fn()(newItems);\n      return newItems;\n    });\n  };\n\n  return (\n    <Container>\n      {/* header added under separate boolean arg here for storybook purpose, \n      it should be added as direct arg to MultiSelect when used in application */}\n      {args.header && (\n        <MultiSelect.MultiSelectHeader\n          label=\"Item list\"\n          clearTrigger={items.length > 0 ? 'Clear Selection' : ''}\n          onClear={handleClear}\n        />\n      )}\n      <MultiSelect {...args}>\n        {mockItems.map(({ itemName, itemValue, disabled }) => (\n          <MultiSelect.MultiSelectItem\n            key={itemName}\n            label={itemName}\n            value={itemValue}\n            checked={items.includes(itemValue)}\n            onChange={handleChange}\n            disabled={disabled}\n          />\n        ))}\n      </MultiSelect>\n    </Container>\n  );\n};\n\nconst defaultArgs: Partial<MultiSelectProps> = {\n  scrollable: true,\n  noBorder: false,\n};\n\nexport const MultiSelectExample = Template.bind({});\nMultiSelectExample.args = {\n  ...defaultArgs,\n};\n\nexport const WithHeader = Template.bind({});\nWithHeader.args = {\n  ...defaultArgs,\n  // boolean is not normal way of adding header but if added after template the rerender logic of\n  // storybook would not correctly clear the checkboxes\n  header: true,\n};\n\nexport const WithheaderAndWithoutScrollContainerAndBorder = Template.bind({});\nWithheaderAndWithoutScrollContainerAndBorder.args = {\n  scrollable: false,\n  noBorder: true,\n  // boolean is not normal way of adding header but if added after template the rerender logic of\n  // storybook would not correctly clear the checkboxes\n  header: true,\n};\n"],"names":["codeString","MultiSelect_stories","MultiSelect","Template","args","items","setItems","useState","mockItems","handleClear","fn","handleChange","event","checked","value","prevState","newItems","itemValue","Container","jsx","itemName","disabled","defaultArgs","MultiSelectExample","WithHeader","WithheaderAndWithoutScrollContainerAndBorder"],"mappings":";;;;;AAWA,MAAMA,IAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAYJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EAEJ;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAyD,CAACC,MAAS;AACvE,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAmB,CAAA,CAAE,GAEzCC,IAAY;AAAA,IAChB,EAAE,UAAU,WAAW,WAAW,KAAK,UAAU,GAAK;AAAA,IACtD,EAAE,UAAU,WAAW,WAAW,IAAI;AAAA,IACtC,EAAE,UAAU,oFAAoF,WAAW,IAAI;AAAA,IAC/G,EAAE,UAAU,WAAW,WAAW,IAAI;AAAA,IACtC,EAAE,UAAU,WAAW,WAAW,IAAI;AAAA,IACtC,EAAE,UAAU,WAAW,WAAW,IAAI;AAAA,EACxC,GAEMC,IAAc,MAAM;AACxB,IAAAH,EAAS,CAAA,CAAE,GACXI,IAAK;AAAA,EACP,GAEMC,IAAe,CAACC,MAAyC;AAC7D,UAAM,EAAE,SAAAC,GAAS,OAAAC,EAAM,IAAIF,EAAM;AACjC,IAAAN,EAAS,CAACS,MAAc;AACtB,YAAMC,IAAWH,IAAU,CAAC,GAAGE,GAAWD,CAAK,IAAIC,EAAU,OAAO,CAACE,MAAcA,MAAcH,CAAK;AACtGJ,aAAAA,EAAA,EAAKM,CAAQ,GACNA;AAAA,IAAA,CACR;AAAA,EACH;AAEA,2BACGE,GAGE,EAAA,UAAA;AAAA,IAAAd,EAAK,UACJ,gBAAAe;AAAA,MAACjB,EAAY;AAAA,MAAZ;AAAA,QACC,OAAM;AAAA,QACN,cAAcG,EAAM,SAAS,IAAI,oBAAoB;AAAA,QACrD,SAASI;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,gBAAAU,EAACjB,GAAa,EAAA,GAAGE,GACd,UAAAI,EAAU,IAAI,CAAC,EAAE,UAAAY,GAAU,WAAAH,GAAW,UAAAI,EACrC,MAAA,gBAAAF;AAAA,MAACjB,EAAY;AAAA,MAAZ;AAAA,QAEC,OAAOkB;AAAA,QACP,OAAOH;AAAA,QACP,SAASZ,EAAM,SAASY,CAAS;AAAA,QACjC,UAAUN;AAAA,QACV,UAAAU;AAAA,MAAA;AAAA,MALKD;AAAA,IAAA,CAOR,EACH,CAAA;AAAA,EAAA,GACF;AAEJ,GAEME,IAAyC;AAAA,EAC7C,YAAY;AAAA,EACZ,UAAU;AACZ,GAEaC,IAAqBpB,EAAS,KAAK,CAAE,CAAA;AAClDoB,EAAmB,OAAO;AAAA,EACxB,GAAGD;AACL;AAEO,MAAME,IAAarB,EAAS,KAAK,CAAE,CAAA;AAC1CqB,EAAW,OAAO;AAAA,EAChB,GAAGF;AAAA;AAAA;AAAA,EAGH,QAAQ;AACV;AAEO,MAAMG,IAA+CtB,EAAS,KAAK,CAAE,CAAA;AAC5EsB,EAA6C,OAAO;AAAA,EAClD,YAAY;AAAA,EACZ,UAAU;AAAA;AAAA;AAAA,EAGV,QAAQ;AACV;"}
+{"version":3,"file":"MultiSelect.stories.js","sources":["../../../src/components/MultiSelect/MultiSelect.stories.tsx"],"sourcesContent":["import { fn } from 'storybook/test';\nimport { useState } from 'react';\n\nimport type { ChangeEvent, PropsWithChildren } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { MultiSelectProps } from './MultiSelect';\n\nimport { MultiSelect } from './MultiSelect';\n\nimport { Container } from 'storyComponents/Container';\n\nconst codeString = `\n  // MultiSelectHeader can be added optionally\n  <MultiSelect.MultiSelectHeader label={label} clearTrigger={clearTrigger} onClear={handleClear} />\n  <MultiSelect noBorder={noBorder} scrollable={scrollable}>\n    {mockItems.map(({ itemName, itemValue, disabled }) => (\n      <MultiSelect.MultiSelectItem key={itemName} label={itemName} value={itemValue}\n        checked={stateItems.includes(itemValue)} onChange={handleChange} disabled={disabled} />\n    ))}\n  </MultiSelect>\n  `;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Organisms/MultiSelect',\n  component: MultiSelect,\n  argTypes: {\n    header: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    inspectComponent: MultiSelect,\n    codeString: codeString,\n  },\n} as Meta<PropsWithChildren<MultiSelectProps>>;\n\nconst Template: StoryFn<PropsWithChildren<MultiSelectProps>> = (args) => {\n  const [items, setItems] = useState<string[]>([]);\n\n  const mockItems = [\n    { itemName: 'AItem 1', itemValue: '1', disabled: true },\n    { itemName: 'BItem 2', itemValue: '2' },\n    { itemName: 'Multi line Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3', itemValue: '3' },\n    { itemName: 'CItem 4', itemValue: '4' },\n    { itemName: 'DItem 5', itemValue: '5' },\n    { itemName: 'EItem 6', itemValue: '6' },\n  ];\n\n  const handleClear = () => {\n    setItems([]);\n    fn()();\n  };\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const { checked, value } = event.target;\n    setItems((prevState) => {\n      const newItems = checked ? [...prevState, value] : prevState.filter((itemValue) => itemValue !== value);\n      fn()(newItems);\n      return newItems;\n    });\n  };\n\n  return (\n    <Container>\n      {/* header added under separate boolean arg here for storybook purpose, \n      it should be added as direct arg to MultiSelect when used in application */}\n      {args.header && (\n        <MultiSelect.MultiSelectHeader\n          label=\"Item list\"\n          clearTrigger={items.length > 0 ? 'Clear Selection' : ''}\n          onClear={handleClear}\n        />\n      )}\n      <MultiSelect {...args}>\n        {mockItems.map(({ itemName, itemValue, disabled }) => (\n          <MultiSelect.MultiSelectItem\n            key={itemName}\n            label={itemName}\n            value={itemValue}\n            checked={items.includes(itemValue)}\n            onChange={handleChange}\n            disabled={disabled}\n          />\n        ))}\n      </MultiSelect>\n    </Container>\n  );\n};\n\nconst defaultArgs: Partial<MultiSelectProps> = {\n  scrollable: true,\n  noBorder: false,\n};\n\nexport const MultiSelectExample = Template.bind({});\nMultiSelectExample.args = {\n  ...defaultArgs,\n};\n\nexport const WithHeader = Template.bind({});\nWithHeader.args = {\n  ...defaultArgs,\n  // boolean is not normal way of adding header but if added after template the rerender logic of\n  // storybook would not correctly clear the checkboxes\n  header: true,\n};\n\nexport const WithheaderAndWithoutScrollContainerAndBorder = Template.bind({});\nWithheaderAndWithoutScrollContainerAndBorder.args = {\n  scrollable: false,\n  noBorder: true,\n  // boolean is not normal way of adding header but if added after template the rerender logic of\n  // storybook would not correctly clear the checkboxes\n  header: true,\n};\n"],"names":["codeString","MultiSelect_stories","MultiSelect","Template","args","items","setItems","useState","mockItems","handleClear","fn","handleChange","event","checked","value","prevState","newItems","itemValue","Container","jsx","itemName","disabled","defaultArgs","MultiSelectExample","WithHeader","WithheaderAndWithoutScrollContainerAndBorder"],"mappings":";;;;;AAWA,MAAMA,IAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAYnBC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAyD,CAACC,MAAS;AACvE,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAmB,CAAA,CAAE,GAEzCC,IAAY;AAAA,IAChB,EAAE,UAAU,WAAW,WAAW,KAAK,UAAU,GAAA;AAAA,IACjD,EAAE,UAAU,WAAW,WAAW,IAAA;AAAA,IAClC,EAAE,UAAU,oFAAoF,WAAW,IAAA;AAAA,IAC3G,EAAE,UAAU,WAAW,WAAW,IAAA;AAAA,IAClC,EAAE,UAAU,WAAW,WAAW,IAAA;AAAA,IAClC,EAAE,UAAU,WAAW,WAAW,IAAA;AAAA,EAAI,GAGlCC,IAAc,MAAM;AACxB,IAAAH,EAAS,CAAA,CAAE,GACXI,IAAG;AAAA,EAAE,GAGDC,IAAe,CAACC,MAAyC;AAC7D,UAAM,EAAE,SAAAC,GAAS,OAAAC,EAAA,IAAUF,EAAM;AACjC,IAAAN,EAAS,CAACS,MAAc;AACtB,YAAMC,IAAWH,IAAU,CAAC,GAAGE,GAAWD,CAAK,IAAIC,EAAU,OAAO,CAACE,MAAcA,MAAcH,CAAK;AACtGJ,aAAAA,EAAA,EAAKM,CAAQ,GACNA;AAAA,IAAA,CACR;AAAA,EAAA;AAGH,2BACGE,GAAA,EAGE,UAAA;AAAA,IAAAd,EAAK,UACJ,gBAAAe;AAAA,MAACjB,EAAY;AAAA,MAAZ;AAAA,QACC,OAAM;AAAA,QACN,cAAcG,EAAM,SAAS,IAAI,oBAAoB;AAAA,QACrD,SAASI;AAAA,MAAA;AAAA,IAAA;AAAA,IAGb,gBAAAU,EAACjB,GAAA,EAAa,GAAGE,GACd,UAAAI,EAAU,IAAI,CAAC,EAAE,UAAAY,GAAU,WAAAH,GAAW,UAAAI,EAAA,MACrC,gBAAAF;AAAA,MAACjB,EAAY;AAAA,MAAZ;AAAA,QAEC,OAAOkB;AAAA,QACP,OAAOH;AAAA,QACP,SAASZ,EAAM,SAASY,CAAS;AAAA,QACjC,UAAUN;AAAA,QACV,UAAAU;AAAA,MAAA;AAAA,MALKD;AAAA,IAAA,CAOR,EAAA,CACH;AAAA,EAAA,GACF;AAEJ,GAEME,IAAyC;AAAA,EAC7C,YAAY;AAAA,EACZ,UAAU;AACZ,GAEaC,IAAqBpB,EAAS,KAAK,CAAA,CAAE;AAClDoB,EAAmB,OAAO;AAAA,EACxB,GAAGD;AACL;AAEO,MAAME,IAAarB,EAAS,KAAK,CAAA,CAAE;AAC1CqB,EAAW,OAAO;AAAA,EAChB,GAAGF;AAAA;AAAA;AAAA,EAGH,QAAQ;AACV;AAEO,MAAMG,IAA+CtB,EAAS,KAAK,CAAA,CAAE;AAC5EsB,EAA6C,OAAO;AAAA,EAClD,YAAY;AAAA,EACZ,UAAU;AAAA;AAAA;AAAA,EAGV,QAAQ;AACV;"}

package/dist/components/MultiSelectBox/MultiSelectBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectBox.js","sources":["../../../src/components/MultiSelectBox/MultiSelectBox.tsx"],"sourcesContent":["import { useRef, useState, useId, useEffect, useCallback } from 'react';\nimport clsx from 'clsx';\n\nimport type { KeyboardEvent, ChangeEvent, MouseEvent } from 'react';\n\nimport styles from './MultiSelectBox.module.css';\n\nimport { Icon } from 'components/Icon';\nimport { Checkbox } from 'components/Checkbox';\nimport { usePositionedFloaters } from 'components/hooks/usePositionedFloaters';\n\nexport type MultiSelectData = {\n  label: string;\n  value: string | number;\n  disabled?: boolean;\n};\n\nexport interface MultiSelectBoxProps {\n  /** Array of label, values pairs */\n  selectData: MultiSelectData[];\n  /** Retuns selected label, values */\n  onChange: (values: MultiSelectData[]) => void;\n  /** Array of label, value pairs that should be check by default */\n  defaultSelectedItems?: MultiSelectData[];\n  /** Suffix label in the selectbutton '[count] selected' */\n  labelSuffix?: string;\n  /** Disables the multiselect */\n  disabled?: boolean;\n  /** If true sets the option dropdown min-width to the width of the select button. */\n  fullWidth?: boolean;\n  /** Dark border. */\n  darkBorder?: boolean;\n  /** The max height of the options. */\n  maxOptionHeight?: `${number}${'px' | 'rem'}`;\n  /** `true` to align the right side of the options with the select box; otherwise, `false` to align on the left side. */\n  optionPositionRight?: boolean;\n}\n\nexport const MultiSelectBox = ({\n  selectData,\n  onChange,\n  defaultSelectedItems,\n  labelSuffix = 'geselecteerd',\n  disabled = false,\n  fullWidth = false,\n  darkBorder = false,\n  maxOptionHeight,\n  optionPositionRight,\n}: MultiSelectBoxProps) => {\n  const multiselectboxId = useId();\n  const [selectedItems, setSelectedItems] = useState<MultiSelectData[]>(defaultSelectedItems || []);\n  const [selectedItemsCount, setSelectedItemsCount] = useState(defaultSelectedItems?.length || 0);\n  const [isOpen, setIsOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const optionListRef = useRef<HTMLUListElement>(null);\n\n  const [positionElement, setPositionElement] = useState<HTMLElement | null>(null);\n  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);\n  const { style: positionStyle } = usePositionedFloaters(positionElement, referenceElement, {\n    mouseEvent: 'click',\n    position: 'bottomLeft',\n    offset: 4,\n    maxFixedHeight: maxOptionHeight,\n    horizontalPosition: optionPositionRight ? 'right' : 'left',\n    mobileBreakpoint: '28rem',\n    fullWidth,\n  });\n\n  const onMouseEventOutside = useCallback(\n    ({ target }: Event | MouseEvent) => {\n      if (!target || !wrapperRef.current) return;\n\n      if (!wrapperRef.current.contains(target as Node)) {\n        setIsOpen(false);\n      }\n    },\n    [setIsOpen]\n  );\n\n  const onTriggerKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLButtonElement>) => {\n      switch (event.key) {\n        case 'Enter':\n          event.preventDefault();\n          setIsOpen(true);\n          break;\n        case 'Escape':\n          if (isOpen) {\n            event.stopPropagation();\n            setIsOpen(false);\n          }\n          break;\n        default:\n          break;\n      }\n    },\n    [isOpen]\n  );\n\n  const onOptionKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLLIElement>) => {\n      if (!isOpen) return;\n\n      switch (event.key) {\n        case 'ArrowDown':\n          event.preventDefault();\n          setActiveIndex((prev) => {\n            let nextIndex = prev;\n            do {\n              nextIndex = nextIndex < selectData.length - 1 ? nextIndex + 1 : 0;\n            } while (selectData[nextIndex]?.disabled);\n            return nextIndex;\n          });\n          break;\n        case 'ArrowUp':\n          event.preventDefault();\n          setActiveIndex((prev) => {\n            let nextIndex = prev;\n            do {\n              nextIndex = nextIndex <= 0 ? selectData.length - 1 : nextIndex - 1;\n            } while (selectData[nextIndex]?.disabled);\n            return nextIndex;\n          });\n          break;\n        case 'Enter': {\n          event.preventDefault();\n          const selectedItem = selectData[activeIndex];\n          if (!selectedItem || selectedItem.disabled) break;\n          const isAlreadySelected = selectedItems.some((item) => item.value === selectedItem.value);\n          const updatedSelectedItems = isAlreadySelected\n            ? selectedItems.filter((item) => item.value !== selectedItem.value)\n            : [...selectedItems, selectedItem];\n\n          setSelectedItems(updatedSelectedItems);\n          setSelectedItemsCount(updatedSelectedItems.length);\n          onChange(updatedSelectedItems);\n          break;\n        }\n        case 'Tab':\n          event.preventDefault();\n          setIsOpen(false);\n          break;\n        case 'Escape':\n          event.stopPropagation();\n          setIsOpen(false);\n          break;\n        default:\n          break;\n      }\n    },\n    [activeIndex, isOpen, selectData, selectedItems, onChange]\n  );\n\n  const onOptionClick = (event: MouseEvent<HTMLLIElement>, option: MultiSelectData) => {\n    if (option.disabled) return;\n\n    // Prevent toggle if click originated from the checkbox\n    if ((event.target as HTMLElement).tagName === 'INPUT') return;\n\n    const isAlreadySelected = selectedItems.some((item) => item.value === option.value);\n    const updatedSelectedItems = isAlreadySelected\n      ? selectedItems.filter((item) => item.value !== option.value)\n      : [...selectedItems, option];\n\n    setSelectedItems(updatedSelectedItems);\n    setSelectedItemsCount(updatedSelectedItems.length);\n    onChange(updatedSelectedItems);\n  };\n\n  const handleSelect = useCallback(\n    (event: ChangeEvent<HTMLInputElement>) => {\n      const { checked, value } = event.target;\n      let updatedSelectedItems = [...selectedItems];\n\n      if (checked) {\n        const selectedItem = selectData.find((item) => item.value === value);\n        if (selectedItem) {\n          updatedSelectedItems.push(selectedItem);\n        }\n      } else {\n        updatedSelectedItems = updatedSelectedItems.filter((item) => item.value !== value);\n      }\n\n      setSelectedItems(updatedSelectedItems);\n      setSelectedItemsCount(updatedSelectedItems.length);\n      onChange(updatedSelectedItems);\n    },\n    [selectData, selectedItems, onChange]\n  );\n\n  useEffect(() => {\n    if (isOpen) {\n      setActiveIndex(0);\n    }\n  }, [isOpen]);\n\n  useEffect(() => {\n    const activeOption = optionListRef.current?.children[activeIndex] as HTMLElement;\n    activeOption?.focus();\n  }, [activeIndex]);\n\n  useEffect(() => {\n    if (!isOpen) return;\n\n    document.addEventListener('click', onMouseEventOutside, true);\n    document.addEventListener('scroll', onMouseEventOutside, true);\n\n    return () => {\n      document.removeEventListener('click', onMouseEventOutside, true);\n      document.removeEventListener('scroll', onMouseEventOutside, true);\n    };\n  }, [onMouseEventOutside, isOpen]);\n\n  return (\n    <div className={styles['multi-select-box-wrapper']} ref={wrapperRef}>\n      <button\n        className={clsx(styles['multi-select-box-trigger'], {\n          [styles['multi-select-box-trigger--darkBorder']]: darkBorder,\n        })}\n        type=\"button\"\n        onClick={() => {\n          setIsOpen(!isOpen);\n        }}\n        onKeyDown={onTriggerKeyDown}\n        aria-expanded={isOpen}\n        aria-haspopup=\"listbox\"\n        aria-label={`${selectedItemsCount} ${labelSuffix}`}\n        disabled={disabled}\n        {...(isOpen && { 'aria-controls': multiselectboxId })}\n        ref={setReferenceElement}\n      >\n        <span className={styles['multi-select-box-trigger-label']}>\n          {selectedItemsCount} {labelSuffix}\n        </span>\n        <Icon\n          className={clsx(styles['multi-select-box-trigger-icon'], {\n            [styles['multi-select-box-trigger-icon--open']]: isOpen,\n          })}\n          name=\"CheveronDown\"\n          size={16}\n        />\n      </button>\n\n      <div\n        id={multiselectboxId}\n        className={clsx(styles['multi-select-box-listbox--wrapper'])}\n        style={{ ...positionStyle.style, visibility: isOpen ? 'visible' : 'hidden' }}\n        role=\"listbox\"\n        ref={setPositionElement}\n      >\n        <ul className={styles['multi-select-box-listbox']} ref={optionListRef}>\n          {selectData.map(({ label, value, disabled }, index) => (\n            <li\n              className={clsx(styles['multi-select-box-listbox-option'], {\n                [styles['multi-select-box-listbox-option--active']]: index === activeIndex,\n                [styles['multi-select-box-listbox-option--disabled']]: disabled,\n              })}\n              key={value}\n              role=\"option\"\n              onKeyDown={onOptionKeyDown}\n              onClick={(event) => onOptionClick(event, { label, value, disabled })}\n              onMouseOver={() => setActiveIndex(index)}\n              onFocus={() => setActiveIndex(index)}\n              tabIndex={0}\n              aria-selected={selectedItems.some((item) => item.value === value)}\n            >\n              <label htmlFor={label} className={styles['multi-select-box-listbox-option-content']} tabIndex={-1}>\n                <Checkbox\n                  id={`${label}-${multiselectboxId}`}\n                  onChange={handleSelect}\n                  value={value}\n                  tabIndex={-1}\n                  disabled={disabled}\n                  checked={selectedItems.some((item) => item.value === value)}\n                />\n                <span>{label}</span>\n              </label>\n            </li>\n          ))}\n        </ul>\n      </div>\n    </div>\n  );\n};\n"],"names":["MultiSelectBox","selectData","onChange","defaultSelectedItems","labelSuffix","disabled","fullWidth","darkBorder","maxOptionHeight","optionPositionRight","multiselectboxId","useId","selectedItems","setSelectedItems","useState","selectedItemsCount","setSelectedItemsCount","isOpen","setIsOpen","activeIndex","setActiveIndex","wrapperRef","useRef","optionListRef","positionElement","setPositionElement","referenceElement","setReferenceElement","positionStyle","usePositionedFloaters","onMouseEventOutside","useCallback","target","onTriggerKeyDown","event","onOptionKeyDown","prev","nextIndex","_a","selectedItem","updatedSelectedItems","item","onOptionClick","option","handleSelect","checked","value","useEffect","activeOption","styles","jsxs","clsx","jsx","Icon","label","index","Checkbox"],"mappings":"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"}
+{"version":3,"file":"MultiSelectBox.js","sources":["../../../src/components/MultiSelectBox/MultiSelectBox.tsx"],"sourcesContent":["import { useRef, useState, useId, useEffect, useCallback } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { KeyboardEvent, ChangeEvent, MouseEvent } from 'react';\n\nimport styles from './MultiSelectBox.module.css';\n\nimport { Icon } from 'components/Icon';\nimport { Checkbox } from 'components/Checkbox';\nimport { usePositionedFloaters } from 'components/hooks/usePositionedFloaters';\n\nexport type MultiSelectData = {\n  label: string;\n  value: string | number;\n  disabled?: boolean;\n};\n\nexport interface MultiSelectBoxProps {\n  /** Array of label, values pairs */\n  selectData: MultiSelectData[];\n  /** Retuns selected label, values */\n  onChange: (values: MultiSelectData[]) => void;\n  /** Array of label, value pairs that should be check by default */\n  defaultSelectedItems?: MultiSelectData[];\n  /** Suffix label in the selectbutton '[count] selected' */\n  labelSuffix?: string;\n  /** Disables the multiselect */\n  disabled?: boolean;\n  /** If true sets the option dropdown min-width to the width of the select button. */\n  fullWidth?: boolean;\n  /** Dark border. */\n  darkBorder?: boolean;\n  /** The max height of the options. */\n  maxOptionHeight?: `${number}${'px' | 'rem'}`;\n  /** `true` to align the right side of the options with the select box; otherwise, `false` to align on the left side. */\n  optionPositionRight?: boolean;\n}\n\nexport const MultiSelectBox = ({\n  selectData,\n  onChange,\n  defaultSelectedItems,\n  labelSuffix = 'geselecteerd',\n  disabled = false,\n  fullWidth = false,\n  darkBorder = false,\n  maxOptionHeight,\n  optionPositionRight,\n}: MultiSelectBoxProps) => {\n  const multiselectboxId = useId();\n  const [selectedItems, setSelectedItems] = useState<MultiSelectData[]>(defaultSelectedItems || []);\n  const [selectedItemsCount, setSelectedItemsCount] = useState(defaultSelectedItems?.length || 0);\n  const [isOpen, setIsOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const optionListRef = useRef<HTMLUListElement>(null);\n\n  const [positionElement, setPositionElement] = useState<HTMLElement | null>(null);\n  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);\n  const { style: positionStyle } = usePositionedFloaters(positionElement, referenceElement, {\n    mouseEvent: 'click',\n    position: 'bottomLeft',\n    offset: 4,\n    maxFixedHeight: maxOptionHeight,\n    horizontalPosition: optionPositionRight ? 'right' : 'left',\n    mobileBreakpoint: '28rem',\n    fullWidth,\n  });\n\n  const onMouseEventOutside = useCallback(\n    ({ target }: Event | MouseEvent) => {\n      if (!target || !wrapperRef.current) return;\n\n      if (!wrapperRef.current.contains(target as Node)) {\n        setIsOpen(false);\n      }\n    },\n    [setIsOpen]\n  );\n\n  const onTriggerKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLButtonElement>) => {\n      switch (event.key) {\n        case 'Enter':\n          event.preventDefault();\n          setIsOpen(true);\n          break;\n        case 'Escape':\n          if (isOpen) {\n            event.stopPropagation();\n            setIsOpen(false);\n          }\n          break;\n        default:\n          break;\n      }\n    },\n    [isOpen]\n  );\n\n  const onOptionKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLLIElement>) => {\n      if (!isOpen) return;\n\n      switch (event.key) {\n        case 'ArrowDown':\n          event.preventDefault();\n          setActiveIndex((prev) => {\n            let nextIndex = prev;\n            do {\n              nextIndex = nextIndex < selectData.length - 1 ? nextIndex + 1 : 0;\n            } while (selectData[nextIndex]?.disabled);\n            return nextIndex;\n          });\n          break;\n        case 'ArrowUp':\n          event.preventDefault();\n          setActiveIndex((prev) => {\n            let nextIndex = prev;\n            do {\n              nextIndex = nextIndex <= 0 ? selectData.length - 1 : nextIndex - 1;\n            } while (selectData[nextIndex]?.disabled);\n            return nextIndex;\n          });\n          break;\n        case 'Enter': {\n          event.preventDefault();\n          const selectedItem = selectData[activeIndex];\n          if (!selectedItem || selectedItem.disabled) break;\n          const isAlreadySelected = selectedItems.some((item) => item.value === selectedItem.value);\n          const updatedSelectedItems = isAlreadySelected\n            ? selectedItems.filter((item) => item.value !== selectedItem.value)\n            : [...selectedItems, selectedItem];\n\n          setSelectedItems(updatedSelectedItems);\n          setSelectedItemsCount(updatedSelectedItems.length);\n          onChange(updatedSelectedItems);\n          break;\n        }\n        case 'Tab':\n          event.preventDefault();\n          setIsOpen(false);\n          break;\n        case 'Escape':\n          event.stopPropagation();\n          setIsOpen(false);\n          break;\n        default:\n          break;\n      }\n    },\n    [activeIndex, isOpen, selectData, selectedItems, onChange]\n  );\n\n  const onOptionClick = (event: MouseEvent<HTMLLIElement>, option: MultiSelectData) => {\n    if (option.disabled) return;\n\n    // Prevent toggle if click originated from the checkbox\n    if ((event.target as HTMLElement).tagName === 'INPUT') return;\n\n    const isAlreadySelected = selectedItems.some((item) => item.value === option.value);\n    const updatedSelectedItems = isAlreadySelected\n      ? selectedItems.filter((item) => item.value !== option.value)\n      : [...selectedItems, option];\n\n    setSelectedItems(updatedSelectedItems);\n    setSelectedItemsCount(updatedSelectedItems.length);\n    onChange(updatedSelectedItems);\n  };\n\n  const handleSelect = useCallback(\n    (event: ChangeEvent<HTMLInputElement>) => {\n      const { checked, value } = event.target;\n      let updatedSelectedItems = [...selectedItems];\n\n      if (checked) {\n        const selectedItem = selectData.find((item) => item.value === value);\n        if (selectedItem) {\n          updatedSelectedItems.push(selectedItem);\n        }\n      } else {\n        updatedSelectedItems = updatedSelectedItems.filter((item) => item.value !== value);\n      }\n\n      setSelectedItems(updatedSelectedItems);\n      setSelectedItemsCount(updatedSelectedItems.length);\n      onChange(updatedSelectedItems);\n    },\n    [selectData, selectedItems, onChange]\n  );\n\n  useEffect(() => {\n    if (isOpen) {\n      setActiveIndex(0);\n    }\n  }, [isOpen]);\n\n  useEffect(() => {\n    const activeOption = optionListRef.current?.children[activeIndex] as HTMLElement;\n    activeOption?.focus();\n  }, [activeIndex]);\n\n  useEffect(() => {\n    if (!isOpen) return;\n\n    document.addEventListener('click', onMouseEventOutside, true);\n    document.addEventListener('scroll', onMouseEventOutside, true);\n\n    return () => {\n      document.removeEventListener('click', onMouseEventOutside, true);\n      document.removeEventListener('scroll', onMouseEventOutside, true);\n    };\n  }, [onMouseEventOutside, isOpen]);\n\n  return (\n    <div className={styles['multi-select-box-wrapper']} ref={wrapperRef}>\n      <button\n        className={clsx(styles['multi-select-box-trigger'], {\n          [styles['multi-select-box-trigger--darkBorder']]: darkBorder,\n        })}\n        type=\"button\"\n        onClick={() => {\n          setIsOpen(!isOpen);\n        }}\n        onKeyDown={onTriggerKeyDown}\n        aria-expanded={isOpen}\n        aria-haspopup=\"listbox\"\n        aria-label={`${selectedItemsCount} ${labelSuffix}`}\n        disabled={disabled}\n        {...(isOpen && { 'aria-controls': multiselectboxId })}\n        ref={setReferenceElement}\n      >\n        <span className={styles['multi-select-box-trigger-label']}>\n          {selectedItemsCount} {labelSuffix}\n        </span>\n        <Icon\n          className={clsx(styles['multi-select-box-trigger-icon'], {\n            [styles['multi-select-box-trigger-icon--open']]: isOpen,\n          })}\n          name=\"CheveronDown\"\n          size={16}\n        />\n      </button>\n\n      <div\n        id={multiselectboxId}\n        className={clsx(styles['multi-select-box-listbox--wrapper'])}\n        style={{ ...positionStyle.style, visibility: isOpen ? 'visible' : 'hidden' }}\n        role=\"listbox\"\n        ref={setPositionElement}\n      >\n        <ul className={styles['multi-select-box-listbox']} ref={optionListRef}>\n          {selectData.map(({ label, value, disabled }, index) => (\n            <li\n              className={clsx(styles['multi-select-box-listbox-option'], {\n                [styles['multi-select-box-listbox-option--active']]: index === activeIndex,\n                [styles['multi-select-box-listbox-option--disabled']]: disabled,\n              })}\n              key={value}\n              role=\"option\"\n              onKeyDown={onOptionKeyDown}\n              onClick={(event) => onOptionClick(event, { label, value, disabled })}\n              onMouseOver={() => setActiveIndex(index)}\n              onFocus={() => setActiveIndex(index)}\n              tabIndex={0}\n              aria-selected={selectedItems.some((item) => item.value === value)}\n            >\n              <label htmlFor={label} className={styles['multi-select-box-listbox-option-content']} tabIndex={-1}>\n                <Checkbox\n                  id={`${label}-${multiselectboxId}`}\n                  onChange={handleSelect}\n                  value={value}\n                  tabIndex={-1}\n                  disabled={disabled}\n                  checked={selectedItems.some((item) => item.value === value)}\n                />\n                <span>{label}</span>\n              </label>\n            </li>\n          ))}\n        </ul>\n      </div>\n    </div>\n  );\n};\n"],"names":["MultiSelectBox","selectData","onChange","defaultSelectedItems","labelSuffix","disabled","fullWidth","darkBorder","maxOptionHeight","optionPositionRight","multiselectboxId","useId","selectedItems","setSelectedItems","useState","selectedItemsCount","setSelectedItemsCount","isOpen","setIsOpen","activeIndex","setActiveIndex","wrapperRef","useRef","optionListRef","positionElement","setPositionElement","referenceElement","setReferenceElement","positionStyle","usePositionedFloaters","onMouseEventOutside","useCallback","target","onTriggerKeyDown","event","onOptionKeyDown","prev","nextIndex","_a","selectedItem","updatedSelectedItems","item","onOptionClick","option","handleSelect","checked","value","useEffect","activeOption","styles","jsxs","clsx","jsx","Icon","label","index","Checkbox"],"mappings":"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"}

package/dist/components/MultiSelectBox/MultiSelectBox.stories.d.ts

@@ -2,5 +2,5 @@ import { Meta } from '@storybook/react';
 import { MultiSelectBoxProps } from './MultiSelectBox';
 declare const _default: Meta<MultiSelectBoxProps>;
 export default _default;
-export declare const MultiSelectBoxExample: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, MultiSelectBoxProps>;
-export declare const WithDefaultSelectedItems: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, MultiSelectBoxProps>;
+export declare const MultiSelectBoxExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, MultiSelectBoxProps>;
+export declare const WithDefaultSelectedItems: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, MultiSelectBoxProps>;

package/dist/components/MultiSelectBox/MultiSelectBox.stories.js

@@ -1,7 +1,7 @@
 import { jsx as l } from "react/jsx-runtime";
-import { fn as o } from "../../index-Dwqes6RH.js";
+import { W as n } from "../../index-Di9WPZUe.js";
 import { MultiSelectBox as e } from "./MultiSelectBox.js";
-const c = "<MultiSelectBox selectData={[{label, value}]} onChange={fn} labelSuffix={string} />", b = {
+const c = "<MultiSelectBox selectData={[{label, value}]} onChange={fn} labelSuffix={string} />", f = {
   title: "Organisms/MultiSelectBox",
   component: e,
   argTypes: {},
@@ -26,14 +26,14 @@ const c = "<MultiSelectBox selectData={[{label, value}]} onChange={fn} labelSuff
   },
   { label: "H.I. Docent", value: "9" },
   { label: "K.L. Docent ", value: "10" }
-], t = (n) => /* @__PURE__ */ l("div", { style: { width: "30rem", margin: "0rem auto 0 auto" }, children: /* @__PURE__ */ l(e, { ...n }) }), a = {
+], t = (o) => /* @__PURE__ */ l("div", { style: { width: "30rem", margin: "0rem auto 0 auto" }, children: /* @__PURE__ */ l(e, { ...o }) }), a = {
   fullWidth: !1,
   labelSuffix: "geselecteerd",
   maxOptionHeight: "20rem",
   optionPositionRight: !1,
   disabled: !1,
   selectData: s,
-  onChange: o()
+  onChange: n()
 }, i = t.bind({});
 i.args = {
   ...a
@@ -50,6 +50,6 @@ r.args = {
 export {
   i as MultiSelectBoxExample,
   r as WithDefaultSelectedItems,
-  b as default
+  f as default
 };
 //# sourceMappingURL=MultiSelectBox.stories.js.map

package/dist/components/MultiSelectBox/MultiSelectBox.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectBox.stories.js","sources":["../../../src/components/MultiSelectBox/MultiSelectBox.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { MultiSelectBoxProps } from './MultiSelectBox';\n\nimport { MultiSelectBox } from './MultiSelectBox';\n\nconst codeString = `<MultiSelectBox selectData={[{label, value}]} onChange={fn} labelSuffix={string} />`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Organisms/MultiSelectBox',\n  component: MultiSelectBox,\n  argTypes: {},\n  parameters: {\n    inspectComponent: MultiSelectBox,\n    codeString: codeString,\n  },\n} as Meta<MultiSelectBoxProps>;\n\nconst mockItems = [\n  { label: 'A.B. Docent', value: '1' },\n  { label: 'B.C. Docent met lange achternaam', value: '2' },\n  {\n    label: 'prof. F.G. Docent met lang achternaam',\n    value: '3',\n  },\n  { label: 'H.I. Docent', value: '4' },\n  { label: 'K.L. Docent ', value: '5' },\n  { label: 'A.B. Docent', value: '6' },\n  { label: 'B.C. Docent met lange achternaam', value: '7' },\n  {\n    label: 'prof. F.G. Docent met lang achternaam',\n    value: '8',\n  },\n  { label: 'H.I. Docent', value: '9' },\n  { label: 'K.L. Docent ', value: '10' },\n];\n\nconst Template: StoryFn<MultiSelectBoxProps> = (args) => {\n  return (\n    <div style={{ width: '30rem', margin: '0rem auto 0 auto' }}>\n      <MultiSelectBox {...args} />\n    </div>\n  );\n};\n\nconst defaultArgs: Partial<MultiSelectBoxProps> = {\n  fullWidth: false,\n  labelSuffix: 'geselecteerd',\n  maxOptionHeight: '20rem',\n  optionPositionRight: false,\n  disabled: false,\n  selectData: mockItems,\n  onChange: fn(),\n};\n\nexport const MultiSelectBoxExample = Template.bind({});\nMultiSelectBoxExample.args = {\n  ...defaultArgs,\n};\n\nexport const WithDefaultSelectedItems = Template.bind({});\nWithDefaultSelectedItems.args = {\n  ...defaultArgs,\n  defaultSelectedItems: [\n    { label: 'A.B. Docent', value: '1' },\n    { label: 'H.I. Docent', value: '4' },\n    { label: 'A.B. Docent', value: '6' },\n  ],\n};\n"],"names":["codeString","MultiSelectBox_stories","MultiSelectBox","mockItems","Template","args","jsx","defaultArgs","fn","MultiSelectBoxExample","WithDefaultSelectedItems"],"mappings":";;;AAOA,MAAMA,IAAa,uFAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU,CAAC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAY;AAAA,EAChB,EAAE,OAAO,eAAe,OAAO,IAAI;AAAA,EACnC,EAAE,OAAO,oCAAoC,OAAO,IAAI;AAAA,EACxD;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,EAAE,OAAO,eAAe,OAAO,IAAI;AAAA,EACnC,EAAE,OAAO,gBAAgB,OAAO,IAAI;AAAA,EACpC,EAAE,OAAO,eAAe,OAAO,IAAI;AAAA,EACnC,EAAE,OAAO,oCAAoC,OAAO,IAAI;AAAA,EACxD;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,EAAE,OAAO,eAAe,OAAO,IAAI;AAAA,EACnC,EAAE,OAAO,gBAAgB,OAAO,KAAK;AACvC,GAEMC,IAAyC,CAACC,MAE3C,gBAAAC,EAAA,OAAA,EAAI,OAAO,EAAE,OAAO,SAAS,QAAQ,mBAAA,GACpC,UAAA,gBAAAA,EAACJ,GAAgB,EAAA,GAAGG,EAAM,CAAA,GAC5B,GAIEE,IAA4C;AAAA,EAChD,WAAW;AAAA,EACX,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,UAAU;AAAA,EACV,YAAYJ;AAAA,EACZ,UAAUK,EAAG;AACf,GAEaC,IAAwBL,EAAS,KAAK,CAAE,CAAA;AACrDK,EAAsB,OAAO;AAAA,EAC3B,GAAGF;AACL;AAEO,MAAMG,IAA2BN,EAAS,KAAK,CAAE,CAAA;AACxDM,EAAyB,OAAO;AAAA,EAC9B,GAAGH;AAAA,EACH,sBAAsB;AAAA,IACpB,EAAE,OAAO,eAAe,OAAO,IAAI;AAAA,IACnC,EAAE,OAAO,eAAe,OAAO,IAAI;AAAA,IACnC,EAAE,OAAO,eAAe,OAAO,IAAI;AAAA,EAAA;AAEvC;"}
+{"version":3,"file":"MultiSelectBox.stories.js","sources":["../../../src/components/MultiSelectBox/MultiSelectBox.stories.tsx"],"sourcesContent":["import { fn } from 'storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { MultiSelectBoxProps } from './MultiSelectBox';\n\nimport { MultiSelectBox } from './MultiSelectBox';\n\nconst codeString = `<MultiSelectBox selectData={[{label, value}]} onChange={fn} labelSuffix={string} />`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Organisms/MultiSelectBox',\n  component: MultiSelectBox,\n  argTypes: {},\n  parameters: {\n    inspectComponent: MultiSelectBox,\n    codeString: codeString,\n  },\n} as Meta<MultiSelectBoxProps>;\n\nconst mockItems = [\n  { label: 'A.B. Docent', value: '1' },\n  { label: 'B.C. Docent met lange achternaam', value: '2' },\n  {\n    label: 'prof. F.G. Docent met lang achternaam',\n    value: '3',\n  },\n  { label: 'H.I. Docent', value: '4' },\n  { label: 'K.L. Docent ', value: '5' },\n  { label: 'A.B. Docent', value: '6' },\n  { label: 'B.C. Docent met lange achternaam', value: '7' },\n  {\n    label: 'prof. F.G. Docent met lang achternaam',\n    value: '8',\n  },\n  { label: 'H.I. Docent', value: '9' },\n  { label: 'K.L. Docent ', value: '10' },\n];\n\nconst Template: StoryFn<MultiSelectBoxProps> = (args) => {\n  return (\n    <div style={{ width: '30rem', margin: '0rem auto 0 auto' }}>\n      <MultiSelectBox {...args} />\n    </div>\n  );\n};\n\nconst defaultArgs: Partial<MultiSelectBoxProps> = {\n  fullWidth: false,\n  labelSuffix: 'geselecteerd',\n  maxOptionHeight: '20rem',\n  optionPositionRight: false,\n  disabled: false,\n  selectData: mockItems,\n  onChange: fn(),\n};\n\nexport const MultiSelectBoxExample = Template.bind({});\nMultiSelectBoxExample.args = {\n  ...defaultArgs,\n};\n\nexport const WithDefaultSelectedItems = Template.bind({});\nWithDefaultSelectedItems.args = {\n  ...defaultArgs,\n  defaultSelectedItems: [\n    { label: 'A.B. Docent', value: '1' },\n    { label: 'H.I. Docent', value: '4' },\n    { label: 'A.B. Docent', value: '6' },\n  ],\n};\n"],"names":["codeString","MultiSelectBox_stories","MultiSelectBox","mockItems","Template","args","jsx","defaultArgs","fn","MultiSelectBoxExample","WithDefaultSelectedItems"],"mappings":";;;AAOA,MAAMA,IAAa,uFAGnBC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU,CAAA;AAAA,EACV,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAY;AAAA,EAChB,EAAE,OAAO,eAAe,OAAO,IAAA;AAAA,EAC/B,EAAE,OAAO,oCAAoC,OAAO,IAAA;AAAA,EACpD;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,EAAA;AAAA,EAET,EAAE,OAAO,eAAe,OAAO,IAAA;AAAA,EAC/B,EAAE,OAAO,gBAAgB,OAAO,IAAA;AAAA,EAChC,EAAE,OAAO,eAAe,OAAO,IAAA;AAAA,EAC/B,EAAE,OAAO,oCAAoC,OAAO,IAAA;AAAA,EACpD;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,EAAA;AAAA,EAET,EAAE,OAAO,eAAe,OAAO,IAAA;AAAA,EAC/B,EAAE,OAAO,gBAAgB,OAAO,KAAA;AAClC,GAEMC,IAAyC,CAACC,MAE5C,gBAAAC,EAAC,OAAA,EAAI,OAAO,EAAE,OAAO,SAAS,QAAQ,mBAAA,GACpC,UAAA,gBAAAA,EAACJ,GAAA,EAAgB,GAAGG,GAAM,GAC5B,GAIEE,IAA4C;AAAA,EAChD,WAAW;AAAA,EACX,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,UAAU;AAAA,EACV,YAAYJ;AAAA,EACZ,UAAUK,EAAA;AACZ,GAEaC,IAAwBL,EAAS,KAAK,CAAA,CAAE;AACrDK,EAAsB,OAAO;AAAA,EAC3B,GAAGF;AACL;AAEO,MAAMG,IAA2BN,EAAS,KAAK,CAAA,CAAE;AACxDM,EAAyB,OAAO;AAAA,EAC9B,GAAGH;AAAA,EACH,sBAAsB;AAAA,IACpB,EAAE,OAAO,eAAe,OAAO,IAAA;AAAA,IAC/B,EAAE,OAAO,eAAe,OAAO,IAAA;AAAA,IAC/B,EAAE,OAAO,eAAe,OAAO,IAAA;AAAA,EAAI;AAEvC;"}

package/dist/components/MultiSelectBox/MultiSelectBox.test.js

@@ -1,6 +1,6 @@
 import { jsx as o, jsxs as d, Fragment as r } from "react/jsx-runtime";
-import "../../index-BqLi4tOb.js";
-import { r as n, s as t, f as a } from "../../react.esm-CsMDid07.js";
+import "../../index-DV47hRzi.js";
+import { r as n, s as t, f as a } from "../../react.esm-CFMwGdo5.js";
 import { MultiSelectBox as l } from "./MultiSelectBox.js";
 const i = jest.fn(), c = [
   { label: "Option 1", value: "1" },

package/dist/components/MultiSelectBox/MultiSelectBox.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectBox.test.js","sources":["../../../src/components/MultiSelectBox/MultiSelectBox.test.tsx"],"sourcesContent":["import '@testing-library/jest-dom';\nimport { render, screen, fireEvent } from '@testing-library/react';\n\nimport { MultiSelectBox } from './MultiSelectBox';\n\nconst onChangeSpy = jest.fn();\n\nconst mockSelectData = [\n  { label: 'Option 1', value: '1' },\n  { label: 'Option 2', value: '2' },\n  { label: 'Option 3', value: '3' },\n];\n\ndescribe('MultiSelectBox', () => {\n  it('renders the component with default props', () => {\n    render(<MultiSelectBox selectData={mockSelectData} onChange={onChangeSpy} labelSuffix=\"selected\" />);\n    const button = screen.getByRole('button');\n    expect(button).toBeInTheDocument();\n    expect(button).toHaveAttribute('aria-expanded', 'false');\n  });\n\n  it('opens the dropdown when the button is clicked', () => {\n    render(<MultiSelectBox selectData={mockSelectData} onChange={onChangeSpy} labelSuffix=\"selected\" />);\n    const button = screen.getByRole('button');\n    fireEvent.click(button);\n    expect(button).toHaveAttribute('aria-expanded', 'true');\n    expect(screen.getByRole('listbox')).toBeInTheDocument();\n  });\n\n  it('closes the dropdown when clicking outside', () => {\n    render(\n      <>\n        <MultiSelectBox selectData={mockSelectData} onChange={onChangeSpy} labelSuffix=\"selected\" />\n        <div data-testid=\"outside-element\">Outside</div>\n      </>\n    );\n\n    const button = screen.getByRole('button');\n    fireEvent.click(button);\n    expect(button).toHaveAttribute('aria-expanded', 'true');\n    const outsideElement = screen.getByTestId('outside-element');\n    fireEvent.click(outsideElement);\n    expect(button).toHaveAttribute('aria-expanded', 'false');\n  });\n});\n"],"names":["onChangeSpy","mockSelectData","render","jsx","MultiSelectBox","button","screen","fireEvent","jsxs","Fragment","outsideElement"],"mappings":";;;;AAKA,MAAMA,IAAc,KAAK,GAAG,GAEtBC,IAAiB;AAAA,EACrB,EAAE,OAAO,YAAY,OAAO,IAAI;AAAA,EAChC,EAAE,OAAO,YAAY,OAAO,IAAI;AAAA,EAChC,EAAE,OAAO,YAAY,OAAO,IAAI;AAClC;AAEA,SAAS,kBAAkB,MAAM;AAC/B,KAAG,4CAA4C,MAAM;AAC5C,IAAAC,EAAA,gBAAAC,EAACC,KAAe,YAAYH,GAAgB,UAAUD,GAAa,aAAY,YAAW,CAAE;AAC7F,UAAAK,IAASC,EAAO,UAAU,QAAQ;AACjC,WAAAD,CAAM,EAAE,kBAAkB,GACjC,OAAOA,CAAM,EAAE,gBAAgB,iBAAiB,OAAO;AAAA,EAAA,CACxD,GAED,GAAG,iDAAiD,MAAM;AACjD,IAAAH,EAAA,gBAAAC,EAACC,KAAe,YAAYH,GAAgB,UAAUD,GAAa,aAAY,YAAW,CAAE;AAC7F,UAAAK,IAASC,EAAO,UAAU,QAAQ;AACxC,IAAAC,EAAU,MAAMF,CAAM,GACtB,OAAOA,CAAM,EAAE,gBAAgB,iBAAiB,MAAM,GACtD,OAAOC,EAAO,UAAU,SAAS,CAAC,EAAE,kBAAkB;AAAA,EAAA,CACvD,GAED,GAAG,6CAA6C,MAAM;AACpD,IAAAJ;AAAA,MAEI,gBAAAM,EAAAC,GAAA,EAAA,UAAA;AAAA,QAAA,gBAAAN,EAACC,KAAe,YAAYH,GAAgB,UAAUD,GAAa,aAAY,YAAW;AAAA,QACzF,gBAAAG,EAAA,OAAA,EAAI,eAAY,mBAAkB,UAAO,UAAA,CAAA;AAAA,MAAA,EAC5C,CAAA;AAAA,IACF;AAEM,UAAAE,IAASC,EAAO,UAAU,QAAQ;AACxC,IAAAC,EAAU,MAAMF,CAAM,GACtB,OAAOA,CAAM,EAAE,gBAAgB,iBAAiB,MAAM;AAChD,UAAAK,IAAiBJ,EAAO,YAAY,iBAAiB;AAC3D,IAAAC,EAAU,MAAMG,CAAc,GAC9B,OAAOL,CAAM,EAAE,gBAAgB,iBAAiB,OAAO;AAAA,EAAA,CACxD;AACH,CAAC;"}
+{"version":3,"file":"MultiSelectBox.test.js","sources":["../../../src/components/MultiSelectBox/MultiSelectBox.test.tsx"],"sourcesContent":["import '@testing-library/jest-dom';\nimport { render, screen, fireEvent } from '@testing-library/react';\n\nimport { MultiSelectBox } from './MultiSelectBox';\n\nconst onChangeSpy = jest.fn();\n\nconst mockSelectData = [\n  { label: 'Option 1', value: '1' },\n  { label: 'Option 2', value: '2' },\n  { label: 'Option 3', value: '3' },\n];\n\ndescribe('MultiSelectBox', () => {\n  it('renders the component with default props', () => {\n    render(<MultiSelectBox selectData={mockSelectData} onChange={onChangeSpy} labelSuffix=\"selected\" />);\n    const button = screen.getByRole('button');\n    expect(button).toBeInTheDocument();\n    expect(button).toHaveAttribute('aria-expanded', 'false');\n  });\n\n  it('opens the dropdown when the button is clicked', () => {\n    render(<MultiSelectBox selectData={mockSelectData} onChange={onChangeSpy} labelSuffix=\"selected\" />);\n    const button = screen.getByRole('button');\n    fireEvent.click(button);\n    expect(button).toHaveAttribute('aria-expanded', 'true');\n    expect(screen.getByRole('listbox')).toBeInTheDocument();\n  });\n\n  it('closes the dropdown when clicking outside', () => {\n    render(\n      <>\n        <MultiSelectBox selectData={mockSelectData} onChange={onChangeSpy} labelSuffix=\"selected\" />\n        <div data-testid=\"outside-element\">Outside</div>\n      </>\n    );\n\n    const button = screen.getByRole('button');\n    fireEvent.click(button);\n    expect(button).toHaveAttribute('aria-expanded', 'true');\n    const outsideElement = screen.getByTestId('outside-element');\n    fireEvent.click(outsideElement);\n    expect(button).toHaveAttribute('aria-expanded', 'false');\n  });\n});\n"],"names":["onChangeSpy","mockSelectData","render","jsx","MultiSelectBox","button","screen","fireEvent","jsxs","Fragment","outsideElement"],"mappings":";;;;AAKA,MAAMA,IAAc,KAAK,GAAA,GAEnBC,IAAiB;AAAA,EACrB,EAAE,OAAO,YAAY,OAAO,IAAA;AAAA,EAC5B,EAAE,OAAO,YAAY,OAAO,IAAA;AAAA,EAC5B,EAAE,OAAO,YAAY,OAAO,IAAA;AAC9B;AAEA,SAAS,kBAAkB,MAAM;AAC/B,KAAG,4CAA4C,MAAM;AACnD,IAAAC,EAAO,gBAAAC,EAACC,KAAe,YAAYH,GAAgB,UAAUD,GAAa,aAAY,YAAW,CAAE;AACnG,UAAMK,IAASC,EAAO,UAAU,QAAQ;AACxC,WAAOD,CAAM,EAAE,kBAAA,GACf,OAAOA,CAAM,EAAE,gBAAgB,iBAAiB,OAAO;AAAA,EAAA,CACxD,GAED,GAAG,iDAAiD,MAAM;AACxD,IAAAH,EAAO,gBAAAC,EAACC,KAAe,YAAYH,GAAgB,UAAUD,GAAa,aAAY,YAAW,CAAE;AACnG,UAAMK,IAASC,EAAO,UAAU,QAAQ;AACxC,IAAAC,EAAU,MAAMF,CAAM,GACtB,OAAOA,CAAM,EAAE,gBAAgB,iBAAiB,MAAM,GACtD,OAAOC,EAAO,UAAU,SAAS,CAAC,EAAE,kBAAA;AAAA,EAAkB,CACvD,GAED,GAAG,6CAA6C,MAAM;AACpD,IAAAJ;AAAA,MACE,gBAAAM,EAAAC,GAAA,EACE,UAAA;AAAA,QAAA,gBAAAN,EAACC,KAAe,YAAYH,GAAgB,UAAUD,GAAa,aAAY,YAAW;AAAA,QAC1F,gBAAAG,EAAC,OAAA,EAAI,eAAY,mBAAkB,UAAA,UAAA,CAAO;AAAA,MAAA,EAAA,CAC5C;AAAA,IAAA;AAGF,UAAME,IAASC,EAAO,UAAU,QAAQ;AACxC,IAAAC,EAAU,MAAMF,CAAM,GACtB,OAAOA,CAAM,EAAE,gBAAgB,iBAAiB,MAAM;AACtD,UAAMK,IAAiBJ,EAAO,YAAY,iBAAiB;AAC3D,IAAAC,EAAU,MAAMG,CAAc,GAC9B,OAAOL,CAAM,EAAE,gBAAgB,iBAAiB,OAAO;AAAA,EAAA,CACxD;AACH,CAAC;"}

package/dist/components/Notification/Notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"Notification.js","sources":["../../../src/components/Notification/Notification.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { ReactNode } from 'react';\n\nimport styles from './Notification.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport type NotificationVariant = 'default' | 'bar';\nexport type NotificationLevel = 'neutral' | 'information' | 'success' | 'warning' | 'danger';\n\nexport interface NotificationProps {\n  title: string;\n  subtitle?: string;\n  action?: ReactNode;\n  variant?: NotificationVariant;\n  level: NotificationLevel;\n  onClose?: () => void;\n}\n\nexport const Notification = ({ title, subtitle, action, variant = 'default', level, onClose }: NotificationProps) => {\n  const isBar = variant === 'bar';\n\n  function setIconName(toastType: NotificationLevel) {\n    if (toastType === 'neutral') return 'CalendarEdit';\n    if (toastType === 'information') return 'SquareInfo';\n    if (toastType === 'success') return 'CheckCircle';\n    return 'ExclamationTriangleMini';\n  }\n\n  return (\n    <div className={clsx(styles['notification'], styles[`notification--${variant}`], styles[`notification--${level}`])}>\n      <div className={styles['notification-content']}>\n        <Icon name={setIconName(level)} />\n        <div className={styles['notification-content--text']}>\n          <p className={styles['notification-title']}>{title}</p>\n          {subtitle && <p className={styles['notification-subtitle']}>{subtitle}</p>}\n          {action && <div className={styles['notification-action']}>{action}</div>}\n        </div>\n      </div>\n      {onClose && (\n        <button\n          type=\"button\"\n          aria-label=\"close\"\n          className={clsx(styles['notification-close-button'], styles[`notification-close-button--${level}`], {\n            [styles[`notification-close-button--bar--${level}`]]: isBar,\n          })}\n        >\n          <Icon name=\"Cross\" size={24} />\n        </button>\n      )}\n    </div>\n  );\n};\n"],"names":["Notification","title","subtitle","action","variant","level","onClose","isBar","setIconName","toastType","clsx","styles","jsxs","jsx","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;GAoBaA,IAAe,CAAC,EAAE,OAAAC,GAAO,UAAAC,GAAU,QAAAC,GAAQ,SAAAC,IAAU,WAAW,OAAAC,GAAO,SAAAC,QAAiC;AACnH,QAAMC,IAAQH,MAAY;AAE1B,WAASI,EAAYC,GAA8B;AAC7C,WAAAA,MAAc,YAAkB,iBAChCA,MAAc,gBAAsB,eACpCA,MAAc,YAAkB,gBAC7B;AAAA,EAAA;AAGT,2BACG,OAAI,EAAA,WAAWC,EAAKC,EAAO,cAAiBA,EAAO,iBAAiBP,CAAO,EAAE,GAAGO,EAAO,iBAAiBN,CAAK,EAAE,CAAC,GAC/G,UAAA;AAAA,IAAA,gBAAAO,EAAC,OAAI,EAAA,WAAWD,EAAO,sBAAsB,GAC3C,UAAA;AAAA,MAAA,gBAAAE,EAACC,GAAK,EAAA,MAAMN,EAAYH,CAAK,EAAG,CAAA;AAAA,MAC/B,gBAAAO,EAAA,OAAA,EAAI,WAAWD,EAAO,4BAA4B,GACjD,UAAA;AAAA,QAAA,gBAAAE,EAAC,KAAE,EAAA,WAAWF,EAAO,oBAAoB,GAAI,UAAMV,GAAA;AAAA,QAClDC,KAAa,gBAAAW,EAAA,KAAA,EAAE,WAAWF,EAAO,uBAAuB,GAAI,UAAST,GAAA;AAAA,QACrEC,KAAW,gBAAAU,EAAA,OAAA,EAAI,WAAWF,EAAO,qBAAqB,GAAI,UAAOR,EAAA,CAAA;AAAA,MAAA,EACpE,CAAA;AAAA,IAAA,GACF;AAAA,IACCG,KACC,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,WAAWH,EAAKC,EAAO,2BAA2B,GAAGA,EAAO,8BAA8BN,CAAK,EAAE,GAAG;AAAA,UAClG,CAACM,EAAO,mCAAmCN,CAAK,EAAE,CAAC,GAAGE;AAAA,QAAA,CACvD;AAAA,QAED,UAAC,gBAAAM,EAAAC,GAAA,EAAK,MAAK,SAAQ,MAAM,GAAI,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAC/B,GAEJ;AAEJ;"}
+{"version":3,"file":"Notification.js","sources":["../../../src/components/Notification/Notification.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { ReactNode } from 'react';\n\nimport styles from './Notification.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport type NotificationVariant = 'default' | 'bar';\nexport type NotificationLevel = 'neutral' | 'information' | 'success' | 'warning' | 'danger';\n\nexport interface NotificationProps {\n  title: string;\n  subtitle?: string;\n  action?: ReactNode;\n  variant?: NotificationVariant;\n  level: NotificationLevel;\n  onClose?: () => void;\n}\n\nexport const Notification = ({ title, subtitle, action, variant = 'default', level, onClose }: NotificationProps) => {\n  const isBar = variant === 'bar';\n\n  function setIconName(toastType: NotificationLevel) {\n    if (toastType === 'neutral') return 'CalendarEdit';\n    if (toastType === 'information') return 'SquareInfo';\n    if (toastType === 'success') return 'CheckCircle';\n    return 'ExclamationTriangleMini';\n  }\n\n  return (\n    <div className={clsx(styles['notification'], styles[`notification--${variant}`], styles[`notification--${level}`])}>\n      <div className={styles['notification-content']}>\n        <Icon name={setIconName(level)} />\n        <div className={styles['notification-content--text']}>\n          <p className={styles['notification-title']}>{title}</p>\n          {subtitle && <p className={styles['notification-subtitle']}>{subtitle}</p>}\n          {action && <div className={styles['notification-action']}>{action}</div>}\n        </div>\n      </div>\n      {onClose && (\n        <button\n          type=\"button\"\n          aria-label=\"close\"\n          className={clsx(styles['notification-close-button'], styles[`notification-close-button--${level}`], {\n            [styles[`notification-close-button--bar--${level}`]]: isBar,\n          })}\n        >\n          <Icon name=\"Cross\" size={24} />\n        </button>\n      )}\n    </div>\n  );\n};\n"],"names":["Notification","title","subtitle","action","variant","level","onClose","isBar","setIconName","toastType","clsx","styles","jsxs","jsx","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;GAoBaA,IAAe,CAAC,EAAE,OAAAC,GAAO,UAAAC,GAAU,QAAAC,GAAQ,SAAAC,IAAU,WAAW,OAAAC,GAAO,SAAAC,QAAiC;AACnH,QAAMC,IAAQH,MAAY;AAE1B,WAASI,EAAYC,GAA8B;AACjD,WAAIA,MAAc,YAAkB,iBAChCA,MAAc,gBAAsB,eACpCA,MAAc,YAAkB,gBAC7B;AAAA,EAAA;AAGT,2BACG,OAAA,EAAI,WAAWC,EAAKC,EAAO,cAAiBA,EAAO,iBAAiBP,CAAO,EAAE,GAAGO,EAAO,iBAAiBN,CAAK,EAAE,CAAC,GAC/G,UAAA;AAAA,IAAA,gBAAAO,EAAC,OAAA,EAAI,WAAWD,EAAO,sBAAsB,GAC3C,UAAA;AAAA,MAAA,gBAAAE,EAACC,GAAA,EAAK,MAAMN,EAAYH,CAAK,EAAA,CAAG;AAAA,MAChC,gBAAAO,EAAC,OAAA,EAAI,WAAWD,EAAO,4BAA4B,GACjD,UAAA;AAAA,QAAA,gBAAAE,EAAC,KAAA,EAAE,WAAWF,EAAO,oBAAoB,GAAI,UAAAV,GAAM;AAAA,QAClDC,KAAY,gBAAAW,EAAC,KAAA,EAAE,WAAWF,EAAO,uBAAuB,GAAI,UAAAT,GAAS;AAAA,QACrEC,KAAU,gBAAAU,EAAC,OAAA,EAAI,WAAWF,EAAO,qBAAqB,GAAI,UAAAR,EAAA,CAAO;AAAA,MAAA,EAAA,CACpE;AAAA,IAAA,GACF;AAAA,IACCG,KACC,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,WAAWH,EAAKC,EAAO,2BAA2B,GAAGA,EAAO,8BAA8BN,CAAK,EAAE,GAAG;AAAA,UAClG,CAACM,EAAO,mCAAmCN,CAAK,EAAE,CAAC,GAAGE;AAAA,QAAA,CACvD;AAAA,QAED,UAAA,gBAAAM,EAACC,GAAA,EAAK,MAAK,SAAQ,MAAM,GAAA,CAAI;AAAA,MAAA;AAAA,IAAA;AAAA,EAC/B,GAEJ;AAEJ;"}

package/dist/components/Notification/Notification.stories.d.ts

@@ -2,5 +2,5 @@ import { Meta } from '@storybook/react';
 import { NotificationProps } from './Notification';
 declare const _default: Meta<NotificationProps>;
 export default _default;
-export declare const NotificationExample: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, NotificationProps>;
-export declare const AsBar: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, NotificationProps>;
+export declare const NotificationExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, NotificationProps>;
+export declare const AsBar: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, NotificationProps>;

package/dist/components/Notification/Notification.stories.js

@@ -1,8 +1,8 @@
 import { jsx as i } from "react/jsx-runtime";
-import { fn as a } from "../../index-Dwqes6RH.js";
+import { W as a } from "../../index-Di9WPZUe.js";
 import { Notification as t } from "./Notification.js";
 const r = `<Notification title={title} subtitle={subtitle} action={action} 
-  level={level} variant={variant} onClose={() => {}} />`, p = {
+  level={level} variant={variant} onClose={() => {}} />`, m = {
   title: "Molecules/Notification",
   component: t,
   argTypes: {
@@ -38,6 +38,6 @@ s.args = {
 export {
   s as AsBar,
   l as NotificationExample,
-  p as default
+  m as default
 };
 //# sourceMappingURL=Notification.stories.js.map

package/dist/components/Notification/Notification.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Notification.stories.js","sources":["../../../src/components/Notification/Notification.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { NotificationProps } from './Notification';\n\nimport { Notification } from './Notification';\n\nconst codeString = `<Notification title={title} subtitle={subtitle} action={action} \n  level={level} variant={variant} onClose={() => {}} />`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Molecules/Notification',\n  component: Notification,\n  argTypes: {\n    level: {\n      options: ['neutral', 'information', 'success', 'warning', 'danger'],\n      control: { type: 'radio' },\n    },\n    variant: {\n      options: ['default', 'bar'],\n      control: { type: 'radio' },\n    },\n  },\n  parameters: {\n    inspectComponent: Notification,\n    codeString: codeString,\n  },\n} as Meta<NotificationProps>;\n\nconst Template: StoryFn<NotificationProps> = (args) => <Notification {...args} />;\n\nconst defaultArgs: Partial<NotificationProps> = {\n  level: 'information',\n  title: 'Titel van de melding',\n  onClose: fn(),\n};\n\nexport const NotificationExample = Template.bind({});\nNotificationExample.args = {\n  ...defaultArgs,\n  variant: 'default',\n  subtitle: 'Subtekst ter verduidelijking van de melding.',\n  action: <span>Actie</span>,\n};\n\nexport const AsBar = Template.bind({});\nAsBar.args = {\n  ...defaultArgs,\n  variant: 'bar',\n};\n"],"names":["codeString","Notification_stories","Notification","Template","args","jsx","defaultArgs","fn","NotificationExample","AsBar"],"mappings":";;;AAOA,MAAMA,IAAa;AAAA,0DAIJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS,CAAC,WAAW,eAAe,WAAW,WAAW,QAAQ;AAAA,MAClE,SAAS,EAAE,MAAM,QAAQ;AAAA,IAC3B;AAAA,IACA,SAAS;AAAA,MACP,SAAS,CAAC,WAAW,KAAK;AAAA,MAC1B,SAAS,EAAE,MAAM,QAAQ;AAAA,IAAA;AAAA,EAE7B;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAuC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAc,GAAGE,GAAM,GAEzEE,IAA0C;AAAA,EAC9C,OAAO;AAAA,EACP,OAAO;AAAA,EACP,SAASC,EAAG;AACd,GAEaC,IAAsBL,EAAS,KAAK,CAAE,CAAA;AACnDK,EAAoB,OAAO;AAAA,EACzB,GAAGF;AAAA,EACH,SAAS;AAAA,EACT,UAAU;AAAA,EACV,QAAS,gBAAAD,EAAA,QAAA,EAAK,UAAK,QAAA,CAAA;AACrB;AAEO,MAAMI,IAAQN,EAAS,KAAK,CAAE,CAAA;AACrCM,EAAM,OAAO;AAAA,EACX,GAAGH;AAAA,EACH,SAAS;AACX;"}
+{"version":3,"file":"Notification.stories.js","sources":["../../../src/components/Notification/Notification.stories.tsx"],"sourcesContent":["import { fn } from 'storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { NotificationProps } from './Notification';\n\nimport { Notification } from './Notification';\n\nconst codeString = `<Notification title={title} subtitle={subtitle} action={action} \n  level={level} variant={variant} onClose={() => {}} />`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Molecules/Notification',\n  component: Notification,\n  argTypes: {\n    level: {\n      options: ['neutral', 'information', 'success', 'warning', 'danger'],\n      control: { type: 'radio' },\n    },\n    variant: {\n      options: ['default', 'bar'],\n      control: { type: 'radio' },\n    },\n  },\n  parameters: {\n    inspectComponent: Notification,\n    codeString: codeString,\n  },\n} as Meta<NotificationProps>;\n\nconst Template: StoryFn<NotificationProps> = (args) => <Notification {...args} />;\n\nconst defaultArgs: Partial<NotificationProps> = {\n  level: 'information',\n  title: 'Titel van de melding',\n  onClose: fn(),\n};\n\nexport const NotificationExample = Template.bind({});\nNotificationExample.args = {\n  ...defaultArgs,\n  variant: 'default',\n  subtitle: 'Subtekst ter verduidelijking van de melding.',\n  action: <span>Actie</span>,\n};\n\nexport const AsBar = Template.bind({});\nAsBar.args = {\n  ...defaultArgs,\n  variant: 'bar',\n};\n"],"names":["codeString","Notification_stories","Notification","Template","args","jsx","defaultArgs","fn","NotificationExample","AsBar"],"mappings":";;;AAOA,MAAMA,IAAa;AAAA,0DAInBC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS,CAAC,WAAW,eAAe,WAAW,WAAW,QAAQ;AAAA,MAClE,SAAS,EAAE,MAAM,QAAA;AAAA,IAAQ;AAAA,IAE3B,SAAS;AAAA,MACP,SAAS,CAAC,WAAW,KAAK;AAAA,MAC1B,SAAS,EAAE,MAAM,QAAA;AAAA,IAAQ;AAAA,EAC3B;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAuC,CAACC,MAAS,gBAAAC,EAACH,GAAA,EAAc,GAAGE,GAAM,GAEzEE,IAA0C;AAAA,EAC9C,OAAO;AAAA,EACP,OAAO;AAAA,EACP,SAASC,EAAA;AACX,GAEaC,IAAsBL,EAAS,KAAK,CAAA,CAAE;AACnDK,EAAoB,OAAO;AAAA,EACzB,GAAGF;AAAA,EACH,SAAS;AAAA,EACT,UAAU;AAAA,EACV,QAAQ,gBAAAD,EAAC,QAAA,EAAK,UAAA,QAAA,CAAK;AACrB;AAEO,MAAMI,IAAQN,EAAS,KAAK,CAAA,CAAE;AACrCM,EAAM,OAAO;AAAA,EACX,GAAGH;AAAA,EACH,SAAS;AACX;"}

package/dist/components/Notification/Notification.test.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
-import "../../index-BqLi4tOb.js";
-import { r as i, s as t } from "../../react.esm-CsMDid07.js";
+import "../../index-DV47hRzi.js";
+import { r as i, s as t } from "../../react.esm-CFMwGdo5.js";
 import { Notification as n } from "./Notification.js";
 describe("Notification", () => {
   it("renders title and subtitle", () => {

package/dist/components/Notification/Notification.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"Notification.test.js","sources":["../../../src/components/Notification/Notification.test.tsx"],"sourcesContent":["import '@testing-library/jest-dom';\nimport { render, screen } from '@testing-library/react';\n\nimport { Notification } from './Notification';\n\ndescribe('Notification', () => {\n  it('renders title and subtitle', () => {\n    render(<Notification level=\"information\" title=\"Info title\" subtitle=\"Info subtitle\" />);\n    expect(screen.getByText('Info title')).toBeInTheDocument();\n    expect(screen.getByText('Info subtitle')).toBeInTheDocument();\n  });\n\n  it('renders bar variant', () => {\n    render(<Notification level=\"danger\" variant=\"bar\" title=\"Danger title\" />);\n    expect(screen.getByText('Danger title')).toBeInTheDocument();\n  });\n});\n"],"names":["render","jsx","Notification","screen"],"mappings":";;;;AAKA,SAAS,gBAAgB,MAAM;AAC7B,KAAG,8BAA8B,MAAM;AAC9B,IAAAA,EAAA,gBAAAC,EAACC,KAAa,OAAM,eAAc,OAAM,cAAa,UAAS,iBAAgB,CAAE,GACvF,OAAOC,EAAO,UAAU,YAAY,CAAC,EAAE,kBAAkB,GACzD,OAAOA,EAAO,UAAU,eAAe,CAAC,EAAE,kBAAkB;AAAA,EAAA,CAC7D,GAED,GAAG,uBAAuB,MAAM;AACvB,IAAAH,EAAA,gBAAAC,EAACC,KAAa,OAAM,UAAS,SAAQ,OAAM,OAAM,gBAAe,CAAE,GACzE,OAAOC,EAAO,UAAU,cAAc,CAAC,EAAE,kBAAkB;AAAA,EAAA,CAC5D;AACH,CAAC;"}
+{"version":3,"file":"Notification.test.js","sources":["../../../src/components/Notification/Notification.test.tsx"],"sourcesContent":["import '@testing-library/jest-dom';\nimport { render, screen } from '@testing-library/react';\n\nimport { Notification } from './Notification';\n\ndescribe('Notification', () => {\n  it('renders title and subtitle', () => {\n    render(<Notification level=\"information\" title=\"Info title\" subtitle=\"Info subtitle\" />);\n    expect(screen.getByText('Info title')).toBeInTheDocument();\n    expect(screen.getByText('Info subtitle')).toBeInTheDocument();\n  });\n\n  it('renders bar variant', () => {\n    render(<Notification level=\"danger\" variant=\"bar\" title=\"Danger title\" />);\n    expect(screen.getByText('Danger title')).toBeInTheDocument();\n  });\n});\n"],"names":["render","jsx","Notification","screen"],"mappings":";;;;AAKA,SAAS,gBAAgB,MAAM;AAC7B,KAAG,8BAA8B,MAAM;AACrC,IAAAA,EAAO,gBAAAC,EAACC,KAAa,OAAM,eAAc,OAAM,cAAa,UAAS,iBAAgB,CAAE,GACvF,OAAOC,EAAO,UAAU,YAAY,CAAC,EAAE,kBAAA,GACvC,OAAOA,EAAO,UAAU,eAAe,CAAC,EAAE,kBAAA;AAAA,EAAkB,CAC7D,GAED,GAAG,uBAAuB,MAAM;AAC9B,IAAAH,EAAO,gBAAAC,EAACC,KAAa,OAAM,UAAS,SAAQ,OAAM,OAAM,gBAAe,CAAE,GACzE,OAAOC,EAAO,UAAU,cAAc,CAAC,EAAE,kBAAA;AAAA,EAAkB,CAC5D;AACH,CAAC;"}

package/dist/components/OverlayCloseButton/OverlayCloseButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayCloseButton.js","sources":["../../../src/components/OverlayCloseButton/OverlayCloseButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport type { ButtonHTMLAttributes } from 'react';\n\nimport styles from './OverlayCloseButton.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface OverlayCloseButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {\n  /** The `aria-label` value of the button. */\n  'aria-label': string; // mandatory\n  /** `true` to add padding around the button; otherwise, `false`. The default is `false`. */\n  paddedModal?: boolean;\n}\n\n/** Represents a component to render a close button in the top right corner of a container. */\nexport const OverlayCloseButton = forwardRef<HTMLButtonElement, OverlayCloseButtonProps>(\n  ({ paddedModal, ...restProps }, forwardedRef) => (\n    <button\n      {...restProps}\n      type=\"button\"\n      ref={forwardedRef}\n      className={clsx(styles['overlay-close-button'], {\n        [styles['overlay-close-button--padded']]: paddedModal,\n      })}\n    >\n      <Icon name=\"Cross\" size={24} />\n    </button>\n  )\n);\n"],"names":["OverlayCloseButton","forwardRef","paddedModal","restProps","forwardedRef","jsx","clsx","styles","Icon"],"mappings":";;;;;;;GAiBaA,IAAqBC;AAAA,EAChC,CAAC,EAAE,aAAAC,GAAa,GAAGC,KAAaC,MAC9B,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,MAAK;AAAA,MACL,KAAKC;AAAA,MACL,WAAWE,EAAKC,EAAO,sBAAsB,GAAG;AAAA,QAC9C,CAACA,EAAO,8BAA8B,CAAC,GAAGL;AAAA,MAAA,CAC3C;AAAA,MAED,UAAC,gBAAAG,EAAAG,GAAA,EAAK,MAAK,SAAQ,MAAM,GAAI,CAAA;AAAA,IAAA;AAAA,EAAA;AAGnC;"}
+{"version":3,"file":"OverlayCloseButton.js","sources":["../../../src/components/OverlayCloseButton/OverlayCloseButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport type { ButtonHTMLAttributes } from 'react';\n\nimport styles from './OverlayCloseButton.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface OverlayCloseButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {\n  /** The `aria-label` value of the button. */\n  'aria-label': string; // mandatory\n  /** `true` to add padding around the button; otherwise, `false`. The default is `false`. */\n  paddedModal?: boolean;\n}\n\n/** Represents a component to render a close button in the top right corner of a container. */\nexport const OverlayCloseButton = forwardRef<HTMLButtonElement, OverlayCloseButtonProps>(\n  ({ paddedModal, ...restProps }, forwardedRef) => (\n    <button\n      {...restProps}\n      type=\"button\"\n      ref={forwardedRef}\n      className={clsx(styles['overlay-close-button'], {\n        [styles['overlay-close-button--padded']]: paddedModal,\n      })}\n    >\n      <Icon name=\"Cross\" size={24} />\n    </button>\n  )\n);\n"],"names":["OverlayCloseButton","forwardRef","paddedModal","restProps","forwardedRef","jsx","clsx","styles","Icon"],"mappings":";;;;;;;GAiBaA,IAAqBC;AAAA,EAChC,CAAC,EAAE,aAAAC,GAAa,GAAGC,EAAA,GAAaC,MAC9B,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,MAAK;AAAA,MACL,KAAKC;AAAA,MACL,WAAWE,EAAKC,EAAO,sBAAsB,GAAG;AAAA,QAC9C,CAACA,EAAO,8BAA8B,CAAC,GAAGL;AAAA,MAAA,CAC3C;AAAA,MAED,UAAA,gBAAAG,EAACG,GAAA,EAAK,MAAK,SAAQ,MAAM,GAAA,CAAI;AAAA,IAAA;AAAA,EAAA;AAGnC;"}

package/dist/components/OverlayCloseButton/OverlayCloseButton.stories.d.ts

@@ -2,4 +2,4 @@ import { Meta } from '@storybook/react';
 import { OverlayCloseButtonProps } from './OverlayCloseButton';
 declare const _default: Meta<OverlayCloseButtonProps>;
 export default _default;
-export declare const OverlayCloseButtonExample: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, OverlayCloseButtonProps>;
+export declare const OverlayCloseButtonExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, OverlayCloseButtonProps>;

package/dist/components/OverlayCloseButton/OverlayCloseButton.stories.js

@@ -1,8 +1,8 @@
 import { jsx as e } from "react/jsx-runtime";
-import { fn as a } from "../../index-Dwqes6RH.js";
+import { W as a } from "../../index-Di9WPZUe.js";
 import { OverlayCloseButton as o } from "./OverlayCloseButton.js";
 import { Container as l } from "../../storyComponents/Container/Container.js";
-const n = "<OverlayCloseButton aria-label={aria-label} onClick={onClickFunction} />", c = {
+const r = "<OverlayCloseButton aria-label={aria-label} onClick={onClickFunction} />", c = {
   title: "Atoms/OverlayCloseButton",
   component: o,
   argTypes: {
@@ -15,9 +15,9 @@ const n = "<OverlayCloseButton aria-label={aria-label} onClick={onClickFunction}
   },
   parameters: {
     inspectComponent: o,
-    codeString: n
+    codeString: r
   }
-}, r = (t) => /* @__PURE__ */ e(l, { size: "small", padded: !1, children: /* @__PURE__ */ e(o, { ...t }) }), s = r.bind({});
+}, n = (t) => /* @__PURE__ */ e(l, { size: "small", padded: !1, children: /* @__PURE__ */ e(o, { ...t }) }), s = n.bind({});
 s.args = {
   paddedModal: !1,
   "aria-label": "Close",

package/dist/components/OverlayCloseButton/OverlayCloseButton.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayCloseButton.stories.js","sources":["../../../src/components/OverlayCloseButton/OverlayCloseButton.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { OverlayCloseButtonProps } from './OverlayCloseButton';\n\nimport { OverlayCloseButton } from './OverlayCloseButton';\n\nimport { Container } from 'storyComponents/Container/';\n\nconst codeString = '<OverlayCloseButton aria-label={aria-label} onClick={onClickFunction} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/OverlayCloseButton',\n  component: OverlayCloseButton,\n  argTypes: {\n    paddedModal: {\n      control: 'boolean',\n    },\n    'aria-label': {\n      control: 'text',\n    },\n  },\n  parameters: {\n    inspectComponent: OverlayCloseButton,\n    codeString: codeString,\n  },\n} as Meta<OverlayCloseButtonProps>;\n\nconst Template: StoryFn<OverlayCloseButtonProps> = (args) => {\n  return (\n    <Container size=\"small\" padded={false}>\n      <OverlayCloseButton {...args} />\n    </Container>\n  );\n};\n\nexport const OverlayCloseButtonExample = Template.bind({});\nOverlayCloseButtonExample.args = {\n  paddedModal: false,\n  'aria-label': 'Close',\n  onClick: fn(),\n};\n"],"names":["codeString","OverlayCloseButton_stories","OverlayCloseButton","Template","args","jsx","Container","OverlayCloseButtonExample","fn"],"mappings":";;;;AASA,MAAMA,IAAa,4EAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,aAAa;AAAA,MACX,SAAS;AAAA,IACX;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAA6C,CAACC,MAEhD,gBAAAC,EAACC,GAAU,EAAA,MAAK,SAAQ,QAAQ,IAC9B,UAAC,gBAAAD,EAAAH,GAAA,EAAoB,GAAGE,EAAA,CAAM,EAChC,CAAA,GAISG,IAA4BJ,EAAS,KAAK,CAAE,CAAA;AACzDI,EAA0B,OAAO;AAAA,EAC/B,aAAa;AAAA,EACb,cAAc;AAAA,EACd,SAASC,EAAG;AACd;"}
+{"version":3,"file":"OverlayCloseButton.stories.js","sources":["../../../src/components/OverlayCloseButton/OverlayCloseButton.stories.tsx"],"sourcesContent":["import { fn } from 'storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { OverlayCloseButtonProps } from './OverlayCloseButton';\n\nimport { OverlayCloseButton } from './OverlayCloseButton';\n\nimport { Container } from 'storyComponents/Container/';\n\nconst codeString = '<OverlayCloseButton aria-label={aria-label} onClick={onClickFunction} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/OverlayCloseButton',\n  component: OverlayCloseButton,\n  argTypes: {\n    paddedModal: {\n      control: 'boolean',\n    },\n    'aria-label': {\n      control: 'text',\n    },\n  },\n  parameters: {\n    inspectComponent: OverlayCloseButton,\n    codeString: codeString,\n  },\n} as Meta<OverlayCloseButtonProps>;\n\nconst Template: StoryFn<OverlayCloseButtonProps> = (args) => {\n  return (\n    <Container size=\"small\" padded={false}>\n      <OverlayCloseButton {...args} />\n    </Container>\n  );\n};\n\nexport const OverlayCloseButtonExample = Template.bind({});\nOverlayCloseButtonExample.args = {\n  paddedModal: false,\n  'aria-label': 'Close',\n  onClick: fn(),\n};\n"],"names":["codeString","OverlayCloseButton_stories","OverlayCloseButton","Template","args","jsx","Container","OverlayCloseButtonExample","fn"],"mappings":";;;;AASA,MAAMA,IAAa,4EAGnBC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,aAAa;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,IAEX,cAAc;AAAA,MACZ,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAA6C,CAACC,MAEhD,gBAAAC,EAACC,GAAA,EAAU,MAAK,SAAQ,QAAQ,IAC9B,UAAA,gBAAAD,EAACH,GAAA,EAAoB,GAAGE,EAAA,CAAM,EAAA,CAChC,GAISG,IAA4BJ,EAAS,KAAK,CAAA,CAAE;AACzDI,EAA0B,OAAO;AAAA,EAC/B,aAAa;AAAA,EACb,cAAc;AAAA,EACd,SAASC,EAAA;AACX;"}

package/dist/components/OverlayStepBar/OverlayStepBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayStepBar.js","sources":["../../../src/components/OverlayStepBar/OverlayStepBar.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nimport styles from './OverlayStepBar.module.css';\n\nexport interface OverlayStepBarProps {\n  /** Array of strings. */\n  stepLabels: string[];\n  /** activeStep number starting with 1. */\n  activeStep: number;\n  /** Array of prefix numbers to not show in the steplabels */\n  disabledCountPrefix?: number[];\n  /** navigate to step. */\n  onStepClick?: (step: number) => void;\n}\n\nexport const OverlayStepBar = ({\n  stepLabels,\n  activeStep = 0,\n  disabledCountPrefix = [],\n  onStepClick,\n}: OverlayStepBarProps) => {\n  if (activeStep > stepLabels.length) {\n    console.error('activeStep is greater than the number of steps');\n  }\n\n  const getStepDisplayNumber = (stepIndex: number): string => {\n    const stepNumber = stepIndex + 1;\n\n    if (disabledCountPrefix.includes(stepNumber)) {\n      return '';\n    }\n\n    const enabledStepsBefore = Array.from({ length: stepIndex }, (_, count) => count + 1).filter(\n      (step) => !disabledCountPrefix.includes(step)\n    ).length;\n\n    return String(enabledStepsBefore + 1);\n  };\n\n  return (\n    <div className={styles['overlay-step-bar__container']}>\n      {stepLabels.length &&\n        stepLabels.map((label, index) => (\n          <span key={`${index}_${label}`} className={styles[`overlay-step-bar__step-wrapper`]}>\n            <button\n              className={clsx(styles[`overlay-step-bar__step`], [\n                index === activeStep - 1 && styles[`overlay-step-bar__step--active`],\n              ])}\n              {...(onStepClick && { onClick: () => onStepClick(index + 1) })}\n              type=\"button\"\n              aria-label={`Step ${index + 1}`}\n              aria-current={index === activeStep - 1 ? 'step' : undefined}\n              disabled={index === activeStep - 1}\n            >\n              <span className={styles[`overlay-step-bar__step--index`]}>{getStepDisplayNumber(index)}</span>\n              <span\n                className={clsx(\n                  styles[`overlay-step-bar__step--label`],\n                  disabledCountPrefix.includes(index + 1) && styles[`overlay-step-bar__step--label-show`]\n                )}\n              >\n                {label}\n              </span>\n            </button>\n          </span>\n        ))}\n    </div>\n  );\n};\n"],"names":["OverlayStepBar","stepLabels","activeStep","disabledCountPrefix","onStepClick","getStepDisplayNumber","stepIndex","stepNumber","enabledStepsBefore","_","count","step","styles","label","index","jsx","jsxs","clsx"],"mappings":";;;;;;;;;;GAeaA,IAAiB,CAAC;AAAA,EAC7B,YAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,qBAAAC,IAAsB,CAAC;AAAA,EACvB,aAAAC;AACF,MAA2B;AACrB,EAAAF,IAAaD,EAAW,UAC1B,QAAQ,MAAM,gDAAgD;AAG1D,QAAAI,IAAuB,CAACC,MAA8B;AAC1D,UAAMC,IAAaD,IAAY;AAE3B,QAAAH,EAAoB,SAASI,CAAU;AAClC,aAAA;AAGT,UAAMC,IAAqB,MAAM,KAAK,EAAE,QAAQF,KAAa,CAACG,GAAGC,MAAUA,IAAQ,CAAC,EAAE;AAAA,MACpF,CAACC,MAAS,CAACR,EAAoB,SAASQ,CAAI;AAAA,IAAA,EAC5C;AAEK,WAAA,OAAOH,IAAqB,CAAC;AAAA,EACtC;AAEA,2BACG,OAAI,EAAA,WAAWI,EAAO,6BAA6B,GACjD,YAAW,UACVX,EAAW,IAAI,CAACY,GAAOC,MACrB,gBAAAC,EAAC,UAA+B,WAAWH,EAAO,gCAAgC,GAChF,UAAA,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKL,EAAO,wBAAwB,GAAG;AAAA,QAChDE,MAAUZ,IAAa,KAAKU,EAAO,gCAAgC;AAAA,MAAA,CACpE;AAAA,MACA,GAAIR,KAAe,EAAE,SAAS,MAAMA,EAAYU,IAAQ,CAAC,EAAE;AAAA,MAC5D,MAAK;AAAA,MACL,cAAY,QAAQA,IAAQ,CAAC;AAAA,MAC7B,gBAAcA,MAAUZ,IAAa,IAAI,SAAS;AAAA,MAClD,UAAUY,MAAUZ,IAAa;AAAA,MAEjC,UAAA;AAAA,QAAA,gBAAAa,EAAC,UAAK,WAAWH,EAAO,+BAA+B,GAAI,UAAAP,EAAqBS,CAAK,EAAE,CAAA;AAAA,QACvF,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWE;AAAA,cACTL,EAAO,+BAA+B;AAAA,cACtCT,EAAoB,SAASW,IAAQ,CAAC,KAAKF,EAAO,oCAAoC;AAAA,YACxF;AAAA,YAEC,UAAAC;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA,KAnBO,GAAGC,CAAK,IAAID,CAAK,EAqB5B,CACD,GACL;AAEJ;"}
+{"version":3,"file":"OverlayStepBar.js","sources":["../../../src/components/OverlayStepBar/OverlayStepBar.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport styles from './OverlayStepBar.module.css';\n\nexport interface OverlayStepBarProps {\n  /** Array of strings. */\n  stepLabels: string[];\n  /** activeStep number starting with 1. */\n  activeStep: number;\n  /** Array of prefix numbers to not show in the steplabels */\n  disabledCountPrefix?: number[];\n  /** navigate to step. */\n  onStepClick?: (step: number) => void;\n}\n\nexport const OverlayStepBar = ({\n  stepLabels,\n  activeStep = 0,\n  disabledCountPrefix = [],\n  onStepClick,\n}: OverlayStepBarProps) => {\n  if (activeStep > stepLabels.length) {\n    console.error('activeStep is greater than the number of steps');\n  }\n\n  const getStepDisplayNumber = (stepIndex: number): string => {\n    const stepNumber = stepIndex + 1;\n\n    if (disabledCountPrefix.includes(stepNumber)) {\n      return '';\n    }\n\n    const enabledStepsBefore = Array.from({ length: stepIndex }, (_, count) => count + 1).filter(\n      (step) => !disabledCountPrefix.includes(step)\n    ).length;\n\n    return String(enabledStepsBefore + 1);\n  };\n\n  return (\n    <div className={styles['overlay-step-bar__container']}>\n      {stepLabels.length &&\n        stepLabels.map((label, index) => (\n          <span key={`${index}_${label}`} className={styles[`overlay-step-bar__step-wrapper`]}>\n            <button\n              className={clsx(styles[`overlay-step-bar__step`], [\n                index === activeStep - 1 && styles[`overlay-step-bar__step--active`],\n              ])}\n              {...(onStepClick && { onClick: () => onStepClick(index + 1) })}\n              type=\"button\"\n              aria-label={`Step ${index + 1}`}\n              aria-current={index === activeStep - 1 ? 'step' : undefined}\n              disabled={index === activeStep - 1}\n            >\n              <span className={styles[`overlay-step-bar__step--index`]}>{getStepDisplayNumber(index)}</span>\n              <span\n                className={clsx(\n                  styles[`overlay-step-bar__step--label`],\n                  disabledCountPrefix.includes(index + 1) && styles[`overlay-step-bar__step--label-show`]\n                )}\n              >\n                {label}\n              </span>\n            </button>\n          </span>\n        ))}\n    </div>\n  );\n};\n"],"names":["OverlayStepBar","stepLabels","activeStep","disabledCountPrefix","onStepClick","getStepDisplayNumber","stepIndex","stepNumber","enabledStepsBefore","_","count","step","styles","label","index","jsx","jsxs","clsx"],"mappings":";;;;;;;;;;GAeaA,IAAiB,CAAC;AAAA,EAC7B,YAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,qBAAAC,IAAsB,CAAA;AAAA,EACtB,aAAAC;AACF,MAA2B;AACzB,EAAIF,IAAaD,EAAW,UAC1B,QAAQ,MAAM,gDAAgD;AAGhE,QAAMI,IAAuB,CAACC,MAA8B;AAC1D,UAAMC,IAAaD,IAAY;AAE/B,QAAIH,EAAoB,SAASI,CAAU;AACzC,aAAO;AAGT,UAAMC,IAAqB,MAAM,KAAK,EAAE,QAAQF,KAAa,CAACG,GAAGC,MAAUA,IAAQ,CAAC,EAAE;AAAA,MACpF,CAACC,MAAS,CAACR,EAAoB,SAASQ,CAAI;AAAA,IAAA,EAC5C;AAEF,WAAO,OAAOH,IAAqB,CAAC;AAAA,EAAA;AAGtC,2BACG,OAAA,EAAI,WAAWI,EAAO,6BAA6B,GACjD,YAAW,UACVX,EAAW,IAAI,CAACY,GAAOC,MACrB,gBAAAC,EAAC,UAA+B,WAAWH,EAAO,gCAAgC,GAChF,UAAA,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKL,EAAO,wBAAwB,GAAG;AAAA,QAChDE,MAAUZ,IAAa,KAAKU,EAAO,gCAAgC;AAAA,MAAA,CACpE;AAAA,MACA,GAAIR,KAAe,EAAE,SAAS,MAAMA,EAAYU,IAAQ,CAAC,EAAA;AAAA,MAC1D,MAAK;AAAA,MACL,cAAY,QAAQA,IAAQ,CAAC;AAAA,MAC7B,gBAAcA,MAAUZ,IAAa,IAAI,SAAS;AAAA,MAClD,UAAUY,MAAUZ,IAAa;AAAA,MAEjC,UAAA;AAAA,QAAA,gBAAAa,EAAC,UAAK,WAAWH,EAAO,+BAA+B,GAAI,UAAAP,EAAqBS,CAAK,EAAA,CAAE;AAAA,QACvF,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWE;AAAA,cACTL,EAAO,+BAA+B;AAAA,cACtCT,EAAoB,SAASW,IAAQ,CAAC,KAAKF,EAAO,oCAAoC;AAAA,YAAA;AAAA,YAGvF,UAAAC;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA,KAnBO,GAAGC,CAAK,IAAID,CAAK,EAqB5B,CACD,GACL;AAEJ;"}

package/dist/components/OverlayStepBar/OverlayStepBar.stories.d.ts

@@ -2,5 +2,5 @@ import { Meta } from '@storybook/react';
 import { OverlayStepBarProps } from './OverlayStepBar';
 declare const _default: Meta<OverlayStepBarProps>;
 export default _default;
-export declare const OverlayStepBarExample: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, OverlayStepBarProps>;
-export declare const OverlayStepBarHidePrifix: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, OverlayStepBarProps>;
+export declare const OverlayStepBarExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, OverlayStepBarProps>;
+export declare const OverlayStepBarHidePrifix: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, OverlayStepBarProps>;

package/dist/components/OverlayStepBar/OverlayStepBar.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayStepBar.stories.js","sources":["../../../src/components/OverlayStepBar/OverlayStepBar.stories.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { OverlayStepBarProps } from './OverlayStepBar';\n\nimport { OverlayStepBar } from './OverlayStepBar';\n\nconst codeString =\n  '<OverlayStepBar stepLabels={[string]} activeStep={number} disabledCountPrefix={[numbers]} onStepClick={(step) => void}/>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Molecules/OverlayStepBar',\n  component: OverlayStepBar,\n  argTypes: {\n    activeStep: { control: 'number' },\n    stepLabels: { control: 'object' },\n    disabledCountPrefix: {\n      table: {\n        disable: true,\n      },\n    },\n    onStepClick: { action: 'stepClicked' },\n  },\n  parameters: {\n    inspectComponent: OverlayStepBar,\n    codeString: codeString,\n  },\n} as Meta<OverlayStepBarProps>;\n\nconst Template: StoryFn<OverlayStepBarProps> = (args) => {\n  const [activeStep, setActiveStep] = useState(args.activeStep || 1);\n\n  return (\n    <OverlayStepBar\n      {...args}\n      activeStep={activeStep}\n      onStepClick={(step) => {\n        setActiveStep(step);\n        args.onStepClick?.(step);\n      }}\n    />\n  );\n};\n\nconst defaultArgs: Partial<OverlayStepBarProps> = {\n  stepLabels: ['Basic Details', 'Lecturers', 'Period Planning', 'Assessment', 'Miscellaneous', 'Overview'],\n};\n\nexport const OverlayStepBarExample = Template.bind({});\nOverlayStepBarExample.args = {\n  ...defaultArgs,\n  activeStep: 2,\n};\n\nexport const OverlayStepBarHidePrifix = Template.bind({});\nOverlayStepBarHidePrifix.args = {\n  ...defaultArgs,\n  // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n  disabledCountPrefix: [1, 6],\n  activeStep: 2,\n};\n"],"names":["codeString","OverlayStepBar_stories","OverlayStepBar","Template","args","activeStep","setActiveStep","useState","jsx","step","_a","defaultArgs","OverlayStepBarExample","OverlayStepBarHidePrifix"],"mappings":";;;AAOA,MAAMA,IACJ,4HAGaC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,YAAY,EAAE,SAAS,SAAS;AAAA,IAChC,YAAY,EAAE,SAAS,SAAS;AAAA,IAChC,qBAAqB;AAAA,MACnB,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IAEb;AAAA,IACA,aAAa,EAAE,QAAQ,cAAc;AAAA,EACvC;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAyC,CAACC,MAAS;AACvD,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAASH,EAAK,cAAc,CAAC;AAG/D,SAAA,gBAAAI;AAAA,IAACN;AAAA,IAAA;AAAA,MACE,GAAGE;AAAA,MACJ,YAAAC;AAAA,MACA,aAAa,CAACI,MAAS;;AACrB,QAAAH,EAAcG,CAAI,IAClBC,IAAAN,EAAK,gBAAL,QAAAM,EAAA,KAAAN,GAAmBK;AAAA,MAAI;AAAA,IACzB;AAAA,EACF;AAEJ,GAEME,IAA4C;AAAA,EAChD,YAAY,CAAC,iBAAiB,aAAa,mBAAmB,cAAc,iBAAiB,UAAU;AACzG,GAEaC,IAAwBT,EAAS,KAAK,CAAE,CAAA;AACrDS,EAAsB,OAAO;AAAA,EAC3B,GAAGD;AAAA,EACH,YAAY;AACd;AAEO,MAAME,IAA2BV,EAAS,KAAK,CAAE,CAAA;AACxDU,EAAyB,OAAO;AAAA,EAC9B,GAAGF;AAAA;AAAA,EAEH,qBAAqB,CAAC,GAAG,CAAC;AAAA,EAC1B,YAAY;AACd;"}
+{"version":3,"file":"OverlayStepBar.stories.js","sources":["../../../src/components/OverlayStepBar/OverlayStepBar.stories.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { OverlayStepBarProps } from './OverlayStepBar';\n\nimport { OverlayStepBar } from './OverlayStepBar';\n\nconst codeString =\n  '<OverlayStepBar stepLabels={[string]} activeStep={number} disabledCountPrefix={[numbers]} onStepClick={(step) => void}/>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Molecules/OverlayStepBar',\n  component: OverlayStepBar,\n  argTypes: {\n    activeStep: { control: 'number' },\n    stepLabels: { control: 'object' },\n    disabledCountPrefix: {\n      table: {\n        disable: true,\n      },\n    },\n    onStepClick: { action: 'stepClicked' },\n  },\n  parameters: {\n    inspectComponent: OverlayStepBar,\n    codeString: codeString,\n  },\n} as Meta<OverlayStepBarProps>;\n\nconst Template: StoryFn<OverlayStepBarProps> = (args) => {\n  const [activeStep, setActiveStep] = useState(args.activeStep || 1);\n\n  return (\n    <OverlayStepBar\n      {...args}\n      activeStep={activeStep}\n      onStepClick={(step) => {\n        setActiveStep(step);\n        args.onStepClick?.(step);\n      }}\n    />\n  );\n};\n\nconst defaultArgs: Partial<OverlayStepBarProps> = {\n  stepLabels: ['Basic Details', 'Lecturers', 'Period Planning', 'Assessment', 'Miscellaneous', 'Overview'],\n};\n\nexport const OverlayStepBarExample = Template.bind({});\nOverlayStepBarExample.args = {\n  ...defaultArgs,\n  activeStep: 2,\n};\n\nexport const OverlayStepBarHidePrifix = Template.bind({});\nOverlayStepBarHidePrifix.args = {\n  ...defaultArgs,\n  // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n  disabledCountPrefix: [1, 6],\n  activeStep: 2,\n};\n"],"names":["codeString","OverlayStepBar_stories","OverlayStepBar","Template","args","activeStep","setActiveStep","useState","jsx","step","_a","defaultArgs","OverlayStepBarExample","OverlayStepBarHidePrifix"],"mappings":";;;AAOA,MAAMA,IACJ,4HAGFC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,YAAY,EAAE,SAAS,SAAA;AAAA,IACvB,YAAY,EAAE,SAAS,SAAA;AAAA,IACvB,qBAAqB;AAAA,MACnB,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,aAAa,EAAE,QAAQ,cAAA;AAAA,EAAc;AAAA,EAEvC,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAyC,CAACC,MAAS;AACvD,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAASH,EAAK,cAAc,CAAC;AAEjE,SACE,gBAAAI;AAAA,IAACN;AAAA,IAAA;AAAA,MACE,GAAGE;AAAA,MACJ,YAAAC;AAAA,MACA,aAAa,CAACI,MAAS;;AACrB,QAAAH,EAAcG,CAAI,IAClBC,IAAAN,EAAK,gBAAL,QAAAM,EAAA,KAAAN,GAAmBK;AAAA,MAAI;AAAA,IACzB;AAAA,EAAA;AAGN,GAEME,IAA4C;AAAA,EAChD,YAAY,CAAC,iBAAiB,aAAa,mBAAmB,cAAc,iBAAiB,UAAU;AACzG,GAEaC,IAAwBT,EAAS,KAAK,CAAA,CAAE;AACrDS,EAAsB,OAAO;AAAA,EAC3B,GAAGD;AAAA,EACH,YAAY;AACd;AAEO,MAAME,IAA2BV,EAAS,KAAK,CAAA,CAAE;AACxDU,EAAyB,OAAO;AAAA,EAC9B,GAAGF;AAAA;AAAA,EAEH,qBAAqB,CAAC,GAAG,CAAC;AAAA,EAC1B,YAAY;AACd;"}