@zeniai/web-components 3.16.39 → 3.16.40

package/dist/CompanyPassportPage-BsQZvnYb.js

@@ -0,0 +1,2160 @@
+import { j as t, d as He, u as Ue, m as mt, e as pt, S as ut, c as _, k as ht, b4 as ft, g as gt, h as xt, F as yt, b5 as bt } from "./vendor-.pnpm-BZbZ6JJC.js";
+import $t, { useEffect as re, useState as me } from "react";
+import i from "@emotion/styled";
+import { zeniDate as wt, dateNow as be, getFYMonths as St, hasAdminLevelAccess as It, getYearsList as qe, isCompanyPassportDataToBeSaved as jt } from "@zeniai/client-epic-state";
+import { u as N, a as L, b as Fe, S as o, R as m, C as k, b5 as vt, X as Ct, eK as Ot, P as Tt, aH as Ft, fh as D, fi as Ge, D as c, y as Y, G as Xe, fj as Lt, E as Pt, aB as Le, aQ as z, fk as Me, fl as kt, fm as Ze, B as Ee, z as Nt, p as Q, w as Dt, _ as zt, t as ce, n as Mt, dz as Et, fn as Bt, fo as Wt, fp as _t, aD as Rt, aE as Vt, aG as At, ap as Yt } from "./index-oeut1pIL.js";
+import { keyframes as Ht } from "@emotion/react";
+import { L as Je } from "./LabeledCreatableSingleSelectField-cwNchJ6H.js";
+import { L as Ke } from "./LabeledDocumentField-DzileBnI.js";
+import { L as Ut } from "./LabeledSingleSelectField-BRwGz6CX.js";
+import { L as Qe } from "./LabeledAddressValue-CO2Whhy6.js";
+import { L as et } from "./LabeledNameField-5qm02Mj0.js";
+import { L as qt } from "./LabeledItemWithButton-DBNiVMlv.js";
+const tt = {
+  maxWidth: new m(280, 340),
+  contentMaxWidth: new m(200, 255)
+}, Gt = Ht`
+ 0% {
+   transform: translateX(100%)
+ }
+ 100% {
+   transform: translateX(0)
+ }
+`, Xt = i.div`
+  position: fixed;
+  top: ${o.sp3};
+  right: ${o.sp3};
+  z-index: 1400;
+  padding: ${o.sp3} ${o.sp4};
+  max-width: ${(e) => tt.maxWidth.valuePx(e.windowSize)};
+  background: ${(e) => e.theme.colors.black};
+  border-radius: 12px;
+  box-shadow: ${(e) => `${o.sp0} ${o.sp1} ${o.sp1} ${e.theme.colors.dropShadowNormal}`};
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: flex-start;
+  animation: ${Gt} 0.4s;
+`, Zt = i(vt)`
+  margin-top: 2px;
+  width: ${o.sp4};
+  height: ${o.sp4};
+  color: ${k.successDark};
+`, Jt = i(Ct)`
+  margin-top: 2px;
+  width: ${o.sp4};
+  height: ${o.sp4};
+  color: ${k.important};
+`, Kt = i.div`
+  margin-top: ${o.sp1};
+`, Qt = i(Tt)`
+  color: ${k.neutralGrey2Light};
+`, eo = i.div`
+  max-width: ${(e) => tt.contentMaxWidth.valuePx(e.windowSize)};
+  margin: ${o.sp0} ${o.sp3};
+`, to = i(Ot)`
+  color: ${(e) => e.isSuccess ? k.success : k.important};
+`, oo = i.div`
+  width: ${o.sp3};
+  height: ${o.sp3};
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.hero};
+  &:hover {
+    color: ${k.primaryDark};
+  }
+`, no = (e) => {
+  const n = L.getLocalizedStrings().companyPassport.snackBar;
+  return e === "Error" ? n.failedText : n.successText;
+};
+function ao(e) {
+  const n = N(), { fetchState: a, onRemoveSnackbar: l } = e;
+  re(() => {
+    setTimeout(l, 5e3);
+  });
+  const s = L.getLocalizedStrings().companyPassport.snackBar, d = a === "Completed";
+  return /* @__PURE__ */ t.jsxs(Xt, { windowSize: n, children: [
+    d ? /* @__PURE__ */ t.jsx(Zt, {}) : /* @__PURE__ */ t.jsx(Jt, {}),
+    /* @__PURE__ */ t.jsxs(eo, { windowSize: n, children: [
+      /* @__PURE__ */ t.jsx(to, { isSuccess: d, children: d ? s.success : s.error }),
+      /* @__PURE__ */ t.jsx(Kt, { children: /* @__PURE__ */ t.jsx(Qt, { children: no(a) }) })
+    ] }),
+    /* @__PURE__ */ t.jsx(oo, { onClick: l, children: /* @__PURE__ */ t.jsx(Fe, {}) })
+  ] });
+}
+const le = {
+  labelWidth: new m(110, 145, 180),
+  largeLabelWidth: new m(150, 215, 215),
+  largeLabelDocumentWidth: new m(150, 210, 252),
+  paddingBottom: new m(c[3], c[2])
+};
+function lo(e) {
+  const n = N(), [a, l] = me(!1), {
+    companyPassport: s,
+    commonSetUp: { businessVerification: d },
+    common: { documents: f }
+  } = L.getLocalizedStrings(), {
+    fileProps: p,
+    companyFiles: r,
+    deleteFileStatusById: u,
+    updateFileStatusById: x,
+    sectionId: b,
+    isDisabled: h,
+    companyIncInfo: $,
+    style: S
+  } = e, O = le.labelWidth.value(n), I = le.largeLabelWidth.value(n), y = le.largeLabelDocumentWidth.value(n), {
+    dateFormat: { visual: v },
+    companyPassport: C
+  } = L.getLocalizedStrings(), g = r.find(
+    (X) => X.documentType === "certificate_of_incorporation"
+  ), B = n === "small" ? s.companyIncInfo.stateOfIncPlaceholderSmall : s.companyIncInfo.stateOfIncPlaceholder, pe = n === "small" ? s.companyIncInfo.typeOfIncPlaceholderSmall : s.companyIncInfo.typeOfIncPlaceholder;
+  return /* @__PURE__ */ t.jsxs(io, { style: S, children: [
+    /* @__PURE__ */ t.jsx(ro, { children: s.companyIncInfo.title }),
+    /* @__PURE__ */ t.jsxs(so, { children: [
+      /* @__PURE__ */ t.jsx(
+        Je,
+        {
+          label: {
+            label: C.companyIncInfo.typeOfInc,
+            width: I
+          },
+          isDisabled: h,
+          creatableSingleSelectField: {
+            name: ie(b, "typeOfInc"),
+            placeholder: pe,
+            defaultValue: {
+              selectedOption: $?.typeOfInc,
+              allOptions: s.companyIncInfo.allTypesOfIncorporation
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ t.jsx(he, {}),
+      /* @__PURE__ */ t.jsx(
+        Ut,
+        {
+          label: {
+            label: C.companyIncInfo.stateOfInc,
+            width: I
+          },
+          isDisabled: h,
+          singleSelectField: {
+            name: ie(b, "stateOfInc"),
+            placeholder: B,
+            defaultValue: {
+              selectedOption: $?.stateOfInc,
+              allOptions: s.companyIncInfo.allStatesOfIncorporation
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ t.jsx(he, {}),
+      /* @__PURE__ */ t.jsx(
+        Ft,
+        {
+          isDisabled: h,
+          label: {
+            label: s.companyIncInfo.incDate,
+            width: O
+          },
+          style: { paddingBottom: le.paddingBottom.valuePx(n) },
+          dateField: {
+            name: ie(b, "incDate"),
+            placeholder: D(
+              s.companyIncInfo.incDate
+            ),
+            defaultValue: $?.incDate,
+            dateFormat: v.defaultInput,
+            maxDate: be(),
+            minDate: wt("01 Jan 1900"),
+            autoComplete: "off"
+          }
+        }
+      ),
+      /* @__PURE__ */ t.jsx(he, {}),
+      /* @__PURE__ */ t.jsx(
+        Ke,
+        {
+          name: ie(b, "certificateOfIncorporation"),
+          isDisabled: h,
+          sizeLimit: Ge,
+          deleteFileStatusById: u,
+          updateFileStatusById: x,
+          filesEndPoint: p.filesEndPoint,
+          authParams: p.authParams,
+          label: {
+            label: d.certificateOfIncorporation,
+            width: y
+          },
+          filemetadataPayload: {
+            documentType: "certificate_of_incorporation",
+            purposeId: "business_verification",
+            documentSide: "front"
+          },
+          file: g,
+          acceptableTypes: [
+            "image/jpg",
+            "image/jpeg",
+            "image/png",
+            "application/pdf",
+            "image/heic",
+            "image/heif"
+          ],
+          registerOptions: {
+            required: !1
+          },
+          hasError: a,
+          updateFilesEntity: p.updateFilesEntity,
+          onEditFileName: p.onEditFileName,
+          onDeleteFile: p.onDeleteFile,
+          onFileSizeError: (X) => l(X)
+        }
+      ),
+      /* @__PURE__ */ t.jsx(co, { windowSize: n, isError: a, children: f.formatDocumentText10MB })
+    ] })
+  ] });
+}
+const ie = (e, n) => `${e}.${n}`, io = i.div`
+  display: flex;
+  flex-direction: column;
+  padding-top: ${o.sp3};
+  padding-bottom: ${o.sp9};
+`, so = i.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${(e) => e.theme.colors.grey5};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  box-shadow: ${(e) => `${o.sp0} 2px ${o.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${o.sp2};
+`, ro = i(Y)`
+  color: ${(e) => e.theme.colors.champion};
+  margin-bottom: ${o.sp3};
+`, he = i.div`
+  display: flex;
+  flex: 1;
+  background-color: ${(e) => e.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`, co = i(Xe)`
+  padding: ${o.sp1} ${o.sp4};
+  background: ${(e) => e.theme.colors.grey4};
+  border-radius: ${o.sp0} ${o.sp0} ${o.sp2} ${o.sp2};
+  text-align: ${(e) => e.windowSize === "small" ? "initial" : "right"};
+  color: ${(e) => e.isError ? k.important : e.theme.colors.grey1};
+`, mo = i(Lt)`
+  color: ${(e) => e.theme.colors.primary};
+  margin-block-start: ${o.sp0};
+  margin-block-end: ${o.sp0};
+  padding: 0 ${o.sp3};
+  text-align: right;
+  list-style-position: inside;
+`, po = i.li`
+  text-decoration: ${(e) => e.isCancelled ? "line-through" : "unset"};
+`, uo = i(Pt)`
+  color: ${(e) => e.theme.colors.grey1};
+  border-radius: ${o.sp1};
+  border: 1px solid ${(e) => e.theme.colors.grey2};
+  padding: 1px 6px 1px 6px;
+  width: fit-content;
+  margin-left: auto;
+  margin-bottom: ${o.sp2};
+`, ho = (e) => {
+  const { labels: n, style: a, listStyleType: l = "disc" } = e;
+  return /* @__PURE__ */ t.jsx(mo, { style: { ...a, listStyleType: l }, children: n.filter((s) => s != null && s.text != "").map((s, d) => /* @__PURE__ */ t.jsxs(
+    po,
+    {
+      isCancelled: s.status === "cancelled",
+      children: [
+        s.text,
+        s.subText != null ? /* @__PURE__ */ t.jsxs(uo, { children: [
+          "Started: ",
+          s.subText
+        ] }) : null
+      ]
+    },
+    `${s.text}_${d}`
+  )) });
+}, G = {
+  width: new m(343, 580, 726),
+  height: new m(c[6], c[6]),
+  controlHeight: new m(c[6], c[6]),
+  controlMinHeight: new m(c[4], c[4]),
+  paddingTopBottom: new m(c[3], c[3]),
+  marginTop: new m(c[2], c[2]),
+  marginBottom: new m(c[2], c[2]),
+  marginRight: new m(c[2], c[2]),
+  labelMarginLeft: new m(c[3], c[4]),
+  labelMarginRight: new m(c[3], c[4])
+};
+function de({
+  isDisabled: e,
+  label: n,
+  bullettedLabels: a,
+  style: l
+}) {
+  const s = N();
+  return a.labels.length > 0 ? /* @__PURE__ */ t.jsxs(fo, { size: s, style: l, children: [
+    /* @__PURE__ */ t.jsx(
+      Le,
+      {
+        isDisabled: e,
+        label: n.label,
+        style: {
+          marginLeft: G.labelMarginLeft.value(s),
+          marginRight: G.labelMarginRight.value(s),
+          width: n.width ?? "auto"
+        }
+      }
+    ),
+    /* @__PURE__ */ t.jsx(
+      ho,
+      {
+        ...a,
+        style: {
+          maxWidth: n.width != null ? `calc(100% - ${n.width}px)` : "auto"
+        }
+      }
+    )
+  ] }) : null;
+}
+const fo = i.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+  background-color: ${(e) => e.theme.colors.grey5};
+  width: ${(e) => G.width.valuePx(e.size)};
+  height: auto;
+  padding-right: ${(e) => G.marginRight.valuePx(e.size)};
+  padding-top: ${(e) => G.paddingTopBottom.valuePx(e.size)};
+  padding-bottom: ${(e) => G.paddingTopBottom.valuePx(e.size)};
+
+  :first-of-type {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+`, fe = {
+  labelWidth: new m(110, 110, 140),
+  mediumLabelWidth: new m(140, 140, 160),
+  largeLabelWidth: new m(170, 170, 180)
+}, {
+  companyPassport: j,
+  dateFormat: { analytics: Be }
+} = L.getLocalizedStrings();
+function go({
+  companyViewData: e,
+  allIndustries: n,
+  companyInfo: a,
+  companyAddress: l,
+  sectionId: s,
+  isDisabled: d,
+  onCompanyAddressClick: f,
+  style: p
+}) {
+  const r = N(), u = e.company.company.companyInfo, x = fe.labelWidth.value(r), b = fe.mediumLabelWidth.value(r), h = fe.largeLabelWidth.value(r), $ = r === "small" ? j.companyInfo.businessModelPlaceholderSmall : j.companyInfo.businessModelPlaceholder, S = (O) => n.find((I) => I.code === O)?.name ?? O;
+  return /* @__PURE__ */ t.jsxs(yo, { style: p, children: [
+    /* @__PURE__ */ t.jsx($o, { children: j.companyInfo.title }),
+    /* @__PURE__ */ t.jsxs(bo, { children: [
+      /* @__PURE__ */ t.jsx(
+        z,
+        {
+          isDisabled: d,
+          label: {
+            label: j.companyInfo.companyName,
+            width: h
+          },
+          text: {
+            type: "text",
+            name: U(s, "companyName"),
+            placeholder: D(
+              j.companyInfo.companyName
+            ),
+            defaultValue: a?.companyName,
+            autoComplete: "new-password",
+            options: {
+              required: !!u.name,
+              pattern: Me
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ t.jsx(A, {}),
+      /* @__PURE__ */ t.jsx(
+        z,
+        {
+          isDisabled: d,
+          label: {
+            label: j.companyInfo.legalName,
+            width: b
+          },
+          text: {
+            type: "text",
+            name: U(s, "legalName"),
+            placeholder: D(
+              j.companyInfo.legalName
+            ),
+            defaultValue: a?.legalName,
+            autoComplete: "new-password",
+            options: {
+              required: !!u.companyLegalName,
+              pattern: Me
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ t.jsx(A, {}),
+      /* @__PURE__ */ t.jsx(
+        z,
+        {
+          isDisabled: d,
+          label: { label: j.companyInfo.website, width: x },
+          text: {
+            type: "url",
+            name: U(s, "website"),
+            placeholder: D(
+              j.companyInfo.website
+            ),
+            defaultValue: a?.website?.toString() ?? "",
+            autoComplete: "new-password"
+          }
+        }
+      ),
+      /* @__PURE__ */ t.jsx(A, {}),
+      /* @__PURE__ */ t.jsx(
+        kt,
+        {
+          label: {
+            label: j.companyInfo.industry,
+            width: x
+          },
+          singleSelectField: {
+            singleSelect: {
+              name: U(s, "industry"),
+              placeholder: j.companyInfo.industryPlaceholder,
+              showValueEyeIcon: !1,
+              showEyeIconOnSelect: !1,
+              getLabelForId: S,
+              isDisabled: d,
+              showTickMark: !1
+            },
+            defaultValue: {
+              selectedOption: a?.industry,
+              allOptions: n?.map((O) => O.code) ?? []
+            }
+          },
+          isFunctional: !0
+        }
+      ),
+      /* @__PURE__ */ t.jsx(A, {}),
+      /* @__PURE__ */ t.jsx(
+        Je,
+        {
+          isDisabled: d,
+          label: {
+            label: j.companyInfo.businessModel,
+            width: h
+          },
+          creatableSingleSelectField: {
+            name: U(s, "businessModel"),
+            placeholder: $,
+            defaultValue: {
+              selectedOption: a?.businessModel,
+              allOptions: j.companyInfo.allBusinessModels
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ t.jsx(A, {}),
+      /* @__PURE__ */ t.jsx(
+        Qe,
+        {
+          isDisabled: d,
+          label: {
+            label: j.companyInfo.address,
+            width: x
+          },
+          addressValue: {
+            placeholder: D(
+              j.companyInfo.address
+            ),
+            address: l?.addressToCreate,
+            onClick: () => f("company_address")
+          }
+        }
+      ),
+      /* @__PURE__ */ t.jsx(A, {}),
+      /* @__PURE__ */ t.jsx(
+        Ze,
+        {
+          isDisabled: d,
+          label: {
+            label: j.companyInfo.phone,
+            width: x
+          },
+          text: {
+            name: U(s, "phone"),
+            placeholder: D(
+              j.companyInfo.phone
+            ),
+            defaultValue: a?.phone,
+            autoComplete: "new-password"
+          }
+        }
+      ),
+      /* @__PURE__ */ t.jsx(A, {}),
+      /* @__PURE__ */ t.jsx(
+        de,
+        {
+          label: {
+            label: j.companyInfo.fiscalYear,
+            width: x
+          },
+          bullettedLabels: {
+            labels: [
+              { text: xo(a?.firstMonthOfFY ?? 1) }
+            ],
+            listStyleType: "none"
+          }
+        }
+      )
+    ] })
+  ] });
+}
+const xo = (e) => {
+  const { fiscalYearMonths: n } = St(e);
+  return `${be().month(n[0] - 1).format(Be.MMMFormat)} to ${be().month(n[11] - 1).format(Be.MMMFormat)}`;
+}, U = (e, n) => `${e}.${n}`, yo = i.div`
+  display: flex;
+  flex-direction: column;
+  padding-top: ${o.sp3};
+  padding-bottom: ${o.sp9};
+`, bo = i.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${(e) => e.theme.colors.grey5};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  box-shadow: ${(e) => `${o.sp0} 2px ${o.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${o.sp2};
+`, $o = i(Y)`
+  color: ${(e) => e.theme.colors.champion};
+  margin-bottom: ${o.sp3};
+`, A = i.div`
+  display: flex;
+  flex: 1;
+  background-color: ${(e) => e.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`, $e = {
+  labelWidth: new m(110, 110, 140),
+  buttonWidth: new m(70, 70)
+};
+function wo({
+  sectionId: e,
+  isDisabled: n,
+  style: a,
+  officer: l,
+  officerAddress: s,
+  isEmptyCompanyOfficerSection: d,
+  onOfficerAddressClick: f
+}) {
+  const p = N(), r = L.getLocalizedStrings().companyPassport, u = $e.labelWidth.value(p), x = d && (l == null || !l.firstName && !l.lastName && !l.phone && !l.email && !s), b = l?.userId == null || l?.userId === "";
+  return /* @__PURE__ */ t.jsxs(Co, { style: a, children: [
+    /* @__PURE__ */ t.jsx(
+      et,
+      {
+        isDisabled: n,
+        label: {
+          label: r.companyOfficer.name,
+          width: u
+        },
+        nameField: {
+          name: ge(e, "name"),
+          placeHolder: {
+            firstName: r.companyOfficer.firstNamePlaceholder,
+            lastName: r.companyOfficer.lastNamePlaceholder,
+            name: r.companyOfficer.namePlaceholder
+          },
+          defaultValue: {
+            firstName: l?.firstName ?? "",
+            lastName: l?.lastName ?? ""
+          },
+          autoComplete: "new-password",
+          registerOptions: {
+            required: x !== !0
+          },
+          showFullNameError: !0
+        }
+      }
+    ),
+    /* @__PURE__ */ t.jsx(xe, {}),
+    /* @__PURE__ */ t.jsx(
+      z,
+      {
+        isDisabled: b ? n : "readonly",
+        label: { label: r.companyOfficer.email, width: u },
+        text: {
+          type: "email",
+          name: ge(e, "email"),
+          placeholder: D(
+            r.companyOfficer.email
+          ),
+          options: {
+            required: x === !0 ? !1 : b
+          },
+          defaultValue: l?.email,
+          autoComplete: "new-password"
+        }
+      }
+    ),
+    /* @__PURE__ */ t.jsx(xe, {}),
+    /* @__PURE__ */ t.jsx(
+      Qe,
+      {
+        isDisabled: n,
+        label: {
+          label: r.companyInfo.address,
+          width: u
+        },
+        addressValue: {
+          placeholder: D(
+            r.companyOfficer.address
+          ),
+          address: s?.addressToCreate,
+          onClick: () => {
+            f(
+              l?.officerType.toLocaleLowerCase().concat("_address")
+            );
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ t.jsx(xe, {}),
+    /* @__PURE__ */ t.jsx(
+      Ze,
+      {
+        isDisabled: n,
+        label: {
+          label: r.companyOfficer.phone,
+          width: u
+        },
+        text: {
+          name: ge(e, "phone"),
+          placeholder: D(
+            r.companyOfficer.phone
+          ),
+          defaultValue: l?.phone,
+          autoComplete: "new-password"
+        }
+      }
+    )
+  ] });
+}
+function So({
+  companyOfficers: e,
+  sectionId: n,
+  style: a,
+  isDisabled: l,
+  onOfficerAddressClick: s
+}) {
+  const { setValue: d, getValues: f } = He(), [p, r] = me(-1), u = L.getLocalizedStrings().companyPassport, x = e.length, b = e.length === 1 && e[0].localData?.userId == null, h = f(n), $ = () => {
+    const v = {
+      userId: void 0,
+      officerType: `Officer_${x + 1}`,
+      name: { firstName: "", lastName: "" },
+      email: "",
+      phone: ""
+    };
+    d(n, [...h, v]);
+  }, S = (y) => {
+    if (e[y].localData == null || !e[y].localData?.firstName && !e[y].localData?.lastName && !e[y].localData?.phone && !e[y].localData?.email && !e[y].addressStatus?.addressToCreate) {
+      const v = h.filter(
+        (C, g) => g !== p
+      );
+      d(n, v), r(-1);
+    } else
+      r(y);
+  }, O = () => {
+    r(-1);
+  }, I = () => {
+    const y = h.filter(
+      (v, C) => C !== p
+    );
+    d(n, y), r(-1);
+  };
+  return /* @__PURE__ */ t.jsxs(vo, { style: a, children: [
+    /* @__PURE__ */ t.jsx(Oo, { children: u.companyOfficer.title }),
+    e.map((y, v) => {
+      const C = y.localData, g = y.addressStatus, B = C?.userId == null || C?.userId === "";
+      return /* @__PURE__ */ t.jsxs(To, { children: [
+        (x > 1 || B) && !b ? /* @__PURE__ */ t.jsx(
+          Io,
+          {
+            curIndex: v,
+            isNewUser: B,
+            numberOfOfficers: x,
+            deleteConfirmationIndex: p,
+            isDisabled: l,
+            onDeleteClick: S,
+            onCancelClick: O,
+            onRemoveOfficerSection: I
+          }
+        ) : null,
+        /* @__PURE__ */ t.jsx(
+          wo,
+          {
+            sectionId: `${n}.${v}`,
+            officer: C,
+            officerAddress: g,
+            isDisabled: l,
+            isEmptyCompanyOfficerSection: b,
+            onOfficerAddressClick: s
+          }
+        )
+      ] }, C?.officerType);
+    }),
+    x <= 9 && !b ? /* @__PURE__ */ t.jsx(
+      jo,
+      {
+        isSectionDisabled: l,
+        onAddOfficerSection: $
+      }
+    ) : /* @__PURE__ */ t.jsx(we, {})
+  ] });
+}
+const Io = ({
+  curIndex: e,
+  isNewUser: n,
+  numberOfOfficers: a,
+  deleteConfirmationIndex: l,
+  isDisabled: s,
+  onDeleteClick: d,
+  onCancelClick: f,
+  onRemoveOfficerSection: p
+}) => {
+  const r = N(), u = L.getLocalizedStrings().companyPassport;
+  return /* @__PURE__ */ t.jsxs(Fo, { children: [
+    /* @__PURE__ */ t.jsx(Lo, { children: a > 1 ? `${u.companyOfficer.officer} ${e + 1}` : "" }),
+    n && s == null ? l === e ? /* @__PURE__ */ t.jsx(zo, { children: /* @__PURE__ */ t.jsxs(Mo, { children: [
+      u.companyOfficer.deleteConfirmation,
+      /* @__PURE__ */ t.jsx(
+        Ee,
+        {
+          label: u.cancel,
+          onClick: f,
+          style: {
+            width: $e.buttonWidth.value(r),
+            marginLeft: o.sp4,
+            marginRight: o.sp3
+          },
+          size: "small",
+          variant: "secondary"
+        }
+      ),
+      /* @__PURE__ */ t.jsx(
+        Ee,
+        {
+          label: u.remove,
+          onClick: p,
+          style: { width: $e.buttonWidth.value(r) },
+          size: "small",
+          variant: "danger"
+        }
+      )
+    ] }) }) : /* @__PURE__ */ t.jsx(
+      Do,
+      {
+        className: "delete-icon-wrapper",
+        onClick: () => d(e),
+        children: /* @__PURE__ */ t.jsx(Nt, { width: c[3], height: c[3], color: k.important })
+      }
+    ) : null
+  ] });
+}, jo = ({
+  isSectionDisabled: e,
+  onAddOfficerSection: n
+}) => {
+  const a = L.getLocalizedStrings().companyPassport;
+  return e != null ? /* @__PURE__ */ t.jsx(we, {}) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsxs(Po, { onClick: n, children: [
+      /* @__PURE__ */ t.jsx(ko, {}),
+      /* @__PURE__ */ t.jsx(No, { children: a.companyOfficer.addOfficer })
+    ] }),
+    /* @__PURE__ */ t.jsx(we, {})
+  ] });
+}, ge = (e, n) => `${e}.${n}`, vo = i.div`
+  display: flex;
+  flex-direction: column;
+  padding-top: ${o.sp3};
+  width: 100%;
+`, Co = i.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${(e) => e.theme.colors.grey5};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  box-shadow: ${(e) => `${o.sp0} 2px ${o.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${o.sp2};
+  margin-bottom: ${o.sp4};
+`, we = i.div`
+  padding-bottom: ${o.sp6};
+`, Oo = i(Y)`
+  color: ${(e) => e.theme.colors.champion};
+  margin-bottom: ${o.sp4};
+`, To = i.div`
+  &:hover {
+    .delete-icon-wrapper {
+      display: flex;
+    }
+  }
+`, Fo = i(Y)`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: ${(e) => e.theme.colors.champion};
+  margin-bottom: ${o.sp2};
+  height: 31px;
+
+  .delete-icon-wrapper {
+    display: none;
+  }
+`, Lo = i(Q)``, Po = i.div`
+  padding: ${o.sp3};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${(e) => e.theme.colors.grey5};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  border-radius: ${o.sp2};
+  box-shadow: ${(e) => `${o.sp0} 2px ${o.sp1} ${e.theme.colors.dropShadowNormal}`};
+  color: ${(e) => e.theme.colors.hero};
+  margin-bottom: ${o.sp4};
+  cursor: pointer;
+
+  &:hover {
+    svg {
+      color: ${(e) => e.theme.colors.primary};
+    }
+    color: ${(e) => e.theme.colors.primary};
+    border: 1px solid ${(e) => e.theme.colors.primary};
+  }
+`, ko = i(Dt)`
+  margin-right: ${o.sp2};
+  width: ${o.sp4};
+  height: ${o.sp4};
+  color: ${(e) => e.theme.colors.grey1};
+`, No = i(zt)`
+  color: inherit;
+`, Do = i.div`
+  width: ${o.sp4};
+  height: ${o.sp4};
+  cursor: pointer;
+`, zo = i.div`
+  display: flex;
+`, Mo = i(Q)`
+  color: ${(e) => e.theme.colors.hero};
+`, xe = i.div`
+  display: flex;
+  flex: 1;
+  background-color: ${(e) => e.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`, Eo = ({
+  name: e,
+  registerOptions: n,
+  defaultValue: a,
+  isDisabled: l,
+  style: s,
+  placeholder: d
+}) => {
+  const {
+    control: f,
+    formState: { errors: p }
+  } = He(), r = Ue(), u = mt(p, e ?? ""), x = {
+    container: (h) => ({
+      ...h,
+      width: "100%",
+      ...s
+    }),
+    menu: (h) => ({
+      ...h,
+      backgroundColor: r.colors.grey5,
+      borderRadius: o.sp1,
+      boxShadow: `${o.sp0} 2px ${o.sp2} ${r.colors.dropShadowHover}`,
+      whiteSpace: "nowrap",
+      zIndex: 2,
+      width: "100%",
+      margin: 0
+    }),
+    menuList: (h) => ({
+      ...h,
+      borderRadius: 0
+    })
+  }, b = {
+    hasError: u
+  };
+  return /* @__PURE__ */ t.jsx(
+    pt,
+    {
+      name: e,
+      control: f,
+      defaultValue: a,
+      rules: n,
+      render: ({ field: { onChange: h, onBlur: $, value: S, ref: O } }) => /* @__PURE__ */ t.jsx(
+        ut,
+        {
+          ...b,
+          ref: O,
+          isMulti: !0,
+          isSearchable: !0,
+          isClearable: !0,
+          controlShouldRenderValue: !0,
+          placeholder: d,
+          value: We(
+            S.selectedOptions
+          ),
+          options: We(
+            S.allOptions
+          ),
+          onChange: (I) => {
+            h({
+              selectedOptions: I.map(
+                (y) => y.value
+              ),
+              allOptions: S.allOptions
+            });
+          },
+          tabSelectsValue: !1,
+          openMenuOnFocus: !0,
+          classNamePrefix: "multi-select-field",
+          onBlur: $,
+          menuPlacement: "auto",
+          maxMenuHeight: 288,
+          menuShouldScrollIntoView: !1,
+          closeMenuOnSelect: !1,
+          components: {
+            Control: Bo,
+            Option: Uo,
+            Input: _o,
+            MultiValue: Ro,
+            MultiValueLabel: Vo,
+            MultiValueRemove: Ao,
+            ValueContainer: Wo,
+            DropdownIndicator: tn,
+            IndicatorSeparator: on,
+            Placeholder: Ho,
+            ClearIndicator: Yo
+          },
+          hideSelectedOptions: !1,
+          styles: x,
+          isDisabled: l != null
+        }
+      )
+    }
+  );
+}, Bo = (e) => {
+  const { menuIsOpen: n, isFocused: a, isDisabled: l, selectProps: s } = e, { value: d, hasError: f } = s;
+  return /* @__PURE__ */ t.jsx(
+    qo,
+    {
+      menuIsOpen: n,
+      isFocused: a,
+      isDisabled: l,
+      optionsLen: d.length,
+      hasError: f,
+      children: /* @__PURE__ */ t.jsx(_.Control, { ...e, className: "select-control", children: e.children })
+    }
+  );
+}, Wo = (e) => {
+  const { selectProps: n } = e, { value: a } = n;
+  return /* @__PURE__ */ t.jsxs(_.ValueContainer, { ...e, className: "select-value-container", children: [
+    e.children,
+    /* @__PURE__ */ t.jsx(Go, { className: "selected-options", children: a.map((l) => l.value).join(", ") })
+  ] });
+}, _o = (e) => {
+  const { selectProps: n } = e, { placeholder: a, value: l } = n;
+  return /* @__PURE__ */ t.jsx(
+    _.Input,
+    {
+      ...e,
+      autoComplete: "new-password",
+      placeholder: l.length === 0 ? a : void 0,
+      children: e.children
+    }
+  );
+}, Ro = (e) => /* @__PURE__ */ t.jsx(_.MultiValue, { ...e, children: e.children }), Vo = (e) => {
+  const { data: n } = e;
+  return /* @__PURE__ */ t.jsx(_.MultiValueLabel, { ...e, children: n.value });
+}, Ao = (e) => /* @__PURE__ */ t.jsx(_.MultiValueRemove, { ...e, children: /* @__PURE__ */ t.jsx(ot, { style: { marginTop: "2px" } }) }), Yo = (e) => /* @__PURE__ */ t.jsx(_.ClearIndicator, { ...e, children: /* @__PURE__ */ t.jsx(ot, {}) }), Ho = () => null, Uo = (e) => {
+  const { isSelected: n, isDisabled: a, isFocused: l } = e;
+  return /* @__PURE__ */ t.jsx(
+    Xo,
+    {
+      isFocused: l,
+      isSelected: n,
+      isDisabled: a,
+      children: /* @__PURE__ */ t.jsx(_.Option, { ...e, className: "select-option", children: /* @__PURE__ */ t.jsxs(Zo, { children: [
+        /* @__PURE__ */ t.jsx(Ko, { children: /* @__PURE__ */ t.jsx(Jo, { isSelected: n, isDisabled: a, children: e.label }) }),
+        n ? /* @__PURE__ */ t.jsxs(Qo, { children: [
+          /* @__PURE__ */ t.jsx(en, { className: "right-tick-icon" }),
+          /* @__PURE__ */ t.jsx(Fe, { className: "close-tick-icon" })
+        ] }) : null
+      ] }) })
+    }
+  );
+}, qo = i.div`
+  width: 100%;
+  background-color: ${(e) => e.theme.colors.grey5};
+  cursor: ${(e) => e.isDisabled ? "not-allowed" : "pointer"};
+
+  .select-control {
+    border: none;
+    padding: 0 ${o.sp3};
+    min-height: 100%;
+    background-color: inherit;
+    box-shadow: none;
+
+    &:hover {
+      fill: ${(e) => e.theme.colors.primary};
+     background-color: ${(e) => e.hasError ? k.importantLight : e.isDisabled ? e.theme.colors.grey5 : e.theme.colors.background};
+      border: none;
+    }
+
+    width: auto;
+    cursor: pointer;
+
+    .multi-select-field__indicators {
+      display: ${(e) => e.isFocused ? "flex" : "none"};
+    }
+
+    .multi-select-field__clear-indicator {
+      padding: 0;
+      margin-left: ${o.sp2};
+      color: ${(e) => e.theme.colors.primary};
+      transition: none;
+      &:hover {
+        background-color: transparent;
+        color: ${(e) => e.theme.colors.primary};
+      }
+    }
+
+    .multi-select-field__value-container {
+      gap: ${(e) => e.isFocused ? `${o.sp2}` : `${o.sp0}`};
+    }
+  }
+
+  .select-value-container {
+    width: 100%;
+    padding: 6px ${o.sp0};
+    overflow: auto;
+    display: ${(e) => e.isFocused === !1 && e.optionsLen === 0 ? "block" : "flex"};
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: wrap;
+    cursor: pointer;
+
+    ${ce.extraSmallRegular.css}
+
+    .selected-options {
+      display: ${(e) => e.isFocused ? "none" : "block"};
+      overflow: initial;
+      text-overflow: unset;
+      white-space: initial;
+      text-align: right;
+    }
+
+    .multi-select-field__multi-value {
+      padding: 1px ${o.sp2};
+      min-width: fit-content;
+      background-color: transparent;
+      margin: ${o.sp0};
+      display: ${(e) => e.isFocused ? "flex" : "none"};
+      color: ${(e) => e.theme.colors.primary};
+      border: 1px solid ${(e) => e.theme.colors.primary};
+      box-sizing: border-box;
+      border-radius: ${o.sp1};
+      :last-of-type {
+        margin: ${o.sp0};
+      }
+    }
+
+    .multi-select-field__input-container {
+      display: flex;
+      width: ${(e) => e.isFocused === !1 && e.optionsLen === 0 ? "100%" : e.isFocused === !1 && e.optionsLen > 0 ? o.sp0 : "fit-content"};
+      ${ce.standardRegular.css};
+      color: ${(e) => e.theme.colors.primary};
+      margin: ${o.sp0};
+      cursor: inherit;
+      color: ${(e) => e.hasError ? k.important : e.theme.colors.primary};
+
+      > input {
+        text-align: ${(e) => e.isFocused === !1 && e.optionsLen === 0 ? "right" : "initial"};
+        align-items: center;
+        z-index: 2;
+        overflow: hidden;
+        cursor: inherit;
+
+        ::placeholder {
+          color: ${(e) => e.hasError ? k.important : e.theme.colors.grey1};
+        }
+        }
+
+        :disabled {
+          visibility: visible;
+        }
+      }
+    }
+
+    .multi-select-field__multi-value__label {
+      color: inherit;
+      padding: 0;
+      margin-right: ${o.sp1};
+      ${ce.standardRegular.css};
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .multi-select-field__multi-value__remove {
+      padding: 0;
+      &:hover {
+        background-color: transparent;
+        color: ${(e) => e.theme.colors.primary};
+      }
+    }
+  }
+`, Go = i(Q)`
+  color: ${(e) => e.theme.colors.primary};
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: right;
+`, Xo = i.div`
+  .select-option {
+    ${ce.smallRegular.css};
+    height: ${o.sp6};
+    padding: 9px ${o.sp3};
+    color: ${(e) => e.isSelected ? e.theme.colors.primary : e.theme.colors.champion};
+    background-color: ${(e) => e.isSelected ? e.theme.colors.grey3 : e.isFocused ? e.theme.colors.background : e.theme.colors.grey5};
+    cursor: ${(e) => e.isDisabled ? "not-allowed" : "pointer"};
+    border-top: none;
+
+    .close-tick-icon {
+      display: none;
+    }
+
+    &:hover {
+      background-color: ${(e) => e.isDisabled ? e.theme.colors.grey5 : e.theme.colors.background};
+      color: ${(e) => e.isDisabled ? e.theme.colors.champion : e.theme.colors.primary};
+
+      .right-tick-icon {
+        display: none;
+      }
+
+      .close-tick-icon {
+        display: inline-block;
+      }
+    }
+  }
+`, Zo = i.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+`, Jo = i.label`
+  padding-right: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: ${(e) => e.isDisabled ? "not-allowed" : e.isSelected ? "default" : "pointer"};
+`, Ko = i.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+`, Qo = i.div`
+  display: flex;
+`, en = i(Mt)`
+  width: 12px;
+  height: 12px;
+  margin-right: 2px;
+  color: ${(e) => e.theme.colors.primary};
+`, ot = i(Fe)`
+  width: ${o.sp3};
+  height: ${o.sp3};
+  color: ${(e) => e.theme.colors.primary};
+`, tn = () => null, on = () => null, We = (e) => e.map((n) => nn(n)), nn = (e) => ({
+  value: e,
+  label: e
+}), M = {
+  width: new m(343, 580, 726),
+  height: new m(c[6], c[6]),
+  controlHeight: new m(c[6], c[6]),
+  paddingTopBottom: new m(c[2], c[2]),
+  marginTop: new m(c[2], c[2]),
+  marginBottom: new m(c[2], c[2]),
+  marginRight: new m(c[2], c[2]),
+  labelMarginLeft: new m(c[3], c[4]),
+  labelMarginRight: new m(c[3], c[4]),
+  labelMarginTop: new m(c[2], c[2])
+};
+function an({
+  isDisabled: e,
+  label: n,
+  multiSelectField: a,
+  style: l
+}) {
+  const s = N();
+  return /* @__PURE__ */ t.jsxs(ln, { size: s, style: l, isDisabled: e != null, children: [
+    /* @__PURE__ */ t.jsx(
+      Le,
+      {
+        isDisabled: e,
+        label: n.label,
+        htmlFor: a.name,
+        style: {
+          marginLeft: M.labelMarginLeft.value(s),
+          marginRight: M.labelMarginRight.value(s),
+          marginTop: M.labelMarginTop.value(s),
+          width: n.width ?? "auto"
+        }
+      }
+    ),
+    /* @__PURE__ */ t.jsx(
+      Eo,
+      {
+        ...a,
+        isDisabled: e,
+        style: {
+          display: "flex",
+          flexGrow: 1,
+          maxWidth: n.width != null ? `calc(100% - ${n.width}px)` : "auto",
+          minHeight: M.controlHeight.value(s)
+        }
+      }
+    )
+  ] });
+}
+const ln = i.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  background-color: ${(e) => e.theme.colors.grey5};
+  width: ${(e) => M.width.valuePx(e.size)};
+  min-height: ${(e) => M.height.valuePx(e.size)};
+  padding-right: ${(e) => M.marginRight.valuePx(e.size)};
+  padding-top: ${(e) => M.paddingTopBottom.valuePx(e.size)};
+  padding-bottom: ${(e) => M.paddingTopBottom.valuePx(e.size)};
+
+  :first-of-type {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+
+  :first-of-type {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+
+  &:focus-within {
+    z-index: 2;
+    outline: 1px solid ${(e) => e.theme.colors.primary};
+    .select-control {
+      background-color: ${(e) => e.theme.colors.background};
+    }
+  }
+
+  &:hover {
+    z-index: 2;
+    outline: ${(e) => e.isDisabled === !0 ? "none" : `1px solid ${e.theme.colors.primary}`};
+    .select-control {
+      background-color: ${(e) => e.isDisabled ? e.theme.colors.grey5 : e.theme.colors.background};
+    }
+  }
+`, _e = {
+  labelWidth: new m(160, 160, 160),
+  largeLabelWidth: new m(150, 215, 215)
+};
+function sn(e) {
+  const n = N(), a = Et(), [l, s] = me(!1), {
+    companyPassport: d,
+    commonSetUp: { businessVerification: f },
+    common: { documents: p }
+  } = L.getLocalizedStrings(), {
+    fileProps: r,
+    companyFiles: u,
+    deleteFileStatusById: x,
+    updateFileStatusById: b,
+    sectionId: h,
+    isDisabled: $,
+    companyTaxInfo: S,
+    style: O
+  } = e, I = _e.labelWidth.value(n), y = _e.largeLabelWidth.value(n), v = !It(
+    a.loggedInUserRole ?? []
+  ), C = u.find((g) => g.documentType === "tax_ein");
+  return /* @__PURE__ */ t.jsxs(rn, { style: O, children: [
+    /* @__PURE__ */ t.jsx(dn, { children: d.companyTaxInfo.title }),
+    /* @__PURE__ */ t.jsxs(cn, { children: [
+      /* @__PURE__ */ t.jsx(
+        z,
+        {
+          isDisabled: $,
+          label: {
+            label: d.companyTaxInfo.taxIdOrEIN,
+            width: I
+          },
+          text: {
+            type: "text",
+            name: q(h, "taxIdOrEIN"),
+            placeholder: d.companyTaxInfo.taxIdOrEINPlaceholder,
+            defaultValue: v === !0 ? d.protectedContent : S?.taxIdOrEIN,
+            options: { pattern: Bt },
+            autoComplete: "new-password"
+          },
+          protectedInfoText: v === !0 ? d.companyTaxInfo.adminPrivilegeRequired : void 0
+        }
+      ),
+      /* @__PURE__ */ t.jsx(K, {}),
+      /* @__PURE__ */ t.jsx(
+        z,
+        {
+          isDisabled: $,
+          label: {
+            label: d.companyTaxInfo.dunsNumber,
+            width: I
+          },
+          text: {
+            type: "text",
+            name: q(h, "dunsNumber"),
+            placeholder: d.companyTaxInfo.dunsNumberPlaceholder,
+            defaultValue: S?.dunsNumber,
+            options: { pattern: /^\d{9}$/ },
+            autoComplete: "new-password"
+          }
+        }
+      ),
+      /* @__PURE__ */ t.jsx(K, {}),
+      /* @__PURE__ */ t.jsx(
+        z,
+        {
+          isDisabled: $,
+          label: {
+            label: d.companyTaxInfo.naicsCode,
+            width: I
+          },
+          text: {
+            type: "text",
+            name: q(h, "naicsCode"),
+            placeholder: d.companyTaxInfo.naicsCodePlaceholder,
+            defaultValue: S?.naicsCode,
+            options: { pattern: /^([2-9]{1}[0-9]{1}|[1-9]{1}[1-9]{1})\d{0,4}$/ },
+            autoComplete: "new-password"
+          }
+        }
+      ),
+      /* @__PURE__ */ t.jsx(K, {}),
+      /* @__PURE__ */ t.jsx(
+        z,
+        {
+          isDisabled: $,
+          label: {
+            label: d.companyTaxInfo.sicCode,
+            width: I
+          },
+          text: {
+            type: "text",
+            name: q(h, "sicCode"),
+            placeholder: d.companyTaxInfo.sicCodePlaceholder,
+            defaultValue: S?.sicCode,
+            options: { pattern: /^\d{2,4}$/ },
+            autoComplete: "new-password"
+          }
+        }
+      ),
+      /* @__PURE__ */ t.jsx(K, {}),
+      /* @__PURE__ */ t.jsx(
+        an,
+        {
+          isDisabled: $,
+          label: {
+            label: d.companyTaxInfo.taxesFiledYears,
+            width: I
+          },
+          multiSelectField: {
+            name: q(h, "taxesFiledYears"),
+            placeholder: d.companyTaxInfo.taxesFiledYearsPlaceholder,
+            defaultValue: {
+              selectedOptions: S?.taxesFiledYears.map(
+                (g) => g.toString()
+              ) ?? [],
+              allOptions: qe().map((g) => g.toString())
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ t.jsx(K, {}),
+      /* @__PURE__ */ t.jsx(
+        Ke,
+        {
+          name: q(h, "einDocument"),
+          isDisabled: $,
+          sizeLimit: Ge,
+          deleteFileStatusById: x,
+          updateFileStatusById: b,
+          filesEndPoint: r.filesEndPoint,
+          authParams: r.authParams,
+          label: {
+            label: f.einDocument,
+            width: y
+          },
+          filemetadataPayload: {
+            documentType: "tax_ein",
+            purposeId: "business_verification",
+            documentSide: "front"
+          },
+          file: C,
+          acceptableTypes: [
+            "image/jpg",
+            "image/jpeg",
+            "image/png",
+            "application/pdf",
+            "image/heic",
+            "image/heif"
+          ],
+          registerOptions: {
+            required: !1
+          },
+          hasError: l,
+          updateFilesEntity: r.updateFilesEntity,
+          onEditFileName: r.onEditFileName,
+          onDeleteFile: r.onDeleteFile,
+          onFileSizeError: (g) => s(g)
+        }
+      ),
+      /* @__PURE__ */ t.jsx(mn, { windowSize: n, isError: l, children: p.formatDocumentText10MB })
+    ] })
+  ] });
+}
+const q = (e, n) => `${e}.${n}`, rn = i.div`
+  display: flex;
+  flex-direction: column;
+  padding-top: ${o.sp3};
+  padding-bottom: ${o.sp9};
+`, cn = i.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${(e) => e.theme.colors.grey5};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  box-shadow: ${(e) => `${o.sp0} 2px ${o.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${o.sp2};
+`, dn = i(Y)`
+  color: ${(e) => e.theme.colors.champion};
+  margin-bottom: ${o.sp3};
+`, K = i.div`
+  display: flex;
+  flex: 1;
+  background-color: ${(e) => e.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`, mn = i(Xe)`
+  padding: ${o.sp1} ${o.sp4};
+  background: ${(e) => e.theme.colors.grey4};
+  border-radius: ${o.sp0} ${o.sp0} ${o.sp2} ${o.sp2};
+  text-align: ${(e) => e.windowSize === "small" ? "initial" : "right"};
+  color: ${(e) => e.isError ? k.important : e.theme.colors.grey1};
+`, pn = {
+  labelWidth: new m(100, 100, 140)
+};
+function un({
+  sectionId: e,
+  isDisabled: n,
+  primaryContact: a,
+  style: l
+}) {
+  const s = N(), d = L.getLocalizedStrings().companyPassport, f = pn.labelWidth.value(s), p = a == null;
+  return /* @__PURE__ */ t.jsxs(hn, { style: l, children: [
+    /* @__PURE__ */ t.jsx(gn, { children: d.primaryContact.title }),
+    /* @__PURE__ */ t.jsxs(fn, { children: [
+      /* @__PURE__ */ t.jsx(
+        et,
+        {
+          isDisabled: n,
+          label: {
+            label: d.primaryContact.name,
+            width: f
+          },
+          nameField: {
+            name: Re(e, "name"),
+            placeHolder: {
+              firstName: d.primaryContact.firstNamePlaceholder,
+              lastName: d.primaryContact.lastNamePlaceholder,
+              name: d.primaryContact.namePlaceholder
+            },
+            defaultValue: {
+              firstName: a?.firstName ?? "",
+              lastName: a?.lastName ?? ""
+            },
+            autoComplete: "new-password",
+            registerOptions: {
+              required: p !== !0
+            },
+            showFullNameError: !0
+          }
+        }
+      ),
+      /* @__PURE__ */ t.jsx(xn, {}),
+      /* @__PURE__ */ t.jsx(
+        z,
+        {
+          isDisabled: n,
+          label: { label: d.primaryContact.email, width: f },
+          text: {
+            type: "email",
+            name: Re(e, "email"),
+            placeholder: D(
+              d.primaryContact.email
+            ),
+            defaultValue: a?.email,
+            autoComplete: "new-password",
+            options: {
+              required: p !== !0
+            }
+          }
+        }
+      )
+    ] })
+  ] });
+}
+const Re = (e, n) => `${e}.${n}`, hn = i.div`
+  display: flex;
+  flex-direction: column;
+  padding-top: ${o.sp3};
+  padding-bottom: ${o.sp9};
+`, fn = i.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${(e) => e.theme.colors.grey5};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  box-shadow: ${(e) => `${o.sp0} 2px ${o.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${o.sp2};
+`, gn = i(Y)`
+  color: ${(e) => e.theme.colors.champion};
+  margin-bottom: ${o.sp3};
+`, xn = i.div`
+  display: flex;
+  flex: 1;
+  background-color: ${(e) => e.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`, yn = i.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  :not(:first-of-type) {
+    margin-left: ${o.sp3};
+  }
+`, bn = i.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  color: ${(e) => e.theme.colors.primary};
+`, $n = () => /* @__PURE__ */ t.jsx(bn, { children: "–" }), wn = i.div`
+  padding: 6px ${o.sp2};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`, Sn = i(Q)`
+  color: ${(e) => e.theme.colors.primary};
+  align-items: center;
+  justify-content: flex-end;
+  display: flex;
+  padding: 0 ${o.sp3};
+`, In = (e) => {
+  const { users: n, style: a } = e;
+  return /* @__PURE__ */ t.jsx(Sn, { style: a, children: n.length !== 0 ? n.filter(
+    (l) => !!l.firstName || !!l.lastName
+  ).map((l) => /* @__PURE__ */ t.jsxs(yn, { children: [
+    /* @__PURE__ */ t.jsx(wn, { children: `${l.firstName} ${l.lastName}` }),
+    /* @__PURE__ */ t.jsx(
+      Wt,
+      {
+        name: `${l.firstName} ${l.lastName}`,
+        size: o.sp4
+      }
+    )
+  ] }, l.userId)) : /* @__PURE__ */ t.jsx($n, {}) });
+}, E = {
+  width: new m(343, 580, 726),
+  height: new m(c[6], c[6]),
+  controlHeight: new m(c[6], c[6]),
+  paddingTopBottom: new m(c[2], c[2]),
+  marginTop: new m(c[2], c[2]),
+  marginBottom: new m(c[2], c[2]),
+  marginRight: new m(c[2], c[2]),
+  labelMarginLeft: new m(c[3], c[4]),
+  labelMarginRight: new m(c[3], c[4]),
+  labelMarginTop: new m(c[2], c[2])
+};
+function jn({
+  isDisabled: e,
+  label: n,
+  avatarLabels: a,
+  style: l
+}) {
+  const s = N();
+  return /* @__PURE__ */ t.jsxs(Cn, { size: s, style: l, children: [
+    /* @__PURE__ */ t.jsx(
+      Le,
+      {
+        isDisabled: e,
+        label: n.label,
+        style: {
+          marginLeft: E.labelMarginLeft.value(s),
+          marginRight: E.labelMarginRight.value(s),
+          marginTop: E.labelMarginTop.value(s),
+          width: n.width ?? "auto"
+        }
+      }
+    ),
+    /* @__PURE__ */ t.jsx(
+      In,
+      {
+        users: a.users,
+        style: {
+          minHeight: E.controlHeight.value(s),
+          display: "flex",
+          flexGrow: 1,
+          flexFlow: "row wrap",
+          maxWidth: n.width != null ? `calc(100% - ${n.width}px)` : "auto",
+          ...a.style
+        }
+      }
+    )
+  ] });
+}
+const vn = $t.memo(jn, ht), Cn = i.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  background-color: ${(e) => e.theme.colors.grey5};
+  width: ${(e) => E.width.valuePx(e.size)};
+  min-height: ${(e) => E.height.valuePx(e.size)};
+  padding-right: ${(e) => E.marginRight.valuePx(e.size)};
+  padding-top: ${(e) => E.paddingTopBottom.valuePx(e.size)};
+  padding-bottom: ${(e) => E.paddingTopBottom.valuePx(e.size)};
+
+  :first-of-type {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+`, ye = {
+  labelWidth: new m(100, 100, 140),
+  mediumLabelWidth: new m(140, 150, 160),
+  largeLabelWidth: new m(160, 180, 180)
+};
+function On({
+  data: e,
+  companyInfo: n,
+  sectionId: a,
+  isDisabled: l,
+  isZeniUser: s,
+  onScheduleClick: d
+}) {
+  const f = N(), {
+    companyPassport: p,
+    dateFormat: { visual: r }
+  } = L.getLocalizedStrings(), u = ye.labelWidth.value(f), x = ye.mediumLabelWidth.value(f), b = ye.largeLabelWidth.value(f), h = e.company.company, { controllers: $, subscriptions: S } = e, { managementInfo: O } = h, I = f === "small" ? p.zeniFinanceTeam.scheduleCallPlaceholderSmall : p.zeniFinanceTeam.scheduleCallPlaceholder, y = S.filter((g) => g.plan?.plan.name != null).map((g) => ({
+    text: g.plan?.plan.name,
+    subText: g.subscription.subscription.startDate.format(
+      r.MMMDCommaYYYYformat
+    )
+  })), v = ft(
+    S.map((g) => g.addOns.map((B) => ({
+      text: B.addOn.name,
+      subText: g.subscription.subscription.startDate.format(
+        r.MMMDCommaYYYYformat
+      )
+    })))
+  ), C = O.receiverEmails.map((g) => ({ text: g }));
+  return /* @__PURE__ */ t.jsxs(Fn, { children: [
+    /* @__PURE__ */ t.jsx(Pn, { children: p.zeniFinanceTeam.title }),
+    /* @__PURE__ */ t.jsxs(Ln, { children: [
+      /* @__PURE__ */ t.jsx(
+        vn,
+        {
+          label: {
+            label: p.zeniFinanceTeam.controller,
+            width: x
+          },
+          avatarLabels: {
+            users: $.map((g) => g.user)
+          }
+        }
+      ),
+      /* @__PURE__ */ t.jsx(se, {}),
+      s === !0 ? /* @__PURE__ */ t.jsx(
+        z,
+        {
+          isDisabled: l,
+          label: {
+            label: p.zeniFinanceTeam.scheduleCall,
+            width: x
+          },
+          text: {
+            type: "text",
+            name: Tn(a, "meetingLink"),
+            placeholder: I,
+            defaultValue: n?.meetingLink?.toString() ?? "",
+            autoComplete: "new-password",
+            options: {
+              pattern: _t
+            }
+          }
+        }
+      ) : n?.meetingLink != null ? /* @__PURE__ */ t.jsx(
+        qt,
+        {
+          label: {
+            label: p.zeniFinanceTeam.scheduleCall,
+            width: x
+          },
+          button: {
+            buttonTitle: p.zeniFinanceTeam.schedule,
+            onClick: () => d(n.meetingLink)
+          }
+        }
+      ) : null,
+      C.length > 0 ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+        /* @__PURE__ */ t.jsx(se, {}),
+        /* @__PURE__ */ t.jsx(
+          de,
+          {
+            label: {
+              label: p.zeniFinanceTeam.emailUs,
+              width: u
+            },
+            bullettedLabels: {
+              labels: C,
+              listStyleType: "none"
+            }
+          }
+        )
+      ] }) : null,
+      y.length > 0 ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+        /* @__PURE__ */ t.jsx(se, {}),
+        /* @__PURE__ */ t.jsx(
+          de,
+          {
+            label: {
+              label: p.zeniFinanceTeam.subscriptionPlans,
+              width: b
+            },
+            bullettedLabels: {
+              labels: y,
+              listStyleType: "none"
+            }
+          }
+        )
+      ] }) : null,
+      v.length > 0 ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+        /* @__PURE__ */ t.jsx(se, {}),
+        /* @__PURE__ */ t.jsx(
+          de,
+          {
+            label: {
+              label: p.zeniFinanceTeam.addons,
+              width: x
+            },
+            bullettedLabels: {
+              labels: v,
+              listStyleType: "none"
+            }
+          }
+        )
+      ] }) : null
+    ] })
+  ] });
+}
+const Tn = (e, n) => `${e}.${n}`, Fn = i.div`
+  display: flex;
+  flex-direction: column;
+  padding-top: ${o.sp3};
+  padding-bottom: ${o.sp9};
+`, Ln = i.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${(e) => e.theme.colors.grey5};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  box-shadow: ${(e) => `${o.sp0} 2px ${o.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${o.sp2};
+`, Pn = i(Y)`
+  color: ${(e) => e.theme.colors.champion};
+  margin-bottom: ${o.sp3};
+`, se = i.div`
+  display: flex;
+  flex: 1;
+  background-color: ${(e) => e.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`, Se = {
+  width: new m(343, 580, 726),
+  buttonWidth: new m(85, 85)
+}, Ve = "companyPassportPage", Ie = "companyInfo", je = "companyIncInfo", ve = "companyTaxInfo", Ce = "primaryContact", Oe = "companyOfficer", Te = "zeniFinanceTeam";
+function qn(e) {
+  const n = N(), a = Ue(), {
+    companyPassportView: l,
+    isZeniUser: s,
+    filesEndPoint: d,
+    authParams: f,
+    allIndustries: p,
+    isDisabled: r,
+    isSettings: u = !1,
+    onCompanyDetailsChanged: x,
+    onCompanyOfficerUpdated: b,
+    onNewCompanyOfficerAdded: h,
+    onPrimaryContactDetailsUpdated: $,
+    onNewCompanyOfficerRemoved: S,
+    onSaveAll: O,
+    onAddressClick: I,
+    onScheduleClick: y,
+    onBackClick: v,
+    onResetClick: C,
+    onEditFileName: g,
+    updateFilesEntity: B,
+    onDeleteFile: pe,
+    onClickMenuIcon: X
+  } = e, { companyView: Z, localData: H, deleteFileStatusById: Pe, updateFileStatusById: ke } = l, { companyFiles: ee } = H, Ne = {
+    authParams: f,
+    filesEndPoint: d,
+    onEditFileName: g,
+    onDeleteFile: pe,
+    updateFilesEntity: B
+  }, [J, te] = me(
+    void 0
+  ), {
+    companyDetails: nt,
+    primaryContact: at,
+    companyOfficerUpdateStatus: lt,
+    updateStatus: R
+  } = H, {
+    localData: oe,
+    addressStatus: it
+  } = nt, De = Rt(R.fetchState), ne = Object.values(lt).filter(
+    (P) => P.localData != null
+  ), W = gt({
+    mode: "all",
+    defaultValues: Ye(H, p)
+  });
+  re(() => () => {
+    te(void 0);
+  }, []), re(() => {
+    De === "In-Progress" && (R.fetchState === "Completed" || R.fetchState === "Error") && (W.reset(Ye(H, p)), J !== R.fetchState && te(R.fetchState));
+  }, [
+    J,
+    W,
+    De,
+    R,
+    H,
+    Z,
+    p,
+    ee
+  ]);
+  const st = async (P, w) => {
+    if (P.includes(Ie) || P.includes(je) || P.includes(ve) || P.includes(Te)) {
+      const { companyInfo: T, companyIncInfo: F, companyTaxInfo: V, zeniFinanceTeam: ue } = w;
+      x({
+        companyInfo: T,
+        incInfo: F,
+        taxDetails: V,
+        zeniFinanceTeam: ue
+      });
+    } else if (P.includes(Ce)) {
+      $(w.primaryContact);
+      const T = w.companyOfficer.map(
+        (F) => F.userId
+      );
+      if (w.primaryContact.userId != null && T.includes(w.primaryContact.userId)) {
+        const F = T.findIndex(
+          (V) => V === w.primaryContact.userId
+        );
+        F >= 0 && b({
+          ...w.companyOfficer[F],
+          name: w.primaryContact.name,
+          officerType: `Officer_${F + 1}`
+        });
+      }
+    } else if (P.includes(Oe)) {
+      const T = parseInt(P.split(".")[1]);
+      if (T >= 0)
+        b({
+          ...w.companyOfficer[T],
+          officerType: `Officer_${T + 1}`
+        }), w.companyOfficer[T].userId != null && w.companyOfficer[T].userId === w.primaryContact.userId && $({
+          ...w.primaryContact,
+          name: w.companyOfficer[T].name
+        });
+      else if (w.companyOfficer.length > ne.length) {
+        const F = w.companyOfficer[w.companyOfficer.length - 1];
+        h(F);
+      } else {
+        const F = w.companyOfficer.filter(
+          (V) => V.officerType != null
+        );
+        if (F.length < ne.length) {
+          const V = F.map(
+            (ue, dt) => {
+              const ze = {
+                ...ue,
+                officerType: `Officer_${dt + 1}`
+              };
+              return b(ze), ze;
+            }
+          );
+          F.length < ne.length && (S(
+            `Officer_${F.length + 1}`
+          ), W.reset({ companyOfficer: V }));
+        }
+      }
+    }
+  };
+  re(() => {
+    const P = W.watch((w, { name: T }) => {
+      T != null && w != null && xt(() => st(T, w));
+    });
+    return () => {
+      P.unsubscribe();
+    };
+  });
+  const rt = W.handleSubmit((P) => {
+    J != null && te(void 0), O();
+  }), {
+    companyPassport: ae,
+    common: { settings: ct }
+  } = L.getLocalizedStrings();
+  if (Z == null)
+    throw new Error("Company View is null");
+  return /* @__PURE__ */ t.jsxs(kn, { children: [
+    /* @__PURE__ */ t.jsx(
+      Vt,
+      {
+        title: ae.title,
+        backgroundColor: a.colors.grey4,
+        style: { zIndex: 3 },
+        onBackClick: v,
+        showBackButton: !u,
+        showMenuIcon: u ? n === "medium-compact" || n === "small" : !1,
+        source: "CompanyPassportPage",
+        onClickMenuIcon: X
+      }
+    ),
+    J != null ? /* @__PURE__ */ t.jsx(
+      ao,
+      {
+        fetchState: J,
+        onRemoveSnackbar: () => te(void 0)
+      }
+    ) : null,
+    /* @__PURE__ */ t.jsxs(Nn, { children: [
+      /* @__PURE__ */ t.jsx(Dn, { windowSize: n, children: u ? ct.infoText.companyDetails : ae.quickAccessInfo }),
+      /* @__PURE__ */ t.jsx(yt, { ...W, children: /* @__PURE__ */ t.jsxs("form", { id: Ae(Ve), onSubmit: rt, children: [
+        /* @__PURE__ */ t.jsx(
+          go,
+          {
+            sectionId: Ie,
+            companyInfo: oe?.companyInfo,
+            companyViewData: Z,
+            companyAddress: it,
+            isDisabled: r,
+            onCompanyAddressClick: I,
+            allIndustries: p
+          }
+        ),
+        /* @__PURE__ */ t.jsx(
+          lo,
+          {
+            sectionId: je,
+            updateFileStatusById: ke,
+            deleteFileStatusById: Pe,
+            companyFiles: ee,
+            companyIncInfo: oe?.incInfo,
+            fileProps: Ne,
+            isDisabled: r
+          }
+        ),
+        /* @__PURE__ */ t.jsx(
+          sn,
+          {
+            sectionId: ve,
+            updateFileStatusById: ke,
+            deleteFileStatusById: Pe,
+            companyFiles: ee,
+            companyTaxInfo: oe?.taxDetails,
+            fileProps: Ne,
+            isDisabled: r
+          }
+        ),
+        /* @__PURE__ */ t.jsx(
+          un,
+          {
+            sectionId: Ce,
+            primaryContact: at.localData,
+            isDisabled: r
+          }
+        ),
+        /* @__PURE__ */ t.jsx(
+          So,
+          {
+            companyOfficers: ne,
+            sectionId: Oe,
+            isDisabled: r,
+            onOfficerAddressClick: I
+          }
+        ),
+        /* @__PURE__ */ t.jsx(
+          On,
+          {
+            data: Z,
+            companyInfo: oe?.companyInfo,
+            isDisabled: r,
+            isZeniUser: s,
+            sectionId: Te,
+            onScheduleClick: y
+          }
+        )
+      ] }) })
+    ] }),
+    At(W.formState.dirtyFields) || jt(H, Z, ee) ? /* @__PURE__ */ t.jsx(
+      Yt,
+      {
+        formId: Ae(Ve),
+        primaryBtn: {
+          label: ae.save,
+          isLoading: R.fetchState === "In-Progress",
+          style: { width: Se.buttonWidth.value(n) },
+          isDisabled: e.isDisabled != null
+        },
+        cancelBtn: {
+          label: ae.cancel,
+          style: { width: Se.buttonWidth.value(n) },
+          onClick: () => {
+            W.reset(), C();
+          }
+        }
+      }
+    ) : null
+  ] });
+}
+const Ae = (e) => `${e}_form`, Ye = (e, n) => {
+  const { companyDetails: a, primaryContact: l, companyOfficerUpdateStatus: s } = e, d = L.getLocalizedStrings().companyPassport, f = a.localData?.incInfo.fileId != null ? [a.localData?.incInfo.fileId] : [], p = a.localData?.taxDetails.fileId != null ? [a.localData?.taxDetails.fileId] : [];
+  return {
+    [Ie]: {
+      ...bt(a.localData?.companyInfo, ["meetingLink"]),
+      businessModel: {
+        selectedOption: a.localData?.companyInfo?.businessModel,
+        allOptions: d.companyInfo.allBusinessModels
+      },
+      website: a.localData?.companyInfo.website?.toString() ?? "",
+      industry: {
+        selectedOption: a.localData?.companyInfo.industry,
+        allOptions: n?.map((r) => r.code)
+      },
+      firstMonthOfFY: a.localData?.companyInfo.firstMonthOfFY
+    },
+    [ve]: {
+      ...a.localData?.taxDetails,
+      taxesFiledYears: {
+        selectedOptions: a.localData?.taxDetails.taxesFiledYears.map(
+          (r) => r.toString()
+        ) ?? [],
+        allOptions: qe().map((r) => r.toString())
+      },
+      einDocument: e.companyFiles.find(
+        (r) => r.documentType === "tax_ein"
+      ),
+      fileIds: p
+    },
+    [je]: {
+      typeOfInc: {
+        selectedOption: a.localData?.incInfo?.typeOfInc,
+        allOptions: d.companyIncInfo.allTypesOfIncorporation
+      },
+      stateOfInc: {
+        selectedOption: a.localData?.incInfo?.stateOfInc,
+        allOptions: d.companyIncInfo.allStatesOfIncorporation
+      },
+      incDate: a.localData?.incInfo.incDate?.toDate(),
+      certificateOfIncorporation: e.companyFiles.find(
+        (r) => r.documentType === "certificate_of_incorporation"
+      ),
+      fileIds: f
+    },
+    [Ce]: {
+      userId: l.localData?.userId,
+      name: {
+        firstName: l.localData?.firstName,
+        lastName: l.localData?.lastName
+      },
+      email: l.localData?.email
+    },
+    [Oe]: Object.values(s).filter((r) => r.localData != null).map((r) => {
+      const u = r.localData;
+      return {
+        userId: u.userId,
+        officerType: u.officerType,
+        name: {
+          firstName: u.firstName,
+          lastName: u.lastName
+        },
+        email: u.email,
+        phone: u.phone
+      };
+    }),
+    [Te]: {
+      meetingLink: a.localData?.companyInfo.meetingLink?.toString() ?? ""
+    }
+  };
+}, kn = i.div`
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+  width: 100%;
+  background-color: ${(e) => e.theme.colors.grey4};
+`, Nn = i.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  height: 100%;
+  overflow-y: auto;
+  flex-direction: column;
+  align-items: center;
+`, Dn = i(Q)`
+  color: ${(e) => e.theme.colors.hero};
+  display: flex;
+  justify-content: center;
+  width: ${(e) => Se.width.valuePx(e.windowSize)};
+  margin-top: ${o.sp3};
+  margin-bottom: ${o.sp4};
+`;
+export {
+  qn as default,
+  Ae as uniqueName
+};