@mx-cartographer/experiences 9.1.0-alpha.bb1 → 9.1.0

package/dist/trends/index.es.js

@@ -1,300 +1,311 @@
-import { d as St, f as ze, s as Qe, u as Me } from "../GlobalCopyApi-BeXzaDH9.mjs";
-import { J as ie, X as xt, a as wt, i as It, ln as B, r as Fe, rt as Re, un as X } from "../core-BexP5oiV.mjs";
-import { $t as et, An as Dt, Gn as tt, Hn as Lt, On as Et, _n as Mt, c as ot, fn as nt, gn as At, hn as $e, hr as Rt, in as Nt, jn as be, lr as We, mn as rt, mr as Z, pn as kt, qn as Ht, sr as w, vn as Wt, yn as Oe } from "../accounts-DkyAiLpg.mjs";
-import { n as Se } from "../Analytics-BKzTPees.mjs";
-import { D as ye, E as xe, d as F, h as fe, i as at, k as st, m as Ge, n as we, p as A, s as q, t as Ie } from "../Loader-BlVzRtUd.mjs";
-import { n as Ot, t as Gt } from "../MiniWidgetContainer-COwnjfy7.mjs";
-import { t as Ae } from "../HeaderCell-EhCUSjvj.mjs";
-import { n as Bt, r as W } from "../microinsights-CRf3ChsJ.mjs";
-import m, { useEffect as Pt, useRef as Vt, useState as zt } from "react";
-import { observer as R } from "mobx-react-lite";
-import v from "@mui/material/Stack";
-import { CategoryIcon as De, H3 as Be, Icon as Ne, P as pe, Text as z } from "@mxenabled/mxui";
-import ve from "@mui/material/Button";
-import { ArrowBack as Ft, ChevronRight as $t, ExpandLess as Kt, ExpandMore as jt, MultilineChart as Yt, TrendingDown as Ut, TrendingUp as Xt } from "@mxenabled/mx-icons";
-import { Fragment as Zt, jsx as e, jsxs as f } from "react/jsx-runtime";
-import { alpha as qt, styled as Jt, useTheme as J } from "@mui/material/styles";
-import k from "@mui/material/Box";
-import Qt from "@mui/material/ToggleButton";
-import eo from "@mui/material/ToggleButtonGroup";
-import to from "@mui/material/IconButton";
-import oo from "numeral";
-import { subMonths as no } from "date-fns";
-import { parseISO as it } from "date-fns/parseISO";
-import { addSeconds as lt } from "date-fns/addSeconds";
-import { differenceInCalendarMonths as Te } from "date-fns/differenceInCalendarMonths";
-import { Stack as ro } from "@mui/material";
-import ct from "@mui/material/Card";
-import dt from "@mui/material/CardContent";
-import ke from "@mui/material/Divider";
-import He from "@mui/material/List";
-import ut from "@mui/material/ListItem";
-import ao from "@mui/material/ListItemButton";
-import so from "@mui/material/ListItemIcon";
+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 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, f as $, a as fe, g as we, c as De, B as ye, D as st, e as Be, i as rt } from "../hooks-97sNJ_lf.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-Fii_xATx.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-fnwE0hqd.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-WeZYytR0.mjs";
+import { T as ct } from "../EmbeddedCard-DH8vQ3qN.mjs";
+import { T as dt } from "../TransactionDetails-roZ5xLq8.mjs";
+import { D as Pe } from "../Drawer-DsnW2o0v.mjs";
+import { u as Ie } from "../useWidgetLoadTimer-B0tB-yzL.mjs";
+import { L as Le } from "../Loader-CxeBwuPG.mjs";
+import { W as ut } from "../WidgetContainer-DJnp6t6c.mjs";
+import { L as Ve } from "../LineChart-CUfiH86G.mjs";
+import { M as Qt } from "../MiniWidgetContainer-Bmv_WeUd.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-B2NnKBgW.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 io from "@mui/material/ListItemAvatar";
-import { ChartsTooltipContainer as lo, useItemTooltip as co } from "@mui/x-charts/ChartsTooltip";
-import { LineChart as uo } from "@mui/x-charts/LineChart";
-import ho from "@mui/material/Badge";
-import { DataGridPro as go, useGridApiContext as mo, useGridRootProps as po } from "@mui/x-data-grid-pro";
-import yo from "@mui/material/Collapse";
-import Ke from "@mui/material/Grid";
-var gt = ({ categoryGuid: t, topLevelCategoryGuid: n }) => {
-  const { categories: r } = A(), { getCategoryName: o } = q(), a = o(t);
-  return /* @__PURE__ */ f(v, {
-    alignItems: "center",
-    direction: "column",
-    gap: "8",
-    justifyContent: "center",
-    mb: 4,
-    children: [/* @__PURE__ */ e(k, {
-      "aria-label": Qe(r.category_icon_label_aria, a),
-      mb: 4,
-      role: "img",
-      children: /* @__PURE__ */ e(De, { categoryGuid: n })
-    }), /* @__PURE__ */ e(z, {
-      variant: "body1",
-      children: a
-    })]
-  });
-}, fo = ({ categoryGuids: { guid: t, topLevelGuid: n }, hoveredAreaData: r, cursorPosition: o, chartContainerRef: a }) => {
-  const l = J(), s = Vt(null), [c, u] = zt({
-    x: o.x,
-    y: o.y
-  });
-  if (Pt(() => {
+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-C9KWH3Az.mjs";
+import { u as po } from "../useInsightsEnabled-D5Sdm0TJ.mjs";
+import { E as fo } from "../EmptyState-CJUDc3kD.mjs";
+import { C as yo } from "../ConnectDrawer-CW4LA3H3.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(
+      H,
+      {
+        "aria-label": nt(s.category_icon_label_aria, r),
+        mb: 4,
+        role: "img",
+        children: /* @__PURE__ */ e(ve, { categoryGuid: n })
+      }
+    ),
+    /* @__PURE__ */ e(F, { variant: "body1", children: r })
+  ] });
+}, Co = ({
+  categoryGuids: { guid: t, topLevelGuid: n },
+  hoveredAreaData: s,
+  cursorPosition: o,
+  chartContainerRef: r
+}) => {
+  const c = Z(), a = wt(null), [d, u] = Dt({ x: o.x, y: o.y });
+  if (It(() => {
     (() => {
-      const g = s.current, _ = a.current;
-      if (!g || !_) return;
-      const h = g.getBoundingClientRect(), p = _.getBoundingClientRect();
-      let C = o.x, x = o.y;
-      C + h.width * 2 > p.right ? C = o.x - h.width : C - h.width < p.left && (C = o.x), x + h.height * 2 > p.bottom && (x = o.y - h.height), u({
-        x: C,
-        y: x
-      });
+      const m = a.current, _ = r.current;
+      if (!m || !_) return;
+      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 });
     })();
-  }, [o, a]), !r) return null;
-  const i = r.reduce((y, g) => y + g.y, 0);
-  return /* @__PURE__ */ e(ct, {
-    ref: s,
-    sx: {
-      position: "absolute",
-      top: c.y,
-      left: c.x,
-      width: 250,
-      pointerEvents: "none"
-    },
-    children: /* @__PURE__ */ f(dt, { children: [
-      /* @__PURE__ */ f(k, {
-        alignItems: "center",
-        display: "flex",
-        flexDirection: "column",
-        children: [
-          /* @__PURE__ */ e(gt, {
-            categoryGuid: t,
-            topLevelCategoryGuid: n
-          }),
-          /* @__PURE__ */ e(z, {
-            variant: "body2",
-            children: `${r.length}-month total`
-          }),
-          /* @__PURE__ */ e(be, {
-            amount: i,
-            bold: !0,
-            formatString: "0,0",
-            variant: "body2"
-          })
-        ]
-      }),
-      /* @__PURE__ */ e(ke, { sx: {
-        my: 16,
-        width: "100%"
-      } }),
-      /* @__PURE__ */ e(Ke, {
-        container: !0,
-        children: r.map((y, g) => /* @__PURE__ */ f(m.Fragment, { children: [g > 0 && g % 3 === 0 && /* @__PURE__ */ e(ke, { sx: {
-          my: 16,
-          width: "100%"
-        } }), /* @__PURE__ */ e(Ke, {
-          size: 4,
-          children: /* @__PURE__ */ f(k, {
-            alignItems: "center",
-            display: "flex",
-            flexDirection: "column",
-            children: [/* @__PURE__ */ e(z, {
-              color: l.palette.text.secondary,
-              variant: "caption",
-              children: y.x
-            }), /* @__PURE__ */ e(be, {
-              amount: y.y,
-              bold: !0,
-              formatString: "0,0",
-              variant: "body1"
-            })]
-          })
-        })] }, g))
+  }, [o, r]), !s) return null;
+  const i = s.reduce((f, m) => f + m.y, 0);
+  return /* @__PURE__ */ e(
+    tt,
+    {
+      ref: a,
+      sx: {
+        position: "absolute",
+        top: d.y,
+        left: d.x,
+        width: 250,
+        pointerEvents: "none"
+      },
+      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(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: f.y,
+                bold: !0,
+                formatString: "0,0",
+                variant: "body1"
+              }
+            )
+          ] }) })
+        ] }, m)) })
+      ] })
+    }
+  );
+}, _o = A(Co), bo = ({
+  sx: t,
+  categoryGuids: n,
+  hoveredLegend: s,
+  legendRef: o,
+  onHoverLegend: r,
+  onClickLegend: c
+}) => {
+  const { isMobile: a } = Q(), { getCategoryName: d } = q();
+  return /* @__PURE__ */ e(
+    S,
+    {
+      direction: "row",
+      flexWrap: "wrap",
+      gap: a ? 2 : 6,
+      justifyContent: "start",
+      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(
+          Te,
+          {
+            onClick: () => c(u),
+            onMouseEnter: () => r(u),
+            onMouseLeave: () => r(null),
+            sx: {
+              color: "text.primary",
+              fontWeight: "normal",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              paddingX: 8,
+              paddingY: 4,
+              borderRadius: 1,
+              opacity: f ? 1 : 0.7
+            },
+            children: [
+              /* @__PURE__ */ e(
+                H,
+                {
+                  sx: {
+                    width: 16,
+                    height: 16,
+                    marginRight: a ? 5 : 10,
+                    borderRadius: "2px",
+                    backgroundColor: s ? f ? h : p : h
+                  }
+                }
+              ),
+              /* @__PURE__ */ e(F, { variant: "body1", children: d(u) })
+            ]
+          },
+          u
+        );
       })
-    ] })
-  });
-}, Co = R(fo), _o = ({ sx: t, categoryGuids: n, hoveredLegend: r, legendRef: o, onHoverLegend: a, onClickLegend: l }) => {
-  const { isMobile: s } = Z(), { getCategoryName: c } = q();
-  return /* @__PURE__ */ e(v, {
-    direction: "row",
-    flexWrap: "wrap",
-    gap: s ? 2 : 6,
-    justifyContent: "start",
-    ref: o,
-    sx: t,
-    children: n.map(({ guid: u, top_level_guid: i }) => {
-      const y = r === u, g = Me[u], _ = Me[i], h = g ?? _ ?? Me.default, p = h + "33";
-      return /* @__PURE__ */ f(ve, {
-        onClick: () => l(u),
-        onMouseEnter: () => a(u),
-        onMouseLeave: () => a(null),
-        sx: {
-          color: "text.primary",
-          fontWeight: "normal",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          paddingX: 8,
-          paddingY: 4,
-          borderRadius: 1,
-          opacity: y ? 1 : 0.7
-        },
-        children: [/* @__PURE__ */ e(k, { sx: {
-          width: 16,
-          height: 16,
-          marginRight: s ? 5 : 10,
-          borderRadius: "2px",
-          backgroundColor: r ? y ? h : p : h
-        } }), /* @__PURE__ */ e(z, {
-          variant: "body1",
-          children: c(u)
-        })]
-      }, u);
-    })
-  });
-}, bo = ({ categoryGuids: { guid: t, topLevelGuid: n }, series: r, xData: o }) => {
-  const a = co(), l = J();
-  if (!a?.identifier) return null;
-  const { dataIndex: s, seriesId: c } = a.identifier;
-  if (s == null || !c) return null;
-  const u = r.find((y) => y.id === c)?.data?.[s], i = o?.[s];
-  return u === void 0 || !i ? null : /* @__PURE__ */ e(ct, {
-    sx: {
-      pt: 4,
-      px: 8
-    },
-    children: /* @__PURE__ */ e(dt, { children: /* @__PURE__ */ f(k, {
-      alignItems: "center",
-      display: "flex",
-      flexDirection: "column",
-      children: [
-        /* @__PURE__ */ e(gt, {
-          categoryGuid: t,
-          topLevelCategoryGuid: n
-        }),
-        /* @__PURE__ */ e(z, {
-          color: l.palette.text.secondary,
-          variant: "body2",
-          children: X(i, B.MONTH_SHORT_YEAR)
-        }),
-        /* @__PURE__ */ e(be, {
-          amount: String(u),
-          bold: !0,
-          formatString: "0,0",
-          variant: "body1"
-        })
-      ]
-    }) })
-  });
-}, vo = ({ onHoverArea: t, onHoverPoint: n, onHoverLegend: r, onClickLegend: o, stackedDatasets: a, unstackedDatasets: l = [], availableHeight: s = 0, minimumHeight: c = 350 }) => {
-  const u = J(), { isMobile: i } = Z(), [y, { height: g }] = Ot(), _ = m.useRef(null), [h, p] = m.useState(0);
-  m.useEffect(() => {
-    p(Math.max(s - g, c));
-  }, [s, g]);
-  const [C, x] = m.useState(null), [H, T] = m.useState({
+    }
+  );
+}, To = ({
+  categoryGuids: { guid: t, topLevelGuid: n },
+  series: s,
+  xData: o
+}) => {
+  const r = At(), c = Z();
+  if (!r?.identifier) return null;
+  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" })
+  ] }) }) });
+}, So = ({
+  onHoverArea: t,
+  onHoverPoint: n,
+  onHoverLegend: s,
+  onClickLegend: o,
+  stackedDatasets: r,
+  unstackedDatasets: c = [],
+  availableHeight: a = 0,
+  minimumHeight: d = 350
+}) => {
+  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: L, hoveredAreaData: E, isAreaHovered: N, cursorPos: S } = H, $ = N && L && E, le = !$, K = [...a, ...l], Q = K[0]?.dataset.length ?? 0, P = K.flatMap((d) => d.dataset.map((b) => b.x)), V = K.flatMap((d) => d.dataset.map((b) => b.y)), O = a[0]?.dataset?.map((d, b) => a.reduce((D, U) => D + U.dataset[b]?.y || 0, 0)) ?? [0], ee = Math.max(...O), ce = Math.max(...l.flatMap((d) => d.dataset.map((b) => b.y))), j = Math.floor(Math.min(...V) / 100) * 100, de = Math.ceil(Math.max(ee, ce) / 100) * 100, Y = a.map((d, b) => ({
+    cursorPos: { x: 0, y: 0 }
+  }), { 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: d.category_guid,
-    top_level_guid: d.top_level_category_guid,
+    guid: l.category_guid,
+    top_level_guid: l.top_level_category_guid,
     area: !0,
-    color: a[b].category_color ?? u.palette.primary.main,
-    data: d.dataset.map((D) => D.y),
-    label: a[b].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: (D) => ie(D, "0,0")
-  })), te = l.map((d, b) => ({
+    valueFormatter: (I) => re(I, "0,0")
+  })), ne = c.map((l, b) => ({
     id: `unstacked-${b}`,
-    guid: d.category_guid,
-    top_level_guid: d.top_level_category_guid,
+    guid: l.category_guid,
+    top_level_guid: l.top_level_category_guid,
     area: !1,
-    color: d.category_color,
-    data: d.dataset.map((D) => D.y),
-    label: d.category_name,
+    color: l.category_color,
+    data: l.dataset.map((I) => I.y),
+    label: l.category_name,
     type: "line",
-    valueFormatter: (D) => ie(D, "0,0")
-  })), ae = [...Y, ...te], oe = [...Y.map(({ guid: d, top_level_guid: b }) => ({
-    guid: d,
-    top_level_guid: b
-  })), ...te.map(({ guid: d, top_level_guid: b }) => ({
-    guid: d,
-    top_level_guid: b
-  }))], ne = (d) => {
-    const b = d.startsWith("stacked-") ? a[parseInt(d.split("-")[1])] : l[parseInt(d.split("-")[1])];
+    valueFormatter: (I) => re(I, "0,0")
+  })), U = [...j, ...ne], de = [
+    ...j.map(({ guid: l, top_level_guid: b }) => ({
+      guid: l,
+      top_level_guid: b
+    })),
+    ...ne.map(({ guid: l, top_level_guid: b }) => ({
+      guid: l,
+      top_level_guid: b
+    }))
+  ], B = (l) => {
+    const I = l.startsWith("stacked-") ? r[parseInt(l.split("-")[1])] : c[parseInt(l.split("-")[1])];
     return {
-      guid: b?.category_guid,
-      topLevelGuid: b?.top_level_category_guid
+      guid: I?.category_guid,
+      topLevelGuid: I?.top_level_category_guid
     };
-  }, se = (d) => {
-    x(d), r?.(d ?? "");
-  }, ue = (d) => {
-    o?.(d ?? "");
-  }, he = () => {
-    const d = ne(String(L)).guid;
-    d && o?.(d);
-  }, ge = (d) => {
-    const b = String(d?.seriesId), D = ne(b).guid, U = ae.find((me) => me.id === b), Ce = U && d?.dataIndex !== void 0, Le = U && d?.dataIndex === void 0;
-    Ce ? (T({
-      hoveredSeriesId: b,
-      hoveredAreaData: null,
-      isAreaHovered: !1,
-      cursorPos: S
-    }), n?.(D)) : Le ? (T({
-      hoveredSeriesId: b,
-      hoveredAreaData: U?.data.map((me, Ee) => ({
-        x: P[Ee],
-        y: me
-      })) ?? [],
-      isAreaHovered: !0,
-      cursorPos: S
-    }), t?.(D)) : T({
-      hoveredSeriesId: null,
-      hoveredAreaData: null,
-      isAreaHovered: !1,
-      cursorPos: S
-    });
-  }, I = (d) => {
-    if (d.target instanceof Element && d.target.classList[0]?.includes("MuiMarkElement-root")) return;
-    const b = d.currentTarget.getBoundingClientRect();
-    T((D) => ({
-      ...D,
+  }, 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)
+      x({
+        hoveredSeriesId: b,
+        hoveredAreaData: null,
+        isAreaHovered: !1,
+        cursorPos: v
+      }), n?.(I);
+    else if (_e) {
+      const he = z?.data.map((Me, Ae) => ({
+        x: P[Ae],
+        y: Me
+      })) ?? [];
+      x({
+        hoveredSeriesId: b,
+        hoveredAreaData: he,
+        isAreaHovered: !0,
+        cursorPos: v
+      }), t?.(I);
+    } else
+      x({
+        hoveredSeriesId: null,
+        hoveredAreaData: null,
+        isAreaHovered: !1,
+        cursorPos: v
+      });
+  }, me = (l) => {
+    if (l.target instanceof Element && l.target.classList[0]?.includes("MuiMarkElement-root"))
+      return;
+    const b = l.currentTarget.getBoundingClientRect();
+    x((I) => ({
+      ...I,
       cursorPos: {
-        x: d.clientX - b.left,
-        y: d.clientY - b.top
+        x: l.clientX - b.left,
+        y: l.clientY - b.top
       }
     }));
-  }, G = {
+  }, D = {
     p: 4,
     "& .MuiBarLabel-root": {
       fontSize: 10,
@@ -304,799 +315,921 @@ var gt = ({ categoryGuid: t, topLevelCategoryGuid: n }) => {
       opacity: 0.4,
       transition: "opacity 0.3s ease"
     },
-    "& .MuiAreaElement-root:hover": { opacity: 1 },
-    '& [class*="MuiLineElement-series-unstacked-"]': { strokeWidth: 3 },
-    ...C && Y.reduce((d, b, D) => {
-      const U = `.MuiAreaElement-series-stacked-${D}`;
-      return d[U] = { opacity: Y[D].guid === C ? 0.9 : 0.2 }, d;
+    "& .MuiAreaElement-root:hover": {
+      opacity: 1
+    },
+    '& [class*="MuiLineElement-series-unstacked-"]': {
+      strokeWidth: 3
+    },
+    ...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(k, {
-    onMouseMove: I,
-    ref: _,
-    sx: {
-      position: "relative",
-      touchAction: "pan-y",
-      "& svg": {
-        touchAction: "pan-y",
-        userSelect: "none"
-      },
-      "& .recharts-wrapper": { touchAction: "pan-y" }
-    },
-    children: /* @__PURE__ */ f(v, {
-      direction: {
-        xs: "column",
-        md: "column"
-      },
-      spacing: {
-        xs: 0,
-        md: 4
-      },
+  return /* @__PURE__ */ e(
+    H,
+    {
+      onMouseMove: me,
+      ref: _,
       sx: {
-        width: "100%",
-        position: "relative"
+        position: "relative",
+        touchAction: "pan-y",
+        "& svg": {
+          touchAction: "pan-y",
+          userSelect: "none"
+        },
+        "& .recharts-wrapper": {
+          touchAction: "pan-y"
+        }
       },
-      children: [
-        /* @__PURE__ */ e(uo, {
-          height: h,
-          hideLegend: !0,
-          margin: {
-            bottom: 24,
-            left: 12,
-            right: 54,
-            top: 48
-          },
-          onAreaClick: he,
-          onHighlightChange: ge,
-          series: ae,
-          skipAnimation: !0,
-          slotProps: { tooltip: { trigger: le ? "item" : "none" } },
-          slots: { tooltip: le && L ? (d) => /* @__PURE__ */ e(lo, { children: /* @__PURE__ */ e(bo, {
-            ...d,
-            categoryGuids: ne(L),
-            series: ae,
-            xData: P
-          }) }) : void 0 },
-          sx: G,
-          xAxis: [{
-            data: P,
-            scaleType: "time",
-            valueFormatter: (d) => X(d, B.MONTH_SHORT_YEAR),
-            tickNumber: Q
-          }],
-          yAxis: [{
-            min: j,
-            max: de || 100,
-            valueFormatter: (d) => oo(d).format("0a")
-          }]
-        }),
-        /* @__PURE__ */ e(_o, {
-          categoryGuids: oe,
-          hoveredLegend: C,
-          legendRef: y,
-          onClickLegend: ue,
-          onHoverLegend: se,
-          sx: { px: i ? 0 : 24 }
-        }),
-        $ && /* @__PURE__ */ e(Co, {
-          categoryGuids: ne(L),
-          chartContainerRef: _,
-          cursorPosition: S,
-          hoveredAreaData: E.map((d) => ({
-            ...d,
-            x: X(d.x, B.MONTH_SHORT_YEAR)
-          }))
-        })
-      ]
-    })
-  });
-}, mt = ({ selectedTab: t, onTabChange: n }) => {
-  const { common: r } = A();
-  return /* @__PURE__ */ e(eo, {
-    "aria-label": r.view_toggle,
-    exclusive: !0,
-    onChange: n,
-    orientation: "horizontal",
-    value: t,
-    children: ["Chart", "Table"].map((o) => /* @__PURE__ */ e(Qt, {
-      "aria-label": o === "Chart" ? r.view_chart : r.view_table,
-      "aria-pressed": t === o,
-      color: "primary",
-      sx: { width: 56 },
-      value: o,
-      children: o === "Chart" ? /* @__PURE__ */ e(Ne, { name: "table_chart_view" }) : /* @__PURE__ */ e(Ne, { name: "format_list_bulleted" })
-    }, o))
-  });
-}, pt = ({ selectedDateRange: t, selectedCategoryGuid: n }) => {
-  const { trends: r } = A(), { isMobile: o, isDesktop: a } = Z(), { getCategoryName: l } = q(), s = m.useMemo(() => `${t.start.getFullYear() === t.end.getFullYear() ? X(t.start, o ? B.MONTH_SHORT : B.MONTH_LONG) : X(t.start, o ? B.MONTH_SHORT_YEAR : B.MONTH_YEAR)} - ${X(t.end, o ? B.MONTH_SHORT_YEAR : B.MONTH_YEAR)}`, [t, o]), c = l(n) || (o ? r.sub_title : r.sub_title_by_category);
-  return /* @__PURE__ */ f(k, { children: [/* @__PURE__ */ e(Be, {
-    sx: {
-      fontSize: a ? null : 15,
-      overflow: "visible",
-      textOverflow: "unset"
-    },
-    children: c
-  }), /* @__PURE__ */ e(z, {
-    variant: a ? "subtitle1" : "body2",
-    children: s
-  })] });
-}, To = (t) => {
+      children: /* @__PURE__ */ C(
+        S,
+        {
+          direction: { xs: "column", md: "column" },
+          spacing: { xs: 0, md: 4 },
+          sx: { width: "100%", position: "relative" },
+          children: [
+            /* @__PURE__ */ e(
+              kt,
+              {
+                height: h,
+                hideLegend: !0,
+                margin: { bottom: 24, left: 12, right: 54, top: 48 },
+                onAreaClick: le,
+                onHighlightChange: ce,
+                series: U,
+                skipAnimation: !0,
+                slotProps: {
+                  tooltip: { trigger: ae ? "item" : "none" }
+                },
+                slots: {
+                  tooltip: ae && L ? (l) => /* @__PURE__ */ e(Rt, { children: /* @__PURE__ */ e(
+                    To,
+                    {
+                      ...l,
+                      categoryGuids: B(L),
+                      series: U,
+                      xData: P
+                    }
+                  ) }) : void 0
+                },
+                sx: D,
+                xAxis: [
+                  {
+                    data: P,
+                    scaleType: "time",
+                    valueFormatter: (l) => X(l, G.MONTH_SHORT_YEAR),
+                    tickNumber: J
+                    // How many ticks to show on the x-axis
+                  }
+                ],
+                yAxis: [
+                  {
+                    min: ie,
+                    max: te || 100,
+                    valueFormatter: (l) => Lt(l).format("0a")
+                  }
+                ]
+              }
+            ),
+            /* @__PURE__ */ e(
+              bo,
+              {
+                categoryGuids: de,
+                hoveredLegend: y,
+                legendRef: f,
+                onClickLegend: se,
+                onHoverLegend: ue,
+                sx: { px: i ? 0 : 24 }
+              }
+            ),
+            K && /* @__PURE__ */ e(
+              _o,
+              {
+                categoryGuids: B(L),
+                chartContainerRef: _,
+                cursorPosition: v,
+                hoveredAreaData: M.map((l) => ({
+                  ...l,
+                  x: X(l.x, G.MONTH_SHORT_YEAR)
+                }))
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}, pt = ({ selectedTab: t, onTabChange: n }) => {
+  const { common: s } = R();
+  return /* @__PURE__ */ e(
+    $t,
+    {
+      "aria-label": s.view_toggle,
+      exclusive: !0,
+      onChange: n,
+      orientation: "horizontal",
+      value: t,
+      children: ["Chart", "Table"].map((o) => /* @__PURE__ */ e(
+        Ft,
+        {
+          "aria-label": o === "Chart" ? s.view_chart : s.view_table,
+          "aria-pressed": t === o,
+          color: "primary",
+          sx: { width: 56 },
+          value: o,
+          children: o === "Chart" ? /* @__PURE__ */ e(He, { name: "table_chart_view" }) : /* @__PURE__ */ e(He, { name: "format_list_bulleted" })
+        },
+        o
+      ))
+    }
+  );
+}, 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 `${i} - ${f}`;
+  }, [t, o]), u = c(n) || (o ? s.sub_title : s.sub_title_by_category);
+  return /* @__PURE__ */ C(H, { children: [
+    /* @__PURE__ */ e(
+      Ge,
+      {
+        sx: {
+          fontSize: r ? null : 15,
+          overflow: "visible",
+          textOverflow: "unset"
+        },
+        children: u
+      }
+    ),
+    /* @__PURE__ */ e(F, { variant: r ? "subtitle1" : "body2", children: a })
+  ] });
+}, xo = (t) => {
   const n = t.id === "total";
-  return /* @__PURE__ */ f(v, {
-    alignItems: "center",
-    direction: "row",
-    role: "rowheader",
-    tabIndex: t.tabIndex,
-    children: [!n && /* @__PURE__ */ e(k, {
-      "aria-hidden": !0,
-      children: /* @__PURE__ */ e(De, {
-        categoryGuid: t.row.top_level_category_guid,
-        variant: "twotone"
-      })
-    }), /* @__PURE__ */ e(z, {
-      bold: n,
-      sx: { ml: 12 },
-      variant: n ? "body1" : "body2",
-      children: t.row.category
-    })]
-  });
+  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, r = t.row.top_level_category_guid, o = n === ze.INCOME || r === ze.INCOME, a = t.id === "total", l = t.field === "total", s = l ? t.row[t.field] : t.row.monthlyAmounts[t.field];
-  return /* @__PURE__ */ e(v, {
-    alignItems: "flex-end",
-    direction: "row",
-    tabIndex: t.tabIndex,
-    children: /* @__PURE__ */ e(be, {
-      amount: o ? Math.abs(s) : s,
+  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: o ? Math.abs(a) : a,
       isIncome: o,
-      sx: { fontWeight: o || l || a ? 600 : 500 },
+      sx: { fontWeight: o || c || r ? 600 : 500 },
       symbol: o ? "+" : void 0,
-      variant: a ? "body1" : "body2"
-    })
-  });
-}, Ye = (t, n) => {
-  const r = X(it(n.isoDate), B.MONTH_LONG);
-  return t[r] = n.amount, t;
-}, Ue = (t) => (n, r) => {
-  const o = X(it(r.isoDate), B.MONTH_LONG);
-  return n + (t.includes(o) ? r.amount : 0);
-}, So = (t, n) => {
-  const r = [], o = new Date(t);
+      variant: r ? "body1" : "body2"
+    }
+  ) });
+}, 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 a = X(o, B.MONTH_LONG);
-    r.push(a), o.setMonth(o.getMonth() + 1);
+    const r = X(o, G.MONTH_LONG);
+    s.push(r), o.setMonth(o.getMonth() + 1);
   }
-  return r;
-}, xo = (t, n) => {
-  const r = {
+  return s;
+}, wo = (t, n) => {
+  const s = {
     field: "category",
     flex: 1,
     headerClassName: "trends-table-header",
     headerName: n.category_title,
     minWidth: 210,
-    renderHeader: Ae,
-    renderCell: To,
+    renderHeader: ke,
+    renderCell: xo,
     sortable: !0,
-    sortComparator: It,
+    sortComparator: Ot,
     type: "string"
-  }, o = t.map((l) => ({
-    field: l,
+  }, o = t.map((c) => ({
+    field: c,
     flex: 1,
     headerClassName: "trends-table-header",
-    headerName: l,
+    headerName: c,
     minWidth: 100,
-    renderHeader: Ae,
+    renderHeader: ke,
     renderCell: je,
     align: "center",
     headerAlign: "center",
     sortable: !0,
     hideSortIcons: !1,
     type: "number",
-    sortComparator: Fe,
-    valueGetter: (s, c) => c.monthlyAmounts?.[l] ?? 0
-  })), a = {
+    sortComparator: Ke,
+    valueGetter: (a, d) => d.monthlyAmounts?.[c] ?? 0
+  })), r = {
     field: "total",
     flex: 1,
     headerClassName: "trends-table-header",
     headerName: n.table_column_total,
     minWidth: 100,
-    renderHeader: Ae,
+    renderHeader: ke,
     renderCell: je,
     align: "center",
     headerAlign: "center",
     sortable: !0,
     hideSortIcons: !1,
     type: "number",
-    sortComparator: Fe
+    sortComparator: Ke
   };
-  return [
-    r,
-    ...o,
-    a
-  ];
-}, Xe = (t, n, r, o, a) => {
-  const l = t.filter((s) => s.is_income === r).map((s) => {
-    let c = s.totalMonthlyAmounts;
-    return a && (c = s.monthlyAmounts), {
-      id: s.guid,
-      category: s.name,
-      category_guid: s.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: s.parent_guid || s.guid,
-      total: c.reduce(Ue(o), 0),
-      monthlyAmounts: c.reduce(Ye, {})
+      top_level_category_guid: a.parent_guid || a.guid,
+      total: d.reduce(Xe(o), 0),
+      monthlyAmounts: d.reduce(Ue, {})
     };
   });
-  if (a && a.is_income === r) {
-    const s = a.monthlyAmounts.reduce(Ue(o), 0);
-    s !== 0 && l.push({
-      id: `sub-${a.guid}`,
-      category: Qe(n.category_general, a.name),
-      category_guid: a.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: a.guid,
-      total: s,
-      monthlyAmounts: a.monthlyAmounts.reduce(Ye, {})
+      top_level_category_guid: r.guid,
+      total: a,
+      monthlyAmounts: r.monthlyAmounts.reduce(Ue, {})
     });
   }
-  return l;
-}, wo = Jt("div")({
+  return c;
+}, Do = Et("div")({
   display: "flex",
   visibility: "hidden",
   width: 0
 });
-function Io({ direction: t, index: n, sortingOrder: r, disabled: o, className: a, field: l }) {
-  const s = mo(), c = po();
+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 = c.slots.columnSortedAscendingIcon : t === "desc" ? u = c.slots.columnSortedDescendingIcon : (u = c.slots.columnUnsortedIcon ?? null, i.sortingOrder = r), !u) return null;
-  const y = s.current.getColumn(l)?.headerName ?? l;
-  let g = "";
-  t === "asc" ? g = ", sorted ascending" : t === "desc" && (g = ", sorted descending");
-  const _ = `Sort by ${y}${["Total", "Category"].includes(y) ? "" : " category totals"}${g}`, h = /* @__PURE__ */ e(u, {
-    className: "MuiDataGrid-sortIcon",
-    fontSize: "small",
-    ...i
-  }), p = /* @__PURE__ */ e(to, {
-    disabled: o,
-    size: "small",
-    tabIndex: -1,
-    ...c.slotProps?.baseIconButton,
-    "aria-label": _,
-    className: `MuiDataGrid-sortButton${a ? ` ${a}` : ""}`,
-    title: _,
-    children: h
-  });
-  return /* @__PURE__ */ e(wo, {
-    className: "MuiDataGrid-iconButtonContainer",
-    children: n != null ? /* @__PURE__ */ e(ho, {
-      badgeContent: n,
-      color: "default",
-      overlap: "circular",
-      children: p
-    }) : p
-  });
+  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 });
 }
-var Do = m.memo(Io), Ze = ({ columns: t, onRowClick: n, parentCategory: r, rows: o, totalRow: a }) => {
-  const l = J(), { onEvent: s } = F(), c = l.palette.mode === "light";
-  return /* @__PURE__ */ e(go, {
-    columns: t,
-    disableColumnFilter: !0,
-    disableColumnMenu: !0,
-    hideFooter: !0,
-    initialState: { sorting: { sortModel: [{
-      field: "category",
-      sort: "asc"
-    }] } },
-    onRowClick: (u) => {
-      r || n?.(u.row.category_guid), s(w.TRENDS_CLICK_LIST_ITEM, {
-        ...W,
-        listItem: St[u.row.category_guid]
-      });
-    },
-    pinnedRows: { bottom: a ? [a] : [] },
-    rowHeight: 64,
-    rows: o,
-    slotProps: { baseIconButton: {
-      color: "secondary",
-      sx: { ml: 8 }
-    } },
-    slots: { columnHeaderSortIcon: Do },
-    sortingOrder: ["asc", "desc"],
-    sx: {
-      borderColor: "divider",
-      borderWidth: 1,
-      borderStyle: "solid",
-      borderRadius: 2,
-      "& .MuiDataGrid-columnHeaders": {
-        bgcolor: c ? "neutral.50" : "neutral.800",
-        borderBottom: "none"
+const Lo = g.memo(Io), Qe = ({
+  columns: t,
+  onRowClick: n,
+  parentCategory: s,
+  rows: o,
+  totalRow: r
+}) => {
+  const c = Z(), { onEvent: a } = $(), d = c.palette.mode === "light";
+  return /* @__PURE__ */ e(
+    Ut,
+    {
+      columns: t,
+      disableColumnFilter: !0,
+      disableColumnMenu: !0,
+      hideFooter: !0,
+      initialState: { sorting: { sortModel: [{ field: "category", sort: "asc" }] } },
+      onRowClick: (u) => {
+        s || n?.(u.row.category_guid), a(w.TRENDS_CLICK_LIST_ITEM, {
+          ...W,
+          listItem: Nt[u.row.category_guid]
+        });
       },
-      "& .trends-table-header": { bgcolor: c ? "neutral.50" : "neutral.800" }
+      pinnedRows: {
+        bottom: r ? [r] : []
+      },
+      rowHeight: 64,
+      rows: o,
+      slotProps: { baseIconButton: { color: "secondary", sx: { ml: 8 } } },
+      slots: { columnHeaderSortIcon: Lo },
+      sortingOrder: ["asc", "desc"],
+      sx: {
+        borderColor: "divider",
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderRadius: 2,
+        "& .MuiDataGrid-columnHeaders": {
+          bgcolor: d ? "neutral.50" : "neutral.800",
+          borderBottom: "none"
+        },
+        "& .trends-table-header": {
+          bgcolor: d ? "neutral.50" : "neutral.800"
+        }
+      }
     }
-  });
-}, yt = ({ selectedDateRange: t, selectedCategory: n, onClickRow: r, height: o = "100%", sx: a = {} }) => {
-  const { trends: l } = A(), { trendsCategories: s } = q(), c = m.useMemo(() => So(t.start, t.end), [t]), u = m.useMemo(() => xo(c, l), [c, l]), i = m.useMemo(() => {
-    if (n) return s.find((h) => h.guid === n);
-  }, [n, s]), [y, g] = m.useMemo(() => {
-    let h = s;
-    return i && (h = i.subCategories.filter((p) => p.monthlyAmounts.some((C) => C.amount !== 0))), [Xe(h, l, !0, c, i), Xe(h, l, !1, c, i)];
-  }, [
-    s,
-    c,
-    i,
-    l
-  ]), _ = {
+  );
+}, 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: l.table_column_total,
+    category: c.table_column_total,
     category_guid: "total",
     isParent: !1,
     top_level_category_guid: "total",
-    total: g.reduce((h, p) => h + p.total, 0),
-    monthlyAmounts: g.reduce((h, p) => (Object.entries(p.monthlyAmounts).forEach(([C, x]) => {
-      h[C] = (h[C] || 0) + x;
-    }), h), {})
+    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__ */ f(v, {
-    gap: 24,
-    sx: {
-      height: o,
-      width: "100%",
-      overflowX: "auto",
-      boxShadow: "none",
-      ...a
-    },
-    children: [(!i || i && i.is_income) && /* @__PURE__ */ e(Ze, {
-      columns: u,
-      onRowClick: r,
-      parentCategory: i,
-      rows: y
-    }), (!i || i && !i.is_income) && /* @__PURE__ */ e(Ze, {
-      columns: u,
-      onRowClick: r,
-      parentCategory: i,
-      rows: g,
-      totalRow: _
-    })]
-  });
-}, Lo = { title: "Transaction List" }, Eo = ({ categoryGuid: t, dateRange: n, isOpen: r, onClose: o }) => {
-  const { onEvent: a } = F(), { selectedAccountGuids: l } = fe(), { common: s } = A(), { setFilter: c, sortedTransactions: u } = xe(), [i, y] = m.useState(""), g = m.useMemo(() => u.find((h) => h.guid === i), [i, u]);
-  m.useEffect(() => {
-    c({
-      accounts: l,
+  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"
+}, Mo = ({
+  categoryGuid: t,
+  dateRange: n,
+  isOpen: s,
+  onClose: o
+}) => {
+  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]
+  );
+  g.useEffect(() => {
+    d({
+      accounts: c,
       dateRange: n,
       custom: (h) => t === "" || t === h.category_guid || t === h.top_level_category_guid,
       showSplits: !!t
     });
-  }, [
-    l,
-    t,
-    n
-  ]), m.useEffect(() => a(w.TRENDS_VIEW_TRANSACTIONS), []);
+  }, [c, t, n]), g.useEffect(() => r(w.TRENDS_VIEW_TRANSACTIONS), []);
   const _ = () => {
-    y(""), o();
+    f(""), o();
   };
-  return /* @__PURE__ */ f(We, {
-    ariaLabelClose: s.close_aria,
-    isOpen: r,
-    onClose: _,
-    title: Lo.title,
-    children: [g && /* @__PURE__ */ e(ot, { transaction: g }), !g && /* @__PURE__ */ e(et, { onClick: y })]
-  });
-}, Mo = R(Eo), Ao = ({ onBackClick: t, onMenuClick: n, sx: r }) => {
-  const { onEvent: o } = F(), { isDesktop: a, isTablet: l, isMobile: s } = Z(), { isAccountDataLoaded: c, loadAccountData: u } = we(), { categoriesLoaded: i, loadCategories: y, loadDateRangeCategoryTotals: g, loadMonthlyCategoryTotals: _, monthlyCategoryTotals: h, getCategoryName: p } = q(), { isTransactionDataLoaded: C, loadTransactionData: x, sortedTransactions: H } = xe(), { selectedDateRange: T, setSelectedDateRange: L } = ye(), { isInitialized: E, selectedAccounts: N } = fe(), { trends: S } = A(), [$, le] = m.useState(!1), [K, Q] = m.useState(!1), [P, V] = m.useState("Chart"), [O, ee] = m.useState(""), [ce, j] = m.useState(window.innerHeight), de = ce - (s ? 315 : 345);
-  Se({
+  return /* @__PURE__ */ C(
+    Pe,
+    {
+      ariaLabelClose: a.close_aria,
+      isOpen: s,
+      onClose: _,
+      title: Eo.title,
+      children: [
+        m && /* @__PURE__ */ e(dt, { transaction: m }),
+        !m && /* @__PURE__ */ e(ct, { onClick: f })
+      ]
+    }
+  );
+}, 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: $
-  }), m.useEffect(() => {
-    const I = () => j(window.innerHeight);
-    return window.addEventListener("resize", I), c || u().finally(), i || y().finally(), C || x().finally(), () => window.removeEventListener("resize", I);
-  }, []), m.useEffect(() => {
-    E && g(N, T.start, T.end).then(() => {
-      _(N, T.start, T.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(() => {
-      le(!0), o(w.TRENDS_LOAD_WIDGET, {
+      ae(!0), o(w.TRENDS_LOAD_WIDGET, {
         ...W,
-        time_period: `${Te(T.end, T.start)}M`
+        time_period: `${Se(x.end, x.start)}M`
       });
     });
-  }, [
-    E,
-    N,
-    T
-  ]);
-  const Y = m.useMemo(() => {
-    if (!$) return {
-      stackedDatasets: [],
-      unstackedDatasets: []
-    };
-    const I = wt(h, T.start, T.end), G = O.length ? I.filter((d) => d.top_level_category_guid === O || d.category_guid === O) : At(I);
+  }, [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: G.filter(Mt),
-      unstackedDatasets: G.filter(Wt)
+      stackedDatasets: l.filter(Vt),
+      unstackedDatasets: l.filter(Pt)
     };
-  }, [
-    h,
-    O,
-    T
-  ]), te = (I, G) => {
-    V(G ?? P), o(w.TRENDS_CLICK_TOGGLE_VIEW);
-  }, ae = (I) => {
-    const G = lt(I?.[0], 1), d = I?.[1], b = Te(d, G);
-    L({
-      start: G,
-      end: d
-    }), o(w.TRENDS_CLICK_TIME_WINDOW, { time_period: b + "M" });
-  }, oe = () => {
+  }, [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"
+    });
+  }, B = () => {
     o(w.TRENDS_CLICK_FILTER);
-  }, ne = (I) => {
-    ee(I);
-  }, se = (I) => {
-    ee(I), o(w.TRENDS_CLICK_LEGEND, { category: p(I) });
-  }, ue = (I) => {
-    o(w.TRENDS_HOVER_LEGEND, { category: p(I) });
-  }, he = (I) => {
-    o(w.TRENDS_HOVER_AREA, { category: I });
-  }, ge = (I) => {
-    o(w.TRENDS_HOVER_POINT, { category: I });
+  }, 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) => {
+    o(w.TRENDS_HOVER_AREA, { category: D });
+  }, me = (D) => {
+    o(w.TRENDS_HOVER_POINT, { category: D });
   };
-  return !E || !$ ? /* @__PURE__ */ e(Ie, {}) : /* @__PURE__ */ f(tt, {
-    calendarActions: { onRangeChanged: ae },
-    dateRange: T,
-    dateRangeVariant: "timeframebuttons",
-    onAccountsFilterClick: oe,
-    onBackClick: t,
-    onMenuClick: n,
-    sx: r,
-    title: S.title,
-    children: [/* @__PURE__ */ f(v, {
-      sx: { px: a ? 48 : l ? 24 : 12 },
+  return !M || !K ? /* @__PURE__ */ e(Le, {}) : /* @__PURE__ */ C(
+    ut,
+    {
+      calendarActions: { onRangeChanged: de },
+      dateRange: x,
+      dateRangeVariant: "timeframebuttons",
+      onAccountsFilterClick: B,
+      onBackClick: t,
+      onMenuClick: n,
+      sx: s,
+      title: v.title,
       children: [
-        /* @__PURE__ */ f(v, {
-          flexDirection: "row",
-          justifyContent: "space-between",
-          sx: {
-            pb: s ? 12 : 24,
-            pt: s ? 24 : 48
-          },
-          children: [/* @__PURE__ */ e(pt, {
-            selectedCategoryGuid: O,
-            selectedDateRange: T
-          }), /* @__PURE__ */ e(mt, {
-            onTabChange: te,
-            selectedTab: P
-          })]
-        }),
-        /* @__PURE__ */ f(v, {
-          alignItems: "center",
-          flexDirection: "row",
-          width: "100%",
-          children: [/* @__PURE__ */ e(k, {
-            flexGrow: 1,
-            children: O && /* @__PURE__ */ f(ve, {
-              onClick: () => ee(""),
-              sx: {
-                p: 0,
-                pr: 5
-              },
-              children: [/* @__PURE__ */ e(Ne, { name: "arrow_back" }), S.all_categories]
-            })
-          }), /* @__PURE__ */ e(ve, {
-            onClick: () => Q(!0),
-            sx: { px: 5 },
-            children: `${S.view_transactions} (${H.length})`
-          })]
-        }),
-        /* @__PURE__ */ f(k, { children: [P === "Chart" && /* @__PURE__ */ e(vo, {
-          availableHeight: de,
-          onClickLegend: se,
-          onHoverArea: he,
-          onHoverLegend: ue,
-          onHoverPoint: ge,
-          stackedDatasets: Y.stackedDatasets,
-          unstackedDatasets: Y.unstackedDatasets
-        }), P === "Table" && /* @__PURE__ */ e(yt, {
-          onClickRow: ne,
-          selectedCategory: O,
-          selectedDateRange: T
-        })] })
+        /* @__PURE__ */ C(
+          S,
+          {
+            sx: {
+              // eslint-disable-next-line no-nested-ternary
+              px: r ? 48 : c ? 24 : 12
+            },
+            children: [
+              /* @__PURE__ */ C(
+                S,
+                {
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                  sx: { pb: a ? 12 : 24, pt: a ? 24 : 48 },
+                  children: [
+                    /* @__PURE__ */ e(
+                      ft,
+                      {
+                        selectedCategoryGuid: O,
+                        selectedDateRange: x
+                      }
+                    ),
+                    /* @__PURE__ */ e(pt, { onTabChange: U, selectedTab: P })
+                  ]
+                }
+              ),
+              /* @__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(Te, { onClick: () => J(!0), sx: { px: 5 }, children: `${v.view_transactions} (${N.length})` })
+              ] }),
+              /* @__PURE__ */ C(H, { children: [
+                P === "Chart" && /* @__PURE__ */ e(
+                  So,
+                  {
+                    availableHeight: j,
+                    onClickLegend: se,
+                    onHoverArea: ce,
+                    onHoverLegend: le,
+                    onHoverPoint: me,
+                    stackedDatasets: ne.stackedDatasets,
+                    unstackedDatasets: ne.unstackedDatasets
+                  }
+                ),
+                P === "Table" && /* @__PURE__ */ e(
+                  yt,
+                  {
+                    onClickRow: ue,
+                    selectedCategory: O,
+                    selectedDateRange: x
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(
+          Ao,
+          {
+            categoryGuid: O,
+            dateRange: x,
+            isOpen: Y,
+            onClose: () => J(!1)
+          }
+        )
       ]
-    }), /* @__PURE__ */ e(Mo, {
-      categoryGuid: O,
-      dateRange: T,
-      isOpen: K,
-      onClose: () => Q(!1)
-    })]
-  });
-}, Gn = R(Ao), Ro = () => {
-  const { monthlyCategoryTotals: t } = q(), { trends: n } = A(), r = J(), { availableHeight: o = 300 } = st(), a = m.useMemo(() => kt(t), [t]);
-  return /* @__PURE__ */ e(Oe, {
-    baseline: "min",
-    colors: [r.palette.primary.main],
-    datasets: [a],
-    height: o,
-    labels: [n.spending_label],
-    showArea: !0,
-    showAverage: !0,
-    showLegend: !0,
-    showMarkLabel: !0,
-    useCustomMark: !0,
-    valueFormatterString: "0,0"
-  });
-}, No = R(Ro), ko = ({ onPrimaryCtaClick: t, sx: n }) => {
-  const { isAccountDataLoaded: r, loadAccountData: o } = we(), { loadMonthlyCategoryTotals: a, monthlyTotalsLoaded: l } = q(), { isInitialized: s } = Ge(), { trends: c } = A(), { selectedAccounts: u } = fe();
-  return m.useEffect(() => {
-    r || o().finally();
-  }, []), Se({
+    }
+  );
+}, 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(
+    Ve,
+    {
+      baseline: "min",
+      colors: [s.palette.primary.main],
+      datasets: [r],
+      height: o,
+      labels: [n.spending_label],
+      showArea: !0,
+      showAverage: !0,
+      showLegend: !0,
+      showMarkLabel: !0,
+      useCustomMark: !0,
+      valueFormatterString: "0,0"
+    }
+  );
+}, 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: l
-  }), m.useEffect(() => {
-    s && r && a(u).finally();
-  }, [
-    r,
-    s,
-    u
-  ]), !r || !s || !l ? /* @__PURE__ */ e(Ie, {}) : /* @__PURE__ */ e(Gt, {
-    contentStyles: {
-      height: "calc(100% - 72px)",
-      minHeight: 300,
-      ":last-child": { pb: 0 }
-    },
-    onPrimaryCtaClick: t,
-    primaryCtaLabel: c.primary_cta,
-    subTitle: c.sub_title,
-    sx: {
-      height: "100%",
-      ...n
-    },
-    title: c.mini_title,
-    children: /* @__PURE__ */ e(No, {})
-  });
-}, Bn = R(ko), Ho = 70, qe = ({ title: t, totalAmount: n, transactionType: r, percentage: o, secondaryLabel: a, shouldDisplayPercentage: l }) => {
-  const { availableWidth: s } = st(), c = m.useRef(null), u = m.useRef(null), i = xt(Number(Math.abs(o)), {
+    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: t,
+      primaryCtaLabel: d.primary_cta,
+      subTitle: d.sub_title,
+      sx: { height: "100%", ...n },
+      title: d.mini_title,
+      children: /* @__PURE__ */ e(Ho, {})
+    }
+  );
+}, as = A(No), Wo = 70, qe = ({
+  title: t,
+  totalAmount: n,
+  transactionType: s,
+  percentage: o,
+  secondaryLabel: r,
+  shouldDisplayPercentage: c
+}) => {
+  const { availableWidth: a } = st(), d = g.useRef(null), u = g.useRef(null), i = Wt(Number(Math.abs(o)), {
     style: "percent",
     minimumIntegerDigits: 1
-  }), y = s === 288 && ie(n, "0,0.00").length > 10 ? ie(n, "0,0") : ie(n, "0,0.00"), g = r === "spending" ? o > 0 : o >= 0, _ = r === "spending" ? "error.main" : "success.main", h = r === "spending" ? "success.main" : "text.secondary", p = c?.current, C = u?.current, x = p && C ? p.scrollWidth > C.clientWidth - Ho : !1;
-  return /* @__PURE__ */ f(v, {
-    sx: {
-      border: 1,
-      borderColor: "divider",
-      borderRadius: "4px",
-      flex: 1,
-      minWidth: 0,
-      px: 12,
-      py: 8
-    },
-    children: [/* @__PURE__ */ f(v, {
+  }), 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(
+    S,
+    {
       sx: {
-        alignItems: "center",
-        flexDirection: "row",
-        justifyContent: "space-between"
+        border: 1,
+        borderColor: "divider",
+        borderRadius: "4px",
+        flex: 1,
+        minWidth: 0,
+        px: 12,
+        py: 8
       },
-      children: [/* @__PURE__ */ e(pe, {
-        color: "text.secondary",
-        variant: "caption",
-        children: t
-      }), l && /* @__PURE__ */ f(v, {
-        sx: {
-          alignItems: "center",
-          flexDirection: "row",
-          gap: 4
-        },
-        children: [g ? /* @__PURE__ */ e(Xt, {
-          size: 20,
-          sx: { color: _ }
-        }) : /* @__PURE__ */ e(Ut, {
-          size: 20,
-          sx: { color: h }
-        }), /* @__PURE__ */ e(pe, {
-          sx: {
-            color: g ? _ : h,
-            fontWeight: 600
-          },
-          variant: "body2",
-          children: i
-        })]
-      })]
-    }), /* @__PURE__ */ f(v, {
-      ref: u,
-      sx: {
-        alignItems: "center",
-        flexDirection: "row",
-        justifyContent: "space-between"
-      },
-      children: [/* @__PURE__ */ e(k, {
-        ref: c,
-        sx: {
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          whiteSpace: "nowrap"
-        },
-        children: /* @__PURE__ */ e(Be, { children: y })
-      }), l && s >= 450 && !x && /* @__PURE__ */ e(pe, {
-        color: g ? _ : h,
-        variant: "caption",
-        children: a
-      })]
-    })]
-  });
-}, Wo = R(() => {
-  const { trends: t } = A();
-  return /* @__PURE__ */ f(v, {
-    sx: {
-      alignItems: "start",
-      flexDirection: "row",
-      gap: 12
-    },
-    children: [/* @__PURE__ */ e(Yt, { size: 32 }), /* @__PURE__ */ f(v, { 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
-    })] })]
-  });
-}), Pn = R(({ onCtaClick: t }) => {
-  const { isAccountDataLoaded: n, loadAccountData: r, visibleAccounts: o } = we();
-  m.useEffect(() => {
-    n || r().finally();
+      children: [
+        /* @__PURE__ */ C(
+          S,
+          {
+            sx: {
+              alignItems: "center",
+              flexDirection: "row",
+              justifyContent: "space-between"
+            },
+            children: [
+              /* @__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(
+                  pe,
+                  {
+                    sx: {
+                      color: m ? _ : h,
+                      fontWeight: 600
+                    },
+                    variant: "body2",
+                    children: i
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ C(
+          S,
+          {
+            ref: u,
+            sx: {
+              alignItems: "center",
+              flexDirection: "row",
+              justifyContent: "space-between"
+            },
+            children: [
+              /* @__PURE__ */ e(
+                H,
+                {
+                  ref: d,
+                  sx: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+                  children: /* @__PURE__ */ e(Ge, { children: f })
+                }
+              ),
+              c && a >= 450 && !T && /* @__PURE__ */ e(
+                pe,
+                {
+                  color: m ? _ : h,
+                  variant: "caption",
+                  children: r
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}, 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 })
+    ] })
+  ] });
+}), is = A(({ onCtaClick: t }) => {
+  const { isAccountDataLoaded: n, loadAccountData: s, visibleAccounts: o } = De();
+  g.useEffect(() => {
+    n || s().finally();
   }, []);
-  const { onEvent: a } = F(), { monthlyCategoryTotals: l, loadMonthlyCategoryTotals: s, monthlyTotalsLoaded: c } = q(), u = {
-    start: no(/* @__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: i } = A(), { selectedAccounts: y, isInitialized: g } = fe();
-  Se({
+  }, { trends: i } = R(), { selectedAccounts: f, isInitialized: m } = fe();
+  Ie({
     widgetName: "TrendsMicroWidget",
-    isLoaded: c
-  }), m.useEffect(() => {
-    g && s(y, u.start).then(() => {
-      a(w.TRENDS_LOAD_WIDGET, { state: o?.length ? "default" : "zeroState" });
-    });
-  }, [g, y]);
-  const { spendingData: _, incomeData: h } = m.useMemo(() => ({
-    spendingData: rt(l, u),
-    incomeData: nt(l, u)
-  }), [l, u]), [p, C] = _, [x, H] = h, T = $e(C.y, p.y), L = $e(H.y, x.y), E = g && !o?.length, N = () => {
-    a(E ? w.TRENDS_CLICK_GET_STARTED : w.TRENDS_CLICK_VIEW_MORE), t();
-  };
-  return !c || !g ? /* @__PURE__ */ e(Ie, {}) : /* @__PURE__ */ e(Ht, {
-    className: "mx-trends-microwidget",
-    ctaLabel: i.micro_primary_cta_label,
-    onCTAClick: N,
-    subHeader: E ? void 0 : i.micro_subheader,
-    title: i.title,
-    children: E ? /* @__PURE__ */ e(Wo, {}) : /* @__PURE__ */ f(v, {
-      sx: {
-        alignItems: "stretch",
-        flexDirection: "row",
-        gap: 12
-      },
-      children: [/* @__PURE__ */ e(qe, {
-        percentage: T,
-        secondaryLabel: i.micro_secondary_label,
-        shouldDisplayPercentage: C.y !== 0 && p.y !== 0,
-        title: i.spending_label,
-        totalAmount: C.y,
-        transactionType: "spending"
-      }), /* @__PURE__ */ e(qe, {
-        percentage: L,
-        secondaryLabel: i.micro_secondary_label,
-        shouldDisplayPercentage: H.y !== 0 && x.y !== 0,
-        title: i.income_label,
-        totalAmount: H.y,
-        transactionType: "income"
-      })]
-    })
-  });
-}), Oo = R(({ isExpanded: t, onClick: n }) => {
-  const r = J();
-  return /* @__PURE__ */ e(ut, { children: /* @__PURE__ */ e(ao, {
-    onClick: n,
-    sx: { justifyContent: "center" },
-    children: /* @__PURE__ */ f(v, {
-      sx: {
-        color: r.palette.primary.main,
-        flexDirection: "row",
-        alignItems: "center"
-      },
-      children: [/* @__PURE__ */ e(ht, { children: /* @__PURE__ */ e(z, {
-        bold: !0,
-        variant: "body2",
-        children: t ? "View less" : "View more"
-      }) }), /* @__PURE__ */ e(so, {
-        sx: { color: r.palette.primary.main },
-        children: t ? /* @__PURE__ */ e(Kt, {}) : /* @__PURE__ */ e(jt, { sx: {
-          transition: "transform 0.3s ease-in-out",
-          transform: t ? "rotate(180deg)" : "rotate(0deg)"
-        } })
-      })]
-    })
-  }) });
-}), Je = R(({ totalAmount: t, guid: n, name: r, transactions: o, onClick: a, isLastItem: l = !1, showDivider: s = !0 }) => {
-  const { trends: c } = A(), { onEvent: u } = F(), i = J(), y = `${o.length} ${o.length === 1 ? c.transaction : c.transactions}`, g = () => {
-    a?.(), u(w.TRENDS_CLICK_LIST_ITEM, {
-      ...W,
-      listItem: r
+    isLoaded: d
+  }), g.useEffect(() => {
+    m && a(f, u.start).then(() => {
+      r(w.TRENDS_LOAD_WIDGET, {
+        state: o?.length ? "default" : "zeroState"
+      });
     });
+  }, [m, f]);
+  const { spendingData: _, incomeData: h } = g.useMemo(
+    () => ({
+      spendingData: it(c, u),
+      incomeData: at(c, u)
+    }),
+    [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(
+      M ? w.TRENDS_CLICK_GET_STARTED : w.TRENDS_CLICK_VIEW_MORE
+    ), t();
   };
-  return /* @__PURE__ */ f(m.Fragment, { children: [/* @__PURE__ */ e(Et, {
-    leftIcon: n ? /* @__PURE__ */ e(De, {
-      categoryGuid: n,
-      sx: {
-        bgcolor: qt(Re(n, i), 0.15),
-        border: `1px solid ${Re(n, i)}`,
-        color: "text.primary"
+  return !d || !m ? /* @__PURE__ */ e(Le, {}) : /* @__PURE__ */ e(
+    ao,
+    {
+      className: "mx-trends-microwidget",
+      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",
+            flexDirection: "row",
+            gap: 12
+          },
+          children: [
+            /* @__PURE__ */ e(
+              qe,
+              {
+                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(
+              qe,
+              {
+                percentage: L,
+                secondaryLabel: i.micro_secondary_label,
+                shouldDisplayPercentage: N.y !== 0 && T.y !== 0,
+                title: i.income_label,
+                totalAmount: N.y,
+                transactionType: "income"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}), 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: s.palette.primary.main, flexDirection: "row", alignItems: "center" },
+        children: [
+          /* @__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: t ? "rotate(180deg)" : "rotate(0deg)"
+              }
+            }
+          ) })
+        ]
       }
-    }) : void 0,
-    onClick: g,
-    rightContent: ie(Math.abs(t), "0,0.00"),
-    rightIcon: a ? /* @__PURE__ */ e($t, {}) : void 0,
-    subtitle: y,
-    title: r
-  }), s && /* @__PURE__ */ e(ke, {
-    component: "li",
-    sx: { ml: l ? 24 : 68 }
-  })] }, n);
-}), Go = R(({ availableHeight: t = 0, onCategoryClick: n }) => {
-  const { collapsedCategories: r, visibleCategories: o, setVisibleListLength: a } = ye(), { isLargeDesktop: l, isDesktop: s } = Z(), { trends: c } = A(), { onEvent: u } = F(), [i, y] = m.useState(!1), g = s || l;
-  m.useEffect(() => {
-    const p = Math.floor(t / 64) - 1, C = o.length + r.length;
-    p !== o.length && (a(g ? Math.max(p, 5) : 5), y(p >= C));
-  }, [t]);
-  const _ = () => {
-    y(!i), u(w.TRENDS_CLICK_VIEW_MORE, { ...W });
-  }, h = o.length + (i ? r.length : 0);
-  return /* @__PURE__ */ f(v, {
-    sx: { width: "100%" },
-    children: [/* @__PURE__ */ e(v, {
-      sx: {
-        pb: 4,
-        pt: 16,
-        px: 16
-      },
-      children: /* @__PURE__ */ e(Be, { children: c.categories })
-    }), /* @__PURE__ */ f(He, { children: [
-      o.map((p, C) => /* @__PURE__ */ e(Je, {
-        ...p,
-        isLastItem: C === h - 1,
-        onClick: p.transactions.length > 0 ? () => n(p) : void 0,
-        showDivider: !0
-      }, p.guid)),
-      /* @__PURE__ */ e(yo, {
-        component: "li",
-        in: i,
-        sx: { "&.MuiCollapse-root .MuiListItemButton-root": { paddingLeft: 24 } },
-        children: /* @__PURE__ */ e(He, { children: r.map((p, C) => {
-          const x = o.length + C;
-          return /* @__PURE__ */ e(Je, {
+    ) }) });
+  }
+), Je = A(
+  ({
+    totalAmount: t,
+    guid: n,
+    name: s,
+    transactions: o,
+    onClick: r,
+    isLastItem: c = !1,
+    showDivider: a = !0
+  }) => {
+    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(g.Fragment, { children: [
+      /* @__PURE__ */ e(
+        uo,
+        {
+          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
+        }
+      ),
+      a && /* @__PURE__ */ e(Ne, { component: "li", sx: { ml: c ? 24 : 68 } })
+    ] }, n);
+  }
+), 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 _ = () => {
+      f(!i), u(w.TRENDS_CLICK_VIEW_MORE, {
+        ...W
+      });
+    }, 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: x === h - 1,
+            isLastItem: y === h - 1,
             onClick: p.transactions.length > 0 ? () => n(p) : void 0,
             showDivider: !0
-          }, p.guid);
-        }) })
-      }),
-      r.length > 0 && /* @__PURE__ */ e(Oo, {
-        isExpanded: i,
-        onClick: _
-      })
-    ] })]
-  });
-}), Bo = ({ beats: t, onInsightCardClick: n }) => {
-  const { onEvent: r } = F(), { isMobile: o, isDesktop: a, isLargeDesktop: l } = Z(), { beatStore: s, endpoint: c, sessionToken: u } = Ge(), i = a || l, y = i || o ? 1 : 2, g = () => null, _ = (C) => {
-    n?.(C), r(w.TRENDS_CLICK_INSIGHT, W);
-  }, h = i ? 200 : 170, p = i ? 170 : 124;
-  return /* @__PURE__ */ e(ro, {
-    sx: { height: t.length > 0 ? h : p },
-    children: /* @__PURE__ */ e(Bt, {
-      areBeatsLoading: s.isLoading,
+          },
+          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: _ })
+      ] })
+    ] });
+  }
+), 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: a.isLoading,
       beats: t,
       cardStyle: "border",
-      endpoint: c,
+      endpoint: d,
       headerSx: { p: 0 },
-      logOutUser: g,
+      logOutUser: m,
       onCardClick: _,
       showCarouselControls: !0,
       showHeader: i,
@@ -1104,27 +1237,28 @@ var Do = m.memo(Io), Ze = ({ columns: t, onRowClick: n, parentCategory: r, rows:
       showWithMargin: !1,
       token: u,
       userHasFullInsightFeedBeats: !1,
-      visibleCardsCount: y
-    })
-  });
-}, Po = R(Bo), Vo = R(({ chartLabel: t, chartColor: n }) => {
-  const { onEvent: r } = F(), { categoryDetailsChartData: { monthlyAmounts: o, tooltipLabels: a } } = ye();
-  return /* @__PURE__ */ e(v, {
-    sx: {
-      pt: 12,
-      width: "100%"
-    },
-    children: /* @__PURE__ */ e(Oe, {
+      visibleCardsCount: f
+    }
+  ) });
+}, 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: [n],
       curveType: "bump",
-      customTooltipLabels: a,
+      customTooltipLabels: r,
       datasets: [o],
       height: 265,
       labels: [t],
-      markStyles: () => ({ stroke: n }),
+      markStyles: () => ({
+        stroke: n
+      }),
       onItemClick: () => {
-        r(w.TRENDS_CLICK_CHART, W);
+        s(w.TRENDS_CLICK_CHART, W);
       },
       showArea: !0,
       showAverage: !0,
@@ -1137,129 +1271,107 @@ var Do = m.memo(Io), Ze = ({ columns: t, onRowClick: n, parentCategory: r, rows:
       showYAxisTicks: !0,
       useCustomMark: !0,
       valueFormatterString: "0,0"
-    })
-  });
-}), zo = R(() => {
-  const t = J(), { is_mobile_webview: n } = at(), { isDesktop: r, isSmallTablet: o, isTablet: a } = Z(), { common: l, trends: s } = A(), { selectedCategoryData: c, selectedDateRangeMonthRange: u } = ye(), { sortedTransactions: i } = xe(), [y, g] = m.useState(null);
-  if (!c) return null;
-  const { guid: _, name: h, is_income: p, totalAmount: C } = c, x = Re(_, t), H = p ? s.income_label : s.spending_label, T = ` ${c.transactions.length === 1 ? s.transaction : s.transactions} (${c.transactions.length})`, L = m.useMemo(() => i.find((S) => S.guid === y), [y, i]), E = i.length > 0 && !n && (r || a && !o), N = (S) => S.category_guid === _ || S.top_level_category_guid === _;
-  return /* @__PURE__ */ f(v, {
-    sx: {
-      alignItems: "center",
-      height: "100%"
-    },
-    children: [
-      /* @__PURE__ */ f(v, {
-        sx: {
-          borderRadius: 0,
-          pb: 4,
-          pt: 16,
-          px: 12,
-          width: "100%"
-        },
-        children: [
-          /* @__PURE__ */ e(He, {
-            sx: { px: 12 },
-            children: /* @__PURE__ */ f(ut, { children: [
-              /* @__PURE__ */ e(io, { children: /* @__PURE__ */ e(De, { categoryGuid: _ }) }),
-              /* @__PURE__ */ e(ht, {
-                primary: h,
-                secondary: u,
-                slotProps: {
-                  primary: {
-                    component: "div",
-                    variant: "h3",
-                    fontSize: 18,
-                    fontWeight: 700
-                  },
-                  secondary: {
-                    component: "div",
-                    variant: "body2",
-                    fontSize: 13
-                  }
-                }
-              }),
-              /* @__PURE__ */ e(z, {
-                component: "div",
-                variant: "h3",
-                children: ie(Math.abs(C), "0,0.00")
-              })
-            ] })
-          }),
-          /* @__PURE__ */ e(Vo, {
-            chartColor: x,
-            chartLabel: H
-          }),
-          /* @__PURE__ */ f(v, {
-            alignItems: "center",
-            direction: "row",
-            justifyContent: "space-between",
-            sx: { mx: 12 },
-            children: [/* @__PURE__ */ e(z, {
-              bold: !0,
-              variant: "body1",
-              children: T
-            }), E && /* @__PURE__ */ e(Nt, { filter: N })]
-          })
-        ]
-      }),
-      /* @__PURE__ */ e(et, {
+    }
+  ) });
+}), 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: _, 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(
+          ht,
+          {
+            primary: h,
+            secondary: u,
+            slotProps: {
+              primary: { component: "div", variant: "h3", fontSize: 18, fontWeight: 700 },
+              secondary: { component: "div", variant: "body2", fontSize: 13 }
+            }
+          }
+        ),
+        /* @__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: N,
+        filter: E,
         height: "calc(100vh - 475px)",
-        onClick: g
-      }),
-      /* @__PURE__ */ e(We, {
-        ariaLabelClose: l.close_aria,
+        onClick: m
+      }
+    ),
+    /* @__PURE__ */ e(
+      Pe,
+      {
+        ariaLabelClose: c.close_aria,
         isOpen: !!L,
-        onClose: () => g(""),
-        title: s.transaction,
-        children: L && /* @__PURE__ */ e(ot, { transaction: L })
-      })
-    ]
-  });
-}), Fo = (t, n) => [nt(t, n), rt(t, n)].filter((r) => r.length > 0), $o = (t, n) => {
-  const [r, o] = t, a = r, l = o ?? r, s = [];
-  if (a) {
-    const c = a.reduce((u, i) => u + i.y, 0);
-    s.push({
-      label: n.income_label,
-      amount: c
-    });
+        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 d = r.reduce((u, i) => u + i.y, 0);
+    a.push({ label: n.income_label, amount: d });
   }
-  if (l) {
-    const c = l.reduce((u, i) => u + i.y, 0);
-    s.push({
-      label: n.spending_label,
-      amount: c
-    });
+  if (c) {
+    const d = c.reduce((u, i) => u + i.y, 0);
+    a.push({ label: n.spending_label, amount: d });
   }
-  return s;
-}, Ko = ({ availableHeight: t = 0, minHeight: n = 500, selectedDateRange: r, totals: o }) => {
-  const a = J(), { onEvent: l } = F(), { trends: s } = A(), { isSmallMobile: c, isMobile: u, isSmallTablet: i, isTablet: y } = Z(), g = [a.palette.chart?.chart1, a.palette.chart?.chart2], _ = Fo(o, r), h = $o(_, s), [p, C] = m.useState(0), x = 458, H = 195, T = 56, L = u || c ? H : i || y ? x : p;
-  return m.useEffect(() => {
-    C(Math.max(t - T, n));
-  }, [t]), /* @__PURE__ */ e(Oe, {
-    baseline: "min",
-    colors: g,
-    curveType: "bump",
-    datasets: _,
-    height: L,
-    labels: h,
-    onItemClick: () => {
-      l(w.TRENDS_CLICK_CHART, W);
-    },
-    showArea: !0,
-    showAxisHighlight: !0,
-    showLegend: !0,
-    showTooltip: !0,
-    showXAxis: !0,
-    showXAxisTicks: !0,
-    showYAxis: !0,
-    showYAxisTicks: !0,
-    valueFormatterString: "0.0a"
-  });
-}, jo = R(Ko), Yo = [
+  return a;
+}, Yo = ({
+  availableHeight: t = 0,
+  minHeight: n = 500,
+  selectedDateRange: s,
+  totals: o
+}) => {
+  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: L,
+      labels: h,
+      onItemClick: () => {
+        c(w.TRENDS_CLICK_CHART, W);
+      },
+      showArea: !0,
+      showAxisHighlight: !0,
+      showLegend: !0,
+      showTooltip: !0,
+      showXAxis: !0,
+      showXAxisTicks: !0,
+      showYAxis: !0,
+      showYAxisTicks: !0,
+      valueFormatterString: "0.0a"
+    }
+  );
+}, jo = A(Yo), Uo = [
   "BillAmountNotStandard",
   "CategorySpendingV2",
   "CostOfLivingToIncome",
@@ -1293,182 +1405,210 @@ var Do = m.memo(Io), Ze = ({ columns: t, onRowClick: n, parentCategory: r, rows:
   "WeeklyNewMerchantsV2",
   "WeeklyNoSpendDays",
   "WeeklySmallPurchasesSummary"
-], Uo = (t, n, r) => ({
+], 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 ? r : void 0,
+  onClickHandler: n ? s : void 0,
   primaryButton: n ? t.empty_state_primary : void 0
-}), Xo = ({ onBackClick: t, onMenuClick: n, onInsightCardClick: r, sx: o }) => {
-  const { onEvent: a } = F(), { config: l } = at(), { isDesktop: s, isLargeDesktop: c, isMobile: u } = Z(), { isAccountDataLoaded: i, loadAccountData: y, visibleAccounts: g } = we(), { categoriesLoaded: _, loadCategories: h, loadDateRangeCategoryTotals: p, loadMonthlyCategoryTotals: C, monthlyCategoryTotals: x, monthlyTotalsLoaded: H } = q(), { isTransactionDataLoaded: T, loadTransactionData: L, setFilter: E } = xe(), { selectedCategoryData: N, selectedDateRange: S, setSelectedCategoryData: $, setSelectedDateRange: le } = ye(), { isInitialized: K, selectedAccounts: Q, selectedAccountGuids: P } = fe(), { trends: V, connect: O } = A(), { beatStore: ee } = Ge(), ce = Rt() && l.show_insights_widget_in_master, j = s || c, [de, Y] = m.useState(!1), [te, ae] = m.useState(!1), [oe, ne] = m.useState("Chart"), [se, ue] = m.useState(""), [he, ge] = m.useState(window.innerHeight), I = j ? 56 : 0, G = he - 208, d = he - (ce ? 550 + I : 266), [b, D] = m.useState(!1), U = l.show_connections_widget_in_master;
-  Se({
+}), 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 Ce = m.useMemo(() => te ? ee.getFilteredBeats({ templates: Yo }) : [], [te]);
-  m.useEffect(() => {
-    const M = () => ge(window.innerHeight);
-    return window.addEventListener("resize", M), i || y().finally(), _ || h().finally(), T || L().finally(), () => window.removeEventListener("resize", M);
-  }, []), m.useEffect(() => {
-    K && i && (ee.loadBeats().finally(() => ae(!0)), p(Q, S.start, S.end).then(() => {
-      C(Q, S.start, S.end).finally();
+  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(() => {
-      Y(!0), a(w.TRENDS_LOAD_WIDGET, {
+      ne(!0), r(w.TRENDS_LOAD_WIDGET, {
         ...W,
-        time_period: `${Te(S.end, S.start)}M`
+        time_period: `${Se(v.end, v.start)}M`
       });
     }));
-  }, [
-    K,
-    i,
-    Q,
-    S
-  ]), m.useEffect(() => {
-    x.length !== 0 && E({
-      accounts: P,
-      dateRange: {
-        start: S.start,
-        end: S.end
-      },
-      custom: (M) => !!x.find((re) => re.top_level_category_guid === M.top_level_category_guid || re.category_guid === M.category_guid)
-    });
-  }, [x]);
-  const Le = (M) => {
-    $(M);
-  }, me = () => {
-    $(null), a(w.TRENDS_CLICK_BACK, W);
-  }, Ee = () => {
-    D(!0), a(w.TRENDS_CLICK_CONNECT_ACCOUNTS);
-  }, ft = (M, re) => {
-    ne(re ?? oe), a(w.TRENDS_CLICK_TOGGLE_VIEW, {
+  }, [Y, i, J, v]), g.useEffect(() => {
+    if (T.length !== 0) {
+      const k = {
+        accounts: P,
+        dateRange: { start: v.start, end: v.end }
+      };
+      M({
+        ...k,
+        custom: (oe) => !!T.find(
+          (ge) => ge.top_level_category_guid === oe.top_level_category_guid || ge.category_guid === oe.category_guid
+        )
+      });
+    }
+  }, [T]);
+  const he = (k) => {
+    K(k);
+  }, Me = () => {
+    K(null), r(w.TRENDS_CLICK_BACK, W);
+  }, Ae = () => {
+    z(!0), r(w.TRENDS_CLICK_CONNECT_ACCOUNTS);
+  }, Ct = (k, oe) => {
+    ue(oe ?? B), r(w.TRENDS_CLICK_TOGGLE_VIEW, {
       ...W,
-      toggleView: re
+      toggleView: oe
     });
-  }, Ct = (M) => {
-    const re = lt(M?.[0], 1), Ve = M?.[1], Tt = Te(Ve, re);
-    le({
-      start: re,
-      end: Ve
-    }), a(w.TRENDS_CLICK_TIME_WINDOW, {
+  }, _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: Tt + "M"
+      time_period: xt + "M"
     });
-  }, _t = (M) => {
-    a(w.TRENDS_CLICK_FILTER, {
+  }, bt = (k) => {
+    r(w.TRENDS_CLICK_FILTER, {
       ...W,
-      filterValue: M
+      filterValue: k
     });
-  }, bt = (M) => {
-    ue(M);
-  }, vt = () => {
-    ue(""), a(w.TRENDS_CLICK_ALL_CATEGORIES, W);
+  }, Tt = (k) => {
+    le(k);
+  }, St = () => {
+    le(""), r(w.TRENDS_CLICK_ALL_CATEGORIES, W);
   };
-  if (!K || !i || !de || !H) return /* @__PURE__ */ e(Ie, {});
-  const Pe = g.length === 0 || x.length === 0, _e = Uo(V, U, Ee);
-  return /* @__PURE__ */ f(tt, {
-    calendarActions: { onRangeChanged: Ct },
-    dateRange: S,
-    dateRangeVariant: u ? "timeframetabs" : "timeframebuttons",
-    onAccountsFilterClick: _t,
-    onBackClick: t,
-    onMenuClick: n,
-    sx: o,
-    title: V.title,
-    children: [/* @__PURE__ */ f(v, {
-      sx: { px: u ? 0 : 48 },
+  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(
+    ut,
+    {
+      calendarActions: { onRangeChanged: _t },
+      dateRange: v,
+      dateRangeVariant: u ? "timeframetabs" : "timeframebuttons",
+      onAccountsFilterClick: bt,
+      onBackClick: t,
+      onMenuClick: n,
+      sx: o,
+      title: V.title,
       children: [
-        /* @__PURE__ */ f(v, {
-          flexDirection: "row",
-          justifyContent: "space-between",
-          sx: {
-            px: u ? 16 : 0,
-            py: 16
-          },
-          children: [/* @__PURE__ */ e(pt, {
-            selectedCategoryGuid: se,
-            selectedDateRange: S
-          }), /* @__PURE__ */ e(mt, {
-            onTabChange: ft,
-            selectedTab: oe
-          })]
-        }),
-        /* @__PURE__ */ e(v, {
-          alignItems: "center",
-          flexDirection: "row",
-          sx: { pb: 8 },
-          width: "100%",
-          children: /* @__PURE__ */ e(k, {
-            flexGrow: 1,
-            children: se && /* @__PURE__ */ f(ve, {
-              onClick: vt,
-              sx: {
-                p: 0,
-                pr: 5
-              },
-              children: [/* @__PURE__ */ e(Ft, {}), V.all_categories]
-            })
-          })
-        }),
-        Pe && /* @__PURE__ */ e(Dt, {
-          header: _e.header,
-          icon: "multiline_chart",
-          onClick: _e.onClickHandler,
-          primaryButton: _e.primaryButton,
-          subText: _e.description,
-          sx: {
-            height: G,
-            maxWidth: 432
+        /* @__PURE__ */ C(
+          S,
+          {
+            sx: {
+              px: u ? 0 : 48
+            },
+            children: [
+              /* @__PURE__ */ C(
+                S,
+                {
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                  sx: { px: u ? 16 : 0, py: 16 },
+                  children: [
+                    /* @__PURE__ */ e(
+                      ft,
+                      {
+                        selectedCategoryGuid: se,
+                        selectedDateRange: v
+                      }
+                    ),
+                    /* @__PURE__ */ e(pt, { onTabChange: Ct, selectedTab: B })
+                  ]
+                }
+              ),
+              /* @__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
+              ] }) }) }),
+              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: l,
+                      minHeight: 450,
+                      selectedDateRange: v,
+                      totals: T
+                    }
+                  ) }),
+                  /* @__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(
+                      Bo,
+                      {
+                        availableHeight: b,
+                        onCategoryClick: he
+                      }
+                    )
+                  ] })
+                ] }),
+                B === "Table" && /* @__PURE__ */ e(H, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
+                  yt,
+                  {
+                    height: "unset",
+                    onClickRow: Tt,
+                    selectedCategory: se,
+                    selectedDateRange: v
+                  }
+                ) })
+              ] }),
+              /* @__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, {})
+                }
+              )
+            ]
           }
-        }),
-        !Pe && /* @__PURE__ */ f(v, {
-          flexDirection: j ? "row" : "column",
-          gap: j ? 48 : 16,
-          children: [oe === "Chart" && /* @__PURE__ */ f(Zt, { children: [/* @__PURE__ */ e(k, {
-            sx: { width: j ? "68%" : "100%" },
-            children: /* @__PURE__ */ e(jo, {
-              availableHeight: G,
-              minHeight: 450,
-              selectedDateRange: S,
-              totals: x
-            })
-          }), /* @__PURE__ */ f(v, {
-            gap: 16,
-            sx: { width: j ? "32%" : "100%" },
-            children: [ce && te && Ce.length > 0 && /* @__PURE__ */ e(Po, {
-              beats: Ce,
-              onInsightCardClick: r
-            }), /* @__PURE__ */ e(Go, {
-              availableHeight: d,
-              onCategoryClick: Le
-            })]
-          })] }), oe === "Table" && /* @__PURE__ */ e(k, {
-            sx: { width: "100%" },
-            children: /* @__PURE__ */ e(yt, {
-              height: "unset",
-              onClickRow: bt,
-              selectedCategory: se,
-              selectedDateRange: S
-            })
-          })]
-        }),
-        /* @__PURE__ */ e(We, {
-          ariaLabelClose: V.close_category_details,
-          isOpen: !!N,
-          onClose: me,
-          shouldShowHeaderShadow: !0,
-          title: N?.is_income ? V.category_income : V.category_spending,
-          children: N && /* @__PURE__ */ e(zo, {})
-        })
+        ),
+        /* @__PURE__ */ e(
+          yo,
+          {
+            onClose: () => z(!1),
+            showConnectWidget: I,
+            title: O.mini_title
+          }
+        )
       ]
-    }), /* @__PURE__ */ e(Lt, {
-      onClose: () => D(!1),
-      showConnectWidget: b,
-      title: O.mini_title
-    })]
-  });
-}, Vn = R(Xo);
+    }
+  );
+}, ls = A(Zo);
 export {
-  Gn as TrendsFullWidget,
-  Pn as TrendsMicroWidget,
-  Bn as TrendsMiniWidget,
-  Vn as TrendsWidget
+  rs as TrendsFullWidget,
+  is as TrendsMicroWidget,
+  as as TrendsMiniWidget,
+  ls as TrendsWidget
 };
+//# sourceMappingURL=index.es.js.map