@zeniai/web-components 3.16.91 → 3.16.92

package/dist/AddToWalletPage-DSV2Z0rM.js

@@ -0,0 +1,642 @@
+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-B_vMG-7O.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
+};