reactaform 1.9.30 → 1.9.40

package/dist/reactaform.es.js

@@ -1,5 +1,5 @@
 import { jsx as g, jsxs as z, Fragment as Fe } from "react/jsx-runtime";
-import * as s from "react";
+import * as c from "react";
 import { createContext as st, useContext as ct, useRef as ge, useEffect as We, useCallback as he } from "react";
 import * as fe from "react-dom";
 const lt = `/* ReactaForm CSS Custom Properties (CSS Variables) */\r
@@ -448,7 +448,7 @@ class ae {
 }
 const ar = typeof process < "u" && process.env.NODE_ENV === "test";
 function ut(e, r = 300, t) {
-  const n = ge(), o = ge(e), a = ge(null), c = t?.leading === !0, l = t?.trailing !== !1;
+  const n = ge(), o = ge(e), a = ge(null), s = t?.leading === !0, l = t?.trailing !== !1;
   We(() => {
     o.current = e;
   }, [e]), We(() => () => {
@@ -458,7 +458,7 @@ function ut(e, r = 300, t) {
     o.current(...f);
   }, u = he(() => {
     n.current && (clearTimeout(n.current), n.current = void 0), a.current = null;
-  }, []), d = he(() => {
+  }, []), m = he(() => {
     n.current && (clearTimeout(n.current), n.current = void 0), l && a.current && (i(a.current), a.current = null);
   }, [l]);
   return { callback: he(
@@ -467,13 +467,13 @@ function ut(e, r = 300, t) {
         i(f);
         return;
       }
-      const h = c && !n.current;
+      const h = s && !n.current;
       a.current = f, h && i(f), n.current && clearTimeout(n.current), n.current = setTimeout(() => {
         n.current = void 0, l && a.current && (i(a.current), a.current = null);
       }, r);
     },
-    [c, l, r]
-  ), cancel: u, flush: d };
+    [s, l, r]
+  ), cancel: u, flush: m };
 }
 const R = {
   field: "reactaform-field",
@@ -501,11 +501,11 @@ function mt(e) {
   const r = e.trim();
   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), 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));
+    const s = r.substring(1);
+    s.length === 3 || s.length === 4 ? (t = parseInt(s[0] + s[0], 16), n = parseInt(s[1] + s[1], 16), o = parseInt(s[2] + s[2], 16)) : (s.length === 6 || s.length === 8) && (t = parseInt(s.substring(0, 2), 16), n = parseInt(s.substring(2, 4), 16), o = parseInt(s.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]))), o = Math.min(255, Math.max(0, parseFloat(c[2]))));
+    const s = r.match(/\d+(\.\d+)?/g);
+    s && s.length >= 3 && (t = Math.min(255, Math.max(0, parseFloat(s[0]))), n = Math.min(255, Math.max(0, parseFloat(s[1]))), o = Math.min(255, Math.max(0, parseFloat(s[2]))));
   } else
     return !1;
   return (t * 299 + n * 587 + o * 114) / 1e3 < 128;
@@ -527,17 +527,17 @@ const dt = () => /* @__PURE__ */ z(
     ]
   }
 ), ft = ({ content: e, size: r = "medium", animation: t = !0 }) => {
-  const { t: n, theme: o, formStyle: a, fieldStyle: c } = j(), [l, i] = s.useState(!1), [u, d] = s.useState({ x: 0, y: 0 }), [m, f] = s.useState(!1), h = s.useRef(null), E = s.useRef(null), v = s.useRef(null), p = s.useId(), y = ce(o), [C, V] = s.useState(void 0);
-  s.useLayoutEffect(() => {
+  const { t: n, theme: o, formStyle: a, fieldStyle: s } = j(), [l, i] = c.useState(!1), [u, m] = c.useState({ x: 0, y: 0 }), [d, f] = c.useState(!1), h = c.useRef(null), k = c.useRef(null), v = c.useRef(null), p = c.useId(), y = ce(o), [C, V] = c.useState(void 0);
+  c.useLayoutEffect(() => {
     if (!h.current) return;
     const F = "rgba(255,255,255,0.1)", x = getComputedStyle(h.current).getPropertyValue("--reactaform-primary-bg").trim();
     if (x && typeof CSS < "u" && CSS.supports?.("color: color-mix(in srgb, red, blue)")) {
-      const N = mt(x) ? "black" : "white";
-      V(`color-mix(in srgb, var(--reactaform-primary-bg) 85%, ${N} 15%)`);
+      const E = mt(x) ? "black" : "white";
+      V(`color-mix(in srgb, var(--reactaform-primary-bg) 85%, ${E} 15%)`);
     } else
       V(F);
   }, []);
-  const A = s.useMemo(() => {
+  const A = c.useMemo(() => {
     const b = {
       icon: {
         display: "inline-flex",
@@ -582,50 +582,50 @@ const dt = () => /* @__PURE__ */ z(
         opacity: 1,
         pointerEvents: "auto"
       }
-    }, x = (w, S, k) => {
-      const O = w?.[S];
-      return (k && O ? O[k] : void 0) ?? {};
+    }, x = (w, S, N) => {
+      const L = w?.[S];
+      return (N && L ? L[N] : void 0) ?? {};
     };
     return {
-      icon: { ...b.icon, ...x(a, "tooltip", "icon"), ...x(c, "tooltip", "icon") },
-      text: { ...b.text, ...x(a, "tooltip", "text"), ...x(c, "tooltip", "text") },
+      icon: { ...b.icon, ...x(a, "tooltip", "icon"), ...x(s, "tooltip", "icon") },
+      text: { ...b.text, ...x(a, "tooltip", "text"), ...x(s, "tooltip", "text") },
       textVisible: b.textVisible
     };
-  }, [y, r, t, a, c, C]);
-  s.useLayoutEffect(() => {
-    if (!l || !h.current || !E.current) {
+  }, [y, r, t, a, s, C]);
+  c.useLayoutEffect(() => {
+    if (!l || !h.current || !k.current) {
       f(!1);
       return;
     }
     const F = h.current.getBoundingClientRect();
     v.current = F;
-    const b = E.current.getBoundingClientRect(), x = 8, N = window.innerWidth, w = window.innerHeight, S = -4;
-    let k = F.right + x, $ = F.top + F.height / 2 - b.height / 2 + S;
-    k + b.width > N - x && (k = F.left - x - b.width), k = Math.max(x, Math.min(k, N - b.width - x)), $ = Math.max(x, Math.min($, w - b.height - x)), d({ x: k, y: $ }), f(!0);
-    const O = h.current.closest("[data-reactaform-theme]"), q = document.getElementById("popup-root");
-    if (O && q) {
-      const Y = getComputedStyle(O);
+    const b = k.current.getBoundingClientRect(), x = 8, E = window.innerWidth, w = window.innerHeight, S = -4;
+    let N = F.right + x, $ = F.top + F.height / 2 - b.height / 2 + S;
+    N + b.width > E - x && (N = F.left - x - b.width), N = Math.max(x, Math.min(N, E - b.width - x)), $ = Math.max(x, Math.min($, w - b.height - x)), m({ x: N, y: $ }), f(!0);
+    const L = h.current.closest("[data-reactaform-theme]"), q = document.getElementById("popup-root");
+    if (L && q) {
+      const X = getComputedStyle(L);
       q.style.setProperty(
         "--reactaform-tooltip-color-bg",
-        Y.getPropertyValue("--reactaform-tooltip-color-bg")
+        X.getPropertyValue("--reactaform-tooltip-color-bg")
       ), q.style.setProperty(
         "--reactaform-tooltip-color",
-        Y.getPropertyValue("--reactaform-tooltip-color")
+        X.getPropertyValue("--reactaform-tooltip-color")
       );
     }
   }, [l]);
   const I = typeof document < "u" ? document.getElementById("popup-root") : null, M = /* @__PURE__ */ g(
     "div",
     {
-      ref: E,
+      ref: k,
       "data-tooltip-id": p,
       style: {
         ...A.text,
-        transform: m ? "translateY(0) scale(1)" : "translateY(-4px) scale(0.98)",
+        transform: d ? "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
-        ...m ? A.textVisible : {},
+        ...d ? A.textVisible : {},
         top: u.y,
         left: u.x
       },
@@ -649,32 +649,32 @@ const dt = () => /* @__PURE__ */ z(
     ),
     l && (I ? fe.createPortal(M, I) : M)
   ] });
-}, ir = s.memo(ft), xe = s.memo(({
+}, ir = c.memo(ft), xe = c.memo(({
   field: e,
   error: r,
   children: t,
   showLabel: n = !0
 }) => {
-  const { t: o } = j(), a = e.labelLayout === "column-center" ? "center" : "left", c = s.useMemo(() => {
+  const { t: o } = j(), a = e.labelLayout === "column-center" ? "center" : "left", s = c.useMemo(() => {
     const u = {
       display: "flex",
       flexDirection: "column",
       gap: "var(--reactaform-label-gap, 4px)"
     };
     return u["--label-align"] = a, u;
-  }, [a]), l = s.useMemo(() => ({
+  }, [a]), l = c.useMemo(() => ({
     textAlign: a,
     width: "100%",
     minWidth: "unset",
     display: "block",
     marginBottom: "10px"
-  }), [a]), i = s.useMemo(() => ({
+  }), [a]), i = c.useMemo(() => ({
     display: "flex",
     alignItems: "center",
     gap: "var(--reactaform-inline-gap, 8px)",
     width: "100%"
   }), []);
-  return /* @__PURE__ */ z("div", { className: `${R.field} column-layout`, style: c, children: [
+  return /* @__PURE__ */ z("div", { className: `${R.field} column-layout`, style: s, children: [
     n && /* @__PURE__ */ g(
       "label",
       {
@@ -693,13 +693,13 @@ const dt = () => /* @__PURE__ */ z(
   ] });
 });
 xe.displayName = "ColumnFieldLayout";
-const sr = s.memo(({
+const sr = c.memo(({
   field: e,
   error: r,
   children: t,
   rightAlign: n = !1
 }) => {
-  const { t: o } = j(), a = s.useMemo(() => ({
+  const { t: o } = j(), a = c.useMemo(() => ({
     display: "flex",
     alignItems: "center",
     gap: "3px"
@@ -725,15 +725,15 @@ const sr = s.memo(({
   ] });
 });
 sr.displayName = "RowFieldLayout";
-const L = s.memo(({
+const B = c.memo(({
   field: e,
   error: r,
   children: t,
   rightAlign: n = !1
 }) => e.labelLayout === "column-left" || e.labelLayout === "column-center" ? /* @__PURE__ */ g(xe, { field: e, error: r, showLabel: !0, children: t }) : e.type === "checkbox" || e.type === "switch" ? /* @__PURE__ */ g(xe, { field: e, error: r, showLabel: !1, children: t }) : /* @__PURE__ */ g(sr, { field: e, error: r, rightAlign: n, children: t }));
-L.displayName = "StandardFieldLayout";
-const Ve = s.memo(({ children: e, id: r }) => {
-  const t = s.useMemo(() => ({
+B.displayName = "StandardFieldLayout";
+const Ve = c.memo(({ children: e, id: r }) => {
+  const t = c.useMemo(() => ({
     color: "var(--reactaform-error-color, red)",
     fontSize: "13px",
     marginTop: "4px",
@@ -747,7 +747,7 @@ const Ve = s.memo(({ children: e, id: r }) => {
   return /* @__PURE__ */ g("div", { id: r, style: t, children: e });
 });
 Ve.displayName = "ErrorDiv";
-const cr = s.memo(({ name: e, onChange: r }) => {
+const cr = c.memo(({ name: e, onChange: r }) => {
   const { t } = j();
   return /* @__PURE__ */ z("div", { style: { marginBottom: 16 }, children: [
     /* @__PURE__ */ z("div", { style: { display: "grid", gridTemplateColumns: "1fr 2fr", gap: 12, alignItems: "center" }, children: [
@@ -844,9 +844,9 @@ function pr(e, r, t, n) {
       return null;
   } else
     return null;
-  const c = `${o}:${a}`;
-  let l = _e.get(c);
-  if (l === void 0 && (l = mr(o, a) || null, _e.set(c, l)), l)
+  const s = `${o}:${a}`;
+  let l = _e.get(s);
+  if (l === void 0 && (l = mr(o, a) || null, _e.set(s, l)), l)
     try {
       return l(r.name, t, n) || null;
     } catch (i) {
@@ -883,8 +883,8 @@ async function vt(e, r, t) {
 }
 function T(e, r) {
   const { definitionName: t, t: n, fieldValidationMode: o } = j();
-  return s.useCallback(
-    (a, c = "change") => o === "onEdit" || o === "realTime" || o === "onBlur" && c === "blur" ? we(t, e, a, n) : r ?? null,
+  return c.useCallback(
+    (a, s = "change") => o === "onEdit" || o === "realTime" || o === "onBlur" && s === "blur" ? we(t, e, a, n) : r ?? null,
     [t, e, n, o, r]
   );
 }
@@ -895,40 +895,40 @@ const gr = ({
   onError: n,
   error: o
 }) => {
-  const { t: a } = j(), c = T(e, o), l = s.useRef(n), [i, u] = s.useState(null), d = s.useRef(null);
-  s.useEffect(() => {
+  const { t: a } = j(), s = T(e, o), l = c.useRef(n), [i, u] = c.useState(null), m = c.useRef(null);
+  c.useEffect(() => {
     l.current = n;
-  }, [n]), s.useEffect(() => {
-    const p = c(r, "sync");
-    p !== d.current && (d.current = p, u(p), o || l.current?.(p ?? null));
-  }, [r, c, o]);
-  const m = s.useCallback(
+  }, [n]), c.useEffect(() => {
+    const p = s(r, "sync");
+    p !== m.current && (m.current = p, u(p), o || l.current?.(p ?? null));
+  }, [r, s, o]);
+  const d = c.useCallback(
     (p) => {
-      p !== d.current && (d.current = p, u(p), o || l.current?.(p ?? null));
+      p !== m.current && (m.current = p, u(p), o || l.current?.(p ?? null));
     },
     [o]
-  ), f = s.useCallback(
+  ), f = c.useCallback(
     (p) => {
       const y = p.target.checked;
-      m(c(y, "change")), t?.(y);
+      d(s(y, "change")), t?.(y);
     },
-    [t, m, c]
-  ), h = s.useCallback(
+    [t, d, s]
+  ), h = c.useCallback(
     (p) => {
       if (p.key === " " || p.key === "Space" || p.key === "Spacebar" || p.code === "Space" || p.key === "Enter") {
         p.preventDefault();
         const C = !r;
-        m(c(C, "change")), t?.(C);
+        d(s(C, "change")), t?.(C);
       }
     },
-    [t, r, m, c]
-  ), E = s.useCallback(
+    [t, r, d, s]
+  ), k = c.useCallback(
     (p) => {
-      m(c(p.target.checked, "blur"));
+      d(s(p.target.checked, "blur"));
     },
-    [m, c]
+    [d, s]
   ), v = e.name;
-  return /* @__PURE__ */ g(L, { field: e, rightAlign: !1, error: i, children: /* @__PURE__ */ z(
+  return /* @__PURE__ */ g(B, { field: e, rightAlign: !1, error: i, children: /* @__PURE__ */ z(
     "div",
     {
       style: {
@@ -956,7 +956,7 @@ const gr = ({
             checked: r,
             onChange: f,
             onKeyDown: h,
-            onBlur: E,
+            onBlur: k,
             "aria-checked": r,
             "aria-invalid": !!i,
             "aria-describedby": i ? `${e.name}-error` : void 0,
@@ -975,35 +975,43 @@ const gr = ({
   ) });
 };
 gr.displayName = "CheckboxInput";
-const xt = s.memo(gr);
-function K({ value: e, onChange: r, onError: t, validate: n }) {
-  const o = s.useRef(null), a = s.useRef(null), c = s.useRef(t), [l, i] = s.useState(null);
-  s.useEffect(() => {
-    c.current = t;
-  }, [t]), s.useEffect(() => {
-    const m = String(e ?? "");
-    if (!(document.activeElement === o.current)) {
-      const h = n(m, "sync");
-      h !== a.current && (a.current = h, c.current?.(h ?? null), i(h)), o.current && o.current.value !== m && (o.current.value = m);
+const xt = c.memo(gr);
+function K({ value: e, disabled: r, onChange: t, onError: n, validate: o }) {
+  const a = c.useRef(null), s = c.useRef(null), l = c.useRef(n), [i, u] = c.useState(null);
+  c.useEffect(() => {
+    l.current = n;
+  }, [n]), c.useEffect(() => {
+    if (r) {
+      s.current !== null && (s.current = null, l.current?.(null), u(null));
+      return;
+    }
+    const f = String(e ?? "");
+    if (!(document.activeElement === a.current)) {
+      const k = o(f, "sync");
+      k !== s.current && (s.current = k, l.current?.(k ?? null), u(k)), a.current && a.current.value !== f && (a.current.value = f);
     }
-  }, [e, n]);
-  const u = s.useCallback(
-    (m) => {
-      const f = m.target.value, h = n(f, "change");
-      h !== a.current && (a.current = h, i(h), c.current?.(h ?? null)), r?.(f);
+  }, [e, o, r]);
+  const m = c.useCallback(
+    (f) => {
+      if (r)
+        return;
+      const h = f.target.value, k = o(h, "change");
+      k !== s.current && (s.current = k, u(k), l.current?.(k ?? null)), t?.(h);
     },
-    [r, n]
-  ), d = s.useCallback(() => {
-    const m = String(o.current?.value ?? e ?? ""), f = n(m, "blur");
-    f !== a.current && (a.current = f, i(f), c.current?.(f ?? null));
-  }, [n, e]);
-  return s.useEffect(() => {
-    const m = o.current;
-    if (m)
-      return m.addEventListener("blur", d), () => {
-        m.removeEventListener("blur", d);
+    [t, o, r]
+  ), d = c.useCallback(() => {
+    if (r)
+      return;
+    const f = String(a.current?.value ?? e ?? ""), h = o(f, "blur");
+    h !== s.current && (s.current = h, u(h), l.current?.(h ?? null));
+  }, [o, e, r]);
+  return c.useEffect(() => {
+    const f = a.current;
+    if (f)
+      return f.addEventListener("blur", d), () => {
+        f.removeEventListener("blur", d);
       };
-  }, [d]), { inputRef: o, error: l, handleChange: u, handleBlur: d };
+  }, [d]), { inputRef: a, error: i, handleChange: m, handleBlur: d };
 }
 const Ge = [
   { label: "Black", value: "#000000" },
@@ -1038,42 +1046,42 @@ const Ge = [
   onError: n,
   error: o
 }) => {
-  const { t: a } = j(), c = T(e, o), l = s.useMemo(
+  const { t: a } = j(), s = T(e, o), l = c.useMemo(
     () => be(r),
     [r]
-  ), { inputRef: i, error: u, handleChange: d, handleBlur: m } = K({
+  ), { inputRef: i, error: u, handleChange: m, handleBlur: d } = K({
     value: l,
     onChange: t,
     onError: n,
-    validate: c
-  }), [f, h] = s.useState(l);
-  s.useEffect(() => {
+    validate: s
+  }), [f, h] = c.useState(l);
+  c.useEffect(() => {
     h(l);
   }, [l]);
-  const E = s.useCallback(
+  const k = c.useCallback(
     (I) => {
       const M = be(I.target.value);
-      h(M), d({
+      h(M), m({
         target: { value: M }
       });
     },
-    [d]
-  ), v = s.useCallback(
+    [m]
+  ), v = c.useCallback(
     (I) => {
       const M = be(I.target.value);
-      h(M), d({
+      h(M), m({
         target: { value: M }
       });
     },
-    [d]
-  ), y = s.useMemo(
+    [m]
+  ), y = c.useMemo(
     () => new Set(Ge.map((I) => I.value)),
     []
-  ).has(f), { r: C, g: V, b: A } = s.useMemo(
+  ).has(f), { r: C, g: V, b: A } = c.useMemo(
     () => kt(f),
     [f]
   );
-  return /* @__PURE__ */ g(L, { field: e, error: u, children: /* @__PURE__ */ z(
+  return /* @__PURE__ */ g(B, { field: e, error: u, children: /* @__PURE__ */ z(
     "div",
     {
       style: {
@@ -1089,7 +1097,7 @@ const Ge = [
             id: e.name,
             value: f,
             onChange: v,
-            onBlur: m,
+            onBlur: d,
             className: W(
               R.input,
               R.inputSelect
@@ -1129,8 +1137,8 @@ const Ge = [
                 id: `${e.name}-color`,
                 type: "color",
                 defaultValue: f,
-                onChange: E,
-                onBlur: m,
+                onChange: k,
+                onBlur: d,
                 style: { opacity: 0, width: "100%", height: "100%" },
                 "aria-invalid": !!u
               }
@@ -1142,7 +1150,7 @@ const Ge = [
   ) });
 };
 hr.displayName = "ColorInput";
-const Nt = s.memo(hr), Je = (e) => {
+const Nt = c.memo(hr), Je = (e) => {
   if (!e) return null;
   const r = new Date(e);
   return isNaN(r.getTime()) ? null : r;
@@ -1163,13 +1171,13 @@ const Nt = s.memo(hr), Je = (e) => {
   onError: n,
   error: o
 }) => {
-  const a = T(e, o), c = Ye(r), { inputRef: l, error: i, handleChange: u } = K({
-    value: c,
+  const a = T(e, o), s = Ye(r), { inputRef: l, error: i, handleChange: u } = K({
+    value: s,
     onChange: t,
     onError: n,
     validate: a
   });
-  return /* @__PURE__ */ g(L, { field: e, error: i, children: /* @__PURE__ */ g(
+  return /* @__PURE__ */ g(B, { field: e, error: i, children: /* @__PURE__ */ g(
     "input",
     {
       id: e.name,
@@ -1186,7 +1194,7 @@ const Nt = s.memo(hr), Je = (e) => {
   ) });
 };
 br.displayName = "DateInput";
-const Et = s.memo(br), yr = ({ field: e }) => {
+const Et = c.memo(br), yr = ({ field: e }) => {
   const { t: r } = j(), { displayText: t = "", textAlign: n = "left", allowHtml: o = !1 } = e;
   return /* @__PURE__ */ g(
     "div",
@@ -1198,45 +1206,45 @@ const Et = s.memo(br), yr = ({ field: e }) => {
   );
 };
 yr.displayName = "Description";
-const It = s.memo(yr), vr = ({
+const It = c.memo(yr), vr = ({
   field: e,
   value: r,
   onChange: t,
   onError: n,
   error: o
 }) => {
-  const { t: a, theme: c, formStyle: l, fieldStyle: i } = j(), u = s.useRef(null), d = s.useRef(n), [m, f] = s.useState(!1), [h, E] = s.useState(null);
-  s.useEffect(() => {
-    d.current = n;
+  const { t: a, theme: s, formStyle: l, fieldStyle: i } = j(), u = c.useRef(null), m = c.useRef(n), [d, f] = c.useState(!1), [h, k] = c.useState(null);
+  c.useEffect(() => {
+    m.current = n;
   }, [n]);
-  const v = T(e, o), [p, y] = s.useState(null), C = s.useRef(null);
-  s.useEffect(() => {
-    const N = String(r ?? "");
-    let w = v(N, "sync");
+  const v = T(e, o), [p, y] = c.useState(null), C = c.useRef(null);
+  c.useEffect(() => {
+    const E = String(r ?? "");
+    let w = v(E, "sync");
     if (w && e.options.length > 0) {
       const S = String(e.options[0].value);
       t?.(S), w = null;
     }
-    w !== C.current && (C.current = w, y(w), d.current?.(w ?? null));
+    w !== C.current && (C.current = w, y(w), m.current?.(w ?? null));
   }, [r, v, t, e.options]);
   const V = () => {
     if (!u.current) return;
-    const N = u.current.getBoundingClientRect();
-    E({ x: N.left, y: N.bottom }), f((w) => !w);
-  }, A = (N) => {
-    const w = v(N, "change");
-    w !== C.current && (C.current = w, y(w), d.current?.(w ?? null)), t?.(N), f(!1);
-  }, I = s.useCallback(() => {
-    const N = v(String(r ?? ""), "blur");
-    N !== C.current && (C.current = N, y(N), d.current?.(N ?? null));
-  }, [v, r]), M = s.useMemo(() => {
-    const N = e.options.find((w) => String(w.value) === String(r));
-    return N ? a(N.label) : "";
-  }, [e.options, r, a]), F = (N, w, S) => {
+    const E = u.current.getBoundingClientRect();
+    k({ x: E.left, y: E.bottom }), f((w) => !w);
+  }, A = (E) => {
+    const w = v(E, "change");
+    w !== C.current && (C.current = w, y(w), m.current?.(w ?? null)), t?.(E), f(!1);
+  }, I = c.useCallback(() => {
+    const E = v(String(r ?? ""), "blur");
+    E !== C.current && (C.current = E, y(E), m.current?.(E ?? null));
+  }, [v, r]), M = c.useMemo(() => {
+    const E = e.options.find((w) => String(w.value) === String(r));
+    return E ? a(E.label) : "";
+  }, [e.options, r, a]), F = (E, w, S) => {
     if (!w) return {};
-    const $ = N?.[w];
+    const $ = E?.[w];
     return (S && $ ? $[S] : void 0) ?? {};
-  }, b = s.useMemo(() => ({
+  }, b = c.useMemo(() => ({
     height: "var(--reactaform-input-height, 2.5em)",
     display: "flex",
     alignItems: "center",
@@ -1247,7 +1255,7 @@ const It = s.memo(yr), vr = ({
     textAlign: "left",
     ...F(l, "dropdown", "control"),
     ...F(i, void 0, "control")
-  }), [l, i]), x = s.useMemo(() => ({
+  }), [l, i]), x = c.useMemo(() => ({
     position: "absolute",
     right: "0.7em",
     top: "50%",
@@ -1259,7 +1267,7 @@ const It = s.memo(yr), vr = ({
     ...F(i, void 0, "arrow")
   }), [l, i]);
   return /* @__PURE__ */ z("div", { children: [
-    /* @__PURE__ */ g(L, { field: e, error: p, children: /* @__PURE__ */ z(
+    /* @__PURE__ */ g(B, { field: e, error: p, children: /* @__PURE__ */ z(
       "div",
       {
         ref: u,
@@ -1269,11 +1277,11 @@ const It = s.memo(yr), vr = ({
         tabIndex: 0,
         role: "combobox",
         "aria-haspopup": "listbox",
-        "aria-expanded": m,
+        "aria-expanded": d,
         "aria-invalid": !!p,
         "aria-describedby": p ? `${e.name}-error` : void 0,
-        onKeyDown: (N) => {
-          (N.key === "Enter" || N.key === " ") && (N.preventDefault(), V());
+        onKeyDown: (E) => {
+          (E.key === "Enter" || E.key === " ") && (E.preventDefault(), V());
         },
         onBlur: I,
         children: [
@@ -1282,7 +1290,7 @@ const It = s.memo(yr), vr = ({
         ]
       }
     ) }),
-    m && h && /* @__PURE__ */ g(
+    d && h && /* @__PURE__ */ g(
       Ft,
       {
         position: h,
@@ -1291,7 +1299,7 @@ const It = s.memo(yr), vr = ({
         onSelect: A,
         onClose: () => f(!1),
         controlRef: u,
-        theme: c,
+        theme: s,
         t: a
       }
     )
@@ -1303,32 +1311,32 @@ const It = s.memo(yr), vr = ({
   onSelect: n,
   onClose: o,
   controlRef: a,
-  theme: c,
+  theme: s,
   t: l
 }) => {
-  const i = s.useRef(null), [u, d] = s.useState(-1), { formStyle: m, fieldStyle: f } = j(), h = ce(c ?? "light");
-  s.useLayoutEffect(() => {
+  const i = c.useRef(null), [u, m] = c.useState(-1), { formStyle: d, fieldStyle: f } = j(), h = ce(s ?? "light");
+  c.useLayoutEffect(() => {
     if (!a.current) return;
     const b = a.current.closest("[data-reactaform-theme]"), x = document.getElementById("popup-root");
     if (b && x) {
-      const N = getComputedStyle(b);
+      const E = getComputedStyle(b);
       x.style.setProperty(
         "--reactaform-secondary-bg",
-        N.getPropertyValue("--reactaform-secondary-bg")
+        E.getPropertyValue("--reactaform-secondary-bg")
       ), x.style.setProperty(
         "--reactaform-text-color",
-        N.getPropertyValue("--reactaform-text-color")
+        E.getPropertyValue("--reactaform-text-color")
       ), x.style.setProperty(
         "--reactaform-option-menu-hover-bg",
-        N.getPropertyValue("--reactaform-option-menu-hover-bg")
+        E.getPropertyValue("--reactaform-option-menu-hover-bg")
       );
     }
   }, [a]);
-  const E = (b, x, N) => {
+  const k = (b, x, E) => {
     if (!x) return {};
     const S = b?.[x];
-    return (N && S ? S[N] : void 0) ?? {};
-  }, v = s.useMemo(() => ({
+    return (E && S ? S[E] : void 0) ?? {};
+  }, v = c.useMemo(() => ({
     maxHeight: 200,
     overflowY: "auto",
     background: "var(--reactaform-secondary-bg, #fff)",
@@ -1339,51 +1347,51 @@ const It = s.memo(yr), vr = ({
     pointerEvents: "auto",
     color: "var(--reactaform-text-color, #000)",
     fontSize: "var(--reactaform-popup-font-size, 0.875rem)",
-    ...E(m, "dropdown", "popup"),
-    ...E(f, void 0, "popup")
-  }), [m, f]), p = s.useMemo(() => ({
+    ...k(d, "dropdown", "popup"),
+    ...k(f, void 0, "popup")
+  }), [d, f]), p = c.useMemo(() => ({
     padding: "6px 8px",
     cursor: "pointer",
     display: "flex",
     alignItems: "center",
     background: "transparent",
     color: "var(--reactaform-text-color, #000)",
-    ...E(m, "dropdown", "option"),
-    ...E(f, void 0, "option")
-  }), [m, f]);
-  s.useEffect(() => {
+    ...k(d, "dropdown", "option"),
+    ...k(f, void 0, "option")
+  }), [d, f]);
+  c.useEffect(() => {
     const b = (x) => {
-      const N = x.target;
-      !i.current?.contains(N) && !a.current?.contains(N) && o();
+      const E = x.target;
+      !i.current?.contains(E) && !a.current?.contains(E) && o();
     };
     return document.addEventListener("mousedown", b), () => document.removeEventListener("mousedown", b);
-  }, [o, a]), s.useEffect(() => {
+  }, [o, a]), c.useEffect(() => {
     if (i.current && r.length > 0) {
       const b = r.findIndex((x) => String(x.value) === t);
-      requestAnimationFrame(() => d(b >= 0 ? b : 0));
+      requestAnimationFrame(() => m(b >= 0 ? b : 0));
     }
-  }, [r, t]), s.useEffect(() => {
+  }, [r, t]), c.useEffect(() => {
     if (!i.current || u < 0) return;
     const b = i.current.querySelector(`#opt-${u}`);
     b && requestAnimationFrame(() => b.focus());
   }, [u]);
