@mx-cartographer/experiences 9.2.4-alpha.al0 → 9.3.0-alpha.bb1

package/dist/ViewMoreMicroCard-B4oeGrbE.mjs

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