@gusto/embedded-react-sdk 0.41.0 → 0.43.0

package/dist/components/Employee/WorkAddress/management/useWorkAddressManagement.js

@@ -0,0 +1,143 @@
+import { useState as N, useMemo as g } from "react";
+import { useEmployeeAddressesDeleteWorkAddressMutation as T } from "@gusto/embedded-api/react-query/employeeAddressesDeleteWorkAddress";
+import { useEmployeeAddressesGetWorkAddresses as C } from "@gusto/embedded-api/react-query/employeeAddressesGetWorkAddresses";
+import { useEmployeesGet as K } from "@gusto/embedded-api/react-query/employeesGet";
+import { useBaseSubmit as O } from "../../../Base/useBaseSubmit.js";
+import { useWorkAddressForm as W } from "../../Profile/shared/useWorkAddressForm/useWorkAddressForm.js";
+import { composeErrorHandler as Q } from "../../../../partner-hook-utils/composeErrorHandler.js";
+import { firstLastName as q } from "../../../../helpers/formattedStrings.js";
+import { normalizeToSDKError as G, SDKInternalError as n } from "../../../../types/sdkError.js";
+import { componentEvents as x } from "../../../../shared/constants.js";
+function te(e) {
+  return e.isLoading ? !1 : !e.status.isEmployeeError;
+}
+function z(e, d) {
+  if (e.isLoading)
+    throw new n("Edit work address form is still loading");
+  if (d.isLoading)
+    throw new n("Change work address form is still loading");
+  return {
+    editWorkAddressForm: e,
+    changeWorkAddressForm: d
+  };
+}
+function ie({
+  employeeId: e,
+  onEvent: d
+}) {
+  const {
+    baseSubmitHandler: h,
+    error: D,
+    setError: F
+  } = O("Employee.WorkAddress.Management"), l = T(), [t, S] = N(void 0), o = K({ employeeId: e }, { enabled: !!e }), a = o.data?.employee?.companyUuid, f = C(
+    { employeeId: e },
+    { enabled: !!e && !!a }
+  ), r = f.data?.employeeWorkAddressesList, b = g(() => r?.length ? r.find((s) => s.active) ?? r[0] ?? null : null, [r]), v = t ?? b?.uuid, E = g(() => {
+    if (!(!t || !r))
+      return r.find((s) => s.uuid === t);
+  }, [t, r]), R = E ? E.active !== !0 : !1, m = W({
+    companyId: a,
+    employeeId: e,
+    workAddressUuid: v,
+    withEffectiveDateField: R
+  }), u = W({
+    companyId: a,
+    employeeId: e,
+    withEffectiveDateField: !0
+  }), p = g(() => {
+    const s = o.data?.employee;
+    return s ? q({
+      first_name: s.firstName,
+      last_name: s.lastName
+    }).trim() : "";
+  }, [o.data?.employee]), y = !!o.data?.employee && !a, i = Q(
+    [
+      o,
+      f,
+      m,
+      u,
+      ...y ? [
+        {
+          errorHandling: {
+            errors: [
+              G(
+                new n(
+                  "Employee record is missing companyUuid, which is required to load work address locations."
+                )
+              )
+            ],
+            retryQueries: () => {
+            },
+            clearSubmitError: () => {
+            }
+          }
+        }
+      ] : []
+    ],
+    { submitError: D, setSubmitError: F }
+  ), k = {
+    setEditTargetUuid: S,
+    confirmDeleteWorkAddress: async (s) => {
+      const _ = r?.find((c) => c.uuid === s) ?? null;
+      let w = !1;
+      return await h(
+        { workAddressUuid: s, snapshot: _ },
+        async ({ workAddressUuid: c, snapshot: A }) => {
+          const L = r?.find((H) => H.uuid === c);
+          if (!L)
+            throw new n("Work address not found");
+          if (L.active === !0)
+            throw new n("Cannot delete the active work address");
+          await l.mutateAsync({
+            request: { workAddressUuid: c }
+          }), w = !0, A && d(x.EMPLOYEE_WORK_ADDRESS_DELETED, A);
+        }
+      ), w;
+    }
+  }, M = {
+    employeeDisplayName: p,
+    employeeWorkAddresses: r,
+    editTargetUuid: t,
+    editWorkAddressForm: m,
+    changeWorkAddressForm: u
+  };
+  if (o.isLoading)
+    return { isLoading: !0, errorHandling: i };
+  if (o.isError || y)
+    return {
+      isLoading: !1,
+      data: M,
+      status: {
+        isDeletePending: l.isPending,
+        isEmployeeError: !0
+      },
+      errorHandling: i,
+      actions: k
+    };
+  if (f.isLoading)
+    return { isLoading: !0, errorHandling: i };
+  if (m.isLoading || u.isLoading)
+    return { isLoading: !0, errorHandling: i };
+  const { editWorkAddressForm: U, changeWorkAddressForm: P } = z(m, u);
+  return {
+    isLoading: !1,
+    data: {
+      employeeDisplayName: p,
+      employeeWorkAddresses: r,
+      editTargetUuid: t,
+      editWorkAddressForm: U,
+      changeWorkAddressForm: P
+    },
+    status: {
+      isDeletePending: l.isPending,
+      isEmployeeError: !1
+    },
+    errorHandling: i,
+    actions: k
+  };
+}
+export {
+  te as isUseWorkAddressManagementSuccess,
+  ie as useWorkAddressManagement
+};
+//# sourceMappingURL=useWorkAddressManagement.js.map

