@uva-glass/component-library 1.48.0 → 1.49.0

package/dist/MultiSelect-Ckf3uGw5.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect-Ckf3uGw5.js","sources":["../src/components/MultiSelect/components/MultiSelectHeader.tsx","../src/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import styles from 'components/MultiSelect/MultiSelect.module.css';\nimport { Label } from 'components/Label';\nimport { Button } from 'components';\n\nexport interface MultiSelectHeaderProps {\n  label: string;\n  clearTrigger?: string;\n  onClear?: () => void;\n}\n\nexport function MultiSelectHeader({ label, clearTrigger, onClear }: MultiSelectHeaderProps) {\n  return (\n    <header className={styles['multi-select__header']}>\n      <Label htmlFor=\"multi-select-list\">{label}</Label>\n      {clearTrigger && (\n        <Button variant={'blank'} onClick={onClear}>\n          {clearTrigger}\n        </Button>\n      )}\n    </header>\n  );\n}\n","import clsx from 'clsx';\n\nimport type { PropsWithChildren, ReactNode } from 'react';\n\nimport styles from './MultiSelect.module.css';\n\nimport { MultiSelectItem } from 'components/MultiSelect/components/MultiSelectItem';\nimport { MultiSelectHeader } from 'components/MultiSelect/components/MultiSelectHeader';\nexport interface MultiSelectProps {\n  scrollable?: boolean;\n  noBorder?: boolean;\n  header?: ReactNode;\n}\n\nexport const MultiSelect = ({ scrollable = true, noBorder, header, children }: PropsWithChildren<MultiSelectProps>) => (\n  <>\n    {header}\n    <div\n      className={clsx(styles['multi-select'], {\n        [styles['multi-select--no-border']]: noBorder,\n      })}\n    >\n      <ul\n        className={clsx(styles['multi-select__list'], {\n          [styles['multi-select__list--scrollable']]: scrollable,\n        })}\n        id=\"multi-select-list\"\n      >\n        {children}\n      </ul>\n    </div>\n  </>\n);\n\nMultiSelect.MultiSelectHeader = MultiSelectHeader;\nMultiSelect.MultiSelectItem = MultiSelectItem;\n"],"names":["MultiSelectHeader","label","clearTrigger","onClear","jsxs","styles","jsx","Label","Button","MultiSelect","scrollable","noBorder","header","children","Fragment","clsx","MultiSelectItem"],"mappings":";;;;;;;;;;;;;;;;;;AAUO,SAASA,EAAkB,EAAE,OAAAC,GAAO,cAAAC,GAAc,SAAAC,KAAmC;AAC1F,SACG,gBAAAC,EAAA,UAAA,EAAO,WAAWC,EAAO,sBAAsB,GAC9C,UAAA;AAAA,IAAC,gBAAAC,EAAAC,GAAA,EAAM,SAAQ,qBAAqB,UAAMN,GAAA;AAAA,IACzCC,KACE,gBAAAI,EAAAE,GAAA,EAAO,SAAS,SAAS,SAASL,GAChC,UACHD,GAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;ACPa,MAAAO,IAAc,CAAC,EAAE,YAAAC,IAAa,IAAM,UAAAC,GAAU,QAAAC,GAAQ,UAAAC,QAE9D,gBAAAT,EAAAU,GAAA,EAAA,UAAA;AAAA,EAAAF;AAAA,EACD,gBAAAN;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWS,EAAKV,EAAO,cAAc,GAAG;AAAA,QACtC,CAACA,EAAO,yBAAyB,CAAC,GAAGM;AAAA,MAAA,CACtC;AAAA,MAED,UAAA,gBAAAL;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWS,EAAKV,EAAO,oBAAoB,GAAG;AAAA,YAC5C,CAACA,EAAO,gCAAgC,CAAC,GAAGK;AAAA,UAAA,CAC7C;AAAA,UACD,IAAG;AAAA,UAEF,UAAAG;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EACF;AAAA,GACF;AAGFJ,EAAY,oBAAoBT;AAChCS,EAAY,kBAAkBO;"}
+{"version":3,"file":"MultiSelect-Ckf3uGw5.js","sources":["../src/components/MultiSelect/components/MultiSelectHeader.tsx","../src/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import styles from 'components/MultiSelect/MultiSelect.module.css';\nimport { Label } from 'components/Label';\nimport { Button } from 'components';\n\nexport interface MultiSelectHeaderProps {\n  label: string;\n  clearTrigger?: string;\n  onClear?: () => void;\n}\n\nexport function MultiSelectHeader({ label, clearTrigger, onClear }: MultiSelectHeaderProps) {\n  return (\n    <header className={styles['multi-select__header']}>\n      <Label htmlFor=\"multi-select-list\">{label}</Label>\n      {clearTrigger && (\n        <Button variant={'blank'} onClick={onClear}>\n          {clearTrigger}\n        </Button>\n      )}\n    </header>\n  );\n}\n","import clsx from 'clsx';\n\nimport type { PropsWithChildren, ReactNode } from 'react';\n\nimport styles from './MultiSelect.module.css';\n\nimport { MultiSelectItem } from 'components/MultiSelect/components/MultiSelectItem';\nimport { MultiSelectHeader } from 'components/MultiSelect/components/MultiSelectHeader';\n\nexport interface MultiSelectProps {\n  /** `true` if the container should scroll on overflow; otherwise, `false` to resize the container to its contents. The default is `true`. */\n  scrollable?: boolean;\n  /** `true` to disable the border around the container; otherwise, `false`. The default is `false`. */\n  noBorder?: boolean;\n  /** The header contents. */\n  header?: ReactNode;\n}\n\n/** Represents a component to list a number of checkboxes. */\nexport const MultiSelect = ({ scrollable = true, noBorder, header, children }: PropsWithChildren<MultiSelectProps>) => (\n  <>\n    {header}\n    <div\n      className={clsx(styles['multi-select'], {\n        [styles['multi-select--no-border']]: noBorder,\n      })}\n    >\n      <ul\n        className={clsx(styles['multi-select__list'], {\n          [styles['multi-select__list--scrollable']]: scrollable,\n        })}\n        id=\"multi-select-list\"\n      >\n        {children}\n      </ul>\n    </div>\n  </>\n);\n\nMultiSelect.MultiSelectHeader = MultiSelectHeader;\nMultiSelect.MultiSelectItem = MultiSelectItem;\n"],"names":["MultiSelectHeader","label","clearTrigger","onClear","jsxs","styles","jsx","Label","Button","MultiSelect","scrollable","noBorder","header","children","Fragment","clsx","MultiSelectItem"],"mappings":";;;;;;;;;;;;;;;;;;AAUO,SAASA,EAAkB,EAAE,OAAAC,GAAO,cAAAC,GAAc,SAAAC,KAAmC;AAC1F,SACG,gBAAAC,EAAA,UAAA,EAAO,WAAWC,EAAO,sBAAsB,GAC9C,UAAA;AAAA,IAAC,gBAAAC,EAAAC,GAAA,EAAM,SAAQ,qBAAqB,UAAMN,GAAA;AAAA,IACzCC,KACE,gBAAAI,EAAAE,GAAA,EAAO,SAAS,SAAS,SAASL,GAChC,UACHD,GAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;ACFa,MAAAO,IAAc,CAAC,EAAE,YAAAC,IAAa,IAAM,UAAAC,GAAU,QAAAC,GAAQ,UAAAC,QAE9D,gBAAAT,EAAAU,GAAA,EAAA,UAAA;AAAA,EAAAF;AAAA,EACD,gBAAAN;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWS,EAAKV,EAAO,cAAc,GAAG;AAAA,QACtC,CAACA,EAAO,yBAAyB,CAAC,GAAGM;AAAA,MAAA,CACtC;AAAA,MAED,UAAA,gBAAAL;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWS,EAAKV,EAAO,oBAAoB,GAAG;AAAA,YAC5C,CAACA,EAAO,gCAAgC,CAAC,GAAGK;AAAA,UAAA,CAC7C;AAAA,UACD,IAAG;AAAA,UAEF,UAAAG;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EACF;AAAA,GACF;AAGFJ,EAAY,oBAAoBT;AAChCS,EAAY,kBAAkBO;"}

