@gusto/embedded-react-sdk 0.34.0 → 0.35.0-rc.2

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # Changelog
 
+## 0.35.0
+
+### Features & Enhancements
+
+- Integrate tax withholding config into off-cycle payroll creation
+- Add gross up modal to PayrollConfiguration kebab menu
+
+### Fixes
+
+- Update payroll deadline time from 1PM to 4PM Pacific in calendar preview
+- Adjust minimum wage controls for states without tip credits
+- Updated to use correct translation keys
+- Handle date field serialization in state taxes form
+- Preset payment date based on company payment speed
+
+### Chores & Maintenance
+
+- Add comprehensive tests for rem conversion utilities
+- Improve Cursor configuration for team productivity
+- Upgrade vitest to v4, coverage-v8 to v4, and plugin-react-swc to v4
+- Bump react-i18next from 16.5.4 to 16.5.8
+- Bump i18next from 25.8.13 to 25.8.18
+- Bump dompurify from 3.3.2 to 3.3.3
+- Bump react-aria from 3.45.0 to 3.47.0
+- Bump sass-embedded from 1.97.3 to 1.98.0
+- Bump typescript-eslint from 8.56.1 to 8.57.0
+- Bump eslint-plugin-storybook from 10.2.15 to 10.2.17
+- Bump @storybook/react-vite from 10.2.15 to 10.2.17
+- Bump @storybook/addon-docs from 10.2.14 to 10.2.17
+- Bump @storybook/addon-a11y from 10.2.16 to 10.2.17
+- Bump @storybook/addon-onboarding from 10.2.15 to 10.2.17
+- Bump storybook from 10.2.16 to 10.2.17
+- Bump lint-staged from 16.3.2 to 16.3.3
+- Bump eslint from 9.39.3 to 9.39.4
+- Bump @commitlint/cli from 20.4.3 to 20.4.4
+- Bump @commitlint/config-conventional from 20.4.3 to 20.4.4
+
 ## 0.34.0
 
 ### Features & Enhancements
@@ -7,6 +44,7 @@
 - Integrate employee selection into OffCycleCreation
 - Add wire-in confirmation alert and API version header
 - Optimize ThemeProvider style tag injection and CSS generation
+- Optimize rem conversion system with caching to improve performance
 
 ### Fixes
 

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

@@ -16,7 +16,10 @@ export interface BaseComponentInterface<TResourceKey extends keyof Resources = k
     LoaderComponent?: BaseBoundariesProps['LoaderComponent'];
     onEvent: OnEventType<EventType, unknown>;
 }
-export declare const BaseComponent: <TResourceKey extends keyof Resources = keyof Resources>({ children, FallbackComponent, LoaderComponent: LoadingIndicatorFromProps, onEvent, }: BaseComponentInterface<TResourceKey>) => import("react/jsx-runtime").JSX.Element;
+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 {
     children?: ReactNode;
     error: KnownErrors | null;
@@ -28,6 +31,7 @@ export interface BaseBoundariesProps {
     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, }: BaseBoundariesProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BaseBoundaries: ({ children, FallbackComponent, LoaderComponent: LoadingIndicatorFromProps, onErrorBoundaryError, componentName, }: BaseBoundariesProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Base/Base.js

@@ -1,80 +1,126 @@
-import { jsx as r, jsxs as d } from "react/jsx-runtime";
-import { Suspense as L } from "react";
-import { ErrorBoundary as C } from "react-error-boundary";
-import { useTranslation as h } from "react-i18next";
-import { GustoEmbeddedError as B } from "@gusto/embedded-api/models/errors/gustoembeddederror";
-import { SDKValidationError as x } from "@gusto/embedded-api/models/errors/sdkvalidationerror";
-import { QueryErrorResetBoundary as I } from "@tanstack/react-query";
-import { FadeIn as b } from "../Common/FadeIn/FadeIn.js";
-import { BaseContext as g } from "./useBase.js";
-import { useBaseSubmit as y } from "./useBaseSubmit.js";
-import { componentEvents as R } from "../../shared/constants.js";
+import { jsx as s, jsxs as l } from "react/jsx-runtime";
+import { Suspense as x, useRef as u, useEffect as f } 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 c } from "../Common/InternalError/InternalError.js";
-import { useComponentContext as F } from "../../contexts/ComponentAdapter/useComponentContext.js";
-import { useLoadingIndicator as p } from "../../contexts/LoadingIndicatorProvider/useLoadingIndicator.js";
-import { renderErrorList as S } from "../../helpers/apiErrorToList.js";
-const M = ({
-  children: s,
-  FallbackComponent: n = c,
-  LoaderComponent: e,
-  onEvent: o
+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
 }) => {
-  const { error: i, fieldErrors: t, baseSubmitHandler: a, setError: l } = y(), { LoadingIndicator: u } = p(), m = e ?? u, f = (E) => {
-    o(R.ERROR, E);
+  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()
+    });
   };
