@vpdev2/metakyc 1.0.33 → 1.0.35

package/dist/index.js

@@ -1,10 +1,10 @@
 var di = Object.defineProperty;
 var mi = (e, t, r) => t in e ? di(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
-var ye = (e, t, r) => mi(e, typeof t != "symbol" ? t + "" : t, r);
+var fe = (e, t, r) => mi(e, typeof t != "symbol" ? t + "" : t, r);
 import ui from "axios";
 import { jsx as i, jsxs as o, Fragment as pt } from "react/jsx-runtime";
 import * as jt from "react";
-import Ce, { createContext as Xt, useMemo as Fe, useState as k, useEffect as fe, useContext as Zt, useCallback as te, useRef as de, forwardRef as ht, createElement as It } from "react";
+import Ce, { createContext as Xt, useMemo as Fe, useState as k, useEffect as ve, useContext as Zt, useCallback as te, useRef as de, forwardRef as ht, createElement as It } from "react";
 import pi, { createPortal as Lt } from "react-dom";
 import { useForm as gi, Controller as at } from "react-hook-form";
 import { z as Qe } from "zod";
@@ -140,7 +140,7 @@ class Ai {
 class $e extends Error {
   constructor(r, a, n, l, s) {
     super(r);
-    ye(this, "response");
+    fe(this, "response");
     this.code = a, this.details = n, this.validationErrors = l, this.name = "MetaKYCError", this.response = s, Object.setPrototypeOf(this, $e.prototype);
   }
 }
@@ -196,9 +196,9 @@ class yt {
 }
 class zi {
   constructor(t) {
-    ye(this, "axiosInstance");
-    ye(this, "endpointBuilder");
-    ye(this, "config");
+    fe(this, "axiosInstance");
+    fe(this, "endpointBuilder");
+    fe(this, "config");
     this.config = { ...Ii, ...t }, this.endpointBuilder = new Ai(this.config.endpoints), this.axiosInstance = ui.create({
       baseURL: this.config.baseUrl,
       timeout: this.config.timeout,
@@ -1048,7 +1048,7 @@ class $i {
 }
 class _i {
   constructor() {
-    ye(this, "listeners", /* @__PURE__ */ new Map());
+    fe(this, "listeners", /* @__PURE__ */ new Map());
   }
   /**
    * Subscribe to an event
@@ -1093,10 +1093,10 @@ class _i {
 }
 class Gi {
   constructor() {
-    ye(this, "events", new _i());
-    ye(this, "_applicantId", null);
-    ye(this, "_progress", null);
-    ye(this, "_error", null);
+    fe(this, "events", new _i());
+    fe(this, "_applicantId", null);
+    fe(this, "_progress", null);
+    fe(this, "_error", null);
   }
   /**
    * Get current applicant ID
@@ -1233,7 +1233,7 @@ class Gi {
 }
 class Qi {
   constructor() {
-    ye(this, "handlers", /* @__PURE__ */ new Map());
+    fe(this, "handlers", /* @__PURE__ */ new Map());
   }
   /**
    * Register a step handler
@@ -1274,8 +1274,8 @@ class Qi {
 }
 class Xi {
   constructor(t, r, a, n, l, s, p, m) {
-    ye(this, "state");
-    ye(this, "stepRouter");
+    fe(this, "state");
+    fe(this, "stepRouter");
     this.applicantService = t, this.questionnaireService = r, this.uploadDocumentService = a, this.appropriatenessTestService = n, this.overviewService = l, this.riskScoringService = s, this.investorCategorizationService = m, this.state = new Gi(), this.stepRouter = new Qi(), this.registerStepHandlers();
   }
   /**
@@ -1471,10 +1471,10 @@ a:hover { color: ${t}; }
 }
 class er {
   constructor(t) {
-    ye(this, "sdk", null);
-    ye(this, "config");
-    ye(this, "completeCallback", null);
-    ye(this, "errorCallback", null);
+    fe(this, "sdk", null);
+    fe(this, "config");
+    fe(this, "completeCallback", null);
+    fe(this, "errorCallback", null);
     this.config = t;
   }
   async loadSDK() {
@@ -1528,8 +1528,8 @@ class er {
 }
 class tr {
   constructor(t) {
-    ye(this, "sdk", null);
-    ye(this, "config");
+    fe(this, "sdk", null);
+    fe(this, "config");
     this.config = t;
   }
   /**
@@ -1594,9 +1594,9 @@ class tr {
 }
 class ir {
   constructor(t) {
-    ye(this, "sardineContext", null);
-    ye(this, "config");
-    ye(this, "sessionKey");
+    fe(this, "sardineContext", null);
+    fe(this, "config");
+    fe(this, "sessionKey");
     this.config = t, this.sessionKey = t.sessionKey || this.generateSessionKey();
   }
   /**
@@ -1793,9 +1793,9 @@ class et {
 }
 class rr {
   constructor() {
-    ye(this, "currentTheme", Pe);
-    ye(this, "customStyleElement", null);
-    ye(this, "themeStyleElement", null);
+    fe(this, "currentTheme", Pe);
+    fe(this, "customStyleElement", null);
+    fe(this, "themeStyleElement", null);
   }
   /**
    * Apply theme configuration
@@ -1832,7 +1832,12 @@ class rr {
       "input-text": t.inputText || t.textPrimary,
       "input-border": t.inputBorder || t.border,
       "input-border-focus": t.inputBorderFocus || t.primary,
-      "input-placeholder": t.inputPlaceholder || t.textMuted
+      "input-placeholder": t.inputPlaceholder || t.textMuted,
+      // Message background overrides (optional — support rgba/hex-alpha for transparency)
+      "danger-bg": t.dangerBg,
+      "success-bg": t.successBg,
+      "warning-bg": t.warningBg,
+      "info-bg": t.infoBg
     };
     r != null && r.fontFamily && (n["font-family"] = r.fontFamily), r != null && r.headingFont && (n["heading-font"] = r.headingFont), r != null && r.fontSize && Object.entries(r.fontSize).forEach(([m, d]) => {
       n[`font-size-${m}`] = d;
@@ -6730,7 +6735,7 @@ function ei(e) {
   };
 }
 const wr = /^t\(['"](.+?)['"]\)$/, Bt = "$t:";
-function ke(e, t) {
+function pe(e, t) {
   if (!e) return "";
   const r = e.trim();
   if (r.startsWith(Bt))
@@ -6738,7 +6743,7 @@ function ke(e, t) {
   const a = wr.exec(r);
   return a ? t(a[1]) : e;
 }
-const ti = "1.0.33", ii = Xt(null), qt = `metakyc-translations-${ti}-`, Sr = ({
+const ti = "1.0.35", ii = Xt(null), qt = `metakyc-translations-${ti}-`, Sr = ({
   locale: e,
   fetchTranslations: t,
   children: r
@@ -6753,7 +6758,7 @@ const ti = "1.0.33", ii = Xt(null), qt = `metakyc-translations-${ti}-`, Sr = ({
     }
     return m;
   }, [a]), [l, s] = k(n);
-  fe(() => {
+  ve(() => {
     if (!t) return;
     let m = !1;
     return t(a).then((d) => {
@@ -6845,7 +6850,7 @@ const Wt = "metakyc-theme-cache", Pa = ({ config: e, children: t }) => {
       s.investorCategorizationService
     )
   }), [e, s, r]);
-  fe(() => ((async () => {
+  ve(() => ((async () => {
     if (n.current || l.current) {
       console.log("[MetaKYC] Theme already loading or loaded, skipping...");
       return;
@@ -6998,9 +7003,9 @@ function Oa() {
 }
 function Er(e) {
   const { createOrchestrator: t } = Oe(), [r, a] = k(null), [n, l] = k(!1), [s, p] = k(null), m = de(null), d = e || Ir();
-  fe(() => {
+  ve(() => {
     m.current || (m.current = t());
-  }, [t]), fe(() => {
+  }, [t]), ve(() => {
     var F;
     r && d && (Rr(d), zr({
       applicantId: d,
@@ -7028,7 +7033,7 @@ function Er(e) {
       }
     }
   }, [d]);
-  fe(() => {
+  ve(() => {
     d && !h.current && R();
   }, [d, R]);
   const L = te(async () => {
@@ -7139,7 +7144,7 @@ function Pr(e) {
       }
     }
   }, [e, t, r]);
-  fe(() => {
+  ve(() => {
     e && b.current !== e && q();
   }, [e]);
   const S = te(
@@ -7183,7 +7188,7 @@ function Dr(e) {
       }
     }
   }, [e, t]);
-  fe(() => {
+  ve(() => {
     e && L.current !== e && b();
   }, [e]);
   const q = te(
@@ -7227,7 +7232,7 @@ function Va(e) {
       }
     }
   }, [e, t]);
-  fe(() => {
+  ve(() => {
     e && L.current !== e && b();
   }, [e]);
   const q = te(
@@ -7272,7 +7277,7 @@ function jr(e) {
       }
     }
   }, [e, t]);
-  fe(() => {
+  ve(() => {
     e && h.current !== e && R();
   }, [e]);
   const L = te(async () => {
@@ -7415,7 +7420,7 @@ function Fr(e) {
       }
     }
   }, [e, t, r]);
-  fe(() => {
+  ve(() => {
     e && S.current !== e && P();
   }, [e]);
   const B = te(
@@ -7939,7 +7944,7 @@ const Kt = 280, qr = ({
     const D = U.current.getBoundingClientRect(), O = window.innerHeight - D.bottom < Kt && D.top > Kt;
     return { top: O ? D.top : D.bottom + 4, left: D.left, width: D.width, openUp: O };
   }, []), ae = te(() => {
-    const D = getComputedStyle(document.querySelector(".metakyc-sdk") || document.documentElement), E = (ve, se) => D.getPropertyValue(ve).trim() || se, O = E("--metakyc-input-bg", E("--metakyc-background", "#ffffff"));
+    const D = getComputedStyle(document.querySelector(".metakyc-sdk") || document.documentElement), E = (he, se) => D.getPropertyValue(he).trim() || se, O = E("--metakyc-input-bg", E("--metakyc-background", "#ffffff"));
     B({
       bg: O,
       borderColor: E("--metakyc-input-border", E("--metakyc-border", "#d1d5db")),
@@ -7957,15 +7962,15 @@ const Kt = 280, qr = ({
   }, [y, J, ae]), A = te(() => {
     R(!1), b("");
   }, []);
-  fe(() => {
+  ve(() => {
     if (!h) return;
     const D = (E) => {
-      var ve, se;
+      var he, se;
       const O = E.target;
-      !((ve = F.current) != null && ve.contains(O)) && !((se = K.current) != null && se.contains(O)) && A();
+      !((he = F.current) != null && he.contains(O)) && !((se = K.current) != null && se.contains(O)) && A();
     };
     return document.addEventListener("mousedown", D), () => document.removeEventListener("mousedown", D);
-  }, [h, A]), fe(() => {
+  }, [h, A]), ve(() => {
     if (!h) return;
     const D = () => {
       const E = J();
@@ -7984,7 +7989,7 @@ const Kt = 280, qr = ({
   }, W = (D) => {
     var E;
     return ((E = a.find((O) => O.value === D)) == null ? void 0 : E.label) || D;
-  }, { bg: _, borderColor: oe, textPrimary: H, textSecondary: Me, primaryColor: pe, primaryLight: ge, hoverBg: xe } = P, me = h && q && /* @__PURE__ */ o(
+  }, { bg: _, borderColor: oe, textPrimary: H, textSecondary: Me, primaryColor: ge, primaryLight: ye, hoverBg: xe } = P, me = h && q && /* @__PURE__ */ o(
     "div",
     {
       ref: K,
@@ -8048,8 +8053,8 @@ const Kt = 280, qr = ({
                 padding: "8px 12px",
                 fontSize: "13px",
                 cursor: "pointer",
-                backgroundColor: E ? ge : "transparent",
-                color: E ? pe : H,
+                backgroundColor: E ? ye : "transparent",
+                color: E ? ge : H,
                 userSelect: "none"
               },
               onMouseEnter: (O) => {
@@ -8234,7 +8239,7 @@ const Kt = 280, qr = ({
   }, [L, Q, J]), W = te(() => {
     q(!1), P("");
   }, []), _ = () => b ? W() : X();
-  fe(() => {
+  ve(() => {
     if (!b) return;
     const j = (ne) => {
       var Ie, ze;
@@ -8242,7 +8247,7 @@ const Kt = 280, qr = ({
       !((Ie = ae.current) != null && Ie.contains(Z)) && !((ze = A.current) != null && ze.contains(Z)) && W();
     };
     return document.addEventListener("mousedown", j), () => document.removeEventListener("mousedown", j);
-  }, [b, W]), fe(() => {
+  }, [b, W]), ve(() => {
     if (!b) return;
     const j = () => {
       const ne = Q();
@@ -8251,7 +8256,7 @@ const Kt = 280, qr = ({
     return window.addEventListener("scroll", j, !0), window.addEventListener("resize", j), () => {
       window.removeEventListener("scroll", j, !0), window.removeEventListener("resize", j);
     };
-  }, [b, Q]), fe(() => {
+  }, [b, Q]), ve(() => {
     b && V.current && setTimeout(() => {
       var j;
       return (j = V.current) == null ? void 0 : j.focus();
@@ -8261,7 +8266,7 @@ const Kt = 280, qr = ({
     (j) => j.label.toLowerCase().includes(S.toLowerCase()) || j.value.toLowerCase().includes(S.toLowerCase())
   ), H = (se = a.find((j) => j.value === l)) == null ? void 0 : se.label, Me = (j, ne) => {
     L || ne || (s(j), W());
-  }, { bg: pe, border: ge, text: xe, textSecondary: me, primary: D, primaryLight: E, hoverBg: O } = U, ve = b && B && /* @__PURE__ */ o(
+  }, { bg: ge, border: ye, text: xe, textSecondary: me, primary: D, primaryLight: E, hoverBg: O } = U, he = b && B && /* @__PURE__ */ o(
     "div",
     {
       ref: A,
@@ -8275,12 +8280,12 @@ const Kt = 280, qr = ({
         zIndex: 99999,
         borderRadius: "8px",
         boxShadow: "0 4px 16px rgba(0,0,0,0.18)",
-        border: `1px solid ${ge}`,
-        backgroundColor: pe,
+        border: `1px solid ${ye}`,
+        backgroundColor: ge,
         overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ i("div", { style: { padding: "8px", borderBottom: `1px solid ${ge}` }, children: /* @__PURE__ */ i(
+        /* @__PURE__ */ i("div", { style: { padding: "8px", borderBottom: `1px solid ${ye}` }, children: /* @__PURE__ */ i(
           "input",
           {
             ref: V,
@@ -8296,18 +8301,18 @@ const Kt = 280, qr = ({
               padding: "6px 8px",
               fontSize: "13px",
               borderRadius: "6px",
-              border: `1px solid ${ge}`,
-              backgroundColor: pe,
+              border: `1px solid ${ye}`,
+              backgroundColor: ge,
               color: xe,
               outline: "none",
               boxSizing: "border-box"
             },
             onFocus: (j) => {
               const ne = getComputedStyle(document.querySelector(".metakyc-sdk") || document.documentElement), Z = ne.getPropertyValue("--metakyc-input-border-focus").trim() || ne.getPropertyValue("--metakyc-primary").trim() || "#2563eb";
-              j.currentTarget.style.backgroundColor = pe, j.currentTarget.style.color = xe, j.currentTarget.style.borderColor = Z, j.currentTarget.style.outline = "none", j.currentTarget.style.boxShadow = `0 0 0 2px ${Z}33`;
+              j.currentTarget.style.backgroundColor = ge, j.currentTarget.style.color = xe, j.currentTarget.style.borderColor = Z, j.currentTarget.style.outline = "none", j.currentTarget.style.boxShadow = `0 0 0 2px ${Z}33`;
             },
             onBlur: (j) => {
-              j.currentTarget.style.backgroundColor = pe, j.currentTarget.style.color = xe, j.currentTarget.style.borderColor = ge, j.currentTarget.style.outline = "none", j.currentTarget.style.boxShadow = "none";
+              j.currentTarget.style.backgroundColor = ge, j.currentTarget.style.color = xe, j.currentTarget.style.borderColor = ye, j.currentTarget.style.outline = "none", j.currentTarget.style.boxShadow = "none";
             }
           }
         ) }),
@@ -8408,7 +8413,7 @@ const Kt = 280, qr = ({
             ]
           }
         ),
-        typeof document < "u" && ve ? Lt(ve, document.body) : null,
+        typeof document < "u" && he ? Lt(he, document.body) : null,
         t && /* @__PURE__ */ i("p", { className: "mt-1 text-sm", style: { color: "var(--metakyc-error, #ef4444)" }, children: t }),
         !t && r && /* @__PURE__ */ i("p", { className: "mt-1 text-sm", style: { color: "var(--metakyc-text-secondary, #6b7280)" }, children: r })
       ]
@@ -8995,7 +9000,7 @@ const ea = ({
       )
     ] }),
     m && /* @__PURE__ */ i("div", { className: "mx-6 mb-4 p-3 rounded", style: {
-      backgroundColor: "color-mix(in srgb, var(--metakyc-danger, #ef4444) 10%, transparent)",
+      backgroundColor: "var(--metakyc-danger-bg, color-mix(in srgb, var(--metakyc-danger, #ef4444) 10%, transparent))",
       border: "1px solid color-mix(in srgb, var(--metakyc-danger, #ef4444) 30%, transparent)"
     }, children: /* @__PURE__ */ i("p", { className: "text-sm", style: { color: "var(--metakyc-danger, #ef4444)" }, children: m.message }) })
   ] }) : null;
@@ -9531,7 +9536,7 @@ const ma = ({
       )
     ] }),
     y && /* @__PURE__ */ i("div", { className: "mx-6 mb-4 p-3 rounded", style: {
-      backgroundColor: "color-mix(in srgb, var(--metakyc-danger, #ef4444) 10%, transparent)",
+      backgroundColor: "var(--metakyc-danger-bg, color-mix(in srgb, var(--metakyc-danger, #ef4444) 10%, transparent))",
       border: "1px solid color-mix(in srgb, var(--metakyc-danger, #ef4444) 30%, transparent)"
     }, children: /* @__PURE__ */ i("p", { className: "text-sm", style: { color: "var(--metakyc-danger, #ef4444)" }, children: y.message }) })
   ] }) : null;
@@ -9784,7 +9789,7 @@ const ga = ({
   onBack: r
 }) => {
   const { t: a } = Re(), { appropriatenessTestService: n } = Oe(), [l, s] = k(null), [p, m] = k(!0), [d, y] = k(!1), [h, R] = k(null), [L, b] = k({}), [q, S] = k(0), [P, B] = k(!1), [F, U] = k(!1), [K, J] = k(0), [ae, x] = k(0), [A, V] = k(null);
-  fe(() => {
+  ve(() => {
     (async () => {
       try {
         m(!0), R(null);
@@ -9799,25 +9804,25 @@ const ga = ({
         m(!1);
       }
     })();
-  }, [e, n]), fe(() => {
+  }, [e, n]), ve(() => {
     if (!P || q <= 0) return;
     const E = setInterval(() => {
       S((O) => O <= 1 ? (U(!0), 0) : O - 1);
     }, 1e3);
     return () => clearInterval(E);
-  }, [P, q]), fe(() => {
+  }, [P, q]), ve(() => {
     if (K <= 0) return;
     const E = setInterval(() => {
       J((O) => O <= 1 ? 0 : O - 1);
     }, 1e3);
     return () => clearInterval(E);
-  }, [K]), fe(() => {
+  }, [K]), ve(() => {
     F && !d && _();
   }, [F]);
   const Q = () => {
     l && (B(!0), S(l.testDurationSec), x(0), b({}), R(null));
   }, X = (E, O) => {
-    b((ve) => ({ ...ve, [E]: O }));
+    b((he) => ({ ...he, [E]: O }));
   }, W = te(async () => {
     try {
       const E = await n.getAppropriatenessTest(e);
@@ -9840,13 +9845,13 @@ const ga = ({
       try {
         const O = l.appropriatenessQuestions.map(
           (se) => ({ appropriatenessQuestionId: se.id, value: L[se.id] || "" })
-        ), ve = {
+        ), he = {
           applicantId: e,
           appropriatenessTestId: l.id,
           appropriatenessQuestionResults: O
         };
         try {
-          const se = await n.fillAppropriatenessTest(ve);
+          const se = await n.fillAppropriatenessTest(he);
           se.isSuccess ? V({ success: !0, message: se.message || a("appropriatenessTest.passedMessage") }) : (V({ success: !1, message: se.message || a("appropriatenessTest.failedMessage") }), setTimeout(() => W(), 1e3));
         } catch (se) {
           if (se.code === 400 && se.message)
@@ -9873,7 +9878,7 @@ const ga = ({
       /* @__PURE__ */ i("p", { style: { fontSize: "16px", fontWeight: 600, color: "var(--metakyc-danger, #ef4444)" }, children: a("appropriatenessTest.noTestData") }),
       h && /* @__PURE__ */ i("p", { style: { fontSize: "14px", color: "var(--metakyc-text-muted, #9ca3af)", marginTop: "8px" }, children: h })
     ] }) }) });
-  const H = l.testAllowedMaxTry - l.totalFailedTries, Me = l.appropriatenessQuestions.length, pe = Object.keys(L).length;
+  const H = l.testAllowedMaxTry - l.totalFailedTries, Me = l.appropriatenessQuestions.length, ge = Object.keys(L).length;
   if (K > 0)
     return /* @__PURE__ */ o(ie, { children: [
       /* @__PURE__ */ i(Ne, { children: /* @__PURE__ */ i("h2", { style: { fontSize: "18px", fontWeight: 700, color: "var(--metakyc-text-primary, #111827)", margin: 0 }, children: l.displayName }) }),
@@ -10046,7 +10051,7 @@ const ga = ({
         /* @__PURE__ */ i(G, { type: "button", onClick: Q, disabled: H <= 0, children: a("appropriatenessTest.startTest") })
       ] }) })
     ] });
-  const ge = l.appropriatenessQuestions[ae], xe = ae === Me - 1, me = pe === Me, D = q <= 60;
+  const ye = l.appropriatenessQuestions[ae], xe = ae === Me - 1, me = ge === Me, D = q <= 60;
   return /* @__PURE__ */ o(ie, { children: [
     /* @__PURE__ */ o(Ne, { children: [
       /* @__PURE__ */ o("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
@@ -10099,7 +10104,7 @@ const ga = ({
           height: "100%",
           borderRadius: "999px",
           backgroundColor: "var(--metakyc-primary, #2563eb)",
-          width: `${pe / Me * 100}%`,
+          width: `${ge / Me * 100}%`,
           transition: "width 0.3s ease"
         } }) }),
         /* @__PURE__ */ o("div", { style: {
@@ -10108,7 +10113,7 @@ const ga = ({
           marginTop: "4px"
         }, children: [
           /* @__PURE__ */ o("span", { style: { fontSize: "11px", color: "var(--metakyc-text-muted, #9ca3af)" }, children: [
-            pe,
+            ge,
             " ",
             a("appropriatenessTest.answered")
           ] }),
@@ -10121,13 +10126,13 @@ const ga = ({
       ] })
     ] }),
     /* @__PURE__ */ o(re, { children: [
-      ge && /* @__PURE__ */ i(
+      ye && /* @__PURE__ */ i(
         fa,
         {
-          question: ge,
+          question: ye,
           index: ae,
-          selectedAnswer: L[ge.id],
-          onSelect: (E) => X(ge.id, E),
+          selectedAnswer: L[ye.id],
+          onSelect: (E) => X(ye.id, E),
           disabled: d
         }
       ),
@@ -10354,7 +10359,7 @@ const ga = ({
   onBack: r
 }) => {
   var it, Ke, dt, Xe;
-  const { t: a } = Re(), { applicantService: n, baseInformationService: l, identityService: s, config: p, currentTheme: m } = Oe(), { identityData: d, provider: y, token: h, isLoading: R, error: L, requestIdentity: b, restartIdentity: q } = Mr(e), [S, P] = k(null), [B, F] = k(null), [U, K] = k([]), [J, ae] = k([]), [x, A] = k(!0), [V, Q] = k(!1), [X, W] = k(null), [_, oe] = k(!1), H = Ce.useRef(!1), [Me, pe] = k({}), [ge, xe] = k({}), me = m != null && m.reviewPageFields && m.reviewPageFields.length > 0 ? m.reviewPageFields[0] : null, D = !!(m != null && m.reviewPageDisabled), E = de(!1);
+  const { t: a } = Re(), { applicantService: n, baseInformationService: l, identityService: s, config: p, currentTheme: m } = Oe(), { identityData: d, provider: y, token: h, isLoading: R, error: L, requestIdentity: b, restartIdentity: q } = Mr(e), [S, P] = k(null), [B, F] = k(null), [U, K] = k([]), [J, ae] = k([]), [x, A] = k(!0), [V, Q] = k(!1), [X, W] = k(null), [_, oe] = k(!1), H = Ce.useRef(!1), [Me, ge] = k({}), [ye, xe] = k({}), me = m != null && m.reviewPageFields && m.reviewPageFields.length > 0 ? m.reviewPageFields[0] : null, D = !!(m != null && m.reviewPageDisabled), E = de(!1);
   E.current = D;
   const O = gi({
     defaultValues: {
@@ -10367,7 +10372,7 @@ const ga = ({
       phonenumber: ""
     }
   });
-  fe(() => {
+  ve(() => {
     if (D) {
       H.current || (H.current = !0, b().then(() => Q(!0)).catch((M) => console.error("[Identity] Auto-request failed:", M)).finally(() => A(!1)));
       return;
@@ -10386,7 +10391,7 @@ const ga = ({
         const z = /* @__PURE__ */ new Set(), w = Y.filter((v) => v.countryCode).map((v) => ({ value: v.countryCode, label: `${v.countryCode} – ${v.name}` })).filter((v) => z.has(v.value) ? !1 : (z.add(v.value), !0));
         ae(w);
         const u = M.applicantRequestData;
-        if (pe({
+        if (ge({
           firstName: (u == null ? void 0 : u.firstName) || "",
           lastName: (u == null ? void 0 : u.lastName) || "",
           email: (u == null ? void 0 : u.email) || "",
@@ -10430,9 +10435,9 @@ const ga = ({
         A(!1);
       }
     })();
-  }, [e]), fe(() => {
+  }, [e]), ve(() => {
     d && !V && E.current && (console.log("[Identity] Review page disabled — showing cached provider"), Q(!0));
-  }, [d, V]), fe(() => {
+  }, [d, V]), ve(() => {
     if (h) {
       if (h.expiresAt) {
         const f = new Date(h.expiresAt).getTime();
@@ -10457,11 +10462,11 @@ const ga = ({
       }
     }
   }, [h]);
-  const ve = y !== null && y === Be.Sumsub;
-  fe(() => {
+  const he = y !== null && y === Be.Sumsub;
+  ve(() => {
     if (y !== null && h && !S && V && !_) {
       const f = y;
-      if (ve) {
+      if (he) {
         console.log("[Sumsub] Fetching access token for Web SDK…"), W(null), (async () => {
           try {
             const M = await s.refreshSumsubToken(e), $ = et.parseProviderConfig(y, h, p);
@@ -10531,7 +10536,7 @@ const ga = ({
           console.error("[Identity] Error destroying provider:", f);
         }
     };
-  }, [y, h, S, V, t, _, ve, e, p, s]);
+  }, [y, h, S, V, t, _, he, e, p, s]);
   const se = async () => {
     try {
       W(null), oe(!1), await b(), Q(!0);
@@ -10560,7 +10565,7 @@ const ga = ({
       /* @__PURE__ */ i(Ne, { children: /* @__PURE__ */ i("h2", { className: "text-2xl font-bold text-gray-900 dark:text-white", children: a("identity.sessionIssueTitle") }) }),
       /* @__PURE__ */ o(re, { children: [
         /* @__PURE__ */ i("div", { className: "p-4 rounded-lg mb-6", style: {
-          backgroundColor: "color-mix(in srgb, var(--metakyc-danger, #ef4444) 10%, transparent)",
+          backgroundColor: "var(--metakyc-danger-bg, color-mix(in srgb, var(--metakyc-danger, #ef4444) 10%, transparent))",
           border: "1px solid color-mix(in srgb, var(--metakyc-danger, #ef4444) 30%, transparent)"
         }, children: /* @__PURE__ */ o("div", { className: "flex items-start", children: [
           /* @__PURE__ */ i(
@@ -10588,7 +10593,7 @@ const ga = ({
           ] })
         ] }) }),
         /* @__PURE__ */ o("div", { className: "rounded-lg p-4", style: {
-          backgroundColor: "color-mix(in srgb, var(--metakyc-primary, #2563eb) 10%, transparent)",
+          backgroundColor: "var(--metakyc-info-bg, color-mix(in srgb, var(--metakyc-primary, #2563eb) 10%, transparent))",
           border: "1px solid color-mix(in srgb, var(--metakyc-primary, #2563eb) 30%, transparent)"
         }, children: [
           /* @__PURE__ */ i("h3", { className: "font-semibold mb-2", style: { color: "var(--metakyc-primary, #2563eb)" }, children: a("identity.whatToDoNext") }),
@@ -10606,7 +10611,7 @@ const ga = ({
     ] });
   if (V && d) {
     const f = y;
-    return ve ? /* @__PURE__ */ o("div", { style: {
+    return he ? /* @__PURE__ */ o("div", { style: {
       background: "var(--metakyc-background, #ffffff)",
       borderRadius: "12px",
       border: "1px solid var(--metakyc-border, #e5e7eb)",
@@ -10689,7 +10694,7 @@ const ga = ({
       ] }) }),
       /* @__PURE__ */ o(re, { children: [
         /* @__PURE__ */ i("div", { className: "mb-4 p-3 rounded-lg", style: {
-          backgroundColor: "color-mix(in srgb, var(--metakyc-warning, #f59e0b) 10%, transparent)",
+          backgroundColor: "var(--metakyc-warning-bg, color-mix(in srgb, var(--metakyc-warning, #f59e0b) 10%, transparent))",
           border: "1px solid color-mix(in srgb, var(--metakyc-warning, #f59e0b) 30%, transparent)"
         }, children: /* @__PURE__ */ i("p", { className: "text-sm", style: { color: "var(--metakyc-warning, #f59e0b)" }, children: a("identity.importantExpiredMessage") }) }),
         /* @__PURE__ */ i("div", { className: "w-full", style: { height: "600px" }, children: /* @__PURE__ */ i(
@@ -10843,7 +10848,7 @@ const ga = ({
     /* @__PURE__ */ i("div", { style: { flex: 1, minWidth: 0 }, children: f }),
     /* @__PURE__ */ i("div", { style: { paddingTop: 24 }, children: /* @__PURE__ */ i(ze, { helpText: M }) })
   ] }) : f, We = (f, M) => {
-    const $ = `cf-${M}`, Y = f.paramName ?? "", ee = ge[Y];
+    const $ = `cf-${M}`, Y = f.paramName ?? "", ee = ye[Y];
     if (f.customType === "br")
       return /* @__PURE__ */ i("div", { style: { ...Z(f.colSpan), minHeight: "0.5rem" } }, $);
     if (f.customType === "paragraph")
@@ -10963,7 +10968,7 @@ const ga = ({
         {
           label: ee,
           value: String(g),
-          onChange: (u) => pe((c) => ({ ...c, [$]: u })),
+          onChange: (u) => ge((c) => ({ ...c, [$]: u })),
           options: [{ value: "", label: a("placeholders.selectCountryCode") }, ...J]
         }
       ),
@@ -10974,7 +10979,7 @@ const ga = ({
         {
           label: ee,
           value: String(g),
-          onChange: (u) => pe((c) => ({ ...c, [$]: u })),
+          onChange: (u) => ge((c) => ({ ...c, [$]: u })),
           options: [{ value: "", label: a("common.select") }, ...U]
         }
       ),
@@ -10986,7 +10991,7 @@ const ga = ({
           label: ee,
           type: (Y == null ? void 0 : Y.type) === "date" ? "date" : (Y == null ? void 0 : Y.type) === "email" ? "email" : "text",
           value: String(g),
-          onChange: (u) => pe((c) => ({ ...c, [$]: u.target.value }))
+          onChange: (u) => ge((c) => ({ ...c, [$]: u.target.value }))
         }
       ),
       f.helpText
@@ -11081,14 +11086,14 @@ const ga = ({
     ] })
   ] }) });
 }, Pt = {
-  success: { color: "--metakyc-success", fallback: "#22c55e" },
-  error: { color: "--metakyc-danger", fallback: "#ef4444" },
-  pending: { color: "--metakyc-warning", fallback: "#f59e0b" }
+  success: { color: "--metakyc-success", fallback: "#22c55e", bgVar: "--metakyc-success-bg" },
+  error: { color: "--metakyc-danger", fallback: "#ef4444", bgVar: "--metakyc-danger-bg" },
+  pending: { color: "--metakyc-warning", fallback: "#f59e0b", bgVar: "--metakyc-warning-bg" }
 };
 function Tt(e) {
-  const { color: t, fallback: r } = Pt[e];
+  const { color: t, fallback: r, bgVar: a } = Pt[e];
   return {
-    backgroundColor: `color-mix(in srgb, var(${t}, ${r}) 10%, transparent)`,
+    backgroundColor: `var(${a}, color-mix(in srgb, var(${t}, ${r}) 10%, transparent))`,
     border: `1px solid color-mix(in srgb, var(${t}, ${r}) 30%, transparent)`
   };
 }
@@ -11224,7 +11229,7 @@ const _t = ({
   subtitle: t,
   className: r = ""
 }) => {
-  const { currentTheme: a } = Oe(), { t: n } = Re(), l = e || (a == null ? void 0 : a.title) || "", s = ke(l, n), p = ke(t, n), m = !!(a != null && a.logo && a.logo.visible && a.logo.url), d = !!s;
+  const { currentTheme: a } = Oe(), { t: n } = Re(), l = e || (a == null ? void 0 : a.title) || "", s = pe(l, n), p = pe(t, n), m = !!(a != null && a.logo && a.logo.visible && a.logo.url), d = !!s;
   return !m && !d ? null : /* @__PURE__ */ o("div", { className: `metakyc-header ${r}`, children: [
     /* @__PURE__ */ o(
       "div",
@@ -11437,7 +11442,7 @@ const ba = {
         U.has(I) && c.add((C = lt[I]) == null ? void 0 : C.countriesType);
     return c.size === 0 && c.add(void 0), Array.from(c);
   }, [F, P]), [J, ae] = k({}), [x, A] = k(!0), V = de(/* @__PURE__ */ new Set()), Q = de(/* @__PURE__ */ new Set());
-  fe(() => {
+  ve(() => {
     if (!s) return;
     const c = K.filter((I) => {
       const N = I != null ? String(I) : "all";
@@ -11456,10 +11461,10 @@ const ba = {
       try {
         const I = await Promise.all(
           c.map(async (N) => {
-            const T = N != null ? String(N) : "all", ue = await l.getCountries("", n.locale || "en", N), le = N === 40, we = /* @__PURE__ */ new Set(), be = ue.map((he) => le && he.countryCode ? {
-              value: he.countryCode,
-              label: `${he.countryCode} – ${he.name}`
-            } : { value: he.abbreviation3 || he.abbreviation, label: he.name }).filter((he) => !he.value || we.has(he.value) ? !1 : (we.add(he.value), !0));
+            const T = N != null ? String(N) : "all", ue = await l.getCountries("", n.locale || "en", N), le = N === 40, we = /* @__PURE__ */ new Set(), be = ue.map((ke) => le && ke.countryCode ? {
+              value: ke.countryCode,
+              label: `${ke.countryCode} – ${ke.name}`
+            } : { value: ke.abbreviation3 || ke.abbreviation, label: ke.name }).filter((ke) => !ke.value || we.has(ke.value) ? !1 : (we.add(ke.value), !0));
             return Q.current.add(T), V.current.delete(T), [T, be];
           })
         );
@@ -11532,21 +11537,21 @@ const ba = {
     taxNumber: "",
     ..._,
     ...oe
-  }), pe = Object.fromEntries(
+  }), ge = Object.fromEntries(
     Object.entries(L).filter(([c]) => !(c in _) && c !== "externalRefId" && c !== "workflowKey")
-  ), [ge, xe] = k({ ...pe }), [me, D] = k(0), [E, O] = k({}), [ve, se] = k(null), [j, ne] = k(!1), Z = (c, v) => Me((C) => ({ ...C, [c]: v })), Ie = (c, v) => xe((C) => ({ ...C, [c]: v })), ze = (c) => !c.conditionalOn || ge[c.conditionalOn] === "true", Ae = P && me < P.length - 1 ? me + 1 : -1, We = P && me > 0 ? me - 1 : -1, ct = (c) => {
+  ), [ye, xe] = k({ ...ge }), [me, D] = k(0), [E, O] = k({}), [he, se] = k(null), [j, ne] = k(!1), Z = (c, v) => Me((C) => ({ ...C, [c]: v })), Ie = (c, v) => xe((C) => ({ ...C, [c]: v })), ze = (c) => !c.conditionalOn || ye[c.conditionalOn] === "true", Ae = P && me < P.length - 1 ? me + 1 : -1, We = P && me > 0 ? me - 1 : -1, ct = (c) => {
     const v = {};
     for (const C of c.fields)
       if (C.isCustom) {
         if (C.customType === "paragraph" || C.customType === "html" || C.customType === "br" || C.customType === "link") continue;
         if (C.required && C.paramName) {
-          const I = ge[C.paramName], N = ke(C.displayText, d) || ke(C.label, d) || C.paramName;
+          const I = ye[C.paramName], N = pe(C.displayText, d) || pe(C.label, d) || C.paramName;
           C.customType === "checkbox" || C.customType === "link_checkbox" ? I !== "true" && (v[C.paramName] = d("validation.fieldRequired", { field: N })) : (!I || I.trim() === "") && (v[C.paramName] = d("validation.fieldRequired", { field: N }));
         }
       } else if (C.name) {
         const I = C.name;
         if (B.includes(I) && ut(H[I])) {
-          const N = lt[I], T = ke(C.displayText, d) || (N != null && N.translationKey ? d(`fields.${N.translationKey}`) : void 0) || (N == null ? void 0 : N.label) || I;
+          const N = lt[I], T = pe(C.displayText, d) || (N != null && N.translationKey ? d(`fields.${N.translationKey}`) : void 0) || (N == null ? void 0 : N.label) || I;
           v[I] = d("validation.fieldRequired", { field: T });
         }
       }
@@ -11610,7 +11615,7 @@ const ba = {
           if (ze(N))
             for (const T of N.fields) {
               if (!T.isCustom || !T.paramName || T.customType === "paragraph" || T.customType === "html" || T.customType === "br" || T.customType === "link") continue;
-              const ue = ge[T.paramName] ?? "";
+              const ue = ye[T.paramName] ?? "";
               let le;
               if (T.customType === "checkbox" || T.customType === "link_checkbox")
                 le = ue === "true" ? "yes" : "no";
@@ -11621,7 +11626,7 @@ const ba = {
       for (const [N, T] of Object.entries(_))
         c[N] === void 0 && !ut(T) && (c[N] = T);
       const C = new Set(v.map((N) => N.paramName));
-      for (const [N, T] of Object.entries(pe))
+      for (const [N, T] of Object.entries(ge))
         !C.has(N) && T && v.push({ paramName: N, value: T });
       v.length > 0 && (c.applicantAdditionalDatas = v);
       const I = await p(c);
@@ -11644,7 +11649,7 @@ const ba = {
     var Dt;
     const T = lt[c];
     if (!T) return null;
-    const ue = B.includes(c), le = E[c], we = ke(C, d) || (T.translationKey ? d(`fields.${T.translationKey}`) : void 0) || T.label, be = c in oe, he = v ?? c, Ze = { required: ue }, Ye = N ? N !== "placeholder" : S, Je = Ye ? we : void 0;
+    const ue = B.includes(c), le = E[c], we = pe(C, d) || (T.translationKey ? d(`fields.${T.translationKey}`) : void 0) || T.label, be = c in oe, ke = v ?? c, Ze = { required: ue }, Ye = N ? N !== "placeholder" : S, Je = Ye ? we : void 0;
     switch (T.type) {
       case "select":
         if (c === "country" || c === "nationality" || c === "taxCountry" || c === "countryOfBirth" || c === "mobileCountryCode") {
@@ -11661,7 +11666,7 @@ const ba = {
               readOnly: be,
               error: le
             },
-            he
+            ke
           );
         }
         if (c === "salutation")
@@ -11681,7 +11686,7 @@ const ba = {
               readOnly: be,
               error: le
             },
-            he
+            ke
           );
         if (c === "defaultLanguage") {
           const Le = s != null && s.allowedLanguages && s.allowedLanguages.length > 0 ? Mt.filter((rt) => s.allowedLanguages.includes(rt.value)) : Mt;
@@ -11696,7 +11701,7 @@ const ba = {
               readOnly: be,
               error: le
             },
-            he
+            ke
           );
         }
         return null;
@@ -11715,7 +11720,7 @@ const ba = {
               disabled: x,
               readOnly: be
             },
-            he
+            ke
           );
         }
         return null;
@@ -11732,7 +11737,7 @@ const ba = {
             readOnly: be,
             error: le
           },
-          he
+          ke
         );
       case "email":
         return /* @__PURE__ */ i(
@@ -11747,7 +11752,7 @@ const ba = {
             readOnly: be,
             error: le
           },
-          he
+          ke
         );
       case "tel":
         return /* @__PURE__ */ i(
@@ -11762,7 +11767,7 @@ const ba = {
             readOnly: be,
             error: le
           },
-          he
+          ke
         );
       default:
         return /* @__PURE__ */ i(
@@ -11777,13 +11782,13 @@ const ba = {
             readOnly: be,
             error: le
           },
-          he
+          ke
         );
     }
   }, f = (c, v) => {
     const C = c.labelMode ? c.labelMode !== "placeholder" : S;
     if (c.customType === "paragraph") {
-      const T = ke(c.displayText, d) || ke(c.label, d) || "";
+      const T = pe(c.displayText, d) || pe(c.label, d) || "";
       return /* @__PURE__ */ i(
         "p",
         {
@@ -11803,14 +11808,14 @@ const ba = {
       return /* @__PURE__ */ i(
         "div",
         {
-          dangerouslySetInnerHTML: { __html: ke(c.label, d) || "" }
+          dangerouslySetInnerHTML: { __html: pe(c.label, d) || "" }
         },
         `custom-${v}`
       );
     if (c.customType === "br")
       return /* @__PURE__ */ i("div", { style: { height: "12px" } }, `custom-${v}`);
     if (c.customType === "link") {
-      const T = ke(c.displayText, d) || ke(c.label, d) || c.linkText || c.linkUrl || "";
+      const T = pe(c.displayText, d) || pe(c.label, d) || c.linkText || c.linkUrl || "";
       return /* @__PURE__ */ i("div", { className: "metakyc-link-field", children: /* @__PURE__ */ o(
         "a",
         {
@@ -11834,7 +11839,7 @@ const ba = {
       ) }, `custom-${v}`);
     }
     if (!c.paramName) return null;
-    const I = E[c.paramName], N = ke(c.displayText, d) || ke(c.label, d) || c.paramName;
+    const I = E[c.paramName], N = pe(c.displayText, d) || pe(c.label, d) || c.paramName;
     if (c.customType === "checkbox")
       return /* @__PURE__ */ o("div", { className: "flex flex-col gap-1", children: [
         /* @__PURE__ */ o(
@@ -11846,7 +11851,7 @@ const ba = {
               /* @__PURE__ */ i(
                 Ue,
                 {
-                  checked: ge[c.paramName] === "true",
+                  checked: ye[c.paramName] === "true",
                   onChange: (T) => Ie(c.paramName, T ? "true" : "false")
                 }
               ),
@@ -11877,7 +11882,7 @@ const ba = {
               /* @__PURE__ */ i(
                 Ue,
                 {
-                  checked: ge[c.paramName] === "true",
+                  checked: ye[c.paramName] === "true",
                   onChange: (T) => Ie(c.paramName, T ? "true" : "false")
                 }
               ),
@@ -11911,7 +11916,7 @@ const ba = {
         I && /* @__PURE__ */ i("p", { className: "text-xs mt-0.5", style: { color: "var(--metakyc-danger, #ef4444)" }, children: I })
       ] }, `custom-${v}`);
     if (c.customType === "group_checkbox") {
-      const T = (ge[c.paramName] || "").split(",").filter(Boolean);
+      const T = (ye[c.paramName] || "").split(",").filter(Boolean);
       return /* @__PURE__ */ o("div", { className: "flex flex-col gap-1.5", children: [
         C && /* @__PURE__ */ o(
           "div",
@@ -11925,7 +11930,7 @@ const ba = {
           }
         ),
         /* @__PURE__ */ i("div", { className: "metakyc-options-group", style: { display: "flex", flexDirection: "column", gap: "8px" }, children: (c.options || []).map((ue) => {
-          const le = c.singleSelect ? ge[c.paramName] === ue.value : T.includes(ue.value);
+          const le = c.singleSelect ? ye[c.paramName] === ue.value : T.includes(ue.value);
           return /* @__PURE__ */ o(
             "label",
             {
@@ -11940,7 +11945,7 @@ const ba = {
                       if (c.singleSelect)
                         Ie(c.paramName, we ? ue.value : "");
                       else {
-                        const be = we ? [...T, ue.value] : T.filter((he) => he !== ue.value);
+                        const be = we ? [...T, ue.value] : T.filter((ke) => ke !== ue.value);
                         Ie(c.paramName, be.join(","));
                       }
                     }
@@ -11984,7 +11989,7 @@ const ba = {
               "input",
               {
                 type: "radio",
-                checked: ge[c.paramName] === T.value,
+                checked: ye[c.paramName] === T.value,
                 onChange: () => Ie(c.paramName, T.value),
                 name: `radio-group-${c.paramName}-${v}`,
                 className: "metakyc-option-input",
@@ -12010,7 +12015,7 @@ const ba = {
         type: "text",
         label: C ? `${N}${c.required ? " *" : ""}` : void 0,
         placeholder: C ? void 0 : N,
-        value: ge[c.paramName] || "",
+        value: ye[c.paramName] || "",
         onChange: (T) => Ie(c.paramName, T.target.value),
         required: c.required,
         error: I
@@ -12066,7 +12071,7 @@ const ba = {
             {
               className: "font-semibold text-base",
               style: { color: "var(--metakyc-text-primary, #111827)" },
-              children: c.title
+              children: pe(c.title, d)
             }
           ),
           c.subtitle && /* @__PURE__ */ i(
@@ -12074,7 +12079,7 @@ const ba = {
             {
               className: "text-sm mt-0.5",
               style: { color: "var(--metakyc-text-secondary, #6b7280)" },
-              children: c.subtitle
+              children: pe(c.subtitle, d)
             }
           ),
           c.description && c.description !== c.subtitle && /* @__PURE__ */ i(
@@ -12082,7 +12087,7 @@ const ba = {
             {
               className: "text-xs mt-1",
               style: { color: "var(--metakyc-text-secondary, #6b7280)" },
-              children: c.description
+              children: pe(c.description, d)
             }
           )
         ] }),
@@ -12105,14 +12110,14 @@ const ba = {
             I
           ] })
         ] }),
-        (ve || T.length > 0) && /* @__PURE__ */ o("div", { className: "mb-4 p-3 rounded-lg", style: {
-          backgroundColor: "color-mix(in srgb, var(--metakyc-danger, #ef4444) 10%, transparent)",
+        (he || T.length > 0) && /* @__PURE__ */ o("div", { className: "mb-4 p-3 rounded-lg", style: {
+          backgroundColor: "var(--metakyc-danger-bg, color-mix(in srgb, var(--metakyc-danger, #ef4444) 10%, transparent))",
           border: "1px solid color-mix(in srgb, var(--metakyc-danger, #ef4444) 30%, transparent)"
         }, children: [
-          ve && /* @__PURE__ */ o("p", { className: "text-sm", style: { color: "var(--metakyc-danger, #ef4444)" }, children: [
+          he && /* @__PURE__ */ o("p", { className: "text-sm", style: { color: "var(--metakyc-danger, #ef4444)" }, children: [
             /* @__PURE__ */ i("strong", { children: d("common.errorPrefix") }),
             " ",
-            ve
+            he
           ] }),
           T.map((ue, le) => /* @__PURE__ */ i("p", { className: "text-sm", style: { color: "var(--metakyc-danger, #ef4444)" }, children: ue }, le))
         ] }),
@@ -12149,13 +12154,13 @@ const ba = {
   return /* @__PURE__ */ i("div", { className: "metakyc-sdk", children: /* @__PURE__ */ i("form", { onSubmit: dt, children: /* @__PURE__ */ o(ie, { children: [
     /* @__PURE__ */ i(Ne, { children: /* @__PURE__ */ i(vt, { title: (s == null ? void 0 : s.title) || d("createApplicant.title") }) }),
     /* @__PURE__ */ o(re, { children: [
-      ve && /* @__PURE__ */ i("div", { className: "mb-6 p-4 rounded-lg", style: {
-        backgroundColor: "color-mix(in srgb, var(--metakyc-danger, #ef4444) 10%, transparent)",
+      he && /* @__PURE__ */ i("div", { className: "mb-6 p-4 rounded-lg", style: {
+        backgroundColor: "var(--metakyc-danger-bg, color-mix(in srgb, var(--metakyc-danger, #ef4444) 10%, transparent))",
         border: "1px solid color-mix(in srgb, var(--metakyc-danger, #ef4444) 30%, transparent)"
       }, children: /* @__PURE__ */ o("p", { className: "text-sm", style: { color: "var(--metakyc-danger, #ef4444)" }, children: [
         /* @__PURE__ */ i("strong", { children: d("common.errorPrefix") }),
         " ",
-        ve
+        he
       ] }) }),
       /* @__PURE__ */ i("div", { style: { display: "grid", gridTemplateColumns: "repeat(4, minmax(0, 1fr))", gap: "1rem" }, children: F.map((c) => /* @__PURE__ */ i("div", { style: { gridColumn: "span 4 / span 4" }, children: Xe(c) }, c)) })
     ] }),
@@ -12211,7 +12216,7 @@ const qa = ({
         F.has(u) && g.add((w = mt[u]) == null ? void 0 : w.countriesType);
     return g.size === 0 && g.add(void 0), Array.from(g);
   }, [B, S]), [K, J] = k({}), [ae, x] = k(!0), A = de(/* @__PURE__ */ new Set()), V = de(/* @__PURE__ */ new Set());
-  fe(() => {
+  ve(() => {
     if (!s) return;
     const g = U.filter((u) => {
       const c = u != null ? String(u) : "all";
@@ -12288,28 +12293,28 @@ const qa = ({
     lei: "",
     externalRefId: h,
     ...W
-  }), [H, Me] = k({}), [pe, ge] = k(0), [xe, me] = k({}), [D, E] = k(null), [O, ve] = k(!1), se = (g, z) => oe((w) => ({ ...w, [g]: z })), j = (g, z) => Me((w) => ({ ...w, [g]: z })), ne = (g) => !g.conditionalOn || H[g.conditionalOn] === "true", Z = S && pe < S.length - 1 ? pe + 1 : -1, Ie = S && pe > 0 ? pe - 1 : -1, ze = (g) => {
+  }), [H, Me] = k({}), [ge, ye] = k(0), [xe, me] = k({}), [D, E] = k(null), [O, he] = k(!1), se = (g, z) => oe((w) => ({ ...w, [g]: z })), j = (g, z) => Me((w) => ({ ...w, [g]: z })), ne = (g) => !g.conditionalOn || H[g.conditionalOn] === "true", Z = S && ge < S.length - 1 ? ge + 1 : -1, Ie = S && ge > 0 ? ge - 1 : -1, ze = (g) => {
     const z = {};
     for (const w of g.fields)
       if (w.isCustom) {
         if (w.customType === "paragraph" || w.customType === "html" || w.customType === "br" || w.customType === "link") continue;
         if (w.required && w.paramName) {
-          const u = H[w.paramName], c = ke(w.displayText, d) || ke(w.label, d) || w.paramName;
+          const u = H[w.paramName], c = pe(w.displayText, d) || pe(w.label, d) || w.paramName;
           w.customType === "checkbox" || w.customType === "link_checkbox" ? u !== "true" && (z[w.paramName] = d("validation.fieldRequired", { field: c })) : (!u || u.trim() === "") && (z[w.paramName] = d("validation.fieldRequired", { field: c }));
         }
       } else if (w.name) {
         const u = w.name;
         if (P.includes(u) && Rt(_[u])) {
-          const c = mt[u], v = ke(w.displayText, d) || (c != null && c.translationKey ? d(`fields.${c.translationKey}`) : void 0) || (c == null ? void 0 : c.label) || u;
+          const c = mt[u], v = pe(w.displayText, d) || (c != null && c.translationKey ? d(`fields.${c.translationKey}`) : void 0) || (c == null ? void 0 : c.label) || u;
           z[u] = d("validation.fieldRequired", { field: v });
         }
       }
     return z;
   }, Ae = async () => {
     if (!S) return;
-    const g = S[pe];
+    const g = S[ge];
     if (g.conditionalOn && !ne(g)) {
-      me({}), Z >= 0 ? ge(Z) : await We();
+      me({}), Z >= 0 ? ye(Z) : await We();
       return;
     }
     const z = ze(g);
@@ -12317,7 +12322,7 @@ const qa = ({
       me(z);
       return;
     }
-    me({}), Z >= 0 ? ge(Z) : await We();
+    me({}), Z >= 0 ? ye(Z) : await We();
   }, We = async () => {
     var g;
     if (S) {
@@ -12329,7 +12334,7 @@ const qa = ({
         return;
       }
     }
-    ve(!0), E(null);
+    he(!0), E(null);
     try {
       const z = {
         workflowKey: _.workflowKey,
@@ -12388,7 +12393,7 @@ const qa = ({
     } catch (z) {
       console.error("Error creating company applicant:", z), E(z.message || d("createCompany.failedToCreate"));
     } finally {
-      ve(!1);
+      he(!1);
     }
   }, ct = async (g) => {
     g.preventDefault();
@@ -12402,7 +12407,7 @@ const qa = ({
   }, it = (g, z, w, u, c) => {
     const v = mt[g];
     if (!v) return null;
-    const C = P.includes(g), I = xe[g], N = ke(w, d) || (v.translationKey ? d(`fields.${v.translationKey}`) : void 0) || v.label, T = g in W, ue = z ?? g, le = c ? c !== "placeholder" : q, we = le ? N : void 0;
+    const C = P.includes(g), I = xe[g], N = pe(w, d) || (v.translationKey ? d(`fields.${v.translationKey}`) : void 0) || v.label, T = g in W, ue = z ?? g, le = c ? c !== "placeholder" : q, we = le ? N : void 0;
     switch (v.type) {
       case "select":
         if (g === "countryResidence" || g === "addressCountry") {
@@ -12413,7 +12418,7 @@ const qa = ({
               required: C,
               label: we,
               value: _[g] || "",
-              onChange: (he) => se(g, he),
+              onChange: (ke) => se(g, ke),
               options: [{ value: "", label: le ? d("placeholders.selectCountry") : N }, ...be],
               disabled: ae,
               readOnly: T,
@@ -12490,12 +12495,12 @@ const qa = ({
         "p",
         {
           style: { fontSize: "14px", lineHeight: "1.7", margin: 0, color: "var(--metakyc-text-secondary, #6b7280)" },
-          dangerouslySetInnerHTML: { __html: ke(g.displayText, d) || ke(g.label, d) || "" }
+          dangerouslySetInnerHTML: { __html: pe(g.displayText, d) || pe(g.label, d) || "" }
         },
         `custom-${z}`
       );
     if (g.customType === "html")
-      return /* @__PURE__ */ i("div", { dangerouslySetInnerHTML: { __html: ke(g.label, d) || "" } }, `custom-${z}`);
+      return /* @__PURE__ */ i("div", { dangerouslySetInnerHTML: { __html: pe(g.label, d) || "" } }, `custom-${z}`);
     if (g.customType === "br")
       return /* @__PURE__ */ i("div", { style: { height: "12px" } }, `custom-${z}`);
     if (g.customType === "link")
@@ -12506,11 +12511,11 @@ const qa = ({
           target: "_blank",
           rel: "noopener noreferrer",
           style: { color: "var(--metakyc-primary, #2563eb)", fontSize: "14px", textDecoration: "underline" },
-          children: ke(g.displayText, d) || ke(g.label, d) || g.linkText || g.linkUrl || ""
+          children: pe(g.displayText, d) || pe(g.label, d) || g.linkText || g.linkUrl || ""
         }
       ) }, `custom-${z}`);
     if (!g.paramName) return null;
-    const w = xe[g.paramName], u = ke(g.displayText, d) || ke(g.label, d) || g.paramName, c = g.labelMode ? g.labelMode !== "placeholder" : q;
+    const w = xe[g.paramName], u = pe(g.displayText, d) || pe(g.label, d) || g.paramName, c = g.labelMode ? g.labelMode !== "placeholder" : q;
     return g.customType === "checkbox" ? /* @__PURE__ */ o("div", { className: "flex flex-col gap-1", children: [
       /* @__PURE__ */ o("label", { style: { display: "flex", alignItems: "center", gap: "10px", cursor: "pointer" }, children: [
         /* @__PURE__ */ i(
@@ -12564,16 +12569,16 @@ const qa = ({
       /* @__PURE__ */ i("p", { className: "text-center mt-4", style: { color: "var(--metakyc-text-secondary, #6b7280)", fontSize: "0.875rem" }, children: d("common.loadingForm") })
     ] }) }) });
   if (S) {
-    const g = S[pe] ?? S[0], z = Ie === -1, w = Z === -1, u = S.length, c = ne(g), v = Object.values(xe);
+    const g = S[ge] ?? S[0], z = Ie === -1, w = Z === -1, u = S.length, c = ne(g), v = Object.values(xe);
     return /* @__PURE__ */ i("div", { className: "metakyc-sdk", children: /* @__PURE__ */ o(ie, { children: [
       /* @__PURE__ */ i(Ne, { children: /* @__PURE__ */ i(vt, { title: (s == null ? void 0 : s.title) || d("createCompany.title") }) }),
       /* @__PURE__ */ o(re, { children: [
         (g.title || g.subtitle) && /* @__PURE__ */ o("div", { className: "mb-4", children: [
-          g.title && /* @__PURE__ */ i("h3", { className: "font-semibold text-base", style: { color: "var(--metakyc-text-primary, #111827)" }, children: g.title }),
-          g.subtitle && /* @__PURE__ */ i("p", { className: "text-sm mt-0.5", style: { color: "var(--metakyc-text-secondary, #6b7280)" }, children: g.subtitle })
+          g.title && /* @__PURE__ */ i("h3", { className: "font-semibold text-base", style: { color: "var(--metakyc-text-primary, #111827)" }, children: pe(g.title, d) }),
+          g.subtitle && /* @__PURE__ */ i("p", { className: "text-sm mt-0.5", style: { color: "var(--metakyc-text-secondary, #6b7280)" }, children: pe(g.subtitle, d) })
         ] }),
         (D || v.length > 0) && /* @__PURE__ */ o("div", { className: "mb-4 p-3 rounded-lg", style: {
-          backgroundColor: "color-mix(in srgb, var(--metakyc-danger, #ef4444) 10%, transparent)",
+          backgroundColor: "var(--metakyc-danger-bg, color-mix(in srgb, var(--metakyc-danger, #ef4444) 10%, transparent))",
           border: "1px solid color-mix(in srgb, var(--metakyc-danger, #ef4444) 30%, transparent)"
         }, children: [
           D && /* @__PURE__ */ o("p", { className: "text-sm", style: { color: "var(--metakyc-danger, #ef4444)" }, children: [
@@ -12591,13 +12596,13 @@ const qa = ({
                 height: "0.375rem",
                 borderRadius: "9999px",
                 transition: "all 150ms",
-                ...I === pe ? { flex: "1 1 0%", backgroundColor: "var(--metakyc-primary, #2563eb)", opacity: 0.3 } : I < pe ? { width: "2rem", backgroundColor: "var(--metakyc-primary-light, #93c5fd)", opacity: 0.7 } : { width: "2rem", backgroundColor: "#e5e7eb", opacity: 0.3 }
+                ...I === ge ? { flex: "1 1 0%", backgroundColor: "var(--metakyc-primary, #2563eb)", opacity: 0.3 } : I < ge ? { width: "2rem", backgroundColor: "var(--metakyc-primary-light, #93c5fd)", opacity: 0.7 } : { width: "2rem", backgroundColor: "#e5e7eb", opacity: 0.3 }
               }
             },
             I
           )),
           /* @__PURE__ */ o("span", { style: { fontSize: "0.75rem", color: "var(--metakyc-text-muted, #9ca3af)", flexShrink: 0 }, children: [
-            pe + 1,
+            ge + 1,
             " / ",
             u
           ] })
@@ -12612,7 +12617,7 @@ const qa = ({
               type: "button",
               variant: "outline",
               onClick: () => {
-                ge(Ie), me({});
+                ye(Ie), me({});
               },
               disabled: O || m,
               children: d("common.previous")
@@ -12628,7 +12633,7 @@ const qa = ({
     /* @__PURE__ */ i(Ne, { children: /* @__PURE__ */ i(vt, { title: (s == null ? void 0 : s.title) || d("createCompany.title") }) }),
     /* @__PURE__ */ o(re, { children: [
       D && /* @__PURE__ */ i("div", { className: "mb-6 p-4 rounded-lg", style: {
-        backgroundColor: "color-mix(in srgb, var(--metakyc-danger, #ef4444) 10%, transparent)",
+        backgroundColor: "var(--metakyc-danger-bg, color-mix(in srgb, var(--metakyc-danger, #ef4444) 10%, transparent))",
         border: "1px solid color-mix(in srgb, var(--metakyc-danger, #ef4444) 30%, transparent)"
       }, children: /* @__PURE__ */ o("p", { className: "text-sm", style: { color: "var(--metakyc-danger, #ef4444)" }, children: [
         /* @__PURE__ */ i("strong", { children: d("common.errorPrefix") }),
@@ -13080,7 +13085,7 @@ export {
   Ki as minimalTheme,
   Wi as modernTheme,
   Ea as removeScript,
-  ke as resolveDisplayText,
+  pe as resolveDisplayText,
   Rr as saveApplicantId,
   zr as saveWorkflowState,
   Yi as themePresets,