@gusto/embedded-react-sdk 0.12.3 → 0.13.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.13.1
+
+### Fixes
+
+- Patch release for bug fixes and improvements
+
+## 0.13.0
+
+### Features & Enhancements
+
+- Infrastructural work to support eventual RunPayroll early access
+
 ## 0.12.3
 
 ### Features & Enhancements

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

@@ -1,7 +1,14 @@
 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, /* @__PURE__ */ 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,
+        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,11 +1,11 @@
-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 "/home/runner/work/embedded-react-sdk/embedded-react-sdk/node_modules/@gusto/embedded-api/esm/models/errors/apierror.js";
-import { SDKValidationError as C } from "/home/runner/work/embedded-react-sdk/embedded-react-sdk/node_modules/@gusto/embedded-api/esm/models/errors/sdkvalidationerror.js";
-import { UnprocessableEntityErrorObject as h } 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 { APIError as C } from "@gusto/embedded-api/models/errors/apierror";
+import { SDKValidationError as h } from "@gusto/embedded-api/models/errors/sdkvalidationerror";
+import { UnprocessableEntityErrorObject as k } from "@gusto/embedded-api/models/errors/unprocessableentityerrorobject";
+import { QueryErrorResetBoundary as T } from "@tanstack/react-query";
 import { FadeIn as _ } from "../Common/FadeIn/FadeIn.js";
 import { BaseContext as j } from "./useBase.js";
 import { componentEvents as F } from "../../shared/constants.js";
