npm - @uva-glass/component-library - Versions diffs - 1.47.8 → 1.48.1 - Mend

@uva-glass/component-library 1.47.8 → 1.48.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (59) hide show

package/dist/assets/CheckboxTree.css ADDED Viewed

@@ -0,0 +1 @@

+ ._checkbox-tree__header_28uha_1{display:block;font-weight:var(--semibold);margin-bottom:.75rem;text-align:left}._checkbox-tree__branch_28uha_8{list-style:none;-webkit-user-select:none;user-select:none}._checkbox-tree__branch_28uha_8[aria-expanded=false]{margin-bottom:.5rem}._checkbox-tree__branch_28uha_8 input[type=checkbox]:disabled+label{color:var(--color-grey-300)}._checkbox-tree__branch--icon_28uha_21{pointer-events:none;transform:rotate(0);transition:transform .3s ease-out}._checkbox-tree__branch--icon--expanded_28uha_27{transform:rotate(90deg);transition:transform .3s ease-in}._checkbox-tree__branch--formfield_28uha_32{align-items:center;display:flex;flex-direction:row;gap:.5rem}._checkbox-tree__leaves_28uha_39{display:none;flex-direction:column;gap:.5rem;list-style:none;margin:.5rem 0 .5rem 1rem;-webkit-user-select:none;user-select:none}._checkbox-tree__leaves--expanded_28uha_48{display:flex}._checkbox-tree__leaf_28uha_52{align-items:center;display:flex;flex-direction:row;gap:0 .5rem;margin-left:1.5rem;-webkit-user-select:none;user-select:none}._checkbox-tree__leaf_28uha_52 input[type=checkbox]:disabled+label{color:var(--color-grey-300)}

package/dist/components/Accordion/Accordion.d.ts CHANGED Viewed

@@ -4,8 +4,8 @@ export interface AccordionProps {
     title: ReactNode;
     /** Main content (hidden when expanded is false). */
     content: ReactNode;
-    /** Indicator if Accordion is should be expanded by default.*/
+    /** Indicator if Accordion should be expanded by default.*/
     expanded?: boolean;
 }
