@gusto/embedded-react-sdk 0.36.0 → 0.37.0-rc.2

package/CHANGELOG.md

@@ -1,5 +1,63 @@
 # Changelog
 
+## 0.37.0
+
+### Features & Enhancements
+
+- Add core terminations functionality with DismissalFlow, DismissalPayPeriodSelection, and unused time off payout UI
+- Add transition payroll support with TransitionCreation component, state machine, and landing page alert
+- Embed DismissalFlow within TerminationFlow and add dismissal/transition states to payroll flows
+- Show off-cycle payrolls in history tab and add off-cycle flow support with section dividers
+- Introduce unified SDKError type and ObservabilityError extension
+- Implement UNSTABLE_Hooks directory with uniform hook return types and form infrastructure
+- Add useEmployeeDetailsForm hook with configurable required fields and NAME_REGEX validation
+- Add useWorkAddressForm hook with prebuilt component
+- Implement CompensationForm with useCompensationForm hook, including start date field and composeFormSchema alignment
+- Add composeSubmitHandler for coordinated multi-form validation and cross-form focus management
+- Add error code infrastructure, HookField reference components, and errorHandling pattern with retryQueries
+- Add getFormSubmissionValues to form hooks
+- Allow requiredFields to accept flat array or per-mode object
+- Align hooks with stable component parity: optional employeeId with submit-time resolution, SwitchField FieldComponent support, requiredIf null coercion fix
+- Add partner-facing hooks documentation
+
+### Fixes
+
+- Hide courtesy withholding checkbox from employee view
+- Strip finalPayoutUnusedHoursInput from PTO on non-dismissal payrolls
+- Include off-cycle and external payrolls in list and history views
+- Only show hourly inputs for primary jobs with hourly compensations
+- Fix off-cycle, dismissal, and transition payroll bugs
+- Invalidate payroll-prepare cache after editing employee hours
+- Improve PayrollConfiguration calculate/polling flow
+- Mark dismissal pay period select as required
+- Default employee selection to select-employees mode
+- Convert throw sites in new components to SDKInternalError
+
+### Chores & Maintenance
+
+- Refactor Base infrastructure for hooks compatibility
+- Payroll test infrastructure and label cleanup
+- Add E2E tests for DismissalFlow and transition payroll
+- Add Storybook stories for offcycle components
+- Add workflow_dispatch trigger and CI badge to README
+- Disable e2e tests in GitHub Actions
+- Fix minimatch ReDoS vulnerability (CVE-2026-27903)
+- Upgrade react-robot from 1.2.0 to 1.2.1
+- Bump react-hook-form from 7.71.2 to 7.72.0
+- Bump react-i18next from 16.5.8 to 16.6.6
+- Bump i18next from 25.8.18 to 25.10.4
+- Bump @storybook/react-vite from 10.2.19 to 10.3.1
+- Bump @storybook/addon-docs from 10.2.19 to 10.3.3
+- Bump @storybook/addon-a11y from 10.2.19 to 10.3.3
+- Bump @storybook/addon-onboarding from 10.2.19 to 10.3.3
+- Bump storybook from 10.3.0 to 10.3.1
+- Bump eslint-plugin-storybook from 10.2.19 to 10.3.3
+- Bump @storybook/test-runner from 0.24.2 to 0.24.3
+- Bump @vitest/coverage-v8 from 4.1.0 to 4.1.1
+- Bump vite-plugin-stylelint from 6.0.4 to 6.1.0
+- Bump msw from 2.12.12 to 2.12.14
+- Bump flatted from 3.3.3 to 3.4.2
+
 ## 0.36.0
 
 ### Features & Enhancements

package/README.md

@@ -1,5 +1,7 @@
 # 🦎 Gusto Embedded React SDK
 