@@ -15,7 +15,7 @@ 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 = (t) => t.map((n) => n.message ? /* @__PURE__ */ o("li", { children: n.message }, n.key) : null), k = (t, 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 (t.category === "invalid_attribute_value" || t.category === "invalid_operation")
     return [
@@ -25,27 +25,27 @@ const U = (t) => t.map((n) => n.message ? /* @__PURE__ */ o("li", { children: n.
       }
     ];
   if (t.category === "nested_errors" && t.errors !== void 0) {
-    let s = "";
-    return t.metadata?.key && typeof t.metadata.key == "string" ? s = t.metadata.key : t.metadata?.state && typeof t.metadata.state == "string" ? s = t.metadata.state : t.errorKey && (s = t.errorKey), t.errors.flatMap((r) => k(r, m + s));
+    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 [];
 }, 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((e) => {
+  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);
-  }, []), A = (e) => {
-    l(e), e instanceof h && Array.isArray(e.errors) && f(e.errors.flatMap((a) => k(a)));
-  }, L = E(
-    async (e, a) => {
+  }, []), 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(e);
+        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]
@@ -55,26 +55,27 @@ const U = (t) => t.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: e }) => /* @__PURE__ */ u(
+      children: /* @__PURE__ */ o(T, { children: ({ reset: e }) => /* @__PURE__ */ y(
         S,
         {
           FallbackComponent: n,
           onReset: e,
-          onError: (a) => {
-            s(F.ERROR, a);
+          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: t }) })
+            /* @__PURE__ */ o(R, { fallback: /* @__PURE__ */ o(u, {}), children: /* @__PURE__ */ o(_, { children: t }) })
           ]
         }
       ) })

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":";;;;;;;;;;;;;;;;;AAoCA,MAAMA,IAAkB,CAACC,MAChBA,EAAU,IAAI,CAAAC,MACfA,EAAc,UACT,gBAAAC,EAAC,MAAA,EAA4B,UAAAD,EAAc,QAAA,GAAlCA,EAAc,GAA4B,IAErD,IACR,GAKGE,IAAiB,CACrBC,GACAC,MACuC;AACvC,QAAMC,IAAYD,IAAYA,IAAY,MAAM;AAChD,MAAID,EAAM,aAAa,6BAA6BA,EAAM,aAAa;AACrE,WAAO;AAAA,MACL;AAAA,QACE,KAAKG,EAAqBD,IAAYF,EAAM,QAAQ;AAAA,QACpD,SAASA,EAAM,WAAW;AAAA,MAAA;AAAA,IAC5B;AAGJ,MAAIA,EAAM,aAAa,mBAAmBA,EAAM,WAAW,QAAW;AAEpE,QAAII,IAAY;AAEhB,WAAIJ,EAAM,UAAU,OAAO,OAAOA,EAAM,SAAS,OAAQ,WAEvDI,IAAYJ,EAAM,SAAS,MAElBA,EAAM,UAAU,SAAS,OAAOA,EAAM,SAAS,SAAU,WAElEI,IAAYJ,EAAM,SAAS,QAClBA,EAAM,aACfI,IAAYJ,EAAM,WAEbA,EAAM,OAAO,QAAQ,CAAAK,MAAON,EAAeM,GAAKH,IAAYE,CAAS,CAAC;AAAA,EAC/E;AACA,SAAO,CAAA;AACT,GAIaE,KAAgB,CAAyD;AAAA,EACpF,UAAAC;AAAA,EACA,mBAAAC,IAAoBC;AAAA,EACpB,iBAAiBC;AAAA,EACjB,SAAAC;AACF,MAA4C;AAC1C,QAAM,CAACX,GAAOY,CAAQ,IAAIC,EAA6B,IAAI,GACrD,CAACC,GAAaC,CAAc,IAAIF,EAA8B,IAAI,GAClEG,IAAaC,EAAA,GACb,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACRC,IAAaC,EAAA,GAEb,EAAE,kBAAkBC,EAAA,IAAgCC,EAAA,GAEpDC,IAAkBd,KAA6BY,GAG/CG,IAA0BC,EAAY,CAAC1B,MAA8B;AACzE,IAAAY,EAASZ,CAAK,GACTA,KACHe,EAAe,IAAI;AAAA,EAEvB,GAAG,CAAA,CAAE,GAECY,IAAe,CAAC3B,MAAuB;AAC3C,IAAAY,EAASZ,CAAK,GAEVA,aAAiB4B,KAAkC,MAAM,QAAQ5B,EAAM,MAAM,KAC/Ee,EAAef,EAAM,OAAO,QAAQ,OAAOD,EAAeM,CAAG,CAAC,CAAC;AAAA,EAEnE,GAEMwB,IAAoBH;AAAA,IACxB,OAAWI,GAASC,MAAuC;AACzD,MAAAnB,EAAS,IAAI,GACbG,EAAe,IAAI;AACnB,UAAI;AACF,cAAMgB,EAAiBD,CAAI;AAAA,MAC7B,SAASzB,GAAK;AACZ,QACEA,aAAe2B,KACf3B,aAAe4B,KACf5B,aAAeuB,IAEfD,EAAatB,CAAG,MACAA,CAAG;AAAA,MACvB;AAAA,IACF;AAAA,IACA,CAACO,GAAUI,CAAU;AAAA,EAAA;AAGvB,SACE,gBAAAlB;AAAA,IAACoC,EAAY;AAAA,IAAZ;AAAA,MACC,OAAO;AAAA,QACL,aAAApB;AAAA,QACA,UAAUW;AAAA,QACV,SAAAd;AAAA,QACA,YAAAK;AAAA,QACA,mBAAAa;AAAA,MAAA;AAAA,MAGF,4BAACM,GAAA,EACE,UAAA,CAAC,EAAE,OAAOC,QACT,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,mBAAA9B;AAAA,UACA,SAAS4B;AAAA,UACT,SAAS,CAAA/B,MAAO;AACd,YAAAM,EAAQ4B,EAAgB,OAAOlC,CAAG;AAAA,UACpC;AAAA,UAEE,UAAA;AAAA,aAAAL,KAASc,MACT,gBAAAuB,EAACjB,EAAW,OAAX,EAAiB,OAAOF,EAAE,yBAAyB,GAAG,QAAO,SAC3D,UAAA;AAAA,cAAAJ,uBAAgBM,EAAW,eAAX,EAAyB,OAAOzB,EAAgBmB,CAAW,GAAG;AAAA,cAC9Ed,KAASA,aAAiBgC,KACzB,gBAAAlC,EAACsB,EAAW,MAAX,EAAiB,YAAM,SAAQ;AAAA,cAEjCpB,KAASA,aAAiBiC,KACzB,gBAAAnC,EAACsB,EAAW,MAAX,EAAgB,IAAG,OAAO,UAAApB,EAAM,OAAA,EAAO,CAAE;AAAA,YAAA,GAE9C;AAAA,YAEF,gBAAAF,EAAC0C,KAAS,UAAU,gBAAA1C,EAAC0B,KAAgB,GACnC,UAAA,gBAAA1B,EAAC2C,GAAA,EAAQ,UAAAlC,EAAA,CAAS,EAAA,CACpB;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,EACF,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"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/FieldDescription/FieldDescription.js

