@vpdev2/metakyc 1.0.86 → 1.0.87

package/dist/index.js

@@ -2028,7 +2028,12 @@ class Pr {
       "danger-bg": t.dangerBg,
       "success-bg": t.successBg,
       "warning-bg": t.warningBg,
-      "info-bg": t.infoBg
+      "info-bg": t.infoBg,
+      // Header/Footer overrides (optional)
+      "header-bg": t.headerBg,
+      "header-text": t.headerText,
+      "footer-bg": t.footerBg,
+      "footer-text": t.footerText
     };
     a != null && a.fontFamily && (n["font-family"] = a.fontFamily), a != null && a.headingFont && (n["heading-font"] = a.headingFont), a != null && a.fontSize && Object.entries(a.fontSize).forEach(([u, m]) => {
       n[`font-size-${u}`] = m;
@@ -7155,7 +7160,7 @@ function ie(e, t) {
   const r = Jr.exec(a);
   return r ? t(r[1]) : e;
 }
-const Yt = "1.0.86", Ri = Gt(null), di = `metakyc-translations-${Yt}-`, ea = ({
+const Yt = "1.0.87", Ri = Gt(null), di = `metakyc-translations-${Yt}-`, ea = ({
   locale: e,
   fetchTranslations: t,
   children: a
@@ -8130,6 +8135,8 @@ const ne = ({ children: e, className: t, style: a, ...r }) => /* @__PURE__ */ i(
       borderBottomWidth: "1px",
       borderBottomStyle: "solid",
       borderBottomColor: "var(--metakyc-border, #e5e7eb)",
+      backgroundColor: "var(--metakyc-header-bg, transparent)",
+      color: "var(--metakyc-header-text, inherit)",
       ...a
     },
     ...r,
@@ -8152,6 +8159,8 @@ const ne = ({ children: e, className: t, style: a, ...r }) => /* @__PURE__ */ i(
       borderTopWidth: "1px",
       borderTopStyle: "solid",
       borderTopColor: "var(--metakyc-border, #e5e7eb)",
+      backgroundColor: "var(--metakyc-footer-bg, transparent)",
+      color: "var(--metakyc-footer-text, inherit)",
       ...a
     },
     ...r,
@@ -11774,7 +11783,7 @@ const hi = ({
               borderRadius: "8px",
               border: "1px solid var(--metakyc-border, #e5e7eb)",
               backgroundColor: "var(--metakyc-surface, var(--metakyc-background, #ffffff))",
-              color: "var(--metakyc-text-secondary, #6b7280)",
+              color: "var(--metakyc-header-text, var(--metakyc-text-secondary, #6b7280))",
               fontSize: "13px",
               fontWeight: 500,
               cursor: "pointer",
@@ -11878,24 +11887,24 @@ const hi = ({
       "div",
       {
         className: "metakyc-header-title flex items-center text-xl font-bold",
-        style: { color: "var(--metakyc-text-primary, #111827)", justifyContent: "space-between" },
+        style: { color: "var(--metakyc-header-text, var(--metakyc-text-primary, #111827))", justifyContent: "space-between" },
         children: [
           /* @__PURE__ */ s("div", { className: "flex items-center", style: { minWidth: 0 }, children: [
             m && /* @__PURE__ */ i(Ga, { config: r.logo }),
             m && g && /* @__PURE__ */ i(
               "span",
               {
-                style: { fontSize: "1.5rem", fontWeight: 300, color: "var(--metakyc-text-muted, #9ca3af)", margin: "0 12px" },
+                style: { fontSize: "1.5rem", fontWeight: 300, color: "var(--metakyc-header-text, var(--metakyc-text-muted, #9ca3af))", margin: "0 12px" },
                 children: "|"
               }
             ),
-            g && /* @__PURE__ */ i("span", { style: { color: "var(--metakyc-text-primary, #111827)" }, children: d })
+            g && /* @__PURE__ */ i("span", { style: { color: "var(--metakyc-header-text, var(--metakyc-text-primary, #111827))" }, children: d })
           ] }),
           y && /* @__PURE__ */ i(Xa, {})
         ]
       }
     ),
-    u && /* @__PURE__ */ i("p", { className: "text-sm mt-1", style: { color: "var(--metakyc-text-secondary, #6b7280)" }, children: u })
+    u && /* @__PURE__ */ i("p", { className: "text-sm mt-1", style: { color: "var(--metakyc-header-text, var(--metakyc-text-secondary, #6b7280))" }, children: u })
   ] });
 }, Mi = Gt(null), ji = () => Qt(Mi);
 function It() {
@@ -14023,11 +14032,12 @@ const cn = ({
     const $ = y.filter((ge) => ge.visibility !== !1), R = $.findIndex((ge) => ge.order === g.order), P = R >= 0 ? R + 1 : 1, j = $.length, Z = j > 1 ? (R + 1) / j * 100 : 100;
     return /* @__PURE__ */ s("div", { className: "metakyc-progress-wrapper", style: {
       marginBottom: "24px",
-      backgroundColor: "var(--metakyc-surface, var(--metakyc-background, #ffffff))",
+      backgroundColor: "var(--metakyc-header-bg, var(--metakyc-surface, var(--metakyc-background, #ffffff)))",
       borderRadius: "0.75rem",
       border: "1px solid var(--metakyc-border, #e5e7eb)",
       padding: "1rem 1.5rem",
-      overflow: "hidden"
+      overflow: "hidden",
+      color: "var(--metakyc-header-text, inherit)"
     }, children: [
       /* @__PURE__ */ s("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between", marginBottom: "16px", gap: "8px", flexWrap: "wrap" }, children: [
         /* @__PURE__ */ i(Rt, {}),