@uva-glass/component-library 3.22.0 → 3.23.0

package/dist/assets/ToggleSwitch.css

@@ -1 +1 @@
-._toggle-switch_98blk_1{align-items:center;cursor:pointer;display:inline-flex;gap:1ch;-webkit-user-select:none;user-select:none}._toggle-switch__visible_98blk_9{align-items:center;background-color:var(--new-color-uva-white);border:1px solid var(--new-color-uva-black);border-radius:.75rem;box-shadow:0 1px 1px #0000000f,0 1px 2px #0000001a;display:flex;height:1.5rem;outline:.125rem dotted transparent;outline-offset:.125rem;padding:.25rem;transition:background-color .15s;width:3.125rem}:focus-visible+._toggle-switch__visible_98blk_9{outline-color:var(--new-color-navy-600)}:checked+._toggle-switch__visible_98blk_9{background-color:var(--new-color-forest-600)}._toggle-switch__visible_98blk_9:before{background-color:var(--new-color-grey-300);border:1px solid var(--new-color-uva-black);border-radius:.75rem;content:"";display:inline-block;height:1rem;min-width:1rem;transform:translate(-.1rem);transition:background-color .15s,transform .15s,width .15s}:checked+._toggle-switch__visible_98blk_9:before{background-color:var(--new-color-uva-white);transform:translate(1.6rem)}._toggle-switch--disabled_98blk_52 ._toggle-switch__visible_98blk_9:before{background-color:#0000001a;border-color:#0000001a}:checked:active+._toggle-switch__visible_98blk_9:before{transform:translate(1.25rem)}._toggle-switch--disabled_98blk_52,._toggle-switch--loading_98blk_62{pointer-events:none}._toggle-switch--disabled_98blk_52 ._toggle-switch__visible_98blk_9{background-color:var(--new-color-grey-300);border-color:#0000001a;box-shadow:none}._toggle-switch--visually-hidden_98blk_72{border:0;clip:rect(0,0,0,0);clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}._toggle-switch--disabled-label_98blk_85{color:var(--new-color-grey-700)}._toggle-switch--loading-cursor_98blk_89{cursor:wait}._toggle-switch--extra-left-gap_98blk_93{margin-left:.5rem}
+._toggle-switch_1lmpu_1{align-items:center;cursor:pointer;display:inline-flex;gap:1ch;-webkit-user-select:none;user-select:none}._toggle-switch__visible_1lmpu_9{align-items:center;background-color:var(--new-color-uva-white);border:1px solid var(--new-color-uva-black);border-radius:.75rem;box-shadow:0 1px 1px #0000000f,0 1px 2px #0000001a;display:flex;height:1.5rem;outline:.125rem dotted transparent;outline-offset:.125rem;padding:.25rem;transition:background-color .15s;width:3.125rem}:focus-visible+._toggle-switch__visible_1lmpu_9{outline-color:var(--new-color-navy-600)}:checked+._toggle-switch__visible_1lmpu_9{background-color:var(--new-color-forest-600)}._toggle-switch__visible_1lmpu_9:before{background-color:var(--new-color-grey-300);border:1px solid var(--new-color-uva-black);border-radius:.75rem;content:"";display:inline-block;height:1rem;min-width:1rem;transform:translate(-.1rem);transition:background-color .15s,transform .15s,width .15s}:checked+._toggle-switch__visible_1lmpu_9:before{background-color:var(--new-color-uva-white);transform:translate(1.6rem)}._toggle-switch--disabled_1lmpu_54 ._toggle-switch__visible_1lmpu_9:before{background-color:#0000001a;border-color:#0000001a}:checked:active+._toggle-switch__visible_1lmpu_9:before{transform:translate(1.25rem)}._toggle-switch--disabled_1lmpu_54,._toggle-switch--loading_1lmpu_64{pointer-events:none}._toggle-switch--disabled_1lmpu_54 ._toggle-switch__visible_1lmpu_9{background-color:var(--new-color-grey-300);border-color:#0000001a;box-shadow:none}._toggle-switch--visually-hidden_1lmpu_74{border:0;clip:rect(0,0,0,0);clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}._toggle-switch--disabled-label_1lmpu_87{color:var(--new-color-grey-700)}._toggle-switch--loading-cursor_1lmpu_91{cursor:wait}._toggle-switch--extra-left-gap_1lmpu_95{margin-left:.5rem}

package/dist/assets/variables.css

@@ -1,56 +1,4 @@
 :root {
-  --color-black: #1f1d20;
-  --color-grey-500: #69666c;
-  --color-grey-400: #8f8e90;
-  --color-grey-300: #b0b1b2;
-  --color-grey-200: #dcddde;
-  --color-grey-100: #ebebec;
-  --color-grey-50: #f5f5f6;
-  --color-white: #fff;
-  --color-red-600: #a0002a;
-  --color-red-500: #bc0031;
-  --color-red-400: #e00030;
-  --color-red-50: #ffe8ee;
-  --color-green-500: #2f6f31;
-  --color-green-400: #3a863d;
-  --color-green-300: #4cae4f;
-  --color-green-100: #64df9f;
-  --color-green-50: #e9fbf2;
-  --color-yellow-600: #cc8500;
-  --color-yellow-500: #ffa600;
-  --color-yellow-400: #ffde67;
-  --color-yellow-50: #fff6d7;
-  --color-blue-500: #0e4ea7;
-  --color-blue-400: #a3e7ff;
-  --color-blue-50: #e0f7ff;
-  --color-purple-400: #9747ff;
-  --color-cobalt: #0d4da5;
-  --color-san-felix: #2c632e;
-  --color-uva-green: #49a74c;
-  --color-scarpa-flow: #69656c;
-  --color-uva-red-dark: #9e002a;
-  --color-uva-red: #bd0032;
-  --color-silver: #bfbfbf;
-  --color-chilean-fire: #d45c3a;
-  --color-pattens-blue: #dddedf;
-  --color-amaranth: #dc3251;
-  --color-ghost-white: #f4f4f5;
-  --color-lavender: #ebebec;
-  --color-mint-cream: #eafbf2;
-  --color-amour: #ffe5ec;
-  --color-dandelion: #ffde66;
-  --color-natural-wood: #fff6d6;
-  --color-uva-black: #1F1D20;
-  --color-electric-violet: #9747FF;
-  --color-lemon-grass: #99998a;
-  --color-vista-blue: #8feabb;
-  --color-medium-aquamarine: #62df9f;
-  --color-uva-orange: #cc8500;
-  --color-fog: #cfcdd0;
-  --color-french-grey: #b3afb6;
-  --color-columbia-blue: #a1e7fc;
-  --color-light-cyan: #e1f8ff;
-  --color-natural-wool: #FFF6D6;
   --new-color-uva-white: #FFFFFF;
   --new-color-uva-black: #1B1918;
   --new-color-uva-red: #BD0032;
@@ -126,4 +74,79 @@
   --new-color-purple-700: #7E076C;
   --new-color-purple-800: #6B065B;
   --new-color-purple-900: #57054B;
+  --color-uva-white: #FFFFFF;
+  --color-uva-black: #1B1918;
+  --color-uva-red: #BD0032;
+  --color-grey-100: #FAFAFA;
+  --color-grey-200: #F5F5F4;
+  --color-grey-300: #E7E5E4;
+  --color-grey-400: #D8D6D4;
+  --color-grey-500: #A8A29F;
+  --color-grey-600: #78716D;
+  --color-grey-700: #56504E;
+  --color-grey-800: #433F3D;
+  --color-grey-900: #282524;
+  --color-red-100: #FFEBEF;
+  --color-red-200: #F9B4C3;
+  --color-red-300: #F5849D;
+  --color-red-400: #F15577;
+  --color-red-500: #EC1342;
+  --color-red-600: #E00031;
+  --color-red-700: #C2002A;
+  --color-red-800: #A30023;
+  --color-red-900: #85001D;
+  --color-orange-100: #FFF2E0;
+  --color-orange-200: #FFE0B8;
+  --color-orange-300: #FFD399;
+  --color-orange-400: #FFBD66;
+  --color-orange-500: #FFA733;
+  --color-orange-600: #F58B00;
+  --color-orange-700: #E07F00;
+  --color-orange-800: #C26E00;
+  --color-orange-900: #A35C00;
+  --color-lime-100: #FDFBE3;
+  --color-lime-200: #FAF7BD;
+  --color-lime-300: #F7F297;
+  --color-lime-400: #F3EC68;
+  --color-lime-500: #EFE639;
+  --color-lime-600: #D9CF12;
+  --color-lime-700: #C2B800;
+  --color-lime-800: #A39B00;
+  --color-lime-900: #857E00;
+  --color-forest-100: #EAF5EC;
+  --color-forest-200: #C8E4CE;
+  --color-forest-300: #98CDA2;
+  --color-forest-400: #68B677;
+  --color-forest-500: #41AA56;
+  --color-forest-600: #1C9C35;
+  --color-forest-700: #0F8A28;
+  --color-forest-800: #0C6E20;
+  --color-forest-900: #0A5C1B;
+  --color-sky-100: #EEF8FB;
+  --color-sky-200: #DFF1F8;
+  --color-sky-300: #C2E7F4;
+  --color-sky-400: #9DDBF1;
+  --color-sky-500: #63C9EE;
+  --color-sky-600: #35B9E9;
+  --color-sky-700: #17A1D3;
+  --color-sky-800: #127EA5;
+  --color-sky-900: #00698F;
+  --color-navy-100: #E7F0F9;
+  --color-navy-200: #CEE2F3;
+  --color-navy-300: #ADCEEB;
+  --color-navy-400: #74ACDC;
+  --color-navy-500: #3385CC;
+  --color-navy-600: #0562B3;
+  --color-navy-700: #005299;
+  --color-navy-800: #00417A;
+  --color-navy-900: #003666;
+  --color-purple-100: #F5EAF3;
+  --color-purple-200: #EDD4E9;
+  --color-purple-300: #E0AED9;
+  --color-purple-400: #D47DC7;
+  --color-purple-500: #B42D9F;
+  --color-purple-600: #91087D;
+  --color-purple-700: #7E076C;
+  --color-purple-800: #6B065B;
+  --color-purple-900: #57054B;
 }

package/dist/components/Backdrop/Backdrop.js

@@ -1,8 +1,8 @@
-import { jsx as s } from "react/jsx-runtime";
-import '../../assets/Backdrop.css';const r = "_backdrop_t17s7_1", a = {
-  backdrop: r
-}, t = ({ children: o, ...c }) => /* @__PURE__ */ s("div", { ...c, className: a.backdrop, children: o });
+import { jsx as r } from "react/jsx-runtime";
+import '../../assets/Backdrop.css';const s = "_backdrop_1n3f5_1", a = {
+  backdrop: s
+}, d = ({ children: o, ...c }) => /* @__PURE__ */ r("div", { ...c, className: a.backdrop, children: o });
 export {
-  t as Backdrop
+  d as Backdrop
 };
 //# sourceMappingURL=Backdrop.js.map

package/dist/components/Buttons/Button.js

@@ -1,7 +1,7 @@
 import { jsx as f } from "react/jsx-runtime";
 import { c as u } from "../../clsx-OuTLNxxd.js";
 import { forwardRef as a } from "react";
-import { s as t } from "../../Button.module-BXzi8gZH.js";
+import { s as t } from "../../Button.module-Dlqf6mMD.js";
 const p = a(
   ({ children: o, type: r = "button", variant: s, displayColumn: m = !1, ...n }, e) => /* @__PURE__ */ f(
     "button",

package/dist/components/Buttons/LinkButton.js

@@ -2,7 +2,7 @@ import { jsx as s } from "react/jsx-runtime";
 import { forwardRef as f } from "react";
 import { Link as i } from "react-router";
 import { c as n } from "../../clsx-OuTLNxxd.js";
-import { s as o } from "../../Button.module-BXzi8gZH.js";
+import { s as o } from "../../Button.module-Dlqf6mMD.js";
 const l = f(
   ({ variant: r, ...t }, m) => /* @__PURE__ */ s(i, { ...t, className: n(o.button, o[`button--${r}`]), ref: m })
 );

package/dist/components/Buttons/MenuButton.js

@@ -2,7 +2,7 @@ import { jsxs as e, jsx as p } from "react/jsx-runtime";
 import { useButton as c } from "@react-aria/button";
 import { c as f } from "../../clsx-OuTLNxxd.js";
 import { Icon as i } from "../Icon/Icon.js";
-import { s as r } from "../../Button.module-BXzi8gZH.js";
+import { s as r } from "../../Button.module-Dlqf6mMD.js";
 function B({ buttonRef: t, variant: s, iconName: o, children: n, ...m }) {
   const { buttonProps: u } = c(m, t);
   return /* @__PURE__ */ e("button", { ...u, ref: t, className: f(r.button, r[`button--${s}`]), children: [

package/dist/components/CheckboxTree/CheckboxTree.js

@@ -17,7 +17,7 @@ import "../IconButton/IconButton.js";
 import "../Input/Input.js";
 import "../InputField/InputField.js";
 import "react-router";
-import "../../TablePlugin-CrCof8yO.js";
+import "../../TablePlugin-Bj5FObQ_.js";
 import "../RteEditor/Providers/LanguageProvider.js";
 import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../RteEditor/hooks/components/Flyout.js";
@@ -25,19 +25,19 @@ import "../../index-DllfJcv4.js";
 import "../SelectListbox/SelectListbox.js";
 import "../SelectListbox/SelectProvider.js";
 import "../Sortable/components/SortableItem.js";
-import "../../SortableProvider-B3_u0pKv.js";
+import "../../SortableProvider-CwX1lFMa.js";
 import { useResponsive as N } from "../hooks/useResponsive.js";
 import '../../assets/CheckboxTree.css';const s = {
-  "checkbox-tree__header": "_checkbox-tree__header_1nrfk_1",
-  "checkbox-tree__branch": "_checkbox-tree__branch_1nrfk_8",
-  "checkbox-tree__branch--icon": "_checkbox-tree__branch--icon_1nrfk_21",
-  "checkbox-tree__branch--icon--expanded": "_checkbox-tree__branch--icon--expanded_1nrfk_27",
-  "checkbox-tree__branch--formfield": "_checkbox-tree__branch--formfield_1nrfk_32",
-  "checkbox-tree__leaves": "_checkbox-tree__leaves_1nrfk_39",
-  "checkbox-tree__leaves--expanded": "_checkbox-tree__leaves--expanded_1nrfk_48",
-  "checkbox-tree__leaf": "_checkbox-tree__leaf_1nrfk_52"
-}, fe = ({
-  title: l,
+  "checkbox-tree__header": "_checkbox-tree__header_l338d_1",
+  "checkbox-tree__branch": "_checkbox-tree__branch_l338d_8",
+  "checkbox-tree__branch--icon": "_checkbox-tree__branch--icon_l338d_21",
+  "checkbox-tree__branch--icon--expanded": "_checkbox-tree__branch--icon--expanded_l338d_27",
+  "checkbox-tree__branch--formfield": "_checkbox-tree__branch--formfield_l338d_32",
+  "checkbox-tree__leaves": "_checkbox-tree__leaves_l338d_39",
+  "checkbox-tree__leaves--expanded": "_checkbox-tree__leaves--expanded_l338d_48",
+  "checkbox-tree__leaf": "_checkbox-tree__leaf_l338d_52"
+}, _e = ({
+  title: f,
   checkboxTree: F,
   selectedValues: d,
   noLabelFrontWeight: p = !1,
@@ -45,7 +45,7 @@ import '../../assets/CheckboxTree.css';const s = {
 }) => {
   const n = G({}), [m, x] = S([]), { lessThan: h } = N(), R = (r, e) => {
     if (r.length !== e.length) return !1;
-    const t = (o) => o.reduce((f, O) => (f[O] = (f[O] || 0) + 1, f), {}), c = t(r), a = t(e);
+    const t = (o) => o.reduce((_, O) => (_[O] = (_[O] || 0) + 1, _), {}), c = t(r), a = t(e);
     return !Object.keys(c).some((o) => c[o] !== a[o]);
   }, k = (r) => (n.current[r] || (n.current[r] = q()), n.current[r]), v = () => {
     const r = [];
@@ -53,7 +53,7 @@ import '../../assets/CheckboxTree.css';const s = {
       const t = n.current[e].current;
       t && t.name.indexOf("Group") === -1 && t.checked && r.push(t.value);
     }), x(r), b && b(r);
-  }, _ = (r) => {
+  }, l = (r) => {
     if (r === "") return;
     const e = [];
     Object.entries(n.current).forEach(([a]) => {
@@ -84,10 +84,10 @@ import '../../assets/CheckboxTree.css';const s = {
             if (!a || !o) return;
             a.checked = !!o.checked;
           }
-        }), _(t), v();
+        }), l(t), v();
         return;
       }
-      _(e.getAttribute("data-groupname") || ""), v();
+      l(e.getAttribute("data-groupname") || ""), v();
     }
   }, y = (r) => {
     const e = r.target, t = e.closest("[data-li]");
@@ -101,10 +101,10 @@ import '../../assets/CheckboxTree.css';const s = {
   }, [d]), E(() => {
     Object.entries(n.current).forEach(([r]) => {
       const e = n.current[r].current;
-      e && e.name.indexOf("Group") !== -1 && _(e.name);
+      e && e.name.indexOf("Group") !== -1 && l(e.name);
     });
   }, [m]), /* @__PURE__ */ u("div", { children: [
-    l && /* @__PURE__ */ i("span", { className: s["checkbox-tree__header"], children: l }),
+    f && /* @__PURE__ */ i("span", { className: s["checkbox-tree__header"], children: f }),
     /* @__PURE__ */ i("div", { onClick: $, "data-ul": !0, role: "tree", tabIndex: 0, children: F.map(({ itemName: r, children: e }, t) => /* @__PURE__ */ u(
       "div",
       {
@@ -164,6 +164,6 @@ import '../../assets/CheckboxTree.css';const s = {
   ] });
 };
 export {
-  fe as CheckboxTree
+  _e as CheckboxTree
 };
 //# sourceMappingURL=CheckboxTree.js.map

package/dist/components/FormInput/FormInput.js

@@ -16,7 +16,7 @@ import "../IconButton/IconButton.js";
 import "../Input/Input.js";
 import "../InputField/InputField.js";
 import "react-router";
-import "../../TablePlugin-CrCof8yO.js";
+import "../../TablePlugin-Bj5FObQ_.js";
 import "../RteEditor/Providers/LanguageProvider.js";
 import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../RteEditor/hooks/components/Flyout.js";
@@ -24,7 +24,7 @@ import "../../index-DllfJcv4.js";
 import "../SelectListbox/SelectListbox.js";
 import "../SelectListbox/SelectProvider.js";
 import "../Sortable/components/SortableItem.js";
-import "../../SortableProvider-B3_u0pKv.js";
+import "../../SortableProvider-CwX1lFMa.js";
 import '../../assets/FormInput.css';const o = {
   "form-input__container": "_form-input__container_c0vpz_1",
   "form-input__container--label-left": "_form-input__container--label-left_c0vpz_7",

package/dist/components/Input/Input.js

@@ -1,28 +1,28 @@
 import { jsx as _ } from "react/jsx-runtime";
-import { forwardRef as h } from "react";
-import { c } from "../../clsx-OuTLNxxd.js";
-import '../../assets/Input.css';const f = "_input_1hohz_1", t = {
-  input: f,
-  "input--numeric": "_input--numeric_1hohz_13",
-  "input--error": "_input--error_1hohz_18",
-  "input--full-with": "_input--full-with_1hohz_23"
-}, w = h(function({ id: r, appearance: n, type: i = "text", isNumeric: u, fullWidth: o, ...p }, e) {
+import { forwardRef as c } from "react";
+import { c as f } from "../../clsx-OuTLNxxd.js";
+import '../../assets/Input.css';const m = "_input_1jwvu_1", t = {
+  input: m,
+  "input--numeric": "_input--numeric_1jwvu_13",
+  "input--error": "_input--error_1jwvu_18",
+  "input--full-with": "_input--full-with_1jwvu_23"
+}, a = c(function({ id: u, appearance: r, type: n = "text", isNumeric: i, fullWidth: p, ...o }, e) {
   return /* @__PURE__ */ _(
     "input",
     {
-      ...p,
+      ...o,
       ref: e,
-      id: r,
-      className: c(t.input, {
-        [t["input--error"]]: n === "error",
-        [t["input--full-with"]]: o,
-        [t["input--numeric"]]: u
+      id: u,
+      className: f(t.input, {
+        [t["input--error"]]: r === "error",
+        [t["input--full-with"]]: p,
+        [t["input--numeric"]]: i
       }),
-      type: i
+      type: n
     }
   );
 });
 export {
-  w as Input
+  a as Input
 };
 //# sourceMappingURL=Input.js.map

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

@@ -16,7 +16,7 @@ import "../GridRow/GridRow.js";
 import "../IconButton/IconButton.js";
 import "../Input/Input.js";
 import "react-router";
-import "../../TablePlugin-CrCof8yO.js";
+import "../../TablePlugin-Bj5FObQ_.js";
 import "../RteEditor/Providers/LanguageProvider.js";
 import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../RteEditor/hooks/components/Flyout.js";
@@ -24,7 +24,7 @@ import "../../index-DllfJcv4.js";
 import "../SelectListbox/SelectListbox.js";
 import "../SelectListbox/SelectProvider.js";
 import "../Sortable/components/SortableItem.js";
-import "../../SortableProvider-B3_u0pKv.js";
+import "../../SortableProvider-CwX1lFMa.js";
 const f = `
 // Has all HTMLInputElement props available except "className" and "style" 
 <InputField aria-labelledby={aria-labelledby} id={id} onChange={onChangeFunction}

package/dist/components/MultiSelect/MultiSelect.js

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "../../clsx-OuTLNxxd.js";
 import "../../MultiSelectItem-DbOdEllV.js";
-import { M as p } from "../../TablePlugin-CrCof8yO.js";
+import { M as p } from "../../TablePlugin-Bj5FObQ_.js";
 export {
   p as MultiSelect
 };

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

@@ -1,7 +1,7 @@
 import { jsxs as S, jsx as r } from "react/jsx-runtime";
 import { fn as d } from "../../index-Dwqes6RH.js";
 import { useState as p } from "react";
-import { M as e } from "../../TablePlugin-CrCof8yO.js";
+import { M as e } from "../../TablePlugin-Bj5FObQ_.js";
 import { Container as M } from "../../storyComponents/Container/Container.js";
 const C = `
   // MultiSelectHeader can be added optionally

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

@@ -15,7 +15,7 @@ import "../../IconButton/IconButton.js";
 import "../../Input/Input.js";
 import "../../InputField/InputField.js";
 import "react-router";
-import { a as y } from "../../../TablePlugin-CrCof8yO.js";
+import { a as y } from "../../../TablePlugin-Bj5FObQ_.js";
 import "../../RteEditor/Providers/LanguageProvider.js";
 import "../../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../../RteEditor/hooks/components/Flyout.js";
@@ -23,7 +23,7 @@ import "../../../index-DllfJcv4.js";
 import "../../SelectListbox/SelectListbox.js";
 import "../../SelectListbox/SelectProvider.js";
 import "../../Sortable/components/SortableItem.js";
-import "../../../SortableProvider-B3_u0pKv.js";
+import "../../../SortableProvider-CwX1lFMa.js";
 export {
   y as MultiSelectHeader
 };

package/dist/components/MultiSelect/index.js

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

package/dist/components/MultiSelectBox/MultiSelectBox.js

@@ -1,44 +1,44 @@
-import { jsxs as f, jsx as u } from "react/jsx-runtime";
-import { useId as U, useState as b, useRef as S, useCallback as g, useEffect as w } from "react";
+import { jsxs as g, jsx as u } from "react/jsx-runtime";
+import { useId as U, useState as b, useRef as S, useCallback as _, useEffect as y } from "react";
 import { c as I } from "../../clsx-OuTLNxxd.js";
 import { Icon as H } from "../Icon/Icon.js";
 import { Checkbox as q } from "../Checkbox/Checkbox.js";
 import { usePositionedFloaters as G } from "../hooks/usePositionedFloaters.js";
 import '../../assets/MultiSelectBox.css';const n = {
-  "multi-select-box-wrapper": "_multi-select-box-wrapper_1yhht_1",
-  "multi-select-box-trigger": "_multi-select-box-trigger_1yhht_5",
-  "multi-select-box-trigger-label": "_multi-select-box-trigger-label_1yhht_32",
-  "multi-select-box-trigger-icon": "_multi-select-box-trigger-icon_1yhht_41",
-  "multi-select-box-trigger-icon--open": "_multi-select-box-trigger-icon--open_1yhht_46",
-  "multi-select-box-listbox--wrapper": "_multi-select-box-listbox--wrapper_1yhht_50",
-  "multi-select-box-listbox": "_multi-select-box-listbox_1yhht_50",
-  "multi-select-box-listbox-option": "_multi-select-box-listbox-option_1yhht_77",
-  "multi-select-box-listbox-option--active": "_multi-select-box-listbox-option--active_1yhht_88",
-  "multi-select-box-listbox-option-content": "_multi-select-box-listbox-option-content_1yhht_99",
-  "multi-select-box-listbox-option--disabled": "_multi-select-box-listbox-option--disabled_1yhht_113"
+  "multi-select-box-wrapper": "_multi-select-box-wrapper_4fwo9_1",
+  "multi-select-box-trigger": "_multi-select-box-trigger_4fwo9_5",
+  "multi-select-box-trigger-label": "_multi-select-box-trigger-label_4fwo9_32",
+  "multi-select-box-trigger-icon": "_multi-select-box-trigger-icon_4fwo9_41",
+  "multi-select-box-trigger-icon--open": "_multi-select-box-trigger-icon--open_4fwo9_46",
+  "multi-select-box-listbox--wrapper": "_multi-select-box-listbox--wrapper_4fwo9_50",
+  "multi-select-box-listbox": "_multi-select-box-listbox_4fwo9_50",
+  "multi-select-box-listbox-option": "_multi-select-box-listbox-option_4fwo9_77",
+  "multi-select-box-listbox-option--active": "_multi-select-box-listbox-option--active_4fwo9_88",
+  "multi-select-box-listbox-option-content": "_multi-select-box-listbox-option-content_4fwo9_99",
+  "multi-select-box-listbox-option--disabled": "_multi-select-box-listbox-option--disabled_4fwo9_113"
 }, Z = ({
   selectData: c,
   onChange: m,
-  defaultSelectedItems: h,
+  defaultSelectedItems: f,
   labelSuffix: E = "geselecteerd",
   disabled: P = !1,
   fullWidth: C = !1,
   maxOptionHeight: L,
   optionPositionRight: O
 }) => {
-  const _ = U(), [r, y] = b(h || []), [N, v] = b((h == null ? void 0 : h.length) || 0), [i, a] = b(!1), [d, x] = b(-1), k = S(null), A = S(null), [F, K] = b(null), [R, $] = b(null), { style: D } = G(F, R, {
+  const w = U(), [r, h] = b(f || []), [N, v] = b((f == null ? void 0 : f.length) || 0), [i, a] = b(!1), [d, x] = b(-1), k = S(null), A = S(null), [F, K] = b(null), [R, $] = b(null), { style: D } = G(F, R, {
     mouseEvent: "click",
     offset: 4,
     maxFixedHeight: L,
     horizontalPosition: O ? "right" : "left",
     mobileBreakpoint: "28rem",
     fullWidth: C
-  }), p = g(
+  }), p = _(
     ({ target: e }) => {
       !e || !k.current || k.current.contains(e) || a(!1);
     },
     [a]
-  ), M = g(
+  ), M = _(
     (e) => {
       switch (e.key) {
         case "Enter":
@@ -50,36 +50,36 @@ import '../../assets/MultiSelectBox.css';const n = {
       }
     },
     [i]
-  ), T = g(
+  ), T = _(
     (e) => {
       if (i)
         switch (e.key) {
           case "ArrowDown":
             e.preventDefault(), x((t) => {
-              var l;
-              let o = t;
+              var o;
+              let l = t;
               do
-                o = o < c.length - 1 ? o + 1 : 0;
-              while ((l = c[o]) != null && l.disabled);
-              return o;
+                l = l < c.length - 1 ? l + 1 : 0;
+              while ((o = c[l]) != null && o.disabled);
+              return l;
             });
             break;
           case "ArrowUp":
             e.preventDefault(), x((t) => {
-              var l;
-              let o = t;
+              var o;
+              let l = t;
               do
-                o = o <= 0 ? c.length - 1 : o - 1;
-              while ((l = c[o]) != null && l.disabled);
-              return o;
+                l = l <= 0 ? c.length - 1 : l - 1;
+              while ((o = c[l]) != null && o.disabled);
+              return l;
             });
             break;
           case "Enter": {
             e.preventDefault();
             const t = c[d];
             if (!t || t.disabled) break;
-            const l = r.some((s) => s.value === t.value) ? r.filter((s) => s.value !== t.value) : [...r, t];
-            y(l), v(l.length), m(l);
+            const o = r.some((s) => s.value === t.value) ? r.filter((s) => s.value !== t.value) : [...r, t];
+            h(o), v(o.length), m(o);
             break;
           }
           case "Tab":
@@ -93,34 +93,34 @@ import '../../assets/MultiSelectBox.css';const n = {
     [d, i, c, r, m]
   ), j = (e, t) => {
     if (t.disabled || e.target.tagName === "INPUT") return;
-    const l = r.some((s) => s.value === t.value) ? r.filter((s) => s.value !== t.value) : [...r, t];
-    y(l), v(l.length), m(l);
-  }, z = g(
+    const o = r.some((s) => s.value === t.value) ? r.filter((s) => s.value !== t.value) : [...r, t];
+    h(o), v(o.length), m(o);
+  }, z = _(
     (e) => {
-      const { checked: t, value: o } = e.target;
-      let l = [...r];
+      const { checked: t, value: l } = e.target;
+      let o = [...r];
       if (t) {
-        const s = c.find((B) => B.value === o);
-        s && l.push(s);
+        const s = c.find((B) => B.value === l);
+        s && o.push(s);
       } else
-        l = l.filter((s) => s.value !== o);
-      y(l), v(l.length), m(l);
+        o = o.filter((s) => s.value !== l);
+      h(o), v(o.length), m(o);
     },
     [c, r, m]
   );
-  return w(() => {
+  return y(() => {
     i && x(0);
-  }, [i]), w(() => {
+  }, [i]), y(() => {
     var t;
     const e = (t = A.current) == null ? void 0 : t.children[d];
     e == null || e.focus();
-  }, [d]), w(() => {
+  }, [d]), y(() => {
     if (i)
       return document.addEventListener("click", p, !0), document.addEventListener("scroll", p, !0), () => {
         document.removeEventListener("click", p, !0), document.removeEventListener("scroll", p, !0);
       };
-  }, [p, i]), /* @__PURE__ */ f("div", { className: n["multi-select-box-wrapper"], ref: k, children: [
-    /* @__PURE__ */ f(
+  }, [p, i]), /* @__PURE__ */ g("div", { className: n["multi-select-box-wrapper"], ref: k, children: [
+    /* @__PURE__ */ g(
       "button",
       {
         className: n["multi-select-box-trigger"],
@@ -133,10 +133,10 @@ import '../../assets/MultiSelectBox.css';const n = {
         "aria-haspopup": "listbox",
         "aria-label": `${N} ${E}`,
         disabled: P,
-        ...i && { "aria-controls": _ },
+        ...i && { "aria-controls": w },
         ref: $,
         children: [
-          /* @__PURE__ */ f("span", { className: n["multi-select-box-trigger-label"], children: [
+          /* @__PURE__ */ g("span", { className: n["multi-select-box-trigger-label"], children: [
             N,
             " ",
             E
@@ -157,34 +157,34 @@ import '../../assets/MultiSelectBox.css';const n = {
     /* @__PURE__ */ u(
       "div",
       {
-        id: _,
+        id: w,
         className: I(n["multi-select-box-listbox--wrapper"]),
         style: { ...D.style, visibility: i ? "visible" : "hidden" },
         role: "listbox",
         ref: K,
-        children: /* @__PURE__ */ u("ul", { className: n["multi-select-box-listbox"], ref: A, children: c.map(({ label: e, value: t, disabled: o }, l) => /* @__PURE__ */ u(
+        children: /* @__PURE__ */ u("ul", { className: n["multi-select-box-listbox"], ref: A, children: c.map(({ label: e, value: t, disabled: l }, o) => /* @__PURE__ */ u(
           "li",
           {
             className: I(n["multi-select-box-listbox-option"], {
-              [n["multi-select-box-listbox-option--active"]]: l === d,
-              [n["multi-select-box-listbox-option--disabled"]]: o
+              [n["multi-select-box-listbox-option--active"]]: o === d,
+              [n["multi-select-box-listbox-option--disabled"]]: l
             }),
             role: "option",
             onKeyDown: T,
-            onClick: (s) => j(s, { label: e, value: t, disabled: o }),
-            onMouseOver: () => x(l),
-            onFocus: () => x(l),
+            onClick: (s) => j(s, { label: e, value: t, disabled: l }),
+            onMouseOver: () => x(o),
+            onFocus: () => x(o),
             tabIndex: 0,
             "aria-selected": r.some((s) => s.value === t),
-            children: /* @__PURE__ */ f("label", { htmlFor: e, className: n["multi-select-box-listbox-option-content"], tabIndex: -1, children: [
+            children: /* @__PURE__ */ g("label", { htmlFor: e, className: n["multi-select-box-listbox-option-content"], tabIndex: -1, children: [
               /* @__PURE__ */ u(
                 q,
                 {
-                  id: `${e}-${_}`,
+                  id: `${e}-${w}`,
                   onChange: z,
                   value: t,
                   tabIndex: -1,
-                  disabled: o,
+                  disabled: l,
                   checked: r.some((s) => s.value === t)
                 }
               ),