@uva-glass/component-library 3.27.2 → 3.28.0

package/dist/{SelectListbox.module-DHFU0NjU.js → SelectListbox.module-yzXaWwsm.js}

@@ -1,26 +1,26 @@
-import './assets/SelectListbox.css';const e = {
-  "select-listbox-container": "_select-listbox-container_10373_1",
-  "select-listbox__wrapper": "_select-listbox__wrapper_10373_5",
-  "select-listbox-trigger": "_select-listbox-trigger_10373_15",
-  "select-listbox-trigger--default": "_select-listbox-trigger--default_10373_30",
-  "select-listbox-trigger--small": "_select-listbox-trigger--small_10373_34",
-  "select-listbox-trigger--medium": "_select-listbox-trigger--medium_10373_38",
-  "select-listbox-trigger-label": "_select-listbox-trigger-label_10373_43",
-  "select-listbox__wrapper--align-right": "_select-listbox__wrapper--align-right_10373_52",
-  "select-listbox-trigger--bold": "_select-listbox-trigger--bold_10373_56",
-  "select-listbox-trigger--pill": "_select-listbox-trigger--pill_10373_60",
-  "select-listbox-trigger--pillLeft": "_select-listbox-trigger--pillLeft_10373_65",
-  "select-listbox-trigger--pillRight": "_select-listbox-trigger--pillRight_10373_70",
-  "select-listbox-trigger--darkBorder": "_select-listbox-trigger--darkBorder_10373_75",
-  "select-listbox-trigger--noborder": "_select-listbox-trigger--noborder_10373_89",
-  "select-listbox-trigger-icon": "_select-listbox-trigger-icon_10373_101",
-  "select-listbox-trigger-icon--open": "_select-listbox-trigger-icon--open_10373_106",
-  "select-listbox": "_select-listbox_10373_1",
-  "select-listbox-option": "_select-listbox-option_10373_120",
-  "select-listbox-option--active": "_select-listbox-option--active_10373_133",
-  "select-listbox-divider": "_select-listbox-divider_10373_143"
+import './assets/SelectListbox.css';const t = {
+  "select-listbox-container": "_select-listbox-container_4xtnu_1",
+  "select-listbox__wrapper": "_select-listbox__wrapper_4xtnu_5",
+  "select-listbox-trigger": "_select-listbox-trigger_4xtnu_15",
+  "select-listbox-trigger--default": "_select-listbox-trigger--default_4xtnu_30",
+  "select-listbox-trigger--small": "_select-listbox-trigger--small_4xtnu_34",
+  "select-listbox-trigger--medium": "_select-listbox-trigger--medium_4xtnu_38",
+  "select-listbox-trigger-label": "_select-listbox-trigger-label_4xtnu_43",
+  "select-listbox__wrapper--align-right": "_select-listbox__wrapper--align-right_4xtnu_52",
+  "select-listbox-trigger--bold": "_select-listbox-trigger--bold_4xtnu_56",
+  "select-listbox-trigger--pill": "_select-listbox-trigger--pill_4xtnu_60",
+  "select-listbox-trigger--pillLeft": "_select-listbox-trigger--pillLeft_4xtnu_65",
+  "select-listbox-trigger--pillRight": "_select-listbox-trigger--pillRight_4xtnu_70",
+  "select-listbox-trigger--darkBorder": "_select-listbox-trigger--darkBorder_4xtnu_75",
+  "select-listbox-trigger--noborder": "_select-listbox-trigger--noborder_4xtnu_89",
+  "select-listbox-trigger-icon": "_select-listbox-trigger-icon_4xtnu_101",
+  "select-listbox-trigger-icon--open": "_select-listbox-trigger-icon--open_4xtnu_106",
+  "select-listbox": "_select-listbox_4xtnu_1",
+  "select-listbox-option": "_select-listbox-option_4xtnu_120",
+  "select-listbox-option--active": "_select-listbox-option--active_4xtnu_133",
+  "select-listbox-divider": "_select-listbox-divider_4xtnu_143"
 };
 export {
-  e as s
+  t as s
 };
-//# sourceMappingURL=SelectListbox.module-DHFU0NjU.js.map
+//# sourceMappingURL=SelectListbox.module-yzXaWwsm.js.map

package/dist/SelectListbox.module-yzXaWwsm.js.map

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

package/dist/assets/ControlsButton.css

@@ -1 +1 @@
-._controls-button_105b3_1{align-items:center;background-color:var(--new-color-uva-white);border-radius:.25rem;cursor:pointer;display:inline-flex;font-size:var(--font-size-default);height:2.25rem;justify-content:center;min-width:2.25rem;padding:.5rem;position:relative;-webkit-user-select:none;user-select:none;white-space:nowrap}._controls-button--squared_105b3_17{width:2.25rem}._controls-input_105b3_21{aspect-ratio:unset;cursor:pointer;height:0;opacity:0;position:absolute;width:0}._controls-button_105b3_1:after{content:"";min-height:2.625rem;min-width:2.625rem;position:absolute;width:100%}._controls-input_105b3_21:focus-visible+label{outline:.125rem dotted var(--new-color-navy-600);outline-offset:.125rem}._controls-input_105b3_21:checked+label{background-color:var(--new-color-grey-200);border:1px solid var(--new-color-grey-700);font-weight:var(--semibold)}._controls-input_105b3_21:disabled+label,._controls-input_105b3_21:disabled:hover+label{background-color:var(--new-color-grey-400);color:var(--new-color-grey-700);cursor:not-allowed}._controls-input_105b3_21:hover+label{background-color:var(--new-color-grey-300)}
+._controls-button_1jd0n_1{align-items:center;background-color:var(--new-color-uva-white);border-radius:.25rem;cursor:pointer;display:inline-flex;font-size:var(--font-size-default);height:2.25rem;justify-content:center;min-width:2.25rem;padding:.5rem;position:relative;-webkit-user-select:none;user-select:none;white-space:nowrap}._controls-button--squared_1jd0n_17{width:2.25rem}._controls-input_1jd0n_21{aspect-ratio:unset;cursor:pointer;height:0;opacity:0;position:absolute;width:0}._controls-button_1jd0n_1:after{content:"";min-height:2.625rem;min-width:2.625rem;position:absolute;width:100%}._controls-input_1jd0n_21:focus-visible+label{outline:.125rem dotted var(--new-color-navy-600);outline-offset:.125rem}._controls-input_1jd0n_21:checked+label{background-color:var(--new-color-grey-200);border:1px solid var(--new-color-grey-700);font-weight:var(--semibold)}._controls-input_1jd0n_21:disabled+label,._controls-input_1jd0n_21:disabled:hover+label{background-color:var(--new-color-grey-400);color:var(--new-color-grey-700);cursor:not-allowed}._controls-input_1jd0n_21:hover+label{background-color:var(--new-color-grey-300)}._controls-button--with-prefix_1jd0n_60{height:auto;padding:.125rem .5rem;width:auto}._controls-button__wrapper_1jd0n_66{align-items:center;display:flex;flex-direction:column}._controls-button__prefix_1jd0n_72{color:var(--new-color-grey-700);font-size:var(--font-size-text-non-essential)}

package/dist/assets/MetaDataList.css

@@ -1 +1 @@
-._meta-data-list_en1ef_1{margin:0}._meta-data-list__item_en1ef_5{display:flex;gap:1rem;justify-content:space-between;padding:.5rem 0}._meta-data-list__item_en1ef_5:not(:last-of-type){border-bottom:1px solid var(--new-color-grey-300)}._meta-data-list__term_en1ef_16{color:var(--new-color-grey-700)}._meta-data-list__description_en1ef_20{align-items:center;display:inline-flex;font-weight:var(--semibold);margin:0;text-align:right}
+._meta-data-list_1ripo_1{margin:0}._meta-data-list__item_1ripo_5{display:flex;gap:1rem;justify-content:space-between;padding:.5rem 0}._meta-data-list__item_1ripo_5:not(:last-of-type){border-bottom:1px solid var(--new-color-grey-400)}._meta-data-list__term_1ripo_16{color:var(--new-color-grey-700)}._meta-data-list__description_1ripo_20{align-items:center;display:inline-flex;font-weight:var(--semibold);margin:0;text-align:right}

package/dist/assets/PageOverlay.css

@@ -1 +1 @@
-._page-overlay__container_1oudu_1{bottom:0;left:0;position:fixed;right:0;top:0;z-index:50}._page-overlay_1oudu_1{background:var(--new-color-uva-white);display:flex;flex-direction:column;height:100dvh}._page-overlay--full-screen_1oudu_19{width:100vw}._page-overlay--with-gutters_1oudu_23{max-width:87.5rem;width:100%}._page-overlay__content_1oudu_28{display:flex;flex-direction:column;height:100svh;justify-content:space-between;overflow:hidden;overflow-y:auto;padding:0 1.5rem;width:100%}._page-overlay__content--grey_1oudu_39{background-color:var(--new-color-grey-300)}._page-overlay__content--white_1oudu_43{background-color:var(--new-color-uva-white)}._page-overlay__children_1oudu_47{padding-bottom:1rem}._page-overlay__title-wrapper_1oudu_51{position:relative}._page-overlay__title_1oudu_51{font-size:var(--font-size-s);line-height:var(--line-height-m);margin:0 1.5rem 0 0;padding:1rem 1.5rem}._page-overlay__buttons-bar_1oudu_62{background-color:var(--new-color-uva-white);bottom:0;display:flex;flex-direction:column;gap:.75rem;justify-content:flex-start;margin:0 -1.5rem;padding:.5rem 1rem;position:sticky;right:0}._page-overlay__buttons-bar_1oudu_62:before{background:linear-gradient(to top,#0000004d,#0000);bottom:100%;content:"";height:10px;left:0;opacity:0;pointer-events:none;position:absolute;right:0;transition:opacity .4s ease-out}._page-overlay__buttons-bar--shadow_1oudu_88:before{opacity:1}._page-overlay__close_1oudu_94{height:1.5rem;position:absolute;right:1rem;top:calc(50% - .125rem);transform:translateY(-50%)}@media (min-width: 28rem) and (min-height: 28rem){._page-overlay--with-gutters_1oudu_23{margin:0 .75rem}}
+._page-overlay__container_x277a_1{bottom:0;left:0;position:fixed;right:0;top:0;z-index:50}._page-overlay_x277a_1{background:var(--new-color-uva-white);display:flex;flex-direction:column;height:100dvh}._page-overlay--full-screen_x277a_19{width:100vw}._page-overlay--with-gutters_x277a_23{max-width:87.5rem;width:100%}._page-overlay__content_x277a_28{display:flex;flex-direction:column;height:100svh;justify-content:space-between;overflow:hidden;overflow-y:auto;padding:0 1.5rem;width:100%}._page-overlay__content--grey_x277a_39{background-color:var(--new-color-grey-200)}._page-overlay__content--white_x277a_43{background-color:var(--new-color-uva-white)}._page-overlay__children_x277a_47{padding-bottom:1rem}._page-overlay__title-wrapper_x277a_51{position:relative}._page-overlay__title_x277a_51{font-size:var(--font-size-s);line-height:var(--line-height-m);margin:0 1.5rem 0 0;padding:1rem 1.5rem}._page-overlay__buttons-bar_x277a_62{background-color:var(--new-color-uva-white);bottom:0;display:flex;flex-direction:column;gap:.75rem;justify-content:flex-start;margin:0 -1.5rem;padding:.5rem 1rem;position:sticky;right:0}._page-overlay__buttons-bar_x277a_62:before{background:linear-gradient(to top,#0000004d,#0000);bottom:100%;content:"";height:10px;left:0;opacity:0;pointer-events:none;position:absolute;right:0;transition:opacity .4s ease-out}._page-overlay__buttons-bar--shadow_x277a_88:before{opacity:1}._page-overlay__close_x277a_94{height:1.5rem;position:absolute;right:1rem;top:calc(50% - .125rem);transform:translateY(-50%)}@media (min-width: 28rem) and (min-height: 28rem){._page-overlay--with-gutters_x277a_23{margin:0 .75rem}}

package/dist/assets/RadioButton.css

@@ -1 +1 @@
-._radio-button_175ij_1{align-items:center;display:grid;gap:0 .5rem;grid-template-columns:auto [label] 1fr}._radio-button_175ij_1 ._radio-button__input_175ij_8{cursor:pointer;margin-top:0}._radio-button__label_175ij_13{cursor:pointer;display:flex;flex-direction:column}._radio-button__description_175ij_19{color:var(--new-color-grey-700);grid-area:label;margin:0}._radio-button_175ij_1 ._radio-button__label_175ij_13{width:fit-content}._radio-button_175ij_1 :disabled+._radio-button__label_175ij_13{color:var(--new-color-grey-700);cursor:unset}._radio-button--gap-large_175ij_34{column-gap:1rem}
+._radio-button_1i4mp_1{align-items:center;display:grid;gap:0 .5rem;grid-template-columns:auto [label] 1fr}._radio-button__input_1i4mp_8{accent-color:var(--new-color-navy-600)}._radio-button_1i4mp_1 ._radio-button__input_1i4mp_8{cursor:pointer;margin-top:0}._radio-button__label_1i4mp_17{cursor:pointer;display:flex;flex-direction:column}._radio-button__description_1i4mp_23{color:var(--new-color-grey-700);grid-area:label;margin:0}._radio-button_1i4mp_1 ._radio-button__label_1i4mp_17{width:fit-content}._radio-button_1i4mp_1 :disabled+._radio-button__label_1i4mp_17{color:var(--new-color-grey-700);cursor:unset}._radio-button--gap-large_1i4mp_38{column-gap:1rem}

package/dist/assets/SelectListbox.css

@@ -1 +1 @@
-._select-listbox-container_10373_1{position:relative}._select-listbox__wrapper_10373_5{border-radius:.5rem;box-shadow:0 0 .25rem #00000040;height:auto;overflow:hidden;position:fixed;width:auto;z-index:20}._select-listbox-trigger_10373_15{align-items:center;background-color:var(--new-color-uva-white);border:1px solid var(--new-color-grey-500);border-radius:.5rem;cursor:pointer;display:flex;font:inherit;justify-content:space-between;line-height:inherit;overflow:hidden;padding:.4rem 2rem .4rem 1rem;width:100%}._select-listbox-trigger--default_10373_30{padding:.75rem 2rem .75rem 1rem}._select-listbox-trigger--small_10373_34{padding:.4rem 2rem .4rem 1rem}._select-listbox-trigger--medium_10373_38{height:2.75rem;padding:.5rem 2rem .5rem 1rem}._select-listbox-trigger-label_10373_43{min-height:.65rem;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:100%}._select-listbox__wrapper--align-right_10373_52{right:0}._select-listbox-trigger--bold_10373_56{font-weight:var(--semibold)}._select-listbox-trigger--pill_10373_60{border-radius:6.25rem;padding:.5rem 1.5rem}._select-listbox-trigger--pillLeft_10373_65{border-radius:6.25rem 0 0 6.25rem;padding-left:1.5rem}._select-listbox-trigger--pillRight_10373_70{border-radius:0 6.25rem 6.25rem 0;padding-right:1.25rem}._select-listbox-trigger--darkBorder_10373_75{border-color:var(--new-color-uva-black)}._select-listbox-trigger_10373_15:focus-visible{background-color:var(--new-color-grey-300);outline:1px solid var(--new-color-grey-700)}._select-listbox-trigger_10373_15:focus-visible,._select-listbox-trigger_10373_15:hover{background-color:var(--new-color-grey-300)}._select-listbox-trigger--noborder_10373_89{border:none}._select-listbox-trigger--pillLeft_10373_65+._select-listbox__wrapper_10373_5{left:1rem}._select-listbox-trigger--pillRight_10373_70+._select-listbox__wrapper--align-right_10373_52{right:1rem}._select-listbox-trigger-icon_10373_101{position:absolute;right:.875rem}._select-listbox-trigger-icon--open_10373_106{transform:rotate(180deg)}._select-listbox_10373_1{background-color:var(--new-color-uva-white);list-style:none;margin:0;min-width:100%;overflow-y:auto;padding:4px;width:fit-content}._select-listbox-option_10373_120{align-items:center;border-radius:.25rem;cursor:pointer;display:flex;justify-content:space-between;padding:.5rem .75rem;position:relative;-webkit-user-select:none;user-select:none}._select-listbox-option--active_10373_133,._select-listbox-option_10373_120:hover{background-color:var(--new-color-grey-300);box-shadow:0 0 0 1px var(--new-color-uva-white)}._select-listbox-option_10373_120[aria-selected=true]{font-weight:var(--semibold)}._select-listbox-divider_10373_143{background-color:var(--new-color-grey-400);height:1px;margin:1px -.25rem}
+._select-listbox-container_4xtnu_1{position:relative}._select-listbox__wrapper_4xtnu_5{border-radius:.5rem;box-shadow:0 0 .25rem #00000040;height:auto;overflow:hidden;position:fixed;width:auto;z-index:20}._select-listbox-trigger_4xtnu_15{align-items:center;background-color:var(--new-color-uva-white);border:1px solid var(--new-color-grey-400);border-radius:.5rem;cursor:pointer;display:flex;font:inherit;justify-content:space-between;line-height:inherit;overflow:hidden;padding:.4rem 2rem .4rem 1rem;width:100%}._select-listbox-trigger--default_4xtnu_30{padding:.75rem 2rem .75rem 1rem}._select-listbox-trigger--small_4xtnu_34{padding:.4rem 2rem .4rem 1rem}._select-listbox-trigger--medium_4xtnu_38{height:2.75rem;padding:.5rem 2rem .5rem 1rem}._select-listbox-trigger-label_4xtnu_43{min-height:.65rem;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:100%}._select-listbox__wrapper--align-right_4xtnu_52{right:0}._select-listbox-trigger--bold_4xtnu_56{font-weight:var(--semibold)}._select-listbox-trigger--pill_4xtnu_60{border-radius:6.25rem;padding:.5rem 1.5rem}._select-listbox-trigger--pillLeft_4xtnu_65{border-radius:6.25rem 0 0 6.25rem;padding-left:1.5rem}._select-listbox-trigger--pillRight_4xtnu_70{border-radius:0 6.25rem 6.25rem 0;padding-right:1.25rem}._select-listbox-trigger--darkBorder_4xtnu_75{border-color:var(--new-color-uva-black)}._select-listbox-trigger_4xtnu_15:focus-visible{background-color:var(--new-color-grey-300);outline:1px solid var(--new-color-grey-700)}._select-listbox-trigger_4xtnu_15:focus-visible,._select-listbox-trigger_4xtnu_15:hover{background-color:var(--new-color-grey-300)}._select-listbox-trigger--noborder_4xtnu_89{border:none}._select-listbox-trigger--pillLeft_4xtnu_65+._select-listbox__wrapper_4xtnu_5{left:1rem}._select-listbox-trigger--pillRight_4xtnu_70+._select-listbox__wrapper--align-right_4xtnu_52{right:1rem}._select-listbox-trigger-icon_4xtnu_101{position:absolute;right:.875rem}._select-listbox-trigger-icon--open_4xtnu_106{transform:rotate(180deg)}._select-listbox_4xtnu_1{background-color:var(--new-color-uva-white);list-style:none;margin:0;min-width:100%;overflow-y:auto;padding:4px;width:fit-content}._select-listbox-option_4xtnu_120{align-items:center;border-radius:.25rem;cursor:pointer;display:flex;justify-content:space-between;padding:.5rem .75rem;position:relative;-webkit-user-select:none;user-select:none}._select-listbox-option--active_4xtnu_133,._select-listbox-option_4xtnu_120:hover{background-color:var(--new-color-grey-300);box-shadow:0 0 0 1px var(--new-color-uva-white)}._select-listbox-option_4xtnu_120[aria-selected=true]{font-weight:var(--semibold)}._select-listbox-divider_4xtnu_143{background-color:var(--new-color-grey-400);height:1px;margin:1px -.25rem}

package/dist/components/CheckboxButtonBar/CheckboxButtonBar.d.ts

@@ -1,10 +1,11 @@
 type CheckboxProps = {
     label: string;
     value: string;
+    prefix?: string;
     disabled?: boolean;
 };
 export interface CheckboxButtonBarProps {
-    /** array with objects with label, value */
+    /** array with objects with label, value, prefix and disabled*/
     checkboxes: CheckboxProps[];
     defaultValues?: string[];
     label?: string;

package/dist/components/CheckboxButtonBar/CheckboxButtonBar.js

@@ -1,9 +1,9 @@
 import { jsxs as u, jsx as c } from "react/jsx-runtime";
-import { useState as C } from "react";
+import { useState as N } from "react";
 import { c as k } from "../../clsx-OuTLNxxd.js";
-import { Label as N } from "../Label/Label.js";
-import { FeedbackBox as g } from "../FeedbackBox/FeedbackBox.js";
-import { ControlsButton as S } from "../ControlsButton/ControlsButton.js";
+import { Label as g } from "../Label/Label.js";
+import { FeedbackBox as S } from "../FeedbackBox/FeedbackBox.js";
+import { ControlsButton as j } from "../ControlsButton/ControlsButton.js";
 import '../../assets/CheckboxButtonBar.css';const t = {
   "checkbox-button-bar__container": "_checkbox-button-bar__container_u7fv0_1",
   "checkbox-button-bar__container--label-left": "_checkbox-button-bar__container--label-left_u7fv0_6",
@@ -12,7 +12,7 @@ import '../../assets/CheckboxButtonBar.css';const t = {
   "checkbox-button-bar__row": "_checkbox-button-bar__row_u7fv0_18",
   "checkbox-button-bar__row--not-validated": "_checkbox-button-bar__row--not-validated_u7fv0_35",
   "checkbox-button-bar__footer": "_checkbox-button-bar__footer_u7fv0_39"
-}, z = ({
+}, B = ({
   checkboxes: x,
   defaultValues: r,
   label: a,
@@ -25,7 +25,7 @@ import '../../assets/CheckboxButtonBar.css';const t = {
   disableGroup: p = !1,
   onSetValues: i
 }) => {
-  const [h, s] = C(
+  const [h, s] = N(
     r && !n ? r.map(String) : r && n ? r.slice(0, 1) : []
   ), v = (e) => {
     let o = h;
@@ -39,7 +39,7 @@ import '../../assets/CheckboxButtonBar.css';const t = {
         t[`checkbox-button-bar__container--label-${f}`]
       ),
       children: [
-        a && /* @__PURE__ */ c(N, { htmlFor: "", required: m, children: a }),
+        a && /* @__PURE__ */ c(g, { htmlFor: "", required: m, children: a }),
         /* @__PURE__ */ u("div", { className: t["checkbox-button-bar__row-container"], children: [
           /* @__PURE__ */ c(
             "div",
@@ -47,29 +47,30 @@ import '../../assets/CheckboxButtonBar.css';const t = {
               className: k(t["checkbox-button-bar__row"], {
                 [t["checkbox-button-bar__row--not-validated"]]: d || b
               }),
-              children: x.map(({ label: e, value: o, disabled: _ }) => /* @__PURE__ */ c(
-                S,
+              children: x.map(({ label: e, value: o, prefix: _, disabled: w }) => /* @__PURE__ */ c(
+                j,
                 {
                   type: "checkbox",
                   label: e,
+                  prefix: _,
                   forceSquared: !0,
                   value: o,
                   checked: h.includes(o),
-                  disabled: _ || p,
-                  onSetValue: (w) => v(w.target.value)
+                  disabled: w || p,
+                  onSetValue: (C) => v(C.target.value)
                 },
                 `${o}`
               ))
             }
           ),
           l && /* @__PURE__ */ c("div", { className: t["checkbox-button-bar__footer"], children: l }),
-          b !== "" && /* @__PURE__ */ c(g, { level: "error", feedback: b })
+          b !== "" && /* @__PURE__ */ c(S, { level: "error", feedback: b })
         ] })
       ]
     }
   );
 };
 export {
-  z as CheckboxButtonBar
+  B as CheckboxButtonBar
 };
 //# sourceMappingURL=CheckboxButtonBar.js.map

package/dist/components/CheckboxButtonBar/CheckboxButtonBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxButtonBar.js","sources":["../../../src/components/CheckboxButtonBar/CheckboxButtonBar.tsx"],"sourcesContent":["import { useState } from 'react';\nimport clsx from 'clsx';\n\nimport styles from './CheckboxButtonBar.module.css';\n\nimport { Label } from 'components/Label';\nimport { FeedbackBox } from 'components/FeedbackBox';\nimport { ControlsButton } from 'components/ControlsButton';\n\ntype CheckboxProps = {\n  label: string;\n  value: string;\n  disabled?: boolean;\n};\n\nexport interface CheckboxButtonBarProps {\n  /** array with objects with label, value */\n  checkboxes: CheckboxProps[];\n  //** array with value(s) */\n  defaultValues?: string[];\n  label?: string;\n  /** 'top' | 'left' */\n  labelPosition?: 'top' | 'left';\n  /** `true` to show an asterisk to indicate an item is required; otherwise, `false`. */\n  required?: boolean;\n  /** `true` to color border red to show missing in validation; otherwise, `false`. */\n  notValidated?: boolean;\n  /** error text to display under the bar */\n  notValidatedText?: string;\n  /** returns an array with only one value */\n  actAsRadioButtonBar?: boolean;\n  /** optional footer text */\n  footerText?: string;\n  /** disables all checkboxes in the bar */\n  disableGroup?: boolean;\n  onSetValues: (value: string[]) => void;\n}\n\nexport const CheckboxButtonBar = ({\n  checkboxes,\n  defaultValues,\n  label,\n  labelPosition = 'top',\n  required = false,\n  notValidated = false,\n  notValidatedText = '',\n  actAsRadioButtonBar = false,\n  footerText = '',\n  disableGroup = false,\n  onSetValues,\n}: CheckboxButtonBarProps) => {\n  const [currentValues, setCurrentValues] = useState<string[]>(\n    defaultValues && !actAsRadioButtonBar\n      ? defaultValues.map(String)\n      : defaultValues && actAsRadioButtonBar\n        ? defaultValues.slice(0, 1)\n        : []\n  );\n\n  const handleChange = (value: string) => {\n    let values = currentValues;\n\n    if (actAsRadioButtonBar) {\n      setCurrentValues([value]);\n      onSetValues([value]);\n    } else {\n      if (values.includes(value)) {\n        values = values.filter((val) => val !== value);\n      } else {\n        values = [...values, value];\n      }\n      setCurrentValues(values);\n      onSetValues(values);\n    }\n  };\n\n  return (\n    <div\n      className={clsx(\n        styles['checkbox-button-bar__container'],\n        styles[`checkbox-button-bar__container--label-${labelPosition}`]\n      )}\n    >\n      {label && (\n        <Label htmlFor=\"\" required={required}>\n          {label}\n        </Label>\n      )}\n      <div className={styles['checkbox-button-bar__row-container']}>\n        <div\n          className={clsx(styles['checkbox-button-bar__row'], {\n            [styles['checkbox-button-bar__row--not-validated']]: notValidated || notValidatedText,\n          })}\n        >\n          {checkboxes.map(({ label, value, disabled }) => (\n            <ControlsButton\n              type=\"checkbox\"\n              key={`${value}`}\n              label={label}\n              forceSquared={true}\n              value={value}\n              checked={currentValues.includes(value)}\n              disabled={disabled || disableGroup}\n              onSetValue={(event) => handleChange(event.target.value)}\n            />\n          ))}\n        </div>\n        {footerText && <div className={styles['checkbox-button-bar__footer']}>{footerText}</div>}\n        {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n      </div>\n    </div>\n  );\n};\n"],"names":["CheckboxButtonBar","checkboxes","defaultValues","label","labelPosition","required","notValidated","notValidatedText","actAsRadioButtonBar","footerText","disableGroup","onSetValues","currentValues","setCurrentValues","useState","handleChange","value","values","val","jsxs","clsx","styles","jsx","Label","disabled","ControlsButton","event","FeedbackBox"],"mappings":";;;;;;;;;;;;;;GAsCaA,IAAoB,CAAC;AAAA,EAChC,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,UAAAC,IAAW;AAAA,EACX,cAAAC,IAAe;AAAA,EACf,kBAAAC,IAAmB;AAAA,EACnB,qBAAAC,IAAsB;AAAA,EACtB,YAAAC,IAAa;AAAA,EACb,cAAAC,IAAe;AAAA,EACf,aAAAC;AACF,MAA8B;AACtB,QAAA,CAACC,GAAeC,CAAgB,IAAIC;AAAA,IACxCZ,KAAiB,CAACM,IACdN,EAAc,IAAI,MAAM,IACxBA,KAAiBM,IACfN,EAAc,MAAM,GAAG,CAAC,IACxB,CAAA;AAAA,EACR,GAEMa,IAAe,CAACC,MAAkB;AACtC,QAAIC,IAASL;AAEb,IAAIJ,KACeK,EAAA,CAACG,CAAK,CAAC,GACZL,EAAA,CAACK,CAAK,CAAC,MAEfC,EAAO,SAASD,CAAK,IACvBC,IAASA,EAAO,OAAO,CAACC,MAAQA,MAAQF,CAAK,IAEpCC,IAAA,CAAC,GAAGA,GAAQD,CAAK,GAE5BH,EAAiBI,CAAM,GACvBN,EAAYM,CAAM;AAAA,EAEtB;AAGE,SAAA,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTC,EAAO,gCAAgC;AAAA,QACvCA,EAAO,yCAAyCjB,CAAa,EAAE;AAAA,MACjE;AAAA,MAEC,UAAA;AAAA,QAAAD,KACE,gBAAAmB,EAAAC,GAAA,EAAM,SAAQ,IAAG,UAAAlB,GACf,UACHF,GAAA;AAAA,QAED,gBAAAgB,EAAA,OAAA,EAAI,WAAWE,EAAO,oCAAoC,GACzD,UAAA;AAAA,UAAA,gBAAAC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWF,EAAKC,EAAO,0BAA0B,GAAG;AAAA,gBAClD,CAACA,EAAO,yCAAyC,CAAC,GAAGf,KAAgBC;AAAA,cAAA,CACtE;AAAA,cAEA,UAAAN,EAAW,IAAI,CAAC,EAAE,OAAAE,GAAO,OAAAa,GAAO,UAAAQ,QAC/B,gBAAAF;AAAA,gBAACG;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBAEL,OAAOtB;AAAAA,kBACP,cAAc;AAAA,kBACd,OAAAa;AAAA,kBACA,SAASJ,EAAc,SAASI,CAAK;AAAA,kBACrC,UAAUQ,KAAYd;AAAA,kBACtB,YAAY,CAACgB,MAAUX,EAAaW,EAAM,OAAO,KAAK;AAAA,gBAAA;AAAA,gBANjD,GAAGV,CAAK;AAAA,cAQhB,CAAA;AAAA,YAAA;AAAA,UACH;AAAA,UACCP,KAAe,gBAAAa,EAAA,OAAA,EAAI,WAAWD,EAAO,6BAA6B,GAAI,UAAWZ,GAAA;AAAA,UACjFF,MAAqB,MAAM,gBAAAe,EAACK,KAAY,OAAM,SAAQ,UAAUpB,EAAkB,CAAA;AAAA,QAAA,EACrF,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"CheckboxButtonBar.js","sources":["../../../src/components/CheckboxButtonBar/CheckboxButtonBar.tsx"],"sourcesContent":["import { useState } from 'react';\nimport clsx from 'clsx';\n\nimport styles from './CheckboxButtonBar.module.css';\n\nimport { Label } from 'components/Label';\nimport { FeedbackBox } from 'components/FeedbackBox';\nimport { ControlsButton } from 'components/ControlsButton';\n\ntype CheckboxProps = {\n  label: string;\n  value: string;\n  prefix?: string;\n  disabled?: boolean;\n};\n\nexport interface CheckboxButtonBarProps {\n  /** array with objects with label, value, prefix and disabled*/\n  checkboxes: CheckboxProps[];\n  //** array with value(s) */\n  defaultValues?: string[];\n  label?: string;\n  /** 'top' | 'left' */\n  labelPosition?: 'top' | 'left';\n  /** `true` to show an asterisk to indicate an item is required; otherwise, `false`. */\n  required?: boolean;\n  /** `true` to color border red to show missing in validation; otherwise, `false`. */\n  notValidated?: boolean;\n  /** error text to display under the bar */\n  notValidatedText?: string;\n  /** returns an array with only one value */\n  actAsRadioButtonBar?: boolean;\n  /** optional footer text */\n  footerText?: string;\n  /** disables all checkboxes in the bar */\n  disableGroup?: boolean;\n  onSetValues: (value: string[]) => void;\n}\n\nexport const CheckboxButtonBar = ({\n  checkboxes,\n  defaultValues,\n  label,\n  labelPosition = 'top',\n  required = false,\n  notValidated = false,\n  notValidatedText = '',\n  actAsRadioButtonBar = false,\n  footerText = '',\n  disableGroup = false,\n  onSetValues,\n}: CheckboxButtonBarProps) => {\n  const [currentValues, setCurrentValues] = useState<string[]>(\n    defaultValues && !actAsRadioButtonBar\n      ? defaultValues.map(String)\n      : defaultValues && actAsRadioButtonBar\n        ? defaultValues.slice(0, 1)\n        : []\n  );\n\n  const handleChange = (value: string) => {\n    let values = currentValues;\n\n    if (actAsRadioButtonBar) {\n      setCurrentValues([value]);\n      onSetValues([value]);\n    } else {\n      if (values.includes(value)) {\n        values = values.filter((val) => val !== value);\n      } else {\n        values = [...values, value];\n      }\n      setCurrentValues(values);\n      onSetValues(values);\n    }\n  };\n\n  return (\n    <div\n      className={clsx(\n        styles['checkbox-button-bar__container'],\n        styles[`checkbox-button-bar__container--label-${labelPosition}`]\n      )}\n    >\n      {label && (\n        <Label htmlFor=\"\" required={required}>\n          {label}\n        </Label>\n      )}\n      <div className={styles['checkbox-button-bar__row-container']}>\n        <div\n          className={clsx(styles['checkbox-button-bar__row'], {\n            [styles['checkbox-button-bar__row--not-validated']]: notValidated || notValidatedText,\n          })}\n        >\n          {checkboxes.map(({ label, value, prefix, disabled }) => (\n            <ControlsButton\n              key={`${value}`}\n              type=\"checkbox\"\n              label={label}\n              prefix={prefix}\n              forceSquared={true}\n              value={value}\n              checked={currentValues.includes(value)}\n              disabled={disabled || disableGroup}\n              onSetValue={(event) => handleChange(event.target.value)}\n            />\n          ))}\n        </div>\n        {footerText && <div className={styles['checkbox-button-bar__footer']}>{footerText}</div>}\n        {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n      </div>\n    </div>\n  );\n};\n"],"names":["CheckboxButtonBar","checkboxes","defaultValues","label","labelPosition","required","notValidated","notValidatedText","actAsRadioButtonBar","footerText","disableGroup","onSetValues","currentValues","setCurrentValues","useState","handleChange","value","values","val","jsxs","clsx","styles","jsx","Label","prefix","disabled","ControlsButton","event","FeedbackBox"],"mappings":";;;;;;;;;;;;;;GAuCaA,IAAoB,CAAC;AAAA,EAChC,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,UAAAC,IAAW;AAAA,EACX,cAAAC,IAAe;AAAA,EACf,kBAAAC,IAAmB;AAAA,EACnB,qBAAAC,IAAsB;AAAA,EACtB,YAAAC,IAAa;AAAA,EACb,cAAAC,IAAe;AAAA,EACf,aAAAC;AACF,MAA8B;AACtB,QAAA,CAACC,GAAeC,CAAgB,IAAIC;AAAA,IACxCZ,KAAiB,CAACM,IACdN,EAAc,IAAI,MAAM,IACxBA,KAAiBM,IACfN,EAAc,MAAM,GAAG,CAAC,IACxB,CAAA;AAAA,EACR,GAEMa,IAAe,CAACC,MAAkB;AACtC,QAAIC,IAASL;AAEb,IAAIJ,KACeK,EAAA,CAACG,CAAK,CAAC,GACZL,EAAA,CAACK,CAAK,CAAC,MAEfC,EAAO,SAASD,CAAK,IACvBC,IAASA,EAAO,OAAO,CAACC,MAAQA,MAAQF,CAAK,IAEpCC,IAAA,CAAC,GAAGA,GAAQD,CAAK,GAE5BH,EAAiBI,CAAM,GACvBN,EAAYM,CAAM;AAAA,EAEtB;AAGE,SAAA,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTC,EAAO,gCAAgC;AAAA,QACvCA,EAAO,yCAAyCjB,CAAa,EAAE;AAAA,MACjE;AAAA,MAEC,UAAA;AAAA,QAAAD,KACE,gBAAAmB,EAAAC,GAAA,EAAM,SAAQ,IAAG,UAAAlB,GACf,UACHF,GAAA;AAAA,QAED,gBAAAgB,EAAA,OAAA,EAAI,WAAWE,EAAO,oCAAoC,GACzD,UAAA;AAAA,UAAA,gBAAAC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWF,EAAKC,EAAO,0BAA0B,GAAG;AAAA,gBAClD,CAACA,EAAO,yCAAyC,CAAC,GAAGf,KAAgBC;AAAA,cAAA,CACtE;AAAA,cAEA,UAAAN,EAAW,IAAI,CAAC,EAAE,OAAAE,GAAO,OAAAa,GAAO,QAAAQ,GAAQ,UAAAC,EAAA,MACvC,gBAAAH;AAAA,gBAACI;AAAA,gBAAA;AAAA,kBAEC,MAAK;AAAA,kBACL,OAAOvB;AAAAA,kBACP,QAAAqB;AAAA,kBACA,cAAc;AAAA,kBACd,OAAAR;AAAA,kBACA,SAASJ,EAAc,SAASI,CAAK;AAAA,kBACrC,UAAUS,KAAYf;AAAA,kBACtB,YAAY,CAACiB,MAAUZ,EAAaY,EAAM,OAAO,KAAK;AAAA,gBAAA;AAAA,gBARjD,GAAGX,CAAK;AAAA,cAUhB,CAAA;AAAA,YAAA;AAAA,UACH;AAAA,UACCP,KAAe,gBAAAa,EAAA,OAAA,EAAI,WAAWD,EAAO,6BAA6B,GAAI,UAAWZ,GAAA;AAAA,UACjFF,MAAqB,MAAM,gBAAAe,EAACM,KAAY,OAAM,SAAQ,UAAUrB,EAAkB,CAAA;AAAA,QAAA,EACrF,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}

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

@@ -4,3 +4,4 @@ declare const _default: Meta<CheckboxButtonBarProps>;
 export default _default;
 export declare const CheckboxButtonBarExample: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, CheckboxButtonBarProps>;
 export declare const CheckboxButtonBarAsRadioButtonBar: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, CheckboxButtonBarProps>;
+export declare const CheckboxButtonBarWithPrefix: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, CheckboxButtonBarProps>;

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

@@ -1,7 +1,7 @@
 import { jsx as t } from "react/jsx-runtime";
 import { fn as l } from "../../index-Dwqes6RH.js";
 import { CheckboxButtonBar as e } from "./CheckboxButtonBar.js";
-const r = "<CheckboxButtonBar checkboxes={} defaultValues={} label={} labelPosition={} required={} notValidatedText={} disableGroup={} onSetValues={} />", c = {
+const r = "<CheckboxButtonBar checkboxes={} defaultValues={} label={} labelPosition={} required={} notValidatedText={} disableGroup={} onSetValues={} />", d = {
   title: "Molecules/CheckboxButtonBar",
   component: e,
   argTypes: {
@@ -44,8 +44,8 @@ const r = "<CheckboxButtonBar checkboxes={} defaultValues={} label={} labelPosit
     inspectComponent: e,
     codeString: r
   }
-}, o = (a) => /* @__PURE__ */ t(e, { ...a }), n = o.bind({});
-n.args = {
+}, a = (o) => /* @__PURE__ */ t(e, { ...o }), u = a.bind({});
+u.args = {
   label: "Periode",
   required: !0,
   checkboxes: [
@@ -79,8 +79,8 @@ n.args = {
   footerText: "Weken in periode 2",
   onSetValues: l()
 };
-const u = o.bind({});
-u.args = {
+const b = a.bind({});
+b.args = {
   label: "Weken",
   required: !0,
   checkboxes: [
@@ -114,9 +114,51 @@ u.args = {
   actAsRadioButtonBar: !0,
   onSetValues: l()
 };
+const n = a.bind({});
+n.args = {
+  label: "Weken",
+  required: !0,
+  checkboxes: [
+    {
+      label: "1",
+      value: "1",
+      prefix: "13"
+    },
+    {
+      label: "2",
+      value: "2",
+      prefix: "14"
+    },
+    {
+      label: "3",
+      value: "3",
+      prefix: "15"
+    },
+    {
+      label: "4",
+      value: "4",
+      prefix: "16"
+    },
+    {
+      label: "5",
+      value: "5",
+      prefix: "17"
+    },
+    {
+      label: "6",
+      value: "6",
+      prefix: "18"
+    }
+  ],
+  defaultValues: ["1"],
+  labelPosition: "top",
+  actAsRadioButtonBar: !1,
+  onSetValues: l()
+};
 export {
-  u as CheckboxButtonBarAsRadioButtonBar,
-  n as CheckboxButtonBarExample,
-  c as default
+  b as CheckboxButtonBarAsRadioButtonBar,
+  u as CheckboxButtonBarExample,
+  n as CheckboxButtonBarWithPrefix,
+  d as default
 };
 //# sourceMappingURL=CheckboxButtonBar.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxButtonBar.stories.js","sources":["../../../src/components/CheckboxButtonBar/CheckboxButtonBar.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { CheckboxButtonBarProps } from './CheckboxButtonBar';\n\nimport { CheckboxButtonBar } from './CheckboxButtonBar';\n\nconst codeString =\n  '<CheckboxButtonBar checkboxes={} defaultValues={} label={} labelPosition={} required={} notValidatedText={} disableGroup={} onSetValues={} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Molecules/CheckboxButtonBar',\n  component: CheckboxButtonBar,\n  argTypes: {\n    checkboxes: {\n      table: {\n        disable: true,\n      },\n    },\n    defaultValues: {\n      table: {\n        disable: true,\n      },\n    },\n    label: {\n      control: 'text',\n    },\n    labelPosition: {\n      control: 'radio',\n      options: ['top', 'left'],\n    },\n    required: {\n      control: 'boolean',\n    },\n    notValidatedText: {\n      control: 'text',\n    },\n    disableGroup: {\n      control: 'boolean',\n    },\n    actAsRadioButtonBar: {\n      control: 'boolean',\n    },\n    onSetValues: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    inspectComponent: CheckboxButtonBar,\n    codeString: codeString,\n  },\n} as Meta<CheckboxButtonBarProps>;\n\nconst Template: StoryFn<CheckboxButtonBarProps> = (args) => <CheckboxButtonBar {...args} />;\n\nexport const CheckboxButtonBarExample = Template.bind({});\nCheckboxButtonBarExample.args = {\n  label: 'Periode',\n  required: true,\n  checkboxes: [\n    {\n      label: '1.1',\n      value: '1',\n    },\n    {\n      label: '1.2',\n      value: '2',\n    },\n    {\n      label: '1.3',\n      value: '3',\n    },\n    {\n      label: '4',\n      value: '4',\n    },\n    {\n      label: '5',\n      value: '5',\n    },\n    {\n      label: '6',\n      value: '6',\n    },\n  ],\n  defaultValues: ['1', '2'],\n  labelPosition: 'top',\n  footerText: 'Weken in periode 2',\n  onSetValues: fn(),\n};\n\nexport const CheckboxButtonBarAsRadioButtonBar = Template.bind({});\nCheckboxButtonBarAsRadioButtonBar.args = {\n  label: 'Weken',\n  required: true,\n  checkboxes: [\n    {\n      label: '1',\n      value: '1',\n    },\n    {\n      label: '2',\n      value: '2',\n    },\n    {\n      label: '3',\n      value: '3',\n    },\n    {\n      label: '4',\n      value: '4',\n    },\n    {\n      label: '5',\n      value: '5',\n    },\n    {\n      label: '6',\n      value: '6',\n    },\n  ],\n  defaultValues: ['1'],\n  labelPosition: 'top',\n  actAsRadioButtonBar: true,\n  onSetValues: fn(),\n};\n"],"names":["codeString","CheckboxButtonBar_stories","CheckboxButtonBar","Template","args","jsx","CheckboxButtonBarExample","fn","CheckboxButtonBarAsRadioButtonBar"],"mappings":";;;AAOA,MAAMA,IACJ,iJAGaC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,YAAY;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IAEb;AAAA,IACA,eAAe;AAAA,MACb,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IAEb;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,MACT,SAAS,CAAC,OAAO,MAAM;AAAA,IACzB;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,IACX;AAAA,IACA,kBAAkB;AAAA,MAChB,SAAS;AAAA,IACX;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,IACX;AAAA,IACA,qBAAqB;AAAA,MACnB,SAAS;AAAA,IACX;AAAA,IACA,aAAa;AAAA,MACX,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EAEJ;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAA4C,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAmB,GAAGE,GAAM,GAE5EE,IAA2BH,EAAS,KAAK,CAAE,CAAA;AACxDG,EAAyB,OAAO;AAAA,EAC9B,OAAO;AAAA,EACP,UAAU;AAAA,EACV,YAAY;AAAA,IACV;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,EAEX;AAAA,EACA,eAAe,CAAC,KAAK,GAAG;AAAA,EACxB,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,aAAaC,EAAG;AAClB;AAEO,MAAMC,IAAoCL,EAAS,KAAK,CAAE,CAAA;AACjEK,EAAkC,OAAO;AAAA,EACvC,OAAO;AAAA,EACP,UAAU;AAAA,EACV,YAAY;AAAA,IACV;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,EAEX;AAAA,EACA,eAAe,CAAC,GAAG;AAAA,EACnB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,aAAaD,EAAG;AAClB;"}
+{"version":3,"file":"CheckboxButtonBar.stories.js","sources":["../../../src/components/CheckboxButtonBar/CheckboxButtonBar.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { CheckboxButtonBarProps } from './CheckboxButtonBar';\n\nimport { CheckboxButtonBar } from './CheckboxButtonBar';\n\nconst codeString =\n  '<CheckboxButtonBar checkboxes={} defaultValues={} label={} labelPosition={} required={} notValidatedText={} disableGroup={} onSetValues={} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Molecules/CheckboxButtonBar',\n  component: CheckboxButtonBar,\n  argTypes: {\n    checkboxes: {\n      table: {\n        disable: true,\n      },\n    },\n    defaultValues: {\n      table: {\n        disable: true,\n      },\n    },\n    label: {\n      control: 'text',\n    },\n    labelPosition: {\n      control: 'radio',\n      options: ['top', 'left'],\n    },\n    required: {\n      control: 'boolean',\n    },\n    notValidatedText: {\n      control: 'text',\n    },\n    disableGroup: {\n      control: 'boolean',\n    },\n    actAsRadioButtonBar: {\n      control: 'boolean',\n    },\n    onSetValues: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    inspectComponent: CheckboxButtonBar,\n    codeString: codeString,\n  },\n} as Meta<CheckboxButtonBarProps>;\n\nconst Template: StoryFn<CheckboxButtonBarProps> = (args) => <CheckboxButtonBar {...args} />;\n\nexport const CheckboxButtonBarExample = Template.bind({});\nCheckboxButtonBarExample.args = {\n  label: 'Periode',\n  required: true,\n  checkboxes: [\n    {\n      label: '1.1',\n      value: '1',\n    },\n    {\n      label: '1.2',\n      value: '2',\n    },\n    {\n      label: '1.3',\n      value: '3',\n    },\n    {\n      label: '4',\n      value: '4',\n    },\n    {\n      label: '5',\n      value: '5',\n    },\n    {\n      label: '6',\n      value: '6',\n    },\n  ],\n  defaultValues: ['1', '2'],\n  labelPosition: 'top',\n  footerText: 'Weken in periode 2',\n  onSetValues: fn(),\n};\n\nexport const CheckboxButtonBarAsRadioButtonBar = Template.bind({});\nCheckboxButtonBarAsRadioButtonBar.args = {\n  label: 'Weken',\n  required: true,\n  checkboxes: [\n    {\n      label: '1',\n      value: '1',\n    },\n    {\n      label: '2',\n      value: '2',\n    },\n    {\n      label: '3',\n      value: '3',\n    },\n    {\n      label: '4',\n      value: '4',\n    },\n    {\n      label: '5',\n      value: '5',\n    },\n    {\n      label: '6',\n      value: '6',\n    },\n  ],\n  defaultValues: ['1'],\n  labelPosition: 'top',\n  actAsRadioButtonBar: true,\n  onSetValues: fn(),\n};\n\nexport const CheckboxButtonBarWithPrefix = Template.bind({});\nCheckboxButtonBarWithPrefix.args = {\n  label: 'Weken',\n  required: true,\n  checkboxes: [\n    {\n      label: '1',\n      value: '1',\n      prefix: '13',\n    },\n    {\n      label: '2',\n      value: '2',\n      prefix: '14',\n    },\n    {\n      label: '3',\n      value: '3',\n      prefix: '15',\n    },\n    {\n      label: '4',\n      value: '4',\n      prefix: '16',\n    },\n    {\n      label: '5',\n      value: '5',\n      prefix: '17',\n    },\n    {\n      label: '6',\n      value: '6',\n      prefix: '18',\n    },\n  ],\n  defaultValues: ['1'],\n  labelPosition: 'top',\n  actAsRadioButtonBar: false,\n  onSetValues: fn(),\n};\n"],"names":["codeString","CheckboxButtonBar_stories","CheckboxButtonBar","Template","args","jsx","CheckboxButtonBarExample","fn","CheckboxButtonBarAsRadioButtonBar","CheckboxButtonBarWithPrefix"],"mappings":";;;AAOA,MAAMA,IACJ,iJAGaC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,YAAY;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IAEb;AAAA,IACA,eAAe;AAAA,MACb,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IAEb;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,MACT,SAAS,CAAC,OAAO,MAAM;AAAA,IACzB;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,IACX;AAAA,IACA,kBAAkB;AAAA,MAChB,SAAS;AAAA,IACX;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,IACX;AAAA,IACA,qBAAqB;AAAA,MACnB,SAAS;AAAA,IACX;AAAA,IACA,aAAa;AAAA,MACX,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EAEJ;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAA4C,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAmB,GAAGE,GAAM,GAE5EE,IAA2BH,EAAS,KAAK,CAAE,CAAA;AACxDG,EAAyB,OAAO;AAAA,EAC9B,OAAO;AAAA,EACP,UAAU;AAAA,EACV,YAAY;AAAA,IACV;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,EAEX;AAAA,EACA,eAAe,CAAC,KAAK,GAAG;AAAA,EACxB,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,aAAaC,EAAG;AAClB;AAEO,MAAMC,IAAoCL,EAAS,KAAK,CAAE,CAAA;AACjEK,EAAkC,OAAO;AAAA,EACvC,OAAO;AAAA,EACP,UAAU;AAAA,EACV,YAAY;AAAA,IACV;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,EAEX;AAAA,EACA,eAAe,CAAC,GAAG;AAAA,EACnB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,aAAaD,EAAG;AAClB;AAEO,MAAME,IAA8BN,EAAS,KAAK,CAAE,CAAA;AAC3DM,EAA4B,OAAO;AAAA,EACjC,OAAO;AAAA,EACP,UAAU;AAAA,EACV,YAAY;AAAA,IACV;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,eAAe,CAAC,GAAG;AAAA,EACnB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,aAAaF,EAAG;AAClB;"}

package/dist/components/ControlsButton/ControlsButton.d.ts

@@ -4,6 +4,7 @@ export interface ControlsButtonProps {
     type?: 'radio' | 'checkbox';
     label: string;
     value: string;
+    prefix?: string;
     /** set if used as radiogroup */
     name?: string;
     /** `true` to set squared button; otherwise, `false`. The default is `false`. */
@@ -15,4 +16,4 @@ export interface ControlsButtonProps {
     /** The callback function that is invoked when the radio button changes value. */
     onSetValue: (event: ChangeEvent<HTMLInputElement>) => void;
 }
-export declare const ControlsButton: ({ type, label, value, name, forceSquared, checked, disabled, onSetValue, }: ControlsButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ControlsButton: ({ type, label, value, prefix, name, forceSquared, checked, disabled, onSetValue, }: ControlsButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ControlsButton/ControlsButton.js

@@ -1,46 +1,56 @@
-import { jsxs as m, Fragment as p, jsx as r } from "react/jsx-runtime";
-import { useId as b } from "react";
-import { c as d } from "../../clsx-OuTLNxxd.js";
+import { jsxs as _, Fragment as b, jsx as r } from "react/jsx-runtime";
+import { useId as m } from "react";
+import { c as h } from "../../clsx-OuTLNxxd.js";
 import '../../assets/ControlsButton.css';const t = {
-  "controls-button": "_controls-button_105b3_1",
-  "controls-button--squared": "_controls-button--squared_105b3_17",
-  "controls-input": "_controls-input_105b3_21"
-}, g = ({
-  type: c = "checkbox",
+  "controls-button": "_controls-button_1jd0n_1",
+  "controls-button--squared": "_controls-button--squared_1jd0n_17",
+  "controls-input": "_controls-input_1jd0n_21",
+  "controls-button--with-prefix": "_controls-button--with-prefix_1jd0n_60",
+  "controls-button__wrapper": "_controls-button__wrapper_1jd0n_66",
+  "controls-button__prefix": "_controls-button__prefix_1jd0n_72"
+}, w = ({
+  type: e = "checkbox",
   label: o,
-  value: e,
+  value: l,
+  prefix: n,
   name: s,
-  forceSquared: l = !1,
-  checked: u,
-  disabled: i,
+  forceSquared: u = !1,
+  checked: i,
+  disabled: p,
   onSetValue: a
 }) => {
-  const n = b();
-  return /* @__PURE__ */ m(p, { children: [
+  const c = m();
+  return /* @__PURE__ */ _(b, { children: [
     /* @__PURE__ */ r(
       "input",
       {
-        type: c,
-        id: `${n}${o.replace(/\s+/g, "_")}`,
+        type: e,
+        id: `${c}${o.replace(/\s+/g, "_")}`,
         name: s || o.replace(/\s+/g, "_"),
-        disabled: i,
-        value: e,
-        checked: u,
-        onChange: (_) => a(_),
+        disabled: p,
+        value: l,
+        checked: i,
+        onChange: (d) => a(d),
         className: t["controls-input"]
       }
     ),
     /* @__PURE__ */ r(
       "label",
       {
-        htmlFor: `${n}${o}`,
-        className: d(t["controls-button"], [l && t["controls-button--squared"]]),
-        children: o
+        htmlFor: `${c}${o.replace(/\s+/g, "_")}`,
+        className: h(t["controls-button"], [
+          u && t["controls-button--squared"],
+          n && t["controls-button--with-prefix"]
+        ]),
+        children: /* @__PURE__ */ _("div", { className: t["controls-button__wrapper"], children: [
+          n && /* @__PURE__ */ r("div", { className: t["controls-button__prefix"], children: n }),
+          o
+        ] })
       }
     )
   ] });
 };
 export {
-  g as ControlsButton
+  w as ControlsButton
 };
 //# sourceMappingURL=ControlsButton.js.map

package/dist/components/ControlsButton/ControlsButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ControlsButton.js","sources":["../../../src/components/ControlsButton/ControlsButton.tsx"],"sourcesContent":["import { useId } from 'react';\r\nimport clsx from 'clsx';\r\n\r\nimport type { ChangeEvent } from 'react';\r\n\r\nimport styles from './ControlsButton.module.css';\r\n\r\nexport interface ControlsButtonProps {\r\n  /** to set type/behaviour of input radio or checkbox */\r\n  type?: 'radio' | 'checkbox';\r\n  label: string;\r\n  value: string;\r\n  /** set if used as radiogroup */\r\n  name?: string;\r\n  /** `true` to set squared button; otherwise, `false`. The default is `false`. */\r\n  forceSquared?: boolean;\r\n  /** to set default status */\r\n  checked?: boolean;\r\n  /** `true` to disable the button; otherwise, `false`. The default is `false`. */\r\n  disabled?: boolean;\r\n  /** The callback function that is invoked when the radio button changes value. */\r\n  onSetValue: (event: ChangeEvent<HTMLInputElement>) => void;\r\n}\r\n\r\nexport const ControlsButton = ({\r\n  type = 'checkbox',\r\n  label,\r\n  value,\r\n  name,\r\n  forceSquared = false,\r\n  checked,\r\n  disabled,\r\n  onSetValue,\r\n}: ControlsButtonProps) => {\r\n  const idPrefix = useId();\r\n\r\n  return (\r\n    <>\r\n      <input\r\n        type={type}\r\n        id={`${idPrefix}${label.replace(/\\s+/g, '_')}`}\r\n        name={name ? name : label.replace(/\\s+/g, '_')}\r\n        disabled={disabled}\r\n        value={value}\r\n        checked={checked}\r\n        onChange={(event) => onSetValue(event)}\r\n        className={styles['controls-input']}\r\n      />\r\n      <label\r\n        htmlFor={`${idPrefix}${label}`}\r\n        className={clsx(styles['controls-button'], [forceSquared && styles['controls-button--squared']])}\r\n      >\r\n        {label}\r\n      </label>\r\n    </>\r\n  );\r\n};\r\n"],"names":["ControlsButton","type","label","value","name","forceSquared","checked","disabled","onSetValue","idPrefix","useId","jsxs","Fragment","jsx","event","styles","clsx"],"mappings":";;;;;;;GAwBaA,IAAiB,CAAC;AAAA,EAC7B,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AACF,MAA2B;AACzB,QAAMC,IAAWC,EAAM;AAEvB,SAEI,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAAZ;AAAA,QACA,IAAI,GAAGQ,CAAQ,GAAGP,EAAM,QAAQ,QAAQ,GAAG,CAAC;AAAA,QAC5C,MAAME,KAAcF,EAAM,QAAQ,QAAQ,GAAG;AAAA,QAC7C,UAAAK;AAAA,QACA,OAAAJ;AAAA,QACA,SAAAG;AAAA,QACA,UAAU,CAACQ,MAAUN,EAAWM,CAAK;AAAA,QACrC,WAAWC,EAAO,gBAAgB;AAAA,MAAA;AAAA,IACpC;AAAA,IACA,gBAAAF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS,GAAGJ,CAAQ,GAAGP,CAAK;AAAA,QAC5B,WAAWc,EAAKD,EAAO,iBAAiB,GAAG,CAACV,KAAgBU,EAAO,0BAA0B,CAAC,CAAC;AAAA,QAE9F,UAAAb;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;"}
+{"version":3,"file":"ControlsButton.js","sources":["../../../src/components/ControlsButton/ControlsButton.tsx"],"sourcesContent":["import { useId } from 'react';\r\nimport clsx from 'clsx';\r\n\r\nimport type { ChangeEvent } from 'react';\r\n\r\nimport styles from './ControlsButton.module.css';\r\n\r\nexport interface ControlsButtonProps {\r\n  /** to set type/behaviour of input radio or checkbox */\r\n  type?: 'radio' | 'checkbox';\r\n  label: string;\r\n  value: string;\r\n  prefix?: string;\r\n  /** set if used as radiogroup */\r\n  name?: string;\r\n  /** `true` to set squared button; otherwise, `false`. The default is `false`. */\r\n  forceSquared?: boolean;\r\n  /** to set default status */\r\n  checked?: boolean;\r\n  /** `true` to disable the button; otherwise, `false`. The default is `false`. */\r\n  disabled?: boolean;\r\n  /** The callback function that is invoked when the radio button changes value. */\r\n  onSetValue: (event: ChangeEvent<HTMLInputElement>) => void;\r\n}\r\n\r\nexport const ControlsButton = ({\r\n  type = 'checkbox',\r\n  label,\r\n  value,\r\n  prefix,\r\n  name,\r\n  forceSquared = false,\r\n  checked,\r\n  disabled,\r\n  onSetValue,\r\n}: ControlsButtonProps) => {\r\n  const idPrefix = useId();\r\n\r\n  return (\r\n    <>\r\n      <input\r\n        type={type}\r\n        id={`${idPrefix}${label.replace(/\\s+/g, '_')}`}\r\n        name={name ? name : label.replace(/\\s+/g, '_')}\r\n        disabled={disabled}\r\n        value={value}\r\n        checked={checked}\r\n        onChange={(event) => onSetValue(event)}\r\n        className={styles['controls-input']}\r\n      />\r\n      <label\r\n        htmlFor={`${idPrefix}${label.replace(/\\s+/g, '_')}`}\r\n        className={clsx(styles['controls-button'], [\r\n          forceSquared && styles['controls-button--squared'],\r\n          prefix && styles['controls-button--with-prefix'],\r\n        ])}\r\n      >\r\n        <div className={styles['controls-button__wrapper']}>\r\n          {prefix && <div className={styles['controls-button__prefix']}>{prefix}</div>}\r\n          {label}\r\n        </div>\r\n      </label>\r\n    </>\r\n  );\r\n};\r\n"],"names":["ControlsButton","type","label","value","prefix","name","forceSquared","checked","disabled","onSetValue","idPrefix","useId","jsxs","Fragment","jsx","event","styles","clsx"],"mappings":";;;;;;;;;;GAyBaA,IAAiB,CAAC;AAAA,EAC7B,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AACF,MAA2B;AACzB,QAAMC,IAAWC,EAAM;AAEvB,SAEI,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAAb;AAAA,QACA,IAAI,GAAGS,CAAQ,GAAGR,EAAM,QAAQ,QAAQ,GAAG,CAAC;AAAA,QAC5C,MAAMG,KAAcH,EAAM,QAAQ,QAAQ,GAAG;AAAA,QAC7C,UAAAM;AAAA,QACA,OAAAL;AAAA,QACA,SAAAI;AAAA,QACA,UAAU,CAACQ,MAAUN,EAAWM,CAAK;AAAA,QACrC,WAAWC,EAAO,gBAAgB;AAAA,MAAA;AAAA,IACpC;AAAA,IACA,gBAAAF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS,GAAGJ,CAAQ,GAAGR,EAAM,QAAQ,QAAQ,GAAG,CAAC;AAAA,QACjD,WAAWe,EAAKD,EAAO,iBAAiB,GAAG;AAAA,UACzCV,KAAgBU,EAAO,0BAA0B;AAAA,UACjDZ,KAAUY,EAAO,8BAA8B;AAAA,QAAA,CAChD;AAAA,QAED,UAAC,gBAAAJ,EAAA,OAAA,EAAI,WAAWI,EAAO,0BAA0B,GAC9C,UAAA;AAAA,UAAAZ,uBAAW,OAAI,EAAA,WAAWY,EAAO,yBAAyB,GAAI,UAAOZ,GAAA;AAAA,UACrEF;AAAA,QAAA,EACH,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}

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

@@ -1,7 +1,7 @@
-import { jsx as e } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
 import { fn as n } from "../../index-Dwqes6RH.js";
 import { ControlsButton as o } from "./ControlsButton.js";
-const r = "<ControlsButton type={radio or checkbox} label={} value={} forceSquared={}isChecked={} variant={} disabled={} notValid={} onSetValue={} key={} />", u = {
+const r = "<ControlsButton type={radio or checkbox} label={} value={} prefix={} forceSquared={}isChecked={} variant={} disabled={} notValid={} onSetValue={} key={} />", u = {
   title: "Atoms/ControlsButton",
   component: o,
   argTypes: {
@@ -30,7 +30,7 @@ const r = "<ControlsButton type={radio or checkbox} label={} value={} forceSquar
     inspectComponent: o,
     codeString: r
   }
-}, l = (t) => /* @__PURE__ */ e(o, { ...t }), a = l.bind({});
+}, l = (e) => /* @__PURE__ */ t(o, { ...e }), a = l.bind({});
 a.args = {
   type: "checkbox",
   label: "1.2",

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

@@ -1 +1 @@
-{"version":3,"file":"ControlsButton.stories.js","sources":["../../../src/components/ControlsButton/ControlsButton.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\r\n\r\nimport type { Meta, StoryFn } from '@storybook/react';\r\nimport type { ControlsButtonProps } from './ControlsButton';\r\n\r\nimport { ControlsButton } from './ControlsButton';\r\n\r\nconst codeString =\r\n  '<ControlsButton type={radio or checkbox} label={} value={} forceSquared={}isChecked={} variant={} disabled={} notValid={} onSetValue={} key={} />';\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n  title: 'Atoms/ControlsButton',\r\n  component: ControlsButton,\r\n  argTypes: {\r\n    label: {\r\n      control: 'text',\r\n    },\r\n    value: {\r\n      control: 'string',\r\n    },\r\n    forceSquared: {\r\n      control: 'boolean',\r\n    },\r\n    isChecked: {\r\n      control: 'boolean',\r\n    },\r\n    disabled: {\r\n      control: 'boolean',\r\n    },\r\n    onSetValue: {\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n  },\r\n  parameters: {\r\n    inspectComponent: ControlsButton,\r\n    codeString: codeString,\r\n  },\r\n} as Meta<ControlsButtonProps>;\r\n\r\nconst Template: StoryFn<ControlsButtonProps> = (args) => <ControlsButton {...args} />;\r\n\r\nexport const ControlsButtonExample = Template.bind({});\r\nControlsButtonExample.args = {\r\n  type: 'checkbox',\r\n  label: '1.2',\r\n  value: '1.2',\r\n  forceSquared: true,\r\n  onSetValue: fn(),\r\n};\r\n"],"names":["codeString","ControlsButton_stories","ControlsButton","Template","args","jsx","ControlsButtonExample","fn"],"mappings":";;;AAOA,MAAMA,IACJ,qJAGaC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,IACX;AAAA,IACA,WAAW;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,IACX;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EAEJ;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAyC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAgB,GAAGE,GAAM,GAEtEE,IAAwBH,EAAS,KAAK,CAAE,CAAA;AACrDG,EAAsB,OAAO;AAAA,EAC3B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,cAAc;AAAA,EACd,YAAYC,EAAG;AACjB;"}
+{"version":3,"file":"ControlsButton.stories.js","sources":["../../../src/components/ControlsButton/ControlsButton.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\r\n\r\nimport type { Meta, StoryFn } from '@storybook/react';\r\nimport type { ControlsButtonProps } from './ControlsButton';\r\n\r\nimport { ControlsButton } from './ControlsButton';\r\n\r\nconst codeString =\r\n  '<ControlsButton type={radio or checkbox} label={} value={} prefix={} forceSquared={}isChecked={} variant={} disabled={} notValid={} onSetValue={} key={} />';\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n  title: 'Atoms/ControlsButton',\r\n  component: ControlsButton,\r\n  argTypes: {\r\n    label: {\r\n      control: 'text',\r\n    },\r\n    value: {\r\n      control: 'string',\r\n    },\r\n    forceSquared: {\r\n      control: 'boolean',\r\n    },\r\n    isChecked: {\r\n      control: 'boolean',\r\n    },\r\n    disabled: {\r\n      control: 'boolean',\r\n    },\r\n    onSetValue: {\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n  },\r\n  parameters: {\r\n    inspectComponent: ControlsButton,\r\n    codeString: codeString,\r\n  },\r\n} as Meta<ControlsButtonProps>;\r\n\r\nconst Template: StoryFn<ControlsButtonProps> = (args) => <ControlsButton {...args} />;\r\n\r\nexport const ControlsButtonExample = Template.bind({});\r\nControlsButtonExample.args = {\r\n  type: 'checkbox',\r\n  label: '1.2',\r\n  value: '1.2',\r\n  forceSquared: true,\r\n  onSetValue: fn(),\r\n};\r\n"],"names":["codeString","ControlsButton_stories","ControlsButton","Template","args","jsx","ControlsButtonExample","fn"],"mappings":";;;AAOA,MAAMA,IACJ,+JAGaC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,IACX;AAAA,IACA,WAAW;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,IACX;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EAEJ;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAyC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAgB,GAAGE,GAAM,GAEtEE,IAAwBH,EAAS,KAAK,CAAE,CAAA;AACrDG,EAAsB,OAAO;AAAA,EAC3B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,cAAc;AAAA,EACd,YAAYC,EAAG;AACjB;"}

package/dist/components/InputField/InputField.js

@@ -1,5 +1,5 @@
 import { jsxs as b, jsx as r } from "react/jsx-runtime";
-import { forwardRef as g, useState as x, useRef as y, useEffect as B } from "react";
+import { forwardRef as g, useState as x, useRef as B, useEffect as y } from "react";
 import { c as C } from "../../clsx-OuTLNxxd.js";
 import '../../assets/InputField.css';const t = {
   "input-field-wrapper": "_input-field-wrapper_ndcss_1",
@@ -22,8 +22,8 @@ import '../../assets/InputField.css';const t = {
     onClear: c,
     ...o
   }, i) => {
-    const [a, m] = x(0), l = y(null);
-    B(() => {
+    const [a, m] = x(0), l = B(null);
+    y(() => {
       l.current && m(l.current.offsetWidth);
     }, [e]);
     const h = () => {
@@ -47,7 +47,7 @@ import '../../assets/InputField.css';const t = {
           style: { paddingRight: e && n ? a : void 0 }
         }
       ),
-      e && n && /* @__PURE__ */ r(
+      !!e && n && /* @__PURE__ */ r(
         "button",
         {
           type: "button",

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

@@ -1 +1 @@
-{"version":3,"file":"InputField.js","sources":["../../../src/components/InputField/InputField.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } 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  /** The variant to render. */\n  variant?: 'large';\n  /** The width to render. */\n  width?: 'small' | 'compact';\n  /** The type of the input element. */\n  type?: 'text' | 'password' | 'email';\n  /** The background color of the input. InputField is by default transparent. */\n  background?: 'white';\n  /** The id of the input element. */\n  id: string;\n  /** An element that represents a clear button. */\n  clearTrigger?: ReactNode;\n  /** The callback that is invoked when the clear button is triggered. */\n  onClear?: () => void;\n}\n\n/** Represents a component that renders an input field which can have a clear button. */\nexport const InputField = forwardRef<HTMLInputElement, InputFieldProps>(\n  (\n    {\n      autoComplete = 'off',\n      id,\n      value,\n      variant,\n      width,\n      type = 'text',\n      background,\n      clearTrigger,\n      onClear,\n      ...restProps\n    }: 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            [styles[`input-field--${width}`]]: width,\n            [styles[`input-field--${background}`]]: background,\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","width","type","background","clearTrigger","onClear","restProps","forwardedRef","clearButtonWidth","setClearButtonWidth","useState","clearButtonRef","useRef","useEffect","handleClearTriggerClick","jsxs","styles","jsx","clsx"],"mappings":";;;;;;;;;;;GAyBaA,IAAaC;AAAA,EACxB,CACE;AAAA,IACE,cAAAC,IAAe;AAAA,IACf,IAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,SAAAC;AAAA,IACA,GAAGC;AAAA,KAELC,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,CAACZ,CAAK,CAAC;AAEV,UAAMe,IAA0B,MAAM;AACpC,MAAIT,KAAWE,KAAgB,aAAaA,KAAgBA,EAAa,YAC/DF,EAAA,GACRE,EAAa,QAAQ,MAAM;AAAA,IAE/B;AAEA,WACG,gBAAAQ,EAAA,OAAA,EAAI,WAAWC,EAAO,qBAAqB,GAC1C,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAGX;AAAA,UACJ,cAAAT;AAAA,UACA,KAAKU;AAAA,UACL,IAAAT;AAAA,UACA,WAAWoB,EAAKF,EAAO,aAAa,GAAG;AAAA,YACrC,CAACA,EAAO,oBAAoB,CAAC,GAAGhB,MAAY;AAAA,YAC5C,CAACgB,EAAO,gBAAgBf,CAAK,EAAE,CAAC,GAAGA;AAAA,YACnC,CAACe,EAAO,gBAAgBb,CAAU,EAAE,CAAC,GAAGA;AAAA,UAAA,CACzC;AAAA,UACD,MAAAD;AAAA,UACA,OAAAH;AAAA,UACA,OAAO,EAAE,cAAcA,KAASK,IAAeI,IAAmB,OAAU;AAAA,QAAA;AAAA,MAC9E;AAAA,MACCT,KAASK,KACR,gBAAAa;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAWD,EAAO,2BAA2B;AAAA,UAC7C,SAASF;AAAA,UACT,KAAKH;AAAA,UACL,cAAY,qBAAqBb,CAAE;AAAA,UAElC,UAAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"InputField.js","sources":["../../../src/components/InputField/InputField.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } 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  /** The variant to render. */\n  variant?: 'large';\n  /** The width to render. */\n  width?: 'small' | 'compact';\n  /** The type of the input element. */\n  type?: 'text' | 'password' | 'email';\n  /** The background color of the input. InputField is by default transparent. */\n  background?: 'white';\n  /** The id of the input element. */\n  id: string;\n  /** An element that represents a clear button. */\n  clearTrigger?: ReactNode;\n  /** The callback that is invoked when the clear button is triggered. */\n  onClear?: () => void;\n}\n\n/** Represents a component that renders an input field which can have a clear button. */\nexport const InputField = forwardRef<HTMLInputElement, InputFieldProps>(\n  (\n    {\n      autoComplete = 'off',\n      id,\n      value,\n      variant,\n      width,\n      type = 'text',\n      background,\n      clearTrigger,\n      onClear,\n      ...restProps\n    }: 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            [styles[`input-field--${width}`]]: width,\n            [styles[`input-field--${background}`]]: background,\n          })}\n          type={type}\n          value={value}\n          style={{ paddingRight: value && clearTrigger ? clearButtonWidth : undefined }}\n        />\n        {Boolean(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","width","type","background","clearTrigger","onClear","restProps","forwardedRef","clearButtonWidth","setClearButtonWidth","useState","clearButtonRef","useRef","useEffect","handleClearTriggerClick","jsxs","styles","jsx","clsx"],"mappings":";;;;;;;;;;;GAyBaA,IAAaC;AAAA,EACxB,CACE;AAAA,IACE,cAAAC,IAAe;AAAA,IACf,IAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,SAAAC;AAAA,IACA,GAAGC;AAAA,KAELC,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,CAACZ,CAAK,CAAC;AAEV,UAAMe,IAA0B,MAAM;AACpC,MAAIT,KAAWE,KAAgB,aAAaA,KAAgBA,EAAa,YAC/DF,EAAA,GACRE,EAAa,QAAQ,MAAM;AAAA,IAE/B;AAEA,WACG,gBAAAQ,EAAA,OAAA,EAAI,WAAWC,EAAO,qBAAqB,GAC1C,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAGX;AAAA,UACJ,cAAAT;AAAA,UACA,KAAKU;AAAA,UACL,IAAAT;AAAA,UACA,WAAWoB,EAAKF,EAAO,aAAa,GAAG;AAAA,YACrC,CAACA,EAAO,oBAAoB,CAAC,GAAGhB,MAAY;AAAA,YAC5C,CAACgB,EAAO,gBAAgBf,CAAK,EAAE,CAAC,GAAGA;AAAA,YACnC,CAACe,EAAO,gBAAgBb,CAAU,EAAE,CAAC,GAAGA;AAAA,UAAA,CACzC;AAAA,UACD,MAAAD;AAAA,UACA,OAAAH;AAAA,UACA,OAAO,EAAE,cAAcA,KAASK,IAAeI,IAAmB,OAAU;AAAA,QAAA;AAAA,MAC9E;AAAA,MACC,EAAQT,KAAUK,KACjB,gBAAAa;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAWD,EAAO,2BAA2B;AAAA,UAC7C,SAASF;AAAA,UACT,KAAKH;AAAA,UACL,cAAY,qBAAqBb,CAAE;AAAA,UAElC,UAAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAAA,EAAA;AAGN;"}

package/dist/components/MetaDataList/MetaDataList.js

@@ -1,12 +1,12 @@
-import { jsx as a, jsxs as i } from "react/jsx-runtime";
+import { jsx as a, jsxs as _ } from "react/jsx-runtime";
 import '../../assets/MetaDataList.css';const t = {
-  "meta-data-list": "_meta-data-list_en1ef_1",
-  "meta-data-list__item": "_meta-data-list__item_en1ef_5",
-  "meta-data-list__term": "_meta-data-list__term_en1ef_16",
-  "meta-data-list__description": "_meta-data-list__description_en1ef_20"
-}, m = ({ items: s }) => /* @__PURE__ */ a("dl", { className: t["meta-data-list"], children: Object.entries(s).map(([e, _]) => /* @__PURE__ */ i("div", { className: t["meta-data-list__item"], children: [
+  "meta-data-list": "_meta-data-list_1ripo_1",
+  "meta-data-list__item": "_meta-data-list__item_1ripo_5",
+  "meta-data-list__term": "_meta-data-list__term_1ripo_16",
+  "meta-data-list__description": "_meta-data-list__description_1ripo_20"
+}, m = ({ items: i }) => /* @__PURE__ */ a("dl", { className: t["meta-data-list"], children: Object.entries(i).map(([e, s]) => /* @__PURE__ */ _("div", { className: t["meta-data-list__item"], children: [
   /* @__PURE__ */ a("dt", { className: t["meta-data-list__term"], children: e }),
-  /* @__PURE__ */ a("dd", { className: t["meta-data-list__description"], children: _ })
+  /* @__PURE__ */ a("dd", { className: t["meta-data-list__description"], children: s })
 ] }, e)) });
 export {
   m as MetaDataList

package/dist/components/PageOverlay/PageOverlay.js

@@ -1,102 +1,102 @@
-import { jsx as o, Fragment as $, jsxs as c } from "react/jsx-runtime";
+import { jsx as a, Fragment as $, jsxs as c } from "react/jsx-runtime";
 import { useDialog as A } from "@react-aria/dialog";
 import { FocusScope as C } from "@react-aria/focus";
 import { useModal as K, useOverlay as M, usePreventScroll as U, OverlayContainer as V } from "@react-aria/overlays";
 import { c as i } from "../../clsx-OuTLNxxd.js";
-import { useRef as m, useState as f, useEffect as q } from "react";
+import { useRef as d, useState as f, useEffect as q } from "react";
 import { OverlayCloseButton as G } from "../OverlayCloseButton/OverlayCloseButton.js";
 import { Spinner as J } from "../Spinner/Spinner.js";
 import { Backdrop as O } from "../Backdrop/Backdrop.js";
 import '../../assets/PageOverlay.css';const e = {
-  "page-overlay__container": "_page-overlay__container_1oudu_1",
-  "page-overlay": "_page-overlay_1oudu_1",
-  "page-overlay--full-screen": "_page-overlay--full-screen_1oudu_19",
-  "page-overlay--with-gutters": "_page-overlay--with-gutters_1oudu_23",
-  "page-overlay__content": "_page-overlay__content_1oudu_28",
-  "page-overlay__content--grey": "_page-overlay__content--grey_1oudu_39",
-  "page-overlay__content--white": "_page-overlay__content--white_1oudu_43",
-  "page-overlay__children": "_page-overlay__children_1oudu_47",
-  "page-overlay__title-wrapper": "_page-overlay__title-wrapper_1oudu_51",
-  "page-overlay__title": "_page-overlay__title_1oudu_51",
-  "page-overlay__buttons-bar": "_page-overlay__buttons-bar_1oudu_62",
-  "page-overlay__buttons-bar--shadow": "_page-overlay__buttons-bar--shadow_1oudu_88",
-  "page-overlay__close": "_page-overlay__close_1oudu_94"
+  "page-overlay__container": "_page-overlay__container_x277a_1",
+  "page-overlay": "_page-overlay_x277a_1",
+  "page-overlay--full-screen": "_page-overlay--full-screen_x277a_19",
+  "page-overlay--with-gutters": "_page-overlay--with-gutters_x277a_23",
+  "page-overlay__content": "_page-overlay__content_x277a_28",
+  "page-overlay__content--grey": "_page-overlay__content--grey_x277a_39",
+  "page-overlay__content--white": "_page-overlay__content--white_x277a_43",
+  "page-overlay__children": "_page-overlay__children_x277a_47",
+  "page-overlay__title-wrapper": "_page-overlay__title-wrapper_x277a_51",
+  "page-overlay__title": "_page-overlay__title_x277a_51",
+  "page-overlay__buttons-bar": "_page-overlay__buttons-bar_x277a_62",
+  "page-overlay__buttons-bar--shadow": "_page-overlay__buttons-bar--shadow_x277a_88",
+  "page-overlay__close": "_page-overlay__close_x277a_94"
 };
 function le({
   buttons: t,
   children: h,
-  isLoading: b,
-  spinnerAriaValueText: w = "Loading",
-  closeButtonAriaValueText: S = "Close",
-  isOpen: a,
-  noValidate: N = !1,
-  onClose: u,
-  onSubmit: P,
+  isLoading: x,
+  spinnerAriaValueText: b = "Loading",
+  closeButtonAriaValueText: w = "Close",
+  isOpen: r,
+  noValidate: S = !1,
+  onClose: p,
+  onSubmit: N,
   title: _,
   headerContent: n,
-  variant: p = "full-screen",
-  contentBackgroundColor: T = "grey"
+  variant: g = "full-screen",
+  contentBackgroundColor: P = "grey"
 }) {
-  const s = m(null), g = m(null), [E, x] = f(!1), [L, B] = f(!1), { dialogProps: F, titleProps: H } = A({ role: "dialog" }, s), { modalProps: k } = K({ isDisabled: !a }), { overlayProps: z, underlayProps: D } = M({ isOpen: a, onClose: u }, s);
-  U({ isDisabled: !a }), q(() => {
-    const r = g.current;
-    if (!r) return;
-    function v() {
-      const d = r.scrollHeight, y = r.clientHeight, j = r.scrollTop;
-      x(d > y), B(j + y >= d);
+  const s = d(null), v = d(null), [T, E] = f(!1), [L, B] = f(!1), { dialogProps: F, titleProps: H } = A({ role: "dialog" }, s), { modalProps: k } = K({ isDisabled: !r }), { overlayProps: z, underlayProps: D } = M({ isOpen: r, onClose: p }, s);
+  U({ isDisabled: !r }), q(() => {
+    const o = v.current;
+    if (!o) return;
+    function y() {
+      const u = o.scrollHeight, m = o.clientHeight, j = o.scrollTop;
+      E(u > m), B(j + m >= u);
     }
     function l() {
-      v();
+      y();
     }
-    r.addEventListener("scroll", l), window.addEventListener("resize", l);
+    o.addEventListener("scroll", l), window.addEventListener("resize", l);
     const R = setTimeout(() => {
-      v();
+      y();
     }, 0);
     return () => {
-      r.removeEventListener("scroll", l), window.removeEventListener("resize", l), clearTimeout(R);
+      o.removeEventListener("scroll", l), window.removeEventListener("resize", l), clearTimeout(R);
     };
-  }, [a, n]);
-  function I(r) {
-    r.stopPropagation();
+  }, [r, n]);
+  function I(o) {
+    o.stopPropagation();
   }
-  return a ? /* @__PURE__ */ o(V, { className: e["page-overlay__container"], children: /* @__PURE__ */ o(O, { ...D, children: b ? /* @__PURE__ */ o(J, { ariaValueText: w }) : /* @__PURE__ */ o($, { children: /* @__PURE__ */ o(C, { autoFocus: !0, contain: !0, restoreFocus: !0, children: /* @__PURE__ */ c(
+  return r ? /* @__PURE__ */ a(V, { className: e["page-overlay__container"], children: /* @__PURE__ */ a(O, { ...D, children: x ? /* @__PURE__ */ a(J, { ariaValueText: b }) : /* @__PURE__ */ a($, { children: /* @__PURE__ */ a(C, { autoFocus: !0, contain: !0, restoreFocus: !0, children: /* @__PURE__ */ c(
     "div",
     {
       ...F,
       ...k,
       ...z,
       className: i(e["page-overlay"], {
-        [e[`page-overlay--${p}`]]: p
+        [e[`page-overlay--${g}`]]: g
       }),
       onKeyUp: I,
       role: "presentation",
       ref: s,
       children: [
         (_ || n) && /* @__PURE__ */ c("div", { className: e["page-overlay__title-wrapper"], children: [
-          _ && /* @__PURE__ */ o("h1", { ...H, className: e["page-overlay__title"], children: _ }),
+          _ && /* @__PURE__ */ a("h1", { ...H, className: e["page-overlay__title"], children: _ }),
           n,
-          /* @__PURE__ */ o("span", { className: e["page-overlay__close"], children: /* @__PURE__ */ o(G, { "aria-label": S, onClick: u }) })
+          /* @__PURE__ */ a("span", { className: e["page-overlay__close"], children: /* @__PURE__ */ a(G, { "aria-label": w, onClick: p }) })
         ] }),
         /* @__PURE__ */ c(
           "form",
           {
             className: i(
               e["page-overlay__content"],
-              e[`page-overlay__content--${T}`],
+              e[`page-overlay__content--${P}`],
               {
                 [e["page-overlay--content-with-buttons"]]: t
               }
             ),
-            onSubmit: P,
-            noValidate: N,
-            ref: g,
+            onSubmit: N,
+            noValidate: S,
+            ref: v,
             children: [
-              /* @__PURE__ */ o("div", { className: e["page-overlay__children"], children: h }),
-              t && /* @__PURE__ */ o(
+              /* @__PURE__ */ a("div", { className: e["page-overlay__children"], children: h }),
+              t && /* @__PURE__ */ a(
                 "div",
                 {
                   className: i(e["page-overlay__buttons-bar"], {
-                    [e["page-overlay__buttons-bar--shadow"]]: E && !L
+                    [e["page-overlay__buttons-bar--shadow"]]: T && !L
                   }),
                   children: t
                 }

package/dist/components/RadioButton/RadioButton.js

@@ -1,11 +1,11 @@
 import { jsxs as d, jsx as a } from "react/jsx-runtime";
 import { c as b } from "../../clsx-OuTLNxxd.js";
 import '../../assets/RadioButton.css';const t = {
-  "radio-button": "_radio-button_175ij_1",
-  "radio-button__input": "_radio-button__input_175ij_8",
-  "radio-button__label": "_radio-button__label_175ij_13",
-  "radio-button__description": "_radio-button__description_175ij_19",
-  "radio-button--gap-large": "_radio-button--gap-large_175ij_34"
+  "radio-button": "_radio-button_1i4mp_1",
+  "radio-button__input": "_radio-button__input_1i4mp_8",
+  "radio-button__label": "_radio-button__label_1i4mp_17",
+  "radio-button__description": "_radio-button__description_1i4mp_23",
+  "radio-button--gap-large": "_radio-button--gap-large_1i4mp_38"
 }, s = ({ id: o, label: r, gap: _ = "normal", description: i, ...n }) => /* @__PURE__ */ d("div", { className: b(t["radio-button"], t[`radio-button--gap-${_}`]), children: [
   /* @__PURE__ */ a(
     "input",

package/dist/components/SelectListbox/components/SelectButton.js

@@ -1,7 +1,7 @@
 import { jsx as a, jsxs as C } from "react/jsx-runtime";
 import { c as f } from "../../../clsx-OuTLNxxd.js";
 import { forwardRef as E, useRef as g, useEffect as c } from "react";
-import { s as t } from "../../../SelectListbox.module-DHFU0NjU.js";
+import { s as t } from "../../../SelectListbox.module-yzXaWwsm.js";
 import { Icon as L } from "../../Icon/Icon.js";
 import { useSelect as N } from "../SelectProvider.js";
 const O = E((d, u) => {

package/dist/components/SelectListbox/components/SelectContainer.js

@@ -1,7 +1,7 @@
 import { jsx as c } from "react/jsx-runtime";
 import { useRef as i, useCallback as u, useEffect as l } from "react";
 import { useSelect as m } from "../SelectProvider.js";
-import { s as f } from "../../../SelectListbox.module-DHFU0NjU.js";
+import { s as f } from "../../../SelectListbox.module-yzXaWwsm.js";
 const E = ({ children: o }) => {
   const { isOpen: r, setIsOpen: n } = m(), t = i(null), e = u(
     ({ target: s }) => {

package/dist/components/SelectListbox/components/SelectOption.js

@@ -2,7 +2,7 @@ import { jsxs as D, Fragment as h, jsx as m } from "react/jsx-runtime";
 import { c as y } from "../../../clsx-OuTLNxxd.js";
 import { useRef as O, useEffect as d } from "react";
 import { useSelect as x } from "../SelectProvider.js";
-import { s as o } from "../../../SelectListbox.module-DHFU0NjU.js";
+import { s as o } from "../../../SelectListbox.module-yzXaWwsm.js";
 const j = ({ option: l, index: t, dividerAfter: u, children: v }) => {
   const i = O(null), { isOpen: r, activeIndex: s, setActiveIndex: c, selectedValue: f, setSelectedValue: p, setIsOpen: n, options: a } = x(), w = (e) => {
     p(a[e]), n(!1);

package/dist/components/SelectListbox/components/SelectOptionBox.js

@@ -1,6 +1,6 @@
 import { jsx as s } from "react/jsx-runtime";
 import { forwardRef as m, useRef as x } from "react";
-import { s as i } from "../../../SelectListbox.module-DHFU0NjU.js";
+import { s as i } from "../../../SelectListbox.module-yzXaWwsm.js";
 import { useSelect as a } from "../SelectProvider.js";
 const h = m((l, e) => {
   const { style: t, children: o } = l, { listboxId: r, isOpen: c } = a(), n = x(null);

package/package.json

@@ -2,7 +2,7 @@
   "name": "@uva-glass/component-library",
   "author": "Team Glass - Frontend vrienden",
   "private": false,
-  "version": "3.27.2",
+  "version": "3.28.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -45,10 +45,10 @@
   "devDependencies": {
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
-    "@react-aria/button": "^3.13.1",
-    "@react-aria/dialog": "^3.5.25",
-    "@react-aria/overlays": "^3.27.1",
-    "@react-types/dialog": "^3.5.18",
+    "@react-aria/button": "^3.13.3",
+    "@react-aria/dialog": "^3.5.27",
+    "@react-aria/overlays": "^3.27.3",
+    "@react-types/dialog": "^3.5.19",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/gitlab": "^13.2.5",
     "@semantic-release/npm": "^12.0.1",
@@ -64,21 +64,21 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@types/jest": "^29.5.14",
-    "@types/node": "^22.15.29",
+    "@types/node": "^22.15.31",
     "@types/react-dom": "^19.1.6",
-    "@types/react": "^19.1.6",
+    "@types/react": "^19.1.7",
     "@uva-glass/eslint-config": "^1.3.10",
     "@uva-glass/stylelint-config": "^1.2.2",
-    "@vitejs/plugin-react": "^4.5.1",
-    "babel-jest": "^29.7.0",
+    "@vitejs/plugin-react": "^4.5.2",
+    "babel-jest": "^30.0.0",
     "babel-plugin-transform-vite-meta-env": "^1.0.3",
     "clsx": "^2.1.1",
     "eslint-plugin-react-hooks": "^6.0.0",
     "glob": "^11.0.2",
     "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
+    "jest": "^30.0.0",
+    "jest-environment-jsdom": "^30.0.0",
     "jest-junit": "^16.0.0",
     "jsdom": "^26.1.0",
     "npm-run-all2": "^8.0.4",
@@ -112,9 +112,9 @@
     "lexical": "^0.32.1"
   },
   "optionalDependencies": {
-    "@rollup/rollup-linux-x64-gnu": "^4.41.1",
-    "@rspack/binding-darwin-arm64": "1.3.13",
-    "@rspack/binding-linux-x64-gnu": "1.3.13",
-    "@ast-grep/napi-linux-x64-gnu": "0.38.4"
+    "@rollup/rollup-linux-x64-gnu": "^4.43.0",
+    "@rspack/binding-darwin-arm64": "1.3.15",
+    "@rspack/binding-linux-x64-gnu": "1.3.15",
+    "@ast-grep/napi-linux-x64-gnu": "0.38.5"
   }
 }

package/dist/SelectListbox.module-DHFU0NjU.js.map

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