@mx-cartographer/experiences 8.0.0-alpha.sms2 → 9.0.0-alpha.mega1

package/dist/networth/index.es.js

@@ -1,110 +1,118 @@
-import { jsx as t, jsxs as r, Fragment as v } from "react/jsx-runtime";
-import { fromUnixTime as _t } from "date-fns/fromUnixTime";
-import { observer as w } from "mobx-react-lite";
-import { useTheme as z } from "@mui/material/styles";
-import { L as wt } from "../LineChart-bc1D9xBE.mjs";
-import { u as Z } from "../useScreenSize-B6JyS_Lj.mjs";
-import { q as bt, u as T, d as J, g as Q, b as P, r as tt, n as Wt } from "../hooks-C41HAxM5.mjs";
-import { f as vt, a as It } from "../Dialog-CDV0kKxj.mjs";
-import W from "@mui/material/Divider";
-import B from "@mui/material/List";
+import { jsx as e, jsxs as o, Fragment as D } from "react/jsx-runtime";
+import { fromUnixTime as oe } from "date-fns/fromUnixTime";
+import { observer as S } from "mobx-react-lite";
+import ie from "@mui/material/Stack/Stack";
+import { useTheme as j } from "@mui/material/styles";
+import { L as ae } from "../LineChart-DHj-Bufi.mjs";
+import { p as se, q as R, u as N, g as z, d as ce, b as Y } from "../hooks-fY_n74f7.mjs";
+import { u as q } from "../useScreenSize-B6JyS_Lj.mjs";
+import { f as le, D as me } from "../Dialog-CWymUiuO.mjs";
+import u from "react";
+import de from "@mui/material/Button";
+import T from "@mui/material/Divider";
+import $ from "@mui/material/List";
 import k from "@mui/material/ListSubheader";
-import h from "@mui/material/Stack";
-import { Text as m, Icon as H, H1 as Tt, P as Lt } from "@mxenabled/mxui";
-import d from "react";
-import D from "@mui/material/ListItem";
-import et from "@mui/material/ListItemButton";
+import d from "@mui/material/Stack";
+import { Text as m, Icon as B, P as Z } from "@mxenabled/mxui";
+import A from "@mui/material/ListItem";
+import J from "@mui/material/ListItemButton";
 import _ from "@mui/material/ListItemText";
-import { i as nt } from "../DateUtil-CDPZw_-m.mjs";
-import { C as y } from "../CurrencyText-Dr0EZ7bp.mjs";
-import { Button as Nt, Stack as Et } from "@mui/material";
-import { format as kt, fromUnixTime as Dt, differenceInMonths as At } from "date-fns";
-import { g as K } from "../NetWorthStore-8FFC1Bs0.mjs";
-import { N as Re } from "../NetWorthStore-8FFC1Bs0.mjs";
-import { Icon as ot } from "@mxenabled/mx-icons";
+import { i as Q } from "../DateUtil-CVsMhbZU.mjs";
+import { C as x } from "../CurrencyText-C-85TnUF.mjs";
+import P from "@mui/material/styles/useTheme";
+import { Stack as he } from "@mui/material";
+import ee from "@mui/material/Box";
+import pe from "@mui/material/Collapse";
+import X from "@mui/material/ListItemIcon";
+import { g as F } from "../NetWorthStore-B6ziBtaH.mjs";
+import { N as vt } from "../NetWorthStore-B6ziBtaH.mjs";
+import { D as K } from "../Drawer-Bet2ZPJo.mjs";
+import { A as v, W as ue } from "../WidgetContainer-mzejMmz2.mjs";
+import { format as fe, fromUnixTime as xe, differenceInMonths as ge } from "date-fns";
+import { Icon as te } from "@mxenabled/mx-icons";
 import { f as U } from "../NumberFormatting-DjTD0t3W.mjs";
