@mx-cartographer/experiences 8.2.1 → 8.2.3

package/dist/ViewMoreMicroCard-D_LoKlJU.mjs

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