@mx-cartographer/experiences 7.0.49 → 7.0.50-alpha.bb1

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## [7.0.50] - 10-09-2025
+
+- **ADDED** - Add style font name to the client config
+
 ## [7.0.49] - 10-09-2025
 
 - **FIXED** - MiniWidget CTA Button Breaking UI fix.

package/dist/common/index.es.js

@@ -1,6 +1,6 @@
 import { G as k } from "../useCombineEvents-BUDIR1ba.mjs";
 import { A as ss, a as rs, u as os, b as as } from "../useCombineEvents-BUDIR1ba.mjs";
-import { F as y, A as u } from "../Fetch-87LIQbEA.mjs";
+import { F as S, A as h } from "../Fetch-87LIQbEA.mjs";
 import { B as is } from "../BeatApi-DhJpgCLz.mjs";
 import { C as et } from "../CategoryStore-BCcpI3oJ.mjs";
 import { a as ds } from "../CategoryStore-BCcpI3oJ.mjs";
@@ -33,10 +33,10 @@ import { L as Cr } from "../ListItemAction-DSrYDGAP.mjs";
 import { T as ct } from "../TrendsStore-BKBnNQba.mjs";
 import { L as Dr, S as Ar } from "../TrendsStore-BKBnNQba.mjs";
 import { A as Tr, B as Br, I as Ir, N as Nr, T as Mr, a as kr } from "../ToggleListItem-r0Kx56wF.mjs";
-import { jsxs as f, jsx as n } from "react/jsx-runtime";
+import { jsxs as y, jsx as n } from "react/jsx-runtime";
 import dt, { useRef as lt, useEffect as ut } from "react";
-import { css as w, keyframes as ht } from "@mxenabled/cssinjs";
-import { useTokens as x, Text as B } from "@mxenabled/mxui";
+import { css as x, keyframes as ht } from "@mxenabled/cssinjs";
+import { useTokens as C, Text as B } from "@mxenabled/mxui";
 import { D as Rr } from "../Donut-1UMNcG67.mjs";
 import { L as Or } from "../LineChart-B2Y7zwMu.mjs";
 import { S as Lr } from "../StatusBar-BK_uYHAB.mjs";
