@mx-cartographer/experiences 7.1.5 → 7.2.0

package/dist/{ViewMoreMicroCard-664i7l19.mjs → ViewMoreMicroCard-C5yQiaed.mjs}

@@ -1,33 +1,33 @@
-import { jsx as e, jsxs as I } from "react/jsx-runtime";
-import E, { useState as ee, useEffect as ie } from "react";
+import { jsx as e, jsxs as v } from "react/jsx-runtime";
+import u, { useState as te, useEffect as oe } from "react";
 import { observer as G } from "mobx-react-lite";
-import Ze from "@mui/material/Button";
-import z from "@mui/material/Stack";
-import Pe from "@mui/material/Typography";
-import { ChevronLeft as Ge, ChevronRight as ve } from "@mxenabled/mx-icons";
-import { L as Ue } from "./Loader-DUaFpDGv.mjs";
-import U from "@mui/material/Box";
-import ue from "@mui/material/IconButton";
-import { useTheme as be } from "@mui/material/styles";
-import { useInView as Se } from "react-intersection-observer";
-import { P as ze, CategoryIcon as Ke, useTokens as Me, MerchantLogo as $e, Icon as te } from "@mxenabled/mxui";
-import ce from "@mui/material/styles/useTheme";
-import { b as Ye } from "./Category-CevNQ03n.mjs";
-import { css as je } from "@mxenabled/cssinjs";
-import { b as Xe } from "./Localization-2MODESHW.mjs";
-import Qe from "@mui/material/CircularProgress";
-import { makeAutoObservable as de, runInAction as Ae } from "mobx";
-import { G as pe, a as qe, u as Je, b as et } from "./useCombineEvents-BUDIR1ba.mjs";
-import { B as _e } from "./BeatApi-DhJpgCLz.mjs";
-import tt from "@mui/material/Card";
-import it from "@mui/material/CardActions";
-import ot from "@mui/material/CardContent";
+import Pe from "@mui/material/Button";
+import K from "@mui/material/Stack";
+import Ge from "@mui/material/Typography";
+import { ChevronLeft as Ue, ChevronRight as Se } from "@mxenabled/mx-icons";
+import { L as be } from "./Loader-DUaFpDGv.mjs";
+import b from "@mui/material/Box";
+import pe from "@mui/material/IconButton";
+import { useTheme as ze } from "@mui/material/styles";
+import { useInView as Me } from "react-intersection-observer";
+import { P as Ke, CategoryIcon as $e, useTokens as Ae, MerchantLogo as Ye, Icon as ie } from "@mxenabled/mxui";
+import se from "@mui/material/styles/useTheme";
+import { b as je } from "./Category-CevNQ03n.mjs";
+import { css as Xe } from "@mxenabled/cssinjs";
+import { b as Qe } from "./Localization-2MODESHW.mjs";
+import qe from "@mui/material/CircularProgress";
+import { makeAutoObservable as de, runInAction as Oe } from "mobx";
+import { G as _e, a as Je, u as et, b as tt } from "./useCombineEvents-BUDIR1ba.mjs";
+import { B as Ce } from "./BeatApi-DhJpgCLz.mjs";
+import it from "@mui/material/Card";
+import ot from "@mui/material/CardActions";
+import rt from "@mui/material/CardContent";
 import lt from "@mui/material/CardHeader";