@@ -1,19 +1,12 @@
 import { jsx as t } from "react/jsx-runtime";
-import e from "classnames";
-import p from "./FieldDescription.module.scss.js";
-import { createMarkup as a } from "../../../helpers/formattedStrings.js";
-const u = ({
+import m from "classnames";
+import e from "./FieldDescription.module.scss.js";
+const c = ({
   children: o,
-  className: s,
-  id: m
-}) => {
-  const r = {
-    className: e(p.root, s),
-    id: m
-  };
-  return o && (typeof o == "string" ? /* @__PURE__ */ t("div", { ...r, dangerouslySetInnerHTML: a(o) }) : /* @__PURE__ */ t("div", { ...r, children: o }));
-};
+  className: r,
+  ...s
+}) => o && /* @__PURE__ */ t("div", { ...s, className: m(e.root, r), children: o });
 export {
-  u as FieldDescription
+  c as FieldDescription
 };
 //# sourceMappingURL=FieldDescription.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FieldDescription.js","sources":["../../../../src/components/Common/FieldDescription/FieldDescription.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport styles from './FieldDescription.module.scss'\nimport { createMarkup } from '@/helpers/formattedStrings'\n\ninterface FieldDescriptionProps {\n  children: React.ReactNode\n  className?: string\n  id?: string\n}\n\nexport const FieldDescription: React.FC<FieldDescriptionProps> = ({\n  children,\n  className,\n  id,\n}: FieldDescriptionProps) => {\n  const commonProps = {\n    className: classNames(styles.root, className),\n    id,\n  }\n\n  return (\n    children &&\n    (typeof children === 'string' ? (\n      <div {...commonProps} dangerouslySetInnerHTML={createMarkup(children)} />\n    ) : (\n      <div {...commonProps}>{children}</div>\n    ))\n  )\n}\n"],"names":["FieldDescription","children","className","id","commonProps","classNames","styles","jsx","createMarkup"],"mappings":";;;;AAUO,MAAMA,IAAoD,CAAC;AAAA,EAChE,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,IAAAC;AACF,MAA6B;AAC3B,QAAMC,IAAc;AAAA,IAClB,WAAWC,EAAWC,EAAO,MAAMJ,CAAS;AAAA,IAC5C,IAAAC;AAAA,EAAA;AAGF,SACEF,MACC,OAAOA,KAAa,WACnB,gBAAAM,EAAC,SAAK,GAAGH,GAAa,yBAAyBI,EAAaP,CAAQ,EAAA,CAAG,sBAEtE,OAAA,EAAK,GAAGG,GAAc,UAAAH,EAAA,CAAS;AAGtC;"}
+{"version":3,"file":"FieldDescription.js","sources":["../../../../src/components/Common/FieldDescription/FieldDescription.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport styles from './FieldDescription.module.scss'\n\ninterface FieldDescriptionProps {\n  children: React.ReactNode\n  className?: string\n  id?: string\n}\n\nexport const FieldDescription: React.FC<FieldDescriptionProps> = ({\n  children,\n  className,\n  ...props\n}: FieldDescriptionProps) => {\n  return (\n    children && (\n      <div {...props} className={classNames(styles.root, className)}>\n        {children}\n      </div>\n    )\n  )\n}\n"],"names":["FieldDescription","children","className","props","jsx","classNames","styles"],"mappings":";;;AASO,MAAMA,IAAoD,CAAC;AAAA,EAChE,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,MAEIF,KACE,gBAAAG,EAAC,OAAA,EAAK,GAAGD,GAAO,WAAWE,EAAWC,EAAO,MAAMJ,CAAS,GACzD,UAAAD,EAAA,CACH;"}

