@gusto/embedded-react-sdk 0.54.0 → 0.54.1-rc.1

package/dist/components/Employee/OnboardingFlow/OnboardingFlow.js.map

@@ -1 +1 @@
-{"version":3,"file":"OnboardingFlow.js","sources":["../../../../src/components/Employee/OnboardingFlow/OnboardingFlow.tsx"],"sourcesContent":["import { createMachine } from 'robot3'\nimport { useMemo } from 'react'\nimport { employeeOnboardingMachine } from './onboardingStateMachine'\nimport {\n  type OnboardingDefaultValues,\n  type OnboardingContextInterface,\n  EmployeeListContextual,\n} from './OnboardingFlowComponents'\nimport { Flow } from '@/components/Flow/Flow'\nimport type { BaseComponentInterface } from '@/components/Base'\nimport type { RequireAtLeastOne } from '@/types/Helpers'\n\n/**\n * Props for {@link OnboardingFlow}.\n *\n * @public\n */\nexport interface OnboardingFlowProps extends BaseComponentInterface<never> {\n  /** The associated company identifier. */\n  companyId: string\n  /** Default values for individual flow step components. */\n  defaultValues?: RequireAtLeastOne<OnboardingDefaultValues>\n  /**\n   * When true, presents the self-onboarding toggle allowing the admin to opt\n   * the employee into self-onboarding. When false, the option to self-onboard\n   * is not available. Defaults to `true`.\n   */\n  isSelfOnboardingEnabled?: boolean\n  /**\n   * When true, enables the Employee Documents step in the onboarding flow,\n   * allowing the admin to configure I-9 document requirements. Defaults to\n   * `false`.\n   */\n  withEmployeeI9?: boolean\n  /**\n   * Controls visibility of the Continue button in the employee list.\n   *\n   * When `true`, shows a Continue button allowing navigation to the next step.\n   * Use this when the employee onboarding flow is embedded as a step within\n   * a larger flow (e.g., company onboarding).\n   *\n   * When `false` (default), hides the Continue button. Use this for standalone\n   * employee onboarding where the list is the terminal screen.\n   *\n   * @defaultValue `false`\n   */\n  showContinueButton?: boolean\n}\n\n/**\n * Guided flow to onboard multiple employees, one at a time.\n *\n * @remarks\n * Renders a multi-step experience that collects every piece of information\n * required to add an employee to payroll. Begins on the employee list and\n * transitions into the onboarding execution flow when \"Add employee\" or a\n * row's \"Edit\"/\"Review\" action is invoked; returning from the execution flow\n * surfaces the list again. The flow is driven by an internal state machine\n * and wraps each step in error and suspense boundaries.\n *\n * The per-employee steps live in {@link OnboardingExecutionFlow}, which is also\n * exported as a standalone block — along with each individual step — for\n * composing a custom workflow when this orchestration is the wrong fit. See the\n * {@link https://sdk.gusto.com/docs/guides/integration-guide/composition | Composition guide}\n * for how to recompose these blocks into your own flow.\n *\n * The flow forwards every event emitted by its blocks to `onEvent`;\n * see the events table on each block for the full set of events and\n * payloads observable from this flow.\n *\n * @components\n * - {@link EmployeeList}\n * - {@link OnboardingExecutionFlow}\n *\n * @param props - See {@link OnboardingFlowProps}.\n * @returns The multi-step onboarding flow with internal navigation between the employee list and the per-step screens.\n * @public\n * @group Flow components\n *\n * @example\n * ```tsx title=\"App.tsx\"\n * import { EmployeeOnboarding, type EventType } from '@gusto/embedded-react-sdk'\n *\n * function MyApp() {\n *   return (\n *     <EmployeeOnboarding.OnboardingFlow\n *       companyId=\"a007e1ab-3595-43c2-ab4b-af7a5af2e365\"\n *       withEmployeeI9\n *       onEvent={(eventType: EventType) => {\n *         if (eventType === 'employee/onboarding/done') {\n *           // Onboarding complete — navigate to your next screen\n *         }\n *       }}\n *     />\n *   )\n * }\n * ```\n */\nexport const OnboardingFlow = ({\n  companyId,\n  onEvent,\n  defaultValues,\n  isSelfOnboardingEnabled = true,\n  withEmployeeI9 = false,\n  showContinueButton = false,\n}: OnboardingFlowProps) => {\n  const manageEmployees = useMemo(\n    () =>\n      createMachine(\n        'index',\n        employeeOnboardingMachine,\n        (initialContext: OnboardingContextInterface) => ({\n          ...initialContext,\n          component: EmployeeListContextual,\n          companyId,\n          isAdmin: true,\n          defaultValues,\n          isSelfOnboardingEnabled,\n          withEmployeeI9,\n          showContinueButton,\n        }),\n      ),\n    [companyId, defaultValues, isSelfOnboardingEnabled, withEmployeeI9, showContinueButton],\n  )\n  return <Flow machine={manageEmployees} onEvent={onEvent} />\n}\n"],"names":["OnboardingFlow","companyId","onEvent","defaultValues","isSelfOnboardingEnabled","withEmployeeI9","showContinueButton","manageEmployees","useMemo","createMachine","employeeOnboardingMachine","initialContext","EmployeeListContextual","jsx","Flow"],"mappings":";;;;;;AAkGO,MAAMA,IAAiB,CAAC;AAAA,EAC7B,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,eAAAC;AAAA,EACA,yBAAAC,IAA0B;AAAA,EAC1B,gBAAAC,IAAiB;AAAA,EACjB,oBAAAC,IAAqB;AACvB,MAA2B;AACzB,QAAMC,IAAkBC;AAAA,IACtB,MACEC;AAAA,MACE;AAAA,MACAC;AAAA,MACA,CAACC,OAAgD;AAAA,QAC/C,GAAGA;AAAA,QACH,WAAWC;AAAA,QACX,WAAAX;AAAA,QACA,SAAS;AAAA,QACT,eAAAE;AAAA,QACA,yBAAAC;AAAA,QACA,gBAAAC;AAAA,QACA,oBAAAC;AAAA,MAAA;AAAA,IACF;AAAA,IAEJ,CAACL,GAAWE,GAAeC,GAAyBC,GAAgBC,CAAkB;AAAA,EAAA;AAExF,SAAO,gBAAAO,EAACC,GAAA,EAAK,SAASP,GAAiB,SAAAL,EAAA,CAAkB;AAC3D;"}
+{"version":3,"file":"OnboardingFlow.js","sources":["../../../../src/components/Employee/OnboardingFlow/OnboardingFlow.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { employeeOnboardingMachine } from './onboardingStateMachine'\nimport {\n  type OnboardingDefaultValues,\n  type OnboardingContextInterface,\n  EmployeeListContextual,\n} from './OnboardingFlowComponents'\nimport { createMachine } from '@/lib/state-machine'\nimport { Flow } from '@/components/Flow/Flow'\nimport type { BaseComponentInterface } from '@/components/Base'\nimport type { RequireAtLeastOne } from '@/types/Helpers'\n\n/**\n * Props for {@link OnboardingFlow}.\n *\n * @public\n */\nexport interface OnboardingFlowProps extends BaseComponentInterface<never> {\n  /** The associated company identifier. */\n  companyId: string\n  /** Default values for individual flow step components. */\n  defaultValues?: RequireAtLeastOne<OnboardingDefaultValues>\n  /**\n   * When true, presents the self-onboarding toggle allowing the admin to opt\n   * the employee into self-onboarding. When false, the option to self-onboard\n   * is not available. Defaults to `true`.\n   */\n  isSelfOnboardingEnabled?: boolean\n  /**\n   * When true, enables the Employee Documents step in the onboarding flow,\n   * allowing the admin to configure I-9 document requirements. Defaults to\n   * `false`.\n   */\n  withEmployeeI9?: boolean\n  /**\n   * Controls visibility of the Continue button in the employee list.\n   *\n   * When `true`, shows a Continue button allowing navigation to the next step.\n   * Use this when the employee onboarding flow is embedded as a step within\n   * a larger flow (e.g., company onboarding).\n   *\n   * When `false` (default), hides the Continue button. Use this for standalone\n   * employee onboarding where the list is the terminal screen.\n   *\n   * @defaultValue `false`\n   */\n  showContinueButton?: boolean\n}\n\n/**\n * Guided flow to onboard multiple employees, one at a time.\n *\n * @remarks\n * Renders a multi-step experience that collects every piece of information\n * required to add an employee to payroll. Begins on the employee list and\n * transitions into the onboarding execution flow when \"Add employee\" or a\n * row's \"Edit\"/\"Review\" action is invoked; returning from the execution flow\n * surfaces the list again. The flow is driven by an internal state machine\n * and wraps each step in error and suspense boundaries.\n *\n * The per-employee steps live in {@link OnboardingExecutionFlow}, which is also\n * exported as a standalone block — along with each individual step — for\n * composing a custom workflow when this orchestration is the wrong fit. See the\n * {@link https://sdk.gusto.com/docs/guides/integration-guide/composition | Composition guide}\n * for how to recompose these blocks into your own flow.\n *\n * The flow forwards every event emitted by its blocks to `onEvent`;\n * see the events table on each block for the full set of events and\n * payloads observable from this flow.\n *\n * @components\n * - {@link EmployeeList}\n * - {@link OnboardingExecutionFlow}\n *\n * @param props - See {@link OnboardingFlowProps}.\n * @returns The multi-step onboarding flow with internal navigation between the employee list and the per-step screens.\n * @public\n * @group Flow components\n *\n * @example\n * ```tsx title=\"App.tsx\"\n * import { EmployeeOnboarding, type EventType } from '@gusto/embedded-react-sdk'\n *\n * function MyApp() {\n *   return (\n *     <EmployeeOnboarding.OnboardingFlow\n *       companyId=\"a007e1ab-3595-43c2-ab4b-af7a5af2e365\"\n *       withEmployeeI9\n *       onEvent={(eventType: EventType) => {\n *         if (eventType === 'employee/onboarding/done') {\n *           // Onboarding complete — navigate to your next screen\n *         }\n *       }}\n *     />\n *   )\n * }\n * ```\n */\nexport const OnboardingFlow = ({\n  companyId,\n  onEvent,\n  defaultValues,\n  isSelfOnboardingEnabled = true,\n  withEmployeeI9 = false,\n  showContinueButton = false,\n}: OnboardingFlowProps) => {\n  const manageEmployees = useMemo(\n    () =>\n      createMachine(\n        'index',\n        employeeOnboardingMachine,\n        (initialContext: OnboardingContextInterface) => ({\n          ...initialContext,\n          component: EmployeeListContextual,\n          companyId,\n          isAdmin: true,\n          defaultValues,\n          isSelfOnboardingEnabled,\n          withEmployeeI9,\n          showContinueButton,\n        }),\n      ),\n    [companyId, defaultValues, isSelfOnboardingEnabled, withEmployeeI9, showContinueButton],\n  )\n  return <Flow machine={manageEmployees} onEvent={onEvent} />\n}\n"],"names":["OnboardingFlow","companyId","onEvent","defaultValues","isSelfOnboardingEnabled","withEmployeeI9","showContinueButton","manageEmployees","useMemo","createMachine","employeeOnboardingMachine","initialContext","EmployeeListContextual","jsx","Flow"],"mappings":";;;;;;AAkGO,MAAMA,IAAiB,CAAC;AAAA,EAC7B,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,eAAAC;AAAA,EACA,yBAAAC,IAA0B;AAAA,EAC1B,gBAAAC,IAAiB;AAAA,EACjB,oBAAAC,IAAqB;AACvB,MAA2B;AACzB,QAAMC,IAAkBC;AAAA,IACtB,MACEC;AAAA,MACE;AAAA,MACAC;AAAA,MACA,CAACC,OAAgD;AAAA,QAC/C,GAAGA;AAAA,QACH,WAAWC;AAAA,QACX,WAAAX;AAAA,QACA,SAAS;AAAA,QACT,eAAAE;AAAA,QACA,yBAAAC;AAAA,QACA,gBAAAC;AAAA,QACA,oBAAAC;AAAA,MAAA;AAAA,IACF;AAAA,IAEJ,CAACL,GAAWE,GAAeC,GAAyBC,GAAgBC,CAAkB;AAAA,EAAA;AAExF,SAAO,gBAAAO,EAACC,GAAA,EAAK,SAASP,GAAiB,SAAAL,EAAA,CAAkB;AAC3D;"}

