@mx-cartographer/experiences 9.0.3 → 9.1.0-alpha.bb1

package/dist/networth/index.es.js

@@ -1,115 +1,128 @@
-import { jsxs as r, jsx as e, Fragment as N } from "react/jsx-runtime";
-import u from "react";
-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 { J as F, ln as re, m as Y, un as oe, x as K } from "../core-BexP5oiV.mjs";
+import { An as ie, Gn as ae, i as se, jn as x, lr as U, mr as q, qn as ce, sr as w, yn as le } from "../accounts-DkyAiLpg.mjs";
+import { n as J } from "../Analytics-BKzTPees.mjs";
+import { d as B, h as Z, k as de, n as he, p as E, t as Q, x as j } from "../Loader-BlVzRtUd.mjs";
+import p from "react";
+import { observer as C } from "mobx-react-lite";
+import h from "@mui/material/Stack";
+import { Icon as R, P, Text as d } from "@mxenabled/mxui";
+import me from "@mui/material/Button";
+import { Icon as ee } from "@mxenabled/mx-icons";
+import { Fragment as N, jsx as e, jsxs as o } from "react/jsx-runtime";
 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 te from "@mui/material/Box";
+import { fromUnixTime as ue } from "date-fns/fromUnixTime";
+import { differenceInMonths as pe, format as fe, fromUnixTime as xe } from "date-fns";
+import { Stack as ge } from "@mui/material";
 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-CmbU4CBH.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(() => {
+import G from "@mui/material/List";
+import A from "@mui/material/ListItem";
+import ne from "@mui/material/ListItemButton";
+import V from "@mui/material/ListItemIcon";
+import v from "@mui/material/ListItemText";
+import O from "@mui/material/ListSubheader";
+import ye from "@mui/material/Collapse";
+var _e = ({ amount: t, copy: s, trendValue: i }) => {
+  const n = i > 0, r = i === 0 ? "trending_flat" : n ? "trending_up" : "trending_down";
+  return /* @__PURE__ */ o(h, {
+    sx: {
+      flexDirection: "row",
+      justifyContent: "space-between"
+    },
+    children: [/* @__PURE__ */ e(P, {
+      variant: "h1",
+      children: F(t, "0,0")
+    }), t !== 0 && /* @__PURE__ */ o(h, {
+      sx: { color: n ? "success.main" : "text.secondary" },
+      children: [/* @__PURE__ */ o(h, {
+        sx: {
+          flexDirection: "row",
+          gap: 8
+        },
+        children: [/* @__PURE__ */ e(ee, {
+          name: r,
+          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
+      })]
+    })]
+  });
+}, ve = ({ copy: t }) => /* @__PURE__ */ o(h, {
+  sx: {
+    flexDirection: "row",
+    gap: 12
+  },
+  children: [/* @__PURE__ */ e(ee, {
+    name: "elevation",
+    size: 32,
+    sx: { color: "text.primary" }
+  }), /* @__PURE__ */ o(h, { children: [/* @__PURE__ */ e(d, {
+    sx: {
+      display: "block",
+      fontWeight: 600
+    },
+    variant: "body1",
+    children: t.empty_widget_header
+  }), /* @__PURE__ */ e(P, {
+    sx: { color: "text.secondary" },
+    variant: "body2",
+    children: t.zero_state_description
+  })] })]
+}), it = C(({ onCTAClick: t }) => {
+  const { visibleAccounts: s } = he(), { onEvent: i } = B(), { net_worth: n, common: r } = E(), { isInitialized: a } = Z(), { isNetWorthDataLoaded: c, loadNetWorthData: l, netWorthData: g, selectedData: f } = j();
+  if (p.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();
+  }), p.useEffect(() => {
+    c && i(w.NET_WORTH_LOAD_WIDGET, { state: s?.length ? "default" : "zeroState" });
+  }, [c]), !a || !c) return /* @__PURE__ */ e(Q, { height: 100 });
+  const S = () => {
+    i(s.length ? w.NET_WORTH_CLICK_VIEW_DETAILS : w.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: a,
-    selectedData: o,
-    setHoveredIndex: c,
-    setSelectedIndex: l
-  } = j(), g = s - 320, f = a.map((h) => ({
-    x: he(de(h.x), pe.MONTH_SHORT),
-    y: h.y
-  })), 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",
+  return /* @__PURE__ */ e(ce, {
+    className: "mx-networth-microwidget",
+    ctaLabel: r.see_details,
+    onCTAClick: S,
+    title: n.net_worth,
+    children: g.accounts.length ? /* @__PURE__ */ e(_e, {
+      amount: f?.y,
+      copy: n,
+      trendValue: f?.change
+    }) : /* @__PURE__ */ e(ve, { copy: n })
+  });
+}), Ce = () => {
+  const { isMobile: t } = q(), { availableWidth: s } = de(), i = H(), { hoveredData: n, netWorthChartData: r, selectedData: a, setHoveredIndex: c, setSelectedIndex: l } = j(), g = s - 320, f = r.map((m) => ({
+    x: oe(ue(m.x), re.MONTH_SHORT),
+    y: m.y
+  })), S = a ? { index: r.findIndex((m) => m.x === a.x) } : void 0, W = n ? { index: r.findIndex((m) => m.x === n.x) } : void 0, b = (m) => ({
+    fill: m === S?.index ? i.palette.success.main : "",
+    filter: m === W?.index ? `drop-shadow(0px 0px 10px ${i.palette.success.main})` : "none",
     stroke: i.palette.success.main
-  }), y = (h, M) => {
+  }), y = (m, M) => {
     l(M);
-  }, k = (h) => {
-    c(h);
+  }, k = (m) => {
+    c(m);
   }, D = () => {
     c(-1);
   };
-  return /* @__PURE__ */ e(m, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
-    me,
-    {
+  return /* @__PURE__ */ e(h, {
+    sx: { width: "100%" },
+    children: /* @__PURE__ */ e(le, {
       baseline: "min",
       chartFor: "networthChart",
       chartXaxisSx: { "& .MuiChartsAxis-tickLabel": { transform: "translateX(8px)" } },
@@ -118,447 +131,481 @@ const Ce = ({ amount: t, copy: s, trendValue: i }) => {
       datasets: [f],
       height: 350,
       labels: [],
-      margin: { right: 20, left: 38 },
-      markHandlers: { onMarkClick: y, onMouseEnter: k, onMouseLeave: D },
-      markStyles: w,
+      margin: {
+        right: 20,
+        left: 38
+      },
+      markHandlers: {
+        onMarkClick: y,
+        onMouseEnter: k,
+        onMouseLeave: D
+      },
+      markStyles: b,
       showArea: !0,
       useCustomMark: !0,
       valueFormatterString: "0.0[0]a",
       width: t ? s - 48 : g
-    }
-  ) });
-}, we = _(_e), ve = ({
-  item: t,
-  getStyles: s,
-  isHovered: i = !1,
-  isSelected: n = !1,
-  onItemClick: a,
-  onMouseEnter: o,
-  onMouseLeave: c
-}) => {
-  const [l, g] = u.useState({
-    color: ""
+    })
   });
-  return u.useEffect(() => {
+}, be = C(Ce), we = ({ item: t, getStyles: s, isHovered: i = !1, isSelected: n = !1, onItemClick: r, onMouseEnter: a, onMouseLeave: c }) => {
+  const [l, g] = p.useState({ color: "" });
+  return p.useEffect(() => {
     g(s(t));
-  }, [i, n]), /* @__PURE__ */ r(u.Fragment, { children: [
-    /* @__PURE__ */ e(
-      O,
-      {
-        sx: {
-          ...l,
-          minHeight: 44,
-          "&:hover": { color: n ? "inherit" : l.color }
-        },
-        children: /* @__PURE__ */ e(
-          te,
-          {
-            onClick: (f) => a?.(f, t.x),
-            onMouseEnter: () => o(t.x),
-            onMouseLeave: () => c(),
-            sx: { minHeight: 20, padding: 12 },
-            children: /* @__PURE__ */ e(
-              b,
-              {
-                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" })
-                ] })
-              }
-            )
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ e(L, {})
-  ] }, t.x);
-}, We = _(ve), Se = ({
-  currencyLabel: t,
-  currencyVariant: s = "body2",
-  iconSize: i,
-  netWorth: n,
-  theme: a
-}) => {
-  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(
-      R,
-      {
+  }, [i, n]), /* @__PURE__ */ o(p.Fragment, { children: [/* @__PURE__ */ e(A, {
+    sx: {
+      ...l,
+      minHeight: 44,
+      "&:hover": { color: n ? "inherit" : l.color }
+    },
+    children: /* @__PURE__ */ e(ne, {
+      onClick: (f) => r?.(f, t.x),
+      onMouseEnter: () => a(t.x),
+      onMouseLeave: () => c(),
+      sx: {
+        minHeight: 20,
+        padding: 12
+      },
+      children: /* @__PURE__ */ e(v, { primary: /* @__PURE__ */ o(h, {
+        direction: "row",
+        justifyContent: "space-between",
+        sx: { fontWeight: 400 },
+        children: [/* @__PURE__ */ e(d, {
+          variant: "body1",
+          children: Y(t.x)
+        }), /* @__PURE__ */ e(x, {
+          amount: t.y,
+          sx: { color: "inherit" },
+          variant: "body1"
+        })]
+      }) })
+    })
+  }), /* @__PURE__ */ e(L, {})] }, t.x);
+}, Se = C(we), We = ({ currencyLabel: t, currencyVariant: s = "body2", iconSize: i, netWorth: n, theme: r }) => {
+  let a = r.palette.secondary.main, c = r.palette.secondary.main, l = "trending_flat";
+  return n.change < 0 ? l = "trending_down" : n.change > 0 && (a = r.palette.success.main, c = r.palette.success.main, l = "trending_up"), /* @__PURE__ */ o(ge, {
+    alignItems: "center",
+    direction: "row",
+    spacing: 4,
+    children: [
+      /* @__PURE__ */ e(R, {
         name: l,
         size: i,
-        sx: {
-          color: o
-        }
-      }
-    ),
-    /* @__PURE__ */ e(x, { amount: n.change, color: c, variant: s }),
-    /* @__PURE__ */ e(d, { variant: "body2", children: t })
-  ] });
-}, B = _(Se), Ie = ({
-  netWorth: t,
-  gains: s,
-  losses: i,
-  totalGains: n,
-  totalLosses: a
-}) => {
-  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__ */ r(z, { children: [
-      /* @__PURE__ */ e(A, { sx: { mb: 8, mt: 12, mx: 8 }, children: /* @__PURE__ */ e(
-        b,
-        {
-          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" })
-          ] })
-        }
-      ) }),
-      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__ */ 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: "body1"
-                }
-              )
-            ] }),
-            sx: { px: 16 }
-          }
-        ) }),
-        /* @__PURE__ */ e(L, {})
-      ] }, l.accountName)),
-      /* @__PURE__ */ e(A, { sx: { mb: 8, mt: 12, mx: 8 }, children: /* @__PURE__ */ e(
-        b,
-        {
-          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__ */ r(N, { children: [
-        /* @__PURE__ */ e(
-          O,
-          {
-            sx: { backgroundColor: c.palette.background.paper, py: 14 },
-            children: /* @__PURE__ */ e(
-              b,
-              {
-                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.loss,
-                      sx: { flexShrink: 0, fontWeight: 700 },
-                      variant: "body1"
-                    }
-                  )
-                ] }),
-                sx: { px: 16 }
-              }
-            )
-          },
-          l.accountName
-        ),
-        /* @__PURE__ */ e(L, {})
-      ] }))
-    ] })
-  ] });
-}, 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(d, { sx: { fontWeight: 700 }, variant: "body1", children: s })
-        }
-      ),
-      /* @__PURE__ */ e(K, { children: n ? /* @__PURE__ */ e(R, { name: "expand_less", size: 24 }) : /* @__PURE__ */ e(R, { name: "expand_more", size: 24 }) })
-    ] }) }),
-    /* @__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__ */ r(m, { direction: "row", justifyContent: "space-between", sx: { fontWeight: 400 }, children: [
-            /* @__PURE__ */ e(
-              d,
-              {
-                sx: {
-                  marginRight: 10
-                },
-                variant: "body1",
-                children: o.accountName
-              }
-            ),
-            /* @__PURE__ */ e(
-              x,
-              {
-                amount: o.balance,
-                sx: {
-                  flexShrink: 0
-                },
-                variant: "body2"
-              }
-            )
-          ] }),
-          sx: { pl: 72, pr: 16 }
-        }
-      ) }),
-      c < t.length - 1 ? /* @__PURE__ */ e(L, { variant: "inset" }) : /* @__PURE__ */ e(L, {})
-    ] }, o.accountName)) })
-  ] });
-}, 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: s,
-  liabilities: i,
-  totalAssets: n,
-  totalLiabilities: a
-}) => {
-  const { net_worth: o } = E(), c = H();
-  return /* @__PURE__ */ r(N, { children: [
-    /* @__PURE__ */ r(
-      P,
-      {
-        sx: {
-          alignItems: "center",
-          display: "flex",
-          flexDirection: "column",
+        sx: { color: a }
+      }),
+      /* @__PURE__ */ e(x, {
+        amount: n.change,
+        color: c,
+        variant: s
+      }),
+      /* @__PURE__ */ e(d, {
+        variant: "body2",
+        children: t
+      })
+    ]
+  });
+}, $ = C(We), Te = ({ netWorth: t, gains: s, losses: i, totalGains: n, totalLosses: r }) => {
+  const { net_worth: a } = E(), c = H();
+  return /* @__PURE__ */ o(N, { children: [/* @__PURE__ */ o(h, {
+    alignItems: "center",
+    justifyContent: "space-between",
+    mb: 8,
+    pt: 24,
+    children: [
+      /* @__PURE__ */ e(d, {
+        variant: "body2",
+        children: Y(t?.x)
+      }),
+      /* @__PURE__ */ e(d, {
+        variant: "body1",
+        children: a.total_change
+      }),
+      t && /* @__PURE__ */ e($, {
+        currencyVariant: "h1",
+        iconSize: 32,
+        netWorth: t,
+        theme: c
+      })
+    ]
+  }), /* @__PURE__ */ o(G, { children: [
+    /* @__PURE__ */ e(O, {
+      sx: {
+        mb: 8,
+        mt: 12,
+        mx: 8
+      },
+      children: /* @__PURE__ */ e(v, { primary: /* @__PURE__ */ o(h, {
+        direction: "row",
+        justifyContent: "space-between",
+        children: [/* @__PURE__ */ e(d, {
+          sx: { fontWeight: 700 },
+          variant: "caption",
+          children: a.gains
+        }), /* @__PURE__ */ e(x, {
+          amount: n,
+          sx: { fontWeight: 400 },
+          variant: "caption"
+        })]
+      }) })
+    }),
+    s?.map((l) => /* @__PURE__ */ o(p.Fragment, { children: [/* @__PURE__ */ e(A, {
+      sx: {
+        backgroundColor: c.palette.background.paper,
+        py: 14
+      },
+      children: /* @__PURE__ */ e(v, {
+        primary: /* @__PURE__ */ o(h, {
+          direction: "row",
           justifyContent: "space-between",
-          paddingTop: 24,
-          marginBottom: 8
-        },
+          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: "body1"
+          })]
+        }),
+        sx: { px: 16 }
+      })
+    }), /* @__PURE__ */ e(L, {})] }, l.accountName)),
+    /* @__PURE__ */ e(O, {
+      sx: {
+        mb: 8,
+        mt: 12,
+        mx: 8
+      },
+      children: /* @__PURE__ */ e(v, { primary: /* @__PURE__ */ o(h, {
+        direction: "row",
+        justifyContent: "space-between",
+        children: [/* @__PURE__ */ e(d, {
+          sx: { fontWeight: 700 },
+          variant: "caption",
+          children: a.losses
+        }), /* @__PURE__ */ e(x, {
+          amount: r,
+          sx: { fontWeight: 400 },
+          variant: "caption"
+        })]
+      }) })
+    }),
+    i?.map((l) => /* @__PURE__ */ o(N, { children: [/* @__PURE__ */ e(A, {
+      sx: {
+        backgroundColor: c.palette.background.paper,
+        py: 14
+      },
+      children: /* @__PURE__ */ e(v, {
+        primary: /* @__PURE__ */ o(h, {
+          direction: "row",
+          justifyContent: "space-between",
+          children: [/* @__PURE__ */ e(d, {
+            sx: { mr: 10 },
+            variant: "body1",
+            children: l.accountName
+          }), /* @__PURE__ */ e(x, {
+            amount: l.loss,
+            sx: {
+              flexShrink: 0,
+              fontWeight: 700
+            },
+            variant: "body1"
+          })]
+        }),
+        sx: { px: 16 }
+      })
+    }, l.accountName), /* @__PURE__ */ e(L, {})] }))
+  ] })] });
+}, Ie = C(Te), Le = ({ accounts: t, name: s, icon: i }) => {
+  const [n, r] = p.useState(!1);
+  return /* @__PURE__ */ o(N, { children: [
+    /* @__PURE__ */ e(A, {
+      sx: (a) => ({ backgroundColor: a.palette.background.paper }),
+      children: /* @__PURE__ */ o(ne, {
+        onClick: () => r(!n),
         children: [
-          /* @__PURE__ */ e(d, { variant: "body1", children: o.current_net_worth }),
-          /* @__PURE__ */ e(x, { amount: t?.y ?? 0, variant: "h1" }),
-          t && /* @__PURE__ */ e(
-            B,
-            {
-              currencyLabel: o.this_month,
-              iconSize: 20,
-              netWorth: t,
-              theme: c
-            }
-          )
+          i && /* @__PURE__ */ e(V, { children: /* @__PURE__ */ e(R, {
+            name: i,
+            size: 24,
+            sx: { mr: 12 }
+          }) }),
+          /* @__PURE__ */ e(v, { primary: /* @__PURE__ */ e(d, {
+            sx: { fontWeight: 700 },
+            variant: "body1",
+            children: s
+          }) }),
+          /* @__PURE__ */ e(V, { children: n ? /* @__PURE__ */ e(R, {
+            name: "expand_less",
+            size: 24
+          }) : /* @__PURE__ */ e(R, {
+            name: "expand_more",
+            size: 24
+          }) })
         ]
-      }
-    ),
-    /* @__PURE__ */ r(z, { children: [
-      /* @__PURE__ */ e(A, { sx: { mb: 8, mt: 12, mx: 8 }, children: /* @__PURE__ */ e(
-        b,
-        {
-          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(X, { groupedAccounts: U(s) }),
-      /* @__PURE__ */ e(A, { sx: { mb: 8, mt: 12, mx: 8 }, children: /* @__PURE__ */ e(
-        b,
-        {
-          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(X, { groupedAccounts: U(i) })
-    ] })
+      })
+    }),
+    /* @__PURE__ */ e(L, {}),
+    /* @__PURE__ */ e(ye, {
+      in: n,
+      timeout: "auto",
+      unmountOnExit: !0,
+      children: t.map((a, c) => /* @__PURE__ */ o(G, { children: [/* @__PURE__ */ e(A, {
+        sx: () => ({ py: 14 }),
+        children: /* @__PURE__ */ e(v, {
+          primary: /* @__PURE__ */ o(h, {
+            direction: "row",
+            justifyContent: "space-between",
+            sx: { fontWeight: 400 },
+            children: [/* @__PURE__ */ e(d, {
+              sx: { marginRight: 10 },
+              variant: "body1",
+              children: a.accountName
+            }), /* @__PURE__ */ e(x, {
+              amount: a.balance,
+              sx: { flexShrink: 0 },
+              variant: "body2"
+            })]
+          }),
+          sx: {
+            pl: 72,
+            pr: 16
+          }
+        })
+      }), c < t.length - 1 ? /* @__PURE__ */ e(L, { variant: "inset" }) : /* @__PURE__ */ e(L, {})] }, a.accountName))
+    })
   ] });
-}, Ne = _(De), Ee = () => {
-  const { net_worth: t } = E(), s = H(), { onEvent: i } = $(), {
-    assetsLiabilities: n,
-    gainsLosses: a,
-    hoveredData: o,
-    netWorthChartData: c,
-    selectedData: l,
-    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 = {
+}, 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: s, liabilities: i, totalAssets: n, totalLiabilities: r }) => {
+  const { net_worth: a } = E(), c = H();
+  return /* @__PURE__ */ o(N, { children: [/* @__PURE__ */ o(te, {
+    sx: {
+      alignItems: "center",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      paddingTop: 24,
+      marginBottom: 8
+    },
+    children: [
+      /* @__PURE__ */ e(d, {
+        variant: "body1",
+        children: a.current_net_worth
+      }),
+      /* @__PURE__ */ e(x, {
+        amount: t?.y ?? 0,
+        variant: "h1"
+      }),
+      t && /* @__PURE__ */ e($, {
+        currencyLabel: a.this_month,
+        iconSize: 20,
+        netWorth: t,
+        theme: c
+      })
+    ]
+  }), /* @__PURE__ */ o(G, { children: [
+    /* @__PURE__ */ e(O, {
+      sx: {
+        mb: 8,
+        mt: 12,
+        mx: 8
+      },
+      children: /* @__PURE__ */ e(v, { primary: /* @__PURE__ */ o(h, {
+        direction: "row",
+        justifyContent: "space-between",
+        children: [/* @__PURE__ */ e(d, {
+          sx: { fontWeight: 700 },
+          variant: "caption",
+          children: a.assets
+        }), /* @__PURE__ */ e(x, {
+          amount: n,
+          sx: { fontWeight: 400 },
+          variant: "caption"
+        })]
+      }) })
+    }),
+    /* @__PURE__ */ e(X, { groupedAccounts: K(s) }),
+    /* @__PURE__ */ e(O, {
+      sx: {
+        mb: 8,
+        mt: 12,
+        mx: 8
+      },
+      children: /* @__PURE__ */ e(v, { primary: /* @__PURE__ */ o(h, {
+        direction: "row",
+        justifyContent: "space-between",
+        children: [/* @__PURE__ */ e(d, {
+          sx: { fontWeight: 700 },
+          variant: "caption",
+          children: a.liabilities
+        }), /* @__PURE__ */ e(x, {
+          amount: r,
+          sx: { fontWeight: 400 },
+          variant: "caption"
+        })]
+      }) })
+    }),
+    /* @__PURE__ */ e(X, { groupedAccounts: K(i) })
+  ] })] });
+}, Ne = C(De), Ee = () => {
+  const { net_worth: t } = E(), s = H(), { onEvent: i } = B(), { assetsLiabilities: n, gainsLosses: r, hoveredData: a, netWorthChartData: c, selectedData: l, setHoveredIndex: g, setSelectedIndex: f } = j(), [S, W] = p.useState(!1), [b, y] = p.useState(!1), k = (u) => {
+    const _ = u.x === a?.x, T = u.x === l?.x, I = {
       backgroundColor: "inherit",
       borderBottom: "inherit",
       color: "inherit"
     };
-    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 = () => {
-    y(!0), i(v.NET_WORTH_WIDGET_CLICK_ASSETS_LIABILITIES);
-  }, M = (p) => {
-    g(p);
-  }, G = () => {
+    return _ && (I.color = T ? "inherit" : I.color, I.backgroundColor = s.palette.action.hover), T && (I.backgroundColor = s.palette.primary.main, I.borderBottom = s.palette.neutral.light, I.color = s.palette.common.white), I;
+  }, D = (u, _) => {
+    f(_), u.currentTarget instanceof HTMLDivElement && W(!0);
+  }, m = () => {
+    y(!0), i(w.NET_WORTH_WIDGET_CLICK_ASSETS_LIABILITIES);
+  }, M = (u) => {
+    g(u);
+  }, z = () => {
     g(-1);
   };
-  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(
-        We,
-        {
+  return /* @__PURE__ */ o(h, {
+    direction: "column",
+    sx: { width: 320 },
+    children: [
+      /* @__PURE__ */ o(G, { children: [
+        /* @__PURE__ */ e(O, {
+          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((u, _) => /* @__PURE__ */ e(Se, {
           getStyles: k,
-          isHovered: p.x === o?.x,
-          isSelected: p.x === l?.x,
-          item: p,
-          onItemClick: (I) => D(I, C),
-          onMouseEnter: () => M(C),
-          onMouseLeave: () => G()
+          isHovered: u.x === a?.x,
+          isSelected: u.x === l?.x,
+          item: u,
+          onItemClick: (T) => D(T, _),
+          onMouseEnter: () => M(_),
+          onMouseLeave: () => z()
+        }, u.x))
+      ] }),
+      /* @__PURE__ */ e(me, {
+        onClick: () => m(),
+        sx: {
+          alignSelf: "center",
+          marginTop: 16,
+          width: "fit-content"
         },
-        p.x
-      ))
-    ] }),
-    /* @__PURE__ */ e(
-      ue,
-      {
-        onClick: () => h(),
-        sx: { alignSelf: "center", marginTop: 16, width: "fit-content" },
         variant: "outlined",
         children: t.view_assets_and_liabilities
-      }
-    ),
-    /* @__PURE__ */ e(
-      V,
-      {
+      }),
+      /* @__PURE__ */ e(U, {
         ariaLabelClose: "Close",
-        isOpen: W,
-        onClose: () => S(!1),
+        isOpen: S,
+        onClose: () => W(!1),
         shouldShowHeaderBorders: !1,
         shouldShowHeaderShadow: !0,
         title: t.gains_and_losses,
-        children: a && /* @__PURE__ */ e(Te, { ...a })
-      }
-    ),
-    /* @__PURE__ */ e(
-      V,
-      {
+        children: r && /* @__PURE__ */ e(Ie, { ...r })
+      }),
+      /* @__PURE__ */ e(U, {
         ariaLabelClose: "Close",
-        isOpen: w,
+        isOpen: b,
         onClose: () => y(!1),
         shouldShowHeaderBorders: !1,
         shouldShowHeaderShadow: !0,
         title: t.assets_and_liabilities,
         children: n && /* @__PURE__ */ e(Ne, { ...n })
-      }
-    )
-  ] });
-}, 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 })
-  ] });
-}, 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: W,
-    timeframe: S
-  } = j(), { isMobile: w } = ee(), { onEvent: y } = $(), [k, D] = u.useState(!1);
+      })
+    ]
+  });
+}, ke = C(Ee), Me = ({ hoveredData: t, selectedData: s }) => {
+  const { net_worth: i } = E(), n = H(), r = t || s, a = fe(xe(r.x), "MMMM");
+  return /* @__PURE__ */ o(h, {
+    alignItems: "center",
+    direction: "column",
+    m: 24,
+    children: [
+      /* @__PURE__ */ e(d, {
+        color: n.palette.secondary.main,
+        variant: "body2",
+        children: `${a} ${i.net_worth}`
+      }),
+      /* @__PURE__ */ e(x, {
+        amount: r.y,
+        variant: "h2"
+      }),
+      /* @__PURE__ */ e($, {
+        currencyLabel: i.this_month,
+        netWorth: r,
+        theme: n
+      })
+    ]
+  });
+}, Ae = C(Me), at = C(({ onBackClick: t, onMenuClick: s }) => {
+  const { isInitialized: i } = Z(), { accounts: n, net_worth: r } = E(), { hoveredData: a, isNetWorthDataLoaded: c, loadNetWorthData: l, netWorthChartData: g, selectedData: f, setTimeframe: S, timeframe: W } = j(), { isMobile: b } = q(), { onEvent: y } = B(), [k, D] = p.useState(!1);
   J({
     widgetName: "NetWorthWidget",
     isLoaded: c
-  }), u.useEffect(() => {
-    c || l().finally(), y(v.NET_WORTH_VIEW);
-  }, []), u.useEffect(() => {
-    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));
+  }), p.useEffect(() => {
+    c || l().finally(), y(w.NET_WORTH_VIEW);
+  }, []), p.useEffect(() => {
+    y(w.NET_WORTH_WIDGET_CLICK_TIMEFRAME, { time_period: W + "M" });
+  }, [W]);
+  const m = async (u) => {
+    const _ = u[0], T = u[1];
+    _ && T && S(pe(T, _));
   }, M = () => {
-    D(!0), y(v.ACCOUNTS_CLICK_CONNECT);
+    D(!0), y(w.ACCOUNTS_CLICK_CONNECT);
   };
   if (!i || !c) return /* @__PURE__ */ e(Q, {});
