@uva-glass/component-library 1.31.1 → 1.32.1

package/dist/MultiSelect-CFOkF66G.js

@@ -0,0 +1,46 @@
+import { jsxs as s, jsx as l, Fragment as a } from "react/jsx-runtime";
+import { c as m } from "./clsx-DB4S2d7J.js";
+import { s as t, M as u } from "./MultiSelectItem-D5q99kfp.js";
+import { Label as n } from "./components/Label/Label.js";
+import "react";
+import { Button as p } from "./components/Button/Button.js";
+import "./components/OverlayCloseButton/OverlayCloseButton.js";
+import "./components/IconButton/IconButton.js";
+import "./components/Input/Input.js";
+import "./components/InputField/InputField.js";
+import "./components/SelectListbox/SelectListbox.js";
+import "./components/SelectListbox/SelectProvider.js";
+function d({ label: i, clearTrigger: e, onClear: r }) {
+  return /* @__PURE__ */ s("header", { className: t["multi-select__header"], children: [
+    /* @__PURE__ */ l(n, { htmlFor: "multi-select-list", children: i }),
+    e && /* @__PURE__ */ l(p, { variant: "blank", onClick: r, children: e })
+  ] });
+}
+const o = ({ scrollable: i = !0, noBorder: e, header: r, children: c }) => /* @__PURE__ */ s(a, { children: [
+  r,
+  /* @__PURE__ */ l(
+    "div",
+    {
+      className: m(t["multi-select"], {
+        [t["multi-select--no-border"]]: e
+      }),
+      children: /* @__PURE__ */ l(
+        "ul",
+        {
+          className: m(t["multi-select__list"], {
+            [t["multi-select__list--scrollable"]]: i
+          }),
+          id: "multi-select-list",
+          children: c
+        }
+      )
+    }
+  )
+] });
+o.MultiSelectHeader = d;
+o.MultiSelectItem = u;
+export {
+  o as M,
+  d as a
+};
+//# sourceMappingURL=MultiSelect-CFOkF66G.js.map

package/dist/MultiSelect-CFOkF66G.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect-CFOkF66G.js","sources":["../src/components/MultiSelect/components/MultiSelectHeader.tsx","../src/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import styles from 'components/MultiSelect/MultiSelect.module.css';\nimport { Label } from 'components/Label';\nimport { Button } from 'components';\n\nexport interface MultiSelectHeaderProps {\n  label: string;\n  clearTrigger?: string;\n  onClear?: () => void;\n}\n\nexport function MultiSelectHeader({ label, clearTrigger, onClear }: MultiSelectHeaderProps) {\n  return (\n    <header className={styles['multi-select__header']}>\n      <Label htmlFor=\"multi-select-list\">{label}</Label>\n      {clearTrigger && (\n        <Button variant={'blank'} onClick={onClear}>\n          {clearTrigger}\n        </Button>\n      )}\n    </header>\n  );\n}\n","import clsx from 'clsx';\n\nimport type { PropsWithChildren, ReactNode } from 'react';\n\nimport styles from './MultiSelect.module.css';\n\nimport { MultiSelectItem } from 'components/MultiSelect/components/MultiSelectItem';\nimport { MultiSelectHeader } from 'components/MultiSelect/components/MultiSelectHeader';\nexport interface MultiSelectProps {\n  scrollable?: boolean;\n  noBorder?: boolean;\n  header?: ReactNode;\n}\n\nexport const MultiSelect = ({ scrollable = true, noBorder, header, children }: PropsWithChildren<MultiSelectProps>) => (\n  <>\n    {header}\n    <div\n      className={clsx(styles['multi-select'], {\n        [styles['multi-select--no-border']]: noBorder,\n      })}\n    >\n      <ul\n        className={clsx(styles['multi-select__list'], {\n          [styles['multi-select__list--scrollable']]: scrollable,\n        })}\n        id=\"multi-select-list\"\n      >\n        {children}\n      </ul>\n    </div>\n  </>\n);\n\nMultiSelect.MultiSelectHeader = MultiSelectHeader;\nMultiSelect.MultiSelectItem = MultiSelectItem;\n"],"names":["MultiSelectHeader","label","clearTrigger","onClear","jsxs","styles","jsx","Label","Button","MultiSelect","scrollable","noBorder","header","children","Fragment","clsx","MultiSelectItem"],"mappings":";;;;;;;;;;;;AAUO,SAASA,EAAkB,EAAE,OAAAC,GAAO,cAAAC,GAAc,SAAAC,KAAmC;AAC1F,SACG,gBAAAC,EAAA,UAAA,EAAO,WAAWC,EAAO,sBAAsB,GAC9C,UAAA;AAAA,IAAC,gBAAAC,EAAAC,GAAA,EAAM,SAAQ,qBAAqB,UAAMN,GAAA;AAAA,IACzCC,KACE,gBAAAI,EAAAE,GAAA,EAAO,SAAS,SAAS,SAASL,GAChC,UACHD,GAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;ACPa,MAAAO,IAAc,CAAC,EAAE,YAAAC,IAAa,IAAM,UAAAC,GAAU,QAAAC,GAAQ,UAAAC,QAE9D,gBAAAT,EAAAU,GAAA,EAAA,UAAA;AAAA,EAAAF;AAAA,EACD,gBAAAN;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWS,EAAKV,EAAO,cAAc,GAAG;AAAA,QACtC,CAACA,EAAO,yBAAyB,CAAC,GAAGM;AAAA,MAAA,CACtC;AAAA,MAED,UAAA,gBAAAL;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWS,EAAKV,EAAO,oBAAoB,GAAG;AAAA,YAC5C,CAACA,EAAO,gCAAgC,CAAC,GAAGK;AAAA,UAAA,CAC7C;AAAA,UACD,IAAG;AAAA,UAEF,UAAAG;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EACF;AAAA,GACF;AAGFJ,EAAY,oBAAoBT;AAChCS,EAAY,kBAAkBO;"}

package/dist/MultiSelectItem-D5q99kfp.js

@@ -0,0 +1,24 @@
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { useId as c } from "react";
+import { Checkbox as o } from "./components/Checkbox/Checkbox.js";
+import { Label as n } from "./components/Label/Label.js";
+import './assets/MultiSelectItem.css';const i = {
+  "multi-select": "_multi-select_mabi4_1",
+  "multi-select--no-border": "_multi-select--no-border_mabi4_7",
+  "multi-select__header": "_multi-select__header_mabi4_12",
+  "multi-select__list": "_multi-select__list_mabi4_18",
+  "multi-select__list--scrollable": "_multi-select__list--scrollable_mabi4_27",
+  "multi-select__item-inner": "_multi-select__item-inner_mabi4_32"
+};
+function h({ label: _, value: m, checked: t, onChange: s }) {
+  const l = c();
+  return /* @__PURE__ */ e("li", { className: i["multi-select__item"], children: /* @__PURE__ */ r("div", { className: i["multi-select__item-inner"], children: [
+    /* @__PURE__ */ e(o, { id: l, value: m, checked: t, onChange: s }),
+    /* @__PURE__ */ e(n, { htmlFor: l, noFontWeight: !t, children: _ })
+  ] }) });
+}
+export {
+  h as M,
+  i as s
+};
+//# sourceMappingURL=MultiSelectItem-D5q99kfp.js.map

package/dist/MultiSelectItem-D5q99kfp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectItem-D5q99kfp.js","sources":["../src/components/MultiSelect/components/MultiSelectItem.tsx"],"sourcesContent":["import { useId } from 'react';\n\nimport type { ChangeEvent } from 'react';\n\nimport styles from 'components/MultiSelect/MultiSelect.module.css';\nimport { Checkbox } from 'components/Checkbox';\nimport { Label } from 'components/Label';\n\nexport interface MultiSelectItemProps {\n  label: string;\n  value: string | number;\n  checked: boolean;\n  onChange(event: ChangeEvent<HTMLInputElement>): void;\n}\n\nexport function MultiSelectItem({ label, value, checked, onChange }: MultiSelectItemProps) {\n  const id = useId();\n\n  return (\n    <li className={styles['multi-select__item']}>\n      <div className={styles['multi-select__item-inner']}>\n        <Checkbox id={id} value={value} checked={checked} onChange={onChange} />\n        <Label htmlFor={id} noFontWeight={!checked}>\n          {label}\n        </Label>\n      </div>\n    </li>\n  );\n}\n"],"names":["MultiSelectItem","label","value","checked","onChange","id","useId","jsx","styles","jsxs","Checkbox","Label"],"mappings":";;;;;;;;;;;;AAeO,SAASA,EAAgB,EAAE,OAAAC,GAAO,OAAAC,GAAO,SAAAC,GAAS,UAAAC,KAAkC;AACzF,QAAMC,IAAKC;AAGT,SAAA,gBAAAC,EAAC,MAAG,EAAA,WAAWC,EAAO,oBAAoB,GACxC,UAAA,gBAAAC,EAAC,OAAI,EAAA,WAAWD,EAAO,0BAA0B,GAC/C,UAAA;AAAA,IAAA,gBAAAD,EAACG,GAAS,EAAA,IAAAL,GAAQ,OAAAH,GAAc,SAAAC,GAAkB,UAAAC,GAAoB;AAAA,sBACrEO,GAAM,EAAA,SAASN,GAAI,cAAc,CAACF,GAChC,UACHF,GAAA;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ;"}

package/dist/assets/Label.css

@@ -1 +1 @@
-._label_18mqr_1{font-weight:var(--semibold);text-align:left}
+._label_1b4r9_1{font-weight:var(--semibold);text-align:left}._label--unset-font-weight_1b4r9_6{font-weight:unset}

package/dist/assets/MultiSelectItem.css

@@ -1 +1 @@
-._multi-select__item_2oogm_1{list-style:none}._multi-select__item_2oogm_1+._multi-select__item_2oogm_1{margin-top:.5rem}._multi-select__item-inner_2oogm_9{align-items:center;display:flex;gap:.75rem}
+._multi-select_mabi4_1{border:1px solid var(--color-black);border-radius:var(--border-radius-default);padding:.75rem}._multi-select--no-border_mabi4_7{border:none;padding:0}._multi-select__header_mabi4_12{display:flex;justify-content:space-between;margin-bottom:.5rem}._multi-select__list_mabi4_18{display:flex;flex-direction:column;gap:.5rem;list-style:none;margin:0;padding:0}._multi-select__list--scrollable_mabi4_27{max-height:8.75rem;overflow:auto}._multi-select__item-inner_mabi4_32{align-items:center;display:flex;gap:.75rem}

