@mx-cartographer/experiences 7.4.15 → 7.5.0-alpha.bb1

package/dist/trends/index.es.js

@@ -1,159 +1,162 @@
-import { jsxs as f, jsx as e, Fragment as rt } from "react/jsx-runtime";
-import u, { useRef as at, useState as it, useEffect as ct } from "react";
-import { observer as R } from "mobx-react-lite";
-import { CategoryIcon as Se, Text as $, Icon as fe, P as he, H3 as Fe, ChevronRightIcon as lt } from "@mxenabled/mxui";
+import { jsxs as f, jsx as e, Fragment as ct } from "react/jsx-runtime";
+import u, { useRef as lt, useState as dt, useEffect as ut } from "react";
+import { observer as A } from "mobx-react-lite";
+import { CategoryIcon as xe, Text as P, Icon as be, P as he, H3 as Ye, ChevronRightIcon as ht } from "@mxenabled/mxui";
 import H from "@mui/material/Box";
-import b from "@mui/material/Stack";
-import _e from "@mui/material/Button";
-import { addSeconds as $e } from "date-fns/addSeconds";
-import { differenceInCalendarMonths as Re } from "date-fns/differenceInCalendarMonths";
-import { useTheme as be } from "@mui/material/styles";
-import { LineChart as dt } from "@mui/x-charts";
+import S from "@mui/material/Stack";
+import Te from "@mui/material/Button";
+import { addSeconds as je } from "date-fns/addSeconds";
+import { differenceInCalendarMonths as He } from "date-fns/differenceInCalendarMonths";
+import { useTheme as me } from "@mui/material/styles";
+import { LineChart as gt } from "@mui/x-charts";
 import { u as ee } from "../useScreenSize-B6JyS_Lj.mjs";
-import { u as ut } from "../useDimensions-27p2evRx.mjs";
-import ht from "@mui/material/Card";
-import gt from "@mui/material/CardContent";
-import ke from "@mui/material/Divider";
-import Oe from "@mui/material/Grid";
-import { u as N, m as U, g as V, b as me, h as xe, d as ve, v as pe, p as ze, f as Ne, a as mt } from "../hooks-ZMp65DFz.mjs";
-import { b as Ke } from "../Localization-2MODESHW.mjs";
-import { C as Te } from "../CurrencyText-Dr0EZ7bp.mjs";
-import { useTheme as pt, Card as Ct, CardContent as yt, Box as ft, Stack as _t } from "@mui/material";
-import { f as J, a as F } from "../Dialog-BPTr3qHE.mjs";
-import { C as Ae, c as Tt } from "../Category-CevNQ03n.mjs";
-import { f as se, a as St } from "../NumberFormatting-DjTD0t3W.mjs";
-import { a as bt, g as xt, L as je } from "../TrendsStore-BW9FGQeE.mjs";
-import { T as Gn } from "../TrendsStore-BW9FGQeE.mjs";
-import { i as vt, c as wt, d as Dt, e as It, f as Et, h as Lt, b as Ye, g as Ue, j as Ge } from "../SpendingData-BuJ03S9d.mjs";
-import Mt from "@mui/material/ToggleButton";
-import At from "@mui/material/ToggleButtonGroup";
-import { DataGridPro as Rt } from "@mui/x-data-grid-pro";
-import { H as Be } from "../HeaderCell-DjuifqHJ.mjs";
-import { T as G, b as kt } from "../ViewMoreMicroCard-DwR0v_ll.mjs";
-import { A as v, W as Xe } from "../WidgetContainer-CoFDmQRE.mjs";
-import { a as Ze, T as Qe } from "../TransactionDetails-m5PddMQn.mjs";
-import { D as He } from "../Drawer-By9V-B5L.mjs";
-import { u as we } from "../useWidgetLoadTimer-hIOioiKx.mjs";
+import { u as mt } from "../useDimensions-27p2evRx.mjs";
+import pt from "@mui/material/Card";
+import Ct from "@mui/material/CardContent";
+import Ne from "@mui/material/Divider";
+import Be from "@mui/material/Grid";
+import { u as k, m as $, g as V, b as pe, h as ve, d as we, v as Ce, p as Ue, f as Oe, a as yt } from "../hooks-ZMp65DFz.mjs";
+import { b as ft } from "../Localization-2MODESHW.mjs";
+import { C as Se } from "../CurrencyText-Dr0EZ7bp.mjs";
+import { useTheme as _t, Card as bt, CardContent as Tt, Box as St, Stack as xt } from "@mui/material";
+import { f as J, a as B } from "../Dialog-BPTr3qHE.mjs";
+import { C as ke, b as Ve, c as vt } from "../Category-CevNQ03n.mjs";
+import { f as se, a as wt } from "../NumberFormatting-DjTD0t3W.mjs";
+import { c as It, a as Fe, g as Lt, L as Xe } from "../TrendsStore-yO7qYv97.mjs";
+import { T as Kn } from "../TrendsStore-yO7qYv97.mjs";
+import { c as Et, i as Dt, d as Mt, e as At, b as Ze, g as qe, f as Pe } from "../SpendingData-DQ1b9uqq.mjs";
+import kt from "@mui/material/ToggleButton";
+import Rt from "@mui/material/ToggleButtonGroup";
+import { parseISO as _e } from "date-fns/parseISO";
+import { isAfter as Ht } from "date-fns/isAfter";
+import { isBefore as Nt } from "date-fns/isBefore";
+import { isEqual as Wt, subMonths as Ot } from "date-fns";
+import { DataGridPro as Gt } from "@mui/x-data-grid-pro";
+import { H as Re } from "../HeaderCell-DjuifqHJ.mjs";
+import { T as G, b as Bt } from "../ViewMoreMicroCard-DwR0v_ll.mjs";
+import { A as I, W as Qe } from "../WidgetContainer-CoFDmQRE.mjs";
+import { a as Je, T as et } from "../TransactionDetails-m5PddMQn.mjs";
+import { D as We } from "../Drawer-By9V-B5L.mjs";
+import { u as Ie } from "../useWidgetLoadTimer-hIOioiKx.mjs";
 import { L as ge } from "../Loader-DUaFpDGv.mjs";
