@mx-cartographer/experiences 9.0.0-alpha.mega1 → 9.0.0

package/dist/trends/index.es.js

@@ -1,121 +1,124 @@
-import { jsxs as C, jsx as e, Fragment as _t } from "react/jsx-runtime";
-import u, { useRef as Tt, useState as bt, useEffect as St } from "react";
-import { observer as R } from "mobx-react-lite";
-import { CategoryIcon as we, Text as X, Icon as Te, P as fe, H3 as Ue, ChevronRightIcon as xt } from "@mxenabled/mxui";
-import A from "@mui/material/Box";
-import x from "@mui/material/Stack";
-import be from "@mui/material/Button";
-import { addSeconds as Xe } from "date-fns/addSeconds";
+import { jsxs as C, jsx as e, Fragment as vt } from "react/jsx-runtime";
+import g, { useRef as wt, useState as Dt, useEffect as It } from "react";
+import { observer as A } from "mobx-react-lite";
+import { CategoryIcon as ve, Text as F, Icon as He, H3 as Ge, P as pe } from "@mxenabled/mxui";
+import H from "@mui/material/Box";
+import S from "@mui/material/Stack";
+import Te from "@mui/material/Button";
+import { addSeconds as et } from "date-fns/addSeconds";
 import { differenceInCalendarMonths as Se } from "date-fns/differenceInCalendarMonths";
