reactaform 1.9.0 → 1.9.2

package/dist/reactaform.es.js

@@ -1,8 +1,8 @@
 import { jsx as p, jsxs as D, Fragment as Ie } from "react/jsx-runtime";
 import * as l from "react";
-import { createContext as ot, useContext as it, useRef as pe, useEffect as Ue, useCallback as ge } from "react";
+import { createContext as it, useContext as st, useRef as pe, useEffect as Ue, useCallback as ge } from "react";
 import * as de from "react-dom";
-const st = `/* ReactaForm CSS Custom Properties (CSS Variables) */\r
+const ct = `/* ReactaForm CSS Custom Properties (CSS Variables) */\r
 \r
 /* Default Light Theme */\r
 :root {\r
@@ -65,7 +65,7 @@ const st = `/* ReactaForm CSS Custom Properties (CSS Variables) */\r
   --reactaform-button-bg: var(--reactaform-success-color);\r
   --reactaform-button-text: #ffffff;\r
   --reactaform-button-padding: var(--reactaform-space) 12px;\r
-  --reactaform-button-border-radius: var(--reactaform-border-radius);\r
+  --reactaform-button-border-radius: 6px;\r
   --reactaform-button-font-size: 14px;\r
   --reactaform-button-font-weight: var(--reactaform-font-weight);\r
   --reactaform-button-hover-opacity: 0.9;\r
@@ -200,6 +200,15 @@ const st = `/* ReactaForm CSS Custom Properties (CSS Variables) */\r
   user-select: none;\r
 }\r
 \r
