@uva-glass/component-library 1.48.0 → 1.49.0

package/dist/components/CheckboxTree/CheckboxTree.js

@@ -5,41 +5,41 @@ 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 o = {
-  "checkbox-tree__header": "_checkbox-tree__header_12b1f_1",
-  "checkbox-tree__branch": "_checkbox-tree__branch_12b1f_8",
-  "checkbox-tree__branch--icon": "_checkbox-tree__branch--icon_12b1f_17",
-  "checkbox-tree__branch--icon--expanded": "_checkbox-tree__branch--icon--expanded_12b1f_23",
-  "checkbox-tree__branch--formfield": "_checkbox-tree__branch--formfield_12b1f_28",
-  "checkbox-tree__leaves": "_checkbox-tree__leaves_12b1f_35",
-  "checkbox-tree__leaves--expanded": "_checkbox-tree__leaves--expanded_12b1f_44",
-  "checkbox-tree__leaf": "_checkbox-tree__leaf_12b1f_48"
-}, ce = ({ title: p, checkboxTree: A, defaultValue: i, onChange: u }) => {
+  "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), []);
-    u && u(r);
-  }, f = (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"), x = _(
+      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), []), b = x.every(Boolean), F = x.some(Boolean);
+      ).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;
@@ -61,7 +61,7 @@ import '../../assets/CheckboxTree.css';const o = {
       return;
     }
     if (s.current.indexOf(e) === -1) return;
-    (e.parentNode.parentNode ? _("input", e.parentNode.parentNode) : []).forEach((h) => h.checked = h.disabled ? !1 : e.checked), f(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]");
     m(e, t);
