@mx-cartographer/experiences 8.1.10 → 8.1.12

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [8.1.12] - 05-06-2026
+
+- **FIXED** - Spendng Donut initializing with mismatched date range category totals
+
+## [8.1.11] - 05-05-2026
+
+- **FIXED** - Spending chart crash on chart color index overflow
+
 ## [8.1.10] - 05-05-2026
 
 - **UPDATED** - Error component UI and no network fallback

package/dist/{SpendingLegend-DLElSvH0.mjs → SpendingLegend-BS8mHUbu.mjs}

@@ -13,72 +13,72 @@ import { u as R } from "./useAriaLive-MkYebyUR.mjs";
 import { u as v } from "./hooks-RzCoiTd0.mjs";
 import { u as V } from "./useScreenSize-CeFhWTt_.mjs";
 import { f as b } from "./NumberFormatting-CyrvFgfd.mjs";
-const D = 5, B = (i, l, g, m) => m.reduce((o, n) => {
-  const a = i.find((s) => s.guid === n.category_guid);
-  if (!a) return o;
-  const t = a.parent_guid ?? a.guid, r = i.find((s) => s.guid === t);
-  if (!r || n.total <= 0) return o;
+const D = 5, B = (i, l, s, m) => m.reduce((o, n) => {
+  const r = i.find((u) => u.guid === n.category_guid);
+  if (!r) return o;
+  const t = r.parent_guid ?? r.guid, a = i.find((u) => u.guid === t);
+  if (!a || n.total <= 0) return o;
   const c = {
-    guid: a.guid,
-    name: a.guid === t ? `${l.parent_category_totals_label_general} ${a.name}` : a.name,
-    color: _(r.guid, g),
+    guid: r.guid,
+    name: r.guid === t ? `${l.parent_category_totals_label_general} ${r.name}` : r.name,
+    color: _(a.guid, s),
     amount: n.total
-  }, e = o.find((s) => s.guid === t);
+  }, e = o.find((u) => u.guid === t);
   return e ? (e.amount += n.total, e.categoryTotals?.push(c)) : o.push({
     guid: t,
-    name: r.name,
-    color: _(r.guid, g),
+    name: a.name,
+    color: _(a.guid, s),
     categoryTotals: [c],
     amount: n.total
   }), o;
-}, []), nt = (i, l, g, m) => {
-  const n = B(i, l, g, m).filter(
+}, []), nt = (i, l, s, m) => {
+  const n = B(i, l, s, m).filter(
     (e) => e.guid !== p.INCOME && e.guid !== p.INVESTMENTS && e.guid !== p.TRANSFER && e.amount > 0
-  ).sort((e, s) => s.amount - e.amount), a = n.reduce(
-    (e, s) => e + s.amount,
+  ).sort((e, u) => u.amount - e.amount), r = n.reduce(
+    (e, u) => e + u.amount,
     0
-  ), t = n.length > D ? D : n.length, r = n.slice(0, t), c = r.map((e) => ({
+  ), t = n.length > D ? D : n.length, a = n.slice(0, t), c = a.map((e) => ({
     id: e.guid,
-    color: _(e.guid, g),
+    color: _(e.guid, s),
     label: e.name,
-    value: e.amount / a * 100
+    value: e.amount / r * 100
   }));
   if (n.length > 5) {
-    const e = n.slice(D), s = e.reduce(
-      (C, u) => C + u.amount,
+    const e = n.slice(D), u = e.reduce(
+      (C, g) => C + g.amount,
       0
     );
-    r.push({
+    a.push({
       guid: "other",
-      color: g.palette.categories.others || "",
+      color: s.palette.categories.others || "",
       name: l.saving_goal_other,
       categoryTotals: e,
-      amount: s
+      amount: u
     }), c.push({
       id: "other",
-      color: g.palette.categories.others || "",
+      color: s.palette.categories.others || "",
       label: l.saving_goal_other,
-      value: s / a * 100
+      value: u / r * 100
     });
   }
   return {
-    categoryData: r,
+    categoryData: a,
     donutData: c,
-    totalAmount: a
+    totalAmount: r
   };
-}, et = (i, l, g) => {
+}, et = (i, l, s) => {
   const m = i.filter(
     (t) => t.guid === p.INCOME || t.parent_guid === p.INCOME
-  ), o = l.filter((t) => m.some((r) => r.guid === t.category_guid)).sort((t, r) => t.total - r.total).map((t, r) => ({
+  ), o = l.filter((t) => m.some((a) => a.guid === t.category_guid)).sort((t, a) => t.total - a.total).map((t, a) => ({
     guid: t.category_guid,
     name: i.find((c) => c.guid === t.category_guid)?.name,
-    color: g[r],
+    color: s[a % s.length],
     categoryTotals: [],
     amount: Math.abs(t.total)
   })), n = o.reduce(
-    (t, r) => t + r.amount,
+    (t, a) => t + a.amount,
     0
-  ), a = o.map((t) => ({
+  ), r = o.map((t) => ({
     id: t.guid,
     color: t.color,
     label: t.name,
@@ -86,36 +86,36 @@ const D = 5, B = (i, l, g, m) => m.reduce((o, n) => {
   }));
   return {
     categoryData: o,
-    donutData: a,
+    donutData: r,
     totalAmount: n
   };
 }, P = ({
   data: i,
   isIncome: l = !1,
-  onSelected: g,
+  onSelected: s,
   onViewTransactions: m,
   selectedId: o,
   size: n = 150,
-  totalLabel: a,
+  totalLabel: r,
   variant: t = "mini"
 }) => {
-  const { spending: r } = v(), c = M(), { isTablet: e } = V(), { announce: s, ariaLive: C } = R(), u = T.useMemo(
+  const { spending: a } = v(), c = M(), { isTablet: e } = V(), { announce: u, ariaLive: C } = R(), g = T.useMemo(
     () => o ? i.categoryData.find((x) => x.guid === o) : void 0,
     [o]
   );
   T.useEffect(() => {
-    if (u) {
-      const x = b(u.amount, t === "mini" ? "0,0" : "0,0.00");
-      s(`${u.name}: ${x}`);
+    if (g) {
+      const x = b(g.amount, t === "mini" ? "0,0" : "0,0.00");
+      u(`${g.name}: ${x}`);
     }
-  }, [u, s, t]);
+  }, [g, u, t]);
   const E = i.donutData.length > 0 ? i.donutData : [{ id: "0", color: c.palette.divider, value: 100 }], I = () => {
     m?.(o);
   }, w = e ? 32 : 48;
   return /* @__PURE__ */ f(N, { children: [
     C,
-    /* @__PURE__ */ d(j, { data: E, onClick: g, selectedId: o, size: n, children: /* @__PURE__ */ d(h, { alignItems: "center", height: "100%", justifyContent: "center", width: "100%", children: /* @__PURE__ */ f(h, { alignItems: "center", justifyContent: "center", minHeight: n, minWidth: n, children: [
-      u && /* @__PURE__ */ f(
+    /* @__PURE__ */ d(j, { data: E, onClick: s, selectedId: o, size: n, children: /* @__PURE__ */ d(h, { alignItems: "center", height: "100%", justifyContent: "center", width: "100%", children: /* @__PURE__ */ f(h, { alignItems: "center", justifyContent: "center", minHeight: n, minWidth: n, children: [
+      g && /* @__PURE__ */ f(
         h,
         {
           alignItems: "center",
@@ -127,7 +127,7 @@ const D = 5, B = (i, l, g, m) => m.reduce((o, n) => {
             /* @__PURE__ */ d(S, { "aria-hidden": "true", role: "presentation", children: /* @__PURE__ */ d(
               G,
               {
-                categoryGuid: l ? p.INCOME : u.guid,
+                categoryGuid: l ? p.INCOME : g.guid,
                 size: t === "mini" ? 24 : w,
                 variant: O.Transparent
               }
@@ -138,29 +138,29 @@ const D = 5, B = (i, l, g, m) => m.reduce((o, n) => {
                 color: "text.secondary",
                 noWrap: !0,
                 variant: t === "mini" ? "tiny" : "body1",
-                children: u ? u.name : a
+                children: g ? g.name : r
               }
             )
           ]
         }
       ),
-      !u && t === "full" && /* @__PURE__ */ d(y, { bold: !0, color: "text.secondary", sx: { mb: { xs: 4, xl: 8 } }, children: a }),
-      /* @__PURE__ */ d($, { variant: t === "mini" ? "h2" : "h1", children: u ? b(u.amount, t === "mini" ? "0,0" : "0,0.00") : b(i.totalAmount, t === "mini" ? "0,0" : "0,0.00") }),
-      !u && t === "mini" && /* @__PURE__ */ d(y, { color: "text.secondary", noWrap: !0, variant: "tiny", children: a }),
+      !g && t === "full" && /* @__PURE__ */ d(y, { bold: !0, color: "text.secondary", sx: { mb: { xs: 4, xl: 8 } }, children: r }),
+      /* @__PURE__ */ d($, { variant: t === "mini" ? "h2" : "h1", children: g ? b(g.amount, t === "mini" ? "0,0" : "0,0.00") : b(i.totalAmount, t === "mini" ? "0,0" : "0,0.00") }),
+      !g && t === "mini" && /* @__PURE__ */ d(y, { color: "text.secondary", noWrap: !0, variant: "tiny", children: r }),
       t === "full" && /* @__PURE__ */ d(
         A,
         {
-          "aria-label": `View ${u?.name || ""} Transactions`,
+          "aria-label": `View ${g?.name || ""} Transactions`,
           disabled: i.categoryData.length === 0,
           onClick: I,
           sx: { mt: { xl: 4, xs: 0 }, zIndex: 1 },
           variant: "text",
-          children: r.view_transactions
+          children: a.view_transactions
         }
       )
     ] }) }) })
   ] });
-}, rt = k(P), at = ({ data: i, onSelected: l, selectedId: g }) => {
+}, at = k(P), rt = ({ data: i, onSelected: l, selectedId: s }) => {
   const m = (o, n) => {
     (o.key === "Enter" || o.key === " ") && (o.preventDefault(), l(n));
   };
@@ -169,7 +169,7 @@ const D = 5, B = (i, l, g, m) => m.reduce((o, n) => {
     {
       alignItems: "center",
       "aria-label": o.name,
-      "aria-pressed": o.guid === g,
+      "aria-pressed": o.guid === s,
       direction: "row",
       gap: 8,
       onClick: () => l(o.guid),
@@ -179,15 +179,15 @@ const D = 5, B = (i, l, g, m) => m.reduce((o, n) => {
       tabIndex: 0,
       children: [
         /* @__PURE__ */ d(S, { borderRadius: 4, height: 8, sx: { backgroundColor: o.color }, width: 8 }),
-        /* @__PURE__ */ d(y, { bold: o.guid === g, variant: "caption", children: o.name })
+        /* @__PURE__ */ d(y, { bold: o.guid === s, variant: "caption", children: o.name })
       ]
     },
     o.guid
   )) });
 };
 export {
-  rt as S,
+  at as S,
   et as a,
-  at as b,
+  rt as b,
   nt as g
 };

package/dist/finstrong/index.es.js

@@ -51,7 +51,7 @@ import { ChartsXAxis as Zn } from "@mui/x-charts/ChartsXAxis";
 import { ChartsYAxis as Jn } from "@mui/x-charts/ChartsYAxis";
 import { startOfMonth as Dt } from "date-fns/startOfMonth";
 import { endOfMonth as It } from "date-fns/endOfMonth";
-import { g as eo, S as to, b as no } from "../SpendingLegend-DLElSvH0.mjs";
+import { g as eo, S as to, b as no } from "../SpendingLegend-BS8mHUbu.mjs";
 import { formatISO as oo } from "date-fns/formatISO";
 import { fromUnixTime as ro } from "date-fns/fromUnixTime";
 import { startOfToday as st } from "date-fns/startOfToday";

package/dist/spending/index.es.js

@@ -1,21 +1,21 @@
 import { jsxs as p, jsx as t } from "react/jsx-runtime";
-import l from "react";
+import c from "react";
 import { observer as I } from "mobx-react-lite";
-import { startOfMonth as ot } from "date-fns/startOfMonth";
-import { endOfMonth as at } from "date-fns/endOfMonth";
+import { startOfMonth as at } from "date-fns/startOfMonth";
+import { endOfMonth as it } from "date-fns/endOfMonth";
 import L from "@mui/material/Box";
 import y from "@mui/material/Stack";
-import O from "@mui/material/Tab";
-import it from "@mui/material/Tabs";
+import $ from "@mui/material/Tab";
+import rt from "@mui/material/Tabs";
 import _t from "@mui/material/styles/useTheme";
-import { g as rt, a as st, S as k, b as Y } from "../SpendingLegend-DLElSvH0.mjs";
+import { g as st, a as lt, S as B, b as q } from "../SpendingLegend-BS8mHUbu.mjs";
 import { Text as T, Icon as bt } from "@mxenabled/mxui";
-import { f as N } from "../NumberFormatting-CyrvFgfd.mjs";
-import { u as A, l as W, d as lt, b as z, a as V, h as ct, g as yt } from "../hooks-RzCoiTd0.mjs";
-import { u as dt } from "../useWidgetLoadTimer-BZjr-BiE.mjs";
-import { L as gt } from "../Loader-CxeBwuPG.mjs";
+import { f as k } from "../NumberFormatting-CyrvFgfd.mjs";
+import { u as A, l as R, d as ct, b as P, a as H, h as dt, g as yt } from "../hooks-RzCoiTd0.mjs";
+import { u as gt } from "../useWidgetLoadTimer-BZjr-BiE.mjs";
+import { L as pt } from "../Loader-CxeBwuPG.mjs";
 import { M as Ct } from "../MiniWidgetContainer-BOv3n4iw.mjs";
-import { startOfToday as q } from "date-fns/startOfToday";
+import { startOfToday as J } from "date-fns/startOfToday";
 import St from "@mui/material/Button";
 import { useTheme as Tt } from "@mui/material";
 import { e as Mt } from "../exportTransactionsToCSV-CSvbZrvL.mjs";
@@ -23,20 +23,20 @@ import { T as Dt } from "../EmbeddedCard-B9JoBaan.mjs";
 import { T as xt } from "../TransactionDetails-C_skrQk8.mjs";
 import vt from "@mui/material/Collapse";
 import wt from "@mui/material/Divider";
-import J from "@mui/material/List";
-import Q from "@mui/material/ListItem";
-import X from "@mui/material/ListItemButton";
+import Q from "@mui/material/List";
+import X from "@mui/material/ListItem";
+import Z from "@mui/material/ListItemButton";
 import { u as Lt } from "../useScreenSize-CeFhWTt_.mjs";
-import { D as Z } from "../Drawer-XPaLYjiO.mjs";
+import { D as tt } from "../Drawer-XPaLYjiO.mjs";
 import { b as w } from "../Category-Ccoew_sA.mjs";
-import { parseISO as tt } from "date-fns/parseISO";
-import { A as et } from "../Analytics-CzGzz_sE.mjs";
+import { parseISO as et } from "date-fns/parseISO";
+import { A as nt } from "../Analytics-CzGzz_sE.mjs";
 import { W as It } from "../WidgetContainer-BPJoDkhL.mjs";
-const $ = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(y, { direction: "column", children: [
+const G = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(y, { direction: "column", children: [
   /* @__PURE__ */ t(T, { bold: !0, sx: { textTransform: "none" }, variant: "body1", children: d }),
-  /* @__PURE__ */ t(T, { variant: "caption", children: N(n, o === "mini" ? "0,0" : "0,0.00") })
+  /* @__PURE__ */ t(T, { variant: "caption", children: k(n, o === "mini" ? "0,0" : "0,0.00") })
 ] }), At = () => {
-  const n = _t(), { goals: d, spending: o } = A(), { categories: a, dateRangeCategoryTotals: i } = W(), g = l.useMemo(
+  const n = _t(), { goals: d, spending: o } = A(), { categories: a, dateRangeCategoryTotals: i } = R(), g = c.useMemo(
     () => [
       n.palette.chartMono.chartMono5,
       n.palette.chartMono.chartMono4,
@@ -46,57 +46,57 @@ const $ = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(y,
       n.palette.chartMono.chartMono6
     ],
     [n]
-  ), [e, r] = l.useState(""), [c, b] = l.useState(0), u = l.useMemo(
-    () => rt(a, d, n, i),
+  ), [e, r] = c.useState(""), [s, b] = c.useState(0), u = c.useMemo(
+    () => st(a, d, n, i),
     [a, i]
-  ), h = l.useMemo(
-    () => st(a, i, g),
+  ), h = c.useMemo(
+    () => lt(a, i, g),
     [a, i, g]
-  ), M = (f, x) => {
-    b(x), r("");
-  }, _ = (f) => {
-    r(e === f ? "" : f);
+  ), M = (_, D) => {
+    b(D), r("");
+  }, f = (_) => {
+    r(e === _ ? "" : _);
   };
   return /* @__PURE__ */ p(L, { width: "100%", children: [
     /* @__PURE__ */ p(
-      it,
+      rt,
       {
         "aria-label": o.mini_title,
         onChange: M,
         sx: { touchAction: "manipulation" },
-        value: c,
+        value: s,
         variant: "fullWidth",
         children: [
           /* @__PURE__ */ t(
-            O,
+            $,
             {
               "aria-controls": "spending-tabpanel",
               id: "spending-tab",
               label: /* @__PURE__ */ t(
-                $,
+                G,
                 {
                   amount: u.totalAmount,
                   label: o.spend_tab_title,
                   variant: "mini"
                 }
               ),
-              tabIndex: c === 0 ? 0 : -1
+              tabIndex: s === 0 ? 0 : -1
             }
           ),
           /* @__PURE__ */ t(
-            O,
+            $,
             {
               "aria-controls": "income-tabpanel",
               id: "income-tab",
               label: /* @__PURE__ */ t(
-                $,
+                G,
                 {
                   amount: h.totalAmount,
                   label: o.income_tab_title,
                   variant: "mini"
                 }
               ),
-              tabIndex: c === 1 ? 0 : -1
+              tabIndex: s === 1 ? 0 : -1
             }
           )
         ]
@@ -106,20 +106,20 @@ const $ = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(y,
       L,
       {
         "aria-labelledby": "spending-tab",
-        hidden: c !== 0,
+        hidden: s !== 0,
         id: "spending-tabpanel",
         role: "tabpanel",
         children: /* @__PURE__ */ p(y, { direction: "row", gap: 16, justifyContent: "center", p: 24, children: [
           /* @__PURE__ */ t(
-            k,
+            B,
             {
               data: u,
-              onSelected: _,
+              onSelected: f,
               selectedId: e,
               totalLabel: o.total_spending
             }
           ),
-          /* @__PURE__ */ t(Y, { data: u, onSelected: _, selectedId: e })
+          /* @__PURE__ */ t(q, { data: u, onSelected: f, selectedId: e })
         ] })
       }
     ),
@@ -127,50 +127,50 @@ const $ = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(y,
       L,
       {
         "aria-labelledby": "income-tab",
-        hidden: c !== 1,
+        hidden: s !== 1,
         id: "income-tabpanel",
         role: "tabpanel",
         children: /* @__PURE__ */ p(y, { direction: "row", gap: 16, justifyContent: "center", p: 24, children: [
           /* @__PURE__ */ t(
-            k,
+            B,
             {
               data: h,
               isIncome: !0,
-              onSelected: _,
+              onSelected: f,
               selectedId: e,
               totalLabel: o.total_income
             }
           ),
-          /* @__PURE__ */ t(Y, { data: h, onSelected: _, selectedId: e })
+          /* @__PURE__ */ t(q, { data: h, onSelected: f, selectedId: e })
         ] })
       }
     )
   ] });
 }, Et = I(At), Wt = ({ onPrimaryCtaClick: n, sx: d = {} }) => {
-  const { isAccountDataLoaded: o, loadAccountData: a } = lt(), { dateRangeTotalsLoaded: i, categoriesLoaded: g, loadCategories: e, loadDateRangeCategoryTotals: r } = W(), { spending: c } = A(), { isInitialized: b, selectedAccounts: u } = z();
-  return dt({
+  const { isAccountDataLoaded: o, loadAccountData: a } = ct(), { dateRangeTotalsLoaded: i, categoriesLoaded: g, loadCategories: e, loadDateRangeCategoryTotals: r } = R(), { spending: s } = A(), { isInitialized: b, selectedAccounts: u } = P();
+  return gt({
     widgetName: "SpendingMiniWidget",
     isLoaded: i
-  }), l.useEffect(() => {
+  }), c.useEffect(() => {
     o || a().finally(), g || e().finally();
-  }, []), l.useEffect(() => {
+  }, []), c.useEffect(() => {
     r(
       u,
-      ot(/* @__PURE__ */ new Date()),
-      at(/* @__PURE__ */ new Date())
+      at(/* @__PURE__ */ new Date()),
+      it(/* @__PURE__ */ new Date())
     ).finally();
   }, [u]), b ? /* @__PURE__ */ t(
     Ct,
     {
       className: "mx-exp-spending-miniwidget",
       onPrimaryCtaClick: n,
-      primaryCtaLabel: c.primary_cta,
-      primaryCtaLabelAria: c.primary_cta_aria,
+      primaryCtaLabel: s.primary_cta,
+      primaryCtaLabelAria: s.primary_cta_aria,
       sx: { height: "100%", ...d },
-      title: c.mini_title,
+      title: s.mini_title,
       children: /* @__PURE__ */ t(Et, {})
     }
-  ) : /* @__PURE__ */ t(gt, {});
+  ) : /* @__PURE__ */ t(pt, {});
 }, Ce = I(Wt), Rt = ({
   data: n,
   onSelected: d,
@@ -181,9 +181,9 @@ const $ = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(y,
   return /* @__PURE__ */ p(y, { direction: "column", justifyContent: "center", maxWidth: 400, minWidth: 275, width: "100%", children: [
     /* @__PURE__ */ t(T, { bold: !0, id: "spending-list-title", sx: { py: 12 }, variant: "h3", children: `${a} ${i.by_category}` }),
     /* @__PURE__ */ t(wt, { "aria-hidden": "true" }),
-    /* @__PURE__ */ t(J, { "aria-labelledby": "spending-list-title", children: n.categoryData.map((e) => /* @__PURE__ */ p(l.Fragment, { children: [
+    /* @__PURE__ */ t(Q, { "aria-labelledby": "spending-list-title", children: n.categoryData.map((e) => /* @__PURE__ */ p(c.Fragment, { children: [
       /* @__PURE__ */ t(
-        Q,
+        X,
         {
           disableGutters: !0,
           disablePadding: !0,
@@ -193,7 +193,7 @@ const $ = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(y,
             minHeight: 44
           },
           children: /* @__PURE__ */ p(
-            X,
+            Z,
             {
               "aria-expanded": g?.guid === e.guid,
               id: `spending-list-category-${e.guid}`,
@@ -221,7 +221,7 @@ const $ = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(y,
                     width: "100%",
                     children: [
                       /* @__PURE__ */ t(T, { bold: o === e.guid, children: e.name }),
-                      /* @__PURE__ */ t(T, { bold: o === e.guid, variant: "body1", children: N(e.amount, "0,0.00") })
+                      /* @__PURE__ */ t(T, { bold: o === e.guid, variant: "body1", children: k(e.amount, "0,0.00") })
                     ]
                   }
                 )
@@ -230,15 +230,15 @@ const $ = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(y,
           )
         }
       ),
-      e.categoryTotals && e.categoryTotals.length > 0 && /* @__PURE__ */ t(vt, { in: g?.guid === e.guid, unmountOnExit: !0, children: /* @__PURE__ */ t(J, { sx: { borderBottom: 1, borderColor: "divider" }, children: g?.categoryTotals?.map((r) => /* @__PURE__ */ t(
-        Q,
+      e.categoryTotals && e.categoryTotals.length > 0 && /* @__PURE__ */ t(vt, { in: g?.guid === e.guid, unmountOnExit: !0, children: /* @__PURE__ */ t(Q, { sx: { borderBottom: 1, borderColor: "divider" }, children: g?.categoryTotals?.map((r) => /* @__PURE__ */ t(
+        X,
         {
           sx: {
             pl: 12,
             py: 0
           },
           children: /* @__PURE__ */ t(
-            X,
+            Z,
             {
               id: `spending-list-subcategory-${r.guid}`,
               onClick: () => d(r.guid, !0),
@@ -248,7 +248,7 @@ const $ = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(y,
                   r.name,
                   " "
                 ] }),
-                /* @__PURE__ */ t(T, { children: N(r.amount, "0,0.00") })
+                /* @__PURE__ */ t(T, { children: k(r.amount, "0,0.00") })
               ] })
             }
           )
@@ -256,7 +256,7 @@ const $ = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(y,
         r.guid
       )) }) })
     ] }, e.guid)) }),
-    /* @__PURE__ */ t(T, { bold: !0, sx: { mt: 12, pr: 8, textAlign: "right" }, children: `${i.total}: ${N(n.totalAmount, "0,0.00")}` })
+    /* @__PURE__ */ t(T, { bold: !0, sx: { mt: 12, pr: 8, textAlign: "right" }, children: `${i.total}: ${k(n.totalAmount, "0,0.00")}` })
   ] });
 }, Nt = I(Rt), Ot = ({
   data: n,
@@ -265,7 +265,7 @@ const $ = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(y,
   selectedId: a,
   title: i
 }) => {
-  const { isDesktop: g, isMobile: e } = Lt(), { dateRangeTotalsLoading: r } = W(), { spending: c } = A();
+  const { isDesktop: g, isMobile: e } = Lt(), { dateRangeTotalsLoading: r } = R(), { spending: s } = A();
   return /* @__PURE__ */ p(
     y,
     {
@@ -277,7 +277,7 @@ const $ = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(y,
       px: 8,
       children: [
         r && /* @__PURE__ */ t(
-          k,
+          B,
           {
             data: {
               categoryData: [],
@@ -293,7 +293,7 @@ const $ = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(y,
           }
         ),
         !r && /* @__PURE__ */ t(
-          k,
+          B,
           {
             data: n,
             onSelected: (h) => {
@@ -302,7 +302,7 @@ const $ = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(y,
             onViewTransactions: o,
             selectedId: a,
             size: g ? 400 : 300,
-            totalLabel: c.total_amount,
+            totalLabel: s.total_amount,
             variant: "full"
           }
         ),
@@ -310,7 +310,7 @@ const $ = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(y,
       ]
     }
   );
-}, nt = I(Ot), kt = (n) => [
+}, ot = I(Ot), kt = (n) => [
   n.palette.chartMono.chartMono5,
   n.palette.chartMono.chartMono4,
   n.palette.chartMono.chartMono3,
@@ -318,85 +318,85 @@ const $ = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(y,
   n.palette.chartMono.chartMono1,
   n.palette.chartMono.chartMono6
 ], $t = () => {
-  const n = Tt(), { is_mobile_webview: d } = V(), { clientConfig: o } = V(), { categories: a, dateRangeCategoryTotals: i } = W(), {
+  const n = Tt(), { is_mobile_webview: d } = H(), { clientConfig: o } = H(), { categories: a, dateRangeCategoryTotals: i } = R(), {
     goals: g,
     spending: e,
     transactions: r
-  } = A(), { displayedDateRange: c, selectedAccountGuids: b } = z(), {
+  } = A(), { displayedDateRange: s, selectedAccountGuids: b } = P(), {
     setFilter: u,
     sortedTransactions: h,
     sortedTransactionsWithSplits: M,
-    tags: _
-  } = ct(), f = o?.master?.deep_link_params?.account_guids, x = o?.master?.deep_link_params?.view, [D, R] = l.useState(""), [v, C] = l.useState(x === "income" ? 1 : 0), [E, H] = l.useState(""), [pt, B] = l.useState(!1), G = l.useMemo(
-    () => rt(a, g, n, i),
+    tags: f
+  } = dt(), _ = o?.master?.deep_link_params?.account_guids, D = o?.master?.deep_link_params?.view, [x, N] = c.useState(""), [v, C] = c.useState(D === "income" ? 1 : 0), [E, W] = c.useState(""), [O, j] = c.useState(!1), F = c.useMemo(
+    () => st(a, g, n, i),
     [a, i]
-  ), P = l.useMemo(
-    () => st(a, i, kt(n)),
+  ), K = c.useMemo(
+    () => lt(a, i, kt(n)),
     [a, i]
-  ), j = l.useMemo(
-    () => h.find((s) => s.guid === E),
+  ), V = c.useMemo(
+    () => h.find((l) => l.guid === E),
     [E, h]
-  ), ut = (s, S) => {
-    C(S), R("");
-  }, K = (s, S = !1) => {
-    S ? mt(s) : R(D === s || s === "0" ? "" : s);
-  }, mt = (s) => {
+  ), ut = (l, S) => {
+    C(S), N("");
+  }, U = (l, S = !1) => {
+    S ? mt(l) : N(x === l || l === "0" ? "" : l);
+  }, mt = (l) => {
     u({
       ...{
-        accounts: f || b,
-        dateRange: c
+        accounts: _ || b,
+        dateRange: s
       },
-      custom: (m) => D === "other" ? m.top_level_category_guid === s : m.category_guid === s,
+      custom: (m) => x === "other" ? m.top_level_category_guid === l : m.category_guid === l,
       showSplits: !0
-    }), B(!0);
-  }, U = (s) => {
+    }), j(!0);
+  }, Y = (l) => {
     const S = {
-      accounts: f || b,
-      dateRange: c
+      accounts: _ || b,
+      dateRange: s
     };
     if (v === 0)
-      if (s === "other") {
-        const m = G.categoryData.find((F) => F.guid === "other");
+      if (l === "other") {
+        const m = F.categoryData.find((z) => z.guid === "other");
         u({
           ...S,
-          custom: (F) => !!m?.categoryTotals?.find((ft) => ft.guid === F.top_level_category_guid)
+          custom: (z) => !!m?.categoryTotals?.find((ft) => ft.guid === z.top_level_category_guid)
         });
       } else
         u({
           ...S,
-          custom: (m) => s ? m.top_level_category_guid === s : m.top_level_category_guid !== w.INCOME && m.category_guid !== w.INCOME && m.top_level_category_guid !== w.INVESTMENTS && m.top_level_category_guid !== w.TRANSFER,
-          showSplits: !!s
+          custom: (m) => l ? m.top_level_category_guid === l : m.top_level_category_guid !== w.INCOME && m.category_guid !== w.INCOME && m.top_level_category_guid !== w.INVESTMENTS && m.top_level_category_guid !== w.TRANSFER,
+          showSplits: !!l
         });
     else
       u({
         ...S,
-        custom: (m) => s ? m.category_guid === s : m.category_guid === w.INCOME || m.top_level_category_guid === w.INCOME
+        custom: (m) => l ? m.category_guid === l : m.category_guid === w.INCOME || m.top_level_category_guid === w.INCOME
       });
-    B(!0);
+    j(!0);
   }, ht = () => {
-    Mt(M, _);
+    Mt(M, f);
   };
   return /* @__PURE__ */ p(L, { children: [
-    /* @__PURE__ */ p(it, { onChange: ut, value: v, variant: "fullWidth", children: [
+    /* @__PURE__ */ p(rt, { onChange: ut, value: v, variant: "fullWidth", children: [
       /* @__PURE__ */ t(
-        O,
+        $,
         {
           label: /* @__PURE__ */ t(
-            $,
+            G,
             {
-              amount: G.totalAmount,
+              amount: F.totalAmount,
               label: e.spend_tab_title
             }
           )
         }
       ),
       /* @__PURE__ */ t(
-        O,
+        $,
         {
           label: /* @__PURE__ */ t(
-            $,
+            G,
             {
-              amount: P.totalAmount,
+              amount: K.totalAmount,
               label: e.income_tab_title
             }
           )
@@ -404,31 +404,31 @@ const $ = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(y,
       )
     ] }),
     v === 0 && /* @__PURE__ */ t(
-      nt,
+      ot,
       {
-        data: G,
-        onSelected: K,
-        onViewTransactions: U,
-        selectedId: D,
+        data: F,
+        onSelected: U,
+        onViewTransactions: Y,
+        selectedId: x,
         title: e.spend_tab_title
       }
     ),
     v === 1 && /* @__PURE__ */ t(
-      nt,
+      ot,
       {
-        data: P,
-        onSelected: K,
-        onViewTransactions: U,
-        selectedId: D,
+        data: K,
+        onSelected: U,
+        onViewTransactions: Y,
+        selectedId: x,
         title: e.income_tab_title
       }
     ),
     /* @__PURE__ */ t(
-      Z,
+      tt,
       {
         ariaLabelClose: e.close_drawer_aria,
-        isOpen: pt,
-        onClose: () => B(!1),
+        isOpen: O,
+        onClose: () => j(!1),
         title: e.transactions_drawer_title,
         children: /* @__PURE__ */ p(y, { children: [
           !d && h.length > 0 && /* @__PURE__ */ t(y, { direction: "row", justifyContent: "right", mb: -24, mr: 8, mt: 8, zIndex: 1, children: /* @__PURE__ */ t(
@@ -440,51 +440,51 @@ const $ = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(y,
               children: r.export_csv_btn
             }
           ) }),
-          /* @__PURE__ */ t(Dt, { onClick: H })
+          /* @__PURE__ */ t(Dt, { onClick: W })
         ] })
       }
     ),
     /* @__PURE__ */ t(
-      Z,
+      tt,
       {
         ariaLabelClose: e.close_drawer_aria,
-        isOpen: !!j,
-        onClose: () => H(""),
+        isOpen: !!V,
+        onClose: () => W(""),
         title: e.transaction_details_drawer_title,
-        children: j && /* @__PURE__ */ t(xt, { transaction: j })
+        children: V && /* @__PURE__ */ t(xt, { transaction: V })
       }
     )
   ] });
 }, Bt = I($t), Gt = ({ onBackClick: n, onMenuClick: d, sx: o = {} }) => {
-  const { isAccountDataLoaded: a, loadAccountData: i } = lt(), { categoriesLoaded: g, dateRangeTotalsLoaded: e, loadCategories: r, loadDateRangeCategoryTotals: c } = W(), { isTransactionDataLoaded: b, loadTransactionData: u } = ct(), { spending: h } = A(), { displayedDateRange: M, isInitialized: _, setDisplayedDate: f, selectedAccounts: x } = z(), { onEvent: D } = yt(), { clientConfig: R } = V();
-  dt({
+  const { isAccountDataLoaded: a, loadAccountData: i } = ct(), { categoriesLoaded: g, dateRangeTotalsLoaded: e, loadCategories: r, loadDateRangeCategoryTotals: s } = R(), { isTransactionDataLoaded: b, loadTransactionData: u } = dt(), { spending: h } = A(), { displayedDateRange: M, isInitialized: f, setDisplayedDate: _, selectedAccounts: D } = P(), { onEvent: x } = yt(), { clientConfig: N } = H();
+  gt({
     widgetName: "SpendingWidget",
     isLoaded: e
-  }), l.useEffect(() => {
-    const C = R?.master?.deep_link_params, E = C?.date_range ? [tt(C.date_range.from), tt(C.date_range.to)] : [ot(q()), at(q())];
-    f(E[0], E[1]), a || i().finally(), g || r().finally(), b || u().finally(), D(et.SPENDING_VIEW);
-  }, []), l.useEffect(() => {
-    _ && c(
-      x,
+  }), c.useEffect(() => {
+    const C = N?.master?.deep_link_params, E = C?.date_range ? [et(C.date_range.from), et(C.date_range.to)] : [at(J()), it(J())], W = E[0], O = E[1];
+    _(W, O), a || i().finally(), g || r().finally(), b || u().finally(), f && s(D, W, O).finally(), x(nt.SPENDING_VIEW);
+  }, []), c.useEffect(() => {
+    f && s(
+      D,
       M.start,
       M.end
     ).finally();
-  }, [M, _, x]);
+  }, [M, f, D]);
   const v = (C) => {
-    f(C[0], C[1]);
+    _(C[0], C[1]);
   };
-  return _ ? /* @__PURE__ */ t(
+  return f ? /* @__PURE__ */ t(
     It,
     {
       calendarActions: { onRangeChanged: v },
-      onAccountsFilterClick: () => D(et.SPENDING_CLICK_FILTER),
+      onAccountsFilterClick: () => x(nt.SPENDING_CLICK_FILTER),
       onBackClick: n,
       onMenuClick: d,
       sx: o,
       title: h.title,
       children: /* @__PURE__ */ t(L, { width: "100%", children: /* @__PURE__ */ t(Bt, {}) })
     }
-  ) : /* @__PURE__ */ t(gt, {});
+  ) : /* @__PURE__ */ t(pt, {});
 }, Se = I(Gt);
 export {
   Ce as SpendingMiniWidget,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mx-cartographer/experiences",
-  "version": "8.1.10",
+  "version": "8.1.12",
   "description": "Library containing experience widgets",
   "author": "MX",
   "license": "MIT",