@mx-cartographer/experiences 8.2.1 → 8.2.3

package/dist/ViewMoreMicroCard-K69RRs_b.mjs

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