@uva-glass/component-library 2.4.0 → 2.5.1

package/dist/assets/Chip.css

@@ -0,0 +1 @@
+._chip_7nmzv_1{align-items:center;background-color:var(--color-white);border:1px solid var(--color-grey-200);border-radius:1rem;cursor:pointer;display:grid;grid-template-columns:auto 1fr;min-height:2rem;padding:0 0 0 1rem;-webkit-user-select:none;user-select:none;width:fit-content}._chip_7nmzv_1:hover{background-color:var(--color-grey-200)}._chip_7nmzv_1:focus-visible{outline:.125rem dotted var(--color-cobalt);outline-offset:.125rem}._chip__label_7nmzv_24{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}._chip__close-button_7nmzv_31{margin:0 .5rem}

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

@@ -14,9 +14,11 @@ export interface CheckboxTreeProps {
     checkboxTree: CheckboxBranch[];
     /** Array of selected values. */
     defaultValue?: string[];
+    /** `true` if the font-weight needs to be unset; otherwise, `false`. The default is `false`. */
+    noLabelFrontWeight?: boolean;
     /** 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 declare const CheckboxTree: ({ title, checkboxTree, defaultValue, noLabelFrontWeight, onChange, }: CheckboxTreeProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/CheckboxTree/CheckboxTree.js

@@ -1,17 +1,17 @@
 import { jsxs as i, 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 { Button as R } from "../Buttons/Button.js";
+import { useRef as R, useEffect as N } from "react";
+import { c as y } from "../../clsx-OuTLNxxd.js";
+import { Icon as j } from "../Icon/Icon.js";
+import { Button as I } from "../Buttons/Button.js";
 import "../Buttons/LinkButton.js";
 import "@react-aria/button";
-import { Checkbox as y } from "../Checkbox/Checkbox.js";
-import { Label as S } from "../Label/Label.js";
+import { Checkbox as S } from "../Checkbox/Checkbox.js";
+import { Label as C } from "../Label/Label.js";
 import "@react-aria/dialog";
 import "@react-aria/focus";
 import "@react-aria/overlays";
 import "../OverlayCloseButton/OverlayCloseButton.js";
-import { FormField as C } from "../FormField/FormField.js";
+import { FormField as A } from "../FormField/FormField.js";
 import "../GridRow/GridRow.js";
 import "../IconButton/IconButton.js";
 import "../Input/Input.js";
@@ -26,7 +26,7 @@ import "../SelectListbox/SelectListbox.js";
 import "../SelectListbox/SelectProvider.js";
 import "../Sortable/components/SortableItem.js";
 import "../../SortableProvider-BUsvniX7.js";
-import { useResponsive as j } from "../hooks/useResponsive.js";
+import { useResponsive as L } from "../hooks/useResponsive.js";
 import '../../assets/CheckboxTree.css';const o = {
   "checkbox-tree__header": "_checkbox-tree__header_xbe4e_1",
   "checkbox-tree__branch": "_checkbox-tree__branch_xbe4e_8",
@@ -36,82 +36,88 @@ import '../../assets/CheckboxTree.css';const o = {
   "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"
-}, le = ({ title: b, checkboxTree: A, defaultValue: l, onChange: x }) => {
-  const s = T([]), { lessThan: n } = j(), _ = (r, e = document) => [].slice.call(e.querySelectorAll(r)), E = () => {
+}, _e = ({
+  title: b,
+  checkboxTree: E,
+  defaultValue: l,
+  noLabelFrontWeight: x = !1,
+  onChange: m
+}) => {
+  const s = R([]), { lessThan: n } = L(), _ = (r, e = document) => [].slice.call(e.querySelectorAll(r)), q = () => {
     const r = s.current.reduce((e, t) => (t.name && t.checked && e.push(t.value), e), []);
-    x && x(r);
-  }, m = (r) => {
+    m && m(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 = _(
+      const c = (t = (e = r.closest("[data-ul]")) == null ? void 0 : e.parentNode) == null ? void 0 : t.querySelector("input"), k = _(
         "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((v, g) => (g.disabled || v.push(g.checked), v), []), p = k.every(Boolean), T = k.some(Boolean);
+      if (c && (c.checked = p, c.indeterminate = !p && p !== T), !c || r === c)
         break;
       r = c;
     }
-  }, u = (r, e) => {
+  }, f = (r, e) => {
     var d, c;
     const t = e == null ? void 0 : e.querySelector("[data-ul]");
     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(o["checkbox-tree__leaves--expanded"]);
-  }, q = (r) => {
+  }, F = (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(), u(t.querySelector("button"), t);
+      r.preventDefault(), f(t.querySelector("button"), t);
       return;
     }
     if (s.current.indexOf(e) === -1) return;
-    (e.parentNode.parentNode ? _("input", e.parentNode.parentNode) : []).forEach((h) => h.checked = h.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), q();
   }, B = (r) => {
     const e = r.target, t = e.closest("[data-li]");
-    u(e, t);
+    f(e, t);
   };
   return N(() => {
     s.current = _("input") || [];
   }, []), N(() => {
     l && s.current.forEach((r) => {
-      l.includes(r.value) && (r.checked = !0, m(r));
+      l.includes(r.value) && (r.checked = !0, u(r));
     });
   }, [l]), /* @__PURE__ */ i("div", { children: [
     b && /* @__PURE__ */ a("span", { className: o["checkbox-tree__header"], children: b }),
-    /* @__PURE__ */ a("div", { onClick: q, "data-ul": !0, role: "tree", tabIndex: 0, children: A.map(({ itemName: r, children: e }) => /* @__PURE__ */ i(
+    /* @__PURE__ */ a("div", { onClick: F, "data-ul": !0, role: "tree", tabIndex: 0, children: E.map(({ itemName: r, children: e }) => /* @__PURE__ */ i(
       "div",
       {
         className: o["checkbox-tree__branch"],
         "data-li": !0,
         "aria-expanded": n.md ? "false" : "true",
         children: [
-          /* @__PURE__ */ i(C, { inline: !0, className: o["checkbox-tree__branch--formfield"], children: [
-            /* @__PURE__ */ a(R, { variant: "blank", onClick: B, children: /* @__PURE__ */ a(
-              L,
+          /* @__PURE__ */ i(A, { inline: !0, className: o["checkbox-tree__branch--formfield"], children: [
+            /* @__PURE__ */ a(I, { variant: "blank", onClick: B, children: /* @__PURE__ */ a(
+              j,
               {
                 name: "CheveronRight",
                 size: 16,
-                className: g(o["checkbox-tree__branch--icon"], {
+                className: y(o["checkbox-tree__branch--icon"], {
                   [o["checkbox-tree__branch--icon--expanded"]]: !n.md
                 })
               }
             ) }),
-            /* @__PURE__ */ a(y, { id: r, disabled: e.every((t) => t.disabled) }),
-            /* @__PURE__ */ a(S, { htmlFor: r, children: r })
+            /* @__PURE__ */ a(S, { id: r, disabled: e.every((t) => t.disabled) }),
+            /* @__PURE__ */ a(C, { htmlFor: r, noFontWeight: x, children: r })
           ] }),
           /* @__PURE__ */ a(
             "div",
             {
-              className: g(o["checkbox-tree__leaves"], {
+              className: y(o["checkbox-tree__leaves"], {
                 [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__ */ i(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 })
+              children: e.map(({ itemName: t, itemValue: d, disabled: c }) => /* @__PURE__ */ a("div", { className: o["checkbox-tree__leaf"], "data-li": !0, children: /* @__PURE__ */ i(A, { inline: !0, className: o["checkbox-tree__branch--formfield"], children: [
+                /* @__PURE__ */ a(S, { id: t, name: t, value: d, disabled: c }),
+                /* @__PURE__ */ a(C, { htmlFor: t, noFontWeight: x, children: t })
               ] }) }, t))
             }
           )
@@ -122,6 +128,6 @@ import '../../assets/CheckboxTree.css';const o = {
   ] });
 };
 export {
-  le as CheckboxTree
+  _e as CheckboxTree
 };
 //# sourceMappingURL=CheckboxTree.js.map

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\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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"}
+{"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  /** `true` if the font-weight needs to be unset; otherwise, `false`. The default is `false`. */\n  noLabelFrontWeight?: boolean;\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 = ({\n  title,\n  checkboxTree,\n  defaultValue,\n  noLabelFrontWeight = false,\n  onChange,\n}: 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} noFontWeight={noLabelFrontWeight}>\n                {itemName}\n              </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} noFontWeight={noLabelFrontWeight}>\n                      {itemName}\n                    </Label>\n                  </FormField>\n                </div>\n              ))}\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"names":["CheckboxTree","title","checkboxTree","defaultValue","noLabelFrontWeight","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/Chip/Chip.d.ts

@@ -0,0 +1,7 @@
+export interface ChipProps {
+    /** Text on the chip */
+    label: string;
+    /** Function to remove chip from chip-list on label-text*/
+    onDelete: (label: string) => void;
+}
+export declare const Chip: ({ label, onDelete }: ChipProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Chip/Chip.js

@@ -0,0 +1,14 @@
+import { jsxs as i, jsx as s } from "react/jsx-runtime";
+import { Icon as n } from "../Icon/Icon.js";
+import '../../assets/Chip.css';const t = "_chip_7nmzv_1", e = "_chip__label_7nmzv_24", c = {
+  chip: t,
+  chip__label: e,
+  "chip__close-button": "_chip__close-button_7nmzv_31"
+}, h = ({ label: _, onDelete: o }) => /* @__PURE__ */ i("button", { className: c.chip, onClick: () => o(_), children: [
+  /* @__PURE__ */ s("span", { className: c.chip__label, children: _ }),
+  /* @__PURE__ */ s(n, { name: "Cross", size: 20, className: c["chip__close-button"] })
+] });
+export {
+  h as Chip
+};
+//# sourceMappingURL=Chip.js.map

package/dist/components/Chip/Chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.js","sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import styles from './Chip.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface ChipProps {\n  /** Text on the chip */\n  label: string;\n  /** Function to remove chip from chip-list on label-text*/\n  onDelete: (label: string) => void;\n}\n\nexport const Chip = ({ label, onDelete }: ChipProps) => {\n  return (\n    <button className={styles['chip']} onClick={() => onDelete(label)}>\n      <span className={styles['chip__label']}>{label}</span>\n      <Icon name=\"Cross\" size={20} className={styles['chip__close-button']} />\n    </button>\n  );\n};\n"],"names":["Chip","label","onDelete","jsxs","styles","jsx","Icon"],"mappings":";;;;;;GAWaA,IAAO,CAAC,EAAE,OAAAC,GAAO,UAAAC,QAE1B,gBAAAC,EAAC,UAAO,EAAA,WAAWC,EAAO,MAAS,SAAS,MAAMF,EAASD,CAAK,GAC9D,UAAA;AAAA,EAAA,gBAAAI,EAAC,QAAK,EAAA,WAAWD,EAAO,aAAiB,UAAMH,GAAA;AAAA,EAC/C,gBAAAI,EAACC,KAAK,MAAK,SAAQ,MAAM,IAAI,WAAWF,EAAO,oBAAoB,EAAG,CAAA;AAAA,GACxE;"}

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

@@ -0,0 +1,6 @@
+import { Meta } from '@storybook/react';
+import { ChipProps } from './Chip';
+declare const _default: Meta<ChipProps>;
+export default _default;
+export declare const ChipExample: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, ChipProps>;
+export declare const ChipLongLabel: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, ChipProps>;

package/dist/components/Chip/Chip.stories.js

@@ -0,0 +1,29 @@
+import { jsx as l } from "react/jsx-runtime";
+import { fn as t } from "../../index-DWzkl4aY.js";
+import { Chip as e } from "./Chip.js";
+const s = "<Chip label={string} onDelete={onDeleteFunction(label)}/>", b = {
+  title: "Atoms/Chip",
+  component: e,
+  argTypes: {},
+  parameters: {
+    inspectComponent: e,
+    codeString: s
+  }
+}, n = (o) => /* @__PURE__ */ l(e, { ...o }), a = {
+  label: "Nederlands",
+  onDelete: t()
+}, i = n.bind({});
+i.args = {
+  ...a
+};
+const r = n.bind({});
+r.args = {
+  label: "Een filter met een veel te lang label",
+  onDelete: t()
+};
+export {
+  i as ChipExample,
+  r as ChipLongLabel,
+  b as default
+};
+//# sourceMappingURL=Chip.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.stories.js","sources":["../../../src/components/Chip/Chip.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { ChipProps } from './Chip';\n\nimport { Chip } from './Chip';\n\nconst codeString = '<Chip label={string} onDelete={onDeleteFunction(label)}/>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/Chip',\n  component: Chip,\n  argTypes: {},\n  parameters: {\n    inspectComponent: Chip,\n    codeString: codeString,\n  },\n} as Meta<ChipProps>;\n\nconst Template: StoryFn<ChipProps> = (args) => <Chip {...args} />;\n\nconst defaultArgs: Partial<ChipProps> = {\n  label: 'Nederlands',\n  onDelete: fn(),\n};\n\nexport const ChipExample = Template.bind({});\nChipExample.args = {\n  ...defaultArgs,\n};\n\nexport const ChipLongLabel = Template.bind({});\nChipLongLabel.args = {\n  label: 'Een filter met een veel te lang label',\n  onDelete: fn(),\n};\n"],"names":["codeString","Chip_stories","Chip","Template","args","jsx","defaultArgs","fn","ChipExample","ChipLongLabel"],"mappings":";;;AAOA,MAAMA,IAAa,6DAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU,CAAC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAA+B,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAM,GAAGE,GAAM,GAEzDE,IAAkC;AAAA,EACtC,OAAO;AAAA,EACP,UAAUC,EAAG;AACf,GAEaC,IAAcL,EAAS,KAAK,CAAE,CAAA;AAC3CK,EAAY,OAAO;AAAA,EACjB,GAAGF;AACL;AAEO,MAAMG,IAAgBN,EAAS,KAAK,CAAE,CAAA;AAC7CM,EAAc,OAAO;AAAA,EACnB,OAAO;AAAA,EACP,UAAUF,EAAG;AACf;"}

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

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

package/dist/components/Chip/index.js

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

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

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

package/dist/components/index.d.ts

@@ -11,6 +11,7 @@ export * from './Checkbox';
 export * from './CheckboxButton';
 export * from './CheckboxButtonBar';
 export * from './CheckboxTree';
+export * from './Chip';
 export * from './Drawer';
 export * from './EmptyStateDataDisplay';
 export * from './FeedbackBox';

package/dist/components/index.js

@@ -1,107 +1,109 @@
 import { Accordion as t } from "./Accordion/Accordion.js";
 import { AccordionCard as p } from "./AccordionCard/AccordionCard.js";
 import { ActionList as m } from "./ActionList/ActionList.js";
-import { AppStatusBar as a } from "./AppStatusBar/AppStatusBar.js";
+import { AppStatusBar as i } from "./AppStatusBar/AppStatusBar.js";
 import { Attention as n } from "./Attention/Attention.js";
 import { Backdrop as c } from "./Backdrop/Backdrop.js";
 import { ButtonGroup as d } from "./ButtonGroup/ButtonGroup.js";
 import { Button as B } from "./Buttons/Button.js";
-import { LinkButton as b } from "./Buttons/LinkButton.js";
-import { MenuButton as C } from "./Buttons/MenuButton.js";
+import { LinkButton as C } from "./Buttons/LinkButton.js";
+import { MenuButton as k } from "./Buttons/MenuButton.js";
 import { Card as L } from "./Card/Card.js";
 import { Checkbox as g } from "./Checkbox/Checkbox.js";
-import { CheckboxButton as P } from "./CheckboxButton/CheckboxButton.js";
+import { CheckboxButton as I } from "./CheckboxButton/CheckboxButton.js";
 import { CheckboxButtonBar as y } from "./CheckboxButtonBar/CheckboxButtonBar.js";
 import { CheckboxTree as D } from "./CheckboxTree/CheckboxTree.js";
-import { Drawer as v } from "./Drawer/Drawer.js";
-import { EmptyStateDataDisplay as O } from "./EmptyStateDataDisplay/EmptyStateDataDisplay.js";
-import { FeedbackBox as E } from "./FeedbackBox/FeedbackBox.js";
-import { FieldHint as H } from "./FieldHint/FieldHint.js";
-import { Fieldset as N } from "./Fieldset/Fieldset.js";
-import { FormField as q } from "./FormField/FormField.js";
-import { FormInput as K } from "./FormInput/FormInput.js";
-import { GridRow as U } from "./GridRow/GridRow.js";
-import { HorizontalList as W } from "./HorizontalList/HorizontalList.js";
-import { Icon as Y } from "./Icon/Icon.js";
-import { IconButton as _ } from "./IconButton/IconButton.js";
-import { InfoMessage as oo } from "./InfoMessage/InfoMessage.js";
-import { Input as to } from "./Input/Input.js";
-import { InputField as po } from "./InputField/InputField.js";
-import { Label as mo } from "./Label/Label.js";
-import { MenuLink as ao } from "./MenuLink/MenuLink.js";
-import { MetaDataList as no } from "./MetaDataList/MetaDataList.js";
-import { ModalDialog as co } from "./ModalDialog/ModalDialog.js";
-import { M as so } from "../TablePlugin-E6UFlCgy.js";
-import { OverlayCloseButton as So } from "./OverlayCloseButton/OverlayCloseButton.js";
-import { OverlayStepBar as ko } from "./OverlayStepBar/OverlayStepBar.js";
-import { PageOverlay as Fo } from "./PageOverlay/PageOverlay.js";
-import { Periods as Mo } from "./Periods/Periods.js";
-import { PeriodSelector as Io } from "./PeriodSelector/PeriodSelector.js";
-import { ProgrammeCard as ho } from "./ProgrammeCard/ProgrammeCard.js";
-import { RadioButton as Ao } from "./RadioButton/RadioButton.js";
-import { Repeater as Ro } from "./Repeater/Repeater.js";
-import { Rte as wo, RteEditor as Oo } from "./RteEditor/RteEditor.js";
-import { SectionNotification as Eo } from "./SectionNotification/SectionNotification.js";
-import { SelectListbox as Ho } from "./SelectListbox/SelectListbox.js";
-import { SelectProvider as No, useSelect as jo } from "./SelectListbox/SelectProvider.js";
-import { Sortable as Jo } from "./Sortable/Sortable.js";
-import { Spinner as Qo } from "./Spinner/Spinner.js";
-import { StatusPill as Vo } from "./StatusPill/StatusPill.js";
-import { ToggleSwitch as Xo } from "./ToggleSwitch/ToggleSwitch.js";
-import { Tooltip as Zo } from "./Tooltip/Tooltip.js";
+import { Chip as v } from "./Chip/Chip.js";
+import { Drawer as O } from "./Drawer/Drawer.js";
+import { EmptyStateDataDisplay as E } from "./EmptyStateDataDisplay/EmptyStateDataDisplay.js";
+import { FeedbackBox as H } from "./FeedbackBox/FeedbackBox.js";
+import { FieldHint as N } from "./FieldHint/FieldHint.js";
+import { Fieldset as q } from "./Fieldset/Fieldset.js";
+import { FormField as K } from "./FormField/FormField.js";
+import { FormInput as U } from "./FormInput/FormInput.js";
+import { GridRow as W } from "./GridRow/GridRow.js";
+import { HorizontalList as Y } from "./HorizontalList/HorizontalList.js";
+import { Icon as _ } from "./Icon/Icon.js";
+import { IconButton as oo } from "./IconButton/IconButton.js";
+import { InfoMessage as to } from "./InfoMessage/InfoMessage.js";
+import { Input as po } from "./Input/Input.js";
+import { InputField as mo } from "./InputField/InputField.js";
+import { Label as io } from "./Label/Label.js";
+import { MenuLink as no } from "./MenuLink/MenuLink.js";
+import { MetaDataList as co } from "./MetaDataList/MetaDataList.js";
+import { ModalDialog as so } from "./ModalDialog/ModalDialog.js";
+import { M as So } from "../TablePlugin-E6UFlCgy.js";
+import { OverlayCloseButton as bo } from "./OverlayCloseButton/OverlayCloseButton.js";
+import { OverlayStepBar as Fo } from "./OverlayStepBar/OverlayStepBar.js";
+import { PageOverlay as Mo } from "./PageOverlay/PageOverlay.js";
+import { Periods as ho } from "./Periods/Periods.js";
+import { PeriodSelector as Po } from "./PeriodSelector/PeriodSelector.js";
+import { ProgrammeCard as Ao } from "./ProgrammeCard/ProgrammeCard.js";
+import { RadioButton as Ro } from "./RadioButton/RadioButton.js";
+import { Repeater as wo } from "./Repeater/Repeater.js";
+import { Rte as To, RteEditor as Eo } from "./RteEditor/RteEditor.js";
+import { SectionNotification as Ho } from "./SectionNotification/SectionNotification.js";
+import { SelectListbox as No } from "./SelectListbox/SelectListbox.js";
+import { SelectProvider as qo, useSelect as Jo } from "./SelectListbox/SelectProvider.js";
+import { Sortable as Qo } from "./Sortable/Sortable.js";
+import { Spinner as Vo } from "./Spinner/Spinner.js";
+import { StatusPill as Xo } from "./StatusPill/StatusPill.js";
+import { ToggleSwitch as Zo } from "./ToggleSwitch/ToggleSwitch.js";
+import { Tooltip as $o } from "./Tooltip/Tooltip.js";
 export {
   t as Accordion,
   p as AccordionCard,
   m as ActionList,
-  a as AppStatusBar,
+  i as AppStatusBar,
   n as Attention,
   c as Backdrop,
   B as Button,
   d as ButtonGroup,
   L as Card,
   g as Checkbox,
-  P as CheckboxButton,
+  I as CheckboxButton,
   y as CheckboxButtonBar,
   D as CheckboxTree,
-  v as Drawer,
-  O as EmptyStateDataDisplay,
-  E as FeedbackBox,
-  H as FieldHint,
-  N as Fieldset,
-  q as FormField,
-  K as FormInput,
-  U as GridRow,
-  W as HorizontalList,
-  Y as Icon,
-  _ as IconButton,
-  oo as InfoMessage,
-  to as Input,
-  po as InputField,
-  mo as Label,
-  b as LinkButton,
-  C as MenuButton,
-  ao as MenuLink,
-  no as MetaDataList,
-  co as ModalDialog,
-  so as MultiSelect,
-  So as OverlayCloseButton,
-  ko as OverlayStepBar,
-  Fo as PageOverlay,
-  Io as PeriodSelector,
-  Mo as Periods,
-  ho as ProgrammeCard,
-  Ao as RadioButton,
-  Ro as Repeater,
-  wo as Rte,
-  Oo as RteEditor,
-  Eo as SectionNotification,
-  Ho as SelectListbox,
-  No as SelectProvider,
-  Jo as Sortable,
-  Qo as Spinner,
-  Vo as StatusPill,
-  Xo as ToggleSwitch,
-  Zo as Tooltip,
-  jo as useSelect
+  v as Chip,
+  O as Drawer,
+  E as EmptyStateDataDisplay,
+  H as FeedbackBox,
+  N as FieldHint,
+  q as Fieldset,
+  K as FormField,
+  U as FormInput,
+  W as GridRow,
+  Y as HorizontalList,
+  _ as Icon,
+  oo as IconButton,
+  to as InfoMessage,
+  po as Input,
+  mo as InputField,
+  io as Label,
+  C as LinkButton,
+  k as MenuButton,
+  no as MenuLink,
+  co as MetaDataList,
+  so as ModalDialog,
+  So as MultiSelect,
+  bo as OverlayCloseButton,
+  Fo as OverlayStepBar,
+  Mo as PageOverlay,
+  Po as PeriodSelector,
+  ho as Periods,
+  Ao as ProgrammeCard,
+  Ro as RadioButton,
+  wo as Repeater,
+  To as Rte,
+  Eo as RteEditor,
+  Ho as SectionNotification,
+  No as SelectListbox,
+  qo as SelectProvider,
+  Qo as Sortable,
+  Vo as Spinner,
+  Xo as StatusPill,
+  Zo as ToggleSwitch,
+  $o as Tooltip,
+  Jo as useSelect
 };
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

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

package/dist/index.js

@@ -1,107 +1,109 @@
 import { Accordion as t } from "./components/Accordion/Accordion.js";
 import { AccordionCard as p } from "./components/AccordionCard/AccordionCard.js";
 import { ActionList as m } from "./components/ActionList/ActionList.js";
-import { AppStatusBar as a } from "./components/AppStatusBar/AppStatusBar.js";
+import { AppStatusBar as i } from "./components/AppStatusBar/AppStatusBar.js";
 import { Attention as n } from "./components/Attention/Attention.js";
 import { Backdrop as c } from "./components/Backdrop/Backdrop.js";
 import { ButtonGroup as d } from "./components/ButtonGroup/ButtonGroup.js";
 import { Button as B } from "./components/Buttons/Button.js";
-import { LinkButton as b } from "./components/Buttons/LinkButton.js";
-import { MenuButton as C } from "./components/Buttons/MenuButton.js";
+import { LinkButton as C } from "./components/Buttons/LinkButton.js";
+import { MenuButton as k } from "./components/Buttons/MenuButton.js";
 import { Card as L } from "./components/Card/Card.js";
 import { Checkbox as g } from "./components/Checkbox/Checkbox.js";
-import { CheckboxButton as P } from "./components/CheckboxButton/CheckboxButton.js";
+import { CheckboxButton as I } from "./components/CheckboxButton/CheckboxButton.js";
 import { CheckboxButtonBar as y } from "./components/CheckboxButtonBar/CheckboxButtonBar.js";
 import { CheckboxTree as D } from "./components/CheckboxTree/CheckboxTree.js";
-import { Drawer as v } from "./components/Drawer/Drawer.js";
-import { EmptyStateDataDisplay as O } from "./components/EmptyStateDataDisplay/EmptyStateDataDisplay.js";
-import { FeedbackBox as E } from "./components/FeedbackBox/FeedbackBox.js";
-import { FieldHint as H } from "./components/FieldHint/FieldHint.js";
-import { Fieldset as N } from "./components/Fieldset/Fieldset.js";
-import { FormField as q } from "./components/FormField/FormField.js";
-import { FormInput as K } from "./components/FormInput/FormInput.js";
-import { GridRow as U } from "./components/GridRow/GridRow.js";
-import { HorizontalList as W } from "./components/HorizontalList/HorizontalList.js";
-import { Icon as Y } from "./components/Icon/Icon.js";
-import { IconButton as _ } from "./components/IconButton/IconButton.js";
-import { InfoMessage as oo } from "./components/InfoMessage/InfoMessage.js";
-import { Input as to } from "./components/Input/Input.js";
-import { InputField as po } from "./components/InputField/InputField.js";
-import { Label as mo } from "./components/Label/Label.js";
-import { MenuLink as ao } from "./components/MenuLink/MenuLink.js";
-import { MetaDataList as no } from "./components/MetaDataList/MetaDataList.js";
-import { ModalDialog as co } from "./components/ModalDialog/ModalDialog.js";
-import { M as so } from "./TablePlugin-E6UFlCgy.js";
-import { OverlayCloseButton as So } from "./components/OverlayCloseButton/OverlayCloseButton.js";
-import { OverlayStepBar as ko } from "./components/OverlayStepBar/OverlayStepBar.js";
-import { PageOverlay as Fo } from "./components/PageOverlay/PageOverlay.js";
-import { Periods as Mo } from "./components/Periods/Periods.js";
-import { PeriodSelector as Io } from "./components/PeriodSelector/PeriodSelector.js";
-import { ProgrammeCard as ho } from "./components/ProgrammeCard/ProgrammeCard.js";
-import { RadioButton as Ao } from "./components/RadioButton/RadioButton.js";
-import { Repeater as Ro } from "./components/Repeater/Repeater.js";
-import { Rte as wo, RteEditor as Oo } from "./components/RteEditor/RteEditor.js";
-import { SectionNotification as Eo } from "./components/SectionNotification/SectionNotification.js";
-import { SelectListbox as Ho } from "./components/SelectListbox/SelectListbox.js";
-import { SelectProvider as No, useSelect as jo } from "./components/SelectListbox/SelectProvider.js";
-import { Sortable as Jo } from "./components/Sortable/Sortable.js";
-import { Spinner as Qo } from "./components/Spinner/Spinner.js";
-import { StatusPill as Vo } from "./components/StatusPill/StatusPill.js";
-import { ToggleSwitch as Xo } from "./components/ToggleSwitch/ToggleSwitch.js";
-import { Tooltip as Zo } from "./components/Tooltip/Tooltip.js";
+import { Chip as v } from "./components/Chip/Chip.js";
+import { Drawer as O } from "./components/Drawer/Drawer.js";
+import { EmptyStateDataDisplay as E } from "./components/EmptyStateDataDisplay/EmptyStateDataDisplay.js";
+import { FeedbackBox as H } from "./components/FeedbackBox/FeedbackBox.js";
+import { FieldHint as N } from "./components/FieldHint/FieldHint.js";
+import { Fieldset as q } from "./components/Fieldset/Fieldset.js";
+import { FormField as K } from "./components/FormField/FormField.js";
+import { FormInput as U } from "./components/FormInput/FormInput.js";
+import { GridRow as W } from "./components/GridRow/GridRow.js";
+import { HorizontalList as Y } from "./components/HorizontalList/HorizontalList.js";
+import { Icon as _ } from "./components/Icon/Icon.js";
+import { IconButton as oo } from "./components/IconButton/IconButton.js";
+import { InfoMessage as to } from "./components/InfoMessage/InfoMessage.js";
+import { Input as po } from "./components/Input/Input.js";
+import { InputField as mo } from "./components/InputField/InputField.js";
+import { Label as io } from "./components/Label/Label.js";
+import { MenuLink as no } from "./components/MenuLink/MenuLink.js";
+import { MetaDataList as co } from "./components/MetaDataList/MetaDataList.js";
+import { ModalDialog as so } from "./components/ModalDialog/ModalDialog.js";
+import { M as So } from "./TablePlugin-E6UFlCgy.js";
+import { OverlayCloseButton as bo } from "./components/OverlayCloseButton/OverlayCloseButton.js";
+import { OverlayStepBar as Fo } from "./components/OverlayStepBar/OverlayStepBar.js";
+import { PageOverlay as Mo } from "./components/PageOverlay/PageOverlay.js";
+import { Periods as ho } from "./components/Periods/Periods.js";
+import { PeriodSelector as Po } from "./components/PeriodSelector/PeriodSelector.js";
+import { ProgrammeCard as Ao } from "./components/ProgrammeCard/ProgrammeCard.js";
+import { RadioButton as Ro } from "./components/RadioButton/RadioButton.js";
+import { Repeater as wo } from "./components/Repeater/Repeater.js";
+import { Rte as To, RteEditor as Eo } from "./components/RteEditor/RteEditor.js";
+import { SectionNotification as Ho } from "./components/SectionNotification/SectionNotification.js";
+import { SelectListbox as No } from "./components/SelectListbox/SelectListbox.js";
+import { SelectProvider as qo, useSelect as Jo } from "./components/SelectListbox/SelectProvider.js";
+import { Sortable as Qo } from "./components/Sortable/Sortable.js";
+import { Spinner as Vo } from "./components/Spinner/Spinner.js";
+import { StatusPill as Xo } from "./components/StatusPill/StatusPill.js";
+import { ToggleSwitch as Zo } from "./components/ToggleSwitch/ToggleSwitch.js";
+import { Tooltip as $o } from "./components/Tooltip/Tooltip.js";
 export {
   t as Accordion,
   p as AccordionCard,
   m as ActionList,
-  a as AppStatusBar,
+  i as AppStatusBar,
   n as Attention,
   c as Backdrop,
   B as Button,
   d as ButtonGroup,
   L as Card,
   g as Checkbox,
-  P as CheckboxButton,
+  I as CheckboxButton,
   y as CheckboxButtonBar,
   D as CheckboxTree,
-  v as Drawer,
-  O as EmptyStateDataDisplay,
-  E as FeedbackBox,
-  H as FieldHint,
-  N as Fieldset,
-  q as FormField,
-  K as FormInput,
-  U as GridRow,
-  W as HorizontalList,
-  Y as Icon,
-  _ as IconButton,
-  oo as InfoMessage,
-  to as Input,
-  po as InputField,
-  mo as Label,
-  b as LinkButton,
-  C as MenuButton,
-  ao as MenuLink,
-  no as MetaDataList,
-  co as ModalDialog,
-  so as MultiSelect,
-  So as OverlayCloseButton,
-  ko as OverlayStepBar,
-  Fo as PageOverlay,
-  Io as PeriodSelector,
-  Mo as Periods,
-  ho as ProgrammeCard,
-  Ao as RadioButton,
-  Ro as Repeater,
-  wo as Rte,
-  Oo as RteEditor,
-  Eo as SectionNotification,
-  Ho as SelectListbox,
-  No as SelectProvider,
-  Jo as Sortable,
-  Qo as Spinner,
-  Vo as StatusPill,
-  Xo as ToggleSwitch,
-  Zo as Tooltip,
-  jo as useSelect
+  v as Chip,
+  O as Drawer,
+  E as EmptyStateDataDisplay,
+  H as FeedbackBox,
+  N as FieldHint,
+  q as Fieldset,
+  K as FormField,
+  U as FormInput,
+  W as GridRow,
+  Y as HorizontalList,
+  _ as Icon,
+  oo as IconButton,
+  to as InfoMessage,
+  po as Input,
+  mo as InputField,
+  io as Label,
+  C as LinkButton,
+  k as MenuButton,
+  no as MenuLink,
+  co as MetaDataList,
+  so as ModalDialog,
+  So as MultiSelect,
+  bo as OverlayCloseButton,
+  Fo as OverlayStepBar,
+  Mo as PageOverlay,
+  Po as PeriodSelector,
+  ho as Periods,
+  Ao as ProgrammeCard,
+  Ro as RadioButton,
+  wo as Repeater,
+  To as Rte,
+  Eo as RteEditor,
+  Ho as SectionNotification,
+  No as SelectListbox,
+  qo as SelectProvider,
+  Qo as Sortable,
+  Vo as Spinner,
+  Xo as StatusPill,
+  Zo as ToggleSwitch,
+  $o as Tooltip,
+  Jo as useSelect
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

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

package/package.json

@@ -2,7 +2,7 @@
   "name": "@uva-glass/component-library",
   "author": "Team Glass - Frontend vrienden",
   "private": false,
-  "version": "2.4.0",
+  "version": "2.5.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -58,9 +58,9 @@
     "@storybook/react-vite": "^8.4.7",
     "@storybook/react": "^8.4.7",
     "@storybook/test": "^8.4.7",
-    "@types/node": "^22.10.1",
-    "@types/react-dom": "^18.3.3",
-    "@types/react": "^18.3.14",
+    "@types/node": "^22.10.2",
+    "@types/react-dom": "^18.3.5",
+    "@types/react": "^18.3.16",
     "@uva-glass/eslint-config": "^1.3.1",
     "@uva-glass/stylelint-config": "^1.1.0",
     "@vitejs/plugin-react": "^4.3.4",
@@ -81,7 +81,7 @@
     "react": "^18.3.1",
     "semantic-release": "^24.2.0",
     "storybook": "^8.4.7",
-    "style-dictionary": "^4.2.0",
+    "style-dictionary": "^4.3.0",
     "stylelint-config-recommended": "^14.0.1",
     "stylelint-config-standard": "^36.0.1",
     "stylelint-order": "^6.0.4",