@mx-cartographer/experiences 8.0.0-alpha.bb3 → 8.0.0-alpha.bb4

package/dist/trends/index.es.js

@@ -1,75 +1,439 @@
-import { jsx as e, jsxs as C, Fragment as Qe } from "react/jsx-runtime";
-import i from "react";
-import { observer as x } from "mobx-react-lite";
-import { Icon as ae, Text as Z, CategoryIcon as fe, P as U, H3 as xe, ChevronRightIcon as Je } from "@mxenabled/mxui";
-import O from "@mui/material/Box";
-import b from "@mui/material/Stack";
-import me from "@mui/material/Button";
-import { addSeconds as ve } from "date-fns/addSeconds";
-import { differenceInCalendarMonths as pe } from "date-fns/differenceInCalendarMonths";
-import { a as et, g as tt, S as nt, L as Me } from "../TrendsStore-DCYbpXPO.mjs";
-import { T as Co } from "../TrendsStore-DCYbpXPO.mjs";
-import { i as ot, c as st, d as rt, e as at, f as it, h as ct, b as Ae, g as Re, j as De } from "../SpendingData-D5vsfYKo.mjs";
-import lt from "@mui/material/ToggleButton";
-import dt from "@mui/material/ToggleButtonGroup";
-import { u as A, m as P, g as H, b as J, h as ie, d as ce, w as ee, f as Te, q as ht, n as ut, a as gt } from "../hooks-D6XlXHf4.mjs";
-import { u as $ } from "../useScreenSize-B6JyS_Lj.mjs";
-import { f as q, D as z } from "../Dialog-CWW597AF.mjs";
-import { DataGridPro as mt } from "@mui/x-data-grid-pro";
-import { C as pt } from "../CurrencyText-kyC1aseI.mjs";
-import { b as Ct } from "../Localization-2MODESHW.mjs";
-import { H as Ie } from "../HeaderCell-DjuifqHJ.mjs";
-import { T as M, b as ft } from "../ViewMoreMicroCard-SCn2wt4i.mjs";
-import { A as _, W as ke } from "../WidgetContainer-BHWANqT4.mjs";
-import { c as Tt } from "../Category-CevNQ03n.mjs";
-import { a as Ne, T as He } from "../TransactionDetails-oP1eSuiS.mjs";
-import { D as Ce } from "../Drawer-kEE73B87.mjs";
-import { L as Q } from "../Loader-DUaFpDGv.mjs";
-import { useTheme as We } from "@mui/material/styles";
-import { L as ye } from "../LineChart-D4GI7nVh.mjs";
-import { M as yt } from "../MiniWidgetContainer-D0gfmbaF.mjs";
-import { subMonths as _t } from "date-fns";
-import { TrendingUp as bt, TrendingDown as St, MultilineChart as wt, ExpandLess as Dt, ExpandMore as It } from "@mxenabled/mx-icons";
-import { a as Et, f as X } from "../NumberFormatting-Buh7u8Oi.mjs";
-import { M as Lt } from "../MicroWidgetContainer-DpeqN9n3.mjs";
-import xt from "@mui/material/Collapse";
-import vt from "@mui/material/List";
-import Mt from "@mui/material/ListItem";
-import At from "@mui/material/ListItemButton";
-import Rt from "@mui/material/ListItemIcon";
-import kt from "@mui/material/ListItemText";
-import Oe from "@mui/material/styles/useTheme";
-import Nt from "@mui/material/Divider";
-import { useTheme as Ht, Stack as Wt } from "@mui/material";
-import Ot from "@mui/material/Paper";
-import { b as Vt } from "../CategoryUtil-pZRIYOgN.mjs";
-import { E as Gt } from "../ExportCsvAction-sX8Rg4Ov.mjs";
-import { u as Bt } from "../useInsightsEnabled-DBpwEq10.mjs";
-import { E as zt } from "../EmptyState-DA_lfRBv.mjs";
-import { l as Pt } from "../ConnectDrawer-BQNs-hjk.mjs";
-const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
-  dt,
+import { jsxs as y, jsx as e, Fragment as lt } from "react/jsx-runtime";
+import c, { useRef as dt, useState as ut, useEffect as ht } from "react";
+import { observer as R } from "mobx-react-lite";
+import { CategoryIcon as we, Text as z, Icon as Se, P as pe, H3 as Pe } from "@mxenabled/mxui";
+import W from "@mui/material/Box";
+import S from "@mui/material/Stack";
+import xe from "@mui/material/Button";
+import { addSeconds as Fe } from "date-fns/addSeconds";
+import { differenceInCalendarMonths as Ae } from "date-fns/differenceInCalendarMonths";
+import { useTheme as ue } from "@mui/material/styles";
+import { LineChart as gt } from "@mui/x-charts";
+import { u as J } from "../useScreenSize-B5afALev.mjs";
+import { u as mt } from "../useDimensions-27p2evRx.mjs";
+import pt from "@mui/material/Card";
+import ft from "@mui/material/CardContent";
+import Re from "@mui/material/Divider";
+import We from "@mui/material/Grid";
+import { u as O, m as Y, g as P, b as ye, h as De, d as Le, w as Ce, q as ze, f as He, n as yt, a as Ct } from "../hooks-C41HAxM5.mjs";
+import { b as $e } from "../Localization-2MODESHW.mjs";
+import { C as ve } from "../CurrencyText-Dr0EZ7bp.mjs";
+import { useTheme as _t, Card as Tt, CardContent as bt, Box as St, Stack as xt } from "@mui/material";
+import { f as Q, a as F } from "../Dialog-CDV0kKxj.mjs";
+import { a as Me, c as vt } from "../Category-Ccoew_sA.mjs";
+import { f as oe, a as wt } from "../NumberFormatting-DjTD0t3W.mjs";
+import { a as Dt, g as Lt, L as Ke } from "../TrendsStore-_mRaFUdf.mjs";
+import { T as Pn } from "../TrendsStore-_mRaFUdf.mjs";
+import { i as Et, c as It, d as Mt, e as At, f as Rt, h as kt, g as je, b as Ye, j as Oe } from "../SpendingData-DPQ96k3x.mjs";
+import Ht from "@mui/material/ToggleButton";
+import Nt from "@mui/material/ToggleButtonGroup";
+import { DataGridPro as Wt } from "@mui/x-data-grid-pro";
+import { H as Ge } from "../HeaderCell-P8w6CmfO.mjs";
+import { T as V, b as Ot } from "../ViewMoreMicroCard-DAkyNRlD.mjs";
+import { A as w, W as Ue } from "../WidgetContainer-CDh9fjpR.mjs";
+import { a as Xe, T as Ze } from "../TransactionDetails-Bn0qY5Hw.mjs";
+import { D as ke } from "../Drawer-BF40nbsH.mjs";
+import { L as fe } from "../Loader-Ckqi9Rx6.mjs";
+import { L as Ne } from "../LineChart-C1PxNf7P.mjs";
+import { M as Gt } from "../MiniWidgetContainer-CKzf_Ira.mjs";
+import { subMonths as Bt } from "date-fns";
+import { TrendingUp as Vt, TrendingDown as Pt, MultilineChart as Ft, ExpandLess as zt, ExpandMore as $t, ChevronRight as Kt } from "@mxenabled/mx-icons";
+import { M as jt } from "../MicroWidgetContainer-BGpNl5ZS.mjs";
+import Yt from "@mui/material/Collapse";
+import Ut from "@mui/material/List";
+import Xt from "@mui/material/ListItem";
+import Zt from "@mui/material/ListItemButton";
+import qt from "@mui/material/ListItemIcon";
+import Qt from "@mui/material/ListItemText";
+import Jt from "@mui/material/Paper";
+import { b as eo } from "../CategoryUtil-DfVKKkRf.mjs";
+import { E as to } from "../ExportCsvAction-QhQK4_FU.mjs";
+import { u as oo } from "../useInsightsEnabled-CNjP5cfR.mjs";
+import { E as no } from "../EmptyState-DoxNUae-.mjs";
+import { l as so } from "../ConnectDrawer-DVp54lUH.mjs";
+const qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
+  const { categories: t } = O(), { getCategoryName: n } = Y(), s = n(o);
+  return /* @__PURE__ */ y(S, { alignItems: "center", direction: "column", gap: "8", justifyContent: "center", mb: 4, children: [
+    /* @__PURE__ */ e(
+      W,
+      {
+        "aria-label": $e(t.category_icon_label_aria, s),
+        mb: 4,
+        role: "img",
+        children: /* @__PURE__ */ e(we, { categoryGuid: a })
+      }
+    ),
+    /* @__PURE__ */ e(z, { variant: "body1", children: s })
+  ] });
+}, ao = ({
+  categoryGuids: { guid: o, topLevelGuid: a },
+  hoveredAreaData: t,
+  cursorPosition: n,
+  chartContainerRef: s
+}) => {
+  const l = ue(), m = dt(null), [h, i] = ut({ x: n.x, y: n.y });
+  if (ht(() => {
+    (() => {
+      const p = m.current, _ = s.current;
+      if (!p || !_) return;
+      const u = p.getBoundingClientRect(), C = _.getBoundingClientRect();
+      let b = n.x, g = n.y;
+      b + u.width * 2 > C.right ? b = n.x - u.width : b - u.width < C.left && (b = n.x), g + u.height * 2 > C.bottom && (g = n.y - u.height), i({ x: b, y: g });
+    })();
+  }, [n, s]), !t) return null;
+  const d = t.reduce((f, p) => f + p.y, 0);
+  return /* @__PURE__ */ e(
+    pt,
+    {
+      ref: m,
+      sx: {
+        position: "absolute",
+        top: h.y,
+        left: h.x,
+        width: 250,
+        pointerEvents: "none"
+      },
+      children: /* @__PURE__ */ y(ft, { children: [
+        /* @__PURE__ */ y(W, { alignItems: "center", display: "flex", flexDirection: "column", children: [
+          /* @__PURE__ */ e(qe, { categoryGuid: o, topLevelCategoryGuid: a }),
+          /* @__PURE__ */ e(z, { variant: "body2", children: `${t.length}-month total` }),
+          /* @__PURE__ */ e(ve, { amount: d, bold: !0, formatString: "0,0", variant: "body2" })
+        ] }),
+        /* @__PURE__ */ e(Re, { sx: { my: 16, width: "100%" } }),
+        /* @__PURE__ */ e(We, { container: !0, children: t.map((f, p) => /* @__PURE__ */ y(c.Fragment, { children: [
+          p > 0 && p % 3 === 0 && /* @__PURE__ */ e(Re, { sx: { my: 16, width: "100%" } }),
+          /* @__PURE__ */ e(We, { size: { xs: 4 }, children: /* @__PURE__ */ y(W, { alignItems: "center", display: "flex", flexDirection: "column", children: [
+            /* @__PURE__ */ e(z, { color: l.palette.text.secondary, variant: "caption", children: f.x }),
+            /* @__PURE__ */ e(
+              ve,
+              {
+                amount: f.y,
+                bold: !0,
+                formatString: "0,0",
+                variant: "body1"
+              }
+            )
+          ] }) })
+        ] }, p)) })
+      ] })
+    }
+  );
+}, ro = R(ao), io = ({
+  categoryGuids: { guid: o, topLevelGuid: a },
+  itemData: { dataIndex: t },
+  series: n,
+  xData: s
+}) => {
+  const l = _t(), m = n.data[t], h = s[t];
+  return m === void 0 || !h ? null : /* @__PURE__ */ e(Tt, { sx: { pt: 4, px: 8 }, children: /* @__PURE__ */ e(bt, { children: /* @__PURE__ */ y(St, { alignItems: "center", display: "flex", flexDirection: "column", children: [
+    /* @__PURE__ */ e(qe, { categoryGuid: o, topLevelCategoryGuid: a }),
+    /* @__PURE__ */ e(z, { color: l.palette.text.secondary, variant: "body2", children: Q(h, F.MONTH_SHORT_YEAR) }),
+    /* @__PURE__ */ e(ve, { amount: String(m), bold: !0, formatString: "0,0", variant: "body1" })
+  ] }) }) });
+}, co = ({
+  sx: o,
+  categoryGuids: a,
+  hoveredLegend: t,
+  legendRef: n,
+  onHoverLegend: s,
+  onClickLegend: l
+}) => {
+  const { isMobile: m } = J(), { getCategoryName: h } = Y();
+  return /* @__PURE__ */ e(
+    S,
+    {
+      direction: "row",
+      flexWrap: "wrap",
+      gap: m ? 2 : 6,
+      justifyContent: "start",
+      ref: n,
+      sx: o,
+      children: a.map(({ guid: i, top_level_guid: d }) => {
+        const f = t === i, p = Me[i], _ = Me[d], u = p ?? _ ?? Me.default, C = u + "33";
+        return /* @__PURE__ */ y(
+          xe,
+          {
+            onClick: () => l(i),
+            onMouseEnter: () => s(i),
+            onMouseLeave: () => s(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(
+                W,
+                {
+                  sx: {
+                    width: 16,
+                    height: 16,
+                    marginRight: m ? 5 : 10,
+                    borderRadius: "2px",
+                    backgroundColor: t ? f ? u : C : u
+                  }
+                }
+              ),
+              /* @__PURE__ */ e(z, { variant: "body1", children: h(i) })
+            ]
+          },
+          i
+        );
+      })
+    }
+  );
+}, lo = ({
+  onHoverArea: o,
+  onHoverPoint: a,
+  onHoverLegend: t,
+  onClickLegend: n,
+  stackedDatasets: s,
+  unstackedDatasets: l = [],
+  availableHeight: m = 0,
+  minimumHeight: h = 350
+}) => {
+  const i = ue(), { isMobile: d } = J(), [f, { height: p }] = mt(), _ = c.useRef(null), [u, C] = c.useState(0);
+  c.useEffect(() => {
+    const r = Math.max(m - p, h);
+    C(r);
+  }, [m, p]);
+  const [b, g] = c.useState(null), [v, E] = c.useState({
+    hoveredSeriesId: null,
+    hoveredAreaData: null,
+    isAreaHovered: !1,
+    cursorPos: { x: 0, y: 0 }
+  }), { hoveredSeriesId: I, hoveredAreaData: x, isAreaHovered: M, cursorPos: k } = v, A = M && I && x, G = !A, ee = [...s, ...l], ne = ee[0]?.dataset.length ?? 0, H = ee.flatMap((r) => r.dataset.map((T) => T.x)), he = ee.flatMap((r) => r.dataset.map((T) => T.y)), B = s[0]?.dataset?.map(
+    (r, T) => s.reduce((L, j) => L + j.dataset[T]?.y || 0, 0)
+  ) ?? [0], se = Math.max(...B), ae = Math.max(
+    ...l.flatMap((r) => r.dataset.map((T) => T.y))
+  ), $ = Math.floor(Math.min(...he) / 100) * 100, _e = Math.ceil(Math.max(se, ae) / 100) * 100, U = s.map((r, T) => ({
+    id: `stacked-${T}`,
+    guid: r.category_guid,
+    top_level_guid: r.top_level_category_guid,
+    area: !0,
+    color: s[T].category_color ?? i.palette.primary.main,
+    data: r.dataset.map((L) => L.y),
+    label: s[T].category_name,
+    stack: "total",
+    type: "line",
+    highlightScope: { highlight: "item" },
+    valueFormatter: (L) => oe(L, "0,0")
+  })), K = l.map((r, T) => ({
+    id: `unstacked-${T}`,
+    guid: r.category_guid,
+    top_level_guid: r.top_level_category_guid,
+    area: !1,
+    color: r.category_color,
+    data: r.dataset.map((L) => L.y),
+    label: r.category_name,
+    type: "line",
+    valueFormatter: (L) => oe(L, "0,0")
+  })), re = [...U, ...K], X = [
+    ...U.map(({ guid: r, top_level_guid: T }) => ({
+      guid: r,
+      top_level_guid: T
+    })),
+    ...K.map(({ guid: r, top_level_guid: T }) => ({
+      guid: r,
+      top_level_guid: T
+    }))
+  ], Z = (r) => {
+    const L = r.startsWith("stacked-") ? s[parseInt(r.split("-")[1])] : l[parseInt(r.split("-")[1])];
+    return {
+      guid: L?.category_guid,
+      topLevelGuid: L?.top_level_category_guid
+    };
+  }, te = (r) => {
+    g(r), t?.(r ?? "");
+  }, ie = (r) => {
+    n?.(r ?? "");
+  }, ge = () => {
+    const r = Z(String(I)).guid;
+    r && n?.(r);
+  }, ce = (r) => {
+    const T = String(r?.seriesId), L = Z(T).guid, j = re.find((de) => de.id === T), Te = j && r?.dataIndex !== void 0, Ee = j && r?.dataIndex === void 0;
+    if (Te)
+      E({
+        hoveredSeriesId: T,
+        hoveredAreaData: null,
+        isAreaHovered: !1,
+        cursorPos: k
+      }), a?.(L);
+    else if (Ee) {
+      const de = j?.data.map((be, Ie) => ({
+        x: H[Ie],
+        y: be
+      })) ?? [];
+      E({
+        hoveredSeriesId: T,
+        hoveredAreaData: de,
+        isAreaHovered: !0,
+        cursorPos: k
+      }), o?.(L);
+    } else
+      E({
+        hoveredSeriesId: null,
+        hoveredAreaData: null,
+        isAreaHovered: !1,
+        cursorPos: k
+      });
+  }, le = (r) => {
+    const T = r.currentTarget.getBoundingClientRect();
+    E((L) => ({
+      ...L,
+      cursorPos: {
+        x: r.clientX - T.left,
+        y: r.clientY - T.top
+      }
+    }));
+  }, D = {
+    p: 4,
+    "& .MuiBarLabel-root": {
+      fontSize: 10,
+      fontWeight: 600
+    },
+    "& .MuiAreaElement-root": {
+      opacity: 0.4,
+      transition: "opacity 0.3s ease"
+    },
+    "& .MuiAreaElement-root:hover": {
+      opacity: 1
+    },
+    '& [class*="MuiLineElement-series-unstacked-"]': {
+      strokeWidth: 3
+    },
+    ...b && U.reduce((r, T, L) => {
+      const j = `.MuiAreaElement-series-stacked-${L}`;
+      return r[j] = {
+        opacity: U[L].guid === b ? 0.9 : 0.2
+      }, r;
+    }, {})
+  };
+  return /* @__PURE__ */ e(
+    W,
+    {
+      onMouseMove: le,
+      ref: _,
+      sx: {
+        position: "relative",
+        touchAction: "pan-y",
+        "& svg": {
+          touchAction: "pan-y",
+          userSelect: "none"
+        },
+        "& .recharts-wrapper": {
+          touchAction: "pan-y"
+        }
+      },
+      children: /* @__PURE__ */ y(
+        S,
+        {
+          direction: { xs: "column", md: "column" },
+          spacing: { xs: 0, md: 4 },
+          sx: { width: "100%", position: "relative" },
+          children: [
+            /* @__PURE__ */ e(
+              gt,
+              {
+                height: u,
+                margin: { bottom: 50 },
+                onAreaClick: ge,
+                onHighlightChange: ce,
+                series: re,
+                skipAnimation: !0,
+                slotProps: {
+                  legend: {
+                    hidden: !0
+                  }
+                },
+                slots: {
+                  itemContent: (r) => G && I ? /* @__PURE__ */ e(
+                    io,
+                    {
+                      categoryGuids: Z(I),
+                      xData: H,
+                      ...r
+                    }
+                  ) : null
+                },
+                sx: D,
+                tooltip: {
+                  trigger: G ? "item" : "none"
+                },
+                xAxis: [
+                  {
+                    data: H,
+                    scaleType: "time",
+                    valueFormatter: (r) => Q(r, F.MONTH_SHORT_YEAR),
+                    tickNumber: ne
+                    // How many ticks to show on the x-axis
+                  }
+                ],
+                yAxis: [
+                  {
+                    min: $,
+                    max: _e || 100
+                  }
+                ]
+              }
+            ),
+            /* @__PURE__ */ e(
+              co,
+              {
+                categoryGuids: X,
+                hoveredLegend: b,
+                legendRef: f,
+                onClickLegend: ie,
+                onHoverLegend: te,
+                sx: { px: d ? 0 : 24 }
+              }
+            ),
+            A && /* @__PURE__ */ e(
+              ro,
+              {
+                categoryGuids: Z(I),
+                chartContainerRef: _,
+                cursorPosition: k,
+                hoveredAreaData: x.map((r) => ({
+                  ...r,
+                  x: Q(r.x, F.MONTH_SHORT_YEAR)
+                }))
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}, Qe = ({ selectedTab: o, onTabChange: a }) => /* @__PURE__ */ e(
+  Nt,
   {
     exclusive: !0,
-    onChange: o,
+    onChange: a,
     orientation: "horizontal",
-    value: t,
-    children: ["Chart", "Table"].map((n) => /* @__PURE__ */ e(lt, { color: "primary", sx: { width: 56 }, value: n, children: n === "Chart" ? /* @__PURE__ */ e(ae, { name: "table_chart_view" }) : /* @__PURE__ */ e(ae, { name: "format_list_bulleted" }) }, n))
+    value: o,
+    children: ["Chart", "Table"].map((t) => /* @__PURE__ */ e(Ht, { color: "primary", sx: { width: 56 }, value: t, children: t === "Chart" ? /* @__PURE__ */ e(Se, { name: "table_chart_view" }) : /* @__PURE__ */ e(Se, { name: "format_list_bulleted" }) }, t))
   }
-), Ge = ({ selectedDateRange: t, selectedCategoryGuid: o }) => {
-  const { trends: n } = A(), { isMobile: s, isDesktop: r } = $(), { getCategoryName: l } = P(), d = i.useMemo(() => {
-    const h = q(
-      t.start,
-      s ? z.MONTH_SHORT_YEAR : z.MONTH_YEAR
-    ), c = q(
-      t.end,
-      s ? z.MONTH_SHORT_YEAR : z.MONTH_YEAR
+), Je = ({ selectedDateRange: o, selectedCategoryGuid: a }) => {
+  const { trends: t } = O(), { isMobile: n, isDesktop: s } = J(), { getCategoryName: l } = Y(), m = c.useMemo(() => {
+    const h = Q(
+      o.start,
+      n ? F.MONTH_SHORT_YEAR : F.MONTH_YEAR
+    ), i = Q(
+      o.end,
+      n ? F.MONTH_SHORT_YEAR : F.MONTH_YEAR
     );
-    return `${h} - ${c}`;
-  }, [t, s]);
-  return /* @__PURE__ */ C(O, { sx: { mr: 10, minWidth: "60%" }, children: [
+    return `${h} - ${i}`;
+  }, [o, n]);
+  return /* @__PURE__ */ y(W, { sx: { mr: 10, minWidth: "60%" }, children: [
     /* @__PURE__ */ e(
-      Z,
+      z,
       {
         display: "block",
         fontWeight: 700,
@@ -78,272 +442,282 @@ const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
           overflow: "visible",
           textOverflow: "unset"
         },
-        variant: r ? "H3" : "Body",
-        children: l(o) || n.sub_title
+        variant: s ? "h3" : "body1",
+        children: l(a) || t.sub_title
       }
     ),
-    /* @__PURE__ */ e(Z, { variant: r ? "Body" : "Small", children: d })
+    /* @__PURE__ */ e(z, { variant: s ? "body1" : "body2", children: m })
   ] });
-}, Ft = (t) => {
-  const o = t.row[t.field];
-  return /* @__PURE__ */ e(b, { alignItems: "flex-end", tabIndex: t.tabIndex, children: /* @__PURE__ */ e(pt, { amount: o, variant: "Small" }) });
-}, Kt = ({ categoryGuid: t, topLevelCategoryGuid: o }) => {
-  const { getCategoryName: n } = P(), { categories: s } = A(), r = s.default_categories[t]?.replace(/&amp;/g, "&") ?? n(t);
-  return /* @__PURE__ */ C(b, { alignItems: "center", direction: "row", justifyContent: "center", children: [
+}, uo = (o) => {
+  const a = o.row[o.field];
+  return /* @__PURE__ */ e(S, { alignItems: "flex-end", tabIndex: o.tabIndex, children: /* @__PURE__ */ e(ve, { amount: a, variant: "body2" }) });
+}, ho = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
+  const { getCategoryName: t } = Y(), { categories: n } = O(), s = n.default_categories[o]?.replace(/&amp;/g, "&") ?? t(o);
+  return /* @__PURE__ */ y(S, { alignItems: "center", direction: "row", justifyContent: "center", children: [
     /* @__PURE__ */ e(
-      O,
+      W,
       {
-        "aria-label": Ct(s.category_icon_label_aria, r),
+        "aria-label": $e(n.category_icon_label_aria, s),
         role: "img",
-        children: /* @__PURE__ */ e(fe, { categoryGuid: o })
+        children: /* @__PURE__ */ e(we, { categoryGuid: a })
       }
     ),
-    /* @__PURE__ */ e(Z, { sx: { ml: 12, pb: 6 }, variant: "Small", children: r })
+    /* @__PURE__ */ e(z, { sx: { ml: 12, pb: 6 }, variant: "body2", children: s })
   ] });
-}, $t = (t) => /* @__PURE__ */ e(b, { alignItems: "center", direction: "row", height: "100%", width: "100%", children: /* @__PURE__ */ e(
-  Kt,
+}, go = (o) => /* @__PURE__ */ e(S, { alignItems: "center", direction: "row", height: "100%", width: "100%", children: /* @__PURE__ */ e(
+  ho,
   {
-    categoryGuid: t.row.category,
-    topLevelCategoryGuid: t.row.top_level_category_guid
+    categoryGuid: o.row.category,
+    topLevelCategoryGuid: o.row.top_level_category_guid
   }
-) }), jt = (t, o) => {
-  const n = [], s = new Date(t);
-  for (; s <= o; ) {
-    const r = q(s, z.MONTH);
-    n.push(r), s.setMonth(s.getMonth() + 1);
+) }), mo = (o, a) => {
+  const t = [], n = new Date(o);
+  for (; n <= a; ) {
+    const s = Q(n, F.MONTH);
+    t.push(s), n.setMonth(n.getMonth() + 1);
   }
-  return n;
-}, Be = ({
-  monthlyCategoryTotals: t,
-  selectedDateRange: o,
-  selectedCategory: n,
-  onClickRow: s,
-  height: r = "100dvh",
+  return t;
+}, et = ({
+  monthlyCategoryTotals: o,
+  selectedDateRange: a,
+  selectedCategory: t,
+  onClickRow: n,
+  height: s = "100dvh",
   sx: l = {}
 }) => {
-  const { onEvent: d } = H(), h = q(/* @__PURE__ */ new Date(), z.MONTH_SHORT), [c, u] = i.useState([
+  const { onEvent: m } = P(), h = Q(/* @__PURE__ */ new Date(), F.MONTH_SHORT), [i, d] = c.useState([
     { field: h, sort: "desc" }
-  ]), f = i.useMemo(() => jt(o.start, o.end), [o]), g = [
+  ]), f = c.useMemo(() => mo(a.start, a.end), [a]), p = [
     {
       field: "category",
       flex: 1,
       headerName: "Category",
       minWidth: 175,
-      renderHeader: Ie,
-      renderCell: $t,
+      renderHeader: Ge,
+      renderCell: go,
       sortable: !0,
       type: "string"
     },
     ...f.map(
-      (m) => ({
-        field: m,
+      (u) => ({
+        field: u,
         flex: 1,
-        headerName: m,
+        headerName: u,
         minWidth: 100,
-        renderHeader: Ie,
-        renderCell: Ft,
+        renderHeader: Ge,
+        renderCell: uo,
         align: "right",
         headerAlign: "right",
         sortable: !0,
         hideSortIcons: !1,
         type: "number",
-        sortComparator: et
+        sortComparator: Dt
       })
     )
-  ], T = i.useMemo(() => {
-    const m = t.filter(
-      (p) => !ot(p) && !st(p)
-    ), y = (n ? m.filter(
-      (p) => p.category_guid === n || p.top_level_category_guid === n
-    ) : m).reduce(
-      (p, E) => {
-        const { category_guid: w, top_level_category_guid: D, month: R, total: v, year: k } = E, N = n ? w : D;
-        p[N] || (p[N] = {
-          id: N,
-          category: N,
-          category_guid: w,
-          top_level_category_guid: D
+  ], _ = c.useMemo(() => {
+    const u = o.filter(
+      (g) => !Et(g) && !It(g)
+    ), b = (t ? u.filter(
+      (g) => g.category_guid === t || g.top_level_category_guid === t
+    ) : u).reduce(
+      (g, v) => {
+        const { category_guid: E, top_level_category_guid: I, month: x, total: M, year: k } = v, A = t ? E : I;
+        g[A] || (g[A] = {
+          id: A,
+          category: A,
+          category_guid: E,
+          top_level_category_guid: I
         });
-        const I = q(new Date(k, R - 1), z.MONTH_SHORT);
-        return p[N][I] || (p[N][I] = 0), p[N][I] = p[N][I] + Math.abs(v), p;
+        const G = Q(new Date(k, x - 1), F.MONTH_SHORT);
+        return g[A][G] || (g[A][G] = 0), g[A][G] = g[A][G] + Math.abs(M), g;
       },
       {}
     );
-    return Object.values(y);
-  }, [t, n]);
-  return /* @__PURE__ */ e(O, { sx: { height: r, width: "100%", overflowX: "auto", boxShadow: "none", ...l }, children: /* @__PURE__ */ e(
-    mt,
+    return Object.values(b);
+  }, [o, t]);
+  return /* @__PURE__ */ e(W, { sx: { height: s, width: "100%", overflowX: "auto", boxShadow: "none", ...l }, children: /* @__PURE__ */ e(
+    Wt,
     {
-      columns: g,
+      columns: p,
       disableColumnFilter: !0,
       disableColumnMenu: !0,
       hideFooter: !0,
-      initialState: { sorting: { sortModel: c } },
-      onRowClick: (m) => {
-        s?.(m.row.category), d(_.TRENDS_CLICK_LIST_ITEM, {
-          ...M,
-          listItem: Tt[m.row.category]
+      initialState: { sorting: { sortModel: i } },
+      onRowClick: (u) => {
+        n?.(u.row.category), m(w.TRENDS_CLICK_LIST_ITEM, {
+          ...V,
+          listItem: vt[u.row.category]
         });
       },
-      onSortModelChange: (m) => {
-        u(m), d(_.TRENDS_CLICK_TABLE_SORT, M);
+      onSortModelChange: (u) => {
+        d(u), m(w.TRENDS_CLICK_TABLE_SORT, V);
       },
-      rows: T,
+      rows: _,
       slotProps: { baseIconButton: { color: "secondary", sx: { ml: 8 } } },
-      sortModel: c,
+      sortModel: i,
       sortingOrder: ["asc", "desc"]
     }
   ) });
-}, Yt = {
+}, po = {
   title: "Transaction List"
-}, Ut = ({
-  categoryGuid: t,
-  dateRange: o,
-  isOpen: n,
-  onClose: s
+}, fo = ({
+  categoryGuid: o,
+  dateRange: a,
+  isOpen: t,
+  onClose: n
 }) => {
-  const { onEvent: r } = H(), { selectedAccountGuids: l } = J(), { common: d } = A(), { setFilter: h, sortedTransactions: c } = ie(), [u, f] = i.useState(""), g = i.useMemo(
-    () => c.find((m) => m.guid === u),
-    [u, c]
+  const { onEvent: s } = P(), { selectedAccountGuids: l } = ye(), { common: m } = O(), { setFilter: h, sortedTransactions: i } = De(), [d, f] = c.useState(""), p = c.useMemo(
+    () => i.find((u) => u.guid === d),
+    [d, i]
   );
-  i.useEffect(() => {
+  c.useEffect(() => {
     h({
       accounts: l,
-      dateRange: o,
-      custom: (m) => t === "" || t === m.category_guid || t === m.top_level_category_guid,
-      showSplits: !!t
+      dateRange: a,
+      custom: (u) => o === "" || o === u.category_guid || o === u.top_level_category_guid,
+      showSplits: !!o
     });
-  }, [l, t, o]), i.useEffect(() => r(_.TRENDS_VIEW_TRANSACTIONS), []);
-  const T = () => {
-    f(""), s();
+  }, [l, o, a]), c.useEffect(() => s(w.TRENDS_VIEW_TRANSACTIONS), []);
+  const _ = () => {
+    f(""), n();
   };
-  return /* @__PURE__ */ C(
-    Ce,
+  return /* @__PURE__ */ y(
+    ke,
     {
-      ariaLabelClose: d.close_aria,
-      isOpen: n,
-      onClose: T,
-      title: Yt.title,
+      ariaLabelClose: m.close_aria,
+      isOpen: t,
+      onClose: _,
+      title: po.title,
       children: [
-        g && /* @__PURE__ */ e(Ne, { transaction: g }),
-        !g && /* @__PURE__ */ e(He, { onClick: f })
+        p && /* @__PURE__ */ e(Xe, { transaction: p }),
+        !p && /* @__PURE__ */ e(Ze, { onClick: f })
       ]
     }
   );
-}, Xt = x(Ut), Zt = ({ onBackClick: t, sx: o }) => {
-  const { onEvent: n } = H(), { isDesktop: s, isTablet: r, isMobile: l } = $(), { visibleAccounts: d } = ce(), { loadMonthlyCategoryTotals: h, monthlyCategoryTotals: c, getCategoryName: u } = P(), { sortedTransactions: f } = ie(), { selectedDateRange: g, setSelectedDateRange: T } = ee(), { isCopyLoaded: m, isInitialized: a, selectedAccounts: y, setSelectedAccounts: p } = J(), { trends: E } = A(), [w, D] = i.useState(!1), [R, v] = i.useState(!1), [k, N] = i.useState("Chart"), [I, te] = i.useState(""), [ne, B] = i.useState(window.innerHeight), le = ne - (l ? 315 : 345);
-  i.useEffect(() => {
-    const S = () => B(window.innerHeight);
-    return window.addEventListener("resize", S), () => window.removeEventListener("resize", S);
-  }, []), i.useEffect(() => {
-    p(d);
-  }, [d]), i.useEffect(() => {
-    a && h(
-      y,
-      g.start,
-      g.end
+}, yo = R(fo), Co = ({ onBackClick: o, sx: a }) => {
+  const { onEvent: t } = P(), { isDesktop: n, isTablet: s, isMobile: l } = J(), { isAccountDataLoaded: m, loadAccountData: h, visibleAccounts: i } = Le(), {
+    categoriesLoaded: d,
+    loadCategories: f,
+    loadMonthlyCategoryTotals: p,
+    monthlyCategoryTotals: _,
+    getCategoryName: u
+  } = Y(), {
+    isTransactionDataLoaded: C,
+    loadTransactionData: b,
+    sortedTransactions: g
+  } = De(), { selectedDateRange: v, setSelectedDateRange: E } = Ce(), { isInitialized: I, selectedAccounts: x, setSelectedAccounts: M } = ye(), { trends: k } = O(), [A, G] = c.useState(!1), [ee, ne] = c.useState(!1), [H, he] = c.useState("Chart"), [B, se] = c.useState(""), [ae, $] = c.useState(window.innerHeight), U = ae - (l ? 315 : 345);
+  c.useEffect(() => {
+    const D = () => $(window.innerHeight);
+    return window.addEventListener("resize", D), m || h().finally(), d || f().finally(), C || b().finally(), () => window.removeEventListener("resize", D);
+  }, []), c.useEffect(() => {
+    M(i);
+  }, [i]), c.useEffect(() => {
+    I && p(
+      x,
+      v.start,
+      v.end
     ).finally(() => {
-      D(!0);
+      G(!0);
     });
-  }, [a, y, g]);
-  const F = i.useMemo(() => {
-    if (!w) return { stackedDatasets: [], unstackedDatasets: [] };
-    const S = tt(
-      c,
-      g.start,
-      g.end
-    ), W = I.length ? S.filter(
-      (V) => V.top_level_category_guid === I || V.category_guid === I
-    ) : rt(S);
+  }, [I, x, v]);
+  const K = c.useMemo(() => {
+    if (!A) return { stackedDatasets: [], unstackedDatasets: [] };
+    const D = Lt(
+      _,
+      v.start,
+      v.end
+    ), r = B.length ? D.filter(
+      (T) => T.top_level_category_guid === B || T.category_guid === B
+    ) : Mt(D);
     return {
-      stackedDatasets: W.filter(at),
-      unstackedDatasets: W.filter(it)
+      stackedDatasets: r.filter(Rt),
+      unstackedDatasets: r.filter(At)
     };
-  }, [c, I, g]), de = (S, W) => {
-    N(W ?? k), n(_.TRENDS_CLICK_TOGGLE_VIEW);
-  }, K = (S) => {
-    const W = ve(S?.[0], 1), V = S?.[1], ge = pe(V, W);
-    T({ start: W, end: V }), n(_.TRENDS_CLICK_TIME_WINDOW, {
-      time_period: ge + "M"
+  }, [_, B, v]), re = (D, r) => {
+    he(r ?? H), t(w.TRENDS_CLICK_TOGGLE_VIEW);
+  }, X = (D) => {
+    const r = Fe(D?.[0], 1), T = D?.[1], L = Ae(T, r);
+    E({ start: r, end: T }), t(w.TRENDS_CLICK_TIME_WINDOW, {
+      time_period: L + "M"
     });
-  }, he = () => {
-    n(_.TRENDS_CLICK_FILTER);
-  }, j = (S) => {
-    te(S);
-  }, oe = (S) => {
-    te(S), n(_.TRENDS_CLICK_LEGEND, { category: u(S) });
-  }, ue = (S) => {
-    n(_.TRENDS_HOVER_LEGEND, { category: u(S) });
-  }, se = (S) => {
-    n(_.TRENDS_HOVER_AREA, { category: S });
-  }, re = (S) => {
-    n(_.TRENDS_HOVER_POINT, { category: S });
+  }, Z = () => {
+    t(w.TRENDS_CLICK_FILTER);
+  }, te = (D) => {
+    se(D);
+  }, ie = (D) => {
+    se(D), t(w.TRENDS_CLICK_LEGEND, { category: u(D) });
+  }, ge = (D) => {
+    t(w.TRENDS_HOVER_LEGEND, { category: u(D) });
+  }, ce = (D) => {
+    t(w.TRENDS_HOVER_AREA, { category: D });
+  }, le = (D) => {
+    t(w.TRENDS_HOVER_POINT, { category: D });
   };
-  return !m || !a || !w ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ C(
-    ke,
+  return !I || !A ? /* @__PURE__ */ e(fe, {}) : /* @__PURE__ */ y(
+    Ue,
     {
-      accountOptions: d,
-      calendarActions: { onRangeChanged: K },
-      dateRange: g,
+      accountOptions: i,
+      calendarActions: { onRangeChanged: X },
+      dateRange: v,
       dateRangeVariant: "timeframebuttons",
-      onAccountsFilterClick: he,
-      onBackClick: t,
-      sx: o,
-      title: E.title,
+      onAccountsFilterClick: Z,
+      onBackClick: o,
+      sx: a,
+      title: k.title,
       children: [
-        /* @__PURE__ */ C(
-          b,
+        /* @__PURE__ */ y(
+          S,
           {
             sx: {
               // eslint-disable-next-line no-nested-ternary
-              px: s ? 48 : r ? 24 : 12
+              px: n ? 48 : s ? 24 : 12
             },
             children: [
-              /* @__PURE__ */ C(
-                b,
+              /* @__PURE__ */ y(
+                S,
                 {
                   flexDirection: "row",
                   justifyContent: "space-between",
                   sx: { pb: l ? 12 : 24, pt: l ? 24 : 48 },
                   children: [
                     /* @__PURE__ */ e(
-                      Ge,
+                      Je,
                       {
-                        selectedCategoryGuid: I,
-                        selectedDateRange: g
+                        selectedCategoryGuid: B,
+                        selectedDateRange: v
                       }
                     ),
-                    /* @__PURE__ */ e(Ve, { onTabChange: de, selectedTab: k })
+                    /* @__PURE__ */ e(Qe, { onTabChange: re, selectedTab: H })
                   ]
                 }
               ),
-              /* @__PURE__ */ C(b, { alignItems: "center", flexDirection: "row", width: "100%", children: [
-                /* @__PURE__ */ e(O, { flexGrow: 1, children: I && /* @__PURE__ */ C(me, { onClick: () => te(""), sx: { p: 0, pr: 5 }, children: [
-                  /* @__PURE__ */ e(ae, { name: "arrow_back" }),
-                  E.all_categories
+              /* @__PURE__ */ y(S, { alignItems: "center", flexDirection: "row", width: "100%", children: [
+                /* @__PURE__ */ e(W, { flexGrow: 1, children: B && /* @__PURE__ */ y(xe, { onClick: () => se(""), sx: { p: 0, pr: 5 }, children: [
+                  /* @__PURE__ */ e(Se, { name: "arrow_back" }),
+                  k.all_categories
                 ] }) }),
-                /* @__PURE__ */ e(me, { onClick: () => v(!0), sx: { px: 5 }, children: `${E.view_transactions} (${f.length})` })
+                /* @__PURE__ */ e(xe, { onClick: () => ne(!0), sx: { px: 5 }, children: `${k.view_transactions} (${g.length})` })
               ] }),
-              /* @__PURE__ */ C(O, { children: [
-                k === "Chart" && /* @__PURE__ */ e(
-                  nt,
+              /* @__PURE__ */ y(W, { children: [
+                H === "Chart" && /* @__PURE__ */ e(
+                  lo,
                   {
-                    availableHeight: le,
-                    onClickLegend: oe,
-                    onHoverArea: se,
-                    onHoverLegend: ue,
-                    onHoverPoint: re,
-                    stackedDatasets: F.stackedDatasets,
-                    unstackedDatasets: F.unstackedDatasets
+                    availableHeight: U,
+                    onClickLegend: ie,
+                    onHoverArea: ce,
+                    onHoverLegend: ge,
+                    onHoverPoint: le,
+                    stackedDatasets: K.stackedDatasets,
+                    unstackedDatasets: K.unstackedDatasets
                   }
                 ),
-                k === "Table" && /* @__PURE__ */ e(
-                  Be,
+                H === "Table" && /* @__PURE__ */ e(
+                  et,
                   {
-                    monthlyCategoryTotals: c,
-                    onClickRow: j,
-                    selectedCategory: I,
-                    selectedDateRange: g
+                    monthlyCategoryTotals: _,
+                    onClickRow: te,
+                    selectedCategory: B,
+                    selectedDateRange: v
                   }
                 )
               ] })
@@ -351,27 +725,27 @@ const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
           }
         ),
         /* @__PURE__ */ e(
-          Xt,
+          yo,
           {
-            categoryGuid: I,
-            dateRange: g,
-            isOpen: R,
-            onClose: () => v(!1)
+            categoryGuid: B,
+            dateRange: v,
+            isOpen: ee,
+            onClose: () => ne(!1)
           }
         )
       ]
     }
   );
-}, lo = x(Zt), qt = () => {
-  const t = We(), { monthlyCategoryTotals: o } = P(), { trends: n } = A(), s = ct(o);
+}, Nn = R(Co), _o = () => {
+  const { monthlyCategoryTotals: o } = Y(), { trends: a } = O(), t = ue(), { availableHeight: n = 300 } = ze(), s = kt(o);
   return /* @__PURE__ */ e(
-    ye,
+    Ne,
     {
       baseline: "min",
       colors: [t.palette.primary.main],
       datasets: [s],
-      height: 300,
-      labels: [n.spending_label],
+      height: n,
+      labels: [a.spending_label],
       showArea: !0,
       showAverage: !0,
       showLegend: !0,
@@ -380,37 +754,40 @@ const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
       valueFormatterString: "0,0"
     }
   );
-}, Qt = x(qt), Jt = ({ onPrimaryCtaClick: t, sx: o }) => {
-  const { visibleAccounts: n } = ce(), { loadMonthlyCategoryTotals: s, monthlyTotalsLoaded: r } = P(), { isInitialized: l } = Te(), { trends: d } = A(), { isCopyLoaded: h, selectedAccounts: c, setSelectedAccounts: u } = J();
-  return i.useEffect(() => {
-    u(n);
-  }, [n]), i.useEffect(() => {
-    l && s(c).finally();
-  }, [l, c]), !h || !l ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ e(
-    yt,
+}, To = R(_o), bo = ({ onPrimaryCtaClick: o, sx: a }) => {
+  const { isAccountDataLoaded: t, loadAccountData: n, visibleAccounts: s } = Le(), { loadMonthlyCategoryTotals: l, monthlyTotalsLoaded: m } = Y(), { isInitialized: h } = He(), { trends: i } = O(), { selectedAccounts: d, setSelectedAccounts: f } = ye();
+  return c.useEffect(() => {
+    t || n().finally();
+  }, []), c.useEffect(() => {
+    f(s);
+  }, [s]), c.useEffect(() => {
+    h && l(d).finally();
+  }, [h, d]), h ? /* @__PURE__ */ e(
+    Gt,
     {
-      onPrimaryCtaClick: t,
-      primaryCtaLabel: d.primary_cta,
-      subTitle: d.sub_title,
-      sx: o,
-      title: d.mini_title,
-      children: r ? /* @__PURE__ */ e(Qt, {}) : /* @__PURE__ */ e(Q, {})
+      contentStyles: { height: "calc(100% - 72px)", ":last-child": { pb: 0 } },
+      onPrimaryCtaClick: o,
+      primaryCtaLabel: i.primary_cta,
+      subTitle: i.sub_title,
+      sx: { height: "100%", ...a },
+      title: i.mini_title,
+      children: m ? /* @__PURE__ */ e(To, {}) : /* @__PURE__ */ e(fe, {})
     }
-  );
-}, ho = x(Jt), en = 70, Ee = ({
-  title: t,
-  totalAmount: o,
-  transactionType: n,
-  percentage: s,
-  secondaryLabel: r,
+  ) : /* @__PURE__ */ e(fe, {});
+}, Wn = R(bo), So = 70, Be = ({
+  title: o,
+  totalAmount: a,
+  transactionType: t,
+  percentage: n,
+  secondaryLabel: s,
   shouldDisplayPercentage: l
 }) => {
-  const { availableWidth: d } = ht(), h = i.useRef(null), c = i.useRef(null), u = Et(Number(Math.abs(s)), {
+  const { availableWidth: m } = ze(), h = c.useRef(null), i = c.useRef(null), d = wt(Number(Math.abs(n)), {
     style: "percent",
     minimumIntegerDigits: 1
-  }), f = d === 288 && X(o, "0,0.00").length > 10 ? X(o, "0,0") : X(o, "0,0.00"), g = n === "spending" ? s > 0 : s >= 0, T = n === "spending" ? "error.main" : "success.main", m = n === "spending" ? "success.main" : "text.secondary", a = h?.current, y = c?.current, p = a && y ? a.scrollWidth > y.clientWidth - en : !1;
-  return /* @__PURE__ */ C(
-    b,
+  }), f = m === 288 && oe(a, "0,0.00").length > 10 ? oe(a, "0,0") : oe(a, "0,0.00"), p = t === "spending" ? n > 0 : n >= 0, _ = t === "spending" ? "error.main" : "success.main", u = t === "spending" ? "success.main" : "text.secondary", C = h?.current, b = i?.current, g = C && b ? C.scrollWidth > b.clientWidth - So : !1;
+  return /* @__PURE__ */ y(
+    S,
     {
       sx: {
         border: 1,
@@ -422,8 +799,8 @@ const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
         py: 8
       },
       children: [
-        /* @__PURE__ */ C(
-          b,
+        /* @__PURE__ */ y(
+          S,
           {
             sx: {
               alignItems: "center",
@@ -431,28 +808,28 @@ const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
               justifyContent: "space-between"
             },
             children: [
-              /* @__PURE__ */ e(U, { color: "text.secondary", variant: "caption", children: t }),
-              l && /* @__PURE__ */ C(b, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
-                g ? /* @__PURE__ */ e(bt, { size: 20, sx: { color: T } }) : /* @__PURE__ */ e(St, { size: 20, sx: { color: m } }),
+              /* @__PURE__ */ e(pe, { color: "text.secondary", variant: "caption", children: o }),
+              l && /* @__PURE__ */ y(S, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
+                p ? /* @__PURE__ */ e(Vt, { size: 20, sx: { color: _ } }) : /* @__PURE__ */ e(Pt, { size: 20, sx: { color: u } }),
                 /* @__PURE__ */ e(
-                  U,
+                  pe,
                   {
                     sx: {
-                      color: g ? T : m,
+                      color: p ? _ : u,
                       fontWeight: 600
                     },
                     variant: "body2",
-                    children: u
+                    children: d
                   }
                 )
               ] })
             ]
           }
         ),
-        /* @__PURE__ */ C(
-          b,
+        /* @__PURE__ */ y(
+          S,
           {
-            ref: c,
+            ref: i,
             sx: {
               alignItems: "center",
               flexDirection: "row",
@@ -460,19 +837,19 @@ const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
             },
             children: [
               /* @__PURE__ */ e(
-                O,
+                W,
                 {
                   ref: h,
                   sx: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
-                  children: /* @__PURE__ */ e(xe, { children: f })
+                  children: /* @__PURE__ */ e(Pe, { children: f })
                 }
               ),
-              l && d >= 450 && !p && /* @__PURE__ */ e(
-                U,
+              l && m >= 450 && !g && /* @__PURE__ */ e(
+                pe,
                 {
-                  color: g ? T : m,
+                  color: p ? _ : u,
                   variant: "caption",
-                  children: r
+                  children: s
                 }
               )
             ]
@@ -481,50 +858,54 @@ const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
       ]
     }
   );
-}, tn = x(() => {
-  const { trends: t } = A();
-  return /* @__PURE__ */ C(b, { sx: { alignItems: "start", flexDirection: "row", gap: 12 }, children: [
-    /* @__PURE__ */ e(wt, { size: 32 }),
-    /* @__PURE__ */ C(b, { children: [
-      /* @__PURE__ */ e(U, { fontWeight: 600, variant: "body1", children: t.zero_state_content_header }),
-      /* @__PURE__ */ e(U, { color: "text.secondary", variant: "subtitle2", children: t.zero_state_content_description })
+}, xo = R(() => {
+  const { trends: o } = O();
+  return /* @__PURE__ */ y(S, { sx: { alignItems: "start", flexDirection: "row", gap: 12 }, children: [
+    /* @__PURE__ */ e(Ft, { size: 32 }),
+    /* @__PURE__ */ y(S, { children: [
+      /* @__PURE__ */ e(pe, { fontWeight: 600, variant: "body1", children: o.zero_state_content_header }),
+      /* @__PURE__ */ e(pe, { color: "text.secondary", variant: "subtitle2", children: o.zero_state_content_description })
     ] })
   ] });
-}), uo = x(({ onCtaClick: t }) => {
-  const { visibleAccounts: o } = ce(), { onEvent: n } = H(), { monthlyCategoryTotals: s, loadMonthlyCategoryTotals: r, monthlyTotalsLoaded: l } = P(), d = {
-    start: _t(/* @__PURE__ */ new Date(), 1),
+}), On = R(({ onCtaClick: o }) => {
+  const { isAccountDataLoaded: a, loadAccountData: t, visibleAccounts: n } = Le();
+  c.useEffect(() => {
+    a || t().finally();
+  }, []);
+  const { onEvent: s } = P(), { monthlyCategoryTotals: l, loadMonthlyCategoryTotals: m, monthlyTotalsLoaded: h } = Y(), i = {
+    start: Bt(/* @__PURE__ */ new Date(), 1),
     end: /* @__PURE__ */ new Date()
-  }, { trends: h } = A(), { selectedAccounts: c, setSelectedAccounts: u, isInitialized: f } = J();
-  i.useEffect(() => {
-    u(o);
-  }, [o]), i.useEffect(() => {
-    f && r(c, d.start).then(() => {
-      n(_.TRENDS_LOAD_WIDGET, {
-        state: o?.length ? "default" : "zeroState"
+  }, { trends: d } = O(), { selectedAccounts: f, setSelectedAccounts: p, isInitialized: _ } = ye();
+  c.useEffect(() => {
+    p(n);
+  }, [n]), c.useEffect(() => {
+    _ && m(f, i.start).then(() => {
+      s(w.TRENDS_LOAD_WIDGET, {
+        state: n?.length ? "default" : "zeroState"
       });
     });
-  }, [f, c]);
-  const { spendingData: g, incomeData: T } = i.useMemo(
+  }, [_, f]);
+  const { spendingData: u, incomeData: C } = c.useMemo(
     () => ({
-      spendingData: Ae(s, d),
-      incomeData: Re(s, d)
+      spendingData: Ye(l, i),
+      incomeData: je(l, i)
     }),
-    [s, d]
-  ), [m, a] = g, [y, p] = T, E = De(a.y, m.y), w = De(p.y, y.y), D = f && !o?.length, R = () => {
-    n(
-      D ? _.TRENDS_CLICK_GET_STARTED : _.TRENDS_CLICK_VIEW_MORE
-    ), t();
+    [l, i]
+  ), [b, g] = u, [v, E] = C, I = Oe(g.y, b.y), x = Oe(E.y, v.y), M = _ && !n?.length, k = () => {
+    s(
+      M ? w.TRENDS_CLICK_GET_STARTED : w.TRENDS_CLICK_VIEW_MORE
+    ), o();
   };
-  return !l || !f ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ e(
-    Lt,
+  return !h || !_ ? /* @__PURE__ */ e(fe, {}) : /* @__PURE__ */ e(
+    jt,
     {
       className: "mx-trends-microwidget",
-      ctaLabel: h.micro_primary_cta_label,
-      onCTAClick: R,
-      subHeader: D ? void 0 : h.micro_subheader,
-      title: h.title,
-      children: D ? /* @__PURE__ */ e(tn, {}) : /* @__PURE__ */ C(
-        b,
+      ctaLabel: d.micro_primary_cta_label,
+      onCTAClick: k,
+      subHeader: M ? void 0 : d.micro_subheader,
+      title: d.title,
+      children: M ? /* @__PURE__ */ e(xo, {}) : /* @__PURE__ */ y(
+        S,
         {
           sx: {
             alignItems: "stretch",
@@ -533,24 +914,24 @@ const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
           },
           children: [
             /* @__PURE__ */ e(
-              Ee,
+              Be,
               {
-                percentage: E,
-                secondaryLabel: h.micro_secondary_label,
-                shouldDisplayPercentage: a.y !== 0 && m.y !== 0,
-                title: h.spending_label,
-                totalAmount: a.y,
+                percentage: I,
+                secondaryLabel: d.micro_secondary_label,
+                shouldDisplayPercentage: g.y !== 0 && b.y !== 0,
+                title: d.spending_label,
+                totalAmount: g.y,
                 transactionType: "spending"
               }
             ),
             /* @__PURE__ */ e(
-              Ee,
+              Be,
               {
-                percentage: w,
-                secondaryLabel: h.micro_secondary_label,
-                shouldDisplayPercentage: p.y !== 0 && y.y !== 0,
-                title: h.income_label,
-                totalAmount: p.y,
+                percentage: x,
+                secondaryLabel: d.micro_secondary_label,
+                shouldDisplayPercentage: E.y !== 0 && v.y !== 0,
+                title: d.income_label,
+                totalAmount: E.y,
                 transactionType: "income"
               }
             )
@@ -559,21 +940,21 @@ const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
       )
     }
   );
-}), nn = x(
-  ({ isExpanded: t, onClick: o }) => {
-    const n = Oe();
-    return /* @__PURE__ */ e(Mt, { sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(At, { onClick: o, sx: { justifyContent: "center" }, children: /* @__PURE__ */ C(
-      b,
+}), vo = R(
+  ({ isExpanded: o, onClick: a }) => {
+    const t = ue();
+    return /* @__PURE__ */ e(Xt, { sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(Zt, { onClick: a, sx: { justifyContent: "center" }, children: /* @__PURE__ */ y(
+      S,
       {
-        sx: { color: n.palette.primary.main, flexDirection: "row", alignItems: "center" },
+        sx: { color: t.palette.primary.main, flexDirection: "row", alignItems: "center" },
         children: [
-          /* @__PURE__ */ e(kt, { children: /* @__PURE__ */ e(Z, { bold: !0, variant: "body2", children: t ? "View less" : "View more" }) }),
-          /* @__PURE__ */ e(Rt, { sx: { color: n.palette.primary.main }, children: t ? /* @__PURE__ */ e(Dt, {}) : /* @__PURE__ */ e(
-            It,
+          /* @__PURE__ */ e(Qt, { children: /* @__PURE__ */ e(z, { bold: !0, variant: "body2", children: o ? "View less" : "View more" }) }),
+          /* @__PURE__ */ e(qt, { sx: { color: t.palette.primary.main }, children: o ? /* @__PURE__ */ e(zt, {}) : /* @__PURE__ */ e(
+            $t,
             {
               sx: {
                 transition: "transform 0.3s ease-in-out",
-                transform: t ? "rotate(180deg)" : "rotate(0deg)"
+                transform: o ? "rotate(180deg)" : "rotate(0deg)"
               }
             }
           ) })
@@ -581,129 +962,128 @@ const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
       }
     ) }) });
   }
-), Le = x(
+), Ve = R(
   ({
-    totalAmount: t,
-    guid: o,
-    name: n,
-    transactions: s,
-    onClick: r,
+    totalAmount: o,
+    guid: a,
+    name: t,
+    transactions: n,
+    onClick: s,
     isLastItem: l = !1,
-    showDivider: d = !0
+    showDivider: m = !0
   }) => {
-    const { trends: h } = A(), { onEvent: c } = H(), u = `${s.length} ${s.length === 1 ? h.transaction : h.transactions}`, f = () => {
-      r?.(), c(_.TRENDS_CLICK_LIST_ITEM, {
-        ...M,
-        listItem: n
+    const { trends: h } = O(), { onEvent: i } = P(), d = `${n.length} ${n.length === 1 ? h.transaction : h.transactions}`, f = () => {
+      s?.(), i(w.TRENDS_CLICK_LIST_ITEM, {
+        ...V,
+        listItem: t
       });
     };
-    return /* @__PURE__ */ C(i.Fragment, { children: [
+    return /* @__PURE__ */ y(c.Fragment, { children: [
       /* @__PURE__ */ e(
-        Me,
+        Ke,
         {
-          leftIcon: o ? /* @__PURE__ */ e(fe, { categoryGuid: o }) : void 0,
+          leftIcon: a ? /* @__PURE__ */ e(we, { categoryGuid: a }) : void 0,
           onClick: f,
-          rightContent: X(Math.abs(t), "0,0.00"),
-          rightIcon: r ? /* @__PURE__ */ e(Je, {}) : void 0,
-          subtitle: u,
-          title: n
+          rightContent: oe(Math.abs(o), "0,0.00"),
+          rightIcon: s ? /* @__PURE__ */ e(Kt, {}) : void 0,
+          subtitle: d,
+          title: t
         }
       ),
-      d && /* @__PURE__ */ e(Nt, { sx: { ml: l ? 24 : 68 } })
-    ] }, o);
+      m && /* @__PURE__ */ e(Re, { sx: { ml: l ? 24 : 68 } })
+    ] }, a);
   }
-), on = x(
-  ({ availableHeight: t = 0, onCategoryClick: o }) => {
-    const { collapsedCategories: n, visibleCategories: s, setVisibleListLength: r } = ee(), { isLargeDesktop: l, isDesktop: d } = $(), { trends: h } = A(), { onEvent: c } = H(), [u, f] = i.useState(!1), g = d || l;
-    i.useEffect(() => {
-      const a = Math.floor(t / 64) - 1, y = s.length + n.length;
-      a !== s.length && (r(g ? Math.max(a, 5) : 5), f(a >= y));
-    }, [t]);
-    const T = () => {
-      f(!u), c(_.TRENDS_CLICK_VIEW_MORE, {
-        ...M
+), wo = R(
+  ({ availableHeight: o = 0, onCategoryClick: a }) => {
+    const { collapsedCategories: t, visibleCategories: n, setVisibleListLength: s } = Ce(), { isLargeDesktop: l, isDesktop: m } = J(), { trends: h } = O(), { onEvent: i } = P(), [d, f] = c.useState(!1), p = m || l;
+    c.useEffect(() => {
+      const C = Math.floor(o / 64) - 1, b = n.length + t.length;
+      C !== n.length && (s(p ? Math.max(C, 5) : 5), f(C >= b));
+    }, [o]);
+    const _ = () => {
+      f(!d), i(w.TRENDS_CLICK_VIEW_MORE, {
+        ...V
       });
-    }, m = s.length + (u ? n.length : 0);
-    return /* @__PURE__ */ e(b, { sx: { bgColor: "background.paper", width: "100%" }, children: /* @__PURE__ */ C(vt, { children: [
-      /* @__PURE__ */ e(b, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(xe, { children: h.categories }) }),
-      s.map((a, y) => /* @__PURE__ */ e(
-        Le,
+    }, u = n.length + (d ? t.length : 0);
+    return /* @__PURE__ */ e(S, { sx: { bgColor: "background.paper", width: "100%" }, children: /* @__PURE__ */ y(Ut, { children: [
+      /* @__PURE__ */ e(S, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(Pe, { children: h.categories }) }),
+      n.map((C, b) => /* @__PURE__ */ e(
+        Ve,
         {
-          ...a,
-          isLastItem: y === m - 1,
-          onClick: a.transactions.length > 0 ? () => o(a) : void 0,
+          ...C,
+          isLastItem: b === u - 1,
+          onClick: C.transactions.length > 0 ? () => a(C) : void 0,
           showDivider: !0
         },
-        a.guid
+        C.guid
       )),
       /* @__PURE__ */ e(
-        xt,
+        Yt,
         {
-          in: u,
+          in: d,
           sx: { "&.MuiCollapse-root .MuiListItemButton-root": { paddingLeft: 24 } },
-          children: n.map((a, y) => {
-            const p = s.length + y;
+          children: t.map((C, b) => {
+            const g = n.length + b;
             return /* @__PURE__ */ e(
-              Le,
+              Ve,
               {
-                ...a,
-                isLastItem: p === m - 1,
-                onClick: a.transactions.length > 0 ? () => o(a) : void 0,
+                ...C,
+                isLastItem: g === u - 1,
+                onClick: C.transactions.length > 0 ? () => a(C) : void 0,
                 showDivider: !0
               },
-              a.guid
+              C.guid
             );
           })
         }
       ),
-      n.length > 0 && /* @__PURE__ */ e(nn, { isExpanded: u, onClick: T })
+      t.length > 0 && /* @__PURE__ */ e(vo, { isExpanded: d, onClick: _ })
     ] }) });
   }
-), sn = ({ beats: t, onInsightCardClick: o }) => {
-  const n = Ht(), { onEvent: s } = H(), { isMobile: r, isDesktop: l, isLargeDesktop: d } = $(), { beatStore: h, endpoint: c, sessionToken: u } = Te(), f = n.palette.mode === "dark", g = l || d, T = g || r ? 1 : 2, m = () => null, a = (R) => {
-    o?.(R), s(_.TRENDS_CLICK_INSIGHT, M);
-  }, y = g ? 200 : 170, p = g ? 170 : 124, E = g ? 56 : 0, w = t.length > 0 ? y + E : p, D = g && t.length > 0 ? y : void 0;
-  return /* @__PURE__ */ e(Wt, { sx: { height: w }, children: /* @__PURE__ */ e(
-    ft,
+), Do = ({ beats: o, onInsightCardClick: a }) => {
+  const { onEvent: t } = P(), { isMobile: n, isDesktop: s, isLargeDesktop: l } = J(), { beatStore: m, endpoint: h, sessionToken: i } = He(), d = s || l, f = d || n ? 1 : 2, p = () => null, _ = (E) => {
+    a?.(E), t(w.TRENDS_CLICK_INSIGHT, V);
+  }, u = d ? 200 : 170, C = d ? 170 : 124, b = d ? 56 : 0, g = o.length > 0 ? u + b : C, v = d && o.length > 0 ? u : void 0;
+  return /* @__PURE__ */ e(xt, { sx: { height: g }, children: /* @__PURE__ */ e(
+    Ot,
     {
-      areBeatsLoading: h.isLoading,
-      beats: t,
-      endpoint: c,
-      heightOverrides: D,
-      logOutUser: m,
-      onCardClick: a,
+      areBeatsLoading: m.isLoading,
+      beats: o,
+      endpoint: h,
+      heightOverrides: v,
+      logOutUser: p,
+      onCardClick: _,
       showBorder: !0,
       showCTAColocatedWithText: !1,
       showCarouselControls: !0,
-      showHeader: g,
+      showHeader: d,
       showIcon: !0,
       showWithMargin: !1,
-      token: u,
-      useDarkMode: f,
+      token: i,
       userHasFullInsightFeedBeats: !1,
       variant: "outlined",
-      visibleCardsCount: T
+      visibleCardsCount: f
     }
   ) });
-}, rn = x(sn), an = x(({ chartLabel: t, chartColor: o }) => {
-  const { onEvent: n } = H(), {
-    categoryDetailsChartData: { monthlyAmounts: s, tooltipLabels: r }
-  } = ee();
-  return /* @__PURE__ */ e(b, { sx: { pt: 12, width: "100%" }, children: /* @__PURE__ */ e(
-    ye,
+}, Lo = R(Do), Eo = R(({ chartLabel: o, chartColor: a }) => {
+  const { onEvent: t } = P(), {
+    categoryDetailsChartData: { monthlyAmounts: n, tooltipLabels: s }
+  } = Ce();
+  return /* @__PURE__ */ e(S, { sx: { pt: 12, width: "100%" }, children: /* @__PURE__ */ e(
+    Ne,
     {
       baseline: "min",
-      colors: [o],
+      colors: [a],
       curveType: "bump",
-      customTooltipLabels: r,
-      datasets: [s],
+      customTooltipLabels: s,
+      datasets: [n],
       height: 265,
-      labels: [t],
+      labels: [o],
       markStyles: () => ({
-        stroke: o
+        stroke: a
       }),
       onItemClick: () => {
-        n(_.TRENDS_CLICK_CHART, M);
+        t(w.TRENDS_CLICK_CHART, V);
       },
       showArea: !0,
       showAverage: !0,
@@ -718,100 +1098,100 @@ const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
       valueFormatterString: "0,0"
     }
   ) });
-}), cn = x(({ onClose: t }) => {
-  const o = Oe(), { onEvent: n } = H(), { common: s, trends: r } = A(), { selectedCategoryData: l, selectedDateRangeMonthRange: d } = ee(), { sortedTransactions: h } = ie(), [c, u] = i.useState(null);
+}), Io = R(({ onClose: o }) => {
+  const a = ue(), { onEvent: t } = P(), { common: n, trends: s } = O(), { selectedCategoryData: l, selectedDateRangeMonthRange: m } = Ce(), { sortedTransactions: h } = De(), [i, d] = c.useState(null);
   if (!l)
     return null;
-  const { guid: f, name: g, is_income: T, totalAmount: m } = l, a = T ? r.category_income : r.category_spending, y = Vt(f, o), p = T ? r.income_label : r.spending_label, E = ` ${l.transactions.length === 1 ? r.transaction : r.transactions} (${l.transactions.length})`, w = i.useMemo(
-    () => h.find((v) => v.guid === c),
-    [c, h]
-  ), D = (v) => v.category_guid === f || v.top_level_category_guid === f, R = () => {
-    t?.(), n(_.TRENDS_CLICK_BACK, M);
+  const { guid: f, name: p, is_income: _, totalAmount: u } = l, C = _ ? s.category_income : s.category_spending, b = eo(f, a), g = _ ? s.income_label : s.spending_label, v = ` ${l.transactions.length === 1 ? s.transaction : s.transactions} (${l.transactions.length})`, E = c.useMemo(
+    () => h.find((M) => M.guid === i),
+    [i, h]
+  ), I = (M) => M.category_guid === f || M.top_level_category_guid === f, x = () => {
+    o?.(), t(w.TRENDS_CLICK_BACK, V);
   };
-  return /* @__PURE__ */ C(
-    Ce,
+  return /* @__PURE__ */ y(
+    ke,
     {
-      ariaLabelClose: r.close_category_details,
+      ariaLabelClose: s.close_category_details,
       isOpen: !0,
-      onClose: R,
+      onClose: x,
       shouldShowHeaderShadow: !0,
-      title: a,
+      title: C,
       children: [
-        /* @__PURE__ */ C(b, { sx: { alignItems: "center", height: "100%" }, children: [
-          /* @__PURE__ */ C(Ot, { sx: { borderRadius: 0, pb: 4, pt: 16, width: "100%" }, children: [
+        /* @__PURE__ */ y(S, { sx: { alignItems: "center", height: "100%" }, children: [
+          /* @__PURE__ */ y(Jt, { sx: { borderRadius: 0, pb: 4, pt: 16, width: "100%" }, children: [
             /* @__PURE__ */ e(
-              Me,
+              Ke,
               {
-                leftIcon: /* @__PURE__ */ e(fe, { categoryGuid: f }),
-                rightContent: X(Math.abs(m), "0,0.00"),
-                subtitle: d,
-                title: g
+                leftIcon: /* @__PURE__ */ e(we, { categoryGuid: f }),
+                rightContent: oe(Math.abs(u), "0,0.00"),
+                subtitle: m,
+                title: p
               }
             ),
-            /* @__PURE__ */ e(an, { chartColor: y, chartLabel: p }),
-            /* @__PURE__ */ C(b, { alignItems: "center", direction: "row", justifyContent: "space-between", sx: { mx: 24 }, children: [
-              /* @__PURE__ */ e(Z, { bold: !0, variant: "body1", children: E }),
-              /* @__PURE__ */ e(Gt, { filter: D })
+            /* @__PURE__ */ e(Eo, { chartColor: b, chartLabel: g }),
+            /* @__PURE__ */ y(S, { alignItems: "center", direction: "row", justifyContent: "space-between", sx: { mx: 24 }, children: [
+              /* @__PURE__ */ e(z, { bold: !0, variant: "body1", children: v }),
+              /* @__PURE__ */ e(to, { filter: I })
             ] })
           ] }),
           /* @__PURE__ */ e(
-            He,
+            Ze,
             {
               bgcolor: "transparent",
-              filter: D,
+              filter: I,
               height: "calc(100vh - 475px)",
-              onClick: u
+              onClick: d
             }
           )
         ] }),
         /* @__PURE__ */ e(
-          Ce,
+          ke,
           {
-            ariaLabelClose: s.close_aria,
-            isOpen: !!w,
-            onClose: () => u(""),
-            title: r.transaction,
-            children: w && /* @__PURE__ */ e(Ne, { transaction: w })
+            ariaLabelClose: n.close_aria,
+            isOpen: !!E,
+            onClose: () => d(""),
+            title: s.transaction,
+            children: E && /* @__PURE__ */ e(Xe, { transaction: E })
           }
         )
       ]
     }
   );
-}), ln = (t, o) => {
-  const n = Re(t, o), s = Ae(t, o);
-  return [n, s].filter((r) => r.length > 0);
-}, dn = (t, o) => {
-  const [n, s] = t, r = n, l = s ?? n, d = [];
-  if (r) {
-    const h = r.reduce((c, u) => c + u.y, 0);
-    d.push({ label: o.income_label, amount: h });
+}), Mo = (o, a) => {
+  const t = je(o, a), n = Ye(o, a);
+  return [t, n].filter((s) => s.length > 0);
+}, Ao = (o, a) => {
+  const [t, n] = o, s = t, l = n ?? t, m = [];
+  if (s) {
+    const h = s.reduce((i, d) => i + d.y, 0);
+    m.push({ label: a.income_label, amount: h });
   }
   if (l) {
-    const h = l.reduce((c, u) => c + u.y, 0);
-    d.push({ label: o.spending_label, amount: h });
+    const h = l.reduce((i, d) => i + d.y, 0);
+    m.push({ label: a.spending_label, amount: h });
   }
-  return d;
-}, hn = ({
-  availableHeight: t = 0,
-  minHeight: o = 500,
-  selectedDateRange: n,
-  totals: s
+  return m;
+}, Ro = ({
+  availableHeight: o = 0,
+  minHeight: a = 500,
+  selectedDateRange: t,
+  totals: n
 }) => {
-  const r = We(), { onEvent: l } = H(), { trends: d } = A(), { isSmallMobile: h, isMobile: c, isSmallTablet: u, isTablet: f } = $(), g = [r.palette.chart?.chart1, r.palette.chart?.chart2], T = ln(s, n), m = dn(T, d), [a, y] = i.useState(0), p = 458, E = 195, w = 56, D = c || h ? E : u || f ? p : a;
-  return i.useEffect(() => {
-    const v = Math.max(t - w, o);
-    y(v);
-  }, [t]), /* @__PURE__ */ e(
-    ye,
+  const s = ue(), { onEvent: l } = P(), { trends: m } = O(), { isSmallMobile: h, isMobile: i, isSmallTablet: d, isTablet: f } = J(), p = [s.palette.chart?.chart1, s.palette.chart?.chart2], _ = Mo(n, t), u = Ao(_, m), [C, b] = c.useState(0), g = 458, v = 195, E = 56, I = i || h ? v : d || f ? g : C;
+  return c.useEffect(() => {
+    const M = Math.max(o - E, a);
+    b(M);
+  }, [o]), /* @__PURE__ */ e(
+    Ne,
     {
       baseline: "min",
-      colors: g,
+      colors: p,
       curveType: "bump",
-      datasets: T,
-      height: D,
-      labels: m,
+      datasets: _,
+      height: I,
+      labels: u,
       onItemClick: () => {
-        l(_.TRENDS_CLICK_CHART, M);
+        l(w.TRENDS_CLICK_CHART, V);
       },
       showArea: !0,
       showAxisHighlight: !0,
@@ -824,7 +1204,7 @@ const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
       valueFormatterString: "0.0a"
     }
   );
-}, un = x(hn), gn = [
+}, ko = R(Ro), Ho = [
   "BillAmountNotStandard",
   "CategorySpendingV2",
   "CostOfLivingToIncome",
@@ -858,192 +1238,188 @@ const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
   "WeeklyNewMerchantsV2",
   "WeeklyNoSpendDays",
   "WeeklySmallPurchasesSummary"
-], mn = ({ onBackClick: t, onInsightCardClick: o, sx: n }) => {
-  const { onEvent: s } = H(), { onLoad: r } = ut(), { config: l } = gt(), { isLargeDesktop: d, isDesktop: h, isMobile: c } = $(), { visibleAccounts: u } = ce(), { loadDateRangeCategoryTotals: f, loadMonthlyCategoryTotals: g, monthlyCategoryTotals: T } = P(), { setFilter: m } = ie(), { selectedDateRange: a, setSelectedCategoryData: y, setSelectedDateRange: p } = ee(), {
-    isCopyLoaded: E,
-    isInitialized: w,
-    selectedAccounts: D,
-    selectedAccountGuids: R,
-    setSelectedAccounts: v
-  } = J(), { trends: k, connect: N } = A(), { beatStore: I } = Te(), ne = Bt() && l.show_insights_widget_in_master, B = h || d, [_e, le] = i.useState(!1), [F, de] = i.useState(!1), [K, he] = i.useState("Chart"), [j, oe] = i.useState(""), [ue, se] = i.useState(!1), [re, S] = i.useState(window.innerHeight), W = B ? 56 : 0, V = re - 208, ge = re - (ne ? 550 + W : 266), [ze, be] = i.useState(!1), Pe = l.show_connections_widget_in_master ? "buttons" : "no-buttons", Se = i.useMemo(
-    () => u && u.length === 0 || T.length === 0,
-    [u, T]
-  );
-  i.useEffect(() => {
-    w && I.loadBeats().finally(() => de(!0));
-  }, [w]);
-  const we = i.useMemo(() => F ? I.getFilteredBeats({ templates: gn }) : [], [F]);
-  i.useEffect(() => {
-    const L = () => S(window.innerHeight);
-    return window.addEventListener("resize", L), () => window.removeEventListener("resize", L);
-  }, []), i.useEffect(() => {
-    v(u);
-  }, [u]), i.useEffect(() => {
-    w && f(D, a.start, a.end).then(() => {
-      g(
-        D,
-        a.start,
-        a.end
+], No = ({ onBackClick: o, onInsightCardClick: a, sx: t }) => {
+  const { onEvent: n } = P(), { onLoad: s } = yt(), { config: l } = Ct(), { isLargeDesktop: m, isDesktop: h, isMobile: i } = J(), { isAccountDataLoaded: d, loadAccountData: f, visibleAccounts: p } = Le(), {
+    categoriesLoaded: _,
+    loadCategories: u,
+    loadDateRangeCategoryTotals: C,
+    loadMonthlyCategoryTotals: b,
+    monthlyCategoryTotals: g
+  } = Y(), { isTransactionDataLoaded: v, loadTransactionData: E, setFilter: I } = De(), { selectedDateRange: x, setSelectedCategoryData: M, setSelectedDateRange: k } = Ce(), { isInitialized: A, selectedAccounts: G, selectedAccountGuids: ee, setSelectedAccounts: ne } = ye(), { trends: H, connect: he } = O(), { beatStore: B } = He(), ae = oo() && l.show_insights_widget_in_master, $ = h || m, [_e, U] = c.useState(!1), [K, re] = c.useState(!1), [X, Z] = c.useState("Chart"), [te, ie] = c.useState(""), [ge, ce] = c.useState(!1), [le, D] = c.useState(window.innerHeight), r = $ ? 56 : 0, T = le - 208, L = le - (ae ? 550 + r : 266), [j, Te] = c.useState(!1), Ee = l.show_connections_widget_in_master ? "buttons" : "no-buttons", de = c.useMemo(
+    () => p && p.length === 0 || g.length === 0,
+    [p, g]
+  ), be = c.useMemo(() => K ? B.getFilteredBeats({ templates: Ho }) : [], [K]);
+  c.useEffect(() => {
+    const N = () => D(window.innerHeight);
+    return window.addEventListener("resize", N), d || f().finally(), _ || u().finally(), v || E().finally(), () => window.removeEventListener("resize", N);
+  }, []), c.useEffect(() => {
+    ne(p);
+  }, [p]), c.useEffect(() => {
+    A && (B.loadBeats().finally(() => re(!0)), C(G, x.start, x.end).then(() => {
+      b(
+        G,
+        x.start,
+        x.end
       );
     }).finally(() => {
-      le(!0), s(_.TRENDS_LOAD_WIDGET, {
-        ...M,
-        time_period: `${pe(a.end, a.start)}M`
-      }), r?.("TrendsWidget");
-    });
-  }, [w, D, a]), i.useEffect(() => {
-    if (T.length !== 0) {
-      const L = {
-        accounts: R,
-        dateRange: { start: a.start, end: a.end }
+      U(!0), n(w.TRENDS_LOAD_WIDGET, {
+        ...V,
+        time_period: `${Ae(x.end, x.start)}M`
+      }), s?.("TrendsWidget");
+    }));
+  }, [A, G, x]), c.useEffect(() => {
+    if (g.length !== 0) {
+      const N = {
+        accounts: ee,
+        dateRange: { start: x.start, end: x.end }
       };
-      m({
-        ...L,
-        custom: (G) => !!T.find(
-          (Y) => Y.top_level_category_guid === G.top_level_category_guid || Y.category_guid === G.category_guid
+      I({
+        ...N,
+        custom: (q) => !!g.find(
+          (me) => me.top_level_category_guid === q.top_level_category_guid || me.category_guid === q.category_guid
         )
       });
     }
-  }, [T]);
-  const Fe = (L) => {
-    y(L), se(!0);
-  }, Ke = () => {
-    y(null), se(!1);
-  }, $e = () => {
-    be(!0), s(_.TRENDS_CLICK_CONNECT_ACCOUNTS);
-  }, je = (L, G) => {
-    he(G ?? K), s(_.TRENDS_CLICK_TOGGLE_VIEW, {
-      ...M,
-      toggleView: G
+  }, [g]);
+  const Ie = (N) => {
+    M(N), ce(!0);
+  }, tt = () => {
+    M(null), ce(!1);
+  }, ot = () => {
+    Te(!0), n(w.TRENDS_CLICK_CONNECT_ACCOUNTS);
+  }, nt = (N, q) => {
+    Z(q ?? X), n(w.TRENDS_CLICK_TOGGLE_VIEW, {
+      ...V,
+      toggleView: q
     });
-  }, Ye = (L) => {
-    const G = ve(L?.[0], 1), Y = L?.[1], qe = pe(Y, G);
-    p({ start: G, end: Y }), s(_.TRENDS_CLICK_TIME_WINDOW, {
-      ...M,
-      time_period: qe + "M"
+  }, st = (N) => {
+    const q = Fe(N?.[0], 1), me = N?.[1], ct = Ae(me, q);
+    k({ start: q, end: me }), n(w.TRENDS_CLICK_TIME_WINDOW, {
+      ...V,
+      time_period: ct + "M"
     });
-  }, Ue = (L) => {
-    s(_.TRENDS_CLICK_FILTER, {
-      ...M,
-      filterValue: L
+  }, at = (N) => {
+    n(w.TRENDS_CLICK_FILTER, {
+      ...V,
+      filterValue: N
     });
-  }, Xe = (L) => {
-    oe(L);
-  }, Ze = () => {
-    oe(""), s(_.TRENDS_CLICK_ALL_CATEGORIES, M);
+  }, rt = (N) => {
+    ie(N);
+  }, it = () => {
+    ie(""), n(w.TRENDS_CLICK_ALL_CATEGORIES, V);
   };
-  return !E || !_e ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ C(
-    ke,
+  return !A || !_e ? /* @__PURE__ */ e(fe, {}) : /* @__PURE__ */ y(
+    Ue,
     {
-      accountOptions: u,
-      calendarActions: { onRangeChanged: Ye },
-      dateRange: a,
-      dateRangeVariant: c ? "timeframetabs" : "timeframebuttons",
-      onAccountsFilterClick: Ue,
-      onBackClick: t,
-      sx: n,
-      title: k.title,
+      accountOptions: p,
+      calendarActions: { onRangeChanged: st },
+      dateRange: x,
+      dateRangeVariant: i ? "timeframetabs" : "timeframebuttons",
+      onAccountsFilterClick: at,
+      onBackClick: o,
+      sx: t,
+      title: H.title,
       children: [
-        Se && /* @__PURE__ */ e(
-          zt,
+        de && /* @__PURE__ */ e(
+          no,
           {
-            header: k.zero_state_content_header,
+            header: H.zero_state_content_header,
             icon: "",
-            onClick: $e,
-            primaryButton: k.empty_state_primary,
-            subText: k.empty_state_sub_text,
-            sx: { height: V },
-            variant: Pe
+            onClick: ot,
+            primaryButton: H.empty_state_primary,
+            subText: H.empty_state_sub_text,
+            sx: { height: T },
+            variant: Ee
           }
         ),
-        !Se && /* @__PURE__ */ C(
-          b,
+        !de && /* @__PURE__ */ y(
+          S,
           {
             sx: {
-              px: c ? 0 : 48
+              px: i ? 0 : 48
             },
             children: [
-              /* @__PURE__ */ C(
-                b,
+              /* @__PURE__ */ y(
+                S,
                 {
                   flexDirection: "row",
                   justifyContent: "space-between",
-                  sx: { pb: c ? 12 : 24, pt: c ? 24 : 48 },
+                  sx: { pb: i ? 12 : 24, pt: i ? 24 : 48 },
                   children: [
                     /* @__PURE__ */ e(
-                      Ge,
+                      Je,
                       {
-                        selectedCategoryGuid: j,
-                        selectedDateRange: a
+                        selectedCategoryGuid: te,
+                        selectedDateRange: x
                       }
                     ),
-                    /* @__PURE__ */ e(Ve, { onTabChange: je, selectedTab: K })
+                    /* @__PURE__ */ e(Qe, { onTabChange: nt, selectedTab: X })
                   ]
                 }
               ),
-              /* @__PURE__ */ e(b, { alignItems: "center", flexDirection: "row", width: "100%", children: /* @__PURE__ */ e(O, { flexGrow: 1, children: j && /* @__PURE__ */ C(me, { onClick: Ze, sx: { p: 0, pr: 5 }, children: [
-                /* @__PURE__ */ e(ae, { name: "arrow_back" }),
-                k.all_categories
+              /* @__PURE__ */ e(S, { alignItems: "center", flexDirection: "row", width: "100%", children: /* @__PURE__ */ e(W, { flexGrow: 1, children: te && /* @__PURE__ */ y(xe, { onClick: it, sx: { p: 0, pr: 5 }, children: [
+                /* @__PURE__ */ e(Se, { name: "arrow_back" }),
+                H.all_categories
               ] }) }) }),
-              /* @__PURE__ */ C(b, { flexDirection: B ? "row" : "column", gap: B ? 48 : 16, children: [
-                K === "Chart" && /* @__PURE__ */ C(Qe, { children: [
-                  /* @__PURE__ */ e(O, { sx: { width: B ? "68%" : "100%" }, children: /* @__PURE__ */ e(
-                    un,
+              /* @__PURE__ */ y(S, { flexDirection: $ ? "row" : "column", gap: $ ? 48 : 16, children: [
+                X === "Chart" && /* @__PURE__ */ y(lt, { children: [
+                  /* @__PURE__ */ e(W, { sx: { width: $ ? "68%" : "100%" }, children: /* @__PURE__ */ e(
+                    ko,
                     {
-                      availableHeight: V,
+                      availableHeight: T,
                       minHeight: 450,
-                      selectedDateRange: a,
-                      totals: T
+                      selectedDateRange: x,
+                      totals: g
                     }
                   ) }),
-                  /* @__PURE__ */ C(b, { gap: 16, sx: { width: B ? "32%" : "100%" }, children: [
-                    ne && F && we.length > 0 && /* @__PURE__ */ e(
-                      rn,
+                  /* @__PURE__ */ y(S, { gap: 16, sx: { width: $ ? "32%" : "100%" }, children: [
+                    ae && K && be.length > 0 && /* @__PURE__ */ e(
+                      Lo,
                       {
-                        beats: we,
-                        onInsightCardClick: o
+                        beats: be,
+                        onInsightCardClick: a
                       }
                     ),
                     /* @__PURE__ */ e(
-                      on,
+                      wo,
                       {
-                        availableHeight: ge,
-                        onCategoryClick: Fe
+                        availableHeight: L,
+                        onCategoryClick: Ie
                       }
                     )
                   ] })
                 ] }),
-                K === "Table" && /* @__PURE__ */ e(O, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
-                  Be,
+                X === "Table" && /* @__PURE__ */ e(W, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
+                  et,
                   {
                     height: "unset",
-                    monthlyCategoryTotals: T,
-                    onClickRow: Xe,
-                    selectedCategory: j,
-                    selectedDateRange: a
+                    monthlyCategoryTotals: g,
+                    onClickRow: rt,
+                    selectedCategory: te,
+                    selectedDateRange: x
                   }
                 ) })
               ] }),
-              ue && /* @__PURE__ */ e(cn, { onClose: Ke })
+              ge && /* @__PURE__ */ e(Io, { onClose: tt })
             ]
           }
         ),
         /* @__PURE__ */ e(
-          Pt,
+          so,
           {
-            onClose: () => be(!1),
-            showConnectWidget: ze,
-            title: N.mini_title
+            onClose: () => Te(!1),
+            showConnectWidget: j,
+            title: he.mini_title
           }
         )
       ]
     }
   );
-}, go = x(mn);
+}, Gn = R(No);
 export {
-  lo as TrendsFullWidget,
-  uo as TrendsMicroWidget,
-  ho as TrendsMiniWidget,
-  Co as TrendsStore,
-  go as TrendsWidget
+  Nn as TrendsFullWidget,
+  On as TrendsMicroWidget,
+  Wn as TrendsMiniWidget,
+  Pn as TrendsStore,
+  Gn as TrendsWidget
 };