@mx-cartographer/experiences 7.0.21 → 7.0.22-alpha.san1

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [7.0.23] - 09-24-2025
+
+- **FIXED** - New `TrendsWidget` Abbreviated Y-axis labels (e.g., $4,000 → $4k)
+
+## [7.0.22] - 09-24-2025
+
+- **FIXED** - `InsightsMicroWidget` now adheres to client font family
+
 ## [7.0.21] - 09-24-2025
 
 - **FIXED** - Added an extra flag (user.email/user.phone) for the delivery methods status not updating for each notification types.

package/dist/{ViewMoreMicroCard-BPEzFZRG.mjs → ViewMoreMicroCard-DFAY0tA8.mjs}

@@ -1,42 +1,42 @@
-import { jsx as e, jsxs as g } from "react/jsx-runtime";
+import { jsx as e, jsxs as I } from "react/jsx-runtime";
 import u, { useState as ae, useEffect as ee } from "react";
-import { observer as Z } from "mobx-react-lite";
+import { observer as P } from "mobx-react-lite";
 import be from "@mui/material/CssBaseline";
-import { useTheme as ve, ThemeProvider as Ue } from "@mui/material/styles";
+import { useTheme as Se, ThemeProvider as Ue } from "@mui/material/styles";
 import ze from "@mui/material/Link";
 import K from "@mui/material/Stack";
-import Ee from "@mui/material/Typography";
-import { ChevronLeft as Ke, ChevronRight as Se } from "@mxenabled/mx-icons";
+import ue from "@mui/material/Typography";
+import { ChevronLeft as Ke, ChevronRight as Me } from "@mxenabled/mx-icons";
 import { L as $e } from "./Loader-DUaFpDGv.mjs";
 import U from "@mui/material/Box";
-import ue from "@mui/material/IconButton";
-import { useInView as Me } from "react-intersection-observer";
-import { P as Ye, CategoryIcon as je, useTokens as Ae, MerchantLogo as Xe, Icon as J } from "@mxenabled/mxui";
-import Oe from "@mui/material/styles/useTheme";
+import pe from "@mui/material/IconButton";
+import { useInView as Ae } from "react-intersection-observer";
+import { P as Ye, CategoryIcon as je, useTokens as Oe, MerchantLogo as Xe, Icon as J } from "@mxenabled/mxui";
+import ce from "@mui/material/styles/useTheme";
 import { b as Qe } from "./Category-CevNQ03n.mjs";
 import { css as qe } from "@mxenabled/cssinjs";
 import { b as Je } from "./Localization-2MODESHW.mjs";
 import et from "@mui/material/CircularProgress";
-import { makeAutoObservable as ce, runInAction as Te } from "mobx";
-import { G as pe, a as tt, u as it, b as ot } from "./useCombineEvents-DaDBSR_1.mjs";
-import { B as _e } from "./BeatApi-DLu87ijw.mjs";
+import { makeAutoObservable as se, runInAction as Te } from "mobx";
+import { G as _e, a as tt, u as it, b as ot } from "./useCombineEvents-DaDBSR_1.mjs";
+import { B as Ce } from "./BeatApi-DLu87ijw.mjs";
 import rt from "@mui/material/Card";
 import lt from "@mui/material/CardActions";
 import nt from "@mui/material/CardContent";
 import at from "@mui/material/CardHeader";
