@mx-cartographer/experiences 8.0.0-alpha.bb4 → 8.0.0-alpha.sms2

package/dist/investments/index.es.js

@@ -1,45 +1,46 @@
 import { jsxs as o, jsx as e, Fragment as ae } from "react/jsx-runtime";
 import A, { useState as O } from "react";
-import { observer as $ } from "mobx-react-lite";
+import { observer as P } from "mobx-react-lite";
 import _ from "@mui/material/Stack";
 import Ee from "@mui/material/Tab";
 import Ge from "@mui/material/Tabs";
-import { C as ge } from "../ConnectionsDrawer-Dsc04-4Z.mjs";
+import { C as ge } from "../ConnectionsDrawer-CSo6AFkG.mjs";
 import pe from "@mui/material/useMediaQuery";
 import Me from "@mui/material/Box";
 import Ne from "@mui/material/Collapse";
-import Y from "@mui/material/Divider";
-import te from "@mui/material/List";
-import ne from "@mui/material/ListItem";
-import Ue from "@mui/material/ListItemButton";
+import K from "@mui/material/Divider";
+import ee from "@mui/material/List";
+import te from "@mui/material/ListItem";
+import He from "@mui/material/ListItemButton";
 import xe from "@mui/material/ToggleButton";
 import ye from "@mui/material/ToggleButtonGroup";
-import { Text as i, H1 as fe, P as ve, InstitutionLogo as oe } from "@mxenabled/mxui";
-import He from "@mui/material/Button";
-import { u as M, g as be, t as U, b as J, d as le, n as je } from "../hooks-C41HAxM5.mjs";
-import { A as z, W as ze } from "../WidgetContainer-CDh9fjpR.mjs";
-import { a as Oe, f as ie } from "../NumberFormatting-DjTD0t3W.mjs";
-import { u as H } from "../useScreenSize-B5afALev.mjs";
-import { useTheme as X } from "@mui/material/styles";
-import { Icon as B } from "@mxenabled/mx-icons";
+import { Text as i, H1 as fe, P as ve, InstitutionLogo as ne } from "@mxenabled/mxui";
+import Ue from "@mui/material/Button";
+import { u as M, g as be, t as H, b as Q, d as se, n as je } from "../hooks-C41HAxM5.mjs";
+import { A as z, W as ze } from "../WidgetContainer-B1Jzb4XA.mjs";
+import { a as Oe, f as oe } from "../NumberFormatting-DjTD0t3W.mjs";
+import { u as U } from "../useScreenSize-B6JyS_Lj.mjs";
+import le from "@mui/material/styles/useTheme";
+import { Icon as k } from "@mxenabled/mx-icons";
 import { D as Ve } from "../Donut-Dmy3JTWd.mjs";
-import { f as Re, A as V } from "../InvestmentUtil-jOyOgzIB.mjs";
-import $e from "@mui/material/ListItemText";
+import { useTheme as Re } from "@mui/material/styles";
+import { f as Pe, A as V } from "../InvestmentUtil-jOyOgzIB.mjs";
+import Xe from "@mui/material/ListItemText";
 import ce from "@mui/material/IconButton";
-import Pe from "@mui/material/Tooltip";
+import $e from "@mui/material/Tooltip";
 import _e from "@mui/material/Accordion";
 import we from "@mui/material/AccordionDetails";
 import Ce from "@mui/material/AccordionSummary";
-import re from "@mui/material/Paper";
+import ie from "@mui/material/Paper";
 import x from "@mui/system/Stack";
-import De from "@mui/material/TextField";
-import { D as qe } from "../Drawer-BF40nbsH.mjs";
+import Se from "@mui/material/TextField";
+import { D as qe } from "../Drawer-Dqe5EqvA.mjs";
 import { DataGridPro as Ke } from "@mui/x-data-grid-pro";
 import { Stack as Ye } from "@mui/material";