@@ -70,7 +70,7 @@ import '../../assets/CheckboxTree.css';const o = {
     s.current = _("input") || [];
   }, []), N(() => {
     i && s.current.forEach((r) => {
-      i.includes(r.value) && (r.checked = !0, f(r));
+      i.includes(r.value) && (r.checked = !0, u(r));
     });
   }, [i]), /* @__PURE__ */ l("div", { children: [
     p && /* @__PURE__ */ a("span", { className: o["checkbox-tree__header"], children: p }),
@@ -81,7 +81,7 @@ import '../../assets/CheckboxTree.css';const o = {
         "data-li": !0,
         "aria-expanded": n.md ? "false" : "true",
         children: [
-          /* @__PURE__ */ l(S, { inline: !0, className: o["checkbox-tree__branch--formfield"], children: [
+          /* @__PURE__ */ l(C, { inline: !0, className: o["checkbox-tree__branch--formfield"], children: [
             /* @__PURE__ */ a(R, { variant: "blank", onClick: B, children: /* @__PURE__ */ a(
               L,
               {
@@ -93,7 +93,7 @@ import '../../assets/CheckboxTree.css';const o = {
               }
             ) }),
             /* @__PURE__ */ a(y, { id: r, disabled: e.every((t) => t.disabled) }),
-            /* @__PURE__ */ a(C, { htmlFor: r, children: r })
+            /* @__PURE__ */ a(S, { htmlFor: r, children: r })
           ] }),
           /* @__PURE__ */ a(
             "div",
@@ -102,9 +102,9 @@ import '../../assets/CheckboxTree.css';const o = {
                 [o["checkbox-tree__leaves--expanded"]]: !n.md
               }),
               "data-ul": !0,
-              children: e.map(({ itemName: t, itemValue: d, disabled: c }) => /* @__PURE__ */ a("div", { className: o["checkbox-tree__leaf"], "data-li": !0, children: /* @__PURE__ */ l(S, { inline: !0, className: o["checkbox-tree__branch--formfield"], children: [
+              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(C, { htmlFor: t, children: t })
+                /* @__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 { Checkbox, Label, FormField, Icon, Button } 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

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

@@ -1 +1 @@
-{"version":3,"file":"EmptyStateDataDisplay.stories.js","sources":["../../../src/components/EmptyStateDataDisplay/EmptyStateDataDisplay.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { EmptyStateDataDisplayProps } from './EmptyStateDataDisplay';\n\nimport { EmptyStateDataDisplay } from './EmptyStateDataDisplay';\n\nconst codeString = '<EmptyStateDataDisplay label={label} paragraph={paragraph} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Molecules/EmptyStateDataDisplay',\n  component: EmptyStateDataDisplay,\n  parameters: {\n    codeString: codeString,\n  },\n} as Meta<EmptyStateDataDisplayProps>;\n\nconst Template: StoryFn<EmptyStateDataDisplayProps> = (args) => <EmptyStateDataDisplay {...args} />;\n\nexport const EmptyStateDataDisplayExample = Template.bind({});\nEmptyStateDataDisplayExample.args = {\n  label: 'This is an example info empty state data display label',\n  paragraph: 'This is an example info empty state data display paragraph',\n};\n"],"names":["codeString","EmptyStateDataDisplay_stories","EmptyStateDataDisplay","Template","args","jsx","EmptyStateDataDisplayExample"],"mappings":";;AAKA,MAAMA,IAAa,iEAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,YAAAF;AAAA,EACF;AACF,GAEMG,IAAgD,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAuB,GAAGE,EAAM,CAAA,GAEpFE,IAA+BH,EAAS,KAAK,EAAE;AAC5DG,EAA6B,OAAO;AAAA,EAClC,OAAO;AAAA,EACP,WAAW;AACb;"}
+{"version":3,"file":"EmptyStateDataDisplay.stories.js","sources":["../../../src/components/EmptyStateDataDisplay/EmptyStateDataDisplay.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { EmptyStateDataDisplayProps } from './EmptyStateDataDisplay';\n\nimport { EmptyStateDataDisplay } from './EmptyStateDataDisplay';\n\nconst codeString = '<EmptyStateDataDisplay label={label} paragraph={paragraph} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Molecules/EmptyStateDataDisplay',\n  component: EmptyStateDataDisplay,\n  parameters: {\n    inspectComponent: EmptyStateDataDisplay,\n    codeString: codeString,\n  },\n} as Meta<EmptyStateDataDisplayProps>;\n\nconst Template: StoryFn<EmptyStateDataDisplayProps> = (args) => <EmptyStateDataDisplay {...args} />;\n\nexport const EmptyStateDataDisplayExample = Template.bind({});\nEmptyStateDataDisplayExample.args = {\n  label: 'This is an example info empty state data display label',\n  paragraph: 'This is an example info empty state data display paragraph',\n};\n"],"names":["codeString","EmptyStateDataDisplay_stories","EmptyStateDataDisplay","Template","args","jsx","EmptyStateDataDisplayExample"],"mappings":";;AAKA,MAAMA,IAAa,iEAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EACF;AACF,GAEMG,IAAgD,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAuB,GAAGE,EAAM,CAAA,GAEpFE,IAA+BH,EAAS,KAAK,EAAE;AAC5DG,EAA6B,OAAO;AAAA,EAClC,OAAO;AAAA,EACP,WAAW;AACb;"}

package/dist/components/FeedbackBox/FeedbackBox.d.ts

@@ -1,8 +1,12 @@
 type FeedbackLevel = 'success' | 'warning' | 'error';
 export interface FeedbackBoxProps {
+    /** The id of the element. */
     id?: string;
+    /** The feedback level, indicates what icon is used. */
     level: FeedbackLevel;
+    /** The feedback value. */
     feedback: string;
 }
+/** Represents a component to show feedback. */
 export declare const FeedbackBox: ({ id, level, feedback }: FeedbackBoxProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/FeedbackBox/FeedbackBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"FeedbackBox.js","sources":["../../../src/components/FeedbackBox/FeedbackBox.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { IconProps } from 'components/Icon';\n\nimport styles from './FeedbackBox.module.css';\n\nimport { Icon } from 'components/Icon';\n\ntype FeedbackLevel = 'success' | 'warning' | 'error';\n\nconst LEVEL_ICON_MAP: Record<FeedbackLevel, IconProps['name']> = {\n  success: 'CheckCircle',\n  warning: 'ExclamationTriangleMini',\n  error: 'ExclamationCircle',\n};\n\nexport interface FeedbackBoxProps {\n  id?: string;\n  level: FeedbackLevel;\n  feedback: string;\n}\n\nexport const FeedbackBox = ({ id, level, feedback }: FeedbackBoxProps) => (\n  <div\n    className={clsx(styles['feedback-box'], {\n      [styles['feedback-box__success']]: level === 'success',\n      [styles['feedback-box__warning']]: level === 'warning',\n      [styles['feedback-box__error']]: level === 'error',\n    })}\n    id={id}\n  >\n    <Icon name={LEVEL_ICON_MAP[level]} size={16} />\n    {feedback}\n  </div>\n);\n"],"names":["LEVEL_ICON_MAP","FeedbackBox","id","level","feedback","jsxs","clsx","styles","jsx","Icon"],"mappings":";;;;;;;;GAUMA,IAA2D;AAAA,EAC/D,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACT,GAQaC,IAAc,CAAC,EAAE,IAAAC,GAAI,OAAAC,GAAO,UAAAC,EACvC,MAAA,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAKC,EAAO,cAAc,GAAG;AAAA,MACtC,CAACA,EAAO,uBAAuB,CAAC,GAAGJ,MAAU;AAAA,MAC7C,CAACI,EAAO,uBAAuB,CAAC,GAAGJ,MAAU;AAAA,MAC7C,CAACI,EAAO,qBAAqB,CAAC,GAAGJ,MAAU;AAAA,IAAA,CAC5C;AAAA,IACD,IAAAD;AAAA,IAEA,UAAA;AAAA,MAAA,gBAAAM,EAACC,KAAK,MAAMT,EAAeG,CAAK,GAAG,MAAM,IAAI;AAAA,MAC5CC;AAAA,IAAA;AAAA,EAAA;AACH;"}
+{"version":3,"file":"FeedbackBox.js","sources":["../../../src/components/FeedbackBox/FeedbackBox.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { IconProps } from 'components/Icon';\n\nimport styles from './FeedbackBox.module.css';\n\nimport { Icon } from 'components/Icon';\n\ntype FeedbackLevel = 'success' | 'warning' | 'error';\n\nconst LEVEL_ICON_MAP: Record<FeedbackLevel, IconProps['name']> = {\n  success: 'CheckCircle',\n  warning: 'ExclamationTriangleMini',\n  error: 'ExclamationCircle',\n};\n\nexport interface FeedbackBoxProps {\n  /** The id of the element. */\n  id?: string;\n  /** The feedback level, indicates what icon is used. */\n  level: FeedbackLevel;\n  /** The feedback value. */\n  feedback: string;\n}\n\n/** Represents a component to show feedback. */\nexport const FeedbackBox = ({ id, level, feedback }: FeedbackBoxProps) => (\n  <div\n    className={clsx(styles['feedback-box'], {\n      [styles['feedback-box__success']]: level === 'success',\n      [styles['feedback-box__warning']]: level === 'warning',\n      [styles['feedback-box__error']]: level === 'error',\n    })}\n    id={id}\n  >\n    <Icon name={LEVEL_ICON_MAP[level]} size={16} />\n    {feedback}\n  </div>\n);\n"],"names":["LEVEL_ICON_MAP","FeedbackBox","id","level","feedback","jsxs","clsx","styles","jsx","Icon"],"mappings":";;;;;;;;GAUMA,IAA2D;AAAA,EAC/D,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACT,GAYaC,IAAc,CAAC,EAAE,IAAAC,GAAI,OAAAC,GAAO,UAAAC,EACvC,MAAA,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAKC,EAAO,cAAc,GAAG;AAAA,MACtC,CAACA,EAAO,uBAAuB,CAAC,GAAGJ,MAAU;AAAA,MAC7C,CAACI,EAAO,uBAAuB,CAAC,GAAGJ,MAAU;AAAA,MAC7C,CAACI,EAAO,qBAAqB,CAAC,GAAGJ,MAAU;AAAA,IAAA,CAC5C;AAAA,IACD,IAAAD;AAAA,IAEA,UAAA;AAAA,MAAA,gBAAAM,EAACC,KAAK,MAAMT,EAAeG,CAAK,GAAG,MAAM,IAAI;AAAA,MAC5CC;AAAA,IAAA;AAAA,EAAA;AACH;"}

package/dist/components/FeedbackBox/FeedbackBox.stories.js

@@ -1,20 +1,21 @@
-import { jsx as e } from "react/jsx-runtime";
-import { FeedbackBox as o } from "./FeedbackBox.js";
+import { jsx as o } from "react/jsx-runtime";
+import { FeedbackBox as e } from "./FeedbackBox.js";
 import { Container as c } from "../../storyComponents/Container/Container.js";
-const t = "<FeedbackBox id={id} level={level} feedback={feedback} />", b = {
+const a = "<FeedbackBox id={id} level={level} feedback={feedback} />", i = {
   title: "Molecules/FeedbackBox",
-  component: o,
+  component: e,
   parameters: {
-    codeString: t
+    inspectComponent: e,
+    codeString: a
   }
-}, d = (a) => /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(o, { ...a }) }), l = d.bind({});
-l.args = {
+}, d = (t) => /* @__PURE__ */ o(c, { children: /* @__PURE__ */ o(e, { ...t }) }), s = d.bind({});
+s.args = {
   id: "gba0d2d4",
   level: "success",
   feedback: "Example FeedbackBox text"
 };
 export {
-  l as FeedbackBoxExample,
-  b as default
+  s as FeedbackBoxExample,
+  i as default
 };
 //# sourceMappingURL=FeedbackBox.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FeedbackBox.stories.js","sources":["../../../src/components/FeedbackBox/FeedbackBox.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { FeedbackBoxProps } from './FeedbackBox';\n\nimport { FeedbackBox } from './FeedbackBox';\n\nimport { Container } from 'storyComponents/Container';\n\nconst codeString = '<FeedbackBox id={id} level={level} feedback={feedback} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Molecules/FeedbackBox',\n  component: FeedbackBox,\n  parameters: {\n    codeString,\n  },\n} as Meta<FeedbackBoxProps>;\n\nconst Template: StoryFn<FeedbackBoxProps> = (args) => (\n  <Container>\n    <FeedbackBox {...args} />\n  </Container>\n);\n\nexport const FeedbackBoxExample = Template.bind({});\nFeedbackBoxExample.args = {\n  id: 'gba0d2d4',\n  level: 'success',\n  feedback: 'Example FeedbackBox text',\n};\n"],"names":["codeString","FeedbackBox_stories","FeedbackBox","Template","args","jsx","Container","FeedbackBoxExample"],"mappings":";;;AAOA,MAAMA,IAAa,6DAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,YAAAF;AAAA,EACF;AACF,GAEMG,IAAsC,CAACC,MAC3C,gBAAAC,EAACC,KACC,UAAC,gBAAAD,EAAAH,GAAA,EAAa,GAAGE,EAAM,CAAA,EACzB,CAAA,GAGWG,IAAqBJ,EAAS,KAAK,EAAE;AAClDI,EAAmB,OAAO;AAAA,EACxB,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,UAAU;AACZ;"}
+{"version":3,"file":"FeedbackBox.stories.js","sources":["../../../src/components/FeedbackBox/FeedbackBox.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { FeedbackBoxProps } from './FeedbackBox';\n\nimport { FeedbackBox } from './FeedbackBox';\n\nimport { Container } from 'storyComponents/Container';\n\nconst codeString = '<FeedbackBox id={id} level={level} feedback={feedback} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Molecules/FeedbackBox',\n  component: FeedbackBox,\n  parameters: {\n    inspectComponent: FeedbackBox,\n    codeString,\n  },\n} as Meta<FeedbackBoxProps>;\n\nconst Template: StoryFn<FeedbackBoxProps> = (args) => (\n  <Container>\n    <FeedbackBox {...args} />\n  </Container>\n);\n\nexport const FeedbackBoxExample = Template.bind({});\nFeedbackBoxExample.args = {\n  id: 'gba0d2d4',\n  level: 'success',\n  feedback: 'Example FeedbackBox text',\n};\n"],"names":["codeString","FeedbackBox_stories","FeedbackBox","Template","args","jsx","Container","FeedbackBoxExample"],"mappings":";;;AAOA,MAAMA,IAAa,6DAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EACF;AACF,GAEMG,IAAsC,CAACC,MAC3C,gBAAAC,EAACC,KACC,UAAC,gBAAAD,EAAAH,GAAA,EAAa,GAAGE,EAAM,CAAA,EACzB,CAAA,GAGWG,IAAqBJ,EAAS,KAAK,EAAE;AAClDI,EAAmB,OAAO;AAAA,EACxB,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,UAAU;AACZ;"}

package/dist/components/FieldHint/FieldHint.d.ts

@@ -1,6 +1,10 @@
 export interface FieldHintProps {
+    /** The value to display. */
     value?: string;
+    /** The aria-valuetext value of the spinner component. */
     spinnerAriaValueText: string;
+    /** true if the field hint is loading; otherwise, false. The default is false. */
     loading?: boolean;
 }
+/** Represents a component to show a hint for an input element. */
 export declare function FieldHint({ value, spinnerAriaValueText, loading }: FieldHintProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/FieldHint/FieldHint.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldHint.js","sources":["../../../src/components/FieldHint/FieldHint.tsx"],"sourcesContent":["import styles from './FieldHint.module.css';\n\nimport { Spinner } from 'components/Spinner/Spinner';\n\nexport interface FieldHintProps {\n  value?: string;\n  spinnerAriaValueText: string;\n  loading?: boolean;\n}\n\nexport function FieldHint({ value, spinnerAriaValueText, loading }: FieldHintProps) {\n  return (\n    <span className={styles['field-hint']}>\n      {value && <>{value}</>}\n      {!value && loading && <Spinner ariaValueText={spinnerAriaValueText} />}\n    </span>\n  );\n}\n"],"names":["FieldHint","value","spinnerAriaValueText","loading","jsxs","styles","jsx","Spinner"],"mappings":";;;;;AAUO,SAASA,EAAU,EAAE,OAAAC,GAAO,sBAAAC,GAAsB,SAAAC,KAA2B;AAClF,SACG,gBAAAC,EAAA,QAAA,EAAK,WAAWC,EAAO,YAAY,GACjC,UAAA;AAAA,IAAAJ,4BAAY,UAAMA,EAAA,CAAA;AAAA,IAClB,CAACA,KAASE,KAAY,gBAAAG,EAAAC,GAAA,EAAQ,eAAeL,GAAsB;AAAA,EACtE,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"FieldHint.js","sources":["../../../src/components/FieldHint/FieldHint.tsx"],"sourcesContent":["import styles from './FieldHint.module.css';\n\nimport { Spinner } from 'components/Spinner/Spinner';\n\nexport interface FieldHintProps {\n  /** The value to display. */\n  value?: string;\n  /** The aria-valuetext value of the spinner component. */\n  spinnerAriaValueText: string;\n  /** true if the field hint is loading; otherwise, false. The default is false. */\n  loading?: boolean;\n}\n\n/** Represents a component to show a hint for an input element. */\nexport function FieldHint({ value, spinnerAriaValueText, loading }: FieldHintProps) {\n  return (\n    <span className={styles['field-hint']}>\n      {value && <>{value}</>}\n      {!value && loading && <Spinner ariaValueText={spinnerAriaValueText} />}\n    </span>\n  );\n}\n"],"names":["FieldHint","value","spinnerAriaValueText","loading","jsxs","styles","jsx","Spinner"],"mappings":";;;;;AAcO,SAASA,EAAU,EAAE,OAAAC,GAAO,sBAAAC,GAAsB,SAAAC,KAA2B;AAClF,SACG,gBAAAC,EAAA,QAAA,EAAK,WAAWC,EAAO,YAAY,GACjC,UAAA;AAAA,IAAAJ,4BAAY,UAAMA,EAAA,CAAA;AAAA,IAClB,CAACA,KAASE,KAAY,gBAAAG,EAAAC,GAAA,EAAQ,eAAeL,GAAsB;AAAA,EACtE,EAAA,CAAA;AAEJ;"}

package/dist/components/FieldHint/FieldHint.stories.js

@@ -12,6 +12,7 @@ const l = "<FieldHint value={value} loading={loading} spinnerAriaValueText={spin
     }
   },
   parameters: {
+    inspectComponent: e,
     codeString: l
   }
 }, i = (n) => /* @__PURE__ */ a(e, { ...n }), t = {

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

@@ -1 +1 @@
-{"version":3,"file":"FieldHint.stories.js","sources":["../../../src/components/FieldHint/FieldHint.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { FieldHintProps } from './FieldHint';\n\nimport { FieldHint } from './FieldHint';\n\nconst codeString = '<FieldHint value={value} loading={loading} spinnerAriaValueText={spinnerAriaValueText} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/FieldHint',\n  component: FieldHint,\n  argTypes: {\n    value: {\n      control: 'text',\n    },\n    spinnerAriaValueText: {\n      control: 'text',\n    },\n  },\n  parameters: {\n    codeString: codeString,\n  },\n} as Meta<FieldHintProps>;\n\nconst Template: StoryFn<FieldHintProps> = (args) => <FieldHint {...args} />;\n\nconst defaultArgs: Partial<FieldHintProps> = {\n  spinnerAriaValueText: 'FieldHint Loading',\n};\n\nexport const FieldHintExample = Template.bind({});\nFieldHintExample.args = {\n  value: 'This is a FieldHint',\n  loading: false,\n  ...defaultArgs,\n};\n\nexport const LoadingFieldHint = Template.bind({});\nLoadingFieldHint.args = {\n  value: '',\n  loading: true,\n  ...defaultArgs,\n};\n"],"names":["codeString","FieldHint_stories","FieldHint","Template","args","jsx","defaultArgs","FieldHintExample","LoadingFieldHint"],"mappings":";;AAKA,MAAMA,IAAa,6FAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,sBAAsB;AAAA,MACpB,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,YAAAF;AAAA,EACF;AACF,GAEMG,IAAoC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAW,GAAGE,EAAM,CAAA,GAEnEE,IAAuC;AAAA,EAC3C,sBAAsB;AACxB,GAEaC,IAAmBJ,EAAS,KAAK,EAAE;AAChDI,EAAiB,OAAO;AAAA,EACtB,OAAO;AAAA,EACP,SAAS;AAAA,EACT,GAAGD;AACL;AAEO,MAAME,IAAmBL,EAAS,KAAK,EAAE;AAChDK,EAAiB,OAAO;AAAA,EACtB,OAAO;AAAA,EACP,SAAS;AAAA,EACT,GAAGF;AACL;"}
+{"version":3,"file":"FieldHint.stories.js","sources":["../../../src/components/FieldHint/FieldHint.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { FieldHintProps } from './FieldHint';\n\nimport { FieldHint } from './FieldHint';\n\nconst codeString = '<FieldHint value={value} loading={loading} spinnerAriaValueText={spinnerAriaValueText} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/FieldHint',\n  component: FieldHint,\n  argTypes: {\n    value: {\n      control: 'text',\n    },\n    spinnerAriaValueText: {\n      control: 'text',\n    },\n  },\n  parameters: {\n    inspectComponent: FieldHint,\n    codeString: codeString,\n  },\n} as Meta<FieldHintProps>;\n\nconst Template: StoryFn<FieldHintProps> = (args) => <FieldHint {...args} />;\n\nconst defaultArgs: Partial<FieldHintProps> = {\n  spinnerAriaValueText: 'FieldHint Loading',\n};\n\nexport const FieldHintExample = Template.bind({});\nFieldHintExample.args = {\n  value: 'This is a FieldHint',\n  loading: false,\n  ...defaultArgs,\n};\n\nexport const LoadingFieldHint = Template.bind({});\nLoadingFieldHint.args = {\n  value: '',\n  loading: true,\n  ...defaultArgs,\n};\n"],"names":["codeString","FieldHint_stories","FieldHint","Template","args","jsx","defaultArgs","FieldHintExample","LoadingFieldHint"],"mappings":";;AAKA,MAAMA,IAAa,6FAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,sBAAsB;AAAA,MACpB,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EACF;AACF,GAEMG,IAAoC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAW,GAAGE,EAAM,CAAA,GAEnEE,IAAuC;AAAA,EAC3C,sBAAsB;AACxB,GAEaC,IAAmBJ,EAAS,KAAK,EAAE;AAChDI,EAAiB,OAAO;AAAA,EACtB,OAAO;AAAA,EACP,SAAS;AAAA,EACT,GAAGD;AACL;AAEO,MAAME,IAAmBL,EAAS,KAAK,EAAE;AAChDK,EAAiB,OAAO;AAAA,EACtB,OAAO;AAAA,EACP,SAAS;AAAA,EACT,GAAGF;AACL;"}

package/dist/components/Fieldset/Fieldset.d.ts

@@ -1,8 +1,13 @@
 import { PropsWithChildren, ReactNode } from 'react';
 export interface FieldsetProps {
+    /** The description to render. */
     description?: ReactNode;
+    /** The id of the description element. Used together with the description property. */
     descriptionId?: string;
+    /** true if the form fields should render inline; otherwise, false. The default is false. */
     inline?: boolean;
+    /** The legend to render. */
     legend: string;
 }
+/** Represents a component to show a collection of form field elements. */
 export declare const Fieldset: ({ inline, legend, description, descriptionId, children, }: PropsWithChildren<FieldsetProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Fieldset/Fieldset.js.map

@@ -1 +1 @@
-{"version":3,"file":"Fieldset.js","sources":["../../../src/components/Fieldset/Fieldset.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { PropsWithChildren, ReactNode } from 'react';\n\nimport styles from './Fieldset.module.css';\n\nexport interface FieldsetProps {\n  description?: ReactNode;\n  descriptionId?: string;\n  inline?: boolean;\n  legend: string;\n}\n\nexport const Fieldset = ({\n  inline,\n  legend,\n  description,\n  descriptionId,\n  children,\n}: PropsWithChildren<FieldsetProps>) => (\n  <fieldset\n    className={clsx(styles['fieldset'], {\n      [styles['fieldset--inline']]: inline,\n    })}\n  >\n    <div>\n      <legend className={styles['fieldset__legend']}>{legend}</legend>\n      {description && (\n        <p className={styles['fieldset__description']} id={descriptionId}>\n          {description}\n        </p>\n      )}\n    </div>\n    {children}\n  </fieldset>\n);\n"],"names":["Fieldset","inline","legend","description","descriptionId","children","jsxs","clsx","styles","jsx"],"mappings":";;;;;;;GAaaA,IAAW,CAAC;AAAA,EACvB,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AACF,MACE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAKC,EAAO,UAAa;AAAA,MAClC,CAACA,EAAO,kBAAkB,CAAC,GAAGP;AAAA,IAAA,CAC/B;AAAA,IAED,UAAA;AAAA,MAAA,gBAAAK,EAAC,OACC,EAAA,UAAA;AAAA,QAAA,gBAAAG,EAAC,UAAO,EAAA,WAAWD,EAAO,kBAAsB,UAAON,GAAA;AAAA,QACtDC,uBACE,KAAE,EAAA,WAAWK,EAAO,uBAA0B,IAAIJ,GAChD,UACHD,EAAA,CAAA;AAAA,MAAA,GAEJ;AAAA,MACCE;AAAA,IAAA;AAAA,EAAA;AACH;"}
+{"version":3,"file":"Fieldset.js","sources":["../../../src/components/Fieldset/Fieldset.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { PropsWithChildren, ReactNode } from 'react';\n\nimport styles from './Fieldset.module.css';\n\nexport interface FieldsetProps {\n  /** The description to render. */\n  description?: ReactNode;\n  /** The id of the description element. Used together with the description property. */\n  descriptionId?: string;\n  /** true if the form fields should render inline; otherwise, false. The default is false. */\n  inline?: boolean;\n  /** The legend to render. */\n  legend: string;\n}\n\n/** Represents a component to show a collection of form field elements. */\nexport const Fieldset = ({\n  inline,\n  legend,\n  description,\n  descriptionId,\n  children,\n}: PropsWithChildren<FieldsetProps>) => (\n  <fieldset\n    className={clsx(styles['fieldset'], {\n      [styles['fieldset--inline']]: inline,\n    })}\n  >\n    <div>\n      <legend className={styles['fieldset__legend']}>{legend}</legend>\n      {description && (\n        <p className={styles['fieldset__description']} id={descriptionId}>\n          {description}\n        </p>\n      )}\n    </div>\n    {children}\n  </fieldset>\n);\n"],"names":["Fieldset","inline","legend","description","descriptionId","children","jsxs","clsx","styles","jsx"],"mappings":";;;;;;;GAkBaA,IAAW,CAAC;AAAA,EACvB,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AACF,MACE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAKC,EAAO,UAAa;AAAA,MAClC,CAACA,EAAO,kBAAkB,CAAC,GAAGP;AAAA,IAAA,CAC/B;AAAA,IAED,UAAA;AAAA,MAAA,gBAAAK,EAAC,OACC,EAAA,UAAA;AAAA,QAAA,gBAAAG,EAAC,UAAO,EAAA,WAAWD,EAAO,kBAAsB,UAAON,GAAA;AAAA,QACtDC,uBACE,KAAE,EAAA,WAAWK,EAAO,uBAA0B,IAAIJ,GAChD,UACHD,EAAA,CAAA;AAAA,MAAA,GAEJ;AAAA,MACCE;AAAA,IAAA;AAAA,EAAA;AACH;"}

package/dist/components/Fieldset/Fieldset.stories.js

@@ -1,12 +1,12 @@
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
-import { Fieldset as s } from "./Fieldset.js";
-import { InputField as i } from "../InputField/InputField.js";
-import { Label as t } from "../Label/Label.js";
-import { Container as n } from "../../storyComponents/Container/Container.js";
-import { FormField as r } from "../FormField/FormField.js";
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { Fieldset as l } from "./Fieldset.js";
+import { InputField as t } from "../InputField/InputField.js";
+import { Label as r } from "../Label/Label.js";
+import { Container as a } from "../../storyComponents/Container/Container.js";
+import { FormField as s } from "../FormField/FormField.js";
 const m = "<Fieldset legend={legend} description={description}>{children}</Fieldset>", u = {
   title: "Atoms/Fieldset",
-  component: s,
+  component: l,
   argTypes: {
     descriptionId: {
       table: {
@@ -15,27 +15,28 @@ const m = "<Fieldset legend={legend} description={description}>{children}</Field
     }
   },
   parameters: {
+    inspectComponent: l,
     codeString: m
   }
-}, d = (a) => /* @__PURE__ */ e(n, { size: "large", children: /* @__PURE__ */ l(s, { ...a, children: [
-  /* @__PURE__ */ l(r, { children: [
-    /* @__PURE__ */ e(t, { htmlFor: "d6aa53fd", children: "Example label 1" }),
-    /* @__PURE__ */ e(i, { id: "d6aa53fd" })
+}, o = (n) => /* @__PURE__ */ e(a, { size: "large", children: /* @__PURE__ */ i(l, { ...n, children: [
+  /* @__PURE__ */ i(s, { children: [
+    /* @__PURE__ */ e(r, { htmlFor: "d6aa53fd", children: "Example label 1" }),
+    /* @__PURE__ */ e(t, { id: "d6aa53fd" })
   ] }),
-  /* @__PURE__ */ l(r, { children: [
-    /* @__PURE__ */ e(t, { htmlFor: "4e7a2f22", children: "Example label 2" }),
-    /* @__PURE__ */ e(i, { id: "4e7a2f22" })
+  /* @__PURE__ */ i(s, { children: [
+    /* @__PURE__ */ e(r, { htmlFor: "4e7a2f22", children: "Example label 2" }),
+    /* @__PURE__ */ e(t, { id: "4e7a2f22" })
   ] })
-] }) }), o = {
+] }) }), d = {
   legend: "Fieldset example",
   inline: !1
-}, p = d.bind({});
+}, p = o.bind({});
 p.args = {
-  ...o
+  ...d
 };
-const c = d.bind({});
+const c = o.bind({});
 c.args = {
-  ...o,
+  ...d,
   description: "A Fieldset groups several controls as well as labels"
 };
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"Fieldset.stories.js","sources":["../../../src/components/Fieldset/Fieldset.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { PropsWithChildren } from 'react';\nimport type { FieldsetProps } from './Fieldset';\n\nimport { Fieldset } from './Fieldset';\n\nimport { InputField } from 'components/InputField';\nimport { Label } from 'components/Label';\nimport { Container } from 'storyComponents/Container';\nimport { FormField } from 'components/FormField';\n\nconst codeString = '<Fieldset legend={legend} description={description}>{children}</Fieldset>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/Fieldset',\n  component: Fieldset,\n  argTypes: {\n    descriptionId: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    codeString: codeString,\n  },\n} as Meta<PropsWithChildren<FieldsetProps>>;\n\nconst Template: StoryFn<PropsWithChildren<FieldsetProps>> = (args) => (\n  <Container size=\"large\">\n    <Fieldset {...args}>\n      <FormField>\n        <Label htmlFor=\"d6aa53fd\">Example label 1</Label>\n        <InputField id=\"d6aa53fd\" />\n      </FormField>\n      <FormField>\n        <Label htmlFor=\"4e7a2f22\">Example label 2</Label>\n        <InputField id=\"4e7a2f22\" />\n      </FormField>\n    </Fieldset>\n  </Container>\n);\n\nconst defaultArgs: Partial<PropsWithChildren<FieldsetProps>> = {\n  legend: 'Fieldset example',\n  inline: false,\n};\n\nexport const FieldsetExample = Template.bind({});\nFieldsetExample.args = {\n  ...defaultArgs,\n};\n\nexport const WithDescriptionExample = Template.bind({});\nWithDescriptionExample.args = {\n  ...defaultArgs,\n  description: 'A Fieldset groups several controls as well as labels',\n};\n"],"names":["codeString","Fieldset_stories","Fieldset","Template","args","jsx","Container","jsxs","FormField","Label","InputField","defaultArgs","FieldsetExample","WithDescriptionExample"],"mappings":";;;;;;AAWA,MAAMA,IAAa,6EAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,eAAe;AAAA,MACb,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,YAAAF;AAAA,EACF;AACF,GAEMG,IAAsD,CAACC,MAC1D,gBAAAC,EAAAC,GAAA,EAAU,MAAK,SACd,UAAA,gBAAAC,EAACL,GAAU,EAAA,GAAGE,GACZ,UAAA;AAAA,EAAA,gBAAAG,EAACC,GACC,EAAA,UAAA;AAAA,IAAC,gBAAAH,EAAAI,GAAA,EAAM,SAAQ,YAAW,UAAe,mBAAA;AAAA,IACzC,gBAAAJ,EAACK,GAAW,EAAA,IAAG,WAAW,CAAA;AAAA,EAAA,GAC5B;AAAA,oBACCF,GACC,EAAA,UAAA;AAAA,IAAC,gBAAAH,EAAAI,GAAA,EAAM,SAAQ,YAAW,UAAe,mBAAA;AAAA,IACzC,gBAAAJ,EAACK,GAAW,EAAA,IAAG,WAAW,CAAA;AAAA,EAAA,GAC5B;AAAA,EACF,CAAA,EACF,CAAA,GAGIC,IAAyD;AAAA,EAC7D,QAAQ;AAAA,EACR,QAAQ;AACV,GAEaC,IAAkBT,EAAS,KAAK,EAAE;AAC/CS,EAAgB,OAAO;AAAA,EACrB,GAAGD;AACL;AAEO,MAAME,IAAyBV,EAAS,KAAK,EAAE;AACtDU,EAAuB,OAAO;AAAA,EAC5B,GAAGF;AAAA,EACH,aAAa;AACf;"}
+{"version":3,"file":"Fieldset.stories.js","sources":["../../../src/components/Fieldset/Fieldset.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { PropsWithChildren } from 'react';\nimport type { FieldsetProps } from './Fieldset';\n\nimport { Fieldset } from './Fieldset';\n\nimport { InputField } from 'components/InputField';\nimport { Label } from 'components/Label';\nimport { Container } from 'storyComponents/Container';\nimport { FormField } from 'components/FormField';\n\nconst codeString = '<Fieldset legend={legend} description={description}>{children}</Fieldset>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/Fieldset',\n  component: Fieldset,\n  argTypes: {\n    descriptionId: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    inspectComponent: Fieldset,\n    codeString: codeString,\n  },\n} as Meta<PropsWithChildren<FieldsetProps>>;\n\nconst Template: StoryFn<PropsWithChildren<FieldsetProps>> = (args) => (\n  <Container size=\"large\">\n    <Fieldset {...args}>\n      <FormField>\n        <Label htmlFor=\"d6aa53fd\">Example label 1</Label>\n        <InputField id=\"d6aa53fd\" />\n      </FormField>\n      <FormField>\n        <Label htmlFor=\"4e7a2f22\">Example label 2</Label>\n        <InputField id=\"4e7a2f22\" />\n      </FormField>\n    </Fieldset>\n  </Container>\n);\n\nconst defaultArgs: Partial<PropsWithChildren<FieldsetProps>> = {\n  legend: 'Fieldset example',\n  inline: false,\n};\n\nexport const FieldsetExample = Template.bind({});\nFieldsetExample.args = {\n  ...defaultArgs,\n};\n\nexport const WithDescriptionExample = Template.bind({});\nWithDescriptionExample.args = {\n  ...defaultArgs,\n  description: 'A Fieldset groups several controls as well as labels',\n};\n"],"names":["codeString","Fieldset_stories","Fieldset","Template","args","jsx","Container","jsxs","FormField","Label","InputField","defaultArgs","FieldsetExample","WithDescriptionExample"],"mappings":";;;;;;AAWA,MAAMA,IAAa,6EAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,eAAe;AAAA,MACb,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EACF;AACF,GAEMG,IAAsD,CAACC,MAC1D,gBAAAC,EAAAC,GAAA,EAAU,MAAK,SACd,UAAA,gBAAAC,EAACL,GAAU,EAAA,GAAGE,GACZ,UAAA;AAAA,EAAA,gBAAAG,EAACC,GACC,EAAA,UAAA;AAAA,IAAC,gBAAAH,EAAAI,GAAA,EAAM,SAAQ,YAAW,UAAe,mBAAA;AAAA,IACzC,gBAAAJ,EAACK,GAAW,EAAA,IAAG,WAAW,CAAA;AAAA,EAAA,GAC5B;AAAA,oBACCF,GACC,EAAA,UAAA;AAAA,IAAC,gBAAAH,EAAAI,GAAA,EAAM,SAAQ,YAAW,UAAe,mBAAA;AAAA,IACzC,gBAAAJ,EAACK,GAAW,EAAA,IAAG,WAAW,CAAA;AAAA,EAAA,GAC5B;AAAA,EACF,CAAA,EACF,CAAA,GAGIC,IAAyD;AAAA,EAC7D,QAAQ;AAAA,EACR,QAAQ;AACV,GAEaC,IAAkBT,EAAS,KAAK,EAAE;AAC/CS,EAAgB,OAAO;AAAA,EACrB,GAAGD;AACL;AAEO,MAAME,IAAyBV,EAAS,KAAK,EAAE;AACtDU,EAAuB,OAAO;AAAA,EAC5B,GAAGF;AAAA,EACH,aAAa;AACf;"}