@gusto/embedded-react-sdk 0.8.0 → 0.8.2

package/dist/components/Common/SignatureForm/SignatureForm.js

@@ -1,23 +1,23 @@
-import { jsx as o } from "react/jsx-runtime";
-import * as r from "valibot";
+import { jsx as r } from "react/jsx-runtime";
+import { z as o } from "zod";
 import { useForm as s, FormProvider as a } from "react-hook-form";
-import { valibotResolver as l } from "@hookform/resolvers/valibot";
+import { zodResolver as l } from "@hookform/resolvers/zod";
 import t from "./SignatureForm.module.scss.js";
 import { Form as u } from "../Form/Form.js";
 import { Flex as c } from "../Flex/Flex.js";
-const f = r.object({
-  signature: r.pipe(r.string(), r.nonEmpty()),
-  confirmSignature: r.literal(!0)
-}), p = {
+const f = o.object({
+  signature: o.string().min(1),
+  confirmSignature: o.literal(!0)
+}), d = {
   signature: ""
 };
-function b({ onSubmit: i, children: m, formProps: n }) {
+function b({ onSubmit: m, children: i, formProps: n }) {
   const e = s({
     resolver: l(f),
-    defaultValues: p,
+    defaultValues: d,
     ...n
   });
-  return /* @__PURE__ */ o(a, { ...e, children: /* @__PURE__ */ o(u, { onSubmit: e.handleSubmit(i), className: t.container, children: /* @__PURE__ */ o("div", { className: t.formFields, children: /* @__PURE__ */ o(c, { flexDirection: "column", gap: 20, children: m }) }) }) });
+  return /* @__PURE__ */ r(a, { ...e, children: /* @__PURE__ */ r(u, { onSubmit: e.handleSubmit(m), className: t.container, children: /* @__PURE__ */ r("div", { className: t.formFields, children: /* @__PURE__ */ r(c, { flexDirection: "column", gap: 20, children: i }) }) }) });
 }
 export {
   b as SignatureForm,

package/dist/components/Common/SignatureForm/SignatureForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"SignatureForm.js","sources":["../../../../src/components/Common/SignatureForm/SignatureForm.tsx"],"sourcesContent":["import * as v from 'valibot'\nimport { FormProvider, useForm, type UseFormProps } from 'react-hook-form'\nimport { valibotResolver } from '@hookform/resolvers/valibot'\nimport styles from './SignatureForm.module.scss'\nimport { Form } from '@/components/Common/Form'\nimport { Flex } from '@/components/Common'\n\nexport const SignatureFormSchema = v.object({\n  signature: v.pipe(v.string(), v.nonEmpty()),\n  confirmSignature: v.literal(true),\n})\n\nconst signatureFormDefaultValues = {\n  signature: '',\n}\n\nexport type SignatureFormInputs = v.InferInput<typeof SignatureFormSchema>\n\ninterface SignatureFormProps {\n  onSubmit: (data: SignatureFormInputs) => void | Promise<void>\n  children?: React.ReactNode\n  formProps?: Partial<UseFormProps<SignatureFormInputs>>\n}\n\nexport function SignatureForm({ onSubmit, children, formProps }: SignatureFormProps) {\n  const methods = useForm<SignatureFormInputs>({\n    resolver: valibotResolver(SignatureFormSchema),\n    defaultValues: signatureFormDefaultValues,\n    ...formProps,\n  })\n\n  return (\n    <FormProvider {...methods}>\n      <Form onSubmit={methods.handleSubmit(onSubmit)} className={styles.container}>\n        <div className={styles.formFields}>\n          <Flex flexDirection=\"column\" gap={20}>\n            {children}\n          </Flex>\n        </div>\n      </Form>\n    </FormProvider>\n  )\n}\n"],"names":["SignatureFormSchema","v","signatureFormDefaultValues","SignatureForm","onSubmit","children","formProps","methods","useForm","valibotResolver","jsx","FormProvider","Form","styles","Flex"],"mappings":";;;;;;;AAOa,MAAAA,IAAsBC,EAAE,OAAO;AAAA,EAC1C,WAAWA,EAAE,KAAKA,EAAE,UAAUA,EAAE,UAAU;AAAA,EAC1C,kBAAkBA,EAAE,QAAQ,EAAI;AAClC,CAAC,GAEKC,IAA6B;AAAA,EACjC,WAAW;AACb;AAUO,SAASC,EAAc,EAAE,UAAAC,GAAU,UAAAC,GAAU,WAAAC,KAAiC;AACnF,QAAMC,IAAUC,EAA6B;AAAA,IAC3C,UAAUC,EAAgBT,CAAmB;AAAA,IAC7C,eAAeE;AAAA,IACf,GAAGI;AAAA,EAAA,CACJ;AAED,SACG,gBAAAI,EAAAC,GAAA,EAAc,GAAGJ,GAChB,UAAC,gBAAAG,EAAAE,GAAA,EAAK,UAAUL,EAAQ,aAAaH,CAAQ,GAAG,WAAWS,EAAO,WAChE,UAAC,gBAAAH,EAAA,OAAA,EAAI,WAAWG,EAAO,YACrB,UAAA,gBAAAH,EAACI,GAAK,EAAA,eAAc,UAAS,KAAK,IAC/B,UAAAT,EACH,CAAA,EACF,CAAA,EACF,CAAA,GACF;AAEJ;"}
+{"version":3,"file":"SignatureForm.js","sources":["../../../../src/components/Common/SignatureForm/SignatureForm.tsx"],"sourcesContent":["import { z } from 'zod'\nimport { FormProvider, useForm, type UseFormProps } from 'react-hook-form'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport styles from './SignatureForm.module.scss'\nimport { Form } from '@/components/Common/Form'\nimport { Flex } from '@/components/Common'\n\nexport const SignatureFormSchema = z.object({\n  signature: z.string().min(1),\n  confirmSignature: z.literal(true),\n})\n\nconst signatureFormDefaultValues = {\n  signature: '',\n}\n\nexport type SignatureFormInputs = z.infer<typeof SignatureFormSchema>\n\ninterface SignatureFormProps {\n  onSubmit: (data: SignatureFormInputs) => void | Promise<void>\n  children?: React.ReactNode\n  formProps?: Partial<UseFormProps<SignatureFormInputs>>\n}\n\nexport function SignatureForm({ onSubmit, children, formProps }: SignatureFormProps) {\n  const methods = useForm<SignatureFormInputs>({\n    resolver: zodResolver(SignatureFormSchema),\n    defaultValues: signatureFormDefaultValues,\n    ...formProps,\n  })\n\n  return (\n    <FormProvider {...methods}>\n      <Form onSubmit={methods.handleSubmit(onSubmit)} className={styles.container}>\n        <div className={styles.formFields}>\n          <Flex flexDirection=\"column\" gap={20}>\n            {children}\n          </Flex>\n        </div>\n      </Form>\n    </FormProvider>\n  )\n}\n"],"names":["SignatureFormSchema","z","signatureFormDefaultValues","SignatureForm","onSubmit","children","formProps","methods","useForm","zodResolver","jsx","FormProvider","Form","styles","Flex"],"mappings":";;;;;;;AAOa,MAAAA,IAAsBC,EAAE,OAAO;AAAA,EAC1C,WAAWA,EAAE,SAAS,IAAI,CAAC;AAAA,EAC3B,kBAAkBA,EAAE,QAAQ,EAAI;AAClC,CAAC,GAEKC,IAA6B;AAAA,EACjC,WAAW;AACb;AAUO,SAASC,EAAc,EAAE,UAAAC,GAAU,UAAAC,GAAU,WAAAC,KAAiC;AACnF,QAAMC,IAAUC,EAA6B;AAAA,IAC3C,UAAUC,EAAYT,CAAmB;AAAA,IACzC,eAAeE;AAAA,IACf,GAAGI;AAAA,EAAA,CACJ;AAED,SACG,gBAAAI,EAAAC,GAAA,EAAc,GAAGJ,GAChB,UAAC,gBAAAG,EAAAE,GAAA,EAAK,UAAUL,EAAQ,aAAaH,CAAQ,GAAG,WAAWS,EAAO,WAChE,UAAC,gBAAAH,EAAA,OAAA,EAAI,WAAWG,EAAO,YACrB,UAAA,gBAAAH,EAACI,GAAK,EAAA,eAAc,UAAS,KAAK,IAC/B,UAAAT,EACH,CAAA,EACF,CAAA,EACF,CAAA,GACF;AAEJ;"}

package/dist/components/Common/SignatureForm/index.d.ts

@@ -1,3 +1,4 @@
+import "./types/i18next.d.ts"
 export { SignatureForm } from './SignatureForm';
 export { SignatureFormFields } from './SignatureFormFields';
 export { SignatureFormActions } from './SignatureFormActions';

package/dist/components/Common/TaxInputs/index.d.ts

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

package/dist/components/Common/UI/Alert/Alert.d.ts

@@ -1,2 +1,2 @@
 import { AlertProps } from './AlertTypes';
-export declare function Alert({ label, children, status, icon }: AlertProps): import("react/jsx-runtime").JSX.Element;
+export declare function Alert({ label, children, status, icon, className }: AlertProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,15 +1,16 @@
-import { jsx as r, jsxs as d } from "react/jsx-runtime";
-import { useId as s, useRef as m, useEffect as f } from "react";
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import { useId as d, useRef as f, useEffect as h } from "react";
+import u from "classnames";
 import i from "./Alert.module.scss.js";
-import h from "../../../../assets/icons/info.svg.js";
-import u from "../../../../assets/icons/success_check.svg.js";
-import v from "../../../../assets/icons/warning.svg.js";
-import p from "../../../../assets/icons/error.svg.js";
-function w({ label: a, children: t, status: e = "info", icon: c }) {
-  const n = s(), o = m(null), l = e === "info" ? /* @__PURE__ */ r(h, { "aria-hidden": !0 }) : e === "success" ? /* @__PURE__ */ r(u, { "aria-hidden": !0 }) : e === "warning" ? /* @__PURE__ */ r(v, { "aria-hidden": !0 }) : /* @__PURE__ */ r(p, { "aria-hidden": !0 });
-  return f(() => {
+import v from "../../../../assets/icons/info.svg.js";
+import p from "../../../../assets/icons/success_check.svg.js";
+import g from "../../../../assets/icons/warning.svg.js";
+import N from "../../../../assets/icons/error.svg.js";
+function R({ label: a, children: t, status: e = "info", icon: c, className: l }) {
+  const n = d(), o = f(null), s = e === "info" ? /* @__PURE__ */ r(v, { "aria-hidden": !0 }) : e === "success" ? /* @__PURE__ */ r(p, { "aria-hidden": !0 }) : e === "warning" ? /* @__PURE__ */ r(g, { "aria-hidden": !0 }) : /* @__PURE__ */ r(N, { "aria-hidden": !0 });
+  return h(() => {
     o.current && o.current.scrollIntoView({ behavior: "smooth" });
-  }, []), /* @__PURE__ */ r("div", { className: i.root, children: /* @__PURE__ */ d(
+  }, []), /* @__PURE__ */ r("div", { className: u(i.root, l), children: /* @__PURE__ */ m(
     "div",
     {
       className: i.alert,
@@ -18,7 +19,7 @@ function w({ label: a, children: t, status: e = "info", icon: c }) {
       "data-variant": e,
       ref: o,
       children: [
-        /* @__PURE__ */ r("div", { className: i.icon, children: c || l }),
+        /* @__PURE__ */ r("div", { className: i.icon, children: c || s }),
         /* @__PURE__ */ r("h6", { id: n, children: a }),
         /* @__PURE__ */ r("div", { className: i.content, children: t })
       ]
@@ -26,6 +27,6 @@ function w({ label: a, children: t, status: e = "info", icon: c }) {
   ) });
 }
 export {
-  w as Alert
+  R as Alert
 };
 //# sourceMappingURL=Alert.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sources":["../../../../../src/components/Common/UI/Alert/Alert.tsx"],"sourcesContent":["import { useEffect, useId, useRef } from 'react'\nimport { type AlertProps } from './AlertTypes'\nimport styles from './Alert.module.scss'\nimport InfoIcon from '@/assets/icons/info.svg?react'\nimport SuccessIcon from '@/assets/icons/success_check.svg?react'\nimport WarningIcon from '@/assets/icons/warning.svg?react'\nimport ErrorIcon from '@/assets/icons/error.svg?react'\n\nexport function Alert({ label, children, status = 'info', icon }: AlertProps) {\n  const id = useId()\n  const alertRef = useRef<HTMLDivElement>(null)\n  const defaultIcon =\n    status === 'info' ? (\n      <InfoIcon aria-hidden />\n    ) : status === 'success' ? (\n      <SuccessIcon aria-hidden />\n    ) : status === 'warning' ? (\n      <WarningIcon aria-hidden />\n    ) : (\n      <ErrorIcon aria-hidden />\n    )\n\n  useEffect(() => {\n    if (alertRef.current) alertRef.current.scrollIntoView({ behavior: 'smooth' })\n  }, [])\n\n  return (\n    <div className={styles.root}>\n      <div\n        className={styles.alert}\n        role=\"alert\"\n        aria-labelledby={id}\n        data-variant={status}\n        ref={alertRef}\n      >\n        <div className={styles.icon}>{icon || defaultIcon}</div>\n        <h6 id={id}>{label}</h6>\n        <div className={styles.content}>{children}</div>\n      </div>\n    </div>\n  )\n}\n"],"names":["Alert","label","children","status","icon","id","useId","alertRef","useRef","defaultIcon","jsx","InfoIcon","SuccessIcon","WarningIcon","ErrorIcon","useEffect","styles","jsxs"],"mappings":";;;;;;;AAQO,SAASA,EAAM,EAAE,OAAAC,GAAO,UAAAC,GAAU,QAAAC,IAAS,QAAQ,MAAAC,KAAoB;AAC5E,QAAMC,IAAKC,EAAM,GACXC,IAAWC,EAAuB,IAAI,GACtCC,IACJN,MAAW,SACR,gBAAAO,EAAAC,GAAA,EAAS,eAAW,GAAC,CAAA,IACpBR,MAAW,YACZ,gBAAAO,EAAAE,GAAA,EAAY,eAAW,GAAC,CAAA,IACvBT,MAAW,YACZ,gBAAAO,EAAAG,GAAA,EAAY,eAAW,GAAC,CAAA,IAEzB,gBAAAH,EAACI,GAAU,EAAA,eAAW,GAAC,CAAA;AAG3B,SAAAC,EAAU,MAAM;AACV,IAAAR,EAAS,WAAkBA,EAAA,QAAQ,eAAe,EAAE,UAAU,UAAU;AAAA,EAC9E,GAAG,EAAE,GAGF,gBAAAG,EAAA,OAAA,EAAI,WAAWM,EAAO,MACrB,UAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWD,EAAO;AAAA,MAClB,MAAK;AAAA,MACL,mBAAiBX;AAAA,MACjB,gBAAcF;AAAA,MACd,KAAKI;AAAA,MAEL,UAAA;AAAA,QAAA,gBAAAG,EAAC,OAAI,EAAA,WAAWM,EAAO,MAAO,eAAQP,GAAY;AAAA,QAClD,gBAAAC,EAAC,MAAG,EAAA,IAAAL,GAAS,UAAMJ,EAAA,CAAA;AAAA,QAClB,gBAAAS,EAAA,OAAA,EAAI,WAAWM,EAAO,SAAU,UAAAd,EAAS,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAE9C;AAEJ;"}
+{"version":3,"file":"Alert.js","sources":["../../../../../src/components/Common/UI/Alert/Alert.tsx"],"sourcesContent":["import { useEffect, useId, useRef } from 'react'\nimport classNames from 'classnames'\nimport { type AlertProps } from './AlertTypes'\nimport styles from './Alert.module.scss'\nimport InfoIcon from '@/assets/icons/info.svg?react'\nimport SuccessIcon from '@/assets/icons/success_check.svg?react'\nimport WarningIcon from '@/assets/icons/warning.svg?react'\nimport ErrorIcon from '@/assets/icons/error.svg?react'\n\nexport function Alert({ label, children, status = 'info', icon, className }: AlertProps) {\n  const id = useId()\n  const alertRef = useRef<HTMLDivElement>(null)\n  const defaultIcon =\n    status === 'info' ? (\n      <InfoIcon aria-hidden />\n    ) : status === 'success' ? (\n      <SuccessIcon aria-hidden />\n    ) : status === 'warning' ? (\n      <WarningIcon aria-hidden />\n    ) : (\n      <ErrorIcon aria-hidden />\n    )\n\n  useEffect(() => {\n    if (alertRef.current) alertRef.current.scrollIntoView({ behavior: 'smooth' })\n  }, [])\n\n  return (\n    <div className={classNames(styles.root, className)}>\n      <div\n        className={styles.alert}\n        role=\"alert\"\n        aria-labelledby={id}\n        data-variant={status}\n        ref={alertRef}\n      >\n        <div className={styles.icon}>{icon || defaultIcon}</div>\n        <h6 id={id}>{label}</h6>\n        <div className={styles.content}>{children}</div>\n      </div>\n    </div>\n  )\n}\n"],"names":["Alert","label","children","status","icon","className","id","useId","alertRef","useRef","defaultIcon","jsx","InfoIcon","SuccessIcon","WarningIcon","ErrorIcon","useEffect","classNames","styles","jsxs"],"mappings":";;;;;;;;AASgB,SAAAA,EAAM,EAAE,OAAAC,GAAO,UAAAC,GAAU,QAAAC,IAAS,QAAQ,MAAAC,GAAM,WAAAC,KAAyB;AACvF,QAAMC,IAAKC,EAAM,GACXC,IAAWC,EAAuB,IAAI,GACtCC,IACJP,MAAW,SACR,gBAAAQ,EAAAC,GAAA,EAAS,eAAW,GAAC,CAAA,IACpBT,MAAW,YACZ,gBAAAQ,EAAAE,GAAA,EAAY,eAAW,GAAC,CAAA,IACvBV,MAAW,YACZ,gBAAAQ,EAAAG,GAAA,EAAY,eAAW,GAAC,CAAA,IAEzB,gBAAAH,EAACI,GAAU,EAAA,eAAW,GAAC,CAAA;AAG3B,SAAAC,EAAU,MAAM;AACV,IAAAR,EAAS,WAAkBA,EAAA,QAAQ,eAAe,EAAE,UAAU,UAAU;AAAA,EAC9E,GAAG,EAAE,qBAGF,OAAI,EAAA,WAAWS,EAAWC,EAAO,MAAMb,CAAS,GAC/C,UAAA,gBAAAc;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWD,EAAO;AAAA,MAClB,MAAK;AAAA,MACL,mBAAiBZ;AAAA,MACjB,gBAAcH;AAAA,MACd,KAAKK;AAAA,MAEL,UAAA;AAAA,QAAA,gBAAAG,EAAC,OAAI,EAAA,WAAWO,EAAO,MAAO,eAAQR,GAAY;AAAA,QAClD,gBAAAC,EAAC,MAAG,EAAA,IAAAL,GAAS,UAAML,EAAA,CAAA;AAAA,QAClB,gBAAAU,EAAA,OAAA,EAAI,WAAWO,EAAO,SAAU,UAAAhB,EAAS,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAE9C;AAEJ;"}

package/dist/components/Common/UI/Alert/AlertTypes.d.ts

@@ -1,11 +1,23 @@
 import { ReactNode } from 'react';
 export interface AlertProps {
-    /** The variant of the alert */
+    /**
+     * The visual status that the alert should convey
+     */
     status?: 'info' | 'success' | 'warning' | 'error';
-    /** The label text for the alert */
+    /**
+     * The label text for the alert
+     */
     label: string;
-    /** Optional children to be rendered inside the alert */
+    /**
+     * Optional children to be rendered inside the alert
+     */
     children?: ReactNode;
-    /** Optional custom icon component to override the default icon */
+    /**
+     * Optional custom icon component to override the default icon
+     */
     icon?: ReactNode;
+    /**
+     * CSS className to be applied
+     */
+    className?: string;
 }

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

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

package/dist/components/Common/UI/Badge/BadgeTypes.d.ts

@@ -1,5 +1,11 @@
 import { HTMLAttributes, ReactNode } from 'react';
 export interface BadgeProps extends Pick<HTMLAttributes<HTMLSpanElement>, 'className' | 'id' | 'aria-label'> {
+    /**
+     * Content to be displayed inside the badge
+     */
     children: ReactNode;
+    /**
+     * Visual style variant of the badge
+     */
     status?: 'success' | 'warning' | 'error' | 'info';
 }

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

@@ -1,39 +1,40 @@
-import { jsx as t } from "react/jsx-runtime";
-import { Button as p } from "react-aria-components";
-import u from "./Button.module.scss.js";
-function x({
+import { jsx as p } from "react/jsx-runtime";
+import { Button as u } from "react-aria-components";
+import v from "classnames";
+import c from "./Button.module.scss.js";
+function N({
   isError: o = !1,
-  isLoading: a = !1,
+  isLoading: r = !1,
   isDisabled: s = !1,
-  variant: e = "primary",
-  ref: n,
-  className: c,
+  variant: t = "primary",
+  ref: e,
+  className: m,
   children: i,
-  onBlur: d,
-  onFocus: l,
-  onClick: r,
-  ...m
+  onBlur: n,
+  onFocus: d,
+  onClick: a,
+  ...l
 }) {
-  const f = r ? () => {
-    r({});
-  } : void 0;
-  return /* @__PURE__ */ t("span", { className: u.root, children: /* @__PURE__ */ t(
-    p,
+  return /* @__PURE__ */ p(
+    u,
     {
-      ...m,
-      ref: n,
-      onBlur: d,
-      onFocus: l,
-      isDisabled: s || a,
-      "data-variant": e,
-      "data-loading": a || void 0,
+      ...l,
+      className: ({ defaultClassName: f }) => v(c.root, f, m),
+      ref: e,
+      onBlur: n,
+      onFocus: d,
+      isDisabled: s || r,
+      "data-variant": t,
+      "data-loading": r || void 0,
       "data-error": o || void 0,
-      onPress: f,
+      onPress: a ? () => {
+        a({});
+      } : void 0,
       children: i
     }
-  ) });
+  );
 }
 export {
-  x as Button
+  N as Button
 };
 //# sourceMappingURL=Button.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../../src/components/Common/UI/Button/Button.tsx"],"sourcesContent":["import { Button as AriaButton } from 'react-aria-components'\nimport { type ButtonProps } from './ButtonTypes'\nimport styles from './Button.module.scss'\n\nexport function Button({\n  isError = false,\n  isLoading = false,\n  isDisabled = false,\n  variant = 'primary',\n  ref,\n  className,\n  children,\n  onBlur,\n  onFocus,\n  onClick,\n  ...props\n}: ButtonProps) {\n  const handlePress = onClick\n    ? () => {\n        onClick({} as React.MouseEvent<HTMLButtonElement>)\n      }\n    : undefined\n\n  return (\n    <span className={styles.root}>\n      <AriaButton\n        {...props}\n        ref={ref}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        isDisabled={isDisabled || isLoading}\n        data-variant={variant}\n        data-loading={isLoading || undefined}\n        data-error={isError || undefined}\n        onPress={handlePress}\n      >\n        {children}\n      </AriaButton>\n    </span>\n  )\n}\n"],"names":["Button","isError","isLoading","isDisabled","variant","ref","className","children","onBlur","onFocus","onClick","props","handlePress","jsx","styles","AriaButton"],"mappings":";;;AAIO,SAASA,EAAO;AAAA,EACrB,SAAAC,IAAU;AAAA,EACV,WAAAC,IAAY;AAAA,EACZ,YAAAC,IAAa;AAAA,EACb,SAAAC,IAAU;AAAA,EACV,KAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,GAAgB;AACR,QAAAC,IAAcF,IAChB,MAAM;AACJ,IAAAA,EAAQ,CAAA,CAAyC;AAAA,EAAA,IAEnD;AAEJ,SACG,gBAAAG,EAAA,QAAA,EAAK,WAAWC,EAAO,MACtB,UAAA,gBAAAD;AAAA,IAACE;AAAAA,IAAA;AAAA,MACE,GAAGJ;AAAA,MACJ,KAAAN;AAAA,MACA,QAAAG;AAAA,MACA,SAAAC;AAAA,MACA,YAAYN,KAAcD;AAAA,MAC1B,gBAAcE;AAAA,MACd,gBAAcF,KAAa;AAAA,MAC3B,cAAYD,KAAW;AAAA,MACvB,SAASW;AAAA,MAER,UAAAL;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;"}
+{"version":3,"file":"Button.js","sources":["../../../../../src/components/Common/UI/Button/Button.tsx"],"sourcesContent":["import { Button as AriaButton } from 'react-aria-components'\nimport classNames from 'classnames'\nimport { type ButtonProps } from './ButtonTypes'\nimport styles from './Button.module.scss'\n\nexport function Button({\n  isError = false,\n  isLoading = false,\n  isDisabled = false,\n  variant = 'primary',\n  ref,\n  className,\n  children,\n  onBlur,\n  onFocus,\n  onClick,\n  ...props\n}: ButtonProps) {\n  const handlePress = onClick\n    ? () => {\n        onClick({} as React.MouseEvent<HTMLButtonElement>)\n      }\n    : undefined\n\n  return (\n    <AriaButton\n      {...props}\n      className={({ defaultClassName }) => classNames(styles.root, defaultClassName, className)}\n      ref={ref}\n      onBlur={onBlur}\n      onFocus={onFocus}\n      isDisabled={isDisabled || isLoading}\n      data-variant={variant}\n      data-loading={isLoading || undefined}\n      data-error={isError || undefined}\n      onPress={handlePress}\n    >\n      {children}\n    </AriaButton>\n  )\n}\n"],"names":["Button","isError","isLoading","isDisabled","variant","ref","className","children","onBlur","onFocus","onClick","props","jsx","AriaButton","defaultClassName","classNames","styles"],"mappings":";;;;AAKO,SAASA,EAAO;AAAA,EACrB,SAAAC,IAAU;AAAA,EACV,WAAAC,IAAY;AAAA,EACZ,YAAAC,IAAa;AAAA,EACb,SAAAC,IAAU;AAAA,EACV,KAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,GAAgB;AAQZ,SAAA,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,WAAW,CAAC,EAAE,kBAAAG,QAAuBC,EAAWC,EAAO,MAAMF,GAAkBR,CAAS;AAAA,MACxF,KAAAD;AAAA,MACA,QAAAG;AAAA,MACA,SAAAC;AAAA,MACA,YAAYN,KAAcD;AAAA,MAC1B,gBAAcE;AAAA,MACd,gBAAcF,KAAa;AAAA,MAC3B,cAAYD,KAAW;AAAA,MACvB,SAjBgBS,IAChB,MAAM;AACJ,QAAAA,EAAQ,CAAA,CAAyC;AAAA,MAAA,IAEnD;AAAA,MAeC,UAAAH;AAAA,IAAA;AAAA,EACH;AAEJ;"}

package/dist/components/Common/UI/Button/Button.module.scss.js

@@ -1,4 +1,4 @@
-const o = "_root_1co44_1", t = {
+const o = "_root_1p4kg_1", t = {
   root: o
 };
 export {

package/dist/components/Common/UI/Button/ButtonTypes.d.ts

@@ -1,16 +1,41 @@
 import { Ref, ButtonHTMLAttributes, ReactNode, FocusEvent } from 'react';
-type ButtonFocusHandler = (e: FocusEvent) => void;
 export interface ButtonProps extends Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'name' | 'id' | 'className' | 'type' | 'onClick' | 'onKeyDown' | 'onKeyUp' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'form' | 'title' | 'tabIndex'> {
+    /**
+     * React ref for the button element
+     */
     ref?: Ref<HTMLButtonElement>;
+    /**
+     * Visual style variant of the button
+     */
     variant?: 'primary' | 'secondary' | 'tertiary' | 'icon';
+    /**
+     * Indicates if the button is in an error state
+     */
     isError?: boolean;
+    /**
+     * Shows a loading spinner and disables the button
+     */
     isLoading?: boolean;
+    /**
+     * Disables the button and prevents interaction
+     */
     isDisabled?: boolean;
+    /**
+     * Content to be rendered inside the button
+     */
     children?: ReactNode;
-    onBlur?: ButtonFocusHandler;
-    onFocus?: ButtonFocusHandler;
+    /**
+     * Handler for blur events
+     */
+    onBlur?: (e: FocusEvent) => void;
+    /**
+     * Handler for focus events
+     */
+    onFocus?: (e: FocusEvent) => void;
 }
 export type ButtonIconProps = Omit<ButtonProps, 'variant'> & {
+    /**
+     * Required aria-label for icon buttons to ensure accessibility
+     */
     'aria-label': string;
 };
-export {};

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

@@ -1,3 +1,4 @@
+import "./types/i18next.d.ts"
 export { Button } from './Button';
 export { ButtonIcon } from './ButtonIcon';
 export type { ButtonProps, ButtonIconProps } from './ButtonTypes';

package/dist/components/Common/UI/CalendarPreview/CalendarPreviewTypes.d.ts

@@ -1,12 +1,36 @@
 export type CalendarPreviewProps = {
+    /**
+     * Array of dates to highlight with custom colors and labels
+     */
     highlightDates?: Array<{
+        /**
+         * Date to highlight
+         */
         date: Date;
+        /**
+         * Color to use for highlighting
+         */
         highlightColor: 'primary' | 'secondary';
+        /**
+         * Label text for the highlighted date
+         */
         label: string;
     }>;
+    /**
+     * Date range to display in the calendar preview
+     */
     dateRange: {
+        /**
+         * Start date of the range
+         */
         start: Date;
+        /**
+         * End date of the range
+         */
         end: Date;
+        /**
+         * Label text for the date range
+         */
         label: string;
     };
 };

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

@@ -1,3 +1,4 @@
+import "./types/i18next.d.ts"
 export { CalendarPreview } from './CalendarPreview';
 export { CalendarLegend } from './CalendarLegend';
 export type { CalendarPreviewProps } from './CalendarPreviewTypes';

package/dist/components/Common/UI/Card/Card.module.scss.js

@@ -1,4 +1,4 @@
-const a = "_cardContainer_ycbrf_1", n = {
+const a = "_cardContainer_baj0w_1", n = {
   cardContainer: a
 };
 export {

package/dist/components/Common/UI/Card/CardTypes.d.ts

@@ -1,11 +1,19 @@
 import { ReactNode } from 'react';
 export interface CardProps {
-    /** Callback function when the card is selected */
+    /**
+     * Callback function when the card is selected
+     */
     onSelect?: (checked: boolean) => void;
-    /** Content to be displayed inside the card */
+    /**
+     * Content to be displayed inside the card
+     */
     children: ReactNode;
-    /** Optional menu component to be displayed on the right side of the card */
+    /**
+     * Optional menu component to be displayed on the right side of the card
+     */
     menu?: ReactNode;
-    /** Additional CSS class name */
+    /**
+     * CSS className to be applied
+     */
     className?: string;
 }

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

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

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

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