-  const G = g.length === 0;
-  return /* @__PURE__ */ r(
-    ge,
-    {
-      calendarActions: { onRangeChanged: h },
-      dateRangeVariant: w ? "timeframetabs" : "timeframebuttons",
-      onAccountsFilterClick: () => y(v.NET_WORTH_WIDGET_CLICK_FILTER),
-      onBackClick: t,
-      onMenuClick: s,
-      title: a.net_worth,
-      children: [
-        G ? /* @__PURE__ */ e(P, { sx: { justifyItems: "center" }, children: /* @__PURE__ */ e(
-          ye,
-          {
-            header: a.empty_widget_header,
-            icon: "elevation",
-            onClick: M,
-            primaryButton: a.empty_widget_button,
-            subText: a.empty_widget_description,
-            sx: {
-              width: { sm: 432 },
-              ".buttons-footer": {
-                width: 167
-              }
-            }
-          }
-        ) }) : /* @__PURE__ */ r(N, { children: [
-          f && /* @__PURE__ */ e(Ae, { hoveredData: o, selectedData: f }),
-          /* @__PURE__ */ r(
-            m,
-            {
-              alignItems: w ? "center" : "flex-start",
-              direction: w ? "column" : "row",
-              spacing: w ? 0 : 48,
-              children: [
-                /* @__PURE__ */ e(we, {}),
-                /* @__PURE__ */ e(ke, {})
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ e(
-          le,
-          {
-            onClose: () => D(!1),
-            showConnectionsWidget: k,
-            title: n.manage_connections
-          }
-        )
-      ]
-    }
-  );
+  const z = g.length === 0;
+  return /* @__PURE__ */ o(ae, {
+    calendarActions: { onRangeChanged: m },
+    dateRangeVariant: b ? "timeframetabs" : "timeframebuttons",
+    onAccountsFilterClick: () => y(w.NET_WORTH_WIDGET_CLICK_FILTER),
+    onBackClick: t,
+    onMenuClick: s,
+    title: r.net_worth,
+    children: [z ? /* @__PURE__ */ e(te, {
+      sx: { justifyItems: "center" },
+      children: /* @__PURE__ */ e(ie, {
+        header: r.empty_widget_header,
+        icon: "elevation",
+        onClick: M,
+        primaryButton: r.empty_widget_button,
+        subText: r.empty_widget_description,
+        sx: {
+          width: { sm: 432 },
+          ".buttons-footer": { width: 167 }
+        }
+      })
+    }) : /* @__PURE__ */ o(N, { children: [f && /* @__PURE__ */ e(Ae, {
+      hoveredData: a,
+      selectedData: f
+    }), /* @__PURE__ */ o(h, {
+      alignItems: b ? "center" : "flex-start",
+      direction: b ? "column" : "row",
+      spacing: b ? 0 : 48,
+      children: [/* @__PURE__ */ e(be, {}), /* @__PURE__ */ e(ke, {})]
+    })] }), /* @__PURE__ */ e(se, {
+      onClose: () => D(!1),
+      showConnectionsWidget: k,
+      title: n.manage_connections
+    })]
+  });
 });
 export {
-  gt as NetWorthMicroWidget,
-  yt as NetWorthWidget
+  it as NetWorthMicroWidget,
+  at as NetWorthWidget
 };