@mx-cartographer/experiences 9.0.0-alpha.mega1 → 9.0.0-ram1-bug-alpha-testing

package/dist/networth/index.es.js

@@ -1,99 +1,149 @@
-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 { jsxs as r, jsx as e, Fragment as N } from "react/jsx-runtime";
 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 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 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 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(), {
+import { observer as _ } from "mobx-react-lite";
+import m from "@mui/material/Stack";
+import { P as Y, Text as d, Icon as R } from "@mxenabled/mxui";
+import { Icon as Z } from "@mxenabled/mx-icons";
+import { f as F } from "../NumberFormatting--XMeeBfr.mjs";
+import { d as oe, g as $, u as E, b as q, x as j, D as re } from "../hooks-BaO_gOI6.mjs";
+import { u as J } from "../useWidgetLoadTimer-CJb-RELP.mjs";
+import { A as v } from "../Analytics-CzGzz_sE.mjs";
+import { L as Q } from "../Loader-CxeBwuPG.mjs";
+import { M as ie } from "../MicroWidgetContainer-CfKdQfhi.mjs";
+import { format as ae, fromUnixTime as se, differenceInMonths as ce } from "date-fns";
+import P from "@mui/material/Box";
+import { C as le } from "../ConnectionsDrawer-CtfPXk0M.mjs";
+import { fromUnixTime as de } from "date-fns/fromUnixTime";
+import { useTheme as H } from "@mui/material/styles";
+import { L as me } from "../LineChart-CejWS_rh.mjs";
+import { u as ee } from "../useScreenSize-mWpmnh5w.mjs";
+import { f as he, D as pe } from "../DateFormats-HudZ3Bjs.mjs";
+import ue from "@mui/material/Button";
+import L from "@mui/material/Divider";
+import z from "@mui/material/List";
+import A from "@mui/material/ListSubheader";
+import O from "@mui/material/ListItem";
+import te from "@mui/material/ListItemButton";
+import b from "@mui/material/ListItemText";
+import { j as ne } from "../DateUtil-Bhq59ZVg.mjs";
+import { C as x } from "../CurrencyText-CCbE6MmF.mjs";
+import { Stack as fe } from "@mui/material";
+import xe from "@mui/material/Collapse";
+import K from "@mui/material/ListItemIcon";
+import { g as U } from "../NetWorthUtils-DilGN1nW.mjs";
+import { D as V } from "../Drawer-BXqqBMxg.mjs";
+import { W as ge } from "../WidgetContainer-DNuz_s7W.mjs";
+import { E as ye } from "../EmptyState-CJUDc3kD.mjs";
+const Ce = ({ amount: t, copy: s, trendValue: i }) => {
+  const n = i > 0, o = i === 0 ? "trending_flat" : n ? "trending_up" : "trending_down";
+  return /* @__PURE__ */ r(m, { sx: { flexDirection: "row", justifyContent: "space-between" }, children: [
+    /* @__PURE__ */ e(Y, { variant: "h1", children: F(t, "0,0") }),
+    t !== 0 && /* @__PURE__ */ r(m, { sx: { color: n ? "success.main" : "text.secondary" }, children: [
+      /* @__PURE__ */ r(m, { sx: { flexDirection: "row", gap: 8 }, children: [
+        /* @__PURE__ */ e(Z, { name: o, size: 20 }),
+        /* @__PURE__ */ e(d, { sx: { fontWeight: 600, textAlign: "right" }, variant: "body1", children: F(i, "0,0.00") })
+      ] }),
+      /* @__PURE__ */ e(d, { sx: { display: "block", textAlign: "right" }, variant: "caption", children: s.this_month })
+    ] })
+  ] });
+}, be = ({ copy: t }) => /* @__PURE__ */ r(m, { sx: { flexDirection: "row", gap: 12 }, children: [
+  /* @__PURE__ */ e(Z, { name: "elevation", size: 32, sx: { color: "text.primary" } }),
+  /* @__PURE__ */ r(m, { children: [
+    /* @__PURE__ */ e(d, { sx: { display: "block", fontWeight: 600 }, variant: "body1", children: t.empty_widget_header }),
+    /* @__PURE__ */ e(Y, { sx: { color: "text.secondary" }, variant: "body2", children: t.zero_state_description })
+  ] })
+] }), gt = _(({ onCTAClick: t }) => {
+  const { visibleAccounts: s } = oe(), { onEvent: i } = $(), { net_worth: n, common: a } = E(), { isInitialized: o } = q(), { isNetWorthDataLoaded: c, loadNetWorthData: l, netWorthData: g, selectedData: f } = j();
+  if (u.useEffect(() => {
+    c || l().finally();
+  }, []), J({
+    widgetName: "NetWorthMicroWidget",
+    isLoaded: c
+  }), u.useEffect(() => {
+    c && i(v.NET_WORTH_LOAD_WIDGET, {
+      state: s?.length ? "default" : "zeroState"
+    });
+  }, [c]), !o || !c) return /* @__PURE__ */ e(Q, { height: 100 });
+  const W = () => {
+    i(
+      s.length ? v.NET_WORTH_CLICK_VIEW_DETAILS : v.NET_WORTH_CLICK_GET_STARTED
+    ), t();
+  };
+  return /* @__PURE__ */ e(
+    ie,
+    {
+      className: "mx-networth-microwidget",
+      ctaLabel: a.see_details,
+      onCTAClick: W,
+      title: n.net_worth,
+      children: g.accounts.length ? /* @__PURE__ */ e(
+        Ce,
+        {
+          amount: f?.y,
+          copy: n,
+          trendValue: f?.change
+        }
+      ) : /* @__PURE__ */ e(be, { copy: n })
+    }
+  );
+}), _e = () => {
+  const { isMobile: t } = ee(), { availableWidth: s } = re(), i = H(), {
     hoveredData: n,
-    netWorthChartData: s,
-    selectedData: r,
+    netWorthChartData: a,
+    selectedData: o,
     setHoveredIndex: c,
     setSelectedIndex: l
-  } = R(), f = a - 320, g = s.map((h) => ({
-    x: le(oe(h.x), me.MONTH_SHORT),
+  } = j(), g = s - 320, f = a.map((h) => ({
+    x: he(de(h.x), pe.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",
+  })), W = o ? { index: a.findIndex((h) => h.x === o.x) } : void 0, S = n ? { index: a.findIndex((h) => h.x === n.x) } : void 0, w = (h) => ({
+    fill: h === W?.index ? i.palette.success.main : "",
+    filter: h === S?.index ? `drop-shadow(0px 0px 10px ${i.palette.success.main})` : "none",
     stroke: i.palette.success.main
-  }), I = (h, M) => {
+  }), y = (h, M) => {
     l(M);
-  }, L = (h) => {
+  }, k = (h) => {
     c(h);
-  }, E = () => {
+  }, D = () => {
     c(-1);
   };
-  return /* @__PURE__ */ e(ie, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
-    ae,
+  return /* @__PURE__ */ e(m, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
+    me,
     {
       baseline: "min",
       chartFor: "networthChart",
       chartXaxisSx: { "& .MuiChartsAxis-tickLabel": { transform: "translateX(8px)" } },
       chartYaxisSx: { "& .MuiChartsAxis-tickLabel": { transform: "translateX(-8px)" } },
       colors: [i.palette.success.main],
-      datasets: [g],
+      datasets: [f],
       height: 350,
       labels: [],
       margin: { right: 20, left: 38 },
-      markHandlers: { onMarkClick: I, onMouseEnter: L, onMouseLeave: E },
-      markStyles: b,
+      markHandlers: { onMarkClick: y, onMouseEnter: k, onMouseLeave: D },
+      markStyles: w,
       showArea: !0,
       useCustomMark: !0,
       valueFormatterString: "0.0[0]a",
-      width: t ? a - 48 : f
+      width: t ? s - 48 : g
     }
   ) });
-}, we = S(Se), be = ({
+}, we = _(_e), ve = ({
   item: t,
-  getStyles: a,
+  getStyles: s,
   isHovered: i = !1,
   isSelected: n = !1,
-  onItemClick: s,
-  onMouseEnter: r,
+  onItemClick: a,
+  onMouseEnter: o,
   onMouseLeave: c
 }) => {
-  const [l, f] = u.useState({
+  const [l, g] = u.useState({
     color: ""
   });
   return u.useEffect(() => {
-    f(a(t));
-  }, [i, n]), /* @__PURE__ */ o(u.Fragment, { children: [
+    g(s(t));
+  }, [i, n]), /* @__PURE__ */ r(u.Fragment, { children: [
     /* @__PURE__ */ e(
-      A,
+      O,
       {
         sx: {
           ...l,
@@ -101,18 +151,18 @@ const Se = () => {
           "&:hover": { color: n ? "inherit" : l.color }
         },
         children: /* @__PURE__ */ e(
-          J,
+          te,
           {
-            onClick: (g) => s?.(g, t.x),
-            onMouseEnter: () => r(t.x),
+            onClick: (f) => a?.(f, t.x),
+            onMouseEnter: () => o(t.x),
             onMouseLeave: () => c(),
             sx: { minHeight: 20, padding: 12 },
             children: /* @__PURE__ */ e(
-              _,
+              b,
               {
-                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" })
+                primary: /* @__PURE__ */ r(m, { direction: "row", justifyContent: "space-between", sx: { fontWeight: 400 }, children: [
+                  /* @__PURE__ */ e(d, { variant: "body1", children: ne(t.x) }),
+                  /* @__PURE__ */ e(x, { amount: t.y, sx: { color: "inherit" }, variant: "body1" })
                 ] })
               }
             )
@@ -120,99 +170,99 @@ const Se = () => {
         )
       }
     ),
-    /* @__PURE__ */ e(T, {})
+    /* @__PURE__ */ e(L, {})
   ] }, t.x);
-}, ve = S(be), We = ({
+}, We = _(ve), Se = ({
   currencyLabel: t,
-  currencyVariant: a = "Small",
+  currencyVariant: s = "body2",
   iconSize: i,
   netWorth: n,
-  theme: s
+  theme: a
 }) => {
-  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: [
+  let o = a.palette.secondary.main, c = a.palette.secondary.main, l = "trending_flat";
+  return n.change < 0 ? l = "trending_down" : n.change > 0 && (o = a.palette.success.main, c = a.palette.success.main, l = "trending_up"), /* @__PURE__ */ r(fe, { alignItems: "center", direction: "row", spacing: 4, children: [
     /* @__PURE__ */ e(
-      B,
+      R,
       {
         name: l,
         size: i,
         sx: {
-          color: r
+          color: o
         }
       }
     ),
-    /* @__PURE__ */ e(x, { amount: n.change, color: c, variant: a }),
-    /* @__PURE__ */ e(m, { variant: "Small", children: t })
+    /* @__PURE__ */ e(x, { amount: n.change, color: c, variant: s }),
+    /* @__PURE__ */ e(d, { variant: "body2", children: t })
   ] });
-}, G = S(We), Te = ({
+}, B = _(Se), Ie = ({
   netWorth: t,
-  gains: a,
+  gains: s,
   losses: i,
   totalGains: n,
-  totalLosses: s
+  totalLosses: a
 }) => {
-  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 })
+  const { net_worth: o } = E(), c = H();
+  return /* @__PURE__ */ r(N, { children: [
+    /* @__PURE__ */ r(m, { alignItems: "center", justifyContent: "space-between", mb: 8, pt: 24, children: [
+      /* @__PURE__ */ e(d, { variant: "body2", children: ne(t?.x) }),
+      /* @__PURE__ */ e(d, { variant: "body1", children: o.total_change }),
+      t && /* @__PURE__ */ e(B, { currencyVariant: "h1", iconSize: 32, netWorth: t, theme: c })
     ] }),
-    /* @__PURE__ */ o($, { children: [
-      /* @__PURE__ */ e(k, { sx: { mb: 8, mt: 12, mx: 8 }, children: /* @__PURE__ */ e(
-        _,
+    /* @__PURE__ */ r(z, { children: [
+      /* @__PURE__ */ e(A, { sx: { mb: 8, mt: 12, mx: 8 }, children: /* @__PURE__ */ e(
+        b,
         {
-          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" })
+          primary: /* @__PURE__ */ r(m, { direction: "row", justifyContent: "space-between", children: [
+            /* @__PURE__ */ e(d, { sx: { fontWeight: 700 }, variant: "caption", children: o.gains }),
+            /* @__PURE__ */ e(x, { amount: n, sx: { fontWeight: 400 }, variant: "caption" })
           ] })
         }
       ) }),
-      a?.map((l) => /* @__PURE__ */ o(u.Fragment, { children: [
-        /* @__PURE__ */ e(A, { sx: { backgroundColor: c.palette.background.paper, py: 14 }, children: /* @__PURE__ */ e(
-          _,
+      s?.map((l) => /* @__PURE__ */ r(u.Fragment, { children: [
+        /* @__PURE__ */ e(O, { sx: { backgroundColor: c.palette.background.paper, py: 14 }, children: /* @__PURE__ */ e(
+          b,
           {
-            primary: /* @__PURE__ */ o(d, { direction: "row", justifyContent: "space-between", children: [
-              /* @__PURE__ */ e(m, { sx: { mr: 10 }, variant: "Body", children: l.accountName }),
+            primary: /* @__PURE__ */ r(m, { direction: "row", justifyContent: "space-between", children: [
+              /* @__PURE__ */ e(d, { sx: { mr: 10 }, variant: "body1", children: l.accountName }),
               /* @__PURE__ */ e(
                 x,
                 {
                   amount: l.gain,
                   sx: { color: c.palette.success.main, flexShrink: 0, fontWeight: 700 },
-                  variant: "Body"
+                  variant: "body1"
                 }
               )
             ] }),
             sx: { px: 16 }
           }
         ) }),
-        /* @__PURE__ */ e(T, {})
+        /* @__PURE__ */ e(L, {})
       ] }, l.accountName)),
-      /* @__PURE__ */ e(k, { sx: { mb: 8, mt: 12, mx: 8 }, children: /* @__PURE__ */ e(
-        _,
+      /* @__PURE__ */ e(A, { sx: { mb: 8, mt: 12, mx: 8 }, children: /* @__PURE__ */ e(
+        b,
         {
-          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" })
+          primary: /* @__PURE__ */ r(m, { direction: "row", justifyContent: "space-between", children: [
+            /* @__PURE__ */ e(d, { sx: { fontWeight: 700 }, variant: "caption", children: o.losses }),
+            /* @__PURE__ */ e(x, { amount: a, sx: { fontWeight: 400 }, variant: "caption" })
           ] })
         }
       ) }),
-      i?.map((l) => /* @__PURE__ */ o(D, { children: [
+      i?.map((l) => /* @__PURE__ */ r(N, { children: [
         /* @__PURE__ */ e(
-          A,
+          O,
           {
             sx: { backgroundColor: c.palette.background.paper, py: 14 },
             children: /* @__PURE__ */ e(
-              _,
+              b,
               {
-                primary: /* @__PURE__ */ o(d, { direction: "row", justifyContent: "space-between", children: [
+                primary: /* @__PURE__ */ r(m, { direction: "row", justifyContent: "space-between", children: [
                   /* @__PURE__ */ e(
-                    m,
+                    d,
                     {
                       sx: {
                         mr: 10
                       },
-                      variant: "Body",
+                      variant: "body1",
                       children: l.accountName
                     }
                   ),
@@ -221,7 +271,7 @@ const Se = () => {
                     {
                       amount: l.loss,
                       sx: { flexShrink: 0, fontWeight: 700 },
-                      variant: "Body"
+                      variant: "body1"
                     }
                   )
                 ] }),
@@ -231,67 +281,67 @@ const Se = () => {
           },
           l.accountName
         ),
-        /* @__PURE__ */ e(T, {})
+        /* @__PURE__ */ e(L, {})
       ] }))
     ] })
   ] });
-}, 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 } }) }),
+}, Te = _(Ie), Le = ({ accounts: t, name: s, icon: i }) => {
+  const [n, a] = u.useState(!1);
+  return /* @__PURE__ */ r(N, { children: [
+    /* @__PURE__ */ e(O, { sx: (o) => ({ backgroundColor: o.palette.background.paper }), children: /* @__PURE__ */ r(te, { onClick: () => a(!n), children: [
+      i && /* @__PURE__ */ e(K, { children: /* @__PURE__ */ e(R, { name: i, size: 24, sx: { mr: 12 } }) }),
       /* @__PURE__ */ e(
-        _,
+        b,
         {
-          primary: /* @__PURE__ */ e(m, { sx: { fontWeight: 700 }, variant: "Body", children: a })
+          primary: /* @__PURE__ */ e(d, { sx: { fontWeight: 700 }, variant: "body1", children: s })
         }
       ),
-      /* @__PURE__ */ e(X, { children: n ? /* @__PURE__ */ e(B, { name: "expand_less", size: 24 }) : /* @__PURE__ */ e(B, { name: "expand_more", size: 24 }) })
+      /* @__PURE__ */ e(K, { children: n ? /* @__PURE__ */ e(R, { name: "expand_less", size: 24 }) : /* @__PURE__ */ e(R, { name: "expand_more", size: 24 }) })
     ] }) }),
-    /* @__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(
-        _,
+    /* @__PURE__ */ e(L, {}),
+    /* @__PURE__ */ e(xe, { in: n, timeout: "auto", unmountOnExit: !0, children: t.map((o, c) => /* @__PURE__ */ r(z, { children: [
+      /* @__PURE__ */ e(O, { sx: () => ({ py: 14 }), children: /* @__PURE__ */ e(
+        b,
         {
-          primary: /* @__PURE__ */ o(d, { direction: "row", justifyContent: "space-between", sx: { fontWeight: 400 }, children: [
+          primary: /* @__PURE__ */ r(m, { direction: "row", justifyContent: "space-between", sx: { fontWeight: 400 }, children: [
             /* @__PURE__ */ e(
-              m,
+              d,
               {
                 sx: {
                   marginRight: 10
                 },
-                variant: "Body",
-                children: r.accountName
+                variant: "body1",
+                children: o.accountName
               }
             ),
             /* @__PURE__ */ e(
               x,
               {
-                amount: r.balance,
+                amount: o.balance,
                 sx: {
                   flexShrink: 0
                 },
-                variant: "Small"
+                variant: "body2"
               }
             )
           ] }),
           sx: { pl: 72, pr: 16 }
         }
       ) }),
-      c < t.length - 1 ? /* @__PURE__ */ e(T, { variant: "inset" }) : /* @__PURE__ */ e(T, {})
-    ] }, r.accountName)) })
+      c < t.length - 1 ? /* @__PURE__ */ e(L, { variant: "inset" }) : /* @__PURE__ */ e(L, {})
+    ] }, o.accountName)) })
   ] });
-}, 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 = ({
+}, X = ({ groupedAccounts: t }) => /* @__PURE__ */ e(N, { children: t.map(({ accounts: s, icon: i, name: n }) => /* @__PURE__ */ e(Le, { accounts: s, icon: i, name: n }, n)) }), De = ({
   netWorth: t,
-  assets: a,
+  assets: s,
   liabilities: i,
   totalAssets: n,
-  totalLiabilities: s
+  totalLiabilities: a
 }) => {
-  const { net_worth: r } = N(), c = P();
-  return /* @__PURE__ */ o(D, { children: [
-    /* @__PURE__ */ o(
-      ee,
+  const { net_worth: o } = E(), c = H();
+  return /* @__PURE__ */ r(N, { children: [
+    /* @__PURE__ */ r(
+      P,
       {
         sx: {
           alignItems: "center",
@@ -302,12 +352,12 @@ const Se = () => {
           marginBottom: 8
         },
         children: [
-          /* @__PURE__ */ e(m, { variant: "Body", children: r.current_net_worth }),
-          /* @__PURE__ */ e(x, { amount: t?.y ?? 0, variant: "H1" }),
+          /* @__PURE__ */ e(d, { variant: "body1", children: o.current_net_worth }),
+          /* @__PURE__ */ e(x, { amount: t?.y ?? 0, variant: "h1" }),
           t && /* @__PURE__ */ e(
-            G,
+            B,
             {
-              currencyLabel: r.this_month,
+              currencyLabel: o.this_month,
               iconSize: 20,
               netWorth: t,
               theme: c
@@ -316,74 +366,81 @@ const Se = () => {
         ]
       }
     ),
-    /* @__PURE__ */ o($, { children: [
-      /* @__PURE__ */ e(k, { sx: { mb: 8, mt: 12, mx: 8 }, children: /* @__PURE__ */ e(
-        _,
+    /* @__PURE__ */ r(z, { children: [
+      /* @__PURE__ */ e(A, { sx: { mb: 8, mt: 12, mx: 8 }, children: /* @__PURE__ */ e(
+        b,
         {
-          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" })
+          primary: /* @__PURE__ */ r(m, { direction: "row", justifyContent: "space-between", children: [
+            /* @__PURE__ */ e(d, { sx: { fontWeight: 700 }, variant: "caption", children: o.assets }),
+            /* @__PURE__ */ e(x, { amount: n, sx: { fontWeight: 400 }, variant: "caption" })
           ] })
         }
       ) }),
-      /* @__PURE__ */ e(V, { groupedAccounts: F(a) }),
-      /* @__PURE__ */ e(k, { sx: { mb: 8, mt: 12, mx: 8 }, children: /* @__PURE__ */ e(
-        _,
+      /* @__PURE__ */ e(X, { groupedAccounts: U(s) }),
+      /* @__PURE__ */ e(A, { sx: { mb: 8, mt: 12, mx: 8 }, children: /* @__PURE__ */ e(
+        b,
         {
-          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" })
+          primary: /* @__PURE__ */ r(m, { direction: "row", justifyContent: "space-between", children: [
+            /* @__PURE__ */ e(d, { sx: { fontWeight: 700 }, variant: "caption", children: o.liabilities }),
+            /* @__PURE__ */ e(
+              x,
+              {
+                amount: a,
+                sx: { fontWeight: 400 },
+                variant: "caption"
+              }
+            )
           ] })
         }
       ) }),
-      /* @__PURE__ */ e(V, { groupedAccounts: F(i) })
+      /* @__PURE__ */ e(X, { groupedAccounts: U(i) })
     ] })
   ] });
-}, Ne = S(De), Ee = () => {
-  const { net_worth: t } = N(), a = j(), { onEvent: i } = z(), {
+}, Ne = _(De), Ee = () => {
+  const { net_worth: t } = E(), s = H(), { onEvent: i } = $(), {
     assetsLiabilities: n,
-    gainsLosses: s,
-    hoveredData: r,
+    gainsLosses: a,
+    hoveredData: o,
     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 = {
+    setHoveredIndex: g,
+    setSelectedIndex: f
+  } = j(), [W, S] = u.useState(!1), [w, y] = u.useState(!1), k = (p) => {
+    const C = p.x === o?.x, I = p.x === l?.x, T = {
       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);
+    return C && (T.color = I ? "inherit" : T.color, T.backgroundColor = s.palette.action.hover), I && (T.backgroundColor = s.palette.primary.main, T.borderBottom = s.palette.neutral.light, T.color = s.palette.common.white), T;
+  }, D = (p, C) => {
+    f(C), p.currentTarget instanceof HTMLDivElement && S(!0);
   }, h = () => {
-    I(!0), i(v.NET_WORTH_WIDGET_CLICK_ASSETS_LIABILITIES);
+    y(!0), i(v.NET_WORTH_WIDGET_CLICK_ASSETS_LIABILITIES);
   }, M = (p) => {
-    f(p);
-  }, H = () => {
-    f(-1);
+    g(p);
+  }, G = () => {
+    g(-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, {}),
+  return /* @__PURE__ */ r(m, { direction: "column", sx: { width: 320 }, children: [
+    /* @__PURE__ */ r(z, { children: [
+      /* @__PURE__ */ e(A, { sx: { backgroundColor: "transparent", mb: 8, mt: 12, px: 12 }, children: /* @__PURE__ */ e(d, { bold: !0, component: "h2", variant: "body1", children: t.monthly_totals }) }),
+      /* @__PURE__ */ e(L, {}),
       c.map((p, C) => /* @__PURE__ */ e(
-        ve,
+        We,
         {
-          getStyles: L,
-          isHovered: p.x === r?.x,
+          getStyles: k,
+          isHovered: p.x === o?.x,
           isSelected: p.x === l?.x,
           item: p,
-          onItemClick: (O) => E(O, C),
+          onItemClick: (I) => D(I, C),
           onMouseEnter: () => M(C),
-          onMouseLeave: () => H()
+          onMouseLeave: () => G()
         },
         p.x
       ))
     ] }),
     /* @__PURE__ */ e(
-      de,
+      ue,
       {
         onClick: () => h(),
         sx: { alignSelf: "center", marginTop: 16, width: "fit-content" },
@@ -392,23 +449,23 @@ const Se = () => {
       }
     ),
     /* @__PURE__ */ e(
-      K,
+      V,
       {
         ariaLabelClose: "Close",
-        isOpen: w,
-        onClose: () => y(!1),
+        isOpen: W,
+        onClose: () => S(!1),
         shouldShowHeaderBorders: !1,
         shouldShowHeaderShadow: !0,
         title: t.gains_and_losses,
-        children: s && /* @__PURE__ */ e(Ie, { ...s })
+        children: a && /* @__PURE__ */ e(Te, { ...a })
       }
     ),
     /* @__PURE__ */ e(
-      K,
+      V,
       {
         ariaLabelClose: "Close",
-        isOpen: b,
-        onClose: () => I(!1),
+        isOpen: w,
+        onClose: () => y(!1),
         shouldShowHeaderBorders: !1,
         shouldShowHeaderShadow: !0,
         title: t.assets_and_liabilities,
@@ -416,122 +473,57 @@ const Se = () => {
       }
     )
   ] });
-}, 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 })
-    ] })
+}, ke = _(Ee), Me = ({ hoveredData: t, selectedData: s }) => {
+  const { net_worth: i } = E(), n = H(), a = t || s, o = ae(se(a.x), "MMMM");
+  return /* @__PURE__ */ r(m, { alignItems: "center", direction: "column", m: 24, children: [
+    /* @__PURE__ */ e(d, { color: n.palette.secondary.main, variant: "body2", children: `${o} ${i.net_worth}` }),
+    /* @__PURE__ */ e(x, { amount: a.y, variant: "h2" }),
+    /* @__PURE__ */ e(B, { currencyLabel: i.this_month, netWorth: a, theme: n })
   ] });
-}, 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"
-    });
-  }, [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 /* @__PURE__ */ e(
-    ye,
-    {
-      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,
+}, Ae = _(Me), yt = _(({ onBackClick: t, onMenuClick: s }) => {
+  const { isInitialized: i } = q(), { accounts: n, net_worth: a } = E(), {
+    hoveredData: o,
+    isNetWorthDataLoaded: c,
+    loadNetWorthData: l,
+    netWorthChartData: g,
     selectedData: f,
-    setTimeframe: g,
-    timeframe: w
-  } = R(), { isMobile: y } = q(), { onEvent: b } = z(), [I, L] = u.useState(!1);
-  re({
+    setTimeframe: W,
+    timeframe: S
+  } = j(), { isMobile: w } = ee(), { onEvent: y } = $(), [k, D] = u.useState(!1);
+  J({
     widgetName: "NetWorthWidget",
-    isLoaded: r
+    isLoaded: c
   }), u.useEffect(() => {
-    r || c().finally(), b(v.NET_WORTH_VIEW);
+    c || l().finally(), y(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);
+    y(v.NET_WORTH_WIDGET_CLICK_TIMEFRAME, { time_period: S + "M" });
+  }, [S]);
+  const h = async (p) => {
+    const C = p[0], I = p[1];
+    C && I && W(ce(I, C));
+  }, M = () => {
+    D(!0), y(v.ACCOUNTS_CLICK_CONNECT);
   };
-  if (!a || !r) return /* @__PURE__ */ e(ne, {});
-  const M = l.length === 0;
-  return /* @__PURE__ */ o(
-    ue,
+  if (!i || !c) return /* @__PURE__ */ e(Q, {});
+  const G = g.length === 0;
+  return /* @__PURE__ */ r(
+    ge,
     {
-      calendarActions: { onRangeChanged: E },
-      dateRangeVariant: y ? "timeframetabs" : "timeframebuttons",
-      onAccountsFilterClick: () => b(v.NET_WORTH_WIDGET_CLICK_FILTER),
+      calendarActions: { onRangeChanged: h },
+      dateRangeVariant: w ? "timeframetabs" : "timeframebuttons",
+      onAccountsFilterClick: () => y(v.NET_WORTH_WIDGET_CLICK_FILTER),
       onBackClick: t,
-      showDividerAboveDateSelector: !1,
-      sx: {
-        p: y ? 0 : 48,
-        "& .MuiCardHeader-root": {
-          px: 16,
-          py: 12
-        },
-        "& .MuiBox-root": {
-          m: 0
-        },
-        "& .MuiTabs-root": {
-          width: "100%"
-        }
-      },
-      title: n.net_worth,
+      onMenuClick: s,
+      title: a.net_worth,
       children: [
-        M ? /* @__PURE__ */ e(ee, { sx: { justifyItems: "center" }, children: /* @__PURE__ */ e(
-          _e,
+        G ? /* @__PURE__ */ e(P, { sx: { justifyItems: "center" }, children: /* @__PURE__ */ e(
+          ye,
           {
-            header: n.empty_widget_header,
+            header: a.empty_widget_header,
             icon: "elevation",
-            onClick: h,
-            primaryButton: n.empty_widget_button,
-            subText: n.empty_widget_description,
+            onClick: M,
+            primaryButton: a.empty_widget_button,
+            subText: a.empty_widget_description,
             sx: {
               width: { sm: 432 },
               ".buttons-footer": {
@@ -539,27 +531,27 @@ const Se = () => {
               }
             }
           }
-        ) }) : /* @__PURE__ */ o(D, { children: [
-          f && /* @__PURE__ */ e(Ae, { hoveredData: s, selectedData: f }),
-          /* @__PURE__ */ o(
-            d,
+        ) }) : /* @__PURE__ */ r(N, { children: [
+          f && /* @__PURE__ */ e(Ae, { hoveredData: o, selectedData: f }),
+          /* @__PURE__ */ r(
+            m,
             {
-              alignItems: y ? "center" : "flex-start",
-              direction: y ? "column" : "row",
-              spacing: y ? 0 : 48,
+              alignItems: w ? "center" : "flex-start",
+              direction: w ? "column" : "row",
+              spacing: w ? 0 : 48,
               children: [
                 /* @__PURE__ */ e(we, {}),
-                /* @__PURE__ */ e(Me, {})
+                /* @__PURE__ */ e(ke, {})
               ]
             }
           )
         ] }),
         /* @__PURE__ */ e(
-          Ce,
+          le,
           {
-            onClose: () => L(!1),
-            showConnectionsWidget: I,
-            title: i.manage_connections
+            onClose: () => D(!1),
+            showConnectionsWidget: k,
+            title: n.manage_connections
           }
         )
       ]
@@ -567,10 +559,6 @@ const Se = () => {
   );
 });
 export {
-  we as NetWorthChart,
-  Me as NetWorthList,
-  _t as NetWorthMicroWidget,
-  vt as NetWorthStore,
-  Ae as NetWorthSummary,
-  St as NetWorthWidget
+  gt as NetWorthMicroWidget,
+  yt as NetWorthWidget
 };