@gusto/embedded-react-sdk 0.8.0 → 0.8.1

package/dist/components/Common/UI/Checkbox/Checkbox.js

@@ -1,8 +1,8 @@
 import { jsx as e, jsxs as C } from "react/jsx-runtime";
 import { useFieldIds as N } from "../hooks/useFieldIds.js";
 import c from "./Checkbox.module.scss.js";
-import F from "../../../../assets/icons/checkbox.svg.js";
-import { HorizontalFieldLayout as j } from "../HorizontalFieldLayout/HorizontalFieldLayout.js";
+import { HorizontalFieldLayout as F } from "../../HorizontalFieldLayout/HorizontalFieldLayout.js";
+import j from "../../../../assets/icons/checkbox.svg.js";
 const S = ({
   name: o,
   label: s,
@@ -28,7 +28,7 @@ const S = ({
     p?.(v.target.checked);
   };
   return /* @__PURE__ */ e(
-    j,
+    F,
     {
       label: s,
       description: r,
@@ -57,7 +57,7 @@ const S = ({
             className: c.checkboxInput
           }
         ),
-        /* @__PURE__ */ e("div", { className: c.checkbox, children: /* @__PURE__ */ e(F, { className: c.check }) })
+        /* @__PURE__ */ e("div", { className: c.checkbox, children: /* @__PURE__ */ e(j, { className: c.check }) })
       ] })
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../../../src/components/Common/UI/Checkbox/Checkbox.tsx"],"sourcesContent":["import type { ChangeEvent } from 'react'\nimport { useFieldIds } from '../hooks/useFieldIds'\nimport { HorizontalFieldLayout } from '../HorizontalFieldLayout'\nimport styles from './Checkbox.module.scss'\nimport type { CheckboxProps } from './CheckboxTypes'\nimport IconChecked from '@/assets/icons/checkbox.svg?react'\n\nexport const Checkbox = ({\n  name,\n  label,\n  description,\n  errorMessage,\n  isRequired,\n  inputRef,\n  value,\n  isInvalid = false,\n  isDisabled = false,\n  id,\n  onChange,\n  onBlur,\n  className,\n  shouldVisuallyHideLabel,\n  ...props\n}: CheckboxProps) => {\n  const { inputId, errorMessageId, descriptionId, ariaDescribedBy } = useFieldIds({\n    inputId: id,\n    errorMessage,\n    description,\n  })\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event.target.checked)\n  }\n\n  return (\n    <HorizontalFieldLayout\n      label={label}\n      description={description}\n      errorMessage={errorMessage}\n      isRequired={isRequired}\n      htmlFor={inputId}\n      errorMessageId={errorMessageId}\n      descriptionId={descriptionId}\n      shouldVisuallyHideLabel={shouldVisuallyHideLabel}\n      className={className}\n      {...props}\n    >\n      <div className={styles.checkboxWrapper}>\n        <input\n          type=\"checkbox\"\n          name={name}\n          disabled={isDisabled}\n          aria-invalid={isInvalid}\n          aria-describedby={ariaDescribedBy}\n          checked={value}\n          id={inputId}\n          ref={inputRef}\n          onBlur={onBlur}\n          onChange={handleChange}\n          className={styles.checkboxInput}\n        />\n        <div className={styles.checkbox}>\n          <IconChecked className={styles.check} />\n        </div>\n      </div>\n    </HorizontalFieldLayout>\n  )\n}\n"],"names":["Checkbox","name","label","description","errorMessage","isRequired","inputRef","value","isInvalid","isDisabled","id","onChange","onBlur","className","shouldVisuallyHideLabel","props","inputId","errorMessageId","descriptionId","ariaDescribedBy","useFieldIds","handleChange","event","jsx","HorizontalFieldLayout","jsxs","styles","IconChecked"],"mappings":";;;;;AAOO,MAAMA,IAAW,CAAC;AAAA,EACvB,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,YAAAC,IAAa;AAAA,EACb,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,yBAAAC;AAAA,EACA,GAAGC;AACL,MAAqB;AACnB,QAAM,EAAE,SAAAC,GAAS,gBAAAC,GAAgB,eAAAC,GAAe,iBAAAC,EAAA,IAAoBC,EAAY;AAAA,IAC9E,SAASV;AAAA,IACT,cAAAN;AAAA,IACA,aAAAD;AAAA,EAAA,CACD,GAEKkB,IAAe,CAACC,MAAyC;AAClD,IAAAX,IAAAW,EAAM,OAAO,OAAO;AAAA,EACjC;AAGE,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAtB;AAAA,MACA,aAAAC;AAAA,MACA,cAAAC;AAAA,MACA,YAAAC;AAAA,MACA,SAASW;AAAA,MACT,gBAAAC;AAAA,MACA,eAAAC;AAAA,MACA,yBAAAJ;AAAA,MACA,WAAAD;AAAA,MACC,GAAGE;AAAA,MAEJ,UAAC,gBAAAU,EAAA,OAAA,EAAI,WAAWC,EAAO,iBACrB,UAAA;AAAA,QAAA,gBAAAH;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,MAAAtB;AAAA,YACA,UAAUQ;AAAA,YACV,gBAAcD;AAAA,YACd,oBAAkBW;AAAA,YAClB,SAASZ;AAAA,YACT,IAAIS;AAAA,YACJ,KAAKV;AAAA,YACL,QAAAM;AAAA,YACA,UAAUS;AAAA,YACV,WAAWK,EAAO;AAAA,UAAA;AAAA,QACpB;AAAA,QACA,gBAAAH,EAAC,OAAI,EAAA,WAAWG,EAAO,UACrB,4BAACC,GAAY,EAAA,WAAWD,EAAO,MAAO,CAAA,EACxC,CAAA;AAAA,MAAA,EACF,CAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../../../src/components/Common/UI/Checkbox/Checkbox.tsx"],"sourcesContent":["import type { ChangeEvent } from 'react'\nimport { useFieldIds } from '../hooks/useFieldIds'\nimport styles from './Checkbox.module.scss'\nimport type { CheckboxProps } from './CheckboxTypes'\nimport { HorizontalFieldLayout } from '@/components/Common/HorizontalFieldLayout'\nimport IconChecked from '@/assets/icons/checkbox.svg?react'\n\nexport const Checkbox = ({\n  name,\n  label,\n  description,\n  errorMessage,\n  isRequired,\n  inputRef,\n  value,\n  isInvalid = false,\n  isDisabled = false,\n  id,\n  onChange,\n  onBlur,\n  className,\n  shouldVisuallyHideLabel,\n  ...props\n}: CheckboxProps) => {\n  const { inputId, errorMessageId, descriptionId, ariaDescribedBy } = useFieldIds({\n    inputId: id,\n    errorMessage,\n    description,\n  })\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event.target.checked)\n  }\n\n  return (\n    <HorizontalFieldLayout\n      label={label}\n      description={description}\n      errorMessage={errorMessage}\n      isRequired={isRequired}\n      htmlFor={inputId}\n      errorMessageId={errorMessageId}\n      descriptionId={descriptionId}\n      shouldVisuallyHideLabel={shouldVisuallyHideLabel}\n      className={className}\n      {...props}\n    >\n      <div className={styles.checkboxWrapper}>\n        <input\n          type=\"checkbox\"\n          name={name}\n          disabled={isDisabled}\n          aria-invalid={isInvalid}\n          aria-describedby={ariaDescribedBy}\n          checked={value}\n          id={inputId}\n          ref={inputRef}\n          onBlur={onBlur}\n          onChange={handleChange}\n          className={styles.checkboxInput}\n        />\n        <div className={styles.checkbox}>\n          <IconChecked className={styles.check} />\n        </div>\n      </div>\n    </HorizontalFieldLayout>\n  )\n}\n"],"names":["Checkbox","name","label","description","errorMessage","isRequired","inputRef","value","isInvalid","isDisabled","id","onChange","onBlur","className","shouldVisuallyHideLabel","props","inputId","errorMessageId","descriptionId","ariaDescribedBy","useFieldIds","handleChange","event","jsx","HorizontalFieldLayout","jsxs","styles","IconChecked"],"mappings":";;;;;AAOO,MAAMA,IAAW,CAAC;AAAA,EACvB,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,YAAAC,IAAa;AAAA,EACb,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,yBAAAC;AAAA,EACA,GAAGC;AACL,MAAqB;AACnB,QAAM,EAAE,SAAAC,GAAS,gBAAAC,GAAgB,eAAAC,GAAe,iBAAAC,EAAA,IAAoBC,EAAY;AAAA,IAC9E,SAASV;AAAA,IACT,cAAAN;AAAA,IACA,aAAAD;AAAA,EAAA,CACD,GAEKkB,IAAe,CAACC,MAAyC;AAClD,IAAAX,IAAAW,EAAM,OAAO,OAAO;AAAA,EACjC;AAGE,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAtB;AAAA,MACA,aAAAC;AAAA,MACA,cAAAC;AAAA,MACA,YAAAC;AAAA,MACA,SAASW;AAAA,MACT,gBAAAC;AAAA,MACA,eAAAC;AAAA,MACA,yBAAAJ;AAAA,MACA,WAAAD;AAAA,MACC,GAAGE;AAAA,MAEJ,UAAC,gBAAAU,EAAA,OAAA,EAAI,WAAWC,EAAO,iBACrB,UAAA;AAAA,QAAA,gBAAAH;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,MAAAtB;AAAA,YACA,UAAUQ;AAAA,YACV,gBAAcD;AAAA,YACd,oBAAkBW;AAAA,YAClB,SAASZ;AAAA,YACT,IAAIS;AAAA,YACJ,KAAKV;AAAA,YACL,QAAAM;AAAA,YACA,UAAUS;AAAA,YACV,WAAWK,EAAO;AAAA,UAAA;AAAA,QACpB;AAAA,QACA,gBAAAH,EAAC,OAAI,EAAA,WAAWG,EAAO,UACrB,4BAACC,GAAY,EAAA,WAAWD,EAAO,MAAO,CAAA,EACxC,CAAA;AAAA,MAAA,EACF,CAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/components/Common/UI/Checkbox/CheckboxTypes.d.ts