-/** A controller for accordion dispay toggeling of content with click on a title. */
+/** A controller for accordion display toggling of content with click on a title. */
 export declare const Accordion: ({ title, content, expanded }: AccordionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Accordion/Accordion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Accordion.js","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { KeyboardEvent, ReactNode } from 'react';\n\nimport styles from './Accordion.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface AccordionProps {\n /** Clickable title (always visible). /\n title: ReactNode;\n /* Main content (hidden when expanded is false). /\n content: ReactNode;\n /* Indicator if Accordion is should be expanded by default./\n expanded?: boolean;\n}\n\n/* A controller for accordion ~~dispay~~ ~~toggeling~~ of content with click on a title. */\nexport const Accordion = ({ title, content, expanded = false }: AccordionProps) => {\n const [isExpanded, setIsExpanded] = useState(expanded);\n const accordionId = useId();\n\n function onKeyUp(event: KeyboardEvent<HTMLDivElement>) {\n const { code } = event;\n\n if (code === 'Enter' \|\| code === 'Space') {\n setIsExpanded(!isExpanded);\n }\n }\n\n return (\n <div className={styles['accordion']}>\n <div\n className={styles['accordion__title']}\n id={accordionId}\n role=\"button\"\n tabIndex={0}\n onClick={() => setIsExpanded(!isExpanded)}\n onKeyUp={onKeyUp}\n aria-expanded={isExpanded}\n >\n {title}\n <Icon\n className={clsx(styles['accordion__title-icon'], { [styles['accordion__title-icon--expanded']]: isExpanded })}\n name=\"CheveronLeft\"\n size={16}\n />\n </div>\n <div\n aria-labelledby={accordionId}\n className={clsx(styles.accordion__content, { [styles['accordion__content--expanded']]: isExpanded })}\n >\n {content}\n </div>\n </div>\n );\n};\n"],"names":["Accordion","title","content","expanded","isExpanded","setIsExpanded","useState","accordionId","useId","onKeyUp","event","code","jsxs","styles","jsx","Icon","clsx"],"mappings":";;;;;;;;;;;GAmBaA,IAAY,CAAC,EAAE,OAAAC,GAAO,SAAAC,GAAS,UAAAC,IAAW,SAA4B;AACjF,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAASH,CAAQ,GAC/CI,IAAcC;AAEpB,WAASC,EAAQC,GAAsC;AAC/C,UAAA,EAAE,MAAAC,EAAS,IAAAD;AAEb,KAAAC,MAAS,WAAWA,MAAS,YAC/BN,EAAc,CAACD,CAAU;AAAA,EAE7B;AAEA,SACG,gBAAAQ,EAAA,OAAA,EAAI,WAAWC,EAAO,WACrB,UAAA;AAAA,IAAA,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,EAAO;AAAA,QAClB,IAAIN;AAAA,QACJ,MAAK;AAAA,QACL,UAAU;AAAA,QACV,SAAS,MAAMF,EAAc,CAACD,CAAU;AAAA,QACxC,SAAAK;AAAA,QACA,iBAAeL;AAAA,QAEd,UAAA;AAAA,UAAAH;AAAA,UACD,gBAAAa;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,WAAWC,EAAKH,EAAO,uBAAuB,GAAG,EAAE,CAACA,EAAO,iCAAiC,CAAC,GAAGT,GAAY;AAAA,cAC5G,MAAK;AAAA,cACL,MAAM;AAAA,YAAA;AAAA,UACR;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,IACA,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,mBAAiBP;AAAA,QACjB,WAAWS,EAAKH,EAAO,oBAAoB,EAAE,CAACA,EAAO,8BAA8B,CAAC,GAAGT,GAAY;AAAA,QAElG,UAAAF;AAAA,MAAA;AAAA,IACH;AAAA,EACF,EAAA,CAAA;AAEJ;"}
1	+ {"version":3,"file":"Accordion.js","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { KeyboardEvent, ReactNode } from 'react';\n\nimport styles from './Accordion.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface AccordionProps {\n /** Clickable title (always visible). /\n title: ReactNode;\n /* Main content (hidden when expanded is false). /\n content: ReactNode;\n /* Indicator if Accordion should be expanded by default./\n expanded?: boolean;\n}\n\n/* A controller for accordion display toggling of content with click on a title. */\nexport const Accordion = ({ title, content, expanded = false }: AccordionProps) => {\n const [isExpanded, setIsExpanded] = useState(expanded);\n const accordionId = useId();\n\n function onKeyUp(event: KeyboardEvent<HTMLDivElement>) {\n const { code } = event;\n\n if (code === 'Enter' \|\| code === 'Space') {\n setIsExpanded(!isExpanded);\n }\n }\n\n return (\n <div className={styles['accordion']}>\n <div\n className={styles['accordion__title']}\n id={accordionId}\n role=\"button\"\n tabIndex={0}\n onClick={() => setIsExpanded(!isExpanded)}\n onKeyUp={onKeyUp}\n aria-expanded={isExpanded}\n >\n {title}\n <Icon\n className={clsx(styles['accordion__title-icon'], { [styles['accordion__title-icon--expanded']]: isExpanded })}\n name=\"CheveronLeft\"\n size={16}\n />\n </div>\n <div\n aria-labelledby={accordionId}\n className={clsx(styles.accordion__content, { [styles['accordion__content--expanded']]: isExpanded })}\n >\n {content}\n </div>\n </div>\n );\n};\n"],"names":["Accordion","title","content","expanded","isExpanded","setIsExpanded","useState","accordionId","useId","onKeyUp","event","code","jsxs","styles","jsx","Icon","clsx"],"mappings":";;;;;;;;;;;GAmBaA,IAAY,CAAC,EAAE,OAAAC,GAAO,SAAAC,GAAS,UAAAC,IAAW,SAA4B;AACjF,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAASH,CAAQ,GAC/CI,IAAcC;AAEpB,WAASC,EAAQC,GAAsC;AAC/C,UAAA,EAAE,MAAAC,EAAS,IAAAD;AAEb,KAAAC,MAAS,WAAWA,MAAS,YAC/BN,EAAc,CAACD,CAAU;AAAA,EAE7B;AAEA,SACG,gBAAAQ,EAAA,OAAA,EAAI,WAAWC,EAAO,WACrB,UAAA;AAAA,IAAA,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,EAAO;AAAA,QAClB,IAAIN;AAAA,QACJ,MAAK;AAAA,QACL,UAAU;AAAA,QACV,SAAS,MAAMF,EAAc,CAACD,CAAU;AAAA,QACxC,SAAAK;AAAA,QACA,iBAAeL;AAAA,QAEd,UAAA;AAAA,UAAAH;AAAA,UACD,gBAAAa;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,WAAWC,EAAKH,EAAO,uBAAuB,GAAG,EAAE,CAACA,EAAO,iCAAiC,CAAC,GAAGT,GAAY;AAAA,cAC5G,MAAK;AAAA,cACL,MAAM;AAAA,YAAA;AAAA,UACR;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,IACA,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,mBAAiBP;AAAA,QACjB,WAAWS,EAAKH,EAAO,oBAAoB,EAAE,CAACA,EAAO,8BAA8B,CAAC,GAAGT,GAAY;AAAA,QAElG,UAAAF;AAAA,MAAA;AAAA,IACH;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/components/ActionList/ActionList.d.ts CHANGED Viewed

@@ -2,10 +2,16 @@ import { ReactElement } from 'react';
 import { IconProps } from 'components/Icon';
 import { UIButtonVariant } from 'types/UserInterface';
 export interface ActionListProps {
+    /** The label that is displayed before the icon. */
     label: string;
+    /** The icon that is shown in front of the label. */
     prefixIcon?: IconProps['name'];
+    /** The icon that is shown to toggle the menu. If none is specified, CheveronUp and CheveronDown is used depending on whether the menu is opened or closed. */
     iconName?: IconProps['name'];
+    /** Determines the button variant. */
     variant?: UIButtonVariant;
+    /** The child component(s). */
     children: ReactElement | ReactElement[];
 }
+/** A component to show an action list to toggle a menu. */
 export declare function ActionList({ label, prefixIcon, iconName, variant, children }: ActionListProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ActionList/ActionList.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { jsxs as k, jsx as c } from "react/jsx-runtime";
 import { c as T } from "../../clsx-OuTLNxxd.js";
 import { useId as U, useRef as l, Children as w, useState as b, useEffect as D } from "react";
-import { MenuButton as $ } from "../MenuButton/MenuButton.js";
 import { Icon as m } from "../Icon/Icon.js";
+import { MenuButton as $ } from "../MenuButton/MenuButton.js";
 import '../../assets/ActionList.css';const p = {
   "action-list": "_action-list_1vi7f_1",
   "action-list--open": "_action-list--open_1vi7f_13",

package/dist/components/ActionList/ActionList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ActionList.js","sources":["../../../src/components/ActionList/ActionList.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { Children, useEffect, useId, useRef, useState } from 'react';\n\nimport type { KeyboardEvent, ~~ReactElement,~~ MouseEvent as ReactMouseEvent } from 'react';\nimport type { IconProps } from 'components/Icon';\nimport type { UIButtonVariant } from 'types/UserInterface';\n\nimport styles from './ActionList.module.css';\n\nimport { ~~MenuButton~~ } from 'components/~~MenuButton~~';\nimport { ~~Icon~~ } from 'components/~~Icon~~';\n\nexport interface ActionListProps {\n label: string;\n prefixIcon?: IconProps['name'];\n iconName?: IconProps['name'];\n variant?: UIButtonVariant;\n children: ReactElement \| ReactElement[];\n}\n\nconst inactiveIndex = -1;\nconst indexIncrement = 1;\n\nexport function ActionList({ label, prefixIcon, iconName, variant = 'secondary', children }: ActionListProps) {\n const listId = useId();\n const triggerRef = useRef<HTMLButtonElement>(null);\n const listRef = useRef<HTMLDivElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n\n const numberOfChildren = Children.count(children);\n\n const [activeIndex, setActiveIndex] = useState(inactiveIndex);\n const [isOpen, setIsOpen] = useState(false);\n\n function open() {\n setIsOpen(true);\n\n document.addEventListener('click', onClickOutside, { once: true, capture: true });\n }\n\n function close(event?: ReactMouseEvent<HTMLDivElement>) {\n // When a click occurs on an element that is not an immediate descendant of the action list container\n // (can happen when a modal window is triggered from a button in the action list), the setIsOpen state\n // handler should not be called, because this causes a re-render of the entire component and can lead\n // to undesired effects, like a select element closing immediately after it has been clicked.\n if (event && containerRef.current && !containerRef.current.contains(event.target as Node)) {\n return;\n }\n\n setActiveIndex(inactiveIndex);\n setIsOpen(false);\n\n document.removeEventListener('click', onClickOutside, { capture: true });\n }\n\n function toggle() {\n if (isOpen) close();\n else open();\n }\n\n function onKeyDown(event: KeyboardEvent) {\n if (!isOpen) return;\n\n const eventPreventCodes = ['ArrowUp', 'ArrowDown', 'Home', 'End'];\n\n if (eventPreventCodes.includes(event.code)) {\n // prevent page from scrolling when navigating through items in list\n event.preventDefault();\n }\n\n if (event.code === 'Tab') {\n close();\n }\n }\n\n function onKeyUp(event: KeyboardEvent) {\n if (event.code === 'Space' \|\| event.key === 'Enter') {\n if (event.target === triggerRef.current) {\n toggle();\n } else if (event.key === 'Enter' && event.target !== listRef.current) {\n if ('firstChild' in event.target) {\n const firstChild = event.target.firstChild as HTMLButtonElement;\n\n firstChild.click();\n }\n }\n }\n\n if (event.code === 'Escape') close();\n\n if (event.code === 'ArrowUp') {\n setActiveIndex((prevState) => {\n if (prevState === 0) return numberOfChildren - indexIncrement;\n\n return prevState - indexIncrement;\n });\n }\n\n if (event.code === 'ArrowDown') {\n setActiveIndex((prevState) => {\n if (prevState === numberOfChildren - indexIncrement) return 0;\n\n return prevState + indexIncrement;\n });\n }\n\n if (event.code === 'Home') {\n setActiveIndex(0);\n }\n\n if (event.code === 'End') {\n setActiveIndex(numberOfChildren - indexIncrement);\n }\n }\n\n const onClickOutside = (event: MouseEvent) => {\n const { target } = event;\n\n if (!target \|\| !containerRef.current) return;\n\n if (!containerRef.current.contains(target as Node)) {\n close();\n }\n };\n\n useEffect(() => {\n if (activeIndex < 0 \|\| !listRef.current) return;\n\n const listItem = listRef.current.children.item(activeIndex);\n\n if (listItem) {\n (listItem as HTMLDivElement).focus();\n }\n }, [activeIndex]);\n\n useEffect(() => {\n if (!listRef.current \|\| !listRef.current.hasChildNodes()) return;\n\n Array.from(listRef.current.children)\n .filter((overlayChild) => overlayChild.nodeType === Node.ELEMENT_NODE && overlayChild.hasChildNodes())\n .forEach((overlayChild) => {\n Array.from(overlayChild.children)\n .filter((childOfChild) => childOfChild.nodeType === Node.ELEMENT_NODE)\n .forEach((childOfChild) => {\n // internal children may be buttons and can get focus when tab is pressed; preventing those elements\n // from getting focus so that list can be tabbed over and traversed with arrow keys\n childOfChild.setAttribute('tabIndex', '-1');\n });\n });\n }, [children]);\n\n return (\n <div className={styles['action-list-container']} ref={containerRef}>\n <MenuButton onClick={toggle} onKeyDown={onKeyDown} onKeyUp={onKeyUp} buttonRef={triggerRef} variant={variant}>\n {prefixIcon && <Icon size={24} name={prefixIcon} />}\n {label}\n {iconName ? (\n <Icon size={24} name={iconName} />\n ) : (\n <Icon size={16} name={isOpen ? 'CheveronUp' : 'CheveronDown'} />\n )}\n </MenuButton>\n <div\n aria-activedescendant={`${listId}-child-${activeIndex}`}\n aria-label={label}\n className={clsx(styles['action-list'], {\n [styles['action-list--open']]: isOpen,\n })}\n onClickCapture={close}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n ref={listRef}\n role=\"menu\"\n tabIndex={-1}\n >\n {Children.map(children, (child, index) => (\n <div key={`${listId}-child-${index}`} role=\"menuitem\" tabIndex={-1}>\n {child}\n </div>\n ))}\n </div>\n </div>\n );\n}\n"],"names":["inactiveIndex","indexIncrement","ActionList","label","prefixIcon","iconName","variant","children","listId","useId","triggerRef","useRef","listRef","containerRef","numberOfChildren","Children","activeIndex","setActiveIndex","useState","isOpen","setIsOpen","open","onClickOutside","close","event","toggle","onKeyDown","onKeyUp","prevState","target","useEffect","listItem","overlayChild","childOfChild","styles","jsxs","MenuButton","jsx","Icon","clsx","child","index"],"mappings":";;;;;;;;;~~GAoBMA~~,IAAgB,IAChBC,IAAiB;~~AAEP~~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"}
1	+ {"version":3,"file":"ActionList.js","sources":["../../../src/components/ActionList/ActionList.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { Children, useEffect, useId, useRef, useState } from 'react';\n\nimport type { KeyboardEvent, MouseEvent as ReactMouseEvent, ReactElement } from 'react';\nimport type { IconProps } from 'components/Icon';\nimport type { UIButtonVariant } from 'types/UserInterface';\n\nimport styles from './ActionList.module.css';\n\nimport { Icon } from 'components/Icon';\nimport { MenuButton } from 'components/MenuButton';\n\nexport interface ActionListProps {\n /** The label that is displayed before the icon. /\n label: string;\n /* The icon that is shown in front of the label. /\n prefixIcon?: IconProps['name'];\n /* The icon that is shown to toggle the menu. If none is specified, CheveronUp and CheveronDown is used depending on whether the menu is opened or closed. /\n iconName?: IconProps['name'];\n /* Determines the button variant. /\n variant?: UIButtonVariant;\n /* The child component(s). /\n children: ReactElement \| ReactElement[];\n}\n\nconst inactiveIndex = -1;\nconst indexIncrement = 1;\n\n/* A component to show an action list to toggle a menu. */\nexport function ActionList({ label, prefixIcon, iconName, variant = 'secondary', children }: ActionListProps) {\n const listId = useId();\n const triggerRef = useRef<HTMLButtonElement>(null);\n const listRef = useRef<HTMLDivElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n\n const numberOfChildren = Children.count(children);\n\n const [activeIndex, setActiveIndex] = useState(inactiveIndex);\n const [isOpen, setIsOpen] = useState(false);\n\n function open() {\n setIsOpen(true);\n\n document.addEventListener('click', onClickOutside, { once: true, capture: true });\n }\n\n function close(event?: ReactMouseEvent<HTMLDivElement>) {\n // When a click occurs on an element that is not an immediate descendant of the action list container\n // (can happen when a modal window is triggered from a button in the action list), the setIsOpen state\n // handler should not be called, because this causes a re-render of the entire component and can lead\n // to undesired effects, like a select element closing immediately after it has been clicked.\n if (event && containerRef.current && !containerRef.current.contains(event.target as Node)) {\n return;\n }\n\n setActiveIndex(inactiveIndex);\n setIsOpen(false);\n\n document.removeEventListener('click', onClickOutside, { capture: true });\n }\n\n function toggle() {\n if (isOpen) close();\n else open();\n }\n\n function onKeyDown(event: KeyboardEvent) {\n if (!isOpen) return;\n\n const eventPreventCodes = ['ArrowUp', 'ArrowDown', 'Home', 'End'];\n\n if (eventPreventCodes.includes(event.code)) {\n // prevent page from scrolling when navigating through items in list\n event.preventDefault();\n }\n\n if (event.code === 'Tab') {\n close();\n }\n }\n\n function onKeyUp(event: KeyboardEvent) {\n if (event.code === 'Space' \|\| event.key === 'Enter') {\n if (event.target === triggerRef.current) {\n toggle();\n } else if (event.key === 'Enter' && event.target !== listRef.current) {\n if ('firstChild' in event.target) {\n const firstChild = event.target.firstChild as HTMLButtonElement;\n\n firstChild.click();\n }\n }\n }\n\n if (event.code === 'Escape') close();\n\n if (event.code === 'ArrowUp') {\n setActiveIndex((prevState) => {\n if (prevState === 0) return numberOfChildren - indexIncrement;\n\n return prevState - indexIncrement;\n });\n }\n\n if (event.code === 'ArrowDown') {\n setActiveIndex((prevState) => {\n if (prevState === numberOfChildren - indexIncrement) return 0;\n\n return prevState + indexIncrement;\n });\n }\n\n if (event.code === 'Home') {\n setActiveIndex(0);\n }\n\n if (event.code === 'End') {\n setActiveIndex(numberOfChildren - indexIncrement);\n }\n }\n\n const onClickOutside = (event: MouseEvent) => {\n const { target } = event;\n\n if (!target \|\| !containerRef.current) return;\n\n if (!containerRef.current.contains(target as Node)) {\n close();\n }\n };\n\n useEffect(() => {\n if (activeIndex < 0 \|\| !listRef.current) return;\n\n const listItem = listRef.current.children.item(activeIndex);\n\n if (listItem) {\n (listItem as HTMLDivElement).focus();\n }\n }, [activeIndex]);\n\n useEffect(() => {\n if (!listRef.current \|\| !listRef.current.hasChildNodes()) return;\n\n Array.from(listRef.current.children)\n .filter((overlayChild) => overlayChild.nodeType === Node.ELEMENT_NODE && overlayChild.hasChildNodes())\n .forEach((overlayChild) => {\n Array.from(overlayChild.children)\n .filter((childOfChild) => childOfChild.nodeType === Node.ELEMENT_NODE)\n .forEach((childOfChild) => {\n // internal children may be buttons and can get focus when tab is pressed; preventing those elements\n // from getting focus so that list can be tabbed over and traversed with arrow keys\n childOfChild.setAttribute('tabIndex', '-1');\n });\n });\n }, [children]);\n\n return (\n <div className={styles['action-list-container']} ref={containerRef}>\n <MenuButton onClick={toggle} onKeyDown={onKeyDown} onKeyUp={onKeyUp} buttonRef={triggerRef} variant={variant}>\n {prefixIcon && <Icon size={24} name={prefixIcon} />}\n {label}\n {iconName ? (\n <Icon size={24} name={iconName} />\n ) : (\n <Icon size={16} name={isOpen ? 'CheveronUp' : 'CheveronDown'} />\n )}\n </MenuButton>\n <div\n aria-activedescendant={`${listId}-child-${activeIndex}`}\n aria-label={label}\n className={clsx(styles['action-list'], {\n [styles['action-list--open']]: isOpen,\n })}\n onClickCapture={close}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n ref={listRef}\n role=\"menu\"\n tabIndex={-1}\n >\n {Children.map(children, (child, index) => (\n <div key={`${listId}-child-${index}`} role=\"menuitem\" tabIndex={-1}>\n {child}\n </div>\n ))}\n </div>\n </div>\n );\n}\n"],"names":["inactiveIndex","indexIncrement","ActionList","label","prefixIcon","iconName","variant","children","listId","useId","triggerRef","useRef","listRef","containerRef","numberOfChildren","Children","activeIndex","setActiveIndex","useState","isOpen","setIsOpen","open","onClickOutside","close","event","toggle","onKeyDown","onKeyUp","prevState","target","useEffect","listItem","overlayChild","childOfChild","styles","jsxs","MenuButton","jsx","Icon","clsx","child","index"],"mappings":"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"}

package/dist/components/ActionList/ActionList.stories.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import { ActionList as i } from "./ActionList.js";
+import { ActionList as n } from "./ActionList.js";
 const o = `
   <ActionList iconName={iconName} variant={variant} label="">
     {mockActions.map(({ action, value }) => (
@@ -8,7 +8,7 @@ const o = `
   </ActionList>
 `, l = {
   title: "Atoms/ActionList",
-  component: i,
+  component: n,
   argTypes: {
     variant: {
       options: ["primary", "secondary", "destructive-primary", "destructive-secondary", "blank", "blank-icon"],
@@ -16,9 +16,10 @@ const o = `
     }
   },
   parameters: {
+    inspectComponent: n,
     codeString: o
   }
-}, e = (n) => /* @__PURE__ */ t("div", { style: { marginLeft: "5rem", width: "40px" }, children: /* @__PURE__ */ t(i, { ...n }) }), c = {
+}, e = (i) => /* @__PURE__ */ t("div", { style: { marginLeft: "5rem", width: "40px" }, children: /* @__PURE__ */ t(n, { ...i }) }), c = {
   label: "",
   variant: "blank-icon",
   iconName: "EllipsisVertical",

package/dist/components/ActionList/ActionList.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ActionList.stories.js","sources":["../../../src/components/ActionList/ActionList.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { ActionListProps } from './ActionList';\n\nimport { ActionList } from './ActionList';\n\nconst codeString = `\n <ActionList iconName={iconName} variant={variant} label=\"\">\n {mockActions.map(({ action, value }) => (\n <button type=\"button\" onClick={() => onActionClick({ action, id })} key={value}> {action.title} </button>\n ))}\n </ActionList>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/ActionList',\n component: ActionList,\n argTypes: {\n variant: {\n options: ['primary', 'secondary', 'destructive-primary', 'destructive-secondary', 'blank', 'blank-icon'],\n control: { type: 'radio' },\n },\n },\n parameters: {\n codeString: codeString,\n },\n} as Meta<ActionListProps>;\n\nconst Template: StoryFn<ActionListProps> = (args) => (\n <div style={{ marginLeft: '5rem', width: '40px' }}>\n <ActionList {...args} />\n </div>\n);\n\nconst defaultArgs: Partial<ActionListProps> = {\n label: '',\n variant: 'blank-icon',\n iconName: 'EllipsisVertical',\n children: [\n <button key=\"1\" type=\"button\">\n Action 1\n </button>,\n <button key=\"2\" type=\"button\">\n Action 2\n </button>,\n <button key=\"3\" type=\"button\">\n Action 3\n </button>,\n ],\n};\n\nexport const ActionListExample = Template.bind({});\nActionListExample.args = {\n ...defaultArgs,\n};\n"],"names":["codeString","ActionList_stories","ActionList","Template","args","jsx","defaultArgs","ActionListExample"],"mappings":";;AAKA,MAAMA,IAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,WAAW,aAAa,uBAAuB,yBAAyB,SAAS,YAAY;AAAA,MACvG,SAAS,EAAE,MAAM,QAAQ;AAAA,IAC3B;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,YAAAF;AAAA,EACF;AACF,GAEMG,IAAqC,CAACC,MACzC,gBAAAC,EAAA,OAAA,EAAI,OAAO,EAAE,YAAY,QAAQ,OAAO,OACvC,GAAA,UAAA,gBAAAA,EAACH,GAAY,EAAA,GAAGE,GAAM,EACxB,CAAA,GAGIE,IAAwC;AAAA,EAC5C,OAAO;AAAA,EACP,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AAAA,IACP,gBAAAD,EAAA,UAAA,EAAe,MAAK,UAAS,wBAAlB,GAEZ;AAAA,IACC,gBAAAA,EAAA,UAAA,EAAe,MAAK,UAAS,wBAAlB,GAEZ;AAAA,IACC,gBAAAA,EAAA,UAAA,EAAe,MAAK,UAAS,wBAAlB,GAEZ;AAAA,EACF;AACF,GAEaE,IAAoBJ,EAAS,KAAK,EAAE;AACjDI,EAAkB,OAAO;AAAA,EACvB,GAAGD;AACL;"}
1	+ {"version":3,"file":"ActionList.stories.js","sources":["../../../src/components/ActionList/ActionList.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { ActionListProps } from './ActionList';\n\nimport { ActionList } from './ActionList';\n\nconst codeString = `\n <ActionList iconName={iconName} variant={variant} label=\"\">\n {mockActions.map(({ action, value }) => (\n <button type=\"button\" onClick={() => onActionClick({ action, id })} key={value}> {action.title} </button>\n ))}\n </ActionList>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/ActionList',\n component: ActionList,\n argTypes: {\n variant: {\n options: ['primary', 'secondary', 'destructive-primary', 'destructive-secondary', 'blank', 'blank-icon'],\n control: { type: 'radio' },\n },\n },\n parameters: {\n inspectComponent: ActionList,\n codeString: codeString,\n },\n} as Meta<ActionListProps>;\n\nconst Template: StoryFn<ActionListProps> = (args) => (\n <div style={{ marginLeft: '5rem', width: '40px' }}>\n <ActionList {...args} />\n </div>\n);\n\nconst defaultArgs: Partial<ActionListProps> = {\n label: '',\n variant: 'blank-icon',\n iconName: 'EllipsisVertical',\n children: [\n <button key=\"1\" type=\"button\">\n Action 1\n </button>,\n <button key=\"2\" type=\"button\">\n Action 2\n </button>,\n <button key=\"3\" type=\"button\">\n Action 3\n </button>,\n ],\n};\n\nexport const ActionListExample = Template.bind({});\nActionListExample.args = {\n ...defaultArgs,\n};\n"],"names":["codeString","ActionList_stories","ActionList","Template","args","jsx","defaultArgs","ActionListExample"],"mappings":";;AAKA,MAAMA,IAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,WAAW,aAAa,uBAAuB,yBAAyB,SAAS,YAAY;AAAA,MACvG,SAAS,EAAE,MAAM,QAAQ;AAAA,IAC3B;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EACF;AACF,GAEMG,IAAqC,CAACC,MACzC,gBAAAC,EAAA,OAAA,EAAI,OAAO,EAAE,YAAY,QAAQ,OAAO,OACvC,GAAA,UAAA,gBAAAA,EAACH,GAAY,EAAA,GAAGE,GAAM,EACxB,CAAA,GAGIE,IAAwC;AAAA,EAC5C,OAAO;AAAA,EACP,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AAAA,IACP,gBAAAD,EAAA,UAAA,EAAe,MAAK,UAAS,wBAAlB,GAEZ;AAAA,IACC,gBAAAA,EAAA,UAAA,EAAe,MAAK,UAAS,wBAAlB,GAEZ;AAAA,IACC,gBAAAA,EAAA,UAAA,EAAe,MAAK,UAAS,wBAAlB,GAEZ;AAAA,EACF;AACF,GAEaE,IAAoBJ,EAAS,KAAK,EAAE;AACjDI,EAAkB,OAAO;AAAA,EACvB,GAAGD;AACL;"}

package/dist/components/AppStatusBar/AppStatusBar.d.ts CHANGED Viewed

@@ -1,5 +1,8 @@
 export interface AppStatusBarProps {
+    /** The message to be displayed in the status bar. */
     message: string;
+    /** Determines the color of the bar. */
     severity: 'info' | 'warning' | 'error';
 }
+/** A component to display a general status. */
 export declare const AppStatusBar: ({ message, severity }: AppStatusBarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/AppStatusBar/AppStatusBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AppStatusBar.js","sources":["../../../src/components/AppStatusBar/AppStatusBar.tsx"],"sourcesContent":["import classNames from 'clsx';\n\nimport styles from './AppStatusBar.module.css';\n\nexport interface AppStatusBarProps {\n message: string;\n severity: 'info' \| 'warning' \| 'error';\n}\n\nexport const AppStatusBar = ({ message, severity }: AppStatusBarProps) => (\n <div className={classNames(styles['app-status-bar'], styles[`app-status-bar--${severity.toLowerCase()}`])}>\n <p className={styles['app-status-bar__message']} dangerouslySetInnerHTML={{ __html: message }} />\n </div>\n);\n"],"names":["AppStatusBar","message","severity","jsx","classNames","styles"],"mappings":";;;;;;;;~~GASaA~~,IAAe,CAAC,EAAE,SAAAC,GAAS,UAAAC,QACtC,gBAAAC,EAAC,OAAI,EAAA,WAAWC,EAAWC,EAAO,gBAAgB,GAAGA,EAAO,mBAAmBH,EAAS,YAAY,CAAC,EAAE,CAAC,GACtG,UAAA,gBAAAC,EAAC,OAAE,WAAWE,EAAO,yBAAyB,GAAG,yBAAyB,EAAE,QAAQJ,EAAA,EAAW,CAAA,EACjG,CAAA;"}
1	+ {"version":3,"file":"AppStatusBar.js","sources":["../../../src/components/AppStatusBar/AppStatusBar.tsx"],"sourcesContent":["import classNames from 'clsx';\n\nimport styles from './AppStatusBar.module.css';\n\nexport interface AppStatusBarProps {\n /** The message to be displayed in the status bar. /\n message: string;\n /* Determines the color of the bar. /\n severity: 'info' \| 'warning' \| 'error';\n}\n\n/* A component to display a general status. */\nexport const AppStatusBar = ({ message, severity }: AppStatusBarProps) => (\n <div className={classNames(styles['app-status-bar'], styles[`app-status-bar--${severity.toLowerCase()}`])}>\n <p className={styles['app-status-bar__message']} dangerouslySetInnerHTML={{ __html: message }} />\n </div>\n);\n"],"names":["AppStatusBar","message","severity","jsx","classNames","styles"],"mappings":";;;;;;;;GAYaA,IAAe,CAAC,EAAE,SAAAC,GAAS,UAAAC,QACtC,gBAAAC,EAAC,OAAI,EAAA,WAAWC,EAAWC,EAAO,gBAAgB,GAAGA,EAAO,mBAAmBH,EAAS,YAAY,CAAC,EAAE,CAAC,GACtG,UAAA,gBAAAC,EAAC,OAAE,WAAWE,EAAO,yBAAyB,GAAG,yBAAyB,EAAE,QAAQJ,EAAA,EAAW,CAAA,EACjG,CAAA;"}

package/dist/components/AppStatusBar/AppStatusBar.stories.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { jsx as s } from "react/jsx-runtime";
 import { AppStatusBar as e } from "./AppStatusBar.js";
-const r = "<AppStatusBar severity={severity} message={message} key={key} />", m = {
+const o = "<AppStatusBar severity={severity} message={message} key={key} />", m = {
   title: "Atoms/AppStatusBar",
   component: e,
   argTypes: {
@@ -10,17 +10,18 @@ const r = "<AppStatusBar severity={severity} message={message} key={key} />", m
     }
   },
   parameters: {
-    codeString: r
+    inspectComponent: e,
+    codeString: o
   }
-}, o = (t) => /* @__PURE__ */ s(e, { ...t }), a = {
+}, r = (t) => /* @__PURE__ */ s(e, { ...t }), n = {
   message: "Dit is de ontwikkelomgeving van Storybook. Hier kun je componenten bekijken en testen!.",
   severity: "warning"
-}, n = o.bind({});
-n.args = {
-  ...a
+}, a = r.bind({});
+a.args = {
+  ...n
 };
 export {
-  n as AppStatusBarExample,
+  a as AppStatusBarExample,
   m as default
 };
 //# sourceMappingURL=AppStatusBar.stories.js.map

package/dist/components/AppStatusBar/AppStatusBar.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AppStatusBar.stories.js","sources":["../../../src/components/AppStatusBar/AppStatusBar.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { AppStatusBarProps } from './AppStatusBar';\n\nimport { AppStatusBar } from './AppStatusBar';\n\nconst codeString = '<AppStatusBar severity={severity} message={message} key={key} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/AppStatusBar',\n component: AppStatusBar,\n argTypes: {\n severity: {\n options: ['info', 'warning', 'error'],\n control: { type: 'radio' },\n },\n },\n parameters: {\n codeString: codeString,\n },\n} as Meta<AppStatusBarProps>;\n\nconst Template: StoryFn<AppStatusBarProps> = (args) => <AppStatusBar {...args} />;\n\nconst defaultArgs: Partial<AppStatusBarProps> = {\n message: 'Dit is de ontwikkelomgeving van Storybook. Hier kun je componenten bekijken en testen!.',\n severity: 'warning',\n};\n\nexport const AppStatusBarExample = Template.bind({});\nAppStatusBarExample.args = {\n ...defaultArgs,\n};\n"],"names":["codeString","AppStatusBar_stories","AppStatusBar","Template","args","jsx","defaultArgs","AppStatusBarExample"],"mappings":";;AAKA,MAAMA,IAAa,oEAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,UAAU;AAAA,MACR,SAAS,CAAC,QAAQ,WAAW,OAAO;AAAA,MACpC,SAAS,EAAE,MAAM,QAAQ;AAAA,IAC3B;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,YAAAF;AAAA,EACF;AACF,GAEMG,IAAuC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAc,GAAGE,EAAM,CAAA,GAEzEE,IAA0C;AAAA,EAC9C,SAAS;AAAA,EACT,UAAU;AACZ,GAEaC,IAAsBJ,EAAS,KAAK,EAAE;AACnDI,EAAoB,OAAO;AAAA,EACzB,GAAGD;AACL;"}
1	+ {"version":3,"file":"AppStatusBar.stories.js","sources":["../../../src/components/AppStatusBar/AppStatusBar.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { AppStatusBarProps } from './AppStatusBar';\n\nimport { AppStatusBar } from './AppStatusBar';\n\nconst codeString = '<AppStatusBar severity={severity} message={message} key={key} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/AppStatusBar',\n component: AppStatusBar,\n argTypes: {\n severity: {\n options: ['info', 'warning', 'error'],\n control: { type: 'radio' },\n },\n },\n parameters: {\n inspectComponent: AppStatusBar,\n codeString: codeString,\n },\n} as Meta<AppStatusBarProps>;\n\nconst Template: StoryFn<AppStatusBarProps> = (args) => <AppStatusBar {...args} />;\n\nconst defaultArgs: Partial<AppStatusBarProps> = {\n message: 'Dit is de ontwikkelomgeving van Storybook. Hier kun je componenten bekijken en testen!.',\n severity: 'warning',\n};\n\nexport const AppStatusBarExample = Template.bind({});\nAppStatusBarExample.args = {\n ...defaultArgs,\n};\n"],"names":["codeString","AppStatusBar_stories","AppStatusBar","Template","args","jsx","defaultArgs","AppStatusBarExample"],"mappings":";;AAKA,MAAMA,IAAa,oEAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,UAAU;AAAA,MACR,SAAS,CAAC,QAAQ,WAAW,OAAO;AAAA,MACpC,SAAS,EAAE,MAAM,QAAQ;AAAA,IAC3B;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EACF;AACF,GAEMG,IAAuC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAc,GAAGE,EAAM,CAAA,GAEzEE,IAA0C;AAAA,EAC9C,SAAS;AAAA,EACT,UAAU;AACZ,GAEaC,IAAsBJ,EAAS,KAAK,EAAE;AACnDI,EAAoB,OAAO;AAAA,EACzB,GAAGD;AACL;"}

package/dist/components/Attention/Attention.d.ts CHANGED Viewed

@@ -1,2 +1,3 @@
 import { PropsWithChildren } from 'react';
+/** Shows the ExclamationCircleFillMini icon with children */
 export declare const Attention: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Attention/Attention.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Attention.js","sources":["../../../src/components/Attention/Attention.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\n\nimport styles from './Attention.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport const Attention = ({ children }: PropsWithChildren) => (\n <div className={styles['attention']}>\n <Icon name=\"ExclamationCircleFillMini\" size={24} />\n {children}\n </div>\n);\n"],"names":["Attention","children","styles","jsx","Icon"],"mappings":";;;;~~GAMaA~~,IAAY,CAAC,EAAE,UAAAC,EAAS,wBAClC,OAAI,EAAA,WAAWC,EAAO,WACrB,UAAA;AAAA,EAAA,gBAAAC,EAACC,GAAK,EAAA,MAAK,6BAA4B,MAAM,IAAI;AAAA,EAChDH;AAAA,EACH,CAAA;"}
1	+ {"version":3,"file":"Attention.js","sources":["../../../src/components/Attention/Attention.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\n\nimport styles from './Attention.module.css';\n\nimport { Icon } from 'components/Icon';\n\n/** Shows the ExclamationCircleFillMini icon with children */\nexport const Attention = ({ children }: PropsWithChildren) => (\n <div className={styles['attention']}>\n <Icon name=\"ExclamationCircleFillMini\" size={24} />\n {children}\n </div>\n);\n"],"names":["Attention","children","styles","jsx","Icon"],"mappings":";;;;GAOaA,IAAY,CAAC,EAAE,UAAAC,EAAS,wBAClC,OAAI,EAAA,WAAWC,EAAO,WACrB,UAAA;AAAA,EAAA,gBAAAC,EAACC,GAAK,EAAA,MAAK,6BAA4B,MAAM,IAAI;AAAA,EAChDH;AAAA,EACH,CAAA;"}

package/dist/components/Attention/Attention.stories.js CHANGED Viewed

@@ -1,15 +1,16 @@
 import { jsx as e } from "react/jsx-runtime";
 import { Attention as t } from "./Attention.js";
-const o = "<Attention>{message}</Attention>", a = {
+const o = "<Attention>{message}</Attention>", p = {
   title: "Atoms/Attention",
   component: t,
   parameters: {
+    inspectComponent: t,
     codeString: o
   }
 }, i = (n) => /* @__PURE__ */ e(t, { ...n, children: "Example Attention" }), s = i.bind({});
 s.args = {};
 export {
   s as AttentionExample,
-  a as default
+  p as default
 };
 //# sourceMappingURL=Attention.stories.js.map

package/dist/components/Attention/Attention.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Attention.stories.js","sources":["../../../src/components/Attention/Attention.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { PropsWithChildren } from 'react';\n\nimport { Attention } from './Attention';\n\nconst codeString = '<Attention>{message}</Attention>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/Attention',\n component: Attention,\n parameters: {\n codeString: codeString,\n },\n} as Meta<PropsWithChildren>;\n\nconst Template: StoryFn<PropsWithChildren> = (args) => <Attention {...args}>Example Attention</Attention>;\n\nexport const AttentionExample = Template.bind({});\nAttentionExample.args = {};\n"],"names":["codeString","Attention_stories","Attention","Template","args","AttentionExample"],"mappings":";;AAKA,MAAMA,IAAa,oCAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,YAAAF;AAAA,EACF;AACF,GAEMG,IAAuC,CAACC,wBAAUF,GAAW,EAAA,GAAGE,GAAM,UAAiB,oBAAA,CAAA,GAEhFC,IAAmBF,EAAS,KAAK,EAAE;AAChDE,EAAiB,OAAO,CAAC;"}
1	+ {"version":3,"file":"Attention.stories.js","sources":["../../../src/components/Attention/Attention.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { PropsWithChildren } from 'react';\n\nimport { Attention } from './Attention';\n\nconst codeString = '<Attention>{message}</Attention>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/Attention',\n component: Attention,\n parameters: {\n inspectComponent: Attention,\n codeString: codeString,\n },\n} as Meta<PropsWithChildren>;\n\nconst Template: StoryFn<PropsWithChildren> = (args) => <Attention {...args}>Example Attention</Attention>;\n\nexport const AttentionExample = Template.bind({});\nAttentionExample.args = {};\n"],"names":["codeString","Attention_stories","Attention","Template","args","AttentionExample"],"mappings":";;AAKA,MAAMA,IAAa,oCAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EACF;AACF,GAEMG,IAAuC,CAACC,wBAAUF,GAAW,EAAA,GAAGE,GAAM,UAAiB,oBAAA,CAAA,GAEhFC,IAAmBF,EAAS,KAAK,EAAE;AAChDE,EAAiB,OAAO,CAAC;"}

package/dist/components/Backdrop/Backdrop.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
 import { HTMLAttributes } from 'react';
 export type BackdropProps = Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>;
+/** Represents a component to dim the screen, used in combination with a modal dialog. Accepts normal HTML attributes, except className and style. */
 export declare const Backdrop: ({ children, ...restProps }: BackdropProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Backdrop/Backdrop.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Backdrop.js","sources":["../../../src/components/Backdrop/Backdrop.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\n\nimport styles from './Backdrop.module.css';\n\nexport type BackdropProps = Omit<HTMLAttributes<HTMLDivElement>, 'className' \| 'style'>;\n\nexport const Backdrop = ({ children, ...restProps }: BackdropProps) => (\n <div {...restProps} className={styles['backdrop']}>\n {children}\n </div>\n);\n"],"names":["Backdrop","children","restProps","jsx","styles"],"mappings":";;;~~GAMaA~~,IAAW,CAAC,EAAE,UAAAC,GAAU,GAAGC,EAAU,MAC/C,gBAAAC,EAAA,OAAA,EAAK,GAAGD,GAAW,WAAWE,EAAO,UACnC,UAAAH,EACH,CAAA;"}
1	+ {"version":3,"file":"Backdrop.js","sources":["../../../src/components/Backdrop/Backdrop.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\n\nimport styles from './Backdrop.module.css';\n\nexport type BackdropProps = Omit<HTMLAttributes<HTMLDivElement>, 'className' \| 'style'>;\n\n/** Represents a component to dim the screen, used in combination with a modal dialog. Accepts normal HTML attributes, except className and style. */\nexport const Backdrop = ({ children, ...restProps }: BackdropProps) => (\n <div {...restProps} className={styles['backdrop']}>\n {children}\n </div>\n);\n"],"names":["Backdrop","children","restProps","jsx","styles"],"mappings":";;;GAOaA,IAAW,CAAC,EAAE,UAAAC,GAAU,GAAGC,EAAU,MAC/C,gBAAAC,EAAA,OAAA,EAAK,GAAGD,GAAW,WAAWE,EAAO,UACnC,UAAAH,EACH,CAAA;"}

package/dist/components/Backdrop/Backdrop.stories.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import { Backdrop as o } from "./Backdrop.js";
-import { Container as i } from "../../storyComponents/Container/Container.js";
-import '../../assets/Backdrop2.css';const t = "<Backdrop>{children}</Backdrop>", s = {
+import { Container as n } from "../../storyComponents/Container/Container.js";
+import '../../assets/Backdrop2.css';const t = "<Backdrop>{children}</Backdrop>", p = {
   title: "Atoms/Backdrop",
   component: o,
   argTypes: {
@@ -14,15 +14,16 @@ import '../../assets/Backdrop2.css';const t = "<Backdrop>{children}</Backdrop>",
     }
   },
   parameters: {
+    inspectComponent: o,
     codeString: t
   }
-}, c = (e) => /* @__PURE__ */ r(i, { visible: e.visible, children: /* @__PURE__ */ r(o, { children: /* @__PURE__ */ r("div", { className: "container", children: e.children }) }) }), n = c.bind({});
-n.args = {
+}, i = (r) => /* @__PURE__ */ e(n, { visible: r.visible, children: /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e("div", { className: "container", children: r.children }) }) }), c = i.bind({});
+c.args = {
   visible: !0,
   children: "Dummy Overlay"
 };
 export {
-  n as BackdropExample,
-  s as default
+  c as BackdropExample,
+  p as default
 };
 //# sourceMappingURL=Backdrop.stories.js.map

