@mx-cartographer/experiences 7.13.2 → 7.13.3

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## [7.13.3] - 03-26-2026
+
+- **FIXED** - `Trends` Category List Cosmetic Changes.
+
 ## [7.13.2] - 03-25-2026
 
 - **UPDATED** - Trends Widget to fix ADA issues with lists

package/dist/{TrendsStore-st6GjDtg.mjs → TrendsStore-CYdTo7cN.mjs}

@@ -2,10 +2,10 @@ import { jsxs as u, jsx as l } from "react/jsx-runtime";
 import T from "react";
 import x from "@mui/material/ListItem";
 import S from "@mui/material/ListItemButton";
-import f from "@mui/material/ListItemIcon";
+import b from "@mui/material/ListItemIcon";
 import R from "@mui/material/ListItemText";
 import h from "@mui/material/Stack";
-import { Text as b } from "@mxenabled/mxui";
+import { Text as f } from "@mxenabled/mxui";
 import { makeAutoObservable as A } from "mobx";
 import { addSeconds as N } from "date-fns/addSeconds";
 import { differenceInCalendarMonths as v } from "date-fns/differenceInCalendarMonths";
@@ -24,7 +24,7 @@ const rt = ({
   rightContentBold: c = !0
 }) => {
   const g = /* @__PURE__ */ u(T.Fragment, { children: [
-    t && /* @__PURE__ */ l(f, { sx: { ml: 0 }, children: t }),
+    t && /* @__PURE__ */ l(b, { sx: { ml: 0 }, children: t }),
     /* @__PURE__ */ l(R, { children: /* @__PURE__ */ u(
       h,
       {
@@ -35,18 +35,18 @@ const rt = ({
         },
         children: [
           /* @__PURE__ */ u(h, { sx: { flex: 1, minWidth: 0 }, children: [
-            /* @__PURE__ */ l(b, { bold: i, variant: "body1", children: r }),
-            n && /* @__PURE__ */ l(b, { variant: "caption", children: n })
+            /* @__PURE__ */ l(f, { bold: i, variant: "body1", children: r }),
+            n && /* @__PURE__ */ l(f, { variant: "caption", children: n })
           ] }),
           /* @__PURE__ */ u(h, { sx: { flexDirection: "row", alignItems: "center", gap: 1 }, children: [
-            a && /* @__PURE__ */ l(b, { bold: c, display: "flex", variant: "body1", children: a }),
-            o && /* @__PURE__ */ l(f, { children: o })
+            a && /* @__PURE__ */ l(f, { bold: c, display: "flex", variant: "body1", children: a }),
+            o && /* @__PURE__ */ l(b, { children: o })
           ] })
         ]
       }
     ) })
   ] });
-  return /* @__PURE__ */ l(x, { sx: { bgcolor: "background.paper" }, children: e ? /* @__PURE__ */ l(
+  return /* @__PURE__ */ l(x, { children: e ? /* @__PURE__ */ l(
     S,
     {
       onClick: e,

package/dist/common/index.es.js

@@ -32,8 +32,8 @@ import { C as vs, G as Ms, M as ks, T as Ns } from "../GoalStore-DB58sKTC.mjs";
 import { C as Ls } from "../CurrencyText-CA-E5N_y.mjs";
 import { E as Ps } from "../EmptyState-DHAkGsjk.mjs";
 import { L as $s } from "../ListItemAction-4KB7P75M.mjs";
-import { T as z } from "../TrendsStore-st6GjDtg.mjs";
-import { L as Gs } from "../TrendsStore-st6GjDtg.mjs";
+import { T as z } from "../TrendsStore-CYdTo7cN.mjs";
+import { L as Gs } from "../TrendsStore-CYdTo7cN.mjs";
 import { A as Ws, B as qs, I as Ys, N as Qs, T as Ks, a as zs } from "../Notification-CMBNDGC-.mjs";
 import { G as Vs } from "../GlobalAccountFilter-B73Pw1hJ.mjs";
 import { S as Xs } from "../StatusBar-BK_uYHAB.mjs";

package/dist/trends/index.es.js

@@ -3,7 +3,7 @@ import g, { useRef as vt, useState as Dt, useEffect as It } from "react";
 import { observer as A } from "mobx-react-lite";
 import { CategoryIcon as we, Text as F, Icon as He, H3 as Ge, P as pe, ChevronRightIcon as Lt } from "@mxenabled/mxui";
 import N from "@mui/material/Box";
-import x from "@mui/material/Stack";
+import S from "@mui/material/Stack";
 import Te from "@mui/material/Button";
 import { addSeconds as et } from "date-fns/addSeconds";
 import { differenceInCalendarMonths as Se } from "date-fns/differenceInCalendarMonths";
@@ -23,19 +23,19 @@ import { C as xe } from "../CurrencyText-CA-E5N_y.mjs";
 import { C as Re, b as ze, c as Wt } from "../Category-CevNQ03n.mjs";
 import { f as Y, D as P } from "../DateFormats-BMpMrZpW.mjs";
 import { f as re, a as Ot } from "../NumberFormatting-QCaNwbjv.mjs";
-import { c as Gt, a as Ke, g as Bt, L as Pt } from "../TrendsStore-st6GjDtg.mjs";
-import { T as us } from "../TrendsStore-st6GjDtg.mjs";
+import { c as Gt, a as Ke, g as Bt, L as Pt } from "../TrendsStore-CYdTo7cN.mjs";
+import { T as us } from "../TrendsStore-CYdTo7cN.mjs";
 import { c as Vt, i as Ft, d as $t, e as zt, b as at, g as it, f as Ye } from "../SpendingData-Bz1bCWAs.mjs";
 import Kt from "@mui/material/ToggleButton";
 import Yt from "@mui/material/ToggleButtonGroup";
-import { parseISO as ct } from "date-fns/parseISO";
+import { parseISO as lt } from "date-fns/parseISO";
 import { H as ke } from "../HeaderCell-P8w6CmfO.mjs";
 import { T as W, b as jt } from "../ViewMoreMicroCard-D24H9kDm.mjs";
 import { useGridApiContext as Ut, useGridRootProps as Xt, DataGridPro as Zt } from "@mui/x-data-grid-pro";
 import Qt from "@mui/material/Badge";
 import qt from "@mui/material/IconButton";
 import { A as v } from "../Analytics-BYItVAe-.mjs";
-import { T as lt } from "../StatusIndicator-CIKUOoN_.mjs";
+import { T as ct } from "../StatusIndicator-CIKUOoN_.mjs";
 import { T as dt } from "../TransactionDetails-CBrqmEw1.mjs";
 import { D as Pe } from "../Drawer-Bbe4AMB1.mjs";
 import { u as Ie } from "../useWidgetLoadTimer-DgN1bTyu.mjs";
@@ -46,10 +46,10 @@ import { M as Jt } from "../MiniWidgetContainer-xLWSV6Wz.mjs";
 import { subMonths as eo } from "date-fns";
 import { TrendingUp as to, TrendingDown as oo, MultilineChart as no, ExpandLess as so, ExpandMore as ro, ArrowBack as ao } from "@mxenabled/mx-icons";
 import { M as io } from "../MicroWidgetContainer-B_EnfvCq.mjs";
-import co from "@mui/material/Collapse";
+import lo from "@mui/material/Collapse";
 import We from "@mui/material/List";
 import mt from "@mui/material/ListItem";
-import lo from "@mui/material/ListItemButton";
+import co from "@mui/material/ListItemButton";
 import uo from "@mui/material/ListItemIcon";
 import ht from "@mui/material/ListItemText";
 import gt from "@mui/material/styles/useTheme";
@@ -62,7 +62,7 @@ import { E as fo } from "../EmptyState-DHAkGsjk.mjs";
 import { C as yo } from "../ConnectDrawer-C0wjwcJt.mjs";
 const pt = ({ categoryGuid: t, topLevelCategoryGuid: s }) => {
   const { categories: n } = R(), { getCategoryName: o } = U(), r = o(t);
-  return /* @__PURE__ */ C(x, { alignItems: "center", direction: "column", gap: "8", justifyContent: "center", mb: 4, children: [
+  return /* @__PURE__ */ C(S, { alignItems: "center", direction: "column", gap: "8", justifyContent: "center", mb: 4, children: [
     /* @__PURE__ */ e(
       N,
       {
@@ -80,7 +80,7 @@ const pt = ({ categoryGuid: t, topLevelCategoryGuid: s }) => {
   cursorPosition: o,
   chartContainerRef: r
 }) => {
-  const c = ae(), a = vt(null), [l, u] = Dt({ x: o.x, y: o.y });
+  const i = ae(), a = vt(null), [c, u] = Dt({ x: o.x, y: o.y });
   if (It(() => {
     (() => {
       const m = a.current, _ = r.current;
@@ -90,15 +90,15 @@ const pt = ({ categoryGuid: t, topLevelCategoryGuid: s }) => {
       f + h.width * 2 > p.right ? f = o.x - h.width : f - h.width < p.left && (f = o.x), T + h.height * 2 > p.bottom && (T = o.y - h.height), u({ x: f, y: T });
     })();
   }, [o, r]), !n) return null;
-  const i = n.reduce((y, m) => y + m.y, 0);
+  const l = n.reduce((y, m) => y + m.y, 0);
   return /* @__PURE__ */ e(
     tt,
     {
       ref: a,
       sx: {
         position: "absolute",
-        top: l.y,
-        left: l.x,
+        top: c.y,
+        left: c.x,
         width: 250,
         pointerEvents: "none"
       },
@@ -106,13 +106,13 @@ const pt = ({ categoryGuid: t, topLevelCategoryGuid: s }) => {
         /* @__PURE__ */ C(N, { alignItems: "center", display: "flex", flexDirection: "column", children: [
           /* @__PURE__ */ e(pt, { categoryGuid: t, topLevelCategoryGuid: s }),
           /* @__PURE__ */ e(F, { variant: "body2", children: `${n.length}-month total` }),
-          /* @__PURE__ */ e(xe, { amount: i, bold: !0, formatString: "0,0", variant: "body2" })
+          /* @__PURE__ */ e(xe, { amount: l, bold: !0, formatString: "0,0", variant: "body2" })
         ] }),
         /* @__PURE__ */ e(Ne, { sx: { my: 16, width: "100%" } }),
         /* @__PURE__ */ e($e, { container: !0, children: n.map((y, m) => /* @__PURE__ */ C(g.Fragment, { children: [
           m > 0 && m % 3 === 0 && /* @__PURE__ */ e(Ne, { sx: { my: 16, width: "100%" } }),
           /* @__PURE__ */ e($e, { item: !0, xs: 4, children: /* @__PURE__ */ C(N, { alignItems: "center", display: "flex", flexDirection: "column", children: [
-            /* @__PURE__ */ e(F, { color: c.palette.text.secondary, variant: "caption", children: y.x }),
+            /* @__PURE__ */ e(F, { color: i.palette.text.secondary, variant: "caption", children: y.x }),
             /* @__PURE__ */ e(
               xe,
               {
@@ -133,11 +133,11 @@ const pt = ({ categoryGuid: t, topLevelCategoryGuid: s }) => {
   hoveredLegend: n,
   legendRef: o,
   onHoverLegend: r,
-  onClickLegend: c
+  onClickLegend: i
 }) => {
-  const { isMobile: a } = j(), { getCategoryName: l } = U();
+  const { isMobile: a } = j(), { getCategoryName: c } = U();
   return /* @__PURE__ */ e(
-    x,
+    S,
     {
       direction: "row",
       flexWrap: "wrap",
@@ -145,12 +145,12 @@ const pt = ({ categoryGuid: t, topLevelCategoryGuid: s }) => {
       justifyContent: "start",
       ref: o,
       sx: t,
-      children: s.map(({ guid: u, top_level_guid: i }) => {
-        const y = n === u, m = Re[u], _ = Re[i], h = m ?? _ ?? Re.default, p = h + "33";
+      children: s.map(({ guid: u, top_level_guid: l }) => {
+        const y = n === u, m = Re[u], _ = Re[l], h = m ?? _ ?? Re.default, p = h + "33";
         return /* @__PURE__ */ C(
           Te,
           {
-            onClick: () => c(u),
+            onClick: () => i(u),
             onMouseEnter: () => r(u),
             onMouseLeave: () => r(null),
             sx: {
@@ -177,7 +177,7 @@ const pt = ({ categoryGuid: t, topLevelCategoryGuid: s }) => {
                   }
                 }
               ),
-              /* @__PURE__ */ e(F, { variant: "body1", children: l(u) })
+              /* @__PURE__ */ e(F, { variant: "body1", children: c(u) })
             ]
           },
           u
@@ -190,15 +190,15 @@ const pt = ({ categoryGuid: t, topLevelCategoryGuid: s }) => {
   series: n,
   xData: o
 }) => {
-  const r = Rt(), c = ae();
+  const r = Rt(), i = ae();
   if (!r?.identifier) return null;
-  const { dataIndex: a, seriesId: l } = r.identifier;
-  if (a == null || !l) return null;
-  const i = n.find((m) => m.id === l)?.data?.[a], y = o?.[a];
-  return i === void 0 || !y ? null : /* @__PURE__ */ e(tt, { sx: { pt: 4, px: 8 }, children: /* @__PURE__ */ e(ot, { children: /* @__PURE__ */ C(N, { alignItems: "center", display: "flex", flexDirection: "column", children: [
+  const { dataIndex: a, seriesId: c } = r.identifier;
+  if (a == null || !c) return null;
+  const l = n.find((m) => m.id === c)?.data?.[a], y = o?.[a];
+  return l === void 0 || !y ? null : /* @__PURE__ */ e(tt, { sx: { pt: 4, px: 8 }, children: /* @__PURE__ */ e(ot, { children: /* @__PURE__ */ C(N, { alignItems: "center", display: "flex", flexDirection: "column", children: [
     /* @__PURE__ */ e(pt, { categoryGuid: t, topLevelCategoryGuid: s }),
-    /* @__PURE__ */ e(F, { color: c.palette.text.secondary, variant: "body2", children: Y(y, P.MONTH_SHORT_YEAR) }),
-    /* @__PURE__ */ e(xe, { amount: String(i), bold: !0, formatString: "0,0", variant: "body1" })
+    /* @__PURE__ */ e(F, { color: i.palette.text.secondary, variant: "body2", children: Y(y, P.MONTH_SHORT_YEAR) }),
+    /* @__PURE__ */ e(xe, { amount: String(l), bold: !0, formatString: "0,0", variant: "body1" })
   ] }) }) });
 }, So = ({
   onHoverArea: t,
@@ -206,25 +206,25 @@ const pt = ({ categoryGuid: t, topLevelCategoryGuid: s }) => {
   onHoverLegend: n,
   onClickLegend: o,
   stackedDatasets: r,
-  unstackedDatasets: c = [],
+  unstackedDatasets: i = [],
   availableHeight: a = 0,
-  minimumHeight: l = 350
+  minimumHeight: c = 350
 }) => {
-  const u = ae(), { isMobile: i } = j(), [y, { height: m }] = Nt(), _ = g.useRef(null), [h, p] = g.useState(0);
+  const u = ae(), { isMobile: l } = j(), [y, { height: m }] = Nt(), _ = g.useRef(null), [h, p] = g.useState(0);
   g.useEffect(() => {
-    const d = Math.max(a - m, l);
+    const d = Math.max(a - m, c);
     p(d);
   }, [a, m]);
-  const [f, T] = g.useState(null), [S, k] = g.useState({
+  const [f, T] = g.useState(null), [x, k] = g.useState({
     hoveredSeriesId: null,
     hoveredAreaData: null,
     isAreaHovered: !1,
     cursorPos: { x: 0, y: 0 }
-  }), { hoveredSeriesId: L, hoveredAreaData: E, isAreaHovered: w, cursorPos: M } = S, ie = w && L && E, X = !ie, V = [...r, ...c], Z = V[0]?.dataset.length ?? 0, O = V.flatMap((d) => d.dataset.map((b) => b.x)), G = V.flatMap((d) => d.dataset.map((b) => b.y)), Q = r[0]?.dataset?.map(
+  }), { hoveredSeriesId: L, hoveredAreaData: E, isAreaHovered: w, cursorPos: M } = x, ie = w && L && E, X = !ie, V = [...r, ...i], Z = V[0]?.dataset.length ?? 0, O = V.flatMap((d) => d.dataset.map((b) => b.x)), G = V.flatMap((d) => d.dataset.map((b) => b.y)), Q = r[0]?.dataset?.map(
     (d, b) => r.reduce((I, K) => I + K.dataset[b]?.y || 0, 0)
-  ) ?? [0], Ce = Math.max(...Q), ce = Math.max(
-    ...c.flatMap((d) => d.dataset.map((b) => b.y))
-  ), q = Math.floor(Math.min(...G) / 100) * 100, le = Math.ceil(Math.max(Ce, ce) / 100) * 100, z = r.map((d, b) => ({
+  ) ?? [0], Ce = Math.max(...Q), le = Math.max(
+    ...i.flatMap((d) => d.dataset.map((b) => b.y))
+  ), q = Math.floor(Math.min(...G) / 100) * 100, ce = Math.ceil(Math.max(Ce, le) / 100) * 100, z = r.map((d, b) => ({
     id: `stacked-${b}`,
     guid: d.category_guid,
     top_level_guid: d.top_level_category_guid,
@@ -236,7 +236,7 @@ const pt = ({ categoryGuid: t, topLevelCategoryGuid: s }) => {
     type: "line",
     highlightScope: { highlight: "item" },
     valueFormatter: (I) => re(I, "0,0")
-  })), J = c.map((d, b) => ({
+  })), J = i.map((d, b) => ({
     id: `unstacked-${b}`,
     guid: d.category_guid,
     top_level_guid: d.top_level_category_guid,
@@ -256,7 +256,7 @@ const pt = ({ categoryGuid: t, topLevelCategoryGuid: s }) => {
       top_level_guid: b
     }))
   ], te = (d) => {
-    const I = d.startsWith("stacked-") ? r[parseInt(d.split("-")[1])] : c[parseInt(d.split("-")[1])];
+    const I = d.startsWith("stacked-") ? r[parseInt(d.split("-")[1])] : i[parseInt(d.split("-")[1])];
     return {
       guid: I?.category_guid,
       topLevelGuid: I?.top_level_category_guid
@@ -346,7 +346,7 @@ const pt = ({ categoryGuid: t, topLevelCategoryGuid: s }) => {
         }
       },
       children: /* @__PURE__ */ C(
-        x,
+        S,
         {
           direction: { xs: "column", md: "column" },
           spacing: { xs: 0, md: 4 },
@@ -389,7 +389,7 @@ const pt = ({ categoryGuid: t, topLevelCategoryGuid: s }) => {
                 yAxis: [
                   {
                     min: q,
-                    max: le || 100,
+                    max: ce || 100,
                     valueFormatter: (d) => Et(d).format("0a")
                   }
                 ]
@@ -403,7 +403,7 @@ const pt = ({ categoryGuid: t, topLevelCategoryGuid: s }) => {
                 legendRef: y,
                 onClickLegend: de,
                 onHoverLegend: se,
-                sx: { px: i ? 0 : 24 }
+                sx: { px: l ? 0 : 24 }
               }
             ),
             ie && /* @__PURE__ */ e(
@@ -448,8 +448,8 @@ const pt = ({ categoryGuid: t, topLevelCategoryGuid: s }) => {
     }
   );
 }, yt = ({ selectedDateRange: t, selectedCategoryGuid: s }) => {
-  const { trends: n } = R(), { isMobile: o, isDesktop: r } = j(), { getCategoryName: c } = U(), a = g.useMemo(() => {
-    const i = t.start.getFullYear() === t.end.getFullYear() ? Y(
+  const { trends: n } = R(), { isMobile: o, isDesktop: r } = j(), { getCategoryName: i } = U(), a = g.useMemo(() => {
+    const l = t.start.getFullYear() === t.end.getFullYear() ? Y(
       t.start,
       o ? P.MONTH_SHORT : P.MONTH_LONG
     ) : Y(
@@ -459,8 +459,8 @@ const pt = ({ categoryGuid: t, topLevelCategoryGuid: s }) => {
       t.end,
       o ? P.MONTH_SHORT_YEAR : P.MONTH_YEAR
     );
-    return `${i} - ${y}`;
-  }, [t, o]), u = c(s) || (o ? n.sub_title : n.sub_title_by_category);
+    return `${l} - ${y}`;
+  }, [t, o]), u = i(s) || (o ? n.sub_title : n.sub_title_by_category);
   return /* @__PURE__ */ C(N, { children: [
     /* @__PURE__ */ e(
       Ge,
@@ -478,27 +478,27 @@ const pt = ({ categoryGuid: t, topLevelCategoryGuid: s }) => {
   ] });
 }, xo = (t) => {
   const s = t.id === "total";
-  return /* @__PURE__ */ C(x, { alignItems: "center", direction: "row", role: "rowheader", tabIndex: t.tabIndex, children: [
+  return /* @__PURE__ */ C(S, { alignItems: "center", direction: "row", role: "rowheader", tabIndex: t.tabIndex, children: [
     !s && /* @__PURE__ */ e(N, { "aria-hidden": !0, children: /* @__PURE__ */ e(we, { categoryGuid: t.row.top_level_category_guid, variant: "twotone" }) }),
     /* @__PURE__ */ e(F, { bold: s, sx: { ml: 12 }, variant: s ? "body1" : "body2", children: t.row.category })
   ] });
 }, je = (t) => {
-  const s = t.row.category_guid, n = t.row.top_level_category_guid, o = s === ze.INCOME || n === ze.INCOME, r = t.id === "total", c = t.field === "total", a = c ? t.row[t.field] : t.row.monthlyAmounts[t.field];
-  return /* @__PURE__ */ e(x, { alignItems: "flex-end", direction: "row", tabIndex: t.tabIndex, children: /* @__PURE__ */ e(
+  const s = t.row.category_guid, n = t.row.top_level_category_guid, o = s === ze.INCOME || n === ze.INCOME, r = t.id === "total", i = t.field === "total", a = i ? t.row[t.field] : t.row.monthlyAmounts[t.field];
+  return /* @__PURE__ */ e(S, { alignItems: "flex-end", direction: "row", tabIndex: t.tabIndex, children: /* @__PURE__ */ e(
     xe,
     {
       amount: o ? Math.abs(a) : a,
       isIncome: o,
-      sx: { fontWeight: o || c || r ? 600 : 500 },
+      sx: { fontWeight: o || i || r ? 600 : 500 },
       symbol: o ? "+" : void 0,
       variant: r ? "body1" : "body2"
     }
   ) });
 }, Ue = (t, s) => {
-  const n = Y(ct(s.isoDate), P.MONTH_LONG);
+  const n = Y(lt(s.isoDate), P.MONTH_LONG);
   return t[n] = s.amount, t;
 }, Xe = (t) => (s, n) => {
-  const o = Y(ct(n.isoDate), P.MONTH_LONG);
+  const o = Y(lt(n.isoDate), P.MONTH_LONG);
   return s + (t.includes(o) ? n.amount : 0);
 }, wo = (t, s) => {
   const n = [], o = new Date(t);
@@ -519,11 +519,11 @@ const pt = ({ categoryGuid: t, topLevelCategoryGuid: s }) => {
     sortable: !0,
     sortComparator: Gt,
     type: "string"
-  }, o = t.map((c) => ({
-    field: c,
+  }, o = t.map((i) => ({
+    field: i,
     flex: 1,
     headerClassName: "trends-table-header",
-    headerName: c,
+    headerName: i,
     minWidth: 100,
     renderHeader: ke,
     renderCell: je,
@@ -533,7 +533,7 @@ const pt = ({ categoryGuid: t, topLevelCategoryGuid: s }) => {
     hideSortIcons: !1,
     type: "number",
     sortComparator: Ke,
-    valueGetter: (a, l) => l.monthlyAmounts?.[c] ?? 0
+    valueGetter: (a, c) => c.monthlyAmounts?.[i] ?? 0
   })), r = {
     field: "total",
     flex: 1,
@@ -551,21 +551,21 @@ const pt = ({ categoryGuid: t, topLevelCategoryGuid: s }) => {
   };
   return [n, ...o, r];
 }, Ze = (t, s, n, o, r) => {
-  const c = t.filter((a) => a.is_income === n).map((a) => {
-    let l = a.totalMonthlyAmounts;
-    return r && (l = a.monthlyAmounts), {
+  const i = t.filter((a) => a.is_income === n).map((a) => {
+    let c = a.totalMonthlyAmounts;
+    return r && (c = a.monthlyAmounts), {
       id: a.guid,
       category: a.name,
       category_guid: a.guid,
       isParent: !1,
       top_level_category_guid: a.parent_guid || a.guid,
-      total: l.reduce(Xe(o), 0),
-      monthlyAmounts: l.reduce(Ue, {})
+      total: c.reduce(Xe(o), 0),
+      monthlyAmounts: c.reduce(Ue, {})
     };
   });
   if (r && r.is_income === n) {
     const a = r.monthlyAmounts.reduce(Xe(o), 0);
-    a !== 0 && c.push({
+    a !== 0 && i.push({
       id: `sub-${r.guid}`,
       category: rt(s.category_general, r.name),
       category_guid: r.guid,
@@ -575,7 +575,7 @@ const pt = ({ categoryGuid: t, topLevelCategoryGuid: s }) => {
       monthlyAmounts: r.monthlyAmounts.reduce(Ue, {})
     });
   }
-  return c;
+  return i;
 }, Do = Mt("div")({
   display: "flex",
   visibility: "hidden",
@@ -587,22 +587,22 @@ function Io({
   sortingOrder: n,
   disabled: o,
   className: r,
-  field: c
+  field: i
 }) {
-  const a = Ut(), l = Xt();
+  const a = Ut(), c = Xt();
   let u = null;
-  const i = {};
-  if (t === "asc" ? u = l.slots.columnSortedAscendingIcon : t === "desc" ? u = l.slots.columnSortedDescendingIcon : (u = l.slots.columnUnsortedIcon ?? null, i.sortingOrder = n), !u) return null;
-  const m = a.current.getColumn(c)?.headerName ?? c;
+  const l = {};
+  if (t === "asc" ? u = c.slots.columnSortedAscendingIcon : t === "desc" ? u = c.slots.columnSortedDescendingIcon : (u = c.slots.columnUnsortedIcon ?? null, l.sortingOrder = n), !u) return null;
+  const m = a.current.getColumn(i)?.headerName ?? i;
   let _ = "";
   t === "asc" ? _ = ", sorted ascending" : t === "desc" && (_ = ", sorted descending");
-  const h = ["Total", "Category"].includes(m) ? "" : " category totals", p = `Sort by ${m}${h}${_}`, f = /* @__PURE__ */ e(u, { className: "MuiDataGrid-sortIcon", fontSize: "small", ...i }), T = /* @__PURE__ */ e(
+  const h = ["Total", "Category"].includes(m) ? "" : " category totals", p = `Sort by ${m}${h}${_}`, f = /* @__PURE__ */ e(u, { className: "MuiDataGrid-sortIcon", fontSize: "small", ...l }), T = /* @__PURE__ */ e(
     qt,
     {
       disabled: o,
       size: "small",
       tabIndex: -1,
-      ...l.slotProps?.baseIconButton,
+      ...c.slotProps?.baseIconButton,
       "aria-label": p,
       className: `MuiDataGrid-sortButton${r ? ` ${r}` : ""}`,
       title: p,
@@ -618,7 +618,7 @@ const Lo = g.memo(Io), Qe = ({
   rows: o,
   totalRow: r
 }) => {
-  const c = ae(), { onEvent: a } = $(), l = c.palette.mode === "light";
+  const i = ae(), { onEvent: a } = $(), c = i.palette.mode === "light";
   return /* @__PURE__ */ e(
     Zt,
     {
@@ -647,11 +647,11 @@ const Lo = g.memo(Io), Qe = ({
         borderStyle: "solid",
         borderRadius: 2,
         "& .MuiDataGrid-columnHeaders": {
-          bgcolor: l ? "neutral.50" : "neutral.800",
+          bgcolor: c ? "neutral.50" : "neutral.800",
           borderBottom: "none"
         },
         "& .trends-table-header": {
-          bgcolor: l ? "neutral.50" : "neutral.800"
+          bgcolor: c ? "neutral.50" : "neutral.800"
         }
       }
     }
@@ -663,20 +663,20 @@ const Lo = g.memo(Io), Qe = ({
   height: o = "100%",
   sx: r = {}
 }) => {
-  const { trends: c } = R(), { trendsCategories: a } = U(), l = g.useMemo(() => wo(t.start, t.end), [t]), u = g.useMemo(() => vo(l, c), [l, c]), i = g.useMemo(() => {
+  const { trends: i } = R(), { trendsCategories: a } = U(), c = g.useMemo(() => wo(t.start, t.end), [t]), u = g.useMemo(() => vo(c, i), [c, i]), l = g.useMemo(() => {
     if (s)
       return a.find((h) => h.guid === s);
   }, [s, a]), [y, m] = g.useMemo(() => {
     let h = a;
-    return i && (h = i.subCategories.filter(
+    return l && (h = l.subCategories.filter(
       (p) => p.monthlyAmounts.some((f) => f.amount !== 0)
     )), [
-      Ze(h, c, !0, l, i),
-      Ze(h, c, !1, l, i)
+      Ze(h, i, !0, c, l),
+      Ze(h, i, !1, c, l)
     ];
-  }, [a, l, i, c]), _ = {
+  }, [a, c, l, i]), _ = {
     id: "total",
-    category: c.table_column_total,
+    category: i.table_column_total,
     category_guid: "total",
     isParent: !1,
     top_level_category_guid: "total",
@@ -689,26 +689,26 @@ const Lo = g.memo(Io), Qe = ({
     )
   };
   return /* @__PURE__ */ C(
-    x,
+    S,
     {
       gap: 24,
       sx: { height: o, width: "100%", overflowX: "auto", boxShadow: "none", ...r },
       children: [
-        (!i || i && i.is_income) && /* @__PURE__ */ e(
+        (!l || l && l.is_income) && /* @__PURE__ */ e(
           Qe,
           {
             columns: u,
             onRowClick: n,
-            parentCategory: i,
+            parentCategory: l,
             rows: y
           }
         ),
-        (!i || i && !i.is_income) && /* @__PURE__ */ e(
+        (!l || l && !l.is_income) && /* @__PURE__ */ e(
           Qe,
           {
             columns: u,
             onRowClick: n,
-            parentCategory: i,
+            parentCategory: l,
             rows: m,
             totalRow: _
           }
@@ -724,18 +724,18 @@ const Lo = g.memo(Io), Qe = ({
   isOpen: n,
   onClose: o
 }) => {
-  const { onEvent: r } = $(), { selectedAccountGuids: c } = fe(), { common: a } = R(), { setFilter: l, sortedTransactions: u } = ve(), [i, y] = g.useState(""), m = g.useMemo(
-    () => u.find((h) => h.guid === i),
-    [i, u]
+  const { onEvent: r } = $(), { selectedAccountGuids: i } = fe(), { common: a } = R(), { setFilter: c, sortedTransactions: u } = ve(), [l, y] = g.useState(""), m = g.useMemo(
+    () => u.find((h) => h.guid === l),
+    [l, u]
   );
   g.useEffect(() => {
-    l({
-      accounts: c,
+    c({
+      accounts: i,
       dateRange: s,
       custom: (h) => t === "" || t === h.category_guid || t === h.top_level_category_guid,
       showSplits: !!t
     });
-  }, [c, t, s]), g.useEffect(() => r(v.TRENDS_VIEW_TRANSACTIONS), []);
+  }, [i, t, s]), g.useEffect(() => r(v.TRENDS_VIEW_TRANSACTIONS), []);
   const _ = () => {
     y(""), o();
   };
@@ -748,14 +748,14 @@ const Lo = g.memo(Io), Qe = ({
       title: Eo.title,
       children: [
         m && /* @__PURE__ */ e(dt, { transaction: m }),
-        !m && /* @__PURE__ */ e(lt, { onClick: y })
+        !m && /* @__PURE__ */ e(ct, { onClick: y })
       ]
     }
   );
 }, Ao = A(Mo), Ro = ({ onBackClick: t, sx: s }) => {
-  const { onEvent: n } = $(), { isDesktop: o, isTablet: r, isMobile: c } = j(), { isAccountDataLoaded: a, loadAccountData: l } = De(), {
+  const { onEvent: n } = $(), { isDesktop: o, isTablet: r, isMobile: i } = j(), { isAccountDataLoaded: a, loadAccountData: c } = De(), {
     categoriesLoaded: u,
-    loadCategories: i,
+    loadCategories: l,
     loadDateRangeCategoryTotals: y,
     loadMonthlyCategoryTotals: m,
     monthlyCategoryTotals: _,
@@ -764,33 +764,33 @@ const Lo = g.memo(Io), Qe = ({
     isTransactionDataLoaded: p,
     loadTransactionData: f,
     sortedTransactions: T
-  } = ve(), { selectedDateRange: S, setSelectedDateRange: k } = ye(), { isInitialized: L, selectedAccounts: E } = fe(), { trends: w } = R(), [M, ie] = g.useState(!1), [X, V] = g.useState(!1), [Z, O] = g.useState("Chart"), [G, Q] = g.useState(""), [Ce, ce] = g.useState(window.innerHeight), le = Ce - (c ? 315 : 345);
+  } = ve(), { selectedDateRange: x, setSelectedDateRange: k } = ye(), { isInitialized: L, selectedAccounts: E } = fe(), { trends: w } = R(), [M, ie] = g.useState(!1), [X, V] = g.useState(!1), [Z, O] = g.useState("Chart"), [G, Q] = g.useState(""), [Ce, le] = g.useState(window.innerHeight), ce = Ce - (i ? 315 : 345);
   Ie({
     widgetName: "TrendsFullWidget",
     isLoaded: M
   }), g.useEffect(() => {
-    const D = () => ce(window.innerHeight);
-    return window.addEventListener("resize", D), a || l().finally(), u || i().finally(), p || f().finally(), () => window.removeEventListener("resize", D);
+    const D = () => le(window.innerHeight);
+    return window.addEventListener("resize", D), a || c().finally(), u || l().finally(), p || f().finally(), () => window.removeEventListener("resize", D);
   }, []), g.useEffect(() => {
-    L && y(E, S.start, S.end).then(() => {
+    L && y(E, x.start, x.end).then(() => {
       m(
         E,
-        S.start,
-        S.end
+        x.start,
+        x.end
       );
     }).finally(() => {
       ie(!0), n(v.TRENDS_LOAD_WIDGET, {
         ...W,
-        time_period: `${Se(S.end, S.start)}M`
+        time_period: `${Se(x.end, x.start)}M`
       });
     });
-  }, [L, E, S]);
+  }, [L, E, x]);
   const z = g.useMemo(() => {
     if (!M) return { stackedDatasets: [], unstackedDatasets: [] };
     const D = Bt(
       _,
-      S.start,
-      S.end
+      x.start,
+      x.end
     ), B = G.length ? D.filter(
       (d) => d.top_level_category_guid === G || d.category_guid === G
     ) : Vt(D);
@@ -798,7 +798,7 @@ const Lo = g.memo(Io), Qe = ({
       stackedDatasets: B.filter(Ft),
       unstackedDatasets: B.filter($t)
     };
-  }, [_, G, S]), J = (D, B) => {
+  }, [_, G, x]), J = (D, B) => {
     O(B ?? Z), n(v.TRENDS_CLICK_TOGGLE_VIEW);
   }, ne = (D) => {
     const B = et(D?.[0], 1), d = D?.[1], b = Se(d, B);
@@ -822,7 +822,7 @@ const Lo = g.memo(Io), Qe = ({
     ut,
     {
       calendarActions: { onRangeChanged: ne },
-      dateRange: S,
+      dateRange: x,
       dateRangeVariant: "timeframebuttons",
       onAccountsFilterClick: ee,
       onBackClick: t,
@@ -830,7 +830,7 @@ const Lo = g.memo(Io), Qe = ({
       title: w.title,
       children: [
         /* @__PURE__ */ C(
-          x,
+          S,
           {
             sx: {
               // eslint-disable-next-line no-nested-ternary
@@ -838,24 +838,24 @@ const Lo = g.memo(Io), Qe = ({
             },
             children: [
               /* @__PURE__ */ C(
-                x,
+                S,
                 {
                   flexDirection: "row",
                   justifyContent: "space-between",
-                  sx: { pb: c ? 12 : 24, pt: c ? 24 : 48 },
+                  sx: { pb: i ? 12 : 24, pt: i ? 24 : 48 },
                   children: [
                     /* @__PURE__ */ e(
                       yt,
                       {
                         selectedCategoryGuid: G,
-                        selectedDateRange: S
+                        selectedDateRange: x
                       }
                     ),
                     /* @__PURE__ */ e(ft, { onTabChange: J, selectedTab: Z })
                   ]
                 }
               ),
-              /* @__PURE__ */ C(x, { alignItems: "center", flexDirection: "row", width: "100%", children: [
+              /* @__PURE__ */ C(S, { alignItems: "center", flexDirection: "row", width: "100%", children: [
                 /* @__PURE__ */ e(N, { flexGrow: 1, children: G && /* @__PURE__ */ C(Te, { onClick: () => Q(""), sx: { p: 0, pr: 5 }, children: [
                   /* @__PURE__ */ e(He, { name: "arrow_back" }),
                   w.all_categories
@@ -866,7 +866,7 @@ const Lo = g.memo(Io), Qe = ({
                 Z === "Chart" && /* @__PURE__ */ e(
                   So,
                   {
-                    availableHeight: le,
+                    availableHeight: ce,
                     onClickLegend: se,
                     onHoverArea: ue,
                     onHoverLegend: de,
@@ -880,7 +880,7 @@ const Lo = g.memo(Io), Qe = ({
                   {
                     onClickRow: te,
                     selectedCategory: G,
-                    selectedDateRange: S
+                    selectedDateRange: x
                   }
                 )
               ] })
@@ -891,7 +891,7 @@ const Lo = g.memo(Io), Qe = ({
           Ao,
           {
             categoryGuid: G,
-            dateRange: S,
+            dateRange: x,
             isOpen: X,
             onClose: () => V(!1)
           }
@@ -918,23 +918,23 @@ const Lo = g.memo(Io), Qe = ({
     }
   );
 }, Ho = A(ko), No = ({ onPrimaryCtaClick: t, sx: s }) => {
-  const { isAccountDataLoaded: n, loadAccountData: o } = De(), { loadMonthlyCategoryTotals: r, monthlyTotalsLoaded: c } = U(), { isInitialized: a } = Be(), { trends: l } = R(), { selectedAccounts: u } = fe();
+  const { isAccountDataLoaded: n, loadAccountData: o } = De(), { loadMonthlyCategoryTotals: r, monthlyTotalsLoaded: i } = U(), { isInitialized: a } = Be(), { trends: c } = R(), { selectedAccounts: u } = fe();
   return g.useEffect(() => {
     n || o().finally();
   }, []), Ie({
     widgetName: "TrendsMiniWidget",
-    isLoaded: c
+    isLoaded: i
   }), g.useEffect(() => {
     a && n && r(u).finally();
-  }, [n, a, u]), !n || !a || !c ? /* @__PURE__ */ e(Le, {}) : /* @__PURE__ */ e(
+  }, [n, a, u]), !n || !a || !i ? /* @__PURE__ */ e(Le, {}) : /* @__PURE__ */ e(
     Jt,
     {
       contentStyles: { height: "calc(100% - 72px)", minHeight: 300, ":last-child": { pb: 0 } },
       onPrimaryCtaClick: t,
-      primaryCtaLabel: l.primary_cta,
-      subTitle: l.sub_title,
+      primaryCtaLabel: c.primary_cta,
+      subTitle: c.sub_title,
       sx: { height: "100%", ...s },
-      title: l.mini_title,
+      title: c.mini_title,
       children: /* @__PURE__ */ e(Ho, {})
     }
   );
@@ -944,14 +944,14 @@ const Lo = g.memo(Io), Qe = ({
   transactionType: n,
   percentage: o,
   secondaryLabel: r,
-  shouldDisplayPercentage: c
+  shouldDisplayPercentage: i
 }) => {
-  const { availableWidth: a } = nt(), l = g.useRef(null), u = g.useRef(null), i = Ot(Number(Math.abs(o)), {
+  const { availableWidth: a } = nt(), c = g.useRef(null), u = g.useRef(null), l = Ot(Number(Math.abs(o)), {
     style: "percent",
     minimumIntegerDigits: 1
-  }), y = a === 288 && re(s, "0,0.00").length > 10 ? re(s, "0,0") : re(s, "0,0.00"), m = n === "spending" ? o > 0 : o >= 0, _ = n === "spending" ? "error.main" : "success.main", h = n === "spending" ? "success.main" : "text.secondary", p = l?.current, f = u?.current, T = p && f ? p.scrollWidth > f.clientWidth - Wo : !1;
+  }), y = a === 288 && re(s, "0,0.00").length > 10 ? re(s, "0,0") : re(s, "0,0.00"), m = n === "spending" ? o > 0 : o >= 0, _ = n === "spending" ? "error.main" : "success.main", h = n === "spending" ? "success.main" : "text.secondary", p = c?.current, f = u?.current, T = p && f ? p.scrollWidth > f.clientWidth - Wo : !1;
   return /* @__PURE__ */ C(
-    x,
+    S,
     {
       sx: {
         border: 1,
@@ -964,7 +964,7 @@ const Lo = g.memo(Io), Qe = ({
       },
       children: [
         /* @__PURE__ */ C(
-          x,
+          S,
           {
             sx: {
               alignItems: "center",
@@ -973,7 +973,7 @@ const Lo = g.memo(Io), Qe = ({
             },
             children: [
               /* @__PURE__ */ e(pe, { color: "text.secondary", variant: "caption", children: t }),
-              c && /* @__PURE__ */ C(x, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
+              i && /* @__PURE__ */ C(S, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
                 m ? /* @__PURE__ */ e(to, { size: 20, sx: { color: _ } }) : /* @__PURE__ */ e(oo, { size: 20, sx: { color: h } }),
                 /* @__PURE__ */ e(
                   pe,
@@ -983,7 +983,7 @@ const Lo = g.memo(Io), Qe = ({
                       fontWeight: 600
                     },
                     variant: "body2",
-                    children: i
+                    children: l
                   }
                 )
               ] })
@@ -991,7 +991,7 @@ const Lo = g.memo(Io), Qe = ({
           }
         ),
         /* @__PURE__ */ C(
-          x,
+          S,
           {
             ref: u,
             sx: {
@@ -1003,12 +1003,12 @@ const Lo = g.memo(Io), Qe = ({
               /* @__PURE__ */ e(
                 N,
                 {
-                  ref: l,
+                  ref: c,
                   sx: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
                   children: /* @__PURE__ */ e(Ge, { children: y })
                 }
               ),
-              c && a >= 450 && !T && /* @__PURE__ */ e(
+              i && a >= 450 && !T && /* @__PURE__ */ e(
                 pe,
                 {
                   color: m ? _ : h,
@@ -1024,9 +1024,9 @@ const Lo = g.memo(Io), Qe = ({
   );
 }, Oo = A(() => {
   const { trends: t } = R();
-  return /* @__PURE__ */ C(x, { sx: { alignItems: "start", flexDirection: "row", gap: 12 }, children: [
+  return /* @__PURE__ */ C(S, { sx: { alignItems: "start", flexDirection: "row", gap: 12 }, children: [
     /* @__PURE__ */ e(no, { size: 32 }),
-    /* @__PURE__ */ C(x, { children: [
+    /* @__PURE__ */ C(S, { children: [
       /* @__PURE__ */ e(pe, { fontWeight: 600, variant: "body1", children: t.zero_state_content_header }),
       /* @__PURE__ */ e(pe, { color: "text.secondary", variant: "subtitle2", children: t.zero_state_content_description })
     ] })
@@ -1036,13 +1036,13 @@ const Lo = g.memo(Io), Qe = ({
   g.useEffect(() => {
     s || n().finally();
   }, []);
-  const { onEvent: r } = $(), { monthlyCategoryTotals: c, loadMonthlyCategoryTotals: a, monthlyTotalsLoaded: l } = U(), u = {
+  const { onEvent: r } = $(), { monthlyCategoryTotals: i, loadMonthlyCategoryTotals: a, monthlyTotalsLoaded: c } = U(), u = {
     start: eo(/* @__PURE__ */ new Date(), 1),
     end: /* @__PURE__ */ new Date()
-  }, { trends: i } = R(), { selectedAccounts: y, isInitialized: m } = fe();
+  }, { trends: l } = R(), { selectedAccounts: y, isInitialized: m } = fe();
   Ie({
     widgetName: "TrendsMicroWidget",
-    isLoaded: l
+    isLoaded: c
   }), g.useEffect(() => {
     m && a(y, u.start).then(() => {
       r(v.TRENDS_LOAD_WIDGET, {
@@ -1052,25 +1052,25 @@ const Lo = g.memo(Io), Qe = ({
   }, [m, y]);
   const { spendingData: _, incomeData: h } = g.useMemo(
     () => ({
-      spendingData: at(c, u),
-      incomeData: it(c, u)
+      spendingData: at(i, u),
+      incomeData: it(i, u)
     }),
-    [c, u]
-  ), [p, f] = _, [T, S] = h, k = Ye(f.y, p.y), L = Ye(S.y, T.y), E = m && !o?.length, w = () => {
+    [i, u]
+  ), [p, f] = _, [T, x] = h, k = Ye(f.y, p.y), L = Ye(x.y, T.y), E = m && !o?.length, w = () => {
     r(
       E ? v.TRENDS_CLICK_GET_STARTED : v.TRENDS_CLICK_VIEW_MORE
     ), t();
   };
-  return !l || !m ? /* @__PURE__ */ e(Le, {}) : /* @__PURE__ */ e(
+  return !c || !m ? /* @__PURE__ */ e(Le, {}) : /* @__PURE__ */ e(
     io,
     {
       className: "mx-trends-microwidget",
-      ctaLabel: i.micro_primary_cta_label,
+      ctaLabel: l.micro_primary_cta_label,
       onCTAClick: w,
-      subHeader: E ? void 0 : i.micro_subheader,
-      title: i.title,
+      subHeader: E ? void 0 : l.micro_subheader,
+      title: l.title,
       children: E ? /* @__PURE__ */ e(Oo, {}) : /* @__PURE__ */ C(
-        x,
+        S,
         {
           sx: {
             alignItems: "stretch",
@@ -1082,9 +1082,9 @@ const Lo = g.memo(Io), Qe = ({
               qe,
               {
                 percentage: k,
-                secondaryLabel: i.micro_secondary_label,
+                secondaryLabel: l.micro_secondary_label,
                 shouldDisplayPercentage: f.y !== 0 && p.y !== 0,
-                title: i.spending_label,
+                title: l.spending_label,
                 totalAmount: f.y,
                 transactionType: "spending"
               }
@@ -1093,10 +1093,10 @@ const Lo = g.memo(Io), Qe = ({
               qe,
               {
                 percentage: L,
-                secondaryLabel: i.micro_secondary_label,
-                shouldDisplayPercentage: S.y !== 0 && T.y !== 0,
-                title: i.income_label,
-                totalAmount: S.y,
+                secondaryLabel: l.micro_secondary_label,
+                shouldDisplayPercentage: x.y !== 0 && T.y !== 0,
+                title: l.income_label,
+                totalAmount: x.y,
                 transactionType: "income"
               }
             )
@@ -1108,8 +1108,8 @@ const Lo = g.memo(Io), Qe = ({
 }), Go = A(
   ({ isExpanded: t, onClick: s }) => {
     const n = gt();
-    return /* @__PURE__ */ e(mt, { sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(lo, { onClick: s, sx: { justifyContent: "center" }, children: /* @__PURE__ */ C(
-      x,
+    return /* @__PURE__ */ e(mt, { children: /* @__PURE__ */ e(co, { onClick: s, sx: { justifyContent: "center" }, children: /* @__PURE__ */ C(
+      S,
       {
         sx: { color: n.palette.primary.main, flexDirection: "row", alignItems: "center" },
         children: [
@@ -1134,10 +1134,10 @@ const Lo = g.memo(Io), Qe = ({
     name: n,
     transactions: o,
     onClick: r,
-    isLastItem: c = !1,
+    isLastItem: i = !1,
     showDivider: a = !0
   }) => {
-    const { trends: l } = R(), { onEvent: u } = $(), i = ae(), y = `${o.length} ${o.length === 1 ? l.transaction : l.transactions}`, m = () => {
+    const { trends: c } = R(), { onEvent: u } = $(), l = ae(), y = `${o.length} ${o.length === 1 ? c.transaction : c.transactions}`, m = () => {
       r?.(), u(v.TRENDS_CLICK_LIST_ITEM, {
         ...W,
         listItem: n
@@ -1152,8 +1152,8 @@ const Lo = g.memo(Io), Qe = ({
             {
               categoryGuid: s,
               sx: {
-                bgcolor: At(Oe(s, i), 0.15),
-                border: `1px solid ${Oe(s, i)}`,
+                bgcolor: At(Oe(s, l), 0.15),
+                border: `1px solid ${Oe(s, l)}`,
                 color: "text.primary"
               }
             }
@@ -1165,23 +1165,23 @@ const Lo = g.memo(Io), Qe = ({
           title: n
         }
       ),
-      a && /* @__PURE__ */ e(Ne, { component: "li", sx: { ml: c ? 24 : 68 } })
+      a && /* @__PURE__ */ e(Ne, { component: "li", sx: { ml: i ? 24 : 68 } })
     ] }, s);
   }
 ), Bo = A(
   ({ availableHeight: t = 0, onCategoryClick: s }) => {
-    const { collapsedCategories: n, visibleCategories: o, setVisibleListLength: r } = ye(), { isLargeDesktop: c, isDesktop: a } = j(), { trends: l } = R(), { onEvent: u } = $(), [i, y] = g.useState(!1), m = a || c;
+    const { collapsedCategories: n, visibleCategories: o, setVisibleListLength: r } = ye(), { isLargeDesktop: i, isDesktop: a } = j(), { trends: c } = R(), { onEvent: u } = $(), [l, y] = g.useState(!1), m = a || i;
     g.useEffect(() => {
       const p = Math.floor(t / 64) - 1, f = o.length + n.length;
       p !== o.length && (r(m ? Math.max(p, 5) : 5), y(p >= f));
     }, [t]);
     const _ = () => {
-      y(!i), u(v.TRENDS_CLICK_VIEW_MORE, {
+      y(!l), u(v.TRENDS_CLICK_VIEW_MORE, {
         ...W
       });
-    }, h = o.length + (i ? n.length : 0);
-    return /* @__PURE__ */ C(x, { sx: { bgColor: "background.paper", width: "100%" }, children: [
-      /* @__PURE__ */ e(x, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(Ge, { children: l.categories }) }),
+    }, h = o.length + (l ? n.length : 0);
+    return /* @__PURE__ */ C(S, { sx: { width: "100%" }, children: [
+      /* @__PURE__ */ e(S, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(Ge, { children: c.categories }) }),
       /* @__PURE__ */ C(We, { children: [
         o.map((p, f) => /* @__PURE__ */ e(
           Je,
@@ -1194,10 +1194,10 @@ const Lo = g.memo(Io), Qe = ({
           p.guid
         )),
         /* @__PURE__ */ e(
-          co,
+          lo,
           {
             component: "li",
-            in: i,
+            in: l,
             sx: { "&.MuiCollapse-root .MuiListItemButton-root": { paddingLeft: 24 } },
             children: /* @__PURE__ */ e(We, { children: n.map((p, f) => {
               const T = o.length + f;
@@ -1214,27 +1214,27 @@ const Lo = g.memo(Io), Qe = ({
             }) })
           }
         ),
-        n.length > 0 && /* @__PURE__ */ e(Go, { isExpanded: i, onClick: _ })
+        n.length > 0 && /* @__PURE__ */ e(Go, { isExpanded: l, onClick: _ })
       ] })
     ] });
   }
 ), Po = ({ beats: t, onInsightCardClick: s }) => {
-  const { onEvent: n } = $(), { isMobile: o, isDesktop: r, isLargeDesktop: c } = j(), { beatStore: a, endpoint: l, sessionToken: u } = Be(), i = r || c, y = i || o ? 1 : 2, m = () => null, _ = (S) => {
-    s?.(S), n(v.TRENDS_CLICK_INSIGHT, W);
-  }, h = i ? 200 : 170, p = i ? 170 : 124, f = i ? 56 : 0, T = t.length > 0 ? h + f : p;
-  return /* @__PURE__ */ e(mo, { sx: { height: T }, children: /* @__PURE__ */ e(
+  const { onEvent: n } = $(), { isMobile: o, isDesktop: r, isLargeDesktop: i } = j(), { beatStore: a, endpoint: c, sessionToken: u } = Be(), l = r || i, y = l || o ? 1 : 2, m = () => null, _ = (T) => {
+    s?.(T), n(v.TRENDS_CLICK_INSIGHT, W);
+  }, h = l ? 200 : 170, p = l ? 170 : 124, f = t.length > 0 ? h : p;
+  return /* @__PURE__ */ e(mo, { sx: { height: f }, children: /* @__PURE__ */ e(
     jt,
     {
       areBeatsLoading: a.isLoading,
       beats: t,
-      endpoint: l,
+      endpoint: c,
       headerSx: { p: 0 },
       logOutUser: m,
       onCardClick: _,
       showBorder: !0,
       showCTAColocatedWithText: !1,
       showCarouselControls: !0,
-      showHeader: i,
+      showHeader: l,
       showIcon: !0,
       showWithMargin: !1,
       token: u,
@@ -1247,7 +1247,7 @@ const Lo = g.memo(Io), Qe = ({
   const { onEvent: n } = $(), {
     categoryDetailsChartData: { monthlyAmounts: o, tooltipLabels: r }
   } = ye();
-  return /* @__PURE__ */ e(x, { sx: { pt: 12, width: "100%" }, children: /* @__PURE__ */ e(
+  return /* @__PURE__ */ e(S, { sx: { pt: 12, width: "100%" }, children: /* @__PURE__ */ e(
     Ve,
     {
       baseline: "min",
@@ -1277,15 +1277,15 @@ const Lo = g.memo(Io), Qe = ({
     }
   ) });
 }), $o = A(() => {
-  const t = gt(), { is_mobile_webview: s } = st(), { isDesktop: n, isSmallTablet: o, isTablet: r } = j(), { common: c, trends: a } = R(), { selectedCategoryData: l, selectedDateRangeMonthRange: u } = ye(), { sortedTransactions: i } = ve(), [y, m] = g.useState(null);
-  if (!l)
+  const t = gt(), { is_mobile_webview: s } = st(), { isDesktop: n, isSmallTablet: o, isTablet: r } = j(), { common: i, trends: a } = R(), { selectedCategoryData: c, selectedDateRangeMonthRange: u } = ye(), { sortedTransactions: l } = ve(), [y, m] = g.useState(null);
+  if (!c)
     return null;
-  const { guid: _, name: h, is_income: p, totalAmount: f } = l, T = Oe(_, t), S = p ? a.income_label : a.spending_label, k = ` ${l.transactions.length === 1 ? a.transaction : a.transactions} (${l.transactions.length})`, L = g.useMemo(
-    () => i.find((M) => M.guid === y),
-    [y, i]
-  ), E = i.length > 0 && !s && (n || r && !o), w = (M) => M.category_guid === _ || M.top_level_category_guid === _;
-  return /* @__PURE__ */ C(x, { sx: { alignItems: "center", height: "100%" }, children: [
-    /* @__PURE__ */ C(x, { sx: { borderRadius: 0, pb: 4, pt: 16, px: 12, width: "100%" }, children: [
+  const { guid: _, name: h, is_income: p, totalAmount: f } = c, T = Oe(_, t), x = p ? a.income_label : a.spending_label, k = ` ${c.transactions.length === 1 ? a.transaction : a.transactions} (${c.transactions.length})`, L = g.useMemo(
+    () => l.find((M) => M.guid === y),
+    [y, l]
+  ), E = l.length > 0 && !s && (n || r && !o), w = (M) => M.category_guid === _ || M.top_level_category_guid === _;
+  return /* @__PURE__ */ C(S, { sx: { alignItems: "center", height: "100%" }, children: [
+    /* @__PURE__ */ C(S, { sx: { borderRadius: 0, pb: 4, pt: 16, px: 12, width: "100%" }, children: [
       /* @__PURE__ */ e(We, { sx: { px: 12 }, children: /* @__PURE__ */ C(mt, { children: [
         /* @__PURE__ */ e(ho, { children: /* @__PURE__ */ e(we, { categoryGuid: _ }) }),
         /* @__PURE__ */ e(
@@ -1299,14 +1299,14 @@ const Lo = g.memo(Io), Qe = ({
         ),
         /* @__PURE__ */ e(F, { component: "div", variant: "h3", children: re(Math.abs(f), "0,0.00") })
       ] }) }),
-      /* @__PURE__ */ e(Fo, { chartColor: T, chartLabel: S }),
-      /* @__PURE__ */ C(x, { alignItems: "center", direction: "row", justifyContent: "space-between", sx: { mx: 12 }, children: [
+      /* @__PURE__ */ e(Fo, { chartColor: T, chartLabel: x }),
+      /* @__PURE__ */ C(S, { alignItems: "center", direction: "row", justifyContent: "space-between", sx: { mx: 12 }, children: [
         /* @__PURE__ */ e(F, { bold: !0, variant: "body1", children: k }),
         E && /* @__PURE__ */ e(go, { filter: w })
       ] })
     ] }),
     /* @__PURE__ */ e(
-      lt,
+      ct,
       {
         bgcolor: "transparent",
         filter: w,
@@ -1317,7 +1317,7 @@ const Lo = g.memo(Io), Qe = ({
     /* @__PURE__ */ e(
       Pe,
       {
-        ariaLabelClose: c.close_aria,
+        ariaLabelClose: i.close_aria,
         isOpen: !!L,
         onClose: () => m(""),
         title: a.transaction,
@@ -1329,14 +1329,14 @@ const Lo = g.memo(Io), Qe = ({
   const n = it(t, s), o = at(t, s);
   return [n, o].filter((r) => r.length > 0);
 }, Ko = (t, s) => {
-  const [n, o] = t, r = n, c = o ?? n, a = [];
+  const [n, o] = t, r = n, i = o ?? n, a = [];
   if (r) {
-    const l = r.reduce((u, i) => u + i.y, 0);
-    a.push({ label: s.income_label, amount: l });
+    const c = r.reduce((u, l) => u + l.y, 0);
+    a.push({ label: s.income_label, amount: c });
   }
-  if (c) {
-    const l = c.reduce((u, i) => u + i.y, 0);
-    a.push({ label: s.spending_label, amount: l });
+  if (i) {
+    const c = i.reduce((u, l) => u + l.y, 0);
+    a.push({ label: s.spending_label, amount: c });
   }
   return a;
 }, Yo = ({
@@ -1345,7 +1345,7 @@ const Lo = g.memo(Io), Qe = ({
   selectedDateRange: n,
   totals: o
 }) => {
-  const r = ae(), { onEvent: c } = $(), { trends: a } = R(), { isSmallMobile: l, isMobile: u, isSmallTablet: i, isTablet: y } = j(), m = [r.palette.chart?.chart1, r.palette.chart?.chart2], _ = zo(o, n), h = Ko(_, a), [p, f] = g.useState(0), T = 458, S = 195, k = 56, L = u || l ? S : i || y ? T : p;
+  const r = ae(), { onEvent: i } = $(), { trends: a } = R(), { isSmallMobile: c, isMobile: u, isSmallTablet: l, isTablet: y } = j(), m = [r.palette.chart?.chart1, r.palette.chart?.chart2], _ = zo(o, n), h = Ko(_, a), [p, f] = g.useState(0), T = 458, x = 195, k = 56, L = u || c ? x : l || y ? T : p;
   return g.useEffect(() => {
     const w = Math.max(t - k, s);
     f(w);
@@ -1359,7 +1359,7 @@ const Lo = g.memo(Io), Qe = ({
       height: L,
       labels: h,
       onItemClick: () => {
-        c(v.TRENDS_CLICK_CHART, W);
+        i(v.TRENDS_CLICK_CHART, W);
       },
       showArea: !0,
       showAxisHighlight: !0,
@@ -1412,22 +1412,22 @@ const Lo = g.memo(Io), Qe = ({
   onClickHandler: s ? n : void 0,
   primaryButton: s ? t.empty_state_primary : void 0
 }), Zo = ({ onBackClick: t, onInsightCardClick: s, sx: n }) => {
-  const { onEvent: o } = $(), { config: r } = st(), { isDesktop: c, isLargeDesktop: a, isMobile: l } = j(), { isAccountDataLoaded: u, loadAccountData: i, visibleAccounts: y } = De(), {
+  const { onEvent: o } = $(), { config: r } = st(), { isDesktop: i, isLargeDesktop: a, isMobile: c } = j(), { isAccountDataLoaded: u, loadAccountData: l, visibleAccounts: y } = De(), {
     categoriesLoaded: m,
     loadCategories: _,
     loadDateRangeCategoryTotals: h,
     loadMonthlyCategoryTotals: p,
     monthlyCategoryTotals: f,
     monthlyTotalsLoaded: T
-  } = U(), { isTransactionDataLoaded: S, loadTransactionData: k, setFilter: L } = ve(), { selectedCategoryData: E, selectedDateRange: w, setSelectedCategoryData: M, setSelectedDateRange: ie } = ye(), { isInitialized: X, selectedAccounts: V, selectedAccountGuids: Z } = fe(), { trends: O, connect: G } = R(), { beatStore: Q } = Be(), ce = po() && r.show_insights_widget_in_master, q = c || a, [le, z] = g.useState(!1), [J, ne] = g.useState(!1), [ee, te] = g.useState("Chart"), [se, de] = g.useState(""), [ue, me] = g.useState(window.innerHeight), D = q ? 56 : 0, B = ue - 208, d = ue - (ce ? 550 + D : 266), [b, I] = g.useState(!1), K = r.show_connections_widget_in_master;
+  } = U(), { isTransactionDataLoaded: x, loadTransactionData: k, setFilter: L } = ve(), { selectedCategoryData: E, selectedDateRange: w, setSelectedCategoryData: M, setSelectedDateRange: ie } = ye(), { isInitialized: X, selectedAccounts: V, selectedAccountGuids: Z } = fe(), { trends: O, connect: G } = R(), { beatStore: Q } = Be(), le = po() && r.show_insights_widget_in_master, q = i || a, [ce, z] = g.useState(!1), [J, ne] = g.useState(!1), [ee, te] = g.useState("Chart"), [se, de] = g.useState(""), [ue, me] = g.useState(window.innerHeight), D = q ? 56 : 0, B = ue - 208, d = ue - (le ? 550 + D : 266), [b, I] = g.useState(!1), K = r.show_connections_widget_in_master;
   Ie({
     widgetName: "TrendsWidget",
-    isLoaded: le
+    isLoaded: ce
   });
   const _e = g.useMemo(() => J ? Q.getFilteredBeats({ templates: Uo }) : [], [J]);
   g.useEffect(() => {
     const H = () => me(window.innerHeight);
-    return window.addEventListener("resize", H), u || i().finally(), m || _().finally(), S || k().finally(), () => window.removeEventListener("resize", H);
+    return window.addEventListener("resize", H), u || l().finally(), m || _().finally(), x || k().finally(), () => window.removeEventListener("resize", H);
   }, []), g.useEffect(() => {
     X && u && (Q.loadBeats().finally(() => ne(!0)), h(V, w.start, w.end).then(() => {
       p(
@@ -1482,7 +1482,7 @@ const Lo = g.memo(Io), Qe = ({
   }, St = () => {
     de(""), o(v.TRENDS_CLICK_ALL_CATEGORIES, W);
   };
-  if (!X || !u || !le || !T)
+  if (!X || !u || !ce || !T)
     return /* @__PURE__ */ e(Le, {});
   const Fe = y.length === 0 || f.length === 0, be = Xo(O, K, Me);
   return /* @__PURE__ */ C(
@@ -1490,25 +1490,25 @@ const Lo = g.memo(Io), Qe = ({
     {
       calendarActions: { onRangeChanged: _t },
       dateRange: w,
-      dateRangeVariant: l ? "timeframetabs" : "timeframebuttons",
+      dateRangeVariant: c ? "timeframetabs" : "timeframebuttons",
       onAccountsFilterClick: bt,
       onBackClick: t,
       sx: n,
       title: O.title,
       children: [
         /* @__PURE__ */ C(
-          x,
+          S,
           {
             sx: {
-              px: l ? 0 : 48
+              px: c ? 0 : 48
             },
             children: [
               /* @__PURE__ */ C(
-                x,
+                S,
                 {
                   flexDirection: "row",
                   justifyContent: "space-between",
-                  sx: { px: l ? 16 : 0, py: 16 },
+                  sx: { px: c ? 16 : 0, py: 16 },
                   children: [
                     /* @__PURE__ */ e(
                       yt,
@@ -1521,7 +1521,7 @@ const Lo = g.memo(Io), Qe = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ e(x, { alignItems: "center", flexDirection: "row", sx: { pb: 8 }, width: "100%", children: /* @__PURE__ */ e(N, { flexGrow: 1, children: se && /* @__PURE__ */ C(Te, { onClick: St, sx: { p: 0, pr: 5 }, children: [
+              /* @__PURE__ */ e(S, { alignItems: "center", flexDirection: "row", sx: { pb: 8 }, width: "100%", children: /* @__PURE__ */ e(N, { flexGrow: 1, children: se && /* @__PURE__ */ C(Te, { onClick: St, sx: { p: 0, pr: 5 }, children: [
                 /* @__PURE__ */ e(ao, {}),
                 O.all_categories
               ] }) }) }),
@@ -1536,7 +1536,7 @@ const Lo = g.memo(Io), Qe = ({
                   sx: { height: B, maxWidth: 432 }
                 }
               ),
-              !Fe && /* @__PURE__ */ C(x, { flexDirection: q ? "row" : "column", gap: q ? 48 : 16, children: [
+              !Fe && /* @__PURE__ */ C(S, { flexDirection: q ? "row" : "column", gap: q ? 48 : 16, children: [
                 ee === "Chart" && /* @__PURE__ */ C(wt, { children: [
                   /* @__PURE__ */ e(N, { sx: { width: q ? "68%" : "100%" }, children: /* @__PURE__ */ e(
                     jo,
@@ -1547,8 +1547,8 @@ const Lo = g.memo(Io), Qe = ({
                       totals: f
                     }
                   ) }),
-                  /* @__PURE__ */ C(x, { gap: 16, sx: { width: q ? "32%" : "100%" }, children: [
-                    ce && J && _e.length > 0 && /* @__PURE__ */ e(
+                  /* @__PURE__ */ C(S, { gap: 16, sx: { width: q ? "32%" : "100%" }, children: [
+                    le && J && _e.length > 0 && /* @__PURE__ */ e(
                       Vo,
                       {
                         beats: _e,
@@ -1599,11 +1599,11 @@ const Lo = g.memo(Io), Qe = ({
       ]
     }
   );
-}, cs = A(Zo);
+}, ls = A(Zo);
 export {
   rs as TrendsFullWidget,
   is as TrendsMicroWidget,
   as as TrendsMiniWidget,
   us as TrendsStore,
-  cs as TrendsWidget
+  ls as TrendsWidget
 };

package/package.json

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