@sawabona/forms 1.0.2 → 1.0.4

package/dist/sawabona-forms.es.js

@@ -1,296 +1,335 @@
-var H = Object.defineProperty, K = Object.defineProperties;
-var U = Object.getOwnPropertyDescriptors;
-var R = Object.getOwnPropertySymbols;
-var P = Object.prototype.hasOwnProperty, _ = Object.prototype.propertyIsEnumerable;
-var z = (e, i, r) => i in e ? H(e, i, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[i] = r, h = (e, i) => {
-  for (var r in i || (i = {}))
-    P.call(i, r) && z(e, r, i[r]);
-  if (R)
-    for (var r of R(i))
-      _.call(i, r) && z(e, r, i[r]);
+var M = Object.defineProperty, U = Object.defineProperties;
+var V = Object.getOwnPropertyDescriptors;
+var B = Object.getOwnPropertySymbols;
+var W = Object.prototype.hasOwnProperty, _ = Object.prototype.propertyIsEnumerable;
+var P = (e, n, r) => n in e ? M(e, n, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[n] = r, a = (e, n) => {
+  for (var r in n || (n = {}))
+    W.call(n, r) && P(e, r, n[r]);
+  if (B)
+    for (var r of B(n))
+      _.call(n, r) && P(e, r, n[r]);
   return e;
-}, g = (e, i) => K(e, U(i));
-var $ = (e) => typeof e == "symbol" ? e : e + "", D = (e, i) => {
+}, S = (e, n) => U(e, V(n));
+var D = (e) => typeof e == "symbol" ? e : e + "", K = (e, n) => {
   var r = {};
   for (var t in e)
-    P.call(e, t) && i.indexOf(t) < 0 && (r[t] = e[t]);
-  if (e != null && R)
-    for (var t of R(e))
-      i.indexOf(t) < 0 && _.call(e, t) && (r[t] = e[t]);
+    W.call(e, t) && n.indexOf(t) < 0 && (r[t] = e[t]);
+  if (e != null && B)
+    for (var t of B(e))
+      n.indexOf(t) < 0 && _.call(e, t) && (r[t] = e[t]);
   return r;
 };
-import { jsxs as u, jsx as n } from "react/jsx-runtime";
-import { useState as V, useMemo as W, useCallback as k, createContext as M, useContext as G, useRef as X, useEffect as B } from "react";
-import { motion as w, AnimatePresence as J } from "framer-motion";
-import { Check as O, Star as Y, ChevronLeft as Z, ChevronRight as q } from "lucide-react";
-function ee({ schema: e, onSubmit: i }) {
-  var N;
-  const [r, t] = V({
+import { jsxs as f, jsx as i } from "react/jsx-runtime";
+import { useState as G, useMemo as X, useCallback as $, createContext as Z, useContext as J, useRef as Y, useEffect as T } from "react";
+import { motion as b, AnimatePresence as q } from "framer-motion";
+import { Check as O, Star as ee, ChevronLeft as te, ChevronRight as re } from "lucide-react";
+function ne({ schema: e, onSubmit: n }) {
+  var d;
+  const [r, t] = G({
     answers: {},
-    currentStepId: ((N = e.questions[0]) == null ? void 0 : N.id) || "",
+    currentStepId: ((d = e.questions[0]) == null ? void 0 : d.id) || "",
     history: [],
     isSubmitting: !1,
     errors: {},
     isCompleted: !1
-  }), d = W(
-    () => e.questions.findIndex((a) => a.id === r.currentStepId),
+  }), l = X(
+    () => e.questions.findIndex((o) => o.id === r.currentStepId),
     [e.questions, r.currentStepId]
-  ), o = e.questions[d], p = k((a, s) => {
-    t((l) => g(h({}, l), {
-      answers: g(h({}, l.answers), {
-        [a]: s
+  ), p = e.questions[l], u = $((o, c) => {
+    t((m) => S(a({}, m), {
+      answers: S(a({}, m.answers), {
+        [o]: c
       }),
       // Clear error on modification
-      errors: g(h({}, l.errors), {
-        [a]: ""
+      errors: S(a({}, m.errors), {
+        [o]: ""
       })
     }));
-  }, []), c = k((a, s) => {
-    t((l) => {
-      if (s === null) {
-        const F = l.errors, { [a]: j } = F, b = D(F, [$(a)]);
-        return g(h({}, l), { errors: b });
+  }, []), x = $((o, c) => {
+    t((m) => {
+      if (c === null) {
+        const k = m.errors, { [o]: z } = k, L = K(k, [D(o)]);
+        return S(a({}, m), { errors: L });
       }
-      return g(h({}, l), {
-        errors: g(h({}, l.errors), { [a]: s })
+      return S(a({}, m), {
+        errors: S(a({}, m.errors), { [o]: c })
       });
     });
-  }, []), m = k(() => {
-    var l;
-    if (!o) return !0;
-    const a = r.answers[o.id], s = o.validation;
-    return s && s.required && (a === void 0 || a === "" || Array.isArray(a) && a.length === 0) ? (c(o.id, ((l = e.i18n) == null ? void 0 : l.required) || "This field is required"), !1) : !0;
-  }, [o, r.answers, c, e.i18n]), f = k((a) => {
-    const s = e.questions.findIndex((l) => l.id === a.id);
-    return s < e.questions.length - 1 ? e.questions[s + 1].id : "submit";
-  }, [e.questions]), x = k(() => {
-    if (!m()) return;
-    const a = f(o);
-    a === "submit" ? (t((s) => g(h({}, s), { isCompleted: !0 })), i == null || i(r.answers)) : t((s) => g(h({}, s), {
-      history: [...s.history, s.currentStepId],
-      currentStepId: a
+  }, []), g = $(() => {
+    var m;
+    if (!p) return !0;
+    const o = r.answers[p.id], c = p.validation;
+    return c && c.required && (o === void 0 || o === "" || Array.isArray(o) && o.length === 0) ? (x(p.id, ((m = e.i18n) == null ? void 0 : m.required) || "This field is required"), !1) : !0;
+  }, [p, r.answers, x, e.i18n]), h = $((o) => {
+    const c = e.questions.findIndex((m) => m.id === o.id);
+    return c < e.questions.length - 1 ? e.questions[c + 1].id : "submit";
+  }, [e.questions]), N = $(() => {
+    if (!g()) return;
+    const o = h(p);
+    o === "submit" ? (t((c) => S(a({}, c), { isCompleted: !0 })), n == null || n(r.answers)) : t((c) => S(a({}, c), {
+      history: [...c.history, c.currentStepId],
+      currentStepId: o
     }));
-  }, [o, r.answers, m, f, i]), v = k(() => {
+  }, [p, r.answers, g, h, n]), s = $(() => {
     if (r.history.length === 0) return;
-    const a = r.history[r.history.length - 1];
-    t((s) => g(h({}, s), {
-      history: s.history.slice(0, -1),
-      currentStepId: a
+    const o = r.history[r.history.length - 1];
+    t((c) => S(a({}, c), {
+      history: c.history.slice(0, -1),
+      currentStepId: o
     }));
-  }, [r.history]), C = k((a) => {
-    if (!e.questions.some((l) => l.id === a)) {
-      console.warn(`Step ${a} does not exist`);
+  }, [r.history]), v = $((o) => {
+    if (!e.questions.some((m) => m.id === o)) {
+      console.warn(`Step ${o} does not exist`);
       return;
     }
-    t((l) => g(h({}, l), {
-      history: [...l.history, l.currentStepId],
-      currentStepId: a
+    t((m) => S(a({}, m), {
+      history: [...m.history, m.currentStepId],
+      currentStepId: o
     }));
-  }, [e.questions]), I = k(() => {
-    var a;
+  }, [e.questions]), y = $(() => {
+    var o;
     t({
       answers: {},
-      currentStepId: ((a = e.questions[0]) == null ? void 0 : a.id) || "",
+      currentStepId: ((o = e.questions[0]) == null ? void 0 : o.id) || "",
       history: [],
       isSubmitting: !1,
       errors: {},
       isCompleted: !1
     });
   }, [e.questions]);
-  return g(h({}, r), {
-    setAnswer: p,
-    nextStep: x,
-    prevStep: v,
-    jumpToStep: C,
-    submitForm: () => i == null ? void 0 : i(r.answers),
-    resetForm: I,
-    registerError: c,
+  return S(a({}, r), {
+    setAnswer: u,
+    nextStep: N,
+    prevStep: s,
+    jumpToStep: v,
+    submitForm: () => n == null ? void 0 : n(r.answers),
+    resetForm: y,
+    registerError: x,
     // Helper to calculate progress
-    progress: d / e.questions.length * 100
+    progress: l / e.questions.length * 100
   });
 }
-const Q = M(void 0), L = () => {
-  const e = G(Q);
+const Q = Z(void 0), E = () => {
+  const e = J(Q);
   if (!e)
     throw new Error("useFormContext must be used within a FormProvider");
   return e;
 };
-function te({ question: e }) {
-  var N, a, s, l, F, j;
-  const { answers: i, setAnswer: r, nextStep: t, schema: d } = L(), o = i[e.id], p = o != null ? String(o) : "", c = X(null), m = d.questions[0].id === e.id, f = !d.disableAutoFocus || !m;
-  B(() => {
-    if (f) {
-      const b = setTimeout(() => {
-        var y;
-        (y = c.current) == null || y.focus();
+function ie(e, n, r) {
+  if (!e) return "";
+  const t = e.replace(/\D/g, "");
+  if (n === "phone")
+    return t.replace(/(\d{2})(\d)/, "($1) $2").replace(/(\d{4})(\d)/, "$1-$2").slice(0, 14);
+  if (n === "cellphone")
+    return t.replace(/(\d{2})(\d)/, "($1) $2").replace(/(\d{5})(\d)/, "$1-$2").slice(0, 15);
+  if (n === "cpf")
+    return t.replace(/(\d{3})(\d)/, "$1.$2").replace(/(\d{3})(\d)/, "$1.$2").replace(/(\d{3})(\d{1,2})/, "$1-$2").replace(/(-\d{2})\d+?$/, "$1");
+  if (n === "cnpj")
+    return t.replace(/(\d{2})(\d)/, "$1.$2").replace(/(\d{3})(\d)/, "$1.$2").replace(/(\d{3})(\d)/, "$1/$2").replace(/(\d{4})(\d)/, "$1-$2").replace(/(-\d{2})\d+?$/, "$1");
+  if (n === "cep")
+    return t.replace(/(\d{5})(\d)/, "$1-$2").slice(0, 9);
+  if (n === "custom" && r) {
+    let l = 0;
+    return r.replace(/[#X0]/g, () => t[l++] || "").replace(/[^0-9a-zA-Z]+$/, "");
+  }
+  return e;
+}
+function oe({ question: e }) {
+  var d, o, c, m, k, z, L, j;
+  const { answers: n, setAnswer: r, nextStep: t, schema: l } = E(), p = n[e.id], u = p != null ? String(p) : "", x = Y(null), g = l.questions[0].id === e.id, h = !l.disableAutoFocus || !g;
+  T(() => {
+    if (h) {
+      const C = setTimeout(() => {
+        var w;
+        (w = x.current) == null || w.focus();
       }, 500);
-      return () => clearTimeout(b);
+      return () => clearTimeout(C);
     }
-  }, [e.id, f]);
-  const x = (b) => {
-    var E;
-    let y = b.target.value;
-    const A = ((E = e.validation) == null ? void 0 : E.maxLength) || 2048;
-    if (y.length > A && (y = y.slice(0, A)), e.type === "number") {
-      const T = y === "" ? "" : parseFloat(y);
-      r(e.id, T);
+  }, [e.id, h]);
+  const N = (C) => {
+    var A, R, F;
+    let w = C.target.value;
+    ((A = e.validation) != null && A.maskType || (R = e.validation) != null && R.mask) && (w = ie(w, e.validation.maskType, e.validation.mask));
+    const I = ((F = e.validation) == null ? void 0 : F.maxLength) || 2048;
+    if (w.length > I && (w = w.slice(0, I)), e.type === "number") {
+      const H = w === "" ? "" : parseFloat(w);
+      r(e.id, H);
     } else
-      r(e.id, y);
-  }, v = () => {
-    var b, y, A, E, T;
-    if ((b = e.validation) != null && b.required && !p) return !1;
-    if (p) {
-      if ((y = e.validation) != null && y.minLength && p.length < e.validation.minLength || e.type === "email" && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(p)) return !1;
-      if ((A = e.validation) != null && A.pattern)
+      r(e.id, w);
+  }, s = () => {
+    var C, w, I, A, R;
+    if ((C = e.validation) != null && C.required && !u) return !1;
+    if (u) {
+      if ((w = e.validation) != null && w.minLength && u.length < e.validation.minLength || e.type === "email" && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(u)) return !1;
+      if ((I = e.validation) != null && I.pattern)
         try {
-          if (!new RegExp(e.validation.pattern).test(p)) return !1;
-        } catch (S) {
-          console.error("Invalid regex pattern in schema", S);
+          if (!new RegExp(e.validation.pattern).test(u)) return !1;
+        } catch (F) {
+          console.error("Invalid regex pattern in schema", F);
         }
       if (e.type === "number") {
-        const S = parseFloat(p);
-        if (!isNaN(S) && (((E = e.validation) == null ? void 0 : E.min) !== void 0 && S < e.validation.min || ((T = e.validation) == null ? void 0 : T.max) !== void 0 && S > e.validation.max))
+        const F = parseFloat(u);
+        if (!isNaN(F) && (((A = e.validation) == null ? void 0 : A.min) !== void 0 && F < e.validation.min || ((R = e.validation) == null ? void 0 : R.max) !== void 0 && F > e.validation.max))
           return !1;
       }
     }
     return !0;
-  }, C = (b) => {
-    if (b.key === "Enter" && !b.shiftKey) {
-      if (b.preventDefault(), !v()) {
-        const y = document.querySelector(".sawabona-form-container") || document.body;
-        y.classList.add("shake-animation"), setTimeout(() => y.classList.remove("shake-animation"), 500);
+  }, v = (C) => {
+    if (C.key === "Enter" && !C.shiftKey) {
+      if (C.preventDefault(), !s()) {
+        const w = document.querySelector(".sawabona-form-container") || document.body;
+        w.classList.add("shake-animation"), setTimeout(() => w.classList.remove("shake-animation"), 500);
         return;
       }
       t();
     }
   };
-  return /* @__PURE__ */ u("div", { className: "w-full relative group", children: [
-    /* @__PURE__ */ n(
+  return /* @__PURE__ */ f("div", { className: "w-full relative group", children: [
+    /* @__PURE__ */ i(
       "input",
       {
-        ref: c,
+        ref: x,
         type: e.type,
-        value: typeof p == "string" || typeof p == "number" ? p : "",
-        onChange: x,
-        onKeyDown: C,
+        value: typeof u == "string" || typeof u == "number" ? u : "",
+        onChange: N,
+        onKeyDown: v,
         placeholder: e.placeholder,
-        minLength: (N = e.validation) == null ? void 0 : N.minLength,
-        maxLength: ((a = e.validation) == null ? void 0 : a.maxLength) || 2048,
-        min: (s = e.validation) == null ? void 0 : s.min,
-        max: (l = e.validation) == null ? void 0 : l.max,
-        pattern: (F = e.validation) == null ? void 0 : F.pattern,
+        minLength: (d = e.validation) == null ? void 0 : d.minLength,
+        maxLength: ((o = e.validation) == null ? void 0 : o.maxLength) || 2048,
+        min: (c = e.validation) == null ? void 0 : c.min,
+        max: (m = e.validation) == null ? void 0 : m.max,
+        pattern: (k = e.validation) == null ? void 0 : k.pattern,
         className: `
                     w-full bg-transparent border-b-2 border-sw-text-secondary/20 
                     py-4 text-2xl md:text-3xl font-medium outline-none transition-colors
                     placeholder:text-sw-text-secondary/30
                     focus:border-sw-primary
                     font-sw-heading
-                `
+                `,
+        style: a(a({}, ((z = l.theme) == null ? void 0 : z.labelFont) && { fontFamily: "var(--font-sw-label)" }), ((L = l.theme) == null ? void 0 : L.labelFontSize) && { fontSize: "var(--size-sw-label)" })
       }
     ),
     void 0,
-    /* @__PURE__ */ n("p", { className: "text-sm opacity-50 mt-4", children: (e.type === "email" || e.type === "text" || e.type === "number" || e.type === "url") && (((j = d.i18n) == null ? void 0 : j.pressEnter) || "Press Enter to continue") })
+    /* @__PURE__ */ i("p", { className: "text-sm opacity-50 mt-4", children: (e.type === "email" || e.type === "text" || e.type === "number" || e.type === "url") && (((j = l.i18n) == null ? void 0 : j.pressEnter) || "Press Enter to continue") })
   ] });
 }
-function re({ question: e }) {
-  var c;
-  const { answers: i, setAnswer: r, nextStep: t } = L(), d = i[e.id] || "", o = (m) => {
-    r(e.id, m), setTimeout(() => t(), 400);
-  }, p = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
-  return B(() => {
-    const m = (f) => {
-      var C;
-      const x = f.key.toUpperCase(), v = p.indexOf(x);
-      v >= 0 && v < (((C = e.options) == null ? void 0 : C.length) || 0) && o(e.options[v].value);
+function ae({ question: e }) {
+  var N;
+  const { answers: n, setAnswer: r, nextStep: t, schema: l } = E(), p = e.type === "multi-select" || e.multiple, u = n[e.id], x = p ? Array.isArray(u) ? u : u !== void 0 ? [u] : [] : u || "", g = (s) => {
+    if (p) {
+      const v = x, y = v.includes(s);
+      let d;
+      y ? d = v.filter((o) => o !== s) : d = [...v, s], r(e.id, d);
+    } else
+      r(e.id, s), setTimeout(() => t(), 400);
+  }, h = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+  return T(() => {
+    const s = (v) => {
+      var o;
+      const y = v.key.toUpperCase(), d = h.indexOf(y);
+      d >= 0 && d < (((o = e.options) == null ? void 0 : o.length) || 0) && g(e.options[d].value);
     };
-    return window.addEventListener("keydown", m), () => window.removeEventListener("keydown", m);
-  }, [e.options, e.id]), /* @__PURE__ */ n("div", { className: "flex flex-col gap-3 w-full max-w-xl", children: (c = e.options) == null ? void 0 : c.map((m, f) => {
-    const x = Array.isArray(d) ? d.includes(m.value) : d === m.value;
-    return /* @__PURE__ */ u(
-      w.button,
+    return window.addEventListener("keydown", s), () => window.removeEventListener("keydown", s);
+  }, [e.options, e.id]), /* @__PURE__ */ i("div", { className: "flex flex-col gap-3 w-full max-w-xl", style: { gap: "var(--sw-option-gap, 0.75rem)" }, children: (N = e.options) == null ? void 0 : N.map((s, v) => {
+    var d, o, c, m, k, z;
+    const y = p ? x.includes(s.value) : x === s.value;
+    return /* @__PURE__ */ f(
+      b.button,
       {
         initial: { opacity: 0, y: 10 },
         animate: { opacity: 1, y: 0 },
-        transition: { delay: f * 0.05 },
-        onClick: () => o(m.value),
+        transition: { delay: v * 0.05 },
+        onClick: () => g(s.value),
         className: `
                             w-full text-left p-4 rounded-lg border-2 transition-all duration-200
                             flex items-center justify-between group
-                            ${x ? "border-sw-primary bg-sw-primary/5 text-sw-primary" : "border-sw-text-secondary/10 hover:border-sw-primary/50 hover:bg-sw-primary/5"}
+                            ${y ? "border-sw-primary bg-sw-primary/5 text-sw-primary" : "border-sw-text-secondary/10 hover:border-sw-primary/50 hover:bg-sw-primary/5"}
                         `,
+        style: a({
+          padding: "var(--sw-option-padding, 1rem)",
+          borderRadius: "var(--sw-option-radius, 0.5rem)",
+          borderWidth: "var(--sw-option-border, 2px)"
+        }, y && ((d = l.theme) != null && d.optionActiveColor) ? {
+          borderColor: "var(--sw-option-active)"
+        } : {}),
         children: [
-          /* @__PURE__ */ u("span", { className: "text-lg font-medium flex items-center gap-3", children: [
-            /* @__PURE__ */ n("span", { className: `
-                                w-6 h-6 rounded-full border-2 flex items-center justify-center transition-colors
-                                ${x ? "border-sw-primary bg-sw-primary" : "border-sw-text-secondary/30 group-hover:border-sw-primary/50"}
-                            `, children: x && /* @__PURE__ */ n(O, { size: 14, className: "text-sw-background" }) }),
-            m.label
+          /* @__PURE__ */ f("span", { className: "text-lg font-medium flex items-center gap-3", style: a(a({}, ((o = l.theme) == null ? void 0 : o.labelFont) && { fontFamily: "var(--font-sw-label)" }), ((c = l.theme) == null ? void 0 : c.labelFontSize) && { fontSize: "var(--size-sw-label)" }), children: [
+            /* @__PURE__ */ i("span", { className: `
+                                flex-shrink-0 w-6 h-6 rounded-full border-2 flex items-center justify-center transition-colors
+                                ${y ? "border-sw-primary bg-sw-primary" : "border-sw-text-secondary/30 group-hover:border-sw-primary/50"}
+                            `, style: a({}, y && ((m = l.theme) != null && m.optionActiveColor) ? {
+              borderColor: "var(--sw-option-active)",
+              backgroundColor: "var(--sw-option-active)"
+            } : {}), children: y && /* @__PURE__ */ i(O, { size: 14, className: "text-sw-background" }) }),
+            s.label
           ] }),
-          /* @__PURE__ */ u("span", { className: "opacity-0 group-hover:opacity-100 transition-opacity text-xs font-mono uppercase tracking-widest text-sw-text-secondary/50", children: [
-            "Select ",
-            /* @__PURE__ */ u("span", { className: "hidden md:inline", children: [
+          !((k = l.i18n) != null && k.hideSelectText) && /* @__PURE__ */ f("span", { className: "opacity-0 group-hover:opacity-100 transition-opacity text-xs font-mono uppercase tracking-widest text-sw-text-secondary/50", children: [
+            ((z = l.i18n) == null ? void 0 : z.selectKey) || "Select",
+            " ",
+            /* @__PURE__ */ f("span", { className: "hidden md:inline", children: [
               "Key ",
-              f + 1
+              v + 1
             ] })
           ] })
         ]
       },
-      String(m.value)
+      String(s.value)
     );
   }) });
 }
-function ne({ question: e }) {
-  var o;
-  const { answers: i, setAnswer: r } = L(), t = i[e.id] || 0, d = Math.min(((o = e.validation) == null ? void 0 : o.max) || 5, 20);
-  return /* @__PURE__ */ u("div", { className: "flex flex-col gap-6", children: [
-    /* @__PURE__ */ n("div", { className: "flex gap-4 flex-wrap", children: Array.from({ length: d }).map((p, c) => {
-      const m = c + 1, f = m <= t;
-      return /* @__PURE__ */ n(
-        w.button,
+function le({ question: e }) {
+  var p;
+  const { answers: n, setAnswer: r } = E(), t = n[e.id] || 0, l = Math.min(((p = e.validation) == null ? void 0 : p.max) || 5, 20);
+  return /* @__PURE__ */ f("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ i("div", { className: "flex gap-4 flex-wrap", children: Array.from({ length: l }).map((u, x) => {
+      const g = x + 1, h = g <= t;
+      return /* @__PURE__ */ i(
+        b.button,
         {
           initial: { opacity: 0, scale: 0 },
           animate: { opacity: 1, scale: 1 },
-          transition: { delay: c * 0.05 },
-          onClick: () => r(e.id, m),
+          transition: { delay: x * 0.05 },
+          onClick: () => r(e.id, g),
           whileHover: { scale: 1.2, rotate: 5 },
           whileTap: { scale: 0.9 },
           className: "focus:outline-none",
-          children: /* @__PURE__ */ n(
-            Y,
+          children: /* @__PURE__ */ i(
+            ee,
             {
-              className: `w-12 h-12 md:w-16 md:h-16 transition-all duration-300 ${f ? "fill-yellow-400 text-yellow-400 drop-shadow-[0_0_15px_rgba(250,204,21,0.4)]" : "text-zinc-600 hover:text-yellow-400/50"}`,
+              className: `w-12 h-12 md:w-16 md:h-16 transition-all duration-300 ${h ? "fill-yellow-400 text-yellow-400 drop-shadow-[0_0_15px_rgba(250,204,21,0.4)]" : "text-zinc-600 hover:text-yellow-400/50"}`,
               strokeWidth: 1.5
             }
           )
         },
-        c
+        x
       );
     }) }),
-    /* @__PURE__ */ u("div", { className: "flex justify-between w-full max-w-[300px] md:max-w-[400px] px-2 items-center", children: [
-      /* @__PURE__ */ n("span", { className: "text-sm md:text-base font-medium text-sw-text-secondary/50 uppercase tracking-wide", children: e.minLabel || "Poor" }),
-      /* @__PURE__ */ n(
-        w.div,
+    /* @__PURE__ */ f("div", { className: "flex justify-between w-full max-w-[300px] md:max-w-[400px] px-2 items-center", children: [
+      /* @__PURE__ */ i("span", { className: "text-sm md:text-base font-medium text-sw-text-secondary/50 uppercase tracking-wide", children: e.minLabel || "Poor" }),
+      /* @__PURE__ */ i(
+        b.div,
         {
           initial: { opacity: 0, scale: 0.8 },
           animate: { opacity: t ? 1 : 0, scale: t ? 1 : 0.8 },
           className: "font-bold text-primary text-xl",
-          children: t ? `${t} / ${d}` : ""
+          children: t ? `${t} / ${l}` : ""
         }
       ),
-      /* @__PURE__ */ n("span", { className: "text-sm md:text-base font-medium text-muted-foreground uppercase tracking-wide", children: e.maxLabel || "Excellent" })
+      /* @__PURE__ */ i("span", { className: "text-sm md:text-base font-medium text-muted-foreground uppercase tracking-wide", children: e.maxLabel || "Excellent" })
     ] })
   ] });
 }
-function ie({ question: e }) {
-  const { schema: i } = L(), r = i.questions.findIndex((c) => c.id === e.id) + 1, t = i.questions.length, d = {
+function se({ question: e }) {
+  var x, g, h, N;
+  const { schema: n } = E(), r = n.questions.findIndex((s) => s.id === e.id) + 1, t = n.questions.length, l = {
     hidden: { opacity: 0, y: 20 },
     visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: [0.22, 1, 0.36, 1] } }
-  }, o = (c) => c && c.replace(/\{\{(\w+)\}\}/g, (m, f) => {
-    const x = p.answers[f];
-    return x != null ? String(x) : "";
-  }), p = L();
-  return /* @__PURE__ */ u(
-    w.div,
+  }, p = (s) => s && s.replace(/\{\{(\w+)\}\}/g, (v, y) => {
+    const d = u.answers[y];
+    return d != null ? String(d) : "";
+  }), u = E();
+  return /* @__PURE__ */ f(
+    b.div,
     {
       className: "flex flex-col gap-8 w-full max-w-4xl mx-auto",
       initial: "hidden",
@@ -299,34 +338,36 @@ function ie({ question: e }) {
         visible: { transition: { staggerChildren: 0.1 } }
       },
       children: [
-        /* @__PURE__ */ u("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ n(w.div, { variants: d, className: "flex gap-4 items-baseline", children: /* @__PURE__ */ u("span", { className: "flex items-center gap-2 text-sm md:text-base font-medium text-sw-primary/90 bg-sw-primary/10 px-3 py-1 rounded-full border border-sw-primary/20 backdrop-blur-sm", children: [
-            /* @__PURE__ */ n("span", { children: r }),
-            /* @__PURE__ */ n("span", { className: "opacity-40 text-xs", children: "/" }),
-            /* @__PURE__ */ n("span", { className: "opacity-60", children: t })
+        /* @__PURE__ */ f("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ i(b.div, { variants: l, className: "flex gap-4 items-baseline", children: /* @__PURE__ */ f("span", { className: "flex items-center gap-2 text-sm md:text-base font-medium text-sw-primary/90 bg-sw-primary/10 px-3 py-1 rounded-full border border-sw-primary/20 backdrop-blur-sm", children: [
+            /* @__PURE__ */ i("span", { children: r }),
+            /* @__PURE__ */ i("span", { className: "opacity-40 text-xs", children: "/" }),
+            /* @__PURE__ */ i("span", { className: "opacity-60", children: t })
           ] }) }),
-          /* @__PURE__ */ u(
-            w.h2,
+          /* @__PURE__ */ f(
+            b.h2,
             {
-              variants: d,
+              variants: l,
               className: "text-3xl md:text-4xl lg:text-5xl font-bold leading-tight tracking-tight text-pretty mt-2 font-sw-heading",
+              style: a(a({}, ((x = n.theme) == null ? void 0 : x.titleFont) && { fontFamily: "var(--font-sw-title)" }), ((g = n.theme) == null ? void 0 : g.titleFontSize) && { fontSize: "var(--size-sw-title)" }),
               children: [
-                o(e.title),
+                p(e.title),
                 " ",
-                /* @__PURE__ */ n("span", { className: "text-sw-primary", children: "*" })
+                /* @__PURE__ */ i("span", { className: "text-sw-primary", children: "*" })
               ]
             }
           ),
-          e.description && /* @__PURE__ */ n(
-            w.p,
+          e.description && /* @__PURE__ */ i(
+            b.p,
             {
-              variants: d,
+              variants: l,
               className: "text-lg md:text-xl text-muted-foreground font-normal leading-relaxed max-w-2xl mt-2",
-              children: o(e.description)
+              style: a(a({}, ((h = n.theme) == null ? void 0 : h.descriptionFont) && { fontFamily: "var(--font-sw-description)" }), ((N = n.theme) == null ? void 0 : N.descriptionFontSize) && { fontSize: "var(--size-sw-description)" }),
+              children: p(e.description)
             }
           )
         ] }),
-        /* @__PURE__ */ n(w.div, { variants: d, className: "w-full mt-6", children: e.type === "text" || e.type === "email" || e.type === "number" || e.type === "url" ? /* @__PURE__ */ n(te, { question: e }) : e.type === "select" ? /* @__PURE__ */ n(re, { question: e }) : e.type === "rating" ? /* @__PURE__ */ n(ne, { question: e }) : /* @__PURE__ */ u("div", { className: "p-4 bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-200 rounded", children: [
+        /* @__PURE__ */ i(b.div, { variants: l, className: "w-full mt-6", children: e.type === "text" || e.type === "email" || e.type === "number" || e.type === "url" ? /* @__PURE__ */ i(oe, { question: e }) : e.type === "select" || e.type === "multi-select" ? /* @__PURE__ */ i(ae, { question: e }) : e.type === "rating" ? /* @__PURE__ */ i(le, { question: e }) : /* @__PURE__ */ f("div", { className: "p-4 bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-200 rounded", children: [
           "Unsupported question type: ",
           e.type,
           " (ID: ",
@@ -337,7 +378,7 @@ function ie({ question: e }) {
     }
   );
 }
-const ae = {
+const de = {
   next: "Next",
   back: "Back",
   submit: "Submit",
@@ -345,16 +386,16 @@ const ae = {
   optional: "Optional",
   stepInfo: "Question {{current}} of {{total}}"
 };
-function me({ schema: e, onSubmit: i }) {
-  var I;
-  const r = ee({ schema: e, onSubmit: i }), t = e.theme || {
+function xe({ schema: e, onSubmit: n }) {
+  var y;
+  const r = ne({ schema: e, onSubmit: n }), t = e.theme || {
     backgroundColor: "#ffffff",
     textColor: "#000000",
     // Start with generic defaults, override in usage
     primaryColor: "#000000",
     borderRadius: "8px"
     // fontFamily removed to allow inheritance
-  }, d = h(h({}, ae), e.i18n), o = {
+  }, l = a(a({}, de), e.i18n), p = a(a(a(a(a(a(a(a(a(a(a({
     backgroundColor: t.backgroundColor,
     color: t.textColor,
     fontFamily: t.fontFamily,
@@ -365,91 +406,91 @@ function me({ schema: e, onSubmit: i }) {
     "--color-sw-text-secondary": t.textColor,
     "--font-sw-heading": t.fontFamily || "inherit",
     "--font-sw-body": t.fontFamily || "inherit"
-  }, p = t.buttonVariant === "outline", c = {
-    backgroundColor: p ? "transparent" : t.primaryColor,
-    color: p ? t.primaryColor : t.textColor,
-    border: p ? `2px solid ${t.primaryColor}` : "none",
+  }, t.titleFont && { "--font-sw-title": t.titleFont }), t.descriptionFont && { "--font-sw-description": t.descriptionFont }), t.labelFont && { "--font-sw-label": t.labelFont }), t.titleFontSize && { "--size-sw-title": t.titleFontSize }), t.descriptionFontSize && { "--size-sw-description": t.descriptionFontSize }), t.labelFontSize && { "--size-sw-label": t.labelFontSize }), t.optionPadding && { "--sw-option-padding": t.optionPadding }), t.optionBorderRadius && { "--sw-option-radius": t.optionBorderRadius }), t.optionBorderWidth && { "--sw-option-border": t.optionBorderWidth }), t.optionGap && { "--sw-option-gap": t.optionGap }), t.optionActiveColor && { "--sw-option-active": t.optionActiveColor }), u = t.buttonVariant === "outline", x = {
+    backgroundColor: u ? "transparent" : t.primaryColor,
+    color: u ? t.primaryColor : t.textColor,
+    border: u ? `2px solid ${t.primaryColor}` : "none",
     borderRadius: t.borderRadius || "8px",
     fontWeight: 600
-  }, m = {
+  }, g = {
     color: t.primaryColor,
     borderRadius: t.borderRadius || "8px",
     fontWeight: 600
-  }, { autoReload: f, reloadDelay: x = 3e3 } = e;
-  if (B(() => {
-    if (r.isCompleted && f) {
-      const N = setTimeout(() => {
+  }, { autoReload: h, reloadDelay: N = 3e3 } = e;
+  if (T(() => {
+    if (r.isCompleted && h) {
+      const d = setTimeout(() => {
         r.resetForm();
-      }, x);
-      return () => clearTimeout(N);
+      }, N);
+      return () => clearTimeout(d);
     }
-  }, [r.isCompleted, f, x, r.resetForm]), r.isCompleted)
-    return /* @__PURE__ */ u(
+  }, [r.isCompleted, h, N, r.resetForm]), r.isCompleted)
+    return /* @__PURE__ */ f(
       "div",
       {
         className: "flex flex-col items-center justify-center h-full w-full p-8 text-center relative overflow-hidden",
-        style: o,
+        style: p,
         children: [
-          f && /* @__PURE__ */ n(
-            w.div,
+          h && /* @__PURE__ */ i(
+            b.div,
             {
               initial: { width: "0%" },
               animate: { width: "100%" },
-              transition: { duration: x / 1e3, ease: "linear" },
+              transition: { duration: N / 1e3, ease: "linear" },
               className: "absolute top-0 left-0 h-1 bg-green-500 z-50"
             }
           ),
-          /* @__PURE__ */ u(
-            w.div,
+          /* @__PURE__ */ f(
+            b.div,
             {
               initial: { scale: 0.9, opacity: 0, y: 20 },
               animate: { scale: 1, opacity: 1, y: 0 },
               transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] },
               className: "flex flex-col items-center",
               children: [
-                /* @__PURE__ */ n("div", { className: "mb-6 p-4 rounded-full bg-green-500/20 text-green-500 w-24 h-24 flex items-center justify-center", children: /* @__PURE__ */ n(O, { size: 48 }) }),
-                /* @__PURE__ */ n("h1", { className: "text-4xl md:text-5xl font-bold mb-4 tracking-tight", children: "Obrigado!" }),
-                /* @__PURE__ */ n("p", { className: "text-xl opacity-70 max-w-md leading-relaxed", children: "Suas respostas foram enviadas com sucesso." })
+                /* @__PURE__ */ i("div", { className: "mb-6 p-4 rounded-full bg-green-500/20 text-green-500 w-24 h-24 flex items-center justify-center", children: /* @__PURE__ */ i(O, { size: 48 }) }),
+                /* @__PURE__ */ i("h1", { className: "text-4xl md:text-5xl font-bold mb-4 tracking-tight", children: "Obrigado!" }),
+                /* @__PURE__ */ i("p", { className: "text-xl opacity-70 max-w-md leading-relaxed", children: "Suas respostas foram enviadas com sucesso." })
               ]
             }
           )
         ]
       }
     );
-  const v = e.questions.find((N) => N.id === r.currentStepId), C = (e.questions.findIndex((N) => N.id === r.currentStepId) + 1) / e.questions.length * 100;
-  return /* @__PURE__ */ n(Q.Provider, { value: g(h({}, r), { schema: e }), children: /* @__PURE__ */ u(
+  const s = e.questions.find((d) => d.id === r.currentStepId), v = (e.questions.findIndex((d) => d.id === r.currentStepId) + 1) / e.questions.length * 100;
+  return /* @__PURE__ */ i(Q.Provider, { value: S(a({}, r), { schema: e }), children: /* @__PURE__ */ f(
     "div",
     {
       className: "w-full h-full flex flex-col relative overflow-hidden transition-colors duration-700",
-      style: o,
+      style: p,
       children: [
-        /* @__PURE__ */ u("div", { className: "absolute top-0 left-0 w-full h-1 z-50", children: [
-          /* @__PURE__ */ n("div", { className: "absolute top-0 left-0 w-full h-full bg-current opacity-10" }),
-          /* @__PURE__ */ n(
-            w.div,
+        /* @__PURE__ */ f("div", { className: "absolute top-0 left-0 w-full h-1 z-50", children: [
+          /* @__PURE__ */ i("div", { className: "absolute top-0 left-0 w-full h-full bg-current opacity-10" }),
+          /* @__PURE__ */ i(
+            b.div,
             {
               className: "h-full relative z-10",
               initial: { width: 0 },
-              animate: { width: `${C}%` },
+              animate: { width: `${v}%` },
               transition: { duration: 0.5, ease: "easeInOut" },
               style: { backgroundColor: t.primaryColor }
             }
           )
         ] }),
-        /* @__PURE__ */ n("div", { className: "flex-1 flex flex-col items-center justify-center p-6 md:p-12 w-full max-w-5xl mx-auto z-10", children: /* @__PURE__ */ n(J, { mode: "wait", children: v && /* @__PURE__ */ n(
-          w.div,
+        /* @__PURE__ */ i("div", { className: "flex-1 flex flex-col items-center justify-center relative w-full pt-10 pb-6 px-6 md:px-12 z-10 overflow-y-auto", children: /* @__PURE__ */ i("div", { className: "w-full max-w-5xl mx-auto my-auto flex flex-col justify-center", children: /* @__PURE__ */ i(q, { mode: "wait", children: s && /* @__PURE__ */ i(
+          b.div,
           {
             initial: { opacity: 0, y: 40 },
             animate: { opacity: 1, y: 0 },
             exit: { opacity: 0, y: -40 },
             transition: { duration: 0.5, ease: [0.22, 1, 0.36, 1] },
-            className: "w-full",
-            children: /* @__PURE__ */ n(ie, { question: v })
+            className: "w-full py-8",
+            children: /* @__PURE__ */ i(se, { question: s })
           },
-          v.id
-        ) }) }),
-        /* @__PURE__ */ u("div", { className: "w-full px-6 pt-6 pb-8 md:p-10 flex flex-col md:flex-row justify-between items-center z-20 gap-4", children: [
-          t.showPoweredBy !== !1 && /* @__PURE__ */ u(
+          s.id
+        ) }) }) }),
+        /* @__PURE__ */ f("div", { className: "w-full px-6 pt-6 pb-8 md:p-10 flex flex-col md:flex-row justify-between items-center z-20 gap-4", children: [
+          t.showPoweredBy !== !1 && /* @__PURE__ */ f(
             "a",
             {
               href: t.poweredByUrl || "#",
@@ -457,42 +498,42 @@ function me({ schema: e, onSubmit: i }) {
               rel: t.poweredByUrl ? "noopener noreferrer" : void 0,
               className: "order-3 md:order-1 group flex items-center gap-2 px-3 py-1.5 rounded-md border border-white/10 bg-black/20 hover:border-sw-primary/50 hover:bg-black/40 transition-all duration-300 cursor-pointer no-underline backdrop-blur-sm",
               children: [
-                /* @__PURE__ */ n("span", { className: "text-[10px] md:text-xs font-mono font-medium tracking-[0.2em] uppercase text-muted-foreground group-hover:text-muted-foreground/80 transition-colors", children: "Powered By" }),
-                /* @__PURE__ */ n(
+                /* @__PURE__ */ i("span", { className: "text-[10px] md:text-xs font-mono font-medium tracking-[0.2em] uppercase text-muted-foreground group-hover:text-muted-foreground/80 transition-colors", children: "Powered By" }),
+                /* @__PURE__ */ i(
                   "span",
                   {
                     className: "text-[10px] md:text-xs font-mono font-bold tracking-[0.2em] uppercase transition-colors shadow-sw-primary",
                     style: { color: t.brandColor || t.primaryColor },
-                    children: ((I = t.poweredBy) == null ? void 0 : I.replace("Powered by ", "")) || "SAWABONA TECH"
+                    children: ((y = t.poweredBy) == null ? void 0 : y.replace("Powered by ", "")) || "SAWABONA TECH"
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ u("div", { className: "flex items-center gap-4 order-2 md:order-3 ml-auto", children: [
-            /* @__PURE__ */ n(
-              w.button,
+          /* @__PURE__ */ f("div", { className: "flex items-center gap-4 order-2 md:order-3 ml-auto", children: [
+            /* @__PURE__ */ i(
+              b.button,
               {
                 onClick: r.prevStep,
                 disabled: r.history.length === 0,
                 whileHover: { scale: 1.05 },
                 whileTap: { scale: 0.95 },
                 className: "w-12 h-12 md:w-14 md:h-14 flex items-center justify-center disabled:opacity-0 disabled:pointer-events-none transition-all hover:bg-white/5 rounded-full",
-                style: m,
-                children: /* @__PURE__ */ n(Z, { size: 24 })
+                style: g,
+                children: /* @__PURE__ */ i(te, { size: 24 })
               }
             ),
-            /* @__PURE__ */ u(
-              w.button,
+            /* @__PURE__ */ f(
+              b.button,
               {
                 onClick: r.nextStep,
                 whileHover: { scale: 1.02 },
                 whileTap: { scale: 0.98 },
                 className: "px-8 py-3 md:px-10 md:py-4 text-lg font-bold shadow-2xl flex items-center gap-3 transition-all rounded-lg",
-                style: c,
+                style: x,
                 children: [
-                  /* @__PURE__ */ n("span", { children: r.currentStepId === e.questions[e.questions.length - 1].id ? t.submitText || d.submit : d.next }),
-                  r.currentStepId !== e.questions[e.questions.length - 1].id && /* @__PURE__ */ n(q, { size: 20, strokeWidth: 3 })
+                  /* @__PURE__ */ i("span", { children: r.currentStepId === e.questions[e.questions.length - 1].id ? t.submitText || l.submit : l.next }),
+                  r.currentStepId !== e.questions[e.questions.length - 1].id && /* @__PURE__ */ i(re, { size: 20, strokeWidth: 3 })
                 ]
               }
             )
@@ -503,5 +544,5 @@ function me({ schema: e, onSubmit: i }) {
   ) });
 }
 export {
-  me as FormRenderer
+  xe as FormRenderer
 };