reactaform 1.9.1 → 1.9.21

package/dist/reactaform.es.js

@@ -1,8 +1,8 @@
-import { jsx as p, jsxs as D, Fragment as Ie } from "react/jsx-runtime";
+import { jsx as p, jsxs as z, Fragment as Ie } from "react/jsx-runtime";
 import * as l from "react";
-import { createContext as it, useContext as st, useRef as pe, useEffect as Ue, useCallback as ge } from "react";
+import { createContext as st, useContext as ct, useRef as pe, useEffect as Ue, useCallback as ge } from "react";
 import * as de from "react-dom";
-const ct = `/* ReactaForm CSS Custom Properties (CSS Variables) */\r
+const lt = `/* ReactaForm CSS Custom Properties (CSS Variables) */\r
 \r
 /* Default Light Theme */\r
 :root {\r
@@ -394,8 +394,8 @@ const ct = `/* ReactaForm CSS Custom Properties (CSS Variables) */\r
   \r
   \r
 }\r
-`, Ee = it(void 0), B = () => {
-  const e = st(Ee);
+`, Ee = st(void 0), B = () => {
+  const e = ct(Ee);
   if (!e)
     throw new Error("❌ useReactaFormContext must be used within a <ReactaFormProvider>");
   return e;
@@ -446,36 +446,36 @@ class ne {
     return n !== void 0 ? n : t;
   }
 }
-const ar = typeof process < "u" && process.env.NODE_ENV === "test";
-function lt(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 ut(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]
   ), cancel: d, flush: m };
 }
-const V = {
+const $ = {
   field: "reactaform-field",
   label: "reactaform-label",
   input: "reactaform-input",
@@ -488,29 +488,29 @@ const V = {
 }, 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 ut(e) {
+function mt(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 mt = () => /* @__PURE__ */ D(
+const dt = () => /* @__PURE__ */ z(
   "svg",
   {
     width: "1em",
@@ -526,18 +526,18 @@ const mt = () => /* @__PURE__ */ D(
       /* @__PURE__ */ p("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
     ]
   }
-), dt = ({ content: e, size: r = "medium", animation: t = !0 }) => {
-  const { t: n, theme: a, formStyle: o, 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(a), [E, F] = l.useState(void 0);
+), ft = ({ 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, M] = 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 = ut(g) ? "black" : "white";
-      F(`color-mix(in srgb, var(--reactaform-primary-bg) 85%, ${w} 15%)`);
+      const w = mt(g) ? "black" : "white";
+      M(`color-mix(in srgb, var(--reactaform-primary-bg) 85%, ${w} 15%)`);
     } else
-      F(I);
+      M(I);
   }, []);
-  const M = l.useMemo(() => {
+  const F = l.useMemo(() => {
     const v = {
       icon: {
         display: "inline-flex",
@@ -587,11 +587,11 @@ const mt = () => /* @__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 || !C.current) {
       f(!1);
@@ -614,25 +614,25 @@ const mt = () => /* @__PURE__ */ D(
       );
     }
   }, [s]);
-  const $ = typeof document < "u" ? document.getElementById("popup-root") : null, R = /* @__PURE__ */ p(
+  const V = typeof document < "u" ? document.getElementById("popup-root") : null, R = /* @__PURE__ */ p(
     "div",
     {
       ref: C,
       "data-tooltip-id": h,
       style: {
-        ...M.text,
+        ...F.text,
         transform: u ? "translateY(0) scale(1)" : "translateY(-4px) scale(0.98)",
         transition: "opacity 120ms ease, transform 120ms ease, visibility 120ms ease",
         width: 240,
         // When positioned is true, apply the visible styles
-        ...u ? M.textVisible : {},
+        ...u ? F.textVisible : {},
         top: d.y,
         left: d.x
       },
       children: n(e)
     }
   );
-  return /* @__PURE__ */ D(Ie, { children: [
+  return /* @__PURE__ */ z(Ie, { children: [
     /* @__PURE__ */ p(
       "span",
       {
@@ -642,54 +642,54 @@ const mt = () => /* @__PURE__ */ D(
         onMouseEnter: () => i(!0),
         onMouseLeave: () => i(!1),
         style: {
-          ...M.icon
+          ...F.icon
         },
-        children: /* @__PURE__ */ p(mt, {})
+        children: /* @__PURE__ */ p(dt, {})
       }
     ),
-    s && ($ ? de.createPortal(R, $) : R)
+    s && (V ? de.createPortal(R, V) : R)
   ] });
-}, or = l.memo(dt), ve = l.memo(({
+}, ar = l.memo(ft), ve = l.memo(({
   field: e,
   error: r,
   children: t,
   showLabel: n = !0
 }) => {
-  const { t: a } = B(), 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)",
     width: "100%"
   }), []);
-  return /* @__PURE__ */ D("div", { className: `${V.field} column-layout`, style: c, children: [
+  return /* @__PURE__ */ z("div", { className: `${$.field} column-layout`, style: c, children: [
     n && /* @__PURE__ */ p(
       "label",
       {
         id: `${e.name}-label`,
-        className: V.label,
+        className: $.label,
         htmlFor: e.name,
         style: s,
-        children: a(e.displayName)
+        children: o(e.displayName)
       }
     ),
-    /* @__PURE__ */ D("div", { style: i, children: [
+    /* @__PURE__ */ z("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 })
+    r && /* @__PURE__ */ p(Fe, { id: `${e.name}-error`, children: r })
   ] });
 });
 ve.displayName = "ColumnFieldLayout";
@@ -699,40 +699,40 @@ const ir = l.memo(({
   children: t,
   rightAlign: n = !1
 }) => {
-  const { t: a } = B(), o = l.useMemo(() => ({
+  const { t: o } = B(), a = l.useMemo(() => ({
     display: "flex",
     alignItems: "center",
     gap: "3px"
   }), []);
-  return /* @__PURE__ */ D("div", { className: `${V.field} row-layout`, children: [
+  return /* @__PURE__ */ z("div", { className: `${$.field} row-layout`, children: [
     /* @__PURE__ */ p(
       "label",
       {
         id: `${e.name}-label`,
-        className: V.label,
+        className: $.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__ */ z("div", { children: [
+      /* @__PURE__ */ z("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 })
+      r && /* @__PURE__ */ p(Fe, { id: `${e.name}-error`, children: r })
     ] })
   ] });
 });
 ir.displayName = "RowFieldLayout";
-const O = l.memo(({
+const L = l.memo(({
   field: e,
   error: r,
   children: t,
   rightAlign: n = !1
 }) => e.labelLayout === "column-left" || e.labelLayout === "column-center" ? /* @__PURE__ */ p(ve, { field: e, error: r, showLabel: !0, children: t }) : e.type === "checkbox" || e.type === "switch" ? /* @__PURE__ */ p(ve, { field: e, error: r, showLabel: !1, children: t }) : /* @__PURE__ */ p(ir, { field: e, error: r, rightAlign: n, children: t }));
-O.displayName = "StandardFieldLayout";
-const Me = l.memo(({ children: e, id: r }) => {
+L.displayName = "StandardFieldLayout";
+const Fe = l.memo(({ children: e, id: r }) => {
   const t = l.useMemo(() => ({
     color: "var(--reactaform-error-color, red)",
     fontSize: "13px",
@@ -746,11 +746,11 @@ const Me = l.memo(({ children: e, id: r }) => {
   }), []);
   return /* @__PURE__ */ p("div", { id: r, style: t, children: e });
 });
-Me.displayName = "ErrorDiv";
+Fe.displayName = "ErrorDiv";
 const sr = l.memo(({ name: e, onChange: r }) => {
   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: [
+  return /* @__PURE__ */ z("div", { style: { marginBottom: 16 }, children: [
+    /* @__PURE__ */ z("div", { style: { display: "grid", gridTemplateColumns: "1fr 2fr", gap: 12, alignItems: "center" }, children: [
       /* @__PURE__ */ p(
         "label",
         {
@@ -770,7 +770,7 @@ const sr = l.memo(({ name: e, onChange: r }) => {
           id: "instance-name-input",
           type: "text",
           value: e,
-          className: U(V.input, V.textInput),
+          className: U($.input, $.textInput),
           onChange: (n) => r(n.target.value),
           placeholder: t("Enter instance name")
         }
@@ -780,11 +780,11 @@ const sr = l.memo(({ name: e, onChange: r }) => {
   ] });
 });
 sr.displayName = "InstanceName";
-class ft extends ne {
+class pt 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];
@@ -796,24 +796,24 @@ class ft extends ne {
     return this.list();
   }
 }
-const cr = new ne(), lr = new ft(), Fe = new ne();
-function pt(e, r) {
+const cr = new ne(), lr = new pt(), Me = new ne();
+function gt(e, r) {
   cr.register(e, r);
 }
-function gt(e, r, t) {
+function ht(e, r, t) {
   lr.registerInCategory(e, r, t);
 }
-function ht(e, r) {
+function bt(e, r) {
   if (an(e)) {
     console.warn(
       `[ReactaForm] Can't override builtin type field validation handler for type "${e}".`
     );
     return;
   }