@@ -1,9 +1,24 @@
 import { InputHTMLAttributes, Ref } from 'react';
-import { SharedHorizontalFieldLayoutProps } from '../HorizontalFieldLayout/HorizontalFieldLayoutTypes';
+import { SharedHorizontalFieldLayoutProps } from '../../HorizontalFieldLayout/HorizontalFieldLayoutTypes';
 export interface CheckboxProps extends SharedHorizontalFieldLayoutProps, Pick<InputHTMLAttributes<HTMLInputElement>, 'name' | 'id' | 'className' | 'onBlur'> {
+    /**
+     * Current checked state of the checkbox
+     */
     value?: boolean;
+    /**
+     * Callback when checkbox state changes
+     */
     onChange?: (value: boolean) => void;
+    /**
+     * React ref for the checkbox input element
+     */
     inputRef?: Ref<HTMLInputElement>;
+    /**
+     * Indicates if the checkbox is in an invalid state
+     */
     isInvalid?: boolean;
+    /**
+     * Disables the checkbox and prevents interaction
+     */
     isDisabled?: boolean;
 }

package/dist/components/Common/UI/CheckboxGroup/CheckboxGroup.js

@@ -5,8 +5,8 @@ import { CheckboxGroup as G, CheckboxGroupStateContext as g } from "react-aria-c
 import { useCheckboxGroupItem as I } from "react-aria";
 import { Checkbox as y } from "../Checkbox/Checkbox.js";
 import D from "./CheckboxGroup.module.scss.js";
