@mx-cartographer/experiences 9.0.2 → 9.1.0-alpha.bb1

package/dist/ViewMoreMicroCard-BD_MNc2z.mjs

@@ -1,1295 +0,0 @@
-import { jsx as o, jsxs as N, Fragment as Te } from "react/jsx-runtime";
-import I, { useEffect as re, useState as ie } from "react";
-import { observer as U } from "mobx-react-lite";
-import k from "@mui/material/Stack";
-import ke from "@mui/material/Button";
-import { CategoryIcon as Ue, MerchantLogo as ze, InstitutionLogo as Ke, P as pe, Text as me, H3 as Fe } from "@mxenabled/mxui";
-import { Icon as He, Close as $e, ChevronLeft as je, ChevronRight as Re } from "@mxenabled/mx-icons";
-import { L as Ye } from "./Loader-CxeBwuPG.mjs";
-import ae from "@mui/material/Box";
-import ue from "@mui/material/IconButton";
-import { useTheme as P, alpha as s } from "@mui/material/styles";
-import { useInView as Oe } from "react-intersection-observer";
-import { C as Xe } from "./Category-DEKZGLYe.mjs";
-import { b as Ze } from "./Localization-DnoVyBNK.mjs";
-import Qe from "@mui/material/CircularProgress";
-import { makeAutoObservable as se, runInAction as We } from "mobx";
-import { a as qe, u as Je, b as et } from "./Analytics-CkYXKvco.mjs";
-import { G as Ce, B as he } from "./GlobalCopyApi-wcnDUzMV.mjs";
-import { u as tt } from "./useWidgetLoadTimer-CJb-RELP.mjs";
-import { Card as ot, CardActionArea as nt, Box as it, IconButton as rt, Stack as F, Button as ge } from "@mui/material";
-import at from "@mui/material/Avatar";
-class st {
-  copyApi = new Ce("/", "");
-  copyObject = {};
-  namespace = "experiences";
-  translationKey = "micro_insights";
-  constructor() {
-    se(this);
-  }
-  // NOTE: Not sure if this is special case, but other stores have this deprecation todo
-  // DEPRECATED: Initialize api in constructor and use loadCopy instead
-  // TODO: Remove this function
-  initialize = async (e, n) => {
-    this.copyApi = new Ce(e, n), await this.loadCopy();
-  };
-  loadCopy = async () => {
-    const e = await this.copyApi.getGlobalCopy(this.namespace, this.translationKey);
-    We(() => {
-      this.copyObject = e[this.translationKey];
-    });
-  };
-  get cardsCopy() {
-    return this.copyObject.cards;
-  }
-  get carouselCopy() {
-    return this.copyObject.carousel;
-  }
-  get zeroStateCopy() {
-    return this.copyObject.zero_state;
-  }
-}
-const ce = {
-  BillAmountNotStandard: "BillAmountNotStandard",
-  CanadianUpcomingDeadlineAlert: "CanadianUpcomingDeadlineAlert",
-  DuplicatePaymentV2: "DuplicatePaymentV2",
-  IntroducePulse: "IntroducePulse",
-  LargeTransaction: "LargeTransaction",
-  MonthlySpendToIncomeComparisonV2: "MonthlySpendToIncomeComparisonV2",
-  QuarterlySummary: "QuarterlySummary",
-  SpendingPlanCategorySpending: "SpendingPlanCategorySpending",
-  SubscriptionPriceIncrease: "SubscriptionPriceIncrease",
-  UncategorizedTransactionsV2: "UncategorizedTransactionsV2",
-  UpcomingBill: "UpcomingBill",
-  UnifiedDeposit: "UnifiedDeposit",
-  WeeklySpendingPlanSummary: "WeeklySpendingPlanSummary",
-  WeeklyNewMerchantsV2: "WeeklyNewMerchantsV2",
-  MonthlySpendComparison: "MonthlySpendComparison",
-  MonthlySpendToIncomeComparison: "MonthlySpendToIncomeComparison"
-}, O = window?.app?.clientConfig?.microwidget_instance_id || "", Ie = {
-  INSIGHTS_MICRO_WIDGET: "/micro-insights-carousel"
-}, we = (t) => `on${t}Click`, Ne = (t) => `on${t}View`, Me = (t) => `on${t}ViewFirstTime`, le = (t) => t.replace(/([a-z])([A-Z])/g, "$1 $2"), ct = () => Object.values(ce).reduce(
-  (t, e) => ({
-    ...t,
-    [we(e)]: {
-      action: b.MICRO_BEAT_CLICKED,
-      category: L.BEAT_INTERACTION,
-      label: le(e),
-      value: O
-    }
-  }),
-  {}
-), lt = () => Object.values(ce).reduce(
-  (t, e) => ({
-    ...t,
-    [Ne(e)]: {
-      action: b.MICRO_BEAT_DISPLAYED,
-      category: L.BEAT_INTERACTION,
-      label: le(e),
-      value: O
-    }
-  }),
-  {}
-), dt = () => Object.values(ce).reduce(
-  (t, e) => ({
-    ...t,
-    [Me(e)]: {
-      action: b.MICRO_BEAT_DISPLAYED_FIRST_TIME,
-      category: L.BEAT_INTERACTION,
-      label: le(e),
-      value: O
-    }
-  }),
-  {}
-), v = {
-  CAROUSEL_CONTROL: "Carousel Control",
-  MICRO_WIDGET: "Micro Widget",
-  VIEW_MORE: "View More"
-}, L = {
-  MICRO_WIDGET_INTERACTION: "Micro Widget Interaction",
-  BEAT_INTERACTION: "Beat Interaction"
-}, W = {
-  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"
-}, ve = {
-  ON_VIEW_MORE_VIEWED: "onViewMoreCardView"
-}, b = {
-  CONTROL_BACKWARD: "Control Backward",
-  CONTROL_FORWARD: "Control Forward",
-  MICRO_BEAT_CLICKED: "Micro Beat Clicked",
-  MICRO_BEAT_DISPLAYED: "Micro Beat Displayed",
-  MICRO_BEAT_DISPLAYED_FIRST_TIME: "Micro Beat Displayed For First Time",
-  SWIPE_BACKWARD: "Swipe Backward",
-  SWIPE_FORWARD: "Swipe Forward"
-}, B = {
-  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"
-}, Ee = {
-  [B.MICRO_WIDGET_CAROUSEL]: {
-    label: v.MICRO_WIDGET,
-    name: B.MICRO_WIDGET_CAROUSEL,
-    path: Ie.INSIGHTS_MICRO_WIDGET,
-    value: O
-  },
-  // zero state
-  [B.MICRO_WIDGET_CAROUSEL_ZERO_STATE]: {
-    label: v.MICRO_WIDGET,
-    name: B.MICRO_WIDGET_CAROUSEL_ZERO_STATE,
-    path: Ie.INSIGHTS_MICRO_WIDGET,
-    value: O
-  },
-  // no relevant cards
-  [B.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS]: {
-    label: v.MICRO_WIDGET,
-    name: B.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS,
-    path: "/micro-widget",
-    value: O
-  }
-}, fe = {
-  // carousel control interaction events - clicks and swipes
-  [W.ON_CAROUSEL_BACK_CLICK]: {
-    action: b.CONTROL_BACKWARD,
-    category: L.MICRO_WIDGET_INTERACTION,
-    label: v.CAROUSEL_CONTROL,
-    value: O
-  },
-  [W.ON_CAROUSEL_FORWARD_CLICK]: {
-    action: b.CONTROL_FORWARD,
-    category: L.MICRO_WIDGET_INTERACTION,
-    label: v.CAROUSEL_CONTROL,
-    value: O
-  },
-  [W.ON_CAROUSEL_BACK_SWIPE]: {
-    action: b.SWIPE_BACKWARD,
-    category: L.MICRO_WIDGET_INTERACTION,
-    label: v.CAROUSEL_CONTROL,
-    value: O
-  },
-  [W.ON_CAROUSEL_FORWARD_SWIPE]: {
-    action: b.SWIPE_FORWARD,
-    category: L.MICRO_WIDGET_INTERACTION,
-    label: v.CAROUSEL_CONTROL,
-    value: O
-  },
-  // read more card events
-  [W.ON_VIEW_MORE_CLICKED]: {
-    action: b.MICRO_BEAT_CLICKED,
-    category: L.BEAT_INTERACTION,
-    label: v.VIEW_MORE,
-    value: O
-  },
-  [ve.ON_VIEW_MORE_VIEWED]: {
-    action: b.MICRO_BEAT_DISPLAYED,
-    category: L.BEAT_INTERACTION,
-    label: v.VIEW_MORE,
-    value: O
-  },
-  ...ct(),
-  ...lt(),
-  ...dt()
-}, ye = async (t, e) => !e || !fe[t] ? null : e.sendAnalyticEvent(fe[t]).then((n) => n).catch((n) => {
-  throw n;
-}), Ae = async (t, e) => !e || !Ee[t] ? null : e.sendAnalyticsPageview(Ee[t]).then((n) => n).catch((n) => {
-  throw n;
-});
-class _t {
-  onAnalyticEvent = ye;
-  onAnalyticPageView = Ae;
-  beatApi = new he("/", "");
-  constructor() {
-    se(this);
-  }
-  initialize = async (e, n, i) => {
-    this.onAnalyticEvent = (r, l) => {
-      ye(r, l).then((a) => a).catch((a) => {
-        throw a.status === 401 && i(), a;
-      });
-    }, this.onAnalyticPageView = (r, l) => {
-      Ae(r, l).then((a) => a).catch((a) => {
-        throw a.status === 401 && i(), a;
-      });
-    }, this.beatApi = new he(e, n);
-  };
-  updateBeat = async (e) => {
-    this.beatApi.updateBeat(e);
-  };
-  updateOffer = async (e) => {
-    this.beatApi.updateOffer(e);
-  };
-}
-class pt {
-  copyStore;
-  endpoint = "/";
-  insightsMicroWidgetStore;
-  session = null;
-  token = "";
-  isInitialized = !1;
-  constructor() {
-    this.copyStore = new st(), this.insightsMicroWidgetStore = new _t(), se(this);
-  }
-  initialize = async (e, n, i) => {
-    await this.copyStore.initialize(e, n), await this.insightsMicroWidgetStore.initialize(e, n, i);
-    const r = await qe(e, n, "1.0.0", "Micro Insights Carousel");
-    We(() => {
-      this.session = r, this.isInitialized = !0;
-    });
-  };
-}
-const H = I.createContext(null), mt = ({
-  onEvent: t,
-  onPageview: e,
-  store: n,
-  children: i
-}) => /* @__PURE__ */ o(H.Provider, { value: { onEvent: t, onPageview: e, store: n, children: i }, children: i }), ut = ({ beat: t }) => {
-  const { primary_category_guid: e, category_guids: n } = t, i = e || n?.[0] || Xe.UNCATEGORIZED;
-  return /* @__PURE__ */ o(Ue, { categoryGuid: i, size: 32, sx: { minWidth: 32 } });
-}, c = ({
-  avatarSx: t,
-  bgColor: e,
-  name: n,
-  iconColor: i = "primary",
-  fill: r = !0,
-  sx: l
-}) => /* @__PURE__ */ o(
-  at,
-  {
-    sx: {
-      bgcolor: e,
-      width: 32,
-      height: 32,
-      ...t
-    },
-    variant: "rounded",
-    children: /* @__PURE__ */ o(He, { color: i, fill: r, name: n, size: 20, sx: l })
-  }
-), Ct = ({ beat: t }) => {
-  const { category_guids: e, merchant_guids: n, primary_category_guid: i, primary_merchant_guid: r } = t;
-  return /* @__PURE__ */ o(
-    ze,
-    {
-      categoryGuid: i || e && e[0] || "",
-      merchantGuid: r || n[0],
-      size: 32,
-      sx: {
-        display: "flex",
-        mt: 2,
-        minWidth: 32
-      }
-    }
-  );
-}, ht = (t) => t ? t.data ? t.data.map((e) => {
-  const n = {};
-  return t.names?.map((i, r) => {
-    n[i] = e[r];
-  }), n;
-}) : [] : [], q = "primary", Le = "success", be = "error", De = (t) => {
-  const e = ht(t), n = Math.floor(e.length / 2);
-  if (n === 0 || n === e.length) return q;
-  const i = e[0]?.amount, r = e[n]?.amount;
-  return i == null || r == null ? q : i > r ? be : i < r ? Le : q;
-}, gt = (t, e) => t < e ? Le : t > e ? be : q, It = ({ beat: t }) => {
-  const e = P(), n = De(t.data_series), i = e.palette[n].main;
-  return /* @__PURE__ */ o(c, { bgColor: s(i, 0.15), iconColor: n, name: "bar_chart" });
-}, Et = ({ beat: t }) => {
-  const e = P(), n = t.payload?.average_spend || 0;
-  let i = 0;
-  if (t.data_series?.data && t.data_series.data.length > 0) {
-    const a = (t.data_series.names || []).indexOf("amount");
-    a !== -1 && (i = t.data_series.data[0][a] || 0);
-  }
-  const r = gt(i, n);
-  return /* @__PURE__ */ o(
-    c,
-    {
-      bgColor: s(e.palette[r].main, 0.15),
-      iconColor: r,
-      name: "timeline"
-    }
-  );
-}, ft = ({ beat: t }) => {
-  const e = P(), n = De(t.data_series), i = e.palette[n].main;
-  return /* @__PURE__ */ o(
-    c,
-    {
-      bgColor: s(i, 0.15),
-      fill: !1,
-      iconColor: n,
-      name: "area_chart"
-    }
-  );
-}, yt = ({ beat: t }) => /* @__PURE__ */ o(Ke, { alt: t.institutionName || "", institutionGuid: t.institutionGuid || "" }), At = {
-  0: (t, e) => /* @__PURE__ */ o(c, { bgColor: s(e.palette.primary.main, 0.15), name: "error" }),
-  1: (t) => /* @__PURE__ */ o(ut, { beat: t }),
-  2: (t) => /* @__PURE__ */ o(Ct, { beat: t }),
-  3: (t) => /* @__PURE__ */ o(It, { beat: t }),
-  4: (t, e) => /* @__PURE__ */ o(
-    c,
-    {
-      bgColor: s(e.palette.secondary.main, 0.15),
-      iconColor: "secondary",
-      name: "info"
-    }
-  ),
-  5: (t, e) => /* @__PURE__ */ o(c, { bgColor: s(e.palette.primary.main, 0.15), name: "campaign" }),
-  6: (t, e) => /* @__PURE__ */ o(
-    c,
-    {
-      bgColor: s(e.palette.success.main, 0.15),
-      iconColor: "success",
-      name: "check_circle"
-    }
-  ),
-  7: (t, e) => /* @__PURE__ */ o(c, { bgColor: s(e.palette.primary.main, 0.15), name: "today" }),
-  8: (t, e) => /* @__PURE__ */ o(c, { bgColor: s(e.palette.primary.main, 0.15), name: "calendar_clock" }),
-  9: (t, e) => /* @__PURE__ */ o(c, { bgColor: s(e.palette.primary.main, 0.15), name: "celebration" }),
-  // TODO: Waiting for the backend to accommodate the below icon types
-  10: (t, e) => /* @__PURE__ */ o(c, { bgColor: s(e.palette.primary.main, 0.15), name: "problem" }),
-  11: (t, e) => /* @__PURE__ */ o(
-    c,
-    {
-      avatarSx: { border: `1px solid ${e.palette.secondary.main}` },
-      bgColor: s(e.palette.secondary.main, 0.15),
-      fill: !1,
-      name: "category",
-      sx: { color: "text.primary" }
-    }
-  ),
-  12: (t) => /* @__PURE__ */ o(ft, { beat: t }),
-  13: () => /* @__PURE__ */ o(
-    c,
-    {
-      avatarSx: { border: "1px solid #EB00D0" },
-      bgColor: s("#EB00D0", 0.25),
-      fill: !1,
-      name: "money_bag",
-      sx: { color: "text.primary" }
-    }
-  ),
-  14: (t, e) => /* @__PURE__ */ o(
-    c,
-    {
-      bgColor: s(e.palette.secondary.main, 0.15),
-      fill: !1,
-      iconColor: "secondary",
-      name: "person"
-    }
-  ),
-  15: (t, e) => /* @__PURE__ */ o(
-    c,
-    {
-      bgColor: s(e.palette.primary.main, 0.15),
-      name: "payment_arrow_down"
-    }
-  ),
-  16: (t, e) => /* @__PURE__ */ o(
-    c,
-    {
-      bgColor: s(e.palette.success.main, 0.15),
-      name: "beenhere",
-      sx: { color: "success.main" }
-    }
-  ),
-  17: (t, e) => /* @__PURE__ */ o(c, { bgColor: s(e.palette.primary.main, 0.15), name: "savings" }),
-  18: (t, e) => /* @__PURE__ */ o(
-    c,
-    {
-      bgColor: t.payload.projected_overdraft_amount < 0 ? s(e.palette.warning.main, 0.15) : s(e.palette.error.main, 0.15),
-      iconColor: t?.payload?.projected_overdraft_amount < 0 ? "warning" : "error",
-      name: "error"
-    }
-  ),
-  19: (t, e) => /* @__PURE__ */ o(c, { bgColor: s(e.palette.primary.main, 0.15), name: "finance_mode" }),
-  20: (t, e) => /* @__PURE__ */ o(c, { bgColor: s(e.palette.primary.main, 0.15), name: "tips_and_updates" }),
-  21: (t, e) => /* @__PURE__ */ o(
-    c,
-    {
-      bgColor: s(e.palette.primary.main, 0.15),
-      name: "currency_exchange"
-    }
-  ),
-  22: (t, e) => /* @__PURE__ */ o(
-    c,
-    {
-      bgColor: s(e.palette.warning.main, 0.15),
-      name: "flag",
-      sx: { color: "warning.main" }
-    }
-  ),
-  23: (t, e) => /* @__PURE__ */ o(c, { bgColor: s(e.palette.primary.main, 0.15), name: "thumb_up" }),
-  24: () => /* @__PURE__ */ o(
-    c,
-    {
-      bgColor: s("#EB00D0", 0.15),
-      name: "attach_money",
-      sx: { color: "#EB00D0" }
-    }
-  ),
-  25: (t, e) => /* @__PURE__ */ o(c, { bgColor: s(e.palette.primary.main, 0.15), name: "note_stack" }),
-  26: (t, e) => /* @__PURE__ */ o(
-    c,
-    {
-      bgColor: s(e.palette.primary.main, 0.15),
-      fill: !1,
-      name: "price_change"
-    }
-  ),
-  27: (t, e) => /* @__PURE__ */ o(c, { bgColor: s(e.palette.primary.main, 0.15), name: "directions_car" }),
-  28: (t, e) => /* @__PURE__ */ o(c, { bgColor: s(e.palette.primary.main, 0.15), name: "contract" }),
-  29: (t) => /* @__PURE__ */ o(Et, { beat: t }),
-  30: (t, e) => /* @__PURE__ */ o(c, { bgColor: s(e.palette.primary.main, 0.15), name: "calendar_month" }),
-  31: (t, e) => /* @__PURE__ */ o(
-    c,
-    {
-      bgColor: s(e.palette.warning.main, 0.15),
-      name: "star_rate",
-      sx: { color: "warning.400" }
-    }
-  ),
-  32: (t, e) => /* @__PURE__ */ o(c, { bgColor: s(e.palette.primary.main, 0.15), name: "help" }),
-  33: (t, e) => /* @__PURE__ */ o(
-    c,
-    {
-      bgColor: s(e.palette.primary.main, 0.15),
-      fill: !1,
-      name: "storefront"
-    }
-  ),
-  34: (t) => /* @__PURE__ */ o(yt, { beat: t })
-}, St = ({ beat: t }) => {
-  const e = P(), { icon_type: n } = t, i = n != null ? At[n] : null;
-  return i ? i(t, e) : /* @__PURE__ */ o(c, { bgColor: s(e.palette.primary.main, 0.15), name: "error" });
-}, D = () => {
-  const t = I.useContext(H);
-  if (!t)
-    throw new Error("useCopyStore() must be used within the InsightsMicroWidgetDataProvider");
-  return t.store.copyStore;
-}, Tt = () => {
-  const t = I.useContext(H);
-  if (!t?.store?.insightsMicroWidgetStore)
-    throw new Error(
-      "useInsightsMicroWidgetStore() must be used within the InsightsMicroWidgetDataProvider"
-    );
-  return t.store.insightsMicroWidgetStore;
-}, $ = () => {
-  const t = I.useContext(H);
-  if (!t)
-    throw new Error("useEvent() must be used within the InsightsMicroWidgetDataProvider");
-  return { onEvent: t.onEvent };
-}, xe = () => {
-  const t = I.useContext(H);
-  if (!t)
-    throw new Error("usePageview() must be used within the InsightsMicroWidgetDataProvider");
-  return { onPageview: t.onPageview };
-}, Rt = {
-  LARGE: 180,
-  STANDARD: 154,
-  XLARGE: 200,
-  XXLARGE: 248
-}, Ot = 50, Be = 1, J = I.forwardRef(
-  function({
-    ariaLabel: e,
-    closeAriaLabel: n,
-    description: i,
-    elevation: r,
-    icon: l,
-    isActiveCard: a,
-    heightOverrides: u,
-    onClose: C,
-    onCardClick: E,
-    onPrimaryAction: h,
-    onSecondaryAction: d,
-    primaryActionText: _,
-    secondaryActionText: p,
-    title: g,
-    variant: y,
-    widthOverrides: S,
-    ...w
-  }, T) {
-    const A = !!(h && _), R = /* @__PURE__ */ N(Te, { children: [
-      C && /* @__PURE__ */ o(
-        rt,
-        {
-          "aria-label": n,
-          onClick: (m) => {
-            m.stopPropagation(), C?.();
-          },
-          onMouseDown: (m) => {
-            m.stopPropagation();
-          },
-          onTouchStart: (m) => {
-            m.stopPropagation();
-          },
-          sx: { minHeight: 40, minWidth: 40, position: "absolute", right: 4, top: 4 },
-          children: /* @__PURE__ */ o($e, {})
-        }
-      ),
-      /* @__PURE__ */ N(F, { sx: { gap: 6, height: "100%", justifyContent: "space-between" }, children: [
-        /* @__PURE__ */ N(F, { sx: { flexDirection: "row", gap: 12 }, children: [
-          l && l,
-          /* @__PURE__ */ N(F, { sx: { gap: 6 }, children: [
-            /* @__PURE__ */ o(F, { sx: { flexDirection: "row", justifyContent: "space-between" }, children: /* @__PURE__ */ o(pe, { bold: !0, sx: { lineHeight: "16px" }, variant: "body1", children: g }) }),
-            /* @__PURE__ */ o(
-              pe,
-              {
-                dangerouslySetInnerHTML: { __html: i },
-                sx: {
-                  display: "-webkit-box",
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
-                  WebkitBoxOrient: "vertical",
-                  WebkitLineClamp: A ? 2 : 3,
-                  "& .bold-copy": {
-                    fontWeight: "bold",
-                    fontFamily: "inherit"
-                  }
-                },
-                variant: "subtitle2"
-              }
-            )
-          ] })
-        ] }),
-        A && /* @__PURE__ */ N(
-          F,
-          {
-            sx: {
-              alignItems: "center",
-              flexDirection: "row",
-              height: 28,
-              pb: 4,
-              pl: l ? 36 : 0
-            },
-            children: [
-              A && /* @__PURE__ */ o(
-                ge,
-                {
-                  onClick: (m) => {
-                    m.stopPropagation(), h?.();
-                  },
-                  onMouseDown: (m) => {
-                    m.stopPropagation();
-                  },
-                  onTouchStart: (m) => {
-                    m.stopPropagation();
-                  },
-                  size: "small",
-                  sx: { px: 8, ml: l ? 0 : -8 },
-                  variant: "text",
-                  children: /* @__PURE__ */ o(me, { bold: !0, variant: "body2", children: _ })
-                }
-              ),
-              !!(d && p) && /* @__PURE__ */ o(
-                ge,
-                {
-                  onClick: (m) => {
-                    m.stopPropagation(), d?.();
-                  },
-                  onMouseDown: (m) => {
-                    m.stopPropagation();
-                  },
-                  onTouchStart: (m) => {
-                    m.stopPropagation();
-                  },
-                  size: "small",
-                  sx: { px: 8 },
-                  variant: "text",
-                  children: /* @__PURE__ */ o(me, { bold: !0, sx: { color: "text.secondary" }, variant: "body2", children: p })
-                }
-              )
-            ]
-          }
-        )
-      ] })
-    ] });
-    return /* @__PURE__ */ o(
-      ot,
-      {
-        "aria-hidden": !a,
-        "aria-label": e,
-        elevation: r,
-        ref: T,
-        role: "group",
-        sx: {
-          backgroundColor: "background.paper",
-          height: u ? "100%" : 120,
-          minWidth: S ? `${S}px` : "100%",
-          position: "relative",
-          my: 1,
-          borderRadius: 2
-        },
-        tabIndex: E || !a ? -1 : 0,
-        variant: y,
-        ...w,
-        children: E ? /* @__PURE__ */ o(
-          nt,
-          {
-            component: "div",
-            onClick: E,
-            sx: {
-              pb: 8,
-              pt: 16,
-              px: 16,
-              height: "100%"
-            },
-            children: R
-          }
-        ) : /* @__PURE__ */ o(it, { sx: { pb: 8, pt: 16, px: 16, height: "100%" }, children: R })
-      }
-    );
-  }
-), Wt = ({
-  ariaLabel: t,
-  beat: e,
-  elevation: n,
-  index: i,
-  isActiveCard: r,
-  onCardClick: l,
-  posthog: a,
-  widthOverrides: u,
-  variant: C,
-  showIcon: E,
-  heightOverrides: h
-}) => {
-  const { ref: d, inView: _ } = Oe({
-    threshold: Be
-  }), { cardsCopy: p } = D(), { onEvent: g } = $(), { updateBeat: y, updateOffer: S } = Tt();
-  re(() => {
-    _ && (e.has_been_displayed ? g(Ne(e.template)) : (e.guid.startsWith("OFR") ? S({
-      ...e,
-      has_been_displayed: !0
-    }) : y({
-      ...e,
-      has_been_displayed: !0
-    }), g(Me(e.template))));
-  }, [_]), re(() => {
-    if (_ && e)
-      if (e.template === "MarketingOffer") {
-        const T = e;
-        a?.capture("viewed_messaging_insight", {
-          template: e.template,
-          campaign_guid: T.campaign_guid,
-          campaign_name: T.pulse_campaign_name
-        });
-      } else
-        a?.capture("viewed_insight", {
-          beat_guid: e.guid,
-          template: e.template,
-          position: i
-        });
-  }, [e, i, _]);
-  const w = () => {
-    if (l && l(e), g(we(e.template)), e.template === "MarketingOffer") {
-      const T = e;
-      a?.capture("clicked_messaging_insight", {
-        template: e.template,
-        campaign_guid: T.campaign_guid,
-        campaign_name: T.pulse_campaign_name
-      });
-    } else
-      a?.capture("clicked_insight", {
-        beat_guid: e.guid,
-        template: e.template,
-        position: i
-      });
-  };
-  return /* @__PURE__ */ o(
-    J,
-    {
-      "aria-roledescription": "slide",
-      ariaLabel: t,
-      description: e?.html_micro_description && e?.html_micro_description.length > 0 ? e.html_micro_description : e.html_description || "",
-      elevation: n,
-      heightOverrides: h,
-      icon: E && /* @__PURE__ */ o(St, { beat: e }),
-      isActiveCard: r,
-      onCardClick: w,
-      onPrimaryAction: w,
-      primaryActionText: e.micro_call_to_action || p?.micro_card_cta,
-      ref: d,
-      title: e.micro_title && e.micro_title.length > 0 ? e.micro_title : e.title,
-      variant: C,
-      widthOverrides: u
-    }
-  );
-}, wt = ({
-  currentBeatIndex: t,
-  numBeats: e,
-  onNextClick: n,
-  onPreviousClick: i,
-  scrollRightBoundary: r,
-  scrollX: l,
-  shouldApplyDotAnimation: a = !1,
-  visibleCardsCount: u = 1
-}) => {
-  const C = P(), { carouselCopy: E } = D(), h = Math.floor(l) > r || t - u + 1 === 0, d = l < 0 || e - 1 === t, _ = C.palette.grey[500], p = C.palette.primary.main;
-  return /* @__PURE__ */ N(
-    k,
-    {
-      direction: "row",
-      sx: {
-        alignItems: "center",
-        justifyContent: "center",
-        pt: 4,
-        width: "100%",
-        // we were using `gap` instead of margin, but it doesn't work in safari browsers older than iOS 14.1
-        "& button:first-child": {
-          mr: 8
-        }
-      },
-      children: [
-        /* @__PURE__ */ o(
-          ue,
-          {
-            "aria-disabled": h,
-            "aria-label": E?.previous_insight_cta_aria,
-            disabled: h,
-            onClick: i,
-            children: /* @__PURE__ */ o(
-              je,
-              {
-                sx: {
-                  color: h ? _ : p
-                }
-              }
-            )
-          }
-        ),
-        Array.from({ length: e }).map((g, y) => {
-          const S = y === t;
-          return /* @__PURE__ */ o(
-            ae,
-            {
-              className: "mx-insights-micro-carousel-dots",
-              sx: {
-                bgcolor: S ? p : _,
-                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 ? {
-                  borderRadius: "4px",
-                  transformOrigin: "center",
-                  transition: "all 0.5s ease-out",
-                  willChange: "width, background-color"
-                } : {
-                  borderRadius: "50%",
-                  p: 0
-                },
-                width: S && a ? 24 : 8
-              }
-            },
-            `carousel-button-${y}`
-          );
-        }),
-        /* @__PURE__ */ o(
-          ue,
-          {
-            "aria-disabled": d,
-            "aria-label": E?.next_insight_cta_aria,
-            disabled: d,
-            onClick: n,
-            children: /* @__PURE__ */ o(
-              Re,
-              {
-                sx: {
-                  color: d ? _ : p
-                }
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-}, Nt = ({
-  activeCardIndex: t,
-  beats: e,
-  cardWidth: n,
-  elevation: i,
-  heightOverrides: r,
-  onCardClick: l,
-  posthog: a,
-  showIcon: u,
-  variant: C
-}) => {
-  const { carouselCopy: E } = D(), h = {
-    elevation: i,
-    heightOverrides: r,
-    posthog: a,
-    showIcon: u,
-    variant: C
-  };
-  return /* @__PURE__ */ N(Te, { children: [
-    e.map((d, _) => {
-      const p = _ + 1, g = e.length + 1, y = Ze(
-        E?.card_position_in_carousel_aria,
-        p.toString(),
-        g.toString()
-      ), S = d.micro_title && d.micro_title.length > 0, w = d.micro_description && d.micro_description.length > 0, T = S ? d.micro_title : d.title, A = w ? d.micro_description : d.description;
-      return /* @__PURE__ */ o(
-        Wt,
-        {
-          ariaLabel: `${y}: ${T}, ${A}`,
-          beat: d,
-          index: _,
-          isActiveCard: _ === t,
-          onCardClick: l,
-          widthOverrides: n || void 0,
-          ...h
-        },
-        `${d.guid} ${_}`
-      );
-    }),
-    /* @__PURE__ */ o(
-      Vt,
-      {
-        isActiveCard: t === e.length,
-        onCardClick: l,
-        widthOverrides: n || void 0,
-        ...h
-      }
-    )
-  ] });
-}, Mt = ({
-  analyticsMetadata: t,
-  allowSingleCardPeeking: e,
-  beats: n = [],
-  elevation: i,
-  heightOverrides: r,
-  onCardClick: l,
-  posthog: a,
-  showCarouselControls: u,
-  showIcon: C,
-  showWithMargin: E = !0,
-  variant: h,
-  widthOverrides: d,
-  visibleCardsCount: _ = 1
-  // Default to 1 card visible
-}) => {
-  const p = I.useRef(null), g = I.useRef(null), [y, S] = I.useState(0), [w, T] = I.useState(null), [A, ee] = I.useState(null), [R, m] = I.useState(null), { carouselCopy: j } = D(), { onEvent: M } = $();
-  I.useEffect(() => {
-    if (p.current && !e) {
-      const f = p.current.offsetWidth, z = 8;
-      let G;
-      if (_ > 1) {
-        const de = (f - (_ - 1) * z) / _ / 3;
-        G = (f - de - (_ - 1) * z) / _;
-      } else
-        G = f;
-      m(G);
-    }
-  }, [_, p.current?.offsetWidth]), I.useEffect(() => {
-    const f = g.current?.offsetWidth;
-    if (typeof f == "number" && e) {
-      const z = (K) => {
-        const _e = [
-          { maxWidth: 375, cardWidth: 268 },
-          { maxWidth: 444, cardWidth: 300 },
-          { maxWidth: 599, cardWidth: 350 },
-          { maxWidth: 749, cardWidth: 450 },
-          { maxWidth: 900, cardWidth: 600 }
-        ].find((Ge) => K <= Ge.maxWidth);
-        return _e ? _e.cardWidth : 750;
-      };
-      m(z(f));
-      const G = () => {
-        const K = g.current?.offsetWidth;
-        typeof K == "number" && m(z(K));
-      };
-      return window.addEventListener("resize", G), () => {
-        window.removeEventListener("resize", G);
-      };
-    }
-  }, [e, g]);
-  const V = () => {
-    M(W.ON_CAROUSEL_FORWARD_CLICK, t), p.current && R && p.current.scrollTo({
-      left: y + R + 8,
-      top: 0,
-      behavior: "smooth"
-    });
-  }, te = () => {
-    M(W.ON_CAROUSEL_BACK_CLICK, t), p.current && R && p.current.scrollTo({
-      left: Math.max(0, y - (R + 8)),
-      top: 0,
-      behavior: "smooth"
-    });
-  }, Y = () => {
-    p.current && S(p.current.scrollLeft);
-  }, X = () => {
-    if (!A || !w) return;
-    A - w > Ot ? M(W.ON_CAROUSEL_FORWARD_SWIPE, t) : M(W.ON_CAROUSEL_BACK_SWIPE, t);
-  }, oe = (f) => {
-    T(f.targetTouches[0].clientX);
-  }, ne = (f) => {
-    T(null), ee(f.targetTouches[0].clientX);
-  }, Z = R ? Math.round(y / (R + 8)) : 0, Q = p.current ? p.current.scrollWidth - p.current.offsetWidth : 0;
-  return /* @__PURE__ */ N(
-    k,
-    {
-      "aria-label": j?.carousel_title,
-      "aria-roledescription": "carousel",
-      ref: g,
-      role: "region",
-      sx: {
-        alignItems: "center",
-        boxSizing: "border-box",
-        height: r,
-        width: d || "100%"
-      },
-      children: [
-        /* @__PURE__ */ o(
-          k,
-          {
-            direction: "row",
-            onScroll: Y,
-            onTouchEnd: X,
-            onTouchMove: oe,
-            onTouchStart: ne,
-            ref: p,
-            sx: {
-              alignItems: "center",
-              height: r && "100%",
-              gap: 8,
-              listStyleType: "none",
-              m: 0,
-              maxWidth: E ? "calc(100% - 32px)" : "100%",
-              overflowX: "auto",
-              overflowY: "hidden",
-              p: 0,
-              scrollbarWidth: "none",
-              "-ms-overflow-style": "none",
-              "-webkit-overflow-scrolling": "touch",
-              "&::-webkit-scrollbar": {
-                display: "none"
-              }
-            },
-            children: /* @__PURE__ */ o(
-              Nt,
-              {
-                activeCardIndex: Z,
-                beats: n,
-                cardWidth: R,
-                elevation: i,
-                heightOverrides: r,
-                onCardClick: l,
-                posthog: a,
-                showIcon: C,
-                variant: h
-              }
-            )
-          }
-        ),
-        u && /* @__PURE__ */ o(
-          wt,
-          {
-            currentBeatIndex: Z + _ - 1,
-            numBeats: n.length + 1,
-            onNextClick: V,
-            onPreviousClick: te,
-            scrollRightBoundary: Q,
-            scrollX: y,
-            shouldApplyDotAnimation: e,
-            visibleCardsCount: _
-          }
-        )
-      ]
-    }
-  );
-}, vt = U(Mt), Lt = ({
-  analyticsMetadata: t,
-  onCardClick: e,
-  posthog: n,
-  widthOverrides: i,
-  headerSx: r
-}) => {
-  const { carouselCopy: l } = D(), { onEvent: a } = $(), u = () => {
-    a && (a(W.ON_VIEW_MORE_CLICKED, t), e(), n?.capture("clicked_view_more"));
-  };
-  return l ? /* @__PURE__ */ N(
-    k,
-    {
-      alignItems: "center",
-      direction: "row",
-      justifyContent: "space-between",
-      spacing: 2,
-      sx: {
-        p: 16,
-        pb: 8,
-        width: i || void 0,
-        ...r
-      },
-      children: [
-        /* @__PURE__ */ o(Fe, { children: l.carousel_title }),
-        /* @__PURE__ */ o(
-          ke,
-          {
-            endIcon: /* @__PURE__ */ o(Re, { size: 20 }),
-            onClick: u,
-            size: "small",
-            variant: "text",
-            children: l.view_all_insights_in_full_feed_cta_aria
-          }
-        )
-      ]
-    }
-  ) : /* @__PURE__ */ o(Ye, {});
-}, bt = U(Lt), Dt = ({
-  heightOverrides: t,
-  widthOverrides: e,
-  children: n
-}) => {
-  const { carouselCopy: i } = D();
-  return /* @__PURE__ */ o(
-    ae,
-    {
-      "aria-label": i?.carousel_title,
-      "aria-roledescription": "carousel",
-      role: "group",
-      sx: {
-        boxSizing: "border-box",
-        height: t ? void 0 : "100%",
-        m: "0 auto",
-        width: e ? void 0 : "100%"
-      },
-      children: n
-    }
-  );
-}, Pe = ({
-  ariaLabel: t,
-  elevation: e,
-  heightOverrides: n,
-  onCardClick: i,
-  posthog: r,
-  showIcon: l,
-  variant: a
-}) => {
-  const { cardsCopy: u } = D(), C = P(), { onEvent: E } = $(), { onPageview: h } = xe();
-  I.useEffect(() => {
-    h(B.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS);
-  }, []);
-  const d = () => {
-    i && i(), E(W.ON_NO_RELEVANT_INSIGHTS_CLICKED), r?.capture("clicked_insight", {
-      template: "no_relevant_insights"
-    });
-  };
-  return /* @__PURE__ */ o(
-    J,
-    {
-      ariaLabel: t,
-      description: u.no_relevant_insights_card_description,
-      elevation: e,
-      heightOverrides: n,
-      icon: l && /* @__PURE__ */ o(c, { bgColor: s(C.palette.primary.main, 0.15), name: "lightbulb" }),
-      onCardClick: d,
-      onPrimaryAction: d,
-      primaryActionText: u.micro_card_cta,
-      title: u.no_relevant_insights_card_title,
-      variant: a
-    }
-  );
-}, ao = U(Pe), Ve = ({
-  ariaLabel: t,
-  elevation: e,
-  heightOverrides: n,
-  onCardClick: i,
-  showIcon: r,
-  variant: l
-}) => {
-  const { onPageview: a } = xe(), { zeroStateCopy: u } = D(), C = P();
-  return I.useEffect(() => {
-    a(B.MICRO_WIDGET_CAROUSEL_ZERO_STATE);
-  }, []), /* @__PURE__ */ o(
-    J,
-    {
-      ariaLabel: t,
-      description: u.carousel_zero_state_description,
-      elevation: e,
-      heightOverrides: n,
-      icon: r && /* @__PURE__ */ o(c, { bgColor: s(C.palette.primary.main, 0.15), name: "lightbulb" }),
-      onCardClick: i,
-      title: u.carousel_zero_state_title,
-      variant: l
-    }
-  );
-}, so = U(Ve), xt = () => /* @__PURE__ */ o(
-  ae,
-  {
-    sx: {
-      alignItems: "center",
-      display: "flex",
-      height: "100%",
-      justifyContent: "center",
-      width: "100%"
-    },
-    children: /* @__PURE__ */ o(Qe, {})
-  }
-), Se = {
-  featureVersion: "spendVsIncomeTrends"
-}, x = new pt(), Bt = ({
-  allowSingleCardPeeking: t = !0,
-  areBeatsLoading: e = !1,
-  beats: n = [],
-  // This also determines the length of the carousel controls (beat.length + 1)
-  cardStyle: i = "elevation 1",
-  endpoint: r = "/",
-  headerSx: l,
-  heightOverrides: a,
-  logOutUser: u = () => {
-  },
-  onCardClick: C = () => {
-  },
-  onEvent: E = () => {
-  },
-  onPageview: h = () => {
-  },
-  posthog: d,
-  showCarouselControls: _,
-  showHeader: p,
-  showIcon: g,
-  showWithMargin: y = !0,
-  token: S = "",
-  userHasFullInsightFeedBeats: w,
-  visibleCardsCount: T = 1,
-  widthOverrides: A
-}) => {
-  const R = (() => {
-    if (i === "border") return "outlined";
-    if (i === "elevation 1") return "elevation";
-    if (i !== "flat")
-      return "elevation";
-  })(), m = i === "flat" ? 0 : 1, [j, M] = ie("STANDARD"), [V, te] = ie(!1), [Y, X] = ie(!1), oe = Je([E], x), ne = et([h], x);
-  tt({
-    widgetName: "InsightsMicroWidget",
-    isLoaded: V
-  }), I.useEffect(() => {
-    !x.isInitialized && !Y && (x.initialize(r, S, u).catch(() => X(!1)), X(!0));
-  }, [r, S, u, x.isInitialized, Y]), I.useEffect(() => {
-    const f = window.innerHeight;
-    f < 180 ? M("STANDARD") : f >= 180 && f < 200 ? M("LARGE") : f >= 200 && f < 248 ? M("XLARGE") : f >= 248 && M("XXLARGE");
-  }, [window.innerHeight]), I.useEffect(() => {
-    te(!e && x.isInitialized);
-  }, [e, x.isInitialized]);
-  const Z = {
-    heightOverrides: a,
-    onCardClick: C,
-    posthog: d,
-    showIcon: g,
-    showWithMargin: y,
-    widthOverrides: A
-  }, Q = {
-    carouselSize: j,
-    elevation: m,
-    variant: R,
-    heightOverrides: a,
-    onCardClick: C,
-    posthog: d,
-    showIcon: g
-  };
-  return /* @__PURE__ */ o(mt, { onEvent: oe, onPageview: ne, store: x, children: /* @__PURE__ */ N(Dt, { heightOverrides: a, widthOverrides: A, children: [
-    !V && /* @__PURE__ */ o(xt, {}),
-    V && p && /* @__PURE__ */ o(
-      bt,
-      {
-        analyticsMetadata: Se,
-        headerSx: l,
-        onCardClick: C,
-        posthog: d,
-        widthOverrides: A
-      }
-    ),
-    V && !!n.length && /* @__PURE__ */ o(
-      vt,
-      {
-        allowSingleCardPeeking: t,
-        analyticsMetadata: Se,
-        beats: n,
-        elevation: m,
-        showCarouselControls: _,
-        variant: R,
-        visibleCardsCount: T,
-        ...Z
-      }
-    ),
-    V && !n.length && /* @__PURE__ */ o(
-      k,
-      {
-        sx: {
-          alignItems: "center",
-          height: a,
-          width: A || "100%"
-        },
-        children: /* @__PURE__ */ o(
-          k,
-          {
-            sx: {
-              height: `calc(${Rt[j]}px - 44px)`,
-              width: y ? `calc(${A}px - 32px)` : "100%"
-            },
-            children: w ? /* @__PURE__ */ o(Pe, { ...Q }) : /* @__PURE__ */ o(Ve, { ...Q })
-          }
-        )
-      }
-    )
-  ] }) });
-}, co = U(Bt), Pt = ({
-  ariaLabel: t,
-  elevation: e,
-  heightOverrides: n,
-  isActiveCard: i,
-  onCardClick: r,
-  posthog: l,
-  widthOverrides: a,
-  showIcon: u,
-  variant: C
-}) => {
-  const E = P(), { ref: h, inView: d } = Oe({
-    threshold: Be
-  }), { cardsCopy: _ } = D(), { onEvent: p } = $();
-  re(() => {
-    d && (p(ve.ON_VIEW_MORE_VIEWED), l?.capture("viewed_insight", {
-      template: "view_more_card"
-    }));
-  }, [d]);
-  const g = () => {
-    r && r(), p(W.ON_VIEW_MORE_CLICKED), l?.capture("clicked_insight", {
-      template: "view_more_card"
-    });
-  };
-  return /* @__PURE__ */ o(
-    J,
-    {
-      "aria-roledescription": "slide",
-      ariaLabel: t,
-      description: _?.view_more_card_description,
-      elevation: e,
-      heightOverrides: n,
-      icon: u && /* @__PURE__ */ o(c, { bgColor: s(E.palette.primary.main, 0.15), name: "show_chart" }),
-      isActiveCard: i,
-      onCardClick: g,
-      onPrimaryAction: g,
-      primaryActionText: _?.micro_card_cta,
-      ref: h,
-      title: _?.view_more_card_title,
-      variant: C,
-      widthOverrides: a
-    }
-  );
-}, Vt = U(Pt);
-export {
-  pt as A,
-  c as B,
-  bt as C,
-  Wt as I,
-  vt as M,
-  ao as N,
-  Se as T,
-  Vt as V,
-  so as Z,
-  co as a,
-  mt as b,
-  J as c,
-  It as d
-};