@gusto/embedded-react-sdk 0.8.0 → 0.8.2

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/DatePicker/index.d.ts

@@ -1 +1,2 @@
+import "./types/i18next.d.ts"
 export * from './DatePicker';

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/Heading/index.d.ts

@@ -1,2 +1,3 @@
+import "./types/i18next.d.ts"
 export { Heading } from './Heading';
 export type { HeadingProps } from './HeadingTypes';

package/dist/components/Common/UI/Input/index.d.ts

@@ -1,2 +1,3 @@
+import "./types/i18next.d.ts"
 export { Input } from './Input';
 export type { InputProps } from './InputTypes';

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/Link/index.d.ts

@@ -1 +1,2 @@
+import "./types/i18next.d.ts"
 export { Link } from './Link';

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/List/index.d.ts

@@ -1,3 +1,4 @@
+import "./types/i18next.d.ts"
 export { OrderedList } from './OrderedList';
 export { UnorderedList } from './UnorderedList';
 export type { BaseListProps, OrderedListProps, UnorderedListProps } from './ListTypes';

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/Menu/index.d.ts

@@ -1 +1,2 @@
+import "./types/i18next.d.ts"
 export { Menu } from './Menu';

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,

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

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.js","sources":["../../../../../src/components/Common/UI/NumberInput/NumberInput.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { Group, NumberField as AriaNumberField } from 'react-aria-components'\nimport classNames from 'classnames'\nimport { FieldLayout } from '../FieldLayout'\nimport { Input } from '../Input'\nimport { useFieldIds } from '../hooks/useFieldIds'\nimport styles from './NumberInput.module.scss'\nimport type { NumberInputProps } from './NumberInputTypes'\nimport { useLocale } from '@/contexts/LocaleProvider'\n\nexport function NumberInput({\n  name,\n  format,\n  inputRef,\n  id,\n  value,\n  description,\n  errorMessage,\n  isRequired,\n  placeholder,\n  isInvalid,\n  isDisabled,\n  onChange,\n  onBlur,\n  label,\n  min,\n  max,\n  shouldVisuallyHideLabel,\n  adornmentStart,\n  adornmentEnd,\n  className,\n  maximumFractionDigits,\n  minimumFractionDigits,\n  ...props\n}: NumberInputProps) {\n  const { locale, currency } = useLocale()\n  const { inputId, errorMessageId, descriptionId, ariaDescribedBy } = useFieldIds({\n    inputId: id,\n    errorMessage,\n    description,\n  })\n\n  const minValue = typeof min === 'string' ? Number(min) : min\n  const maxValue = typeof max === 'string' ? Number(max) : max\n\n  const currencySymbol = useMemo(() => {\n    return new Intl.NumberFormat(locale, {\n      style: 'currency',\n      currency,\n    })\n      .formatToParts(0)\n      .find(part => part.type === 'currency')?.value\n  }, [currency, locale])\n\n  return (\n    <FieldLayout\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={classNames(styles.root, className)}\n      withErrorIcon={false}\n      {...props}\n    >\n      <AriaNumberField\n        value={value}\n        name={name}\n        formatOptions={{\n          style: 'decimal',\n          minimumFractionDigits: format === 'currency' ? 2 : minimumFractionDigits,\n          maximumFractionDigits: format === 'currency' ? 2 : maximumFractionDigits,\n          currency,\n          currencyDisplay: 'symbol',\n        }}\n        isInvalid={isInvalid}\n        isDisabled={isDisabled}\n        isRequired={isRequired}\n        validationBehavior=\"aria\"\n        onChange={onChange}\n        // This is a hack to silence an unnecessary react-aria warning. The FieldLayout component\n        // already associates the label and input with htmlFor + ID. If we include a label id here,\n        // the label will get read twice by assistive tech. This evaluates to an empty string which\n        // does not get associated with any elements and does not get read.\n        aria-labelledby=\" \"\n        minValue={minValue}\n        maxValue={maxValue}\n        {...props}\n      >\n        <Group>\n          <Input\n            adornmentStart={adornmentStart || (format === 'currency' ? currencySymbol : null)}\n            adornmentEnd={adornmentEnd || (format === 'percent' ? '%' : null)}\n            id={inputId}\n            inputRef={inputRef}\n            onBlur={onBlur}\n            placeholder={placeholder}\n            aria-describedby={ariaDescribedBy}\n            isDisabled={isDisabled}\n          />\n        </Group>\n      </AriaNumberField>\n    </FieldLayout>\n  )\n}\n"],"names":["NumberInput","name","format","inputRef","id","value","description","errorMessage","isRequired","placeholder","isInvalid","isDisabled","onChange","onBlur","label","min","max","shouldVisuallyHideLabel","adornmentStart","adornmentEnd","className","maximumFractionDigits","minimumFractionDigits","props","locale","currency","useLocale","inputId","errorMessageId","descriptionId","ariaDescribedBy","useFieldIds","minValue","maxValue","currencySymbol","useMemo","part","jsx","FieldLayout","classNames","styles","AriaNumberField","Group","Input"],"mappings":";;;;;;;;;AAUO,SAASA,EAAY;AAAA,EAC1B,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,KAAAC;AAAA,EACA,KAAAC;AAAA,EACA,yBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,GAAGC;AACL,GAAqB;AACnB,QAAM,EAAE,QAAAC,GAAQ,UAAAC,EAAS,IAAIC,EAAU,GACjC,EAAE,SAAAC,GAAS,gBAAAC,GAAgB,eAAAC,GAAe,iBAAAC,EAAA,IAAoBC,EAAY;AAAA,IAC9E,SAAS3B;AAAA,IACT,cAAAG;AAAA,IACA,aAAAD;AAAA,EAAA,CACD,GAEK0B,IAAW,OAAOjB,KAAQ,WAAW,OAAOA,CAAG,IAAIA,GACnDkB,IAAW,OAAOjB,KAAQ,WAAW,OAAOA,CAAG,IAAIA,GAEnDkB,IAAiBC,EAAQ,MACtB,IAAI,KAAK,aAAaX,GAAQ;AAAA,IACnC,OAAO;AAAA,IACP,UAAAC;AAAA,EAAA,CACD,EACE,cAAc,CAAC,EACf,KAAK,CAAQW,MAAAA,EAAK,SAAS,UAAU,GAAG,OAC1C,CAACX,GAAUD,CAAM,CAAC;AAGnB,SAAA,gBAAAa;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAxB;AAAA,MACA,aAAAR;AAAA,MACA,cAAAC;AAAA,MACA,YAAAC;AAAA,MACA,SAASmB;AAAA,MACT,gBAAAC;AAAA,MACA,eAAAC;AAAA,MACA,yBAAAZ;AAAA,MACA,WAAWsB,EAAWC,EAAO,MAAMpB,CAAS;AAAA,MAC5C,eAAe;AAAA,MACd,GAAGG;AAAA,MAEJ,UAAA,gBAAAc;AAAA,QAACI;AAAAA,QAAA;AAAA,UACC,OAAApC;AAAA,UACA,MAAAJ;AAAA,UACA,eAAe;AAAA,YACb,OAAO;AAAA,YACP,uBAAuBC,MAAW,aAAa,IAAIoB;AAAA,YACnD,uBAAuBpB,MAAW,aAAa,IAAImB;AAAA,YACnD,UAAAI;AAAA,YACA,iBAAiB;AAAA,UACnB;AAAA,UACA,WAAAf;AAAA,UACA,YAAAC;AAAA,UACA,YAAAH;AAAA,UACA,oBAAmB;AAAA,UACnB,UAAAI;AAAA,UAKA,mBAAgB;AAAA,UAChB,UAAAoB;AAAA,UACA,UAAAC;AAAA,UACC,GAAGV;AAAA,UAEJ,4BAACmB,GACC,EAAA,UAAA,gBAAAL;AAAA,YAACM;AAAA,YAAA;AAAA,cACC,gBAAgBzB,MAAmBhB,MAAW,aAAagC,IAAiB;AAAA,cAC5E,cAAcf,MAAiBjB,MAAW,YAAY,MAAM;AAAA,cAC5D,IAAIyB;AAAA,cACJ,UAAAxB;AAAA,cACA,QAAAU;AAAA,cACA,aAAAJ;AAAA,cACA,oBAAkBqB;AAAA,cAClB,YAAAnB;AAAA,YAAA;AAAA,UAAA,EAEJ,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"NumberInput.js","sources":["../../../../../src/components/Common/UI/NumberInput/NumberInput.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { Group, NumberField as AriaNumberField } from 'react-aria-components'\nimport classNames from 'classnames'\nimport { Input } from '../Input'\nimport { useFieldIds } from '../hooks/useFieldIds'\nimport styles from './NumberInput.module.scss'\nimport type { NumberInputProps } from './NumberInputTypes'\nimport { FieldLayout } from '@/components/Common/FieldLayout'\nimport { useLocale } from '@/contexts/LocaleProvider'\n\nexport function NumberInput({\n  name,\n  format,\n  inputRef,\n  id,\n  value,\n  description,\n  errorMessage,\n  isRequired,\n  placeholder,\n  isInvalid,\n  isDisabled,\n  onChange,\n  onBlur,\n  label,\n  min,\n  max,\n  shouldVisuallyHideLabel,\n  adornmentStart,\n  adornmentEnd,\n  className,\n  maximumFractionDigits,\n  minimumFractionDigits,\n  ...props\n}: NumberInputProps) {\n  const { locale, currency } = useLocale()\n  const { inputId, errorMessageId, descriptionId, ariaDescribedBy } = useFieldIds({\n    inputId: id,\n    errorMessage,\n    description,\n  })\n\n  const minValue = typeof min === 'string' ? Number(min) : min\n  const maxValue = typeof max === 'string' ? Number(max) : max\n\n  const currencySymbol = useMemo(() => {\n    return new Intl.NumberFormat(locale, {\n      style: 'currency',\n      currency,\n    })\n      .formatToParts(0)\n      .find(part => part.type === 'currency')?.value\n  }, [currency, locale])\n\n  return (\n    <FieldLayout\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={classNames(styles.root, className)}\n      withErrorIcon={false}\n      {...props}\n    >\n      <AriaNumberField\n        value={value}\n        name={name}\n        formatOptions={{\n          style: 'decimal',\n          minimumFractionDigits: format === 'currency' ? 2 : minimumFractionDigits,\n          maximumFractionDigits: format === 'currency' ? 2 : maximumFractionDigits,\n          currency,\n          currencyDisplay: 'symbol',\n        }}\n        isInvalid={isInvalid}\n        isDisabled={isDisabled}\n        isRequired={isRequired}\n        validationBehavior=\"aria\"\n        onChange={onChange}\n        // This is a hack to silence an unnecessary react-aria warning. The FieldLayout component\n        // already associates the label and input with htmlFor + ID. If we include a label id here,\n        // the label will get read twice by assistive tech. This evaluates to an empty string which\n        // does not get associated with any elements and does not get read.\n        aria-labelledby=\" \"\n        minValue={minValue}\n        maxValue={maxValue}\n        {...props}\n      >\n        <Group>\n          <Input\n            adornmentStart={adornmentStart || (format === 'currency' ? currencySymbol : null)}\n            adornmentEnd={adornmentEnd || (format === 'percent' ? '%' : null)}\n            id={inputId}\n            inputRef={inputRef}\n            onBlur={onBlur}\n            placeholder={placeholder}\n            aria-describedby={ariaDescribedBy}\n            isDisabled={isDisabled}\n          />\n        </Group>\n      </AriaNumberField>\n    </FieldLayout>\n  )\n}\n"],"names":["NumberInput","name","format","inputRef","id","value","description","errorMessage","isRequired","placeholder","isInvalid","isDisabled","onChange","onBlur","label","min","max","shouldVisuallyHideLabel","adornmentStart","adornmentEnd","className","maximumFractionDigits","minimumFractionDigits","props","locale","currency","useLocale","inputId","errorMessageId","descriptionId","ariaDescribedBy","useFieldIds","minValue","maxValue","currencySymbol","useMemo","part","jsx","FieldLayout","classNames","styles","AriaNumberField","Group","Input"],"mappings":";;;;;;;;;AAUO,SAASA,EAAY;AAAA,EAC1B,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,KAAAC;AAAA,EACA,KAAAC;AAAA,EACA,yBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,GAAGC;AACL,GAAqB;AACnB,QAAM,EAAE,QAAAC,GAAQ,UAAAC,EAAS,IAAIC,EAAU,GACjC,EAAE,SAAAC,GAAS,gBAAAC,GAAgB,eAAAC,GAAe,iBAAAC,EAAA,IAAoBC,EAAY;AAAA,IAC9E,SAAS3B;AAAA,IACT,cAAAG;AAAA,IACA,aAAAD;AAAA,EAAA,CACD,GAEK0B,IAAW,OAAOjB,KAAQ,WAAW,OAAOA,CAAG,IAAIA,GACnDkB,IAAW,OAAOjB,KAAQ,WAAW,OAAOA,CAAG,IAAIA,GAEnDkB,IAAiBC,EAAQ,MACtB,IAAI,KAAK,aAAaX,GAAQ;AAAA,IACnC,OAAO;AAAA,IACP,UAAAC;AAAA,EAAA,CACD,EACE,cAAc,CAAC,EACf,KAAK,CAAQW,MAAAA,EAAK,SAAS,UAAU,GAAG,OAC1C,CAACX,GAAUD,CAAM,CAAC;AAGnB,SAAA,gBAAAa;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAxB;AAAA,MACA,aAAAR;AAAA,MACA,cAAAC;AAAA,MACA,YAAAC;AAAA,MACA,SAASmB;AAAA,MACT,gBAAAC;AAAA,MACA,eAAAC;AAAA,MACA,yBAAAZ;AAAA,MACA,WAAWsB,EAAWC,EAAO,MAAMpB,CAAS;AAAA,MAC5C,eAAe;AAAA,MACd,GAAGG;AAAA,MAEJ,UAAA,gBAAAc;AAAA,QAACI;AAAAA,QAAA;AAAA,UACC,OAAApC;AAAA,UACA,MAAAJ;AAAA,UACA,eAAe;AAAA,YACb,OAAO;AAAA,YACP,uBAAuBC,MAAW,aAAa,IAAIoB;AAAA,YACnD,uBAAuBpB,MAAW,aAAa,IAAImB;AAAA,YACnD,UAAAI;AAAA,YACA,iBAAiB;AAAA,UACnB;AAAA,UACA,WAAAf;AAAA,UACA,YAAAC;AAAA,UACA,YAAAH;AAAA,UACA,oBAAmB;AAAA,UACnB,UAAAI;AAAA,UAKA,mBAAgB;AAAA,UAChB,UAAAoB;AAAA,UACA,UAAAC;AAAA,UACC,GAAGV;AAAA,UAEJ,4BAACmB,GACC,EAAA,UAAA,gBAAAL;AAAA,YAACM;AAAA,YAAA;AAAA,cACC,gBAAgBzB,MAAmBhB,MAAW,aAAagC,IAAiB;AAAA,cAC5E,cAAcf,MAAiBjB,MAAW,YAAY,MAAM;AAAA,cAC5D,IAAIyB;AAAA,cACJ,UAAAxB;AAAA,cACA,QAAAU;AAAA,cACA,aAAAJ;AAAA,cACA,oBAAkBqB;AAAA,cAClB,YAAAnB;AAAA,YAAA;AAAA,UAAA,EAEJ,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EACF;AAEJ;"}

package/dist/components/Common/UI/NumberInput/NumberInputTypes.d.ts

@@ -1,16 +1,49 @@
 import { FocusEventHandler, InputHTMLAttributes, Ref } from 'react';
-import { SharedFieldLayoutProps } from '../FieldLayout/FieldLayoutTypes';
 import { InputProps } from '../Input/InputTypes';
+import { SharedFieldLayoutProps } from '../../FieldLayout/FieldLayoutTypes';
 export interface NumberInputProps extends SharedFieldLayoutProps, Pick<InputHTMLAttributes<HTMLInputElement>, 'min' | 'max' | 'name' | 'id' | 'placeholder' | 'className'> {
+    /**
+     * Format type for the number input
+     */
     format?: 'currency' | 'decimal' | 'percent';
+    /**
+     * React ref for the number input element
+     */
     inputRef?: Ref<HTMLInputElement>;
+    /**
+     * Current value of the number input
+     */
     value?: number;
+    /**
+     * Indicates that the field has an error
+     */
     isInvalid?: boolean;
+    /**
+     * Disables the number input and prevents interaction
+     */
     isDisabled?: boolean;
+    /**
+     * Callback when number input value changes
+     */
     onChange?: (value: number) => void;
+    /**
+     * Handler for blur events
+     */
     onBlur?: FocusEventHandler<HTMLElement>;
+    /**
+     * Element to display at the start of the input
+     */
     adornmentStart?: InputProps['adornmentStart'];
+    /**
+     * Element to display at the end of the input
+     */
     adornmentEnd?: InputProps['adornmentEnd'];
+    /**
+     * Minimum number of decimal places to display
+     */
     minimumFractionDigits?: number;
+    /**
+     * Maximum number of decimal places to display
+     */
     maximumFractionDigits?: number;
 }

package/dist/components/Common/UI/NumberInput/index.d.ts

@@ -1 +1,2 @@
+import "./types/i18next.d.ts"
 export { NumberInput } from './NumberInput';

package/dist/components/Common/UI/ProgressBar/ProgressBarTypes.d.ts

@@ -1,6 +1,18 @@
 export interface ProgressBarProps {
+    /**
+     * Total number of steps in the progress sequence
+     */
     totalSteps: number;
+    /**
+     * Current step in the progress sequence
+     */
     currentStep: number;
+    /**
+     * Additional CSS class name for the progress bar container
+     */
     className?: string;
+    /**
+     * Accessible label describing the progress bar's purpose
+     */
     label: string;
 }

package/dist/components/Common/UI/ProgressBar/index.d.ts

@@ -1,2 +1,3 @@
+import "./types/i18next.d.ts"
 export { ProgressBar } from './ProgressBar';
 export type { ProgressBarProps } from './ProgressBarTypes';

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

@@ -2,7 +2,7 @@ import { jsx as i, jsxs as x } from "react/jsx-runtime";
 import F from "classnames";
 import { useFieldIds as j } from "../hooks/useFieldIds.js";
 import e from "./Radio.module.scss.js";
-import { HorizontalFieldLayout as v } from "../HorizontalFieldLayout/HorizontalFieldLayout.js";
+import { HorizontalFieldLayout as v } from "../../HorizontalFieldLayout/HorizontalFieldLayout.js";
 const R = ({
   name: o,
   label: t,

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../../../../../src/components/Common/UI/Radio/Radio.tsx"],"sourcesContent":["import type { ChangeEvent } from 'react'\nimport classNames from 'classnames'\nimport { useFieldIds } from '../hooks/useFieldIds'\nimport { HorizontalFieldLayout } from '../HorizontalFieldLayout'\nimport styles from './Radio.module.scss'\nimport type { RadioProps } from './RadioTypes'\n\nexport const Radio = ({\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  shouldVisuallyHideLabel,\n  className,\n  ...props\n}: RadioProps) => {\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.radioWrapper}>\n        <input\n          type=\"radio\"\n          name={name}\n          disabled={isDisabled}\n          aria-describedby={ariaDescribedBy}\n          checked={value}\n          id={inputId}\n          ref={inputRef}\n          onBlur={onBlur}\n          onChange={handleChange}\n          className={styles.radioInput}\n        />\n        <div className={classNames(styles.radio, { [styles.checked as string]: value })}>\n          {value && <div className={styles.radioDot} />}\n        </div>\n      </div>\n    </HorizontalFieldLayout>\n  )\n}\n"],"names":["Radio","name","label","description","errorMessage","isRequired","inputRef","value","isInvalid","isDisabled","id","onChange","onBlur","shouldVisuallyHideLabel","className","props","inputId","errorMessageId","descriptionId","ariaDescribedBy","useFieldIds","handleChange","event","jsx","HorizontalFieldLayout","jsxs","styles","classNames"],"mappings":";;;;;AAOO,MAAMA,IAAQ,CAAC;AAAA,EACpB,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,yBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,MAAkB;AAChB,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,yBAAAL;AAAA,MACA,WAAAC;AAAA,MACC,GAAGC;AAAA,MAEJ,UAAC,gBAAAU,EAAA,OAAA,EAAI,WAAWC,EAAO,cACrB,UAAA;AAAA,QAAA,gBAAAH;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,MAAAtB;AAAA,YACA,UAAUQ;AAAA,YACV,oBAAkBU;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,SAAI,WAAWI,EAAWD,EAAO,OAAO,EAAE,CAACA,EAAO,OAAiB,GAAGnB,EAAM,CAAC,GAC3E,UAASA,KAAA,gBAAAgB,EAAC,SAAI,WAAWG,EAAO,UAAU,EAC7C,CAAA;AAAA,MAAA,EACF,CAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"Radio.js","sources":["../../../../../src/components/Common/UI/Radio/Radio.tsx"],"sourcesContent":["import type { ChangeEvent } from 'react'\nimport classNames from 'classnames'\nimport { useFieldIds } from '../hooks/useFieldIds'\nimport styles from './Radio.module.scss'\nimport type { RadioProps } from './RadioTypes'\nimport { HorizontalFieldLayout } from '@/components/Common/HorizontalFieldLayout'\n\nexport const Radio = ({\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  shouldVisuallyHideLabel,\n  className,\n  ...props\n}: RadioProps) => {\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.radioWrapper}>\n        <input\n          type=\"radio\"\n          name={name}\n          disabled={isDisabled}\n          aria-describedby={ariaDescribedBy}\n          checked={value}\n          id={inputId}\n          ref={inputRef}\n          onBlur={onBlur}\n          onChange={handleChange}\n          className={styles.radioInput}\n        />\n        <div className={classNames(styles.radio, { [styles.checked as string]: value })}>\n          {value && <div className={styles.radioDot} />}\n        </div>\n      </div>\n    </HorizontalFieldLayout>\n  )\n}\n"],"names":["Radio","name","label","description","errorMessage","isRequired","inputRef","value","isInvalid","isDisabled","id","onChange","onBlur","shouldVisuallyHideLabel","className","props","inputId","errorMessageId","descriptionId","ariaDescribedBy","useFieldIds","handleChange","event","jsx","HorizontalFieldLayout","jsxs","styles","classNames"],"mappings":";;;;;AAOO,MAAMA,IAAQ,CAAC;AAAA,EACpB,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,yBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,MAAkB;AAChB,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,yBAAAL;AAAA,MACA,WAAAC;AAAA,MACC,GAAGC;AAAA,MAEJ,UAAC,gBAAAU,EAAA,OAAA,EAAI,WAAWC,EAAO,cACrB,UAAA;AAAA,QAAA,gBAAAH;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,MAAAtB;AAAA,YACA,UAAUQ;AAAA,YACV,oBAAkBU;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,SAAI,WAAWI,EAAWD,EAAO,OAAO,EAAE,CAACA,EAAO,OAAiB,GAAGnB,EAAM,CAAC,GAC3E,UAASA,KAAA,gBAAAgB,EAAC,SAAI,WAAWG,EAAO,UAAU,EAC7C,CAAA;AAAA,MAAA,EACF,CAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/components/Common/UI/Radio/RadioTypes.d.ts

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

package/dist/components/Common/UI/Radio/index.d.ts

@@ -1 +1,2 @@
+import "./types/i18next.d.ts"
 export { Radio } from './Radio';