-  return /* @__PURE__ */ r(
-    g.Provider,
+  return /* @__PURE__ */ s(
+    w.Provider,
     {
       value: {
-        error: i,
-        fieldErrors: t,
-        setError: l,
-        onEvent: o,
-        baseSubmitHandler: a,
-        LoadingIndicator: m
+        error: t,
+        fieldErrors: a,
+        setError: d,
+        onEvent: e,
+        baseSubmitHandler: m,
+        LoadingIndicator: p,
+        componentName: o
       },
-      children: /* @__PURE__ */ r(
-        j,
+      children: /* @__PURE__ */ s(
+        U,
         {
-          FallbackComponent: n,
-          LoaderComponent: m,
-          onErrorBoundaryError: f,
-          children: /* @__PURE__ */ r(T, { error: i, fieldErrors: t, children: s })
+          FallbackComponent: r,
+          LoaderComponent: p,
+          onErrorBoundaryError: y,
+          componentName: o,
+          children: /* @__PURE__ */ s(M, { error: t, fieldErrors: a, children: i })
         }
       )
     }
   );
-}, T = ({ children: s, error: n, fieldErrors: e }) => {
-  const o = F(), { t: i } = h(), t = !!e?.length;
-  return /* @__PURE__ */ d(b, { children: [
-    (n || e) && /* @__PURE__ */ d(o.Alert, { label: i("status.errorEncountered"), status: "error", children: [
-      t && /* @__PURE__ */ r(o.UnorderedList, { items: S(e) }),
-      !t && n instanceof B && /* @__PURE__ */ r(o.Text, { children: i("errors.unknownError") }),
-      !t && n instanceof x && /* @__PURE__ */ r(o.Text, { as: "pre", children: n.pretty() })
+}, 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() })
     ] }),
-    s
+    i
   ] });