+/* Description (UI-only display text) */\r
+.reactaform-description {\r
+  font-size: var(--reactaform-font-size, 14px);\r
+  font-weight: var(--reactaform-font-weight, 500);\r
+  margin: var(--reactaform-space, 8px) 0;\r
+  color: var(--reactaform-text-color, #000000);\r
+  user-select: none;\r
+}\r
+\r
 /* Ensure row layout labels are left-aligned */\r
 \r
 \r
@@ -292,7 +301,7 @@ const st = `/* ReactaForm CSS Custom Properties (CSS Variables) */\r
   background-color: var(--reactaform-button-bg, var(--reactaform-success-color, #4CAF50));\r
   color: var(--reactaform-button-text, var(--reactaform-text-color, #000000));\r
   padding: var(--reactaform-button-padding);\r
-  border-radius: var(--reactaform-button-border-radius);\r
+  border-radius: var(--reactaform-button-border-radius, 6px);\r
   font-size: var(--reactaform-button-font-size);\r
   font-weight: var(--reactaform-button-font-weight);\r
   box-shadow: var(--reactaform-button-shadow);\r
@@ -300,10 +309,15 @@ const st = `/* ReactaForm CSS Custom Properties (CSS Variables) */\r
   border: none;\r
   cursor: pointer;\r
   transition: opacity 0.2s ease;\r
+  width: 100%;\r
+  display: flex;\r
+  justify-content: center;\r
+  align-items: center;\r
 }\r
 \r
 .reactaform-button:hover:not(:disabled) {\r
   opacity: var(--reactaform-button-hover-opacity);\r
+  background-color: var(--reactaform-button-bg-hover, #0056b3);\r
 }\r
 \r
 .reactaform-button:disabled {\r
@@ -380,8 +394,8 @@ const st = `/* ReactaForm CSS Custom Properties (CSS Variables) */\r
   \r
   \r
 }\r
-`, Ee = ot(void 0), H = () => {
-  const e = it(Ee);
+`, Ee = it(void 0), B = () => {
+  const e = st(Ee);
   if (!e)
     throw new Error("❌ useReactaFormContext must be used within a <ReactaFormProvider>");
   return e;
@@ -432,30 +446,30 @@ class ne {
     return n !== void 0 ? n : t;
   }
 }
-const ar = typeof process < "u" && process.env.NODE_ENV === "test";
-function ct(e, r = 300, t) {
-  const n = pe(), a = pe(e), o = pe(null), c = t?.leading === !0, s = t?.trailing !== !1;
+const or = typeof process < "u" && process.env.NODE_ENV === "test";
+function lt(e, r = 300, t) {
+  const n = pe(), o = pe(e), a = pe(null), c = t?.leading === !0, s = t?.trailing !== !1;
   Ue(() => {
-    a.current = e;
+    o.current = e;
   }, [e]), Ue(() => () => {
     n.current && clearTimeout(n.current);
   }, []);
   const i = (f) => {
-    a.current(...f);
+    o.current(...f);
   }, d = ge(() => {
-    n.current && (clearTimeout(n.current), n.current = void 0), o.current = null;
+    n.current && (clearTimeout(n.current), n.current = void 0), a.current = null;
   }, []), m = ge(() => {
-    n.current && (clearTimeout(n.current), n.current = void 0), s && o.current && (i(o.current), o.current = null);
+    n.current && (clearTimeout(n.current), n.current = void 0), s && a.current && (i(a.current), a.current = null);
   }, [s]);
   return { callback: ge(
     (...f) => {
-      if (ar) {
+      if (or) {
         i(f);
         return;
       }
       const b = c && !n.current;
-      o.current = f, b && i(f), n.current && clearTimeout(n.current), n.current = setTimeout(() => {
-        n.current = void 0, s && o.current && (i(o.current), o.current = null);
+      a.current = f, b && i(f), n.current && clearTimeout(n.current), n.current = setTimeout(() => {
+        n.current = void 0, s && a.current && (i(a.current), a.current = null);
       }, r);
     },
     [c, s, r]
@@ -469,33 +483,34 @@ const V = {
   inputNumber: "reactaform-input--number",
   inputSelect: "reactaform-select",
   rangeInput: "reactaform-input--range",
-  button: "reactaform-button"
+  button: "reactaform-button",
+  description: "reactaform-description"
 }, U = (...e) => {
   const r = [];
   for (const t of e)
-    t && (typeof t == "string" ? r.push(t) : typeof t == "object" && Object.entries(t).forEach(([n, a]) => {
-      a && r.push(n);
+    t && (typeof t == "string" ? r.push(t) : typeof t == "object" && Object.entries(t).forEach(([n, o]) => {
+      o && r.push(n);
     }));
   return r.join(" ");
 };
 function ie(e) {
   return e.toLowerCase().includes("dark");
 }
-function lt(e) {
+function ut(e) {
   if (!e) return !1;
   const r = e.trim();
-  let t = 0, n = 0, a = 0;
+  let t = 0, n = 0, o = 0;
   if (r.startsWith("#")) {
     const c = r.substring(1);
-    c.length === 3 || c.length === 4 ? (t = parseInt(c[0] + c[0], 16), n = parseInt(c[1] + c[1], 16), a = parseInt(c[2] + c[2], 16)) : (c.length === 6 || c.length === 8) && (t = parseInt(c.substring(0, 2), 16), n = parseInt(c.substring(2, 4), 16), a = parseInt(c.substring(4, 6), 16));
+    c.length === 3 || c.length === 4 ? (t = parseInt(c[0] + c[0], 16), n = parseInt(c[1] + c[1], 16), o = parseInt(c[2] + c[2], 16)) : (c.length === 6 || c.length === 8) && (t = parseInt(c.substring(0, 2), 16), n = parseInt(c.substring(2, 4), 16), o = parseInt(c.substring(4, 6), 16));
   } else if (r.startsWith("rgb")) {
     const c = r.match(/\d+(\.\d+)?/g);
-    c && c.length >= 3 && (t = Math.min(255, Math.max(0, parseFloat(c[0]))), n = Math.min(255, Math.max(0, parseFloat(c[1]))), a = Math.min(255, Math.max(0, parseFloat(c[2]))));
+    c && c.length >= 3 && (t = Math.min(255, Math.max(0, parseFloat(c[0]))), n = Math.min(255, Math.max(0, parseFloat(c[1]))), o = Math.min(255, Math.max(0, parseFloat(c[2]))));
   } else
     return !1;
-  return (t * 299 + n * 587 + a * 114) / 1e3 < 128;
+  return (t * 299 + n * 587 + o * 114) / 1e3 < 128;
 }
-const ut = () => /* @__PURE__ */ D(
+const mt = () => /* @__PURE__ */ D(
   "svg",
   {
     width: "1em",
@@ -511,13 +526,13 @@ const ut = () => /* @__PURE__ */ D(
       /* @__PURE__ */ p("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
     ]
   }
-), mt = ({ content: e, size: r = "medium", animation: t = !0 }) => {
-  const { t: n, theme: a, formStyle: o, fieldStyle: c } = H(), [s, i] = l.useState(!1), [d, m] = l.useState({ x: 0, y: 0 }), [u, f] = l.useState(!1), b = l.useRef(null), N = l.useRef(null), C = l.useRef(null), h = l.useId(), y = ie(a), [E, F] = l.useState(void 0);
+), dt = ({ content: e, size: r = "medium", animation: t = !0 }) => {
+  const { t: n, theme: o, formStyle: a, fieldStyle: c } = B(), [s, i] = l.useState(!1), [d, m] = l.useState({ x: 0, y: 0 }), [u, f] = l.useState(!1), b = l.useRef(null), C = l.useRef(null), N = l.useRef(null), h = l.useId(), y = ie(o), [E, F] = l.useState(void 0);
   l.useLayoutEffect(() => {
     if (!b.current) return;
     const I = "rgba(255,255,255,0.1)", g = getComputedStyle(b.current).getPropertyValue("--reactaform-primary-bg").trim();
     if (g && typeof CSS < "u" && CSS.supports?.("color: color-mix(in srgb, red, blue)")) {
-      const w = lt(g) ? "black" : "white";
+      const w = ut(g) ? "black" : "white";
       F(`color-mix(in srgb, var(--reactaform-primary-bg) 85%, ${w} 15%)`);
     } else
       F(I);
@@ -572,19 +587,19 @@ const ut = () => /* @__PURE__ */ D(
       return (S && j ? j[S] : void 0) ?? {};
     };
     return {
-      icon: { ...v.icon, ...g(o, "tooltip", "icon"), ...g(c, "tooltip", "icon") },
-      text: { ...v.text, ...g(o, "tooltip", "text"), ...g(c, "tooltip", "text") },
+      icon: { ...v.icon, ...g(a, "tooltip", "icon"), ...g(c, "tooltip", "icon") },
+      text: { ...v.text, ...g(a, "tooltip", "text"), ...g(c, "tooltip", "text") },
       textVisible: v.textVisible
     };
-  }, [y, r, t, o, c, E]);
+  }, [y, r, t, a, c, E]);
   l.useLayoutEffect(() => {
-    if (!s || !b.current || !N.current) {
+    if (!s || !b.current || !C.current) {
       f(!1);
       return;
     }
     const I = b.current.getBoundingClientRect();
-    C.current = I;
-    const v = N.current.getBoundingClientRect(), g = 8, w = window.innerWidth, x = window.innerHeight, k = -4;
+    N.current = I;
+    const v = C.current.getBoundingClientRect(), g = 8, w = window.innerWidth, x = window.innerHeight, k = -4;
     let S = I.right + g, A = I.top + I.height / 2 - v.height / 2 + k;
     S + v.width > w - g && (S = I.left - g - v.width), S = Math.max(g, Math.min(S, w - v.width - g)), A = Math.max(g, Math.min(A, x - v.height - g)), m({ x: S, y: A }), f(!0);
     const j = b.current.closest("[data-reactaform-theme]"), K = document.getElementById("popup-root");
@@ -602,7 +617,7 @@ const ut = () => /* @__PURE__ */ D(
   const $ = typeof document < "u" ? document.getElementById("popup-root") : null, R = /* @__PURE__ */ p(
     "div",
     {
-      ref: N,
+      ref: C,
       "data-tooltip-id": h,
       style: {
         ...M.text,
@@ -629,31 +644,31 @@ const ut = () => /* @__PURE__ */ D(
         style: {
           ...M.icon
         },
-        children: /* @__PURE__ */ p(ut, {})
+        children: /* @__PURE__ */ p(mt, {})
       }
     ),
     s && ($ ? de.createPortal(R, $) : R)
   ] });
-}, or = l.memo(mt), ve = l.memo(({
+}, ar = l.memo(dt), ve = l.memo(({
   field: e,
   error: r,
   children: t,
   showLabel: n = !0
 }) => {
-  const { t: a } = H(), o = e.labelLayout === "column-center" ? "center" : "left", c = l.useMemo(() => {
+  const { t: o } = B(), a = e.labelLayout === "column-center" ? "center" : "left", c = l.useMemo(() => {
     const d = {
       display: "flex",
       flexDirection: "column",
       gap: "var(--reactaform-label-gap, 4px)"
     };
-    return d["--label-align"] = o, d;
-  }, [o]), s = l.useMemo(() => ({
-    textAlign: o,
+    return d["--label-align"] = a, d;
+  }, [a]), s = l.useMemo(() => ({
+    textAlign: a,
     width: "100%",
     minWidth: "unset",
     display: "block",
     marginBottom: "10px"
-  }), [o]), i = l.useMemo(() => ({
+  }), [a]), i = l.useMemo(() => ({
     display: "flex",
     alignItems: "center",
     gap: "var(--reactaform-inline-gap, 8px)",
@@ -667,12 +682,12 @@ const ut = () => /* @__PURE__ */ D(
         className: V.label,
         htmlFor: e.name,
         style: s,
-        children: a(e.displayName)
+        children: o(e.displayName)
       }
     ),
     /* @__PURE__ */ D("div", { style: i, children: [
       /* @__PURE__ */ p("div", { style: { flex: 1, minWidth: 0 }, children: t }),
-      e.tooltip && /* @__PURE__ */ p(or, { content: e.tooltip })
+      e.tooltip && /* @__PURE__ */ p(ar, { content: e.tooltip })
     ] }),
     r && /* @__PURE__ */ p(Me, { id: `${e.name}-error`, children: r })
   ] });
@@ -684,7 +699,7 @@ const ir = l.memo(({
   children: t,
   rightAlign: n = !1
 }) => {
-  const { t: a } = H(), o = l.useMemo(() => ({
+  const { t: o } = B(), a = l.useMemo(() => ({
     display: "flex",
     alignItems: "center",
     gap: "3px"
@@ -697,13 +712,13 @@ const ir = l.memo(({
         className: V.label,
         htmlFor: e.name,
         style: { textAlign: "left" },
-        children: a(e.displayName)
+        children: o(e.displayName)
       }
     ),
     /* @__PURE__ */ D("div", { children: [
-      /* @__PURE__ */ D("div", { style: o, children: [
+      /* @__PURE__ */ D("div", { style: a, children: [
         n ? /* @__PURE__ */ p("div", { style: { display: "flex", flex: 1, justifyContent: "flex-end" }, children: t }) : t,
-        e.tooltip && /* @__PURE__ */ p(or, { content: e.tooltip })
+        e.tooltip && /* @__PURE__ */ p(ar, { content: e.tooltip })
       ] }),
       r && /* @__PURE__ */ p(Me, { id: `${e.name}-error`, children: r })
     ] })
@@ -733,7 +748,7 @@ const Me = l.memo(({ children: e, id: r }) => {
 });
 Me.displayName = "ErrorDiv";
 const sr = l.memo(({ name: e, onChange: r }) => {
-  const { t } = H();
+  const { t } = B();
   return /* @__PURE__ */ D("div", { style: { marginBottom: 16 }, children: [
     /* @__PURE__ */ D("div", { style: { display: "grid", gridTemplateColumns: "1fr 2fr", gap: 12, alignItems: "center" }, children: [
       /* @__PURE__ */ p(
@@ -765,11 +780,11 @@ const sr = l.memo(({ name: e, onChange: r }) => {
   ] });
 });
 sr.displayName = "InstanceName";
-class dt extends ne {
+class ft extends ne {
   registerInCategory(r, t, n) {
     this.get(r) || this.register(r, {});
-    const a = this.get(r);
-    a[t] = n;
+    const o = this.get(r);
+    o[t] = n;
   }
   getFromCategory(r, t) {
     return this.get(r)?.[t];
@@ -781,15 +796,15 @@ class dt extends ne {
     return this.list();
   }
 }
-const cr = new ne(), lr = new dt(), Fe = new ne();
-function ft(e, r) {
+const cr = new ne(), lr = new ft(), Fe = new ne();
+function pt(e, r) {
   cr.register(e, r);
 }
-function pt(e, r, t) {
+function gt(e, r, t) {
   lr.registerInCategory(e, r, t);
 }
-function gt(e, r) {
-  if (tn(e)) {
+function ht(e, r) {
+  if (on(e)) {
     console.warn(
       `[ReactaForm] Can't override builtin type field validation handler for type "${e}".`
     );
@@ -797,7 +812,7 @@ function gt(e, r) {
   }
   Fe.register(e, r);
 }
-function B(e, r) {
+function H(e, r) {
   Fe.register(e, r);
 }
 function ur(e, r) {
@@ -809,29 +824,29 @@ function mr(e) {
 function dr(e) {
   return Fe.get(e) || null;
 }
-function ht(e) {
+function bt(e) {
   return (typeof e == "object" || typeof e == "function") && e !== null && typeof e.then == "function";
 }
 const We = /* @__PURE__ */ new Map(), _e = /* @__PURE__ */ new Map();
 function fr(e, r, t, n) {
   if (!r || !r.validationHandlerName)
     return null;
-  let a, o;
+  let o, a;
   if (typeof r.validationHandlerName == "string")
-    a = e, o = r.validationHandlerName;
+    o = e, a = r.validationHandlerName;
   else if (Array.isArray(r.validationHandlerName)) {
     const [i, d] = r.validationHandlerName;
     if (d)
-      a = i, o = d;
+      o = i, a = d;
     else if (i)
-      a = e, o = i;
+      o = e, a = i;
     else
       return null;
   } else
     return null;
-  const c = `${a}:${o}`;
+  const c = `${o}:${a}`;
   let s = We.get(c);
-  if (s === void 0 && (s = ur(a, o) || null, We.set(c, s)), s)
+  if (s === void 0 && (s = ur(o, a) || null, We.set(c, s)), s)
     try {
       return s(r.name, t, n) || null;
     } catch (i) {
@@ -839,38 +854,38 @@ function fr(e, r, t, n) {
     }
   return null;
 }
-function ca(e, r, t, n) {
+function uo(e, r, t, n) {
   return fr(e, r, t, n);
 }
 function pr(e, r, t, n) {
-  const a = dr(r.type);
-  if (a) {
-    const o = a(r, t, n);
-    if (o)
-      return o;
+  const o = dr(r.type);
+  if (o) {
+    const a = o(r, t, n);
+    if (a)
+      return a;
   } else if (String(t ?? "").trim() === "")
     return r.required ? n("Value required") : null;
   return fr(e, r, t, n);
 }
-async function bt(e, r, t) {
+async function yt(e, r, t) {
   if (!e || typeof e.validationHandlerName != "string")
     return null;
   const n = e.validationHandlerName;
-  let a = _e.get(n);
-  if (a === void 0 && (a = mr(n) || null, _e.set(n, a)), a)
+  let o = _e.get(n);
+  if (o === void 0 && (o = mr(n) || null, _e.set(n, o)), o)
     try {
-      const o = a(r, t);
-      return ht(o) ? await o || null : o || null;
-    } catch (o) {
-      return [String(o instanceof Error ? o.message : o)];
+      const a = o(r, t);
+      return bt(a) ? await a || null : a || null;
+    } catch (a) {
+      return [String(a instanceof Error ? a.message : a)];
     }
   return null;
 }
 function T(e, r) {
-  const { definitionName: t, t: n, fieldValidationMode: a } = H();
+  const { definitionName: t, t: n, fieldValidationMode: o } = B();
   return l.useCallback(
-    (o) => a === "realTime" ? pr(t, e, o, n) : r ?? null,
-    [t, e, n, a, r]
+    (a) => o === "onEdit" || o === "realTime" ? pr(t, e, a, n) : r ?? null,
+    [t, e, n, o, r]
   );
 }
 const gr = ({
@@ -878,12 +893,12 @@ const gr = ({
   value: r = !1,
   onChange: t,
   onError: n,
-  error: a
+  error: o
 }) => {
-  const { t: o } = H(), s = T(e, a)(r);
+  const { t: a } = B(), s = T(e, o)(r);
   l.useEffect(() => {
-    a || n?.(s);
-  }, [s, a, n]);
+    o || n?.(s);
+  }, [s, o, n]);
   const i = l.useCallback(
     (u) => {
       t?.(u.target.checked);
@@ -911,7 +926,7 @@ const gr = ({
             className: V.label,
             htmlFor: m,
             style: { textAlign: "left", justifyContent: "flex-start" },
-            children: o(e.displayName)
+            children: a(e.displayName)
           }
         ),
         /* @__PURE__ */ p(
@@ -941,26 +956,26 @@ const gr = ({
   ) });
 };
 gr.displayName = "CheckboxInput";
-const yt = l.memo(gr);
+const vt = l.memo(gr);
 function _({ value: e, onChange: r, onError: t, validate: n }) {
-  const a = l.useRef(null), o = l.useRef(null), c = l.useRef(t), [s, i] = l.useState(null);
+  const o = l.useRef(null), a = l.useRef(null), c = l.useRef(t), [s, i] = l.useState(null);
   l.useEffect(() => {
     c.current = t;
   }, [t]), l.useEffect(() => {
     const m = String(e ?? "");
-    if (!(document.activeElement === a.current)) {
+    if (!(document.activeElement === o.current)) {
       const f = n(m);
-      f !== o.current && (o.current = f, c.current?.(f ?? null), i(f)), a.current && a.current.value !== m && (a.current.value = m);
+      f !== a.current && (a.current = f, c.current?.(f ?? null), i(f)), o.current && o.current.value !== m && (o.current.value = m);
     }
   }, [e, n]);
   const d = l.useCallback(
     (m) => {
       const u = m.target.value, f = n(u);
-      f !== o.current && (o.current = f, i(f), c.current?.(f ?? null)), r?.(u);
+      f !== a.current && (a.current = f, i(f), c.current?.(f ?? null)), r?.(u);
     },
     [r, n]
   );
-  return { inputRef: a, error: s, handleChange: d };
+  return { inputRef: o, error: s, handleChange: d };
 }
 const Ke = [
   { label: "Black", value: "#000000" },
@@ -977,11 +992,11 @@ const Ke = [
   { label: "Gray", value: "#808080" },
   { label: "Light Gray", value: "#d3d3d3" },
   { label: "Pink", value: "#ffc0cb" }
-], vt = /^#([0-9A-F]{3}){1,2}$/i, xt = "#000000", wt = (e) => vt.test(e), he = (e) => {
-  if (!e || !wt(e)) return xt;
+], xt = /^#([0-9A-F]{3}){1,2}$/i, wt = "#000000", St = (e) => xt.test(e), he = (e) => {
+  if (!e || !St(e)) return wt;
   const r = e.toLowerCase();
   return r.length === 4 ? "#" + r.slice(1).split("").map((t) => t + t).join("") : r;
-}, St = (e) => {
+}, Ct = (e) => {
   const r = parseInt(e.slice(1), 16);
   return {
     r: r >> 16 & 255,
@@ -993,9 +1008,9 @@ const Ke = [
   value: r,
   onChange: t,
   onError: n,
-  error: a
+  error: o
 }) => {
-  const { t: o } = H(), c = T(e, a), s = l.useMemo(
+  const { t: a } = B(), c = T(e, o), s = l.useMemo(
     () => he(r),
     [r]
   ), { inputRef: i, error: d, handleChange: m } = _({
@@ -1015,7 +1030,7 @@ const Ke = [
       });
     },
     [m]
-  ), N = l.useCallback(
+  ), C = l.useCallback(
     (M) => {
       const $ = he(M.target.value);
       f($), m({
@@ -1027,7 +1042,7 @@ const Ke = [
     () => new Set(Ke.map((M) => M.value)),
     []
   ).has(u), { r: y, g: E, b: F } = l.useMemo(
-    () => St(u),
+    () => Ct(u),
     [u]
   );
   return /* @__PURE__ */ p(O, { field: e, error: d, children: /* @__PURE__ */ D(
@@ -1045,14 +1060,14 @@ const Ke = [
           {
             id: e.name,
             value: u,
-            onChange: N,
+            onChange: C,
             className: U(
               V.input,
               V.inputSelect
             ),
             "aria-invalid": !!d,
             children: [
-              Ke.map((M) => /* @__PURE__ */ p("option", { value: M.value, children: o(M.label) }, M.value)),
+              Ke.map((M) => /* @__PURE__ */ p("option", { value: M.value, children: a(M.label) }, M.value)),
               !h && /* @__PURE__ */ D("option", { value: u, children: [
                 "(",
                 y,
@@ -1097,7 +1112,7 @@ const Ke = [
   ) });
 };
 hr.displayName = "ColorInput";
-const Ct = l.memo(hr), Ge = (e) => {
+const Nt = l.memo(hr), Ge = (e) => {
   if (!e) return null;
   const r = new Date(e);
   return isNaN(r.getTime()) ? null : r;
@@ -1107,8 +1122,8 @@ const Ct = l.memo(hr), Ge = (e) => {
     return Ge(e) ? e : "";
   const t = Ge(e);
   if (t) {
-    const n = t.getUTCFullYear(), a = String(t.getUTCMonth() + 1).padStart(2, "0"), o = String(t.getUTCDate()).padStart(2, "0");
-    return `${n}-${a}-${o}`;
+    const n = t.getUTCFullYear(), o = String(t.getUTCMonth() + 1).padStart(2, "0"), a = String(t.getUTCDate()).padStart(2, "0");
+    return `${n}-${o}-${a}`;
   }
   return "";
 }, br = ({
@@ -1116,13 +1131,13 @@ const Ct = l.memo(hr), Ge = (e) => {
   value: r,
   onChange: t,
   onError: n,
-  error: a
+  error: o
 }) => {
-  const o = T(e, a), c = Je(r), { inputRef: s, error: i, handleChange: d } = _({
+  const a = T(e, o), c = Je(r), { inputRef: s, error: i, handleChange: d } = _({
     value: c,
     onChange: t,
     onError: n,
-    validate: o
+    validate: a
   });
   return /* @__PURE__ */ p(O, { field: e, error: i, children: /* @__PURE__ */ p(
     "input",
@@ -1141,38 +1156,50 @@ const Ct = l.memo(hr), Ge = (e) => {
   ) });
 };
 br.displayName = "DateInput";
-const Nt = l.memo(br), yr = ({
+const kt = l.memo(br), yr = ({ field: e }) => {
+  const { t: r } = B(), { displayText: t = "", textAlign: n = "left", allowHtml: o = !1 } = e;
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      className: V.description,
+      style: { textAlign: n },
+      ...o ? { dangerouslySetInnerHTML: { __html: r(t) } } : { children: r(t) }
+    }
+  );
+};
+yr.displayName = "Description";
+const It = l.memo(yr), vr = ({
   field: e,
   value: r,
   onChange: t,
   onError: n,
-  error: a
+  error: o
 }) => {
-  const { t: o, theme: c, formStyle: s, fieldStyle: i } = H(), d = l.useRef(null), m = l.useRef(n), [u, f] = l.useState(!1), [b, N] = l.useState(null);
+  const { t: a, theme: c, formStyle: s, fieldStyle: i } = B(), d = l.useRef(null), m = l.useRef(n), [u, f] = l.useState(!1), [b, C] = l.useState(null);
   l.useEffect(() => {
     m.current = n;
   }, [n]);
-  const C = T(e, a), [h, y] = l.useState(null), E = l.useRef(null);
+  const N = T(e, o), [h, y] = l.useState(null), E = l.useRef(null);
   l.useEffect(() => {
     const g = String(r ?? "");
-    let w = C(g);
+    let w = N(g);
     if (w && e.options.length > 0) {
       const x = String(e.options[0].value);
       t?.(x), w = null;
     }
     w !== E.current && (E.current = w, y(w), m.current?.(w ?? null));
-  }, [r, C, t, e.options]);
+  }, [r, N, t, e.options]);
   const F = () => {
     if (!d.current) return;
     const g = d.current.getBoundingClientRect();
-    N({ x: g.left, y: g.bottom }), f((w) => !w);
+    C({ x: g.left, y: g.bottom }), f((w) => !w);
   }, M = (g) => {
-    const w = C(g);
+    const w = N(g);
     w !== E.current && (E.current = w, y(w), m.current?.(w ?? null)), t?.(g), f(!1);
   }, $ = l.useMemo(() => {
     const g = e.options.find((w) => String(w.value) === String(r));
-    return g ? o(g.label) : "";
-  }, [e.options, r, o]), R = (g, w, x) => {
+    return g ? a(g.label) : "";
+  }, [e.options, r, a]), R = (g, w, x) => {
     if (!w) return {};
     const S = g?.[w];
     return (x && S ? S[x] : void 0) ?? {};
@@ -1222,7 +1249,7 @@ const Nt = l.memo(br), yr = ({
       }
     ) }),
     u && b && /* @__PURE__ */ p(
-      kt,
+      Et,
       {
         position: b,
         options: e.options,
@@ -1231,24 +1258,24 @@ const Nt = l.memo(br), yr = ({
         onClose: () => f(!1),
         controlRef: d,
         theme: c,
-        t: o
+        t: a
       }
     )
   ] });
-}, kt = ({
+}, Et = ({
   position: e,
   options: r,
   selectedValue: t,
   onSelect: n,
-  onClose: a,
-  controlRef: o,
+  onClose: o,
+  controlRef: a,
   theme: c,
   t: s
 }) => {
-  const i = l.useRef(null), [d, m] = l.useState(-1), { formStyle: u, fieldStyle: f } = H(), b = ie(c ?? "light");
+  const i = l.useRef(null), [d, m] = l.useState(-1), { formStyle: u, fieldStyle: f } = B(), b = ie(c ?? "light");
   l.useLayoutEffect(() => {
-    if (!o.current) return;
-    const v = o.current.closest("[data-reactaform-theme]"), g = document.getElementById("popup-root");
+    if (!a.current) return;
+    const v = a.current.closest("[data-reactaform-theme]"), g = document.getElementById("popup-root");
     if (v && g) {
       const w = getComputedStyle(v);
       g.style.setProperty(
@@ -1262,12 +1289,12 @@ const Nt = l.memo(br), yr = ({
         w.getPropertyValue("--reactaform-option-menu-hover-bg")
       );
     }
-  }, [o]);
-  const N = (v, g, w) => {
+  }, [a]);
+  const C = (v, g, w) => {
     if (!g) return {};
     const k = v?.[g];
     return (w && k ? k[w] : void 0) ?? {};
-  }, C = l.useMemo(() => ({
+  }, N = l.useMemo(() => ({
     maxHeight: 200,
     overflowY: "auto",
     background: "var(--reactaform-secondary-bg, #fff)",
@@ -1278,8 +1305,8 @@ const Nt = l.memo(br), yr = ({
     pointerEvents: "auto",
     color: "var(--reactaform-text-color, #000)",
     fontSize: "var(--reactaform-popup-font-size, 0.875rem)",
-    ...N(u, "dropdown", "popup"),
-    ...N(f, void 0, "popup")
+    ...C(u, "dropdown", "popup"),
+    ...C(f, void 0, "popup")
   }), [u, f]), h = l.useMemo(() => ({
     padding: "6px 8px",
     cursor: "pointer",
@@ -1287,16 +1314,16 @@ const Nt = l.memo(br), yr = ({
     alignItems: "center",
     background: "transparent",
     color: "var(--reactaform-text-color, #000)",
-    ...N(u, "dropdown", "option"),
-    ...N(f, void 0, "option")
+    ...C(u, "dropdown", "option"),
+    ...C(f, void 0, "option")
   }), [u, f]);
   l.useEffect(() => {
     const v = (g) => {
       const w = g.target;
-      !i.current?.contains(w) && !o.current?.contains(w) && a();
+      !i.current?.contains(w) && !a.current?.contains(w) && o();
     };
     return document.addEventListener("mousedown", v), () => document.removeEventListener("mousedown", v);
-  }, [a, o]), l.useEffect(() => {
+  }, [o, a]), l.useEffect(() => {
     if (i.current && r.length > 0) {
       const v = r.findIndex((g) => String(g.value) === t);
       requestAnimationFrame(() => m(v >= 0 ? v : 0));
@@ -1311,7 +1338,7 @@ const Nt = l.memo(br), yr = ({
     if (typeof window > "u") return;
     const v = () => {
       let x = e.x, k = e.y, S = y;
-      const A = o?.current;
+      const A = a?.current;
       if (A) {
         const j = A.getBoundingClientRect();
         x = j.left, k = j.bottom, S = Math.max(80, Math.round(j.width));
@@ -1320,11 +1347,11 @@ const Nt = l.memo(br), yr = ({
     };
     v(), window.addEventListener("scroll", v, !0), window.addEventListener("resize", v);
     let g = null;
-    const w = o?.current;
+    const w = a?.current;
     return typeof ResizeObserver < "u" && w && (g = new ResizeObserver(() => v()), g.observe(w)), () => {
       window.removeEventListener("scroll", v, !0), window.removeEventListener("resize", v), g && w && g.unobserve(w);
     };
-  }, [o, e.x, e.y]), typeof window > "u") return null;
+  }, [a, e.x, e.y]), typeof window > "u") return null;
   let I = document.getElementById("popup-root");
   return I || (I = document.createElement("div"), I.id = "popup-root", document.body.appendChild(I)), de.createPortal(
     /* @__PURE__ */ p(
@@ -1338,7 +1365,7 @@ const Nt = l.memo(br), yr = ({
           top: F ? F.top : e.y,
           left: F ? F.left : e.x,
           width: $ ?? y,
-          ...C
+          ...N
         },
         "data-reactaform-theme": c ?? "light",
         children: r.map((v, g) => {
@@ -1374,7 +1401,7 @@ const Nt = l.memo(br), yr = ({
                     S.preventDefault(), S.stopPropagation(), n(String(v.value));
                     break;
                   case "Escape":
-                    S.preventDefault(), a(), o?.current?.focus();
+                    S.preventDefault(), o(), a?.current?.focus();
                     break;
                 }
               },
@@ -1398,19 +1425,19 @@ const Nt = l.memo(br), yr = ({
     I
   );
 };
-yr.displayName = "DropdownInput";
-const It = l.memo(yr), vr = ({
+vr.displayName = "DropdownInput";
+const Mt = l.memo(vr), xr = ({
   field: e,
   value: r,
   onChange: t,
   onError: n,
-  error: a
+  error: o
 }) => {
-  const o = T(e, a), { inputRef: c, error: s, handleChange: i } = _({
+  const a = T(e, o), { inputRef: c, error: s, handleChange: i } = _({
     value: r,
     onChange: t,
     onError: n,
-    validate: o
+    validate: a
   });
   return /* @__PURE__ */ p(O, { field: e, error: s, children: /* @__PURE__ */ p(
     "input",
@@ -1426,12 +1453,12 @@ const It = l.memo(yr), vr = ({
     }
   ) });
 };
-vr.displayName = "EmailInput";
-const Et = l.memo(vr), xr = ({ field: e }) => {
-  const { theme: r } = H(), {
+xr.displayName = "EmailInput";
+const Ft = l.memo(xr), wr = ({ field: e }) => {
+  const { theme: r } = B(), {
     color: t = ie(r) ? "#444444" : "#CCCCCC",
     thickness: n = 1,
-    margin: a = "8px 0"
+    margin: o = "8px 0"
   } = e;
   return /* @__PURE__ */ p(
     "div",
@@ -1441,20 +1468,20 @@ const Et = l.memo(vr), xr = ({ field: e }) => {
         height: "0",
         // ensures only 1 line
         borderTop: `${n}px solid ${t}`,
-        margin: a
+        margin: o
       }
     }
   );
 };
-xr.displayName = "FieldSeparator";
-const Mt = l.memo(xr), wr = ({ field: e, value: r, onChange: t, onError: n, error: a }) => {
-  const { t: o, theme: c } = H(), [s, i] = l.useState(!1), d = l.useRef(null), m = l.useRef(n), u = l.useRef(null), [f, b] = l.useState(null), N = ie(c);
+wr.displayName = "FieldSeparator";
+const $t = l.memo(wr), Sr = ({ field: e, value: r, onChange: t, onError: n, error: o }) => {
+  const { t: a, theme: c } = B(), [s, i] = l.useState(!1), d = l.useRef(null), m = l.useRef(n), u = l.useRef(null), [f, b] = l.useState(null), C = ie(c);
   l.useEffect(() => {
     m.current = n;
   }, [n]);
-  const C = (g, w) => w.some(
+  const N = (g, w) => w.some(
     (x) => x.name === g.name && x.size === g.size && x.lastModified === g.lastModified
-  ), h = T(e, a);
+  ), h = T(e, o);
   l.useEffect(() => {
     const g = h(r ?? []);
     t?.(r), g !== u.current && (u.current = g, b(g), m.current?.(g ?? null));
@@ -1465,7 +1492,7 @@ const Mt = l.memo(xr), wr = ({ field: e, value: r, onChange: t, onError: n, erro
     if (w && w.length > 0) {
       const S = Array.from(w);
       if (e.multiple) {
-        const A = Array.isArray(r) ? r : [], j = S.filter((K) => !C(K, A));
+        const A = Array.isArray(r) ? r : [], j = S.filter((K) => !N(K, A));
         x = [...A, ...j];
       } else
         x = S[0];
@@ -1479,7 +1506,7 @@ const Mt = l.memo(xr), wr = ({ field: e, value: r, onChange: t, onError: n, erro
       const x = Array.from(w);
       let k = null;
       if (e.multiple) {
-        const A = Array.isArray(r) ? r : [], j = x.filter((K) => !C(K, A));
+        const A = Array.isArray(r) ? r : [], j = x.filter((K) => !N(K, A));
         k = [...A, ...j];
       } else
         k = x[0];
@@ -1539,7 +1566,7 @@ const Mt = l.memo(xr), wr = ({ field: e, value: r, onChange: t, onError: n, erro
             {
               type: "button",
               onClick: () => $(Array.isArray(r) ? x : void 0),
-              "aria-label": o("Remove file"),
+              "aria-label": a("Remove file"),
               style: {
                 background: "transparent",
                 border: "none",
@@ -1584,7 +1611,7 @@ const Mt = l.memo(xr), wr = ({ field: e, value: r, onChange: t, onError: n, erro
           borderRadius: "var(--reactaform-border-radius, 4px)",
           padding: "8px 12px",
           textAlign: "center",
-          backgroundColor: s ? `var(--reactaform-bg-hover, ${N ? "#070707" : "#eff6ff"})` : void 0,
+          backgroundColor: s ? `var(--reactaform-bg-hover, ${C ? "#070707" : "#eff6ff"})` : void 0,
           transition: "all 0.2s ease",
           cursor: "pointer",
           minHeight: "var(--reactaform-input-height, 34px)",
@@ -1603,7 +1630,7 @@ const Mt = l.memo(xr), wr = ({ field: e, value: r, onChange: t, onError: n, erro
           (g.key === "Enter" || g.key === " ") && (g.preventDefault(), d.current?.click());
         },
         role: "button",
-        "aria-label": e.multiple ? o("Choose Files or Drag & Drop") : o("Choose File or Drag & Drop"),
+        "aria-label": e.multiple ? a("Choose Files or Drag & Drop") : a("Choose File or Drag & Drop"),
         "aria-invalid": !!f,
         "aria-describedby": f ? `${e.name}-error` : void 0,
         children: [
@@ -1633,26 +1660,26 @@ const Mt = l.memo(xr), wr = ({ field: e, value: r, onChange: t, onError: n, erro
             color: "var(--reactaform-text-color, #111827)",
             flex: 1,
             textAlign: "left"
-          }, children: s ? o("Drop files here") : e.multiple ? o("Choose Files or Drag & Drop") : o("Choose File or Drag & Drop") })
+          }, children: s ? a("Drop files here") : e.multiple ? a("Choose Files or Drag & Drop") : a("Choose File or Drag & Drop") })
         ]
       }
     ),
     R()
   ] }) });
 };
-wr.displayName = "FileInput";
-const Ft = l.memo(wr), Sr = ({
+Sr.displayName = "FileInput";
+const Vt = l.memo(Sr), Cr = ({
   field: e,
   value: r,
   onChange: t,
   onError: n,
-  error: a
+  error: o
 }) => {
-  const o = T(e, a), c = Array.isArray(r) ? r.join(", ") : String(r ?? ""), { inputRef: s, error: i, handleChange: d } = _({
+  const a = T(e, o), c = Array.isArray(r) ? r.join(", ") : String(r ?? ""), { inputRef: s, error: i, handleChange: d } = _({
     value: c,
     onChange: t,
     onError: n,
-    validate: o
+    validate: a
   });
   return /* @__PURE__ */ p(O, { field: e, error: i, children: /* @__PURE__ */ p(
     "input",
@@ -1669,19 +1696,19 @@ const Ft = l.memo(wr), Sr = ({
     }
   ) });
 };
-Sr.displayName = "FloatArrayInput";
-const $t = l.memo(Sr), Cr = ({
+Cr.displayName = "FloatArrayInput";
+const At = l.memo(Cr), Nr = ({
   field: e,
   value: r,
   onChange: t,
   onError: n,
-  error: a
+  error: o
 }) => {
-  const o = T(e, a), { inputRef: c, error: s, handleChange: i } = _({
+  const a = T(e, o), { inputRef: c, error: s, handleChange: i } = _({
     value: r,
     onChange: t,
     onError: n,
-    validate: o
+    validate: a
   });
   return /* @__PURE__ */ p(O, { field: e, error: s, children: /* @__PURE__ */ p(
     "input",
@@ -1700,9 +1727,9 @@ const $t = l.memo(Sr), Cr = ({
     }
   ) });
 };
-Cr.displayName = "FloatInput";
-const Vt = l.memo(Cr);
-function At() {
+Nr.displayName = "FloatInput";
+const Rt = l.memo(Nr);
+function Dt() {
   try {
     return "/";
   } catch {
@@ -1714,14 +1741,14 @@ function At() {
   }
   return "/";
 }
-const Nr = ({ field: e, value: r }) => {
-  const { language: t, t: n } = H(), a = e.alignment || "center", o = {
+const kr = ({ field: e, value: r }) => {
+  const { language: t, t: n } = B(), o = e.alignment || "center", a = {
     left: "flex-start",
     center: "center",
     right: "flex-end"
   }, c = typeof r == "string" ? r : "";
   let s = c && c.trim() !== "" ? c : typeof e.defaultValue == "string" ? e.defaultValue : "";
-  s && !s.startsWith("/") && (s = `${At()}${s}`);
+  s && !s.startsWith("/") && (s = `${Dt()}${s}`);
   const i = e.localized?.split(";").map((h) => h.trim()), [d, m] = l.useState(s || ""), u = l.useRef(s || null);
   if (l.useEffect(() => {
     if (!s) return;
@@ -1747,19 +1774,19 @@ const Nr = ({ field: e, value: r }) => {
       R.abort();
     };
   }, [s, t, i]), !d) return null;
-  const { width: f, height: b } = e, N = {}, C = {
+  const { width: f, height: b } = e, C = {}, N = {
     borderRadius: "8px",
     objectFit: "contain",
     boxShadow: "0 2px 6px rgba(0,0,0,0.1)",
     margin: "0 0 8px 0"
   };
-  return f && b ? (N.width = f, N.height = b, C.width = `${f}px`, C.height = `${b}px`) : f && !b ? (N.width = f, C.width = `${f}px`, C.height = "auto") : !f && b && (N.height = b, C.width = "auto", C.height = `${b}px`), /* @__PURE__ */ p(O, { field: e, children: /* @__PURE__ */ p(
+  return f && b ? (C.width = f, C.height = b, N.width = `${f}px`, N.height = `${b}px`) : f && !b ? (C.width = f, N.width = `${f}px`, N.height = "auto") : !f && b && (C.height = b, N.width = "auto", N.height = `${b}px`), /* @__PURE__ */ p(O, { field: e, children: /* @__PURE__ */ p(
     "div",
     {
       "data-testid": "image-wrapper",
       style: {
         display: "flex",
-        justifyContent: o[a] || "center",
+        justifyContent: a[o] || "center",
         margin: "0 0"
       },
       children: /* @__PURE__ */ p(
@@ -1767,26 +1794,26 @@ const Nr = ({ field: e, value: r }) => {
         {
           src: d,
           alt: n?.(e.displayName || "Image") || e.displayName || "Image",
-          ...N,
-          style: C
+          ...C,
+          style: N
         }
       )
     }
   ) });
 };
-Nr.displayName = "ImageDisplay";
-const Rt = l.memo(Nr), kr = ({
+kr.displayName = "ImageDisplay";
+const zt = l.memo(kr), Ir = ({
   field: e,
   value: r,
   onChange: t,
   onError: n,
-  error: a
+  error: o
 }) => {
-  const o = T(e, a), c = Array.isArray(r) ? r.join(", ") : String(r ?? ""), { inputRef: s, error: i, handleChange: d } = _({
+  const a = T(e, o), c = Array.isArray(r) ? r.join(", ") : String(r ?? ""), { inputRef: s, error: i, handleChange: d } = _({
     value: c,
     onChange: t,
     onError: n,
-    validate: o
+    validate: a
   });
   return /* @__PURE__ */ p(O, { field: e, error: i, children: /* @__PURE__ */ p(
     "input",
@@ -1803,19 +1830,19 @@ const Rt = l.memo(Nr), kr = ({
     }
   ) });
 };
-kr.displayName = "IntegerArrayInput";
-const Dt = l.memo(kr), Ir = ({
+Ir.displayName = "IntegerArrayInput";
+const Pt = l.memo(Ir), Er = ({
   field: e,
   value: r,
   onChange: t,
   onError: n,
-  error: a
+  error: o
 }) => {
-  const o = T(e, a), { inputRef: c, error: s, handleChange: i } = _({
+  const a = T(e, o), { inputRef: c, error: s, handleChange: i } = _({
     value: r,
     onChange: t,
     onError: n,
-    validate: o
+    validate: a
   });
   return /* @__PURE__ */ p(O, { field: e, error: s, children: /* @__PURE__ */ p(
     "input",
@@ -1831,19 +1858,19 @@ const Dt = l.memo(kr), Ir = ({
     }
   ) });
 };
-Ir.displayName = "IntegerInput";
-const Pt = l.memo(Ir), Er = ({
+Er.displayName = "IntegerInput";
+const Lt = l.memo(Er), Mr = ({
   field: e,
   value: r,
   onChange: t,
   onError: n,
-  error: a
+  error: o
 }) => {
-  const o = T(e, a), { inputRef: c, error: s, handleChange: i } = _({
+  const a = T(e, o), { inputRef: c, error: s, handleChange: i } = _({
     value: r,
     onChange: t,
     onError: n,
-    validate: o
+    validate: a
   });
   return /* @__PURE__ */ p(O, { field: e, error: s, children: /* @__PURE__ */ p(
     "textarea",
@@ -1864,42 +1891,42 @@ const Pt = l.memo(Ir), Er = ({
     }
   ) });
 };
-Er.displayName = "MultilineTextInput";
-const zt = l.memo(Er), Mr = ({
+Mr.displayName = "MultilineTextInput";
+const Ot = l.memo(Mr), Fr = ({
   field: e,
   value: r,
   onChange: t,
   onError: n,
-  error: a
+  error: o
 }) => {
-  const o = l.useRef(
+  const a = l.useRef(
     n
   );
   l.useEffect(() => {
-    o.current = n;
+    a.current = n;
   }, [n]);
-  const { t: c, theme: s, formStyle: i, fieldStyle: d } = H(), m = (x, k, S) => {
+  const { t: c, theme: s, formStyle: i, fieldStyle: d } = B(), m = (x, k, S) => {
     if (!k) return {};
     const j = x?.[k];
     return (S && j ? j[S] : void 0) ?? {};
-  }, u = l.useRef(null), [f, b] = l.useState(!1), [N, C] = l.useState(null), h = l.useMemo(
+  }, u = l.useRef(null), [f, b] = l.useState(!1), [C, N] = l.useState(null), h = l.useMemo(
     () => e.options.map((x) => ({ value: x.value, label: c(x.label) })),
     [e.options, c]
   ), y = l.useMemo(() => {
     const x = Array.isArray(r) ? r : [], k = new Set(h.map((S) => S.value));
     return x.filter((S) => k.has(S));
-  }, [r, h]), E = T(e, a), [F, M] = l.useState(null), $ = l.useRef(null);
+  }, [r, h]), E = T(e, o), [F, M] = l.useState(null), $ = l.useRef(null);
   l.useEffect(() => {
     const x = E(Array.isArray(r) ? r : []);
-    x !== $.current && ($.current = x, M(x), o.current?.(x ?? null));
+    x !== $.current && ($.current = x, M(x), a.current?.(x ?? null));
   }, [r, E]);
   const R = () => {
     if (!u.current) return;
     const x = u.current.getBoundingClientRect();
-    C({ x: x.left, y: x.bottom }), b((k) => !k);
+    N({ x: x.left, y: x.bottom }), b((k) => !k);
   }, I = (x) => {
     const k = y.includes(x) ? y.filter((A) => A !== x) : [...y, x], S = E(k);
-    S !== $.current && ($.current = S, M(S), o.current?.(S ?? null)), t?.(k);
+    S !== $.current && ($.current = S, M(S), a.current?.(S ?? null)), t?.(k);
   }, v = l.useMemo(
     () => ({
       height: "var(--reactaform-input-height, 2.5rem)",
@@ -1987,10 +2014,10 @@ const zt = l.memo(Er), Mr = ({
         ]
       }
     ) }) }),
-    f && N && /* @__PURE__ */ p(
-      Lt,
+    f && C && /* @__PURE__ */ p(
+      Tt,
       {
-        position: N,
+        position: C,
         options: h,
         selectedValues: y,
         onToggleOption: I,
@@ -2000,19 +2027,19 @@ const zt = l.memo(Er), Mr = ({
       }
     )
   ] });
-}, Lt = ({
+}, Tt = ({
   position: e,
   options: r,
   selectedValues: t,
   onToggleOption: n,
-  onClose: a,
-  controlRef: o,
+  onClose: o,
+  controlRef: a,
   theme: c
 }) => {
-  const s = l.useRef(null), [i, d] = l.useState(-1), { formStyle: m, fieldStyle: u } = H(), f = ie(c ?? "light");
+  const s = l.useRef(null), [i, d] = l.useState(-1), { formStyle: m, fieldStyle: u } = B(), f = ie(c ?? "light");
   l.useLayoutEffect(() => {
-    if (!o.current) return;
-    const I = o.current.closest("[data-reactaform-theme]"), v = document.getElementById("popup-root");
+    if (!a.current) return;
+    const I = a.current.closest("[data-reactaform-theme]"), v = document.getElementById("popup-root");
     if (I && v) {
       const g = getComputedStyle(I);
       v.style.setProperty(
@@ -2026,12 +2053,12 @@ const zt = l.memo(Er), Mr = ({
         g.getPropertyValue("--reactaform-option-menu-hover-bg")
       );
     }
-  }, [o]);
+  }, [a]);
   const b = (I, v, g) => {
     if (!v) return {};
     const x = I?.[v];
     return (g && x ? x[g] : void 0) ?? {};
-  }, N = l.useMemo(
+  }, C = l.useMemo(
     () => ({
       maxHeight: 200,
       overflowY: "auto",
@@ -2047,7 +2074,7 @@ const zt = l.memo(Er), Mr = ({
       ...b(u, void 0, "popup")
     }),
     [m, u]
-  ), C = l.useMemo(
+  ), N = l.useMemo(
     () => ({
       padding: "6px 8px",
       cursor: "pointer",
@@ -2063,10 +2090,10 @@ const zt = l.memo(Er), Mr = ({
   l.useEffect(() => {
     const I = (v) => {
       const g = v.target;
-      !s.current?.contains(g) && !o.current?.contains(g) && a();
+      !s.current?.contains(g) && !a.current?.contains(g) && o();
     };
     return document.addEventListener("mousedown", I), () => document.removeEventListener("mousedown", I);
-  }, [a, o]), l.useEffect(() => {
+  }, [o, a]), l.useEffect(() => {
     s.current && r.length > 0 && requestAnimationFrame(
       () => d((I) => I === -1 ? 0 : I)
     );
@@ -2082,7 +2109,7 @@ const zt = l.memo(Er), Mr = ({
     if (typeof window > "u") return;
     const I = () => {
       let w = e.x, x = e.y, k = h;
-      const S = o?.current;
+      const S = a?.current;
       if (S) {
         const A = S.getBoundingClientRect();
         w = A.left, x = A.bottom, k = Math.max(80, Math.round(A.width));
@@ -2091,11 +2118,11 @@ const zt = l.memo(Er), Mr = ({
     };
     I(), window.addEventListener("scroll", I, !0), window.addEventListener("resize", I);
     let v = null;
-    const g = o?.current;
+    const g = a?.current;
     return typeof ResizeObserver < "u" && g && (v = new ResizeObserver(() => I()), v.observe(g)), () => {
       window.removeEventListener("scroll", I, !0), window.removeEventListener("resize", I), v && g && v.unobserve(g);
     };
-  }, [o, e.x, e.y]), typeof window > "u") return null;
+  }, [a, e.x, e.y]), typeof window > "u") return null;
   let R = document.getElementById("popup-root");
   return R || (R = document.createElement("div"), R.id = "popup-root", document.body.appendChild(R)), de.createPortal(
     /* @__PURE__ */ p(
@@ -2110,13 +2137,13 @@ const zt = l.memo(Er), Mr = ({
           left: E ? E.left : e.x,
           width: M ?? h,
           // spread the static popup styles
-          ...N
+          ...C
         },
         "data-reactaform-theme": c ?? "light",
         children: r.map((I, v) => {
           const g = t.includes(I.value), w = f ? "var(--reactaform-option-menu-hover-bg, rgba(255,255,255,0.01))" : "var(--reactaform-option-menu-hover-bg, #eee)", x = {
-            ...C,
-            background: v === i ? w : C.background
+            ...N,
+            background: v === i ? w : N.background
           };
           return /* @__PURE__ */ D(
             "div",
@@ -2145,7 +2172,7 @@ const zt = l.memo(Er), Mr = ({
                     k.preventDefault(), k.stopPropagation(), n(I.value);
                     break;
                   case "Escape":
-                    k.preventDefault(), a(), o?.current?.focus();
+                    k.preventDefault(), o(), a?.current?.focus();
                     break;
                 }
               },
@@ -2187,19 +2214,19 @@ const zt = l.memo(Er), Mr = ({
     R
   );
 };
-Mr.displayName = "MultiSelect";
-const Ot = l.memo(Mr), Fr = ({
+Fr.displayName = "MultiSelect";
+const jt = l.memo(Fr), $r = ({
   field: e,
   value: r,
   onChange: t,
   onError: n,
-  error: a
+  error: o
 }) => {
-  const o = T(e, a), { inputRef: c, error: s, handleChange: i } = _({
+  const a = T(e, o), { inputRef: c, error: s, handleChange: i } = _({
     value: String(r ?? ""),
     onChange: t,
     onError: n,
-    validate: o
+    validate: a
   }), d = Math.max(1, Math.round(e.step ?? 1));
   return /* @__PURE__ */ p(O, { field: e, error: s, children: /* @__PURE__ */ p(
     "input",
@@ -2222,19 +2249,19 @@ const Ot = l.memo(Mr), Fr = ({
     }
   ) });
 };
-Fr.displayName = "NumericStepperInput";
-const Tt = l.memo(Fr), $r = ({
+$r.displayName = "NumericStepperInput";
+const Bt = l.memo($r), Vr = ({
   field: e,
   value: r,
   onChange: t,
   onError: n,
-  error: a
+  error: o
 }) => {
-  const o = T(e, a), { inputRef: c, error: s, handleChange: i } = _({
+  const a = T(e, o), { inputRef: c, error: s, handleChange: i } = _({
     value: r,
     onChange: t,
     onError: n,
-    validate: o
+    validate: a
   });
   return /* @__PURE__ */ p(O, { field: e, error: s, children: /* @__PURE__ */ p(
     "input",
@@ -2250,15 +2277,15 @@ const Tt = l.memo(Fr), $r = ({
     }
   ) });
 };
-$r.displayName = "PhoneInput";
-const jt = l.memo($r), Vr = ({
+Vr.displayName = "PhoneInput";
+const Ht = l.memo(Vr), Ar = ({
   field: e,
   value: r,
   onChange: t,
   onError: n,
-  error: a
+  error: o
 }) => {
-  const { t: o } = H(), c = T(e, a), s = e.layout?.toLowerCase() === "horizontal" ? "row" : "column", i = l.useRef(n);
+  const { t: a } = B(), c = T(e, o), s = e.layout?.toLowerCase() === "horizontal" ? "row" : "column", i = l.useRef(n);
   l.useEffect(() => {
     i.current = n;
   }, [n]);
@@ -2279,7 +2306,7 @@ const jt = l.memo($r), Vr = ({
   const b = (h) => {
     const y = h.target.value, E = c(y);
     f(E), t?.(y);
-  }, N = {
+  }, C = {
     display: "flex",
     flexDirection: s,
     flexWrap: s === "row" ? "wrap" : "nowrap",
@@ -2288,7 +2315,7 @@ const jt = l.memo($r), Vr = ({
     width: "100%",
     padding: s === "row" ? "8px" : void 0,
     boxSizing: "border-box"
-  }, C = {
+  }, N = {
     display: s === "column" ? "flex" : "inline-flex",
     gap: "8px",
     alignItems: "center",
@@ -2304,14 +2331,14 @@ const jt = l.memo($r), Vr = ({
       className: V.input,
       "aria-labelledby": `${e.name}-label`,
       "aria-invalid": !!d,
-      style: N,
+      style: C,
       children: e.options.map((h) => {
         const y = String(h.value), E = `${e.name}-${y}`;
         return /* @__PURE__ */ D(
           "label",
           {
             className: U(V.label),
-            style: C,
+            style: N,
             onMouseDown: (F) => F.preventDefault(),
             onClick: () => {
               String(r ?? "") !== y && b({ target: { value: y } });
@@ -2338,7 +2365,7 @@ const jt = l.memo($r), Vr = ({
                     flex: s === "column" ? 1 : void 0,
                     fontWeight: 400
                   },
-                  children: o(h.label)
+                  children: a(h.label)
                 }
               )
             ]
@@ -2349,11 +2376,11 @@ const jt = l.memo($r), Vr = ({
     }
   ) });
 };
-Vr.displayName = "RadioInput";
-const Bt = l.memo(Vr), Ht = {
+Ar.displayName = "RadioInput";
+const qt = l.memo(Ar), Ut = {
   display: "flex",
   gap: 4
-}, qt = {
+}, Wt = {
   cursor: "pointer",
   fontSize: "1.5rem",
   lineHeight: 1,
@@ -2361,23 +2388,23 @@ const Bt = l.memo(Vr), Ht = {
   marginRight: "0.25rem",
   userSelect: "none",
   transition: "color 0.12s ease"
-}, Ar = ({ field: e, value: r, onChange: t, onError: n, error: a }) => {
-  const { t: o } = H(), c = T(e, a), s = e.max ?? 5, i = e.icon?.trim() || "★", [d, m] = l.useState(null), u = l.useRef([]), f = l.useMemo(() => Math.min(Math.max(r ?? 0, 0), s), [r, s]), b = l.useMemo(() => c(f) ?? null, [c, f]);
+}, Rr = ({ field: e, value: r, onChange: t, onError: n, error: o }) => {
+  const { t: a } = B(), c = T(e, o), s = e.max ?? 5, i = e.icon?.trim() || "★", [d, m] = l.useState(null), u = l.useRef([]), f = l.useMemo(() => Math.min(Math.max(r ?? 0, 0), s), [r, s]), b = l.useMemo(() => c(f) ?? null, [c, f]);
   l.useEffect(() => {
     n?.(b);
   }, [b, n]);
-  const N = l.useCallback(
+  const C = l.useCallback(
     (h) => {
       const y = Math.min(Math.max(h, 0), s);
       t?.(y);
     },
     [s, t]
-  ), C = l.useCallback(
+  ), N = l.useCallback(
     (h, y) => {
       switch (h.key) {
         case "Enter":
         case " ":
-          h.preventDefault(), N(y + 1);
+          h.preventDefault(), C(y + 1);
           break;
         case "ArrowRight":
         case "ArrowUp":
@@ -2389,7 +2416,7 @@ const Bt = l.memo(Vr), Ht = {
           break;
       }
     },
-    [s, N]
+    [s, C]
   );
   return /* @__PURE__ */ p(O, { field: e, error: b, children: /* @__PURE__ */ p(
     "div",
@@ -2398,7 +2425,7 @@ const Bt = l.memo(Vr), Ht = {
       "aria-labelledby": `${e.name}-label`,
       "aria-invalid": !!b,
       "aria-describedby": b ? `${e.name}-error` : void 0,
-      style: Ht,
+      style: Ut,
       children: Array.from({ length: s }, (h, y) => {
         const E = y < f, M = d !== null && y <= d || E ? "gold" : "lightgray";
         return /* @__PURE__ */ p(
@@ -2409,12 +2436,12 @@ const Bt = l.memo(Vr), Ht = {
             tabIndex: f > 0 ? y === f - 1 ? 0 : -1 : y === 0 ? 0 : -1,
             "aria-checked": E,
             "aria-label": `Rating ${y + 1}`,
-            title: o(`${e.displayName} ${y + 1}`),
-            onClick: () => N(y + 1),
-            onKeyDown: ($) => C($, y),
+            title: a(`${e.displayName} ${y + 1}`),
+            onClick: () => C(y + 1),
+            onKeyDown: ($) => N($, y),
             onMouseEnter: () => m(y),
             onMouseLeave: () => m(null),
-            style: { ...qt, color: M },
+            style: { ...Wt, color: M },
             children: i
           },
           y
@@ -2423,15 +2450,15 @@ const Bt = l.memo(Vr), Ht = {
     }
   ) });
 };
-Ar.displayName = "RatingInput";
-const Ut = l.memo(Ar), Rr = ({
+Rr.displayName = "RatingInput";
+const _t = l.memo(Rr), Dr = ({
   field: e,
   value: r,
   onChange: t,
   onError: n,
-  error: a
+  error: o
 }) => {
-  const { t: o } = H(), c = T(e, a), { inputRef: s, error: i, handleChange: d } = _({
+  const { t: a } = B(), c = T(e, o), { inputRef: s, error: i, handleChange: d } = _({
     value: r,
     onChange: t,
     onError: n,
@@ -2457,7 +2484,7 @@ const Ut = l.memo(Ar), Rr = ({
       {
         type: "button",
         onClick: f,
-        "aria-label": o(m ? "Hide password" : "Show password"),
+        "aria-label": a(m ? "Hide password" : "Show password"),
         style: {
           background: "transparent",
           border: "none",
@@ -2472,23 +2499,23 @@ const Ut = l.memo(Ar), Rr = ({
     )
   ] }) });
 };
-Rr.displayName = "PasswordInput";
-const Wt = l.memo(Rr), Dr = ({ field: e, value: r, onChange: t, onError: n, error: a }) => {
-  const o = T(e, a), c = e.min ?? 0, s = e.max ?? 100, [i, d] = l.useState(
+Dr.displayName = "PasswordInput";
+const Kt = l.memo(Dr), zr = ({ field: e, value: r, onChange: t, onError: n, error: o }) => {
+  const a = T(e, o), c = e.min ?? 0, s = e.max ?? 100, [i, d] = l.useState(
     () => isNaN(Number(r)) ? String(c) : String(Number(r))
   );
   l.useEffect(() => {
     const b = isNaN(Number(r)) ? String(c) : String(Number(r));
     d(b);
   }, [r, c]);
-  const m = l.useMemo(() => o(i) ?? null, [o, i]);
+  const m = l.useMemo(() => a(i) ?? null, [a, i]);
   l.useEffect(() => {
     n?.(m);
   }, [m, n]);
   const u = l.useCallback(
     (b) => {
-      const N = b.target.value;
-      d(N), t?.(N);
+      const C = b.target.value;
+      d(C), t?.(C);
     },
     [t]
   ), f = isNaN(Number(i)) ? String(c) : String(Number(i));
@@ -2534,15 +2561,15 @@ const Wt = l.memo(Rr), Dr = ({ field: e, value: r, onChange: t, onError: n, erro
     )
   ] }) });
 };
-Dr.displayName = "SliderInput";
-const _t = l.memo(Dr), Pr = ({
+zr.displayName = "SliderInput";
+const Gt = l.memo(zr), Pr = ({
   field: e,
   value: r,
   onChange: t,
   onError: n,
-  error: a
+  error: o
 }) => {
-  const { t: o, formStyle: c, fieldStyle: s } = H(), d = T(e, a)(r);
+  const { t: a, formStyle: c, fieldStyle: s } = B(), d = T(e, o)(r);
   l.useEffect(() => {
     n?.(d);
   }, [d, n]);
@@ -2557,7 +2584,7 @@ const _t = l.memo(Dr), Pr = ({
     height: 24,
     ...f(m, "switch", "label"),
     ...f(u, void 0, "label")
-  }), [m, u]), N = l.useMemo(() => ({
+  }), [m, u]), C = l.useMemo(() => ({
     position: "absolute",
     opacity: 0,
     top: 0,
@@ -2570,7 +2597,7 @@ const _t = l.memo(Dr), Pr = ({
     // Make hidden input non-interactive to avoid event conflicts
     ...f(m, "switch", "hiddenInput"),
     ...f(u, void 0, "hiddenInput")
-  }), [m, u]), C = l.useMemo(() => ({
+  }), [m, u]), N = l.useMemo(() => ({
     position: "absolute",
     cursor: "pointer",
     top: 0,
@@ -2611,7 +2638,7 @@ const _t = l.memo(Dr), Pr = ({
         className: V.label,
         htmlFor: e.name,
         style: { textAlign: "left", justifyContent: "flex-start" },
-        children: o(e.displayName)
+        children: a(e.displayName)
       }
     ),
     /* @__PURE__ */ D("label", { style: b, children: [
@@ -2622,10 +2649,10 @@ const _t = l.memo(Dr), Pr = ({
           type: "checkbox",
           checked: y,
           readOnly: !0,
-          "aria-label": o(e.displayName),
+          "aria-label": a(e.displayName),
           "aria-invalid": !1,
           "aria-describedby": void 0,
-          style: N,
+          style: C,
           tabIndex: -1
         }
       ),
@@ -2643,7 +2670,7 @@ const _t = l.memo(Dr), Pr = ({
             (F.key === " " || F.key === "Spacebar" || F.key === "Space" || F.key === "Enter") && (F.preventDefault(), E());
           },
           className: `reactaform-switch ${y ? "active checked on" : ""} `,
-          style: y ? { ...C, backgroundColor: "var(--reactaform-switch-on-bg, #22c55e)", borderColor: "var(--reactaform-switch-on-border, #16a34a)" } : C,
+          style: y ? { ...N, backgroundColor: "var(--reactaform-switch-on-bg, #22c55e)", borderColor: "var(--reactaform-switch-on-border, #16a34a)" } : N,
           children: /* @__PURE__ */ p(
             "span",
             {
@@ -2659,18 +2686,18 @@ const _t = l.memo(Dr), Pr = ({
   ] }) });
 };
 Pr.displayName = "SwitchInput";
-const Kt = l.memo(Pr), xe = ({
+const Jt = l.memo(Pr), xe = ({
   field: e,
   value: r,
   onChange: t,
   onError: n,
-  error: a
+  error: o
 }) => {
-  const o = T(e, a), { inputRef: c, error: s, handleChange: i } = _({
+  const a = T(e, o), { inputRef: c, error: s, handleChange: i } = _({
     value: r,
     onChange: t,
     onError: n,
-    validate: o
+    validate: a
   });
   return /* @__PURE__ */ p(O, { field: e, error: s, children: /* @__PURE__ */ p(
     "input",
@@ -2688,18 +2715,18 @@ const Kt = l.memo(Pr), xe = ({
   ) });
 };
 xe.displayName = "TextInput";
-const zr = ({
+const Lr = ({
   field: e,
   value: r,
   onChange: t,
   onError: n,
-  error: a
+  error: o
 }) => {
-  const o = T(e, a), { inputRef: c, error: s, handleChange: i } = _({
+  const a = T(e, o), { inputRef: c, error: s, handleChange: i } = _({
     value: r,
     onChange: t,
     onError: n,
-    validate: o
+    validate: a
   });
   return /* @__PURE__ */ p(O, { field: e, error: s, children: /* @__PURE__ */ p(
     "input",
@@ -2718,35 +2745,35 @@ const zr = ({
     }
   ) });
 };
-zr.displayName = "TimeInput";
-const Gt = l.memo(zr);
-function Jt({
+Lr.displayName = "TimeInput";
+const Yt = l.memo(Lr);
+function Xt({
   pos: e,
   options: r,
   onClose: t,
   onClickOption: n
 }) {
-  const a = l.useRef(null), o = l.useRef(!1), [c, s] = l.useState({
+  const o = l.useRef(null), a = l.useRef(!1), [c, s] = l.useState({
     top: e?.y ?? 0,
     left: e?.x ?? 0,
     ready: !1
   }), i = typeof window < "u" ? document.getElementById("popup-root") || document.body : null;
   return l.useEffect(() => {
     function d(m) {
-      o.current || m.target.dataset?.popupMenu === "item" || a.current && m.target instanceof Node && !a.current.contains(m.target) && t();
+      a.current || m.target.dataset?.popupMenu === "item" || o.current && m.target instanceof Node && !o.current.contains(m.target) && t();
     }
     return document.addEventListener("mousedown", d), () => document.removeEventListener("mousedown", d);
   }, [t]), l.useLayoutEffect(() => {
-    if (!a.current || !e || e.x == null || e.y == null)
+    if (!o.current || !e || e.x == null || e.y == null)
       return;
-    const d = a.current.getBoundingClientRect(), m = window.innerWidth, u = window.innerHeight;
+    const d = o.current.getBoundingClientRect(), m = window.innerWidth, u = window.innerHeight;
     let f = e.x, b = e.y;
     f + d.width > m && (f = Math.max(0, m - d.width - 10)), b + d.height > u && (b = Math.max(0, e.y - d.height - 5)), s({ top: b, left: f, ready: !0 });
   }, [e, r]), !i || r === void 0 || r.length === 0 || !e || e.x == null || e.y == null ? null : de.createPortal(
     /* @__PURE__ */ p(
       "div",
       {
-        ref: a,
+        ref: o,
         onMouseDown: (d) => {
           d.stopPropagation();
         },
@@ -2770,11 +2797,11 @@ function Jt({
           {
             "data-popup-menu": "item",
             onMouseDown: (u) => {
-              u.stopPropagation(), o.current = !0;
+              u.stopPropagation(), a.current = !0;
             },
             onClick: (u) => {
               u.stopPropagation(), u.preventDefault(), n(d), t(), setTimeout(() => {
-                o.current = !1;
+                a.current = !1;
               }, 100);
             },
             style: {
@@ -2916,31 +2943,31 @@ const $e = {
     rad: Math.PI / 180,
     rev: 1 / 360
   }
-}, Re = {}, Yt = /* @__PURE__ */ new Set([
+}, Re = {}, Zt = /* @__PURE__ */ new Set([
   ...Object.keys($e),
   ...Object.keys(Ve),
   ...Object.keys(Ae)
 ]);
-for (const e of Yt) {
-  const r = {}, t = $e[e] ?? [], n = Ve[e] ?? {}, a = Ae[e] ?? {};
-  for (const o of t) {
-    const c = n[o];
-    r[o] = {
-      name: typeof c == "string" ? c : String(o),
-      shortName: o,
-      factor: o in a ? a[o] : void 0
+for (const e of Zt) {
+  const r = {}, t = $e[e] ?? [], n = Ve[e] ?? {}, o = Ae[e] ?? {};
+  for (const a of t) {
+    const c = n[a];
+    r[a] = {
+      name: typeof c == "string" ? c : String(a),
+      shortName: a,
+      factor: a in o ? o[a] : void 0
     };
   }
-  for (const [o, c] of Object.entries(n))
-    if (!r[o]) {
-      const s = typeof c == "string" ? c : String(o);
-      r[o] = { name: s, shortName: o, factor: o in a ? a[o] : void 0 };
+  for (const [a, c] of Object.entries(n))
+    if (!r[a]) {
+      const s = typeof c == "string" ? c : String(a);
+      r[a] = { name: s, shortName: a, factor: a in o ? o[a] : void 0 };
     }
-  for (const [o, c] of Object.entries(a))
-    r[o] || (r[o] = { name: String(o), shortName: String(o), factor: c });
+  for (const [a, c] of Object.entries(o))
+    r[a] || (r[a] = { name: String(a), shortName: String(a), factor: c });
   Re[e] = r;
 }
-function Lr(e, r, t) {
+function Or(e, r, t) {
   if (e === "C") {
     if (r === "F") return t * (9 / 5) + 32;
     if (r === "K") return t + 273.15;
@@ -2953,33 +2980,33 @@ function Lr(e, r, t) {
   }
   return t;
 }
-function Or(e) {
+function Tr(e) {
   const r = Re[e];
   if (!r) return null;
   const t = {}, n = [];
-  for (const [o, c] of Object.entries(r))
-    typeof c.factor == "number" && (t[o] = c.factor), n.push(o);
+  for (const [a, c] of Object.entries(r))
+    typeof c.factor == "number" && (t[a] = c.factor), n.push(a);
   return {
     default: Object.keys(r)[0] ?? "",
     units: n,
     factors: t
   };
 }
-const la = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const mo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  convertTemperature: Lr,
+  convertTemperature: Or,
   dimensionUnitDisplayMap: Ve,
   dimensionUnitsMap: $e,
   dimensonUnitFactorsMap: Ae,
-  getUnitFactors: Or,
+  getUnitFactors: Tr,
   unitsByDimension: Re
-}, Symbol.toStringTag, { value: "Module" })), Tr = l.memo(({
+}, Symbol.toStringTag, { value: "Module" })), jr = l.memo(({
   disabled: e,
   inputValue: r,
   selectedUnit: t,
   dimension: n,
-  unitFactors: a,
-  onConversionSelect: o,
+  unitFactors: o,
+  onConversionSelect: a,
   t: c
 }) => {
   const [s, i] = l.useState(!1), [d, m] = l.useState(null), [u, f] = l.useState([]), b = l.useCallback(
@@ -2991,8 +3018,8 @@ const la = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
       m({ x: E.left, y: E.bottom });
       const F = [];
       if (n === "temperature")
-        a.units.forEach(($) => {
-          const R = Lr(t, $, y);
+        o.units.forEach(($) => {
+          const R = Or(t, $, y);
           Number.isFinite(R) && F.push({
             label: `${R.toFixed(6)} ${c($)}`,
             value: R.toString(),
@@ -3000,8 +3027,8 @@ const la = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
           });
         });
       else {
-        const $ = a.factors[t];
-        $ !== void 0 && Object.entries(a.factors).forEach(([R, I]) => {
+        const $ = o.factors[t];
+        $ !== void 0 && Object.entries(o.factors).forEach(([R, I]) => {
           const v = y / $ * I;
           Number.isFinite(v) && F.push({
             label: `${v.toFixed(6)} ${c(R)}`,
@@ -3012,13 +3039,13 @@ const la = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
       }
       f(F), i(F.length > 0);
     },
-    [e, r, t, n, a, c]
-  ), N = l.useCallback(
+    [e, r, t, n, o, c]
+  ), C = l.useCallback(
     (h) => {
-      i(!1), m(null), o(h);
+      i(!1), m(null), a(h);
     },
-    [o]
-  ), C = l.useCallback(() => {
+    [a]
+  ), N = l.useCallback(() => {
     i(!1), m(null);
   }, []);
   return /* @__PURE__ */ D(Ie, { children: [
@@ -3049,63 +3076,63 @@ const la = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
       }
     ),
     s && u.length > 0 && /* @__PURE__ */ p(
-      Jt,
+      Xt,
       {
         pos: d,
         options: u,
-        onClose: C,
-        onClickOption: N
+        onClose: N,
+        onClickOption: C
       }
     )
   ] });
 });
-Tr.displayName = "ConversionButton";
-const jr = ({ field: e, value: r, onChange: t, onError: n }) => {
-  const { t: a } = H(), o = T(e), c = e.dimension, s = l.useMemo(() => c ? Or(c) : null, [c]), i = String(r?.[0] ?? ""), d = String(r?.[1] ?? s?.default ?? ""), [m, u] = l.useState(i), [f, b] = l.useState(d);
+jr.displayName = "ConversionButton";
+const Br = ({ field: e, value: r, onChange: t, onError: n }) => {
+  const { t: o } = B(), a = T(e), c = e.dimension, s = l.useMemo(() => c ? Tr(c) : null, [c]), i = String(r?.[0] ?? ""), d = String(r?.[1] ?? s?.default ?? ""), [m, u] = l.useState(i), [f, b] = l.useState(d);
   l.useEffect(() => {
     u(i);
   }, [i]), l.useEffect(() => {
     b(d);
   }, [d]);
-  const N = o([m, f]);
+  const C = a([m, f]);
   l.useEffect(() => {
-    n?.(N);
-  }, [N, n]);
-  const C = l.useCallback(
+    n?.(C);
+  }, [C, n]);
+  const N = l.useCallback(
     (M) => {
       const $ = M.target.value;
-      u($), o([$, f]), t?.([$, f]);
+      u($), a([$, f]), t?.([$, f]);
     },
-    [f, o, t]
+    [f, a, t]
   ), h = l.useCallback(
     (M) => {
       const $ = M.target.value;
-      b($), o([m, $]), t?.([m, $]);
+      b($), a([m, $]), t?.([m, $]);
     },
-    [m, o, t]
+    [m, a, t]
   ), y = l.useCallback(
     (M) => {
       u(M.value), b(M.unit), t?.([M.value, M.unit]);
     },
     [t]
   ), E = l.useMemo(
-    () => s ? s.units.map((M) => /* @__PURE__ */ p("option", { value: M, children: a(M) }, M)) : [],
-    [s, a]
+    () => s ? s.units.map((M) => /* @__PURE__ */ p("option", { value: M, children: o(M) }, M)) : [],
+    [s, o]
   );
   if (!c || !s) return null;
-  const F = !!N || !m.trim();
-  return /* @__PURE__ */ p(O, { field: e, error: N, children: /* @__PURE__ */ D("div", { style: { display: "flex", alignItems: "center", gap: "var(--reactaform-unit-gap, 8px)", width: "100%" }, children: [
+  const F = !!C || !m.trim();
+  return /* @__PURE__ */ p(O, { field: e, error: C, children: /* @__PURE__ */ D("div", { style: { display: "flex", alignItems: "center", gap: "var(--reactaform-unit-gap, 8px)", width: "100%" }, children: [
     /* @__PURE__ */ p(
       "input",
       {
         id: e.name,
         type: "text",
         value: m,
-        onChange: C,
+        onChange: N,
         style: { flex: "2 1 0" },
         className: U(V.input, V.textInput),
-        "aria-invalid": !!N,
-        "aria-describedby": N ? `${e.name}-error` : void 0
+        "aria-invalid": !!C,
+        "aria-describedby": C ? `${e.name}-error` : void 0
       }
     ),
     /* @__PURE__ */ p(
@@ -3116,13 +3143,13 @@ const jr = ({ field: e, value: r, onChange: t, onError: n }) => {
         onChange: h,
         style: { flex: "1 1 0" },
         className: U(V.input, V.inputSelect),
-        "aria-invalid": !!N,
-        "aria-describedby": N ? `${e.name}-error` : void 0,
+        "aria-invalid": !!C,
+        "aria-describedby": C ? `${e.name}-error` : void 0,
         children: E
       }
     ),
     /* @__PURE__ */ p(
-      Tr,
+      jr,
       {
         disabled: F,
         inputValue: m,
@@ -3130,24 +3157,24 @@ const jr = ({ field: e, value: r, onChange: t, onError: n }) => {
         dimension: c,
         unitFactors: s,
         onConversionSelect: y,
-        t: a
+        t: o
       }
     )
   ] }) });
 };
-jr.displayName = "UnitValueInput";
-const Xt = l.memo(jr), Br = ({
+Br.displayName = "UnitValueInput";
+const Qt = l.memo(Br), Hr = ({
   field: e,
   value: r,
   onChange: t,
   onError: n,
-  error: a
+  error: o
 }) => {
-  const o = T(e, a), { inputRef: c, error: s, handleChange: i } = _({
+  const a = T(e, o), { inputRef: c, error: s, handleChange: i } = _({
     value: r,
     onChange: t,
     onError: n,
-    validate: o
+    validate: a
   });
   return /* @__PURE__ */ p(O, { field: e, error: s, children: /* @__PURE__ */ p(
     "input",
@@ -3164,78 +3191,69 @@ const Xt = l.memo(jr), Br = ({
     }
   ) });
 };
-Br.displayName = "UrlInput";
-const Zt = l.memo(Br), se = new ne();
-function ua(e, r) {
+Hr.displayName = "UrlInput";
+const en = l.memo(Hr), se = new ne();
+function fo(e, r) {
   se.register(e, r);
 }
-function Qt(e) {
+function rn(e) {
   return se.get(e);
 }
-function ma(e) {
+function po(e) {
   return se.has(e);
 }
-function da(e) {
+function go(e) {
   return se.unregister(e);
 }
-function fa() {
+function ho() {
   return se.list();
 }
-const Hr = ({
+const qr = ({
   field: e,
   valuesMap: r,
   handleChange: t,
   handleError: n
 }) => {
-  const { t: a } = H(), [o, c] = l.useState(!1), [s, i] = l.useState(null), d = l.useCallback(async () => {
+  const { t: o } = B(), [a, c] = l.useState(!1), [s, i] = l.useState(null), d = l.useCallback(async () => {
     if (!e.action) {
       console.warn(`Button "${e.name}" has no action defined`);
       return;
     }
-    const u = Qt(e.action);
-    if (!u) {
-      const f = `Button handler "${e.action}" not found`;
-      console.error(f), i(f);
+    const f = rn(e.action);
+    if (!f) {
+      const b = `Button handler "${e.action}" not found`;
+      console.error(b), i(b);
       return;
     }
     c(!0), i(null);
     try {
-      await u(r, t, n, a);
-    } catch (f) {
-      const b = f instanceof Error ? f.message : String(f);
-      console.error(`Button handler "${e.action}" failed:`, b), i(b);
+      await f(r, t, n, o);
+    } catch (b) {
+      const C = b instanceof Error ? b.message : String(b);
+      console.error(`Button handler "${e.action}" failed:`, C), i(C);
     } finally {
       c(!1);
     }
-  }, [e, r, t, n, a]), m = {
-    padding: "8px 16px",
-    cursor: o ? "wait" : "pointer",
-    opacity: o ? 0.6 : 1,
-    width: "100%",
-    minHeight: "var(--reactaform-input-height, 34px)"
-  };
-  return /* @__PURE__ */ p(O, { field: e, rightAlign: !1, error: s, children: /* @__PURE__ */ p(
+  }, [e, r, t, n, o]), u = { ...{
+    cursor: a ? "wait" : "pointer",
+    opacity: a ? 0.6 : 1
+  } };
+  return e.width && typeof e.width == "number" && e.width > 0 && (u.width = `${e.width}px`), /* @__PURE__ */ p(O, { field: e, rightAlign: !0, error: s, children: /* @__PURE__ */ p(
     "button",
     {
       type: "button",
       className: V.button,
       onClick: d,
-      disabled: o,
-      "aria-label": a(e.displayName),
-      "aria-busy": o,
-      style: m,
-      onMouseEnter: (u) => {
-        o || (u.currentTarget.style.backgroundColor = "var(--reactaform-button-bg-hover, var(--reactaform-success-color-hover, #0056b3))");
-      },
-      onMouseLeave: (u) => {
-        o || (u.currentTarget.style.backgroundColor = "var(--reactaform-button-bg, var(--reactaform-success-color, #4CAF50))");
-      },
-      children: a(o ? "Processing..." : e.displayName)
+      disabled: a,
+      "aria-label": o(e.displayName),
+      "aria-busy": a,
+      style: u,
+      children: o(a ? "Processing..." : e.displayName)
     }
   ) });
 };
-Hr.displayName = "Button";
-const en = l.memo(Hr), rn = {
+qr.displayName = "Button";
+const tn = l.memo(qr), nn = {
   // No debounce
   checkbox: !1,
   switch: !1,
@@ -3247,6 +3265,7 @@ const en = l.memo(Hr), rn = {
   file: !1,
   image: !1,
   separator: !1,
+  description: !1,
   button: !1,
   // Buttons don't need debouncing
   // Standard text inputs
@@ -3267,96 +3286,97 @@ const en = l.memo(Hr), rn = {
   slider: { wait: 100, leading: !0, trailing: !0 },
   stepper: { wait: 100, leading: !0, trailing: !0 }
 }, me = new ne(), De = {
-  button: en,
-  checkbox: yt,
-  color: Ct,
-  date: Nt,
-  dropdown: It,
-  email: Et,
-  file: Ft,
-  float: Vt,
-  "float-array": $t,
-  image: Rt,
-  int: Pt,
-  "int-array": Dt,
-  "multi-selection": Ot,
-  multiline: zt,
-  password: Wt,
-  phone: jt,
-  radio: Bt,
-  rating: Ut,
-  separator: Mt,
-  slider: _t,
+  button: tn,
+  checkbox: vt,
+  color: Nt,
+  date: kt,
+  description: It,
+  dropdown: Mt,
+  email: Ft,
+  file: Vt,
+  float: Rt,
+  "float-array": At,
+  image: zt,
+  int: Lt,
+  "int-array": Pt,
+  "multi-selection": jt,
+  multiline: Ot,
+  password: Kt,
+  phone: Ht,
+  radio: qt,
+  rating: _t,
+  separator: $t,
+  slider: Gt,
   string: xe,
-  stepper: Tt,
-  switch: Kt,
+  stepper: Bt,
+  switch: Jt,
   text: xe,
-  time: Gt,
-  unit: Xt,
-  url: Zt
+  time: Yt,
+  unit: Qt,
+  url: en
 };
-function tn(e) {
+function on(e) {
   return e in De;
 }
-function nn(e, r) {
-  const { wait: t = 200, leading: n, trailing: a } = r, o = l.memo((c) => {
+function an(e, r) {
+  const { wait: t = 200, leading: n, trailing: o } = r, a = l.memo((c) => {
     const s = l.useRef(c.onChange);
     l.useEffect(() => {
       s.current = c.onChange;
     }, [c.onChange]);
-    const { callback: i, cancel: d } = ct(
+    const { callback: i, cancel: d } = lt(
       (...m) => {
         s.current?.(...m);
       },
       t,
-      { leading: n, trailing: a }
+      { leading: n, trailing: o }
     );
     return l.useEffect(() => d, [d]), l.createElement(
       e,
       { ...c, onChange: i }
     );
   });
-  return o.displayName = "DebouncedFieldWrapper", o;
+  return a.displayName = "DebouncedFieldWrapper", a;
 }
-function qr(e, r, t) {
+function Ur(e, r, t) {
   const n = r;
   if (!t && e in De) {
     console.warn(`Can't overwrite base component type "${e}".`);
     return;
   }
-  const a = rn[e];
-  if (a === !1) {
+  const o = nn[e];
+  if (o === !1) {
     me.register(e, n);
     return;
   }
-  const o = a ?? { wait: 200 };
-  ar ? me.register(e, n) : me.register(
+  const a = o ?? { wait: 200 };
+  or ? me.register(e, n) : me.register(
     e,
-    nn(n, o)
+    an(n, a)
   );
 }
-function Ur(e, r) {
-  qr(e, r, !1);
+function Wr(e, r) {
+  Ur(e, r, !1);
 }
-function Wr(e) {
+function _r(e) {
   return me.get(e);
 }
 let Ye = !1;
-function an() {
+function sn() {
   Ye || (Object.entries(De).forEach(([e, r]) => {
-    qr(e, r, !0);
+    Ur(e, r, !0);
   }), Ye = !0);
 }
-const Pe = l.memo(
-  ({ field: e, valuesMap: r, handleChange: t, handleError: n, errorsMap: a }) => {
-    const o = Wr(e.type), c = r[e.name], s = a ? a[e.name] ?? null : void 0, i = l.useMemo(() => c, [c]), d = l.useCallback(
+const ze = l.memo(
+  ({ field: e, valuesMap: r, handleChange: t, handleError: n, errorsMap: o }) => {
+    const a = _r(e.type), c = r[e.name], s = o ? o[e.name] ?? null : void 0, i = l.useMemo(() => c, [c]), d = l.useCallback(
       (u) => t(e.name, u),
       [t, e.name]
     ), m = l.useCallback(
       (u) => n?.(e.name, u),
       [n, e.name]
     );
-    return o ? e.type === "button" ? /* @__PURE__ */ p(o, { ...{
+    return a ? e.type === "button" ? /* @__PURE__ */ p(a, { ...{
       field: e,
       value: null,
       valuesMap: r,
@@ -3364,7 +3384,7 @@ const Pe = l.memo(
       handleError: n || (() => {
       })
     } }) : /* @__PURE__ */ p(
-      o,
+      a,
       {
         field: e,
         value: i,
@@ -3376,9 +3396,9 @@ const Pe = l.memo(
   },
   (e, r) => e.field === r.field && e.valuesMap[e.field.name] === r.valuesMap[r.field.name] && e.handleChange === r.handleChange && e.handleError === r.handleError && e.errorsMap?.[e.field.name] === r.errorsMap?.[r.field.name]
 );
-Pe.displayName = "FieldRenderer";
-const _r = l.memo(
-  ({ groupName: e, defaultOpen: r = !0, fields: t, valuesMap: n, handleChange: a, handleError: o, errorsMap: c, t: s }) => {
+ze.displayName = "FieldRenderer";
+const Kr = l.memo(
+  ({ groupName: e, defaultOpen: r = !0, fields: t, valuesMap: n, handleChange: o, handleError: a, errorsMap: c, t: s }) => {
     const [i, d] = l.useState(r), m = l.useCallback(() => d((u) => !u), []);
     return /* @__PURE__ */ D("fieldset", { className: "reactaform-group", children: [
       /* @__PURE__ */ D("legend", { onClick: m, className: "reactaform-group_legend", children: [
@@ -3386,12 +3406,12 @@ const _r = l.memo(
         /* @__PURE__ */ p("span", { className: "reactaform-group_legend_arrow", children: i ? "▼" : "▶" })
       ] }),
       i && t.map((u) => /* @__PURE__ */ p(
-        Pe,
+        ze,
         {
           field: u,
           valuesMap: n,
-          handleChange: a,
-          handleError: o,
+          handleChange: o,
+          handleError: a,
           errorsMap: c
         },
         u.name
@@ -3399,64 +3419,64 @@ const _r = l.memo(
     ] });
   }
 );
-_r.displayName = "FieldGroup";
-const ze = (e, r, t, n) => {
-  const a = r[e];
-  if (!a?.children) return;
-  const o = t[e], c = o != null ? String(o) : "", s = a.children[c];
+Kr.displayName = "FieldGroup";
+const Pe = (e, r, t, n) => {
+  const o = r[e];
+  if (!o?.children) return;
+  const a = t[e], c = a != null ? String(a) : "", s = o.children[c];
   if (Array.isArray(s))
     for (const i of s)
-      typeof i == "string" && r[i] && (n[i] = !0, ze(i, r, t, n));
-}, Kr = (e, r, t) => {
+      typeof i == "string" && r[i] && (n[i] = !0, Pe(i, r, t, n));
+}, Gr = (e, r, t) => {
   const n = r[e];
   if (!n?.children) return;
-  const a = Object.values(n.children).flat();
-  for (const o of a)
-    typeof o == "string" && o in t && (t[o] = !1, Kr(o, r, t));
-}, on = (e, r, t, n) => {
-  const a = { ...t };
-  return e.forEach((o) => {
-    (!o.parents || Object.keys(o.parents).length === 0) && (a[o.name] = !0, ze(o.name, n, r, a));
-  }), a;
-}, sn = (e, r, t, n, a) => {
-  const o = { ...e }, c = r[n];
-  if (Kr(n, r, o), a != null && c?.children) {
-    const s = String(a), i = c.children[s];
+  const o = Object.values(n.children).flat();
+  for (const a of o)
+    typeof a == "string" && a in t && (t[a] = !1, Gr(a, r, t));
+}, cn = (e, r, t, n) => {
+  const o = { ...t };
+  return e.forEach((a) => {
+    (!a.parents || Object.keys(a.parents).length === 0) && (o[a.name] = !0, Pe(a.name, n, r, o));
+  }), o;
+}, ln = (e, r, t, n, o) => {
+  const a = { ...e }, c = r[n];
+  if (Gr(n, r, a), o != null && c?.children) {
+    const s = String(o), i = c.children[s];
     if (Array.isArray(i))
       for (const d of i)
-        typeof d == "string" && r[d] && (o[d] = !0, ze(d, r, t, o));
+        typeof d == "string" && r[d] && (a[d] = !0, Pe(d, r, t, a));
   }
-  return o;
-}, cn = (e, r) => {
+  return a;
+}, un = (e, r) => {
   const t = /* @__PURE__ */ new Map();
-  let n = null, a = null, o = 0;
+  let n = null, o = null, a = 0;
   for (const c of e) {
     const s = c.group;
     if (!s) {
-      n = null, a = null;
+      n = null, o = null;
       continue;
     }
     if (s === n)
-      r[c.name].group = a ?? s;
+      r[c.name].group = o ?? s;
     else {
       if (!t.has(s))
-        t.set(s, 1), a = null, r[c.name].group = s;
+        t.set(s, 1), o = null, r[c.name].group = s;
       else {
         const i = t.get(s), d = `${s}(${i})`;
-        t.set(s, i + 1), a = d, r[c.name].group = d, o++;
+        t.set(s, i + 1), o = d, r[c.name].group = d, a++;
       }
       n = s;
     }
   }
-  return o;
-}, ln = (e, r = {}) => {
+  return a;
+}, mn = (e, r = {}) => {
   const { includeEmpty: t = !0 } = r, n = [];
-  let a = null, o = [], c = 0;
+  let o = null, a = [], c = 0;
   for (const i of e) {
     const d = i.group || null;
-    d !== a ? ((o.length > 0 || t) && n.push({ name: a, fields: o }), a = d, o = [i]) : o.push(i);
+    d !== o ? ((a.length > 0 || t) && n.push({ name: o, fields: a }), o = d, a = [i]) : a.push(i);
   }
-  (o.length > 0 || t) && n.push({ name: a, fields: o }), c = n.filter((i) => i.fields.length === 0).length;
+  (a.length > 0 || t) && n.push({ name: o, fields: a }), c = n.filter((i) => i.fields.length === 0).length;
   const s = Math.max(0, ...n.map((i) => i.fields.length));
   return {
     groups: n,
@@ -3467,16 +3487,16 @@ const ze = (e, r, t, n) => {
     }
   };
 }, Le = new ne();
-function Gr(e, r) {
+function Jr(e, r) {
   Le.register(e, r);
 }
-function un(e) {
+function dn(e) {
   return Le.get(e);
 }
-function mn(e) {
+function fn(e) {
   return Le.get(e);
 }
-Gr(
+Jr(
   "Preset_AlertSubmitHandler",
   (e, r, t) => {
     const n = {
@@ -3484,12 +3504,12 @@ Gr(
       version: e.version,
       definition: e.name,
       values: t
-    }, a = JSON.stringify(n, null, 2);
-    alert(a);
+    }, o = JSON.stringify(n, null, 2);
+    alert(o);
   }
 );
-async function dn(e, r, t, n, a, o, c) {
-  const s = a ? Object.values(a).filter(Boolean) : [];
+async function pn(e, r, t, n, o, a, c) {
+  const s = o ? Object.values(o).filter(Boolean) : [];
   if (s.length > 0)
     return {
       success: !1,
@@ -3501,28 +3521,28 @@ async function dn(e, r, t, n, a, o, c) {
     for (const u of e.properties) {
       const f = u.name, b = i[f];
       if (b == null) continue;
-      const N = u.type;
+      const C = u.type;
       try {
-        if (N === "int") {
-          const C = String(b).trim();
-          if (C === "")
+        if (C === "int") {
+          const N = String(b).trim();
+          if (N === "")
             i[f] = 0;
           else {
-            const h = Number(C);
+            const h = Number(N);
             Number.isInteger(h) ? i[f] = Math.trunc(h) : d.push(n("Invalid integer format for field {{1}}", u.displayName || f));
           }
-        } else if (N === "number" || N === "float") {
-          const C = String(b).trim();
-          if (C === "")
+        } else if (C === "number" || C === "float") {
+          const N = String(b).trim();
+          if (N === "")
             i[f] = 0;
           else {
-            const h = Number(C);
+            const h = Number(N);
             isNaN(h) ? d.push(n("Invalid number format for field {{1}}", u.displayName || f)) : i[f] = h;
           }
-        } else if (N === "int-array" || N === "float-array") {
-          const C = String(b).split(",").map((E) => E.trim()).filter(Boolean), h = [];
+        } else if (C === "int-array" || C === "float-array") {
+          const N = String(b).split(",").map((E) => E.trim()).filter(Boolean), h = [];
           let y = !1;
-          for (const E of C) {
+          for (const E of N) {
             const F = Number(E);
             if (isNaN(F)) {
               d.push(n("Invalid number {{1}} in array for field {{2}}", E, u.displayName || f)), y = !0;
@@ -3532,8 +3552,8 @@ async function dn(e, r, t, n, a, o, c) {
           }
           y || (i[f] = h);
         }
-      } catch (C) {
-        d.push(n("Error processing field {{1}}: {{2}}", u.displayName || f, C instanceof Error ? C.message : String(C)));
+      } catch (N) {
+        d.push(n("Error processing field {{1}}: {{2}}", u.displayName || f, N instanceof Error ? N.message : String(N)));
       }
     }
   if (d.length > 0)
@@ -3551,7 +3571,7 @@ async function dn(e, r, t, n, a, o, c) {
         errors: u
       };
   } else {
-    const u = await bt(e, i, n);
+    const u = await yt(e, i, n);
     if (u && u.length > 0)
       return {
         success: !1,
@@ -3560,9 +3580,9 @@ async function dn(e, r, t, n, a, o, c) {
       };
   }
   const m = (u) => u ? Array.isArray(u) ? u.map((f) => String(f)) : typeof u == "string" ? u.trim() ? [u] : [] : [String(u)] : [];
-  if (o)
+  if (a)
     try {
-      const u = await o(e, r?.name ?? null, i, n), f = m(u);
+      const u = await a(e, r?.name ?? null, i, n), f = m(u);
       if (f.length > 0)
         return {
           success: !1,
@@ -3577,7 +3597,7 @@ async function dn(e, r, t, n, a, o, c) {
       };
     }
   else if (e && typeof e.submitHandlerName == "string") {
-    const u = un(e.submitHandlerName);
+    const u = dn(e.submitHandlerName);
     if (u)
       try {
         const f = await u(e, r?.name ?? null, i, n), b = m(f);
@@ -3601,7 +3621,7 @@ async function dn(e, r, t, n, a, o, c) {
     data: i
   };
 }
-const Jr = ({
+const Yr = ({
   message: e,
   success: r,
   onDismiss: t,
@@ -3643,16 +3663,16 @@ const Jr = ({
     ]
   }
 ) : null;
-Jr.displayName = "SubmissionMessage";
-const fn = ({ onClick: e, disabled: r = !1, t }) => {
-  const [n, a] = l.useState(!1);
+Yr.displayName = "SubmissionMessage";
+const gn = ({ onClick: e, disabled: r = !1, t }) => {
+  const [n, o] = l.useState(!1);
   return /* @__PURE__ */ p(
     "button",
     {
       onClick: e,
       disabled: r,
-      onMouseEnter: () => a(!0),
-      onMouseLeave: () => a(!1),
+      onMouseEnter: () => o(!0),
+      onMouseLeave: () => o(!1),
       style: {
         padding: "var(--reactaform-button-padding, var(--reactaform-space) 12px)",
         backgroundColor: r ? "var(--reactaform-button-disabled-bg, #cccccc)" : "var(--reactaform-button-bg, var(--reactaform-success-color))",
@@ -3670,22 +3690,22 @@ const fn = ({ onClick: e, disabled: r = !1, t }) => {
       children: t("Submit")
     }
   );
-}, pn = ({
+}, hn = ({
   definition: e,
   instance: r,
   onSubmit: t = void 0,
   onValidation: n = void 0,
-  chunkSize: a = 50,
-  chunkDelay: o = 50
+  chunkSize: o = 50,
+  chunkDelay: a = 50
 }) => {
-  const { properties: c, displayName: s } = e, i = H(), { t: d, formStyle: m, language: u, displayInstanceName: f } = i, b = {
+  const { properties: c, displayName: s } = e, i = B(), { t: d, formStyle: m, language: u, displayInstanceName: f } = i, b = {
     ...i,
     definitionName: e?.name ?? i.definitionName
-  }, [N, C] = l.useState("en"), [h, y] = l.useState([]), [E, F] = l.useState({}), [M, $] = l.useState(
+  }, [C, N] = l.useState("en"), [h, y] = l.useState([]), [E, F] = l.useState({}), [M, $] = l.useState(
     {}
-  ), [R, I] = l.useState({}), [v, g] = l.useState({}), [w, x] = l.useState(null), [k, S] = l.useState(null), [A, j] = l.useState(0), [K, ce] = l.useState(!1), [je, ae] = l.useState(r.name || ""), Y = l.useRef(r), fe = l.useRef(!1);
+  ), [R, I] = l.useState({}), [v, g] = l.useState({}), [w, x] = l.useState(null), [k, S] = l.useState(null), [A, j] = l.useState(0), [K, ce] = l.useState(!1), [je, oe] = l.useState(r.name || ""), Y = l.useRef(r), fe = l.useRef(!1);
   l.useEffect(() => {
-    const P = Object.fromEntries(
+    const z = Object.fromEntries(
       c.map((L) => [
         L.name,
         { ...L, children: {} }
@@ -3693,7 +3713,7 @@ const fn = ({ onClick: e, disabled: r = !1, t }) => {
     );
     c.forEach((L) => {
       L.parents && Object.entries(L.parents).forEach(([Q, re]) => {
-        const X = P[Q];
+        const X = z[Q];
         X && re.forEach((at) => {
           X.children || (X.children = {});
           const qe = String(at);
@@ -3703,45 +3723,45 @@ const fn = ({ onClick: e, disabled: r = !1, t }) => {
           ];
         });
       });
-    }), cn(c, P);
+    }), un(c, z);
     const q = Object.values(
-      P
-    ), z = {};
+      z
+    ), P = {};
     q.forEach((L) => {
       if (L.type === "unit") {
         const Q = typeof L.defaultValue == "number" ? String(L.defaultValue) : "", re = typeof L.defaultUnit == "string" ? L.defaultUnit : String(L.defaultUnit ?? "m");
-        z[L.name] = [Q, re];
+        P[L.name] = [Q, re];
       } else
-        z[L.name] = L.defaultValue;
+        P[L.name] = L.defaultValue;
     }), Y.current = r, Object.keys(r.values).forEach((L) => {
-      P[L] !== void 0 && (z[L] = r.values[L]);
+      z[L] !== void 0 && (P[L] = r.values[L]);
     });
     const J = Object.fromEntries(q.map((L) => [L.name, !1])), G = requestAnimationFrame(() => {
-      y(q), F(P), $(z), I(
-        on(q, z, J, P)
-      ), ce(!0), ae(r.name);
+      y(q), F(z), $(P), I(
+        cn(q, P, J, z)
+      ), ce(!0), oe(r.name);
     });
     return () => cancelAnimationFrame(G);
   }, [c, r, e]), l.useEffect(() => {
     if (!K || A >= h.length) return;
-    const P = setTimeout(() => {
+    const z = setTimeout(() => {
       j(
-        (q) => Math.min(q + a, h.length)
+        (q) => Math.min(q + o, h.length)
       );
-    }, o);
-    return () => clearTimeout(P);
-  }, [K, A, h.length, a, o]);
+    }, a);
+    return () => clearTimeout(z);
+  }, [K, A, h.length, o, a]);
   const Be = l.useCallback(
-    (P, q) => {
-      x(null), S(null), $((J) => ({ ...J, [P]: q }));
-      const z = E[P];
-      z && z.children && Object.keys(z.children).length > 0 && I((J) => {
-        const G = { ...M, [P]: q };
-        return sn(
+    (z, q) => {
+      x(null), S(null), $((J) => ({ ...J, [z]: q }));
+      const P = E[z];
+      P && P.children && Object.keys(P.children).length > 0 && I((J) => {
+        const G = { ...M, [z]: q };
+        return ln(
           J,
           E,
           G,
-          P,
+          z,
           q
         );
       });
@@ -3749,25 +3769,25 @@ const fn = ({ onClick: e, disabled: r = !1, t }) => {
     [E, M]
   );
   l.useEffect(() => {
-    let P = 0;
-    return P = requestAnimationFrame(() => {
-      u !== N && (C(u || "en"), x(null), S(null));
-    }), () => cancelAnimationFrame(P);
-  }, [u, N]), l.useEffect(() => {
-    let P = 0;
-    return P = requestAnimationFrame(() => {
+    let z = 0;
+    return z = requestAnimationFrame(() => {
+      u !== C && (N(u || "en"), x(null), S(null));
+    }), () => cancelAnimationFrame(z);
+  }, [u, C]), l.useEffect(() => {
+    let z = 0;
+    return z = requestAnimationFrame(() => {
       if (fe.current) {
-        fe.current = !1, Y.current = r, ae(r.name || "");
+        fe.current = !1, Y.current = r, oe(r.name || "");
         return;
       }
-      Y.current = r, x(null), S(null), ae(r.name || "");
-    }), () => cancelAnimationFrame(P);
+      Y.current = r, x(null), S(null), oe(r.name || "");
+    }), () => cancelAnimationFrame(z);
   }, [r, r.name]);
-  const He = l.useCallback((P, q) => {
-    g((z) => q ? { ...z, [P]: String(q) } : Object.fromEntries(Object.entries(z).filter(([G]) => G !== P)));
-  }, []), tt = async () => {
+  const He = l.useCallback((z, q) => {
+    g((P) => q ? { ...P, [z]: String(q) } : Object.fromEntries(Object.entries(P).filter(([G]) => G !== z)));
+  }, []), nt = async () => {
     fe.current = !0;
-    const P = Y.current?.name;
+    const z = Y.current?.name;
     Y.current.name = je;
     let q = v;
     if (b.fieldValidationMode === "onSubmission") {
@@ -3783,18 +3803,18 @@ const fn = ({ onClick: e, disabled: r = !1, t }) => {
       } else
         x(null), S(null);
     }
-    const z = await dn(e, Y.current, M, d, q, t, n), J = typeof z.message == "string" ? z.message : String(z.message), G = Object.values(z.errors ?? {}).join(`
+    const P = await pn(e, Y.current, M, d, q, t, n), J = typeof P.message == "string" ? P.message : String(P.message), G = Object.values(P.errors ?? {}).join(`
 `);
     x(G ? J + `
-` + G : J), S(z.success), z.success || (Y.current.name = P ?? Y.current.name, ae(P ?? ""));
-  }, nt = l.useMemo(
-    () => b.fieldValidationMode === "realTime" ? Object.values(v).some(Boolean) : !1,
+` + G : J), S(P.success), P.success || (Y.current.name = z ?? Y.current.name, oe(z ?? ""));
+  }, ot = l.useMemo(
+    () => b.fieldValidationMode === "onEdit" || b.fieldValidationMode === "realTime" ? Object.values(v).some(Boolean) : !1,
     [v, b.fieldValidationMode]
   );
   return /* @__PURE__ */ p(Ee.Provider, { value: b, children: /* @__PURE__ */ D("div", { style: m.container, children: [
     s && /* @__PURE__ */ p("h2", { style: m.titleStyle, children: d(s) }),
     /* @__PURE__ */ p(
-      Jr,
+      Yr,
       {
         message: w,
         success: k,
@@ -3808,29 +3828,29 @@ const fn = ({ onClick: e, disabled: r = !1, t }) => {
       sr,
       {
         name: je,
-        onChange: (P) => {
-          ae(P), x(null), S(null);
+        onChange: (z) => {
+          oe(z), x(null), S(null);
         }
       }
     ),
     /* @__PURE__ */ D(Ie, { children: [
       (() => {
-        const P = h.slice(0, A).filter((z) => R[z.name]), { groups: q } = ln(P);
-        return q.map((z, J) => z.name ? /* @__PURE__ */ p(
-          _r,
+        const z = h.slice(0, A).filter((P) => R[P.name]), { groups: q } = mn(z);
+        return q.map((P, J) => P.name ? /* @__PURE__ */ p(
+          Kr,
           {
-            groupName: z.name,
+            groupName: P.name,
             defaultOpen: !0,
-            fields: z.fields,
+            fields: P.fields,
             valuesMap: M,
             handleChange: Be,
             handleError: He,
             errorsMap: v,
             t: d
           },
-          z.name
-        ) : /* @__PURE__ */ p(l.Fragment, { children: z.fields.map((G) => /* @__PURE__ */ p(
-          Pe,
+          P.name
+        ) : /* @__PURE__ */ p(l.Fragment, { children: P.fields.map((G) => /* @__PURE__ */ p(
+          ze,
           {
             field: G,
             valuesMap: M,
@@ -3852,9 +3872,9 @@ const fn = ({ onClick: e, disabled: r = !1, t }) => {
         }
       )
     ] }),
-    /* @__PURE__ */ p(fn, { onClick: tt, disabled: nt, t: d })
+    /* @__PURE__ */ p(gn, { onClick: nt, disabled: ot, t: d })
   ] }) });
-}, Yr = {
+}, Xr = {
   en: { name: "English", nativeName: "English" },
   fr: { name: "French", nativeName: "Français" },
   de: { name: "German", nativeName: "Deutsch" },
@@ -3885,15 +3905,15 @@ const fn = ({ onClick: e, disabled: r = !1, t }) => {
   uk: { name: "Ukrainian", nativeName: "Українська" },
   vi: { name: "Vietnamese", nativeName: "Tiếng Việt" },
   "zh-tw": { name: "Chinese (Traditional)", nativeName: "繁體中文" }
-}, pa = () => Yr, be = /* @__PURE__ */ new Map(), le = /* @__PURE__ */ new Map(), te = /* @__PURE__ */ new Set(), we = /* @__PURE__ */ new Map(), gn = async (e) => {
+}, bo = () => Xr, be = /* @__PURE__ */ new Map(), le = /* @__PURE__ */ new Map(), te = /* @__PURE__ */ new Set(), we = /* @__PURE__ */ new Map(), bn = async (e) => {
   try {
     let r = {};
     const t = e.toLowerCase();
     if (t === "en")
       r = {};
-    else if (Yr[t]) {
-      const a = `https://reactaform.com/locales/${t}/common.json`, o = await fetch(a);
-      o.ok && (r = await o.json());
+    else if (Xr[t]) {
+      const o = `https://reactaform.com/locales/${t}/common.json`, a = await fetch(o);
+      a.ok && (r = await a.json());
     } else
       r = {};
     return {
@@ -3908,7 +3928,7 @@ const fn = ({ onClick: e, disabled: r = !1, t }) => {
       error: `Failed to load common translations for ${e}: ${r}`
     };
   }
-}, hn = async (e) => {
+}, yn = async (e) => {
   if (!e || e.toLowerCase() === "en")
     return { success: !0, translations: {}, fromCache: !1 };
   const r = e.toLowerCase();
@@ -3918,13 +3938,13 @@ const fn = ({ onClick: e, disabled: r = !1, t }) => {
       translations: be.get(r) || {},
       fromCache: !0
     };
-  const t = await gn(r);
+  const t = await bn(r);
   return t.success && (be.set(r, t.translations), we.set(r, {
     loadedAt: /* @__PURE__ */ new Date(),
     size: Object.keys(t.translations).length,
     source: "common"
   })), t;
-}, bn = async (e, r) => {
+}, vn = async (e, r) => {
   if (!e || !r)
     return {
       success: !1,
@@ -3948,9 +3968,9 @@ const fn = ({ onClick: e, disabled: r = !1, t }) => {
   try {
     let n = r;
     !r.includes("/") && !r.includes(".") && (n = `/locales/${e}/${r}.json`);
-    const a = await fetch(n);
-    if (!a.ok)
-      return a.status === 404 ? (le.set(t, {}), we.set(t, {
+    const o = await fetch(n);
+    if (!o.ok)
+      return o.status === 404 ? (le.set(t, {}), we.set(t, {
         loadedAt: /* @__PURE__ */ new Date(),
         size: 0,
         source: "user"
@@ -3961,14 +3981,14 @@ const fn = ({ onClick: e, disabled: r = !1, t }) => {
       }) : (te.add(t), {
         success: !1,
         translations: {},
-        error: `HTTP ${a.status}`,
+        error: `HTTP ${o.status}`,
         fromCache: !1
       });
-    const o = a.headers.get("content-type") || "";
-    !o.includes("application/json") && !o.includes("text/json") && Xr() && console.warn(
-      `Translation file at ${n} has unexpected content-type: ${o}`
+    const a = o.headers.get("content-type") || "";
+    !a.includes("application/json") && !a.includes("text/json") && Zr() && console.warn(
+      `Translation file at ${n} has unexpected content-type: ${a}`
     );
-    const c = await a.text();
+    const c = await o.text();
     if (!c) {
       const d = "Empty translation file";
       return te.add(t), { success: !1, translations: {}, error: d };
@@ -4004,15 +4024,15 @@ const fn = ({ onClick: e, disabled: r = !1, t }) => {
       fromCache: !1
     };
   } catch (n) {
-    const a = `Failed to load user translations: ${n instanceof Error ? n.message : "Unknown error"}`;
+    const o = `Failed to load user translations: ${n instanceof Error ? n.message : "Unknown error"}`;
     return te.add(t), {
       success: !1,
       translations: {},
-      error: a
+      error: o
     };
   }
 };
-function Xr() {
+function Zr() {
   try {
     if (typeof process < "u" && process?.env?.NODE_ENV === "development")
       return !0;
@@ -4020,72 +4040,72 @@ function Xr() {
   }
   return !1;
 }
-function yn(e, r) {
+function xn(e, r) {
   return r.length === 0 ? e : e.replace(/\{\{(\d+)\}\}/g, (t, n) => {
-    const a = parseInt(n, 10) - 1, o = r[a];
-    return o == null ? t : String(o);
+    const o = parseInt(n, 10) - 1, a = r[o];
+    return a == null ? t : String(a);
   });
 }
-const vn = (e, r, t) => (n, ...a) => {
-  let o = n, c = !1;
-  return !n || typeof n != "string" ? String(n || "") : (e.toLowerCase() === "en" ? (o = n, c = !0) : n in t ? (o = t[n], c = !0) : n in r ? (o = r[n], c = !0) : o = n, o = yn(o, a), !c && Xr() && console.debug(
+const wn = (e, r, t) => (n, ...o) => {
+  let a = n, c = !1;
+  return !n || typeof n != "string" ? String(n || "") : (e.toLowerCase() === "en" ? (a = n, c = !0) : n in t ? (a = t[n], c = !0) : n in r ? (a = r[n], c = !0) : a = n, a = xn(a, o), !c && Zr() && console.debug(
     `Missing translation for "${n}" in language "${e}"`
-  ), o);
+  ), a);
 };
-function xn(e) {
+function Sn(e) {
   return /^[-+]?\d*$/.test(e);
 }
-function wn(e) {
+function Cn(e) {
   const r = /^[-+]?\d*$/;
   return e.split(",").map((t) => t.trim()).every((t) => r.test(t));
 }
-const Sn = ",", Cn = (e) => !e || e.trim() === "" ? [] : e.split(Sn).map((r) => r.trim()).filter(Boolean).map((r) => Number(r)), Xe = (e, r, t) => {
+const Nn = ",", kn = (e) => !e || e.trim() === "" ? [] : e.split(Nn).map((r) => r.trim()).filter(Boolean).map((r) => Number(r)), Xe = (e, r, t) => {
   const n = String(r);
   if (n.trim() === "")
     return e.min !== void 0 || e.max !== void 0 ? t("Value required when min or max constraints is set") : e.required ? t("Value required") : void 0;
-  if (!xn(n))
+  if (!Sn(n))
     return t("Must be a valid integer");
-  const a = parseInt(n, 10);
-  if (Number.isNaN(a)) return t("Must be a valid integer");
-  if (e.min !== void 0 && (e.minInclusive ? a < e.min : a <= e.min))
+  const o = parseInt(n, 10);
+  if (Number.isNaN(o)) return t("Must be a valid integer");
+  if (e.min !== void 0 && (e.minInclusive ? o < e.min : o <= e.min))
     return t(
       "Must be {{1}} {{2}}",
       e.minInclusive ? "≥" : ">",
       e.min
     );
-  if (e.max !== void 0 && (e.maxInclusive ? a > e.max : a >= e.max))
+  if (e.max !== void 0 && (e.maxInclusive ? o > e.max : o >= e.max))
     return t(
       "Must be {{1}} {{2}}",
       e.maxInclusive ? "≤" : "<",
       e.max
     );
   if (e.step !== void 0) {
-    const o = Number(e.step);
-    if (!Number.isInteger(o))
+    const a = Number(e.step);
+    if (!Number.isInteger(a))
       return t("Invalid step value");
-    if (a % o !== 0)
-      return t("Must be a multiple of {{1}}", o);
+    if (o % a !== 0)
+      return t("Must be a multiple of {{1}}", a);
   }
 };
-function Nn(e, r, t) {
+function In(e, r, t) {
   const n = String(r);
   if (n.trim() === "")
     return e.min !== void 0 || e.max !== void 0 ? t("Value required when min or max constraints is set") : e.required ? t("Value required") : void 0;
-  if (!wn(n))
+  if (!Cn(n))
     return t("Each value must be a valid integer");
-  const a = Cn(n);
-  if (e.minCount !== void 0 && a.length < e.minCount)
+  const o = kn(n);
+  if (e.minCount !== void 0 && o.length < e.minCount)
     return t("Minimum number of values: {{1}}", `${e.minCount}`);
-  if (e.maxCount !== void 0 && a.length > e.maxCount)
+  if (e.maxCount !== void 0 && o.length > e.maxCount)
     return t("Maximum number of values: {{1}}", `${e.maxCount}`);
-  for (const o of a) {
-    if (e.min !== void 0 && (e.minInclusive ? o < e.min : o <= e.min))
+  for (const a of o) {
+    if (e.min !== void 0 && (e.minInclusive ? a < e.min : a <= e.min))
       return t(
         "Each value must be {{1}} {{2}}",
         e.minInclusive ? "≥" : ">",
         e.min
       );
-    if (e.max !== void 0 && (e.maxInclusive ? o > e.max : o >= e.max))
+    if (e.max !== void 0 && (e.maxInclusive ? a > e.max : a >= e.max))
       return t(
         "Each value must be {{1}} {{2}}",
         e.maxInclusive ? "≤" : "<",
@@ -4093,55 +4113,55 @@ function Nn(e, r, t) {
       );
   }
 }
-function Zr(e, r, t) {
+function Qr(e, r, t) {
   const n = String(r);
   if (n.trim() === "")
     return e.min !== void 0 || e.max !== void 0 ? t("Value required when min or max constraints is set") : e.required ? t("Value required") : void 0;
-  const a = Number(n);
-  if (Number.isNaN(a)) return t("Must be a valid float");
+  const o = Number(n);
+  if (Number.isNaN(o)) return t("Must be a valid float");
   if (e.min !== void 0) {
-    const o = e.type === "slider" ? !0 : e.minInclusive ?? !0;
-    if (o ? a < e.min : a <= e.min)
+    const a = e.type === "slider" ? !0 : e.minInclusive ?? !0;
+    if (a ? o < e.min : o <= e.min)
       return t(
         "Must be {{1}} {{2}}",
-        o ? "≥" : ">",
+        a ? "≥" : ">",
         e.min
       );
   }
   if (e.max !== void 0) {
-    const o = e.type === "slider" ? !0 : e.maxInclusive ?? !0;
-    if (o ? a > e.max : a >= e.max)
+    const a = e.type === "slider" ? !0 : e.maxInclusive ?? !0;
+    if (a ? o > e.max : o >= e.max)
       return t(
         "Must be {{1}} {{2}}",
-        o ? "≤" : "<",
+        a ? "≤" : "<",
         e.max
       );
   }
 }
-const kn = /^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][-+]?\d+)?$/;
-function In(e) {
-  return e.split(",").map((r) => r.trim()).every((r) => kn.test(r));
+const En = /^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][-+]?\d+)?$/;
+function Mn(e) {
+  return e.split(",").map((r) => r.trim()).every((r) => En.test(r));
 }
-const En = ",", Mn = (e) => !e || e.trim() === "" ? [] : e.split(En).map((r) => r.trim()).filter(Boolean).map((r) => Number(r));
-function Fn(e, r, t) {
+const Fn = ",", $n = (e) => !e || e.trim() === "" ? [] : e.split(Fn).map((r) => r.trim()).filter(Boolean).map((r) => Number(r));
+function Vn(e, r, t) {
   const n = String(r);
   if (n.trim() === "")
     return e.min !== void 0 || e.max !== void 0 ? t("Value required when min or max constraints is set") : e.required ? t("Value required") : void 0;
-  if (!In(n))
+  if (!Mn(n))
     return t("Each value must be a valid float");
-  const a = Mn(n);
-  if (e.minCount !== void 0 && a.length < e.minCount)
+  const o = $n(n);
+  if (e.minCount !== void 0 && o.length < e.minCount)
     return t("Minimum number of values: {{1}}", e.minCount);
-  if (e.maxCount !== void 0 && a.length > e.maxCount)
+  if (e.maxCount !== void 0 && o.length > e.maxCount)
     return t("Maximum number of values: {{1}}", e.maxCount);
-  for (const o of a) {
-    if (e.min !== void 0 && (e.minInclusive ? o < e.min : o <= e.min))
+  for (const a of o) {
+    if (e.min !== void 0 && (e.minInclusive ? a < e.min : a <= e.min))
       return t(
         "Each value must be {{1}} {{2}}",
         e.minInclusive ? "≥" : ">",
         e.min
       );
-    if (e.max !== void 0 && (e.maxInclusive ? o > e.max : o >= e.max))
+    if (e.max !== void 0 && (e.maxInclusive ? a > e.max : a >= e.max))
       return t(
         "Each value must be {{1}} {{2}}",
         e.maxInclusive ? "≤" : "<",
@@ -4150,10 +4170,10 @@ function Fn(e, r, t) {
   }
 }
 const ye = /* @__PURE__ */ new WeakMap();
-function Oe(e, r, t, n, ...a) {
+function Oe(e, r, t, n, ...o) {
   if (e.pattern == null)
     return;
-  const o = String(r);
+  const a = String(r);
   let c = null;
   if (e.pattern) {
     const s = ye.get(e);
@@ -4167,44 +4187,44 @@ function Oe(e, r, t, n, ...a) {
         ye.set(e, { pattern: e.pattern, regex: null }), c = null;
       }
   }
-  if (c && !c.test(o))
-    return e.patternErrorMessage ? t(e.patternErrorMessage) : n ? t(n, ...a) : t("Input does not match pattern: {{1}}", e.pattern);
+  if (c && !c.test(a))
+    return e.patternErrorMessage ? t(e.patternErrorMessage) : n ? t(n, ...o) : t("Input does not match pattern: {{1}}", e.pattern);
 }
 function ue(e, r, t) {
   const n = String(r);
   if (n === "")
     return e.minLength !== void 0 || e.maxLength !== void 0 ? e.required ? t("Value required when minLength or maxLength is set") : void 0 : e.required ? t("Value required") : void 0;
-  const a = Math.max(e.minLength ?? 0, 0);
-  return n.length < a ? t("Must be at least {{1}} characters", a) : e.maxLength !== void 0 && n.length > e.maxLength ? t("Must be at most {{1}} characters", e.maxLength) : Oe(e, r, t, "Invalid text format");
+  const o = Math.max(e.minLength ?? 0, 0);
+  return n.length < o ? t("Must be at least {{1}} characters", o) : e.maxLength !== void 0 && n.length > e.maxLength ? t("Must be at most {{1}} characters", e.maxLength) : Oe(e, r, t, "Invalid text format");
 }
 const Se = (e) => {
   if (!e) return null;
   const r = Date.parse(e);
   return Number.isNaN(r) ? null : r;
-}, Ze = /* @__PURE__ */ new WeakMap(), $n = (e) => {
+}, Ze = /* @__PURE__ */ new WeakMap(), An = (e) => {
   let r = Ze.get(e);
   return r || (r = {
     minTime: Se(e.minDate),
     maxTime: Se(e.maxDate)
   }, Ze.set(e, r)), r;
 };
-function Vn(e, r, t) {
+function Rn(e, r, t) {
   if (r == null || String(r).trim() === "")
     return e.required ? t("Value required") : void 0;
-  const n = String(r).trim(), a = Se(n);
-  if (a === null)
+  const n = String(r).trim(), o = Se(n);
+  if (o === null)
     return t("Invalid date format");
-  const { minTime: o, maxTime: c } = $n(e);
-  if (o !== null && a < o)
+  const { minTime: a, maxTime: c } = An(e);
+  if (a !== null && o < a)
     return t("Date must be on or after {{1}}", e.minDate);
-  if (c !== null && a > c)
+  if (c !== null && o > c)
     return t("Date must be on or before {{1}}", e.maxDate);
 }
-function An(e, r, t) {
+function Dn(e, r, t) {
   const n = String(r);
   if (!n || n.trim() === "")
     return e.required || e.min || e.max ? t("Value required") : void 0;
-  const a = (c) => {
+  const o = (c) => {
     const s = c.split(":").map((m) => parseInt(m, 10));
     if (s.some((m) => Number.isNaN(m))) return NaN;
     const i = s.length;
@@ -4221,42 +4241,42 @@ function An(e, r, t) {
     else
       return NaN;
     return d;
-  }, o = a(n);
-  if (Number.isNaN(o)) return t("Invalid time format");
+  }, a = o(n);
+  if (Number.isNaN(a)) return t("Invalid time format");
   if (e.min && typeof e.min == "string") {
-    const c = a(e.min);
-    if (!Number.isNaN(c) && o < c)
+    const c = o(e.min);
+    if (!Number.isNaN(c) && a < c)
       return t("Time must be on or after {{1}}", e.min);
   }
   if (e.max && typeof e.max == "string") {
-    const c = a(e.max);
-    if (!Number.isNaN(c) && o > c)
+    const c = o(e.max);
+    if (!Number.isNaN(c) && a > c)
       return t("Time must be on or before {{1}}", e.max);
   }
 }
-function Rn(e) {
+function zn(e) {
   return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);
 }
-function Dn(e, r, t) {
+function Pn(e, r, t) {
   const n = String(r ?? "").trim();
-  return n === "" ? e.required ? t("Value required") : void 0 : Rn(n) ? Oe(e, r, t, t("Email does not match pattern: {{1}}", e.pattern)) : t("Must be valid email format");
+  return n === "" ? e.required ? t("Value required") : void 0 : zn(n) ? Oe(e, r, t, t("Email does not match pattern: {{1}}", e.pattern)) : t("Must be valid email format");
 }
-function Pn(e, r, t) {
+function Ln(e, r, t) {
   const n = String(r ?? "").trim();
   return n === "" ? e.required ? t("Value required") : void 0 : Oe(e, n, t, "Invalid phone number format");
 }
-const zn = /^(https?|ftp|file):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|]$/i, Ln = (e) => {
+const On = /^(https?|ftp|file):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|]$/i, Tn = (e) => {
   try {
     return new URL(e), !0;
   } catch {
     return !1;
   }
 };
-function On(e, r, t) {
+function jn(e, r, t) {
   const n = String(r ?? "").trim();
   if (n === "")
     return e.required ? t("Value required") : void 0;
-  if (!(zn.test(n) || Ln(n))) {
+  if (!(On.test(n) || Tn(n))) {
     if (e.allowRelative === !0) {
       if (!n.startsWith("/") || encodeURI(n) !== n)
         return t("Must be a valid URL");
@@ -4270,11 +4290,11 @@ function On(e, r, t) {
     return t("Must be a valid URL");
   }
 }
-function Tn(e, r, t) {
-  const n = Array.isArray(r) ? r : [], a = n[0], o = n[1] ? String(n[1]).trim() : "";
-  return String(a ?? "").trim() === "" || o === "" ? e.required ? t("Value required") : void 0 : Zr(e, a, t);
+function Bn(e, r, t) {
+  const n = Array.isArray(r) ? r : [], o = n[0], a = n[1] ? String(n[1]).trim() : "";
+  return String(o ?? "").trim() === "" || a === "" ? e.required ? t("Value required") : void 0 : Qr(e, o, t);
 }
-function jn(e, r, t) {
+function Hn(e, r, t) {
   if (Array.isArray(r))
     return r.length === 0 ? t("Select a file") : r.every((n) => n instanceof File) ? void 0 : t("Invalid file input");
   if (!(r instanceof File)) {
@@ -4282,62 +4302,62 @@ function jn(e, r, t) {
     return e.required && (r == null || typeof n == "string" && n.trim() === "") ? t("Select a file") : t("Invalid file input: {{1}}", n);
   }
 }
-function Bn(e, r, t) {
+function qn(e, r, t) {
   const n = String(r);
   if (n === "" || n === null || n === void 0)
     return e.required ? t("Value required") : void 0;
-  if (!e.options?.some((a) => String(a.value) === n))
+  if (!e.options?.some((o) => String(o.value) === n))
     return t("Invalid option selected");
 }
-function Hn(e, r, t) {
-  const a = String(r ?? "").trim();
-  if (a === "")
+function Un(e, r, t) {
+  const o = String(r ?? "").trim();
+  if (o === "")
     return e.required ? t("Value required") : void 0;
-  const o = a.split(",").map((c) => c.trim()).filter((c) => c !== "");
-  if (o.length === 0)
+  const a = o.split(",").map((c) => c.trim()).filter((c) => c !== "");
+  if (a.length === 0)
     return e.required ? t("Value required") : void 0;
-  for (const c of o)
+  for (const c of a)
     if (!e.options?.some((s) => String(s.value) === c))
       return t("Invalid option selected");
 }
-const qn = /^#([0-9A-F]{3}){1,2}$/i, Un = (e) => qn.test(e);
-function Wn(e, r, t) {
+const Wn = /^#([0-9A-F]{3}){1,2}$/i, _n = (e) => Wn.test(e);
+function Kn(e, r, t) {
   const n = String(r).trim();
   if (n === "")
     return e.required ? t("Value required") : void 0;
-  if (!Un(n))
+  if (!_n(n))
     return t("Invalid color format");
 }
-function _n(e, r, t) {
+function Gn(e, r, t) {
   const n = String(r ?? "").trim();
   if (n === "")
     return e.required ? t("Value required") : void 0;
-  let a = r;
-  if (typeof r != "number" && (a = parseFloat(n)), Number.isNaN(a) || a <= 0)
+  let o = r;
+  if (typeof r != "number" && (o = parseFloat(n)), Number.isNaN(o) || o <= 0)
     return t("Invalid value");
-  if (e.max !== void 0 && a > e.max)
+  if (e.max !== void 0 && o > e.max)
     return t("Must be ≤ {{1}}", e.max);
 }
-function Kn(e, r, t) {
+function Jn(e, r, t) {
   const n = String(r);
   if (n.trim() === "")
     return e.required ? t("Value required") : void 0;
-  const a = Number(n);
-  if (Number.isNaN(a)) return t("Must be a valid float");
-  const o = e.min ?? 0, c = e.max ?? 100;
-  if (a < o)
-    return t("Must be ≥ {{1}}", o);
-  if (a > c)
+  const o = Number(n);
+  if (Number.isNaN(o)) return t("Must be a valid float");
+  const a = e.min ?? 0, c = e.max ?? 100;
+  if (o < a)
+    return t("Must be ≥ {{1}}", a);
+  if (o > c)
     return t("Must be ≤ {{1}}", c);
 }
 let Qe = !1;
-function Qr() {
-  Qe || (B("int", Xe), B("stepper", Xe), B("int-array", Nn), B("float", Zr), B("slider", Kn), B("float-array", Fn), B("text", ue), B("string", ue), B("multiline", ue), B("password", ue), B("email", Dn), B("date", Vn), B("time", An), B("url", On), B("phone", Pn), B("unit", Tn), B("dropdown", Bn), B("multi-selection", Hn), B("color", Wn), B("rating", _n), B("file", jn), Qe = !0);
+function et() {
+  Qe || (H("int", Xe), H("stepper", Xe), H("int-array", In), H("float", Qr), H("slider", Jn), H("float-array", Vn), H("text", ue), H("string", ue), H("multiline", ue), H("password", ue), H("email", Pn), H("date", Rn), H("time", Dn), H("url", jn), H("phone", Ln), H("unit", Bn), H("dropdown", qn), H("multi-selection", Un), H("color", Kn), H("rating", Gn), H("file", Hn), Qe = !0);
 }
-Qr();
-an();
-Qr();
-const Gn = (e) => ({
+et();
+sn();
+et();
+const Yn = (e) => ({
   container: {
     padding: "var(--reactaform-space-sm, 8px)",
     margin: "0 auto",
@@ -4378,7 +4398,7 @@ const Gn = (e) => ({
     lineHeight: "1.2",
     textAlign: "left"
   }
-}), Jn = (e) => {
+}), Xn = (e) => {
   const r = {
     color: "var(--reactaform-color-text)",
     fontFamily: e?.fontFamily || "var(--reactaform-font-family, inherit)",
@@ -4437,43 +4457,43 @@ const Gn = (e) => ({
       display: "block"
     }
   };
-}, Yn = ({
+}, Zn = ({
   children: e,
   definitionName: r = "",
   defaultStyle: t,
   defaultLanguage: n = "en",
-  defaultTheme: a = "light",
-  defaultLocalizeName: o = "",
-  defaultFieldValidationMode: c = "realTime",
+  defaultTheme: o = "light",
+  defaultLocalizeName: a = "",
+  defaultFieldValidationMode: c = "onEdit",
   className: s = "reactaform-container",
   defaultDisplayInstanceName: i = !0
 }) => {
-  const d = r, m = o, u = a, f = n, b = l.useMemo(
+  const d = r, m = a, u = o, f = n, b = l.useMemo(
     () => t ?? {},
     [t]
-  ), [N, C] = l.useState({}), [h, y] = l.useState({});
+  ), [C, N] = l.useState({}), [h, y] = l.useState({});
   l.useEffect(() => {
     let v = !0;
     return (async () => {
       if (f === "en") {
-        v && (C({}), y({}));
+        v && (N({}), y({}));
         return;
       }
       try {
-        const w = await hn(f), x = w.success ? w.translations : {};
-        v && C(x);
-        const k = await bn(f, m), S = k.success ? k.translations : {};
+        const w = await yn(f), x = w.success ? w.translations : {};
+        v && N(x);
+        const k = await vn(f, m), S = k.success ? k.translations : {};
         v && y(S);
       } catch {
-        v && (C({}), y({}));
+        v && (N({}), y({}));
       }
     })(), () => {
       v = !1;
     };
   }, [f, m]);
-  const E = l.useMemo(() => Gn(b), [b]), F = l.useMemo(() => Jn(b), [b]), M = l.useMemo(
-    () => vn(f, N, h),
-    [f, N, h]
+  const E = l.useMemo(() => Yn(b), [b]), F = l.useMemo(() => Xn(b), [b]), M = l.useMemo(
+    () => wn(f, C, h),
+    [f, C, h]
   ), $ = l.useCallback(
     (v, ...g) => M(v, ...g),
     [M]
@@ -4509,7 +4529,7 @@ const Gn = (e) => ({
     }
   ) });
 };
-function Xn(e) {
+function Qn(e) {
   if (!e || typeof e != "object")
     return "Definition must be an object";
   const r = e;
@@ -4537,7 +4557,7 @@ function Xn(e) {
     }
   return null;
 }
-async function ga(e, r = {}) {
+async function yo(e, r = {}) {
   const { validateSchema: t = !0 } = r;
   try {
     if (!e || typeof e != "string")
@@ -4545,26 +4565,26 @@ async function ga(e, r = {}) {
     const n = e.trim();
     if (!n)
       return { success: !1, error: "jsonData is empty" };
-    let a;
+    let o;
     try {
-      a = JSON.parse(n);
-    } catch (o) {
+      o = JSON.parse(n);
+    } catch (a) {
       return {
         success: !1,
-        error: `Invalid JSON format: ${o instanceof Error ? o.message : "Unknown parsing error"}`
+        error: `Invalid JSON format: ${a instanceof Error ? a.message : "Unknown parsing error"}`
       };
     }
     if (t) {
-      const o = Xn(a);
-      if (o)
-        return { success: !1, error: `Schema validation failed: ${o}` };
+      const a = Qn(o);
+      if (a)
+        return { success: !1, error: `Schema validation failed: ${a}` };
     }
-    return { success: !0, definition: a };
+    return { success: !0, definition: o };
   } catch (n) {
     return { success: !1, error: `Unexpected error loading definition: ${n instanceof Error ? n.message : "Unknown error"}` };
   }
 }
-function Zn(e, r) {
+function eo(e, r) {
   try {
     if (!e)
       return { success: !1, error: "Definition is required" };
@@ -4576,13 +4596,13 @@ function Zn(e, r) {
       version: e.version ?? "1.0.0",
       values: {}
     }, n = e.properties || [];
-    return Array.isArray(n) && n.forEach((a) => {
-      const o = a;
-      if (o.type === "unit") {
-        const c = o.defaultUnit, s = Number(o.defaultValue) || void 0;
-        t.values[o.name] = [s || 0, c || "m"];
+    return Array.isArray(n) && n.forEach((o) => {
+      const a = o;
+      if (a.type === "unit") {
+        const c = a.defaultUnit, s = Number(a.defaultValue) || void 0;
+        t.values[a.name] = [s || 0, c || "m"];
       } else
-        o.defaultValue !== void 0 && (t.values[o.name] = o.defaultValue);
+        a.defaultValue !== void 0 && (t.values[a.name] = a.defaultValue);
     }), { success: !0, instance: t };
   } catch (t) {
     return {
@@ -4591,7 +4611,7 @@ function Zn(e, r) {
     };
   }
 }
-function ha(e) {
+function vo(e) {
   try {
     if (!e)
       return { success: !1, error: "Instance data is required" };
@@ -4615,7 +4635,7 @@ function ha(e) {
     };
   }
 }
-function ba(e, r, t) {
+function xo(e, r, t) {
   try {
     if (!e)
       return { success: !1, error: "Instance is required" };
@@ -4628,9 +4648,9 @@ function ba(e, r, t) {
       definition: r.name,
       version: r.version,
       values: {}
-    }, a = n.values, o = {};
+    }, o = n.values, a = {};
     (r.properties || []).forEach((i) => {
-      o[i.name] = i;
+      a[i.name] = i;
     });
     const c = (i, d, m) => {
       if (i == null) return i;
@@ -4675,14 +4695,14 @@ function ba(e, r, t) {
       return i;
     }, s = e.values || {};
     Object.keys(s).forEach((i) => {
-      const d = s[i], m = o[i];
+      const d = s[i], m = a[i];
       if (!m)
         return;
       const u = Array.isArray(d) ? "array" : d === null ? "null" : typeof d, f = (m.type || "").toLowerCase();
-      u === f || f === "string" && typeof d == "string" ? a[i] = d : a[i] = c(d, f, m);
+      u === f || f === "string" && typeof d == "string" ? o[i] = d : o[i] = c(d, f, m);
     }), (r.properties || []).forEach((i) => {
       const d = i.name;
-      d in a || (a[d] = i.defaultValue);
+      d in o || (o[d] = i.defaultValue);
     });
     try {
       typeof t == "function" && t?.(e, n, r);
@@ -4697,30 +4717,30 @@ function ba(e, r, t) {
     };
   }
 }
-function Qn(e) {
+function ro(e) {
   const [r, t] = l.useState(null);
   return l.useEffect(() => {
     const n = document.querySelector("[data-reactaform-theme]");
     if (!n) return;
-    const a = n.closest("[data-reactaform-theme]");
-    if (!a) return;
-    const o = () => t(a.getAttribute("data-reactaform-theme"));
-    o();
+    const o = n.closest("[data-reactaform-theme]");
+    if (!o) return;
+    const a = () => t(o.getAttribute("data-reactaform-theme"));
+    a();
     const c = new MutationObserver((s) => {
       for (const i of s)
-        i.type === "attributes" && i.attributeName === "data-reactaform-theme" && o();
+        i.type === "attributes" && i.attributeName === "data-reactaform-theme" && a();
     });
-    return c.observe(a, { attributes: !0, attributeFilter: ["data-reactaform-theme"] }), () => c.disconnect();
+    return c.observe(o, { attributes: !0, attributeFilter: ["data-reactaform-theme"] }), () => c.disconnect();
   }, [e]), r;
 }
-const ya = ({
+const wo = ({
   definitionData: e,
   instance: r,
   language: t,
   className: n,
-  theme: a,
-  style: o,
-  fieldValidationMode: c = "realTime",
+  theme: o,
+  style: a,
+  fieldValidationMode: c = "onEdit",
   displayInstanceName: s = !0,
   onSubmit: i = void 0,
   onValidation: d = void 0
@@ -4731,33 +4751,33 @@ const ya = ({
     } catch {
       return null;
     }
-  }, [e]), u = { fontSize: "inherit", fontFamily: "inherit", ...o }, f = Qn(), b = a ?? f ?? "light", N = t ?? "en";
+  }, [e]), u = { fontSize: "inherit", fontFamily: "inherit", ...a }, f = ro(), b = o ?? f ?? "light", C = t ?? "en";
   l.useEffect(() => {
     let h = document.getElementById("popup-root");
     h || (h = document.createElement("div"), h.id = "popup-root", document.body.appendChild(h));
   }, []);
-  const C = l.useMemo(() => {
+  const N = l.useMemo(() => {
     if (r) return r;
     if (!m) return null;
-    const h = Zn(m, m.name);
+    const h = eo(m, m.name);
     return !h.success || !h.instance ? null : h.instance;
   }, [r, m]);
-  return m ? C ? /* @__PURE__ */ p(
-    Yn,
+  return m ? N ? /* @__PURE__ */ p(
+    Zn,
     {
       definitionName: m.name,
       defaultStyle: u,
-      defaultLanguage: N,
+      defaultLanguage: C,
       defaultTheme: b,
       defaultLocalizeName: m.localization || "",
       className: n,
       defaultFieldValidationMode: c,
       defaultDisplayInstanceName: s,
       children: /* @__PURE__ */ p(
-        pn,
+        hn,
         {
           definition: m,
-          instance: C,
+          instance: N,
           onSubmit: i,
           onValidation: d
         }
@@ -4772,7 +4792,7 @@ const ya = ({
   formValidators: /* @__PURE__ */ new Map(),
   submissionHandlers: /* @__PURE__ */ new Map()
 };
-function et(e, r, t) {
+function rt(e, r, t) {
   if (!e) return !0;
   if (t && !t(e))
     return !1;
@@ -4793,73 +4813,73 @@ function et(e, r, t) {
       return !1;
   }
 }
-function ea(e) {
+function to(e) {
   const r = [];
   if (e.components)
     for (const t of Object.keys(e.components)) {
-      const n = Wr(t);
+      const n = _r(t);
       if (n) {
-        let a;
-        for (const [o, c] of Z)
+        let o;
+        for (const [a, c] of Z)
           if (c.components && c.components[t] === n) {
-            a = o;
+            o = a;
             break;
           }
-        a && a !== e.name && r.push({
+        o && o !== e.name && r.push({
           type: "component",
           name: t,
-          existingPlugin: a,
+          existingPlugin: o,
           newPlugin: e.name
         });
       }
     }
   if (e.fieldCustomValidators)
     for (const [t, n] of Object.entries(e.fieldCustomValidators))
-      for (const a of Object.keys(n)) {
-        const c = W.fieldValidators.get(t)?.get(a);
-        ur(t, a) && c && c !== e.name && r.push({
+      for (const o of Object.keys(n)) {
+        const c = W.fieldValidators.get(t)?.get(o);
+        ur(t, o) && c && c !== e.name && r.push({
           type: "fieldCustomValidator",
-          name: `${t}:${a}`,
+          name: `${t}:${o}`,
           existingPlugin: c,
           newPlugin: e.name
         });
       }
   if (e.fieldTypeValidators)
     for (const t of Object.keys(e.fieldTypeValidators)) {
-      const n = dr(t), a = W.fieldTypeValidators.get(t);
-      n && a && a !== e.name && r.push({
+      const n = dr(t), o = W.fieldTypeValidators.get(t);
+      n && o && o !== e.name && r.push({
         type: "fieldTypeValidator",
         name: `type:${t}`,
-        existingPlugin: a,
+        existingPlugin: o,
         newPlugin: e.name
       });
     }
   if (e.formValidators)
     for (const t of Object.keys(e.formValidators)) {
-      const n = mr(t), a = W.formValidators.get(t);
-      n && a && a !== e.name && r.push({
+      const n = mr(t), o = W.formValidators.get(t);
+      n && o && o !== e.name && r.push({
         type: "formValidator",
         name: t,
-        existingPlugin: a,
+        existingPlugin: o,
         newPlugin: e.name
       });
     }
   if (e.submissionHandlers)
     for (const t of Object.keys(e.submissionHandlers)) {
-      const n = mn(t), a = W.submissionHandlers.get(t);
-      n && a && a !== e.name && r.push({
+      const n = fn(t), o = W.submissionHandlers.get(t);
+      n && o && o !== e.name && r.push({
         type: "submissionHandler",
         name: t,
-        existingPlugin: a,
+        existingPlugin: o,
         newPlugin: e.name
       });
     }
   return r;
 }
-function oe(e, r, t, n, a, o, c, s) {
+function ae(e, r, t, n, o, a, c, s) {
   for (const i of Object.keys(e)) {
     let d;
-    if (s ? d = a.find((m) => m.type === "fieldCustomValidator" && m.name === `${s}:${i}`) : e === n.components ? d = a.find((m) => m.type === "component" && m.name === i) : e === n.formValidators ? d = a.find((m) => m.type === "formValidator" && m.name === i) : e === n.fieldTypeValidators ? d = a.find((m) => m.type === "fieldTypeValidator" && m.name === `type:${i}`) : e === n.submissionHandlers && (d = a.find((m) => m.type === "submissionHandler" && m.name === i)), et(d || null, o, c))
+    if (s ? d = o.find((m) => m.type === "fieldCustomValidator" && m.name === `${s}:${i}`) : e === n.components ? d = o.find((m) => m.type === "component" && m.name === i) : e === n.formValidators ? d = o.find((m) => m.type === "formValidator" && m.name === i) : e === n.fieldTypeValidators ? d = o.find((m) => m.type === "fieldTypeValidator" && m.name === `type:${i}`) : e === n.submissionHandlers && (d = o.find((m) => m.type === "submissionHandler" && m.name === i)), rt(d || null, a, c))
       if (s) {
         const m = r.get(s) || /* @__PURE__ */ new Map();
         m.set(i, n.name), r.set(s, m), t(i, e[i]);
@@ -4870,65 +4890,65 @@ function oe(e, r, t, n, a, o, c, s) {
         ) : r.set(i, n.name), t(i, e[i]);
   }
 }
-function va(e, r) {
+function So(e, r) {
   const t = r?.conflictResolution || "error";
   if (Z.has(e.name)) {
-    const a = {
+    const o = {
       type: "plugin",
       name: e.name,
       existingPlugin: e.name,
       newPlugin: e.name
     };
-    if (!et(a, t, r?.onConflict)) return;
+    if (!rt(o, t, r?.onConflict)) return;
   }
-  const n = ea(e);
-  if (e.components && oe(
+  const n = to(e);
+  if (e.components && ae(
     e.components,
     W.components,
-    Ur,
+    Wr,
     e,
     n,
     t,
     r?.onConflict
   ), e.fieldCustomValidators)
-    for (const [a, o] of Object.entries(e.fieldCustomValidators))
-      oe(
-        o,
+    for (const [o, a] of Object.entries(e.fieldCustomValidators))
+      ae(
+        a,
         W.fieldValidators,
-        (c, s) => pt(a, c, s),
+        (c, s) => gt(o, c, s),
         e,
         n,
         t,
         r?.onConflict,
-        a
+        o
       );
-  e.formValidators && oe(
+  e.formValidators && ae(
     e.formValidators,
     W.formValidators,
-    ft,
+    pt,
     e,
     n,
     t,
     r?.onConflict
-  ), e.fieldTypeValidators && oe(
+  ), e.fieldTypeValidators && ae(
     e.fieldTypeValidators,
     W.fieldTypeValidators,
-    gt,
+    ht,
     e,
     n,
     t,
     r?.onConflict
-  ), e.submissionHandlers && oe(
+  ), e.submissionHandlers && ae(
     e.submissionHandlers,
     W.submissionHandlers,
-    Gr,
+    Jr,
     e,
     n,
     t,
     r?.onConflict
   ), e.setup && e.setup(), Z.set(e.name, e);
 }
-function xa(e, r = !1) {
+function Co(e, r = !1) {
   const t = Z.get(e);
   if (!t) return !1;
   if (t.cleanup && t.cleanup(), r) {
@@ -4936,12 +4956,12 @@ function xa(e, r = !1) {
       for (const n of Object.keys(t.components))
         W.components.delete(n);
     if (t.fieldCustomValidators)
-      for (const [n, a] of Object.entries(t.fieldCustomValidators)) {
-        const o = W.fieldValidators.get(n);
-        if (o) {
-          for (const c of Object.keys(a))
-            o.delete(c);
-          o.size === 0 && W.fieldValidators.delete(n);
+      for (const [n, o] of Object.entries(t.fieldCustomValidators)) {
+        const a = W.fieldValidators.get(n);
+        if (a) {
+          for (const c of Object.keys(o))
+            a.delete(c);
+          a.size === 0 && W.fieldValidators.delete(n);
         }
       }
     if (t.formValidators)
@@ -4956,18 +4976,18 @@ function xa(e, r = !1) {
   }
   return Z.delete(e), !0;
 }
-function wa(e) {
+function No(e) {
   return Z.get(e);
 }
-function Sa() {
+function ko() {
   return Array.from(Z.values());
 }
-function Ca(e) {
+function Io(e) {
   return Z.has(e);
 }
-function Na(e) {
+function Eo(e) {
   for (const [r, t] of Object.entries(e))
-    Ur(r, t);
+    Wr(r, t);
 }
 function ee(e) {
   return typeof e == "object" && e !== null;
@@ -4977,7 +4997,7 @@ function Te(e) {
   const r = e;
   return typeof r.name == "string" && typeof r.displayName == "string";
 }
-function rt(e) {
+function tt(e) {
   if (!ee(e)) return !1;
   const r = e;
   return typeof r.name != "string" || typeof r.version != "string" || !Array.isArray(r.properties) ? !1 : r.properties.every((t) => Te(t));
@@ -4990,12 +5010,12 @@ function Ce(e) {
     return !!r && typeof r.name == "string" && typeof r.size == "number";
   }
 }
-function ka(e, r, t = {}) {
+function Mo(e, r, t = {}) {
   try {
     const {
       includeMetadata: n = !1,
-      dateFormat: a = "iso",
-      fileHandling: o = "metadata",
+      dateFormat: o = "iso",
+      fileHandling: a = "metadata",
       prettify: c = !1,
       excludeFields: s = [],
       includeOnlyFields: i = []
@@ -5005,7 +5025,7 @@ function ka(e, r, t = {}) {
         success: !1,
         error: "Instance must be a valid object"
       };
-    const d = [], m = [], u = {}, b = (rt(r) || ee(r) && Array.isArray(r.properties) ? r.properties : []).filter(Te), N = new Map(b.map((h) => [h.name, h]));
+    const d = [], m = [], u = {}, b = (tt(r) || ee(r) && Array.isArray(r.properties) ? r.properties : []).filter(Te), C = new Map(b.map((h) => [h.name, h]));
     for (const [h, y] of Object.entries(e)) {
       if (s.includes(h)) {
         m.push(h);
@@ -5016,9 +5036,9 @@ function ka(e, r, t = {}) {
         continue;
       }
       if (y === void 0) continue;
-      const E = N.get(h);
+      const E = C.get(h);
       try {
-        u[h] = ra(y, E, { dateFormat: a, fileHandling: o });
+        u[h] = no(y, E, { dateFormat: o, fileHandling: a });
       } catch (F) {
         d.push(`Error serializing field '${h}': ${String(F)}`), u[h] = null;
       }
@@ -5044,8 +5064,8 @@ function ka(e, r, t = {}) {
     };
   }
 }
-function ra(e, r, t = {}) {
-  const { dateFormat: n = "iso", fileHandling: a = "metadata" } = t;
+function no(e, r, t = {}) {
+  const { dateFormat: n = "iso", fileHandling: o = "metadata" } = t;
   if (e == null)
     return null;
   if (r)
@@ -5055,7 +5075,7 @@ function ra(e, r, t = {}) {
       case "date-time":
         return er(e, n);
       case "file":
-        return rr(e, a);
+        return rr(e, o);
       case "int":
       case "integer":
         return typeof e == "string" ? parseInt(e, 10) : e;
@@ -5066,11 +5086,11 @@ function ra(e, r, t = {}) {
         return typeof e == "string" ? e === "true" : !!e;
       case "int-array":
       case "float-array":
-        return Array.isArray(e) ? e.map((o) => typeof o == "string" ? Number(o) : o) : e;
+        return Array.isArray(e) ? e.map((a) => typeof a == "string" ? Number(a) : a) : e;
       default:
         return e;
     }
-  return e instanceof Date ? er(e, n) : Ce(e) || Array.isArray(e) && Ce(e[0]) ? rr(e, a) : e;
+  return e instanceof Date ? er(e, n) : Ce(e) || Array.isArray(e) && Ce(e[0]) ? rr(e, o) : e;
 }
 function er(e, r) {
   let t = null;
@@ -5114,12 +5134,12 @@ function tr(e, r) {
     _note: "Base64 encoding requires async implementation"
   };
 }
-function Ia(e, r, t = {}) {
+function Fo(e, r, t = {}) {
   try {
     const {
       strict: n = !1,
-      validateTypes: a = !0,
-      preserveUnknownFields: o = !0,
+      validateTypes: o = !0,
+      preserveUnknownFields: a = !0,
       dateFormat: c = "auto"
     } = t;
     if (!e || typeof e != "string")
@@ -5130,10 +5150,10 @@ function Ia(e, r, t = {}) {
     let s;
     try {
       s = JSON.parse(e);
-    } catch (C) {
+    } catch (N) {
       return {
         success: !1,
-        error: `Invalid JSON: ${C instanceof Error ? C.message : "Unknown parsing error"}`
+        error: `Invalid JSON: ${N instanceof Error ? N.message : "Unknown parsing error"}`
       };
     }
     if (!s || typeof s != "object")
@@ -5141,29 +5161,29 @@ function Ia(e, r, t = {}) {
         success: !1,
         error: "Parsed data must be an object"
       };
-    const i = [], d = [], m = {}, f = (rt(r) || ee(r) && Array.isArray(r.properties) ? r.properties : []).filter(Te), b = new Map(f.map((C) => [C.name, C]));
-    for (const C of f) {
-      const h = C.name, y = s[h];
+    const i = [], d = [], m = {}, f = (tt(r) || ee(r) && Array.isArray(r.properties) ? r.properties : []).filter(Te), b = new Map(f.map((N) => [N.name, N]));
+    for (const N of f) {
+      const h = N.name, y = s[h];
       if (y === void 0) {
-        n && C.required && d.push(`Required field '${h}' is missing`);
+        n && N.required && d.push(`Required field '${h}' is missing`);
         continue;
       }
       try {
-        m[h] = ta(y, C, { validateTypes: a, dateFormat: c });
+        m[h] = oo(y, N, { validateTypes: o, dateFormat: c });
       } catch (E) {
         const F = `Error deserializing field '${h}': ${String(E)}`;
         n ? d.push(F) : (i.push(F), m[h] = y);
       }
     }
-    if (o)
-      for (const [C, h] of Object.entries(s))
-        !b.has(C) && C !== "_metadata" && (n && i.push(`Unknown field '${C}' preserved`), m[C] = h);
-    const N = d.length > 0;
+    if (a)
+      for (const [N, h] of Object.entries(s))
+        !b.has(N) && N !== "_metadata" && (n && i.push(`Unknown field '${N}' preserved`), m[N] = h);
+    const C = d.length > 0;
     return {
-      success: !N,
+      success: !C,
       data: m,
       warnings: i.length > 0 ? i : void 0,
-      validationErrors: N ? d : void 0
+      validationErrors: C ? d : void 0
     };
   } catch (n) {
     return {
@@ -5172,8 +5192,8 @@ function Ia(e, r, t = {}) {
     };
   }
 }
-function ta(e, r, t = {}) {
-  const { validateTypes: n = !0, dateFormat: a = "auto" } = t;
+function oo(e, r, t = {}) {
+  const { validateTypes: n = !0, dateFormat: o = "auto" } = t;
   if (e == null)
     return e;
   try {
@@ -5181,7 +5201,7 @@ function ta(e, r, t = {}) {
       case "date":
       case "datetime":
       case "date-time":
-        return na(e, a, n);
+        return ao(e, o, n);
       case "int":
       case "integer":
         return Ne(e, n);
@@ -5189,7 +5209,7 @@ function ta(e, r, t = {}) {
       case "number":
         return ke(e, n);
       case "boolean":
-        return aa(e, n);
+        return io(e, n);
       case "int-array":
         return nr(e, "integer", n);
       case "float-array":
@@ -5203,13 +5223,13 @@ function ta(e, r, t = {}) {
       default:
         return e;
     }
-  } catch (o) {
+  } catch (a) {
     if (n)
-      throw new Error(`Type conversion failed: ${String(o)}`);
+      throw new Error(`Type conversion failed: ${String(a)}`);
     return e;
   }
 }
-function Ea(e, r = {}) {
+function $o(e, r = {}) {
   try {
     const { prettify: t = !0, includeMetadata: n = !0 } = r;
     if (!e || typeof e != "object")
@@ -5217,16 +5237,16 @@ function Ea(e, r = {}) {
         success: !1,
         error: "Definition must be a valid object"
       };
-    const a = { ...e };
-    return n && (a._metadata = {
+    const o = { ...e };
+    return n && (o._metadata = {
       serializedAt: (/* @__PURE__ */ new Date()).toISOString(),
-      version: a.version || "1.0.0",
-      propertyCount: (Array.isArray(a.properties) ? a.properties.length : 0) || 0
+      version: o.version || "1.0.0",
+      propertyCount: (Array.isArray(o.properties) ? o.properties.length : 0) || 0
     }), {
       success: !0,
-      data: t ? JSON.stringify(a, null, 2) : JSON.stringify(a),
+      data: t ? JSON.stringify(o, null, 2) : JSON.stringify(o),
       metadata: {
-        fieldCount: (Array.isArray(a.properties) ? a.properties.length : 0) || 0,
+        fieldCount: (Array.isArray(o.properties) ? o.properties.length : 0) || 0,
         excludedFields: [],
         warnings: []
       }
@@ -5238,13 +5258,13 @@ function Ea(e, r = {}) {
     };
   }
 }
-function Ma(e, r = {}) {
+function Vo(e, r = {}) {
   try {
     const { strict: t = !1, validateTypes: n = !0 } = r;
-    let a;
+    let o;
     if (typeof e == "string")
       try {
-        a = JSON.parse(e);
+        o = JSON.parse(e);
       } catch (m) {
         return {
           success: !1,
@@ -5252,43 +5272,43 @@ function Ma(e, r = {}) {
         };
       }
     else if (e && typeof e == "object")
-      a = { ...e };
+      o = { ...e };
     else
       return {
         success: !1,
         error: "Input must be a string or object"
       };
-    const o = [], c = [], s = ["name", "version", "displayName"];
+    const a = [], c = [], s = ["name", "version", "displayName"];
     for (const m of s)
-      if (!(m in a) || !a[m])
+      if (!(m in o) || !o[m])
         if (t)
           c.push(`Required field '${m}' is missing`);
         else
-          switch (o.push(`Missing field '${m}', using default`), m) {
+          switch (a.push(`Missing field '${m}', using default`), m) {
             case "name":
-              a.name = "unnamed-definition";
+              o.name = "unnamed-definition";
               break;
             case "version":
-              a.version = "1.0.0";
+              o.version = "1.0.0";
               break;
             case "displayName":
-              a.displayName = a.name || "Unnamed Definition";
+              o.displayName = o.name || "Unnamed Definition";
               break;
           }
-    const i = Array.isArray(a.properties) ? a.properties : null;
-    i ? a.properties = i.map((m, u) => {
+    const i = Array.isArray(o.properties) ? o.properties : null;
+    i ? o.properties = i.map((m, u) => {
       const f = ee(m) ? m : {}, b = { ...f };
       if (!f.name) {
-        const N = `Property at index ${u} missing 'name'`;
-        t ? c.push(N) : (o.push(`${N}, using 'field_${u}'`), b.name = `field_${u}`);
+        const C = `Property at index ${u} missing 'name'`;
+        t ? c.push(C) : (a.push(`${C}, using 'field_${u}'`), b.name = `field_${u}`);
       }
-      return f.displayName || (b.displayName = f.name || `Field ${u}`), f.type || (t && n ? c.push(`Property '${f.name || u}' missing 'type'`) : (o.push(`Property '${f.name || u}' missing 'type', using 'string'`), b.type = "string")), f.defaultValue === void 0 && (b.defaultValue = null), f.required === void 0 && (b.required = !1), b;
-    }) : t ? c.push("Properties must be an array") : (o.push("Properties not found or invalid, using empty array"), a.properties = []);
+      return f.displayName || (b.displayName = f.name || `Field ${u}`), f.type || (t && n ? c.push(`Property '${f.name || u}' missing 'type'`) : (a.push(`Property '${f.name || u}' missing 'type', using 'string'`), b.type = "string")), f.defaultValue === void 0 && (b.defaultValue = null), f.required === void 0 && (b.required = !1), b;
+    }) : t ? c.push("Properties must be an array") : (a.push("Properties not found or invalid, using empty array"), o.properties = []);
     const d = c.length > 0;
     return {
       success: !d,
-      data: a,
-      warnings: o.length > 0 ? o : void 0,
+      data: o,
+      warnings: a.length > 0 ? a : void 0,
       validationErrors: d ? c : void 0
     };
   } catch (t) {
@@ -5298,7 +5318,7 @@ function Ma(e, r = {}) {
     };
   }
 }
-function na(e, r, t) {
+function ao(e, r, t) {
   if (e instanceof Date)
     return e;
   if (typeof e == "number") {
@@ -5363,7 +5383,7 @@ function ke(e, r) {
     throw new Error(`Cannot convert ${typeof e} to number`);
   return e;
 }
-function aa(e, r) {
+function io(e, r) {
   if (typeof e == "boolean")
     return e;
   if (typeof e == "string") {
@@ -5382,70 +5402,70 @@ function aa(e, r) {
 function nr(e, r, t) {
   if (!Array.isArray(e)) {
     if (typeof e == "string")
-      return e.split(",").map((a) => a.trim()).filter(Boolean).map((a) => r === "integer" ? Ne(a, t) : ke(a, t));
+      return e.split(",").map((o) => o.trim()).filter(Boolean).map((o) => r === "integer" ? Ne(o, t) : ke(o, t));
     if (t)
       throw new Error(`Expected array, got ${typeof e}`);
     return e;
   }
-  return e.map((n, a) => {
+  return e.map((n, o) => {
     try {
       return r === "integer" ? Ne(n, t) : ke(n, t);
-    } catch (o) {
+    } catch (a) {
       if (t)
-        throw new Error(`Array element ${a}: ${o}`);
+        throw new Error(`Array element ${o}: ${a}`);
       return n;
     }
   });
 }
-function oa() {
+function so() {
   if (!document.getElementById("reactaform-styles"))
     try {
       const e = document.createElement("style");
-      e.id = "reactaform-styles", e.textContent = st, document.head.appendChild(e);
+      e.id = "reactaform-styles", e.textContent = ct, document.head.appendChild(e);
     } catch {
     }
 }
-typeof document < "u" && oa();
+typeof document < "u" && so();
 export {
   V as CSS_CLASSES,
-  ya as ReactaForm,
-  Yn as ReactaFormProvider,
-  pn as ReactaFormRenderer,
+  wo as ReactaForm,
+  Zn as ReactaFormProvider,
+  hn as ReactaFormRenderer,
   O as StandardFieldLayout,
-  la as Units,
+  mo as Units,
   U as combineClasses,
-  Zn as createInstanceFromDefinition,
-  Ma as deserializeDefinition,
-  Ia as deserializeInstance,
-  Sa as getAllPlugins,
-  Qt as getButtonHandler,
-  Wr as getComponent,
-  wa as getPlugin,
-  pa as getSupportedLanguages,
-  ma as hasButtonHandler,
-  Ca as hasPlugin,
-  oa as injectReactaFormStyles,
+  eo as createInstanceFromDefinition,
+  Vo as deserializeDefinition,
+  Fo as deserializeInstance,
+  ko as getAllPlugins,
+  rn as getButtonHandler,
+  _r as getComponent,
+  No as getPlugin,
+  bo as getSupportedLanguages,
+  po as hasButtonHandler,
+  Io as hasPlugin,
+  so as injectReactaFormStyles,
   ie as isDarkTheme,
-  fa as listButtonHandlers,
-  ha as loadInstance,
-  ga as loadJsonDefinition,
-  ua as registerButtonHandler,
-  Ur as registerComponent,
-  Na as registerComponents,
-  pt as registerFieldCustomValidationHandler,
-  gt as registerFieldTypeValidationHandler,
-  ft as registerFormValidationHandler,
-  va as registerPlugin,
-  Gr as registerSubmissionHandler,
-  Ea as serializeDefinition,
-  ka as serializeInstance,
-  da as unregisterButtonHandler,
-  xa as unregisterPlugin,
-  ba as upgradeInstanceToLatestDefinition,
-  ct as useDebouncedCallback,
+  ho as listButtonHandlers,
+  vo as loadInstance,
+  yo as loadJsonDefinition,
+  fo as registerButtonHandler,
+  Wr as registerComponent,
+  Eo as registerComponents,
+  gt as registerFieldCustomValidationHandler,
+  ht as registerFieldTypeValidationHandler,
+  pt as registerFormValidationHandler,
+  So as registerPlugin,
+  Jr as registerSubmissionHandler,
+  $o as serializeDefinition,
+  Mo as serializeInstance,
+  go as unregisterButtonHandler,
+  Co as unregisterPlugin,
+  xo as upgradeInstanceToLatestDefinition,
+  lt as useDebouncedCallback,
   T as useFieldValidator,
-  H as useReactaFormContext,
+  B as useReactaFormContext,
   _ as useUncontrolledValidatedInput,
-  ca as validateFieldValue,
+  uo as validateFieldValue,
   fr as validateFieldWithCustomHandler
 };