@vpdev2/metakyc 1.0.0 → 1.0.1

package/dist/index.js

@@ -2225,12 +2225,12 @@ function Vr(e) {
         ]);
         if (i(M), (z = j == null ? void 0 : j.questionnaireResults) != null && z.length && M) {
           const K = /* @__PURE__ */ new Map();
-          for (const b of j.questionnaireResults)
-            b.question && ((Q = b.answers) != null && Q.length) && K.set(b.question.trim().toLowerCase(), b.answers);
-          const ee = {}, E = M.questionGroups.flatMap((b) => b.questions ?? []);
-          for (const b of E) {
-            const $ = b.text.trim().toLowerCase();
-            K.has($) && (ee[b.id] = K.get($));
+          for (const g of j.questionnaireResults)
+            g.question && ((Q = g.answers) != null && Q.length) && K.set(g.question.trim().toLowerCase(), g.answers);
+          const ee = {}, E = M.questionGroups.flatMap((g) => g.questions ?? []);
+          for (const g of E) {
+            const $ = g.text.trim().toLowerCase();
+            K.has($) && (ee[g.id] = K.get($));
           }
           c(ee);
         }
@@ -2501,12 +2501,12 @@ function Jr(e) {
         ]);
         if (i(j), (M = K == null ? void 0 : K.riskScoringResults) != null && M.length) {
           const ee = K.riskScoringResults[0], E = {};
-          for (const b of ee.riskCriteriaResults ?? [])
-            if (b.riskCriteriaId != null && b.answer != null && b.answer !== "") {
+          for (const g of ee.riskCriteriaResults ?? [])
+            if (g.riskCriteriaId != null && g.answer != null && g.answer !== "") {
               const $ = [...new Set(
-                b.answer.split(",").map((V) => V.trim()).filter((V) => V !== "")
+                g.answer.split(",").map((V) => V.trim()).filter((V) => V !== "")
               )];
-              $.length > 0 && (E[b.riskCriteriaId] = $);
+              $.length > 0 && (E[g.riskCriteriaId] = $);
             }
           c(E);
         }
@@ -2975,7 +2975,7 @@ const Et = 280, en = ({
       window.removeEventListener("scroll", F, !0), window.removeEventListener("resize", F);
     };
   }, [p, j]);
-  const b = a.filter(
+  const g = a.filter(
     (F) => F.label.toLowerCase().includes(P.toLowerCase())
   ), $ = (F) => {
     y || n(t.includes(F) ? t.filter((U) => U !== F) : [...t, F]);
@@ -3034,7 +3034,7 @@ const Et = 280, en = ({
             }
           }
         ) }),