package/dist/assets/CheckboxButton.css

@@ -0,0 +1 @@
+._checkbox-button__container_sep9j_1{align-items:center;display:inline-flex;justify-content:center}._checkbox-button__container_sep9j_1 input[type=checkbox]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;z-index:-1}._checkbox-button__container_sep9j_1 input[type=checkbox]:focus-visible+label{outline:.125rem dotted var(--color-cobalt);outline-offset:.125rem;z-index:1}._checkbox-button__container_sep9j_1 input[type=checkbox]:checked+label{background-color:var(--color-black);border-color:var(--color-black);color:var(--color-white)}._checkbox-button__container_sep9j_1 input[type=checkbox]:disabled+label,._checkbox-button__container_sep9j_1 input[type=checkbox]:disabled:hover+label{background-color:var(--color-grey-100);border-color:var(--color-grey-300);color:var(--color-grey-300);cursor:not-allowed}._checkbox-button__container_sep9j_1 input[type=checkbox]:checked+label:hover{background-color:var(--color-grey-300);border-color:var(--color-black);color:var(--color-black);z-index:1}._checkbox-button_sep9j_1{align-items:center;background-color:var(--color-white);border:1px solid var(--color-grey-400);cursor:pointer;display:flex;font-size:var(--font-size-default);height:2.5rem;justify-content:center;padding:.25rem;-webkit-user-select:none;user-select:none;white-space:nowrap;width:2.5rem}._checkbox-button_sep9j_1:hover{background-color:var(--color-grey-300)}._checkbox-button--not-valid_sep9j_62{border-color:var(--color-red-500)}._checkbox-button--not-valid_sep9j_62:hover{background-color:var(--color-grey-300);border-color:var(--color-grey-300);color:var(--color-black)}._checkbox-button--single_sep9j_72{border-radius:.25rem}._checkbox-button--start_sep9j_76{border-radius:.25rem 0 0 .25rem}._checkbox-button--middle_sep9j_80{border-radius:0;border-width:1px 0;position:relative}._checkbox-button__container_sep9j_1 input[type=checkbox]:checked+label._checkbox-button--middle_sep9j_80:hover:before,._checkbox-button__container_sep9j_1 input[type=checkbox]:checked+label._checkbox-button--middle_sep9j_80:hover:after{background-color:var(--color-black);bottom:-1px;content:"";position:absolute;top:-1px;width:1px}._checkbox-button__container_sep9j_1 input[type=checkbox]:checked+label._checkbox-button--middle_sep9j_80:hover:before{left:-1px;z-index:10}._checkbox-button__container_sep9j_1 input[type=checkbox]:checked+label._checkbox-button--middle_sep9j_80:hover:after{right:-1px;z-index:11}._checkbox-button--end_sep9j_106{border-radius:0 .25rem .25rem 0}

