@mx-cartographer/experiences 7.6.15 → 7.6.16

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## [7.6.16] - 01-19-2026
+
+- **UPDATED** - `MicroInsights` BeatIcons Updated
+
 ## [7.6.15] - 01-19-2026
 
 - **FIXED** - `Finstrong` KeyIndicators Zero State Style

package/dist/{ViewMoreMicroCard-DwR0v_ll.mjs → ViewMoreMicroCard-rY-kN9MP.mjs}

@@ -1,33 +1,33 @@
-import { jsx as e, jsxs as g, Fragment as De } from "react/jsx-runtime";
+import { jsx as e, jsxs as g, Fragment as xe } from "react/jsx-runtime";
 import u, { useEffect as ee, useState as J } from "react";
-import { observer as P } from "mobx-react-lite";
+import { observer as b } from "mobx-react-lite";
 import k from "@mui/material/Stack";
-import xe from "@mui/material/Button";
-import Le from "@mui/material/Typography";
-import { BarChart as Ve, Error as ae, Campaign as Ne, ChevronLeft as He, ChevronRight as Ce } from "@mxenabled/mx-icons";
-import { L as ke } from "./Loader-DUaFpDGv.mjs";
+import Le from "@mui/material/Button";
+import Ve from "@mui/material/Typography";
+import { BarChart as Ne, Error as Ce, Campaign as He, ChevronLeft as ke, ChevronRight as fe } from "@mxenabled/mx-icons";
+import { L as Fe } from "./Loader-DUaFpDGv.mjs";
 import Z from "@mui/material/Box";
-import se from "@mui/material/IconButton";
-import { useTheme as Fe } from "@mui/material/styles";
-import { useInView as me } from "react-intersection-observer";
-import { P as Be, CategoryIcon as Ze, MerchantLogo as Pe } from "@mxenabled/mxui";
-import { b as be } from "./Category-CevNQ03n.mjs";
+import ae from "@mui/material/IconButton";
+import { useTheme as me } from "@mui/material/styles";
+import { useInView as Re } from "react-intersection-observer";
+import { P as Be, CategoryIcon as Ze, MerchantLogo as be } from "@mxenabled/mxui";
+import { b as Pe } from "./Category-CevNQ03n.mjs";
 import te from "@mui/material/styles/useTheme";
 import { b as Ge } from "./Localization-2MODESHW.mjs";
 import Ue from "@mui/material/CircularProgress";
-import { makeAutoObservable as ie, runInAction as Re } from "mobx";
-import { G as ce, a as ze, u as Ke, b as $e } from "./useCombineEvents-CRwX-qWE.mjs";
-import { B as de } from "./BeatApi-De2IaqH2.mjs";
+import { makeAutoObservable as ie, runInAction as ge } from "mobx";
+import { G as se, a as ze, u as Ke, b as $e } from "./useCombineEvents-CRwX-qWE.mjs";
+import { B as ce } from "./BeatApi-De2IaqH2.mjs";
 import { u as Ye } from "./useWidgetLoadTimer-hIOioiKx.mjs";
 import je from "@mui/material/Card";
 import Xe from "@mui/material/CardActions";
 import Qe from "@mui/material/CardContent";
 import qe from "@mui/material/CardHeader";
