@zeniai/web-components 3.16.58 → 3.16.59

package/dist/SpendMgmtSetupAccountSection-D85QuYJt.js

@@ -0,0 +1,875 @@
+import { j as t, d as Ye, u as Ke, m as Qe, aD as Xe, b as se } from "./vendor-.pnpm-Q8NJHkXi.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-CkG1pP2v.js";
+import { C as mt } from "./ChargeCardUtils-Bfvw9nbm.js";
+import { C as St } from "./CreditCardPaymentPlgSection-B0SfyRlf.js";
+import { C as wt } from "./ChaseOverlay-COS1KOyZ.js";
+import { S as vt } from "./SetUpDefaultSection-BGTFeT8O.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
+};