@zeniai/web-components 3.16.64 → 3.16.65

package/dist/ChargeCardPromoPage-BcRx35k2.js

@@ -0,0 +1,805 @@
+import { j as t, u as W } from "./vendor-.pnpm-DtFedGku.js";
+import { useState as N, useEffect as G } from "react";
+import { css as je, keyframes as be } from "@emotion/react";
+import i from "@emotion/styled";
+import { hasChargeCardAdminLevelAccess as Se } from "@zeniai/client-epic-state";
+import { u as b, a as se, dz as ye, dB as ve, aD as Te, a5 as ze, i7 as Be, aE as Pe, hG as Ae, B as te, j as ne, S as n, H as ke, aj as X, fi as Ie, V as Le, R as c, v as Me, Z as _e, k7 as Re, G as De, D as l, av as S, C as $, o as Fe, a1 as Ue, k8 as He } from "./index-0S2-oApY.js";
+import { N as Ne } from "./NavigationDots-Bfie7GWj.js";
+import { M as E, P as O } from "./PromoBaseCards-FpJnjS2k.js";
+import { S as L } from "./usp-line-BBd1wKwW.js";
+const h = {
+  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])
+}, y = {
+  promoBadgeText: new S("standardRegular", "largeRegular"),
+  promoBadgeTextBold: new S("standardBold", "largeBold"),
+  cardsContent: new S("extraSmallRegular", "smallRegular"),
+  contactAdmin: new S("extraSmallRegular", "largeRegular"),
+  uspText: new S("smallRegular", "standardRegular"),
+  uspBoldText: new S("smallMedium", "standardMedium")
+}, {
+  common: U,
+  spendManagement: {
+    chargeCard: { chargeCardsPromo: r }
+  }
+} = se.getLocalizedStrings(), kt = ({
+  meetingUrl: e,
+  companyLegalName: a,
+  chargeCardSetupView: o,
+  showEnableCardButton: s,
+  controllerEmails: g,
+  isCreditCardProductVisible: x,
+  isDebitCardFeatureEnabled: p,
+  isDebitCardSetupEnabled: C,
+  isChargeCardSetupEnabled: f,
+  admins: T,
+  cashbackRate: z,
+  cardPromoType: u = "credit",
+  onSetupButtonClick: m,
+  onBackClick: d,
+  onClickMenuIcon: Y,
+  onSetupChargeCardSuccess: Z,
+  onExpressInterestClick: ge
+}) => {
+  const xe = W(), J = ye(), v = b(), q = ve().analytics, { chargeCardTermsDetails: M, companyChargeCardInfo: w, companyLocaleInfo: _ } = o, K = Te(
+    M?.fetchStatus.fetchState
+  ), [he, Q] = N(!1), ue = () => {
+    q.trackCardsPromoPageClicked("schedule demo"), q.trackCardsScheduleDemoClick(
+      g,
+      {
+        isCreditCardOffered: x,
+        isDebitCardOffered: p,
+        isDebitCardEnabled: C,
+        isCreditCardEnabled: f
+      },
+      "Cards Promo"
+    ), Q(!0);
+  }, Ce = w != null && _ != null ? ze("0,0", {
+    amount: w.chargeCardsCreditAccountLimit,
+    currencyCode: _.currencyCode,
+    currencySymbol: _.currencySymbol
+  }) : void 0;
+  G(() => {
+    K === "In-Progress" && M?.fetchStatus.fetchState === "Completed" && Z();
+  }, [
+    K,
+    Z,
+    M?.fetchStatus
+  ]);
+  const V = Se(
+    J.loggedInUserRoleMap
+  ), fe = Be(J), R = u === "credit" && w?.isCompanyInterestedInChargeCard === !1 && w.chargeCardsCreditAccountLimit === 0, D = u === "credit" && w?.isCompanyInterestedInChargeCard === !0 && w.chargeCardsCreditAccountLimit === -1, F = u === "credit" && w?.isCompanyInterestedInChargeCard === !0 && w.chargeCardsCreditAccountLimit === 0, we = u === "credit" && w?.isCompanyInterestedInChargeCard === !0 && w.chargeCardsCreditAccountLimit > 0, { expressInterestInChargeCardFetchState: $e } = o, ee = R ? r.getPreApprovedNow : s ? r.enableCardsButton : r.setupCardsButton;
+  return /* @__PURE__ */ t.jsxs(Ye, { children: [
+    /* @__PURE__ */ t.jsx(
+      Pe,
+      {
+        title: r.title[u],
+        backgroundColor: xe.colors.grey4,
+        onBackClick: d,
+        showBackButton: !0,
+        showMenuIcon: v === "medium-compact" || v === "small",
+        onClickMenuIcon: Y,
+        style: { zIndex: 9 },
+        source: "ChargeCardPromoPage"
+      }
+    ),
+    he === !0 ? /* @__PURE__ */ t.jsx(
+      Ae,
+      {
+        onCancelClick: () => {
+          Q(!1);
+        },
+        meetingUrl: e
+      }
+    ) : null,
+    /* @__PURE__ */ t.jsx(Ke, { windowSize: v, children: V === !0 ? /* @__PURE__ */ t.jsxs(qe, { children: [
+      /* @__PURE__ */ t.jsxs(Je, { children: [
+        /* @__PURE__ */ t.jsx(
+          Ee,
+          {
+            isApproved: we,
+            creditAmount: Ce,
+            cardPromoType: u,
+            isUnderReview: F,
+            isRejected: D,
+            showExpressInterest: R
+          }
+        ),
+        /* @__PURE__ */ t.jsx(
+          le,
+          {
+            cardPromoType: u,
+            cashbackRate: z
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t.jsx(
+        ae,
+        {
+          showEnableCardButton: s,
+          cardPromoType: u,
+          isUnderReview: F,
+          isRejected: D,
+          showExpressInterest: R
+        }
+      )
+    ] }) : /* @__PURE__ */ t.jsx(
+      Oe,
+      {
+        companyLegalName: a,
+        cards: [],
+        admins: T,
+        cashbackRate: z,
+        hasZeniFinopsRoles: fe,
+        cardPromoType: u
+      }
+    ) }),
+    V && !(F || D) ? /* @__PURE__ */ t.jsxs(rt, { windowSize: v, children: [
+      /* @__PURE__ */ t.jsx(
+        te,
+        {
+          variant: "secondary",
+          label: r.scheduleDemoButton,
+          style: { width: 166 },
+          onClick: ue,
+          "data-testid": ne("schedule-demo-button")
+        }
+      ),
+      /* @__PURE__ */ t.jsx(Ze, { windowSize: v, children: r.orText }),
+      /* @__PURE__ */ t.jsx(
+        te,
+        {
+          variant: "primary",
+          label: ee,
+          style: { minWidth: 166 },
+          loading: o.chargeCardTermsDetails?.fetchStatus.fetchState === "In-Progress" || $e === "In-Progress",
+          onClick: ee === r.getPreApprovedNow ? ge : () => m(u),
+          "data-testid": ne("enable-card-button")
+        }
+      )
+    ] }) : null
+  ] });
+}, Ge = ({ admins: e }) => {
+  const a = e.flatMap((s) => s.user?.firstName + " " + s.user?.lastName).join(", "), o = b();
+  return /* @__PURE__ */ t.jsxs(pt, { windowSize: o, children: [
+    /* @__PURE__ */ t.jsx(H, { underline: !1, windowSize: o, children: r.noCardAssigned.pre }),
+    /* @__PURE__ */ t.jsx(
+      _e,
+      {
+        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,
+  isUnderReview: o,
+  isRejected: s,
+  showExpressInterest: g,
+  isCardUser: x = !1
+}) => {
+  const p = b();
+  return /* @__PURE__ */ t.jsx(ot, { windowSize: p, children: /* @__PURE__ */ t.jsx(
+    Re,
+    {
+      topTermLabel: e === "credit" || e === "debit_and_credit" ? r.terms.checkingAccountTerm : void 0,
+      buttonTermLabel: o === !0 || s === !0 || x === !0 ? void 0 : g === !0 ? r.terms.approvalTerm : a ? r.terms.alternateTerm1 : r.terms.terms1,
+      showEndIcon: !1,
+      showTerms: s === !1 || x === !1,
+      style: { marginTop: h.termsOfAgreementMarginTop.valuePx(p) }
+    }
+  ) });
+}, Ee = ({
+  isApproved: e,
+  cardPromoType: a,
+  creditAmount: o,
+  isUnderReview: s,
+  isRejected: g,
+  showExpressInterest: x
+}) => {
+  const p = b(), C = a === "debit_and_credit" ? r.promoTextDebitCreditCard : a === "debit" ? r.promoTextDebitCard : r.promoTextCreditCard, f = e ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    r.promoBadgeText.approved,
+    /* @__PURE__ */ t.jsx(re, { children: o }),
+    r.creditLimit,
+    U.strings.space
+  ] }) : x ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    r.promoBadgeText.nonPreApproved.get,
+    /* @__PURE__ */ t.jsx(tt, { children: r.promoBadgeText.nonPreApproved.scale }),
+    r.promoBadgeText.nonPreApproved.doubleStarred,
+    U.strings.space,
+    r.promoBadgeText.nonPreApproved.higherLimits
+  ] }) : s ? r.promoBadgeText.underReview : g ? r.promoBadgeText.rejected : /* @__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: p === "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(
+      Ve,
+      {
+        cardPromoType: a,
+        hideBadge: o == null || a === "debit",
+        windowSize: p,
+        children: [
+          s || g || x ? null : /* @__PURE__ */ t.jsx($t, {}),
+          /* @__PURE__ */ t.jsx(et, { windowSize: p, children: f })
+        ]
+      }
+    )
+  ] });
+}, Oe = ({
+  companyLegalName: e,
+  cards: a,
+  admins: o,
+  cashbackRate: s,
+  hasZeniFinopsRoles: g,
+  cardPromoType: x = "credit"
+}) => {
+  const p = b(), C = x === "debit_and_credit" ? r.promoTextDebitCreditCard : x === "debit" ? r.promoTextDebitCard : r.promoTextCreditCard;
+  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    p === "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(mt, { windowSize: p }) : /* @__PURE__ */ t.jsx(We, { cards: a, companyLegalName: e }),
+    /* @__PURE__ */ t.jsx(le, { cardPromoType: x, cashbackRate: s }),
+    g ? null : /* @__PURE__ */ t.jsx(Ge, { admins: o }),
+    /* @__PURE__ */ t.jsx(
+      ae,
+      {
+        isCardUser: !0,
+        showEnableCardButton: !1,
+        cardPromoType: x
+      }
+    )
+  ] });
+}, We = ({
+  cards: e,
+  companyLegalName: a
+}) => {
+  const o = W(), s = b();
+  let g = "", x;
+  if (e.length === 1) {
+    x = e[0].cardCreatedByUser.photo;
+    const p = e[0].cardCreatedByUser.firstName + " " + e[0].cardCreatedByUser.lastName;
+    g = r.cardAssigned.singleCreditCard.replace("__issuing-user__", p).replace("__company-name__", a);
+  } else
+    g = r.cardAssigned.multipleCreditCards.replace(
+      "__company-name__",
+      a
+    );
+  return /* @__PURE__ */ t.jsxs(xt, { children: [
+    x != null ? /* @__PURE__ */ t.jsx(
+      Qe,
+      {
+        width: n.sp5,
+        height: n.sp5,
+        style: {
+          paddingTop: s === "small" ? n.sp1 : n.sp0
+        },
+        src: x.href,
+        alt: se.getLocalizedStrings().cockpit.userProfileAltText,
+        onError: ({ currentTarget: p }) => {
+          p.onerror = null, p.src = Me;
+        },
+        loading: "lazy"
+      }
+    ) : null,
+    /* @__PURE__ */ t.jsx(gt, { windowSize: s, mode: o.mode, children: /* @__PURE__ */ t.jsx(ht, { windowSize: s, children: g }) })
+  ] });
+}, 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(Xe, {}) : /* @__PURE__ */ t.jsxs(st, { windowSize: e, children: [
+    /* @__PURE__ */ t.jsx(
+      E,
+      {
+        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 = b(), s = r.benefits;
+  return /* @__PURE__ */ t.jsxs(nt, { windowSize: o, children: [
+    o === "small" ? /* @__PURE__ */ t.jsx(oe, { windowSize: o, cardPromoType: e }) : null,
+    /* @__PURE__ */ t.jsxs(it, { windowSize: o, children: [
+      /* @__PURE__ */ t.jsxs(P, { windowSize: o, children: [
+        /* @__PURE__ */ t.jsx(k, { children: /* @__PURE__ */ t.jsx(dt, {}) }),
+        /* @__PURE__ */ t.jsxs(I, { children: [
+          /* @__PURE__ */ t.jsx(j, { 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(
+            j,
+            {
+              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(at, {}) }),
+        /* @__PURE__ */ t.jsxs(I, { children: [
+          /* @__PURE__ */ t.jsx(j, { windowSize: o, children: s.item2.pre }),
+          /* @__PURE__ */ t.jsx(A, { windowSize: o, children: s.item2.bold }),
+          /* @__PURE__ */ t.jsx(j, { windowSize: o, children: s.item2.post })
+        ] })
+      ] }),
+      /* @__PURE__ */ t.jsxs(P, { windowSize: o, children: [
+        /* @__PURE__ */ t.jsx(k, { children: /* @__PURE__ */ t.jsx(ct, {}) }),
+        /* @__PURE__ */ t.jsxs(I, { children: [
+          /* @__PURE__ */ t.jsx(j, { windowSize: o, children: s.item3.pre }),
+          /* @__PURE__ */ t.jsx(A, { windowSize: o, children: s.item3.bold }),
+          /* @__PURE__ */ t.jsx(j, { windowSize: o, children: s.item3.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(j, { windowSize: o, children: s.item4.pre }),
+          /* @__PURE__ */ t.jsx(A, { windowSize: o, children: s.item4.bold }),
+          /* @__PURE__ */ t.jsx(j, { windowSize: o, children: s.item4.post })
+        ] })
+      ] })
+    ] }),
+    o === "small" ? null : /* @__PURE__ */ t.jsx(oe, { windowSize: o, cardPromoType: e })
+  ] });
+};
+let B;
+const Xe = () => {
+  const e = b(), a = W(), [o, s] = N(0), [g, x] = N(!1), p = r.businessText, C = `${p} ${r.debit}`, f = [
+    { id: 1, cardType: "debit", cardText: C },
+    { id: 2, cardType: "debit", cardText: C },
+    { id: 3, cardType: "credit", cardText: p },
+    { id: 4, cardType: "credit", cardText: p }
+  ];
+  G(() => (g || (B = setInterval(() => {
+    s((m) => {
+      const d = m + 1;
+      return d === f.length ? (x(!0), 0) : d;
+    });
+  }, 2e3)), () => clearInterval(B)), [g, f.length]), G(() => {
+    g && B != null && clearInterval(B);
+  }, [g]);
+  const T = (m, d) => {
+    switch ((m - o + f.length) % f.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 = T(m, !0);
+    return {
+      ...d,
+      transform: `${d?.transform} scaleY(-1)`,
+      opacity: 1,
+      transition: "transform 0s 0s, z-index 0s 0s"
+    };
+  }, u = (m) => {
+    g || x(!0), s(m);
+  };
+  return /* @__PURE__ */ t.jsxs(ut, { windowSize: e, children: [
+    /* @__PURE__ */ t.jsx(Ct, { windowSize: e, children: f.map((m, d) => /* @__PURE__ */ t.jsxs(ft, { children: [
+      /* @__PURE__ */ t.jsx(
+        ie,
+        {
+          isReflection: !1,
+          style: { ...T(d, !1) },
+          onClick: () => u(d),
+          children: d === 0 || d === 2 ? /* @__PURE__ */ t.jsx(
+            E,
+            {
+              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(
+            E,
+            {
+              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)) }),
+    g && /* @__PURE__ */ t.jsx(
+      Ne,
+      {
+        numberOfDots: f.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: h.navigationBottom.valuePx(e),
+          left: h.navigationLeft.valuePx(e),
+          zIndex: 7
+        }
+      }
+    )
+  ] });
+}, Ye = i.div`
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 100%;
+  flex-direction: column;
+  background-color: ${(e) => e.theme.colors.grey4};
+`, Ze = i(De)`
+  color: ${(e) => e.theme.colors.hero};
+`, Je = i.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`, qe = i.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex: 1;
+  width: 100%;
+`, Ke = i.div`
+  padding-top: ${(e) => h.containerPaddingTopBottom.valuePx(e.windowSize)};
+  padding-bottom: ${(e) => h.containerPaddingTopBottom.valuePx(e.windowSize)};
+  text-align: center;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
+`, de = i(Ie)`
+  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(Le)`
+  color: ${(e) => e.theme.colors.primary};
+  margin: auto;
+  margin-top: ${n.sp2};
+`, me = i(ke)`
+  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;
+`, Qe = i.img`
+  border-radius: 50%;
+  justify-content: center;
+  color: ${(e) => e.theme.colors.hero};
+`, Ve = i.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+  padding: ${n.sp2} ${n.sp3};
+  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;
+    `}
+`, et = i(X)`
+  color: ${(e) => e.theme.mode === "dark" ? $.brandColorJade : $.brandColorSapphire};
+  text-align: ${(e) => e.windowSize === "small" ? "left" : "center"};
+  ${(e) => `${y.promoBadgeText.style(e.windowSize)}`};
+  span {
+    ${(e) => `${y.promoBadgeTextBold.style(e.windowSize)}`};
+  }
+`, tt = i.span``, re = i.span`
+  color: ${$.success};
+`, nt = i.div`
+  display: flex;
+  gap: ${(e) => h.midContainerGap.valuePx(e.windowSize)};
+  flex-direction: ${(e) => e.windowSize === "small" ? "column" : "row"};
+  align-items: center;
+  justify-content: center;
+`, ot = i.div`
+  display: flex;
+  flex-direction: column;
+`, rt = 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) => h.buttonTrayGap.valuePx(e.windowSize)};
+`, it = i.div`
+  width: ${(e) => e.windowSize === "small" ? "auto" : "288px"};
+  display: flex;
+  flex-direction: column;
+  margin-left: ${(e) => h.uspContainerMarginX.valuePx(e.windowSize)};
+  margin-right: ${(e) => h.uspContainerMarginX.valuePx(e.windowSize)};
+  z-index: 8;
+`, st = i.div`
+  display: flex;
+  justify-content: ${(e) => e.windowSize === "small" ? "center" : "flex-start"};
+  min-height: ${(e) => h.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"};
+`, j = i(Fe)`
+  color: ${(e) => e.theme.colors.champion};
+  ${(e) => `${y.uspText.style(e.windowSize)}`};
+`, A = i(Ue)`
+  color: ${(e) => e.theme.colors.champion};
+  ${(e) => `${y.uspBoldText.style(e.windowSize)}`};
+`, k = i.div``, I = i.div`
+  padding-left: ${n.sp3};
+`, at = i(L)`
+  color: ${$.graphColor16Dark};
+`, lt = i(L)`
+  color: ${$.alert};
+`, dt = i(L)`
+  color: ${$.graphColor11};
+`, ct = i(L)`
+  color: ${$.success};
+`, mt = i.div`
+  height: ${(e) => h.emptySectionHeight.valuePx(e.windowSize)};
+  ${(e) => e.windowSize === "small" ? null : je`
+          margin-top: ${n.sp4};
+          margin-bottom: ${n.sp6};
+        `}
+`, pt = i(X)`
+  color: ${(e) => e.theme.colors.hero};
+  margin-top: ${(e) => h.contactAdminContainerMarginTop.valuePx(e.windowSize)};
+  margin-bottom: ${(e) => h.contactAdminContainerMarginBottom.valuePx(e.windowSize)};
+  margin-left: ${(e) => h.contactAdminContainerMarginLeftRight.valuePx(e.windowSize)};
+  margin-right: ${(e) => h.contactAdminContainerMarginLeftRight.valuePx(e.windowSize)};
+  text-align: center;
+`, H = i(He)`
+  ${(e) => `${y.contactAdmin.style(e.windowSize)}`};
+  text-decoration: ${(e) => e.underline ? "underline" : "none"};
+  cursor: ${(e) => e.underline ? "default" : null};
+`, gt = i.div`
+  color: ${(e) => e.mode === "dark" ? e.theme.colors.brandColorJade : e.theme.colors.brandColorSapphire};
+`, xt = 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};
+`, ht = i.span`
+  ${(e) => `${y.cardsContent.style(e.windowSize)}`};
+`, ut = i.div`
+  display: flex;
+  flex-direction: column;
+  min-height: ${(e) => h.carouselHeight.valuePx(e.windowSize)};
+  min-width: 480px;
+  position: relative;
+`, Ct = i.div`
+  position: relative;
+  margin-top: ${(e) => h.carouselMarginTop.valuePx(e.windowSize)};
+  margin-left: ${(e) => h.carouselMarginLeft.valuePx(e.windowSize)};
+`, ft = 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);
+  `}
+`, wt = be`
+  0% {
+    left: -${n.sp6};
+  }
+  50% {
+    left: calc(100% + ${n.sp6});
+  }
+  100% {
+    left: calc(100% + ${n.sp6});
+  }
+`, $t = i.div`
+  position: absolute;
+  background:
+    ${$.promoCardGradient1Strong}, ${$.promoCardGradient2Strong};
+  width: ${n.sp10};
+  z-index: 3;
+  height: 100%;
+  transform: skew(15deg);
+  animation: ${wt} 4s linear infinite;
+`;
+export {
+  Oe as ChargeCardPromoUserContent,
+  kt as default
+};