-const Ce = {
+const fe = {
   featureVersion: "spendVsIncomeTrends"
 };
 class ct {
-  copyApi = new pe("/", "");
+  copyApi = new _e("/", "");
   copyObject = {};
   namespace = "experiences";
   translationKey = "micro_insights";
   constructor() {
-    ce(this);
+    se(this);
   }
   initialize = async (o, t) => {
-    this.copyApi = new pe(o, t), await this.loadCopy();
+    this.copyApi = new _e(o, t), await this.loadCopy();
   };
   loadCopy = async () => {
     const o = await this.copyApi.getGlobalCopy(this.namespace, this.translationKey);
@@ -71,26 +71,26 @@ const de = {
   WeeklyNewMerchantsV2: "WeeklyNewMerchantsV2",
   MonthlySpendComparison: "MonthlySpendComparison",
   MonthlySpendToIncomeComparison: "MonthlySpendToIncomeComparison"
-}, S = window?.app?.clientConfig?.microwidget_instance_id || "", fe = {
+}, S = window?.app?.clientConfig?.microwidget_instance_id || "", me = {
   INSIGHTS_MICRO_WIDGET: "/micro-insights-carousel"
-}, We = (i) => `on${i}Click`, we = (i) => `on${i}View`, xe = (i) => `on${i}ViewFirstTime`, se = (i) => i.replace(/([a-z])([A-Z])/g, "$1 $2"), dt = () => Object.values(de).reduce(
+}, We = (i) => `on${i}Click`, we = (i) => `on${i}View`, xe = (i) => `on${i}ViewFirstTime`, he = (i) => i.replace(/([a-z])([A-Z])/g, "$1 $2"), st = () => Object.values(de).reduce(
   (i, o) => ({
     ...i,
     [We(o)]: {
-      action: D.MICRO_BEAT_CLICKED,
-      category: x.BEAT_INTERACTION,
-      label: se(o),
+      action: x.MICRO_BEAT_CLICKED,
+      category: w.BEAT_INTERACTION,
+      label: he(o),
       value: S
     }
   }),
   {}
-), st = () => Object.values(de).reduce(
+), dt = () => Object.values(de).reduce(
   (i, o) => ({
     ...i,
     [we(o)]: {
-      action: D.MICRO_BEAT_DISPLAYED,
-      category: x.BEAT_INTERACTION,
-      label: se(o),
+      action: x.MICRO_BEAT_DISPLAYED,
+      category: w.BEAT_INTERACTION,
+      label: he(o),
       value: S
     }
   }),
@@ -99,19 +99,19 @@ const de = {
   (i, o) => ({
     ...i,
     [xe(o)]: {
-      action: D.MICRO_BEAT_DISPLAYED_FIRST_TIME,
-      category: x.BEAT_INTERACTION,
-      label: se(o),
+      action: x.MICRO_BEAT_DISPLAYED_FIRST_TIME,
+      category: w.BEAT_INTERACTION,
+      label: he(o),
       value: S
     }
   }),
   {}
-), w = {
+), W = {
   CARD: "Card",
   CAROUSEL_CONTROL: "Carousel Control",
   MICRO_WIDGET: "Micro Widget",
   VIEW_MORE: "View More"
-}, x = {
+}, w = {
   MICRO_WIDGET_INTERACTION: "Micro Widget Interaction",
   BEAT_INTERACTION: "Beat Interaction"
 }, M = {
@@ -123,7 +123,7 @@ const de = {
   ON_VIEW_MORE_CLICKED: "onViewMoreClicked"
 }, De = {
   ON_VIEW_MORE_VIEWED: "onViewMoreCardView"
-}, D = {
+}, x = {
   CONTROL_BACKWARD: "Control Backward",
   CONTROL_FORWARD: "Control Forward",
   MICRO_BEAT_CLICKED: "Micro Beat Clicked",
@@ -131,95 +131,95 @@ const de = {
   MICRO_BEAT_DISPLAYED_FIRST_TIME: "Micro Beat Displayed For First Time",
   SWIPE_BACKWARD: "Swipe Backward",
   SWIPE_FORWARD: "Swipe Forward"
-}, V = {
+}, H = {
   MICRO_WIDGET_CAROUSEL: "Micro Widget Carousel",
   MICRO_WIDGET_CAROUSEL_ZERO_STATE: "Micro Widget Carousel Zero State",
   MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS: "Micro Widget Carousel No Relevant Insights"
-}, me = {
-  [V.MICRO_WIDGET_CAROUSEL]: {
-    label: w.MICRO_WIDGET,
-    name: V.MICRO_WIDGET_CAROUSEL,
-    path: fe.INSIGHTS_MICRO_WIDGET,
+}, Re = {
+  [H.MICRO_WIDGET_CAROUSEL]: {
+    label: W.MICRO_WIDGET,
+    name: H.MICRO_WIDGET_CAROUSEL,
+    path: me.INSIGHTS_MICRO_WIDGET,
     value: S
   },
   // zero state
-  [V.MICRO_WIDGET_CAROUSEL_ZERO_STATE]: {
-    label: w.MICRO_WIDGET,
-    name: V.MICRO_WIDGET_CAROUSEL_ZERO_STATE,
-    path: fe.INSIGHTS_MICRO_WIDGET,
+  [H.MICRO_WIDGET_CAROUSEL_ZERO_STATE]: {
+    label: W.MICRO_WIDGET,
+    name: H.MICRO_WIDGET_CAROUSEL_ZERO_STATE,
+    path: me.INSIGHTS_MICRO_WIDGET,
     value: S
   },
   // no relevant cards
-  [V.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS]: {
-    label: w.MICRO_WIDGET,
-    name: V.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS,
+  [H.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS]: {
+    label: W.MICRO_WIDGET,
+    name: H.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS,
     path: "/micro-widget",
     value: S
   }
-}, Re = {
+}, ge = {
   // carousel control interaction events - clicks and swipes
   [M.ON_CAROUSEL_BACK_CLICK]: {
-    action: D.CONTROL_BACKWARD,
-    category: x.MICRO_WIDGET_INTERACTION,
-    label: w.CAROUSEL_CONTROL,
+    action: x.CONTROL_BACKWARD,
+    category: w.MICRO_WIDGET_INTERACTION,
+    label: W.CAROUSEL_CONTROL,
     value: S
   },
   [M.ON_CAROUSEL_FORWARD_CLICK]: {
-    action: D.CONTROL_FORWARD,
-    category: x.MICRO_WIDGET_INTERACTION,
-    label: w.CAROUSEL_CONTROL,
+    action: x.CONTROL_FORWARD,
+    category: w.MICRO_WIDGET_INTERACTION,
+    label: W.CAROUSEL_CONTROL,
     value: S
   },
   [M.ON_CAROUSEL_BACK_SWIPE]: {
-    action: D.SWIPE_BACKWARD,
-    category: x.MICRO_WIDGET_INTERACTION,
-    label: w.CAROUSEL_CONTROL,
+    action: x.SWIPE_BACKWARD,
+    category: w.MICRO_WIDGET_INTERACTION,
+    label: W.CAROUSEL_CONTROL,
     value: S
   },
   [M.ON_CAROUSEL_FORWARD_SWIPE]: {
-    action: D.SWIPE_FORWARD,
-    category: x.MICRO_WIDGET_INTERACTION,
-    label: w.CAROUSEL_CONTROL,
+    action: x.SWIPE_FORWARD,
+    category: w.MICRO_WIDGET_INTERACTION,
+    label: W.CAROUSEL_CONTROL,
     value: S
   },
   // read more card events
   [M.ON_VIEW_MORE_CLICKED]: {
-    action: D.MICRO_BEAT_CLICKED,
-    category: x.BEAT_INTERACTION,
-    label: w.VIEW_MORE,
+    action: x.MICRO_BEAT_CLICKED,
+    category: w.BEAT_INTERACTION,
+    label: W.VIEW_MORE,
     value: S
   },
   [De.ON_VIEW_MORE_VIEWED]: {
-    action: D.MICRO_BEAT_DISPLAYED,
-    category: x.BEAT_INTERACTION,
-    label: w.VIEW_MORE,
+    action: x.MICRO_BEAT_DISPLAYED,
+    category: w.BEAT_INTERACTION,
+    label: W.VIEW_MORE,
     value: S
   },
-  ...dt(),
   ...st(),
+  ...dt(),
   ...ht()
-}, ge = async (i, o) => !o || !Re[i] ? null : o.sendAnalyticEvent(Re[i]).then((t) => t).catch((t) => {
+}, Ie = async (i, o) => !o || !ge[i] ? null : o.sendAnalyticEvent(ge[i]).then((t) => t).catch((t) => {
   throw t;
-}), Ie = async (i, o) => !o || !me[i] ? null : o.sendAnalyticsPageview(me[i]).then((t) => t).catch((t) => {
+}), ye = async (i, o) => !o || !Re[i] ? null : o.sendAnalyticsPageview(Re[i]).then((t) => t).catch((t) => {
   throw t;
 });
 class Et {
-  onAnalyticEvent = ge;
-  onAnalyticPageView = Ie;
-  beatApi = new _e("/", "");
+  onAnalyticEvent = Ie;
+  onAnalyticPageView = ye;
+  beatApi = new Ce("/", "");
   constructor() {
-    ce(this);
+    se(this);
   }
   initialize = async (o, t, r) => {
     this.onAnalyticEvent = (l, n) => {
-      ge(l, n).then((a) => a).catch((a) => {
+      Ie(l, n).then((a) => a).catch((a) => {
         throw a.status === 401 && r(), a;
       });
     }, this.onAnalyticPageView = (l, n) => {
-      Ie(l, n).then((a) => a).catch((a) => {
+      ye(l, n).then((a) => a).catch((a) => {
         throw a.status === 401 && r(), a;
       });
-    }, this.beatApi = new _e(o, t);
+    }, this.beatApi = new Ce(o, t);
   };
   updateBeat = async (o) => {
     this.beatApi.updateBeat(o);
@@ -236,7 +236,7 @@ class ut {
   token = "";
   isInitialized = !1;
   constructor() {
-    this.copyStore = new ct(), this.insightsMicroWidgetStore = new Et(), ce(this);
+    this.copyStore = new ct(), this.insightsMicroWidgetStore = new Et(), se(this);
   }
   initialize = async (o, t, r) => {
     await this.copyStore.initialize(o, t), await this.insightsMicroWidgetStore.initialize(o, t, r);
@@ -259,7 +259,7 @@ const $ = u.createContext(null), pt = ({
     description: l,
     heightOverrides: n,
     icon: a,
-    isActiveCard: s,
+    isActiveCard: d,
     isZeroState: p,
     onCardClick: _ = () => {
     },
@@ -270,7 +270,7 @@ const $ = u.createContext(null), pt = ({
     variant: c,
     widthOverrides: E
   }, R) {
-    const [y, O] = u.useState(!1), { cardStyle: T, linkTextStyle: v } = f, k = c ? T : { border: "none", boxShadow: "none", ...T }, P = /* @__PURE__ */ e(
+    const y = ce(), [D, O] = u.useState(!1), { cardStyle: v, linkTextStyle: F } = f, z = c ? v : { border: "none", boxShadow: "none", ...v }, g = /* @__PURE__ */ e(
       Ye,
       {
         className: "mx-micro-card-description",
@@ -287,13 +287,19 @@ const $ = u.createContext(null), pt = ({
           WebkitLineClamp: 2,
           wordWrap: "break-word"
         },
-        children: l && /* @__PURE__ */ e("span", { dangerouslySetInnerHTML: { __html: l } })
+        children: l && /* @__PURE__ */ e(
+          "span",
+          {
+            dangerouslySetInnerHTML: { __html: l },
+            style: { fontFamily: y.typography.fontFamily }
+          }
+        )
       }
     );
     return /* @__PURE__ */ e(
       U,
       {
-        "aria-hidden": !s,
+        "aria-hidden": !d,
         "aria-label": t,
         "aria-labelledby": "divButton",
         "aria-roledescription": "slide",
@@ -301,12 +307,13 @@ const $ = u.createContext(null), pt = ({
         role: "group",
         sx: {
           height: "100%",
-          minWidth: E ? `${E}px` : "100%"
+          minWidth: E ? `${E}px` : "100%",
+          fontFamily: y.typography.fontFamily
         },
         children: /* @__PURE__ */ e(
           U,
           {
-            "aria-hidden": !s,
+            "aria-hidden": !d,
             "aria-label": t,
             id: "divButton",
             onClick: () => _(),
@@ -315,11 +322,11 @@ const $ = u.createContext(null), pt = ({
             ref: R,
             role: "button",
             sx: {
-              border: y ? "1px solid rgba(82, 138, 224, 0.8)" : void 0,
+              border: D ? "1px solid rgba(82, 138, 224, 0.8)" : void 0,
               borderRadius: "8px",
               height: "100%"
             },
-            tabIndex: s ? 0 : -1,
+            tabIndex: d ? 0 : -1,
             children: /* @__PURE__ */ e(
               rt,
               {
@@ -331,14 +338,14 @@ const $ = u.createContext(null), pt = ({
                   cursor: "pointer",
                   height: n ? "100%" : 124,
                   p: 16,
-                  ...k,
+                  ...z,
                   "& .MuiCardHeader-avatar": {
                     color: h.iconColor,
                     mr: "8px"
                   }
                 },
                 variant: c,
-                children: /* @__PURE__ */ g(
+                children: /* @__PURE__ */ I(
                   K,
                   {
                     sx: {
@@ -350,13 +357,13 @@ const $ = u.createContext(null), pt = ({
                         at,
                         {
                           avatar: C && a,
-                          subheader: p && P,
+                          subheader: p && g,
                           sx: { color: h.headerColor, p: 0 },
                           title: m,
                           titleTypographyProps: { fontSize: 15, fontWeight: 600, variant: "h3" }
                         }
                       ),
-                      /* @__PURE__ */ e(nt, { sx: { p: 0 }, children: !p && P }),
+                      /* @__PURE__ */ e(nt, { sx: { p: 0 }, children: !p && g }),
                       !!o && /* @__PURE__ */ e(
                         lt,
                         {
@@ -367,13 +374,13 @@ const $ = u.createContext(null), pt = ({
                           children: /* @__PURE__ */ e(
                             U,
                             {
-                              sx: (I) => ({
-                                color: h.buttonColor ? h.buttonColor : I.palette.primary.main,
-                                // TODO: Per Cameron the theme package in @mxenabled/mxui will be getting a big update and this will be theme.palette.primary_main
+                              sx: (L) => ({
+                                color: h.buttonColor ? h.buttonColor : L.palette.primary.main,
                                 fontSize: 14,
                                 fontWeight: "bold",
                                 px: 28,
-                                ...v
+                                fontFamily: L.typography.fontFamily,
+                                ...F
                               }),
                               children: o
                             }
@@ -396,7 +403,7 @@ const $ = u.createContext(null), pt = ({
     i.primary_category_guid ? t(i.primary_category_guid) : i.category_guids?.length && t(i.category_guids[0]);
   }, []), /* @__PURE__ */ e(je, { categoryGuid: o, size: 16, sx: { minWidth: 16 } });
 }, Ct = ({ beat: i }) => {
-  const o = Ae(), t = ft(o);
+  const o = Oe(), t = ft(o);
   return /* @__PURE__ */ e(
     Xe,
     {
@@ -411,7 +418,7 @@ const $ = u.createContext(null), pt = ({
   "& .kyper-categoryicon": {
     display: "flex"
   }
-}), mt = Z(Ct), Rt = ({
+}), mt = P(Ct), Rt = ({
   color: i = "currentColor",
   height: o,
   size: t = 16,
@@ -446,9 +453,9 @@ const $ = u.createContext(null), pt = ({
   const t = gt(i), r = t.length / 2, l = t.slice(0, r), n = t.slice(r);
   return !l.length || !n.length ? o.Color.Primary300 : l[0].amount > n[0].amount ? o.Color.Error300 : l[0].amount < n[0].amount ? o.Color.Success300 : o.Color.Primary300;
 }, yt = ({ beat: i }) => {
-  const o = Ae(), t = It(i.data_series, o);
+  const o = Oe(), t = It(i.data_series, o);
   return /* @__PURE__ */ e(J, { name: "bar_chart", sx: { color: t } });
-}, Le = () => /* @__PURE__ */ g("svg", { fill: "none", height: "36", viewBox: "0 0 40 36", width: "40", xmlns: "http://www.w3.org/2000/svg", children: [
+}, Le = () => /* @__PURE__ */ I("svg", { fill: "none", height: "36", viewBox: "0 0 40 36", width: "40", xmlns: "http://www.w3.org/2000/svg", children: [
   /* @__PURE__ */ e(
     "path",
     {
@@ -692,7 +699,7 @@ const $ = u.createContext(null), pt = ({
       fillRule: "evenodd"
     }
   ),
-  /* @__PURE__ */ g("g", { filter: "url(#filter0_d_1565_98011)", children: [
+  /* @__PURE__ */ I("g", { filter: "url(#filter0_d_1565_98011)", children: [
     /* @__PURE__ */ e("mask", { height: "22", id: "mask1_1565_98011", maskUnits: "userSpaceOnUse", width: "17", x: "16", y: "12", children: /* @__PURE__ */ e(
       "path",
       {
@@ -948,10 +955,10 @@ const $ = u.createContext(null), pt = ({
     ),
     /* @__PURE__ */ e("path", { d: "M17.9668 31.5737H19.4947", stroke: "#E4E8EE", strokeWidth: "0.264005" })
   ] }),
-  /* @__PURE__ */ g("g", { filter: "url(#filter1_d_1565_98011)", children: [
+  /* @__PURE__ */ I("g", { filter: "url(#filter1_d_1565_98011)", children: [
     /* @__PURE__ */ e("circle", { cx: "15.0441", cy: "16.0441", fill: "#CDD3DD", r: "15.0441" }),
     /* @__PURE__ */ e("mask", { height: "30", id: "mask2_1565_98011", maskUnits: "userSpaceOnUse", width: "30", x: "0", y: "1", children: /* @__PURE__ */ e("circle", { cx: "15.0435", cy: "16.0445", fill: "#F8F9FB", r: "14.3951" }) }),
-    /* @__PURE__ */ g("g", { mask: "url(#mask2_1565_98011)", children: [
+    /* @__PURE__ */ I("g", { mask: "url(#mask2_1565_98011)", children: [
       /* @__PURE__ */ e("rect", { fill: "white", height: "31.1359", transform: "translate(0 0.162598)", width: "31.0101" }),
       /* @__PURE__ */ e("rect", { fill: "#A8B1BD", height: "3.0172", rx: "0.167622", width: "3.0172", x: "3.26953", y: "4.52002" }),
       /* @__PURE__ */ e("rect", { fill: "#A8B1BD", height: "3.0172", rx: "0.167622", width: "3.0172", x: "3.26953", y: "17.1758" }),
@@ -1141,8 +1148,8 @@ const $ = u.createContext(null), pt = ({
       fill: "#CDD3DD"
     }
   ),
-  /* @__PURE__ */ g("defs", { children: [
-    /* @__PURE__ */ g(
+  /* @__PURE__ */ I("defs", { children: [
+    /* @__PURE__ */ I(
       "filter",
       {
         colorInterpolationFilters: "sRGB",
@@ -1185,7 +1192,7 @@ const $ = u.createContext(null), pt = ({
         ]
       }
     ),
-    /* @__PURE__ */ g(
+    /* @__PURE__ */ I(
       "filter",
       {
         colorInterpolationFilters: "sRGB",
@@ -1229,8 +1236,8 @@ const $ = u.createContext(null), pt = ({
       }
     )
   ] })
-] }), ye = ({ beat: i, clientColorScheme: o, color: t, type: r }) => {
-  const l = Oe(), n = o?.primary_300 ? o.primary_300 : l.palette.primary.main;
+] }), ve = ({ beat: i, clientColorScheme: o, color: t, type: r }) => {
+  const l = ce(), n = o?.primary_300 ? o.primary_300 : l.palette.primary.main;
   return r === 0 ? /* @__PURE__ */ e(J, { fill: !0, name: "error", sx: { color: t || n } }) : r === 1 && i ? /* @__PURE__ */ e(_t, { beat: i }) : r === 2 && i ? /* @__PURE__ */ e(mt, { beat: i }) : r === 3 && i ? /* @__PURE__ */ e(yt, { beat: i }) : r === 5 && i ? /* @__PURE__ */ e(J, { name: "campaign" }) : /* @__PURE__ */ e(
     J,
     {
@@ -1241,7 +1248,7 @@ const $ = u.createContext(null), pt = ({
       }
     }
   );
-}, H = () => {
+}, k = () => {
   const i = u.useContext($);
   if (!i)
     throw new Error("useCopyStore() must be used within the InsightsMicroWidgetDataProvider");
@@ -1276,18 +1283,18 @@ const $ = u.createContext(null), pt = ({
   showCTAColocatedWithText: l = !0,
   heightOverrides: n,
   index: a,
-  isActiveCard: s,
+  isActiveCard: d,
   onCardClick: p,
   posthog: _,
   showIcon: C,
   variant: f,
   widthOverrides: h
 }) => {
-  const { ref: m, inView: c } = Me({
+  const { ref: m, inView: c } = Ae({
     threshold: He
-  }), { cardsCopy: E } = H(), { onEvent: R } = Y(), { updateBeat: y, updateOffer: O } = vt();
+  }), { cardsCopy: E } = k(), { onEvent: R } = Y(), { updateBeat: y, updateOffer: D } = vt();
   ee(() => {
-    c && (t.has_been_displayed ? R(we(t.template)) : (t.guid.startsWith("OFR") ? O({
+    c && (t.has_been_displayed ? R(we(t.template)) : (t.guid.startsWith("OFR") ? D({
       ...t,
       has_been_displayed: !0
     }) : y({
@@ -1310,7 +1317,7 @@ const $ = u.createContext(null), pt = ({
           position: a
         });
   }, [t, a, c]);
-  const T = () => {
+  const O = () => {
     if (p && p(t), R(We(t.template)), t.template === "MarketingOffer") {
       const v = t;
       _?.capture("clicked_messaging_insight", {
@@ -1334,8 +1341,8 @@ const $ = u.createContext(null), pt = ({
       description: t?.html_micro_description && t?.html_micro_description.length > 0 ? t.html_micro_description : t.html_description,
       fontColors: { buttonColor: r?.primary_300 },
       heightOverrides: n,
-      icon: ye && /* @__PURE__ */ e(
-        ye,
+      icon: ve && /* @__PURE__ */ e(
+        ve,
         {
           beat: t,
           clientColorScheme: r,
@@ -1343,8 +1350,8 @@ const $ = u.createContext(null), pt = ({
           type: t?.icon_type
         }
       ),
-      isActiveCard: s,
-      onCardClick: T,
+      isActiveCard: d,
+      onCardClick: O,
       posthog: _,
       ref: m,
       showCTAColocatedWithText: l,
@@ -1362,11 +1369,11 @@ const $ = u.createContext(null), pt = ({
   onPreviousClick: l,
   scrollRightBoundary: n,
   scrollX: a,
-  shouldApplyNewAnimation: s = !1,
+  shouldApplyNewAnimation: d = !1,
   visibleCardsCount: p = 1
 }) => {
-  const _ = ve(), { carouselCopy: C } = H(), f = Math.floor(a) > n || o - p + 1 === 0, h = a < 0 || t - 1 === o, m = _.palette.grey[500], c = i?.primary_300 ?? _.palette.primary.main;
-  return /* @__PURE__ */ g(
+  const _ = Se(), { carouselCopy: C } = k(), f = Math.floor(a) > n || o - p + 1 === 0, h = a < 0 || t - 1 === o, m = _.palette.grey[500], c = i?.primary_300 ?? _.palette.primary.main;
+  return /* @__PURE__ */ I(
     K,
     {
       direction: "row",
@@ -1382,7 +1389,7 @@ const $ = u.createContext(null), pt = ({
       },
       children: [
         /* @__PURE__ */ e(
-          ue,
+          pe,
           {
             "aria-disabled": f,
             "aria-label": C.previous_insight_cta_aria,
@@ -1409,7 +1416,7 @@ const $ = u.createContext(null), pt = ({
                 height: 8,
                 mr: 8,
                 // existing comment from meganthan "we were using `gap` instead of margin, but it doesn't work in safari browsers older than iOS 14.1"
-                ...s ? {
+                ...d ? {
                   borderRadius: "4px",
                   transformOrigin: "center",
                   transition: "all 0.5s ease-out",
@@ -1418,21 +1425,21 @@ const $ = u.createContext(null), pt = ({
                   borderRadius: "50%",
                   p: 0
                 },
-                width: y && s ? 24 : 8
+                width: y && d ? 24 : 8
               }
             },
             `carousel-button-${R}`
           );
         }),
         /* @__PURE__ */ e(
-          ue,
+          pe,
           {
             "aria-disabled": h,
             "aria-label": C.next_insight_cta_aria,
             disabled: h,
             onClick: r,
             children: /* @__PURE__ */ e(
-              Se,
+              Me,
               {
                 style: {
                   color: h ? m : c
@@ -1452,7 +1459,7 @@ const $ = u.createContext(null), pt = ({
   showCTAColocatedWithText: l,
   heightOverrides: n,
   onCardClick: a,
-  posthog: s,
+  posthog: d,
   shouldApplyNewAnimation: p = !1,
   showCarouselControls: _,
   showIcon: C,
@@ -1462,22 +1469,22 @@ const $ = u.createContext(null), pt = ({
   visibleCardsCount: c = 1
   // Default to 1 card visible
 }) => {
-  const E = u.useRef(null), R = u.useRef(null), [y, O] = u.useState(0), [T, v] = u.useState(null), [k, P] = u.useState(null), [I, z] = u.useState(null), [ie, G] = u.useState(p), { carouselCopy: F } = H(), { onEvent: b } = Y();
+  const E = u.useRef(null), R = u.useRef(null), [y, D] = u.useState(0), [O, v] = u.useState(null), [F, z] = u.useState(null), [g, L] = u.useState(null), [ie, G] = u.useState(p), { carouselCopy: B } = k(), { onEvent: b } = Y();
   u.useEffect(() => {
     if (E.current && !o) {
-      const d = E.current.offsetWidth, A = 8;
-      let N;
+      const s = E.current.offsetWidth, A = 8;
+      let V;
       if (c > 1) {
-        const Q = (d - (c - 1) * A) / c / 3;
-        N = (d - Q - (c - 1) * A) / c;
+        const Q = (s - (c - 1) * A) / c / 3;
+        V = (s - Q - (c - 1) * A) / c;
       } else
-        N = d;
-      z(N);
+        V = s;
+      L(V);
     }
   }, [c, E.current?.offsetWidth]), u.useEffect(() => {
-    const d = R.current?.offsetWidth;
-    if (typeof d == "number" && o) {
-      const A = (B) => {
+    const s = R.current?.offsetWidth;
+    if (typeof s == "number" && o) {
+      const A = (Z) => {
         G(!0);
         const q = [
           { maxWidth: 375, cardWidth: 268 },
@@ -1485,52 +1492,52 @@ const $ = u.createContext(null), pt = ({
           { maxWidth: 599, cardWidth: 350 },
           { maxWidth: 749, cardWidth: 450 },
           { maxWidth: 900, cardWidth: 600 }
-        ].find((ne) => B <= ne.maxWidth);
+        ].find((ne) => Z <= ne.maxWidth);
         return q ? q.cardWidth : 750;
       };
-      z(A(d));
-      const N = () => {
-        const B = R.current?.offsetWidth;
-        typeof B == "number" && z(A(B));
+      L(A(s));
+      const V = () => {
+        const Z = R.current?.offsetWidth;
+        typeof Z == "number" && L(A(Z));
       };
-      return window.addEventListener("resize", N), () => {
-        window.removeEventListener("resize", N);
+      return window.addEventListener("resize", V), () => {
+        window.removeEventListener("resize", V);
       };
     }
   }, [o, R]);
   const oe = () => {
-    b(M.ON_CAROUSEL_FORWARD_CLICK, i), E.current && I && E.current.scrollTo({
-      left: y + I + 8,
+    b(M.ON_CAROUSEL_FORWARD_CLICK, i), E.current && g && E.current.scrollTo({
+      left: y + g + 8,
       top: 0,
       behavior: "smooth"
     });
   }, re = () => {
-    b(M.ON_CAROUSEL_BACK_CLICK, i), E.current && I && E.current.scrollTo({
-      left: Math.max(0, y - (I + 8)),
+    b(M.ON_CAROUSEL_BACK_CLICK, i), E.current && g && E.current.scrollTo({
+      left: Math.max(0, y - (g + 8)),
       top: 0,
       behavior: "smooth"
     });
   }, j = () => {
-    E.current && O(E.current.scrollLeft);
+    E.current && D(E.current.scrollLeft);
   }, X = () => {
-    if (!k || !T) return;
-    k - T > St ? b(M.ON_CAROUSEL_FORWARD_SWIPE, i) : b(M.ON_CAROUSEL_BACK_SWIPE, i);
-  }, L = (d) => {
-    v(d.targetTouches[0].clientX);
-  }, Be = (d) => {
-    v(null), P(d.targetTouches[0].clientX);
-  }, he = {
+    if (!F || !O) return;
+    F - O > St ? b(M.ON_CAROUSEL_FORWARD_SWIPE, i) : b(M.ON_CAROUSEL_BACK_SWIPE, i);
+  }, N = (s) => {
+    v(s.targetTouches[0].clientX);
+  }, Be = (s) => {
+    v(null), z(s.targetTouches[0].clientX);
+  }, Ee = {
     clientColorScheme: r,
     showCTAColocatedWithText: l,
     heightOverrides: n,
-    posthog: s,
+    posthog: d,
     showIcon: C,
     variant: h
-  }, le = I ? Math.round(y / (I + 8)) : 0, Ze = E.current ? E.current.scrollWidth - E.current.offsetWidth : 0;
-  return /* @__PURE__ */ g(
+  }, le = g ? Math.round(y / (g + 8)) : 0, Ze = E.current ? E.current.scrollWidth - E.current.offsetWidth : 0;
+  return /* @__PURE__ */ I(
     K,
     {
-      "aria-label": F.carousel_title,
+      "aria-label": B.carousel_title,
       "aria-roledescription": "carousel",
       ref: R,
       role: "group/region",
@@ -1541,13 +1548,13 @@ const $ = u.createContext(null), pt = ({
         width: m || "100%"
       },
       children: [
-        /* @__PURE__ */ g(
+        /* @__PURE__ */ I(
           K,
           {
             direction: "row",
             onScroll: j,
             onTouchEnd: X,
-            onTouchMove: L,
+            onTouchMove: N,
             onTouchStart: Be,
             ref: E,
             sx: {
@@ -1568,24 +1575,24 @@ const $ = u.createContext(null), pt = ({
               }
             },
             children: [
-              t.map((d, A) => {
-                const N = A + 1, B = t.length + 1, Q = Je(
-                  F.card_position_in_carousel_aria,
-                  N.toString(),
-                  B.toString()
-                ), q = d.micro_title && d.micro_title.length > 0, ne = d.micro_description && d.micro_description.length > 0, Pe = q ? d.micro_title : d.title, Ge = ne ? d.micro_description : d.description;
+              t.map((s, A) => {
+                const V = A + 1, Z = t.length + 1, Q = Je(
+                  B.card_position_in_carousel_aria,
+                  V.toString(),
+                  Z.toString()
+                ), q = s.micro_title && s.micro_title.length > 0, ne = s.micro_description && s.micro_description.length > 0, Pe = q ? s.micro_title : s.title, Ge = ne ? s.micro_description : s.description;
                 return /* @__PURE__ */ e(
                   Mt,
                   {
                     ariaLabel: `${Q}: ${Pe}, ${Ge}`,
-                    beat: d,
+                    beat: s,
                     index: A,
                     isActiveCard: A === le,
                     onCardClick: a,
-                    widthOverrides: I || void 0,
-                    ...he
+                    widthOverrides: g || void 0,
+                    ...Ee
                   },
-                  `${d.guid} ${A}`
+                  `${s.guid} ${A}`
                 );
               }),
               /* @__PURE__ */ e(
@@ -1593,8 +1600,8 @@ const $ = u.createContext(null), pt = ({
                 {
                   isActiveCard: le === t.length,
                   onCardClick: a,
-                  widthOverrides: I || void 0,
-                  ...he
+                  widthOverrides: g || void 0,
+                  ...Ee
                 }
               )
             ]
@@ -1617,17 +1624,17 @@ const $ = u.createContext(null), pt = ({
       ]
     }
   );
-}, Tt = Z(Ot), Wt = ({
+}, Tt = P(Ot), Wt = ({
   analyticsMetadata: i,
   clientColorScheme: o,
   onCardClick: t,
   posthog: r,
   widthOverrides: l
 }) => {
-  const { carouselCopy: n } = H(), { onEvent: a } = Y(), s = () => {
+  const { carouselCopy: n } = k(), { onEvent: a } = Y(), d = () => {
     a && (a(M.ON_VIEW_MORE_CLICKED, i), t(), r?.capture("clicked_view_more"));
   };
-  return n ? /* @__PURE__ */ g(
+  return n ? /* @__PURE__ */ I(
     K,
     {
       alignItems: "center",
@@ -1640,7 +1647,7 @@ const $ = u.createContext(null), pt = ({
       },
       children: [
         /* @__PURE__ */ e(
-          Ee,
+          ue,
           {
             sx: {
               fontSize: 18,
@@ -1651,10 +1658,10 @@ const $ = u.createContext(null), pt = ({
             children: n.carousel_title
           }
         ),
-        /* @__PURE__ */ g(
+        /* @__PURE__ */ I(
           ze,
           {
-            onClick: s,
+            onClick: d,
             sx: {
               display: "flex",
               alignItems: "center",
@@ -1668,7 +1675,7 @@ const $ = u.createContext(null), pt = ({
             underline: "none",
             children: [
               /* @__PURE__ */ e(
-                Ee,
+                ue,
                 {
                   sx: {
                     color: o?.primary_300,
@@ -1680,19 +1687,19 @@ const $ = u.createContext(null), pt = ({
                   children: n.view_all_insights_in_full_feed_cta_aria
                 }
               ),
-              /* @__PURE__ */ e(Se, { sx: { color: o?.primary_300, ml: "8px" } })
+              /* @__PURE__ */ e(Me, { sx: { color: o?.primary_300, ml: "8px" } })
             ]
           }
         )
       ]
     }
   ) : /* @__PURE__ */ e($e, {});
-}, wt = Z(Wt), xt = ({
+}, wt = P(Wt), xt = ({
   heightOverrides: i,
   widthOverrides: o,
   children: t
 }) => {
-  const { carouselCopy: r } = H();
+  const { carouselCopy: r } = k();
   return /* @__PURE__ */ e(
     U,
     {
@@ -1716,13 +1723,13 @@ const $ = u.createContext(null), pt = ({
   onCardClick: l,
   posthog: n,
   showIcon: a,
-  showWithMargin: s,
+  showWithMargin: d,
   variant: p,
   widthOverrides: _
 }) => {
-  const { cardsCopy: C } = H(), { onEvent: f } = Y(), { onPageview: h } = Ne();
+  const { cardsCopy: C } = k(), { onEvent: f } = Y(), { onPageview: h } = Ne();
   u.useEffect(() => {
-    h(V.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS);
+    h(H.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS);
   }, []);
   const m = () => {
     l && l(), f(M.ON_NO_RELEVANT_INSIGHTS_CLICKED), n?.capture("clicked_insight", {
@@ -1747,7 +1754,7 @@ const $ = u.createContext(null), pt = ({
           card: {
             height: `calc(${Ve[o]}px - 44px)`,
             m: "0 auto",
-            width: s ? "calc(100% - 32px)" : "100%"
+            width: d ? "calc(100% - 32px)" : "100%"
           },
           description: {
             WebkitLineClamp: 4
@@ -1762,7 +1769,7 @@ const $ = u.createContext(null), pt = ({
       widthOverrides: _
     }
   );
-}, ci = Z(ke), Fe = ({
+}, ci = P(ke), Fe = ({
   ariaLabel: i,
   carouselSize: o,
   heightOverrides: t,
@@ -1770,12 +1777,12 @@ const $ = u.createContext(null), pt = ({
   posthog: l,
   showIcon: n,
   showWithMargin: a,
-  variant: s,
+  variant: d,
   widthOverrides: p
 }) => {
-  const { onPageview: _ } = Ne(), { zeroStateCopy: C } = H();
+  const { onPageview: _ } = Ne(), { zeroStateCopy: C } = k();
   return u.useEffect(() => {
-    _(V.MICRO_WIDGET_CAROUSEL_ZERO_STATE);
+    _(H.MICRO_WIDGET_CAROUSEL_ZERO_STATE);
   }, []), /* @__PURE__ */ e(
     te,
     {
@@ -1800,11 +1807,11 @@ const $ = u.createContext(null), pt = ({
         }
       },
       title: C.carousel_zero_state_title,
-      variant: s,
+      variant: d,
       widthOverrides: p
     }
   );
-}, di = Z(Fe), Dt = () => /* @__PURE__ */ e(
+}, si = P(Fe), Dt = () => /* @__PURE__ */ e(
   U,
   {
     sx: {
@@ -1816,7 +1823,7 @@ const $ = u.createContext(null), pt = ({
     },
     children: /* @__PURE__ */ e(et, {})
   }
-), W = new ut(), Lt = ({
+), T = new ut(), Lt = ({
   allowSingleCardPeeking: i,
   areBeatsLoading: o,
   beats: t = [],
@@ -1826,7 +1833,7 @@ const $ = u.createContext(null), pt = ({
   showCTAColocatedWithText: l = !0,
   endpoint: n = "/",
   heightOverrides: a,
-  logOutUser: s,
+  logOutUser: d,
   onCardClick: p = () => {
   },
   onEvent: _ = () => {
@@ -1840,22 +1847,22 @@ const $ = u.createContext(null), pt = ({
   showHeader: E,
   showIcon: R,
   showWithMargin: y = !0,
-  token: O = "",
-  useDarkMode: T,
+  token: D = "",
+  useDarkMode: O,
   userHasFullInsightFeedBeats: v,
-  variant: k,
-  visibleCardsCount: P = 1,
-  widthOverrides: I
+  variant: F,
+  visibleCardsCount: z = 1,
+  widthOverrides: g
 }) => {
-  const z = ve(), [ie, G] = ae("STANDARD"), [F, b] = ae(!1), oe = it([_], W), re = ot([C], W);
+  const L = Se(), [ie, G] = ae("STANDARD"), [B, b] = ae(!1), oe = it([_], T), re = ot([C], T);
   u.useEffect(() => {
-    W.isInitialized || W.initialize(n, O, s);
-  }, [n, O, s, W.isInitialized]), u.useEffect(() => {
-    const L = window.innerHeight;
-    L < 180 ? G("STANDARD") : L >= 180 && L < 200 ? G("LARGE") : L >= 200 && L < 248 ? G("XLARGE") : L >= 248 && G("XXLARGE");
+    T.isInitialized || T.initialize(n, D, d);
+  }, [n, D, d, T.isInitialized]), u.useEffect(() => {
+    const N = window.innerHeight;
+    N < 180 ? G("STANDARD") : N >= 180 && N < 200 ? G("LARGE") : N >= 200 && N < 248 ? G("XLARGE") : N >= 248 && G("XXLARGE");
   }, [window.innerHeight]), u.useEffect(() => {
-    b(!o && W.isInitialized);
-  }, [o, W.isInitialized]);
+    b(!o && T.isInitialized);
+  }, [o, T.isInitialized]);
   const j = {
     showCTAColocatedWithText: l,
     heightOverrides: a,
@@ -1863,49 +1870,49 @@ const $ = u.createContext(null), pt = ({
     posthog: f,
     showIcon: R,
     showWithMargin: y,
-    useDarkMode: T,
-    widthOverrides: I
+    useDarkMode: O,
+    widthOverrides: g
   }, X = {
     carouselSize: ie,
-    variant: k,
+    variant: F,
     ...j
   };
   return (
     // The Theme provider must wrap the component so that the styles don't break when imported into other applications.
-    /* @__PURE__ */ g(Ue, { theme: z, children: [
+    /* @__PURE__ */ I(Ue, { theme: L, children: [
       /* @__PURE__ */ e(be, {}),
-      /* @__PURE__ */ e(pt, { onEvent: oe, onPageview: re, store: W, children: /* @__PURE__ */ g(xt, { heightOverrides: a, widthOverrides: I, children: [
-        (o || !W.isInitialized) && /* @__PURE__ */ e(Dt, {}),
-        F && E && /* @__PURE__ */ e(
+      /* @__PURE__ */ e(pt, { onEvent: oe, onPageview: re, store: T, children: /* @__PURE__ */ I(xt, { heightOverrides: a, widthOverrides: g, children: [
+        (o || !T.isInitialized) && /* @__PURE__ */ e(Dt, {}),
+        B && E && /* @__PURE__ */ e(
           wt,
           {
-            analyticsMetadata: Ce,
+            analyticsMetadata: fe,
             clientColorScheme: r,
             onCardClick: p,
             posthog: f,
-            widthOverrides: I
+            widthOverrides: g
           }
         ),
-        F && !!t.length && /* @__PURE__ */ e(
+        B && !!t.length && /* @__PURE__ */ e(
           Tt,
           {
             allowSingleCardPeeking: i,
-            analyticsMetadata: Ce,
+            analyticsMetadata: fe,
             beats: t,
             clientColorScheme: r,
             shouldApplyNewAnimation: h,
             showCarouselControls: c,
-            variant: m ? k : void 0,
-            visibleCardsCount: P,
+            variant: m ? F : void 0,
+            visibleCardsCount: z,
             ...j
           }
         ),
-        F && !t.length && v && /* @__PURE__ */ e(ke, { clientColorScheme: r, ...X }),
-        F && !t.length && !v && /* @__PURE__ */ e(Fe, { ...X })
+        B && !t.length && v && /* @__PURE__ */ e(ke, { clientColorScheme: r, ...X }),
+        B && !t.length && !v && /* @__PURE__ */ e(Fe, { ...X })
       ] }) })
     ] })
   );
-}, si = Z(Lt), Nt = ({
+}, di = P(Lt), Nt = ({
   isActiveCard: i,
   ariaLabel: o,
   clientColorScheme: t,
@@ -1913,12 +1920,12 @@ const $ = u.createContext(null), pt = ({
   onCardClick: l,
   posthog: n,
   showIcon: a,
-  variant: s,
+  variant: d,
   widthOverrides: p
 }) => {
-  const _ = Oe(), { ref: C, inView: f } = Me({
+  const _ = ce(), { ref: C, inView: f } = Ae({
     threshold: He
-  }), { cardsCopy: h } = H(), { onEvent: m } = Y();
+  }), { cardsCopy: h } = k(), { onEvent: m } = Y();
   ee(() => {
     f && (m(De.ON_VIEW_MORE_VIEWED), n?.capture("viewed_insight", {
       template: "view_more_card"
@@ -1944,11 +1951,11 @@ const $ = u.createContext(null), pt = ({
       ref: C,
       showIcon: a,
       title: h.view_more_card_title,
-      variant: s,
+      variant: d,
       widthOverrides: p
     }
   );
-}, Vt = Z(Nt);
+}, Vt = P(Nt);
 export {
   ut as A,
   Mt as B,
@@ -1956,11 +1963,11 @@ export {
   pt as I,
   Tt as M,
   ci as N,
-  Ce as T,
+  fe as T,
   Vt as V,
-  di as Z,
+  si as Z,
   te as a,
-  si as b,
+  di as b,
   Rt as c,
   yt as d,
   Le as e

package/dist/microinsights/index.es.js

@@ -1,4 +1,4 @@
-import { A as s, B as e, C as o, c as t, b as i, I as d, M as n, a as C, d as c, N as I, V as M, Z as g, e as h } from "../ViewMoreMicroCard-BPEzFZRG.mjs";
+import { A as s, B as e, C as o, c as t, b as i, I as d, M as n, a as C, d as c, N as I, V as M, Z as g, e as h } from "../ViewMoreMicroCard-DFAY0tA8.mjs";
 export {
   s as AppStore,
   e as BeatCard,

package/dist/trends/index.es.js

@@ -20,7 +20,7 @@ import { C as rt } from "../CurrencyText-YUhH2caW.mjs";
 import { c as Me } from "../Category-CevNQ03n.mjs";
 import { b as at } from "../Localization-2MODESHW.mjs";
 import { H as be } from "../HeaderCell-DjuifqHJ.mjs";
-import { T as A, b as it } from "../ViewMoreMicroCard-BPEzFZRG.mjs";
+import { T as A, b as it } from "../ViewMoreMicroCard-DFAY0tA8.mjs";
 import { A as y, W as Ae } from "../WidgetContainer-CdBs9WOZ.mjs";
 import { a as Re, T as ke } from "../TransactionDetails-C-z3HGTT.mjs";
 import { D as fe } from "../Drawer-kEE73B87.mjs";
@@ -856,7 +856,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       showXAxisTicks: !0,
       showYAxis: !0,
       showYAxisTicks: !0,
-      valueFormatterString: "0,0"
+      valueFormatterString: "0a"
     }
   );
 }, Jt = M(qt), en = ({ onBackClick: n, onInsightCardClick: o, sx: t }) => {

package/package.json

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