@gusto/embedded-react-sdk 0.12.1 → 0.13.0

package/CHANGELOG.md

@@ -1,5 +1,144 @@
 # Changelog
 
+## 0.13.0
+
+### Features & Enhancements
+
+- Infrastructural work to support eventual RunPayroll early access
+
+## 0.12.3
+
+### Features & Enhancements
+
+- Separate `Employee.Taxes` into separate `Employee.StateTaxes` and `Employee.FederalTaxes` components and deprecate `Employee.Taxes` (See upgrade guide below)
+- Add CTA (Call to Action) functionality to ProgressBar component
+- Expose Payroll components as UNSTABLE for early access
+- Add Payroll Submit API call functionality
+
+### Fixes
+
+- Fix documentation links ending with .md extension
+
+### Chores & Maintenance
+
+- Upgrade various development dependencies for improved stability
+- Update embedded API to latest version
+
+### Migrating `Employee.Taxes` to `Employee.StateTaxes` and `Employee.FederalTaxes`
+
+We have split the `Employee.Taxes` component into dedicated `Employee.StateTaxes` and `Employee.FederalTaxes` components. The `Employee.Taxes` component is now deprecated and will be removed in a future version.
+
+#### Component Usage
+
+**Before (using combined Employee.Taxes):**
+
+```tsx
+import { Employee } from '@gusto/embedded-react-sdk'
+
+// In employee onboarding flow
+<Employee.Taxes
+  employeeId="employee-id"
+  isAdmin
+  onEvent={(eventType) => {
+    if (eventType === componentEvents.EMPLOYEE_TAXES_DONE) {
+      // called when taxes is done
+    }
+  }}
+/>
+
+// In self-onboarding flow
+<Employee.Taxes
+  employeeId="employee-id"
+  isAdmin={false}
+  onEvent={(eventType) => {
+    if (eventType === componentEvents.EMPLOYEE_TAXES_DONE) {
+      // called when taxes is done
+    }
+  }}
+/>
+```
+
+**After (using separate components):**
+
+```tsx
+import { Employee } from '@gusto/embedded-react-sdk'
+
+// In employee onboarding flow - Federal Taxes step
+<Employee.FederalTaxes
+  employeeId="employee-id"
+  onEvent={(eventType) => {
+    if (eventType === componentEvents.EMPLOYEE_FEDERAL_TAXES_DONE) {
+      // called when federal taxes is done
+    }
+  }}
+/>
+
+// In employee onboarding flow - State Taxes step
+<Employee.StateTaxes
+  employeeId="employee-id"
+  isAdmin
+  onEvent={(eventType) => {
+    if (eventType === componentEvents.EMPLOYEE_STATE_TAXES_DONE) {
+      // called when state taxes is done
+    }
+  }}
+/>
+
+// In self-onboarding flow - Federal Taxes step
+<Employee.FederalTaxes
+  employeeId="employee-id"
+  onEvent={(eventType) => {
+    if (eventType === componentEvents.EMPLOYEE_FEDERAL_TAXES_DONE) {
+      // called when federal taxes is done
+    }
+  }}
+/>
+
+// In self-onboarding flow - State Taxes step
+<Employee.StateTaxes
+  employeeId="employee-id"
+  isAdmin={false}
+  onEvent={(eventType) => {
+    if (eventType === componentEvents.EMPLOYEE_STATE_TAXES_DONE) {
+      // called when state taxes is done
+    }
+  }}
+/>
+```
+
+## 0.12.2
+
+### Features & Enhancements
+
+- Add CTA (Call to Action) functionality to ProgressBar component
+- Expose Payroll components as UNSTABLE for early access
+- Add Payroll Submit API call functionality
+
+### Fixes
+
+- Fix contractor payment details validation and display
+- Fix contractor ID not being passed correctly from profile to submit
+- Fix self onboarding switch with correct onboarding status
+
+### Chores & Maintenance
+
+- Upgrade react-i18next from 15.6.0 to 15.7.0
+- Upgrade react-hook-form from 7.60.0 to 7.62.0
+- Update embedded API to latest version
+
+## 0.12.1
+
+### Fixes
+
+- Fix contractor payment details validation and display
+- Fix contractor ID not being passed correctly from profile to submit
+
+### Chores & Maintenance
+
+- Upgrade react-i18next from 15.6.0 to 15.7.0
+- Upgrade react-hook-form from 7.60.0 to 7.62.0
+- Update embedded API to latest version
+
 ## 0.12.0
 
 ### Updated theming

package/dist/_virtual/dynamic-import-helper.js