package/dist/components/Backdrop/Backdrop.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Backdrop.stories.js","sources":["../../../src/components/Backdrop/Backdrop.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { BackdropProps } from './Backdrop';\n\nimport { Backdrop } from './Backdrop';\n\nimport { Container } from 'storyComponents/Container';\n\nimport './Backdrop.stories.css';\n\ntype BackdropStoryProps = BackdropProps & { visible: boolean };\n\nconst codeString = '<Backdrop>{children}</Backdrop>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/Backdrop',\n component: Backdrop,\n argTypes: {\n children: {\n control: 'text',\n },\n visible: {\n control: 'boolean',\n name: 'Show Backdrop',\n },\n },\n parameters: {\n codeString: codeString,\n },\n} as Meta<BackdropStoryProps>;\n\nconst Template: StoryFn<BackdropStoryProps> = (args) => {\n return (\n <Container visible={args.visible}>\n <Backdrop>\n <div className=\"container\">{args.children}</div>\n </Backdrop>\n </Container>\n );\n};\n\nexport const BackdropExample = Template.bind({});\nBackdropExample.args = {\n visible: true,\n children: 'Dummy Overlay',\n};\n"],"names":["codeString","Backdrop_stories","Backdrop","Template","args","jsx","Container","BackdropExample"],"mappings":";;;AAWA,MAAMA,IAAa,mCAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,UAAU;AAAA,MACR,SAAS;AAAA,IACX;AAAA,IACA,SAAS;AAAA,MACP,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,YAAAF;AAAA,EACF;AACF,GAEMG,IAAwC,CAACC,MAE1C,gBAAAC,EAAAC,GAAA,EAAU,SAASF,EAAK,SACvB,UAAC,gBAAAC,EAAAH,GAAA,EACC,UAAC,gBAAAG,EAAA,OAAA,EAAI,WAAU,aAAa,UAAKD,EAAA,SAAS,CAAA,GAC5C,EACF,CAAA,GAISG,IAAkBJ,EAAS,KAAK,EAAE;AAC/CI,EAAgB,OAAO;AAAA,EACrB,SAAS;AAAA,EACT,UAAU;AACZ;"}
1	+ {"version":3,"file":"Backdrop.stories.js","sources":["../../../src/components/Backdrop/Backdrop.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { BackdropProps } from './Backdrop';\n\nimport { Backdrop } from './Backdrop';\n\nimport { Container } from 'storyComponents/Container';\n\nimport './Backdrop.stories.css';\n\ntype BackdropStoryProps = BackdropProps & { visible: boolean };\n\nconst codeString = '<Backdrop>{children}</Backdrop>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/Backdrop',\n component: Backdrop,\n argTypes: {\n children: {\n control: 'text',\n },\n visible: {\n control: 'boolean',\n name: 'Show Backdrop',\n },\n },\n parameters: {\n inspectComponent: Backdrop,\n codeString: codeString,\n },\n} as Meta<BackdropStoryProps>;\n\nconst Template: StoryFn<BackdropStoryProps> = (args) => {\n return (\n <Container visible={args.visible}>\n <Backdrop>\n <div className=\"container\">{args.children}</div>\n </Backdrop>\n </Container>\n );\n};\n\nexport const BackdropExample = Template.bind({});\nBackdropExample.args = {\n visible: true,\n children: 'Dummy Overlay',\n};\n"],"names":["codeString","Backdrop_stories","Backdrop","Template","args","jsx","Container","BackdropExample"],"mappings":";;;AAWA,MAAMA,IAAa,mCAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,UAAU;AAAA,MACR,SAAS;AAAA,IACX;AAAA,IACA,SAAS;AAAA,MACP,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EACF;AACF,GAEMG,IAAwC,CAACC,MAE1C,gBAAAC,EAAAC,GAAA,EAAU,SAASF,EAAK,SACvB,UAAC,gBAAAC,EAAAH,GAAA,EACC,UAAC,gBAAAG,EAAA,OAAA,EAAI,WAAU,aAAa,UAAKD,EAAA,SAAS,CAAA,GAC5C,EACF,CAAA,GAISG,IAAkBJ,EAAS,KAAK,EAAE;AAC/CI,EAAgB,OAAO;AAAA,EACrB,SAAS;AAAA,EACT,UAAU;AACZ;"}

