@uva-glass/component-library 1.48.1 → 1.50.0

package/dist/components/CheckboxButtonBar/CheckboxButtonBar.js

@@ -0,0 +1,62 @@
+import { jsxs as a, jsx as c } from "react/jsx-runtime";
+import { useRef as d } from "react";
+import { c as g } from "../../clsx-OuTLNxxd.js";
+import { CheckboxButton as w } from "../CheckboxButton/CheckboxButton.js";
+import { Label as C } from "../Label/Label.js";
+import { Icon as N } from "../Icon/Icon.js";
+import '../../assets/CheckboxButtonBar.css';const n = {
+  "checkbox-button-bar__container": "_checkbox-button-bar__container_1b278_1",
+  "checkbox-button-bar__container--label-left": "_checkbox-button-bar__container--label-left_1b278_6",
+  "checkbox-button-bar__container--label-top": "_checkbox-button-bar__container--label-top_1b278_12",
+  "checkbox-button-bar__row-container": "_checkbox-button-bar__row-container_1b278_19",
+  "checkbox-button-bar__row": "_checkbox-button-bar__row_1b278_19",
+  "checkbox-button-bar__error": "_checkbox-button-bar__error_1b278_30"
+}, y = ({
+  checkboxes: i,
+  defaultValues: t,
+  label: l,
+  labelPosition: s = "top",
+  required: h = !1,
+  notValidatedText: b = "",
+  disableGroup: u = !1,
+  onSetValues: m
+}) => {
+  const e = d(t ? t.map(String) : []), x = (o, r) => {
+    o === null ? e.current = e.current.filter((_) => _ !== r) : e.current = [...e.current, r], m(e.current);
+  }, k = (o, r) => o === 0 && r !== 1 ? "start" : o < r - 1 ? "middle" : r === 1 ? "single" : "end";
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: g(
+        n["checkbox-button-bar__container"],
+        n[`checkbox-button-bar__container--label-${s}`]
+      ),
+      children: [
+        l && /* @__PURE__ */ c(C, { htmlFor: "", required: h, children: l }),
+        /* @__PURE__ */ a("div", { className: n["checkbox-button-bar__row-container"], children: [
+          /* @__PURE__ */ c("div", { className: n["checkbox-button-bar__row"], children: i.map(({ label: o, value: r, disabled: _ }, f) => /* @__PURE__ */ c(
+            w,
+            {
+              label: o,
+              value: r,
+              isChecked: t ? t.includes(r) : !1,
+              variant: k(f, i.length),
+              disabled: _ || u,
+              notValid: b !== "",
+              onSetValue: (p) => x(p, r)
+            },
+            `${r}`
+          )) }),
+          b !== "" && /* @__PURE__ */ a("div", { className: n["checkbox-button-bar__error"], children: [
+            /* @__PURE__ */ c(N, { name: "ExclamationTriangleFill", size: 24 }),
+            b
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  y as CheckboxButtonBar
+};
+//# sourceMappingURL=CheckboxButtonBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxButtonBar.js","sources":["../../../src/components/CheckboxButtonBar/CheckboxButtonBar.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport type { CheckboxButtonProps } from 'components/CheckboxButton';\n\nimport styles from './CheckboxButtonBar.module.css';\n\nimport { CheckboxButton } from 'components/CheckboxButton';\nimport { Label } from 'components/Label';\nimport { Icon } from 'components/Icon';\n\ntype CheckboxProps = {\n  label: string;\n  value: string;\n  disabled?: boolean;\n};\n\nexport interface CheckboxButtonBarProps {\n  /** array with objects with label, value */\n  checkboxes: CheckboxProps[];\n  //** array with values */\n  defaultValues?: string[];\n  label?: string;\n  /** 'top' | 'left' */\n  labelPosition?: 'top' | 'left';\n  required?: boolean;\n  /** error text to display if set */\n  notValidatedText?: string;\n  /** disables all checkboxes in the bar */\n  disableGroup?: boolean;\n  onSetValues: (value: string[]) => void;\n}\n\n/** Represents a component that shows a collection of [CheckboxButton](/story/atoms-checkboxbutton--checkbox-button-example)s. */\nexport const CheckboxButtonBar = ({\n  checkboxes,\n  defaultValues,\n  label,\n  labelPosition = 'top',\n  required = false,\n  notValidatedText = '',\n  disableGroup = false,\n  onSetValues,\n}: CheckboxButtonBarProps) => {\n  const values = useRef<string[]>(defaultValues ? defaultValues.map(String) : []);\n\n  const handleChange = (setValue: string | null, value: string) => {\n    if (setValue === null) {\n      values.current = values.current.filter((val) => val !== value);\n    } else {\n      values.current = [...values.current, value];\n    }\n    onSetValues(values.current);\n  };\n\n  const getVariant = (index: number, totalItems: number): CheckboxButtonProps['variant'] => {\n    if (index === 0 && totalItems !== 1) {\n      return 'start';\n    } else if (index < totalItems - 1) {\n      return 'middle';\n    } else if (totalItems === 1) {\n      return 'single';\n    } else {\n      return 'end';\n    }\n  };\n\n  return (\n    <div\n      className={clsx(\n        styles['checkbox-button-bar__container'],\n        styles[`checkbox-button-bar__container--label-${labelPosition}`]\n      )}\n    >\n      {label && (\n        <Label htmlFor=\"\" required={required}>\n          {label}\n        </Label>\n      )}\n      <div className={styles['checkbox-button-bar__row-container']}>\n        <div className={styles['checkbox-button-bar__row']}>\n          {checkboxes.map(({ label, value, disabled }, index) => (\n            <CheckboxButton\n              key={`${value}`}\n              label={label}\n              value={value}\n              isChecked={defaultValues ? defaultValues.includes(value) : false}\n              variant={getVariant(index, checkboxes.length)}\n              disabled={disabled || disableGroup}\n              notValid={notValidatedText !== ''}\n              onSetValue={(newValue) => handleChange(newValue, value)}\n            />\n          ))}\n        </div>\n        {notValidatedText !== '' && (\n          <div className={styles['checkbox-button-bar__error']}>\n            <Icon name=\"ExclamationTriangleFill\" size={24} />\n            {notValidatedText}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["CheckboxButtonBar","checkboxes","defaultValues","label","labelPosition","required","notValidatedText","disableGroup","onSetValues","values","useRef","handleChange","setValue","value","val","getVariant","index","totalItems","jsxs","clsx","styles","jsx","Label","disabled","CheckboxButton","newValue","Icon"],"mappings":";;;;;;;;;;;;;GAkCaA,IAAoB,CAAC;AAAA,EAChC,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,UAAAC,IAAW;AAAA,EACX,kBAAAC,IAAmB;AAAA,EACnB,cAAAC,IAAe;AAAA,EACf,aAAAC;AACF,MAA8B;AACtB,QAAAC,IAASC,EAAiBR,IAAgBA,EAAc,IAAI,MAAM,IAAI,CAAA,CAAE,GAExES,IAAe,CAACC,GAAyBC,MAAkB;AAC/D,IAAID,MAAa,OACfH,EAAO,UAAUA,EAAO,QAAQ,OAAO,CAACK,MAAQA,MAAQD,CAAK,IAE7DJ,EAAO,UAAU,CAAC,GAAGA,EAAO,SAASI,CAAK,GAE5CL,EAAYC,EAAO,OAAO;AAAA,EAAA,GAGtBM,IAAa,CAACC,GAAeC,MAC7BD,MAAU,KAAKC,MAAe,IACzB,UACED,IAAQC,IAAa,IACvB,WACEA,MAAe,IACjB,WAEA;AAKT,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTC,EAAO,gCAAgC;AAAA,QACvCA,EAAO,yCAAyChB,CAAa,EAAE;AAAA,MACjE;AAAA,MAEC,UAAA;AAAA,QAAAD,KACE,gBAAAkB,EAAAC,GAAA,EAAM,SAAQ,IAAG,UAAAjB,GACf,UACHF,GAAA;AAAA,QAED,gBAAAe,EAAA,OAAA,EAAI,WAAWE,EAAO,oCAAoC,GACzD,UAAA;AAAA,UAAA,gBAAAC,EAAC,OAAI,EAAA,WAAWD,EAAO,0BAA0B,GAC9C,UAAWnB,EAAA,IAAI,CAAC,EAAE,OAAAE,GAAO,OAAAU,GAAO,UAAAU,EAAA,GAAYP,MAC3C,gBAAAK;AAAA,YAACG;AAAA,YAAA;AAAA,cAEC,OAAOrB;AAAAA,cACP,OAAAU;AAAA,cACA,WAAWX,IAAgBA,EAAc,SAASW,CAAK,IAAI;AAAA,cAC3D,SAASE,EAAWC,GAAOf,EAAW,MAAM;AAAA,cAC5C,UAAUsB,KAAYhB;AAAA,cACtB,UAAUD,MAAqB;AAAA,cAC/B,YAAY,CAACmB,MAAad,EAAac,GAAUZ,CAAK;AAAA,YAAA;AAAA,YAPjD,GAAGA,CAAK;AAAA,UAShB,CAAA,GACH;AAAA,UACCP,MAAqB,MACpB,gBAAAY,EAAC,SAAI,WAAWE,EAAO,4BAA4B,GACjD,UAAA;AAAA,YAAA,gBAAAC,EAACK,GAAK,EAAA,MAAK,2BAA0B,MAAM,IAAI;AAAA,YAC9CpB;AAAA,UAAA,GACH;AAAA,QAAA,GAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { CheckboxButtonBarProps } from './CheckboxButtonBar';
+declare const _default: Meta<CheckboxButtonBarProps>;
+export default _default;
+export declare const CheckboxButtonBarExample: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, CheckboxButtonBarProps>;

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

@@ -0,0 +1,70 @@
+import { jsx as t } from "react/jsx-runtime";
+import { fn as l } from "../../index-MQ0yPLdl.js";
+import { CheckboxButtonBar as e } from "./CheckboxButtonBar.js";
+const a = "<CheckboxButtonBar checkboxes={} defaultValues={} label={} labelPosition={} required={} notValidatedText={} disableGroup={} onSetValues={} />", i = {
+  title: "Molecules/CheckboxButtonBar",
+  component: e,
+  argTypes: {
+    checkboxes: {
+      table: {
+        disable: !0
+      }
+    },
+    defaultValues: {
+      table: {
+        disable: !0
+      }
+    },
+    label: {
+      control: "text"
+    },
+    labelPosition: {
+      control: "radio",
+      options: ["top", "left"]
+    },
+    required: {
+      control: "boolean"
+    },
+    notValidatedText: {
+      control: "text"
+    },
+    disableGroup: {
+      control: "boolean"
+    },
+    onSetValues: {
+      table: {
+        disable: !0
+      }
+    }
+  },
+  parameters: {
+    inspectComponent: e,
+    codeString: a
+  }
+}, r = (o) => /* @__PURE__ */ t(e, { ...o }), n = r.bind({});
+n.args = {
+  label: "Periode",
+  required: !0,
+  checkboxes: [
+    {
+      label: "1.1",
+      value: "1"
+    },
+    {
+      label: "1.2",
+      value: "2"
+    },
+    {
+      label: "1.3",
+      value: "3"
+    }
+  ],
+  defaultValues: ["1", "2"],
+  labelPosition: "top",
+  onSetValues: l()
+};
+export {
+  n as CheckboxButtonBarExample,
+  i as default
+};
+//# sourceMappingURL=CheckboxButtonBar.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxButtonBar.stories.js","sources":["../../../src/components/CheckboxButtonBar/CheckboxButtonBar.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { CheckboxButtonBarProps } from './CheckboxButtonBar';\n\nimport { CheckboxButtonBar } from './CheckboxButtonBar';\n\nconst codeString =\n  '<CheckboxButtonBar checkboxes={} defaultValues={} label={} labelPosition={} required={} notValidatedText={} disableGroup={} onSetValues={} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Molecules/CheckboxButtonBar',\n  component: CheckboxButtonBar,\n  argTypes: {\n    checkboxes: {\n      table: {\n        disable: true,\n      },\n    },\n    defaultValues: {\n      table: {\n        disable: true,\n      },\n    },\n    label: {\n      control: 'text',\n    },\n    labelPosition: {\n      control: 'radio',\n      options: ['top', 'left'],\n    },\n    required: {\n      control: 'boolean',\n    },\n    notValidatedText: {\n      control: 'text',\n    },\n    disableGroup: {\n      control: 'boolean',\n    },\n    onSetValues: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    inspectComponent: CheckboxButtonBar,\n    codeString: codeString,\n  },\n} as Meta<CheckboxButtonBarProps>;\n\nconst Template: StoryFn<CheckboxButtonBarProps> = (args) => <CheckboxButtonBar {...args} />;\n\nexport const CheckboxButtonBarExample = Template.bind({});\nCheckboxButtonBarExample.args = {\n  label: 'Periode',\n  required: true,\n  checkboxes: [\n    {\n      label: '1.1',\n      value: '1',\n    },\n    {\n      label: '1.2',\n      value: '2',\n    },\n    {\n      label: '1.3',\n      value: '3',\n    },\n  ],\n  defaultValues: ['1', '2'],\n  labelPosition: 'top',\n  onSetValues: fn(),\n};\n"],"names":["codeString","CheckboxButtonBar_stories","CheckboxButtonBar","Template","args","jsx","CheckboxButtonBarExample","fn"],"mappings":";;;AAOA,MAAMA,IACJ,iJAGaC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,YAAY;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,eAAe;AAAA,MACb,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,MACT,SAAS,CAAC,OAAO,MAAM;AAAA,IACzB;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,IACX;AAAA,IACA,kBAAkB;AAAA,MAChB,SAAS;AAAA,IACX;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,IACX;AAAA,IACA,aAAa;AAAA,MACX,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EACF;AACF,GAEMG,IAA4C,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAmB,GAAGE,EAAM,CAAA,GAE5EE,IAA2BH,EAAS,KAAK,EAAE;AACxDG,EAAyB,OAAO;AAAA,EAC9B,OAAO;AAAA,EACP,UAAU;AAAA,EACV,YAAY;AAAA,IACV;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,eAAe,CAAC,KAAK,GAAG;AAAA,EACxB,eAAe;AAAA,EACf,aAAaC,EAAG;AAClB;"}

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

@@ -0,0 +1 @@
+export * from './CheckboxButtonBar';

package/dist/components/CheckboxButtonBar/index.js

@@ -0,0 +1,5 @@
+import { CheckboxButtonBar as t } from "./CheckboxButtonBar.js";
+export {
+  t as CheckboxButtonBar
+};
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/CheckboxTree/CheckboxTree.d.ts

@@ -8,13 +8,15 @@ type CheckboxBranch = {
     children: CheckboxLeaf[];
 };
 export interface CheckboxTreeProps {
+    /** The title of the component. */
     title?: string;
-    /** array of checkbox groups with a label and array of children (itemname, itemvalue and disabled boolean)*/
+    /** Array of checkbox groups with a label and array of children (itemName, itemValue and disabled boolean). */
     checkboxTree: CheckboxBranch[];
-    /** array of selected values */
+    /** Array of selected values. */
     defaultValue?: string[];
-    /** returns array of selected values*/
+    /** Returns array of selected values. */
     onChange?: (value: string[]) => void;
 }
+/** Represents a component to render a tree of checkboxes. */
 export declare const CheckboxTree: ({ title, checkboxTree, defaultValue, onChange }: CheckboxTreeProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/CheckboxTree/CheckboxTree.js

@@ -1,110 +1,110 @@
-import { jsxs as l, jsx as o } from "react/jsx-runtime";
+import { jsxs as l, jsx as a } from "react/jsx-runtime";
 import { useRef as T, useEffect as N } from "react";
 import { c as g } from "../../clsx-OuTLNxxd.js";
 import { Icon as L } from "../Icon/Icon.js";
 import "@react-aria/button";
 import { Button as R } from "../Button/Button.js";
 import { Checkbox as y } from "../Checkbox/Checkbox.js";
+import { Label as S } from "../Label/Label.js";
 import "@react-aria/dialog";
 import "@react-aria/focus";
 import "@react-aria/overlays";
 import "../OverlayCloseButton/OverlayCloseButton.js";
-import { FormField as S } from "../FormField/FormField.js";
+import { FormField as C } from "../FormField/FormField.js";
 import "../GridRow/GridRow.js";
 import "../IconButton/IconButton.js";
 import "../Input/Input.js";
 import "../InputField/InputField.js";
-import { Label as C } from "../Label/Label.js";
 import "react-router-dom";
 import "../../MultiSelect-Ckf3uGw5.js";
 import "../SelectListbox/SelectListbox.js";
 import "../SelectListbox/SelectProvider.js";
 import { useResponsive as j } from "../hooks/useResponsive.js";
-import '../../assets/CheckboxTree.css';const a = {
-  "checkbox-tree__header": "_checkbox-tree__header_28uha_1",
-  "checkbox-tree__branch": "_checkbox-tree__branch_28uha_8",
-  "checkbox-tree__branch--icon": "_checkbox-tree__branch--icon_28uha_21",
-  "checkbox-tree__branch--icon--expanded": "_checkbox-tree__branch--icon--expanded_28uha_27",
-  "checkbox-tree__branch--formfield": "_checkbox-tree__branch--formfield_28uha_32",
-  "checkbox-tree__leaves": "_checkbox-tree__leaves_28uha_39",
-  "checkbox-tree__leaves--expanded": "_checkbox-tree__leaves--expanded_28uha_48",
-  "checkbox-tree__leaf": "_checkbox-tree__leaf_28uha_52"
-}, ce = ({ title: u, checkboxTree: A, defaultValue: i, onChange: b }) => {
-  const s = T([]), { lessThan: n } = j(), h = (r, e = document) => [].slice.call(e.querySelectorAll(r)), E = () => {
+import '../../assets/CheckboxTree.css';const o = {
+  "checkbox-tree__header": "_checkbox-tree__header_xbe4e_1",
+  "checkbox-tree__branch": "_checkbox-tree__branch_xbe4e_8",
+  "checkbox-tree__branch--icon": "_checkbox-tree__branch--icon_xbe4e_21",
+  "checkbox-tree__branch--icon--expanded": "_checkbox-tree__branch--icon--expanded_xbe4e_27",
+  "checkbox-tree__branch--formfield": "_checkbox-tree__branch--formfield_xbe4e_32",
+  "checkbox-tree__leaves": "_checkbox-tree__leaves_xbe4e_39",
+  "checkbox-tree__leaves--expanded": "_checkbox-tree__leaves--expanded_xbe4e_48",
+  "checkbox-tree__leaf": "_checkbox-tree__leaf_xbe4e_52"
+}, ce = ({ title: p, checkboxTree: A, defaultValue: i, onChange: x }) => {
+  const s = T([]), { lessThan: n } = j(), _ = (r, e = document) => [].slice.call(e.querySelectorAll(r)), E = () => {
     const r = s.current.reduce((e, t) => (t.name && t.checked && e.push(t.value), e), []);
-    b && b(r);
-  }, m = (r) => {
+    x && x(r);
+  }, u = (r) => {
     var e, t, d;
     for (; r; ) {
-      const c = (t = (e = r.closest("[data-ul]")) == null ? void 0 : e.parentNode) == null ? void 0 : t.querySelector("input"), f = h(
+      const c = (t = (e = r.closest("[data-ul]")) == null ? void 0 : e.parentNode) == null ? void 0 : t.querySelector("input"), f = _(
         "input",
         (d = c == null ? void 0 : c.closest("[data-li]")) == null ? void 0 : d.querySelector("[data-ul]")
-      ).reduce((k, v) => (v.disabled || k.push(v.checked), k), []), p = f.every(Boolean), F = f.some(Boolean);
-      if (c && (c.checked = p, c.indeterminate = !p && p !== F), !c || r === c)
+      ).reduce((k, v) => (v.disabled || k.push(v.checked), k), []), b = f.every(Boolean), F = f.some(Boolean);
+      if (c && (c.checked = b, c.indeterminate = !b && b !== F), !c || r === c)
         break;
       r = c;
     }
-  }, x = (r, e) => {
+  }, m = (r, e) => {
     var d, c;
     const t = e == null ? void 0 : e.querySelector("[data-ul]");
-    r.childNodes[0].classList.toggle(a["checkbox-tree__branch--icon--expanded"]), (c = e == null ? void 0 : e.closest("[data-li]")) == null || c.setAttribute(
+    r.childNodes[0].classList.toggle(o["checkbox-tree__branch--icon--expanded"]), (c = e == null ? void 0 : e.closest("[data-li]")) == null || c.setAttribute(
       "aria-expanded",
       ((d = e == null ? void 0 : e.closest("[data-li]")) == null ? void 0 : d.getAttribute("aria-expanded")) === "false" ? "true" : "false"
-    ), t && t.classList.toggle(a["checkbox-tree__leaves--expanded"]);
+    ), t && t.classList.toggle(o["checkbox-tree__leaves--expanded"]);
   }, q = (r) => {
     var c;
     const e = r.target;
     if (!e || !e.parentNode || !e.parentNode.parentNode) return;
     const t = e.parentNode.parentNode;
     if (n.md && ((c = e.previousElementSibling) == null ? void 0 : c.tagName) === "BUTTON" && t.getAttribute("aria-expanded") === "false") {
-      r.preventDefault(), x(t.querySelector("button"), t);
+      r.preventDefault(), m(t.querySelector("button"), t);
       return;
     }
     if (s.current.indexOf(e) === -1) return;
-    (e.parentNode.parentNode ? h("input", e.parentNode.parentNode) : []).forEach((_) => _.checked = _.disabled ? !1 : e.checked), m(e), E();
+    (e.parentNode.parentNode ? _("input", e.parentNode.parentNode) : []).forEach((h) => h.checked = h.disabled ? !1 : e.checked), u(e), E();
   }, B = (r) => {
     const e = r.target, t = e.closest("[data-li]");
-    x(e, t);
+    m(e, t);
   };
   return N(() => {
-    s.current = h("input") || [];
+    s.current = _("input") || [];
   }, []), N(() => {
     i && s.current.forEach((r) => {
-      i.includes(r.value) && (r.checked = !0, m(r));
+      i.includes(r.value) && (r.checked = !0, u(r));
     });
   }, [i]), /* @__PURE__ */ l("div", { children: [
-    u && /* @__PURE__ */ o("span", { className: a["checkbox-tree__header"], children: u }),
-    /* @__PURE__ */ o("div", { onClick: q, "data-ul": !0, role: "tree", tabIndex: 0, children: A.map(({ itemName: r, children: e }) => /* @__PURE__ */ l(
+    p && /* @__PURE__ */ a("span", { className: o["checkbox-tree__header"], children: p }),
+    /* @__PURE__ */ a("div", { onClick: q, "data-ul": !0, role: "tree", tabIndex: 0, children: A.map(({ itemName: r, children: e }) => /* @__PURE__ */ l(
       "div",
       {
-        className: a["checkbox-tree__branch"],
+        className: o["checkbox-tree__branch"],
         "data-li": !0,
         "aria-expanded": n.md ? "false" : "true",
         children: [
-          /* @__PURE__ */ l(S, { inline: !0, className: a["checkbox-tree__branch--formfield"], children: [
-            /* @__PURE__ */ o(R, { variant: "blank", onClick: B, children: /* @__PURE__ */ o(
+          /* @__PURE__ */ l(C, { inline: !0, className: o["checkbox-tree__branch--formfield"], children: [
+            /* @__PURE__ */ a(R, { variant: "blank", onClick: B, children: /* @__PURE__ */ a(
               L,
               {
                 name: "CheveronRight",
                 size: 16,
-                className: g(a["checkbox-tree__branch--icon"], {
-                  [a["checkbox-tree__branch--icon--expanded"]]: !n.md
+                className: g(o["checkbox-tree__branch--icon"], {
+                  [o["checkbox-tree__branch--icon--expanded"]]: !n.md
                 })
               }
             ) }),
-            /* @__PURE__ */ o(y, { id: r, disabled: e.every((t) => t.disabled) }),
-            /* @__PURE__ */ o(C, { htmlFor: r, children: r })
+            /* @__PURE__ */ a(y, { id: r, disabled: e.every((t) => t.disabled) }),
+            /* @__PURE__ */ a(S, { htmlFor: r, children: r })
           ] }),
-          /* @__PURE__ */ o(
+          /* @__PURE__ */ a(
             "div",
             {
-              className: g(a["checkbox-tree__leaves"], {
-                [a["checkbox-tree__leaves--expanded"]]: !n.md
+              className: g(o["checkbox-tree__leaves"], {
+                [o["checkbox-tree__leaves--expanded"]]: !n.md
               }),
               "data-ul": !0,
-              children: e.map(({ itemName: t, itemValue: d, disabled: c }) => /* @__PURE__ */ o("div", { className: a["checkbox-tree__leaf"], "data-li": !0, children: /* @__PURE__ */ l(S, { inline: !0, className: a["checkbox-tree__branch--formfield"], children: [
-                /* @__PURE__ */ o(y, { id: t, name: t, value: d, disabled: c }),
-                /* @__PURE__ */ o(C, { htmlFor: t, children: t })
+              children: e.map(({ itemName: t, itemValue: d, disabled: c }) => /* @__PURE__ */ a("div", { className: o["checkbox-tree__leaf"], "data-li": !0, children: /* @__PURE__ */ l(C, { inline: !0, className: o["checkbox-tree__branch--formfield"], children: [
+                /* @__PURE__ */ a(y, { id: t, name: t, value: d, disabled: c }),
+                /* @__PURE__ */ a(S, { htmlFor: t, children: t })
               ] }) }, t))
             }
           )

package/dist/components/CheckboxTree/CheckboxTree.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxTree.js","sources":["../../../src/components/CheckboxTree/CheckboxTree.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport type { MouseEventHandler } from 'react';\n\nimport styles from './CheckboxTree.module.css';\n\nimport { Button, Checkbox, FormField, Icon, Label } from 'components';\nimport { useResponsive } from 'components/hooks/useResponsive';\n\ntype CheckboxLeaf = {\n  itemName: string;\n  itemValue: string;\n  disabled?: boolean;\n};\n\ntype CheckboxBranch = {\n  itemName: string;\n  children: CheckboxLeaf[];\n};\n\nexport interface CheckboxTreeProps {\n  title?: string;\n  /** array of checkbox groups with a label and array of children (itemname, itemvalue and disabled boolean)*/\n  checkboxTree: CheckboxBranch[];\n  /** array of selected values */\n  defaultValue?: string[];\n  /** returns array of selected values*/\n  onChange?: (value: string[]) => void;\n}\n\nexport const CheckboxTree = ({ title, checkboxTree, defaultValue, onChange }: CheckboxTreeProps) => {\n  const checkboxNodes = useRef<HTMLInputElement[]>([]);\n  const { lessThan } = useResponsive();\n\n  const nodeArray = (selector: string, parent = document) => [].slice.call(parent.querySelectorAll(selector));\n\n  const setValue = () => {\n    const values = checkboxNodes.current.reduce((values, checkbox) => {\n      if (checkbox.name && checkbox.checked) {\n        values.push(checkbox.value);\n      }\n      return values;\n    }, [] as string[]);\n\n    if (onChange) onChange(values);\n  };\n\n  const setCheckboxesState = (check: HTMLInputElement) => {\n    while (check) {\n      const parent = check.closest('[data-ul]')?.parentNode?.querySelector('input');\n      const siblings: HTMLInputElement[] = nodeArray(\n        'input',\n        parent?.closest('[data-li]')?.querySelector('[data-ul]') as Document | undefined\n      );\n\n      const checkStatus = siblings.reduce((status, check) => {\n        if (!check.disabled) status.push(check.checked);\n        return status;\n      }, [] as boolean[]);\n\n      const every = checkStatus.every(Boolean);\n      const some = checkStatus.some(Boolean);\n\n      if (parent) {\n        parent.checked = every;\n        parent.indeterminate = !every && every !== some;\n      }\n\n      if (!parent || check === parent) {\n        break;\n      }\n\n      check = parent;\n    }\n  };\n\n  const setExpandedAttributes = (trigger: HTMLButtonElement, container: Element | null) => {\n    const children = container?.querySelector('[data-ul]');\n\n    (trigger.childNodes[0] as Element).classList.toggle(styles['checkbox-tree__branch--icon--expanded']);\n    container\n      ?.closest('[data-li]')\n      ?.setAttribute(\n        'aria-expanded',\n        container?.closest('[data-li]')?.getAttribute('aria-expanded') === 'false' ? 'true' : 'false'\n      );\n\n    if (children) {\n      children.classList.toggle(styles['checkbox-tree__leaves--expanded']);\n    }\n  };\n\n  const handleChange: MouseEventHandler<HTMLDivElement> = (event) => {\n    const check = event.target as HTMLInputElement;\n\n    if (!check || !check.parentNode || !check.parentNode.parentNode) return;\n    const parentCheckbox = check.parentNode.parentNode as HTMLElement;\n\n    if (\n      lessThan.md &&\n      check.previousElementSibling?.tagName === 'BUTTON' &&\n      parentCheckbox.getAttribute('aria-expanded') === 'false'\n    ) {\n      event.preventDefault();\n      setExpandedAttributes(parentCheckbox.querySelector('button') as HTMLButtonElement, parentCheckbox);\n      return;\n    }\n\n    if (checkboxNodes.current.indexOf(check) === -1) return;\n\n    const children: HTMLInputElement[] = (check.parentNode.parentNode as Document)\n      ? nodeArray('input', check.parentNode.parentNode as Document)\n      : [];\n\n    children.forEach((child) => {\n      return (child.checked = child.disabled ? false : check.checked);\n    });\n\n    setCheckboxesState(check);\n    setValue();\n  };\n\n  const handleExpanded: MouseEventHandler<HTMLButtonElement> = (event) => {\n    const target = event.target as HTMLButtonElement;\n    const parent = target.closest('[data-li]');\n    setExpandedAttributes(target, parent);\n  };\n\n  useEffect(() => {\n    checkboxNodes.current = nodeArray('input') || [];\n  }, []);\n\n  useEffect(() => {\n    if (defaultValue) {\n      checkboxNodes.current.forEach((checkbox) => {\n        if (defaultValue.includes(checkbox.value)) {\n          checkbox.checked = true;\n          setCheckboxesState(checkbox);\n        }\n      });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [defaultValue]);\n\n  return (\n    <div>\n      {title && <span className={styles['checkbox-tree__header']}>{title}</span>}\n      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\n      <div onClick={handleChange} data-ul role=\"tree\" tabIndex={0}>\n        {checkboxTree.map(({ itemName, children }) => (\n          <div\n            key={itemName}\n            className={styles['checkbox-tree__branch']}\n            data-li\n            aria-expanded={lessThan.md ? 'false' : 'true'}\n          >\n            <FormField inline className={styles['checkbox-tree__branch--formfield']}>\n              <Button variant=\"blank\" onClick={handleExpanded}>\n                <Icon\n                  name=\"CheveronRight\"\n                  size={16}\n                  className={clsx(styles['checkbox-tree__branch--icon'], {\n                    [styles['checkbox-tree__branch--icon--expanded']]: !lessThan.md,\n                  })}\n                />\n              </Button>\n              <Checkbox id={itemName} disabled={children.every((checkbox) => checkbox.disabled)} />\n              <Label htmlFor={itemName}>{itemName}</Label>\n            </FormField>\n            <div\n              className={clsx(styles['checkbox-tree__leaves'], {\n                [styles['checkbox-tree__leaves--expanded']]: !lessThan.md,\n              })}\n              data-ul\n            >\n              {children.map(({ itemName, itemValue, disabled }) => (\n                <div key={itemName} className={styles['checkbox-tree__leaf']} data-li>\n                  <FormField inline className={styles['checkbox-tree__branch--formfield']}>\n                    <Checkbox id={itemName} name={itemName} value={itemValue} disabled={disabled} />\n                    <Label htmlFor={itemName}>{itemName}</Label>\n                  </FormField>\n                </div>\n              ))}\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"names":["CheckboxTree","title","checkboxTree","defaultValue","onChange","checkboxNodes","useRef","lessThan","useResponsive","nodeArray","selector","parent","setValue","values","checkbox","setCheckboxesState","check","_b","_a","checkStatus","_c","status","every","some","setExpandedAttributes","trigger","container","children","styles","handleChange","event","parentCheckbox","child","handleExpanded","target","useEffect","itemName","jsxs","FormField","jsx","Button","Icon","clsx","Checkbox","Label","itemValue","disabled"],"mappings":"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"}
+{"version":3,"file":"CheckboxTree.js","sources":["../../../src/components/CheckboxTree/CheckboxTree.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport type { MouseEventHandler } from 'react';\n\nimport styles from './CheckboxTree.module.css';\n\nimport { Button, Checkbox, FormField, Icon, Label } from 'components';\nimport { useResponsive } from 'components/hooks/useResponsive';\n\n// TODO: Currently the checkbox tree shows odd behavior when a disabled checkbox is checked. When deselecting the parent checkbox, the disabled checkbox is deselected, and will never be checked again. We'll leave this for now, until we run into a real world example where this is necessary.\n\ntype CheckboxLeaf = {\n  itemName: string;\n  itemValue: string;\n  disabled?: boolean;\n};\n\ntype CheckboxBranch = {\n  itemName: string;\n  children: CheckboxLeaf[];\n};\n\nexport interface CheckboxTreeProps {\n  /** The title of the component. */\n  title?: string;\n  /** Array of checkbox groups with a label and array of children (itemName, itemValue and disabled boolean). */\n  checkboxTree: CheckboxBranch[];\n  /** Array of selected values. */\n  defaultValue?: string[];\n  /** Returns array of selected values. */\n  onChange?: (value: string[]) => void;\n}\n\n/** Represents a component to render a tree of checkboxes. */\nexport const CheckboxTree = ({ title, checkboxTree, defaultValue, onChange }: CheckboxTreeProps) => {\n  const checkboxNodes = useRef<HTMLInputElement[]>([]);\n  const { lessThan } = useResponsive();\n\n  const nodeArray = (selector: string, parent = document) => [].slice.call(parent.querySelectorAll(selector));\n\n  const setValue = () => {\n    const values = checkboxNodes.current.reduce((values, checkbox) => {\n      if (checkbox.name && checkbox.checked) {\n        values.push(checkbox.value);\n      }\n      return values;\n    }, [] as string[]);\n\n    if (onChange) onChange(values);\n  };\n\n  const setCheckboxesState = (check: HTMLInputElement) => {\n    while (check) {\n      const parent = check.closest('[data-ul]')?.parentNode?.querySelector('input');\n      const siblings: HTMLInputElement[] = nodeArray(\n        'input',\n        parent?.closest('[data-li]')?.querySelector('[data-ul]') as Document | undefined\n      );\n\n      const checkStatus = siblings.reduce((status, check) => {\n        if (!check.disabled) status.push(check.checked);\n        return status;\n      }, [] as boolean[]);\n\n      const every = checkStatus.every(Boolean);\n      const some = checkStatus.some(Boolean);\n\n      if (parent) {\n        parent.checked = every;\n        parent.indeterminate = !every && every !== some;\n      }\n\n      if (!parent || check === parent) {\n        break;\n      }\n\n      check = parent;\n    }\n  };\n\n  const setExpandedAttributes = (trigger: HTMLButtonElement, container: Element | null) => {\n    const children = container?.querySelector('[data-ul]');\n\n    (trigger.childNodes[0] as Element).classList.toggle(styles['checkbox-tree__branch--icon--expanded']);\n    container\n      ?.closest('[data-li]')\n      ?.setAttribute(\n        'aria-expanded',\n        container?.closest('[data-li]')?.getAttribute('aria-expanded') === 'false' ? 'true' : 'false'\n      );\n\n    if (children) {\n      children.classList.toggle(styles['checkbox-tree__leaves--expanded']);\n    }\n  };\n\n  const handleChange: MouseEventHandler<HTMLDivElement> = (event) => {\n    const check = event.target as HTMLInputElement;\n\n    if (!check || !check.parentNode || !check.parentNode.parentNode) return;\n    const parentCheckbox = check.parentNode.parentNode as HTMLElement;\n\n    if (\n      lessThan.md &&\n      check.previousElementSibling?.tagName === 'BUTTON' &&\n      parentCheckbox.getAttribute('aria-expanded') === 'false'\n    ) {\n      event.preventDefault();\n      setExpandedAttributes(parentCheckbox.querySelector('button') as HTMLButtonElement, parentCheckbox);\n      return;\n    }\n\n    if (checkboxNodes.current.indexOf(check) === -1) return;\n\n    const children: HTMLInputElement[] = (check.parentNode.parentNode as Document)\n      ? nodeArray('input', check.parentNode.parentNode as Document)\n      : [];\n\n    children.forEach((child) => {\n      return (child.checked = child.disabled ? false : check.checked);\n    });\n\n    setCheckboxesState(check);\n    setValue();\n  };\n\n  const handleExpanded: MouseEventHandler<HTMLButtonElement> = (event) => {\n    const target = event.target as HTMLButtonElement;\n    const parent = target.closest('[data-li]');\n    setExpandedAttributes(target, parent);\n  };\n\n  useEffect(() => {\n    checkboxNodes.current = nodeArray('input') || [];\n  }, []);\n\n  useEffect(() => {\n    if (defaultValue) {\n      checkboxNodes.current.forEach((checkbox) => {\n        if (defaultValue.includes(checkbox.value)) {\n          checkbox.checked = true;\n          setCheckboxesState(checkbox);\n        }\n      });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [defaultValue]);\n\n  return (\n    <div>\n      {title && <span className={styles['checkbox-tree__header']}>{title}</span>}\n      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\n      <div onClick={handleChange} data-ul role=\"tree\" tabIndex={0}>\n        {checkboxTree.map(({ itemName, children }) => (\n          <div\n            key={itemName}\n            className={styles['checkbox-tree__branch']}\n            data-li\n            aria-expanded={lessThan.md ? 'false' : 'true'}\n          >\n            <FormField inline className={styles['checkbox-tree__branch--formfield']}>\n              <Button variant=\"blank\" onClick={handleExpanded}>\n                <Icon\n                  name=\"CheveronRight\"\n                  size={16}\n                  className={clsx(styles['checkbox-tree__branch--icon'], {\n                    [styles['checkbox-tree__branch--icon--expanded']]: !lessThan.md,\n                  })}\n                />\n              </Button>\n              <Checkbox id={itemName} disabled={children.every((checkbox) => checkbox.disabled)} />\n              <Label htmlFor={itemName}>{itemName}</Label>\n            </FormField>\n            <div\n              className={clsx(styles['checkbox-tree__leaves'], {\n                [styles['checkbox-tree__leaves--expanded']]: !lessThan.md,\n              })}\n              data-ul\n            >\n              {children.map(({ itemName, itemValue, disabled }) => (\n                <div key={itemName} className={styles['checkbox-tree__leaf']} data-li>\n                  <FormField inline className={styles['checkbox-tree__branch--formfield']}>\n                    <Checkbox id={itemName} name={itemName} value={itemValue} disabled={disabled} />\n                    <Label htmlFor={itemName}>{itemName}</Label>\n                  </FormField>\n                </div>\n              ))}\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"names":["CheckboxTree","title","checkboxTree","defaultValue","onChange","checkboxNodes","useRef","lessThan","useResponsive","nodeArray","selector","parent","setValue","values","checkbox","setCheckboxesState","check","_b","_a","checkStatus","_c","status","every","some","setExpandedAttributes","trigger","container","children","styles","handleChange","event","parentCheckbox","child","handleExpanded","target","useEffect","itemName","jsxs","FormField","jsx","Button","Icon","clsx","Checkbox","Label","itemValue","disabled"],"mappings":"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"}

package/dist/components/CheckboxTree/CheckboxTree.stories.js

@@ -64,7 +64,7 @@ r.args = {
   title: "Periode",
   checkboxTree: i,
   // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-  defaultValue: ["3", "5"],
+  defaultValue: ["3", "4"],
   onChange: m()
 };
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxTree.stories.js","sources":["../../../src/components/CheckboxTree/CheckboxTree.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { CheckboxTreeProps } from './CheckboxTree';\n\nimport { CheckboxTree } from './CheckboxTree';\n\nconst MOCK_CHECKBOX_TREE = [\n  {\n    itemName: 'Semester 1',\n    children: [\n      {\n        itemName: '1.1',\n        itemValue: '1',\n        disabled: true,\n      },\n      {\n        itemName: '1.2',\n        itemValue: '2',\n        disabled: false,\n      },\n      {\n        itemName: '1.3',\n        itemValue: '3',\n        disabled: false,\n      },\n    ],\n  },\n  {\n    itemName: 'Semester 2',\n    children: [\n      {\n        itemName: '2.1',\n        itemValue: '4',\n        disabled: false,\n      },\n      {\n        itemName: '2.2',\n        itemValue: '5',\n        disabled: true,\n      },\n      {\n        itemName: '2.3',\n        itemValue: '6',\n        disabled: false,\n      },\n    ],\n  },\n  {\n    itemName: 'Semester 3',\n    children: [\n      {\n        itemName: '3',\n        itemValue: '7',\n        disabled: false,\n      },\n    ],\n  },\n];\n\nconst codeString = '<CheckboxTree  title={} checkboxTree={} defaultValue={} onChange={} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Organisms/CheckboxTree',\n  component: CheckboxTree,\n  parameters: {\n    inspectComponent: CheckboxTree,\n    codeString: codeString,\n  },\n} as Meta<CheckboxTreeProps>;\n\nconst Template: StoryFn<CheckboxTreeProps> = (args) => <CheckboxTree {...args} />;\n\nexport const CheckboxTreeExample = Template.bind({});\nCheckboxTreeExample.args = {\n  title: 'Periode',\n  checkboxTree: MOCK_CHECKBOX_TREE,\n  // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n  defaultValue: ['3', '5'],\n  onChange: fn(),\n};\n"],"names":["MOCK_CHECKBOX_TREE","codeString","CheckboxTree_stories","CheckboxTree","Template","args","jsx","CheckboxTreeExample","fn"],"mappings":";;;AAOA,MAAMA,IAAqB;AAAA,EACzB;AAAA,IACE,UAAU;AAAA,IACV,UAAU;AAAA,MACR;AAAA,QACE,UAAU;AAAA,QACV,WAAW;AAAA,QACX,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,UAAU;AAAA,QACV,WAAW;AAAA,QACX,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,UAAU;AAAA,QACV,WAAW;AAAA,QACX,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,IACV,UAAU;AAAA,MACR;AAAA,QACE,UAAU;AAAA,QACV,WAAW;AAAA,QACX,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,UAAU;AAAA,QACV,WAAW;AAAA,QACX,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,UAAU;AAAA,QACV,WAAW;AAAA,QACX,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,IACV,UAAU;AAAA,MACR;AAAA,QACE,UAAU;AAAA,QACV,WAAW;AAAA,QACX,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,EACF;AACF,GAEMC,IAAa,0EAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EACF;AACF,GAEMG,IAAuC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAc,GAAGE,EAAM,CAAA,GAElEE,IAAsBH,EAAS,KAAK,EAAE;AACnDG,EAAoB,OAAO;AAAA,EACzB,OAAO;AAAA,EACP,cAAcP;AAAA;AAAA,EAEd,cAAc,CAAC,KAAK,GAAG;AAAA,EACvB,UAAUQ,EAAG;AACf;"}
+{"version":3,"file":"CheckboxTree.stories.js","sources":["../../../src/components/CheckboxTree/CheckboxTree.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { CheckboxTreeProps } from './CheckboxTree';\n\nimport { CheckboxTree } from './CheckboxTree';\n\nconst MOCK_CHECKBOX_TREE = [\n  {\n    itemName: 'Semester 1',\n    children: [\n      {\n        itemName: '1.1',\n        itemValue: '1',\n        disabled: true,\n      },\n      {\n        itemName: '1.2',\n        itemValue: '2',\n        disabled: false,\n      },\n      {\n        itemName: '1.3',\n        itemValue: '3',\n        disabled: false,\n      },\n    ],\n  },\n  {\n    itemName: 'Semester 2',\n    children: [\n      {\n        itemName: '2.1',\n        itemValue: '4',\n        disabled: false,\n      },\n      {\n        itemName: '2.2',\n        itemValue: '5',\n        disabled: true,\n      },\n      {\n        itemName: '2.3',\n        itemValue: '6',\n        disabled: false,\n      },\n    ],\n  },\n  {\n    itemName: 'Semester 3',\n    children: [\n      {\n        itemName: '3',\n        itemValue: '7',\n        disabled: false,\n      },\n    ],\n  },\n];\n\nconst codeString = '<CheckboxTree  title={} checkboxTree={} defaultValue={} onChange={} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Organisms/CheckboxTree',\n  component: CheckboxTree,\n  parameters: {\n    inspectComponent: CheckboxTree,\n    codeString: codeString,\n  },\n} as Meta<CheckboxTreeProps>;\n\nconst Template: StoryFn<CheckboxTreeProps> = (args) => <CheckboxTree {...args} />;\n\nexport const CheckboxTreeExample = Template.bind({});\nCheckboxTreeExample.args = {\n  title: 'Periode',\n  checkboxTree: MOCK_CHECKBOX_TREE,\n  // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n  defaultValue: ['3', '4'],\n  onChange: fn(),\n};\n"],"names":["MOCK_CHECKBOX_TREE","codeString","CheckboxTree_stories","CheckboxTree","Template","args","jsx","CheckboxTreeExample","fn"],"mappings":";;;AAOA,MAAMA,IAAqB;AAAA,EACzB;AAAA,IACE,UAAU;AAAA,IACV,UAAU;AAAA,MACR;AAAA,QACE,UAAU;AAAA,QACV,WAAW;AAAA,QACX,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,UAAU;AAAA,QACV,WAAW;AAAA,QACX,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,UAAU;AAAA,QACV,WAAW;AAAA,QACX,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,IACV,UAAU;AAAA,MACR;AAAA,QACE,UAAU;AAAA,QACV,WAAW;AAAA,QACX,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,UAAU;AAAA,QACV,WAAW;AAAA,QACX,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,UAAU;AAAA,QACV,WAAW;AAAA,QACX,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,IACV,UAAU;AAAA,MACR;AAAA,QACE,UAAU;AAAA,QACV,WAAW;AAAA,QACX,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,EACF;AACF,GAEMC,IAAa,0EAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EACF;AACF,GAEMG,IAAuC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAc,GAAGE,EAAM,CAAA,GAElEE,IAAsBH,EAAS,KAAK,EAAE;AACnDG,EAAoB,OAAO;AAAA,EACzB,OAAO;AAAA,EACP,cAAcP;AAAA;AAAA,EAEd,cAAc,CAAC,KAAK,GAAG;AAAA,EACvB,UAAUQ,EAAG;AACf;"}

package/dist/components/Drawer/Drawer.d.ts

@@ -1,9 +1,15 @@
 import { HTMLAttributes, PropsWithChildren, ReactNode } from 'react';
 export interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style' | 'className'> {
+    /** The buttons to render in the drawer. */
     buttons?: ReactNode;
+    /** true if the drawer should be open; otherwise, false. The default is false. */
     isOpen?: boolean;
+    /** The callback method that is invoked when the drawer is closed. */
     onClose: () => void;
+    /** The title of the drawer. */
     title: string;
+    /** The aria-label of the close button. */
     closeButtonAriaValueText?: string;
 }
+/** Represents a Drawer component. */
 export declare function Drawer({ buttons, children, isOpen, onClose, title, closeButtonAriaValueText, ...restProps }: PropsWithChildren<DrawerProps>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import { useDialog } from '@react-aria/dialog';\nimport { FocusScope } from '@react-aria/focus';\nimport { OverlayContainer, useModal, useOverlay, usePreventScroll } from '@react-aria/overlays';\nimport { clsx } from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\n\nimport type { HTMLAttributes, PropsWithChildren, ReactNode } from 'react';\n\nimport styles from './Drawer.module.css';\n\nimport { Backdrop } from 'components/Backdrop/Backdrop';\nimport { OverlayCloseButton } from 'components/OverlayCloseButton';\n\nexport interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style' | 'className'> {\n  buttons?: ReactNode;\n  isOpen?: boolean;\n  onClose: () => void;\n  title: string;\n  closeButtonAriaValueText?: string;\n}\n\nconst closingDelay = 200;\n\nexport function Drawer({\n  buttons,\n  children,\n  isOpen,\n  onClose,\n  title,\n  closeButtonAriaValueText = 'Close',\n  ...restProps\n}: PropsWithChildren<DrawerProps>) {\n  const [containerClassNames, setContainerClassNames] = useState(styles.drawer);\n  // Hide content outside the modal from screen readers.\n  const { modalProps } = useModal({ isDisabled: !isOpen });\n  const contentRef = useRef<HTMLDivElement>(null);\n\n  function onCloseDrawer() {\n    setContainerClassNames(styles.drawer);\n\n    globalThis.setTimeout(() => {\n      onClose();\n    }, closingDelay);\n  }\n\n  // Handle interacting outside the dialog and pressing\n  // the Escape key to close the modal.\n  const { overlayProps, underlayProps } = useOverlay(\n    { isDismissable: true, isKeyboardDismissDisabled: false, isOpen, onClose: onCloseDrawer },\n    contentRef\n  );\n\n  // Get props for the dialog and its title\n  const { dialogProps, titleProps } = useDialog({}, contentRef);\n\n  usePreventScroll({ isDisabled: !isOpen });\n\n  useEffect(() => {\n    // setting class name after render so that element can slide in after it is mounted and slide out\n    // before it is unmounted\n    setContainerClassNames(clsx(styles.drawer, { [styles['drawer--open']]: isOpen }));\n  }, [isOpen]);\n\n  return (\n    <OverlayContainer>\n      <Backdrop {...underlayProps}>\n        <FocusScope contain restoreFocus>\n          <aside\n            {...modalProps}\n            {...overlayProps}\n            {...dialogProps}\n            {...restProps}\n            className={containerClassNames}\n            ref={contentRef}\n          >\n            <header className={styles.drawer__header}>\n              <h1 className={styles.drawer__heading} {...titleProps}>\n                {title}\n              </h1>\n\n              <OverlayCloseButton aria-label={closeButtonAriaValueText} onClick={onCloseDrawer} />\n            </header>\n\n            <div className={styles.drawer__content}>{children}</div>\n\n            {buttons && (\n              <footer className={styles.drawer__footer}>\n                <div className={styles.drawer__buttons}>{buttons}</div>\n              </footer>\n            )}\n          </aside>\n        </FocusScope>\n      </Backdrop>\n    </OverlayContainer>\n  );\n}\n"],"names":["closingDelay","Drawer","buttons","children","isOpen","onClose","title","closeButtonAriaValueText","restProps","containerClassNames","setContainerClassNames","useState","styles","modalProps","useModal","contentRef","useRef","onCloseDrawer","overlayProps","underlayProps","useOverlay","dialogProps","titleProps","useDialog","usePreventScroll","useEffect","clsx","jsx","OverlayContainer","Backdrop","FocusScope","jsxs","OverlayCloseButton"],"mappings":";;;;;;;;;;;;;;;;GAqBMA,IAAe;AAEd,SAASC,EAAO;AAAA,EACrB,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,0BAAAC,IAA2B;AAAA,EAC3B,GAAGC;AACL,GAAmC;AACjC,QAAM,CAACC,GAAqBC,CAAsB,IAAIC,EAASC,EAAO,MAAM,GAEtE,EAAE,YAAAC,MAAeC,EAAS,EAAE,YAAY,CAACV,GAAQ,GACjDW,IAAaC,EAAuB,IAAI;AAE9C,WAASC,IAAgB;AACvB,IAAAP,EAAuBE,EAAO,MAAM,GAEpC,WAAW,WAAW,MAAM;AAClB,MAAAP;OACPL,CAAY;AAAA,EACjB;AAIM,QAAA,EAAE,cAAAkB,GAAc,eAAAC,EAAA,IAAkBC;AAAA,IACtC,EAAE,eAAe,IAAM,2BAA2B,IAAO,QAAAhB,GAAQ,SAASa,EAAc;AAAA,IACxFF;AAAA,EAAA,GAII,EAAE,aAAAM,GAAa,YAAAC,EAAA,IAAeC,EAAU,CAAA,GAAIR,CAAU;AAE5D,SAAAS,EAAiB,EAAE,YAAY,CAACpB,EAAQ,CAAA,GAExCqB,EAAU,MAAM;AAGS,IAAAf,EAAAgB,EAAKd,EAAO,QAAQ,EAAE,CAACA,EAAO,cAAc,CAAC,GAAGR,EAAQ,CAAA,CAAC;AAAA,EAAA,GAC/E,CAACA,CAAM,CAAC,GAGT,gBAAAuB,EAACC,GACC,EAAA,UAAA,gBAAAD,EAACE,GAAU,EAAA,GAAGV,GACZ,UAAA,gBAAAQ,EAACG,GAAW,EAAA,SAAO,IAAC,cAAY,IAC9B,UAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGlB;AAAA,MACH,GAAGK;AAAA,MACH,GAAGG;AAAA,MACH,GAAGb;AAAA,MACJ,WAAWC;AAAA,MACX,KAAKM;AAAA,MAEL,UAAA;AAAA,QAAC,gBAAAgB,EAAA,UAAA,EAAO,WAAWnB,EAAO,gBACxB,UAAA;AAAA,UAAA,gBAAAe,EAAC,QAAG,WAAWf,EAAO,iBAAkB,GAAGU,GACxC,UACHhB,GAAA;AAAA,UAEC,gBAAAqB,EAAAK,GAAA,EAAmB,cAAYzB,GAA0B,SAASU,GAAe;AAAA,QAAA,GACpF;AAAA,QAEC,gBAAAU,EAAA,OAAA,EAAI,WAAWf,EAAO,iBAAkB,UAAAT,GAAS;AAAA,QAEjDD,KACC,gBAAAyB,EAAC,UAAO,EAAA,WAAWf,EAAO,gBACxB,UAAC,gBAAAe,EAAA,OAAA,EAAI,WAAWf,EAAO,iBAAkB,UAAAV,EAAQ,CAAA,GACnD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAGN,GACF,EACF,CAAA;AAEJ;"}
+{"version":3,"file":"Drawer.js","sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import { useDialog } from '@react-aria/dialog';\nimport { FocusScope } from '@react-aria/focus';\nimport { OverlayContainer, useModal, useOverlay, usePreventScroll } from '@react-aria/overlays';\nimport { clsx } from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\n\nimport type { HTMLAttributes, PropsWithChildren, ReactNode } from 'react';\n\nimport styles from './Drawer.module.css';\n\nimport { Backdrop } from 'components/Backdrop/Backdrop';\nimport { OverlayCloseButton } from 'components/OverlayCloseButton';\n\nexport interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style' | 'className'> {\n  /** The buttons to render in the drawer. */\n  buttons?: ReactNode;\n  /** true if the drawer should be open; otherwise, false. The default is false. */\n  isOpen?: boolean;\n  /** The callback method that is invoked when the drawer is closed. */\n  onClose: () => void;\n  /** The title of the drawer. */\n  title: string;\n  /** The aria-label of the close button. */\n  closeButtonAriaValueText?: string;\n}\n\nconst closingDelay = 200;\n\n/** Represents a Drawer component. */\nexport function Drawer({\n  buttons,\n  children,\n  isOpen,\n  onClose,\n  title,\n  closeButtonAriaValueText = 'Close',\n  ...restProps\n}: PropsWithChildren<DrawerProps>) {\n  const [containerClassNames, setContainerClassNames] = useState(styles.drawer);\n  // Hide content outside the modal from screen readers.\n  const { modalProps } = useModal({ isDisabled: !isOpen });\n  const contentRef = useRef<HTMLDivElement>(null);\n\n  function onCloseDrawer() {\n    setContainerClassNames(styles.drawer);\n\n    globalThis.setTimeout(() => {\n      onClose();\n    }, closingDelay);\n  }\n\n  // Handle interacting outside the dialog and pressing\n  // the Escape key to close the modal.\n  const { overlayProps, underlayProps } = useOverlay(\n    { isDismissable: true, isKeyboardDismissDisabled: false, isOpen, onClose: onCloseDrawer },\n    contentRef\n  );\n\n  // Get props for the dialog and its title\n  const { dialogProps, titleProps } = useDialog({}, contentRef);\n\n  usePreventScroll({ isDisabled: !isOpen });\n\n  useEffect(() => {\n    // setting class name after render so that element can slide in after it is mounted and slide out\n    // before it is unmounted\n    setContainerClassNames(clsx(styles.drawer, { [styles['drawer--open']]: isOpen }));\n  }, [isOpen]);\n\n  return (\n    <OverlayContainer>\n      <Backdrop {...underlayProps}>\n        <FocusScope contain restoreFocus>\n          <aside\n            {...modalProps}\n            {...overlayProps}\n            {...dialogProps}\n            {...restProps}\n            className={containerClassNames}\n            ref={contentRef}\n          >\n            <header className={styles.drawer__header}>\n              <h1 className={styles.drawer__heading} {...titleProps}>\n                {title}\n              </h1>\n\n              <OverlayCloseButton aria-label={closeButtonAriaValueText} onClick={onCloseDrawer} />\n            </header>\n\n            <div className={styles.drawer__content}>{children}</div>\n\n            {buttons && (\n              <footer className={styles.drawer__footer}>\n                <div className={styles.drawer__buttons}>{buttons}</div>\n              </footer>\n            )}\n          </aside>\n        </FocusScope>\n      </Backdrop>\n    </OverlayContainer>\n  );\n}\n"],"names":["closingDelay","Drawer","buttons","children","isOpen","onClose","title","closeButtonAriaValueText","restProps","containerClassNames","setContainerClassNames","useState","styles","modalProps","useModal","contentRef","useRef","onCloseDrawer","overlayProps","underlayProps","useOverlay","dialogProps","titleProps","useDialog","usePreventScroll","useEffect","clsx","jsx","OverlayContainer","Backdrop","FocusScope","jsxs","OverlayCloseButton"],"mappings":";;;;;;;;;;;;;;;;GA0BMA,IAAe;AAGd,SAASC,EAAO;AAAA,EACrB,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,0BAAAC,IAA2B;AAAA,EAC3B,GAAGC;AACL,GAAmC;AACjC,QAAM,CAACC,GAAqBC,CAAsB,IAAIC,EAASC,EAAO,MAAM,GAEtE,EAAE,YAAAC,MAAeC,EAAS,EAAE,YAAY,CAACV,GAAQ,GACjDW,IAAaC,EAAuB,IAAI;AAE9C,WAASC,IAAgB;AACvB,IAAAP,EAAuBE,EAAO,MAAM,GAEpC,WAAW,WAAW,MAAM;AAClB,MAAAP;OACPL,CAAY;AAAA,EACjB;AAIM,QAAA,EAAE,cAAAkB,GAAc,eAAAC,EAAA,IAAkBC;AAAA,IACtC,EAAE,eAAe,IAAM,2BAA2B,IAAO,QAAAhB,GAAQ,SAASa,EAAc;AAAA,IACxFF;AAAA,EAAA,GAII,EAAE,aAAAM,GAAa,YAAAC,EAAA,IAAeC,EAAU,CAAA,GAAIR,CAAU;AAE5D,SAAAS,EAAiB,EAAE,YAAY,CAACpB,EAAQ,CAAA,GAExCqB,EAAU,MAAM;AAGS,IAAAf,EAAAgB,EAAKd,EAAO,QAAQ,EAAE,CAACA,EAAO,cAAc,CAAC,GAAGR,EAAQ,CAAA,CAAC;AAAA,EAAA,GAC/E,CAACA,CAAM,CAAC,GAGT,gBAAAuB,EAACC,GACC,EAAA,UAAA,gBAAAD,EAACE,GAAU,EAAA,GAAGV,GACZ,UAAA,gBAAAQ,EAACG,GAAW,EAAA,SAAO,IAAC,cAAY,IAC9B,UAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGlB;AAAA,MACH,GAAGK;AAAA,MACH,GAAGG;AAAA,MACH,GAAGb;AAAA,MACJ,WAAWC;AAAA,MACX,KAAKM;AAAA,MAEL,UAAA;AAAA,QAAC,gBAAAgB,EAAA,UAAA,EAAO,WAAWnB,EAAO,gBACxB,UAAA;AAAA,UAAA,gBAAAe,EAAC,QAAG,WAAWf,EAAO,iBAAkB,GAAGU,GACxC,UACHhB,GAAA;AAAA,UAEC,gBAAAqB,EAAAK,GAAA,EAAmB,cAAYzB,GAA0B,SAASU,GAAe;AAAA,QAAA,GACpF;AAAA,QAEC,gBAAAU,EAAA,OAAA,EAAI,WAAWf,EAAO,iBAAkB,UAAAT,GAAS;AAAA,QAEjDD,KACC,gBAAAyB,EAAC,UAAO,EAAA,WAAWf,EAAO,gBACxB,UAAC,gBAAAe,EAAA,OAAA,EAAI,WAAWf,EAAO,iBAAkB,UAAAV,EAAQ,CAAA,GACnD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAGN,GACF,EACF,CAAA;AAEJ;"}

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

@@ -1,15 +1,15 @@
-import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
 import { OverlayProvider as p } from "@react-aria/overlays";
 import { fn as m } from "../../index-MQ0yPLdl.js";
-import { useState as u } from "react";
-import { Drawer as a } from "./Drawer.js";
-import { Button as r } from "../Button/Button.js";
-import { ButtonGroup as c } from "../ButtonGroup/ButtonGroup.js";
+import { useState as c } from "react";
+import { Drawer as r } from "./Drawer.js";
+import { Button as n } from "../Button/Button.js";
+import { ButtonGroup as u } from "../ButtonGroup/ButtonGroup.js";
 const d = `
   <Drawer isOpen={isOpen} onClose={onCloseFunction} title={title} buttons={buttons}> {children} </Drawer>
-`, C = {
+`, O = {
   title: "Molecules/Drawer",
-  component: a,
+  component: r,
   argTypes: {
     isOpen: {
       table: {
@@ -28,14 +28,15 @@ const d = `
     }
   },
   parameters: {
+    inspectComponent: r,
     codeString: d
   }
 }, s = (l) => {
-  const [e, o] = u(!1);
-  return /* @__PURE__ */ n(p, { children: [
-    /* @__PURE__ */ t(r, { onClick: () => o(!e), variant: "primary", children: "Open drawer" }),
+  const [e, o] = c(!1);
+  return /* @__PURE__ */ a(p, { children: [
+    /* @__PURE__ */ t(n, { onClick: () => o(!e), variant: "primary", children: "Open drawer" }),
     e && /* @__PURE__ */ t(
-      a,
+      r,
       {
         ...l,
         isOpen: e,
@@ -54,14 +55,14 @@ b.args = {
 const f = s.bind({});
 f.args = {
   ...i,
-  buttons: /* @__PURE__ */ n(c, { children: [
-    /* @__PURE__ */ t(r, { variant: "primary", children: "Primary Example Button" }),
-    /* @__PURE__ */ t(r, { variant: "secondary", children: "Secondary Example Button" })
+  buttons: /* @__PURE__ */ a(u, { children: [
+    /* @__PURE__ */ t(n, { variant: "primary", children: "Primary Example Button" }),
+    /* @__PURE__ */ t(n, { variant: "secondary", children: "Secondary Example Button" })
   ] })
 };
 export {
   b as DrawerExample,
   f as WithButtons,
-  C as default
+  O as default
 };
 //# sourceMappingURL=Drawer.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.stories.js","sources":["../../../src/components/Drawer/Drawer.stories.tsx"],"sourcesContent":["import { OverlayProvider } from '@react-aria/overlays';\nimport { fn } from '@storybook/test';\nimport { useState } from 'react';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { DrawerProps } from './Drawer';\n\nimport { Drawer } from './Drawer';\n\nimport { Button } from 'components/Button';\nimport { ButtonGroup } from 'components/ButtonGroup';\n\nconst codeString = `\n  <Drawer isOpen={isOpen} onClose={onCloseFunction} title={title} buttons={buttons}> {children} </Drawer>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Molecules/Drawer',\n  component: Drawer,\n  argTypes: {\n    isOpen: {\n      table: {\n        disable: true,\n      },\n    },\n    buttons: {\n      table: {\n        disable: true,\n      },\n    },\n    closeButtonAriaValueText: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    codeString: codeString,\n  },\n} as Meta<DrawerProps>;\n\nconst Template: StoryFn<DrawerProps> = (args) => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <OverlayProvider>\n      <Button onClick={() => setIsOpen(!isOpen)} variant=\"primary\">\n        Open drawer\n      </Button>\n      {isOpen && (\n        <Drawer\n          {...args}\n          isOpen={isOpen}\n          onClose={() => {\n            fn()();\n            return setIsOpen(!isOpen);\n          }}\n        >\n          Example Drawer Content\n        </Drawer>\n      )}\n    </OverlayProvider>\n  );\n};\n\nconst defaultArgs: Partial<DrawerProps> = {\n  title: 'Example Title',\n  closeButtonAriaValueText: 'Close',\n};\n\nexport const DrawerExample = Template.bind({});\nDrawerExample.args = {\n  ...defaultArgs,\n};\n\nexport const WithButtons = Template.bind({});\nWithButtons.args = {\n  ...defaultArgs,\n  buttons: (\n    <ButtonGroup>\n      <Button variant=\"primary\">Primary Example Button</Button>\n      <Button variant=\"secondary\">Secondary Example Button</Button>\n    </ButtonGroup>\n  ),\n};\n"],"names":["codeString","Drawer_stories","Drawer","Template","args","isOpen","setIsOpen","useState","OverlayProvider","jsx","Button","fn","defaultArgs","DrawerExample","WithButtons","ButtonGroup"],"mappings":";;;;;;;AAYA,MAAMA,IAAa;AAAA;AAAA,GAKJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,0BAA0B;AAAA,MACxB,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,YAAAF;AAAA,EACF;AACF,GAEMG,IAAiC,CAACC,MAAS;AAC/C,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAE1C,2BACGC,GACC,EAAA,UAAA;AAAA,IAAC,gBAAAC,EAAAC,GAAA,EAAO,SAAS,MAAMJ,EAAU,CAACD,CAAM,GAAG,SAAQ,WAAU,UAE7D,cAAA,CAAA;AAAA,IACCA,KACC,gBAAAI;AAAA,MAACP;AAAA,MAAA;AAAA,QACE,GAAGE;AAAA,QACJ,QAAAC;AAAA,QACA,SAAS,OACPM,EAAK,EAAA,GACEL,EAAU,CAACD,CAAM;AAAA,QAE3B,UAAA;AAAA,MAAA;AAAA,IAED;AAAA,EAEJ,EAAA,CAAA;AAEJ,GAEMO,IAAoC;AAAA,EACxC,OAAO;AAAA,EACP,0BAA0B;AAC5B,GAEaC,IAAgBV,EAAS,KAAK,EAAE;AAC7CU,EAAc,OAAO;AAAA,EACnB,GAAGD;AACL;AAEO,MAAME,IAAcX,EAAS,KAAK,EAAE;AAC3CW,EAAY,OAAO;AAAA,EACjB,GAAGF;AAAA,EACH,2BACGG,GACC,EAAA,UAAA;AAAA,IAAC,gBAAAN,EAAAC,GAAA,EAAO,SAAQ,WAAU,UAAsB,0BAAA;AAAA,IAC/C,gBAAAD,EAAAC,GAAA,EAAO,SAAQ,aAAY,UAAwB,4BAAA;AAAA,EAAA,GACtD;AAEJ;"}
+{"version":3,"file":"Drawer.stories.js","sources":["../../../src/components/Drawer/Drawer.stories.tsx"],"sourcesContent":["import { OverlayProvider } from '@react-aria/overlays';\nimport { fn } from '@storybook/test';\nimport { useState } from 'react';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { DrawerProps } from './Drawer';\n\nimport { Drawer } from './Drawer';\n\nimport { Button } from 'components/Button';\nimport { ButtonGroup } from 'components/ButtonGroup';\n\nconst codeString = `\n  <Drawer isOpen={isOpen} onClose={onCloseFunction} title={title} buttons={buttons}> {children} </Drawer>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Molecules/Drawer',\n  component: Drawer,\n  argTypes: {\n    isOpen: {\n      table: {\n        disable: true,\n      },\n    },\n    buttons: {\n      table: {\n        disable: true,\n      },\n    },\n    closeButtonAriaValueText: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    inspectComponent: Drawer,\n    codeString: codeString,\n  },\n} as Meta<DrawerProps>;\n\nconst Template: StoryFn<DrawerProps> = (args) => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <OverlayProvider>\n      <Button onClick={() => setIsOpen(!isOpen)} variant=\"primary\">\n        Open drawer\n      </Button>\n      {isOpen && (\n        <Drawer\n          {...args}\n          isOpen={isOpen}\n          onClose={() => {\n            fn()();\n            return setIsOpen(!isOpen);\n          }}\n        >\n          Example Drawer Content\n        </Drawer>\n      )}\n    </OverlayProvider>\n  );\n};\n\nconst defaultArgs: Partial<DrawerProps> = {\n  title: 'Example Title',\n  closeButtonAriaValueText: 'Close',\n};\n\nexport const DrawerExample = Template.bind({});\nDrawerExample.args = {\n  ...defaultArgs,\n};\n\nexport const WithButtons = Template.bind({});\nWithButtons.args = {\n  ...defaultArgs,\n  buttons: (\n    <ButtonGroup>\n      <Button variant=\"primary\">Primary Example Button</Button>\n      <Button variant=\"secondary\">Secondary Example Button</Button>\n    </ButtonGroup>\n  ),\n};\n"],"names":["codeString","Drawer_stories","Drawer","Template","args","isOpen","setIsOpen","useState","OverlayProvider","jsx","Button","fn","defaultArgs","DrawerExample","WithButtons","ButtonGroup"],"mappings":";;;;;;;AAYA,MAAMA,IAAa;AAAA;AAAA,GAKJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,0BAA0B;AAAA,MACxB,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EACF;AACF,GAEMG,IAAiC,CAACC,MAAS;AAC/C,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAE1C,2BACGC,GACC,EAAA,UAAA;AAAA,IAAC,gBAAAC,EAAAC,GAAA,EAAO,SAAS,MAAMJ,EAAU,CAACD,CAAM,GAAG,SAAQ,WAAU,UAE7D,cAAA,CAAA;AAAA,IACCA,KACC,gBAAAI;AAAA,MAACP;AAAA,MAAA;AAAA,QACE,GAAGE;AAAA,QACJ,QAAAC;AAAA,QACA,SAAS,OACPM,EAAK,EAAA,GACEL,EAAU,CAACD,CAAM;AAAA,QAE3B,UAAA;AAAA,MAAA;AAAA,IAED;AAAA,EAEJ,EAAA,CAAA;AAEJ,GAEMO,IAAoC;AAAA,EACxC,OAAO;AAAA,EACP,0BAA0B;AAC5B,GAEaC,IAAgBV,EAAS,KAAK,EAAE;AAC7CU,EAAc,OAAO;AAAA,EACnB,GAAGD;AACL;AAEO,MAAME,IAAcX,EAAS,KAAK,EAAE;AAC3CW,EAAY,OAAO;AAAA,EACjB,GAAGF;AAAA,EACH,2BACGG,GACC,EAAA,UAAA;AAAA,IAAC,gBAAAN,EAAAC,GAAA,EAAO,SAAQ,WAAU,UAAsB,0BAAA;AAAA,IAC/C,gBAAAD,EAAAC,GAAA,EAAO,SAAQ,aAAY,UAAwB,4BAAA;AAAA,EAAA,GACtD;AAEJ;"}

package/dist/components/EmptyStateDataDisplay/EmptyStateDataDisplay.d.ts

@@ -1,5 +1,8 @@
 export interface EmptyStateDataDisplayProps {
+    /** The main text to display. */
     label: string;
+    /** The sub-text to display. */
     paragraph: string;
 }
+/** Represents a component to indicate an empty state. */
 export declare function EmptyStateDataDisplay({ label, paragraph }: EmptyStateDataDisplayProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/EmptyStateDataDisplay/EmptyStateDataDisplay.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyStateDataDisplay.js","sources":["../../../src/components/EmptyStateDataDisplay/EmptyStateDataDisplay.tsx"],"sourcesContent":["import styles from './EmptyStateDataDisplay.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface EmptyStateDataDisplayProps {\n  label: string;\n  paragraph: string;\n}\n\nexport function EmptyStateDataDisplay({ label, paragraph }: EmptyStateDataDisplayProps) {\n  return (\n    <div className={styles['empty-state-data-display_wrapper']}>\n      <div className={styles['empty-state-data-display_icon-frame']}>\n        <Icon name=\"CubeTransparent\" />\n      </div>\n      <div className={styles['empty-state-data-display_text-content']}>\n        <label className={styles['empty-state-data-display_label']}>{label}</label>\n        <p className={styles['empty-state-data-display_paragraph']}>{paragraph}</p>\n      </div>\n    </div>\n  );\n}\n"],"names":["EmptyStateDataDisplay","label","paragraph","jsxs","styles","jsx","Icon"],"mappings":";;;;;;;;;AASO,SAASA,EAAsB,EAAE,OAAAC,GAAO,WAAAC,KAAyC;AACtF,SACG,gBAAAC,EAAA,OAAA,EAAI,WAAWC,EAAO,kCAAkC,GACvD,UAAA;AAAA,IAAC,gBAAAC,EAAA,OAAA,EAAI,WAAWD,EAAO,qCAAqC,GAC1D,UAAC,gBAAAC,EAAAC,GAAA,EAAK,MAAK,kBAAA,CAAkB,EAC/B,CAAA;AAAA,IACC,gBAAAH,EAAA,OAAA,EAAI,WAAWC,EAAO,uCAAuC,GAC5D,UAAA;AAAA,MAAA,gBAAAC,EAAC,SAAM,EAAA,WAAWD,EAAO,gCAAgC,GAAI,UAAMH,GAAA;AAAA,wBAClE,KAAE,EAAA,WAAWG,EAAO,oCAAoC,GAAI,UAAUF,GAAA;AAAA,IAAA,GACzE;AAAA,EACF,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"EmptyStateDataDisplay.js","sources":["../../../src/components/EmptyStateDataDisplay/EmptyStateDataDisplay.tsx"],"sourcesContent":["import styles from './EmptyStateDataDisplay.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface EmptyStateDataDisplayProps {\n  /** The main text to display. */\n  label: string;\n  /** The sub-text to display. */\n  paragraph: string;\n}\n\n/** Represents a component to indicate an empty state. */\nexport function EmptyStateDataDisplay({ label, paragraph }: EmptyStateDataDisplayProps) {\n  return (\n    <div className={styles['empty-state-data-display_wrapper']}>\n      <div className={styles['empty-state-data-display_icon-frame']}>\n        <Icon name=\"CubeTransparent\" />\n      </div>\n      <div className={styles['empty-state-data-display_text-content']}>\n        <label className={styles['empty-state-data-display_label']}>{label}</label>\n        <p className={styles['empty-state-data-display_paragraph']}>{paragraph}</p>\n      </div>\n    </div>\n  );\n}\n"],"names":["EmptyStateDataDisplay","label","paragraph","jsxs","styles","jsx","Icon"],"mappings":";;;;;;;;;AAYO,SAASA,EAAsB,EAAE,OAAAC,GAAO,WAAAC,KAAyC;AACtF,SACG,gBAAAC,EAAA,OAAA,EAAI,WAAWC,EAAO,kCAAkC,GACvD,UAAA;AAAA,IAAC,gBAAAC,EAAA,OAAA,EAAI,WAAWD,EAAO,qCAAqC,GAC1D,UAAC,gBAAAC,EAAAC,GAAA,EAAK,MAAK,kBAAA,CAAkB,EAC/B,CAAA;AAAA,IACC,gBAAAH,EAAA,OAAA,EAAI,WAAWC,EAAO,uCAAuC,GAC5D,UAAA;AAAA,MAAA,gBAAAC,EAAC,SAAM,EAAA,WAAWD,EAAO,gCAAgC,GAAI,UAAMH,GAAA;AAAA,wBAClE,KAAE,EAAA,WAAWG,EAAO,oCAAoC,GAAI,UAAUF,GAAA;AAAA,IAAA,GACzE;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/components/EmptyStateDataDisplay/EmptyStateDataDisplay.stories.js

@@ -1,9 +1,10 @@
 import { jsx as p } from "react/jsx-runtime";
 import { EmptyStateDataDisplay as a } from "./EmptyStateDataDisplay.js";
-const e = "<EmptyStateDataDisplay label={label} paragraph={paragraph} />", m = {
+const e = "<EmptyStateDataDisplay label={label} paragraph={paragraph} />", o = {
   title: "Molecules/EmptyStateDataDisplay",
   component: a,
   parameters: {
+    inspectComponent: a,
     codeString: e
   }
 }, s = (t) => /* @__PURE__ */ p(a, { ...t }), l = s.bind({});
@@ -13,6 +14,6 @@ l.args = {
 };
 export {
   l as EmptyStateDataDisplayExample,
-  m as default
+  o as default
 };
 //# sourceMappingURL=EmptyStateDataDisplay.stories.js.map