-const Ee = {
+const de = {
   featureVersion: "spendVsIncomeTrends"
 };
 class Je {
-  copyApi = new ce("/", "");
+  copyApi = new se("/", "");
   copyObject = {};
   namespace = "experiences";
   translationKey = "micro_insights";
@@ -38,11 +38,11 @@ class Je {
   // DEPRECATED: Initialize api in constructor and use loadCopy instead
   // TODO: Remove this function
   initialize = async (o, t) => {
-    this.copyApi = new ce(o, t), await this.loadCopy();
+    this.copyApi = new se(o, t), await this.loadCopy();
   };
   loadCopy = async () => {
     const o = await this.copyApi.getGlobalCopy(this.namespace, this.translationKey);
-    Re(() => {
+    ge(() => {
       this.copyObject = o[this.translationKey];
     });
   };
@@ -73,12 +73,12 @@ const oe = {
   WeeklyNewMerchantsV2: "WeeklyNewMerchantsV2",
   MonthlySpendComparison: "MonthlySpendComparison",
   MonthlySpendToIncomeComparison: "MonthlySpendToIncomeComparison"
-}, v = window?.app?.clientConfig?.microwidget_instance_id || "", he = {
+}, v = window?.app?.clientConfig?.microwidget_instance_id || "", Ee = {
   INSIGHTS_MICRO_WIDGET: "/micro-insights-carousel"
-}, ge = (i) => `on${i}Click`, Ie = (i) => `on${i}View`, ye = (i) => `on${i}ViewFirstTime`, le = (i) => i.replace(/([a-z])([A-Z])/g, "$1 $2"), et = () => Object.values(oe).reduce(
+}, Ie = (i) => `on${i}Click`, ye = (i) => `on${i}View`, ve = (i) => `on${i}ViewFirstTime`, le = (i) => i.replace(/([a-z])([A-Z])/g, "$1 $2"), et = () => Object.values(oe).reduce(
   (i, o) => ({
     ...i,
-    [ge(o)]: {
+    [Ie(o)]: {
       action: L.MICRO_BEAT_CLICKED,
       category: x.BEAT_INTERACTION,
       label: le(o),
@@ -89,7 +89,7 @@ const oe = {
 ), tt = () => Object.values(oe).reduce(
   (i, o) => ({
     ...i,
-    [Ie(o)]: {
+    [ye(o)]: {
       action: L.MICRO_BEAT_DISPLAYED,
       category: x.BEAT_INTERACTION,
       label: le(o),
@@ -100,7 +100,7 @@ const oe = {
 ), it = () => Object.values(oe).reduce(
   (i, o) => ({
     ...i,
-    [ye(o)]: {
+    [ve(o)]: {
       action: L.MICRO_BEAT_DISPLAYED_FIRST_TIME,
       category: x.BEAT_INTERACTION,
       label: le(o),
@@ -123,7 +123,7 @@ const oe = {
   ON_CAROUSEL_FORWARD_SWIPE: "onCarouselForwardSwipe",
   ON_NO_RELEVANT_INSIGHTS_CLICKED: "onNoRelevantInsightsClicked",
   ON_VIEW_MORE_CLICKED: "onViewMoreClicked"
-}, ve = {
+}, Se = {
   ON_VIEW_MORE_VIEWED: "onViewMoreCardView"
 }, L = {
   CONTROL_BACKWARD: "Control Backward",
@@ -137,18 +137,18 @@ const oe = {
   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"
-}, ue = {
+}, he = {
   [H.MICRO_WIDGET_CAROUSEL]: {
     label: D.MICRO_WIDGET,
     name: H.MICRO_WIDGET_CAROUSEL,
-    path: he.INSIGHTS_MICRO_WIDGET,
+    path: Ee.INSIGHTS_MICRO_WIDGET,
     value: v
   },
   // zero state
   [H.MICRO_WIDGET_CAROUSEL_ZERO_STATE]: {
     label: D.MICRO_WIDGET,
     name: H.MICRO_WIDGET_CAROUSEL_ZERO_STATE,
-    path: he.INSIGHTS_MICRO_WIDGET,
+    path: Ee.INSIGHTS_MICRO_WIDGET,
     value: v
   },
   // no relevant cards
@@ -158,7 +158,7 @@ const oe = {
     path: "/micro-widget",
     value: v
   }
-}, pe = {
+}, ue = {
   // carousel control interaction events - clicks and swipes
   [S.ON_CAROUSEL_BACK_CLICK]: {
     action: L.CONTROL_BACKWARD,
@@ -191,7 +191,7 @@ const oe = {
     label: D.VIEW_MORE,
     value: v
   },
-  [ve.ON_VIEW_MORE_VIEWED]: {
+  [Se.ON_VIEW_MORE_VIEWED]: {
     action: L.MICRO_BEAT_DISPLAYED,
     category: x.BEAT_INTERACTION,
     label: D.VIEW_MORE,
@@ -200,28 +200,28 @@ const oe = {
   ...et(),
   ...tt(),
   ...it()
-}, _e = async (i, o) => !o || !pe[i] ? null : o.sendAnalyticEvent(pe[i]).then((t) => t).catch((t) => {
+}, pe = async (i, o) => !o || !ue[i] ? null : o.sendAnalyticEvent(ue[i]).then((t) => t).catch((t) => {
   throw t;
-}), fe = async (i, o) => !o || !ue[i] ? null : o.sendAnalyticsPageview(ue[i]).then((t) => t).catch((t) => {
+}), _e = async (i, o) => !o || !he[i] ? null : o.sendAnalyticsPageview(he[i]).then((t) => t).catch((t) => {
   throw t;
 });
 class ot {
-  onAnalyticEvent = _e;
-  onAnalyticPageView = fe;
-  beatApi = new de("/", "");
+  onAnalyticEvent = pe;
+  onAnalyticPageView = _e;
+  beatApi = new ce("/", "");
   constructor() {
     ie(this);
   }
   initialize = async (o, t, l) => {
     this.onAnalyticEvent = (n, r) => {
-      _e(n, r).then((a) => a).catch((a) => {
+      pe(n, r).then((a) => a).catch((a) => {
         throw a.status === 401 && l(), a;
       });
     }, this.onAnalyticPageView = (n, r) => {
-      fe(n, r).then((a) => a).catch((a) => {
+      _e(n, r).then((a) => a).catch((a) => {
         throw a.status === 401 && l(), a;
       });
-    }, this.beatApi = new de(o, t);
+    }, this.beatApi = new ce(o, t);
   };
   updateBeat = async (o) => {
     this.beatApi.updateBeat(o);
@@ -243,7 +243,7 @@ class lt {
   initialize = async (o, t, l) => {
     await this.copyStore.initialize(o, t), await this.insightsMicroWidgetStore.initialize(o, t, l);
     const n = await ze(o, t, "1.0.0", "Micro Insights Carousel");
-    Re(() => {
+    ge(() => {
       this.session = n, this.isInitialized = !0;
     });
   };
@@ -262,13 +262,13 @@ const U = u.createContext(null), nt = ({
   icon: a,
   isActiveCard: c,
   isZeroState: h,
-  onCardClick: f = () => {
+  onCardClick: C = () => {
   },
   showIcon: p,
   style: d = {},
   title: E,
   variant: s,
-  widthOverrides: C
+  widthOverrides: f
 }, _) {
   const R = te(), [O, I] = u.useState(!1), { cardStyle: m, linkTextStyle: T } = d, y = s ? m : { border: "none", boxShadow: "none", ...m }, M = /* @__PURE__ */ e(
     Be,
@@ -307,7 +307,7 @@ const U = u.createContext(null), nt = ({
       role: "group",
       sx: {
         height: "100%",
-        minWidth: C ? `${C}px` : "100%",
+        minWidth: f ? `${f}px` : "100%",
         fontFamily: R.typography.fontFamily
       },
       children: /* @__PURE__ */ e(
@@ -316,7 +316,7 @@ const U = u.createContext(null), nt = ({
           "aria-hidden": !c,
           "aria-label": t,
           id: "divButton",
-          onClick: () => f(),
+          onClick: () => C(),
           onKeyDown: () => I(!1),
           onKeyUp: () => I(!0),
           ref: _,
@@ -397,12 +397,12 @@ const U = u.createContext(null), nt = ({
     }
   );
 }), rt = ({ beat: i }) => {
-  const { primary_category_guid: o, category_guids: t } = i, l = o || t?.[0] || be.UNCATEGORIZED;
+  const { primary_category_guid: o, category_guids: t } = i, l = o || t?.[0] || Pe.UNCATEGORIZED;
   return /* @__PURE__ */ e(Ze, { categoryGuid: l, size: 16, sx: { minWidth: 16 } });
 }, at = ({ beat: i }) => {
   const { category_guids: o, merchant_guids: t, primary_category_guid: l, primary_merchant_guid: n } = i;
   return /* @__PURE__ */ e(
-    Pe,
+    be,
     {
       categoryGuid: l || o && o[0] || "",
       merchantGuid: n || t[0],
@@ -449,8 +449,8 @@ const U = u.createContext(null), nt = ({
   return !n.length || !r.length ? o.palette.primary.main : n[0].amount > r[0].amount ? o.palette.error.main : n[0].amount < r[0].amount ? o.palette.success.main : o.palette.primary.main;
 }, Et = ({ beat: i }) => {
   const o = te(), t = dt(i.data_series, o);
-  return /* @__PURE__ */ e(Ve, { sx: { color: t } });
-}, Se = () => /* @__PURE__ */ g("svg", { fill: "none", height: "36", viewBox: "0 0 40 36", width: "40", xmlns: "http://www.w3.org/2000/svg", children: [
+  return /* @__PURE__ */ e(Ne, { sx: { color: t } });
+}, Me = () => /* @__PURE__ */ g("svg", { fill: "none", height: "36", viewBox: "0 0 40 36", width: "40", xmlns: "http://www.w3.org/2000/svg", children: [
   /* @__PURE__ */ e(
     "path",
     {
@@ -1231,14 +1231,48 @@ const U = u.createContext(null), nt = ({
       }
     )
   ] })
-] }), ht = ({ beat: i }) => {
-  const { icon_type: o, icon_color: t } = i;
-  return o === 0 ? /* @__PURE__ */ e(ae, { filled: !0, sx: { color: (l) => t || l.palette.primary.main } }) : o === 1 ? /* @__PURE__ */ e(rt, { beat: i }) : o === 2 ? /* @__PURE__ */ e(at, { beat: i }) : o === 3 ? /* @__PURE__ */ e(Et, { beat: i }) : o === 5 ? /* @__PURE__ */ e(Ne, {}) : /* @__PURE__ */ e(
-    ae,
+] }), ht = {
+  0: (i) => /* @__PURE__ */ e(Ce, { filled: !0, sx: { color: i.icon_color || "primary.main" } }),
+  1: (i) => /* @__PURE__ */ e(rt, { beat: i }),
+  2: (i) => /* @__PURE__ */ e(at, { beat: i }),
+  3: (i) => /* @__PURE__ */ e(Et, { beat: i }),
+  // 4: (_, theme) => {
+  //   return (
+  //     <BeatMaterialIcon
+  //       bgColor={alpha(theme.palette.secondary.main, 0.15)}
+  //       iconColor="secondary"
+  //       name="info"
+  //     />
+  //   )
+  // },
+  5: () => /* @__PURE__ */ e(He, {})
+  // TODO: Waiting for the backend to accommodate icon types 6, 7, 8, and 9
+  // 6: (_, theme) => {
+  //   return (
+  //     <BeatMaterialIcon
+  //       bgColor={alpha(theme.palette.success.main, 0.15)}
+  //       iconColor="success"
+  //       name="check_circle"
+  //     />
+  //   )
+  // },
+  // 7: (_, theme) => (
+  //   <BeatMaterialIcon bgColor={alpha(theme.palette.primary.main, 0.15)} name="today" />
+  // ),
+  // 8: (_, theme) => (
+  //   <BeatMaterialIcon bgColor={alpha(theme.palette.primary.main, 0.15)} name="calendar_clock" />
+  // ),
+  // 9: (_, theme) => (
+  //   <BeatMaterialIcon bgColor={alpha(theme.palette.primary.main, 0.15)} name="celebration" />
+  // ),
+}, ut = ({ beat: i }) => {
+  const o = me(), { icon_type: t } = i, l = t != null ? ht[t] : null;
+  return l ? l(i, o) : /* @__PURE__ */ e(
+    Ce,
     {
       filled: !0,
       sx: {
-        color: (l) => l.palette.primary.main
+        color: "primary.main"
       }
     }
   );
@@ -1247,7 +1281,7 @@ const U = u.createContext(null), nt = ({
   if (!i)
     throw new Error("useCopyStore() must be used within the InsightsMicroWidgetDataProvider");
   return i.store.copyStore;
-}, ut = () => {
+}, pt = () => {
   const i = u.useContext(U);
   if (!i?.store?.insightsMicroWidgetStore)
     throw new Error(
@@ -1259,17 +1293,17 @@ const U = u.createContext(null), nt = ({
   if (!i)
     throw new Error("useEvent() must be used within the InsightsMicroWidgetDataProvider");
   return { onEvent: i.onEvent };
-}, Me = () => {
+}, Ae = () => {
   const i = u.useContext(U);
   if (!i)
     throw new Error("usePageview() must be used within the InsightsMicroWidgetDataProvider");
   return { onPageview: i.onPageview };
-}, pt = {
+}, _t = {
   LARGE: 180,
   STANDARD: 154,
   XLARGE: 200,
   XXLARGE: 248
-}, _t = 50, Ae = 1, ft = ({
+}, Ct = 50, Oe = 1, ft = ({
   ariaLabel: i,
   backgroundColor: o,
   beat: t,
@@ -1279,21 +1313,21 @@ const U = u.createContext(null), nt = ({
   isActiveCard: a,
   onCardClick: c,
   posthog: h,
-  showIcon: f,
+  showIcon: C,
   variant: p,
   widthOverrides: d
 }) => {
-  const { ref: E, inView: s } = me({
-    threshold: Ae
-  }), { cardsCopy: C } = V(), { onEvent: _ } = z(), { updateBeat: R, updateOffer: O } = ut();
+  const { ref: E, inView: s } = Re({
+    threshold: Oe
+  }), { cardsCopy: f } = V(), { onEvent: _ } = z(), { updateBeat: R, updateOffer: O } = pt();
   ee(() => {
-    s && (t.has_been_displayed ? _(Ie(t.template)) : (t.guid.startsWith("OFR") ? O({
+    s && (t.has_been_displayed ? _(ye(t.template)) : (t.guid.startsWith("OFR") ? O({
       ...t,
       has_been_displayed: !0
     }) : R({
       ...t,
       has_been_displayed: !0
-    }), _(ye(t.template))));
+    }), _(ve(t.template))));
   }, [s]), ee(() => {
     if (s && t)
       if (t.template === "MarketingOffer") {
@@ -1311,7 +1345,7 @@ const U = u.createContext(null), nt = ({
         });
   }, [t, r, s]);
   const I = () => {
-    if (c && c(t), _(ge(t.template)), t.template === "MarketingOffer") {
+    if (c && c(t), _(Ie(t.template)), t.template === "MarketingOffer") {
       const m = t;
       h?.capture("clicked_messaging_insight", {
         template: t.template,
@@ -1328,24 +1362,24 @@ const U = u.createContext(null), nt = ({
   return /* @__PURE__ */ e(
     j,
     {
-      actionText: t.micro_call_to_action || C.micro_card_cta,
+      actionText: t.micro_call_to_action || f.micro_card_cta,
       ariaLabel: i,
       backgroundColor: o,
       description: t?.html_micro_description && t?.html_micro_description.length > 0 ? t.html_micro_description : t.html_description,
       heightOverrides: n,
-      icon: /* @__PURE__ */ e(ht, { beat: t }),
+      icon: /* @__PURE__ */ e(ut, { beat: t }),
       isActiveCard: a,
       onCardClick: I,
       posthog: h,
       ref: E,
       showCTAColocatedWithText: l,
-      showIcon: f,
+      showIcon: C,
       title: t.micro_title && t.micro_title.length > 0 ? t.micro_title : t.title,
       variant: p,
       widthOverrides: d
     }
   );
-}, Ct = ({
+}, mt = ({
   currentBeatIndex: i,
   numBeats: o,
   onNextClick: t,
@@ -1355,7 +1389,7 @@ const U = u.createContext(null), nt = ({
   shouldApplyDotAnimation: a = !1,
   visibleCardsCount: c = 1
 }) => {
-  const h = Fe(), { carouselCopy: f } = V(), p = Math.floor(r) > n || i - c + 1 === 0, d = r < 0 || o - 1 === i, E = h.palette.grey[500], s = h.palette.primary.main;
+  const h = me(), { carouselCopy: C } = V(), p = Math.floor(r) > n || i - c + 1 === 0, d = r < 0 || o - 1 === i, E = h.palette.grey[500], s = h.palette.primary.main;
   return /* @__PURE__ */ g(
     k,
     {
@@ -1372,14 +1406,14 @@ const U = u.createContext(null), nt = ({
       },
       children: [
         /* @__PURE__ */ e(
-          se,
+          ae,
           {
             "aria-disabled": p,
-            "aria-label": f.previous_insight_cta_aria,
+            "aria-label": C.previous_insight_cta_aria,
             disabled: p,
             onClick: l,
             children: /* @__PURE__ */ e(
-              He,
+              ke,
               {
                 style: {
                   color: p ? E : s
@@ -1388,7 +1422,7 @@ const U = u.createContext(null), nt = ({
             )
           }
         ),
-        Array.from({ length: o }).map((C, _) => {
+        Array.from({ length: o }).map((f, _) => {
           const R = _ === i;
           return /* @__PURE__ */ e(
             Z,
@@ -1415,14 +1449,14 @@ const U = u.createContext(null), nt = ({
           );
         }),
         /* @__PURE__ */ e(
-          se,
+          ae,
           {
             "aria-disabled": d,
-            "aria-label": f.next_insight_cta_aria,
+            "aria-label": C.next_insight_cta_aria,
             disabled: d,
             onClick: t,
             children: /* @__PURE__ */ e(
-              Ce,
+              fe,
               {
                 style: {
                   color: d ? E : s
@@ -1434,7 +1468,7 @@ const U = u.createContext(null), nt = ({
       ]
     }
   );
-}, mt = ({
+}, Rt = ({
   activeCardIndex: i,
   beats: o,
   cardWidth: t,
@@ -1445,19 +1479,19 @@ const U = u.createContext(null), nt = ({
   showIcon: c,
   variant: h
 }) => {
-  const { carouselCopy: f } = V(), p = {
+  const { carouselCopy: C } = V(), p = {
     showCTAColocatedWithText: l,
     heightOverrides: n,
     posthog: a,
     showIcon: c,
     variant: h
   };
-  return /* @__PURE__ */ g(De, { children: [
+  return /* @__PURE__ */ g(xe, { children: [
     o.map((d, E) => {
-      const s = E + 1, C = o.length + 1, _ = Ge(
-        f.card_position_in_carousel_aria,
+      const s = E + 1, f = o.length + 1, _ = Ge(
+        C.card_position_in_carousel_aria,
         s.toString(),
-        C.toString()
+        f.toString()
       ), R = d.micro_title && d.micro_title.length > 0, O = d.micro_description && d.micro_description.length > 0, I = R ? d.micro_title : d.title, m = O ? d.micro_description : d.description;
       return /* @__PURE__ */ e(
         ft,
@@ -1474,7 +1508,7 @@ const U = u.createContext(null), nt = ({
       );
     }),
     /* @__PURE__ */ e(
-      Ot,
+      Tt,
       {
         isActiveCard: i === o.length,
         onCardClick: r,
@@ -1483,7 +1517,7 @@ const U = u.createContext(null), nt = ({
       }
     )
   ] });
-}, Rt = ({
+}, gt = ({
   analyticsMetadata: i,
   allowSingleCardPeeking: o = !1,
   beats: t = [],
@@ -1493,47 +1527,47 @@ const U = u.createContext(null), nt = ({
   posthog: a,
   showCarouselControls: c,
   showIcon: h,
-  showWithMargin: f = !0,
+  showWithMargin: C = !0,
   variant: p,
   widthOverrides: d,
   visibleCardsCount: E = 1
   // Default to 1 card visible
 }) => {
-  const s = u.useRef(null), C = u.useRef(null), [_, R] = u.useState(0), [O, I] = u.useState(null), [m, T] = u.useState(null), [y, M] = u.useState(null), { carouselCopy: W } = V(), { onEvent: F } = z();
+  const s = u.useRef(null), f = u.useRef(null), [_, R] = u.useState(0), [O, I] = u.useState(null), [m, T] = u.useState(null), [y, M] = u.useState(null), { carouselCopy: W } = V(), { onEvent: F } = z();
   u.useEffect(() => {
     if (s.current && !o) {
-      const A = s.current.offsetWidth, b = 8;
+      const A = s.current.offsetWidth, P = 8;
       let B;
       if (E > 1) {
-        const ne = (A - (E - 1) * b) / E / 3;
-        B = (A - ne - (E - 1) * b) / E;
+        const ne = (A - (E - 1) * P) / E / 3;
+        B = (A - ne - (E - 1) * P) / E;
       } else
         B = A;
       M(B);
     }
   }, [E, s.current?.offsetWidth]), u.useEffect(() => {
-    const A = C.current?.offsetWidth;
+    const A = f.current?.offsetWidth;
     if (typeof A == "number" && o) {
-      const b = (G) => {
+      const P = (G) => {
         const re = [
           { maxWidth: 375, cardWidth: 268 },
           { maxWidth: 444, cardWidth: 300 },
           { maxWidth: 599, cardWidth: 350 },
           { maxWidth: 749, cardWidth: 450 },
           { maxWidth: 900, cardWidth: 600 }
-        ].find((we) => G <= we.maxWidth);
+        ].find((De) => G <= De.maxWidth);
         return re ? re.cardWidth : 750;
       };
-      M(b(A));
+      M(P(A));
       const B = () => {
-        const G = C.current?.offsetWidth;
-        typeof G == "number" && M(b(G));
+        const G = f.current?.offsetWidth;
+        typeof G == "number" && M(P(G));
       };
       return window.addEventListener("resize", B), () => {
         window.removeEventListener("resize", B);
       };
     }
-  }, [o, C]);
+  }, [o, f]);
   const K = () => {
     F(S.ON_CAROUSEL_FORWARD_CLICK, i), s.current && y && s.current.scrollTo({
       left: _ + y + 8,
@@ -1550,18 +1584,18 @@ const U = u.createContext(null), nt = ({
     s.current && R(s.current.scrollLeft);
   }, Q = () => {
     if (!m || !O) return;
-    m - O > _t ? F(S.ON_CAROUSEL_FORWARD_SWIPE, i) : F(S.ON_CAROUSEL_BACK_SWIPE, i);
+    m - O > Ct ? F(S.ON_CAROUSEL_FORWARD_SWIPE, i) : F(S.ON_CAROUSEL_BACK_SWIPE, i);
   }, q = (A) => {
     I(A.targetTouches[0].clientX);
   }, Y = (A) => {
     I(null), T(A.targetTouches[0].clientX);
-  }, w = y ? Math.round(_ / (y + 8)) : 0, We = s.current ? s.current.scrollWidth - s.current.offsetWidth : 0;
+  }, w = y ? Math.round(_ / (y + 8)) : 0, we = s.current ? s.current.scrollWidth - s.current.offsetWidth : 0;
   return /* @__PURE__ */ g(
     k,
     {
       "aria-label": W.carousel_title,
       "aria-roledescription": "carousel",
-      ref: C,
+      ref: f,
       role: "group/region",
       sx: {
         alignItems: "center",
@@ -1585,7 +1619,7 @@ const U = u.createContext(null), nt = ({
               gap: 8,
               listStyleType: "none",
               m: 0,
-              maxWidth: f ? "calc(100% - 32px)" : "100%",
+              maxWidth: C ? "calc(100% - 32px)" : "100%",
               overflowX: "auto",
               overflowY: "hidden",
               p: 0,
@@ -1597,7 +1631,7 @@ const U = u.createContext(null), nt = ({
               }
             },
             children: /* @__PURE__ */ e(
-              mt,
+              Rt,
               {
                 activeCardIndex: w,
                 beats: t,
@@ -1613,13 +1647,13 @@ const U = u.createContext(null), nt = ({
           }
         ),
         c && /* @__PURE__ */ e(
-          Ct,
+          mt,
           {
             currentBeatIndex: w + E - 1,
             numBeats: t.length + 1,
             onNextClick: K,
             onPreviousClick: $,
-            scrollRightBoundary: We,
+            scrollRightBoundary: we,
             scrollX: _,
             shouldApplyDotAnimation: o,
             visibleCardsCount: E
@@ -1628,7 +1662,7 @@ const U = u.createContext(null), nt = ({
       ]
     }
   );
-}, gt = P(Rt), It = ({
+}, It = b(gt), yt = ({
   analyticsMetadata: i,
   onCardClick: o,
   posthog: t,
@@ -1650,7 +1684,7 @@ const U = u.createContext(null), nt = ({
       },
       children: [
         /* @__PURE__ */ e(
-          Le,
+          Ve,
           {
             sx: (c) => ({
               color: c.palette.primary.main,
@@ -1663,9 +1697,9 @@ const U = u.createContext(null), nt = ({
           }
         ),
         /* @__PURE__ */ e(
-          xe,
+          Le,
           {
-            endIcon: /* @__PURE__ */ e(Ce, { size: 20 }),
+            endIcon: /* @__PURE__ */ e(fe, { size: 20 }),
             onClick: a,
             size: "small",
             sx: (c) => ({
@@ -1677,8 +1711,8 @@ const U = u.createContext(null), nt = ({
         )
       ]
     }
-  ) : /* @__PURE__ */ e(ke, {});
-}, yt = P(It), vt = ({
+  ) : /* @__PURE__ */ e(Fe, {});
+}, vt = b(yt), St = ({
   heightOverrides: i,
   widthOverrides: o,
   children: t
@@ -1699,7 +1733,7 @@ const U = u.createContext(null), nt = ({
       children: t
     }
   );
-}, Oe = ({
+}, Te = ({
   ariaLabel: i,
   heightOverrides: o,
   onCardClick: t,
@@ -1707,11 +1741,11 @@ const U = u.createContext(null), nt = ({
   showIcon: n,
   variant: r
 }) => {
-  const { cardsCopy: a } = V(), { onEvent: c } = z(), { onPageview: h } = Me();
+  const { cardsCopy: a } = V(), { onEvent: c } = z(), { onPageview: h } = Ae();
   u.useEffect(() => {
     h(H.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS);
   }, []);
-  const f = () => {
+  const C = () => {
     t && t(), c(S.ON_NO_RELEVANT_INSIGHTS_CLICKED), l?.capture("clicked_insight", {
       template: "no_relevant_insights"
     });
@@ -1723,9 +1757,9 @@ const U = u.createContext(null), nt = ({
       ariaLabel: i,
       description: a.no_relevant_insights_card_description,
       heightOverrides: o,
-      icon: /* @__PURE__ */ e(Se, {}),
+      icon: /* @__PURE__ */ e(Me, {}),
       isZeroState: !0,
-      onCardClick: f,
+      onCardClick: C,
       posthog: l,
       showIcon: n,
       style: {
@@ -1737,7 +1771,7 @@ const U = u.createContext(null), nt = ({
       variant: r
     }
   );
-}, Jt = P(Oe), Te = ({
+}, ei = b(Te), We = ({
   ariaLabel: i,
   heightOverrides: o,
   onCardClick: t,
@@ -1745,7 +1779,7 @@ const U = u.createContext(null), nt = ({
   showIcon: n,
   variant: r
 }) => {
-  const { onPageview: a } = Me(), { zeroStateCopy: c } = V();
+  const { onPageview: a } = Ae(), { zeroStateCopy: c } = V();
   return u.useEffect(() => {
     a(H.MICRO_WIDGET_CAROUSEL_ZERO_STATE);
   }, []), /* @__PURE__ */ e(
@@ -1754,7 +1788,7 @@ const U = u.createContext(null), nt = ({
       ariaLabel: i,
       description: c.carousel_zero_state_description,
       heightOverrides: o,
-      icon: /* @__PURE__ */ e(Se, {}),
+      icon: /* @__PURE__ */ e(Me, {}),
       isZeroState: !0,
       onCardClick: t,
       posthog: l,
@@ -1763,7 +1797,7 @@ const U = u.createContext(null), nt = ({
       variant: r
     }
   );
-}, ei = P(Te), St = () => /* @__PURE__ */ e(
+}, ti = b(We), Mt = () => /* @__PURE__ */ e(
   Z,
   {
     sx: {
@@ -1775,7 +1809,7 @@ const U = u.createContext(null), nt = ({
     },
     children: /* @__PURE__ */ e(Ue, {})
   }
-), N = new lt(), Mt = ({
+), N = new lt(), At = ({
   allowSingleCardPeeking: i,
   areBeatsLoading: o,
   beats: t = [],
@@ -1788,13 +1822,13 @@ const U = u.createContext(null), nt = ({
   },
   onEvent: h = () => {
   },
-  onPageview: f = () => {
+  onPageview: C = () => {
   },
   posthog: p,
   showBorder: d = !0,
   showCarouselControls: E,
   showHeader: s,
-  showIcon: C,
+  showIcon: f,
   showWithMargin: _ = !0,
   token: R = "",
   userHasFullInsightFeedBeats: O,
@@ -1802,7 +1836,7 @@ const U = u.createContext(null), nt = ({
   visibleCardsCount: m = 1,
   widthOverrides: T
 }) => {
-  const [y, M] = J("STANDARD"), [W, F] = J(!1), [K, $] = J(!1), X = Ke([h], N), Q = $e([f], N);
+  const [y, M] = J("STANDARD"), [W, F] = J(!1), [K, $] = J(!1), X = Ke([h], N), Q = $e([C], N);
   Ye({
     widgetName: "InsightsMicroWidget",
     isLoaded: W
@@ -1819,7 +1853,7 @@ const U = u.createContext(null), nt = ({
     heightOverrides: r,
     onCardClick: c,
     posthog: p,
-    showIcon: C,
+    showIcon: f,
     showWithMargin: _,
     widthOverrides: T
   }, Y = {
@@ -1829,24 +1863,24 @@ const U = u.createContext(null), nt = ({
     heightOverrides: r,
     onCardClick: c,
     posthog: p,
-    showIcon: C
+    showIcon: f
   };
-  return /* @__PURE__ */ e(nt, { onEvent: X, onPageview: Q, store: N, children: /* @__PURE__ */ g(vt, { heightOverrides: r, widthOverrides: T, children: [
-    !W && /* @__PURE__ */ e(St, {}),
+  return /* @__PURE__ */ e(nt, { onEvent: X, onPageview: Q, store: N, children: /* @__PURE__ */ g(St, { heightOverrides: r, widthOverrides: T, children: [
+    !W && /* @__PURE__ */ e(Mt, {}),
     W && s && /* @__PURE__ */ e(
-      yt,
+      vt,
       {
-        analyticsMetadata: Ee,
+        analyticsMetadata: de,
         onCardClick: c,
         posthog: p,
         widthOverrides: T
       }
     ),
     W && !!t.length && /* @__PURE__ */ e(
-      gt,
+      It,
       {
         allowSingleCardPeeking: i,
-        analyticsMetadata: Ee,
+        analyticsMetadata: de,
         beats: t,
         showCarouselControls: E,
         variant: d ? I : void 0,
@@ -1866,16 +1900,16 @@ const U = u.createContext(null), nt = ({
           k,
           {
             sx: {
-              height: `calc(${pt[y]}px - 44px)`,
+              height: `calc(${_t[y]}px - 44px)`,
               width: _ ? `calc(${T}px - 32px)` : "100%"
             },
-            children: O ? /* @__PURE__ */ e(Oe, { ...Y }) : /* @__PURE__ */ e(Te, { ...Y })
+            children: O ? /* @__PURE__ */ e(Te, { ...Y }) : /* @__PURE__ */ e(We, { ...Y })
           }
         )
       }
     )
   ] }) });
-}, ti = P(Mt), At = ({
+}, ii = b(At), Ot = ({
   isActiveCard: i,
   ariaLabel: o,
   heightOverrides: t,
@@ -1885,11 +1919,11 @@ const U = u.createContext(null), nt = ({
   variant: a,
   widthOverrides: c
 }) => {
-  const h = te(), { ref: f, inView: p } = me({
-    threshold: Ae
+  const h = te(), { ref: C, inView: p } = Re({
+    threshold: Oe
   }), { cardsCopy: d } = V(), { onEvent: E } = z();
   ee(() => {
-    p && (E(ve.ON_VIEW_MORE_VIEWED), n?.capture("viewed_insight", {
+    p && (E(Se.ON_VIEW_MORE_VIEWED), n?.capture("viewed_insight", {
       template: "view_more_card"
     }));
   }, [p]);
@@ -1909,27 +1943,27 @@ const U = u.createContext(null), nt = ({
       isActiveCard: i,
       onCardClick: s,
       posthog: n,
-      ref: f,
+      ref: C,
       showIcon: r,
       title: d.view_more_card_title,
       variant: a,
       widthOverrides: c
     }
   );
-}, Ot = P(At);
+}, Tt = b(Ot);
 export {
   lt as A,
   j as B,
-  yt as C,
+  vt as C,
   nt as I,
-  gt as M,
-  Jt as N,
-  Ee as T,
-  Ot as V,
-  ei as Z,
+  It as M,
+  ei as N,
+  de as T,
+  Tt as V,
+  ti as Z,
   ft as a,
-  ti as b,
+  ii as b,
   st as c,
   Et as d,
-  Se as e
+  Me as e
 };

package/dist/microinsights/beaticons/BeatMaterialIcon.d.ts

@@ -0,0 +1,6 @@
+declare const BeatMaterialIcon: ({ bgColor, name, iconColor, }: {
+    bgColor?: string;
+    name: string;
+    iconColor?: "secondary" | "success" | "primary";
+}) => import("react/jsx-runtime").JSX.Element;
+export default BeatMaterialIcon;

package/dist/microinsights/beaticons/index.d.ts

@@ -1,4 +1,5 @@
 export { BeatCategoryIcon } from './BeatCategoryIcon';
+export { default as BeatMaterialIcon } from './BeatMaterialIcon';
 export { default as BeatMerchantLogo } from './BeatMerchantLogo';
 export { ChartFilledIcon } from './ChartFilledIcon';
 export { MonthlySpendComparisonIcon } from './MonthlySpendComparisonIcon';

package/dist/microinsights/index.es.js

@@ -1,4 +1,4 @@
-import { A as V, B as _, C as A, c as F, a as R, b as $, I as q, M as G, d as J, N as K, V as Q, Z as U, e as X } from "../ViewMoreMicroCard-DwR0v_ll.mjs";
+import { A as V, B as _, C as A, c as F, a as R, b as $, I as q, M as G, d as J, N as K, V as Q, Z as U, e as X } from "../ViewMoreMicroCard-rY-kN9MP.mjs";
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import g from "@mui/material/Avatar";
 import v from "@mui/material/Box";

package/dist/trends/index.es.js

@@ -29,7 +29,7 @@ import { c as Et, i as Dt, d as Mt, e as At, b as tt, g as ot, f as Pe } from ".
 import Rt from "@mui/material/ToggleButton";
 import kt from "@mui/material/ToggleButtonGroup";
 import { DataGridPro as Ht } from "@mui/x-data-grid-pro";
-import { T as V, b as Nt } from "../ViewMoreMicroCard-DwR0v_ll.mjs";
+import { T as V, b as Nt } from "../ViewMoreMicroCard-rY-kN9MP.mjs";
 import { parseISO as nt } from "date-fns/parseISO";
 import { H as Re } from "../HeaderCell-DjuifqHJ.mjs";
 import { A as x, W as st } from "../WidgetContainer-COyiIVSd.mjs";

package/package.json

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