-import { L as We } from "../LineChart-BQRxZF3p.mjs";
-import { M as Ht } from "../MiniWidgetContainer-Bg02sF1Y.mjs";
-import { subMonths as Nt } from "date-fns";
-import { TrendingUp as Wt, TrendingDown as Ot, MultilineChart as Gt, ExpandLess as Bt, ExpandMore as Vt } from "@mxenabled/mx-icons";
-import { M as Pt } from "../MicroWidgetContainer-r6mtxRer.mjs";
-import Ft from "@mui/material/Collapse";
-import $t from "@mui/material/List";
-import zt from "@mui/material/ListItem";
-import Kt from "@mui/material/ListItemButton";
-import jt from "@mui/material/ListItemIcon";
-import Yt from "@mui/material/ListItemText";
-import qe from "@mui/material/styles/useTheme";
-import Ut from "@mui/material/Paper";
-import { b as Xt } from "../CategoryUtil-DUM8NuGO.mjs";
-import { E as Zt } from "../ExportCsvAction-Cglo8Mca.mjs";
-import { u as Qt } from "../useInsightsEnabled-B7dxpDrX.mjs";
-import { E as qt } from "../EmptyState-DoxNUae-.mjs";
-import { l as Jt } from "../ConnectDrawer-BkvlItWx.mjs";
-const Je = ({ categoryGuid: o, topLevelCategoryGuid: r }) => {
-  const { categories: t } = N(), { getCategoryName: n } = U(), s = n(o);
-  return /* @__PURE__ */ f(b, { alignItems: "center", direction: "column", gap: "8", justifyContent: "center", mb: 4, children: [
+import { L as Ge } from "../LineChart-BQRxZF3p.mjs";
+import { M as Vt } from "../MiniWidgetContainer-Bg02sF1Y.mjs";
+import { TrendingUp as Ft, TrendingDown as Pt, MultilineChart as $t, ExpandLess as zt, ExpandMore as Kt } from "@mxenabled/mx-icons";
+import { M as Yt } from "../MicroWidgetContainer-r6mtxRer.mjs";
+import jt from "@mui/material/Collapse";
+import Ut from "@mui/material/List";
+import Xt from "@mui/material/ListItem";
+import Zt from "@mui/material/ListItemButton";
+import qt from "@mui/material/ListItemIcon";
+import Qt from "@mui/material/ListItemText";
+import tt from "@mui/material/styles/useTheme";
+import Jt from "@mui/material/Paper";
+import { b as eo } from "../CategoryUtil-DUM8NuGO.mjs";
+import { E as to } from "../ExportCsvAction-Cglo8Mca.mjs";
+import { u as oo } from "../useInsightsEnabled-B7dxpDrX.mjs";
+import { E as no } from "../EmptyState-DoxNUae-.mjs";
+import { l as so } from "../ConnectDrawer-BkvlItWx.mjs";
+const ot = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
+  const { categories: n } = k(), { getCategoryName: o } = $(), s = o(t);
+  return /* @__PURE__ */ f(S, { alignItems: "center", direction: "column", gap: "8", justifyContent: "center", mb: 4, children: [
     /* @__PURE__ */ e(
       H,
       {
-        "aria-label": Ke(t.category_icon_label_aria, s),
+        "aria-label": ft(n.category_icon_label_aria, s),
         mb: 4,
         role: "img",
-        children: /* @__PURE__ */ e(Se, { categoryGuid: r })
+        children: /* @__PURE__ */ e(xe, { categoryGuid: r })
       }
     ),
-    /* @__PURE__ */ e($, { variant: "Body", children: s })
+    /* @__PURE__ */ e(P, { variant: "Body", children: s })
   ] });
-}, eo = ({
-  categoryGuids: { guid: o, topLevelGuid: r },
-  hoveredAreaData: t,
-  cursorPosition: n,
+}, ro = ({
+  categoryGuids: { guid: t, topLevelGuid: r },
+  hoveredAreaData: n,
+  cursorPosition: o,
   chartContainerRef: s
 }) => {
-  const h = be(), g = at(null), [d, c] = it({ x: n.x, y: n.y });
-  if (ct(() => {
+  const h = me(), g = lt(null), [l, c] = dt({ x: o.x, y: o.y });
+  if (ut(() => {
     (() => {
-      const l = g.current, T = s.current;
-      if (!l || !T) return;
-      const a = l.getBoundingClientRect(), p = T.getBoundingClientRect();
-      let _ = n.x, y = n.y;
-      _ + a.width * 2 > p.right ? _ = n.x - a.width : _ - a.width < p.left && (_ = n.x), y + a.height * 2 > p.bottom && (y = n.y - a.height), c({ x: _, y });
+      const d = g.current, b = s.current;
+      if (!d || !b) return;
+      const i = d.getBoundingClientRect(), C = b.getBoundingClientRect();
+      let p = o.x, _ = o.y;
+      p + i.width * 2 > C.right ? p = o.x - i.width : p - i.width < C.left && (p = o.x), _ + i.height * 2 > C.bottom && (_ = o.y - i.height), c({ x: p, y: _ });
     })();
-  }, [n, s]), !t) return null;
-  const m = t.reduce((C, l) => C + l.y, 0);
+  }, [o, s]), !n) return null;
+  const m = n.reduce((y, d) => y + d.y, 0);
   return /* @__PURE__ */ e(
-    ht,
+    pt,
     {
       ref: g,
       sx: {
         position: "absolute",
-        top: d.y,
-        left: d.x,
+        top: l.y,
+        left: l.x,
         width: 250,
         pointerEvents: "none"
       },
-      children: /* @__PURE__ */ f(gt, { children: [
+      children: /* @__PURE__ */ f(Ct, { children: [
         /* @__PURE__ */ f(H, { alignItems: "center", display: "flex", flexDirection: "column", children: [
-          /* @__PURE__ */ e(Je, { categoryGuid: o, topLevelCategoryGuid: r }),
-          /* @__PURE__ */ e($, { variant: "Small", children: `${t.length}-month total` }),
-          /* @__PURE__ */ e(Te, { amount: m, bold: !0, formatString: "0,0", variant: "body2" })
+          /* @__PURE__ */ e(ot, { categoryGuid: t, topLevelCategoryGuid: r }),
+          /* @__PURE__ */ e(P, { variant: "Small", children: `${n.length}-month total` }),
+          /* @__PURE__ */ e(Se, { amount: m, bold: !0, formatString: "0,0", variant: "body2" })
         ] }),
-        /* @__PURE__ */ e(ke, { sx: { my: 16, width: "100%" } }),
-        /* @__PURE__ */ e(Oe, { container: !0, children: t.map((C, l) => /* @__PURE__ */ f(u.Fragment, { children: [
-          l > 0 && l % 3 === 0 && /* @__PURE__ */ e(ke, { sx: { my: 16, width: "100%" } }),
-          /* @__PURE__ */ e(Oe, { item: !0, xs: 4, children: /* @__PURE__ */ f(H, { alignItems: "center", display: "flex", flexDirection: "column", children: [
-            /* @__PURE__ */ e($, { color: h.palette.text.secondary, variant: "XSmall", children: C.x }),
+        /* @__PURE__ */ e(Ne, { sx: { my: 16, width: "100%" } }),
+        /* @__PURE__ */ e(Be, { container: !0, children: n.map((y, d) => /* @__PURE__ */ f(u.Fragment, { children: [
+          d > 0 && d % 3 === 0 && /* @__PURE__ */ e(Ne, { sx: { my: 16, width: "100%" } }),
+          /* @__PURE__ */ e(Be, { item: !0, xs: 4, children: /* @__PURE__ */ f(H, { alignItems: "center", display: "flex", flexDirection: "column", children: [
+            /* @__PURE__ */ e(P, { color: h.palette.text.secondary, variant: "XSmall", children: y.x }),
             /* @__PURE__ */ e(
-              Te,
+              Se,
               {
-                amount: C.y,
+                amount: y.y,
                 bold: !0,
                 formatString: "0,0",
                 variant: "Body"
               }
             )
           ] }) })
-        ] }, l)) })
+        ] }, d)) })
       ] })
     }
   );
-}, to = R(eo), oo = ({
-  categoryGuids: { guid: o, topLevelGuid: r },
-  itemData: { dataIndex: t },
-  series: n,
+}, ao = A(ro), io = ({
+  categoryGuids: { guid: t, topLevelGuid: r },
+  itemData: { dataIndex: n },
+  series: o,
   xData: s
 }) => {
-  const h = pt(), g = n.data[t], d = s[t];
-  return g === void 0 || !d ? null : /* @__PURE__ */ e(Ct, { sx: { pt: 4, px: 8 }, children: /* @__PURE__ */ e(yt, { children: /* @__PURE__ */ f(ft, { alignItems: "center", display: "flex", flexDirection: "column", children: [
-    /* @__PURE__ */ e(Je, { categoryGuid: o, topLevelCategoryGuid: r }),
-    /* @__PURE__ */ e($, { color: h.palette.text.secondary, variant: "Small", children: J(d, F.MONTH_SHORT_YEAR) }),
-    /* @__PURE__ */ e(Te, { amount: String(g), bold: !0, formatString: "0,0", variant: "Body" })
+  const h = _t(), g = o.data[n], l = s[n];
+  return g === void 0 || !l ? null : /* @__PURE__ */ e(bt, { sx: { pt: 4, px: 8 }, children: /* @__PURE__ */ e(Tt, { children: /* @__PURE__ */ f(St, { alignItems: "center", display: "flex", flexDirection: "column", children: [
+    /* @__PURE__ */ e(ot, { categoryGuid: t, topLevelCategoryGuid: r }),
+    /* @__PURE__ */ e(P, { color: h.palette.text.secondary, variant: "Small", children: J(l, B.MONTH_SHORT_YEAR) }),
+    /* @__PURE__ */ e(Se, { amount: String(g), bold: !0, formatString: "0,0", variant: "Body" })
   ] }) }) });
-}, no = ({
-  sx: o,
+}, co = ({
+  sx: t,
   categoryGuids: r,
-  hoveredLegend: t,
-  legendRef: n,
+  hoveredLegend: n,
+  legendRef: o,
   onHoverLegend: s,
   onClickLegend: h
 }) => {
-  const { isMobile: g } = ee(), { getCategoryName: d } = U();
+  const { isMobile: g } = ee(), { getCategoryName: l } = $();
   return /* @__PURE__ */ e(
-    b,
+    S,
     {
       direction: "row",
       flexWrap: "wrap",
       gap: g ? 2 : 6,
       justifyContent: "start",
-      ref: n,
-      sx: o,
+      ref: o,
+      sx: t,
       children: r.map(({ guid: c, top_level_guid: m }) => {
-        const C = t === c, l = Ae[c], T = Ae[m], a = l ?? T ?? Ae.default, p = a + "33";
+        const y = n === c, d = ke[c], b = ke[m], i = d ?? b ?? ke.default, C = i + "33";
         return /* @__PURE__ */ f(
-          _e,
+          Te,
           {
             onClick: () => h(c),
             onMouseEnter: () => s(c),
@@ -167,7 +170,7 @@ const Je = ({ categoryGuid: o, topLevelCategoryGuid: r }) => {
               paddingX: 8,
               paddingY: 4,
               borderRadius: 1,
-              opacity: C ? 1 : 0.7
+              opacity: y ? 1 : 0.7
             },
             children: [
               /* @__PURE__ */ e(
@@ -178,11 +181,11 @@ const Je = ({ categoryGuid: o, topLevelCategoryGuid: r }) => {
                     height: 16,
                     marginRight: g ? 5 : 10,
                     borderRadius: "2px",
-                    backgroundColor: t ? C ? a : p : a
+                    backgroundColor: n ? y ? i : C : i
                   }
                 }
               ),
-              /* @__PURE__ */ e($, { variant: "Body", children: d(c) })
+              /* @__PURE__ */ e(P, { variant: "Body", children: l(c) })
             ]
           },
           c
@@ -190,111 +193,111 @@ const Je = ({ categoryGuid: o, topLevelCategoryGuid: r }) => {
       })
     }
   );
-}, so = ({
-  onHoverArea: o,
+}, lo = ({
+  onHoverArea: t,
   onHoverPoint: r,
-  onHoverLegend: t,
-  onClickLegend: n,
+  onHoverLegend: n,
+  onClickLegend: o,
   stackedDatasets: s,
   unstackedDatasets: h = [],
   availableHeight: g = 0,
-  minimumHeight: d = 350
+  minimumHeight: l = 350
 }) => {
-  const c = be(), { isMobile: m } = ee(), [C, { height: l }] = ut(), T = u.useRef(null), [a, p] = u.useState(0);
+  const c = me(), { isMobile: m } = ee(), [y, { height: d }] = mt(), b = u.useRef(null), [i, C] = u.useState(0);
   u.useEffect(() => {
-    const i = Math.max(g - l, d);
-    p(i);
-  }, [g, l]);
-  const [_, y] = u.useState(null), [E, x] = u.useState({
+    const a = Math.max(g - d, l);
+    C(a);
+  }, [g, d]);
+  const [p, _] = u.useState(null), [L, v] = u.useState({
     hoveredSeriesId: null,
     hoveredAreaData: null,
     isAreaHovered: !1,
     cursorPos: { x: 0, y: 0 }
-  }), { hoveredSeriesId: I, hoveredAreaData: W, isAreaHovered: L, cursorPos: O } = E, A = L && I && W, M = !A, P = [...s, ...h], z = P[0]?.dataset.length ?? 0, X = P.flatMap((i) => i.dataset.map((S) => S.x)), Ce = P.flatMap((i) => i.dataset.map((S) => S.y)), te = s[0]?.dataset?.map(
-    (i, S) => s.reduce((D, Y) => D + Y.dataset[S]?.y || 0, 0)
+  }), { hoveredSeriesId: D, hoveredAreaData: N, isAreaHovered: x, cursorPos: M } = L, z = x && D && N, W = !z, F = [...s, ...h], K = F[0]?.dataset.length ?? 0, X = F.flatMap((a) => a.dataset.map((T) => T.x)), ye = F.flatMap((a) => a.dataset.map((T) => T.y)), te = s[0]?.dataset?.map(
+    (a, T) => s.reduce((E, U) => E + U.dataset[T]?.y || 0, 0)
   ) ?? [0], re = Math.max(...te), Z = Math.max(
-    ...h.flatMap((i) => i.dataset.map((S) => S.y))
-  ), ce = Math.floor(Math.min(...Ce) / 100) * 100, oe = Math.ceil(Math.max(re, Z) / 100) * 100, K = s.map((i, S) => ({
-    id: `stacked-${S}`,
-    guid: i.category_guid,
-    top_level_guid: i.top_level_category_guid,
+    ...h.flatMap((a) => a.dataset.map((T) => T.y))
+  ), ce = Math.floor(Math.min(...ye) / 100) * 100, oe = Math.ceil(Math.max(re, Z) / 100) * 100, Y = s.map((a, T) => ({
+    id: `stacked-${T}`,
+    guid: a.category_guid,
+    top_level_guid: a.top_level_category_guid,
     area: !0,
-    color: s[S].category_color ?? c.palette.primary.main,
-    data: i.dataset.map((D) => D.y),
-    label: s[S].category_name,
+    color: s[T].category_color ?? c.palette.primary.main,
+    data: a.dataset.map((E) => E.y),
+    label: s[T].category_name,
     stack: "total",
     type: "line",
     highlightScope: { highlight: "item" },
-    valueFormatter: (D) => se(D, "0,0")
-  })), ae = h.map((i, S) => ({
-    id: `unstacked-${S}`,
-    guid: i.category_guid,
-    top_level_guid: i.top_level_category_guid,
+    valueFormatter: (E) => se(E, "0,0")
+  })), ae = h.map((a, T) => ({
+    id: `unstacked-${T}`,
+    guid: a.category_guid,
+    top_level_guid: a.top_level_category_guid,
     area: !1,
-    color: i.category_color,
-    data: i.dataset.map((D) => D.y),
-    label: i.category_name,
+    color: a.category_color,
+    data: a.dataset.map((E) => E.y),
+    label: a.category_name,
     type: "line",
-    valueFormatter: (D) => se(D, "0,0")
-  })), ne = [...K, ...ae], ie = [
-    ...K.map(({ guid: i, top_level_guid: S }) => ({
-      guid: i,
-      top_level_guid: S
+    valueFormatter: (E) => se(E, "0,0")
+  })), ne = [...Y, ...ae], ie = [
+    ...Y.map(({ guid: a, top_level_guid: T }) => ({
+      guid: a,
+      top_level_guid: T
     })),
-    ...ae.map(({ guid: i, top_level_guid: S }) => ({
-      guid: i,
-      top_level_guid: S
+    ...ae.map(({ guid: a, top_level_guid: T }) => ({
+      guid: a,
+      top_level_guid: T
     }))
-  ], Q = (i) => {
-    const D = i.startsWith("stacked-") ? s[parseInt(i.split("-")[1])] : h[parseInt(i.split("-")[1])];
+  ], q = (a) => {
+    const E = a.startsWith("stacked-") ? s[parseInt(a.split("-")[1])] : h[parseInt(a.split("-")[1])];
     return {
-      guid: D?.category_guid,
-      topLevelGuid: D?.top_level_category_guid
+      guid: E?.category_guid,
+      topLevelGuid: E?.top_level_category_guid
     };
-  }, w = (i) => {
-    y(i), t?.(i ?? "");
-  }, B = (i) => {
-    n?.(i ?? "");
+  }, w = (a) => {
+    _(a), n?.(a ?? "");
+  }, O = (a) => {
+    o?.(a ?? "");
   }, j = () => {
-    const i = Q(String(I)).guid;
-    i && n?.(i);
-  }, le = (i) => {
-    const S = String(i?.seriesId), D = Q(S).guid, Y = ne.find((de) => de.id === S), Ie = Y && i?.dataIndex !== void 0, Ee = Y && i?.dataIndex === void 0;
-    if (Ie)
-      x({
-        hoveredSeriesId: S,
+    const a = q(String(D)).guid;
+    a && o?.(a);
+  }, le = (a) => {
+    const T = String(a?.seriesId), E = q(T).guid, U = ne.find((de) => de.id === T), Ee = U && a?.dataIndex !== void 0, De = U && a?.dataIndex === void 0;
+    if (Ee)
+      v({
+        hoveredSeriesId: T,
         hoveredAreaData: null,
         isAreaHovered: !1,
-        cursorPos: O
-      }), r?.(D);
-    else if (Ee) {
-      const de = Y?.data.map((Le, Me) => ({
-        x: X[Me],
-        y: Le
+        cursorPos: M
+      }), r?.(E);
+    else if (De) {
+      const de = U?.data.map((Me, Ae) => ({
+        x: X[Ae],
+        y: Me
       })) ?? [];
-      x({
-        hoveredSeriesId: S,
+      v({
+        hoveredSeriesId: T,
         hoveredAreaData: de,
         isAreaHovered: !0,
-        cursorPos: O
-      }), o?.(D);
+        cursorPos: M
+      }), t?.(E);
     } else
-      x({
+      v({
         hoveredSeriesId: null,
         hoveredAreaData: null,
         isAreaHovered: !1,
-        cursorPos: O
+        cursorPos: M
       });
-  }, ye = (i) => {
-    const S = i.currentTarget.getBoundingClientRect();
-    x((D) => ({
-      ...D,
+  }, fe = (a) => {
+    const T = a.currentTarget.getBoundingClientRect();
+    v((E) => ({
+      ...E,
       cursorPos: {
-        x: i.clientX - S.left,
-        y: i.clientY - S.top
+        x: a.clientX - T.left,
+        y: a.clientY - T.top
       }
     }));
-  }, De = {
+  }, Le = {
     p: 4,
     "& .MuiBarLabel-root": {
       fontSize: 10,
@@ -310,18 +313,18 @@ const Je = ({ categoryGuid: o, topLevelCategoryGuid: r }) => {
     '& [class*="MuiLineElement-series-unstacked-"]': {
       strokeWidth: 3
     },
-    ..._ && K.reduce((i, S, D) => {
-      const Y = `.MuiAreaElement-series-stacked-${D}`;
-      return i[Y] = {
-        opacity: K[D].guid === _ ? 0.9 : 0.2
-      }, i;
+    ...p && Y.reduce((a, T, E) => {
+      const U = `.MuiAreaElement-series-stacked-${E}`;
+      return a[U] = {
+        opacity: Y[E].guid === p ? 0.9 : 0.2
+      }, a;
     }, {})
   };
   return /* @__PURE__ */ e(
     H,
     {
-      onMouseMove: ye,
-      ref: T,
+      onMouseMove: fe,
+      ref: b,
       sx: {
         position: "relative",
         touchAction: "pan-y",
@@ -334,16 +337,16 @@ const Je = ({ categoryGuid: o, topLevelCategoryGuid: r }) => {
         }
       },
       children: /* @__PURE__ */ f(
-        b,
+        S,
         {
           direction: { xs: "column", md: "column" },
           spacing: { xs: 0, md: 4 },
           sx: { width: "100%", position: "relative" },
           children: [
             /* @__PURE__ */ e(
-              dt,
+              gt,
               {
-                height: a,
+                height: i,
                 margin: { bottom: 50 },
                 onAreaClick: j,
                 onHighlightChange: le,
@@ -355,25 +358,25 @@ const Je = ({ categoryGuid: o, topLevelCategoryGuid: r }) => {
                   }
                 },
                 slots: {
-                  itemContent: (i) => M && I ? /* @__PURE__ */ e(
-                    oo,
+                  itemContent: (a) => W && D ? /* @__PURE__ */ e(
+                    io,
                     {
-                      categoryGuids: Q(I),
+                      categoryGuids: q(D),
                       xData: X,
-                      ...i
+                      ...a
                     }
                   ) : null
                 },
-                sx: De,
+                sx: Le,
                 tooltip: {
-                  trigger: M ? "item" : "none"
+                  trigger: W ? "item" : "none"
                 },
                 xAxis: [
                   {
                     data: X,
                     scaleType: "time",
-                    valueFormatter: (i) => J(i, F.MONTH_SHORT_YEAR),
-                    tickNumber: z
+                    valueFormatter: (a) => J(a, B.MONTH_SHORT_YEAR),
+                    tickNumber: K
                     // How many ticks to show on the x-axis
                   }
                 ],
@@ -386,25 +389,25 @@ const Je = ({ categoryGuid: o, topLevelCategoryGuid: r }) => {
               }
             ),
             /* @__PURE__ */ e(
-              no,
+              co,
               {
                 categoryGuids: ie,
-                hoveredLegend: _,
-                legendRef: C,
-                onClickLegend: B,
+                hoveredLegend: p,
+                legendRef: y,
+                onClickLegend: O,
                 onHoverLegend: w,
                 sx: { px: m ? 0 : 24 }
               }
             ),
-            A && /* @__PURE__ */ e(
-              to,
+            z && /* @__PURE__ */ e(
+              ao,
               {
-                categoryGuids: Q(I),
-                chartContainerRef: T,
-                cursorPosition: O,
-                hoveredAreaData: W.map((i) => ({
-                  ...i,
-                  x: J(i.x, F.MONTH_SHORT_YEAR)
+                categoryGuids: q(D),
+                chartContainerRef: b,
+                cursorPosition: M,
+                hoveredAreaData: N.map((a) => ({
+                  ...a,
+                  x: J(a.x, B.MONTH_SHORT_YEAR)
                 }))
               }
             )
@@ -413,29 +416,32 @@ const Je = ({ categoryGuid: o, topLevelCategoryGuid: r }) => {
       )
     }
   );
-}, et = ({ selectedTab: o, onTabChange: r }) => /* @__PURE__ */ e(
-  At,
+}, nt = ({ selectedTab: t, onTabChange: r }) => /* @__PURE__ */ e(
+  Rt,
   {
     exclusive: !0,
     onChange: r,
     orientation: "horizontal",
-    value: o,
-    children: ["Chart", "Table"].map((t) => /* @__PURE__ */ e(Mt, { color: "primary", sx: { width: 56 }, value: t, children: t === "Chart" ? /* @__PURE__ */ e(fe, { name: "table_chart_view" }) : /* @__PURE__ */ e(fe, { name: "format_list_bulleted" }) }, t))
+    value: t,
+    children: ["Chart", "Table"].map((n) => /* @__PURE__ */ e(kt, { color: "primary", sx: { width: 56 }, value: n, children: n === "Chart" ? /* @__PURE__ */ e(be, { name: "table_chart_view" }) : /* @__PURE__ */ e(be, { name: "format_list_bulleted" }) }, n))
   }
-), tt = ({ selectedDateRange: o, selectedCategoryGuid: r }) => {
-  const { trends: t } = N(), { isMobile: n, isDesktop: s } = ee(), { getCategoryName: h } = U(), g = u.useMemo(() => {
-    const d = J(
-      o.start,
-      n ? F.MONTH_SHORT_YEAR : F.MONTH_YEAR
+), st = ({ selectedDateRange: t, selectedCategoryGuid: r }) => {
+  const { trends: n } = k(), { isMobile: o, isDesktop: s } = ee(), { getCategoryName: h } = $(), g = u.useMemo(() => {
+    const l = t.start.getFullYear() === t.end.getFullYear() ? J(
+      t.start,
+      o ? B.MONTH_SHORT : B.MONTH_LONG
+    ) : J(
+      t.start,
+      o ? B.MONTH_SHORT_YEAR : B.MONTH_YEAR
     ), c = J(
-      o.end,
-      n ? F.MONTH_SHORT_YEAR : F.MONTH_YEAR
+      t.end,
+      o ? B.MONTH_SHORT_YEAR : B.MONTH_YEAR
     );
-    return `${d} - ${c}`;
-  }, [o, n]);
+    return `${l} - ${c}`;
+  }, [t, o]);
   return /* @__PURE__ */ f(H, { sx: { mr: 10, minWidth: "60%" }, children: [
     /* @__PURE__ */ e(
-      $,
+      P,
       {
         display: "block",
         fontWeight: 700,
@@ -445,274 +451,309 @@ const Je = ({ categoryGuid: o, topLevelCategoryGuid: r }) => {
           textOverflow: "unset"
         },
         variant: s ? "H3" : "Body",
-        children: h(r) || t.sub_title
+        children: h(r) || n.sub_title
       }
     ),
-    /* @__PURE__ */ e($, { variant: s ? "Body" : "Small", children: g })
+    /* @__PURE__ */ e(P, { variant: s ? "subtitle1" : "body2", children: g })
   ] });
-}, ro = (o) => {
-  const r = o.row[o.field];
-  return /* @__PURE__ */ e(b, { alignItems: "flex-end", tabIndex: o.tabIndex, children: /* @__PURE__ */ e(Te, { amount: r, variant: "Small" }) });
-}, ao = ({ categoryGuid: o, topLevelCategoryGuid: r }) => {
-  const { getCategoryName: t } = U(), { categories: n } = N(), s = n.default_categories[o]?.replace(/&amp;/g, "&") ?? t(o);
-  return /* @__PURE__ */ f(b, { alignItems: "center", direction: "row", justifyContent: "center", children: [
-    /* @__PURE__ */ e(
-      H,
-      {
-        "aria-label": Ke(n.category_icon_label_aria, s),
-        role: "img",
-        children: /* @__PURE__ */ e(Se, { categoryGuid: r })
-      }
-    ),
-    /* @__PURE__ */ e($, { sx: { ml: 12, pb: 6 }, variant: "Small", children: s })
+}, $e = (t) => {
+  const r = t.row.category_guid, n = t.row.top_level_category_guid, o = r === Ve.INCOME || n === Ve.INCOME, s = t.row[t.field];
+  return /* @__PURE__ */ e(S, { alignItems: "flex-end", direction: "row", tabIndex: t.tabIndex, children: /* @__PURE__ */ e(
+    Se,
+    {
+      amount: s,
+      isIncome: o,
+      sx: { fontWeight: o ? 600 : 500 },
+      symbol: o ? "+" : void 0,
+      variant: "body2"
+    }
+  ) });
+}, uo = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
+  const { getCategoryName: n } = $(), { categories: o } = k(), s = o.default_categories[t]?.replace(/&amp;/g, "&") ?? n(t);
+  return /* @__PURE__ */ f(S, { alignItems: "center", direction: "row", justifyContent: "center", children: [
+    /* @__PURE__ */ e(H, { "aria-hidden": !0, children: /* @__PURE__ */ e(xe, { categoryGuid: r, variant: "twotone" }) }),
+    /* @__PURE__ */ e(P, { sx: { ml: 12, pb: 6 }, variant: "body2", children: s })
   ] });
-}, io = (o) => /* @__PURE__ */ e(b, { alignItems: "center", direction: "row", height: "100%", width: "100%", children: /* @__PURE__ */ e(
-  ao,
+}, ho = (t) => /* @__PURE__ */ e(S, { alignItems: "center", direction: "row", height: "100%", width: "100%", children: /* @__PURE__ */ e(
+  uo,
   {
-    categoryGuid: o.row.category,
-    topLevelCategoryGuid: o.row.top_level_category_guid
+    categoryGuid: t.row.category,
+    topLevelCategoryGuid: t.row.top_level_category_guid
   }
-) }), co = (o, r) => {
-  const t = [], n = new Date(o);
-  for (; n <= r; ) {
-    const s = J(n, F.MONTH);
-    t.push(s), n.setMonth(n.getMonth() + 1);
+) }), go = (t, r) => {
+  const n = [], o = new Date(t);
+  for (; o <= r; ) {
+    const s = J(o, B.MONTH_LONG);
+    n.push(s), o.setMonth(o.getMonth() + 1);
   }
-  return t;
-}, ot = ({
-  monthlyCategoryTotals: o,
-  selectedDateRange: r,
-  selectedCategory: t,
+  return n;
+}, rt = ({
+  selectedDateRange: t,
+  selectedCategory: r,
   onClickRow: n,
-  height: s = "100dvh",
-  sx: h = {}
+  height: o = "100%",
+  sx: s = {}
 }) => {
-  const { onEvent: g } = V(), d = J(/* @__PURE__ */ new Date(), F.MONTH_SHORT), [c, m] = u.useState([
-    { field: d, sort: "desc" }
-  ]), C = u.useMemo(() => co(r.start, r.end), [r]), l = [
+  const h = me(), { onEvent: g } = V(), { transactions: l, spending: c } = k(), { trendsCategories: m } = $(), y = u.useMemo(() => go(t.start, t.end), [t]), d = h.palette.mode === "light", b = [
     {
       field: "category",
       flex: 1,
-      headerName: "Category",
+      headerClassName: "trends-table-header",
+      headerName: l.category_title,
       minWidth: 175,
-      renderHeader: Be,
-      renderCell: io,
+      renderHeader: Re,
+      renderCell: ho,
       sortable: !0,
+      sortComparator: It,
       type: "string"
     },
-    ...C.map(
-      (a) => ({
-        field: a,
+    ...y.map(
+      (p) => ({
+        field: p,
         flex: 1,
-        headerName: a,
+        headerClassName: "trends-table-header",
+        headerName: p,
         minWidth: 100,
-        renderHeader: Be,
-        renderCell: ro,
+        renderHeader: Re,
+        renderCell: $e,
         align: "right",
         headerAlign: "right",
         sortable: !0,
         hideSortIcons: !1,
         type: "number",
-        sortComparator: bt
+        sortComparator: Fe
       })
-    )
-  ], T = u.useMemo(() => {
-    const a = o.filter(
-      (y) => !vt(y) && !wt(y)
-    ), _ = (t ? a.filter(
-      (y) => y.category_guid === t || y.top_level_category_guid === t
-    ) : a).reduce(
-      (y, E) => {
-        const { category_guid: x, top_level_category_guid: I, month: W, total: L, year: O } = E, A = t ? x : I;
-        y[A] || (y[A] = {
-          id: A,
-          category: A,
-          category_guid: x,
-          top_level_category_guid: I
-        });
-        const M = J(new Date(O, W - 1), F.MONTH_SHORT);
-        return y[A][M] || (y[A][M] = 0), y[A][M] = y[A][M] + Math.abs(L), y;
-      },
-      {}
-    );
-    return Object.values(_);
-  }, [o, t]);
-  return /* @__PURE__ */ e(H, { sx: { height: s, width: "100%", overflowX: "auto", boxShadow: "none", ...h }, children: /* @__PURE__ */ e(
-    Rt,
+    ),
+    {
+      field: "total",
+      flex: 1,
+      headerClassName: "trends-table-header",
+      headerName: `${c.total[0].toUpperCase()}${c.total.slice(1)}`,
+      minWidth: 100,
+      renderHeader: Re,
+      renderCell: $e,
+      align: "right",
+      headerAlign: "right",
+      sortable: !0,
+      hideSortIcons: !1,
+      type: "number",
+      sortComparator: Fe
+    }
+  ], i = u.useMemo(() => {
+    if (r)
+      return m.find((p) => p.guid === r);
+  }, [r, m]), C = u.useMemo(() => {
+    let p = m;
+    return i && (p = i.subCategories.filter(
+      (_) => _.monthlyAmounts.some((L) => L.amount > 0)
+    )), p.map((_) => {
+      let L = _.totalMonthlyAmounts;
+      i && (L = _.monthlyAmounts);
+      const v = L.filter(
+        (x) => (Ht(_e(x.isoDate), t.start) || Wt(_e(x.isoDate), t.start)) && Nt(_e(x.isoDate), t.end)
+      ), D = v.reduce(
+        (x, M) => {
+          const z = J(_e(M.isoDate), B.MONTH_LONG);
+          return x[z] = M.amount, x;
+        },
+        {}
+      ), N = v.reduce(
+        (x, M) => x + M.amount,
+        0
+      );
+      return {
+        id: _.guid,
+        category: _.guid,
+        top_level_category_guid: _.parent_guid || _.guid,
+        total: N,
+        ...D
+      };
+    });
+  }, [m]);
+  return /* @__PURE__ */ e(H, { sx: { height: o, width: "100%", overflowX: "auto", boxShadow: "none", ...s }, children: /* @__PURE__ */ e(
+    Gt,
     {
-      columns: l,
+      columns: b,
       disableColumnFilter: !0,
       disableColumnMenu: !0,
       hideFooter: !0,
-      initialState: { sorting: { sortModel: c } },
-      onRowClick: (a) => {
-        n?.(a.row.category), g(v.TRENDS_CLICK_LIST_ITEM, {
+      initialState: { sorting: { sortModel: [{ field: "category", sort: "asc" }] } },
+      onRowClick: (p) => {
+        i || n?.(p.row.category), g(I.TRENDS_CLICK_LIST_ITEM, {
           ...G,
-          listItem: Tt[a.row.category]
+          listItem: vt[p.row.category]
         });
       },
-      onSortModelChange: (a) => {
-        m(a), g(v.TRENDS_CLICK_TABLE_SORT, G);
-      },
-      rows: T,
+      rowHeight: 64,
+      rows: C,
       slotProps: { baseIconButton: { color: "secondary", sx: { ml: 8 } } },
-      sortModel: c,
-      sortingOrder: ["asc", "desc"]
+      sortingOrder: ["asc", "desc"],
+      sx: {
+        borderColor: "divider",
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderRadius: 2,
+        "& .MuiDataGrid-columnHeaders": {
+          borderBottom: "none"
+        },
+        "& .trends-table-header": {
+          bgcolor: d ? "neutral.50" : "background.paper"
+        }
+      }
     }
   ) });
-}, lo = {
+}, mo = {
   title: "Transaction List"
-}, uo = ({
-  categoryGuid: o,
+}, po = ({
+  categoryGuid: t,
   dateRange: r,
-  isOpen: t,
-  onClose: n
+  isOpen: n,
+  onClose: o
 }) => {
-  const { onEvent: s } = V(), { selectedAccountGuids: h } = me(), { common: g } = N(), { setFilter: d, sortedTransactions: c } = xe(), [m, C] = u.useState(""), l = u.useMemo(
-    () => c.find((a) => a.guid === m),
+  const { onEvent: s } = V(), { selectedAccountGuids: h } = pe(), { common: g } = k(), { setFilter: l, sortedTransactions: c } = ve(), [m, y] = u.useState(""), d = u.useMemo(
+    () => c.find((i) => i.guid === m),
     [m, c]
   );
   u.useEffect(() => {
-    d({
+    l({
       accounts: h,
       dateRange: r,
-      custom: (a) => o === "" || o === a.category_guid || o === a.top_level_category_guid,
-      showSplits: !!o
+      custom: (i) => t === "" || t === i.category_guid || t === i.top_level_category_guid,
+      showSplits: !!t
     });
-  }, [h, o, r]), u.useEffect(() => s(v.TRENDS_VIEW_TRANSACTIONS), []);
-  const T = () => {
-    C(""), n();
+  }, [h, t, r]), u.useEffect(() => s(I.TRENDS_VIEW_TRANSACTIONS), []);
+  const b = () => {
+    y(""), o();
   };
   return /* @__PURE__ */ f(
-    He,
+    We,
     {
       ariaLabelClose: g.close_aria,
-      isOpen: t,
-      onClose: T,
-      title: lo.title,
+      isOpen: n,
+      onClose: b,
+      title: mo.title,
       children: [
-        l && /* @__PURE__ */ e(Ze, { transaction: l }),
-        !l && /* @__PURE__ */ e(Qe, { onClick: C })
+        d && /* @__PURE__ */ e(Je, { transaction: d }),
+        !d && /* @__PURE__ */ e(et, { onClick: y })
       ]
     }
   );
-}, ho = R(uo), go = ({ onBackClick: o, sx: r }) => {
-  const { onEvent: t } = V(), { isDesktop: n, isTablet: s, isMobile: h } = ee(), { visibleAccounts: g } = ve(), { loadMonthlyCategoryTotals: d, monthlyCategoryTotals: c, getCategoryName: m } = U(), { sortedTransactions: C } = xe(), { selectedDateRange: l, setSelectedDateRange: T } = pe(), { isCopyLoaded: a, isInitialized: p, selectedAccounts: _, setSelectedAccounts: y } = me(), { trends: E } = N(), [x, I] = u.useState(!1), [W, L] = u.useState(!1), [O, A] = u.useState("Chart"), [M, P] = u.useState(""), [z, X] = u.useState(window.innerHeight), te = z - (h ? 315 : 345);
-  we({
+}, Co = A(po), yo = ({ onBackClick: t, sx: r }) => {
+  const { onEvent: n } = V(), { isDesktop: o, isTablet: s, isMobile: h } = ee(), { visibleAccounts: g } = we(), { loadMonthlyCategoryTotals: l, monthlyCategoryTotals: c, getCategoryName: m } = $(), { sortedTransactions: y } = ve(), { selectedDateRange: d, setSelectedDateRange: b } = Ce(), { isCopyLoaded: i, isInitialized: C, selectedAccounts: p, setSelectedAccounts: _ } = pe(), { trends: L } = k(), [v, D] = u.useState(!1), [N, x] = u.useState(!1), [M, z] = u.useState("Chart"), [W, F] = u.useState(""), [K, X] = u.useState(window.innerHeight), te = K - (h ? 315 : 345);
+  Ie({
     widgetName: "TrendsFullWidget",
-    isLoaded: x
+    isLoaded: v
   }), u.useEffect(() => {
     const w = () => X(window.innerHeight);
     return window.addEventListener("resize", w), () => window.removeEventListener("resize", w);
   }, []), u.useEffect(() => {
-    y(g);
+    _(g);
   }, [g]), u.useEffect(() => {
-    p && d(
-      _,
-      l.start,
-      l.end
+    C && l(
+      p,
+      d.start,
+      d.end
     ).finally(() => {
-      I(!0);
+      D(!0);
     });
-  }, [p, _, l]);
+  }, [C, p, d]);
   const re = u.useMemo(() => {
-    if (!x) return { stackedDatasets: [], unstackedDatasets: [] };
-    const w = xt(
+    if (!v) return { stackedDatasets: [], unstackedDatasets: [] };
+    const w = Lt(
       c,
-      l.start,
-      l.end
-    ), B = M.length ? w.filter(
-      (j) => j.top_level_category_guid === M || j.category_guid === M
-    ) : Dt(w);
+      d.start,
+      d.end
+    ), O = W.length ? w.filter(
+      (j) => j.top_level_category_guid === W || j.category_guid === W
+    ) : Et(w);
     return {
-      stackedDatasets: B.filter(It),
-      unstackedDatasets: B.filter(Et)
+      stackedDatasets: O.filter(Dt),
+      unstackedDatasets: O.filter(Mt)
     };
-  }, [c, M, l]), Z = (w, B) => {
-    A(B ?? O), t(v.TRENDS_CLICK_TOGGLE_VIEW);
+  }, [c, W, d]), Z = (w, O) => {
+    z(O ?? M), n(I.TRENDS_CLICK_TOGGLE_VIEW);
   }, ce = (w) => {
-    const B = $e(w?.[0], 1), j = w?.[1], le = Re(j, B);
-    T({ start: B, end: j }), t(v.TRENDS_CLICK_TIME_WINDOW, {
+    const O = je(w?.[0], 1), j = w?.[1], le = He(j, O);
+    b({ start: O, end: j }), n(I.TRENDS_CLICK_TIME_WINDOW, {
       time_period: le + "M"
     });
   }, oe = () => {
-    t(v.TRENDS_CLICK_FILTER);
-  }, K = (w) => {
-    P(w);
+    n(I.TRENDS_CLICK_FILTER);
+  }, Y = (w) => {
+    F(w);
   }, ae = (w) => {
-    P(w), t(v.TRENDS_CLICK_LEGEND, { category: m(w) });
+    F(w), n(I.TRENDS_CLICK_LEGEND, { category: m(w) });
   }, ne = (w) => {
-    t(v.TRENDS_HOVER_LEGEND, { category: m(w) });
+    n(I.TRENDS_HOVER_LEGEND, { category: m(w) });
   }, ie = (w) => {
-    t(v.TRENDS_HOVER_AREA, { category: w });
-  }, Q = (w) => {
-    t(v.TRENDS_HOVER_POINT, { category: w });
+    n(I.TRENDS_HOVER_AREA, { category: w });
+  }, q = (w) => {
+    n(I.TRENDS_HOVER_POINT, { category: w });
   };
-  return !a || !p || !x ? /* @__PURE__ */ e(ge, {}) : /* @__PURE__ */ f(
-    Xe,
+  return !i || !C || !v ? /* @__PURE__ */ e(ge, {}) : /* @__PURE__ */ f(
+    Qe,
     {
       accountOptions: g,
       calendarActions: { onRangeChanged: ce },
-      dateRange: l,
+      dateRange: d,
       dateRangeVariant: "timeframebuttons",
       onAccountsFilterClick: oe,
-      onBackClick: o,
+      onBackClick: t,
       sx: r,
-      title: E.title,
+      title: L.title,
       children: [
         /* @__PURE__ */ f(
-          b,
+          S,
           {
             sx: {
               // eslint-disable-next-line no-nested-ternary
-              px: n ? 48 : s ? 24 : 12
+              px: o ? 48 : s ? 24 : 12
             },
             children: [
               /* @__PURE__ */ f(
-                b,
+                S,
                 {
                   flexDirection: "row",
                   justifyContent: "space-between",
                   sx: { pb: h ? 12 : 24, pt: h ? 24 : 48 },
                   children: [
                     /* @__PURE__ */ e(
-                      tt,
+                      st,
                       {
-                        selectedCategoryGuid: M,
-                        selectedDateRange: l
+                        selectedCategoryGuid: W,
+                        selectedDateRange: d
                       }
                     ),
-                    /* @__PURE__ */ e(et, { onTabChange: Z, selectedTab: O })
+                    /* @__PURE__ */ e(nt, { onTabChange: Z, selectedTab: M })
                   ]
                 }
               ),
-              /* @__PURE__ */ f(b, { alignItems: "center", flexDirection: "row", width: "100%", children: [
-                /* @__PURE__ */ e(H, { flexGrow: 1, children: M && /* @__PURE__ */ f(_e, { onClick: () => P(""), sx: { p: 0, pr: 5 }, children: [
-                  /* @__PURE__ */ e(fe, { name: "arrow_back" }),
-                  E.all_categories
+              /* @__PURE__ */ f(S, { alignItems: "center", flexDirection: "row", width: "100%", children: [
+                /* @__PURE__ */ e(H, { flexGrow: 1, children: W && /* @__PURE__ */ f(Te, { onClick: () => F(""), sx: { p: 0, pr: 5 }, children: [
+                  /* @__PURE__ */ e(be, { name: "arrow_back" }),
+                  L.all_categories
                 ] }) }),
-                /* @__PURE__ */ e(_e, { onClick: () => L(!0), sx: { px: 5 }, children: `${E.view_transactions} (${C.length})` })
+                /* @__PURE__ */ e(Te, { onClick: () => x(!0), sx: { px: 5 }, children: `${L.view_transactions} (${y.length})` })
               ] }),
               /* @__PURE__ */ f(H, { children: [
-                O === "Chart" && /* @__PURE__ */ e(
-                  so,
+                M === "Chart" && /* @__PURE__ */ e(
+                  lo,
                   {
                     availableHeight: te,
                     onClickLegend: ae,
                     onHoverArea: ie,
                     onHoverLegend: ne,
-                    onHoverPoint: Q,
+                    onHoverPoint: q,
                     stackedDatasets: re.stackedDatasets,
                     unstackedDatasets: re.unstackedDatasets
                   }
                 ),
-                O === "Table" && /* @__PURE__ */ e(
-                  ot,
+                M === "Table" && /* @__PURE__ */ e(
+                  rt,
                   {
-                    monthlyCategoryTotals: c,
-                    onClickRow: K,
-                    selectedCategory: M,
-                    selectedDateRange: l
+                    onClickRow: Y,
+                    selectedCategory: W,
+                    selectedDateRange: d
                   }
                 )
               ] })
@@ -720,26 +761,26 @@ const Je = ({ categoryGuid: o, topLevelCategoryGuid: r }) => {
           }
         ),
         /* @__PURE__ */ e(
-          ho,
+          Co,
           {
-            categoryGuid: M,
-            dateRange: l,
-            isOpen: W,
-            onClose: () => L(!1)
+            categoryGuid: W,
+            dateRange: d,
+            isOpen: N,
+            onClose: () => x(!1)
           }
         )
       ]
     }
   );
-}, Rn = R(go), mo = () => {
-  const { monthlyCategoryTotals: o } = U(), { trends: r } = N(), t = be(), { availableHeight: n = 300 } = ze(), s = Lt(o);
+}, Bn = A(yo), fo = () => {
+  const { monthlyCategoryTotals: t } = $(), { trends: r } = k(), n = me(), { availableHeight: o = 300 } = Ue(), s = At(t);
   return /* @__PURE__ */ e(
-    We,
+    Ge,
     {
       baseline: "min",
-      colors: [t.palette.primary.main],
+      colors: [n.palette.primary.main],
       datasets: [s],
-      height: n,
+      height: o,
       labels: [r.spending_label],
       showArea: !0,
       showAverage: !0,
@@ -749,41 +790,41 @@ const Je = ({ categoryGuid: o, topLevelCategoryGuid: r }) => {
       valueFormatterString: "0,0"
     }
   );
-}, po = R(mo), Co = ({ onPrimaryCtaClick: o, sx: r }) => {
-  const { visibleAccounts: t } = ve(), { loadMonthlyCategoryTotals: n, monthlyTotalsLoaded: s } = U(), { isInitialized: h } = Ne(), { trends: g } = N(), { isCopyLoaded: d, selectedAccounts: c, setSelectedAccounts: m } = me();
-  return we({
+}, _o = A(fo), bo = ({ onPrimaryCtaClick: t, sx: r }) => {
+  const { visibleAccounts: n } = we(), { loadMonthlyCategoryTotals: o, monthlyTotalsLoaded: s } = $(), { isInitialized: h } = Oe(), { trends: g } = k(), { isCopyLoaded: l, selectedAccounts: c, setSelectedAccounts: m } = pe();
+  return Ie({
     widgetName: "TrendsMiniWidget",
     isLoaded: s
   }), u.useEffect(() => {
-    m(t);
-  }, [t]), u.useEffect(() => {
-    h && n(c).finally();
-  }, [h, c]), !d || !h ? /* @__PURE__ */ e(ge, {}) : /* @__PURE__ */ e(
-    Ht,
+    m(n);
+  }, [n]), u.useEffect(() => {
+    h && o(c).finally();
+  }, [h, c]), !l || !h ? /* @__PURE__ */ e(ge, {}) : /* @__PURE__ */ e(
+    Vt,
     {
       contentStyles: { height: "calc(100% - 72px)", ":last-child": { pb: 0 } },
-      onPrimaryCtaClick: o,
+      onPrimaryCtaClick: t,
       primaryCtaLabel: g.primary_cta,
       subTitle: g.sub_title,
       sx: { height: "100%", ...r },
       title: g.mini_title,
-      children: s ? /* @__PURE__ */ e(po, {}) : /* @__PURE__ */ e(ge, {})
+      children: s ? /* @__PURE__ */ e(_o, {}) : /* @__PURE__ */ e(ge, {})
     }
   );
-}, kn = R(Co), yo = 70, Ve = ({
-  title: o,
+}, Vn = A(bo), To = 70, ze = ({
+  title: t,
   totalAmount: r,
-  transactionType: t,
-  percentage: n,
+  transactionType: n,
+  percentage: o,
   secondaryLabel: s,
   shouldDisplayPercentage: h
 }) => {
-  const { availableWidth: g } = ze(), d = u.useRef(null), c = u.useRef(null), m = St(Number(Math.abs(n)), {
+  const { availableWidth: g } = Ue(), l = u.useRef(null), c = u.useRef(null), m = wt(Number(Math.abs(o)), {
     style: "percent",
     minimumIntegerDigits: 1
-  }), C = g === 288 && se(r, "0,0.00").length > 10 ? se(r, "0,0") : se(r, "0,0.00"), l = t === "spending" ? n > 0 : n >= 0, T = t === "spending" ? "error.main" : "success.main", a = t === "spending" ? "success.main" : "text.secondary", p = d?.current, _ = c?.current, y = p && _ ? p.scrollWidth > _.clientWidth - yo : !1;
+  }), y = g === 288 && se(r, "0,0.00").length > 10 ? se(r, "0,0") : se(r, "0,0.00"), d = n === "spending" ? o > 0 : o >= 0, b = n === "spending" ? "error.main" : "success.main", i = n === "spending" ? "success.main" : "text.secondary", C = l?.current, p = c?.current, _ = C && p ? C.scrollWidth > p.clientWidth - To : !1;
   return /* @__PURE__ */ f(
-    b,
+    S,
     {
       sx: {
         border: 1,
@@ -796,7 +837,7 @@ const Je = ({ categoryGuid: o, topLevelCategoryGuid: r }) => {
       },
       children: [
         /* @__PURE__ */ f(
-          b,
+          S,
           {
             sx: {
               alignItems: "center",
@@ -804,14 +845,14 @@ const Je = ({ categoryGuid: o, topLevelCategoryGuid: r }) => {
               justifyContent: "space-between"
             },
             children: [
-              /* @__PURE__ */ e(he, { color: "text.secondary", variant: "caption", children: o }),
-              h && /* @__PURE__ */ f(b, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
-                l ? /* @__PURE__ */ e(Wt, { size: 20, sx: { color: T } }) : /* @__PURE__ */ e(Ot, { size: 20, sx: { color: a } }),
+              /* @__PURE__ */ e(he, { color: "text.secondary", variant: "caption", children: t }),
+              h && /* @__PURE__ */ f(S, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
+                d ? /* @__PURE__ */ e(Ft, { size: 20, sx: { color: b } }) : /* @__PURE__ */ e(Pt, { size: 20, sx: { color: i } }),
                 /* @__PURE__ */ e(
                   he,
                   {
                     sx: {
-                      color: l ? T : a,
+                      color: d ? b : i,
                       fontWeight: 600
                     },
                     variant: "body2",
@@ -823,7 +864,7 @@ const Je = ({ categoryGuid: o, topLevelCategoryGuid: r }) => {
           }
         ),
         /* @__PURE__ */ f(
-          b,
+          S,
           {
             ref: c,
             sx: {
@@ -835,15 +876,15 @@ const Je = ({ categoryGuid: o, topLevelCategoryGuid: r }) => {
               /* @__PURE__ */ e(
                 H,
                 {
-                  ref: d,
+                  ref: l,
                   sx: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
-                  children: /* @__PURE__ */ e(Fe, { children: C })
+                  children: /* @__PURE__ */ e(Ye, { children: y })
                 }
               ),
-              h && g >= 450 && !y && /* @__PURE__ */ e(
+              h && g >= 450 && !_ && /* @__PURE__ */ e(
                 he,
                 {
-                  color: l ? T : a,
+                  color: d ? b : i,
                   variant: "caption",
                   children: s
                 }
@@ -854,53 +895,53 @@ const Je = ({ categoryGuid: o, topLevelCategoryGuid: r }) => {
       ]
     }
   );
-}, fo = R(() => {
-  const { trends: o } = N();
-  return /* @__PURE__ */ f(b, { sx: { alignItems: "start", flexDirection: "row", gap: 12 }, children: [
-    /* @__PURE__ */ e(Gt, { size: 32 }),
-    /* @__PURE__ */ f(b, { children: [
-      /* @__PURE__ */ e(he, { fontWeight: 600, variant: "body1", children: o.zero_state_content_header }),
-      /* @__PURE__ */ e(he, { color: "text.secondary", variant: "subtitle2", children: o.zero_state_content_description })
+}, So = A(() => {
+  const { trends: t } = k();
+  return /* @__PURE__ */ f(S, { sx: { alignItems: "start", flexDirection: "row", gap: 12 }, children: [
+    /* @__PURE__ */ e($t, { size: 32 }),
+    /* @__PURE__ */ f(S, { children: [
+      /* @__PURE__ */ e(he, { fontWeight: 600, variant: "body1", children: t.zero_state_content_header }),
+      /* @__PURE__ */ e(he, { color: "text.secondary", variant: "subtitle2", children: t.zero_state_content_description })
     ] })
   ] });
-}), Hn = R(({ onCtaClick: o }) => {
-  const { visibleAccounts: r } = ve(), { onEvent: t } = V(), { monthlyCategoryTotals: n, loadMonthlyCategoryTotals: s, monthlyTotalsLoaded: h } = U(), g = {
-    start: Nt(/* @__PURE__ */ new Date(), 1),
+}), Fn = A(({ onCtaClick: t }) => {
+  const { visibleAccounts: r } = we(), { onEvent: n } = V(), { monthlyCategoryTotals: o, loadMonthlyCategoryTotals: s, monthlyTotalsLoaded: h } = $(), g = {
+    start: Ot(/* @__PURE__ */ new Date(), 1),
     end: /* @__PURE__ */ new Date()
-  }, { trends: d } = N(), { selectedAccounts: c, setSelectedAccounts: m, isInitialized: C } = me();
-  we({
+  }, { trends: l } = k(), { selectedAccounts: c, setSelectedAccounts: m, isInitialized: y } = pe();
+  Ie({
     widgetName: "TrendsMicroWidget",
     isLoaded: h
   }), u.useEffect(() => {
     m(r);
   }, [r]), u.useEffect(() => {
-    C && s(c, g.start).then(() => {
-      t(v.TRENDS_LOAD_WIDGET, {
+    y && s(c, g.start).then(() => {
+      n(I.TRENDS_LOAD_WIDGET, {
         state: r?.length ? "default" : "zeroState"
       });
     });
-  }, [C, c]);
-  const { spendingData: l, incomeData: T } = u.useMemo(
+  }, [y, c]);
+  const { spendingData: d, incomeData: b } = u.useMemo(
     () => ({
-      spendingData: Ye(n, g),
-      incomeData: Ue(n, g)
+      spendingData: Ze(o, g),
+      incomeData: qe(o, g)
     }),
-    [n, g]
-  ), [a, p] = l, [_, y] = T, E = Ge(p.y, a.y), x = Ge(y.y, _.y), I = C && !r?.length, W = () => {
-    t(
-      I ? v.TRENDS_CLICK_GET_STARTED : v.TRENDS_CLICK_VIEW_MORE
-    ), o();
+    [o, g]
+  ), [i, C] = d, [p, _] = b, L = Pe(C.y, i.y), v = Pe(_.y, p.y), D = y && !r?.length, N = () => {
+    n(
+      D ? I.TRENDS_CLICK_GET_STARTED : I.TRENDS_CLICK_VIEW_MORE
+    ), t();
   };
-  return !h || !C ? /* @__PURE__ */ e(ge, {}) : /* @__PURE__ */ e(
-    Pt,
+  return !h || !y ? /* @__PURE__ */ e(ge, {}) : /* @__PURE__ */ e(
+    Yt,
     {
       className: "mx-trends-microwidget",
-      ctaLabel: d.micro_primary_cta_label,
-      onCTAClick: W,
-      subHeader: I ? void 0 : d.micro_subheader,
-      title: d.title,
-      children: I ? /* @__PURE__ */ e(fo, {}) : /* @__PURE__ */ f(
-        b,
+      ctaLabel: l.micro_primary_cta_label,
+      onCTAClick: N,
+      subHeader: D ? void 0 : l.micro_subheader,
+      title: l.title,
+      children: D ? /* @__PURE__ */ e(So, {}) : /* @__PURE__ */ f(
+        S,
         {
           sx: {
             alignItems: "stretch",
@@ -909,24 +950,24 @@ const Je = ({ categoryGuid: o, topLevelCategoryGuid: r }) => {
           },
           children: [
             /* @__PURE__ */ e(
-              Ve,
+              ze,
               {
-                percentage: E,
-                secondaryLabel: d.micro_secondary_label,
-                shouldDisplayPercentage: p.y !== 0 && a.y !== 0,
-                title: d.spending_label,
-                totalAmount: p.y,
+                percentage: L,
+                secondaryLabel: l.micro_secondary_label,
+                shouldDisplayPercentage: C.y !== 0 && i.y !== 0,
+                title: l.spending_label,
+                totalAmount: C.y,
                 transactionType: "spending"
               }
             ),
             /* @__PURE__ */ e(
-              Ve,
+              ze,
               {
-                percentage: x,
-                secondaryLabel: d.micro_secondary_label,
-                shouldDisplayPercentage: y.y !== 0 && _.y !== 0,
-                title: d.income_label,
-                totalAmount: y.y,
+                percentage: v,
+                secondaryLabel: l.micro_secondary_label,
+                shouldDisplayPercentage: _.y !== 0 && p.y !== 0,
+                title: l.income_label,
+                totalAmount: _.y,
                 transactionType: "income"
               }
             )
@@ -935,21 +976,21 @@ const Je = ({ categoryGuid: o, topLevelCategoryGuid: r }) => {
       )
     }
   );
-}), _o = R(
-  ({ isExpanded: o, onClick: r }) => {
-    const t = qe();
-    return /* @__PURE__ */ e(zt, { sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(Kt, { onClick: r, sx: { justifyContent: "center" }, children: /* @__PURE__ */ f(
-      b,
+}), xo = A(
+  ({ isExpanded: t, onClick: r }) => {
+    const n = tt();
+    return /* @__PURE__ */ e(Xt, { sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(Zt, { onClick: r, sx: { justifyContent: "center" }, children: /* @__PURE__ */ f(
+      S,
       {
-        sx: { color: t.palette.primary.main, flexDirection: "row", alignItems: "center" },
+        sx: { color: n.palette.primary.main, flexDirection: "row", alignItems: "center" },
         children: [
-          /* @__PURE__ */ e(Yt, { children: /* @__PURE__ */ e($, { bold: !0, variant: "body2", children: o ? "View less" : "View more" }) }),
-          /* @__PURE__ */ e(jt, { sx: { color: t.palette.primary.main }, children: o ? /* @__PURE__ */ e(Bt, {}) : /* @__PURE__ */ e(
-            Vt,
+          /* @__PURE__ */ e(Qt, { children: /* @__PURE__ */ e(P, { bold: !0, variant: "body2", children: t ? "View less" : "View more" }) }),
+          /* @__PURE__ */ e(qt, { sx: { color: n.palette.primary.main }, children: t ? /* @__PURE__ */ e(zt, {}) : /* @__PURE__ */ e(
+            Kt,
             {
               sx: {
                 transition: "transform 0.3s ease-in-out",
-                transform: o ? "rotate(180deg)" : "rotate(0deg)"
+                transform: t ? "rotate(180deg)" : "rotate(0deg)"
               }
             }
           ) })
@@ -957,97 +998,97 @@ const Je = ({ categoryGuid: o, topLevelCategoryGuid: r }) => {
       }
     ) }) });
   }
-), Pe = R(
+), Ke = A(
   ({
-    totalAmount: o,
+    totalAmount: t,
     guid: r,
-    name: t,
-    transactions: n,
+    name: n,
+    transactions: o,
     onClick: s,
     isLastItem: h = !1,
     showDivider: g = !0
   }) => {
-    const { trends: d } = N(), { onEvent: c } = V(), m = `${n.length} ${n.length === 1 ? d.transaction : d.transactions}`, C = () => {
-      s?.(), c(v.TRENDS_CLICK_LIST_ITEM, {
+    const { trends: l } = k(), { onEvent: c } = V(), m = `${o.length} ${o.length === 1 ? l.transaction : l.transactions}`, y = () => {
+      s?.(), c(I.TRENDS_CLICK_LIST_ITEM, {
         ...G,
-        listItem: t
+        listItem: n
       });
     };
     return /* @__PURE__ */ f(u.Fragment, { children: [
       /* @__PURE__ */ e(
-        je,
+        Xe,
         {
-          leftIcon: r ? /* @__PURE__ */ e(Se, { categoryGuid: r }) : void 0,
-          onClick: C,
-          rightContent: se(Math.abs(o), "0,0.00"),
-          rightIcon: s ? /* @__PURE__ */ e(lt, {}) : void 0,
+          leftIcon: r ? /* @__PURE__ */ e(xe, { categoryGuid: r }) : void 0,
+          onClick: y,
+          rightContent: se(Math.abs(t), "0,0.00"),
+          rightIcon: s ? /* @__PURE__ */ e(ht, {}) : void 0,
           subtitle: m,
-          title: t
+          title: n
         }
       ),
-      g && /* @__PURE__ */ e(ke, { sx: { ml: h ? 24 : 68 } })
+      g && /* @__PURE__ */ e(Ne, { sx: { ml: h ? 24 : 68 } })
     ] }, r);
   }
-), To = R(
-  ({ availableHeight: o = 0, onCategoryClick: r }) => {
-    const { collapsedCategories: t, visibleCategories: n, setVisibleListLength: s } = pe(), { isLargeDesktop: h, isDesktop: g } = ee(), { trends: d } = N(), { onEvent: c } = V(), [m, C] = u.useState(!1), l = g || h;
+), vo = A(
+  ({ availableHeight: t = 0, onCategoryClick: r }) => {
+    const { collapsedCategories: n, visibleCategories: o, setVisibleListLength: s } = Ce(), { isLargeDesktop: h, isDesktop: g } = ee(), { trends: l } = k(), { onEvent: c } = V(), [m, y] = u.useState(!1), d = g || h;
     u.useEffect(() => {
-      const p = Math.floor(o / 64) - 1, _ = n.length + t.length;
-      p !== n.length && (s(l ? Math.max(p, 5) : 5), C(p >= _));
-    }, [o]);
-    const T = () => {
-      C(!m), c(v.TRENDS_CLICK_VIEW_MORE, {
+      const C = Math.floor(t / 64) - 1, p = o.length + n.length;
+      C !== o.length && (s(d ? Math.max(C, 5) : 5), y(C >= p));
+    }, [t]);
+    const b = () => {
+      y(!m), c(I.TRENDS_CLICK_VIEW_MORE, {
         ...G
       });
-    }, a = n.length + (m ? t.length : 0);
-    return /* @__PURE__ */ e(b, { sx: { bgColor: "background.paper", width: "100%" }, children: /* @__PURE__ */ f($t, { children: [
-      /* @__PURE__ */ e(b, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(Fe, { children: d.categories }) }),
-      n.map((p, _) => /* @__PURE__ */ e(
-        Pe,
+    }, i = o.length + (m ? n.length : 0);
+    return /* @__PURE__ */ e(S, { sx: { bgColor: "background.paper", width: "100%" }, children: /* @__PURE__ */ f(Ut, { children: [
+      /* @__PURE__ */ e(S, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(Ye, { children: l.categories }) }),
+      o.map((C, p) => /* @__PURE__ */ e(
+        Ke,
         {
-          ...p,
-          isLastItem: _ === a - 1,
-          onClick: p.transactions.length > 0 ? () => r(p) : void 0,
+          ...C,
+          isLastItem: p === i - 1,
+          onClick: C.transactions.length > 0 ? () => r(C) : void 0,
           showDivider: !0
         },
-        p.guid
+        C.guid
       )),
       /* @__PURE__ */ e(
-        Ft,
+        jt,
         {
           in: m,
           sx: { "&.MuiCollapse-root .MuiListItemButton-root": { paddingLeft: 24 } },
-          children: t.map((p, _) => {
-            const y = n.length + _;
+          children: n.map((C, p) => {
+            const _ = o.length + p;
             return /* @__PURE__ */ e(
-              Pe,
+              Ke,
               {
-                ...p,
-                isLastItem: y === a - 1,
-                onClick: p.transactions.length > 0 ? () => r(p) : void 0,
+                ...C,
+                isLastItem: _ === i - 1,
+                onClick: C.transactions.length > 0 ? () => r(C) : void 0,
                 showDivider: !0
               },
-              p.guid
+              C.guid
             );
           })
         }
       ),
-      t.length > 0 && /* @__PURE__ */ e(_o, { isExpanded: m, onClick: T })
+      n.length > 0 && /* @__PURE__ */ e(xo, { isExpanded: m, onClick: b })
     ] }) });
   }
-), So = ({ beats: o, onInsightCardClick: r }) => {
-  const { onEvent: t } = V(), { isMobile: n, isDesktop: s, isLargeDesktop: h } = ee(), { beatStore: g, endpoint: d, sessionToken: c } = Ne(), m = s || h, C = m || n ? 1 : 2, l = () => null, T = (x) => {
-    r?.(x), t(v.TRENDS_CLICK_INSIGHT, G);
-  }, a = m ? 200 : 170, p = m ? 170 : 124, _ = m ? 56 : 0, y = o.length > 0 ? a + _ : p, E = m && o.length > 0 ? a : void 0;
-  return /* @__PURE__ */ e(_t, { sx: { height: y }, children: /* @__PURE__ */ e(
-    kt,
+), wo = ({ beats: t, onInsightCardClick: r }) => {
+  const { onEvent: n } = V(), { isMobile: o, isDesktop: s, isLargeDesktop: h } = ee(), { beatStore: g, endpoint: l, sessionToken: c } = Oe(), m = s || h, y = m || o ? 1 : 2, d = () => null, b = (v) => {
+    r?.(v), n(I.TRENDS_CLICK_INSIGHT, G);
+  }, i = m ? 200 : 170, C = m ? 170 : 124, p = m ? 56 : 0, _ = t.length > 0 ? i + p : C, L = m && t.length > 0 ? i : void 0;
+  return /* @__PURE__ */ e(xt, { sx: { height: _ }, children: /* @__PURE__ */ e(
+    Bt,
     {
       areBeatsLoading: g.isLoading,
-      beats: o,
-      endpoint: d,
-      heightOverrides: E,
-      logOutUser: l,
-      onCardClick: T,
+      beats: t,
+      endpoint: l,
+      heightOverrides: L,
+      logOutUser: d,
+      onCardClick: b,
       showBorder: !0,
       showCTAColocatedWithText: !1,
       showCarouselControls: !0,
@@ -1057,28 +1098,28 @@ const Je = ({ categoryGuid: o, topLevelCategoryGuid: r }) => {
       token: c,
       userHasFullInsightFeedBeats: !1,
       variant: "outlined",
-      visibleCardsCount: C
+      visibleCardsCount: y
     }
   ) });
-}, bo = R(So), xo = R(({ chartLabel: o, chartColor: r }) => {
-  const { onEvent: t } = V(), {
-    categoryDetailsChartData: { monthlyAmounts: n, tooltipLabels: s }
-  } = pe();
-  return /* @__PURE__ */ e(b, { sx: { pt: 12, width: "100%" }, children: /* @__PURE__ */ e(
-    We,
+}, Io = A(wo), Lo = A(({ chartLabel: t, chartColor: r }) => {
+  const { onEvent: n } = V(), {
+    categoryDetailsChartData: { monthlyAmounts: o, tooltipLabels: s }
+  } = Ce();
+  return /* @__PURE__ */ e(S, { sx: { pt: 12, width: "100%" }, children: /* @__PURE__ */ e(
+    Ge,
     {
       baseline: "min",
       colors: [r],
       curveType: "bump",
       customTooltipLabels: s,
-      datasets: [n],
+      datasets: [o],
       height: 265,
-      labels: [o],
+      labels: [t],
       markStyles: () => ({
         stroke: r
       }),
       onItemClick: () => {
-        t(v.TRENDS_CLICK_CHART, G);
+        n(I.TRENDS_CLICK_CHART, G);
       },
       showArea: !0,
       showAverage: !0,
@@ -1093,100 +1134,100 @@ const Je = ({ categoryGuid: o, topLevelCategoryGuid: r }) => {
       valueFormatterString: "0,0"
     }
   ) });
-}), vo = R(({ onClose: o }) => {
-  const r = qe(), { onEvent: t } = V(), { common: n, trends: s } = N(), { selectedCategoryData: h, selectedDateRangeMonthRange: g } = pe(), { sortedTransactions: d } = xe(), [c, m] = u.useState(null);
+}), Eo = A(({ onClose: t }) => {
+  const r = tt(), { onEvent: n } = V(), { common: o, trends: s } = k(), { selectedCategoryData: h, selectedDateRangeMonthRange: g } = Ce(), { sortedTransactions: l } = ve(), [c, m] = u.useState(null);
   if (!h)
     return null;
-  const { guid: C, name: l, is_income: T, totalAmount: a } = h, p = T ? s.category_income : s.category_spending, _ = Xt(C, r), y = T ? s.income_label : s.spending_label, E = ` ${h.transactions.length === 1 ? s.transaction : s.transactions} (${h.transactions.length})`, x = u.useMemo(
-    () => d.find((L) => L.guid === c),
-    [c, d]
-  ), I = (L) => L.category_guid === C || L.top_level_category_guid === C, W = () => {
-    o?.(), t(v.TRENDS_CLICK_BACK, G);
+  const { guid: y, name: d, is_income: b, totalAmount: i } = h, C = b ? s.category_income : s.category_spending, p = eo(y, r), _ = b ? s.income_label : s.spending_label, L = ` ${h.transactions.length === 1 ? s.transaction : s.transactions} (${h.transactions.length})`, v = u.useMemo(
+    () => l.find((x) => x.guid === c),
+    [c, l]
+  ), D = (x) => x.category_guid === y || x.top_level_category_guid === y, N = () => {
+    t?.(), n(I.TRENDS_CLICK_BACK, G);
   };
   return /* @__PURE__ */ f(
-    He,
+    We,
     {
       ariaLabelClose: s.close_category_details,
       isOpen: !0,
-      onClose: W,
+      onClose: N,
       shouldShowHeaderShadow: !0,
-      title: p,
+      title: C,
       children: [
-        /* @__PURE__ */ f(b, { sx: { alignItems: "center", height: "100%" }, children: [
-          /* @__PURE__ */ f(Ut, { sx: { borderRadius: 0, pb: 4, pt: 16, width: "100%" }, children: [
+        /* @__PURE__ */ f(S, { sx: { alignItems: "center", height: "100%" }, children: [
+          /* @__PURE__ */ f(Jt, { sx: { borderRadius: 0, pb: 4, pt: 16, width: "100%" }, children: [
             /* @__PURE__ */ e(
-              je,
+              Xe,
               {
-                leftIcon: /* @__PURE__ */ e(Se, { categoryGuid: C }),
-                rightContent: se(Math.abs(a), "0,0.00"),
+                leftIcon: /* @__PURE__ */ e(xe, { categoryGuid: y }),
+                rightContent: se(Math.abs(i), "0,0.00"),
                 subtitle: g,
-                title: l
+                title: d
               }
             ),
-            /* @__PURE__ */ e(xo, { chartColor: _, chartLabel: y }),
-            /* @__PURE__ */ f(b, { alignItems: "center", direction: "row", justifyContent: "space-between", sx: { mx: 24 }, children: [
-              /* @__PURE__ */ e($, { bold: !0, variant: "body1", children: E }),
-              /* @__PURE__ */ e(Zt, { filter: I })
+            /* @__PURE__ */ e(Lo, { chartColor: p, chartLabel: _ }),
+            /* @__PURE__ */ f(S, { alignItems: "center", direction: "row", justifyContent: "space-between", sx: { mx: 24 }, children: [
+              /* @__PURE__ */ e(P, { bold: !0, variant: "body1", children: L }),
+              /* @__PURE__ */ e(to, { filter: D })
             ] })
           ] }),
           /* @__PURE__ */ e(
-            Qe,
+            et,
             {
               bgcolor: "transparent",
-              filter: I,
+              filter: D,
               height: "calc(100vh - 475px)",
               onClick: m
             }
           )
         ] }),
         /* @__PURE__ */ e(
-          He,
+          We,
           {
-            ariaLabelClose: n.close_aria,
-            isOpen: !!x,
+            ariaLabelClose: o.close_aria,
+            isOpen: !!v,
             onClose: () => m(""),
             title: s.transaction,
-            children: x && /* @__PURE__ */ e(Ze, { transaction: x })
+            children: v && /* @__PURE__ */ e(Je, { transaction: v })
           }
         )
       ]
     }
   );
-}), wo = (o, r) => {
-  const t = Ue(o, r), n = Ye(o, r);
-  return [t, n].filter((s) => s.length > 0);
-}, Do = (o, r) => {
-  const [t, n] = o, s = t, h = n ?? t, g = [];
+}), Do = (t, r) => {
+  const n = qe(t, r), o = Ze(t, r);
+  return [n, o].filter((s) => s.length > 0);
+}, Mo = (t, r) => {
+  const [n, o] = t, s = n, h = o ?? n, g = [];
   if (s) {
-    const d = s.reduce((c, m) => c + m.y, 0);
-    g.push({ label: r.income_label, amount: d });
+    const l = s.reduce((c, m) => c + m.y, 0);
+    g.push({ label: r.income_label, amount: l });
   }
   if (h) {
-    const d = h.reduce((c, m) => c + m.y, 0);
-    g.push({ label: r.spending_label, amount: d });
+    const l = h.reduce((c, m) => c + m.y, 0);
+    g.push({ label: r.spending_label, amount: l });
   }
   return g;
-}, Io = ({
-  availableHeight: o = 0,
+}, Ao = ({
+  availableHeight: t = 0,
   minHeight: r = 500,
-  selectedDateRange: t,
-  totals: n
+  selectedDateRange: n,
+  totals: o
 }) => {
-  const s = be(), { onEvent: h } = V(), { trends: g } = N(), { isSmallMobile: d, isMobile: c, isSmallTablet: m, isTablet: C } = ee(), l = [s.palette.chart?.chart1, s.palette.chart?.chart2], T = wo(n, t), a = Do(T, g), [p, _] = u.useState(0), y = 458, E = 195, x = 56, I = c || d ? E : m || C ? y : p;
+  const s = me(), { onEvent: h } = V(), { trends: g } = k(), { isSmallMobile: l, isMobile: c, isSmallTablet: m, isTablet: y } = ee(), d = [s.palette.chart?.chart1, s.palette.chart?.chart2], b = Do(o, n), i = Mo(b, g), [C, p] = u.useState(0), _ = 458, L = 195, v = 56, D = c || l ? L : m || y ? _ : C;
   return u.useEffect(() => {
-    const L = Math.max(o - x, r);
-    _(L);
-  }, [o]), /* @__PURE__ */ e(
-    We,
+    const x = Math.max(t - v, r);
+    p(x);
+  }, [t]), /* @__PURE__ */ e(
+    Ge,
     {
       baseline: "min",
-      colors: l,
+      colors: d,
       curveType: "bump",
-      datasets: T,
-      height: I,
-      labels: a,
+      datasets: b,
+      height: D,
+      labels: i,
       onItemClick: () => {
-        h(v.TRENDS_CLICK_CHART, G);
+        h(I.TRENDS_CLICK_CHART, G);
       },
       showArea: !0,
       showAxisHighlight: !0,
@@ -1199,7 +1240,7 @@ const Je = ({ categoryGuid: o, topLevelCategoryGuid: r }) => {
       valueFormatterString: "0.0a"
     }
   );
-}, Eo = R(Io), Lo = [
+}, ko = A(Ao), Ro = [
   "BillAmountNotStandard",
   "CategorySpendingV2",
   "CostOfLivingToIncome",
@@ -1233,195 +1274,195 @@ const Je = ({ categoryGuid: o, topLevelCategoryGuid: r }) => {
   "WeeklyNewMerchantsV2",
   "WeeklyNoSpendDays",
   "WeeklySmallPurchasesSummary"
-], Mo = ({ onBackClick: o, onInsightCardClick: r, sx: t }) => {
-  const { onEvent: n } = V(), { config: s } = mt(), { isLargeDesktop: h, isDesktop: g, isMobile: d } = ee(), { visibleAccounts: c } = ve(), { loadDateRangeCategoryTotals: m, loadMonthlyCategoryTotals: C, monthlyCategoryTotals: l } = U(), { setFilter: T } = xe(), { selectedDateRange: a, setSelectedCategoryData: p, setSelectedDateRange: _ } = pe(), {
-    isCopyLoaded: y,
-    isInitialized: E,
-    selectedAccounts: x,
-    selectedAccountGuids: I,
-    setSelectedAccounts: W
-  } = me(), { trends: L, connect: O } = N(), { beatStore: A } = Ne(), P = Qt() && s.show_insights_widget_in_master, z = g || h, [X, Ce] = u.useState(!1), [te, re] = u.useState(!1), [Z, ce] = u.useState("Chart"), [oe, K] = u.useState(""), [ae, ne] = u.useState(!1), [ie, Q] = u.useState(window.innerHeight), w = z ? 56 : 0, B = ie - 208, j = ie - (P ? 550 + w : 266), [le, ye] = u.useState(!1), De = s.show_connections_widget_in_master ? "buttons" : "no-buttons", i = u.useMemo(
-    () => c && c.length === 0 || l.length === 0,
-    [c, l]
+], Ho = ({ onBackClick: t, onInsightCardClick: r, sx: n }) => {
+  const { onEvent: o } = V(), { config: s } = yt(), { isLargeDesktop: h, isDesktop: g, isMobile: l } = ee(), { visibleAccounts: c } = we(), { loadDateRangeCategoryTotals: m, loadMonthlyCategoryTotals: y, monthlyCategoryTotals: d } = $(), { setFilter: b } = ve(), { selectedDateRange: i, setSelectedCategoryData: C, setSelectedDateRange: p } = Ce(), {
+    isCopyLoaded: _,
+    isInitialized: L,
+    selectedAccounts: v,
+    selectedAccountGuids: D,
+    setSelectedAccounts: N
+  } = pe(), { trends: x, connect: M } = k(), { beatStore: z } = Oe(), F = oo() && s.show_insights_widget_in_master, K = g || h, [X, ye] = u.useState(!1), [te, re] = u.useState(!1), [Z, ce] = u.useState("Chart"), [oe, Y] = u.useState(""), [ae, ne] = u.useState(!1), [ie, q] = u.useState(window.innerHeight), w = K ? 56 : 0, O = ie - 208, j = ie - (F ? 550 + w : 266), [le, fe] = u.useState(!1), Le = s.show_connections_widget_in_master ? "buttons" : "no-buttons", a = u.useMemo(
+    () => c && c.length === 0 || d.length === 0,
+    [c, d]
   );
-  we({
+  Ie({
     widgetName: "TrendsWidget",
     isLoaded: X
   }), u.useEffect(() => {
-    E && A.loadBeats().finally(() => re(!0));
-  }, [E]);
-  const S = u.useMemo(() => te ? A.getFilteredBeats({ templates: Lo }) : [], [te]);
+    L && z.loadBeats().finally(() => re(!0));
+  }, [L]);
+  const T = u.useMemo(() => te ? z.getFilteredBeats({ templates: Ro }) : [], [te]);
   u.useEffect(() => {
-    const k = () => Q(window.innerHeight);
-    return window.addEventListener("resize", k), () => window.removeEventListener("resize", k);
+    const R = () => q(window.innerHeight);
+    return window.addEventListener("resize", R), () => window.removeEventListener("resize", R);
   }, []), u.useEffect(() => {
-    W(c);
+    N(c);
   }, [c]), u.useEffect(() => {
-    E && m(x, a.start, a.end).then(() => {
-      C(
-        x,
-        a.start,
-        a.end
-      );
-    }).finally(() => {
-      Ce(!0), n(v.TRENDS_LOAD_WIDGET, {
+    L && Promise.all([
+      m(
+        v,
+        i.start,
+        i.end
+      ),
+      y(v, i.start, i.end)
+    ]).finally(() => {
+      ye(!0), o(I.TRENDS_LOAD_WIDGET, {
         ...G,
-        time_period: `${Re(a.end, a.start)}M`
+        time_period: `${He(i.end, i.start)}M`
       });
     });
-  }, [E, x, a]), u.useEffect(() => {
-    if (l.length !== 0) {
-      const k = {
-        accounts: I,
-        dateRange: { start: a.start, end: a.end }
+  }, [L, v, i]), u.useEffect(() => {
+    if (d.length !== 0) {
+      const R = {
+        accounts: D,
+        dateRange: { start: i.start, end: i.end }
       };
-      T({
-        ...k,
-        custom: (q) => !!l.find(
-          (ue) => ue.top_level_category_guid === q.top_level_category_guid || ue.category_guid === q.category_guid
+      b({
+        ...R,
+        custom: (Q) => !!d.find(
+          (ue) => ue.top_level_category_guid === Q.top_level_category_guid || ue.category_guid === Q.category_guid
         )
       });
     }
-  }, [l]);
-  const D = (k) => {
-    p(k), ne(!0);
-  }, Y = () => {
-    p(null), ne(!1);
-  }, Ie = () => {
-    ye(!0), n(v.TRENDS_CLICK_CONNECT_ACCOUNTS);
-  }, Ee = (k, q) => {
-    ce(q ?? Z), n(v.TRENDS_CLICK_TOGGLE_VIEW, {
+  }, [d]);
+  const E = (R) => {
+    C(R), ne(!0);
+  }, U = () => {
+    C(null), ne(!1);
+  }, Ee = () => {
+    fe(!0), o(I.TRENDS_CLICK_CONNECT_ACCOUNTS);
+  }, De = (R, Q) => {
+    ce(Q ?? Z), o(I.TRENDS_CLICK_TOGGLE_VIEW, {
       ...G,
-      toggleView: q
+      toggleView: Q
     });
-  }, de = (k) => {
-    const q = $e(k?.[0], 1), ue = k?.[1], st = Re(ue, q);
-    _({ start: q, end: ue }), n(v.TRENDS_CLICK_TIME_WINDOW, {
+  }, de = (R) => {
+    const Q = je(R?.[0], 1), ue = R?.[1], it = He(ue, Q);
+    p({ start: Q, end: ue }), o(I.TRENDS_CLICK_TIME_WINDOW, {
       ...G,
-      time_period: st + "M"
+      time_period: it + "M"
     });
-  }, Le = (k) => {
-    n(v.TRENDS_CLICK_FILTER, {
+  }, Me = (R) => {
+    o(I.TRENDS_CLICK_FILTER, {
       ...G,
-      filterValue: k
+      filterValue: R
     });
-  }, Me = (k) => {
-    K(k);
-  }, nt = () => {
-    K(""), n(v.TRENDS_CLICK_ALL_CATEGORIES, G);
+  }, Ae = (R) => {
+    Y(R);
+  }, at = () => {
+    Y(""), o(I.TRENDS_CLICK_ALL_CATEGORIES, G);
   };
-  return !y || !X ? /* @__PURE__ */ e(ge, {}) : /* @__PURE__ */ f(
-    Xe,
+  return !_ || !X ? /* @__PURE__ */ e(ge, {}) : /* @__PURE__ */ f(
+    Qe,
     {
       accountOptions: c,
       calendarActions: { onRangeChanged: de },
-      dateRange: a,
-      dateRangeVariant: d ? "timeframetabs" : "timeframebuttons",
-      onAccountsFilterClick: Le,
-      onBackClick: o,
-      sx: t,
-      title: L.title,
+      dateRange: i,
+      dateRangeVariant: l ? "timeframetabs" : "timeframebuttons",
+      onAccountsFilterClick: Me,
+      onBackClick: t,
+      sx: n,
+      title: x.title,
       children: [
-        i && /* @__PURE__ */ e(
-          qt,
+        a && /* @__PURE__ */ e(
+          no,
           {
-            header: L.zero_state_content_header,
+            header: x.zero_state_content_header,
             icon: "",
-            onClick: Ie,
-            primaryButton: L.empty_state_primary,
-            subText: L.empty_state_sub_text,
-            sx: { height: B },
-            variant: De
+            onClick: Ee,
+            primaryButton: x.empty_state_primary,
+            subText: x.empty_state_sub_text,
+            sx: { height: O },
+            variant: Le
           }
         ),
-        !i && /* @__PURE__ */ f(
-          b,
+        !a && /* @__PURE__ */ f(
+          S,
           {
             sx: {
-              px: d ? 0 : 48
+              px: l ? 0 : 48
             },
             children: [
               /* @__PURE__ */ f(
-                b,
+                S,
                 {
                   flexDirection: "row",
                   justifyContent: "space-between",
-                  sx: { pb: d ? 12 : 24, pt: d ? 24 : 48 },
+                  sx: { pb: l ? 12 : 24, pt: l ? 24 : 48 },
                   children: [
                     /* @__PURE__ */ e(
-                      tt,
+                      st,
                       {
                         selectedCategoryGuid: oe,
-                        selectedDateRange: a
+                        selectedDateRange: i
                       }
                     ),
-                    /* @__PURE__ */ e(et, { onTabChange: Ee, selectedTab: Z })
+                    /* @__PURE__ */ e(nt, { onTabChange: De, selectedTab: Z })
                   ]
                 }
               ),
-              /* @__PURE__ */ e(b, { alignItems: "center", flexDirection: "row", width: "100%", children: /* @__PURE__ */ e(H, { flexGrow: 1, children: oe && /* @__PURE__ */ f(_e, { onClick: nt, sx: { p: 0, pr: 5 }, children: [
-                /* @__PURE__ */ e(fe, { name: "arrow_back" }),
-                L.all_categories
+              /* @__PURE__ */ e(S, { alignItems: "center", flexDirection: "row", width: "100%", children: /* @__PURE__ */ e(H, { flexGrow: 1, children: oe && /* @__PURE__ */ f(Te, { onClick: at, sx: { p: 0, pr: 5 }, children: [
+                /* @__PURE__ */ e(be, { name: "arrow_back" }),
+                x.all_categories
               ] }) }) }),
-              /* @__PURE__ */ f(b, { flexDirection: z ? "row" : "column", gap: z ? 48 : 16, children: [
-                Z === "Chart" && /* @__PURE__ */ f(rt, { children: [
-                  /* @__PURE__ */ e(H, { sx: { width: z ? "68%" : "100%" }, children: /* @__PURE__ */ e(
-                    Eo,
+              /* @__PURE__ */ f(S, { flexDirection: K ? "row" : "column", gap: K ? 48 : 16, children: [
+                Z === "Chart" && /* @__PURE__ */ f(ct, { children: [
+                  /* @__PURE__ */ e(H, { sx: { width: K ? "68%" : "100%" }, children: /* @__PURE__ */ e(
+                    ko,
                     {
-                      availableHeight: B,
+                      availableHeight: O,
                       minHeight: 450,
-                      selectedDateRange: a,
-                      totals: l
+                      selectedDateRange: i,
+                      totals: d
                     }
                   ) }),
-                  /* @__PURE__ */ f(b, { gap: 16, sx: { width: z ? "32%" : "100%" }, children: [
-                    P && te && S.length > 0 && /* @__PURE__ */ e(
-                      bo,
+                  /* @__PURE__ */ f(S, { gap: 16, sx: { width: K ? "32%" : "100%" }, children: [
+                    F && te && T.length > 0 && /* @__PURE__ */ e(
+                      Io,
                       {
-                        beats: S,
+                        beats: T,
                         onInsightCardClick: r
                       }
                     ),
                     /* @__PURE__ */ e(
-                      To,
+                      vo,
                       {
                         availableHeight: j,
-                        onCategoryClick: D
+                        onCategoryClick: E
                       }
                     )
                   ] })
                 ] }),
                 Z === "Table" && /* @__PURE__ */ e(H, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
-                  ot,
+                  rt,
                   {
                     height: "unset",
-                    monthlyCategoryTotals: l,
-                    onClickRow: Me,
+                    onClickRow: Ae,
                     selectedCategory: oe,
-                    selectedDateRange: a
+                    selectedDateRange: i
                   }
                 ) })
               ] }),
-              ae && /* @__PURE__ */ e(vo, { onClose: Y })
+              ae && /* @__PURE__ */ e(Eo, { onClose: U })
             ]
           }
         ),
         /* @__PURE__ */ e(
-          Jt,
+          so,
           {
-            onClose: () => ye(!1),
+            onClose: () => fe(!1),
             showConnectWidget: le,
-            title: O.mini_title
+            title: M.mini_title
           }
         )
       ]
     }
   );
-}, Nn = R(Mo);
+}, Pn = A(Ho);
 export {
-  Rn as TrendsFullWidget,
-  Hn as TrendsMicroWidget,
-  kn as TrendsMiniWidget,
-  Gn as TrendsStore,
-  Nn as TrendsWidget
+  Bn as TrendsFullWidget,
+  Fn as TrendsMicroWidget,
+  Vn as TrendsMiniWidget,
+  Kn as TrendsStore,
+  Pn as TrendsWidget
 };