@zeniai/web-components 3.17.12 → 3.17.14

package/dist/ChargeCardPromoPage-BrrKYg8Z.js

@@ -1,816 +0,0 @@
-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-HuMzFv1o.js";
-import { N as Ee } from "./NavigationDots-B2XJYi7r.js";
-import { M as G, P as O } from "./PromoBaseCards-B2QWYKd6.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
-};