-const Ce = {
+const fe = {
   featureVersion: "spendVsIncomeTrends"
 };
-class rt {
-  copyApi = new pe("/", "");
+class nt {
+  copyApi = new _e("/", "");
   copyObject = {};
   namespace = "experiences";
   translationKey = "micro_insights";
@@ -38,11 +38,11 @@ class rt {
   // DEPRECATED: Initialize api in constructor and use loadCopy instead
   // TODO: Remove this function
   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);
-    Ae(() => {
+    Oe(() => {
       this.copyObject = o[this.translationKey];
     });
   };
@@ -56,7 +56,7 @@ class rt {
     return this.copyObject.zero_state;
   }
 }
-const se = {
+const he = {
   BillAmountNotStandard: "BillAmountNotStandard",
   CanadianUpcomingDeadlineAlert: "CanadianUpcomingDeadlineAlert",
   DuplicatePaymentV2: "DuplicatePaymentV2",
@@ -73,38 +73,38 @@ const se = {
   WeeklyNewMerchantsV2: "WeeklyNewMerchantsV2",
   MonthlySpendComparison: "MonthlySpendComparison",
   MonthlySpendToIncomeComparison: "MonthlySpendToIncomeComparison"
-}, y = window?.app?.clientConfig?.microwidget_instance_id || "", fe = {
+}, S = window?.app?.clientConfig?.microwidget_instance_id || "", me = {
   INSIGHTS_MICRO_WIDGET: "/micro-insights-carousel"
-}, Oe = (i) => `on${i}Click`, Te = (i) => `on${i}View`, We = (i) => `on${i}ViewFirstTime`, he = (i) => i.replace(/([a-z])([A-Z])/g, "$1 $2"), nt = () => Object.values(se).reduce(
+}, Te = (i) => `on${i}Click`, We = (i) => `on${i}View`, we = (i) => `on${i}ViewFirstTime`, Ee = (i) => i.replace(/([a-z])([A-Z])/g, "$1 $2"), at = () => Object.values(he).reduce(
   (i, o) => ({
     ...i,
-    [Oe(o)]: {
+    [Te(o)]: {
       action: w.MICRO_BEAT_CLICKED,
       category: W.BEAT_INTERACTION,
-      label: he(o),
-      value: y
+      label: Ee(o),
+      value: S
     }
   }),
   {}
-), at = () => Object.values(se).reduce(
+), ct = () => Object.values(he).reduce(
   (i, o) => ({
     ...i,
-    [Te(o)]: {
+    [We(o)]: {
       action: w.MICRO_BEAT_DISPLAYED,
       category: W.BEAT_INTERACTION,
-      label: he(o),
-      value: y
+      label: Ee(o),
+      value: S
     }
   }),
   {}
-), ct = () => Object.values(se).reduce(
+), st = () => Object.values(he).reduce(
   (i, o) => ({
     ...i,
-    [We(o)]: {
+    [we(o)]: {
       action: w.MICRO_BEAT_DISPLAYED_FIRST_TIME,
       category: W.BEAT_INTERACTION,
-      label: he(o),
-      value: y
+      label: Ee(o),
+      value: S
     }
   }),
   {}
@@ -116,14 +116,14 @@ const se = {
 }, W = {
   MICRO_WIDGET_INTERACTION: "Micro Widget Interaction",
   BEAT_INTERACTION: "Beat Interaction"
-}, v = {
+}, M = {
   ON_CAROUSEL_BACK_CLICK: "onCarouselBackClick",
   ON_CAROUSEL_BACK_SWIPE: "onCarouselBackSwipe",
   ON_CAROUSEL_FORWARD_CLICK: "onCarouselForwardClick",
   ON_CAROUSEL_FORWARD_SWIPE: "onCarouselForwardSwipe",
   ON_NO_RELEVANT_INSIGHTS_CLICKED: "onNoRelevantInsightsClicked",
   ON_VIEW_MORE_CLICKED: "onViewMoreClicked"
-}, we = {
+}, De = {
   ON_VIEW_MORE_VIEWED: "onViewMoreCardView"
 }, w = {
   CONTROL_BACKWARD: "Control Backward",
@@ -133,95 +133,95 @@ const se = {
   MICRO_BEAT_DISPLAYED_FIRST_TIME: "Micro Beat Displayed For First Time",
   SWIPE_BACKWARD: "Swipe Backward",
   SWIPE_FORWARD: "Swipe Forward"
-}, k = {
+}, 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 = {
-  [k.MICRO_WIDGET_CAROUSEL]: {
+}, Re = {
+  [H.MICRO_WIDGET_CAROUSEL]: {
     label: T.MICRO_WIDGET,
-    name: k.MICRO_WIDGET_CAROUSEL,
-    path: fe.INSIGHTS_MICRO_WIDGET,
-    value: y
+    name: H.MICRO_WIDGET_CAROUSEL,
+    path: me.INSIGHTS_MICRO_WIDGET,
+    value: S
   },
   // zero state
-  [k.MICRO_WIDGET_CAROUSEL_ZERO_STATE]: {
+  [H.MICRO_WIDGET_CAROUSEL_ZERO_STATE]: {
     label: T.MICRO_WIDGET,
-    name: k.MICRO_WIDGET_CAROUSEL_ZERO_STATE,
-    path: fe.INSIGHTS_MICRO_WIDGET,
-    value: y
+    name: H.MICRO_WIDGET_CAROUSEL_ZERO_STATE,
+    path: me.INSIGHTS_MICRO_WIDGET,
+    value: S
   },
   // no relevant cards
-  [k.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS]: {
+  [H.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS]: {
     label: T.MICRO_WIDGET,
-    name: k.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS,
+    name: H.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS,
     path: "/micro-widget",
-    value: y
+    value: S
   }
-}, Re = {
+}, ge = {
   // carousel control interaction events - clicks and swipes
-  [v.ON_CAROUSEL_BACK_CLICK]: {
+  [M.ON_CAROUSEL_BACK_CLICK]: {
     action: w.CONTROL_BACKWARD,
     category: W.MICRO_WIDGET_INTERACTION,
     label: T.CAROUSEL_CONTROL,
-    value: y
+    value: S
   },
-  [v.ON_CAROUSEL_FORWARD_CLICK]: {
+  [M.ON_CAROUSEL_FORWARD_CLICK]: {
     action: w.CONTROL_FORWARD,
     category: W.MICRO_WIDGET_INTERACTION,
     label: T.CAROUSEL_CONTROL,
-    value: y
+    value: S
   },
-  [v.ON_CAROUSEL_BACK_SWIPE]: {
+  [M.ON_CAROUSEL_BACK_SWIPE]: {
     action: w.SWIPE_BACKWARD,
     category: W.MICRO_WIDGET_INTERACTION,
     label: T.CAROUSEL_CONTROL,
-    value: y
+    value: S
   },
-  [v.ON_CAROUSEL_FORWARD_SWIPE]: {
+  [M.ON_CAROUSEL_FORWARD_SWIPE]: {
     action: w.SWIPE_FORWARD,
     category: W.MICRO_WIDGET_INTERACTION,
     label: T.CAROUSEL_CONTROL,
-    value: y
+    value: S
   },
   // read more card events
-  [v.ON_VIEW_MORE_CLICKED]: {
+  [M.ON_VIEW_MORE_CLICKED]: {
     action: w.MICRO_BEAT_CLICKED,
     category: W.BEAT_INTERACTION,
     label: T.VIEW_MORE,
-    value: y
+    value: S
   },
-  [we.ON_VIEW_MORE_VIEWED]: {
+  [De.ON_VIEW_MORE_VIEWED]: {
     action: w.MICRO_BEAT_DISPLAYED,
     category: W.BEAT_INTERACTION,
     label: T.VIEW_MORE,
-    value: y
+    value: S
   },
-  ...nt(),
   ...at(),
-  ...ct()
-}, ge = async (i, o) => !o || !Re[i] ? null : o.sendAnalyticEvent(Re[i]).then((t) => t).catch((t) => {
+  ...ct(),
+  ...st()
+}, 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 dt {
-  onAnalyticEvent = ge;
-  onAnalyticPageView = Ie;
-  beatApi = new _e("/", "");
+  onAnalyticEvent = Ie;
+  onAnalyticPageView = ye;
+  beatApi = new Ce("/", "");
   constructor() {
     de(this);
   }
   initialize = async (o, t, r) => {
-    this.onAnalyticEvent = (l, n) => {
-      ge(l, n).then((a) => a).catch((a) => {
+    this.onAnalyticEvent = (n, l) => {
+      Ie(n, l).then((a) => a).catch((a) => {
         throw a.status === 401 && r(), a;
       });
-    }, this.onAnalyticPageView = (l, n) => {
-      Ie(l, n).then((a) => a).catch((a) => {
+    }, this.onAnalyticPageView = (n, l) => {
+      ye(n, l).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);
@@ -230,7 +230,7 @@ class dt {
     this.beatApi.updateOffer(o);
   };
 }
-class st {
+class ht {
   copyStore;
   endpoint = "/";
   insightsMicroWidgetStore;
@@ -238,42 +238,42 @@ class st {
   token = "";
   isInitialized = !1;
   constructor() {
-    this.copyStore = new rt(), this.insightsMicroWidgetStore = new dt(), de(this);
+    this.copyStore = new nt(), this.insightsMicroWidgetStore = new dt(), de(this);
   }
   initialize = async (o, t, r) => {
     await this.copyStore.initialize(o, t), await this.insightsMicroWidgetStore.initialize(o, t, r);
-    const l = await qe(o, t, "1.0.0", "Micro Insights Carousel");
-    Ae(() => {
-      this.session = l, this.isInitialized = !0;
+    const n = await Je(o, t, "1.0.0", "Micro Insights Carousel");
+    Oe(() => {
+      this.session = n, this.isInitialized = !0;
     });
   };
 }
-const K = E.createContext(null), ht = ({
+const $ = u.createContext(null), Et = ({
   onEvent: i,
   onPageview: o,
   store: t,
   children: r
-}) => /* @__PURE__ */ e(K.Provider, { value: { onEvent: i, onPageview: o, store: t, children: r }, children: r }), oe = E.forwardRef(
+}) => /* @__PURE__ */ e($.Provider, { value: { onEvent: i, onPageview: o, store: t, children: r }, children: r }), re = u.forwardRef(
   function({
     actionText: o,
     ariaLabel: t,
     backgroundColor: r,
-    description: l,
-    heightOverrides: n,
+    description: n,
+    heightOverrides: l,
     icon: a,
-    isActiveCard: _,
-    isZeroState: c,
-    onCardClick: C = () => {
+    isActiveCard: d,
+    isZeroState: p,
+    onCardClick: _ = () => {
     },
-    showIcon: u,
+    showIcon: C,
     style: f = {},
     fontColors: h = {},
-    title: p,
-    variant: d,
-    widthOverrides: m
-  }, S) {
-    const A = ce(), [D, R] = E.useState(!1), { cardStyle: x, linkTextStyle: b } = f, g = d ? x : { border: "none", boxShadow: "none", ...x }, L = /* @__PURE__ */ e(
-      ze,
+    title: m,
+    variant: c,
+    widthOverrides: E
+  }, R) {
+    const I = se(), [D, O] = u.useState(!1), { cardStyle: y, linkTextStyle: F } = f, z = c ? y : { border: "none", boxShadow: "none", ...y }, g = /* @__PURE__ */ e(
+      Ke,
       {
         className: "mx-micro-card-description",
         color: h.textColor ? "undefined" : "text.primary",
@@ -283,54 +283,54 @@ const K = E.createContext(null), ht = ({
           letterSpacing: 0.48,
           lineHeight: "20px",
           overflow: "hidden",
-          pl: c ? 0 : 28,
-          pr: c ? 0 : 8,
+          pl: p ? 0 : 28,
+          pr: p ? 0 : 8,
           WebkitBoxOrient: "vertical",
           WebkitLineClamp: 2,
           wordWrap: "break-word"
         },
-        children: l && /* @__PURE__ */ e(
+        children: n && /* @__PURE__ */ e(
           "span",
           {
-            dangerouslySetInnerHTML: { __html: l },
-            style: { fontFamily: A.typography.fontFamily }
+            dangerouslySetInnerHTML: { __html: n },
+            style: { fontFamily: I.typography.fontFamily }
           }
         )
       }
     );
     return /* @__PURE__ */ e(
-      U,
+      b,
       {
-        "aria-hidden": !_,
+        "aria-hidden": !d,
         "aria-label": t,
         "aria-labelledby": "divButton",
         "aria-roledescription": "slide",
-        ref: S,
+        ref: R,
         role: "group",
         sx: {
           height: "100%",
-          minWidth: m ? `${m}px` : "100%",
-          fontFamily: A.typography.fontFamily
+          minWidth: E ? `${E}px` : "100%",
+          fontFamily: I.typography.fontFamily
         },
         children: /* @__PURE__ */ e(
-          U,
+          b,
           {
-            "aria-hidden": !_,
+            "aria-hidden": !d,
             "aria-label": t,
             id: "divButton",
-            onClick: () => C(),
-            onKeyDown: () => R(!1),
-            onKeyUp: () => R(!0),
-            ref: S,
+            onClick: () => _(),
+            onKeyDown: () => O(!1),
+            onKeyUp: () => O(!0),
+            ref: R,
             role: "button",
             sx: {
               border: D ? "1px solid rgba(82, 138, 224, 0.8)" : void 0,
               borderRadius: "8px",
               height: "100%"
             },
-            tabIndex: _ ? 0 : -1,
+            tabIndex: d ? 0 : -1,
             children: /* @__PURE__ */ e(
-              tt,
+              it,
               {
                 "aria-roledescription": "slide",
                 className: "mx-micro-card",
@@ -338,17 +338,17 @@ const K = E.createContext(null), ht = ({
                 sx: {
                   backgroundColor: r,
                   cursor: "pointer",
-                  height: n ? "100%" : 124,
+                  height: l ? "100%" : 124,
                   p: 16,
-                  ...g,
+                  ...z,
                   "& .MuiCardHeader-avatar": {
                     color: h.iconColor,
                     mr: "8px"
                   }
                 },
-                variant: d,
-                children: /* @__PURE__ */ I(
-                  z,
+                variant: c,
+                children: /* @__PURE__ */ v(
+                  K,
                   {
                     sx: {
                       alignItems: "space-between",
@@ -358,31 +358,31 @@ const K = E.createContext(null), ht = ({
                       /* @__PURE__ */ e(
                         lt,
                         {
-                          avatar: u && a,
-                          subheader: c && L,
+                          avatar: C && a,
+                          subheader: p && g,
                           sx: { color: h.headerColor, p: 0 },
-                          title: p,
+                          title: m,
                           titleTypographyProps: { fontSize: 15, fontWeight: 600, variant: "h3" }
                         }
                       ),
-                      /* @__PURE__ */ e(ot, { sx: { p: 0 }, children: !c && L }),
+                      /* @__PURE__ */ e(rt, { sx: { p: 0 }, children: !p && g }),
                       !!o && /* @__PURE__ */ e(
-                        it,
+                        ot,
                         {
                           sx: {
                             mt: "auto",
                             p: 0
                           },
                           children: /* @__PURE__ */ e(
-                            U,
+                            b,
                             {
-                              sx: (O) => ({
-                                color: h.buttonColor ? h.buttonColor : O.palette.primary.main,
+                              sx: (x) => ({
+                                color: h.buttonColor ? h.buttonColor : x.palette.primary.main,
                                 fontSize: 14,
                                 fontWeight: "bold",
                                 px: 28,
-                                fontFamily: O.typography.fontFamily,
-                                ...b
+                                fontFamily: x.typography.fontFamily,
+                                ...F
                               }),
                               children: o
                             }
@@ -399,15 +399,15 @@ const K = E.createContext(null), ht = ({
       }
     );
   }
-), Et = ({ beat: i }) => {
-  const [o, t] = ee(Ye.UNCATEGORIZED);
-  return ie(() => {
+), ut = ({ beat: i }) => {
+  const [o, t] = te(je.UNCATEGORIZED);
+  return oe(() => {
     i.primary_category_guid ? t(i.primary_category_guid) : i.category_guids?.length && t(i.category_guids[0]);
-  }, []), /* @__PURE__ */ e(Ke, { categoryGuid: o, size: 16, sx: { minWidth: 16 } });
-}, ut = ({ beat: i }) => {
-  const o = Me(), t = pt(o);
+  }, []), /* @__PURE__ */ e($e, { categoryGuid: o, size: 16, sx: { minWidth: 16 } });
+}, pt = ({ beat: i }) => {
+  const o = Ae(), t = _t(o);
   return /* @__PURE__ */ e(
-    $e,
+    Ye,
     {
       categoryGuid: i.primary_category_guid || i.category_guids && i.category_guids[0] || "",
       className: t,
@@ -415,18 +415,18 @@ const K = E.createContext(null), ht = ({
       size: 16
     }
   );
-}, pt = (i) => je({
+}, _t = (i) => Xe({
   marginTop: i.Spacing.XTiny,
   "& .kyper-categoryicon": {
     display: "flex"
   }
-}), _t = G(ut), Ct = ({
+}), Ct = G(pt), ft = ({
   color: i = "currentColor",
   height: o,
   size: t = 16,
   styles: r,
-  viewBox: l = "0 0 16 16",
-  width: n
+  viewBox: n = "0 0 16 16",
+  width: l
 }) => /* @__PURE__ */ e(
   "svg",
   {
@@ -435,8 +435,8 @@ const K = E.createContext(null), ht = ({
     focusable: !1,
     height: o || t,
     style: r,
-    viewBox: l,
-    width: n || t,
+    viewBox: n,
+    width: l || t,
     xmlns: "http://www.w3.org/2000/svg",
     children: /* @__PURE__ */ e(
       "path",
@@ -446,18 +446,18 @@ const K = E.createContext(null), ht = ({
       }
     )
   }
-), ft = (i) => i ? i.data ? i.data.map((o) => {
+), mt = (i) => i ? i.data ? i.data.map((o) => {
   const t = {};
-  return i.names?.map((r, l) => {
-    t[r] = o[l];
+  return i.names?.map((r, n) => {
+    t[r] = o[n];
   }), t;
-}) : [] : [], mt = (i, o) => {
-  const t = ft(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;
-}, Rt = ({ beat: i }) => {
-  const o = Me(), t = mt(i.data_series, o);
-  return /* @__PURE__ */ e(te, { name: "bar_chart", sx: { color: t } });
-}, De = () => /* @__PURE__ */ I("svg", { fill: "none", height: "36", viewBox: "0 0 40 36", width: "40", xmlns: "http://www.w3.org/2000/svg", children: [
+}) : [] : [], Rt = (i, o) => {
+  const t = mt(i), r = t.length / 2, n = t.slice(0, r), l = t.slice(r);
+  return !n.length || !l.length ? o.Color.Primary300 : n[0].amount > l[0].amount ? o.Color.Error300 : n[0].amount < l[0].amount ? o.Color.Success300 : o.Color.Primary300;
+}, gt = ({ beat: i }) => {
+  const o = Ae(), t = Rt(i.data_series, o);
+  return /* @__PURE__ */ e(ie, { name: "bar_chart", sx: { color: t } });
+}, xe = () => /* @__PURE__ */ v("svg", { fill: "none", height: "36", viewBox: "0 0 40 36", width: "40", xmlns: "http://www.w3.org/2000/svg", children: [
   /* @__PURE__ */ e(
     "path",
     {
@@ -701,7 +701,7 @@ const K = E.createContext(null), ht = ({
       fillRule: "evenodd"
     }
   ),
-  /* @__PURE__ */ I("g", { filter: "url(#filter0_d_1565_98011)", children: [
+  /* @__PURE__ */ v("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",
       {
@@ -957,10 +957,10 @@ const K = E.createContext(null), ht = ({
     ),
     /* @__PURE__ */ e("path", { d: "M17.9668 31.5737H19.4947", stroke: "#E4E8EE", strokeWidth: "0.264005" })
   ] }),
-  /* @__PURE__ */ I("g", { filter: "url(#filter1_d_1565_98011)", children: [
+  /* @__PURE__ */ v("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__ */ I("g", { mask: "url(#mask2_1565_98011)", children: [
+    /* @__PURE__ */ v("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" }),
@@ -1150,8 +1150,8 @@ const K = E.createContext(null), ht = ({
       fill: "#CDD3DD"
     }
   ),
-  /* @__PURE__ */ I("defs", { children: [
-    /* @__PURE__ */ I(
+  /* @__PURE__ */ v("defs", { children: [
+    /* @__PURE__ */ v(
       "filter",
       {
         colorInterpolationFilters: "sRGB",
@@ -1194,7 +1194,7 @@ const K = E.createContext(null), ht = ({
         ]
       }
     ),
-    /* @__PURE__ */ I(
+    /* @__PURE__ */ v(
       "filter",
       {
         colorInterpolationFilters: "sRGB",
@@ -1238,10 +1238,10 @@ const K = E.createContext(null), ht = ({
       }
     )
   ] })
-] }), ye = ({ beat: i, color: o, type: t }) => {
-  const r = ce(), l = o || r.palette.primary.main;
-  return t === 0 ? /* @__PURE__ */ e(te, { fill: !0, name: "error", sx: { color: o || l } }) : t === 1 && i ? /* @__PURE__ */ e(Et, { beat: i }) : t === 2 && i ? /* @__PURE__ */ e(_t, { beat: i }) : t === 3 && i ? /* @__PURE__ */ e(Rt, { beat: i }) : t === 5 && i ? /* @__PURE__ */ e(te, { name: "campaign" }) : /* @__PURE__ */ e(
-    te,
+] }), ve = ({ beat: i, clientColorScheme: o, color: t, type: r }) => {
+  const n = se(), l = o?.primary_300 ? o.primary_300 : n.palette.primary.main;
+  return r === 0 ? /* @__PURE__ */ e(ie, { fill: !0, name: "error", sx: { color: t || l } }) : r === 1 && i ? /* @__PURE__ */ e(ut, { beat: i }) : r === 2 && i ? /* @__PURE__ */ e(Ct, { beat: i }) : r === 3 && i ? /* @__PURE__ */ e(gt, { beat: i }) : r === 5 && i ? /* @__PURE__ */ e(ie, { name: "campaign" }) : /* @__PURE__ */ e(
+    ie,
     {
       fill: !0,
       name: "info",
@@ -1250,122 +1250,133 @@ const K = E.createContext(null), ht = ({
       }
     }
   );
-}, F = () => {
-  const i = E.useContext(K);
+}, k = () => {
+  const i = u.useContext($);
   if (!i)
     throw new Error("useCopyStore() must be used within the InsightsMicroWidgetDataProvider");
   return i.store.copyStore;
-}, gt = () => {
-  const i = E.useContext(K);
+}, It = () => {
+  const i = u.useContext($);
   if (!i?.store?.insightsMicroWidgetStore)
     throw new Error(
       "useInsightsMicroWidgetStore() must be used within the InsightsMicroWidgetDataProvider"
     );
   return i.store.insightsMicroWidgetStore;
-}, $ = () => {
-  const i = E.useContext(K);
+}, Y = () => {
+  const i = u.useContext($);
   if (!i)
     throw new Error("useEvent() must be used within the InsightsMicroWidgetDataProvider");
   return { onEvent: i.onEvent };
-}, xe = () => {
-  const i = E.useContext(K);
+}, Le = () => {
+  const i = u.useContext($);
   if (!i)
     throw new Error("usePageview() must be used within the InsightsMicroWidgetDataProvider");
   return { onPageview: i.onPageview };
-}, Le = {
+}, Ne = {
   LARGE: 180,
   STANDARD: 154,
   XLARGE: 200,
   XXLARGE: 248
-}, It = 50, Ve = 1, yt = ({
+}, yt = 50, Ve = 1, vt = ({
   ariaLabel: i,
   backgroundColor: o,
   beat: t,
-  showCTAColocatedWithText: r = !0,
+  clientColorScheme: r,
+  showCTAColocatedWithText: n = !0,
   heightOverrides: l,
-  index: n,
-  isActiveCard: a,
-  onCardClick: _,
-  posthog: c,
+  index: a,
+  isActiveCard: d,
+  onCardClick: p,
+  posthog: _,
   showIcon: C,
-  variant: u,
-  widthOverrides: f
+  variant: f,
+  widthOverrides: h
 }) => {
-  const { ref: h, inView: p } = Se({
+  const { ref: m, inView: c } = Me({
     threshold: Ve
-  }), { cardsCopy: d } = F(), { onEvent: m } = $(), { updateBeat: S, updateOffer: A } = gt();
-  ie(() => {
-    p && (t.has_been_displayed ? m(Te(t.template)) : (t.guid.startsWith("OFR") ? A({
+  }), { cardsCopy: E } = k(), { onEvent: R } = Y(), { updateBeat: I, updateOffer: D } = It();
+  oe(() => {
+    c && (t.has_been_displayed ? R(We(t.template)) : (t.guid.startsWith("OFR") ? D({
       ...t,
       has_been_displayed: !0
-    }) : S({
+    }) : I({
       ...t,
       has_been_displayed: !0
-    }), m(We(t.template))));
-  }, [p]), ie(() => {
-    if (p && t)
+    }), R(we(t.template))));
+  }, [c]), oe(() => {
+    if (c && t)
       if (t.template === "MarketingOffer") {
-        const R = t;
-        c?.capture("viewed_messaging_insight", {
+        const y = t;
+        _?.capture("viewed_messaging_insight", {
           template: t.template,
-          campaign_guid: R.campaign_guid,
-          campaign_name: R.pulse_campaign_name
+          campaign_guid: y.campaign_guid,
+          campaign_name: y.pulse_campaign_name
         });
       } else
-        c?.capture("viewed_insight", {
+        _?.capture("viewed_insight", {
           beat_guid: t.guid,
           template: t.template,
-          position: n
+          position: a
         });
-  }, [t, n, p]);
-  const D = () => {
-    if (_ && _(t), m(Oe(t.template)), t.template === "MarketingOffer") {
-      const R = t;
-      c?.capture("clicked_messaging_insight", {
+  }, [t, a, c]);
+  const O = () => {
+    if (p && p(t), R(Te(t.template)), t.template === "MarketingOffer") {
+      const y = t;
+      _?.capture("clicked_messaging_insight", {
         template: t.template,
-        campaign_guid: R.campaign_guid,
-        campaign_name: R.pulse_campaign_name
+        campaign_guid: y.campaign_guid,
+        campaign_name: y.pulse_campaign_name
       });
     } else
-      c?.capture("clicked_insight", {
+      _?.capture("clicked_insight", {
         beat_guid: t.guid,
         template: t.template,
-        position: n
+        position: a
       });
   };
   return /* @__PURE__ */ e(
-    oe,
+    re,
     {
-      actionText: t.micro_call_to_action || d.micro_card_cta,
+      actionText: t.micro_call_to_action || E.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,
+      fontColors: { buttonColor: r?.primary_300 },
       heightOverrides: l,
-      icon: ye && /* @__PURE__ */ e(ye, { beat: t, color: t?.icon_color, type: t?.icon_type }),
-      isActiveCard: a,
-      onCardClick: D,
-      posthog: c,
-      ref: h,
-      showCTAColocatedWithText: r,
+      icon: ve && /* @__PURE__ */ e(
+        ve,
+        {
+          beat: t,
+          clientColorScheme: r,
+          color: t?.icon_color,
+          type: t?.icon_type
+        }
+      ),
+      isActiveCard: d,
+      onCardClick: O,
+      posthog: _,
+      ref: m,
+      showCTAColocatedWithText: n,
       showIcon: C,
       title: t.micro_title && t.micro_title.length > 0 ? t.micro_title : t.title,
-      variant: u,
-      widthOverrides: f
+      variant: f,
+      widthOverrides: h
     }
   );
-}, vt = ({
-  currentBeatIndex: i,
-  numBeats: o,
-  onNextClick: t,
-  onPreviousClick: r,
+}, St = ({
+  clientColorScheme: i,
+  currentBeatIndex: o,
+  numBeats: t,
+  onNextClick: r,
+  onPreviousClick: n,
   scrollRightBoundary: l,
-  scrollX: n,
-  shouldApplyNewAnimation: a = !1,
-  visibleCardsCount: _ = 1
+  scrollX: a,
+  shouldApplyNewAnimation: d = !1,
+  visibleCardsCount: p = 1
 }) => {
-  const c = be(), { carouselCopy: C } = F(), u = Math.floor(n) > l || i - _ + 1 === 0, f = n < 0 || o - 1 === i, h = c.palette.grey[500];
-  return /* @__PURE__ */ I(
-    z,
+  const _ = ze(), { carouselCopy: C } = k(), f = Math.floor(a) > l || o - p + 1 === 0, h = a < 0 || t - 1 === o, m = _.palette.grey[500], c = i?.primary_300 ?? _.palette.primary.main;
+  return /* @__PURE__ */ v(
+    K,
     {
       direction: "row",
       sx: {
@@ -1380,34 +1391,34 @@ const K = E.createContext(null), ht = ({
       },
       children: [
         /* @__PURE__ */ e(
-          ue,
+          pe,
           {
-            "aria-disabled": u,
+            "aria-disabled": f,
             "aria-label": C.previous_insight_cta_aria,
-            disabled: u,
-            onClick: r,
+            disabled: f,
+            onClick: n,
             children: /* @__PURE__ */ e(
-              Ge,
+              Ue,
               {
                 style: {
-                  color: u ? h : c.palette.primary.main
+                  color: f ? m : c
                 }
               }
             )
           }
         ),
-        Array.from({ length: o }).map((p, d) => {
-          const m = d === i;
+        Array.from({ length: t }).map((E, R) => {
+          const I = R === o;
           return /* @__PURE__ */ e(
-            U,
+            b,
             {
               className: "mx-insights-micro-carousel-dots",
               sx: {
-                bgcolor: m ? c.palette.primary.main : h,
+                bgcolor: I ? c : m,
                 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"
-                ...a ? {
+                ...d ? {
                   borderRadius: "4px",
                   transformOrigin: "center",
                   transition: "all 0.5s ease-out",
@@ -1416,24 +1427,24 @@ const K = E.createContext(null), ht = ({
                   borderRadius: "50%",
                   p: 0
                 },
-                width: m && a ? 24 : 8
+                width: I && d ? 24 : 8
               }
             },
-            `carousel-button-${d}`
+            `carousel-button-${R}`
           );
         }),
         /* @__PURE__ */ e(
-          ue,
+          pe,
           {
-            "aria-disabled": f,
+            "aria-disabled": h,
             "aria-label": C.next_insight_cta_aria,
-            disabled: f,
-            onClick: t,
+            disabled: h,
+            onClick: r,
             children: /* @__PURE__ */ e(
-              ve,
+              Se,
               {
                 style: {
-                  color: f ? h : c.palette.primary.main
+                  color: h ? m : c
                 }
               }
             )
@@ -1442,117 +1453,119 @@ const K = E.createContext(null), ht = ({
       ]
     }
   );
-}, St = ({
+}, Mt = ({
   analyticsMetadata: i,
   allowSingleCardPeeking: o = !1,
   beats: t = [],
-  showCTAColocatedWithText: r,
+  clientColorScheme: r,
+  showCTAColocatedWithText: n,
   heightOverrides: l,
-  onCardClick: n,
-  posthog: a,
-  shouldApplyNewAnimation: _ = !1,
-  showCarouselControls: c,
+  onCardClick: a,
+  posthog: d,
+  shouldApplyNewAnimation: p = !1,
+  showCarouselControls: _,
   showIcon: C,
-  showWithMargin: u = !0,
-  variant: f,
-  widthOverrides: h,
-  visibleCardsCount: p = 1
+  showWithMargin: f = !0,
+  variant: h,
+  widthOverrides: m,
+  visibleCardsCount: c = 1
   // Default to 1 card visible
 }) => {
-  const d = E.useRef(null), m = E.useRef(null), [S, A] = E.useState(0), [D, R] = E.useState(null), [x, b] = E.useState(null), [g, L] = E.useState(null), [O, B] = E.useState(_), { carouselCopy: Y } = F(), { onEvent: Z } = $();
-  E.useEffect(() => {
-    if (d.current && !o) {
-      const s = d.current.offsetWidth, M = 8;
+  const E = u.useRef(null), R = u.useRef(null), [I, D] = u.useState(0), [O, y] = u.useState(null), [F, z] = u.useState(null), [g, x] = u.useState(null), [U, B] = u.useState(p), { carouselCopy: j } = k(), { onEvent: Z } = Y();
+  u.useEffect(() => {
+    if (E.current && !o) {
+      const s = E.current.offsetWidth, A = 8;
       let N;
-      if (p > 1) {
-        const q = (s - (p - 1) * M) / p / 3;
-        N = (s - q - (p - 1) * M) / p;
+      if (c > 1) {
+        const J = (s - (c - 1) * A) / c / 3;
+        N = (s - J - (c - 1) * A) / c;
       } else
         N = s;
-      L(N);
+      x(N);
     }
-  }, [p, d.current?.offsetWidth]), E.useEffect(() => {
-    const s = m.current?.offsetWidth;
+  }, [c, E.current?.offsetWidth]), u.useEffect(() => {
+    const s = R.current?.offsetWidth;
     if (typeof s == "number" && o) {
-      const M = (P) => {
+      const A = (P) => {
         B(!0);
-        const J = [
+        const ee = [
           { maxWidth: 375, cardWidth: 268 },
           { maxWidth: 444, cardWidth: 300 },
           { maxWidth: 599, cardWidth: 350 },
           { maxWidth: 749, cardWidth: 450 },
           { maxWidth: 900, cardWidth: 600 }
-        ].find((ae) => P <= ae.maxWidth);
-        return J ? J.cardWidth : 750;
+        ].find((ce) => P <= ce.maxWidth);
+        return ee ? ee.cardWidth : 750;
       };
-      L(M(s));
+      x(A(s));
       const N = () => {
-        const P = m.current?.offsetWidth;
-        typeof P == "number" && L(M(P));
+        const P = R.current?.offsetWidth;
+        typeof P == "number" && x(A(P));
       };
       return window.addEventListener("resize", N), () => {
         window.removeEventListener("resize", N);
       };
     }
-  }, [o, m]);
-  const j = () => {
-    Z(v.ON_CAROUSEL_FORWARD_CLICK, i), d.current && g && d.current.scrollTo({
-      left: S + g + 8,
+  }, [o, R]);
+  const X = () => {
+    Z(M.ON_CAROUSEL_FORWARD_CLICK, i), E.current && g && E.current.scrollTo({
+      left: I + g + 8,
       top: 0,
       behavior: "smooth"
     });
   }, le = () => {
-    Z(v.ON_CAROUSEL_BACK_CLICK, i), d.current && g && d.current.scrollTo({
-      left: Math.max(0, S - (g + 8)),
+    Z(M.ON_CAROUSEL_BACK_CLICK, i), E.current && g && E.current.scrollTo({
+      left: Math.max(0, I - (g + 8)),
       top: 0,
       behavior: "smooth"
     });
-  }, re = () => {
-    d.current && A(d.current.scrollLeft);
-  }, X = () => {
-    if (!x || !D) return;
-    x - D > It ? Z(v.ON_CAROUSEL_FORWARD_SWIPE, i) : Z(v.ON_CAROUSEL_BACK_SWIPE, i);
-  }, Q = (s) => {
-    R(s.targetTouches[0].clientX);
-  }, V = (s) => {
-    R(null), b(s.targetTouches[0].clientX);
-  }, Ee = {
-    showCTAColocatedWithText: r,
+  }, ne = () => {
+    E.current && D(E.current.scrollLeft);
+  }, Q = () => {
+    if (!F || !O) return;
+    F - O > yt ? Z(M.ON_CAROUSEL_FORWARD_SWIPE, i) : Z(M.ON_CAROUSEL_BACK_SWIPE, i);
+  }, q = (s) => {
+    y(s.targetTouches[0].clientX);
+  }, L = (s) => {
+    y(null), z(s.targetTouches[0].clientX);
+  }, ue = {
+    clientColorScheme: r,
+    showCTAColocatedWithText: n,
     heightOverrides: l,
-    posthog: a,
+    posthog: d,
     showIcon: C,
-    variant: f
-  }, ne = g ? Math.round(S / (g + 8)) : 0, ke = d.current ? d.current.scrollWidth - d.current.offsetWidth : 0;
-  return /* @__PURE__ */ I(
-    z,
+    variant: h
+  }, ae = g ? Math.round(I / (g + 8)) : 0, Fe = E.current ? E.current.scrollWidth - E.current.offsetWidth : 0;
+  return /* @__PURE__ */ v(
+    K,
     {
-      "aria-label": Y.carousel_title,
+      "aria-label": j.carousel_title,
       "aria-roledescription": "carousel",
-      ref: m,
+      ref: R,
       role: "group/region",
       sx: {
         alignItems: "center",
         boxSizing: "border-box",
         height: l,
-        width: h || "100%"
+        width: m || "100%"
       },
       children: [
-        /* @__PURE__ */ I(
-          z,
+        /* @__PURE__ */ v(
+          K,
           {
             direction: "row",
-            onScroll: re,
-            onTouchEnd: X,
-            onTouchMove: Q,
-            onTouchStart: V,
-            ref: d,
+            onScroll: ne,
+            onTouchEnd: Q,
+            onTouchMove: q,
+            onTouchStart: L,
+            ref: E,
             sx: {
               alignItems: "center",
               height: l && "100%",
               gap: 8,
               listStyleType: "none",
               m: 0,
-              maxWidth: u ? "calc(100% - 32px)" : "100%",
+              maxWidth: f ? "calc(100% - 32px)" : "100%",
               overflowX: "auto",
               overflowY: "hidden",
               p: 0,
@@ -1564,65 +1577,67 @@ const K = E.createContext(null), ht = ({
               }
             },
             children: [
-              t.map((s, M) => {
-                const N = M + 1, P = t.length + 1, q = Xe(
-                  Y.card_position_in_carousel_aria,
+              t.map((s, A) => {
+                const N = A + 1, P = t.length + 1, J = Qe(
+                  j.card_position_in_carousel_aria,
                   N.toString(),
                   P.toString()
-                ), J = s.micro_title && s.micro_title.length > 0, ae = s.micro_description && s.micro_description.length > 0, Fe = J ? s.micro_title : s.title, Be = ae ? s.micro_description : s.description;
+                ), ee = s.micro_title && s.micro_title.length > 0, ce = s.micro_description && s.micro_description.length > 0, Be = ee ? s.micro_title : s.title, Ze = ce ? s.micro_description : s.description;
                 return /* @__PURE__ */ e(
-                  yt,
+                  vt,
                   {
-                    ariaLabel: `${q}: ${Fe}, ${Be}`,
+                    ariaLabel: `${J}: ${Be}, ${Ze}`,
                     beat: s,
-                    index: M,
-                    isActiveCard: M === ne,
-                    onCardClick: n,
+                    index: A,
+                    isActiveCard: A === ae,
+                    onCardClick: a,
                     widthOverrides: g || void 0,
-                    ...Ee
+                    ...ue
                   },
-                  `${s.guid} ${M}`
+                  `${s.guid} ${A}`
                 );
               }),
               /* @__PURE__ */ e(
-                xt,
+                Lt,
                 {
-                  isActiveCard: ne === t.length,
-                  onCardClick: n,
+                  isActiveCard: ae === t.length,
+                  onCardClick: a,
                   widthOverrides: g || void 0,
-                  ...Ee
+                  ...ue
                 }
               )
             ]
           }
         ),
-        c && /* @__PURE__ */ e(
-          vt,
+        _ && /* @__PURE__ */ e(
+          St,
           {
-            currentBeatIndex: ne + p - 1,
+            clientColorScheme: r,
+            currentBeatIndex: ae + c - 1,
             numBeats: t.length + 1,
-            onNextClick: j,
+            onNextClick: X,
             onPreviousClick: le,
-            scrollRightBoundary: ke,
-            scrollX: S,
-            shouldApplyNewAnimation: O,
-            visibleCardsCount: p
+            scrollRightBoundary: Fe,
+            scrollX: I,
+            shouldApplyNewAnimation: U,
+            visibleCardsCount: c
           }
         )
       ]
     }
   );
-}, Mt = G(St), At = ({
+}, At = G(Mt), Ot = ({
   analyticsMetadata: i,
-  onCardClick: o,
-  posthog: t,
-  widthOverrides: r
+  clientColorScheme: o,
+  onCardClick: t,
+  posthog: r,
+  widthOverrides: n
 }) => {
-  const { carouselCopy: l } = F(), { onEvent: n } = $(), a = () => {
-    n && (n(v.ON_VIEW_MORE_CLICKED, i), o(), t?.capture("clicked_view_more"));
+  const { carouselCopy: l } = k(), { onEvent: a } = Y(), d = () => {
+    a && (a(M.ON_VIEW_MORE_CLICKED, i), t(), r?.capture("clicked_view_more"));
   };
-  return l ? /* @__PURE__ */ I(
-    z,
+  return l ? /* @__PURE__ */ v(
+    K,
     {
       alignItems: "center",
       direction: "row",
@@ -1630,13 +1645,14 @@ const K = E.createContext(null), ht = ({
       spacing: 2,
       sx: {
         padding: 16,
-        width: r || void 0
+        width: n || void 0
       },
       children: [
         /* @__PURE__ */ e(
-          Pe,
+          Ge,
           {
             sx: {
+              color: o?.primary_300,
               fontSize: 18,
               fontWeight: 700,
               lineHeight: "24px"
@@ -1646,26 +1662,29 @@ const K = E.createContext(null), ht = ({
           }
         ),
         /* @__PURE__ */ e(
-          Ze,
+          Pe,
           {
-            endIcon: /* @__PURE__ */ e(ve, { size: 20 }),
-            onClick: a,
+            endIcon: /* @__PURE__ */ e(Se, { size: 20 }),
+            onClick: d,
             size: "small",
+            sx: {
+              color: o?.primary_300
+            },
             variant: "text",
             children: l.view_all_insights_in_full_feed_cta_aria
           }
         )
       ]
     }
-  ) : /* @__PURE__ */ e(Ue, {});
-}, Ot = G(At), Tt = ({
+  ) : /* @__PURE__ */ e(be, {});
+}, Tt = G(Ot), Wt = ({
   heightOverrides: i,
   widthOverrides: o,
   children: t
 }) => {
-  const { carouselCopy: r } = F();
+  const { carouselCopy: r } = k();
   return /* @__PURE__ */ e(
-    U,
+    b,
     {
       "aria-label": r?.carousel_title,
       "aria-roledescription": "carousel",
@@ -1679,44 +1698,46 @@ const K = E.createContext(null), ht = ({
       children: t
     }
   );
-}, Ne = ({
+}, He = ({
   ariaLabel: i,
   carouselSize: o,
-  heightOverrides: t,
-  onCardClick: r,
+  clientColorScheme: t,
+  heightOverrides: r,
+  onCardClick: n,
   posthog: l,
-  showIcon: n,
-  showWithMargin: a,
-  variant: _,
-  widthOverrides: c
+  showIcon: a,
+  showWithMargin: d,
+  variant: p,
+  widthOverrides: _
 }) => {
-  const { cardsCopy: C } = F(), { onEvent: u } = $(), { onPageview: f } = xe();
-  E.useEffect(() => {
-    f(k.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS);
+  const { cardsCopy: C } = k(), { onEvent: f } = Y(), { onPageview: h } = Le();
+  u.useEffect(() => {
+    h(H.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS);
   }, []);
-  const h = () => {
-    r && r(), u(v.ON_NO_RELEVANT_INSIGHTS_CLICKED), l?.capture("clicked_insight", {
+  const m = () => {
+    n && n(), f(M.ON_NO_RELEVANT_INSIGHTS_CLICKED), l?.capture("clicked_insight", {
       template: "no_relevant_insights"
     });
   };
   return /* @__PURE__ */ e(
-    oe,
+    re,
     {
       actionText: C.micro_card_cta,
       ariaLabel: i,
       description: C.no_relevant_insights_card_description,
-      heightOverrides: t,
-      icon: /* @__PURE__ */ e(De, {}),
+      fontColors: { buttonColor: t?.primary_300 },
+      heightOverrides: r,
+      icon: /* @__PURE__ */ e(xe, {}),
       isZeroState: !0,
-      onCardClick: h,
+      onCardClick: m,
       posthog: l,
-      showIcon: n,
+      showIcon: a,
       style: {
         cardStyle: {
           card: {
-            height: `calc(${Le[o]}px - 44px)`,
+            height: `calc(${Ne[o]}px - 44px)`,
             m: "0 auto",
-            width: a ? "calc(100% - 32px)" : "100%"
+            width: d ? "calc(100% - 32px)" : "100%"
           },
           description: {
             WebkitLineClamp: 4
@@ -1727,39 +1748,39 @@ const K = E.createContext(null), ht = ({
         }
       },
       title: C.no_relevant_insights_card_title,
-      variant: _,
-      widthOverrides: c
+      variant: p,
+      widthOverrides: _
     }
   );
-}, li = G(Ne), He = ({
+}, li = G(He), ke = ({
   ariaLabel: i,
   carouselSize: o,
   heightOverrides: t,
   onCardClick: r,
-  posthog: l,
-  showIcon: n,
+  posthog: n,
+  showIcon: l,
   showWithMargin: a,
-  variant: _,
-  widthOverrides: c
+  variant: d,
+  widthOverrides: p
 }) => {
-  const { onPageview: C } = xe(), { zeroStateCopy: u } = F();
-  return E.useEffect(() => {
-    C(k.MICRO_WIDGET_CAROUSEL_ZERO_STATE);
+  const { onPageview: _ } = Le(), { zeroStateCopy: C } = k();
+  return u.useEffect(() => {
+    _(H.MICRO_WIDGET_CAROUSEL_ZERO_STATE);
   }, []), /* @__PURE__ */ e(
-    oe,
+    re,
     {
       ariaLabel: i,
-      description: u.carousel_zero_state_description,
+      description: C.carousel_zero_state_description,
       heightOverrides: t,
-      icon: /* @__PURE__ */ e(De, {}),
+      icon: /* @__PURE__ */ e(xe, {}),
       isZeroState: !0,
       onCardClick: r,
-      posthog: l,
-      showIcon: n,
+      posthog: n,
+      showIcon: l,
       style: {
         cardStyle: {
           card: {
-            height: `calc(${Le[o]}px - 44px)`,
+            height: `calc(${Ne[o]}px - 44px)`,
             m: "0 auto",
             width: a ? "calc(100% - 32px)" : "100%"
           },
@@ -1768,13 +1789,13 @@ const K = E.createContext(null), ht = ({
           }
         }
       },
-      title: u.carousel_zero_state_title,
-      variant: _,
-      widthOverrides: c
+      title: C.carousel_zero_state_title,
+      variant: d,
+      widthOverrides: p
     }
   );
-}, ri = G(He), Wt = () => /* @__PURE__ */ e(
-  U,
+}, ni = G(ke), wt = () => /* @__PURE__ */ e(
+  b,
   {
     sx: {
       alignItems: "center",
@@ -1783,142 +1804,148 @@ const K = E.createContext(null), ht = ({
       justifyContent: "center",
       width: "100%"
     },
-    children: /* @__PURE__ */ e(Qe, {})
+    children: /* @__PURE__ */ e(qe, {})
   }
-), H = new st(), wt = ({
+), V = new ht(), Dt = ({
   allowSingleCardPeeking: i,
   areBeatsLoading: o,
   beats: t = [],
   // This also determines the length of the carousel controls (beat.length + 1)
-  showCTAColocatedWithText: r = !0,
+  clientColorScheme: r,
+  // Allows certain icons, view all and read more button to reflect the clients color scheme. Currently only supports primary_300
+  showCTAColocatedWithText: n = !0,
   endpoint: l = "/",
-  heightOverrides: n,
-  logOutUser: a,
-  onCardClick: _ = () => {
+  heightOverrides: a,
+  logOutUser: d,
+  onCardClick: p = () => {
   },
-  onEvent: c = () => {
+  onEvent: _ = () => {
   },
   onPageview: C = () => {
   },
-  posthog: u,
-  shouldApplyNewAnimation: f = !1,
-  showBorder: h = !0,
-  showCarouselControls: p,
-  showHeader: d,
-  showIcon: m,
-  showWithMargin: S = !0,
-  token: A = "",
-  useDarkMode: D,
-  userHasFullInsightFeedBeats: R,
-  variant: x,
-  visibleCardsCount: b = 1,
+  posthog: f,
+  shouldApplyNewAnimation: h = !1,
+  showBorder: m = !0,
+  showCarouselControls: c,
+  showHeader: E,
+  showIcon: R,
+  showWithMargin: I = !0,
+  token: D = "",
+  useDarkMode: O,
+  userHasFullInsightFeedBeats: y,
+  variant: F,
+  visibleCardsCount: z = 1,
   widthOverrides: g
 }) => {
-  const [L, O] = ee("STANDARD"), [B, Y] = ee(!1), [Z, j] = ee(!1), le = Je([c], H), re = et([C], H);
-  E.useEffect(() => {
-    !H.isInitialized && !Z && (H.initialize(l, A, a).catch(() => j(!1)), j(!0));
-  }, [l, A, a, H.isInitialized, Z]), E.useEffect(() => {
-    const V = window.innerHeight;
-    V < 180 ? O("STANDARD") : V >= 180 && V < 200 ? O("LARGE") : V >= 200 && V < 248 ? O("XLARGE") : V >= 248 && O("XXLARGE");
-  }, [window.innerHeight]), E.useEffect(() => {
-    Y(!o && H.isInitialized);
-  }, [o, H.isInitialized]);
-  const X = {
-    showCTAColocatedWithText: r,
-    heightOverrides: n,
-    onCardClick: _,
-    posthog: u,
-    showIcon: m,
-    showWithMargin: S,
-    useDarkMode: D,
+  const [x, U] = te("STANDARD"), [B, j] = te(!1), [Z, X] = te(!1), le = et([_], V), ne = tt([C], V);
+  u.useEffect(() => {
+    !V.isInitialized && !Z && (V.initialize(l, D, d).catch(() => X(!1)), X(!0));
+  }, [l, D, d, V.isInitialized, Z]), u.useEffect(() => {
+    const L = window.innerHeight;
+    L < 180 ? U("STANDARD") : L >= 180 && L < 200 ? U("LARGE") : L >= 200 && L < 248 ? U("XLARGE") : L >= 248 && U("XXLARGE");
+  }, [window.innerHeight]), u.useEffect(() => {
+    j(!o && V.isInitialized);
+  }, [o, V.isInitialized]);
+  const Q = {
+    showCTAColocatedWithText: n,
+    heightOverrides: a,
+    onCardClick: p,
+    posthog: f,
+    showIcon: R,
+    showWithMargin: I,
+    useDarkMode: O,
     widthOverrides: g
-  }, Q = {
-    carouselSize: L,
-    variant: x,
-    ...X
+  }, q = {
+    carouselSize: x,
+    variant: F,
+    ...Q
   };
-  return /* @__PURE__ */ e(ht, { onEvent: le, onPageview: re, store: H, children: /* @__PURE__ */ I(Tt, { heightOverrides: n, widthOverrides: g, children: [
-    !B && /* @__PURE__ */ e(Wt, {}),
-    B && d && /* @__PURE__ */ e(
-      Ot,
+  return /* @__PURE__ */ e(Et, { onEvent: le, onPageview: ne, store: V, children: /* @__PURE__ */ v(Wt, { heightOverrides: a, widthOverrides: g, children: [
+    !B && /* @__PURE__ */ e(wt, {}),
+    B && E && /* @__PURE__ */ e(
+      Tt,
       {
-        analyticsMetadata: Ce,
-        onCardClick: _,
-        posthog: u,
+        analyticsMetadata: fe,
+        clientColorScheme: r,
+        onCardClick: p,
+        posthog: f,
         widthOverrides: g
       }
     ),
     B && !!t.length && /* @__PURE__ */ e(
-      Mt,
+      At,
       {
         allowSingleCardPeeking: i,
-        analyticsMetadata: Ce,
+        analyticsMetadata: fe,
         beats: t,
-        shouldApplyNewAnimation: f,
-        showCarouselControls: p,
-        variant: h ? x : void 0,
-        visibleCardsCount: b,
-        ...X
+        clientColorScheme: r,
+        shouldApplyNewAnimation: h,
+        showCarouselControls: c,
+        variant: m ? F : void 0,
+        visibleCardsCount: z,
+        ...Q
       }
     ),
-    B && !t.length && R && /* @__PURE__ */ e(Ne, { ...Q }),
-    B && !t.length && !R && /* @__PURE__ */ e(He, { ...Q })
+    B && !t.length && y && /* @__PURE__ */ e(He, { clientColorScheme: r, ...q }),
+    B && !t.length && !y && /* @__PURE__ */ e(ke, { ...q })
   ] }) });
-}, ni = G(wt), Dt = ({
+}, ai = G(Dt), xt = ({
   isActiveCard: i,
   ariaLabel: o,
-  heightOverrides: t,
-  onCardClick: r,
+  clientColorScheme: t,
+  heightOverrides: r,
+  onCardClick: n,
   posthog: l,
-  showIcon: n,
-  variant: a,
-  widthOverrides: _
+  showIcon: a,
+  variant: d,
+  widthOverrides: p
 }) => {
-  const c = ce(), { ref: C, inView: u } = Se({
+  const _ = se(), { ref: C, inView: f } = Me({
     threshold: Ve
-  }), { cardsCopy: f } = F(), { onEvent: h } = $();
-  ie(() => {
-    u && (h(we.ON_VIEW_MORE_VIEWED), l?.capture("viewed_insight", {
+  }), { cardsCopy: h } = k(), { onEvent: m } = Y();
+  oe(() => {
+    f && (m(De.ON_VIEW_MORE_VIEWED), l?.capture("viewed_insight", {
       template: "view_more_card"
     }));
-  }, [u]);
-  const p = () => {
-    r && r(), h(v.ON_VIEW_MORE_CLICKED), l?.capture("clicked_insight", {
+  }, [f]);
+  const c = () => {
+    n && n(), m(M.ON_VIEW_MORE_CLICKED), l?.capture("clicked_insight", {
       template: "view_more_card"
     });
   };
   return /* @__PURE__ */ e(
-    oe,
+    re,
     {
-      actionText: f.micro_card_cta,
+      actionText: h.micro_card_cta,
       ariaLabel: o,
-      description: f.view_more_card_description,
-      heightOverrides: t,
-      icon: /* @__PURE__ */ e(Ct, { color: c.palette.primary.main }),
+      description: h.view_more_card_description,
+      fontColors: { buttonColor: t?.primary_300 },
+      heightOverrides: r,
+      icon: /* @__PURE__ */ e(ft, { color: t?.primary_300 ?? _.palette.primary.main }),
       isActiveCard: i,
-      onCardClick: p,
+      onCardClick: c,
       posthog: l,
       ref: C,
-      showIcon: n,
-      title: f.view_more_card_title,
-      variant: a,
-      widthOverrides: _
+      showIcon: a,
+      title: h.view_more_card_title,
+      variant: d,
+      widthOverrides: p
     }
   );
-}, xt = G(Dt);
+}, Lt = G(xt);
 export {
-  st as A,
-  yt as B,
-  Ot as C,
-  ht as I,
-  Mt as M,
+  ht as A,
+  vt as B,
+  Tt as C,
+  Et as I,
+  At as M,
   li as N,
-  Ce as T,
-  xt as V,
-  ri as Z,
-  oe as a,
-  ni as b,
-  Ct as c,
-  Rt as d,
-  De as e
+  fe as T,
+  Lt as V,
+  ni as Z,
+  re as a,
+  ai as b,
+  ft as c,
+  gt as d,
+  xe as e
 };