-import { useForkRef as V } from "../../../../hooks/useForkRef/useForkRef.js";
-import { Fieldset as A } from "../Fieldset/Fieldset.js";
+import { Fieldset as V } from "../../Fieldset/Fieldset.js";
+import { useForkRef as A } from "../../../../hooks/useForkRef/useForkRef.js";
 function F({
   label: r,
   description: e,
@@ -15,7 +15,7 @@ function F({
   inputRef: l,
   ...s
 }) {
-  const n = R(null), c = V(l, n), { inputProps: f, isSelected: p, isDisabled: u, isInvalid: m } = I(
+  const n = R(null), c = A(l, n), { inputProps: f, isSelected: p, isDisabled: u, isInvalid: m } = I(
     {
       ...s,
       value: i,
@@ -64,7 +64,7 @@ function w({
   ...d
 }) {
   return /* @__PURE__ */ a(
-    A,
+    V,
     {
       legend: r,
       description: e,

package/dist/components/Common/UI/CheckboxGroup/CheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.js","sources":["../../../../../src/components/Common/UI/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["import { useContext, useRef } from 'react'\nimport type { Ref } from 'react'\nimport classNames from 'classnames'\nimport {\n  CheckboxGroup as AriaCheckboxGroup,\n  CheckboxGroupStateContext,\n  type CheckboxGroupRenderProps,\n} from 'react-aria-components'\nimport { useCheckboxGroupItem } from 'react-aria'\nimport type { AriaCheckboxProps } from 'react-aria'\nimport type React from 'react'\nimport { Fieldset } from '../Fieldset'\nimport { Checkbox } from '../Checkbox'\nimport styles from './CheckboxGroup.module.scss'\nimport type { CheckboxGroupProps } from './CheckboxGroupTypes'\nimport { useForkRef } from '@/hooks/useForkRef/useForkRef'\n\n// Checkbox implementation specific to React Aria to get our checkbox to connect\n// to their CheckboxGroup component\ninterface ReactAriaCheckboxProps extends Omit<AriaCheckboxProps, 'value'> {\n  label: React.ReactNode\n  description?: React.ReactNode\n  value: string\n  groupState: CheckboxGroupRenderProps['state']\n  inputRef?: Ref<HTMLInputElement>\n}\n\nfunction ReactAriaCheckbox({\n  label,\n  description,\n  value,\n  groupState,\n  inputRef: inputRefFromProps,\n  ...props\n}: ReactAriaCheckboxProps) {\n  const internalInputRef = useRef<HTMLInputElement>(null)\n  const handleInputRef = useForkRef(inputRefFromProps, internalInputRef)\n\n  const { inputProps, isSelected, isDisabled, isInvalid } = useCheckboxGroupItem(\n    {\n      ...props,\n      value,\n      // Hack to suppress aria-label warning from React Aria. We don't actually\n      // use children for the mapping of our checkbox to React Aria and we already\n      // configure a label for our checkboxes.\n      children: ' ',\n      isRequired: false,\n    },\n    groupState,\n    internalInputRef,\n  )\n\n  const handleChange = (checked: boolean) => {\n    if (checked) {\n      groupState.addValue(value)\n    } else {\n      groupState.removeValue(value)\n    }\n  }\n\n  return (\n    <Checkbox\n      label={label}\n      inputRef={handleInputRef}\n      isDisabled={isDisabled}\n      isInvalid={isInvalid}\n      description={description}\n      onChange={handleChange}\n      value={isSelected}\n      name={inputProps.name}\n    />\n  )\n}\n\nfunction ReactAriaCheckboxWrapper(props: Omit<ReactAriaCheckboxProps, 'groupState'>) {\n  const groupState = useContext(CheckboxGroupStateContext)\n  // We can't render hooks conditionally so we have to use useCheckboxGroupItem above but\n  // groupState is only defined if the component is rendered within a CheckboxGroup\n  // This wrapper component gets around that by checking if groupState is defined which\n  // should always be the case for us since this component is only used within a CheckboxGroup\n  return groupState ? <ReactAriaCheckbox groupState={groupState} {...props} /> : null\n}\n\nexport function CheckboxGroup({\n  label,\n  description,\n  errorMessage,\n  isRequired = false,\n  isInvalid = false,\n  isDisabled = false,\n  options,\n  shouldVisuallyHideLabel = false,\n  value,\n  onChange,\n  className,\n  inputRef,\n  ...props\n}: CheckboxGroupProps) {\n  return (\n    <Fieldset\n      legend={label}\n      description={description}\n      errorMessage={errorMessage}\n      isRequired={isRequired}\n      shouldVisuallyHideLegend={shouldVisuallyHideLabel}\n      className={classNames(styles.root, className)}\n      {...props}\n    >\n      <AriaCheckboxGroup\n        isInvalid={isInvalid}\n        isRequired={isRequired}\n        validationBehavior=\"aria\"\n        value={value}\n        onChange={onChange}\n        isDisabled={isDisabled}\n        aria-labelledby=\" \"\n      >\n        {options.map(({ value, label, isDisabled = false, description }, index) => (\n          <ReactAriaCheckboxWrapper\n            isDisabled={isDisabled}\n            key={value}\n            value={value}\n            description={description}\n            label={label}\n            inputRef={index === 0 ? inputRef : undefined}\n          />\n        ))}\n      </AriaCheckboxGroup>\n    </Fieldset>\n  )\n}\n"],"names":["ReactAriaCheckbox","label","description","value","groupState","inputRefFromProps","props","internalInputRef","useRef","handleInputRef","useForkRef","inputProps","isSelected","isDisabled","isInvalid","useCheckboxGroupItem","jsx","Checkbox","checked","ReactAriaCheckboxWrapper","useContext","CheckboxGroupStateContext","CheckboxGroup","errorMessage","isRequired","options","shouldVisuallyHideLabel","onChange","className","inputRef","Fieldset","classNames","styles","AriaCheckboxGroup","index"],"mappings":";;;;;;;;;AA2BA,SAASA,EAAkB;AAAA,EACzB,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAUC;AAAA,EACV,GAAGC;AACL,GAA2B;AACnB,QAAAC,IAAmBC,EAAyB,IAAI,GAChDC,IAAiBC,EAAWL,GAAmBE,CAAgB,GAE/D,EAAE,YAAAI,GAAY,YAAAC,GAAY,YAAAC,GAAY,WAAAC,EAAc,IAAAC;AAAA,IACxD;AAAA,MACE,GAAGT;AAAA,MACH,OAAAH;AAAA;AAAA;AAAA;AAAA,MAIA,UAAU;AAAA,MACV,YAAY;AAAA,IACd;AAAA,IACAC;AAAA,IACAG;AAAA,EACF;AAWE,SAAA,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAhB;AAAA,MACA,UAAUQ;AAAA,MACV,YAAAI;AAAA,MACA,WAAAC;AAAA,MACA,aAAAZ;AAAA,MACA,UAfiB,CAACgB,MAAqB;AACzC,QAAIA,IACFd,EAAW,SAASD,CAAK,IAEzBC,EAAW,YAAYD,CAAK;AAAA,MAEhC;AAAA,MAUI,OAAOS;AAAA,MACP,MAAMD,EAAW;AAAA,IAAA;AAAA,EACnB;AAEJ;AAEA,SAASQ,EAAyBb,GAAmD;AAC7E,QAAAF,IAAagB,EAAWC,CAAyB;AAKvD,SAAOjB,IAAc,gBAAAY,EAAAhB,GAAA,EAAkB,YAAAI,GAAyB,GAAGE,EAAO,CAAA,IAAK;AACjF;AAEO,SAASgB,EAAc;AAAA,EAC5B,OAAArB;AAAA,EACA,aAAAC;AAAA,EACA,cAAAqB;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,WAAAV,IAAY;AAAA,EACZ,YAAAD,IAAa;AAAA,EACb,SAAAY;AAAA,EACA,yBAAAC,IAA0B;AAAA,EAC1B,OAAAvB;AAAA,EACA,UAAAwB;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGvB;AACL,GAAuB;AAEnB,SAAA,gBAAAU;AAAA,IAACc;AAAA,IAAA;AAAA,MACC,QAAQ7B;AAAA,MACR,aAAAC;AAAA,MACA,cAAAqB;AAAA,MACA,YAAAC;AAAA,MACA,0BAA0BE;AAAA,MAC1B,WAAWK,EAAWC,EAAO,MAAMJ,CAAS;AAAA,MAC3C,GAAGtB;AAAA,MAEJ,UAAA,gBAAAU;AAAA,QAACiB;AAAAA,QAAA;AAAA,UACC,WAAAnB;AAAA,UACA,YAAAU;AAAA,UACA,oBAAmB;AAAA,UACnB,OAAArB;AAAA,UACA,UAAAwB;AAAA,UACA,YAAAd;AAAA,UACA,mBAAgB;AAAA,UAEf,UAAQY,EAAA,IAAI,CAAC,EAAE,OAAAtB,GAAO,OAAAF,GAAO,YAAAY,IAAa,IAAO,aAAAX,EAAAA,GAAegC,MAC/D,gBAAAlB;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,YAAYN;AAAAA,cAEZ,OAAOV;AAAAA,cACP,aAAaD;AAAAA,cACb,OAAOD;AAAAA,cACP,UAAUiC,MAAU,IAAIL,IAAW;AAAA,YAAA;AAAA,YAJ9B1B;AAAAA,UAMR,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"CheckboxGroup.js","sources":["../../../../../src/components/Common/UI/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["import { useContext, useRef } from 'react'\nimport type { Ref } from 'react'\nimport classNames from 'classnames'\nimport {\n  CheckboxGroup as AriaCheckboxGroup,\n  CheckboxGroupStateContext,\n  type CheckboxGroupRenderProps,\n} from 'react-aria-components'\nimport { useCheckboxGroupItem } from 'react-aria'\nimport type { AriaCheckboxProps } from 'react-aria'\nimport type React from 'react'\nimport { Checkbox } from '../Checkbox'\nimport styles from './CheckboxGroup.module.scss'\nimport type { CheckboxGroupProps } from './CheckboxGroupTypes'\nimport { Fieldset } from '@/components/Common/Fieldset'\nimport { useForkRef } from '@/hooks/useForkRef/useForkRef'\n\n// Checkbox implementation specific to React Aria to get our checkbox to connect\n// to their CheckboxGroup component\ninterface ReactAriaCheckboxProps extends Omit<AriaCheckboxProps, 'value'> {\n  label: React.ReactNode\n  description?: React.ReactNode\n  value: string\n  groupState: CheckboxGroupRenderProps['state']\n  inputRef?: Ref<HTMLInputElement>\n}\n\nfunction ReactAriaCheckbox({\n  label,\n  description,\n  value,\n  groupState,\n  inputRef: inputRefFromProps,\n  ...props\n}: ReactAriaCheckboxProps) {\n  const internalInputRef = useRef<HTMLInputElement>(null)\n  const handleInputRef = useForkRef(inputRefFromProps, internalInputRef)\n\n  const { inputProps, isSelected, isDisabled, isInvalid } = useCheckboxGroupItem(\n    {\n      ...props,\n      value,\n      // Hack to suppress aria-label warning from React Aria. We don't actually\n      // use children for the mapping of our checkbox to React Aria and we already\n      // configure a label for our checkboxes.\n      children: ' ',\n      isRequired: false,\n    },\n    groupState,\n    internalInputRef,\n  )\n\n  const handleChange = (checked: boolean) => {\n    if (checked) {\n      groupState.addValue(value)\n    } else {\n      groupState.removeValue(value)\n    }\n  }\n\n  return (\n    <Checkbox\n      label={label}\n      inputRef={handleInputRef}\n      isDisabled={isDisabled}\n      isInvalid={isInvalid}\n      description={description}\n      onChange={handleChange}\n      value={isSelected}\n      name={inputProps.name}\n    />\n  )\n}\n\nfunction ReactAriaCheckboxWrapper(props: Omit<ReactAriaCheckboxProps, 'groupState'>) {\n  const groupState = useContext(CheckboxGroupStateContext)\n  // We can't render hooks conditionally so we have to use useCheckboxGroupItem above but\n  // groupState is only defined if the component is rendered within a CheckboxGroup\n  // This wrapper component gets around that by checking if groupState is defined which\n  // should always be the case for us since this component is only used within a CheckboxGroup\n  return groupState ? <ReactAriaCheckbox groupState={groupState} {...props} /> : null\n}\n\nexport function CheckboxGroup({\n  label,\n  description,\n  errorMessage,\n  isRequired = false,\n  isInvalid = false,\n  isDisabled = false,\n  options,\n  shouldVisuallyHideLabel = false,\n  value,\n  onChange,\n  className,\n  inputRef,\n  ...props\n}: CheckboxGroupProps) {\n  return (\n    <Fieldset\n      legend={label}\n      description={description}\n      errorMessage={errorMessage}\n      isRequired={isRequired}\n      shouldVisuallyHideLegend={shouldVisuallyHideLabel}\n      className={classNames(styles.root, className)}\n      {...props}\n    >\n      <AriaCheckboxGroup\n        isInvalid={isInvalid}\n        isRequired={isRequired}\n        validationBehavior=\"aria\"\n        value={value}\n        onChange={onChange}\n        isDisabled={isDisabled}\n        aria-labelledby=\" \"\n      >\n        {options.map(({ value, label, isDisabled = false, description }, index) => (\n          <ReactAriaCheckboxWrapper\n            isDisabled={isDisabled}\n            key={value}\n            value={value}\n            description={description}\n            label={label}\n            inputRef={index === 0 ? inputRef : undefined}\n          />\n        ))}\n      </AriaCheckboxGroup>\n    </Fieldset>\n  )\n}\n"],"names":["ReactAriaCheckbox","label","description","value","groupState","inputRefFromProps","props","internalInputRef","useRef","handleInputRef","useForkRef","inputProps","isSelected","isDisabled","isInvalid","useCheckboxGroupItem","jsx","Checkbox","checked","ReactAriaCheckboxWrapper","useContext","CheckboxGroupStateContext","CheckboxGroup","errorMessage","isRequired","options","shouldVisuallyHideLabel","onChange","className","inputRef","Fieldset","classNames","styles","AriaCheckboxGroup","index"],"mappings":";;;;;;;;;AA2BA,SAASA,EAAkB;AAAA,EACzB,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAUC;AAAA,EACV,GAAGC;AACL,GAA2B;AACnB,QAAAC,IAAmBC,EAAyB,IAAI,GAChDC,IAAiBC,EAAWL,GAAmBE,CAAgB,GAE/D,EAAE,YAAAI,GAAY,YAAAC,GAAY,YAAAC,GAAY,WAAAC,EAAc,IAAAC;AAAA,IACxD;AAAA,MACE,GAAGT;AAAA,MACH,OAAAH;AAAA;AAAA;AAAA;AAAA,MAIA,UAAU;AAAA,MACV,YAAY;AAAA,IACd;AAAA,IACAC;AAAA,IACAG;AAAA,EACF;AAWE,SAAA,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAhB;AAAA,MACA,UAAUQ;AAAA,MACV,YAAAI;AAAA,MACA,WAAAC;AAAA,MACA,aAAAZ;AAAA,MACA,UAfiB,CAACgB,MAAqB;AACzC,QAAIA,IACFd,EAAW,SAASD,CAAK,IAEzBC,EAAW,YAAYD,CAAK;AAAA,MAEhC;AAAA,MAUI,OAAOS;AAAA,MACP,MAAMD,EAAW;AAAA,IAAA;AAAA,EACnB;AAEJ;AAEA,SAASQ,EAAyBb,GAAmD;AAC7E,QAAAF,IAAagB,EAAWC,CAAyB;AAKvD,SAAOjB,IAAc,gBAAAY,EAAAhB,GAAA,EAAkB,YAAAI,GAAyB,GAAGE,EAAO,CAAA,IAAK;AACjF;AAEO,SAASgB,EAAc;AAAA,EAC5B,OAAArB;AAAA,EACA,aAAAC;AAAA,EACA,cAAAqB;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,WAAAV,IAAY;AAAA,EACZ,YAAAD,IAAa;AAAA,EACb,SAAAY;AAAA,EACA,yBAAAC,IAA0B;AAAA,EAC1B,OAAAvB;AAAA,EACA,UAAAwB;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGvB;AACL,GAAuB;AAEnB,SAAA,gBAAAU;AAAA,IAACc;AAAA,IAAA;AAAA,MACC,QAAQ7B;AAAA,MACR,aAAAC;AAAA,MACA,cAAAqB;AAAA,MACA,YAAAC;AAAA,MACA,0BAA0BE;AAAA,MAC1B,WAAWK,EAAWC,EAAO,MAAMJ,CAAS;AAAA,MAC3C,GAAGtB;AAAA,MAEJ,UAAA,gBAAAU;AAAA,QAACiB;AAAAA,QAAA;AAAA,UACC,WAAAnB;AAAA,UACA,YAAAU;AAAA,UACA,oBAAmB;AAAA,UACnB,OAAArB;AAAA,UACA,UAAAwB;AAAA,UACA,YAAAd;AAAA,UACA,mBAAgB;AAAA,UAEf,UAAQY,EAAA,IAAI,CAAC,EAAE,OAAAtB,GAAO,OAAAF,GAAO,YAAAY,IAAa,IAAO,aAAAX,EAAAA,GAAegC,MAC/D,gBAAAlB;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,YAAYN;AAAAA,cAEZ,OAAOV;AAAAA,cACP,aAAaD;AAAAA,cACb,OAAOD;AAAAA,cACP,UAAUiC,MAAU,IAAIL,IAAW;AAAA,YAAA;AAAA,YAJ9B1B;AAAAA,UAMR,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EACF;AAEJ;"}

package/dist/components/Common/UI/CheckboxGroup/CheckboxGroupTypes.d.ts

@@ -1,16 +1,46 @@
 import { FieldsetHTMLAttributes, Ref } from 'react';
-import { SharedFieldLayoutProps } from '../FieldLayout/FieldLayoutTypes';
-export type CheckboxGroupOption = {
+import { SharedFieldLayoutProps } from '../../FieldLayout/FieldLayoutTypes';
+export interface CheckboxGroupOption {
+    /**
+     * Label text or content for the checkbox option
+     */
     label: React.ReactNode;
+    /**
+     * Value of the option that will be passed to onChange
+     */
     value: string;
+    /**
+     * Disables this specific checkbox option
+     */
     isDisabled?: boolean;
+    /**
+     * Optional description text for the checkbox option
+     */
     description?: React.ReactNode;
-};
+}
 export interface CheckboxGroupProps extends SharedFieldLayoutProps, Pick<FieldsetHTMLAttributes<HTMLFieldSetElement>, 'className'> {
+    /**
+     * Indicates if the checkbox group is in an invalid state
+     */
     isInvalid?: boolean;
+    /**
+     * Disables all checkbox options in the group
+     */
     isDisabled?: boolean;
+    /**
+     * Array of checkbox options to display
+     */
     options: Array<CheckboxGroupOption>;
+    /**
+     * Array of currently selected values
+     */
     value?: string[];
+    /**
+     * Callback when selection changes
+     */
     onChange?: (value: string[]) => void;
+    /**
+     * React ref for the first checkbox input element
+     */
     inputRef?: Ref<HTMLInputElement>;
 }

package/dist/components/Common/UI/ComboBox/ComboBox.js

@@ -5,11 +5,11 @@ import { useMemo as H } from "react";
 import d from "classnames";
 import { useFieldIds as K } from "../hooks/useFieldIds.js";
 import t from "./ComboBox.module.scss.js";
-import { useTheme as M } from "../../../../contexts/ThemeProvider/useTheme.js";
+import { FieldLayout as M } from "../../FieldLayout/FieldLayout.js";
+import { useTheme as U } from "../../../../contexts/ThemeProvider/useTheme.js";
 /* empty css                          */
-import U from "../../../../assets/icons/alert-circle.svg.js";
-import _ from "../../../../assets/icons/caret-down.svg.js";
-import { FieldLayout as $ } from "../FieldLayout/FieldLayout.js";
+import _ from "../../../../assets/icons/alert-circle.svg.js";
+import $ from "../../../../assets/icons/caret-down.svg.js";
 const oo = ({
   className: p,
   description: i,
@@ -33,9 +33,9 @@ const oo = ({
     inputId: f,
     errorMessage: m,
     description: i
-  }), { container: w } = M(), A = H(() => n.map((o) => ({ name: o.label, id: o.value })), [n]);
+  }), { container: w } = U(), A = H(() => n.map((o) => ({ name: o.label, id: o.value })), [n]);
   return /* @__PURE__ */ r(
-    $,
+    M,
     {
       label: s,
       htmlFor: l,
@@ -65,8 +65,8 @@ const oo = ({
             /* @__PURE__ */ e(T, { children: [
               /* @__PURE__ */ r(j, { ref: C, placeholder: b, onBlur: B, ...N }),
               /* @__PURE__ */ e("div", { "aria-hidden": "true", className: t.icons, children: [
-                a && /* @__PURE__ */ r(U, { fontSize: 16 }),
-                /* @__PURE__ */ r(_, { title: S("icons.selectArrow") })
+                a && /* @__PURE__ */ r(_, { fontSize: 16 }),
+                /* @__PURE__ */ r($, { title: S("icons.selectArrow") })
               ] })
             ] }),
             /* @__PURE__ */ r(

package/dist/components/Common/UI/ComboBox/ComboBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","sources":["../../../../../src/components/Common/UI/ComboBox/ComboBox.tsx"],"sourcesContent":["import type { Key } from 'react-aria-components'\nimport {\n  ComboBox as AriaComboBox,\n  Button,\n  Input,\n  ListBox,\n  ListBoxItem,\n  Popover,\n} from 'react-aria-components'\nimport { useTranslation } from 'react-i18next'\nimport { useMemo } from 'react'\nimport classNames from 'classnames'\nimport { FieldLayout } from '../FieldLayout'\nimport { useFieldIds } from '../hooks/useFieldIds'\nimport styles from './ComboBox.module.scss'\nimport type { ComboBoxProps } from './ComboBoxTypes'\nimport { useTheme } from '@/contexts/ThemeProvider'\nimport AlertCircle from '@/assets/icons/alert-circle.svg?react'\nimport CaretDown from '@/assets/icons/caret-down.svg?react'\n\nexport const ComboBox = ({\n  className,\n  description,\n  errorMessage,\n  id,\n  isDisabled,\n  isInvalid,\n  isRequired,\n  label,\n  onChange,\n  onBlur,\n  options,\n  placeholder,\n  value,\n  inputRef,\n  shouldVisuallyHideLabel,\n  name,\n  ...props\n}: ComboBoxProps) => {\n  const { t } = useTranslation()\n  const { inputId, errorMessageId, descriptionId, ariaDescribedBy } = useFieldIds({\n    inputId: id,\n    errorMessage,\n    description,\n  })\n  const { container } = useTheme()\n\n  const items = useMemo(() => {\n    return options.map(option => ({ name: option.label, id: option.value }))\n  }, [options])\n\n  return (\n    <FieldLayout\n      label={label}\n      htmlFor={inputId}\n      errorMessage={errorMessage}\n      errorMessageId={errorMessageId}\n      descriptionId={descriptionId}\n      isRequired={isRequired}\n      description={description}\n      shouldVisuallyHideLabel={shouldVisuallyHideLabel}\n      className={classNames(styles.root, className)}\n      withErrorIcon={false}\n    >\n      <AriaComboBox\n        aria-label={label}\n        aria-describedby={ariaDescribedBy}\n        className={'react-aria-ComboBox-root'}\n        isDisabled={isDisabled}\n        isInvalid={isInvalid}\n        onSelectionChange={key => {\n          if (key) {\n            onChange?.(key.toString())\n          }\n        }}\n        id={inputId}\n        selectedKey={value ? (value as Key) : undefined}\n        name={name}\n      >\n        <Button>\n          <Input ref={inputRef} placeholder={placeholder} onBlur={onBlur} {...props} />\n          <div aria-hidden=\"true\" className={styles.icons}>\n            {isInvalid && <AlertCircle fontSize={16} />}\n            <CaretDown title={t('icons.selectArrow')} />\n          </div>\n        </Button>\n\n        <Popover\n          className={classNames(styles.popover, 'react-aria-Popover')}\n          UNSTABLE_portalContainer={container.current}\n          maxHeight={320}\n        >\n          <ListBox items={items}>\n            {item => <ListBoxItem key={item.id}>{item.name}</ListBoxItem>}\n          </ListBox>\n        </Popover>\n      </AriaComboBox>\n    </FieldLayout>\n  )\n}\n"],"names":["ComboBox","className","description","errorMessage","id","isDisabled","isInvalid","isRequired","label","onChange","onBlur","options","placeholder","value","inputRef","shouldVisuallyHideLabel","name","props","t","useTranslation","inputId","errorMessageId","descriptionId","ariaDescribedBy","useFieldIds","container","useTheme","items","useMemo","option","jsx","FieldLayout","classNames","styles","jsxs","AriaComboBox","key","Button","Input","AlertCircle","CaretDown","Popover","ListBox","item","ListBoxItem"],"mappings":";;;;;;;;;;;;AAoBO,MAAMA,KAAW,CAAC;AAAA,EACvB,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,IAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,yBAAAC;AAAA,EACA,MAAAC;AAAA,EACA,GAAGC;AACL,MAAqB;AACb,QAAA,EAAE,GAAAC,EAAE,IAAIC,EAAe,GACvB,EAAE,SAAAC,GAAS,gBAAAC,GAAgB,eAAAC,GAAe,iBAAAC,EAAA,IAAoBC,EAAY;AAAA,IAC9E,SAASpB;AAAA,IACT,cAAAD;AAAA,IACA,aAAAD;AAAA,EAAA,CACD,GACK,EAAE,WAAAuB,EAAU,IAAIC,EAAS,GAEzBC,IAAQC,EAAQ,MACbjB,EAAQ,IAAI,CAAAkB,OAAW,EAAE,MAAMA,EAAO,OAAO,IAAIA,EAAO,MAAQ,EAAA,GACtE,CAAClB,CAAO,CAAC;AAGV,SAAA,gBAAAmB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAvB;AAAA,MACA,SAASY;AAAA,MACT,cAAAjB;AAAA,MACA,gBAAAkB;AAAA,MACA,eAAAC;AAAA,MACA,YAAAf;AAAA,MACA,aAAAL;AAAA,MACA,yBAAAa;AAAA,MACA,WAAWiB,EAAWC,EAAO,MAAMhC,CAAS;AAAA,MAC5C,eAAe;AAAA,MAEf,UAAA,gBAAAiC;AAAA,QAACC;AAAAA,QAAA;AAAA,UACC,cAAY3B;AAAA,UACZ,oBAAkBe;AAAA,UAClB,WAAW;AAAA,UACX,YAAAlB;AAAA,UACA,WAAAC;AAAA,UACA,mBAAmB,CAAO8B,MAAA;AACxB,YAAIA,KACS3B,IAAA2B,EAAI,UAAU;AAAA,UAE7B;AAAA,UACA,IAAIhB;AAAA,UACJ,aAAaP,KAAyB;AAAA,UACtC,MAAAG;AAAA,UAEA,UAAA;AAAA,YAAA,gBAAAkB,EAACG,GACC,EAAA,UAAA;AAAA,cAAA,gBAAAP,EAACQ,KAAM,KAAKxB,GAAU,aAAAF,GAA0B,QAAAF,GAAiB,GAAGO,GAAO;AAAA,gCAC1E,OAAI,EAAA,eAAY,QAAO,WAAWgB,EAAO,OACvC,UAAA;AAAA,gBAAa3B,KAAA,gBAAAwB,EAACS,GAAY,EAAA,UAAU,GAAI,CAAA;AAAA,gBACxC,gBAAAT,EAAAU,GAAA,EAAU,OAAOtB,EAAE,mBAAmB,EAAG,CAAA;AAAA,cAAA,EAC5C,CAAA;AAAA,YAAA,GACF;AAAA,YAEA,gBAAAY;AAAA,cAACW;AAAA,cAAA;AAAA,gBACC,WAAWT,EAAWC,EAAO,SAAS,oBAAoB;AAAA,gBAC1D,0BAA0BR,EAAU;AAAA,gBACpC,WAAW;AAAA,gBAEX,UAAA,gBAAAK,EAACY,GAAQ,EAAA,OAAAf,GACN,UAAQ,CAAAgB,MAAA,gBAAAb,EAACc,KAA2B,UAAKD,EAAA,KAAA,GAAfA,EAAK,EAAe,EACjD,CAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"ComboBox.js","sources":["../../../../../src/components/Common/UI/ComboBox/ComboBox.tsx"],"sourcesContent":["import type { Key } from 'react-aria-components'\nimport {\n  ComboBox as AriaComboBox,\n  Button,\n  Input,\n  ListBox,\n  ListBoxItem,\n  Popover,\n} from 'react-aria-components'\nimport { useTranslation } from 'react-i18next'\nimport { useMemo } from 'react'\nimport classNames from 'classnames'\nimport { useFieldIds } from '../hooks/useFieldIds'\nimport styles from './ComboBox.module.scss'\nimport type { ComboBoxProps } from './ComboBoxTypes'\nimport { FieldLayout } from '@/components/Common/FieldLayout'\nimport { useTheme } from '@/contexts/ThemeProvider'\nimport AlertCircle from '@/assets/icons/alert-circle.svg?react'\nimport CaretDown from '@/assets/icons/caret-down.svg?react'\n\nexport const ComboBox = ({\n  className,\n  description,\n  errorMessage,\n  id,\n  isDisabled,\n  isInvalid,\n  isRequired,\n  label,\n  onChange,\n  onBlur,\n  options,\n  placeholder,\n  value,\n  inputRef,\n  shouldVisuallyHideLabel,\n  name,\n  ...props\n}: ComboBoxProps) => {\n  const { t } = useTranslation()\n  const { inputId, errorMessageId, descriptionId, ariaDescribedBy } = useFieldIds({\n    inputId: id,\n    errorMessage,\n    description,\n  })\n  const { container } = useTheme()\n\n  const items = useMemo(() => {\n    return options.map(option => ({ name: option.label, id: option.value }))\n  }, [options])\n\n  return (\n    <FieldLayout\n      label={label}\n      htmlFor={inputId}\n      errorMessage={errorMessage}\n      errorMessageId={errorMessageId}\n      descriptionId={descriptionId}\n      isRequired={isRequired}\n      description={description}\n      shouldVisuallyHideLabel={shouldVisuallyHideLabel}\n      className={classNames(styles.root, className)}\n      withErrorIcon={false}\n    >\n      <AriaComboBox\n        aria-label={label}\n        aria-describedby={ariaDescribedBy}\n        className={'react-aria-ComboBox-root'}\n        isDisabled={isDisabled}\n        isInvalid={isInvalid}\n        onSelectionChange={key => {\n          if (key) {\n            onChange?.(key.toString())\n          }\n        }}\n        id={inputId}\n        selectedKey={value ? (value as Key) : undefined}\n        name={name}\n      >\n        <Button>\n          <Input ref={inputRef} placeholder={placeholder} onBlur={onBlur} {...props} />\n          <div aria-hidden=\"true\" className={styles.icons}>\n            {isInvalid && <AlertCircle fontSize={16} />}\n            <CaretDown title={t('icons.selectArrow')} />\n          </div>\n        </Button>\n\n        <Popover\n          className={classNames(styles.popover, 'react-aria-Popover')}\n          UNSTABLE_portalContainer={container.current}\n          maxHeight={320}\n        >\n          <ListBox items={items}>\n            {item => <ListBoxItem key={item.id}>{item.name}</ListBoxItem>}\n          </ListBox>\n        </Popover>\n      </AriaComboBox>\n    </FieldLayout>\n  )\n}\n"],"names":["ComboBox","className","description","errorMessage","id","isDisabled","isInvalid","isRequired","label","onChange","onBlur","options","placeholder","value","inputRef","shouldVisuallyHideLabel","name","props","t","useTranslation","inputId","errorMessageId","descriptionId","ariaDescribedBy","useFieldIds","container","useTheme","items","useMemo","option","jsx","FieldLayout","classNames","styles","jsxs","AriaComboBox","key","Button","Input","AlertCircle","CaretDown","Popover","ListBox","item","ListBoxItem"],"mappings":";;;;;;;;;;;;AAoBO,MAAMA,KAAW,CAAC;AAAA,EACvB,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,IAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,yBAAAC;AAAA,EACA,MAAAC;AAAA,EACA,GAAGC;AACL,MAAqB;AACb,QAAA,EAAE,GAAAC,EAAE,IAAIC,EAAe,GACvB,EAAE,SAAAC,GAAS,gBAAAC,GAAgB,eAAAC,GAAe,iBAAAC,EAAA,IAAoBC,EAAY;AAAA,IAC9E,SAASpB;AAAA,IACT,cAAAD;AAAA,IACA,aAAAD;AAAA,EAAA,CACD,GACK,EAAE,WAAAuB,EAAU,IAAIC,EAAS,GAEzBC,IAAQC,EAAQ,MACbjB,EAAQ,IAAI,CAAAkB,OAAW,EAAE,MAAMA,EAAO,OAAO,IAAIA,EAAO,MAAQ,EAAA,GACtE,CAAClB,CAAO,CAAC;AAGV,SAAA,gBAAAmB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAvB;AAAA,MACA,SAASY;AAAA,MACT,cAAAjB;AAAA,MACA,gBAAAkB;AAAA,MACA,eAAAC;AAAA,MACA,YAAAf;AAAA,MACA,aAAAL;AAAA,MACA,yBAAAa;AAAA,MACA,WAAWiB,EAAWC,EAAO,MAAMhC,CAAS;AAAA,MAC5C,eAAe;AAAA,MAEf,UAAA,gBAAAiC;AAAA,QAACC;AAAAA,QAAA;AAAA,UACC,cAAY3B;AAAA,UACZ,oBAAkBe;AAAA,UAClB,WAAW;AAAA,UACX,YAAAlB;AAAA,UACA,WAAAC;AAAA,UACA,mBAAmB,CAAO8B,MAAA;AACxB,YAAIA,KACS3B,IAAA2B,EAAI,UAAU;AAAA,UAE7B;AAAA,UACA,IAAIhB;AAAA,UACJ,aAAaP,KAAyB;AAAA,UACtC,MAAAG;AAAA,UAEA,UAAA;AAAA,YAAA,gBAAAkB,EAACG,GACC,EAAA,UAAA;AAAA,cAAA,gBAAAP,EAACQ,KAAM,KAAKxB,GAAU,aAAAF,GAA0B,QAAAF,GAAiB,GAAGO,GAAO;AAAA,gCAC1E,OAAI,EAAA,eAAY,QAAO,WAAWgB,EAAO,OACvC,UAAA;AAAA,gBAAa3B,KAAA,gBAAAwB,EAACS,GAAY,EAAA,UAAU,GAAI,CAAA;AAAA,gBACxC,gBAAAT,EAAAU,GAAA,EAAU,OAAOtB,EAAE,mBAAmB,EAAG,CAAA;AAAA,cAAA,EAC5C,CAAA;AAAA,YAAA,GACF;AAAA,YAEA,gBAAAY;AAAA,cAACW;AAAA,cAAA;AAAA,gBACC,WAAWT,EAAWC,EAAO,SAAS,oBAAoB;AAAA,gBAC1D,0BAA0BR,EAAU;AAAA,gBACpC,WAAW;AAAA,gBAEX,UAAA,gBAAAK,EAACY,GAAQ,EAAA,OAAAf,GACN,UAAQ,CAAAgB,MAAA,gBAAAb,EAACc,KAA2B,UAAKD,EAAA,KAAA,GAAfA,EAAK,EAAe,EACjD,CAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EACF;AAEJ;"}

package/dist/components/Common/UI/ComboBox/ComboBoxTypes.d.ts

@@ -1,16 +1,46 @@
 import { InputHTMLAttributes, Ref, FocusEvent } from 'react';
-import { SharedFieldLayoutProps } from '../FieldLayout/FieldLayoutTypes';
+import { SharedFieldLayoutProps } from '../../FieldLayout/FieldLayoutTypes';
 export interface ComboBoxOption {
+    /**
+     * Display text for the option
+     */
     label: string;
+    /**
+     * Value of the option that will be passed to onChange
+     */
     value: string;
 }
 export interface ComboBoxProps extends SharedFieldLayoutProps, Pick<InputHTMLAttributes<HTMLInputElement>, 'className' | 'id' | 'name' | 'placeholder'> {
+    /**
+     * Disables the combo box and prevents interaction
+     */
     isDisabled?: boolean;
+    /**
+     * Indicates that the field has an error
+     */
     isInvalid?: boolean;
+    /**
+     * Label text for the combo box field
+     */
     label: string;
+    /**
+     * Callback when selection changes
+     */
     onChange?: (value: string) => void;
+    /**
+     * Handler for blur events
+     */
     onBlur?: (e: FocusEvent) => void;
+    /**
+     * Array of options to display in the dropdown
+     */
     options: ComboBoxOption[];
+    /**
+     * Currently selected value
+     */
     value?: string;
+    /**
+     * React ref for the combo box input element
+     */
     inputRef?: Ref<HTMLInputElement>;
 }

package/dist/components/Common/UI/DatePicker/DatePicker.js

@@ -5,15 +5,15 @@ import u from "classnames";
 import { parseDate as H } from "@internationalized/date";
 import { useFieldIds as R } from "../hooks/useFieldIds.js";
 import i from "./DatePicker.module.scss.js";
+import { FieldLayout as U } from "../../FieldLayout/FieldLayout.js";
 import "react";
-import { useTheme as U } from "../../../../contexts/ThemeProvider/useTheme.js";
+import { useTheme as _ } from "../../../../contexts/ThemeProvider/useTheme.js";
 /* empty css                          */
-import _ from "../../../../assets/icons/caret-down.svg.js";
-import $ from "../../../../assets/icons/caret-right.svg.js";
-import q from "../../../../assets/icons/caret-left.svg.js";
-import J from "../../../../assets/icons/alert-circle.svg.js";
-import { formatDateToStringDate as K } from "../../../../helpers/dateFormatting.js";
-import { FieldLayout as O } from "../FieldLayout/FieldLayout.js";
+import $ from "../../../../assets/icons/caret-down.svg.js";
+import q from "../../../../assets/icons/caret-right.svg.js";
+import J from "../../../../assets/icons/caret-left.svg.js";
+import K from "../../../../assets/icons/alert-circle.svg.js";
+import { formatDateToStringDate as O } from "../../../../helpers/dateFormatting.js";
 function Q(e) {
   return e ? new Date(
     e.year,
@@ -41,11 +41,11 @@ const dr = ({
     inputId: D,
     errorMessage: l,
     description: n
-  }), { container: P } = U(), f = p ? K(p) : "", T = f ? H(f) : null, w = (t) => {
+  }), { container: P } = _(), f = p ? O(p) : "", T = f ? H(f) : null, w = (t) => {
     d && d(Q(t));
   };
   return /* @__PURE__ */ r(
-    O,
+    U,
     {
       label: s,
       htmlFor: h,
@@ -71,8 +71,8 @@ const dr = ({
             /* @__PURE__ */ o(k, { children: [
               /* @__PURE__ */ r(A, { ref: g, children: (t) => /* @__PURE__ */ r(B, { segment: t }) }),
               /* @__PURE__ */ o("div", { className: i.icons, children: [
-                m && /* @__PURE__ */ r(J, { "aria-hidden": "true", fontSize: 16 }),
-                /* @__PURE__ */ r(c, { onBlur: S, children: /* @__PURE__ */ r(_, { title: a("icons.calendarArrow") }) })
+                m && /* @__PURE__ */ r(K, { "aria-hidden": "true", fontSize: 16 }),
+                /* @__PURE__ */ r(c, { onBlur: S, children: /* @__PURE__ */ r($, { title: a("icons.calendarArrow") }) })
               ] })
             ] }),
             /* @__PURE__ */ r(
@@ -82,9 +82,9 @@ const dr = ({
                 UNSTABLE_portalContainer: P.current,
                 children: /* @__PURE__ */ r(L, { children: /* @__PURE__ */ o(j, { children: [
                   /* @__PURE__ */ o("header", { children: [
-                    /* @__PURE__ */ r(c, { slot: "previous", children: /* @__PURE__ */ r(q, { title: a("icons.previousMonth") }) }),
+                    /* @__PURE__ */ r(c, { slot: "previous", children: /* @__PURE__ */ r(J, { title: a("icons.previousMonth") }) }),
                     /* @__PURE__ */ r(E, {}),
-                    /* @__PURE__ */ r(c, { slot: "next", children: /* @__PURE__ */ r($, { title: a("icons.nextMonth") }) })
+                    /* @__PURE__ */ r(c, { slot: "next", children: /* @__PURE__ */ r(q, { title: a("icons.nextMonth") }) })
                   ] }),
                   /* @__PURE__ */ r(G, { children: (t) => /* @__PURE__ */ r(M, { date: t }) })
                 ] }) })

package/dist/components/Common/UI/DatePicker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sources":["../../../../../src/components/Common/UI/DatePicker/DatePicker.tsx"],"sourcesContent":["import {\n  DatePicker as AriaDatePicker,\n  Button,\n  Calendar,\n  CalendarCell,\n  CalendarGrid,\n  DateInput,\n  DateSegment,\n  Dialog,\n  Group,\n  Heading,\n  Popover,\n  type DateValue,\n} from 'react-aria-components'\nimport { useTranslation } from 'react-i18next'\nimport classNames from 'classnames'\nimport { parseDate } from '@internationalized/date'\nimport { FieldLayout } from '../FieldLayout'\nimport { useFieldIds } from '../hooks/useFieldIds'\nimport styles from './DatePicker.module.scss'\nimport type { DatePickerProps } from './DatePickerTypes'\nimport { useTheme } from '@/contexts/ThemeProvider'\nimport CaretDown from '@/assets/icons/caret-down.svg?react'\nimport CaretRight from '@/assets/icons/caret-right.svg?react'\nimport CaretLeft from '@/assets/icons/caret-left.svg?react'\nimport AlertCircle from '@/assets/icons/alert-circle.svg?react'\nimport { formatDateToStringDate } from '@/helpers/dateFormatting'\n\nfunction calendarDateValueToDate(dateValue: DateValue | null): Date | null {\n  if (!dateValue) return null\n\n  const date = new Date(\n    dateValue.year,\n    dateValue.month - 1, // DateValue months are 1-indexed\n    dateValue.day,\n  )\n\n  return date\n}\n\nexport const DatePicker = ({\n  className,\n  description,\n  errorMessage,\n  id,\n  inputRef,\n  isDisabled,\n  isInvalid,\n  isRequired,\n  label,\n  onChange,\n  onBlur,\n  value,\n  ...props\n}: DatePickerProps) => {\n  const { t } = useTranslation()\n  const { inputId, errorMessageId, descriptionId, ariaDescribedBy } = useFieldIds({\n    inputId: id,\n    errorMessage,\n    description,\n  })\n  const { container } = useTheme()\n\n  // Convert JavaScript Date to DateValue for internal use\n  // Format the date as YYYY-MM-DD for parseDate\n  const formattedDate = value ? formatDateToStringDate(value) : ''\n  const internalValue = formattedDate ? parseDate(formattedDate) : null\n\n  // Handle internal onChange to convert DateValue back to Date\n  const handleChange = (dateValue: DateValue | null) => {\n    if (onChange) {\n      onChange(calendarDateValueToDate(dateValue))\n    }\n  }\n\n  return (\n    <FieldLayout\n      label={label}\n      htmlFor={inputId}\n      errorMessage={errorMessage}\n      errorMessageId={errorMessageId}\n      descriptionId={descriptionId}\n      isRequired={isRequired}\n      description={description}\n      className={classNames(styles.root, className)}\n      withErrorIcon={false}\n    >\n      <div className={styles.container}>\n        <AriaDatePicker\n          aria-label={label}\n          aria-describedby={ariaDescribedBy}\n          id={inputId}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          value={internalValue}\n          onChange={handleChange}\n          {...props}\n        >\n          <Group>\n            <DateInput ref={inputRef}>{segment => <DateSegment segment={segment} />}</DateInput>\n\n            <div className={styles.icons}>\n              {isInvalid && <AlertCircle aria-hidden=\"true\" fontSize={16} />}\n              <Button onBlur={onBlur}>\n                <CaretDown title={t('icons.calendarArrow')} />\n              </Button>\n            </div>\n          </Group>\n          <Popover\n            className={classNames(styles.popover, 'react-aria-Popover')}\n            UNSTABLE_portalContainer={container.current}\n          >\n            <Dialog>\n              <Calendar>\n                <header>\n                  <Button slot=\"previous\">\n                    <CaretLeft title={t('icons.previousMonth')} />\n                  </Button>\n                  <Heading />\n                  <Button slot=\"next\">\n                    <CaretRight title={t('icons.nextMonth')} />\n                  </Button>\n                </header>\n                <CalendarGrid>{date => <CalendarCell date={date} />}</CalendarGrid>\n              </Calendar>\n            </Dialog>\n          </Popover>\n        </AriaDatePicker>\n      </div>\n    </FieldLayout>\n  )\n}\n"],"names":["calendarDateValueToDate","dateValue","DatePicker","className","description","errorMessage","id","inputRef","isDisabled","isInvalid","isRequired","label","onChange","onBlur","value","props","t","useTranslation","inputId","errorMessageId","descriptionId","ariaDescribedBy","useFieldIds","container","useTheme","formattedDate","formatDateToStringDate","internalValue","parseDate","handleChange","jsx","FieldLayout","classNames","styles","jsxs","AriaDatePicker","Group","DateInput","DateSegment","segment","AlertCircle","Button","CaretDown","Popover","Dialog","Calendar","CaretLeft","Heading","CaretRight","CalendarGrid","date","CalendarCell"],"mappings":"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"}
+{"version":3,"file":"DatePicker.js","sources":["../../../../../src/components/Common/UI/DatePicker/DatePicker.tsx"],"sourcesContent":["import {\n  DatePicker as AriaDatePicker,\n  Button,\n  Calendar,\n  CalendarCell,\n  CalendarGrid,\n  DateInput,\n  DateSegment,\n  Dialog,\n  Group,\n  Heading,\n  Popover,\n  type DateValue,\n} from 'react-aria-components'\nimport { useTranslation } from 'react-i18next'\nimport classNames from 'classnames'\nimport { parseDate } from '@internationalized/date'\nimport { useFieldIds } from '../hooks/useFieldIds'\nimport styles from './DatePicker.module.scss'\nimport type { DatePickerProps } from './DatePickerTypes'\nimport { FieldLayout } from '@/components/Common/FieldLayout'\nimport { useTheme } from '@/contexts/ThemeProvider'\nimport CaretDown from '@/assets/icons/caret-down.svg?react'\nimport CaretRight from '@/assets/icons/caret-right.svg?react'\nimport CaretLeft from '@/assets/icons/caret-left.svg?react'\nimport AlertCircle from '@/assets/icons/alert-circle.svg?react'\nimport { formatDateToStringDate } from '@/helpers/dateFormatting'\n\nfunction calendarDateValueToDate(dateValue: DateValue | null): Date | null {\n  if (!dateValue) return null\n\n  const date = new Date(\n    dateValue.year,\n    dateValue.month - 1, // DateValue months are 1-indexed\n    dateValue.day,\n  )\n\n  return date\n}\n\nexport const DatePicker = ({\n  className,\n  description,\n  errorMessage,\n  id,\n  inputRef,\n  isDisabled,\n  isInvalid,\n  isRequired,\n  label,\n  onChange,\n  onBlur,\n  value,\n  ...props\n}: DatePickerProps) => {\n  const { t } = useTranslation()\n  const { inputId, errorMessageId, descriptionId, ariaDescribedBy } = useFieldIds({\n    inputId: id,\n    errorMessage,\n    description,\n  })\n  const { container } = useTheme()\n\n  // Convert JavaScript Date to DateValue for internal use\n  // Format the date as YYYY-MM-DD for parseDate\n  const formattedDate = value ? formatDateToStringDate(value) : ''\n  const internalValue = formattedDate ? parseDate(formattedDate) : null\n\n  // Handle internal onChange to convert DateValue back to Date\n  const handleChange = (dateValue: DateValue | null) => {\n    if (onChange) {\n      onChange(calendarDateValueToDate(dateValue))\n    }\n  }\n\n  return (\n    <FieldLayout\n      label={label}\n      htmlFor={inputId}\n      errorMessage={errorMessage}\n      errorMessageId={errorMessageId}\n      descriptionId={descriptionId}\n      isRequired={isRequired}\n      description={description}\n      className={classNames(styles.root, className)}\n      withErrorIcon={false}\n    >\n      <div className={styles.container}>\n        <AriaDatePicker\n          aria-label={label}\n          aria-describedby={ariaDescribedBy}\n          id={inputId}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          value={internalValue}\n          onChange={handleChange}\n          {...props}\n        >\n          <Group>\n            <DateInput ref={inputRef}>{segment => <DateSegment segment={segment} />}</DateInput>\n\n            <div className={styles.icons}>\n              {isInvalid && <AlertCircle aria-hidden=\"true\" fontSize={16} />}\n              <Button onBlur={onBlur}>\n                <CaretDown title={t('icons.calendarArrow')} />\n              </Button>\n            </div>\n          </Group>\n          <Popover\n            className={classNames(styles.popover, 'react-aria-Popover')}\n            UNSTABLE_portalContainer={container.current}\n          >\n            <Dialog>\n              <Calendar>\n                <header>\n                  <Button slot=\"previous\">\n                    <CaretLeft title={t('icons.previousMonth')} />\n                  </Button>\n                  <Heading />\n                  <Button slot=\"next\">\n                    <CaretRight title={t('icons.nextMonth')} />\n                  </Button>\n                </header>\n                <CalendarGrid>{date => <CalendarCell date={date} />}</CalendarGrid>\n              </Calendar>\n            </Dialog>\n          </Popover>\n        </AriaDatePicker>\n      </div>\n    </FieldLayout>\n  )\n}\n"],"names":["calendarDateValueToDate","dateValue","DatePicker","className","description","errorMessage","id","inputRef","isDisabled","isInvalid","isRequired","label","onChange","onBlur","value","props","t","useTranslation","inputId","errorMessageId","descriptionId","ariaDescribedBy","useFieldIds","container","useTheme","formattedDate","formatDateToStringDate","internalValue","parseDate","handleChange","jsx","FieldLayout","classNames","styles","jsxs","AriaDatePicker","Group","DateInput","DateSegment","segment","AlertCircle","Button","CaretDown","Popover","Dialog","Calendar","CaretLeft","Heading","CaretRight","CalendarGrid","date","CalendarCell"],"mappings":"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"}

package/dist/components/Common/UI/DatePicker/DatePickerTypes.d.ts

@@ -1,12 +1,36 @@
 import { InputHTMLAttributes, Ref, FocusEvent } from 'react';
-import { SharedFieldLayoutProps } from '../FieldLayout/FieldLayoutTypes';
+import { SharedFieldLayoutProps } from '../../FieldLayout/FieldLayoutTypes';
 export interface DatePickerProps extends SharedFieldLayoutProps, Pick<InputHTMLAttributes<HTMLInputElement>, 'className' | 'id' | 'name'> {
+    /**
+     * React ref for the date input element
+     */
     inputRef?: Ref<HTMLInputElement>;
+    /**
+     * Disables the date picker and prevents interaction
+     */
     isDisabled?: boolean;
+    /**
+     * Indicates that the field has an error
+     */
     isInvalid?: boolean;
+    /**
+     * Callback when selected date changes
+     */
     onChange?: (value: Date | null) => void;
+    /**
+     * Handler for blur events
+     */
     onBlur?: (e: FocusEvent) => void;
+    /**
+     * Label text for the date picker field
+     */
     label: string;
+    /**
+     * Currently selected date value
+     */
     value?: Date | null;
+    /**
+     * Placeholder text when no date is selected
+     */
     placeholder?: string;
 }

package/dist/components/Common/UI/Heading/HeadingTypes.d.ts

@@ -1,7 +1,19 @@
 import { HTMLAttributes, ReactNode } from 'react';
 export interface HeadingProps extends Pick<HTMLAttributes<HTMLHeadingElement>, 'className'> {
+    /**
+     * The HTML heading element to render (h1-h6)
+     */
     as: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /**
+     * Optional visual style to apply, independent of the semantic heading level
+     */
     styledAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /**
+     * Text alignment within the heading
+     */
     textAlign?: 'start' | 'center' | 'end';
+    /**
+     * Content to be displayed inside the heading
+     */
     children?: ReactNode;
 }

package/dist/components/Common/UI/Link/LinkTypes.d.ts

@@ -1,2 +1,54 @@
 import { AnchorHTMLAttributes } from 'react';
-export type LinkProps = Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'rel' | 'download' | 'children' | 'className' | 'id' | 'onKeyDown' | 'onKeyUp' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'title'>;
+export type LinkProps = Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 
+/**
+ * URL that the link points to
+ */
+'href'
+/**
+ * Specifies where to open the linked document
+ */
+ | 'target'
+/**
+ * Specifies the relationship between the current document and the linked document
+ */
+ | 'rel'
+/**
+ * Indicates that the link is for downloading a resource
+ */
+ | 'download'
+/**
+ * Content to be displayed inside the link
+ */
+ | 'children'
+/**
+ * Additional CSS class name
+ */
+ | 'className'
+/**
+ * Unique identifier for the link
+ */
+ | 'id'
+/**
+ * Handler for key down events
+ */
+ | 'onKeyDown'
+/**
+ * Handler for key up events
+ */
+ | 'onKeyUp'
+/**
+ * Accessible label for the link
+ */
+ | 'aria-label'
+/**
+ * ID of an element that labels this link
+ */
+ | 'aria-labelledby'
+/**
+ * ID of an element that describes this link
+ */
+ | 'aria-describedby'
+/**
+ * Title text shown on hover
+ */
+ | 'title'>;

package/dist/components/Common/UI/List/ListTypes.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes, ReactNode } from 'react';
+import { ReactNode } from 'react';
 export interface BaseListProps {
     /**
      * The list items to render
@@ -21,7 +21,5 @@ export interface BaseListProps {
      */
     'aria-describedby'?: string;
 }
-export interface UnorderedListProps extends BaseListProps, HTMLAttributes<HTMLUListElement> {
-}
-export interface OrderedListProps extends BaseListProps, HTMLAttributes<HTMLOListElement> {
-}
+export type UnorderedListProps = BaseListProps;
+export type OrderedListProps = BaseListProps;

package/dist/components/Common/UI/Menu/MenuTypes.d.ts

@@ -1,16 +1,46 @@
 import { ReactNode, RefObject } from 'react';
 import { DataAttributes } from '../../../../types/Helpers';
 export interface MenuItem extends DataAttributes {
+    /**
+     * Text label for the menu item
+     */
     label: string;
+    /**
+     * Optional icon to display before the label
+     */
     icon?: ReactNode;
+    /**
+     * Callback function when the menu item is clicked
+     */
     onClick: () => void;
+    /**
+     * Disables the menu item and prevents interaction
+     */
     isDisabled?: boolean;
+    /**
+     * Optional URL to navigate to when clicked
+     */
     href?: string;
 }
 export interface MenuProps extends DataAttributes {
+    /**
+     * Reference to the element that triggers the menu
+     */
     triggerRef?: RefObject<Element | null>;
+    /**
+     * Array of menu items to display
+     */
     items?: MenuItem[];
+    /**
+     * Controls whether the menu is currently open
+     */
     isOpen?: boolean;
+    /**
+     * Callback when the menu is closed
+     */
     onClose?: () => void;
+    /**
+     * Accessible label describing the menu's purpose
+     */
     'aria-label': string;
 }

package/dist/components/Common/UI/NumberInput/NumberInput.js

@@ -4,8 +4,8 @@ import { NumberField as P, Group as T } from "react-aria-components";
 import k from "classnames";
 import { useFieldIds as z } from "../hooks/useFieldIds.js";
 import A from "./NumberInput.module.scss.js";
-import { useLocale as C } from "../../../../contexts/LocaleProvider/useLocale.js";
-import { FieldLayout as H } from "../FieldLayout/FieldLayout.js";
+import { FieldLayout as C } from "../../FieldLayout/FieldLayout.js";
+import { useLocale as H } from "../../../../contexts/LocaleProvider/useLocale.js";
 import { Input as J } from "../Input/Input.js";
 function q({
   name: y,
@@ -32,7 +32,7 @@ function q({
   minimumFractionDigits: B,
   ...u
 }) {
-  const { locale: a, currency: n } = C(), { inputId: s, errorMessageId: E, descriptionId: L, ariaDescribedBy: S } = z({
+  const { locale: a, currency: n } = H(), { inputId: s, errorMessageId: E, descriptionId: L, ariaDescribedBy: S } = z({
     inputId: p,
     errorMessage: c,
     description: i
@@ -41,7 +41,7 @@ function q({
     currency: n
   }).formatToParts(0).find((M) => M.type === "currency")?.value, [n, a]);
   return /* @__PURE__ */ e(
-    H,
+    C,
     {
       label: h,
       description: i,