-import { L as O } from "../Loader-BSWSYqvn.mjs";
-import { M as Mt } from "../MicroWidgetContainer-BGpNl5ZS.mjs";
-import { A as b, W as Ht } from "../WidgetContainer-B1Jzb4XA.mjs";
-import rt from "@mui/material/Box";
-import { C as Bt } from "../ConnectionsDrawer-CSo6AFkG.mjs";
-import Ot from "@mui/material/Collapse";
-import V from "@mui/material/ListItemIcon";
-import it from "@mui/material/styles/useTheme";
-import { D as Y } from "../Drawer-Dqe5EqvA.mjs";
-import { E as zt } from "../EmptyState-DoxNUae-.mjs";
-const Rt = ({
-  chartData: e,
-  hoveredData: l,
-  onDataClick: i,
-  onMouseEnter: n,
-  onMouseLeave: s,
-  selectedData: o
-}) => {
-  const { isMobile: a } = Z(), { availableWidth: c } = bt(), u = z(), C = c - 320, x = e.map((f) => ({
-    x: vt(_t(f.x), It.MONTH_SHORT),
-    y: f.y
-  })), g = o ? { index: e.findIndex((f) => f.x === o.x) } : void 0, S = l ? { index: e.findIndex((f) => f.x === l.x) } : void 0, p = (f) => ({
-    fill: f === g?.index ? u.palette.success.main : "",
-    filter: f === S?.index ? `drop-shadow(0px 0px 10px ${u.palette.success.main})` : "none",
-    stroke: u.palette.success.main
-  });
-  return /* @__PURE__ */ t(
-    wt,
+import { L as ne } from "../Loader-BSWSYqvn.mjs";
+import { M as ye } from "../MicroWidgetContainer-DSyYwRCU.mjs";
+import { u as re } from "../useWidgetLoadTimer-CrUzxN-P.mjs";
+import { C as Ce } from "../ConnectionsDrawer-BExzgE16.mjs";
+import { E as _e } from "../EmptyState-DoxNUae-.mjs";
+const Se = () => {
+  const { isMobile: t } = q(), { availableWidth: a } = se(), i = j(), {
+    hoveredData: n,
+    netWorthChartData: s,
+    selectedData: r,
+    setHoveredIndex: c,
+    setSelectedIndex: l
+  } = R(), f = a - 320, g = s.map((h) => ({
+    x: le(oe(h.x), me.MONTH_SHORT),
+    y: h.y
+  })), w = r ? { index: s.findIndex((h) => h.x === r.x) } : void 0, y = n ? { index: s.findIndex((h) => h.x === n.x) } : void 0, b = (h) => ({
+    fill: h === w?.index ? i.palette.success.main : "",
+    filter: h === y?.index ? `drop-shadow(0px 0px 10px ${i.palette.success.main})` : "none",
+    stroke: i.palette.success.main
+  }), I = (h, M) => {
+    l(M);
+  }, L = (h) => {
+    c(h);
+  }, E = () => {
+    c(-1);
+  };
+  return /* @__PURE__ */ e(ie, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
+    ae,
     {
       baseline: "min",
       chartFor: "networthChart",
       chartXaxisSx: { "& .MuiChartsAxis-tickLabel": { transform: "translateX(8px)" } },
       chartYaxisSx: { "& .MuiChartsAxis-tickLabel": { transform: "translateX(-8px)" } },
-      colors: [u.palette.success.main],
-      datasets: [x],
+      colors: [i.palette.success.main],
+      datasets: [g],
       height: 350,
       labels: [],
-      margin: { right: 20, left: 100 },
-      markHandlers: { onMarkClick: i, onMouseEnter: n, onMouseLeave: s },
-      markStyles: p,
+      margin: { right: 20, left: 38 },
+      markHandlers: { onMarkClick: I, onMouseEnter: L, onMouseLeave: E },
+      markStyles: b,
       showArea: !0,
       useCustomMark: !0,
       valueFormatterString: "0.0[0]a",
-      width: a ? 320 : C
+      width: t ? a - 48 : f
     }
-  );
-}, jt = w(Rt), $t = ({
-  item: e,
-  getStyles: l,
+  ) });
+}, we = S(Se), be = ({
+  item: t,
+  getStyles: a,
   isHovered: i = !1,
   isSelected: n = !1,
   onItemClick: s,
-  onMouseEnter: o,
-  onMouseLeave: a
+  onMouseEnter: r,
+  onMouseLeave: c
 }) => {
-  const [c, u] = d.useState({
+  const [l, f] = u.useState({
     color: ""
   });
-  return d.useEffect(() => {
-    u(l(e));
-  }, [i, n]), /* @__PURE__ */ r(d.Fragment, { children: [
-    /* @__PURE__ */ t(
-      D,
+  return u.useEffect(() => {
+    f(a(t));
+  }, [i, n]), /* @__PURE__ */ o(u.Fragment, { children: [
+    /* @__PURE__ */ e(
+      A,
       {
         sx: {
-          ...c,
+          ...l,
           minHeight: 44,
-          "&:hover": { color: n ? "inherit" : c.color }
+          "&:hover": { color: n ? "inherit" : l.color }
         },
-        children: /* @__PURE__ */ t(
-          et,
+        children: /* @__PURE__ */ e(
+          J,
           {
-            onClick: (C) => s?.(C, e.x),
-            onMouseEnter: () => o(e.x),
-            onMouseLeave: () => a(),
+            onClick: (g) => s?.(g, t.x),
+            onMouseEnter: () => r(t.x),
+            onMouseLeave: () => c(),
             sx: { minHeight: 20, padding: 12 },
-            children: /* @__PURE__ */ t(
+            children: /* @__PURE__ */ e(
               _,
               {
-                primary: /* @__PURE__ */ r(h, { direction: "row", justifyContent: "space-between", sx: { fontWeight: 400 }, children: [
-                  /* @__PURE__ */ t(m, { variant: "Body", children: nt(e.x) }),
-                  /* @__PURE__ */ t(y, { amount: e.y, sx: { color: "inherit" }, variant: "Body" })
+                primary: /* @__PURE__ */ o(d, { direction: "row", justifyContent: "space-between", sx: { fontWeight: 400 }, children: [
+                  /* @__PURE__ */ e(m, { variant: "Body", children: Q(t.x) }),
+                  /* @__PURE__ */ e(x, { amount: t.y, sx: { color: "inherit" }, variant: "Body" })
                 ] })
               }
             )
@@ -112,164 +120,154 @@ const Rt = ({
         )
       }
     ),
-    /* @__PURE__ */ t(W, {})
-  ] }, e.x);
-}, Gt = w($t), Xt = ({
-  chartData: e,
-  hoveredData: l,
-  onDataClick: i,
-  onButtonClick: n,
-  onMouseEnter: s,
-  onMouseLeave: o,
-  selectedData: a
-}) => {
-  const { net_worth: c } = T(), u = z(), C = (x) => {
-    const g = x.x === l?.x, S = x.x === a?.x, p = {
-      backgroundColor: "inherit",
-      borderBottom: "inherit",
-      color: "inherit"
-    };
-    return g && (p.color = S ? "inherit" : p.color, p.backgroundColor = u.palette.action.hover), S && (p.backgroundColor = u.palette.primary.main, p.borderBottom = u.palette.border.light, p.color = u.palette.common.white), p;
-  };
-  return /* @__PURE__ */ r(h, { direction: "column", sx: { width: 320 }, children: [
-    /* @__PURE__ */ r(B, { children: [
-      /* @__PURE__ */ t(k, { sx: { backgroundColor: "transparent", mb: 8, mt: 12, px: 12 }, children: /* @__PURE__ */ t(m, { bold: !0, component: "h2", variant: "Body", children: c.monthly_totals }) }),
-      /* @__PURE__ */ t(W, {}),
-      e.map((x, g) => /* @__PURE__ */ t(
-        Gt,
-        {
-          getStyles: C,
-          isHovered: x.x === l?.x,
-          isSelected: x.x === a?.x,
-          item: x,
-          onItemClick: (S) => i(S, g),
-          onMouseEnter: () => s(g),
-          onMouseLeave: () => o()
-        },
-        x.x
-      ))
-    ] }),
-    /* @__PURE__ */ t(
-      Nt,
-      {
-        onClick: () => n(),
-        sx: { alignSelf: "center", marginTop: 16, width: "fit-content" },
-        variant: "outlined",
-        children: c.view_assets_and_liabilities
-      }
-    )
-  ] });
-}, Ft = w(Xt), Kt = ({
-  currencyLabel: e,
-  currencyVariant: l = "Small",
+    /* @__PURE__ */ e(T, {})
+  ] }, t.x);
+}, ve = S(be), We = ({
+  currencyLabel: t,
+  currencyVariant: a = "Small",
   iconSize: i,
   netWorth: n,
   theme: s
 }) => {
-  let o = s.palette.secondary.main, a = s.palette.secondary.main, c = "trending_flat";
-  return n.change < 0 ? c = "trending_down" : n.change > 0 && (o = s.palette.success.main, a = s.palette.success.main, c = "trending_up"), /* @__PURE__ */ r(Et, { alignItems: "center", direction: "row", spacing: 4, children: [
-    /* @__PURE__ */ t(
-      H,
+  let r = s.palette.secondary.main, c = s.palette.secondary.main, l = "trending_flat";
+  return n.change < 0 ? l = "trending_down" : n.change > 0 && (r = s.palette.success.main, c = s.palette.success.main, l = "trending_up"), /* @__PURE__ */ o(he, { alignItems: "center", direction: "row", spacing: 4, children: [
+    /* @__PURE__ */ e(
+      B,
       {
-        name: c,
+        name: l,
         size: i,
         sx: {
-          color: o
+          color: r
         }
       }
     ),
-    /* @__PURE__ */ t(y, { amount: n.change, color: a, variant: l }),
-    /* @__PURE__ */ t(m, { variant: "Small", children: e })
-  ] });
-}, R = w(Kt), Ut = ({ hoveredData: e, selectedData: l }) => {
-  const { net_worth: i } = T(), n = z(), s = e || l, o = kt(Dt(s.x), "MMMM");
-  return /* @__PURE__ */ r(h, { alignItems: "center", direction: "column", m: 24, children: [
-    /* @__PURE__ */ t(m, { color: n.palette.secondary.main, variant: "Small", children: `${o} ${i.net_worth}` }),
-    /* @__PURE__ */ t(y, { amount: s.y, variant: "H2" }),
-    /* @__PURE__ */ t(R, { currencyLabel: i.this_month, netWorth: s, theme: n })
+    /* @__PURE__ */ e(x, { amount: n.change, color: c, variant: a }),
+    /* @__PURE__ */ e(m, { variant: "Small", children: t })
   ] });
-}, Vt = w(Ut), Yt = ({ amount: e, copy: l, trendValue: i }) => {
-  const n = i > 0, o = i === 0 ? "trending_flat" : n ? "trending_up" : "trending_down";
-  return /* @__PURE__ */ r(h, { sx: { flexDirection: "row", justifyContent: "space-between" }, children: [
-    /* @__PURE__ */ t(Tt, { children: U(e, "0,0") }),
-    e !== 0 && /* @__PURE__ */ r(h, { sx: { color: n ? "success.main" : "text.secondary" }, children: [
-      /* @__PURE__ */ r(h, { sx: { flexDirection: "row", gap: 8 }, children: [
-        /* @__PURE__ */ t(ot, { name: o, size: 20 }),
-        /* @__PURE__ */ t(m, { sx: { fontWeight: 600, textAlign: "right" }, variant: "body1", children: U(i, "0,0.00") })
-      ] }),
-      /* @__PURE__ */ t(m, { sx: { display: "block", textAlign: "right" }, variant: "caption", children: l.this_month })
-    ] })
-  ] });
-}, qt = ({ copy: e }) => /* @__PURE__ */ r(h, { sx: { flexDirection: "row", gap: 12 }, children: [
-  /* @__PURE__ */ t(ot, { name: "elevation", size: 32, sx: { color: "text.primary" } }),
-  /* @__PURE__ */ r(h, { children: [
-    /* @__PURE__ */ t(m, { sx: { display: "block", fontWeight: 600 }, variant: "body1", children: e.empty_widget_header }),
-    /* @__PURE__ */ t(Lt, { sx: { color: "text.secondary" }, variant: "body2", children: e.zero_state_description })
-  ] })
-] }), He = w(({ onCTAClick: e }) => {
-  const [l, i] = d.useState(!1), { visibleAccounts: n } = J(), { onEvent: s } = Q(), { net_worth: o, common: a } = T(), { isInitialized: c, selectedAccounts: u, setSelectedAccounts: C } = P(), { loadChartData: x, loadNetWorthData: g, netWorthData: S, selectedData: p } = tt(), f = async () => {
-    await g(u), await x(1), i(!0);
-  };
-  if (d.useEffect(() => C(n), [n]), d.useEffect(() => {
-    c && f().finally(), s(b.NET_WORTH_LOAD_WIDGET, {
-      state: n?.length ? "default" : "zeroState"
-    });
-  }, [c]), !l) return /* @__PURE__ */ t(O, { height: 100 });
-  const L = () => {
-    s(
-      n.length ? b.NET_WORTH_CLICK_VIEW_DETAILS : b.NET_WORTH_CLICK_GET_STARTED
-    ), e();
-  };
-  return /* @__PURE__ */ t(
-    Mt,
-    {
-      className: "mx-networth-microwidget",
-      ctaLabel: a.see_details,
-      onCTAClick: L,
-      title: o.net_worth,
-      children: S.accounts.length ? /* @__PURE__ */ t(
-        Yt,
+}, G = S(We), Te = ({
+  netWorth: t,
+  gains: a,
+  losses: i,
+  totalGains: n,
+  totalLosses: s
+}) => {
+  const { net_worth: r } = N(), c = P();
+  return /* @__PURE__ */ o(D, { children: [
+    /* @__PURE__ */ o(d, { alignItems: "center", justifyContent: "space-between", mb: 8, pt: 24, children: [
+      /* @__PURE__ */ e(m, { variant: "Small", children: Q(t?.x) }),
+      /* @__PURE__ */ e(m, { variant: "Body", children: r.total_change }),
+      t && /* @__PURE__ */ e(G, { currencyVariant: "H1", iconSize: 32, netWorth: t, theme: c })
+    ] }),
+    /* @__PURE__ */ o($, { children: [
+      /* @__PURE__ */ e(k, { sx: { mb: 8, mt: 12, mx: 8 }, children: /* @__PURE__ */ e(
+        _,
         {
-          amount: p?.y,
-          copy: o,
-          trendValue: p?.change
+          primary: /* @__PURE__ */ o(d, { direction: "row", justifyContent: "space-between", children: [
+            /* @__PURE__ */ e(m, { sx: { fontWeight: 700 }, variant: "XSmall", children: r.gains }),
+            /* @__PURE__ */ e(x, { amount: n, sx: { fontWeight: 400 }, variant: "XSmall" })
+          ] })
         }
-      ) : /* @__PURE__ */ t(qt, { copy: o })
-    }
-  );
-}), Zt = ({ accounts: e, name: l, icon: i }) => {
-  const [n, s] = d.useState(!1);
-  return /* @__PURE__ */ r(v, { children: [
-    /* @__PURE__ */ t(D, { sx: (o) => ({ backgroundColor: o.palette.background.paper }), children: /* @__PURE__ */ r(et, { onClick: () => s(!n), children: [
-      i && /* @__PURE__ */ t(V, { children: /* @__PURE__ */ t(H, { name: i, size: 24, sx: { mr: 12 } }) }),
-      /* @__PURE__ */ t(
+      ) }),
+      a?.map((l) => /* @__PURE__ */ o(u.Fragment, { children: [
+        /* @__PURE__ */ e(A, { sx: { backgroundColor: c.palette.background.paper, py: 14 }, children: /* @__PURE__ */ e(
+          _,
+          {
+            primary: /* @__PURE__ */ o(d, { direction: "row", justifyContent: "space-between", children: [
+              /* @__PURE__ */ e(m, { sx: { mr: 10 }, variant: "Body", children: l.accountName }),
+              /* @__PURE__ */ e(
+                x,
+                {
+                  amount: l.gain,
+                  sx: { color: c.palette.success.main, flexShrink: 0, fontWeight: 700 },
+                  variant: "Body"
+                }
+              )
+            ] }),
+            sx: { px: 16 }
+          }
+        ) }),
+        /* @__PURE__ */ e(T, {})
+      ] }, l.accountName)),
+      /* @__PURE__ */ e(k, { sx: { mb: 8, mt: 12, mx: 8 }, children: /* @__PURE__ */ e(
         _,
         {
-          primary: /* @__PURE__ */ t(m, { sx: { fontWeight: 700 }, variant: "Body", children: l })
+          primary: /* @__PURE__ */ o(d, { direction: "row", justifyContent: "space-between", children: [
+            /* @__PURE__ */ e(m, { sx: { fontWeight: 700 }, variant: "XSmall", children: r.losses }),
+            /* @__PURE__ */ e(x, { amount: s, sx: { fontWeight: 400 }, variant: "XSmall" })
+          ] })
+        }
+      ) }),
+      i?.map((l) => /* @__PURE__ */ o(D, { children: [
+        /* @__PURE__ */ e(
+          A,
+          {
+            sx: { backgroundColor: c.palette.background.paper, py: 14 },
+            children: /* @__PURE__ */ e(
+              _,
+              {
+                primary: /* @__PURE__ */ o(d, { direction: "row", justifyContent: "space-between", children: [
+                  /* @__PURE__ */ e(
+                    m,
+                    {
+                      sx: {
+                        mr: 10
+                      },
+                      variant: "Body",
+                      children: l.accountName
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    x,
+                    {
+                      amount: l.loss,
+                      sx: { flexShrink: 0, fontWeight: 700 },
+                      variant: "Body"
+                    }
+                  )
+                ] }),
+                sx: { px: 16 }
+              }
+            )
+          },
+          l.accountName
+        ),
+        /* @__PURE__ */ e(T, {})
+      ] }))
+    ] })
+  ] });
+}, Ie = S(Te), Le = ({ accounts: t, name: a, icon: i }) => {
+  const [n, s] = u.useState(!1);
+  return /* @__PURE__ */ o(D, { children: [
+    /* @__PURE__ */ e(A, { sx: (r) => ({ backgroundColor: r.palette.background.paper }), children: /* @__PURE__ */ o(J, { onClick: () => s(!n), children: [
+      i && /* @__PURE__ */ e(X, { children: /* @__PURE__ */ e(B, { name: i, size: 24, sx: { mr: 12 } }) }),
+      /* @__PURE__ */ e(
+        _,
+        {
+          primary: /* @__PURE__ */ e(m, { sx: { fontWeight: 700 }, variant: "Body", children: a })
         }
       ),
-      /* @__PURE__ */ t(V, { children: n ? /* @__PURE__ */ t(H, { name: "expand_less", size: 24 }) : /* @__PURE__ */ t(H, { name: "expand_more", size: 24 }) })
+      /* @__PURE__ */ e(X, { children: n ? /* @__PURE__ */ e(B, { name: "expand_less", size: 24 }) : /* @__PURE__ */ e(B, { name: "expand_more", size: 24 }) })
     ] }) }),
-    /* @__PURE__ */ t(W, {}),
-    /* @__PURE__ */ t(Ot, { in: n, timeout: "auto", unmountOnExit: !0, children: e.map((o, a) => /* @__PURE__ */ r(B, { children: [
-      /* @__PURE__ */ t(D, { sx: () => ({ py: 14 }), children: /* @__PURE__ */ t(
+    /* @__PURE__ */ e(T, {}),
+    /* @__PURE__ */ e(pe, { in: n, timeout: "auto", unmountOnExit: !0, children: t.map((r, c) => /* @__PURE__ */ o($, { children: [
+      /* @__PURE__ */ e(A, { sx: () => ({ py: 14 }), children: /* @__PURE__ */ e(
         _,
         {
-          primary: /* @__PURE__ */ r(h, { direction: "row", justifyContent: "space-between", sx: { fontWeight: 400 }, children: [
-            /* @__PURE__ */ t(
+          primary: /* @__PURE__ */ o(d, { direction: "row", justifyContent: "space-between", sx: { fontWeight: 400 }, children: [
+            /* @__PURE__ */ e(
               m,
               {
                 sx: {
                   marginRight: 10
                 },
                 variant: "Body",
-                children: o.accountName
+                children: r.accountName
               }
             ),
-            /* @__PURE__ */ t(
-              y,
+            /* @__PURE__ */ e(
+              x,
               {
-                amount: o.balance,
+                amount: r.balance,
                 sx: {
                   flexShrink: 0
                 },
@@ -280,20 +278,20 @@ const Rt = ({
           sx: { pl: 72, pr: 16 }
         }
       ) }),
-      a < e.length - 1 ? /* @__PURE__ */ t(W, { variant: "inset" }) : /* @__PURE__ */ t(W, {})
-    ] }, o.accountName)) })
+      c < t.length - 1 ? /* @__PURE__ */ e(T, { variant: "inset" }) : /* @__PURE__ */ e(T, {})
+    ] }, r.accountName)) })
   ] });
-}, q = ({ groupedAccounts: e }) => /* @__PURE__ */ t(v, { children: e.map(({ accounts: l, icon: i, name: n }) => /* @__PURE__ */ t(Zt, { accounts: l, icon: i, name: n }, n)) }), Jt = ({
-  netWorth: e,
-  assets: l,
+}, V = ({ groupedAccounts: t }) => /* @__PURE__ */ e(D, { children: t.map(({ accounts: a, icon: i, name: n }) => /* @__PURE__ */ e(Le, { accounts: a, icon: i, name: n }, n)) }), De = ({
+  netWorth: t,
+  assets: a,
   liabilities: i,
   totalAssets: n,
   totalLiabilities: s
 }) => {
-  const { net_worth: o } = T(), a = it();
-  return /* @__PURE__ */ r(v, { children: [
-    /* @__PURE__ */ r(
-      rt,
+  const { net_worth: r } = N(), c = P();
+  return /* @__PURE__ */ o(D, { children: [
+    /* @__PURE__ */ o(
+      ee,
       {
         sx: {
           alignItems: "center",
@@ -304,194 +302,215 @@ const Rt = ({
           marginBottom: 8
         },
         children: [
-          /* @__PURE__ */ t(m, { variant: "Body", children: o.current_net_worth }),
-          /* @__PURE__ */ t(y, { amount: e?.y ?? 0, variant: "H1" }),
-          e && /* @__PURE__ */ t(
-            R,
+          /* @__PURE__ */ e(m, { variant: "Body", children: r.current_net_worth }),
+          /* @__PURE__ */ e(x, { amount: t?.y ?? 0, variant: "H1" }),
+          t && /* @__PURE__ */ e(
+            G,
             {
-              currencyLabel: o.this_month,
+              currencyLabel: r.this_month,
               iconSize: 20,
-              netWorth: e,
-              theme: a
+              netWorth: t,
+              theme: c
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ r(B, { children: [
-      /* @__PURE__ */ t(k, { sx: { mb: 8, mt: 12, mx: 8 }, children: /* @__PURE__ */ t(
+    /* @__PURE__ */ o($, { children: [
+      /* @__PURE__ */ e(k, { sx: { mb: 8, mt: 12, mx: 8 }, children: /* @__PURE__ */ e(
         _,
         {
-          primary: /* @__PURE__ */ r(h, { direction: "row", justifyContent: "space-between", children: [
-            /* @__PURE__ */ t(m, { sx: { fontWeight: 700 }, variant: "XSmall", children: o.assets }),
-            /* @__PURE__ */ t(y, { amount: n, sx: { fontWeight: 400 }, variant: "XSmall" })
+          primary: /* @__PURE__ */ o(d, { direction: "row", justifyContent: "space-between", children: [
+            /* @__PURE__ */ e(m, { sx: { fontWeight: 700 }, variant: "XSmall", children: r.assets }),
+            /* @__PURE__ */ e(x, { amount: n, sx: { fontWeight: 400 }, variant: "XSmall" })
           ] })
         }
       ) }),
-      /* @__PURE__ */ t(q, { groupedAccounts: K(l) }),
-      /* @__PURE__ */ t(k, { sx: { mb: 8, mt: 12, mx: 8 }, children: /* @__PURE__ */ t(
+      /* @__PURE__ */ e(V, { groupedAccounts: F(a) }),
+      /* @__PURE__ */ e(k, { sx: { mb: 8, mt: 12, mx: 8 }, children: /* @__PURE__ */ e(
         _,
         {
-          primary: /* @__PURE__ */ r(h, { direction: "row", justifyContent: "space-between", children: [
-            /* @__PURE__ */ t(m, { sx: { fontWeight: 700 }, variant: "XSmall", children: o.liabilities }),
-            /* @__PURE__ */ t(y, { amount: s, sx: { fontWeight: 400 }, variant: "XSmall" })
+          primary: /* @__PURE__ */ o(d, { direction: "row", justifyContent: "space-between", children: [
+            /* @__PURE__ */ e(m, { sx: { fontWeight: 700 }, variant: "XSmall", children: r.liabilities }),
+            /* @__PURE__ */ e(x, { amount: s, sx: { fontWeight: 400 }, variant: "XSmall" })
           ] })
         }
       ) }),
-      /* @__PURE__ */ t(q, { groupedAccounts: K(i) })
+      /* @__PURE__ */ e(V, { groupedAccounts: F(i) })
     ] })
   ] });
-}, Qt = w(Jt), Pt = ({
-  netWorth: e,
-  gains: l,
-  losses: i,
-  totalGains: n,
-  totalLosses: s
-}) => {
-  const { net_worth: o } = T(), a = it();
-  return /* @__PURE__ */ r(v, { children: [
-    /* @__PURE__ */ r(h, { alignItems: "center", justifyContent: "space-between", mb: 8, pt: 24, children: [
-      /* @__PURE__ */ t(m, { variant: "Small", children: nt(e?.x) }),
-      /* @__PURE__ */ t(m, { variant: "Body", children: o.total_change }),
-      e && /* @__PURE__ */ t(R, { currencyVariant: "H1", iconSize: 32, netWorth: e, theme: a })
-    ] }),
-    /* @__PURE__ */ r(B, { children: [
-      /* @__PURE__ */ t(k, { sx: { mb: 8, mt: 12, mx: 8 }, children: /* @__PURE__ */ t(
-        _,
-        {
-          primary: /* @__PURE__ */ r(h, { direction: "row", justifyContent: "space-between", children: [
-            /* @__PURE__ */ t(m, { sx: { fontWeight: 700 }, variant: "XSmall", children: o.gains }),
-            /* @__PURE__ */ t(y, { amount: n, sx: { fontWeight: 400 }, variant: "XSmall" })
-          ] })
-        }
-      ) }),
-      l?.map((c) => /* @__PURE__ */ r(d.Fragment, { children: [
-        /* @__PURE__ */ t(D, { sx: { backgroundColor: a.palette.background.paper, py: 14 }, children: /* @__PURE__ */ t(
-          _,
-          {
-            primary: /* @__PURE__ */ r(h, { direction: "row", justifyContent: "space-between", children: [
-              /* @__PURE__ */ t(m, { sx: { mr: 10 }, variant: "Body", children: c.accountName }),
-              /* @__PURE__ */ t(
-                y,
-                {
-                  amount: c.gain,
-                  sx: { color: a.palette.success.main, flexShrink: 0, fontWeight: 700 },
-                  variant: "Body"
-                }
-              )
-            ] }),
-            sx: { px: 16 }
-          }
-        ) }),
-        /* @__PURE__ */ t(W, {})
-      ] }, c.accountName)),
-      /* @__PURE__ */ t(k, { sx: { mb: 8, mt: 12, mx: 8 }, children: /* @__PURE__ */ t(
-        _,
+}, Ne = S(De), Ee = () => {
+  const { net_worth: t } = N(), a = j(), { onEvent: i } = z(), {
+    assetsLiabilities: n,
+    gainsLosses: s,
+    hoveredData: r,
+    netWorthChartData: c,
+    selectedData: l,
+    setHoveredIndex: f,
+    setSelectedIndex: g
+  } = R(), [w, y] = u.useState(!1), [b, I] = u.useState(!1), L = (p) => {
+    const C = p.x === r?.x, O = p.x === l?.x, W = {
+      backgroundColor: "inherit",
+      borderBottom: "inherit",
+      color: "inherit"
+    };
+    return C && (W.color = O ? "inherit" : W.color, W.backgroundColor = a.palette.action.hover), O && (W.backgroundColor = a.palette.primary.main, W.borderBottom = a.palette.border.light, W.color = a.palette.common.white), W;
+  }, E = (p, C) => {
+    g(C), p.currentTarget instanceof HTMLDivElement && y(!0);
+  }, h = () => {
+    I(!0), i(v.NET_WORTH_WIDGET_CLICK_ASSETS_LIABILITIES);
+  }, M = (p) => {
+    f(p);
+  }, H = () => {
+    f(-1);
+  };
+  return /* @__PURE__ */ o(d, { direction: "column", sx: { width: 320 }, children: [
+    /* @__PURE__ */ o($, { children: [
+      /* @__PURE__ */ e(k, { sx: { backgroundColor: "transparent", mb: 8, mt: 12, px: 12 }, children: /* @__PURE__ */ e(m, { bold: !0, component: "h2", variant: "Body", children: t.monthly_totals }) }),
+      /* @__PURE__ */ e(T, {}),
+      c.map((p, C) => /* @__PURE__ */ e(
+        ve,
         {
-          primary: /* @__PURE__ */ r(h, { direction: "row", justifyContent: "space-between", children: [
-            /* @__PURE__ */ t(m, { sx: { fontWeight: 700 }, variant: "XSmall", children: o.losses }),
-            /* @__PURE__ */ t(y, { amount: s, sx: { fontWeight: 400 }, variant: "XSmall" })
-          ] })
-        }
-      ) }),
-      i?.map((c) => /* @__PURE__ */ r(v, { children: [
-        /* @__PURE__ */ t(
-          D,
-          {
-            sx: { backgroundColor: a.palette.background.paper, py: 14 },
-            children: /* @__PURE__ */ t(
-              _,
-              {
-                primary: /* @__PURE__ */ r(h, { direction: "row", justifyContent: "space-between", children: [
-                  /* @__PURE__ */ t(
-                    m,
-                    {
-                      sx: {
-                        mr: 10
-                      },
-                      variant: "Body",
-                      children: c.accountName
-                    }
-                  ),
-                  /* @__PURE__ */ t(
-                    y,
-                    {
-                      amount: c.loss,
-                      sx: { flexShrink: 0, fontWeight: 700 },
-                      variant: "Body"
-                    }
-                  )
-                ] }),
-                sx: { px: 16 }
-              }
-            )
-          },
-          c.accountName
-        ),
-        /* @__PURE__ */ t(W, {})
-      ] }))
+          getStyles: L,
+          isHovered: p.x === r?.x,
+          isSelected: p.x === l?.x,
+          item: p,
+          onItemClick: (O) => E(O, C),
+          onMouseEnter: () => M(C),
+          onMouseLeave: () => H()
+        },
+        p.x
+      ))
+    ] }),
+    /* @__PURE__ */ e(
+      de,
+      {
+        onClick: () => h(),
+        sx: { alignSelf: "center", marginTop: 16, width: "fit-content" },
+        variant: "outlined",
+        children: t.view_assets_and_liabilities
+      }
+    ),
+    /* @__PURE__ */ e(
+      K,
+      {
+        ariaLabelClose: "Close",
+        isOpen: w,
+        onClose: () => y(!1),
+        shouldShowHeaderBorders: !1,
+        shouldShowHeaderShadow: !0,
+        title: t.gains_and_losses,
+        children: s && /* @__PURE__ */ e(Ie, { ...s })
+      }
+    ),
+    /* @__PURE__ */ e(
+      K,
+      {
+        ariaLabelClose: "Close",
+        isOpen: b,
+        onClose: () => I(!1),
+        shouldShowHeaderBorders: !1,
+        shouldShowHeaderShadow: !0,
+        title: t.assets_and_liabilities,
+        children: n && /* @__PURE__ */ e(Ne, { ...n })
+      }
+    )
+  ] });
+}, Me = S(Ee), ke = ({ hoveredData: t, selectedData: a }) => {
+  const { net_worth: i } = N(), n = j(), s = t || a, r = fe(xe(s.x), "MMMM");
+  return /* @__PURE__ */ o(d, { alignItems: "center", direction: "column", m: 24, children: [
+    /* @__PURE__ */ e(m, { color: n.palette.secondary.main, variant: "Small", children: `${r} ${i.net_worth}` }),
+    /* @__PURE__ */ e(x, { amount: s.y, variant: "H2" }),
+    /* @__PURE__ */ e(G, { currencyLabel: i.this_month, netWorth: s, theme: n })
+  ] });
+}, Ae = S(ke), He = ({ amount: t, copy: a, trendValue: i }) => {
+  const n = i > 0, r = i === 0 ? "trending_flat" : n ? "trending_up" : "trending_down";
+  return /* @__PURE__ */ o(d, { sx: { flexDirection: "row", justifyContent: "space-between" }, children: [
+    /* @__PURE__ */ e(Z, { variant: "H1", children: U(t, "0,0") }),
+    t !== 0 && /* @__PURE__ */ o(d, { sx: { color: n ? "success.main" : "text.secondary" }, children: [
+      /* @__PURE__ */ o(d, { sx: { flexDirection: "row", gap: 8 }, children: [
+        /* @__PURE__ */ e(te, { name: r, size: 20 }),
+        /* @__PURE__ */ e(m, { sx: { fontWeight: 600, textAlign: "right" }, variant: "body1", children: U(i, "0,0.00") })
+      ] }),
+      /* @__PURE__ */ e(m, { sx: { display: "block", textAlign: "right" }, variant: "caption", children: a.this_month })
     ] })
   ] });
-}, te = w(Pt), Be = w(({ onBackClick: e }) => {
-  const { isCopyLoaded: l, isInitialized: i, selectedAccounts: n, setSelectedAccounts: s } = P(), { accounts: o, net_worth: a } = T(), { visibleAccounts: c } = J(), {
-    assetsLiabilities: u,
-    gainsLosses: C,
-    hoveredData: x,
-    loadChartData: g,
-    loadNetWorthData: S,
-    netWorthChartData: p,
-    selectedData: f,
-    setHoveredData: L,
-    setSelectedData: at
-  } = tt(), { isMobile: N } = Z(), { onEvent: E } = Q(), { onLoad: st } = Wt(), [ct, lt] = d.useState(!1), [A, mt] = d.useState(6), [dt, j] = d.useState(!1), [ht, $] = d.useState(!1), [ut, G] = d.useState(!1), pt = async () => {
-    await S(n), await g(A), lt(!0);
-  };
-  d.useEffect(() => {
-    E(b.NET_WORTH_VIEW);
-  }, []), d.useEffect(() => {
-    s(c);
-  }, [c]), d.useEffect(() => {
-    i && pt().finally(() => {
-      st?.("NetWorthWidget");
+}, Oe = ({ copy: t }) => /* @__PURE__ */ o(d, { sx: { flexDirection: "row", gap: 12 }, children: [
+  /* @__PURE__ */ e(te, { name: "elevation", size: 32, sx: { color: "text.primary" } }),
+  /* @__PURE__ */ o(d, { children: [
+    /* @__PURE__ */ e(m, { sx: { display: "block", fontWeight: 600 }, variant: "body1", children: t.empty_widget_header }),
+    /* @__PURE__ */ e(Z, { sx: { color: "text.secondary" }, variant: "body2", children: t.zero_state_description })
+  ] })
+] }), _t = S(({ onCTAClick: t }) => {
+  const { visibleAccounts: a } = ce(), { onEvent: i } = z(), { net_worth: n, common: s } = N(), { isInitialized: r } = Y(), { isNetWorthDataLoaded: c, loadNetWorthData: l, netWorthData: f, selectedData: g } = R();
+  if (u.useEffect(() => {
+    c || l().finally();
+  }, []), re({
+    widgetName: "NetWorthMicroWidget",
+    isLoaded: c
+  }), u.useEffect(() => {
+    c && i(v.NET_WORTH_LOAD_WIDGET, {
+      state: a?.length ? "default" : "zeroState"
     });
-  }, [i, n]), d.useEffect(() => {
-    E(b.NET_WORTH_WIDGET_CLICK_TIMEFRAME, { time_period: A + "M" }), g(A).finally();
-  }, [A]);
-  const ft = (I, M) => {
-    at(M), I.currentTarget instanceof HTMLDivElement && j(!0);
-  }, xt = (I) => {
-    L(I);
-  }, gt = () => {
-    L(null);
-  }, yt = () => {
-    E(b.NET_WORTH_WIDGET_CLICK_ASSETS_LIABILITIES), $(!0);
-  }, Ct = async (I) => {
-    const M = I[0], F = I[1];
-    M && F && mt(At(F, M));
-  }, X = {
-    chartData: p,
-    hoveredData: x,
-    onButtonClick: yt,
-    onDataClick: ft,
-    onMouseEnter: xt,
-    onMouseLeave: gt,
-    selectedData: f
-  }, St = () => {
-    G(!0), E(b.ACCOUNTS_CLICK_CONNECT);
+  }, [c]), !r || !c) return /* @__PURE__ */ e(ne, { height: 100 });
+  const w = () => {
+    i(
+      a.length ? v.NET_WORTH_CLICK_VIEW_DETAILS : v.NET_WORTH_CLICK_GET_STARTED
+    ), t();
   };
-  return l ? /* @__PURE__ */ t(
-    Ht,
+  return /* @__PURE__ */ e(
+    ye,
     {
-      accountOptions: c,
-      calendarActions: {
-        onRangeChanged: Ct
-      },
-      dateRangeVariant: N ? "timeframetabs" : "timeframebuttons",
-      onAccountsFilterClick: () => E(b.NET_WORTH_WIDGET_CLICK_FILTER),
-      onBackClick: e,
+      className: "mx-networth-microwidget",
+      ctaLabel: s.see_details,
+      onCTAClick: w,
+      title: n.net_worth,
+      children: f.accounts.length ? /* @__PURE__ */ e(
+        He,
+        {
+          amount: g?.y,
+          copy: n,
+          trendValue: g?.change
+        }
+      ) : /* @__PURE__ */ e(Oe, { copy: n })
+    }
+  );
+}), St = S(({ onBackClick: t }) => {
+  const { isInitialized: a } = Y(), { accounts: i, net_worth: n } = N(), {
+    hoveredData: s,
+    isNetWorthDataLoaded: r,
+    loadNetWorthData: c,
+    netWorthChartData: l,
+    selectedData: f,
+    setTimeframe: g,
+    timeframe: w
+  } = R(), { isMobile: y } = q(), { onEvent: b } = z(), [I, L] = u.useState(!1);
+  re({
+    widgetName: "NetWorthWidget",
+    isLoaded: r
+  }), u.useEffect(() => {
+    r || c().finally(), b(v.NET_WORTH_VIEW);
+  }, []), u.useEffect(() => {
+    b(v.NET_WORTH_WIDGET_CLICK_TIMEFRAME, { time_period: w + "M" });
+  }, [w]);
+  const E = async (H) => {
+    const p = H[0], C = H[1];
+    p && C && g(ge(C, p));
+  }, h = () => {
+    L(!0), b(v.ACCOUNTS_CLICK_CONNECT);
+  };
+  if (!a || !r) return /* @__PURE__ */ e(ne, {});
+  const M = l.length === 0;
+  return /* @__PURE__ */ o(
+    ue,
+    {
+      calendarActions: { onRangeChanged: E },
+      dateRangeVariant: y ? "timeframetabs" : "timeframebuttons",
+      onAccountsFilterClick: () => b(v.NET_WORTH_WIDGET_CLICK_FILTER),
+      onBackClick: t,
       showDividerAboveDateSelector: !1,
       sx: {
-        p: N ? 0 : 48,
+        p: y ? 0 : 48,
         "& .MuiCardHeader-root": {
           px: 16,
           py: 12
@@ -503,30 +522,16 @@ const Rt = ({
           width: "100%"
         }
       },
-      title: a.net_worth,
-      children: ct ? /* @__PURE__ */ r(v, { children: [
-        p.length ? /* @__PURE__ */ r(v, { children: [
-          f && /* @__PURE__ */ t(Vt, { hoveredData: x, selectedData: f }),
-          /* @__PURE__ */ r(
-            h,
-            {
-              alignItems: N ? "center" : "flex-start",
-              direction: N ? "column" : "row",
-              spacing: N ? 0 : 48,
-              children: [
-                /* @__PURE__ */ t(jt, { ...X }),
-                /* @__PURE__ */ t(Ft, { ...X })
-              ]
-            }
-          )
-        ] }) : /* @__PURE__ */ t(rt, { sx: { justifyItems: "center" }, children: /* @__PURE__ */ t(
-          zt,
+      title: n.net_worth,
+      children: [
+        M ? /* @__PURE__ */ e(ee, { sx: { justifyItems: "center" }, children: /* @__PURE__ */ e(
+          _e,
           {
-            header: a.empty_widget_header,
+            header: n.empty_widget_header,
             icon: "elevation",
-            onClick: St,
-            primaryButton: a.empty_widget_button,
-            subText: a.empty_widget_description,
+            onClick: h,
+            primaryButton: n.empty_widget_button,
+            subText: n.empty_widget_description,
             sx: {
               width: { sm: 432 },
               ".buttons-footer": {
@@ -534,48 +539,38 @@ const Rt = ({
               }
             }
           }
-        ) }),
-        /* @__PURE__ */ t(
-          Bt,
-          {
-            onClose: () => G(!1),
-            showConnectionsWidget: ut,
-            title: o.manage_connections
-          }
-        ),
-        /* @__PURE__ */ t(
-          Y,
-          {
-            ariaLabelClose: "Close",
-            isOpen: dt,
-            onClose: () => j(!1),
-            shouldShowHeaderBorders: !1,
-            shouldShowHeaderShadow: !0,
-            title: a.gains_and_losses,
-            children: C && /* @__PURE__ */ t(te, { ...C })
-          }
-        ),
-        /* @__PURE__ */ t(
-          Y,
+        ) }) : /* @__PURE__ */ o(D, { children: [
+          f && /* @__PURE__ */ e(Ae, { hoveredData: s, selectedData: f }),
+          /* @__PURE__ */ o(
+            d,
+            {
+              alignItems: y ? "center" : "flex-start",
+              direction: y ? "column" : "row",
+              spacing: y ? 0 : 48,
+              children: [
+                /* @__PURE__ */ e(we, {}),
+                /* @__PURE__ */ e(Me, {})
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e(
+          Ce,
           {
-            ariaLabelClose: "Close",
-            isOpen: ht,
-            onClose: () => $(!1),
-            shouldShowHeaderBorders: !1,
-            shouldShowHeaderShadow: !0,
-            title: a.assets_and_liabilities,
-            children: u && /* @__PURE__ */ t(Qt, { ...u })
+            onClose: () => L(!1),
+            showConnectionsWidget: I,
+            title: i.manage_connections
           }
         )
-      ] }) : /* @__PURE__ */ t(O, {})
+      ]
     }
-  ) : /* @__PURE__ */ t(O, {});
+  );
 });
 export {
-  jt as NetWorthChart,
-  Ft as NetWorthList,
-  He as NetWorthMicroWidget,
-  Re as NetWorthStore,
-  Vt as NetWorthSummary,
-  Be as NetWorthWidget
+  we as NetWorthChart,
+  Me as NetWorthList,
+  _t as NetWorthMicroWidget,
+  vt as NetWorthStore,
+  Ae as NetWorthSummary,
+  St as NetWorthWidget
 };