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

package/dist/trends/index.es.js

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