@zeniai/web-components 3.16.31 → 3.16.32

package/dist/SpendMgmtSetupAccountSection-BZ6YBI9L.js

@@ -1,875 +0,0 @@
-import { j as t, d as Ye, u as Ke, m as Qe, aD as Xe, b as se } from "./vendor-.pnpm-DxbX2tX4.js";
-import { useRef as Fe, useState as Q, useCallback as be, useEffect as M } from "react";
-import o from "@emotion/styled";
-import { createPortal as et } from "react-dom";
-import { isVerifiedPaymentAccountProviderStatusCode as tt, isVerifiedStatusCode as $e, zeniDate as Ce } from "@zeniai/client-epic-state";
-import { u as Te, a as X, j as U, hM as Re, S as i, A as ue, R as d, av as ze, E as Be, J as De, D as a, aD as re, eN as it, aC as ot, hN as nt, hO as at, M as lt, a5 as st, hG as Pe, hH as ke, C as k, hI as rt, hP as ct, hJ as dt, G as ht, Z as je, am as ut, a1 as gt, hQ as pt, hR as ft, X as xt } from "./index-BcmM9nFj.js";
-import { C as mt } from "./ChargeCardUtils-CjQgqDbz.js";
-import { C as St } from "./CreditCardPaymentPlgSection-Cmrbj4Ya.js";
-import { C as wt } from "./ChaseOverlay-D7OybUeO.js";
-import { S as vt } from "./SetUpDefaultSection-B4Tvbzll.js";
-const F = {
-  sectionWidth: new d(343, 580, 726),
-  rowGap: new d(a[2], a[3]),
-  footerPaddingLeftRight: new d(a[3], a[4]),
-  footerMarginTop: new d(a[3], a[4])
-}, bt = {
-  title: new ze("standardMedium", "largeMedium")
-};
-function $t({
-  plaidConnectionDetails: e,
-  header: u,
-  isAccountsEnabled: b = !0,
-  analytics: x,
-  pageName: w,
-  accountsPromoConfig: $,
-  style: T,
-  onConnectClick: E,
-  onSignUpClick: R
-}) {
-  const h = Te(), { setUp: r } = X.getLocalizedStrings().commonSetUp, f = e.link_account, j = f.fetchStatus.fetchState === "In-Progress" || f.updateStatus.fetchState === "In-Progress";
-  return /* @__PURE__ */ t.jsxs(
-    Ct,
-    {
-      windowSize: h,
-      style: T,
-      "data-testid": U("default-account-section", w),
-      children: [
-        /* @__PURE__ */ t.jsx(Pt, { children: /* @__PURE__ */ t.jsx(kt, { windowSize: h, children: u }) }),
-        /* @__PURE__ */ t.jsxs(jt, { windowSize: h, width: T?.width, children: [
-          /* @__PURE__ */ t.jsx(
-            Re,
-            {
-              heading: r.accountsPlg.heading,
-              buttonText: r.accountsPlg.signUpButtonText,
-              onSignUpClick: R,
-              isAccountsEnabled: b,
-              pageName: w,
-              analytics: x,
-              style: {
-                borderTopLeftRadius: i.sp2,
-                borderTopRightRadius: i.sp2
-              },
-              accountsPromoConfig: $
-            }
-          ),
-          /* @__PURE__ */ t.jsxs(It, { windowSize: h, children: [
-            /* @__PURE__ */ t.jsxs(Lt, { onClick: E, children: [
-              /* @__PURE__ */ t.jsx(_t, { isLoading: j, children: r.connectExternalAccount }),
-              j ? null : /* @__PURE__ */ t.jsx(Tt, { className: "right-arrow" })
-            ] }),
-            j ? /* @__PURE__ */ t.jsx(yt, { children: /* @__PURE__ */ t.jsx(
-              ue,
-              {
-                size: "ExtraSmall",
-                start: !0,
-                style: { display: "flex" }
-              }
-            ) }) : null
-          ] })
-        ] })
-      ]
-    }
-  );
-}
-const Ct = o.div`
-  display: flex;
-  flex-direction: column;
-  row-gap: ${(e) => F.rowGap.valuePx(e.windowSize)};
-`, Pt = o.div`
-  display: flex;
-  align-items: center;
-`, kt = o.div`
-  display: flex;
-  align-items: center;
-  color: ${(e) => e.theme.colors.primary};
-  ${(e) => `${bt.title.style(e.windowSize)}`};
-`, jt = o.div`
-  width: ${(e) => e.width != null ? e.width : F.sectionWidth.valuePx(e.windowSize)};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-  box-shadow: ${(e) => `${i.sp0} 2px ${i.sp1} ${e.theme.colors.dropShadowNormal}`};
-  border-radius: ${i.sp2};
-  &:hover {
-    border: ${(e) => `1px solid  ${e.theme.colors.primary}`};
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, yt = o.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: ${i.sp2};
-`, It = o(Be)`
-  display: flex;
-  align-items: center;
-  padding-top: ${i.sp1};
-  padding-bottom: ${i.sp1};
-  padding-left: ${(e) => F.footerPaddingLeftRight.valuePx(e.windowSize)};
-  padding-right: ${(e) => F.footerPaddingLeftRight.valuePx(e.windowSize)};
-  background: ${(e) => e.theme.colors.grey4};
-  border-radius: ${i.sp0} ${i.sp0} ${i.sp2} ${i.sp2};
-  color: ${(e) => e.theme.colors.hero};
-`, Lt = o.div`
-  display: flex;
-  align-items: center;
-  :hover {
-    cursor: pointer;
-    color: ${(e) => e.theme.colors.primary};
-    .right-arrow {
-      color: ${(e) => e.theme.colors.primary};
-    }
-  }
-`, _t = o.span`
-  pointer-events: ${(e) => e.isLoading === !0 ? "none" : "initial"};
-`, Tt = o(De)`
-  margin-left: ${i.sp1};
-  width: 12px;
-  height: 12px;
-  cursor: pointer;
-  color: ${(e) => e.theme.colors.hero};
-`, s = {
-  labelWidth: new d(120, 190, 190),
-  sectionWidth: new d(343, 580, 726),
-  iconContainerMaxWidthHeight: new d(a[6], a[7]),
-  iconPadding: new d(10, 12),
-  rowGap: new d(a[2], a[3]),
-  elementsMarginLeftRight: new d(a[3], a[4]),
-  labeledFieldPaddingLeft: new d(a[3], a[0]),
-  labeledFieldPaddingRight: new d(a[3], a[2]),
-  labeledFieldPaddingTop: new d(a[3], a[3]),
-  labeledFieldPaddingBottom: new d(a[3], a[2]),
-  labeleMarginLeft: new d(a[0], a[4]),
-  labeleMarginBottom: new d(a[2], a[0]),
-  infoLabelPaddingRight: new d(a[0], a[3]),
-  infoLabelMarginTop: new d(a[1], a[0]),
-  iconWidthHeight: new d(20, a[4])
-}, Rt = {
-  title: new ze("standardSemiBold", "largeSemiBold")
-};
-function fi({
-  primaryFundingAccount: e,
-  allFundingAccounts: u,
-  allBankAccounts: b,
-  plaidConnectionDetails: x,
-  sectionId: w,
-  isDisabled: $,
-  icon: T,
-  sectionTitle: E,
-  style: R,
-  analytics: h,
-  productType: r,
-  referrer: f,
-  accountSelectContainerStyle: j,
-  connectedAccountProvider: te,
-  isCompleted: V = !1,
-  showCompletedIcon: G = !1,
-  showZeniAccountSection: ie = !0,
-  isAccountsEnabled: C,
-  accountsPromoConfig: y,
-  pageName: Z,
-  onFetchLinkTokenClick: I,
-  onEstablishConnectionClick: q,
-  onUpdatePaymentAccountStatus: z,
-  onEstablishConnectionSuccess: O,
-  onSignUpClick: oe,
-  bottomComponent: Me
-}) {
-  const n = Te(), {
-    trigger: Ee,
-    formState: { errors: Oe }
-  } = Ye(), A = Fe(null), B = Ke(), { setUp: g } = X.getLocalizedStrings().commonSetUp, J = X.getLocalizedStrings().spendManagement.chargeCard.payEarly;
-  let v, ge, c, m = !1;
-  e != null && e.accType === "paymentAccount" && (v = e.providerVerificationStatus, ge = e?.institutionDetails, c = v?.code, m = e?.isLoginRequired ?? !1);
-  const ne = ye(w, "account"), Ae = Qe(Oe, ne), [L, Y] = Q(
-    void 0
-  ), p = x.link_account, _ = x.update_account, S = L === "update_account" ? _ : p, [D, pe] = Q(S.linkToken ?? null), [W, K] = Q(!1), [We, fe] = Q(!1), xe = re(
-    p.updateStatus.fetchState
-  ), ae = re(
-    _.updateStatus.fetchState
-  ), He = re(
-    _.fetchStatus.fetchState
-  ), Ne = be(
-    (l, P) => {
-      h.trackConnectBankSuccess(r, f);
-      const ve = P.accounts.find(
-        (Je) => Je.id === e?.providerAccountId
-      ) ?? P.accounts[0];
-      e?.id != null && L === "update_account" && ve?.verification_status != null && !m ? z(
-        ve?.verification_status,
-        e.id,
-        "update_account"
-      ) : q(l, L), Y(void 0), K(!1);
-    },
-    [
-      h,
-      f,
-      r,
-      e?.id,
-      e?.providerAccountId,
-      L,
-      m,
-      z,
-      q
-    ]
-  ), Ue = be(
-    (l, P) => {
-      l != null && (h.trackConnectBankFailure(
-        r,
-        l.error_code + " " + l.error_message,
-        f
-      ), l.error_code === "TOO_MANY_VERIFICATION_ATTEMPTS" && e?.id != null && z(
-        "verification_failed",
-        e.id,
-        "update_account"
-      ), console.log("Plaid Connection Error", l, P)), Y(void 0), K(!1);
-    },
-    [
-      h,
-      r,
-      f,
-      e?.id,
-      z
-    ]
-  ), { open: H, ready: me } = Xe({
-    token: D,
-    onSuccess: Ne,
-    onExit: Ue
-  });
-  M(() => {
-    (xe === "In-Progress" && p.updateStatus.fetchState === "Completed" || ae === "In-Progress" && _.updateStatus.fetchState === "Completed") && (tt(c ?? "") || (I("link_account"), O()));
-  }, [
-    p.updateStatus.fetchState,
-    O,
-    I,
-    e?.providerVerificationStatus?.code,
-    e?.id,
-    xe,
-    ae,
-    _.updateStatus.fetchState,
-    c
-  ]), M(() => {
-    ($e(c ?? "") || c === "verification_failed") && !W && L != null && S.linkToken === D && S.fetchStatus.fetchState === "Completed" && me && K(!0);
-  }, [
-    me,
-    D,
-    S.fetchStatus.fetchState,
-    S.linkToken,
-    c,
-    L,
-    W
-  ]), M(() => {
-    S.fetchStatus.fetchState === "Completed" && S.linkToken != null && S.linkToken !== D && pe(S.linkToken);
-  }, [S.fetchStatus.fetchState, S.linkToken, D]), M(() => {
-    W && H();
-  }, [W, H]), M(() => {
-    !e?.zeniAccountId && !Ae && Ee(ne);
-  }, [e?.id]), M(() => {
-    (c == null || c === "verification_failed" || c === "verification_expired" || $e(c)) && (Ce((/* @__PURE__ */ new Date()).toISOString()).isAfter(
-      p.expiration
-    ) || p.linkToken == null) && I("link_account");
-  }, []);
-  const Ve = () => {
-    h.trackConnectBankGetBalance(r, f), Y("update_account"), I("update_account", e?.id);
-  }, Se = `${e?.accountSubType?.name != null ? e?.accountSubType?.name.substring(0, 1).toUpperCase().concat(e?.accountSubType?.name.substring(1)) : ""} ${e?.maskedAccountNumber ?? ""}`.trim(), le = p.fetchStatus.fetchState === "In-Progress" || p.updateStatus.fetchState === "In-Progress", Ge = u.findIndex(
-    (l) => l.id === e?.id
-  ), Ze = () => {
-    fe(!0);
-  }, qe = B.mode === "light" ? new se(B.colors.brandColorJadeLight) : new se(B.colors.brandColorJadeDark);
-  if (e == null && u.length === 0)
-    return r === "zeni_accounts" ? /* @__PURE__ */ t.jsx(
-      vt,
-      {
-        onClick: () => {
-          (c == null || c === "verification_failed" || c === "verification_expired") && (h.trackConnectBank(r, f), H());
-        },
-        title: g.achTitle,
-        subTitle: g.achSubTitle,
-        header: g.paymentSource,
-        isCompleted: V,
-        showCompletedIcon: G,
-        icon: {
-          element: /* @__PURE__ */ t.jsx(
-            it,
-            {
-              width: s.iconWidthHeight.valuePx(n),
-              height: s.iconWidthHeight.valuePx(n)
-            }
-          ),
-          color: new se(qe)
-        },
-        isLoading: le,
-        status: v
-      }
-    ) : /* @__PURE__ */ t.jsx(Ie, { windowSize: n, style: R, children: /* @__PURE__ */ t.jsx(
-      $t,
-      {
-        header: g.paymentSource,
-        plaidConnectionDetails: x,
-        onConnectClick: () => {
-          (c == null || c === "verification_failed" || c === "verification_expired") && (h.trackConnectBank(r, f), H());
-        },
-        onSignUpClick: oe,
-        isAccountsEnabled: !1,
-        analytics: h,
-        pageName: Z,
-        accountsPromoConfig: y
-      }
-    ) });
-  const we = ge?.zeniInstitutionId.toLowerCase() === "chase";
-  return /* @__PURE__ */ t.jsxs(Ie, { windowSize: n, style: R, children: [
-    We === !0 ? et(
-      /* @__PURE__ */ t.jsx(
-        wt,
-        {
-          connectedAccountProvider: te,
-          action: {
-            onBackClick: () => fe(!1)
-          }
-        }
-      ),
-      document.body
-    ) : null,
-    /* @__PURE__ */ t.jsxs(qt, { children: [
-      G === !0 ? /* @__PURE__ */ t.jsx(Yt, { children: V ? /* @__PURE__ */ t.jsx(Kt, {}) : /* @__PURE__ */ t.jsx(Qt, {}) }) : null,
-      /* @__PURE__ */ t.jsx(Jt, { windowSize: n, children: E ?? g.paymentSource })
-    ] }),
-    /* @__PURE__ */ t.jsxs(Zt, { windowSize: n, isDisabled: m, children: [
-      /* @__PURE__ */ t.jsxs(Et, { windowSize: n, children: [
-        /* @__PURE__ */ t.jsxs(Ht, { children: [
-          e != null ? /* @__PURE__ */ t.jsx(Wt, { isDisabled: m, children: zt(
-            T,
-            n,
-            B.mode === "dark",
-            e,
-            Ge
-          ) }) : null,
-          /* @__PURE__ */ t.jsxs(ii, { children: [
-            /* @__PURE__ */ t.jsxs(Xt, { children: [
-              /* @__PURE__ */ t.jsx(
-                ot,
-                {
-                  ref: A,
-                  style: {
-                    display: n === "small" ? "block" : "inherit",
-                    width: "-webkit-fill-available"
-                  },
-                  customStyleConfig: {
-                    menu: () => ({
-                      width: n === "small" ? "100%" : "510px"
-                    })
-                  },
-                  controlProperty: {
-                    controlHeight: a[4],
-                    fontWeight: lt.medium,
-                    highlightOnHover: !1,
-                    leftRightMargin: !1,
-                    fieldWidth: n === "small" ? 240 : 300
-                  },
-                  customPlaceholder: {
-                    color: B.colors.hero,
-                    weight: 500
-                  },
-                  name: ye(w, "fundingAccount"),
-                  placeholder: g.selectAccountPlaceholder,
-                  capitalizeOptions: !0,
-                  appendSublabel: !1,
-                  showLogoInSingleValue: !1,
-                  isClearable: !1,
-                  maxMenuHeight: 220,
-                  valueToLogo: (l, P) => at(
-                    u,
-                    l,
-                    P
-                  ),
-                  valueToSubLabels: (l, P) => nt(
-                    u,
-                    l,
-                    P,
-                    !1
-                  ),
-                  defaultValue: {
-                    selectedOption: e?.id,
-                    allOptions: u.map(
-                      (l) => ({
-                        label: l.label,
-                        value: l.id,
-                        isRecommended: l.accType === "depositAccount"
-                      })
-                    )
-                  },
-                  textAlignment: "left",
-                  showDownChevronIcon: !0,
-                  showTickIcon: !1,
-                  isOptionRemovable: !1,
-                  registerOptions: {
-                    required: !1
-                  },
-                  showCreateOption: !0,
-                  isDisabled: le ? "disabled" : void 0,
-                  showLoadingIcon: le,
-                  onClickCreateOption: () => {
-                    h.trackConnectBank(r, f), Y("link_account"), p.linkToken == null || Ce((/* @__PURE__ */ new Date()).toISOString()).isAfter(
-                      p.expiration
-                    ) ? I("link_account") : D !== p.linkToken ? pe(p.linkToken) : W ? H() : K(!0);
-                  }
-                }
-              ),
-              /* @__PURE__ */ t.jsxs(Ut, { isDisabled: m, children: [
-                Se ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-                  /* @__PURE__ */ t.jsx(ee, { children: Se }),
-                  n !== "small" && (c !== "verification_failed" && e?.providerVerificationStatus?.code === "pending_manual_verification" || m || we || e?.accountBalance?.available) ? /* @__PURE__ */ t.jsx(ei, {}) : null
-                ] }) : null,
-                c !== "verification_failed" && e?.providerVerificationStatus?.code === "pending_manual_verification" || m || we ? /* @__PURE__ */ t.jsx(
-                  Bt,
-                  {
-                    isUpdateLinkClicked: L === "update_account",
-                    isLoginRequired: m,
-                    isPendingVerification: c !== "verification_failed" && e?.providerVerificationStatus?.code === "pending_manual_verification",
-                    productType: r,
-                    fetchAndUpdateStatues: {
-                      fetchStatus: _.fetchStatus,
-                      updateStatus: _.updateStatus,
-                      linkFetchStatus: p.fetchStatus,
-                      linkUpdateStatus: p.updateStatus,
-                      prevFetchState: He,
-                      prevUpdateState: ae
-                    },
-                    onUpdateLinkTokenClick: Ve,
-                    onChaseInfoClick: Ze
-                  }
-                ) : e?.accountBalance?.available ? /* @__PURE__ */ t.jsx(ee, { children: st(
-                  "0,0[.]00",
-                  e?.accountBalance?.available
-                ) }) : null
-              ] })
-            ] }),
-            v != null && n === "small" ? /* @__PURE__ */ t.jsx(
-              Pe,
-              {
-                style: {
-                  width: "max-content",
-                  padding: 0,
-                  marginTop: i.sp2
-                },
-                tagTitle: v.name,
-                textColor: ke(
-                  v.code
-                )
-              }
-            ) : null
-          ] })
-        ] }),
-        /* @__PURE__ */ t.jsx(Nt, { children: v != null && n !== "small" ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-          /* @__PURE__ */ t.jsx(
-            Pe,
-            {
-              style: { width: "max-content" },
-              tagTitle: v.name,
-              textColor: ke(
-                v.code
-              )
-            }
-          ),
-          /* @__PURE__ */ t.jsx(Ft, {})
-        ] }) : null })
-      ] }),
-      ie ? /* @__PURE__ */ t.jsxs(
-        Ot,
-        {
-          style: j,
-          windowSize: n,
-          isDisabled: m,
-          onClick: (l) => l.stopPropagation(),
-          "data-testid": U(
-            "account-select-container",
-            r
-          ),
-          children: [
-            /* @__PURE__ */ t.jsx(
-              At,
-              {
-                isDisabled: m ? "disabled" : $,
-                label: {
-                  label: g.zeniCashAccountLabel,
-                  width: n === "small" ? void 0 : s.labelWidth.value(n),
-                  style: {
-                    marginLeft: s.labeleMarginLeft.valuePx(n),
-                    marginBottom: s.labeleMarginBottom.valuePx(n)
-                  }
-                },
-                style: {
-                  paddingTop: s.labeledFieldPaddingTop.valuePx(n),
-                  paddingBottom: s.labeledFieldPaddingBottom.valuePx(n),
-                  paddingLeft: s.labeledFieldPaddingLeft.valuePx(n),
-                  paddingRight: s.labeledFieldPaddingRight.valuePx(n),
-                  borderRadius: i.sp2,
-                  border: `1px solid ${B.colors.grey3}`,
-                  width: "-webkit-fill-available",
-                  display: n === "small" ? "block" : "inherit"
-                },
-                infoLabelStyle: {
-                  textAlign: n === "small" ? "left" : "right",
-                  paddingRight: s.infoLabelPaddingRight.valuePx(n),
-                  marginTop: s.infoLabelMarginTop.valuePx(n)
-                },
-                singleSelectPickerField: {
-                  name: ne,
-                  placeholder: g.zeniCashAccountPlaceholder,
-                  style: { position: "relative" },
-                  defaultValue: {
-                    selectedOption: e?.zeniAccountId ?? "",
-                    allOptions: b.map((l) => ({
-                      label: l.accountName,
-                      value: l.accountId
-                    }))
-                  },
-                  isOptionRemovable: !1,
-                  withBorder: n === "small",
-                  textAlignment: n === "small" ? "left" : "right",
-                  registerOptions: {
-                    required: !1
-                  }
-                },
-                valueToAdditionalLabel: () => g.zeniCashAcoountInfo
-              }
-            ),
-            Me
-          ]
-        }
-      ) : null,
-      e?.accType === "paymentAccount" ? r === "charge_cards" ? /* @__PURE__ */ t.jsx(
-        St,
-        {
-          style: {
-            borderRadius: `${i.sp0} ${i.sp0} ${i.sp2} ${i.sp2}`
-          },
-          maxInsuredAmount: y.maxInsuredAmount,
-          heading: /* @__PURE__ */ t.jsxs(Dt, { windowSize: n, children: [
-            J.earn,
-            /* @__PURE__ */ t.jsx(Mt, { children: J.percentageCashback.replace(
-              "__percentage__",
-              mt
-            ) }),
-            J.whenYouPayViaZeniChecking
-          ] }),
-          buttonText: C === !1 ? g.accountsPlg.signUpButtonText : g.accountsPlg.switchButtonText,
-          isAccountsEnabled: C,
-          pageName: J.creditCardPayment,
-          onSignUpClick: oe,
-          onSwitchClick: () => {
-            A.current != null && A.current.focus();
-          }
-        }
-      ) : r !== "zeni_accounts" ? /* @__PURE__ */ t.jsx(
-        Re,
-        {
-          heading: g.accountsPlg.heading,
-          style: {
-            borderBottomLeftRadius: i.sp2,
-            borderBottomRightRadius: i.sp2
-          },
-          isAccountsEnabled: C,
-          buttonText: C === !1 ? g.accountsPlg.signUpButtonText : g.accountsPlg.switchButtonText,
-          analytics: h,
-          pageName: Z,
-          onSignUpClick: oe,
-          onSwitchClick: () => {
-            A.current != null && A.current.focus();
-          },
-          accountsPromoConfig: y
-        }
-      ) : null : null
-    ] })
-  ] });
-}
-const zt = (e, u, b, x, w, $) => x?.accType === "depositAccount" ? /* @__PURE__ */ t.jsx(oi, { isOptionSelected: !0, children: /* @__PURE__ */ t.jsx(
-  ni,
-  {
-    color: ct(w ?? 0)
-  }
-) }) : x?.institutionDetails?.logo?.base64 != null ? /* @__PURE__ */ t.jsx(
-  ti,
-  {
-    windowSize: u,
-    src: `${dt}${x?.institutionDetails.logo?.base64.toString()}`,
-    alt: x?.institutionDetails.institutionName,
-    loading: "lazy"
-  }
-) : $ === !0 ? e.element : /* @__PURE__ */ t.jsx(
-  Gt,
-  {
-    iconColor: e.color,
-    windowSize: u,
-    isDarkMode: b,
-    children: e.element
-  }
-), Bt = ({
-  productType: e,
-  isLoginRequired: u,
-  isUpdateLinkClicked: b,
-  isPendingVerification: x,
-  fetchAndUpdateStatues: w,
-  onUpdateLinkTokenClick: $,
-  onChaseInfoClick: T
-}) => {
-  const { commonSetUp: E } = X.getLocalizedStrings(), { setUp: R } = E, {
-    verifyAccount: h,
-    verifyingAccount: r,
-    verifyAccountError: f,
-    reLogging: j,
-    reLoginLabel: te,
-    reLoginError: V,
-    reLoginMessage: G,
-    chaseLabel: ie
-  } = R, {
-    fetchStatus: C,
-    updateStatus: y,
-    linkFetchStatus: Z,
-    linkUpdateStatus: I,
-    prevFetchState: q,
-    prevUpdateState: z
-  } = w, O = b && q === "In-Progress" && C?.fetchState === "Error" || z === "In-Progress" && y?.fetchState === "Error";
-  return u ? b && (C?.fetchState === "In-Progress" || y?.fetchState === "In-Progress" || Z?.fetchState === "In-Progress" || I?.fetchState === "In-Progress") ? /* @__PURE__ */ t.jsxs(N, { style: { color: k.important }, children: [
-    /* @__PURE__ */ t.jsx(ee, { children: j }),
-    /* @__PURE__ */ t.jsx(_e, { children: /* @__PURE__ */ t.jsx(
-      ue,
-      {
-        size: "Small",
-        start: !0,
-        style: { display: "flex", color: k.important }
-      }
-    ) })
-  ] }) : /* @__PURE__ */ t.jsx(
-    N,
-    {
-      style: { cursor: "pointer" },
-      onClick: $,
-      "data-testid": U("re-login-label-clicked"),
-      children: /* @__PURE__ */ t.jsx(
-        je,
-        {
-          style: {
-            padding: `12px ${i.sp3}`
-          },
-          title: G,
-          placement: "bottom",
-          maxWidth: "264px",
-          children: /* @__PURE__ */ t.jsxs(Vt, { children: [
-            /* @__PURE__ */ t.jsx(
-              Le,
-              {
-                style: { marginLeft: i.sp0, marginRight: i.sp1 }
-              }
-            ),
-            /* @__PURE__ */ t.jsx(ce, { isError: !0, style: { color: k.important }, children: O ? V : te }),
-            /* @__PURE__ */ t.jsx(de, { children: /* @__PURE__ */ t.jsx(he, { style: { color: k.important } }) })
-          ] })
-        }
-      )
-    }
-  ) : C?.fetchState === "In-Progress" || y?.fetchState === "In-Progress" ? /* @__PURE__ */ t.jsxs(N, { children: [
-    /* @__PURE__ */ t.jsx(ee, { children: r }),
-    /* @__PURE__ */ t.jsx(_e, { children: /* @__PURE__ */ t.jsx(
-      ue,
-      {
-        size: "Small",
-        start: !0,
-        style: { display: "flex" }
-      }
-    ) })
-  ] }) : x ? /* @__PURE__ */ t.jsxs(
-    N,
-    {
-      onClick: $,
-      "data-testid": U(
-        "verify-account-label-clicked",
-        e
-      ),
-      children: [
-        /* @__PURE__ */ t.jsx(ce, { isError: !1, children: h }),
-        /* @__PURE__ */ t.jsx(de, { children: /* @__PURE__ */ t.jsx(he, {}) }),
-        O ? /* @__PURE__ */ t.jsx(
-          je,
-          {
-            maxWidth: "280px",
-            style: {
-              padding: `12px ${i.sp3}`,
-              color: k.important
-            },
-            title: f,
-            placement: "bottom",
-            children: /* @__PURE__ */ t.jsx(Le, {})
-          }
-        ) : null
-      ]
-    }
-  ) : /* @__PURE__ */ t.jsxs(
-    N,
-    {
-      onClick: T,
-      "data-testid": U("chase-info-label-clicked"),
-      children: [
-        /* @__PURE__ */ t.jsx(ce, { isError: !1, children: ie }),
-        /* @__PURE__ */ t.jsx(de, { children: /* @__PURE__ */ t.jsx(he, {}) })
-      ]
-    }
-  );
-}, ye = (e, u) => `${e}.${u}`, Dt = o(gt)`
-  color: ${(e) => e.theme.colors.primary};
-  width: ${(e) => e.windowSize === "small" ? "80%" : "100%"};
-`, Mt = o(pt)`
-  color: ${(e) => e.theme.colors.primary};
-`, Ie = o.div`
-  display: flex;
-  flex-direction: column;
-  row-gap: ${(e) => s.rowGap.valuePx(e.windowSize)};
-`, Et = o.div`
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  justify-content: space-between;
-  margin-left: ${(e) => s.elementsMarginLeftRight.valuePx(e.windowSize)};
-  margin-right: ${(e) => s.elementsMarginLeftRight.valuePx(e.windowSize)};
-  margin-top: ${i.sp4};
-  margin-bottom: ${i.sp0};
-`, Ot = o.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  margin-left: ${(e) => s.elementsMarginLeftRight.valuePx(e.windowSize)};
-  margin-right: ${(e) => s.elementsMarginLeftRight.valuePx(e.windowSize)};
-  margin-top: ${i.sp3};
-  margin-bottom: ${i.sp4};
-  opacity: ${(e) => e.isDisabled ? 0.4 : 1};
-`, At = o(
-  ut
-)`
-  border-radius: ${i.sp2};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-`, Wt = o.div`
-  display: flex;
-  opacity: ${(e) => e.isDisabled ? 0.8 : 1};
-`, Ht = o.div`
-  display: flex;
-  align-items: flex-start;
-`, Nt = o.div`
-  display: flex;
-`, Ut = o(ht)`
-  display: flex;
-  align-items: center;
-  color: ${(e) => e.isDisabled ? e.theme.colors.grey1 : e.theme.colors.hero};
-  flex-wrap: wrap;
-`, ee = o.div`
-  display: flex;
-`, ce = o.div`
-  :hover {
-    cursor: pointer;
-    color: ${(e) => e.isError ? e.theme.colors.important : e.theme.colors.primary};
-  }
-`, N = o(Be)`
-  display: flex;
-  align-items: center;
-`, Vt = o.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`, Gt = o.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: ${(e) => s.iconPadding.valuePx(e.windowSize)};
-  background: ${(e) => e.iconColor.toString()};
-  border-radius: ${i.sp11};
-  width: fit-content;
-  height: fit-content;
-  color: ${(e) => e.isDarkMode ? k.neutralGrey5Light : e.theme.colors.brandColorOnyx}; // As per design
-  max-width: ${(e) => s.iconContainerMaxWidthHeight.valuePx(e.windowSize)};
-  max-height: ${(e) => s.iconContainerMaxWidthHeight.valuePx(e.windowSize)};
-  margin-right: ${i.sp2};
-`, Zt = o.div`
-  display: flex;
-  flex-direction: column;
-  width: ${(e) => s.sectionWidth.valuePx(e.windowSize)};
-  background-color: ${(e) => e.theme.colors.grey5};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-  box-shadow: ${(e) => `${i.sp0} 2px ${i.sp1} ${e.theme.colors.dropShadowNormal}`};
-  border-radius: ${i.sp2};
-  color: ${(e) => e.theme.colors.grey1};
-  justify-content: space-between;
-  box-sizing: border-box;
-  ${(e) => e.isDisabled === !1 && `
-    &:hover {
-      border: 1px solid ${e.theme.colors.primary};
-      color: ${e.theme.colors.primary};
-    }
-    `}
-`, qt = o.div`
-  display: flex;
-  align-items: center;
-`, Jt = o.div`
-  color: ${(e) => e.theme.colors.primary};
-  ${(e) => `${Rt.title.style(e.windowSize)}`};
-`, Yt = o.div`
-  margin-right: ${i.sp2};
-`, Kt = o(rt)`
-  width: ${i.sp3};
-  height: ${i.sp3};
-  color: ${k.success};
-`, Qt = o.div`
-  height: 14px;
-  width: 14px;
-  border: 1px solid ${(e) => e.theme.colors.primary};
-  border-radius: 50%;
-`, Xt = o.div``, Ft = o.div`
-  width: ${i.sp4};
-  height: ${i.sp4};
-  margin-left: ${i.sp4};
-`, ei = o.div`
-  display: inline-block;
-  border-radius: ${i.sp2};
-  margin: ${i.sp0} 12px;
-  width: ${i.sp1};
-  height: ${i.sp1};
-  cursor: inherit;
-  background-color: ${(e) => e.theme.colors.grey1};
-`, ti = o.img`
-  width: ${(e) => s.iconContainerMaxWidthHeight.valuePx(e.windowSize)};
-  height: ${(e) => s.iconContainerMaxWidthHeight.valuePx(e.windowSize)};
-  border-radius: ${i.sp11};
-  margin-right: ${i.sp2};
-`, ii = o.div`
-  display: flex;
-  flex-direction: column;
-`, de = o.div`
-  display: flex;
-  color: inherit;
-  margin-left: ${i.sp1};
-`, he = o(De)`
-  width: 12px;
-  height: 12px;
-`, Le = o(xt)`
-  display: flex;
-  margin-left: 12px;
-  width: ${i.sp3};
-  height: ${i.sp3};
-  color: ${k.important};
-`, _e = o.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: ${i.sp2};
-`, oi = o.div`
-  min-width: ${(e) => e.isOptionSelected ? i.sp4 : i.sp5};
-  width: ${(e) => e.isOptionSelected ? i.sp7 : i.sp5};
-  height: ${(e) => e.isOptionSelected ? i.sp7 : i.sp5};
-  margin-right: ${i.sp2};
-`, ni = o(ft)`
-  min-width: inherit;
-  width: inherit;
-  height: inherit;
-`;
-export {
-  Bt as P,
-  fi as S,
-  zt as g,
-  ye as u
-};