@gusto/embedded-react-sdk 0.52.2 → 0.53.0

package/dist/components/Employee/FederalTaxes/shared/useFederalTaxesForm/fields.js

@@ -1,12 +1,12 @@
 import { jsx as e } from "react/jsx-runtime";
-import { SelectHookField as t } from "../../../../../partner-hook-utils/form/fields/SelectHookField.js";
 import { NumberInputHookField as o } from "../../../../../partner-hook-utils/form/fields/NumberInputHookField.js";
-import { RadioGroupHookField as r } from "../../../../../partner-hook-utils/form/fields/RadioGroupHookField.js";
+import { RadioGroupHookField as t } from "../../../../../partner-hook-utils/form/fields/RadioGroupHookField.js";
+import { SelectHookField as r } from "../../../../../partner-hook-utils/form/fields/SelectHookField.js";
 function d(n) {
-  return /* @__PURE__ */ e(t, { ...n, name: "filingStatus" });
+  return /* @__PURE__ */ e(r, { ...n, name: "filingStatus" });
 }
 function a(n) {
-  return /* @__PURE__ */ e(r, { ...n, name: "twoJobs" });
+  return /* @__PURE__ */ e(t, { ...n, name: "twoJobs" });
 }
 function f(n) {
   return /* @__PURE__ */ e(o, { ...n, name: "dependentsAmount", format: "currency", min: 0 });

package/dist/components/Employee/HomeAddress/management/HomeAddressCard/HomeAddressCard.js

@@ -2,22 +2,21 @@ import { jsx as e, jsxs as c } from "react/jsx-runtime";
 import { useTranslation as l } from "react-i18next";
 import { Flex as a } from "../../../../Common/Flex/Flex.js";
 import { Loading as p } from "../../../../Common/Loading/Loading.js";
-import { useComponentContext as u } from "../../../../../contexts/ComponentAdapter/useComponentContext.js";
-import "react";
-import { BaseBoundaries as g, BaseLayout as E } from "../../../../Base/Base.js";
+import { BaseBoundaries as u, BaseLayout as g } from "../../../../Base/Base.js";
+import { useComponentContext as E } from "../../../../../contexts/ComponentAdapter/useComponentContext.js";
 import { getStreet as f, getCityStateZip as h } from "../../../../../helpers/formattedStrings.js";
 import { useI18n as x } from "../../../../../i18n/I18n.js";
 import { componentEvents as A } from "../../../../../shared/constants.js";
 import { useHomeAddressSummary as H } from "../../shared/useHomeAddressSummary/useHomeAddressSummary.js";
-function O(o) {
-  return /* @__PURE__ */ e(g, { componentName: "Employee.Management.HomeAddress", children: /* @__PURE__ */ e(C, { ...o }) });
+function j(o) {
+  return /* @__PURE__ */ e(u, { componentName: "Employee.Management.HomeAddress", children: /* @__PURE__ */ e(C, { ...o }) });
 }
 function C({ employeeId: o, onEvent: s }) {
   x("Employee.Management.HomeAddress");
-  const { t } = l("Employee.Management.HomeAddress"), r = u(), n = H({ employeeId: o }), m = n.isLoading, i = n.isLoading ? void 0 : n.data.currentHomeAddress, d = () => {
+  const { t } = l("Employee.Management.HomeAddress"), r = E(), n = H({ employeeId: o }), m = n.isLoading, i = n.isLoading ? void 0 : n.data.currentHomeAddress, d = () => {
     s(A.EMPLOYEE_MANAGEMENT_HOME_ADDRESS_EDIT_REQUESTED, { employeeId: o });
   };
-  return /* @__PURE__ */ e(E, { error: n.errorHandling.errors, children: /* @__PURE__ */ e(
+  return /* @__PURE__ */ e(g, { error: n.errorHandling.errors, children: /* @__PURE__ */ e(
     r.Box,
     {
       header: /* @__PURE__ */ e(
@@ -35,6 +34,6 @@ function C({ employeeId: o, onEvent: s }) {
   ) });
 }
 export {
-  O as HomeAddressCard
+  j as HomeAddressCard
 };
 //# sourceMappingURL=HomeAddressCard.js.map

package/dist/components/Employee/HomeAddress/management/HomeAddressCard/HomeAddressCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"HomeAddressCard.js","sources":["../../../../../../src/components/Employee/HomeAddress/management/HomeAddressCard/HomeAddressCard.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { useHomeAddressSummary } from '../../shared/useHomeAddressSummary'\nimport { Loading } from '@/components/Common'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { BaseBoundaries, BaseLayout } from '@/components/Base/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { getStreet, getCityStateZip } from '@/helpers/formattedStrings'\nimport { useI18n } from '@/i18n'\nimport { componentEvents, type EventType } from '@/shared/constants'\nimport type { OnEventType } from '@/components/Base/useBase'\n\n/**\n * Props for {@link HomeAddressCard}.\n *\n * @public\n */\nexport interface HomeAddressCardProps {\n  /** The associated employee identifier. */\n  employeeId: string\n  /** Event handler fired when the card's Manage button is clicked. */\n  onEvent: OnEventType<EventType, unknown>\n}\n\n/**\n * Standalone employee home address summary card.\n *\n * @remarks\n * Fetches the employee's active home address and renders it alongside a Manage button.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `employee/management/homeAddress/editRequested` | Manage button clicked | `{ employeeId: string }` |\n *\n * @public\n */\nexport function HomeAddressCard(props: HomeAddressCardProps) {\n  return (\n    <BaseBoundaries componentName=\"Employee.Management.HomeAddress\">\n      <HomeAddressCardContent {...props} />\n    </BaseBoundaries>\n  )\n}\n\nfunction HomeAddressCardContent({ employeeId, onEvent }: HomeAddressCardProps) {\n  useI18n('Employee.Management.HomeAddress')\n  const { t } = useTranslation('Employee.Management.HomeAddress')\n  const Components = useComponentContext()\n\n  const summary = useHomeAddressSummary({ employeeId })\n\n  const isLoading = summary.isLoading\n  const currentHomeAddress = summary.isLoading ? undefined : summary.data.currentHomeAddress\n\n  const handleManage = () => {\n    onEvent(componentEvents.EMPLOYEE_MANAGEMENT_HOME_ADDRESS_EDIT_REQUESTED, { employeeId })\n  }\n\n  return (\n    <BaseLayout error={summary.errorHandling.errors}>\n      <Components.Box\n        header={\n          <Components.BoxHeader\n            title={t('card.title')}\n            action={\n              <Components.Button variant=\"secondary\" onClick={handleManage} isDisabled={isLoading}>\n                {t('card.manageCta')}\n              </Components.Button>\n            }\n          />\n        }\n      >\n        <Flex flexDirection=\"column\" gap={16}>\n          {isLoading ? (\n            <Loading />\n          ) : currentHomeAddress ? (\n            <Flex flexDirection=\"column\" gap={0}>\n              <Components.Text weight=\"medium\">\n                {getStreet(currentHomeAddress).replace(',', '')}\n              </Components.Text>\n              <Components.Text variant=\"supporting\">\n                {getCityStateZip(currentHomeAddress)}\n              </Components.Text>\n            </Flex>\n          ) : (\n            <Components.Text>{t('card.noAddress')}</Components.Text>\n          )}\n        </Flex>\n      </Components.Box>\n    </BaseLayout>\n  )\n}\n"],"names":["HomeAddressCard","props","jsx","BaseBoundaries","HomeAddressCardContent","employeeId","onEvent","useI18n","useTranslation","Components","useComponentContext","summary","useHomeAddressSummary","isLoading","currentHomeAddress","handleManage","componentEvents","BaseLayout","Flex","Loading","jsxs","getStreet","getCityStateZip"],"mappings":";;;;;;;;;;;AAoCO,SAASA,EAAgBC,GAA6B;AAC3D,SACE,gBAAAC,EAACC,KAAe,eAAc,mCAC5B,4BAACC,GAAA,EAAwB,GAAGH,GAAO,EAAA,CACrC;AAEJ;AAEA,SAASG,EAAuB,EAAE,YAAAC,GAAY,SAAAC,KAAiC;AAC7E,EAAAC,EAAQ,iCAAiC;AACzC,QAAM,EAAE,EAAA,IAAMC,EAAe,iCAAiC,GACxDC,IAAaC,EAAA,GAEbC,IAAUC,EAAsB,EAAE,YAAAP,GAAY,GAE9CQ,IAAYF,EAAQ,WACpBG,IAAqBH,EAAQ,YAAY,SAAYA,EAAQ,KAAK,oBAElEI,IAAe,MAAM;AACzB,IAAAT,EAAQU,EAAgB,iDAAiD,EAAE,YAAAX,EAAA,CAAY;AAAA,EACzF;AAEA,SACE,gBAAAH,EAACe,GAAA,EAAW,OAAON,EAAQ,cAAc,QACvC,UAAA,gBAAAT;AAAA,IAACO,EAAW;AAAA,IAAX;AAAA,MACC,QACE,gBAAAP;AAAA,QAACO,EAAW;AAAA,QAAX;AAAA,UACC,OAAO,EAAE,YAAY;AAAA,UACrB,QACE,gBAAAP,EAACO,EAAW,QAAX,EAAkB,SAAQ,aAAY,SAASM,GAAc,YAAYF,GACvE,UAAA,EAAE,gBAAgB,EAAA,CACrB;AAAA,QAAA;AAAA,MAAA;AAAA,MAKN,4BAACK,GAAA,EAAK,eAAc,UAAS,KAAK,IAC/B,UAAAL,IACC,gBAAAX,EAACiB,GAAA,EAAQ,IACPL,IACF,gBAAAM,EAACF,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA;AAAA,QAAA,gBAAAhB,EAACO,EAAW,MAAX,EAAgB,QAAO,UACrB,UAAAY,EAAUP,CAAkB,EAAE,QAAQ,KAAK,EAAE,EAAA,CAChD;AAAA,QACA,gBAAAZ,EAACO,EAAW,MAAX,EAAgB,SAAQ,cACtB,UAAAa,EAAgBR,CAAkB,EAAA,CACrC;AAAA,MAAA,GACF,sBAECL,EAAW,MAAX,EAAiB,UAAA,EAAE,gBAAgB,GAAE,EAAA,CAE1C;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;"}
+{"version":3,"file":"HomeAddressCard.js","sources":["../../../../../../src/components/Employee/HomeAddress/management/HomeAddressCard/HomeAddressCard.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { useHomeAddressSummary } from '../../shared/useHomeAddressSummary'\nimport { Loading } from '@/components/Common'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { BaseBoundaries, BaseLayout } from '@/components/Base/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { getStreet, getCityStateZip } from '@/helpers/formattedStrings'\nimport { useI18n } from '@/i18n'\nimport { componentEvents, type EventType } from '@/shared/constants'\nimport type { OnEventType } from '@/components/Base/useBase'\n\n/**\n * Props for {@link HomeAddressCard}.\n *\n * @public\n */\nexport interface HomeAddressCardProps {\n  /** The associated employee identifier. */\n  employeeId: string\n  /** Event handler fired when the card's Manage button is clicked. */\n  onEvent: OnEventType<EventType, unknown>\n}\n\n/**\n * Standalone employee home address summary card.\n *\n * @remarks\n * Fetches the employee's active home address and renders it alongside a Manage button.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `employee/management/homeAddress/editRequested` | Manage button clicked | `{ employeeId: string }` |\n *\n * @public\n */\nexport function HomeAddressCard(props: HomeAddressCardProps) {\n  return (\n    <BaseBoundaries componentName=\"Employee.Management.HomeAddress\">\n      <HomeAddressCardContent {...props} />\n    </BaseBoundaries>\n  )\n}\n\nfunction HomeAddressCardContent({ employeeId, onEvent }: HomeAddressCardProps) {\n  useI18n('Employee.Management.HomeAddress')\n  const { t } = useTranslation('Employee.Management.HomeAddress')\n  const Components = useComponentContext()\n\n  const summary = useHomeAddressSummary({ employeeId })\n\n  const isLoading = summary.isLoading\n  const currentHomeAddress = summary.isLoading ? undefined : summary.data.currentHomeAddress\n\n  const handleManage = () => {\n    onEvent(componentEvents.EMPLOYEE_MANAGEMENT_HOME_ADDRESS_EDIT_REQUESTED, { employeeId })\n  }\n\n  return (\n    <BaseLayout error={summary.errorHandling.errors}>\n      <Components.Box\n        header={\n          <Components.BoxHeader\n            title={t('card.title')}\n            action={\n              <Components.Button variant=\"secondary\" onClick={handleManage} isDisabled={isLoading}>\n                {t('card.manageCta')}\n              </Components.Button>\n            }\n          />\n        }\n      >\n        <Flex flexDirection=\"column\" gap={16}>\n          {isLoading ? (\n            <Loading />\n          ) : currentHomeAddress ? (\n            <Flex flexDirection=\"column\" gap={0}>\n              <Components.Text weight=\"medium\">\n                {getStreet(currentHomeAddress).replace(',', '')}\n              </Components.Text>\n              <Components.Text variant=\"supporting\">\n                {getCityStateZip(currentHomeAddress)}\n              </Components.Text>\n            </Flex>\n          ) : (\n            <Components.Text>{t('card.noAddress')}</Components.Text>\n          )}\n        </Flex>\n      </Components.Box>\n    </BaseLayout>\n  )\n}\n"],"names":["HomeAddressCard","props","jsx","BaseBoundaries","HomeAddressCardContent","employeeId","onEvent","useI18n","useTranslation","Components","useComponentContext","summary","useHomeAddressSummary","isLoading","currentHomeAddress","handleManage","componentEvents","BaseLayout","Flex","Loading","jsxs","getStreet","getCityStateZip"],"mappings":";;;;;;;;;;AAoCO,SAASA,EAAgBC,GAA6B;AAC3D,SACE,gBAAAC,EAACC,KAAe,eAAc,mCAC5B,4BAACC,GAAA,EAAwB,GAAGH,GAAO,EAAA,CACrC;AAEJ;AAEA,SAASG,EAAuB,EAAE,YAAAC,GAAY,SAAAC,KAAiC;AAC7E,EAAAC,EAAQ,iCAAiC;AACzC,QAAM,EAAE,EAAA,IAAMC,EAAe,iCAAiC,GACxDC,IAAaC,EAAA,GAEbC,IAAUC,EAAsB,EAAE,YAAAP,GAAY,GAE9CQ,IAAYF,EAAQ,WACpBG,IAAqBH,EAAQ,YAAY,SAAYA,EAAQ,KAAK,oBAElEI,IAAe,MAAM;AACzB,IAAAT,EAAQU,EAAgB,iDAAiD,EAAE,YAAAX,EAAA,CAAY;AAAA,EACzF;AAEA,SACE,gBAAAH,EAACe,GAAA,EAAW,OAAON,EAAQ,cAAc,QACvC,UAAA,gBAAAT;AAAA,IAACO,EAAW;AAAA,IAAX;AAAA,MACC,QACE,gBAAAP;AAAA,QAACO,EAAW;AAAA,QAAX;AAAA,UACC,OAAO,EAAE,YAAY;AAAA,UACrB,QACE,gBAAAP,EAACO,EAAW,QAAX,EAAkB,SAAQ,aAAY,SAASM,GAAc,YAAYF,GACvE,UAAA,EAAE,gBAAgB,EAAA,CACrB;AAAA,QAAA;AAAA,MAAA;AAAA,MAKN,4BAACK,GAAA,EAAK,eAAc,UAAS,KAAK,IAC/B,UAAAL,IACC,gBAAAX,EAACiB,GAAA,EAAQ,IACPL,IACF,gBAAAM,EAACF,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA;AAAA,QAAA,gBAAAhB,EAACO,EAAW,MAAX,EAAgB,QAAO,UACrB,UAAAY,EAAUP,CAAkB,EAAE,QAAQ,KAAK,EAAE,EAAA,CAChD;AAAA,QACA,gBAAAZ,EAACO,EAAW,MAAX,EAAgB,SAAQ,cACtB,UAAAa,EAAgBR,CAAkB,EAAA,CACrC;AAAA,MAAA,GACF,sBAECL,EAAW,MAAX,EAAiB,UAAA,EAAE,gBAAgB,GAAE,EAAA,CAE1C;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/components/Employee/OnboardingSummary/OnboardingSummary.js

@@ -8,8 +8,8 @@ import { BaseComponent as L } from "../../Base/Base.js";
 import { useBase as T } from "../../Base/useBase.js";
 import { Flex as r } from "../../Common/Flex/Flex.js";
 import { ActionsLayout as p } from "../../Common/ActionsLayout/ActionsLayout.js";
-import { useComponentContext as B } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { RequirementsList as P } from "../../Common/RequirementsList/RequirementsList.js";
+import { RequirementsList as B } from "../../Common/RequirementsList/RequirementsList.js";
+import { useComponentContext as P } from "../../../contexts/ComponentAdapter/useComponentContext.js";
 import { useI18n as R, useComponentDictionary as w } from "../../../i18n/I18n.js";
 import { EmployeeOnboardingStatus as u, EmployeeSelfOnboardingStatuses as G, componentEvents as f } from "../../../shared/constants.js";
 import { useFlow as F } from "../../Flow/useFlow.js";
@@ -29,7 +29,7 @@ function $(n) {
   return R("Employee.OnboardingSummary"), w("Employee.OnboardingSummary", n.dictionary), /* @__PURE__ */ e(L, { ...n, children: /* @__PURE__ */ e(j, { ...n, children: n.children }) });
 }
 const j = ({ employeeId: n, className: c, isAdmin: d = !1 }) => {
-  const { onEvent: s } = T(), { t } = D("Employee.OnboardingSummary"), i = B(), {
+  const { onEvent: s } = T(), { t } = D("Employee.OnboardingSummary"), i = P(), {
     data: { employee: I }
   } = v({ employeeId: n }), { firstName: g, lastName: h } = I, { data: b } = A({ employeeId: n }), { onboardingStatus: m, onboardingSteps: l } = b.employeeOnboardingStatus, N = l?.length && l.findIndex((o) => o.required && !o.completed) > -1, E = m === u.ONBOARDING_COMPLETED || !N && m === u.SELF_ONBOARDING_PENDING_INVITE, S = m === u.SELF_ONBOARDING_PENDING_INVITE || m !== void 0 && G.has(m), _ = x(() => y.sanitize(g), [g]), O = x(() => y.sanitize(h), [h]);
   return /* @__PURE__ */ e("section", { className: c, children: /* @__PURE__ */ a(r, { flexDirection: "column", gap: 20, children: [
@@ -63,7 +63,7 @@ const j = ({ employeeId: n, className: c, isAdmin: d = !1 }) => {
           }
         ) }),
         children: l && /* @__PURE__ */ e(
-          P,
+          B,
           {
             requirements: l.filter(
               (o) => o.completed !== void 0 && q(o.id)

package/dist/components/Employee/PaymentMethod/management/PaymentMethodBankForm.js

@@ -1,29 +1,35 @@
-import { jsx as t } from "react/jsx-runtime";
-import { useManagementBankFormDictionary as _ } from "./useFormDictionary.js";
-import { componentEvents as E } from "../../../../shared/constants.js";
-import { BankFormBody as a } from "../shared/BankFormBody/BankFormBody.js";
-function T({
-  employeeId: n,
+import { jsxs as M, jsx as n } from "react/jsx-runtime";
+import { useTranslation as s } from "react-i18next";
+import { useManagementBankFormDictionary as p } from "./useFormDictionary.js";
+import { Flex as c } from "../../../Common/Flex/Flex.js";
+import { useComponentContext as _ } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { componentEvents as t } from "../../../../shared/constants.js";
+import { BankFormBody as l } from "../shared/BankFormBody/BankFormBody.js";
+function F({
+  employeeId: e,
   onEvent: o,
-  ...r
+  ...m
 }) {
-  const M = _();
-  return /* @__PURE__ */ t(
-    a,
-    {
-      employeeId: n,
-      dictionary: M,
-      onSaved: (m) => {
-        o(E.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_BANK_FORM_SUBMITTED, m);
-      },
-      onCancel: () => {
-        o(E.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_BANK_FORM_CANCELLED);
-      },
-      ...r
-    }
-  );
+  const r = p(), { t: a } = s("Employee.Management.PaymentMethodBankForm"), i = _();
+  return /* @__PURE__ */ M(c, { flexDirection: "column", gap: 32, children: [
+    /* @__PURE__ */ n(i.Heading, { as: "h1", styledAs: "h2", children: a("title") }),
+    /* @__PURE__ */ n(
+      l,
+      {
+        employeeId: e,
+        dictionary: r,
+        onSaved: (E) => {
+          o(t.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_BANK_FORM_SUBMITTED, E);
+        },
+        onCancel: () => {
+          o(t.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_BANK_FORM_CANCELLED);
+        },
+        ...m
+      }
+    )
+  ] });
 }
 export {
-  T as PaymentMethodBankForm
+  F as PaymentMethodBankForm
 };
 //# sourceMappingURL=PaymentMethodBankForm.js.map

package/dist/components/Employee/PaymentMethod/management/PaymentMethodBankForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentMethodBankForm.js","sources":["../../../../../src/components/Employee/PaymentMethod/management/PaymentMethodBankForm.tsx"],"sourcesContent":["import { BankFormBody } from '../shared/BankFormBody'\nimport type { UseBankFormProps } from '../shared/useBankForm'\nimport { useManagementBankFormDictionary } from './useFormDictionary'\nimport { componentEvents, type EventType } from '@/shared/constants'\nimport type { OnEventType } from '@/components/Base/useBase'\n\n/**\n * Props for {@link PaymentMethodBankForm}.\n *\n * @public\n */\nexport interface PaymentMethodBankFormProps extends Omit<UseBankFormProps, 'employeeId'> {\n  /** The associated employee identifier. */\n  employeeId: string\n  /** Event handler fired on bank-form lifecycle events. */\n  onEvent: OnEventType<EventType, unknown>\n}\n\n/**\n * Standalone bank-account form for the management flow.\n *\n * @remarks\n * Renders the shared bank-account form and emits per-component scoped events\n * when the form is submitted or cancelled. Reads its copy from the dedicated\n * `Employee.Management.PaymentMethodBankForm` namespace so partner overrides on\n * the management bank form don't leak into the onboarding form.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `employee/management/paymentMethod/bankForm/submitted` | Fired after the bank account is successfully created | The created bank account |\n * | `employee/management/paymentMethod/bankForm/cancelled` | Fired when the user cancels the form | — |\n *\n * @param props - See {@link PaymentMethodBankFormProps}.\n * @returns The bank-account form.\n * @public\n */\nexport function PaymentMethodBankForm({\n  employeeId,\n  onEvent,\n  ...hookProps\n}: PaymentMethodBankFormProps) {\n  const dictionary = useManagementBankFormDictionary()\n\n  return (\n    <BankFormBody\n      employeeId={employeeId}\n      dictionary={dictionary}\n      onSaved={data => {\n        onEvent(componentEvents.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_BANK_FORM_SUBMITTED, data)\n      }}\n      onCancel={() => {\n        onEvent(componentEvents.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_BANK_FORM_CANCELLED)\n      }}\n      {...hookProps}\n    />\n  )\n}\n"],"names":["PaymentMethodBankForm","employeeId","onEvent","hookProps","dictionary","useManagementBankFormDictionary","jsx","BankFormBody","data","componentEvents"],"mappings":";;;;AAqCO,SAASA,EAAsB;AAAA,EACpC,YAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,GAA+B;AAC7B,QAAMC,IAAaC,EAAA;AAEnB,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,YAAAN;AAAA,MACA,YAAAG;AAAA,MACA,SAAS,CAAAI,MAAQ;AACf,QAAAN,EAAQO,EAAgB,wDAAwDD,CAAI;AAAA,MACtF;AAAA,MACA,UAAU,MAAM;AACd,QAAAN,EAAQO,EAAgB,sDAAsD;AAAA,MAChF;AAAA,MACC,GAAGN;AAAA,IAAA;AAAA,EAAA;AAGV;"}
+{"version":3,"file":"PaymentMethodBankForm.js","sources":["../../../../../src/components/Employee/PaymentMethod/management/PaymentMethodBankForm.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { BankFormBody } from '../shared/BankFormBody'\nimport type { UseBankFormProps } from '../shared/useBankForm'\nimport { useManagementBankFormDictionary } from './useFormDictionary'\nimport { Flex } from '@/components/Common/Flex'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { componentEvents, type EventType } from '@/shared/constants'\nimport type { OnEventType } from '@/components/Base/useBase'\n\n/**\n * Props for {@link PaymentMethodBankForm}.\n *\n * @public\n */\nexport interface PaymentMethodBankFormProps extends Omit<UseBankFormProps, 'employeeId'> {\n  /** The associated employee identifier. */\n  employeeId: string\n  /** Event handler fired on bank-form lifecycle events. */\n  onEvent: OnEventType<EventType, unknown>\n}\n\n/**\n * Standalone bank-account form for the management flow.\n *\n * @remarks\n * Renders the shared bank-account form and emits per-component scoped events\n * when the form is submitted or cancelled. Reads its copy from the dedicated\n * `Employee.Management.PaymentMethodBankForm` namespace so partner overrides on\n * the management bank form don't leak into the onboarding form.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `employee/management/paymentMethod/bankForm/submitted` | Fired after the bank account is successfully created | The created bank account |\n * | `employee/management/paymentMethod/bankForm/cancelled` | Fired when the user cancels the form | — |\n *\n * @param props - See {@link PaymentMethodBankFormProps}.\n * @returns The bank-account form.\n * @public\n */\nexport function PaymentMethodBankForm({\n  employeeId,\n  onEvent,\n  ...hookProps\n}: PaymentMethodBankFormProps) {\n  const dictionary = useManagementBankFormDictionary()\n  const { t } = useTranslation('Employee.Management.PaymentMethodBankForm')\n  const Components = useComponentContext()\n\n  return (\n    <Flex flexDirection=\"column\" gap={32}>\n      <Components.Heading as=\"h1\" styledAs=\"h2\">\n        {t('title')}\n      </Components.Heading>\n      <BankFormBody\n        employeeId={employeeId}\n        dictionary={dictionary}\n        onSaved={data => {\n          onEvent(componentEvents.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_BANK_FORM_SUBMITTED, data)\n        }}\n        onCancel={() => {\n          onEvent(componentEvents.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_BANK_FORM_CANCELLED)\n        }}\n        {...hookProps}\n      />\n    </Flex>\n  )\n}\n"],"names":["PaymentMethodBankForm","employeeId","onEvent","hookProps","dictionary","useManagementBankFormDictionary","t","useTranslation","Components","useComponentContext","jsxs","Flex","jsx","BankFormBody","data","componentEvents"],"mappings":";;;;;;;AAwCO,SAASA,EAAsB;AAAA,EACpC,YAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,GAA+B;AAC7B,QAAMC,IAAaC,EAAA,GACb,EAAE,GAAAC,EAAA,IAAMC,EAAe,2CAA2C,GAClEC,IAAaC,EAAA;AAEnB,SACE,gBAAAC,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,IAAA,gBAAAC,EAACJ,EAAW,SAAX,EAAmB,IAAG,MAAK,UAAS,MAClC,UAAAF,EAAE,OAAO,EAAA,CACZ;AAAA,IACA,gBAAAM;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,YAAAZ;AAAA,QACA,YAAAG;AAAA,QACA,SAAS,CAAAU,MAAQ;AACf,UAAAZ,EAAQa,EAAgB,wDAAwDD,CAAI;AAAA,QACtF;AAAA,QACA,UAAU,MAAM;AACd,UAAAZ,EAAQa,EAAgB,sDAAsD;AAAA,QAChF;AAAA,QACC,GAAGZ;AAAA,MAAA;AAAA,IAAA;AAAA,EACN,GACF;AAEJ;"}

package/dist/components/Employee/PaymentMethod/onboarding/BankForm.js

@@ -1,25 +1,31 @@
-import { jsx as a } from "react/jsx-runtime";
-import { useOnboardingBankFormDictionary as c } from "./useFormDictionary.js";
+import { jsxs as c, jsx as n } from "react/jsx-runtime";
+import { useTranslation as p } from "react-i18next";
+import { useOnboardingBankFormDictionary as d } from "./useFormDictionary.js";
+import { Flex as l } from "../../../Common/Flex/Flex.js";
+import { useComponentContext as f } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
 import { componentEvents as r } from "../../../../shared/constants.js";
-import { BankFormBody as e } from "../shared/BankFormBody/BankFormBody.js";
-function B({ employeeId: n, onEvent: o, ...m }) {
-  const t = c();
-  return /* @__PURE__ */ a(
-    e,
-    {
-      employeeId: n,
-      dictionary: t,
-      onSaved: (i) => {
-        o(r.EMPLOYEE_BANK_ACCOUNT_CREATED, i);
-      },
-      onCancel: () => {
-        o(r.CANCEL);
-      },
-      ...m
-    }
-  );
+import { BankFormBody as C } from "../shared/BankFormBody/BankFormBody.js";
+function F({ employeeId: t, onEvent: o, ...m }) {
+  const e = d(), { t: i } = p("Employee.PaymentMethod"), a = f();
+  return /* @__PURE__ */ c(l, { flexDirection: "column", gap: 32, children: [
+    /* @__PURE__ */ n(a.Heading, { as: "h1", styledAs: "h2", children: i("addBankAccountFormTitle") }),
+    /* @__PURE__ */ n(
+      C,
+      {
+        employeeId: t,
+        dictionary: e,
+        onSaved: (s) => {
+          o(r.EMPLOYEE_BANK_ACCOUNT_CREATED, s);
+        },
+        onCancel: () => {
+          o(r.CANCEL);
+        },
+        ...m
+      }
+    )
+  ] });
 }
 export {
-  B as BankForm
+  F as BankForm
 };
 //# sourceMappingURL=BankForm.js.map

package/dist/components/Employee/PaymentMethod/onboarding/BankForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"BankForm.js","sources":["../../../../../src/components/Employee/PaymentMethod/onboarding/BankForm.tsx"],"sourcesContent":["import { BankFormBody } from '../shared/BankFormBody'\nimport type { UseBankFormProps } from '../shared/useBankForm'\nimport { useOnboardingBankFormDictionary } from './useFormDictionary'\nimport { componentEvents, type EventType } from '@/shared/constants'\nimport type { OnEventType } from '@/components/Base/useBase'\n\n/** @internal */\nexport interface BankFormProps extends Omit<UseBankFormProps, 'employeeId'> {\n  employeeId: string\n  onEvent: OnEventType<EventType, unknown>\n}\n\n/** @internal */\nexport function BankForm({ employeeId, onEvent, ...hookProps }: BankFormProps) {\n  const dictionary = useOnboardingBankFormDictionary()\n\n  return (\n    <BankFormBody\n      employeeId={employeeId}\n      dictionary={dictionary}\n      onSaved={data => {\n        onEvent(componentEvents.EMPLOYEE_BANK_ACCOUNT_CREATED, data)\n      }}\n      onCancel={() => {\n        onEvent(componentEvents.CANCEL)\n      }}\n      {...hookProps}\n    />\n  )\n}\n"],"names":["BankForm","employeeId","onEvent","hookProps","dictionary","useOnboardingBankFormDictionary","jsx","BankFormBody","data","componentEvents"],"mappings":";;;;AAaO,SAASA,EAAS,EAAE,YAAAC,GAAY,SAAAC,GAAS,GAAGC,KAA4B;AAC7E,QAAMC,IAAaC,EAAA;AAEnB,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,YAAAN;AAAA,MACA,YAAAG;AAAA,MACA,SAAS,CAAAI,MAAQ;AACf,QAAAN,EAAQO,EAAgB,+BAA+BD,CAAI;AAAA,MAC7D;AAAA,MACA,UAAU,MAAM;AACd,QAAAN,EAAQO,EAAgB,MAAM;AAAA,MAChC;AAAA,MACC,GAAGN;AAAA,IAAA;AAAA,EAAA;AAGV;"}
+{"version":3,"file":"BankForm.js","sources":["../../../../../src/components/Employee/PaymentMethod/onboarding/BankForm.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { BankFormBody } from '../shared/BankFormBody'\nimport type { UseBankFormProps } from '../shared/useBankForm'\nimport { useOnboardingBankFormDictionary } from './useFormDictionary'\nimport { Flex } from '@/components/Common/Flex'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { componentEvents, type EventType } from '@/shared/constants'\nimport type { OnEventType } from '@/components/Base/useBase'\n\n/** @internal */\nexport interface BankFormProps extends Omit<UseBankFormProps, 'employeeId'> {\n  employeeId: string\n  onEvent: OnEventType<EventType, unknown>\n}\n\n/** @internal */\nexport function BankForm({ employeeId, onEvent, ...hookProps }: BankFormProps) {\n  const dictionary = useOnboardingBankFormDictionary()\n  const { t } = useTranslation('Employee.PaymentMethod')\n  const Components = useComponentContext()\n\n  return (\n    <Flex flexDirection=\"column\" gap={32}>\n      <Components.Heading as=\"h1\" styledAs=\"h2\">\n        {t('addBankAccountFormTitle')}\n      </Components.Heading>\n      <BankFormBody\n        employeeId={employeeId}\n        dictionary={dictionary}\n        onSaved={data => {\n          onEvent(componentEvents.EMPLOYEE_BANK_ACCOUNT_CREATED, data)\n        }}\n        onCancel={() => {\n          onEvent(componentEvents.CANCEL)\n        }}\n        {...hookProps}\n      />\n    </Flex>\n  )\n}\n"],"names":["BankForm","employeeId","onEvent","hookProps","dictionary","useOnboardingBankFormDictionary","t","useTranslation","Components","useComponentContext","jsxs","Flex","jsx","BankFormBody","data","componentEvents"],"mappings":";;;;;;;AAgBO,SAASA,EAAS,EAAE,YAAAC,GAAY,SAAAC,GAAS,GAAGC,KAA4B;AAC7E,QAAMC,IAAaC,EAAA,GACb,EAAE,GAAAC,EAAA,IAAMC,EAAe,wBAAwB,GAC/CC,IAAaC,EAAA;AAEnB,SACE,gBAAAC,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,IAAA,gBAAAC,EAACJ,EAAW,SAAX,EAAmB,IAAG,MAAK,UAAS,MAClC,UAAAF,EAAE,yBAAyB,EAAA,CAC9B;AAAA,IACA,gBAAAM;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,YAAAZ;AAAA,QACA,YAAAG;AAAA,QACA,SAAS,CAAAU,MAAQ;AACf,UAAAZ,EAAQa,EAAgB,+BAA+BD,CAAI;AAAA,QAC7D;AAAA,QACA,UAAU,MAAM;AACd,UAAAZ,EAAQa,EAAgB,MAAM;AAAA,QAChC;AAAA,QACC,GAAGZ;AAAA,MAAA;AAAA,IAAA;AAAA,EACN,GACF;AAEJ;"}

package/dist/components/Employee/PaymentMethod/onboarding/ListView.js

@@ -1,58 +1,62 @@
-import { jsx as e, jsxs as f, Fragment as M } from "react/jsx-runtime";
-import { useTranslation as O } from "react-i18next";
-import { useWatch as S } from "react-hook-form";
-import { usePaymentMethodList as Y } from "../shared/usePaymentMethodList.js";
-import { usePaymentMethodForm as w } from "../shared/usePaymentMethodForm/usePaymentMethodForm.js";
-import { useDeleteBankAccount as H } from "../shared/useDeleteBankAccount.js";
-import { DeleteBankAccountDialog as F } from "../shared/DeleteBankAccountDialog.js";
-import { ActionsLayout as V } from "../../../Common/ActionsLayout/ActionsLayout.js";
-import { HamburgerMenu as x } from "../../../Common/HamburgerMenu/HamburgerMenu.js";
-import { Form as R } from "../../../Common/Form/Form.js";
-import { BaseLayout as g } from "../../../Base/Base.js";
-import { SDKFormProvider as U } from "../../../../partner-hook-utils/form/SDKFormProvider.js";
-import { composeErrorHandler as v } from "../../../../partner-hook-utils/composeErrorHandler.js";
-import { useComponentContext as K } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { centsToDollars as j } from "../../../../helpers/currencyHelpers.js";
-import I from "../../../../hooks/useNumberFormatter.js";
-import { componentEvents as m, SPLIT_BY as G, PAYMENT_METHODS as A } from "../../../../shared/constants.js";
-import W from "../../../../assets/icons/trashcan.svg.js";
-import { useDataView as q } from "../../../Common/DataView/useDataView.js";
-import { DataView as z } from "../../../Common/DataView/DataView.js";
-function Dt({ employeeId: c, isAdmin: r, onEvent: l }) {
-  const n = Y({ employeeId: c }), u = w({ employeeId: c }), a = v([n, u]);
-  return n.isLoading || u.isLoading ? /* @__PURE__ */ e(g, { isLoading: !0, error: a.errors }) : /* @__PURE__ */ e(
-    J,
+import { jsx as e, jsxs as d, Fragment as H } from "react/jsx-runtime";
+import { useTranslation as v } from "react-i18next";
+import { useWatch as V } from "react-hook-form";
+import { usePaymentMethodList as R } from "../shared/usePaymentMethodList.js";
+import { usePaymentMethodForm as U } from "../shared/usePaymentMethodForm/usePaymentMethodForm.js";
+import { useDeleteBankAccount as K } from "../shared/useDeleteBankAccount.js";
+import { DeleteBankAccountDialog as I } from "../shared/DeleteBankAccountDialog.js";
+import { useOnboardingBankFormDictionary as j } from "./useFormDictionary.js";
+import E from "./ListView.module.scss.js";
+import { Flex as W } from "../../../Common/Flex/Flex.js";
+import { ActionsLayout as b } from "../../../Common/ActionsLayout/ActionsLayout.js";
+import { HamburgerMenu as G } from "../../../Common/HamburgerMenu/HamburgerMenu.js";
+import { BaseLayout as y } from "../../../Base/Base.js";
+import { SDKFormProvider as q } from "../../../../partner-hook-utils/form/SDKFormProvider.js";
+import { composeErrorHandler as z } from "../../../../partner-hook-utils/composeErrorHandler.js";
+import { useComponentContext as J } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { centsToDollars as Q } from "../../../../helpers/currencyHelpers.js";
+import X from "../../../../hooks/useNumberFormatter.js";
+import { componentEvents as l, SPLIT_BY as Z, PAYMENT_METHODS as u } from "../../../../shared/constants.js";
+import $ from "../../../../assets/icons/trashcan.svg.js";
+import { BankFormBody as tt } from "../shared/BankFormBody/BankFormBody.js";
+import { useDataView as et } from "../../../Common/DataView/useDataView.js";
+import { DataView as ot } from "../../../Common/DataView/DataView.js";
+function Pt({ employeeId: m, isAdmin: p, onEvent: i }) {
+  const c = R({ employeeId: m }), n = U({ employeeId: m }), f = z([c, n]);
+  return c.isLoading || n.isLoading ? /* @__PURE__ */ e(y, { isLoading: !0, error: f.errors }) : /* @__PURE__ */ e(
+    nt,
     {
-      employeeId: c,
-      isAdmin: r,
-      onEvent: l,
-      paymentMethodList: n,
-      paymentMethodForm: u,
-      errorHandling: a
+      employeeId: m,
+      isAdmin: p,
+      onEvent: i,
+      paymentMethodList: c,
+      paymentMethodForm: n,
+      errorHandling: f
     }
   );
 }
-function J({
-  isAdmin: c,
-  onEvent: r,
-  paymentMethodList: l,
+function nt({
+  employeeId: m,
+  isAdmin: p,
+  onEvent: i,
+  paymentMethodList: c,
   paymentMethodForm: n,
-  errorHandling: u
+  errorHandling: f
 }) {
-  const { paymentMethod: a, bankAccounts: d } = l.data, { deletePendingBankAccountUuid: h } = l.status, { t } = O("Employee.PaymentMethod"), s = K(), E = I(a.splitBy === "Amount" ? "currency" : "percent"), { Fields: C } = n.form, L = S({
+  const { paymentMethod: h, bankAccounts: s } = c.data, { deletePendingBankAccountUuid: k } = c.status, { t } = v("Employee.PaymentMethod"), a = J(), L = X(h.splitBy === "Amount" ? "currency" : "percent"), B = j(), { Fields: T } = n.form, D = V({
     control: n.form.hookFormInternals.formMethods.control,
     name: "type"
   }), {
-    pendingDeleteAccount: p,
-    setPendingDeleteAccount: D,
-    deletedAccountNumber: b,
-    setDeletedAccountNumber: y,
-    handleConfirmDelete: k
-  } = H(async (o) => {
-    const i = await l.actions.onDelete(o);
-    i && r(m.EMPLOYEE_BANK_ACCOUNT_DELETED, i.data);
-  }), { ...T } = q({
-    data: d,
+    pendingDeleteAccount: A,
+    setPendingDeleteAccount: g,
+    deletedAccountNumber: C,
+    setDeletedAccountNumber: P,
+    handleConfirmDelete: N
+  } = K(async (o) => {
+    const r = await c.actions.onDelete(o);
+    r && i(l.EMPLOYEE_BANK_ACCOUNT_DELETED, r.data);
+  }), { ..._ } = et({
+    data: s,
     columns: [
       { key: "name", title: t("nicknameColumn") },
       { key: "routingNumber", title: t("routingNumberColumn") },
@@ -61,105 +65,135 @@ function J({
         key: "splitAmount",
         title: t("allocationColumn"),
         render: (o) => {
-          const i = a.splits?.find((_) => _.uuid === o.uuid)?.splitAmount ?? 0, N = a.splitBy === G.amount ? j(i) ?? 0 : i;
-          return E(N);
+          const r = h.splits?.find((x) => x.uuid === o.uuid)?.splitAmount ?? 0, Y = h.splitBy === Z.amount ? Q(r) ?? 0 : r;
+          return L(Y);
         }
       }
     ],
     itemMenu: (o) => /* @__PURE__ */ e(
-      x,
+      G,
       {
         items: [
           {
             label: t("deleteBankAccountCta"),
             onClick: () => {
-              D({
+              g({
                 uuid: o.uuid,
                 hiddenAccountNumber: o.hiddenAccountNumber
               });
             },
-            icon: /* @__PURE__ */ e(W, { "aria-hidden": !0 })
+            icon: /* @__PURE__ */ e($, { "aria-hidden": !0 })
           }
         ],
         triggerLabel: t("hamburgerTitle")
       }
     )
-  }), P = (o) => /* @__PURE__ */ e(
-    s.RadioGroup,
+  }), M = (o) => /* @__PURE__ */ e(
+    a.RadioGroup,
     {
       ...o,
-      options: o.options.map((i) => ({
-        ...i,
-        description: i.value === A.directDeposit ? t(c ? "directDepositDescription" : "directDepositDescriptionSelf") : t(c ? "checkDescription" : "checkDescriptionSelf")
+      options: o.options.map((r) => ({
+        ...r,
+        description: r.value === u.directDeposit ? t(p ? "directDepositDescription" : "directDepositDescriptionSelf") : t(p ? "checkDescription" : "checkDescriptionSelf")
       }))
     }
-  ), B = async () => {
+  ), O = async () => {
     const o = await n.actions.onSubmit();
-    o && (r(m.EMPLOYEE_PAYMENT_METHOD_UPDATED, o.data), r(m.EMPLOYEE_PAYMENT_METHOD_DONE));
-  };
-  return /* @__PURE__ */ f(M, { children: [
-    /* @__PURE__ */ e(g, { error: u.errors, children: /* @__PURE__ */ e(U, { formHookResult: n, children: /* @__PURE__ */ f(R, { onSubmit: B, children: [
-      b !== null && /* @__PURE__ */ e(
-        s.Alert,
+    o && (i(l.EMPLOYEE_PAYMENT_METHOD_UPDATED, o.data), i(l.EMPLOYEE_PAYMENT_METHOD_DONE));
+  }, w = D === u.directDeposit && s.length === 0, F = D === u.check || s.length > 0, S = D === u.directDeposit && s.length > 0 ? /* @__PURE__ */ d(b, { children: [
+    s.length > 1 && /* @__PURE__ */ e(
+      a.Button,
+      {
+        variant: "secondary",
+        type: "button",
+        onClick: () => {
+          i(l.EMPLOYEE_SPLIT_PAYMENT);
+        },
+        children: t("splitCta")
+      }
+    ),
+    /* @__PURE__ */ e(
+      a.Button,
+      {
+        variant: "secondary",
+        type: "button",
+        onClick: () => {
+          i(l.EMPLOYEE_BANK_ACCOUNT_CREATE);
+        },
+        children: t("addAnotherCta")
+      }
+    )
+  ] }) : void 0;
+  return /* @__PURE__ */ d(H, { children: [
+    /* @__PURE__ */ e(y, { error: f.errors, children: /* @__PURE__ */ d(q, { formHookResult: n, children: [
+      C !== null && /* @__PURE__ */ e(
+        a.Alert,
         {
           status: "success",
-          label: t("deleteBankAccountSuccessAlert", { account: b }),
+          label: t("deleteBankAccountSuccessAlert", { account: C }),
           onDismiss: () => {
-            y(null);
+            P(null);
           },
           disableScrollIntoView: !0
         }
       ),
-      /* @__PURE__ */ e(s.Heading, { as: "h2", children: t("title") }),
-      /* @__PURE__ */ e(
-        C.Type,
-        {
-          label: t("paymentFieldsetLegend"),
-          getOptionLabel: (o) => o === A.directDeposit ? t("directDepositLabel") : t("checkLabel"),
-          FieldComponent: P
-        }
-      ),
-      d.length > 0 && /* @__PURE__ */ e(z, { label: t("bankAccountsListLabel"), ...T }),
-      /* @__PURE__ */ f(V, { children: [
-        d.length > 1 && /* @__PURE__ */ e(
-          s.Button,
+      /* @__PURE__ */ d(W, { flexDirection: "column", gap: 20, children: [
+        /* @__PURE__ */ d(
+          a.FormBox,
           {
-            variant: "secondary",
-            type: "button",
-            onClick: () => {
-              r(m.EMPLOYEE_SPLIT_PAYMENT);
-            },
-            children: t("splitCta")
+            header: /* @__PURE__ */ e(a.FormBoxHeader, { title: t("title") }),
+            withPadding: !1,
+            footer: S,
+            children: [
+              /* @__PURE__ */ e("div", { className: E.section, children: /* @__PURE__ */ e(
+                T.Type,
+                {
+                  label: t("paymentFieldsetLegend"),
+                  getOptionLabel: (o) => o === u.directDeposit ? t("directDepositLabel") : t("checkLabel"),
+                  FieldComponent: M
+                }
+              ) }),
+              D === u.directDeposit && s.length > 0 && /* @__PURE__ */ e(ot, { isWithinBox: !0, label: t("bankAccountsListLabel"), ..._ }),
+              w && /* @__PURE__ */ e("div", { className: E.section, children: /* @__PURE__ */ e(
+                tt,
+                {
+                  employeeId: m,
+                  dictionary: B,
+                  onSaved: (o) => {
+                    i(l.EMPLOYEE_BANK_ACCOUNT_CREATED, o);
+                  }
+                }
+              ) })
+            ]
           }
         ),
-        L === A.directDeposit && /* @__PURE__ */ e(
-          s.Button,
+        F && /* @__PURE__ */ e(b, { children: /* @__PURE__ */ e(
+          a.Button,
           {
-            variant: "secondary",
             type: "button",
+            isLoading: n.status.isPending,
             onClick: () => {
-              r(m.EMPLOYEE_BANK_ACCOUNT_CREATE);
+              O();
             },
-            children: d.length > 0 ? t("addAnotherCta") : t("addBankAccountCta")
+            children: t("submitCta")
           }
-        ),
-        /* @__PURE__ */ e(s.Button, { type: "submit", isLoading: n.status.isPending, children: t("submitCta") })
+        ) })
       ] })
-    ] }) }) }),
+    ] }) }),
     /* @__PURE__ */ e(
-      F,
+      I,
       {
-        pendingDeleteAccount: p,
-        isPrimaryActionLoading: h === p?.uuid,
+        pendingDeleteAccount: A,
+        isPrimaryActionLoading: k === A?.uuid,
         onClose: () => {
-          D(null);
+          g(null);
         },
         onConfirm: () => {
-          k();
+          N();
         },
         title: t("deleteBankAccountDialog.title"),
         description: t("deleteBankAccountDialog.description", {
-          account: p?.hiddenAccountNumber ?? ""
+          account: A?.hiddenAccountNumber ?? ""
         }),
         confirmLabel: t("deleteBankAccountDialog.confirmCta"),
         cancelLabel: t("deleteBankAccountDialog.cancelCta")
@@ -168,6 +202,6 @@ function J({
   ] });
 }
 export {
-  Dt as ListView
+  Pt as ListView
 };
 //# sourceMappingURL=ListView.js.map