@uva-glass/component-library 3.19.3 → 3.20.0

package/dist/assets/CheckboxButton.css

@@ -1 +1 @@
-._checkbox-button__container_bnmy8_1{align-items:center;display:inline-flex;justify-content:center}._checkbox-button__container_bnmy8_1 input[type=checkbox]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;z-index:-1}._checkbox-button__container_bnmy8_1 input[type=checkbox]:focus-visible+label{outline:.125rem dotted var(--new-color-navy-600);outline-offset:.125rem;z-index:1}._checkbox-button__container_bnmy8_1 input[type=checkbox]:checked+label{background-color:var(--new-color-uva-black);color:var(--new-color-uva-white)}._checkbox-button__container_bnmy8_1 input[type=checkbox]:disabled+label,._checkbox-button__container_bnmy8_1 input[type=checkbox]:disabled:hover+label{background-color:var(--new-color-grey-300);color:var(--new-color-grey-500);cursor:not-allowed}._checkbox-button__container_bnmy8_1 input[type=checkbox]:checked+label:hover{background-color:var(--new-color-grey-500);color:var(--new-color-uva-black);z-index:1}._checkbox-button_bnmy8_1{align-items:center;background-color:var(--new-color-uva-white);border:1px solid var(--new-color-grey-600);cursor:pointer;display:flex;font-size:var(--font-size-default);height:2.5rem;justify-content:center;padding:.25rem;-webkit-user-select:none;user-select:none;white-space:nowrap;width:2.5rem}._checkbox-button_bnmy8_1:hover{background-color:var(--new-color-grey-500)}._checkbox-button--not-valid_bnmy8_59{border-color:var(--new-color-red-600)}._checkbox-button--not-valid_bnmy8_59:hover{background-color:var(--new-color-grey-500);border-color:var(--new-color-grey-500);color:var(--new-color-uva-black)}._checkbox-button--single_bnmy8_69{border-radius:.25rem}._checkbox-button--start_bnmy8_73{border-radius:.25rem 0 0 .25rem}._checkbox-button--middle_bnmy8_77{border-radius:0;border-width:1px 0;position:relative;width:2.375rem}._checkbox-button--end_bnmy8_84{border-radius:0 .25rem .25rem 0}
+._checkbox-button__container_1q8j8_1{align-items:center;display:inline-flex;justify-content:center}._checkbox-button__container_1q8j8_1 input[type=checkbox]{cursor:pointer;height:0;opacity:0;position:absolute;width:0}._checkbox-button__container_1q8j8_1 input[type=checkbox]:after{content:" ";position:absolute;right:-1.3125rem;top:-1.3125rem;width:2.625rem;height:2.625rem}._checkbox-button__container_1q8j8_1 input[type=checkbox]:focus-visible+label{outline:.125rem dotted var(--new-color-navy-600);outline-offset:.125rem}._checkbox-button__container_1q8j8_1 input[type=checkbox]:checked+label{background-color:var(--new-color-grey-200);border:1px solid var(--new-color-grey-700);font-weight:var(--semibold)}._checkbox-button__container_1q8j8_1 input[type=checkbox]:disabled+label,._checkbox-button__container_1q8j8_1 input[type=checkbox]:disabled:hover+label{background-color:var(--new-color-grey-400);color:var(--new-color-grey-700);cursor:not-allowed}._checkbox-button__container_1q8j8_1 input[type=checkbox]:hover+label{background-color:var(--new-color-grey-200)}._checkbox-button_1q8j8_1{align-items:center;background-color:var(--new-color-uva-white);border-radius:.25rem;cursor:pointer;display:flex;font-size:var(--font-size-default);height:2.25rem;justify-content:center;padding:.25rem;-webkit-user-select:none;user-select:none;white-space:nowrap;width:2.25rem}

package/dist/assets/CheckboxButtonBar.css

@@ -1 +1 @@
-._checkbox-button-bar__container_y43lv_1{display:flex;flex-wrap:wrap}._checkbox-button-bar__container--label-left_y43lv_6{flex-direction:row;gap:1rem;line-height:2.5rem}._checkbox-button-bar__container--label-top_y43lv_12{align-items:flex-start;flex-direction:column;gap:.5rem;line-height:normal}._checkbox-button-bar__row-container_y43lv_19{display:flex;flex-direction:column}._checkbox-button-bar__row_y43lv_19{align-items:center;display:flex;flex-wrap:nowrap}._checkbox-button-bar__error_y43lv_30{align-items:center;color:var(--new-color-red-600);display:flex;font-size:var(--font-size-small);gap:.5rem;line-height:normal;margin-top:.5rem}
+._checkbox-button-bar__container_e14sz_1{display:flex;flex-wrap:wrap}._checkbox-button-bar__container--label-left_e14sz_6{align-items:baseline;flex-direction:row;gap:1rem}._checkbox-button-bar__container--label-top_e14sz_12{align-items:flex-start;flex-direction:column;gap:.5rem}._checkbox-button-bar__row-container_e14sz_18{display:flex;flex-direction:column;gap:.5rem}._checkbox-button-bar__row_e14sz_18{align-items:center;display:flex;flex-wrap:nowrap;gap:.25rem;padding:.25rem;background-color:var(--new-color-uva-white);border-radius:.5rem;border:1px solid var(--new-color-grey-700)}._checkbox-button-bar__row--not-validated_e14sz_35{border-color:var(--new-color-red-600)}

package/dist/assets/PeriodSelector.css

@@ -1 +1 @@
-._period-selector__container_10t7p_1{display:flex;flex-wrap:wrap}._period-selector__container--label-left_10t7p_6{flex-direction:row;gap:1rem;line-height:2.5rem}._period-selector__container--label-top_10t7p_12{align-items:flex-start;flex-direction:column;gap:.5rem;line-height:normal}._period-selector__selector-container_10t7p_19{display:flex;flex-direction:column;line-height:1.5}._period-selector__selector-row_10t7p_25{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.5rem}
+._period-selector__container_d1p0j_1{display:flex;flex-wrap:wrap}._period-selector__container--label-left_d1p0j_6{flex-direction:row;gap:1rem;align-items:baseline}._period-selector__container--label-top_d1p0j_12{align-items:flex-start;flex-direction:column;gap:.5rem}._period-selector__selector-container_d1p0j_18{display:flex;flex-direction:column;line-height:1.5}._period-selector__selector-row_d1p0j_24{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.5rem}

package/dist/assets/StatusPill.css

@@ -1 +1 @@
-._status-pill_1i67r_1{align-items:center;border-radius:1.5rem;display:flex;gap:.25rem;padding:.25rem .5rem;width:fit-content}._status-pill__possible_1i67r_10{background-color:var(--color-mint-cream);color:var(--color-san-felix)}._status-pill__impossible_1i67r_15{background-color:var(--color-amour);color:var(--color-uva-red-dark)}._status-pill__new_1i67r_20{background-color:var(--color-blue-50);color:var(--color-blue-500);font-size:var(--font-size-text-non-essential)}._status-pill--bar_1i67r_26{border-radius:0;justify-content:center;padding:.5rem;width:100%}
+._status-pill_1df7x_1{align-items:center;border-radius:1.5rem;display:flex;gap:.25rem;padding:.25rem .5rem;width:fit-content}._status-pill__possible_1df7x_10{background-color:var(--new-color-forest-100);color:var(--new-color-forest-900)}._status-pill__impossible_1df7x_15{background-color:var(--new-color-red-100);color:var(--new-color-red-800)}._status-pill__new_1df7x_20{background-color:var(--new-color-navy-100);color:var(--new-color-navy-600);font-size:var(--font-size-text-non-essential)}._status-pill--bar_1df7x_26{border-radius:0;justify-content:center;padding:.5rem;width:100%}

package/dist/assets/TextArea.css

@@ -1 +1 @@
-._text-area__wrapper_13ivw_1{display:flex;flex-direction:column;gap:.5rem}._text-area__header_13ivw_7{align-items:baseline;display:flex;justify-content:space-between}._text-area__label_13ivw_13{font-family:inherit;font-size:inherit;font-weight:var(--semibold);line-height:var(--line-height-s)}._text-area__word-count_13ivw_20{color:var(--color-grey-400);font-size:var(--font-size-text-non-essential)}._text-area__word-count--alert_13ivw_25{color:var(--color-red-500);font-weight:700}._text-area_13ivw_1{border-radius:.25rem;font-family:inherit;font-size:inherit;min-height:5.25rem;overflow:hidden;padding:.5rem;resize:none;white-space:pre-wrap;width:100%;word-wrap:break-word}
+._text-area__wrapper_13728_1{display:flex;flex-direction:column;gap:.5rem}._text-area__header_13728_7{align-items:baseline;display:flex;justify-content:space-between}._text-area__label_13728_13{font-family:inherit;font-size:inherit;font-weight:var(--semibold);line-height:var(--line-height-s)}._text-area__word-count_13728_20{color:var(--new-color-grey-600);font-size:var(--font-size-text-non-essential)}._text-area__word-count--alert_13728_25{color:var(--new-color-red-600);font-weight:700}._text-area_13728_1{border-radius:.25rem;font-family:inherit;font-size:inherit;min-height:5.25rem;overflow:hidden;padding:.5rem;resize:none;white-space:pre-wrap;width:100%;word-wrap:break-word}