-import { L as Se } from "../Loader-Ckqi9Rx6.mjs";
+import { L as De } from "../Loader-BSWSYqvn.mjs";
 import { E as Qe } from "../EmptyState-DoxNUae-.mjs";
 const de = ({ sx: t = {} }) => {
-  const { investments: g } = M(), { onEvent: c } = be(), { setShowConnectionsWidget: u } = U();
+  const { investments: g } = M(), { onEvent: c } = be(), { setShowConnectionsWidget: u } = H();
   return /* @__PURE__ */ o(_, { sx: { alignItems: "center", gap: 24, height: 164, p: 24, width: "100%", ...t }, children: [
     /* @__PURE__ */ o(
       _,
@@ -52,7 +53,7 @@ const de = ({ sx: t = {} }) => {
           textAlign: "center"
         },
         children: [
-          /* @__PURE__ */ e(i, { sx: { fontWeight: 600, whiteSpace: "normal" }, variant: "body1", children: g.overview.investment_accounts_footer }),
+          /* @__PURE__ */ e(i, { sx: { fontWeight: 600, whiteSpace: "normal" }, variant: "Body", children: g.overview.investment_accounts_footer }),
           /* @__PURE__ */ e(
             i,
             {
@@ -61,7 +62,7 @@ const de = ({ sx: t = {} }) => {
                 whiteSpace: "normal",
                 fontWeight: 400
               },
-              variant: "subtitle2",
+              variant: "ParagraphSmall",
               children: g.overview.connect_more_accounts_description
             }
           )
@@ -69,7 +70,7 @@ const de = ({ sx: t = {} }) => {
       }
     ),
     /* @__PURE__ */ e(
-      He,
+      Ue,
       {
         onClick: () => {
           u(!0), c(z.ACCOUNTS_CLICK_CONNECT);
@@ -90,7 +91,7 @@ const de = ({ sx: t = {} }) => {
   allocations_unknown: "#161D6A",
   allocations_us_bond: "#254995",
   allocations_us_stock: "#1E2D84"
-}, Xe = [
+}, Ze = [
   {
     name: "allocations_cash"
   },
@@ -118,85 +119,85 @@ const de = ({ sx: t = {} }) => {
   {
     name: "allocations_unknown"
   }
-], Ze = (t, g, c) => {
+], et = (t, g, c) => {
   const u = g, v = c;
   return t >= Math.min(u, v) && t < Math.max(u, v);
-}, et = (t, g, c) => {
+}, tt = (t, g, c) => {
   const u = [
     ...new Set(t.map((m) => m.name.toLowerCase()))
   ];
   let v;
   return u.map((m) => {
-    const a = t.reduce((y, d) => {
+    const s = t.reduce((y, d) => {
       const b = d.name;
-      return b.toLowerCase() === m ? (v = b, Q(d) * d[g] / 100 + y) : y;
+      return b.toLowerCase() === m ? (v = b, Y(d) * d[g] / 100 + y) : y;
     }, 0);
     return {
       displayName: v,
       name: v,
-      value: a,
-      percentage: a / c
+      value: s,
+      percentage: s / c
     };
   });
-}, Q = (t) => t.calculated_market_value ? t.calculated_market_value : t.market_value, tt = (t, g, c) => {
+}, Y = (t) => t.calculated_market_value ? t.calculated_market_value : t.market_value, nt = (t, g, c) => {
   const u = Object.values(g.allocations_list), v = [];
   let f = 0;
-  const m = t.map(({ guid: n }) => n), a = c.filter(({ account_guid: n }) => m.includes(n)).map((n) => ({
+  const m = t.map(({ guid: n }) => n), s = c.filter(({ account_guid: n }) => m.includes(n)).map((n) => ({
     ...n,
     name: n.symbol || n.description,
-    gainLoss: n.cost_basis || n.cost_basis === 0 ? Q(n) - n.cost_basis : 0
+    gainLoss: n.cost_basis || n.cost_basis === 0 ? Y(n) - n.cost_basis : 0
   })), { cashBalance: y, totalAccountBalance: d } = t.reduce(
     (n, p) => ({
       cashBalance: n.cashBalance + (p.cash_balance || 0),
       totalAccountBalance: n.totalAccountBalance + (p.balance || 0)
     }),
     { cashBalance: 0, totalAccountBalance: 0 }
-  ), { marketValue: b, totalGainLoss: l } = a.reduce(
+  ), { marketValue: b, totalGainLoss: l } = s.reduce(
     (n, p) => ({
-      marketValue: n.marketValue + Q(p),
+      marketValue: n.marketValue + Y(p),
       totalGainLoss: n.totalGainLoss + p.gainLoss
     }),
     { marketValue: 0, totalGainLoss: 0 }
   ), h = b + y;
-  Xe.forEach((n, p) => {
-    const C = a.filter(
+  Ze.forEach((n, p) => {
+    const C = s.filter(
       (I) => !!I[n.name]
     );
-    let D = C.reduce(
-      (I, W) => I + Q(W) * W[n.name] / 100,
+    let S = C.reduce(
+      (I, W) => I + Y(W) * W[n.name] / 100,
       0
     );
-    const k = et(
+    const B = tt(
       C,
       n.name,
-      D
+      S
     );
     if (n.name === "allocations_cash" && y > 0) {
-      D += y;
+      S += y;
       const I = {
         displayName: g.cash_balance_display_name,
         name: "allocations_name",
         value: y,
         percentage: y / h
       };
-      k.push(I);
+      B.push(I);
     }
-    D > 0 && (v.push({
+    S > 0 && (v.push({
       name: n.name,
       displayName: u[p],
       guid: `${n.name}-${p}`,
-      holdings: k,
-      percentage: D / h,
-      value: D,
+      holdings: B,
+      percentage: S / h,
+      value: S,
       color: Je[n.name]
-    }), f += D);
+    }), f += S);
   });
   const r = v.map(
-    ({ displayName: n, guid: p, color: C, value: D }) => ({
+    ({ displayName: n, guid: p, color: C, value: S }) => ({
       id: p,
       color: C,
       label: n,
-      value: D / f * 100
+      value: S / f * 100
     })
   );
   return {
@@ -207,7 +208,7 @@ const de = ({ sx: t = {} }) => {
     totalMarketValue: h,
     totalGainLossPercentage: l / d
   };
-}, se = (t) => t < 1e-3 ? "< 0.1%" : Oe(t), R = (t) => t === 0 ? ie(t, "0,0.00") : Ze(t, -0.01, 0.01) ? "< $0.01" : ie(t, "0,0.00"), nt = ({
+}, re = (t) => t < 1e-3 ? "< 0.1%" : Oe(t), R = (t) => t === 0 ? oe(t, "0,0.00") : et(t, -0.01, 0.01) ? "< $0.01" : oe(t, "0,0.00"), ot = ({
   data: t,
   onSelected: g,
   selectedId: c,
@@ -216,12 +217,12 @@ const de = ({ sx: t = {} }) => {
 }) => {
   const f = (l, h) => {
     h !== null && v(h);
-  }, { isMobile: m } = H(), {
-    investments: { allocation: a }
+  }, { isMobile: m } = U(), {
+    investments: { allocation: s }
   } = M(), y = [
-    { label: a.tabs_label_dollar, value: 0 },
-    { label: a.tabs_label_percent, value: 1 }
-  ], d = !t?.investmentsData.length, { isSmallMobile: b } = H();
+    { label: s.tabs_label_dollar, value: 0 },
+    { label: s.tabs_label_percent, value: 1 }
+  ], d = !t?.investmentsData.length, { isSmallMobile: b } = U();
   return /* @__PURE__ */ o(_, { sx: { mt: 15, gap: 12, width: m ? 250 : 412 }, children: [
     /* @__PURE__ */ e(
       ye,
@@ -230,12 +231,12 @@ const de = ({ sx: t = {} }) => {
         fullWidth: !0,
         onChange: f,
         value: d ? -1 : u,
-        children: y.map(({ label: l, value: h }) => /* @__PURE__ */ e(xe, { color: "primary", value: h, children: /* @__PURE__ */ e(i, { bold: !0, textTransform: "capitalize", variant: "body1", children: l }) }, l))
+        children: y.map(({ label: l, value: h }) => /* @__PURE__ */ e(xe, { color: "primary", value: h, children: /* @__PURE__ */ e(i, { bold: !0, textTransform: "capitalize", variant: "Body", children: l }) }, l))
       }
     ),
-    /* @__PURE__ */ e(te, { sx: { px: 12 }, children: t.investmentsData.map((l) => /* @__PURE__ */ o(A.Fragment, { children: [
+    /* @__PURE__ */ e(ee, { sx: { px: 12 }, children: t.investmentsData.map((l) => /* @__PURE__ */ o(A.Fragment, { children: [
       /* @__PURE__ */ e(
-        ne,
+        te,
         {
           disableGutters: !0,
           disablePadding: !0,
@@ -243,7 +244,7 @@ const de = ({ sx: t = {} }) => {
             minHeight: 44
           },
           children: /* @__PURE__ */ o(
-            Ue,
+            He,
             {
               "aria-expanded": c === l.guid,
               onClick: () => g(l.guid),
@@ -268,7 +269,7 @@ const de = ({ sx: t = {} }) => {
                     width: "100%",
                     children: [
                       /* @__PURE__ */ e(i, { bold: c === l.guid, children: l.displayName }),
-                      /* @__PURE__ */ e(i, { bold: c === l.guid, variant: "body1", children: u === 0 ? R(l.value) : se(l.percentage) })
+                      /* @__PURE__ */ e(i, { bold: c === l.guid, variant: "Body", children: u === 0 ? R(l.value) : re(l.percentage) })
                     ]
                   }
                 )
@@ -277,10 +278,10 @@ const de = ({ sx: t = {} }) => {
           )
         }
       ),
-      /* @__PURE__ */ e(Y, {}),
-      l.holdings && l.holdings.length > 0 && /* @__PURE__ */ e(Ne, { in: c === l.guid, unmountOnExit: !0, children: /* @__PURE__ */ o(te, { children: [
+      /* @__PURE__ */ e(K, {}),
+      l.holdings && l.holdings.length > 0 && /* @__PURE__ */ e(Ne, { in: c === l.guid, unmountOnExit: !0, children: /* @__PURE__ */ o(ee, { children: [
         l?.holdings?.map((h) => /* @__PURE__ */ e(
-          ne,
+          te,
           {
             sx: {
               pl: 24,
@@ -292,17 +293,17 @@ const de = ({ sx: t = {} }) => {
                 h.displayName,
                 " "
               ] }),
-              /* @__PURE__ */ e(i, { children: u === 0 ? R(h.value) : se(h.percentage) })
+              /* @__PURE__ */ e(i, { children: u === 0 ? R(h.value) : re(h.percentage) })
             ] })
           },
           h.displayName
         )),
-        /* @__PURE__ */ e(Y, {})
+        /* @__PURE__ */ e(K, {})
       ] }) })
     ] }, l.guid)) }),
     d ? /* @__PURE__ */ o(ae, { children: [
-      /* @__PURE__ */ e(i, { sx: { color: "secondary.main", p: 8, textAlign: "center" }, children: a.empty_data }),
-      /* @__PURE__ */ e(Y, { sx: { borderColor: "neutral.light" } }),
+      /* @__PURE__ */ e(i, { sx: { color: "secondary.main", p: 8, textAlign: "center" }, children: s.empty_data }),
+      /* @__PURE__ */ e(K, { sx: { borderColor: "border.light" } }),
       /* @__PURE__ */ e(
         de,
         {
@@ -311,9 +312,9 @@ const de = ({ sx: t = {} }) => {
           }
         }
       )
-    ] }) : u === 0 && /* @__PURE__ */ e(i, { bold: !0, sx: { textAlign: "right", pr: 24 }, children: `${a.total_label_text} ${R(t.totalAmount)}` })
+    ] }) : u === 0 && /* @__PURE__ */ e(i, { bold: !0, sx: { textAlign: "right", pr: 24 }, children: `${s.total_label_text} ${R(t.totalAmount)}` })
   ] });
-}, ot = ({
+}, it = ({
   data: t,
   hoveredId: g,
   isPercentage: c,
@@ -321,15 +322,15 @@ const de = ({ sx: t = {} }) => {
   onMouseLeave: v,
   onSelected: f,
   selectedId: m,
-  size: a = 150,
+  size: s = 150,
   totalLabel: y
 }) => {
-  const d = X(), b = d.palette.mode === "dark", l = A.useMemo(
-    () => m ? t.investmentsData.find(({ guid: k }) => k === m) : void 0,
+  const d = le(), b = d.palette.mode === "dark", l = A.useMemo(
+    () => m ? t.investmentsData.find(({ guid: B }) => B === m) : void 0,
     [m]
   ), {
     investments: { allocation: h }
-  } = M(), r = A.useMemo(() => t.donutData.length > 0 ? t.donutData : [{ id: "0", color: d.palette.neutral.light, value: 100 }], [t, d]), n = b ? "#0AC295" : "#09A57F", p = b ? "grey.300" : "grey.700", C = () => l ? h.pie_chart_centered_click_for_details : c ? se(t.totalGainLossPercentage) : R(t.totalGainLoss), D = t.totalGainLoss >= 0 ? n : p;
+  } = M(), r = A.useMemo(() => t.donutData.length > 0 ? t.donutData : [{ id: "0", color: d.palette.border.light, value: 100 }], [t, d]), n = b ? "#0AC295" : "#09A57F", p = b ? "grey.300" : "grey.700", C = () => l ? h.pie_chart_centered_click_for_details : c ? re(t.totalGainLossPercentage) : R(t.totalGainLoss), S = t.totalGainLoss >= 0 ? n : p;
   return /* @__PURE__ */ e(
     Ve,
     {
@@ -339,27 +340,27 @@ const de = ({ sx: t = {} }) => {
       onMouseEnter: u,
       onMouseLeave: v,
       selectedId: m,
-      size: a,
-      children: /* @__PURE__ */ e(_, { alignItems: "center", height: "100%", justifyContent: "center", width: "100%", children: /* @__PURE__ */ e(_, { alignItems: "center", justifyContent: "center", minHeight: a, minWidth: a, children: /* @__PURE__ */ o(_, { alignItems: "center", sx: { gap: { xs: 4, xl: 8 }, mb: { xs: 4, xl: 8 } }, children: [
+      size: s,
+      children: /* @__PURE__ */ e(_, { alignItems: "center", height: "100%", justifyContent: "center", width: "100%", children: /* @__PURE__ */ e(_, { alignItems: "center", justifyContent: "center", minHeight: s, minWidth: s, children: /* @__PURE__ */ o(_, { alignItems: "center", sx: { gap: { xs: 4, xl: 8 }, mb: { xs: 4, xl: 8 } }, children: [
         /* @__PURE__ */ e(i, { color: "text.secondary", noWrap: !0, children: l?.displayName ?? y }),
         /* @__PURE__ */ e(fe, { color: "text.primary", children: R(l?.value ?? t.totalMarketValue) }),
         /* @__PURE__ */ o(_, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
           !l && /* @__PURE__ */ e(
-            B,
+            k,
             {
               name: t.totalGainLoss >= 0 ? "trending_up" : "trending_down",
               size: 20,
-              sx: { color: D }
+              sx: { color: S }
             }
           ),
           /* @__PURE__ */ e(
             i,
             {
               sx: {
-                color: D,
+                color: S,
                 fontWeight: 700
               },
-              variant: "body2",
+              variant: "Small",
               children: C()
             }
           )
@@ -367,16 +368,16 @@ const de = ({ sx: t = {} }) => {
       ] }) }) })
     }
   );
-}, it = () => {
+}, rt = () => {
   const [t, g] = A.useState(0), [c, u] = A.useState(""), [v, f] = A.useState(""), m = (n) => {
     c !== n ? u(n) : (u(""), f(""));
-  }, { selectedAccountGuids: a } = J(), { visibleHoldings: y } = U(), { visibleInvestmentAccounts: d } = le(), {
+  }, { selectedAccountGuids: s } = Q(), { visibleHoldings: y } = H(), { visibleInvestmentAccounts: d } = se(), {
     investments: { allocation: b }
-  } = M(), l = tt(
-    d.filter(({ guid: n }) => a.includes(n)),
+  } = M(), l = nt(
+    d.filter(({ guid: n }) => s.includes(n)),
     b,
     y
-  ), { isMobile: h } = H(), r = pe("(max-width:768px)");
+  ), { isMobile: h } = U(), r = pe("(max-width:768px)");
   return /* @__PURE__ */ o(
     _,
     {
@@ -390,7 +391,7 @@ const de = ({ sx: t = {} }) => {
       },
       children: [
         /* @__PURE__ */ e(
-          ot,
+          it,
           {
             data: l,
             hoveredId: v,
@@ -408,7 +409,7 @@ const de = ({ sx: t = {} }) => {
           }
         ),
         /* @__PURE__ */ e(
-          nt,
+          ot,
           {
             data: l,
             onSelected: m,
@@ -420,16 +421,16 @@ const de = ({ sx: t = {} }) => {
       ]
     }
   );
-}, rt = $(it), st = ({
+}, at = P(rt), st = ({
   analysisDetails: t,
   analysisType: g,
   copy: c,
   setAnalysisType: u
 }) => {
-  const { isSmallMobile: v } = H(), f = A.useMemo(() => Object.keys(t).filter((a) => t[a] >= 1).map((a) => ({
-    key: a,
-    value: ie(t[a], "0,0"),
-    formattedKey: Re(a)
+  const { isSmallMobile: v } = U(), f = A.useMemo(() => Object.keys(t).filter((s) => t[s] >= 1).map((s) => ({
+    key: s,
+    value: oe(t[s], "0,0"),
+    formattedKey: Pe(s)
   })), [t]), m = [
     { label: c.equities, value: V.Stocks },
     { label: c.bonds, value: V.Bonds }
@@ -440,7 +441,7 @@ const de = ({ sx: t = {} }) => {
       {
         color: "primary",
         exclusive: !0,
-        onChange: (a, y) => y && u(y),
+        onChange: (s, y) => y && u(y),
         sx: {
           width: "100%",
           "& .MuiToggleButton-root": {
@@ -450,19 +451,19 @@ const de = ({ sx: t = {} }) => {
           }
         },
         value: f.length ? g : -1,
-        children: m.map(({ label: a, value: y }) => /* @__PURE__ */ e(xe, { sx: { width: "100%" }, value: y, children: a }, y))
+        children: m.map(({ label: s, value: y }) => /* @__PURE__ */ e(xe, { sx: { width: "100%" }, value: y, children: s }, y))
       }
     ),
     f.length ? /* @__PURE__ */ e(
-      te,
+      ee,
       {
         sx: {
           "& .MuiListItemSecondaryAction-root": { pr: 12 },
-          "& .MuiListItem-divider": { borderColor: "neutral.light" },
+          "& .MuiListItem-divider": { borderColor: "border.light" },
           "& .MuiListItem-root": { minHeight: 44, px: 12 }
         },
-        children: f.map(({ value: a, formattedKey: y }) => /* @__PURE__ */ e(ne, { divider: !0, secondaryAction: /* @__PURE__ */ e(i, { children: a }), children: /* @__PURE__ */ e(
-          $e,
+        children: f.map(({ value: s, formattedKey: y }) => /* @__PURE__ */ e(te, { divider: !0, secondaryAction: /* @__PURE__ */ e(i, { children: s }), children: /* @__PURE__ */ e(
+          Xe,
           {
             primary: y,
             primaryTypographyProps: { fontStyle: "normal" }
@@ -471,7 +472,7 @@ const de = ({ sx: t = {} }) => {
       }
     ) : /* @__PURE__ */ o(ae, { children: [
       /* @__PURE__ */ e(i, { sx: { color: "secondary.main", p: 8, textAlign: "center" }, children: c.empty_data }),
-      /* @__PURE__ */ e(Y, { sx: { borderColor: "neutral.light" } }),
+      /* @__PURE__ */ e(K, { sx: { borderColor: "border.light" } }),
       /* @__PURE__ */ e(
         de,
         {
@@ -482,27 +483,27 @@ const de = ({ sx: t = {} }) => {
       )
     ] })
   ] });
-}, at = ({ body: t, title: g }) => /* @__PURE__ */ o(_, { sx: { gap: 4, p: 12 }, children: [
-  /* @__PURE__ */ e(i, { bold: !0, variant: "body1", children: g }),
-  /* @__PURE__ */ e(ve, { variant: "subtitle2", children: t })
-] }), lt = ({
+}, lt = ({ body: t, title: g }) => /* @__PURE__ */ o(_, { sx: { gap: 4, p: 12 }, children: [
+  /* @__PURE__ */ e(i, { bold: !0, variant: "Body", children: g }),
+  /* @__PURE__ */ e(ve, { variant: "ParagraphSmall", children: t })
+] }), ct = ({
   placement: t = "bottom",
   tooltip_info_body: g,
   tooltip_info_title: c
 }) => /* @__PURE__ */ e(
-  Pe,
+  $e,
   {
     enterTouchDelay: 500,
     placement: t,
-    title: /* @__PURE__ */ e(at, { body: g, title: c }),
-    children: /* @__PURE__ */ e(ce, { "aria-label": c, sx: { minHeight: 0, minWidth: 0, p: 0 }, children: /* @__PURE__ */ e(B, { name: "info", sx: { color: "info.main" } }) })
+    title: /* @__PURE__ */ e(lt, { body: g, title: c }),
+    children: /* @__PURE__ */ e(ce, { "aria-label": c, sx: { minHeight: 0, minWidth: 0, p: 0 }, children: /* @__PURE__ */ e(k, { name: "info", sx: { color: "info.main" } }) })
   }
-), ct = () => {
+), dt = () => {
   const {
     investments: { analysis: t }
-  } = M(), { analysisChartData: g, analysisDetails: c, analysisType: u, setAnalysisType: v } = U(), f = pe("(min-width:320px) and (max-width:375px)"), { isMobile: m } = H(), y = X().palette.mode === "dark", { cellDimension: d, columns: b, rows: l, textVariant: h } = A.useMemo(() => {
+  } = M(), { analysisChartData: g, analysisDetails: c, analysisType: u, setAnalysisType: v } = H(), f = pe("(min-width:320px) and (max-width:375px)"), { isMobile: m } = U(), y = Re().palette.mode === "dark", { cellDimension: d, columns: b, rows: l, textVariant: h } = A.useMemo(() => {
     const r = u === V.Stocks, n = Object.values(r ? t.stock_column_labels : t.bond_column_labels), p = Object.values(r ? t.stock_row_labels : t.bond_row_labels);
-    return { cellDimension: m ? 72 : 100, columns: n, rows: p, textVariant: m ? "caption" : "body1" };
+    return { cellDimension: m ? 72 : 100, columns: n, rows: p, textVariant: m ? "XSmall" : "Body" };
   }, [t, m, u]);
   return /* @__PURE__ */ o(
     _,
@@ -577,7 +578,7 @@ const de = ({ sx: t = {} }) => {
                     children: [
                       /* @__PURE__ */ e(i, { bold: !0, children: t.invest_analysis }),
                       /* @__PURE__ */ e(
-                        lt,
+                        ct,
                         {
                           tooltip_info_body: t.tooltip_info_body,
                           tooltip_info_title: t.tooltip_info_title
@@ -586,8 +587,8 @@ const de = ({ sx: t = {} }) => {
                     ]
                   }
                 ),
-                g.map((r, n, p) => /* @__PURE__ */ e(_, { sx: { flexDirection: "row", gap: 4 }, children: r.map((C, D) => {
-                  const k = n === 0, I = n === p.length - 1, W = D === 0, G = D === r.length - 1, F = Number(C.replace("%", "")) >= 25;
+                g.map((r, n, p) => /* @__PURE__ */ e(_, { sx: { flexDirection: "row", gap: 4 }, children: r.map((C, S) => {
+                  const B = n === 0, I = n === p.length - 1, W = S === 0, G = S === r.length - 1, F = Number(C.replace("%", "")) >= 25;
                   let T = "grey.200", j = "grey.900";
                   return y ? (T = F ? "grey.200" : "grey.700", j = F ? "grey.900" : "common.white") : (T = F ? "grey.700" : "grey.200", j = F ? "common.white" : "grey.900"), /* @__PURE__ */ e(
                     _,
@@ -596,8 +597,8 @@ const de = ({ sx: t = {} }) => {
                         ...{
                           borderBottomLeftRadius: I && W ? 4 : 0,
                           borderBottomRightRadius: I && G ? 4 : 0,
-                          borderTopLeftRadius: k && W ? 4 : 0,
-                          borderTopRightRadius: k && G ? 4 : 0
+                          borderTopLeftRadius: B && W ? 4 : 0,
+                          borderTopRightRadius: B && G ? 4 : 0
                         },
                         alignItems: "center",
                         bgcolor: T,
@@ -612,12 +613,12 @@ const de = ({ sx: t = {} }) => {
                             color: j,
                             fontWeight: m ? 600 : 700
                           },
-                          variant: m ? "body1" : "h3",
+                          variant: m ? "Body" : "H3",
                           children: C
                         }
                       )
                     },
-                    D
+                    S
                   );
                 }) }, n)),
                 /* @__PURE__ */ e(_, { sx: { alignSelf: "center", flexDirection: "row", pt: 12 }, children: l.map((r) => /* @__PURE__ */ e(_, { sx: { alignItems: "center", width: d }, children: /* @__PURE__ */ e(i, { color: "secondary.main", variant: h, children: r }) }, r)) }),
@@ -650,7 +651,7 @@ const de = ({ sx: t = {} }) => {
       ]
     }
   );
-}, dt = $(ct), mt = ({
+}, mt = P(dt), ut = ({
   accountHoldingsData: t,
   currentEditedCostBasis: g,
   editingHoldingId: c,
@@ -658,7 +659,7 @@ const de = ({ sx: t = {} }) => {
   handleCostBasisClick: v,
   handleCostBasisChange: f,
   handleCostBasisKeyDown: m,
-  isOpen: a,
+  isOpen: s,
   onClose: y
 }) => {
   const { investments: d } = M(), [b, l] = A.useState({}), h = (r) => (n, p) => {
@@ -671,24 +672,24 @@ const de = ({ sx: t = {} }) => {
     qe,
     {
       ariaLabelClose: d.overview.close_investment_drawer,
-      isOpen: a,
+      isOpen: s,
       onClose: y,
       title: d.overview.investment_details,
       children: [
         /* @__PURE__ */ o(x, { sx: { gap: 8, p: 24 }, children: [
           /* @__PURE__ */ e(
-            oe,
+            ne,
             {
               alt: t.accounts.institutionName || "",
               institutionGuid: t.accounts.institution_guid || "",
               size: 64
             }
           ),
-          /* @__PURE__ */ e(i, { sx: { color: "text.primary" }, variant: "body2", children: t.accounts.memberName }),
-          /* @__PURE__ */ e(i, { sx: { color: "text.primary" }, variant: "h2", children: t.accounts.user_name || t.accounts.name }),
+          /* @__PURE__ */ e(i, { sx: { color: "text.primary" }, variant: "Small", children: t.accounts.memberName }),
+          /* @__PURE__ */ e(i, { sx: { color: "text.primary" }, variant: "H2", children: t.accounts.user_name || t.accounts.name }),
           /* @__PURE__ */ o(x, { sx: { alignItems: "center", flexDirection: "row", justifyContent: "space-between" }, children: [
-            /* @__PURE__ */ e(i, { sx: { color: "text.primary", fontWeight: 600 }, variant: "body1", children: d.overview.current_balance }),
-            /* @__PURE__ */ e(i, { sx: { color: "text.primary", fontWeight: 600 }, variant: "body1", children: t.accounts.balance?.toLocaleString("en-US", {
+            /* @__PURE__ */ e(i, { sx: { color: "text.primary", fontWeight: 600 }, variant: "Body", children: d.overview.current_balance }),
+            /* @__PURE__ */ e(i, { sx: { color: "text.primary", fontWeight: 600 }, variant: "Body", children: t.accounts.balance?.toLocaleString("en-US", {
               currency: "USD",
               maximumFractionDigits: 2,
               minimumFractionDigits: 2,
@@ -707,8 +708,8 @@ const de = ({ sx: t = {} }) => {
               py: 10
             },
             children: [
-              /* @__PURE__ */ e(i, { sx: { color: "text.primary", fontWeight: 700 }, variant: "caption", children: d.overview.holding }),
-              /* @__PURE__ */ e(i, { sx: { color: "text.primary", fontWeight: 700 }, variant: "caption", children: d.overview.market_value })
+              /* @__PURE__ */ e(i, { sx: { color: "text.primary", fontWeight: 700 }, variant: "XSmall", children: d.overview.holding }),
+              /* @__PURE__ */ e(i, { sx: { color: "text.primary", fontWeight: 700 }, variant: "XSmall", children: d.overview.market_value })
             ]
           }
         ),
@@ -735,7 +736,7 @@ const de = ({ sx: t = {} }) => {
                       { height: 64 },
                       b[r.id] && n > 0 && {
                         borderTop: 1,
-                        borderColor: "neutral.main"
+                        borderColor: "border.main"
                       }
                     ],
                     children: /* @__PURE__ */ o(x, { sx: { flexDirection: "row", width: "100%" }, children: [
@@ -754,7 +755,7 @@ const de = ({ sx: t = {} }) => {
                             },
                             b[r.id] && {
                               borderBottom: 1,
-                              borderColor: "neutral.main"
+                              borderColor: "border.main"
                             }
                           ],
                           children: [
@@ -767,8 +768,8 @@ const de = ({ sx: t = {} }) => {
                                   gap: 12
                                 },
                                 children: /* @__PURE__ */ o(x, { sx: { overflow: "hidden", width: 98 }, children: [
-                                  /* @__PURE__ */ e(i, { sx: { fontWeight: 600 }, variant: "body1", children: r.holding }),
-                                  /* @__PURE__ */ e(i, { variant: "caption", children: r.description })
+                                  /* @__PURE__ */ e(i, { sx: { fontWeight: 600 }, variant: "Body", children: r.holding }),
+                                  /* @__PURE__ */ e(i, { variant: "XSmall", children: r.description })
                                 ] })
                               }
                             ),
@@ -784,7 +785,7 @@ const de = ({ sx: t = {} }) => {
                                 },
                                 children: [
                                   /* @__PURE__ */ o(x, { children: [
-                                    /* @__PURE__ */ e(i, { sx: { fontWeight: 600, textAlign: "right" }, variant: "body1", children: r.marketValue?.toLocaleString("en-US", {
+                                    /* @__PURE__ */ e(i, { sx: { fontWeight: 600, textAlign: "right" }, variant: "Body", children: r.marketValue?.toLocaleString("en-US", {
                                       currency: "USD",
                                       maximumFractionDigits: 2,
                                       minimumFractionDigits: 2,
@@ -792,7 +793,7 @@ const de = ({ sx: t = {} }) => {
                                     }) }),
                                     /* @__PURE__ */ o(x, { sx: { alignItems: "center", gap: 2, flexDirection: "row" }, children: [
                                       r.totalGainLoss !== 0 && /* @__PURE__ */ e(
-                                        B,
+                                        k,
                                         {
                                           name: r.totalGainLoss >= 0 ? "trending_up" : "trending_down",
                                           size: 12,
@@ -810,11 +811,11 @@ const de = ({ sx: t = {} }) => {
                                             color: r.totalGainLoss <= 0 ? "grey.700" : "success.main",
                                             fontWeight: r.totalGainLoss <= 0 ? 400 : 700
                                           },
-                                          variant: "caption",
+                                          variant: "XSmall",
                                           children: r.costBasis ? `${(r.totalGainLoss / r.costBasis * 100).toFixed(2)}%` : "0.00%"
                                         }
                                       ),
-                                      /* @__PURE__ */ e(i, { sx: { color: "grey.700" }, variant: "caption", children: "|" }),
+                                      /* @__PURE__ */ e(i, { sx: { color: "grey.700" }, variant: "XSmall", children: "|" }),
                                       /* @__PURE__ */ e(
                                         i,
                                         {
@@ -822,7 +823,7 @@ const de = ({ sx: t = {} }) => {
                                             color: r.totalGainLoss <= 0 ? "grey.700" : "success.main",
                                             fontWeight: r.totalGainLoss <= 0 ? 400 : 700
                                           },
-                                          variant: "caption",
+                                          variant: "XSmall",
                                           children: Math.abs(r.totalGainLoss).toLocaleString("en-US", {
                                             currency: "USD",
                                             maximumFractionDigits: 2,
@@ -834,7 +835,7 @@ const de = ({ sx: t = {} }) => {
                                     ] })
                                   ] }),
                                   /* @__PURE__ */ e(
-                                    B,
+                                    k,
                                     {
                                       name: b[r.id] ? "expand_less" : "expand_more",
                                       size: 20
@@ -867,15 +868,15 @@ const de = ({ sx: t = {} }) => {
                             sx: {
                               alignItems: "center",
                               borderBottom: 1,
-                              borderColor: "neutral.main",
+                              borderColor: "border.main",
                               flexDirection: "row",
                               height: 48,
                               justifyContent: "space-between",
                               pr: 24
                             },
                             children: [
-                              /* @__PURE__ */ e(i, { sx: { color: "text.primary" }, variant: "body1", children: d.overview.quantity }),
-                              /* @__PURE__ */ e(i, { sx: { color: "text.primary" }, variant: "body2", children: r.qty })
+                              /* @__PURE__ */ e(i, { sx: { color: "text.primary" }, variant: "Body", children: d.overview.quantity }),
+                              /* @__PURE__ */ e(i, { sx: { color: "text.primary" }, variant: "Small", children: r.qty })
                             ]
                           }
                         ),
@@ -890,7 +891,7 @@ const de = ({ sx: t = {} }) => {
                               pr: 24
                             },
                             children: [
-                              /* @__PURE__ */ e(i, { sx: { color: "text.primary" }, variant: "body1", children: d.overview.cost_basis_header }),
+                              /* @__PURE__ */ e(i, { sx: { color: "text.primary" }, variant: "Body", children: d.overview.cost_basis_header }),
                               /* @__PURE__ */ o(
                                 x,
                                 {
@@ -901,7 +902,7 @@ const de = ({ sx: t = {} }) => {
                                   },
                                   children: [
                                     p ? /* @__PURE__ */ e(
-                                      De,
+                                      Se,
                                       {
                                         autoFocus: !0,
                                         onBlur: () => u(r.id),
@@ -923,7 +924,7 @@ const de = ({ sx: t = {} }) => {
                                         },
                                         value: g
                                       }
-                                    ) : /* @__PURE__ */ e(i, { sx: { fontSize: 14, width: 58 }, variant: "body2", children: r.costBasis?.toLocaleString("en-US", {
+                                    ) : /* @__PURE__ */ e(i, { sx: { fontSize: 14, width: 58 }, variant: "Small", children: r.costBasis?.toLocaleString("en-US", {
                                       currency: "USD",
                                       maximumFractionDigits: 2,
                                       minimumFractionDigits: 2,
@@ -934,7 +935,7 @@ const de = ({ sx: t = {} }) => {
                                       {
                                         onClick: () => v(r.id, r.costBasis),
                                         sx: { minWidth: 16, minHeight: 16 },
-                                        children: /* @__PURE__ */ e(B, { name: "stylus", size: 16, sx: { color: "grey.700" } })
+                                        children: /* @__PURE__ */ e(k, { name: "stylus", size: 16, sx: { color: "grey.700" } })
                                       }
                                     )
                                   ]
@@ -955,10 +956,10 @@ const de = ({ sx: t = {} }) => {
       ]
     }
   );
-}, ut = $(mt), K = (t) => /* @__PURE__ */ o(Ye, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
-  /* @__PURE__ */ e(i, { sx: { color: "text.primary", fontWeight: 600, fontSize: 14 }, variant: "body2", children: t.colDef.headerName }),
-  /* @__PURE__ */ e(B, { name: "expand_all", size: 12 })
-] }), ht = ({
+}, ht = P(ut), q = (t) => /* @__PURE__ */ o(Ye, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
+  /* @__PURE__ */ e(i, { sx: { color: "text.primary", fontWeight: 600, fontSize: 14 }, variant: "Small", children: t.colDef.headerName }),
+  /* @__PURE__ */ e(k, { name: "expand_all", size: 12 })
+] }), gt = ({
   data: t,
   editingHoldingId: g,
   currentEditedCostBasis: c,
@@ -967,10 +968,10 @@ const de = ({ sx: t = {} }) => {
   handleCostBasisKeyDown: f,
   handleCostBasisBlur: m
 }) => {
-  const { investments: a } = M(), d = X().palette.mode === "dark", b = "success.main", l = d ? "grey.300" : "grey.700", h = (n, p = "lesserThan") => p === "greaterThan" ? n >= 0 ? b : l : n <= 0 ? l : b, r = [
+  const { investments: s } = M(), d = le().palette.mode === "dark", b = "success.main", l = d ? "grey.300" : "grey.700", h = (n, p = "lesserThan") => p === "greaterThan" ? n >= 0 ? b : l : n <= 0 ? l : b, r = [
     {
       field: "qty",
-      headerName: a.overview.qty_header,
+      headerName: s.overview.qty_header,
       sortable: !1,
       width: 48,
       align: "center",
@@ -978,9 +979,9 @@ const de = ({ sx: t = {} }) => {
     },
     {
       field: "holding",
-      headerName: a.overview.holding_header,
+      headerName: s.overview.holding_header,
       flex: 1,
-      renderHeader: K,
+      renderHeader: q,
       renderCell: (n) => /* @__PURE__ */ e(_, { sx: { alignItems: "center", gap: 16, flexDirection: "row" }, children: /* @__PURE__ */ o(_, { children: [
         /* @__PURE__ */ e(i, { sx: { fontWeight: 700 }, children: n.row.holding }),
         /* @__PURE__ */ e(i, { sx: { color: "text.secondary", fontWeight: 400 }, variant: "tiny", children: n.row.description })
@@ -988,14 +989,14 @@ const de = ({ sx: t = {} }) => {
     },
     {
       field: "costBasis",
-      headerName: a.overview.cost_basis_header,
+      headerName: s.overview.cost_basis_header,
       width: 132,
-      renderHeader: K,
+      renderHeader: q,
       renderCell: (n) => {
         const p = g === n.row.id;
         return /* @__PURE__ */ o(_, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
           p ? /* @__PURE__ */ e(
-            De,
+            Se,
             {
               autoFocus: !0,
               onBlur: () => m(n.row.id),
@@ -1017,7 +1018,7 @@ const de = ({ sx: t = {} }) => {
               },
               value: c
             }
-          ) : /* @__PURE__ */ e(i, { sx: { fontSize: 14, width: 57 }, variant: "body2", children: n.value?.toLocaleString("en-US", {
+          ) : /* @__PURE__ */ e(i, { sx: { fontSize: 14, width: 57 }, variant: "Small", children: n.value?.toLocaleString("en-US", {
             currency: "USD",
             maximumFractionDigits: 2,
             minimumFractionDigits: 2,
@@ -1028,7 +1029,7 @@ const de = ({ sx: t = {} }) => {
             {
               onClick: () => u(n.row.id, n.row.costBasis),
               sx: { minWidth: 12, minHeight: 12 },
-              children: /* @__PURE__ */ e(B, { name: "stylus", size: 12, sx: { color: "grey.700" } })
+              children: /* @__PURE__ */ e(k, { name: "stylus", size: 12, sx: { color: "grey.700" } })
             }
           )
         ] });
@@ -1038,14 +1039,14 @@ const de = ({ sx: t = {} }) => {
     },
     {
       field: "totalGainLoss",
-      headerName: a.overview.total_gain_loss_header,
+      headerName: s.overview.total_gain_loss_header,
       width: 196,
-      renderHeader: K,
+      renderHeader: q,
       renderCell: (n) => {
         const p = n.row.costBasis, C = p ? n.row.totalGainLoss / p * 100 : 0;
         return /* @__PURE__ */ o(_, { sx: { alignItems: "center", flexDirection: "row", gap: 2 }, children: [
           n.value !== 0 && /* @__PURE__ */ e(
-            B,
+            k,
             {
               name: n.value > 0 ? "trending_up" : "trending_down",
               size: 16,
@@ -1063,11 +1064,11 @@ const de = ({ sx: t = {} }) => {
                 color: h(n.value),
                 fontWeight: n.value > 0 ? 700 : 400
               },
-              variant: "body2",
+              variant: "Small",
               children: p ? `${C.toFixed(2)}%` : "0.00%"
             }
           ),
-          /* @__PURE__ */ e(i, { sx: { color: "text.secondary" }, variant: "caption", children: "|" }),
+          /* @__PURE__ */ e(i, { sx: { color: "text.secondary" }, variant: "XSmall", children: "|" }),
           /* @__PURE__ */ e(
             i,
             {
@@ -1075,7 +1076,7 @@ const de = ({ sx: t = {} }) => {
                 color: h(n.value),
                 fontWeight: n.value > 0 ? 700 : 400
               },
-              variant: "body2",
+              variant: "Small",
               children: Math.abs(n.value).toLocaleString("en-US", {
                 currency: "USD",
                 maximumFractionDigits: 2,
@@ -1092,10 +1093,10 @@ const de = ({ sx: t = {} }) => {
     },
     {
       field: "marketValue",
-      headerName: a.overview.market_value_header,
+      headerName: s.overview.market_value_header,
       width: 132,
-      renderHeader: K,
-      renderCell: (n) => /* @__PURE__ */ e(i, { sx: { fontWeight: 700 }, variant: "body2", children: n.value?.toLocaleString("en-US", {
+      renderHeader: q,
+      renderCell: (n) => /* @__PURE__ */ e(i, { sx: { fontWeight: 700 }, variant: "Small", children: n.value?.toLocaleString("en-US", {
         currency: "USD",
         maximumFractionDigits: 2,
         minimumFractionDigits: 2,
@@ -1106,7 +1107,7 @@ const de = ({ sx: t = {} }) => {
     }
   ];
   return /* @__PURE__ */ e(
-    re,
+    ie,
     {
       sx: {
         boxShadow: "none",
@@ -1126,48 +1127,48 @@ const de = ({ sx: t = {} }) => {
       )
     }
   );
-}, gt = () => {
-  const { isMobile: t } = H(), [g, c] = O({}), [u, v] = O(!1), { selectedAccountGuids: f } = J(), { visibleHoldings: m, updateHoldings: a } = U(), [y, d] = A.useState(!1), [b, l] = O({
+}, pt = () => {
+  const { isMobile: t } = U(), [g, c] = O({}), [u, v] = O(!1), { selectedAccountGuids: f } = Q(), { visibleHoldings: m, updateHoldings: s } = H(), [y, d] = A.useState(!1), [b, l] = O({
     accounts: [],
     holdings: []
-  }), { accounts: h, investments: r } = M(), { isCopyLoaded: n } = J(), [p, C] = O(null), [D, k] = O(""), W = X().palette.mode === "dark", G = W ? "#0AC295" : "#09A57F", F = W ? "grey.300" : "grey.700", T = (s, w = "lesserThan") => w === "greaterThan" ? s >= 0 ? G : F : s <= 0 ? F : G, j = (s, w) => {
-    C(s), k(w.toFixed(2));
-  }, Z = (s) => {
-    const w = s.target.value;
-    /^\d*\.?\d*$/.test(w) && k(w);
-  }, me = (s, w) => {
-    s.key === "Enter" ? ee(w) : s.key === "Escape" && C(null);
-  }, ee = (s) => {
-    const w = m.find(({ guid: E }) => E === s);
+  }), { accounts: h, investments: r } = M(), { isCopyLoaded: n } = Q(), [p, C] = O(null), [S, B] = O(""), W = le().palette.mode === "dark", G = W ? "#0AC295" : "#09A57F", F = W ? "grey.300" : "grey.700", T = (a, w = "lesserThan") => w === "greaterThan" ? a >= 0 ? G : F : a <= 0 ? F : G, j = (a, w) => {
+    C(a), B(w.toFixed(2));
+  }, J = (a) => {
+    const w = a.target.value;
+    /^\d*\.?\d*$/.test(w) && B(w);
+  }, me = (a, w) => {
+    a.key === "Enter" ? Z(w) : a.key === "Escape" && C(null);
+  }, Z = (a) => {
+    const w = m.find(({ guid: E }) => E === a);
     if (!w) return;
-    const N = Number(D);
-    if (a({ ...w, cost_basis: N }), t) {
+    const N = Number(S);
+    if (s({ ...w, cost_basis: N }), t) {
       const E = b.holdings.map(
-        (S) => S.id === s ? { ...S, costBasis: N } : S
+        (D) => D.id === a ? { ...D, costBasis: N } : D
       );
-      l((S) => ({
-        ...S,
+      l((D) => ({
+        ...D,
         holdings: E
       }));
     }
     C(null);
-  }, Le = (s) => (w, N) => {
+  }, Le = (a) => (w, N) => {
     c((E) => ({
       ...E,
-      [s]: N
+      [a]: N
     }));
-  }, { visibleHoldings: ue } = U(), { visibleInvestmentAccounts: Ie } = le(), P = Ie.filter(
-    ({ guid: s }) => f.includes(s)
-  ), Ae = P.reduce((s, w) => s + (w.balance || 0), 0), ke = P.map(({ guid: s }) => s), q = ue.filter(
-    ({ account_guid: s }) => ke.includes(s)
-  ).reduce((s, w) => {
+  }, { visibleHoldings: ue } = H(), { visibleInvestmentAccounts: Ie } = se(), X = Ie.filter(
+    ({ guid: a }) => f.includes(a)
+  ), Ae = X.reduce((a, w) => a + (w.balance || 0), 0), Be = X.map(({ guid: a }) => a), $ = ue.filter(
+    ({ account_guid: a }) => Be.includes(a)
+  ).reduce((a, w) => {
     const N = w.market_value ? w.market_value - (w.cost_basis || 0) : 0;
-    return s + N;
+    return a + N;
   }, 0), Te = () => {
     v(!1);
   };
   return n ? /* @__PURE__ */ o(x, { sx: { alignItems: "center", gap: 48, pt: 48, width: "100%" }, children: [
-    !!P.length && /* @__PURE__ */ o(x, { sx: { alignItems: "center" }, children: [
+    !!X.length && /* @__PURE__ */ o(x, { sx: { alignItems: "center" }, children: [
       /* @__PURE__ */ e(i, { sx: { color: "text.secondary" }, children: r.overview.total_portfolio }),
       /* @__PURE__ */ e(fe, { children: Ae.toLocaleString("en-US", {
         currency: "USD",
@@ -1177,19 +1178,19 @@ const de = ({ sx: t = {} }) => {
       }) }),
       /* @__PURE__ */ o(x, { sx: { alignItems: "center", flexDirection: "row", gap: 8 }, children: [
         /* @__PURE__ */ e(
-          B,
+          k,
           {
-            name: q >= 0 ? "trending_up" : "trending_down",
+            name: $ >= 0 ? "trending_up" : "trending_down",
             size: 20,
-            sx: { color: T(q, "greaterThan") }
+            sx: { color: T($, "greaterThan") }
           }
         ),
         /* @__PURE__ */ e(
           i,
           {
-            sx: { color: T(q, "greaterThan"), fontWeight: 700 },
-            variant: "body2",
-            children: q.toLocaleString("en-US", {
+            sx: { color: T($, "greaterThan"), fontWeight: 700 },
+            variant: "Small",
+            children: $.toLocaleString("en-US", {
               currency: "USD",
               maximumFractionDigits: 2,
               minimumFractionDigits: 2,
@@ -1199,8 +1200,8 @@ const de = ({ sx: t = {} }) => {
         )
       ] })
     ] }),
-    P.map((s) => {
-      const w = ue.filter((L) => L.account_guid === s.guid).map((L) => ({
+    X.map((a) => {
+      const w = ue.filter((L) => L.account_guid === a.guid).map((L) => ({
         id: L.guid,
         qty: L.shares || 0,
         holding: L.symbol || L.description || "Unknown",
@@ -1208,18 +1209,18 @@ const de = ({ sx: t = {} }) => {
         totalGainLoss: L.market_value ? L.market_value - (L.cost_basis || 0) : 0,
         marketValue: L.market_value || 0,
         description: L.description || ""
-      })), N = w.length > 0, E = s.balance, S = w.reduce(
+      })), N = w.length > 0, E = a.balance, D = w.reduce(
         (L, Fe) => Fe.totalGainLoss + L,
         0
-      ), he = E ? S / E * 100 : 0;
+      ), he = E ? D / E * 100 : 0;
       if (t)
         return /* @__PURE__ */ e(
-          re,
+          ie,
           {
             onClick: w.length ? () => {
               v(!0), l({
                 holdings: w,
-                accounts: s
+                accounts: a
               });
             } : void 0,
             sx: {
@@ -1231,7 +1232,7 @@ const de = ({ sx: t = {} }) => {
               {
                 sx: {
                   border: 1,
-                  borderColor: "divider",
+                  borderColor: "border.main",
                   borderRadius: "8px",
                   ml: 16,
                   mr: 16,
@@ -1245,7 +1246,7 @@ const de = ({ sx: t = {} }) => {
                       sx: {
                         alignItems: "center",
                         borderBottom: 1,
-                        borderColor: "divider",
+                        borderColor: "border.main",
                         flexDirection: "row",
                         pb: 14,
                         pl: 14,
@@ -1253,16 +1254,16 @@ const de = ({ sx: t = {} }) => {
                       },
                       children: [
                         /* @__PURE__ */ e(
-                          oe,
+                          ne,
                           {
-                            alt: s.institutionName || "",
-                            institutionGuid: s.institution_guid || "",
+                            alt: a.institutionName || "",
+                            institutionGuid: a.institution_guid || "",
                             size: 32
                           }
                         ),
                         /* @__PURE__ */ o(x, { sx: { overflow: "hidden", pl: 13, pr: 13 }, children: [
-                          /* @__PURE__ */ e(i, { sx: { color: "text.secondary" }, variant: "caption", children: s.memberName }),
-                          /* @__PURE__ */ e(i, { sx: { color: "text.primary", fontWeight: 600 }, variant: "body1", children: s.user_name || s.name })
+                          /* @__PURE__ */ e(i, { sx: { color: "text.secondary" }, variant: "XSmall", children: a.memberName }),
+                          /* @__PURE__ */ e(i, { sx: { color: "text.primary", fontWeight: 600 }, variant: "Body", children: a.user_name || a.name })
                         ] })
                       ]
                     }
@@ -1284,7 +1285,7 @@ const de = ({ sx: t = {} }) => {
                             sx: {
                               alignItems: "center",
                               borderRight: 1,
-                              borderColor: "divider",
+                              borderColor: "border.main",
                               flex: 1,
                               justifyContent: "center",
                               pb: 14,
@@ -1293,7 +1294,7 @@ const de = ({ sx: t = {} }) => {
                               pt: 14
                             },
                             children: [
-                              /* @__PURE__ */ e(i, { sx: { color: "text.secondary", fontSize: 11 }, variant: "body2", children: r.overview.total_gain_Loss }),
+                              /* @__PURE__ */ e(i, { sx: { color: "text.secondary", fontSize: 11 }, variant: "Small", children: r.overview.total_gain_Loss }),
                               /* @__PURE__ */ o(
                                 x,
                                 {
@@ -1304,38 +1305,38 @@ const de = ({ sx: t = {} }) => {
                                     justifyContent: "flex-end"
                                   },
                                   children: [
-                                    S !== 0 && /* @__PURE__ */ e(
-                                      B,
+                                    D !== 0 && /* @__PURE__ */ e(
+                                      k,
                                       {
-                                        name: S > 0 ? "trending_up" : "trending_down",
+                                        name: D > 0 ? "trending_up" : "trending_down",
                                         size: 20,
-                                        sx: { color: T(S) }
+                                        sx: { color: T(D) }
                                       }
                                     ),
                                     /* @__PURE__ */ o(
                                       i,
                                       {
                                         sx: {
-                                          color: T(S),
+                                          color: T(D),
                                           fontWeight: 600
                                         },
-                                        variant: "body1",
+                                        variant: "Body",
                                         children: [
                                           he.toFixed(2),
                                           "%"
                                         ]
                                       }
                                     ),
-                                    /* @__PURE__ */ e(i, { sx: { color: "text.secondary" }, variant: "caption", children: "|" }),
+                                    /* @__PURE__ */ e(i, { sx: { color: "text.secondary" }, variant: "XSmall", children: "|" }),
                                     /* @__PURE__ */ e(
                                       i,
                                       {
                                         sx: {
-                                          color: T(S),
+                                          color: T(D),
                                           fontWeight: 600
                                         },
-                                        variant: "body1",
-                                        children: Math.abs(S).toLocaleString("en-US", {
+                                        variant: "Body",
+                                        children: Math.abs(D).toLocaleString("en-US", {
                                           currency: "USD",
                                           maximumFractionDigits: 2,
                                           minimumFractionDigits: 2,
@@ -1362,8 +1363,8 @@ const de = ({ sx: t = {} }) => {
                               pt: 14
                             },
                             children: [
-                              /* @__PURE__ */ e(i, { sx: { color: "text.secondary" }, variant: "caption", children: r.overview.total_value }),
-                              /* @__PURE__ */ e(i, { sx: { color: "text.primary", fontWeight: 600 }, variant: "body1", children: E?.toLocaleString("en-US", {
+                              /* @__PURE__ */ e(i, { sx: { color: "text.secondary" }, variant: "XSmall", children: r.overview.total_value }),
+                              /* @__PURE__ */ e(i, { sx: { color: "text.primary", fontWeight: 600 }, variant: "Body", children: E?.toLocaleString("en-US", {
                                 currency: "USD",
                                 maximumFractionDigits: 2,
                                 minimumFractionDigits: 2,
@@ -1379,14 +1380,14 @@ const de = ({ sx: t = {} }) => {
               }
             )
           },
-          s.guid
+          a.guid
         );
-      const Be = W ? "grey.700" : "grey.400", We = w.length ? "text.primary" : Be;
+      const ke = W ? "grey.700" : "grey.400", We = w.length ? "text.primary" : ke;
       return /* @__PURE__ */ o(
         _e,
         {
-          expanded: g[s.guid] === !0,
-          onChange: N ? Le(s.guid) : () => {
+          expanded: g[a.guid] === !0,
+          onChange: N ? Le(a.guid) : () => {
           },
           sx: {
             border: 1,
@@ -1401,9 +1402,9 @@ const de = ({ sx: t = {} }) => {
                 "aria-controls": "panel1a-content",
                 id: "panel1a-header",
                 sx: [
-                  g[s.guid] && {
+                  g[a.guid] && {
                     borderBottom: 1,
-                    borderColor: "divider",
+                    borderColor: "border.main",
                     maxHeight: 88
                   }
                 ],
@@ -1419,25 +1420,25 @@ const de = ({ sx: t = {} }) => {
                         width: "100%"
                       },
                       children: [
-                        /* @__PURE__ */ e(B, { name: "expand_more", size: 20, sx: { color: We } }),
+                        /* @__PURE__ */ e(k, { name: "expand_more", size: 20, sx: { color: We } }),
                         /* @__PURE__ */ e(
-                          oe,
+                          ne,
                           {
-                            alt: s.institutionName || "",
-                            institutionGuid: s.institution_guid || "",
+                            alt: a.institutionName || "",
+                            institutionGuid: a.institution_guid || "",
                             size: 32
                           }
                         ),
                         /* @__PURE__ */ o(x, { sx: { alignItems: "flex-start" }, children: [
-                          /* @__PURE__ */ e(i, { sx: { color: "text.secondary" }, variant: "caption", children: s.memberName }),
-                          /* @__PURE__ */ e(i, { sx: { color: "text.primary", fontWeight: 600 }, variant: "body1", children: s.user_name || s.name })
+                          /* @__PURE__ */ e(i, { sx: { color: "text.secondary" }, variant: "XSmall", children: a.memberName }),
+                          /* @__PURE__ */ e(i, { sx: { color: "text.primary", fontWeight: 600 }, variant: "Body", children: a.user_name || a.name })
                         ] })
                       ]
                     }
                   ),
                   /* @__PURE__ */ o(x, { sx: { flexDirection: "row" }, children: [
                     /* @__PURE__ */ o(x, { sx: { alignItems: "flex-end", pb: 14, pl: 24, pr: 24, pt: 14 }, children: [
-                      /* @__PURE__ */ e(i, { sx: { color: "text.secondary" }, variant: "caption", children: r.overview.total_gain_Loss }),
+                      /* @__PURE__ */ e(i, { sx: { color: "text.secondary" }, variant: "XSmall", children: r.overview.total_gain_Loss }),
                       /* @__PURE__ */ o(
                         x,
                         {
@@ -1448,38 +1449,38 @@ const de = ({ sx: t = {} }) => {
                             justifyContent: "flex-end"
                           },
                           children: [
-                            S !== 0 && /* @__PURE__ */ e(
-                              B,
+                            D !== 0 && /* @__PURE__ */ e(
+                              k,
                               {
-                                name: S >= 0 ? "trending_up" : "trending_down",
+                                name: D >= 0 ? "trending_up" : "trending_down",
                                 size: 20,
-                                sx: { color: T(S) }
+                                sx: { color: T(D) }
                               }
                             ),
                             /* @__PURE__ */ o(
                               i,
                               {
                                 sx: {
-                                  color: T(S),
+                                  color: T(D),
                                   fontWeight: 600
                                 },
-                                variant: "body1",
+                                variant: "Body",
                                 children: [
                                   he.toFixed(2),
                                   "%"
                                 ]
                               }
                             ),
-                            /* @__PURE__ */ e(i, { sx: { color: "text.secondary" }, variant: "caption", children: "|" }),
+                            /* @__PURE__ */ e(i, { sx: { color: "text.secondary" }, variant: "XSmall", children: "|" }),
                             /* @__PURE__ */ e(
                               i,
                               {
                                 sx: {
-                                  color: T(S),
+                                  color: T(D),
                                   fontWeight: 600
                                 },
-                                variant: "body1",
-                                children: Math.abs(S).toLocaleString("en-US", {
+                                variant: "Body",
+                                children: Math.abs(D).toLocaleString("en-US", {
                                   currency: "USD",
                                   maximumFractionDigits: 2,
                                   minimumFractionDigits: 2,
@@ -1492,8 +1493,8 @@ const de = ({ sx: t = {} }) => {
                       )
                     ] }),
                     /* @__PURE__ */ e(x, { sx: { alignItems: "flex-end", gap: 12, pb: 14, pl: 16, pr: 16, pt: 14 }, children: /* @__PURE__ */ o(x, { sx: { alignItems: "flex-end" }, children: [
-                      /* @__PURE__ */ e(i, { sx: { color: "text.secondary" }, variant: "caption", children: r.overview.total_value }),
-                      /* @__PURE__ */ e(i, { sx: { color: "text.primary", fontWeight: 600 }, variant: "body1", children: E?.toLocaleString("en-US", {
+                      /* @__PURE__ */ e(i, { sx: { color: "text.secondary" }, variant: "XSmall", children: r.overview.total_value }),
+                      /* @__PURE__ */ e(i, { sx: { color: "text.primary", fontWeight: 600 }, variant: "Body", children: E?.toLocaleString("en-US", {
                         currency: "USD",
                         maximumFractionDigits: 2,
                         minimumFractionDigits: 2,
@@ -1504,32 +1505,32 @@ const de = ({ sx: t = {} }) => {
                 ]
               }
             ),
-            /* @__PURE__ */ e(we, { sx: { bgcolor: "background.default", p: 12 }, children: /* @__PURE__ */ e(re, { sx: { border: 1, borderColor: "neutral.light" }, children: /* @__PURE__ */ e(
-              ht,
+            /* @__PURE__ */ e(we, { sx: { bgcolor: "background.default", p: 12 }, children: /* @__PURE__ */ e(ie, { sx: { border: 1, borderColor: "border.light" }, children: /* @__PURE__ */ e(
+              gt,
               {
-                currentEditedCostBasis: D,
+                currentEditedCostBasis: S,
                 data: w,
                 editingHoldingId: p,
-                handleCostBasisBlur: ee,
-                handleCostBasisChange: Z,
+                handleCostBasisBlur: Z,
+                handleCostBasisChange: J,
                 handleCostBasisClick: j,
                 handleCostBasisKeyDown: me
               }
             ) }) })
           ]
         },
-        s.guid
+        a.guid
       );
     }),
     /* @__PURE__ */ e(de, {}),
     /* @__PURE__ */ e(
-      ut,
+      ht,
       {
         accountHoldingsData: b,
-        currentEditedCostBasis: D,
+        currentEditedCostBasis: S,
         editingHoldingId: p,
-        handleCostBasisBlur: ee,
-        handleCostBasisChange: Z,
+        handleCostBasisBlur: Z,
+        handleCostBasisChange: J,
         handleCostBasisClick: j,
         handleCostBasisKeyDown: me,
         isOpen: u,
@@ -1544,13 +1545,13 @@ const de = ({ sx: t = {} }) => {
         title: h.manage_connections
       }
     )
-  ] }) : /* @__PURE__ */ e(Se, {});
-}, pt = $(gt), xt = ({ title: t }) => /* @__PURE__ */ e(i, { bold: !0, variant: "body1", children: t }), rn = $(({ onBackClick: t, sx: g }) => {
-  const { onEvent: c } = be(), { onLoad: u } = je(), { isMobile: v } = H(), { visibleInvestmentAccounts: f } = le(), {
+  ] }) : /* @__PURE__ */ e(De, {});
+}, xt = P(pt), yt = ({ title: t }) => /* @__PURE__ */ e(i, { bold: !0, variant: "Body", children: t }), sn = P(({ onBackClick: t, sx: g }) => {
+  const { onEvent: c } = be(), { onLoad: u } = je(), { isMobile: v } = U(), { visibleInvestmentAccounts: f } = se(), {
     visibleHoldings: m,
-    setShowConnectionsWidget: a,
+    setShowConnectionsWidget: s,
     showConnectionsWidget: y
-  } = U(), { investments: d, accounts: b } = M(), { isCopyLoaded: l, isInitialized: h, setSelectedAccounts: r } = J(), [n, p] = A.useState(0), { loadHoldings: C } = U();
+  } = H(), { investments: d, accounts: b } = M(), { isCopyLoaded: l, isInitialized: h, setSelectedAccounts: r } = Q(), [n, p] = A.useState(0), { loadHoldings: C } = H();
   A.useEffect(() => {
     r(f);
   }, [f]), A.useEffect(() => {
@@ -1558,11 +1559,11 @@ const de = ({ sx: t = {} }) => {
       u?.("InvestmentsWidget");
     });
   }, [h]);
-  const D = () => {
+  const S = () => {
     c(z.INVESTMENT_WIDGET_ACCOUNT_FILTER_CLICK);
   };
-  if (!l || !h) return /* @__PURE__ */ e(Se, {});
-  const k = [
+  if (!l || !h) return /* @__PURE__ */ e(De, {});
+  const B = [
     z.INVESTMENT_WIDGET_DETAILS_CLICK,
     z.INVESTMENT_WIDGET_ALLOCATION_CLICK,
     z.INVESTMENT_WIDGET_ANALYSIS_CLICK
@@ -1575,7 +1576,7 @@ const de = ({ sx: t = {} }) => {
     ze,
     {
       accountOptions: f,
-      onAccountsFilterClick: D,
+      onAccountsFilterClick: S,
       onBackClick: t,
       sx: g,
       title: d.title,
@@ -1585,13 +1586,13 @@ const de = ({ sx: t = {} }) => {
             Ge,
             {
               onChange: (G, F) => {
-                p(F), c(k[F]);
+                p(F), c(B[F]);
               },
               sx: { bgcolor: "background.paper" },
               textColor: "primary",
               value: I ? -1 : n,
               variant: "fullWidth",
-              children: W.map((G) => /* @__PURE__ */ e(Ee, { disabled: I, label: /* @__PURE__ */ e(xt, { title: G }) }, G))
+              children: W.map((G) => /* @__PURE__ */ e(Ee, { disabled: I, label: /* @__PURE__ */ e(yt, { title: G }) }, G))
             }
           ),
           I ? /* @__PURE__ */ e(
@@ -1600,7 +1601,7 @@ const de = ({ sx: t = {} }) => {
               header: d.empty_state_header,
               icon: "bid_landscape",
               onClick: () => {
-                a(!0), c(z.ACCOUNTS_CLICK_CONNECT);
+                s(!0), c(z.ACCOUNTS_CLICK_CONNECT);
               },
               primaryButton: d.overview.connect_accounts,
               subText: d.empty_state_description,
@@ -1617,15 +1618,15 @@ const de = ({ sx: t = {} }) => {
               }
             }
           ) : /* @__PURE__ */ o(ae, { children: [
-            n === 0 && /* @__PURE__ */ e(pt, {}),
-            n === 1 && /* @__PURE__ */ e(rt, {}),
-            n === 2 && /* @__PURE__ */ e(dt, {})
+            n === 0 && /* @__PURE__ */ e(xt, {}),
+            n === 1 && /* @__PURE__ */ e(at, {}),
+            n === 2 && /* @__PURE__ */ e(mt, {})
           ] })
         ] }),
         /* @__PURE__ */ e(
           ge,
           {
-            onClose: () => a(!1),
+            onClose: () => s(!1),
             showConnectionsWidget: y,
             title: b.manage_connections
           }
@@ -1635,5 +1636,5 @@ const de = ({ sx: t = {} }) => {
   );
 });
 export {
-  rn as InvestmentsWidget
+  sn as InvestmentsWidget
 };