@@ -1,14 +1,7 @@
 const l = (r, n, t) => {
   const e = r[n];
   return e ? typeof e == "function" ? e() : Promise.resolve(e) : new Promise((i, o) => {
-    (typeof queueMicrotask == "function" ? queueMicrotask : setTimeout)(
-      o.bind(
-        null,
-        new Error(
-          "Unknown variable dynamic import: " + n + (n.split("/").length !== t ? ". Note that variables only represent file names one level deep." : "")
-        )
-      )
-    );
+    (typeof queueMicrotask == "function" ? queueMicrotask : setTimeout)(o.bind(null, /* @__PURE__ */ new Error("Unknown variable dynamic import: " + n + (n.split("/").length !== t ? ". Note that variables only represent file names one level deep." : ""))));
   });
 };
 export {

package/dist/_virtual/dynamic-import-helper.js.map

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

package/dist/assets/icons/spinner_small.svg.js

@@ -0,0 +1,10 @@
+import * as e from "react";
+const r = ({
+  title: l,
+  titleId: t,
+  ...a
+}) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", "aria-labelledby": t, ...a }, l ? /* @__PURE__ */ e.createElement("title", { id: t }, l) : null, /* @__PURE__ */ e.createElement("path", { d: "M12 22.5C12 21.6716 11.3234 21.0131 10.5063 20.8766C6.24662 20.1651 3 16.4617 3 12C3 7.02944 7.02944 3 12 3C16.4617 3 20.1651 6.24662 20.8766 10.5063C21.0131 11.3234 21.6716 12 22.5 12C23.3284 12 24.0098 11.3251 23.9075 10.503C23.1707 4.58207 18.1204 0 12 0C5.37258 0 0 5.37258 0 12C0 18.1205 4.58207 23.1707 10.503 23.9075C11.3251 24.0098 12 23.3284 12 22.5Z", fill: "currentColor" }));
+export {
+  r as default
+};
+//# sourceMappingURL=spinner_small.svg.js.map

package/dist/assets/icons/spinner_small.svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner_small.svg.js","sources":["../../../src/assets/icons/spinner_small.svg?react"],"sourcesContent":["import * as React from \"react\";\nconst SvgSpinnerSmall = ({\n  title,\n  titleId,\n  ...props\n}) => /* @__PURE__ */ React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: 24, height: 24, viewBox: \"0 0 24 24\", fill: \"none\", \"aria-labelledby\": titleId, ...props }, title ? /* @__PURE__ */ React.createElement(\"title\", { id: titleId }, title) : null, /* @__PURE__ */ React.createElement(\"path\", { d: \"M12 22.5C12 21.6716 11.3234 21.0131 10.5063 20.8766C6.24662 20.1651 3 16.4617 3 12C3 7.02944 7.02944 3 12 3C16.4617 3 20.1651 6.24662 20.8766 10.5063C21.0131 11.3234 21.6716 12 22.5 12C23.3284 12 24.0098 11.3251 23.9075 10.503C23.1707 4.58207 18.1204 0 12 0C5.37258 0 0 5.37258 0 12C0 18.1205 4.58207 23.1707 10.503 23.9075C11.3251 24.0098 12 23.3284 12 22.5Z\", fill: \"currentColor\" }));\nexport default SvgSpinnerSmall;\n"],"names":["SvgSpinnerSmall","title","titleId","props","React"],"mappings":";AACK,MAACA,IAAkB,CAAC;AAAA,EACvB,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,MAAsB,gBAAAC,EAAM,cAAc,OAAO,EAAE,OAAO,8BAA8B,OAAO,IAAI,QAAQ,IAAI,SAAS,aAAa,MAAM,QAAQ,mBAAmBF,GAAS,GAAGC,EAAK,GAAIF,IAAwB,gBAAAG,EAAM,cAAc,SAAS,EAAE,IAAIF,EAAO,GAAID,CAAK,IAAI,MAAsB,gBAAAG,EAAM,cAAc,QAAQ,EAAE,GAAG,2WAA2W,MAAM,gBAAgB,CAAC;"}

package/dist/components/Base/Base.js

@@ -1,50 +1,51 @@
-import { jsx as o, jsxs as u } from "react/jsx-runtime";
-import { useState as y, useCallback as E, Suspense as R } from "react";
+import { jsx as o, jsxs as y } from "react/jsx-runtime";
+import { useState as E, useCallback as g, Suspense as R } from "react";
 import { ErrorBoundary as S } from "react-error-boundary";
 import { useTranslation as B } from "react-i18next";
-import { APIError as g } from "@gusto/embedded-api/models/errors/apierror";
-import { SDKValidationError as C } from "@gusto/embedded-api/models/errors/sdkvalidationerror";
-import { UnprocessableEntityErrorObject as h } from "@gusto/embedded-api/models/errors/unprocessableentityerrorobject";
-import { QueryErrorResetBoundary as T } from "@tanstack/react-query";
+import { APIError as C } from "/home/runner/work/embedded-react-sdk/embedded-react-sdk/node_modules/@gusto/embedded-api/esm/models/errors/apierror.js";
+import { SDKValidationError as h } from "/home/runner/work/embedded-react-sdk/embedded-react-sdk/node_modules/@gusto/embedded-api/esm/models/errors/sdkvalidationerror.js";
+import { UnprocessableEntityErrorObject as k } from "/home/runner/work/embedded-react-sdk/embedded-react-sdk/node_modules/@gusto/embedded-api/esm/models/errors/unprocessableentityerrorobject.js";
+import { QueryErrorResetBoundary as T } from "/home/runner/work/embedded-react-sdk/embedded-react-sdk/node_modules/@tanstack/react-query/build/modern/index.js";
 import { FadeIn as _ } from "../Common/FadeIn/FadeIn.js";
 import { BaseContext as j } from "./useBase.js";
 import { componentEvents as F } from "../../shared/constants.js";
 import { useAsyncError as K } from "../Common/hooks/useAsyncError.js";
+import "classnames";
 import { InternalError as P } from "../Common/InternalError/InternalError.js";
 import { snakeCaseToCamelCase as w } from "../../helpers/formattedStrings.js";
 import { useComponentContext as M } from "../../contexts/ComponentAdapter/useComponentContext.js";
 import { useLoadingIndicator as O } from "../../contexts/LoadingIndicatorProvider/useLoadingIndicator.js";