+[![CI](https://github.com/Gusto/embedded-react-sdk/actions/workflows/ci.yaml/badge.svg)](https://github.com/Gusto/embedded-react-sdk/actions/workflows/ci.yaml)
+
 To install:
 
 ```
@@ -46,3 +48,7 @@ Live documentation is available at: https://docs.gusto.com/embedded-payroll/docs
   - [Employee Onboarding](docs/workflows-overview/employee-onboarding/employee-onboarding.md)
     - [Employee Self-Onboarding](docs/workflows-overview/employee-onboarding/employee-self-onboarding.md)
   - [Run Payroll](docs/workflows-overview/run-payroll.md)
+- [Hooks (Experimental)](docs/hooks/hooks.md)
+  - [useEmployeeDetailsForm](docs/hooks/useEmployeeDetailsForm.md)
+  - [useCompensationForm](docs/hooks/useCompensationForm.md)
+  - [useWorkAddressForm](docs/hooks/useWorkAddressForm.md)

package/dist/UNSTABLE_Hooks.d.ts

@@ -1 +1 @@
-export { PayrollConfiguration, PayrollConfigurationProvider, usePayrollConfiguration, type PayrollConfigurationContextValue, } from './components/Payroll/UNSTABLE_PayrollHooks';
+export { useCompensationForm, CompensationForm, CompensationErrorCodes, type CompensationFormProps, type CompensationSubmitCallbacks, type CompensationSubmitOptions, type CompensationRequiredFields, type UseCompensationFormProps, type UseCompensationFormResult, type UseCompensationFormReady, type CompensationFieldsMetadata, type CompensationFormFields, type CompensationErrorCode, type CompensationField, type CompensationFormData, type CompensationFormOutputs, type RequiredValidation, type RateValidation, type StartDateFieldProps, type JobTitleFieldProps, type FlsaStatusFieldProps, type RateFieldProps, type PaymentUnitFieldProps, type AdjustForMinimumWageFieldProps, type MinimumWageIdFieldProps, type TwoPercentShareholderFieldProps, type StateWcCoveredFieldProps, type StateWcClassCodeFieldProps, SDKFormProvider, FormFieldsMetadataProvider, composeSubmitHandler, useFieldsMetadata, useFieldErrorMessage, withOptions, deriveFieldsMetadata, collectErrors, TextInputHookField, SelectHookField, CheckboxHookField, NumberInputHookField, DatePickerHookField, RadioGroupHookField, useErrorHandling, type HookFormInternals, type HookLoadingResult, type HookSubmitResult, type HookErrorHandling, type BaseHookReady, type BaseFormHookReady, type FieldMetadata, type FieldMetadataWithOptions, type FieldsMetadata, type FormFieldsMetadataContextValue, type ValidationMessages, type BaseFieldProps, type TextInputHookFieldProps, type SelectHookFieldProps, type CheckboxHookFieldProps, type NumberInputHookFieldProps, type DatePickerHookFieldProps, type RadioGroupHookFieldProps, type TextInputProps, type SelectProps, type SelectOption, type CheckboxProps, type NumberInputProps, type DatePickerProps, type RadioGroupProps, type RadioGroupOption, SwitchHookField, type SwitchHookFieldProps, type SwitchProps, useEmployeeDetailsForm, EmployeeDetailsForm, EmployeeDetailsErrorCodes, type EmployeeDetailsFormProps, type EmployeeDetailsSubmitCallbacks, type EmployeeDetailsRequiredFields, type UseEmployeeDetailsFormProps, type UseEmployeeDetailsFormResult, type UseEmployeeDetailsFormReady, type EmployeeDetailsFieldsMetadata, type EmployeeDetailsFormFields, type EmployeeDetailsErrorCode, type EmployeeDetailsFormData, type EmployeeDetailsFormOutputs, type EmployeeDetailsField, type EmployeeDetailsRequiredValidation, type NameValidation, type EmailValidation, type SsnValidation, type FirstNameFieldProps, type MiddleInitialFieldProps, type LastNameFieldProps, type EmailFieldProps, type DateOfBirthFieldProps, type SsnFieldProps, type SelfOnboardingFieldProps, useWorkAddressForm, WorkAddressForm, WorkAddressErrorCodes, type WorkAddressFormProps, type WorkAddressSubmitCallbacks, type WorkAddressSubmitOptions, type WorkAddressRequiredFields, type UseWorkAddressFormProps, type UseWorkAddressFormResult, type UseWorkAddressFormReady, type WorkAddressFieldsMetadata, type WorkAddressFormFields, type WorkAddressErrorCode, type WorkAddressFormData, type WorkAddressFormOutputs, type WorkAddressField, type WorkAddressRequiredValidation, type LocationFieldProps, type EffectiveDateFieldProps, } from './components/UNSTABLE_Hooks';

package/dist/UNSTABLE_Hooks.js

@@ -1,9 +1,53 @@
-import { PayrollConfiguration as i } from "./components/Payroll/UNSTABLE_PayrollHooks/PayrollConfiguration/PayrollConfiguration.js";
-import { PayrollConfigurationProvider as f } from "./components/Payroll/UNSTABLE_PayrollHooks/PayrollConfiguration/PayrollConfigurationProvider.js";
-import { usePayrollConfiguration as n } from "./components/Payroll/UNSTABLE_PayrollHooks/PayrollConfiguration/usePayrollConfiguration.js";
+import { useErrorHandling as e } from "./components/UNSTABLE_Hooks/useErrorHandling.js";
+import { collectErrors as m } from "./components/UNSTABLE_Hooks/collectErrors.js";
+import { CheckboxHookField as d } from "./components/UNSTABLE_Hooks/form/fields/CheckboxHookField.js";
+import { CompensationErrorCodes as i } from "./components/UNSTABLE_Hooks/hooks/useCompensationForm/compensationSchema.js";
+import { CompensationForm as f } from "./components/UNSTABLE_Hooks/hooks/useCompensationForm/CompensationForm.js";
+import { DatePickerHookField as a } from "./components/UNSTABLE_Hooks/form/fields/DatePickerHookField.js";
+import { EmployeeDetailsErrorCodes as k } from "./components/UNSTABLE_Hooks/hooks/useEmployeeDetailsForm/employeeDetailsSchema.js";
+import { EmployeeDetailsForm as u } from "./components/UNSTABLE_Hooks/hooks/useEmployeeDetailsForm/EmployeeDetailsForm.js";
+import { FormFieldsMetadataProvider as H } from "./components/UNSTABLE_Hooks/form/FormFieldsMetadataProvider.js";
+import { NumberInputHookField as C } from "./components/UNSTABLE_Hooks/form/fields/NumberInputHookField.js";
+import { RadioGroupHookField as M } from "./components/UNSTABLE_Hooks/form/fields/RadioGroupHookField.js";
+import { SDKFormProvider as b } from "./components/UNSTABLE_Hooks/form/SDKFormProvider.js";
+import { SelectHookField as v } from "./components/UNSTABLE_Hooks/form/fields/SelectHookField.js";
+import { SwitchHookField as A } from "./components/UNSTABLE_Hooks/form/fields/SwitchHookField.js";
+import { TextInputHookField as W } from "./components/UNSTABLE_Hooks/form/fields/TextInputHookField.js";
+import { WorkAddressErrorCodes as w } from "./components/UNSTABLE_Hooks/hooks/useWorkAddressForm/workAddressSchema.js";
+import { WorkAddressForm as G } from "./components/UNSTABLE_Hooks/hooks/useWorkAddressForm/WorkAddressForm.js";
+import { composeSubmitHandler as N } from "./components/UNSTABLE_Hooks/form/composeSubmitHandler.js";
+import { deriveFieldsMetadata as R } from "./components/UNSTABLE_Hooks/form/deriveFieldsMetadata.js";
+import { useCompensationForm as j } from "./components/UNSTABLE_Hooks/hooks/useCompensationForm/useCompensationForm.js";
+import { useEmployeeDetailsForm as z } from "./components/UNSTABLE_Hooks/hooks/useEmployeeDetailsForm/useEmployeeDetailsForm.js";
+import { useFieldErrorMessage as J } from "./components/UNSTABLE_Hooks/form/useFieldErrorMessage.js";
+import { useFieldsMetadata as Q } from "./components/UNSTABLE_Hooks/form/useFieldsMetadata.js";
+import { useWorkAddressForm as V } from "./components/UNSTABLE_Hooks/hooks/useWorkAddressForm/useWorkAddressForm.js";
+import { withOptions as Y } from "./components/UNSTABLE_Hooks/form/withOptions.js";
 export {
-  i as PayrollConfiguration,
-  f as PayrollConfigurationProvider,
-  n as usePayrollConfiguration
+  d as CheckboxHookField,
+  i as CompensationErrorCodes,
+  f as CompensationForm,
+  a as DatePickerHookField,
+  k as EmployeeDetailsErrorCodes,
+  u as EmployeeDetailsForm,
+  H as FormFieldsMetadataProvider,
+  C as NumberInputHookField,
+  M as RadioGroupHookField,
+  b as SDKFormProvider,
+  v as SelectHookField,
+  A as SwitchHookField,
+  W as TextInputHookField,
+  w as WorkAddressErrorCodes,
+  G as WorkAddressForm,
+  m as collectErrors,
+  N as composeSubmitHandler,
+  R as deriveFieldsMetadata,
+  j as useCompensationForm,
+  z as useEmployeeDetailsForm,
+  e as useErrorHandling,
+  J as useFieldErrorMessage,
+  Q as useFieldsMetadata,
+  V as useWorkAddressForm,
+  Y as withOptions
 };
 //# sourceMappingURL=UNSTABLE_Hooks.js.map

package/dist/UNSTABLE_Hooks.js.map

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

package/dist/components/Base/Base.d.ts

@@ -1,10 +1,10 @@
 import { ReactNode, JSX, ErrorInfo } from 'react';
 import { FallbackProps } from 'react-error-boundary';
-import { EntityErrorObject } from '@gusto/embedded-api/models/components/entityerrorobject';
-import { KnownErrors, OnEventType } from './useBase';
+import { OnEventType } from './useBase';
 import { EventType } from '../../shared/constants';
 import { ResourceDictionary, Resources } from '../../types/Helpers';
 import { LoadingIndicatorContextProps } from '../../contexts/LoadingIndicatorProvider/useLoadingIndicator';
+import { SDKError } from '../../types/sdkError';
 export interface CommonComponentInterface<TResourceKey extends keyof Resources = keyof Resources> {
     children?: ReactNode;
     className?: string;
@@ -13,25 +13,24 @@ export interface CommonComponentInterface<TResourceKey extends keyof Resources =
 }
 export interface BaseComponentInterface<TResourceKey extends keyof Resources = keyof Resources> extends CommonComponentInterface<TResourceKey> {
     FallbackComponent?: BaseBoundariesProps['FallbackComponent'];
-    LoaderComponent?: BaseBoundariesProps['LoaderComponent'];
+    LoaderComponent?: LoadingIndicatorContextProps['LoadingIndicator'];
     onEvent: OnEventType<EventType, unknown>;
 }
 interface InternalBaseComponentProps {
     componentName?: string;
 }
 export declare const BaseComponent: <TResourceKey extends keyof Resources = keyof Resources>({ children, FallbackComponent, LoaderComponent: LoadingIndicatorFromProps, onEvent, componentName, }: BaseComponentInterface<TResourceKey> & InternalBaseComponentProps) => import("react/jsx-runtime").JSX.Element;
-interface BaseLayoutProps {
+export interface BaseLayoutProps {
     children?: ReactNode;
-    error: KnownErrors | null;
-    fieldErrors: Array<EntityErrorObject> | null;
+    error?: SDKError | SDKError[] | null;
+    isLoading?: boolean;
 }
-export declare const BaseLayout: ({ children, error, fieldErrors }: BaseLayoutProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BaseLayout: ({ children, error, isLoading }: BaseLayoutProps) => import("react/jsx-runtime").JSX.Element;
 export interface BaseBoundariesProps {
     children?: ReactNode;
     FallbackComponent?: (props: FallbackProps) => JSX.Element;
-    LoaderComponent?: LoadingIndicatorContextProps['LoadingIndicator'];
     onErrorBoundaryError?: (error: unknown, info: ErrorInfo) => void;
     componentName?: string;
 }
-export declare const BaseBoundaries: ({ children, FallbackComponent, LoaderComponent: LoadingIndicatorFromProps, onErrorBoundaryError, componentName, }: BaseBoundariesProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BaseBoundaries: ({ children, FallbackComponent, onErrorBoundaryError, componentName, }: BaseBoundariesProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Base/Base.js

@@ -1,126 +1,147 @@
-import { jsx as s, jsxs as l } from "react/jsx-runtime";
-import { Suspense as x, useRef as u, useEffect as f } from "react";
+import { jsx as e, jsxs as m } from "react/jsx-runtime";
+import { Suspense as k, useRef as c, useEffect as u } from "react";
 import { ErrorBoundary as B } from "react-error-boundary";
-import { useTranslation as k } from "react-i18next";
-import { GustoEmbeddedError as v } from "@gusto/embedded-api/models/errors/gustoembeddederror";
-import { SDKValidationError as I } from "@gusto/embedded-api/models/errors/sdkvalidationerror";
-import { QueryErrorResetBoundary as R } from "@tanstack/react-query";
-import { FadeIn as S } from "../Common/FadeIn/FadeIn.js";
-import { BaseContext as w } from "./useBase.js";
-import { useBaseSubmit as D } from "./useBaseSubmit.js";
-import { componentEvents as F } from "../../shared/constants.js";
-import "classnames";
-import { InternalError as E } from "../Common/InternalError/InternalError.js";
-import { useComponentContext as T } from "../../contexts/ComponentAdapter/useComponentContext.js";
-import { useLoadingIndicator as L } from "../../contexts/LoadingIndicatorProvider/useLoadingIndicator.js";
-import { useObservability as g } from "../../contexts/ObservabilityProvider/useObservability.js";
-import { renderErrorList as j } from "../../helpers/apiErrorToList.js";
-const rr = ({
-  children: i,
-  FallbackComponent: r = E,
-  LoaderComponent: n,
-  onEvent: e,
-  componentName: o
+import { useTranslation as p } from "react-i18next";
+import { QueryErrorResetBoundary as S } from "@tanstack/react-query";
+import { FadeIn as I } from "../Common/FadeIn/FadeIn.js";
+import { BaseContext as R } from "./useBase.js";
+import { useBaseSubmit as x } from "./useBaseSubmit.js";
+import { componentEvents as D } from "../../shared/constants.js";
+import { InternalError as f } from "../Common/InternalError/InternalError.js";
+import { useComponentContext as g } from "../../contexts/ComponentAdapter/useComponentContext.js";
+import { useLoadingIndicator as d } from "../../contexts/LoadingIndicatorProvider/useLoadingIndicator.js";
+import { useObservability as E } from "../../contexts/ObservabilityProvider/useObservability.js";
+import { normalizeToSDKError as F } from "../../types/sdkError.js";
+const $ = ({
+  children: r,
+  FallbackComponent: t = f,
+  LoaderComponent: s,
+  onEvent: o,
+  componentName: n
 }) => {
-  const { error: t, fieldErrors: a, baseSubmitHandler: m, setError: d } = D(o), { observability: b } = g(), { LoadingIndicator: h } = L(), p = n ?? h, y = (c, C) => {
-    e(F.ERROR, c), b?.onError?.({
-      type: "boundary_error",
-      message: c instanceof Error ? c.message : "Unknown error",
-      stack: c instanceof Error ? c.stack : void 0,
-      context: {
-        componentName: o,
-        componentStack: C.componentStack ?? void 0
-      },
-      originalError: c,
-      timestamp: Date.now()
+  const { error: i, baseSubmitHandler: a, setError: h } = x(n), { observability: y } = E(), { LoadingIndicator: L } = d(), b = s ?? L, w = (l, C) => {
+    o(D.ERROR, l);
+    const v = F(l);
+    y?.onError?.({
+      ...v,
+      timestamp: Date.now(),
+      componentName: n,
+      componentStack: C.componentStack ?? void 0
     });
   };
-  return /* @__PURE__ */ s(
-    w.Provider,
+  return /* @__PURE__ */ e(
+    R.Provider,
     {
       value: {
-        error: t,
-        fieldErrors: a,
-        setError: d,
-        onEvent: e,
-        baseSubmitHandler: m,
-        LoadingIndicator: p,
-        componentName: o
+        error: i,
+        setError: h,
+        onEvent: o,
+        baseSubmitHandler: a,
+        LoadingIndicator: b,
+        componentName: n
       },
-      children: /* @__PURE__ */ s(
-        U,
+      children: /* @__PURE__ */ e(
+        _,
         {
-          FallbackComponent: r,
-          LoaderComponent: p,
-          onErrorBoundaryError: y,
-          componentName: o,
-          children: /* @__PURE__ */ s(M, { error: t, fieldErrors: a, children: i })
+          FallbackComponent: t,
+          onErrorBoundaryError: w,
+          componentName: n,
+          children: /* @__PURE__ */ e(j, { error: i, children: r })
         }
       )
     }
   );
-}, M = ({ children: i, error: r, fieldErrors: n }) => {
-  const e = T(), { t: o } = k(), t = !!n?.length;
-  return /* @__PURE__ */ l(S, { children: [
-    (r || n) && /* @__PURE__ */ l(e.Alert, { label: o("status.errorEncountered"), status: "error", children: [
-      t && /* @__PURE__ */ s(e.UnorderedList, { items: j(n) }),
-      !t && r instanceof v && /* @__PURE__ */ s(e.Text, { children: o("errors.unknownError") }),
-      !t && r instanceof I && /* @__PURE__ */ s(e.Text, { as: "pre", children: r.pretty() })
-    ] }),
-    i
+};
+function T({ error: r }) {
+  const t = g(), { t: s } = p(), o = r.fieldErrors.length > 0;
+  return /* @__PURE__ */ m(t.Alert, { label: s("status.errorEncountered"), status: "error", children: [
+    o && /* @__PURE__ */ e(
+      t.UnorderedList,
+      {
+        items: r.fieldErrors.filter((n) => n.message).map((n) => /* @__PURE__ */ e("span", { children: n.message }, n.field))
+      }
+    ),
+    !o && r.category === "validation_error" && /* @__PURE__ */ e(t.Text, { as: "pre", children: r.raw && typeof r.raw == "object" && "pretty" in r.raw && typeof r.raw.pretty == "function" ? r.raw.pretty() : r.message }),
+    !o && r.category !== "validation_error" && /* @__PURE__ */ e(t.Text, { children: r.message || s("errors.unknownError") })
   ] });
-}, O = ({
-  LoaderComponent: i,
-  observability: r,
-  componentName: n
+}
+function A({ errors: r }) {
+  const t = g(), { t: s } = p();
+  return /* @__PURE__ */ e(t.Alert, { label: s("status.multipleErrorsEncountered"), status: "error", children: /* @__PURE__ */ e(
+    t.UnorderedList,
+    {
+      items: r.filter((o) => o.message || o.fieldErrors.length > 0).map((o, n) => {
+        const i = o.fieldErrors.filter((a) => a.message);
+        return i.length === 0 ? /* @__PURE__ */ e("span", { children: o.message || s("errors.unknownError") }, n) : /* @__PURE__ */ m("span", { children: [
+          o.message || s("errors.unknownError"),
+          /* @__PURE__ */ e(
+            t.UnorderedList,
+            {
+              items: i.map((a) => /* @__PURE__ */ e("span", { children: a.message }, a.field))
+            }
+          )
+        ] }, n);
+      })
+    }
+  ) });
+}
+const j = ({ children: r, error: t, isLoading: s }) => {
+  const { LoadingIndicator: o } = d(), n = Array.isArray(t) ? t : t ? [t] : [], i = n.length > 0;
+  if (s && !i)
+    return /* @__PURE__ */ e(o, {});
+  const [a] = n;
+  return /* @__PURE__ */ m(I, { children: [
+    n.length > 1 && /* @__PURE__ */ e(A, { errors: n }),
+    n.length === 1 && a && /* @__PURE__ */ e(T, { error: a }),
+    r
+  ] });
+}, M = ({
+  LoaderComponent: r,
+  observability: t,
+  componentName: s
 }) => {
-  const e = u(Date.now()), o = u(r), t = u(n);
-  return f(() => {
-    o.current = r, t.current = n;
-  }, [r, n]), f(() => () => {
-    const a = Date.now() - e.current;
-    o.current?.onMetric?.({
+  const o = c(Date.now()), n = c(t), i = c(s);
+  return u(() => {
+    n.current = t, i.current = s;
+  }, [t, s]), u(() => () => {
+    const a = Date.now() - o.current;
+    n.current?.onMetric?.({
       name: "sdk.component.loading_duration",
       value: a,
       unit: "ms",
-      tags: t.current ? { component: t.current } : void 0,
+      tags: i.current ? { component: i.current } : void 0,
       timestamp: Date.now()
     });
-  }, []), /* @__PURE__ */ s(i, {});
-}, U = ({
-  children: i,
-  FallbackComponent: r = E,
-  LoaderComponent: n,
-  onErrorBoundaryError: e,
-  componentName: o
-}) => {
-  const { LoadingIndicator: t } = L(), a = n ?? t, { observability: m } = g();
-  return /* @__PURE__ */ s(R, { children: ({ reset: d }) => /* @__PURE__ */ s(
-    B,
+  }, []), /* @__PURE__ */ e(r, {});
+};
+function U({ componentName: r }) {
+  const { LoadingIndicator: t } = d(), { observability: s } = E();
+  return /* @__PURE__ */ e(
+    M,
     {
-      FallbackComponent: r,
-      onReset: d,
-      onError: e,
-      children: /* @__PURE__ */ s(
-        x,
-        {
-          fallback: /* @__PURE__ */ s(
-            O,
-            {
-              LoaderComponent: a,
-              observability: m,
-              componentName: o
-            }
-          ),
-          children: i
-        }
-      )
+      LoaderComponent: t,
+      observability: s,
+      componentName: r
     }
-  ) });
-};
+  );
+}
+const _ = ({
+  children: r,
+  FallbackComponent: t = f,
+  onErrorBoundaryError: s,
+  componentName: o
+}) => /* @__PURE__ */ e(S, { children: ({ reset: n }) => /* @__PURE__ */ e(
+  B,
+  {
+    FallbackComponent: t,
+    onReset: n,
+    onError: s,
+    children: /* @__PURE__ */ e(k, { fallback: /* @__PURE__ */ e(U, { componentName: o }), children: r })
+  }
+) });
 export {
-  U as BaseBoundaries,
-  rr as BaseComponent,
-  M as BaseLayout
+  _ as BaseBoundaries,
+  $ as BaseComponent,
+  j as BaseLayout
 };
 //# sourceMappingURL=Base.js.map

package/dist/components/Base/Base.js.map

@@ -1 +1 @@
-{"version":3,"file":"Base.js","sources":["../../../src/components/Base/Base.tsx"],"sourcesContent":["import type { ReactNode, JSX, ErrorInfo } from 'react'\nimport { Suspense, useEffect, useRef } from 'react'\nimport type { FallbackProps } from 'react-error-boundary'\nimport { ErrorBoundary } from 'react-error-boundary'\nimport { useTranslation } from 'react-i18next'\nimport { GustoEmbeddedError } from '@gusto/embedded-api/models/errors/gustoembeddederror'\nimport { SDKValidationError } from '@gusto/embedded-api/models/errors/sdkvalidationerror'\nimport { QueryErrorResetBoundary } from '@tanstack/react-query'\nimport type { EntityErrorObject } from '@gusto/embedded-api/models/components/entityerrorobject'\nimport { FadeIn } from '../Common/FadeIn/FadeIn'\nimport { BaseContext, type KnownErrors, type OnEventType } from './useBase'\nimport { useBaseSubmit } from './useBaseSubmit'\nimport { componentEvents, type EventType } from '@/shared/constants'\nimport { InternalError } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport type { ResourceDictionary, Resources } from '@/types/Helpers'\nimport { useLoadingIndicator } from '@/contexts/LoadingIndicatorProvider/useLoadingIndicator'\nimport type { LoadingIndicatorContextProps } from '@/contexts/LoadingIndicatorProvider/useLoadingIndicator'\nimport { useObservability } from '@/contexts/ObservabilityProvider/useObservability'\nimport { renderErrorList } from '@/helpers/apiErrorToList'\n\nexport interface CommonComponentInterface<TResourceKey extends keyof Resources = keyof Resources> {\n  children?: ReactNode\n  className?: string\n  defaultValues?: unknown\n  dictionary?: ResourceDictionary<TResourceKey>\n}\n\n// Base component wrapper with error and suspense handling\nexport interface BaseComponentInterface<\n  TResourceKey extends keyof Resources = keyof Resources,\n> extends CommonComponentInterface<TResourceKey> {\n  FallbackComponent?: BaseBoundariesProps['FallbackComponent']\n  LoaderComponent?: BaseBoundariesProps['LoaderComponent']\n  onEvent: OnEventType<EventType, unknown>\n}\n\n// Internal prop for SDK components to set their component name\ninterface InternalBaseComponentProps {\n  componentName?: string\n}\n\nexport const BaseComponent = <TResourceKey extends keyof Resources = keyof Resources>({\n  children,\n  FallbackComponent = InternalError,\n  LoaderComponent: LoadingIndicatorFromProps,\n  onEvent,\n  componentName,\n}: BaseComponentInterface<TResourceKey> & InternalBaseComponentProps) => {\n  const { error, fieldErrors, baseSubmitHandler, setError } = useBaseSubmit(componentName)\n  const { observability } = useObservability()\n\n  const { LoadingIndicator: LoadingIndicatorFromContext } = useLoadingIndicator()\n  const LoaderComponent = LoadingIndicatorFromProps ?? LoadingIndicatorFromContext\n\n  const onErrorBoundaryError = (error: unknown, errorInfo: ErrorInfo) => {\n    onEvent(componentEvents.ERROR, error)\n\n    observability?.onError?.({\n      type: 'boundary_error',\n      message: error instanceof Error ? error.message : 'Unknown error',\n      stack: error instanceof Error ? error.stack : undefined,\n      context: {\n        componentName,\n        componentStack: errorInfo.componentStack ?? undefined,\n      },\n      originalError: error,\n      timestamp: Date.now(),\n    })\n  }\n\n  return (\n    <BaseContext.Provider\n      value={{\n        error,\n        fieldErrors,\n        setError,\n        onEvent,\n        baseSubmitHandler,\n        LoadingIndicator: LoaderComponent,\n        componentName,\n      }}\n    >\n      <BaseBoundaries\n        FallbackComponent={FallbackComponent}\n        LoaderComponent={LoaderComponent}\n        onErrorBoundaryError={onErrorBoundaryError}\n        componentName={componentName}\n      >\n        <BaseLayout error={error} fieldErrors={fieldErrors}>\n          {children}\n        </BaseLayout>\n      </BaseBoundaries>\n    </BaseContext.Provider>\n  )\n}\n\ninterface BaseLayoutProps {\n  children?: ReactNode\n  error: KnownErrors | null\n  fieldErrors: Array<EntityErrorObject> | null\n}\n\nexport const BaseLayout = ({ children, error, fieldErrors }: BaseLayoutProps) => {\n  const Components = useComponentContext()\n  const { t } = useTranslation()\n  const hasDisplayableFieldErrors = Boolean(fieldErrors?.length)\n\n  return (\n    <FadeIn>\n      {(error || fieldErrors) && (\n        <Components.Alert label={t('status.errorEncountered')} status=\"error\">\n          {hasDisplayableFieldErrors && (\n            <Components.UnorderedList items={renderErrorList(fieldErrors!)} />\n          )}\n          {!hasDisplayableFieldErrors && error instanceof GustoEmbeddedError && (\n            <Components.Text>{t('errors.unknownError')}</Components.Text>\n          )}\n          {!hasDisplayableFieldErrors && error instanceof SDKValidationError && (\n            <Components.Text as=\"pre\">{error.pretty()}</Components.Text>\n          )}\n        </Components.Alert>\n      )}\n      {children}\n    </FadeIn>\n  )\n}\n\ninterface LoaderWithMetricsProps {\n  LoaderComponent: LoadingIndicatorContextProps['LoadingIndicator']\n  observability: ReturnType<typeof useObservability>['observability']\n  componentName?: string\n}\n\nconst LoaderWithMetrics = ({\n  LoaderComponent,\n  observability,\n  componentName,\n}: LoaderWithMetricsProps) => {\n  const loadingStartTime = useRef(Date.now())\n  const observabilityRef = useRef(observability)\n  const componentNameRef = useRef(componentName)\n\n  useEffect(() => {\n    observabilityRef.current = observability\n    componentNameRef.current = componentName\n  }, [observability, componentName])\n\n  useEffect(() => {\n    return () => {\n      const duration = Date.now() - loadingStartTime.current\n      observabilityRef.current?.onMetric?.({\n        name: 'sdk.component.loading_duration',\n        value: duration,\n        unit: 'ms',\n        tags: componentNameRef.current ? { component: componentNameRef.current } : undefined,\n        timestamp: Date.now(),\n      })\n    }\n  }, [])\n\n  return <LoaderComponent />\n}\n\nexport interface BaseBoundariesProps {\n  children?: ReactNode\n  FallbackComponent?: (props: FallbackProps) => JSX.Element\n  LoaderComponent?: LoadingIndicatorContextProps['LoadingIndicator']\n  onErrorBoundaryError?: (error: unknown, info: ErrorInfo) => void\n  componentName?: string\n}\n\nexport const BaseBoundaries = ({\n  children,\n  FallbackComponent = InternalError,\n  LoaderComponent: LoadingIndicatorFromProps,\n  onErrorBoundaryError,\n  componentName,\n}: BaseBoundariesProps) => {\n  const { LoadingIndicator: LoadingIndicatorFromContext } = useLoadingIndicator()\n  const LoaderComponent = LoadingIndicatorFromProps ?? LoadingIndicatorFromContext\n  const { observability } = useObservability()\n\n  return (\n    <QueryErrorResetBoundary>\n      {({ reset: resetQueries }) => (\n        <ErrorBoundary\n          FallbackComponent={FallbackComponent}\n          onReset={resetQueries}\n          onError={onErrorBoundaryError}\n        >\n          <Suspense\n            fallback={\n              <LoaderWithMetrics\n                LoaderComponent={LoaderComponent}\n                observability={observability}\n                componentName={componentName}\n              />\n            }\n          >\n            {children}\n          </Suspense>\n        </ErrorBoundary>\n      )}\n    </QueryErrorResetBoundary>\n  )\n}\n"],"names":["BaseComponent","children","FallbackComponent","InternalError","LoadingIndicatorFromProps","onEvent","componentName","error","fieldErrors","baseSubmitHandler","setError","useBaseSubmit","observability","useObservability","LoadingIndicatorFromContext","useLoadingIndicator","LoaderComponent","onErrorBoundaryError","errorInfo","componentEvents","jsx","BaseContext","BaseBoundaries","BaseLayout","Components","useComponentContext","t","useTranslation","hasDisplayableFieldErrors","FadeIn","jsxs","renderErrorList","GustoEmbeddedError","SDKValidationError","LoaderWithMetrics","loadingStartTime","useRef","observabilityRef","componentNameRef","useEffect","duration","QueryErrorResetBoundary","resetQueries","ErrorBoundary","Suspense"],"mappings":"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"}
+{"version":3,"file":"Base.js","sources":["../../../src/components/Base/Base.tsx"],"sourcesContent":["import type { ReactNode, JSX, ErrorInfo } from 'react'\nimport { Suspense, useEffect, useRef } from 'react'\nimport type { FallbackProps } from 'react-error-boundary'\nimport { ErrorBoundary } from 'react-error-boundary'\nimport { useTranslation } from 'react-i18next'\nimport { QueryErrorResetBoundary } from '@tanstack/react-query'\nimport { FadeIn } from '../Common/FadeIn/FadeIn'\nimport { BaseContext, type OnEventType } from './useBase'\nimport { useBaseSubmit } from './useBaseSubmit'\nimport { componentEvents, type EventType } from '@/shared/constants'\nimport { InternalError } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport type { ResourceDictionary, Resources } from '@/types/Helpers'\nimport { useLoadingIndicator } from '@/contexts/LoadingIndicatorProvider/useLoadingIndicator'\nimport type { LoadingIndicatorContextProps } from '@/contexts/LoadingIndicatorProvider/useLoadingIndicator'\nimport { useObservability } from '@/contexts/ObservabilityProvider/useObservability'\nimport { normalizeToSDKError, type SDKError } from '@/types/sdkError'\n\nexport interface CommonComponentInterface<TResourceKey extends keyof Resources = keyof Resources> {\n  children?: ReactNode\n  className?: string\n  defaultValues?: unknown\n  dictionary?: ResourceDictionary<TResourceKey>\n}\n\nexport interface BaseComponentInterface<\n  TResourceKey extends keyof Resources = keyof Resources,\n> extends CommonComponentInterface<TResourceKey> {\n  FallbackComponent?: BaseBoundariesProps['FallbackComponent']\n  LoaderComponent?: LoadingIndicatorContextProps['LoadingIndicator']\n  onEvent: OnEventType<EventType, unknown>\n}\n\ninterface InternalBaseComponentProps {\n  componentName?: string\n}\n\nexport const BaseComponent = <TResourceKey extends keyof Resources = keyof Resources>({\n  children,\n  FallbackComponent = InternalError,\n  LoaderComponent: LoadingIndicatorFromProps,\n  onEvent,\n  componentName,\n}: BaseComponentInterface<TResourceKey> & InternalBaseComponentProps) => {\n  const { error, baseSubmitHandler, setError } = useBaseSubmit(componentName)\n  const { observability } = useObservability()\n\n  const { LoadingIndicator: LoadingIndicatorFromContext } = useLoadingIndicator()\n  const LoaderComponent = LoadingIndicatorFromProps ?? LoadingIndicatorFromContext\n\n  const onErrorBoundaryError = (boundaryError: unknown, errorInfo: ErrorInfo) => {\n    onEvent(componentEvents.ERROR, boundaryError)\n\n    const sdkError = normalizeToSDKError(boundaryError)\n\n    observability?.onError?.({\n      ...sdkError,\n      timestamp: Date.now(),\n      componentName,\n      componentStack: errorInfo.componentStack ?? undefined,\n    })\n  }\n\n  return (\n    <BaseContext.Provider\n      value={{\n        error,\n        setError,\n        onEvent,\n        baseSubmitHandler,\n        LoadingIndicator: LoaderComponent,\n        componentName,\n      }}\n    >\n      <BaseBoundaries\n        FallbackComponent={FallbackComponent}\n        onErrorBoundaryError={onErrorBoundaryError}\n        componentName={componentName}\n      >\n        <BaseLayout error={error}>{children}</BaseLayout>\n      </BaseBoundaries>\n    </BaseContext.Provider>\n  )\n}\n\nexport interface BaseLayoutProps {\n  children?: ReactNode\n  error?: SDKError | SDKError[] | null\n  isLoading?: boolean\n}\n\nfunction SingleErrorContent({ error }: { error: SDKError }) {\n  const Components = useComponentContext()\n  const { t } = useTranslation()\n  const hasFieldErrors = error.fieldErrors.length > 0\n\n  return (\n    <Components.Alert label={t('status.errorEncountered')} status=\"error\">\n      {hasFieldErrors && (\n        <Components.UnorderedList\n          items={error.fieldErrors\n            .filter(fieldError => fieldError.message)\n            .map(fieldError => (\n              <span key={fieldError.field}>{fieldError.message}</span>\n            ))}\n        />\n      )}\n      {!hasFieldErrors && error.category === 'validation_error' && (\n        <Components.Text as=\"pre\">\n          {error.raw &&\n          typeof error.raw === 'object' &&\n          'pretty' in error.raw &&\n          typeof (error.raw as { pretty: unknown }).pretty === 'function'\n            ? (error.raw as { pretty: () => string }).pretty()\n            : error.message}\n        </Components.Text>\n      )}\n      {!hasFieldErrors && error.category !== 'validation_error' && (\n        <Components.Text>{error.message || t('errors.unknownError')}</Components.Text>\n      )}\n    </Components.Alert>\n  )\n}\n\nfunction MultipleErrorsContent({ errors }: { errors: SDKError[] }) {\n  const Components = useComponentContext()\n  const { t } = useTranslation()\n\n  return (\n    <Components.Alert label={t('status.multipleErrorsEncountered')} status=\"error\">\n      <Components.UnorderedList\n        items={errors\n          .filter(error => error.message || error.fieldErrors.length > 0)\n          .map((error, index) => {\n            const visibleFieldErrors = error.fieldErrors.filter(fieldError => fieldError.message)\n\n            if (visibleFieldErrors.length === 0) {\n              return <span key={index}>{error.message || t('errors.unknownError')}</span>\n            }\n\n            return (\n              <span key={index}>\n                {error.message || t('errors.unknownError')}\n                <Components.UnorderedList\n                  items={visibleFieldErrors.map(fieldError => (\n                    <span key={fieldError.field}>{fieldError.message}</span>\n                  ))}\n                />\n              </span>\n            )\n          })}\n      />\n    </Components.Alert>\n  )\n}\n\nexport const BaseLayout = ({ children, error, isLoading }: BaseLayoutProps) => {\n  const { LoadingIndicator } = useLoadingIndicator()\n\n  const errors = Array.isArray(error) ? error : error ? [error] : []\n  const hasErrors = errors.length > 0\n\n  if (isLoading && !hasErrors) {\n    return <LoadingIndicator />\n  }\n\n  const [firstError] = errors\n\n  return (\n    <FadeIn>\n      {errors.length > 1 && <MultipleErrorsContent errors={errors} />}\n      {errors.length === 1 && firstError && <SingleErrorContent error={firstError} />}\n      {children}\n    </FadeIn>\n  )\n}\n\ninterface LoaderWithMetricsProps {\n  LoaderComponent: LoadingIndicatorContextProps['LoadingIndicator']\n  observability: ReturnType<typeof useObservability>['observability']\n  componentName?: string\n}\n\nconst LoaderWithMetrics = ({\n  LoaderComponent,\n  observability,\n  componentName,\n}: LoaderWithMetricsProps) => {\n  const loadingStartTime = useRef(Date.now())\n  const observabilityRef = useRef(observability)\n  const componentNameRef = useRef(componentName)\n\n  useEffect(() => {\n    observabilityRef.current = observability\n    componentNameRef.current = componentName\n  }, [observability, componentName])\n\n  useEffect(() => {\n    return () => {\n      const duration = Date.now() - loadingStartTime.current\n      observabilityRef.current?.onMetric?.({\n        name: 'sdk.component.loading_duration',\n        value: duration,\n        unit: 'ms',\n        tags: componentNameRef.current ? { component: componentNameRef.current } : undefined,\n        timestamp: Date.now(),\n      })\n    }\n  }, [])\n\n  return <LoaderComponent />\n}\n\nfunction SuspenseFallback({ componentName }: { componentName?: string }) {\n  const { LoadingIndicator } = useLoadingIndicator()\n  const { observability } = useObservability()\n  return (\n    <LoaderWithMetrics\n      LoaderComponent={LoadingIndicator}\n      observability={observability}\n      componentName={componentName}\n    />\n  )\n}\n\nexport interface BaseBoundariesProps {\n  children?: ReactNode\n  FallbackComponent?: (props: FallbackProps) => JSX.Element\n  onErrorBoundaryError?: (error: unknown, info: ErrorInfo) => void\n  componentName?: string\n}\n\nexport const BaseBoundaries = ({\n  children,\n  FallbackComponent = InternalError,\n  onErrorBoundaryError,\n  componentName,\n}: BaseBoundariesProps) => {\n  return (\n    <QueryErrorResetBoundary>\n      {({ reset: resetQueries }) => (\n        <ErrorBoundary\n          FallbackComponent={FallbackComponent}\n          onReset={resetQueries}\n          onError={onErrorBoundaryError}\n        >\n          <Suspense fallback={<SuspenseFallback componentName={componentName} />}>\n            {children}\n          </Suspense>\n        </ErrorBoundary>\n      )}\n    </QueryErrorResetBoundary>\n  )\n}\n"],"names":["BaseComponent","children","FallbackComponent","InternalError","LoadingIndicatorFromProps","onEvent","componentName","error","baseSubmitHandler","setError","useBaseSubmit","observability","useObservability","LoadingIndicatorFromContext","useLoadingIndicator","LoaderComponent","onErrorBoundaryError","boundaryError","errorInfo","componentEvents","sdkError","normalizeToSDKError","jsx","BaseContext","BaseBoundaries","BaseLayout","SingleErrorContent","Components","useComponentContext","t","useTranslation","hasFieldErrors","jsxs","fieldError","MultipleErrorsContent","errors","index","visibleFieldErrors","isLoading","LoadingIndicator","hasErrors","firstError","FadeIn","LoaderWithMetrics","loadingStartTime","useRef","observabilityRef","componentNameRef","useEffect","duration","SuspenseFallback","QueryErrorResetBoundary","resetQueries","ErrorBoundary","Suspense"],"mappings":"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"}

package/dist/components/Base/createCompoundContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"createCompoundContext.js","sources":["../../../src/components/Base/createCompoundContext.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport function createCompoundContext<T>(contextName: string, defaultValue: T | null = null) {\n  const context = createContext<T | null>(defaultValue)\n\n  const useCompoundContext = () => {\n    const ctx = useContext(context)\n    if (!ctx) {\n      throw new Error(`${contextName} must be used within its Provider.`)\n    }\n    return ctx\n  }\n\n  return [useCompoundContext, context.Provider] as const\n}\n"],"names":["createCompoundContext","contextName","defaultValue","context","createContext","ctx","useContext"],"mappings":";AAEO,SAASA,EAAyBC,GAAqBC,IAAyB,MAAM;AAC3F,QAAMC,IAAUC,EAAwBF,CAAY;AAUpD,SAAO,CARoB,MAAM;AAC/B,UAAMG,IAAMC,EAAWH,CAAO;AAC9B,QAAI,CAACE;AACH,YAAM,IAAI,MAAM,GAAGJ,CAAW,oCAAoC;AAEpE,WAAOI;AAAA,EACT,GAE4BF,EAAQ,QAAQ;AAC9C;"}
+{"version":3,"file":"createCompoundContext.js","sources":["../../../src/components/Base/createCompoundContext.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport function createCompoundContext<T>(contextName: string, defaultValue: T | null = null) {\n  const context = createContext(defaultValue)\n\n  const useCompoundContext = () => {\n    const ctx = useContext(context)\n    if (!ctx) {\n      throw new Error(`${contextName} must be used within its Provider.`)\n    }\n    return ctx\n  }\n\n  return [useCompoundContext, context.Provider] as const\n}\n"],"names":["createCompoundContext","contextName","defaultValue","context","createContext","ctx","useContext"],"mappings":";AAEO,SAASA,EAAyBC,GAAqBC,IAAyB,MAAM;AAC3F,QAAMC,IAAUC,EAAcF,CAAY;AAU1C,SAAO,CARoB,MAAM;AAC/B,UAAMG,IAAMC,EAAWH,CAAO;AAC9B,QAAI,CAACE;AACH,YAAM,IAAI,MAAM,GAAGJ,CAAW,oCAAoC;AAEpE,WAAOI;AAAA,EACT,GAE4BF,EAAQ,QAAQ;AAC9C;"}

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

@@ -1,4 +1,4 @@
 import "./types/i18next.d.ts"
-export { BaseComponent, BaseBoundaries, type BaseComponentInterface, type CommonComponentInterface, } from './Base';
+export { BaseComponent, BaseBoundaries, BaseLayout, type BaseComponentInterface, type BaseLayoutProps, type BaseBoundariesProps, type CommonComponentInterface, } from './Base';
 export { createCompoundContext } from './createCompoundContext';
 export { useBase } from './useBase';

package/dist/components/Base/useBase.d.ts

@@ -1,14 +1,10 @@
-import { GustoEmbeddedError } from '@gusto/embedded-api/models/errors/gustoembeddederror';
-import { SDKValidationError } from '@gusto/embedded-api/models/errors/sdkvalidationerror';
-import { EntityErrorObject } from '@gusto/embedded-api/models/components/entityerrorobject';
 import { EventType } from '../../shared/constants';
 import { LoadingIndicatorContextProps } from '../../contexts/LoadingIndicatorProvider/useLoadingIndicator';
+import { SDKError } from '../../types/sdkError';
 export type OnEventType<K, T> = (type: K, data?: T) => void;
-export type KnownErrors = GustoEmbeddedError | SDKValidationError;
 interface BaseContextProps {
-    error: KnownErrors | null;
-    fieldErrors: Array<EntityErrorObject> | null;
-    setError: (err: KnownErrors | null) => void;
+    error: SDKError | null;
+    setError: (err: SDKError | null) => void;
     onEvent: OnEventType<EventType, unknown>;
     baseSubmitHandler: <T>(formData: T, componentHandler: (payload: T) => Promise<void>) => Promise<void>;
     LoadingIndicator: LoadingIndicatorContextProps['LoadingIndicator'];

package/dist/components/Base/useBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"useBase.js","sources":["../../../src/components/Base/useBase.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport type { GustoEmbeddedError } from '@gusto/embedded-api/models/errors/gustoembeddederror'\nimport type { SDKValidationError } from '@gusto/embedded-api/models/errors/sdkvalidationerror'\nimport type { EntityErrorObject } from '@gusto/embedded-api/models/components/entityerrorobject'\nimport { type EventType } from '@/shared/constants'\nimport type { LoadingIndicatorContextProps } from '@/contexts/LoadingIndicatorProvider/useLoadingIndicator'\n\nexport type OnEventType<K, T> = (type: K, data?: T) => void\n\nexport type KnownErrors = GustoEmbeddedError | SDKValidationError\n\ninterface BaseContextProps {\n  error: KnownErrors | null\n  fieldErrors: Array<EntityErrorObject> | null\n  setError: (err: KnownErrors | null) => void\n  onEvent: OnEventType<EventType, unknown>\n  baseSubmitHandler: <T>(\n    formData: T,\n    componentHandler: (payload: T) => Promise<void>,\n  ) => Promise<void>\n  LoadingIndicator: LoadingIndicatorContextProps['LoadingIndicator']\n  componentName?: string\n}\n\nexport const BaseContext = createContext<BaseContextProps | undefined>(undefined)\n\nexport const useBase = () => {\n  const context = useContext(BaseContext)\n  if (!context) {\n    throw new Error('useBase must be used within a BaseProvider')\n  }\n  return context\n}\n"],"names":["BaseContext","createContext","useBase","context","useContext"],"mappings":";AAwBO,MAAMA,IAAcC,EAA4C,MAAS,GAEnEC,IAAU,MAAM;AAC3B,QAAMC,IAAUC,EAAWJ,CAAW;AACtC,MAAI,CAACG;AACH,UAAM,IAAI,MAAM,4CAA4C;AAE9D,SAAOA;AACT;"}
+{"version":3,"file":"useBase.js","sources":["../../../src/components/Base/useBase.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport { type EventType } from '@/shared/constants'\nimport type { LoadingIndicatorContextProps } from '@/contexts/LoadingIndicatorProvider/useLoadingIndicator'\nimport type { SDKError } from '@/types/sdkError'\n\nexport type OnEventType<K, T> = (type: K, data?: T) => void\n\ninterface BaseContextProps {\n  error: SDKError | null\n  setError: (err: SDKError | null) => void\n  onEvent: OnEventType<EventType, unknown>\n  baseSubmitHandler: <T>(\n    formData: T,\n    componentHandler: (payload: T) => Promise<void>,\n  ) => Promise<void>\n  LoadingIndicator: LoadingIndicatorContextProps['LoadingIndicator']\n  componentName?: string\n}\n\nexport const BaseContext = createContext<BaseContextProps | undefined>(undefined)\n\nexport const useBase = () => {\n  const context = useContext(BaseContext)\n  if (!context) {\n    throw new Error('useBase must be used within a BaseProvider')\n  }\n  return context\n}\n"],"names":["BaseContext","createContext","useBase","context","useContext"],"mappings":";AAmBO,MAAMA,IAAcC,EAA4C,MAAS,GAEnEC,IAAU,MAAM;AAC3B,QAAMC,IAAUC,EAAWJ,CAAW;AACtC,MAAI,CAACG;AACH,UAAM,IAAI,MAAM,4CAA4C;AAE9D,SAAOA;AACT;"}

package/dist/components/Base/useBaseSubmit.d.ts

@@ -1,10 +1,8 @@
-import { EntityErrorObject } from '@gusto/embedded-api/models/components/entityerrorobject';
-import { KnownErrors } from './useBase';
+import { SDKError } from '../../types/sdkError';
 type SubmitHandler<T> = (data: T) => Promise<void>;
 export declare const useBaseSubmit: (componentName?: string) => {
     baseSubmitHandler: <T>(data: T, componentHandler: SubmitHandler<T>) => Promise<void>;
-    error: KnownErrors | null;
-    fieldErrors: EntityErrorObject[] | null;
-    setError: (error: KnownErrors | null) => void;
+    error: SDKError | null;
+    setError: import('react').Dispatch<import('react').SetStateAction<SDKError | null>>;
 };
 export {};