@gusto/embedded-react-sdk 0.53.0 → 0.54.0

package/dist/components/Employee/PaymentMethod/shared/BankFormBody/BankFormBody.js

@@ -1,28 +1,36 @@
 import { jsx as n, jsxs as m } from "react/jsx-runtime";
-import { useTranslation as b } from "react-i18next";
-import { useBankForm as g } from "../useBankForm/useBankForm.js";
-import { ActionsLayout as y } from "../../../../Common/ActionsLayout/ActionsLayout.js";
-import { Form as N } from "../../../../Common/Form/Form.js";
-import { BaseLayout as s } from "../../../../Base/Base.js";
-import { SDKFormProvider as f } from "../../../../../partner-hook-utils/form/SDKFormProvider.js";
-import { useComponentContext as B } from "../../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useI18n as v, useComponentDictionary as L } from "../../../../../i18n/I18n.js";
-function U({
-  employeeId: u,
-  dictionary: c,
-  onSaved: l,
-  onCancel: a,
-  ...d
+import { useTranslation as g } from "react-i18next";
+import { useBankForm as y } from "../useBankForm/useBankForm.js";
+import { ActionsLayout as N } from "../../../../Common/ActionsLayout/ActionsLayout.js";
+import { Form as f } from "../../../../Common/Form/Form.js";
+import { BaseLayout as u } from "../../../../Base/Base.js";
+import { SDKFormProvider as B } from "../../../../../partner-hook-utils/form/SDKFormProvider.js";
+import { useComponentContext as v } from "../../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useI18n as E, useComponentDictionary as L } from "../../../../../i18n/I18n.js";
+function A({
+  employeeId: c,
+  dictionary: l,
+  onSaved: d,
+  onCancel: i,
+  LoaderComponent: a,
+  ...b
 }) {
-  v("Employee.BankFormBody"), L("Employee.BankFormBody", c);
-  const r = g({ employeeId: u, ...d }), { t: o } = b("Employee.BankFormBody"), i = B();
+  E("Employee.BankFormBody"), L("Employee.BankFormBody", l);
+  const r = y({ employeeId: c, ...b }), { t: o } = g("Employee.BankFormBody"), s = v();
   if (r.isLoading)
-    return /* @__PURE__ */ n(s, { isLoading: !0, error: r.errorHandling.errors });
+    return /* @__PURE__ */ n(
+      u,
+      {
+        isLoading: !0,
+        error: r.errorHandling.errors,
+        LoaderComponent: a
+      }
+    );
   const { Fields: t } = r.form, p = async () => {
     const e = await r.actions.onSubmit();
-    e && l(e.data);
+    e && d(e.data);
   };
-  return /* @__PURE__ */ n(s, { error: r.errorHandling.errors, children: /* @__PURE__ */ n(f, { formHookResult: r, children: /* @__PURE__ */ m(N, { onSubmit: p, children: [
+  return /* @__PURE__ */ n(u, { error: r.errorHandling.errors, LoaderComponent: a, children: /* @__PURE__ */ n(B, { formHookResult: r, children: /* @__PURE__ */ m(f, { onSubmit: p, children: [
     /* @__PURE__ */ n(
       t.Name,
       {
@@ -58,13 +66,13 @@ function U({
         getOptionLabel: (e) => o(e === "Checking" ? "accountTypeChecking" : "accountTypeSavings")
       }
     ),
-    /* @__PURE__ */ m(y, { children: [
-      a && /* @__PURE__ */ n(i.Button, { variant: "secondary", type: "button", onClick: a, children: o("cancelCta") }),
-      /* @__PURE__ */ n(i.Button, { type: "submit", isLoading: r.status.isPending, children: o("saveCta") })
+    /* @__PURE__ */ m(N, { children: [
+      i && /* @__PURE__ */ n(s.Button, { variant: "secondary", type: "button", onClick: i, children: o("cancelCta") }),
+      /* @__PURE__ */ n(s.Button, { type: "submit", isLoading: r.status.isPending, children: o("saveCta") })
     ] })
   ] }) }) });
 }
 export {
-  U as BankFormBody
+  A as BankFormBody
 };
 //# sourceMappingURL=BankFormBody.js.map

package/dist/components/Employee/PaymentMethod/shared/BankFormBody/BankFormBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"BankFormBody.js","sources":["../../../../../../src/components/Employee/PaymentMethod/shared/BankFormBody/BankFormBody.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { EmployeeBankAccount } from '@gusto/embedded-api/models/components/employeebankaccount'\nimport { useBankForm, type AccountType, type UseBankFormProps } from '../useBankForm'\nimport { ActionsLayout } from '@/components/Common'\nimport { Form } from '@/components/Common/Form'\nimport { BaseLayout } from '@/components/Base/Base'\nimport { SDKFormProvider } from '@/partner-hook-utils/form/SDKFormProvider'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport type { ResourceDictionary } from '@/types/Helpers'\n\n/** @internal */\nexport type BankFormBodyDictionary = ResourceDictionary<'Employee.BankFormBody'>\n\n/** @internal */\nexport interface BankFormBodyProps extends Omit<UseBankFormProps, 'employeeId'> {\n  employeeId: string\n  /**\n   * Translation overrides for the form's strings. Each consuming surface passes\n   * the dictionary it resolved from its own namespace so partner overrides on\n   * that namespace flow into the shared form text.\n   */\n  dictionary?: BankFormBodyDictionary\n  /** Called with the created bank account after a successful submit. */\n  onSaved: (bankAccount: EmployeeBankAccount) => void\n  onCancel?: () => void\n}\n\n/**\n * Shared bank-account form body. Owns the `useBankForm` composition, the field\n * JSX, and the submit/cancel actions. Reads its copy from the internal\n * `Employee.BankFormBody` namespace; consuming surfaces inject their own copy\n * via the `dictionary` prop and map the `onSaved`/`onCancel` callbacks onto\n * their surface-specific events.\n *\n * @internal\n */\nexport function BankFormBody({\n  employeeId,\n  dictionary,\n  onSaved,\n  onCancel,\n  ...hookProps\n}: BankFormBodyProps) {\n  useI18n('Employee.BankFormBody')\n  useComponentDictionary('Employee.BankFormBody', dictionary)\n  const bankForm = useBankForm({ employeeId, ...hookProps })\n  const { t } = useTranslation('Employee.BankFormBody')\n  const Components = useComponentContext()\n\n  if (bankForm.isLoading) {\n    return <BaseLayout isLoading error={bankForm.errorHandling.errors} />\n  }\n\n  const { Fields } = bankForm.form\n\n  const handleSubmit = async () => {\n    const result = await bankForm.actions.onSubmit()\n    if (result) {\n      onSaved(result.data)\n    }\n  }\n\n  return (\n    <BaseLayout error={bankForm.errorHandling.errors}>\n      <SDKFormProvider formHookResult={bankForm}>\n        <Form onSubmit={handleSubmit}>\n          <Fields.Name\n            label={t('nameLabel')}\n            validationMessages={{ REQUIRED: t('validations.accountName') }}\n          />\n          <Fields.RoutingNumber\n            label={t('routingNumberLabel')}\n            description={t('routingNumberDescription')}\n            validationMessages={{\n              REQUIRED: t('validations.routingNumber'),\n              INVALID_ROUTING_NUMBER: t('validations.routingNumber'),\n            }}\n          />\n          <Fields.AccountNumber\n            label={t('accountNumberLabel')}\n            validationMessages={{\n              REQUIRED: t('validations.accountNumber'),\n              INVALID_ACCOUNT_NUMBER: t('validations.accountNumberFormat'),\n            }}\n          />\n          <Fields.AccountType\n            label={t('accountTypeLabel')}\n            getOptionLabel={(type: AccountType) =>\n              type === 'Checking' ? t('accountTypeChecking') : t('accountTypeSavings')\n            }\n          />\n          <ActionsLayout>\n            {onCancel && (\n              <Components.Button variant=\"secondary\" type=\"button\" onClick={onCancel}>\n                {t('cancelCta')}\n              </Components.Button>\n            )}\n            <Components.Button type=\"submit\" isLoading={bankForm.status.isPending}>\n              {t('saveCta')}\n            </Components.Button>\n          </ActionsLayout>\n        </Form>\n      </SDKFormProvider>\n    </BaseLayout>\n  )\n}\n"],"names":["BankFormBody","employeeId","dictionary","onSaved","onCancel","hookProps","useI18n","useComponentDictionary","bankForm","useBankForm","t","useTranslation","Components","useComponentContext","BaseLayout","Fields","handleSubmit","result","jsx","SDKFormProvider","jsxs","Form","type","ActionsLayout"],"mappings":";;;;;;;;;AAqCO,SAASA,EAAa;AAAA,EAC3B,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GAAsB;AACpB,EAAAC,EAAQ,uBAAuB,GAC/BC,EAAuB,yBAAyBL,CAAU;AAC1D,QAAMM,IAAWC,EAAY,EAAE,YAAAR,GAAY,GAAGI,GAAW,GACnD,EAAE,GAAAK,EAAA,IAAMC,EAAe,uBAAuB,GAC9CC,IAAaC,EAAA;AAEnB,MAAIL,EAAS;AACX,6BAAQM,GAAA,EAAW,WAAS,IAAC,OAAON,EAAS,cAAc,QAAQ;AAGrE,QAAM,EAAE,QAAAO,MAAWP,EAAS,MAEtBQ,IAAe,YAAY;AAC/B,UAAMC,IAAS,MAAMT,EAAS,QAAQ,SAAA;AACtC,IAAIS,KACFd,EAAQc,EAAO,IAAI;AAAA,EAEvB;AAEA,SACE,gBAAAC,EAACJ,GAAA,EAAW,OAAON,EAAS,cAAc,QACxC,UAAA,gBAAAU,EAACC,GAAA,EAAgB,gBAAgBX,GAC/B,UAAA,gBAAAY,EAACC,GAAA,EAAK,UAAUL,GACd,UAAA;AAAA,IAAA,gBAAAE;AAAA,MAACH,EAAO;AAAA,MAAP;AAAA,QACC,OAAOL,EAAE,WAAW;AAAA,QACpB,oBAAoB,EAAE,UAAUA,EAAE,yBAAyB,EAAA;AAAA,MAAE;AAAA,IAAA;AAAA,IAE/D,gBAAAQ;AAAA,MAACH,EAAO;AAAA,MAAP;AAAA,QACC,OAAOL,EAAE,oBAAoB;AAAA,QAC7B,aAAaA,EAAE,0BAA0B;AAAA,QACzC,oBAAoB;AAAA,UAClB,UAAUA,EAAE,2BAA2B;AAAA,UACvC,wBAAwBA,EAAE,2BAA2B;AAAA,QAAA;AAAA,MACvD;AAAA,IAAA;AAAA,IAEF,gBAAAQ;AAAA,MAACH,EAAO;AAAA,MAAP;AAAA,QACC,OAAOL,EAAE,oBAAoB;AAAA,QAC7B,oBAAoB;AAAA,UAClB,UAAUA,EAAE,2BAA2B;AAAA,UACvC,wBAAwBA,EAAE,iCAAiC;AAAA,QAAA;AAAA,MAC7D;AAAA,IAAA;AAAA,IAEF,gBAAAQ;AAAA,MAACH,EAAO;AAAA,MAAP;AAAA,QACC,OAAOL,EAAE,kBAAkB;AAAA,QAC3B,gBAAgB,CAACY,MACOZ,EAAtBY,MAAS,aAAe,wBAA2B,oBAAN;AAAA,MAA0B;AAAA,IAAA;AAAA,sBAG1EC,GAAA,EACE,UAAA;AAAA,MAAAnB,KACC,gBAAAc,EAACN,EAAW,QAAX,EAAkB,SAAQ,aAAY,MAAK,UAAS,SAASR,GAC3D,UAAAM,EAAE,WAAW,EAAA,CAChB;AAAA,MAEF,gBAAAQ,EAACN,EAAW,QAAX,EAAkB,MAAK,UAAS,WAAWJ,EAAS,OAAO,WACzD,UAAAE,EAAE,SAAS,EAAA,CACd;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF,GACF,GACF;AAEJ;"}
+{"version":3,"file":"BankFormBody.js","sources":["../../../../../../src/components/Employee/PaymentMethod/shared/BankFormBody/BankFormBody.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { EmployeeBankAccount } from '@gusto/embedded-api/models/components/employeebankaccount'\nimport { useBankForm, type AccountType, type UseBankFormProps } from '../useBankForm'\nimport { ActionsLayout } from '@/components/Common'\nimport { Form } from '@/components/Common/Form'\nimport { BaseLayout } from '@/components/Base/Base'\nimport { SDKFormProvider } from '@/partner-hook-utils/form/SDKFormProvider'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport type { ResourceDictionary } from '@/types/Helpers'\nimport type { LoaderComponentType } from '@/components/Base'\n\n/** @internal */\nexport type BankFormBodyDictionary = ResourceDictionary<'Employee.BankFormBody'>\n\n/** @internal */\nexport interface BankFormBodyProps extends Omit<UseBankFormProps, 'employeeId'> {\n  employeeId: string\n  /**\n   * Translation overrides for the form's strings. Each consuming surface passes\n   * the dictionary it resolved from its own namespace so partner overrides on\n   * that namespace flow into the shared form text.\n   */\n  dictionary?: BankFormBodyDictionary\n  /** Called with the created bank account after a successful submit. */\n  onSaved: (bankAccount: EmployeeBankAccount) => void\n  onCancel?: () => void\n  LoaderComponent?: LoaderComponentType\n}\n\n/**\n * Shared bank-account form body. Owns the `useBankForm` composition, the field\n * JSX, and the submit/cancel actions. Reads its copy from the internal\n * `Employee.BankFormBody` namespace; consuming surfaces inject their own copy\n * via the `dictionary` prop and map the `onSaved`/`onCancel` callbacks onto\n * their surface-specific events.\n *\n * @internal\n */\nexport function BankFormBody({\n  employeeId,\n  dictionary,\n  onSaved,\n  onCancel,\n  LoaderComponent,\n  ...hookProps\n}: BankFormBodyProps) {\n  useI18n('Employee.BankFormBody')\n  useComponentDictionary('Employee.BankFormBody', dictionary)\n  const bankForm = useBankForm({ employeeId, ...hookProps })\n  const { t } = useTranslation('Employee.BankFormBody')\n  const Components = useComponentContext()\n\n  if (bankForm.isLoading) {\n    return (\n      <BaseLayout\n        isLoading\n        error={bankForm.errorHandling.errors}\n        LoaderComponent={LoaderComponent}\n      />\n    )\n  }\n\n  const { Fields } = bankForm.form\n\n  const handleSubmit = async () => {\n    const result = await bankForm.actions.onSubmit()\n    if (result) {\n      onSaved(result.data)\n    }\n  }\n\n  return (\n    <BaseLayout error={bankForm.errorHandling.errors} LoaderComponent={LoaderComponent}>\n      <SDKFormProvider formHookResult={bankForm}>\n        <Form onSubmit={handleSubmit}>\n          <Fields.Name\n            label={t('nameLabel')}\n            validationMessages={{ REQUIRED: t('validations.accountName') }}\n          />\n          <Fields.RoutingNumber\n            label={t('routingNumberLabel')}\n            description={t('routingNumberDescription')}\n            validationMessages={{\n              REQUIRED: t('validations.routingNumber'),\n              INVALID_ROUTING_NUMBER: t('validations.routingNumber'),\n            }}\n          />\n          <Fields.AccountNumber\n            label={t('accountNumberLabel')}\n            validationMessages={{\n              REQUIRED: t('validations.accountNumber'),\n              INVALID_ACCOUNT_NUMBER: t('validations.accountNumberFormat'),\n            }}\n          />\n          <Fields.AccountType\n            label={t('accountTypeLabel')}\n            getOptionLabel={(type: AccountType) =>\n              type === 'Checking' ? t('accountTypeChecking') : t('accountTypeSavings')\n            }\n          />\n          <ActionsLayout>\n            {onCancel && (\n              <Components.Button variant=\"secondary\" type=\"button\" onClick={onCancel}>\n                {t('cancelCta')}\n              </Components.Button>\n            )}\n            <Components.Button type=\"submit\" isLoading={bankForm.status.isPending}>\n              {t('saveCta')}\n            </Components.Button>\n          </ActionsLayout>\n        </Form>\n      </SDKFormProvider>\n    </BaseLayout>\n  )\n}\n"],"names":["BankFormBody","employeeId","dictionary","onSaved","onCancel","LoaderComponent","hookProps","useI18n","useComponentDictionary","bankForm","useBankForm","t","useTranslation","Components","useComponentContext","jsx","BaseLayout","Fields","handleSubmit","result","SDKFormProvider","jsxs","Form","type","ActionsLayout"],"mappings":";;;;;;;;;AAuCO,SAASA,EAAa;AAAA,EAC3B,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,GAAGC;AACL,GAAsB;AACpB,EAAAC,EAAQ,uBAAuB,GAC/BC,EAAuB,yBAAyBN,CAAU;AAC1D,QAAMO,IAAWC,EAAY,EAAE,YAAAT,GAAY,GAAGK,GAAW,GACnD,EAAE,GAAAK,EAAA,IAAMC,EAAe,uBAAuB,GAC9CC,IAAaC,EAAA;AAEnB,MAAIL,EAAS;AACX,WACE,gBAAAM;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAS;AAAA,QACT,OAAOP,EAAS,cAAc;AAAA,QAC9B,iBAAAJ;AAAA,MAAA;AAAA,IAAA;AAKN,QAAM,EAAE,QAAAY,MAAWR,EAAS,MAEtBS,IAAe,YAAY;AAC/B,UAAMC,IAAS,MAAMV,EAAS,QAAQ,SAAA;AACtC,IAAIU,KACFhB,EAAQgB,EAAO,IAAI;AAAA,EAEvB;AAEA,SACE,gBAAAJ,EAACC,GAAA,EAAW,OAAOP,EAAS,cAAc,QAAQ,iBAAAJ,GAChD,UAAA,gBAAAU,EAACK,GAAA,EAAgB,gBAAgBX,GAC/B,UAAA,gBAAAY,EAACC,GAAA,EAAK,UAAUJ,GACd,UAAA;AAAA,IAAA,gBAAAH;AAAA,MAACE,EAAO;AAAA,MAAP;AAAA,QACC,OAAON,EAAE,WAAW;AAAA,QACpB,oBAAoB,EAAE,UAAUA,EAAE,yBAAyB,EAAA;AAAA,MAAE;AAAA,IAAA;AAAA,IAE/D,gBAAAI;AAAA,MAACE,EAAO;AAAA,MAAP;AAAA,QACC,OAAON,EAAE,oBAAoB;AAAA,QAC7B,aAAaA,EAAE,0BAA0B;AAAA,QACzC,oBAAoB;AAAA,UAClB,UAAUA,EAAE,2BAA2B;AAAA,UACvC,wBAAwBA,EAAE,2BAA2B;AAAA,QAAA;AAAA,MACvD;AAAA,IAAA;AAAA,IAEF,gBAAAI;AAAA,MAACE,EAAO;AAAA,MAAP;AAAA,QACC,OAAON,EAAE,oBAAoB;AAAA,QAC7B,oBAAoB;AAAA,UAClB,UAAUA,EAAE,2BAA2B;AAAA,UACvC,wBAAwBA,EAAE,iCAAiC;AAAA,QAAA;AAAA,MAC7D;AAAA,IAAA;AAAA,IAEF,gBAAAI;AAAA,MAACE,EAAO;AAAA,MAAP;AAAA,QACC,OAAON,EAAE,kBAAkB;AAAA,QAC3B,gBAAgB,CAACY,MACOZ,EAAtBY,MAAS,aAAe,wBAA2B,oBAAN;AAAA,MAA0B;AAAA,IAAA;AAAA,sBAG1EC,GAAA,EACE,UAAA;AAAA,MAAApB,KACC,gBAAAW,EAACF,EAAW,QAAX,EAAkB,SAAQ,aAAY,MAAK,UAAS,SAAST,GAC3D,UAAAO,EAAE,WAAW,EAAA,CAChB;AAAA,MAEF,gBAAAI,EAACF,EAAW,QAAX,EAAkB,MAAK,UAAS,WAAWJ,EAAS,OAAO,WACzD,UAAAE,EAAE,SAAS,EAAA,CACd;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF,GACF,GACF;AAEJ;"}

package/dist/components/Employee/PaymentMethod/shared/SplitPaymentsFormBody/SplitPaymentsFormBody.d.ts

@@ -1,6 +1,7 @@
 import { EmployeePaymentMethod } from '@gusto/embedded-api/models/components/employeepaymentmethod';
 import { UseSplitPaymentsFormProps } from '../useSplitPaymentsForm';
 import { ResourceDictionary } from '../../../../../types/Helpers';
+import { LoaderComponentType } from '../../../../Base';
 /** @internal */
 export type SplitPaymentsFormBodyDictionary = ResourceDictionary<'Employee.SplitPaymentsFormBody'>;
 /** @internal */
@@ -14,6 +15,7 @@ export interface SplitPaymentsFormBodyProps extends UseSplitPaymentsFormProps {
     /** Called with the updated payment method after a successful submit. */
     onSaved: (paymentMethod: EmployeePaymentMethod) => void;
     onCancel: () => void;
+    LoaderComponent?: LoaderComponentType;
 }
 /**
  * Shared split-paycheck form body. Owns the `useSplitPaymentsForm` composition,
@@ -24,4 +26,4 @@ export interface SplitPaymentsFormBodyProps extends UseSplitPaymentsFormProps {
  *
  * @internal
  */
-export declare function SplitPaymentsFormBody({ dictionary, onSaved, onCancel, ...hookProps }: SplitPaymentsFormBodyProps): import("react").JSX.Element;
+export declare function SplitPaymentsFormBody({ dictionary, onSaved, onCancel, LoaderComponent, ...hookProps }: SplitPaymentsFormBodyProps): import("react").JSX.Element;

package/dist/components/Employee/PaymentMethod/shared/SplitPaymentsFormBody/SplitPaymentsFormBody.js

@@ -1,94 +1,111 @@
-import { jsx as r, jsxs as a } from "react/jsx-runtime";
-import { useTranslation as S } from "react-i18next";
-import p from "dompurify";
-import { useSplitPaymentsForm as v } from "../useSplitPaymentsForm/useSplitPaymentsForm.js";
-import { Flex as d } from "../../../../Common/Flex/Flex.js";
-import { ActionsLayout as B } from "../../../../Common/ActionsLayout/ActionsLayout.js";
-import { Form as D } from "../../../../Common/Form/Form.js";
-import { ReorderableList as P } from "../../../../Common/ReorderableList/ReorderableList.js";
-import { BaseLayout as y } from "../../../../Base/Base.js";
-import { SDKFormProvider as R } from "../../../../../partner-hook-utils/form/SDKFormProvider.js";
-import { useComponentContext as x } from "../../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useI18n as C, useComponentDictionary as N } from "../../../../../i18n/I18n.js";
-import { SPLIT_BY as b } from "../../../../../shared/constants.js";
-function Q({
-  dictionary: l,
-  onSaved: s,
-  onCancel: t,
+import { jsx as t, jsxs as a } from "react/jsx-runtime";
+import { useTranslation as v } from "react-i18next";
+import b from "dompurify";
+import { useSplitPaymentsForm as B } from "../useSplitPaymentsForm/useSplitPaymentsForm.js";
+import { Flex as c } from "../../../../Common/Flex/Flex.js";
+import { ActionsLayout as D } from "../../../../Common/ActionsLayout/ActionsLayout.js";
+import { Form as P } from "../../../../Common/Form/Form.js";
+import { ReorderableList as R } from "../../../../Common/ReorderableList/ReorderableList.js";
+import { BaseLayout as f } from "../../../../Base/Base.js";
+import { SDKFormProvider as x } from "../../../../../partner-hook-utils/form/SDKFormProvider.js";
+import { useComponentContext as N } from "../../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useI18n as T, useComponentDictionary as C } from "../../../../../i18n/I18n.js";
+import { SPLIT_BY as y } from "../../../../../shared/constants.js";
+function K({
+  dictionary: s,
+  onSaved: m,
+  onCancel: o,
+  LoaderComponent: i,
   ...e
 }) {
-  C("Employee.SplitPaymentsFormBody"), N("Employee.SplitPaymentsFormBody", l);
-  const n = v(e);
-  return n.isLoading ? /* @__PURE__ */ r(y, { isLoading: !0, error: n.errorHandling.errors }) : /* @__PURE__ */ r(T, { onSaved: s, onCancel: t, splitForm: n });
+  T("Employee.SplitPaymentsFormBody"), C("Employee.SplitPaymentsFormBody", s);
+  const n = B(e);
+  return n.isLoading ? /* @__PURE__ */ t(
+    f,
+    {
+      isLoading: !0,
+      error: n.errorHandling.errors,
+      LoaderComponent: i
+    }
+  ) : /* @__PURE__ */ t(
+    F,
+    {
+      onSaved: m,
+      onCancel: o,
+      splitForm: n,
+      LoaderComponent: i
+    }
+  );
 }
-function T({
-  onSaved: l,
-  onCancel: s,
-  splitForm: t
+function F({
+  onSaved: s,
+  onCancel: m,
+  splitForm: o,
+  LoaderComponent: i
 }) {
-  const { t: e } = S("Employee.SplitPaymentsFormBody"), n = x(), { Fields: i } = t.form, { remainderId: f, bankAccounts: g } = t.data, { splitBy: c, percentageTotal: h, hasPercentageImbalance: E } = t.status, L = async () => {
-    const o = await t.actions.onSubmit();
-    o && l(o.data);
+  const { t: e } = v("Employee.SplitPaymentsFormBody"), n = N(), { Fields: l } = o.form, { remainderId: g, bankAccounts: h } = o.data, { splitBy: u, percentageTotal: E, hasPercentageImbalance: L } = o.status, A = async () => {
+    const r = await o.actions.onSubmit();
+    r && s(r.data);
   };
-  if (g.length < 2) return null;
-  const u = (o) => e("splitAmountLabel", {
-    name: p.sanitize(o.name ?? ""),
-    account_number: p.sanitize(o.hiddenAccountNumber ?? ""),
+  if (h.length < 2) return null;
+  const p = (r) => e("splitAmountLabel", {
+    name: b.sanitize(r.name ?? ""),
+    account_number: b.sanitize(r.hiddenAccountNumber ?? ""),
     interpolation: { escapeValue: !1 }
-  }), A = (o) => {
-    const I = o.map((m) => i.splits[m]?.uuid).filter((m) => !!m);
-    t.actions.reorderSplits(I);
+  }), I = (r) => {
+    const S = r.map((d) => l.splits[d]?.uuid).filter((d) => !!d);
+    o.actions.reorderSplits(S);
   };
-  return /* @__PURE__ */ r(y, { error: t.errorHandling.errors, children: /* @__PURE__ */ r(R, { formHookResult: t, children: /* @__PURE__ */ a(D, { onSubmit: L, children: [
-    E && /* @__PURE__ */ r(
+  return /* @__PURE__ */ t(f, { error: o.errorHandling.errors, LoaderComponent: i, children: /* @__PURE__ */ t(x, { formHookResult: o, children: /* @__PURE__ */ a(P, { onSubmit: A, children: [
+    L && /* @__PURE__ */ t(
       n.Alert,
       {
         status: "error",
-        label: e("validations.percentageErrorWithTotal", { total: h }),
+        label: e("validations.percentageErrorWithTotal", { total: E }),
         disableScrollIntoView: !0
       }
     ),
-    /* @__PURE__ */ a(d, { flexDirection: "column", gap: 32, children: [
-      /* @__PURE__ */ a(d, { flexDirection: "column", gap: 4, children: [
-        /* @__PURE__ */ r(n.Heading, { as: "h1", styledAs: "h2", children: e("title") }),
-        /* @__PURE__ */ r(n.Text, { variant: "supporting", children: e("splitDescription") })
+    /* @__PURE__ */ a(c, { flexDirection: "column", gap: 32, children: [
+      /* @__PURE__ */ a(c, { flexDirection: "column", gap: 4, children: [
+        /* @__PURE__ */ t(n.Heading, { as: "h1", styledAs: "h2", children: e("title") }),
+        /* @__PURE__ */ t(n.Text, { variant: "supporting", children: e("splitDescription") })
       ] }),
-      /* @__PURE__ */ a(d, { flexDirection: "column", gap: 20, children: [
-        /* @__PURE__ */ r(
-          i.SplitBy,
+      /* @__PURE__ */ a(c, { flexDirection: "column", gap: 20, children: [
+        /* @__PURE__ */ t(
+          l.SplitBy,
           {
             label: e("splitByLabel"),
-            getOptionLabel: (o) => o === b.percentage ? e("percentageLabel") : e("amountLabel")
+            getOptionLabel: (r) => r === y.percentage ? e("percentageLabel") : e("amountLabel")
           }
         ),
-        c === b.amount ? /* @__PURE__ */ r(
-          P,
+        u === y.amount ? /* @__PURE__ */ t(
+          R,
           {
             label: e("draggableListLabel"),
-            items: i.splits.map((o) => ({
-              label: o.name ?? "",
-              content: /* @__PURE__ */ r(
-                o.Field,
+            items: l.splits.map((r) => ({
+              label: r.name ?? "",
+              content: /* @__PURE__ */ t(
+                r.Field,
                 {
-                  label: u(o),
+                  label: p(r),
                   min: 0,
                   validationMessages: {
                     REQUIRED: e("validations.amountError"),
                     INVALID_AMOUNT: e("validations.amountError"),
                     INVALID_PERCENTAGE: e("validations.amountError")
                   },
-                  placeholder: f === o.uuid ? e("remainderLabel") : ""
+                  placeholder: g === r.uuid ? e("remainderLabel") : ""
                 },
-                `amount-${o.uuid}`
+                `amount-${r.uuid}`
               )
             })),
-            onReorder: A
+            onReorder: I
           },
-          `reorderable-amount-list-${c}`
-        ) : i.splits.map((o) => /* @__PURE__ */ r(
-          o.Field,
+          `reorderable-amount-list-${u}`
+        ) : l.splits.map((r) => /* @__PURE__ */ t(
+          r.Field,
           {
-            label: u(o),
+            label: p(r),
             min: 0,
             validationMessages: {
               REQUIRED: e("validations.percentageAmountError"),
@@ -96,17 +113,17 @@ function T({
               INVALID_PERCENTAGE: e("validations.percentageAmountError")
             }
           },
-          `percentage-${o.uuid}`
+          `percentage-${r.uuid}`
         ))
       ] })
     ] }),
-    /* @__PURE__ */ a(B, { children: [
-      /* @__PURE__ */ r(n.Button, { variant: "secondary", type: "button", onClick: s, children: e("cancelCta") }),
-      /* @__PURE__ */ r(n.Button, { type: "submit", isLoading: t.status.isPending, children: e("saveCta") })
+    /* @__PURE__ */ a(D, { children: [
+      /* @__PURE__ */ t(n.Button, { variant: "secondary", type: "button", onClick: m, children: e("cancelCta") }),
+      /* @__PURE__ */ t(n.Button, { type: "submit", isLoading: o.status.isPending, children: e("saveCta") })
     ] })
   ] }) }) });
 }
 export {
-  Q as SplitPaymentsFormBody
+  K as SplitPaymentsFormBody
 };
 //# sourceMappingURL=SplitPaymentsFormBody.js.map

package/dist/components/Employee/PaymentMethod/shared/SplitPaymentsFormBody/SplitPaymentsFormBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"SplitPaymentsFormBody.js","sources":["../../../../../../src/components/Employee/PaymentMethod/shared/SplitPaymentsFormBody/SplitPaymentsFormBody.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport DOMPurify from 'dompurify'\nimport type { EmployeePaymentMethod } from '@gusto/embedded-api/models/components/employeepaymentmethod'\nimport {\n  useSplitPaymentsForm,\n  type SplitByValue,\n  type SplitFieldEntry,\n  type UseSplitPaymentsFormProps,\n  type UseSplitPaymentsFormReady,\n} from '../useSplitPaymentsForm'\nimport { ActionsLayout } from '@/components/Common'\nimport { Form } from '@/components/Common/Form'\nimport { Flex } from '@/components/Common/Flex'\nimport { ReorderableList } from '@/components/Common/ReorderableList'\nimport { BaseLayout } from '@/components/Base/Base'\nimport { SDKFormProvider } from '@/partner-hook-utils/form/SDKFormProvider'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { SPLIT_BY } from '@/shared/constants'\nimport type { ResourceDictionary } from '@/types/Helpers'\n\n/** @internal */\nexport type SplitPaymentsFormBodyDictionary = ResourceDictionary<'Employee.SplitPaymentsFormBody'>\n\n/** @internal */\nexport interface SplitPaymentsFormBodyProps extends UseSplitPaymentsFormProps {\n  /**\n   * Translation overrides for the form's strings. Each consuming surface passes\n   * the dictionary it resolved from its own namespace so partner overrides on\n   * that namespace flow into the shared form text.\n   */\n  dictionary?: SplitPaymentsFormBodyDictionary\n  /** Called with the updated payment method after a successful submit. */\n  onSaved: (paymentMethod: EmployeePaymentMethod) => void\n  onCancel: () => void\n}\n\n/**\n * Shared split-paycheck form body. Owns the `useSplitPaymentsForm` composition,\n * the reorderable-list/percentage field JSX, and the submit/cancel actions.\n * Reads its copy from the internal `Employee.SplitPaymentsFormBody` namespace;\n * consuming surfaces inject their own copy via the `dictionary` prop and map the\n * `onSaved`/`onCancel` callbacks onto their surface-specific events.\n *\n * @internal\n */\nexport function SplitPaymentsFormBody({\n  dictionary,\n  onSaved,\n  onCancel,\n  ...hookProps\n}: SplitPaymentsFormBodyProps) {\n  useI18n('Employee.SplitPaymentsFormBody')\n  useComponentDictionary('Employee.SplitPaymentsFormBody', dictionary)\n  const splitForm = useSplitPaymentsForm(hookProps)\n\n  if (splitForm.isLoading) {\n    return <BaseLayout isLoading error={splitForm.errorHandling.errors} />\n  }\n\n  return <SplitPaymentsFormBodyReady onSaved={onSaved} onCancel={onCancel} splitForm={splitForm} />\n}\n\ninterface SplitPaymentsFormBodyReadyProps {\n  onSaved: (paymentMethod: EmployeePaymentMethod) => void\n  onCancel: () => void\n  splitForm: UseSplitPaymentsFormReady\n}\n\nfunction SplitPaymentsFormBodyReady({\n  onSaved,\n  onCancel,\n  splitForm,\n}: SplitPaymentsFormBodyReadyProps) {\n  const { t } = useTranslation('Employee.SplitPaymentsFormBody')\n  const Components = useComponentContext()\n  const { Fields } = splitForm.form\n  const { remainderId, bankAccounts } = splitForm.data\n  const { splitBy, percentageTotal, hasPercentageImbalance } = splitForm.status\n\n  const handleSubmit = async () => {\n    const result = await splitForm.actions.onSubmit()\n    if (result) {\n      onSaved(result.data)\n    }\n  }\n\n  if (bankAccounts.length < 2) return null\n\n  const labelForSplit = (split: SplitFieldEntry) =>\n    t('splitAmountLabel', {\n      name: DOMPurify.sanitize(split.name ?? ''),\n      account_number: DOMPurify.sanitize(split.hiddenAccountNumber ?? ''),\n      interpolation: { escapeValue: false },\n    })\n\n  const handleReorder = (indices: number[]) => {\n    const orderedUuids = indices\n      .map(index => Fields.splits[index]?.uuid)\n      .filter((uuid): uuid is string => Boolean(uuid))\n    splitForm.actions.reorderSplits(orderedUuids)\n  }\n\n  return (\n    <BaseLayout error={splitForm.errorHandling.errors}>\n      <SDKFormProvider formHookResult={splitForm}>\n        <Form onSubmit={handleSubmit}>\n          {hasPercentageImbalance && (\n            <Components.Alert\n              status=\"error\"\n              label={t('validations.percentageErrorWithTotal', { total: percentageTotal })}\n              disableScrollIntoView\n            />\n          )}\n          <Flex flexDirection=\"column\" gap={32}>\n            <Flex flexDirection=\"column\" gap={4}>\n              <Components.Heading as=\"h1\" styledAs=\"h2\">\n                {t('title')}\n              </Components.Heading>\n              <Components.Text variant=\"supporting\">{t('splitDescription')}</Components.Text>\n            </Flex>\n            <Flex flexDirection=\"column\" gap={20}>\n              <Fields.SplitBy\n                label={t('splitByLabel')}\n                getOptionLabel={(value: SplitByValue) =>\n                  value === SPLIT_BY.percentage ? t('percentageLabel') : t('amountLabel')\n                }\n              />\n              {splitBy === SPLIT_BY.amount ? (\n                <ReorderableList\n                  key={`reorderable-amount-list-${splitBy}`}\n                  label={t('draggableListLabel')}\n                  items={Fields.splits.map(split => ({\n                    label: split.name ?? '',\n                    content: (\n                      <split.Field\n                        key={`amount-${split.uuid}`}\n                        label={labelForSplit(split)}\n                        min={0}\n                        validationMessages={{\n                          REQUIRED: t('validations.amountError'),\n                          INVALID_AMOUNT: t('validations.amountError'),\n                          INVALID_PERCENTAGE: t('validations.amountError'),\n                        }}\n                        placeholder={remainderId === split.uuid ? t('remainderLabel') : ''}\n                      />\n                    ),\n                  }))}\n                  onReorder={handleReorder}\n                />\n              ) : (\n                Fields.splits.map(split => (\n                  <split.Field\n                    key={`percentage-${split.uuid}`}\n                    label={labelForSplit(split)}\n                    min={0}\n                    validationMessages={{\n                      REQUIRED: t('validations.percentageAmountError'),\n                      INVALID_AMOUNT: t('validations.percentageAmountError'),\n                      INVALID_PERCENTAGE: t('validations.percentageAmountError'),\n                    }}\n                  />\n                ))\n              )}\n            </Flex>\n          </Flex>\n          <ActionsLayout>\n            <Components.Button variant=\"secondary\" type=\"button\" onClick={onCancel}>\n              {t('cancelCta')}\n            </Components.Button>\n            <Components.Button type=\"submit\" isLoading={splitForm.status.isPending}>\n              {t('saveCta')}\n            </Components.Button>\n          </ActionsLayout>\n        </Form>\n      </SDKFormProvider>\n    </BaseLayout>\n  )\n}\n"],"names":["SplitPaymentsFormBody","dictionary","onSaved","onCancel","hookProps","useI18n","useComponentDictionary","splitForm","useSplitPaymentsForm","BaseLayout","jsx","SplitPaymentsFormBodyReady","t","useTranslation","Components","useComponentContext","Fields","remainderId","bankAccounts","splitBy","percentageTotal","hasPercentageImbalance","handleSubmit","result","labelForSplit","split","DOMPurify","handleReorder","indices","orderedUuids","index","uuid","SDKFormProvider","jsxs","Form","Flex","value","SPLIT_BY","ReorderableList","ActionsLayout"],"mappings":"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"}
+{"version":3,"file":"SplitPaymentsFormBody.js","sources":["../../../../../../src/components/Employee/PaymentMethod/shared/SplitPaymentsFormBody/SplitPaymentsFormBody.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport DOMPurify from 'dompurify'\nimport type { EmployeePaymentMethod } from '@gusto/embedded-api/models/components/employeepaymentmethod'\nimport {\n  useSplitPaymentsForm,\n  type SplitByValue,\n  type SplitFieldEntry,\n  type UseSplitPaymentsFormProps,\n  type UseSplitPaymentsFormReady,\n} from '../useSplitPaymentsForm'\nimport { ActionsLayout } from '@/components/Common'\nimport { Form } from '@/components/Common/Form'\nimport { Flex } from '@/components/Common/Flex'\nimport { ReorderableList } from '@/components/Common/ReorderableList'\nimport { BaseLayout } from '@/components/Base/Base'\nimport { SDKFormProvider } from '@/partner-hook-utils/form/SDKFormProvider'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { SPLIT_BY } from '@/shared/constants'\nimport type { ResourceDictionary } from '@/types/Helpers'\nimport type { LoaderComponentType } from '@/components/Base'\n\n/** @internal */\nexport type SplitPaymentsFormBodyDictionary = ResourceDictionary<'Employee.SplitPaymentsFormBody'>\n\n/** @internal */\nexport interface SplitPaymentsFormBodyProps extends UseSplitPaymentsFormProps {\n  /**\n   * Translation overrides for the form's strings. Each consuming surface passes\n   * the dictionary it resolved from its own namespace so partner overrides on\n   * that namespace flow into the shared form text.\n   */\n  dictionary?: SplitPaymentsFormBodyDictionary\n  /** Called with the updated payment method after a successful submit. */\n  onSaved: (paymentMethod: EmployeePaymentMethod) => void\n  onCancel: () => void\n  LoaderComponent?: LoaderComponentType\n}\n\n/**\n * Shared split-paycheck form body. Owns the `useSplitPaymentsForm` composition,\n * the reorderable-list/percentage field JSX, and the submit/cancel actions.\n * Reads its copy from the internal `Employee.SplitPaymentsFormBody` namespace;\n * consuming surfaces inject their own copy via the `dictionary` prop and map the\n * `onSaved`/`onCancel` callbacks onto their surface-specific events.\n *\n * @internal\n */\nexport function SplitPaymentsFormBody({\n  dictionary,\n  onSaved,\n  onCancel,\n  LoaderComponent,\n  ...hookProps\n}: SplitPaymentsFormBodyProps) {\n  useI18n('Employee.SplitPaymentsFormBody')\n  useComponentDictionary('Employee.SplitPaymentsFormBody', dictionary)\n  const splitForm = useSplitPaymentsForm(hookProps)\n\n  if (splitForm.isLoading) {\n    return (\n      <BaseLayout\n        isLoading\n        error={splitForm.errorHandling.errors}\n        LoaderComponent={LoaderComponent}\n      />\n    )\n  }\n\n  return (\n    <SplitPaymentsFormBodyReady\n      onSaved={onSaved}\n      onCancel={onCancel}\n      splitForm={splitForm}\n      LoaderComponent={LoaderComponent}\n    />\n  )\n}\n\ninterface SplitPaymentsFormBodyReadyProps {\n  onSaved: (paymentMethod: EmployeePaymentMethod) => void\n  onCancel: () => void\n  splitForm: UseSplitPaymentsFormReady\n  LoaderComponent?: LoaderComponentType\n}\n\nfunction SplitPaymentsFormBodyReady({\n  onSaved,\n  onCancel,\n  splitForm,\n  LoaderComponent,\n}: SplitPaymentsFormBodyReadyProps) {\n  const { t } = useTranslation('Employee.SplitPaymentsFormBody')\n  const Components = useComponentContext()\n  const { Fields } = splitForm.form\n  const { remainderId, bankAccounts } = splitForm.data\n  const { splitBy, percentageTotal, hasPercentageImbalance } = splitForm.status\n\n  const handleSubmit = async () => {\n    const result = await splitForm.actions.onSubmit()\n    if (result) {\n      onSaved(result.data)\n    }\n  }\n\n  if (bankAccounts.length < 2) return null\n\n  const labelForSplit = (split: SplitFieldEntry) =>\n    t('splitAmountLabel', {\n      name: DOMPurify.sanitize(split.name ?? ''),\n      account_number: DOMPurify.sanitize(split.hiddenAccountNumber ?? ''),\n      interpolation: { escapeValue: false },\n    })\n\n  const handleReorder = (indices: number[]) => {\n    const orderedUuids = indices\n      .map(index => Fields.splits[index]?.uuid)\n      .filter((uuid): uuid is string => Boolean(uuid))\n    splitForm.actions.reorderSplits(orderedUuids)\n  }\n\n  return (\n    <BaseLayout error={splitForm.errorHandling.errors} LoaderComponent={LoaderComponent}>\n      <SDKFormProvider formHookResult={splitForm}>\n        <Form onSubmit={handleSubmit}>\n          {hasPercentageImbalance && (\n            <Components.Alert\n              status=\"error\"\n              label={t('validations.percentageErrorWithTotal', { total: percentageTotal })}\n              disableScrollIntoView\n            />\n          )}\n          <Flex flexDirection=\"column\" gap={32}>\n            <Flex flexDirection=\"column\" gap={4}>\n              <Components.Heading as=\"h1\" styledAs=\"h2\">\n                {t('title')}\n              </Components.Heading>\n              <Components.Text variant=\"supporting\">{t('splitDescription')}</Components.Text>\n            </Flex>\n            <Flex flexDirection=\"column\" gap={20}>\n              <Fields.SplitBy\n                label={t('splitByLabel')}\n                getOptionLabel={(value: SplitByValue) =>\n                  value === SPLIT_BY.percentage ? t('percentageLabel') : t('amountLabel')\n                }\n              />\n              {splitBy === SPLIT_BY.amount ? (\n                <ReorderableList\n                  key={`reorderable-amount-list-${splitBy}`}\n                  label={t('draggableListLabel')}\n                  items={Fields.splits.map(split => ({\n                    label: split.name ?? '',\n                    content: (\n                      <split.Field\n                        key={`amount-${split.uuid}`}\n                        label={labelForSplit(split)}\n                        min={0}\n                        validationMessages={{\n                          REQUIRED: t('validations.amountError'),\n                          INVALID_AMOUNT: t('validations.amountError'),\n                          INVALID_PERCENTAGE: t('validations.amountError'),\n                        }}\n                        placeholder={remainderId === split.uuid ? t('remainderLabel') : ''}\n                      />\n                    ),\n                  }))}\n                  onReorder={handleReorder}\n                />\n              ) : (\n                Fields.splits.map(split => (\n                  <split.Field\n                    key={`percentage-${split.uuid}`}\n                    label={labelForSplit(split)}\n                    min={0}\n                    validationMessages={{\n                      REQUIRED: t('validations.percentageAmountError'),\n                      INVALID_AMOUNT: t('validations.percentageAmountError'),\n                      INVALID_PERCENTAGE: t('validations.percentageAmountError'),\n                    }}\n                  />\n                ))\n              )}\n            </Flex>\n          </Flex>\n          <ActionsLayout>\n            <Components.Button variant=\"secondary\" type=\"button\" onClick={onCancel}>\n              {t('cancelCta')}\n            </Components.Button>\n            <Components.Button type=\"submit\" isLoading={splitForm.status.isPending}>\n              {t('saveCta')}\n            </Components.Button>\n          </ActionsLayout>\n        </Form>\n      </SDKFormProvider>\n    </BaseLayout>\n  )\n}\n"],"names":["SplitPaymentsFormBody","dictionary","onSaved","onCancel","LoaderComponent","hookProps","useI18n","useComponentDictionary","splitForm","useSplitPaymentsForm","jsx","BaseLayout","SplitPaymentsFormBodyReady","t","useTranslation","Components","useComponentContext","Fields","remainderId","bankAccounts","splitBy","percentageTotal","hasPercentageImbalance","handleSubmit","result","labelForSplit","split","DOMPurify","handleReorder","indices","orderedUuids","index","uuid","SDKFormProvider","jsxs","Form","Flex","value","SPLIT_BY","ReorderableList","ActionsLayout"],"mappings":"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"}

package/dist/components/Employee/PaymentMethod/shared/useBankForm/fields.js

@@ -1,6 +1,6 @@
 import { jsx as n } from "react/jsx-runtime";
-import { RadioGroupHookField as r } from "../../../../../partner-hook-utils/form/fields/RadioGroupHookField.js";
 import { TextInputHookField as o } from "../../../../../partner-hook-utils/form/fields/TextInputHookField.js";
+import { RadioGroupHookField as r } from "../../../../../partner-hook-utils/form/fields/RadioGroupHookField.js";
 function m(e) {
   return /* @__PURE__ */ n(o, { ...e, name: "name" });
 }

package/dist/components/Employee/PaymentMethod/shared/useSplitPaymentsForm/splitFieldFactory.js

@@ -1,7 +1,7 @@
 import { jsx as a } from "react/jsx-runtime";
 import { useWatch as f } from "react-hook-form";
-import { SPLIT_BY as s } from "../../../../../shared/constants.js";
-import { NumberInputHookField as F } from "../../../../../partner-hook-utils/form/fields/NumberInputHookField.js";
+import { NumberInputHookField as s } from "../../../../../partner-hook-utils/form/fields/NumberInputHookField.js";
+import { SPLIT_BY as F } from "../../../../../shared/constants.js";
 function B(t) {
   function n({
     label: r,
@@ -13,9 +13,9 @@ function B(t) {
     placeholder: c,
     FieldComponent: d
   }) {
-    const l = o?.form.hookFormInternals.formMethods.control, p = f({ control: l, name: "splitBy" }) === s.amount ? "currency" : "percent";
+    const l = o?.form.hookFormInternals.formMethods.control, p = f({ control: l, name: "splitBy" }) === F.amount ? "currency" : "percent";
     return /* @__PURE__ */ a(
-      F,
+      s,
       {
         name: `splitAmount.${t}`,
         formHookResult: o,

package/dist/components/Employee/Paystubs/management/PaystubsCard/PaystubsCard.d.ts

@@ -1,5 +1,6 @@
 import { EventType } from '../../../../../shared/constants';
 import { OnEventType } from '../../../../Base/useBase';
+import { LoaderComponentType } from '../../../../Base';
 /**
  * Props for {@link PaystubsCard}.
  *
@@ -10,6 +11,8 @@ export interface PaystubsCardProps {
     employeeId: string;
     /** Event handler fired when paystub interactions occur. */
     onEvent: OnEventType<EventType, unknown>;
+    /** Custom loading indicator rendered while this component's async data is fetching. Overrides the indicator configured on `GustoProvider` for this instance only. */
+    LoaderComponent?: LoaderComponentType;
 }
 /**
  * Standalone "Paystubs" card. Owns its own data fetch via
@@ -22,4 +25,4 @@ export interface PaystubsCardProps {
  *
  * @public
  */
-export declare function PaystubsCard(props: PaystubsCardProps): import("react").JSX.Element;
+export declare function PaystubsCard({ LoaderComponent, ...props }: PaystubsCardProps): import("react").JSX.Element;