@gusto/embedded-react-sdk 0.17.0 → 0.19.0

package/CHANGELOG.md

@@ -1,5 +1,63 @@
 # Changelog
 
+## 0.19.0
+
+### Features & Enhancements
+
+- Add Banner component for displaying important messages and alerts
+- Update Badge component radius styling
+- Remove ul from base.css and update components to use List component
+- Restore spacing values to input groups
+- Normalize translation keys and add translation guidelines
+
+### Chores & Maintenance
+
+- Upgrade to Gusto Embedded API v0.10.2
+- Update custom deductions form to use latest input components
+- Update documentation for Gusto API v2025-06-15 upgrade
+
+### Breaking changes
+
+#### Translation key normalization
+
+Translation keys have been normalized to follow a consistent naming convention. If you have custom dictionary overrides, you may need to update your translation keys to match the new format. Going forward, all translation keys will maintain this normalized format for consistency across the SDK.
+
+## 0.18.0
+
+### Features & Enhancements
+
+- Add Modal component
+- Update Tabs to allow for responsive behavior
+- Update to provide all profile fields on admin review
+- Updates UI for deductions v2
+- Update autogenerated component adapter props docs
+- Add error handling for payroll processing
+
+### Fixes
+
+- Update to restore translations in federal taxes
+- Fix responsive layouts in payroll components
+- Fix clearing alerts when leaving overview step
+
+### Refactoring
+
+- Normalize date formatting and consolidate hooks into single location
+
+### Chores & Maintenance
+
+- Upgrade to Gusto Embedded API v2025-06-15
+- Bump react-hook-form from 7.65.0 to 7.66.0
+- Bump typescript-eslint from 8.46.2 to 8.46.3
+- Bump @ladle/react from 5.1.0 to 5.1.1
+- Bump react-i18next from 16.2.3 to 16.2.4
+- Bump eslint from 9.39.0 to 9.39.1
+- Bump @eslint/js from 9.39.0 to 9.39.1
+- Bump eslint from 9.38.0 to 9.39.0
+- Bump sass-embedded from 1.93.2 to 1.93.3
+- Bump globals from 16.4.0 to 16.5.0
+- Bump @eslint/js from 9.38.0 to 9.39.0
+- Bump react-i18next from 16.2.1 to 16.2.3
+
 ## 0.17.0
 
 ### Features & Enhancements

package/dist/assets/icons/icon-error-outline.svg.js

@@ -0,0 +1,10 @@
+import * as e from "react";
+const a = ({
+  title: t,
+  titleId: r,
+  ...o
+}) => /* @__PURE__ */ e.createElement("svg", { width: 46, height: 46, viewBox: "0 0 46 46", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-labelledby": r, ...o }, t ? /* @__PURE__ */ e.createElement("title", { id: r }, t) : null, /* @__PURE__ */ e.createElement("g", { opacity: 0.3 }, /* @__PURE__ */ e.createElement("path", { d: "M23 6C32.3888 6 40 13.6112 40 23C40 32.3888 32.3888 40 23 40C13.6112 40 6 32.3888 6 23C6 13.6112 13.6112 6 23 6Z", stroke: "white", strokeWidth: 2 })), /* @__PURE__ */ e.createElement("g", { opacity: 0.1 }, /* @__PURE__ */ e.createElement("path", { d: "M23 1C35.1503 1 45 10.8497 45 23C45 35.1503 35.1503 45 23 45C10.8497 45 1 35.1503 1 23C1 10.8497 10.8497 1 23 1Z", stroke: "white", strokeWidth: 2 })), /* @__PURE__ */ e.createElement("path", { d: "M26.5 19.4997L19.5 26.4997M19.5 19.4997L26.5 26.4997M34.6667 22.9997C34.6667 29.443 29.4434 34.6663 23 34.6663C16.5567 34.6663 11.3334 29.443 11.3334 22.9997C11.3334 16.5564 16.5567 11.333 23 11.333C29.4434 11.333 34.6667 16.5564 34.6667 22.9997Z", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }));
+export {
+  a as default
+};
+//# sourceMappingURL=icon-error-outline.svg.js.map

package/dist/assets/icons/icon-error-outline.svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-error-outline.svg.js","sources":["../../../src/assets/icons/icon-error-outline.svg?react"],"sourcesContent":["import * as React from \"react\";\nconst SvgIconErrorOutline = ({\n  title,\n  titleId,\n  ...props\n}) => /* @__PURE__ */ React.createElement(\"svg\", { width: 46, height: 46, viewBox: \"0 0 46 46\", fill: \"none\", xmlns: \"http://www.w3.org/2000/svg\", \"aria-labelledby\": titleId, ...props }, title ? /* @__PURE__ */ React.createElement(\"title\", { id: titleId }, title) : null, /* @__PURE__ */ React.createElement(\"g\", { opacity: 0.3 }, /* @__PURE__ */ React.createElement(\"path\", { d: \"M23 6C32.3888 6 40 13.6112 40 23C40 32.3888 32.3888 40 23 40C13.6112 40 6 32.3888 6 23C6 13.6112 13.6112 6 23 6Z\", stroke: \"white\", strokeWidth: 2 })), /* @__PURE__ */ React.createElement(\"g\", { opacity: 0.1 }, /* @__PURE__ */ React.createElement(\"path\", { d: \"M23 1C35.1503 1 45 10.8497 45 23C45 35.1503 35.1503 45 23 45C10.8497 45 1 35.1503 1 23C1 10.8497 10.8497 1 23 1Z\", stroke: \"white\", strokeWidth: 2 })), /* @__PURE__ */ React.createElement(\"path\", { d: \"M26.5 19.4997L19.5 26.4997M19.5 19.4997L26.5 26.4997M34.6667 22.9997C34.6667 29.443 29.4434 34.6663 23 34.6663C16.5567 34.6663 11.3334 29.443 11.3334 22.9997C11.3334 16.5564 16.5567 11.333 23 11.333C29.4434 11.333 34.6667 16.5564 34.6667 22.9997Z\", stroke: \"white\", strokeWidth: 2, strokeLinecap: \"round\", strokeLinejoin: \"round\" }));\nexport default SvgIconErrorOutline;\n"],"names":["SvgIconErrorOutline","title","titleId","props","React"],"mappings":";AACK,MAACA,IAAsB,CAAC;AAAA,EAC3B,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,MAAsB,gBAAAC,EAAM,cAAc,OAAO,EAAE,OAAO,IAAI,QAAQ,IAAI,SAAS,aAAa,MAAM,QAAQ,OAAO,8BAA8B,mBAAmBF,GAAS,GAAGC,EAAK,GAAIF,IAAwB,gBAAAG,EAAM,cAAc,SAAS,EAAE,IAAIF,EAAO,GAAID,CAAK,IAAI,MAAsB,gBAAAG,EAAM,cAAc,KAAK,EAAE,SAAS,IAAG,GAAoB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,GAAG,oHAAoH,QAAQ,SAAS,aAAa,EAAC,CAAE,CAAC,GAAmB,gBAAAA,EAAM,cAAc,KAAK,EAAE,SAAS,IAAG,GAAoB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,GAAG,oHAAoH,QAAQ,SAAS,aAAa,GAAG,CAAC,GAAmB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,GAAG,0PAA0P,QAAQ,SAAS,aAAa,GAAG,eAAe,SAAS,gBAAgB,SAAS,CAAC;"}

package/dist/assets/icons/icon-info-outline.svg.js

