reactaform 1.8.2 → 1.8.3

package/dist/reactaform.es.js

@@ -1,8 +1,8 @@
 import { jsx as p, jsxs as A, Fragment as Ne } from "react/jsx-runtime";
 import * as u from "react";
-import { createContext as zr, useContext as Or, useRef as pe, useEffect as je, useCallback as ge } from "react";
+import { createContext as zr, useContext as Lr, useRef as pe, useEffect as je, useCallback as ge } from "react";
 import * as me from "react-dom";
-const Lr = `/* ReactaForm CSS Custom Properties (CSS Variables) */\r
+const Or = `/* ReactaForm CSS Custom Properties (CSS Variables) */\r
 \r
 /* Default Light Theme */\r
 :root {\r
@@ -302,7 +302,7 @@ const Lr = `/* ReactaForm CSS Custom Properties (CSS Variables) */\r
   \r
 }\r
 `, Ie = zr(void 0), j = () => {
-  const e = Or(Ie);
+  const e = Lr(Ie);
   if (!e)
     throw new Error("❌ useReactaFormContext must be used within a <ReactaFormProvider>");
   return e;
@@ -391,7 +391,7 @@ const R = {
   inputSelect: "reactaform-select",
   rangeInput: "reactaform-input--range",
   button: "reactaform-button"
-}, U = (...e) => {
+}, q = (...e) => {
   const r = [];
   for (const t of e)
     t && (typeof t == "string" ? r.push(t) : typeof t == "object" && Object.entries(t).forEach(([n, a]) => {
@@ -508,13 +508,13 @@ const Hr = () => /* @__PURE__ */ A(
     const h = w.current.getBoundingClientRect(), y = 8, C = window.innerWidth, E = window.innerHeight, I = -4;
     let M = b.right + y, P = b.top + b.height / 2 - h.height / 2 + I;
     M + h.width > C - y && (M = b.left - y - h.width), M = Math.max(y, Math.min(M, C - h.width - y)), P = Math.max(y, Math.min(P, E - h.height - y)), l({ x: M, y: P }), d(!0);
-    const H = g.current.closest("[data-reactaform-theme]"), Z = document.getElementById("popup-root");
-    if (H && Z) {
+    const H = g.current.closest("[data-reactaform-theme]"), Y = document.getElementById("popup-root");
+    if (H && Y) {
       const ne = getComputedStyle(H);
-      Z.style.setProperty(
+      Y.style.setProperty(
         "--reactaform-tooltip-color-bg",
         ne.getPropertyValue("--reactaform-tooltip-color-bg")
-      ), Z.style.setProperty(
+      ), Y.style.setProperty(
         "--reactaform-tooltip-color",
         ne.getPropertyValue("--reactaform-tooltip-color")
       );
@@ -630,13 +630,13 @@ const nr = u.memo(({
   ] });
 });
 nr.displayName = "RowFieldLayout";
-const O = u.memo(({
+const L = u.memo(({
   field: e,
   error: r,
   children: t,
   rightAlign: n = !1
 }) => e.labelLayout === "column-left" || e.labelLayout === "column-center" ? /* @__PURE__ */ p(ve, { field: e, error: r, showLabel: !0, children: t }) : e.type === "checkbox" || e.type === "switch" ? /* @__PURE__ */ p(ve, { field: e, error: r, showLabel: !1, children: t }) : /* @__PURE__ */ p(nr, { field: e, error: r, rightAlign: n, children: t }));
-O.displayName = "StandardFieldLayout";
+L.displayName = "StandardFieldLayout";
 const Me = u.memo(({ children: e, id: r }) => {
   const t = u.useMemo(() => ({
     color: "var(--reactaform-error-color)",
@@ -674,7 +674,7 @@ const ar = u.memo(({ name: e, onChange: r }) => {
           id: "instance-name-input",
           type: "text",
           value: e,
-          className: U(R.input, R.textInput),
+          className: q(R.input, R.textInput),
           onChange: (n) => r(n.target.value),
           placeholder: t("Enter instance name")
         }
@@ -785,7 +785,7 @@ async function Gr(e, r, t) {
     }
   return null;
 }
-function L(e, r) {
+function O(e, r) {
   const { definitionName: t, t: n, fieldValidationMode: a } = j();
   return u.useCallback(
     (o) => a === "realTime" ? mr(t, e, o, n) : r ?? null,
@@ -799,7 +799,7 @@ const Jr = ({
   onError: n,
   error: a
 }) => {
-  const { t: o } = j(), i = L(e, a)(r);
+  const { t: o } = j(), i = O(e, a)(r);
   u.useEffect(() => {
     a || n?.(i);
   }, [i, a, n]);
@@ -814,7 +814,7 @@ const Jr = ({
     },
     [t, r]
   ), l = e.name;
-  return /* @__PURE__ */ p(O, { field: e, rightAlign: !1, error: i, children: /* @__PURE__ */ A(
+  return /* @__PURE__ */ p(L, { field: e, rightAlign: !1, error: i, children: /* @__PURE__ */ A(
     "div",
     {
       style: {
@@ -912,7 +912,7 @@ const qe = [
   onError: n,
   error: a
 }) => {
-  const { t: o } = j(), c = L(e, a), i = u.useMemo(
+  const { t: o } = j(), c = O(e, a), i = u.useMemo(
     () => he(r),
     [r]
   ), { inputRef: s, error: m, handleChange: l } = _({
@@ -949,7 +949,7 @@ const qe = [
     () => Qr(f),
     [f]
   );
-  return /* @__PURE__ */ p(O, { field: e, error: m, children: /* @__PURE__ */ A(
+  return /* @__PURE__ */ p(L, { field: e, error: m, children: /* @__PURE__ */ A(
     "div",
     {
       style: {
@@ -965,7 +965,7 @@ const qe = [
             id: e.name,
             value: f,
             onChange: w,
-            className: U(
+            className: q(
               R.input,
               R.inputSelect
             ),
@@ -1035,7 +1035,7 @@ const qe = [
   onError: n,
   error: a
 }) => {
-  const o = L(e, a), c = We(r), { inputRef: i, error: s, handleChange: m } = _({
+  const o = O(e, a), c = We(r), { inputRef: i, error: s, handleChange: m } = _({
     value: c,
     onChange: t,
     onError: n,
@@ -1043,7 +1043,7 @@ const qe = [
   });
   return u.useEffect(() => {
     a || n?.(s);
-  }, [s, a, n]), /* @__PURE__ */ p(O, { field: e, error: s, children: /* @__PURE__ */ p(
+  }, [s, a, n]), /* @__PURE__ */ p(L, { field: e, error: s, children: /* @__PURE__ */ p(
     "input",
     {
       id: e.name,
@@ -1051,7 +1051,7 @@ const qe = [
       ref: i,
       defaultValue: We(r),
       onChange: m,
-      className: U(R.input, R.textInput),
+      className: q(R.input, R.textInput),
       ...e.minDate ? { min: e.minDate } : {},
       ...e.maxDate ? { max: e.maxDate } : {},
       "aria-invalid": !!s,
@@ -1069,7 +1069,7 @@ const qe = [
   u.useEffect(() => {
     l.current = n;
   }, [n]);
-  const F = L(e, a), [S, v] = u.useState(null), k = u.useRef(null);
+  const F = O(e, a), [S, v] = u.useState(null), k = u.useRef(null);
   u.useEffect(() => {
     const y = String(r ?? "");
     let C = F(y);
@@ -1113,7 +1113,7 @@ const qe = [
     ...V(s, void 0, "arrow")
   }), [i, s]);
   return /* @__PURE__ */ A("div", { children: [
-    /* @__PURE__ */ p(O, { field: e, error: S, children: /* @__PURE__ */ A(
+    /* @__PURE__ */ p(L, { field: e, error: S, children: /* @__PURE__ */ A(
       "div",
       {
         ref: m,
@@ -1318,13 +1318,13 @@ const qe = [
   onError: n,
   error: a
 }) => {
-  const o = L(e, a), { inputRef: c, error: i, handleChange: s } = _({
+  const o = O(e, a), { inputRef: c, error: i, handleChange: s } = _({
     value: r,
     onChange: t,
     onError: n,
     validate: o
   });
-  return /* @__PURE__ */ p(O, { field: e, error: i, children: /* @__PURE__ */ p(
+  return /* @__PURE__ */ p(L, { field: e, error: i, children: /* @__PURE__ */ p(
     "input",
     {
       id: e.name,
@@ -1332,7 +1332,7 @@ const qe = [
       defaultValue: String(r ?? ""),
       ref: c,
       onChange: s,
-      className: U(R.input, R.textInput),
+      className: q(R.input, R.textInput),
       "aria-invalid": !!i,
       "aria-describedby": i ? `${e.name}-error` : void 0
     }
@@ -1362,7 +1362,7 @@ const qe = [
   }, [n]);
   const g = (x, V) => V.some(
     (b) => b.name === x.name && b.size === x.size && b.lastModified === x.lastModified
-  ), w = L(e, a);
+  ), w = O(e, a);
   u.useEffect(() => {
     const x = w(r ?? []);
     t?.(r), x !== l.current && (l.current = x, d(x), m.current?.(x ?? null));
@@ -1474,7 +1474,7 @@ const qe = [
       `${V.name}-${b}`
     )) });
   };
-  return /* @__PURE__ */ p(O, { field: e, error: f, children: /* @__PURE__ */ A("div", { style: { width: "100%" }, children: [
+  return /* @__PURE__ */ p(L, { field: e, error: f, children: /* @__PURE__ */ A("div", { style: { width: "100%" }, children: [
     /* @__PURE__ */ A(
       "div",
       {
@@ -1559,13 +1559,13 @@ const qe = [
   onError: n,
   error: a
 }) => {
-  const o = L(e, a), c = Array.isArray(r) ? r.join(", ") : String(r ?? ""), { inputRef: i, error: s, handleChange: m } = _({
+  const o = O(e, a), c = Array.isArray(r) ? r.join(", ") : String(r ?? ""), { inputRef: i, error: s, handleChange: m } = _({
     value: c,
     onChange: t,
     onError: n,
     validate: o
   });
-  return /* @__PURE__ */ p(O, { field: e, error: s, children: /* @__PURE__ */ p(
+  return /* @__PURE__ */ p(L, { field: e, error: s, children: /* @__PURE__ */ p(
     "input",
     {
       id: e.name,
@@ -1573,7 +1573,7 @@ const qe = [
       defaultValue: c,
       ref: i,
       onChange: m,
-      className: U(R.input, R.textInput),
+      className: q(R.input, R.textInput),
       style: { flex: 1 },
       "aria-invalid": !!s,
       "aria-describedby": s ? `${e.name}-error` : void 0
@@ -1586,13 +1586,13 @@ const qe = [
   onError: n,
   error: a
 }) => {
-  const o = L(e, a), { inputRef: c, error: i, handleChange: s } = _({
+  const o = O(e, a), { inputRef: c, error: i, handleChange: s } = _({
     value: r,
     onChange: t,
     onError: n,
     validate: o
   }), m = a ?? i;
-  return /* @__PURE__ */ p(O, { field: e, error: m, children: /* @__PURE__ */ p(
+  return /* @__PURE__ */ p(L, { field: e, error: m, children: /* @__PURE__ */ p(
     "input",
     {
       id: e.name,
@@ -1600,7 +1600,7 @@ const qe = [
       ref: c,
       defaultValue: String(r ?? ""),
       onChange: s,
-      className: U(
+      className: q(
         R.input,
         R.inputNumber
       ),
@@ -1660,7 +1660,7 @@ const ut = ({ field: e, value: r }) => {
     boxShadow: "0 2px 6px rgba(0,0,0,0.1)",
     margin: "0 0 8px 0"
   };
-  return d && g ? (w.width = d, w.height = g, F.width = `${d}px`, F.height = `${g}px`) : d && !g ? (w.width = d, F.width = `${d}px`, F.height = "auto") : !d && g && (w.height = g, F.width = "auto", F.height = `${g}px`), /* @__PURE__ */ p(O, { field: e, children: /* @__PURE__ */ p(
+  return d && g ? (w.width = d, w.height = g, F.width = `${d}px`, F.height = `${g}px`) : d && !g ? (w.width = d, F.width = `${d}px`, F.height = "auto") : !d && g && (w.height = g, F.width = "auto", F.height = `${g}px`), /* @__PURE__ */ p(L, { field: e, children: /* @__PURE__ */ p(
     "div",
     {
       "data-testid": "image-wrapper",
@@ -1687,13 +1687,13 @@ const ut = ({ field: e, value: r }) => {
   onError: n,
   error: a
 }) => {
-  const o = L(e, a), c = Array.isArray(r) ? r.join(", ") : String(r ?? ""), { inputRef: i, error: s, handleChange: m } = _({
+  const o = O(e, a), c = Array.isArray(r) ? r.join(", ") : String(r ?? ""), { inputRef: i, error: s, handleChange: m } = _({
     value: c,
     onChange: t,
     onError: n,
     validate: o
   });
-  return /* @__PURE__ */ p(O, { field: e, error: s, children: /* @__PURE__ */ p(
+  return /* @__PURE__ */ p(L, { field: e, error: s, children: /* @__PURE__ */ p(
     "input",
     {
       id: e.name,
@@ -1701,7 +1701,7 @@ const ut = ({ field: e, value: r }) => {
       defaultValue: c,
       ref: i,
       onChange: m,
-      className: U(R.input, R.textInput),
+      className: q(R.input, R.textInput),
       style: { flex: 1 },
       "aria-invalid": !!s,
       "aria-describedby": s ? `${e.name}-error` : void 0
@@ -1714,13 +1714,13 @@ const ut = ({ field: e, value: r }) => {
   onError: n,
   error: a
 }) => {
-  const o = L(e, a), { inputRef: c, error: i, handleChange: s } = _({
+  const o = O(e, a), { inputRef: c, error: i, handleChange: s } = _({
     value: r,
     onChange: t,
     onError: n,
     validate: o
   });
-  return /* @__PURE__ */ p(O, { field: e, error: i, children: /* @__PURE__ */ p(
+  return /* @__PURE__ */ p(L, { field: e, error: i, children: /* @__PURE__ */ p(
     "input",
     {
       id: e.name,
@@ -1728,7 +1728,7 @@ const ut = ({ field: e, value: r }) => {
       defaultValue: String(r ?? ""),
       ref: c,
       onChange: s,
-      className: U(R.input, R.inputNumber),
+      className: q(R.input, R.inputNumber),
       "aria-invalid": !!i,
       "aria-describedby": i ? `${e.name}-error` : void 0
     }
@@ -1742,13 +1742,13 @@ const ft = u.memo(fr), dt = ({
   onError: n,
   error: a
 }) => {
-  const o = L(e, a), { inputRef: c, error: i, handleChange: s } = _({
+  const o = O(e, a), { inputRef: c, error: i, handleChange: s } = _({
     value: r,
     onChange: t,
     onError: n,
     validate: o
   });
-  return /* @__PURE__ */ p(O, { field: e, error: i, children: /* @__PURE__ */ p(
+  return /* @__PURE__ */ p(L, { field: e, error: i, children: /* @__PURE__ */ p(
     "textarea",
     {
       id: e.name,
@@ -1761,7 +1761,7 @@ const ft = u.memo(fr), dt = ({
         width: "100%",
         boxSizing: "border-box"
       },
-      className: U(R.input, R.textInput),
+      className: q(R.input, R.textInput),
       "aria-invalid": !!i,
       "aria-describedby": i ? `${e.name}-error` : void 0
     }
@@ -1789,7 +1789,7 @@ const ft = u.memo(fr), dt = ({
   ), v = u.useMemo(() => {
     const E = Array.isArray(r) ? r : [], I = new Set(S.map((M) => M.value));
     return E.filter((M) => I.has(M));
-  }, [r, S]), k = L(e, a), [$, N] = u.useState(null), x = u.useRef(null);
+  }, [r, S]), k = O(e, a), [$, N] = u.useState(null), x = u.useRef(null);
   u.useEffect(() => {
     const E = k(Array.isArray(r) ? r : []);
     E !== x.current && (x.current = E, N(E), o.current?.(E ?? null));
@@ -1843,7 +1843,7 @@ const ft = u.memo(fr), dt = ({
     [s, m]
   );
   return /* @__PURE__ */ A("div", { children: [
-    /* @__PURE__ */ p(O, { field: e, error: $, children: /* @__PURE__ */ p("div", { style: { width: "100%" }, children: /* @__PURE__ */ A(
+    /* @__PURE__ */ p(L, { field: e, error: $, children: /* @__PURE__ */ p("div", { style: { width: "100%" }, children: /* @__PURE__ */ A(
       "div",
       {
         ref: f,
@@ -2093,13 +2093,13 @@ const ft = u.memo(fr), dt = ({
   onError: n,
   error: a
 }) => {
-  const o = L(e, a), { inputRef: c, error: i, handleChange: s } = _({
+  const o = O(e, a), { inputRef: c, error: i, handleChange: s } = _({
     value: String(r ?? ""),
     onChange: t,
     onError: n,
     validate: o
   }), m = Math.max(1, Math.round(e.step ?? 1));
-  return /* @__PURE__ */ p(O, { field: e, error: i, children: /* @__PURE__ */ p(
+  return /* @__PURE__ */ p(L, { field: e, error: i, children: /* @__PURE__ */ p(
     "input",
     {
       id: e.name,
@@ -2126,13 +2126,13 @@ const ft = u.memo(fr), dt = ({
   onError: n,
   error: a
 }) => {
-  const o = L(e, a), { inputRef: c, error: i, handleChange: s } = _({
+  const o = O(e, a), { inputRef: c, error: i, handleChange: s } = _({
     value: r,
     onChange: t,
     onError: n,
     validate: o
   });
-  return /* @__PURE__ */ p(O, { field: e, error: i, children: /* @__PURE__ */ p(
+  return /* @__PURE__ */ p(L, { field: e, error: i, children: /* @__PURE__ */ p(
     "input",
     {
       id: e.name,
@@ -2140,7 +2140,7 @@ const ft = u.memo(fr), dt = ({
       defaultValue: String(r ?? ""),
       ref: c,
       onChange: s,
-      className: U(R.input, R.textInput),
+      className: q(R.input, R.textInput),
       "aria-invalid": !!i,
       "aria-describedby": i ? `${e.name}-error` : void 0
     }
@@ -2152,7 +2152,7 @@ const ft = u.memo(fr), dt = ({
   onError: n,
   error: a
 }) => {
-  const { t: o } = j(), c = L(e, a), i = e.layout?.toLowerCase() === "horizontal" ? "row" : "column", s = u.useRef(null), m = u.useRef(n);
+  const { t: o } = j(), c = O(e, a), i = e.layout?.toLowerCase() === "horizontal" ? "row" : "column", s = u.useRef(null), m = u.useRef(n);
   u.useEffect(() => {
     m.current = n;
   }, [n]);
@@ -2194,7 +2194,7 @@ const ft = u.memo(fr), dt = ({
     width: i === "column" ? "100%" : void 0,
     justifyContent: "flex-start"
   };
-  return /* @__PURE__ */ p(O, { field: e, error: l, children: /* @__PURE__ */ p(
+  return /* @__PURE__ */ p(L, { field: e, error: l, children: /* @__PURE__ */ p(
     "div",
     {
       ref: s,
@@ -2208,7 +2208,7 @@ const ft = u.memo(fr), dt = ({
         return /* @__PURE__ */ A(
           "label",
           {
-            className: U(R.label),
+            className: q(R.label),
             style: S,
             children: [
               /* @__PURE__ */ p(
@@ -2253,7 +2253,7 @@ const ft = u.memo(fr), dt = ({
   userSelect: "none",
   transition: "color 0.12s ease"
 }, wt = ({ field: e, value: r, onChange: t, onError: n, error: a }) => {
-  const { t: o } = j(), c = L(e, a), i = e.max ?? 5, s = e.icon?.trim() || "★", [m, l] = u.useState(null), f = u.useRef([]), d = u.useMemo(() => Math.min(Math.max(r ?? 0, 0), i), [r, i]), g = u.useMemo(() => c(d) ?? null, [c, d]);
+  const { t: o } = j(), c = O(e, a), i = e.max ?? 5, s = e.icon?.trim() || "★", [m, l] = u.useState(null), f = u.useRef([]), d = u.useMemo(() => Math.min(Math.max(r ?? 0, 0), i), [r, i]), g = u.useMemo(() => c(d) ?? null, [c, d]);
   u.useEffect(() => {
     n?.(g);
   }, [g, n]);
@@ -2282,7 +2282,7 @@ const ft = u.memo(fr), dt = ({
     },
     [i, w]
   );
-  return /* @__PURE__ */ p(O, { field: e, error: g, children: /* @__PURE__ */ p(
+  return /* @__PURE__ */ p(L, { field: e, error: g, children: /* @__PURE__ */ p(
     "div",
     {
       role: "radiogroup",
@@ -2320,13 +2320,13 @@ const ft = u.memo(fr), dt = ({
   onError: n,
   error: a
 }) => {
-  const { t: o } = j(), c = L(e, a), { inputRef: i, error: s, handleChange: m } = _({
+  const { t: o } = j(), c = O(e, a), { inputRef: i, error: s, handleChange: m } = _({
     value: r,
     onChange: t,
     onError: n,
     validate: c
   }), [l, f] = u.useState(!1), d = () => f((g) => !g);
-  return /* @__PURE__ */ p(O, { field: e, error: s, children: /* @__PURE__ */ A("div", { style: { display: "flex", alignItems: "center", gap: 8, width: "100%" }, children: [
+  return /* @__PURE__ */ p(L, { field: e, error: s, children: /* @__PURE__ */ A("div", { style: { display: "flex", alignItems: "center", gap: 8, width: "100%" }, children: [
     /* @__PURE__ */ p(
       "input",
       {
@@ -2335,7 +2335,7 @@ const ft = u.memo(fr), dt = ({
         defaultValue: String(r ?? ""),
         ref: i,
         onChange: m,
-        className: U(R.input, R.textInput),
+        className: q(R.input, R.textInput),
         style: { flex: 1, minWidth: 0 },
         "aria-invalid": !!s,
         "aria-describedby": s ? `${e.name}-error` : void 0
@@ -2361,7 +2361,7 @@ const ft = u.memo(fr), dt = ({
     )
   ] }) });
 }, Ct = ({ field: e, value: r, onChange: t, onError: n, error: a }) => {
-  const o = L(e, a), c = e.min ?? 0, i = e.max ?? 100, [s, m] = u.useState(
+  const o = O(e, a), c = e.min ?? 0, i = e.max ?? 100, [s, m] = u.useState(
     () => isNaN(Number(r)) ? String(c) : String(Number(r))
   );
   u.useEffect(() => {
@@ -2379,7 +2379,7 @@ const ft = u.memo(fr), dt = ({
     },
     [o, t]
   ), d = isNaN(Number(s)) ? String(c) : String(Number(s));
-  return /* @__PURE__ */ p(O, { field: e, error: l, children: /* @__PURE__ */ A("div", { style: { display: "flex", alignItems: "center", gap: "8px", width: "100%" }, children: [
+  return /* @__PURE__ */ p(L, { field: e, error: l, children: /* @__PURE__ */ A("div", { style: { display: "flex", alignItems: "center", gap: "8px", width: "100%" }, children: [
     /* @__PURE__ */ p(
       "input",
       {
@@ -2414,7 +2414,7 @@ const ft = u.memo(fr), dt = ({
           textAlign: "center",
           flexShrink: 0
         },
-        className: U(R.input, R.textInput),
+        className: q(R.input, R.textInput),
         "aria-invalid": !!l,
         "aria-describedby": l ? `${e.name}-error` : void 0
       }
@@ -2427,7 +2427,7 @@ const ft = u.memo(fr), dt = ({
   onError: n,
   error: a
 }) => {
-  const { t: o, formStyle: c, fieldStyle: i, fieldValidationMode: s } = j(), l = L(e, a)(r);
+  const { t: o, formStyle: c, fieldStyle: i, fieldValidationMode: s } = j(), l = O(e, a)(r);
   u.useEffect(() => {
     s === "realTime" && n?.(l);
   }, [l, s, n]);
@@ -2489,7 +2489,7 @@ const ft = u.memo(fr), dt = ({
   }), [f, d]), k = !!r, $ = () => {
     t?.(!k);
   };
-  return /* @__PURE__ */ p(O, { field: e, error: null, rightAlign: !1, children: /* @__PURE__ */ A("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }, children: [
+  return /* @__PURE__ */ p(L, { field: e, error: null, rightAlign: !1, children: /* @__PURE__ */ A("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }, children: [
     /* @__PURE__ */ p(
       "label",
       {
@@ -2549,13 +2549,13 @@ const ft = u.memo(fr), dt = ({
   onError: n,
   error: a
 }) => {
-  const o = L(e, a), { inputRef: c, error: i, handleChange: s } = _({
+  const o = O(e, a), { inputRef: c, error: i, handleChange: s } = _({
     value: r,
     onChange: t,
     onError: n,
     validate: o
   });
-  return /* @__PURE__ */ p(O, { field: e, error: i, children: /* @__PURE__ */ p(
+  return /* @__PURE__ */ p(L, { field: e, error: i, children: /* @__PURE__ */ p(
     "input",
     {
       id: e.name,
@@ -2563,7 +2563,7 @@ const ft = u.memo(fr), dt = ({
       defaultValue: String(r ?? ""),
       ref: c,
       onChange: s,
-      className: U(R.input, R.textInput),
+      className: q(R.input, R.textInput),
       placeholder: e.placeholder,
       "aria-invalid": !!i,
       "aria-describedby": i ? `${e.name}-error` : void 0
@@ -2576,13 +2576,13 @@ const ft = u.memo(fr), dt = ({
   onError: n,
   error: a
 }) => {
-  const o = L(e), { inputRef: c, error: i, handleChange: s } = _({
+  const o = O(e), { inputRef: c, error: i, handleChange: s } = _({
     value: r,
     onChange: t,
     onError: n,
     validate: o
   }), m = a ?? i;
-  return /* @__PURE__ */ p(O, { field: e, error: m, children: /* @__PURE__ */ p(
+  return /* @__PURE__ */ p(L, { field: e, error: m, children: /* @__PURE__ */ p(
     "input",
     {
       id: e.name,
@@ -2593,7 +2593,7 @@ const ft = u.memo(fr), dt = ({
       onChange: s,
       min: typeof e.min == "string" ? e.min : void 0,
       max: typeof e.max == "string" ? e.max : void 0,
-      className: U(R.input, R.textInput),
+      className: q(R.input, R.textInput),
       "aria-invalid": !!m,
       "aria-describedby": m ? `${e.name}-error` : void 0
     }
@@ -2938,7 +2938,7 @@ const jn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
 });
 gr.displayName = "ConversionButton";
 const Mt = ({ field: e, value: r, onChange: t, onError: n }) => {
-  const { t: a } = j(), o = L(e), c = e.dimension, i = u.useMemo(() => c ? pr(c) : null, [c]), s = String(r?.[0] ?? ""), m = String(r?.[1] ?? i?.default ?? ""), [l, f] = u.useState(s), [d, g] = u.useState(m);
+  const { t: a } = j(), o = O(e), c = e.dimension, i = u.useMemo(() => c ? pr(c) : null, [c]), s = String(r?.[0] ?? ""), m = String(r?.[1] ?? i?.default ?? ""), [l, f] = u.useState(s), [d, g] = u.useState(m);
   u.useEffect(() => {
     f(s);
   }, [s]), u.useEffect(() => {
@@ -2971,7 +2971,7 @@ const Mt = ({ field: e, value: r, onChange: t, onError: n }) => {
   );
   if (!c || !i) return null;
   const $ = !!w || !l.trim();
-  return /* @__PURE__ */ p(O, { field: e, error: w, children: /* @__PURE__ */ A("div", { style: { display: "flex", alignItems: "center", gap: "var(--reactaform-unit-gap, 8px)", width: "100%" }, children: [
+  return /* @__PURE__ */ p(L, { field: e, error: w, children: /* @__PURE__ */ A("div", { style: { display: "flex", alignItems: "center", gap: "var(--reactaform-unit-gap, 8px)", width: "100%" }, children: [
     /* @__PURE__ */ p(
       "input",
       {
@@ -2980,7 +2980,7 @@ const Mt = ({ field: e, value: r, onChange: t, onError: n }) => {
         value: l,
         onChange: F,
         style: { flex: "2 1 0" },
-        className: U(R.input, R.textInput),
+        className: q(R.input, R.textInput),
         "aria-invalid": !!w,
         "aria-describedby": w ? `${e.name}-error` : void 0
       }
@@ -2992,7 +2992,7 @@ const Mt = ({ field: e, value: r, onChange: t, onError: n }) => {
         value: d,
         onChange: S,
         style: { flex: "1 1 0" },
-        className: U(R.input, R.inputSelect),
+        className: q(R.input, R.inputSelect),
         "aria-invalid": !!w,
         "aria-describedby": w ? `${e.name}-error` : void 0,
         children: k
@@ -3018,13 +3018,13 @@ const Mt = ({ field: e, value: r, onChange: t, onError: n }) => {
   onError: n,
   error: a
 }) => {
-  const o = L(e), { inputRef: c, error: i, handleChange: s } = _({
+  const o = O(e), { inputRef: c, error: i, handleChange: s } = _({
     value: r,
     onChange: t,
     onError: n,
     validate: o
   }), m = a ?? i;
-  return /* @__PURE__ */ p(O, { field: e, error: m, children: /* @__PURE__ */ p(
+  return /* @__PURE__ */ p(L, { field: e, error: m, children: /* @__PURE__ */ p(
     "input",
     {
       id: e.name,
@@ -3032,7 +3032,7 @@ const Mt = ({ field: e, value: r, onChange: t, onError: n }) => {
       defaultValue: String(r ?? ""),
       ref: c,
       onChange: s,
-      className: U(R.input, R.textInput),
+      className: q(R.input, R.textInput),
       placeholder: "https://example.com",
       "aria-invalid": !!m,
       "aria-describedby": m ? `${e.name}-error` : void 0
@@ -3188,7 +3188,7 @@ const Pt = (e, r) => {
   };
 }, vr = u.memo(({ field: e, value: r, handleChange: t, handleError: n, error: a }) => {
   const o = br(e.type), c = u.useMemo(() => r, [r]), i = u.useCallback(
-    (m, l) => t(e.name, m, l),
+    (m) => t(e.name, m),
     [t, e.name]
   ), s = u.useCallback(
     (m) => n?.(e.name, m),
@@ -3237,7 +3237,7 @@ const xr = (e, r, t, n, a) => {
   ] });
 });
 wr.displayName = "FieldGroup";
-const Ot = (e, r, t, n, a, o, c, i, s, m) => {
+const Lt = (e, r, t, n, a, o, c, i, s, m) => {
   const l = r.slice(0, i).filter((g) => c[g.name]), f = zt(l), d = [];
   return f.groups.forEach((g) => {
     if (g.name) {
@@ -3262,7 +3262,7 @@ const Ot = (e, r, t, n, a, o, c, i, s, m) => {
     } else
       g.fields.forEach((w) => d.push(xr(w, t, a, o, m)));
   }), d;
-}, Lt = (e) => {
+}, Ot = (e) => {
   const r = {};
   return e.forEach((t) => {
     r[t.name] = !1;
@@ -3476,122 +3476,122 @@ const Ut = ({ onClick: e, disabled: r = !1, t }) => {
     definitionName: e?.name ?? c.definitionName
   }, [f, d] = u.useState("en"), [g, w] = u.useState([]), [F, S] = u.useState({}), [v, k] = u.useState(
     {}
-  ), [$, N] = u.useState({}), [x, V] = u.useState({}), [b, h] = u.useState({}), [y, C] = u.useState(null), [E, I] = u.useState(null), [M, P] = u.useState(0), [H, Z] = u.useState(!1), [ne, ae] = u.useState(r.name || ""), Y = u.useRef(r), de = u.useRef(!1);
+  ), [$, N] = u.useState({}), [x, V] = u.useState({}), [b, h] = u.useState({}), [y, C] = u.useState(null), [E, I] = u.useState(null), [M, P] = u.useState(0), [H, Y] = u.useState(!1), [ne, ae] = u.useState(r.name || ""), G = u.useRef(r), de = u.useRef(!1);
   u.useEffect(() => {
-    const D = Object.fromEntries(
-      a.map((z) => [
-        z.name,
-        { ...z, children: {} }
+    const z = Object.fromEntries(
+      a.map((D) => [
+        D.name,
+        { ...D, children: {} }
       ])
     );
-    a.forEach((z) => {
-      z.parents && Object.entries(z.parents).forEach(([X, re]) => {
-        const oe = D[X];
+    a.forEach((D) => {
+      D.parents && Object.entries(D.parents).forEach(([ee, re]) => {
+        const oe = z[ee];
         oe && re.forEach((Pr) => {
           oe.children || (oe.children = {});
           const Te = String(Pr);
           oe.children[Te] = [
             ...oe.children[Te] || [],
-            z.name
+            D.name
           ];
         });
       });
-    }), Pt(a, D);
+    }), Pt(a, z);
     const B = Object.values(
-      D
-    ), q = {};
-    B.forEach((z) => {
-      if (z.type === "unit") {
-        const X = typeof z.defaultValue == "number" ? String(z.defaultValue) : "", re = typeof z.defaultUnit == "string" ? z.defaultUnit : String(z.defaultUnit ?? "m");
-        q[z.name] = [X, re];
+      z
+    ), U = {};
+    B.forEach((D) => {
+      if (D.type === "unit") {
+        const ee = typeof D.defaultValue == "number" ? String(D.defaultValue) : "", re = typeof D.defaultUnit == "string" ? D.defaultUnit : String(D.defaultUnit ?? "m");
+        U[D.name] = [ee, re];
       } else
-        q[z.name] = z.defaultValue;
-    }), Y.current = r, Object.keys(r.values).forEach((z) => {
-      D[z] !== void 0 && (q[z] = r.values[z]);
+        U[D.name] = D.defaultValue;
+    }), G.current = r, Object.keys(r.values).forEach((D) => {
+      z[D] !== void 0 && (U[D] = r.values[D]);
     });
-    const J = Lt(B), K = {};
-    B.forEach((z) => {
-      z.group && !(z.group in K) && (K[z.group] = !0);
+    const J = Ot(B), K = {};
+    B.forEach((D) => {
+      D.group && !(D.group in K) && (K[D.group] = !0);
     });
-    const G = requestAnimationFrame(() => {
-      w(B), S(D), k(q), N(
-        Tt(B, q, J, D)
-      ), V(K), Z(!0), ae(r.name);
+    const X = requestAnimationFrame(() => {
+      w(B), S(z), k(U), N(
+        Tt(B, U, J, z)
+      ), V(K), Y(!0), ae(r.name);
     });
-    return () => cancelAnimationFrame(G);
+    return () => cancelAnimationFrame(X);
   }, [a, r, e]), u.useEffect(() => {
     if (!H || M >= g.length) return;
-    const D = setTimeout(() => {
+    const z = setTimeout(() => {
       P(
         (B) => Math.min(B + t, g.length)
       );
     }, n);
-    return () => clearTimeout(D);
+    return () => clearTimeout(z);
   }, [H, M, g.length, t, n]);
   const Vr = u.useCallback(
-    (D, B, q) => {
-      C(null), I(null), k((J) => {
-        const K = { ...J, [D]: B }, G = F[D];
-        return G && [
+    (z, B) => {
+      C(null), I(null), k((U) => {
+        const J = { ...U, [z]: B }, K = F[z];
+        return K && [
           "checkbox",
           "dropdown",
           "multi-select",
           "radio",
           "switch"
-        ].includes(G.type) && N(
-          (X) => jt(
-            X,
-            F,
-            K,
+        ].includes(K.type) && N(
+          (D) => jt(
             D,
+            F,
+            J,
+            z,
             String(B)
           )
-        ), K;
-      }), h((J) => q ? { ...J, [D]: q } : Object.fromEntries(Object.entries(J).filter(([G]) => G !== D)));
+        ), J;
+      });
     },
     [F, C, I]
   );
   u.useEffect(() => {
-    let D = 0;
-    return D = requestAnimationFrame(() => {
+    let z = 0;
+    return z = requestAnimationFrame(() => {
       m !== f && (d(m || "en"), C(null), I(null));
-    }), () => cancelAnimationFrame(D);
+    }), () => cancelAnimationFrame(z);
   }, [m, f]), u.useEffect(() => {
-    let D = 0;
-    return D = requestAnimationFrame(() => {
+    let z = 0;
+    return z = requestAnimationFrame(() => {
       if (de.current) {
-        de.current = !1, Y.current = r, ae(r.name || "");
+        de.current = !1, G.current = r, ae(r.name || "");
         return;
       }
-      Y.current = r, C(null), I(null), ae(r.name || "");
-    }), () => cancelAnimationFrame(D);
+      G.current = r, C(null), I(null), ae(r.name || "");
+    }), () => cancelAnimationFrame(z);
   }, [r, r.name]);
-  const $r = u.useCallback((D, B) => {
-    h((q) => B ? { ...q, [D]: String(B) } : Object.fromEntries(Object.entries(q).filter(([K]) => K !== D)));
+  const $r = u.useCallback((z, B) => {
+    h((U) => B ? { ...U, [z]: String(B) } : Object.fromEntries(Object.entries(U).filter(([K]) => K !== z)));
   }, []), Rr = async () => {
     de.current = !0;
-    const D = Y.current?.name;
-    Y.current.name = ne;
+    const z = G.current?.name;
+    G.current.name = ne;
     let B = b;
     if (l.fieldValidationMode === "onSubmission") {
-      const G = {};
-      if (g.forEach((z) => {
-        const X = v[z.name];
-        if (X === void 0) return;
-        const re = mr(l.definitionName, z, X, i);
-        re && (G[z.name] = re);
-      }), h(G), B = G, Object.keys(G).length > 0) {
+      const X = {};
+      if (g.forEach((D) => {
+        const ee = v[D.name];
+        if (ee === void 0) return;
+        const re = mr(l.definitionName, D, ee, i);
+        re && (X[D.name] = re);
+      }), h(X), B = X, Object.keys(X).length > 0) {
         C(i("Please fix validation errors before submitting the form.")), I(!1);
         return;
       } else
         C(null), I(null);
     }
-    const q = await qt(e, Y.current, v, i, B), J = typeof q.message == "string" ? q.message : String(q.message), K = Object.values(q.errors ?? {}).join(`
+    const U = await qt(e, G.current, v, i, B), J = typeof U.message == "string" ? U.message : String(U.message), K = Object.values(U.errors ?? {}).join(`
 `);
     C(K ? J + `
-` + K : J), I(q.success), q.success || (Y.current.name = D ?? Y.current.name, ae(D ?? ""));
-  }, Ar = (D) => {
-    V((B) => ({ ...B, [D]: !B[D] }));
+` + K : J), I(U.success), U.success || (G.current.name = z ?? G.current.name, ae(z ?? ""));
+  }, Ar = (z) => {
+    V((B) => ({ ...B, [z]: !B[z] }));
   }, Dr = u.useMemo(
     () => l.fieldValidationMode === "realTime" ? Object.values(b).some(Boolean) : !1,
     [b, l.fieldValidationMode]
@@ -3613,13 +3613,13 @@ const Ut = ({ onClick: e, disabled: r = !1, t }) => {
       ar,
       {
         name: ne,
-        onChange: (D) => {
-          ae(D), C(null), I(null);
+        onChange: (z) => {
+          ae(z), C(null), I(null);
         }
       }
     ),
     /* @__PURE__ */ A(Ne, { children: [
-      Ot(
+      Lt(
         x,
         g,
         v,
@@ -3962,7 +3962,7 @@ function sn(e, r, t) {
   return null;
 }
 const be = /* @__PURE__ */ new WeakMap();
-function Oe(e, r, t, n, ...a) {
+function Le(e, r, t, n, ...a) {
   if (e.pattern == null)
     return null;
   const o = String(r);
@@ -3983,7 +3983,7 @@ function Oe(e, r, t, n, ...a) {
 }
 function le(e, r, t) {
   const n = String(r);
-  return n.trim() === "" ? e.required ? t("Value required") : null : e.minLength !== void 0 && n.length < e.minLength ? t("Must be at least {{1}} characters", e.minLength) : e.maxLength !== void 0 && n.length > e.maxLength ? t("Must be at most {{1}} characters", e.maxLength) : Oe(e, r, t, "Invalid text format");
+  return n.trim() === "" ? e.required ? t("Value required") : null : e.minLength !== void 0 && n.length < e.minLength ? t("Must be at least {{1}} characters", e.minLength) : e.maxLength !== void 0 && n.length > e.maxLength ? t("Must be at most {{1}} characters", e.maxLength) : Le(e, r, t, "Invalid text format");
 }
 const Se = (e) => {
   if (!e) return null;
@@ -4045,11 +4045,11 @@ function mn(e) {
 }
 function fn(e, r, t) {
   const n = String(r ?? "").trim();
-  return n === "" ? e.required ? t("Value required") : null : mn(n) ? Oe(e, r, t, t("Email does not match pattern: {{1}}", e.pattern)) : t("Must be valid email format");
+  return n === "" ? e.required ? t("Value required") : null : mn(n) ? Le(e, r, t, t("Email does not match pattern: {{1}}", e.pattern)) : t("Must be valid email format");
 }
 function dn(e, r, t) {
   const n = String(r ?? "").trim();
-  return n === "" ? e.required ? t("Value required") : null : Oe(e, n, t, "Invalid phone number format");
+  return n === "" ? e.required ? t("Value required") : null : Le(e, n, t, "Invalid phone number format");
 }
 const pn = /^(https?|ftp|file):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|]$/i, gn = (e) => {
   try {
@@ -4533,7 +4533,7 @@ const Wn = ({
       )
     }
   ) : /* @__PURE__ */ p("div", { style: { color: "red" }, children: "Error: Failed to create instance from definition." }) : /* @__PURE__ */ p("div", { style: { color: "red" }, children: "Error: No form definition provided." });
-}, Q = /* @__PURE__ */ new Map(), W = {
+}, Z = /* @__PURE__ */ new Map(), W = {
   components: /* @__PURE__ */ new Map(),
   fieldValidators: /* @__PURE__ */ new Map(),
   // category -> name -> plugin
@@ -4632,7 +4632,7 @@ function ie(e, r, t, n, a, o, c, i) {
 }
 function _n(e, r) {
   const t = r?.conflictResolution || "error";
-  if (Q.has(e.name)) {
+  if (Z.has(e.name)) {
     const a = {
       type: "plugin",
       name: e.name,
@@ -4686,10 +4686,10 @@ function _n(e, r) {
     n,
     t,
     r?.onConflict
-  ), e.setup && e.setup(), Q.set(e.name, e);
+  ), e.setup && e.setup(), Z.set(e.name, e);
 }
 function Kn(e, r = !1) {
-  const t = Q.get(e);
+  const t = Z.get(e);
   if (!t) return !1;
   if (t.cleanup && t.cleanup(), r) {
     if (t.components)
@@ -4714,39 +4714,39 @@ function Kn(e, r = !1) {
       for (const n of Object.keys(t.submissionHandlers))
         W.submissionHandlers.delete(n);
   }
-  return Q.delete(e), !0;
+  return Z.delete(e), !0;
 }
 function Gn(e) {
-  return Q.get(e);
+  return Z.get(e);
 }
 function Jn() {
-  return Array.from(Q.values());
+  return Array.from(Z.values());
 }
 function Yn(e) {
-  return Q.has(e);
+  return Z.has(e);
 }
 function Xn(e) {
   for (const [r, t] of Object.entries(e))
     yr(r, t);
 }
-function ee(e) {
+function Q(e) {
   return typeof e == "object" && e !== null;
 }
-function Le(e) {
-  if (!ee(e)) return !1;
+function Oe(e) {
+  if (!Q(e)) return !1;
   const r = e;
   return typeof r.name == "string" && typeof r.displayName == "string";
 }
 function Fr(e) {
-  if (!ee(e)) return !1;
+  if (!Q(e)) return !1;
   const r = e;
-  return typeof r.name != "string" || typeof r.version != "string" || !Array.isArray(r.properties) ? !1 : r.properties.every((t) => Le(t));
+  return typeof r.name != "string" || typeof r.version != "string" || !Array.isArray(r.properties) ? !1 : r.properties.every((t) => Oe(t));
 }
 function Ce(e) {
   try {
     return typeof File < "u" && e instanceof File;
   } catch {
-    const r = ee(e) ? e : void 0;
+    const r = Q(e) ? e : void 0;
     return !!r && typeof r.name == "string" && typeof r.size == "number";
   }
 }
@@ -4765,7 +4765,7 @@ function Zn(e, r, t = {}) {
         success: !1,
         error: "Instance must be a valid object"
       };
-    const m = [], l = [], f = {}, g = (Fr(r) || ee(r) && Array.isArray(r.properties) ? r.properties : []).filter(Le), w = new Map(g.map((S) => [S.name, S]));
+    const m = [], l = [], f = {}, g = (Fr(r) || Q(r) && Array.isArray(r.properties) ? r.properties : []).filter(Oe), w = new Map(g.map((S) => [S.name, S]));
     for (const [S, v] of Object.entries(e)) {
       if (i.includes(S)) {
         l.push(S);
@@ -4785,7 +4785,7 @@ function Zn(e, r, t = {}) {
     }
     return n && (f._metadata = {
       serializedAt: (/* @__PURE__ */ new Date()).toISOString(),
-      version: (ee(r) ? r.version : void 0) || "1.0.0",
+      version: (Q(r) ? r.version : void 0) || "1.0.0",
       fieldCount: Object.keys(f).length - 1
       // Exclude metadata itself
     }), {
@@ -4901,7 +4901,7 @@ function Qn(e, r, t = {}) {
         success: !1,
         error: "Parsed data must be an object"
       };
-    const s = [], m = [], l = {}, d = (Fr(r) || ee(r) && Array.isArray(r.properties) ? r.properties : []).filter(Le), g = new Map(d.map((F) => [F.name, F]));
+    const s = [], m = [], l = {}, d = (Fr(r) || Q(r) && Array.isArray(r.properties) ? r.properties : []).filter(Oe), g = new Map(d.map((F) => [F.name, F]));
     for (const F of d) {
       const S = F.name, v = i[S];
       if (v === void 0) {
@@ -5037,7 +5037,7 @@ function ra(e, r = {}) {
           }
     const s = Array.isArray(a.properties) ? a.properties : null;
     s ? a.properties = s.map((l, f) => {
-      const d = ee(l) ? l : {}, g = { ...d };
+      const d = Q(l) ? l : {}, g = { ...d };
       if (!d.name) {
         const w = `Property at index ${f} missing 'name'`;
         t ? c.push(w) : (o.push(`${w}, using 'field_${f}'`), g.name = `field_${f}`);
@@ -5161,7 +5161,7 @@ function zn() {
   if (!document.getElementById("reactaform-styles"))
     try {
       const e = document.createElement("style");
-      e.id = "reactaform-styles", e.textContent = Lr, document.head.appendChild(e);
+      e.id = "reactaform-styles", e.textContent = Or, document.head.appendChild(e);
     } catch {
     }
 }
@@ -5171,9 +5171,9 @@ export {
   Wn as ReactaForm,
   In as ReactaFormProvider,
   Wt as ReactaFormRenderer,
-  O as StandardFieldLayout,
+  L as StandardFieldLayout,
   jn as Units,
-  U as combineClasses,
+  q as combineClasses,
   Fn as createInstanceFromDefinition,
   ra as deserializeDefinition,
   Qn as deserializeInstance,
@@ -5198,7 +5198,7 @@ export {
   Kn as unregisterPlugin,
   Un as upgradeInstanceToLatestDefinition,
   Tr as useDebouncedCallback,
-  L as useFieldValidator,
+  O as useFieldValidator,
   j as useReactaFormContext,
   _ as useUncontrolledValidatedInput,
   Tn as validateFieldValue,