@mx-cartographer/experiences 6.26.18-alpha.mega3 → 6.26.18-alpha.mega4

package/dist/trends/index.es.js

@@ -1,12 +1,1103 @@
-import { default as t } from "./TrendsFullWidget/index.es.js";
-import { default as o } from "./TrendsMiniWidget/index.es.js";
-import { TrendsMicroWidget as s } from "./TrendsMicroWidget/index.es.js";
-import { default as a } from "./TrendsWidget/index.es.js";
-import { TrendsStore as l } from "./stores/TrendsStore/index.es.js";
+import { jsx as e, jsxs as y } from "react/jsx-runtime";
+import m from "react";
+import { observer as E } from "mobx-react-lite";
+import { Icon as X, Text as W, CategoryIcon as me, P as U, H3 as we, ChevronRightIcon as Ve, MerchantLogo as ze } from "@mxenabled/mxui";
+import O from "@mui/material/Box";
+import f from "@mui/material/Stack";
+import ge from "@mui/material/Button";
+import { addSeconds as xe } from "date-fns/addSeconds";
+import { differenceInCalendarMonths as De } from "date-fns/differenceInCalendarMonths";
+import { a as be, C as Le } from "../Category-5S6uwuXz.mjs";
+import { c as Pe, i as $e, d as je, e as Ke, b as ve, g as Ie, f as Te } from "../SpendingData-ByFCw95X.mjs";
+import Ye from "@mui/material/ToggleButton";
+import Ue from "@mui/material/ToggleButtonGroup";
+import { u as A, k as P, g as q, a as $, n as pe, c as se, w as j, l as Ee, p as Xe, j as Ze } from "../hooks-ClhFlg78.mjs";
+import { u as F } from "../useScreenSize-B6JyS_Lj.mjs";
+import { f as Z, D as G } from "../Dialog-CWW597AF.mjs";
+import { DataGridPro as Qe } from "@mui/x-data-grid-pro";
+import { C as qe } from "../CurrencyText-YUhH2caW.mjs";
+import { b as Je } from "../Localization-2MODESHW.mjs";
+import { H as _e } from "../HeaderCell-DjuifqHJ.mjs";
+import { A as D, W as Me } from "../WidgetContainer-CmGNZW0M.mjs";
+import { a as et, T as tt, S as nt } from "../TransactionDetails-B5qfs9Zh.mjs";
+import { D as Ae } from "../Drawer-kEE73B87.mjs";
+import { S as ot, u as st } from "../TrendsStore-Borh98aN.mjs";
+import { T as to } from "../TrendsStore-Borh98aN.mjs";
+import { L as Q } from "../Loader-Dp1P2gNw.mjs";
+import { useTheme as ye } from "@mui/material/styles";
+import { L as fe } from "../LineChart-CQWu5KoO.mjs";
+import { M as rt } from "../MiniWidgetContainer-BcNPxZt2.mjs";
+import { subMonths as at, format as it, fromUnixTime as ct } from "date-fns";
+import { TrendingUp as lt, TrendingDown as dt, MultilineChart as ut, ExpandLess as gt, ExpandMore as ht } from "@mxenabled/mx-icons";
+import { a as mt, f as z } from "../NumberFormatting-CtWHhyBX.mjs";
+import { M as pt } from "../MicroWidgetContainer-DaLW43tE.mjs";
+import yt from "@mui/material/Collapse";
+import ke from "@mui/material/Divider";
+import Re from "@mui/material/List";
+import He from "@mui/material/ListItem";
+import Ne from "@mui/material/ListItemButton";
+import he from "@mui/material/ListItemIcon";
+import We from "@mui/material/ListItemText";
+import ft from "@mui/material/styles/useTheme";
+import { useTheme as Ct, Stack as bt } from "@mui/material";
+import { b as Tt } from "../ViewMoreMicroCard-CAPFNz-J.mjs";
+import _t from "@mui/material/Link";
+import { b as St } from "../CategoryUtil-DRyruNgi.mjs";
+import { E as wt } from "../EmptyState-Dcb-o2tl.mjs";
+const xt = (t) => be[t] ?? be.default, Dt = (t) => Le[t];
+function Lt(t, s) {
+  const n = [], o = new Date(t);
+  for (; o <= s; ) {
+    const r = o.getFullYear(), i = String(o.getMonth() + 1).padStart(2, "0");
+    n.push(+`${r}${i}`), o.setMonth(o.getMonth() + 1);
+  }
+  return n;
+}
+const vt = (t) => t.reduce((n, o) => {
+  const r = {
+    top_level_category_guid: o.top_level_category_guid,
+    category_guid: o.category_guid,
+    amount: o.total,
+    year_month: o.year_month
+  }, { top_level_category_guid: i, category_guid: a } = r;
+  return n[a] || (n[a] = []), n[a].push(r), i !== a && (n[i] || (n[i] = []), n[i].push(r)), n;
+}, {}), It = (t, s, n) => {
+  const o = vt(t), r = Lt(s, n);
+  return Object.entries(o).map(([a, c]) => {
+    const u = c[0].top_level_category_guid, p = r.map((l) => {
+      const d = c.filter((h) => h.year_month === l).reduce((h, C) => h + Math.abs(C.amount), 0), b = Number(String(l).slice(0, 4)), g = Number(String(l).slice(4));
+      return { x: new Date(b, g - 1), y: d };
+    }).sort((l, d) => l.x.getTime() - d.x.getTime());
+    return {
+      top_level_category_guid: u,
+      category_guid: a,
+      category_name: Dt(a),
+      category_color: xt(u),
+      dataset: p
+    };
+  });
+}, Et = (t, s) => {
+  const n = typeof t == "string" ? parseFloat(t.replace(/[^0-9.-]+/g, "")) : t, o = typeof s == "string" ? parseFloat(s.replace(/[^0-9.-]+/g, "")) : s;
+  return (n || 0) - (o || 0);
+}, Oe = ({ selectedTab: t, onTabChange: s }) => /* @__PURE__ */ e(
+  Ue,
+  {
+    exclusive: !0,
+    onChange: s,
+    orientation: "horizontal",
+    value: t,
+    children: ["Chart", "Table"].map((n) => /* @__PURE__ */ e(Ye, { color: "primary", sx: { width: 56 }, value: n, children: n === "Chart" ? /* @__PURE__ */ e(X, { name: "table_chart_view" }) : /* @__PURE__ */ e(X, { name: "format_list_bulleted" }) }, n))
+  }
+), Be = ({ selectedDateRange: t, selectedCategoryGuid: s }) => {
+  const { trends: n } = A(), { isMobile: o, isDesktop: r } = F(), { getCategoryName: i } = P(), a = m.useMemo(() => {
+    const c = Z(
+      t.start,
+      o ? G.MONTH_SHORT_YEAR : G.MONTH_YEAR
+    ), u = Z(
+      t.end,
+      o ? G.MONTH_SHORT_YEAR : G.MONTH_YEAR
+    );
+    return `${c} - ${u}`;
+  }, [t, o]);
+  return /* @__PURE__ */ y(O, { sx: { mr: 10, minWidth: "60%" }, children: [
+    /* @__PURE__ */ e(
+      W,
+      {
+        display: "block",
+        fontWeight: 700,
+        sx: {
+          whiteSpace: "normal",
+          overflow: "visible",
+          textOverflow: "unset"
+        },
+        variant: r ? "H3" : "Body",
+        children: i(s) || n.sub_title
+      }
+    ),
+    /* @__PURE__ */ e(W, { variant: r ? "Body" : "Small", children: a })
+  ] });
+}, Mt = (t) => {
+  const s = t.row[t.field];
+  return /* @__PURE__ */ e(f, { alignItems: "flex-end", tabIndex: t.tabIndex, children: /* @__PURE__ */ e(qe, { amount: s, variant: "Small" }) });
+}, At = ({ categoryGuid: t, topLevelCategoryGuid: s }) => {
+  const { categories: n } = A(), o = Le[t];
+  return /* @__PURE__ */ y(f, { alignItems: "center", direction: "row", justifyContent: "center", children: [
+    /* @__PURE__ */ e(
+      O,
+      {
+        "aria-label": Je(n.category_icon_label_aria, o),
+        role: "img",
+        children: /* @__PURE__ */ e(me, { categoryGuid: s })
+      }
+    ),
+    /* @__PURE__ */ e(W, { sx: { ml: 12, pb: 6 }, variant: "Small", children: o })
+  ] });
+}, kt = (t) => /* @__PURE__ */ e(f, { alignItems: "center", direction: "row", height: "100%", width: "100%", children: /* @__PURE__ */ e(
+  At,
+  {
+    categoryGuid: t.row.category,
+    topLevelCategoryGuid: t.row.top_level_category_guid
+  }
+) }), Rt = (t, s) => {
+  const n = [], o = new Date(t);
+  for (; o <= s; ) {
+    const r = Z(o, G.MONTH);
+    n.push(r), o.setMonth(o.getMonth() + 1);
+  }
+  return n;
+}, Ge = ({
+  monthlyCategoryTotals: t,
+  selectedDateRange: s,
+  selectedCategory: n,
+  onClickRow: o,
+  height: r = "100dvh",
+  sx: i = {}
+}) => {
+  const { onEvent: a } = q(), c = Z(/* @__PURE__ */ new Date(), G.MONTH_SHORT), [u, p] = m.useState([
+    { field: c, sort: "desc" }
+  ]), l = m.useMemo(() => Rt(s.start, s.end), [s]), d = [
+    {
+      field: "category",
+      headerName: "Category",
+      minWidth: 175,
+      renderHeader: _e,
+      renderCell: kt,
+      sortable: !0,
+      type: "string"
+    },
+    ...l.map(
+      (g) => ({
+        field: g,
+        headerName: g,
+        minWidth: 75,
+        renderHeader: _e,
+        renderCell: Mt,
+        align: "right",
+        headerAlign: "right",
+        sortable: !0,
+        hideSortIcons: !1,
+        type: "number",
+        sortComparator: Et
+      })
+    )
+  ], b = m.useMemo(() => {
+    const T = (n ? t.filter(
+      (h) => h.category_guid === n || h.top_level_category_guid === n
+    ) : t).reduce(
+      (h, C) => {
+        const { category_guid: S, top_level_category_guid: x, month: L, total: H, year: M } = C, w = n ? S : x;
+        h[w] || (h[w] = {
+          id: w,
+          category: w,
+          category_guid: S,
+          top_level_category_guid: x
+        });
+        const v = Z(new Date(M, L - 1), G.MONTH_SHORT);
+        return h[w][v] || (h[w][v] = 0), h[w][v] = h[w][v] + H, h;
+      },
+      {}
+    );
+    return Object.values(T);
+  }, [t, n]);
+  return /* @__PURE__ */ e(O, { sx: { height: r, width: "100%", overflowX: "auto", boxShadow: "none", ...i }, children: /* @__PURE__ */ e(
+    Qe,
+    {
+      columns: d,
+      disableColumnFilter: !0,
+      disableColumnMenu: !0,
+      hideFooter: !0,
+      initialState: { sorting: { sortModel: u } },
+      onRowClick: (g) => {
+        o?.(g.row.category), a(D.TRENDS_CLICK_TABLE_ROW);
+      },
+      onSortModelChange: (g) => {
+        p(g), a(D.TRENDS_CLICK_TABLE_SORT);
+      },
+      rows: b,
+      slotProps: { baseIconButton: { color: "secondary", sx: { ml: 8 } } },
+      sortModel: u,
+      sortingOrder: ["asc", "desc"]
+    }
+  ) });
+}, Ht = {
+  title: "Transaction List"
+}, Nt = ({
+  categoryGuid: t,
+  dateRange: s,
+  isOpen: n,
+  onClose: o
+}) => {
+  const { onEvent: r } = q(), { selectedAccountGuids: i } = $(), { common: a } = A(), { setFilter: c, sortedTransactions: u } = pe(), [p, l] = m.useState(""), d = m.useMemo(
+    () => u.find((g) => g.guid === p),
+    [p, u]
+  );
+  m.useEffect(() => {
+    c({
+      accounts: i,
+      dateRange: s,
+      custom: (g) => t === "" || t === g.category_guid || t === g.top_level_category_guid,
+      showSplits: !!t
+    });
+  }, [i, t, s]), m.useEffect(() => r(D.TRENDS_VIEW_TRANSACTIONS), []);
+  const b = () => {
+    l(""), o();
+  };
+  return /* @__PURE__ */ y(
+    Ae,
+    {
+      ariaLabelClose: a.close_aria,
+      isOpen: n,
+      onClose: b,
+      title: Ht.title,
+      children: [
+        d && /* @__PURE__ */ e(et, { transaction: d }),
+        !d && /* @__PURE__ */ e(tt, { onClick: l })
+      ]
+    }
+  );
+}, Wt = E(Nt), Ot = ({ onBackClick: t, sx: s }) => {
+  const { onEvent: n } = q(), { isDesktop: o, isTablet: r, isMobile: i } = F(), { visibleAccounts: a } = se(), { loadMonthlyCategoryTotals: c, monthlyCategoryTotals: u, getCategoryName: p } = P(), { sortedTransactions: l } = pe(), { selectedDateRange: d, setSelectedDateRange: b } = j(), { isCopyLoaded: g, isInitialized: T, selectedAccounts: h, setSelectedAccounts: C } = $(), { trends: S } = A(), [x, L] = m.useState(!1), [H, M] = m.useState(!1), [w, v] = m.useState("Chart"), [k, K] = m.useState(""), [V, re] = m.useState(window.innerHeight), ee = V - (i ? 315 : 345);
+  m.useEffect(() => {
+    const _ = () => re(window.innerHeight);
+    return window.addEventListener("resize", _), () => window.removeEventListener("resize", _);
+  }, []), m.useEffect(() => {
+    C(a);
+  }, [a]), m.useEffect(() => {
+    T && c(
+      h,
+      d.start,
+      d.end
+    ).finally(() => {
+      L(!0);
+    });
+  }, [T, h, d]);
+  const te = m.useMemo(() => {
+    if (!x) return { stackedDatasets: [], unstackedDatasets: [] };
+    const _ = It(
+      u,
+      d.start,
+      d.end
+    ), N = k.length ? _.filter(
+      (B) => B.top_level_category_guid === k || B.category_guid === k
+    ) : Pe(_);
+    return {
+      stackedDatasets: N.filter($e),
+      unstackedDatasets: N.filter(je)
+    };
+  }, [u, k, d]), ne = (_, N) => {
+    v(N ?? w), n(D.TRENDS_CLICK_TOGGLE);
+  }, oe = (_) => {
+    const N = xe(_?.[0], 1), B = _?.[1], I = De(B, N);
+    b({ start: N, end: B }), n(D.TRENDS_CLICK_DATE, {
+      time_period: I + "M"
+    });
+  }, ae = () => {
+    n(D.TRENDS_CLICK_FILTER);
+  }, ie = (_) => {
+    K(_);
+  }, ce = (_) => {
+    K(_), n(D.TRENDS_CLICK_LEGEND, { category: p(_) });
+  }, le = (_) => {
+    n(D.TRENDS_HOVER_LEGEND, { category: p(_) });
+  }, de = (_) => {
+    n(D.TRENDS_HOVER_AREA, { category: _ });
+  }, ue = (_) => {
+    n(D.TRENDS_HOVER_POINT, { category: _ });
+  };
+  return !g || !T || !x ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ y(
+    Me,
+    {
+      accountOptions: a,
+      calendarActions: { onRangeChanged: oe },
+      dateRange: d,
+      dateRangeVariant: "timeframebuttons",
+      onAccountsFilterClick: ae,
+      onBackClick: t,
+      sx: s,
+      title: S.title,
+      children: [
+        /* @__PURE__ */ y(
+          f,
+          {
+            sx: {
+              // eslint-disable-next-line no-nested-ternary
+              px: o ? 48 : r ? 24 : 12
+            },
+            children: [
+              /* @__PURE__ */ y(
+                f,
+                {
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                  sx: { pb: i ? 12 : 24, pt: i ? 24 : 48 },
+                  children: [
+                    /* @__PURE__ */ e(
+                      Be,
+                      {
+                        selectedCategoryGuid: k,
+                        selectedDateRange: d
+                      }
+                    ),
+                    /* @__PURE__ */ e(Oe, { onTabChange: ne, selectedTab: w })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ y(f, { alignItems: "center", flexDirection: "row", width: "100%", children: [
+                /* @__PURE__ */ e(O, { flexGrow: 1, children: k && /* @__PURE__ */ y(ge, { onClick: () => K(""), sx: { p: 0, pr: 5 }, children: [
+                  /* @__PURE__ */ e(X, { name: "arrow_back" }),
+                  S.all_categories
+                ] }) }),
+                /* @__PURE__ */ e(ge, { onClick: () => M(!0), sx: { px: 5 }, children: `${S.view_transactions} (${l.length})` })
+              ] }),
+              /* @__PURE__ */ y(O, { children: [
+                w === "Chart" && /* @__PURE__ */ e(
+                  ot,
+                  {
+                    availableHeight: ee,
+                    onClickLegend: ce,
+                    onHoverArea: de,
+                    onHoverLegend: le,
+                    onHoverPoint: ue,
+                    stackedDatasets: te.stackedDatasets,
+                    unstackedDatasets: te.unstackedDatasets
+                  }
+                ),
+                w === "Table" && /* @__PURE__ */ e(
+                  Ge,
+                  {
+                    monthlyCategoryTotals: u,
+                    onClickRow: ie,
+                    selectedCategory: k,
+                    selectedDateRange: d
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(
+          Wt,
+          {
+            categoryGuid: k,
+            dateRange: d,
+            isOpen: H,
+            onClose: () => M(!1)
+          }
+        )
+      ]
+    }
+  );
+}, Xn = E(Ot), Bt = () => {
+  const t = ye(), { monthlyCategoryTotals: s } = P(), { trends: n } = A(), o = Ke(s);
+  return /* @__PURE__ */ e(
+    fe,
+    {
+      baseline: "min",
+      colors: [t.palette.primary.main],
+      datasets: [o],
+      height: 300,
+      labels: [n.spending_label],
+      showArea: !0,
+      showAverage: !0,
+      showLegend: !0,
+      showMarkLabel: !0,
+      useCustomMark: !0,
+      valueFormatterString: "0,0"
+    }
+  );
+}, Gt = E(Bt), Ft = ({ onPrimaryCtaClick: t, sx: s }) => {
+  const { visibleAccounts: n } = se(), { loadMonthlyCategoryTotals: o, monthlyTotalsLoaded: r } = P(), { isInitialized: i } = Ee(), { trends: a } = A(), { isCopyLoaded: c, selectedAccounts: u, setSelectedAccounts: p } = $();
+  return m.useEffect(() => {
+    p(n);
+  }, [n]), m.useEffect(() => {
+    i && o(u).finally();
+  }, [i, u]), !c || !i ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ e(
+    rt,
+    {
+      onPrimaryCtaClick: t,
+      primaryCtaLabel: a.primary_cta,
+      subTitle: a.sub_title,
+      sx: s,
+      title: a.mini_title,
+      children: r ? /* @__PURE__ */ e(Gt, {}) : /* @__PURE__ */ e(Q, {})
+    }
+  );
+}, Zn = E(Ft), Vt = 70, Se = ({
+  title: t,
+  totalAmount: s,
+  transactionType: n,
+  percentage: o,
+  secondaryLabel: r,
+  shouldDisplayPercentage: i
+}) => {
+  const { availableWidth: a } = Xe(), c = m.useRef(null), u = m.useRef(null), p = mt(Number(Math.abs(o)), {
+    style: "percent",
+    minimumIntegerDigits: 1
+  }), l = a === 288 && z(s, "0,0.00").length > 10 ? z(s, "0,0") : z(s, "0,0.00"), d = n === "spending" ? o > 0 : o >= 0, b = n === "spending" ? "error.main" : "success.main", g = n === "spending" ? "success.main" : "text.secondary", T = c?.current, h = u?.current, C = T && h ? T.scrollWidth > h.clientWidth - Vt : !1;
+  return /* @__PURE__ */ y(
+    f,
+    {
+      sx: {
+        border: 1,
+        borderColor: "divider",
+        borderRadius: "4px",
+        flex: 1,
+        minWidth: 0,
+        px: 12,
+        py: 8
+      },
+      children: [
+        /* @__PURE__ */ y(
+          f,
+          {
+            sx: {
+              alignItems: "center",
+              flexDirection: "row",
+              justifyContent: "space-between"
+            },
+            children: [
+              /* @__PURE__ */ e(U, { color: "text.secondary", variant: "caption", children: t }),
+              i && /* @__PURE__ */ y(f, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
+                d ? /* @__PURE__ */ e(lt, { size: 20, sx: { color: b } }) : /* @__PURE__ */ e(dt, { size: 20, sx: { color: g } }),
+                /* @__PURE__ */ e(
+                  U,
+                  {
+                    sx: {
+                      color: d ? b : g,
+                      fontWeight: 600
+                    },
+                    variant: "body2",
+                    children: p
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ y(
+          f,
+          {
+            ref: u,
+            sx: {
+              alignItems: "center",
+              flexDirection: "row",
+              justifyContent: "space-between"
+            },
+            children: [
+              /* @__PURE__ */ e(
+                O,
+                {
+                  ref: c,
+                  sx: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+                  children: /* @__PURE__ */ e(we, { children: l })
+                }
+              ),
+              i && a >= 450 && !C && /* @__PURE__ */ e(
+                U,
+                {
+                  color: d ? b : g,
+                  variant: "caption",
+                  children: r
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}, zt = E(() => {
+  const { trends: t } = A();
+  return /* @__PURE__ */ y(f, { sx: { alignItems: "start", flexDirection: "row", gap: 12 }, children: [
+    /* @__PURE__ */ e(ut, { size: 32 }),
+    /* @__PURE__ */ y(f, { 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 })
+    ] })
+  ] });
+}), Qn = E(({ onCtaClick: t }) => {
+  const { visibleAccounts: s } = se(), { onEvent: n } = q(), { monthlyCategoryTotals: o, loadMonthlyCategoryTotals: r, monthlyTotalsLoaded: i } = P(), a = {
+    start: at(/* @__PURE__ */ new Date(), 1),
+    end: /* @__PURE__ */ new Date()
+  }, { trends: c } = A(), { selectedAccounts: u, setSelectedAccounts: p, isInitialized: l } = $();
+  m.useEffect(() => {
+    p(s);
+  }, [s]), m.useEffect(() => {
+    l && r(u, a.start).then(() => {
+      n(D.TRENDS_LOAD_WIDGET, {
+        state: s?.length ? "default" : "zeroState"
+      });
+    });
+  }, [l, u]);
+  const { spendingData: d, incomeData: b } = m.useMemo(
+    () => ({
+      spendingData: ve(o, a),
+      incomeData: Ie(o, a)
+    }),
+    [o, a]
+  ), [g, T] = d, [h, C] = b, S = Te(T.y, g.y), x = Te(C.y, h.y), L = l && !s?.length, H = () => {
+    n(
+      L ? D.TRENDS_CLICK_GET_STARTED : D.TRENDS_CLICK_VIEW_MORE
+    ), t();
+  };
+  return !i || !l ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ e(
+    pt,
+    {
+      className: "mx-trends-microwidget",
+      ctaLabel: c.micro_primary_cta_label,
+      onCTAClick: H,
+      subHeader: L ? void 0 : c.micro_subheader,
+      title: c.title,
+      children: L ? /* @__PURE__ */ e(zt, {}) : /* @__PURE__ */ y(
+        f,
+        {
+          sx: {
+            alignItems: "stretch",
+            flexDirection: "row",
+            gap: 12
+          },
+          children: [
+            /* @__PURE__ */ e(
+              Se,
+              {
+                percentage: S,
+                secondaryLabel: c.micro_secondary_label,
+                shouldDisplayPercentage: T.y !== 0 && g.y !== 0,
+                title: c.spending_label,
+                totalAmount: T.y,
+                transactionType: "spending"
+              }
+            ),
+            /* @__PURE__ */ e(
+              Se,
+              {
+                percentage: x,
+                secondaryLabel: c.micro_secondary_label,
+                shouldDisplayPercentage: C.y !== 0 && h.y !== 0,
+                title: c.income_label,
+                totalAmount: C.y,
+                transactionType: "income"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}), Pt = E(
+  ({ isExpanded: t, onClick: s }) => {
+    const n = ft();
+    return /* @__PURE__ */ e(He, { sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(Ne, { onClick: s, sx: { justifyContent: "center" }, children: /* @__PURE__ */ y(
+      f,
+      {
+        sx: { color: n.palette.primary.main, flexDirection: "row", alignItems: "center" },
+        children: [
+          /* @__PURE__ */ e(We, { children: /* @__PURE__ */ e(W, { bold: !0, variant: "body2", children: t ? "View less" : "View more" }) }),
+          /* @__PURE__ */ e(he, { sx: { color: n.palette.primary.main }, children: t ? /* @__PURE__ */ e(gt, {}) : /* @__PURE__ */ e(
+            ht,
+            {
+              sx: {
+                transition: "transform 0.3s ease-in-out",
+                transform: t ? "rotate(180deg)" : "rotate(0deg)"
+              }
+            }
+          ) })
+        ]
+      }
+    ) }) });
+  }
+), Ce = ({
+  onClick: t,
+  leftIcon: s,
+  rightIcon: n,
+  title: o,
+  subtitle: r,
+  rightContent: i,
+  titleBold: a = !0,
+  rightContentBold: c = !0
+}) => {
+  const u = /* @__PURE__ */ y(m.Fragment, { children: [
+    s && /* @__PURE__ */ e(he, { sx: { ml: 0 }, children: s }),
+    /* @__PURE__ */ e(We, { children: /* @__PURE__ */ y(
+      f,
+      {
+        sx: {
+          alignItems: "center",
+          flexDirection: "row",
+          marginLeft: 12
+        },
+        children: [
+          /* @__PURE__ */ y(f, { sx: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ e(W, { bold: a, variant: "body1", children: o }),
+            r && /* @__PURE__ */ e(W, { variant: "caption", children: r })
+          ] }),
+          /* @__PURE__ */ y(f, { sx: { flexDirection: "row", alignItems: "center", gap: 1 }, children: [
+            i && /* @__PURE__ */ e(W, { bold: c, display: "flex", variant: "body1", children: i }),
+            n && /* @__PURE__ */ e(he, { children: n })
+          ] })
+        ]
+      }
+    ) })
+  ] });
+  return /* @__PURE__ */ e(He, { sx: { bgcolor: "background.paper" }, children: t ? /* @__PURE__ */ e(
+    Ne,
+    {
+      onClick: t,
+      sx: {
+        py: 14
+      },
+      children: u
+    }
+  ) : /* @__PURE__ */ e(
+    f,
+    {
+      sx: {
+        py: 14,
+        px: 24,
+        width: "100%",
+        flexDirection: "row",
+        alignItems: "center"
+      },
+      children: u
+    }
+  ) });
+}, $t = E(
+  ({ onClick: t, name: s, amount: n, guid: o, transactions: r }) => {
+    const { trends: i } = A(), a = r?.length || 0, c = `${a} ${a === 1 ? i.transaction : i.transactions}`;
+    return /* @__PURE__ */ e(
+      Ce,
+      {
+        leftIcon: o ? /* @__PURE__ */ e(me, { categoryGuid: o }) : void 0,
+        onClick: t,
+        rightContent: z(n, "0,0.00"),
+        rightIcon: t ? /* @__PURE__ */ e(Ve, {}) : void 0,
+        subtitle: c,
+        title: s
+      }
+    );
+  }
+), jt = E(
+  ({ availableHeight: t = 0, onListItemClick: s, transactions: n }) => {
+    const { visibleListItems: o, collapsedListItems: r, setVisibleListLength: i } = j(), { isLargeDesktop: a, isDesktop: c } = F(), { trends: u } = A(), [p, l] = m.useState(!1), d = c || a;
+    m.useEffect(() => {
+      const h = Math.floor(t / 64) - 1, C = o.length + r.length;
+      h !== o.length && (i(d ? Math.max(h, 5) : 5), l(h >= C));
+    }, [t]);
+    const b = (h) => n.filter((C) => C.category_guid === h), g = ({ guid: h, name: C, amount: S }, x, L) => {
+      const H = o.length + (p ? r.length : 0), w = (L === r ? o.length + x : x) === H - 1, v = b(h), k = {
+        guid: h,
+        name: C,
+        amount: S,
+        transactions: v
+      };
+      return /* @__PURE__ */ y(m.Fragment, { children: [
+        /* @__PURE__ */ e(
+          $t,
+          {
+            amount: S,
+            guid: h,
+            name: C,
+            onClick: v.length > 0 ? () => s(k) : void 0,
+            transactions: v
+          }
+        ),
+        /* @__PURE__ */ e(ke, { sx: { ml: w ? 24 : 68 } })
+      ] }, h);
+    }, T = () => {
+      l(!p);
+    };
+    return /* @__PURE__ */ e(f, { sx: { bgColor: "background.paper", width: "100%" }, children: /* @__PURE__ */ y(Re, { children: [
+      /* @__PURE__ */ e(f, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(we, { children: u.categories }) }),
+      o.map((h, C) => g(h, C, o)),
+      /* @__PURE__ */ e(
+        yt,
+        {
+          in: p,
+          sx: { "&.MuiCollapse-root .MuiListItemButton-root": { paddingLeft: 24 } },
+          children: r.map(
+            (h, C) => g(h, C, r)
+          )
+        }
+      ),
+      r.length > 0 && /* @__PURE__ */ e(Pt, { isExpanded: p, onClick: T })
+    ] }) });
+  }
+), Kt = [
+  "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: t }) => {
+  const s = Ct(), { isMobile: n, isDesktop: o, isLargeDesktop: r } = F(), { beatStore: i, endpoint: a, sessionToken: c } = Ee(), { isInitialized: u } = $(), { sortedCategoriesList: p } = j(), [l, d] = m.useState(!1), b = s.palette.mode === "dark", g = o || r, T = g || n ? 1 : 2;
+  m.useEffect(() => {
+    u && i.loadBeats().finally(() => d(!0));
+  }, [u]);
+  const h = m.useMemo(() => {
+    if (!l) return [];
+    const H = p.map((M) => M.guid);
+    return i.getFilteredBeats({ categoryGuids: H, templates: Kt });
+  }, [l, p]), C = () => null, S = g ? 200 : 170, x = g ? 170 : 124, L = h.length > 0 ? S : x;
+  return /* @__PURE__ */ e(bt, { sx: { height: L }, children: /* @__PURE__ */ e(
+    Tt,
+    {
+      areBeatsLoading: i.isLoading,
+      beats: h,
+      endpoint: a,
+      logOutUser: C,
+      onCardClick: t,
+      showBorder: !0,
+      showCTAColocatedWithText: !1,
+      showCarouselControls: !0,
+      showHeader: g,
+      showIcon: !0,
+      showWithMargin: !1,
+      token: c,
+      useDarkMode: b,
+      userHasFullInsightFeedBeats: !1,
+      variant: "outlined",
+      visibleCardsCount: T
+    }
+  ) });
+}, Ut = E(Yt), Xt = E(({ transactions: t }) => {
+  const { is_mobile_webview: s } = Ze(), { trends: n, transactions: o } = A(), { isDesktop: r } = F(), i = ` ${t.length === 1 ? n.transaction : n.transactions} (${t.length})`, a = (() => {
+    const p = /* @__PURE__ */ new Map();
+    return t.forEach((l) => {
+      p.has(l.date) || p.set(l.date, []), p.get(l.date).push(l);
+    }), Array.from(p.entries()).sort(([l], [d]) => d - l).map(([l, d]) => ({ timestamp: l, transactions: d }));
+  })(), c = () => {
+  }, u = t.length > 0 && !s && r;
+  return /* @__PURE__ */ y(f, { sx: { width: "100%" }, children: [
+    /* @__PURE__ */ y(
+      f,
+      {
+        sx: {
+          alignItems: "flex-start",
+          alignSelf: "stretch",
+          flexDirection: "row",
+          justifyContent: "space-between",
+          pb: 12,
+          pt: 16,
+          px: 24
+        },
+        children: [
+          /* @__PURE__ */ e(W, { bold: !0, variant: "body1", children: i }),
+          /* @__PURE__ */ e(f, { sx: { alignItems: "center", gap: 16 }, children: u && /* @__PURE__ */ y(
+            _t,
+            {
+              onClick: c,
+              sx: { display: "flex", alignItems: "end", gap: 8 },
+              variant: "body2",
+              children: [
+                /* @__PURE__ */ e(X, { name: "ios_share" }),
+                o.export_csv_btn
+              ]
+            }
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(Re, { children: a.map(({ timestamp: p, transactions: l }) => /* @__PURE__ */ y(m.Fragment, { children: [
+      /* @__PURE__ */ e(nt, { children: it(ct(p), "EEEE, MMMM dd") }),
+      l.map((d, b) => {
+        const g = b === l.length - 1;
+        return /* @__PURE__ */ y(m.Fragment, { children: [
+          /* @__PURE__ */ e(
+            Ce,
+            {
+              leftIcon: /* @__PURE__ */ e(
+                ze,
+                {
+                  categoryGuid: d.guid,
+                  merchantGuid: d.merchant_guid ?? ""
+                }
+              ),
+              rightContent: z(d.amount, "0,0.00"),
+              subtitle: d.category,
+              title: d.description
+            }
+          ),
+          /* @__PURE__ */ e(ke, { sx: { ml: g ? 0 : 68 } })
+        ] }, d.guid);
+      })
+    ] }, p)) })
+  ] });
+}), Zt = E(() => {
+  const { categoryDetailsChartData: t, selectedCategoryData: s } = j(), n = s?.chartLabel ? s.chartLabel : "", o = s?.color;
+  return /* @__PURE__ */ e(f, { sx: { pt: 12, width: "100%" }, children: /* @__PURE__ */ e(
+    fe,
+    {
+      baseline: "min",
+      colors: [o],
+      curveType: "bump",
+      datasets: t,
+      height: 265,
+      labels: [n],
+      markStyles: () => ({
+        stroke: o
+      }),
+      showArea: !0,
+      showAverage: !0,
+      showLegend: !0,
+      showXAxis: !0,
+      showXAxisTicks: !0,
+      showYAxis: !0,
+      showYAxisTicks: !0,
+      useCustomMark: !0,
+      valueFormatterString: "0,0"
+    }
+  ) });
+}), Qt = E(({ onClose: t }) => {
+  const { trends: s } = A(), { selectedCategoryData: n, selectedDateRangeMonthRange: o } = j();
+  if (!n)
+    return null;
+  const { guid: r, name: i, amount: a, transactions: c } = n, u = n.name === "Income" ? s.category_income : s.category_spending, p = () => {
+    t?.();
+  };
+  return /* @__PURE__ */ e(
+    Ae,
+    {
+      ariaLabelClose: s.close_category_details,
+      isOpen: !0,
+      onClose: p,
+      shouldShowHeaderShadow: !0,
+      title: u,
+      children: /* @__PURE__ */ y(f, { sx: { alignItems: "center", pt: 16 }, children: [
+        /* @__PURE__ */ e(
+          Ce,
+          {
+            leftIcon: /* @__PURE__ */ e(me, { categoryGuid: r }),
+            rightContent: z(a, "0,0.00"),
+            subtitle: o,
+            title: i
+          }
+        ),
+        /* @__PURE__ */ e(Zt, {}),
+        c && /* @__PURE__ */ e(Xt, { transactions: c })
+      ] })
+    }
+  );
+}), qt = (t, s) => {
+  const n = Ie(t, s), o = ve(t, s);
+  return [n, o].filter((r) => r.length > 0);
+}, Jt = (t, s) => {
+  const [n, o] = t, r = n, i = o ?? n, a = [];
+  if (r) {
+    const c = r.reduce((u, p) => u + p.y, 0);
+    a.push({ label: s.income_label, amount: c });
+  }
+  if (i) {
+    const c = i.reduce((u, p) => u + p.y, 0);
+    a.push({ label: s.spending_label, amount: c });
+  }
+  return a;
+}, en = ({
+  availableHeight: t = 0,
+  minHeight: s = 500,
+  selectedDateRange: n,
+  totals: o
+}) => {
+  const r = ye(), { trends: i } = A(), { isSmallMobile: a, isMobile: c, isSmallTablet: u, isTablet: p } = F(), l = [r.palette.chart?.chart1, r.palette.chart?.chart2], d = qt(o, n), b = Jt(d, i), [g, T] = m.useState(0), h = 458, C = 195, S = 56, x = c || a ? C : u || p ? h : g;
+  return m.useEffect(() => {
+    const L = Math.max(t - S, s);
+    T(L);
+  }, [t]), /* @__PURE__ */ e(
+    fe,
+    {
+      baseline: "min",
+      colors: l,
+      curveType: "bump",
+      datasets: d,
+      height: x,
+      labels: b,
+      showArea: !0,
+      showAxisHighlight: !0,
+      showLegend: !0,
+      showTooltip: !0,
+      showXAxis: !0,
+      showXAxisTicks: !0,
+      showYAxis: !0,
+      showYAxisTicks: !0,
+      valueFormatterString: "0,0"
+    }
+  );
+}, tn = E(en), nn = ({ onBackClick: t, onInsightCardClick: s, sx: n }) => {
+  const { onEvent: o } = q(), r = ye(), { isLargeDesktop: i, isDesktop: a, isMobile: c } = F(), { visibleAccounts: u } = se(), { loadMonthlyCategoryTotals: p, monthlyCategoryTotals: l } = P(), { setFilter: d, sortedTransactions: b } = pe(), { selectedDateRange: g, setSelectedCategoryData: T, setSelectedDateRange: h } = j(), {
+    isCopyLoaded: C,
+    isInitialized: S,
+    selectedAccounts: x,
+    selectedAccountGuids: L,
+    setSelectedAccounts: H
+  } = $(), { trends: M } = A(), w = st(), v = a || i, [k, K] = m.useState(!1), [V, re] = m.useState("Chart"), [J, ee] = m.useState(""), [te, ne] = m.useState(!1), [oe, ae] = m.useState(window.innerHeight), ie = oe - 208, ce = oe - (w ? 494 : 266);
+  m.useEffect(() => {
+    const I = () => ae(window.innerHeight);
+    return window.addEventListener("resize", I), () => window.removeEventListener("resize", I);
+  }, []), m.useEffect(() => {
+    H(u);
+  }, [u]), m.useEffect(() => {
+    S && p(
+      x,
+      g.start,
+      g.end
+    ).finally(() => {
+      K(!0);
+    });
+  }, [S, x, g]), m.useEffect(() => {
+    if (l.length !== 0) {
+      const I = {
+        accounts: L,
+        dateRange: { start: g.start, end: g.end }
+      };
+      d({
+        ...I,
+        custom: (R) => !!l.find(
+          (Y) => Y.top_level_category_guid === R.top_level_category_guid || Y.category_guid === R.category_guid
+        )
+      });
+    }
+  }, [l]);
+  const le = (I) => {
+    const R = I;
+    R.color = St(R.guid, r), R.chartLabel = I.name === "Income" ? M.monthly_income : M.monthly_spending, T(R), ne(!0);
+  }, de = () => {
+    T(null), ne(!1);
+  }, ue = (I, R) => {
+    re(R ?? V), o(D.TRENDS_CLICK_TOGGLE);
+  }, _ = (I) => {
+    const R = xe(I?.[0], 1), Y = I?.[1], Fe = De(Y, R);
+    h({ start: R, end: Y }), o(D.TRENDS_CLICK_DATE, {
+      time_period: Fe + "M"
+    });
+  }, N = () => {
+    o(D.TRENDS_CLICK_FILTER);
+  }, B = (I) => {
+    ee(I);
+  };
+  return !C || !S || !k ? /* @__PURE__ */ e(Q, {}) : l.length === 0 ? /* @__PURE__ */ e(
+    wt,
+    {
+      header: "",
+      icon: "",
+      onClick: () => {
+      },
+      primaryButton: M.empty_state_primary,
+      subText: M.empty_state_sub_text
+    }
+  ) : /* @__PURE__ */ y(
+    Me,
+    {
+      accountOptions: u,
+      calendarActions: { onRangeChanged: _ },
+      dateRange: g,
+      dateRangeVariant: c ? "timeframetabs" : "timeframebuttons",
+      onAccountsFilterClick: N,
+      onBackClick: t,
+      sx: n,
+      title: M.title,
+      children: [
+        /* @__PURE__ */ y(
+          f,
+          {
+            sx: {
+              px: c ? 0 : 48
+            },
+            children: [
+              /* @__PURE__ */ y(
+                f,
+                {
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                  sx: { pb: c ? 12 : 24, pt: c ? 24 : 48 },
+                  children: [
+                    /* @__PURE__ */ e(
+                      Be,
+                      {
+                        selectedCategoryGuid: J,
+                        selectedDateRange: g
+                      }
+                    ),
+                    /* @__PURE__ */ e(Oe, { onTabChange: ue, selectedTab: V })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ e(f, { alignItems: "center", flexDirection: "row", width: "100%", children: /* @__PURE__ */ e(O, { flexGrow: 1, children: J && /* @__PURE__ */ y(ge, { onClick: () => ee(""), sx: { p: 0, pr: 5 }, children: [
+                /* @__PURE__ */ e(X, { name: "arrow_back" }),
+                M.all_categories
+              ] }) }) }),
+              /* @__PURE__ */ y(f, { flexDirection: v ? "row" : "column", gap: v ? 48 : 16, children: [
+                /* @__PURE__ */ y(O, { sx: { width: v ? "68%" : "100%" }, children: [
+                  V === "Chart" && /* @__PURE__ */ e(
+                    tn,
+                    {
+                      availableHeight: ie,
+                      minHeight: 450,
+                      selectedDateRange: g,
+                      totals: l
+                    }
+                  ),
+                  V === "Table" && /* @__PURE__ */ e(
+                    Ge,
+                    {
+                      height: "unset",
+                      monthlyCategoryTotals: l,
+                      onClickRow: B,
+                      selectedCategory: J,
+                      selectedDateRange: g
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ y(f, { gap: 16, sx: { width: v ? "32%" : "100%" }, children: [
+                  w && /* @__PURE__ */ e(Ut, { onInsightCardClick: s }),
+                  /* @__PURE__ */ e(
+                    jt,
+                    {
+                      availableHeight: ce,
+                      onListItemClick: le,
+                      transactions: b
+                    }
+                  )
+                ] })
+              ] })
+            ]
+          }
+        ),
+        te && /* @__PURE__ */ e(Qt, { onClose: de })
+      ]
+    }
+  );
+}, qn = E(nn);
 export {
-  t as TrendsFullWidget,
-  s as TrendsMicroWidget,
-  o as TrendsMiniWidget,
-  l as TrendsStore,
-  a as TrendsWidget
+  Xn as TrendsFullWidget,
+  Qn as TrendsMicroWidget,
+  Zn as TrendsMiniWidget,
+  to as TrendsStore,
+  qn as TrendsWidget
 };