@uva-glass/component-library 3.38.3 → 3.39.0

package/dist/assets/ControlsButton.css

@@ -1 +1 @@
-._controls-input_1ebvn_1{aspect-ratio:unset;cursor:pointer;height:0;opacity:0;position:absolute;width:0}._controls-input_1ebvn_1:focus-visible+label{outline:.125rem dotted var(--new-color-navy-600);outline-offset:.125rem}._controls-input_1ebvn_1:checked+label{background-color:var(--new-color-grey-200);border:1px solid var(--new-color-grey-700);font-weight:var(--semibold)}._controls-input_1ebvn_1:disabled+label,._controls-input_1ebvn_1:disabled:hover+label{background-color:var(--new-color-grey-400);color:var(--new-color-grey-700);cursor:not-allowed}._controls-input_1ebvn_1:hover+label{background-color:var(--new-color-grey-300)}._controls-button_1ebvn_32{align-items:center;background-color:var(--new-color-uva-white);border:1px solid transparent;border-radius:.25rem;box-sizing:border-box;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_1ebvn_50{width:2.25rem}._controls-button_1ebvn_32:after{content:"";min-height:2.625rem;min-width:2.625rem;position:absolute;width:100%}._controls-button--with-prefix_1ebvn_62{height:auto;padding:.125rem .5rem;width:auto}._controls-button--with-icon_1ebvn_68{gap:.5rem}._controls-button__wrapper_1ebvn_72{align-items:center;display:flex;flex-direction:column}._controls-button__prefix_1ebvn_78{color:var(--new-color-grey-700);font-size:var(--font-size-text-non-essential)}
+._controls-input_1hbz5_1{aspect-ratio:unset;cursor:pointer;height:0;opacity:0;position:absolute;width:0}._controls-input_1hbz5_1:focus-visible+label{outline:.125rem dotted var(--new-color-navy-600);outline-offset:.125rem}._controls-input_1hbz5_1:checked+label{background-color:var(--new-color-grey-200);border:1px solid var(--new-color-grey-700);font-weight:var(--semibold)}._controls-input_1hbz5_1:disabled+label,._controls-input_1hbz5_1:disabled:hover+label{background-color:var(--new-color-grey-400);color:var(--new-color-grey-700);cursor:not-allowed}._controls-input_1hbz5_1:hover+label{background-color:var(--new-color-grey-300)}._controls-button_1hbz5_32{align-items:center;background-color:var(--new-color-uva-white);border:1px solid transparent;border-radius:.25rem;box-sizing:border-box;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_1hbz5_50{width:2.25rem}._controls-button_1hbz5_32:after{content:"";min-height:2.625rem;min-width:2.625rem;position:absolute;width:100%}._controls-button--with-prefix_1hbz5_62{height:auto;padding:.125rem .5rem;width:auto}._controls-button--with-icon_1hbz5_68{gap:.5rem}._controls-button__wrapper_1hbz5_72{align-items:center;display:flex;flex-direction:column}._controls-button__prefix_1hbz5_78{color:var(--new-color-grey-700);font-size:var(--font-size-text-non-essential)}._controls-button__tooltip_1hbz5_83{background-color:var(--new-color-uva-white);box-shadow:0 0 .25rem #00000040;color:var(--new-color-grey-700);display:none;font-size:var(--font-size-text-non-essential);font-style:italic;font-weight:400;left:50%;padding:.5rem 1rem;position:absolute;text-align:center;top:calc(100% + .5rem);transform:translate(-50%);z-index:1}._controls-button__tooltip_1hbz5_83:before{border-color:transparent transparent var(--new-color-grey-400) transparent;border-style:solid;border-width:.5rem;bottom:calc(100% + .125rem);content:"";filter:blur(.125rem);left:50%;position:absolute;transform:translate(-50%);z-index:-1}._controls-button__tooltip_1hbz5_83:after{border-color:transparent transparent var(--new-color-uva-white) transparent;border-style:solid;border-width:.5rem;bottom:100%;content:"";left:50%;position:absolute;transform:translate(-50%)}._controls-button_1hbz5_32:hover ._controls-button__tooltip_1hbz5_83,._controls-input_1hbz5_1:focus-visible+label ._controls-button__tooltip_1hbz5_83{display:block}

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

@@ -1,7 +1,9 @@
+import { ReactNode } from 'react';
 type CheckboxProps = {
     label: string;
     value: string;
     prefix?: string;
+    tooltip?: ReactNode;
     disabled?: boolean;
 };
 export interface CheckboxButtonBarProps {

package/dist/components/CheckboxButtonBar/CheckboxButtonBar.js

@@ -1,9 +1,9 @@
 import { jsxs as k, jsx as c } from "react/jsx-runtime";
-import { useState as C } from "react";
+import { useState as N } from "react";
 import { c as x } from "../../clsx-OuTLNxxd.js";
-import { Label as N } from "../Label/Label.js";
-import { FeedbackBox as S } from "../FeedbackBox/FeedbackBox.js";
-import { ControlsButton as j } from "../ControlsButton/ControlsButton.js";
+import { Label as S } from "../Label/Label.js";
+import { FeedbackBox as j } from "../FeedbackBox/FeedbackBox.js";
+import { ControlsButton as y } from "../ControlsButton/ControlsButton.js";
 import '../../assets/CheckboxButtonBar.css';const t = {
   "checkbox-button-bar__container": "_checkbox-button-bar__container_5gd9n_1",
   "checkbox-button-bar__container--label-left": "_checkbox-button-bar__container--label-left_5gd9n_5",
@@ -12,7 +12,7 @@ import '../../assets/CheckboxButtonBar.css';const t = {
   "checkbox-button-bar__row": "_checkbox-button-bar__row_5gd9n_15",
   "checkbox-button-bar__row--not-validated": "_checkbox-button-bar__row--not-validated_5gd9n_30",
   "checkbox-button-bar__footer": "_checkbox-button-bar__footer_5gd9n_33"
-}, B = ({
+}, D = ({
   checkboxes: d,
   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) : []
   ), g = (e) => {
     let o = h;
@@ -39,7 +39,7 @@ import '../../assets/CheckboxButtonBar.css';const t = {
         t[`checkbox-button-bar__container--label-${u}`]
       ),
       children: [
-        a && /* @__PURE__ */ c(N, { htmlFor: "", required: m, children: a }),
+        a && /* @__PURE__ */ c(S, { htmlFor: "", required: m, children: a }),
         /* @__PURE__ */ k("div", { className: t["checkbox-button-bar__row-container"], children: [
           /* @__PURE__ */ c(
             "div",
@@ -47,30 +47,31 @@ import '../../assets/CheckboxButtonBar.css';const t = {
               className: x(t["checkbox-button-bar__row"], {
                 [t["checkbox-button-bar__row--not-validated"]]: f || b
               }),
-              children: d.map(({ label: e, value: o, prefix: _, disabled: w }) => /* @__PURE__ */ c(
-                j,
+              children: d.map(({ label: e, value: o, prefix: _, tooltip: w, disabled: v }) => /* @__PURE__ */ c(
+                y,
                 {
                   type: "checkbox",
                   label: e,
                   prefix: _,
+                  tooltip: w,
                   forceSquared: !0,
                   value: o,
                   checked: h.includes(o),
-                  disabled: w || p,
-                  onSetValue: (v) => g(v.target.value)
+                  disabled: v || p,
+                  onSetValue: (C) => g(C.target.value)
                 },
                 `${o}`
               ))
             }
           ),
           l && /* @__PURE__ */ c("div", { className: t["checkbox-button-bar__footer"], children: l }),
-          b !== "" && /* @__PURE__ */ c(S, { level: "error", feedback: b })
+          b !== "" && /* @__PURE__ */ c(j, { level: "error", feedback: b })
         ] })
       ]
     }
   );
 };
 export {
-  B as CheckboxButtonBar
+  D 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  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;AAC5B,QAAM,CAACC,GAAeC,CAAgB,IAAIC;AAAA,IACxCZ,KAAiB,CAACM,IACdN,EAAc,IAAI,MAAM,IACxBA,KAAiBM,IACfN,EAAc,MAAM,GAAG,CAAC,IACxB,CAAA;AAAA,EAAC,GAGHa,IAAe,CAACC,MAAkB;AACtC,QAAIC,IAASL;AAEb,IAAIJ,KACFK,EAAiB,CAACG,CAAK,CAAC,GACxBL,EAAY,CAACK,CAAK,CAAC,MAEfC,EAAO,SAASD,CAAK,IACvBC,IAASA,EAAO,OAAO,CAACC,MAAQA,MAAQF,CAAK,IAE7CC,IAAS,CAAC,GAAGA,GAAQD,CAAK,GAE5BH,EAAiBI,CAAM,GACvBN,EAAYM,CAAM;AAAA,EACpB;AAGF,SACE,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTC,EAAO,gCAAgC;AAAA,QACvCA,EAAO,yCAAyCjB,CAAa,EAAE;AAAA,MAAA;AAAA,MAGhE,UAAA;AAAA,QAAAD,KACC,gBAAAmB,EAACC,GAAA,EAAM,SAAQ,IAAG,UAAAlB,GACf,UAAAF,GACH;AAAA,QAEF,gBAAAgB,EAAC,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,cAAA,CAUhB;AAAA,YAAA;AAAA,UAAA;AAAA,UAEFP,KAAc,gBAAAa,EAAC,OAAA,EAAI,WAAWD,EAAO,6BAA6B,GAAI,UAAAZ,GAAW;AAAA,UACjFF,MAAqB,MAAM,gBAAAe,EAACM,KAAY,OAAM,SAAQ,UAAUrB,EAAA,CAAkB;AAAA,QAAA,EAAA,CACrF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"CheckboxButtonBar.js","sources":["../../../src/components/CheckboxButtonBar/CheckboxButtonBar.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { ReactNode } from 'react';\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  tooltip?: ReactNode;\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, tooltip, disabled }) => (\n            <ControlsButton\n              key={`${value}`}\n              type=\"checkbox\"\n              label={label}\n              prefix={prefix}\n              tooltip={tooltip}\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","tooltip","disabled","ControlsButton","event","FeedbackBox"],"mappings":";;;;;;;;;;;;;;GA0CaA,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;AAC5B,QAAM,CAACC,GAAeC,CAAgB,IAAIC;AAAA,IACxCZ,KAAiB,CAACM,IACdN,EAAc,IAAI,MAAM,IACxBA,KAAiBM,IACfN,EAAc,MAAM,GAAG,CAAC,IACxB,CAAA;AAAA,EAAC,GAGHa,IAAe,CAACC,MAAkB;AACtC,QAAIC,IAASL;AAEb,IAAIJ,KACFK,EAAiB,CAACG,CAAK,CAAC,GACxBL,EAAY,CAACK,CAAK,CAAC,MAEfC,EAAO,SAASD,CAAK,IACvBC,IAASA,EAAO,OAAO,CAACC,MAAQA,MAAQF,CAAK,IAE7CC,IAAS,CAAC,GAAGA,GAAQD,CAAK,GAE5BH,EAAiBI,CAAM,GACvBN,EAAYM,CAAM;AAAA,EACpB;AAGF,SACE,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTC,EAAO,gCAAgC;AAAA,QACvCA,EAAO,yCAAyCjB,CAAa,EAAE;AAAA,MAAA;AAAA,MAGhE,UAAA;AAAA,QAAAD,KACC,gBAAAmB,EAACC,GAAA,EAAM,SAAQ,IAAG,UAAAlB,GACf,UAAAF,GACH;AAAA,QAEF,gBAAAgB,EAAC,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,SAAAC,GAAS,UAAAC,EAAA,MAChD,gBAAAJ;AAAA,gBAACK;AAAA,gBAAA;AAAA,kBAEC,MAAK;AAAA,kBACL,OAAOxB;AAAAA,kBACP,QAAAqB;AAAA,kBACA,SAAAC;AAAA,kBACA,cAAc;AAAA,kBACd,OAAAT;AAAA,kBACA,SAASJ,EAAc,SAASI,CAAK;AAAA,kBACrC,UAAUU,KAAYhB;AAAA,kBACtB,YAAY,CAACkB,MAAUb,EAAaa,EAAM,OAAO,KAAK;AAAA,gBAAA;AAAA,gBATjD,GAAGZ,CAAK;AAAA,cAAA,CAWhB;AAAA,YAAA;AAAA,UAAA;AAAA,UAEFP,KAAc,gBAAAa,EAAC,OAAA,EAAI,WAAWD,EAAO,6BAA6B,GAAI,UAAAZ,GAAW;AAAA,UACjFF,MAAqB,MAAM,gBAAAe,EAACO,KAAY,OAAM,SAAQ,UAAUtB,EAAA,CAAkB;AAAA,QAAA,EAAA,CACrF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

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

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

@@ -1,9 +1,9 @@
-import { jsx as t } from "react/jsx-runtime";
-import { l } from "../../index-BYGu3RV5.js";
-import { CheckboxButtonBar as e } from "./CheckboxButtonBar.js";
-const r = "<CheckboxButtonBar checkboxes={} defaultValues={} label={} labelPosition={} required={} notValidatedText={} disableGroup={} onSetValues={} />", d = {
+import { jsx as e, jsxs as l, Fragment as t } from "react/jsx-runtime";
+import { l as a } from "../../index-BYGu3RV5.js";
+import { CheckboxButtonBar as r } from "./CheckboxButtonBar.js";
+const b = "<CheckboxButtonBar checkboxes={} defaultValues={} label={} labelPosition={} required={} notValidatedText={} disableGroup={} onSetValues={} />", f = {
   title: "Molecules/CheckboxButtonBar",
-  component: e,
+  component: r,
   argTypes: {
     checkboxes: {
       table: {
@@ -41,10 +41,10 @@ const r = "<CheckboxButtonBar checkboxes={} defaultValues={} label={} labelPosit
     }
   },
   parameters: {
-    inspectComponent: e,
-    codeString: r
+    inspectComponent: r,
+    codeString: b
   }
-}, a = (o) => /* @__PURE__ */ t(e, { ...o }), u = a.bind({});
+}, o = (i) => /* @__PURE__ */ e(r, { ...i }), u = o.bind({});
 u.args = {
   label: "Periode",
   required: !0,
@@ -77,10 +77,10 @@ u.args = {
   defaultValues: ["1", "2"],
   labelPosition: "top",
   footerText: "Weken in periode 2",
-  onSetValues: l()
+  onSetValues: a()
 };
-const b = a.bind({});
-b.args = {
+const n = o.bind({});
+n.args = {
   label: "Weken",
   required: !0,
   checkboxes: [
@@ -112,10 +112,10 @@ b.args = {
   defaultValues: ["1"],
   labelPosition: "top",
   actAsRadioButtonBar: !0,
-  onSetValues: l()
+  onSetValues: a()
 };
-const n = a.bind({});
-n.args = {
+const s = o.bind({});
+s.args = {
   label: "Weken",
   required: !0,
   checkboxes: [
@@ -153,12 +153,104 @@ n.args = {
   defaultValues: ["1"],
   labelPosition: "top",
   actAsRadioButtonBar: !1,
-  onSetValues: l()
+  onSetValues: a()
+};
+const p = o.bind({});
+p.args = {
+  label: "Weken",
+  required: !0,
+  checkboxes: [
+    {
+      label: "1",
+      value: "1",
+      prefix: "36",
+      tooltip: /* @__PURE__ */ l(t, { children: [
+        "1 sept - 5 sept",
+        /* @__PURE__ */ e("br", {}),
+        "2025"
+      ] })
+    },
+    {
+      label: "2",
+      value: "2",
+      prefix: "37",
+      tooltip: /* @__PURE__ */ l(t, { children: [
+        "8 sept - 12 sept",
+        /* @__PURE__ */ e("br", {}),
+        "2025"
+      ] })
+    },
+    {
+      label: "3",
+      value: "3",
+      prefix: "38",
+      tooltip: /* @__PURE__ */ l(t, { children: [
+        "15 sept - 19 sept",
+        /* @__PURE__ */ e("br", {}),
+        "2025"
+      ] })
+    },
+    {
+      label: "4",
+      value: "4",
+      prefix: "39",
+      tooltip: /* @__PURE__ */ l(t, { children: [
+        "22 sept - 26 sept",
+        /* @__PURE__ */ e("br", {}),
+        "2025"
+      ] })
+    },
+    {
+      label: "5",
+      value: "5",
+      prefix: "40",
+      tooltip: /* @__PURE__ */ l(t, { children: [
+        "29 sept - 3 okt",
+        /* @__PURE__ */ e("br", {}),
+        "2025"
+      ] })
+    },
+    {
+      label: "6",
+      value: "6",
+      prefix: "41",
+      tooltip: /* @__PURE__ */ l(t, { children: [
+        "6 okt - 10 okt",
+        /* @__PURE__ */ e("br", {}),
+        "2025"
+      ] })
+    },
+    {
+      label: "7",
+      value: "7",
+      prefix: "42",
+      tooltip: /* @__PURE__ */ l(t, { children: [
+        "13 okt - 17 okt",
+        /* @__PURE__ */ e("br", {}),
+        "2025"
+      ] })
+    },
+    {
+      label: "8",
+      value: "8",
+      prefix: "43",
+      tooltip: /* @__PURE__ */ l(t, { children: [
+        "20 okt - 24 okt",
+        /* @__PURE__ */ e("br", {}),
+        "2025"
+      ] })
+    }
+  ],
+  defaultValues: ["1"],
+  labelPosition: "top",
+  actAsRadioButtonBar: !1,
+  onSetValues: a()
 };
 export {
-  b as CheckboxButtonBarAsRadioButtonBar,
+  n as CheckboxButtonBarAsRadioButtonBar,
   u as CheckboxButtonBarExample,
-  n as CheckboxButtonBarWithPrefix,
-  d as default
+  s as CheckboxButtonBarWithPrefix,
+  p as CheckboxButtonBarWithTooltip,
+  f 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\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,iJAGFC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,YAAY;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,eAAe;AAAA,MACb,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,OAAO;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,IAEX,eAAe;AAAA,MACb,SAAS;AAAA,MACT,SAAS,CAAC,OAAO,MAAM;AAAA,IAAA;AAAA,IAEzB,UAAU;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,IAEX,kBAAkB;AAAA,MAChB,SAAS;AAAA,IAAA;AAAA,IAEX,cAAc;AAAA,MACZ,SAAS;AAAA,IAAA;AAAA,IAEX,qBAAqB;AAAA,MACnB,SAAS;AAAA,IAAA;AAAA,IAEX,aAAa;AAAA,MACX,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAA4C,CAACC,MAAS,gBAAAC,EAACH,GAAA,EAAmB,GAAGE,GAAM,GAE5EE,IAA2BH,EAAS,KAAK,CAAA,CAAE;AACxDG,EAAyB,OAAO;AAAA,EAC9B,OAAO;AAAA,EACP,UAAU;AAAA,EACV,YAAY;AAAA,IACV;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,IAET;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,IAET;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,IAET;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,IAET;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,IAET;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,EACT;AAAA,EAEF,eAAe,CAAC,KAAK,GAAG;AAAA,EACxB,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,aAAaC,EAAA;AACf;AAEO,MAAMC,IAAoCL,EAAS,KAAK,CAAA,CAAE;AACjEK,EAAkC,OAAO;AAAA,EACvC,OAAO;AAAA,EACP,UAAU;AAAA,EACV,YAAY;AAAA,IACV;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,IAET;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,IAET;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,IAET;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,IAET;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,IAET;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,EACT;AAAA,EAEF,eAAe,CAAC,GAAG;AAAA,EACnB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,aAAaD,EAAA;AACf;AAEO,MAAME,IAA8BN,EAAS,KAAK,CAAA,CAAE;AAC3DM,EAA4B,OAAO;AAAA,EACjC,OAAO;AAAA,EACP,UAAU;AAAA,EACV,YAAY;AAAA,IACV;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,IAEV;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,IAEV;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,IAEV;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,IAEV;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,IAEV;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EACV;AAAA,EAEF,eAAe,CAAC,GAAG;AAAA,EACnB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,aAAaF,EAAA;AACf;"}
+{"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\nexport const CheckboxButtonBarWithTooltip = Template.bind({});\nCheckboxButtonBarWithTooltip.args = {\n  label: 'Weken',\n  required: true,\n  checkboxes: [\n    {\n      label: '1',\n      value: '1',\n      prefix: '36',\n      tooltip: (\n        <>\n          1 sept - 5 sept\n          <br />\n          2025\n        </>\n      ),\n    },\n    {\n      label: '2',\n      value: '2',\n      prefix: '37',\n      tooltip: (\n        <>\n          8 sept - 12 sept\n          <br />\n          2025\n        </>\n      ),\n    },\n    {\n      label: '3',\n      value: '3',\n      prefix: '38',\n      tooltip: (\n        <>\n          15 sept - 19 sept\n          <br />\n          2025\n        </>\n      ),\n    },\n    {\n      label: '4',\n      value: '4',\n      prefix: '39',\n      tooltip: (\n        <>\n          22 sept - 26 sept\n          <br />\n          2025\n        </>\n      ),\n    },\n    {\n      label: '5',\n      value: '5',\n      prefix: '40',\n      tooltip: (\n        <>\n          29 sept - 3 okt\n          <br />\n          2025\n        </>\n      ),\n    },\n    {\n      label: '6',\n      value: '6',\n      prefix: '41',\n      tooltip: (\n        <>\n          6 okt - 10 okt\n          <br />\n          2025\n        </>\n      ),\n    },\n    {\n      label: '7',\n      value: '7',\n      prefix: '42',\n      tooltip: (\n        <>\n          13 okt - 17 okt\n          <br />\n          2025\n        </>\n      ),\n    },\n    {\n      label: '8',\n      value: '8',\n      prefix: '43',\n      tooltip: (\n        <>\n          20 okt - 24 okt\n          <br />\n          2025\n        </>\n      ),\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","CheckboxButtonBarWithTooltip","jsxs","Fragment"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import { ChangeEvent } from 'react';
+import { ChangeEvent, ReactNode } from 'react';
 import { IconProps } from 'components/Icon';
 export interface ControlsButtonProps {
     /** to set type/behaviour of input radio or checkbox */
@@ -7,10 +7,12 @@ export interface ControlsButtonProps {
     label: string;
     /** button value */
     value: string;
-    /** set if icon is needed in font of lable */
+    /** set if icon is needed in font of label */
     iconName?: IconProps['name'];
-    /** set if prefix is needed above of lable */
+    /** set if prefix is needed above of label */
     prefix?: string;
+    /** set tooltip */
+    tooltip?: ReactNode;
     /** set if used as radiogroup */
     name?: string;
     /** `true` to set squared button; otherwise, `false`. The default is `false`. Note: hides icon */
@@ -22,4 +24,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, iconName, prefix, name, forceSquared, checked, disabled, onSetValue, }: ControlsButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ControlsButton: ({ type, label, value, iconName, prefix, tooltip, name, forceSquared, checked, disabled, onSetValue, }: ControlsButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ControlsButton/ControlsButton.js

@@ -1,63 +1,67 @@
-import { jsxs as s, Fragment as m, jsx as c } from "react/jsx-runtime";
-import { useId as d } from "react";
-import { c as f } from "../../clsx-OuTLNxxd.js";
-import { Icon as x } from "../Icon/Icon.js";
+import { jsxs as l, Fragment as x, jsx as o } from "react/jsx-runtime";
+import { useId as z } from "react";
+import { c as w } from "../../clsx-OuTLNxxd.js";
+import { Icon as v } from "../Icon/Icon.js";
 import '../../assets/ControlsButton.css';const t = {
-  "controls-input": "_controls-input_1ebvn_1",
-  "controls-button": "_controls-button_1ebvn_32",
-  "controls-button--squared": "_controls-button--squared_1ebvn_50",
-  "controls-button--with-prefix": "_controls-button--with-prefix_1ebvn_62",
-  "controls-button--with-icon": "_controls-button--with-icon_1ebvn_68",
-  "controls-button__wrapper": "_controls-button__wrapper_1ebvn_72",
-  "controls-button__prefix": "_controls-button__prefix_1ebvn_78"
-}, q = ({
-  type: l = "checkbox",
-  label: o,
-  value: i,
+  "controls-input": "_controls-input_1hbz5_1",
+  "controls-button": "_controls-button_1hbz5_32",
+  "controls-button--squared": "_controls-button--squared_1hbz5_50",
+  "controls-button--with-prefix": "_controls-button--with-prefix_1hbz5_62",
+  "controls-button--with-icon": "_controls-button--with-icon_1hbz5_68",
+  "controls-button__wrapper": "_controls-button__wrapper_1hbz5_72",
+  "controls-button__prefix": "_controls-button__prefix_1hbz5_78",
+  "controls-button__tooltip": "_controls-button__tooltip_1hbz5_83"
+}, $ = ({
+  type: b = "checkbox",
+  label: _,
+  value: u,
   iconName: n,
   prefix: r,
-  name: e,
-  forceSquared: u = !1,
-  checked: b,
-  disabled: p,
-  onSetValue: a
+  tooltip: s,
+  name: a,
+  forceSquared: p = !1,
+  checked: h,
+  disabled: d,
+  onSetValue: m
 }) => {
-  const _ = d();
-  return /* @__PURE__ */ s(m, { children: [
-    /* @__PURE__ */ c(
+  const f = z(), i = _.replace(/\s+/g, "_"), c = `${f}${i}`, e = `${c}-tooltip`;
+  return /* @__PURE__ */ l(x, { children: [
+    /* @__PURE__ */ o(
       "input",
       {
-        type: l,
-        id: `${_}${o.replace(/\s+/g, "_")}`,
-        name: e || o.replace(/\s+/g, "_"),
-        disabled: p,
-        value: i,
-        checked: b,
-        onChange: (h) => a(h),
-        className: t["controls-input"]
+        type: b,
+        id: c,
+        name: a ?? i,
+        disabled: d,
+        value: u,
+        checked: h,
+        onChange: m,
+        className: t["controls-input"],
+        "aria-describedby": s ? e : void 0
       }
     ),
-    /* @__PURE__ */ s(
+    /* @__PURE__ */ l(
       "label",
       {
-        htmlFor: `${_}${o.replace(/\s+/g, "_")}`,
-        className: f(t["controls-button"], [
-          u && t["controls-button--squared"],
+        htmlFor: c,
+        className: w(t["controls-button"], [
+          p && t["controls-button--squared"],
           r && t["controls-button--with-prefix"],
           n && t["controls-button--with-icon"]
         ]),
         children: [
-          n && /* @__PURE__ */ c(x, { name: n, size: 20 }),
-          /* @__PURE__ */ s("div", { className: t["controls-button__wrapper"], children: [
-            r && /* @__PURE__ */ c("div", { className: t["controls-button__prefix"], children: r }),
-            o
-          ] })
+          n && /* @__PURE__ */ o(v, { name: n, size: 20 }),
+          /* @__PURE__ */ l("div", { className: t["controls-button__wrapper"], children: [
+            r && /* @__PURE__ */ o("div", { className: t["controls-button__prefix"], children: r }),
+            _
+          ] }),
+          s && /* @__PURE__ */ o("div", { id: e, role: "tooltip", className: t["controls-button__tooltip"], children: s })
         ]
       }
     )
   ] });
 };
 export {
-  q as ControlsButton
+  $ 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\nimport type { IconProps } from 'components/Icon';\r\n\r\nimport styles from './ControlsButton.module.css';\r\n\r\nimport { Icon } from 'components/Icon';\r\n\r\nexport interface ControlsButtonProps {\r\n  /** to set type/behaviour of input radio or checkbox */\r\n  type?: 'radio' | 'checkbox';\r\n  /** button label */\r\n  label: string;\r\n  /** button value */\r\n  value: string;\r\n  /** set if icon is needed in font of lable */\r\n  iconName?: IconProps['name'];\r\n  /** set if prefix is needed above of lable */\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`. Note: hides icon */\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  iconName,\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          iconName && styles['controls-button--with-icon'],\r\n        ])}\r\n      >\r\n        {iconName && <Icon name={iconName} size={20} />}\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","iconName","prefix","name","forceSquared","checked","disabled","onSetValue","idPrefix","useId","jsxs","Fragment","jsx","event","styles","clsx","Icon"],"mappings":";;;;;;;;;;;;GAiCaA,IAAiB,CAAC;AAAA,EAC7B,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AACF,MAA2B;AACzB,QAAMC,IAAWC,EAAA;AAEjB,SACE,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAAd;AAAA,QACA,IAAI,GAAGU,CAAQ,GAAGT,EAAM,QAAQ,QAAQ,GAAG,CAAC;AAAA,QAC5C,MAAMI,KAAcJ,EAAM,QAAQ,QAAQ,GAAG;AAAA,QAC7C,UAAAO;AAAA,QACA,OAAAN;AAAA,QACA,SAAAK;AAAA,QACA,UAAU,CAACQ,MAAUN,EAAWM,CAAK;AAAA,QACrC,WAAWC,EAAO,gBAAgB;AAAA,MAAA;AAAA,IAAA;AAAA,IAEpC,gBAAAJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS,GAAGF,CAAQ,GAAGT,EAAM,QAAQ,QAAQ,GAAG,CAAC;AAAA,QACjD,WAAWgB,EAAKD,EAAO,iBAAiB,GAAG;AAAA,UACzCV,KAAgBU,EAAO,0BAA0B;AAAA,UACjDZ,KAAUY,EAAO,8BAA8B;AAAA,UAC/Cb,KAAYa,EAAO,4BAA4B;AAAA,QAAA,CAChD;AAAA,QAEA,UAAA;AAAA,UAAAb,KAAY,gBAAAW,EAACI,GAAA,EAAK,MAAMf,GAAU,MAAM,IAAI;AAAA,UAC7C,gBAAAS,EAAC,OAAA,EAAI,WAAWI,EAAO,0BAA0B,GAC9C,UAAA;AAAA,YAAAZ,uBAAW,OAAA,EAAI,WAAWY,EAAO,yBAAyB,GAAI,UAAAZ,GAAO;AAAA,YACrEH;AAAA,UAAA,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,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, ReactNode } from 'react';\r\nimport type { IconProps } from 'components/Icon';\r\n\r\nimport styles from './ControlsButton.module.css';\r\n\r\nimport { Icon } from 'components/Icon';\r\n\r\nexport interface ControlsButtonProps {\r\n  /** to set type/behaviour of input radio or checkbox */\r\n  type?: 'radio' | 'checkbox';\r\n  /** button label */\r\n  label: string;\r\n  /** button value */\r\n  value: string;\r\n  /** set if icon is needed in font of label */\r\n  iconName?: IconProps['name'];\r\n  /** set if prefix is needed above of label */\r\n  prefix?: string;\r\n  /** set tooltip */\r\n  tooltip?: ReactNode;\r\n  /** set if used as radiogroup */\r\n  name?: string;\r\n  /** `true` to set squared button; otherwise, `false`. The default is `false`. Note: hides icon */\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  iconName,\r\n  prefix,\r\n  tooltip,\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  const sanitizedLabel = label.replace(/\\s+/g, '_');\r\n  const baseId = `${idPrefix}${sanitizedLabel}`;\r\n  const tooltipId = `${baseId}-tooltip`;\r\n\r\n  return (\r\n    <>\r\n      <input\r\n        type={type}\r\n        id={baseId}\r\n        name={name ?? sanitizedLabel}\r\n        disabled={disabled}\r\n        value={value}\r\n        checked={checked}\r\n        onChange={onSetValue}\r\n        className={styles['controls-input']}\r\n        aria-describedby={tooltip ? tooltipId : undefined}\r\n      />\r\n      <label\r\n        htmlFor={baseId}\r\n        className={clsx(styles['controls-button'], [\r\n          forceSquared && styles['controls-button--squared'],\r\n          prefix && styles['controls-button--with-prefix'],\r\n          iconName && styles['controls-button--with-icon'],\r\n        ])}\r\n      >\r\n        {iconName && <Icon name={iconName} size={20} />}\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        {tooltip && (\r\n          <div id={tooltipId} role=\"tooltip\" className={styles['controls-button__tooltip']}>\r\n            {tooltip}\r\n          </div>\r\n        )}\r\n      </label>\r\n    </>\r\n  );\r\n};\r\n"],"names":["ControlsButton","type","label","value","iconName","prefix","tooltip","name","forceSquared","checked","disabled","onSetValue","idPrefix","useId","sanitizedLabel","baseId","tooltipId","jsxs","Fragment","jsx","styles","clsx","Icon"],"mappings":";;;;;;;;;;;;;GAmCaA,IAAiB,CAAC;AAAA,EAC7B,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AACF,MAA2B;AACzB,QAAMC,IAAWC,EAAA,GACXC,IAAiBZ,EAAM,QAAQ,QAAQ,GAAG,GAC1Ca,IAAS,GAAGH,CAAQ,GAAGE,CAAc,IACrCE,IAAY,GAAGD,CAAM;AAE3B,SACE,gBAAAE,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAAlB;AAAA,QACA,IAAIc;AAAA,QACJ,MAAMR,KAAQO;AAAA,QACd,UAAAJ;AAAA,QACA,OAAAP;AAAA,QACA,SAAAM;AAAA,QACA,UAAUE;AAAA,QACV,WAAWS,EAAO,gBAAgB;AAAA,QAClC,oBAAkBd,IAAUU,IAAY;AAAA,MAAA;AAAA,IAAA;AAAA,IAE1C,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAASF;AAAA,QACT,WAAWM,EAAKD,EAAO,iBAAiB,GAAG;AAAA,UACzCZ,KAAgBY,EAAO,0BAA0B;AAAA,UACjDf,KAAUe,EAAO,8BAA8B;AAAA,UAC/ChB,KAAYgB,EAAO,4BAA4B;AAAA,QAAA,CAChD;AAAA,QAEA,UAAA;AAAA,UAAAhB,KAAY,gBAAAe,EAACG,GAAA,EAAK,MAAMlB,GAAU,MAAM,IAAI;AAAA,UAC7C,gBAAAa,EAAC,OAAA,EAAI,WAAWG,EAAO,0BAA0B,GAC9C,UAAA;AAAA,YAAAf,uBAAW,OAAA,EAAI,WAAWe,EAAO,yBAAyB,GAAI,UAAAf,GAAO;AAAA,YACrEH;AAAA,UAAA,GACH;AAAA,UACCI,KACC,gBAAAa,EAAC,OAAA,EAAI,IAAIH,GAAW,MAAK,WAAU,WAAWI,EAAO,0BAA0B,GAC5E,UAAAd,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,GACF;AAEJ;"}

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

@@ -5,3 +5,4 @@ export default _default;
 export declare const ControlsButtonExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, ControlsButtonProps>;
 export declare const WithPrefix: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, ControlsButtonProps>;
 export declare const WithIcon: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, ControlsButtonProps>;
+export declare const WithTooltip: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, ControlsButtonProps>;

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

@@ -1,10 +1,10 @@
-import { jsx as l } from "react/jsx-runtime";
+import { jsx as l, jsxs as a, Fragment as r } from "react/jsx-runtime";
 import { l as e } from "../../index-BYGu3RV5.js";
-import { ControlsButton as o } from "./ControlsButton.js";
-import { Icons as a } from "../Icon/icons/index.js";
-const r = Object.keys(a), c = "<ControlsButton type={radio or checkbox} label={} value={} prefix={} forceSquared={}isChecked={} variant={} disabled={} notValid={} onSetValue={} key={} />", f = {
+import { ControlsButton as t } from "./ControlsButton.js";
+import { Icons as c } from "../Icon/icons/index.js";
+const s = Object.keys(c), i = "<ControlsButton type={radio or checkbox} label={} value={} prefix={} tooltip={} forceSquared={}isChecked={} variant={} disabled={} notValid={} onSetValue={} key={} />", S = {
   title: "Atoms/ControlsButton",
-  component: o,
+  component: t,
   argTypes: {
     label: {
       control: "text"
@@ -14,7 +14,7 @@ const r = Object.keys(a), c = "<ControlsButton type={radio or checkbox} label={}
     },
     iconName: {
       control: { type: "select" },
-      options: r
+      options: s
     },
     forceSquared: {
       control: "boolean"
@@ -32,37 +32,51 @@ const r = Object.keys(a), c = "<ControlsButton type={radio or checkbox} label={}
     }
   },
   parameters: {
-    inspectComponent: o,
-    codeString: c
+    inspectComponent: t,
+    codeString: i
   }
-}, t = (n) => /* @__PURE__ */ l(o, { ...n }), s = t.bind({});
-s.args = {
+}, o = (n) => /* @__PURE__ */ l(t, { ...n }), p = o.bind({});
+p.args = {
   type: "checkbox",
   label: "1.2",
   value: "1.2",
   forceSquared: !0,
   onSetValue: e()
 };
-const i = t.bind({});
-i.args = {
+const b = o.bind({});
+b.args = {
   type: "checkbox",
   label: "1.3",
   value: "1.3",
   prefix: "13",
   onSetValue: e()
 };
-const b = t.bind({});
-b.args = {
+const u = o.bind({});
+u.args = {
   type: "checkbox",
   label: "2.1",
   value: "2.1",
   iconName: "AcademicCap",
   onSetValue: e()
 };
+const d = o.bind({});
+d.args = {
+  type: "checkbox",
+  label: "5",
+  value: "5",
+  prefix: "40",
+  tooltip: /* @__PURE__ */ a(r, { children: [
+    "15 dec - 19 dec",
+    /* @__PURE__ */ l("br", {}),
+    "2025"
+  ] }),
+  onSetValue: e()
+};
 export {
-  s as ControlsButtonExample,
-  b as WithIcon,
-  i as WithPrefix,
-  f as default
+  p as ControlsButtonExample,
+  u as WithIcon,
+  b as WithPrefix,
+  d as WithTooltip,
+  S as default
 };
 //# sourceMappingURL=ControlsButton.stories.js.map

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\nimport { Icons } from 'components/Icon/icons';\r\n\r\nconst iconNames = Object.keys(Icons) as (keyof typeof Icons)[];\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    iconName: {\r\n      control: { type: 'select' },\r\n      options: iconNames,\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\r\nexport const WithPrefix = Template.bind({});\r\nWithPrefix.args = {\r\n  type: 'checkbox',\r\n  label: '1.3',\r\n  value: '1.3',\r\n  prefix: '13',\r\n  onSetValue: fn(),\r\n};\r\n\r\nexport const WithIcon = Template.bind({});\r\nWithIcon.args = {\r\n  type: 'checkbox',\r\n  label: '2.1',\r\n  value: '2.1',\r\n  iconName: 'AcademicCap',\r\n  onSetValue: fn(),\r\n};\r\n"],"names":["iconNames","Icons","codeString","ControlsButton_stories","ControlsButton","Template","args","jsx","ControlsButtonExample","fn","WithPrefix","WithIcon"],"mappings":";;;;AASA,MAAMA,IAAY,OAAO,KAAKC,CAAK,GAE7BC,IACJ,+JAGFC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,IAEX,OAAO;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,IAEX,UAAU;AAAA,MACR,SAAS,EAAE,MAAM,SAAA;AAAA,MACjB,SAASJ;AAAA,IAAA;AAAA,IAEX,cAAc;AAAA,MACZ,SAAS;AAAA,IAAA;AAAA,IAEX,WAAW;AAAA,MACT,SAAS;AAAA,IAAA;AAAA,IAEX,UAAU;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,IAEX,YAAY;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBI;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAyC,CAACC,MAAS,gBAAAC,EAACH,GAAA,EAAgB,GAAGE,GAAM,GAEtEE,IAAwBH,EAAS,KAAK,CAAA,CAAE;AACrDG,EAAsB,OAAO;AAAA,EAC3B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,cAAc;AAAA,EACd,YAAYC,EAAA;AACd;AAEO,MAAMC,IAAaL,EAAS,KAAK,CAAA,CAAE;AAC1CK,EAAW,OAAO;AAAA,EAChB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,YAAYD,EAAA;AACd;AAEO,MAAME,IAAWN,EAAS,KAAK,CAAA,CAAE;AACxCM,EAAS,OAAO;AAAA,EACd,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAU;AAAA,EACV,YAAYF,EAAA;AACd;"}
+{"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\nimport { Icons } from 'components/Icon/icons';\r\n\r\nconst iconNames = Object.keys(Icons) as (keyof typeof Icons)[];\r\n\r\nconst codeString =\r\n  '<ControlsButton type={radio or checkbox} label={} value={} prefix={} tooltip={} 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    iconName: {\r\n      control: { type: 'select' },\r\n      options: iconNames,\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\r\nexport const WithPrefix = Template.bind({});\r\nWithPrefix.args = {\r\n  type: 'checkbox',\r\n  label: '1.3',\r\n  value: '1.3',\r\n  prefix: '13',\r\n  onSetValue: fn(),\r\n};\r\n\r\nexport const WithIcon = Template.bind({});\r\nWithIcon.args = {\r\n  type: 'checkbox',\r\n  label: '2.1',\r\n  value: '2.1',\r\n  iconName: 'AcademicCap',\r\n  onSetValue: fn(),\r\n};\r\n\r\nexport const WithTooltip = Template.bind({});\r\nWithTooltip.args = {\r\n  type: 'checkbox',\r\n  label: '5',\r\n  value: '5',\r\n  prefix: '40',\r\n  tooltip: (\r\n    <>\r\n      15 dec - 19 dec\r\n      <br />\r\n      2025\r\n    </>\r\n  ),\r\n  onSetValue: fn(),\r\n};\r\n"],"names":["iconNames","Icons","codeString","ControlsButton_stories","ControlsButton","Template","args","jsx","ControlsButtonExample","fn","WithPrefix","WithIcon","WithTooltip","jsxs","Fragment"],"mappings":";;;;AASA,MAAMA,IAAY,OAAO,KAAKC,CAAK,GAE7BC,IACJ,0KAGFC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,IAEX,OAAO;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,IAEX,UAAU;AAAA,MACR,SAAS,EAAE,MAAM,SAAA;AAAA,MACjB,SAASJ;AAAA,IAAA;AAAA,IAEX,cAAc;AAAA,MACZ,SAAS;AAAA,IAAA;AAAA,IAEX,WAAW;AAAA,MACT,SAAS;AAAA,IAAA;AAAA,IAEX,UAAU;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,IAEX,YAAY;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBI;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAyC,CAACC,MAAS,gBAAAC,EAACH,GAAA,EAAgB,GAAGE,GAAM,GAEtEE,IAAwBH,EAAS,KAAK,CAAA,CAAE;AACrDG,EAAsB,OAAO;AAAA,EAC3B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,cAAc;AAAA,EACd,YAAYC,EAAA;AACd;AAEO,MAAMC,IAAaL,EAAS,KAAK,CAAA,CAAE;AAC1CK,EAAW,OAAO;AAAA,EAChB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,YAAYD,EAAA;AACd;AAEO,MAAME,IAAWN,EAAS,KAAK,CAAA,CAAE;AACxCM,EAAS,OAAO;AAAA,EACd,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAU;AAAA,EACV,YAAYF,EAAA;AACd;AAEO,MAAMG,IAAcP,EAAS,KAAK,CAAA,CAAE;AAC3CO,EAAY,OAAO;AAAA,EACjB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SACE,gBAAAC,EAAAC,GAAA,EAAE,UAAA;AAAA,IAAA;AAAA,sBAEC,MAAA,EAAG;AAAA,IAAE;AAAA,EAAA,GAER;AAAA,EAEF,YAAYL,EAAA;AACd;"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@uva-glass/component-library",
   "author": "Team Glass - Frontend vrienden",
   "private": false,
-  "version": "3.38.3",
+  "version": "3.39.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -45,12 +45,12 @@
   "devDependencies": {
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
-    "@react-aria/button": "^3.14.0",
-    "@react-aria/dialog": "^3.5.28",
-    "@react-aria/overlays": "^3.28.0",
-    "@react-types/dialog": "^3.5.20",
+    "@react-aria/button": "^3.14.1",
+    "@react-aria/dialog": "^3.5.29",
+    "@react-aria/overlays": "^3.29.0",
+    "@react-types/dialog": "^3.5.21",
     "@semantic-release/git": "^10.0.1",
-    "@semantic-release/gitlab": "^13.2.7",
+    "@semantic-release/gitlab": "^13.2.8",
     "@semantic-release/npm": "^12.0.2",
     "@storybook/addon-a11y": "^9.1.3",
     "@storybook/addon-docs": "^9.1.3",