@vpdev2/metakyc-sdk 1.0.50 → 1.0.51

package/dist/index.js

@@ -3,7 +3,7 @@ var ft = (e, t, n) => t in e ? yt(e, t, { enumerable: !0, configurable: !0, writ
 var te = (e, t, n) => ft(e, typeof t != "symbol" ? t + "" : t, n);
 import xt from "axios";
 import * as tt from "react";
-import fe, { createContext as bt, useState as b, useMemo as Ae, useEffect as re, useContext as vt, useRef as X, useCallback as Q, forwardRef as Ue, createElement as Qe } from "react";
+import fe, { createContext as bt, useState as v, useMemo as Ae, useEffect as re, useContext as vt, useRef as X, useCallback as Q, forwardRef as Ue, createElement as Qe } from "react";
 import { jsx as r, jsxs as i, Fragment as wt } from "react/jsx-runtime";
 import { createPortal as ot } from "react-dom";
 import { useForm as kt, Controller as Re } from "react-hook-form";
@@ -907,7 +907,16 @@ class Xt {
       }), n.result.applicantFormVisibleFields && n.result.applicantFormVisibleFields.length > 0 && (a.applicantFormVisibleFields = n.result.applicantFormVisibleFields), n.result.applicantFormRequiredFields && n.result.applicantFormRequiredFields.length > 0 && (a.applicantFormRequiredFields = n.result.applicantFormRequiredFields), n.result.allowedLanguages && n.result.allowedLanguages.length > 0 && (a.allowedLanguages = n.result.allowedLanguages), n.result.applicantFormPages)
         try {
           const s = typeof n.result.applicantFormPages == "string" ? JSON.parse(n.result.applicantFormPages) : n.result.applicantFormPages;
-          Array.isArray(s) && s.length > 0 && (a.applicantFormPages = s);
+          Array.isArray(s) && s.length > 0 && (a.applicantFormPages = s.map((o) => {
+            const l = !o._v || o._v < 4;
+            return {
+              ...o,
+              fields: (o.fields || []).map((c) => ({
+                ...c,
+                colSpan: l ? c.colSpan === 1 ? 2 : 4 : Math.min(4, Math.max(1, c.colSpan ?? 4))
+              }))
+            };
+          }));
         } catch {
         }
       return a;
