@zeniai/web-components 3.16.84 → 3.16.85

package/dist/CompanyOfficerDetailsSection-D0xYEz-W.js

@@ -0,0 +1,1633 @@
+import { j as t, L as $t, u as qe, C as jt, S as vt, n as It, c as Se, d as Lt, ao as Ct } from "./vendor-.pnpm-DtFedGku.js";
+import * as p from "react";
+import { forwardRef as Et, useState as xe, useEffect as Pe } from "react";
+import a from "@emotion/styled";
+import { zeniDate as _t, dateNow as De } from "@zeniai/client-epic-state";
+import { r as Nt, u as Ee, a as le, R as L, S as l, av as ye, K as Ue, D as _, ih as Ot, Z as He, hO as Ge, aS as ee, fn as Ie, aH as Ze, fo as Ye, fj as de, fp as Ft, fk as Le, C as _e, hQ as Je, ag as Ke, hN as Qe, E as Vt, t as ge, v as Ne, s as Oe, G as kt, w as Pt, p as Fe, aw as Tt, n as Bt, aD as zt, ig as At, hg as Wt, hh as Rt, ii as Te, ij as Mt, hV as qt, hU as Be } from "./index-BrQvJ7aX.js";
+import { L as Ce } from "./LabeledAddressValueField-BF_SWBlz.js";
+import { L as Dt } from "./LabeledCreatableSingleSelectField-CRh5s94z.js";
+import { L as ze } from "./LabeledDocumentField-frQwOMNj.js";
+import { L as Xe } from "./LabeledNameField-BjRJVPuY.js";
+import { S as et } from "./avatar-Dz7aEm3d.js";
+const Ut = (e) => /* @__PURE__ */ p.createElement("svg", { width: 72, height: 72, viewBox: "0 0 72 72", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ p.createElement("path", { opacity: 0.2, d: "M50.5391 6.01221C51.2636 6.01238 51.9584 6.29976 52.4707 6.81201L62.6016 16.9429C63.1141 17.4553 63.4022 18.1507 63.4023 18.8755V66.1353C63.4023 66.86 63.1149 67.5554 62.6025 68.0679C62.09 68.5804 61.3947 68.8686 60.6699 68.8687H14.2109C13.4862 68.8687 12.7908 68.5804 12.2783 68.0679C11.7658 67.5554 11.4775 66.8601 11.4775 66.1353V8.74463C11.4775 8.01982 11.7658 7.32453 12.2783 6.81201C12.7908 6.29962 13.4862 6.01221 14.2109 6.01221H50.5391Z", fill: "#97C3B9" }), /* @__PURE__ */ p.createElement("path", { d: "M60.5227 61.2642V61.2318M60.5227 61.2318V15.9951C60.5226 15.2704 60.2346 14.5753 59.722 14.0629L49.5911 3.93209C49.0787 3.41953 48.3837 3.1315 47.659 3.13135H11.3306C10.6057 3.13135 9.91062 3.41928 9.3981 3.9318C8.88559 4.44431 8.59766 5.13944 8.59766 5.86425V63.2551C8.59766 63.9799 8.88559 64.6751 9.3981 65.1876C9.91062 65.7001 10.6057 65.988 11.3306 65.988H57.7898C58.5147 65.988 59.2098 65.7001 59.7223 65.1876C60.2348 64.6751 60.5227 64.0737 60.5227 63.2551C60.5227 62.4365 60.5227 61.2318 60.5227 61.2318Z", stroke: "#97C3B9", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ p.createElement("path", { d: "M46.8682 3.13135V12.9335C46.8682 13.2545 46.9371 13.5724 47.0709 13.869C47.2048 14.1656 47.401 14.4351 47.6483 14.6621C47.8956 14.8891 48.1893 15.0692 48.5124 15.1921C48.8356 15.3149 49.1819 15.3781 49.5317 15.3781H60.2144", stroke: "#97C3B9", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ p.createElement("g", { clipPath: "url(#clip0_1350_23850)" }, /* @__PURE__ */ p.createElement("rect", { x: 16.75, y: 15, width: 22.501, height: 1.5, fill: "#97C3B9" }), /* @__PURE__ */ p.createElement("circle", { cx: 16.75, cy: 15.75, r: 0.75, transform: "rotate(90 16.75 15.75)", fill: "#97C3B9" }), /* @__PURE__ */ p.createElement("circle", { cx: 0.75, cy: 0.75, r: 0.75, transform: "matrix(0 1 1 0 38.5 15)", fill: "#97C3B9" })), /* @__PURE__ */ p.createElement("g", { clipPath: "url(#clip1_1350_23850)" }, /* @__PURE__ */ p.createElement("rect", { x: 16.75, y: 28.5, width: 30.4971, height: 1.5, fill: "#97C3B9" }), /* @__PURE__ */ p.createElement("circle", { cx: 16.75, cy: 29.25, r: 0.75, transform: "rotate(90 16.75 29.25)", fill: "#97C3B9" }), /* @__PURE__ */ p.createElement("circle", { cx: 0.75, cy: 0.75, r: 0.75, transform: "matrix(0 1 1 0 46.5 28.5)", fill: "#97C3B9" })), /* @__PURE__ */ p.createElement("g", { clipPath: "url(#clip2_1350_23850)" }, /* @__PURE__ */ p.createElement("rect", { x: 16.75, y: 42, width: 35.4953, height: 1.5, fill: "#97C3B9" }), /* @__PURE__ */ p.createElement("circle", { cx: 16.75, cy: 42.75, r: 0.75, transform: "rotate(90 16.75 42.75)", fill: "#97C3B9" }), /* @__PURE__ */ p.createElement("circle", { cx: 0.75, cy: 0.75, r: 0.75, transform: "matrix(0 1 1 0 51.5 42)", fill: "#97C3B9" })), /* @__PURE__ */ p.createElement("g", { clipPath: "url(#clip3_1350_23850)" }, /* @__PURE__ */ p.createElement("rect", { x: 16.75, y: 55.5, width: 35.4953, height: 1.5, fill: "#97C3B9" }), /* @__PURE__ */ p.createElement("circle", { cx: 16.75, cy: 56.25, r: 0.75, transform: "rotate(90 16.75 56.25)", fill: "#97C3B9" }), /* @__PURE__ */ p.createElement("circle", { cx: 0.75, cy: 0.75, r: 0.75, transform: "matrix(0 1 1 0 51.5 55.5)", fill: "#97C3B9" })), /* @__PURE__ */ p.createElement("defs", null, /* @__PURE__ */ p.createElement("clipPath", { id: "clip0_1350_23850" }, /* @__PURE__ */ p.createElement("rect", { width: 24, height: 1.5, fill: "white", transform: "translate(16 15)" })), /* @__PURE__ */ p.createElement("clipPath", { id: "clip1_1350_23850" }, /* @__PURE__ */ p.createElement("rect", { width: 32, height: 1.5, fill: "white", transform: "translate(16 28.5)" })), /* @__PURE__ */ p.createElement("clipPath", { id: "clip2_1350_23850" }, /* @__PURE__ */ p.createElement("rect", { width: 37.12, height: 1.5, fill: "white", transform: "translate(16 42)" })), /* @__PURE__ */ p.createElement("clipPath", { id: "clip3_1350_23850" }, /* @__PURE__ */ p.createElement("rect", { width: 37.12, height: 1.5, fill: "white", transform: "translate(16 55.5)" })))), { commonSetUp: Ht } = le.getLocalizedStrings(), { businessVerification: Ae } = Ht, pe = {
+  iconSize: new L(_[6], _[10]),
+  gap: new L(_[2], _[3])
+}, tt = {
+  title: new ye("smallSemiBold", "standardSemiBold"),
+  description: new ye("smallRegular", "standardRegular")
+}, lt = () => {
+  const [e] = Nt("Secure"), c = Ee();
+  return /* @__PURE__ */ t.jsxs(Gt, { windowSize: c, children: [
+    e != null ? /* @__PURE__ */ t.jsx(
+      Zt,
+      {
+        windowSize: c,
+        animationData: e,
+        play: !0,
+        loop: !0,
+        rendererSettings: { preserveAspectRatio: "xMidYMid slice" }
+      }
+    ) : /* @__PURE__ */ t.jsx(Yt, { windowSize: c }),
+    /* @__PURE__ */ t.jsxs(Jt, { children: [
+      /* @__PURE__ */ t.jsx(Kt, { windowSize: c, children: Ae.securityMessageTitle }),
+      /* @__PURE__ */ t.jsx(Qt, { windowSize: c, children: Ae.securityMessageDescription })
+    ] })
+  ] });
+}, Gt = a.div`
+  display: flex;
+  align-items: ${(e) => e.windowSize === "small" ? "flex-start" : "center"};
+  gap: ${(e) => pe.gap.valuePx(e.windowSize)};
+  background-color: ${(e) => e.theme.colors.background};
+  padding: ${(e) => e.windowSize === "small" ? l.sp3 : `${l.sp3} ${l.sp4}`};
+`, Zt = a($t)`
+  width: ${(e) => pe.iconSize.valuePx(e.windowSize)};
+  height: ${(e) => pe.iconSize.valuePx(e.windowSize)};
+  display: block;
+`, Yt = a(Ut)`
+  width: ${(e) => pe.iconSize.valuePx(e.windowSize)};
+  height: ${(e) => pe.iconSize.valuePx(e.windowSize)};
+  color: ${(e) => e.theme.colors.success};
+`, Jt = a.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  flex: 1;
+`, Kt = a(Ue)`
+  ${(e) => `${tt.title.style(e.windowSize)}`};
+  color: ${(e) => e.theme.colors.primary};
+  margin: 0;
+`, Qt = a(Ue)`
+  ${(e) => `${tt.description.style(e.windowSize)}`};
+  color: ${(e) => e.theme.colors.primary};
+  margin: 0;
+`, at = ({
+  text: e
+}) => /* @__PURE__ */ t.jsx(el, { children: /* @__PURE__ */ t.jsx(Xt, { children: e }) }), Xt = a(Ot)`
+  display: flex;
+  align-items: center;
+  color: ${(e) => e.theme.colors.hero};
+  padding-right: ${l.sp2};
+`, el = a.div`
+  display: flex;
+  align-items: flex-end;
+  margin-left: ${l.sp2};
+  margin-top: ${l.sp1};
+`, te = {
+  labelWidth: new L(115, 145, 155),
+  mediumLabelWidth: new L(140, 160, 170),
+  largeLabelWidth: new L(150, 210, 244),
+  largeLabelDocumentWidth: new L(150, 210, 252),
+  paddingBottom: new L(_[3], _[2]),
+  containerRowGap: new L(12, _[3])
+}, tl = {
+  title: new ye("standardMedium", "largeMedium")
+}, ll = le.getLocalizedStrings(), {
+  dateFormat: { visual: al },
+  commonSetUp: ol,
+  companyPassport: rl,
+  common: { documents: We, optional: nl }
+} = ll, o = ol.businessVerification, il = o.sourceOfFundOptions, sl = Et(
+  ({
+    fileProps: e,
+    productType: c,
+    allIndustries: m,
+    companyDetails: h,
+    connectedAccountProvider: V,
+    businessVerificationProps: y,
+    isDisabled: s,
+    style: G,
+    sectionId: g,
+    showInfoTooltip: ae = !0,
+    isCompleted: oe = !1,
+    showCompletedIcon: re = !1,
+    showTreasuryFields: Z = !1,
+    sectionHeader: Y,
+    optionalFields: i = [],
+    onCompanyAddressClick: J,
+    onRegisteredAddressClick: P
+  }, ne) => {
+    const f = Ee(), N = te.labelWidth.value(f), O = te.mediumLabelWidth.value(f), S = te.largeLabelWidth.value(f), D = te.largeLabelDocumentWidth.value(f), b = o.productType[c], K = h?.companyFiles.find(
+      (u) => u.documentType === "certificate_of_incorporation"
+    ), Q = h?.companyFiles.find(
+      (u) => u.documentType === "tax_ein"
+    ), d = h?.companyDescription, $ = h?.companyLegalName, A = h?.website, ie = h?.typeOfIncorporation, U = h?.incDate, X = h?.companyIndustry, E = h?.phone, me = h?.taxIdOrEIN, W = h?.primaryContactLocalData, se = h?.deleteFileStatusById ?? {}, H = h?.updateFileStatusById ?? {}, be = h?.addressStatus?.addressToCreate, we = h?.registeredAddressStatus?.addressToCreate, [T, R] = xe(!1), [x, M] = xe(!1), q = (u) => m.find(($e) => $e.code === u)?.name ?? u, F = (u) => il[u] ?? u;
+    return /* @__PURE__ */ t.jsxs(cl, { style: G, ref: ne, windowSize: f, children: [
+      /* @__PURE__ */ t.jsx(dl, { children: /* @__PURE__ */ t.jsxs(yl, { children: [
+        /* @__PURE__ */ t.jsxs(pl, { children: [
+          re === !0 ? /* @__PURE__ */ t.jsx(ml, { children: oe ? /* @__PURE__ */ t.jsx(hl, {}) : /* @__PURE__ */ t.jsx(fl, {}) }) : null,
+          /* @__PURE__ */ t.jsx(ul, { windowSize: f, children: Y ?? o.confirmCompanyDetails })
+        ] }),
+        ae ? /* @__PURE__ */ t.jsx(gl, { children: /* @__PURE__ */ t.jsx(
+          He,
+          {
+            variant: "small-description",
+            display: "flex",
+            maxWidth: "280px",
+            data: o.confirmCompanyDetailsTooltip,
+            placement: f === "small" || c === "onboarding" ? "bottom" : "right",
+            children: /* @__PURE__ */ t.jsx(xl, {})
+          }
+        ) }) : null,
+        c === "onboarding" && Y != null ? /* @__PURE__ */ t.jsx(at, { text: nl }) : null,
+        y?.companyVerificationStatus != null ? /* @__PURE__ */ t.jsx(
+          bl,
+          {
+            tagTitle: y.companyVerificationStatus.name,
+            textColor: Ge(
+              y.companyVerificationStatus.code
+            ),
+            showLoader: y?.isRefreshingViewInBackground
+          }
+        ) : null
+      ] }) }),
+      /* @__PURE__ */ t.jsxs(Sl, { children: [
+        /* @__PURE__ */ t.jsx(lt, {}),
+        /* @__PURE__ */ t.jsx(
+          ee,
+          {
+            isDisabled: s,
+            showAdditionalInfoLabel: !1,
+            label: {
+              label: o.companyLegalNameLabel,
+              width: S
+            },
+            text: {
+              type: "text",
+              name: j(g, "companyLegalName"),
+              placeholder: o.companyLegalNamePlaceholder,
+              defaultValue: $,
+              options: {
+                required: s == null && i.includes("companyLegalName") === !1
+              }
+            },
+            additionalInfoLabel: o.companyLegalNameError.replace(
+              "_product_type_",
+              b
+            )
+          }
+        ),
+        /* @__PURE__ */ t.jsx(v, {}),
+        /* @__PURE__ */ t.jsx(
+          ee,
+          {
+            isDisabled: s,
+            showAdditionalInfoLabel: !1,
+            label: {
+              label: o.companyDescriptionLabel,
+              width: O
+            },
+            text: {
+              type: "text",
+              name: j(g, "companyDescription"),
+              placeholder: o.addProductPlaceholder,
+              defaultValue: d,
+              options: {
+                required: s == null && i.includes("companyDescription") === !1
+              }
+            },
+            additionalInfoLabel: o.companyDescriptionError.replace(
+              "_product_type_",
+              b
+            )
+          }
+        ),
+        /* @__PURE__ */ t.jsx(v, {}),
+        /* @__PURE__ */ t.jsx(
+          Ce,
+          {
+            isDisabled: s,
+            label: {
+              label: o.companyAddressLabel,
+              width: O
+            },
+            addressValueField: {
+              name: j(g, "companyAddress"),
+              placeholder: o.companyAddressPlaceholder,
+              defaultValue: be,
+              registerOptions: {
+                validate: (u) => i.includes("companyAddress") === !1 ? !(s == null && u == null) : !0
+              },
+              onClick: () => {
+                J?.("company_address");
+              }
+            },
+            additionalInfoLabel: o.companyAddressError.replace(
+              "_product_type_",
+              b
+            ),
+            showAdditionalInfoLabel: !1
+          }
+        ),
+        /* @__PURE__ */ t.jsx(v, {}),
+        /* @__PURE__ */ t.jsx(
+          Ce,
+          {
+            isDisabled: s,
+            label: {
+              label: o.registeredAddressLabel,
+              width: O
+            },
+            addressValueField: {
+              name: j(g, "registeredAddress"),
+              placeholder: o.registeredAddressPlaceholder,
+              defaultValue: we,
+              registerOptions: {
+                validate: (u) => i.includes("registeredAddress") === !1 ? !(s == null && u == null) : !0
+              },
+              onClick: () => {
+                P?.("company_registered_address");
+              }
+            },
+            additionalInfoLabel: o.registeredAddressError.replace(
+              "_product_type_",
+              b
+            ),
+            showAdditionalInfoLabel: !1
+          }
+        ),
+        /* @__PURE__ */ t.jsx(v, {}),
+        /* @__PURE__ */ t.jsx(
+          ee,
+          {
+            isDisabled: s,
+            showAdditionalInfoLabel: !1,
+            label: {
+              label: o.companyWebsiteLabel,
+              width: N
+            },
+            text: {
+              type: "url",
+              name: j(g, "companyWebsite"),
+              placeholder: o.companyWebsitePlaceholder,
+              defaultValue: A?.toString() ?? "",
+              options: {
+                required: s == null && i.includes("companyWebsite") === !1
+              }
+            },
+            additionalInfoLabel: o.companyWebsiteError.replace(
+              "_product_type_",
+              b
+            )
+          }
+        ),
+        /* @__PURE__ */ t.jsx(v, {}),
+        /* @__PURE__ */ t.jsx(
+          Ie,
+          {
+            label: {
+              label: o.companyIndustryLabel,
+              width: N
+            },
+            singleSelectField: {
+              singleSelect: {
+                name: j(g, "companyIndustry"),
+                placeholder: o.companyIndustryPlaceholder,
+                showValueEyeIcon: !1,
+                showEyeIconOnSelect: !1,
+                getLabelForId: q,
+                isDisabled: s,
+                showTickMark: !1
+              },
+              defaultValue: {
+                selectedOption: X,
+                allOptions: m?.map((u) => u.code) ?? []
+              },
+              registerOptions: {
+                required: s == null && i.includes("companyIndustry") === !1,
+                validate: (u) => i.includes("companyIndustry") === !1 ? !(s == null && !u?.selectedOption) : !0
+              }
+            },
+            isFunctional: !0,
+            errorInfoLabel: o.companyIndustryError.replace(
+              "_product_type_",
+              b
+            )
+          }
+        ),
+        /* @__PURE__ */ t.jsx(v, {}),
+        /* @__PURE__ */ t.jsx(
+          Dt,
+          {
+            label: {
+              label: o.companyTypeOfIncorporationLabel,
+              width: S
+            },
+            isDisabled: s,
+            creatableSingleSelectField: {
+              name: j(g, "typeOfIncorporation"),
+              placeholder: o.companyTypeOfIncorporationPlaceholder,
+              defaultValue: {
+                selectedOption: ie,
+                allOptions: rl.companyIncInfo.allTypesOfIncorporation
+              },
+              registerOptions: {
+                required: s == null && i.includes("typeOfIncorporation") === !1 && V === "unit",
+                validate: (u) => i.includes("typeOfIncorporation") === !1 ? !(s == null && !u?.selectedOption) : !0
+              }
+            },
+            errorInfoLabel: o.companyTypeOfIncorporationError.replace(
+              "_product_type_",
+              b
+            )
+          }
+        ),
+        /* @__PURE__ */ t.jsx(v, {}),
+        /* @__PURE__ */ t.jsx(
+          Ze,
+          {
+            isDisabled: s,
+            label: {
+              label: o.companyIncDateLabel,
+              width: S
+            },
+            style: { paddingBottom: te.paddingBottom.valuePx(f) },
+            dateField: {
+              name: j(g, "incDate"),
+              placeholder: o.companyIncDatePlaceholder,
+              defaultValue: U,
+              dateFormat: al.defaultInput,
+              maxDate: De(),
+              minDate: _t("01 Jan 1900"),
+              autoComplete: "off",
+              registerOptions: {
+                required: s == null && i.includes("incDate") === !1
+              }
+            },
+            additionalInfoLabel: o.companyIncDateError.replace(
+              "_product_type_",
+              b
+            )
+          }
+        ),
+        /* @__PURE__ */ t.jsx(v, {}),
+        /* @__PURE__ */ t.jsx(
+          Ye,
+          {
+            isDisabled: s,
+            label: {
+              label: o.companyPhoneLabel,
+              width: N
+            },
+            text: {
+              name: j(g, "companyPhone"),
+              placeholder: de(
+                o.companyPhoneLabel
+              ),
+              defaultValue: E,
+              autoComplete: "new-password",
+              options: {
+                required: s == null && i.includes("companyPhone") === !1
+              }
+            },
+            errorInfoLabel: o.companyPhoneError.replace(
+              "_product_type_",
+              b
+            )
+          }
+        ),
+        /* @__PURE__ */ t.jsx(v, {}),
+        /* @__PURE__ */ t.jsx(
+          Xe,
+          {
+            isDisabled: s,
+            label: {
+              label: o.companyPrimaryContactNameLabel,
+              width: S
+            },
+            nameField: {
+              name: j(g, "primaryContactName"),
+              placeHolder: {
+                firstName: o.firstNamePlaceholder,
+                lastName: o.lastNamePlaceholder,
+                name: o.namePlaceholder
+              },
+              defaultValue: {
+                firstName: W?.firstName ?? "",
+                lastName: W?.lastName ?? ""
+              },
+              registerOptions: {
+                required: s == null && i.includes("primaryContactName") === !1,
+                validate: (u) => !!u || s != null || i.includes("primaryContactName")
+              },
+              showFullNameError: !0
+            },
+            errorInfoLabel: o.companyPrimaryContactNameError.replace(
+              "_product_type_",
+              b
+            )
+          }
+        ),
+        /* @__PURE__ */ t.jsx(v, {}),
+        /* @__PURE__ */ t.jsx(
+          ee,
+          {
+            isDisabled: s,
+            showAdditionalInfoLabel: !1,
+            label: {
+              label: o.companyPrimaryContactEmailLabel,
+              width: S
+            },
+            text: {
+              type: "email",
+              name: j(g, "primaryContactEmail"),
+              placeholder: o.companyPrimaryContactEmailPlaceholder,
+              defaultValue: W?.email,
+              options: {
+                required: s == null && i.includes("primaryContactEmail") === !1
+              }
+            },
+            additionalInfoLabel: o.companyPrimaryContactEmailError.replace(
+              "_product_type_",
+              b
+            )
+          }
+        ),
+        /* @__PURE__ */ t.jsx(v, {}),
+        /* @__PURE__ */ t.jsx(
+          ee,
+          {
+            isDisabled: s,
+            showAdditionalInfoLabel: !1,
+            label: {
+              label: o.companyTaxIdLabel,
+              width: N
+            },
+            text: {
+              type: "text",
+              name: j(g, "companyTaxId"),
+              placeholder: o.companyTaxIdPlaceholder,
+              defaultValue: me,
+              options: {
+                required: s == null && i.includes("companyTaxId") === !1,
+                pattern: Ft
+              },
+              autoComplete: "new-password"
+            },
+            additionalInfoLabel: o.companyTaxIdError.replace(
+              "_product_type_",
+              b
+            )
+          }
+        ),
+        /* @__PURE__ */ t.jsx(v, {}),
+        /* @__PURE__ */ t.jsx(
+          ze,
+          {
+            name: j(g, "certificateOfIncorporation"),
+            isDisabled: s,
+            sizeLimit: Le,
+            deleteFileStatusById: se,
+            updateFileStatusById: H,
+            filesEndPoint: e.filesEndPoint,
+            authParams: e.authParams,
+            label: {
+              label: o.certificateOfIncorporation,
+              width: D
+            },
+            filemetadataPayload: {
+              documentType: "certificate_of_incorporation",
+              purposeId: "business_verification",
+              documentSide: "front"
+            },
+            file: K,
+            acceptableTypes: [
+              "image/jpg",
+              "image/jpeg",
+              "image/png",
+              "application/pdf",
+              "image/heic",
+              "image/heif"
+            ],
+            registerOptions: {
+              required: s == null && i.includes("certificateOfIncorporation") === !1 && V === "unit"
+            },
+            additionalInfoLabel: o.certOfIncopDocumentError.replace(
+              "_product_type_",
+              b
+            ),
+            hasError: T,
+            updateFilesEntity: e.updateFilesEntity,
+            onEditFileName: e.onEditFileName,
+            onDeleteFile: e.onDeleteFile,
+            onFileSizeError: (u) => R(u)
+          }
+        ),
+        T || !(s != null || K != null) ? /* @__PURE__ */ t.jsx(
+          Re,
+          {
+            windowSize: f,
+            isError: T,
+            children: We.formatDocumentText10MB
+          }
+        ) : null,
+        /* @__PURE__ */ t.jsx(v, {}),
+        /* @__PURE__ */ t.jsx(
+          ze,
+          {
+            name: j(g, "ein"),
+            isDisabled: s,
+            sizeLimit: Le,
+            deleteFileStatusById: se,
+            updateFileStatusById: H,
+            filesEndPoint: e.filesEndPoint,
+            authParams: e.authParams,
+            label: {
+              label: o.einDocument,
+              width: D
+            },
+            filemetadataPayload: {
+              documentType: "tax_ein",
+              purposeId: "business_verification",
+              documentSide: "front"
+            },
+            file: Q,
+            acceptableTypes: [
+              "image/jpg",
+              "image/jpeg",
+              "image/png",
+              "application/pdf",
+              "image/heic",
+              "image/heif"
+            ],
+            registerOptions: {
+              required: s == null && i.includes("ein") === !1
+            },
+            additionalInfoLabel: o.einDocumentError.replace(
+              "_product_type_",
+              b
+            ),
+            hasError: x,
+            updateFilesEntity: e.updateFilesEntity,
+            onEditFileName: e.onEditFileName,
+            onDeleteFile: e.onDeleteFile,
+            onFileSizeError: (u) => M(u)
+          }
+        ),
+        x || !(s != null || Q != null) ? /* @__PURE__ */ t.jsx(Re, { windowSize: f, isError: x, children: We.formatDocumentText10MB }) : null,
+        /* @__PURE__ */ t.jsx(v, {}),
+        Z === !0 ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+          /* @__PURE__ */ t.jsx(
+            Ie,
+            {
+              label: {
+                label: o.sourceOfFundsLabel,
+                width: N
+              },
+              singleSelectField: {
+                singleSelect: {
+                  name: j(g, "sourceOfFunds"),
+                  placeholder: o.sourceOfFundsPlaceholder,
+                  showValueEyeIcon: !1,
+                  showEyeIconOnSelect: !1,
+                  getLabelForId: F,
+                  isDisabled: s,
+                  showTickMark: !1,
+                  menuPlacement: "top",
+                  sortOptions: !1
+                },
+                defaultValue: {
+                  selectedOption: h?.sourceOfFunds,
+                  allOptions: Object.keys(
+                    o.sourceOfFundOptions
+                  )
+                },
+                registerOptions: {
+                  required: s == null && i.includes("sourceOfFunds") === !1,
+                  validate: (u) => i.includes("sourceOfFunds") === !1 ? !(s == null && !u?.selectedOption) : !0
+                }
+              },
+              isFunctional: !0,
+              errorInfoLabel: o.sourceOfFundsError.replace(
+                "_product_type_",
+                b
+              )
+            }
+          ),
+          /* @__PURE__ */ t.jsx(v, {})
+        ] }) : null
+      ] })
+    ] });
+  }
+);
+sl.displayName = "Company Details Section";
+const j = (e, c) => `${e}.${c}`, cl = a.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${(e) => te.containerRowGap.valuePx(e.windowSize)};
+`, dl = a.div`
+  display: flex;
+  justify-content: space-between;
+`, Re = a(Vt)`
+  padding: ${l.sp1} ${l.sp4};
+  background: ${(e) => e.theme.colors.grey4};
+  border-radius: ${l.sp0} ${l.sp0} ${l.sp2} ${l.sp2};
+  text-align: ${(e) => e.windowSize === "small" ? "initial" : "right"};
+  color: ${(e) => e.isError ? _e.important : e.theme.colors.grey1};
+`, ul = a.div`
+  ${(e) => `${tl.title.style(e.windowSize)}`};
+  display: flex;
+  align-items: center;
+  color: ${(e) => e.theme.colors.primary};
+  padding-right: ${l.sp2};
+`, pl = a.div`
+  display: flex;
+  align-items: center;
+`, ml = a.div`
+  margin-right: ${l.sp2};
+`, hl = a(Je)`
+  width: ${l.sp3};
+  height: ${l.sp3};
+  color: ${_e.success};
+`, fl = a.div`
+  height: 14px;
+  width: 14px;
+  border: 1px solid ${(e) => e.theme.colors.primary};
+  border-radius: 50%;
+`, gl = a.div`
+  display: flex;
+  color: ${(e) => e.theme.colors.hero};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, xl = a(Ke)`
+  width: ${l.sp3};
+  height: ${l.sp3};
+`, yl = a.div`
+  display: flex;
+  align-items: center;
+`, Sl = a.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${(e) => e.theme.colors.grey5};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  box-shadow: ${(e) => `${l.sp0} 2px ${l.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${l.sp2};
+`, v = a.div`
+  display: flex;
+  flex: 1;
+  background-color: ${(e) => e.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`, bl = a(Qe)`
+  width: max-content;
+  margin-left: ${l.sp3};
+`, wl = a.div`
+  height: ${l.sp4};
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+`, $l = (e, c) => e.map((m) => ({
+  ...m,
+  value: m.userId,
+  label: m.firstName != "" || m.lastName != "" ? `${m.firstName} ${m.lastName}` : m.email
+})), jl = (e, c) => ({
+  ...e,
+  value: e.userId,
+  label: e.firstName != "" || e.lastName != "" ? `${e.firstName} ${e.lastName}` : e.email
+});
+function vl({
+  allUsers: e,
+  onSelectedUserChanged: c,
+  selectedUser: m,
+  disable: h = !1,
+  pickerStyles: {
+    optionBackgroundColor: V,
+    selectedOptionBackgroundColor: y,
+    optionTextStyle: s,
+    titleTextStyle: G,
+    backgroundColor: g,
+    titleTextAlignment: ae,
+    selectedOptionColor: oe,
+    customStyleConfig: re
+  } = {},
+  customization: { placeholderLabel: Z } = {},
+  showAddUser: Y = !0
+}) {
+  const i = qe(), [J, P] = xe(!1), ne = $l(e).sort(
+    (d, $) => d.label.localeCompare($.label)
+  ), f = m != null ? jl(m) : void 0, N = V ?? i.colors.grey5, O = g ?? i.colors.grey5, S = y ?? i.colors.grey3, D = s ?? ge.smallRegular.cssObject, b = G ?? D, K = {
+    control: (d, $) => ({
+      ...d,
+      border: 0,
+      height: "100%",
+      backgroundColor: O,
+      fill: $.selectProps.menuIsOpen === !0 ? i.colors.primary : i.colors.grey1,
+      boxShadow: O,
+      ">div:last-child": {
+        color: J ? i.colors.primary : i.colors.grey1
+      },
+      ":active": {
+        backgroundColor: O
+      },
+      ":hover": {
+        fill: i.colors.primary,
+        ">div:last-child": {
+          color: i.colors.primary
+        }
+      },
+      minHeight: "auto",
+      cursor: "pointer",
+      flexDirection: "column",
+      ">div>div>svg": {
+        color: i.colors.grey1,
+        ">path": {
+          color: i.colors.grey5,
+          fill: "currentcolor"
+        }
+      }
+    }),
+    container: (d) => ({
+      ...d,
+      backgroundColor: O,
+      height: "100%"
+    }),
+    singleValue: (d) => ({
+      ...d,
+      margin: 0,
+      minWidth: void 0,
+      backgroundColor: void 0,
+      ">div": {
+        borderRadius: 0,
+        padding: l.sp0,
+        borderLeftStyle: "none",
+        borderWidth: 1,
+        borderColor: i.colors.grey1,
+        color: "unset"
+      },
+      ">div>div>div>div:last-child": {
+        display: "block",
+        ...ge.standardRegular.cssObject
+      }
+    }),
+    valueContainer: (d) => ({
+      ...d,
+      maxWidth: "100%",
+      cursor: "pointer",
+      height: "100%",
+      ...b,
+      overflow: "visible",
+      minWidth: "auto",
+      padding: 0,
+      display: "flex",
+      justifyContent: ae ?? "flex-start",
+      alignItems: "center",
+      flexWrap: "nowrap",
+      flexDirection: "row",
+      ">div": {
+        width: "inherit"
+      }
+    }),
+    menu: (d, $) => ({
+      ...d,
+      backgroundColor: N,
+      borderRadius: _[1],
+      boxShadow: `${l.sp0} 2px ${l.sp2} ${i.colors.dropShadowHover}`,
+      whiteSpace: "nowrap",
+      minWidth: "fit-content",
+      zIndex: 3,
+      width: 236,
+      margin: `6px ${l.sp0}`,
+      right: "-11%",
+      ">div": {
+        flexDirection: "column",
+        maxHeight: 200,
+        overflowY: "auto",
+        borderRadius: l.sp1,
+        padding: `${l.sp1} ${l.sp0}`,
+        ">div": {
+          width: "-webkit-fill-available"
+        }
+      },
+      ...re?.menu?.(d, $)
+    }),
+    menuList: (d) => ({
+      ...d,
+      borderRadius: _[1]
+    }),
+    placeholder: (d, $) => ({
+      ...d,
+      margin: 0,
+      width: "100%",
+      color: $.isFocused ? i.colors.primary : "currentColor",
+      paddingRight: l.sp2,
+      ...ge.standardRegular.cssObject,
+      ">div>div>svg>circle": {
+        fill: i.colors.grey1
+      }
+    }),
+    noOptionsMessage: (d) => ({
+      ...d,
+      ...ge.smallRegular.cssObject,
+      padding: `10px ${l.sp3} 9px ${l.sp3}`,
+      color: i.colors.hero
+    }),
+    option: (d, { isDisabled: $, isSelected: A, isFocused: ie }) => ({
+      ...d,
+      ...D,
+      color: A ? oe ?? i.colors.champion : i.colors.hero,
+      backgroundColor: A ? S : ie ? i.colors.background : N,
+      cursor: $ ? "not-allowed" : A ? "default" : "pointer",
+      "svg:nth-of-type(2)": {
+        display: "none"
+      },
+      ":hover": {
+        backgroundColor: i.colors.background,
+        color: i.colors.primary
+      },
+      "& label": {
+        paddingRight: "10px",
+        cursor: $ ? "not-allowed" : A ? "inherit" : "pointer"
+      },
+      ">div>div>div:first-of-type": {
+        display: "flex"
+      }
+    }),
+    indicatorSeparator: () => ({
+      /** To customisze the indicator apply the styling to the ArrowFilledDown below */
+    }),
+    dropdownIndicator: () => ({}),
+    indicatorsContainer: () => ({
+      height: "100%",
+      display: "flex",
+      alignItems: "center"
+    })
+  }, Q = ({ children: d, ...$ }) => /* @__PURE__ */ t.jsxs(Se.ValueContainer, { ...$, children: [
+    d,
+    Y === !0 ? /* @__PURE__ */ t.jsxs(
+      Wl,
+      {
+        hasSelectedUser: !!m,
+        onClick: () => {
+          c(void 0), P(!1);
+        },
+        children: [
+          /* @__PURE__ */ t.jsx(Nl, {}),
+          /* @__PURE__ */ t.jsx("div", { children: Z ?? "Add User" })
+        ]
+      }
+    ) : null
+  ] });
+  return /* @__PURE__ */ t.jsx(
+    jt,
+    {
+      onClickAway: () => {
+        P(!1);
+      },
+      children: /* @__PURE__ */ t.jsx(wl, { children: /* @__PURE__ */ t.jsx(
+        vt,
+        {
+          isMulti: !1,
+          menuPlacement: "auto",
+          minMenuHeight: 200,
+          maxMenuHeight: 200,
+          menuIsOpen: J,
+          menuShouldScrollIntoView: !1,
+          defaultValue: f,
+          value: f,
+          noOptionsMessage: () => le.getLocalizedStrings().cockpit.management.noPerson,
+          onInputChange: (d) => {
+            d !== "" && P(!0);
+          },
+          onMenuOpen: () => {
+            P(!0);
+          },
+          placeholder: /* @__PURE__ */ t.jsx(Ll, { children: /* @__PURE__ */ t.jsx("div", { children: Z ?? "Select..." }) }),
+          components: {
+            Option: kl,
+            DropdownIndicator: Rl,
+            IndicatorSeparator: Ml,
+            SingleValue: zl,
+            ValueContainer: Al,
+            MenuList: Q
+          },
+          hideSelectedOptions: !1,
+          closeMenuOnSelect: !1,
+          styles: K,
+          options: ne,
+          isDisabled: h,
+          onChange: (d) => {
+            c(d), P(!1);
+          },
+          isClearable: !1,
+          isSearchable: !1
+        },
+        It()
+      ) })
+    }
+  );
+}
+const Il = a.div``, Ll = a.div`
+  display: flex;
+  align-items: center;
+  color: ${(e) => e.theme.colors.grey1};
+  fill: ${(e) => e.theme.colors.grey1};
+`, Cl = a.div`
+  display: flex;
+  align-items: center;
+  margin-right: ${l.sp2};
+`, El = a(et)`
+  width: ${l.sp4};
+  height: ${l.sp4};
+  color: ${(e) => e.theme.colors.hero};
+`, _l = a.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+`, Nl = a(Pt)`
+  height: ${l.sp4};
+  width: ${l.sp4};
+  margin-right: ${l.sp2};
+  color: inherit;
+`, Ol = a(Tt)`
+  height: 12px;
+  width: 12px;
+  color: ${(e) => e.theme.colors.hero};
+`, Fl = a.div``, Vl = a(Bt)`
+  width: 12px;
+  height: 12px;
+  color: ${(e) => e.theme.colors.primary};
+`, ot = a.img`
+  height: ${l.sp4};
+  width: ${l.sp4};
+  border-radius: 50%;
+  justify-content: center;
+`, kl = (e) => {
+  const { data: c, options: m, isSelected: h } = e, V = m.findIndex((y) => y.value === c.value);
+  return /* @__PURE__ */ t.jsx(Il, { children: /* @__PURE__ */ t.jsx(Se.Option, { ...e, children: /* @__PURE__ */ t.jsxs(_l, { children: [
+    /* @__PURE__ */ t.jsxs(Pl, { children: [
+      /* @__PURE__ */ t.jsx(Tl, { children: c?.photo !== void 0 ? /* @__PURE__ */ t.jsx(
+        ot,
+        {
+          src: c?.photo.href,
+          alt: le.getLocalizedStrings().cockpit.userProfileAltText,
+          onError: ({ currentTarget: y }) => {
+            y.onerror = null, y.src = Ne;
+          },
+          loading: "lazy"
+        }
+      ) : /* @__PURE__ */ t.jsx(
+        Oe,
+        {
+          firstName: c?.firstName ?? "",
+          lastName: c?.lastName ?? "",
+          size: `${l.sp4}`,
+          index: V
+        }
+      ) }),
+      /* @__PURE__ */ t.jsx("label", { children: e.label })
+    ] }),
+    !!h && /* @__PURE__ */ t.jsx(Fl, { children: /* @__PURE__ */ t.jsx(Vl, {}) })
+  ] }) }) });
+}, Pl = a.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+`, Tl = a.div`
+  display: flex;
+  align-items: center;
+  margin-right: ${l.sp2};
+`, Bl = a(Fe)`
+  padding: ${l.sp0} ${l.sp2};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`, zl = ({ children: e, data: c, ...m }) => {
+  const { options: h } = m.selectProps, V = h.findIndex((y) => y.value === c.value);
+  return /* @__PURE__ */ t.jsx(Se.MultiValueLabel, { ...m, children: /* @__PURE__ */ t.jsxs(ql, { children: [
+    c?.photo !== void 0 ? /* @__PURE__ */ t.jsx(
+      ot,
+      {
+        src: c?.photo.href,
+        alt: le.getLocalizedStrings().cockpit.userProfileAltText,
+        onError: ({ currentTarget: y }) => {
+          y.onerror = null, y.src = Ne;
+        },
+        loading: "lazy"
+      }
+    ) : /* @__PURE__ */ t.jsx(
+      Oe,
+      {
+        firstName: c?.firstName ?? "",
+        lastName: c?.lastName ?? "",
+        size: `${l.sp4}`,
+        index: V
+      }
+    ),
+    /* @__PURE__ */ t.jsx(Bl, { children: e })
+  ] }) });
+}, Al = ({ children: e, ...c }) => /* @__PURE__ */ t.jsxs(Se.ValueContainer, { ...c, children: [
+  c.selectProps.value == null ? /* @__PURE__ */ t.jsx(Cl, { children: /* @__PURE__ */ t.jsx(El, {}) }) : null,
+  e
+] }), Wl = a(kt)`
+  color: ${(e) => e.hasSelectedUser ? e.theme.colors.hero : e.theme.colors.primary};
+  display: flex;
+  padding: ${l.sp2} 12px;
+  fill: ${(e) => e.hasSelectedUser ? e.theme.colors.hero : e.theme.colors.primary};
+  background: ${(e) => e.hasSelectedUser ? e.theme.colors.grey5 : e.theme.colors.background};
+  cursor: ${(e) => e.hasSelectedUser ? "pointer" : "default"};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+    background: ${(e) => e.theme.colors.background};
+  }
+`, Rl = () => /* @__PURE__ */ t.jsx(Ol, {}), Ml = () => null, ql = a.div`
+  display: flex;
+  flex-direction: row;
+  cursor: pointer;
+`, ue = {
+  width: new L(343, 580, 726),
+  labelWidth: new L(115, 145, 155),
+  largeLabelWidth: new L(160, 240, 240),
+  veryLargeLabelWidth: new L(150, 240, 245),
+  paddingBottom: new L(_[3], _[2]),
+  containerRowGap: new L(12, _[3])
+}, Dl = {
+  title: new ye("standardMedium", "largeMedium")
+};
+function Sa({
+  companyOfficerData: e,
+  isDisabled: c,
+  allOfficers: m,
+  allNationalityCountries: h,
+  isRefreshingViewInBackground: V,
+  connectedAccountProvider: y,
+  style: s,
+  isPopupOpen: G,
+  sectionId: g,
+  filesEndPoint: ae,
+  authParams: oe,
+  showInfoTooltip: re = !0,
+  isCompleted: Z = !1,
+  showCompletedIcon: Y = !1,
+  showOfficerSelect: i = !0,
+  showVerificationTag: J = !0,
+  isForTreasury: P = !1,
+  isOverlay: ne = !1,
+  productType: f,
+  companyTitles: N,
+  sectionHeader: O,
+  optionalFields: S = [],
+  onOfficerAddressClick: D,
+  onDeleteFile: b,
+  onEditFileName: K,
+  updateFilesEntity: Q,
+  openPopup: d,
+  onGetOtp: $,
+  onVerifyOtp: A,
+  onResendOtp: ie,
+  verifiedPhoneNumber: U,
+  onPhoneVerified: X
+}) {
+  const E = Ee(), me = qe(), { getValues: W, setValue: se } = Lt(), H = m.length > 0, [be, we] = xe(!1), T = H ? Object.values(e).findIndex(
+    (r) => r?.isSelectedForVerification === !0
+  ) : 0, R = `Officer_${T < 0 ? 1 : T + 1}`;
+  Pe(() => {
+    X != null && e[R]?.phone != null && e[R].isPhoneVerified === !0 && X(e[R]?.phone ?? "");
+  }, []);
+  const x = `${g}.${T}`, M = e[R], q = P ? M?.treasuryUserVerificationStatus : M?.userVerificationStatus, F = m.find(
+    (r) => r.userId === M?.userId
+  ), u = m.sort(
+    (r, C) => (r.firstName || r.lastName ? `${r.firstName} ${r.lastName}` : r.email).localeCompare(
+      C.firstName || C.lastName ? `${C.firstName} ${C.lastName}` : C.email
+    )
+  ), $e = H ? u.findIndex(
+    (r) => r.userId === M?.userId
+  ) : 0, rt = e[R]?.deleteFileStatusById ?? {}, nt = e[R]?.updateFileStatusById ?? {}, Ve = W(
+    `${x}.selectDocument.selectDocumentType`
+  ), {
+    common: { optional: it },
+    commonSetUp: { businessVerification: n },
+    dateFormat: { visual: st },
+    cockpit: ct
+  } = le.getLocalizedStrings(), B = f === "onboarding" ? n.productType.business_verification : n.productType[f], ce = ue.labelWidth.value(E), dt = ue.veryLargeLabelWidth.value(E), he = ue.largeLabelWidth.value(E), ut = E === "small" ? n.companyRolePlaceholderSmall : n.companyRolePlaceholder, pt = E === "small" ? n.protectedSsnTextSmall : n.protectedSsnText, I = q?.code === "pending_review" || q?.code === "verified" ? "readonly" : c, mt = I != null || !H || q?.code === "require_info", ht = F?.firstName || F?.lastName ? `${F?.firstName} ${F?.lastName}` : n.addOfficer, ft = M?.userId != null ? n.confirmIdentityDetails : n.confirmIdentityDetailsNewOfficer, gt = {
+    menu: () => ({
+      right: "initial",
+      left: 0
+    })
+  }, xt = (r) => N.find((C) => C.code === r)?.name ?? r, je = M?.otpverificationStatus?.fetchState, ke = zt(
+    je
+  );
+  Pe(() => {
+    X != null && ke === "In-Progress" && je === "Completed" && X(W(`${x}.phone`));
+  }, [ke, je]);
+  const yt = (r, C) => {
+    A(r, C);
+  }, St = () => U == null || U === "" ? !1 : W(`${x}.phone`) === U, bt = () => {
+    const r = W(`${x}.phone`);
+    return r != null && !Ct(r) ? n.phoneErrorForOnboarding : n.phoneError.replace("_product_type_", B);
+  };
+  return /* @__PURE__ */ t.jsxs(Ul, { style: s, windowSize: E, children: [
+    /* @__PURE__ */ t.jsxs(Hl, { windowSize: E, isOverlay: ne, children: [
+      /* @__PURE__ */ t.jsxs(la, { children: [
+        /* @__PURE__ */ t.jsxs(Zl, { children: [
+          Y === !0 ? /* @__PURE__ */ t.jsx(Yl, { children: Z ? /* @__PURE__ */ t.jsx(Jl, {}) : /* @__PURE__ */ t.jsx(Kl, {}) }) : null,
+          /* @__PURE__ */ t.jsx(Gl, { windowSize: E, children: O ?? ft })
+        ] }),
+        re ? /* @__PURE__ */ t.jsx(Ql, { children: /* @__PURE__ */ t.jsx(
+          He,
+          {
+            variant: "small-description",
+            maxWidth: "275px",
+            data: n.confirmIdentityDetailsTooltip,
+            display: "flex",
+            placement: E === "small" || f === "onboarding" ? "bottom" : "right",
+            children: /* @__PURE__ */ t.jsx(Xl, {})
+          }
+        ) }) : null,
+        f === "onboarding" && O != null ? /* @__PURE__ */ t.jsx(at, { text: it }) : null,
+        q != null && J ? /* @__PURE__ */ t.jsx(
+          ra,
+          {
+            tagTitle: q?.name,
+            textColor: Ge(q.code),
+            showLoader: V
+          }
+        ) : null
+      ] }),
+      i ? mt ? H ? /* @__PURE__ */ t.jsxs(oa, { children: [
+        F?.photo !== void 0 ? /* @__PURE__ */ t.jsx(
+          ea,
+          {
+            src: F?.photo.href,
+            alt: ct.userProfileAltText,
+            onError: ({ currentTarget: r }) => {
+              r.onerror = null, r.src = Ne;
+            },
+            loading: "lazy"
+          }
+        ) : /* @__PURE__ */ t.jsx(
+          Oe,
+          {
+            firstName: F?.firstName ?? "",
+            lastName: F?.lastName ?? "",
+            size: `${l.sp4}`,
+            index: $e
+          }
+        ),
+        /* @__PURE__ */ t.jsx(Me, { children: `${ht}` })
+      ] }) : /* @__PURE__ */ t.jsxs(na, { children: [
+        /* @__PURE__ */ t.jsx(ia, { children: /* @__PURE__ */ t.jsx(sa, {}) }),
+        /* @__PURE__ */ t.jsx(Me, { children: `${n.addOfficer}` })
+      ] }) : /* @__PURE__ */ t.jsx(ta, { children: /* @__PURE__ */ t.jsx(
+        vl,
+        {
+          selectedUser: F,
+          allUsers: m,
+          onSelectedUserChanged: (r) => {
+            const C = Object.values(
+              e
+            ).findIndex(
+              (fe) => fe?.userId === r?.userId
+            );
+            se(
+              `${x}.isSelectedForVerification`,
+              !1
+            ), se(
+              `${g}.${C}.isSelectedForVerification`,
+              !0
+            );
+          },
+          customization: { placeholderLabel: n.addOfficer },
+          showAddUser: m.length <= 9,
+          pickerStyles: {
+            backgroundColor: me.colors.grey5,
+            selectedOptionBackgroundColor: me.colors.background,
+            customStyleConfig: E === "small" ? gt : void 0
+          }
+        }
+      ) }) : null
+    ] }),
+    Object.values(e).map((r, C) => {
+      if (T !== C)
+        return null;
+      const fe = At(
+        r?.documentTypeSelectedForVerification
+      ), ve = r?.userFiles ?? [], wt = () => U != "" && f === "onboarding" ? St() : r?.isPhoneVerified ?? !1;
+      return /* @__PURE__ */ t.jsxs(aa, { children: [
+        /* @__PURE__ */ t.jsx(lt, {}),
+        /* @__PURE__ */ t.jsx(
+          Xe,
+          {
+            isDisabled: I,
+            label: { label: n.name, width: ce },
+            nameField: {
+              name: k(x, "name"),
+              placeHolder: {
+                firstName: n.firstNamePlaceholder,
+                lastName: n.lastNamePlaceholder,
+                name: n.namePlaceholder
+              },
+              defaultValue: {
+                firstName: r?.firstName ?? "",
+                lastName: r?.lastName ?? ""
+              },
+              registerOptions: {
+                required: S.includes("name") === !1,
+                validate: (w) => S.includes("name") === !1 ? !!w : !0
+              },
+              showFullNameError: !0
+            },
+            errorInfoLabel: n.nameError.replace(
+              "_product_type_",
+              B
+            )
+          }
+        ),
+        /* @__PURE__ */ t.jsx(z, {}),
+        r?.userId == null ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+          /* @__PURE__ */ t.jsx(
+            ee,
+            {
+              isDisabled: I,
+              showAdditionalInfoLabel: !1,
+              label: {
+                label: n.email,
+                width: ce
+              },
+              text: {
+                type: "email",
+                name: k(x, "email"),
+                placeholder: de(n.email),
+                defaultValue: r?.email,
+                options: {
+                  required: S.includes("email") === !1
+                }
+              },
+              additionalInfoLabel: n.emailDescription.replace(
+                "_product_type_",
+                B
+              )
+            }
+          ),
+          /* @__PURE__ */ t.jsx(z, {})
+        ] }) : null,
+        /* @__PURE__ */ t.jsx(
+          Ze,
+          {
+            isDisabled: I,
+            label: {
+              label: n.dobLabel,
+              width: he
+            },
+            dateField: {
+              name: k(x, "dob"),
+              type: "text",
+              defaultValue: r?.birthday,
+              placeholder: de(n.dobLabel),
+              dateFormat: st.defaultInput,
+              maxDate: De().subtract(
+                y === "unit" ? 18 : 13,
+                "years"
+              ),
+              registerOptions: {
+                required: S.includes("dob") === !1
+              },
+              autoComplete: "off"
+            },
+            additionalInfoLabel: n.dobDescription.replace(
+              "_product_type_",
+              B
+            ),
+            isMasked: !0
+          }
+        ),
+        /* @__PURE__ */ t.jsx(z, {}),
+        /* @__PURE__ */ t.jsx(
+          Wt,
+          {
+            isDisabled: I,
+            label: { label: n.nationalityLabel, width: ce },
+            showAdditionalInfoLabel: f !== "onboarding",
+            additionalInfoLabel: n.nationalityDescription.replace(
+              "_product_type_",
+              B
+            ),
+            countrySelectField: {
+              name: k(x, "nationalityCountryCode"),
+              placeholder: n.nationalityPlaceholder,
+              defaultValue: Rt(
+                r?.nationalityCountryCode,
+                h.map(
+                  (w) => w.countryCode
+                )
+              ),
+              registerOptions: {
+                validate: (w) => !!(w != null && w.selectedOption)
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ t.jsx(z, {}),
+        /* @__PURE__ */ t.jsx(
+          Ce,
+          {
+            isDisabled: I,
+            label: {
+              label: n.address,
+              width: ce
+            },
+            addressValueField: {
+              name: k(x, "officerAddress"),
+              placeholder: de(n.address),
+              defaultValue: r?.addressStatus?.addressToCreate,
+              registerOptions: {
+                validate: (w) => S.includes("officerAddress") === !1 ? !(I == null && w == null) : !0
+              },
+              onClick: () => {
+                D(
+                  r?.officerType.toLocaleLowerCase().concat("_address")
+                );
+              }
+            },
+            additionalInfoLabel: f === "onboarding" ? n.addressAdditionInfo : n.addressError.replace(
+              "_product_type_",
+              B
+            ),
+            showAdditionalInfoLabel: !0
+          }
+        ),
+        /* @__PURE__ */ t.jsx(z, {}),
+        /* @__PURE__ */ t.jsx(
+          Ye,
+          {
+            isDisabled: I,
+            label: {
+              label: n.phone,
+              width: ce
+            },
+            text: {
+              name: k(x, "phone"),
+              placeholder: de(n.phone),
+              defaultValue: r?.phone,
+              autoComplete: "new-password",
+              options: {
+                required: S.includes("phone") === !1
+              }
+            },
+            errorInfoLabel: bt(),
+            verificationErrorInfoLabel: n.phoneValidationError,
+            isPopupOpen: G,
+            phoneVerifyButtonProps: {
+              otpChallenge: r?.otpChallenge,
+              showOtpButton: y === "unit",
+              onGetOtp: $,
+              onVerifyOtp: yt,
+              onResendOtp: ie,
+              isPhoneVerified: wt(),
+              phoneVerificationStatus: r?.otpverificationStatus,
+              getOtpStatus: r?.sendOtpStatus,
+              openPopup: d,
+              verifiedPhoneNumber: U,
+              focusNotRequired: !0
+            }
+          }
+        ),
+        /* @__PURE__ */ t.jsx(z, {}),
+        /* @__PURE__ */ t.jsx(
+          Ie,
+          {
+            label: {
+              label: n.companyRoleLabel,
+              width: he
+            },
+            singleSelectField: {
+              singleSelect: {
+                name: k(x, "role"),
+                placeholder: ut,
+                showValueEyeIcon: !1,
+                showEyeIconOnSelect: !1,
+                getLabelForId: xt,
+                isDisabled: I,
+                showTickMark: !1,
+                maxMenuHeight: 250
+              },
+              defaultValue: {
+                selectedOption: r?.titleAtCompany,
+                allOptions: N?.map((w) => w.code) ?? []
+              },
+              registerOptions: {
+                required: S.includes("role") === !1,
+                validate: (w) => S.includes("role") === !1 ? !(I == null && !w?.selectedOption) : !0
+              }
+            },
+            isFunctional: !0,
+            errorInfoLabel: n.companyRoleDescription.replace(
+              "_product_type_",
+              B
+            )
+          }
+        ),
+        /* @__PURE__ */ t.jsx(z, {}),
+        /* @__PURE__ */ t.jsx(
+          Te,
+          {
+            isDisabled: I,
+            showAdditionalInfoLabel: !1,
+            label: {
+              label: n.companyOwnershipLabel,
+              width: he
+            },
+            formattedTextField: {
+              type: "number",
+              name: k(x, "ownership"),
+              defaultValue: r?.ownershipInCompany,
+              placeholder: n.companyOwnershipPlaceholder,
+              returnValueType: "floatValue",
+              suffix: "%",
+              allowNegative: !1,
+              isNumericString: !1,
+              registerOptions: {
+                required: S.includes("ownership") === !1,
+                validate: (w) => w != null ? w > 0 && w <= 100 : !0,
+                max: 100
+              },
+              autoComplete: "new-password"
+            },
+            additionalInfoLabel: f === "onboarding" ? n.companyOwnershipDescriptionForOnboarding : n.companyOwnershipDescription
+          }
+        ),
+        /* @__PURE__ */ t.jsx(z, {}),
+        /* @__PURE__ */ t.jsx(
+          Te,
+          {
+            isDisabled: I,
+            showAdditionalInfoLabel: !1,
+            label: {
+              label: n.ssnLabel,
+              width: he
+            },
+            formattedTextField: {
+              type: "text",
+              name: k(x, "ssn"),
+              placeholder: n.addSSNPlaceholder,
+              defaultValue: r?.ssn,
+              format: "###-##-####",
+              registerOptions: {
+                required: S.includes("ssn") === !1,
+                pattern: Mt
+              },
+              autoComplete: "new-password",
+              maxLength: 9,
+              allowLeadingZeros: !0
+            },
+            protectedInfoText: I != null && r?.ssn ? pt : void 0,
+            additionalInfoLabel: n.ssnDescription.replace(
+              "_product_type_",
+              B
+            ),
+            isMasked: !0
+          }
+        ),
+        /* @__PURE__ */ t.jsx(z, {}),
+        /* @__PURE__ */ t.jsx(
+          qt,
+          {
+            name: k(x, "selectDocument"),
+            officerIndex: T,
+            sizeLimit: Le,
+            filesEndPoint: ae,
+            authParams: oe,
+            onEditFileName: K,
+            acceptableTypes: [
+              "image/jpg",
+              "image/jpeg",
+              "image/png",
+              "image/heic",
+              "image/heif"
+            ],
+            label: {
+              width: dt
+            },
+            allFiles: ve,
+            updateFilesEntity: Q,
+            deleteFileStatusById: rt,
+            updateFileStatusById: nt,
+            onDeleteFile: b,
+            isDisabled: I,
+            menuPlacement: f === "onboarding" && fe == null ? "top" : "auto",
+            defaultValue: {
+              defaultSelectDocumentType: fe,
+              allSelectDocumentType: ["driverLicense", "passport", "ssnCard"],
+              files: {
+                front: Be(!0, ve, Ve),
+                back: Be(!1, ve, Ve)
+              }
+            },
+            registerOptions: {
+              required: S.includes("selectDocument") === !1
+            },
+            hasError: be,
+            additionalInfoLabel: n.companyIdDescription.replace(
+              "_product_type_",
+              B
+            ),
+            onFileSizeError: (w) => we(w),
+            isPopupOpen: G,
+            openPopup: d,
+            companyOfficerName: {
+              firstName: r?.firstName ?? "",
+              lastName: r?.lastName ?? ""
+            }
+          }
+        )
+      ] }, x);
+    })
+  ] });
+}
+const k = (e, c) => `${e}.${c}`, Ul = a.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${(e) => ue.containerRowGap.valuePx(e.windowSize)};
+`, Hl = a.div`
+  width: ${(e) => ue.width.valuePx(e.windowSize)};
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  row-gap: ${l.sp2};
+  padding-top: ${(e) => e.isOverlay ? l.sp3 : l.sp0};
+`, Gl = a.div`
+  display: flex;
+  align-items: center;
+  color: ${(e) => e.theme.colors.primary};
+  ${(e) => `${Dl.title.style(e.windowSize)}`};
+  padding-right: ${l.sp1};
+`, Zl = a.div`
+  display: flex;
+  align-items: center;
+`, Yl = a.div`
+  margin-right: ${l.sp2};
+`, Jl = a(Je)`
+  width: ${l.sp3};
+  height: ${l.sp3};
+  color: ${_e.success};
+`, Kl = a.div`
+  height: 14px;
+  width: 14px;
+  border: 1px solid ${(e) => e.theme.colors.primary};
+  border-radius: 50%;
+`, Ql = a.div`
+  display: flex;
+  color: ${(e) => e.theme.colors.hero};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, Xl = a(Ke)`
+  width: ${l.sp3};
+  height: ${l.sp3};
+`, ea = a.img`
+  height: ${l.sp4};
+  width: ${l.sp4};
+  border-radius: 50%;
+  justify-content: center;
+`, ta = a.div`
+  margin-right: 14px;
+  color: ${(e) => e.theme.colors.primary};
+`, la = a.div`
+  display: flex;
+  align-items: center;
+`, aa = a.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${(e) => e.theme.colors.grey5};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  box-shadow: ${(e) => `${l.sp0} 2px ${l.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${l.sp2};
+`, z = a.div`
+  display: flex;
+  flex: 1;
+  background-color: ${(e) => e.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`, oa = a(Fe)`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  color: ${(e) => e.theme.colors.primary};
+`, Me = a.div`
+  padding-left: ${l.sp2};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`, ra = a(Qe)`
+  width: max-content;
+  margin-left: ${l.sp3};
+`, na = a(Fe)`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  color: ${(e) => e.theme.colors.hero};
+`, ia = a.div`
+  display: flex;
+  align-items: center;
+`, sa = a(et)`
+  width: ${l.sp4};
+  height: ${l.sp4};
+  color: ${(e) => e.theme.colors.hero};
+`;
+export {
+  Sa as C,
+  sl as a
+};