-  const y = 250, C = 200, [V, A] = s.useState(null), [I, M] = s.useState(null);
-  if (s.useEffect(() => {
+  const y = 250, C = 200, [V, A] = c.useState(null), [I, M] = c.useState(null);
+  if (c.useEffect(() => {
     if (typeof window > "u") return;
     const b = () => {
-      let w = e.x, S = e.y, k = y;
+      let w = e.x, S = e.y, N = y;
       const $ = a?.current;
       if ($) {
-        const O = $.getBoundingClientRect();
-        w = O.left, S = O.bottom, k = Math.max(80, Math.round(O.width));
+        const L = $.getBoundingClientRect();
+        w = L.left, S = L.bottom, N = Math.max(80, Math.round(L.width));
       }
-      w = Math.min(w, window.innerWidth - k), S = Math.min(S, window.innerHeight - C), A({ left: w, top: S }), M(k);
+      w = Math.min(w, window.innerWidth - N), S = Math.min(S, window.innerHeight - C), A({ left: w, top: S }), M(N);
     };
     b(), window.addEventListener("scroll", b, !0), window.addEventListener("resize", b);
     let x = null;
-    const N = a?.current;
-    return typeof ResizeObserver < "u" && N && (x = new ResizeObserver(() => b()), x.observe(N)), () => {
-      window.removeEventListener("scroll", b, !0), window.removeEventListener("resize", b), x && N && x.unobserve(N);
+    const E = a?.current;
+    return typeof ResizeObserver < "u" && E && (x = new ResizeObserver(() => b()), x.observe(E)), () => {
+      window.removeEventListener("scroll", b, !0), window.removeEventListener("resize", b), x && E && x.unobserve(E);
     };
   }, [a, e.x, e.y]), typeof window > "u") return null;
   let F = document.getElementById("popup-root");
@@ -1401,53 +1409,53 @@ const It = s.memo(yr), vr = ({
           width: I ?? y,
           ...v
         },
-        "data-reactaform-theme": c ?? "light",
+        "data-reactaform-theme": s ?? "light",
         children: r.map((b, x) => {
-          const N = String(b.value) === t, w = h ? "var(--reactaform-option-menu-hover-bg, rgba(255,255,255,0.01))" : "var(--reactaform-option-menu-hover-bg, #eee)", S = {
+          const E = String(b.value) === t, w = h ? "var(--reactaform-option-menu-hover-bg, rgba(255,255,255,0.01))" : "var(--reactaform-option-menu-hover-bg, #eee)", S = {
             ...p,
             background: x === u ? w : p.background,
-            fontWeight: N ? "bold" : "normal"
+            fontWeight: E ? "bold" : "normal"
           };
           return /* @__PURE__ */ g(
             "div",
             {
               id: `opt-${x}`,
-              onMouseDown: (k) => {
-                k.stopPropagation(), n(String(b.value));
+              onMouseDown: (N) => {
+                N.stopPropagation(), n(String(b.value));
               },
-              onKeyDown: (k) => {
+              onKeyDown: (N) => {
                 const $ = r.length;
-                switch (k.key) {
+                switch (N.key) {
                   case "ArrowDown":
-                    k.preventDefault(), d((O) => (O + 1) % $);
+                    N.preventDefault(), m((L) => (L + 1) % $);
                     break;
                   case "ArrowUp":
-                    k.preventDefault(), d((O) => (O - 1 + $) % $);
+                    N.preventDefault(), m((L) => (L - 1 + $) % $);
                     break;
                   case "Home":
-                    k.preventDefault(), d(0);
+                    N.preventDefault(), m(0);
                     break;
                   case "End":
-                    k.preventDefault(), d($ - 1);
+                    N.preventDefault(), m($ - 1);
                     break;
                   case "Enter":
                   case " ":
-                    k.preventDefault(), k.stopPropagation(), n(String(b.value));
+                    N.preventDefault(), N.stopPropagation(), n(String(b.value));
                     break;
                   case "Escape":
-                    k.preventDefault(), o(), a?.current?.focus();
+                    N.preventDefault(), o(), a?.current?.focus();
                     break;
                 }
               },
               tabIndex: x === u ? 0 : -1,
               role: "option",
-              "aria-selected": N,
+              "aria-selected": E,
               style: S,
-              onMouseEnter: (k) => {
-                k.currentTarget.style.background = w, d(x);
+              onMouseEnter: (N) => {
+                N.currentTarget.style.background = w, m(x);
               },
-              onMouseLeave: (k) => {
-                k.currentTarget.style.background = "transparent", d(($) => $ === x ? -1 : $);
+              onMouseLeave: (N) => {
+                N.currentTarget.style.background = "transparent", m(($) => $ === x ? -1 : $);
               },
               children: l(b.label)
             },
@@ -1460,26 +1468,26 @@ const It = s.memo(yr), vr = ({
   );
 };
 vr.displayName = "DropdownInput";
-const Mt = s.memo(vr), xr = ({
+const Mt = c.memo(vr), xr = ({
   field: e,
   value: r,
   onChange: t,
   onError: n,
   error: o
 }) => {
-  const a = T(e, o), { inputRef: c, error: l, handleChange: i } = K({
+  const a = T(e, o), { inputRef: s, error: l, handleChange: i } = K({
     value: r,
     onChange: t,
     onError: n,
     validate: a
   });
-  return /* @__PURE__ */ g(L, { field: e, error: l, children: /* @__PURE__ */ g(
+  return /* @__PURE__ */ g(B, { field: e, error: l, children: /* @__PURE__ */ g(
     "input",
     {
       id: e.name,
       type: "email",
       defaultValue: String(r ?? ""),
-      ref: c,
+      ref: s,
       onChange: i,
       className: W(R.input, R.textInput),
       "aria-invalid": !!l,
@@ -1488,7 +1496,7 @@ const Mt = s.memo(vr), xr = ({
   ) });
 };
 xr.displayName = "EmailInput";
-const Vt = s.memo(xr), wr = ({ field: e }) => {
+const Vt = c.memo(xr), wr = ({ field: e }) => {
   const { theme: r } = j(), {
     color: t = ce(r) ? "#444444" : "#CCCCCC",
     thickness: n = 1,
@@ -1508,46 +1516,46 @@ const Vt = s.memo(xr), wr = ({ field: e }) => {
   );
 };
 wr.displayName = "FieldSeparator";
-const $t = s.memo(wr), Sr = ({ field: e, value: r, onChange: t, onError: n, error: o }) => {
-  const { t: a, theme: c } = j(), [l, i] = s.useState(!1), u = s.useRef(null), d = s.useRef(n), m = s.useRef(null), [f, h] = s.useState(null), E = ce(c);
-  s.useEffect(() => {
-    d.current = n;
+const $t = c.memo(wr), Sr = ({ field: e, value: r, onChange: t, onError: n, error: o }) => {
+  const { t: a, theme: s } = j(), [l, i] = c.useState(!1), u = c.useRef(null), m = c.useRef(n), d = c.useRef(null), [f, h] = c.useState(null), k = ce(s);
+  c.useEffect(() => {
+    m.current = n;
   }, [n]);
   const v = (w, S) => S.some(
-    (k) => k.name === w.name && k.size === w.size && k.lastModified === w.lastModified
-  ), p = T(e, o), y = s.useCallback((w) => {
-    w !== m.current && (m.current = w, h(w), d.current?.(w ?? null));
+    (N) => N.name === w.name && N.size === w.size && N.lastModified === w.lastModified
+  ), p = T(e, o), y = c.useCallback((w) => {
+    w !== d.current && (d.current = w, h(w), m.current?.(w ?? null));
   }, []);
-  s.useEffect(() => {
+  c.useEffect(() => {
     const w = p(r ?? [], "sync");
     t?.(r), y(w);
   }, [r, p, y]);
   const C = (w) => {
     const S = w.target.files;
-    let k = null;
+    let N = null;
     if (S && S.length > 0) {
-      const O = Array.from(S);
+      const L = Array.from(S);
       if (e.multiple) {
-        const q = Array.isArray(r) ? r : [], Y = O.filter((te) => !v(te, q));
-        k = [...q, ...Y];
+        const q = Array.isArray(r) ? r : [], X = L.filter((te) => !v(te, q));
+        N = [...q, ...X];
       } else
-        k = O[0];
+        N = L[0];
     }
-    const $ = p(k ?? [], "change");
-    y($), t?.(k), w.target && (w.target.value = "");
+    const $ = p(N ?? [], "change");
+    y($), t?.(N), w.target && (w.target.value = "");
   }, V = (w) => {
     w.preventDefault(), w.stopPropagation(), i(!1);
     const S = w.dataTransfer.files;
     if (S && S.length > 0) {
-      const k = Array.from(S);
+      const N = Array.from(S);
       let $ = null;
       if (e.multiple) {
-        const q = Array.isArray(r) ? r : [], Y = k.filter((te) => !v(te, q));
-        $ = [...q, ...Y];
+        const q = Array.isArray(r) ? r : [], X = N.filter((te) => !v(te, q));
+        $ = [...q, ...X];
       } else
-        $ = k[0];
-      const O = p($, "change");
-      y(O), t?.($);
+        $ = N[0];
+      const L = p($, "change");
+      y(L), t?.($);
     }
   }, A = (w) => {
     w.preventDefault(), w.stopPropagation(), i(!0);
@@ -1555,13 +1563,13 @@ const $t = s.memo(wr), Sr = ({ field: e, value: r, onChange: t, onError: n, erro
     w.preventDefault(), w.stopPropagation(), i(!1);
   }, M = (w) => {
     if (Array.isArray(r) && typeof w == "number") {
-      const S = r.filter((O, q) => q !== w), k = S.length > 0 ? S : null, $ = p(k ?? [], "change");
-      y($), t?.(k);
+      const S = r.filter((L, q) => q !== w), N = S.length > 0 ? S : null, $ = p(N ?? [], "change");
+      y($), t?.(N);
     } else {
       const S = p([], "change");
       y(S), t?.(null);
     }
-  }, F = s.useCallback(() => {
+  }, F = c.useCallback(() => {
     y(p(r ?? [], "blur"));
   }, [y, p, r]), b = () => {
     const w = Array.isArray(r) ? r : r ? [r] : [];
@@ -1573,7 +1581,7 @@ const $t = s.memo(wr), Sr = ({ field: e, value: r, onChange: t, onError: n, erro
       gap: "6px",
       maxHeight: "200px",
       overflowY: "auto"
-    }, children: w.map((S, k) => /* @__PURE__ */ z(
+    }, children: w.map((S, N) => /* @__PURE__ */ z(
       "div",
       {
         style: {
@@ -1603,7 +1611,7 @@ const $t = s.memo(wr), Sr = ({ field: e, value: r, onChange: t, onError: n, erro
             "button",
             {
               type: "button",
-              onClick: () => M(Array.isArray(r) ? k : void 0),
+              onClick: () => M(Array.isArray(r) ? N : void 0),
               "aria-label": a("Remove file"),
               style: {
                 background: "transparent",
@@ -1628,10 +1636,10 @@ const $t = s.memo(wr), Sr = ({ field: e, value: r, onChange: t, onError: n, erro
           )
         ]
       },
-      `${S.name}-${k}`
+      `${S.name}-${N}`
     )) });
-  }, [x, N] = s.useState(!1);
-  return /* @__PURE__ */ g(L, { field: e, error: f, children: /* @__PURE__ */ z("div", { style: { width: "100%" }, children: [
+  }, [x, E] = c.useState(!1);
+  return /* @__PURE__ */ g(B, { field: e, error: f, children: /* @__PURE__ */ z("div", { style: { width: "100%" }, children: [
     /* @__PURE__ */ z(
       "div",
       {
@@ -1639,8 +1647,8 @@ const $t = s.memo(wr), Sr = ({ field: e, value: r, onChange: t, onError: n, erro
         onDrop: V,
         onDragOver: A,
         onDragLeave: I,
-        onMouseEnter: () => N(!0),
-        onMouseLeave: () => N(!1),
+        onMouseEnter: () => E(!0),
+        onMouseLeave: () => E(!1),
         onBlur: F,
         style: {
           position: "relative",
@@ -1650,7 +1658,7 @@ const $t = s.memo(wr), Sr = ({ field: e, value: r, onChange: t, onError: n, erro
           borderRadius: "var(--reactaform-border-radius, 4px)",
           padding: "8px 12px",
           textAlign: "center",
-          backgroundColor: l ? `var(--reactaform-bg-hover, ${E ? "#070707" : "#eff6ff"})` : void 0,
+          backgroundColor: l ? `var(--reactaform-bg-hover, ${k ? "#070707" : "#eff6ff"})` : void 0,
           transition: "all 0.2s ease",
           cursor: "pointer",
           minHeight: "var(--reactaform-input-height, 34px)",
@@ -1708,25 +1716,25 @@ const $t = s.memo(wr), Sr = ({ field: e, value: r, onChange: t, onError: n, erro
   ] }) });
 };
 Sr.displayName = "FileInput";
-const Rt = s.memo(Sr), Cr = ({
+const Rt = c.memo(Sr), Cr = ({
   field: e,
   value: r,
   onChange: t,
   onError: n,
   error: o
 }) => {
-  const a = T(e, o), c = Array.isArray(r) ? r.join(", ") : String(r ?? ""), { inputRef: l, error: i, handleChange: u } = K({
-    value: c,
+  const a = T(e, o), s = Array.isArray(r) ? r.join(", ") : String(r ?? ""), { inputRef: l, error: i, handleChange: u } = K({
+    value: s,
     onChange: t,
     onError: n,
     validate: a
   });
-  return /* @__PURE__ */ g(L, { field: e, error: i, children: /* @__PURE__ */ g(
+  return /* @__PURE__ */ g(B, { field: e, error: i, children: /* @__PURE__ */ g(
     "input",
     {
       id: e.name,
       type: "text",
-      defaultValue: c,
+      defaultValue: s,
       ref: l,
       onChange: u,
       className: W(R.input, R.textInput),
@@ -1737,25 +1745,25 @@ const Rt = s.memo(Sr), Cr = ({
   ) });
 };
 Cr.displayName = "FloatArrayInput";
-const At = s.memo(Cr), kr = ({
+const At = c.memo(Cr), kr = ({
   field: e,
   value: r,
   onChange: t,
   onError: n,
   error: o
 }) => {
-  const a = T(e, o), { inputRef: c, error: l, handleChange: i } = K({
+  const a = T(e, o), { inputRef: s, error: l, handleChange: i } = K({
     value: r,
     onChange: t,
     onError: n,
     validate: a
   });
-  return /* @__PURE__ */ g(L, { field: e, error: l, children: /* @__PURE__ */ g(
+  return /* @__PURE__ */ g(B, { field: e, error: l, children: /* @__PURE__ */ g(
     "input",
     {
       id: e.name,
       type: "text",
-      ref: c,
+      ref: s,
       defaultValue: String(r ?? ""),
       onChange: i,
       className: W(
@@ -1768,7 +1776,7 @@ const At = s.memo(Cr), kr = ({
   ) });
 };
 kr.displayName = "FloatInput";
-const Dt = s.memo(kr);
+const Dt = c.memo(kr);
 function zt() {
   try {
     return "/";
@@ -1786,11 +1794,11 @@ const Nr = ({ field: e, value: r }) => {
     left: "flex-start",
     center: "center",
     right: "flex-end"
-  }, c = typeof r == "string" ? r : "";
-  let l = c && c.trim() !== "" ? c : typeof e.defaultValue == "string" ? e.defaultValue : "";
+  }, s = typeof r == "string" ? r : "";
+  let l = s && s.trim() !== "" ? s : typeof e.defaultValue == "string" ? e.defaultValue : "";
   l && !l.startsWith("/") && (l = `${zt()}${l}`);
-  const i = e.localized?.split(";").map((p) => p.trim()), [u, d] = s.useState(l || ""), m = s.useRef(l || null);
-  if (s.useEffect(() => {
+  const i = e.localized?.split(";").map((p) => p.trim()), [u, m] = c.useState(l || ""), d = c.useRef(l || null);
+  if (c.useEffect(() => {
     if (!l) return;
     const p = l.split("/"), y = p.pop(), C = y.lastIndexOf(".");
     if (C === -1) return;
@@ -1802,25 +1810,25 @@ const Nr = ({ field: e, value: r }) => {
       const F = [...p, I].join("/");
       fetch(F, { method: "HEAD", signal: M.signal }).then((b) => {
         const x = b.ok ? F : l;
-        x !== m.current && (m.current = x, d(x));
+        x !== d.current && (d.current = x, m(x));
       }).catch(() => {
-        l !== m.current && (m.current = l, d(l));
+        l !== d.current && (d.current = l, m(l));
       });
     } else {
       const F = l;
-      F !== m.current && (m.current = F, requestAnimationFrame(() => d(F)));
+      F !== d.current && (d.current = F, requestAnimationFrame(() => m(F)));
     }
     return () => {
       M.abort();
     };
   }, [l, t, i]), !u) return null;
-  const { width: f, height: h } = e, E = {}, v = {
+  const { width: f, height: h } = e, k = {}, v = {
     borderRadius: "8px",
     objectFit: "contain",
     boxShadow: "0 2px 6px rgba(0,0,0,0.1)",
     margin: "0 0 8px 0"
   };
-  return f && h ? (E.width = f, E.height = h, v.width = `${f}px`, v.height = `${h}px`) : f && !h ? (E.width = f, v.width = `${f}px`, v.height = "auto") : !f && h && (E.height = h, v.width = "auto", v.height = `${h}px`), /* @__PURE__ */ g(L, { field: e, children: /* @__PURE__ */ g(
+  return f && h ? (k.width = f, k.height = h, v.width = `${f}px`, v.height = `${h}px`) : f && !h ? (k.width = f, v.width = `${f}px`, v.height = "auto") : !f && h && (k.height = h, v.width = "auto", v.height = `${h}px`), /* @__PURE__ */ g(B, { field: e, children: /* @__PURE__ */ g(
     "div",
     {
       "data-testid": "image-wrapper",
@@ -1834,7 +1842,7 @@ const Nr = ({ field: e, value: r }) => {
         {
           src: u,
           alt: n?.(e.displayName || "Image") || e.displayName || "Image",
-          ...E,
+          ...k,
           style: v
         }
       )
@@ -1842,25 +1850,25 @@ const Nr = ({ field: e, value: r }) => {
   ) });
 };
 Nr.displayName = "ImageDisplay";
-const Pt = s.memo(Nr), Er = ({
+const Pt = c.memo(Nr), Er = ({
   field: e,
   value: r,
   onChange: t,
   onError: n,
   error: o
 }) => {
-  const a = T(e, o), c = Array.isArray(r) ? r.join(", ") : String(r ?? ""), { inputRef: l, error: i, handleChange: u } = K({
-    value: c,
+  const a = T(e, o), s = Array.isArray(r) ? r.join(", ") : String(r ?? ""), { inputRef: l, error: i, handleChange: u } = K({
+    value: s,
     onChange: t,
     onError: n,
     validate: a
   });
-  return /* @__PURE__ */ g(L, { field: e, error: i, children: /* @__PURE__ */ g(
+  return /* @__PURE__ */ g(B, { field: e, error: i, children: /* @__PURE__ */ g(
     "input",
     {
       id: e.name,
       type: "text",
-      defaultValue: c,
+      defaultValue: s,
       ref: l,
       onChange: u,
       className: W(R.input, R.textInput),
@@ -1871,26 +1879,26 @@ const Pt = s.memo(Nr), Er = ({
   ) });
 };
 Er.displayName = "IntegerArrayInput";
-const Bt = s.memo(Er), Ir = ({
+const Ot = c.memo(Er), Ir = ({
   field: e,
   value: r,
   onChange: t,
   onError: n,
   error: o
 }) => {
-  const a = T(e, o), { inputRef: c, error: l, handleChange: i } = K({
+  const a = T(e, o), { inputRef: s, error: l, handleChange: i } = K({
     value: r,
     onChange: t,
     onError: n,
     validate: a
   });
-  return /* @__PURE__ */ g(L, { field: e, error: l, children: /* @__PURE__ */ g(
+  return /* @__PURE__ */ g(B, { field: e, error: l, children: /* @__PURE__ */ g(
     "input",
     {
       id: e.name,
       type: "text",
       defaultValue: String(r ?? ""),
-      ref: c,
+      ref: s,
       onChange: i,
       className: W(R.input, R.inputNumber),
       "aria-invalid": !!l,
@@ -1899,25 +1907,25 @@ const Bt = s.memo(Er), Ir = ({
   ) });
 };
 Ir.displayName = "IntegerInput";
-const Lt = s.memo(Ir), Fr = ({
+const Bt = c.memo(Ir), Fr = ({
   field: e,
   value: r,
   onChange: t,
   onError: n,
   error: o
 }) => {
-  const a = T(e, o), { inputRef: c, error: l, handleChange: i } = K({
+  const a = T(e, o), { inputRef: s, error: l, handleChange: i } = K({
     value: r,
     onChange: t,
     onError: n,
     validate: a
   });
-  return /* @__PURE__ */ g(L, { field: e, error: l, children: /* @__PURE__ */ g(
+  return /* @__PURE__ */ g(B, { field: e, error: l, children: /* @__PURE__ */ g(
     "textarea",
     {
       id: e.name,
       defaultValue: String(r ?? ""),
-      ref: c,
+      ref: s,
       onChange: i,
       style: {
         resize: "vertical",
@@ -1932,45 +1940,45 @@ const Lt = s.memo(Ir), Fr = ({
   ) });
 };
 Fr.displayName = "MultilineTextInput";
-const Ot = s.memo(Fr), Mr = ({
+const Lt = c.memo(Fr), Mr = ({
   field: e,
   value: r,
   onChange: t,
   onError: n,
   error: o
 }) => {
-  const a = s.useRef(
+  const a = c.useRef(
     n
   );
-  s.useEffect(() => {
+  c.useEffect(() => {
     a.current = n;
   }, [n]);
-  const { t: c, theme: l, formStyle: i, fieldStyle: u } = j(), d = (S, k, $) => {
-    if (!k) return {};
-    const q = S?.[k];
+  const { t: s, theme: l, formStyle: i, fieldStyle: u } = j(), m = (S, N, $) => {
+    if (!N) return {};
+    const q = S?.[N];
     return ($ && q ? q[$] : void 0) ?? {};
-  }, m = s.useRef(null), [f, h] = s.useState(!1), [E, v] = s.useState(null), p = s.useMemo(
-    () => e.options.map((S) => ({ value: S.value, label: c(S.label) })),
-    [e.options, c]
-  ), y = s.useMemo(() => {
-    const S = Array.isArray(r) ? r : [], k = new Set(p.map(($) => $.value));
-    return S.filter(($) => k.has($));
-  }, [r, p]), C = T(e, o), [V, A] = s.useState(null), I = s.useRef(null);
-  s.useEffect(() => {
+  }, d = c.useRef(null), [f, h] = c.useState(!1), [k, v] = c.useState(null), p = c.useMemo(
+    () => e.options.map((S) => ({ value: S.value, label: s(S.label) })),
+    [e.options, s]
+  ), y = c.useMemo(() => {
+    const S = Array.isArray(r) ? r : [], N = new Set(p.map(($) => $.value));
+    return S.filter(($) => N.has($));
+  }, [r, p]), C = T(e, o), [V, A] = c.useState(null), I = c.useRef(null);
+  c.useEffect(() => {
     const S = C(Array.isArray(r) ? r : [], "sync");
     S !== I.current && (I.current = S, A(S), a.current?.(S ?? null));
   }, [r, C]);
   const M = () => {
-    if (!m.current) return;
-    const S = m.current.getBoundingClientRect();
-    v({ x: S.left, y: S.bottom }), h((k) => !k);
+    if (!d.current) return;
+    const S = d.current.getBoundingClientRect();
+    v({ x: S.left, y: S.bottom }), h((N) => !N);
   }, F = (S) => {
-    const k = y.includes(S) ? y.filter((O) => O !== S) : [...y, S], $ = C(k, "change");
-    $ !== I.current && (I.current = $, A($), a.current?.($ ?? null)), t?.(k);
-  }, b = s.useCallback(() => {
+    const N = y.includes(S) ? y.filter((L) => L !== S) : [...y, S], $ = C(N, "change");
+    $ !== I.current && (I.current = $, A($), a.current?.($ ?? null)), t?.(N);
+  }, b = c.useCallback(() => {
     const S = C(y, "blur");
     S !== I.current && (I.current = S, A(S), a.current?.(S ?? null));
-  }, [y, C]), x = s.useMemo(
+  }, [y, C]), x = c.useMemo(
     () => ({
       height: "var(--reactaform-input-height, 2.5rem)",
       display: "flex",
@@ -1978,11 +1986,11 @@ const Ot = s.memo(Fr), Mr = ({
       cursor: "pointer",
       position: "relative",
       textAlign: "left",
-      ...d(i, "multiSelect", "control"),
-      ...d(u, void 0, "control")
+      ...m(i, "multiSelect", "control"),
+      ...m(u, void 0, "control")
     }),
     [i, u]
-  ), N = s.useMemo(
+  ), E = c.useMemo(
     () => ({
       position: "absolute",
       right: "1.5em",
@@ -1994,11 +2002,11 @@ const Ot = s.memo(Fr), Mr = ({
       fontSize: "0.8em",
       color: "var(--reactaform-text-muted, #999)",
       padding: 0,
-      ...d(i, "multiSelect", "clearButton"),
-      ...d(u, void 0, "clearButton")
+      ...m(i, "multiSelect", "clearButton"),
+      ...m(u, void 0, "clearButton")
     }),
     [i, u]
-  ), w = s.useMemo(
+  ), w = c.useMemo(
     () => ({
       position: "absolute",
       right: "0.7em",
@@ -2007,16 +2015,16 @@ const Ot = s.memo(Fr), Mr = ({
       pointerEvents: "none",
       fontSize: "0.8em",
       color: "var(--reactaform-text-muted, #999)",
-      ...d(i, "multiSelect", "arrow"),
-      ...d(u, void 0, "arrow")
+      ...m(i, "multiSelect", "arrow"),
+      ...m(u, void 0, "arrow")
     }),
     [i, u]
   );
   return /* @__PURE__ */ z("div", { children: [
-    /* @__PURE__ */ g(L, { field: e, error: V, children: /* @__PURE__ */ g("div", { style: { width: "100%" }, children: /* @__PURE__ */ z(
+    /* @__PURE__ */ g(B, { field: e, error: V, children: /* @__PURE__ */ g("div", { style: { width: "100%" }, children: /* @__PURE__ */ z(
       "div",
       {
-        ref: m,
+        ref: d,
         className: "reactaform-multiselection-control reactaform-input",
         style: x,
         onClick: M,
@@ -2050,26 +2058,26 @@ const Ot = s.memo(Fr), Mr = ({
               "aria-label": "Clear selections",
               onClick: (S) => {
                 S.stopPropagation();
-                const k = C([], "change");
-                k !== I.current && (I.current = k, A(k), a.current?.(k ?? null)), t?.([]);
+                const N = C([], "change");
+                N !== I.current && (I.current = N, A(N), a.current?.(N ?? null)), t?.([]);
               },
-              style: N,
-              children: /* @__PURE__ */ g("span", { style: N, "aria-hidden": !0, children: "✖" })
+              style: E,
+              children: /* @__PURE__ */ g("span", { style: E, "aria-hidden": !0, children: "✖" })
             }
           ),
           /* @__PURE__ */ g("span", { style: w, "aria-hidden": !0, children: "▼" })
         ]
       }
     ) }) }),
-    f && E && /* @__PURE__ */ g(
+    f && k && /* @__PURE__ */ g(
       Tt,
       {
-        position: E,
+        position: k,
         options: p,
         selectedValues: y,
         onToggleOption: F,
         onClose: () => h(!1),
-        controlRef: m,
+        controlRef: d,
         theme: l
       }
     )
@@ -2081,10 +2089,10 @@ const Ot = s.memo(Fr), Mr = ({
   onToggleOption: n,
   onClose: o,
   controlRef: a,
-  theme: c
+  theme: s
 }) => {
-  const l = s.useRef(null), [i, u] = s.useState(-1), { formStyle: d, fieldStyle: m } = j(), f = ce(c ?? "light");
-  s.useLayoutEffect(() => {
+  const l = c.useRef(null), [i, u] = c.useState(-1), { formStyle: m, fieldStyle: d } = j(), f = ce(s ?? "light");
+  c.useLayoutEffect(() => {
     if (!a.current) return;
     const F = a.current.closest("[data-reactaform-theme]"), b = document.getElementById("popup-root");
     if (F && b) {
@@ -2105,7 +2113,7 @@ const Ot = s.memo(Fr), Mr = ({
     if (!b) return {};
     const w = F?.[b];
     return (x && w ? w[x] : void 0) ?? {};
-  }, E = s.useMemo(
+  }, k = c.useMemo(
     () => ({
       maxHeight: 200,
       overflowY: "auto",
@@ -2117,11 +2125,11 @@ const Ot = s.memo(Fr), Mr = ({
       pointerEvents: "auto",
       color: "var(--reactaform-text-color, #000)",
       fontSize: "var(--reactaform-popup-font-size, 0.875rem)",
-      ...h(d, "multiSelect", "popup"),
-      ...h(m, void 0, "popup")
+      ...h(m, "multiSelect", "popup"),
+      ...h(d, void 0, "popup")
     }),
-    [d, m]
-  ), v = s.useMemo(
+    [m, d]
+  ), v = c.useMemo(
     () => ({
       padding: "6px 8px",
       cursor: "pointer",
@@ -2129,39 +2137,39 @@ const Ot = s.memo(Fr), Mr = ({
       alignItems: "center",
       background: "transparent",
       color: "var(--reactaform-text-color, #000)",
-      ...h(d, "multiSelect", "option"),
-      ...h(m, void 0, "option")
+      ...h(m, "multiSelect", "option"),
+      ...h(d, void 0, "option")
     }),
-    [d, m]
+    [m, d]
   );
-  s.useEffect(() => {
+  c.useEffect(() => {
     const F = (b) => {
       const x = b.target;
       !l.current?.contains(x) && !a.current?.contains(x) && o();
     };
     return document.addEventListener("mousedown", F), () => document.removeEventListener("mousedown", F);
-  }, [o, a]), s.useEffect(() => {
+  }, [o, a]), c.useEffect(() => {
     l.current && r.length > 0 && requestAnimationFrame(
       () => u((F) => F === -1 ? 0 : F)
     );
-  }, [r.length]), s.useEffect(() => {
+  }, [r.length]), c.useEffect(() => {
     if (!l.current || i < 0) return;
     const F = l.current.querySelector(
       `#multi-opt-${i}`
     );
     F && requestAnimationFrame(() => F.focus());
   }, [i]);
-  const p = 250, y = 200, [C, V] = s.useState(null), [A, I] = s.useState(null);
-  if (s.useEffect(() => {
+  const p = 250, y = 200, [C, V] = c.useState(null), [A, I] = c.useState(null);
+  if (c.useEffect(() => {
     if (typeof window > "u") return;
     const F = () => {
-      let N = e.x, w = e.y, S = p;
-      const k = a?.current;
-      if (k) {
-        const $ = k.getBoundingClientRect();
-        N = $.left, w = $.bottom, S = Math.max(80, Math.round($.width));
+      let E = e.x, w = e.y, S = p;
+      const N = a?.current;
+      if (N) {
+        const $ = N.getBoundingClientRect();
+        E = $.left, w = $.bottom, S = Math.max(80, Math.round($.width));
       }
-      N = Math.min(N, window.innerWidth - S), w = Math.min(w, window.innerHeight - y), V({ left: N, top: w }), I(S);
+      E = Math.min(E, window.innerWidth - S), w = Math.min(w, window.innerHeight - y), V({ left: E, top: w }), I(S);
     };
     F(), window.addEventListener("scroll", F, !0), window.addEventListener("resize", F);
     let b = null;
@@ -2184,13 +2192,13 @@ const Ot = s.memo(Fr), Mr = ({
           left: C ? C.left : e.x,
           width: A ?? p,
           // spread the static popup styles
-          ...E
+          ...k
         },
-        "data-reactaform-theme": c ?? "light",
+        "data-reactaform-theme": s ?? "light",
         children: r.map((F, b) => {
-          const x = t.includes(F.value), N = f ? "var(--reactaform-option-menu-hover-bg, rgba(255,255,255,0.01))" : "var(--reactaform-option-menu-hover-bg, #eee)", w = {
+          const x = t.includes(F.value), E = f ? "var(--reactaform-option-menu-hover-bg, rgba(255,255,255,0.01))" : "var(--reactaform-option-menu-hover-bg, #eee)", w = {
             ...v,
-            background: b === i ? N : v.background
+            background: b === i ? E : v.background
           };
           return /* @__PURE__ */ z(
             "div",
@@ -2200,19 +2208,19 @@ const Ot = s.memo(Fr), Mr = ({
                 S.stopPropagation(), n(F.value);
               },
               onKeyDown: (S) => {
-                const k = r.length;
+                const N = r.length;
                 switch (S.key) {
                   case "ArrowDown":
-                    S.preventDefault(), u(($) => ($ + 1) % k);
+                    S.preventDefault(), u(($) => ($ + 1) % N);
                     break;
                   case "ArrowUp":
-                    S.preventDefault(), u(($) => ($ - 1 + k) % k);
+                    S.preventDefault(), u(($) => ($ - 1 + N) % N);
                     break;
                   case "Home":
                     S.preventDefault(), u(0);
                     break;
                   case "End":
-                    S.preventDefault(), u(k - 1);
+                    S.preventDefault(), u(N - 1);
                     break;
                   case "Enter":
                   case " ":
@@ -2228,10 +2236,10 @@ const Ot = s.memo(Fr), Mr = ({
               "aria-selected": x,
               style: w,
               onMouseEnter: (S) => {
-                S.currentTarget.style.background = N, u(b);
+                S.currentTarget.style.background = E, u(b);
               },
               onMouseLeave: (S) => {
-                S.currentTarget.style.background = "transparent", u((k) => k === b ? -1 : k);
+                S.currentTarget.style.background = "transparent", u((N) => N === b ? -1 : N);
               },
               children: [
                 /* @__PURE__ */ g(
@@ -2262,26 +2270,26 @@ const Ot = s.memo(Fr), Mr = ({
   );
 };
 Mr.displayName = "MultiSelect";
-const jt = s.memo(Mr), Vr = ({
+const jt = c.memo(Mr), Vr = ({
   field: e,
   value: r,
   onChange: t,
   onError: n,
   error: o
 }) => {
-  const a = T(e, o), { inputRef: c, error: l, handleChange: i } = K({
+  const a = T(e, o), { inputRef: s, error: l, handleChange: i } = K({
     value: String(r ?? ""),
     onChange: t,
     onError: n,
     validate: a
   }), u = Math.max(1, Math.round(e.step ?? 1));
-  return /* @__PURE__ */ g(L, { field: e, error: l, children: /* @__PURE__ */ g(
+  return /* @__PURE__ */ g(B, { field: e, error: l, children: /* @__PURE__ */ g(
     "input",
     {
       id: e.name,
       type: "number",
       defaultValue: String(r ?? ""),
-      ref: c,
+      ref: s,
       min: e.min ?? void 0,
       max: e.max ?? void 0,
       step: u,
@@ -2297,26 +2305,26 @@ const jt = s.memo(Mr), Vr = ({
   ) });
 };
 Vr.displayName = "NumericStepperInput";
-const Ht = s.memo(Vr), $r = ({
+const Ht = c.memo(Vr), $r = ({
   field: e,
   value: r,
   onChange: t,
   onError: n,
   error: o
 }) => {
-  const a = T(e, o), { inputRef: c, error: l, handleChange: i } = K({
+  const a = T(e, o), { inputRef: s, error: l, handleChange: i } = K({
     value: r,
     onChange: t,
     onError: n,
     validate: a
   });
-  return /* @__PURE__ */ g(L, { field: e, error: l, children: /* @__PURE__ */ g(
+  return /* @__PURE__ */ g(B, { field: e, error: l, children: /* @__PURE__ */ g(
     "input",
     {
       id: e.name,
       type: "tel",
       defaultValue: String(r ?? ""),
-      ref: c,
+      ref: s,
       onChange: i,
       className: W(R.input, R.textInput),
       "aria-invalid": !!l,
@@ -2325,40 +2333,40 @@ const Ht = s.memo(Vr), $r = ({
   ) });
 };
 $r.displayName = "PhoneInput";
-const qt = s.memo($r), Rr = ({
+const qt = c.memo($r), Rr = ({
   field: e,
   value: r,
   onChange: t,
   onError: n,
   error: o
 }) => {
-  const { t: a } = j(), c = T(e, o), l = e.layout?.toLowerCase() === "horizontal" ? "row" : "column", i = s.useRef(n);
-  s.useEffect(() => {
+  const { t: a } = j(), s = T(e, o), l = e.layout?.toLowerCase() === "horizontal" ? "row" : "column", i = c.useRef(n);
+  c.useEffect(() => {
     i.current = n;
   }, [n]);
-  const [u, d] = s.useState(null), m = s.useRef(null), f = s.useCallback(
+  const [u, m] = c.useState(null), d = c.useRef(null), f = c.useCallback(
     (y) => {
-      y !== m.current && (m.current = y, d(y), i.current?.(y));
+      y !== d.current && (d.current = y, m(y), i.current?.(y));
     },
     []
   );
-  s.useEffect(() => {
-    const y = r != null ? String(r) : "", C = c(y, "sync");
+  c.useEffect(() => {
+    const y = r != null ? String(r) : "", C = s(y, "sync");
     if (C && e.options.length > 0) {
       const V = String(e.options[0].value);
       t?.(V);
     }
     f(C);
-  }, [r, e.options, c, t, f]);
+  }, [r, e.options, s, t, f]);
   const h = (y) => {
-    const C = y.target.value, V = c(C, "change");
+    const C = y.target.value, V = s(C, "change");
     f(V), t?.(C);
-  }, E = s.useCallback(
+  }, k = c.useCallback(
     (y) => {
-      const C = c(y.target.value, "blur");
+      const C = s(y.target.value, "blur");
       f(C);
     },
-    [c, f]
+    [s, f]
   ), v = {
     display: "flex",
     flexDirection: l,
@@ -2378,7 +2386,7 @@ const qt = s.memo($r), Rr = ({
     width: l === "column" ? "100%" : void 0,
     justifyContent: "flex-start"
   };
-  return /* @__PURE__ */ g(L, { field: e, error: u, children: /* @__PURE__ */ g(
+  return /* @__PURE__ */ g(B, { field: e, error: u, children: /* @__PURE__ */ g(
     "div",
     {
       className: R.input,
@@ -2406,7 +2414,7 @@ const qt = s.memo($r), Rr = ({
                   value: C,
                   checked: String(r ?? "") === C,
                   onChange: h,
-                  onBlur: E,
+                  onBlur: k,
                   style: { width: "1.1em", height: "1.1em" }
                 }
               ),
@@ -2431,7 +2439,7 @@ const qt = s.memo($r), Rr = ({
   ) });
 };
 Rr.displayName = "RadioInput";
-const Ut = s.memo(Rr), Wt = {
+const Ut = c.memo(Rr), Wt = {
   display: "flex",
   gap: 4
 }, _t = {
@@ -2443,28 +2451,28 @@ const Ut = s.memo(Rr), Wt = {
   userSelect: "none",
   transition: "color 0.12s ease"
 }, Ar = ({ field: e, value: r, onChange: t, onError: n, error: o }) => {
-  const { t: a } = j(), c = T(e, o), l = e.max ?? 5, i = e.icon?.trim() || "★", [u, d] = s.useState(null), m = s.useRef([]), [f, h] = s.useState(null), E = s.useRef(null), v = s.useRef(n);
-  s.useEffect(() => {
+  const { t: a } = j(), s = T(e, o), l = e.max ?? 5, i = e.icon?.trim() || "★", [u, m] = c.useState(null), d = c.useRef([]), [f, h] = c.useState(null), k = c.useRef(null), v = c.useRef(n);
+  c.useEffect(() => {
     v.current = n;
   }, [n]);
-  const p = s.useCallback((I) => {
-    I !== E.current && (E.current = I, h(I), v.current?.(I ?? null));
-  }, []), y = s.useMemo(() => Math.min(Math.max(r ?? 0, 0), l), [r, l]);
-  s.useEffect(() => {
-    p(c(y, "sync") ?? null);
-  }, [c, y, p]);
-  const C = s.useCallback(
+  const p = c.useCallback((I) => {
+    I !== k.current && (k.current = I, h(I), v.current?.(I ?? null));
+  }, []), y = c.useMemo(() => Math.min(Math.max(r ?? 0, 0), l), [r, l]);
+  c.useEffect(() => {
+    p(s(y, "sync") ?? null);
+  }, [s, y, p]);
+  const C = c.useCallback(
     (I) => {
       const M = Math.min(Math.max(I, 0), l);
-      p(c(M, "change") ?? null), t?.(M);
+      p(s(M, "change") ?? null), t?.(M);
     },
-    [l, t, p, c]
-  ), V = s.useCallback(
+    [l, t, p, s]
+  ), V = c.useCallback(
     (I) => {
-      I.currentTarget.contains(I.relatedTarget) || p(c(y, "blur") ?? null);
+      I.currentTarget.contains(I.relatedTarget) || p(s(y, "blur") ?? null);
     },
-    [y, p, c]
-  ), A = s.useCallback(
+    [y, p, s]
+  ), A = c.useCallback(
     (I, M) => {
       switch (I.key) {
         case "Enter":
@@ -2473,17 +2481,17 @@ const Ut = s.memo(Rr), Wt = {
           break;
         case "ArrowRight":
         case "ArrowUp":
-          I.preventDefault(), m.current[Math.min(l - 1, M + 1)]?.focus();
+          I.preventDefault(), d.current[Math.min(l - 1, M + 1)]?.focus();
           break;
         case "ArrowLeft":
         case "ArrowDown":
-          I.preventDefault(), m.current[Math.max(0, M - 1)]?.focus();
+          I.preventDefault(), d.current[Math.max(0, M - 1)]?.focus();
           break;
       }
     },
     [l, C]
   );
-  return /* @__PURE__ */ g(L, { field: e, error: f, children: /* @__PURE__ */ g(
+  return /* @__PURE__ */ g(B, { field: e, error: f, children: /* @__PURE__ */ g(
     "div",
     {
       role: "radiogroup",
@@ -2497,16 +2505,16 @@ const Ut = s.memo(Rr), Wt = {
         return /* @__PURE__ */ g(
           "span",
           {
-            ref: (N) => m.current[M] = N,
+            ref: (E) => d.current[M] = E,
             role: "radio",
             tabIndex: y > 0 ? M === y - 1 ? 0 : -1 : M === 0 ? 0 : -1,
             "aria-checked": F,
             "aria-label": `Rating ${M + 1}`,
             title: a(`${e.displayName} ${M + 1}`),
             onClick: () => C(M + 1),
-            onKeyDown: (N) => A(N, M),
-            onMouseEnter: () => d(M),
-            onMouseLeave: () => d(null),
+            onKeyDown: (E) => A(E, M),
+            onMouseEnter: () => m(M),
+            onMouseLeave: () => m(null),
             style: { ..._t, color: x },
             children: i
           },
@@ -2517,25 +2525,25 @@ const Ut = s.memo(Rr), Wt = {
   ) });
 };
 Ar.displayName = "RatingInput";
-const Kt = s.memo(Ar), Dr = ({
+const Kt = c.memo(Ar), Dr = ({
   field: e,
   value: r,
   onChange: t,
   onError: n,
   error: o
 }) => {
-  const { t: a } = j(), c = T(e, o), { inputRef: l, error: i, handleChange: u } = K({
+  const { t: a } = j(), s = T(e, o), { inputRef: l, error: i, handleChange: u } = K({
     value: r,
     onChange: t,
     onError: n,
-    validate: c
-  }), [d, m] = s.useState(!1), f = () => m((h) => !h);
-  return /* @__PURE__ */ g(L, { field: e, error: i, children: /* @__PURE__ */ z("div", { style: { display: "flex", alignItems: "center", gap: 8, width: "100%" }, children: [
+    validate: s
+  }), [m, d] = c.useState(!1), f = () => d((h) => !h);
+  return /* @__PURE__ */ g(B, { field: e, error: i, children: /* @__PURE__ */ z("div", { style: { display: "flex", alignItems: "center", gap: 8, width: "100%" }, children: [
     /* @__PURE__ */ g(
       "input",
       {
         id: e.name,
-        type: d ? "text" : "password",
+        type: m ? "text" : "password",
         defaultValue: String(r ?? ""),
         ref: l,
         onChange: u,
@@ -2550,7 +2558,7 @@ const Kt = s.memo(Ar), Dr = ({
       {
         type: "button",
         onClick: f,
-        "aria-label": a(d ? "Hide password" : "Show password"),
+        "aria-label": a(m ? "Hide password" : "Show password"),
         style: {
           background: "transparent",
           border: "none",
@@ -2560,43 +2568,43 @@ const Kt = s.memo(Ar), Dr = ({
           padding: "4px 6px",
           flexShrink: 0
         },
-        children: d ? "🙈" : "👁️"
+        children: m ? "🙈" : "👁️"
       }
     )
   ] }) });
 };
 Dr.displayName = "PasswordInput";
-const Gt = s.memo(Dr), zr = ({ field: e, value: r, onChange: t, onError: n, error: o }) => {
-  const a = T(e, o), c = e.min ?? 0, l = e.max ?? 100, [i, u] = s.useState(
-    () => isNaN(Number(r)) ? String(c) : String(Number(r))
+const Gt = c.memo(Dr), zr = ({ field: e, value: r, onChange: t, onError: n, error: o }) => {
+  const a = T(e, o), s = e.min ?? 0, l = e.max ?? 100, [i, u] = c.useState(
+    () => isNaN(Number(r)) ? String(s) : String(Number(r))
   );
-  s.useEffect(() => {
-    const C = isNaN(Number(r)) ? String(c) : String(Number(r));
+  c.useEffect(() => {
+    const C = isNaN(Number(r)) ? String(s) : String(Number(r));
     u(C);
-  }, [r, c]);
-  const [d, m] = s.useState(null), f = s.useRef(null), h = s.useRef(n);
-  s.useEffect(() => {
+  }, [r, s]);
+  const [m, d] = c.useState(null), f = c.useRef(null), h = c.useRef(n);
+  c.useEffect(() => {
     h.current = n;
   }, [n]);
-  const E = s.useCallback((C) => {
-    C !== f.current && (f.current = C, m(C), h.current?.(C ?? null));
+  const k = c.useCallback((C) => {
+    C !== f.current && (f.current = C, d(C), h.current?.(C ?? null));
   }, []);
-  s.useEffect(() => {
-    E(a(i, "sync") ?? null);
-  }, [a, i, E]);
-  const v = s.useCallback(
+  c.useEffect(() => {
+    k(a(i, "sync") ?? null);
+  }, [a, i, k]);
+  const v = c.useCallback(
     (C) => {
       const V = C.target.value;
-      u(V), E(a(V, "change") ?? null), t?.(V);
+      u(V), k(a(V, "change") ?? null), t?.(V);
     },
-    [t, E, a]
-  ), p = s.useCallback(
+    [t, k, a]
+  ), p = c.useCallback(
     (C) => {
-      E(a(C.target.value, "blur") ?? null);
+      k(a(C.target.value, "blur") ?? null);
     },
-    [E, a]
-  ), y = isNaN(Number(i)) ? String(c) : String(Number(i));
-  return /* @__PURE__ */ g(L, { field: e, error: d, children: /* @__PURE__ */ z("div", { style: { display: "flex", alignItems: "center", gap: "8px", width: "100%" }, children: [
+    [k, a]
+  ), y = isNaN(Number(i)) ? String(s) : String(Number(i));
+  return /* @__PURE__ */ g(B, { field: e, error: m, children: /* @__PURE__ */ z("div", { style: { display: "flex", alignItems: "center", gap: "8px", width: "100%" }, children: [
     /* @__PURE__ */ g(
       "input",
       {
@@ -2605,7 +2613,7 @@ const Gt = s.memo(Dr), zr = ({ field: e, value: r, onChange: t, onError: n, erro
         value: y,
         onChange: v,
         onBlur: p,
-        min: c,
+        min: s,
         max: l,
         step: "1.0",
         style: {
@@ -2613,8 +2621,8 @@ const Gt = s.memo(Dr), zr = ({ field: e, value: r, onChange: t, onError: n, erro
           flex: 1
         },
         className: R.rangeInput,
-        "aria-invalid": !!d,
-        "aria-describedby": d ? `${e.name}-error` : void 0
+        "aria-invalid": !!m,
+        "aria-describedby": m ? `${e.name}-error` : void 0
       }
     ),
     /* @__PURE__ */ g(
@@ -2634,42 +2642,42 @@ const Gt = s.memo(Dr), zr = ({ field: e, value: r, onChange: t, onError: n, erro
           flexShrink: 0
         },
         className: W(R.input, R.textInput),
-        "aria-invalid": !!d,
-        "aria-describedby": d ? `${e.name}-error` : void 0
+        "aria-invalid": !!m,
+        "aria-describedby": m ? `${e.name}-error` : void 0
       }
     )
   ] }) });
 };
 zr.displayName = "SliderInput";
-const Jt = s.memo(zr), Pr = ({
+const Jt = c.memo(zr), Pr = ({
   field: e,
   value: r,
   onChange: t,
   onError: n,
   error: o
 }) => {
-  const { t: a, formStyle: c, fieldStyle: l } = j(), i = T(e, o), [u, d] = s.useState(null), m = s.useRef(null), f = s.useRef(n);
-  s.useEffect(() => {
+  const { t: a, formStyle: s, fieldStyle: l } = j(), i = T(e, o), [u, m] = c.useState(null), d = c.useRef(null), f = c.useRef(n);
+  c.useEffect(() => {
     f.current = n;
   }, [n]);
-  const h = s.useCallback((b) => {
-    b !== m.current && (m.current = b, d(b), f.current?.(b ?? null));
+  const h = c.useCallback((b) => {
+    b !== d.current && (d.current = b, m(b), f.current?.(b ?? null));
   }, []);
-  s.useEffect(() => {
+  c.useEffect(() => {
     h(i(!!r, "sync"));
   }, [r, i, h]);
-  const E = c, v = l, p = (b, x, N) => {
+  const k = s, v = l, p = (b, x, E) => {
     if (!x) return {};
     const w = b?.[x];
-    return (N && w ? w[N] : void 0) ?? {};
-  }, y = s.useMemo(() => ({
+    return (E && w ? w[E] : void 0) ?? {};
+  }, y = c.useMemo(() => ({
     display: "inline-block",
     position: "relative",
     width: 44,
     height: 24,
-    ...p(E, "switch", "label"),
+    ...p(k, "switch", "label"),
     ...p(v, void 0, "label")
-  }), [E, v]), C = s.useMemo(() => ({
+  }), [k, v]), C = c.useMemo(() => ({
     position: "absolute",
     opacity: 0,
     top: 0,
@@ -2680,9 +2688,9 @@ const Jt = s.memo(zr), Pr = ({
     cursor: "pointer",
     pointerEvents: "none",
     // Make hidden input non-interactive to avoid event conflicts
-    ...p(E, "switch", "hiddenInput"),
+    ...p(k, "switch", "hiddenInput"),
     ...p(v, void 0, "hiddenInput")
-  }), [E, v]), V = s.useMemo(() => ({
+  }), [k, v]), V = c.useMemo(() => ({
     position: "absolute",
     cursor: "pointer",
     top: 0,
@@ -2699,9 +2707,9 @@ const Jt = s.memo(zr), Pr = ({
     borderWidth: 2,
     borderStyle: "solid",
     borderColor: "transparent",
-    ...p(E, "switch", "slider"),
+    ...p(k, "switch", "slider"),
     ...p(v, void 0, "slider")
-  }), [E, v]), A = s.useMemo(() => ({
+  }), [k, v]), A = c.useMemo(() => ({
     position: "absolute",
     height: 16,
     width: 16,
@@ -2711,15 +2719,15 @@ const Jt = s.memo(zr), Pr = ({
     transition: "0.3s",
     borderRadius: "50%",
     boxShadow: "0 1px 3px rgba(0, 0, 0, 0.3)",
-    ...p(E, "switch", "knob"),
+    ...p(k, "switch", "knob"),
     ...p(v, void 0, "knob")
-  }), [E, v]), I = !!r, M = () => {
+  }), [k, v]), I = !!r, M = () => {
     const b = !I;
     h(i(b, "change")), t?.(b);
-  }, F = s.useCallback(() => {
+  }, F = c.useCallback(() => {
     h(i(I, "blur"));
   }, [I, h, i]);
-  return /* @__PURE__ */ g(L, { field: e, error: u, rightAlign: !1, children: /* @__PURE__ */ z("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }, children: [
+  return /* @__PURE__ */ g(B, { field: e, error: u, rightAlign: !1, children: /* @__PURE__ */ z("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }, children: [
     /* @__PURE__ */ g(
       "label",
       {
@@ -2775,26 +2783,26 @@ const Jt = s.memo(zr), Pr = ({
   ] }) });
 };
 Pr.displayName = "SwitchInput";
-const Yt = s.memo(Pr), Se = ({
+const Yt = c.memo(Pr), Se = ({
   field: e,
   value: r,
   onChange: t,
   onError: n,
   error: o
 }) => {
-  const a = T(e, o), { inputRef: c, error: l, handleChange: i } = K({
+  const a = T(e, o), { inputRef: s, error: l, handleChange: i } = K({
     value: r,
     onChange: t,
     onError: n,
     validate: a
   });
-  return /* @__PURE__ */ g(L, { field: e, error: l, children: /* @__PURE__ */ g(
+  return /* @__PURE__ */ g(B, { field: e, error: l, children: /* @__PURE__ */ g(
     "input",
     {
       id: e.name,
       type: "text",
       defaultValue: String(r ?? ""),
-      ref: c,
+      ref: s,
       onChange: i,
       className: W(R.input, R.textInput),
       placeholder: e.placeholder,
@@ -2804,25 +2812,25 @@ const Yt = s.memo(Pr), Se = ({
   ) });
 };
 Se.displayName = "TextInput";
-const Br = ({
+const Or = ({
   field: e,
   value: r,
   onChange: t,
   onError: n,
   error: o
 }) => {
-  const a = T(e, o), { inputRef: c, error: l, handleChange: i } = K({
+  const a = T(e, o), { inputRef: s, error: l, handleChange: i } = K({
     value: r,
     onChange: t,
     onError: n,
     validate: a
   });
-  return /* @__PURE__ */ g(L, { field: e, error: l, children: /* @__PURE__ */ g(
+  return /* @__PURE__ */ g(B, { field: e, error: l, children: /* @__PURE__ */ g(
     "input",
     {
       id: e.name,
       type: "time",
-      ref: c,
+      ref: s,
       defaultValue: r,
       step: e.includeSeconds ? 1 : 60,
       onChange: i,
@@ -2834,30 +2842,30 @@ const Br = ({
     }
   ) });
 };
-Br.displayName = "TimeInput";
-const Xt = s.memo(Br);
+Or.displayName = "TimeInput";
+const Xt = c.memo(Or);
 function Zt({
   pos: e,
   options: r,
   onClose: t,
   onClickOption: n
 }) {
-  const o = s.useRef(null), a = s.useRef(!1), [c, l] = s.useState({
+  const o = c.useRef(null), a = c.useRef(!1), [s, l] = c.useState({
     top: e?.y ?? 0,
     left: e?.x ?? 0,
     ready: !1
   }), i = typeof window < "u" ? document.getElementById("popup-root") || document.body : null;
-  return s.useEffect(() => {
-    function u(d) {
-      a.current || d.target.dataset?.popupMenu === "item" || o.current && d.target instanceof Node && !o.current.contains(d.target) && t();
+  return c.useEffect(() => {
+    function u(m) {
+      a.current || m.target.dataset?.popupMenu === "item" || o.current && m.target instanceof Node && !o.current.contains(m.target) && t();
     }
     return document.addEventListener("mousedown", u), () => document.removeEventListener("mousedown", u);
-  }, [t]), s.useLayoutEffect(() => {
+  }, [t]), c.useLayoutEffect(() => {
     if (!o.current || !e || e.x == null || e.y == null)
       return;
-    const u = o.current.getBoundingClientRect(), d = window.innerWidth, m = window.innerHeight;
+    const u = o.current.getBoundingClientRect(), m = window.innerWidth, d = window.innerHeight;
     let f = e.x, h = e.y;
-    f + u.width > d && (f = Math.max(0, d - u.width - 10)), h + u.height > m && (h = Math.max(0, e.y - u.height - 5)), l({ top: h, left: f, ready: !0 });
+    f + u.width > m && (f = Math.max(0, m - u.width - 10)), h + u.height > d && (h = Math.max(0, e.y - u.height - 5)), l({ top: h, left: f, ready: !0 });
   }, [e, r]), !i || r === void 0 || r.length === 0 || !e || e.x == null || e.y == null ? null : fe.createPortal(
     /* @__PURE__ */ g(
       "div",
@@ -2868,9 +2876,9 @@ function Zt({
         },
         style: {
           position: "fixed",
-          top: c.top,
-          left: c.left,
-          visibility: c.ready ? "visible" : "hidden",
+          top: s.top,
+          left: s.left,
+          visibility: s.ready ? "visible" : "hidden",
           backgroundColor: "var(--reactaform-primary-bg, #fff)",
           border: "1px solid var(--reactaform-border-color, #ccc)",
           borderRadius: "var(--reactaform-border-radius, 4px)",
@@ -2881,15 +2889,15 @@ function Zt({
           overflowY: "auto",
           pointerEvents: "auto"
         },
-        children: r.map((u, d) => /* @__PURE__ */ g(
+        children: r.map((u, m) => /* @__PURE__ */ g(
           "div",
           {
             "data-popup-menu": "item",
-            onMouseDown: (m) => {
-              m.stopPropagation(), a.current = !0;
+            onMouseDown: (d) => {
+              d.stopPropagation(), a.current = !0;
             },
-            onClick: (m) => {
-              m.stopPropagation(), m.preventDefault(), n(u), t(), setTimeout(() => {
+            onClick: (d) => {
+              d.stopPropagation(), d.preventDefault(), n(u), t(), setTimeout(() => {
                 a.current = !1;
               }, 100);
             },
@@ -2897,18 +2905,18 @@ function Zt({
               padding: "var(--reactaform-menu-item-padding, 8px 12px)",
               cursor: "pointer",
               fontSize: "var(--reactaform-menu-item-font-size, 0.8em)",
-              borderBottom: d < r.length - 1 ? "1px solid var(--reactaform-border-light, #eee)" : void 0,
+              borderBottom: m < r.length - 1 ? "1px solid var(--reactaform-border-light, #eee)" : void 0,
               transition: "background-color 0.15s ease"
             },
-            onMouseEnter: (m) => {
-              m.currentTarget.style.backgroundColor = "var(--reactaform-option-menu-hover-bg, #e0e0e0)";
+            onMouseEnter: (d) => {
+              d.currentTarget.style.backgroundColor = "var(--reactaform-option-menu-hover-bg, #e0e0e0)";
             },
-            onMouseLeave: (m) => {
-              m.currentTarget.style.backgroundColor = "transparent";
+            onMouseLeave: (d) => {
+              d.currentTarget.style.backgroundColor = "transparent";
             },
             children: u.label
           },
-          u.label ?? d
+          u.label ?? m
         ))
       }
     ),
@@ -3040,23 +3048,23 @@ const Re = {
 for (const e of Qt) {
   const r = {}, t = Re[e] ?? [], n = Ae[e] ?? {}, o = De[e] ?? {};
   for (const a of t) {
-    const c = n[a];
+    const s = n[a];
     r[a] = {
-      name: typeof c == "string" ? c : String(a),
+      name: typeof s == "string" ? s : String(a),
       shortName: a,
       factor: a in o ? o[a] : void 0
     };
   }
-  for (const [a, c] of Object.entries(n))
+  for (const [a, s] of Object.entries(n))
     if (!r[a]) {
-      const l = typeof c == "string" ? c : String(a);
+      const l = typeof s == "string" ? s : String(a);
       r[a] = { name: l, shortName: a, factor: a in o ? o[a] : void 0 };
     }
-  for (const [a, c] of Object.entries(o))
-    r[a] || (r[a] = { name: String(a), shortName: String(a), factor: c });
+  for (const [a, s] of Object.entries(o))
+    r[a] || (r[a] = { name: String(a), shortName: String(a), factor: s });
   ze[e] = r;
 }
-function Lr(e, r, t) {
+function Br(e, r, t) {
   if (e === "C") {
     if (r === "F") return t * (9 / 5) + 32;
     if (r === "K") return t + 273.15;
@@ -3069,12 +3077,12 @@ function Lr(e, r, t) {
   }
   return t;
 }
-function Or(e) {
+function Lr(e) {
   const r = ze[e];
   if (!r) return null;
   const t = {}, n = [];
-  for (const [a, c] of Object.entries(r))
-    typeof c.factor == "number" && (t[a] = c.factor), n.push(a);
+  for (const [a, s] of Object.entries(r))
+    typeof s.factor == "number" && (t[a] = s.factor), n.push(a);
   return {
     default: Object.keys(r)[0] ?? "",
     units: n,
@@ -3083,34 +3091,34 @@ function Or(e) {
 }
 const fo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  convertTemperature: Lr,
+  convertTemperature: Br,
   dimensionUnitDisplayMap: Ae,
   dimensionUnitsMap: Re,
   dimensonUnitFactorsMap: De,
-  getUnitFactors: Or,
+  getUnitFactors: Lr,
   unitsByDimension: ze
-}, Symbol.toStringTag, { value: "Module" })), Tr = s.memo(({
+}, Symbol.toStringTag, { value: "Module" })), Tr = c.memo(({
   disabled: e,
   inputValue: r,
   selectedUnit: t,
   dimension: n,
   unitFactors: o,
   onConversionSelect: a,
-  t: c
+  t: s
 }) => {
-  const [l, i] = s.useState(!1), [u, d] = s.useState(null), [m, f] = s.useState([]), h = s.useCallback(
+  const [l, i] = c.useState(!1), [u, m] = c.useState(null), [d, f] = c.useState([]), h = c.useCallback(
     (p) => {
       if (e) return;
       const y = parseFloat(r);
       if (!Number.isFinite(y)) return;
       const C = p.currentTarget.getBoundingClientRect();
-      d({ x: C.left, y: C.bottom });
+      m({ x: C.left, y: C.bottom });
       const V = [];
       if (n === "temperature")
         o.units.forEach((I) => {
-          const M = Lr(t, I, y);
+          const M = Br(t, I, y);
           Number.isFinite(M) && V.push({
-            label: `${M.toFixed(6)} ${c(I)}`,
+            label: `${M.toFixed(6)} ${s(I)}`,
             value: M.toString(),
             unit: I
           });
@@ -3120,7 +3128,7 @@ const fo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
         I !== void 0 && Object.entries(o.factors).forEach(([M, F]) => {
           const b = y / I * F;
           Number.isFinite(b) && V.push({
-            label: `${b.toFixed(6)} ${c(M)}`,
+            label: `${b.toFixed(6)} ${s(M)}`,
             value: b.toString(),
             unit: M
           });
@@ -3128,14 +3136,14 @@ const fo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
       }
       f(V), i(V.length > 0);
     },
-    [e, r, t, n, o, c]
-  ), E = s.useCallback(
+    [e, r, t, n, o, s]
+  ), k = c.useCallback(
     (p) => {
-      i(!1), d(null), a(p);
+      i(!1), m(null), a(p);
     },
     [a]
-  ), v = s.useCallback(() => {
-    i(!1), d(null);
+  ), v = c.useCallback(() => {
+    i(!1), m(null);
   }, []);
   return /* @__PURE__ */ z(Fe, { children: [
     /* @__PURE__ */ g(
@@ -3164,59 +3172,59 @@ const fo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
         children: /* @__PURE__ */ g("span", { style: { fontSize: "1em", pointerEvents: "none" }, children: "⇄" })
       }
     ),
-    l && m.length > 0 && /* @__PURE__ */ g(
+    l && d.length > 0 && /* @__PURE__ */ g(
       Zt,
       {
         pos: u,
-        options: m,
+        options: d,
         onClose: v,
-        onClickOption: E
+        onClickOption: k
       }
     )
   ] });
 });
 Tr.displayName = "ConversionButton";
 const jr = ({ field: e, value: r, onChange: t, onError: n }) => {
-  const { t: o } = j(), a = T(e), [c, l] = s.useState(null), i = s.useRef(null), u = s.useRef(n);
-  s.useEffect(() => {
+  const { t: o } = j(), a = T(e), [s, l] = c.useState(null), i = c.useRef(null), u = c.useRef(n);
+  c.useEffect(() => {
     u.current = n;
   }, [n]);
-  const d = s.useCallback((x) => {
+  const m = c.useCallback((x) => {
     x !== i.current && (i.current = x, l(x), u.current?.(x ?? null));
-  }, []), m = e.dimension, f = s.useMemo(() => m ? Or(m) : null, [m]), h = String(r?.[0] ?? ""), E = String(r?.[1] ?? f?.default ?? ""), [v, p] = s.useState(h), [y, C] = s.useState(E);
-  s.useEffect(() => {
+  }, []), d = e.dimension, f = c.useMemo(() => d ? Lr(d) : null, [d]), h = String(r?.[0] ?? ""), k = String(r?.[1] ?? f?.default ?? ""), [v, p] = c.useState(h), [y, C] = c.useState(k);
+  c.useEffect(() => {
     p(h);
-  }, [h]), s.useEffect(() => {
-    C(E);
-  }, [E]), s.useEffect(() => {
-    d(a([v, y], "sync"));
-  }, [v, y, d, a]);
-  const V = s.useCallback(
+  }, [h]), c.useEffect(() => {
+    C(k);
+  }, [k]), c.useEffect(() => {
+    m(a([v, y], "sync"));
+  }, [v, y, m, a]);
+  const V = c.useCallback(
     (x) => {
-      const N = x.target.value;
-      p(N), d(a([N, y], "change")), t?.([N, y]);
+      const E = x.target.value;
+      p(E), m(a([E, y], "change")), t?.([E, y]);
     },
-    [y, a, t, d]
-  ), A = s.useCallback(
+    [y, a, t, m]
+  ), A = c.useCallback(
     (x) => {
-      const N = x.target.value;
-      C(N), d(a([v, N], "change")), t?.([v, N]);
+      const E = x.target.value;
+      C(E), m(a([v, E], "change")), t?.([v, E]);
     },
-    [v, a, t, d]
-  ), I = s.useCallback(() => {
-    d(a([v, y], "blur"));
-  }, [v, y, d, a]), M = s.useCallback(
+    [v, a, t, m]
+  ), I = c.useCallback(() => {
+    m(a([v, y], "blur"));
+  }, [v, y, m, a]), M = c.useCallback(
     (x) => {
       p(x.value), C(x.unit), t?.([x.value, x.unit]);
     },
     [t]
-  ), F = s.useMemo(
+  ), F = c.useMemo(
     () => f ? f.units.map((x) => /* @__PURE__ */ g("option", { value: x, children: o(x) }, x)) : [],
     [f, o]
   );
-  if (!m || !f) return null;
-  const b = !!c || !v.trim();
-  return /* @__PURE__ */ g(L, { field: e, error: c, children: /* @__PURE__ */ z("div", { style: { display: "flex", alignItems: "center", gap: "var(--reactaform-unit-gap, 8px)", width: "100%" }, children: [
+  if (!d || !f) return null;
+  const b = !!s || !v.trim();
+  return /* @__PURE__ */ g(B, { field: e, error: s, children: /* @__PURE__ */ z("div", { style: { display: "flex", alignItems: "center", gap: "var(--reactaform-unit-gap, 8px)", width: "100%" }, children: [
     /* @__PURE__ */ g(
       "input",
       {
@@ -3227,8 +3235,8 @@ const jr = ({ field: e, value: r, onChange: t, onError: n }) => {
         onBlur: I,
         style: { flex: "2 1 0" },
         className: W(R.input, R.textInput),
-        "aria-invalid": !!c,
-        "aria-describedby": c ? `${e.name}-error` : void 0
+        "aria-invalid": !!s,
+        "aria-describedby": s ? `${e.name}-error` : void 0
       }
     ),
     /* @__PURE__ */ g(
@@ -3240,8 +3248,8 @@ const jr = ({ field: e, value: r, onChange: t, onError: n }) => {
         onBlur: I,
         style: { flex: "1 1 0" },
         className: W(R.input, R.inputSelect),
-        "aria-invalid": !!c,
-        "aria-describedby": c ? `${e.name}-error` : void 0,
+        "aria-invalid": !!s,
+        "aria-describedby": s ? `${e.name}-error` : void 0,
         children: F
       }
     ),
@@ -3251,7 +3259,7 @@ const jr = ({ field: e, value: r, onChange: t, onError: n }) => {
         disabled: b,
         inputValue: v,
         selectedUnit: y,
-        dimension: m,
+        dimension: d,
         unitFactors: f,
         onConversionSelect: M,
         t: o
@@ -3260,26 +3268,26 @@ const jr = ({ field: e, value: r, onChange: t, onError: n }) => {
   ] }) });
 };
 jr.displayName = "UnitValueInput";
-const en = s.memo(jr), Hr = ({
+const en = c.memo(jr), Hr = ({
   field: e,
   value: r,
   onChange: t,
   onError: n,
   error: o
 }) => {
-  const a = T(e, o), { inputRef: c, error: l, handleChange: i } = K({
+  const a = T(e, o), { inputRef: s, error: l, handleChange: i } = K({
     value: r,
     onChange: t,
     onError: n,
     validate: a
   });
-  return /* @__PURE__ */ g(L, { field: e, error: l, children: /* @__PURE__ */ g(
+  return /* @__PURE__ */ g(B, { field: e, error: l, children: /* @__PURE__ */ g(
     "input",
     {
       id: e.name,
       type: "url",
       defaultValue: String(r ?? ""),
-      ref: c,
+      ref: s,
       onChange: i,
       className: W(R.input, R.textInput),
       placeholder: "https://example.com",
@@ -3289,7 +3297,7 @@ const en = s.memo(jr), Hr = ({
   ) });
 };
 Hr.displayName = "UrlInput";
-const rn = s.memo(Hr), le = new ae();
+const rn = c.memo(Hr), le = new ae();
 function po(e, r) {
   le.register(e, r);
 }
@@ -3311,7 +3319,7 @@ const qr = ({
   handleChange: t,
   handleError: n
 }) => {
-  const { t: o } = j(), [a, c] = s.useState(!1), [l, i] = s.useState(null), u = s.useCallback(async () => {
+  const { t: o } = j(), [a, s] = c.useState(!1), [l, i] = c.useState(null), u = c.useCallback(async () => {
     if (!e.action) {
       console.warn(`Button "${e.name}" has no action defined`);
       return;
@@ -3322,20 +3330,20 @@ const qr = ({
       console.error(h), i(h);
       return;
     }
-    c(!0), i(null);
+    s(!0), i(null);
     try {
       await f(r, t, n, o);
     } catch (h) {
-      const E = h instanceof Error ? h.message : String(h);
-      console.error(`Button handler "${e.action}" failed:`, E), i(E);
+      const k = h instanceof Error ? h.message : String(h);
+      console.error(`Button handler "${e.action}" failed:`, k), i(k);
     } finally {
-      c(!1);
+      s(!1);
     }
-  }, [e, r, t, n, o]), m = { ...{
+  }, [e, r, t, n, o]), d = { ...{
     cursor: a ? "wait" : "pointer",
     opacity: a ? 0.6 : 1
   } };
-  return e.width && typeof e.width == "number" && e.width > 0 && (m.width = `${e.width}px`), /* @__PURE__ */ g(L, { field: e, rightAlign: !0, error: l, children: /* @__PURE__ */ g(
+  return e.width && typeof e.width == "number" && e.width > 0 && (d.width = `${e.width}px`), /* @__PURE__ */ g(B, { field: e, rightAlign: !0, error: l, children: /* @__PURE__ */ g(
     "button",
     {
       type: "button",
@@ -3344,13 +3352,13 @@ const qr = ({
       disabled: a,
       "aria-label": o(e.displayName),
       "aria-busy": a,
-      style: m,
+      style: d,
       children: o(a ? "Processing..." : e.displayName)
     }
   ) });
 };
 qr.displayName = "Button";
-const nn = s.memo(qr), on = {
+const nn = c.memo(qr), on = {
   // No debounce
   checkbox: !1,
   switch: !1,
@@ -3394,10 +3402,10 @@ const nn = s.memo(qr), on = {
   float: Dt,
   "float-array": At,
   image: Pt,
-  int: Lt,
-  "int-array": Bt,
+  int: Bt,
+  "int-array": Ot,
   "multi-selection": jt,
-  multiline: Ot,
+  multiline: Lt,
   password: Gt,
   phone: qt,
   radio: Ut,
@@ -3416,21 +3424,21 @@ function an(e) {
   return e in Pe;
 }
 function sn(e, r) {
-  const { wait: t = 200, leading: n, trailing: o } = r, a = s.memo((c) => {
-    const l = s.useRef(c.onChange);
-    s.useEffect(() => {
-      l.current = c.onChange;
-    }, [c.onChange]);
+  const { wait: t = 200, leading: n, trailing: o } = r, a = c.memo((s) => {
+    const l = c.useRef(s.onChange);
+    c.useEffect(() => {
+      l.current = s.onChange;
+    }, [s.onChange]);
     const { callback: i, cancel: u } = ut(
-      (...d) => {
-        l.current?.(...d);
+      (...m) => {
+        l.current?.(...m);
       },
       t,
       { leading: n, trailing: o }
     );
-    return s.useEffect(() => u, [u]), s.createElement(
+    return c.useEffect(() => u, [u]), c.createElement(
       e,
-      { ...c, onChange: i }
+      { ...s, onChange: i }
     );
   });
   return a.displayName = "DebouncedFieldWrapper", a;
@@ -3464,66 +3472,82 @@ function cn() {
     Ur(e, r, !0);
   }), Xe = !0);
 }
-const Be = s.memo(
+const Oe = c.memo(
   ({ field: e, valuesMap: r, handleChange: t, handleError: n, errorsMap: o }) => {
-    const a = _r(e.type), c = r[e.name], l = o ? o[e.name] ?? null : void 0, i = s.useMemo(() => c, [c]), u = s.useCallback(
-      (m) => t(e.name, m),
+    const a = _r(e.type), s = r[e.name], l = o ? o[e.name] ?? null : void 0, i = !!e.disabled, u = c.useMemo(() => s, [s]), m = c.useCallback(
+      (f) => t(e.name, f),
       [t, e.name]
-    ), d = s.useCallback(
-      (m) => n?.(e.name, m),
+    ), d = c.useCallback(
+      (f) => n?.(e.name, f),
       [n, e.name]
     );
-    return a ? e.type === "button" ? /* @__PURE__ */ g(a, { ...{
-      field: e,
-      value: null,
-      valuesMap: r,
-      handleChange: t,
-      handleError: n || (() => {
-      })
-    } }) : /* @__PURE__ */ g(
-      a,
+    return a ? e.type === "button" ? /* @__PURE__ */ g(
+      "div",
       {
-        field: e,
-        value: i,
-        onChange: u,
-        onError: d,
-        error: l
+        "aria-disabled": i,
+        style: i ? { opacity: 0.6, pointerEvents: "none" } : void 0,
+        children: /* @__PURE__ */ g(a, { ...{
+          field: e,
+          value: null,
+          disabled: i,
+          valuesMap: r,
+          handleChange: t,
+          handleError: n || (() => {
+          })
+        } })
+      }
+    ) : /* @__PURE__ */ g(
+      "div",
+      {
+        "aria-disabled": i,
+        style: i ? { opacity: 0.6, pointerEvents: "none" } : void 0,
+        children: /* @__PURE__ */ g(
+          a,
+          {
+            field: e,
+            value: u,
+            disabled: i,
+            onChange: m,
+            onError: d,
+            error: l
+          }
+        )
       }
     ) : null;
   },
   (e, r) => e.field === r.field && e.valuesMap[e.field.name] === r.valuesMap[r.field.name] && e.handleChange === r.handleChange && e.handleError === r.handleError && e.errorsMap?.[e.field.name] === r.errorsMap?.[r.field.name]
 );
-Be.displayName = "FieldRenderer";
-const Kr = s.memo(
-  ({ groupName: e, defaultOpen: r = !0, fields: t, valuesMap: n, handleChange: o, handleError: a, errorsMap: c, t: l }) => {
-    const [i, u] = s.useState(r), d = s.useCallback(() => u((m) => !m), []);
+Oe.displayName = "FieldRenderer";
+const Kr = c.memo(
+  ({ groupName: e, defaultOpen: r = !0, fields: t, valuesMap: n, handleChange: o, handleError: a, errorsMap: s, t: l }) => {
+    const [i, u] = c.useState(r), m = c.useCallback(() => u((d) => !d), []);
     return /* @__PURE__ */ z("fieldset", { className: "reactaform-group", children: [
-      /* @__PURE__ */ z("legend", { onClick: d, className: "reactaform-group_legend", children: [
+      /* @__PURE__ */ z("legend", { onClick: m, className: "reactaform-group_legend", children: [
         /* @__PURE__ */ g("span", { children: l(e) }),
         /* @__PURE__ */ g("span", { className: "reactaform-group_legend_arrow", children: i ? "▼" : "▶" })
       ] }),
-      i && t.map((m) => /* @__PURE__ */ g(
-        Be,
+      i && t.map((d) => /* @__PURE__ */ g(
+        Oe,
         {
-          field: m,
+          field: d,
           valuesMap: n,
           handleChange: o,
           handleError: a,
-          errorsMap: c
+          errorsMap: s
         },
-        m.name
+        d.name
       ))
     ] });
   }
 );
 Kr.displayName = "FieldGroup";
-const Le = (e, r, t, n) => {
+const Be = (e, r, t, n) => {
   const o = r[e];
   if (!o?.children) return;
-  const a = t[e], c = a != null ? String(a) : "", l = o.children[c];
+  const a = t[e], s = a != null ? String(a) : "", l = o.children[s];
   if (Array.isArray(l))
     for (const i of l)
-      typeof i == "string" && r[i] && (n[i] = !0, Le(i, r, t, n));
+      typeof i == "string" && r[i] && (n[i] = !0, Be(i, r, t, n));
 }, Gr = (e, r, t) => {
   const n = r[e];
   if (!n?.children) return;
@@ -3533,15 +3557,15 @@ const Le = (e, r, t, n) => {
 }, ln = (e, r, t, n) => {
   const o = { ...t };
   return e.forEach((a) => {
-    (!a.parents || Object.keys(a.parents).length === 0) && (o[a.name] = !0, Le(a.name, n, r, o));
+    (!a.parents || Object.keys(a.parents).length === 0) && (o[a.name] = !0, Be(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 l = String(o), i = c.children[l];
+  const a = { ...e }, s = r[n];
+  if (Gr(n, r, a), o != null && s?.children) {
+    const l = String(o), i = s.children[l];
     if (Array.isArray(i))
       for (const u of i)
-        typeof u == "string" && r[u] && (a[u] = !0, Le(u, r, t, a));
+        typeof u == "string" && r[u] && (a[u] = !0, Be(u, r, t, a));
   }
   for (const [l, i] of Object.entries(r))
     i.parents && n in i.parents && (a[l] = Jr(l, r, t));
@@ -3559,7 +3583,7 @@ const Le = (e, r, t, n) => {
       continue;
     const i = a.map((u) => String(u));
     if (Array.isArray(l)) {
-      if (l.map((m) => String(m)).some((m) => i.includes(m)))
+      if (l.map((d) => String(d)).some((d) => i.includes(d)))
         return !0;
     } else {
       const u = String(l);
@@ -3571,20 +3595,20 @@ const Le = (e, r, t, n) => {
 }, mn = (e, r) => {
   const t = /* @__PURE__ */ new Map();
   let n = null, o = null, a = 0;
-  for (const c of e) {
-    const l = c.group;
+  for (const s of e) {
+    const l = s.group;
     if (!l) {
       n = null, o = null;
       continue;
     }
     if (l === n)
-      r[c.name].group = o ?? l;
+      r[s.name].group = o ?? l;
     else {
       if (!t.has(l))
-        t.set(l, 1), o = null, r[c.name].group = l;
+        t.set(l, 1), o = null, r[s.name].group = l;
       else {
         const i = t.get(l), u = `${l}(${i})`;
-        t.set(l, i + 1), o = u, r[c.name].group = u, a++;
+        t.set(l, i + 1), o = u, r[s.name].group = u, a++;
       }
       n = l;
     }
@@ -3592,30 +3616,30 @@ const Le = (e, r, t, n) => {
   return a;
 }, dn = (e, r = {}) => {
   const { includeEmpty: t = !0 } = r, n = [];
-  let o = null, a = [], c = 0;
+  let o = null, a = [], s = 0;
   for (const i of e) {
     const u = i.group || null;
     u !== o ? ((a.length > 0 || t) && n.push({ name: o, fields: a }), o = u, a = [i]) : a.push(i);
   }
-  (a.length > 0 || t) && n.push({ name: o, fields: a }), c = n.filter((i) => i.fields.length === 0).length;
+  (a.length > 0 || t) && n.push({ name: o, fields: a }), s = n.filter((i) => i.fields.length === 0).length;
   const l = Math.max(0, ...n.map((i) => i.fields.length));
   return {
     groups: n,
     metadata: {
       totalGroups: n.length,
-      emptyGroups: c,
+      emptyGroups: s,
       largestGroup: l
     }
   };
-}, Oe = new ae();
+}, Le = new ae();
 function Yr(e, r) {
-  Oe.register(e, r);
+  Le.register(e, r);
 }
 function fn(e) {
-  return Oe.get(e);
+  return Le.get(e);
 }
 function pn(e) {
-  return Oe.get(e);
+  return Le.get(e);
 }
 Yr(
   "Preset_AlertSubmitHandler",
@@ -3629,7 +3653,7 @@ Yr(
     alert(o);
   }
 );
-async function gn(e, r, t, n, o, a, c) {
+async function gn(e, r, t, n, o, a, s) {
   const l = o ? Object.values(o).filter(Boolean) : [];
   if (l.length > 0)
     return {
@@ -3639,34 +3663,34 @@ async function gn(e, r, t, n, o, a, c) {
     };
   const i = { ...t }, u = [];
   if (e && Array.isArray(e.properties))
-    for (const m of e.properties) {
-      const f = m.name, h = i[f];
+    for (const d of e.properties) {
+      const f = d.name, h = i[f];
       if (h == null) continue;
-      const E = m.type;
+      const k = d.type;
       try {
-        if (E === "int") {
+        if (k === "int") {
           const v = String(h).trim();
           if (v === "")
             i[f] = 0;
           else {
             const p = Number(v);
-            Number.isInteger(p) ? i[f] = Math.trunc(p) : u.push(n("Invalid integer format for field {{1}}", m.displayName || f));
+            Number.isInteger(p) ? i[f] = Math.trunc(p) : u.push(n("Invalid integer format for field {{1}}", d.displayName || f));
           }
-        } else if (E === "number" || E === "float") {
+        } else if (k === "number" || k === "float") {
           const v = String(h).trim();
           if (v === "")
             i[f] = 0;
           else {
             const p = Number(v);
-            isNaN(p) ? u.push(n("Invalid number format for field {{1}}", m.displayName || f)) : i[f] = p;
+            isNaN(p) ? u.push(n("Invalid number format for field {{1}}", d.displayName || f)) : i[f] = p;
           }
-        } else if (E === "int-array" || E === "float-array") {
+        } else if (k === "int-array" || k === "float-array") {
           const v = String(h).split(",").map((C) => C.trim()).filter(Boolean), p = [];
           let y = !1;
           for (const C of v) {
             const V = Number(C);
             if (isNaN(V)) {
-              u.push(n("Invalid number {{1}} in array for field {{2}}", C, m.displayName || f)), y = !0;
+              u.push(n("Invalid number {{1}} in array for field {{2}}", C, d.displayName || f)), y = !0;
               break;
             }
             p.push(V);
@@ -3674,7 +3698,7 @@ async function gn(e, r, t, n, o, a, c) {
           y || (i[f] = p);
         }
       } catch (v) {
-        u.push(n("Error processing field {{1}}: {{2}}", m.displayName || f, v instanceof Error ? v.message : String(v)));
+        u.push(n("Error processing field {{1}}: {{2}}", d.displayName || f, v instanceof Error ? v.message : String(v)));
       }
     }
   if (u.length > 0)
@@ -3683,45 +3707,45 @@ async function gn(e, r, t, n, o, a, c) {
       message: n("Data transformation errors occurred."),
       errors: u
     };
-  if (c) {
-    const m = await c(i, n);
-    if (m && m.length > 0)
+  if (s) {
+    const d = await s(i, n);
+    if (d && d.length > 0)
       return {
         success: !1,
         message: n("Validation failed"),
-        errors: m
+        errors: d
       };
   } else {
-    const m = await vt(e, i, n);
-    if (m && m.length > 0)
+    const d = await vt(e, i, n);
+    if (d && d.length > 0)
       return {
         success: !1,
         message: n("Validation failed"),
-        errors: m
+        errors: d
       };
   }
-  const d = (m) => m ? Array.isArray(m) ? m.map((f) => String(f)) : typeof m == "string" ? m.trim() ? [m] : [] : [String(m)] : [];
+  const m = (d) => d ? Array.isArray(d) ? d.map((f) => String(f)) : typeof d == "string" ? d.trim() ? [d] : [] : [String(d)] : [];
   if (a)
     try {
-      const m = await a(e, r?.name ?? null, i, n), f = d(m);
+      const d = await a(e, r?.name ?? null, i, n), f = m(d);
       if (f.length > 0)
         return {
           success: !1,
           message: n("Submission failed"),
           errors: f
         };
-    } catch (m) {
+    } catch (d) {
       return {
         success: !1,
         message: n("Submission handler error occurred"),
-        errors: [String(m instanceof Error ? m.message : m)]
+        errors: [String(d instanceof Error ? d.message : d)]
       };
     }
   else if (e && typeof e.submitHandlerName == "string") {
-    const m = fn(e.submitHandlerName);
-    if (m)
+    const d = fn(e.submitHandlerName);
+    if (d)
       try {
-        const f = await m(e, r?.name ?? null, i, n), h = d(f);
+        const f = await d(e, r?.name ?? null, i, n), h = m(f);
         if (h.length > 0)
           return {
             success: !1,
@@ -3786,7 +3810,7 @@ const Xr = ({
 ) : null;
 Xr.displayName = "SubmissionMessage";
 const hn = ({ onClick: e, disabled: r = !1, t }) => {
-  const [n, o] = s.useState(!1);
+  const [n, o] = c.useState(!1);
   return /* @__PURE__ */ g(
     "button",
     {
@@ -3819,20 +3843,20 @@ const hn = ({ onClick: e, disabled: r = !1, t }) => {
   chunkSize: o = 50,
   chunkDelay: a = 50
 }) => {
-  const { properties: c, displayName: l } = e, i = j(), { t: u, formStyle: d, language: m, displayInstanceName: f } = i, h = {
+  const { properties: s, displayName: l } = e, i = j(), { t: u, formStyle: m, language: d, displayInstanceName: f } = i, h = {
     ...i,
     definitionName: e?.name ?? i.definitionName
-  }, [E, v] = s.useState("en"), [p, y] = s.useState([]), [C, V] = s.useState({}), [A, I] = s.useState(
+  }, [k, v] = c.useState("en"), [p, y] = c.useState([]), [C, V] = c.useState({}), [A, I] = c.useState(
     {}
-  ), [M, F] = s.useState({}), [b, x] = s.useState({}), [N, w] = s.useState(null), [S, k] = s.useState(null), [$, O] = s.useState(0), [q, Y] = s.useState(!1), [te, ie] = s.useState(r.name || ""), Z = s.useRef(r), pe = s.useRef(!1);
-  s.useEffect(() => {
+  ), [M, F] = c.useState({}), [b, x] = c.useState({}), [E, w] = c.useState(null), [S, N] = c.useState(null), [$, L] = c.useState(0), [q, X] = c.useState(!1), [te, ie] = c.useState(r.name || ""), Z = c.useRef(r), pe = c.useRef(!1);
+  c.useEffect(() => {
     const P = Object.fromEntries(
-      c.map((D) => [
+      s.map((D) => [
         D.name,
         { ...D, children: {} }
       ])
     );
-    c.forEach((D) => {
+    s.forEach((D) => {
       D.parents && Object.entries(D.parents).forEach(([J, ne]) => {
         const Q = P[J];
         Q && ne.forEach((it) => {
@@ -3844,41 +3868,44 @@ const hn = ({ onClick: e, disabled: r = !1, t }) => {
           ];
         });
       });
-    }), mn(c, P);
+    }), mn(s, P);
     const U = Object.values(
       P
-    ), B = {};
+    ), O = {};
     U.forEach((D) => {
       if (D.type === "unit") {
         const J = typeof D.defaultValue == "number" ? String(D.defaultValue) : "", ne = typeof D.defaultUnit == "string" ? D.defaultUnit : String(D.defaultUnit ?? "m");
-        B[D.name] = [J, ne];
+        O[D.name] = [J, ne];
       } else
-        B[D.name] = D.defaultValue;
+        O[D.name] = D.defaultValue;
     }), Z.current = r, Object.keys(r.values).forEach((D) => {
-      P[D] !== void 0 && (B[D] = r.values[D]);
+      P[D] !== void 0 && (O[D] = r.values[D]);
     });
-    const X = Object.fromEntries(U.map((D) => [D.name, !1])), G = requestAnimationFrame(() => {
-      y(U), V(P), I(B), F(
-        ln(U, B, X, P)
-      ), Y(!0), ie(r.name);
+    const Y = Object.fromEntries(U.map((D) => [D.name, !1])), G = requestAnimationFrame(() => {
+      y(U), V(P), I(O), F(
+        ln(U, O, Y, P)
+      ), X(!0), ie(r.name);
     });
     return () => cancelAnimationFrame(G);
-  }, [c, r, e]), s.useEffect(() => {
+  }, [s, r, e]), c.useEffect(() => {
     if (!q || $ >= p.length) return;
     const P = setTimeout(() => {
-      O(
+      L(
         (U) => Math.min(U + o, p.length)
       );
     }, a);
     return () => clearTimeout(P);
   }, [q, $, p.length, o, a]);
-  const He = s.useCallback(
+  const He = c.useCallback(
     (P, U) => {
-      w(null), k(null), I((D) => ({ ...D, [P]: U }));
-      const B = C[P], X = B && B.children && Object.keys(B.children).length > 0, G = Object.values(C).some(
+      const O = C[P];
+      if (!O)
+        return;
+      w(null), N(null), I((D) => ({ ...D, [P]: U }));
+      const Y = O && O.children && Object.keys(O.children).length > 0, G = Object.values(C).some(
         (D) => D.parents && P in D.parents
       );
-      (X || G) && F((D) => {
+      (Y || G) && F((D) => {
         const J = { ...A, [P]: U };
         return un(
           D,
@@ -3891,24 +3918,28 @@ const hn = ({ onClick: e, disabled: r = !1, t }) => {
     },
     [C, A]
   );
-  s.useEffect(() => {
+  c.useEffect(() => {
     let P = 0;
     return P = requestAnimationFrame(() => {
-      m !== E && (v(m || "en"), w(null), k(null));
+      d !== k && (v(d || "en"), w(null), N(null));
     }), () => cancelAnimationFrame(P);
-  }, [m, E]), s.useEffect(() => {
+  }, [d, k]), c.useEffect(() => {
     let P = 0;
     return P = requestAnimationFrame(() => {
       if (pe.current) {
         pe.current = !1, Z.current = r, ie(r.name || "");
         return;
       }
-      Z.current = r, w(null), k(null), ie(r.name || "");
+      Z.current = r, w(null), N(null), ie(r.name || "");
     }), () => cancelAnimationFrame(P);
   }, [r, r.name]);
-  const qe = s.useCallback((P, U) => {
-    x((B) => U ? { ...B, [P]: String(U) } : Object.fromEntries(Object.entries(B).filter(([G]) => G !== P)));
-  }, []), ot = async () => {
+  const qe = c.useCallback((P, U) => {
+    if (C[P]?.disabled) {
+      x((O) => P in O ? Object.fromEntries(Object.entries(O).filter(([G]) => G !== P)) : O);
+      return;
+    }
+    x((O) => U ? { ...O, [P]: String(U) } : Object.fromEntries(Object.entries(O).filter(([G]) => G !== P)));
+  }, [C]), ot = async () => {
     pe.current = !0;
     const P = Z.current?.name;
     Z.current.name = te;
@@ -3916,33 +3947,34 @@ const hn = ({ onClick: e, disabled: r = !1, t }) => {
     if (h.fieldValidationMode === "onSubmission") {
       const D = {};
       if (p.forEach((J) => {
+        if (J.disabled) return;
         const ne = A[J.name];
         if (ne === void 0) return;
         const Q = we(h.definitionName, J, ne, u);
         Q && (D[J.name] = Q);
       }), x(D), U = D, Object.keys(D).length > 0) {
-        w(u("Please fix validation errors before submitting the form.")), k(!1);
+        w(u("Please fix validation errors before submitting the form.")), N(!1);
         return;
       } else
-        w(null), k(null);
+        w(null), N(null);
     }
-    const B = await gn(e, Z.current, A, u, U, t, n), X = typeof B.message == "string" ? B.message : String(B.message), G = Object.values(B.errors ?? {}).join(`
+    const O = await gn(e, Z.current, A, u, U, t, n), Y = typeof O.message == "string" ? O.message : String(O.message), G = Object.values(O.errors ?? {}).join(`
 `);
-    w(G ? X + `
-` + G : X), k(B.success), B.success || (Z.current.name = P ?? Z.current.name, ie(P ?? ""));
-  }, at = s.useMemo(
+    w(G ? Y + `
+` + G : Y), N(O.success), O.success || (Z.current.name = P ?? Z.current.name, ie(P ?? ""));
+  }, at = c.useMemo(
     () => h.fieldValidationMode === "onEdit" || h.fieldValidationMode === "onBlur" || h.fieldValidationMode === "realTime" ? Object.values(b).some(Boolean) : !1,
     [b, h.fieldValidationMode]
   );
-  return /* @__PURE__ */ g(Me.Provider, { value: h, children: /* @__PURE__ */ z("div", { style: d.container, children: [
-    l && /* @__PURE__ */ g("h2", { style: d.titleStyle, children: u(l) }),
+  return /* @__PURE__ */ g(Me.Provider, { value: h, children: /* @__PURE__ */ z("div", { style: m.container, children: [
+    l && /* @__PURE__ */ g("h2", { style: m.titleStyle, children: u(l) }),
     /* @__PURE__ */ g(
       Xr,
       {
-        message: N,
+        message: E,
         success: S,
         onDismiss: () => {
-          w(null), k(null);
+          w(null), N(null);
         },
         t: u
       }
@@ -3952,28 +3984,28 @@ const hn = ({ onClick: e, disabled: r = !1, t }) => {
       {
         name: te,
         onChange: (P) => {
-          ie(P), w(null), k(null);
+          ie(P), w(null), N(null);
         }
       }
     ),
     /* @__PURE__ */ z(Fe, { children: [
       (() => {
-        const P = p.slice(0, $).filter((B) => M[B.name]), { groups: U } = dn(P);
-        return U.map((B, X) => B.name ? /* @__PURE__ */ g(
+        const P = p.slice(0, $).filter((O) => M[O.name]), { groups: U } = dn(P);
+        return U.map((O, Y) => O.name ? /* @__PURE__ */ g(
           Kr,
           {
-            groupName: B.name,
+            groupName: O.name,
             defaultOpen: !0,
-            fields: B.fields,
+            fields: O.fields,
             valuesMap: A,
             handleChange: He,
             handleError: qe,
             errorsMap: b,
             t: u
           },
-          B.name
-        ) : /* @__PURE__ */ g(s.Fragment, { children: B.fields.map((G) => /* @__PURE__ */ g(
-          Be,
+          O.name
+        ) : /* @__PURE__ */ g(c.Fragment, { children: O.fields.map((G) => /* @__PURE__ */ g(
+          Oe,
           {
             field: G,
             valuesMap: A,
@@ -3982,7 +4014,7 @@ const hn = ({ onClick: e, disabled: r = !1, t }) => {
             errorsMap: b
           },
           G.name
-        )) }, `ungrouped-${X}`));
+        )) }, `ungrouped-${Y}`));
       })(),
       $ < p.length && /* @__PURE__ */ g(
         "div",
@@ -4111,17 +4143,17 @@ const hn = ({ onClick: e, disabled: r = !1, t }) => {
     !a.includes("application/json") && !a.includes("text/json") && Qr() && console.warn(
       `Translation file at ${n} has unexpected content-type: ${a}`
     );
-    const c = await o.text();
-    if (!c) {
+    const s = await o.text();
+    if (!s) {
       const u = "Empty translation file";
       return oe.add(t), { success: !1, translations: {}, error: u };
     }
     let l;
     try {
-      l = JSON.parse(c);
+      l = JSON.parse(s);
     } catch (u) {
-      const d = `Invalid JSON in translation file: ${u instanceof Error ? u.message : String(u)}`;
-      return oe.add(t), { success: !1, translations: {}, error: d };
+      const m = `Invalid JSON in translation file: ${u instanceof Error ? u.message : String(u)}`;
+      return oe.add(t), { success: !1, translations: {}, error: m };
     }
     if (!l || typeof l != "object") {
       const u = "Invalid translation file format";
@@ -4132,9 +4164,9 @@ const hn = ({ onClick: e, disabled: r = !1, t }) => {
       };
     }
     const i = Object.fromEntries(
-      Object.entries(l).map(([u, d]) => [
+      Object.entries(l).map(([u, m]) => [
         u,
-        typeof d == "string" ? d : String(d)
+        typeof m == "string" ? m : String(m)
       ])
     );
     return ue.set(t, i), Ce.set(t, {
@@ -4170,8 +4202,8 @@ function wn(e, r) {
   });
 }
 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(
+  let a = n, s = !1;
+  return !n || typeof n != "string" ? String(n || "") : (e.toLowerCase() === "en" ? (a = n, s = !0) : n in t ? (a = t[n], s = !0) : n in r ? (a = r[n], s = !0) : a = n, a = wn(a, o), !s && Qr() && console.debug(
     `Missing translation for "${n}" in language "${e}"`
   ), a);
 };
@@ -4297,20 +4329,20 @@ function Te(e, r, t, n, ...o) {
   if (e.pattern == null)
     return;
   const a = String(r);
-  let c = null;
+  let s = null;
   if (e.pattern) {
     const l = ve.get(e);
     if (l && l.pattern === e.pattern)
-      c = l.regex;
+      s = l.regex;
     else
       try {
         const i = new RegExp(e.pattern);
-        ve.set(e, { pattern: e.pattern, regex: i }), c = i;
+        ve.set(e, { pattern: e.pattern, regex: i }), s = i;
       } catch {
-        ve.set(e, { pattern: e.pattern, regex: null }), c = null;
+        ve.set(e, { pattern: e.pattern, regex: null }), s = null;
       }
   }
-  if (c && !c.test(a))
+  if (s && !s.test(a))
     return e.patternErrorMessage ? t(e.patternErrorMessage) : n ? t(n, ...o) : t("Input does not match pattern: {{1}}", e.pattern);
 }
 function me(e, r, t) {
@@ -4337,19 +4369,19 @@ function Dn(e, r, t) {
   const n = String(r).trim(), o = ke(n);
   if (o === null)
     return t("Invalid date format");
-  const { minTime: a, maxTime: c } = An(e);
+  const { minTime: a, maxTime: s } = An(e);
   if (a !== null && o < a)
     return t("Date must be on or after {{1}}", e.minDate);
-  if (c !== null && o > c)
+  if (s !== null && o > s)
     return t("Date must be on or before {{1}}", e.maxDate);
 }
 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 o = (c) => {
-    const l = c.split(":").map((d) => parseInt(d, 10));
-    if (l.some((d) => Number.isNaN(d))) return NaN;
+  const o = (s) => {
+    const l = s.split(":").map((m) => parseInt(m, 10));
+    if (l.some((m) => Number.isNaN(m))) return NaN;
     const i = l.length;
     if (i < 2 || i > 3) return NaN;
     if (i === 2 && (l[0] < 0 || l[0] > 23 || l[1] < 0 || l[1] > 59)) return NaN;
@@ -4367,28 +4399,28 @@ function zn(e, r, t) {
   }, a = o(n);
   if (Number.isNaN(a)) return t("Invalid time format");
   if (e.min && typeof e.min == "string") {
-    const c = o(e.min);
-    if (!Number.isNaN(c) && a < c)
+    const s = o(e.min);
+    if (!Number.isNaN(s) && a < s)
       return t("Time must be on or after {{1}}", e.min);
   }
   if (e.max && typeof e.max == "string") {
-    const c = o(e.max);
-    if (!Number.isNaN(c) && a > c)
+    const s = o(e.max);
+    if (!Number.isNaN(s) && a > s)
       return t("Time must be on or before {{1}}", e.max);
   }
 }
 function Pn(e) {
   return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);
 }
-function Bn(e, r, t) {
+function On(e, r, t) {
   const n = String(r ?? "").trim();
   return n === "" ? e.required ? t("Value required") : void 0 : Pn(n) ? Te(e, r, t, t("Email does not match pattern: {{1}}", e.pattern)) : t("Must be valid email format");
 }
-function Ln(e, r, t) {
+function Bn(e, r, t) {
   const n = String(r ?? "").trim();
   return n === "" ? e.required ? t("Value required") : void 0 : Te(e, n, t, "Invalid phone number format");
 }
-const On = /^(https?|ftp|file):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|]$/i, Tn = (e) => {
+const Ln = /^(https?|ftp|file):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|]$/i, Tn = (e) => {
   try {
     return new URL(e), !0;
   } catch {
@@ -4399,7 +4431,7 @@ function jn(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 (!(Ln.test(n) || Tn(n))) {
     if (e.allowRelative === !0) {
       if (!n.startsWith("/") || encodeURI(n) !== n)
         return t("Must be a valid URL");
@@ -4436,11 +4468,11 @@ function Wn(e, r, t) {
   const o = String(r ?? "").trim();
   if (o === "")
     return e.required ? t("Value required") : void 0;
-  const a = o.split(",").map((c) => c.trim()).filter((c) => c !== "");
+  const a = o.split(",").map((s) => s.trim()).filter((s) => s !== "");
   if (a.length === 0)
     return e.required ? t("Value required") : void 0;
-  for (const c of a)
-    if (!e.options?.some((l) => String(l.value) === c))
+  for (const s of a)
+    if (!e.options?.some((l) => String(l.value) === s))
       return t("Invalid option selected");
 }
 const _n = /^#([0-9A-F]{3}){1,2}$/i, Kn = (e) => _n.test(e);
@@ -4467,15 +4499,15 @@ function Yn(e, r, t) {
     return e.required ? t("Value required") : void 0;
   const o = Number(n);
   if (Number.isNaN(o)) return t("Must be a valid float");
-  const a = e.min ?? 0, c = e.max ?? 100;
+  const a = e.min ?? 0, s = e.max ?? 100;
   if (o < a)
     return t("Must be ≥ {{1}}", a);
-  if (o > c)
-    return t("Must be ≤ {{1}}", c);
+  if (o > s)
+    return t("Must be ≤ {{1}}", s);
 }
 let er = !1;
 function rt() {
-  er || (H("int", Ze), H("stepper", Ze), H("int-array", In), H("float", et), H("slider", Yn), H("float-array", Rn), H("text", me), H("string", me), H("multiline", me), H("password", me), H("email", Bn), H("date", Dn), H("time", zn), H("url", jn), H("phone", Ln), H("unit", Hn), H("dropdown", Un), H("multi-selection", Wn), H("color", Gn), H("rating", Jn), H("file", qn), er = !0);
+  er || (H("int", Ze), H("stepper", Ze), H("int-array", In), H("float", et), H("slider", Yn), H("float-array", Rn), H("text", me), H("string", me), H("multiline", me), H("password", me), H("email", On), H("date", Dn), H("time", zn), H("url", jn), H("phone", Bn), H("unit", Hn), H("dropdown", Un), H("multi-selection", Wn), H("color", Gn), H("rating", Jn), H("file", qn), er = !0);
 }
 rt();
 cn();
@@ -4587,15 +4619,15 @@ const Xn = (e) => ({
   defaultLanguage: n = "en",
   defaultTheme: o = "light",
   defaultLocalizeName: a = "",
-  defaultFieldValidationMode: c = "onEdit",
+  defaultFieldValidationMode: s = "onEdit",
   className: l = "reactaform-container",
   defaultDisplayInstanceName: i = !0
 }) => {
-  const u = r, d = a, m = o, f = n, h = s.useMemo(
+  const u = r, m = a, d = o, f = n, h = c.useMemo(
     () => t ?? {},
     [t]
-  ), [E, v] = s.useState({}), [p, y] = s.useState({});
-  s.useEffect(() => {
+  ), [k, v] = c.useState({}), [p, y] = c.useState({});
+  c.useEffect(() => {
     let b = !0;
     return (async () => {
       if (f === "en") {
@@ -4603,49 +4635,49 @@ const Xn = (e) => ({
         return;
       }
       try {
-        const N = await vn(f), w = N.success ? N.translations : {};
+        const E = await vn(f), w = E.success ? E.translations : {};
         b && v(w);
-        const S = await xn(f, d), k = S.success ? S.translations : {};
-        b && y(k);
+        const S = await xn(f, m), N = S.success ? S.translations : {};
+        b && y(N);
       } catch {
         b && (v({}), y({}));
       }
     })(), () => {
       b = !1;
     };
-  }, [f, d]);
-  const C = s.useMemo(() => Xn(h), [h]), V = s.useMemo(() => Zn(h), [h]), A = s.useMemo(
-    () => Sn(f, E, p),
-    [f, E, p]
-  ), I = s.useCallback(
+  }, [f, m]);
+  const C = c.useMemo(() => Xn(h), [h]), V = c.useMemo(() => Zn(h), [h]), A = c.useMemo(
+    () => Sn(f, k, p),
+    [f, k, p]
+  ), I = c.useCallback(
     (b, ...x) => A(b, ...x),
     [A]
-  ), M = s.useMemo(
+  ), M = c.useMemo(
     () => ({
       definitionName: u,
       language: f,
-      theme: m,
+      theme: d,
       formStyle: C,
       fieldStyle: V,
       t: I,
-      fieldValidationMode: c,
+      fieldValidationMode: s,
       displayInstanceName: i
     }),
     [
       u,
       f,
-      m,
+      d,
       V,
       C,
       I,
-      c,
+      s,
       i
     ]
   ), F = h?.height ? { height: "100%" } : void 0;
   return /* @__PURE__ */ g(Me.Provider, { value: M, children: /* @__PURE__ */ g(
     "div",
     {
-      "data-reactaform-theme": m,
+      "data-reactaform-theme": d,
       className: l,
       style: F,
       children: e
@@ -4722,8 +4754,8 @@ function ro(e, r) {
     return Array.isArray(n) && n.forEach((o) => {
       const a = o;
       if (a.type === "unit") {
-        const c = a.defaultUnit, l = Number(a.defaultValue) || void 0;
-        t.values[a.name] = [l || 0, c || "m"];
+        const s = a.defaultUnit, l = Number(a.defaultValue) || void 0;
+        t.values[a.name] = [l || 0, s || "m"];
       } else
         a.defaultValue !== void 0 && (t.values[a.name] = a.defaultValue);
     }), { success: !0, instance: t };
@@ -4775,12 +4807,12 @@ function wo(e, r, t) {
     (r.properties || []).forEach((i) => {
       a[i.name] = i;
     });
-    const c = (i, u, d) => {
+    const s = (i, u, m) => {
       if (i == null) return i;
-      const m = u.toLowerCase();
+      const d = u.toLowerCase();
       try {
-        if (m === "string" || m === "text") return String(i);
-        if (m === "int" || m === "integer" || m === "number" || m === "float") {
+        if (d === "string" || d === "text") return String(i);
+        if (d === "int" || d === "integer" || d === "number" || d === "float") {
           if (typeof i == "number") return i;
           if (typeof i == "boolean") return i ? 1 : 0;
           if (typeof i == "string") {
@@ -4791,7 +4823,7 @@ function wo(e, r, t) {
           }
           return 0;
         }
-        if (m === "boolean" || m === "bool" || m === "checkbox" || m === "switch") {
+        if (d === "boolean" || d === "bool" || d === "checkbox" || d === "switch") {
           if (typeof i == "boolean") return i;
           if (typeof i == "number") return i !== 0;
           if (typeof i == "string") {
@@ -4800,29 +4832,29 @@ function wo(e, r, t) {
           }
           return !!i;
         }
-        if (m === "unit") {
+        if (d === "unit") {
           if (Array.isArray(i) && i.length >= 2) return i;
           if (Array.isArray(i) && i.length === 1)
-            return [i[0], d && d.defaultUnit || "m"];
-          if (typeof i == "number") return [i, d && d.defaultUnit || "m"];
+            return [i[0], m && m.defaultUnit || "m"];
+          if (typeof i == "number") return [i, m && m.defaultUnit || "m"];
           if (typeof i == "string") {
             const f = Number(i);
-            return [Number.isNaN(f) ? 0 : f, d && d.defaultUnit || "m"];
+            return [Number.isNaN(f) ? 0 : f, m && m.defaultUnit || "m"];
           }
-          return [0, d && d.defaultUnit || "m"];
+          return [0, m && m.defaultUnit || "m"];
         }
-        if (m.endsWith("[]") || m === "array" || m === "int-array" || m === "float-array")
+        if (d.endsWith("[]") || d === "array" || d === "int-array" || d === "float-array")
           return Array.isArray(i) ? i : typeof i == "string" ? i.split(",").map((f) => f.trim()).filter(Boolean) : [i];
       } catch {
       }
       return i;
     }, l = e.values || {};
     Object.keys(l).forEach((i) => {
-      const u = l[i], d = a[i];
-      if (!d)
+      const u = l[i], m = a[i];
+      if (!m)
         return;
-      const m = Array.isArray(u) ? "array" : u === null ? "null" : typeof u, f = (d.type || "").toLowerCase();
-      m === f || f === "string" && typeof u == "string" ? o[i] = u : o[i] = c(u, f, d);
+      const d = Array.isArray(u) ? "array" : u === null ? "null" : typeof u, f = (m.type || "").toLowerCase();
+      d === f || f === "string" && typeof u == "string" ? o[i] = u : o[i] = s(u, f, m);
     }), (r.properties || []).forEach((i) => {
       const u = i.name;
       u in o || (o[u] = i.defaultValue);
@@ -4841,19 +4873,19 @@ function wo(e, r, t) {
   }
 }
 function to(e) {
-  const [r, t] = s.useState(null);
-  return s.useEffect(() => {
+  const [r, t] = c.useState(null);
+  return c.useEffect(() => {
     const n = document.querySelector("[data-reactaform-theme]");
     if (!n) return;
     const o = n.closest("[data-reactaform-theme]");
     if (!o) return;
     const a = () => t(o.getAttribute("data-reactaform-theme"));
     a();
-    const c = new MutationObserver((l) => {
+    const s = new MutationObserver((l) => {
       for (const i of l)
         i.type === "attributes" && i.attributeName === "data-reactaform-theme" && a();
     });
-    return c.observe(o, { attributes: !0, attributeFilter: ["data-reactaform-theme"] }), () => c.disconnect();
+    return s.observe(o, { attributes: !0, attributeFilter: ["data-reactaform-theme"] }), () => s.disconnect();
   }, [e]), r;
 }
 const So = ({
@@ -4863,43 +4895,43 @@ const So = ({
   className: n,
   theme: o,
   style: a,
-  fieldValidationMode: c = "onEdit",
+  fieldValidationMode: s = "onEdit",
   displayInstanceName: l = !0,
   onSubmit: i = void 0,
   onValidation: u = void 0
 }) => {
-  const d = s.useMemo(() => {
+  const m = c.useMemo(() => {
     try {
       return typeof e == "string" ? JSON.parse(e) : e ?? null;
     } catch {
       return null;
     }
-  }, [e]), m = { fontSize: "inherit", fontFamily: "inherit", ...a }, f = to(), h = o ?? f ?? "light", E = t ?? "en";
-  s.useEffect(() => {
+  }, [e]), d = { fontSize: "inherit", fontFamily: "inherit", ...a }, f = to(), h = o ?? f ?? "light", k = t ?? "en";
+  c.useEffect(() => {
     let p = document.getElementById("popup-root");
     p || (p = document.createElement("div"), p.id = "popup-root", document.body.appendChild(p));
   }, []);
-  const v = s.useMemo(() => {
+  const v = c.useMemo(() => {
     if (r) return r;
-    if (!d) return null;
-    const p = ro(d, d.name);
+    if (!m) return null;
+    const p = ro(m, m.name);
     return !p.success || !p.instance ? null : p.instance;
-  }, [r, d]);
-  return d ? v ? /* @__PURE__ */ g(
+  }, [r, m]);
+  return m ? v ? /* @__PURE__ */ g(
     Qn,
     {
-      definitionName: d.name,
-      defaultStyle: m,
-      defaultLanguage: E,
+      definitionName: m.name,
+      defaultStyle: d,
+      defaultLanguage: k,
       defaultTheme: h,
-      defaultLocalizeName: d.localization || "",
+      defaultLocalizeName: m.localization || "",
       className: n,
-      defaultFieldValidationMode: c,
+      defaultFieldValidationMode: s,
       defaultDisplayInstanceName: l,
       children: /* @__PURE__ */ g(
         bn,
         {
-          definition: d,
+          definition: m,
           instance: v,
           onSubmit: i,
           onValidation: u
@@ -4943,8 +4975,8 @@ function no(e) {
       const n = _r(t);
       if (n) {
         let o;
-        for (const [a, c] of ee)
-          if (c.components && c.components[t] === n) {
+        for (const [a, s] of ee)
+          if (s.components && s.components[t] === n) {
             o = a;
             break;
           }
@@ -4959,11 +4991,11 @@ function no(e) {
   if (e.fieldCustomValidators)
     for (const [t, n] of Object.entries(e.fieldCustomValidators))
       for (const o of Object.keys(n)) {
-        const c = _.fieldValidators.get(t)?.get(o);
-        mr(t, o) && c && c !== e.name && r.push({
+        const s = _.fieldValidators.get(t)?.get(o);
+        mr(t, o) && s && s !== e.name && r.push({
           type: "fieldCustomValidator",
           name: `${t}:${o}`,
-          existingPlugin: c,
+          existingPlugin: s,
           newPlugin: e.name
         });
       }
@@ -4999,13 +5031,13 @@ function no(e) {
     }
   return r;
 }
-function se(e, r, t, n, o, a, c, l) {
+function se(e, r, t, n, o, a, s, l) {
   for (const i of Object.keys(e)) {
     let u;
-    if (l ? u = o.find((d) => d.type === "fieldCustomValidator" && d.name === `${l}:${i}`) : e === n.components ? u = o.find((d) => d.type === "component" && d.name === i) : e === n.formValidators ? u = o.find((d) => d.type === "formValidator" && d.name === i) : e === n.fieldTypeValidators ? u = o.find((d) => d.type === "fieldTypeValidator" && d.name === `type:${i}`) : e === n.submissionHandlers && (u = o.find((d) => d.type === "submissionHandler" && d.name === i)), tt(u || null, a, c))
+    if (l ? u = o.find((m) => m.type === "fieldCustomValidator" && m.name === `${l}:${i}`) : e === n.components ? u = o.find((m) => m.type === "component" && m.name === i) : e === n.formValidators ? u = o.find((m) => m.type === "formValidator" && m.name === i) : e === n.fieldTypeValidators ? u = o.find((m) => m.type === "fieldTypeValidator" && m.name === `type:${i}`) : e === n.submissionHandlers && (u = o.find((m) => m.type === "submissionHandler" && m.name === i)), tt(u || null, a, s))
       if (l) {
-        const d = r.get(l) || /* @__PURE__ */ new Map();
-        d.set(i, n.name), r.set(l, d), t(i, e[i]);
+        const m = r.get(l) || /* @__PURE__ */ new Map();
+        m.set(i, n.name), r.set(l, m), t(i, e[i]);
       } else
         r === _.components ? r.set(
           i,
@@ -5038,7 +5070,7 @@ function Co(e, r) {
       se(
         a,
         _.fieldValidators,
-        (c, l) => ht(o, c, l),
+        (s, l) => ht(o, s, l),
         e,
         n,
         t,
@@ -5082,8 +5114,8 @@ function ko(e, r = !1) {
       for (const [n, o] of Object.entries(t.fieldCustomValidators)) {
         const a = _.fieldValidators.get(n);
         if (a) {
-          for (const c of Object.keys(o))
-            a.delete(c);
+          for (const s of Object.keys(o))
+            a.delete(s);
           a.size === 0 && _.fieldValidators.delete(n);
         }
       }
@@ -5139,7 +5171,7 @@ function Mo(e, r, t = {}) {
       includeMetadata: n = !1,
       dateFormat: o = "iso",
       fileHandling: a = "metadata",
-      prettify: c = !1,
+      prettify: s = !1,
       excludeFields: l = [],
       includeOnlyFields: i = []
     } = t;
@@ -5148,35 +5180,35 @@ function Mo(e, r, t = {}) {
         success: !1,
         error: "Instance must be a valid object"
       };
-    const u = [], d = [], m = {}, h = (nt(r) || re(r) && Array.isArray(r.properties) ? r.properties : []).filter(je), E = new Map(h.map((p) => [p.name, p]));
+    const u = [], m = [], d = {}, h = (nt(r) || re(r) && Array.isArray(r.properties) ? r.properties : []).filter(je), k = new Map(h.map((p) => [p.name, p]));
     for (const [p, y] of Object.entries(e)) {
       if (l.includes(p)) {
-        d.push(p);
+        m.push(p);
         continue;
       }
       if (i.length > 0 && !i.includes(p)) {
-        d.push(p);
+        m.push(p);
         continue;
       }
       if (y === void 0) continue;
-      const C = E.get(p);
+      const C = k.get(p);
       try {
-        m[p] = oo(y, C, { dateFormat: o, fileHandling: a });
+        d[p] = oo(y, C, { dateFormat: o, fileHandling: a });
       } catch (V) {
-        u.push(`Error serializing field '${p}': ${String(V)}`), m[p] = null;
+        u.push(`Error serializing field '${p}': ${String(V)}`), d[p] = null;
       }
     }
-    return n && (m._metadata = {
+    return n && (d._metadata = {
       serializedAt: (/* @__PURE__ */ new Date()).toISOString(),
       version: (re(r) ? r.version : void 0) || "1.0.0",
-      fieldCount: Object.keys(m).length - 1
+      fieldCount: Object.keys(d).length - 1
       // Exclude metadata itself
     }), {
       success: !0,
-      data: c ? JSON.stringify(m, null, 2) : JSON.stringify(m),
+      data: s ? JSON.stringify(d, null, 2) : JSON.stringify(d),
       metadata: {
-        fieldCount: Object.keys(m).length,
-        excludedFields: d,
+        fieldCount: Object.keys(d).length,
+        excludedFields: m,
         warnings: u
       }
     };
@@ -5263,7 +5295,7 @@ function Vo(e, r, t = {}) {
       strict: n = !1,
       validateTypes: o = !0,
       preserveUnknownFields: a = !0,
-      dateFormat: c = "auto"
+      dateFormat: s = "auto"
     } = t;
     if (!e || typeof e != "string")
       return {
@@ -5284,7 +5316,7 @@ function Vo(e, r, t = {}) {
         success: !1,
         error: "Parsed data must be an object"
       };
-    const i = [], u = [], d = {}, f = (nt(r) || re(r) && Array.isArray(r.properties) ? r.properties : []).filter(je), h = new Map(f.map((v) => [v.name, v]));
+    const i = [], u = [], m = {}, f = (nt(r) || re(r) && Array.isArray(r.properties) ? r.properties : []).filter(je), h = new Map(f.map((v) => [v.name, v]));
     for (const v of f) {
       const p = v.name, y = l[p];
       if (y === void 0) {
@@ -5292,21 +5324,21 @@ function Vo(e, r, t = {}) {
         continue;
       }
       try {
-        d[p] = ao(y, v, { validateTypes: o, dateFormat: c });
+        m[p] = ao(y, v, { validateTypes: o, dateFormat: s });
       } catch (C) {
         const V = `Error deserializing field '${p}': ${String(C)}`;
-        n ? u.push(V) : (i.push(V), d[p] = y);
+        n ? u.push(V) : (i.push(V), m[p] = y);
       }
     }
     if (a)
       for (const [v, p] of Object.entries(l))
-        !h.has(v) && v !== "_metadata" && (n && i.push(`Unknown field '${v}' preserved`), d[v] = p);
-    const E = u.length > 0;
+        !h.has(v) && v !== "_metadata" && (n && i.push(`Unknown field '${v}' preserved`), m[v] = p);
+    const k = u.length > 0;
     return {
-      success: !E,
-      data: d,
+      success: !k,
+      data: m,
       warnings: i.length > 0 ? i : void 0,
-      validationErrors: E ? u : void 0
+      validationErrors: k ? u : void 0
     };
   } catch (n) {
     return {
@@ -5388,10 +5420,10 @@ function Ro(e, r = {}) {
     if (typeof e == "string")
       try {
         o = JSON.parse(e);
-      } catch (d) {
+      } catch (m) {
         return {
           success: !1,
-          error: `Invalid JSON for definition: ${d instanceof Error ? d.message : "Unknown parsing error"}`
+          error: `Invalid JSON for definition: ${m instanceof Error ? m.message : "Unknown parsing error"}`
         };
       }
     else if (e && typeof e == "object")
@@ -5401,13 +5433,13 @@ function Ro(e, r = {}) {
         success: !1,
         error: "Input must be a string or object"
       };
-    const a = [], c = [], l = ["name", "version", "displayName"];
-    for (const d of l)
-      if (!(d in o) || !o[d])
+    const a = [], s = [], l = ["name", "version", "displayName"];
+    for (const m of l)
+      if (!(m in o) || !o[m])
         if (t)
-          c.push(`Required field '${d}' is missing`);
+          s.push(`Required field '${m}' is missing`);
         else
-          switch (a.push(`Missing field '${d}', using default`), d) {
+          switch (a.push(`Missing field '${m}', using default`), m) {
             case "name":
               o.name = "unnamed-definition";
               break;
@@ -5419,20 +5451,20 @@ function Ro(e, r = {}) {
               break;
           }
     const i = Array.isArray(o.properties) ? o.properties : null;
-    i ? o.properties = i.map((d, m) => {
-      const f = re(d) ? d : {}, h = { ...f };
+    i ? o.properties = i.map((m, d) => {
+      const f = re(m) ? m : {}, h = { ...f };
       if (!f.name) {
-        const E = `Property at index ${m} missing 'name'`;
-        t ? c.push(E) : (a.push(`${E}, using 'field_${m}'`), h.name = `field_${m}`);
+        const k = `Property at index ${d} missing 'name'`;
+        t ? s.push(k) : (a.push(`${k}, using 'field_${d}'`), h.name = `field_${d}`);
       }
-      return f.displayName || (h.displayName = f.name || `Field ${m}`), f.type || (t && n ? c.push(`Property '${f.name || m}' missing 'type'`) : (a.push(`Property '${f.name || m}' missing 'type', using 'string'`), h.type = "string")), f.defaultValue === void 0 && (h.defaultValue = null), f.required === void 0 && (h.required = !1), h;
-    }) : t ? c.push("Properties must be an array") : (a.push("Properties not found or invalid, using empty array"), o.properties = []);
-    const u = c.length > 0;
+      return f.displayName || (h.displayName = f.name || `Field ${d}`), f.type || (t && n ? s.push(`Property '${f.name || d}' missing 'type'`) : (a.push(`Property '${f.name || d}' missing 'type', using 'string'`), h.type = "string")), f.defaultValue === void 0 && (h.defaultValue = null), f.required === void 0 && (h.required = !1), h;
+    }) : t ? s.push("Properties must be an array") : (a.push("Properties not found or invalid, using empty array"), o.properties = []);
+    const u = s.length > 0;
     return {
       success: !u,
       data: o,
       warnings: a.length > 0 ? a : void 0,
-      validationErrors: u ? c : void 0
+      validationErrors: u ? s : void 0
     };
   } catch (t) {
     return {
@@ -5554,7 +5586,7 @@ export {
   So as ReactaForm,
   Qn as ReactaFormProvider,
   bn as ReactaFormRenderer,
-  L as StandardFieldLayout,
+  B as StandardFieldLayout,
   fo as Units,
   W as combineClasses,
   ro as createInstanceFromDefinition,