@gusto/embedded-react-sdk 0.53.0 → 0.54.0

package/dist/components/Employee/Deductions/onboarding/Deductions.js

@@ -1,27 +1,36 @@
 import { jsx as n } from "react/jsx-runtime";
-import { createMachine as m } from "robot3";
-import { useMemo as c } from "react";
-import { DeductionsListContextual as s } from "./deductionsContextualComponents.js";
-import { deductionsMachine as u } from "./stateMachine.js";
-import { Flow as p } from "../../../Flow/Flow.js";
-import { BaseBoundaries as f } from "../../../Base/Base.js";
-import { useComponentDictionary as a, useI18n as d } from "../../../../i18n/I18n.js";
-function j({ employeeId: o, dictionary: t, onEvent: e }) {
-  return /* @__PURE__ */ n(f, { componentName: "Employee.Deductions", children: /* @__PURE__ */ n(D, { employeeId: o, dictionary: t, onEvent: e }) });
+import { createMachine as c } from "robot3";
+import { useMemo as s } from "react";
+import { DeductionsListContextual as u } from "./deductionsContextualComponents.js";
+import { deductionsMachine as p } from "./stateMachine.js";
+import { Flow as f } from "../../../Flow/Flow.js";
+import { BaseBoundaries as a } from "../../../Base/Base.js";
+import { useComponentDictionary as d, useI18n as D } from "../../../../i18n/I18n.js";
+function F({ employeeId: t, dictionary: e, onEvent: i, LoaderComponent: o }) {
+  return /* @__PURE__ */ n(a, { componentName: "Employee.Deductions", LoaderComponent: o, children: /* @__PURE__ */ n(
+    l,
+    {
+      employeeId: t,
+      dictionary: e,
+      onEvent: i,
+      LoaderComponent: o
+    }
+  ) });
 }
-function D({ employeeId: o, dictionary: t, onEvent: e }) {
-  a("Employee.Deductions", t), d("Employee.Deductions");
-  const i = c(
-    () => m("list", u, (r) => ({
-      ...r,
-      component: s,
-      employeeId: o
+function l({ employeeId: t, dictionary: e, onEvent: i, LoaderComponent: o }) {
+  d("Employee.Deductions", e), D("Employee.Deductions");
+  const r = s(
+    () => c("list", p, (m) => ({
+      ...m,
+      component: u,
+      employeeId: t,
+      LoaderComponent: o
     })),
-    [o]
+    [t, o]
   );
-  return /* @__PURE__ */ n(p, { machine: i, onEvent: e });
+  return /* @__PURE__ */ n(f, { machine: r, onEvent: i });
 }
 export {
-  j as Deductions
+  F as Deductions
 };
 //# sourceMappingURL=Deductions.js.map

package/dist/components/Employee/Deductions/onboarding/Deductions.js.map

@@ -1 +1 @@
-{"version":3,"file":"Deductions.js","sources":["../../../../../src/components/Employee/Deductions/onboarding/Deductions.tsx"],"sourcesContent":["import { createMachine } from 'robot3'\nimport { useMemo } from 'react'\nimport {\n  DeductionsListContextual,\n  type DeductionsContextInterface,\n} from './deductionsContextualComponents'\nimport { deductionsMachine } from './stateMachine'\nimport { Flow } from '@/components/Flow/Flow'\nimport { BaseBoundaries, type BaseComponentInterface } from '@/components/Base/Base'\nimport { useComponentDictionary, useI18n } from '@/i18n'\n\n/**\n * Props for {@link Deductions}.\n *\n * @public\n */\nexport interface DeductionsProps extends BaseComponentInterface<'Employee.Deductions'> {\n  /** The associated employee identifier. */\n  employeeId: string\n}\n\n/**\n * Onboarding step for collecting an employee's post-tax deductions and court-ordered garnishments.\n *\n * @remarks\n * Renders the employee's current deductions as a list, with an empty state when none exist. Users add or edit deductions inline — post-tax custom deductions or court-ordered garnishments — and can complete the step with or without any active deductions.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `employee/deductions/add` | Fired when the user opens the form to add a new deduction | — |\n * | `employee/deductions/edit` | Fired when the user opens the form to edit an existing deduction | The matching `Garnishment` |\n * | `employee/deductions/created` | Fired after a new deduction is saved | The created `Garnishment` |\n * | `employee/deductions/updated` | Fired after an existing deduction is updated | The updated `Garnishment` |\n * | `employee/deductions/deleted` | Fired after a deduction is deleted and others remain | The deleted `Garnishment` |\n * | `employee/deductions/deletedEmpty` | Fired after the last deduction is deleted, leaving none | — |\n * | `employee/deductions/cancel` | Fired when the user cancels the form while other deductions exist | — |\n * | `employee/deductions/cancelEmpty` | Fired when the user cancels the form and no deductions remain | — |\n * | `employee/deductions/done` | Fired when the step is complete and the parent flow can advance | — |\n *\n * @param props - See {@link DeductionsProps}.\n * @returns The deductions onboarding step.\n * @public\n * @group Block components\n *\n * @example\n * ```tsx\n * import { EmployeeOnboarding } from '@gusto/embedded-react-sdk'\n *\n * function MyComponent() {\n *   return (\n *     <EmployeeOnboarding.Deductions\n *       employeeId=\"4b3f930f-82cd-48a8-b797-798686e12e5e\"\n *       onEvent={() => {}}\n *     />\n *   )\n * }\n * ```\n */\nexport function Deductions({ employeeId, dictionary, onEvent }: DeductionsProps) {\n  return (\n    <BaseBoundaries componentName=\"Employee.Deductions\">\n      <DeductionsRoot employeeId={employeeId} dictionary={dictionary} onEvent={onEvent} />\n    </BaseBoundaries>\n  )\n}\n\nfunction DeductionsRoot({ employeeId, dictionary, onEvent }: DeductionsProps) {\n  useComponentDictionary('Employee.Deductions', dictionary)\n  useI18n('Employee.Deductions')\n\n  const machine = useMemo(\n    () =>\n      createMachine('list', deductionsMachine, (initialContext: DeductionsContextInterface) => ({\n        ...initialContext,\n        component: DeductionsListContextual,\n        employeeId,\n      })),\n    [employeeId],\n  )\n\n  return <Flow machine={machine} onEvent={onEvent} />\n}\n"],"names":["Deductions","employeeId","dictionary","onEvent","jsx","BaseBoundaries","DeductionsRoot","useComponentDictionary","useI18n","machine","useMemo","createMachine","deductionsMachine","initialContext","DeductionsListContextual","Flow"],"mappings":";;;;;;;;AA2DO,SAASA,EAAW,EAAE,YAAAC,GAAY,YAAAC,GAAY,SAAAC,KAA4B;AAC/E,SACE,gBAAAC,EAACC,KAAe,eAAc,uBAC5B,4BAACC,GAAA,EAAe,YAAAL,GAAwB,YAAAC,GAAwB,SAAAC,EAAA,CAAkB,EAAA,CACpF;AAEJ;AAEA,SAASG,EAAe,EAAE,YAAAL,GAAY,YAAAC,GAAY,SAAAC,KAA4B;AAC5E,EAAAI,EAAuB,uBAAuBL,CAAU,GACxDM,EAAQ,qBAAqB;AAE7B,QAAMC,IAAUC;AAAA,IACd,MACEC,EAAc,QAAQC,GAAmB,CAACC,OAAgD;AAAA,MACxF,GAAGA;AAAA,MACH,WAAWC;AAAA,MACX,YAAAb;AAAA,IAAA,EACA;AAAA,IACJ,CAACA,CAAU;AAAA,EAAA;AAGb,SAAO,gBAAAG,EAACW,GAAA,EAAK,SAAAN,GAAkB,SAAAN,EAAA,CAAkB;AACnD;"}
+{"version":3,"file":"Deductions.js","sources":["../../../../../src/components/Employee/Deductions/onboarding/Deductions.tsx"],"sourcesContent":["import { createMachine } from 'robot3'\nimport { useMemo } from 'react'\nimport {\n  DeductionsListContextual,\n  type DeductionsContextInterface,\n} from './deductionsContextualComponents'\nimport { deductionsMachine } from './stateMachine'\nimport { Flow } from '@/components/Flow/Flow'\nimport { BaseBoundaries, type BaseComponentInterface } from '@/components/Base/Base'\nimport { useComponentDictionary, useI18n } from '@/i18n'\n\n/**\n * Props for {@link Deductions}.\n *\n * @public\n */\nexport interface DeductionsProps extends BaseComponentInterface<'Employee.Deductions'> {\n  /** The associated employee identifier. */\n  employeeId: string\n}\n\n/**\n * Onboarding step for collecting an employee's post-tax deductions and court-ordered garnishments.\n *\n * @remarks\n * Renders the employee's current deductions as a list, with an empty state when none exist. Users add or edit deductions inline — post-tax custom deductions or court-ordered garnishments — and can complete the step with or without any active deductions.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `employee/deductions/add` | Fired when the user opens the form to add a new deduction | — |\n * | `employee/deductions/edit` | Fired when the user opens the form to edit an existing deduction | The matching `Garnishment` |\n * | `employee/deductions/created` | Fired after a new deduction is saved | The created `Garnishment` |\n * | `employee/deductions/updated` | Fired after an existing deduction is updated | The updated `Garnishment` |\n * | `employee/deductions/deleted` | Fired after a deduction is deleted and others remain | The deleted `Garnishment` |\n * | `employee/deductions/deletedEmpty` | Fired after the last deduction is deleted, leaving none | — |\n * | `employee/deductions/cancel` | Fired when the user cancels the form while other deductions exist | — |\n * | `employee/deductions/cancelEmpty` | Fired when the user cancels the form and no deductions remain | — |\n * | `employee/deductions/done` | Fired when the step is complete and the parent flow can advance | — |\n *\n * @param props - See {@link DeductionsProps}.\n * @returns The deductions onboarding step.\n * @public\n * @group Block components\n *\n * @example\n * ```tsx\n * import { EmployeeOnboarding } from '@gusto/embedded-react-sdk'\n *\n * function MyComponent() {\n *   return (\n *     <EmployeeOnboarding.Deductions\n *       employeeId=\"4b3f930f-82cd-48a8-b797-798686e12e5e\"\n *       onEvent={() => {}}\n *     />\n *   )\n * }\n * ```\n */\nexport function Deductions({ employeeId, dictionary, onEvent, LoaderComponent }: DeductionsProps) {\n  return (\n    <BaseBoundaries componentName=\"Employee.Deductions\" LoaderComponent={LoaderComponent}>\n      <DeductionsRoot\n        employeeId={employeeId}\n        dictionary={dictionary}\n        onEvent={onEvent}\n        LoaderComponent={LoaderComponent}\n      />\n    </BaseBoundaries>\n  )\n}\n\nfunction DeductionsRoot({ employeeId, dictionary, onEvent, LoaderComponent }: DeductionsProps) {\n  useComponentDictionary('Employee.Deductions', dictionary)\n  useI18n('Employee.Deductions')\n\n  const machine = useMemo(\n    () =>\n      createMachine('list', deductionsMachine, (initialContext: DeductionsContextInterface) => ({\n        ...initialContext,\n        component: DeductionsListContextual,\n        employeeId,\n        LoaderComponent,\n      })),\n    [employeeId, LoaderComponent],\n  )\n\n  return <Flow machine={machine} onEvent={onEvent} />\n}\n"],"names":["Deductions","employeeId","dictionary","onEvent","LoaderComponent","jsx","BaseBoundaries","DeductionsRoot","useComponentDictionary","useI18n","machine","useMemo","createMachine","deductionsMachine","initialContext","DeductionsListContextual","Flow"],"mappings":";;;;;;;;AA2DO,SAASA,EAAW,EAAE,YAAAC,GAAY,YAAAC,GAAY,SAAAC,GAAS,iBAAAC,KAAoC;AAChG,SACE,gBAAAC,EAACC,GAAA,EAAe,eAAc,uBAAsB,iBAAAF,GAClD,UAAA,gBAAAC;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,YAAAN;AAAA,MACA,YAAAC;AAAA,MACA,SAAAC;AAAA,MACA,iBAAAC;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;AAEA,SAASG,EAAe,EAAE,YAAAN,GAAY,YAAAC,GAAY,SAAAC,GAAS,iBAAAC,KAAoC;AAC7F,EAAAI,EAAuB,uBAAuBN,CAAU,GACxDO,EAAQ,qBAAqB;AAE7B,QAAMC,IAAUC;AAAA,IACd,MACEC,EAAc,QAAQC,GAAmB,CAACC,OAAgD;AAAA,MACxF,GAAGA;AAAA,MACH,WAAWC;AAAA,MACX,YAAAd;AAAA,MACA,iBAAAG;AAAA,IAAA,EACA;AAAA,IACJ,CAACH,GAAYG,CAAe;AAAA,EAAA;AAG9B,SAAO,gBAAAC,EAACW,GAAA,EAAK,SAAAN,GAAkB,SAAAP,EAAA,CAAkB;AACnD;"}

package/dist/components/Employee/Deductions/onboarding/deductionsContextualComponents.js

@@ -1,66 +1,67 @@
 import { jsx as i } from "react/jsx-runtime";
-import { useDeductionsList as l } from "../shared/useDeductionsList.js";
+import { useDeductionsList as L } from "../shared/useDeductionsList.js";
 import { DeductionsList as _ } from "./DeductionsList/DeductionsList.js";
-import { useOnboardingDeductionsFormDictionary as C } from "./useFormDictionary.js";
-import { BaseLayout as d } from "../../../Base/Base.js";
-import { useFlow as L } from "../../../Flow/useFlow.js";
-import { componentEvents as o } from "../../../../shared/constants.js";
-import { ensureRequired as m } from "../../../../helpers/ensureRequired.js";
+import { useOnboardingDeductionsFormDictionary as p } from "./useFormDictionary.js";
+import { BaseLayout as D } from "../../../Base/Base.js";
+import { useFlow as C } from "../../../Flow/useFlow.js";
+import { componentEvents as n } from "../../../../shared/constants.js";
+import { ensureRequired as l } from "../../../../helpers/ensureRequired.js";
 import { DeductionsForm as f } from "../shared/DeductionsForm/DeductionsForm.js";
-function U() {
-  const { employeeId: s, onEvent: n } = L(), e = l({ employeeId: m(s) });
-  if (e.isLoading)
-    return /* @__PURE__ */ i(d, { isLoading: !0, error: e.errorHandling.errors });
+function A() {
+  const { employeeId: d, onEvent: e, LoaderComponent: E } = C(), o = L({ employeeId: l(d) });
+  if (o.isLoading)
+    return /* @__PURE__ */ i(D, { isLoading: !0, error: o.errorHandling.errors, LoaderComponent: E });
   const r = () => {
-    n(o.EMPLOYEE_DEDUCTION_ADD);
-  }, D = (t) => {
-    n(o.EMPLOYEE_DEDUCTION_EDIT, t);
-  }, c = () => {
-    n(o.EMPLOYEE_DEDUCTION_DONE);
+    e(n.EMPLOYEE_DEDUCTION_ADD);
+  }, c = (t) => {
+    e(n.EMPLOYEE_DEDUCTION_EDIT, t);
+  }, a = () => {
+    e(n.EMPLOYEE_DEDUCTION_DONE);
   }, u = async (t) => {
-    const E = await e.actions.onDelete(t);
-    E && (E.data.remainingActiveCount === 0 ? n(o.EMPLOYEE_DEDUCTION_DELETED_EMPTY) : n(o.EMPLOYEE_DEDUCTION_DELETED, E.data.garnishment));
+    const s = await o.actions.onDelete(t);
+    s && (s.data.remainingActiveCount === 0 ? e(n.EMPLOYEE_DEDUCTION_DELETED_EMPTY) : e(n.EMPLOYEE_DEDUCTION_DELETED, s.data.garnishment));
   };
-  return /* @__PURE__ */ i(d, { error: e.errorHandling.errors, children: /* @__PURE__ */ i(
+  return /* @__PURE__ */ i(D, { error: o.errorHandling.errors, LoaderComponent: E, children: /* @__PURE__ */ i(
     _,
     {
-      deductionsList: e,
+      deductionsList: o,
       onAdd: r,
-      onEdit: D,
+      onEdit: c,
       onDelete: (t) => {
         u(t);
       },
-      onContinue: c
+      onContinue: a
     }
   ) });
 }
-function A() {
-  const { employeeId: s, editingDeductionId: n, onEvent: e } = L(), r = l({ employeeId: m(s) }), D = C();
+function v() {
+  const { employeeId: d, editingDeductionId: e, onEvent: E, LoaderComponent: o } = C(), r = L({ employeeId: l(d) }), c = p();
   if (r.isLoading)
-    return /* @__PURE__ */ i(d, { isLoading: !0, error: r.errorHandling.errors });
-  const c = n ? r.data.deductions.find((a) => a.uuid === n) ?? null : null, u = r.data.deductions.length > 0, t = (a, O) => {
-    e(
-      O === "create" ? o.EMPLOYEE_DEDUCTION_CREATED : o.EMPLOYEE_DEDUCTION_UPDATED,
-      a
+    return /* @__PURE__ */ i(D, { isLoading: !0, error: r.errorHandling.errors, LoaderComponent: o });
+  const a = e ? r.data.deductions.find((m) => m.uuid === e) ?? null : null, u = r.data.deductions.length > 0, t = (m, O) => {
+    E(
+      O === "create" ? n.EMPLOYEE_DEDUCTION_CREATED : n.EMPLOYEE_DEDUCTION_UPDATED,
+      m
     );
-  }, E = () => {
-    e(
-      u ? o.EMPLOYEE_DEDUCTION_CANCEL : o.EMPLOYEE_DEDUCTION_CANCEL_EMPTY
+  }, s = () => {
+    E(
+      u ? n.EMPLOYEE_DEDUCTION_CANCEL : n.EMPLOYEE_DEDUCTION_CANCEL_EMPTY
     );
   };
-  return /* @__PURE__ */ i(d, { error: r.errorHandling.errors, children: /* @__PURE__ */ i(
+  return /* @__PURE__ */ i(D, { error: r.errorHandling.errors, LoaderComponent: o, children: /* @__PURE__ */ i(
     f,
     {
-      employeeId: m(s),
-      deduction: c,
-      dictionary: D,
+      employeeId: l(d),
+      deduction: a,
+      dictionary: c,
       onSaved: t,
-      onCancel: E
+      onCancel: s,
+      LoaderComponent: o
     }
   ) });
 }
 export {
-  A as DeductionsFormContextual,
-  U as DeductionsListContextual
+  v as DeductionsFormContextual,
+  A as DeductionsListContextual
 };
 //# sourceMappingURL=deductionsContextualComponents.js.map

package/dist/components/Employee/Deductions/onboarding/deductionsContextualComponents.js.map

@@ -1 +1 @@
-{"version":3,"file":"deductionsContextualComponents.js","sources":["../../../../../src/components/Employee/Deductions/onboarding/deductionsContextualComponents.tsx"],"sourcesContent":["import { type Garnishment } from '@gusto/embedded-api/models/components/garnishment'\nimport { useDeductionsList } from '../shared/useDeductionsList'\nimport { DeductionsForm } from '../shared/DeductionsForm'\nimport { DeductionsList } from './DeductionsList/DeductionsList'\nimport { useOnboardingDeductionsFormDictionary } from './useFormDictionary'\nimport { BaseLayout } from '@/components/Base/Base'\nimport { useFlow, type FlowContextInterface } from '@/components/Flow/useFlow'\nimport { componentEvents } from '@/shared/constants'\nimport { ensureRequired } from '@/helpers/ensureRequired'\n\n/** @internal */\nexport type EventPayloads = {\n  [componentEvents.EMPLOYEE_DEDUCTION_ADD]: undefined\n  [componentEvents.EMPLOYEE_DEDUCTION_EDIT]: Garnishment\n  [componentEvents.EMPLOYEE_DEDUCTION_CANCEL]: undefined\n  [componentEvents.EMPLOYEE_DEDUCTION_CANCEL_EMPTY]: undefined\n  [componentEvents.EMPLOYEE_DEDUCTION_CREATED]: Garnishment\n  [componentEvents.EMPLOYEE_DEDUCTION_UPDATED]: Garnishment\n  [componentEvents.EMPLOYEE_DEDUCTION_DELETED]: Garnishment\n  [componentEvents.EMPLOYEE_DEDUCTION_DELETED_EMPTY]: undefined\n  [componentEvents.EMPLOYEE_DEDUCTION_DONE]: undefined\n}\n\n/** @internal */\nexport interface DeductionsContextInterface extends FlowContextInterface {\n  employeeId: string\n  /** Set by the EDIT transition; consumed by the form-mode contextual. */\n  editingDeductionId?: string\n}\n\n/** @internal */\nexport function DeductionsListContextual() {\n  const { employeeId, onEvent } = useFlow<DeductionsContextInterface>()\n  const list = useDeductionsList({ employeeId: ensureRequired(employeeId) })\n\n  if (list.isLoading) {\n    return <BaseLayout isLoading error={list.errorHandling.errors} />\n  }\n\n  const onAdd = () => {\n    onEvent(componentEvents.EMPLOYEE_DEDUCTION_ADD)\n  }\n  const onEdit = (deduction: Garnishment) => {\n    onEvent(componentEvents.EMPLOYEE_DEDUCTION_EDIT, deduction)\n  }\n  const onContinue = () => {\n    onEvent(componentEvents.EMPLOYEE_DEDUCTION_DONE)\n  }\n  const onDelete = async (deduction: Garnishment) => {\n    const result = await list.actions.onDelete(deduction)\n    if (!result) return\n    if (result.data.remainingActiveCount === 0) {\n      onEvent(componentEvents.EMPLOYEE_DEDUCTION_DELETED_EMPTY)\n    } else {\n      onEvent(componentEvents.EMPLOYEE_DEDUCTION_DELETED, result.data.garnishment)\n    }\n  }\n\n  return (\n    <BaseLayout error={list.errorHandling.errors}>\n      <DeductionsList\n        deductionsList={list}\n        onAdd={onAdd}\n        onEdit={onEdit}\n        onDelete={(d: Garnishment) => {\n          void onDelete(d)\n        }}\n        onContinue={onContinue}\n      />\n    </BaseLayout>\n  )\n}\n\n/** @internal */\nexport function DeductionsFormContextual() {\n  const { employeeId, editingDeductionId, onEvent } = useFlow<DeductionsContextInterface>()\n  // The same list query the form hooks use internally — React Query dedupes\n  // so this is the only outstanding request.\n  const list = useDeductionsList({ employeeId: ensureRequired(employeeId) })\n  const formDictionary = useOnboardingDeductionsFormDictionary()\n\n  if (list.isLoading) {\n    return <BaseLayout isLoading error={list.errorHandling.errors} />\n  }\n\n  const deduction = editingDeductionId\n    ? (list.data.deductions.find(d => d.uuid === editingDeductionId) ?? null)\n    : null\n  const hasActiveDeductions = list.data.deductions.length > 0\n\n  const onSaved = (saved: Garnishment, mode: 'create' | 'update') => {\n    onEvent(\n      mode === 'create'\n        ? componentEvents.EMPLOYEE_DEDUCTION_CREATED\n        : componentEvents.EMPLOYEE_DEDUCTION_UPDATED,\n      saved,\n    )\n  }\n  const onCancel = () => {\n    onEvent(\n      hasActiveDeductions\n        ? componentEvents.EMPLOYEE_DEDUCTION_CANCEL\n        : componentEvents.EMPLOYEE_DEDUCTION_CANCEL_EMPTY,\n    )\n  }\n\n  return (\n    <BaseLayout error={list.errorHandling.errors}>\n      <DeductionsForm\n        employeeId={ensureRequired(employeeId)}\n        deduction={deduction}\n        dictionary={formDictionary}\n        onSaved={onSaved}\n        onCancel={onCancel}\n      />\n    </BaseLayout>\n  )\n}\n"],"names":["DeductionsListContextual","employeeId","onEvent","useFlow","list","useDeductionsList","ensureRequired","BaseLayout","onAdd","componentEvents","onEdit","deduction","onContinue","onDelete","result","jsx","DeductionsList","d","DeductionsFormContextual","editingDeductionId","formDictionary","useOnboardingDeductionsFormDictionary","hasActiveDeductions","onSaved","saved","mode","onCancel","DeductionsForm"],"mappings":";;;;;;;;;AA+BO,SAASA,IAA2B;AACzC,QAAM,EAAE,YAAAC,GAAY,SAAAC,EAAA,IAAYC,EAAA,GAC1BC,IAAOC,EAAkB,EAAE,YAAYC,EAAeL,CAAU,GAAG;AAEzE,MAAIG,EAAK;AACP,6BAAQG,GAAA,EAAW,WAAS,IAAC,OAAOH,EAAK,cAAc,QAAQ;AAGjE,QAAMI,IAAQ,MAAM;AAClB,IAAAN,EAAQO,EAAgB,sBAAsB;AAAA,EAChD,GACMC,IAAS,CAACC,MAA2B;AACzC,IAAAT,EAAQO,EAAgB,yBAAyBE,CAAS;AAAA,EAC5D,GACMC,IAAa,MAAM;AACvB,IAAAV,EAAQO,EAAgB,uBAAuB;AAAA,EACjD,GACMI,IAAW,OAAOF,MAA2B;AACjD,UAAMG,IAAS,MAAMV,EAAK,QAAQ,SAASO,CAAS;AACpD,IAAKG,MACDA,EAAO,KAAK,yBAAyB,IACvCZ,EAAQO,EAAgB,gCAAgC,IAExDP,EAAQO,EAAgB,4BAA4BK,EAAO,KAAK,WAAW;AAAA,EAE/E;AAEA,SACE,gBAAAC,EAACR,GAAA,EAAW,OAAOH,EAAK,cAAc,QACpC,UAAA,gBAAAW;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,gBAAgBZ;AAAA,MAChB,OAAAI;AAAA,MACA,QAAAE;AAAA,MACA,UAAU,CAACO,MAAmB;AAC5B,QAAKJ,EAASI,CAAC;AAAA,MACjB;AAAA,MACA,YAAAL;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;AAGO,SAASM,IAA2B;AACzC,QAAM,EAAE,YAAAjB,GAAY,oBAAAkB,GAAoB,SAAAjB,EAAA,IAAYC,EAAA,GAG9CC,IAAOC,EAAkB,EAAE,YAAYC,EAAeL,CAAU,GAAG,GACnEmB,IAAiBC,EAAA;AAEvB,MAAIjB,EAAK;AACP,6BAAQG,GAAA,EAAW,WAAS,IAAC,OAAOH,EAAK,cAAc,QAAQ;AAGjE,QAAMO,IAAYQ,IACbf,EAAK,KAAK,WAAW,KAAK,CAAAa,MAAKA,EAAE,SAASE,CAAkB,KAAK,OAClE,MACEG,IAAsBlB,EAAK,KAAK,WAAW,SAAS,GAEpDmB,IAAU,CAACC,GAAoBC,MAA8B;AACjE,IAAAvB;AAAA,MACEuB,MAAS,WACLhB,EAAgB,6BAChBA,EAAgB;AAAA,MACpBe;AAAA,IAAA;AAAA,EAEJ,GACME,IAAW,MAAM;AACrB,IAAAxB;AAAA,MACEoB,IACIb,EAAgB,4BAChBA,EAAgB;AAAA,IAAA;AAAA,EAExB;AAEA,SACE,gBAAAM,EAACR,GAAA,EAAW,OAAOH,EAAK,cAAc,QACpC,UAAA,gBAAAW;AAAA,IAACY;AAAA,IAAA;AAAA,MACC,YAAYrB,EAAeL,CAAU;AAAA,MACrC,WAAAU;AAAA,MACA,YAAYS;AAAA,MACZ,SAAAG;AAAA,MACA,UAAAG;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;"}
+{"version":3,"file":"deductionsContextualComponents.js","sources":["../../../../../src/components/Employee/Deductions/onboarding/deductionsContextualComponents.tsx"],"sourcesContent":["import { type Garnishment } from '@gusto/embedded-api/models/components/garnishment'\nimport { useDeductionsList } from '../shared/useDeductionsList'\nimport { DeductionsForm } from '../shared/DeductionsForm'\nimport { DeductionsList } from './DeductionsList/DeductionsList'\nimport { useOnboardingDeductionsFormDictionary } from './useFormDictionary'\nimport { BaseLayout } from '@/components/Base/Base'\nimport { useFlow, type FlowContextInterface } from '@/components/Flow/useFlow'\nimport { componentEvents } from '@/shared/constants'\nimport { ensureRequired } from '@/helpers/ensureRequired'\n\n/** @internal */\nexport type EventPayloads = {\n  [componentEvents.EMPLOYEE_DEDUCTION_ADD]: undefined\n  [componentEvents.EMPLOYEE_DEDUCTION_EDIT]: Garnishment\n  [componentEvents.EMPLOYEE_DEDUCTION_CANCEL]: undefined\n  [componentEvents.EMPLOYEE_DEDUCTION_CANCEL_EMPTY]: undefined\n  [componentEvents.EMPLOYEE_DEDUCTION_CREATED]: Garnishment\n  [componentEvents.EMPLOYEE_DEDUCTION_UPDATED]: Garnishment\n  [componentEvents.EMPLOYEE_DEDUCTION_DELETED]: Garnishment\n  [componentEvents.EMPLOYEE_DEDUCTION_DELETED_EMPTY]: undefined\n  [componentEvents.EMPLOYEE_DEDUCTION_DONE]: undefined\n}\n\n/** @internal */\nexport interface DeductionsContextInterface extends FlowContextInterface {\n  employeeId: string\n  /** Set by the EDIT transition; consumed by the form-mode contextual. */\n  editingDeductionId?: string\n}\n\n/** @internal */\nexport function DeductionsListContextual() {\n  const { employeeId, onEvent, LoaderComponent } = useFlow<DeductionsContextInterface>()\n  const list = useDeductionsList({ employeeId: ensureRequired(employeeId) })\n\n  if (list.isLoading) {\n    return (\n      <BaseLayout isLoading error={list.errorHandling.errors} LoaderComponent={LoaderComponent} />\n    )\n  }\n\n  const onAdd = () => {\n    onEvent(componentEvents.EMPLOYEE_DEDUCTION_ADD)\n  }\n  const onEdit = (deduction: Garnishment) => {\n    onEvent(componentEvents.EMPLOYEE_DEDUCTION_EDIT, deduction)\n  }\n  const onContinue = () => {\n    onEvent(componentEvents.EMPLOYEE_DEDUCTION_DONE)\n  }\n  const onDelete = async (deduction: Garnishment) => {\n    const result = await list.actions.onDelete(deduction)\n    if (!result) return\n    if (result.data.remainingActiveCount === 0) {\n      onEvent(componentEvents.EMPLOYEE_DEDUCTION_DELETED_EMPTY)\n    } else {\n      onEvent(componentEvents.EMPLOYEE_DEDUCTION_DELETED, result.data.garnishment)\n    }\n  }\n\n  return (\n    <BaseLayout error={list.errorHandling.errors} LoaderComponent={LoaderComponent}>\n      <DeductionsList\n        deductionsList={list}\n        onAdd={onAdd}\n        onEdit={onEdit}\n        onDelete={(d: Garnishment) => {\n          void onDelete(d)\n        }}\n        onContinue={onContinue}\n      />\n    </BaseLayout>\n  )\n}\n\n/** @internal */\nexport function DeductionsFormContextual() {\n  const { employeeId, editingDeductionId, onEvent, LoaderComponent } =\n    useFlow<DeductionsContextInterface>()\n  // The same list query the form hooks use internally — React Query dedupes\n  // so this is the only outstanding request.\n  const list = useDeductionsList({ employeeId: ensureRequired(employeeId) })\n  const formDictionary = useOnboardingDeductionsFormDictionary()\n\n  if (list.isLoading) {\n    return (\n      <BaseLayout isLoading error={list.errorHandling.errors} LoaderComponent={LoaderComponent} />\n    )\n  }\n\n  const deduction = editingDeductionId\n    ? (list.data.deductions.find(d => d.uuid === editingDeductionId) ?? null)\n    : null\n  const hasActiveDeductions = list.data.deductions.length > 0\n\n  const onSaved = (saved: Garnishment, mode: 'create' | 'update') => {\n    onEvent(\n      mode === 'create'\n        ? componentEvents.EMPLOYEE_DEDUCTION_CREATED\n        : componentEvents.EMPLOYEE_DEDUCTION_UPDATED,\n      saved,\n    )\n  }\n  const onCancel = () => {\n    onEvent(\n      hasActiveDeductions\n        ? componentEvents.EMPLOYEE_DEDUCTION_CANCEL\n        : componentEvents.EMPLOYEE_DEDUCTION_CANCEL_EMPTY,\n    )\n  }\n\n  return (\n    <BaseLayout error={list.errorHandling.errors} LoaderComponent={LoaderComponent}>\n      <DeductionsForm\n        employeeId={ensureRequired(employeeId)}\n        deduction={deduction}\n        dictionary={formDictionary}\n        onSaved={onSaved}\n        onCancel={onCancel}\n        LoaderComponent={LoaderComponent}\n      />\n    </BaseLayout>\n  )\n}\n"],"names":["DeductionsListContextual","employeeId","onEvent","LoaderComponent","useFlow","list","useDeductionsList","ensureRequired","jsx","BaseLayout","onAdd","componentEvents","onEdit","deduction","onContinue","onDelete","result","DeductionsList","d","DeductionsFormContextual","editingDeductionId","formDictionary","useOnboardingDeductionsFormDictionary","hasActiveDeductions","onSaved","saved","mode","onCancel","DeductionsForm"],"mappings":";;;;;;;;;AA+BO,SAASA,IAA2B;AACzC,QAAM,EAAE,YAAAC,GAAY,SAAAC,GAAS,iBAAAC,EAAA,IAAoBC,EAAA,GAC3CC,IAAOC,EAAkB,EAAE,YAAYC,EAAeN,CAAU,GAAG;AAEzE,MAAII,EAAK;AACP,WACE,gBAAAG,EAACC,KAAW,WAAS,IAAC,OAAOJ,EAAK,cAAc,QAAQ,iBAAAF,GAAkC;AAI9F,QAAMO,IAAQ,MAAM;AAClB,IAAAR,EAAQS,EAAgB,sBAAsB;AAAA,EAChD,GACMC,IAAS,CAACC,MAA2B;AACzC,IAAAX,EAAQS,EAAgB,yBAAyBE,CAAS;AAAA,EAC5D,GACMC,IAAa,MAAM;AACvB,IAAAZ,EAAQS,EAAgB,uBAAuB;AAAA,EACjD,GACMI,IAAW,OAAOF,MAA2B;AACjD,UAAMG,IAAS,MAAMX,EAAK,QAAQ,SAASQ,CAAS;AACpD,IAAKG,MACDA,EAAO,KAAK,yBAAyB,IACvCd,EAAQS,EAAgB,gCAAgC,IAExDT,EAAQS,EAAgB,4BAA4BK,EAAO,KAAK,WAAW;AAAA,EAE/E;AAEA,2BACGP,GAAA,EAAW,OAAOJ,EAAK,cAAc,QAAQ,iBAAAF,GAC5C,UAAA,gBAAAK;AAAA,IAACS;AAAA,IAAA;AAAA,MACC,gBAAgBZ;AAAA,MAChB,OAAAK;AAAA,MACA,QAAAE;AAAA,MACA,UAAU,CAACM,MAAmB;AAC5B,QAAKH,EAASG,CAAC;AAAA,MACjB;AAAA,MACA,YAAAJ;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;AAGO,SAASK,IAA2B;AACzC,QAAM,EAAE,YAAAlB,GAAY,oBAAAmB,GAAoB,SAAAlB,GAAS,iBAAAC,EAAA,IAC/CC,EAAA,GAGIC,IAAOC,EAAkB,EAAE,YAAYC,EAAeN,CAAU,GAAG,GACnEoB,IAAiBC,EAAA;AAEvB,MAAIjB,EAAK;AACP,WACE,gBAAAG,EAACC,KAAW,WAAS,IAAC,OAAOJ,EAAK,cAAc,QAAQ,iBAAAF,GAAkC;AAI9F,QAAMU,IAAYO,IACbf,EAAK,KAAK,WAAW,KAAK,CAAAa,MAAKA,EAAE,SAASE,CAAkB,KAAK,OAClE,MACEG,IAAsBlB,EAAK,KAAK,WAAW,SAAS,GAEpDmB,IAAU,CAACC,GAAoBC,MAA8B;AACjE,IAAAxB;AAAA,MACEwB,MAAS,WACLf,EAAgB,6BAChBA,EAAgB;AAAA,MACpBc;AAAA,IAAA;AAAA,EAEJ,GACME,IAAW,MAAM;AACrB,IAAAzB;AAAA,MACEqB,IACIZ,EAAgB,4BAChBA,EAAgB;AAAA,IAAA;AAAA,EAExB;AAEA,2BACGF,GAAA,EAAW,OAAOJ,EAAK,cAAc,QAAQ,iBAAAF,GAC5C,UAAA,gBAAAK;AAAA,IAACoB;AAAA,IAAA;AAAA,MACC,YAAYrB,EAAeN,CAAU;AAAA,MACrC,WAAAY;AAAA,MACA,YAAYQ;AAAA,MACZ,SAAAG;AAAA,MACA,UAAAG;AAAA,MACA,iBAAAxB;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/components/Employee/Deductions/onboarding/stateMachine.d.ts

@@ -1,6 +1,16 @@
-/** @internal */
+/**
+ * `EMPLOYEE_DEDUCTION_DONE` deliberately has no transition out of `list`. `Flow` re-emits every
+ * event to the upstream `onEvent` regardless of whether the local machine has a matching
+ * transition, so the parent flow still advances/unmounts this component on that signal. Modeling
+ * completion as a robot3 final state instead left `component` pointing at a step whose controls
+ * could never fire another transition — if a host doesn't unmount immediately, the screen would
+ * look interactive but be permanently dead (see SDK-1169, the same bug in
+ * `Compensation`'s onboarding machine). Staying in `list` means a host that keeps this component
+ * mounted past completion keeps a fully working deductions list instead.
+ *
+ * @internal
+ */
 export declare const deductionsMachine: {
     list: import('robot3').MachineState<any>;
     form: import('robot3').MachineState<any>;
-    done: import('robot3').MachineState<any>;
 };

package/dist/components/Employee/Deductions/onboarding/stateMachine.js

@@ -1,71 +1,69 @@
-import { state as d, transition as t, reduce as n } from "robot3";
+import { state as d, transition as t, reduce as i } from "robot3";
 import { DeductionsListContextual as E, DeductionsFormContextual as e } from "./deductionsContextualComponents.js";
-import { componentEvents as i } from "../../../../shared/constants.js";
-const _ = {
+import { componentEvents as n } from "../../../../shared/constants.js";
+const r = {
   list: d(
     t(
-      i.EMPLOYEE_DEDUCTION_ADD,
+      n.EMPLOYEE_DEDUCTION_ADD,
       "form",
-      n((o) => ({
+      i((o) => ({
         ...o,
         component: e,
         editingDeductionId: void 0
       }))
     ),
     t(
-      i.EMPLOYEE_DEDUCTION_EDIT,
+      n.EMPLOYEE_DEDUCTION_EDIT,
       "form",
-      n(
+      i(
         (o, D) => ({
           ...o,
           component: e,
           editingDeductionId: D.payload.uuid
         })
       )
-    ),
-    t(i.EMPLOYEE_DEDUCTION_DONE, "done")
+    )
   ),
   form: d(
     t(
-      i.EMPLOYEE_DEDUCTION_CREATED,
+      n.EMPLOYEE_DEDUCTION_CREATED,
       "list",
-      n((o) => ({
+      i((o) => ({
         ...o,
         component: E,
         editingDeductionId: void 0
       }))
     ),
     t(
-      i.EMPLOYEE_DEDUCTION_UPDATED,
+      n.EMPLOYEE_DEDUCTION_UPDATED,
       "list",
-      n((o) => ({
+      i((o) => ({
         ...o,
         component: E,
         editingDeductionId: void 0
       }))
     ),
     t(
-      i.EMPLOYEE_DEDUCTION_CANCEL,
+      n.EMPLOYEE_DEDUCTION_CANCEL,
       "list",
-      n((o) => ({
+      i((o) => ({
         ...o,
         component: E,
         editingDeductionId: void 0
       }))
     ),
     t(
-      i.EMPLOYEE_DEDUCTION_CANCEL_EMPTY,
+      n.EMPLOYEE_DEDUCTION_CANCEL_EMPTY,
       "list",
-      n((o) => ({
+      i((o) => ({
         ...o,
         component: E,
         editingDeductionId: void 0
       }))
     )
-  ),
-  done: d()
+  )
 };
 export {
-  _ as deductionsMachine
+  r as deductionsMachine
 };
 //# sourceMappingURL=stateMachine.js.map

package/dist/components/Employee/Deductions/onboarding/stateMachine.js.map

@@ -1 +1 @@
-{"version":3,"file":"stateMachine.js","sources":["../../../../../src/components/Employee/Deductions/onboarding/stateMachine.ts"],"sourcesContent":["import { state, transition, reduce, state as final } from 'robot3'\nimport type { DeductionsContextInterface, EventPayloads } from './deductionsContextualComponents'\nimport {\n  DeductionsListContextual,\n  DeductionsFormContextual,\n} from './deductionsContextualComponents'\nimport { componentEvents } from '@/shared/constants'\nimport type { MachineEventType, MachineTransition } from '@/types/Helpers'\n\n/** @internal */\nexport const deductionsMachine = {\n  list: state<MachineTransition>(\n    transition(\n      componentEvents.EMPLOYEE_DEDUCTION_ADD,\n      'form',\n      reduce((ctx: DeductionsContextInterface): DeductionsContextInterface => ({\n        ...ctx,\n        component: DeductionsFormContextual,\n        editingDeductionId: undefined,\n      })),\n    ),\n    transition(\n      componentEvents.EMPLOYEE_DEDUCTION_EDIT,\n      'form',\n      reduce(\n        (\n          ctx: DeductionsContextInterface,\n          ev: MachineEventType<EventPayloads, typeof componentEvents.EMPLOYEE_DEDUCTION_EDIT>,\n        ): DeductionsContextInterface => ({\n          ...ctx,\n          component: DeductionsFormContextual,\n          editingDeductionId: ev.payload.uuid,\n        }),\n      ),\n    ),\n    transition(componentEvents.EMPLOYEE_DEDUCTION_DONE, 'done'),\n  ),\n  form: state<MachineTransition>(\n    transition(\n      componentEvents.EMPLOYEE_DEDUCTION_CREATED,\n      'list',\n      reduce((ctx: DeductionsContextInterface): DeductionsContextInterface => ({\n        ...ctx,\n        component: DeductionsListContextual,\n        editingDeductionId: undefined,\n      })),\n    ),\n    transition(\n      componentEvents.EMPLOYEE_DEDUCTION_UPDATED,\n      'list',\n      reduce((ctx: DeductionsContextInterface): DeductionsContextInterface => ({\n        ...ctx,\n        component: DeductionsListContextual,\n        editingDeductionId: undefined,\n      })),\n    ),\n    transition(\n      componentEvents.EMPLOYEE_DEDUCTION_CANCEL,\n      'list',\n      reduce((ctx: DeductionsContextInterface): DeductionsContextInterface => ({\n        ...ctx,\n        component: DeductionsListContextual,\n        editingDeductionId: undefined,\n      })),\n    ),\n    transition(\n      componentEvents.EMPLOYEE_DEDUCTION_CANCEL_EMPTY,\n      'list',\n      reduce((ctx: DeductionsContextInterface): DeductionsContextInterface => ({\n        ...ctx,\n        component: DeductionsListContextual,\n        editingDeductionId: undefined,\n      })),\n    ),\n  ),\n  done: final(),\n}\n"],"names":["deductionsMachine","state","transition","componentEvents","reduce","ctx","DeductionsFormContextual","ev","DeductionsListContextual","final"],"mappings":";;;AAUO,MAAMA,IAAoB;AAAA,EAC/B,MAAMC;AAAA,IACJC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAO,CAACC,OAAiE;AAAA,QACvE,GAAGA;AAAA,QACH,WAAWC;AAAA,QACX,oBAAoB;AAAA,MAAA,EACpB;AAAA,IAAA;AAAA,IAEJJ;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC;AAAA,QACE,CACEC,GACAE,OACgC;AAAA,UAChC,GAAGF;AAAA,UACH,WAAWC;AAAA,UACX,oBAAoBC,EAAG,QAAQ;AAAA,QAAA;AAAA,MACjC;AAAA,IACF;AAAA,IAEFL,EAAWC,EAAgB,yBAAyB,MAAM;AAAA,EAAA;AAAA,EAE5D,MAAMF;AAAA,IACJC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAO,CAACC,OAAiE;AAAA,QACvE,GAAGA;AAAA,QACH,WAAWG;AAAA,QACX,oBAAoB;AAAA,MAAA,EACpB;AAAA,IAAA;AAAA,IAEJN;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAO,CAACC,OAAiE;AAAA,QACvE,GAAGA;AAAA,QACH,WAAWG;AAAA,QACX,oBAAoB;AAAA,MAAA,EACpB;AAAA,IAAA;AAAA,IAEJN;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAO,CAACC,OAAiE;AAAA,QACvE,GAAGA;AAAA,QACH,WAAWG;AAAA,QACX,oBAAoB;AAAA,MAAA,EACpB;AAAA,IAAA;AAAA,IAEJN;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAO,CAACC,OAAiE;AAAA,QACvE,GAAGA;AAAA,QACH,WAAWG;AAAA,QACX,oBAAoB;AAAA,MAAA,EACpB;AAAA,IAAA;AAAA,EACJ;AAAA,EAEF,MAAMC,EAAA;AACR;"}
+{"version":3,"file":"stateMachine.js","sources":["../../../../../src/components/Employee/Deductions/onboarding/stateMachine.ts"],"sourcesContent":["import { state, transition, reduce } from 'robot3'\nimport type { DeductionsContextInterface, EventPayloads } from './deductionsContextualComponents'\nimport {\n  DeductionsListContextual,\n  DeductionsFormContextual,\n} from './deductionsContextualComponents'\nimport { componentEvents } from '@/shared/constants'\nimport type { MachineEventType, MachineTransition } from '@/types/Helpers'\n\n/**\n * `EMPLOYEE_DEDUCTION_DONE` deliberately has no transition out of `list`. `Flow` re-emits every\n * event to the upstream `onEvent` regardless of whether the local machine has a matching\n * transition, so the parent flow still advances/unmounts this component on that signal. Modeling\n * completion as a robot3 final state instead left `component` pointing at a step whose controls\n * could never fire another transition — if a host doesn't unmount immediately, the screen would\n * look interactive but be permanently dead (see SDK-1169, the same bug in\n * `Compensation`'s onboarding machine). Staying in `list` means a host that keeps this component\n * mounted past completion keeps a fully working deductions list instead.\n *\n * @internal\n */\nexport const deductionsMachine = {\n  list: state<MachineTransition>(\n    transition(\n      componentEvents.EMPLOYEE_DEDUCTION_ADD,\n      'form',\n      reduce((ctx: DeductionsContextInterface): DeductionsContextInterface => ({\n        ...ctx,\n        component: DeductionsFormContextual,\n        editingDeductionId: undefined,\n      })),\n    ),\n    transition(\n      componentEvents.EMPLOYEE_DEDUCTION_EDIT,\n      'form',\n      reduce(\n        (\n          ctx: DeductionsContextInterface,\n          ev: MachineEventType<EventPayloads, typeof componentEvents.EMPLOYEE_DEDUCTION_EDIT>,\n        ): DeductionsContextInterface => ({\n          ...ctx,\n          component: DeductionsFormContextual,\n          editingDeductionId: ev.payload.uuid,\n        }),\n      ),\n    ),\n  ),\n  form: state<MachineTransition>(\n    transition(\n      componentEvents.EMPLOYEE_DEDUCTION_CREATED,\n      'list',\n      reduce((ctx: DeductionsContextInterface): DeductionsContextInterface => ({\n        ...ctx,\n        component: DeductionsListContextual,\n        editingDeductionId: undefined,\n      })),\n    ),\n    transition(\n      componentEvents.EMPLOYEE_DEDUCTION_UPDATED,\n      'list',\n      reduce((ctx: DeductionsContextInterface): DeductionsContextInterface => ({\n        ...ctx,\n        component: DeductionsListContextual,\n        editingDeductionId: undefined,\n      })),\n    ),\n    transition(\n      componentEvents.EMPLOYEE_DEDUCTION_CANCEL,\n      'list',\n      reduce((ctx: DeductionsContextInterface): DeductionsContextInterface => ({\n        ...ctx,\n        component: DeductionsListContextual,\n        editingDeductionId: undefined,\n      })),\n    ),\n    transition(\n      componentEvents.EMPLOYEE_DEDUCTION_CANCEL_EMPTY,\n      'list',\n      reduce((ctx: DeductionsContextInterface): DeductionsContextInterface => ({\n        ...ctx,\n        component: DeductionsListContextual,\n        editingDeductionId: undefined,\n      })),\n    ),\n  ),\n}\n"],"names":["deductionsMachine","state","transition","componentEvents","reduce","ctx","DeductionsFormContextual","ev","DeductionsListContextual"],"mappings":";;;AAqBO,MAAMA,IAAoB;AAAA,EAC/B,MAAMC;AAAA,IACJC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAO,CAACC,OAAiE;AAAA,QACvE,GAAGA;AAAA,QACH,WAAWC;AAAA,QACX,oBAAoB;AAAA,MAAA,EACpB;AAAA,IAAA;AAAA,IAEJJ;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC;AAAA,QACE,CACEC,GACAE,OACgC;AAAA,UAChC,GAAGF;AAAA,UACH,WAAWC;AAAA,UACX,oBAAoBC,EAAG,QAAQ;AAAA,QAAA;AAAA,MACjC;AAAA,IACF;AAAA,EACF;AAAA,EAEF,MAAMN;AAAA,IACJC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAO,CAACC,OAAiE;AAAA,QACvE,GAAGA;AAAA,QACH,WAAWG;AAAA,QACX,oBAAoB;AAAA,MAAA,EACpB;AAAA,IAAA;AAAA,IAEJN;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAO,CAACC,OAAiE;AAAA,QACvE,GAAGA;AAAA,QACH,WAAWG;AAAA,QACX,oBAAoB;AAAA,MAAA,EACpB;AAAA,IAAA;AAAA,IAEJN;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAO,CAACC,OAAiE;AAAA,QACvE,GAAGA;AAAA,QACH,WAAWG;AAAA,QACX,oBAAoB;AAAA,MAAA,EACpB;AAAA,IAAA;AAAA,IAEJN;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAO,CAACC,OAAiE;AAAA,QACvE,GAAGA;AAAA,QACH,WAAWG;AAAA,QACX,oBAAoB;AAAA,MAAA,EACpB;AAAA,IAAA;AAAA,EACJ;AAEJ;"}

package/dist/components/Employee/Deductions/onboarding/stateMachine.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Employee/Deductions/shared/DeductionsForm/ChildSupportFormView.d.ts

@@ -1,10 +1,12 @@
 import { Garnishment } from '@gusto/embedded-api/models/components/garnishment';
+import { LoaderComponentType } from '../../../../Base';
 interface ChildSupportFormViewProps {
     employeeId: string;
     deduction: Garnishment | null;
     onSaved: (deduction: Garnishment, mode: 'create' | 'update') => void;
     onCancel: () => void;
+    LoaderComponent?: LoaderComponentType;
 }
 /** @internal */
-export declare function ChildSupportFormView({ employeeId, deduction, onSaved, onCancel, }: ChildSupportFormViewProps): import("react").JSX.Element;
+export declare function ChildSupportFormView({ employeeId, deduction, onSaved, onCancel, LoaderComponent, }: ChildSupportFormViewProps): import("react").JSX.Element;
 export {};

package/dist/components/Employee/Deductions/shared/DeductionsForm/ChildSupportFormView.js

@@ -1,29 +1,30 @@
 import { jsx as r, jsxs as l } from "react/jsx-runtime";
-import { useTranslation as S } from "react-i18next";
-import { useChildSupportGarnishmentForm as b } from "../useChildSupportGarnishmentForm/useChildSupportGarnishmentForm.js";
-import { Form as g } from "../../../../Common/Form/Form.js";
+import { useTranslation as b } from "react-i18next";
+import { useChildSupportGarnishmentForm as g } from "../useChildSupportGarnishmentForm/useChildSupportGarnishmentForm.js";
+import { Form as R } from "../../../../Common/Form/Form.js";
 import { Flex as d } from "../../../../Common/Flex/Flex.js";
-import { ActionsLayout as R } from "../../../../Common/ActionsLayout/ActionsLayout.js";
-import { BaseLayout as h } from "../../../../Base/Base.js";
-import { SDKFormProvider as P } from "../../../../../partner-hook-utils/form/SDKFormProvider.js";
-import { useComponentContext as f } from "../../../../../contexts/ComponentAdapter/useComponentContext.js";
-function O({
+import { ActionsLayout as P } from "../../../../Common/ActionsLayout/ActionsLayout.js";
+import { BaseLayout as y } from "../../../../Base/Base.js";
+import { SDKFormProvider as f } from "../../../../../partner-hook-utils/form/SDKFormProvider.js";
+import { useComponentContext as E } from "../../../../../contexts/ComponentAdapter/useComponentContext.js";
+function F({
   employeeId: n,
   deduction: a,
   onSaved: s,
-  onCancel: p
+  onCancel: p,
+  LoaderComponent: m
 }) {
-  const { t: e } = S("Employee.DeductionsForm"), c = f(), t = b({
+  const { t: e } = b("Employee.DeductionsForm"), c = E(), t = g({
     employeeId: n,
     garnishmentId: a?.uuid
   });
   if (t.isLoading)
-    return /* @__PURE__ */ r(h, { isLoading: !0, error: t.errorHandling.errors });
-  const { Fields: i } = t.form, m = t.status.selectedAgency !== null, y = async () => {
+    return /* @__PURE__ */ r(y, { isLoading: !0, error: t.errorHandling.errors, LoaderComponent: m });
+  const { Fields: i } = t.form, h = t.status.selectedAgency !== null, S = async () => {
     const o = await t.actions.onSubmit();
     o && s(o.data, o.mode);
   };
-  return /* @__PURE__ */ r(h, { error: t.errorHandling.errors, children: /* @__PURE__ */ r(P, { formHookResult: t, children: /* @__PURE__ */ r(g, { onSubmit: y, children: /* @__PURE__ */ l(d, { flexDirection: "column", gap: 32, children: [
+  return /* @__PURE__ */ r(y, { error: t.errorHandling.errors, LoaderComponent: m, children: /* @__PURE__ */ r(f, { formHookResult: t, children: /* @__PURE__ */ r(R, { onSubmit: S, children: /* @__PURE__ */ l(d, { flexDirection: "column", gap: 32, children: [
     /* @__PURE__ */ r(c.Heading, { as: "h3", children: e("types.childSupport") }),
     /* @__PURE__ */ l(d, { flexDirection: "column", gap: 20, children: [
       /* @__PURE__ */ r(
@@ -43,7 +44,7 @@ function O({
           label: e("childSupport.manualPaymentRequired")
         }
       ),
-      m && /* @__PURE__ */ l(d, { flexDirection: "column", gap: 20, children: [
+      h && /* @__PURE__ */ l(d, { flexDirection: "column", gap: 20, children: [
         i.FipsCode && /* @__PURE__ */ r(
           i.FipsCode,
           {
@@ -113,22 +114,22 @@ function O({
             label: e("childSupport.paymentPeriodLabel"),
             placeholder: e("childSupport.paymentPeriodPlaceholder"),
             description: e("childSupport.paymentPeriodDescription"),
-            getOptionLabel: (o) => E(e, o),
+            getOptionLabel: (o) => D(e, o),
             validationMessages: { REQUIRED: e("childSupport.paymentPeriodRequired") }
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ l(R, { children: [
+    /* @__PURE__ */ l(P, { children: [
       /* @__PURE__ */ r(c.Button, { variant: "secondary", type: "button", onClick: p, children: e("actions.cancel") }),
-      m && /* @__PURE__ */ r(c.Button, { type: "submit", isLoading: t.status.isPending, children: e("actions.save") })
+      h && /* @__PURE__ */ r(c.Button, { type: "submit", isLoading: t.status.isPending, children: e("actions.save") })
     ] })
   ] }) }) }) });
 }
 function u(n, a) {
   return n?.requiredAttributes?.find((p) => p.key === a)?.label ?? a;
 }
-function E(n, a) {
+function D(n, a) {
   switch (a) {
     case "Every week":
       return n("childSupport.paymentPeriod.everyWeek");
@@ -141,6 +142,6 @@ function E(n, a) {
   }
 }
 export {
-  O as ChildSupportFormView
+  F as ChildSupportFormView
 };
 //# sourceMappingURL=ChildSupportFormView.js.map

package/dist/components/Employee/Deductions/shared/DeductionsForm/ChildSupportFormView.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChildSupportFormView.js","sources":["../../../../../../src/components/Employee/Deductions/shared/DeductionsForm/ChildSupportFormView.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { Garnishment } from '@gusto/embedded-api/models/components/garnishment'\nimport type { PaymentPeriod } from '@gusto/embedded-api/models/components/garnishmentchildsupport'\nimport { useChildSupportGarnishmentForm } from '../useChildSupportGarnishmentForm'\nimport type { StateFieldEntry, CountyEntry } from '../useChildSupportGarnishmentForm'\nimport { Form } from '@/components/Common/Form'\nimport { ActionsLayout } from '@/components/Common'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { BaseLayout } from '@/components/Base/Base'\nimport { SDKFormProvider } from '@/partner-hook-utils/form/SDKFormProvider'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\ninterface ChildSupportFormViewProps {\n  employeeId: string\n  deduction: Garnishment | null\n  onSaved: (deduction: Garnishment, mode: 'create' | 'update') => void\n  onCancel: () => void\n}\n\n/** @internal */\nexport function ChildSupportFormView({\n  employeeId,\n  deduction,\n  onSaved,\n  onCancel,\n}: ChildSupportFormViewProps) {\n  const { t } = useTranslation('Employee.DeductionsForm')\n  const Components = useComponentContext()\n\n  const form = useChildSupportGarnishmentForm({\n    employeeId,\n    garnishmentId: deduction?.uuid,\n  })\n\n  if (form.isLoading) {\n    return <BaseLayout isLoading error={form.errorHandling.errors} />\n  }\n\n  const { Fields } = form.form\n  const hasSelection = form.status.selectedAgency !== null\n\n  const handleSubmit = async () => {\n    const result = await form.actions.onSubmit()\n    if (result) onSaved(result.data, result.mode)\n  }\n\n  return (\n    <BaseLayout error={form.errorHandling.errors}>\n      <SDKFormProvider formHookResult={form}>\n        <Form onSubmit={handleSubmit}>\n          <Flex flexDirection=\"column\" gap={32}>\n            <Components.Heading as=\"h3\">{t('types.childSupport')}</Components.Heading>\n\n            <Flex flexDirection=\"column\" gap={20}>\n              <Fields.State\n                label={t('childSupport.agencyLabel')}\n                placeholder={t('childSupport.agencyPlaceholder')}\n                description={t('childSupport.agencyDescription')}\n                getOptionLabel={(entry: StateFieldEntry) => entry.name}\n                validationMessages={{ REQUIRED: t('childSupport.agencyRequired') }}\n              />\n\n              {form.status.isManualPaymentRequired && (\n                <Components.Alert\n                  status=\"warning\"\n                  label={t('childSupport.manualPaymentRequired')}\n                />\n              )}\n\n              {hasSelection && (\n                <Flex flexDirection=\"column\" gap={20}>\n                  {Fields.FipsCode && (\n                    <Fields.FipsCode\n                      label={t('childSupport.countyLabel')}\n                      placeholder={t('childSupport.countyPlaceholder')}\n                      description={t('childSupport.countyDescription')}\n                      getOptionLabel={(entry: CountyEntry) =>\n                        entry.county ?? t('childSupport.allCounties')\n                      }\n                      validationMessages={{ REQUIRED: t('childSupport.countyRequired') }}\n                    />\n                  )}\n                  {Fields.CaseNumber && (\n                    <Fields.CaseNumber\n                      label={requiredAttrLabel(form.status.selectedAgency, 'case_number')}\n                      description={t('childSupport.caseNumberDescription')}\n                      validationMessages={{ REQUIRED: t('childSupport.caseNumberRequired') }}\n                    />\n                  )}\n                  {Fields.OrderNumber && (\n                    <Fields.OrderNumber\n                      label={requiredAttrLabel(form.status.selectedAgency, 'order_number')}\n                      description={t('childSupport.orderNumberDescription')}\n                      validationMessages={{ REQUIRED: t('childSupport.orderNumberRequired') }}\n                    />\n                  )}\n                  {Fields.RemittanceNumber && (\n                    <Fields.RemittanceNumber\n                      label={requiredAttrLabel(form.status.selectedAgency, 'remittance_number')}\n                      description={t('childSupport.remittanceNumberDescription')}\n                      validationMessages={{\n                        REQUIRED: t('childSupport.remittanceNumberRequired'),\n                      }}\n                    />\n                  )}\n                  <Fields.PayPeriodMaximum\n                    label={t('childSupport.totalAmountWithheld')}\n                    description={t('childSupport.totalAmountWithheldDescription')}\n                    format=\"currency\"\n                    min={0}\n                    validationMessages={{\n                      REQUIRED: t('childSupport.payPeriodMaximumRequired'),\n                      NEGATIVE_AMOUNT: t('childSupport.amountNonNegative'),\n                    }}\n                  />\n                  <Fields.Amount\n                    label={t('childSupport.maxPaycheckPercentage')}\n                    description={t('childSupport.maxPaycheckPercentageDescription')}\n                    format=\"percent\"\n                    min={0}\n                    max={100}\n                    validationMessages={{\n                      REQUIRED: t('childSupport.amountRequired'),\n                      PERCENT_OUT_OF_RANGE: t('childSupport.percentOutOfRange'),\n                    }}\n                  />\n                  <Fields.PaymentPeriod\n                    label={t('childSupport.paymentPeriodLabel')}\n                    placeholder={t('childSupport.paymentPeriodPlaceholder')}\n                    description={t('childSupport.paymentPeriodDescription')}\n                    getOptionLabel={(value: PaymentPeriod) => paymentPeriodLabel(t, value)}\n                    validationMessages={{ REQUIRED: t('childSupport.paymentPeriodRequired') }}\n                  />\n                </Flex>\n              )}\n            </Flex>\n            <ActionsLayout>\n              <Components.Button variant=\"secondary\" type=\"button\" onClick={onCancel}>\n                {t('actions.cancel')}\n              </Components.Button>\n              {hasSelection && (\n                <Components.Button type=\"submit\" isLoading={form.status.isPending}>\n                  {t('actions.save')}\n                </Components.Button>\n              )}\n            </ActionsLayout>\n          </Flex>\n        </Form>\n      </SDKFormProvider>\n    </BaseLayout>\n  )\n}\n\nfunction requiredAttrLabel(\n  selectedAgency: { requiredAttributes?: Array<{ key?: string; label?: string }> } | null,\n  key: 'case_number' | 'order_number' | 'remittance_number',\n): string {\n  const match = selectedAgency?.requiredAttributes?.find(a => a.key === key)\n  return match?.label ?? key\n}\n\nfunction paymentPeriodLabel(\n  t: ReturnType<typeof useTranslation<'Employee.DeductionsForm'>>['t'],\n  value: PaymentPeriod,\n): string {\n  switch (value) {\n    case 'Every week':\n      return t('childSupport.paymentPeriod.everyWeek')\n    case 'Every other week':\n      return t('childSupport.paymentPeriod.everyOtherWeek')\n    case 'Twice per month':\n      return t('childSupport.paymentPeriod.twicePerMonth')\n    case 'Monthly':\n      return t('childSupport.paymentPeriod.monthly')\n  }\n}\n"],"names":["ChildSupportFormView","employeeId","deduction","onSaved","onCancel","t","useTranslation","Components","useComponentContext","form","useChildSupportGarnishmentForm","BaseLayout","Fields","hasSelection","handleSubmit","result","SDKFormProvider","jsx","Form","jsxs","Flex","entry","requiredAttrLabel","value","paymentPeriodLabel","ActionsLayout","selectedAgency","key","a"],"mappings":"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"}
+{"version":3,"file":"ChildSupportFormView.js","sources":["../../../../../../src/components/Employee/Deductions/shared/DeductionsForm/ChildSupportFormView.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { Garnishment } from '@gusto/embedded-api/models/components/garnishment'\nimport type { PaymentPeriod } from '@gusto/embedded-api/models/components/garnishmentchildsupport'\nimport { useChildSupportGarnishmentForm } from '../useChildSupportGarnishmentForm'\nimport type { StateFieldEntry, CountyEntry } from '../useChildSupportGarnishmentForm'\nimport { Form } from '@/components/Common/Form'\nimport { ActionsLayout } from '@/components/Common'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { BaseLayout } from '@/components/Base/Base'\nimport { SDKFormProvider } from '@/partner-hook-utils/form/SDKFormProvider'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport type { LoaderComponentType } from '@/components/Base'\n\ninterface ChildSupportFormViewProps {\n  employeeId: string\n  deduction: Garnishment | null\n  onSaved: (deduction: Garnishment, mode: 'create' | 'update') => void\n  onCancel: () => void\n  LoaderComponent?: LoaderComponentType\n}\n\n/** @internal */\nexport function ChildSupportFormView({\n  employeeId,\n  deduction,\n  onSaved,\n  onCancel,\n  LoaderComponent,\n}: ChildSupportFormViewProps) {\n  const { t } = useTranslation('Employee.DeductionsForm')\n  const Components = useComponentContext()\n\n  const form = useChildSupportGarnishmentForm({\n    employeeId,\n    garnishmentId: deduction?.uuid,\n  })\n\n  if (form.isLoading) {\n    return (\n      <BaseLayout isLoading error={form.errorHandling.errors} LoaderComponent={LoaderComponent} />\n    )\n  }\n\n  const { Fields } = form.form\n  const hasSelection = form.status.selectedAgency !== null\n\n  const handleSubmit = async () => {\n    const result = await form.actions.onSubmit()\n    if (result) onSaved(result.data, result.mode)\n  }\n\n  return (\n    <BaseLayout error={form.errorHandling.errors} LoaderComponent={LoaderComponent}>\n      <SDKFormProvider formHookResult={form}>\n        <Form onSubmit={handleSubmit}>\n          <Flex flexDirection=\"column\" gap={32}>\n            <Components.Heading as=\"h3\">{t('types.childSupport')}</Components.Heading>\n\n            <Flex flexDirection=\"column\" gap={20}>\n              <Fields.State\n                label={t('childSupport.agencyLabel')}\n                placeholder={t('childSupport.agencyPlaceholder')}\n                description={t('childSupport.agencyDescription')}\n                getOptionLabel={(entry: StateFieldEntry) => entry.name}\n                validationMessages={{ REQUIRED: t('childSupport.agencyRequired') }}\n              />\n\n              {form.status.isManualPaymentRequired && (\n                <Components.Alert\n                  status=\"warning\"\n                  label={t('childSupport.manualPaymentRequired')}\n                />\n              )}\n\n              {hasSelection && (\n                <Flex flexDirection=\"column\" gap={20}>\n                  {Fields.FipsCode && (\n                    <Fields.FipsCode\n                      label={t('childSupport.countyLabel')}\n                      placeholder={t('childSupport.countyPlaceholder')}\n                      description={t('childSupport.countyDescription')}\n                      getOptionLabel={(entry: CountyEntry) =>\n                        entry.county ?? t('childSupport.allCounties')\n                      }\n                      validationMessages={{ REQUIRED: t('childSupport.countyRequired') }}\n                    />\n                  )}\n                  {Fields.CaseNumber && (\n                    <Fields.CaseNumber\n                      label={requiredAttrLabel(form.status.selectedAgency, 'case_number')}\n                      description={t('childSupport.caseNumberDescription')}\n                      validationMessages={{ REQUIRED: t('childSupport.caseNumberRequired') }}\n                    />\n                  )}\n                  {Fields.OrderNumber && (\n                    <Fields.OrderNumber\n                      label={requiredAttrLabel(form.status.selectedAgency, 'order_number')}\n                      description={t('childSupport.orderNumberDescription')}\n                      validationMessages={{ REQUIRED: t('childSupport.orderNumberRequired') }}\n                    />\n                  )}\n                  {Fields.RemittanceNumber && (\n                    <Fields.RemittanceNumber\n                      label={requiredAttrLabel(form.status.selectedAgency, 'remittance_number')}\n                      description={t('childSupport.remittanceNumberDescription')}\n                      validationMessages={{\n                        REQUIRED: t('childSupport.remittanceNumberRequired'),\n                      }}\n                    />\n                  )}\n                  <Fields.PayPeriodMaximum\n                    label={t('childSupport.totalAmountWithheld')}\n                    description={t('childSupport.totalAmountWithheldDescription')}\n                    format=\"currency\"\n                    min={0}\n                    validationMessages={{\n                      REQUIRED: t('childSupport.payPeriodMaximumRequired'),\n                      NEGATIVE_AMOUNT: t('childSupport.amountNonNegative'),\n                    }}\n                  />\n                  <Fields.Amount\n                    label={t('childSupport.maxPaycheckPercentage')}\n                    description={t('childSupport.maxPaycheckPercentageDescription')}\n                    format=\"percent\"\n                    min={0}\n                    max={100}\n                    validationMessages={{\n                      REQUIRED: t('childSupport.amountRequired'),\n                      PERCENT_OUT_OF_RANGE: t('childSupport.percentOutOfRange'),\n                    }}\n                  />\n                  <Fields.PaymentPeriod\n                    label={t('childSupport.paymentPeriodLabel')}\n                    placeholder={t('childSupport.paymentPeriodPlaceholder')}\n                    description={t('childSupport.paymentPeriodDescription')}\n                    getOptionLabel={(value: PaymentPeriod) => paymentPeriodLabel(t, value)}\n                    validationMessages={{ REQUIRED: t('childSupport.paymentPeriodRequired') }}\n                  />\n                </Flex>\n              )}\n            </Flex>\n            <ActionsLayout>\n              <Components.Button variant=\"secondary\" type=\"button\" onClick={onCancel}>\n                {t('actions.cancel')}\n              </Components.Button>\n              {hasSelection && (\n                <Components.Button type=\"submit\" isLoading={form.status.isPending}>\n                  {t('actions.save')}\n                </Components.Button>\n              )}\n            </ActionsLayout>\n          </Flex>\n        </Form>\n      </SDKFormProvider>\n    </BaseLayout>\n  )\n}\n\nfunction requiredAttrLabel(\n  selectedAgency: { requiredAttributes?: Array<{ key?: string; label?: string }> } | null,\n  key: 'case_number' | 'order_number' | 'remittance_number',\n): string {\n  const match = selectedAgency?.requiredAttributes?.find(a => a.key === key)\n  return match?.label ?? key\n}\n\nfunction paymentPeriodLabel(\n  t: ReturnType<typeof useTranslation<'Employee.DeductionsForm'>>['t'],\n  value: PaymentPeriod,\n): string {\n  switch (value) {\n    case 'Every week':\n      return t('childSupport.paymentPeriod.everyWeek')\n    case 'Every other week':\n      return t('childSupport.paymentPeriod.everyOtherWeek')\n    case 'Twice per month':\n      return t('childSupport.paymentPeriod.twicePerMonth')\n    case 'Monthly':\n      return t('childSupport.paymentPeriod.monthly')\n  }\n}\n"],"names":["ChildSupportFormView","employeeId","deduction","onSaved","onCancel","LoaderComponent","t","useTranslation","Components","useComponentContext","form","useChildSupportGarnishmentForm","jsx","BaseLayout","Fields","hasSelection","handleSubmit","result","SDKFormProvider","Form","jsxs","Flex","entry","requiredAttrLabel","value","paymentPeriodLabel","ActionsLayout","selectedAgency","key","a"],"mappings":"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"}

package/dist/components/Employee/Deductions/shared/DeductionsForm/DeductionsForm.d.ts

@@ -1,5 +1,6 @@
 import { Garnishment } from '@gusto/embedded-api/models/components/garnishment';
 import { ResourceDictionary } from '../../../../../types/Helpers';
+import { LoaderComponentType } from '../../../../Base';
 /** @internal */
 export type DeductionsFormDictionary = ResourceDictionary<'Employee.DeductionsForm'>;
 /** @internal */
@@ -21,6 +22,8 @@ export interface DeductionsFormProps {
     onSaved: (deduction: Garnishment, mode: 'create' | 'update') => void;
     /** Called when the user cancels the form. */
     onCancel: () => void;
+    /** Custom loading indicator rendered while this component's async data is fetching. Overrides the indicator configured on `GustoProvider` for this instance only. */
+    LoaderComponent?: LoaderComponentType;
 }
 /** @internal */
-export declare function DeductionsForm({ className, employeeId, deduction, dictionary, onSaved, onCancel, }: DeductionsFormProps): import("react").JSX.Element;
+export declare function DeductionsForm({ className, employeeId, deduction, dictionary, onSaved, onCancel, LoaderComponent, }: DeductionsFormProps): import("react").JSX.Element;