package/dist/components/Employee/WorkAddress/management/useWorkAddressManagement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWorkAddressManagement.js","sources":["../../../../../src/components/Employee/WorkAddress/management/useWorkAddressManagement.tsx"],"sourcesContent":["import { useMemo, useState } from 'react'\nimport type { EmployeeWorkAddress } from '@gusto/embedded-api/models/components/employeeworkaddress'\nimport { useEmployeeAddressesDeleteWorkAddressMutation } from '@gusto/embedded-api/react-query/employeeAddressesDeleteWorkAddress'\nimport { useEmployeeAddressesGetWorkAddresses } from '@gusto/embedded-api/react-query/employeeAddressesGetWorkAddresses'\nimport { useEmployeesGet } from '@gusto/embedded-api/react-query/employeesGet'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport { useBaseSubmit } from '@/components/Base/useBaseSubmit'\nimport { useWorkAddressForm } from '@/components/Employee/Profile/shared/useWorkAddressForm'\nimport type {\n  UseWorkAddressFormReady,\n  UseWorkAddressFormResult,\n} from '@/components/Employee/Profile/shared/useWorkAddressForm'\nimport { composeErrorHandler } from '@/partner-hook-utils/composeErrorHandler'\nimport type {\n  BaseHookReady,\n  HookErrorHandling,\n  HookLoadingResult,\n} from '@/partner-hook-utils/types'\nimport { firstLastName } from '@/helpers/formattedStrings'\nimport { normalizeToSDKError, SDKInternalError } from '@/types/sdkError'\nimport { componentEvents, type EventType } from '@/shared/constants'\n\nexport interface UseWorkAddressManagementParams {\n  employeeId: string\n  onEvent: OnEventType<EventType, unknown>\n}\n\nexport interface UseWorkAddressManagementDataPendingForms extends Record<string, unknown> {\n  employeeDisplayName: string\n  employeeWorkAddresses: EmployeeWorkAddress[] | undefined\n  editTargetUuid: string | undefined\n  editWorkAddressForm: UseWorkAddressFormResult\n  changeWorkAddressForm: UseWorkAddressFormResult\n}\n\nexport interface UseWorkAddressManagementDataReady extends Record<string, unknown> {\n  employeeDisplayName: string\n  employeeWorkAddresses: EmployeeWorkAddress[] | undefined\n  editTargetUuid: string | undefined\n  editWorkAddressForm: UseWorkAddressFormReady\n  changeWorkAddressForm: UseWorkAddressFormReady\n}\n\nexport interface UseWorkAddressManagementStatusEmployeeError extends Record<string, unknown> {\n  isDeletePending: boolean\n  isEmployeeError: true\n}\n\nexport interface UseWorkAddressManagementStatusSuccess extends Record<string, unknown> {\n  isDeletePending: boolean\n  isEmployeeError: false\n}\n\nexport interface UseWorkAddressManagementActions {\n  setEditTargetUuid: (workAddressUuid: string | undefined) => void\n  confirmDeleteWorkAddress: (workAddressUuid: string) => Promise<boolean>\n}\n\nexport interface UseWorkAddressManagementReadyEmployeeError extends BaseHookReady<\n  UseWorkAddressManagementDataPendingForms,\n  UseWorkAddressManagementStatusEmployeeError\n> {\n  actions: UseWorkAddressManagementActions\n}\n\nexport interface UseWorkAddressManagementReadySuccess extends BaseHookReady<\n  UseWorkAddressManagementDataReady,\n  UseWorkAddressManagementStatusSuccess\n> {\n  actions: UseWorkAddressManagementActions\n}\n\nexport type UseWorkAddressManagementReady =\n  | UseWorkAddressManagementReadyEmployeeError\n  | UseWorkAddressManagementReadySuccess\n\nexport type UseWorkAddressManagementResult = HookLoadingResult | UseWorkAddressManagementReady\n\nexport function isUseWorkAddressManagementSuccess(\n  value: UseWorkAddressManagementResult,\n): value is UseWorkAddressManagementReadySuccess {\n  if (value.isLoading) {\n    return false\n  }\n  return !value.status.isEmployeeError\n}\n\nfunction workAddressFormsReady(\n  editWorkAddressForm: UseWorkAddressFormResult,\n  changeWorkAddressForm: UseWorkAddressFormResult,\n): Pick<UseWorkAddressManagementDataReady, 'editWorkAddressForm' | 'changeWorkAddressForm'> {\n  if (editWorkAddressForm.isLoading) {\n    throw new SDKInternalError('Edit work address form is still loading')\n  }\n  if (changeWorkAddressForm.isLoading) {\n    throw new SDKInternalError('Change work address form is still loading')\n  }\n  return {\n    editWorkAddressForm,\n    changeWorkAddressForm,\n  }\n}\n\nexport function useWorkAddressManagement({\n  employeeId,\n  onEvent,\n}: UseWorkAddressManagementParams): UseWorkAddressManagementResult {\n  const {\n    baseSubmitHandler,\n    error: rootSubmitError,\n    setError: setRootSubmitError,\n  } = useBaseSubmit('Employee.WorkAddress.Management')\n  const deleteWorkAddressMutation = useEmployeeAddressesDeleteWorkAddressMutation()\n  const [editTargetUuid, setEditTargetUuid] = useState<string | undefined>(undefined)\n\n  const employeeQuery = useEmployeesGet({ employeeId }, { enabled: !!employeeId })\n  const companyId = employeeQuery.data?.employee?.companyUuid\n\n  const workAddressesQuery = useEmployeeAddressesGetWorkAddresses(\n    { employeeId },\n    { enabled: !!employeeId && !!companyId },\n  )\n\n  const employeeWorkAddresses = workAddressesQuery.data?.employeeWorkAddressesList\n\n  const currentWorkAddress = useMemo<EmployeeWorkAddress | null>(() => {\n    if (!employeeWorkAddresses?.length) {\n      return null\n    }\n    return employeeWorkAddresses.find(w => w.active) ?? employeeWorkAddresses[0] ?? null\n  }, [employeeWorkAddresses])\n\n  const workAddressUuidForEdit = editTargetUuid ?? currentWorkAddress?.uuid\n\n  const editInactiveRow = useMemo(() => {\n    if (!editTargetUuid || !employeeWorkAddresses) {\n      return undefined\n    }\n    return employeeWorkAddresses.find(w => w.uuid === editTargetUuid)\n  }, [editTargetUuid, employeeWorkAddresses])\n\n  const withEffectiveDateOnEdit = editInactiveRow ? editInactiveRow.active !== true : false\n\n  const editWorkAddressForm = useWorkAddressForm({\n    companyId,\n    employeeId,\n    workAddressUuid: workAddressUuidForEdit,\n    withEffectiveDateField: withEffectiveDateOnEdit,\n  })\n\n  const changeWorkAddressForm = useWorkAddressForm({\n    companyId,\n    employeeId,\n    withEffectiveDateField: true,\n  })\n\n  const employeeDisplayName = useMemo(() => {\n    const employee = employeeQuery.data?.employee\n    if (!employee) {\n      return ''\n    }\n    return firstLastName({\n      first_name: employee.firstName,\n      last_name: employee.lastName,\n    }).trim()\n  }, [employeeQuery.data?.employee])\n\n  const isMissingCompany = !!employeeQuery.data?.employee && !companyId\n\n  const errorHandling: HookErrorHandling = composeErrorHandler(\n    [\n      employeeQuery,\n      workAddressesQuery,\n      editWorkAddressForm,\n      changeWorkAddressForm,\n      ...(isMissingCompany\n        ? [\n            {\n              errorHandling: {\n                errors: [\n                  normalizeToSDKError(\n                    new SDKInternalError(\n                      'Employee record is missing companyUuid, which is required to load work address locations.',\n                    ),\n                  ),\n                ],\n                retryQueries: () => {},\n                clearSubmitError: () => {},\n              },\n            },\n          ]\n        : []),\n    ],\n    { submitError: rootSubmitError, setSubmitError: setRootSubmitError },\n  )\n\n  const confirmDeleteWorkAddress = async (workAddressUuid: string): Promise<boolean> => {\n    const snapshot = employeeWorkAddresses?.find(w => w.uuid === workAddressUuid) ?? null\n\n    let succeeded = false\n    await baseSubmitHandler(\n      { workAddressUuid, snapshot },\n      async ({ workAddressUuid: uuid, snapshot: snap }) => {\n        const target = employeeWorkAddresses?.find(w => w.uuid === uuid)\n        if (!target) {\n          throw new SDKInternalError('Work address not found')\n        }\n        if (target.active === true) {\n          throw new SDKInternalError('Cannot delete the active work address')\n        }\n\n        await deleteWorkAddressMutation.mutateAsync({\n          request: { workAddressUuid: uuid },\n        })\n        succeeded = true\n        if (snap) {\n          onEvent(componentEvents.EMPLOYEE_WORK_ADDRESS_DELETED, snap)\n        }\n      },\n    )\n    return succeeded\n  }\n\n  const actions: UseWorkAddressManagementActions = {\n    setEditTargetUuid,\n    confirmDeleteWorkAddress,\n  }\n\n  const dataPayloadPendingForms: UseWorkAddressManagementDataPendingForms = {\n    employeeDisplayName,\n    employeeWorkAddresses,\n    editTargetUuid,\n    editWorkAddressForm,\n    changeWorkAddressForm,\n  }\n\n  if (employeeQuery.isLoading) {\n    return { isLoading: true, errorHandling }\n  }\n\n  if (employeeQuery.isError || isMissingCompany) {\n    return {\n      isLoading: false,\n      data: dataPayloadPendingForms,\n      status: {\n        isDeletePending: deleteWorkAddressMutation.isPending,\n        isEmployeeError: true,\n      },\n      errorHandling,\n      actions,\n    }\n  }\n\n  if (workAddressesQuery.isLoading) {\n    return { isLoading: true, errorHandling }\n  }\n\n  const isFormsLoading = editWorkAddressForm.isLoading || changeWorkAddressForm.isLoading\n  if (isFormsLoading) {\n    return { isLoading: true, errorHandling }\n  }\n\n  const { editWorkAddressForm: editReady, changeWorkAddressForm: changeReady } =\n    workAddressFormsReady(editWorkAddressForm, changeWorkAddressForm)\n\n  const dataReady: UseWorkAddressManagementDataReady = {\n    employeeDisplayName,\n    employeeWorkAddresses,\n    editTargetUuid,\n    editWorkAddressForm: editReady,\n    changeWorkAddressForm: changeReady,\n  }\n\n  return {\n    isLoading: false,\n    data: dataReady,\n    status: {\n      isDeletePending: deleteWorkAddressMutation.isPending,\n      isEmployeeError: false,\n    },\n    errorHandling,\n    actions,\n  }\n}\n"],"names":["isUseWorkAddressManagementSuccess","value","workAddressFormsReady","editWorkAddressForm","changeWorkAddressForm","SDKInternalError","useWorkAddressManagement","employeeId","onEvent","baseSubmitHandler","rootSubmitError","setRootSubmitError","useBaseSubmit","deleteWorkAddressMutation","useEmployeeAddressesDeleteWorkAddressMutation","editTargetUuid","setEditTargetUuid","useState","employeeQuery","useEmployeesGet","companyId","workAddressesQuery","useEmployeeAddressesGetWorkAddresses","employeeWorkAddresses","currentWorkAddress","useMemo","w","workAddressUuidForEdit","editInactiveRow","withEffectiveDateOnEdit","useWorkAddressForm","employeeDisplayName","employee","firstLastName","isMissingCompany","errorHandling","composeErrorHandler","normalizeToSDKError","actions","workAddressUuid","snapshot","succeeded","uuid","snap","target","componentEvents","dataPayloadPendingForms","editReady","changeReady"],"mappings":"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"}