-import wt from "numeral";
-import { useTheme as le } from "@mui/material/styles";
-import { useItemTooltip as vt, ChartsTooltipContainer as Dt } from "@mui/x-charts/ChartsTooltip";
-import { LineChart as Lt } from "@mui/x-charts/LineChart";
-import { u as q } from "../useScreenSize-B6JyS_Lj.mjs";
-import { u as It } from "../useDimensions-27p2evRx.mjs";
-import Ze from "@mui/material/Card";
-import Qe from "@mui/material/CardContent";
-import He from "@mui/material/Divider";
-import Be from "@mui/material/Grid";
-import { u as k, m as J, g as z, b as ye, h as ve, d as De, v as Ce, p as qe, f as We, a as Je } from "../hooks-fY_n74f7.mjs";
-import { b as et } from "../Localization-2MODESHW.mjs";
-import { C as xe } from "../CurrencyText-C-85TnUF.mjs";
-import { a as Re, b as Ve, c as Et } from "../Category-Ccoew_sA.mjs";
-import { f as Q, D as B } from "../Dialog-CWymUiuO.mjs";
-import { f as oe, a as Mt } from "../NumberFormatting-DjTD0t3W.mjs";
-import { a as Fe, c as At, g as Rt, L as tt } from "../TrendsStore-BdsYfCc7.mjs";
-import { T as Zn } from "../TrendsStore-BdsYfCc7.mjs";
-import { c as kt, i as Ht, d as Nt, e as Wt, g as ot, b as nt, f as Pe } from "../SpendingData-B7NuTQ9s.mjs";
-import Ot from "@mui/material/ToggleButton";
-import Gt from "@mui/material/ToggleButtonGroup";
-import { DataGridPro as Bt } from "@mui/x-data-grid-pro";
-import { T as G, a as Vt } from "../ViewMoreMicroCard-CDWR16_h.mjs";
-import { parseISO as st } from "date-fns/parseISO";
-import { H as ke } from "../HeaderCell-DjuifqHJ.mjs";
-import { A as v, W as rt } from "../WidgetContainer-mzejMmz2.mjs";
-import { a as at, T as it } from "../TransactionDetails-CPwv9xtZ.mjs";
-import { D as Ne } from "../Drawer-Bet2ZPJo.mjs";
-import { L as Le } from "../Loader-BSWSYqvn.mjs";
-import { u as Ie } from "../useWidgetLoadTimer-CrUzxN-P.mjs";
-import { L as Oe } from "../LineChart-DHj-Bufi.mjs";
-import { M as Ft } from "../MiniWidgetContainer-DKn7ndO6.mjs";
-import { subMonths as Pt } from "date-fns";
-import { TrendingUp as zt, TrendingDown as $t, MultilineChart as Kt, ExpandLess as Yt, ExpandMore as jt } from "@mxenabled/mx-icons";
-import { M as Ut } from "../MicroWidgetContainer-DSyYwRCU.mjs";
-import Xt from "@mui/material/Collapse";
-import Zt from "@mui/material/List";
-import Qt from "@mui/material/ListItem";
-import qt from "@mui/material/ListItemButton";
-import Jt from "@mui/material/ListItemIcon";
-import eo from "@mui/material/ListItemText";
-import ct from "@mui/material/styles/useTheme";
-import { Stack as to } from "@mui/material";
-import oo from "@mui/material/Paper";
-import { b as no } from "../CategoryUtil-CFHBvaV4.mjs";
-import { E as so } from "../ExportCsvAction-oG_Mn66T.mjs";
-import { u as ro } from "../useInsightsEnabled-dhmXeSyF.mjs";
-import { E as ao } from "../EmptyState-DoxNUae-.mjs";
-import { b as io } from "../GlobalAccountFilter-BpWlPAl5.mjs";
-const lt = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
-  const { categories: n } = k(), { getCategoryName: t } = J(), r = t(o);
-  return /* @__PURE__ */ C(x, { alignItems: "center", direction: "column", gap: "8", justifyContent: "center", mb: 4, children: [
+import Lt from "numeral";
+import { useTheme as Z, styled as Et, alpha as Mt } from "@mui/material/styles";
+import { useItemTooltip as At, ChartsTooltipContainer as Rt } from "@mui/x-charts/ChartsTooltip";
+import { LineChart as kt } from "@mui/x-charts/LineChart";
+import { u as Q } from "../useScreenSize-mWpmnh5w.mjs";
+import { u as Ht } from "../useDimensions-CeDR9V8N.mjs";
+import tt from "@mui/material/Card";
+import ot from "@mui/material/CardContent";
+import Ne from "@mui/material/Divider";
+import Fe from "@mui/material/Grid";
+import { b as nt } from "../Localization-DnoVyBNK.mjs";
+import { u as R, l as q, g as $, b as fe, h as we, d as De, B as ye, D as st, f as Be, a as rt } from "../hooks-BaO_gOI6.mjs";
+import { C as xe } from "../CurrencyText-CCbE6MmF.mjs";
+import { a as Re, C as $e, b as Nt } from "../Category-DEKZGLYe.mjs";
+import { f as X, D as G } from "../DateFormats-HudZ3Bjs.mjs";
+import { f as re, a as Wt } from "../NumberFormatting--XMeeBfr.mjs";
+import { a as Ke, c as Ot, g as Gt } from "../TrendsUtil-D9z3kIj_.mjs";
+import { c as Bt, i as Pt, d as Vt, e as zt, g as at, b as it, f as Ye } from "../SpendingData-PKlh8caU.mjs";
+import Ft from "@mui/material/ToggleButton";
+import $t from "@mui/material/ToggleButtonGroup";
+import { parseISO as lt } from "date-fns/parseISO";
+import { H as ke } from "../HeaderCell-P8w6CmfO.mjs";
+import { T as W, a as Kt } from "../ViewMoreMicroCard-BD_MNc2z.mjs";
+import { useGridApiContext as Yt, useGridRootProps as jt, DataGridPro as Ut } from "@mui/x-data-grid-pro";
+import Xt from "@mui/material/Badge";
+import Zt from "@mui/material/IconButton";
+import { A as w } from "../Analytics-CzGzz_sE.mjs";
+import { T as ct } from "../EmbeddedCard-DPwJjqMH.mjs";
+import { T as dt } from "../TransactionDetails-C3dlAzYf.mjs";
+import { D as Pe } from "../Drawer-BXqqBMxg.mjs";
+import { u as Ie } from "../useWidgetLoadTimer-CJb-RELP.mjs";
+import { L as Le } from "../Loader-CxeBwuPG.mjs";
+import { W as ut } from "../WidgetContainer-DNuz_s7W.mjs";
+import { L as Ve } from "../LineChart-CejWS_rh.mjs";
+import { M as Qt } from "../MiniWidgetContainer-BdPiUU-u.mjs";
+import { subMonths as qt } from "date-fns";
+import { TrendingUp as Jt, TrendingDown as eo, MultilineChart as to, ExpandLess as oo, ExpandMore as no, ChevronRight as so, ArrowBack as ro } from "@mxenabled/mx-icons";
+import { M as ao } from "../MicroWidgetContainer-CfKdQfhi.mjs";
+import io from "@mui/material/Collapse";
+import We from "@mui/material/List";
+import mt from "@mui/material/ListItem";
+import lo from "@mui/material/ListItemButton";
+import co from "@mui/material/ListItemIcon";
+import ht from "@mui/material/ListItemText";
+import { g as Oe } from "../TransactionUtils-BphBJBbU.mjs";
+import { L as uo } from "../ListItemRow-kH1rn8Xu.mjs";
+import { Stack as mo } from "@mui/material";
+import ho from "@mui/material/ListItemAvatar";
+import { E as go } from "../ExportCsvAction-Bw02ZJEj.mjs";
+import { u as po } from "../useInsightsEnabled-DaNLPmUU.mjs";
+import { E as fo } from "../EmptyState-CJUDc3kD.mjs";
+import { C as yo } from "../ConnectDrawer-Cnjr3Ddg.mjs";
+const gt = ({ categoryGuid: t, topLevelCategoryGuid: n }) => {
+  const { categories: s } = R(), { getCategoryName: o } = q(), r = o(t);
+  return /* @__PURE__ */ C(S, { alignItems: "center", direction: "column", gap: "8", justifyContent: "center", mb: 4, children: [
     /* @__PURE__ */ e(
-      A,
+      H,
       {
-        "aria-label": et(n.category_icon_label_aria, r),
+        "aria-label": nt(s.category_icon_label_aria, r),
         mb: 4,
         role: "img",
-        children: /* @__PURE__ */ e(we, { categoryGuid: s })
+        children: /* @__PURE__ */ e(ve, { categoryGuid: n })
       }
     ),
-    /* @__PURE__ */ e(X, { variant: "Body", children: r })
+    /* @__PURE__ */ e(F, { variant: "body1", children: r })
   ] });
-}, co = ({
-  categoryGuids: { guid: o, topLevelGuid: s },
-  hoveredAreaData: n,
-  cursorPosition: t,
+}, Co = ({
+  categoryGuids: { guid: t, topLevelGuid: n },
+  hoveredAreaData: s,
+  cursorPosition: o,
   chartContainerRef: r
 }) => {
-  const i = le(), d = Tt(null), [h, c] = bt({ x: t.x, y: t.y });
-  if (St(() => {
+  const c = Z(), a = wt(null), [d, u] = Dt({ x: o.x, y: o.y });
+  if (It(() => {
     (() => {
-      const m = d.current, _ = r.current;
+      const m = a.current, _ = r.current;
       if (!m || !_) return;
-      const f = m.getBoundingClientRect(), g = _.getBoundingClientRect();
-      let y = t.x, w = t.y;
-      y + f.width * 2 > g.right ? y = t.x - f.width : y - f.width < g.left && (y = t.x), w + f.height * 2 > g.bottom && (w = t.y - f.height), c({ x: y, y: w });
+      const h = m.getBoundingClientRect(), p = _.getBoundingClientRect();
+      let y = o.x, T = o.y;
+      y + h.width * 2 > p.right ? y = o.x - h.width : y - h.width < p.left && (y = o.x), T + h.height * 2 > p.bottom && (T = o.y - h.height), u({ x: y, y: T });
     })();
-  }, [t, r]), !n) return null;
-  const l = n.reduce((p, m) => p + m.y, 0);
+  }, [o, r]), !s) return null;
+  const i = s.reduce((f, m) => f + m.y, 0);
   return /* @__PURE__ */ e(
-    Ze,
+    tt,
     {
-      ref: d,
+      ref: a,
       sx: {
         position: "absolute",
-        top: h.y,
-        left: h.x,
+        top: d.y,
+        left: d.x,
         width: 250,
         pointerEvents: "none"
       },
-      children: /* @__PURE__ */ C(Qe, { children: [
-        /* @__PURE__ */ C(A, { alignItems: "center", display: "flex", flexDirection: "column", children: [
-          /* @__PURE__ */ e(lt, { categoryGuid: o, topLevelCategoryGuid: s }),
-          /* @__PURE__ */ e(X, { variant: "Small", children: `${n.length}-month total` }),
-          /* @__PURE__ */ e(xe, { amount: l, bold: !0, formatString: "0,0", variant: "body2" })
+      children: /* @__PURE__ */ C(ot, { children: [
+        /* @__PURE__ */ C(H, { alignItems: "center", display: "flex", flexDirection: "column", children: [
+          /* @__PURE__ */ e(gt, { categoryGuid: t, topLevelCategoryGuid: n }),
+          /* @__PURE__ */ e(F, { variant: "body2", children: `${s.length}-month total` }),
+          /* @__PURE__ */ e(xe, { amount: i, bold: !0, formatString: "0,0", variant: "body2" })
         ] }),
-        /* @__PURE__ */ e(He, { sx: { my: 16, width: "100%" } }),
-        /* @__PURE__ */ e(Be, { container: !0, children: n.map((p, m) => /* @__PURE__ */ C(u.Fragment, { children: [
-          m > 0 && m % 3 === 0 && /* @__PURE__ */ e(He, { sx: { my: 16, width: "100%" } }),
-          /* @__PURE__ */ e(Be, { item: !0, xs: 4, children: /* @__PURE__ */ C(A, { alignItems: "center", display: "flex", flexDirection: "column", children: [
-            /* @__PURE__ */ e(X, { color: i.palette.text.secondary, variant: "XSmall", children: p.x }),
+        /* @__PURE__ */ e(Ne, { sx: { my: 16, width: "100%" } }),
+        /* @__PURE__ */ e(Fe, { container: !0, children: s.map((f, m) => /* @__PURE__ */ C(g.Fragment, { children: [
+          m > 0 && m % 3 === 0 && /* @__PURE__ */ e(Ne, { sx: { my: 16, width: "100%" } }),
+          /* @__PURE__ */ e(Fe, { size: 4, children: /* @__PURE__ */ C(H, { alignItems: "center", display: "flex", flexDirection: "column", children: [
+            /* @__PURE__ */ e(F, { color: c.palette.text.secondary, variant: "caption", children: f.x }),
             /* @__PURE__ */ e(
               xe,
               {
-                amount: p.y,
+                amount: f.y,
                 bold: !0,
                 formatString: "0,0",
-                variant: "Body"
+                variant: "body1"
               }
             )
           ] }) })
@@ -123,31 +126,31 @@ const lt = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
       ] })
     }
   );
-}, lo = R(co), uo = ({
-  sx: o,
-  categoryGuids: s,
-  hoveredLegend: n,
-  legendRef: t,
+}, _o = A(Co), bo = ({
+  sx: t,
+  categoryGuids: n,
+  hoveredLegend: s,
+  legendRef: o,
   onHoverLegend: r,
-  onClickLegend: i
+  onClickLegend: c
 }) => {
-  const { isMobile: d } = q(), { getCategoryName: h } = J();
+  const { isMobile: a } = Q(), { getCategoryName: d } = q();
   return /* @__PURE__ */ e(
-    x,
+    S,
     {
       direction: "row",
       flexWrap: "wrap",
-      gap: d ? 2 : 6,
+      gap: a ? 2 : 6,
       justifyContent: "start",
-      ref: t,
-      sx: o,
-      children: s.map(({ guid: c, top_level_guid: l }) => {
-        const p = n === c, m = Re[c], _ = Re[l], f = m ?? _ ?? Re.default, g = f + "33";
+      ref: o,
+      sx: t,
+      children: n.map(({ guid: u, top_level_guid: i }) => {
+        const f = s === u, m = Re[u], _ = Re[i], h = m ?? _ ?? Re.default, p = h + "33";
         return /* @__PURE__ */ C(
-          be,
+          Te,
           {
-            onClick: () => i(c),
-            onMouseEnter: () => r(c),
+            onClick: () => c(u),
+            onMouseEnter: () => r(u),
             onMouseLeave: () => r(null),
             sx: {
               color: "text.primary",
@@ -158,151 +161,151 @@ const lt = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
               paddingX: 8,
               paddingY: 4,
               borderRadius: 1,
-              opacity: p ? 1 : 0.7
+              opacity: f ? 1 : 0.7
             },
             children: [
               /* @__PURE__ */ e(
-                A,
+                H,
                 {
                   sx: {
                     width: 16,
                     height: 16,
-                    marginRight: d ? 5 : 10,
+                    marginRight: a ? 5 : 10,
                     borderRadius: "2px",
-                    backgroundColor: n ? p ? f : g : f
+                    backgroundColor: s ? f ? h : p : h
                   }
                 }
               ),
-              /* @__PURE__ */ e(X, { variant: "Body", children: h(c) })
+              /* @__PURE__ */ e(F, { variant: "body1", children: d(u) })
             ]
           },
-          c
+          u
         );
       })
     }
   );
-}, ho = ({
-  categoryGuids: { guid: o, topLevelGuid: s },
-  series: n,
-  xData: t
+}, To = ({
+  categoryGuids: { guid: t, topLevelGuid: n },
+  series: s,
+  xData: o
 }) => {
-  const r = vt(), i = le();
+  const r = At(), c = Z();
   if (!r?.identifier) return null;
-  const { dataIndex: d, seriesId: h } = r.identifier;
-  if (d == null || !h) return null;
-  const l = n.find((m) => m.id === h)?.data?.[d], p = t?.[d];
-  return l === void 0 || !p ? null : /* @__PURE__ */ e(Ze, { sx: { pt: 4, px: 8 }, children: /* @__PURE__ */ e(Qe, { children: /* @__PURE__ */ C(A, { alignItems: "center", display: "flex", flexDirection: "column", children: [
-    /* @__PURE__ */ e(lt, { categoryGuid: o, topLevelCategoryGuid: s }),
-    /* @__PURE__ */ e(X, { color: i.palette.text.secondary, variant: "Small", children: Q(p, B.MONTH_SHORT_YEAR) }),
-    /* @__PURE__ */ e(xe, { amount: String(l), bold: !0, formatString: "0,0", variant: "Body" })
+  const { dataIndex: a, seriesId: d } = r.identifier;
+  if (a == null || !d) return null;
+  const i = s.find((m) => m.id === d)?.data?.[a], f = o?.[a];
+  return i === void 0 || !f ? null : /* @__PURE__ */ e(tt, { sx: { pt: 4, px: 8 }, children: /* @__PURE__ */ e(ot, { children: /* @__PURE__ */ C(H, { alignItems: "center", display: "flex", flexDirection: "column", children: [
+    /* @__PURE__ */ e(gt, { categoryGuid: t, topLevelCategoryGuid: n }),
+    /* @__PURE__ */ e(F, { color: c.palette.text.secondary, variant: "body2", children: X(f, G.MONTH_SHORT_YEAR) }),
+    /* @__PURE__ */ e(xe, { amount: String(i), bold: !0, formatString: "0,0", variant: "body1" })
   ] }) }) });
-}, go = ({
-  onHoverArea: o,
-  onHoverPoint: s,
-  onHoverLegend: n,
-  onClickLegend: t,
+}, So = ({
+  onHoverArea: t,
+  onHoverPoint: n,
+  onHoverLegend: s,
+  onClickLegend: o,
   stackedDatasets: r,
-  unstackedDatasets: i = [],
-  availableHeight: d = 0,
-  minimumHeight: h = 350
+  unstackedDatasets: c = [],
+  availableHeight: a = 0,
+  minimumHeight: d = 350
 }) => {
-  const c = le(), { isMobile: l } = q(), [p, { height: m }] = It(), _ = u.useRef(null), [f, g] = u.useState(0);
-  u.useEffect(() => {
-    const a = Math.max(d - m, h);
-    g(a);
-  }, [d, m]);
-  const [y, w] = u.useState(null), [b, M] = u.useState({
+  const u = Z(), { isMobile: i } = Q(), [f, { height: m }] = Ht(), _ = g.useRef(null), [h, p] = g.useState(0);
+  g.useEffect(() => {
+    const l = Math.max(a - m, d);
+    p(l);
+  }, [a, m]);
+  const [y, T] = g.useState(null), [N, x] = g.useState({
     hoveredSeriesId: null,
     hoveredAreaData: null,
     isAreaHovered: !1,
     cursorPos: { x: 0, y: 0 }
-  }), { hoveredSeriesId: I, hoveredAreaData: S, isAreaHovered: H, cursorPos: N } = b, $ = H && I && S, V = !$, K = [...r, ...i], E = K[0]?.dataset.length ?? 0, te = K.flatMap((a) => a.dataset.map((T) => T.x)), O = K.flatMap((a) => a.dataset.map((T) => T.y)), ne = r[0]?.dataset?.map(
-    (a, T) => r.reduce((L, U) => L + U.dataset[T]?.y || 0, 0)
-  ) ?? [0], se = Math.max(...ne), Z = Math.max(
-    ...i.flatMap((a) => a.dataset.map((T) => T.y))
-  ), de = Math.floor(Math.min(...O) / 100) * 100, ue = Math.ceil(Math.max(se, Z) / 100) * 100, F = r.map((a, T) => ({
-    id: `stacked-${T}`,
-    guid: a.category_guid,
-    top_level_guid: a.top_level_category_guid,
+  }), { hoveredSeriesId: L, hoveredAreaData: M, isAreaHovered: E, cursorPos: v } = N, K = E && L && M, ae = !K, Y = [...r, ...c], J = Y[0]?.dataset.length ?? 0, P = Y.flatMap((l) => l.dataset.map((b) => b.x)), V = Y.flatMap((l) => l.dataset.map((b) => b.y)), O = r[0]?.dataset?.map(
+    (l, b) => r.reduce((I, z) => I + z.dataset[b]?.y || 0, 0)
+  ) ?? [0], ee = Math.max(...O), Ce = Math.max(
+    ...c.flatMap((l) => l.dataset.map((b) => b.y))
+  ), ie = Math.floor(Math.min(...V) / 100) * 100, te = Math.ceil(Math.max(ee, Ce) / 100) * 100, j = r.map((l, b) => ({
+    id: `stacked-${b}`,
+    guid: l.category_guid,
+    top_level_guid: l.top_level_category_guid,
     area: !0,
-    color: r[T].category_color ?? c.palette.primary.main,
-    data: a.dataset.map((L) => L.y),
-    label: r[T].category_name,
+    color: r[b].category_color ?? u.palette.primary.main,
+    data: l.dataset.map((I) => I.y),
+    label: r[b].category_name,
     stack: "total",
     type: "line",
     highlightScope: { highlight: "item" },
-    valueFormatter: (L) => oe(L, "0,0")
-  })), re = i.map((a, T) => ({
-    id: `unstacked-${T}`,
-    guid: a.category_guid,
-    top_level_guid: a.top_level_category_guid,
+    valueFormatter: (I) => re(I, "0,0")
+  })), ne = c.map((l, b) => ({
+    id: `unstacked-${b}`,
+    guid: l.category_guid,
+    top_level_guid: l.top_level_category_guid,
     area: !1,
-    color: a.category_color,
-    data: a.dataset.map((L) => L.y),
-    label: a.category_name,
+    color: l.category_color,
+    data: l.dataset.map((I) => I.y),
+    label: l.category_name,
     type: "line",
-    valueFormatter: (L) => oe(L, "0,0")
-  })), Y = [...F, ...re], he = [
-    ...F.map(({ guid: a, top_level_guid: T }) => ({
-      guid: a,
-      top_level_guid: T
+    valueFormatter: (I) => re(I, "0,0")
+  })), U = [...j, ...ne], de = [
+    ...j.map(({ guid: l, top_level_guid: b }) => ({
+      guid: l,
+      top_level_guid: b
     })),
-    ...re.map(({ guid: a, top_level_guid: T }) => ({
-      guid: a,
-      top_level_guid: T
+    ...ne.map(({ guid: l, top_level_guid: b }) => ({
+      guid: l,
+      top_level_guid: b
     }))
-  ], j = (a) => {
-    const L = a.startsWith("stacked-") ? r[parseInt(a.split("-")[1])] : i[parseInt(a.split("-")[1])];
+  ], B = (l) => {
+    const I = l.startsWith("stacked-") ? r[parseInt(l.split("-")[1])] : c[parseInt(l.split("-")[1])];
     return {
-      guid: L?.category_guid,
-      topLevelGuid: L?.top_level_category_guid
+      guid: I?.category_guid,
+      topLevelGuid: I?.top_level_category_guid
     };
-  }, ae = (a) => {
-    w(a), n?.(a ?? "");
-  }, ge = (a) => {
-    t?.(a ?? "");
-  }, ie = () => {
-    const a = j(String(I)).guid;
-    a && t?.(a);
-  }, ce = (a) => {
-    const T = String(a?.seriesId), L = j(T).guid, U = Y.find((me) => me.id === T), Ee = U && a?.dataIndex !== void 0, _e = U && a?.dataIndex === void 0;
+  }, ue = (l) => {
+    T(l), s?.(l ?? "");
+  }, se = (l) => {
+    o?.(l ?? "");
+  }, le = () => {
+    const l = B(String(L)).guid;
+    l && o?.(l);
+  }, ce = (l) => {
+    const b = String(l?.seriesId), I = B(b).guid, z = U.find((he) => he.id === b), Ee = z && l?.dataIndex !== void 0, _e = z && l?.dataIndex === void 0;
     if (Ee)
-      M({
-        hoveredSeriesId: T,
+      x({
+        hoveredSeriesId: b,
         hoveredAreaData: null,
         isAreaHovered: !1,
-        cursorPos: N
-      }), s?.(L);
+        cursorPos: v
+      }), n?.(I);
     else if (_e) {
-      const me = U?.data.map((Me, Ae) => ({
-        x: te[Ae],
+      const he = z?.data.map((Me, Ae) => ({
+        x: P[Ae],
         y: Me
       })) ?? [];
-      M({
-        hoveredSeriesId: T,
-        hoveredAreaData: me,
+      x({
+        hoveredSeriesId: b,
+        hoveredAreaData: he,
         isAreaHovered: !0,
-        cursorPos: N
-      }), o?.(L);
+        cursorPos: v
+      }), t?.(I);
     } else
-      M({
+      x({
         hoveredSeriesId: null,
         hoveredAreaData: null,
         isAreaHovered: !1,
-        cursorPos: N
+        cursorPos: v
       });
-  }, D = (a) => {
-    if (a.target instanceof Element && a.target.classList[0]?.includes("MuiMarkElement-root"))
+  }, me = (l) => {
+    if (l.target instanceof Element && l.target.classList[0]?.includes("MuiMarkElement-root"))
       return;
-    const T = a.currentTarget.getBoundingClientRect();
-    M((L) => ({
-      ...L,
+    const b = l.currentTarget.getBoundingClientRect();
+    x((I) => ({
+      ...I,
       cursorPos: {
-        x: a.clientX - T.left,
-        y: a.clientY - T.top
+        x: l.clientX - b.left,
+        y: l.clientY - b.top
       }
     }));
-  }, P = {
+  }, D = {
     p: 4,
     "& .MuiBarLabel-root": {
       fontSize: 10,
@@ -318,17 +321,17 @@ const lt = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
     '& [class*="MuiLineElement-series-unstacked-"]': {
       strokeWidth: 3
     },
-    ...y && F.reduce((a, T, L) => {
-      const U = `.MuiAreaElement-series-stacked-${L}`;
-      return a[U] = {
-        opacity: F[L].guid === y ? 0.9 : 0.2
-      }, a;
+    ...y && j.reduce((l, b, I) => {
+      const z = `.MuiAreaElement-series-stacked-${I}`;
+      return l[z] = {
+        opacity: j[I].guid === y ? 0.9 : 0.2
+      }, l;
     }, {})
   };
   return /* @__PURE__ */ e(
-    A,
+    H,
     {
-      onMouseMove: D,
+      onMouseMove: me,
       ref: _,
       sx: {
         position: "relative",
@@ -342,75 +345,75 @@ const lt = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
         }
       },
       children: /* @__PURE__ */ C(
-        x,
+        S,
         {
           direction: { xs: "column", md: "column" },
           spacing: { xs: 0, md: 4 },
           sx: { width: "100%", position: "relative" },
           children: [
             /* @__PURE__ */ e(
-              Lt,
+              kt,
               {
-                height: f,
+                height: h,
                 hideLegend: !0,
                 margin: { bottom: 24, left: 12, right: 54, top: 48 },
-                onAreaClick: ie,
+                onAreaClick: le,
                 onHighlightChange: ce,
-                series: Y,
+                series: U,
                 skipAnimation: !0,
                 slotProps: {
-                  tooltip: { trigger: V ? "item" : "none" }
+                  tooltip: { trigger: ae ? "item" : "none" }
                 },
                 slots: {
-                  tooltip: V && I ? (a) => /* @__PURE__ */ e(Dt, { children: /* @__PURE__ */ e(
-                    ho,
+                  tooltip: ae && L ? (l) => /* @__PURE__ */ e(Rt, { children: /* @__PURE__ */ e(
+                    To,
                     {
-                      ...a,
-                      categoryGuids: j(I),
-                      series: Y,
-                      xData: te
+                      ...l,
+                      categoryGuids: B(L),
+                      series: U,
+                      xData: P
                     }
                   ) }) : void 0
                 },
-                sx: P,
+                sx: D,
                 xAxis: [
                   {
-                    data: te,
+                    data: P,
                     scaleType: "time",
-                    valueFormatter: (a) => Q(a, B.MONTH_SHORT_YEAR),
-                    tickNumber: E
+                    valueFormatter: (l) => X(l, G.MONTH_SHORT_YEAR),
+                    tickNumber: J
                     // How many ticks to show on the x-axis
                   }
                 ],
                 yAxis: [
                   {
-                    min: de,
-                    max: ue || 100,
-                    valueFormatter: (a) => wt(a).format("0a")
+                    min: ie,
+                    max: te || 100,
+                    valueFormatter: (l) => Lt(l).format("0a")
                   }
                 ]
               }
             ),
             /* @__PURE__ */ e(
-              uo,
+              bo,
               {
-                categoryGuids: he,
+                categoryGuids: de,
                 hoveredLegend: y,
-                legendRef: p,
-                onClickLegend: ge,
-                onHoverLegend: ae,
-                sx: { px: l ? 0 : 24 }
+                legendRef: f,
+                onClickLegend: se,
+                onHoverLegend: ue,
+                sx: { px: i ? 0 : 24 }
               }
             ),
-            $ && /* @__PURE__ */ e(
-              lo,
+            K && /* @__PURE__ */ e(
+              _o,
               {
-                categoryGuids: j(I),
+                categoryGuids: B(L),
                 chartContainerRef: _,
-                cursorPosition: N,
-                hoveredAreaData: S.map((a) => ({
-                  ...a,
-                  x: Q(a.x, B.MONTH_SHORT_YEAR)
+                cursorPosition: v,
+                hoveredAreaData: M.map((l) => ({
+                  ...l,
+                  x: X(l.x, G.MONTH_SHORT_YEAR)
                 }))
               }
             )
@@ -419,196 +422,222 @@ const lt = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
       )
     }
   );
-}, dt = ({ selectedTab: o, onTabChange: s }) => {
-  const { common: n } = k();
+}, pt = ({ selectedTab: t, onTabChange: n }) => {
+  const { common: s } = R();
   return /* @__PURE__ */ e(
-    Gt,
+    $t,
     {
-      "aria-label": n.view_toggle,
+      "aria-label": s.view_toggle,
       exclusive: !0,
-      onChange: s,
+      onChange: n,
       orientation: "horizontal",
-      value: o,
-      children: ["Chart", "Table"].map((t) => /* @__PURE__ */ e(
-        Ot,
+      value: t,
+      children: ["Chart", "Table"].map((o) => /* @__PURE__ */ e(
+        Ft,
         {
-          "aria-label": t === "Chart" ? n.view_chart : n.view_table,
-          "aria-pressed": o === t,
+          "aria-label": o === "Chart" ? s.view_chart : s.view_table,
+          "aria-pressed": t === o,
           color: "primary",
           sx: { width: 56 },
-          value: t,
-          children: t === "Chart" ? /* @__PURE__ */ e(Te, { name: "table_chart_view" }) : /* @__PURE__ */ e(Te, { name: "format_list_bulleted" })
+          value: o,
+          children: o === "Chart" ? /* @__PURE__ */ e(He, { name: "table_chart_view" }) : /* @__PURE__ */ e(He, { name: "format_list_bulleted" })
         },
-        t
+        o
       ))
     }
   );
-}, ut = ({ selectedDateRange: o, selectedCategoryGuid: s }) => {
-  const { trends: n } = k(), { isMobile: t, isDesktop: r } = q(), { getCategoryName: i } = J(), d = u.useMemo(() => {
-    const l = o.start.getFullYear() === o.end.getFullYear() ? Q(
-      o.start,
-      t ? B.MONTH_SHORT : B.MONTH_LONG
-    ) : Q(
-      o.start,
-      t ? B.MONTH_SHORT_YEAR : B.MONTH_YEAR
-    ), p = Q(
-      o.end,
-      t ? B.MONTH_SHORT_YEAR : B.MONTH_YEAR
+}, ft = ({ selectedDateRange: t, selectedCategoryGuid: n }) => {
+  const { trends: s } = R(), { isMobile: o, isDesktop: r } = Q(), { getCategoryName: c } = q(), a = g.useMemo(() => {
+    const i = t.start.getFullYear() === t.end.getFullYear() ? X(
+      t.start,
+      o ? G.MONTH_SHORT : G.MONTH_LONG
+    ) : X(
+      t.start,
+      o ? G.MONTH_SHORT_YEAR : G.MONTH_YEAR
+    ), f = X(
+      t.end,
+      o ? G.MONTH_SHORT_YEAR : G.MONTH_YEAR
     );
-    return `${l} - ${p}`;
-  }, [o, t]), c = i(s) || (t ? n.sub_title : n.sub_title_by_category);
-  return /* @__PURE__ */ C(A, { children: [
+    return `${i} - ${f}`;
+  }, [t, o]), u = c(n) || (o ? s.sub_title : s.sub_title_by_category);
+  return /* @__PURE__ */ C(H, { children: [
     /* @__PURE__ */ e(
-      X,
+      Ge,
       {
-        display: "block",
-        fontWeight: 700,
         sx: {
-          whiteSpace: "normal",
+          fontSize: r ? null : 15,
           overflow: "visible",
           textOverflow: "unset"
         },
-        variant: r ? "H3" : "Body",
-        children: c
+        children: u
       }
     ),
-    /* @__PURE__ */ e(X, { variant: r ? "subtitle1" : "body2", children: d })
+    /* @__PURE__ */ e(F, { variant: r ? "subtitle1" : "body2", children: a })
   ] });
-}, mo = ({ name: o, topLevelCategoryGuid: s }) => /* @__PURE__ */ C(x, { alignItems: "center", direction: "row", justifyContent: "center", children: [
-  /* @__PURE__ */ e(A, { "aria-hidden": !0, children: /* @__PURE__ */ e(we, { categoryGuid: s, variant: "twotone" }) }),
-  /* @__PURE__ */ e(X, { sx: { ml: 12 }, variant: "body2", children: o })
-] }), po = (o) => /* @__PURE__ */ e(x, { alignItems: "center", direction: "row", role: "rowheader", tabIndex: o.tabIndex, children: /* @__PURE__ */ e(
-  mo,
-  {
-    name: o.row.category,
-    topLevelCategoryGuid: o.row.top_level_category_guid
-  }
-) }), ze = (o) => {
-  const s = o.row.category_guid, n = o.row.top_level_category_guid, t = s === Ve.INCOME || n === Ve.INCOME, r = o.row[o.field];
-  return /* @__PURE__ */ e(x, { alignItems: "flex-end", direction: "row", tabIndex: o.tabIndex, children: /* @__PURE__ */ e(
+}, xo = (t) => {
+  const n = t.id === "total";
+  return /* @__PURE__ */ C(S, { alignItems: "center", direction: "row", role: "rowheader", tabIndex: t.tabIndex, children: [
+    !n && /* @__PURE__ */ e(H, { "aria-hidden": !0, children: /* @__PURE__ */ e(ve, { categoryGuid: t.row.top_level_category_guid, variant: "twotone" }) }),
+    /* @__PURE__ */ e(F, { bold: n, sx: { ml: 12 }, variant: n ? "body1" : "body2", children: t.row.category })
+  ] });
+}, je = (t) => {
+  const n = t.row.category_guid, s = t.row.top_level_category_guid, o = n === $e.INCOME || s === $e.INCOME, r = t.id === "total", c = t.field === "total", a = c ? t.row[t.field] : t.row.monthlyAmounts[t.field];
+  return /* @__PURE__ */ e(S, { alignItems: "flex-end", direction: "row", tabIndex: t.tabIndex, children: /* @__PURE__ */ e(
     xe,
     {
-      amount: t ? Math.abs(r) : r,
-      isIncome: t,
-      sx: { fontWeight: t ? 600 : 500 },
-      symbol: t ? "+" : void 0,
-      variant: "body2"
+      amount: o ? Math.abs(a) : a,
+      isIncome: o,
+      sx: { fontWeight: o || c || r ? 600 : 500 },
+      symbol: o ? "+" : void 0,
+      variant: r ? "body1" : "body2"
     }
   ) });
-}, $e = (o, s) => {
-  const n = Q(st(s.isoDate), B.MONTH_LONG);
-  return o[n] = s.amount, o;
-}, Ke = (o) => (s, n) => {
-  const t = Q(st(n.isoDate), B.MONTH_LONG);
-  return s + (o.includes(t) ? n.amount : 0);
-}, fo = (o, s) => {
-  const n = [], t = new Date(o);
-  for (; t <= s; ) {
-    const r = Q(t, B.MONTH_LONG);
-    n.push(r), t.setMonth(t.getMonth() + 1);
+}, Ue = (t, n) => {
+  const s = X(lt(n.isoDate), G.MONTH_LONG);
+  return t[s] = n.amount, t;
+}, Xe = (t) => (n, s) => {
+  const o = X(lt(s.isoDate), G.MONTH_LONG);
+  return n + (t.includes(o) ? s.amount : 0);
+}, vo = (t, n) => {
+  const s = [], o = new Date(t);
+  for (; o <= n; ) {
+    const r = X(o, G.MONTH_LONG);
+    s.push(r), o.setMonth(o.getMonth() + 1);
   }
-  return n;
-}, yo = (o, s) => {
-  const n = {
+  return s;
+}, wo = (t, n) => {
+  const s = {
     field: "category",
     flex: 1,
     headerClassName: "trends-table-header",
-    headerName: s.category_title,
+    headerName: n.category_title,
     minWidth: 210,
     renderHeader: ke,
-    renderCell: po,
+    renderCell: xo,
     sortable: !0,
-    sortComparator: At,
+    sortComparator: Ot,
     type: "string"
-  }, t = o.map((i) => ({
-    field: i,
+  }, o = t.map((c) => ({
+    field: c,
     flex: 1,
     headerClassName: "trends-table-header",
-    headerName: i,
+    headerName: c,
     minWidth: 100,
     renderHeader: ke,
-    renderCell: ze,
-    align: "right",
-    headerAlign: "right",
+    renderCell: je,
+    align: "center",
+    headerAlign: "center",
     sortable: !0,
     hideSortIcons: !1,
     type: "number",
-    sortComparator: Fe
+    sortComparator: Ke,
+    valueGetter: (a, d) => d.monthlyAmounts?.[c] ?? 0
   })), r = {
     field: "total",
     flex: 1,
     headerClassName: "trends-table-header",
-    headerName: s.table_column_total,
+    headerName: n.table_column_total,
     minWidth: 100,
     renderHeader: ke,
-    renderCell: ze,
-    align: "right",
-    headerAlign: "right",
+    renderCell: je,
+    align: "center",
+    headerAlign: "center",
     sortable: !0,
     hideSortIcons: !1,
     type: "number",
-    sortComparator: Fe
+    sortComparator: Ke
   };
-  return [n, ...t, r];
-}, Co = (o, s, n, t) => {
-  const r = o.map((i) => {
-    let d = i.totalMonthlyAmounts;
-    return t && (d = i.monthlyAmounts), {
-      id: i.guid,
-      category: i.name,
-      category_guid: i.guid,
+  return [s, ...o, r];
+}, Ze = (t, n, s, o, r) => {
+  const c = t.filter((a) => a.is_income === s).map((a) => {
+    let d = a.totalMonthlyAmounts;
+    return r && (d = a.monthlyAmounts), {
+      id: a.guid,
+      category: a.name,
+      category_guid: a.guid,
       isParent: !1,
-      top_level_category_guid: i.parent_guid || i.guid,
-      total: d.reduce(Ke(n), 0),
-      ...d.reduce($e, {})
+      top_level_category_guid: a.parent_guid || a.guid,
+      total: d.reduce(Xe(o), 0),
+      monthlyAmounts: d.reduce(Ue, {})
     };
   });
-  if (t) {
-    const i = t.monthlyAmounts.reduce(Ke(n), 0);
-    i !== 0 && r.push({
-      id: `sub-${t.guid}`,
-      category: et(s.category_general, t.name),
-      category_guid: t.guid,
+  if (r && r.is_income === s) {
+    const a = r.monthlyAmounts.reduce(Xe(o), 0);
+    a !== 0 && c.push({
+      id: `sub-${r.guid}`,
+      category: nt(n.category_general, r.name),
+      category_guid: r.guid,
       isParent: !0,
-      top_level_category_guid: t.guid,
-      total: i,
-      ...t.monthlyAmounts.reduce($e, {})
+      top_level_category_guid: r.guid,
+      total: a,
+      monthlyAmounts: r.monthlyAmounts.reduce(Ue, {})
     });
   }
-  return r;
-}, ht = ({
-  selectedDateRange: o,
-  selectedCategory: s,
-  onClickRow: n,
-  height: t = "100%",
-  sx: r = {}
+  return c;
+}, Do = Et("div")({
+  display: "flex",
+  visibility: "hidden",
+  width: 0
+});
+function Io({
+  direction: t,
+  index: n,
+  sortingOrder: s,
+  disabled: o,
+  className: r,
+  field: c
+}) {
+  const a = Yt(), d = jt();
+  let u = null;
+  const i = {};
+  if (t === "asc" ? u = d.slots.columnSortedAscendingIcon : t === "desc" ? u = d.slots.columnSortedDescendingIcon : (u = d.slots.columnUnsortedIcon ?? null, i.sortingOrder = s), !u) return null;
+  const m = a.current.getColumn(c)?.headerName ?? c;
+  let _ = "";
+  t === "asc" ? _ = ", sorted ascending" : t === "desc" && (_ = ", sorted descending");
+  const h = ["Total", "Category"].includes(m) ? "" : " category totals", p = `Sort by ${m}${h}${_}`, y = /* @__PURE__ */ e(u, { className: "MuiDataGrid-sortIcon", fontSize: "small", ...i }), T = /* @__PURE__ */ e(
+    Zt,
+    {
+      disabled: o,
+      size: "small",
+      tabIndex: -1,
+      ...d.slotProps?.baseIconButton,
+      "aria-label": p,
+      className: `MuiDataGrid-sortButton${r ? ` ${r}` : ""}`,
+      title: p,
+      children: y
+    }
+  );
+  return /* @__PURE__ */ e(Do, { className: "MuiDataGrid-iconButtonContainer", children: n != null ? /* @__PURE__ */ e(Xt, { badgeContent: n, color: "default", overlap: "circular", children: T }) : T });
+}
+const Lo = g.memo(Io), Qe = ({
+  columns: t,
+  onRowClick: n,
+  parentCategory: s,
+  rows: o,
+  totalRow: r
 }) => {
-  const i = le(), { onEvent: d } = z(), { trends: h } = k(), { trendsCategories: c } = J(), l = u.useMemo(() => fo(o.start, o.end), [o]), p = i.palette.mode === "light", m = u.useMemo(() => yo(l, h), [l, h]), _ = u.useMemo(() => {
-    if (s)
-      return c.find((g) => g.guid === s);
-  }, [s, c]), f = u.useMemo(() => {
-    let g = c;
-    return _ && (g = _.subCategories.filter(
-      (y) => y.monthlyAmounts.some((w) => w.amount !== 0)
-    )), Co(g, h, l, _);
-  }, [c, l, _, h]);
-  return /* @__PURE__ */ e(A, { sx: { height: t, width: "100%", overflowX: "auto", boxShadow: "none", ...r }, children: /* @__PURE__ */ e(
-    Bt,
+  const c = Z(), { onEvent: a } = $(), d = c.palette.mode === "light";
+  return /* @__PURE__ */ e(
+    Ut,
     {
-      columns: m,
+      columns: t,
       disableColumnFilter: !0,
       disableColumnMenu: !0,
       hideFooter: !0,
       initialState: { sorting: { sortModel: [{ field: "category", sort: "asc" }] } },
-      onRowClick: (g) => {
-        _ || n?.(g.row.category_guid), d(v.TRENDS_CLICK_LIST_ITEM, {
-          ...G,
-          listItem: Et[g.row.category_guid]
+      onRowClick: (u) => {
+        s || n?.(u.row.category_guid), a(w.TRENDS_CLICK_LIST_ITEM, {
+          ...W,
+          listItem: Nt[u.row.category_guid]
         });
       },
+      pinnedRows: {
+        bottom: r ? [r] : []
+      },
       rowHeight: 64,
-      rows: f,
+      rows: o,
       slotProps: { baseIconButton: { color: "secondary", sx: { ml: 8 } } },
+      slots: { columnHeaderSortIcon: Lo },
       sortingOrder: ["asc", "desc"],
       sx: {
         borderColor: "divider",
@@ -616,180 +645,241 @@ const lt = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
         borderStyle: "solid",
         borderRadius: 2,
         "& .MuiDataGrid-columnHeaders": {
-          bgcolor: p ? "neutral.50" : "neutral.800",
+          bgcolor: d ? "neutral.50" : "neutral.800",
           borderBottom: "none"
         },
         "& .trends-table-header": {
-          bgcolor: p ? "neutral.50" : "neutral.800"
+          bgcolor: d ? "neutral.50" : "neutral.800"
         }
       }
     }
-  ) });
-}, _o = {
+  );
+}, yt = ({
+  selectedDateRange: t,
+  selectedCategory: n,
+  onClickRow: s,
+  height: o = "100%",
+  sx: r = {}
+}) => {
+  const { trends: c } = R(), { trendsCategories: a } = q(), d = g.useMemo(() => vo(t.start, t.end), [t]), u = g.useMemo(() => wo(d, c), [d, c]), i = g.useMemo(() => {
+    if (n)
+      return a.find((h) => h.guid === n);
+  }, [n, a]), [f, m] = g.useMemo(() => {
+    let h = a;
+    return i && (h = i.subCategories.filter(
+      (p) => p.monthlyAmounts.some((y) => y.amount !== 0)
+    )), [
+      Ze(h, c, !0, d, i),
+      Ze(h, c, !1, d, i)
+    ];
+  }, [a, d, i, c]), _ = {
+    id: "total",
+    category: c.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(([y, T]) => {
+        h[y] = (h[y] || 0) + T;
+      }), h),
+      {}
+    )
+  };
+  return /* @__PURE__ */ C(
+    S,
+    {
+      gap: 24,
+      sx: { height: o, width: "100%", overflowX: "auto", boxShadow: "none", ...r },
+      children: [
+        (!i || i && i.is_income) && /* @__PURE__ */ e(
+          Qe,
+          {
+            columns: u,
+            onRowClick: s,
+            parentCategory: i,
+            rows: f
+          }
+        ),
+        (!i || i && !i.is_income) && /* @__PURE__ */ e(
+          Qe,
+          {
+            columns: u,
+            onRowClick: s,
+            parentCategory: i,
+            rows: m,
+            totalRow: _
+          }
+        )
+      ]
+    }
+  );
+}, Eo = {
   title: "Transaction List"
-}, To = ({
-  categoryGuid: o,
-  dateRange: s,
-  isOpen: n,
-  onClose: t
+}, Mo = ({
+  categoryGuid: t,
+  dateRange: n,
+  isOpen: s,
+  onClose: o
 }) => {
-  const { onEvent: r } = z(), { selectedAccountGuids: i } = ye(), { common: d } = k(), { setFilter: h, sortedTransactions: c } = ve(), [l, p] = u.useState(""), m = u.useMemo(
-    () => c.find((f) => f.guid === l),
-    [l, c]
+  const { onEvent: r } = $(), { selectedAccountGuids: c } = fe(), { common: a } = R(), { setFilter: d, sortedTransactions: u } = we(), [i, f] = g.useState(""), m = g.useMemo(
+    () => u.find((h) => h.guid === i),
+    [i, u]
   );
-  u.useEffect(() => {
-    h({
-      accounts: i,
-      dateRange: s,
-      custom: (f) => o === "" || o === f.category_guid || o === f.top_level_category_guid,
-      showSplits: !!o
+  g.useEffect(() => {
+    d({
+      accounts: c,
+      dateRange: n,
+      custom: (h) => t === "" || t === h.category_guid || t === h.top_level_category_guid,
+      showSplits: !!t
     });
-  }, [i, o, s]), u.useEffect(() => r(v.TRENDS_VIEW_TRANSACTIONS), []);
+  }, [c, t, n]), g.useEffect(() => r(w.TRENDS_VIEW_TRANSACTIONS), []);
   const _ = () => {
-    p(""), t();
+    f(""), o();
   };
   return /* @__PURE__ */ C(
-    Ne,
+    Pe,
     {
-      ariaLabelClose: d.close_aria,
-      isOpen: n,
+      ariaLabelClose: a.close_aria,
+      isOpen: s,
       onClose: _,
-      title: _o.title,
+      title: Eo.title,
       children: [
-        m && /* @__PURE__ */ e(at, { transaction: m }),
-        !m && /* @__PURE__ */ e(it, { onClick: p })
+        m && /* @__PURE__ */ e(dt, { transaction: m }),
+        !m && /* @__PURE__ */ e(ct, { onClick: f })
       ]
     }
   );
-}, bo = R(To), So = ({ onBackClick: o, sx: s }) => {
-  const { onEvent: n } = z(), { isDesktop: t, isTablet: r, isMobile: i } = q(), { isAccountDataLoaded: d, loadAccountData: h } = De(), {
-    categoriesLoaded: c,
-    loadCategories: l,
-    loadDateRangeCategoryTotals: p,
-    loadMonthlyCategoryTotals: m,
-    monthlyCategoryTotals: _,
-    getCategoryName: f
-  } = J(), {
-    isTransactionDataLoaded: g,
-    loadTransactionData: y,
-    sortedTransactions: w
-  } = ve(), { selectedDateRange: b, setSelectedDateRange: M } = Ce(), { isInitialized: I, selectedAccounts: S } = ye(), { trends: H } = k(), [N, $] = u.useState(!1), [V, K] = u.useState(!1), [E, te] = u.useState("Chart"), [O, ne] = u.useState(""), [se, Z] = u.useState(window.innerHeight), ue = se - (i ? 315 : 345);
+}, Ao = A(Mo), Ro = ({ onBackClick: t, onMenuClick: n, sx: s }) => {
+  const { onEvent: o } = $(), { isDesktop: r, isTablet: c, isMobile: a } = Q(), { isAccountDataLoaded: d, loadAccountData: u } = De(), {
+    categoriesLoaded: i,
+    loadCategories: f,
+    loadDateRangeCategoryTotals: m,
+    loadMonthlyCategoryTotals: _,
+    monthlyCategoryTotals: h,
+    getCategoryName: p
+  } = q(), {
+    isTransactionDataLoaded: y,
+    loadTransactionData: T,
+    sortedTransactions: N
+  } = we(), { selectedDateRange: x, setSelectedDateRange: L } = ye(), { isInitialized: M, selectedAccounts: E } = fe(), { trends: v } = R(), [K, ae] = g.useState(!1), [Y, J] = g.useState(!1), [P, V] = g.useState("Chart"), [O, ee] = g.useState(""), [Ce, ie] = g.useState(window.innerHeight), j = Ce - (a ? 315 : 345);
   Ie({
     widgetName: "TrendsFullWidget",
-    isLoaded: N
-  }), u.useEffect(() => {
-    const D = () => Z(window.innerHeight);
-    return window.addEventListener("resize", D), d || h().finally(), c || l().finally(), g || y().finally(), () => window.removeEventListener("resize", D);
-  }, []), u.useEffect(() => {
-    I && p(S, b.start, b.end).then(() => {
-      m(
-        S,
-        b.start,
-        b.end
+    isLoaded: K
+  }), g.useEffect(() => {
+    const D = () => ie(window.innerHeight);
+    return window.addEventListener("resize", D), d || u().finally(), i || f().finally(), y || T().finally(), () => window.removeEventListener("resize", D);
+  }, []), g.useEffect(() => {
+    M && m(E, x.start, x.end).then(() => {
+      _(
+        E,
+        x.start,
+        x.end
       );
     }).finally(() => {
-      $(!0), n(v.TRENDS_LOAD_WIDGET, {
-        ...G,
-        time_period: `${Se(b.end, b.start)}M`
+      ae(!0), o(w.TRENDS_LOAD_WIDGET, {
+        ...W,
+        time_period: `${Se(x.end, x.start)}M`
       });
     });
-  }, [I, S, b]);
-  const F = u.useMemo(() => {
-    if (!N) return { stackedDatasets: [], unstackedDatasets: [] };
-    const D = Rt(
-      _,
-      b.start,
-      b.end
-    ), P = O.length ? D.filter(
-      (a) => a.top_level_category_guid === O || a.category_guid === O
-    ) : kt(D);
+  }, [M, E, x]);
+  const ne = g.useMemo(() => {
+    if (!K) return { stackedDatasets: [], unstackedDatasets: [] };
+    const D = Gt(
+      h,
+      x.start,
+      x.end
+    ), l = O.length ? D.filter(
+      (b) => b.top_level_category_guid === O || b.category_guid === O
+    ) : Bt(D);
     return {
-      stackedDatasets: P.filter(Nt),
-      unstackedDatasets: P.filter(Ht)
+      stackedDatasets: l.filter(Vt),
+      unstackedDatasets: l.filter(Pt)
     };
-  }, [_, O, b]), re = (D, P) => {
-    te(P ?? E), n(v.TRENDS_CLICK_TOGGLE_VIEW);
-  }, Y = (D) => {
-    const P = Xe(D?.[0], 1), a = D?.[1], T = Se(a, P);
-    M({ start: P, end: a }), n(v.TRENDS_CLICK_TIME_WINDOW, {
-      time_period: T + "M"
+  }, [h, O, x]), U = (D, l) => {
+    V(l ?? P), o(w.TRENDS_CLICK_TOGGLE_VIEW);
+  }, de = (D) => {
+    const l = et(D?.[0], 1), b = D?.[1], I = Se(b, l);
+    L({ start: l, end: b }), o(w.TRENDS_CLICK_TIME_WINDOW, {
+      time_period: I + "M"
     });
-  }, he = () => {
-    n(v.TRENDS_CLICK_FILTER);
-  }, j = (D) => {
-    ne(D);
-  }, ae = (D) => {
-    ne(D), n(v.TRENDS_CLICK_LEGEND, { category: f(D) });
-  }, ge = (D) => {
-    n(v.TRENDS_HOVER_LEGEND, { category: f(D) });
-  }, ie = (D) => {
-    n(v.TRENDS_HOVER_AREA, { category: D });
+  }, B = () => {
+    o(w.TRENDS_CLICK_FILTER);
+  }, ue = (D) => {
+    ee(D);
+  }, se = (D) => {
+    ee(D), o(w.TRENDS_CLICK_LEGEND, { category: p(D) });
+  }, le = (D) => {
+    o(w.TRENDS_HOVER_LEGEND, { category: p(D) });
   }, ce = (D) => {
-    n(v.TRENDS_HOVER_POINT, { category: D });
+    o(w.TRENDS_HOVER_AREA, { category: D });
+  }, me = (D) => {
+    o(w.TRENDS_HOVER_POINT, { category: D });
   };
-  return !I || !N ? /* @__PURE__ */ e(Le, {}) : /* @__PURE__ */ C(
-    rt,
+  return !M || !K ? /* @__PURE__ */ e(Le, {}) : /* @__PURE__ */ C(
+    ut,
     {
-      calendarActions: { onRangeChanged: Y },
-      dateRange: b,
+      calendarActions: { onRangeChanged: de },
+      dateRange: x,
       dateRangeVariant: "timeframebuttons",
-      onAccountsFilterClick: he,
-      onBackClick: o,
+      onAccountsFilterClick: B,
+      onBackClick: t,
+      onMenuClick: n,
       sx: s,
-      title: H.title,
+      title: v.title,
       children: [
         /* @__PURE__ */ C(
-          x,
+          S,
           {
             sx: {
               // eslint-disable-next-line no-nested-ternary
-              px: t ? 48 : r ? 24 : 12
+              px: r ? 48 : c ? 24 : 12
             },
             children: [
               /* @__PURE__ */ C(
-                x,
+                S,
                 {
                   flexDirection: "row",
                   justifyContent: "space-between",
-                  sx: { pb: i ? 12 : 24, pt: i ? 24 : 48 },
+                  sx: { pb: a ? 12 : 24, pt: a ? 24 : 48 },
                   children: [
                     /* @__PURE__ */ e(
-                      ut,
+                      ft,
                       {
                         selectedCategoryGuid: O,
-                        selectedDateRange: b
+                        selectedDateRange: x
                       }
                     ),
-                    /* @__PURE__ */ e(dt, { onTabChange: re, selectedTab: E })
+                    /* @__PURE__ */ e(pt, { onTabChange: U, selectedTab: P })
                   ]
                 }
               ),
-              /* @__PURE__ */ C(x, { alignItems: "center", flexDirection: "row", width: "100%", children: [
-                /* @__PURE__ */ e(A, { flexGrow: 1, children: O && /* @__PURE__ */ C(be, { onClick: () => ne(""), sx: { p: 0, pr: 5 }, children: [
-                  /* @__PURE__ */ e(Te, { name: "arrow_back" }),
-                  H.all_categories
+              /* @__PURE__ */ C(S, { alignItems: "center", flexDirection: "row", width: "100%", children: [
+                /* @__PURE__ */ e(H, { flexGrow: 1, children: O && /* @__PURE__ */ C(Te, { onClick: () => ee(""), sx: { p: 0, pr: 5 }, children: [
+                  /* @__PURE__ */ e(He, { name: "arrow_back" }),
+                  v.all_categories
                 ] }) }),
-                /* @__PURE__ */ e(be, { onClick: () => K(!0), sx: { px: 5 }, children: `${H.view_transactions} (${w.length})` })
+                /* @__PURE__ */ e(Te, { onClick: () => J(!0), sx: { px: 5 }, children: `${v.view_transactions} (${N.length})` })
               ] }),
-              /* @__PURE__ */ C(A, { children: [
-                E === "Chart" && /* @__PURE__ */ e(
-                  go,
+              /* @__PURE__ */ C(H, { children: [
+                P === "Chart" && /* @__PURE__ */ e(
+                  So,
                   {
-                    availableHeight: ue,
-                    onClickLegend: ae,
-                    onHoverArea: ie,
-                    onHoverLegend: ge,
-                    onHoverPoint: ce,
-                    stackedDatasets: F.stackedDatasets,
-                    unstackedDatasets: F.unstackedDatasets
+                    availableHeight: j,
+                    onClickLegend: se,
+                    onHoverArea: ce,
+                    onHoverLegend: le,
+                    onHoverPoint: me,
+                    stackedDatasets: ne.stackedDatasets,
+                    unstackedDatasets: ne.unstackedDatasets
                   }
                 ),
-                E === "Table" && /* @__PURE__ */ e(
-                  ht,
+                P === "Table" && /* @__PURE__ */ e(
+                  yt,
                   {
-                    onClickRow: j,
+                    onClickRow: ue,
                     selectedCategory: O,
-                    selectedDateRange: b
+                    selectedDateRange: x
                   }
                 )
               ] })
@@ -797,27 +887,27 @@ const lt = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
           }
         ),
         /* @__PURE__ */ e(
-          bo,
+          Ao,
           {
             categoryGuid: O,
-            dateRange: b,
-            isOpen: V,
-            onClose: () => K(!1)
+            dateRange: x,
+            isOpen: Y,
+            onClose: () => J(!1)
           }
         )
       ]
     }
   );
-}, $n = R(So), xo = () => {
-  const { monthlyCategoryTotals: o } = J(), { trends: s } = k(), n = le(), { availableHeight: t = 300 } = qe(), r = u.useMemo(() => Wt(o), [o]);
+}, rs = A(Ro), ko = () => {
+  const { monthlyCategoryTotals: t } = q(), { trends: n } = R(), s = Z(), { availableHeight: o = 300 } = st(), r = g.useMemo(() => zt(t), [t]);
   return /* @__PURE__ */ e(
-    Oe,
+    Ve,
     {
       baseline: "min",
-      colors: [n.palette.primary.main],
+      colors: [s.palette.primary.main],
       datasets: [r],
-      height: t,
-      labels: [s.spending_label],
+      height: o,
+      labels: [n.spending_label],
       showArea: !0,
       showAverage: !0,
       showLegend: !0,
@@ -826,41 +916,41 @@ const lt = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
       valueFormatterString: "0,0"
     }
   );
-}, wo = R(xo), vo = ({ onPrimaryCtaClick: o, sx: s }) => {
-  const { isAccountDataLoaded: n, loadAccountData: t } = De(), { loadMonthlyCategoryTotals: r, monthlyTotalsLoaded: i } = J(), { isInitialized: d } = We(), { trends: h } = k(), { selectedAccounts: c } = ye();
-  return u.useEffect(() => {
-    n || t().finally();
+}, Ho = A(ko), No = ({ onPrimaryCtaClick: t, sx: n }) => {
+  const { isAccountDataLoaded: s, loadAccountData: o } = De(), { loadMonthlyCategoryTotals: r, monthlyTotalsLoaded: c } = q(), { isInitialized: a } = Be(), { trends: d } = R(), { selectedAccounts: u } = fe();
+  return g.useEffect(() => {
+    s || o().finally();
   }, []), Ie({
     widgetName: "TrendsMiniWidget",
-    isLoaded: i
-  }), u.useEffect(() => {
-    d && n && r(c).finally();
-  }, [n, d, c]), !n || !d || !i ? /* @__PURE__ */ e(Le, {}) : /* @__PURE__ */ e(
-    Ft,
+    isLoaded: c
+  }), g.useEffect(() => {
+    a && s && r(u).finally();
+  }, [s, a, u]), !s || !a || !c ? /* @__PURE__ */ e(Le, {}) : /* @__PURE__ */ e(
+    Qt,
     {
       contentStyles: { height: "calc(100% - 72px)", minHeight: 300, ":last-child": { pb: 0 } },
-      onPrimaryCtaClick: o,
-      primaryCtaLabel: h.primary_cta,
-      subTitle: h.sub_title,
-      sx: { height: "100%", ...s },
-      title: h.mini_title,
-      children: /* @__PURE__ */ e(wo, {})
+      onPrimaryCtaClick: t,
+      primaryCtaLabel: d.primary_cta,
+      subTitle: d.sub_title,
+      sx: { height: "100%", ...n },
+      title: d.mini_title,
+      children: /* @__PURE__ */ e(Ho, {})
     }
   );
-}, Kn = R(vo), Do = 70, Ye = ({
-  title: o,
-  totalAmount: s,
-  transactionType: n,
-  percentage: t,
+}, as = A(No), Wo = 70, qe = ({
+  title: t,
+  totalAmount: n,
+  transactionType: s,
+  percentage: o,
   secondaryLabel: r,
-  shouldDisplayPercentage: i
+  shouldDisplayPercentage: c
 }) => {
-  const { availableWidth: d } = qe(), h = u.useRef(null), c = u.useRef(null), l = Mt(Number(Math.abs(t)), {
+  const { availableWidth: a } = st(), d = g.useRef(null), u = g.useRef(null), i = Wt(Number(Math.abs(o)), {
     style: "percent",
     minimumIntegerDigits: 1
-  }), p = d === 288 && oe(s, "0,0.00").length > 10 ? oe(s, "0,0") : oe(s, "0,0.00"), m = n === "spending" ? t > 0 : t >= 0, _ = n === "spending" ? "error.main" : "success.main", f = n === "spending" ? "success.main" : "text.secondary", g = h?.current, y = c?.current, w = g && y ? g.scrollWidth > y.clientWidth - Do : !1;
+  }), f = a === 288 && re(n, "0,0.00").length > 10 ? re(n, "0,0") : re(n, "0,0.00"), m = s === "spending" ? o > 0 : o >= 0, _ = s === "spending" ? "error.main" : "success.main", h = s === "spending" ? "success.main" : "text.secondary", p = d?.current, y = u?.current, T = p && y ? p.scrollWidth > y.clientWidth - Wo : !1;
   return /* @__PURE__ */ C(
-    x,
+    S,
     {
       sx: {
         border: 1,
@@ -873,7 +963,7 @@ const lt = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
       },
       children: [
         /* @__PURE__ */ C(
-          x,
+          S,
           {
             sx: {
               alignItems: "center",
@@ -881,18 +971,18 @@ const lt = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
               justifyContent: "space-between"
             },
             children: [
-              /* @__PURE__ */ e(fe, { color: "text.secondary", variant: "caption", children: o }),
-              i && /* @__PURE__ */ C(x, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
-                m ? /* @__PURE__ */ e(zt, { size: 20, sx: { color: _ } }) : /* @__PURE__ */ e($t, { size: 20, sx: { color: f } }),
+              /* @__PURE__ */ e(pe, { color: "text.secondary", variant: "caption", children: t }),
+              c && /* @__PURE__ */ C(S, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
+                m ? /* @__PURE__ */ e(Jt, { size: 20, sx: { color: _ } }) : /* @__PURE__ */ e(eo, { size: 20, sx: { color: h } }),
                 /* @__PURE__ */ e(
-                  fe,
+                  pe,
                   {
                     sx: {
-                      color: m ? _ : f,
+                      color: m ? _ : h,
                       fontWeight: 600
                     },
                     variant: "body2",
-                    children: l
+                    children: i
                   }
                 )
               ] })
@@ -900,9 +990,9 @@ const lt = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
           }
         ),
         /* @__PURE__ */ C(
-          x,
+          S,
           {
-            ref: c,
+            ref: u,
             sx: {
               alignItems: "center",
               flexDirection: "row",
@@ -910,17 +1000,17 @@ const lt = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
             },
             children: [
               /* @__PURE__ */ e(
-                A,
+                H,
                 {
-                  ref: h,
+                  ref: d,
                   sx: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
-                  children: /* @__PURE__ */ e(Ue, { children: p })
+                  children: /* @__PURE__ */ e(Ge, { children: f })
                 }
               ),
-              i && d >= 450 && !w && /* @__PURE__ */ e(
-                fe,
+              c && a >= 450 && !T && /* @__PURE__ */ e(
+                pe,
                 {
-                  color: m ? _ : f,
+                  color: m ? _ : h,
                   variant: "caption",
                   children: r
                 }
@@ -931,55 +1021,55 @@ const lt = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
       ]
     }
   );
-}, Lo = R(() => {
-  const { trends: o } = k();
-  return /* @__PURE__ */ C(x, { sx: { alignItems: "start", flexDirection: "row", gap: 12 }, children: [
-    /* @__PURE__ */ e(Kt, { size: 32 }),
-    /* @__PURE__ */ C(x, { children: [
-      /* @__PURE__ */ e(fe, { fontWeight: 600, variant: "body1", children: o.zero_state_content_header }),
-      /* @__PURE__ */ e(fe, { color: "text.secondary", variant: "subtitle2", children: o.zero_state_content_description })
+}, Oo = A(() => {
+  const { trends: t } = R();
+  return /* @__PURE__ */ C(S, { sx: { alignItems: "start", flexDirection: "row", gap: 12 }, children: [
+    /* @__PURE__ */ e(to, { size: 32 }),
+    /* @__PURE__ */ C(S, { children: [
+      /* @__PURE__ */ e(pe, { fontWeight: 600, variant: "body1", children: t.zero_state_content_header }),
+      /* @__PURE__ */ e(pe, { color: "text.secondary", variant: "subtitle2", children: t.zero_state_content_description })
     ] })
   ] });
-}), Yn = R(({ onCtaClick: o }) => {
-  const { isAccountDataLoaded: s, loadAccountData: n, visibleAccounts: t } = De();
-  u.useEffect(() => {
-    s || n().finally();
+}), is = A(({ onCtaClick: t }) => {
+  const { isAccountDataLoaded: n, loadAccountData: s, visibleAccounts: o } = De();
+  g.useEffect(() => {
+    n || s().finally();
   }, []);
-  const { onEvent: r } = z(), { monthlyCategoryTotals: i, loadMonthlyCategoryTotals: d, monthlyTotalsLoaded: h } = J(), c = {
-    start: Pt(/* @__PURE__ */ new Date(), 1),
+  const { onEvent: r } = $(), { monthlyCategoryTotals: c, loadMonthlyCategoryTotals: a, monthlyTotalsLoaded: d } = q(), u = {
+    start: qt(/* @__PURE__ */ new Date(), 1),
     end: /* @__PURE__ */ new Date()
-  }, { trends: l } = k(), { selectedAccounts: p, isInitialized: m } = ye();
+  }, { trends: i } = R(), { selectedAccounts: f, isInitialized: m } = fe();
   Ie({
     widgetName: "TrendsMicroWidget",
-    isLoaded: h
-  }), u.useEffect(() => {
-    m && d(p, c.start).then(() => {
-      r(v.TRENDS_LOAD_WIDGET, {
-        state: t?.length ? "default" : "zeroState"
+    isLoaded: d
+  }), g.useEffect(() => {
+    m && a(f, u.start).then(() => {
+      r(w.TRENDS_LOAD_WIDGET, {
+        state: o?.length ? "default" : "zeroState"
       });
     });
-  }, [m, p]);
-  const { spendingData: _, incomeData: f } = u.useMemo(
+  }, [m, f]);
+  const { spendingData: _, incomeData: h } = g.useMemo(
     () => ({
-      spendingData: nt(i, c),
-      incomeData: ot(i, c)
+      spendingData: it(c, u),
+      incomeData: at(c, u)
     }),
-    [i, c]
-  ), [g, y] = _, [w, b] = f, M = Pe(y.y, g.y), I = Pe(b.y, w.y), S = m && !t?.length, H = () => {
+    [c, u]
+  ), [p, y] = _, [T, N] = h, x = Ye(y.y, p.y), L = Ye(N.y, T.y), M = m && !o?.length, E = () => {
     r(
-      S ? v.TRENDS_CLICK_GET_STARTED : v.TRENDS_CLICK_VIEW_MORE
-    ), o();
+      M ? w.TRENDS_CLICK_GET_STARTED : w.TRENDS_CLICK_VIEW_MORE
+    ), t();
   };
-  return !h || !m ? /* @__PURE__ */ e(Le, {}) : /* @__PURE__ */ e(
-    Ut,
+  return !d || !m ? /* @__PURE__ */ e(Le, {}) : /* @__PURE__ */ e(
+    ao,
     {
       className: "mx-trends-microwidget",
-      ctaLabel: l.micro_primary_cta_label,
-      onCTAClick: H,
-      subHeader: S ? void 0 : l.micro_subheader,
-      title: l.title,
-      children: S ? /* @__PURE__ */ e(Lo, {}) : /* @__PURE__ */ C(
-        x,
+      ctaLabel: i.micro_primary_cta_label,
+      onCTAClick: E,
+      subHeader: M ? void 0 : i.micro_subheader,
+      title: i.title,
+      children: M ? /* @__PURE__ */ e(Oo, {}) : /* @__PURE__ */ C(
+        S,
         {
           sx: {
             alignItems: "stretch",
@@ -988,24 +1078,24 @@ const lt = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
           },
           children: [
             /* @__PURE__ */ e(
-              Ye,
+              qe,
               {
-                percentage: M,
-                secondaryLabel: l.micro_secondary_label,
-                shouldDisplayPercentage: y.y !== 0 && g.y !== 0,
-                title: l.spending_label,
+                percentage: x,
+                secondaryLabel: i.micro_secondary_label,
+                shouldDisplayPercentage: y.y !== 0 && p.y !== 0,
+                title: i.spending_label,
                 totalAmount: y.y,
                 transactionType: "spending"
               }
             ),
             /* @__PURE__ */ e(
-              Ye,
+              qe,
               {
-                percentage: I,
-                secondaryLabel: l.micro_secondary_label,
-                shouldDisplayPercentage: b.y !== 0 && w.y !== 0,
-                title: l.income_label,
-                totalAmount: b.y,
+                percentage: L,
+                secondaryLabel: i.micro_secondary_label,
+                shouldDisplayPercentage: N.y !== 0 && T.y !== 0,
+                title: i.income_label,
+                totalAmount: N.y,
                 transactionType: "income"
               }
             )
@@ -1014,21 +1104,21 @@ const lt = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
       )
     }
   );
-}), Io = R(
-  ({ isExpanded: o, onClick: s }) => {
-    const n = ct();
-    return /* @__PURE__ */ e(Qt, { sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(qt, { onClick: s, sx: { justifyContent: "center" }, children: /* @__PURE__ */ C(
-      x,
+}), Go = A(
+  ({ isExpanded: t, onClick: n }) => {
+    const s = Z();
+    return /* @__PURE__ */ e(mt, { children: /* @__PURE__ */ e(lo, { onClick: n, sx: { justifyContent: "center" }, children: /* @__PURE__ */ C(
+      S,
       {
-        sx: { color: n.palette.primary.main, flexDirection: "row", alignItems: "center" },
+        sx: { color: s.palette.primary.main, flexDirection: "row", alignItems: "center" },
         children: [
-          /* @__PURE__ */ e(eo, { children: /* @__PURE__ */ e(X, { bold: !0, variant: "body2", children: o ? "View less" : "View more" }) }),
-          /* @__PURE__ */ e(Jt, { sx: { color: n.palette.primary.main }, children: o ? /* @__PURE__ */ e(Yt, {}) : /* @__PURE__ */ e(
-            jt,
+          /* @__PURE__ */ e(ht, { children: /* @__PURE__ */ e(F, { bold: !0, variant: "body2", children: t ? "View less" : "View more" }) }),
+          /* @__PURE__ */ e(co, { sx: { color: s.palette.primary.main }, children: t ? /* @__PURE__ */ e(oo, {}) : /* @__PURE__ */ e(
+            no,
             {
               sx: {
                 transition: "transform 0.3s ease-in-out",
-                transform: o ? "rotate(180deg)" : "rotate(0deg)"
+                transform: t ? "rotate(180deg)" : "rotate(0deg)"
               }
             }
           ) })
@@ -1036,128 +1126,139 @@ const lt = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
       }
     ) }) });
   }
-), je = R(
+), Je = A(
   ({
-    totalAmount: o,
-    guid: s,
-    name: n,
-    transactions: t,
+    totalAmount: t,
+    guid: n,
+    name: s,
+    transactions: o,
     onClick: r,
-    isLastItem: i = !1,
-    showDivider: d = !0
+    isLastItem: c = !1,
+    showDivider: a = !0
   }) => {
-    const { trends: h } = k(), { onEvent: c } = z(), l = `${t.length} ${t.length === 1 ? h.transaction : h.transactions}`, p = () => {
-      r?.(), c(v.TRENDS_CLICK_LIST_ITEM, {
-        ...G,
-        listItem: n
+    const { trends: d } = R(), { onEvent: u } = $(), i = Z(), f = `${o.length} ${o.length === 1 ? d.transaction : d.transactions}`, m = () => {
+      r?.(), u(w.TRENDS_CLICK_LIST_ITEM, {
+        ...W,
+        listItem: s
       });
     };
-    return /* @__PURE__ */ C(u.Fragment, { children: [
+    return /* @__PURE__ */ C(g.Fragment, { children: [
       /* @__PURE__ */ e(
-        tt,
+        uo,
         {
-          leftIcon: s ? /* @__PURE__ */ e(we, { categoryGuid: s }) : void 0,
-          onClick: p,
-          rightContent: oe(Math.abs(o), "0,0.00"),
-          rightIcon: r ? /* @__PURE__ */ e(xt, {}) : void 0,
-          subtitle: l,
-          title: n
+          leftIcon: n ? /* @__PURE__ */ e(
+            ve,
+            {
+              categoryGuid: n,
+              sx: {
+                bgcolor: Mt(Oe(n, i), 0.15),
+                border: `1px solid ${Oe(n, i)}`,
+                color: "text.primary"
+              }
+            }
+          ) : void 0,
+          onClick: m,
+          rightContent: re(Math.abs(t), "0,0.00"),
+          rightIcon: r ? /* @__PURE__ */ e(so, {}) : void 0,
+          subtitle: f,
+          title: s
         }
       ),
-      d && /* @__PURE__ */ e(He, { sx: { ml: i ? 24 : 68 } })
-    ] }, s);
+      a && /* @__PURE__ */ e(Ne, { component: "li", sx: { ml: c ? 24 : 68 } })
+    ] }, n);
   }
-), Eo = R(
-  ({ availableHeight: o = 0, onCategoryClick: s }) => {
-    const { collapsedCategories: n, visibleCategories: t, setVisibleListLength: r } = Ce(), { isLargeDesktop: i, isDesktop: d } = q(), { trends: h } = k(), { onEvent: c } = z(), [l, p] = u.useState(!1), m = d || i;
-    u.useEffect(() => {
-      const g = Math.floor(o / 64) - 1, y = t.length + n.length;
-      g !== t.length && (r(m ? Math.max(g, 5) : 5), p(g >= y));
-    }, [o]);
+), Bo = A(
+  ({ availableHeight: t = 0, onCategoryClick: n }) => {
+    const { collapsedCategories: s, visibleCategories: o, setVisibleListLength: r } = ye(), { isLargeDesktop: c, isDesktop: a } = Q(), { trends: d } = R(), { onEvent: u } = $(), [i, f] = g.useState(!1), m = a || c;
+    g.useEffect(() => {
+      const p = Math.floor(t / 64) - 1, y = o.length + s.length;
+      p !== o.length && (r(m ? Math.max(p, 5) : 5), f(p >= y));
+    }, [t]);
     const _ = () => {
-      p(!l), c(v.TRENDS_CLICK_VIEW_MORE, {
-        ...G
+      f(!i), u(w.TRENDS_CLICK_VIEW_MORE, {
+        ...W
       });
-    }, f = t.length + (l ? n.length : 0);
-    return /* @__PURE__ */ e(x, { sx: { bgColor: "background.paper", width: "100%" }, children: /* @__PURE__ */ C(Zt, { children: [
-      /* @__PURE__ */ e(x, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(Ue, { children: h.categories }) }),
-      t.map((g, y) => /* @__PURE__ */ e(
-        je,
-        {
-          ...g,
-          isLastItem: y === f - 1,
-          onClick: g.transactions.length > 0 ? () => s(g) : void 0,
-          showDivider: !0
-        },
-        g.guid
-      )),
-      /* @__PURE__ */ e(
-        Xt,
-        {
-          in: l,
-          sx: { "&.MuiCollapse-root .MuiListItemButton-root": { paddingLeft: 24 } },
-          children: n.map((g, y) => {
-            const w = t.length + y;
-            return /* @__PURE__ */ e(
-              je,
-              {
-                ...g,
-                isLastItem: w === f - 1,
-                onClick: g.transactions.length > 0 ? () => s(g) : void 0,
-                showDivider: !0
-              },
-              g.guid
-            );
-          })
-        }
-      ),
-      n.length > 0 && /* @__PURE__ */ e(Io, { isExpanded: l, onClick: _ })
-    ] }) });
+    }, h = o.length + (i ? s.length : 0);
+    return /* @__PURE__ */ C(S, { sx: { width: "100%" }, children: [
+      /* @__PURE__ */ e(S, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(Ge, { children: d.categories }) }),
+      /* @__PURE__ */ C(We, { children: [
+        o.map((p, y) => /* @__PURE__ */ e(
+          Je,
+          {
+            ...p,
+            isLastItem: y === h - 1,
+            onClick: p.transactions.length > 0 ? () => n(p) : void 0,
+            showDivider: !0
+          },
+          p.guid
+        )),
+        /* @__PURE__ */ e(
+          io,
+          {
+            component: "li",
+            in: i,
+            sx: { "&.MuiCollapse-root .MuiListItemButton-root": { paddingLeft: 24 } },
+            children: /* @__PURE__ */ e(We, { children: s.map((p, y) => {
+              const T = o.length + y;
+              return /* @__PURE__ */ e(
+                Je,
+                {
+                  ...p,
+                  isLastItem: T === h - 1,
+                  onClick: p.transactions.length > 0 ? () => n(p) : void 0,
+                  showDivider: !0
+                },
+                p.guid
+              );
+            }) })
+          }
+        ),
+        s.length > 0 && /* @__PURE__ */ e(Go, { isExpanded: i, onClick: _ })
+      ] })
+    ] });
   }
-), Mo = ({ beats: o, onInsightCardClick: s }) => {
-  const { onEvent: n } = z(), { isMobile: t, isDesktop: r, isLargeDesktop: i } = q(), { beatStore: d, endpoint: h, sessionToken: c } = We(), l = r || i, p = l || t ? 1 : 2, m = () => null, _ = (M) => {
-    s?.(M), n(v.TRENDS_CLICK_INSIGHT, G);
-  }, f = l ? 200 : 170, g = l ? 170 : 124, y = l ? 56 : 0, w = o.length > 0 ? f + y : g, b = l && o.length > 0 ? f : void 0;
-  return /* @__PURE__ */ e(to, { sx: { height: w }, children: /* @__PURE__ */ e(
-    Vt,
+), Po = ({ beats: t, onInsightCardClick: n }) => {
+  const { onEvent: s } = $(), { isMobile: o, isDesktop: r, isLargeDesktop: c } = Q(), { beatStore: a, endpoint: d, sessionToken: u } = Be(), i = r || c, f = i || o ? 1 : 2, m = () => null, _ = (T) => {
+    n?.(T), s(w.TRENDS_CLICK_INSIGHT, W);
+  }, h = i ? 200 : 170, p = i ? 170 : 124, y = t.length > 0 ? h : p;
+  return /* @__PURE__ */ e(mo, { sx: { height: y }, children: /* @__PURE__ */ e(
+    Kt,
     {
-      areBeatsLoading: d.isLoading,
-      beats: o,
-      endpoint: h,
-      heightOverrides: b,
+      areBeatsLoading: a.isLoading,
+      beats: t,
+      cardStyle: "border",
+      endpoint: d,
+      headerSx: { p: 0 },
       logOutUser: m,
       onCardClick: _,
-      showBorder: !0,
-      showCTAColocatedWithText: !1,
       showCarouselControls: !0,
-      showHeader: l,
+      showHeader: i,
       showIcon: !0,
       showWithMargin: !1,
-      token: c,
+      token: u,
       userHasFullInsightFeedBeats: !1,
-      variant: "outlined",
-      visibleCardsCount: p
+      visibleCardsCount: f
     }
   ) });
-}, Ao = R(Mo), Ro = R(({ chartLabel: o, chartColor: s }) => {
-  const { onEvent: n } = z(), {
-    categoryDetailsChartData: { monthlyAmounts: t, tooltipLabels: r }
-  } = Ce();
-  return /* @__PURE__ */ e(x, { sx: { pt: 12, width: "100%" }, children: /* @__PURE__ */ e(
-    Oe,
+}, Vo = A(Po), zo = A(({ chartLabel: t, chartColor: n }) => {
+  const { onEvent: s } = $(), {
+    categoryDetailsChartData: { monthlyAmounts: o, tooltipLabels: r }
+  } = ye();
+  return /* @__PURE__ */ e(S, { sx: { pt: 12, width: "100%" }, children: /* @__PURE__ */ e(
+    Ve,
     {
       baseline: "min",
-      colors: [s],
+      colors: [n],
       curveType: "bump",
       customTooltipLabels: r,
-      datasets: [t],
+      datasets: [o],
       height: 265,
-      labels: [o],
+      labels: [t],
       markStyles: () => ({
-        stroke: s
+        stroke: n
       }),
       onItemClick: () => {
-        n(v.TRENDS_CLICK_CHART, G);
+        s(w.TRENDS_CLICK_CHART, W);
       },
       showArea: !0,
       showAverage: !0,
@@ -1172,100 +1273,92 @@ const lt = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
       valueFormatterString: "0,0"
     }
   ) });
-}), ko = R(({ onClose: o }) => {
-  const s = ct(), { is_mobile_webview: n } = Je(), { isDesktop: t, isSmallTablet: r, isTablet: i } = q(), { onEvent: d } = z(), { common: h, trends: c } = k(), { selectedCategoryData: l, selectedDateRangeMonthRange: p } = Ce(), { sortedTransactions: m } = ve(), [_, f] = u.useState(null);
-  if (!l)
+}), Fo = A(() => {
+  const t = Z(), { is_mobile_webview: n } = rt(), { isDesktop: s, isSmallTablet: o, isTablet: r } = Q(), { common: c, trends: a } = R(), { selectedCategoryData: d, selectedDateRangeMonthRange: u } = ye(), { sortedTransactions: i } = we(), [f, m] = g.useState(null);
+  if (!d)
     return null;
-  const { guid: g, name: y, is_income: w, totalAmount: b } = l, M = w ? c.category_income : c.category_spending, I = no(g, s), S = w ? c.income_label : c.spending_label, H = ` ${l.transactions.length === 1 ? c.transaction : c.transactions} (${l.transactions.length})`, N = u.useMemo(
-    () => m.find((E) => E.guid === _),
-    [_, m]
-  ), $ = m.length > 0 && !n && (t || i && !r), V = (E) => E.category_guid === g || E.top_level_category_guid === g, K = () => {
-    o?.(), d(v.TRENDS_CLICK_BACK, G);
-  };
-  return /* @__PURE__ */ C(
-    Ne,
-    {
-      ariaLabelClose: c.close_category_details,
-      isOpen: !0,
-      onClose: K,
-      shouldShowHeaderShadow: !0,
-      title: M,
-      children: [
-        /* @__PURE__ */ C(x, { sx: { alignItems: "center", height: "100%" }, children: [
-          /* @__PURE__ */ C(oo, { sx: { borderRadius: 0, pb: 4, pt: 16, width: "100%" }, children: [
-            /* @__PURE__ */ e(
-              tt,
-              {
-                leftIcon: /* @__PURE__ */ e(we, { categoryGuid: g }),
-                rightContent: oe(Math.abs(b), "0,0.00"),
-                subtitle: p,
-                title: y
-              }
-            ),
-            /* @__PURE__ */ e(Ro, { chartColor: I, chartLabel: S }),
-            /* @__PURE__ */ C(x, { alignItems: "center", direction: "row", justifyContent: "space-between", sx: { mx: 24 }, children: [
-              /* @__PURE__ */ e(X, { bold: !0, variant: "body1", children: H }),
-              $ && /* @__PURE__ */ e(so, { filter: V })
-            ] })
-          ] }),
-          /* @__PURE__ */ e(
-            it,
-            {
-              bgcolor: "transparent",
-              filter: V,
-              height: "calc(100vh - 475px)",
-              onClick: f
-            }
-          )
-        ] }),
+  const { guid: _, name: h, is_income: p, totalAmount: y } = d, T = Oe(_, t), N = p ? a.income_label : a.spending_label, x = ` ${d.transactions.length === 1 ? a.transaction : a.transactions} (${d.transactions.length})`, L = g.useMemo(
+    () => i.find((v) => v.guid === f),
+    [f, i]
+  ), M = i.length > 0 && !n && (s || r && !o), E = (v) => v.category_guid === _ || v.top_level_category_guid === _;
+  return /* @__PURE__ */ C(S, { sx: { alignItems: "center", height: "100%" }, children: [
+    /* @__PURE__ */ C(S, { sx: { borderRadius: 0, pb: 4, pt: 16, px: 12, width: "100%" }, children: [
+      /* @__PURE__ */ e(We, { sx: { px: 12 }, children: /* @__PURE__ */ C(mt, { children: [
+        /* @__PURE__ */ e(ho, { children: /* @__PURE__ */ e(ve, { categoryGuid: _ }) }),
         /* @__PURE__ */ e(
-          Ne,
+          ht,
           {
-            ariaLabelClose: h.close_aria,
-            isOpen: !!N,
-            onClose: () => f(""),
-            title: c.transaction,
-            children: N && /* @__PURE__ */ e(at, { transaction: N })
+            primary: h,
+            secondary: u,
+            slotProps: {
+              primary: { component: "div", variant: "h3", fontSize: 18, fontWeight: 700 },
+              secondary: { component: "div", variant: "body2", fontSize: 13 }
+            }
           }
-        )
-      ]
-    }
-  );
-}), Ho = (o, s) => {
-  const n = ot(o, s), t = nt(o, s);
-  return [n, t].filter((r) => r.length > 0);
-}, No = (o, s) => {
-  const [n, t] = o, r = n, i = t ?? n, d = [];
+        ),
+        /* @__PURE__ */ e(F, { component: "div", variant: "h3", children: re(Math.abs(y), "0,0.00") })
+      ] }) }),
+      /* @__PURE__ */ e(zo, { chartColor: T, chartLabel: N }),
+      /* @__PURE__ */ C(S, { alignItems: "center", direction: "row", justifyContent: "space-between", sx: { mx: 12 }, children: [
+        /* @__PURE__ */ e(F, { bold: !0, variant: "body1", children: x }),
+        M && /* @__PURE__ */ e(go, { filter: E })
+      ] })
+    ] }),
+    /* @__PURE__ */ e(
+      ct,
+      {
+        bgcolor: "transparent",
+        filter: E,
+        height: "calc(100vh - 475px)",
+        onClick: m
+      }
+    ),
+    /* @__PURE__ */ e(
+      Pe,
+      {
+        ariaLabelClose: c.close_aria,
+        isOpen: !!L,
+        onClose: () => m(""),
+        title: a.transaction,
+        children: L && /* @__PURE__ */ e(dt, { transaction: L })
+      }
+    )
+  ] });
+}), $o = (t, n) => {
+  const s = at(t, n), o = it(t, n);
+  return [s, o].filter((r) => r.length > 0);
+}, Ko = (t, n) => {
+  const [s, o] = t, r = s, c = o ?? s, a = [];
   if (r) {
-    const h = r.reduce((c, l) => c + l.y, 0);
-    d.push({ label: s.income_label, amount: h });
+    const d = r.reduce((u, i) => u + i.y, 0);
+    a.push({ label: n.income_label, amount: d });
   }
-  if (i) {
-    const h = i.reduce((c, l) => c + l.y, 0);
-    d.push({ label: s.spending_label, amount: h });
+  if (c) {
+    const d = c.reduce((u, i) => u + i.y, 0);
+    a.push({ label: n.spending_label, amount: d });
   }
-  return d;
-}, Wo = ({
-  availableHeight: o = 0,
-  minHeight: s = 500,
-  selectedDateRange: n,
-  totals: t
+  return a;
+}, Yo = ({
+  availableHeight: t = 0,
+  minHeight: n = 500,
+  selectedDateRange: s,
+  totals: o
 }) => {
-  const r = le(), { onEvent: i } = z(), { trends: d } = k(), { isSmallMobile: h, isMobile: c, isSmallTablet: l, isTablet: p } = q(), m = [r.palette.chart?.chart1, r.palette.chart?.chart2], _ = Ho(t, n), f = No(_, d), [g, y] = u.useState(0), w = 458, b = 195, M = 56, I = c || h ? b : l || p ? w : g;
-  return u.useEffect(() => {
-    const H = Math.max(o - M, s);
-    y(H);
-  }, [o]), /* @__PURE__ */ e(
-    Oe,
+  const r = Z(), { onEvent: c } = $(), { trends: a } = R(), { isSmallMobile: d, isMobile: u, isSmallTablet: i, isTablet: f } = Q(), m = [r.palette.chart?.chart1, r.palette.chart?.chart2], _ = $o(o, s), h = Ko(_, a), [p, y] = g.useState(0), T = 458, N = 195, x = 56, L = u || d ? N : i || f ? T : p;
+  return g.useEffect(() => {
+    const E = Math.max(t - x, n);
+    y(E);
+  }, [t]), /* @__PURE__ */ e(
+    Ve,
     {
       baseline: "min",
       colors: m,
       curveType: "bump",
       datasets: _,
-      height: I,
-      labels: f,
+      height: L,
+      labels: h,
       onItemClick: () => {
-        i(v.TRENDS_CLICK_CHART, G);
+        c(w.TRENDS_CLICK_CHART, W);
       },
       showArea: !0,
       showAxisHighlight: !0,
@@ -1278,7 +1371,7 @@ const lt = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
       valueFormatterString: "0.0a"
     }
   );
-}, Oo = R(Wo), Go = [
+}, jo = A(Yo), Uo = [
   "BillAmountNotStandard",
   "CategorySpendingV2",
   "CostOfLivingToIncome",
@@ -1312,189 +1405,209 @@ const lt = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
   "WeeklyNewMerchantsV2",
   "WeeklyNoSpendDays",
   "WeeklySmallPurchasesSummary"
-], Bo = ({ onBackClick: o, onInsightCardClick: s, sx: n }) => {
-  const { onEvent: t } = z(), { config: r } = Je(), { isDesktop: i, isLargeDesktop: d, isMobile: h } = q(), { isAccountDataLoaded: c, loadAccountData: l, visibleAccounts: p } = De(), {
-    categoriesLoaded: m,
-    loadCategories: _,
-    loadDateRangeCategoryTotals: f,
-    loadMonthlyCategoryTotals: g,
-    monthlyCategoryTotals: y,
-    monthlyTotalsLoaded: w
-  } = J(), { isTransactionDataLoaded: b, loadTransactionData: M, setFilter: I } = ve(), { selectedDateRange: S, setSelectedCategoryData: H, setSelectedDateRange: N } = Ce(), { isInitialized: $, selectedAccounts: V, selectedAccountGuids: K } = ye(), { trends: E, connect: te } = k(), { beatStore: O } = We(), se = ro() && r.show_insights_widget_in_master, Z = i || d, [de, ue] = u.useState(!1), [F, re] = u.useState(!1), [Y, he] = u.useState("Chart"), [j, ae] = u.useState(""), [ge, ie] = u.useState(!1), [ce, D] = u.useState(window.innerHeight), P = Z ? 56 : 0, a = ce - 208, T = ce - (se ? 550 + P : 266), [L, U] = u.useState(!1), Ee = r.show_connections_widget_in_master ? "buttons" : "no-buttons";
+], Xo = (t, n, s) => ({
+  description: n ? t.empty_state_sub_text : t.empty_state_sub_text_no_aggregation,
+  header: n ? t.zero_state_content_header : t.zero_state_content_header_no_aggregation,
+  onClickHandler: n ? s : void 0,
+  primaryButton: n ? t.empty_state_primary : void 0
+}), Zo = ({
+  onBackClick: t,
+  onMenuClick: n,
+  onInsightCardClick: s,
+  sx: o
+}) => {
+  const { onEvent: r } = $(), { config: c } = rt(), { isDesktop: a, isLargeDesktop: d, isMobile: u } = Q(), { isAccountDataLoaded: i, loadAccountData: f, visibleAccounts: m } = De(), {
+    categoriesLoaded: _,
+    loadCategories: h,
+    loadDateRangeCategoryTotals: p,
+    loadMonthlyCategoryTotals: y,
+    monthlyCategoryTotals: T,
+    monthlyTotalsLoaded: N
+  } = q(), { isTransactionDataLoaded: x, loadTransactionData: L, setFilter: M } = we(), { selectedCategoryData: E, selectedDateRange: v, setSelectedCategoryData: K, setSelectedDateRange: ae } = ye(), { isInitialized: Y, selectedAccounts: J, selectedAccountGuids: P } = fe(), { trends: V, connect: O } = R(), { beatStore: ee } = Be(), ie = po() && c.show_insights_widget_in_master, te = a || d, [j, ne] = g.useState(!1), [U, de] = g.useState(!1), [B, ue] = g.useState("Chart"), [se, le] = g.useState(""), [ce, me] = g.useState(window.innerHeight), D = te ? 56 : 0, l = ce - 208, b = ce - (ie ? 550 + D : 266), [I, z] = g.useState(!1), Ee = c.show_connections_widget_in_master;
   Ie({
     widgetName: "TrendsWidget",
-    isLoaded: de
+    isLoaded: j
   });
-  const _e = u.useMemo(() => F ? O.getFilteredBeats({ templates: Go }) : [], [F]);
-  u.useEffect(() => {
-    const W = () => D(window.innerHeight);
-    return window.addEventListener("resize", W), c || l().finally(), m || _().finally(), b || M().finally(), () => window.removeEventListener("resize", W);
-  }, []), u.useEffect(() => {
-    $ && (O.loadBeats().finally(() => re(!0)), f(V, S.start, S.end).then(() => {
-      g(
-        V,
-        S.start,
-        S.end
-      );
+  const _e = g.useMemo(() => U ? ee.getFilteredBeats({ templates: Uo }) : [], [U]);
+  g.useEffect(() => {
+    const k = () => me(window.innerHeight);
+    return window.addEventListener("resize", k), i || f().finally(), _ || h().finally(), x || L().finally(), () => window.removeEventListener("resize", k);
+  }, []), g.useEffect(() => {
+    Y && i && (ee.loadBeats().finally(() => de(!0)), p(J, v.start, v.end).then(() => {
+      y(
+        J,
+        v.start,
+        v.end
+      ).finally();
     }).finally(() => {
-      ue(!0), t(v.TRENDS_LOAD_WIDGET, {
-        ...G,
-        time_period: `${Se(S.end, S.start)}M`
+      ne(!0), r(w.TRENDS_LOAD_WIDGET, {
+        ...W,
+        time_period: `${Se(v.end, v.start)}M`
       });
     }));
-  }, [$, V, S]), u.useEffect(() => {
-    if (y.length !== 0) {
-      const W = {
-        accounts: K,
-        dateRange: { start: S.start, end: S.end }
+  }, [Y, i, J, v]), g.useEffect(() => {
+    if (T.length !== 0) {
+      const k = {
+        accounts: P,
+        dateRange: { start: v.start, end: v.end }
       };
-      I({
-        ...W,
-        custom: (ee) => !!y.find(
-          (pe) => pe.top_level_category_guid === ee.top_level_category_guid || pe.category_guid === ee.category_guid
+      M({
+        ...k,
+        custom: (oe) => !!T.find(
+          (ge) => ge.top_level_category_guid === oe.top_level_category_guid || ge.category_guid === oe.category_guid
         )
       });
     }
-  }, [y]);
-  const me = (W) => {
-    H(W), ie(!0);
+  }, [T]);
+  const he = (k) => {
+    K(k);
   }, Me = () => {
-    H(null), ie(!1);
+    K(null), r(w.TRENDS_CLICK_BACK, W);
   }, Ae = () => {
-    U(!0), t(v.TRENDS_CLICK_CONNECT_ACCOUNTS);
-  }, gt = (W, ee) => {
-    he(ee ?? Y), t(v.TRENDS_CLICK_TOGGLE_VIEW, {
-      ...G,
-      toggleView: ee
+    z(!0), r(w.TRENDS_CLICK_CONNECT_ACCOUNTS);
+  }, Ct = (k, oe) => {
+    ue(oe ?? B), r(w.TRENDS_CLICK_TOGGLE_VIEW, {
+      ...W,
+      toggleView: oe
     });
-  }, mt = (W) => {
-    const ee = Xe(W?.[0], 1), pe = W?.[1], Ct = Se(pe, ee);
-    N({ start: ee, end: pe }), t(v.TRENDS_CLICK_TIME_WINDOW, {
-      ...G,
-      time_period: Ct + "M"
+  }, _t = (k) => {
+    const oe = et(k?.[0], 1), ge = k?.[1], xt = Se(ge, oe);
+    ae({ start: oe, end: ge }), r(w.TRENDS_CLICK_TIME_WINDOW, {
+      ...W,
+      time_period: xt + "M"
     });
-  }, pt = (W) => {
-    t(v.TRENDS_CLICK_FILTER, {
-      ...G,
-      filterValue: W
+  }, bt = (k) => {
+    r(w.TRENDS_CLICK_FILTER, {
+      ...W,
+      filterValue: k
     });
-  }, ft = (W) => {
-    ae(W);
-  }, yt = () => {
-    ae(""), t(v.TRENDS_CLICK_ALL_CATEGORIES, G);
+  }, Tt = (k) => {
+    le(k);
+  }, St = () => {
+    le(""), r(w.TRENDS_CLICK_ALL_CATEGORIES, W);
   };
-  if (!$ || !de || !w) return /* @__PURE__ */ e(Le, {});
-  const Ge = p && p.length === 0 || y.length === 0;
+  if (!Y || !i || !j || !N)
+    return /* @__PURE__ */ e(Le, {});
+  const ze = m.length === 0 || T.length === 0, be = Xo(V, Ee, Ae);
   return /* @__PURE__ */ C(
-    rt,
+    ut,
     {
-      calendarActions: { onRangeChanged: mt },
-      dateRange: S,
-      dateRangeVariant: h ? "timeframetabs" : "timeframebuttons",
-      onAccountsFilterClick: pt,
-      onBackClick: o,
-      sx: n,
-      title: E.title,
+      calendarActions: { onRangeChanged: _t },
+      dateRange: v,
+      dateRangeVariant: u ? "timeframetabs" : "timeframebuttons",
+      onAccountsFilterClick: bt,
+      onBackClick: t,
+      onMenuClick: n,
+      sx: o,
+      title: V.title,
       children: [
-        Ge && /* @__PURE__ */ e(
-          ao,
-          {
-            header: E.zero_state_content_header,
-            icon: "",
-            onClick: Ae,
-            primaryButton: E.empty_state_primary,
-            subText: E.empty_state_sub_text,
-            sx: { height: a },
-            variant: Ee
-          }
-        ),
-        !Ge && /* @__PURE__ */ C(
-          x,
+        /* @__PURE__ */ C(
+          S,
           {
             sx: {
-              px: h ? 0 : 48
+              px: u ? 0 : 48
             },
             children: [
               /* @__PURE__ */ C(
-                x,
+                S,
                 {
                   flexDirection: "row",
                   justifyContent: "space-between",
-                  sx: { gap: 8, px: h ? 24 : 0, py: 16 },
+                  sx: { px: u ? 16 : 0, py: 16 },
                   children: [
                     /* @__PURE__ */ e(
-                      ut,
+                      ft,
                       {
-                        selectedCategoryGuid: j,
-                        selectedDateRange: S
+                        selectedCategoryGuid: se,
+                        selectedDateRange: v
                       }
                     ),
-                    /* @__PURE__ */ e(dt, { onTabChange: gt, selectedTab: Y })
+                    /* @__PURE__ */ e(pt, { onTabChange: Ct, selectedTab: B })
                   ]
                 }
               ),
-              /* @__PURE__ */ e(x, { alignItems: "center", flexDirection: "row", sx: { pb: 8 }, width: "100%", children: /* @__PURE__ */ e(A, { flexGrow: 1, children: j && /* @__PURE__ */ C(be, { onClick: yt, sx: { p: 0, pr: 5 }, children: [
-                /* @__PURE__ */ e(Te, { name: "arrow_back" }),
-                E.all_categories
+              /* @__PURE__ */ e(S, { alignItems: "center", flexDirection: "row", sx: { pb: 8 }, width: "100%", children: /* @__PURE__ */ e(H, { flexGrow: 1, children: se && /* @__PURE__ */ C(Te, { onClick: St, sx: { p: 0, pr: 5 }, children: [
+                /* @__PURE__ */ e(ro, {}),
+                V.all_categories
               ] }) }) }),
-              /* @__PURE__ */ C(x, { flexDirection: Z ? "row" : "column", gap: Z ? 48 : 16, children: [
-                Y === "Chart" && /* @__PURE__ */ C(_t, { children: [
-                  /* @__PURE__ */ e(A, { sx: { width: Z ? "68%" : "100%" }, children: /* @__PURE__ */ e(
-                    Oo,
+              ze && /* @__PURE__ */ e(
+                fo,
+                {
+                  header: be.header,
+                  icon: "multiline_chart",
+                  onClick: be.onClickHandler,
+                  primaryButton: be.primaryButton,
+                  subText: be.description,
+                  sx: { height: l, maxWidth: 432 }
+                }
+              ),
+              !ze && /* @__PURE__ */ C(S, { flexDirection: te ? "row" : "column", gap: te ? 48 : 16, children: [
+                B === "Chart" && /* @__PURE__ */ C(vt, { children: [
+                  /* @__PURE__ */ e(H, { sx: { width: te ? "68%" : "100%" }, children: /* @__PURE__ */ e(
+                    jo,
                     {
-                      availableHeight: a,
+                      availableHeight: l,
                       minHeight: 450,
-                      selectedDateRange: S,
-                      totals: y
+                      selectedDateRange: v,
+                      totals: T
                     }
                   ) }),
-                  /* @__PURE__ */ C(x, { gap: 16, sx: { width: Z ? "32%" : "100%" }, children: [
-                    se && F && _e.length > 0 && /* @__PURE__ */ e(
-                      Ao,
+                  /* @__PURE__ */ C(S, { gap: 16, sx: { width: te ? "32%" : "100%" }, children: [
+                    ie && U && _e.length > 0 && /* @__PURE__ */ e(
+                      Vo,
                       {
                         beats: _e,
                         onInsightCardClick: s
                       }
                     ),
                     /* @__PURE__ */ e(
-                      Eo,
+                      Bo,
                       {
-                        availableHeight: T,
-                        onCategoryClick: me
+                        availableHeight: b,
+                        onCategoryClick: he
                       }
                     )
                   ] })
                 ] }),
-                Y === "Table" && /* @__PURE__ */ e(A, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
-                  ht,
+                B === "Table" && /* @__PURE__ */ e(H, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
+                  yt,
                   {
                     height: "unset",
-                    onClickRow: ft,
-                    selectedCategory: j,
-                    selectedDateRange: S
+                    onClickRow: Tt,
+                    selectedCategory: se,
+                    selectedDateRange: v
                   }
                 ) })
               ] }),
-              ge && /* @__PURE__ */ e(ko, { onClose: Me })
+              /* @__PURE__ */ e(
+                Pe,
+                {
+                  ariaLabelClose: V.close_category_details,
+                  isOpen: !!E,
+                  onClose: Me,
+                  shouldShowHeaderShadow: !0,
+                  title: E?.is_income ? V.category_income : V.category_spending,
+                  children: E && /* @__PURE__ */ e(Fo, {})
+                }
+              )
             ]
           }
         ),
         /* @__PURE__ */ e(
-          io,
+          yo,
           {
-            onClose: () => U(!1),
-            showConnectWidget: L,
-            title: te.mini_title
+            onClose: () => z(!1),
+            showConnectWidget: I,
+            title: O.mini_title
           }
         )
       ]
     }
   );
-}, jn = R(Bo);
+}, ls = A(Zo);
 export {
-  $n as TrendsFullWidget,
-  Yn as TrendsMicroWidget,
-  Kn as TrendsMiniWidget,
-  Zn as TrendsStore,
-  jn as TrendsWidget
+  rs as TrendsFullWidget,
+  is as TrendsMicroWidget,
+  as as TrendsMiniWidget,
+  ls as TrendsWidget
 };