@zeniai/web-components 3.16.99 → 3.17.1

package/dist/InternationalWireVerificationPage-DAjrJ5n6.js

@@ -1,877 +0,0 @@
-import { d as re, u as G, m as ae, j as t, e as ne, S as se, c as F, g as ce, h as de, F as ue } from "./vendor-.pnpm-B2klaOGU.js";
-import { useState as me, useMemo as he, useEffect as A } from "react";
-import m from "@emotion/styled";
-import { zeniDate as R, dateNow as pe } from "@zeniai/client-epic-state";
-import { S as i, l2 as ge, b as J, o as Z, t as V, p as xe, C as _, u as H, aB as fe, R as c, D as o, a as K, al as be, l3 as Q, aH as we, fk as ye, E as X, er as q, aD as $e, aE as Se, A as ve, ao as je, dU as Fe, aw as ke } from "./index-CD9fwr4J.js";
-import { L as Pe } from "./LabeledDocumentField-C54d51RJ.js";
-const Ce = ({
-  name: e,
-  registerOptions: a,
-  defaultValue: n,
-  isDisabled: p,
-  style: d,
-  placeholder: s
-}) => {
-  const {
-    control: x,
-    formState: { errors: M }
-  } = re(), P = G(), z = ae(M, e ?? ""), f = (l) => ({
-    value: l.value,
-    label: l.label
-  }), w = (l) => l.map((h) => f(h)), D = (l) => {
-    if (!(l == null || !l))
-      return {
-        value: l,
-        label: n.allOptions.find((h) => h.value === l)?.label ?? l
-      };
-  }, g = (l) => l.map(
-    (h) => D(h)
-  ), C = {
-    container: (l) => ({
-      ...l,
-      width: "100%",
-      ...d
-    }),
-    menu: (l) => ({
-      ...l,
-      backgroundColor: P.colors.grey5,
-      borderRadius: i.sp1,
-      boxShadow: `${i.sp0} 2px ${i.sp2} ${P.colors.dropShadowHover}`,
-      whiteSpace: "nowrap",
-      zIndex: 2,
-      width: "100%",
-      margin: 0
-    }),
-    menuList: (l) => ({
-      ...l,
-      borderRadius: i.sp1
-    })
-  }, y = {
-    hasError: z
-  };
-  return /* @__PURE__ */ t.jsx(
-    ne,
-    {
-      name: e,
-      control: x,
-      defaultValue: n,
-      rules: a,
-      render: ({ field: { onChange: l, onBlur: h, value: S, ref: B } }) => /* @__PURE__ */ t.jsx(
-        se,
-        {
-          ...y,
-          ref: B,
-          isMulti: !0,
-          isSearchable: !0,
-          isClearable: !0,
-          controlShouldRenderValue: !0,
-          placeholder: s,
-          value: g(
-            S.selectedOptions
-          ),
-          options: w(
-            S.allOptions
-          ),
-          onChange: (r) => {
-            l({
-              selectedOptions: r.map(
-                (u) => u?.value
-              ),
-              allOptions: S.allOptions
-            });
-          },
-          tabSelectsValue: !1,
-          openMenuOnFocus: !0,
-          classNamePrefix: "multi-select-field",
-          onBlur: h,
-          menuPlacement: "auto",
-          maxMenuHeight: 210,
-          menuShouldScrollIntoView: !1,
-          closeMenuOnSelect: !1,
-          components: {
-            Control: Le,
-            Option: Oe,
-            Input: ze,
-            MultiValue: De,
-            MultiValueLabel: Be,
-            MultiValueRemove: Te,
-            ValueContainer: Me,
-            DropdownIndicator: Ue,
-            IndicatorSeparator: Ye,
-            Placeholder: Ie,
-            ClearIndicator: Ve
-          },
-          hideSelectedOptions: !1,
-          styles: C,
-          isDisabled: p != null
-        }
-      )
-    }
-  );
-}, Le = (e) => {
-  const { menuIsOpen: a, isFocused: n, isDisabled: p, selectProps: d } = e, { value: s, hasError: x } = d;
-  return /* @__PURE__ */ t.jsx(
-    _e,
-    {
-      menuIsOpen: a,
-      isFocused: n,
-      isDisabled: p,
-      optionsLen: s.length,
-      hasError: x,
-      children: /* @__PURE__ */ t.jsx(F.Control, { ...e, className: "select-control", children: e.children })
-    }
-  );
-}, Me = (e) => {
-  const { selectProps: a } = e, { value: n } = a;
-  return /* @__PURE__ */ t.jsxs(F.ValueContainer, { ...e, className: "select-value-container", children: [
-    e.children,
-    /* @__PURE__ */ t.jsx(Re, { className: "selected-options", children: n.map((p) => p.label).join(", ") })
-  ] });
-}, ze = (e) => {
-  const { selectProps: a } = e, { placeholder: n, value: p } = a;
-  return /* @__PURE__ */ t.jsx(
-    F.Input,
-    {
-      ...e,
-      autoComplete: "new-password",
-      placeholder: p.length === 0 ? n : void 0,
-      children: e.children
-    }
-  );
-}, De = (e) => /* @__PURE__ */ t.jsx(F.MultiValue, { ...e, children: e.children }), Be = (e) => {
-  const { data: a } = e;
-  return /* @__PURE__ */ t.jsx(F.MultiValueLabel, { ...e, children: a.label });
-}, Te = (e) => /* @__PURE__ */ t.jsx(F.MultiValueRemove, { ...e, children: /* @__PURE__ */ t.jsx(ee, { style: { marginTop: "2px" } }) }), Ve = (e) => /* @__PURE__ */ t.jsx(F.ClearIndicator, { ...e, children: /* @__PURE__ */ t.jsx(ee, {}) }), Ie = () => null, Oe = (e) => {
-  const { isSelected: a, isDisabled: n, isFocused: p } = e;
-  return /* @__PURE__ */ t.jsx(
-    Ee,
-    {
-      isFocused: p,
-      isSelected: a,
-      isDisabled: n,
-      children: /* @__PURE__ */ t.jsx(F.Option, { ...e, className: "select-option", children: /* @__PURE__ */ t.jsxs(We, { children: [
-        /* @__PURE__ */ t.jsx(ge, { countryCode3: e.value }),
-        /* @__PURE__ */ t.jsx(He, { children: /* @__PURE__ */ t.jsx(Ne, { isSelected: a, isDisabled: n, children: e.label }) }),
-        a ? /* @__PURE__ */ t.jsxs(Ae, { children: [
-          /* @__PURE__ */ t.jsx(qe, { className: "right-tick-icon" }),
-          /* @__PURE__ */ t.jsx(J, { className: "close-tick-icon" })
-        ] }) : null
-      ] }) })
-    }
-  );
-}, _e = m.div`
-  width: 100%;
-  background-color: ${(e) => e.theme.colors.grey5};
-  cursor: ${(e) => e.isDisabled ? "not-allowed" : "pointer"};
-
-  .select-control {
-    border: none;
-    padding: 0 ${i.sp3};
-    min-height: 100%;
-    background-color: inherit;
-    box-shadow: none;
-
-    &:hover {
-      fill: ${(e) => e.theme.colors.primary};
-     background-color: ${(e) => e.hasError ? _.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: ${i.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 ? `${i.sp2}` : `${i.sp0}`};
-    }
-  }
-
-  .select-value-container {
-    width: 100%;
-    padding: 6px ${i.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;
-
-    ${V.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 ${i.sp2};
-      min-width: fit-content;
-      background-color: transparent;
-      margin: ${i.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: ${i.sp1};
-      :last-of-type {
-        margin: ${i.sp0};
-      }
-    }
-
-    .multi-select-field__input-container {
-      display: flex;
-      width: ${(e) => e.isFocused === !1 && e.optionsLen === 0 ? "100%" : e.isFocused === !1 && e.optionsLen > 0 ? i.sp0 : "fit-content"};
-      ${V.standardRegular.css};
-      color: ${(e) => e.theme.colors.primary};
-      margin: ${i.sp0};
-      cursor: inherit;
-      color: ${(e) => e.hasError ? _.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 ? _.important : e.theme.colors.grey1};
-        }
-        }
-
-        :disabled {
-          visibility: visible;
-        }
-      }
-    }
-
-    .multi-select-field__multi-value__label {
-      color: inherit;
-      padding: 0;
-      margin-right: ${i.sp1};
-      ${V.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};
-      }
-    }
-  }
-`, Re = m(Z)`
-  color: ${(e) => e.theme.colors.primary};
-  width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  text-align: right;
-`, Ee = m.div`
-  .select-option {
-    ${V.smallRegular.css};
-    height: ${i.sp6};
-    padding: 9px ${i.sp3};
-    color: ${(e) => e.isSelected ? e.theme.colors.primary : e.theme.colors.champion};
-    background-color: ${(e) => e.isSelected || 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;
-      }
-    }
-  }
-`, We = m.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-`, Ne = m.label`
-  padding-right: 10px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  cursor: ${(e) => e.isDisabled ? "not-allowed" : e.isSelected ? "default" : "pointer"};
-`, He = m.div`
-  width: 100%;
-  display: flex;
-  align-items: center;
-`, Ae = m.div`
-  display: flex;
-`, qe = m(xe)`
-  width: 12px;
-  height: 12px;
-  margin-right: 2px;
-  color: ${(e) => e.theme.colors.primary};
-`, ee = m(J)`
-  width: ${i.sp3};
-  height: ${i.sp3};
-  color: ${(e) => e.theme.colors.primary};
-`, Ue = () => null, Ye = () => null, $ = {
-  width: new c(343, 580, 726),
-  height: new c(o[6], o[6]),
-  controlHeight: new c(o[6], o[6]),
-  paddingTopBottom: new c(o[2], o[2]),
-  marginTop: new c(o[2], o[2]),
-  marginBottom: new c(o[2], o[2]),
-  marginRight: new c(o[2], o[2]),
-  labelMarginLeft: new c(o[3], o[4]),
-  labelMarginRight: new c(o[3], o[4]),
-  labelMarginTop: new c(o[2], o[2])
-};
-function Ge({
-  isDisabled: e,
-  label: a,
-  multiSelectField: n,
-  style: p
-}) {
-  const d = H();
-  return /* @__PURE__ */ t.jsxs(Je, { size: d, style: p, isDisabled: e != null, children: [
-    /* @__PURE__ */ t.jsx(
-      fe,
-      {
-        isDisabled: e,
-        label: a.label,
-        htmlFor: n.name,
-        style: {
-          marginLeft: $.labelMarginLeft.value(d),
-          marginRight: $.labelMarginRight.value(d),
-          marginTop: $.labelMarginTop.value(d),
-          width: a.width ?? "auto"
-        }
-      }
-    ),
-    /* @__PURE__ */ t.jsx(
-      Ce,
-      {
-        ...n,
-        isDisabled: e,
-        style: {
-          display: "flex",
-          flexGrow: 1,
-          maxWidth: a.width != null ? `calc(100% - ${a.width}px)` : "auto",
-          minHeight: $.controlHeight.value(d)
-        }
-      }
-    )
-  ] });
-}
-const Je = m.div`
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  background-color: ${(e) => e.theme.colors.grey5};
-  width: ${(e) => $.width.valuePx(e.size)};
-  min-height: ${(e) => $.height.valuePx(e.size)};
-  padding-right: ${(e) => $.marginRight.valuePx(e.size)};
-  padding-top: ${(e) => $.paddingTopBottom.valuePx(e.size)};
-  padding-bottom: ${(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;
-  }
-
-  :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};
-    }
-  }
-`, U = {
-  largeLabelWidth: new c(150, 210, 252),
-  paddingTopBottom: new c(o[3], o[3]),
-  labelHeight: new c(o[6], o[6]),
-  labelMarginLeft: new c(o[3], o[4]),
-  labelMarginRight: new c(o[3], o[4]),
-  labelMarginTop: new c(o[2], o[2]),
-  controlHeight: new c(o[6], o[6]),
-  paddingBottom: new c(o[3], o[2])
-}, Ze = ({
-  sectionId: e,
-  internationalOnboardingDetails: a,
-  filesEndPoint: n,
-  authParams: p,
-  isReadonly: d,
-  deleteFileStatusById: s,
-  updateFileStatusById: x,
-  onEditFileName: M,
-  onDeleteFile: P,
-  updateFilesEntity: z
-}) => {
-  const f = H(), { verificationFormLocalData: w } = a, {
-    dateFormat: { visual: D },
-    common: { documents: g },
-    commonSetUp: { businessVerification: C },
-    spendManagement: {
-      billPay: {
-        vendorCreation: {
-          wireDetails: { international: y }
-        }
-      }
-    }
-  } = K.getLocalizedStrings(), l = U.largeLabelWidth.value(f), [h, S] = me(!1), B = a.verificationFormFields.slice().sort((r, u) => r.type === "file" && u.type !== "file" ? -1 : 0);
-  return /* @__PURE__ */ t.jsx(Ke, { children: /* @__PURE__ */ t.jsx(Qe, { children: B.map((r) => {
-    switch (r.type) {
-      case "file":
-        return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-          /* @__PURE__ */ t.jsx(
-            Pe,
-            {
-              name: v(e, r.name),
-              isDisabled: d,
-              sizeLimit: ye,
-              deleteFileStatusById: s,
-              updateFileStatusById: x,
-              filesEndPoint: n,
-              authParams: p,
-              label: {
-                label: r.label,
-                width: l
-              },
-              filemetadataPayload: {
-                documentType: "certificate_of_good_standing",
-                purposeId: "international_wire_business_verification",
-                documentSide: "front"
-              },
-              file: a.userFiles.find(
-                (u) => u.fileId === w[r.name]
-              ),
-              acceptableTypes: [
-                "image/jpg",
-                "image/jpeg",
-                "image/png",
-                "application/pdf",
-                "image/heic",
-                "image/heif"
-              ],
-              registerOptions: {
-                required: !0
-              },
-              hasError: h,
-              updateFilesEntity: z,
-              onEditFileName: M,
-              onDeleteFile: P,
-              onFileSizeError: (u) => S(u),
-              placeholderText: C.dragDropClickPlaceholder,
-              showPhotoPicker: !0,
-              useMobileCam: !0,
-              showWebCamPopUpCloseIcon: !0
-            },
-            v(e, r.name)
-          ),
-          d !== "readonly" ? /* @__PURE__ */ t.jsx(Xe, { windowSize: f, isError: !1, children: g.formatDocumentText10MB }) : null,
-          /* @__PURE__ */ t.jsx(O, {})
-        ] });
-      case "date":
-        return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-          /* @__PURE__ */ t.jsx(
-            we,
-            {
-              isDisabled: d,
-              label: {
-                label: r.label + y.colon,
-                width: l
-              },
-              style: {
-                paddingBottom: U.paddingBottom.valuePx(f)
-              },
-              dateField: {
-                name: v(e, r.name),
-                placeholder: r.placeholder,
-                defaultValue: w[r.name] ? R(
-                  w[r.name]
-                ) : void 0,
-                dateFormat: D.defaultInput,
-                maxDate: pe().subtract(1, "day"),
-                minDate: R("01 Jan 1900"),
-                autoComplete: "off",
-                registerOptions: {
-                  required: !0
-                }
-              }
-            },
-            v(e, r.name)
-          ),
-          /* @__PURE__ */ t.jsx(O, {})
-        ] });
-      case "enum":
-        return r.isMultipleValuesAllowed === !1 ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-          /* @__PURE__ */ t.jsx(
-            be,
-            {
-              isDisabled: d,
-              label: {
-                label: r.label + y.colon,
-                width: l
-              },
-              singleSelectPickerField: {
-                name: v(e, r.name),
-                placeholder: r.placeholder,
-                optionHeight: o[6],
-                optionTextStyle: V.smallRegular,
-                maxMenuHeight: 206,
-                registerOptions: {
-                  required: !0,
-                  validate: (u) => u != null && !!u.selectedOption
-                },
-                defaultValue: {
-                  selectedOption: w[r.name],
-                  allOptions: r.fieldValues.map((u) => ({
-                    label: u.description,
-                    value: u.code
-                  }))
-                }
-              }
-            },
-            v(e, r.name)
-          ),
-          /* @__PURE__ */ t.jsx(O, {})
-        ] }) : /* @__PURE__ */ t.jsx(
-          Ge,
-          {
-            isDisabled: d,
-            label: {
-              label: r.label + y.colon,
-              width: l
-            },
-            style: {
-              zIndex: 0
-            },
-            multiSelectField: {
-              name: v(e, r.name),
-              placeholder: r.placeholder,
-              registerOptions: {
-                required: !0,
-                validate: (u) => u != null && !!u.selectedOptions && u.selectedOptions.length > 0
-              },
-              defaultValue: Q(
-                w[r.name],
-                r.fieldValues.map(
-                  (u) => u.code
-                  // countryCode returned from platform is Alpha 2
-                )
-              )
-            }
-          },
-          v(e, r.name)
-        );
-      default:
-        return /* @__PURE__ */ t.jsx(O, {});
-    }
-  }) }) });
-}, v = (e, a) => `${e}.formData.${a}`, Ke = m.div`
-  display: flex;
-  flex-direction: column;
-`, Qe = m.div`
-  display: flex;
-  flex-direction: column;
-  background-color: ${(e) => e.theme.colors.grey5};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-  box-shadow: ${(e) => `${i.sp0} 2px ${i.sp1} ${e.theme.colors.dropShadowNormal}`};
-  border-radius: ${i.sp2};
-`, O = m.div`
-  display: flex;
-  flex: 1;
-  background-color: ${(e) => e.theme.colors.grey3};
-  min-height: 1px;
-  max-height: 1px;
-`, Xe = m(X)`
-  padding: ${i.sp1} ${i.sp4};
-
-  background: ${(e) => e.theme.colors.grey4};
-  border-radius: ${i.sp0} ${i.sp0} ${i.sp2} ${i.sp2};
-  text-align: ${(e) => e.windowSize === "small" ? "initial" : "right"};
-  color: ${(e) => e.isError ? _.important : e.theme.colors.grey1};
-`, j = {
-  width: new c(343, 580, 726),
-  titleWidth: new c(343, 580, 726, 826),
-  subTitlePaddingTop: new c(12, o[3]),
-  subTitlePaddingBottom: new c(o[3], o[3]),
-  verificationDetailsRowGap: new c(12, o[5], o[5]),
-  termsPaddingLeftRight: new c(o[0], o[3]),
-  marginLeft: new c(o[4], o[0])
-}, et = {
-  title: new ke("standardSemiBold", "largeSemiBold")
-}, N = "intlWireVerification", pt = ({
-  internationalOnboardingDetails: e,
-  filesEndPoint: a,
-  authParams: n,
-  isReadonly: p,
-  analytics: d,
-  isLocalCurrencyEnabled: s,
-  onEditFileName: x,
-  onDeleteFile: M,
-  updateFilesEntity: P,
-  onFormDataChange: z,
-  onCancelClick: f,
-  onSubmitClick: w
-}) => {
-  const D = G(), g = H(), C = "IntlWireverificationPage", { verificationFormFetchState: y, verificationFormSubmitState: l } = e, {
-    commonSetUp: { internationalWire: h },
-    common: { footer: S },
-    dateFormat: {
-      analytics: { YYYYDashMMDashDDFormat: B }
-    }
-  } = K.getLocalizedStrings(), r = /* @__PURE__ */ t.jsxs(at, { children: [
-    h.terms1,
-    /* @__PURE__ */ t.jsx(q, { href: h.tosUrl, linkText: h.tos }),
-    h.and,
-    /* @__PURE__ */ t.jsx(
-      q,
-      {
-        href: h.privacyPolicyUrl,
-        linkText: h.privacyPolicy
-      }
-    )
-  ] }), u = $e(l.fetchState), I = ce({
-    mode: "all",
-    reValidateMode: "onChange",
-    defaultValues: he(
-      () => tt(e),
-      [e]
-    )
-  }), { isValid: te } = I.formState;
-  A(() => {
-    u === "In-Progress" && l.fetchState === "Completed" && f();
-  }, [u, l, f]);
-  const oe = I.handleSubmit(() => {
-    te && (d?.trackSubmitIntlWire(s), w());
-  }), ie = async (E) => {
-    const b = E[N].formData;
-    if (b != null) {
-      let T = {};
-      Object.keys(b).forEach((k) => {
-        const W = e.verificationFormFields.find(
-          (L) => L.name === k
-        );
-        if (b[k] != null && W != null) {
-          let L;
-          switch (W.type) {
-            case "file":
-              L = b[k].fileId;
-              break;
-            case "date":
-              L = R(b[k].toString()).format(
-                B
-              );
-              break;
-            default:
-              L = W.isMultipleValuesAllowed === !0 ? b[k].selectedOptions.map(
-                (le) => Fe(le)
-              ) : b[k].selectedOption;
-              break;
-          }
-          T = {
-            ...T,
-            [k]: L
-          };
-        }
-      }), z(T);
-    }
-  };
-  return A(() => {
-    const E = I.watch((b, { name: T }) => {
-      T != null && b != null && de(() => ie(b));
-    });
-    return () => {
-      E.unsubscribe();
-    };
-  }), /* @__PURE__ */ t.jsxs(ot, { children: [
-    /* @__PURE__ */ t.jsx(
-      Se,
-      {
-        title: h.title,
-        backgroundColor: D.colors.grey4,
-        style: { zIndex: 4 },
-        onBackClick: () => {
-          f();
-        },
-        showBackButton: !0,
-        showMenuIcon: !1,
-        source: "InternationalWireVerificationPage"
-      }
-    ),
-    /* @__PURE__ */ t.jsxs(lt, { windowSize: g, children: [
-      /* @__PURE__ */ t.jsx(it, { windowSize: g, children: h.subTitle }),
-      y.fetchState === "In-Progress" || y.fetchState === "Not-Started" ? /* @__PURE__ */ t.jsx(rt, { children: /* @__PURE__ */ t.jsx(ve, { size: "ExtraLarge", start: !0 }) }) : /* @__PURE__ */ t.jsx(ue, { ...I, children: /* @__PURE__ */ t.jsxs("form", { id: Y(C), onSubmit: oe, children: [
-        /* @__PURE__ */ t.jsx(nt, { windowSize: g, children: h.header }),
-        /* @__PURE__ */ t.jsx(
-          Ze,
-          {
-            internationalOnboardingDetails: e,
-            sectionId: N,
-            updateFilesEntity: P,
-            onEditFileName: x,
-            onDeleteFile: M,
-            isReadonly: p,
-            filesEndPoint: a,
-            authParams: n,
-            deleteFileStatusById: e.deleteFileStatusById,
-            updateFileStatusById: e.updateFileStatusById
-          }
-        )
-      ] }) })
-    ] }),
-    p !== "readonly" && y.fetchState === "Completed" ? /* @__PURE__ */ t.jsx(
-      je,
-      {
-        formId: Y(C),
-        primaryBtn: {
-          label: S.submit,
-          style: {
-            width: "auto",
-            minWidth: g === "small" ? "auto" : "82px"
-          },
-          isLoading: l.fetchState === "In-Progress"
-        },
-        containerStyle: {
-          width: g === "small" ? j.width.valuePx(g) : "auto",
-          justifyContent: g === "small" ? "space-between" : "center"
-        },
-        helperStyle: {
-          width: g === "small" ? j.width.valuePx(g) : "auto",
-          paddingLeft: j.termsPaddingLeftRight.valuePx(g),
-          paddingRight: j.termsPaddingLeftRight.valuePx(g),
-          textAlign: g === "small" ? "center" : "initial"
-        },
-        showCancel: !0,
-        cancelBtn: {
-          reverseSpinnerColor: !1,
-          label: S.cancel,
-          style: { width: g === "small" ? "auto" : "82px" },
-          onClick: () => {
-            f();
-          }
-        },
-        helperText: r,
-        style: {
-          padding: `12px ${i.sp3}`,
-          zIndex: 4
-        }
-      }
-    ) : null
-  ] });
-}, tt = (e) => {
-  const { verificationFormFields: a, verificationFormLocalData: n, userFiles: p } = e, d = {};
-  return a.forEach((s) => {
-    s.type === "enum" ? s.isMultipleValuesAllowed === !1 ? d[s.name] = {
-      selectedOption: n[s.name],
-      allOptions: s.fieldValues.map((x) => ({
-        label: x.description,
-        value: x.code
-      }))
-    } : d[s.name] = Q(
-      n[s.name],
-      s.fieldValues.map((x) => x.code)
-    ) : s.type === "date" ? d[s.name] = n[s.name] ? R(n[s.name]).toDate() : void 0 : s.type === "file" ? d[s.name] = p.find(
-      (x) => x.fileId !== n[s.name]
-    ) : d[s.name] = n[s.name];
-  }), {
-    [N]: {
-      formData: d
-    }
-  };
-}, Y = (e) => `${e}_form`, ot = m.div`
-  display: flex;
-  min-height: 100%;
-  flex-direction: column;
-  width: 100%;
-  background-color: ${(e) => e.theme.colors.grey4};
-`, it = m(Z)`
-  color: ${(e) => e.theme.colors.hero};
-  display: flex;
-  justify-content: center;
-  width: ${(e) => j.titleWidth.valuePx(e.windowSize)};
-  padding-top: ${(e) => j.subTitlePaddingTop.valuePx(e.windowSize)};
-  padding-bottom: ${(e) => j.subTitlePaddingBottom.valuePx(e.windowSize)};
-  text-align: ${(e) => e.windowSize === "small" ? "initial" : "center"};
-`, lt = m.div`
-  display: flex;
-  justify-content: flex-start;
-  height: 100%;
-  overflow-y: auto;
-  flex-direction: column;
-  align-items: center;
-  padding-bottom: ${i.sp9};
-  row-gap: ${(e) => j.verificationDetailsRowGap.valuePx(e.windowSize)};
-`, rt = m.div`
-  display: flex;
-  width: 100%;
-  height: calc(100vh - 110px);
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  background-color: ${(e) => e.theme.colors.grey4};
-`, at = m(X)`
-  text-align: center;
-  max-width: 750px;
-  color: ${(e) => e.theme.colors.hero};
-`, nt = m.div`
-  display: flex;
-  align-items: center;
-  margin-bottom: ${i.sp3};
-  color: ${(e) => e.theme.colors.primary};
-  ${(e) => `${et.title.style(e.windowSize)}`};
-`;
-export {
-  pt as default,
-  Y as uniqueName
-};