@mx-cartographer/experiences 6.26.32 → 7.0.0-alpha.mega1

package/dist/trends/index.es.js

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