-  Fe.register(e, r);
+  Me.register(e, r);
 }
 function H(e, r) {
-  Fe.register(e, r);
+  Me.register(e, r);
 }
 function ur(e, r) {
   return lr.getFromCategory(e, r) || null;
@@ -822,31 +822,31 @@ function mr(e) {
   return cr.get(e) || null;
 }
 function dr(e) {
-  return Fe.get(e) || null;
+  return Me.get(e) || null;
 }
-function bt(e) {
+function yt(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) {
@@ -854,38 +854,38 @@ function fr(e, r, t, n) {
     }
   return null;
 }
-function ua(e, r, t, n) {
+function mo(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 yt(e, r, t) {
+async function vt(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 bt(o) ? await o || null : o || null;
-    } catch (o) {
-      return [String(o instanceof Error ? o.message : o)];
+      const a = o(r, t);
+      return yt(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 } = B();
+  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 = ({
@@ -893,12 +893,12 @@ const gr = ({
   value: r = !1,
   onChange: t,
   onError: n,
-  error: a
+  error: o
 }) => {
-  const { t: o } = B(), 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);
@@ -910,7 +910,7 @@ const gr = ({
     },
     [t, r]
   ), m = e.name;
-  return /* @__PURE__ */ p(O, { field: e, rightAlign: !1, error: s, children: /* @__PURE__ */ D(
+  return /* @__PURE__ */ p(L, { field: e, rightAlign: !1, error: s, children: /* @__PURE__ */ z(
     "div",
     {
       style: {
@@ -923,10 +923,10 @@ const gr = ({
         /* @__PURE__ */ p(
           "label",
           {
-            className: V.label,
+            className: $.label,
             htmlFor: m,
             style: { textAlign: "left", justifyContent: "flex-start" },
-            children: o(e.displayName)
+            children: a(e.displayName)
           }
         ),
         /* @__PURE__ */ p(
@@ -956,26 +956,26 @@ const gr = ({
   ) });
 };
 gr.displayName = "CheckboxInput";
-const vt = l.memo(gr);
+const xt = 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" },
@@ -992,11 +992,11 @@ const Ke = [
   { label: "Gray", value: "#808080" },
   { label: "Light Gray", value: "#d3d3d3" },
   { label: "Pink", value: "#ffc0cb" }
-], xt = /^#([0-9A-F]{3}){1,2}$/i, wt = "#000000", St = (e) => xt.test(e), he = (e) => {
-  if (!e || !St(e)) return wt;
+], wt = /^#([0-9A-F]{3}){1,2}$/i, St = "#000000", Ct = (e) => wt.test(e), he = (e) => {
+  if (!e || !Ct(e)) return St;
   const r = e.toLowerCase();
   return r.length === 4 ? "#" + r.slice(1).split("").map((t) => t + t).join("") : r;
-}, Ct = (e) => {
+}, Nt = (e) => {
   const r = parseInt(e.slice(1), 16);
   return {
     r: r >> 16 & 255,
@@ -1008,9 +1008,9 @@ const Ke = [
   value: r,
   onChange: t,
   onError: n,
-  error: a
+  error: o
 }) => {
-  const { t: o } = B(), 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 } = _({
@@ -1023,29 +1023,29 @@ const Ke = [
     f(s);
   }, [s]);
   const b = l.useCallback(
-    (M) => {
-      const $ = he(M.target.value);
-      f($), m({
-        target: { value: $ }
+    (F) => {
+      const V = he(F.target.value);
+      f(V), m({
+        target: { value: V }
       });
     },
     [m]
   ), C = l.useCallback(
-    (M) => {
-      const $ = he(M.target.value);
-      f($), m({
-        target: { value: $ }
+    (F) => {
+      const V = he(F.target.value);
+      f(V), m({
+        target: { value: V }
       });
     },
     [m]
   ), h = l.useMemo(
-    () => new Set(Ke.map((M) => M.value)),
+    () => new Set(Ke.map((F) => F.value)),
     []
-  ).has(u), { r: y, g: E, b: F } = l.useMemo(
-    () => Ct(u),
+  ).has(u), { r: y, g: E, b: M } = l.useMemo(
+    () => Nt(u),
     [u]
   );
-  return /* @__PURE__ */ p(O, { field: e, error: d, children: /* @__PURE__ */ D(
+  return /* @__PURE__ */ p(L, { field: e, error: d, children: /* @__PURE__ */ z(
     "div",
     {
       style: {
@@ -1055,26 +1055,26 @@ const Ke = [
         width: "100%"
       },
       children: [
-        /* @__PURE__ */ D(
+        /* @__PURE__ */ z(
           "select",
           {
             id: e.name,
             value: u,
             onChange: C,
             className: U(
-              V.input,
-              V.inputSelect
+              $.input,
+              $.inputSelect
             ),
             "aria-invalid": !!d,
             children: [
-              Ke.map((M) => /* @__PURE__ */ p("option", { value: M.value, children: o(M.label) }, M.value)),
-              !h && /* @__PURE__ */ D("option", { value: u, children: [
+              Ke.map((F) => /* @__PURE__ */ p("option", { value: F.value, children: a(F.label) }, F.value)),
+              !h && /* @__PURE__ */ z("option", { value: u, children: [
                 "(",
                 y,
                 ", ",
                 E,
                 ", ",
-                F,
+                M,
                 ")"
               ] })
             ]
@@ -1112,7 +1112,7 @@ const Ke = [
   ) });
 };
 hr.displayName = "ColorInput";
-const Nt = l.memo(hr), Ge = (e) => {
+const kt = l.memo(hr), Ge = (e) => {
   if (!e) return null;
   const r = new Date(e);
   return isNaN(r.getTime()) ? null : r;
@@ -1122,8 +1122,8 @@ const Nt = 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 = ({
@@ -1131,15 +1131,15 @@ const Nt = 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(
+  return /* @__PURE__ */ p(L, { field: e, error: i, children: /* @__PURE__ */ p(
     "input",
     {
       id: e.name,
@@ -1147,7 +1147,7 @@ const Nt = l.memo(hr), Ge = (e) => {
       ref: s,
       defaultValue: Je(r),
       onChange: d,
-      className: U(V.input, V.textInput),
+      className: U($.input, $.textInput),
       ...e.minDate ? { min: e.minDate } : {},
       ...e.maxDate ? { max: e.maxDate } : {},
       "aria-invalid": !!i,
@@ -1156,30 +1156,30 @@ const Nt = l.memo(hr), Ge = (e) => {
   ) });
 };
 br.displayName = "DateInput";
-const kt = l.memo(br), yr = ({ field: e }) => {
-  const { t: r } = B(), { displayText: t = "", textAlign: n = "left", allowHtml: a = !1 } = e;
+const It = 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,
+      className: $.description,
       style: { textAlign: n },
-      ...a ? { dangerouslySetInnerHTML: { __html: r(t) } } : { children: r(t) }
+      ...o ? { dangerouslySetInnerHTML: { __html: r(t) } } : { children: r(t) }
     }
   );
 };
 yr.displayName = "Description";
-const It = l.memo(yr), vr = ({
+const Et = 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 } = B(), d = l.useRef(null), m = l.useRef(n), [u, f] = l.useState(!1), [b, C] = 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 N = 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 = N(g);
@@ -1189,17 +1189,17 @@ const It = l.memo(yr), vr = ({
     }
     w !== E.current && (E.current = w, y(w), m.current?.(w ?? null));
   }, [r, N, t, e.options]);
-  const F = () => {
+  const M = () => {
     if (!d.current) return;
     const g = d.current.getBoundingClientRect();
     C({ x: g.left, y: g.bottom }), f((w) => !w);
-  }, M = (g) => {
+  }, F = (g) => {
     const w = N(g);
     w !== E.current && (E.current = w, y(w), m.current?.(w ?? null)), t?.(g), f(!1);
-  }, $ = l.useMemo(() => {
+  }, V = 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) ?? {};
@@ -1225,14 +1225,14 @@ const It = l.memo(yr), vr = ({
     ...R(s, "dropdown", "arrow"),
     ...R(i, void 0, "arrow")
   }), [s, i]);
-  return /* @__PURE__ */ D("div", { children: [
-    /* @__PURE__ */ p(O, { field: e, error: h, children: /* @__PURE__ */ D(
+  return /* @__PURE__ */ z("div", { children: [
+    /* @__PURE__ */ p(L, { field: e, error: h, children: /* @__PURE__ */ z(
       "div",
       {
         ref: d,
         className: "reactaform-input",
         style: I,
-        onClick: F,
+        onClick: M,
         tabIndex: 0,
         role: "combobox",
         "aria-haspopup": "listbox",
@@ -1240,42 +1240,42 @@ const It = l.memo(yr), vr = ({
         "aria-invalid": !!h,
         "aria-describedby": h ? `${e.name}-error` : void 0,
         onKeyDown: (g) => {
-          (g.key === "Enter" || g.key === " ") && (g.preventDefault(), F());
+          (g.key === "Enter" || g.key === " ") && (g.preventDefault(), M());
         },
         children: [
-          /* @__PURE__ */ p("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", paddingRight: "1.8em", display: "block" }, children: $ }),
+          /* @__PURE__ */ p("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", paddingRight: "1.8em", display: "block" }, children: V }),
           /* @__PURE__ */ p("span", { style: v, "aria-hidden": !0, children: "▼" })
         ]
       }
     ) }),
     u && b && /* @__PURE__ */ p(
-      Et,
+      Ft,
       {
         position: b,
         options: e.options,
         selectedValue: String(r),
-        onSelect: M,
+        onSelect: F,
         onClose: () => f(!1),
         controlRef: d,
         theme: c,
-        t: o
+        t: a
       }
     )
   ] });
-}, Et = ({
+}, Ft = ({
   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 } = 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(
@@ -1289,7 +1289,7 @@ const It = l.memo(yr), vr = ({
         w.getPropertyValue("--reactaform-option-menu-hover-bg")
       );
     }
-  }, [o]);
+  }, [a]);
   const C = (v, g, w) => {
     if (!g) return {};
     const k = v?.[g];
@@ -1320,10 +1320,10 @@ const It = l.memo(yr), vr = ({
   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));
@@ -1333,25 +1333,25 @@ const It = l.memo(yr), vr = ({
     const v = i.current.querySelector(`#opt-${d}`);
     v && requestAnimationFrame(() => v.focus());
   }, [d]);
-  const y = 250, E = 200, [F, M] = l.useState(null), [$, R] = l.useState(null);
+  const y = 250, E = 200, [M, F] = l.useState(null), [V, R] = l.useState(null);
   if (l.useEffect(() => {
     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));
       }
-      x = Math.min(x, window.innerWidth - S), k = Math.min(k, window.innerHeight - E), M({ left: x, top: k }), R(S);
+      x = Math.min(x, window.innerWidth - S), k = Math.min(k, window.innerHeight - E), F({ left: x, top: k }), R(S);
     };
     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(
@@ -1362,9 +1362,9 @@ const It = l.memo(yr), vr = ({
         "aria-activedescendant": d >= 0 ? `opt-${d}` : void 0,
         style: {
           position: "fixed",
-          top: F ? F.top : e.y,
-          left: F ? F.left : e.x,
-          width: $ ?? y,
+          top: M ? M.top : e.y,
+          left: M ? M.left : e.x,
+          width: V ?? y,
           ...N
         },
         "data-reactaform-theme": c ?? "light",
@@ -1401,7 +1401,7 @@ const It = l.memo(yr), vr = ({
                     S.preventDefault(), S.stopPropagation(), n(String(v.value));
                     break;
                   case "Escape":
-                    S.preventDefault(), a(), o?.current?.focus();
+                    S.preventDefault(), o(), a?.current?.focus();
                     break;
                 }
               },
@@ -1431,15 +1431,15 @@ const Mt = l.memo(vr), xr = ({
   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(
+  return /* @__PURE__ */ p(L, { field: e, error: s, children: /* @__PURE__ */ p(
     "input",
     {
       id: e.name,
@@ -1447,18 +1447,18 @@ const Mt = l.memo(vr), xr = ({
       defaultValue: String(r ?? ""),
       ref: c,
       onChange: i,
-      className: U(V.input, V.textInput),
+      className: U($.input, $.textInput),
       "aria-invalid": !!s,
       "aria-describedby": s ? `${e.name}-error` : void 0
     }
   ) });
 };
 xr.displayName = "EmailInput";
-const Ft = l.memo(xr), wr = ({ field: e }) => {
+const Vt = 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",
@@ -1468,20 +1468,20 @@ const Ft = l.memo(xr), wr = ({ field: e }) => {
         height: "0",
         // ensures only 1 line
         borderTop: `${n}px solid ${t}`,
-        margin: a
+        margin: o
       }
     }
   );
 };
 wr.displayName = "FieldSeparator";
-const $t = l.memo(wr), Sr = ({ field: e, value: r, onChange: t, onError: n, error: a }) => {
-  const { t: o, 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);
+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 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));
@@ -1513,11 +1513,11 @@ const $t = l.memo(wr), Sr = ({ field: e, value: r, onChange: t, onError: n, erro
       const S = h(k);
       S !== u.current && (u.current = S, b(S), m.current?.(S ?? null)), t?.(k);
     }
-  }, F = (g) => {
-    g.preventDefault(), g.stopPropagation(), i(!0);
   }, M = (g) => {
+    g.preventDefault(), g.stopPropagation(), i(!0);
+  }, F = (g) => {
     g.preventDefault(), g.stopPropagation(), i(!1);
-  }, $ = (g) => {
+  }, V = (g) => {
     if (Array.isArray(r) && typeof g == "number") {
       const w = r.filter((S, A) => A !== g), x = w.length > 0 ? w : null, k = h(x ?? []);
       k !== u.current && (u.current = k, b(k), m.current?.(k ?? null)), t?.(x);
@@ -1535,7 +1535,7 @@ const $t = l.memo(wr), Sr = ({ field: e, value: r, onChange: t, onError: n, erro
       gap: "6px",
       maxHeight: "200px",
       overflowY: "auto"
-    }, children: g.map((w, x) => /* @__PURE__ */ D(
+    }, children: g.map((w, x) => /* @__PURE__ */ z(
       "div",
       {
         style: {
@@ -1565,8 +1565,8 @@ const $t = l.memo(wr), Sr = ({ field: e, value: r, onChange: t, onError: n, erro
             "button",
             {
               type: "button",
-              onClick: () => $(Array.isArray(r) ? x : void 0),
-              "aria-label": o("Remove file"),
+              onClick: () => V(Array.isArray(r) ? x : void 0),
+              "aria-label": a("Remove file"),
               style: {
                 background: "transparent",
                 border: "none",
@@ -1593,14 +1593,14 @@ const $t = l.memo(wr), Sr = ({ field: e, value: r, onChange: t, onError: n, erro
       `${w.name}-${x}`
     )) });
   }, [I, v] = l.useState(!1);
-  return /* @__PURE__ */ p(O, { field: e, error: f, children: /* @__PURE__ */ D("div", { style: { width: "100%" }, children: [
-    /* @__PURE__ */ D(
+  return /* @__PURE__ */ p(L, { field: e, error: f, children: /* @__PURE__ */ z("div", { style: { width: "100%" }, children: [
+    /* @__PURE__ */ z(
       "div",
       {
         className: "reactaform-input",
         onDrop: E,
-        onDragOver: F,
-        onDragLeave: M,
+        onDragOver: M,
+        onDragLeave: F,
         onMouseEnter: () => v(!0),
         onMouseLeave: () => v(!1),
         style: {
@@ -1630,7 +1630,7 @@ const $t = l.memo(wr), Sr = ({ 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: [
@@ -1660,7 +1660,7 @@ const $t = l.memo(wr), Sr = ({ 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") })
         ]
       }
     ),
@@ -1668,20 +1668,20 @@ const $t = l.memo(wr), Sr = ({ field: e, value: r, onChange: t, onError: n, erro
   ] }) });
 };
 Sr.displayName = "FileInput";
-const Vt = l.memo(Sr), Cr = ({
+const At = 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(
+  return /* @__PURE__ */ p(L, { field: e, error: i, children: /* @__PURE__ */ p(
     "input",
     {
       id: e.name,
@@ -1689,7 +1689,7 @@ const Vt = l.memo(Sr), Cr = ({
       defaultValue: c,
       ref: s,
       onChange: d,
-      className: U(V.input, V.textInput),
+      className: U($.input, $.textInput),
       style: { flex: 1 },
       "aria-invalid": !!i,
       "aria-describedby": i ? `${e.name}-error` : void 0
@@ -1697,20 +1697,20 @@ const Vt = l.memo(Sr), Cr = ({
   ) });
 };
 Cr.displayName = "FloatArrayInput";
-const At = l.memo(Cr), Nr = ({
+const Rt = 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(
+  return /* @__PURE__ */ p(L, { field: e, error: s, children: /* @__PURE__ */ p(
     "input",
     {
       id: e.name,
@@ -1719,8 +1719,8 @@ const At = l.memo(Cr), Nr = ({
       defaultValue: String(r ?? ""),
       onChange: i,
       className: U(
-        V.input,
-        V.inputNumber
+        $.input,
+        $.inputNumber
       ),
       "aria-invalid": !!s,
       "aria-describedby": s ? `${e.name}-error` : void 0
@@ -1728,8 +1728,8 @@ const At = l.memo(Cr), Nr = ({
   ) });
 };
 Nr.displayName = "FloatInput";
-const Rt = l.memo(Nr);
-function Dt() {
+const Dt = l.memo(Nr);
+function zt() {
   try {
     return "/";
   } catch {
@@ -1742,24 +1742,24 @@ function Dt() {
   return "/";
 }
 const kr = ({ field: e, value: r }) => {
-  const { language: t, t: n } = B(), a = e.alignment || "center", o = {
+  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 = `${Dt()}${s}`);
+  s && !s.startsWith("/") && (s = `${zt()}${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;
     const h = s.split("/"), y = h.pop(), E = y.lastIndexOf(".");
     if (E === -1) return;
-    const F = y.substring(0, E), M = y.substring(E);
-    let $ = null;
-    i?.includes(t) && ($ = `${F}_${t}${M}`);
+    const M = y.substring(0, E), F = y.substring(E);
+    let V = null;
+    i?.includes(t) && (V = `${M}_${t}${F}`);
     const R = new AbortController();
-    if ($) {
-      const I = [...h, $].join("/");
+    if (V) {
+      const I = [...h, V].join("/");
       fetch(I, { method: "HEAD", signal: R.signal }).then((v) => {
         const g = v.ok ? I : s;
         g !== u.current && (u.current = g, m(g));
@@ -1780,13 +1780,13 @@ const kr = ({ field: e, value: r }) => {
     boxShadow: "0 2px 6px rgba(0,0,0,0.1)",
     margin: "0 0 8px 0"
   };
-  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(
+  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(L, { 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(
@@ -1802,20 +1802,20 @@ const kr = ({ field: e, value: r }) => {
   ) });
 };
 kr.displayName = "ImageDisplay";
-const zt = l.memo(kr), Ir = ({
+const Pt = 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(
+  return /* @__PURE__ */ p(L, { field: e, error: i, children: /* @__PURE__ */ p(
     "input",
     {
       id: e.name,
@@ -1823,7 +1823,7 @@ const zt = l.memo(kr), Ir = ({
       defaultValue: c,
       ref: s,
       onChange: d,
-      className: U(V.input, V.textInput),
+      className: U($.input, $.textInput),
       style: { flex: 1 },
       "aria-invalid": !!i,
       "aria-describedby": i ? `${e.name}-error` : void 0
@@ -1831,20 +1831,20 @@ const zt = l.memo(kr), Ir = ({
   ) });
 };
 Ir.displayName = "IntegerArrayInput";
-const Pt = l.memo(Ir), Er = ({
+const Ot = 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(
+  return /* @__PURE__ */ p(L, { field: e, error: s, children: /* @__PURE__ */ p(
     "input",
     {
       id: e.name,
@@ -1852,27 +1852,27 @@ const Pt = l.memo(Ir), Er = ({
       defaultValue: String(r ?? ""),
       ref: c,
       onChange: i,
-      className: U(V.input, V.inputNumber),
+      className: U($.input, $.inputNumber),
       "aria-invalid": !!s,
       "aria-describedby": s ? `${e.name}-error` : void 0
     }
   ) });
 };
 Er.displayName = "IntegerInput";
-const Lt = l.memo(Er), Mr = ({
+const Lt = l.memo(Er), Fr = ({
   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(
+  return /* @__PURE__ */ p(L, { field: e, error: s, children: /* @__PURE__ */ p(
     "textarea",
     {
       id: e.name,
@@ -1885,25 +1885,25 @@ const Lt = l.memo(Er), Mr = ({
         width: "100%",
         boxSizing: "border-box"
       },
-      className: U(V.input, V.textInput),
+      className: U($.input, $.textInput),
       "aria-invalid": !!s,
       "aria-describedby": s ? `${e.name}-error` : void 0
     }
   ) });
 };
-Mr.displayName = "MultilineTextInput";
-const Ot = l.memo(Mr), Fr = ({
+Fr.displayName = "MultilineTextInput";
+const Tt = l.memo(Fr), Mr = ({
   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 } = B(), m = (x, k, S) => {
     if (!k) return {};
@@ -1915,10 +1915,10 @@ const Ot = l.memo(Mr), Fr = ({
   ), 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), [M, F] = l.useState(null), V = l.useRef(null);
   l.useEffect(() => {
     const x = E(Array.isArray(r) ? r : []);
-    x !== $.current && ($.current = x, M(x), o.current?.(x ?? null));
+    x !== V.current && (V.current = x, F(x), a.current?.(x ?? null));
   }, [r, E]);
   const R = () => {
     if (!u.current) return;
@@ -1926,7 +1926,7 @@ const Ot = l.memo(Mr), Fr = ({
     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 !== V.current && (V.current = S, F(S), a.current?.(S ?? null)), t?.(k);
   }, v = l.useMemo(
     () => ({
       height: "var(--reactaform-input-height, 2.5rem)",
@@ -1969,8 +1969,8 @@ const Ot = l.memo(Mr), Fr = ({
     }),
     [i, d]
   );
-  return /* @__PURE__ */ D("div", { children: [
-    /* @__PURE__ */ p(O, { field: e, error: F, children: /* @__PURE__ */ p("div", { style: { width: "100%" }, children: /* @__PURE__ */ D(
+  return /* @__PURE__ */ z("div", { children: [
+    /* @__PURE__ */ p(L, { field: e, error: M, children: /* @__PURE__ */ p("div", { style: { width: "100%" }, children: /* @__PURE__ */ z(
       "div",
       {
         ref: u,
@@ -1980,13 +1980,13 @@ const Ot = l.memo(Mr), Fr = ({
         role: "button",
         "aria-haspopup": "listbox",
         "aria-expanded": f,
-        "aria-invalid": !!F,
-        "aria-describedby": F ? `${e.name}-error` : void 0,
+        "aria-invalid": !!M,
+        "aria-describedby": M ? `${e.name}-error` : void 0,
         onKeyDown: (x) => {
           (x.key === "Enter" || x.key === " ") && (x.preventDefault(), R());
         },
         children: [
-          /* @__PURE__ */ D(
+          /* @__PURE__ */ z(
             "span",
             {
               style: { flex: 1, color: "var(--reactaform-text-muted, #888)" },
@@ -2015,7 +2015,7 @@ const Ot = l.memo(Mr), Fr = ({
       }
     ) }) }),
     f && C && /* @__PURE__ */ p(
-      Tt,
+      jt,
       {
         position: C,
         options: h,
@@ -2027,19 +2027,19 @@ const Ot = l.memo(Mr), Fr = ({
       }
     )
   ] });
-}, Tt = ({
+}, jt = ({
   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 } = 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(
@@ -2053,7 +2053,7 @@ const Ot = l.memo(Mr), Fr = ({
         g.getPropertyValue("--reactaform-option-menu-hover-bg")
       );
     }
-  }, [o]);
+  }, [a]);
   const b = (I, v, g) => {
     if (!v) return {};
     const x = I?.[v];
@@ -2090,10 +2090,10 @@ const Ot = l.memo(Mr), Fr = ({
   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)
     );
@@ -2104,25 +2104,25 @@ const Ot = l.memo(Mr), Fr = ({
     );
     I && requestAnimationFrame(() => I.focus());
   }, [i]);
-  const h = 250, y = 200, [E, F] = l.useState(null), [M, $] = l.useState(null);
+  const h = 250, y = 200, [E, M] = l.useState(null), [F, V] = l.useState(null);
   if (l.useEffect(() => {
     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));
       }
-      w = Math.min(w, window.innerWidth - k), x = Math.min(x, window.innerHeight - y), F({ left: w, top: x }), $(k);
+      w = Math.min(w, window.innerWidth - k), x = Math.min(x, window.innerHeight - y), M({ left: w, top: x }), V(k);
     };
     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(
@@ -2135,7 +2135,7 @@ const Ot = l.memo(Mr), Fr = ({
           position: "fixed",
           top: E ? E.top : e.y,
           left: E ? E.left : e.x,
-          width: M ?? h,
+          width: F ?? h,
           // spread the static popup styles
           ...C
         },
@@ -2145,7 +2145,7 @@ const Ot = l.memo(Mr), Fr = ({
             ...N,
             background: v === i ? w : N.background
           };
-          return /* @__PURE__ */ D(
+          return /* @__PURE__ */ z(
             "div",
             {
               id: `multi-opt-${v}`,
@@ -2172,7 +2172,7 @@ const Ot = l.memo(Mr), Fr = ({
                     k.preventDefault(), k.stopPropagation(), n(I.value);
                     break;
                   case "Escape":
-                    k.preventDefault(), a(), o?.current?.focus();
+                    k.preventDefault(), o(), a?.current?.focus();
                     break;
                 }
               },
@@ -2214,21 +2214,21 @@ const Ot = l.memo(Mr), Fr = ({
     R
   );
 };
-Fr.displayName = "MultiSelect";
-const jt = l.memo(Fr), $r = ({
+Mr.displayName = "MultiSelect";
+const Bt = l.memo(Mr), 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: 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(
+  return /* @__PURE__ */ p(L, { field: e, error: s, children: /* @__PURE__ */ p(
     "input",
     {
       id: e.name,
@@ -2243,27 +2243,27 @@ const jt = l.memo(Fr), $r = ({
         width: "100%",
         height: "100%"
       },
-      className: V.input,
+      className: $.input,
       "aria-invalid": !!s,
       "aria-describedby": s ? `${e.name}-error` : void 0
     }
   ) });
 };
-$r.displayName = "NumericStepperInput";
-const Bt = l.memo($r), Vr = ({
+Vr.displayName = "NumericStepperInput";
+const Ht = l.memo(Vr), $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: r,
     onChange: t,
     onError: n,
-    validate: o
+    validate: a
   });
-  return /* @__PURE__ */ p(O, { field: e, error: s, children: /* @__PURE__ */ p(
+  return /* @__PURE__ */ p(L, { field: e, error: s, children: /* @__PURE__ */ p(
     "input",
     {
       id: e.name,
@@ -2271,21 +2271,21 @@ const Bt = l.memo($r), Vr = ({
       defaultValue: String(r ?? ""),
       ref: c,
       onChange: i,
-      className: U(V.input, V.textInput),
+      className: U($.input, $.textInput),
       "aria-invalid": !!s,
       "aria-describedby": s ? `${e.name}-error` : void 0
     }
   ) });
 };
-Vr.displayName = "PhoneInput";
-const Ht = l.memo(Vr), Ar = ({
+$r.displayName = "PhoneInput";
+const qt = l.memo($r), Ar = ({
   field: e,
   value: r,
   onChange: t,
   onError: n,
-  error: a
+  error: o
 }) => {
-  const { t: o } = B(), 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]);
@@ -2325,21 +2325,21 @@ const Ht = l.memo(Vr), Ar = ({
     width: s === "column" ? "100%" : void 0,
     justifyContent: "flex-start"
   };
-  return /* @__PURE__ */ p(O, { field: e, error: d, children: /* @__PURE__ */ p(
+  return /* @__PURE__ */ p(L, { field: e, error: d, children: /* @__PURE__ */ p(
     "div",
     {
-      className: V.input,
+      className: $.input,
       "aria-labelledby": `${e.name}-label`,
       "aria-invalid": !!d,
       style: C,
       children: e.options.map((h) => {
         const y = String(h.value), E = `${e.name}-${y}`;
-        return /* @__PURE__ */ D(
+        return /* @__PURE__ */ z(
           "label",
           {
-            className: U(V.label),
+            className: U($.label),
             style: N,
-            onMouseDown: (F) => F.preventDefault(),
+            onMouseDown: (M) => M.preventDefault(),
             onClick: () => {
               String(r ?? "") !== y && b({ target: { value: y } });
             },
@@ -2365,7 +2365,7 @@ const Ht = l.memo(Vr), Ar = ({
                     flex: s === "column" ? 1 : void 0,
                     fontWeight: 400
                   },
-                  children: o(h.label)
+                  children: a(h.label)
                 }
               )
             ]
@@ -2377,10 +2377,10 @@ const Ht = l.memo(Vr), Ar = ({
   ) });
 };
 Ar.displayName = "RadioInput";
-const qt = l.memo(Ar), Ut = {
+const Ut = l.memo(Ar), Wt = {
   display: "flex",
   gap: 4
-}, Wt = {
+}, _t = {
   cursor: "pointer",
   fontSize: "1.5rem",
   lineHeight: 1,
@@ -2388,8 +2388,8 @@ const qt = l.memo(Ar), Ut = {
   marginRight: "0.25rem",
   userSelect: "none",
   transition: "color 0.12s ease"
-}, Rr = ({ field: e, value: r, onChange: t, onError: n, error: a }) => {
-  const { t: o } = B(), 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]);
@@ -2418,30 +2418,30 @@ const qt = l.memo(Ar), Ut = {
     },
     [s, C]
   );
-  return /* @__PURE__ */ p(O, { field: e, error: b, children: /* @__PURE__ */ p(
+  return /* @__PURE__ */ p(L, { field: e, error: b, children: /* @__PURE__ */ p(
     "div",
     {
       role: "radiogroup",
       "aria-labelledby": `${e.name}-label`,
       "aria-invalid": !!b,
       "aria-describedby": b ? `${e.name}-error` : void 0,
-      style: Ut,
+      style: Wt,
       children: Array.from({ length: s }, (h, y) => {
-        const E = y < f, M = d !== null && y <= d || E ? "gold" : "lightgray";
+        const E = y < f, F = d !== null && y <= d || E ? "gold" : "lightgray";
         return /* @__PURE__ */ p(
           "span",
           {
-            ref: ($) => u.current[y] = $,
+            ref: (V) => u.current[y] = V,
             role: "radio",
             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}`),
+            title: a(`${e.displayName} ${y + 1}`),
             onClick: () => C(y + 1),
-            onKeyDown: ($) => N($, y),
+            onKeyDown: (V) => N(V, y),
             onMouseEnter: () => m(y),
             onMouseLeave: () => m(null),
-            style: { ...Wt, color: M },
+            style: { ..._t, color: F },
             children: i
           },
           y
@@ -2451,20 +2451,20 @@ const qt = l.memo(Ar), Ut = {
   ) });
 };
 Rr.displayName = "RatingInput";
-const _t = l.memo(Rr), Dr = ({
+const Kt = l.memo(Rr), Dr = ({
   field: e,
   value: r,
   onChange: t,
   onError: n,
-  error: a
+  error: o
 }) => {
-  const { t: o } = B(), 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,
     validate: c
   }), [m, u] = l.useState(!1), f = () => u((b) => !b);
-  return /* @__PURE__ */ p(O, { field: e, error: i, children: /* @__PURE__ */ D("div", { style: { display: "flex", alignItems: "center", gap: 8, width: "100%" }, children: [
+  return /* @__PURE__ */ p(L, { field: e, error: i, children: /* @__PURE__ */ z("div", { style: { display: "flex", alignItems: "center", gap: 8, width: "100%" }, children: [
     /* @__PURE__ */ p(
       "input",
       {
@@ -2473,7 +2473,7 @@ const _t = l.memo(Rr), Dr = ({
         defaultValue: String(r ?? ""),
         ref: s,
         onChange: d,
-        className: U(V.input, V.textInput),
+        className: U($.input, $.textInput),
         style: { flex: 1, minWidth: 0 },
         "aria-invalid": !!i,
         "aria-describedby": i ? `${e.name}-error` : void 0
@@ -2484,7 +2484,7 @@ const _t = l.memo(Rr), Dr = ({
       {
         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",
@@ -2500,15 +2500,15 @@ const _t = l.memo(Rr), Dr = ({
   ] }) });
 };
 Dr.displayName = "PasswordInput";
-const Kt = l.memo(Dr), zr = ({ 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(
+const Gt = 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]);
@@ -2519,7 +2519,7 @@ const Kt = l.memo(Dr), zr = ({ field: e, value: r, onChange: t, onError: n, erro
     },
     [t]
   ), f = isNaN(Number(i)) ? String(c) : String(Number(i));
-  return /* @__PURE__ */ p(O, { field: e, error: m, children: /* @__PURE__ */ D("div", { style: { display: "flex", alignItems: "center", gap: "8px", width: "100%" }, children: [
+  return /* @__PURE__ */ p(L, { field: e, error: m, children: /* @__PURE__ */ z("div", { style: { display: "flex", alignItems: "center", gap: "8px", width: "100%" }, children: [
     /* @__PURE__ */ p(
       "input",
       {
@@ -2534,7 +2534,7 @@ const Kt = l.memo(Dr), zr = ({ field: e, value: r, onChange: t, onError: n, erro
           padding: 0,
           flex: 1
         },
-        className: V.rangeInput,
+        className: $.rangeInput,
         "aria-invalid": !!m,
         "aria-describedby": m ? `${e.name}-error` : void 0
       }
@@ -2554,7 +2554,7 @@ const Kt = l.memo(Dr), zr = ({ field: e, value: r, onChange: t, onError: n, erro
           textAlign: "center",
           flexShrink: 0
         },
-        className: U(V.input, V.textInput),
+        className: U($.input, $.textInput),
         "aria-invalid": !!m,
         "aria-describedby": m ? `${e.name}-error` : void 0
       }
@@ -2562,21 +2562,21 @@ const Kt = l.memo(Dr), zr = ({ field: e, value: r, onChange: t, onError: n, erro
   ] }) });
 };
 zr.displayName = "SliderInput";
-const Gt = l.memo(zr), Pr = ({
+const Jt = l.memo(zr), Pr = ({
   field: e,
   value: r,
   onChange: t,
   onError: n,
-  error: a
+  error: o
 }) => {
-  const { t: o, formStyle: c, fieldStyle: s } = B(), d = T(e, a)(r);
+  const { t: a, formStyle: c, fieldStyle: s } = B(), d = T(e, o)(r);
   l.useEffect(() => {
     n?.(d);
   }, [d, n]);
-  const m = c, u = s, f = (F, M, $) => {
-    if (!M) return {};
-    const R = F?.[M];
-    return ($ && R ? R[$] : void 0) ?? {};
+  const m = c, u = s, f = (M, F, V) => {
+    if (!F) return {};
+    const R = M?.[F];
+    return (V && R ? R[V] : void 0) ?? {};
   }, b = l.useMemo(() => ({
     display: "inline-block",
     position: "relative",
@@ -2631,17 +2631,17 @@ const Gt = l.memo(zr), Pr = ({
   }), [m, u]), y = !!r, E = () => {
     t?.(!y);
   };
-  return /* @__PURE__ */ p(O, { field: e, error: null, rightAlign: !1, children: /* @__PURE__ */ D("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }, children: [
+  return /* @__PURE__ */ p(L, { field: e, error: null, rightAlign: !1, children: /* @__PURE__ */ z("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }, children: [
     /* @__PURE__ */ p(
       "label",
       {
-        className: V.label,
+        className: $.label,
         htmlFor: e.name,
         style: { textAlign: "left", justifyContent: "flex-start" },
-        children: o(e.displayName)
+        children: a(e.displayName)
       }
     ),
-    /* @__PURE__ */ D("label", { style: b, children: [
+    /* @__PURE__ */ z("label", { style: b, children: [
       /* @__PURE__ */ p(
         "input",
         {
@@ -2649,7 +2649,7 @@ const Gt = l.memo(zr), 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: C,
@@ -2666,8 +2666,8 @@ const Gt = l.memo(zr), Pr = ({
           "aria-invalid": !1,
           "aria-describedby": void 0,
           onClick: E,
-          onKeyDown: (F) => {
-            (F.key === " " || F.key === "Spacebar" || F.key === "Space" || F.key === "Enter") && (F.preventDefault(), E());
+          onKeyDown: (M) => {
+            (M.key === " " || M.key === "Spacebar" || M.key === "Space" || M.key === "Enter") && (M.preventDefault(), E());
           },
           className: `reactaform-switch ${y ? "active checked on" : ""} `,
           style: y ? { ...N, backgroundColor: "var(--reactaform-switch-on-bg, #22c55e)", borderColor: "var(--reactaform-switch-on-border, #16a34a)" } : N,
@@ -2686,20 +2686,20 @@ const Gt = l.memo(zr), Pr = ({
   ] }) });
 };
 Pr.displayName = "SwitchInput";
-const Jt = l.memo(Pr), xe = ({
+const Yt = 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(
+  return /* @__PURE__ */ p(L, { field: e, error: s, children: /* @__PURE__ */ p(
     "input",
     {
       id: e.name,
@@ -2707,7 +2707,7 @@ const Jt = l.memo(Pr), xe = ({
       defaultValue: String(r ?? ""),
       ref: c,
       onChange: i,
-      className: U(V.input, V.textInput),
+      className: U($.input, $.textInput),
       placeholder: e.placeholder,
       "aria-invalid": !!s,
       "aria-describedby": s ? `${e.name}-error` : void 0
@@ -2715,20 +2715,20 @@ const Jt = l.memo(Pr), xe = ({
   ) });
 };
 xe.displayName = "TextInput";
-const Lr = ({
+const Or = ({
   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(
+  return /* @__PURE__ */ p(L, { field: e, error: s, children: /* @__PURE__ */ p(
     "input",
     {
       id: e.name,
@@ -2739,41 +2739,41 @@ const Lr = ({
       onChange: i,
       min: typeof e.min == "string" ? e.min : void 0,
       max: typeof e.max == "string" ? e.max : void 0,
-      className: U(V.input, V.textInput),
+      className: U($.input, $.textInput),
       "aria-invalid": !!s,
       "aria-describedby": s ? `${e.name}-error` : void 0
     }
   ) });
 };
-Lr.displayName = "TimeInput";
-const Yt = l.memo(Lr);
-function Xt({
+Or.displayName = "TimeInput";
+const Xt = l.memo(Or);
+function Zt({
   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();
         },
@@ -2797,11 +2797,11 @@ function Xt({
           {
             "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: {
@@ -2826,7 +2826,7 @@ function Xt({
     i
   );
 }
-const $e = {
+const Ve = {
   length: ["m", "cm", "mm", "km", "in", "ft", "yd", "mi"],
   area: ["m^2", "cm^2", "mm^2", "in^2", "ft^2", "yd^2"],
   volume: ["L", "m^3", "cm^3", "mL", "in^3", "ft^3", "yd^3"],
@@ -2834,7 +2834,7 @@ const $e = {
   time: ["min", "s", "h", "ms", "d"],
   temperature: ["C", "F", "K"],
   angle: ["deg", "rad", "rev"]
-}, Ve = {
+}, $e = {
   length: {
     m: "Meter (m)",
     mm: "Millimeter (mm)",
@@ -2943,31 +2943,31 @@ const $e = {
     rad: Math.PI / 180,
     rev: 1 / 360
   }
-}, Re = {}, Zt = /* @__PURE__ */ new Set([
-  ...Object.keys($e),
+}, Re = {}, Qt = /* @__PURE__ */ new Set([
   ...Object.keys(Ve),
+  ...Object.keys($e),
   ...Object.keys(Ae)
 ]);
-for (const e of Zt) {
-  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 Qt) {
+  const r = {}, t = Ve[e] ?? [], n = $e[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 Or(e, r, t) {
+function Lr(e, r, t) {
   if (e === "C") {
     if (r === "F") return t * (9 / 5) + 32;
     if (r === "K") return t + 273.15;
@@ -2984,19 +2984,19 @@ 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 ma = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const fo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  convertTemperature: Or,
-  dimensionUnitDisplayMap: Ve,
-  dimensionUnitsMap: $e,
+  convertTemperature: Lr,
+  dimensionUnitDisplayMap: $e,
+  dimensionUnitsMap: Ve,
   dimensonUnitFactorsMap: Ae,
   getUnitFactors: Tr,
   unitsByDimension: Re
@@ -3005,8 +3005,8 @@ const ma = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   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(
@@ -3016,39 +3016,39 @@ const ma = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
       if (!Number.isFinite(y)) return;
       const E = h.currentTarget.getBoundingClientRect();
       m({ x: E.left, y: E.bottom });
-      const F = [];
+      const M = [];
       if (n === "temperature")
-        a.units.forEach(($) => {
-          const R = Or(t, $, y);
-          Number.isFinite(R) && F.push({
-            label: `${R.toFixed(6)} ${c($)}`,
+        o.units.forEach((V) => {
+          const R = Lr(t, V, y);
+          Number.isFinite(R) && M.push({
+            label: `${R.toFixed(6)} ${c(V)}`,
             value: R.toString(),
-            unit: $
+            unit: V
           });
         });
       else {
-        const $ = a.factors[t];
-        $ !== void 0 && Object.entries(a.factors).forEach(([R, I]) => {
-          const v = y / $ * I;
-          Number.isFinite(v) && F.push({
+        const V = o.factors[t];
+        V !== void 0 && Object.entries(o.factors).forEach(([R, I]) => {
+          const v = y / V * I;
+          Number.isFinite(v) && M.push({
             label: `${v.toFixed(6)} ${c(R)}`,
             value: v.toString(),
             unit: R
           });
         });
       }
-      f(F), i(F.length > 0);
+      f(M), i(M.length > 0);
     },
-    [e, r, t, n, a, c]
+    [e, r, t, n, o, c]
   ), C = l.useCallback(
     (h) => {
-      i(!1), m(null), o(h);
+      i(!1), m(null), a(h);
     },
-    [o]
+    [a]
   ), N = l.useCallback(() => {
     i(!1), m(null);
   }, []);
-  return /* @__PURE__ */ D(Ie, { children: [
+  return /* @__PURE__ */ z(Ie, { children: [
     /* @__PURE__ */ p(
       "button",
       {
@@ -3076,7 +3076,7 @@ const ma = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
       }
     ),
     s && u.length > 0 && /* @__PURE__ */ p(
-      Xt,
+      Zt,
       {
         pos: d,
         options: u,
@@ -3088,40 +3088,40 @@ const ma = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
 });
 jr.displayName = "ConversionButton";
 const Br = ({ field: e, value: r, onChange: t, onError: n }) => {
-  const { t: a } = B(), o = 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);
+  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 C = o([m, f]);
+  const C = a([m, f]);
   l.useEffect(() => {
     n?.(C);
   }, [C, n]);
   const N = l.useCallback(
-    (M) => {
-      const $ = M.target.value;
-      u($), o([$, f]), t?.([$, f]);
+    (F) => {
+      const V = F.target.value;
+      u(V), a([V, f]), t?.([V, f]);
     },
-    [f, o, t]
+    [f, a, t]
   ), h = l.useCallback(
-    (M) => {
-      const $ = M.target.value;
-      b($), o([m, $]), t?.([m, $]);
+    (F) => {
+      const V = F.target.value;
+      b(V), a([m, V]), t?.([m, V]);
     },
-    [m, o, t]
+    [m, a, t]
   ), y = l.useCallback(
-    (M) => {
-      u(M.value), b(M.unit), t?.([M.value, M.unit]);
+    (F) => {
+      u(F.value), b(F.unit), t?.([F.value, F.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((F) => /* @__PURE__ */ p("option", { value: F, children: o(F) }, F)) : [],
+    [s, o]
   );
   if (!c || !s) return null;
-  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: [
+  const M = !!C || !m.trim();
+  return /* @__PURE__ */ p(L, { field: e, error: C, children: /* @__PURE__ */ z("div", { style: { display: "flex", alignItems: "center", gap: "var(--reactaform-unit-gap, 8px)", width: "100%" }, children: [
     /* @__PURE__ */ p(
       "input",
       {
@@ -3130,7 +3130,7 @@ const Br = ({ field: e, value: r, onChange: t, onError: n }) => {
         value: m,
         onChange: N,
         style: { flex: "2 1 0" },
-        className: U(V.input, V.textInput),
+        className: U($.input, $.textInput),
         "aria-invalid": !!C,
         "aria-describedby": C ? `${e.name}-error` : void 0
       }
@@ -3142,7 +3142,7 @@ const Br = ({ field: e, value: r, onChange: t, onError: n }) => {
         value: f,
         onChange: h,
         style: { flex: "1 1 0" },
-        className: U(V.input, V.inputSelect),
+        className: U($.input, $.inputSelect),
         "aria-invalid": !!C,
         "aria-describedby": C ? `${e.name}-error` : void 0,
         children: E
@@ -3151,32 +3151,32 @@ const Br = ({ field: e, value: r, onChange: t, onError: n }) => {
     /* @__PURE__ */ p(
       jr,
       {
-        disabled: F,
+        disabled: M,
         inputValue: m,
         selectedUnit: f,
         dimension: c,
         unitFactors: s,
         onConversionSelect: y,
-        t: a
+        t: o
       }
     )
   ] }) });
 };
 Br.displayName = "UnitValueInput";
-const Qt = l.memo(Br), Hr = ({
+const en = 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(
+  return /* @__PURE__ */ p(L, { field: e, error: s, children: /* @__PURE__ */ p(
     "input",
     {
       id: e.name,
@@ -3184,7 +3184,7 @@ const Qt = l.memo(Br), Hr = ({
       defaultValue: String(r ?? ""),
       ref: c,
       onChange: i,
-      className: U(V.input, V.textInput),
+      className: U($.input, $.textInput),
       placeholder: "https://example.com",
       "aria-invalid": !!s,
       "aria-describedby": s ? `${e.name}-error` : void 0
@@ -3192,20 +3192,20 @@ const Qt = l.memo(Br), Hr = ({
   ) });
 };
 Hr.displayName = "UrlInput";
-const en = l.memo(Hr), se = new ne();
-function da(e, r) {
+const rn = l.memo(Hr), se = new ne();
+function po(e, r) {
   se.register(e, r);
 }
-function rn(e) {
+function tn(e) {
   return se.get(e);
 }
-function fa(e) {
+function go(e) {
   return se.has(e);
 }
-function pa(e) {
+function ho(e) {
   return se.unregister(e);
 }
-function ga() {
+function bo() {
   return se.list();
 }
 const qr = ({
@@ -3214,12 +3214,12 @@ const qr = ({
   handleChange: t,
   handleError: n
 }) => {
-  const { t: a } = B(), [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 f = rn(e.action);
+    const f = tn(e.action);
     if (!f) {
       const b = `Button handler "${e.action}" not found`;
       console.error(b), i(b);
@@ -3227,33 +3227,33 @@ const qr = ({
     }
     c(!0), i(null);
     try {
-      await f(r, t, n, a);
+      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]), u = { ...{
-    cursor: o ? "wait" : "pointer",
-    opacity: o ? 0.6 : 1
+  }, [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(
+  return e.width && typeof e.width == "number" && e.width > 0 && (u.width = `${e.width}px`), /* @__PURE__ */ p(L, { field: e, rightAlign: !0, error: s, children: /* @__PURE__ */ p(
     "button",
     {
       type: "button",
-      className: V.button,
+      className: $.button,
       onClick: d,
-      disabled: o,
-      "aria-label": a(e.displayName),
-      "aria-busy": o,
+      disabled: a,
+      "aria-label": o(e.displayName),
+      "aria-busy": a,
       style: u,
-      children: a(o ? "Processing..." : e.displayName)
+      children: o(a ? "Processing..." : e.displayName)
     }
   ) });
 };
 qr.displayName = "Button";
-const tn = l.memo(qr), nn = {
+const nn = l.memo(qr), on = {
   // No debounce
   checkbox: !1,
   switch: !1,
@@ -3286,57 +3286,57 @@ const tn = l.memo(qr), nn = {
   slider: { wait: 100, leading: !0, trailing: !0 },
   stepper: { wait: 100, leading: !0, trailing: !0 }
 }, me = new ne(), De = {
-  button: tn,
-  checkbox: vt,
-  color: Nt,
-  date: kt,
-  description: It,
+  button: nn,
+  checkbox: xt,
+  color: kt,
+  date: It,
+  description: Et,
   dropdown: Mt,
-  email: Ft,
-  file: Vt,
-  float: Rt,
-  "float-array": At,
-  image: zt,
+  email: Vt,
+  file: At,
+  float: Dt,
+  "float-array": Rt,
+  image: Pt,
   int: Lt,
-  "int-array": Pt,
-  "multi-selection": jt,
-  multiline: Ot,
-  password: Kt,
-  phone: Ht,
-  radio: qt,
-  rating: _t,
+  "int-array": Ot,
+  "multi-selection": Bt,
+  multiline: Tt,
+  password: Gt,
+  phone: qt,
+  radio: Ut,
+  rating: Kt,
   separator: $t,
-  slider: Gt,
+  slider: Jt,
   string: xe,
-  stepper: Bt,
-  switch: Jt,
+  stepper: Ht,
+  switch: Yt,
   text: xe,
-  time: Yt,
-  unit: Qt,
-  url: en
+  time: Xt,
+  unit: en,
+  url: rn
 };
 function an(e) {
   return e in De;
 }
-function on(e, r) {
-  const { wait: t = 200, leading: n, trailing: a } = r, o = l.memo((c) => {
+function sn(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 } = lt(
+    const { callback: i, cancel: d } = ut(
       (...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 Ur(e, r, t) {
   const n = r;
@@ -3344,15 +3344,15 @@ function Ur(e, r, t) {
     console.warn(`Can't overwrite base component type "${e}".`);
     return;
   }
-  const a = nn[e];
-  if (a === !1) {
+  const o = on[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,
-    on(n, o)
+    sn(n, a)
   );
 }
 function Wr(e, r) {
@@ -3362,21 +3362,21 @@ function _r(e) {
   return me.get(e);
 }
 let Ye = !1;
-function sn() {
+function cn() {
   Ye || (Object.entries(De).forEach(([e, r]) => {
     Ur(e, r, !0);
   }), Ye = !0);
 }
 const ze = l.memo(
-  ({ field: e, valuesMap: r, handleChange: t, handleError: n, errorsMap: a }) => {
-    const o = _r(e.type), c = r[e.name], s = a ? a[e.name] ?? null : void 0, i = l.useMemo(() => c, [c]), d = l.useCallback(
+  ({ 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,
@@ -3384,7 +3384,7 @@ const ze = l.memo(
       handleError: n || (() => {
       })
     } }) : /* @__PURE__ */ p(
-      o,
+      a,
       {
         field: e,
         value: i,
@@ -3398,10 +3398,10 @@ const ze = l.memo(
 );
 ze.displayName = "FieldRenderer";
 const Kr = l.memo(
-  ({ groupName: e, defaultOpen: r = !0, fields: t, valuesMap: n, handleChange: a, handleError: o, errorsMap: c, t: s }) => {
+  ({ 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: [
+    return /* @__PURE__ */ z("fieldset", { className: "reactaform-group", children: [
+      /* @__PURE__ */ z("legend", { onClick: m, className: "reactaform-group_legend", children: [
         /* @__PURE__ */ p("span", { children: s(e) }),
         /* @__PURE__ */ p("span", { className: "reactaform-group_legend_arrow", children: i ? "▼" : "▶" })
       ] }),
@@ -3410,8 +3410,8 @@ const Kr = l.memo(
         {
           field: u,
           valuesMap: n,
-          handleChange: a,
-          handleError: o,
+          handleChange: o,
+          handleError: a,
           errorsMap: c
         },
         u.name
@@ -3421,62 +3421,86 @@ const Kr = l.memo(
 );
 Kr.displayName = "FieldGroup";
 const Pe = (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];
+  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, 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, Gr(o, r, t));
-}, cn = (e, r, t, n) => {
-  const a = { ...t };
-  return e.forEach((o) => {
-    (!o.parents || Object.keys(o.parents).length === 0) && (a[o.name] = !0, Pe(o.name, n, r, a));
-  }), a;
-}, ln = (e, r, t, n, a) => {
-  const o = { ...e }, c = r[n];
-  if (Gr(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));
+}, ln = (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;
+}, un = (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, Pe(d, r, t, o));
+        typeof d == "string" && r[d] && (a[d] = !0, Pe(d, r, t, a));
+  }
+  for (const [s, i] of Object.entries(r))
+    i.parents && n in i.parents && (a[s] = Jr(s, r, t));
+  return a;
+}, Jr = (e, r, t) => {
+  const n = r[e];
+  if (!n) return !1;
+  if (!n.parents || Object.keys(n.parents).length === 0)
+    return !0;
+  for (const [o, a] of Object.entries(n.parents)) {
+    if (!r[o] || !Jr(o, r, t))
+      continue;
+    const s = t[o];
+    if (s == null)
+      continue;
+    const i = a.map((d) => String(d));
+    if (Array.isArray(s)) {
+      if (s.map((u) => String(u)).some((u) => i.includes(u)))
+        return !0;
+    } else {
+      const d = String(s);
+      if (i.includes(d))
+        return !0;
+    }
   }
-  return o;
-}, un = (e, r) => {
+  return !1;
+}, mn = (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;
-}, mn = (e, r = {}) => {
+  return a;
+}, dn = (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,
@@ -3486,17 +3510,17 @@ const Pe = (e, r, t, n) => {
       largestGroup: s
     }
   };
-}, Le = new ne();
-function Jr(e, r) {
-  Le.register(e, r);
-}
-function dn(e) {
-  return Le.get(e);
+}, Oe = new ne();
+function Yr(e, r) {
+  Oe.register(e, r);
 }
 function fn(e) {
-  return Le.get(e);
+  return Oe.get(e);
+}
+function pn(e) {
+  return Oe.get(e);
 }
-Jr(
+Yr(
   "Preset_AlertSubmitHandler",
   (e, r, t) => {
     const n = {
@@ -3504,12 +3528,12 @@ Jr(
       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 pn(e, r, t, n, a, o, c) {
-  const s = a ? Object.values(a).filter(Boolean) : [];
+async function gn(e, r, t, n, o, a, c) {
+  const s = o ? Object.values(o).filter(Boolean) : [];
   if (s.length > 0)
     return {
       success: !1,
@@ -3543,12 +3567,12 @@ async function pn(e, r, t, n, a, o, c) {
           const N = String(b).split(",").map((E) => E.trim()).filter(Boolean), h = [];
           let y = !1;
           for (const E of N) {
-            const F = Number(E);
-            if (isNaN(F)) {
+            const M = Number(E);
+            if (isNaN(M)) {
               d.push(n("Invalid number {{1}} in array for field {{2}}", E, u.displayName || f)), y = !0;
               break;
             }
-            h.push(F);
+            h.push(M);
           }
           y || (i[f] = h);
         }
@@ -3571,7 +3595,7 @@ async function pn(e, r, t, n, a, o, c) {
         errors: u
       };
   } else {
-    const u = await yt(e, i, n);
+    const u = await vt(e, i, n);
     if (u && u.length > 0)
       return {
         success: !1,
@@ -3580,9 +3604,9 @@ async function pn(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,
@@ -3597,7 +3621,7 @@ async function pn(e, r, t, n, a, o, c) {
       };
     }
   else if (e && typeof e.submitHandlerName == "string") {
-    const u = dn(e.submitHandlerName);
+    const u = fn(e.submitHandlerName);
     if (u)
       try {
         const f = await u(e, r?.name ?? null, i, n), b = m(f);
@@ -3621,12 +3645,12 @@ async function pn(e, r, t, n, a, o, c) {
     data: i
   };
 }
-const Yr = ({
+const Xr = ({
   message: e,
   success: r,
   onDismiss: t,
   t: n
-}) => e ? /* @__PURE__ */ D(
+}) => e ? /* @__PURE__ */ z(
   "div",
   {
     role: "status",
@@ -3663,16 +3687,16 @@ const Yr = ({
     ]
   }
 ) : null;
-Yr.displayName = "SubmissionMessage";
-const gn = ({ onClick: e, disabled: r = !1, t }) => {
-  const [n, a] = l.useState(!1);
+Xr.displayName = "SubmissionMessage";
+const hn = ({ 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))",
@@ -3690,131 +3714,133 @@ const gn = ({ onClick: e, disabled: r = !1, t }) => {
       children: t("Submit")
     }
   );
-}, hn = ({
+}, bn = ({
   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 = B(), { t: d, formStyle: m, language: u, displayInstanceName: f } = i, b = {
     ...i,
     definitionName: e?.name ?? i.definitionName
-  }, [C, N] = l.useState("en"), [h, y] = l.useState([]), [E, F] = l.useState({}), [M, $] = l.useState(
+  }, [C, N] = l.useState("en"), [h, y] = l.useState([]), [E, M] = l.useState({}), [F, V] = 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 || ""), X = l.useRef(r), fe = l.useRef(!1);
   l.useEffect(() => {
-    const z = Object.fromEntries(
-      c.map((L) => [
-        L.name,
-        { ...L, children: {} }
+    const P = Object.fromEntries(
+      c.map((D) => [
+        D.name,
+        { ...D, children: {} }
       ])
     );
-    c.forEach((L) => {
-      L.parents && Object.entries(L.parents).forEach(([Q, re]) => {
-        const X = z[Q];
-        X && re.forEach((ot) => {
-          X.children || (X.children = {});
-          const qe = String(ot);
-          X.children[qe] = [
-            ...X.children[qe] || [],
-            L.name
+    c.forEach((D) => {
+      D.parents && Object.entries(D.parents).forEach(([J, re]) => {
+        const Z = P[J];
+        Z && re.forEach((it) => {
+          Z.children || (Z.children = {});
+          const qe = String(it);
+          Z.children[qe] = [
+            ...Z.children[qe] || [],
+            D.name
           ];
         });
       });
-    }), un(c, z);
+    }), mn(c, P);
     const q = Object.values(
-      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");
-        P[L.name] = [Q, re];
+      P
+    ), O = {};
+    q.forEach((D) => {
+      if (D.type === "unit") {
+        const J = typeof D.defaultValue == "number" ? String(D.defaultValue) : "", re = typeof D.defaultUnit == "string" ? D.defaultUnit : String(D.defaultUnit ?? "m");
+        O[D.name] = [J, re];
       } else
-        P[L.name] = L.defaultValue;
-    }), Y.current = r, Object.keys(r.values).forEach((L) => {
-      z[L] !== void 0 && (P[L] = r.values[L]);
+        O[D.name] = D.defaultValue;
+    }), X.current = r, Object.keys(r.values).forEach((D) => {
+      P[D] !== void 0 && (O[D] = r.values[D]);
     });
-    const J = Object.fromEntries(q.map((L) => [L.name, !1])), G = requestAnimationFrame(() => {
-      y(q), F(z), $(P), I(
-        cn(q, P, J, z)
-      ), ce(!0), ae(r.name);
+    const Y = Object.fromEntries(q.map((D) => [D.name, !1])), G = requestAnimationFrame(() => {
+      y(q), M(P), V(O), I(
+        ln(q, O, Y, P)
+      ), ce(!0), oe(r.name);
     });
     return () => cancelAnimationFrame(G);
   }, [c, r, e]), l.useEffect(() => {
     if (!K || A >= h.length) return;
-    const z = setTimeout(() => {
+    const P = setTimeout(() => {
       j(
-        (q) => Math.min(q + a, h.length)
+        (q) => Math.min(q + o, h.length)
       );
-    }, o);
-    return () => clearTimeout(z);
-  }, [K, A, h.length, a, o]);
+    }, a);
+    return () => clearTimeout(P);
+  }, [K, A, h.length, o, a]);
   const Be = l.useCallback(
-    (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,
+    (P, q) => {
+      x(null), S(null), V((D) => ({ ...D, [P]: q }));
+      const O = E[P], Y = O && O.children && Object.keys(O.children).length > 0, G = Object.values(E).some(
+        (D) => D.parents && P in D.parents
+      );
+      (Y || G) && I((D) => {
+        const J = { ...F, [P]: q };
+        return un(
+          D,
           E,
-          G,
-          z,
+          J,
+          P,
           q
         );
       });
     },
-    [E, M]
+    [E, F]
   );
   l.useEffect(() => {
-    let z = 0;
-    return z = requestAnimationFrame(() => {
+    let P = 0;
+    return P = requestAnimationFrame(() => {
       u !== C && (N(u || "en"), x(null), S(null));
-    }), () => cancelAnimationFrame(z);
+    }), () => cancelAnimationFrame(P);
   }, [u, C]), l.useEffect(() => {
-    let z = 0;
-    return z = requestAnimationFrame(() => {
+    let P = 0;
+    return P = requestAnimationFrame(() => {
       if (fe.current) {
-        fe.current = !1, Y.current = r, ae(r.name || "");
+        fe.current = !1, X.current = r, oe(r.name || "");
         return;
       }
-      Y.current = r, x(null), S(null), ae(r.name || "");
-    }), () => cancelAnimationFrame(z);
+      X.current = r, x(null), S(null), oe(r.name || "");
+    }), () => cancelAnimationFrame(P);
   }, [r, r.name]);
-  const He = l.useCallback((z, q) => {
-    g((P) => q ? { ...P, [z]: String(q) } : Object.fromEntries(Object.entries(P).filter(([G]) => G !== z)));
-  }, []), nt = async () => {
+  const He = l.useCallback((P, q) => {
+    g((O) => q ? { ...O, [P]: String(q) } : Object.fromEntries(Object.entries(O).filter(([G]) => G !== P)));
+  }, []), ot = async () => {
     fe.current = !0;
-    const z = Y.current?.name;
-    Y.current.name = je;
+    const P = X.current?.name;
+    X.current.name = je;
     let q = v;
     if (b.fieldValidationMode === "onSubmission") {
-      const L = {};
-      if (h.forEach((Q) => {
-        const re = M[Q.name];
+      const D = {};
+      if (h.forEach((J) => {
+        const re = F[J.name];
         if (re === void 0) return;
-        const X = pr(b.definitionName, Q, re, d);
-        X && (L[Q.name] = X);
-      }), g(L), q = L, Object.keys(L).length > 0) {
+        const Z = pr(b.definitionName, J, re, d);
+        Z && (D[J.name] = Z);
+      }), g(D), q = D, Object.keys(D).length > 0) {
         x(d("Please fix validation errors before submitting the form.")), S(!1);
         return;
       } else
         x(null), S(null);
     }
-    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(`
+    const O = await gn(e, X.current, F, d, q, t, n), Y = typeof O.message == "string" ? O.message : String(O.message), G = Object.values(O.errors ?? {}).join(`
 `);
-    x(G ? J + `
-` + G : J), S(P.success), P.success || (Y.current.name = z ?? Y.current.name, ae(z ?? ""));
+    x(G ? Y + `
+` + G : Y), S(O.success), O.success || (X.current.name = P ?? X.current.name, oe(P ?? ""));
   }, at = l.useMemo(
-    () => b.fieldValidationMode === "realTime" ? Object.values(v).some(Boolean) : !1,
+    () => 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: [
+  return /* @__PURE__ */ p(Ee.Provider, { value: b, children: /* @__PURE__ */ z("div", { style: m.container, children: [
     s && /* @__PURE__ */ p("h2", { style: m.titleStyle, children: d(s) }),
     /* @__PURE__ */ p(
-      Yr,
+      Xr,
       {
         message: w,
         success: k,
@@ -3828,38 +3854,38 @@ const gn = ({ onClick: e, disabled: r = !1, t }) => {
       sr,
       {
         name: je,
-        onChange: (z) => {
-          ae(z), x(null), S(null);
+        onChange: (P) => {
+          oe(P), x(null), S(null);
         }
       }
     ),
-    /* @__PURE__ */ D(Ie, { children: [
+    /* @__PURE__ */ z(Ie, { children: [
       (() => {
-        const z = h.slice(0, A).filter((P) => R[P.name]), { groups: q } = mn(z);
-        return q.map((P, J) => P.name ? /* @__PURE__ */ p(
+        const P = h.slice(0, A).filter((O) => R[O.name]), { groups: q } = dn(P);
+        return q.map((O, Y) => O.name ? /* @__PURE__ */ p(
           Kr,
           {
-            groupName: P.name,
+            groupName: O.name,
             defaultOpen: !0,
-            fields: P.fields,
-            valuesMap: M,
+            fields: O.fields,
+            valuesMap: F,
             handleChange: Be,
             handleError: He,
             errorsMap: v,
             t: d
           },
-          P.name
-        ) : /* @__PURE__ */ p(l.Fragment, { children: P.fields.map((G) => /* @__PURE__ */ p(
+          O.name
+        ) : /* @__PURE__ */ p(l.Fragment, { children: O.fields.map((G) => /* @__PURE__ */ p(
           ze,
           {
             field: G,
-            valuesMap: M,
+            valuesMap: F,
             handleChange: Be,
             handleError: He,
             errorsMap: v
           },
           G.name
-        )) }, `ungrouped-${J}`));
+        )) }, `ungrouped-${Y}`));
       })(),
       A < h.length && /* @__PURE__ */ p(
         "div",
@@ -3872,9 +3898,9 @@ const gn = ({ onClick: e, disabled: r = !1, t }) => {
         }
       )
     ] }),
-    /* @__PURE__ */ p(gn, { onClick: nt, disabled: at, t: d })
+    /* @__PURE__ */ p(hn, { onClick: ot, disabled: at, t: d })
   ] }) });
-}, Xr = {
+}, Zr = {
   en: { name: "English", nativeName: "English" },
   fr: { name: "French", nativeName: "Français" },
   de: { name: "German", nativeName: "Deutsch" },
@@ -3905,15 +3931,15 @@ const gn = ({ onClick: e, disabled: r = !1, t }) => {
   uk: { name: "Ukrainian", nativeName: "Українська" },
   vi: { name: "Vietnamese", nativeName: "Tiếng Việt" },
   "zh-tw": { name: "Chinese (Traditional)", nativeName: "繁體中文" }
-}, ha = () => Xr, be = /* @__PURE__ */ new Map(), le = /* @__PURE__ */ new Map(), te = /* @__PURE__ */ new Set(), we = /* @__PURE__ */ new Map(), bn = async (e) => {
+}, yo = () => Zr, be = /* @__PURE__ */ new Map(), le = /* @__PURE__ */ new Map(), te = /* @__PURE__ */ new Set(), we = /* @__PURE__ */ new Map(), yn = async (e) => {
   try {
     let r = {};
     const t = e.toLowerCase();
     if (t === "en")
       r = {};
-    else if (Xr[t]) {
-      const a = `https://reactaform.com/locales/${t}/common.json`, o = await fetch(a);
-      o.ok && (r = await o.json());
+    else if (Zr[t]) {
+      const o = `https://reactaform.com/locales/${t}/common.json`, a = await fetch(o);
+      a.ok && (r = await a.json());
     } else
       r = {};
     return {
@@ -3928,7 +3954,7 @@ const gn = ({ onClick: e, disabled: r = !1, t }) => {
       error: `Failed to load common translations for ${e}: ${r}`
     };
   }
-}, yn = async (e) => {
+}, vn = async (e) => {
   if (!e || e.toLowerCase() === "en")
     return { success: !0, translations: {}, fromCache: !1 };
   const r = e.toLowerCase();
@@ -3938,13 +3964,13 @@ const gn = ({ onClick: e, disabled: r = !1, t }) => {
       translations: be.get(r) || {},
       fromCache: !0
     };
-  const t = await bn(r);
+  const t = await yn(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;
-}, vn = async (e, r) => {
+}, xn = async (e, r) => {
   if (!e || !r)
     return {
       success: !1,
@@ -3968,9 +3994,9 @@ const gn = ({ 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"
@@ -3981,14 +4007,14 @@ const gn = ({ 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") && Zr() && 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") && Qr() && 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 };
@@ -4024,15 +4050,15 @@ const gn = ({ 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 Zr() {
+function Qr() {
   try {
     if (typeof process < "u" && process?.env?.NODE_ENV === "development")
       return !0;
@@ -4040,72 +4066,72 @@ function Zr() {
   }
   return !1;
 }
-function xn(e, r) {
+function wn(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 wn = (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 = xn(o, a), !c && Zr() && console.debug(
+const Sn = (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 = wn(a, o), !c && Qr() && console.debug(
     `Missing translation for "${n}" in language "${e}"`
-  ), o);
+  ), a);
 };
-function Sn(e) {
+function Cn(e) {
   return /^[-+]?\d*$/.test(e);
 }
-function Cn(e) {
+function Nn(e) {
   const r = /^[-+]?\d*$/;
   return e.split(",").map((t) => t.trim()).every((t) => r.test(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 kn = ",", In = (e) => !e || e.trim() === "" ? [] : e.split(kn).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 (!Sn(n))
+  if (!Cn(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 In(e, r, t) {
+function En(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 (!Cn(n))
+  if (!Nn(n))
     return t("Each value must be a valid integer");
-  const a = kn(n);
-  if (e.minCount !== void 0 && a.length < e.minCount)
+  const o = In(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 ? "≤" : "<",
@@ -4113,55 +4139,55 @@ function In(e, r, t) {
       );
   }
 }
-function Qr(e, r, t) {
+function et(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 En = /^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][-+]?\d+)?$/;
+const Fn = /^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][-+]?\d+)?$/;
 function Mn(e) {
-  return e.split(",").map((r) => r.trim()).every((r) => En.test(r));
+  return e.split(",").map((r) => r.trim()).every((r) => Fn.test(r));
 }
-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 Vn = ",", $n = (e) => !e || e.trim() === "" ? [] : e.split(Vn).map((r) => r.trim()).filter(Boolean).map((r) => Number(r));
+function An(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 (!Mn(n))
     return t("Each value must be a valid float");
-  const a = $n(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 ? "≤" : "<",
@@ -4170,10 +4196,10 @@ function Vn(e, r, t) {
   }
 }
 const ye = /* @__PURE__ */ new WeakMap();
-function Oe(e, r, t, n, ...a) {
+function Le(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);
@@ -4187,44 +4213,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) : Le(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(), An = (e) => {
+}, Ze = /* @__PURE__ */ new WeakMap(), Rn = (e) => {
   let r = Ze.get(e);
   return r || (r = {
     minTime: Se(e.minDate),
     maxTime: Se(e.maxDate)
   }, Ze.set(e, r)), r;
 };
-function Rn(e, r, t) {
+function Dn(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 } = An(e);
-  if (o !== null && a < o)
+  const { minTime: a, maxTime: c } = Rn(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 Dn(e, r, t) {
+function zn(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;
@@ -4241,42 +4267,42 @@ function Dn(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 zn(e) {
+function Pn(e) {
   return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);
 }
-function Pn(e, r, t) {
+function On(e, r, t) {
   const n = String(r ?? "").trim();
-  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");
+  return n === "" ? e.required ? t("Value required") : void 0 : Pn(n) ? Le(e, r, t, t("Email does not match pattern: {{1}}", e.pattern)) : t("Must be valid email format");
 }
 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");
+  return n === "" ? e.required ? t("Value required") : void 0 : Le(e, n, t, "Invalid phone number format");
 }
-const On = /^(https?|ftp|file):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|]$/i, Tn = (e) => {
+const Tn = /^(https?|ftp|file):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|]$/i, jn = (e) => {
   try {
     return new URL(e), !0;
   } catch {
     return !1;
   }
 };
-function jn(e, r, t) {
+function Bn(e, r, t) {
   const n = String(r ?? "").trim();
   if (n === "")
     return e.required ? t("Value required") : void 0;
-  if (!(On.test(n) || Tn(n))) {
+  if (!(Tn.test(n) || jn(n))) {
     if (e.allowRelative === !0) {
       if (!n.startsWith("/") || encodeURI(n) !== n)
         return t("Must be a valid URL");
@@ -4290,11 +4316,11 @@ function jn(e, r, t) {
     return t("Must be a valid URL");
   }
 }
-function Bn(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 : Qr(e, a, t);
-}
 function Hn(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 : et(e, o, t);
+}
+function qn(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)) {
@@ -4302,62 +4328,62 @@ function Hn(e, r, t) {
     return e.required && (r == null || typeof n == "string" && n.trim() === "") ? t("Select a file") : t("Invalid file input: {{1}}", n);
   }
 }
-function qn(e, r, t) {
+function Un(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 Un(e, r, t) {
-  const a = String(r ?? "").trim();
-  if (a === "")
+function Wn(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 Wn = /^#([0-9A-F]{3}){1,2}$/i, _n = (e) => Wn.test(e);
-function Kn(e, r, t) {
+const _n = /^#([0-9A-F]{3}){1,2}$/i, Kn = (e) => _n.test(e);
+function Gn(e, r, t) {
   const n = String(r).trim();
   if (n === "")
     return e.required ? t("Value required") : void 0;
-  if (!_n(n))
+  if (!Kn(n))
     return t("Invalid color format");
 }
-function Gn(e, r, t) {
+function Jn(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 Jn(e, r, t) {
+function Yn(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 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);
+function rt() {
+  Qe || (H("int", Xe), H("stepper", Xe), H("int-array", En), H("float", et), H("slider", Yn), H("float-array", An), H("text", ue), H("string", ue), H("multiline", ue), H("password", ue), H("email", On), H("date", Dn), H("time", zn), H("url", Bn), H("phone", Ln), H("unit", Hn), H("dropdown", Un), H("multi-selection", Wn), H("color", Gn), H("rating", Jn), H("file", qn), Qe = !0);
 }
-et();
-sn();
-et();
-const Yn = (e) => ({
+rt();
+cn();
+rt();
+const Xn = (e) => ({
   container: {
     padding: "var(--reactaform-space-sm, 8px)",
     margin: "0 auto",
@@ -4398,7 +4424,7 @@ const Yn = (e) => ({
     lineHeight: "1.2",
     textAlign: "left"
   }
-}), Xn = (e) => {
+}), Zn = (e) => {
   const r = {
     color: "var(--reactaform-color-text)",
     fontFamily: e?.fontFamily || "var(--reactaform-font-family, inherit)",
@@ -4457,18 +4483,18 @@ const Yn = (e) => ({
       display: "block"
     }
   };
-}, Zn = ({
+}, Qn = ({
   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]
   ), [C, N] = l.useState({}), [h, y] = l.useState({});
@@ -4480,9 +4506,9 @@ const Yn = (e) => ({
         return;
       }
       try {
-        const w = await yn(f), x = w.success ? w.translations : {};
+        const w = await vn(f), x = w.success ? w.translations : {};
         v && N(x);
-        const k = await vn(f, m), S = k.success ? k.translations : {};
+        const k = await xn(f, m), S = k.success ? k.translations : {};
         v && y(S);
       } catch {
         v && (N({}), y({}));
@@ -4491,20 +4517,20 @@ const Yn = (e) => ({
       v = !1;
     };
   }, [f, m]);
-  const E = l.useMemo(() => Yn(b), [b]), F = l.useMemo(() => Xn(b), [b]), M = l.useMemo(
-    () => wn(f, C, h),
+  const E = l.useMemo(() => Xn(b), [b]), M = l.useMemo(() => Zn(b), [b]), F = l.useMemo(
+    () => Sn(f, C, h),
     [f, C, h]
-  ), $ = l.useCallback(
-    (v, ...g) => M(v, ...g),
-    [M]
+  ), V = l.useCallback(
+    (v, ...g) => F(v, ...g),
+    [F]
   ), R = l.useMemo(
     () => ({
       definitionName: d,
       language: f,
       theme: u,
       formStyle: E,
-      fieldStyle: F,
-      t: $,
+      fieldStyle: M,
+      t: V,
       fieldValidationMode: c,
       displayInstanceName: i
     }),
@@ -4512,9 +4538,9 @@ const Yn = (e) => ({
       d,
       f,
       u,
-      F,
+      M,
       E,
-      $,
+      V,
       c,
       i
     ]
@@ -4529,7 +4555,7 @@ const Yn = (e) => ({
     }
   ) });
 };
-function Qn(e) {
+function eo(e) {
   if (!e || typeof e != "object")
     return "Definition must be an object";
   const r = e;
@@ -4557,7 +4583,7 @@ function Qn(e) {
     }
   return null;
 }
-async function ba(e, r = {}) {
+async function vo(e, r = {}) {
   const { validateSchema: t = !0 } = r;
   try {
     if (!e || typeof e != "string")
@@ -4565,26 +4591,26 @@ async function ba(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 = Qn(a);
-      if (o)
-        return { success: !1, error: `Schema validation failed: ${o}` };
+      const a = eo(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 ea(e, r) {
+function ro(e, r) {
   try {
     if (!e)
       return { success: !1, error: "Definition is required" };
@@ -4596,13 +4622,13 @@ function ea(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 {
@@ -4611,7 +4637,7 @@ function ea(e, r) {
     };
   }
 }
-function ya(e) {
+function xo(e) {
   try {
     if (!e)
       return { success: !1, error: "Instance data is required" };
@@ -4635,7 +4661,7 @@ function ya(e) {
     };
   }
 }
-function va(e, r, t) {
+function wo(e, r, t) {
   try {
     if (!e)
       return { success: !1, error: "Instance is required" };
@@ -4648,9 +4674,9 @@ function va(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;
@@ -4695,14 +4721,14 @@ function va(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);
@@ -4717,30 +4743,30 @@ function va(e, r, t) {
     };
   }
 }
-function ra(e) {
+function to(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 xa = ({
+const So = ({
   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
@@ -4751,7 +4777,7 @@ const xa = ({
     } catch {
       return null;
     }
-  }, [e]), u = { fontSize: "inherit", fontFamily: "inherit", ...o }, f = ra(), b = a ?? f ?? "light", C = t ?? "en";
+  }, [e]), u = { fontSize: "inherit", fontFamily: "inherit", ...a }, f = to(), 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));
@@ -4759,11 +4785,11 @@ const xa = ({
   const N = l.useMemo(() => {
     if (r) return r;
     if (!m) return null;
-    const h = ea(m, m.name);
+    const h = ro(m, m.name);
     return !h.success || !h.instance ? null : h.instance;
   }, [r, m]);
   return m ? N ? /* @__PURE__ */ p(
-    Zn,
+    Qn,
     {
       definitionName: m.name,
       defaultStyle: u,
@@ -4774,7 +4800,7 @@ const xa = ({
       defaultFieldValidationMode: c,
       defaultDisplayInstanceName: s,
       children: /* @__PURE__ */ p(
-        hn,
+        bn,
         {
           definition: m,
           instance: N,
@@ -4784,7 +4810,7 @@ const xa = ({
       )
     }
   ) : /* @__PURE__ */ p("div", { style: { color: "red" }, children: "Error: Failed to create instance from definition." }) : /* @__PURE__ */ p("div", { style: { color: "red" }, children: "Error: No form definition provided." });
-}, Z = /* @__PURE__ */ new Map(), W = {
+}, Q = /* @__PURE__ */ new Map(), W = {
   components: /* @__PURE__ */ new Map(),
   fieldValidators: /* @__PURE__ */ new Map(),
   // category -> name -> plugin
@@ -4792,7 +4818,7 @@ const xa = ({
   formValidators: /* @__PURE__ */ new Map(),
   submissionHandlers: /* @__PURE__ */ new Map()
 };
-function rt(e, r, t) {
+function tt(e, r, t) {
   if (!e) return !0;
   if (t && !t(e))
     return !1;
@@ -4813,73 +4839,73 @@ function rt(e, r, t) {
       return !1;
   }
 }
-function ta(e) {
+function no(e) {
   const r = [];
   if (e.components)
     for (const t of Object.keys(e.components)) {
       const n = _r(t);
       if (n) {
-        let a;
-        for (const [o, c] of Z)
+        let o;
+        for (const [a, c] of Q)
           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 = fn(t), a = W.submissionHandlers.get(t);
-      n && a && a !== e.name && r.push({
+      const n = pn(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)), rt(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)), tt(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]);
@@ -4890,19 +4916,19 @@ function oe(e, r, t, n, a, o, c, s) {
         ) : r.set(i, n.name), t(i, e[i]);
   }
 }
-function wa(e, r) {
+function Co(e, r) {
   const t = r?.conflictResolution || "error";
-  if (Z.has(e.name)) {
-    const a = {
+  if (Q.has(e.name)) {
+    const o = {
       type: "plugin",
       name: e.name,
       existingPlugin: e.name,
       newPlugin: e.name
     };
-    if (!rt(a, t, r?.onConflict)) return;
+    if (!tt(o, t, r?.onConflict)) return;
   }
-  const n = ta(e);
-  if (e.components && oe(
+  const n = no(e);
+  if (e.components && ae(
     e.components,
     W.components,
     Wr,
@@ -4911,57 +4937,57 @@ function wa(e, r) {
     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) => gt(a, c, s),
+        (c, s) => ht(o, c, s),
         e,
         n,
         t,
         r?.onConflict,
-        a
+        o
       );
-  e.formValidators && oe(
+  e.formValidators && ae(
     e.formValidators,
     W.formValidators,
-    pt,
+    gt,
     e,
     n,
     t,
     r?.onConflict
-  ), e.fieldTypeValidators && oe(
+  ), e.fieldTypeValidators && ae(
     e.fieldTypeValidators,
     W.fieldTypeValidators,
-    ht,
+    bt,
     e,
     n,
     t,
     r?.onConflict
-  ), e.submissionHandlers && oe(
+  ), e.submissionHandlers && ae(
     e.submissionHandlers,
     W.submissionHandlers,
-    Jr,
+    Yr,
     e,
     n,
     t,
     r?.onConflict
-  ), e.setup && e.setup(), Z.set(e.name, e);
+  ), e.setup && e.setup(), Q.set(e.name, e);
 }
-function Sa(e, r = !1) {
-  const t = Z.get(e);
+function No(e, r = !1) {
+  const t = Q.get(e);
   if (!t) return !1;
   if (t.cleanup && t.cleanup(), r) {
     if (t.components)
       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)
@@ -4974,18 +5000,18 @@ function Sa(e, r = !1) {
       for (const n of Object.keys(t.submissionHandlers))
         W.submissionHandlers.delete(n);
   }
-  return Z.delete(e), !0;
+  return Q.delete(e), !0;
 }
-function Ca(e) {
-  return Z.get(e);
+function ko(e) {
+  return Q.get(e);
 }
-function Na() {
-  return Array.from(Z.values());
+function Io() {
+  return Array.from(Q.values());
 }
-function ka(e) {
-  return Z.has(e);
+function Eo(e) {
+  return Q.has(e);
 }
-function Ia(e) {
+function Fo(e) {
   for (const [r, t] of Object.entries(e))
     Wr(r, t);
 }
@@ -4997,7 +5023,7 @@ function Te(e) {
   const r = e;
   return typeof r.name == "string" && typeof r.displayName == "string";
 }
-function tt(e) {
+function nt(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));
@@ -5010,12 +5036,12 @@ function Ce(e) {
     return !!r && typeof r.name == "string" && typeof r.size == "number";
   }
 }
-function Ea(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 = []
@@ -5025,7 +5051,7 @@ function Ea(e, r, t = {}) {
         success: !1,
         error: "Instance must be a valid object"
       };
-    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]));
+    const d = [], m = [], u = {}, b = (nt(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);
@@ -5038,9 +5064,9 @@ function Ea(e, r, t = {}) {
       if (y === void 0) continue;
       const E = C.get(h);
       try {
-        u[h] = na(y, E, { dateFormat: a, fileHandling: o });
-      } catch (F) {
-        d.push(`Error serializing field '${h}': ${String(F)}`), u[h] = null;
+        u[h] = oo(y, E, { dateFormat: o, fileHandling: a });
+      } catch (M) {
+        d.push(`Error serializing field '${h}': ${String(M)}`), u[h] = null;
       }
     }
     return n && (u._metadata = {
@@ -5064,8 +5090,8 @@ function Ea(e, r, t = {}) {
     };
   }
 }
-function na(e, r, t = {}) {
-  const { dateFormat: n = "iso", fileHandling: a = "metadata" } = t;
+function oo(e, r, t = {}) {
+  const { dateFormat: n = "iso", fileHandling: o = "metadata" } = t;
   if (e == null)
     return null;
   if (r)
@@ -5075,7 +5101,7 @@ function na(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;
@@ -5086,11 +5112,11 @@ function na(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;
@@ -5134,12 +5160,12 @@ function tr(e, r) {
     _note: "Base64 encoding requires async implementation"
   };
 }
-function Ma(e, r, t = {}) {
+function Vo(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")
@@ -5161,7 +5187,7 @@ function Ma(e, r, t = {}) {
         success: !1,
         error: "Parsed data must be an object"
       };
-    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]));
+    const i = [], d = [], m = {}, f = (nt(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) {
@@ -5169,13 +5195,13 @@ function Ma(e, r, t = {}) {
         continue;
       }
       try {
-        m[h] = aa(y, N, { validateTypes: a, dateFormat: c });
+        m[h] = ao(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);
+        const M = `Error deserializing field '${h}': ${String(E)}`;
+        n ? d.push(M) : (i.push(M), m[h] = y);
       }
     }
-    if (o)
+    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;
@@ -5192,8 +5218,8 @@ function Ma(e, r, t = {}) {
     };
   }
 }
-function aa(e, r, t = {}) {
-  const { validateTypes: n = !0, dateFormat: a = "auto" } = t;
+function ao(e, r, t = {}) {
+  const { validateTypes: n = !0, dateFormat: o = "auto" } = t;
   if (e == null)
     return e;
   try {
@@ -5201,7 +5227,7 @@ function aa(e, r, t = {}) {
       case "date":
       case "datetime":
       case "date-time":
-        return oa(e, a, n);
+        return io(e, o, n);
       case "int":
       case "integer":
         return Ne(e, n);
@@ -5209,7 +5235,7 @@ function aa(e, r, t = {}) {
       case "number":
         return ke(e, n);
       case "boolean":
-        return ia(e, n);
+        return so(e, n);
       case "int-array":
         return nr(e, "integer", n);
       case "float-array":
@@ -5223,13 +5249,13 @@ function aa(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 Fa(e, r = {}) {
+function $o(e, r = {}) {
   try {
     const { prettify: t = !0, includeMetadata: n = !0 } = r;
     if (!e || typeof e != "object")
@@ -5237,16 +5263,16 @@ function Fa(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: []
       }
@@ -5258,13 +5284,13 @@ function Fa(e, r = {}) {
     };
   }
 }
-function $a(e, r = {}) {
+function Ao(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,
@@ -5272,43 +5298,43 @@ function $a(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 C = `Property at index ${u} missing 'name'`;
-        t ? c.push(C) : (o.push(`${C}, using 'field_${u}'`), b.name = `field_${u}`);
+        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) {
@@ -5318,7 +5344,7 @@ function $a(e, r = {}) {
     };
   }
 }
-function oa(e, r, t) {
+function io(e, r, t) {
   if (e instanceof Date)
     return e;
   if (typeof e == "number") {
@@ -5383,7 +5409,7 @@ function ke(e, r) {
     throw new Error(`Cannot convert ${typeof e} to number`);
   return e;
 }
-function ia(e, r) {
+function so(e, r) {
   if (typeof e == "boolean")
     return e;
   if (typeof e == "string") {
@@ -5402,70 +5428,70 @@ function ia(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 sa() {
+function co() {
   if (!document.getElementById("reactaform-styles"))
     try {
       const e = document.createElement("style");
-      e.id = "reactaform-styles", e.textContent = ct, document.head.appendChild(e);
+      e.id = "reactaform-styles", e.textContent = lt, document.head.appendChild(e);
     } catch {
     }
 }
-typeof document < "u" && sa();
+typeof document < "u" && co();
 export {
-  V as CSS_CLASSES,
-  xa as ReactaForm,
-  Zn as ReactaFormProvider,
-  hn as ReactaFormRenderer,
-  O as StandardFieldLayout,
-  ma as Units,
+  $ as CSS_CLASSES,
+  So as ReactaForm,
+  Qn as ReactaFormProvider,
+  bn as ReactaFormRenderer,
+  L as StandardFieldLayout,
+  fo as Units,
   U as combineClasses,
-  ea as createInstanceFromDefinition,
-  $a as deserializeDefinition,
-  Ma as deserializeInstance,
-  Na as getAllPlugins,
-  rn as getButtonHandler,
+  ro as createInstanceFromDefinition,
+  Ao as deserializeDefinition,
+  Vo as deserializeInstance,
+  Io as getAllPlugins,
+  tn as getButtonHandler,
   _r as getComponent,
-  Ca as getPlugin,
-  ha as getSupportedLanguages,
-  fa as hasButtonHandler,
-  ka as hasPlugin,
-  sa as injectReactaFormStyles,
+  ko as getPlugin,
+  yo as getSupportedLanguages,
+  go as hasButtonHandler,
+  Eo as hasPlugin,
+  co as injectReactaFormStyles,
   ie as isDarkTheme,
-  ga as listButtonHandlers,
-  ya as loadInstance,
-  ba as loadJsonDefinition,
-  da as registerButtonHandler,
+  bo as listButtonHandlers,
+  xo as loadInstance,
+  vo as loadJsonDefinition,
+  po as registerButtonHandler,
   Wr as registerComponent,
-  Ia as registerComponents,
-  gt as registerFieldCustomValidationHandler,
-  ht as registerFieldTypeValidationHandler,
-  pt as registerFormValidationHandler,
-  wa as registerPlugin,
-  Jr as registerSubmissionHandler,
-  Fa as serializeDefinition,
-  Ea as serializeInstance,
-  pa as unregisterButtonHandler,
-  Sa as unregisterPlugin,
-  va as upgradeInstanceToLatestDefinition,
-  lt as useDebouncedCallback,
+  Fo as registerComponents,
+  ht as registerFieldCustomValidationHandler,
+  bt as registerFieldTypeValidationHandler,
+  gt as registerFormValidationHandler,
+  Co as registerPlugin,
+  Yr as registerSubmissionHandler,
+  $o as serializeDefinition,
+  Mo as serializeInstance,
+  ho as unregisterButtonHandler,
+  No as unregisterPlugin,
+  wo as upgradeInstanceToLatestDefinition,
+  ut as useDebouncedCallback,
   T as useFieldValidator,
   B as useReactaFormContext,
   _ as useUncontrolledValidatedInput,
-  ua as validateFieldValue,
+  mo as validateFieldValue,
   fr as validateFieldWithCustomHandler
 };