@zeniai/web-components 3.17.11 → 3.17.13

package/dist/AddToWalletPage-Ck9RhQyG.js

@@ -1,642 +0,0 @@
-import { j as t } from "./vendor-.pnpm-B2klaOGU.js";
-import { useState as x, useEffect as re } from "react";
-import { css as B } from "@emotion/react";
-import i from "@emotion/styled";
-import { hasChargeCardAdminLevelAccess as le } from "@zeniai/client-epic-state";
-import { S as o, C as s, t as de, u as D, dD as ce, dB as pe, a as E, aE as he, D as c, kp as ge, kE as xe, B as A, e as z, R as m, aw as f, J as y, kF as me, kl as ue, _ as $e, kG as fe, eQ as ye, b7 as be, o as we, kw as Se } from "./index-Dg4HzhKR.js";
-import { S as ve, a as je, b as Ce, c as Te, d as ke, e as We, f as Ie } from "./add-to-wallet-DgdBD8_G.js";
-const Be = ({
-  options: e,
-  selected: n,
-  onToggle: h,
-  containerStyle: r = {},
-  optionStyle: w = {},
-  thumbStyle: T = {}
-}) => {
-  const u = e.findIndex((l) => l.id === n), $ = 100 / e.length, S = () => u === 0 ? {
-    left: "1%"
-    // Start thumb slightly off the left edge
-  } : u === e.length - 1 ? {
-    left: `${(e.length - 1) * $}%`
-  } : {
-    left: `${u * $}%`
-  };
-  return /* @__PURE__ */ t.jsxs(Ae, { style: r, children: [
-    /* @__PURE__ */ t.jsx(
-      ze,
-      {
-        style: {
-          width: `${$ - 1}%`,
-          ...S(),
-          ...T
-        }
-      }
-    ),
-    e.map((l) => /* @__PURE__ */ t.jsx(
-      Pe,
-      {
-        style: w,
-        active: l.id === n,
-        "data-testid": l.dataTestId,
-        onClick: (v) => {
-          v.preventDefault(), h(l.id);
-        },
-        children: l.label
-      },
-      l.id
-    ))
-  ] });
-}, Ae = i.div`
-  position: relative;
-  width: 100%;
-  background: ${(e) => e.theme.colors.grey3};
-  border: 1px solid ${(e) => e.theme.colors.grey2};
-  border-radius: 100px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: ${o.sp2} 0;
-  box-sizing: border-box;
-`, ze = i.div`
-  position: absolute;
-  background: ${(e) => e.theme.colors.grey5};
-  box-shadow: ${o.sp0} 1px 2px ${s.boxShadowElevation};
-  border-radius: 50px;
-  transition:
-    left 0.3s ease,
-    width 0.3s ease;
-  z-index: 1;
-  padding-top: 20px;
-  padding-bottom: 20px;
-`, Pe = i.button`
-  ${de.smallMedium.cssObject};
-  position: relative;
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: ${(e) => e.active ? e.theme.colors.primary : s.heroLight};
-  z-index: 2;
-  cursor: pointer;
-  user-select: none;
-  border: none;
-  background: none;
-  padding: ${o.sp0};
-  transition: color 0.3s ease;
-  padding-top: ${o.sp1};
-  padding-bottom: ${o.sp1};
-`, {
-  spendManagement: {
-    chargeCard: { chargeCardsPromo: P, cardDetails: d }
-  }
-} = E.getLocalizedStrings(), p = {
-  chargeCardWidth: new m(200, 384),
-  chargeCardHeight: new m(128, 240),
-  openWalletIconWidthHeight: new m(20, c[4]),
-  headingMarginTop: new m(c[4], c[7]),
-  headingMarginBottom: new m(c[6], c[9])
-}, b = {
-  headingFont: new f("h6Medium", "h4Regular"),
-  subheadingFont: new f("standardRegular", "h6Regular"),
-  walletTitleFont: new f(
-    "standardSemiBold",
-    "largeSemiBold"
-  ),
-  walletSubTitleFont: new f(
-    "extraSmallRegular",
-    "standardRegular"
-  )
-}, Re = (e, n, h) => /* @__PURE__ */ t.jsxs(nt, { translatePhone: e, showIphone: h, children: [
-  /* @__PURE__ */ t.jsxs(st, { children: [
-    /* @__PURE__ */ t.jsx(xt, { children: P.timeText }),
-    /* @__PURE__ */ t.jsxs(at, { children: [
-      /* @__PURE__ */ t.jsx(lt, { children: [...Array(4).keys()].map((r) => /* @__PURE__ */ t.jsx(dt, { towerIndex: r }, r)) }),
-      /* @__PURE__ */ t.jsx(ct, { children: /* @__PURE__ */ t.jsx(C, { className: "wave", children: /* @__PURE__ */ t.jsx(C, { className: "wave", children: /* @__PURE__ */ t.jsx(C, { className: "wave" }) }) }) }),
-      /* @__PURE__ */ t.jsx(pt, { children: /* @__PURE__ */ t.jsx(ht, {}) }),
-      /* @__PURE__ */ t.jsx(gt, {})
-    ] })
-  ] }),
-  /* @__PURE__ */ t.jsxs(it, { children: [
-    /* @__PURE__ */ t.jsxs(qe, { children: [
-      /* @__PURE__ */ t.jsx(Ke, { showTick: n }),
-      /* @__PURE__ */ t.jsx(et, { showTick: n }),
-      /* @__PURE__ */ t.jsx(tt, { showTick: n }),
-      /* @__PURE__ */ t.jsx(ot, { showTick: n }),
-      /* @__PURE__ */ t.jsxs($t, { translateCardSkelton: e, children: [
-        /* @__PURE__ */ t.jsx(yt, {}),
-        [...Array(4).keys()].map((r) => /* @__PURE__ */ t.jsx(ft, { lineIndex: r }, r))
-      ] }),
-      n ? null : /* @__PURE__ */ t.jsx(bt, { children: /* @__PURE__ */ t.jsx(me, { scannerTheme: "light" }) })
-    ] }),
-    /* @__PURE__ */ t.jsx(mt, { showTick: n }),
-    /* @__PURE__ */ t.jsx(ut, { showTick: n, children: P.addToWallet })
-  ] }),
-  /* @__PURE__ */ t.jsx(rt, {})
-] }), R = ({ tabType: e }) => {
-  const n = D();
-  return /* @__PURE__ */ t.jsxs(De, { children: [
-    /* @__PURE__ */ t.jsxs(M, { children: [
-      /* @__PURE__ */ t.jsx(Ve, { children: /* @__PURE__ */ t.jsx(Ne, { windowSize: n }) }),
-      /* @__PURE__ */ t.jsx(G, { windowSize: n, children: d.openWalletAppOnPhone })
-    ] }),
-    /* @__PURE__ */ t.jsxs(H, { windowSize: n, children: [
-      e === "apple" ? d.openWalletDescriptionApple : d.openWalletDescriptionGoogle,
-      /* @__PURE__ */ t.jsx(F, {})
-    ] }),
-    /* @__PURE__ */ t.jsxs(M, { children: [
-      /* @__PURE__ */ t.jsx(Ee, { children: /* @__PURE__ */ t.jsx(Je, { windowSize: n }) }),
-      /* @__PURE__ */ t.jsx(G, { windowSize: n, children: d.verifyCard })
-    ] }),
-    /* @__PURE__ */ t.jsxs(H, { windowSize: n, children: [
-      e === "apple" ? d.VerifyCardDescriptionApple : d.VerifyCardDescriptionGoogle,
-      /* @__PURE__ */ t.jsx(F, {})
-    ] })
-  ] });
-}, Ft = ({
-  onGotItClick: e,
-  isDebitCard: n,
-  controllerEmails: h,
-  classListFetchState: r,
-  isChargeCardFeatureEnabled: w,
-  isDebitCardFeatureEnabled: T,
-  isDebitCardSetupEnabled: u,
-  isChargeCardSetupEnabled: $,
-  productInformation: S,
-  creditAccountInformation: l,
-  debitAccountInformation: v,
-  chargeCardDetailView: V,
-  creditAccount: N,
-  creditAccountRepayment: J,
-  cardIssuedByRoles: O,
-  cardIssuedByDepartmentName: X,
-  cardHolderRoles: Y,
-  cardHolderDepartmentName: Z
-}) => {
-  const a = D(), Q = ce().analytics, [k, U] = x(!1), [W, _] = x(!1), [q, K] = x(!1), [ee, te] = x(!1), [j, oe] = x("apple"), ie = pe(), ne = le(
-    ie.loggedInUserRoleMap
-  ), se = (I) => {
-    ue({
-      chargeCardDetailView: V,
-      classListFetchState: r,
-      analytics: Q,
-      isDebitCard: n,
-      isChargeCardAdmin: ne,
-      cardIssuedByRoles: O,
-      cardIssuedByDepartmentName: X,
-      cardHolderRoles: Y,
-      cardHolderDepartmentName: Z,
-      controllerEmails: h,
-      pageName: "Card Activation",
-      addToWalletType: I === "apple" ? "Apple Wallet" : "Google Wallet",
-      productInformation: S,
-      creditAccountInformation: l,
-      debitAccountInformation: v,
-      isChargeCardFeatureEnabled: w,
-      creditAccount: N,
-      creditAccountRepayment: J
-    }), oe(I);
-  };
-  re(() => {
-    setTimeout(
-      () => {
-        U(!0);
-      },
-      n ? 9500 : 4500
-      //1500+3000(for confetti)
-    ), setTimeout(
-      () => {
-        _(!0);
-      },
-      n ? 9e3 : 4e3
-      //1000+3000(for confetti)
-    ), setTimeout(
-      () => {
-        K(!0);
-      },
-      n ? 10500 : 5500
-      //2500+3000(for confetti)
-    ), setTimeout(
-      () => {
-        te(!0);
-      },
-      n ? 15e3 : 1e4
-      //7000+3000(for confetti)
-    );
-  }, [n]);
-  const ae = k && W, g = E.getLocalizedStrings().spendManagement.chargeCard;
-  return /* @__PURE__ */ t.jsx(jt, { windowSize: a, children: /* @__PURE__ */ t.jsxs(Ye, { children: [
-    /* @__PURE__ */ t.jsx(
-      he,
-      {
-        navBarContainerStyles: {
-          paddingTop: c[2],
-          alignItems: "center",
-          paddingBottom: c[2]
-        },
-        title: g.addToWallet.title,
-        ignoreScrollAction: !0,
-        showBackButton: !1,
-        showMenuIcon: !1,
-        transparentBackground: !0,
-        source: "AddToWalletPage",
-        style: { zIndex: 3 },
-        titleStyle: { marginTop: c[0] }
-      }
-    ),
-    /* @__PURE__ */ t.jsxs(Ze, { windowSize: a, children: [
-      /* @__PURE__ */ t.jsx(wt, { windowSize: a, children: g.addToWallet.heading }),
-      /* @__PURE__ */ t.jsx(St, { windowSize: a, children: g.addToWallet.subheading })
-    ] }),
-    /* @__PURE__ */ t.jsxs(Qe, { windowSize: a, children: [
-      a !== "small" ? /* @__PURE__ */ t.jsx(Tt, { children: /* @__PURE__ */ t.jsxs(Ue, { windowSize: a, children: [
-        /* @__PURE__ */ t.jsxs(
-          _e,
-          {
-            windowSize: a,
-            flipCard: k,
-            scaleCard: W,
-            children: [
-              /* @__PURE__ */ t.jsx(ge, { isDebitCard: n }),
-              /* @__PURE__ */ t.jsx(
-                xe,
-                {
-                  showCrossIcon: !1,
-                  isDebitCard: n
-                }
-              )
-            ]
-          }
-        ),
-        Re(q, ee, ae)
-      ] }) }) : null,
-      /* @__PURE__ */ t.jsxs(Ge, { windowSize: a, children: [
-        /* @__PURE__ */ t.jsx(He, { children: /* @__PURE__ */ t.jsx(
-          Be,
-          {
-            options: [
-              {
-                id: "apple",
-                dataTestId: "add-to-apple-wallet",
-                label: /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-                  /* @__PURE__ */ t.jsx(Xe, {}),
-                  /* @__PURE__ */ t.jsx(L, { children: d.appleWallet })
-                ] })
-              },
-              {
-                id: "google",
-                dataTestId: "add-to-google-wallet",
-                label: /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-                  /* @__PURE__ */ t.jsx(Oe, {}),
-                  /* @__PURE__ */ t.jsx(L, { children: d.googleWallet })
-                ] })
-              }
-            ],
-            optionStyle: {
-              padding: "12px"
-            },
-            thumbStyle: {
-              paddingTop: o.sp4,
-              paddingBottom: o.sp4
-            },
-            containerStyle: {
-              border: o.sp0
-            },
-            selected: j,
-            onToggle: se
-          }
-        ) }),
-        /* @__PURE__ */ t.jsxs(Fe, { children: [
-          /* @__PURE__ */ t.jsx(Le, { isActive: j === "apple", children: /* @__PURE__ */ t.jsx(R, { tabType: "apple" }) }),
-          /* @__PURE__ */ t.jsx(Me, { isActive: j === "google", children: /* @__PURE__ */ t.jsx(R, { tabType: "google" }) })
-        ] }),
-        a !== "small" ? /* @__PURE__ */ t.jsx(vt, { children: /* @__PURE__ */ t.jsx(
-          A,
-          {
-            variant: "primary",
-            label: g.addToWallet.gotIt,
-            onClick: e,
-            style: { width: "fit-content" },
-            "data-testid": z("got-it-button-web")
-          }
-        ) }) : null
-      ] })
-    ] }),
-    a === "small" ? /* @__PURE__ */ t.jsx(Ct, { children: /* @__PURE__ */ t.jsx(
-      A,
-      {
-        variant: "primary",
-        label: g.addToWallet.gotIt,
-        onClick: e,
-        style: { width: "fit-content" },
-        "data-testid": z("got-it-button-mobile")
-      }
-    ) }) : null
-  ] }) });
-}, Fe = i.div`
-  display: flex;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-`, Le = i.div`
-  display: flex;
-  width: 100%;
-  position: absolute;
-  left: ${(e) => e.isActive ? o.sp0 : "-369px"};
-  transition: left 0.3s ease-in-out;
-`, Me = i.div`
-  display: flex;
-  width: 100%;
-  position: absolute;
-  right: ${(e) => e.isActive ? o.sp0 : "-369px"};
-  transition: right 0.3s ease-in-out;
-`, F = i.div`
-  display: flex;
-  flex: 1;
-  background-color: ${(e) => e.theme.colors.grey3};
-  min-height: 1px;
-  max-height: 1px;
-  margin: ${o.sp3} ${o.sp0};
-`, Ge = i.div`
-  display: flex;
-  width: ${({ windowSize: e }) => e === "small" ? "100%" : "369px"};
-  flex-direction: column;
-`, He = i.div`
-  display: flex;
-  height: ${o.sp8};
-  width: 100%;
-  border-radius: ${o.sp12};
-  border: 1px solid ${(e) => e.theme.colors.grey2};
-  background: ${(e) => e.theme.colors.grey3};
-  position: relative;
-`, L = i($e)`
-  text-transform: none;
-  margin-left: ${o.sp2};
-  cursor: pointer;
-`, De = i.div`
-  display: flex;
-  flex-direction: column;
-  margin-top: ${o.sp6};
-`, Ee = i.div`
-  padding: 12px;
-  border-radius: ${o.sp4};
-  background: ${s.successLight};
-  display: flex;
-`, Ve = i.div`
-  padding: 12px;
-  border-radius: ${o.sp4};
-  background: ${(e) => e.theme.colors.graphColor16Light};
-  display: flex;
-`, M = i.div`
-  display: flex;
-  align-items: center;
-  gap: ${o.sp3};
-`, G = i(y)`
-  ${({ windowSize: e }) => b.walletTitleFont.style(e)}
-  color: ${(e) => e.theme.colors.primary};
-`, H = i(y)`
-  ${({ windowSize: e }) => b.walletSubTitleFont.style(e)}
-  color: ${(e) => e.theme.colors.hero};
-  margin-left: ${o.sp9};
-`, Ne = i(Ie)`
-  width: ${({ windowSize: e }) => p.openWalletIconWidthHeight.valuePx(e)};
-  height: ${({ windowSize: e }) => p.openWalletIconWidthHeight.valuePx(e)};
-  color: ${(e) => e.theme.colors.link};
-`, Je = i(Se)`
-  width: ${({ windowSize: e }) => p.openWalletIconWidthHeight.valuePx(e)};
-  height: ${({ windowSize: e }) => p.openWalletIconWidthHeight.valuePx(e)};
-`, Oe = i(je)`
-  height: ${o.sp4};
-  width: ${o.sp4};
-`, Xe = i(ve)`
-  height: ${o.sp4};
-  width: ${o.sp4};
-`, Ye = i.div`
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-`, Ze = i.div`
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  margin-top: ${({ windowSize: e }) => p.headingMarginTop.valuePx(e)};
-  margin-bottom: ${({ windowSize: e }) => p.headingMarginBottom.valuePx(e)};
-`, Qe = i.div`
-  ${(e) => e.windowSize === "small" ? "height: 100%;" : null};
-  display: flex;
-  justify-content: center;
-  ${(e) => e.windowSize === "small" ? B`
-          margin: ${o.sp0} ${o.sp3};
-        ` : B`
-          width: 100%;
-        `};
-`, Ue = i.div`
-  display: flex;
-  position: relative;
-  align-items: center;
-`, _e = i.div`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: ${(e) => p.chargeCardWidth.valuePx(e.windowSize)};
-  height: ${(e) => p.chargeCardHeight.valuePx(e.windowSize)};
-  transform: ${(e) => e.scaleCard ? e.flipCard ? "rotateY(180deg) scale(0.59)" : "rotateY(0deg) scale(0.59)" : "scale(1)"};
-  transition: transform 0.6s;
-  transform-style: preserve-3d;
-  border-radius: ${o.sp2};
-  box-shadow: ${(e) => `1px 3px ${o.sp4} ${o.sp0} ${e.theme.colors.chargeCardBackgroundShadow}`};
-`, qe = i.div`
-  position: relative;
-  height: 118px;
-  width: 182px;
-  margin: 13px;
-  margin-top: 60px;
-`, Ke = i(Ce)`
-  height: 36px;
-  width: 36px;
-  position: absolute;
-  right: -${o.sp2};
-  top: -${o.sp2};
-  color: ${(e) => e.theme.colors.hero};
-  opacity: ${(e) => e.showTick ? 0 : 1};
-  transition: opacity 0.5s linear;
-`, et = i(Te)`
-  height: 36px;
-  width: 36px;
-  position: absolute;
-  left: -${o.sp2};
-  top: -${o.sp2};
-  color: ${(e) => e.theme.colors.hero};
-  opacity: ${(e) => e.showTick ? 0 : 1};
-  transition: opacity 0.5s linear;
-`, tt = i(ke)`
-  height: 36px;
-  width: 36px;
-  position: absolute;
-  right: -${o.sp2};
-  bottom: -${o.sp2};
-  color: ${(e) => e.theme.colors.hero};
-  opacity: ${(e) => e.showTick ? 0 : 1};
-  transition: opacity 0.5s linear;
-`, ot = i(We)`
-  height: 36px;
-  width: 36px;
-  position: absolute;
-  left: -${o.sp2};
-  bottom: -${o.sp2};
-  color: ${(e) => e.theme.colors.hero};
-  opacity: ${(e) => e.showTick ? 0 : 1};
-  transition: opacity 0.3s linear;
-`, it = i.div`
-  height: 88%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  overflow: hidden;
-`, nt = i.div`
-  width: 230px;
-  height: 489px;
-  border: ${o.sp1} solid ${(e) => e.theme.colors.hero};
-  border-radius: ${o.sp4};
-  background: ${s.brandColorPearl};
-  transform: ${(e) => e.translatePhone ? "translateX(-200px)" : ""};
-  transition: transform 0.3s ease-in;
-  margin-top: ${o.sp11};
-  opacity: ${(e) => e.showIphone ? 1 : 0};
-`, st = i.div`
-  display: flex;
-  margin: ${o.sp2} 10px ${o.sp2} ${o.sp3};
-  justify-content: space-between;
-  align-items: center;
-`, at = i.div`
-  display: flex;
-  align-items: center;
-`, rt = i.div`
-  width: 76px;
-  display: flex;
-  border: 2px solid ${s.blackColor};
-  position: sticky;
-  bottom: ${o.sp0};
-  left: ${o.sp0};
-  right: ${o.sp0};
-  margin: ${o.sp2} auto;
-`, lt = i.div`
-  display: flex;
-  align-items: flex-end;
-`, dt = i.div`
-  height: ${(e) => `${e.towerIndex + 3}px`};
-  width: 2px;
-  margin-right: 1px;
-  background-color: ${(e) => e.towerIndex === 3 ? s.phoneSignalColor : s.blackColor};
-  border-radius: 0.5px;
-`, ct = i.div`
-  margin-top: ${o.sp2};
-  & .wave {
-    border: 2px solid transparent;
-    border-top-color: currentColor;
-    border-radius: 50%;
-    border-style: solid;
-    margin: 1px;
-  }
-`, pt = i.div`
-  border: 1px solid ${s.batteryBorderColor};
-  border-radius: 2px;
-`, ht = i.div`
-  width: 10px;
-  height: ${o.sp1};
-  background-color: ${s.blackColor};
-  margin: 1px;
-  border-radius: 1px;
-`, gt = i.div`
-  width: 1px;
-  height: 3px;
-  background-color: ${s.batteryBorderColor};
-  margin-left: 0.5px;
-  border-top-right-radius: 1px;
-  border-bottom-right-radius: 1px;
-`, xt = i(fe)``, C = i.div``, mt = i(be)`
-  width: ${o.sp7};
-  height: ${o.sp7};
-  color: ${s.success};
-  margin-top: ${o.sp4};
-  opacity: ${(e) => e.showTick ? 1 : 0};
-  transition: opacity 0.5s linear;
-`, ut = i(we)`
-  color: ${s.primaryLight};
-  opacity: ${(e) => e.showTick ? 1 : 0};
-  transition: opacity 0.5s linear;
-`, $t = i.div`
-  border: 2px solid ${s.brandColorJade};
-  height: 97%;
-  border-radius: ${o.sp2};
-  background-color: ${s.brandColorJade};
-  transform: ${(e) => e.translateCardSkelton ? "translateX(0px)" : "translateX(-250px)"};
-  transition: transform 0.3s ease-in;
-  background-image: linear-gradient(
-    to bottom,
-    hsla(0, 0%, 100%, 0.8),
-    hsla(0, 0%, 100%, 0.8)
-  );
-`, ft = i.div`
-  width: ${(e) => e.lineIndex === 0 ? "66px" : e.lineIndex === 1 ? "112px" : "55px"};
-  border: 2px solid ${s.brandColorGold};
-  margin-bottom: ${(e) => e.lineIndex === 1 ? "22px" : "12px"};
-  border-radius: ${o.sp2};
-  margin-left: ${o.sp3};
-  margin-top: ${(e) => e.lineIndex === 0 ? o.sp4 : o.sp0};
-`, yt = i(ye)`
-  color: ${(e) => e.theme.colors.brandColorJade};
-  width: ${o.sp3};
-  height: ${o.sp3};
-  position: absolute;
-  right: ${o.sp2};
-  top: ${o.sp3};
-`, bt = i.div`
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-`, wt = i(y)`
-  ${(e) => `${b.headingFont.style(e.windowSize)}`};
-  ${(e) => e.windowSize === "small" && "white-space: pre;"}
-  color: ${(e) => e.theme.colors.primary};
-  text-align: center;
-`, St = i(y)`
-  ${(e) => `${b.subheadingFont.style(e.windowSize)}`};
-  color: ${(e) => e.theme.colors.primary};
-  text-align: center;
-`, vt = i.div`
-  display: flex;
-  justify-content: center;
-`, jt = i.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  flex: 1;
-  width: 100%;
-  height: 100%;
-  background-image: ${(e) => `url(https://storage.googleapis.com/zeni-apis.appspot.com/images/cards-signup-background-${e.windowSize === "small" ? "m" : "w"}-${e.theme.mode === "dark" ? "d" : "l"}.svg)`};
-  background-color: ${(e) => e.theme.colors.grey4};
-  background-size: cover;
-  background-position: ${(e) => e.windowSize === "small" ? "center" : "right"};
-  background-repeat: no-repeat;
-`, Ct = i.div`
-  position: fixed;
-  bottom: ${o.sp0};
-  left: ${o.sp0};
-  right: ${o.sp0};
-  margin: ${o.sp0} auto;
-  display: flex;
-  justify-content: center;
-  height: ${o.sp12};
-  align-items: center;
-  background-color: ${(e) => e.theme.colors.grey5};
-`, Tt = i.div`
-  margin-right: -92px;
-  margin-top: -92px;
-  z-index: 5;
-`;
-export {
-  Ft as default
-};