@@ -1778,7 +1787,7 @@ class or {
   }
 }
 const ct = bt(null), nn = ({ config: e, children: t }) => {
-  const [n, a] = b(null), s = fe.useRef(!1), o = fe.useRef(!1), l = Ae(() => {
+  const [n, a] = v(null), s = fe.useRef(!1), o = fe.useRef(!1), l = Ae(() => {
     const u = new zt(e), m = new Bt(u), x = new $t(u), p = new _t(u), y = new Ut(u), g = new Ht(u), h = new qt(u), S = new Kt(u), F = new jt(u), w = new Wt(u), M = new Xt(u), A = new or();
     return {
       httpClient: u,
@@ -1922,7 +1931,7 @@ function cn() {
   ur(), pr();
 }
 function hr(e) {
-  const { createOrchestrator: t } = ye(), [n, a] = b(null), [s, o] = b(!1), [l, c] = b(null), u = X(null), m = e || dr();
+  const { createOrchestrator: t } = ye(), [n, a] = v(null), [s, o] = v(!1), [l, c] = v(null), u = X(null), m = e || dr();
   re(() => {
     u.current || (u.current = t());
   }, [t]), re(() => {
@@ -2032,7 +2041,7 @@ function hr(e) {
   };
 }
 function gr(e) {
-  const { questionnaireService: t, applicantService: n } = ye(), [a, s] = b(null), [o, l] = b({}), [c, u] = b(!1), [m, x] = b(!1), [p, y] = b(null), g = X(!1), h = X(null), S = Q(async () => {
+  const { questionnaireService: t, applicantService: n } = ye(), [a, s] = v(null), [o, l] = v({}), [c, u] = v(!1), [m, x] = v(!1), [p, y] = v(null), g = X(!1), h = X(null), S = Q(async () => {
     var w, M;
     if (e) {
       if (g.current) {
@@ -2091,7 +2100,7 @@ function gr(e) {
   };
 }
 function yr(e) {
-  const { uploadDocumentService: t } = ye(), [n, a] = b(null), [s, o] = b(!1), [l, c] = b(!1), [u, m] = b(0), [x, p] = b(null), y = X(!1), g = X(null), h = Q(async () => {
+  const { uploadDocumentService: t } = ye(), [n, a] = v(null), [s, o] = v(!1), [l, c] = v(!1), [u, m] = v(0), [x, p] = v(null), y = X(!1), g = X(null), h = Q(async () => {
     if (e) {
       if (y.current) {
         console.log("[UploadDocument] Load already in progress, skipping...");
@@ -2135,7 +2144,7 @@ function yr(e) {
   };
 }
 function dn(e) {
-  const { appropriatenessTestService: t } = ye(), [n, a] = b(null), [s, o] = b(!1), [l, c] = b(!1), [u, m] = b(null), [x, p] = b(null), y = X(!1), g = X(null), h = Q(async () => {
+  const { appropriatenessTestService: t } = ye(), [n, a] = v(null), [s, o] = v(!1), [l, c] = v(!1), [u, m] = v(null), [x, p] = v(null), y = X(!1), g = X(null), h = Q(async () => {
     if (e) {
       if (y.current) {
         console.log("[AppropriatenessTest] Load already in progress, skipping...");
@@ -2180,7 +2189,7 @@ function dn(e) {
   };
 }
 function fr(e) {
-  const { overviewService: t } = ye(), [n, a] = b(null), [s, o] = b(!1), [l, c] = b(!1), [u, m] = b(null), x = X(!1), p = X(null), y = Q(async () => {
+  const { overviewService: t } = ye(), [n, a] = v(null), [s, o] = v(!1), [l, c] = v(!1), [u, m] = v(null), x = X(!1), p = X(null), y = Q(async () => {
     if (e) {
       if (x.current) {
         console.log("[Overview] Load already in progress, skipping...");
@@ -2222,9 +2231,9 @@ function fr(e) {
   };
 }
 function xr(e) {
-  const { identityService: t } = ye(), [n, a] = b(
+  const { identityService: t } = ye(), [n, a] = v(
     null
-  ), [s, o] = b(!1), [l, c] = b(null), u = X(!1), m = Q(
+  ), [s, o] = v(!1), [l, c] = v(null), u = X(!1), m = Q(
     async (y, g) => {
       if (e) {
         if (u.current) {
@@ -2308,7 +2317,7 @@ function xr(e) {
   };
 }
 function br(e) {
-  const { riskScoringService: t, applicantService: n } = ye(), [a, s] = b(null), [o, l] = b({}), [c, u] = b(!1), [m, x] = b(!1), [p, y] = b(null), [g, h] = b(null), S = X(!1), F = X(null), w = Q(async () => {
+  const { riskScoringService: t, applicantService: n } = ye(), [a, s] = v(null), [o, l] = v({}), [c, u] = v(!1), [m, x] = v(!1), [p, y] = v(null), [g, h] = v(null), S = X(!1), F = X(null), w = Q(async () => {
     var A;
     if (e) {
       if (S.current) {
@@ -2369,7 +2378,7 @@ function br(e) {
   };
 }
 function vr() {
-  const { applicantService: e, config: t } = ye(), [n, a] = b(!1), [s, o] = b(null), l = X(!1), c = X(!1), u = () => "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(g) {
+  const { applicantService: e, config: t } = ye(), [n, a] = v(!1), [s, o] = v(null), l = X(!1), c = X(!1), u = () => "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(g) {
     const h = Math.random() * 16 | 0;
     return (g === "x" ? h : h & 3 | 8).toString(16);
   }), m = Q(
@@ -2698,7 +2707,7 @@ const nt = 280, wr = ({
   disabled: o = !1,
   required: l = !1
 }) => {
-  const [c, u] = b(!1), [m, x] = b(""), [p, y] = b(null), g = X(null), h = X(null), S = X(null), F = Q(() => {
+  const [c, u] = v(!1), [m, x] = v(""), [p, y] = v(null), g = X(null), h = X(null), S = X(null), F = Q(() => {
     if (!h.current) return null;
     const N = h.current.getBoundingClientRect(), ne = window.innerHeight - N.bottom < nt && N.top > nt;
     return { top: ne ? N.top : N.bottom + 4, left: N.left, width: N.width, openUp: ne };
@@ -2941,7 +2950,7 @@ const nt = 280, wr = ({
   className: m
 }) => {
   var D;
-  const [x, p] = b(!1), [y, g] = b(""), [h, S] = b(null), F = X(null), w = X(null), M = X(null), A = X(null), I = Q(() => {
+  const [x, p] = v(!1), [y, g] = v(""), [h, S] = v(null), F = X(null), w = X(null), M = X(null), A = X(null), I = Q(() => {
     if (!w.current) return null;
     const C = w.current.getBoundingClientRect(), ee = window.innerHeight - C.bottom < at && C.top > at;
     return {
@@ -3142,7 +3151,7 @@ const kr = ({
   value: l = [],
   className: c
 }) => {
-  const [u, m] = b(!1), x = X(null), p = (w) => {
+  const [u, m] = v(!1), x = X(null), p = (w) => {
     if (!w) return;
     const M = Array.from(w);
     if (s && M.filter((I) => I.size > s).length > 0) {
@@ -3487,7 +3496,7 @@ const Lr = ({
   onComplete: t,
   onBack: n
 }) => {
-  const { questionnaire: a, initialAnswers: s, isLoading: o, isSubmitting: l, error: c, submit: u } = gr(e), [m, x] = b({}), [p, y] = b({}), [g, h] = b(0);
+  const { questionnaire: a, initialAnswers: s, isLoading: o, isSubmitting: l, error: c, submit: u } = gr(e), [m, x] = v({}), [p, y] = v({}), [g, h] = v(0);
   fe.useEffect(() => {
     s && Object.keys(s).length > 0 && Object.keys(m).length === 0 && x(s);
   }, [s]);
@@ -3715,7 +3724,7 @@ const Lr = ({
   onComplete: t,
   onBack: n
 }) => {
-  const { uploadDocument: a, isLoading: s, isSubmitting: o, error: l, submit: c } = yr(e), [u, m] = b({}), x = async (p) => {
+  const { uploadDocument: a, isLoading: s, isSubmitting: o, error: l, submit: c } = yr(e), [u, m] = v({}), x = async (p) => {
     if (p.preventDefault(), !a) return;
     const y = await Promise.all(
       a.uploadDocumentFiles.map(async (h) => {
@@ -3846,7 +3855,7 @@ const _r = ({
   onComplete: t,
   onBack: n
 }) => {
-  const { criteria: a, initialAnswers: s, isLoading: o, isSubmitting: l, error: c, submit: u } = br(e), [m, x] = b({}), [p, y] = b({}), [g, h] = b(0), [S, F] = b(!1);
+  const { criteria: a, initialAnswers: s, isLoading: o, isSubmitting: l, error: c, submit: u } = br(e), [m, x] = v({}), [p, y] = v({}), [g, h] = v(0), [S, F] = v(!1);
   fe.useEffect(() => {
     s && Object.keys(s).length > 0 && Object.keys(m).length === 0 && x(s);
   }, [s]);
@@ -4080,7 +4089,7 @@ const _r = ({
   onComplete: t,
   onBack: n
 }) => {
-  const { investorCategorizationService: a } = ye(), [s, o] = b(null), [l, c] = b(!1), [u, m] = b(null);
+  const { investorCategorizationService: a } = ye(), [s, o] = v(null), [l, c] = v(!1), [u, m] = v(null);
   return /* @__PURE__ */ r("form", { onSubmit: async (p) => {
     if (p.preventDefault(), s === null) {
       m("Please select an investor type");
@@ -4218,7 +4227,7 @@ const _r = ({
   onComplete: t,
   onBack: n
 }) => {
-  const { appropriatenessTestService: a } = ye(), [s, o] = b(null), [l, c] = b(!0), [u, m] = b(!1), [x, p] = b(null), [y, g] = b({}), [h, S] = b(0), [F, w] = b(!1), [M, A] = b(!1), [I, H] = b(0);
+  const { appropriatenessTestService: a } = ye(), [s, o] = v(null), [l, c] = v(!0), [u, m] = v(!1), [x, p] = v(null), [y, g] = v({}), [h, S] = v(0), [F, w] = v(!1), [M, A] = v(!1), [I, H] = v(0);
   re(() => {
     (async () => {
       try {
@@ -4501,7 +4510,7 @@ Failed to reload test data. Please refresh the page.`);
   onBack: n
 }) => {
   var Z, N, _, ne;
-  const { applicantService: a, baseInformationService: s, config: o } = ye(), { identityData: l, provider: c, token: u, isLoading: m, error: x, requestIdentity: p, restartIdentity: y } = xr(e), [g, h] = b(null), [S, F] = b(null), [w, M] = b([]), [A, I] = b(!0), [H, J] = b(!1), [f, k] = b(null), [E, O] = b(!1), P = fe.useRef(!1), W = kt({
+  const { applicantService: a, baseInformationService: s, config: o } = ye(), { identityData: l, provider: c, token: u, isLoading: m, error: x, requestIdentity: p, restartIdentity: y } = xr(e), [g, h] = v(null), [S, F] = v(null), [w, M] = v([]), [A, I] = v(!0), [H, J] = v(!1), [f, k] = v(null), [E, O] = v(!1), P = fe.useRef(!1), W = kt({
     defaultValues: {
       street: "",
       streetNumber: "",
@@ -5110,20 +5119,20 @@ const $e = {
     if ($) for (const T of $) d.add(T);
     if (p)
       for (const T of p)
-        for (const v of T.fields)
-          !v.isCustom && v.name && v.required && d.add(v.name);
+        for (const b of T.fields)
+          !b.isCustom && b.name && b.required && d.add(b.name);
     return Array.from(d);
   }, [l == null ? void 0 : l.applicantFormRequiredFields, p]), g = Ae(() => {
     var T;
     if (p) {
-      const v = p.flatMap((Y) => Y.fields).filter((Y) => !Y.isCustom && Y.name).map((Y) => Y.name), R = new Set(v);
+      const b = p.flatMap((Y) => Y.fields).filter((Y) => !Y.isCustom && Y.name).map((Y) => Y.name), R = new Set(b);
       for (const Y of Ye) R.add(Y);
       return Array.from(R);
     }
     let d;
     (T = s.applicantForm) != null && T.visibleFields ? d = s.applicantForm.visibleFields : l != null && l.applicantFormVisibleFields && l.applicantFormVisibleFields.length > 0 ? d = l.applicantFormVisibleFields : d = Tt;
     const $ = new Set(d);
-    for (const v of Ye) $.add(v);
+    for (const b of Ye) $.add(b);
     return Array.from($);
   }, [(Xe = s.applicantForm) == null ? void 0 : Xe.visibleFields, l == null ? void 0 : l.applicantFormVisibleFields, p]), h = /* @__PURE__ */ new Set([
     "country",
@@ -5136,19 +5145,19 @@ const $e = {
     var $, T;
     const d = /* @__PURE__ */ new Set();
     if (p)
-      for (const v of p)
-        for (const R of v.fields)
+      for (const b of p)
+        for (const R of b.fields)
           !R.isCustom && R.name && h.has(R.name) && d.add(R.countriesType ?? (($ = Le[R.name]) == null ? void 0 : $.countriesType));
     else
-      for (const v of g)
-        h.has(v) && d.add((T = Le[v]) == null ? void 0 : T.countriesType);
+      for (const b of g)
+        h.has(b) && d.add((T = Le[b]) == null ? void 0 : T.countriesType);
     return d.size === 0 && d.add(void 0), Array.from(d);
-  }, [g, p]), [F, w] = b({}), [M, A] = b(!0), I = X(!1), H = X(/* @__PURE__ */ new Set());
+  }, [g, p]), [F, w] = v({}), [M, A] = v(!0), I = X(!1), H = X(/* @__PURE__ */ new Set());
   re(() => {
     if (I.current || S.length === 0) return;
     const d = S.filter((T) => {
-      const v = T != null ? String(T) : "all";
-      return !H.current.has(v);
+      const b = T != null ? String(T) : "all";
+      return !H.current.has(b);
     });
     if (d.length === 0) {
       A(!1);
@@ -5157,12 +5166,12 @@ const $e = {
     I.current = !0, A(!0), (async () => {
       try {
         const T = await Promise.all(
-          d.map(async (v) => {
-            const R = v != null ? String(v) : "all", Y = await o.getCountries("", s.locale || "en", v), ae = /* @__PURE__ */ new Set(), se = Y.map((ie) => ({ value: ie.abbreviation3 || ie.abbreviation, label: ie.name })).filter((ie) => !ie.value || ae.has(ie.value) ? !1 : (ae.add(ie.value), !0));
+          d.map(async (b) => {
+            const R = b != null ? String(b) : "all", Y = await o.getCountries("", s.locale || "en", b), ae = /* @__PURE__ */ new Set(), se = Y.map((ie) => ({ value: ie.abbreviation3 || ie.abbreviation, label: ie.name })).filter((ie) => !ie.value || ae.has(ie.value) ? !1 : (ae.add(ie.value), !0));
             return H.current.add(R), [R, se];
           })
         );
-        w((v) => ({ ...v, ...Object.fromEntries(T) }));
+        w((b) => ({ ...b, ...Object.fromEntries(T) }));
       } catch (T) {
         console.error("Failed to load countries:", T);
       } finally {
@@ -5172,9 +5181,9 @@ const $e = {
   }, [S]);
   const J = (d, $) => {
     var R;
-    const T = $ ?? ((R = Le[d]) == null ? void 0 : R.countriesType), v = T != null ? String(T) : "all";
-    return F[v] || [];
-  }, [f, k] = b({
+    const T = $ ?? ((R = Le[d]) == null ? void 0 : R.countriesType), b = T != null ? String(T) : "all";
+    return F[b] || [];
+  }, [f, k] = v({
     workflowKey: m,
     firstName: "",
     lastName: "",
@@ -5199,19 +5208,19 @@ const $e = {
     educationLevel: "",
     occupation: "",
     taxNumber: ""
-  }), [E, O] = b({}), [P, W] = b(0), [z, L] = b({}), [Z, N] = b(null), [_, ne] = b(!1), B = (d, $) => k((T) => ({ ...T, [d]: $ })), D = (d, $) => O((T) => ({ ...T, [d]: $ })), C = (d) => !d.conditionalOn || E[d.conditionalOn] === "true", U = p && P < p.length - 1 ? P + 1 : -1, ee = p && P > 0 ? P - 1 : -1, j = (d) => {
+  }), [E, O] = v({}), [P, W] = v(0), [z, L] = v({}), [Z, N] = v(null), [_, ne] = v(!1), B = (d, $) => k((T) => ({ ...T, [d]: $ })), D = (d, $) => O((T) => ({ ...T, [d]: $ })), C = (d) => !d.conditionalOn || E[d.conditionalOn] === "true", U = p && P < p.length - 1 ? P + 1 : -1, ee = p && P > 0 ? P - 1 : -1, j = (d) => {
     var T;
     const $ = {};
-    for (const v of d.fields)
-      if (v.isCustom) {
-        if (v.required && v.paramName) {
-          const R = E[v.paramName], Y = v.displayText || v.label || v.paramName;
-          v.customType === "checkbox" || v.customType === "link_checkbox" ? R !== "true" && ($[v.paramName] = `${Y} is required.`) : (!R || R.trim() === "") && ($[v.paramName] = `${Y} is required.`);
+    for (const b of d.fields)
+      if (b.isCustom) {
+        if (b.required && b.paramName) {
+          const R = E[b.paramName], Y = b.displayText || b.label || b.paramName;
+          b.customType === "checkbox" || b.customType === "link_checkbox" ? R !== "true" && ($[b.paramName] = `${Y} is required.`) : (!R || R.trim() === "") && ($[b.paramName] = `${Y} is required.`);
         }
-      } else if (v.name) {
-        const R = v.name;
+      } else if (b.name) {
+        const R = b.name;
         if (y.includes(R) && He(f[R])) {
-          const Y = v.displayText || ((T = Le[R]) == null ? void 0 : T.label) || R;
+          const Y = b.displayText || ((T = Le[R]) == null ? void 0 : T.label) || R;
           $[R] = `${Y} is required.`;
         }
       }
@@ -5250,25 +5259,25 @@ const $e = {
         externalRefId: f.externalRefId.trim()
       };
       if (p) {
-        for (const v of p)
-          if (C(v)) {
-            for (const R of v.fields)
+        for (const b of p)
+          if (C(b)) {
+            for (const R of b.fields)
               if (!R.isCustom && R.name) {
                 const Y = R.name, ae = f[Y];
                 He(ae) || (d[Y] = ae);
               }
           }
       } else
-        g.forEach((v) => {
-          if (v === "externalRefId") return;
-          const R = f[v];
-          He(R) || (d[v] = R);
+        g.forEach((b) => {
+          if (b === "externalRefId") return;
+          const R = f[b];
+          He(R) || (d[b] = R);
         });
       const $ = [];
       if (p) {
-        for (const v of p)
-          if (C(v)) {
-            for (const R of v.fields)
+        for (const b of p)
+          if (C(b)) {
+            for (const R of b.fields)
               if (R.isCustom && R.paramName) {
                 const Y = E[R.paramName] ?? "";
                 $.push({ paramName: R.paramName, paramValue: Y });
@@ -5288,12 +5297,12 @@ const $e = {
     d.preventDefault();
     for (const T of y)
       if (He(f[T])) {
-        const v = (($ = Le[T]) == null ? void 0 : $.label) || T;
-        N(`${v} is required.`);
+        const b = (($ = Le[T]) == null ? void 0 : $.label) || T;
+        N(`${b} is required.`);
         return;
       }
     await he();
-  }, Ve = (d, $, T, v) => {
+  }, Ve = (d, $, T, b) => {
     var et;
     const R = Le[d];
     if (!R) return null;
@@ -5301,7 +5310,7 @@ const $e = {
     switch (R.type) {
       case "select":
         if (d === "country" || d === "nationality" || d === "taxCountry" || d === "countryOfBirth" || d === "mobileCountryCode") {
-          const le = J(d, v);
+          const le = J(d, b);
           return /* @__PURE__ */ r(
             je,
             {
@@ -5352,7 +5361,7 @@ const $e = {
         return null;
       case "multiselect":
         if (d === "otherNationality") {
-          const le = J(d, v);
+          const le = J(d, b);
           return /* @__PURE__ */ r(
             wr,
             {
@@ -5423,7 +5432,7 @@ const $e = {
     }
   }, ht = (d, $) => {
     if (!d.paramName) return null;
-    const T = z[d.paramName], v = d.displayText || d.label || d.paramName;
+    const T = z[d.paramName], b = d.displayText || d.label || d.paramName;
     if (d.customType === "checkbox")
       return /* @__PURE__ */ i("div", { className: "flex flex-col gap-1", children: [
         /* @__PURE__ */ i(
@@ -5448,7 +5457,7 @@ const $e = {
                   className: "metakyc-option-text",
                   style: { fontSize: "14px", color: "var(--metakyc-text-primary, #111827)", lineHeight: "1.4" },
                   children: [
-                    v,
+                    b,
                     d.required && /* @__PURE__ */ r("span", { className: "text-red-500 ml-0.5", children: "*" })
                   ]
                 }
@@ -5482,7 +5491,7 @@ const $e = {
                   className: "metakyc-option-text",
                   style: { fontSize: "14px", color: "var(--metakyc-text-primary, #111827)", lineHeight: "1.4" },
                   children: [
-                    v,
+                    b,
                     " ",
                     d.linkUrl && /* @__PURE__ */ r(
                       "a",
@@ -5514,7 +5523,7 @@ const $e = {
             className: "text-sm font-medium",
             style: { color: "var(--metakyc-text-primary, #111827)" },
             children: [
-              v,
+              b,
               d.required && /* @__PURE__ */ r("span", { className: "text-red-500 ml-0.5", children: "*" })
             ]
           }
@@ -5560,7 +5569,7 @@ const $e = {
           className: "text-sm font-medium",
           style: { color: "var(--metakyc-text-primary, #111827)" },
           children: [
-            v,
+            b,
             d.required && /* @__PURE__ */ r("span", { className: "text-red-500 ml-0.5", children: "*" })
           ]
         }
@@ -5599,7 +5608,7 @@ const $e = {
       me,
       {
         type: "text",
-        label: `${v}${d.required ? " *" : ""}`,
+        label: `${b}${d.required ? " *" : ""}`,
         value: E[d.paramName] || "",
         onChange: (R) => D(d.paramName, R.target.value),
         required: d.required,
@@ -5621,7 +5630,7 @@ const $e = {
               {
                 type: "checkbox",
                 checked: T,
-                onChange: (v) => D(d.conditionalOn, v.target.checked ? "true" : "false"),
+                onChange: (b) => D(d.conditionalOn, b.target.checked ? "true" : "false"),
                 className: "metakyc-option-input",
                 style: $e
               }
@@ -5637,9 +5646,9 @@ const $e = {
           ]
         }
       ),
-      T && /* @__PURE__ */ r("div", { className: "grid grid-cols-2 gap-4", children: d.fields.map((v, R) => {
-        const Y = v.colSpan === 1 ? "col-span-1" : "col-span-2", ae = v.isCustom ? `custom-${R}-${v.paramName}` : `builtin-${v.name}-${R}`;
-        return /* @__PURE__ */ r("div", { className: Y, children: v.isCustom ? ht(v, R) : Ve(v.name, ae, v.displayText, v.countriesType) }, ae);
+      T && /* @__PURE__ */ r("div", { className: "grid grid-cols-4 gap-4", children: d.fields.map((b, R) => {
+        const Y = b.colSpan === 1 ? "col-span-1" : b.colSpan === 2 ? "col-span-2" : b.colSpan === 3 ? "col-span-3" : "col-span-4", ae = b.isCustom ? `custom-${R}-${b.paramName}` : `builtin-${b.name}-${R}`;
+        return /* @__PURE__ */ r("div", { className: Y, children: b.isCustom ? ht(b, R) : Ve(b.name, ae, b.displayText, b.countriesType) }, ae);
       }) })
     ] });
   };
@@ -5649,7 +5658,7 @@ const $e = {
       /* @__PURE__ */ r("p", { className: "text-center text-gray-600 dark:text-gray-400 mt-4", children: "Loading form..." })
     ] }) }) });
   if (p) {
-    const d = p[P] ?? p[0], $ = ee === -1, T = U === -1, v = p.length, R = C(d), Y = Object.values(z);
+    const d = p[P] ?? p[0], $ = ee === -1, T = U === -1, b = p.length, R = C(d), Y = Object.values(z);
     return /* @__PURE__ */ r("div", { className: "metakyc-sdk", children: /* @__PURE__ */ i(q, { children: [
       /* @__PURE__ */ r(de, { children: /* @__PURE__ */ r(Ge, { title: (l == null ? void 0 : l.title) || "Create Applicant" }) }),
       /* @__PURE__ */ i(K, { children: [
@@ -5687,7 +5696,7 @@ const $e = {
           ] }),
           Y.map((ae, se) => /* @__PURE__ */ r("p", { className: "text-red-600 text-sm", children: ae }, se))
         ] }),
-        v > 1 && /* @__PURE__ */ i("div", { className: "flex items-center gap-2 mb-4", children: [
+        b > 1 && /* @__PURE__ */ i("div", { className: "flex items-center gap-2 mb-4", children: [
           p.map((ae, se) => /* @__PURE__ */ r(
             "div",
             {
@@ -5699,7 +5708,7 @@ const $e = {
           /* @__PURE__ */ i("span", { className: "text-xs text-gray-400 flex-shrink-0", children: [
             P + 1,
             " / ",
-            v
+            b
           ] })
         ] }),
         gt(d)
@@ -5740,7 +5749,7 @@ const $e = {
         " ",
         Z
       ] }) }),
-      /* @__PURE__ */ r("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: g.map((d) => Ve(d)) })
+      /* @__PURE__ */ r("div", { className: "grid grid-cols-4 gap-4", children: g.map((d) => /* @__PURE__ */ r("div", { className: "col-span-4", children: Ve(d) }, d)) })
     ] }),
     /* @__PURE__ */ i(pe, { className: "flex justify-between", children: [
       a && /* @__PURE__ */ r(V, { type: "button", variant: "outline", onClick: a, disabled: _ || u, children: "Cancel" }),