@mx-cartographer/experiences 7.3.3-alpha.mega1 → 7.4.0

package/dist/finstrong/index.es.js

@@ -1,280 +1,180 @@
-import { jsx as e, jsxs as u, Fragment as ie } from "react/jsx-runtime";
-import x from "@mui/material/Box";
-import _ from "@mui/material/Stack";
-import { useTheme as E, alpha as oe } from "@mui/material/styles";
-import { PieChart as Oe } from "@mui/x-charts";
-import { ChevronRight as j, Check as De, TrendingUp as Me, ArrowRightAlt as Te, TrendingDown as we, AccountBalance as ue, ExpandMore as Fe, Payments as Re, CalendarMonth as Pe, CreditCard as he, Savings as Ge, ContentCopy as Le, MultilineChart as Ee } from "@mxenabled/mx-icons";
-import { Text as W, P as y, H3 as H, Icon as _e } from "@mxenabled/mxui";
-import { format as ge } from "date-fns/format";
-import C from "react";
-import We from "@mui/material/Avatar";
-import fe from "@mui/material/Divider";
-import Be from "@mui/material/List";
-import He from "@mui/material/ListItem";
-import ze from "@mui/material/ListItemAvatar";
-import $e from "@mui/material/ListItemButton";
-import Ne from "@mui/material/ListItemText";
-import { b } from "../Localization-2MODESHW.mjs";
-import * as le from "d3";
-import { observer as I } from "mobx-react-lite";
-import { u as S, b as z, w as $, p as Y, d as ye, i as be, n as Ke, m as Xe } from "../hooks-Cy8JnjCg.mjs";
-import { L as N } from "../Loader-DUaFpDGv.mjs";
-import { F as Ko, a as Xo } from "../FinstrongStore-CL7t5lBL.mjs";
-import q from "@mui/material/Button";
-import J from "@mui/material/Card";
-import { L as xe } from "../LineChart-eK4IQImU.mjs";
-import { l as Ce } from "../ConnectDrawer-CbxHKlRv.mjs";
-import je from "@mui/material/Accordion";
-import Ue from "@mui/material/AccordionDetails";
-import Ve from "@mui/material/AccordionSummary";
-import Ye from "@mui/material/CardHeader";
-import { u as qe } from "../useDimensions-27p2evRx.mjs";
-import { C as Je } from "../ConnectionsDrawer-C6kanU7I.mjs";
-import { R as Qe } from "../RecurringSettings-iIupYxJW.mjs";
-import Ze from "@mui/material/TextField";
-import { u as Se } from "../useScreenSize-B6JyS_Lj.mjs";
-import { a as et } from "../Dialog-CWW597AF.mjs";
-import { AdapterDateFns as tt } from "@mui/x-date-pickers/AdapterDateFnsV3";
-import { StaticDatePicker as ot } from "@mui/x-date-pickers";
-import { LocalizationProvider as nt } from "@mui/x-date-pickers/LocalizationProvider";
-import { D as V } from "../Drawer-kEE73B87.mjs";
-import ne from "@mui/material/Tab";
-import rt from "@mui/material/Tabs";
-import { f as it } from "../NumberFormatting-Buh7u8Oi.mjs";
-import { T as re } from "../TabContentContainer-j01JYR_7.mjs";
-import st from "@mui/lab/Timeline";
-import at, { timelineItemClasses as ct } from "@mui/lab/TimelineItem";
-import lt from "@mui/lab/TimelineConnector";
-import dt from "@mui/lab/TimelineContent";
-import pt from "@mui/lab/TimelineDot";
-import mt from "@mui/lab/TimelineSeparator";
-import { W as ut } from "../WidgetContainer-BnTgAfQn.mjs";
-var A = /* @__PURE__ */ ((n) => (n.Connections = "connections", n.CreditScore = "credit_score", n.DateOfBirth = "date_of_birth", n.MonthlyIncome = "monthly_income", n))(A || {});
-const ht = ({ list: n, onClickItem: o }) => /* @__PURE__ */ e(x, { sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(
-  Be,
-  {
-    sx: {
-      "& .MuiListItemSecondaryAction-root": {
-        color: "text.primary",
-        pr: 24
-      }
-    },
-    children: n.map((t, a) => /* @__PURE__ */ u(C.Fragment, { children: [
-      /* @__PURE__ */ e(He, { secondaryAction: /* @__PURE__ */ e(j, {}), children: /* @__PURE__ */ u($e, { onClick: () => o(t.key), children: [
-        /* @__PURE__ */ e(ze, { children: /* @__PURE__ */ e(
-          We,
-          {
-            sx: {
-              bgcolor: "primary.main",
-              ...!t.isComplete && {
-                bgcolor: "transparent",
-                borderColor: "action.active",
-                borderStyle: "solid",
-                borderWidth: 1,
-                color: "action.active"
-              }
-            },
-            children: t.icon
-          }
-        ) }),
-        /* @__PURE__ */ e(
-          Ne,
-          {
-            primary: /* @__PURE__ */ e(W, { sx: { color: "text.secondary" }, variant: "caption", children: t.primaryText }),
-            secondary: /* @__PURE__ */ e(W, { sx: { color: "text.primary", fontWeight: 600 }, variant: "body1", children: t.secondaryText })
-          }
-        )
-      ] }) }),
-      a < n.length - 1 && /* @__PURE__ */ e(fe, { sx: { color: "divider", ml: 68 } })
-    ] }, t.key))
-  }
-) }), _t = ht, de = (n) => n * (180 / Math.PI), se = (n, o) => [
-  {
-    description: o.vulnerable_description,
-    max: 25,
-    scoreContent: o.accordion_details_text.vulnerable,
-    status: o.vulnerable
-  },
-  {
-    description: o.building_description,
-    max: 50,
-    scoreContent: o.accordion_details_text.building,
-    status: o.building
-  },
-  {
-    description: o.stable_description,
-    max: 75,
-    scoreContent: o.accordion_details_text.stable,
-    status: o.stable
-  },
-  {
-    description: o.strong_description,
-    max: 100,
-    scoreContent: o.accordion_details_text.strong,
-    status: o.strong
-  }
-].find((d) => n > 0 && n <= d.max) || { status: o.insufficient_data, description: "", scoreContent: "" }, D = {
-  POOR: "#8C0E0E",
-  FAIR: "#E32727",
-  GOOD: "#FFB70D",
-  VERY_GOOD: "#0EA26C",
-  EXCEPTIONAL: "#005C3D"
-}, M = {
-  POOR: "#B21C1C",
-  FAIR: "#FF3232",
-  GOOD: "#FFC02C",
-  VERY_GOOD: "#29C76B",
-  EXCEPTIONAL: "#008A5A"
-}, gt = (n, o, t) => n >= 300 && n < 580 ? {
-  status: t.poor,
-  color: o ? M.POOR : D.POOR
-} : n >= 580 && n < 670 ? {
-  status: t.fair,
-  color: o ? M.FAIR : D.FAIR
-} : n >= 670 && n < 740 ? {
-  status: t.good,
-  color: o ? M.GOOD : D.GOOD
-} : n >= 740 && n < 800 ? {
-  status: t.very_good,
-  color: o ? M.VERY_GOOD : D.VERY_GOOD
-} : n >= 800 && n <= 850 ? {
-  status: t.exceptional,
-  color: o ? M.EXCEPTIONAL : D.EXCEPTIONAL
-} : { status: t.missing_data }, ft = (n, o, t, a) => {
-  const d = n.reduce((r, s) => r + s.value, 0);
-  let l = 0;
-  const i = n.map((r) => {
-    const s = r.value / d * o, c = t + l, p = c + s;
-    return l += s, {
-      ...r,
-      startAngle: c,
-      endAngle: p
-    };
-  });
-  return [i[a].startAngle, i[a].endAngle];
-}, yt = (n, o, t, a, d) => {
-  let l = 0, i = 0;
-  const r = Math.floor(a), s = a - r;
-  return r > t ? (l = n, i = o) : r === t && s > 0 && (l = n, i = d), [l, i];
-}, bt = (n, o, t = 0) => {
-  const a = n * Math.sin(o - t), d = -n * Math.cos(o - t);
-  return [a, d];
-}, xt = ({
-  dynamicCopy: n,
-  fallbackLabel: o,
-  icon: t,
-  key: a,
-  label: d,
-  value: l
-}) => {
-  const i = !!l, r = i ? Ct(a, l) : n && b(n, o) || o;
-  return {
-    icon: i ? /* @__PURE__ */ e(De, {}) : t,
-    isComplete: i,
-    key: a,
-    primaryText: d,
-    secondaryText: r
-  };
-}, Ct = (n, o) => ({
-  [A.DateOfBirth]: (a) => ge(new Date(Number(a) * 1e3), "MMM d, yyyy"),
-  [A.MonthlyIncome]: (a) => `$${a}`
-})[n]?.(o) ?? String(o), pe = (n) => n !== null ? Math.round(n * 100) : null, St = ({
-  dialScoreData: n,
+import { jsxs as a, Fragment as W, jsx as e } from "react/jsx-runtime";
+import k from "@mui/material/Box";
+import p from "@mui/material/Stack";
+import { useTheme as $, alpha as be } from "@mui/material/styles";
+import { PieChart as rn, BarPlot as an } from "@mui/x-charts";
+import { TrendingUp as _t, ArrowRightAlt as sn, TrendingDown as cn, AccountBalance as ut, ChevronRight as Z, MultilineChart as ht, CreditCard as Ke, CheckCircle as ln, Cancel as dn, Savings as pn, ContentCopy as _n, Add as mt, Cardiology as un, Payments as hn, CalendarMonth as mn, ExpandMore as gn } from "@mxenabled/mx-icons";
+import { P as M, H3 as Y, Text as I, InstitutionLogo as gt, H2 as Be, MerchantLogo as yn, Icon as bn } from "@mxenabled/mxui";
+import { g as fn, a as xn, r as nt, b as Sn, c as je, d as yt, C as ke, e as Me, f as Cn, h as vn, i as wn, j as bt, k as ot, l as kn, m as rt, n as Mn, o as ft, p as Dn, q as xt, s as Re, t as In, u as Tn, v as An, w as On, A as te, x as Fn, P as Rn } from "../FinstrongStore-CfD6bbJk.mjs";
+import { y as Ci, F as vi } from "../FinstrongStore-CfD6bbJk.mjs";
+import * as at from "d3";
+import { observer as v } from "mobx-react-lite";
+import { u as x, b as X, a as Ye, p as J, z as R, q as Pn, d as xe, m as Ve, f as Ln, j as Xe, h as Bn, i as Wn, n as $n } from "../hooks-C41HAxM5.mjs";
+import { L as oe } from "../Loader-DUaFpDGv.mjs";
+import m from "react";
+import P from "@mui/material/Button";
+import V from "@mui/material/Card";
+import { L as qe } from "../LineChart-DttMO7uS.mjs";
+import { C as St } from "../ConnectionsDrawer-Bz4uwdFE.mjs";
+import { l as re, g as Ct, A as He } from "../ConnectDrawer-CuUj16NH.mjs";
+import se from "@mui/material/Tab";
+import Ue from "@mui/material/Tabs";
+import Pe from "@mui/material/TextField";
+import { u as Qe } from "../useScreenSize-B6JyS_Lj.mjs";
+import { D as Gn, f as zn, a as En } from "../Dialog-BPTr3qHE.mjs";
+import { u as vt } from "../useDimensions-27p2evRx.mjs";
+import Hn from "@mui/material/Chip";
+import { D as ne } from "../Drawer-BEtCk82g.mjs";
+import le from "@mui/material/Divider";
+import ge from "@mui/material/ListItem";
+import wt from "@mui/material/ListItemAvatar";
+import ye from "@mui/material/ListItemText";
+import { g as kt } from "../AccountFields-CPkGZ3SD.mjs";
+import Ne from "@mui/material/List";
+import Nn from "@mui/material/ListItemButton";
+import Kn from "@mui/material/ListSubheader";
+import { f as B } from "../NumberFormatting-Buh7u8Oi.mjs";
+import { b as j } from "../Localization-2MODESHW.mjs";
+import { S as it, F as Mt, e as jn, R as Dt } from "../RecurringTransactions-CngsRZ3K.mjs";
+import { S as Yn } from "../StatusBar-BK_uYHAB.mjs";
+import { h as It } from "../DateUtil-CBdcsyuk.mjs";
+import { T as Vn, s as Xn, h as qn, S as Un, c as Qn } from "../TransactionDetails-CtbBBSoU.mjs";
+import { T as ce } from "../TabContentContainer-j01JYR_7.mjs";
+import { E as Le } from "../EmptyState-DoxNUae-.mjs";
+import Zn from "@mui/material/useMediaQuery";
+import { ChartsXAxis as Jn } from "@mui/x-charts/ChartsXAxis";
+import { ChartsYAxis as eo } from "@mui/x-charts/ChartsYAxis";
+import { ResponsiveChartContainer as to } from "@mui/x-charts/ResponsiveChartContainer";
+import { useSpring as no, animated as st } from "@react-spring/web";
+import { startOfMonth as Tt } from "date-fns/startOfMonth";
+import { endOfMonth as At } from "date-fns/endOfMonth";
+import { g as oo, S as ro, b as ao } from "../SpendingLegend-B2BYr8B4.mjs";
+import { formatISO as io } from "date-fns/formatISO";
+import { fromUnixTime as so } from "date-fns/fromUnixTime";
+import { startOfToday as ct } from "date-fns/startOfToday";
+import { subDays as co } from "date-fns/subDays";
+import { c as lo, d as lt, S as po, i as _o } from "../ManageIncome-CU5C0AeO.mjs";
+import { LocalizationProvider as uo, DatePicker as ho, StaticDatePicker as mo } from "@mui/x-date-pickers";
+import { AdapterDateFns as Ot } from "@mui/x-date-pickers/AdapterDateFnsV3";
+import { R as go } from "../RecurringSettings-Cm5Bqcai.mjs";
+import { LocalizationProvider as yo } from "@mui/x-date-pickers/LocalizationProvider";
+import { format as bo } from "date-fns/format";
+import fo from "@mui/lab/Timeline";
+import xo, { timelineItemClasses as So } from "@mui/lab/TimelineItem";
+import Co from "@mui/lab/TimelineConnector";
+import vo from "@mui/lab/TimelineContent";
+import wo from "@mui/lab/TimelineDot";
+import ko from "@mui/lab/TimelineSeparator";
+import Mo from "@mui/material/Accordion";
+import Do from "@mui/material/AccordionDetails";
+import Io from "@mui/material/AccordionSummary";
+import To from "@mui/material/CardHeader";
+import { W as Ao } from "../WidgetContainer-6dsjtOVg.mjs";
+const Oo = ({
+  dialScoreData: t,
   dataIndex: o,
-  arcColor: t,
-  arcStartAngle: a,
-  totalAngularSpan: d,
-  centerX: l,
-  centerY: i,
-  arcRadius: r,
-  innerArcRadius: s,
-  outterArcRadius: c,
-  progressEndAngle: p,
+  arcColor: n,
+  arcStartAngle: r,
+  totalAngularSpan: s,
+  centerX: i,
+  centerY: c,
+  arcRadius: l,
+  innerArcRadius: _,
+  outterArcRadius: d,
+  progressEndAngle: u,
   unitsPerSegment: h,
-  isFinacialStrengthGraph: m
+  isFinacialStrengthGraph: y
 }) => {
-  const f = E(), v = [
+  const f = $(), C = [
     { offset: "13.62%", color: f.palette.chartMono.chartMono2 },
     { offset: "36.67%", color: f.palette.chartMono.chartMono3 },
     { offset: "59.72%", color: f.palette.chartMono.chartMono4 },
     { offset: "83.46%", color: f.palette.chartMono.chartMono5 }
-  ], [T, R] = ft(
-    n,
-    d,
-    a,
+  ], [S, D] = fn(
+    t,
+    s,
+    r,
     o
-  ), [w, L] = yt(
-    T,
-    R,
+  ), [g, b] = xn(
+    S,
+    D,
     o,
     h,
-    p
-  ), K = le.arc().innerRadius(s).outerRadius(c).startAngle(T).endAngle(R).padAngle(0.02).cornerRadius(8), P = le.arc().innerRadius(s).outerRadius(c).startAngle(w).endAngle(L).padAngle(0.02).cornerRadius(8);
-  return /* @__PURE__ */ u(ie, { children: [
+    u
+  ), w = at.arc().innerRadius(_).outerRadius(d).startAngle(S).endAngle(D).padAngle(0.02).cornerRadius(8), H = at.arc().innerRadius(_).outerRadius(d).startAngle(g).endAngle(b).padAngle(0.02).cornerRadius(8);
+  return /* @__PURE__ */ a(W, { children: [
     /* @__PURE__ */ e(
       "path",
       {
-        d: K({}),
-        fill: m ? f.palette.divider : t
+        d: w({}),
+        fill: y ? f.palette.divider : n
       }
     ),
-    m && /* @__PURE__ */ e("path", { d: P({}), fill: "url(#arcGradient)" }),
+    y && /* @__PURE__ */ e("path", { d: H({}), fill: "url(#arcGradient)" }),
     /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ e(
       "linearGradient",
       {
-        gradientTransform: `rotate(5, ${l}, ${i})`,
+        gradientTransform: `rotate(5, ${i}, ${c})`,
         gradientUnits: "userSpaceOnUse",
         id: "arcGradient",
-        x1: l + r * 0.8 * Math.cos(Math.PI / 1.35),
-        x2: l - r * 0.8 * Math.cos(Math.PI / 1.35),
-        y1: i + r * 0.8 * Math.sin(Math.PI / 1.35),
-        y2: i - r * 0.8 * Math.sin(Math.PI / 1.35),
-        children: v.map((G, k) => /* @__PURE__ */ e("stop", { offset: G.offset, stopColor: G.color }, k))
+        x1: i + l * 0.8 * Math.cos(Math.PI / 1.35),
+        x2: i - l * 0.8 * Math.cos(Math.PI / 1.35),
+        y1: c + l * 0.8 * Math.sin(Math.PI / 1.35),
+        y2: c - l * 0.8 * Math.sin(Math.PI / 1.35),
+        children: C.map((N, U) => /* @__PURE__ */ e("stop", { offset: N.offset, stopColor: N.color }, U))
       }
     ) })
   ] });
-}, ve = ({
-  arcRadius: n = 100,
+}, Ft = ({
+  arcRadius: t = 100,
   healthScore: o,
-  size: t = "L",
-  dialScoreData: a,
-  minValue: d = 0,
-  maxValue: l = 100,
-  markerColor: i,
-  healthScoreStatus: r,
-  footerCenterContent: s,
-  footerLeftContent: c,
-  footerRightContent: p,
-  isFinacialStrengthGraph: h = !1
+  size: n = "L",
+  dialScoreData: r,
+  minValue: s = 0,
+  maxValue: i = 100,
+  margin: c,
+  markerColor: l,
+  healthScoreStatus: _,
+  footerCenterContent: d,
+  footerLeftContent: u,
+  footerRightContent: h,
+  isFinacialStrengthGraph: y = !1
 }) => {
-  const m = E(), f = -Math.PI / 1.35, v = Math.PI / 1.35, T = v - f, R = T / (l - d), w = (o - d) * R, L = f + w + 0.02, K = t !== "SM" ? 0.1 : 0.12, P = n, G = n * (1 - K), k = P * 2.5, O = k / 2, F = k / 2, Z = (G + P) / 2, U = o !== 25 && o !== 50 && o !== 75 && o !== 100 ? 0 : 0.12, [ee, te] = bt(Z, L, U), Ae = o / 25, ae = {
+  const f = $(), C = -Math.PI / 1.35, S = Math.PI / 1.35, D = S - C, g = D / (i - s), b = (o - s) * g, w = C + b + 0.02, H = n !== "SM" ? 0.1 : 0.12, N = t, U = t * (1 - H), L = N * 2, O = L / 2, G = L / 2, pe = (U + N) / 2, Ce = o !== 25 && o !== 50 && o !== 75 && o !== 100 ? 0 : 0.12, [ee, K] = Sn(pe, w, Ce), ve = o / 25, z = {
     L: { markerSize: 12, healthScoreFontSize: 64 },
-    M: { markerSize: 10, healthScoreFontSize: 48 },
+    M: { markerSize: 8, healthScoreFontSize: 48 },
     SM: { markerSize: 3, healthScoreFontSize: 14 }
-  }, Ie = s === 0 ? Te : we;
-  return /* @__PURE__ */ u(
-    _,
+  }, we = {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    ...c
+  }, E = d === 0 ? sn : cn, ae = n !== "SM" ? 3 : 1, _e = ae * 4, ue = z[n].markerSize * 2 + _e;
+  return /* @__PURE__ */ a(
+    p,
     {
       sx: {
-        width: k,
-        height: k,
+        width: L,
+        height: n === "SM" ? L - 7 : L,
         position: "relative",
-        alignSelf: "center"
+        alignSelf: "center",
+        overflow: "visible"
       },
       children: [
         /* @__PURE__ */ e(
-          Oe,
+          rn,
           {
-            height: k,
-            margin: { top: 0, right: 0, bottom: 0, left: 0 },
+            height: n === "SM" ? L - 7 : L,
+            margin: we,
             series: [
               {
-                data: a,
-                innerRadius: G,
-                outerRadius: P,
-                startAngle: Math.round(de(f)),
+                data: r,
+                innerRadius: U,
+                outerRadius: N,
+                startAngle: Math.round(nt(C)),
                 // Use Math.degrees to convert
-                endAngle: Math.round(de(v))
+                endAngle: Math.round(nt(S))
                 // Use Math.degrees to convert
               }
             ],
@@ -283,22 +183,22 @@ const ht = ({ list: n, onClickItem: o }) => /* @__PURE__ */ e(x, { sx: { bgcolor
               legend: { hidden: !0 }
             },
             slots: {
-              pieArc: (ce) => /* @__PURE__ */ e(
-                St,
+              pieArc: (q) => /* @__PURE__ */ e(
+                Oo,
                 {
-                  arcColor: ce.color,
-                  arcRadius: n,
-                  arcStartAngle: f,
+                  arcColor: q.color,
+                  arcRadius: t,
+                  arcStartAngle: C,
                   centerX: O,
-                  centerY: F,
-                  dataIndex: ce.dataIndex,
-                  dialScoreData: a,
-                  innerArcRadius: G,
-                  isFinacialStrengthGraph: h,
-                  outterArcRadius: P,
-                  progressEndAngle: L,
-                  totalAngularSpan: T,
-                  unitsPerSegment: Ae
+                  centerY: G,
+                  dataIndex: q.dataIndex,
+                  dialScoreData: r,
+                  innerArcRadius: U,
+                  isFinacialStrengthGraph: y,
+                  outterArcRadius: N,
+                  progressEndAngle: w,
+                  totalAngularSpan: D,
+                  unitsPerSegment: ve
                 }
               )
             },
@@ -307,205 +207,239 @@ const ht = ({ list: n, onClickItem: o }) => /* @__PURE__ */ e(x, { sx: { bgcolor
                 stroke: "none"
               }
             },
-            width: k,
-            children: o >= d && o <= l && /* @__PURE__ */ e(
+            width: L
+          }
+        ),
+        o >= s && o <= i && /* @__PURE__ */ e(
+          "svg",
+          {
+            height: ue,
+            style: {
+              position: "absolute",
+              left: O + ee - z[n].markerSize - 5,
+              top: G + K - z[n].markerSize - 5,
+              overflow: "visible"
+            },
+            viewBox: `${O + ee - z[n].markerSize - 5} ${G + K - z[n].markerSize - 5} ${ue} ${ue}`,
+            width: ue,
+            children: /* @__PURE__ */ e(
               "circle",
               {
                 cx: O + ee,
-                cy: F + te,
-                fill: m.palette.common.white,
-                r: ae[t].markerSize,
-                stroke: h ? "url(#arcGradient)" : i,
-                strokeWidth: t !== "SM" ? 3 : 1
+                cy: G + K,
+                fill: f.palette.common.white,
+                r: z[n].markerSize,
+                stroke: y ? "url(#arcGradient)" : l,
+                strokeWidth: ae
               }
             )
           }
         ),
         /* @__PURE__ */ e(
-          x,
+          k,
           {
             sx: {
               position: "absolute",
-              top: `${F}px`,
+              top: `${G}px`,
               left: `${O}px`,
               transform: "translate(-50%, -50%)",
               textAlign: "center"
             },
-            children: /* @__PURE__ */ u(
-              _,
+            children: /* @__PURE__ */ a(
+              p,
               {
                 spacing: 1,
-                sx: { alignItems: "center", justifyContent: "center", gap: t !== "M" ? 10 : 3 },
+                sx: { alignItems: "center", justifyContent: "center", gap: n !== "M" ? 10 : 3 },
                 children: [
                   /* @__PURE__ */ e(
-                    y,
+                    M,
                     {
                       sx: {
-                        fontSize: ae[t].healthScoreFontSize,
-                        lineHeight: t !== "SM" ? "48px" : "100%"
+                        fontSize: z[n].healthScoreFontSize,
+                        lineHeight: n !== "SM" ? "48px" : "100%"
                       },
                       variant: "H1",
                       children: o
                     }
                   ),
-                  t !== "SM" && /* @__PURE__ */ e(y, { sx: { fontWeight: 600 }, variant: t === "L" ? "body1" : "body2", children: r })
+                  n !== "SM" && /* @__PURE__ */ e(M, { sx: { fontWeight: 600 }, variant: n === "L" ? "body1" : "body2", children: _ })
                 ]
               }
             )
           }
         ),
-        s !== void 0 && /* @__PURE__ */ e(
-          x,
+        d !== void 0 && /* @__PURE__ */ e(
+          k,
           {
             sx: {
               position: "absolute",
-              top: `${F * 2 * 0.83}px`,
+              top: `${G * 2 * 0.83}px`,
               left: `${O}px`,
               transform: "translate(-50%, -50%)",
               textAlign: "center"
             },
-            children: typeof s == "number" ? /* @__PURE__ */ u(_, { sx: { flexDirection: "row", alignItems: "center", gap: 4 }, children: [
-              s > 0 ? /* @__PURE__ */ e(Me, { size: 16, sx: { color: "success.main" } }) : /* @__PURE__ */ e(Ie, { size: 16, sx: { color: "text.secondary" } }),
-              /* @__PURE__ */ e(
-                y,
-                {
-                  sx: {
-                    fontWeight: 600,
-                    color: s > 0 ? "success.main" : "text.secondary"
-                  },
-                  variant: "body1",
-                  children: s
-                }
-              )
-            ] }) : /* @__PURE__ */ e(y, { sx: { color: "text.secondary" }, variant: "subtitle2", children: s })
+            children: typeof d == "number" ? /* @__PURE__ */ a(
+              p,
+              {
+                sx: {
+                  flexDirection: "row",
+                  alignItems: "center",
+                  gap: 4,
+                  mt: 24
+                },
+                children: [
+                  d > 0 ? /* @__PURE__ */ e(_t, { size: 16, sx: { color: "success.main" } }) : /* @__PURE__ */ e(E, { size: 16, sx: { color: "text.secondary" } }),
+                  /* @__PURE__ */ e(
+                    M,
+                    {
+                      sx: {
+                        fontWeight: 600,
+                        color: d > 0 ? "success.main" : "text.secondary"
+                      },
+                      variant: "body1",
+                      children: d
+                    }
+                  )
+                ]
+              }
+            ) : /* @__PURE__ */ e(M, { sx: { color: "text.secondary" }, variant: "subtitle2", children: d })
           }
         ),
-        c !== void 0 && /* @__PURE__ */ e(
-          x,
+        u !== void 0 && /* @__PURE__ */ e(
+          k,
           {
             sx: {
               position: "absolute",
-              top: `${F * 2 * 0.83}px`,
+              top: `${G * 2 * 0.83}px`,
               left: `${O - O / 2}px`,
               // shift left from center
               transform: "translate(-50%, -50%)",
               textAlign: "left"
             },
-            children: /* @__PURE__ */ e(y, { variant: "body1", children: c })
+            children: /* @__PURE__ */ e(M, { variant: "body1", children: u })
           }
         ),
-        p !== void 0 && /* @__PURE__ */ e(
-          x,
+        h !== void 0 && /* @__PURE__ */ e(
+          k,
           {
             sx: {
               position: "absolute",
-              top: `${F * 2 * 0.83}px`,
+              top: `${G * 2 * 0.83}px`,
               left: `${O + O / 2}px`,
               transform: "translate(-50%, -50%)",
               textAlign: "right"
             },
-            children: /* @__PURE__ */ e(y, { variant: "body1", children: p })
+            children: /* @__PURE__ */ e(M, { variant: "body1", children: h })
           }
         )
       ]
     }
   );
-}, ke = I(
-  ({ arcRadius: n, size: o = "L", healthScore: t, footerCenterContent: a }) => {
-    const d = [
+}, Rt = v(
+  ({
+    arcRadius: t,
+    size: o = "L",
+    healthScore: n,
+    footerCenterContent: r,
+    margin: s
+  }) => {
+    const i = [
       { id: 1, label: "Group A", value: 25 },
       { id: 2, label: "Group B", value: 25 },
       { id: 3, label: "Group C", value: 25 },
       { id: 4, label: "Group D", value: 25 }
-    ], { finstrong: l } = S(), i = se(t, l);
+    ], { finstrong: c } = x(), l = je(n, c);
     return /* @__PURE__ */ e(
-      ve,
+      Ft,
       {
-        arcRadius: n,
-        dialScoreData: d,
-        footerCenterContent: o === "L" ? l.footer_center_content_updated_just_now : a,
-        healthScore: t,
-        healthScoreStatus: i.status,
+        arcRadius: t,
+        dialScoreData: i,
+        footerCenterContent: o === "L" ? c.footer_center_content_updated_just_now : r,
+        healthScore: n,
+        healthScoreStatus: l.status,
         isFinacialStrengthGraph: !0,
+        margin: s,
         size: o
       }
     );
   }
-), Ho = I(
+), Fo = v(
   ({
-    arcRadius: n,
+    arcRadius: t,
     size: o = "L",
-    healthScore: t,
-    maxValue: a = 850,
-    minValue: d = 300,
-    footerCenterContent: l
+    healthScore: n,
+    maxValue: r = 850,
+    minValue: s = 300,
+    footerCenterContent: i
   }) => {
-    const r = E().palette.mode === "dark", s = [
+    const l = $().palette.mode === "dark", _ = [
       {
         id: 1,
         label: "Poor",
-        value: 279,
-        color: r ? M.POOR : D.POOR
+        value: 29,
+        color: l ? ke.POOR : Me.POOR
       },
       {
         id: 2,
         label: "Fair",
-        value: 89,
-        color: r ? M.FAIR : D.FAIR
+        value: 25,
+        color: l ? ke.FAIR : Me.FAIR
       },
       {
         id: 3,
         label: "Good",
-        value: 69,
-        color: r ? M.GOOD : D.GOOD
+        value: 17,
+        color: l ? ke.GOOD : Me.GOOD
       },
       {
         id: 4,
         label: "Very Good",
-        value: 59,
-        color: r ? M.VERY_GOOD : D.VERY_GOOD
+        value: 17,
+        color: l ? ke.VERY_GOOD : Me.VERY_GOOD
       },
       {
         id: 5,
         label: "Exceptional",
-        value: 50,
-        color: r ? M.EXCEPTIONAL : D.EXCEPTIONAL
+        value: 12,
+        color: l ? ke.EXCEPTIONAL : Me.EXCEPTIONAL
       }
-    ], { finstrong: c } = S(), { isCopyLoaded: p } = z();
-    if (!p) return /* @__PURE__ */ e(N, {});
-    const { status: h, color: m = "none" } = gt(
-      t,
-      r,
-      c.credit_score_status
+    ], { finstrong: d } = x(), { isCopyLoaded: u } = X();
+    if (!u) return /* @__PURE__ */ e(oe, {});
+    const { status: h, color: y = "none" } = yt(
+      n,
+      l,
+      d.credit_score_status
     );
     return /* @__PURE__ */ e(
-      ve,
+      Ft,
       {
-        arcRadius: n,
-        dialScoreData: s,
-        footerCenterContent: l,
-        footerLeftContent: d,
-        footerRightContent: a,
-        healthScore: t,
+        arcRadius: t,
+        dialScoreData: _,
+        footerCenterContent: i,
+        footerLeftContent: s,
+        footerRightContent: r,
+        healthScore: n,
         healthScoreStatus: h,
-        markerColor: m,
-        maxValue: a,
-        minValue: d,
+        markerColor: y,
+        maxValue: r,
+        minValue: s,
         size: o
       }
     );
   }
-), Q = ({
-  isDashboard: n = !1,
-  hasIcon: o = !0,
-  buttonText: t,
-  title: a,
-  description: d,
+), We = ({
+  drawerType: t,
+  isDashboard: o = !1,
+  hasIcon: n = !0,
+  buttonText: r,
+  title: s,
+  titleDrawer: i,
+  description: c,
   sx: l
 }) => {
-  const [i, r] = C.useState(!1), { connect: s, finstrong: c } = S();
-  return /* @__PURE__ */ u(
-    J,
+  const [_, d] = m.useState(!1), { connect: u, finstrong: h } = x(), { config: y } = Ye();
+  return t && y.show_connections_widget_in_master ? /* @__PURE__ */ a(
+    V,
     {
       sx: {
         pb: 24,
@@ -515,715 +449,2649 @@ const ht = ({ list: n, onClickItem: o }) => /* @__PURE__ */ e(x, { sx: { bgcolor
         ...l
       },
       children: [
-        /* @__PURE__ */ u(
-          _,
+        /* @__PURE__ */ a(
+          p,
           {
             sx: {
               gap: 8,
-              ...n && { flexDirection: "row", alignItems: "center" }
+              ...o && { flexDirection: "row", alignItems: "center" }
             },
             children: [
-              o && /* @__PURE__ */ e(ue, { sx: { height: 20, width: 20 } }),
-              /* @__PURE__ */ e(H, { className: "connect-more-accounts-title", sx: { ...n && { fontSize: 15 } }, children: a || c.connect_more_accounts_title })
+              n && /* @__PURE__ */ e(ut, { sx: { height: 20, width: 20 } }),
+              /* @__PURE__ */ e(Y, { className: "connect-more-accounts-title", sx: { ...o && { fontSize: 15 } }, children: s || h.connect_more_accounts_title })
             ]
           }
         ),
         /* @__PURE__ */ e(
-          y,
+          M,
           {
             className: "connect-more-accounts-description",
             sx: { color: "text.secondary", mt: 8 },
             variant: "subtitle1",
-            children: d || c.connect_more_accounts_description
+            children: c || h.connect_more_accounts_description
           }
         ),
         /* @__PURE__ */ e(
-          q,
+          P,
           {
-            endIcon: /* @__PURE__ */ e(j, {}),
-            onClick: () => r(!0),
+            endIcon: /* @__PURE__ */ e(Z, {}),
+            onClick: () => d(!0),
             size: "small",
             sx: { p: 0, mt: 8, "&:hover": { backgroundColor: "transparent" } },
-            children: /* @__PURE__ */ e(W, { sx: { fontWeight: 600 }, variant: "body2", children: t || c.connect_more_accounts_button })
+            children: /* @__PURE__ */ e(I, { sx: { fontWeight: 600 }, variant: "body2", children: r || h.connect_more_accounts_button })
           }
         ),
-        /* @__PURE__ */ e(
-          Ce,
+        t === "connectDrawer" && /* @__PURE__ */ e(
+          re,
+          {
+            onClose: () => d(!1),
+            showConnectWidget: _,
+            title: i || u.mini_title
+          }
+        ),
+        t === "connectionsDrawer" && /* @__PURE__ */ e(
+          St,
           {
-            onClose: () => r(!1),
-            showConnectWidget: i,
-            title: s.mini_title
+            onClose: () => d(!1),
+            showConnectionsWidget: _,
+            title: i || u.mini_title
           }
         )
       ]
     }
-  );
-}, vt = I(() => {
-  const n = E(), [o, { width: t }] = qe(), { finstrong: a } = S(), { isCopyLoaded: d, isInitialized: l } = z(), { healthScore: i, healthScoreChange: r } = $(), s = n.palette.mode === "dark", c = se(i?.health_score, a);
-  return !d || !l ? /* @__PURE__ */ e(N, {}) : /* @__PURE__ */ u(J, { ref: o, sx: { p: 16 }, children: [
-    /* @__PURE__ */ e(
-      Ye,
-      {
-        action: /* @__PURE__ */ e(
-          q,
-          {
-            endIcon: /* @__PURE__ */ e(j, {}),
-            sx: {
-              fontSize: 13,
-              lineHeight: "16px",
-              fontWeight: 600,
-              color: "primary.main"
-            },
-            variant: "text",
-            children: a.financial_strength_header_action
-          }
-        ),
-        subheader: /* @__PURE__ */ e(H, { color: "text.primary", children: a.financial_strength_header }),
-        sx: {
-          p: 0,
-          "& .MuiCardHeader-content": {
-            overflow: "hidden"
-          }
-        }
-      }
-    ),
-    /* @__PURE__ */ e(_, { sx: { justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ e(
-      ke,
-      {
-        arcRadius: t <= 323 ? 73 : 154,
-        footerCenterContent: r,
-        healthScore: i?.health_score || 0,
-        size: t <= 323 ? "M" : "L"
-      }
-    ) }),
-    i?.health_score ? /* @__PURE__ */ u(
-      je,
-      {
-        sx: {
-          px: 16,
-          backgroundColor: s ? "grey.800" : "grey.50",
-          //TODO: Need to change the background color to palette (supporting both darkmode and lightmode)
-          "&.Mui-expanded": {
-            m: 0
-          },
-          "&::before": {
-            display: "none"
-          }
-        },
-        children: [
-          /* @__PURE__ */ e(
-            Ve,
-            {
-              expandIcon: /* @__PURE__ */ e(Fe, { size: 20 }),
-              sx: {
-                height: 52,
-                p: 0,
-                "&.Mui-expanded": {
-                  minHeight: 0
-                }
-              },
-              children: /* @__PURE__ */ e(y, { sx: { fontWeight: 600 }, variant: "body1", children: a.accordion_title_text })
-            }
-          ),
-          /* @__PURE__ */ e(Ue, { sx: { "&.MuiAccordionDetails-root": { padding: 0, pb: 16 } }, children: /* @__PURE__ */ e(y, { variant: "subtitle1", children: c.scoreContent }) })
-        ]
-      }
-    ) : /* @__PURE__ */ e(
-      Q,
-      {
-        buttonText: a.connect_more_accounts_title,
-        description: a.health_score_zero_description,
-        hasIcon: !1,
-        isDashboard: !0,
-        sx: {
-          backgroundColor: s ? "grey.800" : "grey.50",
-          //TODO: Need to change the background color to palette (supporting both darkmode and lightmode)
-          ".connect-more-accounts-title": {
-            fontWeight: 600,
-            lineHeight: "20px",
-            color: "text.primary"
-          },
-          ".connect-more-accounts-description": { color: "text.primary" }
-        },
-        title: a.health_score_zero_title
-      }
-    )
-  ] });
-}), kt = ({ isOpen: n, onClose: o }) => {
-  const { common: t, finstrong: a } = S(), { isMobile: d } = Se(), { updateUser: l, user: i } = Y(), [r, s] = C.useState(i.credit_score || 0), c = !isNaN(r), p = () => {
-    o(), setTimeout(() => s(i.credit_score || 0), 300);
+  ) : null;
+};
+var de = /* @__PURE__ */ ((t) => (t.SpendLessThanYouMake = "spendLessThanYouMake", t.PayBillsOnTime = "payBillsOnTime", t.SaveEnoughToLiveOn = "saveEnoughToLiveOn", t.MaintainEmergencySavings = "maintainEmergencySavings", t.HaveManageableDebt = "haveManageableDebt", t.HaveAGoodCreditScore = "haveAGoodCreditScore", t))(de || {});
+const Ro = "https://content.moneydesktop.com/storage/MD_Assets/serenity/loading_animation_final.gif", Ae = {
+  Good: 30,
+  FairMin: 31,
+  FairMax: 39,
+  OffTrack: 40
+}, Oe = {
+  Good: 100,
+  Fair: 109,
+  OffTrack: 110
+}, Po = ({ isOpen: t, onClose: o }) => {
+  const { common: n, finstrong: r } = x(), { isMobile: s } = Qe(), { updateUser: i, user: c } = J(), [l, _] = m.useState(c.credit_score || 0), d = !isNaN(l), u = () => {
+    o(), setTimeout(() => _(c.credit_score || 0), 300);
   }, h = () => {
-    !r || r === i.credit_score || l({ ...i, credit_score: r });
+    !l || l === c.credit_score || i({ ...c, credit_score: l });
   };
   return /* @__PURE__ */ e(
-    et,
+    Gn,
     {
-      copy: { close_aria: t.close_aria, title: a.edit_credit_score },
-      disablePrimaryButton: !r || !c,
-      isOpen: n,
+      copy: { close_aria: n.close_aria, title: r.edit_credit_score },
+      disablePrimaryButton: !l || !d,
+      isOpen: t,
       maxWidth: "xs",
-      onClose: p,
+      onClose: u,
       onPrimaryAction: h,
       primaryColor: "primary",
-      primaryText: t.save_button,
+      primaryText: n.save_button,
       sx: {
         "& .MuiDialog-paper": {
-          minWidth: d ? "100%" : 400
+          minWidth: s ? "100%" : 400
         }
       },
       children: /* @__PURE__ */ e(
-        Ze,
-        {
-          error: !c,
-          fullWidth: !0,
-          inputMode: "numeric",
-          inputProps: {
-            noValidate: !0,
-            pattern: "[0-9]*"
-          },
-          onChange: (m) => s(Number(m.target.value)),
-          value: c ? r : ""
-        }
-      )
-    }
-  );
-}, At = I(kt), It = ({ isOpen: n, onClose: o }) => {
-  const { finstrong: t } = S(), a = E(), { updateUser: d, user: l } = Y(), [i, r] = C.useState(l.birthday), s = (p) => {
-    r(Math.floor(new Date(p).getTime() / 1e3));
-  };
-  return /* @__PURE__ */ e(
-    V,
-    {
-      isOpen: n,
-      onClose: o,
-      onPrimaryAction: () => {
-        !i || i === l.birthday || (d({ ...l, birthday: i }), o());
-      },
-      onSecondaryAction: o,
-      title: t.date_of_birth,
-      children: /* @__PURE__ */ e(nt, { dateAdapter: tt, children: /* @__PURE__ */ e(
-        ot,
+        "form",
         {
-          disableFuture: !0,
-          onChange: s,
-          slotProps: {
-            nextIconButton: {
-              sx: {
-                color: "primary.main",
-                "&:hover": { bgcolor: oe(a.palette.primary.light, 0.1) }
-              }
-            },
-            previousIconButton: {
-              sx: {
-                color: "primary.main",
-                "&:hover": { bgcolor: oe(a.palette.primary.light, 0.1) }
-              }
-            }
-          },
-          slots: {
-            actionBar: () => null,
-            toolbar: () => null
+          onSubmit: (y) => {
+            y.preventDefault(), h(), u();
           },
-          sx: {
-            width: "100%",
-            "& .MuiIconButton-edgeEnd": {
-              color: "primary.main",
-              "&:hover": { bgcolor: oe(a.palette.primary.light, 0.1) }
+          children: /* @__PURE__ */ e(
+            Pe,
+            {
+              error: !d,
+              fullWidth: !0,
+              inputMode: "numeric",
+              inputProps: {
+                noValidate: !0,
+                pattern: "[0-9]*"
+              },
+              onChange: (y) => _(Number(y.target.value)),
+              value: d ? l : ""
             }
-          },
-          value: i ? new Date(i * 1e3) : /* @__PURE__ */ new Date()
+          )
         }
-      ) })
+      )
     }
   );
-}, Ot = I(It), Dt = ({ value: n, completeCopy: o }) => /* @__PURE__ */ u(_, { sx: { gap: 8 }, children: [
-  /* @__PURE__ */ e(_, { sx: { flexDirection: "row", gap: 4 }, children: Array.from({ length: 4 }).map((t, a) => /* @__PURE__ */ e(
-    x,
-    {
-      sx: {
-        bgcolor: a < n ? "primary.main" : "neutral.light",
-        borderRadius: "24px",
-        height: 4,
-        width: "100%"
-      }
+}, Pt = v(Po), Ee = {
+  credit_over_time_title: "Your Credit Over Time",
+  credit_over_time_zero_state_desc: "Add your credit score to start building a full picture of your credit health."
+}, Lo = ({ chartFor: t }) => {
+  const o = $(), n = o.palette.mode === "dark", { monthlySummaries: r } = R(), { user: s } = J(), { finstrong: i } = x(), [c, { width: l }] = vt(), _ = {
+    savingsOverTime: {
+      icon: /* @__PURE__ */ e(_t, { size: 48, sx: { marginBottom: 8 } }),
+      title: i.key_indicators_save.zero_state_title,
+      description: i.key_indicators_save.zero_state_description
     },
-    a
-  )) }),
-  /* @__PURE__ */ u(W, { sx: { color: "text.secondary" }, variant: "body2", children: [
-    n / 4 * 100,
-    "% ",
-    o
-  ] })
-] }), Mt = ({ isOpen: n, onClose: o }) => {
-  const { visibleFinstrongAccounts: t } = ye(), { incomeBudget: a } = be(), {
-    accounts: d,
-    common: l,
-    finstrong: i
-  } = S(), { user: r } = Y(), [s, c] = C.useState(null), h = [
-    {
-      dynamicCopy: i.add_profile_item,
-      fallbackLabel: i.monthly_income,
-      icon: /* @__PURE__ */ e(Re, {}),
-      key: A.MonthlyIncome,
-      label: i.monthly_income,
-      value: a
+    debtOverTime: {
+      icon: /* @__PURE__ */ e(ht, { size: 48, sx: { marginBottom: 8 } }),
+      title: "",
+      description: ""
     },
-    {
-      dynamicCopy: i.add_profile_item,
-      fallbackLabel: i.date_of_birth,
-      icon: /* @__PURE__ */ e(Pe, {}),
-      key: A.DateOfBirth,
-      label: i.date_of_birth,
-      value: r.birthday
+    creditOverTime: {
+      icon: /* @__PURE__ */ e(Ke, { size: 48, sx: { marginBottom: 8 } }),
+      title: Ee.credit_over_time_title,
+      description: Ee.credit_over_time_zero_state_desc
+    }
+  }[t], u = {
+    savingsOverTime: {
+      title: i.key_indicators_save.savings_over_time,
+      valueKey: "available_cash"
     },
-    {
-      dynamicCopy: i.add_profile_item,
-      fallbackLabel: i.credit_score,
-      icon: /* @__PURE__ */ e(he, {}),
-      key: A.CreditScore,
-      label: i.credit_score,
-      value: r.credit_score
+    debtOverTime: {
+      title: i.key_indicators_borrow.have_manageable_debt_drawer.debt_over_time,
+      valueKey: "debt_balance"
     },
-    {
-      fallbackLabel: i.connect_your_accounts,
-      icon: /* @__PURE__ */ e(ue, {}),
-      key: A.Connections,
-      label: i.connections,
-      value: t.length > 0 ? b(
-        i.connected_account,
-        String(t.length),
-        t.length > 1 ? i.accounts : i.account
-      ) : void 0
+    creditOverTime: {
+      title: Ee.credit_over_time_title,
+      valueKey: "credit_score"
     }
-  ].map((m) => xt(m));
-  return /* @__PURE__ */ u(V, { isOpen: n, onClose: o, title: i.financial_profile, children: [
-    /* @__PURE__ */ u(_, { sx: { gap: 20, p: 24 }, children: [
-      /* @__PURE__ */ u(_, { sx: { gap: 8 }, children: [
-        /* @__PURE__ */ e(H, { children: i.your_financial_profile }),
-        /* @__PURE__ */ e(y, { children: i.financial_profile_description })
-      ] }),
-      /* @__PURE__ */ e(
-        Dt,
-        {
-          completeCopy: i.complete,
-          value: h.reduce((m, f) => m + (f.isComplete ? 1 : 0), 0)
-        }
-      )
-    ] }),
-    /* @__PURE__ */ e(_t, { list: h, onClickItem: c }),
-    /* @__PURE__ */ e(x, { sx: { p: 24 }, children: /* @__PURE__ */ e(
-      Q,
-      {
-        description: i.connect_more_accounts_to_view_more_accurate_financial_picture,
-        isDashboard: !0,
-        title: i.dont_see_all_your_accounts
-      }
-    ) }),
-    /* @__PURE__ */ e(
-      V,
-      {
-        isOpen: s === A.MonthlyIncome,
-        onClose: () => c(null),
-        title: l.settings,
-        children: /* @__PURE__ */ e(Qe, {})
-      }
-    ),
-    /* @__PURE__ */ e(Ot, { isOpen: s === A.DateOfBirth, onClose: () => c(null) }),
-    /* @__PURE__ */ e(At, { isOpen: s === A.CreditScore, onClose: () => c(null) }),
+  }[t], h = Cn(r, u.valueKey), y = Math.max(...r.map((w) => w[u.valueKey])), f = () => y >= 1e6 ? { formatter: "0.000a", leftMargin: 55 } : y >= 1e3 ? { formatter: "0a", leftMargin: 35 } : { formatter: "0a", leftMargin: 30 }, { formatter: C, leftMargin: S } = f(), D = u.title, g = t === "creditOverTime";
+  let b;
+  if (g) {
+    const { color: w } = yt(
+      s?.credit_score ?? 0,
+      n,
+      i.credit_score_status
+    );
+    b = w;
+  }
+  return /* @__PURE__ */ e(V, { ref: c, sx: { backgroundColor: "background.paper" }, children: h.length >= 1 ? /* @__PURE__ */ a(p, { gap: 8, sx: { pl: 18 }, children: [
+    /* @__PURE__ */ e(M, { sx: { pb: 8, pt: 16 }, variant: "h3", children: D }),
     /* @__PURE__ */ e(
-      Je,
+      qe,
       {
-        onClose: () => c(null),
-        showConnectionsWidget: s === A.Connections,
-        title: d.manage_connections
+        areaColor: b,
+        axisColor: o.palette.divider,
+        baseline: "min",
+        chartFor: t,
+        colors: [o.palette.primary.main],
+        curveType: g ? "linear" : "natural",
+        datasets: h ? [h] : [],
+        height: 244,
+        labelFontColor: g ? "text.primary" : "",
+        labelFontSize: g ? 13 : void 0,
+        labels: [i.key_indicators_label],
+        margin: { left: S, top: g ? 25 : 15, right: 20 },
+        markStyles: (w) => g ? {
+          markLabelStyles: {
+            marginLeft: 16,
+            transform: w === h.length - 1 ? "translateX(-16px)" : "translateX(16px)",
+            fontWeight: 600
+          },
+          stroke: b
+        } : {},
+        maxRange: g ? 850 : void 0,
+        minRange: g ? 300 : void 0,
+        showArea: !0,
+        showAverage: !g,
+        showMark: !g,
+        showMarkLabel: g,
+        showXAxis: !0,
+        showYAxis: g,
+        showYAxisTicks: g,
+        useCustomMark: !0,
+        valueFormatterString: g ? void 0 : C,
+        width: l < 342 ? l - 48 : 342
       }
     )
+  ] }) : /* @__PURE__ */ a(p, { gap: 8, sx: { alignItems: "center", p: 24, pb: 48 }, children: [
+    _.icon,
+    /* @__PURE__ */ e(M, { fontWeight: 600, variant: "body1", children: _.title }),
+    /* @__PURE__ */ e(M, { align: "center", variant: "subtitle1", children: _.description })
+  ] }) });
+}, Ze = v(Lo), Bo = () => {
+  const { healthScoreChange: t } = R(), { finstrong: o } = x(), { user: n } = J(), { availableWidth: r } = Pn(), { isSmallMobile: s } = Qe(r), [i, c] = m.useState(!1);
+  return /* @__PURE__ */ a(k, { children: [
+    /* @__PURE__ */ a(p, { sx: { gap: 28 }, children: [
+      /* @__PURE__ */ e(
+        Fo,
+        {
+          arcRadius: s ? 124 : 154,
+          footerCenterContent: t,
+          healthScore: n.credit_score ?? 0,
+          size: s ? "M" : "L"
+        }
+      ),
+      /* @__PURE__ */ e(P, { onClick: () => c(!0), variant: "contained", children: o.credit_score_updated_score }),
+      /* @__PURE__ */ e(Ze, { chartFor: "creditOverTime" })
+    ] }),
+    /* @__PURE__ */ e(Pt, { isOpen: i, onClose: () => c(!1) })
   ] });
-}, Tt = I(Mt), X = {
-  creditScore: {
-    poor: 600,
-    good: 720
-  },
-  daysOfCashOnHand: {
-    poor: 30,
-    good: 90
-  },
-  debtToIncomeRatio: {
-    poor: 40,
-    good: 30
-  },
-  emergencySavings: {
-    poor: 750,
-    good: 1e3
-  },
-  spendToIncomeRatio: {
-    poor: 110,
-    good: 100
-  }
-}, g = {
-  GOOD: "Good",
-  FAIR: "Fair",
-  OFF_TRACK: "Off Track",
-  MISSING: "Missing"
-}, B = ({
-  title: n,
-  description: o,
-  cardState: t = g.MISSING,
-  stateTitle: a
-}) => {
-  const d = {
-    [g.GOOD]: { backgroundColor: "success.lighter", color: "success.main" },
-    [g.FAIR]: { backgroundColor: "warning.lighter", color: "warning.main" },
-    [g.OFF_TRACK]: { backgroundColor: "error.lighter", color: "error.main" },
-    [g.MISSING]: { backgroundColor: "divider", color: "text.secondary" }
+}, Wo = v(Bo), $e = ({ status: t }) => {
+  const { finstrong: o } = x(), n = vn(wn[t]), r = {
+    GOOD: o.key_indicators_good,
+    FAIR: o.key_indicators_fair,
+    OFF_TRACK: o.key_indicators_off_track,
+    MISSING: o.key_indicators_missing
   }[t];
-  return /* @__PURE__ */ u(
-    _,
+  return /* @__PURE__ */ e(
+    Hn,
     {
-      alignItems: "center",
-      flexDirection: "row",
-      gap: 12,
-      justifyContent: "space-between",
+      label: /* @__PURE__ */ e(
+        M,
+        {
+          fontWeight: 700,
+          sx: { color: n.color, minHeight: 12 },
+          uppercase: !0,
+          variant: "tiny",
+          children: r
+        }
+      ),
+      size: "small",
       sx: {
-        p: 16,
-        border: "1px solid",
-        borderColor: "divider",
-        borderRadius: 2
+        bgcolor: n.backgroundColor,
+        height: 16
       },
-      children: [
-        /* @__PURE__ */ u(x, { sx: { minHeight: 48 }, children: [
-          /* @__PURE__ */ u(_, { flexDirection: "row", gap: 4, children: [
-            /* @__PURE__ */ e(y, { fontWeight: 600, sx: { mb: 8 }, truncate: !0, variant: "body1", children: n }),
-            /* @__PURE__ */ e(
-              x,
-              {
-                sx: {
-                  borderRadius: 3,
-                  backgroundColor: d.backgroundColor,
-                  px: 8,
-                  py: 2,
-                  height: 16
-                },
-                children: /* @__PURE__ */ e(y, { fontWeight: 700, sx: { minHeight: 12 }, uppercase: !0, variant: "tiny", children: a })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ e(y, { color: "secondary", variant: "subtitle2", children: o })
-        ] }),
-        /* @__PURE__ */ e(x, { children: /* @__PURE__ */ e(_e, { color: "secondary", name: "chevron_right", size: 24 }) })
-      ]
+      variant: "filled"
     }
   );
-}, wt = () => {
-  const { healthScore: n } = $(), { finstrong: o } = S(), { key_indicators_spend: t } = o, a = (r) => {
-    const { good: s, poor: c } = X.spendToIncomeRatio;
-    let p = g.MISSING, h = t.ratio_missing_description, m = o.key_indicators_missing;
-    return r !== null && (r < s ? (p = g.GOOD, h = b(t.ratio_good_description, r), m = o.key_indicators_good) : r >= s && r < c ? (p = g.FAIR, h = b(t.ratio_fair_description, r), m = o.key_indicators_fair) : r >= c && (p = g.OFF_TRACK, h = b(t.ratio_off_track_description, r), m = o.key_indicators_off_track)), {
-      cardState: p,
-      description: h,
-      title: t.ratio_card_title,
-      stateTitle: m
-    };
-  }, d = (r) => {
-    let s = g.MISSING, c = t.count_missing_description, p = o.key_indicators_missing;
-    return r !== null && (r === 0 ? (s = g.GOOD, c = t.count_good_description, p = o.key_indicators_good) : r >= 1 && (s = g.OFF_TRACK, c = t.count_off_track_description, p = o.key_indicators_off_track)), {
-      cardState: s,
-      description: c,
-      title: t.count_card_title,
-      stateTitle: p
-    };
-  }, { spendToIncomeRatio: l, spendFeeCount: i } = C.useMemo(() => {
-    const r = n.spend_to_income_ratio !== null ? Math.round(n.spend_to_income_ratio * 100) : null, s = a(r), c = d(n.spending_fee_transaction_count);
-    return { spendToIncomeRatio: s, spendFeeCount: c };
-  }, [
-    n.spend_to_income_ratio,
-    n.spending_fee_transaction_count,
-    t,
-    o
-  ]);
-  return /* @__PURE__ */ u(_, { direction: "column", gap: 24, sx: { p: 8, pt: 24 }, children: [
-    /* @__PURE__ */ e(
-      B,
+}, $o = () => {
+  const { finstrong: t } = x(), { user: o } = J(), n = bt(o.credit_score ?? null);
+  return /* @__PURE__ */ a(p, { sx: { flexDirection: "row", justifyContent: "space-between" }, children: [
+    /* @__PURE__ */ e(Y, { children: t.credit_score_keep_strong_credit_score }),
+    /* @__PURE__ */ e($e, { status: n })
+  ] });
+}, Go = v($o), zo = ({
+  additionalContent: t,
+  connectTitle: o,
+  connectDescription: n,
+  children: r,
+  description: s,
+  drawerTitle: i,
+  isOpen: c,
+  loadConnectAccountsCard: l = !0,
+  onClose: _,
+  stickyComponent: d,
+  title: u,
+  drawerType: h
+}) => {
+  const { finstrong: y } = x(), { isCopyLoaded: f } = X();
+  return f ? /* @__PURE__ */ e(ne, { isOpen: c, onClose: _, title: i || y.key_indicators, children: /* @__PURE__ */ a(p, { sx: { backgroundColor: "background.default", height: "100%" }, children: [
+    (u || s) && /* @__PURE__ */ a(
+      p,
       {
-        cardState: l.cardState,
-        description: l.description,
-        stateTitle: l.stateTitle,
-        title: l.title
+        sx: {
+          backgroundColor: "background.paper",
+          gap: 8,
+          p: 24
+        },
+        children: [
+          u && typeof u == "string" ? /* @__PURE__ */ e(Y, { children: u }) : u,
+          s && /* @__PURE__ */ e(M, { sx: { lineHeight: "24px" }, children: s })
+        ]
+      }
+    ),
+    d && /* @__PURE__ */ e(
+      k,
+      {
+        sx: {
+          position: "sticky",
+          top: 0,
+          zIndex: 1
+        },
+        children: d
+      }
+    ),
+    t && /* @__PURE__ */ e(k, { children: t }),
+    /* @__PURE__ */ a(p, { sx: { bgcolor: "background.default", gap: 24, p: 24 }, children: [
+      r,
+      l && /* @__PURE__ */ e(
+        We,
+        {
+          description: n,
+          drawerType: h,
+          isDashboard: !0,
+          sx: { backgroundColor: "background.paper" },
+          title: o
+        }
+      )
+    ] })
+  ] }) }) : /* @__PURE__ */ e(oe, {});
+}, Lt = v(zo), Eo = ({
+  onClick: t,
+  shouldShowBalance: o = !0,
+  loadAccounts: n
+}) => {
+  const { config: r } = Ye(), { accounts: s } = x(), { selectedAccounts: i } = X(), c = m.useCallback(
+    (_) => {
+      t?.(_);
+    },
+    [t]
+  ), l = m.useMemo(
+    () => Array.from(new Set(i.map((_) => _.account_type))).filter(
+      (_) => n ? n.includes(_) : !0
+    ),
+    [i, n]
+  );
+  return i.length ? /* @__PURE__ */ e(m.Fragment, { children: l.map((_) => {
+    const { accountsForType: d, totalBalanceForType: u } = i.reduce(
+      (h, y) => (y.account_type === _ && (h.accountsForType.push(y), h.totalBalanceForType += y.balance || 0), h),
+      { accountsForType: [], totalBalanceForType: 0 }
+    );
+    return /* @__PURE__ */ a(
+      Ne,
+      {
+        subheader: /* @__PURE__ */ e(Kn, { sx: { pb: 4, position: "static", pt: 12, px: 24 }, children: /* @__PURE__ */ a(p, { sx: { flexDirection: "row", justifyContent: "space-between" }, children: [
+          /* @__PURE__ */ e(I, { bold: !0, variant: "caption", children: s.account_types[_] }),
+          o && /* @__PURE__ */ e(I, { bold: !0, variant: "caption", children: B(u, "0,0.00") })
+        ] }) }),
+        sx: { bgcolor: "background.paper" },
+        children: [
+          d.map((h, y) => {
+            const { firstValue: f } = kt(h, s), C = Ct(h, {
+              allowNickname: r?.show_account_nicknames_in_master
+            }), S = /* @__PURE__ */ a(W, { children: [
+              /* @__PURE__ */ e(wt, { children: /* @__PURE__ */ e(gt, { alt: "MX", institutionGuid: h.institution_guid ?? "" }) }),
+              /* @__PURE__ */ e(
+                ye,
+                {
+                  primary: `${C}${h.account_number ? ` *${h.account_number}` : ""}`,
+                  primaryTypographyProps: { noWrap: !0, pr: 4, variant: "body1" }
+                }
+              ),
+              o && /* @__PURE__ */ e(M, { bold: !0, variant: "body2", children: B(f ?? 0, "0,0.00") })
+            ] });
+            return /* @__PURE__ */ a(m.Fragment, { children: [
+              /* @__PURE__ */ e(ge, { sx: { px: t ? 0 : 24 }, children: t ? /* @__PURE__ */ e(Nn, { onClick: () => c(h), children: S }) : S }),
+              y !== d.length - 1 && /* @__PURE__ */ e(le, { variant: "inset" })
+            ] }, h.guid);
+          }),
+          /* @__PURE__ */ e(le, {})
+        ]
+      },
+      _
+    );
+  }) }) : null;
+}, Bt = v(Eo), Ho = ({ loadAccounts: t, loadMoreLabel: o }) => {
+  const n = $(), { config: r } = Ye(), { connect: s, finstrong: i } = x(), { accounts: c } = x(), { selectedAccounts: l } = X(), [_, d] = m.useState(!1), [u, h] = m.useState(!1), y = m.useMemo(
+    () => l.filter(
+      (S) => t ? t.includes(S.account_type) : !0
+    ),
+    [l, t]
+  ), f = m.useMemo(() => y.slice(0, 3), [y]), C = (S) => {
+    const { firstValue: D } = kt(S, c);
+    return D;
+  };
+  return y.length >= 1 ? /* @__PURE__ */ a(W, { children: [
+    /* @__PURE__ */ e(k, { sx: { border: `1px solid ${n.palette.divider}`, borderRadius: 2 }, children: f.map((S, D) => /* @__PURE__ */ a(m.Fragment, { children: [
+      /* @__PURE__ */ a(ge, { sx: { px: 24 }, children: [
+        /* @__PURE__ */ e(wt, { children: /* @__PURE__ */ e(gt, { alt: "MX", institutionGuid: S.institution_guid ?? "" }) }),
+        /* @__PURE__ */ e(
+          ye,
+          {
+            primary: `${Ct(S, {
+              allowNickname: r?.show_account_nicknames_in_master
+            })}
+              ${S.account_number ? ` *${S.account_number}` : ""}`,
+            primaryTypographyProps: { noWrap: !0, pr: 4, variant: "body1" }
+          }
+        ),
+        /* @__PURE__ */ e(M, { bold: !0, variant: "body2", children: B(C(S), "0,0.00") })
+      ] }),
+      D < f.length - 1 && /* @__PURE__ */ e(le, { variant: "inset" })
+    ] }, S.guid)) }),
+    y.length > 3 && /* @__PURE__ */ a(W, { children: [
+      /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e(
+        P,
+        {
+          endIcon: /* @__PURE__ */ e(Z, {}),
+          onClick: () => d(!0),
+          size: "small",
+          sx: { my: 0, px: 16, py: 12, width: "100%" },
+          children: /* @__PURE__ */ a(I, { bold: !0, variant: "body1", children: [
+            y.length - 3,
+            " ",
+            o
+          ] })
+        }
+      ) }),
+      /* @__PURE__ */ e(ne, { isOpen: _, onClose: () => d(!1), title: i.accounts, children: /* @__PURE__ */ e(Bt, { loadAccounts: t }) })
+    ] })
+  ] }) : /* @__PURE__ */ a(W, { children: [
+    /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e(
+      P,
+      {
+        onClick: () => h(!0),
+        size: "small",
+        sx: { my: 0, px: 16, py: 12, width: "100%" },
+        variant: "contained",
+        children: /* @__PURE__ */ e(I, { bold: !0, variant: "body1", children: i.connect_more_accounts_button })
+      }
+    ) }),
+    /* @__PURE__ */ e(
+      re,
+      {
+        onClose: () => h(!1),
+        showConnectWidget: u,
+        title: s.mini_title
+      }
+    )
+  ] });
+}, Wt = v(Ho), Se = ({ balance: t, title: o, sx: n }) => /* @__PURE__ */ a(
+  p,
+  {
+    sx: {
+      alignItems: "center",
+      backgroundColor: "background.default",
+      borderRadius: 2,
+      height: 72,
+      justifyContent: "center",
+      p: 12,
+      ...n
+    },
+    children: [
+      typeof t == "number" ? /* @__PURE__ */ e(M, { variant: "h2", children: B(t, "0,0.00") }) : t,
+      /* @__PURE__ */ e(M, { color: "text.secondary", fontWeight: "400", variant: "subtitle2", children: o })
+    ]
+  }
+);
+var A = /* @__PURE__ */ ((t) => (t[t.ConnectAccounts = 1] = "ConnectAccounts", t[t.MonthlyIncome = 2] = "MonthlyIncome", t[t.Birthday = 3] = "Birthday", t[t.CreditScore = 4] = "CreditScore", t))(A || {}), De = /* @__PURE__ */ ((t) => (t[t.Months = 1] = "Months", t[t.Years = 2] = "Years", t[t.Days = 3] = "Days", t))(De || {}), Q = /* @__PURE__ */ ((t) => (t[t.Monthly = 1] = "Monthly", t[t.BiWeekly = 2] = "BiWeekly", t[t.Weekly = 3] = "Weekly", t[t.Daily = 4] = "Daily", t))(Q || {});
+const No = ({ total: t }) => {
+  const { finstrong: o } = x(), n = [
+    { id: Q.Monthly, label: o.maintain_emergency_savings_monthly },
+    { id: Q.BiWeekly, label: o.maintain_emergency_savings_bi_weekly },
+    { id: Q.Weekly, label: o.maintain_emergency_savings_weekly },
+    { id: Q.Daily, label: o.maintain_emergency_savings_daily }
+  ], r = {
+    [Q.Monthly]: o.maintain_emergency_savings_estimated_period_monthly,
+    [Q.BiWeekly]: o.maintain_emergency_savings_estimated_period_bi_weekly,
+    [Q.Weekly]: o.maintain_emergency_savings_estimated_period_weekly,
+    [Q.Daily]: o.maintain_emergency_savings_estimated_period_daily
+  }, s = [
+    { id: De.Months, label: o.maintain_emergency_savings_months },
+    { id: De.Years, label: o.maintain_emergency_savings_years },
+    { id: De.Days, label: o.maintain_emergency_savings_days }
+  ], i = Math.ceil((t + 1) / 1e3) * 1e3, [c, l] = m.useState(0), [_, d] = m.useState(ot(t)), [u, h] = m.useState(
+    ot(t)
+  ), [y, f] = m.useState(i), [C, S] = m.useState(kn(t)), [D, g] = m.useState(De.Months);
+  m.useEffect(() => {
+    l(
+      rt({
+        contribution: u,
+        goalAmount: y,
+        goalPeriod: C,
+        targetPeriod: D,
+        totalSaved: t
+      })
+    ), d(u);
+  }, []);
+  const b = (w) => {
+    w.preventDefault(), l(
+      rt({
+        contribution: u,
+        goalAmount: y,
+        goalPeriod: C,
+        targetPeriod: D,
+        totalSaved: t
+      })
+    ), d(u);
+  };
+  return /* @__PURE__ */ e(V, { children: /* @__PURE__ */ e("form", { onSubmit: b, children: /* @__PURE__ */ a(p, { sx: { gap: 24, pb: 24, pt: 16, px: 16 }, children: [
+    /* @__PURE__ */ e(
+      Se,
+      {
+        balance: /* @__PURE__ */ a(p, { sx: { flexDirection: "row", height: 32 }, children: [
+          /* @__PURE__ */ e(I, { variant: "h2", children: B(c, "0,0") }),
+          /* @__PURE__ */ a(I, { sx: { alignSelf: "end", height: 24 }, variant: "subtitle2", children: [
+            "/",
+            r[_]
+          ] })
+        ] }),
+        title: o.maintain_emergency_savings_estimated_contribution
+      }
+    ),
+    /* @__PURE__ */ e(
+      Pe,
+      {
+        "aria-label": o.maintain_emergency_savings_savings_goal,
+        helperText: j(
+          o.maintain_emergency_savings_suggested_goal,
+          B(i, "0,0")
+        ),
+        inputProps: {
+          noValidate: !0,
+          pattern: "[0-9]*"
+        },
+        label: o.maintain_emergency_savings_savings_goal,
+        onChange: (w) => {
+          w.target.value && f(Number(w.target.value.replace(/[^0-9]/g, "")));
+        },
+        value: y ? B(y, "0,0") : ""
+      }
+    ),
+    /* @__PURE__ */ e(
+      it,
+      {
+        label: o.maintain_emergency_savings_how_often_contribute,
+        onChange: h,
+        options: n,
+        required: !0,
+        value: u
+      }
+    ),
+    /* @__PURE__ */ a(p, { sx: { flexDirection: "row" }, children: [
+      /* @__PURE__ */ e(
+        Pe,
+        {
+          "aria-label": o.maintain_emergency_savings_meet_your_goal_within,
+          fullWidth: !0,
+          inputProps: {
+            noValidate: !0,
+            pattern: "[0-9]*"
+          },
+          label: o.maintain_emergency_savings_meet_your_goal_within,
+          onChange: (w) => {
+            isNaN(Number(w.target.value)) || S(Number(w.target.value));
+          },
+          sx: {
+            "& .MuiInputBase-root": {
+              borderBottomRightRadius: 0,
+              borderTopRightRadius: 0,
+              fieldset: {
+                borderRightWidth: 0.5
+              }
+            }
+          },
+          value: C
+        }
+      ),
+      /* @__PURE__ */ e(
+        k,
+        {
+          sx: {
+            "& .MuiInputBase-root": {
+              borderBottomLeftRadius: 0,
+              borderTopLeftRadius: 0,
+              fieldset: {
+                borderLeftWidth: 0.5
+              }
+            }
+          },
+          children: /* @__PURE__ */ e(it, { label: "", onChange: g, options: s, value: D })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(P, { fullWidth: !0, onClick: b, type: "submit", variant: "contained", children: o.maintain_emergency_savings_calculate })
+  ] }) }) });
+}, Ko = v(No), jo = () => {
+  const { savingsAccounts: t } = xe(), { finstrong: o } = x(), [n, r] = m.useState(!1), s = m.useMemo(
+    () => t.reduce((i, c) => i + (c.balance ?? 0), 0),
+    [t]
+  );
+  return /* @__PURE__ */ a(p, { sx: { gap: 24 }, children: [
+    /* @__PURE__ */ e(V, { sx: { bgcolor: "background.paper", p: 16 }, children: /* @__PURE__ */ a(p, { sx: { gap: 16 }, children: [
+      /* @__PURE__ */ e(Se, { balance: s, title: o.maintain_emergency_savings_your_savings }),
+      t.length ? /* @__PURE__ */ e(
+        Wt,
+        {
+          loadAccounts: [He.SAVINGS],
+          loadMoreLabel: o.connect_more_accounts_button
+        }
+      ) : /* @__PURE__ */ e(P, { onClick: () => r(!0), variant: "contained", children: o.connect_more_accounts_button })
+    ] }) }),
+    /* @__PURE__ */ e(Ko, { total: s }),
+    /* @__PURE__ */ e(
+      re,
+      {
+        onClose: () => r(!1),
+        showConnectWidget: n,
+        title: o.connect_more_accounts_button
+      }
+    )
+  ] });
+}, Yo = v(jo), Ge = v(
+  ({ label: t, value: o, status: n, bottomComponent: r, statusBarData: s = [] }) => {
+    const i = {
+      GOOD: {
+        progressBarColor: "primary.main"
+      },
+      FAIR: {
+        progressBarColor: "warning.main"
+      },
+      OFF_TRACK: {
+        progressBarColor: "error.main"
+      },
+      MISSING: {
+        progressBarColor: "text.secondary"
+      }
+    }[n], c = s.map((l, _) => s.length === 2 ? {
+      color: _ === 0 ? "primary.main" : l.color || i?.progressBarColor,
+      percentage: l.percentage
+    } : {
+      color: l.color || i?.progressBarColor,
+      percentage: l.percentage
+    });
+    return /* @__PURE__ */ a(
+      p,
+      {
+        sx: {
+          backgroundColor: "background.paper",
+          gap: 8,
+          p: 24,
+          pt: 0,
+          borderBottom: "1px solid",
+          borderColor: "divider"
+        },
+        children: [
+          /* @__PURE__ */ a(p, { sx: { gap: 2 }, children: [
+            /* @__PURE__ */ e(I, { variant: "body2", children: t }),
+            /* @__PURE__ */ a(
+              p,
+              {
+                sx: {
+                  alignItems: "center",
+                  flexDirection: "row",
+                  gap: 12,
+                  justifyContent: "space-between"
+                },
+                children: [
+                  /* @__PURE__ */ e(Be, { children: o }),
+                  /* @__PURE__ */ e($e, { status: n })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ a(p, { children: [
+            /* @__PURE__ */ e(Yn, { data: c, height: 16 }),
+            r
+          ] })
+        ]
+      }
+    );
+  }
+), Vo = {
+  sticky_label: "You have saved"
+}, Xo = ["$0", "$250", "$500", "$750", "$1k"], qo = () => {
+  const { healthScore: t } = R(), o = Math.round(t.emergency_savings_on_hand ?? NaN) || null, n = Mn(o), r = ft(o);
+  return /* @__PURE__ */ e(
+    Ge,
+    {
+      bottomComponent: /* @__PURE__ */ e(p, { sx: { flexDirection: "row", justifyContent: "space-between" }, children: Xo.map((s) => /* @__PURE__ */ a(p, { sx: { alignItems: "center", height: 24, width: 30 }, children: [
+        /* @__PURE__ */ e(
+          le,
+          {
+            orientation: "vertical",
+            sx: {
+              borderWidth: 0.5,
+              height: 8,
+              mt: 2
+            }
+          }
+        ),
+        /* @__PURE__ */ e(I, { variant: "caption", children: s })
+      ] }, s)) }),
+      label: Vo.sticky_label,
+      status: r,
+      statusBarData: [
+        {
+          percentage: n
+        }
+      ],
+      value: B(o ?? 0, "0,0.00")
+    }
+  );
+}, Uo = v(qo), ze = ({
+  transactions: t = [],
+  amountColor: o = "success.main",
+  amountPosition: n = "center",
+  formatDate: r = It,
+  secondaryIcon: s
+}) => {
+  const i = $(), { connect: c, finstrong: l, categories: _ } = x(), [d, u] = m.useState(!1), [h, y] = m.useState(!1), { getCategoryName: f } = Ve(), C = 3, S = t.length > C, D = t.length - C;
+  let g = t;
+  return S && (g = t.map((b) => ({
+    ...b,
+    category: _.default_categories[b.top_level_category_guid]?.replace(
+      /&amp;/g,
+      "&"
+    ) ?? f(b.top_level_category_guid)
+  })).sort((b, w) => w.date - b.date)), !t || t.length === 0 ? /* @__PURE__ */ a(W, { children: [
+    /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e(
+      P,
+      {
+        onClick: () => y(!0),
+        size: "small",
+        sx: { my: 0, px: 16, py: 12, width: "100%" },
+        variant: "contained",
+        children: /* @__PURE__ */ e(I, { bold: !0, variant: "body1", children: l.connect_more_accounts_button })
+      }
+    ) }),
+    /* @__PURE__ */ e(
+      re,
+      {
+        onClose: () => y(!1),
+        showConnectWidget: h,
+        title: c.mini_title
+      }
+    )
+  ] }) : /* @__PURE__ */ a(p, { sx: { gap: 16 }, children: [
+    /* @__PURE__ */ e(k, { sx: { border: `1px solid ${i.palette.divider}`, borderRadius: 2 }, children: t.slice(0, C).sort((b, w) => w.date - b.date).map((b, w) => /* @__PURE__ */ a(
+      p,
+      {
+        sx: {
+          alignItems: "center",
+          flexDirection: "row",
+          gap: 16,
+          pl: 24,
+          pt: 14
+        },
+        children: [
+          /* @__PURE__ */ e(p, { sx: { pb: 14 }, children: /* @__PURE__ */ e(
+            yn,
+            {
+              categoryGuid: b.top_level_category_guid || "",
+              merchantGuid: b.merchant_guid || "",
+              size: 32
+            }
+          ) }),
+          /* @__PURE__ */ a(
+            p,
+            {
+              sx: {
+                alignItems: n,
+                flexDirection: "row",
+                gap: 12,
+                justifyContent: "space-between",
+                ...w < Math.min(t.length, C) - 1 && {
+                  borderBottom: `1px solid ${i.palette.divider}`
+                },
+                pb: 14,
+                pr: 24,
+                width: "100%"
+              },
+              children: [
+                /* @__PURE__ */ a(p, { sx: { gap: 4 }, children: [
+                  /* @__PURE__ */ e(M, { bold: !0, variant: "body1", children: b.description }),
+                  /* @__PURE__ */ a(p, { sx: { flexDirection: "row", alignItems: "center", gap: 4 }, children: [
+                    !!s && s,
+                    /* @__PURE__ */ e(I, { variant: "caption", children: r(b.date) })
+                  ] })
+                ] }),
+                /* @__PURE__ */ e(M, { bold: !0, sx: { color: o, flexShrink: 0 }, variant: "body1", children: B(b.amount, "0,0.00") })
+              ]
+            },
+            b.guid || w
+          )
+        ]
+      },
+      w
+    )) }),
+    S && /* @__PURE__ */ a(W, { children: [
+      /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e(
+        P,
+        {
+          endIcon: /* @__PURE__ */ e(Z, {}),
+          onClick: () => u(!0),
+          size: "small",
+          sx: { my: 0, px: 16, py: 12, width: "100%" },
+          children: /* @__PURE__ */ a(I, { bold: !0, variant: "body1", children: [
+            D,
+            " ",
+            l.key_indicators_borrow.have_manageable_debt_drawer.have_manageable_debt_more_transactions
+          ] })
+        }
+      ) }),
+      /* @__PURE__ */ e(
+        ne,
+        {
+          isOpen: d,
+          onClose: () => u(!1),
+          title: l.key_indicators_borrow.have_manageable_debt_drawer.have_manageable_debt_transactions,
+          children: /* @__PURE__ */ e(Vn, { transaction: g })
+        }
+      )
+    ] })
+  ] });
+}, Qo = () => {
+  const {
+    finstrong: {
+      key_indicators_spend: { pay_bills_on_time_drawer: t }
+    }
+  } = x(), { getSpendingFeeTransactions: o, allTransactions: n } = R();
+  return m.useEffect(() => {
+    o().finally();
+  }, []), /* @__PURE__ */ e(W, { children: n.spendingFee.length === 0 ? /* @__PURE__ */ a(
+    V,
+    {
+      sx: {
+        backgroundColor: "background.paper",
+        pb: 48,
+        pt: 32,
+        px: 24,
+        textAlign: "center",
+        width: "100%"
+      },
+      children: [
+        /* @__PURE__ */ e(ln, { filled: !0, size: 48, sx: { color: "success.main" } }),
+        /* @__PURE__ */ a(p, { sx: { alignItems: "center", gap: 4, pt: 24 }, children: [
+          /* @__PURE__ */ e(Y, { children: t.pay_bills_on_time_zero_fees_title }),
+          /* @__PURE__ */ e(M, { variant: "subtitle1", children: t.pay_bills_on_time_zero_fees_description })
+        ] })
+      ]
+    }
+  ) : /* @__PURE__ */ a(
+    V,
+    {
+      sx: {
+        p: 16,
+        width: "100%",
+        backgroundColor: "background.paper"
+      },
+      children: [
+        /* @__PURE__ */ e(Y, { sx: { textAlign: "left", pb: 8 }, children: t.pay_bills_on_time_sticky_fee_count }),
+        /* @__PURE__ */ e(
+          ze,
+          {
+            amountColor: "text.primary",
+            amountPosition: "flex-start",
+            formatDate: (r) => zn(new Date(r * 1e3), En.MONTH_DAY),
+            secondaryIcon: /* @__PURE__ */ e(dn, { color: "error", filled: !0, size: 12 }),
+            transactions: n.spendingFee
+          }
+        )
+      ]
+    }
+  ) });
+}, Zo = v(Qo), Jo = () => {
+  const { healthScore: t } = R(), { finstrong: o } = x(), { key_indicators_spend: n } = o, { pay_bills_on_time_drawer: r } = n, s = Dn(t.spending_fee_transaction_count);
+  return /* @__PURE__ */ a(
+    p,
+    {
+      sx: {
+        px: 24,
+        pb: 24,
+        backgroundColor: "background.paper",
+        borderBottom: "1px solid",
+        borderColor: "divider"
+      },
+      children: [
+        /* @__PURE__ */ e(M, { variant: "body2", children: r.pay_bills_on_time_sticky_description }),
+        /* @__PURE__ */ a(p, { direction: "row", sx: { alignItems: "center", justifyContent: "space-between" }, children: [
+          /* @__PURE__ */ a(Be, { children: [
+            t.spending_fee_transaction_count,
+            " ",
+            r.pay_bills_on_time_sticky_fee_count
+          ] }),
+          /* @__PURE__ */ e($e, { status: s })
+        ] })
+      ]
+    }
+  );
+}, er = v(Jo), tr = () => {
+  const { savingsAndCheckingAccountsBalance: t } = xe(), { finstrong: o } = x();
+  return /* @__PURE__ */ a(p, { gap: 16, sx: { p: 16 }, children: [
+    /* @__PURE__ */ e(
+      Se,
+      {
+        balance: t,
+        title: o.key_indicators_save.drawer_available_balance
+      }
+    ),
+    /* @__PURE__ */ e(
+      Wt,
+      {
+        loadAccounts: [He.SAVINGS, He.CHECKING],
+        loadMoreLabel: o.more_accounts
+      }
+    )
+  ] });
+}, nr = v(tr), or = () => {
+  const { finstrong: t } = x(), { healthScore: o, allTransactions: n, loadSpendTransactions: r, loadDebtSpend: s } = R(), { isInitialized: i } = X();
+  m.useEffect(() => {
+    i && (r().finally(), s().finally());
+  }, [i]);
+  const c = m.useMemo(() => {
+    const l = n.spend.map((d) => d.transaction), _ = n.debtSpend.map((d) => d.transaction);
+    return [...l, ..._];
+  }, [n.spend, n.debtSpend]);
+  return i ? /* @__PURE__ */ a(p, { gap: 16, sx: { p: 16 }, children: [
+    /* @__PURE__ */ e(
+      Se,
+      {
+        balance: o.ninety_day_spend / 90,
+        title: t.key_indicators_save.drawer_daily_spend
+      }
+    ),
+    /* @__PURE__ */ e(ze, { amountColor: "text.primary", transactions: c })
+  ] }) : /* @__PURE__ */ e(oe, {});
+}, rr = v(or), ar = () => {
+  const [t, o] = m.useState(0), { finstrong: n } = x();
+  return /* @__PURE__ */ a(W, { children: [
+    /* @__PURE__ */ a(V, { children: [
+      /* @__PURE__ */ a(
+        Ue,
+        {
+          "aria-label": n.key_indicators_save.drawer_title,
+          centered: !0,
+          onChange: (r, s) => o(s),
+          selectionFollowsFocus: !0,
+          sx: { mb: 0 },
+          value: t,
+          variant: "fullWidth",
+          children: [
+            /* @__PURE__ */ e(
+              se,
+              {
+                "aria-controls": "available-details-tabpanel-0",
+                label: n.key_indicators_save.drawer_available,
+                sx: { minHeight: 44 }
+              }
+            ),
+            /* @__PURE__ */ e(
+              se,
+              {
+                "aria-controls": "spending-details-tabpanel-1",
+                label: n.key_indicators_save.drawer_spending,
+                sx: { minHeight: 44 }
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ e(ce, { index: 0, name: "available-details", value: t, children: /* @__PURE__ */ e(nr, {}) }),
+      /* @__PURE__ */ e(ce, { index: 1, name: "spending-details", value: t, children: /* @__PURE__ */ e(rr, {}) })
+    ] }),
+    /* @__PURE__ */ e(Ze, { chartFor: "savingsOverTime" })
+  ] });
+}, ir = v(ar), sr = () => {
+  const { finstrong: t } = x(), { healthScore: o } = R(), n = o.months_of_cash_on_hand, r = xt(n ? n * 30 : null), s = 183 / 6, i = Math.floor(n), c = Math.round((n - i) * s), l = n / 6 * 100;
+  return /* @__PURE__ */ e(
+    Ge,
+    {
+      bottomComponent: /* @__PURE__ */ e(
+        p,
+        {
+          sx: {
+            flexDirection: "row",
+            height: 24,
+            justifyContent: "space-between",
+            mt: 2,
+            px: 1
+          },
+          children: ["0 Mo", "1 Mo", "2 Mo", "3 Mo", "4 Mo", "5 Mo", "6 Mo"].map((d) => /* @__PURE__ */ a(
+            p,
+            {
+              sx: {
+                alignItems: "center",
+                height: 24
+              },
+              children: [
+                /* @__PURE__ */ e(
+                  le,
+                  {
+                    orientation: "vertical",
+                    sx: {
+                      borderWidth: 1,
+                      height: 8
+                    }
+                  }
+                ),
+                /* @__PURE__ */ e(I, { variant: "XSmall", children: d })
+              ]
+            },
+            d
+          ))
+        }
+      ),
+      label: t.key_indicators_save.drawer_progress_bar_label,
+      status: r,
+      statusBarData: [
+        {
+          percentage: `${l}%`
+        }
+      ],
+      value: j(t.key_indicators_save.drawer_progress_bar_value, i, c)
+    }
+  );
+}, cr = v(sr), lr = () => {
+  const { healthScore: t } = R(), { finstrong: o } = x(), n = Re(t.debt_to_income_ratio) ?? 0, r = Object.keys(t).length === 0, i = ((c) => r ? "MISSING" : c <= Ae.Good ? "GOOD" : c >= Ae.FairMin && c <= Ae.FairMax ? "FAIR" : c >= Ae.OffTrack ? "OFF_TRACK" : "MISSING")(n);
+  return /* @__PURE__ */ e(
+    Ge,
+    {
+      bottomComponent: /* @__PURE__ */ a(
+        p,
+        {
+          sx: {
+            alignItems: "flex-end",
+            flexDirection: "row",
+            height: 24,
+            justifyContent: "space-between",
+            mt: 2,
+            position: "relative"
+          },
+          children: [
+            /* @__PURE__ */ e(
+              k,
+              {
+                sx: {
+                  left: "30%",
+                  position: "absolute",
+                  transform: "translateX(-50%)"
+                },
+                children: /* @__PURE__ */ a(
+                  p,
+                  {
+                    sx: {
+                      alignItems: "center",
+                      flexDirection: "column",
+                      height: 24,
+                      justifyContent: "flex-end"
+                    },
+                    children: [
+                      /* @__PURE__ */ e(
+                        le,
+                        {
+                          orientation: "vertical",
+                          sx: {
+                            borderWidth: 1,
+                            height: 8
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ e(I, { sx: { color: "text.primary" }, variant: "XSmall", children: "30%" })
+                    ]
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ e(
+              k,
+              {
+                sx: {
+                  display: "flex",
+                  flexDirection: "column",
+                  height: 24,
+                  justifyContent: "center",
+                  marginLeft: "auto"
+                },
+                children: /* @__PURE__ */ e(I, { variant: "Small", children: j(
+                  o.key_indicators_borrow.have_manageable_debt_drawer.have_manageable_debt_sticky_description,
+                  n
+                ) })
+              }
+            )
+          ]
+        }
+      ),
+      label: o.key_indicators_borrow.have_manageable_debt_drawer.have_manageable_debt_sticky_title,
+      status: i,
+      statusBarData: [
+        {
+          percentage: `${n}%`
+        }
+      ],
+      value: B(t.ninety_day_debt_spend, "0,0.00")
+    }
+  );
+}, dr = v(lr), pr = () => {
+  const { healthScore: t, allTransactions: o } = R(), { connect: n, finstrong: r } = x(), [s, i] = m.useState(!1);
+  return /* @__PURE__ */ a(p, { gap: 16, sx: { p: 16 }, children: [
+    /* @__PURE__ */ e(
+      Se,
+      {
+        balance: t.ninety_day_income,
+        sx: { flexDirection: "column-reverse" },
+        title: r.key_indicators_borrow.have_manageable_debt_drawer.have_manageable_debt_income
+      }
+    ),
+    o.income.length ? (
+      // TODO: Need to add More Transactions functionality
+      /* @__PURE__ */ e(ze, { transactions: o.income.map((c) => c.transaction) })
+    ) : /* @__PURE__ */ e(
+      P,
+      {
+        onClick: () => {
+          i(!0);
+        },
+        variant: "contained",
+        children: r.connect_more_accounts_button
+      }
+    ),
+    /* @__PURE__ */ e(
+      re,
+      {
+        onClose: () => i(!1),
+        showConnectWidget: s,
+        title: n.mini_title
+      }
+    )
+  ] });
+}, _r = v(pr), ur = () => {
+  const { allTransactions: t, healthScore: o } = R(), { connect: n, finstrong: r } = x(), [s, i] = m.useState(!1);
+  return /* @__PURE__ */ a(p, { gap: 16, sx: { p: 16 }, children: [
+    /* @__PURE__ */ e(
+      Se,
+      {
+        balance: o.ninety_day_debt_spend,
+        sx: { flexDirection: "column-reverse" },
+        title: r.key_indicators_borrow.have_manageable_debt_drawer.have_manageable_debt_payments
+      }
+    ),
+    t.debtSpend.length ? (
+      //TODO: Need to add More Transactions functionality
+      /* @__PURE__ */ e(
+        ze,
+        {
+          amountColor: "text.primary",
+          transactions: t.debtSpend.map((c) => c.transaction)
+        }
+      )
+    ) : /* @__PURE__ */ e(
+      P,
+      {
+        onClick: () => {
+          i(!0);
+        },
+        variant: "contained",
+        children: r.connect_more_accounts_button
+      }
+    ),
+    /* @__PURE__ */ e(
+      re,
+      {
+        onClose: () => i(!1),
+        showConnectWidget: s,
+        title: n.mini_title
+      }
+    )
+  ] });
+}, hr = v(ur), mr = ({
+  color: t,
+  data: o,
+  series: n,
+  style: r,
+  ...s
+}) => {
+  const i = $(), c = m.useRef(null), { width: l } = no({
+    width: r.width
+  });
+  m.useLayoutEffect(() => {
+    const h = new ResizeObserver(() => {
+      window.requestAnimationFrame(() => {
+        if (c.current) {
+          const { width: y } = c.current.getBoundingClientRect(), f = y / 2, C = c.current.querySelector("text");
+          C && C.setAttribute("transform", `translate(${f}, -8)`);
+        }
+      });
+    });
+    return c.current && h.observe(c.current), () => {
+      c.current && h.unobserve(c.current);
+    };
+  }, []);
+  const { formattedComparison: _, formattedMain: d } = o[n.index], u = n.type === 0 ? d : _;
+  return /* @__PURE__ */ a("g", { children: [
+    /* @__PURE__ */ e(st.rect, { ...s, fill: t, ref: c, rx: 2, style: r }),
+    /* @__PURE__ */ e(
+      st.text,
+      {
+        fill: i.palette.text.secondary,
+        fontSize: 9,
+        fontWeight: 400,
+        textAnchor: "middle",
+        transform: l.to((h) => `translate(${h / 2}, -5)`),
+        x: r.x,
+        y: r.y,
+        children: u
+      }
+    )
+  ] });
+}, Fe = (t, o = 1e3) => {
+  const n = Math.abs(t) >= o ? "0.[0]a" : "0";
+  return B(t, n);
+}, $t = ({
+  chartFor: t,
+  data: o,
+  title: n,
+  buttonLabel: r,
+  onClick: s,
+  legendLabelMain: i,
+  legendLabelComparison: c,
+  totalComparison: l,
+  totalMain: _
+}) => {
+  const d = $(), u = Zn(d.breakpoints.down("xs")), h = m.useMemo(
+    () => o.sort((g, b) => g.month - b.month).map((g) => {
+      const b = In(g.month), w = {
+        spending_vs_income: {
+          main: g.standard_spend,
+          comparison: g.income,
+          formattedMain: Fe(g.standard_spend),
+          formattedComparison: Fe(g.income)
+        },
+        debt_payment_vs_income: {
+          main: g.income,
+          comparison: g.debt_spend,
+          formattedMain: Fe(g.income),
+          formattedComparison: Fe(g.debt_spend)
+        }
+      };
+      return {
+        label: b,
+        ...w[t]
+      };
+    }),
+    [o, t]
+  ), y = {
+    dataKey: "label",
+    scaleType: "band"
+  }, f = Math.max(...h.map((g) => Math.max(g.main, g.comparison))), C = Math.ceil(f * 1.2 / 1e3) * 1e3, S = C / 3, D = {
+    scaleType: "linear",
+    min: 0,
+    max: C,
+    tickNumber: 4,
+    tickMinStep: S,
+    valueFormatter: (g) => g === 0 ? "$0" : `$${(g / 1e3).toFixed(0)}K`
+  };
+  return /* @__PURE__ */ a(
+    V,
+    {
+      sx: {
+        px: 16,
+        py: 24
+      },
+      children: [
+        /* @__PURE__ */ a(
+          p,
+          {
+            sx: {
+              alignItems: "center",
+              flexDirection: "row",
+              justifyContent: "space-between",
+              gap: 12,
+              pb: 8
+            },
+            children: [
+              /* @__PURE__ */ e(Y, { children: n }),
+              r && /* @__PURE__ */ e(
+                P,
+                {
+                  endIcon: /* @__PURE__ */ e(Z, {}),
+                  onClick: s,
+                  size: "small",
+                  sx: {
+                    pl: 8,
+                    height: 24
+                  },
+                  variant: "text",
+                  children: r
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ a(p, { sx: { alignItems: "center", flexDirection: "row", gap: 24, py: 4 }, children: [
+          /* @__PURE__ */ a(p, { sx: { gap: 8, alignItems: "center", flexDirection: "row" }, children: [
+            /* @__PURE__ */ e(
+              k,
+              {
+                sx: {
+                  width: 10,
+                  height: 10,
+                  backgroundColor: "chartMono.chartMono3",
+                  borderRadius: "2px"
+                }
+              }
+            ),
+            /* @__PURE__ */ a(p, { sx: { alignItems: "center", flexDirection: "row" }, children: [
+              /* @__PURE__ */ a(I, { variant: "subtitle2", children: [
+                i,
+                " "
+              ] }),
+              !u && _ && /* @__PURE__ */ e(I, { sx: { fontWeight: 700 }, variant: "subtitle2", children: _ })
+            ] })
+          ] }),
+          /* @__PURE__ */ a(p, { alignItems: "center", direction: "row", spacing: 8, children: [
+            /* @__PURE__ */ e(
+              k,
+              {
+                sx: {
+                  width: 10,
+                  height: 10,
+                  backgroundColor: "chartMono.chartMono5",
+                  borderRadius: "2px"
+                }
+              }
+            ),
+            /* @__PURE__ */ a(p, { sx: { alignItems: "center", flexDirection: "row" }, children: [
+              /* @__PURE__ */ a(I, { variant: "subtitle2", children: [
+                c,
+                " "
+              ] }),
+              !u && l && /* @__PURE__ */ e(I, { sx: { fontWeight: 700 }, variant: "subtitle2", children: l })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ a(
+          to,
+          {
+            colors: [`${d.palette.chartMono.chartMono3}`, `${d.palette.chartMono.chartMono5}`],
+            dataset: h,
+            height: 240,
+            margin: { top: 20, bottom: 30, right: 10, left: 42 },
+            series: [
+              { dataKey: "main", type: "bar" },
+              { dataKey: "comparison", type: "bar" }
+            ],
+            xAxis: [y],
+            yAxis: [D],
+            children: [
+              /* @__PURE__ */ e(
+                an,
+                {
+                  slots: {
+                    bar: (g) => {
+                      const { ownerState: b, style: w, ...H } = g;
+                      return /* @__PURE__ */ e(
+                        mr,
+                        {
+                          ...H,
+                          color: b.color,
+                          data: h,
+                          series: {
+                            index: b.dataIndex,
+                            type: Number(b.id.toString().split("-").pop())
+                          },
+                          style: w
+                        }
+                      );
+                    }
+                  }
+                }
+              ),
+              /* @__PURE__ */ e(
+                Jn,
+                {
+                  sx: () => ({
+                    ".MuiChartsAxis-line": {
+                      stroke: d.palette.divider
+                    },
+                    ".MuiChartsAxis-tick": {
+                      stroke: d.palette.divider
+                    },
+                    ".MuiChartsAxis-tickLabel": {
+                      transform: "translateY(10px)"
+                    }
+                  }),
+                  tickLabelStyle: {
+                    fontSize: 11,
+                    fill: "text.secondary"
+                  }
+                }
+              ),
+              /* @__PURE__ */ e(
+                eo,
+                {
+                  sx: () => ({
+                    ".MuiChartsAxis-line": {
+                      stroke: d.palette.divider
+                    },
+                    ".MuiChartsAxis-tick": {
+                      stroke: d.palette.divider
+                    },
+                    ".MuiChartsAxis-tickLabel": {
+                      transform: "translateX(-8px)"
+                    }
+                  }),
+                  tickLabelStyle: {
+                    fontSize: 11,
+                    fill: "text.secondary"
+                  }
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}, gr = () => {
+  const { loadDebtSpend: t, loadIncome: o, monthlySummaries: n } = R(), { isInitialized: r } = X(), [s, i] = m.useState(0), { finstrong: c } = x();
+  return m.useEffect(() => {
+    r && (t().finally(), o().finally());
+  }, [r]), /* @__PURE__ */ a(W, { children: [
+    /* @__PURE__ */ a(V, { children: [
+      /* @__PURE__ */ a(
+        Ue,
+        {
+          "aria-label": c.key_indicators_save.drawer_title,
+          centered: !0,
+          onChange: (l, _) => i(_),
+          selectionFollowsFocus: !0,
+          sx: { mb: 0 },
+          value: s,
+          variant: "fullWidth",
+          children: [
+            /* @__PURE__ */ e(
+              se,
+              {
+                "aria-controls": "income-details-tabpanel-0",
+                id: "income-details-tab-0",
+                label: c.key_indicators_borrow.have_manageable_debt_drawer.income,
+                sx: { minHeight: 44 }
+              }
+            ),
+            /* @__PURE__ */ e(
+              se,
+              {
+                "aria-controls": "debt-payment-details-tabpanel-1",
+                id: "debt-payment-details-tab-1",
+                label: c.key_indicators_borrow.have_manageable_debt_drawer.debt_payment,
+                sx: { minHeight: 44 }
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ e(
+        ce,
+        {
+          "aria-labelledby": "income-details-tab-0",
+          index: 0,
+          name: "income-details",
+          value: s,
+          children: /* @__PURE__ */ e(_r, {})
+        }
+      ),
+      /* @__PURE__ */ e(
+        ce,
+        {
+          "aria-labelledby": "debt-payment-details-tab-1",
+          index: 1,
+          name: "debt-payment-details",
+          value: s,
+          children: /* @__PURE__ */ e(hr, {})
+        }
+      )
+    ] }),
+    n.length ? /* @__PURE__ */ a(W, { children: [
+      /* @__PURE__ */ e(
+        $t,
+        {
+          chartFor: "debt_payment_vs_income",
+          data: n,
+          legendLabelComparison: c.key_indicators_borrow.have_manageable_debt_drawer.debt_payment,
+          legendLabelMain: c.key_indicators_borrow.have_manageable_debt_drawer.income,
+          title: c.key_indicators_borrow.have_manageable_debt_drawer.debt_payment
+        }
+      ),
+      /* @__PURE__ */ e(Ze, { chartFor: "debtOverTime" })
+    ] }) : /* @__PURE__ */ a(W, { children: [
+      /* @__PURE__ */ e(
+        Le,
+        {
+          header: c.key_indicators_borrow.have_manageable_debt_drawer.have_manageable_debt_double_bar_chart_empty_state_header,
+          icon: "multiline_chart",
+          subText: c.key_indicators_borrow.have_manageable_debt_drawer.have_manageable_debt_double_bar_chart_empty_state_description,
+          sx: {
+            backgroundColor: "background.paper",
+            borderRadius: "8px",
+            boxShadow: 1,
+            p: 24,
+            pb: 48
+          },
+          variant: "no-buttons"
+        }
+      ),
+      /* @__PURE__ */ e(
+        Le,
+        {
+          header: c.key_indicators_borrow.have_manageable_debt_drawer.have_manageable_debt_line_chart_empty_state_header,
+          icon: "multiline_chart",
+          subText: c.key_indicators_borrow.have_manageable_debt_drawer.have_manageable_debt_line_chart_empty_state_description,
+          sx: {
+            backgroundColor: "background.paper",
+            borderRadius: "8px",
+            boxShadow: 1,
+            p: 24,
+            pb: 48
+          },
+          variant: "no-buttons"
+        }
+      )
+    ] })
+  ] });
+}, yr = v(gr), br = () => {
+  const { healthScore: t } = R(), { finstrong: o } = x(), n = Re(t.spend_to_income_ratio) ?? 0, r = Object.keys(t).length === 0, i = ((l) => r ? "MISSING" : l < Oe.Good ? "GOOD" : l >= Oe.Good && l <= Oe.Fair ? "FAIR" : l >= Oe.OffTrack ? "OFF_TRACK" : "MISSING")(n), c = {
+    GOOD: [{ percentage: `${n}%` }],
+    FAIR: [{ percentage: "100%" }, { percentage: `${n - 100}%` }],
+    OFF_TRACK: [{ percentage: "100%" }, { percentage: `${n - 100}%` }],
+    MISSING: [{ percentage: "0%" }]
+  }[i];
+  return /* @__PURE__ */ e(
+    Ge,
+    {
+      bottomComponent: /* @__PURE__ */ a(
+        p,
+        {
+          sx: {
+            flexDirection: "row",
+            justifyContent: "space-between",
+            alignItems: "center",
+            mt: 8
+          },
+          children: [
+            /* @__PURE__ */ a(I, { variant: "body2", children: [
+              r ? "-" : B(t.ninety_day_income, "0,0.00"),
+              " ",
+              o?.key_indicators_spend.spend_less_than_you_make_drawer.income
+            ] }),
+            /* @__PURE__ */ a(I, { variant: "body2", children: [
+              r ? "-%" : `${n}%`,
+              " ",
+              o?.key_indicators_spend.spend_less_than_you_make_drawer.spent
+            ] })
+          ]
+        }
+      ),
+      label: o?.key_indicators_spend.spend_less_than_you_make_drawer.spend_less_than_you_make_sticky_description,
+      status: i,
+      statusBarData: c,
+      value: r ? "$0" : B(t.ninety_day_spend, "0,0.00")
+    }
+  );
+}, fr = v(br), xr = () => {
+  const { accounts: t } = xe(), { categories: o, dateRangeCategoryTotals: n, loadDateRangeCategoryTotals: r } = Ve(), { monthlySummaries: s, handleFinstrongWidgetPrimaryCtaClick: i } = R(), { appDataStore: c } = Ln(), { finstrong: l, goals: _, spending: d } = x(), u = $(), [h, y] = m.useState("");
+  m.useEffect(() => {
+    r(
+      t,
+      Tt(/* @__PURE__ */ new Date()),
+      At(/* @__PURE__ */ new Date())
+    ).finally();
+  }, [t]);
+  const f = m.useMemo(
+    () => oo(o, _, u, n),
+    [o, n]
+  ), C = (g) => {
+    y(h === g ? "" : g);
+  }, { totalSpending: S, totalIncome: D } = m.useMemo(() => s?.reduce(
+    (g, { standard_spend: b = 0, income: w = 0 }) => ({
+      totalSpending: g.totalSpending + b,
+      totalIncome: g.totalIncome + w
+    }),
+    { totalSpending: 0, totalIncome: 0 }
+  ), [s]);
+  return /* @__PURE__ */ a(p, { sx: { gap: 24 }, children: [
+    s.length ? /* @__PURE__ */ e(
+      $t,
+      {
+        ...c.appData.client_profile?.allow_trends_widget && {
+          buttonLabel: l.key_indicators_spend.spend_less_than_you_make_drawer.view_more
+        },
+        chartFor: "spending_vs_income",
+        data: s,
+        legendLabelComparison: l.key_indicators_spend.spend_less_than_you_make_drawer.income,
+        legendLabelMain: l.key_indicators_spend.spend_less_than_you_make_drawer.spending,
+        onClick: () => i("trends")(),
+        title: l.key_indicators_spend.spend_less_than_you_make_drawer.trends,
+        totalComparison: B(D, "0,0.00"),
+        totalMain: B(S, "0,0.00")
+      }
+    ) : /* @__PURE__ */ e(
+      Le,
+      {
+        header: l.key_indicators_spend.spend_less_than_you_make_drawer.trends_zero_state_title,
+        icon: "multiline_chart",
+        subText: l.key_indicators_spend.spend_less_than_you_make_drawer.trends_zero_state_description,
+        sx: {
+          backgroundColor: "background.paper",
+          borderRadius: "8px",
+          boxShadow: 1,
+          p: 24,
+          pb: 48,
+          ".empty-state-subtext": {
+            fontSize: 15,
+            lineHeight: "24px",
+            mt: 8
+          }
+        },
+        variant: "no-buttons"
+      }
+    ),
+    f ? /* @__PURE__ */ a(
+      V,
+      {
+        sx: {
+          px: 16,
+          py: 24
+        },
+        children: [
+          /* @__PURE__ */ a(
+            p,
+            {
+              sx: {
+                alignItems: "center",
+                flexDirection: "row",
+                justifyContent: "space-between",
+                gap: 12,
+                pb: 8
+              },
+              children: [
+                /* @__PURE__ */ e(Y, { children: l.key_indicators_spend.spend_less_than_you_make_drawer.spending }),
+                c.appData.client_profile?.allow_spending_widget && /* @__PURE__ */ e(
+                  P,
+                  {
+                    endIcon: /* @__PURE__ */ e(Z, {}),
+                    onClick: () => i("spending")(),
+                    size: "small",
+                    sx: {
+                      pl: 8,
+                      height: 24
+                    },
+                    variant: "text",
+                    children: l.key_indicators_spend.spend_less_than_you_make_drawer.view_more
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ a(p, { sx: { gap: 12, py: 16, flexDirection: "row", justifyContent: "center" }, children: [
+            /* @__PURE__ */ e(
+              ro,
+              {
+                data: f,
+                onSelected: C,
+                selectedId: h,
+                totalLabel: d.total_spending
+              }
+            ),
+            /* @__PURE__ */ e(
+              ao,
+              {
+                data: f,
+                onSelected: C,
+                selectedId: h
+              }
+            )
+          ] })
+        ]
+      }
+    ) : /* @__PURE__ */ e(
+      Le,
+      {
+        header: l.key_indicators_spend.spend_less_than_you_make_drawer.spending_zero_state_title,
+        icon: "donut_small",
+        subText: l.key_indicators_spend.spend_less_than_you_make_drawer.spending_zero_state_description,
+        sx: {
+          backgroundColor: "background.paper",
+          borderRadius: "8px",
+          boxShadow: 1,
+          p: 24,
+          pb: 48,
+          ".empty-state-subtext": {
+            fontSize: 15,
+            lineHeight: "24px",
+            mt: 8
+          }
+        },
+        variant: "no-buttons"
+      }
+    )
+  ] });
+}, Sr = v(xr), Cr = ({
+  drawerFor: t,
+  isOpen: o,
+  onClose: n
+}) => {
+  const { finstrong: r } = x(), i = {
+    spendLessThanYouMake: {
+      title: r.key_indicators_spend.spend_less_than_you_make_drawer.spend_less_than_you_make_title,
+      description: r.key_indicators_spend.spend_less_than_you_make_drawer.spend_less_than_you_make_description,
+      stickyComponent: /* @__PURE__ */ e(fr, {}),
+      content: /* @__PURE__ */ e(Sr, {}),
+      drawerType: "connectDrawer",
+      connectTitle: r.connect_your_accounts,
+      connectDescription: r.connect_more_accounts_to_unlock_a_fuller_understanding_of_your_finances
+    },
+    payBillsOnTime: {
+      title: r.key_indicators_spend.pay_bills_on_time_drawer.pay_bills_on_time_title,
+      description: r.key_indicators_spend.pay_bills_on_time_drawer.pay_bills_on_time_description,
+      stickyComponent: /* @__PURE__ */ e(er, {}),
+      content: /* @__PURE__ */ e(Zo, {}),
+      drawerType: "connectDrawer",
+      connectTitle: r.connect_your_accounts,
+      connectDescription: r.connect_more_accounts_to_unlock_a_fuller_understanding_of_your_finances
+    },
+    maintainEmergencySavings: {
+      content: /* @__PURE__ */ e(Yo, {}),
+      description: r.maintain_emergency_savings_description,
+      stickyComponent: /* @__PURE__ */ e(Uo, {}),
+      title: r.maintain_emergency_savings_title,
+      drawerType: "connectDrawer",
+      connectTitle: r.connect_your_accounts,
+      connectDescription: r.connect_more_accounts_to_unlock_a_fuller_understanding_of_your_finances
+    },
+    haveManageableDebt: {
+      title: r.key_indicators_borrow.have_manageable_debt_drawer.have_manageable_debt_title,
+      description: r.key_indicators_borrow.have_manageable_debt_drawer.have_manageable_debt_description,
+      stickyComponent: /* @__PURE__ */ e(dr, {}),
+      content: /* @__PURE__ */ e(yr, {}),
+      drawerType: "connectDrawer",
+      connectTitle: r.dont_see_all_your_accounts,
+      connectDescription: r.connect_more_accounts_to_view_more_accurate_financial_picture
+    },
+    haveAGoodCreditScore: {
+      title: /* @__PURE__ */ e(Go, {}),
+      description: r.credit_score_description,
+      stickyComponent: null,
+      content: /* @__PURE__ */ e(Wo, {})
+    },
+    saveEnoughToLiveOn: {
+      title: r.key_indicators_save.drawer_title,
+      description: r.key_indicators_save.drawer_description,
+      stickyComponent: /* @__PURE__ */ e(cr, {}),
+      content: /* @__PURE__ */ e(ir, {}),
+      drawerType: "connectDrawer",
+      connectTitle: r.dont_see_all_your_accounts,
+      connectDescription: r.connect_more_accounts_to_view_more_accurate_financial_picture
+    }
+  }[t];
+  return /* @__PURE__ */ e(
+    Lt,
+    {
+      connectDescription: i?.connectDescription,
+      connectTitle: i?.connectTitle,
+      description: i?.description,
+      drawerTitle: r.key_indicators,
+      drawerType: i.drawerType,
+      isOpen: o,
+      loadConnectAccountsCard: !0,
+      onClose: n,
+      stickyComponent: i.stickyComponent,
+      title: i.title,
+      children: /* @__PURE__ */ e(p, { sx: { gap: 16 }, children: i.content })
+    }
+  );
+}, vr = v(Cr), fe = ({
+  drawerFor: t,
+  title: o,
+  description: n,
+  cardState: r = "MISSING"
+}) => {
+  const { finstrong: s } = x(), [i, c] = m.useState(!1), l = (_) => {
+    (_.key === "Enter" || _.key === " ") && (_.preventDefault(), c(!0));
+  };
+  return /* @__PURE__ */ a(W, { children: [
+    /* @__PURE__ */ a(
+      p,
+      {
+        "aria-label": `${s.key_indicators_open} ${o}`,
+        onClick: () => c(!0),
+        onKeyDown: l,
+        role: "button",
+        sx: {
+          alignItems: "center",
+          borderRadius: 2,
+          cursor: "pointer",
+          flexDirection: "row",
+          gap: 12,
+          justifyContent: "space-between",
+          outline: "1px solid",
+          outlineColor: "divider",
+          p: 16
+        },
+        tabIndex: 0,
+        children: [
+          /* @__PURE__ */ a(p, { sx: { gap: 8, minWidth: 0 }, children: [
+            /* @__PURE__ */ a(p, { sx: { alignItems: "center", flexDirection: "row", gap: 8 }, children: [
+              /* @__PURE__ */ e(I, { sx: { fontWeight: 600 }, variant: "body1", children: o }),
+              /* @__PURE__ */ e($e, { status: r })
+            ] }),
+            /* @__PURE__ */ e(M, { color: "secondary", variant: "subtitle2", children: n })
+          ] }),
+          /* @__PURE__ */ e(Z, { color: "secondary", size: 24 })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(
+      vr,
+      {
+        drawerFor: t,
+        isOpen: i,
+        onClose: () => c(!1)
+      }
+    )
+  ] });
+}, wr = () => {
+  const { finstrong: t } = x(), { key_indicators_spend: o } = t, { healthScore: n } = R(), r = (c) => {
+    const l = An(c), _ = {
+      GOOD: o.ratio_good_description,
+      FAIR: o.ratio_fair_description,
+      OFF_TRACK: o.ratio_off_track_description,
+      MISSING: o.ratio_missing_description
+    }, d = l === "MISSING" ? _[l] : j(_[l], c);
+    return {
+      cardState: l,
+      description: d,
+      title: o.ratio_card_title
+    };
+  }, { spendToIncomeRatio: s, spendFeeCount: i } = m.useMemo(() => {
+    const c = n.spend_to_income_ratio !== null ? Math.round(n.spend_to_income_ratio * 100) : null, l = r(c), _ = Tn(
+      n.spending_fee_transaction_count,
+      o
+    );
+    return { spendToIncomeRatio: l, spendFeeCount: _ };
+  }, [
+    n.spend_to_income_ratio,
+    n.spending_fee_transaction_count,
+    o,
+    t
+  ]);
+  return /* @__PURE__ */ a(p, { sx: { gap: 24, p: 8, pt: 24 }, children: [
+    /* @__PURE__ */ e(
+      fe,
+      {
+        cardState: s.cardState,
+        description: s.description,
+        drawerFor: de.SpendLessThanYouMake,
+        title: s.title
       }
     ),
     /* @__PURE__ */ e(
-      B,
+      fe,
       {
         cardState: i.cardState,
         description: i.description,
-        stateTitle: i.stateTitle,
+        drawerFor: de.PayBillsOnTime,
         title: i.title
       }
     )
   ] });
-}, Ft = () => {
-  const { healthScore: n } = $(), { finstrong: o } = S(), { key_indicators_save: t } = o, a = (r) => {
-    const { good: s, poor: c } = X.daysOfCashOnHand;
-    let p = g.MISSING, h = t.days_of_cash_missing_description, m = o.key_indicators_missing;
-    return r !== null && (r >= s ? (p = g.GOOD, h = b(t.days_of_cash_good_description, r), m = o.key_indicators_good) : r < s && r >= c ? (p = g.FAIR, h = b(t.days_of_cash_fair_description, r), m = o.key_indicators_fair) : r < c && (p = g.OFF_TRACK, h = b(t.days_of_cash_off_track_description, r), m = o.key_indicators_off_track)), {
-      cardState: p,
-      description: h,
-      title: t.days_of_cash_title,
-      stateTitle: m
+}, kr = v(wr), Mr = () => {
+  const { healthScore: t } = R(), { finstrong: o } = x(), { key_indicators_save: n } = o, r = (l) => {
+    const _ = xt(l), d = {
+      GOOD: n.days_of_cash_good_description,
+      FAIR: n.days_of_cash_fair_description,
+      OFF_TRACK: n.days_of_cash_off_track_description,
+      MISSING: n.days_of_cash_missing_description
+    }, u = _ === "MISSING" ? d[_] : j(d[_], l);
+    return {
+      cardState: _,
+      description: u,
+      title: n.days_of_cash_title
     };
-  }, d = (r) => {
-    const { good: s, poor: c } = X.emergencySavings;
-    let p = g.MISSING, h = t.emergency_savings_missing_description, m = o.key_indicators_missing;
-    return r !== null && (r >= s ? (p = g.GOOD, h = t.emergency_savings_good_description, m = o.key_indicators_good) : r < s && r >= c ? (p = g.FAIR, h = b(
-      t.emergency_savings_fair_description,
-      it(r, "0,0.00")
-    ), m = o.key_indicators_fair) : r < c && (p = g.OFF_TRACK, h = t.emergency_savings_off_track_description, m = o.key_indicators_off_track)), {
-      cardState: p,
-      description: h,
-      title: t.emergency_savings_title,
-      stateTitle: m
+  }, s = (l) => {
+    const _ = ft(l), d = {
+      GOOD: n.emergency_savings_good_description,
+      FAIR: n.emergency_savings_fair_description,
+      OFF_TRACK: n.emergency_savings_off_track_description,
+      MISSING: n.emergency_savings_missing_description
+    };
+    let u;
+    return _ === "FAIR" && l !== null ? u = j(
+      d[_],
+      B(l, "0,0.00")
+    ) : u = d[_], {
+      cardState: _,
+      description: u,
+      title: n.emergency_savings_title
     };
-  }, { daysOfCashOnHand: l, emergencySavings: i } = C.useMemo(() => {
-    const r = n.months_of_cash_on_hand !== null ? Math.round(n.months_of_cash_on_hand * 30) : null, s = a(r), c = n.emergency_savings_on_hand !== null ? Math.round(n.emergency_savings_on_hand) : null, p = d(c);
-    return { daysOfCashOnHand: s, emergencySavings: p };
+  }, { daysOfCashOnHand: i, emergencySavings: c } = m.useMemo(() => {
+    const l = t.months_of_cash_on_hand !== null ? Math.round(t.months_of_cash_on_hand * 30) : null, _ = r(l), d = t.emergency_savings_on_hand !== null ? Math.round(t.emergency_savings_on_hand) : null, u = s(d);
+    return { daysOfCashOnHand: _, emergencySavings: u };
   }, [
-    n.months_of_cash_on_hand,
-    n.emergency_savings_on_hand,
-    t,
+    t.months_of_cash_on_hand,
+    t.emergency_savings_on_hand,
+    n,
     o
   ]);
-  return /* @__PURE__ */ u(_, { direction: "column", gap: 24, sx: { p: 8, pt: 24 }, children: [
+  return /* @__PURE__ */ a(p, { direction: "column", gap: 24, sx: { p: 8, pt: 24 }, children: [
     /* @__PURE__ */ e(
-      B,
+      fe,
       {
-        cardState: l.cardState,
-        description: l.description,
-        stateTitle: l.stateTitle,
-        title: l.title
+        cardState: i.cardState,
+        description: i.description,
+        drawerFor: de.SaveEnoughToLiveOn,
+        title: i.title
       }
     ),
     /* @__PURE__ */ e(
-      B,
+      fe,
       {
-        cardState: i.cardState,
-        description: i.description,
-        stateTitle: i.stateTitle,
-        title: i.title
+        cardState: c.cardState,
+        description: c.description,
+        drawerFor: de.MaintainEmergencySavings,
+        title: c.title
       }
     )
   ] });
-}, Rt = () => {
-  const { healthScore: n } = $(), { finstrong: o } = S(), { key_indicators_borrow: t } = o, { user: a } = Y(), d = (s) => {
-    const { good: c, poor: p } = X.debtToIncomeRatio;
-    let h = g.MISSING, m = t.manage_debit_missing_description, f = o.key_indicators_missing;
-    return s != null && (s <= c ? (h = g.GOOD, m = t.manage_debit_good_description, f = o.key_indicators_good) : s > c && s <= p ? (h = g.FAIR, m = b(t.manage_debit_fair_description, s), f = o.key_indicators_fair) : s > p && (h = g.OFF_TRACK, m = b(
-      t.manage_debit_off_track_description,
-      s
-    ), f = o.key_indicators_off_track)), {
-      cardState: h,
-      description: m,
-      title: t.manage_debit_title,
-      stateTitle: f
+}, Dr = v(Mr), Ir = () => {
+  const { healthScore: t } = R(), { finstrong: o } = x(), { key_indicators_borrow: n } = o, { user: r } = J(), s = (_) => {
+    const d = On(_), u = {
+      GOOD: n.manage_debit_good_description,
+      FAIR: n.manage_debit_fair_description,
+      OFF_TRACK: n.manage_debit_off_track_description,
+      MISSING: n.manage_debit_missing_description
+    }, h = d === "FAIR" || d === "OFF_TRACK" ? j(u[d], _) : u[d];
+    return {
+      cardState: d,
+      description: h,
+      title: n.manage_debit_title
     };
-  }, l = (s) => {
-    const { good: c, poor: p } = X.creditScore;
-    let h = g.MISSING, m = t.credit_score_missing_description, f = o.key_indicators_missing;
-    return s !== null && (s >= c ? (h = g.GOOD, m = b(t.credit_score_good_description, s), f = o.key_indicators_good) : s < c && s >= p ? (h = g.FAIR, m = b(t.credit_score_fair_description, s), f = o.key_indicators_fair) : s < p && (h = g.OFF_TRACK, m = b(
-      t.credit_score_off_track_description,
-      s
-    ), f = o.key_indicators_off_track)), {
-      cardState: h,
-      description: m,
-      title: t.credit_score_title,
-      stateTitle: f
+  }, i = (_) => {
+    const d = bt(_), u = {
+      GOOD: n.credit_score_good_description,
+      FAIR: n.credit_score_fair_description,
+      OFF_TRACK: n.credit_score_off_track_description,
+      MISSING: n.credit_score_missing_description
+    }, h = d === "MISSING" ? u[d] : j(u[d], _);
+    return {
+      cardState: d,
+      description: h,
+      title: n.credit_score_title
     };
-  }, { manageDebtStatus: i, creditScoreStatus: r } = C.useMemo(() => {
-    const s = n.debt_to_income_ratio !== null ? Math.round(n.debt_to_income_ratio * 100) : null, c = d(s), p = l(a.credit_score || null);
+  }, { manageDebtStatus: c, creditScoreStatus: l } = m.useMemo(() => {
+    const _ = t.debt_to_income_ratio !== null ? Math.round(t.debt_to_income_ratio * 100) : null, d = s(_), u = i(r.credit_score || null);
     return {
-      manageDebtStatus: c,
-      creditScoreStatus: p
+      manageDebtStatus: d,
+      creditScoreStatus: u
     };
-  }, [n.debt_to_income_ratio, a.credit_score, t, o]);
-  return /* @__PURE__ */ u(_, { direction: "column", gap: 24, sx: { p: 8, pt: 24 }, children: [
+  }, [t.debt_to_income_ratio, r.credit_score, n, o]);
+  return /* @__PURE__ */ a(p, { direction: "column", gap: 24, sx: { p: 8, pt: 24 }, children: [
+    /* @__PURE__ */ e(
+      fe,
+      {
+        cardState: c.cardState,
+        description: c.description,
+        drawerFor: de.HaveManageableDebt,
+        title: c.title
+      }
+    ),
+    /* @__PURE__ */ e(
+      fe,
+      {
+        cardState: l.cardState,
+        description: l.description,
+        drawerFor: de.HaveAGoodCreditScore,
+        title: l.title
+      }
+    )
+  ] });
+}, Tr = v(Ir), Ar = () => {
+  const [t, o] = m.useState(0), { finstrong: n } = x();
+  return /* @__PURE__ */ a(W, { children: [
+    /* @__PURE__ */ a(
+      Ue,
+      {
+        "aria-label": "Key Indicators",
+        centered: !0,
+        onChange: (r, s) => o(s),
+        selectionFollowsFocus: !0,
+        sx: {
+          mb: 0,
+          "& .MuiTab-root": {
+            minWidth: 0
+          }
+        },
+        textColor: "primary",
+        value: t,
+        variant: "fullWidth",
+        children: [
+          /* @__PURE__ */ e(
+            se,
+            {
+              "aria-controls": "spend-details-tabpanel-0",
+              icon: /* @__PURE__ */ e(Ke, { sx: { mr: 8 } }),
+              iconPosition: "start",
+              id: "spend-details-tab-0",
+              label: n.key_indicators_spend.title,
+              sx: { minHeight: 44 }
+            }
+          ),
+          /* @__PURE__ */ e(
+            se,
+            {
+              "aria-controls": "save-details-tabpanel-1",
+              icon: /* @__PURE__ */ e(pn, { sx: { mr: 8 } }),
+              iconPosition: "start",
+              id: "save-details-tab-1",
+              label: n.key_indicators_save.title,
+              sx: { minHeight: 44 }
+            }
+          ),
+          /* @__PURE__ */ e(
+            se,
+            {
+              "aria-controls": "borrow-details-tabpanel-2",
+              icon: /* @__PURE__ */ e(_n, { sx: { mr: 8 } }),
+              iconPosition: "start",
+              id: "borrow-details-tab-2",
+              label: n.key_indicators_borrow.title,
+              sx: { minHeight: 44 }
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(ce, { index: 0, name: "spend-details", value: t, children: /* @__PURE__ */ e(kr, {}) }),
+    /* @__PURE__ */ e(ce, { index: 1, name: "save-details", value: t, children: /* @__PURE__ */ e(Dr, {}) }),
+    /* @__PURE__ */ e(ce, { index: 2, name: "borrow-details", value: t, children: /* @__PURE__ */ e(Tr, {}) })
+  ] });
+}, Or = v(Ar), Fr = ({ onClick: t }) => {
+  const { finstrong: o } = x(), { isCopyLoaded: n } = X();
+  return n ? /* @__PURE__ */ a(p, { sx: { alignItems: "center", gap: 12, pt: 12, pb: 32 }, children: [
+    /* @__PURE__ */ e(ht, { size: 48 }),
+    /* @__PURE__ */ a(p, { sx: { alignItems: "center", gap: 4, textAlign: "center" }, children: [
+      /* @__PURE__ */ e(Y, { children: o.missing_data_title }),
+      /* @__PURE__ */ e(M, { sx: { width: { sm: 348 } }, variant: "subtitle1", children: o.missing_data_description })
+    ] }),
+    /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e(
+      P,
+      {
+        endIcon: /* @__PURE__ */ e(Z, {}),
+        onClick: t,
+        size: "small",
+        sx: {
+          fontSize: 13,
+          ":hover": {
+            bgcolor: "transparent"
+          }
+        },
+        variant: "text",
+        children: o.connect_more_accounts_button
+      }
+    ) })
+  ] }) : /* @__PURE__ */ e(oe, {});
+}, Rr = v(Fr), Pr = ({
+  firstDay: t,
+  frequency: o,
+  secondDay: n,
+  incomeTransactions: r,
+  setCurrentStep: s,
+  setFirstDay: i,
+  setFrequency: c,
+  setSecondDay: l,
+  transaction: _
+}) => {
+  const { finstrong: d } = x();
+  return /* @__PURE__ */ a(m.Fragment, { children: [
+    /* @__PURE__ */ a(p, { children: [
+      !!r.length && /* @__PURE__ */ e(k, { sx: { pb: 24 }, children: r.reduce((u, h, y) => {
+        if (h.guid === _.guid) return u;
+        const f = Xn(y, r), C = qn(y, r);
+        return u.push(
+          /* @__PURE__ */ a(m.Fragment, { children: [
+            f && /* @__PURE__ */ e(Un, { children: It(h.date) }),
+            /* @__PURE__ */ e(Qn, { transaction: h }),
+            /* @__PURE__ */ e(le, { sx: { ml: C ? 44 : 0 } })
+          ] }, h.guid)
+        ), u;
+      }, []) }),
+      /* @__PURE__ */ e(
+        lo,
+        {
+          firstDay: t,
+          frequency: o,
+          onFirstDayChange: i,
+          onFrequencyChange: c,
+          onSecondDayChange: l,
+          secondDay: n,
+          transaction: _
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(k, { sx: { px: 24 }, children: /* @__PURE__ */ e(
+      P,
+      {
+        fullWidth: !0,
+        onClick: () => s({ step: A.MonthlyIncome, type: "main" }),
+        startIcon: /* @__PURE__ */ e(mt, {}),
+        children: d.onboarding_add_more_income
+      }
+    ) })
+  ] });
+}, Lr = v(Pr), Br = ({ selectedDate: t, setSelectedDate: o }) => {
+  const { finstrong: n } = x(), r = $(), s = (i) => {
+    o(Math.floor(new Date(i).getTime() / 1e3));
+  };
+  return /* @__PURE__ */ e(k, { sx: { p: 24 }, children: /* @__PURE__ */ e(uo, { dateAdapter: Ot, children: /* @__PURE__ */ e(
+    ho,
+    {
+      disableFuture: !0,
+      label: n.onboarding_select_date,
+      onChange: s,
+      slotProps: {
+        nextIconButton: {
+          sx: {
+            color: "primary.main",
+            "&:hover": { bgcolor: be(r.palette.primary.light, 0.1) }
+          }
+        },
+        previousIconButton: {
+          sx: {
+            color: "primary.main",
+            "&:hover": { bgcolor: be(r.palette.primary.light, 0.1) }
+          }
+        }
+      },
+      sx: {
+        width: "100%",
+        "& .MuiIconButton-edgeEnd": {
+          color: "primary.main",
+          "&:hover": { bgcolor: be(r.palette.primary.light, 0.1) }
+        }
+      },
+      value: t ? new Date(t * 1e3) : null
+    }
+  ) }) });
+}, Wr = v(Br), $r = ({ creditScore: t, setCreditScore: o }) => {
+  const { finstrong: n } = x(), r = !isNaN(t);
+  return /* @__PURE__ */ e(k, { sx: { p: 24 }, children: /* @__PURE__ */ e(
+    Pe,
+    {
+      error: !r,
+      fullWidth: !0,
+      inputMode: "numeric",
+      inputProps: {
+        noValidate: !0,
+        pattern: "[0-9]*"
+      },
+      label: n.credit_score,
+      onChange: (s) => o(Number(s.target.value)),
+      value: r ? t : ""
+    }
+  ) });
+}, Gr = v($r), Gt = ({ value: t, completeCopy: o }) => /* @__PURE__ */ a(p, { sx: { gap: 8 }, children: [
+  /* @__PURE__ */ e(p, { sx: { flexDirection: "row", gap: 4 }, children: Array.from({ length: 4 }).map((n, r) => /* @__PURE__ */ e(
+    k,
+    {
+      sx: {
+        bgcolor: r < t ? "primary.main" : "neutral.light",
+        borderRadius: "24px",
+        height: 4,
+        width: "100%"
+      }
+    },
+    r
+  )) }),
+  /* @__PURE__ */ a(I, { sx: { color: "text.secondary" }, variant: "body2", children: [
+    t / 4 * 100,
+    "% ",
+    o
+  ] })
+] }), zr = ({
+  completeCopy: t,
+  primaryText: o,
+  secondaryText: n,
+  value: r
+}) => /* @__PURE__ */ a(p, { sx: { gap: 20, p: 24 }, children: [
+  /* @__PURE__ */ a(p, { sx: { gap: 8 }, children: [
+    /* @__PURE__ */ e(Y, { children: o }),
+    /* @__PURE__ */ e(M, { variant: "subtitle1", children: n })
+  ] }),
+  /* @__PURE__ */ e(Gt, { completeCopy: t, value: r })
+] }), dt = {
+  step: A.ConnectAccounts,
+  type: "main"
+}, Er = ({ isOpen: t, onClose: o }) => {
+  const { visibleAccounts: n } = xe(), { calculateHealthScore: r } = R(), { finstrong: s } = x(), { setSelectedAccounts: i } = X(), { addRepeatingTransaction: c, setDateRange: l } = Xe(), { filter: _, setFilter: d, transactions: u } = Bn(), { user: h, userProfile: y, updateUser: f, updateUserProfile: C } = J(), [S, D] = m.useState(h.credit_score || 0), [g, b] = m.useState(
+    dt
+  ), [w, H] = m.useState(1), [N, U] = m.useState(Mt.EveryMonth), [L, O] = m.useState([]), [G, pe] = m.useState(!1), [Ce, ee] = m.useState(!1), [K, ve] = m.useState(h.birthday), [z, we] = m.useState(15), [E, ae] = m.useState("");
+  m.useEffect(() => {
+    l({ start: Tt(ct()), end: At(ct()) });
+  }, []), m.useEffect(() => {
+    d({
+      accounts: n.map((T) => T.guid),
+      dateRange: {
+        start: co(/* @__PURE__ */ new Date(), 90),
+        end: /* @__PURE__ */ new Date()
+      },
+      custom: lt
+    }), i(n);
+  }, [n]);
+  const _e = m.useMemo(
+    () => u.find((T) => T.guid === E),
+    [E, u]
+  ), ue = m.useMemo(() => ({
+    [A.ConnectAccounts]: !0,
+    [A.MonthlyIncome]: !!E,
+    [A.Birthday]: !!h.birthday || !!K,
+    [A.CreditScore]: !!h.credit_score || !!S
+  })[g.step], [S, g, K, E, h]), q = n.length > 0, zt = m.useMemo(() => {
+    const { step: T } = g;
+    let F = 0;
+    return T >= A.MonthlyIncome && q && F++, T >= A.Birthday && L.length && F++, T >= A.CreditScore && (h.birthday || h.credit_score) && F++, F;
+  }, [g.step, q, L.length, h.birthday, h.credit_score]), Et = (T) => {
+    d({
+      ..._,
+      custom: (F) => T ? _o(F, T) : lt(F)
+    });
+  }, Ht = {
+    [A.ConnectAccounts]: {
+      main: q ? /* @__PURE__ */ e(Bt, { shouldShowBalance: !1 }) : null,
+      mainActionContent: q ? s.onboarding_next : s.onboarding_add_accounts,
+      primaryText: s.connect_your_accounts,
+      secondaryText: s.onboarding_connect_your_accounts_secondary
+    },
+    [A.MonthlyIncome]: {
+      detail: /* @__PURE__ */ e(
+        Lr,
+        {
+          firstDay: w,
+          frequency: N,
+          incomeTransactions: L,
+          secondDay: z,
+          setCurrentStep: (T) => {
+            b(T), O((F) => {
+              if (F.some((ie) => ie.guid === E)) return F.filter((ie) => ie.guid !== E);
+              const Te = u.find((ie) => ie.guid === E);
+              return Te ? [...F, { ...Te, firstDay: w, frequency: N, secondDay: z }] : F;
+            });
+          },
+          setFirstDay: H,
+          setFrequency: U,
+          setSecondDay: we,
+          transaction: _e
+        }
+      ),
+      detailActionContent: s.onboarding_confirm_income,
+      main: /* @__PURE__ */ e(
+        po,
+        {
+          onSearch: Et,
+          onSelected: (T) => {
+            b({ step: A.MonthlyIncome, type: "detail" }), ae(T);
+          }
+        }
+      ),
+      mainActionContent: s.onboarding_confirm_income,
+      primaryText: s.onboarding_add_income_primary,
+      secondaryText: s.onboarding_add_income_secondary
+    },
+    [A.Birthday]: {
+      main: /* @__PURE__ */ e(Wr, { selectedDate: K, setSelectedDate: ve }),
+      mainActionContent: s.onboarding_next,
+      primaryText: s.onboarding_birthday_primary,
+      secondaryText: s.onboarding_birthday_secondary
+    },
+    [A.CreditScore]: {
+      main: /* @__PURE__ */ e(Gr, { creditScore: S, setCreditScore: D }),
+      mainActionContent: s.onboarding_next,
+      primaryText: s.onboarding_credit_score_primary,
+      secondaryText: s.onboarding_credit_score_secondary
+    }
+  }, Je = () => {
+    b(dt), pe(!1), ae(""), o();
+  }, et = async () => {
+    pe(!0), await Yt(L), await r(), await C({ ...y, has_completed_finstrong_onboarding: !0 }), Je();
+  }, Nt = () => {
+    if (g.step === A.CreditScore) {
+      et();
+      return;
+    }
+    b({ step: g.step + 1, type: "main" });
+  }, Kt = () => {
+    const { step: T } = g, F = T + 1;
+    switch (T) {
+      case A.Birthday:
+        K && K !== h.birthday && f({ ...h, birthday: K });
+        break;
+      case A.CreditScore:
+        S && S !== h.credit_score && f({ ...h, credit_score: S }), et();
+        return;
+      case A.MonthlyIncome:
+        E && L.findIndex(({ guid: me }) => me === E) === -1 && O((me) => [
+          ...me,
+          { ..._e, firstDay: w, frequency: N, secondDay: z }
+        ]);
+        break;
+      case A.ConnectAccounts:
+        if (!q) {
+          ee(!0);
+          return;
+        }
+        break;
+    }
+    F in A && b({ step: F, type: "main" });
+  }, jt = () => {
+    const { step: T, type: F } = g;
+    if (F === "detail") {
+      b({ step: T, type: "main" });
+      return;
+    }
+    if (T === A.Birthday && L.length) {
+      b({ step: T - 1, type: "detail" });
+      return;
+    }
+    T > A.ConnectAccounts && b({ step: T - 1, type: "main" });
+  }, Yt = async (T) => {
+    for (const F of T) {
+      const {
+        account_guid: me,
+        amount: Te,
+        date: ie,
+        description: qt,
+        feed_description: Ut,
+        firstDay: Qt,
+        frequency: tt,
+        secondDay: Zt,
+        merchant_guid: Jt,
+        payee: en,
+        transaction_type: tn
+      } = F, nn = jn(tt, so(ie)), on = {
+        account_guid: me,
+        amount: Te,
+        created_by: 0,
+        description: en || qt || Ut,
+        merchant_guid: Jt,
+        predicted_occurs_on: io(nn, { representation: "date" }),
+        recurrence_day: Qt,
+        recurrence_type: tt,
+        repeating_transaction_type: Dt.Income,
+        second_recurrence_day: Zt,
+        transaction_type: tn,
+        user_guid: h.guid
+      };
+      await c(on, F);
+    }
+  }, he = Ht[g.step], Ie = g.step === A.ConnectAccounts, Vt = {
+    fullWidth: !0,
+    ...Ie && !q && { startIcon: /* @__PURE__ */ e(mt, {}) }
+  }, Xt = !Ie || Ie && !q;
+  return /* @__PURE__ */ a(m.Fragment, { children: [
+    /* @__PURE__ */ e(
+      ne,
+      {
+        footerStyles: { px: 24, py: 16 },
+        hasSecondaryAction: !Ie,
+        isOpen: t,
+        isPrimaryDisabled: !ue,
+        onClose: Je,
+        onSecondaryAction: jt,
+        primaryButtonProps: Vt,
+        primaryText: he?.mainActionContent,
+        secondaryColor: "primary",
+        secondaryText: s.onboarding_back,
+        title: s.title,
+        ...!G && { onPrimaryAction: Kt },
+        children: /* @__PURE__ */ a(p, { sx: { bgcolor: "background.default", height: "100%" }, children: [
+          G && /* @__PURE__ */ a(p, { sx: { alignItems: "center", gap: 24, position: "relative", px: 16, top: 126 }, children: [
+            /* @__PURE__ */ e("img", { alt: "", src: Ro, style: { minHeight: 100, width: 211 } }),
+            /* @__PURE__ */ e(Be, { children: s.onboarding_calculate_primary }),
+            /* @__PURE__ */ e(M, { sx: { textAlign: "center" }, variant: "subtitle1", children: s.onboarding_calculate_secondary })
+          ] }),
+          he && !G && /* @__PURE__ */ a(m.Fragment, { children: [
+            /* @__PURE__ */ e(
+              zr,
+              {
+                completeCopy: s.complete,
+                primaryText: he.primaryText,
+                secondaryText: he.secondaryText,
+                value: zt
+              }
+            ),
+            g.type === "main" && /* @__PURE__ */ a(k, { sx: { bgcolor: "background.default" }, children: [
+              he.main,
+              Xt && /* @__PURE__ */ e(p, { sx: { alignItems: "center", px: 24, py: 12 }, children: /* @__PURE__ */ e(P, { fullWidth: !0, onClick: Nt, children: s.onboarding_do_it_later }) })
+            ] }),
+            g.type === "detail" && he.detail
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ e(
+      re,
+      {
+        onClose: () => ee(!1),
+        showConnectWidget: Ce,
+        title: s.connect_more_accounts_button
+      }
+    )
+  ] });
+}, Hr = v(Er), Nr = () => {
+  const { finstrong: t } = x(), [o, n] = m.useState(!1);
+  return /* @__PURE__ */ a(m.Fragment, { children: [
+    /* @__PURE__ */ a(
+      p,
+      {
+        sx: {
+          alignItems: "center",
+          gap: 48,
+          pb: 24,
+          pt: 72,
+          px: 16
+        },
+        children: [
+          /* @__PURE__ */ a(p, { sx: { alignItems: { sm: "center" }, gap: 24, width: "100%" }, children: [
+            /* @__PURE__ */ e(k, { sx: { textAlign: "center" }, children: /* @__PURE__ */ e(un, { size: 72 }) }),
+            /* @__PURE__ */ a(p, { sx: { gap: 4, textAlign: "center", width: { sm: 400 } }, children: [
+              /* @__PURE__ */ e(Be, { children: t.onboarding_title }),
+              /* @__PURE__ */ e(M, { sx: { color: "text.secondary" }, variant: "subtitle1", children: t.onboarding_subtitle })
+            ] })
+          ] }),
+          /* @__PURE__ */ e(P, { onClick: () => n(!0), variant: "contained", children: t.onboarding_get_started })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(Hr, { isOpen: o, onClose: () => n(!1) })
+  ] });
+}, Kr = ({ isOpen: t, onClose: o }) => {
+  const { finstrong: n } = x(), r = $(), { updateUser: s, user: i } = J(), [c, l] = m.useState(i.birthday), _ = (u) => {
+    l(Math.floor(new Date(u).getTime() / 1e3));
+  };
+  return /* @__PURE__ */ e(
+    ne,
+    {
+      isOpen: t,
+      onClose: o,
+      onPrimaryAction: () => {
+        !c || c === i.birthday || (s({ ...i, birthday: c }), o());
+      },
+      onSecondaryAction: o,
+      title: n.date_of_birth,
+      children: /* @__PURE__ */ e(p, { sx: { bgcolor: "background.default", height: "100%" }, children: /* @__PURE__ */ e(yo, { dateAdapter: Ot, children: /* @__PURE__ */ e(
+        mo,
+        {
+          disableFuture: !0,
+          onChange: _,
+          slotProps: {
+            nextIconButton: {
+              sx: {
+                color: "primary.main",
+                "&:hover": { bgcolor: be(r.palette.primary.light, 0.1) }
+              }
+            },
+            previousIconButton: {
+              sx: {
+                color: "primary.main",
+                "&:hover": { bgcolor: be(r.palette.primary.light, 0.1) }
+              }
+            }
+          },
+          slots: {
+            actionBar: () => null,
+            toolbar: () => null
+          },
+          sx: {
+            width: "100%",
+            "& .MuiIconButton-edgeEnd": {
+              color: "primary.main",
+              "&:hover": { bgcolor: be(r.palette.primary.light, 0.1) }
+            }
+          },
+          value: c ? new Date(c * 1e3) : /* @__PURE__ */ new Date()
+        }
+      ) }) })
+    }
+  );
+}, jr = v(Kr), Yr = ({ isOpen: t, onClose: o }) => {
+  const { visibleFinstrongAccounts: n } = xe(), {
+    accounts: r,
+    common: s,
+    finstrong: i
+  } = x(), { repeatingTransactions: c } = Xe(), { user: l } = J(), _ = c.reduce((f, C) => {
+    const { repeating_transaction_type: S, transactions: D, recurrence_type: g, amount: b } = C;
+    return S === Dt.Income && (D.length > 0 || g === Mt.EveryYear) ? f + b : f;
+  }, 0), [d, u] = m.useState(null), y = [
+    {
+      dynamicCopy: i.add_profile_item,
+      fallbackLabel: i.monthly_income,
+      icon: /* @__PURE__ */ e(hn, {}),
+      key: te.MonthlyIncome,
+      label: i.monthly_income,
+      value: _
+    },
+    {
+      dynamicCopy: i.add_profile_item,
+      fallbackLabel: i.date_of_birth,
+      icon: /* @__PURE__ */ e(mn, {}),
+      key: te.DateOfBirth,
+      label: i.date_of_birth,
+      value: l.birthday
+    },
+    {
+      dynamicCopy: i.add_profile_item,
+      fallbackLabel: i.credit_score,
+      icon: /* @__PURE__ */ e(Ke, {}),
+      key: te.CreditScore,
+      label: i.credit_score,
+      value: l.credit_score
+    },
+    {
+      fallbackLabel: i.connect_your_accounts,
+      icon: /* @__PURE__ */ e(ut, {}),
+      key: te.Connections,
+      label: i.connections,
+      value: n.length > 0 ? j(
+        i.connected_account,
+        String(n.length),
+        n.length > 1 ? i.accounts : i.account
+      ) : void 0
+    }
+  ].map((f) => Fn(f));
+  return /* @__PURE__ */ a(ne, { isOpen: t, onClose: o, title: i.financial_profile, children: [
+    /* @__PURE__ */ a(p, { sx: { bgcolor: "background.default", height: "100%" }, children: [
+      /* @__PURE__ */ a(p, { sx: { gap: 20, p: 24 }, children: [
+        /* @__PURE__ */ a(p, { sx: { gap: 8 }, children: [
+          /* @__PURE__ */ e(Y, { children: i.your_financial_profile }),
+          /* @__PURE__ */ e(M, { children: i.financial_profile_description })
+        ] }),
+        /* @__PURE__ */ e(
+          Gt,
+          {
+            completeCopy: i.complete,
+            value: y.reduce((f, C) => f + (C.isComplete ? 1 : 0), 0)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e(Rn, { list: y, onClickItem: u }),
+      /* @__PURE__ */ e(k, { sx: { p: 24 }, children: /* @__PURE__ */ e(
+        We,
+        {
+          description: i.connect_more_accounts_to_view_more_accurate_financial_picture,
+          drawerType: "connectDrawer",
+          isDashboard: !0,
+          title: i.dont_see_all_your_accounts,
+          titleDrawer: s.add_accounts
+        }
+      ) })
+    ] }),
     /* @__PURE__ */ e(
-      B,
+      ne,
       {
-        cardState: i.cardState,
-        description: i.description,
-        stateTitle: i.stateTitle,
-        title: i.title
+        isOpen: d === te.MonthlyIncome,
+        onClose: () => u(null),
+        title: s.settings,
+        children: /* @__PURE__ */ e(go, {})
       }
     ),
+    /* @__PURE__ */ e(jr, { isOpen: d === te.DateOfBirth, onClose: () => u(null) }),
+    /* @__PURE__ */ e(Pt, { isOpen: d === te.CreditScore, onClose: () => u(null) }),
     /* @__PURE__ */ e(
-      B,
+      St,
       {
-        cardState: r.cardState,
-        description: r.description,
-        stateTitle: r.stateTitle,
-        title: r.title
+        onClose: () => u(null),
+        showConnectionsWidget: d === te.Connections,
+        title: r.manage_connections
       }
     )
   ] });
-}, Pt = () => {
-  const [n, o] = C.useState(0), { finstrong: t } = S();
-  return /* @__PURE__ */ u(ie, { children: [
-    /* @__PURE__ */ u(
-      rt,
-      {
-        "aria-label": "Key Indicators",
-        centered: !0,
-        onChange: (a, d) => o(d),
-        sx: { mb: 0 },
-        textColor: "primary",
-        value: n,
-        variant: "fullWidth",
-        children: [
-          /* @__PURE__ */ e(
-            ne,
-            {
-              "aria-controls": "spend-details-tabpanel-0",
-              icon: /* @__PURE__ */ e(he, { sx: { mr: 8 } }),
-              iconPosition: "start",
-              id: "spend-details-tab-0",
-              label: t.key_indicators_spend.title,
-              sx: { minHeight: 44 }
-            }
-          ),
-          /* @__PURE__ */ e(
-            ne,
-            {
-              "aria-controls": "save-details-tabpanel-1",
-              icon: /* @__PURE__ */ e(Ge, { sx: { mr: 8 } }),
-              iconPosition: "start",
-              id: "save-details-tab-1",
-              label: t.key_indicators_save.title,
-              sx: { minHeight: 44 }
-            }
-          ),
-          /* @__PURE__ */ e(
-            ne,
-            {
-              "aria-controls": "borrow-details-tabpanel-2",
-              icon: /* @__PURE__ */ e(Le, { sx: { mr: 8 } }),
-              iconPosition: "start",
-              id: "borrow-details-tab-2",
-              label: t.key_indicators_borrow.title,
-              sx: { minHeight: 44 }
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ e(re, { index: 0, name: "spend-details", value: n, children: /* @__PURE__ */ e(wt, {}) }),
-    /* @__PURE__ */ e(re, { index: 1, name: "save-details", value: n, children: /* @__PURE__ */ e(Ft, {}) }),
-    /* @__PURE__ */ e(re, { index: 2, name: "borrow-details", value: n, children: /* @__PURE__ */ e(Rt, {}) })
-  ] });
-}, Gt = ({
-  additionalContent: n,
-  children: o,
-  description: t,
-  drawerTitle: a,
-  isOpen: d,
-  loadConnectAccountsCard: l = !0,
-  onClose: i,
-  stickyComponent: r,
-  title: s
-}) => {
-  const { finstrong: c } = S(), { isCopyLoaded: p } = z();
-  return p ? /* @__PURE__ */ u(V, { isOpen: d, onClose: i, title: a || c.key_indicators, children: [
-    (s || t) && /* @__PURE__ */ u(_, { sx: { p: 24, pb: 0, gap: 8, backgroundColor: "background.paper" }, children: [
-      s && /* @__PURE__ */ e(H, { children: s }),
-      t && /* @__PURE__ */ e(y, { children: t })
-    ] }),
-    r && /* @__PURE__ */ e(
-      x,
-      {
-        sx: {
-          position: "sticky",
-          top: 0,
-          zIndex: 1
-        },
-        children: r
-      }
-    ),
-    n && /* @__PURE__ */ e(x, { children: n }),
-    /* @__PURE__ */ e(fe, {}),
-    /* @__PURE__ */ u(_, { sx: { p: 24, gap: 24 }, children: [
-      o,
-      l && /* @__PURE__ */ e(Q, { isDashboard: !0 })
-    ] })
-  ] }) : /* @__PURE__ */ e(N, {});
-}, Lt = I(Gt), me = ({
-  content: n,
+}, Vr = v(Yr), pt = ({
+  content: t,
   islast: o = !1
-}) => /* @__PURE__ */ u(at, { sx: { minHeight: 0 }, children: [
-  /* @__PURE__ */ u(mt, { children: [
-    /* @__PURE__ */ e(pt, { sx: { bgcolor: "divider", borderWidth: 1, p: 3 } }),
-    !o && /* @__PURE__ */ e(lt, { sx: { bgcolor: "divider", width: 0.1 } })
+}) => /* @__PURE__ */ a(xo, { sx: { minHeight: 0 }, children: [
+  /* @__PURE__ */ a(ko, { children: [
+    /* @__PURE__ */ e(wo, { sx: { bgcolor: "divider", borderWidth: 1, p: 3 } }),
+    !o && /* @__PURE__ */ e(Co, { sx: { bgcolor: "divider", width: 0.1 } })
   ] }),
-  /* @__PURE__ */ e(dt, { sx: { pb: 16, pl: 12, pr: 0, pt: 5 }, children: /* @__PURE__ */ e(y, { fontSize: 13, fontWeight: 400, variant: "subtitle2", children: n }) })
-] }), Et = ({ report: n }) => {
-  const { finstrong: o } = S(), { score_history_drawer_timeline: t } = o, {
-    health_score_point_difference: a,
-    newer_credit_score: d,
-    older_credit_score: l,
-    older_spend_to_income_ratio: i,
-    newer_spend_to_income_ratio: r,
-    older_health_score: s,
-    newer_health_score: c,
-    newer_score_calculated_at: p
-  } = n, h = ge(new Date(p), "MMM d"), m = () => a === 0 ? "info.lighter" : a > 0 ? "success.lighter" : "error.lighter", f = () => a === 0 ? b(t.stayed_at, s) : a > 0 ? t.less_spending : t.more_spending, v = () => {
-    if (a === 0) return null;
-    const T = a > 0 ? t.up_from : t.down_from, R = b(T, s, c);
-    return /* @__PURE__ */ u(ie, { children: [
+  /* @__PURE__ */ e(vo, { sx: { pb: 16, pl: 12, pr: 0, pt: 5 }, children: /* @__PURE__ */ e(M, { fontSize: 13, fontWeight: 400, variant: "subtitle2", children: t }) })
+] }), Xr = ({ report: t }) => {
+  const { finstrong: o } = x(), { score_history_drawer_timeline: n } = o, {
+    health_score_point_difference: r,
+    newer_credit_score: s,
+    older_credit_score: i,
+    older_spend_to_income_ratio: c,
+    newer_spend_to_income_ratio: l,
+    older_health_score: _,
+    newer_health_score: d,
+    newer_score_calculated_at: u
+  } = t, h = bo(new Date(u), "MMM d"), y = () => r === 0 ? "info.lighter" : r > 0 ? "success.lighter" : "error.lighter", f = () => r === 0 ? j(n.stayed_at, _) : r > 0 ? n.less_spending : n.more_spending, C = () => {
+    if (r === 0) return null;
+    const S = r > 0 ? n.up_from : n.down_from, D = j(S, _, d);
+    return /* @__PURE__ */ a(W, { children: [
       /* @__PURE__ */ e(
-        _e,
+        bn,
         {
           fill: !0,
           name: "circle",
           sx: { color: "text.secondary", fontSize: 8, mx: 4, p: 1 }
         }
       ),
-      R
+      D
     ] });
   };
-  return /* @__PURE__ */ e(J, { children: /* @__PURE__ */ u(_, { sx: { backgroundColor: "background.paper" }, children: [
-    /* @__PURE__ */ e(x, { sx: { borderBottom: "1px solid", borderBottomColor: "divider", p: 16 }, children: /* @__PURE__ */ u(
-      _,
+  return /* @__PURE__ */ a(V, { children: [
+    /* @__PURE__ */ e(
+      k,
       {
-        flexDirection: "row",
-        sx: { alignItems: "center", gap: 16, height: 48, width: "100%" },
-        children: [
-          /* @__PURE__ */ e(
-            _,
-            {
-              sx: {
-                alignItems: "center",
-                backgroundColor: m(),
-                borderRadius: 999,
-                height: 48,
-                justifyContent: "center",
-                minWidth: 48
-              },
-              children: /* @__PURE__ */ e(y, { sx: { fontWeight: 600 }, variant: "Body", children: a > 0 ? `+${a}` : a })
-            }
-          ),
-          /* @__PURE__ */ u(_, { sx: { gap: 2, width: "80%" }, children: [
-            /* @__PURE__ */ e(W, { fontWeight: 600, variant: "Body", children: f() }),
-            /* @__PURE__ */ u(W, { sx: { color: "text.secondary" }, variant: "subtitle2", children: [
-              h,
-              " ",
-              v()
-            ] })
-          ] })
-        ]
+        sx: {
+          borderBottomColor: "divider",
+          borderBottomStyle: "solid",
+          borderBottomWidth: r !== 0 ? 1 : 0,
+          p: 16
+        },
+        children: /* @__PURE__ */ a(
+          p,
+          {
+            flexDirection: "row",
+            sx: { alignItems: "center", gap: 16, height: 48, width: "100%" },
+            children: [
+              /* @__PURE__ */ e(
+                p,
+                {
+                  sx: {
+                    alignItems: "center",
+                    backgroundColor: y(),
+                    borderRadius: 999,
+                    height: 48,
+                    justifyContent: "center",
+                    width: 48
+                  },
+                  children: /* @__PURE__ */ e(M, { sx: { fontWeight: 600 }, variant: "Body", children: r > 0 ? `+${r}` : r })
+                }
+              ),
+              /* @__PURE__ */ a(p, { sx: { gap: 2, width: "80%" }, children: [
+                /* @__PURE__ */ e(I, { fontWeight: 600, variant: "Body", children: f() }),
+                /* @__PURE__ */ a(I, { sx: { color: "text.secondary" }, variant: "subtitle2", children: [
+                  h,
+                  " ",
+                  C()
+                ] })
+              ] })
+            ]
+          }
+        )
       }
-    ) }),
-    a !== 0 && /* @__PURE__ */ e(x, { sx: { color: "text.secondary", pb: 8, pl: 32, pr: 16, pt: 12 }, children: /* @__PURE__ */ u(
-      st,
+    ),
+    r !== 0 && /* @__PURE__ */ e(k, { sx: { color: "text.secondary", pb: 8, pl: 32, pr: 16, pt: 12 }, children: /* @__PURE__ */ a(
+      fo,
       {
         sx: {
-          [`& .${ct.root}:before`]: {
+          [`& .${So.root}:before`]: {
             flex: 0,
             padding: 0
           },
@@ -1232,22 +3100,22 @@ const ht = ({ list: n, onClickItem: o }) => /* @__PURE__ */ e(x, { sx: { bgcolor
         },
         children: [
           /* @__PURE__ */ e(
-            me,
+            pt,
             {
-              content: b(
-                t.spend_to_income_description,
-                pe(i),
-                pe(r)
+              content: j(
+                n.spend_to_income_description,
+                Re(c),
+                Re(l)
               )
             }
           ),
           /* @__PURE__ */ e(
-            me,
+            pt,
             {
-              content: b(
-                t.credit_score_description,
-                l,
-                d
+              content: j(
+                n.credit_score_description,
+                i,
+                s
               ),
               islast: !0
             }
@@ -1255,208 +3123,445 @@ const ht = ({ list: n, onClickItem: o }) => /* @__PURE__ */ e(x, { sx: { bgcolor
         ]
       }
     ) })
-  ] }) });
-}, Wt = I(Et), Bt = ({ isOpen: n, onClose: o }) => {
-  const t = E(), { finstrong: a } = S(), { isCopyLoaded: d, isInitialized: l } = z(), { healthScore: i, healthScoreChangeReports: r, augmentedChartData: s } = $();
-  if (!d || !l) return /* @__PURE__ */ e(N, {});
-  const c = se(i.health_score || 0, a), p = r.slice().reverse();
+  ] });
+}, qr = v(Xr), Ur = ({ isOpen: t, onClose: o }) => {
+  const n = $(), { finstrong: r } = x(), { isCopyLoaded: s, isInitialized: i } = X(), { augmentedChartData: c, healthScore: l, healthScoreChangeReports: _, peerScore: d } = R();
+  if (!s || !i) return /* @__PURE__ */ e(oe, {});
+  const u = je(l.health_score || 0, r), h = _.slice().reverse();
   return /* @__PURE__ */ e(
     Lt,
     {
-      additionalContent: /* @__PURE__ */ e(_, { sx: { pl: 18, backgroundColor: "background.paper" }, children: /* @__PURE__ */ e(
-        xe,
+      additionalContent: /* @__PURE__ */ e(p, { sx: { backgroundColor: "background.paper" }, children: /* @__PURE__ */ e(
+        qe,
         {
-          axisColor: t.palette.divider,
+          axisColor: n.palette.divider,
           baseline: "min",
-          colors: [t.palette.primary.main],
+          colors: [n.palette.primary.main],
           curveType: "natural",
-          datasets: [s],
+          datasets: [c],
           height: 160,
-          labels: [a.key_indicators_label],
-          margin: { top: 12, left: 24 },
+          isGraphClippingXAxis: !0,
+          labels: [r.key_indicators_label],
+          margin: { top: 24, bottom: 32, right: 24, left: 45 },
+          peerAverage: Math.round(d?.average_health_score?.average_health_score || 0),
           showArea: !0,
           showAverage: !0,
-          title: a.peer_average,
+          title: r.peer_average,
           useCustomMark: !0
         }
       ) }),
-      drawerTitle: a.score_history,
-      isOpen: n,
+      drawerTitle: r.score_history,
+      isOpen: t,
       loadConnectAccountsCard: !1,
       onClose: o,
-      stickyComponent: /* @__PURE__ */ u(
-        _,
+      stickyComponent: /* @__PURE__ */ e(
+        p,
         {
-          direction: "row",
-          sx: { backgroundColor: "background.paper", gap: 16, pb: 12, pt: 8, px: 24 },
-          children: [
-            /* @__PURE__ */ e(x, { children: /* @__PURE__ */ e(
-              ke,
+          sx: {
+            backgroundColor: "background.paper",
+            borderBottom: "1px solid",
+            borderColor: "divider",
+            pb: 11,
+            pt: 8,
+            px: 24
+          },
+          children: /* @__PURE__ */ a(p, { sx: { alignItems: "center", flexDirection: "row", gap: 16 }, children: [
+            /* @__PURE__ */ e(
+              Rt,
               {
-                arcRadius: 20,
-                healthScore: i?.health_score,
+                arcRadius: 24,
+                healthScore: l?.health_score,
+                margin: { top: 9 },
                 size: "SM"
               }
-            ) }),
-            /* @__PURE__ */ u(x, { children: [
-              /* @__PURE__ */ e(y, { fontSize: 18, fontWeight: 700, sx: { mb: 4 }, variant: "subtitle1", children: c.status }),
-              /* @__PURE__ */ e(y, { variant: "caption", children: c.description })
+            ),
+            /* @__PURE__ */ a(p, { sx: { gap: 4 }, children: [
+              /* @__PURE__ */ e(M, { variant: "h3", children: u.status }),
+              /* @__PURE__ */ e(M, { variant: "XSmall", children: u.description })
             ] })
-          ]
+          ] })
         }
       ),
-      children: /* @__PURE__ */ e(_, { sx: { gap: 16 }, children: p.map((h, m) => /* @__PURE__ */ e(Wt, { report: h }, m)) })
+      children: /* @__PURE__ */ e(p, { sx: { gap: 16 }, children: h.map((y, f) => /* @__PURE__ */ e(qr, { report: y }, f)) })
     }
   );
-}, Ht = I(Bt), zt = ({ onClick: n }) => {
-  const { finstrong: o } = S(), { isCopyLoaded: t } = z();
-  return t ? /* @__PURE__ */ u(_, { sx: { alignItems: "center", gap: 12, pt: 12, pb: 32 }, children: [
-    /* @__PURE__ */ e(Ee, { size: 48 }),
-    /* @__PURE__ */ u(_, { sx: { alignItems: "center", gap: 4, textAlign: "center" }, children: [
-      /* @__PURE__ */ e(H, { children: o.missing_data_title }),
-      /* @__PURE__ */ e(y, { sx: { width: { sm: 348 } }, variant: "subtitle1", children: o.missing_data_description })
+}, Qr = v(Ur), Zr = ({ copy: t }) => {
+  const o = $(), n = [
+    o.palette.chartMono.chartMono5,
+    o.palette.chartMono.chartMono4,
+    o.palette.chartMono.chartMono3,
+    o.palette.chartMono.chartMono2
+  ];
+  return /* @__PURE__ */ a(p, { sx: { gap: 8 }, children: [
+    /* @__PURE__ */ e(p, { sx: { flexDirection: "row", gap: 8, px: 2 }, children: [
+      { color: "chartMono.chartMono2", text: t.vulnerable, value: "0-25" },
+      { color: "chartMono.chartMono3", text: t.building, value: "26-50" },
+      { color: "chartMono.chartMono4", text: t.stable, value: "51-75" },
+      { color: "chartMono.chartMono5", text: t.strong, value: "76-100" }
+    ].map(({ color: r, text: s, value: i }) => /* @__PURE__ */ a(p, { sx: { gap: 4, textAlign: "center", width: "100%" }, children: [
+      /* @__PURE__ */ a(k, { children: [
+        /* @__PURE__ */ e(M, { sx: { fontWeight: 700, textTransform: "uppercase" }, variant: "caption", children: s }),
+        /* @__PURE__ */ a(I, { sx: { color: "text.secondary" }, variant: "caption", children: [
+          "(",
+          i,
+          ")"
+        ] })
+      ] }),
+      /* @__PURE__ */ e(k, { sx: { border: "2px solid", borderColor: r, borderRadius: "3px" } })
+    ] }, s)) }),
+    /* @__PURE__ */ a(k, { children: [
+      /* @__PURE__ */ e(
+        k,
+        {
+          sx: {
+            background: `linear-gradient(to left, ${n.join(", ")})`,
+            borderRadius: "4px",
+            height: 16
+          }
+        }
+      ),
+      /* @__PURE__ */ e(p, { sx: { flexDirection: "row", justifyContent: "space-between" }, children: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100].map((r) => /* @__PURE__ */ a(
+        p,
+        {
+          sx: { alignItems: "center", height: 20, justifyContent: "space-between", width: 24 },
+          children: [
+            /* @__PURE__ */ e(
+              k,
+              {
+                sx: {
+                  borderBottom: "1px solid",
+                  borderColor: "divider",
+                  position: "relative",
+                  rotate: "90deg",
+                  top: 3.5,
+                  width: 8
+                }
+              }
+            ),
+            /* @__PURE__ */ e(I, { sx: { color: "text.secondary" }, variant: "tiny", children: r })
+          ]
+        },
+        r
+      )) })
+    ] })
+  ] });
+}, Jr = ({ isOpen: t, onClose: o }) => {
+  const { finstrong: n } = x(), { isCopyLoaded: r } = X();
+  return r ? /* @__PURE__ */ e(ne, { isOpen: t, onClose: o, title: n.score_rubric, children: /* @__PURE__ */ a(p, { sx: { bgcolor: "background.default", gap: 36, height: "100%", p: 24 }, children: [
+    /* @__PURE__ */ a(p, { sx: { gap: 20 }, children: [
+      /* @__PURE__ */ a(p, { sx: { gap: 8 }, children: [
+        /* @__PURE__ */ e(Y, { sx: { textWrap: "wrap" }, children: n.your_path_to_financial_freedom }),
+        /* @__PURE__ */ e(M, { variant: "subtitle1", children: n.finstrong_freedom_description })
+      ] }),
+      /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e(Zr, { copy: n }) })
+    ] }),
+    /* @__PURE__ */ a(p, { sx: { gap: 12 }, children: [
+      /* @__PURE__ */ e(I, { sx: { fontWeight: 600 }, variant: "body1", children: n.how_do_we_do_this }),
+      /* @__PURE__ */ a(
+        Ne,
+        {
+          component: "ol",
+          sx: {
+            listStyleType: "decimal",
+            pl: 20,
+            pr: 16,
+            "& li": {
+              "::marker": {
+                fontWeight: 600
+              }
+            },
+            "& .MuiListItemText-secondary": {
+              fontSize: 15,
+              lineHeight: "24px",
+              pt: 4
+            }
+          },
+          children: [
+            /* @__PURE__ */ e(ge, { sx: { display: "list-item" }, children: /* @__PURE__ */ e(
+              ye,
+              {
+                primary: n.understand_your_habits,
+                secondary: n.understand_your_habits_description
+              }
+            ) }),
+            /* @__PURE__ */ e(ge, { sx: { display: "list-item", pt: 16 }, children: /* @__PURE__ */ e(
+              ye,
+              {
+                primary: n.see_whats_possible,
+                secondary: n.see_whats_possible_description
+              }
+            ) })
+          ]
+        }
+      )
     ] }),
-    /* @__PURE__ */ e(x, { children: /* @__PURE__ */ e(
-      q,
+    /* @__PURE__ */ a(p, { sx: { gap: 4 }, children: [
+      /* @__PURE__ */ e(I, { sx: { fontWeight: 600, pb: 4 }, variant: "body1", children: n.we_ask_questions }),
+      /* @__PURE__ */ a(
+        Ne,
+        {
+          component: "ol",
+          sx: {
+            listStyleType: "initial",
+            pl: 20,
+            pr: 16,
+            "& li": {
+              minHeight: "max-content",
+              "::marker": {
+                color: "text.secondary",
+                fontWeight: 600
+              }
+            },
+            "& .MuiListItemText-secondary": {
+              fontSize: 15,
+              lineHeight: "24px"
+            }
+          },
+          children: [
+            /* @__PURE__ */ e(ge, { sx: { display: "list-item" }, children: /* @__PURE__ */ e(ye, { secondary: n.we_ask_questions_description_1 }) }),
+            /* @__PURE__ */ e(ge, { sx: { display: "list-item" }, children: /* @__PURE__ */ e(ye, { secondary: n.we_ask_questions_description_2 }) })
+          ]
+        }
+      )
+    ] })
+  ] }) }) : /* @__PURE__ */ e(oe, {});
+}, ea = v(Jr), ta = v(() => {
+  const [t, o] = m.useState(!1), n = $(), [r, { width: s }] = vt(), { finstrong: i } = x(), { isCopyLoaded: c, isInitialized: l } = X(), { healthScore: _, healthScoreChange: d } = R(), u = n.palette.mode === "dark", h = je(_?.health_score, i);
+  return !c || !l ? /* @__PURE__ */ e(oe, {}) : /* @__PURE__ */ a(V, { ref: r, sx: { p: 16, display: "flex", flexDirection: "column", gap: 8 }, children: [
+    /* @__PURE__ */ e(
+      To,
       {
-        endIcon: /* @__PURE__ */ e(j, {}),
-        onClick: n,
-        size: "small",
+        action: /* @__PURE__ */ e(
+          P,
+          {
+            endIcon: /* @__PURE__ */ e(Z, {}),
+            onClick: () => o(!0),
+            sx: {
+              fontSize: 13,
+              lineHeight: "16px",
+              fontWeight: 600,
+              color: "primary.main"
+            },
+            variant: "text",
+            children: i.financial_strength_header_action
+          }
+        ),
+        subheader: /* @__PURE__ */ e(Y, { color: "text.primary", children: i.financial_strength_header }),
         sx: {
-          fontSize: 13,
-          ":hover": {
-            bgcolor: "transparent"
+          p: 0,
+          "& .MuiCardHeader-content": {
+            overflow: "hidden"
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ e(p, { sx: { justifyContent: "center", alignItems: "center", pb: 4, pt: 20, px: 16 }, children: /* @__PURE__ */ e(
+      Rt,
+      {
+        arcRadius: s <= 323 ? 72.5 : 154,
+        footerCenterContent: d,
+        healthScore: _?.health_score || 0,
+        size: s <= 323 ? "M" : "L"
+      }
+    ) }),
+    _?.health_score ? /* @__PURE__ */ a(
+      Mo,
+      {
+        sx: {
+          px: 16,
+          backgroundColor: u ? "grey.800" : "grey.50",
+          //TODO: Need to change the background color to palette (supporting both darkmode and lightmode)
+          "&.Mui-expanded": {
+            m: 0
+          },
+          "&::before": {
+            display: "none"
           }
         },
-        variant: "text",
-        children: o.connect_more_accounts_button
+        children: [
+          /* @__PURE__ */ e(
+            Io,
+            {
+              expandIcon: /* @__PURE__ */ e(gn, { size: 20 }),
+              sx: {
+                height: 52,
+                p: 0,
+                "&.Mui-expanded": {
+                  minHeight: 0
+                }
+              },
+              children: /* @__PURE__ */ e(M, { sx: { fontWeight: 600 }, variant: "body1", children: i.accordion_title_text })
+            }
+          ),
+          /* @__PURE__ */ e(Do, { sx: { "&.MuiAccordionDetails-root": { padding: 0, pb: 16 } }, children: /* @__PURE__ */ e(M, { variant: "subtitle1", children: h.scoreContent }) })
+        ]
       }
-    ) })
-  ] }) : /* @__PURE__ */ e(N, {});
-}, $t = I(zt), Nt = ({ onBackClick: n, sx: o }) => {
-  const t = E(), { onLoad: a } = Ke(), { visibleAccounts: d } = ye(), { dateRange: l, isDataLoaded: i, loadBudgetData: r, setTheme: s } = be(), { reloadCategoryTotals: c } = Xe(), { augmentedChartData: p, calculateHealthScore: h, healthScore: m, loadAugmentedChartData: f } = $(), { finstrong: v, connect: T } = S(), { isCopyLoaded: R, isInitialized: w, selectedAccounts: L, setSelectedAccounts: K } = z(), { isMobile: P } = Se(), [G, k] = C.useState(!1);
-  C.useEffect(() => {
-    s(t);
-  }, []), C.useEffect(() => K(d), [d]), C.useEffect(() => {
-    w && (h().finally(), f().finally(() => {
-      a?.("FinstrongWidget");
+    ) : /* @__PURE__ */ e(
+      We,
+      {
+        buttonText: i.connect_more_accounts_title,
+        description: i.health_score_zero_description,
+        drawerType: "connectDrawer",
+        hasIcon: !1,
+        isDashboard: !0,
+        sx: {
+          backgroundColor: u ? "grey.800" : "grey.50",
+          //TODO: Need to change the background color to palette (supporting both darkmode and lightmode)
+          ".connect-more-accounts-title": {
+            fontWeight: 600,
+            lineHeight: "20px",
+            color: "text.primary"
+          },
+          ".connect-more-accounts-description": { color: "text.primary" }
+        },
+        title: i.health_score_zero_title
+      }
+    ),
+    /* @__PURE__ */ e(
+      ea,
+      {
+        isOpen: t,
+        onClose: () => o(!1)
+      }
+    )
+  ] });
+}), na = ({ onBackClick: t, sx: o, onPrimaryCtaClick: n }) => {
+  const { visibleAccounts: r } = xe(), { dateRange: s, isDataLoaded: i, loadBudgetData: c, setTheme: l } = Wn(), { reloadCategoryTotals: _ } = Ve(), d = R(), {
+    augmentedChartData: u,
+    calculateHealthScore: h,
+    healthScore: y,
+    loadAugmentedChartData: f,
+    loadMonthlySummaries: C,
+    loadPeerScore: S,
+    peerScore: D
+  } = d, { finstrong: g, connect: b } = x(), { isCopyLoaded: w, isInitialized: H } = X(), { onLoad: N } = $n(), { loadRepeatingTransactions: U } = Xe(), { isMobile: L } = Qe(), O = $(), { userProfile: G } = J(), [pe, Ce] = m.useState(!1), [ee, K] = m.useState(!1), [ve, z] = m.useState(!1), [we, E] = m.useState(!1);
+  if (m.useEffect(() => {
+    l(O);
+  }, []), m.useEffect(() => {
+    n && (d.handleFinstrongWidgetPrimaryCtaClick = n);
+  }, [n, d]), m.useEffect(() => {
+    H && (C().finally(), S().finally(), h().finally(), f().finally(() => {
+      N?.("FinstrongWidget");
     }));
-  }, [w]), C.useEffect(() => {
-    w && (c(L, l.start, l.end), i || r());
-  }, [l, i, w, L]);
-  const [O, F] = C.useState(!1), [Z, U] = C.useState(!1);
-  if (!R || !w) return /* @__PURE__ */ e(N, {});
-  const ee = () => {
-  }, te = () => F(!0);
-  return /* @__PURE__ */ u(
-    ut,
+  }, [H]), m.useEffect(() => {
+    H && (_(r, s.start, s.end).finally(() => {
+      Ce(!0);
+    }), i || (c(), U().finally()));
+  }, [s, i, H, r]), !w || !H || !pe) return /* @__PURE__ */ e(oe, {});
+  const ae = () => K(!0), _e = Math.round(D?.average_health_score?.average_health_score || 0);
+  return /* @__PURE__ */ a(
+    Ao,
     {
-      accountOptions: d,
       actions: [
         {
           iconName: "person",
-          label: v.profile,
-          onClick: te
+          label: g.profile,
+          onClick: ae
         }
       ],
       hasDivider: !0,
-      onAccountsFilterClick: ee,
-      onBackClick: n,
+      onBackClick: t,
       sx: o,
-      title: v.title,
+      title: g.title,
       children: [
-        /* @__PURE__ */ u(
-          _,
+        G.has_completed_finstrong_onboarding ? /* @__PURE__ */ a(
+          p,
           {
             sx: {
+              bgcolor: "background.default",
               flexDirection: { md: "row" },
               gap: 24,
               justifyContent: "center",
-              pt: P ? 24 : 16,
+              pt: L ? 24 : 16,
               px: 24
             },
             children: [
-              /* @__PURE__ */ u(_, { sx: { gap: 24, width: { md: 432 } }, children: [
-                /* @__PURE__ */ e(vt, {}),
+              /* @__PURE__ */ a(p, { sx: { gap: 24, width: { md: 432 }, height: "100%" }, children: [
+                /* @__PURE__ */ e(ta, {}),
                 /* @__PURE__ */ e(
-                  Q,
+                  We,
                   {
-                    description: v.connect_more_accounts_description,
-                    title: v.connect_more_accounts_title
+                    description: g.connect_more_accounts_description,
+                    drawerType: "connectDrawer",
+                    title: g.connect_more_accounts_title
                   }
                 )
               ] }),
-              /* @__PURE__ */ e(_, { sx: { maxWidth: 848, minWidth: 288, width: { md: 720 } }, children: /* @__PURE__ */ u(J, { sx: { background: t.palette.background.paper, p: 16 }, children: [
-                /* @__PURE__ */ u(_, { direction: "row", sx: { alignItems: "center", justifyContent: "space-between" }, children: [
-                  /* @__PURE__ */ e(H, { children: v.key_indicators }),
+              /* @__PURE__ */ e(p, { sx: { maxWidth: 848, minWidth: 288, width: { md: 720 } }, children: /* @__PURE__ */ a(V, { sx: { height: "100%", p: 16 }, children: [
+                /* @__PURE__ */ a(p, { direction: "row", sx: { alignItems: "center", justifyContent: "space-between" }, children: [
+                  /* @__PURE__ */ e(Y, { children: g.key_indicators }),
                   /* @__PURE__ */ e(
-                    q,
+                    P,
                     {
-                      endIcon: /* @__PURE__ */ e(j, {}),
-                      onClick: () => U(!0),
+                      endIcon: /* @__PURE__ */ e(Z, {}),
+                      onClick: () => z(!0),
                       sx: {
                         fontSize: 13
                       },
                       variant: "text",
-                      children: v.whats_changed
+                      children: g.whats_changed
                     }
                   )
                 ] }),
-                p.length ? /* @__PURE__ */ e(
-                  xe,
+                u.length ? /* @__PURE__ */ e(
+                  qe,
                   {
-                    axisColor: t.palette.divider,
+                    axisColor: O.palette.divider,
                     baseline: "min",
-                    colors: [t.palette.primary.main],
+                    colors: [O.palette.primary.main],
                     curveType: "natural",
+                    customLegendBoxSx: { borderRadius: "2px" },
+                    customLegendSx: { left: 0 },
                     customLegendVariant: "XSmall",
-                    datasets: [p],
+                    datasets: [u],
                     height: 300,
                     isGraphClippingXAxis: !0,
-                    labelBackgroundColor: t.palette.border.dark,
-                    labelFontColor: t.palette.common.white,
-                    labelFontSize: typeof t.typography.XSmall?.fontSize == "string" ? parseFloat(t.typography.XSmall.fontSize) : t.typography.XSmall?.fontSize,
-                    labels: [v.key_indicators_label],
-                    margin: { right: 20, left: 25 },
+                    labelBackgroundColor: O.palette.border.dark,
+                    labelFontColor: O.palette.common.white,
+                    labelFontSize: typeof O.typography.XSmall?.fontSize == "string" ? parseFloat(O.typography.XSmall.fontSize) : O.typography.XSmall?.fontSize,
+                    labels: [g.key_indicators_label],
+                    margin: { right: 0, left: 25 },
+                    peerAverage: _e,
                     showArea: !0,
                     showAverage: !0,
                     showLegend: !0,
                     showMarkLabel: !0,
                     showXAxis: !0,
-                    title: v.peer_average,
-                    useCustomMark: !0
+                    title: g.peer_average,
+                    useCustomMark: !0,
+                    xAxisScaleType: "band"
                   }
-                ) : /* @__PURE__ */ e($t, { onClick: () => k(!0) }),
-                m.health_score !== null && /* @__PURE__ */ e(Pt, {})
+                ) : /* @__PURE__ */ e(Rr, { onClick: () => E(!0) }),
+                y.health_score !== null && /* @__PURE__ */ e(Or, {})
               ] }) })
             ]
           }
-        ),
-        /* @__PURE__ */ e(Tt, { isOpen: O, onClose: () => F(!1) }),
+        ) : /* @__PURE__ */ e(Nr, {}),
+        /* @__PURE__ */ e(Vr, { isOpen: ee, onClose: () => K(!1) }),
         /* @__PURE__ */ e(
-          Ce,
+          re,
           {
-            onClose: () => k(!1),
-            showConnectWidget: G,
-            title: T.mini_title
+            onClose: () => E(!1),
+            showConnectWidget: we,
+            title: b.mini_title
           }
         ),
         /* @__PURE__ */ e(
-          Ht,
+          Qr,
           {
-            isOpen: Z,
-            onClose: () => U(!1)
+            isOpen: ve,
+            onClose: () => z(!1)
           }
         )
       ]
     }
   );
-}, zo = I(Nt);
+}, fi = v(na);
 export {
-  Ho as CreditScoreGraph,
-  ve as DialScoreCard,
-  ke as FinancialStrengthGraph,
-  Ko as FinstrongApi,
-  Xo as FinstrongStore,
-  zo as FinstrongWidget
+  Fo as CreditScoreGraph,
+  Ft as DialScoreCard,
+  Rt as FinancialStrengthGraph,
+  Ci as FinstrongApi,
+  vi as FinstrongStore,
+  fi as FinstrongWidget
 };