-const U = (e) => e.map((n) => n.message ? /* @__PURE__ */ o("li", { children: n.message }, n.key) : null), k = (e, n) => {
+const U = (t) => t.map((n) => n.message ? /* @__PURE__ */ o("li", { children: n.message }, n.key) : null), x = (t, n) => {
   const m = n ? n + "." : "";
-  if (e.category === "invalid_attribute_value" || e.category === "invalid_operation")
+  if (t.category === "invalid_attribute_value" || t.category === "invalid_operation")
     return [
       {
-        key: w(m + e.errorKey),
-        message: e.message ?? ""
+        key: w(m + t.errorKey),
+        message: t.message ?? ""
       }
     ];
-  if (e.category === "nested_errors" && e.errors !== void 0) {
-    let s = "";
-    return e.metadata?.key && typeof e.metadata.key == "string" ? s = e.metadata.key : e.metadata?.state && typeof e.metadata.state == "string" ? s = e.metadata.state : e.errorKey && (s = e.errorKey), e.errors.flatMap((r) => k(r, m + s));
+  if (t.category === "nested_errors" && t.errors !== void 0) {
+    let a = "";
+    return t.metadata?.key && typeof t.metadata.key == "string" ? a = t.metadata.key : t.metadata?.state && typeof t.metadata.state == "string" ? a = t.metadata.state : t.errorKey && (a = t.errorKey), t.errors.flatMap((r) => x(r, m + a));
   }
   return [];
-}, re = ({
-  children: e,
+}, ot = ({
+  children: t,
   FallbackComponent: n = P,
   LoaderComponent: m,
-  onEvent: s
+  onEvent: a
 }) => {
-  const [r, l] = y(null), [c, f] = y(null), p = K(), { t: x } = B(), d = M(), { LoadingIndicator: b } = O(), v = m ?? b, I = E((t) => {
-    l(t), t || f(null);
-  }, []), A = (t) => {
-    l(t), t instanceof h && Array.isArray(t.errors) && f(t.errors.flatMap((a) => k(a)));
-  }, L = E(
-    async (t, a) => {
+  const [r, l] = E(null), [c, f] = E(null), p = K(), { t: b } = B(), d = M(), { LoadingIndicator: I } = O(), u = m ?? I, v = g((e) => {
+    l(e), e || f(null);
+  }, []), L = (e) => {
+    l(e), e instanceof k && Array.isArray(e.errors) && f(e.errors.flatMap((s) => x(s)));
+  }, A = g(
+    async (e, s) => {
       l(null), f(null);
       try {
-        await a(t);
+        await s(e);
       } catch (i) {
-        i instanceof g || i instanceof C || i instanceof h ? A(i) : p(i);
+        i instanceof C || i instanceof h || i instanceof k ? L(i) : p(i);
       }
     },
     [l, p]
@@ -54,26 +55,27 @@ const U = (e) => e.map((n) => n.message ? /* @__PURE__ */ o("li", { children: n.
     {
       value: {
         fieldErrors: c,
-        setError: I,
-        onEvent: s,
+        setError: v,
+        onEvent: a,
         throwError: p,
-        baseSubmitHandler: L
+        baseSubmitHandler: A,
+        LoadingIndicator: u
       },
-      children: /* @__PURE__ */ o(T, { children: ({ reset: t }) => /* @__PURE__ */ u(
+      children: /* @__PURE__ */ o(T, { children: ({ reset: e }) => /* @__PURE__ */ y(
         S,
         {
           FallbackComponent: n,
-          onReset: t,
-          onError: (a) => {
-            s(F.ERROR, a);
+          onReset: e,
+          onError: (s) => {
+            a(F.ERROR, s);
           },
           children: [
-            (r || c) && /* @__PURE__ */ u(d.Alert, { label: x("status.errorEncountered"), status: "error", children: [
+            (r || c) && /* @__PURE__ */ y(d.Alert, { label: b("status.errorEncountered"), status: "error", children: [
               c && /* @__PURE__ */ o(d.UnorderedList, { items: U(c) }),
-              r && r instanceof g && /* @__PURE__ */ o(d.Text, { children: r.message }),
-              r && r instanceof C && /* @__PURE__ */ o(d.Text, { as: "pre", children: r.pretty() })
+              r && r instanceof C && /* @__PURE__ */ o(d.Text, { children: r.message }),
+              r && r instanceof h && /* @__PURE__ */ o(d.Text, { as: "pre", children: r.pretty() })
             ] }),
-            /* @__PURE__ */ o(R, { fallback: /* @__PURE__ */ o(v, {}), children: /* @__PURE__ */ o(_, { children: e }) })
+            /* @__PURE__ */ o(R, { fallback: /* @__PURE__ */ o(u, {}), children: /* @__PURE__ */ o(_, { children: t }) })
           ]
         }
       ) })
@@ -81,6 +83,6 @@ const U = (e) => e.map((n) => n.message ? /* @__PURE__ */ o("li", { children: n.
   );
 };
 export {
-  re as BaseComponent
+  ot as BaseComponent
 };
 //# 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 } from 'react'\nimport { Suspense, useState, useCallback } from 'react'\nimport type { FallbackProps } from 'react-error-boundary'\nimport { ErrorBoundary } from 'react-error-boundary'\nimport { useTranslation } from 'react-i18next'\nimport { APIError } from '@gusto/embedded-api/models/errors/apierror'\nimport { SDKValidationError } from '@gusto/embedded-api/models/errors/sdkvalidationerror'\nimport { UnprocessableEntityErrorObject } from '@gusto/embedded-api/models/errors/unprocessableentityerrorobject'\nimport type { EntityErrorObject } from '@gusto/embedded-api/models/components/entityerrorobject'\nimport { QueryErrorResetBoundary } from '@tanstack/react-query'\nimport { FadeIn } from '../Common/FadeIn/FadeIn'\nimport { BaseContext, type FieldError, type KnownErrors, type OnEventType } from './useBase'\nimport { componentEvents, type EventType } from '@/shared/constants'\nimport { InternalError, useAsyncError } from '@/components/Common'\nimport { snakeCaseToCamelCase } from '@/helpers/formattedStrings'\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'\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<TResourceKey extends keyof Resources = keyof Resources>\n  extends CommonComponentInterface<TResourceKey> {\n  FallbackComponent?: (props: FallbackProps) => JSX.Element\n  LoaderComponent?: LoadingIndicatorContextProps['LoadingIndicator']\n  onEvent: OnEventType<EventType, unknown>\n}\n\n/**Traverses errorList and finds items with message properties */\nconst renderErrorList = (errorList: FieldError[]): React.ReactNode[] => {\n  return errorList.map(errorFromList => {\n    if (errorFromList.message) {\n      return <li key={errorFromList.key}>{errorFromList.message}</li>\n    }\n    return null\n  })\n}\n/**Recuresively parses error list and constructs an array of objects containing attribute value error messages associated with form fields. Nested errors construct '.' separated keys\n * metadata.state is a special case for state taxes validation errors\n */\nconst getFieldErrors = (\n  error: EntityErrorObject,\n  parentKey?: string,\n): { key: string; message: string }[] => {\n  const keyPrefix = parentKey ? parentKey + '.' : ''\n  if (error.category === 'invalid_attribute_value' || error.category === 'invalid_operation') {\n    return [\n      {\n        key: snakeCaseToCamelCase(keyPrefix + error.errorKey),\n        message: error.message ?? '',\n      },\n    ]\n  }\n  if (error.category === 'nested_errors' && error.errors !== undefined) {\n    //TODO: clean this up once Metadata type is fixed in openapi spec\n    let keySuffix = ''\n    //@ts-expect-error: Metadata in speakeasy is incorrectly typed\n    if (error.metadata?.key && typeof error.metadata.key === 'string') {\n      //@ts-expect-error: Metadata in speakeasy is incorrectly typed\n      keySuffix = error.metadata.key as string\n      //@ts-expect-error: Metadata in speakeasy is incorrectly typed\n    } else if (error.metadata?.state && typeof error.metadata.state === 'string') {\n      //@ts-expect-error: Metadata in speakeasy is incorrectly typed\n      keySuffix = error.metadata.state as string\n    } else if (error.errorKey) {\n      keySuffix = error.errorKey\n    }\n    return error.errors.flatMap(err => getFieldErrors(err, keyPrefix + keySuffix))\n  }\n  return []\n}\n\ntype SubmitHandler<T> = (data: T) => Promise<void>\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, setError] = useState<KnownErrors | null>(null)\n  const [fieldErrors, setFieldErrors] = useState<FieldError[] | null>(null)\n  const throwError = useAsyncError()\n  const { t } = useTranslation()\n  const Components = useComponentContext()\n\n  const { LoadingIndicator: LoadingIndicatorFromContext } = useLoadingIndicator()\n\n  const LoaderComponent = LoadingIndicatorFromProps ?? LoadingIndicatorFromContext\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    //422\tapplication/json - content relaited error\n    if (error instanceof UnprocessableEntityErrorObject && Array.isArray(error.errors)) {\n      setFieldErrors(error.errors.flatMap(err => getFieldErrors(err)))\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        ) {\n          processError(err)\n        } else throwError(err)\n      }\n    },\n    [setError, throwError],\n  )\n\n  return (\n    <BaseContext.Provider\n      value={{\n        fieldErrors,\n        setError: setErrorWithFieldsClear,\n        onEvent,\n        throwError,\n        baseSubmitHandler,\n      }}\n    >\n      <QueryErrorResetBoundary>\n        {({ reset: resetQueries }) => (\n          <ErrorBoundary\n            FallbackComponent={FallbackComponent}\n            onReset={resetQueries}\n            onError={err => {\n              onEvent(componentEvents.ERROR, err)\n            }}\n          >\n            {(error || fieldErrors) && (\n              <Components.Alert label={t('status.errorEncountered')} status=\"error\">\n                {fieldErrors && <Components.UnorderedList items={renderErrorList(fieldErrors)} />}\n                {error && error instanceof APIError && (\n                  <Components.Text>{error.message}</Components.Text>\n                )}\n                {error && error instanceof SDKValidationError && (\n                  <Components.Text as=\"pre\">{error.pretty()}</Components.Text>\n                )}\n              </Components.Alert>\n            )}\n            <Suspense fallback={<LoaderComponent />}>\n              <FadeIn>{children}</FadeIn>\n            </Suspense>\n          </ErrorBoundary>\n        )}\n      </QueryErrorResetBoundary>\n    </BaseContext.Provider>\n  )\n}\n"],"names":["renderErrorList","errorList","errorFromList","jsx","getFieldErrors","error","parentKey","keyPrefix","snakeCaseToCamelCase","keySuffix","err","BaseComponent","children","FallbackComponent","InternalError","LoadingIndicatorFromProps","onEvent","setError","useState","fieldErrors","setFieldErrors","throwError","useAsyncError","t","useTranslation","Components","useComponentContext","LoadingIndicatorFromContext","useLoadingIndicator","LoaderComponent","setErrorWithFieldsClear","useCallback","processError","UnprocessableEntityErrorObject","baseSubmitHandler","data","componentHandler","APIError","SDKValidationError","BaseContext","QueryErrorResetBoundary","resetQueries","jsxs","ErrorBoundary","componentEvents","Suspense","FadeIn"],"mappings":"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"}
+{"version":3,"file":"Base.js","sources":["../../../src/components/Base/Base.tsx"],"sourcesContent":["import type { ReactNode, JSX } from 'react'\nimport { Suspense, useState, useCallback } from 'react'\nimport type { FallbackProps } from 'react-error-boundary'\nimport { ErrorBoundary } from 'react-error-boundary'\nimport { useTranslation } from 'react-i18next'\nimport { APIError } from '@gusto/embedded-api/models/errors/apierror'\nimport { SDKValidationError } from '@gusto/embedded-api/models/errors/sdkvalidationerror'\nimport { UnprocessableEntityErrorObject } from '@gusto/embedded-api/models/errors/unprocessableentityerrorobject'\nimport type { EntityErrorObject } from '@gusto/embedded-api/models/components/entityerrorobject'\nimport { QueryErrorResetBoundary } from '@tanstack/react-query'\nimport { FadeIn } from '../Common/FadeIn/FadeIn'\nimport { BaseContext, type FieldError, type KnownErrors, type OnEventType } from './useBase'\nimport { componentEvents, type EventType } from '@/shared/constants'\nimport { InternalError, useAsyncError } from '@/components/Common'\nimport { snakeCaseToCamelCase } from '@/helpers/formattedStrings'\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'\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<TResourceKey extends keyof Resources = keyof Resources>\n  extends CommonComponentInterface<TResourceKey> {\n  FallbackComponent?: (props: FallbackProps) => JSX.Element\n  LoaderComponent?: LoadingIndicatorContextProps['LoadingIndicator']\n  onEvent: OnEventType<EventType, unknown>\n}\n\n/**Traverses errorList and finds items with message properties */\nconst renderErrorList = (errorList: FieldError[]): React.ReactNode[] => {\n  return errorList.map(errorFromList => {\n    if (errorFromList.message) {\n      return <li key={errorFromList.key}>{errorFromList.message}</li>\n    }\n    return null\n  })\n}\n/**Recuresively parses error list and constructs an array of objects containing attribute value error messages associated with form fields. Nested errors construct '.' separated keys\n * metadata.state is a special case for state taxes validation errors\n */\nconst getFieldErrors = (\n  error: EntityErrorObject,\n  parentKey?: string,\n): { key: string; message: string }[] => {\n  const keyPrefix = parentKey ? parentKey + '.' : ''\n  if (error.category === 'invalid_attribute_value' || error.category === 'invalid_operation') {\n    return [\n      {\n        key: snakeCaseToCamelCase(keyPrefix + error.errorKey),\n        message: error.message ?? '',\n      },\n    ]\n  }\n  if (error.category === 'nested_errors' && error.errors !== undefined) {\n    //TODO: clean this up once Metadata type is fixed in openapi spec\n    let keySuffix = ''\n    //@ts-expect-error: Metadata in speakeasy is incorrectly typed\n    if (error.metadata?.key && typeof error.metadata.key === 'string') {\n      //@ts-expect-error: Metadata in speakeasy is incorrectly typed\n      keySuffix = error.metadata.key as string\n      //@ts-expect-error: Metadata in speakeasy is incorrectly typed\n    } else if (error.metadata?.state && typeof error.metadata.state === 'string') {\n      //@ts-expect-error: Metadata in speakeasy is incorrectly typed\n      keySuffix = error.metadata.state as string\n    } else if (error.errorKey) {\n      keySuffix = error.errorKey\n    }\n    return error.errors.flatMap(err => getFieldErrors(err, keyPrefix + keySuffix))\n  }\n  return []\n}\n\ntype SubmitHandler<T> = (data: T) => Promise<void>\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, setError] = useState<KnownErrors | null>(null)\n  const [fieldErrors, setFieldErrors] = useState<FieldError[] | null>(null)\n  const throwError = useAsyncError()\n  const { t } = useTranslation()\n  const Components = useComponentContext()\n\n  const { LoadingIndicator: LoadingIndicatorFromContext } = useLoadingIndicator()\n\n  const LoaderComponent = LoadingIndicatorFromProps ?? LoadingIndicatorFromContext\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    //422\tapplication/json - content relaited error\n    if (error instanceof UnprocessableEntityErrorObject && Array.isArray(error.errors)) {\n      setFieldErrors(error.errors.flatMap(err => getFieldErrors(err)))\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        ) {\n          processError(err)\n        } else throwError(err)\n      }\n    },\n    [setError, throwError],\n  )\n\n  return (\n    <BaseContext.Provider\n      value={{\n        fieldErrors,\n        setError: setErrorWithFieldsClear,\n        onEvent,\n        throwError,\n        baseSubmitHandler,\n        LoadingIndicator: LoaderComponent,\n      }}\n    >\n      <QueryErrorResetBoundary>\n        {({ reset: resetQueries }) => (\n          <ErrorBoundary\n            FallbackComponent={FallbackComponent}\n            onReset={resetQueries}\n            onError={err => {\n              onEvent(componentEvents.ERROR, err)\n            }}\n          >\n            {(error || fieldErrors) && (\n              <Components.Alert label={t('status.errorEncountered')} status=\"error\">\n                {fieldErrors && <Components.UnorderedList items={renderErrorList(fieldErrors)} />}\n                {error && error instanceof APIError && (\n                  <Components.Text>{error.message}</Components.Text>\n                )}\n                {error && error instanceof SDKValidationError && (\n                  <Components.Text as=\"pre\">{error.pretty()}</Components.Text>\n                )}\n              </Components.Alert>\n            )}\n            <Suspense fallback={<LoaderComponent />}>\n              <FadeIn>{children}</FadeIn>\n            </Suspense>\n          </ErrorBoundary>\n        )}\n      </QueryErrorResetBoundary>\n    </BaseContext.Provider>\n  )\n}\n"],"names":["renderErrorList","errorList","errorFromList","jsx","getFieldErrors","error","parentKey","keyPrefix","snakeCaseToCamelCase","keySuffix","err","BaseComponent","children","FallbackComponent","InternalError","LoadingIndicatorFromProps","onEvent","setError","useState","fieldErrors","setFieldErrors","throwError","useAsyncError","t","useTranslation","Components","useComponentContext","LoadingIndicatorFromContext","useLoadingIndicator","LoaderComponent","setErrorWithFieldsClear","useCallback","processError","UnprocessableEntityErrorObject","baseSubmitHandler","data","componentHandler","APIError","SDKValidationError","BaseContext","QueryErrorResetBoundary","resetQueries","jsxs","ErrorBoundary","componentEvents","Suspense","FadeIn"],"mappings":"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"}

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

@@ -2,6 +2,7 @@ import { APIError } from '@gusto/embedded-api/models/errors/apierror';
 import { SDKValidationError } from '@gusto/embedded-api/models/errors/sdkvalidationerror';
 import { UnprocessableEntityErrorObject } from '@gusto/embedded-api/models/errors/unprocessableentityerrorobject';
 import { EventType } from '../../shared/constants';
+import { LoadingIndicatorContextProps } from '../../contexts/LoadingIndicatorProvider/useLoadingIndicator';
 export type OnEventType<K, T> = (type: K, data?: T) => void;
 export type KnownErrors = APIError | SDKValidationError | UnprocessableEntityErrorObject;
 export type FieldError = {
@@ -14,6 +15,7 @@ interface BaseContextProps {
     onEvent: OnEventType<EventType, unknown>;
     throwError: (e: unknown) => void;
     baseSubmitHandler: <T>(formData: T, componentHandler: (payload: T) => Promise<void>) => Promise<void>;
+    LoadingIndicator: LoadingIndicatorContextProps['LoadingIndicator'];
 }
 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 { APIError } from '@gusto/embedded-api/models/errors/apierror'\nimport type { SDKValidationError } from '@gusto/embedded-api/models/errors/sdkvalidationerror'\nimport type { UnprocessableEntityErrorObject } from '@gusto/embedded-api/models/errors/unprocessableentityerrorobject'\nimport { type EventType } from '@/shared/constants'\n\nexport type OnEventType<K, T> = (type: K, data?: T) => void\n\nexport type KnownErrors = APIError | SDKValidationError | UnprocessableEntityErrorObject\n\nexport type FieldError = {\n  key: string\n  message: string\n}\n\ninterface BaseContextProps {\n  fieldErrors: FieldError[] | null\n  setError: (err: KnownErrors | null) => void\n  onEvent: OnEventType<EventType, unknown>\n  throwError: (e: unknown) => void\n  baseSubmitHandler: <T>(\n    formData: T,\n    componentHandler: (payload: T) => Promise<void>,\n  ) => Promise<void>\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":";AA0BO,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 { APIError } from '@gusto/embedded-api/models/errors/apierror'\nimport type { SDKValidationError } from '@gusto/embedded-api/models/errors/sdkvalidationerror'\nimport type { UnprocessableEntityErrorObject } from '@gusto/embedded-api/models/errors/unprocessableentityerrorobject'\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 = APIError | SDKValidationError | UnprocessableEntityErrorObject\n\nexport type FieldError = {\n  key: string\n  message: string\n}\n\ninterface BaseContextProps {\n  fieldErrors: FieldError[] | null\n  setError: (err: KnownErrors | null) => void\n  onEvent: OnEventType<EventType, unknown>\n  throwError: (e: unknown) => void\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":";AA4BO,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/Common/DataView/DataView.d.ts

@@ -8,5 +8,6 @@ export type DataViewProps<T> = {
     itemMenu?: useDataViewPropReturn<T>['itemMenu'];
     onSelect?: useDataViewPropReturn<T>['onSelect'];
     breakAt?: BreakpointKey;
+    isFetching?: boolean;
 };
-export declare const DataView: <T>({ pagination, breakAt, ...dataViewProps }: DataViewProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataView: <T>({ pagination, isFetching, breakAt, ...dataViewProps }: DataViewProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Common/DataView/DataView.js

@@ -1,34 +1,35 @@
-import { jsxs as l, jsx as n } from "react/jsx-runtime";
-import { useRef as f, useMemo as p } from "react";
-import { PaginationControl as d } from "../PaginationControl/PaginationControl.js";
-import u from "./DataView.module.scss.js";
-import { DataTable as C } from "./DataTable/DataTable.js";
-import { DataCards as D } from "./DataCards/DataCards.js";
-import { useContainerBreakpoints as b } from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
-const M = ({
+import { jsxs as f, jsx as n } from "react/jsx-runtime";
+import { useRef as p, useMemo as d } from "react";
+import { PaginationControl as u } from "../PaginationControl/PaginationControl.js";
+import C from "./DataView.module.scss.js";
+import { DataTable as D } from "./DataTable/DataTable.js";
+import { DataCards as b } from "./DataCards/DataCards.js";
+import { useContainerBreakpoints as k } from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
+const R = ({
   pagination: t,
-  breakAt: s = "small",
-  ...a
+  isFetching: s,
+  breakAt: a = "small",
+  ...i
 }) => {
-  const e = f(null), o = b({
+  const e = p(null), o = k({
     ref: e
-  }), i = o.length > 0, r = !o.includes(s), m = p(() => r ? D : C, [r]);
-  return /* @__PURE__ */ l(
+  }), m = o.length > 0, r = !o.includes(a), c = d(() => r ? b : D, [r]);
+  return /* @__PURE__ */ f(
     "div",
     {
       "data-testid": "data-view",
-      className: u.dataViewContainer,
-      ref: (c) => {
-        e.current = c;
+      className: C.dataViewContainer,
+      ref: (l) => {
+        e.current = l;
       },
       children: [
-        i && /* @__PURE__ */ n(m, { ...a }),
-        t && /* @__PURE__ */ n(d, { ...t })
+        m && /* @__PURE__ */ n(c, { ...i }),
+        t && /* @__PURE__ */ n(u, { ...t, isFetching: s })
       ]
     }
   );
 };
 export {
-  M as DataView
+  R as DataView
 };
 //# sourceMappingURL=DataView.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataView.js","sources":["../../../../src/components/Common/DataView/DataView.tsx"],"sourcesContent":["import { useMemo, useRef } from 'react'\nimport { PaginationControl } from '../PaginationControl/PaginationControl'\nimport styles from './DataView.module.scss'\nimport { DataTable } from './DataTable/DataTable'\nimport type { useDataViewPropReturn } from './useDataView'\nimport { DataCards } from './DataCards/DataCards'\nimport type { BreakpointKey } from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\nimport useContainerBreakpoints from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\n\nexport type DataViewProps<T> = {\n  columns: useDataViewPropReturn<T>['columns']\n  data: T[]\n  pagination?: useDataViewPropReturn<T>['pagination']\n  label: string\n  itemMenu?: useDataViewPropReturn<T>['itemMenu']\n  onSelect?: useDataViewPropReturn<T>['onSelect']\n  breakAt?: BreakpointKey\n}\n\nexport const DataView = <T,>({\n  pagination,\n  breakAt = 'small',\n  ...dataViewProps\n}: DataViewProps<T>) => {\n  const containerRef = useRef<HTMLElement | null>(null)\n  const breakpoints = useContainerBreakpoints({\n    ref: containerRef,\n  })\n\n  // Wait for breakpoints to be detected before rendering\n  const isBreakpointsDetected = breakpoints.length > 0\n  const isMobile = !breakpoints.includes(breakAt)\n\n  const Component = useMemo(() => {\n    return isMobile ? DataCards : DataTable\n  }, [isMobile])\n\n  return (\n    <div\n      data-testid=\"data-view\"\n      className={styles.dataViewContainer}\n      ref={ref => {\n        containerRef.current = ref\n      }}\n    >\n      {isBreakpointsDetected && <Component {...dataViewProps} />}\n      {pagination && <PaginationControl {...pagination} />}\n    </div>\n  )\n}\n"],"names":["DataView","pagination","breakAt","dataViewProps","containerRef","useRef","breakpoints","useContainerBreakpoints","isBreakpointsDetected","isMobile","Component","useMemo","DataCards","DataTable","jsxs","styles","ref","jsx","PaginationControl"],"mappings":";;;;;;;AAmBO,MAAMA,IAAW,CAAK;AAAA,EAC3B,YAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,GAAGC;AACL,MAAwB;AACtB,QAAMC,IAAeC,EAA2B,IAAI,GAC9CC,IAAcC,EAAwB;AAAA,IAC1C,KAAKH;AAAA,EAAA,CACN,GAGKI,IAAwBF,EAAY,SAAS,GAC7CG,IAAW,CAACH,EAAY,SAASJ,CAAO,GAExCQ,IAAYC,EAAQ,MACjBF,IAAWG,IAAYC,GAC7B,CAACJ,CAAQ,CAAC;AAEb,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAWC,EAAO;AAAA,MAClB,KAAK,CAAAC,MAAO;AACV,QAAAZ,EAAa,UAAUY;AAAA,MACzB;AAAA,MAEC,UAAA;AAAA,QAAAR,KAAyB,gBAAAS,EAACP,GAAA,EAAW,GAAGP,EAAA,CAAe;AAAA,QACvDF,KAAc,gBAAAgB,EAACC,GAAA,EAAmB,GAAGjB,EAAA,CAAY;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGxD;"}
+{"version":3,"file":"DataView.js","sources":["../../../../src/components/Common/DataView/DataView.tsx"],"sourcesContent":["import { useMemo, useRef } from 'react'\nimport { PaginationControl } from '../PaginationControl/PaginationControl'\nimport styles from './DataView.module.scss'\nimport { DataTable } from './DataTable/DataTable'\nimport type { useDataViewPropReturn } from './useDataView'\nimport { DataCards } from './DataCards/DataCards'\nimport type { BreakpointKey } from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\nimport useContainerBreakpoints from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\n\nexport type DataViewProps<T> = {\n  columns: useDataViewPropReturn<T>['columns']\n  data: T[]\n  pagination?: useDataViewPropReturn<T>['pagination']\n  label: string\n  itemMenu?: useDataViewPropReturn<T>['itemMenu']\n  onSelect?: useDataViewPropReturn<T>['onSelect']\n  breakAt?: BreakpointKey\n  isFetching?: boolean\n}\n\nexport const DataView = <T,>({\n  pagination,\n  isFetching,\n  breakAt = 'small',\n  ...dataViewProps\n}: DataViewProps<T>) => {\n  const containerRef = useRef<HTMLElement | null>(null)\n  const breakpoints = useContainerBreakpoints({\n    ref: containerRef,\n  })\n\n  // Wait for breakpoints to be detected before rendering\n  const isBreakpointsDetected = breakpoints.length > 0\n  const isMobile = !breakpoints.includes(breakAt)\n\n  const Component = useMemo(() => {\n    return isMobile ? DataCards : DataTable\n  }, [isMobile])\n\n  return (\n    <div\n      data-testid=\"data-view\"\n      className={styles.dataViewContainer}\n      ref={ref => {\n        containerRef.current = ref\n      }}\n    >\n      {isBreakpointsDetected && <Component {...dataViewProps} />}\n      {pagination && <PaginationControl {...pagination} isFetching={isFetching} />}\n    </div>\n  )\n}\n"],"names":["DataView","pagination","isFetching","breakAt","dataViewProps","containerRef","useRef","breakpoints","useContainerBreakpoints","isBreakpointsDetected","isMobile","Component","useMemo","DataCards","DataTable","jsxs","styles","ref","jsx","PaginationControl"],"mappings":";;;;;;;AAoBO,MAAMA,IAAW,CAAK;AAAA,EAC3B,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,GAAGC;AACL,MAAwB;AACtB,QAAMC,IAAeC,EAA2B,IAAI,GAC9CC,IAAcC,EAAwB;AAAA,IAC1C,KAAKH;AAAA,EAAA,CACN,GAGKI,IAAwBF,EAAY,SAAS,GAC7CG,IAAW,CAACH,EAAY,SAASJ,CAAO,GAExCQ,IAAYC,EAAQ,MACjBF,IAAWG,IAAYC,GAC7B,CAACJ,CAAQ,CAAC;AAEb,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAWC,EAAO;AAAA,MAClB,KAAK,CAAAC,MAAO;AACV,QAAAZ,EAAa,UAAUY;AAAA,MACzB;AAAA,MAEC,UAAA;AAAA,QAAAR,KAAyB,gBAAAS,EAACP,GAAA,EAAW,GAAGP,EAAA,CAAe;AAAA,QACvDH,KAAc,gBAAAiB,EAACC,GAAA,EAAmB,GAAGlB,GAAY,YAAAC,EAAA,CAAwB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGhF;"}

package/dist/components/Common/DataView/useDataView.d.ts

@@ -15,6 +15,7 @@ export type useDataViewProp<T> = {
     itemMenu?: (item: T) => React.ReactNode;
     onSelect?: (item: T, checked: boolean) => void;
     emptyState?: () => React.ReactNode;
+    isFetching?: boolean;
 };
 export type useDataViewPropReturn<T> = {
     pagination?: PaginationControlProps;
@@ -23,6 +24,7 @@ export type useDataViewPropReturn<T> = {
     itemMenu?: (item: T) => React.ReactNode;
     onSelect?: (item: T, checked: boolean) => void;
     emptyState?: () => React.ReactNode;
+    isFetching?: boolean;
 };
-export declare const useDataView: <T>({ columns, data, itemMenu, onSelect, pagination, emptyState, }: useDataViewProp<T>) => useDataViewPropReturn<T>;
+export declare const useDataView: <T>({ columns, data, itemMenu, onSelect, pagination, emptyState, isFetching, }: useDataViewProp<T>) => useDataViewPropReturn<T>;
 export {};

package/dist/components/Common/DataView/useDataView.js

@@ -1,20 +1,22 @@
-import { useMemo as p } from "react";
-const P = ({
+import { useMemo as u } from "react";
+const d = ({
   columns: r,
   data: o,
   itemMenu: s,
-  onSelect: e,
-  pagination: w,
-  emptyState: V
-}) => p(() => ({
-  pagination: w,
+  onSelect: w,
+  pagination: V,
+  emptyState: e,
+  isFetching: p
+}) => u(() => ({
+  pagination: V,
   data: o,
   columns: r,
   itemMenu: s,
-  onSelect: e,
-  emptyState: V
-}), [w, o, r, s, e, V]);
+  onSelect: w,
+  emptyState: e,
+  isFetching: p
+}), [V, o, r, s, w, e, p]);
 export {
-  P as useDataView
+  d as useDataView
 };
 //# sourceMappingURL=useDataView.js.map

package/dist/components/Common/DataView/useDataView.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDataView.js","sources":["../../../../src/components/Common/DataView/useDataView.ts"],"sourcesContent":["import { useMemo } from 'react'\nimport type { PaginationControlProps } from '@/components/Common/PaginationControl/PaginationControlTypes'\n\ntype DataViewColumn<T> =\n  | {\n      key: keyof T\n      title: string | React.ReactNode\n      render?: (item: T) => React.ReactNode\n    }\n  | {\n      key?: string\n      title: string | React.ReactNode\n      render: (item: T) => React.ReactNode\n    }\n\nexport type useDataViewProp<T> = {\n  columns: DataViewColumn<T>[]\n  data: T[]\n  pagination?: PaginationControlProps\n  itemMenu?: (item: T) => React.ReactNode\n  onSelect?: (item: T, checked: boolean) => void\n  emptyState?: () => React.ReactNode\n}\n\nexport type useDataViewPropReturn<T> = {\n  pagination?: PaginationControlProps\n  data: T[]\n  columns: DataViewColumn<T>[]\n  itemMenu?: (item: T) => React.ReactNode\n  onSelect?: (item: T, checked: boolean) => void\n  emptyState?: () => React.ReactNode\n}\n\nexport const useDataView = <T>({\n  columns,\n  data,\n  itemMenu,\n  onSelect,\n  pagination,\n  emptyState,\n}: useDataViewProp<T>): useDataViewPropReturn<T> => {\n  const dataViewProps = useMemo(() => {\n    return {\n      pagination,\n      data,\n      columns,\n      itemMenu,\n      onSelect,\n      emptyState,\n    }\n  }, [pagination, data, columns, itemMenu, onSelect, emptyState])\n\n  return dataViewProps\n}\n"],"names":["useDataView","columns","data","itemMenu","onSelect","pagination","emptyState","useMemo"],"mappings":";AAiCO,MAAMA,IAAc,CAAI;AAAA,EAC7B,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AACF,MACwBC,EAAQ,OACrB;AAAA,EACL,YAAAF;AAAA,EACA,MAAAH;AAAA,EACA,SAAAD;AAAA,EACA,UAAAE;AAAA,EACA,UAAAC;AAAA,EACA,YAAAE;AAAA,IAED,CAACD,GAAYH,GAAMD,GAASE,GAAUC,GAAUE,CAAU,CAAC;"}
+{"version":3,"file":"useDataView.js","sources":["../../../../src/components/Common/DataView/useDataView.ts"],"sourcesContent":["import { useMemo } from 'react'\nimport type { PaginationControlProps } from '@/components/Common/PaginationControl/PaginationControlTypes'\n\ntype DataViewColumn<T> =\n  | {\n      key: keyof T\n      title: string | React.ReactNode\n      render?: (item: T) => React.ReactNode\n    }\n  | {\n      key?: string\n      title: string | React.ReactNode\n      render: (item: T) => React.ReactNode\n    }\n\nexport type useDataViewProp<T> = {\n  columns: DataViewColumn<T>[]\n  data: T[]\n  pagination?: PaginationControlProps\n  itemMenu?: (item: T) => React.ReactNode\n  onSelect?: (item: T, checked: boolean) => void\n  emptyState?: () => React.ReactNode\n  isFetching?: boolean\n}\n\nexport type useDataViewPropReturn<T> = {\n  pagination?: PaginationControlProps\n  data: T[]\n  columns: DataViewColumn<T>[]\n  itemMenu?: (item: T) => React.ReactNode\n  onSelect?: (item: T, checked: boolean) => void\n  emptyState?: () => React.ReactNode\n  isFetching?: boolean\n}\n\nexport const useDataView = <T>({\n  columns,\n  data,\n  itemMenu,\n  onSelect,\n  pagination,\n  emptyState,\n  isFetching,\n}: useDataViewProp<T>): useDataViewPropReturn<T> => {\n  const dataViewProps = useMemo(() => {\n    return {\n      pagination,\n      data,\n      columns,\n      itemMenu,\n      onSelect,\n      emptyState,\n      isFetching,\n    }\n  }, [pagination, data, columns, itemMenu, onSelect, emptyState, isFetching])\n\n  return dataViewProps\n}\n"],"names":["useDataView","columns","data","itemMenu","onSelect","pagination","emptyState","isFetching","useMemo"],"mappings":";AAmCO,MAAMA,IAAc,CAAI;AAAA,EAC7B,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AACF,MACwBC,EAAQ,OACrB;AAAA,EACL,YAAAH;AAAA,EACA,MAAAH;AAAA,EACA,SAAAD;AAAA,EACA,UAAAE;AAAA,EACA,UAAAC;AAAA,EACA,YAAAE;AAAA,EACA,YAAAC;AAAA,IAED,CAACF,GAAYH,GAAMD,GAASE,GAAUC,GAAUE,GAAYC,CAAU,CAAC;"}

package/dist/components/Common/EmptyData/EmptyData.module.scss.js

@@ -1,4 +1,4 @@
-const t = "_emptyData_4b2s1_1", e = "_title_4b2s1_9", a = {
+const t = "_emptyData_vn3oy_1", e = "_title_vn3oy_11", a = {
   emptyData: t,
   title: e
 };

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

@@ -0,0 +1,6 @@
+interface InlineSpinnerProps {
+    ariaLabel?: string;
+    size?: 'small' | 'medium' | 'large';
+}
+export declare const InlineSpinner: ({ ariaLabel, size }: InlineSpinnerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Common/InlineSpinner/InlineSpinner.js

@@ -0,0 +1,25 @@
+import { jsx as n } from "react/jsx-runtime";
+import { useTranslation as r } from "react-i18next";
+import e from "./InlineSpinner.module.scss.js";
+import t from "../../../assets/icons/spinner_small.svg.js";
+const d = ({ ariaLabel: a, size: s = "small" }) => {
+  const { t: l } = r("common"), o = l("status.loading"), i = {
+    small: 16,
+    medium: 20,
+    large: 24
+  }[s];
+  return /* @__PURE__ */ n(
+    "span",
+    {
+      className: e.inlineSpinner,
+      "aria-label": a || o,
+      "aria-live": "polite",
+      role: "status",
+      children: /* @__PURE__ */ n(t, { className: e.spinnerIcon, width: i, height: i })
+    }
+  );
+};
+export {
+  d as InlineSpinner
+};
+//# sourceMappingURL=InlineSpinner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InlineSpinner.js","sources":["../../../../src/components/Common/InlineSpinner/InlineSpinner.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport styles from './InlineSpinner.module.scss'\nimport SpinnerIcon from '@/assets/icons/spinner_small.svg?react'\n\ninterface InlineSpinnerProps {\n  ariaLabel?: string\n  size?: 'small' | 'medium' | 'large'\n}\n\nexport const InlineSpinner = ({ ariaLabel, size = 'small' }: InlineSpinnerProps) => {\n  const { t } = useTranslation('common')\n  const defaultAriaLabel = t('status.loading')\n\n  const sizeMap = {\n    small: 16,\n    medium: 20,\n    large: 24,\n  }\n\n  const iconSize = sizeMap[size]\n\n  return (\n    <span\n      className={styles.inlineSpinner}\n      aria-label={ariaLabel || defaultAriaLabel}\n      aria-live=\"polite\"\n      role=\"status\"\n    >\n      <SpinnerIcon className={styles.spinnerIcon} width={iconSize} height={iconSize} />\n    </span>\n  )\n}\n"],"names":["InlineSpinner","ariaLabel","size","t","useTranslation","defaultAriaLabel","iconSize","jsx","styles","SpinnerIcon"],"mappings":";;;;AASO,MAAMA,IAAgB,CAAC,EAAE,WAAAC,GAAW,MAAAC,IAAO,cAAkC;AAClF,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,QAAQ,GAC/BC,IAAmBF,EAAE,gBAAgB,GAQrCG,IANU;AAAA,IACd,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA,EAGgBJ,CAAI;AAE7B,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAO;AAAA,MAClB,cAAYP,KAAaI;AAAA,MACzB,aAAU;AAAA,MACV,MAAK;AAAA,MAEL,UAAA,gBAAAE,EAACE,KAAY,WAAWD,EAAO,aAAa,OAAOF,GAAU,QAAQA,EAAA,CAAU;AAAA,IAAA;AAAA,EAAA;AAGrF;"}

package/dist/components/Common/InlineSpinner/InlineSpinner.module.scss.js

@@ -0,0 +1,10 @@
+const n = "_inlineSpinner_by46n_1", e = "_spinnerIcon_by46n_7", i = {
+  inlineSpinner: n,
+  spinnerIcon: e
+};
+export {
+  i as default,
+  n as inlineSpinner,
+  e as spinnerIcon
+};
+//# sourceMappingURL=InlineSpinner.module.scss.js.map

package/dist/components/Common/InlineSpinner/InlineSpinner.module.scss.js.map

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

package/dist/components/Common/InlineSpinner/index.d.ts

@@ -0,0 +1,2 @@
+import "./types/i18next.d.ts"
+export { InlineSpinner } from './InlineSpinner';