@@ -0,0 +1,10 @@
+import * as e from "react";
+const a = ({
+  title: t,
+  titleId: o,
+  ...r
+}) => /* @__PURE__ */ e.createElement("svg", { width: 46, height: 46, viewBox: "0 0 46 46", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-labelledby": o, ...r }, t ? /* @__PURE__ */ e.createElement("title", { id: o }, t) : null, /* @__PURE__ */ e.createElement("g", { opacity: 0.3 }, /* @__PURE__ */ e.createElement("path", { d: "M23 6C32.3888 6 40 13.6112 40 23C40 32.3888 32.3888 40 23 40C13.6112 40 6 32.3888 6 23C6 13.6112 13.6112 6 23 6Z", stroke: "white", strokeWidth: 2 })), /* @__PURE__ */ e.createElement("g", { opacity: 0.1 }, /* @__PURE__ */ e.createElement("path", { d: "M23 1C35.1503 1 45 10.8497 45 23C45 35.1503 35.1503 45 23 45C10.8497 45 1 35.1503 1 23C1 10.8497 10.8497 1 23 1Z", stroke: "white", strokeWidth: 2 })), /* @__PURE__ */ e.createElement("path", { d: "M22.9999 18.334V23.0007M22.9999 27.6673H23.0116M34.6666 23.0007C34.6666 29.444 29.4432 34.6673 22.9999 34.6673C16.5566 34.6673 11.3333 29.444 11.3333 23.0007C11.3333 16.5573 16.5566 11.334 22.9999 11.334C29.4432 11.334 34.6666 16.5573 34.6666 23.0007Z", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }));
+export {
+  a as default
+};
+//# sourceMappingURL=icon-info-outline.svg.js.map

package/dist/assets/icons/icon-info-outline.svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-info-outline.svg.js","sources":["../../../src/assets/icons/icon-info-outline.svg?react"],"sourcesContent":["import * as React from \"react\";\nconst SvgIconInfoOutline = ({\n  title,\n  titleId,\n  ...props\n}) => /* @__PURE__ */ React.createElement(\"svg\", { width: 46, height: 46, viewBox: \"0 0 46 46\", fill: \"none\", xmlns: \"http://www.w3.org/2000/svg\", \"aria-labelledby\": titleId, ...props }, title ? /* @__PURE__ */ React.createElement(\"title\", { id: titleId }, title) : null, /* @__PURE__ */ React.createElement(\"g\", { opacity: 0.3 }, /* @__PURE__ */ React.createElement(\"path\", { d: \"M23 6C32.3888 6 40 13.6112 40 23C40 32.3888 32.3888 40 23 40C13.6112 40 6 32.3888 6 23C6 13.6112 13.6112 6 23 6Z\", stroke: \"white\", strokeWidth: 2 })), /* @__PURE__ */ React.createElement(\"g\", { opacity: 0.1 }, /* @__PURE__ */ React.createElement(\"path\", { d: \"M23 1C35.1503 1 45 10.8497 45 23C45 35.1503 35.1503 45 23 45C10.8497 45 1 35.1503 1 23C1 10.8497 10.8497 1 23 1Z\", stroke: \"white\", strokeWidth: 2 })), /* @__PURE__ */ React.createElement(\"path\", { d: \"M22.9999 18.334V23.0007M22.9999 27.6673H23.0116M34.6666 23.0007C34.6666 29.444 29.4432 34.6673 22.9999 34.6673C16.5566 34.6673 11.3333 29.444 11.3333 23.0007C11.3333 16.5573 16.5566 11.334 22.9999 11.334C29.4432 11.334 34.6666 16.5573 34.6666 23.0007Z\", stroke: \"white\", strokeWidth: 2, strokeLinecap: \"round\", strokeLinejoin: \"round\" }));\nexport default SvgIconInfoOutline;\n"],"names":["SvgIconInfoOutline","title","titleId","props","React"],"mappings":";AACK,MAACA,IAAqB,CAAC;AAAA,EAC1B,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,MAAsB,gBAAAC,EAAM,cAAc,OAAO,EAAE,OAAO,IAAI,QAAQ,IAAI,SAAS,aAAa,MAAM,QAAQ,OAAO,8BAA8B,mBAAmBF,GAAS,GAAGC,EAAK,GAAIF,IAAwB,gBAAAG,EAAM,cAAc,SAAS,EAAE,IAAIF,EAAO,GAAID,CAAK,IAAI,MAAsB,gBAAAG,EAAM,cAAc,KAAK,EAAE,SAAS,IAAG,GAAoB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,GAAG,oHAAoH,QAAQ,SAAS,aAAa,EAAC,CAAE,CAAC,GAAmB,gBAAAA,EAAM,cAAc,KAAK,EAAE,SAAS,IAAG,GAAoB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,GAAG,oHAAoH,QAAQ,SAAS,aAAa,GAAG,CAAC,GAAmB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,GAAG,+PAA+P,QAAQ,SAAS,aAAa,GAAG,eAAe,SAAS,gBAAgB,SAAS,CAAC;"}

package/dist/assets/icons/icon-zap-fast.svg.js

@@ -0,0 +1,10 @@
+import * as e from "react";
+const o = ({
+  title: t,
+  titleId: a,
+  ...n
+}) => /* @__PURE__ */ e.createElement("svg", { width: 12, height: 10, viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-labelledby": a, ...n }, t ? /* @__PURE__ */ e.createElement("title", { id: a }, t) : null, /* @__PURE__ */ e.createElement("path", { d: "M4 7.75006H1.25M2.75 5.00006H0.5M4 2.25006H1.5M8 0.500061L4.70178 5.11757C4.5558 5.32194 4.48281 5.42413 4.48597 5.50933C4.48872 5.5835 4.52429 5.65262 4.58305 5.69797C4.65054 5.75006 4.77612 5.75006 5.02728 5.75006H7.5L7 9.50006L10.2982 4.88256C10.4442 4.67818 10.5172 4.57599 10.514 4.4908C10.5113 4.41662 10.4757 4.3475 10.417 4.30215C10.3495 4.25006 10.2239 4.25006 9.97272 4.25006H7.5L8 0.500061Z", stroke: "#079455", strokeLinecap: "round", strokeLinejoin: "round" }));
+export {
+  o as default
+};
+//# sourceMappingURL=icon-zap-fast.svg.js.map

package/dist/assets/icons/icon-zap-fast.svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-zap-fast.svg.js","sources":["../../../src/assets/icons/icon-zap-fast.svg?react"],"sourcesContent":["import * as React from \"react\";\nconst SvgIconZapFast = ({\n  title,\n  titleId,\n  ...props\n}) => /* @__PURE__ */ React.createElement(\"svg\", { width: 12, height: 10, viewBox: \"0 0 12 10\", fill: \"none\", xmlns: \"http://www.w3.org/2000/svg\", \"aria-labelledby\": titleId, ...props }, title ? /* @__PURE__ */ React.createElement(\"title\", { id: titleId }, title) : null, /* @__PURE__ */ React.createElement(\"path\", { d: \"M4 7.75006H1.25M2.75 5.00006H0.5M4 2.25006H1.5M8 0.500061L4.70178 5.11757C4.5558 5.32194 4.48281 5.42413 4.48597 5.50933C4.48872 5.5835 4.52429 5.65262 4.58305 5.69797C4.65054 5.75006 4.77612 5.75006 5.02728 5.75006H7.5L7 9.50006L10.2982 4.88256C10.4442 4.67818 10.5172 4.57599 10.514 4.4908C10.5113 4.41662 10.4757 4.3475 10.417 4.30215C10.3495 4.25006 10.2239 4.25006 9.97272 4.25006H7.5L8 0.500061Z\", stroke: \"#079455\", strokeLinecap: \"round\", strokeLinejoin: \"round\" }));\nexport default SvgIconZapFast;\n"],"names":["SvgIconZapFast","title","titleId","props","React"],"mappings":";AACK,MAACA,IAAiB,CAAC;AAAA,EACtB,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,MAAsB,gBAAAC,EAAM,cAAc,OAAO,EAAE,OAAO,IAAI,QAAQ,IAAI,SAAS,aAAa,MAAM,QAAQ,OAAO,8BAA8B,mBAAmBF,GAAS,GAAGC,EAAK,GAAIF,IAAwB,gBAAAG,EAAM,cAAc,SAAS,EAAE,IAAIF,EAAO,GAAID,CAAK,IAAI,MAAsB,gBAAAG,EAAM,cAAc,QAAQ,EAAE,GAAG,qZAAqZ,QAAQ,WAAW,eAAe,SAAS,gBAAgB,SAAS,CAAC;"}