-}, j = ({
-  children: s,
-  FallbackComponent: n = c,
-  LoaderComponent: e,
-  onErrorBoundaryError: o
+}, O = ({
+  LoaderComponent: i,
+  observability: r,
+  componentName: n
+}) => {
+  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?.({
+      name: "sdk.component.loading_duration",
+      value: a,
+      unit: "ms",
+      tags: t.current ? { component: t.current } : void 0,
+      timestamp: Date.now()
+    });
+  }, []), /* @__PURE__ */ s(i, {});
+}, U = ({
+  children: i,
+  FallbackComponent: r = E,
+  LoaderComponent: n,
+  onErrorBoundaryError: e,
+  componentName: o
 }) => {
-  const { LoadingIndicator: i } = p(), t = e ?? i;
-  return /* @__PURE__ */ r(I, { children: ({ reset: a }) => /* @__PURE__ */ r(
-    C,
+  const { LoadingIndicator: t } = L(), a = n ?? t, { observability: m } = g();
+  return /* @__PURE__ */ s(R, { children: ({ reset: d }) => /* @__PURE__ */ s(
+    B,
     {
-      FallbackComponent: n,
-      onReset: a,
-      onError: o,
-      children: /* @__PURE__ */ r(L, { fallback: /* @__PURE__ */ r(t, {}), children: s })
+      FallbackComponent: r,
+      onReset: d,
+      onError: e,
+      children: /* @__PURE__ */ s(
+        x,
+        {
+          fallback: /* @__PURE__ */ s(
+            O,
+            {
+              LoaderComponent: a,
+              observability: m,
+              componentName: o
+            }
+          ),
+          children: i
+        }
+      )
     }
   ) });
 };
 export {
-  j as BaseBoundaries,
-  M as BaseComponent,
-  T as BaseLayout
+  U as BaseBoundaries,
+  rr as BaseComponent,
+  M 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 } 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 { 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\nexport const BaseComponent = <TResourceKey extends keyof Resources = keyof Resources>({\n  children,\n  FallbackComponent = InternalError,\n  LoaderComponent: LoadingIndicatorFromProps,\n  onEvent,\n}: BaseComponentInterface<TResourceKey>) => {\n  const { error, fieldErrors, baseSubmitHandler, setError } = useBaseSubmit()\n\n  const { LoadingIndicator: LoadingIndicatorFromContext } = useLoadingIndicator()\n  const LoaderComponent = LoadingIndicatorFromProps ?? LoadingIndicatorFromContext\n\n  const onErrorBoundaryError = (error: unknown) => {\n    onEvent(componentEvents.ERROR, error)\n  }\n\n  return (\n    <BaseContext.Provider\n      value={{\n        error,\n        fieldErrors,\n        setError,\n        onEvent,\n        baseSubmitHandler,\n        LoadingIndicator: LoaderComponent,\n      }}\n    >\n      <BaseBoundaries\n        FallbackComponent={FallbackComponent}\n        LoaderComponent={LoaderComponent}\n        onErrorBoundaryError={onErrorBoundaryError}\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\nexport interface BaseBoundariesProps {\n  children?: ReactNode\n  FallbackComponent?: (props: FallbackProps) => JSX.Element\n  LoaderComponent?: LoadingIndicatorContextProps['LoadingIndicator']\n  onErrorBoundaryError?: (error: unknown, info: ErrorInfo) => void\n}\n\nexport const BaseBoundaries = ({\n  children,\n  FallbackComponent = InternalError,\n  LoaderComponent: LoadingIndicatorFromProps,\n  onErrorBoundaryError,\n}: BaseBoundariesProps) => {\n  const { LoadingIndicator: LoadingIndicatorFromContext } = useLoadingIndicator()\n  const LoaderComponent = LoadingIndicatorFromProps ?? LoadingIndicatorFromContext\n\n  return (\n    <QueryErrorResetBoundary>\n      {({ reset: resetQueries }) => (\n        <ErrorBoundary\n          FallbackComponent={FallbackComponent}\n          onReset={resetQueries}\n          onError={onErrorBoundaryError}\n        >\n          <Suspense fallback={<LoaderComponent />}>{children}</Suspense>\n        </ErrorBoundary>\n      )}\n    </QueryErrorResetBoundary>\n  )\n}\n"],"names":["BaseComponent","children","FallbackComponent","InternalError","LoadingIndicatorFromProps","onEvent","error","fieldErrors","baseSubmitHandler","setError","useBaseSubmit","LoadingIndicatorFromContext","useLoadingIndicator","LoaderComponent","onErrorBoundaryError","componentEvents","jsx","BaseContext","BaseBoundaries","BaseLayout","Components","useComponentContext","t","useTranslation","hasDisplayableFieldErrors","FadeIn","jsxs","renderErrorList","GustoEmbeddedError","SDKValidationError","QueryErrorResetBoundary","resetQueries","ErrorBoundary","Suspense"],"mappings":";;;;;;;;;;;;;;;;AAoCO,MAAMA,IAAgB,CAAyD;AAAA,EACpF,UAAAC;AAAA,EACA,mBAAAC,IAAoBC;AAAA,EACpB,iBAAiBC;AAAA,EACjB,SAAAC;AACF,MAA4C;AAC1C,QAAM,EAAE,OAAAC,GAAO,aAAAC,GAAa,mBAAAC,GAAmB,UAAAC,EAAA,IAAaC,EAAA,GAEtD,EAAE,kBAAkBC,EAAA,IAAgCC,EAAA,GACpDC,IAAkBT,KAA6BO,GAE/CG,IAAuB,CAACR,MAAmB;AAC/C,IAAAD,EAAQU,EAAgB,OAAOT,CAAK;AAAA,EACtC;AAEA,SACE,gBAAAU;AAAA,IAACC,EAAY;AAAA,IAAZ;AAAA,MACC,OAAO;AAAA,QACL,OAAAX;AAAA,QACA,aAAAC;AAAA,QACA,UAAAE;AAAA,QACA,SAAAJ;AAAA,QACA,mBAAAG;AAAA,QACA,kBAAkBK;AAAA,MAAA;AAAA,MAGpB,UAAA,gBAAAG;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,mBAAAhB;AAAA,UACA,iBAAAW;AAAA,UACA,sBAAAC;AAAA,UAEA,UAAA,gBAAAE,EAACG,GAAA,EAAW,OAAAb,GAAc,aAAAC,GACvB,UAAAN,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN,GAQakB,IAAa,CAAC,EAAE,UAAAlB,GAAU,OAAAK,GAAO,aAAAC,QAAmC;AAC/E,QAAMa,IAAaC,EAAA,GACb,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACRC,IAA4B,EAAQjB,GAAa;AAEvD,2BACGkB,GAAA,EACG,UAAA;AAAA,KAAAnB,KAASC,MACT,gBAAAmB,EAACN,EAAW,OAAX,EAAiB,OAAOE,EAAE,yBAAyB,GAAG,QAAO,SAC3D,UAAA;AAAA,MAAAE,uBACEJ,EAAW,eAAX,EAAyB,OAAOO,EAAgBpB,CAAY,GAAG;AAAA,MAEjE,CAACiB,KAA6BlB,aAAiBsB,KAC9C,gBAAAZ,EAACI,EAAW,MAAX,EAAiB,UAAAE,EAAE,qBAAqB,EAAA,CAAE;AAAA,MAE5C,CAACE,KAA6BlB,aAAiBuB,KAC9C,gBAAAb,EAACI,EAAW,MAAX,EAAgB,IAAG,OAAO,UAAAd,EAAM,OAAA,EAAO,CAAE;AAAA,IAAA,GAE9C;AAAA,IAEDL;AAAA,EAAA,GACH;AAEJ,GASaiB,IAAiB,CAAC;AAAA,EAC7B,UAAAjB;AAAA,EACA,mBAAAC,IAAoBC;AAAA,EACpB,iBAAiBC;AAAA,EACjB,sBAAAU;AACF,MAA2B;AACzB,QAAM,EAAE,kBAAkBH,EAAA,IAAgCC,EAAA,GACpDC,IAAkBT,KAA6BO;AAErD,2BACGmB,GAAA,EACE,UAAA,CAAC,EAAE,OAAOC,QACT,gBAAAf;AAAA,IAACgB;AAAA,IAAA;AAAA,MACC,mBAAA9B;AAAA,MACA,SAAS6B;AAAA,MACT,SAASjB;AAAA,MAET,4BAACmB,GAAA,EAAS,UAAU,gBAAAjB,EAACH,GAAA,EAAgB,GAAK,UAAAZ,EAAA,CAAS;AAAA,IAAA;AAAA,EAAA,GAGzD;AAEJ;"}
+{"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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"}

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

@@ -12,6 +12,7 @@ interface BaseContextProps {
     onEvent: OnEventType<EventType, unknown>;
     baseSubmitHandler: <T>(formData: T, componentHandler: (payload: T) => Promise<void>) => Promise<void>;
     LoadingIndicator: LoadingIndicatorContextProps['LoadingIndicator'];
+    componentName?: string;
 }
 export declare const BaseContext: import('react').Context<BaseContextProps | undefined>;
 export declare const useBase: () => BaseContextProps;

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}\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":";AAuBO,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 { 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;"}

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

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

package/dist/components/Base/useBaseSubmit.js

@@ -1,46 +1,73 @@
-import { useState as i, useCallback as l } from "react";
+import { useState as u, useCallback as c } from "react";
 import { APIError as p } from "@gusto/embedded-api/models/errors/apierror";
-import { GustoEmbeddedError as d } from "@gusto/embedded-api/models/errors/gustoembeddederror";
-import { SDKValidationError as b } from "@gusto/embedded-api/models/errors/sdkvalidationerror";
-import { UnprocessableEntityErrorObject as c } from "@gusto/embedded-api/models/errors/unprocessableentityerrorobject";
-import { useAsyncError as y } from "../../hooks/useAsyncError.js";
-import { getFieldErrors as g } from "../../helpers/apiErrorToList.js";
-const H = () => {
-  const [m, s] = i(null), [f, t] = i(null), n = y(), E = l((e) => {
-    s(e), e || t(null);
-  }, []), u = (e) => {
-    if (s(e), e instanceof c && Array.isArray(e.errors)) {
-      const a = e.errors.flatMap((r) => g(r));
-      if (a.length > 0)
-        t(a);
-      else {
-        const r = e.errors.filter((o) => o.message).map((o) => ({
-          errorKey: o.errorKey,
-          message: o.message ?? "",
-          category: o.category
-        }));
-        r.length > 0 && t(r);
+import { GustoEmbeddedError as g } from "@gusto/embedded-api/models/errors/gustoembeddederror";
+import { SDKValidationError as h } from "@gusto/embedded-api/models/errors/sdkvalidationerror";
+import { UnprocessableEntityErrorObject as b } from "@gusto/embedded-api/models/errors/unprocessableentityerrorobject";
+import { useAsyncError as v } from "../../hooks/useAsyncError.js";
+import { useObservability as w } from "../../contexts/ObservabilityProvider/useObservability.js";
+import { createObservabilityError as S } from "../../contexts/ObservabilityProvider/observabilityUtils.js";
+import { getFieldErrors as A } from "../../helpers/apiErrorToList.js";
+const B = (o) => {
+  const [E, i] = u(null), [y, a] = u(null), f = v(), { observability: n } = w(), d = c((t) => {
+    i(t), t || a(null);
+  }, []), m = c(
+    (t) => {
+      i(t);
+      const e = S(t);
+      if (e && n?.onError?.({
+        ...e,
+        context: {
+          ...e.context,
+          componentName: o
+        }
+      }), t instanceof b && Array.isArray(t.errors)) {
+        const l = t.errors.flatMap((s) => A(s));
+        if (l.length > 0)
+          a(l);
+        else {
+          const s = t.errors.filter((r) => r.message).map((r) => ({
+            errorKey: r.errorKey,
+            message: r.message ?? "",
+            category: r.category
+          }));
+          s.length > 0 && a(s);
+        }
       }
-    }
-  };
+    },
+    [n, o]
+  );
   return {
-    baseSubmitHandler: l(
-      async (e, a) => {
-        s(null), t(null);
+    baseSubmitHandler: c(
+      async (t, e) => {
+        const l = Date.now();
+        i(null), a(null);
+        let s = !1;
         try {
-          await a(e);
+          await e(t), s = !0;
         } catch (r) {
-          r instanceof p || r instanceof b || r instanceof c || r instanceof d ? u(r) : n(r);
+          r instanceof p || r instanceof h || r instanceof b || r instanceof g ? m(r) : f(r);
+        } finally {
+          const r = Date.now() - l;
+          n?.onMetric?.({
+            name: "sdk.form.submit_duration",
+            value: r,
+            unit: "ms",
+            tags: {
+              status: s ? "success" : "error",
+              ...o && { component: o }
+            },
+            timestamp: Date.now()
+          });
         }
       },
-      [s, n]
+      [i, f, n, o, m]
     ),
-    error: m,
-    fieldErrors: f,
-    setError: E
+    error: E,
+    fieldErrors: y,
+    setError: d
   };
 };
 export {
-  H as useBaseSubmit
+  B as useBaseSubmit
 };
 //# sourceMappingURL=useBaseSubmit.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useBaseSubmit.js","sources":["../../../src/components/Base/useBaseSubmit.ts"],"sourcesContent":["import { useState, useCallback } from 'react'\nimport type { EntityErrorObject } from '@gusto/embedded-api/models/components/entityerrorobject'\nimport { APIError } from '@gusto/embedded-api/models/errors/apierror'\nimport { GustoEmbeddedError } from '@gusto/embedded-api/models/errors/gustoembeddederror'\nimport { SDKValidationError } from '@gusto/embedded-api/models/errors/sdkvalidationerror'\nimport { UnprocessableEntityErrorObject } from '@gusto/embedded-api/models/errors/unprocessableentityerrorobject'\nimport type { KnownErrors } from './useBase'\nimport { useAsyncError } from '@/hooks/useAsyncError'\nimport { getFieldErrors } from '@/helpers/apiErrorToList'\n\ntype SubmitHandler<T> = (data: T) => Promise<void>\n\nexport const useBaseSubmit = () => {\n  const [error, setError] = useState<KnownErrors | null>(null)\n  const [fieldErrors, setFieldErrors] = useState<EntityErrorObject[] | null>(null)\n  const throwError = useAsyncError()\n\n  // Enhanced setError that also clears fieldErrors when error is cleared\n  const setErrorWithFieldsClear = useCallback((error: KnownErrors | null) => {\n    setError(error)\n    if (!error) {\n      setFieldErrors(null)\n    }\n  }, [])\n\n  const processError = (error: KnownErrors) => {\n    setError(error)\n    if (error instanceof UnprocessableEntityErrorObject && Array.isArray(error.errors)) {\n      const parsed = error.errors.flatMap(err => getFieldErrors(err))\n      if (parsed.length > 0) {\n        setFieldErrors(parsed)\n      } else {\n        const fallbackErrors: EntityErrorObject[] = error.errors\n          .filter(err => err.message)\n          .map(err => ({\n            errorKey: err.errorKey,\n            message: err.message ?? '',\n            category: err.category,\n          }))\n        if (fallbackErrors.length > 0) {\n          setFieldErrors(fallbackErrors)\n        }\n      }\n    }\n  }\n\n  const baseSubmitHandler = useCallback(\n    async <T>(data: T, componentHandler: SubmitHandler<T>) => {\n      setError(null)\n      setFieldErrors(null)\n      try {\n        await componentHandler(data)\n      } catch (err) {\n        if (\n          err instanceof APIError ||\n          err instanceof SDKValidationError ||\n          err instanceof UnprocessableEntityErrorObject ||\n          err instanceof GustoEmbeddedError\n        ) {\n          processError(err)\n        } else throwError(err)\n      }\n    },\n    [setError, throwError],\n  )\n\n  return {\n    baseSubmitHandler,\n    error,\n    fieldErrors,\n    setError: setErrorWithFieldsClear,\n  }\n}\n"],"names":["useBaseSubmit","error","setError","useState","fieldErrors","setFieldErrors","throwError","useAsyncError","setErrorWithFieldsClear","useCallback","processError","UnprocessableEntityErrorObject","parsed","err","getFieldErrors","fallbackErrors","data","componentHandler","APIError","SDKValidationError","GustoEmbeddedError"],"mappings":";;;;;;;AAYO,MAAMA,IAAgB,MAAM;AACjC,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAA6B,IAAI,GACrD,CAACC,GAAaC,CAAc,IAAIF,EAAqC,IAAI,GACzEG,IAAaC,EAAA,GAGbC,IAA0BC,EAAY,CAACR,MAA8B;AACzE,IAAAC,EAASD,CAAK,GACTA,KACHI,EAAe,IAAI;AAAA,EAEvB,GAAG,CAAA,CAAE,GAECK,IAAe,CAACT,MAAuB;AAE3C,QADAC,EAASD,CAAK,GACVA,aAAiBU,KAAkC,MAAM,QAAQV,EAAM,MAAM,GAAG;AAClF,YAAMW,IAASX,EAAM,OAAO,QAAQ,CAAAY,MAAOC,EAAeD,CAAG,CAAC;AAC9D,UAAID,EAAO,SAAS;AAClB,QAAAP,EAAeO,CAAM;AAAA,WAChB;AACL,cAAMG,IAAsCd,EAAM,OAC/C,OAAO,OAAOY,EAAI,OAAO,EACzB,IAAI,CAAAA,OAAQ;AAAA,UACX,UAAUA,EAAI;AAAA,UACd,SAASA,EAAI,WAAW;AAAA,UACxB,UAAUA,EAAI;AAAA,QAAA,EACd;AACJ,QAAIE,EAAe,SAAS,KAC1BV,EAAeU,CAAc;AAAA,MAEjC;AAAA,IACF;AAAA,EACF;AAsBA,SAAO;AAAA,IACL,mBArBwBN;AAAA,MACxB,OAAUO,GAASC,MAAuC;AACxD,QAAAf,EAAS,IAAI,GACbG,EAAe,IAAI;AACnB,YAAI;AACF,gBAAMY,EAAiBD,CAAI;AAAA,QAC7B,SAASH,GAAK;AACZ,UACEA,aAAeK,KACfL,aAAeM,KACfN,aAAeF,KACfE,aAAeO,IAEfV,EAAaG,CAAG,MACAA,CAAG;AAAA,QACvB;AAAA,MACF;AAAA,MACA,CAACX,GAAUI,CAAU;AAAA,IAAA;AAAA,IAKrB,OAAAL;AAAA,IACA,aAAAG;AAAA,IACA,UAAUI;AAAA,EAAA;AAEd;"}
+{"version":3,"file":"useBaseSubmit.js","sources":["../../../src/components/Base/useBaseSubmit.ts"],"sourcesContent":["import { useState, useCallback } from 'react'\nimport type { EntityErrorObject } from '@gusto/embedded-api/models/components/entityerrorobject'\nimport { APIError } from '@gusto/embedded-api/models/errors/apierror'\nimport { GustoEmbeddedError } from '@gusto/embedded-api/models/errors/gustoembeddederror'\nimport { SDKValidationError } from '@gusto/embedded-api/models/errors/sdkvalidationerror'\nimport { UnprocessableEntityErrorObject } from '@gusto/embedded-api/models/errors/unprocessableentityerrorobject'\nimport type { KnownErrors } from './useBase'\nimport { useAsyncError } from '@/hooks/useAsyncError'\nimport { useObservability } from '@/contexts/ObservabilityProvider/useObservability'\nimport { createObservabilityError } from '@/contexts/ObservabilityProvider/observabilityUtils'\nimport { getFieldErrors } from '@/helpers/apiErrorToList'\n\ntype SubmitHandler<T> = (data: T) => Promise<void>\n\nexport const useBaseSubmit = (componentName?: string) => {\n  const [error, setError] = useState<KnownErrors | null>(null)\n  const [fieldErrors, setFieldErrors] = useState<EntityErrorObject[] | null>(null)\n  const throwError = useAsyncError()\n  const { observability } = useObservability()\n\n  // Enhanced setError that also clears fieldErrors when error is cleared\n  const setErrorWithFieldsClear = useCallback((error: KnownErrors | null) => {\n    setError(error)\n    if (!error) {\n      setFieldErrors(null)\n    }\n  }, [])\n\n  const processError = useCallback(\n    (error: KnownErrors) => {\n      setError(error)\n\n      // Report error to observability\n      const observabilityError = createObservabilityError(error)\n      if (observabilityError) {\n        observability?.onError?.({\n          ...observabilityError,\n          context: {\n            ...observabilityError.context,\n            componentName,\n          },\n        })\n      }\n\n      if (error instanceof UnprocessableEntityErrorObject && Array.isArray(error.errors)) {\n        const parsed = error.errors.flatMap(err => getFieldErrors(err))\n        if (parsed.length > 0) {\n          setFieldErrors(parsed)\n        } else {\n          const fallbackErrors: EntityErrorObject[] = error.errors\n            .filter(err => err.message)\n            .map(err => ({\n              errorKey: err.errorKey,\n              message: err.message ?? '',\n              category: err.category,\n            }))\n          if (fallbackErrors.length > 0) {\n            setFieldErrors(fallbackErrors)\n          }\n        }\n      }\n    },\n    [observability, componentName],\n  )\n\n  const baseSubmitHandler = useCallback(\n    async <T>(data: T, componentHandler: SubmitHandler<T>) => {\n      const startTime = Date.now()\n      setError(null)\n      setFieldErrors(null)\n\n      let success = false\n\n      try {\n        await componentHandler(data)\n        success = true\n      } catch (err) {\n        if (\n          err instanceof APIError ||\n          err instanceof SDKValidationError ||\n          err instanceof UnprocessableEntityErrorObject ||\n          err instanceof GustoEmbeddedError\n        ) {\n          processError(err)\n        } else throwError(err)\n      } finally {\n        const duration = Date.now() - startTime\n        observability?.onMetric?.({\n          name: 'sdk.form.submit_duration',\n          value: duration,\n          unit: 'ms',\n          tags: {\n            status: success ? 'success' : 'error',\n            ...(componentName && { component: componentName }),\n          },\n          timestamp: Date.now(),\n        })\n      }\n    },\n    [setError, throwError, observability, componentName, processError],\n  )\n\n  return {\n    baseSubmitHandler,\n    error,\n    fieldErrors,\n    setError: setErrorWithFieldsClear,\n  }\n}\n"],"names":["useBaseSubmit","componentName","error","setError","useState","fieldErrors","setFieldErrors","throwError","useAsyncError","observability","useObservability","setErrorWithFieldsClear","useCallback","processError","observabilityError","createObservabilityError","UnprocessableEntityErrorObject","parsed","err","getFieldErrors","fallbackErrors","data","componentHandler","startTime","success","APIError","SDKValidationError","GustoEmbeddedError","duration"],"mappings":";;;;;;;;;AAcO,MAAMA,IAAgB,CAACC,MAA2B;AACvD,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAA6B,IAAI,GACrD,CAACC,GAAaC,CAAc,IAAIF,EAAqC,IAAI,GACzEG,IAAaC,EAAA,GACb,EAAE,eAAAC,EAAA,IAAkBC,EAAA,GAGpBC,IAA0BC,EAAY,CAACV,MAA8B;AACzE,IAAAC,EAASD,CAAK,GACTA,KACHI,EAAe,IAAI;AAAA,EAEvB,GAAG,CAAA,CAAE,GAECO,IAAeD;AAAA,IACnB,CAACV,MAAuB;AACtB,MAAAC,EAASD,CAAK;AAGd,YAAMY,IAAqBC,EAAyBb,CAAK;AAWzD,UAVIY,KACFL,GAAe,UAAU;AAAA,QACvB,GAAGK;AAAA,QACH,SAAS;AAAA,UACP,GAAGA,EAAmB;AAAA,UACtB,eAAAb;AAAA,QAAA;AAAA,MACF,CACD,GAGCC,aAAiBc,KAAkC,MAAM,QAAQd,EAAM,MAAM,GAAG;AAClF,cAAMe,IAASf,EAAM,OAAO,QAAQ,CAAAgB,MAAOC,EAAeD,CAAG,CAAC;AAC9D,YAAID,EAAO,SAAS;AAClB,UAAAX,EAAeW,CAAM;AAAA,aAChB;AACL,gBAAMG,IAAsClB,EAAM,OAC/C,OAAO,OAAOgB,EAAI,OAAO,EACzB,IAAI,CAAAA,OAAQ;AAAA,YACX,UAAUA,EAAI;AAAA,YACd,SAASA,EAAI,WAAW;AAAA,YACxB,UAAUA,EAAI;AAAA,UAAA,EACd;AACJ,UAAIE,EAAe,SAAS,KAC1Bd,EAAec,CAAc;AAAA,QAEjC;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAACX,GAAeR,CAAa;AAAA,EAAA;AAwC/B,SAAO;AAAA,IACL,mBAtCwBW;AAAA,MACxB,OAAUS,GAASC,MAAuC;AACxD,cAAMC,IAAY,KAAK,IAAA;AACvB,QAAApB,EAAS,IAAI,GACbG,EAAe,IAAI;AAEnB,YAAIkB,IAAU;AAEd,YAAI;AACF,gBAAMF,EAAiBD,CAAI,GAC3BG,IAAU;AAAA,QACZ,SAASN,GAAK;AACZ,UACEA,aAAeO,KACfP,aAAeQ,KACfR,aAAeF,KACfE,aAAeS,IAEfd,EAAaK,CAAG,MACAA,CAAG;AAAA,QACvB,UAAA;AACE,gBAAMU,IAAW,KAAK,IAAA,IAAQL;AAC9B,UAAAd,GAAe,WAAW;AAAA,YACxB,MAAM;AAAA,YACN,OAAOmB;AAAA,YACP,MAAM;AAAA,YACN,MAAM;AAAA,cACJ,QAAQJ,IAAU,YAAY;AAAA,cAC9B,GAAIvB,KAAiB,EAAE,WAAWA,EAAA;AAAA,YAAc;AAAA,YAElD,WAAW,KAAK,IAAA;AAAA,UAAI,CACrB;AAAA,QACH;AAAA,MACF;AAAA,MACA,CAACE,GAAUI,GAAYE,GAAeR,GAAeY,CAAY;AAAA,IAAA;AAAA,IAKjE,OAAAX;AAAA,IACA,aAAAG;AAAA,IACA,UAAUM;AAAA,EAAA;AAEd;"}

package/dist/components/Common/HamburgerMenu/HamburgerMenu.d.ts

@@ -1,2 +1,2 @@
 import { HamburgerMenuProps } from './HamburgerMenuTypes';
-export declare function HamburgerMenu({ items, triggerLabel, menuLabel, onClose, isLoading, ...props }: HamburgerMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function HamburgerMenu({ items, triggerLabel, menuLabel, onClose, isLoading, placement, ...props }: HamburgerMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Common/HamburgerMenu/HamburgerMenu.js

@@ -1,26 +1,27 @@
-import { jsxs as f, Fragment as b, jsx as o } from "react/jsx-runtime";
-import { useTranslation as g } from "react-i18next";
-import { useComponentContext as C } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import x from "../../../assets/icons/hamburger.svg.js";
-import { useMenu as M } from "../../../hooks/useMenu.js";
-function T({
+import { jsxs as f, Fragment as g, jsx as o } from "react/jsx-runtime";
+import { useTranslation as C } from "react-i18next";
+import { useComponentContext as x } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import M from "../../../assets/icons/hamburger.svg.js";
+import { useMenu as d } from "../../../hooks/useMenu.js";
+function v({
   items: t,
   triggerLabel: s,
   menuLabel: m,
   onClose: a,
   isLoading: l = !1,
-  ...u
+  placement: u = "bottom end",
+  ...i
 }) {
-  const { t: e } = g("common"), r = C(), { triggerProps: i, menuProps: n } = M(), { ref: p, ...c } = i;
-  return /* @__PURE__ */ f(b, { children: [
+  const { t: e } = C("common"), r = x(), { triggerProps: p, menuProps: n } = d(), { ref: b, ...c } = p;
+  return /* @__PURE__ */ f(g, { children: [
     /* @__PURE__ */ o(
       r.ButtonIcon,
       {
         isLoading: l,
         "aria-label": s || e("labels.openMenu"),
-        buttonRef: p,
+        buttonRef: b,
         ...c,
-        children: /* @__PURE__ */ o(x, {})
+        children: /* @__PURE__ */ o(M, {})
       }
     ),
     /* @__PURE__ */ o(
@@ -30,12 +31,13 @@ function T({
         items: t,
         "aria-label": m || e("labels.menuLabel"),
         onClose: a || n.onClose,
-        ...u
+        placement: u,
+        ...i
       }
     )
   ] });
 }
 export {
-  T as HamburgerMenu
+  v as HamburgerMenu
 };
 //# sourceMappingURL=HamburgerMenu.js.map

package/dist/components/Common/HamburgerMenu/HamburgerMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"HamburgerMenu.js","sources":["../../../../src/components/Common/HamburgerMenu/HamburgerMenu.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { type HamburgerMenuProps } from './HamburgerMenuTypes'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport HamburgerIcon from '@/assets/icons/hamburger.svg?react'\nimport { useMenu } from '@/hooks/useMenu'\n\nexport function HamburgerMenu({\n  items,\n  triggerLabel,\n  menuLabel,\n  onClose,\n  isLoading = false,\n  ...props\n}: HamburgerMenuProps) {\n  const { t } = useTranslation('common')\n  const Components = useComponentContext()\n  const { triggerProps, menuProps } = useMenu()\n\n  const { ref, ...restTriggerProps } = triggerProps\n\n  return (\n    <>\n      <Components.ButtonIcon\n        isLoading={isLoading}\n        aria-label={triggerLabel || t('labels.openMenu')}\n        buttonRef={ref}\n        {...restTriggerProps}\n      >\n        <HamburgerIcon />\n      </Components.ButtonIcon>\n      <Components.Menu\n        {...menuProps}\n        items={items}\n        aria-label={menuLabel || t('labels.menuLabel')}\n        onClose={onClose || menuProps.onClose}\n        {...props}\n      />\n    </>\n  )\n}\n"],"names":["HamburgerMenu","items","triggerLabel","menuLabel","onClose","isLoading","props","t","useTranslation","Components","useComponentContext","triggerProps","menuProps","useMenu","ref","restTriggerProps","jsxs","Fragment","jsx","HamburgerIcon"],"mappings":";;;;;AAMO,SAASA,EAAc;AAAA,EAC5B,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAAuB;AACrB,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,QAAQ,GAC/BC,IAAaC,EAAA,GACb,EAAE,cAAAC,GAAc,WAAAC,EAAA,IAAcC,EAAA,GAE9B,EAAE,KAAAC,GAAK,GAAGC,EAAA,IAAqBJ;AAErC,SACE,gBAAAK,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACT,EAAW;AAAA,MAAX;AAAA,QACC,WAAAJ;AAAA,QACA,cAAYH,KAAgBK,EAAE,iBAAiB;AAAA,QAC/C,WAAWO;AAAA,QACV,GAAGC;AAAA,QAEJ,4BAACI,GAAA,CAAA,CAAc;AAAA,MAAA;AAAA,IAAA;AAAA,IAEjB,gBAAAD;AAAA,MAACT,EAAW;AAAA,MAAX;AAAA,QACE,GAAGG;AAAA,QACJ,OAAAX;AAAA,QACA,cAAYE,KAAaI,EAAE,kBAAkB;AAAA,QAC7C,SAASH,KAAWQ,EAAU;AAAA,QAC7B,GAAGN;AAAA,MAAA;AAAA,IAAA;AAAA,EACN,GACF;AAEJ;"}
+{"version":3,"file":"HamburgerMenu.js","sources":["../../../../src/components/Common/HamburgerMenu/HamburgerMenu.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { type HamburgerMenuProps } from './HamburgerMenuTypes'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport HamburgerIcon from '@/assets/icons/hamburger.svg?react'\nimport { useMenu } from '@/hooks/useMenu'\n\nexport function HamburgerMenu({\n  items,\n  triggerLabel,\n  menuLabel,\n  onClose,\n  isLoading = false,\n  placement = 'bottom end',\n  ...props\n}: HamburgerMenuProps) {\n  const { t } = useTranslation('common')\n  const Components = useComponentContext()\n  const { triggerProps, menuProps } = useMenu()\n\n  const { ref, ...restTriggerProps } = triggerProps\n\n  return (\n    <>\n      <Components.ButtonIcon\n        isLoading={isLoading}\n        aria-label={triggerLabel || t('labels.openMenu')}\n        buttonRef={ref}\n        {...restTriggerProps}\n      >\n        <HamburgerIcon />\n      </Components.ButtonIcon>\n      <Components.Menu\n        {...menuProps}\n        items={items}\n        aria-label={menuLabel || t('labels.menuLabel')}\n        onClose={onClose || menuProps.onClose}\n        placement={placement}\n        {...props}\n      />\n    </>\n  )\n}\n"],"names":["HamburgerMenu","items","triggerLabel","menuLabel","onClose","isLoading","placement","props","t","useTranslation","Components","useComponentContext","triggerProps","menuProps","useMenu","ref","restTriggerProps","jsxs","Fragment","jsx","HamburgerIcon"],"mappings":";;;;;AAMO,SAASA,EAAc;AAAA,EAC5B,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAAuB;AACrB,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,QAAQ,GAC/BC,IAAaC,EAAA,GACb,EAAE,cAAAC,GAAc,WAAAC,EAAA,IAAcC,EAAA,GAE9B,EAAE,KAAAC,GAAK,GAAGC,EAAA,IAAqBJ;AAErC,SACE,gBAAAK,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACT,EAAW;AAAA,MAAX;AAAA,QACC,WAAAL;AAAA,QACA,cAAYH,KAAgBM,EAAE,iBAAiB;AAAA,QAC/C,WAAWO;AAAA,QACV,GAAGC;AAAA,QAEJ,4BAACI,GAAA,CAAA,CAAc;AAAA,MAAA;AAAA,IAAA;AAAA,IAEjB,gBAAAD;AAAA,MAACT,EAAW;AAAA,MAAX;AAAA,QACE,GAAGG;AAAA,QACJ,OAAAZ;AAAA,QACA,cAAYE,KAAaK,EAAE,kBAAkB;AAAA,QAC7C,SAASJ,KAAWS,EAAU;AAAA,QAC9B,WAAAP;AAAA,QACC,GAAGC;AAAA,MAAA;AAAA,IAAA;AAAA,EACN,GACF;AAEJ;"}

package/dist/components/Common/HamburgerMenu/HamburgerMenuTypes.d.ts

@@ -6,4 +6,5 @@ export interface HamburgerMenuProps extends DataAttributes {
     items: MenuProps['items'];
     onClose?: () => void;
     isLoading?: boolean;
+    placement?: MenuProps['placement'];
 }

package/dist/components/Common/UI/Breadcrumbs/Breadcrumbs.js

@@ -1,9 +1,9 @@
 import { jsx as l } from "react/jsx-runtime";
 import h from "classnames";
+import { Flex as u } from "../../Flex/Flex.js";
 import { BreadcrumbsDefaults as k } from "./BreadcrumbsTypes.js";
 import r from "./Breadcrumbs.module.scss.js";
 import { applyMissingDefaults as x } from "../../../../helpers/applyMissingDefaults.js";
-import { Flex as u } from "../../Flex/Flex.js";
 function I(p) {
   const f = x(p, k), {
     className: s,

package/dist/components/Common/UI/FileInput/FileInput.js

@@ -7,13 +7,13 @@ import { FileInputDefaults as K } from "./FileInputTypes.js";
 import n from "./FileInput.module.scss.js";
 import { applyMissingDefaults as L } from "../../../../helpers/applyMissingDefaults.js";
 import { FieldLayout as O } from "../../FieldLayout/FieldLayout.js";
+import { Flex as y } from "../../Flex/Flex.js";
 import { ButtonIcon as R } from "../Button/ButtonIcon.js";
 import W from "../../../../assets/icons/icon-trashcan.svg.js";
 import Z from "../../../../assets/icons/icon-file-outline.svg.js";
 import $ from "../../../../assets/icons/icon-file-pdf.svg.js";
 import H from "../../../../assets/icons/icon-file-png.svg.js";
 import V from "../../../../assets/icons/icon-file-jpg.svg.js";
-import { Flex as y } from "../../Flex/Flex.js";
 function Q(i) {
   return i === "application/pdf" ? $ : i === "image/png" ? H : i === "image/jpeg" || i === "image/jpg" ? V : Z;
 }