package/dist/assets/ToggleSwitch.css

@@ -1 +1 @@
-._toggle-switch_1df21_1{align-items:center;cursor:pointer;display:inline-flex;gap:1ch;-webkit-user-select:none;user-select:none}._toggle-switch__visible_1df21_9{align-items:center;background-color:var(--color-white);border:1px solid var(--color-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_1df21_9{outline-color:var(--color-cobalt)}:checked+._toggle-switch__visible_1df21_9{background-color:var(--color-uva-green)}._toggle-switch__visible_1df21_9:before{background-color:var(--color-lavender);border:1px solid var(--color-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_1df21_9:before{background-color:var(--color-white);transform:translate(1.6rem)}._toggle-switch--disabled_1df21_54 ._toggle-switch__visible_1df21_9:before{background-color:#0000001a;border-color:#0000001a}:checked:active+._toggle-switch__visible_1df21_9:before{transform:translate(1.25rem)}._toggle-switch--disabled_1df21_54,._toggle-switch--loading_1df21_64{pointer-events:none}._toggle-switch--disabled_1df21_54 ._toggle-switch__visible_1df21_9{background-color:var(--color-lavender);border-color:#0000001a;box-shadow:none}._toggle-switch--visually-hidden_1df21_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_1df21_87{color:var(--color-scarpa-flow)}._toggle-switch--loading-cursor_1df21_91{cursor:wait}._toggle-switch--extra-left-gap_1df21_95{margin-left:.5rem}
+._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}

package/dist/assets/Tooltip.css

@@ -1 +1 @@
-._tooltip-container_g4g5w_1{align-items:flex-end;cursor:help;display:flex;position:relative}._tooltip_small_g4g5w_8,._tooltip_medium_g4g5w_9,._tooltip_large_g4g5w_10{background-color:var(--color-scarpa-flow);border-radius:.5rem;color:var(--color-white);font-weight:400;padding:.5rem;position:fixed;text-align:center;transform:translate(-50%,-50%);white-space:normal;z-index:10}._tooltip_small_g4g5w_8{height:4rem;width:14.5rem}._tooltip_medium_g4g5w_9{height:5.5rem;width:20rem}._tooltip_large_g4g5w_10{height:5.5rem;width:24.5rem}._tooltip_small_g4g5w_8:before,._tooltip_medium_g4g5w_9:before,._tooltip_large_g4g5w_10:before{border:.5rem solid transparent;border-top-color:var(--color-scarpa-flow);content:"";height:0;position:absolute;width:0}._tooltip_small_g4g5w_8:before{right:1rem;top:4rem}._tooltip_medium_g4g5w_9:before{right:3rem;top:5.5rem}._tooltip_large_g4g5w_10:before{right:4rem;top:5.5rem}._tooltip_under-trigger_g4g5w_64{background-color:var(--color-scarpa-flow);border-radius:.5rem;color:var(--color-white);font-weight:400;max-width:calc(100vw - 2rem);padding:.25rem 1rem;position:fixed;right:1rem;top:3.5rem}._tooltip_under-trigger_g4g5w_64:before{border-bottom:.5rem solid var(--color-scarpa-flow);border-left:.5rem solid transparent;border-right:.5rem solid transparent;content:"";height:0;position:absolute;right:3.5rem;top:-.5rem;width:0}@media (min-width: 50rem){._tooltip_under-trigger_g4g5w_64{right:.5rem}}
+._tooltip-container_622pq_1{align-items:flex-end;cursor:help;display:flex;position:relative}._tooltip_small_622pq_8,._tooltip_medium_622pq_9,._tooltip_large_622pq_10{background-color:var(--new-color-grey-700);border-radius:.5rem;color:var(--new-color-uva-white);font-weight:400;padding:.5rem;position:fixed;text-align:center;transform:translate(-50%,-50%);white-space:normal;z-index:10}._tooltip_small_622pq_8{height:4rem;width:14.5rem}._tooltip_medium_622pq_9{height:5.5rem;width:20rem}._tooltip_large_622pq_10{height:5.5rem;width:24.5rem}._tooltip_small_622pq_8:before,._tooltip_medium_622pq_9:before,._tooltip_large_622pq_10:before{border:.5rem solid transparent;border-top-color:var(--new-color-grey-700);content:"";height:0;position:absolute;width:0}._tooltip_small_622pq_8:before{right:1rem;top:4rem}._tooltip_medium_622pq_9:before{right:3rem;top:5.5rem}._tooltip_large_622pq_10:before{right:4rem;top:5.5rem}._tooltip_under-trigger_622pq_64{background-color:var(--new-color-grey-700);border-radius:.5rem;color:var(--new-color-uva-white);font-weight:400;max-width:calc(100vw - 2rem);padding:.25rem 1rem;position:fixed;right:1rem;top:3.5rem}._tooltip_under-trigger_622pq_64:before{border-bottom:.5rem solid var(--new-color-grey-700);border-left:.5rem solid transparent;border-right:.5rem solid transparent;content:"";height:0;position:absolute;right:3.5rem;top:-.5rem;width:0}@media (min-width: 50rem){._tooltip_under-trigger_622pq_64{right:.5rem}}

package/dist/assets/VarIndicator.css

@@ -1 +1 @@
-:root{--color-active: var(--color-forest-700);--color-active-hover: var(--color-uva-white);--color-background-active: var(--color-forest-100);--color-background-active-hover: var(--color-forest-700);--color-background-draft: var(--color-sky-100);--color-background-draft-hover: var(--color-navy-600);--color-background-submitted: var(--color-orange-100);--color-background-submitted-hover: var(--color-orange-900);--color-border-active: var(--color-forest-700);--color-border-draft: var(--color-navy-600);--color-border-submitted: var(--color-orange-900);--color-draft: var(--color-navy-600);--color-draft-hover: var(--color-uva-white);--color-label: var(--color-uva-black);--color-submitted: var(--color-orange-900);--color-submitted-hover: var(--color-uva-white);--color-forest-100: #edf4ee;--color-forest-700: #256835;--color-navy-600: #0562b4;--color-orange-100: #fff3e2;--color-orange-900: #a45c00;--color-sky-100: #eef8fb;--color-uva-black: #1b1918;--color-uva-white: #fff;--border-radius-var-indicator: .25rem}._var-indicator__container_1bf94_40{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid;border-radius:var(--border-radius-var-indicator);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--font-size-default);font-weight:var(--semibold);gap:.375rem;height:2rem;justify-content:center;line-height:inherit;margin:0;padding:0 .75rem 0 .5rem;white-space:nowrap}._var-indicator__container--draft_1bf94_59,._var-indicator__container--rejected_1bf94_60{background-color:var(--color-background-draft);border-color:var(--color-border-draft);color:var(--color-draft)}._var-indicator__container--draft_1bf94_59:hover,._var-indicator__container--rejected_1bf94_60:hover{background-color:var(--color-background-draft-hover);color:var(--color-draft-hover)}._var-indicator__container--submitted_1bf94_72{background-color:var(--color-background-submitted);border-color:var(--color-border-submitted);color:var(--color-submitted)}._var-indicator__container--submitted_1bf94_72:hover{background-color:var(--color-background-submitted-hover);color:var(--color-submitted-hover)}._var-indicator__container--active_1bf94_83{background-color:var(--color-background-active);border-color:var(--color-border-active);color:var(--color-active)}._var-indicator__container--active_1bf94_83:hover{background-color:var(--color-background-active-hover);color:var(--color-active-hover)}._var-indicator__label_1bf94_94{color:var(--color-label)}._var-indicator__container--submitted_1bf94_72:hover ._var-indicator__label_1bf94_94,._var-indicator__container--draft_1bf94_59:hover ._var-indicator__label_1bf94_94,._var-indicator__container--rejected_1bf94_60:hover ._var-indicator__label_1bf94_94,._var-indicator__container--active_1bf94_83:hover ._var-indicator__label_1bf94_94{color:var(--color-uva-white)}._var-indicator__step-container_1bf94_105{align-items:center;display:inline flex;height:100%;justify-content:flex-start}._var-indicator__step-container_1bf94_105 svg{margin:0 -.5rem}
+:root{--color-active: var(--new-color-forest-700);--color-active-hover: var(--new-color-uva-white);--color-background-active: var(--new-color-forest-100);--color-background-active-hover: var(--new-color-forest-700);--color-background-draft: var(--new-color-sky-100);--color-background-draft-hover: var(--new-color-navy-600);--color-background-submitted: var(--new-color-orange-100);--color-background-submitted-hover: var(--new-color-orange-900);--color-border-active: var(--new-color-forest-700);--color-border-draft: var(--new-color-navy-600);--color-border-submitted: var(--new-color-orange-900);--color-draft: var(--new-color-navy-600);--color-draft-hover: var(--new-color-uva-white);--color-label: var(--new-color-uva-black);--color-submitted: var(--new-color-orange-900);--color-submitted-hover: var(--new-color-uva-white);--border-radius-var-indicator: .25rem}._var-indicator__container_1m025_29{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid;border-radius:var(--border-radius-var-indicator);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--font-size-default);font-weight:var(--semibold);gap:.375rem;height:2rem;justify-content:center;line-height:inherit;margin:0;padding:0 .75rem 0 .5rem;white-space:nowrap}._var-indicator__container--draft_1m025_48,._var-indicator__container--rejected_1m025_49{background-color:var(--color-background-draft);border-color:var(--color-border-draft);color:var(--color-draft)}._var-indicator__container--draft_1m025_48:hover,._var-indicator__container--rejected_1m025_49:hover{background-color:var(--color-background-draft-hover);color:var(--color-draft-hover)}._var-indicator__container--submitted_1m025_61{background-color:var(--color-background-submitted);border-color:var(--color-border-submitted);color:var(--color-submitted)}._var-indicator__container--submitted_1m025_61:hover{background-color:var(--color-background-submitted-hover);color:var(--color-submitted-hover)}._var-indicator__container--active_1m025_72{background-color:var(--color-background-active);border-color:var(--color-border-active);color:var(--color-active)}._var-indicator__container--active_1m025_72:hover{background-color:var(--color-background-active-hover);color:var(--color-active-hover)}._var-indicator__label_1m025_83{color:var(--color-label)}._var-indicator__container--submitted_1m025_61:hover ._var-indicator__label_1m025_83,._var-indicator__container--draft_1m025_48:hover ._var-indicator__label_1m025_83,._var-indicator__container--rejected_1m025_49:hover ._var-indicator__label_1m025_83,._var-indicator__container--active_1m025_72:hover ._var-indicator__label_1m025_83{color:var(--color-uva-white)}._var-indicator__step-container_1m025_94{align-items:center;display:inline flex;height:100%;justify-content:flex-start}._var-indicator__step-container_1m025_94 svg{margin:0 -.5rem}

package/dist/components/CheckboxButton/CheckboxButton.d.ts

@@ -3,14 +3,10 @@ export interface CheckboxButtonProps {
     value: string;
     /** to set default status */
     isChecked?: boolean;
-    /** The button variant. */
-    variant?: 'single' | 'start' | 'middle' | 'end';
     /** `true` to disable the button; otherwise, `false`. The default is `false`. */
     disabled?: boolean;
-    /** if set border becomes red */
-    notValid?: boolean;
     /** The callback function that is invoked when the checkbox button changes value. */
     onSetValue: (value: string | null) => void;
 }
 /** Represents a component that acts as a checkbox, it's either set or unset. */
-export declare const CheckboxButton: ({ label, value, isChecked, variant, disabled, notValid, onSetValue, }: CheckboxButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckboxButton: ({ label, value, isChecked, disabled, onSetValue }: CheckboxButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/CheckboxButton/CheckboxButton.js

@@ -1,51 +1,28 @@
-import { jsxs as i, jsx as n } from "react/jsx-runtime";
-import { c as d } from "../../clsx-OuTLNxxd.js";
-import { useId as l, useState as m } from "react";
-import '../../assets/CheckboxButton.css';const t = {
-  "checkbox-button__container": "_checkbox-button__container_bnmy8_1",
-  "checkbox-button": "_checkbox-button_bnmy8_1",
-  "checkbox-button--not-valid": "_checkbox-button--not-valid_bnmy8_59",
-  "checkbox-button--single": "_checkbox-button--single_bnmy8_69",
-  "checkbox-button--start": "_checkbox-button--start_bnmy8_73",
-  "checkbox-button--middle": "_checkbox-button--middle_bnmy8_77",
-  "checkbox-button--end": "_checkbox-button--end_bnmy8_84"
-}, f = ({
-  label: c,
-  value: b,
-  isChecked: h = !1,
-  variant: _ = "single",
-  disabled: s,
-  notValid: u,
-  onSetValue: x
-}) => {
-  const e = l(), [k, a] = m(h), r = (o) => {
-    a(o.target.checked), x(o.target.checked ? o.target.value : null);
+import { jsxs as x, jsx as o } from "react/jsx-runtime";
+import { useId as _, useState as i } from "react";
+import '../../assets/CheckboxButton.css';const n = {
+  "checkbox-button__container": "_checkbox-button__container_1q8j8_1",
+  "checkbox-button": "_checkbox-button_1q8j8_1"
+}, m = ({ label: t, value: s, isChecked: h = !1, disabled: r, onSetValue: a }) => {
+  const c = _(), [b, u] = i(h), k = (e) => {
+    u(e.target.checked), a(e.target.checked ? e.target.value : null);
   };
-  return /* @__PURE__ */ i("span", { className: t["checkbox-button__container"], children: [
-    /* @__PURE__ */ n(
+  return /* @__PURE__ */ x("span", { className: n["checkbox-button__container"], children: [
+    /* @__PURE__ */ o(
       "input",
       {
         type: "checkbox",
-        id: `${e}${c}`,
-        disabled: s,
-        value: b,
-        checked: k,
-        onChange: r
+        id: `${c}${t}`,
+        disabled: r,
+        value: s,
+        checked: b,
+        onChange: k
       }
     ),
-    /* @__PURE__ */ n(
-      "label",
-      {
-        htmlFor: `${e}${c}`,
-        className: d(t["checkbox-button"], t[`checkbox-button--${_}`], {
-          [t["checkbox-button--not-valid"]]: u
-        }),
-        children: c
-      }
-    )
+    /* @__PURE__ */ o("label", { htmlFor: `${c}${t}`, className: n["checkbox-button"], children: t })
   ] });
 };
 export {
-  f as CheckboxButton
+  m as CheckboxButton
 };
 //# sourceMappingURL=CheckboxButton.js.map

package/dist/components/CheckboxButton/CheckboxButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxButton.js","sources":["../../../src/components/CheckboxButton/CheckboxButton.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { ChangeEvent } from 'react';\n\nimport styles from './CheckboxButton.module.css';\n\nexport interface CheckboxButtonProps {\n  label: string;\n  value: string;\n  /** to set default status */\n  isChecked?: boolean;\n  /** The button variant. */\n  variant?: 'single' | 'start' | 'middle' | 'end';\n  /** `true` to disable the button; otherwise, `false`. The default is `false`. */\n  disabled?: boolean;\n  /** if set border becomes red */\n  notValid?: boolean;\n  /** The callback function that is invoked when the checkbox button changes value. */\n  onSetValue: (value: string | null) => void;\n}\n\n/** Represents a component that acts as a checkbox, it's either set or unset. */\nexport const CheckboxButton = ({\n  label,\n  value,\n  isChecked = false,\n  variant = 'single',\n  disabled,\n  notValid,\n  onSetValue,\n}: CheckboxButtonProps) => {\n  const idPrefix = useId();\n  const [checked, setChecked] = useState(isChecked);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    setChecked(event.target.checked);\n    onSetValue(event.target.checked ? event.target.value : null);\n  };\n\n  return (\n    <span className={styles['checkbox-button__container']}>\n      <input\n        type=\"checkbox\"\n        id={`${idPrefix}${label}`}\n        disabled={disabled}\n        value={value}\n        checked={checked}\n        onChange={handleChange}\n      />\n      <label\n        htmlFor={`${idPrefix}${label}`}\n        className={clsx(styles['checkbox-button'], styles[`checkbox-button--${variant}`], {\n          [styles['checkbox-button--not-valid']]: notValid,\n        })}\n      >\n        {label}\n      </label>\n    </span>\n  );\n};\n"],"names":["CheckboxButton","label","value","isChecked","variant","disabled","notValid","onSetValue","idPrefix","useId","checked","setChecked","useState","handleChange","event","jsxs","styles","jsx","clsx"],"mappings":";;;;;;;;;;;GAuBaA,IAAiB,CAAC;AAAA,EAC7B,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,SAAAC,IAAU;AAAA,EACV,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AACF,MAA2B;AACzB,QAAMC,IAAWC,EAAM,GACjB,CAACC,GAASC,CAAU,IAAIC,EAAST,CAAS,GAE1CU,IAAe,CAACC,MAAyC;AAClD,IAAAH,EAAAG,EAAM,OAAO,OAAO,GAC/BP,EAAWO,EAAM,OAAO,UAAUA,EAAM,OAAO,QAAQ,IAAI;AAAA,EAC7D;AAEA,SACG,gBAAAC,EAAA,QAAA,EAAK,WAAWC,EAAO,4BAA4B,GAClD,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,IAAI,GAAGT,CAAQ,GAAGP,CAAK;AAAA,QACvB,UAAAI;AAAA,QACA,OAAAH;AAAA,QACA,SAAAQ;AAAA,QACA,UAAUG;AAAA,MAAA;AAAA,IACZ;AAAA,IACA,gBAAAI;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS,GAAGT,CAAQ,GAAGP,CAAK;AAAA,QAC5B,WAAWiB,EAAKF,EAAO,iBAAiB,GAAGA,EAAO,oBAAoBZ,CAAO,EAAE,GAAG;AAAA,UAChF,CAACY,EAAO,4BAA4B,CAAC,GAAGV;AAAA,QAAA,CACzC;AAAA,QAEA,UAAAL;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;"}
+{"version":3,"file":"CheckboxButton.js","sources":["../../../src/components/CheckboxButton/CheckboxButton.tsx"],"sourcesContent":["import { useId, useState } from 'react';\n\nimport type { ChangeEvent } from 'react';\n\nimport styles from './CheckboxButton.module.css';\n\nexport interface CheckboxButtonProps {\n  label: string;\n  value: string;\n  /** to set default status */\n  isChecked?: boolean;\n  /** `true` to disable the button; otherwise, `false`. The default is `false`. */\n  disabled?: boolean;\n  /** The callback function that is invoked when the checkbox button changes value. */\n  onSetValue: (value: string | null) => void;\n}\n\n/** Represents a component that acts as a checkbox, it's either set or unset. */\nexport const CheckboxButton = ({ label, value, isChecked = false, disabled, onSetValue }: CheckboxButtonProps) => {\n  const idPrefix = useId();\n  const [checked, setChecked] = useState(isChecked);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    setChecked(event.target.checked);\n    onSetValue(event.target.checked ? event.target.value : null);\n  };\n\n  return (\n    <span className={styles['checkbox-button__container']}>\n      <input\n        type=\"checkbox\"\n        id={`${idPrefix}${label}`}\n        disabled={disabled}\n        value={value}\n        checked={checked}\n        onChange={handleChange}\n      />\n      <label htmlFor={`${idPrefix}${label}`} className={styles['checkbox-button']}>\n        {label}\n      </label>\n    </span>\n  );\n};\n"],"names":["CheckboxButton","label","value","isChecked","disabled","onSetValue","idPrefix","useId","checked","setChecked","useState","handleChange","event","jsxs","styles","jsx"],"mappings":";;;;;GAkBaA,IAAiB,CAAC,EAAE,OAAAC,GAAO,OAAAC,GAAO,WAAAC,IAAY,IAAO,UAAAC,GAAU,YAAAC,QAAsC;AAChH,QAAMC,IAAWC,EAAM,GACjB,CAACC,GAASC,CAAU,IAAIC,EAASP,CAAS,GAE1CQ,IAAe,CAACC,MAAyC;AAClD,IAAAH,EAAAG,EAAM,OAAO,OAAO,GAC/BP,EAAWO,EAAM,OAAO,UAAUA,EAAM,OAAO,QAAQ,IAAI;AAAA,EAC7D;AAEA,SACG,gBAAAC,EAAA,QAAA,EAAK,WAAWC,EAAO,4BAA4B,GAClD,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,IAAI,GAAGT,CAAQ,GAAGL,CAAK;AAAA,QACvB,UAAAG;AAAA,QACA,OAAAF;AAAA,QACA,SAAAM;AAAA,QACA,UAAUG;AAAA,MAAA;AAAA,IACZ;AAAA,IACC,gBAAAI,EAAA,SAAA,EAAM,SAAS,GAAGT,CAAQ,GAAGL,CAAK,IAAI,WAAWa,EAAO,iBAAiB,GACvE,UACHb,EAAA,CAAA;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/CheckboxButton/CheckboxButton.stories.js

@@ -1,9 +1,9 @@
-import { jsx as e } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
 import { fn as n } from "../../index-BCvy9BiK.js";
-import { CheckboxButton as o } from "./CheckboxButton.js";
+import { CheckboxButton as e } from "./CheckboxButton.js";
 const a = "<CheckboxButton label={} value={} isChecked={} variant={} disabled={} notValid={} onSetValue={} key={} />", b = {
   title: "Atoms/CheckboxButton",
-  component: o,
+  component: e,
   argTypes: {
     label: {
       control: "text"
@@ -14,16 +14,9 @@ const a = "<CheckboxButton label={} value={} isChecked={} variant={} disabled={}
     isChecked: {
       control: "boolean"
     },
-    variant: {
-      options: ["single", "start", "middle", "end"],
-      control: "radio"
-    },
     disabled: {
       control: "boolean"
     },
-    notValid: {
-      control: "boolean"
-    },
     onSetValue: {
       table: {
         disable: !0
@@ -31,14 +24,13 @@ const a = "<CheckboxButton label={} value={} isChecked={} variant={} disabled={}
     }
   },
   parameters: {
-    inspectComponent: o,
+    inspectComponent: e,
     codeString: a
   }
-}, l = (t) => /* @__PURE__ */ e(o, { ...t }), r = l.bind({});
+}, l = (o) => /* @__PURE__ */ t(e, { ...o }), r = l.bind({});
 r.args = {
   label: "1.2",
   value: "1.2",
-  variant: "single",
   onSetValue: n()
 };
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxButton.stories.js","sources":["../../../src/components/CheckboxButton/CheckboxButton.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { CheckboxButtonProps } from './CheckboxButton';\n\nimport { CheckboxButton } from './CheckboxButton';\n\nconst codeString =\n  '<CheckboxButton label={} value={} isChecked={} variant={} disabled={} notValid={} onSetValue={} key={} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/CheckboxButton',\n  component: CheckboxButton,\n  argTypes: {\n    label: {\n      control: 'text',\n    },\n    value: {\n      control: 'string',\n    },\n    isChecked: {\n      control: 'boolean',\n    },\n    variant: {\n      options: ['single', 'start', 'middle', 'end'],\n      control: 'radio',\n    },\n    disabled: {\n      control: 'boolean',\n    },\n    notValid: {\n      control: 'boolean',\n    },\n    onSetValue: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    inspectComponent: CheckboxButton,\n    codeString: codeString,\n  },\n} as Meta<CheckboxButtonProps>;\n\nconst Template: StoryFn<CheckboxButtonProps> = (args) => <CheckboxButton {...args} />;\n\nexport const CheckboxButtonExample = Template.bind({});\nCheckboxButtonExample.args = {\n  label: '1.2',\n  value: '1.2',\n  variant: 'single',\n  onSetValue: fn(),\n};\n"],"names":["codeString","CheckboxButton_stories","CheckboxButton","Template","args","jsx","CheckboxButtonExample","fn"],"mappings":";;;AAOA,MAAMA,IACJ,6GAGaC,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,WAAW;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA,SAAS;AAAA,MACP,SAAS,CAAC,UAAU,SAAS,UAAU,KAAK;AAAA,MAC5C,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACR,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,OAAO;AAAA,EACP,OAAO;AAAA,EACP,SAAS;AAAA,EACT,YAAYC,EAAG;AACjB;"}
+{"version":3,"file":"CheckboxButton.stories.js","sources":["../../../src/components/CheckboxButton/CheckboxButton.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { CheckboxButtonProps } from './CheckboxButton';\n\nimport { CheckboxButton } from './CheckboxButton';\n\nconst codeString =\n  '<CheckboxButton label={} value={} isChecked={} variant={} disabled={} notValid={} onSetValue={} key={} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/CheckboxButton',\n  component: CheckboxButton,\n  argTypes: {\n    label: {\n      control: 'text',\n    },\n    value: {\n      control: 'string',\n    },\n    isChecked: {\n      control: 'boolean',\n    },\n    disabled: {\n      control: 'boolean',\n    },\n    onSetValue: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    inspectComponent: CheckboxButton,\n    codeString: codeString,\n  },\n} as Meta<CheckboxButtonProps>;\n\nconst Template: StoryFn<CheckboxButtonProps> = (args) => <CheckboxButton {...args} />;\n\nexport const CheckboxButtonExample = Template.bind({});\nCheckboxButtonExample.args = {\n  label: '1.2',\n  value: '1.2',\n  onSetValue: fn(),\n};\n"],"names":["codeString","CheckboxButton_stories","CheckboxButton","Template","args","jsx","CheckboxButtonExample","fn"],"mappings":";;;AAOA,MAAMA,IACJ,6GAGaC,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,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,OAAO;AAAA,EACP,OAAO;AAAA,EACP,YAAYC,EAAG;AACjB;"}

package/dist/components/CheckboxButton/CheckboxButton.test.js

@@ -1,51 +1,21 @@
-import { jsx as l } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
 import "../../index-BqLi4tOb.js";
-import { r as n, s as t } from "../../react.esm-CsMDid07.js";
-import { CheckboxButton as a } from "./CheckboxButton.js";
-const c = jest.fn();
+import { r as c, s as l } from "../../react.esm-CsMDid07.js";
+import { CheckboxButton as n } from "./CheckboxButton.js";
+const o = jest.fn();
 describe("CheckboxButton", () => {
   it("should render", () => {
-    n(/* @__PURE__ */ l(a, { label: "2.1", value: "4", onSetValue: c }));
-    const e = t.getByRole("checkbox");
+    c(/* @__PURE__ */ t(n, { label: "2.1", value: "4", onSetValue: o }));
+    const e = l.getByRole("checkbox");
     expect(e).toBeInTheDocument();
   }), it("should be checked if clicked", () => {
-    n(/* @__PURE__ */ l(a, { label: "2.1", value: "4", onSetValue: c }));
-    const e = t.getByRole("checkbox");
-    expect(e).toBeInTheDocument(), e.click(), expect(e).toBeChecked(), expect(c).toHaveBeenCalledTimes(1);
+    c(/* @__PURE__ */ t(n, { label: "2.1", value: "4", onSetValue: o }));
+    const e = l.getByRole("checkbox");
+    expect(e).toBeInTheDocument(), e.click(), expect(e).toBeChecked(), expect(o).toHaveBeenCalledTimes(1);
   }), it("should be disabled", () => {
-    n(/* @__PURE__ */ l(a, { label: "2.1", value: "4", onSetValue: c, disabled: !0 }));
-    const e = t.getByRole("checkbox");
+    c(/* @__PURE__ */ t(n, { label: "2.1", value: "4", onSetValue: o, disabled: !0 }));
+    const e = l.getByRole("checkbox");
     expect(e).toBeInTheDocument(), expect(e).toBeDisabled();
-  }), it("should show noValid", () => {
-    n(/* @__PURE__ */ l(a, { label: "2.1", value: "4", onSetValue: c, notValid: !0 }));
-    const e = t.getByRole("checkbox");
-    expect(e).toBeInTheDocument();
-    const o = t.getByText("2.1");
-    expect(o).toHaveClass("checkbox-button--not-valid");
-  }), it("should render single variant", () => {
-    n(/* @__PURE__ */ l(a, { label: "2.1", value: "4", onSetValue: c, notValid: !0 }));
-    const e = t.getByRole("checkbox");
-    expect(e).toBeInTheDocument();
-    const o = t.getByText("2.1");
-    expect(o).toHaveClass("checkbox-button--single");
-  }), it("should render start variant", () => {
-    n(/* @__PURE__ */ l(a, { label: "2.1", value: "4", onSetValue: c, notValid: !0, variant: "start" }));
-    const e = t.getByRole("checkbox");
-    expect(e).toBeInTheDocument();
-    const o = t.getByText("2.1");
-    expect(o).toHaveClass("checkbox-button--start");
-  }), it("should render middle variant", () => {
-    n(/* @__PURE__ */ l(a, { label: "2.1", value: "4", onSetValue: c, notValid: !0, variant: "middle" }));
-    const e = t.getByRole("checkbox");
-    expect(e).toBeInTheDocument();
-    const o = t.getByText("2.1");
-    expect(o).toHaveClass("checkbox-button--middle");
-  }), it("should render end variant", () => {
-    n(/* @__PURE__ */ l(a, { label: "2.1", value: "4", onSetValue: c, notValid: !0, variant: "end" }));
-    const e = t.getByRole("checkbox");
-    expect(e).toBeInTheDocument();
-    const o = t.getByText("2.1");
-    expect(o).toHaveClass("checkbox-button--end");
   });
 });
 //# sourceMappingURL=CheckboxButton.test.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxButton.test.js","sources":["../../../src/components/CheckboxButton/CheckboxButton.test.tsx"],"sourcesContent":["import '@testing-library/jest-dom';\nimport { render, screen } from '@testing-library/react';\n\nimport { CheckboxButton } from './CheckboxButton';\n\nconst onClickSpy = jest.fn();\n\ndescribe('CheckboxButton', () => {\n  it('should render', () => {\n    render(<CheckboxButton label=\"2.1\" value=\"4\" onSetValue={onClickSpy} />);\n    const checkbox = screen.getByRole('checkbox');\n    expect(checkbox).toBeInTheDocument();\n  });\n\n  it('should be checked if clicked', () => {\n    render(<CheckboxButton label=\"2.1\" value=\"4\" onSetValue={onClickSpy} />);\n    const checkbox = screen.getByRole('checkbox');\n    expect(checkbox).toBeInTheDocument();\n    checkbox.click();\n    expect(checkbox).toBeChecked();\n    expect(onClickSpy).toHaveBeenCalledTimes(1);\n  });\n\n  it('should be disabled', () => {\n    render(<CheckboxButton label=\"2.1\" value=\"4\" onSetValue={onClickSpy} disabled={true} />);\n    const checkbox = screen.getByRole('checkbox');\n    expect(checkbox).toBeInTheDocument();\n    expect(checkbox).toBeDisabled();\n  });\n\n  it('should show noValid', () => {\n    render(<CheckboxButton label=\"2.1\" value=\"4\" onSetValue={onClickSpy} notValid={true} />);\n    const checkbox = screen.getByRole('checkbox');\n    expect(checkbox).toBeInTheDocument();\n    const label = screen.getByText('2.1');\n    expect(label).toHaveClass('checkbox-button--not-valid');\n  });\n\n  it('should render single variant', () => {\n    render(<CheckboxButton label=\"2.1\" value=\"4\" onSetValue={onClickSpy} notValid={true} />);\n    const checkbox = screen.getByRole('checkbox');\n    expect(checkbox).toBeInTheDocument();\n    const label = screen.getByText('2.1');\n    expect(label).toHaveClass('checkbox-button--single');\n  });\n\n  it('should render start variant', () => {\n    render(<CheckboxButton label=\"2.1\" value=\"4\" onSetValue={onClickSpy} notValid={true} variant=\"start\" />);\n    const checkbox = screen.getByRole('checkbox');\n    expect(checkbox).toBeInTheDocument();\n    const label = screen.getByText('2.1');\n    expect(label).toHaveClass('checkbox-button--start');\n  });\n\n  it('should render middle variant', () => {\n    render(<CheckboxButton label=\"2.1\" value=\"4\" onSetValue={onClickSpy} notValid={true} variant=\"middle\" />);\n    const checkbox = screen.getByRole('checkbox');\n    expect(checkbox).toBeInTheDocument();\n    const label = screen.getByText('2.1');\n    expect(label).toHaveClass('checkbox-button--middle');\n  });\n\n  it('should render end variant', () => {\n    render(<CheckboxButton label=\"2.1\" value=\"4\" onSetValue={onClickSpy} notValid={true} variant=\"end\" />);\n    const checkbox = screen.getByRole('checkbox');\n    expect(checkbox).toBeInTheDocument();\n    const label = screen.getByText('2.1');\n    expect(label).toHaveClass('checkbox-button--end');\n  });\n});\n"],"names":["onClickSpy","render","jsx","CheckboxButton","checkbox","screen","label"],"mappings":";;;;AAKA,MAAMA,IAAa,KAAK,GAAG;AAE3B,SAAS,kBAAkB,MAAM;AAC/B,KAAG,iBAAiB,MAAM;AACjB,IAAAC,EAAA,gBAAAC,EAACC,KAAe,OAAM,OAAM,OAAM,KAAI,YAAYH,GAAY,CAAE;AACjE,UAAAI,IAAWC,EAAO,UAAU,UAAU;AACrC,WAAAD,CAAQ,EAAE,kBAAkB;AAAA,EAAA,CACpC,GAED,GAAG,gCAAgC,MAAM;AAChC,IAAAH,EAAA,gBAAAC,EAACC,KAAe,OAAM,OAAM,OAAM,KAAI,YAAYH,GAAY,CAAE;AACjE,UAAAI,IAAWC,EAAO,UAAU,UAAU;AACrC,WAAAD,CAAQ,EAAE,kBAAkB,GACnCA,EAAS,MAAM,GACR,OAAAA,CAAQ,EAAE,YAAY,GACtB,OAAAJ,CAAU,EAAE,sBAAsB,CAAC;AAAA,EAAA,CAC3C,GAED,GAAG,sBAAsB,MAAM;AACtB,IAAAC,EAAA,gBAAAC,EAACC,GAAe,EAAA,OAAM,OAAM,OAAM,KAAI,YAAYH,GAAY,UAAU,GAAM,CAAA,CAAE;AACjF,UAAAI,IAAWC,EAAO,UAAU,UAAU;AACrC,WAAAD,CAAQ,EAAE,kBAAkB,GAC5B,OAAAA,CAAQ,EAAE,aAAa;AAAA,EAAA,CAC/B,GAED,GAAG,uBAAuB,MAAM;AACvB,IAAAH,EAAA,gBAAAC,EAACC,GAAe,EAAA,OAAM,OAAM,OAAM,KAAI,YAAYH,GAAY,UAAU,GAAM,CAAA,CAAE;AACjF,UAAAI,IAAWC,EAAO,UAAU,UAAU;AACrC,WAAAD,CAAQ,EAAE,kBAAkB;AAC7B,UAAAE,IAAQD,EAAO,UAAU,KAAK;AAC7B,WAAAC,CAAK,EAAE,YAAY,4BAA4B;AAAA,EAAA,CACvD,GAED,GAAG,gCAAgC,MAAM;AAChC,IAAAL,EAAA,gBAAAC,EAACC,GAAe,EAAA,OAAM,OAAM,OAAM,KAAI,YAAYH,GAAY,UAAU,GAAM,CAAA,CAAE;AACjF,UAAAI,IAAWC,EAAO,UAAU,UAAU;AACrC,WAAAD,CAAQ,EAAE,kBAAkB;AAC7B,UAAAE,IAAQD,EAAO,UAAU,KAAK;AAC7B,WAAAC,CAAK,EAAE,YAAY,yBAAyB;AAAA,EAAA,CACpD,GAED,GAAG,+BAA+B,MAAM;AACtC,IAAAL,EAAQ,gBAAAC,EAAAC,GAAA,EAAe,OAAM,OAAM,OAAM,KAAI,YAAYH,GAAY,UAAU,IAAM,SAAQ,QAAQ,CAAA,CAAE;AACjG,UAAAI,IAAWC,EAAO,UAAU,UAAU;AACrC,WAAAD,CAAQ,EAAE,kBAAkB;AAC7B,UAAAE,IAAQD,EAAO,UAAU,KAAK;AAC7B,WAAAC,CAAK,EAAE,YAAY,wBAAwB;AAAA,EAAA,CACnD,GAED,GAAG,gCAAgC,MAAM;AACvC,IAAAL,EAAQ,gBAAAC,EAAAC,GAAA,EAAe,OAAM,OAAM,OAAM,KAAI,YAAYH,GAAY,UAAU,IAAM,SAAQ,SAAS,CAAA,CAAE;AAClG,UAAAI,IAAWC,EAAO,UAAU,UAAU;AACrC,WAAAD,CAAQ,EAAE,kBAAkB;AAC7B,UAAAE,IAAQD,EAAO,UAAU,KAAK;AAC7B,WAAAC,CAAK,EAAE,YAAY,yBAAyB;AAAA,EAAA,CACpD,GAED,GAAG,6BAA6B,MAAM;AACpC,IAAAL,EAAQ,gBAAAC,EAAAC,GAAA,EAAe,OAAM,OAAM,OAAM,KAAI,YAAYH,GAAY,UAAU,IAAM,SAAQ,MAAM,CAAA,CAAE;AAC/F,UAAAI,IAAWC,EAAO,UAAU,UAAU;AACrC,WAAAD,CAAQ,EAAE,kBAAkB;AAC7B,UAAAE,IAAQD,EAAO,UAAU,KAAK;AAC7B,WAAAC,CAAK,EAAE,YAAY,sBAAsB;AAAA,EAAA,CACjD;AACH,CAAC;"}
+{"version":3,"file":"CheckboxButton.test.js","sources":["../../../src/components/CheckboxButton/CheckboxButton.test.tsx"],"sourcesContent":["import '@testing-library/jest-dom';\nimport { render, screen } from '@testing-library/react';\n\nimport { CheckboxButton } from './CheckboxButton';\n\nconst onClickSpy = jest.fn();\n\ndescribe('CheckboxButton', () => {\n  it('should render', () => {\n    render(<CheckboxButton label=\"2.1\" value=\"4\" onSetValue={onClickSpy} />);\n    const checkbox = screen.getByRole('checkbox');\n    expect(checkbox).toBeInTheDocument();\n  });\n\n  it('should be checked if clicked', () => {\n    render(<CheckboxButton label=\"2.1\" value=\"4\" onSetValue={onClickSpy} />);\n    const checkbox = screen.getByRole('checkbox');\n    expect(checkbox).toBeInTheDocument();\n    checkbox.click();\n    expect(checkbox).toBeChecked();\n    expect(onClickSpy).toHaveBeenCalledTimes(1);\n  });\n\n  it('should be disabled', () => {\n    render(<CheckboxButton label=\"2.1\" value=\"4\" onSetValue={onClickSpy} disabled={true} />);\n    const checkbox = screen.getByRole('checkbox');\n    expect(checkbox).toBeInTheDocument();\n    expect(checkbox).toBeDisabled();\n  });\n});\n"],"names":["onClickSpy","render","jsx","CheckboxButton","checkbox","screen"],"mappings":";;;;AAKA,MAAMA,IAAa,KAAK,GAAG;AAE3B,SAAS,kBAAkB,MAAM;AAC/B,KAAG,iBAAiB,MAAM;AACjB,IAAAC,EAAA,gBAAAC,EAACC,KAAe,OAAM,OAAM,OAAM,KAAI,YAAYH,GAAY,CAAE;AACjE,UAAAI,IAAWC,EAAO,UAAU,UAAU;AACrC,WAAAD,CAAQ,EAAE,kBAAkB;AAAA,EAAA,CACpC,GAED,GAAG,gCAAgC,MAAM;AAChC,IAAAH,EAAA,gBAAAC,EAACC,KAAe,OAAM,OAAM,OAAM,KAAI,YAAYH,GAAY,CAAE;AACjE,UAAAI,IAAWC,EAAO,UAAU,UAAU;AACrC,WAAAD,CAAQ,EAAE,kBAAkB,GACnCA,EAAS,MAAM,GACR,OAAAA,CAAQ,EAAE,YAAY,GACtB,OAAAJ,CAAU,EAAE,sBAAsB,CAAC;AAAA,EAAA,CAC3C,GAED,GAAG,sBAAsB,MAAM;AACtB,IAAAC,EAAA,gBAAAC,EAACC,GAAe,EAAA,OAAM,OAAM,OAAM,KAAI,YAAYH,GAAY,UAAU,GAAM,CAAA,CAAE;AACjF,UAAAI,IAAWC,EAAO,UAAU,UAAU;AACrC,WAAAD,CAAQ,EAAE,kBAAkB,GAC5B,OAAAA,CAAQ,EAAE,aAAa;AAAA,EAAA,CAC/B;AACH,CAAC;"}

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

@@ -10,13 +10,16 @@ export interface CheckboxButtonBarProps {
     label?: string;
     /** 'top' | 'left' */
     labelPosition?: 'top' | 'left';
+    /** `true` to show an asterisk to indicate an item is required; otherwise, `false`. */
     required?: boolean;
-    /** error text to display if set */
+    /** `true` to color border red to show missing in validation; otherwise, `false`. */
+    notValidated?: boolean;
+    /** error text to display under the bar */
     notValidatedText?: string;
     /** disables all checkboxes in the bar */
     disableGroup?: boolean;
     onSetValues: (value: string[]) => void;
 }
 /** Represents a component that shows a collection of [CheckboxButton](/story/atoms-checkboxbutton--checkbox-button-example)s. */
-export declare const CheckboxButtonBar: ({ checkboxes, defaultValues, label, labelPosition, required, notValidatedText, disableGroup, onSetValues, }: CheckboxButtonBarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckboxButtonBar: ({ checkboxes, defaultValues, label, labelPosition, required, notValidated, notValidatedText, disableGroup, onSetValues, }: CheckboxButtonBarProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/CheckboxButtonBar/CheckboxButtonBar.js

@@ -1,62 +1,66 @@
-import { jsxs as a, jsx as c } from "react/jsx-runtime";
-import { useRef as d } from "react";
-import { c as v } from "../../clsx-OuTLNxxd.js";
-import { CheckboxButton as y } from "../CheckboxButton/CheckboxButton.js";
-import { Label as g } from "../Label/Label.js";
-import { Icon as w } from "../Icon/Icon.js";
-import '../../assets/CheckboxButtonBar.css';const n = {
-  "checkbox-button-bar__container": "_checkbox-button-bar__container_y43lv_1",
-  "checkbox-button-bar__container--label-left": "_checkbox-button-bar__container--label-left_y43lv_6",
-  "checkbox-button-bar__container--label-top": "_checkbox-button-bar__container--label-top_y43lv_12",
-  "checkbox-button-bar__row-container": "_checkbox-button-bar__row-container_y43lv_19",
-  "checkbox-button-bar__row": "_checkbox-button-bar__row_y43lv_19",
-  "checkbox-button-bar__error": "_checkbox-button-bar__error_y43lv_30"
-}, $ = ({
-  checkboxes: l,
+import { jsxs as i, jsx as c } from "react/jsx-runtime";
+import { useRef as p } from "react";
+import { c as l } from "../../clsx-OuTLNxxd.js";
+import { CheckboxButton as w } from "../CheckboxButton/CheckboxButton.js";
+import { Label as z } from "../Label/Label.js";
+import { FeedbackBox as v } from "../FeedbackBox/FeedbackBox.js";
+import '../../assets/CheckboxButtonBar.css';const r = {
+  "checkbox-button-bar__container": "_checkbox-button-bar__container_e14sz_1",
+  "checkbox-button-bar__container--label-left": "_checkbox-button-bar__container--label-left_e14sz_6",
+  "checkbox-button-bar__container--label-top": "_checkbox-button-bar__container--label-top_e14sz_12",
+  "checkbox-button-bar__row-container": "_checkbox-button-bar__row-container_e14sz_18",
+  "checkbox-button-bar__row": "_checkbox-button-bar__row_e14sz_18",
+  "checkbox-button-bar__row--not-validated": "_checkbox-button-bar__row--not-validated_e14sz_35"
+}, S = ({
+  checkboxes: s,
   defaultValues: t,
-  label: i,
-  labelPosition: s = "top",
-  required: h = !1,
+  label: a,
+  labelPosition: h = "top",
+  required: k = !1,
+  notValidated: x = !1,
   notValidatedText: b = "",
   disableGroup: u = !1,
   onSetValues: m
 }) => {
-  const e = d(t ? t.map(String) : []), x = (o, r) => {
-    o === null ? e.current = e.current.filter((_) => _ !== r) : e.current = [...e.current, r], m(e.current);
-  }, k = (o, r) => o === 0 && r !== 1 ? "start" : o < r - 1 ? "middle" : r === 1 ? "single" : "end";
-  return /* @__PURE__ */ a(
+  const e = p(t ? t.map(String) : []), d = (n, o) => {
+    n === null ? e.current = e.current.filter((_) => _ !== o) : e.current = [...e.current, o], m(e.current);
+  };
+  return /* @__PURE__ */ i(
     "div",
     {
-      className: v(
-        n["checkbox-button-bar__container"],
-        n[`checkbox-button-bar__container--label-${s}`]
+      className: l(
+        r["checkbox-button-bar__container"],
+        r[`checkbox-button-bar__container--label-${h}`]
       ),
       children: [
-        i && /* @__PURE__ */ c(g, { htmlFor: "", required: h, children: i }),
-        /* @__PURE__ */ a("div", { className: n["checkbox-button-bar__row-container"], children: [
-          /* @__PURE__ */ c("div", { className: n["checkbox-button-bar__row"], children: l.map(({ label: o, value: r, disabled: _ }, f) => /* @__PURE__ */ c(
-            y,
+        a && /* @__PURE__ */ c(z, { htmlFor: "", required: k, children: a }),
+        /* @__PURE__ */ i("div", { className: r["checkbox-button-bar__row-container"], children: [
+          /* @__PURE__ */ c(
+            "div",
             {
-              label: o,
-              value: r,
-              isChecked: t ? t.includes(r) : !1,
-              variant: k(f, l.length),
-              disabled: _ || u,
-              notValid: b !== "",
-              onSetValue: (p) => x(p, r)
-            },
-            `${r}`
-          )) }),
-          b !== "" && /* @__PURE__ */ a("div", { className: n["checkbox-button-bar__error"], children: [
-            /* @__PURE__ */ c(w, { name: "ExclamationTriangleFill", size: 24 }),
-            b
-          ] })
+              className: l(r["checkbox-button-bar__row"], {
+                [r["checkbox-button-bar__row--not-validated"]]: x || b
+              }),
+              children: s.map(({ label: n, value: o, disabled: _ }) => /* @__PURE__ */ c(
+                w,
+                {
+                  label: n,
+                  value: o,
+                  isChecked: t ? t.includes(o) : !1,
+                  disabled: _ || u,
+                  onSetValue: (f) => d(f, o)
+                },
+                `${o}`
+              ))
+            }
+          ),
+          b !== "" && /* @__PURE__ */ c(v, { level: "error", feedback: b })
         ] })
       ]
     }
   );
 };
 export {
-  $ as CheckboxButtonBar
+  S 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 { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport type { CheckboxButtonProps } from 'components/CheckboxButton';\n\nimport styles from './CheckboxButtonBar.module.css';\n\nimport { CheckboxButton } from 'components/CheckboxButton';\nimport { Label } from 'components/Label';\nimport { Icon } from 'components/Icon';\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 values */\n  defaultValues?: string[];\n  label?: string;\n  /** 'top' | 'left' */\n  labelPosition?: 'top' | 'left';\n  required?: boolean;\n  /** error text to display if set */\n  notValidatedText?: string;\n  /** disables all checkboxes in the bar */\n  disableGroup?: boolean;\n  onSetValues: (value: string[]) => void;\n}\n\n/** Represents a component that shows a collection of [CheckboxButton](/story/atoms-checkboxbutton--checkbox-button-example)s. */\nexport const CheckboxButtonBar = ({\n  checkboxes,\n  defaultValues,\n  label,\n  labelPosition = 'top',\n  required = false,\n  notValidatedText = '',\n  disableGroup = false,\n  onSetValues,\n}: CheckboxButtonBarProps) => {\n  const values = useRef<string[]>(defaultValues ? defaultValues.map(String) : []);\n\n  const handleChange = (setValue: string | null, value: string) => {\n    if (setValue === null) {\n      values.current = values.current.filter((val) => val !== value);\n    } else {\n      values.current = [...values.current, value];\n    }\n    onSetValues(values.current);\n  };\n\n  const getVariant = (index: number, totalItems: number): CheckboxButtonProps['variant'] => {\n    if (index === 0 && totalItems !== 1) {\n      return 'start';\n    } else if (index < totalItems - 1) {\n      return 'middle';\n    } else if (totalItems === 1) {\n      return 'single';\n    } else {\n      return 'end';\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 className={styles['checkbox-button-bar__row']}>\n          {checkboxes.map(({ label, value, disabled }, index) => (\n            <CheckboxButton\n              key={`${value}`}\n              label={label}\n              value={value}\n              isChecked={defaultValues ? defaultValues.includes(value) : false}\n              variant={getVariant(index, checkboxes.length)}\n              disabled={disabled || disableGroup}\n              notValid={notValidatedText !== ''}\n              onSetValue={(newValue) => handleChange(newValue, value)}\n            />\n          ))}\n        </div>\n        {notValidatedText !== '' && (\n          <div className={styles['checkbox-button-bar__error']}>\n            <Icon name=\"ExclamationTriangleFill\" size={24} />\n            {notValidatedText}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["CheckboxButtonBar","checkboxes","defaultValues","label","labelPosition","required","notValidatedText","disableGroup","onSetValues","values","useRef","handleChange","setValue","value","val","getVariant","index","totalItems","jsxs","clsx","styles","jsx","Label","disabled","CheckboxButton","newValue","Icon"],"mappings":";;;;;;;;;;;;;GAkCaA,IAAoB,CAAC;AAAA,EAChC,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,UAAAC,IAAW;AAAA,EACX,kBAAAC,IAAmB;AAAA,EACnB,cAAAC,IAAe;AAAA,EACf,aAAAC;AACF,MAA8B;AACtB,QAAAC,IAASC,EAAiBR,IAAgBA,EAAc,IAAI,MAAM,IAAI,EAAE,GAExES,IAAe,CAACC,GAAyBC,MAAkB;AAC/D,IAAID,MAAa,OACfH,EAAO,UAAUA,EAAO,QAAQ,OAAO,CAACK,MAAQA,MAAQD,CAAK,IAE7DJ,EAAO,UAAU,CAAC,GAAGA,EAAO,SAASI,CAAK,GAE5CL,EAAYC,EAAO,OAAO;AAAA,EAC5B,GAEMM,IAAa,CAACC,GAAeC,MAC7BD,MAAU,KAAKC,MAAe,IACzB,UACED,IAAQC,IAAa,IACvB,WACEA,MAAe,IACjB,WAEA;AAKT,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTC,EAAO,gCAAgC;AAAA,QACvCA,EAAO,yCAAyChB,CAAa,EAAE;AAAA,MACjE;AAAA,MAEC,UAAA;AAAA,QAAAD,KACE,gBAAAkB,EAAAC,GAAA,EAAM,SAAQ,IAAG,UAAAjB,GACf,UACHF,GAAA;AAAA,QAED,gBAAAe,EAAA,OAAA,EAAI,WAAWE,EAAO,oCAAoC,GACzD,UAAA;AAAA,UAAA,gBAAAC,EAAC,OAAI,EAAA,WAAWD,EAAO,0BAA0B,GAC9C,UAAWnB,EAAA,IAAI,CAAC,EAAE,OAAAE,GAAO,OAAAU,GAAO,UAAAU,EAAA,GAAYP,MAC3C,gBAAAK;AAAA,YAACG;AAAA,YAAA;AAAA,cAEC,OAAOrB;AAAAA,cACP,OAAAU;AAAA,cACA,WAAWX,IAAgBA,EAAc,SAASW,CAAK,IAAI;AAAA,cAC3D,SAASE,EAAWC,GAAOf,EAAW,MAAM;AAAA,cAC5C,UAAUsB,KAAYhB;AAAA,cACtB,UAAUD,MAAqB;AAAA,cAC/B,YAAY,CAACmB,MAAad,EAAac,GAAUZ,CAAK;AAAA,YAAA;AAAA,YAPjD,GAAGA,CAAK;AAAA,UAShB,CAAA,GACH;AAAA,UACCP,MAAqB,MACpB,gBAAAY,EAAC,SAAI,WAAWE,EAAO,4BAA4B,GACjD,UAAA;AAAA,YAAA,gBAAAC,EAACK,GAAK,EAAA,MAAK,2BAA0B,MAAM,IAAI;AAAA,YAC9CpB;AAAA,UAAA,EACH,CAAA;AAAA,QAAA,EAEJ,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"CheckboxButtonBar.js","sources":["../../../src/components/CheckboxButtonBar/CheckboxButtonBar.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport styles from './CheckboxButtonBar.module.css';\n\nimport { CheckboxButton } from 'components/CheckboxButton';\nimport { Label } from 'components/Label';\nimport { FeedbackBox } from 'components/FeedbackBox';\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 values */\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  /** disables all checkboxes in the bar */\n  disableGroup?: boolean;\n  onSetValues: (value: string[]) => void;\n}\n\n/** Represents a component that shows a collection of [CheckboxButton](/story/atoms-checkboxbutton--checkbox-button-example)s. */\nexport const CheckboxButtonBar = ({\n  checkboxes,\n  defaultValues,\n  label,\n  labelPosition = 'top',\n  required = false,\n  notValidated = false,\n  notValidatedText = '',\n  disableGroup = false,\n  onSetValues,\n}: CheckboxButtonBarProps) => {\n  const values = useRef<string[]>(defaultValues ? defaultValues.map(String) : []);\n\n  const handleChange = (setValue: string | null, value: string) => {\n    if (setValue === null) {\n      values.current = values.current.filter((val) => val !== value);\n    } else {\n      values.current = [...values.current, value];\n    }\n    onSetValues(values.current);\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            <CheckboxButton\n              key={`${value}`}\n              label={label}\n              value={value}\n              isChecked={defaultValues ? defaultValues.includes(value) : false}\n              disabled={disabled || disableGroup}\n              onSetValue={(newValue) => handleChange(newValue, value)}\n            />\n          ))}\n        </div>\n        {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n      </div>\n    </div>\n  );\n};\n"],"names":["CheckboxButtonBar","checkboxes","defaultValues","label","labelPosition","required","notValidated","notValidatedText","disableGroup","onSetValues","values","useRef","handleChange","setValue","value","val","jsxs","clsx","styles","jsx","Label","disabled","CheckboxButton","newValue","FeedbackBox"],"mappings":";;;;;;;;;;;;;GAmCaA,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,cAAAC,IAAe;AAAA,EACf,aAAAC;AACF,MAA8B;AACtB,QAAAC,IAASC,EAAiBT,IAAgBA,EAAc,IAAI,MAAM,IAAI,EAAE,GAExEU,IAAe,CAACC,GAAyBC,MAAkB;AAC/D,IAAID,MAAa,OACfH,EAAO,UAAUA,EAAO,QAAQ,OAAO,CAACK,MAAQA,MAAQD,CAAK,IAE7DJ,EAAO,UAAU,CAAC,GAAGA,EAAO,SAASI,CAAK,GAE5CL,EAAYC,EAAO,OAAO;AAAA,EAC5B;AAGE,SAAA,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTC,EAAO,gCAAgC;AAAA,QACvCA,EAAO,yCAAyCd,CAAa,EAAE;AAAA,MACjE;AAAA,MAEC,UAAA;AAAA,QAAAD,KACE,gBAAAgB,EAAAC,GAAA,EAAM,SAAQ,IAAG,UAAAf,GACf,UACHF,GAAA;AAAA,QAED,gBAAAa,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,GAAGZ,KAAgBC;AAAA,cAAA,CACtE;AAAA,cAEA,UAAAN,EAAW,IAAI,CAAC,EAAE,OAAAE,GAAO,OAAAW,GAAO,UAAAO,QAC/B,gBAAAF;AAAA,gBAACG;AAAA,gBAAA;AAAA,kBAEC,OAAOnB;AAAAA,kBACP,OAAAW;AAAA,kBACA,WAAWZ,IAAgBA,EAAc,SAASY,CAAK,IAAI;AAAA,kBAC3D,UAAUO,KAAYb;AAAA,kBACtB,YAAY,CAACe,MAAaX,EAAaW,GAAUT,CAAK;AAAA,gBAAA;AAAA,gBALjD,GAAGA,CAAK;AAAA,cAOhB,CAAA;AAAA,YAAA;AAAA,UACH;AAAA,UACCP,MAAqB,MAAM,gBAAAY,EAACK,KAAY,OAAM,SAAQ,UAAUjB,EAAkB,CAAA;AAAA,QAAA,EACrF,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}

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

@@ -1,5 +1,5 @@
-import { jsx as t } from "react/jsx-runtime";
-import { fn as l } from "../../index-BCvy9BiK.js";
+import { jsx as l } from "react/jsx-runtime";
+import { fn as t } from "../../index-BCvy9BiK.js";
 import { CheckboxButtonBar as e } from "./CheckboxButtonBar.js";
 const a = "<CheckboxButtonBar checkboxes={} defaultValues={} label={} labelPosition={} required={} notValidatedText={} disableGroup={} onSetValues={} />", i = {
   title: "Molecules/CheckboxButtonBar",
@@ -41,7 +41,7 @@ const a = "<CheckboxButtonBar checkboxes={} defaultValues={} label={} labelPosit
     inspectComponent: e,
     codeString: a
   }
-}, r = (o) => /* @__PURE__ */ t(e, { ...o }), n = r.bind({});
+}, r = (o) => /* @__PURE__ */ l(e, { ...o }), n = r.bind({});
 n.args = {
   label: "Periode",
   required: !0,
@@ -57,11 +57,23 @@ n.args = {
     {
       label: "1.3",
       value: "3"
+    },
+    {
+      label: "4",
+      value: "4"
+    },
+    {
+      label: "5",
+      value: "5"
+    },
+    {
+      label: "6",
+      value: "6"
     }
   ],
   defaultValues: ["1", "2"],
   labelPosition: "top",
-  onSetValues: l()
+  onSetValues: t()
 };
 export {
   n as CheckboxButtonBarExample,

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    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  defaultValues: ['1', '2'],\n  labelPosition: 'top',\n  onSetValues: fn(),\n};\n"],"names":["codeString","CheckboxButtonBar_stories","CheckboxButtonBar","Template","args","jsx","CheckboxButtonBarExample","fn"],"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,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,IAAA;AAAA,EAEX;AAAA,EACA,eAAe,CAAC,KAAK,GAAG;AAAA,EACxB,eAAe;AAAA,EACf,aAAaC,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    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  onSetValues: fn(),\n};\n"],"names":["codeString","CheckboxButtonBar_stories","CheckboxButtonBar","Template","args","jsx","CheckboxButtonBarExample","fn"],"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,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,aAAaC,EAAG;AAClB;"}