@zeniai/web-components 3.17.6 → 3.17.7

package/dist/ChargeCardPromoPage-B1x5Aijx.js

@@ -0,0 +1,816 @@
+import { j as t, u as W } from "./vendor-.pnpm-B2klaOGU.js";
+import { useState as N, useEffect as E } from "react";
+import { css as je, keyframes as Se } from "@emotion/react";
+import i from "@emotion/styled";
+import { hasChargeCardAdminLevelAccess as ye } from "@zeniai/client-epic-state";
+import { u as j, a as se, dB as ve, dD as Te, aD as ze, a2 as Be, i8 as Pe, aE as Ae, hH as ke, B as te, e as ne, S as n, H as Ie, ai as X, fi as Le, V as Me, R as c, v as _e, Z as Re, k9 as De, F as Fe, D as l, aw as y, C as $, n as Ue, a7 as He, ka as Ne } from "./index-CH2cBxe4.js";
+import { N as Ee } from "./NavigationDots-BoQJ4njg.js";
+import { M as G, P as O } from "./PromoBaseCards-CWAEjT5v.js";
+import { S as L } from "./usp-line-BBd1wKwW.js";
+const x = {
+  midContainerMarginBottom: new c(l[5], l[7]),
+  containerPaddingTopBottom: new c(l[0], l[0]),
+  containerPaddingLeftRight: new c(l[3], l[8]),
+  plasticCardMarginLeft: new c(l[6], 120),
+  businessTextRight: new c(l[2], 13),
+  businessTextBottom: new c(l[8], 81),
+  styledFullLogoRight: new c(l[2], 13),
+  chipLogoHeight: new c(l[4], 39),
+  visaLogoRight: new c(l[2], 13),
+  visaLogoBottom: new c(l[2], 13),
+  uspContainerMarginX: new c(l[6], l[0]),
+  midContainerGap: new c(l[4], 84),
+  iconContainerMinHeight: new c(236, 396),
+  emptySectionHeight: new c(l[6], 43),
+  navigationBottom: new c(l[4], 94),
+  navigationLeft: new c(192, 244),
+  carouselHeight: new c(268, 396),
+  carouselMarginTop: new c(54, l[4]),
+  carouselMarginLeft: new c(120, l[12]),
+  buttonTrayGap: new c(l[3], l[5]),
+  termsOfAgreementMarginTop: new c(l[5], l[10]),
+  contactAdminContainerMarginTop: new c(l[0], l[10]),
+  contactAdminContainerMarginBottom: new c(l[4], l[0]),
+  contactAdminContainerMarginLeftRight: new c(l[3], l[0])
+}, v = {
+  promoBadgeText: new y("standardRegular", "largeRegular"),
+  promoBadgeTextBold: new y("standardBold", "largeBold"),
+  cardsContent: new y("extraSmallRegular", "smallRegular"),
+  contactAdmin: new y("extraSmallRegular", "largeRegular"),
+  uspText: new y("smallRegular", "standardRegular"),
+  uspBoldText: new y("smallMedium", "standardMedium")
+}, {
+  common: U,
+  spendManagement: {
+    chargeCard: { chargeCardsPromo: r }
+  }
+} = se.getLocalizedStrings(), It = ({
+  meetingUrl: e,
+  companyLegalName: a,
+  chargeCardSetupView: o,
+  showEnableCardButton: s,
+  controllerEmails: p,
+  isCreditCardProductVisible: g,
+  isDebitCardFeatureEnabled: h,
+  isDebitCardSetupEnabled: u,
+  isChargeCardSetupEnabled: C,
+  admins: S,
+  cashbackRate: z,
+  cardPromoType: f = "credit",
+  isCheckingEnabled: m,
+  onSetupButtonClick: d,
+  onBackClick: Y,
+  onClickMenuIcon: ge,
+  onSetupChargeCardSuccess: Z,
+  onExpressInterestClick: xe
+}) => {
+  const he = W(), J = ve(), T = j(), q = Te().analytics, { chargeCardTermsDetails: M, companyChargeCardInfo: w, companyLocaleInfo: _ } = o, K = ze(
+    M?.fetchStatus.fetchState
+  ), [ue, Q] = N(!1), Ce = () => {
+    q.trackCardsPromoPageClicked("schedule demo"), q.trackCardsScheduleDemoClick(
+      p,
+      {
+        isCreditCardOffered: g,
+        isDebitCardOffered: h,
+        isDebitCardEnabled: u,
+        isCreditCardEnabled: C
+      },
+      "Cards Promo"
+    ), Q(!0);
+  }, fe = w != null && _ != null ? Be("0,0", {
+    amount: w.chargeCardsCreditAccountLimit,
+    currencyCode: _.currencyCode,
+    currencySymbol: _.currencySymbol
+  }) : void 0;
+  E(() => {
+    K === "In-Progress" && M?.fetchStatus.fetchState === "Completed" && Z();
+  }, [
+    K,
+    Z,
+    M?.fetchStatus
+  ]);
+  const V = ye(
+    J.loggedInUserRoleMap
+  ), we = Pe(J), R = f === "credit" && w?.isCompanyInterestedInChargeCard === !1 && w.chargeCardsCreditAccountLimit === 0, D = f === "credit" && w?.isCompanyInterestedInChargeCard === !0 && w.chargeCardsCreditAccountLimit === -1, F = f === "credit" && w?.isCompanyInterestedInChargeCard === !0 && w.chargeCardsCreditAccountLimit === 0, $e = f === "credit" && w?.isCompanyInterestedInChargeCard === !0 && w.chargeCardsCreditAccountLimit > 0, { expressInterestInChargeCardFetchState: be } = o, ee = R ? r.getPreApprovedNow : s ? r.enableCardsButton : r.setupCardsButton;
+  return /* @__PURE__ */ t.jsxs(Ze, { children: [
+    /* @__PURE__ */ t.jsx(
+      Ae,
+      {
+        title: r.title[f],
+        backgroundColor: he.colors.grey4,
+        onBackClick: Y,
+        showBackButton: !0,
+        showMenuIcon: T === "medium-compact" || T === "small",
+        onClickMenuIcon: ge,
+        style: { zIndex: 9 },
+        source: "ChargeCardPromoPage"
+      }
+    ),
+    ue === !0 ? /* @__PURE__ */ t.jsx(
+      ke,
+      {
+        onCancelClick: () => {
+          Q(!1);
+        },
+        meetingUrl: e
+      }
+    ) : null,
+    /* @__PURE__ */ t.jsx(Qe, { windowSize: T, children: V === !0 ? /* @__PURE__ */ t.jsxs(Ke, { children: [
+      /* @__PURE__ */ t.jsxs(qe, { children: [
+        /* @__PURE__ */ t.jsx(
+          Oe,
+          {
+            isApproved: $e,
+            creditAmount: fe,
+            cardPromoType: f,
+            isUnderReview: F,
+            isRejected: D,
+            showExpressInterest: R,
+            creditLimit: w?.chargeCardsCreditAccountLimit
+          }
+        ),
+        /* @__PURE__ */ t.jsx(
+          le,
+          {
+            cardPromoType: f,
+            cashbackRate: z
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t.jsx(
+        ae,
+        {
+          showEnableCardButton: s,
+          cardPromoType: f,
+          isUnderReview: F,
+          isRejected: D,
+          showExpressInterest: R,
+          isCheckingEnabled: m
+        }
+      )
+    ] }) : /* @__PURE__ */ t.jsx(
+      We,
+      {
+        companyLegalName: a,
+        cards: [],
+        admins: S,
+        cashbackRate: z,
+        hasZeniFinopsRoles: we,
+        cardPromoType: f,
+        isCheckingEnabled: m
+      }
+    ) }),
+    V && !(F || D) ? /* @__PURE__ */ t.jsxs(it, { windowSize: T, children: [
+      /* @__PURE__ */ t.jsx(
+        te,
+        {
+          variant: "secondary",
+          label: r.scheduleDemoButton,
+          style: { width: 166 },
+          onClick: Ce,
+          "data-testid": ne("schedule-demo-button")
+        }
+      ),
+      /* @__PURE__ */ t.jsx(Je, { windowSize: T, children: r.orText }),
+      /* @__PURE__ */ t.jsx(
+        te,
+        {
+          variant: "primary",
+          label: ee,
+          style: { minWidth: 166 },
+          loading: o.chargeCardTermsDetails?.fetchStatus.fetchState === "In-Progress" || be === "In-Progress",
+          onClick: ee === r.getPreApprovedNow ? xe : () => d(f),
+          "data-testid": ne("enable-card-button")
+        }
+      )
+    ] }) : null
+  ] });
+}, Ge = ({ admins: e }) => {
+  const a = e.flatMap((s) => s.user?.firstName + " " + s.user?.lastName).join(", "), o = j();
+  return /* @__PURE__ */ t.jsxs(gt, { windowSize: o, children: [
+    /* @__PURE__ */ t.jsx(H, { underline: !1, windowSize: o, children: r.noCardAssigned.pre }),
+    /* @__PURE__ */ t.jsx(
+      Re,
+      {
+        title: a,
+        placement: "top-start",
+        style: { padding: `2px ${n.sp2}` },
+        children: /* @__PURE__ */ t.jsx(H, { underline: !0, windowSize: o, children: r.noCardAssigned.tooltip })
+      }
+    ),
+    /* @__PURE__ */ t.jsx(H, { underline: !1, windowSize: o, children: r.noCardAssigned.post })
+  ] });
+}, ae = ({
+  cardPromoType: e,
+  showEnableCardButton: a,
+  isCheckingEnabled: o,
+  isUnderReview: s,
+  isRejected: p,
+  showExpressInterest: g,
+  isCardUser: h = !1
+}) => {
+  const u = j();
+  return /* @__PURE__ */ t.jsx(rt, { windowSize: u, children: /* @__PURE__ */ t.jsx(
+    De,
+    {
+      topTermLabel: r.terms.checkingAccountTerm,
+      buttonTermLabel: s === !0 || p === !0 || h === !0 ? void 0 : g === !0 ? r.terms.getPreApprovedNowTerm : a ? r.terms.alternateTerm1 : r.terms.terms1,
+      showEndIcon: !1,
+      showTerms: p === !1 && h === !1 && s === !1,
+      style: { marginTop: x.termsOfAgreementMarginTop.valuePx(u) },
+      cardPromoType: e,
+      isCheckingEnabled: o
+    }
+  ) });
+}, Oe = ({
+  isApproved: e,
+  cardPromoType: a,
+  creditAmount: o,
+  isUnderReview: s,
+  isRejected: p,
+  showExpressInterest: g,
+  creditLimit: h
+}) => {
+  const u = j(), C = a === "debit_and_credit" ? r.promoTextDebitCreditCard : a === "debit" ? r.promoTextDebitCard : r.promoTextCreditCard, S = e ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    r.promoBadgeText.approved,
+    /* @__PURE__ */ t.jsx(re, { children: o }),
+    r.creditLimit,
+    U.strings.space
+  ] }) : g ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    r.promoBadgeText.nonPreApproved.get,
+    /* @__PURE__ */ t.jsx(nt, { children: r.promoBadgeText.nonPreApproved.scale }),
+    r.promoBadgeText.nonPreApproved.doubleStarred,
+    U.strings.space,
+    r.promoBadgeText.nonPreApproved.higherLimits
+  ] }) : s ? r.promoBadgeText.underReview : p ? r.promoBadgeText.rejected : a === "debit_and_credit" && h === 0 ? null : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    r.promoBadgeText.preApproved,
+    /* @__PURE__ */ t.jsx(re, { children: o }),
+    r.creditLimit,
+    U.strings.space
+  ] });
+  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsx(t.Fragment, { children: u === "small" ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+      /* @__PURE__ */ t.jsx(me, { children: C }),
+      /* @__PURE__ */ t.jsx(pe, { children: r.promoSubText })
+    ] }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+      /* @__PURE__ */ t.jsx(de, { children: C }),
+      /* @__PURE__ */ t.jsx(ce, { children: r.promoSubText })
+    ] }) }),
+    /* @__PURE__ */ t.jsxs(
+      et,
+      {
+        cardPromoType: a,
+        hasContent: S != null,
+        hideBadge: o == null || a === "debit",
+        windowSize: u,
+        children: [
+          s || p || g ? null : /* @__PURE__ */ t.jsx(bt, {}),
+          /* @__PURE__ */ t.jsx(tt, { windowSize: u, children: S })
+        ]
+      }
+    )
+  ] });
+}, We = ({
+  companyLegalName: e,
+  cards: a,
+  admins: o,
+  cashbackRate: s,
+  hasZeniFinopsRoles: p,
+  cardPromoType: g = "credit",
+  isCheckingEnabled: h
+}) => {
+  const u = j(), C = g === "debit_and_credit" ? r.promoTextDebitCreditCard : g === "debit" ? r.promoTextDebitCard : r.promoTextCreditCard;
+  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    u === "small" ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+      /* @__PURE__ */ t.jsx(me, { children: C }),
+      /* @__PURE__ */ t.jsx(pe, { children: r.promoSubText })
+    ] }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+      /* @__PURE__ */ t.jsx(de, { children: C }),
+      /* @__PURE__ */ t.jsx(ce, { children: r.promoSubText })
+    ] }),
+    a.length === 0 ? /* @__PURE__ */ t.jsx(pt, { windowSize: u }) : /* @__PURE__ */ t.jsx(Xe, { cards: a, companyLegalName: e }),
+    /* @__PURE__ */ t.jsx(le, { cardPromoType: g, cashbackRate: s }),
+    p ? null : /* @__PURE__ */ t.jsx(Ge, { admins: o }),
+    /* @__PURE__ */ t.jsx(
+      ae,
+      {
+        isCardUser: !0,
+        showEnableCardButton: !1,
+        cardPromoType: g,
+        isCheckingEnabled: h
+      }
+    )
+  ] });
+}, Xe = ({
+  cards: e,
+  companyLegalName: a
+}) => {
+  const o = W(), s = j();
+  let p = "", g;
+  if (e.length === 1) {
+    g = e[0].cardCreatedByUser.photo;
+    const h = e[0].cardCreatedByUser.firstName + " " + e[0].cardCreatedByUser.lastName;
+    p = r.cardAssigned.singleCreditCard.replace("__issuing-user__", h).replace("__company-name__", a);
+  } else
+    p = r.cardAssigned.multipleCreditCards.replace(
+      "__company-name__",
+      a
+    );
+  return /* @__PURE__ */ t.jsxs(ht, { children: [
+    g != null ? /* @__PURE__ */ t.jsx(
+      Ve,
+      {
+        width: n.sp5,
+        height: n.sp5,
+        style: {
+          paddingTop: s === "small" ? n.sp1 : n.sp0
+        },
+        src: g.href,
+        alt: se.getLocalizedStrings().cockpit.userProfileAltText,
+        onError: ({ currentTarget: h }) => {
+          h.onerror = null, h.src = _e;
+        },
+        loading: "lazy"
+      }
+    ) : null,
+    /* @__PURE__ */ t.jsx(xt, { windowSize: s, mode: o.mode, children: /* @__PURE__ */ t.jsx(ut, { windowSize: s, children: p }) })
+  ] });
+}, oe = ({
+  windowSize: e,
+  cardPromoType: a
+}) => {
+  let o = r.businessText;
+  return a === "debit" && (o = `${o} ${r.debit}`), /* @__PURE__ */ t.jsx(t.Fragment, { children: a === "debit_and_credit" ? /* @__PURE__ */ t.jsx(Ye, {}) : /* @__PURE__ */ t.jsxs(at, { windowSize: e, children: [
+    /* @__PURE__ */ t.jsx(
+      G,
+      {
+        cardPromoType: a,
+        cardText: o,
+        shouldAnimate: !0,
+        showChip: !0,
+        forDashboard: !1,
+        forListPage: !1
+      }
+    ),
+    /* @__PURE__ */ t.jsx(
+      O,
+      {
+        cardPromoType: a,
+        cardText: o,
+        showChip: !0,
+        forDashboard: !1,
+        shouldAnimate: !0,
+        forListPage: !1
+      }
+    )
+  ] }) });
+}, le = ({
+  cardPromoType: e,
+  cashbackRate: a
+}) => {
+  const o = j(), s = r.benefits;
+  return /* @__PURE__ */ t.jsxs(ot, { windowSize: o, children: [
+    o === "small" ? /* @__PURE__ */ t.jsx(oe, { windowSize: o, cardPromoType: e }) : null,
+    /* @__PURE__ */ t.jsxs(st, { windowSize: o, children: [
+      /* @__PURE__ */ t.jsxs(P, { windowSize: o, children: [
+        /* @__PURE__ */ t.jsx(k, { children: /* @__PURE__ */ t.jsx(ct, {}) }),
+        /* @__PURE__ */ t.jsxs(I, { children: [
+          /* @__PURE__ */ t.jsx(b, { windowSize: o, children: s.item1.pre }),
+          /* @__PURE__ */ t.jsx(A, { windowSize: o, children: s.item1.bold.replace(
+            "__cashback__",
+            (a * 100).toFixed(2)
+          ) }),
+          /* @__PURE__ */ t.jsx(
+            b,
+            {
+              windowSize: o,
+              children: `${e === "credit" || e === "debit_and_credit" ? s.singleStarred : ""}${s.item1.post}`
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ t.jsxs(P, { windowSize: o, children: [
+        /* @__PURE__ */ t.jsx(k, { children: /* @__PURE__ */ t.jsx(lt, {}) }),
+        /* @__PURE__ */ t.jsxs(I, { children: [
+          /* @__PURE__ */ t.jsx(b, { windowSize: o, children: s.item2.pre }),
+          /* @__PURE__ */ t.jsx(A, { windowSize: o, children: s.item2.bold }),
+          /* @__PURE__ */ t.jsx(b, { windowSize: o, children: s.item2.post })
+        ] })
+      ] }),
+      /* @__PURE__ */ t.jsxs(P, { windowSize: o, children: [
+        /* @__PURE__ */ t.jsx(k, { children: /* @__PURE__ */ t.jsx(mt, {}) }),
+        /* @__PURE__ */ t.jsxs(I, { children: [
+          /* @__PURE__ */ t.jsx(b, { windowSize: o, children: s.item3.pre }),
+          /* @__PURE__ */ t.jsx(A, { windowSize: o, children: s.item3.bold }),
+          /* @__PURE__ */ t.jsx(b, { windowSize: o, children: s.item3.post })
+        ] })
+      ] }),
+      /* @__PURE__ */ t.jsxs(P, { windowSize: o, children: [
+        /* @__PURE__ */ t.jsx(k, { children: /* @__PURE__ */ t.jsx(dt, {}) }),
+        /* @__PURE__ */ t.jsxs(I, { children: [
+          /* @__PURE__ */ t.jsx(b, { windowSize: o, children: s.item4.pre }),
+          /* @__PURE__ */ t.jsx(A, { windowSize: o, children: s.item4.bold }),
+          /* @__PURE__ */ t.jsx(b, { windowSize: o, children: s.item4.post })
+        ] })
+      ] })
+    ] }),
+    o === "small" ? null : /* @__PURE__ */ t.jsx(oe, { windowSize: o, cardPromoType: e })
+  ] });
+};
+let B;
+const Ye = () => {
+  const e = j(), a = W(), [o, s] = N(0), [p, g] = N(!1), h = r.businessText, u = `${h} ${r.debit}`, C = [
+    { id: 1, cardType: "debit", cardText: u },
+    { id: 2, cardType: "debit", cardText: u },
+    { id: 3, cardType: "credit", cardText: h },
+    { id: 4, cardType: "credit", cardText: h }
+  ];
+  E(() => (p || (B = setInterval(() => {
+    s((m) => {
+      const d = m + 1;
+      return d === C.length ? (g(!0), 0) : d;
+    });
+  }, 2e3)), () => clearInterval(B)), [p, C.length]), E(() => {
+    p && B != null && clearInterval(B);
+  }, [p]);
+  const S = (m, d) => {
+    switch ((m - o + C.length) % C.length) {
+      case 0:
+        return {
+          transform: `translate(0,${d ? "100%" : 0}) scale(1)`,
+          zIndex: d ? 5 : 6,
+          opacity: 1,
+          transition: "transform 0.4s"
+        };
+      case 1:
+        return {
+          transform: `translate(35%, ${d ? "80%" : "5%"}) scale(0.75)`,
+          zIndex: d ? 4 : 5,
+          opacity: 1,
+          transition: "all 0.4s"
+        };
+      case 2:
+        return {
+          transform: `translate(35%,${d ? "80%" : "5%"}) scale(0.75)`,
+          zIndex: d ? 3 : 4,
+          opacity: 0,
+          transition: "transform 0.4s 0.2s, opacity 0.4s 0.0s"
+        };
+      case 3:
+        return {
+          transform: `translate(-35%, ${d ? "80%" : "5%"}) scale(0.75)`,
+          zIndex: d ? 4 : 5,
+          opacity: 1,
+          transition: "all 0.4s"
+        };
+      default:
+        return;
+    }
+  }, z = (m) => {
+    const d = S(m, !0);
+    return {
+      ...d,
+      transform: `${d?.transform} scaleY(-1)`,
+      opacity: 1,
+      transition: "transform 0s 0s, z-index 0s 0s"
+    };
+  }, f = (m) => {
+    p || g(!0), s(m);
+  };
+  return /* @__PURE__ */ t.jsxs(Ct, { windowSize: e, children: [
+    /* @__PURE__ */ t.jsx(ft, { windowSize: e, children: C.map((m, d) => /* @__PURE__ */ t.jsxs(wt, { children: [
+      /* @__PURE__ */ t.jsx(
+        ie,
+        {
+          isReflection: !1,
+          style: { ...S(d, !1) },
+          onClick: () => f(d),
+          children: d === 0 || d === 2 ? /* @__PURE__ */ t.jsx(
+            G,
+            {
+              cardPromoType: m.cardType,
+              cardText: m.cardText,
+              shouldAnimate: !1,
+              showChip: !0,
+              forDashboard: !1,
+              forListPage: !1,
+              style: {
+                borderColor: a.colors.grey2,
+                ...a.mode === "light" && {
+                  borderBottom: "none"
+                }
+              }
+            }
+          ) : /* @__PURE__ */ t.jsx(
+            O,
+            {
+              cardPromoType: m.cardType,
+              cardText: m.cardText,
+              shouldAnimate: !1,
+              showChip: !0,
+              forDashboard: !1,
+              forListPage: !1,
+              style: {
+                borderColor: a.colors.grey2,
+                ...a.mode === "light" && {
+                  borderBottom: "none"
+                }
+              }
+            }
+          )
+        },
+        m.id
+      ),
+      /* @__PURE__ */ t.jsx(
+        ie,
+        {
+          isReflection: !0,
+          style: {
+            ...z(d)
+          },
+          children: d === 0 || d === 2 ? /* @__PURE__ */ t.jsx(
+            G,
+            {
+              cardPromoType: m.cardType,
+              cardText: m.cardText,
+              shouldAnimate: !1,
+              forDashboard: !1,
+              showChip: !0,
+              forListPage: !1,
+              style: {
+                border: "none",
+                opacity: 0.1,
+                maskImage: "linear-gradient(to top, black, transparent 90%)",
+                WebkitMaskImage: "linear-gradient(to top, black, transparent 90%)"
+              }
+            }
+          ) : /* @__PURE__ */ t.jsx(
+            O,
+            {
+              cardPromoType: m.cardType,
+              cardText: m.cardText,
+              showChip: !0,
+              shouldAnimate: !1,
+              forDashboard: !1,
+              forListPage: !1,
+              style: {
+                border: "none",
+                opacity: 0.1,
+                maskImage: "linear-gradient(to top, black, transparent)",
+                WebkitMaskImage: "linear-gradient(to top, black, transparent)"
+              }
+            }
+          )
+        },
+        `reflection-${m.id}`
+      )
+    ] }, m.id)) }),
+    p && /* @__PURE__ */ t.jsx(
+      Ee,
+      {
+        numberOfDots: C.length,
+        activeIndex: o,
+        handleClick: s,
+        promoColor: a.colors.primary,
+        promoColorHover: a.colors.grey5,
+        spendManagementPromoCardActive: !0,
+        dotStyle: {
+          width: n.sp2,
+          height: n.sp2
+        },
+        style: {
+          cursor: "default",
+          position: "absolute",
+          bottom: x.navigationBottom.valuePx(e),
+          left: x.navigationLeft.valuePx(e),
+          zIndex: 7
+        }
+      }
+    )
+  ] });
+}, Ze = i.div`
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 100%;
+  flex-direction: column;
+  background-color: ${(e) => e.theme.colors.grey4};
+`, Je = i(Fe)`
+  color: ${(e) => e.theme.colors.hero};
+`, qe = i.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`, Ke = i.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex: 1;
+  width: 100%;
+`, Qe = i.div`
+  padding-top: ${(e) => x.containerPaddingTopBottom.valuePx(e.windowSize)};
+  padding-bottom: ${(e) => x.containerPaddingTopBottom.valuePx(e.windowSize)};
+  text-align: center;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
+`, de = i(Le)`
+  max-width: 927px;
+  margin: auto;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  padding: ${n.sp7} ${n.sp0} ${n.sp0} ${n.sp0};
+  color: ${(e) => e.theme.colors.primary};
+`, ce = i(Me)`
+  color: ${(e) => e.theme.colors.primary};
+  margin: auto;
+  margin-top: ${n.sp2};
+`, me = i(Ie)`
+  margin: auto;
+  max-width: 343px;
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  flex-wrap: wrap;
+  padding: ${n.sp5} ${n.sp0} ${n.sp0} ${n.sp0};
+  color: ${(e) => e.theme.colors.primary};
+`, pe = i(X)`
+  max-width: 314px;
+  margin: auto;
+  color: ${(e) => e.theme.colors.primary};
+  padding: 6px ${n.sp3} ${n.sp0} ${n.sp3};
+  text-align: center;
+  margin-top: 6px;
+`, Ve = i.img`
+  border-radius: 50%;
+  justify-content: center;
+  color: ${(e) => e.theme.colors.hero};
+`, et = i.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+  padding: ${(e) => e.hasContent ? `${n.sp2} ${n.sp3}` : n.sp0};
+  background-color: ${(e) => e.theme.colors.grey3};
+  border-radius: 96px;
+  margin-top: ${n.sp4};
+  margin-left: ${(e) => e.windowSize === "small" ? n.sp3 : "auto"};
+  margin-right: ${(e) => e.windowSize === "small" ? n.sp3 : "auto"};
+  margin-bottom: ${(e) => e.cardPromoType === "debit_and_credit" && e.windowSize === "small" ? n.sp0 : n.sp6};
+  width: fit-content;
+  gap: ${n.sp1};
+  ${(e) => e.hideBadge && `
+    visibility: hidden;
+    `}
+`, tt = i(X)`
+  color: ${(e) => e.theme.mode === "dark" ? $.brandColorJade : $.brandColorSapphire};
+  text-align: ${(e) => e.windowSize === "small" ? "left" : "center"};
+  ${(e) => `${v.promoBadgeText.style(e.windowSize)}`};
+  span {
+    ${(e) => `${v.promoBadgeTextBold.style(e.windowSize)}`};
+  }
+`, nt = i.span``, re = i.span`
+  color: ${$.success};
+`, ot = i.div`
+  display: flex;
+  gap: ${(e) => x.midContainerGap.valuePx(e.windowSize)};
+  flex-direction: ${(e) => e.windowSize === "small" ? "column" : "row"};
+  align-items: center;
+  justify-content: center;
+`, rt = i.div`
+  display: flex;
+  flex-direction: column;
+`, it = i.div`
+  border-top: 1px solid ${(e) => e.theme.colors.grey3};
+  padding: ${n.sp2} ${n.sp3};
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 8;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+  row-gap: ${n.sp2};
+  background-color: ${(e) => e.theme.colors.grey5};
+  gap: ${(e) => x.buttonTrayGap.valuePx(e.windowSize)};
+`, st = i.div`
+  width: ${(e) => e.windowSize === "small" ? "auto" : "288px"};
+  display: flex;
+  flex-direction: column;
+  margin-left: ${(e) => x.uspContainerMarginX.valuePx(e.windowSize)};
+  margin-right: ${(e) => x.uspContainerMarginX.valuePx(e.windowSize)};
+  z-index: 8;
+`, at = i.div`
+  display: flex;
+  justify-content: ${(e) => e.windowSize === "small" ? "center" : "flex-start"};
+  min-height: ${(e) => x.iconContainerMinHeight.valuePx(e.windowSize)};
+  align-items: center;
+  min-width: 480px;
+`, P = i.div`
+  border-radius: ${n.sp12};
+  border: ${(e) => `1px solid ${e.theme.colors.grey2}`};
+  padding: ${(e) => e.windowSize === "small" ? `${n.sp2} ${n.sp4} ${n.sp2} ${n.sp0}` : `${n.sp3} ${n.sp5} ${n.sp3} ${n.sp0}`};
+  background: ${(e) => e.theme.colors.grey5};
+  position: relative;
+  margin-bottom: ${n.sp3};
+  display: flex;
+  align-items: center;
+  text-align: start;
+  width: ${(e) => e.windowSize === "small" ? "288px" : "100%"};
+  min-height: ${(e) => e.windowSize !== "small" ? "83px" : "44px"};
+  box-sizing: ${(e) => e.windowSize === "small" ? "unset" : "border-box"};
+`, b = i(Ue)`
+  color: ${(e) => e.theme.colors.champion};
+  ${(e) => `${v.uspText.style(e.windowSize)}`};
+`, A = i(He)`
+  color: ${(e) => e.theme.colors.champion};
+  ${(e) => `${v.uspBoldText.style(e.windowSize)}`};
+`, k = i.div``, I = i.div`
+  padding-left: ${n.sp3};
+`, lt = i(L)`
+  color: ${$.graphColor16Dark};
+`, dt = i(L)`
+  color: ${$.alert};
+`, ct = i(L)`
+  color: ${$.graphColor11};
+`, mt = i(L)`
+  color: ${$.success};
+`, pt = i.div`
+  height: ${(e) => x.emptySectionHeight.valuePx(e.windowSize)};
+  ${(e) => e.windowSize === "small" ? null : je`
+          margin-top: ${n.sp4};
+          margin-bottom: ${n.sp6};
+        `}
+`, gt = i(X)`
+  color: ${(e) => e.theme.colors.hero};
+  margin-top: ${(e) => x.contactAdminContainerMarginTop.valuePx(e.windowSize)};
+  margin-bottom: ${(e) => x.contactAdminContainerMarginBottom.valuePx(e.windowSize)};
+  margin-left: ${(e) => x.contactAdminContainerMarginLeftRight.valuePx(e.windowSize)};
+  margin-right: ${(e) => x.contactAdminContainerMarginLeftRight.valuePx(e.windowSize)};
+  text-align: center;
+`, H = i(Ne)`
+  ${(e) => `${v.contactAdmin.style(e.windowSize)}`};
+  text-decoration: ${(e) => e.underline ? "underline" : "none"};
+  cursor: ${(e) => e.underline ? "default" : null};
+`, xt = i.div`
+  color: ${(e) => e.mode === "dark" ? e.theme.colors.brandColorJade : e.theme.colors.brandColorSapphire};
+`, ht = i.div`
+  background-color: ${(e) => e.theme.colors.grey3};
+  padding: ${n.sp2} ${n.sp3};
+  display: flex;
+  gap: ${n.sp2};
+  margin: auto;
+  max-width: fit-content;
+  border-radius: 96px;
+  margin-top: ${n.sp4};
+  margin-bottom: ${n.sp6};
+`, ut = i.span`
+  ${(e) => `${v.cardsContent.style(e.windowSize)}`};
+`, Ct = i.div`
+  display: flex;
+  flex-direction: column;
+  min-height: ${(e) => x.carouselHeight.valuePx(e.windowSize)};
+  min-width: 480px;
+  position: relative;
+`, ft = i.div`
+  position: relative;
+  margin-top: ${(e) => x.carouselMarginTop.valuePx(e.windowSize)};
+  margin-left: ${(e) => x.carouselMarginLeft.valuePx(e.windowSize)};
+`, wt = i.div`
+  position: relative;
+  overflow: visible;
+`, ie = i.div`
+  position: absolute;
+  ${(e) => e.isReflection && `
+  background-color: ${e.theme.colors.grey4};
+  clip-path: inset(16% 0 0 0);
+  `}
+`, $t = Se`
+  0% {
+    left: -${n.sp6};
+  }
+  50% {
+    left: calc(100% + ${n.sp6});
+  }
+  100% {
+    left: calc(100% + ${n.sp6});
+  }
+`, bt = i.div`
+  position: absolute;
+  background:
+    ${$.promoCardGradient1Strong}, ${$.promoCardGradient2Strong};
+  width: ${n.sp10};
+  z-index: 3;
+  height: 100%;
+  transform: skew(15deg);
+  animation: ${$t} 4s linear infinite;
+`;
+export {
+  We as ChargeCardPromoUserContent,
+  It as default
+};