@uva-glass/component-library 1.48.1 → 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_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)}
+._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/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;"}

package/dist/components/Card/Card.stories.js

@@ -1,50 +1,51 @@
 import { jsx as i } from "react/jsx-runtime";
-import { Card as t } from "./Card.js";
-const o = "<Card header={header}>{children}</Card>", d = {
+import { Card as e } from "./Card.js";
+const n = "<Card header={header}>{children}</Card>", d = {
   title: "Atoms/Card",
-  component: t,
+  component: e,
   argTypes: {
     highContrast: {
-      controle: "boolean"
+      control: "boolean"
     },
     padding: {
-      controle: {
+      control: {
         type: "select",
         options: ["small", "regular", "large"]
       }
     },
     alignCenter: {
-      controle: "boolean"
+      control: "boolean"
     },
     children: {
       control: "text"
     }
   },
   parameters: {
-    codeString: o
+    inspectComponent: e,
+    codeString: n
   }
-}, e = (r) => /* @__PURE__ */ i(t, { ...r }), a = {
+}, t = (r) => /* @__PURE__ */ i(e, { ...r }), a = {
   padding: "regular",
   highContrast: !1,
   alignCenter: !1,
   header: "Example Header"
-}, n = e.bind({});
-n.args = {
+}, o = t.bind({});
+o.args = {
   ...a,
   notification: ""
 };
-const s = e.bind({});
+const s = t.bind({});
 s.args = {
   ...a,
   notification: "This is an example notification"
 };
-const h = e.bind({});
+const h = t.bind({});
 h.args = {
   ...a,
   children: "Chuck Norris is the reason why Waldo is hiding Remember the Soviet Union? They decided to quit after watching a DeltaForce marathon on Satellite TV, Chuck Norris CAN eat soup with a fork Morgan Freeman is the only person that could narrate Chuck Norris's life, other than himself, The quickest way to a man's heart is with Chuck Norris' fist. Chuck Norris ran in Nascar and came in 1st place. Then again, Chuck Norris wins everything."
 };
 export {
-  n as CardExample,
+  o as CardExample,
   h as WithChildren,
   s as WithNotification,
   d as default

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

@@ -1 +1 @@
-{"version":3,"file":"Card.stories.js","sources":["../../../src/components/Card/Card.stories.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { CardProps } from './Card';\n\nimport { Card } from './Card';\n\nconst codeString = '<Card header={header}>{children}</Card>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/Card',\n  component: Card,\n  argTypes: {\n    highContrast: {\n      controle: 'boolean',\n    },\n    padding: {\n      controle: {\n        type: 'select',\n        options: ['small', 'regular', 'large'],\n      },\n    },\n    alignCenter: {\n      controle: 'boolean',\n    },\n    children: {\n      control: 'text',\n    },\n  },\n  parameters: {\n    codeString: codeString,\n  },\n} as Meta<PropsWithChildren<CardProps>>;\n\nconst Template: StoryFn<PropsWithChildren<CardProps>> = (args) => <Card {...args} />;\n\nconst defaultArgs: Partial<PropsWithChildren<CardProps>> = {\n  padding: 'regular',\n  highContrast: false,\n  alignCenter: false,\n  header: 'Example Header',\n};\n\nexport const CardExample = Template.bind({});\nCardExample.args = {\n  ...defaultArgs,\n  notification: '',\n};\n\nexport const WithNotification = Template.bind({});\nWithNotification.args = {\n  ...defaultArgs,\n  notification: 'This is an example notification',\n};\n\nexport const WithChildren = Template.bind({});\nWithChildren.args = {\n  ...defaultArgs,\n  children:\n    \"Chuck Norris is the reason why Waldo is hiding Remember the Soviet Union? They decided to quit after watching a DeltaForce marathon on Satellite TV, Chuck Norris CAN eat soup with a fork Morgan Freeman is the only person that could narrate Chuck Norris's life, other than himself, The quickest way to a man's heart is with Chuck Norris' fist. Chuck Norris ran in Nascar and came in 1st place. Then again, Chuck Norris wins everything.\",\n};\n"],"names":["codeString","Card_stories","Card","Template","args","jsx","defaultArgs","CardExample","WithNotification","WithChildren"],"mappings":";;AAMA,MAAMA,IAAa,2CAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,cAAc;AAAA,MACZ,UAAU;AAAA,IACZ;AAAA,IACA,SAAS;AAAA,MACP,UAAU;AAAA,QACR,MAAM;AAAA,QACN,SAAS,CAAC,SAAS,WAAW,OAAO;AAAA,MACvC;AAAA,IACF;AAAA,IACA,aAAa;AAAA,MACX,UAAU;AAAA,IACZ;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,YAAAF;AAAA,EACF;AACF,GAEMG,IAAkD,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAM,GAAGE,EAAM,CAAA,GAE5EE,IAAqD;AAAA,EACzD,SAAS;AAAA,EACT,cAAc;AAAA,EACd,aAAa;AAAA,EACb,QAAQ;AACV,GAEaC,IAAcJ,EAAS,KAAK,EAAE;AAC3CI,EAAY,OAAO;AAAA,EACjB,GAAGD;AAAA,EACH,cAAc;AAChB;AAEO,MAAME,IAAmBL,EAAS,KAAK,EAAE;AAChDK,EAAiB,OAAO;AAAA,EACtB,GAAGF;AAAA,EACH,cAAc;AAChB;AAEO,MAAMG,IAAeN,EAAS,KAAK,EAAE;AAC5CM,EAAa,OAAO;AAAA,EAClB,GAAGH;AAAA,EACH,UACE;AACJ;"}
+{"version":3,"file":"Card.stories.js","sources":["../../../src/components/Card/Card.stories.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { CardProps } from './Card';\n\nimport { Card } from './Card';\n\nconst codeString = '<Card header={header}>{children}</Card>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/Card',\n  component: Card,\n  argTypes: {\n    highContrast: {\n      control: 'boolean',\n    },\n    padding: {\n      control: {\n        type: 'select',\n        options: ['small', 'regular', 'large'],\n      },\n    },\n    alignCenter: {\n      control: 'boolean',\n    },\n    children: {\n      control: 'text',\n    },\n  },\n  parameters: {\n    inspectComponent: Card,\n    codeString: codeString,\n  },\n} as Meta<PropsWithChildren<CardProps>>;\n\nconst Template: StoryFn<PropsWithChildren<CardProps>> = (args) => <Card {...args} />;\n\nconst defaultArgs: Partial<PropsWithChildren<CardProps>> = {\n  padding: 'regular',\n  highContrast: false,\n  alignCenter: false,\n  header: 'Example Header',\n};\n\nexport const CardExample = Template.bind({});\nCardExample.args = {\n  ...defaultArgs,\n  notification: '',\n};\n\nexport const WithNotification = Template.bind({});\nWithNotification.args = {\n  ...defaultArgs,\n  notification: 'This is an example notification',\n};\n\nexport const WithChildren = Template.bind({});\nWithChildren.args = {\n  ...defaultArgs,\n  children:\n    \"Chuck Norris is the reason why Waldo is hiding Remember the Soviet Union? They decided to quit after watching a DeltaForce marathon on Satellite TV, Chuck Norris CAN eat soup with a fork Morgan Freeman is the only person that could narrate Chuck Norris's life, other than himself, The quickest way to a man's heart is with Chuck Norris' fist. Chuck Norris ran in Nascar and came in 1st place. Then again, Chuck Norris wins everything.\",\n};\n"],"names":["codeString","Card_stories","Card","Template","args","jsx","defaultArgs","CardExample","WithNotification","WithChildren"],"mappings":";;AAMA,MAAMA,IAAa,2CAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,cAAc;AAAA,MACZ,SAAS;AAAA,IACX;AAAA,IACA,SAAS;AAAA,MACP,SAAS;AAAA,QACP,MAAM;AAAA,QACN,SAAS,CAAC,SAAS,WAAW,OAAO;AAAA,MACvC;AAAA,IACF;AAAA,IACA,aAAa;AAAA,MACX,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EACF;AACF,GAEMG,IAAkD,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAM,GAAGE,EAAM,CAAA,GAE5EE,IAAqD;AAAA,EACzD,SAAS;AAAA,EACT,cAAc;AAAA,EACd,aAAa;AAAA,EACb,QAAQ;AACV,GAEaC,IAAcJ,EAAS,KAAK,EAAE;AAC3CI,EAAY,OAAO;AAAA,EACjB,GAAGD;AAAA,EACH,cAAc;AAChB;AAEO,MAAME,IAAmBL,EAAS,KAAK,EAAE;AAChDK,EAAiB,OAAO;AAAA,EACtB,GAAGF;AAAA,EACH,cAAc;AAChB;AAEO,MAAMG,IAAeN,EAAS,KAAK,EAAE;AAC5CM,EAAa,OAAO;AAAA,EAClB,GAAGH;AAAA,EACH,UACE;AACJ;"}

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,3 +1,4 @@
 import { InputHTMLAttributes } from 'react';
 export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style' | 'type'>;
+/** Represents a checkbox component. */
 export declare const Checkbox: ({ ...restProps }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\n\nimport styles from './Checkbox.module.css';\n\nexport type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style' | 'type'>;\n\nexport const Checkbox = ({ ...restProps }: CheckboxProps) => (\n  <input {...restProps} type=\"checkbox\" className={styles['checkbox']} />\n);\n"],"names":["Checkbox","restProps","jsx","styles"],"mappings":";;;GAMaA,IAAW,CAAC,EAAE,GAAGC,QAC5B,gBAAAC,EAAC,SAAO,EAAA,GAAGD,GAAW,MAAK,YAAW,WAAWE,EAAO,SAAa,CAAA;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\n\nimport styles from './Checkbox.module.css';\n\nexport type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style' | 'type'>;\n\n/** Represents a checkbox component. */\nexport const Checkbox = ({ ...restProps }: CheckboxProps) => (\n  <input {...restProps} type=\"checkbox\" className={styles['checkbox']} />\n);\n"],"names":["Checkbox","restProps","jsx","styles"],"mappings":";;;GAOaA,IAAW,CAAC,EAAE,GAAGC,QAC5B,gBAAAC,EAAC,SAAO,EAAA,GAAGD,GAAW,MAAK,YAAW,WAAWE,EAAO,SAAa,CAAA;"}

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

@@ -1,22 +1,23 @@
 import { jsxs as g, jsx as o } from "react/jsx-runtime";
 import { fn as e } from "../../index-MQ0yPLdl.js";
-import { Checkbox as l } from "./Checkbox.js";
+import { Checkbox as n } from "./Checkbox.js";
 import { FormField as t } from "../FormField/FormField.js";
-import { Label as r } from "../Label/Label.js";
-const i = "<Checkbox checked={} id={} onChange={} />", f = {
+import { Label as i } from "../Label/Label.js";
+const r = "<Checkbox checked={} id={} onChange={} />", C = {
   title: "Atoms/Checkbox",
-  component: l,
+  component: n,
   parameters: {
-    codeString: i
+    inspectComponent: n,
+    codeString: r
   }
-}, m = (n) => /* @__PURE__ */ g(t, { inline: !0, children: [
-  /* @__PURE__ */ o(l, { id: "72103b4d", ...n }),
-  /* @__PURE__ */ o(r, { htmlFor: "72103b4d", children: "Example Checkbox" })
-] }), a = m.bind({});
-a.args = {
+}, m = (l) => /* @__PURE__ */ g(t, { inline: !0, children: [
+  /* @__PURE__ */ o(n, { id: "72103b4d", ...l }),
+  /* @__PURE__ */ o(i, { htmlFor: "72103b4d", children: "Example Checkbox" })
+] }), c = m.bind({});
+c.args = {
   onChange: e()
 };
-const c = (n) => /* @__PURE__ */ g(t, { inline: !0, children: [
+const a = (l) => /* @__PURE__ */ g(t, { inline: !0, children: [
   /* @__PURE__ */ o(
     "div",
     {
@@ -24,17 +25,17 @@ const c = (n) => /* @__PURE__ */ g(t, { inline: !0, children: [
         alignSelf: "flex-start",
         marginTop: "0.18rem"
       },
-      children: /* @__PURE__ */ o(l, { id: "72103b4e", ...n })
+      children: /* @__PURE__ */ o(n, { id: "72103b4e", ...l })
     }
   ),
-  /* @__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({});
+  /* @__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" })
+] }), h = a.bind({});
 h.args = {
   onChange: e()
 };
 export {
-  a as CheckboxExample,
+  c as CheckboxExample,
   h as WithLongLabel,
-  f as default
+  C as default
 };
 //# sourceMappingURL=Checkbox.stories.js.map

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

@@ -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={} 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;"}
+{"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    inspectComponent: Checkbox,\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,kBAAkBA;AAAA,IAClB,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/CheckboxButton/CheckboxButton.d.ts

@@ -0,0 +1,16 @@
+export interface CheckboxButtonProps {
+    label: string;
+    value: string;
+    /** to set default status */
+    isChecked?: boolean;
+    /** The button variant. */
+    variant?: 'single' | 'start' | 'middle' | 'end';
+    /** `true` to disable the button; otherwise, `false`. The default is `false`. */
+    disabled?: boolean;
+    /** if set border becomes red */
+    notValid?: boolean;
+    /** The callback function that is invoked when the checkbox button changes value. */
+    onSetValue: (value: string | null) => void;
+}
+/** Represents a component that acts as a checkbox, it's either set or unset. */
+export declare const CheckboxButton: ({ label, value, isChecked, variant, disabled, notValid, onSetValue, }: CheckboxButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/CheckboxButton/CheckboxButton.js

@@ -0,0 +1,51 @@
+import { jsxs as i, jsx as n } from "react/jsx-runtime";
+import { c as d } from "../../clsx-OuTLNxxd.js";
+import { useId as l, useState as p } from "react";
+import '../../assets/CheckboxButton.css';const t = {
+  "checkbox-button__container": "_checkbox-button__container_sep9j_1",
+  "checkbox-button": "_checkbox-button_sep9j_1",
+  "checkbox-button--not-valid": "_checkbox-button--not-valid_sep9j_62",
+  "checkbox-button--single": "_checkbox-button--single_sep9j_72",
+  "checkbox-button--start": "_checkbox-button--start_sep9j_76",
+  "checkbox-button--middle": "_checkbox-button--middle_sep9j_80",
+  "checkbox-button--end": "_checkbox-button--end_sep9j_106"
+}, f = ({
+  label: e,
+  value: b,
+  isChecked: s = !1,
+  variant: h = "single",
+  disabled: _,
+  notValid: u,
+  onSetValue: x
+}) => {
+  const o = l(), [k, a] = p(s), r = (c) => {
+    a(c.target.checked), x(c.target.checked ? c.target.value : null);
+  };
+  return /* @__PURE__ */ i("span", { className: t["checkbox-button__container"], children: [
+    /* @__PURE__ */ n(
+      "input",
+      {
+        type: "checkbox",
+        id: `${o}${e}`,
+        disabled: _,
+        value: b,
+        checked: k,
+        onChange: r
+      }
+    ),
+    /* @__PURE__ */ n(
+      "label",
+      {
+        htmlFor: `${o}${e}`,
+        className: d(t["checkbox-button"], t[`checkbox-button--${h}`], {
+          [t["checkbox-button--not-valid"]]: u
+        }),
+        children: e
+      }
+    )
+  ] });
+};
+export {
+  f as CheckboxButton
+};
+//# sourceMappingURL=CheckboxButton.js.map

package/dist/components/CheckboxButton/CheckboxButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxButton.js","sources":["../../../src/components/CheckboxButton/CheckboxButton.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { ChangeEvent } from 'react';\n\nimport styles from './CheckboxButton.module.css';\n\nexport interface CheckboxButtonProps {\n  label: string;\n  value: string;\n  /** to set default status */\n  isChecked?: boolean;\n  /** The button variant. */\n  variant?: 'single' | 'start' | 'middle' | 'end';\n  /** `true` to disable the button; otherwise, `false`. The default is `false`. */\n  disabled?: boolean;\n  /** if set border becomes red */\n  notValid?: boolean;\n  /** The callback function that is invoked when the checkbox button changes value. */\n  onSetValue: (value: string | null) => void;\n}\n\n/** Represents a component that acts as a checkbox, it's either set or unset. */\nexport const CheckboxButton = ({\n  label,\n  value,\n  isChecked = false,\n  variant = 'single',\n  disabled,\n  notValid,\n  onSetValue,\n}: CheckboxButtonProps) => {\n  const idPrefix = useId();\n  const [checked, setChecked] = useState(isChecked);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    setChecked(event.target.checked);\n    onSetValue(event.target.checked ? event.target.value : null);\n  };\n\n  return (\n    <span className={styles['checkbox-button__container']}>\n      <input\n        type=\"checkbox\"\n        id={`${idPrefix}${label}`}\n        disabled={disabled}\n        value={value}\n        checked={checked}\n        onChange={handleChange}\n      />\n      <label\n        htmlFor={`${idPrefix}${label}`}\n        className={clsx(styles['checkbox-button'], styles[`checkbox-button--${variant}`], {\n          [styles['checkbox-button--not-valid']]: notValid,\n        })}\n      >\n        {label}\n      </label>\n    </span>\n  );\n};\n"],"names":["CheckboxButton","label","value","isChecked","variant","disabled","notValid","onSetValue","idPrefix","useId","checked","setChecked","useState","handleChange","event","jsxs","styles","jsx","clsx"],"mappings":";;;;;;;;;;;GAuBaA,IAAiB,CAAC;AAAA,EAC7B,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,SAAAC,IAAU;AAAA,EACV,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AACF,MAA2B;AACzB,QAAMC,IAAWC,KACX,CAACC,GAASC,CAAU,IAAIC,EAAST,CAAS,GAE1CU,IAAe,CAACC,MAAyC;AAClD,IAAAH,EAAAG,EAAM,OAAO,OAAO,GAC/BP,EAAWO,EAAM,OAAO,UAAUA,EAAM,OAAO,QAAQ,IAAI;AAAA,EAAA;AAG7D,SACG,gBAAAC,EAAA,QAAA,EAAK,WAAWC,EAAO,4BAA4B,GAClD,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,IAAI,GAAGT,CAAQ,GAAGP,CAAK;AAAA,QACvB,UAAAI;AAAA,QACA,OAAAH;AAAA,QACA,SAAAQ;AAAA,QACA,UAAUG;AAAA,MAAA;AAAA,IACZ;AAAA,IACA,gBAAAI;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS,GAAGT,CAAQ,GAAGP,CAAK;AAAA,QAC5B,WAAWiB,EAAKF,EAAO,iBAAiB,GAAGA,EAAO,oBAAoBZ,CAAO,EAAE,GAAG;AAAA,UAChF,CAACY,EAAO,4BAA4B,CAAC,GAAGV;AAAA,QAAA,CACzC;AAAA,QAEA,UAAAL;AAAA,MAAA;AAAA,IACH;AAAA,EACF,EAAA,CAAA;AAEJ;"}

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

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

package/dist/components/CheckboxButton/CheckboxButton.stories.js

@@ -0,0 +1,48 @@
+import { jsx as e } from "react/jsx-runtime";
+import { fn as n } from "../../index-MQ0yPLdl.js";
+import { CheckboxButton as o } from "./CheckboxButton.js";
+const a = "<CheckboxButton label={} value={} isChecked={} variant={} disabled={} notValid={} onSetValue={} key={} />", b = {
+  title: "Atoms/CheckboxButton",
+  component: o,
+  argTypes: {
+    label: {
+      control: "text"
+    },
+    value: {
+      control: "string"
+    },
+    isChecked: {
+      control: "boolean"
+    },
+    variant: {
+      options: ["single", "start", "middle", "end"],
+      control: "radio"
+    },
+    disabled: {
+      control: "boolean"
+    },
+    notValid: {
+      control: "boolean"
+    },
+    onSetValue: {
+      table: {
+        disable: !0
+      }
+    }
+  },
+  parameters: {
+    inspectComponent: o,
+    codeString: a
+  }
+}, l = (t) => /* @__PURE__ */ e(o, { ...t }), r = l.bind({});
+r.args = {
+  label: "1.2",
+  value: "1.2",
+  variant: "single",
+  onSetValue: n()
+};
+export {
+  r as CheckboxButtonExample,
+  b as default
+};
+//# sourceMappingURL=CheckboxButton.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxButton.stories.js","sources":["../../../src/components/CheckboxButton/CheckboxButton.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { CheckboxButtonProps } from './CheckboxButton';\n\nimport { CheckboxButton } from './CheckboxButton';\n\nconst codeString =\n  '<CheckboxButton label={} value={} isChecked={} variant={} disabled={} notValid={} onSetValue={} key={} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/CheckboxButton',\n  component: CheckboxButton,\n  argTypes: {\n    label: {\n      control: 'text',\n    },\n    value: {\n      control: 'string',\n    },\n    isChecked: {\n      control: 'boolean',\n    },\n    variant: {\n      options: ['single', 'start', 'middle', 'end'],\n      control: 'radio',\n    },\n    disabled: {\n      control: 'boolean',\n    },\n    notValid: {\n      control: 'boolean',\n    },\n    onSetValue: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    inspectComponent: CheckboxButton,\n    codeString: codeString,\n  },\n} as Meta<CheckboxButtonProps>;\n\nconst Template: StoryFn<CheckboxButtonProps> = (args) => <CheckboxButton {...args} />;\n\nexport const CheckboxButtonExample = Template.bind({});\nCheckboxButtonExample.args = {\n  label: '1.2',\n  value: '1.2',\n  variant: 'single',\n  onSetValue: fn(),\n};\n"],"names":["codeString","CheckboxButton_stories","CheckboxButton","Template","args","jsx","CheckboxButtonExample","fn"],"mappings":";;;AAOA,MAAMA,IACJ,6GAGaC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,WAAW;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA,SAAS;AAAA,MACP,SAAS,CAAC,UAAU,SAAS,UAAU,KAAK;AAAA,MAC5C,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,IACX;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EACF;AACF,GAEMG,IAAyC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAgB,GAAGE,EAAM,CAAA,GAEtEE,IAAwBH,EAAS,KAAK,EAAE;AACrDG,EAAsB,OAAO;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,SAAS;AAAA,EACT,YAAYC,EAAG;AACjB;"}

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

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

package/dist/components/CheckboxButton/index.js

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

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

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

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

@@ -0,0 +1,22 @@
+type CheckboxProps = {
+    label: string;
+    value: string;
+    disabled?: boolean;
+};
+export interface CheckboxButtonBarProps {
+    /** array with objects with label, value */
+    checkboxes: CheckboxProps[];
+    defaultValues?: string[];
+    label?: string;
+    /** 'top' | 'left' */
+    labelPosition?: 'top' | 'left';
+    required?: boolean;
+    /** error text to display if set */
+    notValidatedText?: string;
+    /** disables all checkboxes in the bar */
+    disableGroup?: boolean;
+    onSetValues: (value: string[]) => void;
+}
+/** Represents a component that shows a collection of [CheckboxButton](/story/atoms-checkboxbutton--checkbox-button-example)s. */
+export declare const CheckboxButtonBar: ({ checkboxes, defaultValues, label, labelPosition, required, notValidatedText, disableGroup, onSetValues, }: CheckboxButtonBarProps) => import("react/jsx-runtime").JSX.Element;
+export {};