@@ -54,7 +54,7 @@ import { G as fo, B as yo, C as So, W as bo, d as wo, a as xo, i as Co, t as vo,
 import { u as zo } from "../useAccountDisplayName-Dwa7UkEU.mjs";
 import { u as jo } from "../useInsightsEnabled-DSnpkUq0.mjs";
 import { u as Vo } from "../useScreenSize-B6JyS_Lj.mjs";
-import { makeAutoObservable as _, runInAction as m, reaction as _t } from "mobx";
+import { makeAutoObservable as f, runInAction as p, reaction as _t } from "mobx";
 import { a as ft } from "../AccountStore-XZqHTKm3.mjs";
 import yt from "posthog-js";
 import { B as St } from "../BeatStore-IBnXd4YK.mjs";
@@ -119,78 +119,78 @@ const Pt = [
   { key: "warning", light: "warning_color", dark: "warning_color_dark" },
   { key: "info", light: "info_color", dark: "info_color_dark" },
   { key: "success", light: "success_color", dark: "success_color_dark" }
-], ze = (s, t) => {
-  const e = s.palette.mode === "dark", r = t?.system_font ?? s.typography.fontFamily, o = (d, g) => d ? {
-    lighter: G(d, 0.5),
-    light: G(d, 0.25),
-    main: d,
-    dark: H(d, 0.25),
-    darker: H(d, 0.5)
-  } : g, a = Object.fromEntries(
-    Ot.map(({ key: d, light: g, dark: S }) => [
-      d,
-      o(
-        t?.[e ? S : g],
-        s.palette[d]
+], ze = (s, t, e) => {
+  const r = s.palette.mode === "dark", o = (e?.master?.style?.font_name || t?.system_font) ?? s.typography.fontFamily, a = (i, _) => i ? {
+    lighter: G(i, 0.5),
+    light: G(i, 0.25),
+    main: i,
+    dark: H(i, 0.25),
+    darker: H(i, 0.5)
+  } : _, c = Object.fromEntries(
+    Ot.map(({ key: i, light: _, dark: b }) => [
+      i,
+      a(
+        t?.[r ? b : _],
+        s.palette[i]
       )
     ])
-  ), l = Object.fromEntries(
-    Pt.map((d) => [
-      d,
-      d === "fontFamily" ? r : { fontFamily: r }
+  ), d = Object.fromEntries(
+    Pt.map((i) => [
+      i,
+      i === "fontFamily" ? o : { fontFamily: o }
     ])
-  ), c = {
+  ), u = {
     MuiTabs: {
       styleOverrides: {
-        indicator: { backgroundColor: a.primary.light }
+        indicator: { backgroundColor: c.primary.light }
       }
     },
     MuiPickersCalendarHeader: {
       styleOverrides: {
         switchViewButton: {
-          color: a.primary.lighter,
-          "&:hover": { backgroundColor: Mt(a.primary.light, 0.1) }
+          color: c.primary.lighter,
+          "&:hover": { backgroundColor: Mt(c.primary.light, 0.1) }
         }
       }
     }
-  }, i = t?.button_corner_radius, h = t?.card_corner_radius, p = {
-    ...c,
-    ...i && {
+  }, l = t?.button_corner_radius, g = t?.card_corner_radius, m = {
+    ...u,
+    ...l && {
       MuiButton: {
         styleOverrides: {
-          root: { borderRadius: `${i}px`, textTransform: "none" }
+          root: { borderRadius: `${l}px`, textTransform: "none" }
         }
       },
       MuiIconButton: {
         styleOverrides: {
           root: {
-            borderRadius: `${i}px`,
-            minWidth: i,
-            minHeight: i
+            borderRadius: `${l}px`,
+            minWidth: l,
+            minHeight: l
           }
         }
       },
       MuiToggleButton: {
         styleOverrides: {
-          root: { borderRadius: `${i}px`, textTransform: "none" }
+          root: { borderRadius: `${l}px`, textTransform: "none" }
         }
       }
     },
-    ...h && {
+    ...g && {
       MuiCard: {
-        styleOverrides: { root: { borderRadius: `${h}px` } }
+        styleOverrides: { root: { borderRadius: `${g}px` } }
       },
       MuiPaper: {
-        styleOverrides: { root: { borderRadius: `${h}px` } }
+        styleOverrides: { root: { borderRadius: `${g}px` } }
       }
     }
   };
-  return { typography: l, palette: a, components: p };
+  return { typography: d, palette: c, components: m };
 };
 class F {
   fetchInstance;
   constructor(t) {
-    this.fetchInstance = new y(t, "", {
+    this.fetchInstance = new S(t, "", {
       Accept: "application/json",
       "Content-Type": "application/json"
     });
@@ -207,40 +207,40 @@ class F {
 class Xe {
   fetchInstance;
   constructor(t, e, r) {
-    this.fetchInstance = new y(t, e, void 0, r);
+    this.fetchInstance = new S(t, e, void 0, r);
   }
-  getLocalizedCopy = async (t) => this.fetchInstance.post(u.LOCALIZED_COPY, t).then((e) => e);
-  getLocalizedContent = async (t) => this.fetchInstance.post(`${u.LOCALIZED_CONTENT}/${t}`).then((e) => e);
+  getLocalizedCopy = async (t) => this.fetchInstance.post(h.LOCALIZED_COPY, t).then((e) => e);
+  getLocalizedContent = async (t) => this.fetchInstance.post(`${h.LOCALIZED_CONTENT}/${t}`).then((e) => e);
 }
 class je {
   fetchInstance;
   constructor(t, e, r) {
-    this.fetchInstance = new y(t, e, void 0, r);
+    this.fetchInstance = new S(t, e, void 0, r);
   }
-  addScheduledPayment = async (t) => this.fetchInstance.post(u.SCHEDULED_PAYMENTS, {
+  addScheduledPayment = async (t) => this.fetchInstance.post(h.SCHEDULED_PAYMENTS, {
     ...t,
     is_recurring: "true",
     transaction_type: rt.DEBIT
   }).then((e) => e.scheduled_payment);
-  getScheduledPayments = async () => this.fetchInstance.get(u.SCHEDULED_PAYMENTS).then((t) => t.scheduled_payments);
-  updateScheduledPayment = async (t) => this.fetchInstance.put(`${u.SCHEDULED_PAYMENTS}/${t.guid}`, t).then((e) => e.scheduled_payment);
-  deleteScheduledPayment = async (t) => this.fetchInstance.delete(`${u.SCHEDULED_PAYMENTS}/${t}`).then((e) => e);
+  getScheduledPayments = async () => this.fetchInstance.get(h.SCHEDULED_PAYMENTS).then((t) => t.scheduled_payments);
+  updateScheduledPayment = async (t) => this.fetchInstance.put(`${h.SCHEDULED_PAYMENTS}/${t.guid}`, t).then((e) => e.scheduled_payment);
+  deleteScheduledPayment = async (t) => this.fetchInstance.delete(`${h.SCHEDULED_PAYMENTS}/${t}`).then((e) => e);
 }
 class $ {
   fetchInstance;
   constructor(t, e, r) {
-    this.fetchInstance = new y(t, e, void 0, r);
+    this.fetchInstance = new S(t, e, void 0, r);
   }
-  getUserFeatures = async () => this.fetchInstance.get(u.USER_FEATURES).then((t) => t.user_features).catch((t) => t);
-  updateUser = async (t) => this.fetchInstance.put(u.USER, t).then((e) => e.user);
-  updateUserProfile = async (t) => this.fetchInstance.put(`${u.USER_PROFILES}/${t.guid}`, t).then((e) => e.user_profile);
+  getUserFeatures = async () => this.fetchInstance.get(h.USER_FEATURES).then((t) => t.user_features).catch((t) => t);
+  updateUser = async (t) => this.fetchInstance.put(h.USER, t).then((e) => e.user);
+  updateUserProfile = async (t) => this.fetchInstance.put(`${h.USER_PROFILES}/${t.guid}`, t).then((e) => e.user_profile);
 }
 class W {
   fetchInstance;
   constructor(t, e) {
-    this.fetchInstance = new y(t, e);
+    this.fetchInstance = new S(t, e);
   }
-  requestWidgetUrl = async (t) => this.fetchInstance.post(u.WIDGET_URLS, t).then((e) => e.widget_url);
+  requestWidgetUrl = async (t) => this.fetchInstance.post(h.WIDGET_URLS, t).then((e) => e.widget_url);
 }
 var Ut = /* @__PURE__ */ ((s) => (s[s.UNKNOWN = 0] = "UNKNOWN", s[s.CORRECT = 1] = "CORRECT", s[s.INCORRECT = 2] = "INCORRECT", s))(Ut || {}), Lt = /* @__PURE__ */ ((s) => (s.Missed = "Missed", s.Paid = "Paid", s.Upcoming = "Upcoming expense", s.Income = "Income", s))(Lt || {}), Gt = /* @__PURE__ */ ((s) => (s[s.Unknown = 0] = "Unknown", s[s.Subscription = 1] = "Subscription", s[s.Bill = 2] = "Bill", s))(Gt || {}), Ht = /* @__PURE__ */ ((s) => (s.Desktop = "Desktop", s.Mobile = "Mobile", s))(Ht || {});
 const Ke = (s) => {
@@ -249,18 +249,18 @@ const Ke = (s) => {
     t.current = s;
   }, [s]), t.current;
 }, Ft = ({ color: s, labelAverage: t, labelMain: e }) => {
-  const r = x(), o = Wt(r, s);
-  return /* @__PURE__ */ f("div", { className: `mx-cmn-bar-chart-legend ${o}`, children: [
+  const r = C(), o = Wt(r, s);
+  return /* @__PURE__ */ y("div", { className: `mx-cmn-bar-chart-legend ${o}`, children: [
     /* @__PURE__ */ n("div", { "aria-label": e, className: "mx-cmn-color-square", role: "img" }),
     /* @__PURE__ */ n(B, { variant: "XSmall", children: e }),
-    /* @__PURE__ */ f("div", { "aria-label": t, className: "mx-cmn-triple-dot", role: "img", children: [
+    /* @__PURE__ */ y("div", { "aria-label": t, className: "mx-cmn-triple-dot", role: "img", children: [
       /* @__PURE__ */ n("div", { className: "mx-cmn-dot" }),
       /* @__PURE__ */ n("div", { className: "mx-cmn-dot" }),
       /* @__PURE__ */ n("div", { className: "mx-cmn-dot" })
     ] }),
     /* @__PURE__ */ n(B, { variant: "XSmall", children: t })
   ] });
-}, Wt = (s, t) => w({
+}, Wt = (s, t) => x({
   alignItems: "center",
   display: "flex",
   gap: s.Spacing.XSmall,
@@ -293,41 +293,41 @@ const Ke = (s) => {
   index: r,
   label: o,
   onClick: a,
-  selectedIndex: l,
-  value: c
+  selectedIndex: c,
+  value: d
 }) => {
-  const i = x(), h = qt(i, t, e), p = (S) => {
-    a && (S.key === " " || S.key === "Enter") && a(r);
-  }, d = l === void 0 || l === r ? "primary" : "secondary", g = () => /* @__PURE__ */ n(
+  const u = C(), l = qt(u, t, e), g = (_) => {
+    a && (_.key === " " || _.key === "Enter") && a(r);
+  }, m = c === void 0 || c === r ? "primary" : "secondary", i = () => /* @__PURE__ */ n(
     B,
     {
       "aria-hidden": !0,
-      bold: l === r,
+      bold: c === r,
       className: "mx-cmn-bar-text",
-      color: d,
+      color: m,
       component: "div",
       variant: "Small",
       children: o
     }
   );
-  return /* @__PURE__ */ f("div", { className: `mx-cmn-bar-container ${h} ${c < 0 ? "mx-cmn-negative" : ""}`, children: [
-    c >= 0 && /* @__PURE__ */ n(g, {}),
+  return /* @__PURE__ */ y("div", { className: `mx-cmn-bar-container ${l} ${d < 0 ? "mx-cmn-negative" : ""}`, children: [
+    d >= 0 && /* @__PURE__ */ n(i, {}),
     /* @__PURE__ */ n(
       "div",
       {
         "aria-label": s,
-        className: `mx-cmn-bar ${a ? "mx-cmn-clickable" : ""} ${c < 0 ? "mx-cmn-bar-negative" : ""}`,
+        className: `mx-cmn-bar ${a ? "mx-cmn-clickable" : ""} ${d < 0 ? "mx-cmn-bar-negative" : ""}`,
         onClick: a ? () => a?.(r) : void 0,
-        onKeyDown: p,
+        onKeyDown: g,
         role: s ? "button" : void 0,
         tabIndex: s ? 0 : void 0
       }
     ),
-    c < 0 && /* @__PURE__ */ n(g, {})
+    d < 0 && /* @__PURE__ */ n(i, {})
   ] });
 }, qt = (s, t, e) => {
   const r = `expandBar-${Math.round(e)}`, o = ht(r, { from: { height: 0 }, to: { height: e } });
-  return w({
+  return x({
     display: "flex",
     flexDirection: "column",
     justifyContent: "flex-end",
@@ -365,41 +365,41 @@ const Ke = (s) => {
   color: r,
   index: o = -1,
   onClick: a,
-  range: l,
-  selectedIndex: c,
-  topHeight: i,
-  value: h,
-  valueLabel: p = "",
-  width: d,
-  xAxisLabel: g = ""
+  range: c,
+  selectedIndex: d,
+  topHeight: u,
+  value: l,
+  valueLabel: g = "",
+  width: m,
+  xAxisLabel: i = ""
 }) => {
-  const S = x(), C = Yt(S, d), v = h / l * i, D = Math.abs(h) / l * e, A = c === void 0 || c === o ? "primary" : "secondary";
-  return /* @__PURE__ */ f("div", { className: `mx-cmn-barchart-bar-column ${C}`, children: [
-    /* @__PURE__ */ n("div", { style: { height: i }, children: h >= 0 && /* @__PURE__ */ n(
+  const _ = C(), b = Yt(_, m), v = l / c * u, D = Math.abs(l) / c * e, A = d === void 0 || d === o ? "primary" : "secondary";
+  return /* @__PURE__ */ y("div", { className: `mx-cmn-barchart-bar-column ${b}`, children: [
+    /* @__PURE__ */ n("div", { style: { height: u }, children: l >= 0 && /* @__PURE__ */ n(
       q,
       {
         ariaLabel: s,
         color: r,
         height: v,
         index: o,
-        label: p,
+        label: g,
         onClick: a,
-        selectedIndex: c,
-        value: h
+        selectedIndex: d,
+        value: l
       }
     ) }),
     /* @__PURE__ */ n("div", { className: "mx-cmn-zero-line" }),
     t !== 0 && /* @__PURE__ */ n("div", { className: "mx-cmn-chart-average", style: { bottom: t } }),
-    /* @__PURE__ */ n("div", { style: { height: e }, children: h < 0 && /* @__PURE__ */ n(
+    /* @__PURE__ */ n("div", { style: { height: e }, children: l < 0 && /* @__PURE__ */ n(
       q,
       {
         ariaLabel: s,
         color: r,
         height: D,
         index: o,
-        label: p,
+        label: g,
         onClick: a,
-        value: h
+        value: l
       }
     ) }),
     /* @__PURE__ */ n(
@@ -407,11 +407,11 @@ const Ke = (s) => {
       {
         className: `mx-cmn-bar-label ${a ? "mx-cmn-clickable" : ""}`,
         onClick: a ? () => a(o) : void 0,
-        children: /* @__PURE__ */ n(B, { bold: c === o, color: A, variant: "Small", children: g })
+        children: /* @__PURE__ */ n(B, { bold: d === o, color: A, variant: "Small", children: i })
       }
     )
   ] });
-}, Yt = (s, t) => w({
+}, Yt = (s, t) => x({
   display: "flex",
   flexDirection: "column",
   flexGrow: t === void 0 ? 1 : 0,
@@ -446,12 +446,12 @@ const Ke = (s) => {
   data: r,
   height: o,
   legendLabelAverage: a,
-  legendLabelMain: l,
-  onBarClick: c,
-  selectedIndex: i,
-  valueFormatter: h = (p) => `${p}`
+  legendLabelMain: c,
+  onBarClick: d,
+  selectedIndex: u,
+  valueFormatter: l = (g) => `${g}`
 }) => {
-  const p = x(), d = Vt(p), g = r.reduce(Xt, []), S = s !== void 0 ? s : g.reduce(Qt, 0) / g.length, C = Math.max(...g), v = Math.min(...g), D = g.reduce(zt, 0), A = C >= 0, R = v < 0, I = Q(A, R, o), N = Q(R, A, o), P = jt(S, C, v, I || N), tt = (b) => i === void 0 || b === i ? e : `${e}80`, O = () => /* @__PURE__ */ n(
+  const g = C(), m = Vt(g), i = r.reduce(Xt, []), _ = s !== void 0 ? s : i.reduce(Qt, 0) / i.length, b = Math.max(...i), v = Math.min(...i), D = i.reduce(zt, 0), A = b >= 0, R = v < 0, I = Q(A, R, o), N = Q(R, A, o), P = jt(_, b, v, I || N), tt = (w) => u === void 0 || w === u ? e : `${e}80`, O = () => /* @__PURE__ */ n(
     Y,
     {
       averageLineHeight: P,
@@ -463,34 +463,34 @@ const Ke = (s) => {
       width: void 0
     }
   );
-  return /* @__PURE__ */ f("div", { className: `mx-cmn-bar-chart ${d}`, children: [
-    /* @__PURE__ */ f("div", { className: "mx-cmn-chart-container", children: [
+  return /* @__PURE__ */ y("div", { className: `mx-cmn-bar-chart ${m}`, children: [
+    /* @__PURE__ */ y("div", { className: "mx-cmn-chart-container", children: [
       /* @__PURE__ */ n(O, {}),
-      r.map((b, M) => /* @__PURE__ */ f(dt.Fragment, { children: [
+      r.map((w, M) => /* @__PURE__ */ y(dt.Fragment, { children: [
         /* @__PURE__ */ n(
           Y,
           {
-            ariaLabel: b.ariaLabel,
+            ariaLabel: w.ariaLabel,
             averageLineHeight: P,
             bottomHeight: N,
             color: tt(M),
             index: M,
-            onClick: c,
+            onClick: d,
             range: D,
-            selectedIndex: i,
+            selectedIndex: u,
             topHeight: I,
-            value: b.value,
-            valueLabel: h(b.value),
+            value: w.value,
+            valueLabel: l(w.value),
             width: t,
-            xAxisLabel: b.label
+            xAxisLabel: w.label
           }
         ),
         /* @__PURE__ */ n(O, {})
       ] }, `column-${M}`))
     ] }),
-    /* @__PURE__ */ n(Ft, { color: e, labelAverage: a, labelMain: l })
+    /* @__PURE__ */ n(Ft, { color: e, labelAverage: a, labelMain: c })
   ] });
-}, Vt = (s) => w({
+}, Vt = (s) => x({
   "& .mx-cmn-chart-container": {
     alignItems: "flex-end",
     display: "flex",
@@ -505,40 +505,40 @@ const Ke = (s) => {
   strokeWidth: r = pt,
   children: o
 }) => {
-  const a = x(), l = Jt(a, e), c = (e - r) / 2, i = e / 2;
-  let h = -90 - (s ? 1 : 0), p = 0;
-  return /* @__PURE__ */ f("div", { className: `mx-cmn-multi-segment-donut ${l}`, children: [
-    /* @__PURE__ */ f("svg", { height: e, width: e, children: [
+  const a = C(), c = Jt(a, e), d = (e - r) / 2, u = e / 2;
+  let l = -90 - (s ? 1 : 0), g = 0;
+  return /* @__PURE__ */ y("div", { className: `mx-cmn-multi-segment-donut ${c}`, children: [
+    /* @__PURE__ */ y("svg", { height: e, width: e, children: [
       /* @__PURE__ */ n(
         "circle",
         {
-          cx: i,
-          cy: i,
+          cx: u,
+          cy: u,
           fill: "none",
-          r: c,
+          r: d,
           stroke: a.Color.Neutral300,
           strokeWidth: r
         }
       ),
-      t.map((d, g) => (h += 360 * p + (s ? 1 : 0), p = (d.percent - (s ? 0.3 : 0)) / 100, /* @__PURE__ */ n(
+      t.map((m, i) => (l += 360 * g + (s ? 1 : 0), g = (m.percent - (s ? 0.3 : 0)) / 100, /* @__PURE__ */ n(
         "circle",
         {
-          cx: i,
-          cy: i,
+          cx: u,
+          cy: u,
           fill: "none",
-          r: c,
-          stroke: d.color,
-          strokeDasharray: 2 * Math.PI * c,
-          strokeDashoffset: 2 * Math.PI * c * (1 - p),
+          r: d,
+          stroke: m.color,
+          strokeDasharray: 2 * Math.PI * d,
+          strokeDashoffset: 2 * Math.PI * d * (1 - g),
           strokeWidth: r,
-          transform: `rotate(${h}, ${i}, ${i})`
+          transform: `rotate(${l}, ${u}, ${u})`
         },
-        g
+        i
       )))
     ] }),
     /* @__PURE__ */ n("div", { className: "mx-cmn-multi-segment-donut-children", children: o })
   ] });
-}, Jt = (s, t) => w({
+}, Jt = (s, t) => x({
   height: t,
   marginTop: `-${s.Spacing.XSmall}px`,
   position: "relative",
@@ -562,7 +562,7 @@ class te {
       t.endpoint,
       t.sessionToken,
       t.onError
-    ), _(this);
+    ), f(this);
   }
   // DEPRECATED: Initialize api in constructor and use loadCopy instead
   // TODO: Remove this function
@@ -570,14 +570,14 @@ class te {
     this.api = new k(t, e), await this.loadCopy();
   };
   loadCopy = async () => {
-    await this.getCopy(this.featureNamespace), m(() => {
+    await this.getCopy(this.featureNamespace), p(() => {
       this.isInitialized = !0;
     });
   };
   getCopy = async (t, e = "") => {
     try {
       const r = await this.api.getGlobalCopy(t, e);
-      m(() => {
+      p(() => {
         this.copy = r[t];
       });
     } catch (r) {
@@ -593,7 +593,7 @@ class ee {
   response = null;
   responses = {};
   constructor(t) {
-    this.globalStore = t, _(this);
+    this.globalStore = t, f(this);
   }
   get isLastQuestion() {
     return this.currentQuestionIndex === this.surveyQuestions.length - 1;
@@ -616,7 +616,7 @@ class ee {
   }
   loadSurvey = (t = !1) => {
     yt.getActiveMatchingSurveys((e) => {
-      m(() => {
+      p(() => {
         if (e.length > 0) {
           const r = e.find((o) => o.id === this.surveyId);
           r && (this.survey = r, this.currentQuestionIndex = 0, this.question = r.questions[0], this.response = null, this.responses = {});
@@ -637,9 +637,9 @@ class ee {
 class z {
   fetchInstance;
   constructor(t, e, r) {
-    this.fetchInstance = new y(t, e, void 0, r);
+    this.fetchInstance = new S(t, e, void 0, r);
   }
-  addBudget = async (t, e, r = null) => this.fetchInstance.post(u.BUDGETS, {
+  addBudget = async (t, e, r = null) => this.fetchInstance.post(h.BUDGETS, {
     amount: e,
     category_guid: t.guid,
     category_name: t.name,
@@ -647,11 +647,11 @@ class z {
   }).then((o) => o.budget).catch((o) => {
     throw o;
   });
-  deleteBudget = async (t) => this.fetchInstance.delete(`${u.BUDGETS}/${t}`).then((e) => e).catch((e) => {
+  deleteBudget = async (t) => this.fetchInstance.delete(`${h.BUDGETS}/${t}`).then((e) => e).catch((e) => {
     throw e;
   });
-  getBudgets = async () => this.fetchInstance.get(u.BUDGETS).then((t) => t.budgets).catch((t) => t);
-  updateBudget = async (t) => this.fetchInstance.put(`${u.BUDGETS}/${t.guid}`, t).then((e) => e.budget).catch((e) => {
+  getBudgets = async () => this.fetchInstance.get(h.BUDGETS).then((t) => t.budgets).catch((t) => t);
+  updateBudget = async (t) => this.fetchInstance.put(`${h.BUDGETS}/${t.guid}`, t).then((e) => e.budget).catch((e) => {
     throw e;
   });
 }
@@ -666,7 +666,7 @@ class se {
   isDataLoaded = !1;
   theme = {};
   constructor(t) {
-    this.globalStore = t, this.api = new z(t.endpoint, t.sessionToken, t.onError), _(this);
+    this.globalStore = t, this.api = new z(t.endpoint, t.sessionToken, t.onError), f(this);
   }
   loadBudgetData = async () => {
     await this.loadBudgets(), _t(
@@ -717,7 +717,7 @@ class se {
   addBudget = async (t, e, r = null) => {
     try {
       const o = await this.api.addBudget(t, e, r);
-      m(() => {
+      p(() => {
         this.budgets.push(o);
       });
     } catch (o) {
@@ -726,7 +726,7 @@ class se {
   };
   deleteBudget = async (t) => {
     try {
-      await this.api.deleteBudget(t), m(() => {
+      await this.api.deleteBudget(t), p(() => {
         const e = this.budgets.findIndex((r) => r.guid === t);
         e >= 0 && this.budgets.splice(e, 1);
       });
@@ -737,7 +737,7 @@ class se {
   loadBudgets = async () => {
     try {
       const t = await this.api.getBudgets();
-      m(() => {
+      p(() => {
         this.budgets = t, this.isDataLoaded = !0;
       });
     } catch (t) {
@@ -775,7 +775,7 @@ class se {
   updateBudget = async (t) => {
     try {
       const e = await this.api.updateBudget(t);
-      m(() => {
+      p(() => {
         const r = this.budgets.findIndex((o) => o.guid === t.guid);
         r >= 0 && (this.budgets[r] = e);
       });
@@ -787,9 +787,9 @@ class se {
 class X {
   fetchInstance;
   constructor(t, e, r) {
-    this.fetchInstance = new y(t, e, void 0, r);
+    this.fetchInstance = new S(t, e, void 0, r);
   }
-  createSupportTicket = async (t) => this.fetchInstance.post(u.SUPPORT_TICKETS, t).then((e) => e);
+  createSupportTicket = async (t) => this.fetchInstance.post(h.SUPPORT_TICKETS, t).then((e) => e);
 }
 const re = (s, t) => s.guid === "general" || s.guid === "insights" ? !0 : s.flags ? s.flags.every((e) => t[e]) : !1, oe = (s, t) => {
   const e = [];
@@ -799,9 +799,9 @@ const re = (s, t) => s.guid === "general" || s.guid === "insights" ? !0 : s.flag
     const a = {
       ...r,
       title: o.label,
-      topics: r.topics.map(({ topicKey: l }, c) => ({
-        topicKey: l,
-        label: o.topics[c]
+      topics: r.topics.map(({ topicKey: c }, d) => ({
+        topicKey: c,
+        label: o.topics[d]
       }))
     };
     re(a, s) && e.push(a);
@@ -815,7 +815,7 @@ class ae {
   globalStore;
   isLoading = !1;
   constructor(t) {
-    this.globalStore = t, this.api = new X(t.endpoint, t.sessionToken, t.onError), _(this);
+    this.globalStore = t, this.api = new X(t.endpoint, t.sessionToken, t.onError), f(this);
   }
   createSupportTicket = async (t) => {
     try {
@@ -847,10 +847,10 @@ class ae {
 class j {
   fetchInstance;
   constructor(t, e, r) {
-    this.fetchInstance = new y(t, e, void 0, r);
+    this.fetchInstance = new S(t, e, void 0, r);
   }
-  getHoldings = async () => this.fetchInstance.get(u.HOLDINGS).then((t) => t.holdings);
-  updateHoldings = async (t) => this.fetchInstance.put(`${u.HOLDINGS}/${t.guid}`, t).then((e) => e.holding);
+  getHoldings = async () => this.fetchInstance.get(h.HOLDINGS).then((t) => t.holdings);
+  updateHoldings = async (t) => this.fetchInstance.put(`${h.HOLDINGS}/${t.guid}`, t).then((e) => e.holding);
 }
 class ne {
   analysisType = vt.Stocks;
@@ -860,7 +860,7 @@ class ne {
   globalStore;
   showConnectionsWidget = !1;
   constructor(t) {
-    this.globalStore = t, this.api = new j(t.endpoint, t.sessionToken, t.onError), _(this);
+    this.globalStore = t, this.api = new j(t.endpoint, t.sessionToken, t.onError), f(this);
   }
   get analysisChartData() {
     return Dt(At(this.visibleHoldings), this.analysisType);
@@ -879,7 +879,7 @@ class ne {
   loadHoldings = async () => {
     try {
       const t = await this.api.getHoldings();
-      m(() => {
+      p(() => {
         this.holdings = [...t], this.holdingsLoaded = !0;
       });
     } catch (t) {
@@ -895,7 +895,7 @@ class ne {
       const e = await this.api.updateHoldings(t), r = this.holdings.findIndex(({ guid: o }) => o === t.guid);
       if (r >= 0) {
         const o = [...this.holdings];
-        o[r] = e, m(() => {
+        o[r] = e, p(() => {
           this.holdings = o, this.holdingsLoaded = !0;
         });
       }
@@ -1011,9 +1011,9 @@ const K = {
 class V {
   fetchInstance;
   constructor(t, e, r) {
-    this.fetchInstance = new y(t, e, void 0, r);
+    this.fetchInstance = new S(t, e, void 0, r);
   }
-  getAppData = async () => this.fetchInstance.get(u.APP_DATA).then((t) => t);
+  getAppData = async () => this.fetchInstance.get(h.APP_DATA).then((t) => t);
 }
 class ie {
   globalStore;
@@ -1022,7 +1022,7 @@ class ie {
   appData = {};
   banner = {};
   constructor(t) {
-    this.globalStore = t, this.api = new V(t.endpoint, t.sessionToken, t.onError), _(this);
+    this.globalStore = t, this.api = new V(t.endpoint, t.sessionToken, t.onError), f(this);
   }
   get appConfig() {
     return this.globalStore.appConfig;
@@ -1045,7 +1045,7 @@ class ie {
   loadAppData = async (t) => {
     try {
       const e = t || await this.api.getAppData();
-      m(() => {
+      p(() => {
         this.appData = e, this.bannerApi = new F(e.address?.bullseye || "/");
       });
     } catch (e) {
@@ -1055,7 +1055,7 @@ class ie {
   loadBanner = async () => {
     try {
       const t = this.user?.guid ?? null, e = t ? await this.bannerApi.getBanner(t) : {};
-      m(() => {
+      p(() => {
         this.banner = e;
       });
     } catch (t) {
@@ -1070,7 +1070,7 @@ class ce {
   globalStore;
   widgetApi = new W("/", "");
   constructor(t) {
-    this.globalStore = t, this.widgetApi = new W(t.endpoint, t.sessionToken), _(this);
+    this.globalStore = t, this.widgetApi = new W(t.endpoint, t.sessionToken), f(this);
   }
   loadWidget = async ({ widget: t = "connect_widget", mode: e = "light", ...r }) => await this.widgetApi.requestWidgetUrl({
     widget_url: { widget_type: t, color_scheme: e, ...r }
@@ -1087,7 +1087,7 @@ class de {
     end: Z(this.displayedDate)
   };
   constructor(t) {
-    _(this), this.globalStore = t;
+    f(this), this.globalStore = t;
   }
   get isCopyLoaded() {
     return this.globalStore.copyStore.isInitialized;
@@ -1104,7 +1104,7 @@ class de {
   };
   // Sets an array of selected account guids for the AccountFilter component
   setSelectedAccountGuids = async (t) => {
-    const e = new Set(this.selectedAccountGuids), r = new Set(t), o = [...r].filter((l) => !e.has(l)), a = [...e].filter((l) => !r.has(l));
+    const e = new Set(this.selectedAccountGuids), r = new Set(t), o = [...r].filter((c) => !e.has(c)), a = [...e].filter((c) => !r.has(c));
     o.length > 0 && this.globalStore.accountStore.updateAccountFiltering(o, !1), a.length > 0 && this.globalStore.accountStore.updateAccountFiltering(a, !0), this.selectedAccountGuids = t;
   };
   setDisplayedDate = (t, e) => {
@@ -1127,7 +1127,7 @@ class le {
   api = new $("/", "");
   userFeatures = [];
   constructor(t) {
-    this.globalStore = t, this.api = new $(t.endpoint, t.sessionToken, t.onError), _(this);
+    this.globalStore = t, this.api = new $(t.endpoint, t.sessionToken, t.onError), f(this);
   }
   // DEPRECATED: Initialize api in constructor and use loadUserFeatures instead
   // TODO: Remove this function
@@ -1143,7 +1143,7 @@ class le {
   loadUserFeatures = async (t) => {
     try {
       const e = t || await this.api.getUserFeatures();
-      m(() => {
+      p(() => {
         this.userFeatures = e;
       });
     } catch (e) {
@@ -1199,7 +1199,7 @@ class Je {
   // UI Stores
   globalUiStore;
   constructor(t = K, e = "/", r) {
-    this.appConfig = t, this.endpoint = e, this.sessionToken = t.options.session_token ?? "", this.onError = r, this.accountStore = new ft(this), this.appDataStore = new ie(this), this.analyticsStore = new ee(this), this.beatStore = new St(this), this.budgetsStore = new se(this), this.cashflowStore = new nt(this), this.categoryStore = new et(this), this.connectStore = new ce(this), this.copyStore = new te(this), this.debtsStore = new xt(this), this.finstrongStore = new Ct(this), this.goalStore = new it(this), this.helpStore = new ae(this), this.holdingStore = new ne(this), this.merchantStore = new Tt(this), this.netWorthStore = new Bt(this), this.notificationStore = new st(this), this.recurringTransactionsStore = new mt(this), this.settingsStore = new It(this), this.transactionStore = new at(this), this.trendsStore = new ct(this), this.userStore = new le(this), this.globalUiStore = new de(this), _(this);
+    this.appConfig = t, this.endpoint = e, this.sessionToken = t.options.session_token ?? "", this.onError = r, this.accountStore = new ft(this), this.appDataStore = new ie(this), this.analyticsStore = new ee(this), this.beatStore = new St(this), this.budgetsStore = new se(this), this.cashflowStore = new nt(this), this.categoryStore = new et(this), this.connectStore = new ce(this), this.copyStore = new te(this), this.debtsStore = new xt(this), this.finstrongStore = new Ct(this), this.goalStore = new it(this), this.helpStore = new ae(this), this.holdingStore = new ne(this), this.merchantStore = new Tt(this), this.netWorthStore = new Bt(this), this.notificationStore = new st(this), this.recurringTransactionsStore = new mt(this), this.settingsStore = new It(this), this.transactionStore = new at(this), this.trendsStore = new ct(this), this.userStore = new le(this), this.globalUiStore = new de(this), f(this);
   }
   get isInitialized() {
     return this.globalUiStore.isInitialized;
@@ -1210,22 +1210,22 @@ class Je {
     associatedBeats: r,
     categories: o,
     institutions: a,
-    transactionRules: l,
-    transactions: c,
-    userFeatures: i
+    transactionRules: c,
+    transactions: d,
+    userFeatures: u
   } = {}) => {
     await Promise.all([
       // Load copy, config and quser data
       this.copyStore.loadCopy(),
       this.appDataStore.loadAppData(e),
-      this.userStore.loadUserFeatures(i)
+      this.userStore.loadUserFeatures(u)
     ]), await Promise.all([
       this.accountStore.loadAccountData({ accounts: t, institutions: a }),
       this.categoryStore.loadCategories(o),
       this.transactionStore.loadTransactionData({
         associatedBeats: r,
-        transactionRules: l,
-        transactions: c
+        transactionRules: c,
+        transactions: d
       })
     ]), this.globalUiStore.setInitialized(!0);
   };
@@ -1240,7 +1240,7 @@ export {
   Ms as AccountType,
   ks as AccountTypeName,
   ss as AnalyticsApi,
-  u as ApiEndpoints,
+  h as ApiEndpoints,
   F as BannerApi,
   Ve as BarChart,
   is as BeatApi,
@@ -1271,7 +1271,7 @@ export {
   ys as ErrorBoundary,
   Os as ErrorStatuses,
   Lt as ExpenseStatus,
-  y as Fetch,
+  S as Fetch,
   nr as Frequency,
   k as GlobalCopyApi,
   te as GlobalCopyStore,

package/dist/common/types/AppData.d.ts

@@ -39,10 +39,14 @@ export interface ClientConfig {
 }
 export interface MasterConfig {
     deep_link_params?: DeepLinkParams;
+    style?: StyleConfig;
     ui_message_protocol?: string;
     ui_message_version?: number;
     ui_message_webview_url_scheme?: string;
 }
+export interface StyleConfig {
+    font_name?: string;
+}
 export interface DeepLinkParams {
     account_guids?: string[];
     date_range?: [Date, Date];

package/dist/common/utils/Theme.d.ts

@@ -1,6 +1,7 @@
 import { PaletteColor, Theme } from '@mui/material';
 import { ClientStyleProfile } from '../types';
-export declare const getClientTheme: (theme: Theme, clientStyleProfile: ClientStyleProfile) => {
+import { ClientConfig } from '../types/AppData';
+export declare const getClientTheme: (theme: Theme, clientStyleProfile: ClientStyleProfile, clientConfig?: ClientConfig) => {
     typography: {
         [k: string]: string | {
             fontFamily: string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mx-cartographer/experiences",
-  "version": "7.0.49",
+  "version": "7.0.50-alpha.bb1",
   "description": "Library containing experience widgets",
   "author": "MX",
   "license": "MIT",