package/dist/components/Common/Fields/hooks/useField.d.ts

@@ -1,4 +1,5 @@
 import { RegisterOptions } from 'react-hook-form';
+import { default as React } from 'react';
 export type Transform<TValue> = (value: TValue) => TValue;
 export interface UseFieldProps<TValue = string> {
     name: string;
@@ -8,14 +9,16 @@ export interface UseFieldProps<TValue = string> {
     isRequired?: boolean;
     onChange?: (value: TValue) => void;
     transform?: Transform<TValue>;
+    description?: React.ReactNode;
 }
-export declare function useField<TValue = string>({ name, rules, defaultValue, errorMessage, isRequired, onChange, transform, }: UseFieldProps<TValue>): {
+export declare function useField<TValue = string>({ name, rules, defaultValue, errorMessage, isRequired, onChange, transform, description, }: UseFieldProps<TValue>): {
     value: TValue;
     inputRef: import('react-hook-form').RefCallBack;
     isInvalid: boolean;
     errorMessage: string | undefined;
     onChange: (updatedValue: TValue) => void;
     isRequired: boolean;
+    description: React.ReactNode;
     onBlur: import('react-hook-form').Noop;
     disabled?: boolean;
     name: string;

package/dist/components/Common/Fields/hooks/useField.js

@@ -1,36 +1,43 @@
-import { useFormContext as h, useController as m } from "react-hook-form";
-function F({
-  name: a,
-  rules: i = {},
-  defaultValue: c,
-  errorMessage: u,
+import { useFormContext as h, useController as M } from "react-hook-form";
+import F, { useMemo as x } from "react";
+import { createMarkup as y } from "../../../../helpers/formattedStrings.js";
+const D = (e) => !e || typeof e != "string" ? e : F.createElement("div", {
+  dangerouslySetInnerHTML: y(e)
+});
+function k({
+  name: e,
+  rules: u = {},
+  defaultValue: i,
+  errorMessage: f,
   isRequired: o = !1,
-  onChange: f,
-  transform: r
+  onChange: m,
+  transform: t,
+  description: n
 }) {
-  const { control: d } = h(), { field: e, fieldState: n } = m({
-    name: a,
-    control: d,
+  const { control: p } = h(), { field: r, fieldState: s } = M({
+    name: e,
+    control: p,
     rules: {
       required: o,
-      ...i
+      ...u
     },
-    defaultValue: c
-  }), { ref: g, ...v } = e, C = (t) => {
-    const l = r ? r(t) : t;
-    e.onChange(l), f?.(l);
-  }, s = !!n.error;
+    defaultValue: i
+  }), { ref: g, ...d } = r, v = (a) => {
+    const c = t ? t(a) : a;
+    r.onChange(c), m?.(c);
+  }, l = !!s.error, C = x(() => D(n), [n]);
   return {
-    ...v,
-    value: e.value,
+    ...d,
+    value: r.value,
     inputRef: g,
-    isInvalid: s,
-    errorMessage: s ? u ?? n.error?.message : void 0,
-    onChange: C,
-    isRequired: o
+    isInvalid: l,
+    errorMessage: l ? f ?? s.error?.message : void 0,
+    onChange: v,
+    isRequired: o,
+    description: C
   };
 }
 export {
-  F as useField
+  k as useField
 };
 //# sourceMappingURL=useField.js.map

package/dist/components/Common/Fields/hooks/useField.js.map

@@ -1 +1 @@
-{"version":3,"file":"useField.js","sources":["../../../../../src/components/Common/Fields/hooks/useField.ts"],"sourcesContent":["import type { RegisterOptions } from 'react-hook-form'\nimport { useController, useFormContext } from 'react-hook-form'\n\nexport type Transform<TValue> = (value: TValue) => TValue\n\nexport interface UseFieldProps<TValue = string> {\n  name: string\n  rules?: RegisterOptions\n  defaultValue?: TValue\n  errorMessage?: string\n  isRequired?: boolean\n  onChange?: (value: TValue) => void\n  transform?: Transform<TValue>\n}\n\nexport function useField<TValue = string>({\n  name,\n  rules = {},\n  defaultValue,\n  errorMessage,\n  isRequired = false,\n  onChange,\n  transform,\n}: UseFieldProps<TValue>) {\n  const { control } = useFormContext()\n  const { field, fieldState } = useController({\n    name,\n    control,\n    rules: {\n      required: isRequired,\n      ...rules,\n    },\n    defaultValue,\n  })\n\n  const { ref, ...restFieldProps } = field\n\n  const handleChange = (updatedValue: TValue) => {\n    const value = transform ? transform(updatedValue) : updatedValue\n    field.onChange(value)\n    onChange?.(value)\n  }\n\n  const isInvalid = !!fieldState.error\n\n  return {\n    ...restFieldProps,\n    value: field.value as TValue,\n    inputRef: ref,\n    isInvalid,\n    errorMessage: isInvalid ? (errorMessage ?? fieldState.error?.message) : undefined,\n    onChange: handleChange,\n    isRequired,\n  }\n}\n"],"names":["useField","name","rules","defaultValue","errorMessage","isRequired","onChange","transform","control","useFormContext","field","fieldState","useController","ref","restFieldProps","handleChange","updatedValue","value","isInvalid"],"mappings":";AAeO,SAASA,EAA0B;AAAA,EACxC,MAAAC;AAAA,EACA,OAAAC,IAAQ,CAAA;AAAA,EACR,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,UAAAC;AAAA,EACA,WAAAC;AACF,GAA0B;AACxB,QAAM,EAAE,SAAAC,EAAA,IAAYC,EAAA,GACd,EAAE,OAAAC,GAAO,YAAAC,EAAA,IAAeC,EAAc;AAAA,IAC1C,MAAAX;AAAA,IACA,SAAAO;AAAA,IACA,OAAO;AAAA,MACL,UAAUH;AAAA,MACV,GAAGH;AAAA,IAAA;AAAA,IAEL,cAAAC;AAAA,EAAA,CACD,GAEK,EAAE,KAAAU,GAAK,GAAGC,EAAA,IAAmBJ,GAE7BK,IAAe,CAACC,MAAyB;AAC7C,UAAMC,IAAQV,IAAYA,EAAUS,CAAY,IAAIA;AACpD,IAAAN,EAAM,SAASO,CAAK,GACpBX,IAAWW,CAAK;AAAA,EAClB,GAEMC,IAAY,CAAC,CAACP,EAAW;AAE/B,SAAO;AAAA,IACL,GAAGG;AAAA,IACH,OAAOJ,EAAM;AAAA,IACb,UAAUG;AAAA,IACV,WAAAK;AAAA,IACA,cAAcA,IAAad,KAAgBO,EAAW,OAAO,UAAW;AAAA,IACxE,UAAUI;AAAA,IACV,YAAAV;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"useField.js","sources":["../../../../../src/components/Common/Fields/hooks/useField.ts"],"sourcesContent":["import type { RegisterOptions } from 'react-hook-form'\nimport { useController, useFormContext } from 'react-hook-form'\nimport React, { useMemo } from 'react'\nimport { createMarkup } from '@/helpers/formattedStrings'\n\nexport type Transform<TValue> = (value: TValue) => TValue\n\nexport interface UseFieldProps<TValue = string> {\n  name: string\n  rules?: RegisterOptions\n  defaultValue?: TValue\n  errorMessage?: string\n  isRequired?: boolean\n  onChange?: (value: TValue) => void\n  transform?: Transform<TValue>\n  description?: React.ReactNode\n}\n\nconst processDescription = (description: React.ReactNode): React.ReactNode => {\n  if (!description || typeof description !== 'string') {\n    return description\n  }\n\n  // Use DOMPurify to sanitize the string and return a React element\n  return React.createElement('div', {\n    dangerouslySetInnerHTML: createMarkup(description),\n  })\n}\n\nexport function useField<TValue = string>({\n  name,\n  rules = {},\n  defaultValue,\n  errorMessage,\n  isRequired = false,\n  onChange,\n  transform,\n  description,\n}: UseFieldProps<TValue>) {\n  const { control } = useFormContext()\n  const { field, fieldState } = useController({\n    name,\n    control,\n    rules: {\n      required: isRequired,\n      ...rules,\n    },\n    defaultValue,\n  })\n\n  const { ref, ...restFieldProps } = field\n\n  const handleChange = (updatedValue: TValue) => {\n    const value = transform ? transform(updatedValue) : updatedValue\n    field.onChange(value)\n    onChange?.(value)\n  }\n\n  const isInvalid = !!fieldState.error\n\n  const processedDescription = useMemo(() => processDescription(description), [description])\n\n  return {\n    ...restFieldProps,\n    value: field.value as TValue,\n    inputRef: ref,\n    isInvalid,\n    errorMessage: isInvalid ? (errorMessage ?? fieldState.error?.message) : undefined,\n    onChange: handleChange,\n    isRequired,\n    description: processedDescription,\n  }\n}\n"],"names":["processDescription","description","React","createMarkup","useField","name","rules","defaultValue","errorMessage","isRequired","onChange","transform","control","useFormContext","field","fieldState","useController","ref","restFieldProps","handleChange","updatedValue","value","isInvalid","processedDescription","useMemo"],"mappings":";;;AAkBA,MAAMA,IAAqB,CAACC,MACtB,CAACA,KAAe,OAAOA,KAAgB,WAClCA,IAIFC,EAAM,cAAc,OAAO;AAAA,EAChC,yBAAyBC,EAAaF,CAAW;AAAA,CAClD;AAGI,SAASG,EAA0B;AAAA,EACxC,MAAAC;AAAA,EACA,OAAAC,IAAQ,CAAA;AAAA,EACR,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAV;AACF,GAA0B;AACxB,QAAM,EAAE,SAAAW,EAAA,IAAYC,EAAA,GACd,EAAE,OAAAC,GAAO,YAAAC,EAAA,IAAeC,EAAc;AAAA,IAC1C,MAAAX;AAAA,IACA,SAAAO;AAAA,IACA,OAAO;AAAA,MACL,UAAUH;AAAA,MACV,GAAGH;AAAA,IAAA;AAAA,IAEL,cAAAC;AAAA,EAAA,CACD,GAEK,EAAE,KAAAU,GAAK,GAAGC,EAAA,IAAmBJ,GAE7BK,IAAe,CAACC,MAAyB;AAC7C,UAAMC,IAAQV,IAAYA,EAAUS,CAAY,IAAIA;AACpD,IAAAN,EAAM,SAASO,CAAK,GACpBX,IAAWW,CAAK;AAAA,EAClB,GAEMC,IAAY,CAAC,CAACP,EAAW,OAEzBQ,IAAuBC,EAAQ,MAAMxB,EAAmBC,CAAW,GAAG,CAACA,CAAW,CAAC;AAEzF,SAAO;AAAA,IACL,GAAGiB;AAAA,IACH,OAAOJ,EAAM;AAAA,IACb,UAAUG;AAAA,IACV,WAAAK;AAAA,IACA,cAAcA,IAAad,KAAgBO,EAAW,OAAO,UAAW;AAAA,IACxE,UAAUI;AAAA,IACV,YAAAV;AAAA,IACA,aAAac;AAAA,EAAA;AAEjB;"}

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';