@zeniai/web-components 3.16.64 → 3.16.65

package/dist/ChargeCardPromoPage-WLSJ7J-r.js

@@ -1,805 +0,0 @@
-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-lPBSSV1q.js";
-import { N as Ne } from "./NavigationDots-D_mAWOOU.js";
-import { M as E, P as O } from "./PromoBaseCards-DF3fUU4O.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
-};