package/dist/components/Base/Base.js

@@ -1,81 +1,66 @@
-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 C } from "@gusto/embedded-api/models/errors/apierror";
+import { jsx as o, jsxs as p } from "react/jsx-runtime";
+import { useState as f, useCallback as u, Suspense as R } from "react";
+import { ErrorBoundary as B } from "react-error-boundary";
+import { useTranslation as S } from "react-i18next";
+import { APIError as E } 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";
-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 = (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 [
-      {
-        key: w(m + t.errorKey),
-        message: t.message ?? ""
-      }
-    ];
-  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 [];
-}, ot = ({
-  children: t,
-  FallbackComponent: n = P,
-  LoaderComponent: m,
-  onEvent: a
+import { UnprocessableEntityErrorObject as y } from "@gusto/embedded-api/models/errors/unprocessableentityerrorobject";
+import { QueryErrorResetBoundary as j } from "@tanstack/react-query";
+import { FadeIn as T } from "../Common/FadeIn/FadeIn.js";
+import { BaseContext as k } from "./useBase.js";
+import { componentEvents as v } from "../../shared/constants.js";
+import { InternalError as w } from "../Common/InternalError/InternalError.js";
+import { useComponentContext as O } from "../../contexts/ComponentAdapter/useComponentContext.js";
+import { useLoadingIndicator as P } from "../../contexts/LoadingIndicatorProvider/useLoadingIndicator.js";
+import { renderErrorList as U, getFieldErrors as D } from "../../helpers/apiErrorToList.js";
+import { useAsyncError as H } from "../../hooks/useAsyncError.js";
+const or = ({
+  children: C,
+  FallbackComponent: x = w,
+  LoaderComponent: L,
+  onEvent: l
 }) => {
-  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);
+  const [t, s] = f(null), [i, m] = f(null), c = H(), { t: b } = S(), a = O(), { LoadingIndicator: I } = P(), d = L ?? I, g = u((r) => {
+    s(r), r || m(null);
+  }, []), A = (r) => {
+    s(r), r instanceof y && Array.isArray(r.errors) && m(r.errors.flatMap((e) => D(e)));
+  }, F = u(
+    async (r, e) => {
+      s(null), m(null);
       try {
-        await s(e);
-      } catch (i) {
-        i instanceof C || i instanceof h || i instanceof k ? L(i) : p(i);
+        await e(r);
+      } catch (n) {
+        n instanceof E || n instanceof h || n instanceof y ? A(n) : c(n);
       }
     },
-    [l, p]
+    [s, c]
   );
   return /* @__PURE__ */ o(
-    j.Provider,
+    k.Provider,
     {
       value: {
-        fieldErrors: c,
-        setError: v,
-        onEvent: a,
-        throwError: p,
-        baseSubmitHandler: A,
-        LoadingIndicator: u
+        fieldErrors: i,
+        setError: g,
+        onEvent: l,
+        throwError: c,
+        baseSubmitHandler: F,
+        LoadingIndicator: d
       },
-      children: /* @__PURE__ */ o(T, { children: ({ reset: e }) => /* @__PURE__ */ y(
-        S,
+      children: /* @__PURE__ */ o(j, { children: ({ reset: r }) => /* @__PURE__ */ p(
+        B,
         {
-          FallbackComponent: n,
-          onReset: e,
-          onError: (s) => {
-            a(F.ERROR, s);
+          FallbackComponent: x,
+          onReset: r,
+          onError: (e) => {
+            l(v.ERROR, e);
           },
           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 C && /* @__PURE__ */ o(d.Text, { children: r.message }),
-              r && r instanceof h && /* @__PURE__ */ o(d.Text, { as: "pre", children: r.pretty() })
+            (t || i) && /* @__PURE__ */ p(a.Alert, { label: b("status.errorEncountered"), status: "error", children: [
+              i && /* @__PURE__ */ o(a.UnorderedList, { items: U(i) }),
+              t && t instanceof E && /* @__PURE__ */ o(a.Text, { children: t.message }),
+              t && t instanceof h && /* @__PURE__ */ o(a.Text, { as: "pre", children: t.pretty() })
             ] }),
-            /* @__PURE__ */ o(R, { fallback: /* @__PURE__ */ o(u, {}), children: /* @__PURE__ */ o(_, { children: t }) })
+            /* @__PURE__ */ o(R, { fallback: /* @__PURE__ */ o(d, {}), children: /* @__PURE__ */ o(T, { children: C }) })
           ]
         }
       ) })
@@ -83,6 +68,6 @@ const U = (t) => t.map((n) => n.message ? /* @__PURE__ */ o("li", { children: n.
   );
 };
 export {
-  ot as BaseComponent
+  or 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        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":";;;;;;;;;;;;;;;;;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,QACA,kBAAkBL;AAAA,MAAA;AAAA,MAGpB,4BAACW,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 { QueryErrorResetBoundary } from '@tanstack/react-query'\nimport type { EntityErrorObject } from '@gusto/embedded-api/models/components/entityerrorobject'\nimport { FadeIn } from '../Common/FadeIn/FadeIn'\nimport { BaseContext, type KnownErrors, type OnEventType } from './useBase'\nimport { componentEvents, type EventType } from '@/shared/constants'\nimport { InternalError } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport type { ResourceDictionary, Resources } from '@/types/Helpers'\nimport { useLoadingIndicator } from '@/contexts/LoadingIndicatorProvider/useLoadingIndicator'\nimport type { LoadingIndicatorContextProps } from '@/contexts/LoadingIndicatorProvider/useLoadingIndicator'\nimport { getFieldErrors, renderErrorList } from '@/helpers/apiErrorToList'\nimport { useAsyncError } from '@/hooks/useAsyncError'\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\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<EntityErrorObject[] | 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":["BaseComponent","children","FallbackComponent","InternalError","LoadingIndicatorFromProps","onEvent","error","setError","useState","fieldErrors","setFieldErrors","throwError","useAsyncError","t","useTranslation","Components","useComponentContext","LoadingIndicatorFromContext","useLoadingIndicator","LoaderComponent","setErrorWithFieldsClear","useCallback","processError","UnprocessableEntityErrorObject","getFieldErrors","err","baseSubmitHandler","data","componentHandler","APIError","SDKValidationError","jsx","BaseContext","QueryErrorResetBoundary","resetQueries","jsxs","ErrorBoundary","componentEvents","renderErrorList","Suspense","FadeIn"],"mappings":";;;;;;;;;;;;;;;;AAsCO,MAAMA,KAAgB,CAAyD;AAAA,EACpF,UAAAC;AAAA,EACA,mBAAAC,IAAoBC;AAAA,EACpB,iBAAiBC;AAAA,EACjB,SAAAC;AACF,MAA4C;AAC1C,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAA6B,IAAI,GACrD,CAACC,GAAaC,CAAc,IAAIF,EAAqC,IAAI,GACzEG,IAAaC,EAAA,GACb,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACRC,IAAaC,EAAA,GAEb,EAAE,kBAAkBC,EAAA,IAAgCC,EAAA,GAEpDC,IAAkBf,KAA6Ba,GAG/CG,IAA0BC,EAAY,CAACf,MAA8B;AACzE,IAAAC,EAASD,CAAK,GACTA,KACHI,EAAe,IAAI;AAAA,EAEvB,GAAG,CAAA,CAAE,GAECY,IAAe,CAAChB,MAAuB;AAC3C,IAAAC,EAASD,CAAK,GAEVA,aAAiBiB,KAAkC,MAAM,QAAQjB,EAAM,MAAM,KAC/EI,EAAeJ,EAAM,OAAO,QAAQ,OAAOkB,EAAeC,CAAG,CAAC,CAAC;AAAA,EAEnE,GAEMC,IAAoBL;AAAA,IACxB,OAAWM,GAASC,MAAuC;AACzD,MAAArB,EAAS,IAAI,GACbG,EAAe,IAAI;AACnB,UAAI;AACF,cAAMkB,EAAiBD,CAAI;AAAA,MAC7B,SAASF,GAAK;AACZ,QACEA,aAAeI,KACfJ,aAAeK,KACfL,aAAeF,IAEfD,EAAaG,CAAG,MACAA,CAAG;AAAA,MACvB;AAAA,IACF;AAAA,IACA,CAAClB,GAAUI,CAAU;AAAA,EAAA;AAGvB,SACE,gBAAAoB;AAAA,IAACC,EAAY;AAAA,IAAZ;AAAA,MACC,OAAO;AAAA,QACL,aAAAvB;AAAA,QACA,UAAUW;AAAA,QACV,SAAAf;AAAA,QACA,YAAAM;AAAA,QACA,mBAAAe;AAAA,QACA,kBAAkBP;AAAA,MAAA;AAAA,MAGpB,4BAACc,GAAA,EACE,UAAA,CAAC,EAAE,OAAOC,QACT,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,mBAAAlC;AAAA,UACA,SAASgC;AAAA,UACT,SAAS,CAAAT,MAAO;AACd,YAAApB,EAAQgC,EAAgB,OAAOZ,CAAG;AAAA,UACpC;AAAA,UAEE,UAAA;AAAA,aAAAnB,KAASG,MACT,gBAAA0B,EAACpB,EAAW,OAAX,EAAiB,OAAOF,EAAE,yBAAyB,GAAG,QAAO,SAC3D,UAAA;AAAA,cAAAJ,uBAAgBM,EAAW,eAAX,EAAyB,OAAOuB,EAAgB7B,CAAW,GAAG;AAAA,cAC9EH,KAASA,aAAiBuB,KACzB,gBAAAE,EAAChB,EAAW,MAAX,EAAiB,YAAM,SAAQ;AAAA,cAEjCT,KAASA,aAAiBwB,KACzB,gBAAAC,EAAChB,EAAW,MAAX,EAAgB,IAAG,OAAO,UAAAT,EAAM,OAAA,EAAO,CAAE;AAAA,YAAA,GAE9C;AAAA,YAEF,gBAAAyB,EAACQ,KAAS,UAAU,gBAAAR,EAACZ,KAAgB,GACnC,UAAA,gBAAAY,EAACS,GAAA,EAAQ,UAAAvC,EAAA,CAAS,EAAA,CACpB;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,EACF,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -1,16 +1,13 @@
 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 { EntityErrorObject } from '@gusto/embedded-api/models/components/entityerrorobject';
 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 = {
-    key: string;
-    message: string;
-};
 interface BaseContextProps {
-    fieldErrors: FieldError[] | null;
+    fieldErrors: Array<EntityErrorObject> | null;
     setError: (err: KnownErrors | null) => void;
     onEvent: OnEventType<EventType, unknown>;
     throwError: (e: unknown) => void;

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'\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;"}
+{"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 { EntityErrorObject } from '@gusto/embedded-api/models/components/entityerrorobject'\nimport { type EventType } from '@/shared/constants'\nimport type { LoadingIndicatorContextProps } from '@/contexts/LoadingIndicatorProvider/useLoadingIndicator'\n\nexport type OnEventType<K, T> = (type: K, data?: T) => void\n\nexport type KnownErrors = APIError | SDKValidationError | UnprocessableEntityErrorObject\n\ninterface BaseContextProps {\n  fieldErrors: Array<EntityErrorObject> | 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":";AAwBO,MAAMA,IAAcC,EAA4C,MAAS,GAEnEC,IAAU,MAAM;AAC3B,QAAMC,IAAUC,EAAWJ,CAAW;AACtC,MAAI,CAACG;AACH,UAAM,IAAI,MAAM,4CAA4C;AAE9D,SAAOA;AACT;"}

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

@@ -1,4 +1,4 @@
-const e = "_root_15bax_1", i = "_legendAndDescription_15bax_10", s = "_withVisibleLegend_15bax_14", t = "_withDescription_15bax_17", o = "_errorMessage_15bax_21", n = {
+const e = "_root_1xzgf_1", i = "_legendAndDescription_1xzgf_10", s = "_withVisibleLegend_1xzgf_14", t = "_withDescription_1xzgf_17", o = "_errorMessage_1xzgf_21", n = {
   root: e,
   legendAndDescription: i,
   withVisibleLegend: s,

package/dist/components/Common/FlowBreadcrumbs/FlowBreadcrumbs.js

@@ -1,54 +1,60 @@
-import { jsx as l } from "react/jsx-runtime";
-import { useTranslation as u } from "react-i18next";
-import { useRef as C, useMemo as B } from "react";
-import { useComponentContext as d } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { componentEvents as k } from "../../../shared/constants.js";
-import { useI18n as h } from "../../../i18n/I18n.js";
-import { useContainerBreakpoints as v } from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
-function j({
-  breadcrumbs: o,
-  currentBreadcrumbId: r,
-  onEvent: a
+import { jsx as p } from "react/jsx-runtime";
+import { useTranslation as h } from "react-i18next";
+import { useRef as C, useMemo as d } from "react";
+import { useComponentContext as u } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { componentEvents as B } from "../../../shared/constants.js";
+import { useI18n as k } from "../../../i18n/I18n.js";
+import { useLocale as g } from "../../../contexts/LocaleProvider/useLocale.js";
+import { useContainerBreakpoints as R } from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
+import { useDateFormatter as V } from "../../../hooks/useDateFormatter.js";
+function Y({
+  breadcrumbs: a,
+  currentBreadcrumbId: f,
+  onEvent: s
 }) {
-  const s = C(null), p = v({ ref: s }).length === 1, { Breadcrumbs: m } = d(), i = o.reduce(
-    (e, n) => (n.namespace && e.push(n.namespace), e),
+  const i = C(null), m = R({ ref: i }).length === 1, { Breadcrumbs: c } = u(), { locale: v } = g(), r = V(), l = a.reduce(
+    (t, e) => (e.namespace && t.push(e.namespace), t),
     []
   );
-  h(i);
-  const { t } = u(i), f = B(
-    () => o.map((e) => {
-      const n = e.namespace ? t(e.label, {
-        ns: e.namespace,
-        defaultValue: e.label,
-        ...e.variables
-      }) : t(e.label, {
-        defaultValue: e.label,
-        ...e.variables
+  k(l);
+  const { t: o } = h(l), D = d(
+    () => a.map((t) => {
+      const e = t.variables ? {
+        ...t.variables,
+        startDate: typeof t.variables.startDate == "string" ? r.formatShortWithYear(t.variables.startDate) : t.variables.startDate,
+        endDate: typeof t.variables.endDate == "string" ? r.formatShortWithYear(t.variables.endDate) : t.variables.endDate
+      } : void 0, n = t.namespace ? o(t.label, {
+        ns: t.namespace,
+        defaultValue: t.label,
+        ...e
+      }) : o(t.label, {
+        defaultValue: t.label,
+        ...e
       });
       return {
-        id: e.id,
+        id: t.id,
         label: n
       };
     }),
-    [o, t]
+    [a, o, v]
   );
-  return /* @__PURE__ */ l("div", { ref: s, children: /* @__PURE__ */ l(
-    m,
+  return /* @__PURE__ */ p("div", { ref: i, children: /* @__PURE__ */ p(
+    c,
     {
-      isSmallContainer: p,
-      breadcrumbs: f,
-      currentBreadcrumbId: r,
-      onClick: (e) => {
-        const n = o.find((c) => c.id === e);
-        a && n && a(k.BREADCRUMB_NAVIGATE, {
-          key: e,
-          onNavigate: n.onNavigate
+      isSmallContainer: m,
+      breadcrumbs: D,
+      currentBreadcrumbId: f,
+      onClick: (t) => {
+        const e = a.find((n) => n.id === t);
+        s && e && s(B.BREADCRUMB_NAVIGATE, {
+          key: t,
+          onNavigate: e.onNavigate
         });
       }
     }
   ) });
 }
 export {
-  j as FlowBreadcrumbs
+  Y as FlowBreadcrumbs
 };
 //# sourceMappingURL=FlowBreadcrumbs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FlowBreadcrumbs.js","sources":["../../../../src/components/Common/FlowBreadcrumbs/FlowBreadcrumbs.tsx"],"sourcesContent":["import type { CustomTypeOptions } from 'i18next'\nimport { useTranslation } from 'react-i18next'\nimport { useMemo, useRef } from 'react'\nimport type { FlowBreadcrumbsProps } from './FlowBreadcrumbsTypes'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { componentEvents } from '@/shared/constants'\nimport { useI18n } from '@/i18n/I18n'\nimport { useContainerBreakpoints } from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\n\nexport function FlowBreadcrumbs({\n  breadcrumbs,\n  currentBreadcrumbId,\n  onEvent,\n}: FlowBreadcrumbsProps) {\n  const breadcrumbContainerRef = useRef<HTMLDivElement | null>(null)\n  const breakpoints = useContainerBreakpoints({ ref: breadcrumbContainerRef })\n  // Small if we only contain the base breakpoint\n  const isSmallContainer = breakpoints.length === 1\n\n  const { Breadcrumbs } = useComponentContext()\n  const namespaces = breadcrumbs.reduce<Array<keyof CustomTypeOptions['resources']>>(\n    (acc, breadcrumb) => {\n      if (breadcrumb.namespace) {\n        acc.push(breadcrumb.namespace as keyof CustomTypeOptions['resources'])\n      }\n      return acc\n    },\n    [],\n  )\n  useI18n(namespaces)\n  const { t } = useTranslation(namespaces)\n\n  const parsedBreadcrumbs = useMemo(\n    () =>\n      breadcrumbs.map(breadcrumb => {\n        const translatedLabel = breadcrumb.namespace\n          ? (t(breadcrumb.label, {\n              ns: breadcrumb.namespace,\n              defaultValue: breadcrumb.label,\n              ...breadcrumb.variables,\n            } as never) as unknown as string)\n          : (t(breadcrumb.label, {\n              defaultValue: breadcrumb.label,\n              ...breadcrumb.variables,\n            } as never) as unknown as string)\n        return {\n          id: breadcrumb.id,\n          label: translatedLabel,\n        }\n      }),\n    [breadcrumbs, t],\n  )\n\n  const handleBreadcrumbClick = (breadcrumbId: string) => {\n    const breadcrumb = breadcrumbs.find(breadcrumb => breadcrumb.id === breadcrumbId)\n    if (onEvent && breadcrumb) {\n      onEvent(componentEvents.BREADCRUMB_NAVIGATE, {\n        key: breadcrumbId,\n        onNavigate: breadcrumb.onNavigate,\n      })\n    }\n  }\n\n  return (\n    <div ref={breadcrumbContainerRef}>\n      <Breadcrumbs\n        isSmallContainer={isSmallContainer}\n        breadcrumbs={parsedBreadcrumbs}\n        currentBreadcrumbId={currentBreadcrumbId}\n        onClick={handleBreadcrumbClick}\n      />\n    </div>\n  )\n}\n"],"names":["FlowBreadcrumbs","breadcrumbs","currentBreadcrumbId","onEvent","breadcrumbContainerRef","useRef","isSmallContainer","useContainerBreakpoints","Breadcrumbs","useComponentContext","namespaces","acc","breadcrumb","useI18n","useTranslation","parsedBreadcrumbs","useMemo","translatedLabel","jsx","breadcrumbId","componentEvents"],"mappings":";;;;;;;AASO,SAASA,EAAgB;AAAA,EAC9B,aAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,SAAAC;AACF,GAAyB;AACvB,QAAMC,IAAyBC,EAA8B,IAAI,GAG3DC,IAFcC,EAAwB,EAAE,KAAKH,GAAwB,EAEtC,WAAW,GAE1C,EAAE,aAAAI,EAAA,IAAgBC,EAAA,GAClBC,IAAaT,EAAY;AAAA,IAC7B,CAACU,GAAKC,OACAA,EAAW,aACbD,EAAI,KAAKC,EAAW,SAAiD,GAEhED;AAAA,IAET,CAAA;AAAA,EAAC;AAEH,EAAAE,EAAQH,CAAU;AAClB,QAAM,EAAE,EAAA,IAAMI,EAAeJ,CAAU,GAEjCK,IAAoBC;AAAA,IACxB,MACEf,EAAY,IAAI,CAAAW,MAAc;AAC5B,YAAMK,IAAkBL,EAAW,YAC9B,EAAEA,EAAW,OAAO;AAAA,QACnB,IAAIA,EAAW;AAAA,QACf,cAAcA,EAAW;AAAA,QACzB,GAAGA,EAAW;AAAA,MAAA,CACN,IACT,EAAEA,EAAW,OAAO;AAAA,QACnB,cAAcA,EAAW;AAAA,QACzB,GAAGA,EAAW;AAAA,MAAA,CACN;AACd,aAAO;AAAA,QACL,IAAIA,EAAW;AAAA,QACf,OAAOK;AAAA,MAAA;AAAA,IAEX,CAAC;AAAA,IACH,CAAChB,GAAa,CAAC;AAAA,EAAA;AAajB,SACE,gBAAAiB,EAAC,OAAA,EAAI,KAAKd,GACR,UAAA,gBAAAc;AAAA,IAACV;AAAA,IAAA;AAAA,MACC,kBAAAF;AAAA,MACA,aAAaS;AAAA,MACb,qBAAAb;AAAA,MACA,SAhBwB,CAACiB,MAAyB;AACtD,cAAMP,IAAaX,EAAY,KAAK,CAAAW,MAAcA,EAAW,OAAOO,CAAY;AAChF,QAAIhB,KAAWS,KACbT,EAAQiB,EAAgB,qBAAqB;AAAA,UAC3C,KAAKD;AAAA,UACL,YAAYP,EAAW;AAAA,QAAA,CACxB;AAAA,MAEL;AAAA,IAQe;AAAA,EAAA,GAEb;AAEJ;"}
+{"version":3,"file":"FlowBreadcrumbs.js","sources":["../../../../src/components/Common/FlowBreadcrumbs/FlowBreadcrumbs.tsx"],"sourcesContent":["import type { CustomTypeOptions } from 'i18next'\nimport { useTranslation } from 'react-i18next'\nimport { useMemo, useRef } from 'react'\nimport type { FlowBreadcrumbsProps } from './FlowBreadcrumbsTypes'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { componentEvents } from '@/shared/constants'\nimport { useI18n } from '@/i18n/I18n'\nimport { useLocale } from '@/contexts/LocaleProvider/useLocale'\nimport { useContainerBreakpoints } from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\n\nexport function FlowBreadcrumbs({\n  breadcrumbs,\n  currentBreadcrumbId,\n  onEvent,\n}: FlowBreadcrumbsProps) {\n  const breadcrumbContainerRef = useRef<HTMLDivElement | null>(null)\n  const breakpoints = useContainerBreakpoints({ ref: breadcrumbContainerRef })\n  // Small if we only contain the base breakpoint\n  const isSmallContainer = breakpoints.length === 1\n\n  const { Breadcrumbs } = useComponentContext()\n  const { locale } = useLocale()\n  const dateFormatter = useDateFormatter()\n  const namespaces = breadcrumbs.reduce<Array<keyof CustomTypeOptions['resources']>>(\n    (acc, breadcrumb) => {\n      if (breadcrumb.namespace) {\n        acc.push(breadcrumb.namespace as keyof CustomTypeOptions['resources'])\n      }\n      return acc\n    },\n    [],\n  )\n  useI18n(namespaces)\n  const { t } = useTranslation(namespaces)\n  const parsedBreadcrumbs = useMemo(\n    () =>\n      breadcrumbs.map(breadcrumb => {\n        const formattedVariables = breadcrumb.variables\n          ? {\n              ...breadcrumb.variables,\n              startDate:\n                typeof breadcrumb.variables.startDate === 'string'\n                  ? dateFormatter.formatShortWithYear(breadcrumb.variables.startDate)\n                  : breadcrumb.variables.startDate,\n              endDate:\n                typeof breadcrumb.variables.endDate === 'string'\n                  ? dateFormatter.formatShortWithYear(breadcrumb.variables.endDate)\n                  : breadcrumb.variables.endDate,\n            }\n          : undefined\n\n        const translatedLabel = breadcrumb.namespace\n          ? (t(breadcrumb.label, {\n              ns: breadcrumb.namespace,\n              defaultValue: breadcrumb.label,\n              ...formattedVariables,\n            } as never) as unknown as string)\n          : (t(breadcrumb.label, {\n              defaultValue: breadcrumb.label,\n              ...formattedVariables,\n            } as never) as unknown as string)\n        return {\n          id: breadcrumb.id,\n          label: translatedLabel,\n        }\n      }),\n    [breadcrumbs, t, locale],\n  )\n\n  const handleBreadcrumbClick = (breadcrumbId: string) => {\n    const breadcrumb = breadcrumbs.find(breadcrumb => breadcrumb.id === breadcrumbId)\n    if (onEvent && breadcrumb) {\n      onEvent(componentEvents.BREADCRUMB_NAVIGATE, {\n        key: breadcrumbId,\n        onNavigate: breadcrumb.onNavigate,\n      })\n    }\n  }\n  return (\n    <div ref={breadcrumbContainerRef}>\n      <Breadcrumbs\n        isSmallContainer={isSmallContainer}\n        breadcrumbs={parsedBreadcrumbs}\n        currentBreadcrumbId={currentBreadcrumbId}\n        onClick={handleBreadcrumbClick}\n      />\n    </div>\n  )\n}\n"],"names":["FlowBreadcrumbs","breadcrumbs","currentBreadcrumbId","onEvent","breadcrumbContainerRef","useRef","isSmallContainer","useContainerBreakpoints","Breadcrumbs","useComponentContext","locale","useLocale","dateFormatter","useDateFormatter","namespaces","acc","breadcrumb","useI18n","t","useTranslation","parsedBreadcrumbs","useMemo","formattedVariables","translatedLabel","jsx","breadcrumbId","componentEvents"],"mappings":";;;;;;;;;AAWO,SAASA,EAAgB;AAAA,EAC9B,aAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,SAAAC;AACF,GAAyB;AACvB,QAAMC,IAAyBC,EAA8B,IAAI,GAG3DC,IAFcC,EAAwB,EAAE,KAAKH,GAAwB,EAEtC,WAAW,GAE1C,EAAE,aAAAI,EAAA,IAAgBC,EAAA,GAClB,EAAE,QAAAC,EAAA,IAAWC,EAAA,GACbC,IAAgBC,EAAA,GAChBC,IAAab,EAAY;AAAA,IAC7B,CAACc,GAAKC,OACAA,EAAW,aACbD,EAAI,KAAKC,EAAW,SAAiD,GAEhED;AAAA,IAET,CAAA;AAAA,EAAC;AAEH,EAAAE,EAAQH,CAAU;AAClB,QAAM,EAAE,GAAAI,EAAA,IAAMC,EAAeL,CAAU,GACjCM,IAAoBC;AAAA,IACxB,MACEpB,EAAY,IAAI,CAAAe,MAAc;AAC5B,YAAMM,IAAqBN,EAAW,YAClC;AAAA,QACE,GAAGA,EAAW;AAAA,QACd,WACE,OAAOA,EAAW,UAAU,aAAc,WACtCJ,EAAc,oBAAoBI,EAAW,UAAU,SAAS,IAChEA,EAAW,UAAU;AAAA,QAC3B,SACE,OAAOA,EAAW,UAAU,WAAY,WACpCJ,EAAc,oBAAoBI,EAAW,UAAU,OAAO,IAC9DA,EAAW,UAAU;AAAA,MAAA,IAE7B,QAEEO,IAAkBP,EAAW,YAC9BE,EAAEF,EAAW,OAAO;AAAA,QACnB,IAAIA,EAAW;AAAA,QACf,cAAcA,EAAW;AAAA,QACzB,GAAGM;AAAA,MAAA,CACK,IACTJ,EAAEF,EAAW,OAAO;AAAA,QACnB,cAAcA,EAAW;AAAA,QACzB,GAAGM;AAAA,MAAA,CACK;AACd,aAAO;AAAA,QACL,IAAIN,EAAW;AAAA,QACf,OAAOO;AAAA,MAAA;AAAA,IAEX,CAAC;AAAA,IACH,CAACtB,GAAaiB,GAAGR,CAAM;AAAA,EAAA;AAYzB,SACE,gBAAAc,EAAC,OAAA,EAAI,KAAKpB,GACR,UAAA,gBAAAoB;AAAA,IAAChB;AAAA,IAAA;AAAA,MACC,kBAAAF;AAAA,MACA,aAAac;AAAA,MACb,qBAAAlB;AAAA,MACA,SAfwB,CAACuB,MAAyB;AACtD,cAAMT,IAAaf,EAAY,KAAK,CAAAe,MAAcA,EAAW,OAAOS,CAAY;AAChF,QAAItB,KAAWa,KACbb,EAAQuB,EAAgB,qBAAqB;AAAA,UAC3C,KAAKD;AAAA,UACL,YAAYT,EAAW;AAAA,QAAA,CACxB;AAAA,MAEL;AAAA,IAOe;AAAA,EAAA,GAEb;AAEJ;"}

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

@@ -2,7 +2,7 @@ import { jsxs as f, Fragment as b, jsx as o } from "react/jsx-runtime";
 import { useTranslation as g } from "react-i18next";
 import { useComponentContext as C } from "../../../contexts/ComponentAdapter/useComponentContext.js";
 import x from "../../../assets/icons/hamburger.svg.js";
-import { useMenu as M } from "../hooks/useMenu.js";
+import { useMenu as M } from "../../../hooks/useMenu.js";
 function T({
   items: t,
   triggerLabel: s,

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

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

package/dist/components/Common/PaginationControl/PaginationControl.js

@@ -1,7 +1,7 @@
-import { jsx as n, jsxs as e } from "react/jsx-runtime";
+import { jsx as n, jsxs as l } from "react/jsx-runtime";
 import { useTranslation as C } from "react-i18next";
 import { Flex as f } from "../Flex/Flex.js";
-import l from "./PaginationControl.module.scss.js";
+import e from "./PaginationControl.module.scss.js";
 import { useComponentContext as r } from "../../../contexts/ComponentAdapter/useComponentContext.js";
 import v from "../../../assets/icons/pagination_first.svg.js";
 import h from "../../../assets/icons/pagination_previous.svg.js";
@@ -20,11 +20,11 @@ const L = ({
   itemsPerPage: u = 5
 }) => {
   const { t } = C("common"), a = r();
-  return o < 2 ? null : /* @__PURE__ */ n("section", { className: l.paginationControl, "data-testid": "pagination-control", children: /* @__PURE__ */ e(f, { justifyContent: "space-between", alignItems: "center", children: [
-    /* @__PURE__ */ n("div", { className: l.paginationControlCount, children: /* @__PURE__ */ n("section", { children: /* @__PURE__ */ n(
+  return o < 2 ? null : /* @__PURE__ */ n("section", { className: e.paginationControl, "data-testid": "pagination-control", children: /* @__PURE__ */ l(f, { justifyContent: "space-between", alignItems: "center", children: [
+    /* @__PURE__ */ n("div", { className: e.paginationControlCount, children: /* @__PURE__ */ n("section", { children: /* @__PURE__ */ n(
       a.Select,
       {
-        label: t("labels.paginationControllCountLabel"),
+        label: t("labels.paginationControlCountLabel"),
         shouldVisuallyHideLabel: !0,
         value: u.toString(),
         onChange: (b) => {
@@ -37,7 +37,7 @@ const L = ({
         ]
       }
     ) }) }),
-    /* @__PURE__ */ e("div", { className: l.paginationControlButtons, children: [
+    /* @__PURE__ */ l("div", { className: e.paginationControlButtons, children: [
       s && /* @__PURE__ */ n(I, { ariaLabel: t("labels.paginationFetchingLabel") }),
       /* @__PURE__ */ n(
         a.ButtonIcon,

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

@@ -1 +1 @@
-{"version":3,"file":"PaginationControl.js","sources":["../../../../src/components/Common/PaginationControl/PaginationControl.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { Flex } from '../Flex/Flex'\nimport { InlineSpinner } from '../InlineSpinner'\nimport style from './PaginationControl.module.scss'\nimport type { PaginationControlProps, PaginationItemsPerPage } from './PaginationControlTypes'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport PaginationFirstIcon from '@/assets/icons/pagination_first.svg?react'\nimport PaginationPrevIcon from '@/assets/icons/pagination_previous.svg?react'\nimport PaginationNextIcon from '@/assets/icons/pagination_next.svg?react'\nimport PaginationLastIcon from '@/assets/icons/pagination_last.svg?react'\n\nconst DefaultPaginationControl = ({\n  currentPage,\n  totalPages,\n  isFetching,\n  handleFirstPage,\n  handlePreviousPage,\n  handleNextPage,\n  handleLastPage,\n  handleItemsPerPageChange,\n  itemsPerPage = 5,\n}: PaginationControlProps) => {\n  const { t } = useTranslation('common')\n  const Components = useComponentContext()\n\n  if (totalPages < 2) {\n    return null\n  }\n\n  return (\n    <section className={style.paginationControl} data-testid=\"pagination-control\">\n      <Flex justifyContent=\"space-between\" alignItems=\"center\">\n        <div className={style.paginationControlCount}>\n          <section>\n            <Components.Select\n              label={t('labels.paginationControllCountLabel')}\n              shouldVisuallyHideLabel\n              value={itemsPerPage.toString()}\n              onChange={n => {\n                handleItemsPerPageChange(Number(n) as PaginationItemsPerPage)\n              }}\n              options={[\n                { value: '5', label: '5' },\n                { value: '10', label: '10' },\n                { value: '50', label: '50' },\n              ]}\n            />\n          </section>\n        </div>\n        <div className={style.paginationControlButtons}>\n          {isFetching && <InlineSpinner ariaLabel={t('labels.paginationFetchingLabel')} />}\n          <Components.ButtonIcon\n            aria-label={t('icons.paginationFirst')}\n            isDisabled={currentPage === 1}\n            onClick={handleFirstPage}\n          >\n            <PaginationFirstIcon />\n          </Components.ButtonIcon>\n          <Components.ButtonIcon\n            aria-label={t('icons.paginationPrev')}\n            data-testid=\"pagination-previous\"\n            isDisabled={currentPage === 1}\n            onClick={handlePreviousPage}\n          >\n            <PaginationPrevIcon />\n          </Components.ButtonIcon>\n          <Components.ButtonIcon\n            aria-label={t('icons.paginationNext')}\n            data-testid=\"pagination-next\"\n            isDisabled={currentPage === totalPages}\n            onClick={handleNextPage}\n          >\n            <PaginationNextIcon />\n          </Components.ButtonIcon>\n          <Components.ButtonIcon\n            aria-label={t('icons.paginationLast')}\n            isDisabled={currentPage === totalPages}\n            onClick={handleLastPage}\n          >\n            <PaginationLastIcon />\n          </Components.ButtonIcon>\n        </div>\n      </Flex>\n    </section>\n  )\n}\n\nexport const PaginationControl = (props: PaginationControlProps) => {\n  const Components = useComponentContext()\n\n  return Components.PaginationControl ? (\n    <Components.PaginationControl {...props} />\n  ) : (\n    <DefaultPaginationControl {...props} />\n  )\n}\n"],"names":["DefaultPaginationControl","currentPage","totalPages","isFetching","handleFirstPage","handlePreviousPage","handleNextPage","handleLastPage","handleItemsPerPageChange","itemsPerPage","useTranslation","Components","useComponentContext","jsx","style","jsxs","Flex","n","InlineSpinner","PaginationFirstIcon","PaginationPrevIcon","PaginationNextIcon","PaginationLastIcon","PaginationControl","props"],"mappings":";;;;;;;;;;AAWA,MAAMA,IAA2B,CAAC;AAAA,EAChC,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,0BAAAC;AAAA,EACA,cAAAC,IAAe;AACjB,MAA8B;AAC5B,QAAM,EAAE,EAAA,IAAMC,EAAe,QAAQ,GAC/BC,IAAaC,EAAA;AAEnB,SAAIV,IAAa,IACR,OAIP,gBAAAW,EAAC,WAAA,EAAQ,WAAWC,EAAM,mBAAmB,eAAY,sBACvD,UAAA,gBAAAC,EAACC,GAAA,EAAK,gBAAe,iBAAgB,YAAW,UAC9C,UAAA;AAAA,IAAA,gBAAAH,EAAC,OAAA,EAAI,WAAWC,EAAM,wBACpB,4BAAC,WAAA,EACC,UAAA,gBAAAD;AAAA,MAACF,EAAW;AAAA,MAAX;AAAA,QACC,OAAO,EAAE,qCAAqC;AAAA,QAC9C,yBAAuB;AAAA,QACvB,OAAOF,EAAa,SAAA;AAAA,QACpB,UAAU,CAAAQ,MAAK;AACb,UAAAT,EAAyB,OAAOS,CAAC,CAA2B;AAAA,QAC9D;AAAA,QACA,SAAS;AAAA,UACP,EAAE,OAAO,KAAK,OAAO,IAAA;AAAA,UACrB,EAAE,OAAO,MAAM,OAAO,KAAA;AAAA,UACtB,EAAE,OAAO,MAAM,OAAO,KAAA;AAAA,QAAK;AAAA,MAC7B;AAAA,IAAA,GAEJ,EAAA,CACF;AAAA,IACA,gBAAAF,EAAC,OAAA,EAAI,WAAWD,EAAM,0BACnB,UAAA;AAAA,MAAAX,KAAc,gBAAAU,EAACK,GAAA,EAAc,WAAW,EAAE,gCAAgC,GAAG;AAAA,MAC9E,gBAAAL;AAAA,QAACF,EAAW;AAAA,QAAX;AAAA,UACC,cAAY,EAAE,uBAAuB;AAAA,UACrC,YAAYV,MAAgB;AAAA,UAC5B,SAASG;AAAA,UAET,4BAACe,GAAA,CAAA,CAAoB;AAAA,QAAA;AAAA,MAAA;AAAA,MAEvB,gBAAAN;AAAA,QAACF,EAAW;AAAA,QAAX;AAAA,UACC,cAAY,EAAE,sBAAsB;AAAA,UACpC,eAAY;AAAA,UACZ,YAAYV,MAAgB;AAAA,UAC5B,SAASI;AAAA,UAET,4BAACe,GAAA,CAAA,CAAmB;AAAA,QAAA;AAAA,MAAA;AAAA,MAEtB,gBAAAP;AAAA,QAACF,EAAW;AAAA,QAAX;AAAA,UACC,cAAY,EAAE,sBAAsB;AAAA,UACpC,eAAY;AAAA,UACZ,YAAYV,MAAgBC;AAAA,UAC5B,SAASI;AAAA,UAET,4BAACe,GAAA,CAAA,CAAmB;AAAA,QAAA;AAAA,MAAA;AAAA,MAEtB,gBAAAR;AAAA,QAACF,EAAW;AAAA,QAAX;AAAA,UACC,cAAY,EAAE,sBAAsB;AAAA,UACpC,YAAYV,MAAgBC;AAAA,UAC5B,SAASK;AAAA,UAET,4BAACe,GAAA,CAAA,CAAmB;AAAA,QAAA;AAAA,MAAA;AAAA,IACtB,EAAA,CACF;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ,GAEaC,IAAoB,CAACC,MAAkC;AAClE,QAAMb,IAAaC,EAAA;AAEnB,SAAOD,EAAW,oBAChB,gBAAAE,EAACF,EAAW,mBAAX,EAA8B,GAAGa,EAAA,CAAO,IAEzC,gBAAAX,EAACb,GAAA,EAA0B,GAAGwB,EAAA,CAAO;AAEzC;"}
+{"version":3,"file":"PaginationControl.js","sources":["../../../../src/components/Common/PaginationControl/PaginationControl.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { Flex } from '../Flex/Flex'\nimport { InlineSpinner } from '../InlineSpinner'\nimport style from './PaginationControl.module.scss'\nimport type { PaginationControlProps, PaginationItemsPerPage } from './PaginationControlTypes'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport PaginationFirstIcon from '@/assets/icons/pagination_first.svg?react'\nimport PaginationPrevIcon from '@/assets/icons/pagination_previous.svg?react'\nimport PaginationNextIcon from '@/assets/icons/pagination_next.svg?react'\nimport PaginationLastIcon from '@/assets/icons/pagination_last.svg?react'\n\nconst DefaultPaginationControl = ({\n  currentPage,\n  totalPages,\n  isFetching,\n  handleFirstPage,\n  handlePreviousPage,\n  handleNextPage,\n  handleLastPage,\n  handleItemsPerPageChange,\n  itemsPerPage = 5,\n}: PaginationControlProps) => {\n  const { t } = useTranslation('common')\n  const Components = useComponentContext()\n\n  if (totalPages < 2) {\n    return null\n  }\n\n  return (\n    <section className={style.paginationControl} data-testid=\"pagination-control\">\n      <Flex justifyContent=\"space-between\" alignItems=\"center\">\n        <div className={style.paginationControlCount}>\n          <section>\n            <Components.Select\n              label={t('labels.paginationControlCountLabel')}\n              shouldVisuallyHideLabel\n              value={itemsPerPage.toString()}\n              onChange={n => {\n                handleItemsPerPageChange(Number(n) as PaginationItemsPerPage)\n              }}\n              options={[\n                { value: '5', label: '5' },\n                { value: '10', label: '10' },\n                { value: '50', label: '50' },\n              ]}\n            />\n          </section>\n        </div>\n        <div className={style.paginationControlButtons}>\n          {isFetching && <InlineSpinner ariaLabel={t('labels.paginationFetchingLabel')} />}\n          <Components.ButtonIcon\n            aria-label={t('icons.paginationFirst')}\n            isDisabled={currentPage === 1}\n            onClick={handleFirstPage}\n          >\n            <PaginationFirstIcon />\n          </Components.ButtonIcon>\n          <Components.ButtonIcon\n            aria-label={t('icons.paginationPrev')}\n            data-testid=\"pagination-previous\"\n            isDisabled={currentPage === 1}\n            onClick={handlePreviousPage}\n          >\n            <PaginationPrevIcon />\n          </Components.ButtonIcon>\n          <Components.ButtonIcon\n            aria-label={t('icons.paginationNext')}\n            data-testid=\"pagination-next\"\n            isDisabled={currentPage === totalPages}\n            onClick={handleNextPage}\n          >\n            <PaginationNextIcon />\n          </Components.ButtonIcon>\n          <Components.ButtonIcon\n            aria-label={t('icons.paginationLast')}\n            isDisabled={currentPage === totalPages}\n            onClick={handleLastPage}\n          >\n            <PaginationLastIcon />\n          </Components.ButtonIcon>\n        </div>\n      </Flex>\n    </section>\n  )\n}\n\nexport const PaginationControl = (props: PaginationControlProps) => {\n  const Components = useComponentContext()\n\n  return Components.PaginationControl ? (\n    <Components.PaginationControl {...props} />\n  ) : (\n    <DefaultPaginationControl {...props} />\n  )\n}\n"],"names":["DefaultPaginationControl","currentPage","totalPages","isFetching","handleFirstPage","handlePreviousPage","handleNextPage","handleLastPage","handleItemsPerPageChange","itemsPerPage","useTranslation","Components","useComponentContext","jsx","style","jsxs","Flex","n","InlineSpinner","PaginationFirstIcon","PaginationPrevIcon","PaginationNextIcon","PaginationLastIcon","PaginationControl","props"],"mappings":";;;;;;;;;;AAWA,MAAMA,IAA2B,CAAC;AAAA,EAChC,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,0BAAAC;AAAA,EACA,cAAAC,IAAe;AACjB,MAA8B;AAC5B,QAAM,EAAE,EAAA,IAAMC,EAAe,QAAQ,GAC/BC,IAAaC,EAAA;AAEnB,SAAIV,IAAa,IACR,OAIP,gBAAAW,EAAC,WAAA,EAAQ,WAAWC,EAAM,mBAAmB,eAAY,sBACvD,UAAA,gBAAAC,EAACC,GAAA,EAAK,gBAAe,iBAAgB,YAAW,UAC9C,UAAA;AAAA,IAAA,gBAAAH,EAAC,OAAA,EAAI,WAAWC,EAAM,wBACpB,4BAAC,WAAA,EACC,UAAA,gBAAAD;AAAA,MAACF,EAAW;AAAA,MAAX;AAAA,QACC,OAAO,EAAE,oCAAoC;AAAA,QAC7C,yBAAuB;AAAA,QACvB,OAAOF,EAAa,SAAA;AAAA,QACpB,UAAU,CAAAQ,MAAK;AACb,UAAAT,EAAyB,OAAOS,CAAC,CAA2B;AAAA,QAC9D;AAAA,QACA,SAAS;AAAA,UACP,EAAE,OAAO,KAAK,OAAO,IAAA;AAAA,UACrB,EAAE,OAAO,MAAM,OAAO,KAAA;AAAA,UACtB,EAAE,OAAO,MAAM,OAAO,KAAA;AAAA,QAAK;AAAA,MAC7B;AAAA,IAAA,GAEJ,EAAA,CACF;AAAA,IACA,gBAAAF,EAAC,OAAA,EAAI,WAAWD,EAAM,0BACnB,UAAA;AAAA,MAAAX,KAAc,gBAAAU,EAACK,GAAA,EAAc,WAAW,EAAE,gCAAgC,GAAG;AAAA,MAC9E,gBAAAL;AAAA,QAACF,EAAW;AAAA,QAAX;AAAA,UACC,cAAY,EAAE,uBAAuB;AAAA,UACrC,YAAYV,MAAgB;AAAA,UAC5B,SAASG;AAAA,UAET,4BAACe,GAAA,CAAA,CAAoB;AAAA,QAAA;AAAA,MAAA;AAAA,MAEvB,gBAAAN;AAAA,QAACF,EAAW;AAAA,QAAX;AAAA,UACC,cAAY,EAAE,sBAAsB;AAAA,UACpC,eAAY;AAAA,UACZ,YAAYV,MAAgB;AAAA,UAC5B,SAASI;AAAA,UAET,4BAACe,GAAA,CAAA,CAAmB;AAAA,QAAA;AAAA,MAAA;AAAA,MAEtB,gBAAAP;AAAA,QAACF,EAAW;AAAA,QAAX;AAAA,UACC,cAAY,EAAE,sBAAsB;AAAA,UACpC,eAAY;AAAA,UACZ,YAAYV,MAAgBC;AAAA,UAC5B,SAASI;AAAA,UAET,4BAACe,GAAA,CAAA,CAAmB;AAAA,QAAA;AAAA,MAAA;AAAA,MAEtB,gBAAAR;AAAA,QAACF,EAAW;AAAA,QAAX;AAAA,UACC,cAAY,EAAE,sBAAsB;AAAA,UACpC,YAAYV,MAAgBC;AAAA,UAC5B,SAASK;AAAA,UAET,4BAACe,GAAA,CAAA,CAAmB;AAAA,QAAA;AAAA,MAAA;AAAA,IACtB,EAAA,CACF;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ,GAEaC,IAAoB,CAACC,MAAkC;AAClE,QAAMb,IAAaC,EAAA;AAEnB,SAAOD,EAAW,oBAChB,gBAAAE,EAACF,EAAW,mBAAX,EAA8B,GAAGa,EAAA,CAAO,IAEzC,gBAAAX,EAACb,GAAA,EAA0B,GAAGwB,EAAA,CAAO;AAEzC;"}