package/dist/components/Button/Button.stories.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { jsxs as a, Fragment as s, jsx as t } from "react/jsx-runtime";
-import { f as l } from "../../index-CuON43Qx.js";
-import { Button as n } from "./Button.js";
+import { fn as l } from "../../index-MQ0yPLdl.js";
+import { Button as r } from "./Button.js";
 const d = "<Button variant={variant} onClick={onClictFunction}>{children}</Button>", h = {
   title: "Atoms/Button",
-  component: n,
+  component: r,
   argTypes: {
     variant: {
       options: ["primary", "secondary", "destructive-primary", "destructive-secondary", "blank"],
@@ -13,7 +13,7 @@ const d = "<Button variant={variant} onClick={onClictFunction}>{children}</Butto
   parameters: {
     codeString: d
   }
-}, i = (o) => /* @__PURE__ */ t(n, { ...o }), e = {
+}, i = (o) => /* @__PURE__ */ t(r, { ...o }), e = {
   variant: "primary",
   disabled: !1,
   displayColumn: !1,
@@ -23,16 +23,16 @@ c.args = {
   children: "Click me!",
   ...e
 };
-const r = i.bind({});
-r.args = {
+const n = i.bind({});
+n.args = {
   ...e,
   children: /* @__PURE__ */ a(s, { children: [
     /* @__PURE__ */ t("div", { children: "Child 1" }),
     /* @__PURE__ */ t("div", { children: "Child 2" })
   ] })
 };
-r.argTypes = {
-  ...r.argTypes,
+n.argTypes = {
+  ...n.argTypes,
   children: {
     table: {
       disable: !0
@@ -42,7 +42,7 @@ r.argTypes = {
 };
 export {
   c as ButtonExample,
-  r as WithMultipleChildren,
+  n as WithMultipleChildren,
   h as default
 };
 //# sourceMappingURL=Button.stories.js.map

package/dist/components/Checkbox/Checkbox.stories.js CHANGED Viewed

@@ -1,22 +1,22 @@
 import { jsxs as g, jsx as o } from "react/jsx-runtime";
-import { f as e } from "../../index-CuON43Qx.js";
+import { fn as e } from "../../index-MQ0yPLdl.js";
 import { Checkbox as l } from "./Checkbox.js";
 import { FormField as t } from "../FormField/FormField.js";
-import { Label as i } from "../Label/Label.js";
-const r = "<Checkbox checked={checked} id={id} onChange={onChangeFunction} />", C = {
+import { Label as r } from "../Label/Label.js";
+const i = "<Checkbox checked={} id={} onChange={} />", f = {
   title: "Atoms/Checkbox",
   component: l,
   parameters: {
-    codeString: r
+    codeString: i
   }
-}, c = (n) => /* @__PURE__ */ g(t, { inline: !0, children: [
+}, m = (n) => /* @__PURE__ */ g(t, { inline: !0, children: [
   /* @__PURE__ */ o(l, { id: "72103b4d", ...n }),
-  /* @__PURE__ */ o(i, { htmlFor: "72103b4d", children: "Example Checkbox" })
-] }), a = c.bind({});
+  /* @__PURE__ */ o(r, { htmlFor: "72103b4d", children: "Example Checkbox" })
+] }), a = m.bind({});
 a.args = {
   onChange: e()
 };
-const h = (n) => /* @__PURE__ */ g(t, { inline: !0, children: [
+const c = (n) => /* @__PURE__ */ g(t, { inline: !0, children: [
   /* @__PURE__ */ o(
     "div",
     {
@@ -27,14 +27,14 @@ const h = (n) => /* @__PURE__ */ g(t, { inline: !0, children: [
       children: /* @__PURE__ */ o(l, { id: "72103b4e", ...n })
     }
   ),
-  /* @__PURE__ */ o(i, { htmlFor: "72103b4e", children: "Example Checkbox with long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long label" })
-] }), m = h.bind({});
-m.args = {
+  /* @__PURE__ */ o(r, { htmlFor: "72103b4e", children: "Example Checkbox with long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long label" })
+] }), h = c.bind({});
+h.args = {
   onChange: e()
 };
 export {
   a as CheckboxExample,
-  m as WithLongLabel,
-  C as default
+  h as WithLongLabel,
+  f as default
 };
 //# sourceMappingURL=Checkbox.stories.js.map

package/dist/components/Checkbox/Checkbox.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.stories.js","sources":["../../../src/components/Checkbox/Checkbox.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { CheckboxProps } from './Checkbox';\n\nimport { Checkbox } from './Checkbox';\n\nimport { FormField } from 'components/FormField';\nimport { Label } from 'components/Label';\n\nconst codeString = '<Checkbox checked={~~checked~~} id={id} onChange={~~onChangeFunction~~} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/Checkbox',\n component: Checkbox,\n parameters: {\n codeString: codeString,\n },\n} as Meta<CheckboxProps>;\n\nconst Template: StoryFn<CheckboxProps> = (args) => (\n <FormField inline>\n <Checkbox id=\"72103b4d\" {...args} />\n <Label htmlFor=\"72103b4d\">Example Checkbox</Label>\n </FormField>\n);\n\nexport const CheckboxExample = Template.bind({});\nCheckboxExample.args = {\n onChange: fn(),\n};\n\n// Extra story created for UX to see how we can solve placement of checkbox when paired with long content\n// TODO: should this component be refactored to always include a label? (see RadioButton)\nconst WithLongLabelTemplate: StoryFn<CheckboxProps> = (args) => (\n <FormField inline>\n <div\n style={{\n alignSelf: 'flex-start',\n marginTop: '0.18rem',\n }}\n >\n <Checkbox id=\"72103b4e\" {...args} />\n </div>\n <Label htmlFor=\"72103b4e\">\n Example Checkbox with long long long long long long long long long long long long long long long long long long\n long long long long long long long long long long long long long long long long long long long long long long long\n long long long long long long long long long long long long long long long long long long long long long long long\n long long long long long long long long long long long label\n </Label>\n </FormField>\n);\n\nexport const WithLongLabel = WithLongLabelTemplate.bind({});\nWithLongLabel.args = {\n onChange: fn(),\n};\n"],"names":["codeString","Checkbox_stories","Checkbox","Template","args","jsxs","FormField","jsx","Label","CheckboxExample","fn","WithLongLabelTemplate","WithLongLabel"],"mappings":";;;;;AAUA,MAAMA,IAAa,~~sEAGJC~~,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,YAAAF;AAAA,EACF;AACF,GAEMG,IAAmC,CAACC,MACvC,gBAAAC,EAAAC,GAAA,EAAU,QAAM,IACf,UAAA;AAAA,EAAA,gBAAAC,EAACL,GAAS,EAAA,IAAG,YAAY,GAAGE,EAAM,CAAA;AAAA,EACjC,gBAAAG,EAAAC,GAAA,EAAM,SAAQ,YAAW,UAAgB,oBAAA;AAAA,EAC5C,CAAA,GAGWC,IAAkBN,EAAS,KAAK,EAAE;AAC/CM,EAAgB,OAAO;AAAA,EACrB,UAAUC,EAAG;AACf;AAIA,MAAMC,IAAgD,CAACP,MACpD,gBAAAC,EAAAC,GAAA,EAAU,QAAM,IACf,UAAA;AAAA,EAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,WAAW;AAAA,QACX,WAAW;AAAA,MACb;AAAA,MAEA,UAAC,gBAAAA,EAAAL,GAAA,EAAS,IAAG,YAAY,GAAGE,GAAM;AAAA,IAAA;AAAA,EACpC;AAAA,EACC,gBAAAG,EAAAC,GAAA,EAAM,SAAQ,YAAW,UAK1B,sZAAA;AAAA,EACF,CAAA,GAGWI,IAAgBD,EAAsB,KAAK,EAAE;AAC1DC,EAAc,OAAO;AAAA,EACnB,UAAUF,EAAG;AACf;"}
1	+ {"version":3,"file":"Checkbox.stories.js","sources":["../../../src/components/Checkbox/Checkbox.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { CheckboxProps } from './Checkbox';\n\nimport { Checkbox } from './Checkbox';\n\nimport { FormField } from 'components/FormField';\nimport { Label } from 'components/Label';\n\nconst codeString = '<Checkbox checked={} id={} onChange={} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/Checkbox',\n component: Checkbox,\n parameters: {\n codeString: codeString,\n },\n} as Meta<CheckboxProps>;\n\nconst Template: StoryFn<CheckboxProps> = (args) => (\n <FormField inline>\n <Checkbox id=\"72103b4d\" {...args} />\n <Label htmlFor=\"72103b4d\">Example Checkbox</Label>\n </FormField>\n);\n\nexport const CheckboxExample = Template.bind({});\nCheckboxExample.args = {\n onChange: fn(),\n};\n\n// Extra story created for UX to see how we can solve placement of checkbox when paired with long content\n// TODO: should this component be refactored to always include a label? (see RadioButton)\nconst WithLongLabelTemplate: StoryFn<CheckboxProps> = (args) => (\n <FormField inline>\n <div\n style={{\n alignSelf: 'flex-start',\n marginTop: '0.18rem',\n }}\n >\n <Checkbox id=\"72103b4e\" {...args} />\n </div>\n <Label htmlFor=\"72103b4e\">\n Example Checkbox with long long long long long long long long long long long long long long long long long long\n long long long long long long long long long long long long long long long long long long long long long long long\n long long long long long long long long long long long long long long long long long long long long long long long\n long long long long long long long long long long long label\n </Label>\n </FormField>\n);\n\nexport const WithLongLabel = WithLongLabelTemplate.bind({});\nWithLongLabel.args = {\n onChange: fn(),\n};\n"],"names":["codeString","Checkbox_stories","Checkbox","Template","args","jsxs","FormField","jsx","Label","CheckboxExample","fn","WithLongLabelTemplate","WithLongLabel"],"mappings":";;;;;AAUA,MAAMA,IAAa,6CAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,YAAAF;AAAA,EACF;AACF,GAEMG,IAAmC,CAACC,MACvC,gBAAAC,EAAAC,GAAA,EAAU,QAAM,IACf,UAAA;AAAA,EAAA,gBAAAC,EAACL,GAAS,EAAA,IAAG,YAAY,GAAGE,EAAM,CAAA;AAAA,EACjC,gBAAAG,EAAAC,GAAA,EAAM,SAAQ,YAAW,UAAgB,oBAAA;AAAA,EAC5C,CAAA,GAGWC,IAAkBN,EAAS,KAAK,EAAE;AAC/CM,EAAgB,OAAO;AAAA,EACrB,UAAUC,EAAG;AACf;AAIA,MAAMC,IAAgD,CAACP,MACpD,gBAAAC,EAAAC,GAAA,EAAU,QAAM,IACf,UAAA;AAAA,EAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,WAAW;AAAA,QACX,WAAW;AAAA,MACb;AAAA,MAEA,UAAC,gBAAAA,EAAAL,GAAA,EAAS,IAAG,YAAY,GAAGE,GAAM;AAAA,IAAA;AAAA,EACpC;AAAA,EACC,gBAAAG,EAAAC,GAAA,EAAM,SAAQ,YAAW,UAK1B,sZAAA;AAAA,EACF,CAAA,GAGWI,IAAgBD,EAAsB,KAAK,EAAE;AAC1DC,EAAc,OAAO;AAAA,EACnB,UAAUF,EAAG;AACf;"}

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

@@ -0,0 +1,20 @@
+type CheckboxLeaf = {
+    itemName: string;
+    itemValue: string;
+    disabled?: boolean;
+};
+type CheckboxBranch = {
+    itemName: string;
+    children: CheckboxLeaf[];
+};
+export interface CheckboxTreeProps {
+    title?: string;
+    /** array of checkbox groups with a label and array of children (itemname, itemvalue and disabled boolean)*/
+    checkboxTree: CheckboxBranch[];
+    /** array of selected values */
+    defaultValue?: string[];
+    /** returns array of selected values*/
+    onChange?: (value: string[]) => void;
+}
+export declare const CheckboxTree: ({ title, checkboxTree, defaultValue, onChange }: CheckboxTreeProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/CheckboxTree/CheckboxTree.js ADDED Viewed

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