-        /* @__PURE__ */ r("ul", { style: { listStyle: "none", margin: 0, padding: "4px 0", maxHeight: "192px", overflowY: "auto" }, children: b.length === 0 ? /* @__PURE__ */ r("li", { style: { padding: "8px 12px", fontSize: "13px", color: Y }, children: "No results" }) : b.map((F) => {
+        /* @__PURE__ */ r("ul", { style: { listStyle: "none", margin: 0, padding: "4px 0", maxHeight: "192px", overflowY: "auto" }, children: g.length === 0 ? /* @__PURE__ */ r("li", { style: { padding: "8px 12px", fontSize: "13px", color: Y }, children: "No results" }) : g.map((F) => {
           const U = t.includes(F.value);
           return /* @__PURE__ */ s(
             "li",
@@ -3217,7 +3217,7 @@ const Et = 280, en = ({
       primaryLight: te("--metakyc-primary-light", "#eff6ff"),
       hoverBg: te("--metakyc-surface", ye)
     });
-  }, []), K = de(null), ee = de(null), E = de(null), b = de(null), $ = ae(() => {
+  }, []), K = de(null), ee = de(null), E = de(null), g = de(null), $ = ae(() => {
     if (!ee.current) return null;
     const I = ee.current.getBoundingClientRect(), ye = window.innerHeight - I.bottom < Ft && I.top > Ft;
     return {
@@ -3252,9 +3252,9 @@ const Et = 280, en = ({
       window.removeEventListener("scroll", I, !0), window.removeEventListener("resize", I);
     };
   }, [v, $]), ge(() => {
-    v && b.current && setTimeout(() => {
+    v && g.current && setTimeout(() => {
       var I;
-      return (I = b.current) == null ? void 0 : I.focus();
+      return (I = g.current) == null ? void 0 : I.focus();
     }, 0);
   }, [v]);
   const J = a.filter(
@@ -3283,7 +3283,7 @@ const Et = 280, en = ({
         /* @__PURE__ */ r("div", { style: { padding: "8px", borderBottom: `1px solid ${ue}` }, children: /* @__PURE__ */ r(
           "input",
           {
-            ref: b,
+            ref: g,
             type: "text",
             value: T,
             onChange: (I) => w(I.target.value),
@@ -3435,12 +3435,12 @@ const rn = ({
   const [x, P] = k(!1), [v, A] = k(null), T = de(null), w = ae((E) => {
     if (!E) return;
     A(null);
-    const b = Array.from(E);
-    if (o && b.filter((V) => V.size > o).length > 0) {
+    const g = Array.from(E);
+    if (o && g.filter((V) => V.size > o).length > 0) {
       A(`File exceeds the maximum size of ${xt(o)}`);
       return;
     }
-    d == null || d(i ? [...y, ...b] : [b[0]]);
+    d == null || d(i ? [...y, ...g] : [g[0]]);
   }, [o, i, d, y]), N = ae((E) => {
     E.preventDefault(), E.stopPropagation(), P(!0);
   }, []), z = ae((E) => {
@@ -3452,8 +3452,8 @@ const rn = ({
     (E = T.current) == null || E.click();
   }, j = (E) => {
     A(null);
-    const b = y.filter(($, V) => V !== E);
-    d == null || d(b);
+    const g = y.filter(($, V) => V !== E);
+    d == null || d(g);
   }, K = n || v, ee = y.length > 0;
   return /* @__PURE__ */ s("div", { className: Ae("metakyc-file-upload", p), style: { width: "100%" }, children: [
     e && /* @__PURE__ */ s("div", { style: { marginBottom: "8px" }, children: [
@@ -3559,7 +3559,7 @@ const rn = ({
         ]
       }
     ),
-    ee && /* @__PURE__ */ r("div", { style: { marginTop: "12px", display: "flex", flexDirection: "column", gap: "8px" }, children: y.map((E, b) => {
+    ee && /* @__PURE__ */ r("div", { style: { marginTop: "12px", display: "flex", flexDirection: "column", gap: "8px" }, children: y.map((E, g) => {
       const $ = tn(E), V = $ === "image", G = V ? URL.createObjectURL(E) : null;
       return /* @__PURE__ */ s(
         "div",
@@ -3626,7 +3626,7 @@ const rn = ({
               {
                 type: "button",
                 onClick: (_) => {
-                  _.stopPropagation(), j(b);
+                  _.stopPropagation(), j(g);
                 },
                 style: {
                   display: "flex",
@@ -3657,7 +3657,7 @@ const rn = ({
             )
           ]
         },
-        `${E.name}-${b}`
+        `${E.name}-${g}`
       );
     }) }),
     K && /* @__PURE__ */ r("p", { style: { fontSize: "13px", color: "var(--metakyc-danger, #ef4444)", marginTop: "6px" }, children: K })
@@ -3894,18 +3894,18 @@ const yn = ({
   const w = De(
     () => a ? mn(a.questionGroups) : [],
     [a]
-  ), N = A === w.length - 1, z = w[A] ?? [], Q = ae((E, b) => {
-    x(($) => ({ ...$, [E]: b })), v(($) => {
+  ), N = A === w.length - 1, z = w[A] ?? [], Q = ae((E, g) => {
+    x(($) => ({ ...$, [E]: g })), v(($) => {
       const V = { ...$ };
       return delete V[E], V;
     });
   }, []), M = ae(() => {
     const E = {};
-    for (const { question: b } of z) {
-      const $ = pn(b, p[b.id] ?? []);
-      $ && (E[b.id] = $);
+    for (const { question: g } of z) {
+      const $ = pn(g, p[g.id] ?? []);
+      $ && (E[g.id] = $);
     }
-    return v((b) => ({ ...b, ...E })), Object.keys(E).length === 0;
+    return v((g) => ({ ...g, ...E })), Object.keys(E).length === 0;
   }, [z, p]), j = () => {
     M() && T((E) => E + 1);
   }, K = () => {
@@ -3918,12 +3918,12 @@ const yn = ({
             questionId: V.id,
             values: p[V.id] ?? []
           }))
-        ), b = {
+        ), g = {
           applicantId: e,
           questionnarieId: a.id,
           questionResults: E
         };
-        await y(b), t == null || t();
+        await y(g), t == null || t();
       } catch (E) {
         console.error("Questionnaire submit error:", E);
       }
@@ -3942,17 +3942,17 @@ const yn = ({
           " of ",
           w.length
         ] }),
-        /* @__PURE__ */ r("div", { className: "flex items-center gap-1.5", children: w.map((E, b) => /* @__PURE__ */ r(
+        /* @__PURE__ */ r("div", { className: "flex items-center gap-1.5", children: w.map((E, g) => /* @__PURE__ */ r(
           "div",
           {
             className: "rounded-full transition-all duration-200",
             style: {
               height: "6px",
-              width: b === A ? "20px" : "6px",
-              backgroundColor: b <= A ? "var(--metakyc-primary, #2563eb)" : "var(--metakyc-border, #e5e7eb)"
+              width: g === A ? "20px" : "6px",
+              backgroundColor: g <= A ? "var(--metakyc-primary, #2563eb)" : "var(--metakyc-border, #e5e7eb)"
             }
           },
-          b
+          g
         )) })
       ] })
     ] }),
@@ -3962,7 +3962,7 @@ const yn = ({
         question: E,
         value: p[E.id] ?? [],
         error: P[E.id],
-        onChange: (b) => Q(E.id, b)
+        onChange: (g) => Q(E.id, g)
       },
       E.id
     )) }),
@@ -4128,19 +4128,19 @@ const gn = ({
     () => a ? fn(a.uploadDocumentFiles) : [],
     [a]
   ), z = N[v] ?? [], Q = v === N.length - 1, M = N.length, j = ae(() => {
-    const b = {};
+    const g = {};
     for (const $ of z)
-      $.isRequired && (y[$.id] || []).length === 0 && (b[$.id] = `${$.displayName} is required`);
-    return w(b), Object.keys(b).length === 0;
+      $.isRequired && (y[$.id] || []).length === 0 && (g[$.id] = `${$.displayName} is required`);
+    return w(g), Object.keys(g).length === 0;
   }, [z, y]), K = () => {
-    j() && (A((b) => b + 1), w({}));
+    j() && (A((g) => g + 1), w({}));
   }, ee = () => {
-    v > 0 ? (A((b) => b - 1), w({})) : n == null || n();
+    v > 0 ? (A((g) => g - 1), w({})) : n == null || n();
   }, E = async () => {
     if (!(!j() || !a)) {
       P(null);
       try {
-        const b = await Promise.all(
+        const g = await Promise.all(
           a.uploadDocumentFiles.map(async (V) => {
             const G = y[V.id] || [], _ = await Promise.all(
               G.map(async (J) => ({
@@ -4156,11 +4156,11 @@ const gn = ({
         ), $ = {
           applicantId: e,
           uploadDocumentId: a.id,
-          uploadDocumentResults: b
+          uploadDocumentResults: g
         };
         await d($), t == null || t();
-      } catch (b) {
-        P((b == null ? void 0 : b.message) || "Failed to submit documents. Please try again.");
+      } catch (g) {
+        P((g == null ? void 0 : g.message) || "Failed to submit documents. Please try again.");
       }
     }
   };
@@ -4215,7 +4215,7 @@ const gn = ({
           " of ",
           M
         ] }),
-        /* @__PURE__ */ r("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: N.map((b, $) => /* @__PURE__ */ r(
+        /* @__PURE__ */ r("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: N.map((g, $) => /* @__PURE__ */ r(
           "div",
           {
             style: {
@@ -4266,25 +4266,25 @@ const gn = ({
         lineHeight: 1.5
       }, children: a.description })
     ] }),
-    /* @__PURE__ */ r(ne, { children: /* @__PURE__ */ r("div", { style: { display: "flex", flexDirection: "column", gap: "24px" }, children: z.map((b) => /* @__PURE__ */ r(
+    /* @__PURE__ */ r(ne, { children: /* @__PURE__ */ r("div", { style: { display: "flex", flexDirection: "column", gap: "24px" }, children: z.map((g) => /* @__PURE__ */ r(
       rn,
       {
-        label: b.displayName,
-        subtitle: b.subtitle,
-        accept: b.allowedTypes,
-        multiple: b.multipleFile,
-        maxSize: b.maxEachFileSizeByte,
-        required: b.isRequired,
-        error: T[b.id],
-        value: y[b.id] || [],
+        label: g.displayName,
+        subtitle: g.subtitle,
+        accept: g.allowedTypes,
+        multiple: g.multipleFile,
+        maxSize: g.maxEachFileSizeByte,
+        required: g.isRequired,
+        error: T[g.id],
+        value: y[g.id] || [],
         onChange: ($) => {
           P(null), w((V) => {
             const G = { ...V };
-            return delete G[b.id], G;
-          }), p((V) => ({ ...V, [b.id]: $ }));
+            return delete G[g.id], G;
+          }), p((V) => ({ ...V, [g.id]: $ }));
         }
       },
-      b.id
+      g.id
     )) }) }),
     x && /* @__PURE__ */ s("div", { style: {
       margin: "0 24px",
@@ -4469,7 +4469,7 @@ const Nn = ({
       J && (G[_.id] = J);
     }
     return T((_) => ({ ..._, ...G })), Object.keys(G).length === 0;
-  }, [K, P]), b = () => {
+  }, [K, P]), g = () => {
     E() && N((G) => G + 1);
   }, $ = () => {
     w > 0 ? N((G) => G - 1) : n == null || n();
@@ -4548,7 +4548,7 @@ const Nn = ({
         Z,
         {
           type: "button",
-          onClick: b,
+          onClick: g,
           style: { display: "flex", alignItems: "center", gap: "4px" },
           children: [
             "Next",
@@ -4831,7 +4831,7 @@ const En = ({
   onComplete: t,
   onBack: n
 }) => {
-  const { appropriatenessTestService: a } = Te(), [i, o] = k(null), [c, d] = k(!0), [y, p] = k(!1), [x, P] = k(null), [v, A] = k({}), [T, w] = k(0), [N, z] = k(!1), [Q, M] = k(!1), [j, K] = k(0), [ee, E] = k(0), [b, $] = k(null);
+  const { appropriatenessTestService: a } = Te(), [i, o] = k(null), [c, d] = k(!0), [y, p] = k(!1), [x, P] = k(null), [v, A] = k({}), [T, w] = k(0), [N, z] = k(!1), [Q, M] = k(!1), [j, K] = k(0), [ee, E] = k(0), [g, $] = k(null);
   ge(() => {
     (async () => {
       try {
@@ -4952,7 +4952,7 @@ const En = ({
         }, children: /* @__PURE__ */ r("p", { style: { fontSize: "13px", color: "var(--metakyc-danger, #ef4444)", margin: 0 }, children: x }) })
       ] }) })
     ] });
-  if (b) {
+  if (g) {
     const B = () => {
       $(null), se(), P(null);
     };
@@ -4972,8 +4972,8 @@ const En = ({
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          backgroundColor: b.success ? "color-mix(in srgb, var(--metakyc-success, #10b981) 12%, transparent)" : "color-mix(in srgb, var(--metakyc-danger, #ef4444) 10%, transparent)"
-        }, children: b.success ? /* @__PURE__ */ s("svg", { width: "36", height: "36", viewBox: "0 0 24 24", fill: "none", stroke: "var(--metakyc-success, #10b981)", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          backgroundColor: g.success ? "color-mix(in srgb, var(--metakyc-success, #10b981) 12%, transparent)" : "color-mix(in srgb, var(--metakyc-danger, #ef4444) 10%, transparent)"
+        }, children: g.success ? /* @__PURE__ */ s("svg", { width: "36", height: "36", viewBox: "0 0 24 24", fill: "none", stroke: "var(--metakyc-success, #10b981)", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
           /* @__PURE__ */ r("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
           /* @__PURE__ */ r("polyline", { points: "22 4 12 14.01 9 11.01" })
         ] }) : /* @__PURE__ */ s("svg", { width: "36", height: "36", viewBox: "0 0 24 24", fill: "none", stroke: "var(--metakyc-danger, #ef4444)", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
@@ -4984,9 +4984,9 @@ const En = ({
         /* @__PURE__ */ r("h2", { style: {
           fontSize: "20px",
           fontWeight: 700,
-          color: b.success ? "var(--metakyc-success, #10b981)" : "var(--metakyc-danger, #ef4444)",
+          color: g.success ? "var(--metakyc-success, #10b981)" : "var(--metakyc-danger, #ef4444)",
           margin: 0
-        }, children: b.success ? "Test Passed" : "Test Failed" }),
+        }, children: g.success ? "Test Passed" : "Test Failed" }),
         /* @__PURE__ */ r("p", { style: {
           fontSize: "14px",
           color: "var(--metakyc-text-secondary, #6b7280)",
@@ -4994,8 +4994,8 @@ const En = ({
           lineHeight: 1.6,
           maxWidth: "400px",
           whiteSpace: "pre-line"
-        }, children: b.message }),
-        !b.success && Y > 0 && /* @__PURE__ */ r("div", { style: {
+        }, children: g.message }),
+        !g.success && Y > 0 && /* @__PURE__ */ r("div", { style: {
           marginTop: "4px",
           padding: "10px 20px",
           borderRadius: "10px",
@@ -5012,7 +5012,7 @@ const En = ({
           Y !== 1 ? "s" : "",
           " remaining"
         ] }) }),
-        !b.success && Y <= 0 && /* @__PURE__ */ r("div", { style: {
+        !g.success && Y <= 0 && /* @__PURE__ */ r("div", { style: {
           marginTop: "4px",
           padding: "10px 20px",
           borderRadius: "10px",
@@ -5024,7 +5024,7 @@ const En = ({
           margin: 0
         }, children: "No attempts remaining. Please contact support for assistance." }) })
       ] }) }),
-      /* @__PURE__ */ r(Ce, { children: /* @__PURE__ */ r("div", { style: { display: "flex", justifyContent: "center", width: "100%", gap: "12px" }, children: b.success ? /* @__PURE__ */ r(Z, { type: "button", onClick: () => t == null ? void 0 : t(), children: "Continue" }) : /* @__PURE__ */ s(lt, { children: [
+      /* @__PURE__ */ r(Ce, { children: /* @__PURE__ */ r("div", { style: { display: "flex", justifyContent: "center", width: "100%", gap: "12px" }, children: g.success ? /* @__PURE__ */ r(Z, { type: "button", onClick: () => t == null ? void 0 : t(), children: "Continue" }) : /* @__PURE__ */ s(lt, { children: [
         Y > 0 && j <= 0 && /* @__PURE__ */ r(Z, { type: "button", onClick: B, children: "Retake Test" }),
         Y > 0 && j > 0 && /* @__PURE__ */ r(Z, { type: "button", onClick: B, children: "OK" }),
         Y <= 0 && n && /* @__PURE__ */ r(Z, { type: "button", variant: "outline", onClick: n, children: "Back" })
@@ -5413,7 +5413,7 @@ const En = ({
   onBack: n
 }) => {
   var Ze, je, it, Ye;
-  const { applicantService: a, baseInformationService: i, identityService: o, config: c, currentTheme: d } = Te(), { identityData: y, provider: p, token: x, isLoading: P, error: v, requestIdentity: A, restartIdentity: T } = Gr(e), [w, N] = k(null), [z, Q] = k(null), [M, j] = k([]), [K, ee] = k([]), [E, b] = k(!0), [$, V] = k(!1), [G, _] = k(null), [J, se] = k(!1), Y = we.useRef(!1), [ve, ue] = k({}), [me, ke] = k({}), F = d != null && d.reviewPageFields && d.reviewPageFields.length > 0 ? d.reviewPageFields[0] : null, U = !!(d != null && d.reviewPageDisabled), B = de(!1);
+  const { applicantService: a, baseInformationService: i, identityService: o, config: c, currentTheme: d } = Te(), { identityData: y, provider: p, token: x, isLoading: P, error: v, requestIdentity: A, restartIdentity: T } = Gr(e), [w, N] = k(null), [z, Q] = k(null), [M, j] = k([]), [K, ee] = k([]), [E, g] = k(!0), [$, V] = k(!1), [G, _] = k(null), [J, se] = k(!1), Y = we.useRef(!1), [ve, ue] = k({}), [me, ke] = k({}), F = d != null && d.reviewPageFields && d.reviewPageFields.length > 0 ? d.reviewPageFields[0] : null, U = !!(d != null && d.reviewPageDisabled), B = de(!1);
   B.current = U;
   const H = Gt({
     defaultValues: {
@@ -5428,7 +5428,7 @@ const En = ({
   });
   ge(() => {
     if (U) {
-      Y.current || (Y.current = !0, A().then(() => V(!0)).catch((O) => console.error("[Identity] Auto-request failed:", O)).finally(() => b(!1)));
+      Y.current || (Y.current = !0, A().then(() => V(!0)).catch((O) => console.error("[Identity] Auto-request failed:", O)).finally(() => g(!1)));
       return;
     }
     (async () => {
@@ -5486,7 +5486,7 @@ const En = ({
       } catch (O) {
         console.error("Error loading applicant data:", O);
       } finally {
-        b(!1);
+        g(!1);
       }
     })();
   }, [e]), ge(() => {
@@ -5787,7 +5787,10 @@ const En = ({
       n && /* @__PURE__ */ r(Ce, { children: /* @__PURE__ */ r(Z, { variant: "outline", onClick: n, children: "Back" }) })
     ] });
   }
-  const ye = /* @__PURE__ */ new Set(["country", "nationality", "taxCountry", "countryOfBirth", "mobileCountryCode", "otherNationality"]), oe = (h = 4) => ({ 1: "col-span-1", 2: "col-span-2", 3: "col-span-3", 4: "col-span-4" })[h] || "col-span-4", Ne = (h, O) => {
+  const ye = /* @__PURE__ */ new Set(["country", "nationality", "taxCountry", "countryOfBirth", "mobileCountryCode", "otherNationality"]), oe = (h = 4) => {
+    const O = Math.min(4, Math.max(1, Number(h) || 4));
+    return { gridColumn: `span ${O} / span ${O}` };
+  }, Ne = (h, O) => {
     if (!O && O !== 0) return "—";
     if (ye.has(h) && h !== "mobileCountryCode") {
       const q = M.find((W) => W.value === O);
@@ -5894,9 +5897,9 @@ const En = ({
   ] }) : h, _e = (h, O) => {
     const q = `cf-${O}`, W = h.paramName ?? "", X = me[W];
     if (h.customType === "br")
-      return /* @__PURE__ */ r("div", { className: oe(h.colSpan), style: { minHeight: "0.5rem" } }, q);
+      return /* @__PURE__ */ r("div", { style: { ...oe(h.colSpan), minHeight: "0.5rem" } }, q);
     if (h.customType === "paragraph")
-      return /* @__PURE__ */ r("div", { className: oe(h.colSpan), children: /* @__PURE__ */ r(
+      return /* @__PURE__ */ r("div", { style: oe(h.colSpan), children: /* @__PURE__ */ r(
         "div",
         {
           className: "text-sm",
@@ -5908,13 +5911,13 @@ const En = ({
       return /* @__PURE__ */ r(
         "div",
         {
-          className: oe(h.colSpan),
+          style: oe(h.colSpan),
           dangerouslySetInnerHTML: { __html: h.label || "" }
         },
         q
       );
     if (h.customType === "link")
-      return /* @__PURE__ */ r("div", { className: oe(h.colSpan), children: Re(
+      return /* @__PURE__ */ r("div", { style: oe(h.colSpan), children: Re(
         /* @__PURE__ */ r(
           "a",
           {
@@ -5930,7 +5933,7 @@ const En = ({
       ) }, q);
     if (h.customType === "checkbox" || h.customType === "link_checkbox") {
       const m = X === "true" || X === !0;
-      return /* @__PURE__ */ r("div", { className: oe(h.colSpan), children: Re(
+      return /* @__PURE__ */ r("div", { style: oe(h.colSpan), children: Re(
         /* @__PURE__ */ s("label", { style: { display: "flex", alignItems: "flex-start", gap: 8, cursor: "pointer" }, children: [
           /* @__PURE__ */ r(
             "input",
@@ -5962,7 +5965,7 @@ const En = ({
           [W]: m.includes(L) ? m.filter((l) => l !== L) : [...m, L]
         }));
       };
-      return /* @__PURE__ */ r("div", { className: oe(h.colSpan), children: Re(
+      return /* @__PURE__ */ r("div", { style: oe(h.colSpan), children: Re(
         /* @__PURE__ */ s("div", { className: "space-y-1.5", children: [
           h.label && /* @__PURE__ */ r("p", { className: "text-sm font-medium", style: { color: "var(--metakyc-text-primary, #111827)" }, children: h.displayText || h.label }),
           (h.options || []).map((L) => /* @__PURE__ */ s("label", { style: { display: "flex", alignItems: "flex-start", gap: 8, cursor: "pointer" }, children: [
@@ -5981,7 +5984,7 @@ const En = ({
         h.helpText
       ) }, q);
     }
-    return h.customType === "radio_group" ? /* @__PURE__ */ r("div", { className: oe(h.colSpan), children: Re(
+    return h.customType === "radio_group" ? /* @__PURE__ */ r("div", { style: oe(h.colSpan), children: Re(
       /* @__PURE__ */ s("div", { className: "space-y-1.5", children: [
         h.label && /* @__PURE__ */ r("p", { className: "text-sm font-medium", style: { color: "var(--metakyc-text-primary, #111827)" }, children: h.displayText || h.label }),
         (h.options || []).map((m) => /* @__PURE__ */ s("label", { style: { display: "flex", alignItems: "flex-start", gap: 8, cursor: "pointer" }, children: [
@@ -6000,7 +6003,7 @@ const En = ({
         ] }, m.value))
       ] }),
       h.helpText
-    ) }, q) : /* @__PURE__ */ r("div", { className: oe(h.colSpan), children: Re(
+    ) }, q) : /* @__PURE__ */ r("div", { style: oe(h.colSpan), children: Re(
       /* @__PURE__ */ r(
         xe,
         {
@@ -6014,7 +6017,7 @@ const En = ({
   }, at = (h, O) => {
     if (h.isCustom) return _e(h, O);
     const q = h.name ?? "", W = nt[q], X = h.displayText || (W == null ? void 0 : W.label) || q, m = ve[q] ?? "", R = q === "mobileCountryCode", L = !!(W != null && W.countriesType) && !R;
-    return h.editable ? R ? /* @__PURE__ */ r("div", { className: oe(h.colSpan ?? 2), children: Re(
+    return h.editable ? R ? /* @__PURE__ */ r("div", { style: oe(h.colSpan ?? 2), children: Re(
       /* @__PURE__ */ r(
         qe,
         {
@@ -6025,7 +6028,7 @@ const En = ({
         }
       ),
       h.helpText
-    ) }, `epc-${O}`) : L ? /* @__PURE__ */ r("div", { className: oe(h.colSpan ?? 2), children: Re(
+    ) }, `epc-${O}`) : L ? /* @__PURE__ */ r("div", { style: oe(h.colSpan ?? 2), children: Re(
       /* @__PURE__ */ r(
         qe,
         {
@@ -6036,7 +6039,7 @@ const En = ({
         }
       ),
       h.helpText
-    ) }, `ec-${O}`) : /* @__PURE__ */ r("div", { className: oe(h.colSpan ?? 2), children: Re(
+    ) }, `ec-${O}`) : /* @__PURE__ */ r("div", { style: oe(h.colSpan ?? 2), children: Re(
       /* @__PURE__ */ r(
         xe,
         {
@@ -6047,7 +6050,7 @@ const En = ({
         }
       ),
       h.helpText
-    ) }, `ei-${O}`) : /* @__PURE__ */ r("div", { className: oe(h.colSpan ?? 2), children: Re(
+    ) }, `ei-${O}`) : /* @__PURE__ */ r("div", { style: oe(h.colSpan ?? 2), children: Re(
       /* @__PURE__ */ s(lt, { children: [
         /* @__PURE__ */ r("label", { className: "block text-sm font-medium mb-0.5", style: { color: "var(--metakyc-text-secondary, #6b7280)" }, children: X }),
         /* @__PURE__ */ r("p", { className: "text-sm", style: { color: "var(--metakyc-text-primary, #111827)", minHeight: "1.5rem" }, children: Ne(q, m) })
@@ -6064,7 +6067,7 @@ const En = ({
         /* @__PURE__ */ r("h2", { className: "text-lg font-bold", style: { color: "var(--metakyc-text-primary, #111827)" }, children: h }),
         /* @__PURE__ */ r("p", { className: "mt-1 text-sm", style: { color: "var(--metakyc-text-secondary, #6b7280)" }, children: O })
       ] }),
-      /* @__PURE__ */ r(ne, { children: /* @__PURE__ */ r("div", { className: "grid grid-cols-4 gap-4", children: F.fields.map((q, W) => at(q, W)) }) }),
+      /* @__PURE__ */ r(ne, { children: /* @__PURE__ */ r("div", { style: { display: "grid", gridTemplateColumns: "repeat(4, minmax(0, 1fr))", gap: "1rem" }, children: F.fields.map((q, W) => at(q, W)) }) }),
       /* @__PURE__ */ s(Ce, { className: "flex justify-between", children: [
         n && /* @__PURE__ */ r(Z, { type: "button", variant: "outline", onClick: n, children: "Back" }),
         /* @__PURE__ */ r(Z, { type: "submit", isLoading: P, children: "Confirm and Start Verification" })
@@ -6478,20 +6481,20 @@ const pt = {
     if (f) for (const D of f) l.add(D);
     if (N)
       for (const D of N)
-        for (const g of D.fields)
-          !g.isCustom && g.name && g.required && l.add(g.name);
+        for (const b of D.fields)
+          !b.isCustom && b.name && b.required && l.add(b.name);
     return Array.from(l);
   }, [c == null ? void 0 : c.applicantFormRequiredFields, N]), Q = De(() => {
     var D;
     if (N) {
-      const g = N.flatMap((S) => S.fields).filter((S) => !S.isCustom && S.name).map((S) => S.name), C = new Set(g);
+      const b = N.flatMap((S) => S.fields).filter((S) => !S.isCustom && S.name).map((S) => S.name), C = new Set(b);
       for (const S of ft) C.add(S);
       return Array.from(C);
     }
     let l;
     (D = i.applicantForm) != null && D.visibleFields ? l = i.applicantForm.visibleFields : c != null && c.applicantFormVisibleFields && c.applicantFormVisibleFields.length > 0 ? l = c.applicantFormVisibleFields : l = cr;
     const f = new Set(l);
-    for (const g of ft) f.add(g);
+    for (const b of ft) f.add(b);
     return Array.from(f);
   }, [(u = i.applicantForm) == null ? void 0 : u.visibleFields, c == null ? void 0 : c.applicantFormVisibleFields, N]), M = /* @__PURE__ */ new Set([
     "country",
@@ -6504,32 +6507,32 @@ const pt = {
     var f, D;
     const l = /* @__PURE__ */ new Set();
     if (N)
-      for (const g of N)
-        for (const C of g.fields)
+      for (const b of N)
+        for (const C of b.fields)
           !C.isCustom && C.name && M.has(C.name) && l.add(C.countriesType ?? ((f = nt[C.name]) == null ? void 0 : f.countriesType));
     else
-      for (const g of Q)
-        M.has(g) && l.add((D = nt[g]) == null ? void 0 : D.countriesType);
+      for (const b of Q)
+        M.has(b) && l.add((D = nt[b]) == null ? void 0 : D.countriesType);
     return l.size === 0 && l.add(void 0), Array.from(l);
-  }, [Q, N]), [K, ee] = k({}), [E, b] = k(!0), $ = de(/* @__PURE__ */ new Set()), V = de(/* @__PURE__ */ new Set());
+  }, [Q, N]), [K, ee] = k({}), [E, g] = k(!0), $ = de(/* @__PURE__ */ new Set()), V = de(/* @__PURE__ */ new Set());
   ge(() => {
     if (!c) return;
-    const l = j.filter((g) => {
-      const C = g != null ? String(g) : "all";
+    const l = j.filter((b) => {
+      const C = b != null ? String(b) : "all";
       return !V.current.has(C) && !$.current.has(C);
     });
     if (l.length === 0) {
       j.every((C) => {
         const S = C != null ? String(C) : "all";
         return V.current.has(S);
-      }) && b(!1);
+      }) && g(!1);
       return;
     }
-    b(!0);
-    const f = l.map((g) => g != null ? String(g) : "all");
-    f.forEach((g) => $.current.add(g)), (async () => {
+    g(!0);
+    const f = l.map((b) => b != null ? String(b) : "all");
+    f.forEach((b) => $.current.add(b)), (async () => {
       try {
-        const g = await Promise.all(
+        const b = await Promise.all(
           l.map(async (C) => {
             const S = C != null ? String(C) : "all", pe = await o.getCountries("", i.locale || "en", C), ie = C === 40, be = /* @__PURE__ */ new Set(), Pe = pe.map((le) => ie && le.countryCode ? {
               value: le.countryCode,
@@ -6538,21 +6541,21 @@ const pt = {
             return V.current.add(S), $.current.delete(S), [S, Pe];
           })
         );
-        ee((C) => ({ ...C, ...Object.fromEntries(g) }));
-      } catch (g) {
-        f.forEach((C) => $.current.delete(C)), console.error("Failed to load countries:", g);
+        ee((C) => ({ ...C, ...Object.fromEntries(b) }));
+      } catch (b) {
+        f.forEach((C) => $.current.delete(C)), console.error("Failed to load countries:", b);
       } finally {
         j.every((C) => {
           const S = C != null ? String(C) : "all";
           return V.current.has(S);
-        }) && b(!1);
+        }) && g(!1);
       }
     })();
   }, [j, c]);
   const G = (l, f) => {
     var C;
-    const D = f ?? ((C = nt[l]) == null ? void 0 : C.countriesType), g = D != null ? String(D) : "all";
-    return K[g] || [];
+    const D = f ?? ((C = nt[l]) == null ? void 0 : C.countriesType), b = D != null ? String(D) : "all";
+    return K[b] || [];
   }, _ = {
     firstName: 1,
     lastName: 1,
@@ -6612,17 +6615,17 @@ const pt = {
   ), [me, ke] = k({ ...ue }), [F, U] = k(0), [B, H] = k({}), [fe, I] = k(null), [te, ye] = k(!1), oe = (l, f) => ve((D) => ({ ...D, [l]: f })), Ne = (l, f) => ke((D) => ({ ...D, [l]: f })), $e = (l) => !l.conditionalOn || me[l.conditionalOn] === "true", Re = N && F < N.length - 1 ? F + 1 : -1, _e = N && F > 0 ? F - 1 : -1, at = (l) => {
     var D;
     const f = {};
-    for (const g of l.fields)
-      if (g.isCustom) {
-        if (g.customType === "paragraph" || g.customType === "html" || g.customType === "br" || g.customType === "link") continue;
-        if (g.required && g.paramName) {
-          const C = me[g.paramName], S = g.displayText || g.label || g.paramName;
-          g.customType === "checkbox" || g.customType === "link_checkbox" ? C !== "true" && (f[g.paramName] = `${S} is required.`) : (!C || C.trim() === "") && (f[g.paramName] = `${S} is required.`);
+    for (const b of l.fields)
+      if (b.isCustom) {
+        if (b.customType === "paragraph" || b.customType === "html" || b.customType === "br" || b.customType === "link") continue;
+        if (b.required && b.paramName) {
+          const C = me[b.paramName], S = b.displayText || b.label || b.paramName;
+          b.customType === "checkbox" || b.customType === "link_checkbox" ? C !== "true" && (f[b.paramName] = `${S} is required.`) : (!C || C.trim() === "") && (f[b.paramName] = `${S} is required.`);
         }
-      } else if (g.name) {
-        const C = g.name;
+      } else if (b.name) {
+        const C = b.name;
         if (z.includes(C) && ot(Y[C])) {
-          const S = g.displayText || ((D = nt[C]) == null ? void 0 : D.label) || C;
+          const S = b.displayText || ((D = nt[C]) == null ? void 0 : D.label) || C;
           f[C] = `${S} is required.`;
         }
       }
@@ -6700,8 +6703,8 @@ const pt = {
       for (const [C, S] of Object.entries(ue))
         !D.has(C) && S && f.push({ paramName: C, value: S });
       f.length > 0 && (l.applicantAdditionalDatas = f);
-      const g = await d(l);
-      n(g.applicantId);
+      const b = await d(l);
+      n(b.applicantId);
     } catch (l) {
       console.error("Error creating applicant:", l), I(l.message || "Failed to create applicant");
     } finally {
@@ -6712,12 +6715,12 @@ const pt = {
     l.preventDefault();
     for (const D of z)
       if (ot(Y[D])) {
-        const g = ((f = nt[D]) == null ? void 0 : f.label) || D;
-        I(`${g} is required.`);
+        const b = ((f = nt[D]) == null ? void 0 : f.label) || D;
+        I(`${b} is required.`);
         return;
       }
     await je();
-  }, Ye = (l, f, D, g, C) => {
+  }, Ye = (l, f, D, b, C) => {
     var Nt;
     const S = nt[l];
     if (!S) return null;
@@ -6725,7 +6728,7 @@ const pt = {
     switch (S.type) {
       case "select":
         if (l === "country" || l === "nationality" || l === "taxCountry" || l === "countryOfBirth" || l === "mobileCountryCode") {
-          const Ie = G(l, g);
+          const Ie = G(l, b);
           return /* @__PURE__ */ r(
             qe,
             {
@@ -6779,7 +6782,7 @@ const pt = {
         return null;
       case "multiselect":
         if (l === "otherNationality") {
-          const Ie = G(l, g);
+          const Ie = G(l, b);
           return /* @__PURE__ */ r(
             en,
             {
@@ -6911,7 +6914,7 @@ const pt = {
       ) }, `custom-${f}`);
     }
     if (!l.paramName) return null;
-    const g = B[l.paramName], C = l.displayText || l.label || l.paramName;
+    const b = B[l.paramName], C = l.displayText || l.label || l.paramName;
     if (l.customType === "checkbox")
       return /* @__PURE__ */ s("div", { className: "flex flex-col gap-1", children: [
         /* @__PURE__ */ s(
@@ -6944,7 +6947,7 @@ const pt = {
             ]
           }
         ),
-        g && /* @__PURE__ */ r("p", { className: "text-red-500 text-xs mt-0.5", children: g })
+        b && /* @__PURE__ */ r("p", { className: "text-red-500 text-xs mt-0.5", children: b })
       ] }, `custom-${f}`);
     if (l.customType === "link_checkbox")
       return /* @__PURE__ */ s("div", { className: "flex flex-col gap-1", children: [
@@ -6991,7 +6994,7 @@ const pt = {
             ]
           }
         ),
-        g && /* @__PURE__ */ r("p", { className: "text-red-500 text-xs mt-0.5", children: g })
+        b && /* @__PURE__ */ r("p", { className: "text-red-500 text-xs mt-0.5", children: b })
       ] }, `custom-${f}`);
     if (l.customType === "group_checkbox") {
       const S = (me[l.paramName] || "").split(",").filter(Boolean);
@@ -7045,7 +7048,7 @@ const pt = {
             pe.value
           );
         }) }),
-        g && /* @__PURE__ */ r("p", { className: "text-red-500 text-xs", children: g })
+        b && /* @__PURE__ */ r("p", { className: "text-red-500 text-xs", children: b })
       ] }, `custom-${f}`);
     }
     return l.customType === "radio_group" ? /* @__PURE__ */ s("div", { className: "flex flex-col gap-1.5", children: [
@@ -7089,7 +7092,7 @@ const pt = {
         },
         S.value
       )) }),
-      g && /* @__PURE__ */ r("p", { className: "text-red-500 text-xs", children: g })
+      b && /* @__PURE__ */ r("p", { className: "text-red-500 text-xs", children: b })
     ] }, `custom-${f}`) : /* @__PURE__ */ r(
       xe,
       {
@@ -7099,7 +7102,7 @@ const pt = {
         value: me[l.paramName] || "",
         onChange: (S) => Ne(l.paramName, S.target.value),
         required: l.required,
-        error: g
+        error: b
       },
       `custom-${f}`
     );
@@ -7117,7 +7120,7 @@ const pt = {
               {
                 type: "checkbox",
                 checked: D,
-                onChange: (g) => Ne(l.conditionalOn, g.target.checked ? "true" : "false"),
+                onChange: (b) => Ne(l.conditionalOn, b.target.checked ? "true" : "false"),
                 className: "metakyc-option-input",
                 style: pt
               }
@@ -7133,9 +7136,9 @@ const pt = {
           ]
         }
       ) }),
-      D && /* @__PURE__ */ r("div", { className: "grid grid-cols-4 gap-4", children: l.fields.map((g, C) => {
-        const S = g.colSpan === 1 ? "col-span-1" : g.colSpan === 2 ? "col-span-2" : g.colSpan === 3 ? "col-span-3" : "col-span-4", pe = g.isCustom ? `custom-${C}-${g.paramName}` : `builtin-${g.name}-${C}`;
-        return /* @__PURE__ */ r("div", { className: S, children: /* @__PURE__ */ r(Lt, { helpText: g.helpText, children: g.isCustom ? h(g, C) : Ye(g.name, pe, g.displayText, g.countriesType, g.labelMode) }) }, pe);
+      D && /* @__PURE__ */ r("div", { style: { display: "grid", gridTemplateColumns: "repeat(4, minmax(0, 1fr))", gap: "1rem" }, children: l.fields.map((b, C) => {
+        const S = Math.min(4, Math.max(1, Number(b.colSpan) || 4)), pe = b.isCustom ? `custom-${C}-${b.paramName}` : `builtin-${b.name}-${C}`;
+        return /* @__PURE__ */ r("div", { style: { gridColumn: `span ${S} / span ${S}` }, children: /* @__PURE__ */ r(Lt, { helpText: b.helpText, children: b.isCustom ? h(b, C) : Ye(b.name, pe, b.displayText, b.countriesType, b.labelMode) }) }, pe);
       }) })
     ] });
   };
@@ -7145,7 +7148,7 @@ const pt = {
       /* @__PURE__ */ r("p", { className: "text-center mt-4", style: { color: "var(--metakyc-text-secondary, #6b7280)", fontSize: "0.875rem" }, children: "Loading form…" })
     ] }) }) });
   if (N) {
-    const l = N[F] ?? N[0], f = _e === -1, D = Re === -1, g = N.length, C = $e(l), S = Object.values(B);
+    const l = N[F] ?? N[0], f = _e === -1, D = Re === -1, b = N.length, C = $e(l), S = Object.values(B);
     return /* @__PURE__ */ r("div", { className: "metakyc-sdk", children: /* @__PURE__ */ s(re, { children: [
       /* @__PURE__ */ r(Se, { children: /* @__PURE__ */ r(mt, { title: (c == null ? void 0 : c.title) || "Create Applicant" }) }),
       /* @__PURE__ */ s(ne, { children: [
@@ -7183,7 +7186,7 @@ const pt = {
           ] }),
           S.map((pe, ie) => /* @__PURE__ */ r("p", { className: "text-red-600 text-sm", children: pe }, ie))
         ] }),
-        g > 1 && /* @__PURE__ */ s("div", { className: "flex items-center gap-2 mb-4", children: [
+        b > 1 && /* @__PURE__ */ s("div", { className: "flex items-center gap-2 mb-4", children: [
           N.map((pe, ie) => /* @__PURE__ */ r(
             "div",
             {
@@ -7195,7 +7198,7 @@ const pt = {
           /* @__PURE__ */ s("span", { className: "text-xs text-gray-400 flex-shrink-0", children: [
             F + 1,
             " / ",
-            g
+            b
           ] })
         ] }),
         O(l)
@@ -7236,7 +7239,7 @@ const pt = {
         " ",
         fe
       ] }) }),
-      /* @__PURE__ */ r("div", { className: "grid grid-cols-4 gap-4", children: Q.map((l) => /* @__PURE__ */ r("div", { className: "col-span-4", children: Ye(l) }, l)) })
+      /* @__PURE__ */ r("div", { style: { display: "grid", gridTemplateColumns: "repeat(4, minmax(0, 1fr))", gap: "1rem" }, children: Q.map((l) => /* @__PURE__ */ r("div", { style: { gridColumn: "span 4 / span 4" }, children: Ye(l) }, l)) })
     ] }),
     /* @__PURE__ */ s(Ce, { className: "flex justify-between", children: [
       a && /* @__PURE__ */ r(Z, { type: "button", variant: "outline", onClick: a, disabled: te || y, children: "Cancel" }),
@@ -7289,12 +7292,12 @@ const Xn = ({
       for (const u of z)
         Q.has(u) && m.add((L = st[u]) == null ? void 0 : L.countriesType);
     return m.size === 0 && m.add(void 0), Array.from(m);
-  }, [z, w]), [j, K] = k({}), [ee, E] = k(!0), b = de(/* @__PURE__ */ new Set()), $ = de(/* @__PURE__ */ new Set());
+  }, [z, w]), [j, K] = k({}), [ee, E] = k(!0), g = de(/* @__PURE__ */ new Set()), $ = de(/* @__PURE__ */ new Set());
   ge(() => {
     if (!c) return;
     const m = M.filter((u) => {
       const l = u != null ? String(u) : "all";
-      return !$.current.has(l) && !b.current.has(l);
+      return !$.current.has(l) && !g.current.has(l);
     });
     if (m.length === 0) {
       M.every((l) => $.current.has(l != null ? String(l) : "all")) && E(!1);
@@ -7302,17 +7305,17 @@ const Xn = ({
     }
     E(!0);
     const R = m.map((u) => u != null ? String(u) : "all");
-    R.forEach((u) => b.current.add(u)), (async () => {
+    R.forEach((u) => g.current.add(u)), (async () => {
       try {
         const u = await Promise.all(
           m.map(async (l) => {
-            const f = l != null ? String(l) : "all", D = await o.getCountries("", i.locale || "en", l), g = /* @__PURE__ */ new Set(), C = D.map((S) => ({ value: S.abbreviation3 || S.abbreviation, label: S.name })).filter((S) => !S.value || g.has(S.value) ? !1 : (g.add(S.value), !0));
-            return $.current.add(f), b.current.delete(f), [f, C];
+            const f = l != null ? String(l) : "all", D = await o.getCountries("", i.locale || "en", l), b = /* @__PURE__ */ new Set(), C = D.map((S) => ({ value: S.abbreviation3 || S.abbreviation, label: S.name })).filter((S) => !S.value || b.has(S.value) ? !1 : (b.add(S.value), !0));
+            return $.current.add(f), g.current.delete(f), [f, C];
           })
         );
         K((l) => ({ ...l, ...Object.fromEntries(u) }));
       } catch (u) {
-        R.forEach((l) => b.current.delete(l)), console.error("Failed to load countries:", u);
+        R.forEach((l) => g.current.delete(l)), console.error("Failed to load countries:", u);
       } finally {
         M.every((l) => $.current.has(l != null ? String(l) : "all")) && E(!1);
       }
@@ -7454,11 +7457,11 @@ const Xn = ({
           if (ye(f))
             for (const D of f.fields) {
               if (!D.isCustom || !D.paramName || D.customType === "paragraph" || D.customType === "html" || D.customType === "br" || D.customType === "link") continue;
-              const g = Y[D.paramName] ?? "";
+              const b = Y[D.paramName] ?? "";
               let C;
               if (D.customType === "checkbox" || D.customType === "link_checkbox")
-                C = g === "true" ? "yes" : "no";
-              else if (C = g, !C && !D.required) continue;
+                C = b === "true" ? "yes" : "no";
+              else if (C = b, !C && !D.required) continue;
               u.push({ paramName: D.paramName, value: C });
             }
       }
@@ -7483,7 +7486,7 @@ const Xn = ({
   }, Ze = (m, R, L, u, l) => {
     const f = st[m];
     if (!f) return null;
-    const D = N.includes(m), g = ke[m], C = L || f.label, S = m in _, pe = R ?? m, ie = l ? l !== "placeholder" : T, be = ie ? C : void 0, Pe = ie ? "..." : C;
+    const D = N.includes(m), b = ke[m], C = L || f.label, S = m in _, pe = R ?? m, ie = l ? l !== "placeholder" : T, be = ie ? C : void 0, Pe = ie ? "..." : C;
     switch (f.type) {
       case "select":
         if (m === "countryResidence" || m === "addressCountry") {
@@ -7498,7 +7501,7 @@ const Xn = ({
               options: [{ value: "", label: `Select ${Pe.toLowerCase()}` }, ...le],
               disabled: ee,
               readOnly: S,
-              error: g
+              error: b
             },
             pe
           );
@@ -7515,7 +7518,7 @@ const Xn = ({
             value: J[m] || "",
             onChange: (le) => I(m, le.target.value),
             readOnly: S,
-            error: g
+            error: b
           },
           pe
         );
@@ -7530,7 +7533,7 @@ const Xn = ({
             value: J[m] || "",
             onChange: (le) => I(m, le.target.value),
             readOnly: S,
-            error: g
+            error: b
           },
           pe
         );
@@ -7545,7 +7548,7 @@ const Xn = ({
             value: J[m] || "",
             onChange: (le) => I(m, le.target.value),
             readOnly: S,
-            error: g
+            error: b
           },
           pe
         );
@@ -7560,7 +7563,7 @@ const Xn = ({
             value: J[m] || "",
             onChange: (le) => I(m, le.target.value),
             readOnly: S,
-            error: g
+            error: b
           },
           pe
         );
@@ -7637,9 +7640,9 @@ const Xn = ({
         ),
         /* @__PURE__ */ r("span", { style: { fontSize: "14px", fontWeight: 500 }, children: m.conditionalOn })
       ] }),
-      R && /* @__PURE__ */ r("div", { className: "grid grid-cols-4 gap-4", children: m.fields.map((L, u) => {
-        const l = L.colSpan === 1 ? "col-span-1" : L.colSpan === 2 ? "col-span-2" : L.colSpan === 3 ? "col-span-3" : "col-span-4", f = L.isCustom ? `custom-${u}-${L.paramName}` : `builtin-${L.name}-${u}`;
-        return /* @__PURE__ */ r("div", { className: l, children: L.isCustom ? je(L, u) : Ze(L.name, f, L.displayText, L.countriesType, L.labelMode) }, f);
+      R && /* @__PURE__ */ r("div", { style: { display: "grid", gridTemplateColumns: "repeat(4, minmax(0, 1fr))", gap: "1rem" }, children: m.fields.map((L, u) => {
+        const l = Math.min(4, Math.max(1, Number(L.colSpan) || 4)), f = L.isCustom ? `custom-${u}-${L.paramName}` : `builtin-${L.name}-${u}`;
+        return /* @__PURE__ */ r("div", { style: { gridColumn: `span ${l} / span ${l}` }, children: L.isCustom ? je(L, u) : Ze(L.name, f, L.displayText, L.countriesType, L.labelMode) }, f);
       }) })
     ] });
   };
@@ -7663,16 +7666,16 @@ const Xn = ({
             " ",
             U
           ] }),
-          f.map((D, g) => /* @__PURE__ */ r("p", { className: "text-red-600 text-sm", children: D }, g))
+          f.map((D, b) => /* @__PURE__ */ r("p", { className: "text-red-600 text-sm", children: D }, b))
         ] }),
         u > 1 && /* @__PURE__ */ s("div", { className: "flex items-center gap-2 mb-4", children: [
-          w.map((D, g) => /* @__PURE__ */ r(
+          w.map((D, b) => /* @__PURE__ */ r(
             "div",
             {
-              className: `h-1.5 rounded-full transition-all ${g === ue ? "flex-1" : "w-8"}`,
-              style: g === ue ? { backgroundColor: "var(--metakyc-primary, #2563eb)" } : g < ue ? { backgroundColor: "var(--metakyc-primary-light, #93c5fd)", opacity: 0.7 } : { backgroundColor: "#e5e7eb" }
+              className: `h-1.5 rounded-full transition-all ${b === ue ? "flex-1" : "w-8"}`,
+              style: b === ue ? { backgroundColor: "var(--metakyc-primary, #2563eb)" } : b < ue ? { backgroundColor: "var(--metakyc-primary-light, #93c5fd)", opacity: 0.7 } : { backgroundColor: "#e5e7eb" }
             },
-            g
+            b
           )),
           /* @__PURE__ */ s("span", { className: "text-xs text-gray-400 flex-shrink-0", children: [
             ue + 1,
@@ -7710,7 +7713,7 @@ const Xn = ({
         " ",
         U
       ] }) }),
-      /* @__PURE__ */ r("div", { className: "grid grid-cols-4 gap-4", children: z.map((m) => /* @__PURE__ */ r("div", { className: "col-span-4", children: Ze(m) }, m)) })
+      /* @__PURE__ */ r("div", { style: { display: "grid", gridTemplateColumns: "repeat(4, minmax(0, 1fr))", gap: "1rem" }, children: z.map((m) => /* @__PURE__ */ r("div", { style: { gridColumn: "span 4 / span 4" }, children: Ze(m) }, m)) })
     ] }),
     /* @__PURE__ */ s(Ce, { className: "flex justify-between", children: [
       a && /* @__PURE__ */ r(Z, { type: "button", variant: "outline", onClick: a, disabled: H || y, children: "Cancel" }),
@@ -7826,7 +7829,7 @@ const Xn = ({
         return "";
     }
   }, M = () => {
-    const K = d.filter((V) => V.visibility !== !1), ee = K.findIndex((V) => V.order === c.order), E = ee >= 0 ? ee + 1 : 1, b = K.length, $ = b > 1 ? ee / (b - 1) * 100 : 100;
+    const K = d.filter((V) => V.visibility !== !1), ee = K.findIndex((V) => V.order === c.order), E = ee >= 0 ? ee + 1 : 1, g = K.length, $ = g > 1 ? ee / (g - 1) * 100 : 100;
     return /* @__PURE__ */ s("div", { style: { marginBottom: "24px" }, children: [
       /* @__PURE__ */ s("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between", marginBottom: "16px" }, children: [
         /* @__PURE__ */ r(mt, {}),
@@ -7834,7 +7837,7 @@ const Xn = ({
           "Step ",
           E,
           " of ",
-          b
+          g
         ] })
       ] }),
       /* @__PURE__ */ r("div", { style: { marginBottom: "16px" }, children: /* @__PURE__ */ r("div", { style: {