package/dist/components/Employee/exports/employeeManagement.d.ts

@@ -1,6 +1,8 @@
-export { ManagementEmployeeList as EmployeeList } from '../employee-list/management/ManagementEmployeeList';
+export { ManagementEmployeeList as EmployeeList } from '../EmployeeList/management/ManagementEmployeeList';
 export { EmployeeDocuments } from '../EmployeeDocuments';
 export { DashboardFlow } from '../Dashboard';
+export { WorkAddress } from '../WorkAddress/management/WorkAddress';
+export type { WorkAddressProps } from '../WorkAddress/management/WorkAddress';
 export { TerminateEmployee } from '../Terminations/TerminateEmployee/TerminateEmployee';
 export { TerminationSummary } from '../Terminations/TerminationSummary/TerminationSummary';
 export { TerminationFlow } from '../Terminations/TerminationFlow/TerminationFlow';

package/dist/components/Employee/exports/employeeManagement.js

@@ -1,15 +1,17 @@
-import { ManagementEmployeeList as m } from "../employee-list/management/ManagementEmployeeList.js";
-import { TerminateEmployee as t } from "../Terminations/TerminateEmployee/TerminateEmployee.js";
-import { TerminationSummary as a } from "../Terminations/TerminationSummary/TerminationSummary.js";
-import { TerminationFlow as i } from "../Terminations/TerminationFlow/TerminationFlow.js";
+import { ManagementEmployeeList as r } from "../EmployeeList/management/ManagementEmployeeList.js";
+import { WorkAddress as t } from "../WorkAddress/management/WorkAddress.js";
+import { TerminateEmployee as a } from "../Terminations/TerminateEmployee/TerminateEmployee.js";
+import { TerminationSummary as f } from "../Terminations/TerminationSummary/TerminationSummary.js";
+import { TerminationFlow as s } from "../Terminations/TerminationFlow/TerminationFlow.js";
 import { DashboardFlow as l } from "../Dashboard/DashboardFlow.js";
-import { EmployeeDocuments as s } from "../EmployeeDocuments/EmployeeDocuments.js";
+import { EmployeeDocuments as E } from "../EmployeeDocuments/EmployeeDocuments.js";
 export {
   l as DashboardFlow,
-  s as EmployeeDocuments,
-  m as EmployeeList,
-  t as TerminateEmployee,
-  i as TerminationFlow,
-  a as TerminationSummary
+  E as EmployeeDocuments,
+  r as EmployeeList,
+  a as TerminateEmployee,
+  s as TerminationFlow,
+  f as TerminationSummary,
+  t as WorkAddress
 };
 //# sourceMappingURL=employeeManagement.js.map

package/dist/components/Employee/exports/employeeManagement.js.map

