@mx-cartographer/experiences 7.6.2 → 7.6.3

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## [7.6.3] - 01-15-2026
+
+- **FIXED** - Finstrong | Mobile key Indicators Styling Issues
+
 ## [7.6.2] - 01-14-2026
 
 - **UPDATED** - Hover, axes, titles, descriptions, role for Account Details charts

package/dist/finstrong/index.es.js

@@ -9,7 +9,7 @@ import { g as gn, a as yn, r as Je, b as bn, c as He, d as ht, C as we, e as ke,
 import { y as bi, F as fi } from "../FinstrongStore-DzK8bMoz.mjs";
 import * as nt from "d3";
 import { observer as v } from "mobx-react-lite";
-import { u as S, b as q, a as Ne, o as ee, z as F, p as An, d as Se, m as je, f as Tn, j as Ke, h as On, i as Rn } from "../hooks-ZMp65DFz.mjs";
+import { u as S, b as U, a as Ne, o as ee, z as F, p as An, d as Se, m as je, f as Tn, j as Ke, h as On, i as Rn } from "../hooks-ZMp65DFz.mjs";
 import { L as te } from "../Loader-DUaFpDGv.mjs";
 import m from "react";
 import P from "@mui/material/Button";
@@ -122,7 +122,7 @@ const Mo = ({
         x2: i - c * 0.8 * Math.cos(Math.PI / 1.35),
         y1: l + c * 0.8 * Math.sin(Math.PI / 1.35),
         y2: l - c * 0.8 * Math.sin(Math.PI / 1.35),
-        children: w.map((B, U) => /* @__PURE__ */ e("stop", { offset: B.offset, stopColor: B.color }, U))
+        children: w.map((B, Y) => /* @__PURE__ */ e("stop", { offset: B.offset, stopColor: B.color }, Y))
       }
     ) })
   ] });
