@mx-cartographer/experiences 7.0.23-alpha.al10 → 7.0.23-alpha.al12

package/dist/trends/index.es.js

@@ -1,61 +1,73 @@
-import { jsx as e, jsxs as f } from "react/jsx-runtime";
+import { jsx as e, jsxs as f, Fragment as Pe } from "react/jsx-runtime";
 import a from "react";
-import { observer as O } from "mobx-react-lite";
-import { Icon as ne, Text as oe, CategoryIcon as Se, P as V, H3 as be } from "@mxenabled/mxui";
-import z from "@mui/material/Box";
-import S from "@mui/material/Stack";
-import ce from "@mui/material/Button";
-import { addSeconds as ge } from "date-fns/addSeconds";
-import { differenceInCalendarMonths as se } from "date-fns/differenceInCalendarMonths";
-import { a as De, g as we, S as Ee, u as ve } from "../TrendsStore-DRuzsVVE.mjs";
-import { T as sn } from "../TrendsStore-DRuzsVVE.mjs";
-import { i as Ie, c as xe, d as Me, e as Re, f as Le, h as Ae, b as Ne, g as We, j as le } from "../SpendingData-D5vsfYKo.mjs";
-import He from "@mui/material/ToggleButton";
-import ke from "@mui/material/ToggleButtonGroup";
-import { u as R, j as G, g as j, a as Y, n as ae, c as q, s as he, k as Oe, p as ze, l as Ge } from "../hooks-DUeXom8C.mjs";
-import { u as re } from "../useScreenSize-B6JyS_Lj.mjs";
-import { f as K, D as k } from "../Dialog-CWW597AF.mjs";
-import { DataGridPro as Fe } from "@mui/x-data-grid-pro";
-import { C as Pe } from "../CurrencyText-YUhH2caW.mjs";
-import { c as fe } from "../Category-CevNQ03n.mjs";
-import { b as Ve } from "../Localization-2MODESHW.mjs";
-import { H as de } from "../HeaderCell-DjuifqHJ.mjs";
-import { T as B } from "../TrendsWidget-CRi8EO04.mjs";
-import { A as p, W as pe } from "../WidgetContainer-DK8aZO5l.mjs";
-import { a as Be, T as Ke } from "../TransactionDetails-BXl0m15s.mjs";
-import { D as $e } from "../Drawer-kEE73B87.mjs";
-import { L as $ } from "../Loader-DUaFpDGv.mjs";
-import { useTheme as je } from "@mui/material/styles";
-import { L as Ye } from "../LineChart-DLk-bww5.mjs";
-import { M as Ze } from "../MiniWidgetContainer-BlsgwNew.mjs";
-import { subMonths as Ue } from "date-fns";
-import { TrendingUp as Xe, TrendingDown as qe, MultilineChart as Je } from "@mxenabled/mx-icons";
-import { a as Qe, f as te } from "../NumberFormatting-CtWHhyBX.mjs";
-import { M as et } from "../MicroWidgetContainer-5YscP1xa.mjs";
-import { E as ue } from "../EmptyState-C0lr9E5T.mjs";
-const tt = ({ selectedTab: t, onTabChange: r }) => /* @__PURE__ */ e(
-  ke,
+import { observer as A } from "mobx-react-lite";
+import { Icon as ae, Text as Q, CategoryIcon as Te, P as X, H3 as De, ChevronRightIcon as Ke } from "@mxenabled/mxui";
+import O from "@mui/material/Box";
+import _ from "@mui/material/Stack";
+import Ce from "@mui/material/Button";
+import { addSeconds as Ie } from "date-fns/addSeconds";
+import { differenceInCalendarMonths as re } from "date-fns/differenceInCalendarMonths";
+import { a as $e, g as je, S as Ye, L as Ee, u as Ue } from "../TrendsStore-WrHxzdbQ.mjs";
+import { T as to } from "../TrendsStore-WrHxzdbQ.mjs";
+import { i as Xe, c as Ze, d as Qe, e as qe, f as Je, h as et, b as Le, g as xe, j as _e } from "../SpendingData-D5vsfYKo.mjs";
+import tt from "@mui/material/ToggleButton";
+import nt from "@mui/material/ToggleButtonGroup";
+import { u as R, k as K, e as N, a as $, f as ie, c as ce, v as ee, l as ve, p as ot, m as st } from "../hooks-DkUqN6JE.mjs";
+import { u as j } from "../useScreenSize-B6JyS_Lj.mjs";
+import { f as q, D as B } from "../Dialog-CWW597AF.mjs";
+import { DataGridPro as rt } from "@mui/x-data-grid-pro";
+import { C as at } from "../CurrencyText-YUhH2caW.mjs";
+import { c as Me } from "../Category-CevNQ03n.mjs";
+import { b as it } from "../Localization-2MODESHW.mjs";
+import { H as be } from "../HeaderCell-DjuifqHJ.mjs";
+import { T as M, b as ct } from "../ViewMoreMicroCard-DFAY0tA8.mjs";
+import { A as y, W as Ae } from "../WidgetContainer-CdBs9WOZ.mjs";
+import { a as Re, T as ke } from "../TransactionDetails-C-z3HGTT.mjs";
+import { D as fe } from "../Drawer-kEE73B87.mjs";
+import { L as J } from "../Loader-DUaFpDGv.mjs";
+import { useTheme as Ne } from "@mui/material/styles";
+import { L as ye } from "../LineChart-BWWmmJxV.mjs";
+import { M as lt } from "../MiniWidgetContainer-CTyjmE1h.mjs";
+import { subMonths as dt } from "date-fns";
+import { TrendingUp as ht, TrendingDown as ut, MultilineChart as mt, ExpandLess as gt, ExpandMore as pt } from "@mxenabled/mx-icons";
+import { a as Ct, f as Z } from "../NumberFormatting-CtWHhyBX.mjs";
+import { M as ft } from "../MicroWidgetContainer-Dxz8uBN9.mjs";
+import Tt from "@mui/material/Collapse";
+import yt from "@mui/material/List";
+import _t from "@mui/material/ListItem";
+import bt from "@mui/material/ListItemButton";
+import St from "@mui/material/ListItemIcon";
+import wt from "@mui/material/ListItemText";
+import He from "@mui/material/styles/useTheme";
+import Dt from "@mui/material/Divider";
+import { useTheme as It, Stack as Et } from "@mui/material";
+import Lt from "@mui/material/Paper";
+import { b as xt } from "../CategoryUtil-BR3H5i6n.mjs";
+import { E as vt } from "../ExportCsvAction-CbMfQ2Wa.mjs";
+import { E as Mt } from "../EmptyState-C0lr9E5T.mjs";
+const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
+  nt,
   {
     exclusive: !0,
-    onChange: r,
+    onChange: o,
     orientation: "horizontal",
-    value: t,
-    children: ["Chart", "Table"].map((n) => /* @__PURE__ */ e(He, { color: "primary", sx: { width: 56 }, value: n, children: n === "Chart" ? /* @__PURE__ */ e(ne, { name: "table_chart_view" }) : /* @__PURE__ */ e(ne, { name: "format_list_bulleted" }) }, n))
+    value: n,
+    children: ["Chart", "Table"].map((t) => /* @__PURE__ */ e(tt, { color: "primary", sx: { width: 56 }, value: t, children: t === "Chart" ? /* @__PURE__ */ e(ae, { name: "table_chart_view" }) : /* @__PURE__ */ e(ae, { name: "format_list_bulleted" }) }, t))
   }
-), nt = ({ selectedDateRange: t, selectedCategoryGuid: r }) => {
-  const { trends: n } = R(), { isMobile: s, isDesktop: h } = re(), { getCategoryName: m } = G(), l = a.useMemo(() => {
-    const u = K(
-      t.start,
-      s ? k.MONTH_SHORT_YEAR : k.MONTH_YEAR
-    ), i = K(
-      t.end,
-      s ? k.MONTH_SHORT_YEAR : k.MONTH_YEAR
+), Oe = ({ selectedDateRange: n, selectedCategoryGuid: o }) => {
+  const { trends: t } = R(), { isMobile: s, isDesktop: i } = j(), { getCategoryName: h } = K(), d = a.useMemo(() => {
+    const l = q(
+      n.start,
+      s ? B.MONTH_SHORT_YEAR : B.MONTH_YEAR
+    ), c = q(
+      n.end,
+      s ? B.MONTH_SHORT_YEAR : B.MONTH_YEAR
     );
-    return `${u} - ${i}`;
-  }, [t, s]);
-  return /* @__PURE__ */ f(z, { sx: { mr: 10, minWidth: "60%" }, children: [
+    return `${l} - ${c}`;
+  }, [n, s]);
+  return /* @__PURE__ */ f(O, { sx: { mr: 10, minWidth: "60%" }, children: [
     /* @__PURE__ */ e(
-      oe,
+      Q,
       {
         display: "block",
         fontWeight: 700,
@@ -64,272 +76,272 @@ const tt = ({ selectedTab: t, onTabChange: r }) => /* @__PURE__ */ e(
           overflow: "visible",
           textOverflow: "unset"
         },
-        variant: h ? "H3" : "Body",
-        children: m(r) || n.sub_title
+        variant: i ? "H3" : "Body",
+        children: h(o) || t.sub_title
       }
     ),
-    /* @__PURE__ */ e(oe, { variant: h ? "Body" : "Small", children: l })
+    /* @__PURE__ */ e(Q, { variant: i ? "Body" : "Small", children: d })
   ] });
-}, ot = (t) => {
-  const r = t.row[t.field];
-  return /* @__PURE__ */ e(S, { alignItems: "flex-end", tabIndex: t.tabIndex, children: /* @__PURE__ */ e(Pe, { amount: r, variant: "Small" }) });
-}, st = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
-  const { categories: n } = R(), s = n.default_categories[t]?.replace(/&/g, "&") ?? fe[t];
-  return /* @__PURE__ */ f(S, { alignItems: "center", direction: "row", justifyContent: "center", children: [
+}, At = (n) => {
+  const o = n.row[n.field];
+  return /* @__PURE__ */ e(_, { alignItems: "flex-end", tabIndex: n.tabIndex, children: /* @__PURE__ */ e(at, { amount: o, variant: "Small" }) });
+}, Rt = ({ categoryGuid: n, topLevelCategoryGuid: o }) => {
+  const { categories: t } = R(), s = t.default_categories[n]?.replace(/&/g, "&") ?? Me[n];
+  return /* @__PURE__ */ f(_, { alignItems: "center", direction: "row", justifyContent: "center", children: [
     /* @__PURE__ */ e(
-      z,
+      O,
       {
-        "aria-label": Ve(n.category_icon_label_aria, s),
+        "aria-label": it(t.category_icon_label_aria, s),
         role: "img",
-        children: /* @__PURE__ */ e(Se, { categoryGuid: r })
+        children: /* @__PURE__ */ e(Te, { categoryGuid: o })
       }
     ),
-    /* @__PURE__ */ e(oe, { sx: { ml: 12, pb: 6 }, variant: "Small", children: s })
+    /* @__PURE__ */ e(Q, { sx: { ml: 12, pb: 6 }, variant: "Small", children: s })
   ] });
-}, at = (t) => /* @__PURE__ */ e(S, { alignItems: "center", direction: "row", height: "100%", width: "100%", children: /* @__PURE__ */ e(
-  st,
+}, kt = (n) => /* @__PURE__ */ e(_, { alignItems: "center", direction: "row", height: "100%", width: "100%", children: /* @__PURE__ */ e(
+  Rt,
   {
-    categoryGuid: t.row.category,
-    topLevelCategoryGuid: t.row.top_level_category_guid
+    categoryGuid: n.row.category,
+    topLevelCategoryGuid: n.row.top_level_category_guid
   }
-) }), rt = (t, r) => {
-  const n = [], s = new Date(t);
-  for (; s <= r; ) {
-    const h = K(s, k.MONTH);
-    n.push(h), s.setMonth(s.getMonth() + 1);
+) }), Nt = (n, o) => {
+  const t = [], s = new Date(n);
+  for (; s <= o; ) {
+    const i = q(s, B.MONTH);
+    t.push(i), s.setMonth(s.getMonth() + 1);
   }
-  return n;
-}, it = ({
-  monthlyCategoryTotals: t,
-  selectedDateRange: r,
-  selectedCategory: n,
+  return t;
+}, Ve = ({
+  monthlyCategoryTotals: n,
+  selectedDateRange: o,
+  selectedCategory: t,
   onClickRow: s,
-  height: h = "100dvh",
-  sx: m = {}
+  height: i = "100dvh",
+  sx: h = {}
 }) => {
-  const { onEvent: l } = j(), u = K(/* @__PURE__ */ new Date(), k.MONTH_SHORT), [i, _] = a.useState([
-    { field: u, sort: "desc" }
-  ]), y = a.useMemo(() => rt(r.start, r.end), [r]), c = [
+  const { onEvent: d } = N(), l = q(/* @__PURE__ */ new Date(), B.MONTH_SHORT), [c, m] = a.useState([
+    { field: l, sort: "desc" }
+  ]), C = a.useMemo(() => Nt(o.start, o.end), [o]), u = [
     {
       field: "category",
       flex: 1,
       headerName: "Category",
       minWidth: 175,
-      renderHeader: de,
-      renderCell: at,
+      renderHeader: be,
+      renderCell: kt,
       sortable: !0,
       type: "string"
     },
-    ...y.map(
-      (o) => ({
-        field: o,
+    ...C.map(
+      (r) => ({
+        field: r,
         flex: 1,
-        headerName: o,
+        headerName: r,
         minWidth: 100,
-        renderHeader: de,
-        renderCell: ot,
+        renderHeader: be,
+        renderCell: At,
         align: "right",
         headerAlign: "right",
         sortable: !0,
         hideSortIcons: !1,
         type: "number",
-        sortComparator: De
+        sortComparator: $e
       })
     )
-  ], C = a.useMemo(() => {
-    const o = t.filter(
-      (d) => !Ie(d) && !xe(d)
-    ), D = (n ? o.filter(
-      (d) => d.category_guid === n || d.top_level_category_guid === n
-    ) : o).reduce(
-      (d, x) => {
-        const { category_guid: v, top_level_category_guid: M, month: A, total: w, year: L } = x, E = n ? v : M;
-        d[E] || (d[E] = {
-          id: E,
-          category: E,
-          category_guid: v,
-          top_level_category_guid: M
+  ], b = a.useMemo(() => {
+    const r = n.filter(
+      (p) => !Xe(p) && !Ze(p)
+    ), T = (t ? r.filter(
+      (p) => p.category_guid === t || p.top_level_category_guid === t
+    ) : r).reduce(
+      (p, w) => {
+        const { category_guid: D, top_level_category_guid: E, month: k, total: I, year: H } = w, L = t ? D : E;
+        p[L] || (p[L] = {
+          id: L,
+          category: L,
+          category_guid: D,
+          top_level_category_guid: E
         });
-        const T = K(new Date(L, A - 1), k.MONTH_SHORT);
-        return d[E][T] || (d[E][T] = 0), d[E][T] = d[E][T] + Math.abs(w), d;
+        const x = q(new Date(H, k - 1), B.MONTH_SHORT);
+        return p[L][x] || (p[L][x] = 0), p[L][x] = p[L][x] + Math.abs(I), p;
       },
       {}
     );
-    return Object.values(D);
-  }, [t, n]);
-  return /* @__PURE__ */ e(z, { sx: { height: h, width: "100%", overflowX: "auto", boxShadow: "none", ...m }, children: /* @__PURE__ */ e(
-    Fe,
+    return Object.values(T);
+  }, [n, t]);
+  return /* @__PURE__ */ e(O, { sx: { height: i, width: "100%", overflowX: "auto", boxShadow: "none", ...h }, children: /* @__PURE__ */ e(
+    rt,
     {
-      columns: c,
+      columns: u,
       disableColumnFilter: !0,
       disableColumnMenu: !0,
       hideFooter: !0,
-      initialState: { sorting: { sortModel: i } },
-      onRowClick: (o) => {
-        s?.(o.row.category), l(p.TRENDS_CLICK_LIST_ITEM, {
-          ...B,
-          listItem: fe[o.row.category]
+      initialState: { sorting: { sortModel: c } },
+      onRowClick: (r) => {
+        s?.(r.row.category), d(y.TRENDS_CLICK_LIST_ITEM, {
+          ...M,
+          listItem: Me[r.row.category]
         });
       },
-      onSortModelChange: (o) => {
-        _(o), l(p.TRENDS_CLICK_TABLE_SORT, B);
+      onSortModelChange: (r) => {
+        m(r), d(y.TRENDS_CLICK_TABLE_SORT, M);
       },
-      rows: C,
+      rows: b,
       slotProps: { baseIconButton: { color: "secondary", sx: { ml: 8 } } },
-      sortModel: i,
+      sortModel: c,
       sortingOrder: ["asc", "desc"]
     }
   ) });
-}, ct = {
+}, Ht = {
   title: "Transaction List"
-}, lt = ({
-  categoryGuid: t,
-  dateRange: r,
-  isOpen: n,
+}, Wt = ({
+  categoryGuid: n,
+  dateRange: o,
+  isOpen: t,
   onClose: s
 }) => {
-  const { onEvent: h } = j(), { selectedAccountGuids: m } = Y(), { common: l } = R(), { setFilter: u, sortedTransactions: i } = ae(), [_, y] = a.useState(""), c = a.useMemo(
-    () => i.find((o) => o.guid === _),
-    [_, i]
+  const { onEvent: i } = N(), { selectedAccountGuids: h } = $(), { common: d } = R(), { setFilter: l, sortedTransactions: c } = ie(), [m, C] = a.useState(""), u = a.useMemo(
+    () => c.find((r) => r.guid === m),
+    [m, c]
   );
   a.useEffect(() => {
-    u({
-      accounts: m,
-      dateRange: r,
-      custom: (o) => t === "" || t === o.category_guid || t === o.top_level_category_guid,
-      showSplits: !!t
+    l({
+      accounts: h,
+      dateRange: o,
+      custom: (r) => n === "" || n === r.category_guid || n === r.top_level_category_guid,
+      showSplits: !!n
     });
-  }, [m, t, r]), a.useEffect(() => h(p.TRENDS_VIEW_TRANSACTIONS), []);
-  const C = () => {
-    y(""), s();
+  }, [h, n, o]), a.useEffect(() => i(y.TRENDS_VIEW_TRANSACTIONS), []);
+  const b = () => {
+    C(""), s();
   };
   return /* @__PURE__ */ f(
-    $e,
+    fe,
     {
-      ariaLabelClose: l.close_aria,
-      isOpen: n,
-      onClose: C,
-      title: ct.title,
+      ariaLabelClose: d.close_aria,
+      isOpen: t,
+      onClose: b,
+      title: Ht.title,
       children: [
-        c && /* @__PURE__ */ e(Be, { transaction: c }),
-        !c && /* @__PURE__ */ e(Ke, { onClick: y })
+        u && /* @__PURE__ */ e(Re, { transaction: u }),
+        !u && /* @__PURE__ */ e(ke, { onClick: C })
       ]
     }
   );
-}, dt = O(lt), ut = ({ onBackClick: t, sx: r }) => {
-  const { onEvent: n } = j(), { isDesktop: s, isTablet: h, isMobile: m } = re(), { visibleAccounts: l } = q(), { loadMonthlyCategoryTotals: u, monthlyCategoryTotals: i, getCategoryName: _ } = G(), { sortedTransactions: y } = ae(), { selectedDateRange: c, setSelectedDateRange: C } = he(), { isCopyLoaded: o, isInitialized: b, selectedAccounts: D, setSelectedAccounts: d } = Y(), { trends: x } = R(), [v, M] = a.useState(!1), [A, w] = a.useState(!1), [L, E] = a.useState("Chart"), [T, F] = a.useState(""), [Z, J] = a.useState(window.innerHeight), U = Z - (m ? 315 : 345);
+}, Ot = A(Wt), Vt = ({ onBackClick: n, sx: o }) => {
+  const { onEvent: t } = N(), { isDesktop: s, isTablet: i, isMobile: h } = j(), { visibleAccounts: d } = ce(), { loadMonthlyCategoryTotals: l, monthlyCategoryTotals: c, getCategoryName: m } = K(), { sortedTransactions: C } = ie(), { selectedDateRange: u, setSelectedDateRange: b } = ee(), { isCopyLoaded: r, isInitialized: g, selectedAccounts: T, setSelectedAccounts: p } = $(), { trends: w } = R(), [D, E] = a.useState(!1), [k, I] = a.useState(!1), [H, L] = a.useState("Chart"), [x, z] = a.useState(""), [le, F] = a.useState(window.innerHeight), de = le - (h ? 315 : 345);
   a.useEffect(() => {
-    const g = () => J(window.innerHeight);
-    return window.addEventListener("resize", g), () => window.removeEventListener("resize", g);
+    const S = () => F(window.innerHeight);
+    return window.addEventListener("resize", S), () => window.removeEventListener("resize", S);
   }, []), a.useEffect(() => {
-    d(l);
-  }, [l]), a.useEffect(() => {
-    b && u(
-      D,
-      c.start,
-      c.end
+    p(d);
+  }, [d]), a.useEffect(() => {
+    g && l(
+      T,
+      u.start,
+      u.end
     ).finally(() => {
-      M(!0);
+      E(!0);
     });
-  }, [b, D, c]);
-  const X = a.useMemo(() => {
-    if (!v) return { stackedDatasets: [], unstackedDatasets: [] };
-    const g = we(
-      i,
-      c.start,
-      c.end
-    ), H = T.length ? g.filter(
-      (P) => P.top_level_category_guid === T || P.category_guid === T
-    ) : Me(g);
+  }, [g, T, u]);
+  const P = a.useMemo(() => {
+    if (!D) return { stackedDatasets: [], unstackedDatasets: [] };
+    const S = je(
+      c,
+      u.start,
+      u.end
+    ), W = x.length ? S.filter(
+      (G) => G.top_level_category_guid === x || G.category_guid === x
+    ) : Qe(S);
     return {
-      stackedDatasets: H.filter(Re),
-      unstackedDatasets: H.filter(Le)
+      stackedDatasets: W.filter(qe),
+      unstackedDatasets: W.filter(Je)
     };
-  }, [i, T, c]), Q = (g, H) => {
-    E(H ?? L), n(p.TRENDS_CLICK_TOGGLE_VIEW);
-  }, I = (g) => {
-    const H = ge(g?.[0], 1), P = g?.[1], Ce = se(P, H);
-    C({ start: H, end: P }), n(p.TRENDS_CLICK_TIME_WINDOW, {
-      time_period: Ce + "M"
+  }, [c, x, u]), te = (S, W) => {
+    L(W ?? H), t(y.TRENDS_CLICK_TOGGLE_VIEW);
+  }, he = (S) => {
+    const W = Ie(S?.[0], 1), G = S?.[1], pe = re(G, W);
+    b({ start: W, end: G }), t(y.TRENDS_CLICK_TIME_WINDOW, {
+      time_period: pe + "M"
     });
-  }, N = () => {
-    n(p.TRENDS_CLICK_FILTER);
-  }, W = (g) => {
-    F(g);
-  }, ee = (g) => {
-    F(g), n(p.TRENDS_CLICK_LEGEND, { category: _(g) });
-  }, _e = (g) => {
-    n(p.TRENDS_HOVER_LEGEND, { category: _(g) });
-  }, ye = (g) => {
-    n(p.TRENDS_HOVER_AREA, { category: g });
-  }, Te = (g) => {
-    n(p.TRENDS_HOVER_POINT, { category: g });
+  }, ne = () => {
+    t(y.TRENDS_CLICK_FILTER);
+  }, oe = (S) => {
+    z(S);
+  }, ue = (S) => {
+    z(S), t(y.TRENDS_CLICK_LEGEND, { category: m(S) });
+  }, se = (S) => {
+    t(y.TRENDS_HOVER_LEGEND, { category: m(S) });
+  }, me = (S) => {
+    t(y.TRENDS_HOVER_AREA, { category: S });
+  }, ge = (S) => {
+    t(y.TRENDS_HOVER_POINT, { category: S });
   };
-  return !o || !b || !v ? /* @__PURE__ */ e($, {}) : /* @__PURE__ */ f(
-    pe,
+  return !r || !g || !D ? /* @__PURE__ */ e(J, {}) : /* @__PURE__ */ f(
+    Ae,
     {
-      accountOptions: l,
-      calendarActions: { onRangeChanged: I },
-      dateRange: c,
+      accountOptions: d,
+      calendarActions: { onRangeChanged: he },
+      dateRange: u,
       dateRangeVariant: "timeframebuttons",
-      onAccountsFilterClick: N,
-      onBackClick: t,
-      sx: r,
-      title: x.title,
+      onAccountsFilterClick: ne,
+      onBackClick: n,
+      sx: o,
+      title: w.title,
       children: [
         /* @__PURE__ */ f(
-          S,
+          _,
           {
             sx: {
               // eslint-disable-next-line no-nested-ternary
-              px: s ? 48 : h ? 24 : 12
+              px: s ? 48 : i ? 24 : 12
             },
             children: [
               /* @__PURE__ */ f(
-                S,
+                _,
                 {
                   flexDirection: "row",
                   justifyContent: "space-between",
-                  sx: { pb: m ? 12 : 24, pt: m ? 24 : 48 },
+                  sx: { pb: h ? 12 : 24, pt: h ? 24 : 48 },
                   children: [
                     /* @__PURE__ */ e(
-                      nt,
+                      Oe,
                       {
-                        selectedCategoryGuid: T,
-                        selectedDateRange: c
+                        selectedCategoryGuid: x,
+                        selectedDateRange: u
                       }
                     ),
-                    /* @__PURE__ */ e(tt, { onTabChange: Q, selectedTab: L })
+                    /* @__PURE__ */ e(We, { onTabChange: te, selectedTab: H })
                   ]
                 }
               ),
-              /* @__PURE__ */ f(S, { alignItems: "center", flexDirection: "row", width: "100%", children: [
-                /* @__PURE__ */ e(z, { flexGrow: 1, children: T && /* @__PURE__ */ f(ce, { onClick: () => F(""), sx: { p: 0, pr: 5 }, children: [
-                  /* @__PURE__ */ e(ne, { name: "arrow_back" }),
-                  x.all_categories
+              /* @__PURE__ */ f(_, { alignItems: "center", flexDirection: "row", width: "100%", children: [
+                /* @__PURE__ */ e(O, { flexGrow: 1, children: x && /* @__PURE__ */ f(Ce, { onClick: () => z(""), sx: { p: 0, pr: 5 }, children: [
+                  /* @__PURE__ */ e(ae, { name: "arrow_back" }),
+                  w.all_categories
                 ] }) }),
-                /* @__PURE__ */ e(ce, { onClick: () => w(!0), sx: { px: 5 }, children: `${x.view_transactions} (${y.length})` })
+                /* @__PURE__ */ e(Ce, { onClick: () => I(!0), sx: { px: 5 }, children: `${w.view_transactions} (${C.length})` })
               ] }),
-              /* @__PURE__ */ f(z, { children: [
-                L === "Chart" && /* @__PURE__ */ e(
-                  Ee,
+              /* @__PURE__ */ f(O, { children: [
+                H === "Chart" && /* @__PURE__ */ e(
+                  Ye,
                   {
-                    availableHeight: U,
-                    onClickLegend: ee,
-                    onHoverArea: ye,
-                    onHoverLegend: _e,
-                    onHoverPoint: Te,
-                    stackedDatasets: X.stackedDatasets,
-                    unstackedDatasets: X.unstackedDatasets
+                    availableHeight: de,
+                    onClickLegend: ue,
+                    onHoverArea: me,
+                    onHoverLegend: se,
+                    onHoverPoint: ge,
+                    stackedDatasets: P.stackedDatasets,
+                    unstackedDatasets: P.unstackedDatasets
                   }
                 ),
-                L === "Table" && /* @__PURE__ */ e(
-                  it,
+                H === "Table" && /* @__PURE__ */ e(
+                  Ve,
                   {
-                    monthlyCategoryTotals: i,
-                    onClickRow: W,
-                    selectedCategory: T,
-                    selectedDateRange: c
+                    monthlyCategoryTotals: c,
+                    onClickRow: oe,
+                    selectedCategory: x,
+                    selectedDateRange: u
                   }
                 )
               ] })
@@ -337,27 +349,27 @@ const tt = ({ selectedTab: t, onTabChange: r }) => /* @__PURE__ */ e(
           }
         ),
         /* @__PURE__ */ e(
-          dt,
+          Ot,
           {
-            categoryGuid: T,
-            dateRange: c,
-            isOpen: A,
-            onClose: () => w(!1)
+            categoryGuid: x,
+            dateRange: u,
+            isOpen: k,
+            onClose: () => I(!1)
           }
         )
       ]
     }
   );
-}, Jt = O(ut), mt = () => {
-  const t = je(), { monthlyCategoryTotals: r } = G(), { trends: n } = R(), s = Ae(r);
+}, Xn = A(Vt), Gt = () => {
+  const n = Ne(), { monthlyCategoryTotals: o } = K(), { trends: t } = R(), s = et(o);
   return /* @__PURE__ */ e(
-    Ye,
+    ye,
     {
       baseline: "min",
-      colors: [t.palette.primary.main],
+      colors: [n.palette.primary.main],
       datasets: [s],
       height: 300,
-      labels: [n.spending_label],
+      labels: [t.spending_label],
       showArea: !0,
       showAverage: !0,
       showLegend: !0,
@@ -366,37 +378,37 @@ const tt = ({ selectedTab: t, onTabChange: r }) => /* @__PURE__ */ e(
       valueFormatterString: "0,0"
     }
   );
-}, gt = O(mt), ht = ({ onPrimaryCtaClick: t, sx: r }) => {
-  const { visibleAccounts: n } = q(), { loadMonthlyCategoryTotals: s, monthlyTotalsLoaded: h } = G(), { isInitialized: m } = Oe(), { trends: l } = R(), { isCopyLoaded: u, selectedAccounts: i, setSelectedAccounts: _ } = Y();
+}, Bt = A(Gt), zt = ({ onPrimaryCtaClick: n, sx: o }) => {
+  const { visibleAccounts: t } = ce(), { loadMonthlyCategoryTotals: s, monthlyTotalsLoaded: i } = K(), { isInitialized: h } = ve(), { trends: d } = R(), { isCopyLoaded: l, selectedAccounts: c, setSelectedAccounts: m } = $();
   return a.useEffect(() => {
-    _(n);
-  }, [n]), a.useEffect(() => {
-    m && s(i).finally();
-  }, [m, i]), !u || !m ? /* @__PURE__ */ e($, {}) : /* @__PURE__ */ e(
-    Ze,
+    m(t);
+  }, [t]), a.useEffect(() => {
+    h && s(c).finally();
+  }, [h, c]), !l || !h ? /* @__PURE__ */ e(J, {}) : /* @__PURE__ */ e(
+    lt,
     {
-      onPrimaryCtaClick: t,
-      primaryCtaLabel: l.primary_cta,
-      subTitle: l.sub_title,
-      sx: r,
-      title: l.mini_title,
-      children: h ? /* @__PURE__ */ e(gt, {}) : /* @__PURE__ */ e($, {})
+      onPrimaryCtaClick: n,
+      primaryCtaLabel: d.primary_cta,
+      subTitle: d.sub_title,
+      sx: o,
+      title: d.mini_title,
+      children: i ? /* @__PURE__ */ e(Bt, {}) : /* @__PURE__ */ e(J, {})
     }
   );
-}, Qt = O(ht), ft = 70, me = ({
-  title: t,
-  totalAmount: r,
-  transactionType: n,
+}, Zn = A(zt), Ft = 70, Se = ({
+  title: n,
+  totalAmount: o,
+  transactionType: t,
   percentage: s,
-  secondaryLabel: h,
-  shouldDisplayPercentage: m
+  secondaryLabel: i,
+  shouldDisplayPercentage: h
 }) => {
-  const { availableWidth: l } = ze(), u = a.useRef(null), i = a.useRef(null), _ = Qe(Number(Math.abs(s)), {
+  const { availableWidth: d } = ot(), l = a.useRef(null), c = a.useRef(null), m = Ct(Number(Math.abs(s)), {
     style: "percent",
     minimumIntegerDigits: 1
-  }), y = l === 288 && te(r, "0,0.00").length > 10 ? te(r, "0,0") : te(r, "0,0.00"), c = n === "spending" ? s > 0 : s >= 0, C = n === "spending" ? "error.main" : "success.main", o = n === "spending" ? "success.main" : "text.secondary", b = u?.current, D = i?.current, d = b && D ? b.scrollWidth > D.clientWidth - ft : !1;
+  }), C = d === 288 && Z(o, "0,0.00").length > 10 ? Z(o, "0,0") : Z(o, "0,0.00"), u = t === "spending" ? s > 0 : s >= 0, b = t === "spending" ? "error.main" : "success.main", r = t === "spending" ? "success.main" : "text.secondary", g = l?.current, T = c?.current, p = g && T ? g.scrollWidth > T.clientWidth - Ft : !1;
   return /* @__PURE__ */ f(
-    S,
+    _,
     {
       sx: {
         border: 1,
@@ -409,7 +421,7 @@ const tt = ({ selectedTab: t, onTabChange: r }) => /* @__PURE__ */ e(
       },
       children: [
         /* @__PURE__ */ f(
-          S,
+          _,
           {
             sx: {
               alignItems: "center",
@@ -417,18 +429,18 @@ const tt = ({ selectedTab: t, onTabChange: r }) => /* @__PURE__ */ e(
               justifyContent: "space-between"
             },
             children: [
-              /* @__PURE__ */ e(V, { color: "text.secondary", variant: "caption", children: t }),
-              m && /* @__PURE__ */ f(S, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
-                c ? /* @__PURE__ */ e(Xe, { size: 20, sx: { color: C } }) : /* @__PURE__ */ e(qe, { size: 20, sx: { color: o } }),
+              /* @__PURE__ */ e(X, { color: "text.secondary", variant: "caption", children: n }),
+              h && /* @__PURE__ */ f(_, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
+                u ? /* @__PURE__ */ e(ht, { size: 20, sx: { color: b } }) : /* @__PURE__ */ e(ut, { size: 20, sx: { color: r } }),
                 /* @__PURE__ */ e(
-                  V,
+                  X,
                   {
                     sx: {
-                      color: c ? C : o,
+                      color: u ? b : r,
                       fontWeight: 600
                     },
                     variant: "body2",
-                    children: _
+                    children: m
                   }
                 )
               ] })
@@ -436,9 +448,9 @@ const tt = ({ selectedTab: t, onTabChange: r }) => /* @__PURE__ */ e(
           }
         ),
         /* @__PURE__ */ f(
-          S,
+          _,
           {
-            ref: i,
+            ref: c,
             sx: {
               alignItems: "center",
               flexDirection: "row",
@@ -446,19 +458,19 @@ const tt = ({ selectedTab: t, onTabChange: r }) => /* @__PURE__ */ e(
             },
             children: [
               /* @__PURE__ */ e(
-                z,
+                O,
                 {
-                  ref: u,
+                  ref: l,
                   sx: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
-                  children: /* @__PURE__ */ e(be, { children: y })
+                  children: /* @__PURE__ */ e(De, { children: C })
                 }
               ),
-              m && l >= 450 && !d && /* @__PURE__ */ e(
-                V,
+              h && d >= 450 && !p && /* @__PURE__ */ e(
+                X,
                 {
-                  color: c ? C : o,
+                  color: u ? b : r,
                   variant: "caption",
-                  children: h
+                  children: i
                 }
               )
             ]
@@ -467,50 +479,50 @@ const tt = ({ selectedTab: t, onTabChange: r }) => /* @__PURE__ */ e(
       ]
     }
   );
-}, pt = O(() => {
-  const { trends: t } = R();
-  return /* @__PURE__ */ f(S, { sx: { alignItems: "start", flexDirection: "row", gap: 12 }, children: [
-    /* @__PURE__ */ e(Je, { size: 32 }),
-    /* @__PURE__ */ f(S, { children: [
-      /* @__PURE__ */ e(V, { fontWeight: 600, variant: "body1", children: t.zero_state_content_header }),
-      /* @__PURE__ */ e(V, { color: "text.secondary", variant: "subtitle2", children: t.zero_state_content_description })
+}, Pt = A(() => {
+  const { trends: n } = R();
+  return /* @__PURE__ */ f(_, { sx: { alignItems: "start", flexDirection: "row", gap: 12 }, children: [
+    /* @__PURE__ */ e(mt, { size: 32 }),
+    /* @__PURE__ */ f(_, { children: [
+      /* @__PURE__ */ e(X, { fontWeight: 600, variant: "body1", children: n.zero_state_content_header }),
+      /* @__PURE__ */ e(X, { color: "text.secondary", variant: "subtitle2", children: n.zero_state_content_description })
     ] })
   ] });
-}), en = O(({ onCtaClick: t }) => {
-  const { visibleAccounts: r } = q(), { onEvent: n } = j(), { monthlyCategoryTotals: s, loadMonthlyCategoryTotals: h, monthlyTotalsLoaded: m } = G(), l = {
-    start: Ue(/* @__PURE__ */ new Date(), 1),
+}), Qn = A(({ onCtaClick: n }) => {
+  const { visibleAccounts: o } = ce(), { onEvent: t } = N(), { monthlyCategoryTotals: s, loadMonthlyCategoryTotals: i, monthlyTotalsLoaded: h } = K(), d = {
+    start: dt(/* @__PURE__ */ new Date(), 1),
     end: /* @__PURE__ */ new Date()
-  }, { trends: u } = R(), { selectedAccounts: i, setSelectedAccounts: _, isInitialized: y } = Y();
+  }, { trends: l } = R(), { selectedAccounts: c, setSelectedAccounts: m, isInitialized: C } = $();
   a.useEffect(() => {
-    _(r);
-  }, [r]), a.useEffect(() => {
-    y && h(i, l.start).then(() => {
-      n(p.TRENDS_LOAD_WIDGET, {
-        state: r?.length ? "default" : "zeroState"
+    m(o);
+  }, [o]), a.useEffect(() => {
+    C && i(c, d.start).then(() => {
+      t(y.TRENDS_LOAD_WIDGET, {
+        state: o?.length ? "default" : "zeroState"
       });
     });
-  }, [y, i]);
-  const { spendingData: c, incomeData: C } = a.useMemo(
+  }, [C, c]);
+  const { spendingData: u, incomeData: b } = a.useMemo(
     () => ({
-      spendingData: Ne(s, l),
-      incomeData: We(s, l)
+      spendingData: Le(s, d),
+      incomeData: xe(s, d)
     }),
-    [s, l]
-  ), [o, b] = c, [D, d] = C, x = le(b.y, o.y), v = le(d.y, D.y), M = y && !r?.length, A = () => {
-    n(
-      M ? p.TRENDS_CLICK_GET_STARTED : p.TRENDS_CLICK_VIEW_MORE
-    ), t();
+    [s, d]
+  ), [r, g] = u, [T, p] = b, w = _e(g.y, r.y), D = _e(p.y, T.y), E = C && !o?.length, k = () => {
+    t(
+      E ? y.TRENDS_CLICK_GET_STARTED : y.TRENDS_CLICK_VIEW_MORE
+    ), n();
   };
-  return !m || !y ? /* @__PURE__ */ e($, {}) : /* @__PURE__ */ e(
-    et,
+  return !h || !C ? /* @__PURE__ */ e(J, {}) : /* @__PURE__ */ e(
+    ft,
     {
       className: "mx-trends-microwidget",
-      ctaLabel: u.micro_primary_cta_label,
-      onCTAClick: A,
-      subHeader: M ? void 0 : u.micro_subheader,
-      title: u.title,
-      children: M ? /* @__PURE__ */ e(pt, {}) : /* @__PURE__ */ f(
-        S,
+      ctaLabel: l.micro_primary_cta_label,
+      onCTAClick: k,
+      subHeader: E ? void 0 : l.micro_subheader,
+      title: l.title,
+      children: E ? /* @__PURE__ */ e(Pt, {}) : /* @__PURE__ */ f(
+        _,
         {
           sx: {
             alignItems: "stretch",
@@ -519,24 +531,24 @@ const tt = ({ selectedTab: t, onTabChange: r }) => /* @__PURE__ */ e(
           },
           children: [
             /* @__PURE__ */ e(
-              me,
+              Se,
               {
-                percentage: x,
-                secondaryLabel: u.micro_secondary_label,
-                shouldDisplayPercentage: b.y !== 0 && o.y !== 0,
-                title: u.spending_label,
-                totalAmount: b.y,
+                percentage: w,
+                secondaryLabel: l.micro_secondary_label,
+                shouldDisplayPercentage: g.y !== 0 && r.y !== 0,
+                title: l.spending_label,
+                totalAmount: g.y,
                 transactionType: "spending"
               }
             ),
             /* @__PURE__ */ e(
-              me,
+              Se,
               {
-                percentage: v,
-                secondaryLabel: u.micro_secondary_label,
-                shouldDisplayPercentage: d.y !== 0 && D.y !== 0,
-                title: u.income_label,
-                totalAmount: d.y,
+                percentage: D,
+                secondaryLabel: l.micro_secondary_label,
+                shouldDisplayPercentage: p.y !== 0 && T.y !== 0,
+                title: l.income_label,
+                totalAmount: p.y,
                 transactionType: "income"
               }
             )
@@ -545,108 +557,474 @@ const tt = ({ selectedTab: t, onTabChange: r }) => /* @__PURE__ */ e(
       )
     }
   );
-}), _t = ({ onBackClick: t, onInsightCardClick: r, sx: n }) => {
-  const { onEvent: s } = j(), { config: h } = Ge(), { isLargeDesktop: m, isDesktop: l, isMobile: u } = re(), { visibleAccounts: i } = q(), { loadDateRangeCategoryTotals: _, loadMonthlyCategoryTotals: y, monthlyCategoryTotals: c } = G(), { setFilter: C } = ae(), { selectedDateRange: o, setSelectedCategoryData: b, setSelectedDateRange: D } = he(), {
-    isCopyLoaded: d,
-    isInitialized: x,
-    selectedAccounts: v,
-    selectedAccountGuids: M,
-    setSelectedAccounts: A
-  } = Y(), { trends: w } = R();
-  ve();
-  const [L, E] = a.useState(!1);
-  a.useState("Chart"), a.useState(""), a.useState(!1);
-  const [T, F] = a.useState(window.innerHeight), Z = T - 208;
+}), Kt = A(
+  ({ isExpanded: n, onClick: o }) => {
+    const t = He();
+    return /* @__PURE__ */ e(_t, { sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(bt, { onClick: o, sx: { justifyContent: "center" }, children: /* @__PURE__ */ f(
+      _,
+      {
+        sx: { color: t.palette.primary.main, flexDirection: "row", alignItems: "center" },
+        children: [
+          /* @__PURE__ */ e(wt, { children: /* @__PURE__ */ e(Q, { bold: !0, variant: "body2", children: n ? "View less" : "View more" }) }),
+          /* @__PURE__ */ e(St, { sx: { color: t.palette.primary.main }, children: n ? /* @__PURE__ */ e(gt, {}) : /* @__PURE__ */ e(
+            pt,
+            {
+              sx: {
+                transition: "transform 0.3s ease-in-out",
+                transform: n ? "rotate(180deg)" : "rotate(0deg)"
+              }
+            }
+          ) })
+        ]
+      }
+    ) }) });
+  }
+), we = A(
+  ({
+    totalAmount: n,
+    guid: o,
+    name: t,
+    transactions: s,
+    onClick: i,
+    isLastItem: h = !1,
+    showDivider: d = !0
+  }) => {
+    const { trends: l } = R(), { onEvent: c } = N(), m = `${s.length} ${s.length === 1 ? l.transaction : l.transactions}`, C = () => {
+      i?.(), c(y.TRENDS_CLICK_LIST_ITEM, {
+        ...M,
+        listItem: t
+      });
+    };
+    return /* @__PURE__ */ f(a.Fragment, { children: [
+      /* @__PURE__ */ e(
+        Ee,
+        {
+          leftIcon: o ? /* @__PURE__ */ e(Te, { categoryGuid: o }) : void 0,
+          onClick: C,
+          rightContent: Z(Math.abs(n), "0,0.00"),
+          rightIcon: i ? /* @__PURE__ */ e(Ke, {}) : void 0,
+          subtitle: m,
+          title: t
+        }
+      ),
+      d && /* @__PURE__ */ e(Dt, { sx: { ml: h ? 24 : 68 } })
+    ] }, o);
+  }
+), $t = A(
+  ({ availableHeight: n = 0, onCategoryClick: o }) => {
+    const { collapsedCategories: t, visibleCategories: s, setVisibleListLength: i } = ee(), { isLargeDesktop: h, isDesktop: d } = j(), { trends: l } = R(), { onEvent: c } = N(), [m, C] = a.useState(!1), u = d || h;
+    a.useEffect(() => {
+      const g = Math.floor(n / 64) - 1, T = s.length + t.length;
+      g !== s.length && (i(u ? Math.max(g, 5) : 5), C(g >= T));
+    }, [n]);
+    const b = () => {
+      C(!m), c(y.TRENDS_CLICK_VIEW_MORE, {
+        ...M
+      });
+    }, r = s.length + (m ? t.length : 0);
+    return /* @__PURE__ */ e(_, { sx: { bgColor: "background.paper", width: "100%" }, children: /* @__PURE__ */ f(yt, { children: [
+      /* @__PURE__ */ e(_, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(De, { children: l.categories }) }),
+      s.map((g, T) => /* @__PURE__ */ e(
+        we,
+        {
+          ...g,
+          isLastItem: T === r - 1,
+          onClick: g.transactions.length > 0 ? () => o(g) : void 0,
+          showDivider: !0
+        },
+        g.guid
+      )),
+      /* @__PURE__ */ e(
+        Tt,
+        {
+          in: m,
+          sx: { "&.MuiCollapse-root .MuiListItemButton-root": { paddingLeft: 24 } },
+          children: t.map((g, T) => {
+            const p = s.length + T;
+            return /* @__PURE__ */ e(
+              we,
+              {
+                ...g,
+                isLastItem: p === r - 1,
+                onClick: g.transactions.length > 0 ? () => o(g) : void 0,
+                showDivider: !0
+              },
+              g.guid
+            );
+          })
+        }
+      ),
+      t.length > 0 && /* @__PURE__ */ e(Kt, { isExpanded: m, onClick: b })
+    ] }) });
+  }
+), jt = [
+  "BillAmountNotStandard",
+  "CategorySpendingV2",
+  "CostOfLivingToIncome",
+  "DebtPaymentReminderV2",
+  "DiscoveredAccounts",
+  "DuplicatePaymentV2",
+  "FeeDetected",
+  "GreenGasPurchasesSummary",
+  "LargeTransaction",
+  "LowAccountBalance",
+  "MonthlyDebtToIncomeComparisonV2",
+  "MonthlyDepositSummaryV2",
+  "MonthlyNonEssentialCategorySummaryV2",
+  "MonthlySavingsToIncomeComparison",
+  "MonthlySpendToIncomeComparisonV2",
+  "MonthlySubscriptionAggregateV2",
+  "MonthlyTopMerchantSpendingV3",
+  "MonthlyObligationsStatus",
+  "QuarterlySummary",
+  "SaveAnExtra100Dollars",
+  "SaveEnoughToLiveOn",
+  "SavingsOpportunityV2",
+  "SubscriptionDetected",
+  "SubscriptionPriceIncrease",
+  "SetUpDirectDeposit",
+  "SwitchDirectDeposit",
+  "UnexpectedSubscriptionPayment",
+  "UpcomingBill",
+  "UpcomingSubscription",
+  "WeekendSpendingSummaryV2",
+  "WeeklyNewMerchantsV2",
+  "WeeklyNoSpendDays",
+  "WeeklySmallPurchasesSummary"
+], Yt = ({ onInsightCardClick: n }) => {
+  const o = It(), { onEvent: t } = N(), { isMobile: s, isDesktop: i, isLargeDesktop: h } = j(), { beatStore: d, endpoint: l, sessionToken: c } = ve(), { isInitialized: m } = $(), [C, u] = a.useState(!1), b = o.palette.mode === "dark", r = i || h, g = r || s ? 1 : 2;
   a.useEffect(() => {
-    const I = () => F(window.innerHeight);
-    return window.addEventListener("resize", I), () => window.removeEventListener("resize", I);
+    m && d.loadBeats().finally(() => u(!0));
+  }, [m]);
+  const T = a.useMemo(() => C ? d.getFilteredBeats({ templates: jt }) : [], [C]), p = () => null, w = (I) => {
+    n?.(I), t(y.TRENDS_CLICK_INSIGHT, M);
+  }, D = r ? 200 : 170, E = r ? 170 : 124, k = T.length > 0 ? D : E;
+  return /* @__PURE__ */ e(Et, { sx: { height: k }, children: /* @__PURE__ */ e(
+    ct,
+    {
+      areBeatsLoading: d.isLoading,
+      beats: T,
+      endpoint: l,
+      logOutUser: p,
+      onCardClick: w,
+      showBorder: !0,
+      showCTAColocatedWithText: !1,
+      showCarouselControls: !0,
+      showHeader: r,
+      showIcon: !0,
+      showWithMargin: !1,
+      token: c,
+      useDarkMode: b,
+      userHasFullInsightFeedBeats: !1,
+      variant: "outlined",
+      visibleCardsCount: g
+    }
+  ) });
+}, Ut = A(Yt), Xt = A(({ chartLabel: n, chartColor: o }) => {
+  const { onEvent: t } = N(), {
+    categoryDetailsChartData: { monthlyAmounts: s, tooltipLabels: i }
+  } = ee();
+  return /* @__PURE__ */ e(_, { sx: { pt: 12, width: "100%" }, children: /* @__PURE__ */ e(
+    ye,
+    {
+      baseline: "min",
+      colors: [o],
+      curveType: "bump",
+      customTooltipLabels: i,
+      datasets: [s],
+      height: 265,
+      labels: [n],
+      markStyles: () => ({
+        stroke: o
+      }),
+      onItemClick: () => {
+        t(y.TRENDS_CLICK_CHART, M);
+      },
+      showArea: !0,
+      showAverage: !0,
+      showAxisHighlight: !0,
+      showLegend: !0,
+      showTooltip: !0,
+      showXAxis: !0,
+      showXAxisTicks: !0,
+      showYAxis: !0,
+      showYAxisTicks: !0,
+      useCustomMark: !0,
+      valueFormatterString: "0,0"
+    }
+  ) });
+}), Zt = A(({ onClose: n }) => {
+  const o = He(), { onEvent: t } = N(), { common: s, trends: i } = R(), { selectedCategoryData: h, selectedDateRangeMonthRange: d } = ee(), { sortedTransactions: l } = ie(), [c, m] = a.useState(null);
+  if (!h)
+    return null;
+  const { guid: C, name: u, is_income: b, totalAmount: r } = h, g = b ? i.category_income : i.category_spending, T = xt(C, o), p = b ? i.income_label : i.spending_label, w = ` ${h.transactions.length === 1 ? i.transaction : i.transactions} (${h.transactions.length})`, D = a.useMemo(
+    () => l.find((I) => I.guid === c),
+    [c, l]
+  ), E = (I) => I.category_guid === C || I.top_level_category_guid === C, k = () => {
+    n?.(), t(y.TRENDS_CLICK_BACK, M);
+  };
+  return /* @__PURE__ */ f(
+    fe,
+    {
+      ariaLabelClose: i.close_category_details,
+      isOpen: !0,
+      onClose: k,
+      shouldShowHeaderShadow: !0,
+      title: g,
+      children: [
+        /* @__PURE__ */ f(_, { sx: { alignItems: "center", height: "100%" }, children: [
+          /* @__PURE__ */ f(Lt, { sx: { borderRadius: 0, pb: 4, pt: 16, width: "100%" }, children: [
+            /* @__PURE__ */ e(
+              Ee,
+              {
+                leftIcon: /* @__PURE__ */ e(Te, { categoryGuid: C }),
+                rightContent: Z(Math.abs(r), "0,0.00"),
+                subtitle: d,
+                title: u
+              }
+            ),
+            /* @__PURE__ */ e(Xt, { chartColor: T, chartLabel: p }),
+            /* @__PURE__ */ f(_, { alignItems: "center", direction: "row", justifyContent: "space-between", sx: { mx: 24 }, children: [
+              /* @__PURE__ */ e(Q, { bold: !0, variant: "body1", children: w }),
+              /* @__PURE__ */ e(vt, { filter: E })
+            ] })
+          ] }),
+          /* @__PURE__ */ e(
+            ke,
+            {
+              bgcolor: "transparent",
+              filter: E,
+              height: "calc(100vh - 475px)",
+              onClick: m
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e(
+          fe,
+          {
+            ariaLabelClose: s.close_aria,
+            isOpen: !!D,
+            onClose: () => m(""),
+            title: i.transaction,
+            children: D && /* @__PURE__ */ e(Re, { transaction: D })
+          }
+        )
+      ]
+    }
+  );
+}), Qt = (n, o) => {
+  const t = xe(n, o), s = Le(n, o);
+  return [t, s].filter((i) => i.length > 0);
+}, qt = (n, o) => {
+  const [t, s] = n, i = t, h = s ?? t, d = [];
+  if (i) {
+    const l = i.reduce((c, m) => c + m.y, 0);
+    d.push({ label: o.income_label, amount: l });
+  }
+  if (h) {
+    const l = h.reduce((c, m) => c + m.y, 0);
+    d.push({ label: o.spending_label, amount: l });
+  }
+  return d;
+}, Jt = ({
+  availableHeight: n = 0,
+  minHeight: o = 500,
+  selectedDateRange: t,
+  totals: s
+}) => {
+  const i = Ne(), { onEvent: h } = N(), { trends: d } = R(), { isSmallMobile: l, isMobile: c, isSmallTablet: m, isTablet: C } = j(), u = [i.palette.chart?.chart1, i.palette.chart?.chart2], b = Qt(s, t), r = qt(b, d), [g, T] = a.useState(0), p = 458, w = 195, D = 56, E = c || l ? w : m || C ? p : g;
+  return a.useEffect(() => {
+    const I = Math.max(n - D, o);
+    T(I);
+  }, [n]), /* @__PURE__ */ e(
+    ye,
+    {
+      baseline: "min",
+      colors: u,
+      curveType: "bump",
+      datasets: b,
+      height: E,
+      labels: r,
+      onItemClick: () => {
+        h(y.TRENDS_CLICK_CHART, M);
+      },
+      showArea: !0,
+      showAxisHighlight: !0,
+      showLegend: !0,
+      showTooltip: !0,
+      showXAxis: !0,
+      showXAxisTicks: !0,
+      showYAxis: !0,
+      showYAxisTicks: !0,
+      valueFormatterString: "0,0"
+    }
+  );
+}, en = A(Jt), tn = ({ onBackClick: n, onInsightCardClick: o, sx: t }) => {
+  const { onEvent: s } = N(), { config: i } = st(), { isLargeDesktop: h, isDesktop: d, isMobile: l } = j(), { visibleAccounts: c } = ce(), { loadDateRangeCategoryTotals: m, loadMonthlyCategoryTotals: C, monthlyCategoryTotals: u } = K(), { setFilter: b } = ie(), { selectedDateRange: r, setSelectedCategoryData: g, setSelectedDateRange: T } = ee(), {
+    isCopyLoaded: p,
+    isInitialized: w,
+    selectedAccounts: D,
+    selectedAccountGuids: E,
+    setSelectedAccounts: k
+  } = $(), { trends: I } = R(), H = Ue(), L = d || h, [x, z] = a.useState(!1), [le, F] = a.useState(!1), [Y, de] = a.useState("Chart"), [P, te] = a.useState(""), [he, ne] = a.useState(!1), [oe, ue] = a.useState(window.innerHeight), se = oe - 208, me = oe - (H ? 494 : 266);
+  a.useEffect(() => {
+    const v = () => ue(window.innerHeight);
+    return window.addEventListener("resize", v), () => window.removeEventListener("resize", v);
   }, []), a.useEffect(() => {
-    A(i);
-  }, [i]), a.useEffect(() => {
-    x && _(v, o.start, o.end).then(() => {
-      y(
-        v,
-        o.start,
-        o.end
+    k(c);
+  }, [c]), a.useEffect(() => {
+    w && c?.length ? (F(!1), m(D, r.start, r.end).then(() => {
+      C(
+        D,
+        r.start,
+        r.end
       );
     }).finally(() => {
-      E(!0), s(p.TRENDS_LOAD_WIDGET, {
-        ...B,
-        time_period: `${se(o.end, o.start)}M`
+      z(!0), s(y.TRENDS_LOAD_WIDGET, {
+        ...M,
+        time_period: `${re(r.end, r.start)}M`
       });
-    });
-  }, [x, v, o]), a.useEffect(() => {
-    if (c.length !== 0) {
-      const I = {
-        accounts: M,
-        dateRange: { start: o.start, end: o.end }
+    })) : w && !c?.length && (F(!0), z(!0), s(y.TRENDS_LOAD_WIDGET, {
+      ...M,
+      time_period: `${re(r.end, r.start)}M`
+    }));
+  }, [w, D, r]), a.useEffect(() => {
+    w && !c?.length ? F(!0) : c?.length && F(!1);
+  }, [w, c]), a.useEffect(() => {
+    if (u.length !== 0) {
+      const v = {
+        accounts: E,
+        dateRange: { start: r.start, end: r.end }
       };
-      C({
-        ...I,
-        custom: (N) => !!c.find(
-          (W) => W.top_level_category_guid === N.top_level_category_guid || W.category_guid === N.category_guid
+      b({
+        ...v,
+        custom: (V) => !!u.find(
+          (U) => U.top_level_category_guid === V.top_level_category_guid || U.category_guid === V.category_guid
         )
       });
     }
-  }, [c]);
-  const J = (I) => {
-    const N = ge(I?.[0], 1), W = I?.[1], ee = se(W, N);
-    D({ start: N, end: W }), s(p.TRENDS_CLICK_TIME_WINDOW, {
-      ...B,
-      time_period: ee + "M"
+  }, [u]);
+  const ge = (v) => {
+    g(v), ne(!0);
+  }, S = () => {
+    g(null), ne(!1);
+  }, W = (v, V) => {
+    de(V ?? Y), s(y.TRENDS_CLICK_TOGGLE_VIEW, {
+      ...M,
+      toggleView: V
+    });
+  }, G = (v) => {
+    const V = Ie(v?.[0], 1), U = v?.[1], Fe = re(U, V);
+    T({ start: V, end: U }), s(y.TRENDS_CLICK_TIME_WINDOW, {
+      ...M,
+      time_period: Fe + "M"
     });
-  }, ie = (I) => {
-    s(p.TRENDS_CLICK_FILTER, {
-      ...B,
-      filterValue: I
+  }, pe = (v) => {
+    s(y.TRENDS_CLICK_FILTER, {
+      ...M,
+      filterValue: v
     });
-  }, U = h.show_connections_widget_in_master ? "buttons" : "no-buttons", X = !i?.length, Q = i.length > 0;
-  return !d || !L ? /* @__PURE__ */ e($, {}) : (console.log("accounts: ", i), console.log("!accounts?.length: ", X), console.log("accounts.length > 0: ", Q), /* @__PURE__ */ f(
-    pe,
+  }, Ge = (v) => {
+    te(v);
+  }, Be = () => {
+    te(""), s(y.TRENDS_CLICK_ALL_CATEGORIES, M);
+  }, ze = i.show_connections_widget_in_master ? "buttons" : "no-buttons";
+  return !p || !x ? /* @__PURE__ */ e(J, {}) : /* @__PURE__ */ e(
+    Ae,
     {
-      accountOptions: i,
-      calendarActions: { onRangeChanged: J },
-      dateRange: o,
-      dateRangeVariant: u ? "timeframetabs" : "timeframebuttons",
-      onAccountsFilterClick: ie,
-      onBackClick: t,
-      sx: n,
-      title: w.title,
-      children: [
-        /* @__PURE__ */ e(
-          ue,
-          {
-            header: w.zero_state_content_header,
-            icon: "",
-            onClick: () => {
-            },
-            primaryButton: w.empty_state_primary,
-            subText: w.empty_state_sub_text,
-            sx: { height: Z },
-            variant: U
-          }
-        ),
-        /* @__PURE__ */ e(
-          ue,
-          {
-            header: w.zero_state_content_header,
-            icon: "",
-            onClick: () => {
-            },
-            primaryButton: w.empty_state_primary,
-            subText: w.empty_state_sub_text,
-            sx: { height: Z },
-            variant: U
-          }
-        )
-      ]
+      accountOptions: c,
+      calendarActions: { onRangeChanged: G },
+      dateRange: r,
+      dateRangeVariant: l ? "timeframetabs" : "timeframebuttons",
+      onAccountsFilterClick: pe,
+      onBackClick: n,
+      sx: t,
+      title: I.title,
+      children: le ? /* @__PURE__ */ e(
+        Mt,
+        {
+          header: I.zero_state_content_header,
+          icon: "",
+          onClick: () => {
+          },
+          primaryButton: I.empty_state_primary,
+          subText: I.empty_state_sub_text,
+          sx: { height: se },
+          variant: ze
+        }
+      ) : /* @__PURE__ */ f(
+        _,
+        {
+          sx: {
+            px: l ? 0 : 48
+          },
+          children: [
+            /* @__PURE__ */ f(
+              _,
+              {
+                flexDirection: "row",
+                justifyContent: "space-between",
+                sx: { pb: l ? 12 : 24, pt: l ? 24 : 48 },
+                children: [
+                  /* @__PURE__ */ e(
+                    Oe,
+                    {
+                      selectedCategoryGuid: P,
+                      selectedDateRange: r
+                    }
+                  ),
+                  /* @__PURE__ */ e(We, { onTabChange: W, selectedTab: Y })
+                ]
+              }
+            ),
+            /* @__PURE__ */ e(_, { alignItems: "center", flexDirection: "row", width: "100%", children: /* @__PURE__ */ e(O, { flexGrow: 1, children: P && /* @__PURE__ */ f(Ce, { onClick: Be, sx: { p: 0, pr: 5 }, children: [
+              /* @__PURE__ */ e(ae, { name: "arrow_back" }),
+              I.all_categories
+            ] }) }) }),
+            /* @__PURE__ */ f(_, { flexDirection: L ? "row" : "column", gap: L ? 48 : 16, children: [
+              Y === "Chart" && /* @__PURE__ */ f(Pe, { children: [
+                /* @__PURE__ */ e(O, { sx: { width: L ? "68%" : "100%" }, children: /* @__PURE__ */ e(
+                  en,
+                  {
+                    availableHeight: se,
+                    minHeight: 450,
+                    selectedDateRange: r,
+                    totals: u
+                  }
+                ) }),
+                /* @__PURE__ */ f(_, { gap: 16, sx: { width: L ? "32%" : "100%" }, children: [
+                  H && /* @__PURE__ */ e(Ut, { onInsightCardClick: o }),
+                  /* @__PURE__ */ e(
+                    $t,
+                    {
+                      availableHeight: me,
+                      onCategoryClick: ge
+                    }
+                  )
+                ] })
+              ] }),
+              Y === "Table" && /* @__PURE__ */ e(O, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
+                Ve,
+                {
+                  height: "unset",
+                  monthlyCategoryTotals: u,
+                  onClickRow: Ge,
+                  selectedCategory: P,
+                  selectedDateRange: r
+                }
+              ) })
+            ] }),
+            he && /* @__PURE__ */ e(Zt, { onClose: S })
+          ]
+        }
+      )
     }
-  ));
-}, tn = O(_t);
+  );
+}, qn = A(tn);
 export {
-  Jt as TrendsFullWidget,
-  en as TrendsMicroWidget,
-  Qt as TrendsMiniWidget,
-  sn as TrendsStore,
-  tn as TrendsWidget
+  Xn as TrendsFullWidget,
+  Qn as TrendsMicroWidget,
+  Zn as TrendsMiniWidget,
+  to as TrendsStore,
+  qn as TrendsWidget
 };