@@ -1 +1 @@
-{"version":3,"file":"employeeManagement.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"employeeManagement.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/components/Employee/exports/employeeOnboarding.d.ts

@@ -1,6 +1,6 @@
 export { OnboardingFlow } from '../OnboardingFlow/OnboardingFlow';
 export { SelfOnboardingFlow } from '../SelfOnboardingFlow/SelfOnboardingFlow';
-export { EmployeeList } from '../employee-list/onboarding/EmployeeList';
+export { EmployeeList } from '../EmployeeList/onboarding/EmployeeList';
 export { OnboardingSummary } from '../OnboardingSummary';
 export { Landing } from '../Landing';
 export { DocumentSigner } from '../DocumentSigner';

package/dist/components/Employee/exports/employeeOnboarding.js

@@ -1,6 +1,6 @@
 import { OnboardingFlow as e } from "../OnboardingFlow/OnboardingFlow.js";
 import { SelfOnboardingFlow as m } from "../SelfOnboardingFlow/SelfOnboardingFlow.js";
-import { EmployeeList as x } from "../employee-list/onboarding/EmployeeList.js";
+import { EmployeeList as x } from "../EmployeeList/onboarding/EmployeeList.js";
 import { Compensation as n } from "../Compensation/Compensation.js";
 import { Deductions as a } from "../Deductions/Deductions.js";
 import { DocumentSigner as d } from "../DocumentSigner/DocumentSigner.js";

package/dist/components/Employee/index.d.ts

@@ -1,5 +1,5 @@
 import "./types/i18next.d.ts"
-export { EmployeeList } from './employee-list/onboarding/EmployeeList';
+export { EmployeeList } from './EmployeeList/onboarding/EmployeeList';
 export { Deductions } from './Deductions';
 export { OnboardingSummary } from './OnboardingSummary';
 export { Profile } from './Profile';
@@ -14,6 +14,8 @@ export { SelfOnboardingFlow } from './SelfOnboardingFlow/SelfOnboardingFlow';
 export { EmployeeDocuments } from './EmployeeDocuments';
 export { DashboardFlow } from './Dashboard';
 export type { DashboardFlowProps } from './Dashboard';
+export { HomeAddress } from './HomeAddress/management/HomeAddress';
+export type { HomeAddressProps } from './HomeAddress/management/HomeAddress';
 export { EmploymentEligibility } from './DocumentSigner/EmploymentEligibility';
 export type { EmploymentEligibilityProps } from './DocumentSigner/EmploymentEligibility';
 export { TerminateEmployee } from './Terminations/TerminateEmployee/TerminateEmployee';
@@ -23,4 +25,6 @@ export type { TerminationSummaryProps } from './Terminations/TerminationSummary/
 export { TerminationFlow } from './Terminations/TerminationFlow/TerminationFlow';
 export type { TerminationFlowProps } from './Terminations/TerminationFlow/TerminationFlowComponents';
 export type { PayrollOption } from './Terminations/types';
+export { WorkAddress } from './WorkAddress/management/WorkAddress';
+export type { WorkAddressProps } from './WorkAddress/management/WorkAddress';
 export { Taxes } from './Taxes';

package/dist/components/Employee/index.js

@@ -1,41 +1,45 @@
-import { EmployeeList as e } from "./employee-list/onboarding/EmployeeList.js";
+import { EmployeeList as e } from "./EmployeeList/onboarding/EmployeeList.js";
 import { OnboardingFlow as t } from "./OnboardingFlow/OnboardingFlow.js";
 import { SelfOnboardingFlow as x } from "./SelfOnboardingFlow/SelfOnboardingFlow.js";
-import { TerminateEmployee as n } from "./Terminations/TerminateEmployee/TerminateEmployee.js";
-import { TerminationSummary as i } from "./Terminations/TerminationSummary/TerminationSummary.js";
-import { TerminationFlow as d } from "./Terminations/TerminationFlow/TerminationFlow.js";
-import { Compensation as y } from "./Compensation/Compensation.js";
-import { DashboardFlow as T } from "./Dashboard/DashboardFlow.js";
-import { Deductions as u } from "./Deductions/Deductions.js";
-import { DocumentSigner as F } from "./DocumentSigner/DocumentSigner.js";
-import { EmployeeDocuments as w } from "./EmployeeDocuments/EmployeeDocuments.js";
-import { EmploymentEligibility as c } from "./DocumentSigner/EmploymentEligibility/EmploymentEligibility.js";
-import { FederalTaxes as h } from "./FederalTaxes/FederalTaxes.js";
-import { Landing as P } from "./Landing/Landing.js";
-import { OnboardingSummary as M } from "./OnboardingSummary/OnboardingSummary.js";
-import { PaymentMethod as k } from "./PaymentMethod/PaymentMethod.js";
-import { Profile as v } from "./Profile/Profile.js";
-import { StateTaxes as A } from "./StateTaxes/StateTaxes.js";
-import { Taxes as G } from "./Taxes/Taxes.js";
+import { HomeAddress as n } from "./HomeAddress/management/HomeAddress.js";
+import { TerminateEmployee as i } from "./Terminations/TerminateEmployee/TerminateEmployee.js";
+import { TerminationSummary as d } from "./Terminations/TerminationSummary/TerminationSummary.js";
+import { TerminationFlow as y } from "./Terminations/TerminationFlow/TerminationFlow.js";
+import { WorkAddress as T } from "./WorkAddress/management/WorkAddress.js";
+import { Compensation as u } from "./Compensation/Compensation.js";
+import { DashboardFlow as F } from "./Dashboard/DashboardFlow.js";
+import { Deductions as w } from "./Deductions/Deductions.js";
+import { DocumentSigner as c } from "./DocumentSigner/DocumentSigner.js";
+import { EmployeeDocuments as h } from "./EmployeeDocuments/EmployeeDocuments.js";
+import { EmploymentEligibility as L } from "./DocumentSigner/EmploymentEligibility/EmploymentEligibility.js";
+import { FederalTaxes as k } from "./FederalTaxes/FederalTaxes.js";
+import { Landing as H } from "./Landing/Landing.js";
+import { OnboardingSummary as W } from "./OnboardingSummary/OnboardingSummary.js";
+import { PaymentMethod as q } from "./PaymentMethod/PaymentMethod.js";
+import { Profile as z } from "./Profile/Profile.js";
+import { StateTaxes as G } from "./StateTaxes/StateTaxes.js";
+import { Taxes as J } from "./Taxes/Taxes.js";
 export {
-  y as Compensation,
-  T as DashboardFlow,
-  u as Deductions,
-  F as DocumentSigner,
-  w as EmployeeDocuments,
+  u as Compensation,
+  F as DashboardFlow,
+  w as Deductions,
+  c as DocumentSigner,
+  h as EmployeeDocuments,
   e as EmployeeList,
-  c as EmploymentEligibility,
-  h as FederalTaxes,
-  P as Landing,
+  L as EmploymentEligibility,
+  k as FederalTaxes,
+  n as HomeAddress,
+  H as Landing,
   t as OnboardingFlow,
-  M as OnboardingSummary,
-  k as PaymentMethod,
-  v as Profile,
+  W as OnboardingSummary,
+  q as PaymentMethod,
+  z as Profile,
   x as SelfOnboardingFlow,
-  A as StateTaxes,
-  G as Taxes,
-  n as TerminateEmployee,
-  d as TerminationFlow,
-  i as TerminationSummary
+  G as StateTaxes,
+  J as Taxes,
+  i as TerminateEmployee,
+  y as TerminationFlow,
+  d as TerminationSummary,
+  T as WorkAddress
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Flow/Flow.js

@@ -1,63 +1,35 @@
-import { jsx as e, jsxs as u } from "react/jsx-runtime";
-import { useMachine as v } from "react-robot";
-import { useTranslation as w } from "react-i18next";
-import { FlowBreadcrumbs as F } from "../Common/FlowBreadcrumbs/FlowBreadcrumbs.js";
-import { Flex as s, FlexItem as d } from "../Common/Flex/Flex.js";
-import "classnames";
-import { FlowContext as j } from "./useFlow.js";
-import { useComponentContext as E } from "../../contexts/ComponentAdapter/useComponentContext.js";
-const M = ({
-  onEvent: x,
-  machine: f
+import { jsx as n, jsxs as x } from "react/jsx-runtime";
+import { useMachine as h } from "react-robot";
+import { FlowContext as u } from "./useFlow.js";
+import { FlowHeader as v } from "./FlowHeader.js";
+import { Flex as l } from "../Common/Flex/Flex.js";
+const E = ({
+  onEvent: m,
+  machine: s
 }) => {
-  const b = E(), { t: g } = w(), [r, h, c] = v(f, {
-    onEvent: a,
-    component: null,
-    progressBarCta: null
-  }), {
-    progressBarType: l = null,
-    totalSteps: o = null,
-    currentStep: t = null,
-    currentBreadcrumbId: n,
-    breadcrumbs: B = {}
-  } = r.context;
-  function a(i, m) {
-    const p = { type: i, payload: m }, C = h;
-    c.child ? c.child.send(p) : C(p), x(i, m);
+  const [o, d, e] = h(s, {
+    onEvent: p,
+    component: null
+  });
+  function p(r, c) {
+    const i = { type: r, payload: c }, f = d;
+    e.child ? e.child.send(i) : f(i), m(r, c);
   }
-  return /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(
-    j.Provider,
+  const t = o.context.component;
+  return /* @__PURE__ */ n(l, { children: /* @__PURE__ */ n(
+    u.Provider,
     {
       value: {
-        ...r.context
+        ...o.context
       },
-      children: /* @__PURE__ */ u(s, { flexDirection: "column", gap: 32, children: [
-        l === "progress" && t && o && /* @__PURE__ */ e(
-          b.ProgressBar,
-          {
-            totalSteps: o,
-            currentStep: t,
-            label: g("progressBarLabel", { totalSteps: o, currentStep: t }),
-            cta: r.context.progressBarCta
-          }
-        ),
-        l === "breadcrumbs" && /* @__PURE__ */ u(s, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", children: [
-          /* @__PURE__ */ e(d, { flexGrow: 1, children: /* @__PURE__ */ e(
-            F,
-            {
-              breadcrumbs: n ? B[n] ?? [] : [],
-              currentBreadcrumbId: n,
-              onEvent: a
-            }
-          ) }),
-          /* @__PURE__ */ e(d, { children: r.context.progressBarCta && /* @__PURE__ */ e(r.context.progressBarCta, {}) })
-        ] }),
-        r.context.component && /* @__PURE__ */ e(r.context.component, {})
+      children: /* @__PURE__ */ x(l, { flexDirection: "column", gap: 32, children: [
+        /* @__PURE__ */ n(v, {}),
+        t && /* @__PURE__ */ n(t, {})
       ] })
     }
   ) });
 };
 export {
-  M as Flow
+  E as Flow
 };
 //# sourceMappingURL=Flow.js.map

package/dist/components/Flow/Flow.js.map

@@ -1 +1 @@
-{"version":3,"file":"Flow.js","sources":["../../../src/components/Flow/Flow.tsx"],"sourcesContent":["import { useMachine } from 'react-robot'\nimport { type Machine, type SendFunction } from 'robot3'\nimport { useTranslation } from 'react-i18next'\nimport type { OnEventType } from '../Base/useBase'\nimport { FlowBreadcrumbs } from '../Common/FlowBreadcrumbs/FlowBreadcrumbs'\nimport { Flex } from '../Common/Flex'\nimport { FlexItem } from '../Common'\nimport type { FlowContextInterface } from './useFlow'\nimport { FlowContext } from './useFlow'\nimport { type EventType } from '@/shared/constants'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\ntype FlowProps<M extends Machine> = {\n  machine: M\n  onEvent: OnEventType<EventType, unknown>\n}\n\nexport const Flow = <M extends Machine<object, FlowContextInterface>>({\n  onEvent,\n  machine,\n}: FlowProps<M>) => {\n  const Components = useComponentContext()\n  const { t } = useTranslation()\n  const [current, send, service] = useMachine(machine, {\n    onEvent: handleEvent,\n    component: null,\n    progressBarCta: null,\n  })\n\n  const {\n    progressBarType = null,\n    totalSteps = null,\n    currentStep = null,\n    currentBreadcrumbId,\n    breadcrumbs = {},\n  } = current.context\n\n  function handleEvent(type: EventType, data: unknown): void {\n    const event = { type, payload: data }\n    const sendFn = send as SendFunction<string>\n    //When dealing with nested state machine, correct machine needs to recieve an event\n    if (service.child) {\n      ;(service.child.send as SendFunction<string>)(event)\n    } else {\n      sendFn(event)\n    }\n    // Pass event upstream - onEvent can be optional on Flow component\n    onEvent(type, data)\n  }\n\n  return (\n    <Flex>\n      <FlowContext.Provider\n        value={{\n          ...current.context,\n        }}\n      >\n        <Flex flexDirection=\"column\" gap={32}>\n          {progressBarType === 'progress' && currentStep && totalSteps && (\n            <Components.ProgressBar\n              totalSteps={totalSteps}\n              currentStep={currentStep}\n              label={t('progressBarLabel', { totalSteps, currentStep })}\n              cta={current.context.progressBarCta}\n            />\n          )}\n          {progressBarType === 'breadcrumbs' && (\n            <Flex flexDirection=\"row\" justifyContent=\"space-between\" alignItems=\"center\">\n              <FlexItem flexGrow={1}>\n                <FlowBreadcrumbs\n                  breadcrumbs={currentBreadcrumbId ? (breadcrumbs[currentBreadcrumbId] ?? []) : []}\n                  currentBreadcrumbId={currentBreadcrumbId}\n                  onEvent={handleEvent}\n                />\n              </FlexItem>\n              <FlexItem>\n                {current.context.progressBarCta && <current.context.progressBarCta />}\n              </FlexItem>\n            </Flex>\n          )}\n          {current.context.component && <current.context.component />}\n        </Flex>\n      </FlowContext.Provider>\n    </Flex>\n  )\n}\n"],"names":["Flow","onEvent","machine","Components","useComponentContext","t","useTranslation","current","send","service","useMachine","handleEvent","progressBarType","totalSteps","currentStep","currentBreadcrumbId","breadcrumbs","type","data","event","sendFn","Flex","jsx","FlowContext","jsxs","FlexItem","FlowBreadcrumbs"],"mappings":";;;;;;;;AAiBO,MAAMA,IAAO,CAAkD;AAAA,EACpE,SAAAC;AAAA,EACA,SAAAC;AACF,MAAoB;AAClB,QAAMC,IAAaC,EAAA,GACb,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACR,CAACC,GAASC,GAAMC,CAAO,IAAIC,EAAWR,GAAS;AAAA,IACnD,SAASS;AAAA,IACT,WAAW;AAAA,IACX,gBAAgB;AAAA,EAAA,CACjB,GAEK;AAAA,IACJ,iBAAAC,IAAkB;AAAA,IAClB,YAAAC,IAAa;AAAA,IACb,aAAAC,IAAc;AAAA,IACd,qBAAAC;AAAA,IACA,aAAAC,IAAc,CAAA;AAAA,EAAC,IACbT,EAAQ;AAEZ,WAASI,EAAYM,GAAiBC,GAAqB;AACzD,UAAMC,IAAQ,EAAE,MAAAF,GAAM,SAASC,EAAA,GACzBE,IAASZ;AAEf,IAAIC,EAAQ,QACRA,EAAQ,MAAM,KAA8BU,CAAK,IAEnDC,EAAOD,CAAK,GAGdlB,EAAQgB,GAAMC,CAAI;AAAA,EACpB;AAEA,2BACGG,GAAA,EACC,UAAA,gBAAAC;AAAA,IAACC,EAAY;AAAA,IAAZ;AAAA,MACC,OAAO;AAAA,QACL,GAAGhB,EAAQ;AAAA,MAAA;AAAA,MAGb,UAAA,gBAAAiB,EAACH,GAAA,EAAK,eAAc,UAAS,KAAK,IAC/B,UAAA;AAAA,QAAAT,MAAoB,cAAcE,KAAeD,KAChD,gBAAAS;AAAA,UAACnB,EAAW;AAAA,UAAX;AAAA,YACC,YAAAU;AAAA,YACA,aAAAC;AAAA,YACA,OAAOT,EAAE,oBAAoB,EAAE,YAAAQ,GAAY,aAAAC,GAAa;AAAA,YACxD,KAAKP,EAAQ,QAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,QAGxBK,MAAoB,iBACnB,gBAAAY,EAACH,GAAA,EAAK,eAAc,OAAM,gBAAe,iBAAgB,YAAW,UAClE,UAAA;AAAA,UAAA,gBAAAC,EAACG,GAAA,EAAS,UAAU,GAClB,UAAA,gBAAAH;AAAA,YAACI;AAAA,YAAA;AAAA,cACC,aAAaX,IAAuBC,EAAYD,CAAmB,KAAK,CAAA,IAAM,CAAA;AAAA,cAC9E,qBAAAA;AAAA,cACA,SAASJ;AAAA,YAAA;AAAA,UAAA,GAEb;AAAA,UACA,gBAAAW,EAACG,GAAA,EACE,UAAAlB,EAAQ,QAAQ,oCAAmBA,EAAQ,QAAQ,gBAAhB,CAAA,CAA+B,EAAA,CACrE;AAAA,QAAA,GACF;AAAA,QAEDA,EAAQ,QAAQ,+BAAcA,EAAQ,QAAQ,WAAhB,CAAA,CAA0B;AAAA,MAAA,EAAA,CAC3D;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;"}
+{"version":3,"file":"Flow.js","sources":["../../../src/components/Flow/Flow.tsx"],"sourcesContent":["import { useMachine } from 'react-robot'\nimport { type Machine, type SendFunction } from 'robot3'\nimport type { OnEventType } from '../Base/useBase'\nimport { Flex } from '../Common/Flex'\nimport type { FlowContextInterface } from './useFlow'\nimport { FlowContext } from './useFlow'\nimport { FlowHeader } from './FlowHeader'\nimport { type EventType } from '@/shared/constants'\n\ntype FlowProps<M extends Machine> = {\n  machine: M\n  onEvent: OnEventType<EventType, unknown>\n}\n\nexport const Flow = <M extends Machine<object, FlowContextInterface>>({\n  onEvent,\n  machine,\n}: FlowProps<M>) => {\n  const [current, send, service] = useMachine(machine, {\n    onEvent: handleEvent,\n    component: null,\n  })\n\n  function handleEvent(type: EventType, data: unknown): void {\n    const event = { type, payload: data }\n    const sendFn = send as SendFunction<string>\n    //When dealing with nested state machine, correct machine needs to recieve an event\n    if (service.child) {\n      ;(service.child.send as SendFunction<string>)(event)\n    } else {\n      sendFn(event)\n    }\n    // Pass event upstream - onEvent can be optional on Flow component\n    onEvent(type, data)\n  }\n\n  const Component = current.context.component\n\n  return (\n    <Flex>\n      <FlowContext.Provider\n        value={{\n          ...current.context,\n        }}\n      >\n        <Flex flexDirection=\"column\" gap={32}>\n          <FlowHeader />\n          {Component && <Component />}\n        </Flex>\n      </FlowContext.Provider>\n    </Flex>\n  )\n}\n"],"names":["Flow","onEvent","machine","current","send","service","useMachine","handleEvent","type","data","event","sendFn","Component","Flex","jsx","FlowContext","jsxs","FlowHeader"],"mappings":";;;;;AAcO,MAAMA,IAAO,CAAkD;AAAA,EACpE,SAAAC;AAAA,EACA,SAAAC;AACF,MAAoB;AAClB,QAAM,CAACC,GAASC,GAAMC,CAAO,IAAIC,EAAWJ,GAAS;AAAA,IACnD,SAASK;AAAA,IACT,WAAW;AAAA,EAAA,CACZ;AAED,WAASA,EAAYC,GAAiBC,GAAqB;AACzD,UAAMC,IAAQ,EAAE,MAAAF,GAAM,SAASC,EAAA,GACzBE,IAASP;AAEf,IAAIC,EAAQ,QACRA,EAAQ,MAAM,KAA8BK,CAAK,IAEnDC,EAAOD,CAAK,GAGdT,EAAQO,GAAMC,CAAI;AAAA,EACpB;AAEA,QAAMG,IAAYT,EAAQ,QAAQ;AAElC,2BACGU,GAAA,EACC,UAAA,gBAAAC;AAAA,IAACC,EAAY;AAAA,IAAZ;AAAA,MACC,OAAO;AAAA,QACL,GAAGZ,EAAQ;AAAA,MAAA;AAAA,MAGb,UAAA,gBAAAa,EAACH,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,QAAA,gBAAAC,EAACG,GAAA,EAAW;AAAA,QACXL,uBAAcA,GAAA,CAAA,CAAU;AAAA,MAAA,EAAA,CAC3B;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/components/Flow/FlowHeader.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Renders the chrome above the active flow component (back affordance,
+ * progress bar, breadcrumbs, ...). Layout is driven by a single
+ * discriminated `header` field on the flow context. Each variant maps to a
+ * focused renderer below:
+ *
+ *   header.type === 'minimal'     → MinimalHeader
+ *   header.type === 'progress'    → ProgressHeader
+ *   header.type === 'breadcrumbs' → BreadcrumbsHeader
+ *
+ * To add a new piece of chrome:
+ *   1. Add a new variant to `FlowHeaderConfig` in `useFlow.ts`.
+ *   2. Add a new renderer function below.
+ *   3. Branch on it in `FlowHeader`.
+ */
+export declare function FlowHeader(): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Flow/FlowHeader.js

@@ -0,0 +1,90 @@
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useTranslation as s } from "react-i18next";
+import { FlowBreadcrumbs as d } from "../Common/FlowBreadcrumbs/FlowBreadcrumbs.js";
+import { Flex as m, FlexItem as c } from "../Common/Flex/Flex.js";
+import "classnames";
+import { useFlow as a } from "./useFlow.js";
+import { componentEvents as p } from "../../shared/constants.js";
+import { useComponentContext as u } from "../../contexts/ComponentAdapter/useComponentContext.js";
+import f from "../../assets/icons/caret-left.svg.js";
+function H() {
+  const { header: e, component: t } = a();
+  if (!e || !t) return null;
+  switch (e.type) {
+    case "minimal":
+      return /* @__PURE__ */ r(b, { cta: e.cta });
+    case "progress":
+      return /* @__PURE__ */ r(
+        h,
+        {
+          currentStep: e.currentStep,
+          totalSteps: e.totalSteps,
+          cta: e.cta
+        }
+      );
+    case "breadcrumbs":
+      return e.currentBreadcrumbId ? /* @__PURE__ */ r(
+        w,
+        {
+          currentBreadcrumbId: e.currentBreadcrumbId,
+          breadcrumbs: e.breadcrumbs,
+          cta: e.cta
+        }
+      ) : null;
+  }
+}
+function b({ cta: e }) {
+  const { onEvent: t } = a(), n = u(), { t: o } = s();
+  return /* @__PURE__ */ i(m, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", children: [
+    /* @__PURE__ */ r(c, { children: /* @__PURE__ */ r(
+      n.Button,
+      {
+        variant: "tertiary",
+        icon: /* @__PURE__ */ r(f, { "aria-hidden": "true" }),
+        onClick: () => {
+          t(p.CANCEL, void 0);
+        },
+        children: o("back")
+      }
+    ) }),
+    e && /* @__PURE__ */ r(c, { children: /* @__PURE__ */ r(e, {}) })
+  ] });
+}
+function h({
+  currentStep: e,
+  totalSteps: t,
+  cta: n
+}) {
+  const o = u(), { t: l } = s();
+  return /* @__PURE__ */ r(
+    o.ProgressBar,
+    {
+      totalSteps: t,
+      currentStep: e,
+      label: l("progressBarLabel", { totalSteps: t, currentStep: e }),
+      cta: n
+    }
+  );
+}
+function w({
+  currentBreadcrumbId: e,
+  breadcrumbs: t = {},
+  cta: n
+}) {
+  const { onEvent: o } = a();
+  return /* @__PURE__ */ i(m, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", children: [
+    /* @__PURE__ */ r(c, { flexGrow: 1, children: /* @__PURE__ */ r(
+      d,
+      {
+        breadcrumbs: e ? t[e] ?? [] : [],
+        currentBreadcrumbId: e,
+        onEvent: o
+      }
+    ) }),
+    /* @__PURE__ */ r(c, { children: n && /* @__PURE__ */ r(n, {}) })
+  ] });
+}
+export {
+  H as FlowHeader
+};
+//# sourceMappingURL=FlowHeader.js.map

package/dist/components/Flow/FlowHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlowHeader.js","sources":["../../../src/components/Flow/FlowHeader.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { FlowBreadcrumbs } from '../Common/FlowBreadcrumbs/FlowBreadcrumbs'\nimport type { BreadcrumbTrail } from '../Common/FlowBreadcrumbs/FlowBreadcrumbsTypes'\nimport { Flex } from '../Common/Flex'\nimport { FlexItem } from '../Common'\nimport { useFlow } from './useFlow'\nimport { componentEvents } from '@/shared/constants'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport CaretLeftIcon from '@/assets/icons/caret-left.svg?react'\n\n/**\n * Renders the chrome above the active flow component (back affordance,\n * progress bar, breadcrumbs, ...). Layout is driven by a single\n * discriminated `header` field on the flow context. Each variant maps to a\n * focused renderer below:\n *\n *   header.type === 'minimal'     → MinimalHeader\n *   header.type === 'progress'    → ProgressHeader\n *   header.type === 'breadcrumbs' → BreadcrumbsHeader\n *\n * To add a new piece of chrome:\n *   1. Add a new variant to `FlowHeaderConfig` in `useFlow.ts`.\n *   2. Add a new renderer function below.\n *   3. Branch on it in `FlowHeader`.\n */\nexport function FlowHeader() {\n  const { header, component } = useFlow()\n\n  if (!header || !component) return null\n\n  switch (header.type) {\n    case 'minimal':\n      return <MinimalHeader cta={header.cta} />\n    case 'progress':\n      return (\n        <ProgressHeader\n          currentStep={header.currentStep}\n          totalSteps={header.totalSteps}\n          cta={header.cta}\n        />\n      )\n    case 'breadcrumbs':\n      // The breadcrumb trail is intentionally persisted across \"passive\"\n      // states (e.g. landing screens) so that subsequent transitions can\n      // pick up where they left off without rebuilding it. We render the\n      // bar only when there's an active breadcrumb to show; otherwise\n      // we treat the flow as \"no chrome\" for this state.\n      if (!header.currentBreadcrumbId) return null\n      return (\n        <BreadcrumbsHeader\n          currentBreadcrumbId={header.currentBreadcrumbId}\n          breadcrumbs={header.breadcrumbs}\n          cta={header.cta}\n        />\n      )\n  }\n}\n\nfunction MinimalHeader({ cta: Cta }: { cta?: React.ComponentType }) {\n  const { onEvent } = useFlow()\n  const Components = useComponentContext()\n  const { t } = useTranslation()\n\n  return (\n    <Flex flexDirection=\"row\" justifyContent=\"space-between\" alignItems=\"center\">\n      <FlexItem>\n        <Components.Button\n          variant=\"tertiary\"\n          icon={<CaretLeftIcon aria-hidden=\"true\" />}\n          onClick={() => {\n            onEvent(componentEvents.CANCEL, undefined)\n          }}\n        >\n          {t('back')}\n        </Components.Button>\n      </FlexItem>\n      {Cta && (\n        <FlexItem>\n          <Cta />\n        </FlexItem>\n      )}\n    </Flex>\n  )\n}\n\nfunction ProgressHeader({\n  currentStep,\n  totalSteps,\n  cta: Cta,\n}: {\n  currentStep: number\n  totalSteps: number\n  cta?: React.ComponentType\n}) {\n  const Components = useComponentContext()\n  const { t } = useTranslation()\n\n  return (\n    <Components.ProgressBar\n      totalSteps={totalSteps}\n      currentStep={currentStep}\n      label={t('progressBarLabel', { totalSteps, currentStep })}\n      cta={Cta}\n    />\n  )\n}\n\nfunction BreadcrumbsHeader({\n  currentBreadcrumbId,\n  breadcrumbs = {},\n  cta: Cta,\n}: {\n  currentBreadcrumbId?: string\n  breadcrumbs?: BreadcrumbTrail\n  cta?: React.ComponentType\n}) {\n  const { onEvent } = useFlow()\n\n  return (\n    <Flex flexDirection=\"row\" justifyContent=\"space-between\" alignItems=\"center\">\n      <FlexItem flexGrow={1}>\n        <FlowBreadcrumbs\n          breadcrumbs={currentBreadcrumbId ? (breadcrumbs[currentBreadcrumbId] ?? []) : []}\n          currentBreadcrumbId={currentBreadcrumbId}\n          onEvent={onEvent}\n        />\n      </FlexItem>\n      <FlexItem>{Cta && <Cta />}</FlexItem>\n    </Flex>\n  )\n}\n"],"names":["FlowHeader","header","component","useFlow","jsx","MinimalHeader","ProgressHeader","BreadcrumbsHeader","Cta","onEvent","Components","useComponentContext","t","useTranslation","Flex","FlexItem","CaretLeftIcon","componentEvents","currentStep","totalSteps","currentBreadcrumbId","breadcrumbs","FlowBreadcrumbs"],"mappings":";;;;;;;;;AAyBO,SAASA,IAAa;AAC3B,QAAM,EAAE,QAAAC,GAAQ,WAAAC,EAAA,IAAcC,EAAA;AAE9B,MAAI,CAACF,KAAU,CAACC,EAAW,QAAO;AAElC,UAAQD,EAAO,MAAA;AAAA,IACb,KAAK;AACH,aAAO,gBAAAG,EAACC,GAAA,EAAc,KAAKJ,EAAO,IAAA,CAAK;AAAA,IACzC,KAAK;AACH,aACE,gBAAAG;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,aAAaL,EAAO;AAAA,UACpB,YAAYA,EAAO;AAAA,UACnB,KAAKA,EAAO;AAAA,QAAA;AAAA,MAAA;AAAA,IAGlB,KAAK;AAMH,aAAKA,EAAO,sBAEV,gBAAAG;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,qBAAqBN,EAAO;AAAA,UAC5B,aAAaA,EAAO;AAAA,UACpB,KAAKA,EAAO;AAAA,QAAA;AAAA,MAAA,IALwB;AAAA,EAMtC;AAGR;AAEA,SAASI,EAAc,EAAE,KAAKG,KAAsC;AAClE,QAAM,EAAE,SAAAC,EAAA,IAAYN,EAAA,GACdO,IAAaC,EAAA,GACb,EAAE,GAAAC,EAAA,IAAMC,EAAA;AAEd,2BACGC,GAAA,EAAK,eAAc,OAAM,gBAAe,iBAAgB,YAAW,UAClE,UAAA;AAAA,IAAA,gBAAAV,EAACW,GAAA,EACC,UAAA,gBAAAX;AAAA,MAACM,EAAW;AAAA,MAAX;AAAA,QACC,SAAQ;AAAA,QACR,MAAM,gBAAAN,EAACY,GAAA,EAAc,eAAY,OAAA,CAAO;AAAA,QACxC,SAAS,MAAM;AACb,UAAAP,EAAQQ,EAAgB,QAAQ,MAAS;AAAA,QAC3C;AAAA,QAEC,YAAE,MAAM;AAAA,MAAA;AAAA,IAAA,GAEb;AAAA,IACCT,KACC,gBAAAJ,EAACW,GAAA,EACC,UAAA,gBAAAX,EAACI,KAAI,EAAA,CACP;AAAA,EAAA,GAEJ;AAEJ;AAEA,SAASF,EAAe;AAAA,EACtB,aAAAY;AAAA,EACA,YAAAC;AAAA,EACA,KAAKX;AACP,GAIG;AACD,QAAME,IAAaC,EAAA,GACb,EAAE,GAAAC,EAAA,IAAMC,EAAA;AAEd,SACE,gBAAAT;AAAA,IAACM,EAAW;AAAA,IAAX;AAAA,MACC,YAAAS;AAAA,MACA,aAAAD;AAAA,MACA,OAAON,EAAE,oBAAoB,EAAE,YAAAO,GAAY,aAAAD,GAAa;AAAA,MACxD,KAAKV;AAAA,IAAA;AAAA,EAAA;AAGX;AAEA,SAASD,EAAkB;AAAA,EACzB,qBAAAa;AAAA,EACA,aAAAC,IAAc,CAAA;AAAA,EACd,KAAKb;AACP,GAIG;AACD,QAAM,EAAE,SAAAC,EAAA,IAAYN,EAAA;AAEpB,2BACGW,GAAA,EAAK,eAAc,OAAM,gBAAe,iBAAgB,YAAW,UAClE,UAAA;AAAA,IAAA,gBAAAV,EAACW,GAAA,EAAS,UAAU,GAClB,UAAA,gBAAAX;AAAA,MAACkB;AAAA,MAAA;AAAA,QACC,aAAaF,IAAuBC,EAAYD,CAAmB,KAAK,CAAA,IAAM,CAAA;AAAA,QAC9E,qBAAAA;AAAA,QACA,SAAAX;AAAA,MAAA;AAAA,IAAA,GAEJ;AAAA,IACA,gBAAAL,EAACW,GAAA,EAAU,UAAAP,KAAO,gBAAAJ,EAACI,KAAI,EAAA,CAAG;AAAA,EAAA,GAC5B;AAEJ;"}

package/dist/components/Flow/useFlow.d.ts

@@ -7,17 +7,44 @@ export interface CtaConfig {
     labelKey: string;
     namespace?: keyof CustomTypeOptions['resources'];
 }
+/**
+ * Discriminated union describing the chrome rendered above the active flow
+ * component. Each variant declares only the data it needs:
+ *   - `minimal`     → Back button. Optional `cta` for an extra control next to it.
+ *   - `progress`    → Step indicator. Requires `currentStep` / `totalSteps`,
+ *                     plus optional `cta`.
+ *   - `breadcrumbs` → Breadcrumb trail. Optional `currentBreadcrumbId` /
+ *                     `breadcrumbs` (typically populated via
+ *                     `buildBreadcrumbs` + `updateBreadcrumbs`), plus optional
+ *                     `cta`.
+ *
+ * `cta` carries the same meaning across every variant: an optional component
+ * rendered as part of the header chrome.
+ */
+export type FlowHeaderConfig = {
+    type: 'minimal';
+    cta?: React.ComponentType;
+} | {
+    type: 'progress';
+    currentStep: number;
+    totalSteps: number;
+    cta?: React.ComponentType;
+} | {
+    type: 'breadcrumbs';
+    currentBreadcrumbId?: string;
+    breadcrumbs?: BreadcrumbTrail;
+    cta?: React.ComponentType;
+};
 export interface FlowContextInterface {
     component: React.ComponentType<CommonComponentInterface> | null;
     onEvent: OnEventType<EventType, unknown>;
-    progressBarType?: 'progress' | 'breadcrumbs' | null;
-    totalSteps?: number;
-    currentStep?: number | null;
     defaultValues?: Record<string, unknown>;
-    progressBarCta?: React.ComponentType | null;
-    breadcrumbs?: BreadcrumbTrail;
-    currentBreadcrumbId?: string;
     ctaConfig?: CtaConfig | null;
+    /**
+     * Optional chrome rendered above the active flow component. When omitted
+     * (or set to `null`), no header is shown.
+     */
+    header?: FlowHeaderConfig | null;
 }
 export declare const FlowContext: import('react').Context<FlowContextInterface | null>;
 export declare function useFlow<C extends FlowContextInterface>(): C;