@@ -141,7 +141,7 @@ const Mo = ({
   footerRightContent: u,
   isFinacialStrengthGraph: y = !1
 }) => {
-  const f = G(), w = -Math.PI / 1.35, x = Math.PI / 1.35, D = x - w, C = D / (i - s), g = (o - s) * C, b = w + g + 0.02, L = n !== "SM" ? 0.1 : 0.12, B = t, U = t * (1 - L), T = B * 2, $ = T / 2, z = T / 2, pe = (U + B) / 2, ve = o !== 25 && o !== 50 && o !== 75 && o !== 100 ? 0 : 0.12, [Q, X] = bn(pe, b, ve), _e = o / 25, H = {
+  const f = G(), w = -Math.PI / 1.35, x = Math.PI / 1.35, D = x - w, C = D / (i - s), g = (o - s) * C, b = w + g + 0.02, L = n !== "SM" ? 0.1 : 0.12, B = t, Y = t * (1 - L), T = B * 2, $ = T / 2, z = T / 2, pe = (Y + B) / 2, ve = o !== 25 && o !== 50 && o !== 75 && o !== 100 ? 0 : 0.12, [Q, X] = bn(pe, b, ve), _e = o / 25, H = {
     L: { markerSize: 12, healthScoreFontSize: 64 },
     M: { markerSize: 8, healthScoreFontSize: 48 },
     SM: { markerSize: 3, healthScoreFontSize: 14 }
@@ -172,7 +172,7 @@ const Mo = ({
             series: [
               {
                 data: r,
-                innerRadius: U,
+                innerRadius: Y,
                 outerRadius: B,
                 startAngle: Math.round(Je(w)),
                 // Use Math.degrees to convert
@@ -182,17 +182,17 @@ const Mo = ({
             ],
             skipAnimation: !0,
             slots: {
-              pieArc: (Y) => /* @__PURE__ */ e(
+              pieArc: (q) => /* @__PURE__ */ e(
                 Mo,
                 {
-                  arcColor: Y.color,
+                  arcColor: q.color,
                   arcRadius: t,
                   arcStartAngle: w,
                   centerX: $,
                   centerY: z,
-                  dataIndex: Y.dataIndex,
+                  dataIndex: q.dataIndex,
                   dialScoreData: r,
-                  innerArcRadius: U,
+                  innerArcRadius: Y,
                   isFinacialStrengthGraph: y,
                   outterArcRadius: B,
                   progressEndAngle: b,
@@ -402,7 +402,7 @@ const Mo = ({
         value: 12,
         color: c ? we.EXCEPTIONAL : ke.EXCEPTIONAL
       }
-    ], { finstrong: d } = S(), { isCopyLoaded: h } = q();
+    ], { finstrong: d } = S(), { isCopyLoaded: h } = U();
     if (!h) return /* @__PURE__ */ e(te, {});
     const { status: u, color: y = "none" } = ht(
       n,
@@ -701,7 +701,7 @@ const Io = "https://content.moneydesktop.com/storage/MD_Assets/serenity/loading_
   title: h,
   drawerType: u
 }) => {
-  const { finstrong: y } = S(), { isCopyLoaded: f } = q();
+  const { finstrong: y } = S(), { isCopyLoaded: f } = U();
   return f ? /* @__PURE__ */ e(oe, { isOpen: l, onClose: _, title: i || y.key_indicators, children: /* @__PURE__ */ a(p, { sx: { backgroundColor: "background.default", height: "100%" }, children: [
     (h || s) && /* @__PURE__ */ a(
       p,
@@ -748,7 +748,7 @@ const Io = "https://content.moneydesktop.com/storage/MD_Assets/serenity/loading_
   shouldShowBalance: o = !0,
   loadAccounts: n
 }) => {
-  const { config: r } = Ne(), { accounts: s } = S(), { selectedAccounts: i } = q(), l = m.useCallback(
+  const { config: r } = Ne(), { accounts: s } = S(), { selectedAccounts: i } = U(), l = m.useCallback(
     (_) => {
       t?.(_);
     },
@@ -799,7 +799,7 @@ const Io = "https://content.moneydesktop.com/storage/MD_Assets/serenity/loading_
     );
   }) }) : null;
 }, Lt = v(Po), Wo = ({ loadAccounts: t, loadMoreLabel: o }) => {
-  const n = G(), { config: r } = Ne(), { connect: s, finstrong: i } = S(), { accounts: l } = S(), { selectedAccounts: c } = q(), [_, d] = m.useState(!1), [h, u] = m.useState(!1), y = m.useMemo(
+  const n = G(), { config: r } = Ne(), { connect: s, finstrong: i } = S(), { accounts: l } = S(), { selectedAccounts: c } = U(), [_, d] = m.useState(!1), [h, u] = m.useState(!1), y = m.useMemo(
     () => c.filter(
       (x) => t ? t.includes(x.account_type) : !0
     ),
@@ -2478,7 +2478,7 @@ const $o = ({ total: t }) => {
     /* @__PURE__ */ e(ce, { index: 2, name: "borrow-details", value: t, children: /* @__PURE__ */ e(wr, {}) })
   ] });
 }, Mr = v(kr), Dr = ({ onClick: t }) => {
-  const { finstrong: o } = S(), { isCopyLoaded: n } = q();
+  const { finstrong: o } = S(), { isCopyLoaded: n } = U();
   return n ? /* @__PURE__ */ a(p, { sx: { alignItems: "center", gap: 12, pt: 12, pb: 32 }, children: [
     /* @__PURE__ */ e(pt, { size: 48 }),
     /* @__PURE__ */ a(p, { sx: { alignItems: "center", gap: 4, textAlign: "center" }, children: [
@@ -2634,9 +2634,9 @@ const $o = ({ total: t }) => {
   step: O.ConnectAccounts,
   type: "main"
 }, Pr = ({ isOpen: t, onClose: o }) => {
-  const { visibleAccounts: n } = Se(), { calculateHealthScore: r } = F(), { finstrong: s } = S(), { setSelectedAccounts: i } = q(), { addRepeatingTransaction: l, setDateRange: c } = Ke(), { filter: _, setFilter: d, transactions: h } = On(), { user: u, userProfile: y, updateUser: f, updateUserProfile: w } = ee(), [x, D] = m.useState(u.credit_score || 0), [C, g] = m.useState(
+  const { visibleAccounts: n } = Se(), { calculateHealthScore: r } = F(), { finstrong: s } = S(), { setSelectedAccounts: i } = U(), { addRepeatingTransaction: l, setDateRange: c } = Ke(), { filter: _, setFilter: d, transactions: h } = On(), { user: u, userProfile: y, updateUser: f, updateUserProfile: w } = ee(), [x, D] = m.useState(u.credit_score || 0), [C, g] = m.useState(
     it
-  ), [b, L] = m.useState(1), [B, U] = m.useState(wt.EveryMonth), [T, $] = m.useState([]), [z, pe] = m.useState(!1), [ve, Q] = m.useState(!1), [X, _e] = m.useState(u.birthday), [H, he] = m.useState(15), [N, ae] = m.useState("");
+  ), [b, L] = m.useState(1), [B, Y] = m.useState(wt.EveryMonth), [T, $] = m.useState([]), [z, pe] = m.useState(!1), [ve, Q] = m.useState(!1), [X, _e] = m.useState(u.birthday), [H, he] = m.useState(15), [N, ae] = m.useState("");
   m.useEffect(() => {
     c({ start: Dt(rt()), end: It(rt()) });
   }, []), m.useEffect(() => {
@@ -2657,19 +2657,19 @@ const $o = ({ total: t }) => {
     [O.MonthlyIncome]: !!N,
     [O.Birthday]: !!u.birthday || !!X,
     [O.CreditScore]: !!u.credit_score || !!x
-  })[C.step], [x, C, X, N, u]), Y = n.length > 0, $t = m.useMemo(() => {
+  })[C.step], [x, C, X, N, u]), q = n.length > 0, $t = m.useMemo(() => {
     const { step: A } = C;
     let R = 0;
-    return A >= O.MonthlyIncome && Y && R++, A >= O.Birthday && T.length && R++, A >= O.CreditScore && (u.birthday || u.credit_score) && R++, R;
-  }, [C.step, Y, T.length, u.birthday, u.credit_score]), zt = (A) => {
+    return A >= O.MonthlyIncome && q && R++, A >= O.Birthday && T.length && R++, A >= O.CreditScore && (u.birthday || u.credit_score) && R++, R;
+  }, [C.step, q, T.length, u.birthday, u.credit_score]), zt = (A) => {
     d({
       ..._,
       custom: (R) => A ? ao(R, A) : at(R)
     });
   }, Et = {
     [O.ConnectAccounts]: {
-      main: Y ? /* @__PURE__ */ e(Lt, { shouldShowBalance: !1 }) : null,
-      mainActionContent: Y ? s.onboarding_next : s.onboarding_add_accounts,
+      main: q ? /* @__PURE__ */ e(Lt, { shouldShowBalance: !1 }) : null,
+      mainActionContent: q ? s.onboarding_next : s.onboarding_add_accounts,
       primaryText: s.connect_your_accounts,
       secondaryText: s.onboarding_connect_your_accounts_secondary
     },
@@ -2689,7 +2689,7 @@ const $o = ({ total: t }) => {
             });
           },
           setFirstDay: L,
-          setFrequency: U,
+          setFrequency: Y,
           setSecondDay: he,
           transaction: De
         }
@@ -2746,7 +2746,7 @@ const $o = ({ total: t }) => {
         ]);
         break;
       case O.ConnectAccounts:
-        if (!Y) {
+        if (!q) {
           Q(!0);
           return;
         }
@@ -2796,8 +2796,8 @@ const $o = ({ total: t }) => {
     }
   }, me = Et[C.step], Ie = C.step === O.ConnectAccounts, Kt = {
     fullWidth: !0,
-    ...Ie && !Y && { startIcon: /* @__PURE__ */ e(_t, {}) }
-  }, Vt = !Ie || Ie && !Y;
+    ...Ie && !q && { startIcon: /* @__PURE__ */ e(_t, {}) }
+  }, Vt = !Ie || Ie && !q;
   return /* @__PURE__ */ a(m.Fragment, { children: [
     /* @__PURE__ */ e(
       oe,
@@ -3131,7 +3131,7 @@ const $o = ({ total: t }) => {
     ) })
   ] });
 }, jr = v(Nr), Kr = ({ isOpen: t, onClose: o }) => {
-  const n = G(), { finstrong: r } = S(), { isCopyLoaded: s, isInitialized: i } = q(), { augmentedChartData: l, healthScore: c, healthScoreChangeReports: _, peerScore: d } = F();
+  const n = G(), { finstrong: r } = S(), { isCopyLoaded: s, isInitialized: i } = U(), { augmentedChartData: l, healthScore: c, healthScoreChangeReports: _, peerScore: d } = F();
   if (!s || !i) return /* @__PURE__ */ e(te, {});
   const h = He(c.health_score || 0, r), u = _.slice().reverse();
   return /* @__PURE__ */ e(
@@ -3252,7 +3252,7 @@ const $o = ({ total: t }) => {
     ] })
   ] });
 }, Yr = ({ isOpen: t, onClose: o }) => {
-  const { finstrong: n } = S(), { isCopyLoaded: r } = q();
+  const { finstrong: n } = S(), { isCopyLoaded: r } = U();
   return r ? /* @__PURE__ */ e(oe, { 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: [
@@ -3332,7 +3332,7 @@ const $o = ({ total: t }) => {
     ] })
   ] }) }) : /* @__PURE__ */ e(te, {});
 }, qr = v(Yr), Ur = v(() => {
-  const [t, o] = m.useState(!1), n = G(), [r, { width: s }] = St(), { finstrong: i } = S(), { isCopyLoaded: l, isInitialized: c } = q(), { healthScore: _, healthScoreChange: d } = F(), h = n.palette.mode === "dark", u = He(_?.health_score, i);
+  const [t, o] = m.useState(!1), n = G(), [r, { width: s }] = St(), { finstrong: i } = S(), { isCopyLoaded: l, isInitialized: c } = U(), { healthScore: _, healthScoreChange: d } = F(), h = n.palette.mode === "dark", u = He(_?.health_score, i);
   return !l || !c ? /* @__PURE__ */ e(te, {}) : /* @__PURE__ */ a(V, { ref: r, sx: { p: 16, display: "flex", flexDirection: "column", gap: 8 }, children: [
     /* @__PURE__ */ e(
       vo,
@@ -3440,7 +3440,7 @@ const $o = ({ total: t }) => {
     loadMonthlySummaries: w,
     loadPeerScore: x,
     peerScore: D
-  } = d, { finstrong: C, connect: g } = S(), { isCopyLoaded: b, isInitialized: L } = q(), { loadRepeatingTransactions: B } = Ke(), { isMobile: U } = Ye(), T = G(), { userProfile: $ } = ee(), [z, pe] = m.useState(!1), [ve, Q] = m.useState(!1), [X, _e] = m.useState(!1), [H, he] = m.useState(!1);
+  } = d, { finstrong: C, connect: g } = S(), { isCopyLoaded: b, isInitialized: L } = U(), { loadRepeatingTransactions: B } = Ke(), { isSmallMobile: Y } = Ye(), T = G(), { userProfile: $ } = ee(), [z, pe] = m.useState(!1), [ve, Q] = m.useState(!1), [X, _e] = m.useState(!1), [H, he] = m.useState(!1);
   if (wo({
     widgetName: "FinstrongWidget",
     isLoaded: z
@@ -3479,8 +3479,8 @@ const $o = ({ total: t }) => {
               flexDirection: { md: "row" },
               gap: 24,
               justifyContent: "center",
-              pt: U ? 24 : 16,
-              px: 24
+              pt: Y ? 16 : 24,
+              px: Y ? 16 : 48
             },
             children: [
               /* @__PURE__ */ a(p, { sx: { gap: 24, width: { md: 432 }, height: "100%" }, children: [
@@ -3494,22 +3494,27 @@ const $o = ({ total: t }) => {
                   }
                 )
               ] }),
-              /* @__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(K, { children: C.key_indicators }),
-                  /* @__PURE__ */ e(
-                    P,
-                    {
-                      endIcon: /* @__PURE__ */ e(J, {}),
-                      onClick: () => _e(!0),
-                      sx: {
-                        fontSize: 13
-                      },
-                      variant: "text",
-                      children: C.whats_changed
-                    }
-                  )
-                ] }),
+              /* @__PURE__ */ e(p, { children: /* @__PURE__ */ a(V, { sx: { height: "100%", p: 16 }, children: [
+                /* @__PURE__ */ a(
+                  p,
+                  {
+                    direction: "row",
+                    sx: { alignItems: "center", gap: 12, justifyContent: "space-between" },
+                    children: [
+                      /* @__PURE__ */ e(K, { children: C.key_indicators }),
+                      /* @__PURE__ */ e(
+                        P,
+                        {
+                          endIcon: /* @__PURE__ */ e(J, {}),
+                          onClick: () => _e(!0),
+                          size: "small",
+                          variant: "text",
+                          children: /* @__PURE__ */ e(I, { bold: !0, sx: { flexShrink: 0 }, variant: "body2", children: C.whats_changed })
+                        }
+                      )
+                    ]
+                  }
+                ),
                 h.length ? /* @__PURE__ */ e(
                   Ve,
                   {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mx-cartographer/experiences",
-  "version": "7.6.2",
+  "version": "7.6.3",
   "description": "Library containing experience widgets",
   "author": "MX",
   "license": "MIT",