@uva-glass/component-library 3.43.1 → 3.44.0

package/dist/components/ControlsButton/ControlsButton.js

@@ -1,7 +1,7 @@
-import { jsxs as s, Fragment as g, jsx as o } from "react/jsx-runtime";
-import { useId as v } from "react";
-import { c as e } from "../../clsx-OuTLNxxd.js";
-import { Icon as I } from "../Icon/Icon.js";
+import { jsxs as c, Fragment as g, jsx as o } from "react/jsx-runtime";
+import { useId as I } from "react";
+import { c as b } from "../../clsx-OuTLNxxd.js";
+import { Icon as $ } from "../Icon/Icon.js";
 import '../../assets/ControlsButton.css';const t = {
   "controls-input": "_controls-input_lu12f_1",
   "controls-button": "_controls-button_lu12f_32",
@@ -14,13 +14,13 @@ import '../../assets/ControlsButton.css';const t = {
   "controls-button__tooltip--left": "_controls-button__tooltip--left_lu12f_98",
   "controls-button__tooltip--center": "_controls-button__tooltip--center_lu12f_102",
   "controls-button__tooltip--right": "_controls-button__tooltip--right_lu12f_107"
-}, y = ({
-  type: b = "checkbox",
-  label: c,
-  value: p,
-  iconName: n,
+}, z = ({
+  type: p = "checkbox",
+  label: n,
+  value: i,
+  iconName: r,
   prefix: l,
-  tooltip: r,
+  tooltip: s,
   tooltipPosition: a = "center",
   name: f,
   forceSquared: d = !1,
@@ -28,44 +28,44 @@ import '../../assets/ControlsButton.css';const t = {
   disabled: m,
   onSetValue: x
 }) => {
-  const w = v(), i = c.replace(/\s+/g, "_"), _ = `${w}${i}`, u = `${_}-tooltip`;
-  return /* @__PURE__ */ s(g, { children: [
+  const w = I(), u = (typeof n == "string" ? n : i).replace(/\s+/g, "_"), _ = `${w}${u}`, e = `${_}-tooltip`;
+  return /* @__PURE__ */ c(g, { children: [
     /* @__PURE__ */ o(
       "input",
       {
-        type: b,
+        type: p,
         id: _,
-        name: f ?? i,
+        name: f ?? u,
         disabled: m,
-        value: p,
+        value: i,
         checked: h,
         onChange: x,
         className: t["controls-input"],
-        "aria-describedby": r ? u : void 0
+        "aria-describedby": s ? e : void 0
       }
     ),
-    /* @__PURE__ */ s(
+    /* @__PURE__ */ c(
       "label",
       {
         htmlFor: _,
-        className: e(t["controls-button"], [
+        className: b(t["controls-button"], [
           d && t["controls-button--squared"],
           l && t["controls-button--with-prefix"],
-          n && t["controls-button--with-icon"]
+          r && t["controls-button--with-icon"]
         ]),
         children: [
-          n && /* @__PURE__ */ o(I, { name: n, size: 20 }),
-          /* @__PURE__ */ s("div", { className: t["controls-button__wrapper"], children: [
+          r && /* @__PURE__ */ o($, { name: r, size: 20 }),
+          /* @__PURE__ */ c("div", { className: t["controls-button__wrapper"], children: [
             l && /* @__PURE__ */ o("div", { className: t["controls-button__prefix"], children: l }),
-            c
+            n
           ] }),
-          r && /* @__PURE__ */ o(
+          s && /* @__PURE__ */ o(
             "div",
             {
-              id: u,
+              id: e,
               role: "tooltip",
-              className: e(t["controls-button__tooltip"], t[`controls-button__tooltip--${a}`]),
-              children: r
+              className: b(t["controls-button__tooltip"], t[`controls-button__tooltip--${a}`]),
+              children: s
             }
           )
         ]
@@ -74,6 +74,6 @@ import '../../assets/ControlsButton.css';const t = {
   ] });
 };
 export {
-  y as ControlsButton
+  z 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, 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 horizontal position of the tooltip */\r\n  tooltipPosition?: 'left' | 'center' | 'right';\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  tooltipPosition = 'center',\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\r\n            id={tooltipId}\r\n            role=\"tooltip\"\r\n            className={clsx(styles['controls-button__tooltip'], styles[`controls-button__tooltip--${tooltipPosition}`])}\r\n          >\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","tooltipPosition","name","forceSquared","checked","disabled","onSetValue","idPrefix","useId","sanitizedLabel","baseId","tooltipId","jsxs","Fragment","jsx","styles","clsx","Icon"],"mappings":";;;;;;;;;;;;;;;;GAqCaA,IAAiB,CAAC;AAAA,EAC7B,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,MAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AACF,MAA2B;AACzB,QAAMC,IAAWC,EAAA,GACXC,IAAiBb,EAAM,QAAQ,QAAQ,GAAG,GAC1Cc,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,MAAAnB;AAAA,QACA,IAAIe;AAAA,QACJ,MAAMR,KAAQO;AAAA,QACd,UAAAJ;AAAA,QACA,OAAAR;AAAA,QACA,SAAAO;AAAA,QACA,UAAUE;AAAA,QACV,WAAWS,EAAO,gBAAgB;AAAA,QAClC,oBAAkBf,IAAUW,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,UACjDhB,KAAUgB,EAAO,8BAA8B;AAAA,UAC/CjB,KAAYiB,EAAO,4BAA4B;AAAA,QAAA,CAChD;AAAA,QAEA,UAAA;AAAA,UAAAjB,KAAY,gBAAAgB,EAACG,GAAA,EAAK,MAAMnB,GAAU,MAAM,IAAI;AAAA,UAC7C,gBAAAc,EAAC,OAAA,EAAI,WAAWG,EAAO,0BAA0B,GAC9C,UAAA;AAAA,YAAAhB,uBAAW,OAAA,EAAI,WAAWgB,EAAO,yBAAyB,GAAI,UAAAhB,GAAO;AAAA,YACrEH;AAAA,UAAA,GACH;AAAA,UACCI,KACC,gBAAAc;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAIH;AAAA,cACJ,MAAK;AAAA,cACL,WAAWK,EAAKD,EAAO,0BAA0B,GAAGA,EAAO,6BAA6Bd,CAAe,EAAE,CAAC;AAAA,cAEzG,UAAAD;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,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 | ReactNode;\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 horizontal position of the tooltip */\r\n  tooltipPosition?: 'left' | 'center' | 'right';\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  tooltipPosition = 'center',\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 labelString = typeof label === 'string' ? label : value;\r\n  const sanitizedLabel = labelString.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\r\n            id={tooltipId}\r\n            role=\"tooltip\"\r\n            className={clsx(styles['controls-button__tooltip'], styles[`controls-button__tooltip--${tooltipPosition}`])}\r\n          >\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","tooltipPosition","name","forceSquared","checked","disabled","onSetValue","idPrefix","useId","sanitizedLabel","baseId","tooltipId","jsxs","Fragment","jsx","styles","clsx","Icon"],"mappings":";;;;;;;;;;;;;;;;GAqCaA,IAAiB,CAAC;AAAA,EAC7B,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,MAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AACF,MAA2B;AACzB,QAAMC,IAAWC,EAAA,GAEXC,KADc,OAAOb,KAAU,WAAWA,IAAQC,GACrB,QAAQ,QAAQ,GAAG,GAChDa,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,MAAAnB;AAAA,QACA,IAAIe;AAAA,QACJ,MAAMR,KAAQO;AAAA,QACd,UAAAJ;AAAA,QACA,OAAAR;AAAA,QACA,SAAAO;AAAA,QACA,UAAUE;AAAA,QACV,WAAWS,EAAO,gBAAgB;AAAA,QAClC,oBAAkBf,IAAUW,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,UACjDhB,KAAUgB,EAAO,8BAA8B;AAAA,UAC/CjB,KAAYiB,EAAO,4BAA4B;AAAA,QAAA,CAChD;AAAA,QAEA,UAAA;AAAA,UAAAjB,KAAY,gBAAAgB,EAACG,GAAA,EAAK,MAAMnB,GAAU,MAAM,IAAI;AAAA,UAC7C,gBAAAc,EAAC,OAAA,EAAI,WAAWG,EAAO,0BAA0B,GAC9C,UAAA;AAAA,YAAAhB,uBAAW,OAAA,EAAI,WAAWgB,EAAO,yBAAyB,GAAI,UAAAhB,GAAO;AAAA,YACrEH;AAAA,UAAA,GACH;AAAA,UACCI,KACC,gBAAAc;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAIH;AAAA,cACJ,MAAK;AAAA,cACL,WAAWK,EAAKD,EAAO,0BAA0B,GAAGA,EAAO,6BAA6Bd,CAAe,EAAE,CAAC;AAAA,cAEzG,UAAAD;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,GACF;AAEJ;"}

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

@@ -6,3 +6,4 @@ export declare const ControlsButtonExample: import('storybook/internal/csf').Ann
 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>;
+export declare const WithComplexLabel: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, ControlsButtonProps>;

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

@@ -1,8 +1,9 @@
-import { jsx as n, jsxs as a, Fragment as r } from "react/jsx-runtime";
-import { l as o } from "../../index-BamlKH-k.js";
+import { jsx as r, jsxs as l, Fragment as s } from "react/jsx-runtime";
+import { l as e } from "../../index-DvUwfXNb.js";
 import { ControlsButton as t } from "./ControlsButton.js";
-import { Icons as c } from "../Icon/icons/index.js";
-const i = Object.keys(c), s = "<ControlsButton type={radio or checkbox} label={} value={} prefix={} tooltip={} forceSquared={}isChecked={} variant={} disabled={} notValid={} onSetValue={} key={} />", S = {
+import { Icons as a } from "../Icon/icons/index.js";
+import { Periods as i } from "../Periods/Periods.js";
+const c = Object.keys(a), m = "<ControlsButton type={radio or checkbox} label={} value={} prefix={} tooltip={} forceSquared={}isChecked={} variant={} disabled={} notValid={} onSetValue={} key={} />", C = {
   title: "Atoms/ControlsButton",
   component: t,
   argTypes: {
@@ -14,7 +15,7 @@ const i = Object.keys(c), s = "<ControlsButton type={radio or checkbox} label={}
     },
     iconName: {
       control: { type: "select" },
-      options: i
+      options: c
     },
     forceSquared: {
       control: "boolean"
@@ -33,51 +34,95 @@ const i = Object.keys(c), s = "<ControlsButton type={radio or checkbox} label={}
   },
   parameters: {
     inspectComponent: t,
-    codeString: s
+    codeString: m
   }
-}, e = (l) => /* @__PURE__ */ n(t, { ...l }), p = e.bind({});
-p.args = {
+}, o = (n) => /* @__PURE__ */ r(t, { ...n }), b = o.bind({});
+b.args = {
   type: "checkbox",
   label: "1.2",
   value: "1.2",
   forceSquared: !0,
-  onSetValue: o()
+  onSetValue: e()
 };
-const b = e.bind({});
-b.args = {
+const p = o.bind({});
+p.args = {
   type: "checkbox",
   label: "1.3",
   value: "1.3",
   prefix: "13",
-  onSetValue: o()
+  onSetValue: e()
 };
-const u = e.bind({});
-u.args = {
+const d = o.bind({});
+d.args = {
   type: "checkbox",
   label: "2.1",
   value: "2.1",
   iconName: "AcademicCap",
-  onSetValue: o()
+  onSetValue: e()
 };
-const d = e.bind({});
-d.args = {
+const u = o.bind({});
+u.args = {
   type: "checkbox",
   label: "5",
   value: "5",
   prefix: "40",
-  tooltip: /* @__PURE__ */ a(r, { children: [
+  tooltip: /* @__PURE__ */ l(s, { children: [
     "15 dec - 19 dec",
-    /* @__PURE__ */ n("br", {}),
+    /* @__PURE__ */ r("br", {}),
     "2025"
   ] }),
   tooltipPosition: "center",
-  onSetValue: o()
+  onSetValue: e()
+};
+const x = o.bind({});
+x.args = {
+  type: "checkbox",
+  label: /* @__PURE__ */ r(
+    i,
+    {
+      periods: [
+        {
+          id: "2023P1",
+          number: 1,
+          semesterNumber: 1,
+          periodInSemester: 1
+        },
+        {
+          id: "2023P2",
+          number: 2,
+          semesterNumber: 1,
+          periodInSemester: 2
+        },
+        {
+          id: "2023P3",
+          number: 3,
+          semesterNumber: 1,
+          periodInSemester: 3
+        },
+        {
+          id: "2023P5",
+          number: 5,
+          semesterNumber: 2,
+          periodInSemester: 2
+        },
+        {
+          id: "2023P7",
+          number: 7,
+          semesterNumber: 3,
+          periodInSemester: 1
+        }
+      ]
+    }
+  ),
+  value: "5",
+  onSetValue: e()
 };
 export {
-  p as ControlsButtonExample,
-  u as WithIcon,
-  b as WithPrefix,
-  d as WithTooltip,
-  S as default
+  b as ControlsButtonExample,
+  x as WithComplexLabel,
+  d as WithIcon,
+  p as WithPrefix,
+  u as WithTooltip,
+  C 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={} 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  tooltipPosition: 'center',\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,iBAAiB;AAAA,EACjB,YAAYL,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\nimport { Periods } from 'components/Periods';\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  tooltipPosition: 'center',\r\n  onSetValue: fn(),\r\n};\r\n\r\nexport const WithComplexLabel = Template.bind({});\r\nWithComplexLabel.args = {\r\n  type: 'checkbox',\r\n  label: (\r\n    <Periods\r\n      periods={[\r\n        {\r\n          id: '2023P1',\r\n          number: 1,\r\n          semesterNumber: 1,\r\n          periodInSemester: 1,\r\n        },\r\n        {\r\n          id: '2023P2',\r\n          number: 2,\r\n          semesterNumber: 1,\r\n          periodInSemester: 2,\r\n        },\r\n        {\r\n          id: '2023P3',\r\n          number: 3,\r\n          semesterNumber: 1,\r\n          periodInSemester: 3,\r\n        },\r\n        {\r\n          id: '2023P5',\r\n          number: 5,\r\n          semesterNumber: 2,\r\n          periodInSemester: 2,\r\n        },\r\n        {\r\n          id: '2023P7',\r\n          number: 7,\r\n          semesterNumber: 3,\r\n          periodInSemester: 1,\r\n        },\r\n      ]}\r\n    />\r\n  ),\r\n  value: '5',\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","WithComplexLabel","Periods"],"mappings":";;;;;AAUA,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,iBAAiB;AAAA,EACjB,YAAYL,EAAA;AACd;AAEO,MAAMM,IAAmBV,EAAS,KAAK,CAAA,CAAE;AAChDU,EAAiB,OAAO;AAAA,EACtB,MAAM;AAAA,EACN,OACE,gBAAAR;AAAA,IAACS;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,QACP;AAAA,UACE,IAAI;AAAA,UACJ,QAAQ;AAAA,UACR,gBAAgB;AAAA,UAChB,kBAAkB;AAAA,QAAA;AAAA,QAEpB;AAAA,UACE,IAAI;AAAA,UACJ,QAAQ;AAAA,UACR,gBAAgB;AAAA,UAChB,kBAAkB;AAAA,QAAA;AAAA,QAEpB;AAAA,UACE,IAAI;AAAA,UACJ,QAAQ;AAAA,UACR,gBAAgB;AAAA,UAChB,kBAAkB;AAAA,QAAA;AAAA,QAEpB;AAAA,UACE,IAAI;AAAA,UACJ,QAAQ;AAAA,UACR,gBAAgB;AAAA,UAChB,kBAAkB;AAAA,QAAA;AAAA,QAEpB;AAAA,UACE,IAAI;AAAA,UACJ,QAAQ;AAAA,UACR,gBAAgB;AAAA,UAChB,kBAAkB;AAAA,QAAA;AAAA,MACpB;AAAA,IACF;AAAA,EAAA;AAAA,EAGJ,OAAO;AAAA,EACP,YAAYP,EAAA;AACd;"}

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
 import { jsx as l } from "react/jsx-runtime";
-import { l as n } from "../../index-BamlKH-k.js";
+import { l as n } from "../../index-DvUwfXNb.js";
 import { MultiSelectBox as e } from "./MultiSelectBox.js";
 const c = "<MultiSelectBox selectData={[{label, value}]} onChange={fn} labelSuffix={string} />", f = {
   title: "Organisms/MultiSelectBox",

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

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

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
 import { jsx as a, jsxs as M } from "react/jsx-runtime";
-import { l as i } from "../../index-BamlKH-k.js";
+import { l as i } from "../../index-DvUwfXNb.js";
 import { SelectListbox as r } from "./SelectListbox.js";
 import * as e from "react";
 const E = ({
@@ -92,7 +92,7 @@ const E = ({
       default: !1
     },
     variant: {
-      options: ["default", "noborder", "pill", "pillLeft", "pillRight", "darkBorder"],
+      options: ["default", "noborder", "pill", "pillLeft", "pillRight", "darkBorder", "roundedLeft", "roundedRight"],
       control: { type: "select" }
     },
     optionPositionRight: {
@@ -149,7 +149,7 @@ const E = ({
   mobileBreakpoint: "28rem",
   size: "default",
   onChange: i()
-}, L = (t) => /* @__PURE__ */ a("div", { style: { width: "30rem", margin: "0rem auto 0 auto" }, children: /* @__PURE__ */ a(r, { ...t, children: d.map(({ label: l, value: c }, h) => /* @__PURE__ */ a(r.SelectOption, { option: { label: l, value: c }, index: h, children: l }, `${c}`)) }) }), f = L.bind({});
+}, L = (t) => /* @__PURE__ */ a("div", { style: { width: "30rem", margin: "0rem auto 0 auto" }, children: /* @__PURE__ */ a(r, { ...t, children: d.map(({ label: l, value: c }, n) => /* @__PURE__ */ a(r.SelectOption, { option: { label: l, value: c }, index: n, children: l }, `${c}`)) }) }), f = L.bind({});
 f.args = {
   ...m
 };
@@ -171,7 +171,7 @@ const S = ({ label: t, value: l }) => /* @__PURE__ */ M("div", { style: { displa
     ES: /* @__PURE__ */ a(u, { style: { width: "24px", height: "24px", marginRight: "10px" } })
   }[l],
   t
-] }), y = (t) => /* @__PURE__ */ a("div", { style: { width: "10rem", margin: "0rem auto 0 auto" }, children: /* @__PURE__ */ a(r, { ...t, children: t.options.map(({ label: l, value: c }, h) => /* @__PURE__ */ a(r.SelectOption, { option: { label: l, value: c }, index: h, children: /* @__PURE__ */ a(S, { label: l, value: c }) }, `${c}`)) }) }), k = y.bind({});
+] }), y = (t) => /* @__PURE__ */ a("div", { style: { width: "10rem", margin: "0rem auto 0 auto" }, children: /* @__PURE__ */ a(r, { ...t, children: t.options.map(({ label: l, value: c }, n) => /* @__PURE__ */ a(r.SelectOption, { option: { label: l, value: c }, index: n, children: /* @__PURE__ */ a(S, { label: l, value: c }) }, `${c}`)) }) }), k = y.bind({});
 k.args = {
   ...m
 };
@@ -234,8 +234,8 @@ const B = [
   size: "default",
   onChange: i()
 }, N = (t) => {
-  const { options: l, ...c } = t, n = (t.SwitchLanguage ?? "EN") === "NL" ? B : j;
-  return /* @__PURE__ */ a("div", { style: { width: "30rem", margin: "0rem auto 0 auto" }, children: /* @__PURE__ */ a(r, { ...c, options: n, children: n.map(({ label: o, value: s }, p) => /* @__PURE__ */ a(r.SelectOption, { option: { label: o, value: s }, index: p, children: o }, `${s}`)) }) });
+  const { options: l, ...c } = t, h = (t.SwitchLanguage ?? "EN") === "NL" ? B : j;
+  return /* @__PURE__ */ a("div", { style: { width: "50rem", margin: "0rem auto 0 auto" }, children: /* @__PURE__ */ a(r, { ...c, options: h, children: h.map(({ label: o, value: s }, p) => /* @__PURE__ */ a(r.SelectOption, { option: { label: o, value: s }, index: p, children: o }, `${s}`)) }) });
 }, D = N.bind({});
 D.args = {
   ...V