package/dist/assets/CheckboxButtonBar.css

@@ -0,0 +1 @@
+._checkbox-button-bar__container_1b278_1{display:flex;flex-wrap:wrap}._checkbox-button-bar__container--label-left_1b278_6{flex-direction:row;gap:1rem;line-height:2.5rem}._checkbox-button-bar__container--label-top_1b278_12{align-items:flex-start;flex-direction:column;gap:.5rem;line-height:normal}._checkbox-button-bar__row-container_1b278_19{display:flex;flex-direction:column}._checkbox-button-bar__row_1b278_19{align-items:center;display:flex;flex-wrap:nowrap}._checkbox-button-bar__error_1b278_30{align-items:center;color:var(--color-red-500);display:flex;font-size:var(--font-size-small);gap:.5rem;line-height:normal;margin-top:.5rem}

package/dist/assets/CheckboxTree.css

@@ -1 +1 @@
-._checkbox-tree__header_12b1f_1{display:block;font-weight:var(--semibold);margin-bottom:.75rem;text-align:left}._checkbox-tree__branch_12b1f_8{list-style:none;-webkit-user-select:none;user-select:none}._checkbox-tree__branch_12b1f_8 input[type=checkbox]:disabled+label{color:var(--color-grey-300)}._checkbox-tree__branch--icon_12b1f_17{pointer-events:none;transform:rotate(0);transition:transform .3s ease-out}._checkbox-tree__branch--icon--expanded_12b1f_23{transform:rotate(90deg);transition:transform .3s ease-in}._checkbox-tree__branch--formfield_12b1f_28{align-items:center;display:flex;flex-direction:row;gap:.5rem}._checkbox-tree__leaves_12b1f_35{display:none;flex-direction:column;gap:1rem;list-style:none;margin:1rem 0 1rem 1rem;-webkit-user-select:none;user-select:none}._checkbox-tree__leaves--expanded_12b1f_44{display:flex}._checkbox-tree__leaf_12b1f_48{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_12b1f_48 input[type=checkbox]:disabled+label{color:var(--color-grey-300)}
+._checkbox-tree__header_xbe4e_1{display:block;font-weight:var(--semibold);margin-bottom:.75rem;text-align:left}._checkbox-tree__branch_xbe4e_8{list-style:none;-webkit-user-select:none;user-select:none}._checkbox-tree__branch_xbe4e_8[aria-expanded=false]{margin-bottom:.5rem}._checkbox-tree__branch_xbe4e_8 input[type=checkbox]:disabled+label{color:var(--color-grey-300)}._checkbox-tree__branch--icon_xbe4e_21{pointer-events:none;transform:rotate(0);transition:transform .3s ease-out}._checkbox-tree__branch--icon--expanded_xbe4e_27{transform:rotate(90deg);transition:transform .3s ease-in}._checkbox-tree__branch--formfield_xbe4e_32{align-items:center;display:flex;flex-direction:row;gap:.5rem}._checkbox-tree__leaves_xbe4e_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_xbe4e_48{display:flex}._checkbox-tree__leaf_xbe4e_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_xbe4e_52 input[type=checkbox]:disabled+label{color:var(--color-grey-300)}

package/dist/assets/Label.css

@@ -1 +1 @@
-._label_1b4r9_1{font-weight:var(--semibold);text-align:left}._label--unset-font-weight_1b4r9_6{font-weight:unset}
+._label_ok9qo_1{font-weight:var(--semibold);text-align:left}._label--required_ok9qo_6:after{color:var(--color-red-500);content:"★";font-size:.5rem;margin-left:.25rem;vertical-align:top}._label--unset-font-weight_ok9qo_14{font-weight:unset}

package/dist/assets/PeriodSelector.css

@@ -0,0 +1 @@
+._period-selector__container_1on0y_1{display:flex;flex-wrap:wrap}._period-selector__container--label-left_1on0y_6{flex-direction:row;gap:1rem;line-height:2.5rem}._period-selector__container--label-top_1on0y_12{align-items:flex-start;flex-direction:column;gap:.5rem;line-height:normal}._period-selector__selector-container_1on0y_19{display:flex;flex-direction:column}._period-selector__selector-row_1on0y_24{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem}._period-selector__error_1on0y_31{align-items:center;color:var(--color-red-500);display:flex;font-size:var(--font-size-small);gap:.5rem;line-height:normal;margin-top:.5rem}

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

@@ -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

@@ -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;"}
+{"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

@@ -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

@@ -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

@@ -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":"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"}
+{"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

@@ -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

@@ -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;"}
+{"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

@@ -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

@@ -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;"}
+{"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

@@ -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

@@ -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;"}
+{"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

@@ -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

@@ -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;"}
+{"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

@@ -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

@@ -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;"}
+{"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

@@ -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

@@ -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;"}
+{"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

@@ -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

@@ -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;"}
+{"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.d.ts

@@ -1,8 +1,12 @@
 import { ButtonHTMLAttributes, ReactNode } from 'react';
 export type UIButtonVariant = 'primary' | 'secondary' | 'destructive-primary' | 'destructive-secondary' | 'blank';
 export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'style'> {
+    /** The variant of the button. */
     variant: UIButtonVariant;
+    /** The element to show inside the button. */
     children: ReactNode;
+    /** Renders the button as a flex column. */
     displayColumn?: boolean;
 }
+/** Represents a component for a button. */
 export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport type { ButtonHTMLAttributes, ReactNode } from 'react';\n\nimport styles from './Button.module.css';\n\nexport type UIButtonVariant = 'primary' | 'secondary' | 'destructive-primary' | 'destructive-secondary' | 'blank';\n\nexport interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'style'> {\n  variant: UIButtonVariant;\n  children: ReactNode;\n  displayColumn?: boolean;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, forwardedRef) => {\n  const { children, type = 'button', variant, displayColumn = false, ...restProps } = props;\n\n  return (\n    <button\n      {...restProps}\n      type={type}\n      ref={forwardedRef}\n      className={clsx(styles['button'], styles[`button--${variant}`], {\n        [styles['button--wide-column']]: displayColumn,\n      })}\n    >\n      {children}\n    </button>\n  );\n});\n"],"names":["Button","forwardRef","props","forwardedRef","children","type","variant","displayColumn","restProps","jsx","clsx","styles"],"mappings":";;;;AAeO,MAAMA,IAASC,EAA2C,CAACC,GAAOC,MAAiB;AAClF,QAAA,EAAE,UAAAC,GAAU,MAAAC,IAAO,UAAU,SAAAC,GAAS,eAAAC,IAAgB,IAAO,GAAGC,EAAc,IAAAN;AAGlF,SAAA,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGD;AAAA,MACJ,MAAAH;AAAA,MACA,KAAKF;AAAA,MACL,WAAWO,EAAKC,EAAO,QAAWA,EAAO,WAAWL,CAAO,EAAE,GAAG;AAAA,QAC9D,CAACK,EAAO,qBAAqB,CAAC,GAAGJ;AAAA,MAAA,CAClC;AAAA,MAEA,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport type { ButtonHTMLAttributes, ReactNode } from 'react';\n\nimport styles from './Button.module.css';\n\nexport type UIButtonVariant = 'primary' | 'secondary' | 'destructive-primary' | 'destructive-secondary' | 'blank';\n\nexport interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'style'> {\n  /** The variant of the button. */\n  variant: UIButtonVariant;\n  /** The element to show inside the button. */\n  children: ReactNode;\n  /** Renders the button as a flex column. */\n  displayColumn?: boolean;\n}\n\n/** Represents a component for a button. */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, forwardedRef) => {\n  const { children, type = 'button', variant, displayColumn = false, ...restProps } = props;\n\n  return (\n    <button\n      {...restProps}\n      type={type}\n      ref={forwardedRef}\n      className={clsx(styles['button'], styles[`button--${variant}`], {\n        [styles['button--wide-column']]: displayColumn,\n      })}\n    >\n      {children}\n    </button>\n  );\n});\n"],"names":["Button","forwardRef","props","forwardedRef","children","type","variant","displayColumn","restProps","jsx","clsx","styles"],"mappings":";;;;AAmBO,MAAMA,IAASC,EAA2C,CAACC,GAAOC,MAAiB;AAClF,QAAA,EAAE,UAAAC,GAAU,MAAAC,IAAO,UAAU,SAAAC,GAAS,eAAAC,IAAgB,IAAO,GAAGC,EAAc,IAAAN;AAGlF,SAAA,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGD;AAAA,MACJ,MAAAH;AAAA,MACA,KAAKF;AAAA,MACL,WAAWO,EAAKC,EAAO,QAAWA,EAAO,WAAWL,CAAO,EAAE,GAAG;AAAA,QAC9D,CAACK,EAAO,qBAAqB,CAAC,GAAGJ;AAAA,MAAA,CAClC;AAAA,MAEA,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.js","sources":["../../../src/components/Button/Button.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { ButtonProps } from './Button';\n\nimport { Button } from './Button';\n\nconst codeString = '<Button variant={variant} onClick={onClictFunction}>{children}</Button>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/Button',\n  component: Button,\n  argTypes: {\n    variant: {\n      options: ['primary', 'secondary', 'destructive-primary', 'destructive-secondary', 'blank'],\n      control: { type: 'radio' },\n    },\n  },\n  parameters: {\n    codeString: codeString,\n  },\n} as Meta<ButtonProps>;\n\nconst Template: StoryFn<ButtonProps> = (args) => <Button {...args} />;\n\nconst defaultArgs: Partial<ButtonProps> = {\n  variant: 'primary',\n  disabled: false,\n  displayColumn: false,\n  onClick: fn(),\n};\n\nexport const ButtonExample = Template.bind({});\nButtonExample.args = {\n  children: 'Click me!',\n  ...defaultArgs,\n};\n\nexport const WithMultipleChildren = Template.bind({});\nWithMultipleChildren.args = {\n  ...defaultArgs,\n  children: (\n    <>\n      <div>Child 1</div>\n      <div>Child 2</div>\n    </>\n  ),\n};\nWithMultipleChildren.argTypes = {\n  ...WithMultipleChildren.argTypes,\n  children: {\n    table: {\n      disable: true, // Disable children controls for this specific story\n    },\n  },\n};\n"],"names":["codeString","Button_stories","Button","Template","args","jsx","defaultArgs","fn","ButtonExample","WithMultipleChildren","jsxs","Fragment"],"mappings":";;;AAOA,MAAMA,IAAa,2EAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,WAAW,aAAa,uBAAuB,yBAAyB,OAAO;AAAA,MACzF,SAAS,EAAE,MAAM,QAAQ;AAAA,IAC3B;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,YAAAF;AAAA,EACF;AACF,GAEMG,IAAiC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAQ,GAAGE,EAAM,CAAA,GAE7DE,IAAoC;AAAA,EACxC,SAAS;AAAA,EACT,UAAU;AAAA,EACV,eAAe;AAAA,EACf,SAASC,EAAG;AACd,GAEaC,IAAgBL,EAAS,KAAK,EAAE;AAC7CK,EAAc,OAAO;AAAA,EACnB,UAAU;AAAA,EACV,GAAGF;AACL;AAEO,MAAMG,IAAuBN,EAAS,KAAK,EAAE;AACpDM,EAAqB,OAAO;AAAA,EAC1B,GAAGH;AAAA,EACH,UAEI,gBAAAI,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAN,EAAC,SAAI,UAAO,UAAA,CAAA;AAAA,IACZ,gBAAAA,EAAC,SAAI,UAAO,UAAA,CAAA;AAAA,EAAA,GACd;AAEJ;AACAI,EAAqB,WAAW;AAAA,EAC9B,GAAGA,EAAqB;AAAA,EACxB,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA;AAAA,IACX;AAAA,EACF;AACF;"}
+{"version":3,"file":"Button.stories.js","sources":["../../../src/components/Button/Button.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { ButtonProps } from './Button';\n\nimport { Button } from './Button';\n\nconst codeString = '<Button variant={variant} onClick={onClictFunction}>{children}</Button>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/Button',\n  component: Button,\n  argTypes: {\n    variant: {\n      options: ['primary', 'secondary', 'destructive-primary', 'destructive-secondary', 'blank'],\n      control: { type: 'radio' },\n    },\n  },\n  parameters: {\n    inspectComponent: Button,\n    codeString: codeString,\n  },\n} as Meta<ButtonProps>;\n\nconst Template: StoryFn<ButtonProps> = (args) => <Button {...args} />;\n\nconst defaultArgs: Partial<ButtonProps> = {\n  variant: 'primary',\n  disabled: false,\n  displayColumn: false,\n  onClick: fn(),\n};\n\nexport const ButtonExample = Template.bind({});\nButtonExample.args = {\n  children: 'Click me!',\n  ...defaultArgs,\n};\n\nexport const WithMultipleChildren = Template.bind({});\nWithMultipleChildren.args = {\n  ...defaultArgs,\n  children: (\n    <>\n      <div>Child 1</div>\n      <div>Child 2</div>\n    </>\n  ),\n};\nWithMultipleChildren.argTypes = {\n  ...WithMultipleChildren.argTypes,\n  children: {\n    table: {\n      disable: true, // Disable children controls for this specific story\n    },\n  },\n};\n"],"names":["codeString","Button_stories","Button","Template","args","jsx","defaultArgs","fn","ButtonExample","WithMultipleChildren","jsxs","Fragment"],"mappings":";;;AAOA,MAAMA,IAAa,2EAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,WAAW,aAAa,uBAAuB,yBAAyB,OAAO;AAAA,MACzF,SAAS,EAAE,MAAM,QAAQ;AAAA,IAC3B;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EACF;AACF,GAEMG,IAAiC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAQ,GAAGE,EAAM,CAAA,GAE7DE,IAAoC;AAAA,EACxC,SAAS;AAAA,EACT,UAAU;AAAA,EACV,eAAe;AAAA,EACf,SAASC,EAAG;AACd,GAEaC,IAAgBL,EAAS,KAAK,EAAE;AAC7CK,EAAc,OAAO;AAAA,EACnB,UAAU;AAAA,EACV,GAAGF;AACL;AAEO,MAAMG,IAAuBN,EAAS,KAAK,EAAE;AACpDM,EAAqB,OAAO;AAAA,EAC1B,GAAGH;AAAA,EACH,UAEI,gBAAAI,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAN,EAAC,SAAI,UAAO,UAAA,CAAA;AAAA,IACZ,gBAAAA,EAAC,SAAI,UAAO,UAAA,CAAA;AAAA,EAAA,GACd;AAEJ;AACAI,EAAqB,WAAW;AAAA,EAC9B,GAAGA,EAAqB;AAAA,EACxB,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA;AAAA,IACX;AAAA,EACF;AACF;"}

package/dist/components/ButtonGroup/ButtonGroup.d.ts

@@ -1,6 +1,9 @@
 import { PropsWithChildren } from 'react';
 export interface ButtonGroupProps {
+    /** true to render the buttons from top to bottom; otherwise, false. The default is false. */
     stacked?: boolean;
+    /** true to render the buttons in reverse order; otherwise, false. The default is false. */
     reversed?: boolean;
 }
+/** Represents a component that contains a group of buttons. */
 export declare const ButtonGroup: ({ children, stacked, reversed }: PropsWithChildren<ButtonGroupProps>) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/ButtonGroup/ButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.js","sources":["../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import classNames from 'clsx';\nimport { Children } from 'react';\n\nimport type { PropsWithChildren } from 'react';\n\nimport styles from './ButtonGroup.module.css';\n\nexport interface ButtonGroupProps {\n  stacked?: boolean;\n  reversed?: boolean;\n}\n\nexport const ButtonGroup = ({ children, stacked, reversed }: PropsWithChildren<ButtonGroupProps>) =>\n  // only render a <ButtonGroup> when there are children\n  Children.count(children) > 0 ? (\n    <div\n      className={classNames(styles['button-group'], {\n        [styles['button-group--stacked']]: stacked,\n        [styles['button-group--reversed']]: reversed,\n        [styles['button-group--reversed-stacked']]: stacked && reversed,\n      })}\n    >\n      {children}\n    </div>\n  ) : null;\n"],"names":["ButtonGroup","children","stacked","reversed","Children","jsx","classNames","styles"],"mappings":";;;;;;;;GAYaA,IAAc,CAAC,EAAE,UAAAC,GAAU,SAAAC,GAAS,UAAAC,EAAS;AAAA;AAAA,EAExDC,EAAS,MAAMH,CAAQ,IAAI,IACzB,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAWC,EAAO,cAAc,GAAG;AAAA,QAC5C,CAACA,EAAO,uBAAuB,CAAC,GAAGL;AAAA,QACnC,CAACK,EAAO,wBAAwB,CAAC,GAAGJ;AAAA,QACpC,CAACI,EAAO,gCAAgC,CAAC,GAAGL,KAAWC;AAAA,MAAA,CACxD;AAAA,MAEA,UAAAF;AAAA,IAAA;AAAA,EAAA,IAED;AAAA;"}
+{"version":3,"file":"ButtonGroup.js","sources":["../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import classNames from 'clsx';\nimport { Children } from 'react';\n\nimport type { PropsWithChildren } from 'react';\n\nimport styles from './ButtonGroup.module.css';\n\nexport interface ButtonGroupProps {\n  /** true to render the buttons from top to bottom; otherwise, false. The default is false. */\n  stacked?: boolean;\n  /** true to render the buttons in reverse order; otherwise, false. The default is false. */\n  reversed?: boolean;\n}\n\n/** Represents a component that contains a group of buttons. */\nexport const ButtonGroup = ({ children, stacked, reversed }: PropsWithChildren<ButtonGroupProps>) =>\n  // only render a <ButtonGroup> when there are children\n  Children.count(children) > 0 ? (\n    <div\n      className={classNames(styles['button-group'], {\n        [styles['button-group--stacked']]: stacked,\n        [styles['button-group--reversed']]: reversed,\n        [styles['button-group--reversed-stacked']]: stacked && reversed,\n      })}\n    >\n      {children}\n    </div>\n  ) : null;\n"],"names":["ButtonGroup","children","stacked","reversed","Children","jsx","classNames","styles"],"mappings":";;;;;;;;GAeaA,IAAc,CAAC,EAAE,UAAAC,GAAU,SAAAC,GAAS,UAAAC,EAAS;AAAA;AAAA,EAExDC,EAAS,MAAMH,CAAQ,IAAI,IACzB,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAWC,EAAO,cAAc,GAAG;AAAA,QAC5C,CAACA,EAAO,uBAAuB,CAAC,GAAGL;AAAA,QACnC,CAACK,EAAO,wBAAwB,CAAC,GAAGJ;AAAA,QACpC,CAACI,EAAO,gCAAgC,CAAC,GAAGL,KAAWC;AAAA,MAAA,CACxD;AAAA,MAEA,UAAAF;AAAA,IAAA;AAAA,EAAA,IAED;AAAA;"}

package/dist/components/ButtonGroup/ButtonGroup.stories.js

@@ -18,6 +18,7 @@ const c = `
     }
   },
   parameters: {
+    inspectComponent: n,
     codeString: c
   }
 }, s = (o) => /* @__PURE__ */ t(i, { children: /* @__PURE__ */ t(n, { ...o }) }), u = {

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.stories.js","sources":["../../../src/components/ButtonGroup/ButtonGroup.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { PropsWithChildren } from 'react';\nimport type { ButtonGroupProps } from './ButtonGroup';\n\nimport { ButtonGroup } from './ButtonGroup';\n\nimport { Button } from 'components/Button/Button';\nimport { Container } from 'storyComponents/Container';\n\nconst codeString = `\n  <ButtonGroup reversed={reversed} stacked={stacked}>\n    <Button variant={variant} onClick={onClickedFunction}>{children}</Button>\n    <Button variant={variant} onClick={onClickedFunction}>{children}</Button>\n  </ButtonGroup>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Molecules/ButtonGroup',\n  component: ButtonGroup,\n  argTypes: {\n    children: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    codeString: codeString,\n  },\n} as Meta<PropsWithChildren<ButtonGroupProps>>;\n\nconst Template: StoryFn<PropsWithChildren<ButtonGroupProps>> = (args) => (\n  <Container>\n    <ButtonGroup {...args} />\n  </Container>\n);\n\nconst defaultArgs: Partial<PropsWithChildren<ButtonGroupProps>> = {\n  stacked: false,\n  reversed: false,\n  children: (\n    <>\n      <Button variant=\"primary\">Primary button</Button>\n      <Button variant=\"secondary\">Secondary button</Button>\n    </>\n  ),\n};\n\nexport const ButtonGroupExample = Template.bind({});\nButtonGroupExample.args = {\n  ...defaultArgs,\n};\n"],"names":["codeString","ButtonGroup_stories","ButtonGroup","Template","args","jsx","Container","defaultArgs","jsxs","Fragment","Button","ButtonGroupExample"],"mappings":";;;;AASA,MAAMA,IAAa;AAAA;AAAA;AAAA;AAAA;AAAA,GAQJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,YAAAF;AAAA,EACF;AACF,GAEMG,IAAyD,CAACC,MAC9D,gBAAAC,EAACC,KACC,UAAC,gBAAAD,EAAAH,GAAA,EAAa,GAAGE,EAAM,CAAA,EACzB,CAAA,GAGIG,IAA4D;AAAA,EAChE,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAEI,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAC,gBAAAJ,EAAAK,GAAA,EAAO,SAAQ,WAAU,UAAc,kBAAA;AAAA,IACvC,gBAAAL,EAAAK,GAAA,EAAO,SAAQ,aAAY,UAAgB,oBAAA;AAAA,EAAA,GAC9C;AAEJ,GAEaC,IAAqBR,EAAS,KAAK,EAAE;AAClDQ,EAAmB,OAAO;AAAA,EACxB,GAAGJ;AACL;"}
+{"version":3,"file":"ButtonGroup.stories.js","sources":["../../../src/components/ButtonGroup/ButtonGroup.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { PropsWithChildren } from 'react';\nimport type { ButtonGroupProps } from './ButtonGroup';\n\nimport { ButtonGroup } from './ButtonGroup';\n\nimport { Button } from 'components/Button/Button';\nimport { Container } from 'storyComponents/Container';\n\nconst codeString = `\n  <ButtonGroup reversed={reversed} stacked={stacked}>\n    <Button variant={variant} onClick={onClickedFunction}>{children}</Button>\n    <Button variant={variant} onClick={onClickedFunction}>{children}</Button>\n  </ButtonGroup>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Molecules/ButtonGroup',\n  component: ButtonGroup,\n  argTypes: {\n    children: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    inspectComponent: ButtonGroup,\n    codeString: codeString,\n  },\n} as Meta<PropsWithChildren<ButtonGroupProps>>;\n\nconst Template: StoryFn<PropsWithChildren<ButtonGroupProps>> = (args) => (\n  <Container>\n    <ButtonGroup {...args} />\n  </Container>\n);\n\nconst defaultArgs: Partial<PropsWithChildren<ButtonGroupProps>> = {\n  stacked: false,\n  reversed: false,\n  children: (\n    <>\n      <Button variant=\"primary\">Primary button</Button>\n      <Button variant=\"secondary\">Secondary button</Button>\n    </>\n  ),\n};\n\nexport const ButtonGroupExample = Template.bind({});\nButtonGroupExample.args = {\n  ...defaultArgs,\n};\n"],"names":["codeString","ButtonGroup_stories","ButtonGroup","Template","args","jsx","Container","defaultArgs","jsxs","Fragment","Button","ButtonGroupExample"],"mappings":";;;;AASA,MAAMA,IAAa;AAAA;AAAA;AAAA;AAAA;AAAA,GAQJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EACF;AACF,GAEMG,IAAyD,CAACC,MAC9D,gBAAAC,EAACC,KACC,UAAC,gBAAAD,EAAAH,GAAA,EAAa,GAAGE,EAAM,CAAA,EACzB,CAAA,GAGIG,IAA4D;AAAA,EAChE,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAEI,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAC,gBAAAJ,EAAAK,GAAA,EAAO,SAAQ,WAAU,UAAc,kBAAA;AAAA,IACvC,gBAAAL,EAAAK,GAAA,EAAO,SAAQ,aAAY,UAAgB,oBAAA;AAAA,EAAA,GAC9C;AAEJ,GAEaC,IAAqBR,EAAS,KAAK,EAAE;AAClDQ,EAAmB,OAAO;AAAA,EACxB,GAAGJ;AACL;"}

package/dist/components/Card/Card.d.ts

@@ -1,9 +1,15 @@
 import { PropsWithChildren, ReactNode } from 'react';
 export interface CardProps {
+    /** The element to use as a header. */
     header?: ReactNode;
+    /** true to render the card with high contrast colors; otherwise, false. The default is false. */
     highContrast?: boolean;
+    /** An optional notification to render. */
     notification?: ReactNode;
+    /** The padding to use for the card. */
     padding?: 'small' | 'regular' | 'large';
+    /** true to align the contents in the center; otherwise, false. */
     alignCenter?: boolean;
 }
+/** Represents a component to render a card. */
 export declare const Card: ({ children, header, highContrast, notification, padding, alignCenter, }: PropsWithChildren<CardProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import classNames from 'clsx';\n\nimport type { PropsWithChildren, ReactNode } from 'react';\n\nimport styles from './Card.module.css';\n\nimport { SectionNotification } from 'components/SectionNotification';\n\nexport interface CardProps {\n  header?: ReactNode;\n  highContrast?: boolean;\n  notification?: ReactNode;\n  padding?: 'small' | 'regular' | 'large';\n  alignCenter?: boolean;\n}\n\nexport const Card = ({\n  children,\n  header,\n  highContrast,\n  notification,\n  padding = 'regular',\n  alignCenter = false,\n}: PropsWithChildren<CardProps>) => (\n  <div\n    className={classNames(styles['card'], {\n      [styles['card--high-contrast']]: highContrast,\n      [styles['card--regular']]: padding === 'regular',\n      [styles['card--small']]: padding === 'small',\n      [styles['card--large']]: padding === 'large',\n      [styles['card--align-center']]: alignCenter,\n    })}\n  >\n    {notification && <SectionNotification>{notification}</SectionNotification>}\n    {header && <div className={styles['card-header']}>{header}</div>}\n    {children}\n  </div>\n);\n"],"names":["Card","children","header","highContrast","notification","padding","alignCenter","jsxs","classNames","styles","jsx","SectionNotification"],"mappings":";;;;;;;;;;;GAgBaA,IAAO,CAAC;AAAA,EACnB,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,aAAAC,IAAc;AAChB,MACE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAWC,EAAO,MAAS;AAAA,MACpC,CAACA,EAAO,qBAAqB,CAAC,GAAGN;AAAA,MACjC,CAACM,EAAO,eAAe,CAAC,GAAGJ,MAAY;AAAA,MACvC,CAACI,EAAO,aAAa,CAAC,GAAGJ,MAAY;AAAA,MACrC,CAACI,EAAO,aAAa,CAAC,GAAGJ,MAAY;AAAA,MACrC,CAACI,EAAO,oBAAoB,CAAC,GAAGH;AAAA,IAAA,CACjC;AAAA,IAEA,UAAA;AAAA,MAAgBF,KAAA,gBAAAM,EAACC,KAAqB,UAAaP,EAAA,CAAA;AAAA,MACnDF,KAAW,gBAAAQ,EAAA,OAAA,EAAI,WAAWD,EAAO,aAAa,GAAI,UAAOP,GAAA;AAAA,MACzDD;AAAA,IAAA;AAAA,EAAA;AACH;"}
+{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import classNames from 'clsx';\n\nimport type { PropsWithChildren, ReactNode } from 'react';\n\nimport styles from './Card.module.css';\n\nimport { SectionNotification } from 'components/SectionNotification';\n\nexport interface CardProps {\n  /** The element to use as a header. */\n  header?: ReactNode;\n  /** true to render the card with high contrast colors; otherwise, false. The default is false. */\n  highContrast?: boolean;\n  /** An optional notification to render. */\n  notification?: ReactNode;\n  /** The padding to use for the card. */\n  padding?: 'small' | 'regular' | 'large';\n  /** true to align the contents in the center; otherwise, false. */\n  alignCenter?: boolean;\n}\n\n/** Represents a component to render a card. */\nexport const Card = ({\n  children,\n  header,\n  highContrast,\n  notification,\n  padding = 'regular',\n  alignCenter = false,\n}: PropsWithChildren<CardProps>) => (\n  <div\n    className={classNames(styles['card'], {\n      [styles['card--high-contrast']]: highContrast,\n      [styles['card--regular']]: padding === 'regular',\n      [styles['card--small']]: padding === 'small',\n      [styles['card--large']]: padding === 'large',\n      [styles['card--align-center']]: alignCenter,\n    })}\n  >\n    {notification && <SectionNotification>{notification}</SectionNotification>}\n    {header && <div className={styles['card-header']}>{header}</div>}\n    {children}\n  </div>\n);\n"],"names":["Card","children","header","highContrast","notification","padding","alignCenter","jsxs","classNames","styles","jsx","SectionNotification"],"mappings":";;;;;;;;;;;GAsBaA,IAAO,CAAC;AAAA,EACnB,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,aAAAC,IAAc;AAChB,MACE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAWC,EAAO,MAAS;AAAA,MACpC,CAACA,EAAO,qBAAqB,CAAC,GAAGN;AAAA,MACjC,CAACM,EAAO,eAAe,CAAC,GAAGJ,MAAY;AAAA,MACvC,CAACI,EAAO,aAAa,CAAC,GAAGJ,MAAY;AAAA,MACrC,CAACI,EAAO,aAAa,CAAC,GAAGJ,MAAY;AAAA,MACrC,CAACI,EAAO,oBAAoB,CAAC,GAAGH;AAAA,IAAA,CACjC;AAAA,IAEA,UAAA;AAAA,MAAgBF,KAAA,gBAAAM,EAACC,KAAqB,UAAaP,EAAA,CAAA;AAAA,MACnDF,KAAW,gBAAAQ,EAAA,OAAA,EAAI,WAAWD,EAAO,aAAa,GAAI,UAAOP,GAAA;AAAA,MACzDD;AAAA,IAAA;AAAA,EAAA;AACH;"}