package/dist/components/InputField/InputField.d.ts

@@ -2,7 +2,7 @@ import { InputHTMLAttributes, ReactNode } from 'react';
 
 export interface InputFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'> {
     variant?: 'large';
-    type?: 'text' | 'search' | 'password' | 'email';
+    type?: 'text' | 'password' | 'email';
     id: string;
     clearTrigger?: ReactNode;
     onClear?: () => void;

package/dist/components/InputField/InputField.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputField.js","sources":["../../../src/components/InputField/InputField.tsx"],"sourcesContent":["import { forwardRef, useState, useEffect, useRef } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { InputHTMLAttributes, ReactNode } from 'react';\n\nimport styles from './InputField.module.css';\n\nexport interface InputFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'> {\n  variant?: 'large';\n  type?: 'text' | 'search' | 'password' | 'email';\n  id: string;\n  clearTrigger?: ReactNode;\n  onClear?: () => void;\n}\n\nexport const InputField = forwardRef<HTMLInputElement, InputFieldProps>(\n  (\n    { autoComplete = 'off', id, value, variant, type = 'text', clearTrigger, onClear, ...restProps }: InputFieldProps,\n    forwardedRef\n  ) => {\n    const [clearButtonWidth, setClearButtonWidth] = useState<number>(0);\n    const clearButtonRef = useRef<HTMLButtonElement>(null);\n\n    useEffect(() => {\n      if (clearButtonRef.current) {\n        setClearButtonWidth(clearButtonRef.current.offsetWidth);\n      }\n    }, [value]);\n\n    const handleClearTriggerClick = () => {\n      if (onClear && forwardedRef && 'current' in forwardedRef && forwardedRef.current) {\n        onClear();\n        forwardedRef.current.focus();\n      }\n    };\n\n    return (\n      <div className={styles['input-field-wrapper']}>\n        <input\n          {...restProps}\n          autoComplete={autoComplete}\n          ref={forwardedRef}\n          id={id}\n          className={clsx(styles['input-field'], {\n            [styles['input-field--large']]: variant === 'large',\n          })}\n          type={type}\n          value={value}\n          style={{ paddingRight: value && clearTrigger ? clearButtonWidth : undefined }}\n        />\n        {value && clearTrigger && (\n          <button\n            type=\"button\"\n            className={styles['input-field__clear-button']}\n            onClick={handleClearTriggerClick}\n            ref={clearButtonRef}\n            aria-label={`clear trigger for ${id}`}\n          >\n            {clearTrigger}\n          </button>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["InputField","forwardRef","autoComplete","id","value","variant","type","clearTrigger","onClear","restProps","forwardedRef","clearButtonWidth","setClearButtonWidth","useState","clearButtonRef","useRef","useEffect","handleClearTriggerClick","jsxs","styles","jsx","clsx"],"mappings":";;;;;;;;GAeaA,IAAaC;AAAA,EACxB,CACE,EAAE,cAAAC,IAAe,OAAO,IAAAC,GAAI,OAAAC,GAAO,SAAAC,GAAS,MAAAC,IAAO,QAAQ,cAAAC,GAAc,SAAAC,GAAS,GAAGC,EAAA,GACrFC,MACG;AACH,UAAM,CAACC,GAAkBC,CAAmB,IAAIC,EAAiB,CAAC,GAC5DC,IAAiBC,EAA0B,IAAI;AAErD,IAAAC,EAAU,MAAM;AACd,MAAIF,EAAe,WACGF,EAAAE,EAAe,QAAQ,WAAW;AAAA,IACxD,GACC,CAACV,CAAK,CAAC;AAEV,UAAMa,IAA0B,MAAM;AACpC,MAAIT,KAAWE,KAAgB,aAAaA,KAAgBA,EAAa,YAC/DF,KACRE,EAAa,QAAQ;IACvB;AAGF,WACG,gBAAAQ,EAAA,OAAA,EAAI,WAAWC,EAAO,qBAAqB,GAC1C,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAGX;AAAA,UACJ,cAAAP;AAAA,UACA,KAAKQ;AAAA,UACL,IAAAP;AAAA,UACA,WAAWkB,EAAKF,EAAO,aAAa,GAAG;AAAA,YACrC,CAACA,EAAO,oBAAoB,CAAC,GAAGd,MAAY;AAAA,UAAA,CAC7C;AAAA,UACD,MAAAC;AAAA,UACA,OAAAF;AAAA,UACA,OAAO,EAAE,cAAcA,KAASG,IAAeI,IAAmB,OAAU;AAAA,QAAA;AAAA,MAC9E;AAAA,MACCP,KAASG,KACR,gBAAAa;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAWD,EAAO,2BAA2B;AAAA,UAC7C,SAASF;AAAA,UACT,KAAKH;AAAA,UACL,cAAY,qBAAqBX,CAAE;AAAA,UAElC,UAAAI;AAAA,QAAA;AAAA,MACH;AAAA,IAEJ,EAAA,CAAA;AAAA,EAEJ;AACF;"}
+{"version":3,"file":"InputField.js","sources":["../../../src/components/InputField/InputField.tsx"],"sourcesContent":["import { forwardRef, useState, useEffect, useRef } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { InputHTMLAttributes, ReactNode } from 'react';\n\nimport styles from './InputField.module.css';\n\nexport interface InputFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'> {\n  variant?: 'large';\n  type?: 'text' | 'password' | 'email';\n  id: string;\n  clearTrigger?: ReactNode;\n  onClear?: () => void;\n}\n\nexport const InputField = forwardRef<HTMLInputElement, InputFieldProps>(\n  (\n    { autoComplete = 'off', id, value, variant, type = 'text', clearTrigger, onClear, ...restProps }: InputFieldProps,\n    forwardedRef\n  ) => {\n    const [clearButtonWidth, setClearButtonWidth] = useState<number>(0);\n    const clearButtonRef = useRef<HTMLButtonElement>(null);\n\n    useEffect(() => {\n      if (clearButtonRef.current) {\n        setClearButtonWidth(clearButtonRef.current.offsetWidth);\n      }\n    }, [value]);\n\n    const handleClearTriggerClick = () => {\n      if (onClear && forwardedRef && 'current' in forwardedRef && forwardedRef.current) {\n        onClear();\n        forwardedRef.current.focus();\n      }\n    };\n\n    return (\n      <div className={styles['input-field-wrapper']}>\n        <input\n          {...restProps}\n          autoComplete={autoComplete}\n          ref={forwardedRef}\n          id={id}\n          className={clsx(styles['input-field'], {\n            [styles['input-field--large']]: variant === 'large',\n          })}\n          type={type}\n          value={value}\n          style={{ paddingRight: value && clearTrigger ? clearButtonWidth : undefined }}\n        />\n        {value && clearTrigger && (\n          <button\n            type=\"button\"\n            className={styles['input-field__clear-button']}\n            onClick={handleClearTriggerClick}\n            ref={clearButtonRef}\n            aria-label={`clear trigger for ${id}`}\n          >\n            {clearTrigger}\n          </button>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["InputField","forwardRef","autoComplete","id","value","variant","type","clearTrigger","onClear","restProps","forwardedRef","clearButtonWidth","setClearButtonWidth","useState","clearButtonRef","useRef","useEffect","handleClearTriggerClick","jsxs","styles","jsx","clsx"],"mappings":";;;;;;;;GAeaA,IAAaC;AAAA,EACxB,CACE,EAAE,cAAAC,IAAe,OAAO,IAAAC,GAAI,OAAAC,GAAO,SAAAC,GAAS,MAAAC,IAAO,QAAQ,cAAAC,GAAc,SAAAC,GAAS,GAAGC,EAAA,GACrFC,MACG;AACH,UAAM,CAACC,GAAkBC,CAAmB,IAAIC,EAAiB,CAAC,GAC5DC,IAAiBC,EAA0B,IAAI;AAErD,IAAAC,EAAU,MAAM;AACd,MAAIF,EAAe,WACGF,EAAAE,EAAe,QAAQ,WAAW;AAAA,IACxD,GACC,CAACV,CAAK,CAAC;AAEV,UAAMa,IAA0B,MAAM;AACpC,MAAIT,KAAWE,KAAgB,aAAaA,KAAgBA,EAAa,YAC/DF,KACRE,EAAa,QAAQ;IACvB;AAGF,WACG,gBAAAQ,EAAA,OAAA,EAAI,WAAWC,EAAO,qBAAqB,GAC1C,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAGX;AAAA,UACJ,cAAAP;AAAA,UACA,KAAKQ;AAAA,UACL,IAAAP;AAAA,UACA,WAAWkB,EAAKF,EAAO,aAAa,GAAG;AAAA,YACrC,CAACA,EAAO,oBAAoB,CAAC,GAAGd,MAAY;AAAA,UAAA,CAC7C;AAAA,UACD,MAAAC;AAAA,UACA,OAAAF;AAAA,UACA,OAAO,EAAE,cAAcA,KAASG,IAAeI,IAAmB,OAAU;AAAA,QAAA;AAAA,MAC9E;AAAA,MACCP,KAASG,KACR,gBAAAa;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAWD,EAAO,2BAA2B;AAAA,UAC7C,SAASF;AAAA,UACT,KAAKH;AAAA,UACL,cAAY,qBAAqBX,CAAE;AAAA,UAElC,UAAAI;AAAA,QAAA;AAAA,MACH;AAAA,IAEJ,EAAA,CAAA;AAAA,EAEJ;AACF;"}

package/dist/components/InputField/InputField.stories.js

@@ -8,12 +8,13 @@ import "../Button/Button.js";
 import "../OverlayCloseButton/OverlayCloseButton.js";
 import "../IconButton/IconButton.js";
 import "../Input/Input.js";
+import "../../MultiSelect-CFOkF66G.js";
 import "../SelectListbox/SelectListbox.js";
 import "../SelectListbox/SelectProvider.js";
-const h = (t) => {
+const C = (t) => {
   const r = t.variant ?? [];
   return { ...t, variant: r.toString() };
-}, w = {
+}, E = {
   title: "Atoms/InputField",
   component: l,
   argTypes: {
@@ -23,7 +24,7 @@ const h = (t) => {
     },
     type: {
       control: "radio",
-      options: ["text", "search", "password", "email"]
+      options: ["text", "password", "email"]
     },
     id: {
       control: "text"
@@ -43,7 +44,7 @@ const h = (t) => {
   return /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(
     l,
     {
-      ...h(t),
+      ...C(t),
       value: r,
       onChange: p,
       onClear: m,
@@ -54,8 +55,8 @@ const h = (t) => {
   type: "text",
   variant: void 0,
   id: "4f9ca77d"
-}, C = o.bind({});
-C.args = {
+}, h = o.bind({});
+h.args = {
   ...n
 };
 const v = o.bind({});
@@ -69,9 +70,9 @@ I.args = {
   clearTrigger: /* @__PURE__ */ e(f, { name: "Cross" })
 };
 export {
-  C as InputFieldExample,
+  h as InputFieldExample,
   I as WithIconClearTrigger,
   v as WithStringClearTrigger,
-  w as default
+  E as default
 };
 //# sourceMappingURL=InputField.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InputField.stories.js","sources":["../../../src/components/InputField/InputField.stories.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { fn } from '@storybook/test';\n\nimport type { ChangeEvent } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { InputFieldProps } from './InputField';\n\nimport { InputField } from './InputField';\n\nimport { Container } from 'components/storyComponents/Container';\nimport { Icon } from 'components';\n\nconst transformArgs = (args: InputFieldProps) => {\n  // args.variant is provided as an array because the control type is set to a checkbox. So this transforms the selected value into its proper value: a string\n  const variantArray = (args.variant as unknown as string[]) ?? [];\n  return { ...args, ...{ variant: variantArray.toString() } } as InputFieldProps;\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/InputField',\n  component: InputField,\n  argTypes: {\n    variant: {\n      options: ['large'],\n      control: 'check',\n    },\n    type: {\n      control: 'radio',\n      options: ['text', 'search', 'password', 'email'],\n    },\n    id: {\n      control: 'text',\n    },\n    autoComplete: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n} as Meta<InputFieldProps>;\n\nconst Template: StoryFn<InputFieldProps> = (args) => {\n  const [inputValue, setInputValue] = useState<InputFieldProps['value']>('');\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    setInputValue(event.target.value);\n    fn()('handleChange');\n  };\n\n  const handleClear = () => {\n    setInputValue('');\n    fn()('handleClear');\n  };\n\n  return (\n    <Container>\n      <InputField\n        {...transformArgs(args)}\n        value={inputValue}\n        onChange={handleChange}\n        onClear={handleClear}\n        ref={inputRef}\n      />\n    </Container>\n  );\n};\n\nconst defaultArgs: Partial<InputFieldProps> = {\n  type: 'text',\n  variant: undefined,\n  id: '4f9ca77d',\n};\n\nexport const InputFieldExample = Template.bind({});\nInputFieldExample.args = {\n  ...defaultArgs,\n};\n\nexport const WithStringClearTrigger = Template.bind({});\nWithStringClearTrigger.args = {\n  ...defaultArgs,\n  clearTrigger: 'Clear',\n};\n\nexport const WithIconClearTrigger = Template.bind({});\nWithIconClearTrigger.args = {\n  ...defaultArgs,\n  clearTrigger: <Icon name=\"Cross\" />,\n};\n"],"names":["transformArgs","args","variantArray","InputField_stories","InputField","Template","inputValue","setInputValue","useState","inputRef","useRef","handleChange","event","fn","handleClear","Container","jsx","defaultArgs","InputFieldExample","WithStringClearTrigger","WithIconClearTrigger","Icon"],"mappings":";;;;;;;;;;;;AAYA,MAAMA,IAAgB,CAACC,MAA0B;AAEzC,QAAAC,IAAgBD,EAAK,WAAmC;AACvD,SAAA,EAAE,GAAGA,GAAW,SAASC,EAAa,SAAS;AACxD,GAGeC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,OAAO;AAAA,MACjB,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS,CAAC,QAAQ,UAAU,YAAY,OAAO;AAAA,IACjD;AAAA,IACA,IAAI;AAAA,MACF,SAAS;AAAA,IACX;AAAA,IACA,cAAc;AAAA,MACZ,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AACF,GAEMC,IAAqC,CAACJ,MAAS;AACnD,QAAM,CAACK,GAAYC,CAAa,IAAIC,EAAmC,EAAE,GACnEC,IAAWC,EAAyB,IAAI,GAExCC,IAAe,CAACC,MAAyC;AAC/C,IAAAL,EAAAK,EAAM,OAAO,KAAK,GAChCC,EAAA,EAAK,cAAc;AAAA,EAAA,GAGfC,IAAc,MAAM;AACxB,IAAAP,EAAc,EAAE,GAChBM,EAAA,EAAK,aAAa;AAAA,EAAA;AAGpB,2BACGE,GACC,EAAA,UAAA,gBAAAC;AAAA,IAACZ;AAAA,IAAA;AAAA,MACE,GAAGJ,EAAcC,CAAI;AAAA,MACtB,OAAOK;AAAA,MACP,UAAUK;AAAA,MACV,SAASG;AAAA,MACT,KAAKL;AAAA,IAAA;AAAA,EAET,EAAA,CAAA;AAEJ,GAEMQ,IAAwC;AAAA,EAC5C,MAAM;AAAA,EACN,SAAS;AAAA,EACT,IAAI;AACN,GAEaC,IAAoBb,EAAS,KAAK,EAAE;AACjDa,EAAkB,OAAO;AAAA,EACvB,GAAGD;AACL;AAEO,MAAME,IAAyBd,EAAS,KAAK,EAAE;AACtDc,EAAuB,OAAO;AAAA,EAC5B,GAAGF;AAAA,EACH,cAAc;AAChB;AAEO,MAAMG,IAAuBf,EAAS,KAAK,EAAE;AACpDe,EAAqB,OAAO;AAAA,EAC1B,GAAGH;AAAA,EACH,cAAc,gBAAAD,EAACK,GAAK,EAAA,MAAK,QAAQ,CAAA;AACnC;"}
+{"version":3,"file":"InputField.stories.js","sources":["../../../src/components/InputField/InputField.stories.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { fn } from '@storybook/test';\n\nimport type { ChangeEvent } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { InputFieldProps } from './InputField';\n\nimport { InputField } from './InputField';\n\nimport { Container } from 'components/storyComponents/Container';\nimport { Icon } from 'components';\n\nconst transformArgs = (args: InputFieldProps) => {\n  // args.variant is provided as an array because the control type is set to a checkbox. So this transforms the selected value into its proper value: a string\n  const variantArray = (args.variant as unknown as string[]) ?? [];\n  return { ...args, ...{ variant: variantArray.toString() } } as InputFieldProps;\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/InputField',\n  component: InputField,\n  argTypes: {\n    variant: {\n      options: ['large'],\n      control: 'check',\n    },\n    type: {\n      control: 'radio',\n      options: ['text', 'password', 'email'],\n    },\n    id: {\n      control: 'text',\n    },\n    autoComplete: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n} as Meta<InputFieldProps>;\n\nconst Template: StoryFn<InputFieldProps> = (args) => {\n  const [inputValue, setInputValue] = useState<InputFieldProps['value']>('');\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    setInputValue(event.target.value);\n    fn()('handleChange');\n  };\n\n  const handleClear = () => {\n    setInputValue('');\n    fn()('handleClear');\n  };\n\n  return (\n    <Container>\n      <InputField\n        {...transformArgs(args)}\n        value={inputValue}\n        onChange={handleChange}\n        onClear={handleClear}\n        ref={inputRef}\n      />\n    </Container>\n  );\n};\n\nconst defaultArgs: Partial<InputFieldProps> = {\n  type: 'text',\n  variant: undefined,\n  id: '4f9ca77d',\n};\n\nexport const InputFieldExample = Template.bind({});\nInputFieldExample.args = {\n  ...defaultArgs,\n};\n\nexport const WithStringClearTrigger = Template.bind({});\nWithStringClearTrigger.args = {\n  ...defaultArgs,\n  clearTrigger: 'Clear',\n};\n\nexport const WithIconClearTrigger = Template.bind({});\nWithIconClearTrigger.args = {\n  ...defaultArgs,\n  clearTrigger: <Icon name=\"Cross\" />,\n};\n"],"names":["transformArgs","args","variantArray","InputField_stories","InputField","Template","inputValue","setInputValue","useState","inputRef","useRef","handleChange","event","fn","handleClear","Container","jsx","defaultArgs","InputFieldExample","WithStringClearTrigger","WithIconClearTrigger","Icon"],"mappings":";;;;;;;;;;;;;AAYA,MAAMA,IAAgB,CAACC,MAA0B;AAEzC,QAAAC,IAAgBD,EAAK,WAAmC;AACvD,SAAA,EAAE,GAAGA,GAAW,SAASC,EAAa,SAAS;AACxD,GAGeC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,OAAO;AAAA,MACjB,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS,CAAC,QAAQ,YAAY,OAAO;AAAA,IACvC;AAAA,IACA,IAAI;AAAA,MACF,SAAS;AAAA,IACX;AAAA,IACA,cAAc;AAAA,MACZ,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AACF,GAEMC,IAAqC,CAACJ,MAAS;AACnD,QAAM,CAACK,GAAYC,CAAa,IAAIC,EAAmC,EAAE,GACnEC,IAAWC,EAAyB,IAAI,GAExCC,IAAe,CAACC,MAAyC;AAC/C,IAAAL,EAAAK,EAAM,OAAO,KAAK,GAChCC,EAAA,EAAK,cAAc;AAAA,EAAA,GAGfC,IAAc,MAAM;AACxB,IAAAP,EAAc,EAAE,GAChBM,EAAA,EAAK,aAAa;AAAA,EAAA;AAGpB,2BACGE,GACC,EAAA,UAAA,gBAAAC;AAAA,IAACZ;AAAA,IAAA;AAAA,MACE,GAAGJ,EAAcC,CAAI;AAAA,MACtB,OAAOK;AAAA,MACP,UAAUK;AAAA,MACV,SAASG;AAAA,MACT,KAAKL;AAAA,IAAA;AAAA,EAET,EAAA,CAAA;AAEJ,GAEMQ,IAAwC;AAAA,EAC5C,MAAM;AAAA,EACN,SAAS;AAAA,EACT,IAAI;AACN,GAEaC,IAAoBb,EAAS,KAAK,EAAE;AACjDa,EAAkB,OAAO;AAAA,EACvB,GAAGD;AACL;AAEO,MAAME,IAAyBd,EAAS,KAAK,EAAE;AACtDc,EAAuB,OAAO;AAAA,EAC5B,GAAGF;AAAA,EACH,cAAc;AAChB;AAEO,MAAMG,IAAuBf,EAAS,KAAK,EAAE;AACpDe,EAAqB,OAAO;AAAA,EAC1B,GAAGH;AAAA,EACH,cAAc,gBAAAD,EAACK,GAAK,EAAA,MAAK,QAAQ,CAAA;AACnC;"}

package/dist/components/Label/Label.d.ts

@@ -2,5 +2,6 @@ import { LabelHTMLAttributes } from 'react';
 
 export interface LabelProps extends Omit<LabelHTMLAttributes<HTMLLabelElement>, 'className' | 'style'> {
     htmlFor: string;
+    noFontWeight?: boolean;
 }
-export declare const Label: ({ children, htmlFor, ...restProps }: LabelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Label: ({ children, htmlFor, noFontWeight, ...restProps }: LabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Label/Label.js

@@ -1,8 +1,20 @@
-import { jsx as s } from "react/jsx-runtime";
-import '../../assets/Label.css';const b = "_label_18mqr_1", o = {
-  label: b
-}, c = ({ children: l, htmlFor: e, ...a }) => /* @__PURE__ */ s("label", { ...a, htmlFor: e, className: o.label, children: l });
+import { jsx as b } from "react/jsx-runtime";
+import { c as o } from "../../clsx-DB4S2d7J.js";
+import '../../assets/Label.css';const n = "_label_1b4r9_1", l = {
+  label: n,
+  "label--unset-font-weight": "_label--unset-font-weight_1b4r9_6"
+}, _ = ({ children: e, htmlFor: t, noFontWeight: s, ...a }) => /* @__PURE__ */ b(
+  "label",
+  {
+    ...a,
+    htmlFor: t,
+    className: o(l.label, {
+      [l["label--unset-font-weight"]]: s
+    }),
+    children: e
+  }
+);
 export {
-  c as Label
+  _ as Label
 };
 //# sourceMappingURL=Label.js.map

package/dist/components/Label/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","sources":["../../../src/components/Label/Label.tsx"],"sourcesContent":["import type { LabelHTMLAttributes } from 'react';\n\nimport styles from './Label.module.css';\n\nexport interface LabelProps extends Omit<LabelHTMLAttributes<HTMLLabelElement>, 'className' | 'style'> {\n  htmlFor: string;\n}\n\nexport const Label = ({ children, htmlFor, ...restProps }: LabelProps) => (\n  <label {...restProps} htmlFor={htmlFor} className={styles['label']}>\n    {children}\n  </label>\n);\n"],"names":["Label","children","htmlFor","restProps","jsx","styles"],"mappings":";;;GAQaA,IAAQ,CAAC,EAAE,UAAAC,GAAU,SAAAC,GAAS,GAAGC,EAAU,MACrD,gBAAAC,EAAA,SAAA,EAAO,GAAGD,GAAW,SAAAD,GAAkB,WAAWG,EAAO,OACvD,UAAAJ,EACH,CAAA;"}
+{"version":3,"file":"Label.js","sources":["../../../src/components/Label/Label.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nimport type { LabelHTMLAttributes } from 'react';\n\nimport styles from './Label.module.css';\n\nexport interface LabelProps extends Omit<LabelHTMLAttributes<HTMLLabelElement>, 'className' | 'style'> {\n  htmlFor: string;\n  noFontWeight?: boolean;\n}\n\nexport const Label = ({ children, htmlFor, noFontWeight, ...restProps }: LabelProps) => (\n  <label\n    {...restProps}\n    htmlFor={htmlFor}\n    className={clsx(styles['label'], {\n      [styles['label--unset-font-weight']]: noFontWeight,\n    })}\n  >\n    {children}\n  </label>\n);\n"],"names":["Label","children","htmlFor","noFontWeight","restProps","jsx","clsx","styles"],"mappings":";;;;;GAWaA,IAAQ,CAAC,EAAE,UAAAC,GAAU,SAAAC,GAAS,cAAAC,GAAc,GAAGC,QAC1D,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACE,GAAGD;AAAA,IACJ,SAAAF;AAAA,IACA,WAAWI,EAAKC,EAAO,OAAU;AAAA,MAC/B,CAACA,EAAO,0BAA0B,CAAC,GAAGJ;AAAA,IAAA,CACvC;AAAA,IAEA,UAAAF;AAAA,EAAA;AACH;"}

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

@@ -3,3 +3,4 @@ import { LabelProps } from './Label';
 declare const _default: import('@storybook/types').ComponentAnnotations<import('@storybook/react').ReactRenderer, LabelProps>;
 export default _default;
 export declare const LabelExample: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, LabelProps>;
+export declare const WithNoFontWeight: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, LabelProps>;

package/dist/components/Label/Label.stories.js

@@ -1,6 +1,6 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as n } from "react/jsx-runtime";
 import { Label as t } from "./Label.js";
-const a = {
+const c = {
   title: "Atoms/Label",
   component: t,
   argTypes: {
@@ -11,13 +11,21 @@ const a = {
       control: "text"
     }
   }
-}, r = (e) => /* @__PURE__ */ o(t, { ...e }), l = r.bind({});
-l.args = {
+}, o = (r) => /* @__PURE__ */ n(t, { ...r }), e = {
   children: "Lorem Ipsum",
   htmlFor: "bd79f7ec"
+}, l = o.bind({});
+l.args = {
+  ...e
+};
+const s = o.bind({});
+s.args = {
+  ...e,
+  noFontWeight: !0
 };
 export {
   l as LabelExample,
-  a as default
+  s as WithNoFontWeight,
+  c as default
 };
 //# sourceMappingURL=Label.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Label.stories.js","sources":["../../../src/components/Label/Label.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { LabelProps } from './Label';\n\nimport { Label } from './Label';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/Label',\n  component: Label,\n  argTypes: {\n    htmlFor: {\n      control: 'text',\n    },\n    children: {\n      control: 'text',\n    },\n  },\n} as Meta<LabelProps>;\n\nconst Template: StoryFn<LabelProps> = (args) => <Label {...args} />;\n\nexport const LabelExample = Template.bind({});\nLabelExample.args = {\n  children: 'Lorem Ipsum',\n  htmlFor: 'bd79f7ec',\n};\n"],"names":["Label_stories","Label","Template","args","jsx","LabelExample"],"mappings":";;AAMA,MAAeA,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,IACX;AAAA,EACF;AACF,GAEMC,IAAgC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAO,GAAGE,EAAM,CAAA,GAEpDE,IAAeH,EAAS,KAAK,EAAE;AAC5CG,EAAa,OAAO;AAAA,EAClB,UAAU;AAAA,EACV,SAAS;AACX;"}
+{"version":3,"file":"Label.stories.js","sources":["../../../src/components/Label/Label.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { LabelProps } from './Label';\n\nimport { Label } from './Label';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/Label',\n  component: Label,\n  argTypes: {\n    htmlFor: {\n      control: 'text',\n    },\n    children: {\n      control: 'text',\n    },\n  },\n} as Meta<LabelProps>;\n\nconst Template: StoryFn<LabelProps> = (args) => <Label {...args} />;\n\nconst defaultArgs: Partial<LabelProps> = {\n  children: 'Lorem Ipsum',\n  htmlFor: 'bd79f7ec',\n};\n\nexport const LabelExample = Template.bind({});\nLabelExample.args = {\n  ...defaultArgs,\n};\n\nexport const WithNoFontWeight = Template.bind({});\nWithNoFontWeight.args = {\n  ...defaultArgs,\n  noFontWeight: true,\n};\n"],"names":["Label_stories","Label","Template","args","jsx","defaultArgs","LabelExample","WithNoFontWeight"],"mappings":";;AAMA,MAAeA,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,IACX;AAAA,EACF;AACF,GAEMC,IAAgC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAO,GAAGE,EAAM,CAAA,GAE3DE,IAAmC;AAAA,EACvC,UAAU;AAAA,EACV,SAAS;AACX,GAEaC,IAAeJ,EAAS,KAAK,EAAE;AAC5CI,EAAa,OAAO;AAAA,EAClB,GAAGD;AACL;AAEO,MAAME,IAAmBL,EAAS,KAAK,EAAE;AAChDK,EAAiB,OAAO;AAAA,EACtB,GAAGF;AAAA,EACH,cAAc;AAChB;"}

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

@@ -1,11 +1,14 @@
-import { ChangeEvent } from 'react';
+import { PropsWithChildren, ReactNode } from 'react';
+import { MultiSelectItem } from 'components/MultiSelect/components/MultiSelectItem';
+import { MultiSelectHeader } from 'components/MultiSelect/components/MultiSelectHeader';
 
 export interface MultiSelectProps {
-    items: Array<{
-        label: string;
-        value: string | number;
-        checked: boolean;
-    }>;
-    onChange(event: ChangeEvent<HTMLInputElement>): void;
+    scrollable?: boolean;
+    noBorder?: boolean;
+    header?: ReactNode;
 }
-export declare const MultiSelect: ({ items, onChange }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MultiSelect: {
+    ({ scrollable, noBorder, header, children }: PropsWithChildren<MultiSelectProps>): import("react/jsx-runtime").JSX.Element;
+    MultiSelectHeader: typeof MultiSelectHeader;
+    MultiSelectItem: typeof MultiSelectItem;
+};

package/dist/components/MultiSelect/MultiSelect.js

@@ -1,10 +1,8 @@
-import { jsx as l } from "react/jsx-runtime";
-import { MultiSelectItem as i } from "../MultiSelectItem/MultiSelectItem.js";
-import '../../assets/MultiSelect.css';const t = {
-  "multi-select": "_multi-select_1se76_1",
-  "multi-select__scroll-container": "_multi-select__scroll-container_1se76_7"
-}, r = ({ items: c, onChange: s }) => /* @__PURE__ */ l("div", { className: t["multi-select"], children: /* @__PURE__ */ l("ul", { className: t["multi-select__scroll-container"], children: c.map((e) => /* @__PURE__ */ l(i, { ...e, onChange: s }, e.label)) }) });
+import "react/jsx-runtime";
+import "../../clsx-DB4S2d7J.js";
+import "../../MultiSelectItem-D5q99kfp.js";
+import { M as p } from "../../MultiSelect-CFOkF66G.js";
 export {
-  r as MultiSelect
+  p as MultiSelect
 };
 //# sourceMappingURL=MultiSelect.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.js","sources":["../../../src/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import type { ChangeEvent } from 'react';\n\nimport styles from './MultiSelect.module.css';\n\nimport { MultiSelectItem } from 'components/MultiSelectItem';\n\nexport interface MultiSelectProps {\n  items: Array<{\n    label: string;\n    value: string | number;\n    checked: boolean;\n  }>;\n  onChange(event: ChangeEvent<HTMLInputElement>): void;\n}\n\nexport const MultiSelect = ({ items, onChange }: MultiSelectProps) => (\n  <div className={styles['multi-select']}>\n    <ul className={styles['multi-select__scroll-container']}>\n      {items.map((item) => (\n        <MultiSelectItem key={item.label} {...item} onChange={onChange} />\n      ))}\n    </ul>\n  </div>\n);\n"],"names":["MultiSelect","items","onChange","jsx","styles","item","MultiSelectItem"],"mappings":";;;;;GAeaA,IAAc,CAAC,EAAE,OAAAC,GAAO,UAAAC,EAAS,MAC3C,gBAAAC,EAAA,OAAA,EAAI,WAAWC,EAAO,cAAc,GACnC,4BAAC,MAAG,EAAA,WAAWA,EAAO,gCAAgC,GACnD,UAAAH,EAAM,IAAI,CAACI,MACT,gBAAAF,EAAAG,GAAA,EAAkC,GAAGD,GAAM,UAAAH,EAAtB,GAAAG,EAAK,KAAqC,CACjE,GACH,EACF,CAAA;"}
+{"version":3,"file":"MultiSelect.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

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

@@ -1,5 +1,8 @@
+import { PropsWithChildren } from 'react';
 import { MultiSelectProps } from './MultiSelect';
 
-declare const _default: import('@storybook/types').ComponentAnnotations<import('@storybook/react').ReactRenderer, MultiSelectProps>;
+declare const _default: import('@storybook/types').ComponentAnnotations<import('@storybook/react').ReactRenderer, PropsWithChildren<MultiSelectProps>>;
 export default _default;
-export declare const MultiSelectExample: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, MultiSelectProps>;
+export declare const MultiSelectExample: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, PropsWithChildren<MultiSelectProps>>;
+export declare const WithHeader: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, PropsWithChildren<MultiSelectProps>>;
+export declare const WithheaderAndWithoutScrollContainerAndBorder: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, PropsWithChildren<MultiSelectProps>>;

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

@@ -1,42 +1,81 @@
-import { jsx as c } from "react/jsx-runtime";
-import { f as r } from "../../index-DFUrxrKJ.js";
-import { useState as u } from "react";
-import { MultiSelect as o } from "./MultiSelect.js";
-const h = {
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
+import { f as d } from "../../index-DFUrxrKJ.js";
+import { useState as b } from "react";
+import { M as l } from "../../MultiSelect-CFOkF66G.js";
+import { Container as S } from "../storyComponents/Container/Container.js";
+const T = {
   title: "Organisms/MultiSelect",
-  component: o,
+  component: l,
   argTypes: {
-    onChange: { action: "changed" }
-  }
-}, I = () => {
-  const [s, i] = u([]);
-  return /* @__PURE__ */ c(
-    o,
-    {
-      items: [
-        { label: "Item 1", itemValue: "1" },
-        { label: "Item 2", itemValue: "2" },
-        { label: "Item 3", itemValue: "3" },
-        { label: "Item 4", itemValue: "4" },
-        { label: "Item 5", itemValue: "5" },
-        { label: "Item 6", itemValue: "6" }
-      ].map(({ label: t, itemValue: e }) => ({
-        label: t,
-        value: e,
-        checked: s.includes(e)
-      })),
-      onChange: (t) => {
-        const { checked: e, value: l } = t.target;
-        i((m) => {
-          const a = e ? [...m, l] : m.filter((n) => n !== l);
-          return r()(a), a;
-        });
+    header: {
+      table: {
+        disable: !0
       }
     }
-  );
-}, V = I.bind({});
+  }
+}, a = (m) => {
+  const [i, n] = b([]), h = [
+    { itemName: "Item 1", itemValue: "1" },
+    { itemName: "Item 2", itemValue: "2" },
+    { itemName: "Item 3", itemValue: "3" },
+    { itemName: "Item 4", itemValue: "4" },
+    { itemName: "Item 5", itemValue: "5" },
+    { itemName: "Item 6", itemValue: "6" }
+  ], f = () => {
+    n([]), d()();
+  }, g = (e) => {
+    const { checked: t, value: o } = e.target;
+    n((s) => {
+      const c = t ? [...s, o] : s.filter((I) => I !== o);
+      return d()(c), c;
+    });
+  };
+  return /* @__PURE__ */ p(S, { children: [
+    m.header && /* @__PURE__ */ r(
+      l.MultiSelectHeader,
+      {
+        label: "Item list",
+        clearTrigger: i.length > 0 ? "Clear Selection" : "",
+        onClear: f
+      }
+    ),
+    /* @__PURE__ */ r(l, { ...m, children: h.map(({ itemName: e, itemValue: t }) => /* @__PURE__ */ r(
+      l.MultiSelectItem,
+      {
+        label: e,
+        value: t,
+        checked: i.includes(t),
+        onChange: g
+      },
+      e
+    )) })
+  ] });
+}, u = {
+  scrollable: !0,
+  noBorder: !1
+}, C = a.bind({});
+C.args = {
+  ...u
+};
+const M = a.bind({});
+M.args = {
+  ...u,
+  // boolean is not normal way of adding header but if added after template the rerender logic of
+  // storybook would not correctly clear the checkboxes
+  header: !0
+};
+const N = a.bind({});
+N.args = {
+  scrollable: !1,
+  noBorder: !0,
+  // boolean is not normal way of adding header but if added after template the rerender logic of
+  // storybook would not correctly clear the checkboxes
+  header: !0
+};
 export {
-  V as MultiSelectExample,
-  h as default
+  C as MultiSelectExample,
+  M as WithHeader,
+  N as WithheaderAndWithoutScrollContainerAndBorder,
+  T 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 { Meta, StoryFn } from '@storybook/react';\nimport type { MultiSelectProps } from './MultiSelect';\n\nimport { MultiSelect } from './MultiSelect';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Organisms/MultiSelect',\n  component: MultiSelect,\n  argTypes: {\n    onChange: { action: 'changed' },\n  },\n} as Meta<MultiSelectProps>;\n\nconst Template: StoryFn<MultiSelectProps> = () => {\n  const [items, setItems] = useState<string[]>([]);\n\n  const mockItems = [\n    { label: 'Item 1', itemValue: '1' },\n    { label: 'Item 2', itemValue: '2' },\n    { label: 'Item 3', itemValue: '3' },\n    { label: 'Item 4', itemValue: '4' },\n    { label: 'Item 5', itemValue: '5' },\n    { label: 'Item 6', itemValue: '6' },\n  ];\n\n  return (\n    <MultiSelect\n      items={mockItems.map(({ label, itemValue }) => ({\n        label,\n        value: itemValue,\n        checked: items.includes(itemValue),\n      }))}\n      onChange={(event) => {\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  );\n};\n\nexport const MultiSelectExample = Template.bind({});\n"],"names":["MultiSelect_stories","MultiSelect","Template","items","setItems","useState","jsx","label","itemValue","event","checked","value","prevState","newItems","fn","MultiSelectExample"],"mappings":";;;;AASA,MAAeA,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,UAAU,EAAE,QAAQ,UAAU;AAAA,EAChC;AACF,GAEMC,IAAsC,MAAM;AAChD,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAmB,CAAE,CAAA;AAY7C,SAAA,gBAAAC;AAAA,IAACL;AAAA,IAAA;AAAA,MACC,OAXc;AAAA,QAChB,EAAE,OAAO,UAAU,WAAW,IAAI;AAAA,QAClC,EAAE,OAAO,UAAU,WAAW,IAAI;AAAA,QAClC,EAAE,OAAO,UAAU,WAAW,IAAI;AAAA,QAClC,EAAE,OAAO,UAAU,WAAW,IAAI;AAAA,QAClC,EAAE,OAAO,UAAU,WAAW,IAAI;AAAA,QAClC,EAAE,OAAO,UAAU,WAAW,IAAI;AAAA,MAAA,EAKf,IAAI,CAAC,EAAE,OAAAM,GAAO,WAAAC,SAAiB;AAAA,QAC9C,OAAAD;AAAA,QACA,OAAOC;AAAA,QACP,SAASL,EAAM,SAASK,CAAS;AAAA,MAAA,EACjC;AAAA,MACF,UAAU,CAACC,MAAU;AACnB,cAAM,EAAE,SAAAC,GAAS,OAAAC,MAAUF,EAAM;AACjC,QAAAL,EAAS,CAACQ,MAAc;AACtB,gBAAMC,IAAWH,IAAU,CAAC,GAAGE,GAAWD,CAAK,IAAIC,EAAU,OAAO,CAACJ,MAAcA,MAAcG,CAAK;AACtGG,iBAAAA,EAAA,EAAKD,CAAQ,GACNA;AAAA,QAAA,CACR;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGN,GAEaE,IAAqBb,EAAS,KAAK,CAAE,CAAA;"}
+{"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 'components/storyComponents/Container';\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} as Meta<PropsWithChildren<MultiSelectProps>>;\n\nconst Template: StoryFn<PropsWithChildren<MultiSelectProps>> = (args) => {\n  const [items, setItems] = useState<string[]>([]);\n\n  const mockItems = [\n    { itemName: 'Item 1', itemValue: '1' },\n    { itemName: 'Item 2', itemValue: '2' },\n    { itemName: 'Item 3', itemValue: '3' },\n    { itemName: 'Item 4', itemValue: '4' },\n    { itemName: 'Item 5', itemValue: '5' },\n    { itemName: 'Item 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 }) => (\n          <MultiSelect.MultiSelectItem\n            key={itemName}\n            label={itemName}\n            value={itemValue}\n            checked={items.includes(itemValue)}\n            onChange={handleChange}\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":["MultiSelect_stories","MultiSelect","Template","args","items","setItems","useState","mockItems","handleClear","fn","handleChange","event","checked","value","prevState","newItems","itemValue","Container","jsx","itemName","defaultArgs","MultiSelectExample","WithHeader","WithheaderAndWithoutScrollContainerAndBorder"],"mappings":";;;;;AAYA,MAAeA,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AACF,GAEMC,IAAyD,CAACC,MAAS;AACvE,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAmB,CAAE,CAAA,GAEzCC,IAAY;AAAA,IAChB,EAAE,UAAU,UAAU,WAAW,IAAI;AAAA,IACrC,EAAE,UAAU,UAAU,WAAW,IAAI;AAAA,IACrC,EAAE,UAAU,UAAU,WAAW,IAAI;AAAA,IACrC,EAAE,UAAU,UAAU,WAAW,IAAI;AAAA,IACrC,EAAE,UAAU,UAAU,WAAW,IAAI;AAAA,IACrC,EAAE,UAAU,UAAU,WAAW,IAAI;AAAA,EAAA,GAGjCC,IAAc,MAAM;AACxB,IAAAH,EAAS,CAAE,CAAA,GACXI,EAAK,EAAA;AAAA,EAAA,GAGDC,IAAe,CAACC,MAAyC;AAC7D,UAAM,EAAE,SAAAC,GAAS,OAAAC,MAAUF,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,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,EAC1B,MAAA,gBAAAE;AAAA,MAACjB,EAAY;AAAA,MAAZ;AAAA,QAEC,OAAOkB;AAAA,QACP,OAAOH;AAAA,QACP,SAASZ,EAAM,SAASY,CAAS;AAAA,QACjC,UAAUN;AAAA,MAAA;AAAA,MAJLS;AAAA,IAMR,CAAA,GACH;AAAA,EACF,EAAA,CAAA;AAEJ,GAEMC,IAAyC;AAAA,EAC7C,YAAY;AAAA,EACZ,UAAU;AACZ,GAEaC,IAAqBnB,EAAS,KAAK,EAAE;AAClDmB,EAAmB,OAAO;AAAA,EACxB,GAAGD;AACL;AAEO,MAAME,IAAapB,EAAS,KAAK,EAAE;AAC1CoB,EAAW,OAAO;AAAA,EAChB,GAAGF;AAAA;AAAA;AAAA,EAGH,QAAQ;AACV;AAEO,MAAMG,IAA+CrB,EAAS,KAAK,EAAE;AAC5EqB,EAA6C,OAAO;AAAA,EAClD,YAAY;AAAA,EACZ,UAAU;AAAA;AAAA;AAAA,EAGV,QAAQ;AACV;"}

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

@@ -0,0 +1,6 @@
+export interface MultiSelectHeaderProps {
+    label: string;
+    clearTrigger?: string;
+    onClear?: () => void;
+}
+export declare function MultiSelectHeader({ label, clearTrigger, onClear }: MultiSelectHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/MultiSelect/components/MultiSelectHeader.js

@@ -0,0 +1,16 @@
+import "react/jsx-runtime";
+import "../../../MultiSelectItem-D5q99kfp.js";
+import "../../Label/Label.js";
+import "react";
+import "../../Button/Button.js";
+import "../../OverlayCloseButton/OverlayCloseButton.js";
+import "../../IconButton/IconButton.js";
+import "../../Input/Input.js";
+import "../../InputField/InputField.js";
+import { a as u } from "../../../MultiSelect-CFOkF66G.js";
+import "../../SelectListbox/SelectListbox.js";
+import "../../SelectListbox/SelectProvider.js";
+export {
+  u as MultiSelectHeader
+};
+//# sourceMappingURL=MultiSelectHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectHeader.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/dist/components/MultiSelect/components/MultiSelectItem.js

@@ -0,0 +1,9 @@
+import "react/jsx-runtime";
+import "react";
+import { M as e } from "../../../MultiSelectItem-D5q99kfp.js";
+import "../../Checkbox/Checkbox.js";
+import "../../Label/Label.js";
+export {
+  e as MultiSelectItem
+};
+//# sourceMappingURL=MultiSelectItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/components/MultiSelect/index.js

@@ -1,4 +1,4 @@
-import { MultiSelect as l } from "./MultiSelect.js";
+import { M as l } from "../../MultiSelect-CFOkF66G.js";
 export {
   l as MultiSelect
 };

package/dist/components/ProgrammeCard/ProgrammeCard.stories.js

@@ -9,10 +9,11 @@ import "../OverlayCloseButton/OverlayCloseButton.js";
 import "../IconButton/IconButton.js";
 import "../Input/Input.js";
 import "../InputField/InputField.js";
+import "../../MultiSelect-CFOkF66G.js";
 import { Repeater as i } from "../Repeater/Repeater.js";
 import "../SelectListbox/SelectListbox.js";
 import "../SelectListbox/SelectProvider.js";
-const j = {
+const E = {
   title: "Atoms/ProgrammeCard",
   component: t
 }, s = (o) => /* @__PURE__ */ e(n, { size: "large", children: /* @__PURE__ */ e(t, { ...o }) }), l = s.bind({});
@@ -57,6 +58,6 @@ export {
   p as MultiProgrammeCards,
   l as ProgrammeCardExample,
   d as WithComplexContent,
-  j as default
+  E as default
 };
 //# sourceMappingURL=ProgrammeCard.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ProgrammeCard.stories.js","sources":["../../../src/components/ProgrammeCard/ProgrammeCard.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { ProgrammeCardProps } from './ProgrammeCard';\n\nimport { ProgrammeCard } from './ProgrammeCard';\n\nimport { Container } from 'components/storyComponents/Container';\nimport { Icon, Repeater } from 'components';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/ProgrammeCard',\n  component: ProgrammeCard,\n} as Meta<ProgrammeCardProps>;\n\nconst Template: StoryFn<ProgrammeCardProps> = (args) => (\n  <Container size=\"large\">\n    <ProgrammeCard {...args} />\n  </Container>\n);\n\nexport const ProgrammeCardExample = Template.bind({});\nProgrammeCardExample.args = {\n  header: 'This is my header',\n  details: 'This is my details',\n  onClick: fn(),\n};\n\nexport const WithComplexContent = Template.bind({});\nWithComplexContent.args = {\n  header: (\n    <Repeater flexDirection=\"row\" gap=\"150\">\n      <Icon name=\"Envelope\" size={32} />\n      <h2 style={{ margin: 0 }}>This is my header</h2>\n    </Repeater>\n  ),\n  details: (\n    <Repeater flexDirection=\"row\" gap=\"150\">\n      <Repeater flexDirection=\"row\">\n        <Icon name=\"FaceFrown\" />\n        Details 1\n      </Repeater>\n      <Repeater flexDirection=\"row\">\n        <Icon name=\"Heart\" />\n        Details 2\n      </Repeater>\n      <Repeater flexDirection=\"row\">\n        <Icon name=\"Sparkles\" />\n        Details 3\n      </Repeater>\n    </Repeater>\n  ),\n  onClick: fn(),\n};\n\nconst MultiProgrammeCardsTemplate: StoryFn<ProgrammeCardProps> = (args) => (\n  <Container size=\"large\">\n    <Repeater>\n      <ProgrammeCard {...args} />\n      <ProgrammeCard {...args} />\n      <ProgrammeCard {...args} />\n    </Repeater>\n  </Container>\n);\n\nexport const MultiProgrammeCards = MultiProgrammeCardsTemplate.bind({});\nMultiProgrammeCards.args = {\n  header: 'This is my header',\n  details: 'This is my details',\n  onClick: fn(),\n};\n"],"names":["ProgrammeCard_stories","ProgrammeCard","Template","args","jsx","Container","ProgrammeCardExample","fn","WithComplexContent","jsxs","Repeater","Icon","MultiProgrammeCardsTemplate","MultiProgrammeCards"],"mappings":";;;;;;;;;;;;;;AAWA,MAAeA,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AACb,GAEMC,IAAwC,CAACC,MAC5C,gBAAAC,EAAAC,GAAA,EAAU,MAAK,SACd,UAAC,gBAAAD,EAAAH,GAAA,EAAe,GAAGE,EAAM,CAAA,EAC3B,CAAA,GAGWG,IAAuBJ,EAAS,KAAK,EAAE;AACpDI,EAAqB,OAAO;AAAA,EAC1B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAASC,EAAG;AACd;AAEO,MAAMC,IAAqBN,EAAS,KAAK,EAAE;AAClDM,EAAmB,OAAO;AAAA,EACxB,QACG,gBAAAC,EAAAC,GAAA,EAAS,eAAc,OAAM,KAAI,OAChC,UAAA;AAAA,IAAA,gBAAAN,EAACO,GAAK,EAAA,MAAK,YAAW,MAAM,IAAI;AAAA,sBAC/B,MAAG,EAAA,OAAO,EAAE,QAAQ,KAAK,UAAiB,qBAAA;AAAA,EAAA,GAC7C;AAAA,EAEF,SACG,gBAAAF,EAAAC,GAAA,EAAS,eAAc,OAAM,KAAI,OAChC,UAAA;AAAA,IAAC,gBAAAD,EAAAC,GAAA,EAAS,eAAc,OACtB,UAAA;AAAA,MAAC,gBAAAN,EAAAO,GAAA,EAAK,MAAK,YAAY,CAAA;AAAA,MAAE;AAAA,IAAA,GAE3B;AAAA,IACA,gBAAAF,EAACC,GAAS,EAAA,eAAc,OACtB,UAAA;AAAA,MAAC,gBAAAN,EAAAO,GAAA,EAAK,MAAK,QAAQ,CAAA;AAAA,MAAE;AAAA,IAAA,GAEvB;AAAA,IACA,gBAAAF,EAACC,GAAS,EAAA,eAAc,OACtB,UAAA;AAAA,MAAC,gBAAAN,EAAAO,GAAA,EAAK,MAAK,WAAW,CAAA;AAAA,MAAE;AAAA,IAAA,GAE1B;AAAA,EAAA,GACF;AAAA,EAEF,SAASJ,EAAG;AACd;AAEA,MAAMK,IAA2D,CAACT,MAChE,gBAAAC,EAACC,KAAU,MAAK,SACd,4BAACK,GACC,EAAA,UAAA;AAAA,EAAC,gBAAAN,EAAAH,GAAA,EAAe,GAAGE,GAAM;AAAA,EACzB,gBAAAC,EAACH,GAAe,EAAA,GAAGE,GAAM;AAAA,EACzB,gBAAAC,EAACH,GAAe,EAAA,GAAGE,GAAM;AAAA,EAC3B,CAAA,EACF,CAAA,GAGWU,IAAsBD,EAA4B,KAAK,EAAE;AACtEC,EAAoB,OAAO;AAAA,EACzB,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAASN,EAAG;AACd;"}
+{"version":3,"file":"ProgrammeCard.stories.js","sources":["../../../src/components/ProgrammeCard/ProgrammeCard.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { ProgrammeCardProps } from './ProgrammeCard';\n\nimport { ProgrammeCard } from './ProgrammeCard';\n\nimport { Container } from 'components/storyComponents/Container';\nimport { Icon, Repeater } from 'components';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/ProgrammeCard',\n  component: ProgrammeCard,\n} as Meta<ProgrammeCardProps>;\n\nconst Template: StoryFn<ProgrammeCardProps> = (args) => (\n  <Container size=\"large\">\n    <ProgrammeCard {...args} />\n  </Container>\n);\n\nexport const ProgrammeCardExample = Template.bind({});\nProgrammeCardExample.args = {\n  header: 'This is my header',\n  details: 'This is my details',\n  onClick: fn(),\n};\n\nexport const WithComplexContent = Template.bind({});\nWithComplexContent.args = {\n  header: (\n    <Repeater flexDirection=\"row\" gap=\"150\">\n      <Icon name=\"Envelope\" size={32} />\n      <h2 style={{ margin: 0 }}>This is my header</h2>\n    </Repeater>\n  ),\n  details: (\n    <Repeater flexDirection=\"row\" gap=\"150\">\n      <Repeater flexDirection=\"row\">\n        <Icon name=\"FaceFrown\" />\n        Details 1\n      </Repeater>\n      <Repeater flexDirection=\"row\">\n        <Icon name=\"Heart\" />\n        Details 2\n      </Repeater>\n      <Repeater flexDirection=\"row\">\n        <Icon name=\"Sparkles\" />\n        Details 3\n      </Repeater>\n    </Repeater>\n  ),\n  onClick: fn(),\n};\n\nconst MultiProgrammeCardsTemplate: StoryFn<ProgrammeCardProps> = (args) => (\n  <Container size=\"large\">\n    <Repeater>\n      <ProgrammeCard {...args} />\n      <ProgrammeCard {...args} />\n      <ProgrammeCard {...args} />\n    </Repeater>\n  </Container>\n);\n\nexport const MultiProgrammeCards = MultiProgrammeCardsTemplate.bind({});\nMultiProgrammeCards.args = {\n  header: 'This is my header',\n  details: 'This is my details',\n  onClick: fn(),\n};\n"],"names":["ProgrammeCard_stories","ProgrammeCard","Template","args","jsx","Container","ProgrammeCardExample","fn","WithComplexContent","jsxs","Repeater","Icon","MultiProgrammeCardsTemplate","MultiProgrammeCards"],"mappings":";;;;;;;;;;;;;;;AAWA,MAAeA,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AACb,GAEMC,IAAwC,CAACC,MAC5C,gBAAAC,EAAAC,GAAA,EAAU,MAAK,SACd,UAAC,gBAAAD,EAAAH,GAAA,EAAe,GAAGE,EAAM,CAAA,EAC3B,CAAA,GAGWG,IAAuBJ,EAAS,KAAK,EAAE;AACpDI,EAAqB,OAAO;AAAA,EAC1B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAASC,EAAG;AACd;AAEO,MAAMC,IAAqBN,EAAS,KAAK,EAAE;AAClDM,EAAmB,OAAO;AAAA,EACxB,QACG,gBAAAC,EAAAC,GAAA,EAAS,eAAc,OAAM,KAAI,OAChC,UAAA;AAAA,IAAA,gBAAAN,EAACO,GAAK,EAAA,MAAK,YAAW,MAAM,IAAI;AAAA,sBAC/B,MAAG,EAAA,OAAO,EAAE,QAAQ,KAAK,UAAiB,qBAAA;AAAA,EAAA,GAC7C;AAAA,EAEF,SACG,gBAAAF,EAAAC,GAAA,EAAS,eAAc,OAAM,KAAI,OAChC,UAAA;AAAA,IAAC,gBAAAD,EAAAC,GAAA,EAAS,eAAc,OACtB,UAAA;AAAA,MAAC,gBAAAN,EAAAO,GAAA,EAAK,MAAK,YAAY,CAAA;AAAA,MAAE;AAAA,IAAA,GAE3B;AAAA,IACA,gBAAAF,EAACC,GAAS,EAAA,eAAc,OACtB,UAAA;AAAA,MAAC,gBAAAN,EAAAO,GAAA,EAAK,MAAK,QAAQ,CAAA;AAAA,MAAE;AAAA,IAAA,GAEvB;AAAA,IACA,gBAAAF,EAACC,GAAS,EAAA,eAAc,OACtB,UAAA;AAAA,MAAC,gBAAAN,EAAAO,GAAA,EAAK,MAAK,WAAW,CAAA;AAAA,MAAE;AAAA,IAAA,GAE1B;AAAA,EAAA,GACF;AAAA,EAEF,SAASJ,EAAG;AACd;AAEA,MAAMK,IAA2D,CAACT,MAChE,gBAAAC,EAACC,KAAU,MAAK,SACd,4BAACK,GACC,EAAA,UAAA;AAAA,EAAC,gBAAAN,EAAAH,GAAA,EAAe,GAAGE,GAAM;AAAA,EACzB,gBAAAC,EAACH,GAAe,EAAA,GAAGE,GAAM;AAAA,EACzB,gBAAAC,EAACH,GAAe,EAAA,GAAGE,GAAM;AAAA,EAC3B,CAAA,EACF,CAAA,GAGWU,IAAsBD,EAA4B,KAAK,EAAE;AACtEC,EAAoB,OAAO;AAAA,EACzB,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAASN,EAAG;AACd;"}

package/dist/components/index.d.ts

@@ -19,7 +19,6 @@ export * from './MenuLink';
 export * from './MetaDataList';
 export * from './ModalDialog';
 export * from './MultiSelect';
-export * from './MultiSelectItem';
 export * from './OverlayCloseButton';
 export * from './ProgrammeCard';
 export * from './RadioButton';

package/dist/components/index.js

@@ -1,7 +1,7 @@
 import { Accordion as t } from "./Accordion/Accordion.js";
 import { AppStatusBar as p } from "./AppStatusBar/AppStatusBar.js";
 import { Attention as f } from "./Attention/Attention.js";
-import { Backdrop as i } from "./Backdrop/Backdrop.js";
+import { Backdrop as a } from "./Backdrop/Backdrop.js";
 import { Button as n } from "./Button/Button.js";
 import { ButtonGroup as u } from "./ButtonGroup/ButtonGroup.js";
 import { Card as d } from "./Card/Card.js";
@@ -18,23 +18,22 @@ import { Label as G } from "./Label/Label.js";
 import { M as N } from "../MenuLink-CLEqkVVh.js";
 import { MetaDataList as T } from "./MetaDataList/MetaDataList.js";
 import { ModalDialog as q } from "./ModalDialog/ModalDialog.js";
-import { MultiSelect as E } from "./MultiSelect/MultiSelect.js";
-import { MultiSelectItem as K } from "./MultiSelectItem/MultiSelectItem.js";
-import { OverlayCloseButton as U } from "./OverlayCloseButton/OverlayCloseButton.js";
-import { ProgrammeCard as W } from "./ProgrammeCard/ProgrammeCard.js";
-import { RadioButton as Y } from "./RadioButton/RadioButton.js";
-import { Repeater as _ } from "./Repeater/Repeater.js";
-import { SectionNotification as oo } from "./SectionNotification/SectionNotification.js";
-import { SelectListbox as to } from "./SelectListbox/SelectListbox.js";
-import { SelectProvider as po, useSelect as mo } from "./SelectListbox/SelectProvider.js";
-import { Spinner as xo } from "./Spinner/Spinner.js";
-import { StatusPill as ao } from "./StatusPill/StatusPill.js";
-import { Tooltip as lo } from "./Tooltip/Tooltip.js";
+import { M as E } from "../MultiSelect-CFOkF66G.js";
+import { OverlayCloseButton as K } from "./OverlayCloseButton/OverlayCloseButton.js";
+import { ProgrammeCard as U } from "./ProgrammeCard/ProgrammeCard.js";
+import { RadioButton as W } from "./RadioButton/RadioButton.js";
+import { Repeater as Y } from "./Repeater/Repeater.js";
+import { SectionNotification as _ } from "./SectionNotification/SectionNotification.js";
+import { SelectListbox as oo } from "./SelectListbox/SelectListbox.js";
+import { SelectProvider as to, useSelect as eo } from "./SelectListbox/SelectProvider.js";
+import { Spinner as mo } from "./Spinner/Spinner.js";
+import { StatusPill as xo } from "./StatusPill/StatusPill.js";
+import { Tooltip as io } from "./Tooltip/Tooltip.js";
 export {
   t as Accordion,
   p as AppStatusBar,
   f as Attention,
-  i as Backdrop,
+  a as Backdrop,
   n as Button,
   u as ButtonGroup,
   d as Card,
@@ -52,17 +51,16 @@ export {
   T as MetaDataList,
   q as ModalDialog,
   E as MultiSelect,
-  K as MultiSelectItem,
-  U as OverlayCloseButton,
-  W as ProgrammeCard,
-  Y as RadioButton,
-  _ as Repeater,
-  oo as SectionNotification,
-  to as SelectListbox,
-  po as SelectProvider,
-  xo as Spinner,
-  ao as StatusPill,
-  lo as Tooltip,
-  mo as useSelect
+  K as OverlayCloseButton,
+  U as ProgrammeCard,
+  W as RadioButton,
+  Y as Repeater,
+  _ as SectionNotification,
+  oo as SelectListbox,
+  to as SelectProvider,
+  mo as Spinner,
+  xo as StatusPill,
+  io as Tooltip,
+  eo as useSelect
 };
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.js

@@ -1,7 +1,7 @@
 import { Accordion as t } from "./components/Accordion/Accordion.js";
 import { AppStatusBar as p } from "./components/AppStatusBar/AppStatusBar.js";
 import { Attention as f } from "./components/Attention/Attention.js";
-import { Backdrop as i } from "./components/Backdrop/Backdrop.js";
+import { Backdrop as a } from "./components/Backdrop/Backdrop.js";
 import { Button as n } from "./components/Button/Button.js";
 import { ButtonGroup as u } from "./components/ButtonGroup/ButtonGroup.js";
 import { Card as d } from "./components/Card/Card.js";
@@ -18,23 +18,22 @@ import { Label as G } from "./components/Label/Label.js";
 import { M as N } from "./MenuLink-CLEqkVVh.js";
 import { MetaDataList as T } from "./components/MetaDataList/MetaDataList.js";
 import { ModalDialog as q } from "./components/ModalDialog/ModalDialog.js";
-import { MultiSelect as E } from "./components/MultiSelect/MultiSelect.js";
-import { MultiSelectItem as K } from "./components/MultiSelectItem/MultiSelectItem.js";
-import { OverlayCloseButton as U } from "./components/OverlayCloseButton/OverlayCloseButton.js";
-import { ProgrammeCard as W } from "./components/ProgrammeCard/ProgrammeCard.js";
-import { RadioButton as Y } from "./components/RadioButton/RadioButton.js";
-import { Repeater as _ } from "./components/Repeater/Repeater.js";
-import { SectionNotification as oo } from "./components/SectionNotification/SectionNotification.js";
-import { SelectListbox as to } from "./components/SelectListbox/SelectListbox.js";
-import { SelectProvider as po, useSelect as mo } from "./components/SelectListbox/SelectProvider.js";
-import { Spinner as xo } from "./components/Spinner/Spinner.js";
-import { StatusPill as ao } from "./components/StatusPill/StatusPill.js";
-import { Tooltip as lo } from "./components/Tooltip/Tooltip.js";
+import { M as E } from "./MultiSelect-CFOkF66G.js";
+import { OverlayCloseButton as K } from "./components/OverlayCloseButton/OverlayCloseButton.js";
+import { ProgrammeCard as U } from "./components/ProgrammeCard/ProgrammeCard.js";
+import { RadioButton as W } from "./components/RadioButton/RadioButton.js";
+import { Repeater as Y } from "./components/Repeater/Repeater.js";
+import { SectionNotification as _ } from "./components/SectionNotification/SectionNotification.js";
+import { SelectListbox as oo } from "./components/SelectListbox/SelectListbox.js";
+import { SelectProvider as to, useSelect as eo } from "./components/SelectListbox/SelectProvider.js";
+import { Spinner as mo } from "./components/Spinner/Spinner.js";
+import { StatusPill as xo } from "./components/StatusPill/StatusPill.js";
+import { Tooltip as io } from "./components/Tooltip/Tooltip.js";
 export {
   t as Accordion,
   p as AppStatusBar,
   f as Attention,
-  i as Backdrop,
+  a as Backdrop,
   n as Button,
   u as ButtonGroup,
   d as Card,
@@ -52,17 +51,16 @@ export {
   T as MetaDataList,
   q as ModalDialog,
   E as MultiSelect,
-  K as MultiSelectItem,
-  U as OverlayCloseButton,
-  W as ProgrammeCard,
-  Y as RadioButton,
-  _ as Repeater,
-  oo as SectionNotification,
-  to as SelectListbox,
-  po as SelectProvider,
-  xo as Spinner,
-  ao as StatusPill,
-  lo as Tooltip,
-  mo as useSelect
+  K as OverlayCloseButton,
+  U as ProgrammeCard,
+  W as RadioButton,
+  Y as Repeater,
+  _ as SectionNotification,
+  oo as SelectListbox,
+  to as SelectProvider,
+  mo as Spinner,
+  xo as StatusPill,
+  io as Tooltip,
+  eo as useSelect
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@uva-glass/component-library",
   "author": "Team Glass - Frontend vrienden",
   "private": false,
-  "version": "1.31.1",
+  "version": "1.32.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/dist/assets/MultiSelect.css

@@ -1 +0,0 @@
-._multi-select_1se76_1{border:1px solid var(--color-black);border-radius:var(--border-radius-default);padding:.75rem}._multi-select__scroll-container_1se76_7{list-style:none;margin:0;max-height:8.75rem;overflow:auto;padding:0}

package/dist/components/MultiSelectItem/MultiSelectItem.js

@@ -1,19 +0,0 @@
-import { jsx as e, jsxs as s } from "react/jsx-runtime";
-import { useId as _ } from "react";
-import { Checkbox as c } from "../Checkbox/Checkbox.js";
-import { Label as n } from "../Label/Label.js";
-import '../../assets/MultiSelectItem.css';const i = {
-  "multi-select__item": "_multi-select__item_2oogm_1",
-  "multi-select__item-inner": "_multi-select__item-inner_2oogm_9"
-};
-function h({ label: m, value: l, checked: o, onChange: r }) {
-  const t = _();
-  return /* @__PURE__ */ e("li", { className: i["multi-select__item"], children: /* @__PURE__ */ s("div", { className: i["multi-select__item-inner"], children: [
-    /* @__PURE__ */ e(c, { id: t, value: l, checked: o, onChange: r }),
-    /* @__PURE__ */ e(n, { htmlFor: t, children: m })
-  ] }) });
-}
-export {
-  h as MultiSelectItem
-};
-//# sourceMappingURL=MultiSelectItem.js.map

package/dist/components/MultiSelectItem/MultiSelectItem.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MultiSelectItem.js","sources":["../../../src/components/MultiSelectItem/MultiSelectItem.tsx"],"sourcesContent":["import { useId } from 'react';\n\nimport type { ChangeEvent } from 'react';\n\nimport styles from './MultiSelectItem.module.css';\n\nimport { Checkbox } from 'components/Checkbox';\nimport { Label } from 'components/Label';\n\nexport interface MultiSelectItemProps {\n  label: string;\n  value: string | number;\n  checked: boolean;\n  onChange(event: ChangeEvent<HTMLInputElement>): void;\n}\n\nexport function MultiSelectItem({ label, value, checked, onChange }: MultiSelectItemProps) {\n  const id = useId();\n\n  return (\n    <li className={styles['multi-select__item']}>\n      <div className={styles['multi-select__item-inner']}>\n        <Checkbox id={id} value={value} checked={checked} onChange={onChange} />\n        <Label htmlFor={id}>{label}</Label>\n      </div>\n    </li>\n  );\n}\n"],"names":["MultiSelectItem","label","value","checked","onChange","id","useId","jsx","styles","jsxs","Checkbox","Label"],"mappings":";;;;;;;;AAgBO,SAASA,EAAgB,EAAE,OAAAC,GAAO,OAAAC,GAAO,SAAAC,GAAS,UAAAC,KAAkC;AACzF,QAAMC,IAAKC;AAGT,SAAA,gBAAAC,EAAC,MAAG,EAAA,WAAWC,EAAO,oBAAoB,GACxC,UAAA,gBAAAC,EAAC,OAAI,EAAA,WAAWD,EAAO,0BAA0B,GAC/C,UAAA;AAAA,IAAA,gBAAAD,EAACG,GAAS,EAAA,IAAAL,GAAQ,OAAAH,GAAc,SAAAC,GAAkB,UAAAC,GAAoB;AAAA,IACrE,gBAAAG,EAAAI,GAAA,EAAM,SAASN,GAAK,UAAMJ,GAAA;AAAA,EAAA,EAC7B,CAAA,EACF,CAAA;AAEJ;"}

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

@@ -1,5 +0,0 @@
-import { MultiSelectItemProps } from './MultiSelectItem';
-
-declare const _default: import('@storybook/types').ComponentAnnotations<import('@storybook/react').ReactRenderer, MultiSelectItemProps>;
-export default _default;
-export declare const MultiSelectItemExample: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, MultiSelectItemProps>;

package/dist/components/MultiSelectItem/MultiSelectItem.stories.js

@@ -1,17 +0,0 @@
-import { jsx as l } from "react/jsx-runtime";
-import { f as m } from "../../index-DFUrxrKJ.js";
-import { MultiSelectItem as e } from "./MultiSelectItem.js";
-const u = {
-  title: "Molecules/MultiSelectItem",
-  component: e
-}, o = (t) => /* @__PURE__ */ l(e, { ...t }), i = o.bind({});
-i.args = {
-  label: "Example MultiSelectItem",
-  value: "Value MultiSelectItem",
-  onChange: m()
-};
-export {
-  i as MultiSelectItemExample,
-  u as default
-};
-//# sourceMappingURL=MultiSelectItem.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"MultiSelectItem.stories.js","sources":["../../../src/components/MultiSelectItem/MultiSelectItem.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { MultiSelectItemProps } from './MultiSelectItem';\n\nimport { MultiSelectItem } from './MultiSelectItem';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Molecules/MultiSelectItem',\n  component: MultiSelectItem,\n} as Meta<MultiSelectItemProps>;\n\nconst Template: StoryFn<MultiSelectItemProps> = (args) => <MultiSelectItem {...args} />;\n\nexport const MultiSelectItemExample = Template.bind({});\nMultiSelectItemExample.args = {\n  label: 'Example MultiSelectItem',\n  value: 'Value MultiSelectItem',\n  onChange: fn(),\n};\n"],"names":["MultiSelectItem_stories","MultiSelectItem","Template","args","jsx","MultiSelectItemExample","fn"],"mappings":";;;AAQA,MAAeA,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AACb,GAEMC,IAA0C,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAiB,GAAGE,EAAM,CAAA,GAExEE,IAAyBH,EAAS,KAAK,EAAE;AACtDG,EAAuB,OAAO;AAAA,EAC5B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAUC,EAAG;AACf;"}

package/dist/components/MultiSelectItem/index.d.ts

@@ -1 +0,0 @@
-export * from './MultiSelectItem';

package/dist/components/MultiSelectItem/index.js

@@ -1,5 +0,0 @@
-import { MultiSelectItem as l } from "./MultiSelectItem.js";
-export {
-  l as MultiSelectItem
-};
-//# sourceMappingURL=index.js.map

package/dist/components/MultiSelectItem/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}