@mx-cartographer/experiences 7.10.34 → 7.10.35

package/dist/trends/index.es.js

@@ -1,66 +1,68 @@
 import { jsxs as C, jsx as e, Fragment as St } from "react/jsx-runtime";
 import g, { useRef as wt, useState as xt, useEffect as vt } from "react";
 import { observer as M } from "mobx-react-lite";
-import { CategoryIcon as ve, Text as Q, Icon as He, H3 as Oe, P as ye, ChevronRightIcon as Dt } from "@mxenabled/mxui";
+import { CategoryIcon as ve, Text as Q, Icon as Ne, H3 as Oe, P as ye, ChevronRightIcon as Dt } from "@mxenabled/mxui";
 import W from "@mui/material/Box";
-import w from "@mui/material/Stack";
+import x from "@mui/material/Stack";
 import Se from "@mui/material/Button";
 import { addSeconds as qe } from "date-fns/addSeconds";
 import { differenceInCalendarMonths as we } from "date-fns/differenceInCalendarMonths";
-import Lt from "numeral";
-import { useTheme as de } from "@mui/material/styles";
-import { useItemTooltip as It, ChartsTooltipContainer as Et } from "@mui/x-charts/ChartsTooltip";
-import { LineChart as Mt } from "@mui/x-charts/LineChart";
+import It from "numeral";
+import { useTheme as de, styled as Lt } from "@mui/material/styles";
+import { useItemTooltip as Et, ChartsTooltipContainer as Mt } from "@mui/x-charts/ChartsTooltip";
+import { LineChart as At } from "@mui/x-charts/LineChart";
 import { u as q } from "../useScreenSize-B6JyS_Lj.mjs";
-import { u as At } from "../useDimensions-CeDR9V8N.mjs";
+import { u as Rt } from "../useDimensions-CeDR9V8N.mjs";
 import Je from "@mui/material/Card";
 import et from "@mui/material/CardContent";
-import Ne from "@mui/material/Divider";
+import He from "@mui/material/Divider";
 import Ve from "@mui/material/Grid";
-import { u as A, m as J, g as z, b as Ce, h as De, d as Le, v as _e, p as tt, f as Ge, a as ot } from "../hooks-DWJQ4phS.mjs";
+import { u as A, m as J, g as $, b as Ce, h as De, d as Ie, B as _e, p as tt, f as Ge, a as ot } from "../hooks-0kWPTHNb.mjs";
 import { b as nt } from "../Localization-2MODESHW.mjs";
 import { C as xe } from "../CurrencyText-C-85TnUF.mjs";
-import { C as Re, b as Fe, c as Rt } from "../Category-CevNQ03n.mjs";
+import { C as Re, b as Fe, c as kt } from "../Category-CevNQ03n.mjs";
 import { f as Z, D as B } from "../DateFormats-Cs-NbEZ7.mjs";
-import { f as oe, a as kt } from "../NumberFormatting-DjTD0t3W.mjs";
-import { c as Ht, a as ze, g as Nt, L as st } from "../TrendsStore-Ys6BY_Uo.mjs";
-import { T as es } from "../TrendsStore-Ys6BY_Uo.mjs";
-import { c as Wt, i as Ot, d as Gt, e as Bt, b as rt, g as at, f as $e } from "../SpendingData-C3bN-37j.mjs";
-import Pt from "@mui/material/ToggleButton";
-import Vt from "@mui/material/ToggleButtonGroup";
+import { f as oe, a as Nt } from "../NumberFormatting-DjTD0t3W.mjs";
+import { c as Ht, a as $e, g as Wt, L as st } from "../TrendsStore-Ys6BY_Uo.mjs";
+import { T as ds } from "../TrendsStore-Ys6BY_Uo.mjs";
+import { c as Ot, i as Gt, d as Bt, e as Pt, b as rt, g as at, f as ze } from "../SpendingData-C3bN-37j.mjs";
+import Vt from "@mui/material/ToggleButton";
+import Ft from "@mui/material/ToggleButtonGroup";
 import { parseISO as it } from "date-fns/parseISO";
 import { H as ke } from "../HeaderCell-DjuifqHJ.mjs";
-import { T as G, b as Ft } from "../ViewMoreMicroCard-DTZOxZ6a.mjs";
-import { DataGridPro as zt } from "@mui/x-data-grid-pro";
+import { T as G, b as $t } from "../ViewMoreMicroCard-BCYgXtiG.mjs";
+import { useGridApiContext as zt, useGridRootProps as Kt, DataGridPro as Yt } from "@mui/x-data-grid-pro";
+import jt from "@mui/material/Badge";
+import Ut from "@mui/material/IconButton";
 import { A as v } from "../Analytics-i5h6BxR1.mjs";
-import { T as lt } from "../TransactionList-CmZSDhKW.mjs";
-import { T as ct } from "../TransactionDetails-c7ncR7HI.mjs";
+import { T as lt } from "../TransactionList-DrtItQUk.mjs";
+import { T as ct } from "../TransactionDetails-9cwzBxvP.mjs";
 import { D as We } from "../Drawer-DV4NTsFg.mjs";
-import { u as Ie } from "../useWidgetLoadTimer-BbV8q0k6.mjs";
+import { u as Le } from "../useWidgetLoadTimer-yzSfT9dS.mjs";
 import { L as Ee } from "../Loader-D3rjKx72.mjs";
-import { W as dt } from "../WidgetContainer-W9s0Jt3H.mjs";
-import { L as Be } from "../LineChart-BDTOgWUr.mjs";
-import { M as $t } from "../MiniWidgetContainer-BPuE3cfO.mjs";
-import { subMonths as Kt } from "date-fns";
-import { TrendingUp as Yt, TrendingDown as jt, MultilineChart as Ut, ExpandLess as Xt, ExpandMore as Zt, ArrowBack as Qt } from "@mxenabled/mx-icons";
-import { M as qt } from "../MicroWidgetContainer-Cg0wb2gg.mjs";
-import Jt from "@mui/material/Collapse";
-import eo from "@mui/material/List";
-import to from "@mui/material/ListItem";
-import oo from "@mui/material/ListItemButton";
-import no from "@mui/material/ListItemIcon";
-import so from "@mui/material/ListItemText";
+import { W as dt } from "../WidgetContainer-BSrpqh6M.mjs";
+import { L as Be } from "../LineChart-Dlp9RAJz.mjs";
+import { M as Xt } from "../MiniWidgetContainer-B4gbUTJ2.mjs";
+import { subMonths as Zt } from "date-fns";
+import { TrendingUp as Qt, TrendingDown as qt, MultilineChart as Jt, ExpandLess as eo, ExpandMore as to, ArrowBack as oo } from "@mxenabled/mx-icons";
+import { M as no } from "../MicroWidgetContainer-jvYZ5bb6.mjs";
+import so from "@mui/material/Collapse";
+import ro from "@mui/material/List";
+import ao from "@mui/material/ListItem";
+import io from "@mui/material/ListItemButton";
+import lo from "@mui/material/ListItemIcon";
+import co from "@mui/material/ListItemText";
 import ut from "@mui/material/styles/useTheme";
-import { Stack as ro } from "@mui/material";
-import ao from "@mui/material/Paper";
-import { b as io } from "../CategoryUtil-Cufq3fxg.mjs";
-import { E as lo } from "../ExportCsvAction-BqNTIBjm.mjs";
-import { u as co } from "../useInsightsEnabled-B4AlxgOP.mjs";
-import { E as uo } from "../EmptyState-DHAkGsjk.mjs";
-import { b as ho } from "../GlobalAccountFilter-CjTLppI0.mjs";
-const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
+import { Stack as uo } from "@mui/material";
+import mo from "@mui/material/Paper";
+import { b as go } from "../CategoryUtil-Cufq3fxg.mjs";
+import { E as ho } from "../ExportCsvAction-B5Ra5duE.mjs";
+import { u as po } from "../useInsightsEnabled-bDCTNOJS.mjs";
+import { E as fo } from "../EmptyState-DHAkGsjk.mjs";
+import { b as yo } from "../GlobalAccountFilter-Cun09DE7.mjs";
+const mt = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
   const { categories: n } = A(), { getCategoryName: o } = J(), s = o(t);
-  return /* @__PURE__ */ C(w, { alignItems: "center", direction: "column", gap: "8", justifyContent: "center", mb: 4, children: [
+  return /* @__PURE__ */ C(x, { alignItems: "center", direction: "column", gap: "8", justifyContent: "center", mb: 4, children: [
     /* @__PURE__ */ e(
       W,
       {
@@ -72,23 +74,23 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
     ),
     /* @__PURE__ */ e(Q, { variant: "Body", children: s })
   ] });
-}, go = ({
+}, Co = ({
   categoryGuids: { guid: t, topLevelGuid: r },
   hoveredAreaData: n,
   cursorPosition: o,
   chartContainerRef: s
 }) => {
-  const c = de(), a = wt(null), [u, d] = xt({ x: o.x, y: o.y });
+  const l = de(), a = wt(null), [u, d] = xt({ x: o.x, y: o.y });
   if (vt(() => {
     (() => {
-      const m = a.current, _ = s.current;
-      if (!m || !_) return;
-      const h = m.getBoundingClientRect(), p = _.getBoundingClientRect();
-      let f = o.x, x = o.y;
-      f + h.width * 2 > p.right ? f = o.x - h.width : f - h.width < p.left && (f = o.x), x + h.height * 2 > p.bottom && (x = o.y - h.height), d({ x: f, y: x });
+      const h = a.current, _ = s.current;
+      if (!h || !_) return;
+      const m = h.getBoundingClientRect(), p = _.getBoundingClientRect();
+      let f = o.x, T = o.y;
+      f + m.width * 2 > p.right ? f = o.x - m.width : f - m.width < p.left && (f = o.x), T + m.height * 2 > p.bottom && (T = o.y - m.height), d({ x: f, y: T });
     })();
   }, [o, s]), !n) return null;
-  const i = n.reduce((y, m) => y + m.y, 0);
+  const i = n.reduce((y, h) => y + h.y, 0);
   return /* @__PURE__ */ e(
     Je,
     {
@@ -102,15 +104,15 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
       },
       children: /* @__PURE__ */ C(et, { children: [
         /* @__PURE__ */ C(W, { alignItems: "center", display: "flex", flexDirection: "column", children: [
-          /* @__PURE__ */ e(ht, { categoryGuid: t, topLevelCategoryGuid: r }),
+          /* @__PURE__ */ e(mt, { categoryGuid: t, topLevelCategoryGuid: r }),
           /* @__PURE__ */ e(Q, { variant: "Small", children: `${n.length}-month total` }),
           /* @__PURE__ */ e(xe, { amount: i, bold: !0, formatString: "0,0", variant: "body2" })
         ] }),
-        /* @__PURE__ */ e(Ne, { sx: { my: 16, width: "100%" } }),
-        /* @__PURE__ */ e(Ve, { 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(He, { sx: { my: 16, width: "100%" } }),
+        /* @__PURE__ */ e(Ve, { container: !0, children: n.map((y, h) => /* @__PURE__ */ C(g.Fragment, { children: [
+          h > 0 && h % 3 === 0 && /* @__PURE__ */ e(He, { sx: { my: 16, width: "100%" } }),
           /* @__PURE__ */ e(Ve, { item: !0, xs: 4, children: /* @__PURE__ */ C(W, { alignItems: "center", display: "flex", flexDirection: "column", children: [
-            /* @__PURE__ */ e(Q, { color: c.palette.text.secondary, variant: "XSmall", children: y.x }),
+            /* @__PURE__ */ e(Q, { color: l.palette.text.secondary, variant: "XSmall", children: y.x }),
             /* @__PURE__ */ e(
               xe,
               {
@@ -121,21 +123,21 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
               }
             )
           ] }) })
-        ] }, m)) })
+        ] }, h)) })
       ] })
     }
   );