package/dist/components/Employee/OnboardingFlow/onboardingStateMachine.d.ts

@@ -1,6 +1,6 @@
 /** @internal */
 export declare const employeeOnboardingMachine: {
-    index: import('robot3').MachineState<any>;
-    executing: import('robot3').MachineState<any>;
-    final: import('robot3').MachineState<any>;
+    index: import('../../../lib/state-machine').StateDefinition;
+    executing: import('../../../lib/state-machine').StateDefinition;
+    final: import('../../../lib/state-machine').StateDefinition;
 };

package/dist/components/Employee/OnboardingFlow/onboardingStateMachine.js

@@ -1,12 +1,13 @@
-import { state as t, transition as e, reduce as i } from "robot3";
 import { OnboardingExecutionFlowContextual as a, EmployeeListContextual as m } from "./OnboardingFlowComponents.js";
+import "react";
+import { state as t, transition as e, reduce as i } from "../../../lib/state-machine/core.js";
 import { componentEvents as n } from "../../../shared/constants.js";
 const d = i((o) => ({
   ...o,
   component: m,
   employeeId: void 0,
   onboardingStatus: void 0
-})), c = {
+})), u = {
   index: t(
     e(
       n.EMPLOYEE_CREATE,
@@ -38,6 +39,6 @@ const d = i((o) => ({
   final: t()
 };
 export {
-  c as employeeOnboardingMachine
+  u as employeeOnboardingMachine
 };
 //# sourceMappingURL=onboardingStateMachine.js.map

package/dist/components/Employee/OnboardingFlow/onboardingStateMachine.js.map

@@ -1 +1 @@
-{"version":3,"file":"onboardingStateMachine.js","sources":["../../../../src/components/Employee/OnboardingFlow/onboardingStateMachine.ts"],"sourcesContent":["import { transition, reduce, state } from 'robot3'\nimport {\n  EmployeeListContextual,\n  OnboardingExecutionFlowContextual,\n  type OnboardingContextInterface,\n} from './OnboardingFlowComponents'\nimport { componentEvents, type EmployeeOnboardingStatus } from '@/shared/constants'\nimport type { MachineEventType, MachineTransition } from '@/types/Helpers'\n\ntype EventPayloads = {\n  [componentEvents.EMPLOYEE_UPDATE]: {\n    employeeId: string\n    onboardingStatus: (typeof EmployeeOnboardingStatus)[keyof typeof EmployeeOnboardingStatus]\n  }\n}\n\nconst returnToIndex = reduce((ctx: OnboardingContextInterface): OnboardingContextInterface => ({\n  ...ctx,\n  component: EmployeeListContextual,\n  employeeId: undefined,\n  onboardingStatus: undefined,\n}))\n\n/** @internal */\nexport const employeeOnboardingMachine = {\n  index: state<MachineTransition>(\n    transition(\n      componentEvents.EMPLOYEE_CREATE,\n      'executing',\n      reduce((ctx: OnboardingContextInterface): OnboardingContextInterface => ({\n        ...ctx,\n        component: OnboardingExecutionFlowContextual,\n        employeeId: undefined,\n      })),\n    ),\n    transition(\n      componentEvents.EMPLOYEE_UPDATE,\n      'executing',\n      reduce(\n        (\n          ctx: OnboardingContextInterface,\n          ev: MachineEventType<EventPayloads, typeof componentEvents.EMPLOYEE_UPDATE>,\n        ): OnboardingContextInterface => ({\n          ...ctx,\n          component: OnboardingExecutionFlowContextual,\n          employeeId: ev.payload.employeeId,\n          onboardingStatus: ev.payload.onboardingStatus,\n        }),\n      ),\n    ),\n    transition(componentEvents.EMPLOYEE_ONBOARDING_DONE, 'final'),\n  ),\n  executing: state<MachineTransition>(\n    transition(componentEvents.EMPLOYEES_LIST, 'index', returnToIndex),\n    transition(componentEvents.CANCEL, 'index', returnToIndex),\n  ),\n  final: state<MachineTransition>(),\n}\n"],"names":["returnToIndex","reduce","ctx","EmployeeListContextual","employeeOnboardingMachine","state","transition","componentEvents","OnboardingExecutionFlowContextual","ev"],"mappings":";;;AAgBA,MAAMA,IAAgBC,EAAO,CAACC,OAAiE;AAAA,EAC7F,GAAGA;AAAA,EACH,WAAWC;AAAA,EACX,YAAY;AAAA,EACZ,kBAAkB;AACpB,EAAE,GAGWC,IAA4B;AAAA,EACvC,OAAOC;AAAA,IACLC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAN,EAAO,CAACC,OAAiE;AAAA,QACvE,GAAGA;AAAA,QACH,WAAWM;AAAA,QACX,YAAY;AAAA,MAAA,EACZ;AAAA,IAAA;AAAA,IAEJF;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAN;AAAA,QACE,CACEC,GACAO,OACgC;AAAA,UAChC,GAAGP;AAAA,UACH,WAAWM;AAAA,UACX,YAAYC,EAAG,QAAQ;AAAA,UACvB,kBAAkBA,EAAG,QAAQ;AAAA,QAAA;AAAA,MAC/B;AAAA,IACF;AAAA,IAEFH,EAAWC,EAAgB,0BAA0B,OAAO;AAAA,EAAA;AAAA,EAE9D,WAAWF;AAAA,IACTC,EAAWC,EAAgB,gBAAgB,SAASP,CAAa;AAAA,IACjEM,EAAWC,EAAgB,QAAQ,SAASP,CAAa;AAAA,EAAA;AAAA,EAE3D,OAAOK,EAAA;AACT;"}
+{"version":3,"file":"onboardingStateMachine.js","sources":["../../../../src/components/Employee/OnboardingFlow/onboardingStateMachine.ts"],"sourcesContent":["import {\n  EmployeeListContextual,\n  OnboardingExecutionFlowContextual,\n  type OnboardingContextInterface,\n} from './OnboardingFlowComponents'\nimport { transition, reduce, state } from '@/lib/state-machine'\nimport { componentEvents, type EmployeeOnboardingStatus } from '@/shared/constants'\nimport type { MachineEventType, MachineTransition } from '@/types/Helpers'\n\ntype EventPayloads = {\n  [componentEvents.EMPLOYEE_UPDATE]: {\n    employeeId: string\n    onboardingStatus: (typeof EmployeeOnboardingStatus)[keyof typeof EmployeeOnboardingStatus]\n  }\n}\n\nconst returnToIndex = reduce((ctx: OnboardingContextInterface): OnboardingContextInterface => ({\n  ...ctx,\n  component: EmployeeListContextual,\n  employeeId: undefined,\n  onboardingStatus: undefined,\n}))\n\n/** @internal */\nexport const employeeOnboardingMachine = {\n  index: state<MachineTransition>(\n    transition(\n      componentEvents.EMPLOYEE_CREATE,\n      'executing',\n      reduce((ctx: OnboardingContextInterface): OnboardingContextInterface => ({\n        ...ctx,\n        component: OnboardingExecutionFlowContextual,\n        employeeId: undefined,\n      })),\n    ),\n    transition(\n      componentEvents.EMPLOYEE_UPDATE,\n      'executing',\n      reduce(\n        (\n          ctx: OnboardingContextInterface,\n          ev: MachineEventType<EventPayloads, typeof componentEvents.EMPLOYEE_UPDATE>,\n        ): OnboardingContextInterface => ({\n          ...ctx,\n          component: OnboardingExecutionFlowContextual,\n          employeeId: ev.payload.employeeId,\n          onboardingStatus: ev.payload.onboardingStatus,\n        }),\n      ),\n    ),\n    transition(componentEvents.EMPLOYEE_ONBOARDING_DONE, 'final'),\n  ),\n  executing: state<MachineTransition>(\n    transition(componentEvents.EMPLOYEES_LIST, 'index', returnToIndex),\n    transition(componentEvents.CANCEL, 'index', returnToIndex),\n  ),\n  final: state<MachineTransition>(),\n}\n"],"names":["returnToIndex","reduce","ctx","EmployeeListContextual","employeeOnboardingMachine","state","transition","componentEvents","OnboardingExecutionFlowContextual","ev"],"mappings":";;;;AAgBA,MAAMA,IAAgBC,EAAO,CAACC,OAAiE;AAAA,EAC7F,GAAGA;AAAA,EACH,WAAWC;AAAA,EACX,YAAY;AAAA,EACZ,kBAAkB;AACpB,EAAE,GAGWC,IAA4B;AAAA,EACvC,OAAOC;AAAA,IACLC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAN,EAAO,CAACC,OAAiE;AAAA,QACvE,GAAGA;AAAA,QACH,WAAWM;AAAA,QACX,YAAY;AAAA,MAAA,EACZ;AAAA,IAAA;AAAA,IAEJF;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAN;AAAA,QACE,CACEC,GACAO,OACgC;AAAA,UAChC,GAAGP;AAAA,UACH,WAAWM;AAAA,UACX,YAAYC,EAAG,QAAQ;AAAA,UACvB,kBAAkBA,EAAG,QAAQ;AAAA,QAAA;AAAA,MAC/B;AAAA,IACF;AAAA,IAEFH,EAAWC,EAAgB,0BAA0B,OAAO;AAAA,EAAA;AAAA,EAE9D,WAAWF;AAAA,IACTC,EAAWC,EAAgB,gBAAgB,SAASP,CAAa;AAAA,IACjEM,EAAWC,EAAgB,QAAQ,SAASP,CAAa;AAAA,EAAA;AAAA,EAE3D,OAAOK,EAAA;AACT;"}

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

@@ -1,19 +1,19 @@
-import { jsx as e, jsxs as a, Fragment as C } from "react/jsx-runtime";
-import { useTranslation as D } from "react-i18next";
-import { useEmployeesGetSuspense as v } from "@gusto/embedded-api/react-query/employeesGet";
-import { useEmployeesGetOnboardingStatusSuspense as A } from "@gusto/embedded-api/react-query/employeesGetOnboardingStatus";
-import y from "dompurify";
-import { useMemo as x } from "react";
-import { BaseComponent as L } from "../../Base/Base.js";
-import { useBase as T } from "../../Base/useBase.js";
+import { jsx as e, jsxs as a, Fragment as v } from "react/jsx-runtime";
+import { useTranslation as I } from "react-i18next";
+import { useEmployeesGetSuspense as A } from "@gusto/embedded-api/react-query/employeesGet";
+import { useEmployeesGetOnboardingStatusSuspense as L } from "@gusto/embedded-api/react-query/employeesGetOnboardingStatus";
+import x from "dompurify";
+import { useMemo as D } from "react";
+import { BaseComponent as T } from "../../Base/Base.js";
+import { useBase as B } from "../../Base/useBase.js";
 import { Flex as r } from "../../Common/Flex/Flex.js";
-import { ActionsLayout as p } from "../../Common/ActionsLayout/ActionsLayout.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";
-const M = [
+import { ActionsLayout as u } from "../../Common/ActionsLayout/ActionsLayout.js";
+import { RequirementsList as P } from "../../Common/RequirementsList/RequirementsList.js";
+import { useComponentContext as R } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useI18n as w, useComponentDictionary as G } from "../../../i18n/I18n.js";
+import { EmployeeOnboardingStatus as f, EmployeeSelfOnboardingStatuses as F, componentEvents as g } from "../../../shared/constants.js";
+import { useFlow as M } from "../../Flow/useFlow.js";
+const q = [
   "personal_details",
   "compensation_details",
   "add_work_address",
@@ -24,98 +24,99 @@ const M = [
   "employee_form_signing",
   "file_new_hire_report",
   "admin_review"
-], q = (n) => n !== void 0 && M.includes(n);
-function $(n) {
-  return R("Employee.OnboardingSummary"), w("Employee.OnboardingSummary", n.dictionary), /* @__PURE__ */ e(L, { ...n, children: /* @__PURE__ */ e(j, { ...n, children: n.children }) });
+], $ = (t) => t !== void 0 && q.includes(t);
+function j(t) {
+  return /* @__PURE__ */ e(T, { ...t, children: /* @__PURE__ */ e(k, { ...t, children: t.children }) });
 }
-const j = ({ employeeId: n, className: c, isAdmin: d = !1 }) => {
-  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: [
-    /* @__PURE__ */ e(r, { alignItems: "center", flexDirection: "column", gap: 8, children: d ? E ? /* @__PURE__ */ a(r, { flexDirection: "column", gap: 4, alignItems: "center", children: [
-      /* @__PURE__ */ e(i.Heading, { as: "h2", textAlign: "center", children: t("onboardedAdminSubtitle", {
-        name: `${_} ${O}`,
+const k = ({ employeeId: t, className: l, isAdmin: m = !1, dictionary: c }) => {
+  w("Employee.OnboardingSummary"), G("Employee.OnboardingSummary", c);
+  const { onEvent: p } = B(), { t: n } = I("Employee.OnboardingSummary"), i = R(), {
+    data: { employee: b }
+  } = A({ employeeId: t }), { firstName: h, lastName: E } = b, { data: N } = L({ employeeId: t }), { onboardingStatus: s, onboardingSteps: d } = N.employeeOnboardingStatus, C = d?.length && d.findIndex((o) => o.required && !o.completed) > -1, S = s === f.ONBOARDING_COMPLETED || !C && s === f.SELF_ONBOARDING_PENDING_INVITE, _ = s === f.SELF_ONBOARDING_PENDING_INVITE || s !== void 0 && F.has(s), O = D(() => x.sanitize(h), [h]), y = D(() => x.sanitize(E), [E]);
+  return /* @__PURE__ */ e("section", { className: l, children: /* @__PURE__ */ a(r, { flexDirection: "column", gap: 20, children: [
+    /* @__PURE__ */ e(r, { alignItems: "center", flexDirection: "column", gap: 8, children: m ? S ? /* @__PURE__ */ a(r, { flexDirection: "column", gap: 4, alignItems: "center", children: [
+      /* @__PURE__ */ e(i.Heading, { as: "h2", textAlign: "center", children: n("onboardedAdminSubtitle", {
+        name: `${O} ${y}`,
         interpolation: { escapeValue: !1 }
       }) }),
-      /* @__PURE__ */ e(i.Text, { variant: "supporting", children: t("onboardedAdminDescription") })
-    ] }) : S ? /* @__PURE__ */ a(r, { flexDirection: "column", gap: 4, alignItems: "center", children: [
-      /* @__PURE__ */ e(i.Heading, { as: "h2", textAlign: "center", children: t("handedOffAdminSubtitle", {
-        name: `${_} ${O}`,
+      /* @__PURE__ */ e(i.Text, { variant: "supporting", children: n("onboardedAdminDescription") })
+    ] }) : _ ? /* @__PURE__ */ a(r, { flexDirection: "column", gap: 4, alignItems: "center", children: [
+      /* @__PURE__ */ e(i.Heading, { as: "h2", textAlign: "center", children: n("handedOffAdminSubtitle", {
+        name: `${O} ${y}`,
         interpolation: { escapeValue: !1 }
       }) }),
-      /* @__PURE__ */ e(i.Text, { variant: "supporting", children: t("handedOffAdminDescription") })
+      /* @__PURE__ */ e(i.Text, { variant: "supporting", children: n("handedOffAdminDescription") })
     ] }) : /* @__PURE__ */ e(
       i.Box,
       {
         header: /* @__PURE__ */ a(r, { flexDirection: "column", gap: 4, children: [
-          /* @__PURE__ */ e(i.Heading, { as: "h2", children: t("missingRequirementsSubtitle") }),
-          /* @__PURE__ */ e(i.Text, { variant: "supporting", children: t("missingRequirementsDescription") })
+          /* @__PURE__ */ e(i.Heading, { as: "h2", children: n("missingRequirementsSubtitle") }),
+          /* @__PURE__ */ e(i.Text, { variant: "supporting", children: n("missingRequirementsDescription") })
         ] }),
-        footer: /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(
+        footer: /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(
           i.Button,
           {
             variant: "secondary",
             onClick: () => {
-              s(f.EMPLOYEES_LIST);
+              p(g.EMPLOYEES_LIST);
             },
-            children: t("doneCta")
+            children: n("doneCta")
           }
         ) }),
-        children: l && /* @__PURE__ */ e(
-          B,
+        children: d && /* @__PURE__ */ e(
+          P,
           {
-            requirements: l.filter(
-              (o) => o.completed !== void 0 && q(o.id)
+            requirements: d.filter(
+              (o) => o.completed !== void 0 && $(o.id)
             ).map((o) => ({
               completed: o.completed,
-              title: t(`steps.${o.id}`),
-              description: t(`stepsDescriptions.${o.id}`)
+              title: n(`steps.${o.id}`),
+              description: n(`stepsDescriptions.${o.id}`)
             }))
           }
         )
       }
-    ) : /* @__PURE__ */ e(C, { children: /* @__PURE__ */ a(r, { flexDirection: "column", gap: 20, alignItems: "center", children: [
+    ) : /* @__PURE__ */ e(v, { children: /* @__PURE__ */ a(r, { flexDirection: "column", gap: 20, alignItems: "center", children: [
       /* @__PURE__ */ a(r, { flexDirection: "column", gap: 4, alignItems: "center", children: [
-        /* @__PURE__ */ e(i.Heading, { as: "h2", textAlign: "center", children: t("onboardedSelfSubtitle") }),
-        /* @__PURE__ */ e(i.Text, { variant: "supporting", children: t("onboardedSelfDescription") })
+        /* @__PURE__ */ e(i.Heading, { as: "h2", textAlign: "center", children: n("onboardedSelfSubtitle") }),
+        /* @__PURE__ */ e(i.Text, { variant: "supporting", children: n("onboardedSelfDescription") })
       ] }),
-      /* @__PURE__ */ e(p, { justifyContent: "center", children: /* @__PURE__ */ e(
+      /* @__PURE__ */ e(u, { justifyContent: "center", children: /* @__PURE__ */ e(
         i.Button,
         {
           variant: "secondary",
           onClick: () => {
-            s(f.EMPLOYEE_ONBOARDING_DONE);
+            p(g.EMPLOYEE_ONBOARDING_DONE);
           },
-          children: t("doneCta")
+          children: n("doneCta")
         }
       ) })
     ] }) }) }),
-    d && (E || S) && /* @__PURE__ */ e(p, { justifyContent: "center", children: /* @__PURE__ */ e(
+    m && (S || _) && /* @__PURE__ */ e(u, { justifyContent: "center", children: /* @__PURE__ */ e(
       i.Button,
       {
         variant: "secondary",
         onClick: () => {
-          s(f.EMPLOYEES_LIST);
+          p(g.EMPLOYEES_LIST);
         },
-        children: t("doneCta")
+        children: n("doneCta")
       }
     ) })
   ] }) });
-}, ie = () => {
-  const { employeeId: n, onEvent: c, isAdmin: d } = F(), { t: s } = D("common");
-  if (!n)
+}, oe = () => {
+  const { employeeId: t, onEvent: l, isAdmin: m } = M(), { t: c } = I("common");
+  if (!t)
     throw new Error(
-      s("errors.missingParamsOrContext", {
+      c("errors.missingParamsOrContext", {
         component: "Summary",
         param: "employeeId",
         provider: "FlowProvider"
       })
     );
-  return /* @__PURE__ */ e($, { employeeId: n, onEvent: c, isAdmin: d });
+  return /* @__PURE__ */ e(j, { employeeId: t, onEvent: l, isAdmin: m });
 };
 export {
-  $ as OnboardingSummary,
-  ie as OnboardingSummaryContextual
+  j as OnboardingSummary,
+  oe as OnboardingSummaryContextual
 };
 //# sourceMappingURL=OnboardingSummary.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"OnboardingSummary.js","sources":["../../../../src/components/Employee/OnboardingSummary/OnboardingSummary.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { useEmployeesGetSuspense } from '@gusto/embedded-api/react-query/employeesGet'\nimport { useEmployeesGetOnboardingStatusSuspense } from '@gusto/embedded-api/react-query/employeesGetOnboardingStatus'\nimport DOMPurify from 'dompurify'\nimport { useMemo } from 'react'\nimport type { OnboardingContextInterface } from '../OnboardingFlow/OnboardingFlowComponents'\nimport { BaseComponent, useBase, type BaseComponentInterface } from '@/components/Base'\nimport { Flex, ActionsLayout } from '@/components/Common'\nimport { RequirementsList } from '@/components/Common/RequirementsList/RequirementsList'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport {\n  componentEvents,\n  EmployeeOnboardingStatus,\n  EmployeeSelfOnboardingStatuses,\n} from '@/shared/constants'\nimport { useFlow } from '@/components/Flow/useFlow'\nimport { useComponentDictionary } from '@/i18n/I18n'\n\nconst KNOWN_STEP_IDS = [\n  'personal_details',\n  'compensation_details',\n  'add_work_address',\n  'add_home_address',\n  'federal_tax_setup',\n  'state_tax_setup',\n  'direct_deposit_setup',\n  'employee_form_signing',\n  'file_new_hire_report',\n  'admin_review',\n] as const\n\ntype KnownStepId = (typeof KNOWN_STEP_IDS)[number]\n\nconst isKnownStepId = (id: string | undefined): id is KnownStepId =>\n  id !== undefined && (KNOWN_STEP_IDS as readonly string[]).includes(id)\n\n/**\n * Props for {@link OnboardingSummary}.\n *\n * @public\n */\nexport interface OnboardingSummaryProps extends BaseComponentInterface<'Employee.OnboardingSummary'> {\n  /** The associated employee identifier. */\n  employeeId: string\n  /** When `true`, renders the admin-facing view of the onboarding summary. Defaults to `false`. */\n  isAdmin?: boolean\n}\n\n/**\n * Displays a summary of an employee's onboarding status, listing completed and\n * outstanding steps. Rendered as a standalone step inside `OnboardingFlow`.\n *\n * @public\n */\nexport function OnboardingSummary(props: OnboardingSummaryProps) {\n  useI18n('Employee.OnboardingSummary')\n  useComponentDictionary('Employee.OnboardingSummary', props.dictionary)\n\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nconst Root = ({ employeeId, className, isAdmin = false }: OnboardingSummaryProps) => {\n  const { onEvent } = useBase()\n  const { t } = useTranslation('Employee.OnboardingSummary')\n  const Components = useComponentContext()\n\n  const {\n    data: { employee },\n  } = useEmployeesGetSuspense({ employeeId })\n  const { firstName, lastName } = employee!\n\n  const { data } = useEmployeesGetOnboardingStatusSuspense({ employeeId })\n  const { onboardingStatus, onboardingSteps } = data.employeeOnboardingStatus!\n\n  const hasMissingRequirements =\n    onboardingSteps?.length &&\n    onboardingSteps.findIndex(step => step.required && !step.completed) > -1\n\n  const isOnboardingCompleted =\n    onboardingStatus === EmployeeOnboardingStatus.ONBOARDING_COMPLETED ||\n    (!hasMissingRequirements &&\n      onboardingStatus === EmployeeOnboardingStatus.SELF_ONBOARDING_PENDING_INVITE)\n\n  const isEmployeeCompletingSelfOnboarding =\n    onboardingStatus === EmployeeOnboardingStatus.SELF_ONBOARDING_PENDING_INVITE ||\n    (onboardingStatus !== undefined && EmployeeSelfOnboardingStatuses.has(onboardingStatus))\n\n  const sanitizedFirstName = useMemo(() => DOMPurify.sanitize(firstName), [firstName])\n  const sanitizedLastName = useMemo(() => DOMPurify.sanitize(lastName), [lastName])\n\n  return (\n    <section className={className}>\n      <Flex flexDirection=\"column\" gap={20}>\n        <Flex alignItems=\"center\" flexDirection=\"column\" gap={8}>\n          {isAdmin ? (\n            isOnboardingCompleted ? (\n              <Flex flexDirection=\"column\" gap={4} alignItems=\"center\">\n                <Components.Heading as=\"h2\" textAlign=\"center\">\n                  {t('onboardedAdminSubtitle', {\n                    name: `${sanitizedFirstName} ${sanitizedLastName}`,\n                    interpolation: { escapeValue: false },\n                  })}\n                </Components.Heading>\n                <Components.Text variant=\"supporting\">\n                  {t('onboardedAdminDescription')}\n                </Components.Text>\n              </Flex>\n            ) : isEmployeeCompletingSelfOnboarding ? (\n              <Flex flexDirection=\"column\" gap={4} alignItems=\"center\">\n                <Components.Heading as=\"h2\" textAlign=\"center\">\n                  {t('handedOffAdminSubtitle', {\n                    name: `${sanitizedFirstName} ${sanitizedLastName}`,\n                    interpolation: { escapeValue: false },\n                  })}\n                </Components.Heading>\n                <Components.Text variant=\"supporting\">\n                  {t('handedOffAdminDescription')}\n                </Components.Text>\n              </Flex>\n            ) : (\n              <Components.Box\n                header={\n                  <Flex flexDirection=\"column\" gap={4}>\n                    <Components.Heading as=\"h2\">\n                      {t('missingRequirementsSubtitle')}\n                    </Components.Heading>\n                    <Components.Text variant=\"supporting\">\n                      {t('missingRequirementsDescription')}\n                    </Components.Text>\n                  </Flex>\n                }\n                footer={\n                  <ActionsLayout>\n                    <Components.Button\n                      variant=\"secondary\"\n                      onClick={() => {\n                        onEvent(componentEvents.EMPLOYEES_LIST)\n                      }}\n                    >\n                      {t('doneCta')}\n                    </Components.Button>\n                  </ActionsLayout>\n                }\n              >\n                {onboardingSteps && (\n                  <RequirementsList\n                    requirements={onboardingSteps\n                      .filter(\n                        (step): step is typeof step & { id: KnownStepId; completed: boolean } =>\n                          step.completed !== undefined && isKnownStepId(step.id),\n                      )\n                      .map(step => ({\n                        completed: step.completed,\n                        title: t(`steps.${step.id}`),\n                        description: t(`stepsDescriptions.${step.id}`),\n                      }))}\n                  />\n                )}\n              </Components.Box>\n            )\n          ) : (\n            <>\n              <Flex flexDirection=\"column\" gap={20} alignItems=\"center\">\n                <Flex flexDirection=\"column\" gap={4} alignItems=\"center\">\n                  <Components.Heading as=\"h2\" textAlign=\"center\">\n                    {t('onboardedSelfSubtitle')}\n                  </Components.Heading>\n                  <Components.Text variant=\"supporting\">\n                    {t('onboardedSelfDescription')}\n                  </Components.Text>\n                </Flex>\n                <ActionsLayout justifyContent=\"center\">\n                  <Components.Button\n                    variant=\"secondary\"\n                    onClick={() => {\n                      onEvent(componentEvents.EMPLOYEE_ONBOARDING_DONE)\n                    }}\n                  >\n                    {t('doneCta')}\n                  </Components.Button>\n                </ActionsLayout>\n              </Flex>\n            </>\n          )}\n        </Flex>\n\n        {isAdmin && (isOnboardingCompleted || isEmployeeCompletingSelfOnboarding) && (\n          <ActionsLayout justifyContent={'center'}>\n            <Components.Button\n              variant=\"secondary\"\n              onClick={() => {\n                onEvent(componentEvents.EMPLOYEES_LIST)\n              }}\n            >\n              {t('doneCta')}\n            </Components.Button>\n          </ActionsLayout>\n        )}\n      </Flex>\n    </section>\n  )\n}\n\n/** @internal */\nexport const OnboardingSummaryContextual = () => {\n  const { employeeId, onEvent, isAdmin } = useFlow<OnboardingContextInterface>()\n  const { t } = useTranslation('common')\n\n  if (!employeeId) {\n    throw new Error(\n      t('errors.missingParamsOrContext', {\n        component: 'Summary',\n        param: 'employeeId',\n        provider: 'FlowProvider',\n      }),\n    )\n  }\n  return <OnboardingSummary employeeId={employeeId} onEvent={onEvent} isAdmin={isAdmin} />\n}\n"],"names":["KNOWN_STEP_IDS","isKnownStepId","id","OnboardingSummary","props","useI18n","useComponentDictionary","jsx","BaseComponent","Root","employeeId","className","isAdmin","onEvent","useBase","useTranslation","Components","useComponentContext","employee","useEmployeesGetSuspense","firstName","lastName","data","useEmployeesGetOnboardingStatusSuspense","onboardingStatus","onboardingSteps","hasMissingRequirements","step","isOnboardingCompleted","EmployeeOnboardingStatus","isEmployeeCompletingSelfOnboarding","EmployeeSelfOnboardingStatuses","sanitizedFirstName","useMemo","DOMPurify","sanitizedLastName","jsxs","Flex","ActionsLayout","componentEvents","RequirementsList","OnboardingSummaryContextual","useFlow","t"],"mappings":"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"}
+{"version":3,"file":"OnboardingSummary.js","sources":["../../../../src/components/Employee/OnboardingSummary/OnboardingSummary.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { useEmployeesGetSuspense } from '@gusto/embedded-api/react-query/employeesGet'\nimport { useEmployeesGetOnboardingStatusSuspense } from '@gusto/embedded-api/react-query/employeesGetOnboardingStatus'\nimport DOMPurify from 'dompurify'\nimport { useMemo } from 'react'\nimport type { OnboardingContextInterface } from '../OnboardingFlow/OnboardingFlowComponents'\nimport { BaseComponent, useBase, type BaseComponentInterface } from '@/components/Base'\nimport { Flex, ActionsLayout } from '@/components/Common'\nimport { RequirementsList } from '@/components/Common/RequirementsList/RequirementsList'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport {\n  componentEvents,\n  EmployeeOnboardingStatus,\n  EmployeeSelfOnboardingStatuses,\n} from '@/shared/constants'\nimport { useFlow } from '@/components/Flow/useFlow'\nimport { useComponentDictionary } from '@/i18n/I18n'\n\nconst KNOWN_STEP_IDS = [\n  'personal_details',\n  'compensation_details',\n  'add_work_address',\n  'add_home_address',\n  'federal_tax_setup',\n  'state_tax_setup',\n  'direct_deposit_setup',\n  'employee_form_signing',\n  'file_new_hire_report',\n  'admin_review',\n] as const\n\ntype KnownStepId = (typeof KNOWN_STEP_IDS)[number]\n\nconst isKnownStepId = (id: string | undefined): id is KnownStepId =>\n  id !== undefined && (KNOWN_STEP_IDS as readonly string[]).includes(id)\n\n/**\n * Props for {@link OnboardingSummary}.\n *\n * @public\n */\nexport interface OnboardingSummaryProps extends BaseComponentInterface<'Employee.OnboardingSummary'> {\n  /** The associated employee identifier. */\n  employeeId: string\n  /** When `true`, renders the admin-facing view of the onboarding summary. Defaults to `false`. */\n  isAdmin?: boolean\n}\n\n/**\n * Displays a summary of an employee's onboarding status, listing completed and\n * outstanding steps. Rendered as a standalone step inside `OnboardingFlow`.\n *\n * @public\n */\nexport function OnboardingSummary(props: OnboardingSummaryProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nconst Root = ({ employeeId, className, isAdmin = false, dictionary }: OnboardingSummaryProps) => {\n  useI18n('Employee.OnboardingSummary')\n  useComponentDictionary('Employee.OnboardingSummary', dictionary)\n  const { onEvent } = useBase()\n  const { t } = useTranslation('Employee.OnboardingSummary')\n  const Components = useComponentContext()\n\n  const {\n    data: { employee },\n  } = useEmployeesGetSuspense({ employeeId })\n  const { firstName, lastName } = employee!\n\n  const { data } = useEmployeesGetOnboardingStatusSuspense({ employeeId })\n  const { onboardingStatus, onboardingSteps } = data.employeeOnboardingStatus!\n\n  const hasMissingRequirements =\n    onboardingSteps?.length &&\n    onboardingSteps.findIndex(step => step.required && !step.completed) > -1\n\n  const isOnboardingCompleted =\n    onboardingStatus === EmployeeOnboardingStatus.ONBOARDING_COMPLETED ||\n    (!hasMissingRequirements &&\n      onboardingStatus === EmployeeOnboardingStatus.SELF_ONBOARDING_PENDING_INVITE)\n\n  const isEmployeeCompletingSelfOnboarding =\n    onboardingStatus === EmployeeOnboardingStatus.SELF_ONBOARDING_PENDING_INVITE ||\n    (onboardingStatus !== undefined && EmployeeSelfOnboardingStatuses.has(onboardingStatus))\n\n  const sanitizedFirstName = useMemo(() => DOMPurify.sanitize(firstName), [firstName])\n  const sanitizedLastName = useMemo(() => DOMPurify.sanitize(lastName), [lastName])\n\n  return (\n    <section className={className}>\n      <Flex flexDirection=\"column\" gap={20}>\n        <Flex alignItems=\"center\" flexDirection=\"column\" gap={8}>\n          {isAdmin ? (\n            isOnboardingCompleted ? (\n              <Flex flexDirection=\"column\" gap={4} alignItems=\"center\">\n                <Components.Heading as=\"h2\" textAlign=\"center\">\n                  {t('onboardedAdminSubtitle', {\n                    name: `${sanitizedFirstName} ${sanitizedLastName}`,\n                    interpolation: { escapeValue: false },\n                  })}\n                </Components.Heading>\n                <Components.Text variant=\"supporting\">\n                  {t('onboardedAdminDescription')}\n                </Components.Text>\n              </Flex>\n            ) : isEmployeeCompletingSelfOnboarding ? (\n              <Flex flexDirection=\"column\" gap={4} alignItems=\"center\">\n                <Components.Heading as=\"h2\" textAlign=\"center\">\n                  {t('handedOffAdminSubtitle', {\n                    name: `${sanitizedFirstName} ${sanitizedLastName}`,\n                    interpolation: { escapeValue: false },\n                  })}\n                </Components.Heading>\n                <Components.Text variant=\"supporting\">\n                  {t('handedOffAdminDescription')}\n                </Components.Text>\n              </Flex>\n            ) : (\n              <Components.Box\n                header={\n                  <Flex flexDirection=\"column\" gap={4}>\n                    <Components.Heading as=\"h2\">\n                      {t('missingRequirementsSubtitle')}\n                    </Components.Heading>\n                    <Components.Text variant=\"supporting\">\n                      {t('missingRequirementsDescription')}\n                    </Components.Text>\n                  </Flex>\n                }\n                footer={\n                  <ActionsLayout>\n                    <Components.Button\n                      variant=\"secondary\"\n                      onClick={() => {\n                        onEvent(componentEvents.EMPLOYEES_LIST)\n                      }}\n                    >\n                      {t('doneCta')}\n                    </Components.Button>\n                  </ActionsLayout>\n                }\n              >\n                {onboardingSteps && (\n                  <RequirementsList\n                    requirements={onboardingSteps\n                      .filter(\n                        (step): step is typeof step & { id: KnownStepId; completed: boolean } =>\n                          step.completed !== undefined && isKnownStepId(step.id),\n                      )\n                      .map(step => ({\n                        completed: step.completed,\n                        title: t(`steps.${step.id}`),\n                        description: t(`stepsDescriptions.${step.id}`),\n                      }))}\n                  />\n                )}\n              </Components.Box>\n            )\n          ) : (\n            <>\n              <Flex flexDirection=\"column\" gap={20} alignItems=\"center\">\n                <Flex flexDirection=\"column\" gap={4} alignItems=\"center\">\n                  <Components.Heading as=\"h2\" textAlign=\"center\">\n                    {t('onboardedSelfSubtitle')}\n                  </Components.Heading>\n                  <Components.Text variant=\"supporting\">\n                    {t('onboardedSelfDescription')}\n                  </Components.Text>\n                </Flex>\n                <ActionsLayout justifyContent=\"center\">\n                  <Components.Button\n                    variant=\"secondary\"\n                    onClick={() => {\n                      onEvent(componentEvents.EMPLOYEE_ONBOARDING_DONE)\n                    }}\n                  >\n                    {t('doneCta')}\n                  </Components.Button>\n                </ActionsLayout>\n              </Flex>\n            </>\n          )}\n        </Flex>\n\n        {isAdmin && (isOnboardingCompleted || isEmployeeCompletingSelfOnboarding) && (\n          <ActionsLayout justifyContent={'center'}>\n            <Components.Button\n              variant=\"secondary\"\n              onClick={() => {\n                onEvent(componentEvents.EMPLOYEES_LIST)\n              }}\n            >\n              {t('doneCta')}\n            </Components.Button>\n          </ActionsLayout>\n        )}\n      </Flex>\n    </section>\n  )\n}\n\n/** @internal */\nexport const OnboardingSummaryContextual = () => {\n  const { employeeId, onEvent, isAdmin } = useFlow<OnboardingContextInterface>()\n  const { t } = useTranslation('common')\n\n  if (!employeeId) {\n    throw new Error(\n      t('errors.missingParamsOrContext', {\n        component: 'Summary',\n        param: 'employeeId',\n        provider: 'FlowProvider',\n      }),\n    )\n  }\n  return <OnboardingSummary employeeId={employeeId} onEvent={onEvent} isAdmin={isAdmin} />\n}\n"],"names":["KNOWN_STEP_IDS","isKnownStepId","id","OnboardingSummary","props","jsx","BaseComponent","Root","employeeId","className","isAdmin","dictionary","useI18n","useComponentDictionary","onEvent","useBase","t","useTranslation","Components","useComponentContext","employee","useEmployeesGetSuspense","firstName","lastName","data","useEmployeesGetOnboardingStatusSuspense","onboardingStatus","onboardingSteps","hasMissingRequirements","step","isOnboardingCompleted","EmployeeOnboardingStatus","isEmployeeCompletingSelfOnboarding","EmployeeSelfOnboardingStatuses","sanitizedFirstName","useMemo","DOMPurify","sanitizedLastName","jsxs","Flex","ActionsLayout","componentEvents","RequirementsList","OnboardingSummaryContextual","useFlow"],"mappings":"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"}

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

@@ -1,8 +1,8 @@
 import { jsx as n } from "react/jsx-runtime";
-import { createMachine as c } from "robot3";
-import { useMemo as u } from "react";
-import { PaymentMethodBankFormContextual as h, PaymentMethodSplitFormContextual as i, PaymentMethodCardContextual as l } from "./PaymentMethodComponents.js";
-import { paymentMethodStateMachine as s } from "./paymentMethodStateMachine.js";
+import { useMemo as c } from "react";
+import { PaymentMethodBankFormContextual as u, PaymentMethodSplitFormContextual as h, PaymentMethodCardContextual as i } from "./PaymentMethodComponents.js";
+import { paymentMethodStateMachine as l } from "./paymentMethodStateMachine.js";
+import { createMachine as s } from "../../../../lib/state-machine/core.js";
 import { Flow as y } from "../../../Flow/Flow.js";
 import { BaseBoundaries as d } from "../../../Base/Base.js";
 import "../../../Base/useBase.js";
@@ -15,10 +15,10 @@ function x({
   LoaderComponent: r
 }) {
   P("Employee.Management.PaymentMethod");
-  const a = e === "add" ? h : e === "split" ? i : l, p = u(
-    () => c(
+  const a = e === "add" ? u : e === "split" ? h : i, p = c(
+    () => s(
       e,
-      s,
+      l,
       (M) => ({
         ...M,
         component: a,

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

@@ -1 +1 @@
-{"version":3,"file":"PaymentMethod.js","sources":["../../../../../src/components/Employee/PaymentMethod/management/PaymentMethod.tsx"],"sourcesContent":["import { createMachine } from 'robot3'\nimport { useMemo } from 'react'\nimport type { PaymentMethodContextInterface } from './PaymentMethodComponents'\nimport {\n  PaymentMethodCardContextual,\n  PaymentMethodBankFormContextual,\n  PaymentMethodSplitFormContextual,\n} from './PaymentMethodComponents'\nimport { paymentMethodStateMachine } from './paymentMethodStateMachine'\nimport { Flow } from '@/components/Flow/Flow'\nimport { BaseBoundaries, type BaseComponentInterface } from '@/components/Base'\nimport { useComponentDictionary } from '@/i18n/I18n'\nimport { useI18n } from '@/i18n'\n\n/**\n * Props for {@link PaymentMethod}.\n *\n * @public\n */\nexport interface PaymentMethodProps extends BaseComponentInterface<'Employee.Management.PaymentMethod'> {\n  /** The associated employee identifier. */\n  employeeId: string\n  /** Not used — payment method management edits live data. */\n  defaultValues?: never\n  /** Whether the current viewer is an admin. Defaults to `true`. */\n  isAdmin?: boolean\n  /** Step to render first: the list card, the add-account form, or the split-paycheck form. Defaults to `'list'`. */\n  initialState?: 'list' | 'add' | 'split'\n}\n\nfunction PaymentMethodFlow({\n  employeeId,\n  isAdmin = true,\n  initialState = 'list',\n  onEvent,\n  LoaderComponent,\n}: PaymentMethodProps) {\n  useI18n('Employee.Management.PaymentMethod')\n\n  const initialComponent =\n    initialState === 'add'\n      ? PaymentMethodBankFormContextual\n      : initialState === 'split'\n        ? PaymentMethodSplitFormContextual\n        : PaymentMethodCardContextual\n\n  const machine = useMemo(\n    () =>\n      createMachine(\n        initialState,\n        paymentMethodStateMachine,\n        (ctx: PaymentMethodContextInterface) => ({\n          ...ctx,\n          component: initialComponent,\n          employeeId,\n          isAdmin,\n          successAlert: null,\n          LoaderComponent,\n        }),\n      ),\n    [employeeId, isAdmin, initialState, initialComponent, LoaderComponent],\n  )\n\n  return <Flow machine={machine} onEvent={onEvent} />\n}\n\n/**\n * Management flow for editing an employee's payment method.\n *\n * @remarks\n * Orchestrates the list card, add-bank-account form, and split-paycheck form\n * for an existing employee. Routes between steps based on user actions\n * starting from `initialState`. Composed of the smaller standalone components\n * ({@link PaymentMethodCard}, {@link PaymentMethodBankForm},\n * {@link PaymentMethodSplitForm}) which can also be used directly when an\n * orchestrator other than this flow is needed.\n *\n * @param props - See {@link PaymentMethodProps}.\n * @returns The payment method management flow.\n * @public\n *\n * @example\n * ```tsx\n * import { EmployeeManagement } from '@gusto/embedded-react-sdk'\n *\n * function MyComponent() {\n *   return (\n *     <EmployeeManagement.PaymentMethod\n *       employeeId=\"4b3f930f-82cd-48a8-b797-798686e12e5e\"\n *       onEvent={() => {}}\n *     />\n *   )\n * }\n * ```\n */\nexport function PaymentMethod({\n  dictionary,\n  FallbackComponent,\n  LoaderComponent,\n  ...props\n}: PaymentMethodProps) {\n  useComponentDictionary('Employee.Management.PaymentMethod', dictionary)\n  return (\n    <BaseBoundaries\n      componentName=\"Employee.Management.PaymentMethod\"\n      FallbackComponent={FallbackComponent}\n      LoaderComponent={LoaderComponent}\n    >\n      <PaymentMethodFlow LoaderComponent={LoaderComponent} {...props} />\n    </BaseBoundaries>\n  )\n}\n"],"names":["PaymentMethodFlow","employeeId","isAdmin","initialState","onEvent","LoaderComponent","useI18n","initialComponent","PaymentMethodBankFormContextual","PaymentMethodSplitFormContextual","PaymentMethodCardContextual","machine","useMemo","createMachine","paymentMethodStateMachine","ctx","jsx","Flow","PaymentMethod","dictionary","FallbackComponent","props","useComponentDictionary","BaseBoundaries"],"mappings":";;;;;;;;;AA8BA,SAASA,EAAkB;AAAA,EACzB,YAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,cAAAC,IAAe;AAAA,EACf,SAAAC;AAAA,EACA,iBAAAC;AACF,GAAuB;AACrB,EAAAC,EAAQ,mCAAmC;AAE3C,QAAMC,IACJJ,MAAiB,QACbK,IACAL,MAAiB,UACfM,IACAC,GAEFC,IAAUC;AAAA,IACd,MACEC;AAAA,MACEV;AAAA,MACAW;AAAA,MACA,CAACC,OAAwC;AAAA,QACvC,GAAGA;AAAA,QACH,WAAWR;AAAA,QACX,YAAAN;AAAA,QACA,SAAAC;AAAA,QACA,cAAc;AAAA,QACd,iBAAAG;AAAA,MAAA;AAAA,IACF;AAAA,IAEJ,CAACJ,GAAYC,GAASC,GAAcI,GAAkBF,CAAe;AAAA,EAAA;AAGvE,SAAO,gBAAAW,EAACC,GAAA,EAAK,SAAAN,GAAkB,SAAAP,EAAA,CAAkB;AACnD;AA+BO,SAASc,EAAc;AAAA,EAC5B,YAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,iBAAAf;AAAA,EACA,GAAGgB;AACL,GAAuB;AACrB,SAAAC,EAAuB,qCAAqCH,CAAU,GAEpE,gBAAAH;AAAA,IAACO;AAAA,IAAA;AAAA,MACC,eAAc;AAAA,MACd,mBAAAH;AAAA,MACA,iBAAAf;AAAA,MAEA,UAAA,gBAAAW,EAAChB,GAAA,EAAkB,iBAAAK,GAAmC,GAAGgB,EAAA,CAAO;AAAA,IAAA;AAAA,EAAA;AAGtE;"}
+{"version":3,"file":"PaymentMethod.js","sources":["../../../../../src/components/Employee/PaymentMethod/management/PaymentMethod.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport type { PaymentMethodContextInterface } from './PaymentMethodComponents'\nimport {\n  PaymentMethodCardContextual,\n  PaymentMethodBankFormContextual,\n  PaymentMethodSplitFormContextual,\n} from './PaymentMethodComponents'\nimport { paymentMethodStateMachine } from './paymentMethodStateMachine'\nimport { createMachine } from '@/lib/state-machine'\nimport { Flow } from '@/components/Flow/Flow'\nimport { BaseBoundaries, type BaseComponentInterface } from '@/components/Base'\nimport { useComponentDictionary } from '@/i18n/I18n'\nimport { useI18n } from '@/i18n'\n\n/**\n * Props for {@link PaymentMethod}.\n *\n * @public\n */\nexport interface PaymentMethodProps extends BaseComponentInterface<'Employee.Management.PaymentMethod'> {\n  /** The associated employee identifier. */\n  employeeId: string\n  /** Not used — payment method management edits live data. */\n  defaultValues?: never\n  /** Whether the current viewer is an admin. Defaults to `true`. */\n  isAdmin?: boolean\n  /** Step to render first: the list card, the add-account form, or the split-paycheck form. Defaults to `'list'`. */\n  initialState?: 'list' | 'add' | 'split'\n}\n\nfunction PaymentMethodFlow({\n  employeeId,\n  isAdmin = true,\n  initialState = 'list',\n  onEvent,\n  LoaderComponent,\n}: PaymentMethodProps) {\n  useI18n('Employee.Management.PaymentMethod')\n\n  const initialComponent =\n    initialState === 'add'\n      ? PaymentMethodBankFormContextual\n      : initialState === 'split'\n        ? PaymentMethodSplitFormContextual\n        : PaymentMethodCardContextual\n\n  const machine = useMemo(\n    () =>\n      createMachine(\n        initialState,\n        paymentMethodStateMachine,\n        (ctx: PaymentMethodContextInterface) => ({\n          ...ctx,\n          component: initialComponent,\n          employeeId,\n          isAdmin,\n          successAlert: null,\n          LoaderComponent,\n        }),\n      ),\n    [employeeId, isAdmin, initialState, initialComponent, LoaderComponent],\n  )\n\n  return <Flow machine={machine} onEvent={onEvent} />\n}\n\n/**\n * Management flow for editing an employee's payment method.\n *\n * @remarks\n * Orchestrates the list card, add-bank-account form, and split-paycheck form\n * for an existing employee. Routes between steps based on user actions\n * starting from `initialState`. Composed of the smaller standalone components\n * ({@link PaymentMethodCard}, {@link PaymentMethodBankForm},\n * {@link PaymentMethodSplitForm}) which can also be used directly when an\n * orchestrator other than this flow is needed.\n *\n * @param props - See {@link PaymentMethodProps}.\n * @returns The payment method management flow.\n * @public\n *\n * @example\n * ```tsx\n * import { EmployeeManagement } from '@gusto/embedded-react-sdk'\n *\n * function MyComponent() {\n *   return (\n *     <EmployeeManagement.PaymentMethod\n *       employeeId=\"4b3f930f-82cd-48a8-b797-798686e12e5e\"\n *       onEvent={() => {}}\n *     />\n *   )\n * }\n * ```\n */\nexport function PaymentMethod({\n  dictionary,\n  FallbackComponent,\n  LoaderComponent,\n  ...props\n}: PaymentMethodProps) {\n  useComponentDictionary('Employee.Management.PaymentMethod', dictionary)\n  return (\n    <BaseBoundaries\n      componentName=\"Employee.Management.PaymentMethod\"\n      FallbackComponent={FallbackComponent}\n      LoaderComponent={LoaderComponent}\n    >\n      <PaymentMethodFlow LoaderComponent={LoaderComponent} {...props} />\n    </BaseBoundaries>\n  )\n}\n"],"names":["PaymentMethodFlow","employeeId","isAdmin","initialState","onEvent","LoaderComponent","useI18n","initialComponent","PaymentMethodBankFormContextual","PaymentMethodSplitFormContextual","PaymentMethodCardContextual","machine","useMemo","createMachine","paymentMethodStateMachine","ctx","jsx","Flow","PaymentMethod","dictionary","FallbackComponent","props","useComponentDictionary","BaseBoundaries"],"mappings":";;;;;;;;;AA8BA,SAASA,EAAkB;AAAA,EACzB,YAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,cAAAC,IAAe;AAAA,EACf,SAAAC;AAAA,EACA,iBAAAC;AACF,GAAuB;AACrB,EAAAC,EAAQ,mCAAmC;AAE3C,QAAMC,IACJJ,MAAiB,QACbK,IACAL,MAAiB,UACfM,IACAC,GAEFC,IAAUC;AAAA,IACd,MACEC;AAAA,MACEV;AAAA,MACAW;AAAA,MACA,CAACC,OAAwC;AAAA,QACvC,GAAGA;AAAA,QACH,WAAWR;AAAA,QACX,YAAAN;AAAA,QACA,SAAAC;AAAA,QACA,cAAc;AAAA,QACd,iBAAAG;AAAA,MAAA;AAAA,IACF;AAAA,IAEJ,CAACJ,GAAYC,GAASC,GAAcI,GAAkBF,CAAe;AAAA,EAAA;AAGvE,SAAO,gBAAAW,EAACC,GAAA,EAAK,SAAAN,GAAkB,SAAAP,EAAA,CAAkB;AACnD;AA+BO,SAASc,EAAc;AAAA,EAC5B,YAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,iBAAAf;AAAA,EACA,GAAGgB;AACL,GAAuB;AACrB,SAAAC,EAAuB,qCAAqCH,CAAU,GAEpE,gBAAAH;AAAA,IAACO;AAAA,IAAA;AAAA,MACC,eAAc;AAAA,MACd,mBAAAH;AAAA,MACA,iBAAAf;AAAA,MAEA,UAAA,gBAAAW,EAAChB,GAAA,EAAkB,iBAAAK,GAAmC,GAAGgB,EAAA,CAAO;AAAA,IAAA;AAAA,EAAA;AAGtE;"}

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

@@ -1,17 +1,17 @@
 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 { useComponentContext as c } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
 import { componentEvents as t } from "../../../../shared/constants.js";
+import { Flex as _ } from "../../../Common/Flex/Flex.js";
 import { BankFormBody as l } from "../shared/BankFormBody/BankFormBody.js";
 function F({
   employeeId: e,
   onEvent: o,
   ...m
 }) {
-  const r = p(), { t: a } = s("Employee.Management.PaymentMethodBankForm"), i = _();
-  return /* @__PURE__ */ M(c, { flexDirection: "column", gap: 32, children: [
+  const r = p(), { t: a } = s("Employee.Management.PaymentMethodBankForm"), i = c();
+  return /* @__PURE__ */ M(_, { flexDirection: "column", gap: 32, children: [
     /* @__PURE__ */ n(i.Heading, { as: "h1", styledAs: "h2", children: a("title") }),
     /* @__PURE__ */ n(
       l,

package/dist/components/Employee/PaymentMethod/management/paymentMethodStateMachine.d.ts

@@ -1,6 +1,6 @@
 /** @internal */
 export declare const paymentMethodStateMachine: {
-    list: import('robot3').MachineState<any>;
-    add: import('robot3').MachineState<any>;
-    split: import('robot3').MachineState<any>;
+    list: import('../../../../lib/state-machine').StateDefinition;
+    add: import('../../../../lib/state-machine').StateDefinition;
+    split: import('../../../../lib/state-machine').StateDefinition;
 };

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

@@ -1,15 +1,16 @@
-import { state as A, transition as E, reduce as _ } from "robot3";
-import { PaymentMethodBankFormContextual as s, PaymentMethodSplitFormContextual as N, PaymentMethodCardContextual as n } from "./PaymentMethodComponents.js";
+import { PaymentMethodSplitFormContextual as s, PaymentMethodBankFormContextual as N, PaymentMethodCardContextual as o } from "./PaymentMethodComponents.js";
+import "react";
+import { state as A, transition as E, reduce as _ } from "../../../../lib/state-machine/core.js";
 import { componentEvents as t } from "../../../../shared/constants.js";
 const e = _(
   (M) => ({
     ...M,
-    component: n,
+    component: o,
     successAlert: null
   })
-), T = (M) => _((o) => ({
-  ...o,
-  component: n,
+), T = (M) => _((n) => ({
+  ...n,
+  component: o,
   successAlert: M
 })), P = {
   list: A(
@@ -18,7 +19,7 @@ const e = _(
       "add",
       _((M) => ({
         ...M,
-        component: s,
+        component: N,
         successAlert: null
       }))
     ),
@@ -27,7 +28,7 @@ const e = _(
       "split",
       _((M) => ({
         ...M,
-        component: N,
+        component: s,
         successAlert: null
       }))
     ),

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

@@ -1 +1 @@
-{"version":3,"file":"paymentMethodStateMachine.js","sources":["../../../../../src/components/Employee/PaymentMethod/management/paymentMethodStateMachine.ts"],"sourcesContent":["import { reduce, state, transition } from 'robot3'\nimport type { ComponentType } from 'react'\nimport type {\n  PaymentMethodContextInterface,\n  PaymentMethodSuccessAlertCode,\n} from './PaymentMethodComponents'\nimport {\n  PaymentMethodCardContextual,\n  PaymentMethodBankFormContextual,\n  PaymentMethodSplitFormContextual,\n} from './PaymentMethodComponents'\nimport { componentEvents } from '@/shared/constants'\nimport type { MachineTransition } from '@/types/Helpers'\n\nconst returnToList = reduce(\n  (ctx: PaymentMethodContextInterface): PaymentMethodContextInterface => ({\n    ...ctx,\n    component: PaymentMethodCardContextual as ComponentType,\n    successAlert: null,\n  }),\n)\n\nconst returnToListWithAlert = (alert: PaymentMethodSuccessAlertCode) =>\n  reduce((ctx: PaymentMethodContextInterface): PaymentMethodContextInterface => ({\n    ...ctx,\n    component: PaymentMethodCardContextual as ComponentType,\n    successAlert: alert,\n  }))\n\n/** @internal */\nexport const paymentMethodStateMachine = {\n  list: state<MachineTransition>(\n    transition(\n      componentEvents.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_CARD_ADD_REQUESTED,\n      'add',\n      reduce((ctx: PaymentMethodContextInterface): PaymentMethodContextInterface => ({\n        ...ctx,\n        component: PaymentMethodBankFormContextual as ComponentType,\n        successAlert: null,\n      })),\n    ),\n    transition(\n      componentEvents.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_CARD_SPLIT_REQUESTED,\n      'split',\n      reduce((ctx: PaymentMethodContextInterface): PaymentMethodContextInterface => ({\n        ...ctx,\n        component: PaymentMethodSplitFormContextual as ComponentType,\n        successAlert: null,\n      })),\n    ),\n    transition(\n      componentEvents.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_CARD_BANK_ACCOUNT_DELETED,\n      'list',\n      returnToListWithAlert('bankAccountDeleted'),\n    ),\n    transition(\n      componentEvents.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_ALERT_DISMISSED,\n      'list',\n      returnToList,\n    ),\n  ),\n  add: state<MachineTransition>(\n    transition(\n      componentEvents.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_BANK_FORM_SUBMITTED,\n      'list',\n      returnToListWithAlert('bankAccountAdded'),\n    ),\n    transition(\n      componentEvents.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_BANK_FORM_CANCELLED,\n      'list',\n      returnToList,\n    ),\n  ),\n  split: state<MachineTransition>(\n    transition(\n      componentEvents.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_SPLIT_FORM_SUBMITTED,\n      'list',\n      returnToListWithAlert('splitUpdated'),\n    ),\n    transition(\n      componentEvents.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_SPLIT_FORM_CANCELLED,\n      'list',\n      returnToList,\n    ),\n  ),\n}\n"],"names":["returnToList","reduce","ctx","PaymentMethodCardContextual","returnToListWithAlert","alert","paymentMethodStateMachine","state","transition","componentEvents","PaymentMethodBankFormContextual","PaymentMethodSplitFormContextual"],"mappings":";;;AAcA,MAAMA,IAAeC;AAAA,EACnB,CAACC,OAAuE;AAAA,IACtE,GAAGA;AAAA,IACH,WAAWC;AAAA,IACX,cAAc;AAAA,EAAA;AAElB,GAEMC,IAAwB,CAACC,MAC7BJ,EAAO,CAACC,OAAuE;AAAA,EAC7E,GAAGA;AAAA,EACH,WAAWC;AAAA,EACX,cAAcE;AAChB,EAAE,GAGSC,IAA4B;AAAA,EACvC,MAAMC;AAAA,IACJC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAR,EAAO,CAACC,OAAuE;AAAA,QAC7E,GAAGA;AAAA,QACH,WAAWQ;AAAA,QACX,cAAc;AAAA,MAAA,EACd;AAAA,IAAA;AAAA,IAEJF;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAR,EAAO,CAACC,OAAuE;AAAA,QAC7E,GAAGA;AAAA,QACH,WAAWS;AAAA,QACX,cAAc;AAAA,MAAA,EACd;AAAA,IAAA;AAAA,IAEJH;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAL,EAAsB,oBAAoB;AAAA,IAAA;AAAA,IAE5CI;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAT;AAAA,IAAA;AAAA,EACF;AAAA,EAEF,KAAKO;AAAA,IACHC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAL,EAAsB,kBAAkB;AAAA,IAAA;AAAA,IAE1CI;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAT;AAAA,IAAA;AAAA,EACF;AAAA,EAEF,OAAOO;AAAA,IACLC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAL,EAAsB,cAAc;AAAA,IAAA;AAAA,IAEtCI;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAT;AAAA,IAAA;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"paymentMethodStateMachine.js","sources":["../../../../../src/components/Employee/PaymentMethod/management/paymentMethodStateMachine.ts"],"sourcesContent":["import type { ComponentType } from 'react'\nimport type {\n  PaymentMethodContextInterface,\n  PaymentMethodSuccessAlertCode,\n} from './PaymentMethodComponents'\nimport {\n  PaymentMethodCardContextual,\n  PaymentMethodBankFormContextual,\n  PaymentMethodSplitFormContextual,\n} from './PaymentMethodComponents'\nimport { reduce, state, transition } from '@/lib/state-machine'\nimport { componentEvents } from '@/shared/constants'\nimport type { MachineTransition } from '@/types/Helpers'\n\nconst returnToList = reduce(\n  (ctx: PaymentMethodContextInterface): PaymentMethodContextInterface => ({\n    ...ctx,\n    component: PaymentMethodCardContextual as ComponentType,\n    successAlert: null,\n  }),\n)\n\nconst returnToListWithAlert = (alert: PaymentMethodSuccessAlertCode) =>\n  reduce((ctx: PaymentMethodContextInterface): PaymentMethodContextInterface => ({\n    ...ctx,\n    component: PaymentMethodCardContextual as ComponentType,\n    successAlert: alert,\n  }))\n\n/** @internal */\nexport const paymentMethodStateMachine = {\n  list: state<MachineTransition>(\n    transition(\n      componentEvents.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_CARD_ADD_REQUESTED,\n      'add',\n      reduce((ctx: PaymentMethodContextInterface): PaymentMethodContextInterface => ({\n        ...ctx,\n        component: PaymentMethodBankFormContextual as ComponentType,\n        successAlert: null,\n      })),\n    ),\n    transition(\n      componentEvents.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_CARD_SPLIT_REQUESTED,\n      'split',\n      reduce((ctx: PaymentMethodContextInterface): PaymentMethodContextInterface => ({\n        ...ctx,\n        component: PaymentMethodSplitFormContextual as ComponentType,\n        successAlert: null,\n      })),\n    ),\n    transition(\n      componentEvents.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_CARD_BANK_ACCOUNT_DELETED,\n      'list',\n      returnToListWithAlert('bankAccountDeleted'),\n    ),\n    transition(\n      componentEvents.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_ALERT_DISMISSED,\n      'list',\n      returnToList,\n    ),\n  ),\n  add: state<MachineTransition>(\n    transition(\n      componentEvents.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_BANK_FORM_SUBMITTED,\n      'list',\n      returnToListWithAlert('bankAccountAdded'),\n    ),\n    transition(\n      componentEvents.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_BANK_FORM_CANCELLED,\n      'list',\n      returnToList,\n    ),\n  ),\n  split: state<MachineTransition>(\n    transition(\n      componentEvents.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_SPLIT_FORM_SUBMITTED,\n      'list',\n      returnToListWithAlert('splitUpdated'),\n    ),\n    transition(\n      componentEvents.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_SPLIT_FORM_CANCELLED,\n      'list',\n      returnToList,\n    ),\n  ),\n}\n"],"names":["returnToList","reduce","ctx","PaymentMethodCardContextual","returnToListWithAlert","alert","paymentMethodStateMachine","state","transition","componentEvents","PaymentMethodBankFormContextual","PaymentMethodSplitFormContextual"],"mappings":";;;;AAcA,MAAMA,IAAeC;AAAA,EACnB,CAACC,OAAuE;AAAA,IACtE,GAAGA;AAAA,IACH,WAAWC;AAAA,IACX,cAAc;AAAA,EAAA;AAElB,GAEMC,IAAwB,CAACC,MAC7BJ,EAAO,CAACC,OAAuE;AAAA,EAC7E,GAAGA;AAAA,EACH,WAAWC;AAAA,EACX,cAAcE;AAChB,EAAE,GAGSC,IAA4B;AAAA,EACvC,MAAMC;AAAA,IACJC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAR,EAAO,CAACC,OAAuE;AAAA,QAC7E,GAAGA;AAAA,QACH,WAAWQ;AAAA,QACX,cAAc;AAAA,MAAA,EACd;AAAA,IAAA;AAAA,IAEJF;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAR,EAAO,CAACC,OAAuE;AAAA,QAC7E,GAAGA;AAAA,QACH,WAAWS;AAAA,QACX,cAAc;AAAA,MAAA,EACd;AAAA,IAAA;AAAA,IAEJH;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAL,EAAsB,oBAAoB;AAAA,IAAA;AAAA,IAE5CI;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAT;AAAA,IAAA;AAAA,EACF;AAAA,EAEF,KAAKO;AAAA,IACHC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAL,EAAsB,kBAAkB;AAAA,IAAA;AAAA,IAE1CI;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAT;AAAA,IAAA;AAAA,EACF;AAAA,EAEF,OAAOO;AAAA,IACLC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAL,EAAsB,cAAc;AAAA,IAAA;AAAA,IAEtCI;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAT;AAAA,IAAA;AAAA,EACF;AAEJ;"}

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

@@ -1,13 +1,13 @@
 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 { useComponentContext as l } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
 import { componentEvents as r } from "../../../../shared/constants.js";
+import { Flex as f } from "../../../Common/Flex/Flex.js";
 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: [
+  const e = d(), { t: i } = p("Employee.PaymentMethod"), a = l();
+  return /* @__PURE__ */ c(f, { flexDirection: "column", gap: 32, children: [
     /* @__PURE__ */ n(a.Heading, { as: "h1", styledAs: "h2", children: i("addBankAccountFormTitle") }),
     /* @__PURE__ */ n(
       C,

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

@@ -1,8 +1,8 @@
 import { jsx as n } from "react/jsx-runtime";
-import { createMachine as p } from "robot3";
-import { useMemo as a } from "react";
-import { ListViewContextual as u } from "./PaymentMethodComponents.js";
-import { paymentMethodStateMachine as f } from "./paymentMethodStateMachine.js";
+import { useMemo as p } from "react";
+import { ListViewContextual as a } from "./PaymentMethodComponents.js";
+import { paymentMethodStateMachine as u } from "./paymentMethodStateMachine.js";
+import { createMachine as f } from "../../../../lib/state-machine/core.js";
 import { Flow as c } from "../../../Flow/Flow.js";
 import { useFlow as s } from "../../../Flow/useFlow.js";
 import { BaseBoundaries as l } from "../../../Base/Base.js";
@@ -16,13 +16,13 @@ function M({
   LoaderComponent: m
 }) {
   h("Employee.PaymentMethod");
-  const r = a(
-    () => p(
+  const r = p(
+    () => f(
       "list",
-      f,
+      u,
       (i) => ({
         ...i,
-        component: u,
+        component: a,
         employeeId: e,
         isAdmin: o,
         LoaderComponent: m

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

@@ -1 +1 @@
-{"version":3,"file":"PaymentMethod.js","sources":["../../../../../src/components/Employee/PaymentMethod/onboarding/PaymentMethod.tsx"],"sourcesContent":["import { createMachine } from 'robot3'\nimport { useMemo } from 'react'\nimport type { OnboardingContextInterface } from '../../OnboardingFlow/OnboardingFlowComponents'\nimport type { PaymentMethodContextInterface } from './PaymentMethodComponents'\nimport { ListViewContextual } from './PaymentMethodComponents'\nimport { paymentMethodStateMachine } from './paymentMethodStateMachine'\nimport { Flow } from '@/components/Flow/Flow'\nimport { useFlow } from '@/components/Flow/useFlow'\nimport { BaseBoundaries, type BaseComponentInterface } from '@/components/Base'\nimport { useComponentDictionary } from '@/i18n/I18n'\nimport { useI18n } from '@/i18n'\nimport { ensureRequired } from '@/helpers/ensureRequired'\n\n/**\n * Props for {@link PaymentMethod}.\n *\n * @public\n */\nexport interface PaymentMethodProps extends BaseComponentInterface<'Employee.PaymentMethod'> {\n  /** The associated employee identifier. */\n  employeeId: string\n  /** Not used — onboarding payment method editing operates on live data. */\n  defaultValues?: never\n  /** Whether the current viewer is an admin. Defaults to `false`. */\n  isAdmin?: boolean\n}\n\nfunction PaymentMethodFlow({\n  employeeId,\n  isAdmin = false,\n  onEvent,\n  LoaderComponent,\n}: PaymentMethodProps) {\n  useI18n('Employee.PaymentMethod')\n\n  const machine = useMemo(\n    () =>\n      createMachine(\n        'list',\n        paymentMethodStateMachine,\n        (initialContext: PaymentMethodContextInterface) => ({\n          ...initialContext,\n          component: ListViewContextual,\n          employeeId,\n          isAdmin,\n          LoaderComponent,\n        }),\n      ),\n    [employeeId, isAdmin, LoaderComponent],\n  )\n\n  return <Flow machine={machine} onEvent={onEvent} />\n}\n\n/**\n * Onboarding step for setting up an employee's payment method.\n *\n * @remarks\n * Lets the employee (or admin acting on their behalf) choose between Direct\n * Deposit and Check, add bank accounts, and configure split-paycheck\n * allocations across multiple accounts.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `employee/paymentMethod/updated` | Fired after the payment method is saved | The updated payment method |\n * | `employee/paymentMethod/done` | Fired when payment method setup is complete and the parent flow can advance | — |\n * | `employee/bankAccount/created` | Fired after a bank account is successfully added | The created bank account |\n * | `employee/bankAccount/deleted` | Fired after a bank account is successfully removed | — |\n *\n * @param props - See {@link PaymentMethodProps}.\n * @returns The payment method onboarding step.\n * @public\n *\n * @example\n * ```tsx\n * import { EmployeeOnboarding } from '@gusto/embedded-react-sdk'\n *\n * function MyComponent() {\n *   return (\n *     <EmployeeOnboarding.PaymentMethod\n *       employeeId=\"4b3f930f-82cd-48a8-b797-798686e12e5e\"\n *       onEvent={() => {}}\n *     />\n *   )\n * }\n * ```\n */\nexport function PaymentMethod({\n  dictionary,\n  FallbackComponent,\n  LoaderComponent,\n  ...props\n}: PaymentMethodProps) {\n  useComponentDictionary('Employee.PaymentMethod', dictionary)\n  return (\n    <BaseBoundaries\n      componentName=\"Employee.PaymentMethod\"\n      FallbackComponent={FallbackComponent}\n      LoaderComponent={LoaderComponent}\n    >\n      <PaymentMethodFlow LoaderComponent={LoaderComponent} {...props} />\n    </BaseBoundaries>\n  )\n}\n\n/** @internal */\nexport function PaymentMethodContextual() {\n  const { employeeId, onEvent, isAdmin, LoaderComponent } = useFlow<OnboardingContextInterface>()\n  return (\n    <PaymentMethod\n      employeeId={ensureRequired(employeeId)}\n      onEvent={onEvent}\n      isAdmin={isAdmin}\n      LoaderComponent={LoaderComponent}\n    />\n  )\n}\n"],"names":["PaymentMethodFlow","employeeId","isAdmin","onEvent","LoaderComponent","useI18n","machine","useMemo","createMachine","paymentMethodStateMachine","initialContext","ListViewContextual","jsx","Flow","PaymentMethod","dictionary","FallbackComponent","props","useComponentDictionary","BaseBoundaries","PaymentMethodContextual","useFlow","ensureRequired"],"mappings":";;;;;;;;;;;AA2BA,SAASA,EAAkB;AAAA,EACzB,YAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,SAAAC;AAAA,EACA,iBAAAC;AACF,GAAuB;AACrB,EAAAC,EAAQ,wBAAwB;AAEhC,QAAMC,IAAUC;AAAA,IACd,MACEC;AAAA,MACE;AAAA,MACAC;AAAA,MACA,CAACC,OAAmD;AAAA,QAClD,GAAGA;AAAA,QACH,WAAWC;AAAA,QACX,YAAAV;AAAA,QACA,SAAAC;AAAA,QACA,iBAAAE;AAAA,MAAA;AAAA,IACF;AAAA,IAEJ,CAACH,GAAYC,GAASE,CAAe;AAAA,EAAA;AAGvC,SAAO,gBAAAQ,EAACC,GAAA,EAAK,SAAAP,GAAkB,SAAAH,EAAA,CAAkB;AACnD;AAoCO,SAASW,EAAc;AAAA,EAC5B,YAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,iBAAAZ;AAAA,EACA,GAAGa;AACL,GAAuB;AACrB,SAAAC,EAAuB,0BAA0BH,CAAU,GAEzD,gBAAAH;AAAA,IAACO;AAAA,IAAA;AAAA,MACC,eAAc;AAAA,MACd,mBAAAH;AAAA,MACA,iBAAAZ;AAAA,MAEA,UAAA,gBAAAQ,EAACZ,GAAA,EAAkB,iBAAAI,GAAmC,GAAGa,EAAA,CAAO;AAAA,IAAA;AAAA,EAAA;AAGtE;AAGO,SAASG,IAA0B;AACxC,QAAM,EAAE,YAAAnB,GAAY,SAAAE,GAAS,SAAAD,GAAS,iBAAAE,EAAA,IAAoBiB,EAAA;AAC1D,SACE,gBAAAT;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,YAAYQ,EAAerB,CAAU;AAAA,MACrC,SAAAE;AAAA,MACA,SAAAD;AAAA,MACA,iBAAAE;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"PaymentMethod.js","sources":["../../../../../src/components/Employee/PaymentMethod/onboarding/PaymentMethod.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport type { OnboardingContextInterface } from '../../OnboardingFlow/OnboardingFlowComponents'\nimport type { PaymentMethodContextInterface } from './PaymentMethodComponents'\nimport { ListViewContextual } from './PaymentMethodComponents'\nimport { paymentMethodStateMachine } from './paymentMethodStateMachine'\nimport { createMachine } from '@/lib/state-machine'\nimport { Flow } from '@/components/Flow/Flow'\nimport { useFlow } from '@/components/Flow/useFlow'\nimport { BaseBoundaries, type BaseComponentInterface } from '@/components/Base'\nimport { useComponentDictionary } from '@/i18n/I18n'\nimport { useI18n } from '@/i18n'\nimport { ensureRequired } from '@/helpers/ensureRequired'\n\n/**\n * Props for {@link PaymentMethod}.\n *\n * @public\n */\nexport interface PaymentMethodProps extends BaseComponentInterface<'Employee.PaymentMethod'> {\n  /** The associated employee identifier. */\n  employeeId: string\n  /** Not used — onboarding payment method editing operates on live data. */\n  defaultValues?: never\n  /** Whether the current viewer is an admin. Defaults to `false`. */\n  isAdmin?: boolean\n}\n\nfunction PaymentMethodFlow({\n  employeeId,\n  isAdmin = false,\n  onEvent,\n  LoaderComponent,\n}: PaymentMethodProps) {\n  useI18n('Employee.PaymentMethod')\n\n  const machine = useMemo(\n    () =>\n      createMachine(\n        'list',\n        paymentMethodStateMachine,\n        (initialContext: PaymentMethodContextInterface) => ({\n          ...initialContext,\n          component: ListViewContextual,\n          employeeId,\n          isAdmin,\n          LoaderComponent,\n        }),\n      ),\n    [employeeId, isAdmin, LoaderComponent],\n  )\n\n  return <Flow machine={machine} onEvent={onEvent} />\n}\n\n/**\n * Onboarding step for setting up an employee's payment method.\n *\n * @remarks\n * Lets the employee (or admin acting on their behalf) choose between Direct\n * Deposit and Check, add bank accounts, and configure split-paycheck\n * allocations across multiple accounts.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `employee/paymentMethod/updated` | Fired after the payment method is saved | The updated payment method |\n * | `employee/paymentMethod/done` | Fired when payment method setup is complete and the parent flow can advance | — |\n * | `employee/bankAccount/created` | Fired after a bank account is successfully added | The created bank account |\n * | `employee/bankAccount/deleted` | Fired after a bank account is successfully removed | — |\n *\n * @param props - See {@link PaymentMethodProps}.\n * @returns The payment method onboarding step.\n * @public\n *\n * @example\n * ```tsx\n * import { EmployeeOnboarding } from '@gusto/embedded-react-sdk'\n *\n * function MyComponent() {\n *   return (\n *     <EmployeeOnboarding.PaymentMethod\n *       employeeId=\"4b3f930f-82cd-48a8-b797-798686e12e5e\"\n *       onEvent={() => {}}\n *     />\n *   )\n * }\n * ```\n */\nexport function PaymentMethod({\n  dictionary,\n  FallbackComponent,\n  LoaderComponent,\n  ...props\n}: PaymentMethodProps) {\n  useComponentDictionary('Employee.PaymentMethod', dictionary)\n  return (\n    <BaseBoundaries\n      componentName=\"Employee.PaymentMethod\"\n      FallbackComponent={FallbackComponent}\n      LoaderComponent={LoaderComponent}\n    >\n      <PaymentMethodFlow LoaderComponent={LoaderComponent} {...props} />\n    </BaseBoundaries>\n  )\n}\n\n/** @internal */\nexport function PaymentMethodContextual() {\n  const { employeeId, onEvent, isAdmin, LoaderComponent } = useFlow<OnboardingContextInterface>()\n  return (\n    <PaymentMethod\n      employeeId={ensureRequired(employeeId)}\n      onEvent={onEvent}\n      isAdmin={isAdmin}\n      LoaderComponent={LoaderComponent}\n    />\n  )\n}\n"],"names":["PaymentMethodFlow","employeeId","isAdmin","onEvent","LoaderComponent","useI18n","machine","useMemo","createMachine","paymentMethodStateMachine","initialContext","ListViewContextual","jsx","Flow","PaymentMethod","dictionary","FallbackComponent","props","useComponentDictionary","BaseBoundaries","PaymentMethodContextual","useFlow","ensureRequired"],"mappings":";;;;;;;;;;;AA2BA,SAASA,EAAkB;AAAA,EACzB,YAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,SAAAC;AAAA,EACA,iBAAAC;AACF,GAAuB;AACrB,EAAAC,EAAQ,wBAAwB;AAEhC,QAAMC,IAAUC;AAAA,IACd,MACEC;AAAA,MACE;AAAA,MACAC;AAAA,MACA,CAACC,OAAmD;AAAA,QAClD,GAAGA;AAAA,QACH,WAAWC;AAAA,QACX,YAAAV;AAAA,QACA,SAAAC;AAAA,QACA,iBAAAE;AAAA,MAAA;AAAA,IACF;AAAA,IAEJ,CAACH,GAAYC,GAASE,CAAe;AAAA,EAAA;AAGvC,SAAO,gBAAAQ,EAACC,GAAA,EAAK,SAAAP,GAAkB,SAAAH,EAAA,CAAkB;AACnD;AAoCO,SAASW,EAAc;AAAA,EAC5B,YAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,iBAAAZ;AAAA,EACA,GAAGa;AACL,GAAuB;AACrB,SAAAC,EAAuB,0BAA0BH,CAAU,GAEzD,gBAAAH;AAAA,IAACO;AAAA,IAAA;AAAA,MACC,eAAc;AAAA,MACd,mBAAAH;AAAA,MACA,iBAAAZ;AAAA,MAEA,UAAA,gBAAAQ,EAACZ,GAAA,EAAkB,iBAAAI,GAAmC,GAAGa,EAAA,CAAO;AAAA,IAAA;AAAA,EAAA;AAGtE;AAGO,SAASG,IAA0B;AACxC,QAAM,EAAE,YAAAnB,GAAY,SAAAE,GAAS,SAAAD,GAAS,iBAAAE,EAAA,IAAoBiB,EAAA;AAC1D,SACE,gBAAAT;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,YAAYQ,EAAerB,CAAU;AAAA,MACrC,SAAAE;AAAA,MACA,SAAAD;AAAA,MACA,iBAAAE;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Employee/PaymentMethod/onboarding/paymentMethodStateMachine.d.ts

@@ -1,6 +1,6 @@
 /** @internal */
 export declare const paymentMethodStateMachine: {
-    list: import('robot3').MachineState<any>;
-    add: import('robot3').MachineState<any>;
-    split: import('robot3').MachineState<any>;
+    list: import('../../../../lib/state-machine').StateDefinition;
+    add: import('../../../../lib/state-machine').StateDefinition;
+    split: import('../../../../lib/state-machine').StateDefinition;
 };