@zeniai/web-components 3.17.11 → 3.17.12

package/dist/BusinessVerificationPage-BZLeXO5x.js

@@ -0,0 +1,716 @@
+import { u as dt, j as a, g as mt, aw as pt, l as ut, h as ft, F as yt } from "./vendor-.pnpm-B2klaOGU.js";
+import { useState as ae, useCallback as ht, useEffect as De } from "react";
+import l from "@emotion/styled";
+import { reduceAllFetchState as gt, getFormattedAddress as M } from "@zeniai/client-epic-state";
+import { u as xt, aD as be, a as Oe, er as H, dM as Pe, ey as $e, ig as St, B as Ct, aE as wt, e as vt, aG as Tt, aP as Dt, aQ as bt, aR as Pt, A as $t, ao as It, S as r, R as C, E as Ve, ih as Bt, hM as Ie, hi as jt, H as Nt, b as Ft, o as Ae, aw as Lt, J as Ot, D as p } from "./index-HuMzFv1o.js";
+import { C as Vt, a as At } from "./CompanyOfficerDetailsSection-CUdWNGUM.js";
+const w = {
+  width: new C(343, 580, 726),
+  titleWidth: new C(343, 580, 726, 826),
+  subTitlePaddingTop: new C(12, p[3]),
+  subTitlePaddingBottom: new C(p[3], p[3]),
+  verificationDetailsRowGap: new C(12, p[5], p[5]),
+  termsPaddingLeftRight: new C(p[0], p[3]),
+  marginLeft: new C(p[4], p[0]),
+  containerPaddingLeft: new C(p[3], p[6], p[8]),
+  containerPaddingRight: new C(p[3], p[6], p[8]),
+  navBarContainerPaddingXaxis: new C(10, p[3])
+}, kt = {
+  stepTitle: new Lt("h6Regular", "h5Regular")
+}, Be = "businessVerificationPage", D = "companyDetails", b = "companyOfficerDetails", {
+  commonSetUp: { businessVerification: o },
+  common: {
+    settings: _t,
+    currency: je,
+    footer: Ne,
+    strings: { empty: Rt }
+  }
+} = Oe.getLocalizedStrings(), ma = ({
+  businessVerificationDetails: t,
+  allNationalityCountries: V,
+  verficationDetailsFetchState: N,
+  isRefreshingViewInBackground: A,
+  filesEndPoint: i,
+  authParams: k,
+  productType: h,
+  allIndustries: _,
+  companyTitles: R,
+  maxInsuredAmount: y,
+  isDisabled: I,
+  isSettings: s = !1,
+  isOverlay: g = !1,
+  analytics: x,
+  isStepInProgress: v = !1,
+  isTreasuryTransferInitiated: Z = !1,
+  transferDetails: z,
+  onOverlayClose: oe,
+  onAddressClick: ne,
+  onRegisteredAddressClick: _e,
+  onBackClick: F,
+  onGetOtp: Re,
+  onVerifyOtp: ze,
+  onResendOtp: Ee,
+  onSendForVerificationClick: Ue,
+  onEditFileName: se,
+  onCompanyDetailsChanged: We,
+  updateFilesEntity: ie,
+  onDeleteFile: re,
+  onDeleteFileList: Me,
+  onCompanyOfficerUpdated: He,
+  saveNewAddressInLocalStore: ce,
+  onSaveDetailsClick: Ze,
+  onClickMenuIcon: Ge,
+  onExecuteTreasuryTransfer: Xe
+}) => {
+  const qe = dt(), d = xt(), {
+    updateStatus: E,
+    companyView: L,
+    companyDetailsLocalData: c,
+    companyOfficerLocalData: T
+  } = t, Je = be(E.fetchState), U = L?.company.company.featuresActivationInfo.connectedAccountProvider, Qe = U === "unit" ? /* @__PURE__ */ a.jsxs(Xt, { children: [
+    o.terms.term1,
+    /* @__PURE__ */ a.jsx(
+      H,
+      {
+        href: o.terms.consentUrl,
+        onZeniLinkClick: () => (x?.trackBillPayAgreement(), !0),
+        linkText: o.terms.consent
+      }
+    ),
+    o.terms.term2,
+    /* @__PURE__ */ a.jsx(
+      H,
+      {
+        href: o.terms.depositUrl,
+        onZeniLinkClick: () => (x?.trackBillPayAgreement(), !0),
+        linkText: o.terms.depositTerms
+      }
+    ),
+    o.terms.term3,
+    /* @__PURE__ */ a.jsx(
+      H,
+      {
+        href: o.terms.privacyPolicyUrl,
+        onZeniLinkClick: () => (x?.trackBillPayAgreement(), !0),
+        linkText: o.terms.privacy
+      }
+    ),
+    o.terms.term4,
+    /* @__PURE__ */ a.jsx(
+      H,
+      {
+        href: o.terms.tosUrl,
+        onZeniLinkClick: () => (x?.trackBillPayPrivacyPolicy(), !0),
+        linkText: o.terms.tos
+      }
+    ),
+    o.terms.term5
+  ] }) : o.terms.termsForStripe, [Ke, G] = ae(!1), [W, le] = ae("save"), [X, Ye] = ae(!1), u = mt({
+    mode: "all",
+    reValidateMode: "onChange",
+    defaultValues: zt(
+      t,
+      _,
+      R,
+      V
+    )
+  }), { isValid: et } = u.formState, q = L?.company.company.companyBillPayInfo, J = L?.company.company.companyTreasuryInfo, B = h === "zeni_treasury" ? J?.companyVerificationStatus : q?.companyVerificationStatus, P = Object.values(T).findIndex(
+    (e) => e?.isSelectedForVerification === !0
+  ), $ = `Officer_${P < 0 ? 1 : P + 1}`, tt = () => {
+    const e = T[$], n = e?.email, f = e?.birthday?.toString(), m = e?.ownershipInCompany, S = e?.firstName, j = e?.lastName, Y = e?.titleAtCompany, O = e?.documentTypeSelectedForVerification, ue = e?.phone, fe = e?.addressStatus?.addressToCreate, ye = fe != null ? M(fe) : void 0, he = c?.companyDescription, ee = c?.companyLegalName, ge = c?.companyIndustry, xe = c?.phone, Se = c?.website, Ce = c?.addressStatus?.addressToCreate != null ? M(
+      c?.addressStatus?.addressToCreate
+    ) : void 0, te = c?.primaryContactLocalData, we = te?.firstName, ve = te?.lastName, Te = te?.email;
+    n != null && m != null && S != null && j != null && f != null && Y != null && ue != null && ye != null && O != null && he != null && ee != null && xe != null && Se != null && ge != null && ee != null && Ce != null && we != null && ve != null && Te != null && x?.trackBusinessVerificationSend(
+      {
+        email: n,
+        birthday: f.toString(),
+        companyOwnership: m,
+        firstName: S,
+        lastName: j,
+        companyRole: Y,
+        phone: ue,
+        formattedAddress: ye,
+        documentTypeForVerification: O
+      },
+      {
+        companyDescription: he,
+        legalName: ee,
+        phone: xe,
+        website: Se.toString(),
+        industry: ge,
+        formattedAddress: Ce
+      },
+      {
+        firstName: we,
+        lastName: ve,
+        email: Te
+      },
+      h,
+      s ? "Settings" : void 0
+    );
+  }, at = () => {
+    const e = T[$], n = c?.primaryContactLocalData, f = e?.email ?? "", m = !!e?.firstName && !!e?.lastName, S = n?.email ?? "", j = !!n?.firstName && !!n?.lastName;
+    return f && !m ? ((!e?.firstName || !e?.lastName) && u.trigger(
+      `${b}.${P < 0 ? 0 : P}.name`,
+      { shouldFocus: !0 }
+    ), !1) : S && !j ? ((!n?.firstName || !n?.lastName) && u.trigger(`${D}.primaryContactName`, {
+      shouldFocus: !0
+    }), !1) : !0;
+  }, ot = () => {
+    const e = T[$], n = c?.primaryContactLocalData, f = e?.email, m = n?.email;
+    if (f) {
+      if (!m)
+        return (n?.firstName || n?.lastName) && u.trigger(`${D}.primaryContactEmail`, {
+          shouldFocus: !0
+        }), !1;
+    } else if (e?.firstName || e?.lastName || e?.birthday || e?.nationalityCountryCode || e?.ownershipInCompany || e?.phone || e?.ssn || e?.titleAtCompany || e?.addressStatus?.addressToCreate || e?.fileIds != null && e?.fileIds.length > 0 || Q != null && Q?.length > 0)
+      return u.trigger(
+        `${b}.${P < 0 ? 0 : P}.email`,
+        { shouldFocus: !0 }
+      ), !1;
+    return !0;
+  }, nt = u.handleSubmit(() => {
+    if (W !== "verification" && le("verification"), U === "unit" && T[$]?.isPhoneVerified !== !0) {
+      u.setError(
+        `${b}.${P}.phone`,
+        {
+          type: "custom"
+        }
+      );
+      return;
+    }
+    const e = pt(
+      Object.values(T).map(
+        (m) => Object.values(m?.deleteFileStatusById ?? {}).filter(
+          (S) => S != null
+        )
+      )
+    ), n = Object.values(
+      c?.deleteFileStatusById ?? {}
+    ).filter((m) => m != null);
+    gt(
+      e.concat(n)
+    ).fetchState !== "In-Progress" && et && (tt(), Ue?.($), Z === !0 && Xe?.());
+  }), st = async (e, n) => {
+    e.includes(D) ? We?.(n[D]) : e.includes(b) && He?.(n[b]);
+  }, it = ht(
+    ut((e, n) => {
+      st(e, n);
+    }, 300),
+    []
+  );
+  De(() => {
+    const e = u.watch((n, { name: f }) => {
+      f != null && n != null && ft(
+        () => it(f, n)
+      );
+    });
+    return () => {
+      e.unsubscribe();
+    };
+  });
+  const de = be(
+    t.companyDetailsLocalData?.addressStatus
+  );
+  De(() => {
+    t.companyDetailsLocalData?.addressStatus?.addressToCreate != null && t.companyDetailsLocalData?.registeredAddressStatus?.addressToCreate == null && de == null && (ce?.(
+      "company_registered_address",
+      t.companyDetailsLocalData?.addressStatus?.addressToCreate
+    ), u.setValue(
+      `${D}.registeredAddress`,
+      t.companyDetailsLocalData?.addressStatus?.addressToCreate
+    ));
+  }, [
+    t.companyDetailsLocalData?.addressStatus,
+    t.companyDetailsLocalData?.registeredAddressStatus,
+    de,
+    ce,
+    u
+  ]);
+  const me = L?.companyOfficers.slice(0, 10).sort(
+    (e, n) => e.user.createTime?.isAfter(n.user.createTime) === !0 ? 1 : -1
+  ), Q = me?.map(
+    (e) => e.user
+  ), rt = me?.map(
+    (e) => e.role
+  ), ct = {
+    onOkClick: () => {
+      G(!1), F();
+      const e = [], n = L?.company.company.incInfo.fileIds ?? [];
+      u.getValues(
+        `${D}.fileIds`
+      ).forEach((m) => {
+        n.includes(m) || e.push(m);
+      }), rt?.forEach((m, S) => {
+        const j = m?.fileIds ?? [];
+        u.getValues(
+          `${b}.${S}.fileIds`
+        ).forEach((O) => {
+          j.includes(O) || e.push(O);
+        });
+      }), e.length !== 0 && Me?.(e);
+    },
+    onCancelClick: () => {
+      G(!1);
+    }
+  }, lt = Pe(
+    $e(y),
+    y,
+    je.currencySymbol
+  ).toUpperCase(), K = B?.code === "pending_review" || B?.code === "verified", pe = (z?.treasuryTransferMoneyLocalData?.amount?.amount ?? 0) > 0;
+  return h === "zeni_treasury" && B?.code === "pending_review" && // only on submit for verification
+  Je === "In-Progress" && E.fetchState === "Completed" ? /* @__PURE__ */ a.jsxs(ta, { children: [
+    /* @__PURE__ */ a.jsxs(aa, { children: [
+      /* @__PURE__ */ a.jsx(St, {}),
+      /* @__PURE__ */ a.jsx(oa, { windowSize: d, children: Z === !0 ? o.submittedTitleWithTransfer : o.submittedTitle }),
+      /* @__PURE__ */ a.jsx(ea, { isReadonly: !1, children: Z === !0 ? o.submittedDescriptionWithTransfer.replace(
+        "__amount__",
+        Pe(
+          $e(
+            z?.treasuryTransferMoneyLocalData?.amount?.amount ?? 0
+          ),
+          z?.treasuryTransferMoneyLocalData?.amount?.amount ?? 0,
+          je.currencySymbol
+        )
+      ).replace(
+        "__account__",
+        z?.treasuryTransferMoneyLocalData?.fromAccount?.label ?? ""
+      ) : o.submittedDescription })
+    ] }),
+    /* @__PURE__ */ a.jsx(
+      Ct,
+      {
+        label: o.submittedButton,
+        onClick: () => {
+          F(), oe?.();
+        },
+        variant: "primary"
+      }
+    )
+  ] }) : /* @__PURE__ */ a.jsxs(Et, { isSettings: s, children: [
+    /* @__PURE__ */ a.jsx(
+      wt,
+      {
+        title: g && v === !0 ? Rt : o.header,
+        backgroundColor: qe.colors.grey5,
+        style: { zIndex: X ? 1 : 4 },
+        onBackClick: () => {
+          Tt(u.formState.dirtyFields) ? G(!0) : F();
+        },
+        showBackButton: !s && !g,
+        showMenuIcon: s ? d === "medium-compact" || d === "small" : !1,
+        onClickMenuIcon: Ge,
+        rightSideComponent: g ? /* @__PURE__ */ a.jsx(
+          na,
+          {
+            "data-testid": vt(
+              "nav-bar-close-business-verification-overlay"
+            ),
+            onClick: () => {
+              F(), oe?.();
+            }
+          }
+        ) : null,
+        source: "BusinessVerificationPage"
+      }
+    ),
+    Ke === !0 ? /* @__PURE__ */ a.jsx(
+      Dt,
+      {
+        titleComponent: /* @__PURE__ */ a.jsx(Pt, { children: o.discardTitle }),
+        descriptionComponent: /* @__PURE__ */ a.jsx(bt, { children: o.discardDescription }),
+        primaryButtonText: o.discard,
+        secondaryButtonText: o.cancel,
+        action: ct
+      }
+    ) : null,
+    /* @__PURE__ */ a.jsxs(Mt, { windowSize: d, children: [
+      (!g || v === !1) && /* @__PURE__ */ a.jsx(Wt, { windowSize: d, children: s ? _t.infoText.businessVerification : o.title }),
+      N === "In-Progress" || N === "Not-Started" ? /* @__PURE__ */ a.jsx(Ht, { children: /* @__PURE__ */ a.jsx($t, { size: "ExtraLarge", start: !0 }) }) : /* @__PURE__ */ a.jsx(yt, { ...u, children: /* @__PURE__ */ a.jsxs("form", { id: Fe(Be), onSubmit: nt, children: [
+        g && v === !0 && /* @__PURE__ */ a.jsxs(Ut, { children: [
+          /* @__PURE__ */ a.jsxs(qt, { windowSize: d, children: [
+            /* @__PURE__ */ a.jsx(Jt, { windowSize: d, children: K ? o.businessVerificationDetails : pe ? o.verifyBusinessDetails : o.verifyBusinessDetailsWithoutTransfer }),
+            !K && /* @__PURE__ */ a.jsx(Qt, { children: /* @__PURE__ */ a.jsxs(Kt, { children: [
+              /* @__PURE__ */ a.jsx(Le, {}),
+              pe && /* @__PURE__ */ a.jsx(Le, {}),
+              /* @__PURE__ */ a.jsx(Yt, {})
+            ] }) })
+          ] }),
+          /* @__PURE__ */ a.jsx(ke, { isReadonly: K, children: o.verifyBusinessDetailsDescription })
+        ] }),
+        /* @__PURE__ */ a.jsxs(Zt, { children: [
+          /* @__PURE__ */ a.jsx(
+            Vt,
+            {
+              companyOfficerData: T,
+              allNationalityCountries: V,
+              allOfficers: Q ?? [],
+              sectionId: b,
+              isRefreshingViewInBackground: A,
+              connectedAccountProvider: U,
+              productType: "business_verification",
+              updateFilesEntity: ie,
+              onEditFileName: se,
+              onOfficerAddressClick: ne,
+              onDeleteFile: re,
+              isDisabled: I,
+              filesEndPoint: i,
+              authParams: k,
+              isPopupOpen: X,
+              openPopup: Ye,
+              onGetOtp: Re,
+              onVerifyOtp: ze,
+              onResendOtp: Ee,
+              companyTitles: R,
+              isForTreasury: h === "zeni_treasury",
+              isOverlay: g
+            }
+          ),
+          /* @__PURE__ */ a.jsx(
+            At,
+            {
+              companyDetails: c,
+              businessVerificationProps: {
+                companyVerificationStatus: B,
+                isRefreshingViewInBackground: A
+              },
+              productType: "business_verification",
+              showTreasuryFields: h === "zeni_treasury",
+              sectionId: D,
+              isDisabled: B?.code === "pending_review" || B?.code === "verified" ? "readonly" : I,
+              fileProps: {
+                authParams: k,
+                filesEndPoint: i,
+                onEditFileName: se,
+                onDeleteFile: re,
+                updateFilesEntity: ie
+              },
+              onCompanyAddressClick: ne,
+              onRegisteredAddressClick: _e,
+              connectedAccountProvider: U,
+              allIndustries: _
+            }
+          )
+        ] }),
+        h === "zeni_accounts" ? /* @__PURE__ */ a.jsx(Gt, { windowSize: d, children: o.threadText.replace(
+          "__amount__",
+          lt
+        ) }) : null
+      ] }) })
+    ] }),
+    N === "Completed" && (h === "zeni_treasury" ? J?.companyVerificationStatus?.code !== "pending_review" && J?.companyVerificationStatus?.code !== "verified" : q?.businessVerificationStatus?.code !== "pending_review" && q?.businessVerificationStatus?.code !== "verified") ? /* @__PURE__ */ a.jsx(
+      It,
+      {
+        formId: Fe(Be),
+        primaryBtn: {
+          label: v ? Ne.submit : o.sendForVerificationButton,
+          style: {
+            width: "auto",
+            minWidth: d === "small" ? "auto" : v ? "83px" : "181px"
+          },
+          isLoading: W === "verification" && E.fetchState === "In-Progress",
+          isDisabled: I != null
+        },
+        containerStyle: {
+          width: d === "small" ? w.width.valuePx(d) : "auto",
+          justifyContent: d === "small" ? "space-between" : "center"
+        },
+        helperStyle: {
+          width: d === "small" ? w.width.valuePx(d) : "auto",
+          paddingLeft: w.termsPaddingLeftRight.valuePx(d),
+          paddingRight: w.termsPaddingLeftRight.valuePx(d),
+          textAlign: d === "small" ? "center" : "initial"
+        },
+        showCancel: !0,
+        cancelBtn: {
+          reverseSpinnerColor: !1,
+          label: v ? Ne.back : o.saveDetailsButton,
+          style: {
+            width: d === "small" ? "auto" : v ? "83px" : "181px"
+          },
+          isLoading: W === "save" && E.fetchState === "In-Progress",
+          onClick: () => {
+            if (v)
+              F();
+            else {
+              const e = T[$], n = c?.primaryContactLocalData;
+              W !== "save" && le("save");
+              const f = e?.email ?? "", m = at(), S = ot();
+              m && S && (x?.trackBusinessVerificationSave(
+                {
+                  email: f,
+                  birthday: e?.birthday?.toString(),
+                  companyOwnership: e?.ownershipInCompany,
+                  firstName: e?.firstName,
+                  lastName: e?.lastName,
+                  companyRole: e?.titleAtCompany,
+                  phone: e?.phone,
+                  formattedAddress: e?.addressStatus?.addressToCreate != null ? M(
+                    e?.addressStatus?.addressToCreate
+                  ) : void 0,
+                  documentTypeForVerification: e?.documentTypeSelectedForVerification
+                },
+                {
+                  companyDescription: c?.companyDescription,
+                  legalName: c?.companyLegalName,
+                  phone: c?.phone,
+                  website: c?.website?.toString(),
+                  industry: c?.companyIndustry ?? "",
+                  formattedAddress: c?.addressStatus?.addressToCreate != null ? M(
+                    c?.addressStatus?.addressToCreate
+                  ) : void 0
+                },
+                {
+                  firstName: n?.firstName,
+                  lastName: n?.lastName,
+                  email: n?.email
+                },
+                h,
+                s ? "Settings" : void 0
+              ), Ze?.($));
+            }
+          }
+        },
+        helperText: Qe,
+        style: {
+          padding: `12px ${r.sp3}`,
+          zIndex: X ? 0 : 4
+        }
+      }
+    ) : null
+  ] });
+}, zt = (t, V, N, A) => {
+  const { companyDetailsLocalData: i, companyOfficerLocalData: k, companyView: h } = t, _ = Oe.getLocalizedStrings().companyPassport, R = h?.companyOfficers != null && h?.companyOfficers.length > 0;
+  return {
+    [D]: {
+      companyDescription: i?.companyDescription ?? "",
+      ein: i?.companyFiles.find(
+        (y) => y.documentType === "tax_ein"
+      ),
+      companyId: i?.companyId ?? "",
+      syncToken: i?.syncToken,
+      companyLegalName: i?.companyLegalName ?? "",
+      companyWebsite: i?.website?.toString() ?? "",
+      companyAddress: i?.addressStatus?.addressToCreate,
+      registeredAddress: i?.registeredAddressStatus?.addressToCreate,
+      companyIndustry: {
+        selectedOption: i?.companyIndustry,
+        allOptions: V?.map((y) => y.code)
+      },
+      companyPhone: i?.phone ?? "",
+      companyTaxId: i?.taxIdOrEIN ?? "",
+      primaryContactName: {
+        firstName: i?.primaryContactLocalData?.firstName ?? "",
+        lastName: i?.primaryContactLocalData?.lastName ?? ""
+      },
+      primaryContactEmail: i?.primaryContactLocalData?.email ?? "",
+      primaryContactUserId: i?.primaryContactLocalData?.userId,
+      primaryContactSyncToken: i?.primaryContactLocalData?.syncToken,
+      fileIds: i?.companyFiles.map(
+        (y) => y.fileId
+      ) ?? [],
+      certificateOfIncorporation: i?.companyFiles.find(
+        (y) => y.documentType === "certificate_of_incorporation"
+      ),
+      incDate: i?.incDate?.toDate(),
+      typeOfIncorporation: {
+        selectedOption: i?.typeOfIncorporation,
+        allOptions: _.companyIncInfo.allTypesOfIncorporation
+      },
+      sourceOfFunds: {
+        selectedOption: i?.sourceOfFunds ?? "",
+        allOptions: Object.keys(o.sourceOfFundOptions)
+      }
+    },
+    [b]: Object.values(
+      k
+    ).map((y, I) => {
+      const s = y, g = Bt(
+        s?.documentTypeSelectedForVerification
+      );
+      return {
+        userId: s?.userId,
+        officerType: s?.officerType ?? `Officer_${I + 1}`,
+        name: {
+          firstName: s?.firstName,
+          lastName: s?.lastName
+        },
+        email: s?.email,
+        fileIds: s?.fileIds ?? [],
+        dob: s?.birthday?.toDate(),
+        nationalityCountryCode: jt(
+          s?.nationalityCountryCode,
+          A.map((x) => x.countryCode)
+        ),
+        ssn: s?.ssn,
+        role: {
+          selectedOption: s?.titleAtCompany,
+          allOptions: N?.map((x) => x.code)
+        },
+        phone: s?.phone ?? "",
+        ownership: s?.ownershipInCompany,
+        officerAddress: s?.addressStatus?.addressToCreate,
+        selectDocument: {
+          front: Ie(
+            !0,
+            s?.userFiles ?? [],
+            g
+          ),
+          back: Ie(
+            !1,
+            s?.userFiles ?? [],
+            g
+          ),
+          selectDocumentType: g
+        },
+        isSelectedForVerification: !R && I === 0 ? !0 : s?.isSelectedForVerification ?? !1,
+        userVerificationStatus: s?.userVerificationStatus,
+        treasuryUserVerificationStatus: s?.treasuryUserVerificationStatus,
+        syncToken: s?.syncToken,
+        isPhoneVerified: s?.isPhoneVerified,
+        otpChallenge: s?.otpChallenge
+      };
+    })
+  };
+}, Fe = (t) => `${t}_form`, Et = l.div`
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+  width: 100%;
+  row-gap: ${r.sp3};
+  background-color: ${(t) => t.isSettings ? "unset" : t.theme.colors.grey5};
+`, Ut = l.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: ${r.sp1};
+  width: 100%;
+  padding-bottom: ${r.sp3};
+`, Wt = l(Ae)`
+  color: ${(t) => t.theme.colors.hero};
+  display: flex;
+  justify-content: center;
+  width: ${(t) => w.titleWidth.valuePx(t.windowSize)};
+  padding-top: ${(t) => w.subTitlePaddingTop.valuePx(t.windowSize)};
+  padding-bottom: ${(t) => w.subTitlePaddingBottom.valuePx(t.windowSize)};
+  text-align: ${(t) => t.windowSize === "small" ? "initial" : "center"};
+`, Mt = l.div`
+  display: flex;
+  justify-content: flex-start;
+  height: 100%;
+  overflow-y: auto;
+  flex-direction: column;
+  align-items: center;
+  padding-bottom: ${r.sp9};
+  row-gap: ${(t) => w.verificationDetailsRowGap.valuePx(t.windowSize)};
+`, Ht = l.div`
+  display: flex;
+  width: 100%;
+  height: calc(100vh - 110px);
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  background-color: ${(t) => t.theme.colors.grey4};
+`, Zt = l.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${r.sp11};
+`, Gt = l(Ve)`
+  margin-top: ${r.sp2};
+  padding: ${r.sp2} ${r.sp2};
+  text-align: center;
+  color: ${(t) => t.theme.colors.grey1};
+  width: ${(t) => w.width.valuePx(t.windowSize)};
+`, Xt = l(Ve)`
+  text-align: center;
+  max-width: 750px;
+  color: ${(t) => t.theme.colors.hero};
+`, qt = l.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${r.sp3};
+  width: 100%;
+`, Jt = l(Ot)`
+  ${(t) => `${kt.stepTitle.style(t.windowSize)}`};
+  color: ${(t) => t.theme.colors.primary};
+  text-align: left;
+`, Qt = l.div`
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  gap: ${r.sp2};
+`, Kt = l.div`
+  display: flex;
+  width: 100%;
+  gap: ${r.sp3};
+`, Le = l.div`
+  flex: 1;
+  height: 2px;
+  background-color: ${(t) => t.theme.colors.primary};
+  border-radius: ${r.sp2};
+`, Yt = l.div`
+  flex: 1;
+  height: 2px;
+  background-color: ${(t) => t.theme.colors.grey3};
+  border-radius: ${r.sp2};
+  position: relative;
+  overflow: hidden;
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background-color: ${(t) => t.theme.colors.primary};
+    animation: fillProgress 1s ease-in-out forwards;
+  }
+
+  @keyframes fillProgress {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(0%);
+    }
+  }
+`, ke = l(Ae)`
+  color: ${(t) => t.theme.colors.hero};
+  margin-top: ${(t) => t.isReadonly ? r.sp0 : r.sp3};
+  white-space: pre-line;
+`, ea = l(ke)`
+  margin-top: ${r.sp0};
+  text-align: center;
+`, ta = l.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: ${r.sp5};
+  margin: auto;
+`, aa = l.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: ${r.sp3};
+`, oa = l(Nt)`
+  color: ${(t) => t.theme.colors.primary};
+  white-space: pre-line;
+  text-align: center;
+`, na = l(Ft)`
+  cursor: pointer;
+  color: ${(t) => t.theme.colors.hero};
+  width: ${r.sp4};
+  height: ${r.sp4};
+  min-height: ${r.sp4};
+  &:hover {
+    color: ${(t) => t.theme.colors.primary};
+  }
+`;
+export {
+  ma as default,
+  Fe as uniqueName
+};