-}, mo = M(go), po = ({
+}, _o = M(Co), bo = ({
   sx: t,
   categoryGuids: r,
   hoveredLegend: n,
   legendRef: o,
   onHoverLegend: s,
-  onClickLegend: c
+  onClickLegend: l
 }) => {
   const { isMobile: a } = q(), { getCategoryName: u } = J();
   return /* @__PURE__ */ e(
-    w,
+    x,
     {
       direction: "row",
       flexWrap: "wrap",
@@ -144,11 +146,11 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
       ref: o,
       sx: t,
       children: r.map(({ guid: d, top_level_guid: i }) => {
-        const y = n === d, m = Re[d], _ = Re[i], h = m ?? _ ?? Re.default, p = h + "33";
+        const y = n === d, h = Re[d], _ = Re[i], m = h ?? _ ?? Re.default, p = m + "33";
         return /* @__PURE__ */ C(
           Se,
           {
-            onClick: () => c(d),
+            onClick: () => l(d),
             onMouseEnter: () => s(d),
             onMouseLeave: () => s(null),
             sx: {
@@ -171,7 +173,7 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
                     height: 16,
                     marginRight: a ? 5 : 10,
                     borderRadius: "2px",
-                    backgroundColor: n ? y ? h : p : h
+                    backgroundColor: n ? y ? m : p : m
                   }
                 }
               ),
@@ -183,125 +185,125 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
       })
     }
   );
-}, fo = ({
+}, To = ({
   categoryGuids: { guid: t, topLevelGuid: r },
   series: n,
   xData: o
 }) => {
-  const s = It(), c = de();
+  const s = Et(), l = de();
   if (!s?.identifier) return null;
   const { dataIndex: a, seriesId: u } = s.identifier;
   if (a == null || !u) return null;
-  const i = n.find((m) => m.id === u)?.data?.[a], y = o?.[a];
+  const i = n.find((h) => h.id === u)?.data?.[a], y = o?.[a];
   return i === void 0 || !y ? null : /* @__PURE__ */ e(Je, { sx: { pt: 4, px: 8 }, children: /* @__PURE__ */ e(et, { children: /* @__PURE__ */ C(W, { alignItems: "center", display: "flex", flexDirection: "column", children: [
-    /* @__PURE__ */ e(ht, { categoryGuid: t, topLevelCategoryGuid: r }),
-    /* @__PURE__ */ e(Q, { color: c.palette.text.secondary, variant: "Small", children: Z(y, B.MONTH_SHORT_YEAR) }),
+    /* @__PURE__ */ e(mt, { categoryGuid: t, topLevelCategoryGuid: r }),
+    /* @__PURE__ */ e(Q, { color: l.palette.text.secondary, variant: "Small", children: Z(y, B.MONTH_SHORT_YEAR) }),
     /* @__PURE__ */ e(xe, { amount: String(i), bold: !0, formatString: "0,0", variant: "Body" })
   ] }) }) });
-}, yo = ({
+}, So = ({
   onHoverArea: t,
   onHoverPoint: r,
   onHoverLegend: n,
   onClickLegend: o,
   stackedDatasets: s,
-  unstackedDatasets: c = [],
+  unstackedDatasets: l = [],
   availableHeight: a = 0,
   minimumHeight: u = 350
 }) => {
-  const d = de(), { isMobile: i } = q(), [y, { height: m }] = At(), _ = g.useRef(null), [h, p] = g.useState(0);
+  const d = de(), { isMobile: i } = q(), [y, { height: h }] = Rt(), _ = g.useRef(null), [m, p] = g.useState(0);
   g.useEffect(() => {
-    const l = Math.max(a - m, u);
-    p(l);
-  }, [a, m]);
-  const [f, x] = g.useState(null), [b, R] = g.useState({
+    const c = Math.max(a - h, u);
+    p(c);
+  }, [a, h]);
+  const [f, T] = g.useState(null), [S, R] = g.useState({
     hoveredSeriesId: null,
     hoveredAreaData: null,
     isAreaHovered: !1,
     cursorPos: { x: 0, y: 0 }
-  }), { hoveredSeriesId: E, hoveredAreaData: S, isAreaHovered: k, cursorPos: H } = b, $ = k && E && S, P = !$, K = [...s, ...c], I = K[0]?.dataset.length ?? 0, te = K.flatMap((l) => l.dataset.map((T) => T.x)), O = K.flatMap((l) => l.dataset.map((T) => T.y)), ne = s[0]?.dataset?.map(
-    (l, T) => s.reduce((L, U) => L + U.dataset[T]?.y || 0, 0)
+  }), { hoveredSeriesId: E, hoveredAreaData: w, isAreaHovered: k, cursorPos: N } = S, z = k && E && w, P = !z, K = [...s, ...l], L = K[0]?.dataset.length ?? 0, te = K.flatMap((c) => c.dataset.map((b) => b.x)), O = K.flatMap((c) => c.dataset.map((b) => b.y)), ne = s[0]?.dataset?.map(
+    (c, b) => s.reduce((I, U) => I + U.dataset[b]?.y || 0, 0)
   ) ?? [0], se = Math.max(...ne), X = Math.max(
-    ...c.flatMap((l) => l.dataset.map((T) => T.y))
-  ), ue = Math.floor(Math.min(...O) / 100) * 100, he = Math.ceil(Math.max(se, X) / 100) * 100, V = s.map((l, T) => ({
-    id: `stacked-${T}`,
-    guid: l.category_guid,
-    top_level_guid: l.top_level_category_guid,
+    ...l.flatMap((c) => c.dataset.map((b) => b.y))
+  ), ue = Math.floor(Math.min(...O) / 100) * 100, me = Math.ceil(Math.max(se, X) / 100) * 100, V = s.map((c, b) => ({
+    id: `stacked-${b}`,
+    guid: c.category_guid,
+    top_level_guid: c.top_level_category_guid,
     area: !0,
-    color: s[T].category_color ?? d.palette.primary.main,
-    data: l.dataset.map((L) => L.y),
-    label: s[T].category_name,
+    color: s[b].category_color ?? d.palette.primary.main,
+    data: c.dataset.map((I) => I.y),
+    label: s[b].category_name,
     stack: "total",
     type: "line",
     highlightScope: { highlight: "item" },
-    valueFormatter: (L) => oe(L, "0,0")
-  })), re = c.map((l, T) => ({
-    id: `unstacked-${T}`,
-    guid: l.category_guid,
-    top_level_guid: l.top_level_category_guid,
+    valueFormatter: (I) => oe(I, "0,0")
+  })), re = l.map((c, b) => ({
+    id: `unstacked-${b}`,
+    guid: c.category_guid,
+    top_level_guid: c.top_level_category_guid,
     area: !1,
-    color: l.category_color,
-    data: l.dataset.map((L) => L.y),
-    label: l.category_name,
+    color: c.category_color,
+    data: c.dataset.map((I) => I.y),
+    label: c.category_name,
     type: "line",
-    valueFormatter: (L) => oe(L, "0,0")
+    valueFormatter: (I) => oe(I, "0,0")
   })), Y = [...V, ...re], ge = [
-    ...V.map(({ guid: l, top_level_guid: T }) => ({
-      guid: l,
-      top_level_guid: T
+    ...V.map(({ guid: c, top_level_guid: b }) => ({
+      guid: c,
+      top_level_guid: b
     })),
-    ...re.map(({ guid: l, top_level_guid: T }) => ({
-      guid: l,
-      top_level_guid: T
+    ...re.map(({ guid: c, top_level_guid: b }) => ({
+      guid: c,
+      top_level_guid: b
     }))
-  ], j = (l) => {
-    const L = l.startsWith("stacked-") ? s[parseInt(l.split("-")[1])] : c[parseInt(l.split("-")[1])];
+  ], j = (c) => {
+    const I = c.startsWith("stacked-") ? s[parseInt(c.split("-")[1])] : l[parseInt(c.split("-")[1])];
     return {
-      guid: L?.category_guid,
-      topLevelGuid: L?.top_level_category_guid
+      guid: I?.category_guid,
+      topLevelGuid: I?.top_level_category_guid
     };
-  }, ae = (l) => {
-    x(l), n?.(l ?? "");
-  }, me = (l) => {
-    o?.(l ?? "");
+  }, ae = (c) => {
+    T(c), n?.(c ?? "");
+  }, he = (c) => {
+    o?.(c ?? "");
   }, ie = () => {
-    const l = j(String(E)).guid;
-    l && o?.(l);
-  }, le = (l) => {
-    const T = String(l?.seriesId), L = j(T).guid, U = Y.find((pe) => pe.id === T), ce = U && l?.dataIndex !== void 0, Te = U && l?.dataIndex === void 0;
+    const c = j(String(E)).guid;
+    c && o?.(c);
+  }, le = (c) => {
+    const b = String(c?.seriesId), I = j(b).guid, U = Y.find((pe) => pe.id === b), ce = U && c?.dataIndex !== void 0, be = U && c?.dataIndex === void 0;
     if (ce)
       R({
-        hoveredSeriesId: T,
+        hoveredSeriesId: b,
         hoveredAreaData: null,
         isAreaHovered: !1,
-        cursorPos: H
-      }), r?.(L);
-    else if (Te) {
+        cursorPos: N
+      }), r?.(I);
+    else if (be) {
       const pe = U?.data.map((Me, Ae) => ({
         x: te[Ae],
         y: Me
       })) ?? [];
       R({
-        hoveredSeriesId: T,
+        hoveredSeriesId: b,
         hoveredAreaData: pe,
         isAreaHovered: !0,
-        cursorPos: H
-      }), t?.(L);
+        cursorPos: N
+      }), t?.(I);
     } else
       R({
         hoveredSeriesId: null,
         hoveredAreaData: null,
         isAreaHovered: !1,
-        cursorPos: H
+        cursorPos: N
       });
-  }, D = (l) => {
-    if (l.target instanceof Element && l.target.classList[0]?.includes("MuiMarkElement-root"))
+  }, D = (c) => {
+    if (c.target instanceof Element && c.target.classList[0]?.includes("MuiMarkElement-root"))
       return;
-    const T = l.currentTarget.getBoundingClientRect();
-    R((L) => ({
-      ...L,
+    const b = c.currentTarget.getBoundingClientRect();
+    R((I) => ({
+      ...I,
       cursorPos: {
-        x: l.clientX - T.left,
-        y: l.clientY - T.top
+        x: c.clientX - b.left,
+        y: c.clientY - b.top
       }
     }));
   }, F = {
@@ -320,11 +322,11 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
     '& [class*="MuiLineElement-series-unstacked-"]': {
       strokeWidth: 3
     },
-    ...f && V.reduce((l, T, L) => {
-      const U = `.MuiAreaElement-series-stacked-${L}`;
-      return l[U] = {
-        opacity: V[L].guid === f ? 0.9 : 0.2
-      }, l;
+    ...f && V.reduce((c, b, I) => {
+      const U = `.MuiAreaElement-series-stacked-${I}`;
+      return c[U] = {
+        opacity: V[I].guid === f ? 0.9 : 0.2
+      }, c;
     }, {})
   };
   return /* @__PURE__ */ e(
@@ -344,16 +346,16 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
         }
       },
       children: /* @__PURE__ */ C(
-        w,
+        x,
         {
           direction: { xs: "column", md: "column" },
           spacing: { xs: 0, md: 4 },
           sx: { width: "100%", position: "relative" },
           children: [
             /* @__PURE__ */ e(
-              Mt,
+              At,
               {
-                height: h,
+                height: m,
                 hideLegend: !0,
                 margin: { bottom: 24, left: 12, right: 54, top: 48 },
                 onAreaClick: ie,
@@ -364,10 +366,10 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
                   tooltip: { trigger: P ? "item" : "none" }
                 },
                 slots: {
-                  tooltip: P && E ? (l) => /* @__PURE__ */ e(Et, { children: /* @__PURE__ */ e(
-                    fo,
+                  tooltip: P && E ? (c) => /* @__PURE__ */ e(Mt, { children: /* @__PURE__ */ e(
+                    To,
                     {
-                      ...l,
+                      ...c,
                       categoryGuids: j(E),
                       series: Y,
                       xData: te
@@ -379,40 +381,40 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
                   {
                     data: te,
                     scaleType: "time",
-                    valueFormatter: (l) => Z(l, B.MONTH_SHORT_YEAR),
-                    tickNumber: I
+                    valueFormatter: (c) => Z(c, B.MONTH_SHORT_YEAR),
+                    tickNumber: L
                     // How many ticks to show on the x-axis
                   }
                 ],
                 yAxis: [
                   {
                     min: ue,
-                    max: he || 100,
-                    valueFormatter: (l) => Lt(l).format("0a")
+                    max: me || 100,
+                    valueFormatter: (c) => It(c).format("0a")
                   }
                 ]
               }
             ),
             /* @__PURE__ */ e(
-              po,
+              bo,
               {
                 categoryGuids: ge,
                 hoveredLegend: f,
                 legendRef: y,
-                onClickLegend: me,
+                onClickLegend: he,
                 onHoverLegend: ae,
                 sx: { px: i ? 0 : 24 }
               }
             ),
-            $ && /* @__PURE__ */ e(
-              mo,
+            z && /* @__PURE__ */ e(
+              _o,
               {
                 categoryGuids: j(E),
                 chartContainerRef: _,
-                cursorPosition: H,
-                hoveredAreaData: S.map((l) => ({
-                  ...l,
-                  x: Z(l.x, B.MONTH_SHORT_YEAR)
+                cursorPosition: N,
+                hoveredAreaData: w.map((c) => ({
+                  ...c,
+                  x: Z(c.x, B.MONTH_SHORT_YEAR)
                 }))
               }
             )
@@ -424,7 +426,7 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
 }, gt = ({ selectedTab: t, onTabChange: r }) => {
   const { common: n } = A();
   return /* @__PURE__ */ e(
-    Vt,
+    Ft,
     {
       "aria-label": n.view_toggle,
       exclusive: !0,
@@ -432,21 +434,21 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
       orientation: "horizontal",
       value: t,
       children: ["Chart", "Table"].map((o) => /* @__PURE__ */ e(
-        Pt,
+        Vt,
         {
           "aria-label": o === "Chart" ? n.view_chart : n.view_table,
           "aria-pressed": t === o,
           color: "primary",
           sx: { width: 56 },
           value: o,
-          children: o === "Chart" ? /* @__PURE__ */ e(He, { name: "table_chart_view" }) : /* @__PURE__ */ e(He, { name: "format_list_bulleted" })
+          children: o === "Chart" ? /* @__PURE__ */ e(Ne, { name: "table_chart_view" }) : /* @__PURE__ */ e(Ne, { name: "format_list_bulleted" })
         },
         o
       ))
     }
   );
-}, mt = ({ selectedDateRange: t, selectedCategoryGuid: r }) => {
-  const { trends: n } = A(), { isMobile: o, isDesktop: s } = q(), { getCategoryName: c } = J(), a = g.useMemo(() => {
+}, ht = ({ selectedDateRange: t, selectedCategoryGuid: r }) => {
+  const { trends: n } = A(), { isMobile: o, isDesktop: s } = q(), { getCategoryName: l } = J(), a = g.useMemo(() => {
     const i = t.start.getFullYear() === t.end.getFullYear() ? Z(
       t.start,
       o ? B.MONTH_SHORT : B.MONTH_LONG
@@ -458,7 +460,7 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
       o ? B.MONTH_SHORT_YEAR : B.MONTH_YEAR
     );
     return `${i} - ${y}`;
-  }, [t, o]), d = c(r) || (o ? n.sub_title : n.sub_title_by_category);
+  }, [t, o]), d = l(r) || (o ? n.sub_title : n.sub_title_by_category);
   return /* @__PURE__ */ C(W, { children: [
     /* @__PURE__ */ e(
       Oe,
@@ -474,20 +476,20 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
     ),
     /* @__PURE__ */ e(Q, { variant: s ? "subtitle1" : "body2", children: a })
   ] });
-}, Co = (t) => {
+}, wo = (t) => {
   const r = t.id === "total";
-  return /* @__PURE__ */ C(w, { alignItems: "center", direction: "row", role: "rowheader", tabIndex: t.tabIndex, children: [
+  return /* @__PURE__ */ C(x, { alignItems: "center", direction: "row", role: "rowheader", tabIndex: t.tabIndex, children: [
     !r && /* @__PURE__ */ e(W, { "aria-hidden": !0, children: /* @__PURE__ */ e(ve, { categoryGuid: t.row.top_level_category_guid, variant: "twotone" }) }),
     /* @__PURE__ */ e(Q, { bold: r, sx: { ml: 12 }, variant: r ? "body1" : "body2", children: t.row.category })
   ] });
 }, Ke = (t) => {
-  const r = t.row.category_guid, n = t.row.top_level_category_guid, o = r === Fe.INCOME || n === Fe.INCOME, s = t.id === "total", c = t.field === "total", a = c ? t.row[t.field] : t.row.monthlyAmounts[t.field];
-  return /* @__PURE__ */ e(w, { alignItems: "flex-end", direction: "row", tabIndex: t.tabIndex, children: /* @__PURE__ */ e(
+  const r = t.row.category_guid, n = t.row.top_level_category_guid, o = r === Fe.INCOME || n === Fe.INCOME, s = t.id === "total", l = t.field === "total", a = l ? t.row[t.field] : t.row.monthlyAmounts[t.field];
+  return /* @__PURE__ */ e(x, { alignItems: "flex-end", direction: "row", tabIndex: t.tabIndex, children: /* @__PURE__ */ e(
     xe,
     {
       amount: o ? Math.abs(a) : a,
       isIncome: o,
-      sx: { fontWeight: o || c || s ? 600 : 500 },
+      sx: { fontWeight: o || l || s ? 600 : 500 },
       symbol: o ? "+" : void 0,
       variant: s ? "body1" : "body2"
     }
@@ -498,14 +500,14 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
 }, je = (t) => (r, n) => {
   const o = Z(it(n.isoDate), B.MONTH_LONG);
   return r + (t.includes(o) ? n.amount : 0);
-}, _o = (t, r) => {
+}, xo = (t, r) => {
   const n = [], o = new Date(t);
   for (; o <= r; ) {
     const s = Z(o, B.MONTH_LONG);
     n.push(s), o.setMonth(o.getMonth() + 1);
   }
   return n;
-}, To = (t, r) => {
+}, vo = (t, r) => {
   const n = {
     field: "category",
     flex: 1,
@@ -513,15 +515,15 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
     headerName: r.category_title,
     minWidth: 210,
     renderHeader: ke,
-    renderCell: Co,
+    renderCell: wo,
     sortable: !0,
     sortComparator: Ht,
     type: "string"
-  }, o = t.map((c) => ({
-    field: c,
+  }, o = t.map((l) => ({
+    field: l,
     flex: 1,
     headerClassName: "trends-table-header",
-    headerName: c,
+    headerName: l,
     minWidth: 100,
     renderHeader: ke,
     renderCell: Ke,
@@ -530,7 +532,8 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
     sortable: !0,
     hideSortIcons: !1,
     type: "number",
-    sortComparator: ze
+    sortComparator: $e,
+    valueGetter: (a, u) => u.monthlyAmounts?.[l] ?? 0
   })), s = {
     field: "total",
     flex: 1,
@@ -544,11 +547,11 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
     sortable: !0,
     hideSortIcons: !1,
     type: "number",
-    sortComparator: ze
+    sortComparator: $e
   };
   return [n, ...o, s];
 }, Ue = (t, r, n, o, s) => {
-  const c = t.filter((a) => a.is_income === n).map((a) => {
+  const l = t.filter((a) => a.is_income === n).map((a) => {
     let u = a.totalMonthlyAmounts;
     return s && (u = a.monthlyAmounts), {
       id: a.guid,
@@ -562,7 +565,7 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
   });
   if (s && s.is_income === n) {
     const a = s.monthlyAmounts.reduce(je(o), 0);
-    a !== 0 && c.push({
+    a !== 0 && l.push({
       id: `sub-${s.guid}`,
       category: nt(r.category_general, s.name),
       category_guid: s.guid,
@@ -572,17 +575,52 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
       monthlyAmounts: s.monthlyAmounts.reduce(Ye, {})
     });
   }
-  return c;
-}, Xe = ({
+  return l;
+}, Do = Lt("div")({
+  display: "flex",
+  visibility: "hidden",
+  width: 0
+});
+function Io({
+  direction: t,
+  index: r,
+  sortingOrder: n,
+  disabled: o,
+  className: s,
+  field: l
+}) {
+  const a = zt(), u = Kt();
+  let d = null;
+  const i = {};
+  if (t === "asc" ? d = u.slots.columnSortedAscendingIcon : t === "desc" ? d = u.slots.columnSortedDescendingIcon : (d = u.slots.columnUnsortedIcon ?? null, i.sortingOrder = n), !d) return null;
+  const h = a.current.getColumn(l)?.headerName ?? l;
+  let _ = "";
+  t === "asc" ? _ = ", sorted ascending" : t === "desc" && (_ = ", sorted descending");
+  const m = ["Total", "Category"].includes(h) ? "" : " category totals", p = `Sort by ${h}${m}${_}`, f = /* @__PURE__ */ e(d, { className: "MuiDataGrid-sortIcon", fontSize: "small", ...i }), T = /* @__PURE__ */ e(
+    Ut,
+    {
+      disabled: o,
+      size: "small",
+      tabIndex: -1,
+      ...u.slotProps?.baseIconButton,
+      "aria-label": p,
+      className: `MuiDataGrid-sortButton${s ? ` ${s}` : ""}`,
+      title: p,
+      children: f
+    }
+  );
+  return /* @__PURE__ */ e(Do, { className: "MuiDataGrid-iconButtonContainer", children: r != null ? /* @__PURE__ */ e(jt, { badgeContent: r, color: "default", overlap: "circular", children: T }) : T });
+}
+const Lo = g.memo(Io), Xe = ({
   columns: t,
   onRowClick: r,
   parentCategory: n,
   rows: o,
   totalRow: s
 }) => {
-  const c = de(), { onEvent: a } = z(), u = c.palette.mode === "light";
+  const l = de(), { onEvent: a } = $(), u = l.palette.mode === "light";
   return /* @__PURE__ */ e(
-    zt,
+    Yt,
     {
       columns: t,
       disableColumnFilter: !0,
@@ -592,7 +630,7 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
       onRowClick: (d) => {
         n || r?.(d.row.category_guid), a(v.TRENDS_CLICK_LIST_ITEM, {
           ...G,
-          listItem: Rt[d.row.category_guid]
+          listItem: kt[d.row.category_guid]
         });
       },
       pinnedRows: {
@@ -601,6 +639,7 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
       rowHeight: 64,
       rows: o,
       slotProps: { baseIconButton: { color: "secondary", sx: { ml: 8 } } },
+      slots: { columnHeaderSortIcon: Lo },
       sortingOrder: ["asc", "desc"],
       sx: {
         borderColor: "divider",
@@ -624,33 +663,33 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
   height: o = "100%",
   sx: s = {}
 }) => {
-  const { trends: c } = A(), { trendsCategories: a } = J(), u = g.useMemo(() => _o(t.start, t.end), [t]), d = g.useMemo(() => To(u, c), [u, c]), i = g.useMemo(() => {
+  const { trends: l } = A(), { trendsCategories: a } = J(), u = g.useMemo(() => xo(t.start, t.end), [t]), d = g.useMemo(() => vo(u, l), [u, l]), i = g.useMemo(() => {
     if (r)
-      return a.find((h) => h.guid === r);
-  }, [r, a]), [y, m] = g.useMemo(() => {
-    let h = a;
-    return i && (h = i.subCategories.filter(
+      return a.find((m) => m.guid === r);
+  }, [r, a]), [y, h] = g.useMemo(() => {
+    let m = a;
+    return i && (m = i.subCategories.filter(
       (p) => p.monthlyAmounts.some((f) => f.amount !== 0)
     )), [
-      Ue(h, c, !0, u, i),
-      Ue(h, c, !1, u, i)
+      Ue(m, l, !0, u, i),
+      Ue(m, l, !1, u, i)
     ];
-  }, [a, u, i, c]), _ = {
+  }, [a, u, i, l]), _ = {
     id: "total",
-    category: c.table_column_total,
+    category: l.table_column_total,
     category_guid: "total",
     isParent: !1,
     top_level_category_guid: "total",
-    total: m.reduce((h, p) => h + p.total, 0),
-    monthlyAmounts: m.reduce(
-      (h, p) => (Object.entries(p.monthlyAmounts).forEach(([f, x]) => {
-        h[f] = (h[f] || 0) + x;
-      }), h),
+    total: h.reduce((m, p) => m + p.total, 0),
+    monthlyAmounts: h.reduce(
+      (m, p) => (Object.entries(p.monthlyAmounts).forEach(([f, T]) => {
+        m[f] = (m[f] || 0) + T;
+      }), m),
       {}
     )
   };
   return /* @__PURE__ */ C(
-    w,
+    x,
     {
       gap: 24,
       sx: { height: o, width: "100%", overflowX: "auto", boxShadow: "none", ...s },
@@ -670,33 +709,33 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
             columns: d,
             onRowClick: n,
             parentCategory: i,
-            rows: m,
+            rows: h,
             totalRow: _
           }
         )
       ]
     }
   );
-}, bo = {
+}, Eo = {
   title: "Transaction List"
-}, So = ({
+}, Mo = ({
   categoryGuid: t,
   dateRange: r,
   isOpen: n,
   onClose: o
 }) => {
-  const { onEvent: s } = z(), { selectedAccountGuids: c } = Ce(), { common: a } = A(), { setFilter: u, sortedTransactions: d } = De(), [i, y] = g.useState(""), m = g.useMemo(
-    () => d.find((h) => h.guid === i),
+  const { onEvent: s } = $(), { selectedAccountGuids: l } = Ce(), { common: a } = A(), { setFilter: u, sortedTransactions: d } = De(), [i, y] = g.useState(""), h = g.useMemo(
+    () => d.find((m) => m.guid === i),
     [i, d]
   );
   g.useEffect(() => {
     u({
-      accounts: c,
+      accounts: l,
       dateRange: r,
-      custom: (h) => t === "" || t === h.category_guid || t === h.top_level_category_guid,
+      custom: (m) => t === "" || t === m.category_guid || t === m.top_level_category_guid,
       showSplits: !!t
     });
-  }, [c, t, r]), g.useEffect(() => s(v.TRENDS_VIEW_TRANSACTIONS), []);
+  }, [l, t, r]), g.useEffect(() => s(v.TRENDS_VIEW_TRANSACTIONS), []);
   const _ = () => {
     y(""), o();
   };
@@ -706,84 +745,84 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
       ariaLabelClose: a.close_aria,
       isOpen: n,
       onClose: _,
-      title: bo.title,
+      title: Eo.title,
       children: [
-        m && /* @__PURE__ */ e(ct, { transaction: m }),
-        !m && /* @__PURE__ */ e(lt, { onClick: y })
+        h && /* @__PURE__ */ e(ct, { transaction: h }),
+        !h && /* @__PURE__ */ e(lt, { onClick: y })
       ]
     }
   );
-}, wo = M(So), xo = ({ onBackClick: t, sx: r }) => {
-  const { onEvent: n } = z(), { isDesktop: o, isTablet: s, isMobile: c } = q(), { isAccountDataLoaded: a, loadAccountData: u } = Le(), {
+}, Ao = M(Mo), Ro = ({ onBackClick: t, sx: r }) => {
+  const { onEvent: n } = $(), { isDesktop: o, isTablet: s, isMobile: l } = q(), { isAccountDataLoaded: a, loadAccountData: u } = Ie(), {
     categoriesLoaded: d,
     loadCategories: i,
     loadDateRangeCategoryTotals: y,
-    loadMonthlyCategoryTotals: m,
+    loadMonthlyCategoryTotals: h,
     monthlyCategoryTotals: _,
-    getCategoryName: h
+    getCategoryName: m
   } = J(), {
     isTransactionDataLoaded: p,
     loadTransactionData: f,
-    sortedTransactions: x
-  } = De(), { selectedDateRange: b, setSelectedDateRange: R } = _e(), { isInitialized: E, selectedAccounts: S } = Ce(), { trends: k } = A(), [H, $] = g.useState(!1), [P, K] = g.useState(!1), [I, te] = g.useState("Chart"), [O, ne] = g.useState(""), [se, X] = g.useState(window.innerHeight), he = se - (c ? 315 : 345);
-  Ie({
+    sortedTransactions: T
+  } = De(), { selectedDateRange: S, setSelectedDateRange: R } = _e(), { isInitialized: E, selectedAccounts: w } = Ce(), { trends: k } = A(), [N, z] = g.useState(!1), [P, K] = g.useState(!1), [L, te] = g.useState("Chart"), [O, ne] = g.useState(""), [se, X] = g.useState(window.innerHeight), me = se - (l ? 315 : 345);
+  Le({
     widgetName: "TrendsFullWidget",
-    isLoaded: H
+    isLoaded: N
   }), g.useEffect(() => {
     const D = () => X(window.innerHeight);
     return window.addEventListener("resize", D), a || u().finally(), d || i().finally(), p || f().finally(), () => window.removeEventListener("resize", D);
   }, []), g.useEffect(() => {
-    E && y(S, b.start, b.end).then(() => {
-      m(
-        S,
-        b.start,
-        b.end
+    E && y(w, S.start, S.end).then(() => {
+      h(
+        w,
+        S.start,
+        S.end
       );
     }).finally(() => {
-      $(!0), n(v.TRENDS_LOAD_WIDGET, {
+      z(!0), n(v.TRENDS_LOAD_WIDGET, {
         ...G,
-        time_period: `${we(b.end, b.start)}M`
+        time_period: `${we(S.end, S.start)}M`
       });
     });
-  }, [E, S, b]);
+  }, [E, w, S]);
   const V = g.useMemo(() => {
-    if (!H) return { stackedDatasets: [], unstackedDatasets: [] };
-    const D = Nt(
+    if (!N) return { stackedDatasets: [], unstackedDatasets: [] };
+    const D = Wt(
       _,
-      b.start,
-      b.end
+      S.start,
+      S.end
     ), F = O.length ? D.filter(
-      (l) => l.top_level_category_guid === O || l.category_guid === O
-    ) : Wt(D);
+      (c) => c.top_level_category_guid === O || c.category_guid === O
+    ) : Ot(D);
     return {
-      stackedDatasets: F.filter(Ot),
-      unstackedDatasets: F.filter(Gt)
+      stackedDatasets: F.filter(Gt),
+      unstackedDatasets: F.filter(Bt)
     };
-  }, [_, O, b]), re = (D, F) => {
-    te(F ?? I), n(v.TRENDS_CLICK_TOGGLE_VIEW);
+  }, [_, O, S]), re = (D, F) => {
+    te(F ?? L), n(v.TRENDS_CLICK_TOGGLE_VIEW);
   }, Y = (D) => {
-    const F = qe(D?.[0], 1), l = D?.[1], T = we(l, F);
-    R({ start: F, end: l }), n(v.TRENDS_CLICK_TIME_WINDOW, {
-      time_period: T + "M"
+    const F = qe(D?.[0], 1), c = D?.[1], b = we(c, F);
+    R({ start: F, end: c }), n(v.TRENDS_CLICK_TIME_WINDOW, {
+      time_period: b + "M"
     });
   }, ge = () => {
     n(v.TRENDS_CLICK_FILTER);
   }, j = (D) => {
     ne(D);
   }, ae = (D) => {
-    ne(D), n(v.TRENDS_CLICK_LEGEND, { category: h(D) });
-  }, me = (D) => {
-    n(v.TRENDS_HOVER_LEGEND, { category: h(D) });
+    ne(D), n(v.TRENDS_CLICK_LEGEND, { category: m(D) });
+  }, he = (D) => {
+    n(v.TRENDS_HOVER_LEGEND, { category: m(D) });
   }, ie = (D) => {
     n(v.TRENDS_HOVER_AREA, { category: D });
   }, le = (D) => {
     n(v.TRENDS_HOVER_POINT, { category: D });
   };
-  return !E || !H ? /* @__PURE__ */ e(Ee, {}) : /* @__PURE__ */ C(
+  return !E || !N ? /* @__PURE__ */ e(Ee, {}) : /* @__PURE__ */ C(
     dt,
     {
       calendarActions: { onRangeChanged: Y },
-      dateRange: b,
+      dateRange: S,
       dateRangeVariant: "timeframebuttons",
       onAccountsFilterClick: ge,
       onBackClick: t,
@@ -791,7 +830,7 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
       title: k.title,
       children: [
         /* @__PURE__ */ C(
-          w,
+          x,
           {
             sx: {
               // eslint-disable-next-line no-nested-ternary
@@ -799,49 +838,49 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
             },
             children: [
               /* @__PURE__ */ C(
-                w,
+                x,
                 {
                   flexDirection: "row",
                   justifyContent: "space-between",
-                  sx: { pb: c ? 12 : 24, pt: c ? 24 : 48 },
+                  sx: { pb: l ? 12 : 24, pt: l ? 24 : 48 },
                   children: [
                     /* @__PURE__ */ e(
-                      mt,
+                      ht,
                       {
                         selectedCategoryGuid: O,
-                        selectedDateRange: b
+                        selectedDateRange: S
                       }
                     ),
-                    /* @__PURE__ */ e(gt, { onTabChange: re, selectedTab: I })
+                    /* @__PURE__ */ e(gt, { onTabChange: re, selectedTab: L })
                   ]
                 }
               ),
-              /* @__PURE__ */ C(w, { alignItems: "center", flexDirection: "row", width: "100%", children: [
+              /* @__PURE__ */ C(x, { alignItems: "center", flexDirection: "row", width: "100%", children: [
                 /* @__PURE__ */ e(W, { flexGrow: 1, children: O && /* @__PURE__ */ C(Se, { onClick: () => ne(""), sx: { p: 0, pr: 5 }, children: [
-                  /* @__PURE__ */ e(He, { name: "arrow_back" }),
+                  /* @__PURE__ */ e(Ne, { name: "arrow_back" }),
                   k.all_categories
                 ] }) }),
-                /* @__PURE__ */ e(Se, { onClick: () => K(!0), sx: { px: 5 }, children: `${k.view_transactions} (${x.length})` })
+                /* @__PURE__ */ e(Se, { onClick: () => K(!0), sx: { px: 5 }, children: `${k.view_transactions} (${T.length})` })
               ] }),
               /* @__PURE__ */ C(W, { children: [
-                I === "Chart" && /* @__PURE__ */ e(
-                  yo,
+                L === "Chart" && /* @__PURE__ */ e(
+                  So,
                   {
-                    availableHeight: he,
+                    availableHeight: me,
                     onClickLegend: ae,
                     onHoverArea: ie,
-                    onHoverLegend: me,
+                    onHoverLegend: he,
                     onHoverPoint: le,
                     stackedDatasets: V.stackedDatasets,
                     unstackedDatasets: V.unstackedDatasets
                   }
                 ),
-                I === "Table" && /* @__PURE__ */ e(
+                L === "Table" && /* @__PURE__ */ e(
                   pt,
                   {
                     onClickRow: j,
                     selectedCategory: O,
-                    selectedDateRange: b
+                    selectedDateRange: S
                   }
                 )
               ] })
@@ -849,10 +888,10 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
           }
         ),
         /* @__PURE__ */ e(
-          wo,
+          Ao,
           {
             categoryGuid: O,
-            dateRange: b,
+            dateRange: S,
             isOpen: P,
             onClose: () => K(!1)
           }
@@ -860,8 +899,8 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
       ]
     }
   );
-}, Un = M(xo), vo = () => {
-  const { monthlyCategoryTotals: t } = J(), { trends: r } = A(), n = de(), { availableHeight: o = 300 } = tt(), s = g.useMemo(() => Bt(t), [t]);
+}, ss = M(Ro), ko = () => {
+  const { monthlyCategoryTotals: t } = J(), { trends: r } = A(), n = de(), { availableHeight: o = 300 } = tt(), s = g.useMemo(() => Pt(t), [t]);
   return /* @__PURE__ */ e(
     Be,
     {
@@ -878,17 +917,17 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
       valueFormatterString: "0,0"
     }
   );
-}, Do = M(vo), Lo = ({ onPrimaryCtaClick: t, sx: r }) => {
-  const { isAccountDataLoaded: n, loadAccountData: o } = Le(), { loadMonthlyCategoryTotals: s, monthlyTotalsLoaded: c } = J(), { isInitialized: a } = Ge(), { trends: u } = A(), { selectedAccounts: d } = Ce();
+}, No = M(ko), Ho = ({ onPrimaryCtaClick: t, sx: r }) => {
+  const { isAccountDataLoaded: n, loadAccountData: o } = Ie(), { loadMonthlyCategoryTotals: s, monthlyTotalsLoaded: l } = J(), { isInitialized: a } = Ge(), { trends: u } = A(), { selectedAccounts: d } = Ce();
   return g.useEffect(() => {
     n || o().finally();
-  }, []), Ie({
+  }, []), Le({
     widgetName: "TrendsMiniWidget",
-    isLoaded: c
+    isLoaded: l
   }), g.useEffect(() => {
     a && n && s(d).finally();
-  }, [n, a, d]), !n || !a || !c ? /* @__PURE__ */ e(Ee, {}) : /* @__PURE__ */ e(
-    $t,
+  }, [n, a, d]), !n || !a || !l ? /* @__PURE__ */ e(Ee, {}) : /* @__PURE__ */ e(
+    Xt,
     {
       contentStyles: { height: "calc(100% - 72px)", minHeight: 300, ":last-child": { pb: 0 } },
       onPrimaryCtaClick: t,
@@ -896,23 +935,23 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
       subTitle: u.sub_title,
       sx: { height: "100%", ...r },
       title: u.mini_title,
-      children: /* @__PURE__ */ e(Do, {})
+      children: /* @__PURE__ */ e(No, {})
     }
   );
-}, Xn = M(Lo), Io = 70, Ze = ({
+}, rs = M(Ho), Wo = 70, Ze = ({
   title: t,
   totalAmount: r,
   transactionType: n,
   percentage: o,
   secondaryLabel: s,
-  shouldDisplayPercentage: c
+  shouldDisplayPercentage: l
 }) => {
-  const { availableWidth: a } = tt(), u = g.useRef(null), d = g.useRef(null), i = kt(Number(Math.abs(o)), {
+  const { availableWidth: a } = tt(), u = g.useRef(null), d = g.useRef(null), i = Nt(Number(Math.abs(o)), {
     style: "percent",
     minimumIntegerDigits: 1
-  }), y = a === 288 && oe(r, "0,0.00").length > 10 ? oe(r, "0,0") : oe(r, "0,0.00"), m = n === "spending" ? o > 0 : o >= 0, _ = n === "spending" ? "error.main" : "success.main", h = n === "spending" ? "success.main" : "text.secondary", p = u?.current, f = d?.current, x = p && f ? p.scrollWidth > f.clientWidth - Io : !1;
+  }), y = a === 288 && oe(r, "0,0.00").length > 10 ? oe(r, "0,0") : oe(r, "0,0.00"), h = n === "spending" ? o > 0 : o >= 0, _ = n === "spending" ? "error.main" : "success.main", m = n === "spending" ? "success.main" : "text.secondary", p = u?.current, f = d?.current, T = p && f ? p.scrollWidth > f.clientWidth - Wo : !1;
   return /* @__PURE__ */ C(
-    w,
+    x,
     {
       sx: {
         border: 1,
@@ -925,7 +964,7 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
       },
       children: [
         /* @__PURE__ */ C(
-          w,
+          x,
           {
             sx: {
               alignItems: "center",
@@ -934,13 +973,13 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
             },
             children: [
               /* @__PURE__ */ e(ye, { color: "text.secondary", variant: "caption", children: t }),
-              c && /* @__PURE__ */ C(w, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
-                m ? /* @__PURE__ */ e(Yt, { size: 20, sx: { color: _ } }) : /* @__PURE__ */ e(jt, { size: 20, sx: { color: h } }),
+              l && /* @__PURE__ */ C(x, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
+                h ? /* @__PURE__ */ e(Qt, { size: 20, sx: { color: _ } }) : /* @__PURE__ */ e(qt, { size: 20, sx: { color: m } }),
                 /* @__PURE__ */ e(
                   ye,
                   {
                     sx: {
-                      color: m ? _ : h,
+                      color: h ? _ : m,
                       fontWeight: 600
                     },
                     variant: "body2",
@@ -952,7 +991,7 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
           }
         ),
         /* @__PURE__ */ C(
-          w,
+          x,
           {
             ref: d,
             sx: {
@@ -969,10 +1008,10 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
                   children: /* @__PURE__ */ e(Oe, { children: y })
                 }
               ),
-              c && a >= 450 && !x && /* @__PURE__ */ e(
+              l && a >= 450 && !T && /* @__PURE__ */ e(
                 ye,
                 {
-                  color: m ? _ : h,
+                  color: h ? _ : m,
                   variant: "caption",
                   children: s
                 }
@@ -983,55 +1022,55 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
       ]
     }
   );
-}, Eo = M(() => {
+}, Oo = M(() => {
   const { trends: t } = A();
-  return /* @__PURE__ */ C(w, { sx: { alignItems: "start", flexDirection: "row", gap: 12 }, children: [
-    /* @__PURE__ */ e(Ut, { size: 32 }),
-    /* @__PURE__ */ C(w, { children: [
+  return /* @__PURE__ */ C(x, { sx: { alignItems: "start", flexDirection: "row", gap: 12 }, children: [
+    /* @__PURE__ */ e(Jt, { size: 32 }),
+    /* @__PURE__ */ C(x, { children: [
       /* @__PURE__ */ e(ye, { fontWeight: 600, variant: "body1", children: t.zero_state_content_header }),
       /* @__PURE__ */ e(ye, { color: "text.secondary", variant: "subtitle2", children: t.zero_state_content_description })
     ] })
   ] });
-}), Zn = M(({ onCtaClick: t }) => {
-  const { isAccountDataLoaded: r, loadAccountData: n, visibleAccounts: o } = Le();
+}), as = M(({ onCtaClick: t }) => {
+  const { isAccountDataLoaded: r, loadAccountData: n, visibleAccounts: o } = Ie();
   g.useEffect(() => {
     r || n().finally();
   }, []);
-  const { onEvent: s } = z(), { monthlyCategoryTotals: c, loadMonthlyCategoryTotals: a, monthlyTotalsLoaded: u } = J(), d = {
-    start: Kt(/* @__PURE__ */ new Date(), 1),
+  const { onEvent: s } = $(), { monthlyCategoryTotals: l, loadMonthlyCategoryTotals: a, monthlyTotalsLoaded: u } = J(), d = {
+    start: Zt(/* @__PURE__ */ new Date(), 1),
     end: /* @__PURE__ */ new Date()
-  }, { trends: i } = A(), { selectedAccounts: y, isInitialized: m } = Ce();
-  Ie({
+  }, { trends: i } = A(), { selectedAccounts: y, isInitialized: h } = Ce();
+  Le({
     widgetName: "TrendsMicroWidget",
     isLoaded: u
   }), g.useEffect(() => {
-    m && a(y, d.start).then(() => {
+    h && a(y, d.start).then(() => {
       s(v.TRENDS_LOAD_WIDGET, {
         state: o?.length ? "default" : "zeroState"
       });
     });
-  }, [m, y]);
-  const { spendingData: _, incomeData: h } = g.useMemo(
+  }, [h, y]);
+  const { spendingData: _, incomeData: m } = g.useMemo(
     () => ({
-      spendingData: rt(c, d),
-      incomeData: at(c, d)
+      spendingData: rt(l, d),
+      incomeData: at(l, d)
     }),
-    [c, d]
-  ), [p, f] = _, [x, b] = h, R = $e(f.y, p.y), E = $e(b.y, x.y), S = m && !o?.length, k = () => {
+    [l, d]
+  ), [p, f] = _, [T, S] = m, R = ze(f.y, p.y), E = ze(S.y, T.y), w = h && !o?.length, k = () => {
     s(
-      S ? v.TRENDS_CLICK_GET_STARTED : v.TRENDS_CLICK_VIEW_MORE
+      w ? v.TRENDS_CLICK_GET_STARTED : v.TRENDS_CLICK_VIEW_MORE
     ), t();
   };
-  return !u || !m ? /* @__PURE__ */ e(Ee, {}) : /* @__PURE__ */ e(
-    qt,
+  return !u || !h ? /* @__PURE__ */ e(Ee, {}) : /* @__PURE__ */ e(
+    no,
     {
       className: "mx-trends-microwidget",
       ctaLabel: i.micro_primary_cta_label,
       onCTAClick: k,
-      subHeader: S ? void 0 : i.micro_subheader,
+      subHeader: w ? void 0 : i.micro_subheader,
       title: i.title,
-      children: S ? /* @__PURE__ */ e(Eo, {}) : /* @__PURE__ */ C(
-        w,
+      children: w ? /* @__PURE__ */ e(Oo, {}) : /* @__PURE__ */ C(
+        x,
         {
           sx: {
             alignItems: "stretch",
@@ -1055,9 +1094,9 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
               {
                 percentage: E,
                 secondaryLabel: i.micro_secondary_label,
-                shouldDisplayPercentage: b.y !== 0 && x.y !== 0,
+                shouldDisplayPercentage: S.y !== 0 && T.y !== 0,
                 title: i.income_label,
-                totalAmount: b.y,
+                totalAmount: S.y,
                 transactionType: "income"
               }
             )
@@ -1066,17 +1105,17 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
       )
     }
   );
-}), Mo = M(
+}), Go = M(
   ({ isExpanded: t, onClick: r }) => {
     const n = ut();
-    return /* @__PURE__ */ e(to, { sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(oo, { onClick: r, sx: { justifyContent: "center" }, children: /* @__PURE__ */ C(
-      w,
+    return /* @__PURE__ */ e(ao, { sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(io, { onClick: r, sx: { justifyContent: "center" }, children: /* @__PURE__ */ C(
+      x,
       {
         sx: { color: n.palette.primary.main, flexDirection: "row", alignItems: "center" },
         children: [
-          /* @__PURE__ */ e(so, { children: /* @__PURE__ */ e(Q, { bold: !0, variant: "body2", children: t ? "View less" : "View more" }) }),
-          /* @__PURE__ */ e(no, { sx: { color: n.palette.primary.main }, children: t ? /* @__PURE__ */ e(Xt, {}) : /* @__PURE__ */ e(
-            Zt,
+          /* @__PURE__ */ e(co, { children: /* @__PURE__ */ e(Q, { bold: !0, variant: "body2", children: t ? "View less" : "View more" }) }),
+          /* @__PURE__ */ e(lo, { sx: { color: n.palette.primary.main }, children: t ? /* @__PURE__ */ e(eo, {}) : /* @__PURE__ */ e(
+            to,
             {
               sx: {
                 transition: "transform 0.3s ease-in-out",
@@ -1095,10 +1134,10 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
     name: n,
     transactions: o,
     onClick: s,
-    isLastItem: c = !1,
+    isLastItem: l = !1,
     showDivider: a = !0
   }) => {
-    const { trends: u } = A(), { onEvent: d } = z(), i = `${o.length} ${o.length === 1 ? u.transaction : u.transactions}`, y = () => {
+    const { trends: u } = A(), { onEvent: d } = $(), i = `${o.length} ${o.length === 1 ? u.transaction : u.transactions}`, y = () => {
       s?.(), d(v.TRENDS_CLICK_LIST_ITEM, {
         ...G,
         listItem: n
@@ -1116,45 +1155,45 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
           title: n
         }
       ),
-      a && /* @__PURE__ */ e(Ne, { sx: { ml: c ? 24 : 68 } })
+      a && /* @__PURE__ */ e(He, { sx: { ml: l ? 24 : 68 } })
     ] }, r);
   }
-), Ao = M(
+), Bo = M(
   ({ availableHeight: t = 0, onCategoryClick: r }) => {
-    const { collapsedCategories: n, visibleCategories: o, setVisibleListLength: s } = _e(), { isLargeDesktop: c, isDesktop: a } = q(), { trends: u } = A(), { onEvent: d } = z(), [i, y] = g.useState(!1), m = a || c;
+    const { collapsedCategories: n, visibleCategories: o, setVisibleListLength: s } = _e(), { isLargeDesktop: l, isDesktop: a } = q(), { trends: u } = A(), { onEvent: d } = $(), [i, y] = g.useState(!1), h = a || l;
     g.useEffect(() => {
       const p = Math.floor(t / 64) - 1, f = o.length + n.length;
-      p !== o.length && (s(m ? Math.max(p, 5) : 5), y(p >= f));
+      p !== o.length && (s(h ? Math.max(p, 5) : 5), y(p >= f));
     }, [t]);
     const _ = () => {
       y(!i), d(v.TRENDS_CLICK_VIEW_MORE, {
         ...G
       });
-    }, h = o.length + (i ? n.length : 0);
-    return /* @__PURE__ */ e(w, { sx: { bgColor: "background.paper", width: "100%" }, children: /* @__PURE__ */ C(eo, { children: [
-      /* @__PURE__ */ e(w, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(Oe, { children: u.categories }) }),
+    }, m = o.length + (i ? n.length : 0);
+    return /* @__PURE__ */ e(x, { sx: { bgColor: "background.paper", width: "100%" }, children: /* @__PURE__ */ C(ro, { children: [
+      /* @__PURE__ */ e(x, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(Oe, { children: u.categories }) }),
       o.map((p, f) => /* @__PURE__ */ e(
         Qe,
         {
           ...p,
-          isLastItem: f === h - 1,
+          isLastItem: f === m - 1,
           onClick: p.transactions.length > 0 ? () => r(p) : void 0,
           showDivider: !0
         },
         p.guid
       )),
       /* @__PURE__ */ e(
-        Jt,
+        so,
         {
           in: i,
           sx: { "&.MuiCollapse-root .MuiListItemButton-root": { paddingLeft: 24 } },
           children: n.map((p, f) => {
-            const x = o.length + f;
+            const T = o.length + f;
             return /* @__PURE__ */ e(
               Qe,
               {
                 ...p,
-                isLastItem: x === h - 1,
+                isLastItem: T === m - 1,
                 onClick: p.transactions.length > 0 ? () => r(p) : void 0,
                 showDivider: !0
               },
@@ -1163,21 +1202,21 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
           })
         }
       ),
-      n.length > 0 && /* @__PURE__ */ e(Mo, { isExpanded: i, onClick: _ })
+      n.length > 0 && /* @__PURE__ */ e(Go, { isExpanded: i, onClick: _ })
     ] }) });
   }
-), Ro = ({ beats: t, onInsightCardClick: r }) => {
-  const { onEvent: n } = z(), { isMobile: o, isDesktop: s, isLargeDesktop: c } = q(), { beatStore: a, endpoint: u, sessionToken: d } = Ge(), i = s || c, y = i || o ? 1 : 2, m = () => null, _ = (b) => {
-    r?.(b), n(v.TRENDS_CLICK_INSIGHT, G);
-  }, h = i ? 200 : 170, p = i ? 170 : 124, f = i ? 56 : 0, x = t.length > 0 ? h + f : p;
-  return /* @__PURE__ */ e(ro, { sx: { height: x }, children: /* @__PURE__ */ e(
-    Ft,
+), Po = ({ beats: t, onInsightCardClick: r }) => {
+  const { onEvent: n } = $(), { isMobile: o, isDesktop: s, isLargeDesktop: l } = q(), { beatStore: a, endpoint: u, sessionToken: d } = Ge(), i = s || l, y = i || o ? 1 : 2, h = () => null, _ = (S) => {
+    r?.(S), n(v.TRENDS_CLICK_INSIGHT, G);
+  }, m = i ? 200 : 170, p = i ? 170 : 124, f = i ? 56 : 0, T = t.length > 0 ? m + f : p;
+  return /* @__PURE__ */ e(uo, { sx: { height: T }, children: /* @__PURE__ */ e(
+    $t,
     {
       areBeatsLoading: a.isLoading,
       beats: t,
       endpoint: u,
       headerSx: { p: 0 },
-      logOutUser: m,
+      logOutUser: h,
       onCardClick: _,
       showBorder: !0,
       showCTAColocatedWithText: !1,
@@ -1191,11 +1230,11 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
       visibleCardsCount: y
     }
   ) });
-}, ko = M(Ro), Ho = M(({ chartLabel: t, chartColor: r }) => {
-  const { onEvent: n } = z(), {
+}, Vo = M(Po), Fo = M(({ chartLabel: t, chartColor: r }) => {
+  const { onEvent: n } = $(), {
     categoryDetailsChartData: { monthlyAmounts: o, tooltipLabels: s }
   } = _e();
-  return /* @__PURE__ */ e(w, { sx: { pt: 12, width: "100%" }, children: /* @__PURE__ */ e(
+  return /* @__PURE__ */ e(x, { sx: { pt: 12, width: "100%" }, children: /* @__PURE__ */ e(
     Be,
     {
       baseline: "min",
@@ -1224,14 +1263,14 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
       valueFormatterString: "0,0"
     }
   ) });
-}), No = M(({ onClose: t }) => {
-  const r = ut(), { is_mobile_webview: n } = ot(), { isDesktop: o, isSmallTablet: s, isTablet: c } = q(), { onEvent: a } = z(), { common: u, trends: d } = A(), { selectedCategoryData: i, selectedDateRangeMonthRange: y } = _e(), { sortedTransactions: m } = De(), [_, h] = g.useState(null);
+}), $o = M(({ onClose: t }) => {
+  const r = ut(), { is_mobile_webview: n } = ot(), { isDesktop: o, isSmallTablet: s, isTablet: l } = q(), { onEvent: a } = $(), { common: u, trends: d } = A(), { selectedCategoryData: i, selectedDateRangeMonthRange: y } = _e(), { sortedTransactions: h } = De(), [_, m] = g.useState(null);
   if (!i)
     return null;
-  const { guid: p, name: f, is_income: x, totalAmount: b } = i, R = x ? d.category_income : d.category_spending, E = io(p, r), S = x ? d.income_label : d.spending_label, k = ` ${i.transactions.length === 1 ? d.transaction : d.transactions} (${i.transactions.length})`, H = g.useMemo(
-    () => m.find((I) => I.guid === _),
-    [_, m]
-  ), $ = m.length > 0 && !n && (o || c && !s), P = (I) => I.category_guid === p || I.top_level_category_guid === p, K = () => {
+  const { guid: p, name: f, is_income: T, totalAmount: S } = i, R = T ? d.category_income : d.category_spending, E = go(p, r), w = T ? d.income_label : d.spending_label, k = ` ${i.transactions.length === 1 ? d.transaction : d.transactions} (${i.transactions.length})`, N = g.useMemo(
+    () => h.find((L) => L.guid === _),
+    [_, h]
+  ), z = h.length > 0 && !n && (o || l && !s), P = (L) => L.category_guid === p || L.top_level_category_guid === p, K = () => {
     t?.(), a(v.TRENDS_CLICK_BACK, G);
   };
   return /* @__PURE__ */ C(
@@ -1243,21 +1282,21 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
       shouldShowHeaderShadow: !0,
       title: R,
       children: [
-        /* @__PURE__ */ C(w, { sx: { alignItems: "center", height: "100%" }, children: [
-          /* @__PURE__ */ C(ao, { sx: { borderRadius: 0, pb: 4, pt: 16, width: "100%" }, children: [
+        /* @__PURE__ */ C(x, { sx: { alignItems: "center", height: "100%" }, children: [
+          /* @__PURE__ */ C(mo, { sx: { borderRadius: 0, pb: 4, pt: 16, width: "100%" }, children: [
             /* @__PURE__ */ e(
               st,
               {
                 leftIcon: /* @__PURE__ */ e(ve, { categoryGuid: p }),
-                rightContent: oe(Math.abs(b), "0,0.00"),
+                rightContent: oe(Math.abs(S), "0,0.00"),
                 subtitle: y,
                 title: f
               }
             ),
-            /* @__PURE__ */ e(Ho, { chartColor: E, chartLabel: S }),
-            /* @__PURE__ */ C(w, { alignItems: "center", direction: "row", justifyContent: "space-between", sx: { mx: 24 }, children: [
+            /* @__PURE__ */ e(Fo, { chartColor: E, chartLabel: w }),
+            /* @__PURE__ */ C(x, { alignItems: "center", direction: "row", justifyContent: "space-between", sx: { mx: 24 }, children: [
               /* @__PURE__ */ e(Q, { bold: !0, variant: "body1", children: k }),
-              $ && /* @__PURE__ */ e(lo, { filter: P })
+              z && /* @__PURE__ */ e(ho, { filter: P })
             ] })
           ] }),
           /* @__PURE__ */ e(
@@ -1266,7 +1305,7 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
               bgcolor: "transparent",
               filter: P,
               height: "calc(100vh - 475px)",
-              onClick: h
+              onClick: m
             }
           )
         ] }),
@@ -1274,36 +1313,36 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
           We,
           {
             ariaLabelClose: u.close_aria,
-            isOpen: !!H,
-            onClose: () => h(""),
+            isOpen: !!N,
+            onClose: () => m(""),
             title: d.transaction,
-            children: H && /* @__PURE__ */ e(ct, { transaction: H })
+            children: N && /* @__PURE__ */ e(ct, { transaction: N })
           }
         )
       ]
     }
   );
-}), Wo = (t, r) => {
+}), zo = (t, r) => {
   const n = at(t, r), o = rt(t, r);
   return [n, o].filter((s) => s.length > 0);
-}, Oo = (t, r) => {
-  const [n, o] = t, s = n, c = o ?? n, a = [];
+}, Ko = (t, r) => {
+  const [n, o] = t, s = n, l = o ?? n, a = [];
   if (s) {
     const u = s.reduce((d, i) => d + i.y, 0);
     a.push({ label: r.income_label, amount: u });
   }
-  if (c) {
-    const u = c.reduce((d, i) => d + i.y, 0);
+  if (l) {
+    const u = l.reduce((d, i) => d + i.y, 0);
     a.push({ label: r.spending_label, amount: u });
   }
   return a;
-}, Go = ({
+}, Yo = ({
   availableHeight: t = 0,
   minHeight: r = 500,
   selectedDateRange: n,
   totals: o
 }) => {
-  const s = de(), { onEvent: c } = z(), { trends: a } = A(), { isSmallMobile: u, isMobile: d, isSmallTablet: i, isTablet: y } = q(), m = [s.palette.chart?.chart1, s.palette.chart?.chart2], _ = Wo(o, n), h = Oo(_, a), [p, f] = g.useState(0), x = 458, b = 195, R = 56, E = d || u ? b : i || y ? x : p;
+  const s = de(), { onEvent: l } = $(), { trends: a } = A(), { isSmallMobile: u, isMobile: d, isSmallTablet: i, isTablet: y } = q(), h = [s.palette.chart?.chart1, s.palette.chart?.chart2], _ = zo(o, n), m = Ko(_, a), [p, f] = g.useState(0), T = 458, S = 195, R = 56, E = d || u ? S : i || y ? T : p;
   return g.useEffect(() => {
     const k = Math.max(t - R, r);
     f(k);
@@ -1311,13 +1350,13 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
     Be,
     {
       baseline: "min",
-      colors: m,
+      colors: h,
       curveType: "bump",
       datasets: _,
       height: E,
-      labels: h,
+      labels: m,
       onItemClick: () => {
-        c(v.TRENDS_CLICK_CHART, G);
+        l(v.TRENDS_CLICK_CHART, G);
       },
       showArea: !0,
       showAxisHighlight: !0,
@@ -1330,7 +1369,7 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
       valueFormatterString: "0.0a"
     }
   );
-}, Bo = M(Go), Po = [
+}, jo = M(Yo), Uo = [
   "BillAmountNotStandard",
   "CategorySpendingV2",
   "CostOfLivingToIncome",
@@ -1364,158 +1403,158 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
   "WeeklyNewMerchantsV2",
   "WeeklyNoSpendDays",
   "WeeklySmallPurchasesSummary"
-], Vo = ({ onBackClick: t, onInsightCardClick: r, sx: n }) => {
-  const { onEvent: o } = z(), { config: s } = ot(), { isDesktop: c, isLargeDesktop: a, isMobile: u } = q(), { isAccountDataLoaded: d, loadAccountData: i, visibleAccounts: y } = Le(), {
-    categoriesLoaded: m,
+], Xo = ({ onBackClick: t, onInsightCardClick: r, sx: n }) => {
+  const { onEvent: o } = $(), { config: s } = ot(), { isDesktop: l, isLargeDesktop: a, isMobile: u } = q(), { isAccountDataLoaded: d, loadAccountData: i, visibleAccounts: y } = Ie(), {
+    categoriesLoaded: h,
     loadCategories: _,
-    loadDateRangeCategoryTotals: h,
+    loadDateRangeCategoryTotals: m,
     loadMonthlyCategoryTotals: p,
     monthlyCategoryTotals: f,
-    monthlyTotalsLoaded: x
-  } = J(), { isTransactionDataLoaded: b, loadTransactionData: R, setFilter: E } = De(), { selectedDateRange: S, setSelectedCategoryData: k, setSelectedDateRange: H } = _e(), { isInitialized: $, selectedAccounts: P, selectedAccountGuids: K } = Ce(), { trends: I, connect: te } = A(), { beatStore: O } = Ge(), se = co() && s.show_insights_widget_in_master, X = c || a, [ue, he] = g.useState(!1), [V, re] = g.useState(!1), [Y, ge] = g.useState("Chart"), [j, ae] = g.useState(""), [me, ie] = g.useState(!1), [le, D] = g.useState(window.innerHeight), F = X ? 56 : 0, l = le - 208, T = le - (se ? 550 + F : 266), [L, U] = g.useState(!1), ce = s.show_connections_widget_in_master;
-  Ie({
+    monthlyTotalsLoaded: T
+  } = J(), { isTransactionDataLoaded: S, loadTransactionData: R, setFilter: E } = De(), { selectedDateRange: w, setSelectedCategoryData: k, setSelectedDateRange: N } = _e(), { isInitialized: z, selectedAccounts: P, selectedAccountGuids: K } = Ce(), { trends: L, connect: te } = A(), { beatStore: O } = Ge(), se = po() && s.show_insights_widget_in_master, X = l || a, [ue, me] = g.useState(!1), [V, re] = g.useState(!1), [Y, ge] = g.useState("Chart"), [j, ae] = g.useState(""), [he, ie] = g.useState(!1), [le, D] = g.useState(window.innerHeight), F = X ? 56 : 0, c = le - 208, b = le - (se ? 550 + F : 266), [I, U] = g.useState(!1), ce = s.show_connections_widget_in_master;
+  Le({
     widgetName: "TrendsWidget",
     isLoaded: ue
   });
-  const Te = g.useMemo(() => V ? O.getFilteredBeats({ templates: Po }) : [], [V]);
+  const be = g.useMemo(() => V ? O.getFilteredBeats({ templates: Uo }) : [], [V]);
   g.useEffect(() => {
-    const N = () => D(window.innerHeight);
-    return window.addEventListener("resize", N), d || i().finally(), m || _().finally(), b || R().finally(), () => window.removeEventListener("resize", N);
+    const H = () => D(window.innerHeight);
+    return window.addEventListener("resize", H), d || i().finally(), h || _().finally(), S || R().finally(), () => window.removeEventListener("resize", H);
   }, []), g.useEffect(() => {
-    $ && (O.loadBeats().finally(() => re(!0)), h(P, S.start, S.end).then(() => {
+    z && (O.loadBeats().finally(() => re(!0)), m(P, w.start, w.end).then(() => {
       p(
         P,
-        S.start,
-        S.end
+        w.start,
+        w.end
       );
     }).finally(() => {
-      he(!0), o(v.TRENDS_LOAD_WIDGET, {
+      me(!0), o(v.TRENDS_LOAD_WIDGET, {
         ...G,
-        time_period: `${we(S.end, S.start)}M`
+        time_period: `${we(w.end, w.start)}M`
       });
     }));
-  }, [$, P, S]), g.useEffect(() => {
+  }, [z, P, w]), g.useEffect(() => {
     if (f.length !== 0) {
-      const N = {
+      const H = {
         accounts: K,
-        dateRange: { start: S.start, end: S.end }
+        dateRange: { start: w.start, end: w.end }
       };
       E({
-        ...N,
+        ...H,
         custom: (ee) => !!f.find(
           (fe) => fe.top_level_category_guid === ee.top_level_category_guid || fe.category_guid === ee.category_guid
         )
       });
     }
   }, [f]);
-  const pe = (N) => {
-    k(N), ie(!0);
+  const pe = (H) => {
+    k(H), ie(!0);
   }, Me = () => {
     k(null), ie(!1);
   }, Ae = () => {
     U(!0), o(v.TRENDS_CLICK_CONNECT_ACCOUNTS);
-  }, ft = (N, ee) => {
+  }, ft = (H, ee) => {
     ge(ee ?? Y), o(v.TRENDS_CLICK_TOGGLE_VIEW, {
       ...G,
       toggleView: ee
     });
-  }, yt = (N) => {
-    const ee = qe(N?.[0], 1), fe = N?.[1], bt = we(fe, ee);
-    H({ start: ee, end: fe }), o(v.TRENDS_CLICK_TIME_WINDOW, {
+  }, yt = (H) => {
+    const ee = qe(H?.[0], 1), fe = H?.[1], Tt = we(fe, ee);
+    N({ start: ee, end: fe }), o(v.TRENDS_CLICK_TIME_WINDOW, {
       ...G,
-      time_period: bt + "M"
+      time_period: Tt + "M"
     });
-  }, Ct = (N) => {
+  }, Ct = (H) => {
     o(v.TRENDS_CLICK_FILTER, {
       ...G,
-      filterValue: N
+      filterValue: H
     });
-  }, _t = (N) => {
-    ae(N);
-  }, Tt = () => {
+  }, _t = (H) => {
+    ae(H);
+  }, bt = () => {
     ae(""), o(v.TRENDS_CLICK_ALL_CATEGORIES, G);
   };
-  if (!$ || !ue || !x) return /* @__PURE__ */ e(Ee, {});
-  const Pe = y && y.length === 0 || f.length === 0, be = {
-    description: ce ? I.empty_state_sub_text : I.empty_state_sub_text_no_aggregation,
-    header: ce ? I.zero_state_content_header : I.zero_state_content_header_no_aggregation,
+  if (!z || !ue || !T) return /* @__PURE__ */ e(Ee, {});
+  const Pe = y && y.length === 0 || f.length === 0, Te = {
+    description: ce ? L.empty_state_sub_text : L.empty_state_sub_text_no_aggregation,
+    header: ce ? L.zero_state_content_header : L.zero_state_content_header_no_aggregation,
     onClick: ce ? Ae : void 0,
-    primaryButton: ce ? I.empty_state_primary : void 0
+    primaryButton: ce ? L.empty_state_primary : void 0
   };
   return /* @__PURE__ */ C(
     dt,
     {
       calendarActions: { onRangeChanged: yt },
-      dateRange: S,
+      dateRange: w,
       dateRangeVariant: u ? "timeframetabs" : "timeframebuttons",
       onAccountsFilterClick: Ct,
       onBackClick: t,
       sx: n,
-      title: I.title,
+      title: L.title,
       children: [
         /* @__PURE__ */ C(
-          w,
+          x,
           {
             sx: {
               px: u ? 0 : 48
             },
             children: [
               /* @__PURE__ */ C(
-                w,
+                x,
                 {
                   flexDirection: "row",
                   justifyContent: "space-between",
                   sx: { px: u ? 16 : 0, py: 16 },
                   children: [
                     /* @__PURE__ */ e(
-                      mt,
+                      ht,
                       {
                         selectedCategoryGuid: j,
-                        selectedDateRange: S
+                        selectedDateRange: w
                       }
                     ),
                     /* @__PURE__ */ e(gt, { onTabChange: ft, selectedTab: Y })
                   ]
                 }
               ),
-              /* @__PURE__ */ e(w, { alignItems: "center", flexDirection: "row", sx: { pb: 8 }, width: "100%", children: /* @__PURE__ */ e(W, { flexGrow: 1, children: j && /* @__PURE__ */ C(Se, { onClick: Tt, sx: { p: 0, pr: 5 }, children: [
-                /* @__PURE__ */ e(Qt, {}),
-                I.all_categories
+              /* @__PURE__ */ e(x, { alignItems: "center", flexDirection: "row", sx: { pb: 8 }, width: "100%", children: /* @__PURE__ */ e(W, { flexGrow: 1, children: j && /* @__PURE__ */ C(Se, { onClick: bt, sx: { p: 0, pr: 5 }, children: [
+                /* @__PURE__ */ e(oo, {}),
+                L.all_categories
               ] }) }) }),
               Pe && /* @__PURE__ */ e(
-                uo,
+                fo,
                 {
-                  header: be.header,
+                  header: Te.header,
                   icon: "multiline_chart",
-                  onClick: be.onClick,
-                  primaryButton: be.primaryButton,
-                  subText: be.description,
-                  sx: { height: l, maxWidth: 432 }
+                  onClick: Te.onClick,
+                  primaryButton: Te.primaryButton,
+                  subText: Te.description,
+                  sx: { height: c, maxWidth: 432 }
                 }
               ),
-              !Pe && /* @__PURE__ */ C(w, { flexDirection: X ? "row" : "column", gap: X ? 48 : 16, children: [
+              !Pe && /* @__PURE__ */ C(x, { flexDirection: X ? "row" : "column", gap: X ? 48 : 16, children: [
                 Y === "Chart" && /* @__PURE__ */ C(St, { children: [
                   /* @__PURE__ */ e(W, { sx: { width: X ? "68%" : "100%" }, children: /* @__PURE__ */ e(
-                    Bo,
+                    jo,
                     {
-                      availableHeight: l,
+                      availableHeight: c,
                       minHeight: 450,
-                      selectedDateRange: S,
+                      selectedDateRange: w,
                       totals: f
                     }
                   ) }),
-                  /* @__PURE__ */ C(w, { gap: 16, sx: { width: X ? "32%" : "100%" }, children: [
-                    se && V && Te.length > 0 && /* @__PURE__ */ e(
-                      ko,
+                  /* @__PURE__ */ C(x, { gap: 16, sx: { width: X ? "32%" : "100%" }, children: [
+                    se && V && be.length > 0 && /* @__PURE__ */ e(
+                      Vo,
                       {
-                        beats: Te,
+                        beats: be,
                         onInsightCardClick: r
                       }
                     ),
                     /* @__PURE__ */ e(
-                      Ao,
+                      Bo,
                       {
-                        availableHeight: T,
+                        availableHeight: b,
                         onCategoryClick: pe
                       }
                     )
@@ -1527,30 +1566,30 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
                     height: "unset",
                     onClickRow: _t,
                     selectedCategory: j,
-                    selectedDateRange: S
+                    selectedDateRange: w
                   }
                 ) })
               ] }),
-              me && /* @__PURE__ */ e(No, { onClose: Me })
+              he && /* @__PURE__ */ e($o, { onClose: Me })
             ]
           }
         ),
         /* @__PURE__ */ e(
-          ho,
+          yo,
           {
             onClose: () => U(!1),
-            showConnectWidget: L,
+            showConnectWidget: I,
             title: te.mini_title
           }
         )
       ]
     }
   );
-}, Qn = M(Vo);
+}, is = M(Xo);
 export {
-  Un as TrendsFullWidget,
-  Zn as TrendsMicroWidget,
-  Xn as TrendsMiniWidget,
-  es as TrendsStore,
-  Qn as TrendsWidget
+  ss as TrendsFullWidget,
+  as as TrendsMicroWidget,
+  rs as TrendsMiniWidget,
+  ds as TrendsStore,
+  is as TrendsWidget
 };