@uva-glass/component-library 3.52.1 → 3.52.3

package/dist/assets/MultiSelectBox.css

@@ -1 +1 @@
-._multi-select-box-wrapper_24h2w_1{position:relative}._multi-select-box-trigger_24h2w_5{align-items:center;background-color:var(--color-uva-white);border:1px solid var(--color-grey-500);border-radius:.5rem;cursor:pointer;display:flex;font:inherit;height:2.75rem;justify-content:space-between;line-height:inherit;overflow:hidden;padding:.4rem 2rem .4rem 1rem;position:relative;width:100%}._multi-select-box-trigger--darkBorder_24h2w_22{border:1px solid var(--color-uva-black)}._multi-select-box-trigger_24h2w_5:focus-visible{background-color:var(--color-grey-300);outline:1px solid var(--color-grey-300)}._multi-select-box-trigger_24h2w_5:focus-visible,._multi-select-box-trigger_24h2w_5:hover{background-color:var(--color-grey-300)}._multi-select-box-trigger-label_24h2w_36{min-height:.65rem;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:100%}._multi-select-box-trigger_24h2w_5:disabled:hover{background-color:var(--color-uva-white);cursor:not-allowed}._multi-select-box-trigger-icon_24h2w_50{position:absolute;right:.875rem}._multi-select-box-trigger-icon--open_24h2w_55{transform:rotate(180deg)}._multi-select-box-listbox--wrapper_24h2w_59{border-radius:.5rem;box-shadow:0 0 .25rem #00000040;display:flex;height:auto;margin:.25rem 0;overflow:hidden;position:fixed;width:auto;z-index:20}._multi-select-box-listbox_24h2w_59{background-color:var(--color-uva-white);border-radius:var(--border-radius);display:flex;flex-direction:column;gap:.125rem;list-style:none;margin:0;min-width:100%;overflow-y:auto;padding:.25rem;white-space:nowrap;width:fit-content}._multi-select-box-listbox-option_24h2w_86{border-radius:.25rem;cursor:pointer;display:flex;height:2.5rem;justify-content:flex-start;position:relative;-webkit-user-select:none;user-select:none;width:100%}._multi-select-box-listbox-option--active_24h2w_97,._multi-select-box-listbox-option_24h2w_86:hover{background-color:var(--color-grey-300);box-shadow:0 0 0 1px var(--color-uva-white)}._multi-select-box-listbox-option_24h2w_86:focus-visible,._multi-select-box-listbox-option_24h2w_86:hover{background-color:var(--color-grey-300)}._multi-select-box-listbox-option-content_24h2w_108{align-items:center;cursor:pointer;display:flex;gap:1rem;padding:.75rem;width:100%}._multi-select-box-listbox-option_24h2w_86:focus-visible{background-color:var(--color-grey-300);outline:1px solid var(--color-grey-700)}._multi-select-box-listbox-option--disabled_24h2w_122{cursor:not-allowed;opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}
+._multi-select-box-wrapper_wvuay_1{position:relative}._multi-select-box-trigger_wvuay_5{align-items:center;background-color:var(--color-uva-white);border:1px solid var(--color-grey-500);border-radius:.5rem;cursor:pointer;display:flex;font:inherit;height:2.75rem;justify-content:space-between;line-height:inherit;overflow:hidden;padding:.4rem 2rem .4rem 1rem;position:relative;width:100%}._multi-select-box-trigger--darkBorder_wvuay_22{border-color:var(--color-uva-black)}._multi-select-box-trigger--not-valid_wvuay_26{border-color:var(--color-red-600)}._multi-select-box-trigger_wvuay_5:focus-visible{background-color:var(--color-grey-300);outline:1px solid var(--color-grey-300)}._multi-select-box-trigger_wvuay_5:focus-visible,._multi-select-box-trigger_wvuay_5:hover{background-color:var(--color-grey-300)}._multi-select-box-trigger-label_wvuay_40{min-height:.65rem;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:100%}._multi-select-box-trigger_wvuay_5:disabled:hover{background-color:var(--color-uva-white);cursor:not-allowed}._multi-select-box-trigger-icon_wvuay_54{position:absolute;right:.875rem}._multi-select-box-trigger-icon--open_wvuay_59{transform:rotate(180deg)}._multi-select-box-listbox--wrapper_wvuay_63{border-radius:.5rem;box-shadow:0 0 .25rem #00000040;display:flex;height:auto;margin:.25rem 0;overflow:hidden;position:fixed;width:auto;z-index:20}._multi-select-box-listbox_wvuay_63{background-color:var(--color-uva-white);border-radius:var(--border-radius);display:flex;flex-direction:column;gap:.125rem;list-style:none;margin:0;min-width:100%;overflow-y:auto;padding:.25rem;white-space:nowrap;width:fit-content}._multi-select-box-listbox-option_wvuay_90{border-radius:.25rem;cursor:pointer;display:flex;height:2.5rem;justify-content:flex-start;position:relative;-webkit-user-select:none;user-select:none;width:100%}._multi-select-box-listbox-option--active_wvuay_101,._multi-select-box-listbox-option_wvuay_90:hover{background-color:var(--color-grey-300);box-shadow:0 0 0 1px var(--color-uva-white)}._multi-select-box-listbox-option_wvuay_90:focus-visible,._multi-select-box-listbox-option_wvuay_90:hover{background-color:var(--color-grey-300)}._multi-select-box-listbox-option-content_wvuay_112{align-items:center;cursor:pointer;display:flex;gap:1rem;padding:.75rem;width:100%}._multi-select-box-listbox-option_wvuay_90:focus-visible{background-color:var(--color-grey-300);outline:1px solid var(--color-grey-700)}._multi-select-box-listbox-option--disabled_wvuay_126{cursor:not-allowed;opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}

package/dist/assets/TextArea.css

@@ -1 +1 @@
-._text-area__wrapper_1kj5x_1{display:flex;flex-direction:column;gap:.5rem}._text-area__header_1kj5x_7{align-items:flex-end;display:flex;justify-content:space-between}._text-area__label-wrapper_1kj5x_13{display:flex;flex-direction:column;gap:.5rem}._text-area__label_1kj5x_13{font-family:inherit;font-size:inherit;font-weight:var(--semibold)}._text-area__sub-label_1kj5x_25{color:var(--color-grey-700);font-size:var(--font-size-text-non-essential)}._text-area__word-count_1kj5x_30{color:var(--color-grey-600);font-size:var(--font-size-text-non-essential)}._text-area__word-count--alert_1kj5x_35{color:var(--color-red-600);font-weight:700}._text-area_1kj5x_1{border-radius:.5rem;font-family:inherit;font-size:inherit;min-height:5.25rem;overflow:hidden;padding:.5rem;resize:none;white-space:pre-wrap;width:100%;word-wrap:break-word}
+._text-area__wrapper_di3u1_1{display:flex;flex-direction:column;gap:.5rem}._text-area__header_di3u1_7{align-items:flex-end;display:flex;justify-content:space-between}._text-area__label-wrapper_di3u1_13{display:flex;flex-direction:column;gap:.5rem}._text-area__label_di3u1_13{font-family:inherit;font-size:inherit;font-weight:var(--semibold)}._text-area__label_di3u1_13._required_di3u1_25:after{color:var(--color-red-600);content:"★";font-size:.5rem;margin-left:.25rem;vertical-align:top}._text-area__sub-label_di3u1_33{color:var(--color-grey-700);font-size:var(--font-size-text-non-essential)}._text-area__word-count_di3u1_38{color:var(--color-grey-600);font-size:var(--font-size-text-non-essential)}._text-area__word-count--alert_di3u1_43{color:var(--color-red-600);font-weight:700}._text-area_di3u1_1{border-radius:.5rem;font-family:inherit;font-size:inherit;min-height:5.25rem;overflow:hidden;padding:.5rem;resize:none;white-space:pre-wrap;width:100%;word-wrap:break-word}._text-area_di3u1_1._not-valid_di3u1_61{border-color:var(--color-red-600)}

package/dist/components/Buttons/Button.stories.js

@@ -1,5 +1,5 @@
 import { jsx as t, jsxs as a, Fragment as s } from "react/jsx-runtime";
-import { l } from "../../index-DvUwfXNb.js";
+import { l } from "../../index-BJRrLdmi.js";
 import { Button as n } from "./Button.js";
 const c = "<Button variant={variant} onClick={onClictFunction}>{children}</Button>", h = {
   title: "Atoms/Buttons/Button",

package/dist/components/Buttons/LinkButton.stories.js

@@ -1,5 +1,5 @@
 import { jsx as t, jsxs as a, Fragment as l } from "react/jsx-runtime";
-import { l as s } from "../../index-DvUwfXNb.js";
+import { l as s } from "../../index-BJRrLdmi.js";
 import { BrowserRouter as c } from "react-router";
 import { LinkButton as e } from "./LinkButton.js";
 const d = `

package/dist/components/Buttons/MenuButton.stories.js

@@ -1,5 +1,5 @@
 import { jsx as e, jsxs as l, Fragment as s } from "react/jsx-runtime";
-import { l as c } from "../../index-DvUwfXNb.js";
+import { l as c } from "../../index-BJRrLdmi.js";
 import { MenuButton as n } from "./MenuButton.js";
 const d = `
 // Has all LabelHTMLAttributes props available except "className" and "style" 

package/dist/components/Checkbox/Checkbox.stories.js

@@ -1,5 +1,5 @@
 import { jsxs as g, jsx as o } from "react/jsx-runtime";
-import { l as e } from "../../index-DvUwfXNb.js";
+import { l as e } from "../../index-BJRrLdmi.js";
 import { Checkbox as n } from "./Checkbox.js";
 import { FormField as t } from "../FormField/FormField.js";
 import { Label as i } from "../Label/Label.js";

package/dist/components/CheckboxButtonBar/CheckboxButtonBar.stories.js

@@ -1,5 +1,5 @@
 import { jsx as e, jsxs as t, Fragment as l } from "react/jsx-runtime";
-import { l as o } from "../../index-DvUwfXNb.js";
+import { l as o } from "../../index-BJRrLdmi.js";
 import { CheckboxButtonBar as i } from "./CheckboxButtonBar.js";
 const u = "<CheckboxButtonBar checkboxes={} defaultValues={} label={} labelPosition={} required={} notValidatedText={} disableGroup={} onSetValues={} />", v = {
   title: "Molecules/CheckboxButtonBar",

package/dist/components/CheckboxTree/CheckboxTree.stories.js

@@ -1,6 +1,6 @@
 import { jsx as d, jsxs as _ } from "react/jsx-runtime";
-import { s as T, l as C } from "../../index-DvUwfXNb.js";
-import { G as v, _ as w } from "../../index-BfMTX2kB.js";
+import { s as T, l as C } from "../../index-BJRrLdmi.js";
+import { G as v, _ as w } from "../../index-fdIFY6eP.js";
 import { useState as R } from "react";
 import { CheckboxTree as b } from "./CheckboxTree.js";
 import { Chip as S } from "../Chip/Chip.js";

package/dist/components/Chip/Chip.stories.js

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import { l as t } from "../../index-DvUwfXNb.js";
+import { l as t } from "../../index-BJRrLdmi.js";
 import { Chip as e } from "./Chip.js";
 const s = "<Chip label={string} onDelete={onDeleteFunction(label)}/>", b = {
   title: "Atoms/Chip",

package/dist/components/ControlsButton/ControlsButton.stories.js

@@ -1,5 +1,5 @@
 import { jsx as r, jsxs as l, Fragment as s } from "react/jsx-runtime";
-import { l as e } from "../../index-DvUwfXNb.js";
+import { l as e } from "../../index-BJRrLdmi.js";
 import { ControlsButton as t } from "./ControlsButton.js";
 import { Icons as a } from "../Icon/icons/index.js";
 import { Periods as i } from "../Periods/Periods.js";

package/dist/components/Drawer/Drawer.stories.js

@@ -1,6 +1,6 @@
 import { jsxs as a, jsx as t } from "react/jsx-runtime";
 import { OverlayProvider as p } from "@react-aria/overlays";
-import { l as m } from "../../index-DvUwfXNb.js";
+import { l as m } from "../../index-BJRrLdmi.js";
 import { useState as c } from "react";
 import { Drawer as r } from "./Drawer.js";
 import { Button as o } from "../Buttons/Button.js";

package/dist/components/FormInput/FormInput.stories.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import { l as i } from "../../index-DvUwfXNb.js";
+import { l as i } from "../../index-BJRrLdmi.js";
 import { FormInput as a } from "./FormInput.js";
 import { SelectListbox as o } from "../SelectListbox/SelectListbox.js";
 const m = `

package/dist/components/IconButton/IconButton.stories.js

@@ -1,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-import { l as r } from "../../index-DvUwfXNb.js";
+import { l as r } from "../../index-BJRrLdmi.js";
 import { IconButton as t } from "./IconButton.js";
 import { Icon as i } from "../Icon/Icon.js";
 const l = `<IconButton variant={variant} aria-label={aria-label} onClick={onClickFunction}>

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

@@ -1,6 +1,6 @@
 import { jsx as o } from "react/jsx-runtime";
 import { useState as d, useRef as g } from "react";
-import { l as p } from "../../index-DvUwfXNb.js";
+import { l as p } from "../../index-BJRrLdmi.js";
 import { InputField as e } from "./InputField.js";
 import { Container as u } from "../../storyComponents/Container/Container.js";
 import "../Accordion/Accordion.js";

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

@@ -1,6 +1,6 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import { ModalProvider as n } from "@react-aria/overlays";
-import { l as i } from "../../index-DvUwfXNb.js";
+import { l as i } from "../../index-BJRrLdmi.js";
 import { ModalDialog as t } from "./ModalDialog.js";
 import { Button as l } from "../Buttons/Button.js";
 import "../Buttons/LinkButton.js";

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

@@ -1,5 +1,5 @@
 import { jsxs as S, jsx as r } from "react/jsx-runtime";
-import { l as d } from "../../index-DvUwfXNb.js";
+import { l as d } from "../../index-BJRrLdmi.js";
 import { useState as p } from "react";
 import { M as e } from "../../TablePlugin-BLbsvcuu.js";
 import { Container as M } from "../../storyComponents/Container/Container.js";

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

@@ -18,9 +18,11 @@ export interface MultiSelectBoxProps {
     fullWidth?: boolean;
     /** Dark border. */
     darkBorder?: boolean;
+    /** `true` to color border red to show not valid; otherwise, `false`. */
+    notValid?: boolean;
     /** The max height of the options. */
     maxOptionHeight?: `${number}${'px' | 'rem'}`;
     /** `true` to align the right side of the options with the select box; otherwise, `false` to align on the left side. */
     optionPositionRight?: boolean;
 }
-export declare const MultiSelectBox: ({ selectData, onChange, defaultSelectedItems, labelSuffix, disabled, fullWidth, darkBorder, maxOptionHeight, optionPositionRight, }: MultiSelectBoxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MultiSelectBox: ({ selectData, onChange, defaultSelectedItems, labelSuffix, disabled, fullWidth, darkBorder, notValid, maxOptionHeight, optionPositionRight, }: MultiSelectBoxProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/MultiSelectBox/MultiSelectBox.js

@@ -1,46 +1,48 @@
-import { jsxs as f, jsx as u } from "react/jsx-runtime";
-import { useId as q, useState as d, useRef as A, useCallback as g, useEffect as I } from "react";
-import { c as h } from "../../clsx-OuTLNxxd.js";
-import { Icon as G } from "../Icon/Icon.js";
-import { Checkbox as J } from "../Checkbox/Checkbox.js";
-import { usePositionedFloaters as Q } from "../hooks/usePositionedFloaters.js";
+import { jsxs as g, jsx as u } from "react/jsx-runtime";
+import { useId as G, useState as d, useRef as A, useCallback as f, useEffect as k } from "react";
+import { c as v } from "../../clsx-OuTLNxxd.js";
+import { Icon as J } from "../Icon/Icon.js";
+import { Checkbox as Q } from "../Checkbox/Checkbox.js";
+import { usePositionedFloaters as V } from "../hooks/usePositionedFloaters.js";
 import '../../assets/MultiSelectBox.css';const r = {
-  "multi-select-box-wrapper": "_multi-select-box-wrapper_24h2w_1",
-  "multi-select-box-trigger": "_multi-select-box-trigger_24h2w_5",
-  "multi-select-box-trigger--darkBorder": "_multi-select-box-trigger--darkBorder_24h2w_22",
-  "multi-select-box-trigger-label": "_multi-select-box-trigger-label_24h2w_36",
-  "multi-select-box-trigger-icon": "_multi-select-box-trigger-icon_24h2w_50",
-  "multi-select-box-trigger-icon--open": "_multi-select-box-trigger-icon--open_24h2w_55",
-  "multi-select-box-listbox--wrapper": "_multi-select-box-listbox--wrapper_24h2w_59",
-  "multi-select-box-listbox": "_multi-select-box-listbox_24h2w_59",
-  "multi-select-box-listbox-option": "_multi-select-box-listbox-option_24h2w_86",
-  "multi-select-box-listbox-option--active": "_multi-select-box-listbox-option--active_24h2w_97",
-  "multi-select-box-listbox-option-content": "_multi-select-box-listbox-option-content_24h2w_108",
-  "multi-select-box-listbox-option--disabled": "_multi-select-box-listbox-option--disabled_24h2w_122"
-}, te = ({
+  "multi-select-box-wrapper": "_multi-select-box-wrapper_wvuay_1",
+  "multi-select-box-trigger": "_multi-select-box-trigger_wvuay_5",
+  "multi-select-box-trigger--darkBorder": "_multi-select-box-trigger--darkBorder_wvuay_22",
+  "multi-select-box-trigger--not-valid": "_multi-select-box-trigger--not-valid_wvuay_26",
+  "multi-select-box-trigger-label": "_multi-select-box-trigger-label_wvuay_40",
+  "multi-select-box-trigger-icon": "_multi-select-box-trigger-icon_wvuay_54",
+  "multi-select-box-trigger-icon--open": "_multi-select-box-trigger-icon--open_wvuay_59",
+  "multi-select-box-listbox--wrapper": "_multi-select-box-listbox--wrapper_wvuay_63",
+  "multi-select-box-listbox": "_multi-select-box-listbox_wvuay_63",
+  "multi-select-box-listbox-option": "_multi-select-box-listbox-option_wvuay_90",
+  "multi-select-box-listbox-option--active": "_multi-select-box-listbox-option--active_wvuay_101",
+  "multi-select-box-listbox-option-content": "_multi-select-box-listbox-option-content_wvuay_112",
+  "multi-select-box-listbox-option--disabled": "_multi-select-box-listbox-option--disabled_wvuay_126"
+}, le = ({
   selectData: c,
   onChange: m,
-  defaultSelectedItems: y,
+  defaultSelectedItems: I,
   labelSuffix: E = "geselecteerd",
   disabled: P = !1,
   fullWidth: B = !1,
   darkBorder: C = !1,
-  maxOptionHeight: L,
-  optionPositionRight: F
+  notValid: L = !1,
+  maxOptionHeight: F,
+  optionPositionRight: K
 }) => {
-  const _ = q(), [n, w] = d(y || []), [S, v] = d(y?.length || 0), [s, a] = d(!1), [b, x] = d(-1), k = A(null), N = A(null), [K, R] = d(null), [$, D] = d(null), { style: M, updatePosition: O } = Q(K, $, {
+  const _ = G(), [n, w] = d(I || []), [S, y] = d(I?.length || 0), [s, a] = d(!1), [b, x] = d(-1), h = A(null), N = A(null), [R, $] = d(null), [D, M] = d(null), { style: T, updatePosition: O } = V(R, D, {
     mouseEvent: "click",
     offset: 4,
-    maxFixedHeight: L,
-    horizontalPosition: F ? "right" : "left",
+    maxFixedHeight: F,
+    horizontalPosition: K ? "right" : "left",
     mobileBreakpoint: "28rem",
     fullWidth: B
-  }), p = g(
+  }), p = f(
     ({ target: e }) => {
-      !e || !k.current || k.current.contains(e) || a(!1);
+      !e || !h.current || h.current.contains(e) || a(!1);
     },
     [a]
-  ), T = g(
+  ), j = f(
     (e) => {
       switch (e.key) {
         case "Enter":
@@ -52,7 +54,7 @@ import '../../assets/MultiSelectBox.css';const r = {
       }
     },
     [s]
-  ), j = g(
+  ), z = f(
     (e) => {
       if (s)
         switch (e.key) {
@@ -79,7 +81,7 @@ import '../../assets/MultiSelectBox.css';const r = {
             const t = c[b];
             if (!t || t.disabled) break;
             const o = n.some((i) => i.value === t.value) ? n.filter((i) => i.value !== t.value) : [...n, t];
-            w(o), v(o.length), m(o);
+            w(o), y(o.length), m(o);
             break;
           }
           case "Tab":
@@ -91,61 +93,62 @@ import '../../assets/MultiSelectBox.css';const r = {
         }
     },
     [b, s, c, n, m]
-  ), z = (e, t) => {
+  ), U = (e, t) => {
     if (t.disabled || e.target.tagName === "INPUT") return;
     const o = n.some((i) => i.value === t.value) ? n.filter((i) => i.value !== t.value) : [...n, t];
-    w(o), v(o.length), m(o), O();
-  }, U = g(
+    w(o), y(o.length), m(o), O();
+  }, H = f(
     (e) => {
       const { checked: t, value: l } = e.target;
       let o = [...n];
       if (t) {
-        const i = c.find((H) => H.value === l);
+        const i = c.find((q) => q.value === l);
         i && o.push(i);
       } else
         o = o.filter((i) => i.value !== l);
-      w(o), v(o.length), m(o), O();
+      w(o), y(o.length), m(o), O();
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [c, n, m]
   );
-  return I(() => {
+  return k(() => {
     s && x(0);
-  }, [s]), I(() => {
+  }, [s]), k(() => {
     N.current?.children[b]?.focus();
-  }, [b]), I(() => {
+  }, [b]), k(() => {
     if (s)
       return document.addEventListener("click", p, !0), document.addEventListener("scroll", p, !0), () => {
         document.removeEventListener("click", p, !0), document.removeEventListener("scroll", p, !0);
       };
-  }, [p, s]), /* @__PURE__ */ f("div", { className: r["multi-select-box-wrapper"], ref: k, children: [
-    /* @__PURE__ */ f(
+  }, [p, s]), /* @__PURE__ */ g("div", { className: r["multi-select-box-wrapper"], ref: h, children: [
+    /* @__PURE__ */ g(
       "button",
       {
-        className: h(r["multi-select-box-trigger"], {
-          [r["multi-select-box-trigger--darkBorder"]]: C
+        className: v(r["multi-select-box-trigger"], {
+          [r["multi-select-box-trigger--darkBorder"]]: C,
+          [r["multi-select-box-trigger--not-valid"]]: L
         }),
         type: "button",
         onClick: () => {
           a(!s);
         },
-        onKeyDown: T,
+        onKeyDown: j,
         "aria-expanded": s,
         "aria-haspopup": "listbox",
         "aria-label": `${S} ${E}`,
         disabled: P,
         ...s && { "aria-controls": _ },
-        ref: D,
+        ref: M,
         children: [
-          /* @__PURE__ */ f("span", { className: r["multi-select-box-trigger-label"], children: [
+          /* @__PURE__ */ g("span", { className: r["multi-select-box-trigger-label"], children: [
             S,
             " ",
             E
           ] }),
           /* @__PURE__ */ u(
-            G,
+            J,
             {
-              className: h(r["multi-select-box-trigger-icon"], {
+              className: v(r["multi-select-box-trigger-icon"], {
                 [r["multi-select-box-trigger-icon--open"]]: s
               }),
               name: "CheveronDown",
@@ -159,30 +162,30 @@ import '../../assets/MultiSelectBox.css';const r = {
       "div",
       {
         id: _,
-        className: h(r["multi-select-box-listbox--wrapper"]),
-        style: { ...M.style, visibility: s ? "visible" : "hidden" },
+        className: v(r["multi-select-box-listbox--wrapper"]),
+        style: { ...T.style, visibility: s ? "visible" : "hidden" },
         role: "listbox",
-        ref: R,
+        ref: $,
         children: /* @__PURE__ */ u("ul", { className: r["multi-select-box-listbox"], ref: N, children: c.map(({ label: e, value: t, disabled: l }, o) => /* @__PURE__ */ u(
           "li",
           {
-            className: h(r["multi-select-box-listbox-option"], {
+            className: v(r["multi-select-box-listbox-option"], {
               [r["multi-select-box-listbox-option--active"]]: o === b,
               [r["multi-select-box-listbox-option--disabled"]]: l
             }),
             role: "option",
-            onKeyDown: j,
-            onClick: (i) => z(i, { label: e, value: t, disabled: l }),
+            onKeyDown: z,
+            onClick: (i) => U(i, { label: e, value: t, disabled: l }),
             onMouseOver: () => x(o),
             onFocus: () => x(o),
             tabIndex: 0,
             "aria-selected": n.some((i) => i.value === t),
-            children: /* @__PURE__ */ f("label", { htmlFor: e, className: r["multi-select-box-listbox-option-content"], tabIndex: -1, children: [
+            children: /* @__PURE__ */ g("label", { htmlFor: e, className: r["multi-select-box-listbox-option-content"], tabIndex: -1, children: [
               /* @__PURE__ */ u(
-                J,
+                Q,
                 {
                   id: `${e}-${_}`,
-                  onChange: U,
+                  onChange: H,
                   value: t,
                   tabIndex: -1,
                   disabled: l,
@@ -199,6 +202,6 @@ import '../../assets/MultiSelectBox.css';const r = {
   ] });
 };
 export {
-  te as MultiSelectBox
+  le as MultiSelectBox
 };
 //# sourceMappingURL=MultiSelectBox.js.map

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, updatePosition } = 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    updatePosition();\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      updatePosition();\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\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","updatePosition","usePositionedFloaters","onMouseEventOutside","useCallback","target","onTriggerKeyDown","event","onOptionKeyDown","prev","nextIndex","selectedItem","updatedSelectedItems","item","onOptionClick","option","handleSelect","checked","value","useEffect","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  /** `true` to color border red to show not valid; otherwise, `false`. */\n  notValid?: 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  notValid = 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, updatePosition } = 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    updatePosition();\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      updatePosition();\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\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          [styles['multi-select-box-trigger--not-valid']]: notValid,\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","notValid","maxOptionHeight","optionPositionRight","multiselectboxId","useId","selectedItems","setSelectedItems","useState","selectedItemsCount","setSelectedItemsCount","isOpen","setIsOpen","activeIndex","setActiveIndex","wrapperRef","useRef","optionListRef","positionElement","setPositionElement","referenceElement","setReferenceElement","positionStyle","updatePosition","usePositionedFloaters","onMouseEventOutside","useCallback","target","onTriggerKeyDown","event","onOptionKeyDown","prev","nextIndex","selectedItem","updatedSelectedItems","item","onOptionClick","option","handleSelect","checked","value","useEffect","styles","jsxs","clsx","jsx","Icon","label","index","Checkbox"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import { jsxs as m, jsx as a } from "react/jsx-runtime";
-import { l as u } from "../../index-DvUwfXNb.js";
+import { l as u } from "../../index-BJRrLdmi.js";
 import { useState as r } from "react";
 import { MultiSelectBox as t } from "./MultiSelectBox.js";
 const b = "<MultiSelectBox selectData={[{label, value}]} onChange={fn} labelSuffix={string} />", S = {

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

@@ -1,5 +1,5 @@
 import { jsx as i } from "react/jsx-runtime";
-import { l as a } from "../../index-DvUwfXNb.js";
+import { l as a } from "../../index-BJRrLdmi.js";
 import { Notification as t } from "./Notification.js";
 const l = `<Notification title={title} subtitle={subtitle} action={action} 
   level={level} variant={variant} onClose={() => {}} />`, m = {

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

@@ -1,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-import { l as t } from "../../index-DvUwfXNb.js";
+import { l as t } from "../../index-BJRrLdmi.js";
 import { OverlayCloseButton as o } from "./OverlayCloseButton.js";
 import { Container as a } from "../../storyComponents/Container/Container.js";
 const r = "<OverlayCloseButton aria-label={aria-label} onClick={onClickFunction} />", c = {

package/dist/components/PeriodSelector/PeriodSelector.stories.js

@@ -1,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import { l as t } from "../../index-DvUwfXNb.js";
+import { l as t } from "../../index-BJRrLdmi.js";
 import { PeriodSelector as e } from "./PeriodSelector.js";
 const i = "<PeriodSelector maxPeriods={} defaultValues={} label={} labelPosition={} required={} onChange={} />", m = {
   title: "Organisms/PeriodSelector",

package/dist/components/RadioGroup/RadioGroup.stories.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import { l as a } from "../../index-DvUwfXNb.js";
+import { l as a } from "../../index-BJRrLdmi.js";
 import { RadioGroup as o } from "./RadioGroup.js";
 const l = `
   <RadioGroup label={label} options={options} 

package/dist/components/RadioTabSelector/RadioTabSelector.stories.js

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import { l as t } from "../../index-DvUwfXNb.js";
+import { l as t } from "../../index-BJRrLdmi.js";
 import { RadioTabSelector as e } from "./RadioTabSelector.js";
 const i = "<RadioTabSelector radioButtons={} defaultValue={} label={} labelPosition={} required={} notValidatedText={} onSetValue={} />", b = {
   title: "Molecules/RadioTabSelector",

package/dist/components/SelectListbox/SelectListBox.stories.js

@@ -1,5 +1,5 @@
 import { jsx as a, jsxs as M } from "react/jsx-runtime";
-import { l as i } from "../../index-DvUwfXNb.js";
+import { l as i } from "../../index-BJRrLdmi.js";
 import { SelectListbox as r } from "./SelectListbox.js";
 import * as e from "react";
 const E = ({

package/dist/components/Sortable/Sortable.stories.js

@@ -1,5 +1,5 @@
 import { jsx as e, jsxs as i, Fragment as m } from "react/jsx-runtime";
-import { l as s } from "../../index-DvUwfXNb.js";
+import { l as s } from "../../index-BJRrLdmi.js";
 import { Sortable as l } from "./Sortable.js";
 import { InputField as d } from "../InputField/InputField.js";
 import { Icon as c } from "../Icon/Icon.js";

package/dist/components/TextArea/TextArea.d.ts

@@ -9,5 +9,9 @@ export interface TextAreaProps {
     maxCharacters?: number;
     /** The default value for the text area */
     defaultValue?: string;
+    /** `true` to show an asterisk to indicate an item is required; otherwise, `false`. */
+    required?: boolean;
+    /** `true` to color border red to show not valid; otherwise, `false`. */
+    notValid?: boolean;
 }
-export declare function TextArea({ onChange, label, subLabel, maxCharacters, defaultValue }: TextAreaProps): import("react/jsx-runtime").JSX.Element;
+export declare function TextArea({ onChange, label, subLabel, maxCharacters, defaultValue, required, notValid, }: TextAreaProps): import("react/jsx-runtime").JSX.Element;