reactaform 1.9.2 → 1.9.21

package/dist/reactaform.es.js

@@ -1,8 +1,8 @@
-import { jsx as p, jsxs as D, Fragment as Ie } from "react/jsx-runtime";
+import { jsx as p, jsxs as z, Fragment as Ie } from "react/jsx-runtime";
 import * as l from "react";
-import { createContext as it, useContext as st, useRef as pe, useEffect as Ue, useCallback as ge } from "react";
+import { createContext as st, useContext as ct, useRef as pe, useEffect as Ue, useCallback as ge } from "react";
 import * as de from "react-dom";
-const ct = `/* ReactaForm CSS Custom Properties (CSS Variables) */\r
+const lt = `/* ReactaForm CSS Custom Properties (CSS Variables) */\r
 \r
 /* Default Light Theme */\r
 :root {\r
@@ -394,8 +394,8 @@ const ct = `/* ReactaForm CSS Custom Properties (CSS Variables) */\r
   \r
   \r
 }\r
-`, Ee = it(void 0), B = () => {
-  const e = st(Ee);
+`, Ee = st(void 0), B = () => {
+  const e = ct(Ee);
   if (!e)
     throw new Error("❌ useReactaFormContext must be used within a <ReactaFormProvider>");
   return e;
@@ -447,7 +447,7 @@ class ne {
   }
 }
 const or = typeof process < "u" && process.env.NODE_ENV === "test";
-function lt(e, r = 300, t) {
+function ut(e, r = 300, t) {
   const n = pe(), o = pe(e), a = pe(null), c = t?.leading === !0, s = t?.trailing !== !1;
   Ue(() => {
     o.current = e;
@@ -475,7 +475,7 @@ function lt(e, r = 300, t) {
     [c, s, r]
   ), cancel: d, flush: m };
 }
-const V = {
+const $ = {
   field: "reactaform-field",
   label: "reactaform-label",
   input: "reactaform-input",
@@ -496,7 +496,7 @@ const V = {
 function ie(e) {
   return e.toLowerCase().includes("dark");
 }
-function ut(e) {
+function mt(e) {
   if (!e) return !1;
   const r = e.trim();
   let t = 0, n = 0, o = 0;
@@ -510,7 +510,7 @@ function ut(e) {
     return !1;
   return (t * 299 + n * 587 + o * 114) / 1e3 < 128;
 }
-const mt = () => /* @__PURE__ */ D(
+const dt = () => /* @__PURE__ */ z(
   "svg",
   {
     width: "1em",
@@ -526,18 +526,18 @@ const mt = () => /* @__PURE__ */ D(
       /* @__PURE__ */ p("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
     ]
   }
-), dt = ({ content: e, size: r = "medium", animation: t = !0 }) => {
-  const { t: n, theme: o, formStyle: a, fieldStyle: c } = B(), [s, i] = l.useState(!1), [d, m] = l.useState({ x: 0, y: 0 }), [u, f] = l.useState(!1), b = l.useRef(null), C = l.useRef(null), N = l.useRef(null), h = l.useId(), y = ie(o), [E, F] = l.useState(void 0);
+), ft = ({ content: e, size: r = "medium", animation: t = !0 }) => {
+  const { t: n, theme: o, formStyle: a, fieldStyle: c } = B(), [s, i] = l.useState(!1), [d, m] = l.useState({ x: 0, y: 0 }), [u, f] = l.useState(!1), b = l.useRef(null), C = l.useRef(null), N = l.useRef(null), h = l.useId(), y = ie(o), [E, M] = l.useState(void 0);
   l.useLayoutEffect(() => {
     if (!b.current) return;
     const I = "rgba(255,255,255,0.1)", g = getComputedStyle(b.current).getPropertyValue("--reactaform-primary-bg").trim();
     if (g && typeof CSS < "u" && CSS.supports?.("color: color-mix(in srgb, red, blue)")) {
-      const w = ut(g) ? "black" : "white";
-      F(`color-mix(in srgb, var(--reactaform-primary-bg) 85%, ${w} 15%)`);
+      const w = mt(g) ? "black" : "white";
+      M(`color-mix(in srgb, var(--reactaform-primary-bg) 85%, ${w} 15%)`);
     } else
-      F(I);
+      M(I);
   }, []);
-  const M = l.useMemo(() => {
+  const F = l.useMemo(() => {
     const v = {
       icon: {
         display: "inline-flex",
@@ -614,25 +614,25 @@ const mt = () => /* @__PURE__ */ D(
       );
     }
   }, [s]);
-  const $ = typeof document < "u" ? document.getElementById("popup-root") : null, R = /* @__PURE__ */ p(
+  const V = typeof document < "u" ? document.getElementById("popup-root") : null, R = /* @__PURE__ */ p(
     "div",
     {
       ref: C,
       "data-tooltip-id": h,
       style: {
-        ...M.text,
+        ...F.text,
         transform: u ? "translateY(0) scale(1)" : "translateY(-4px) scale(0.98)",
         transition: "opacity 120ms ease, transform 120ms ease, visibility 120ms ease",
         width: 240,
         // When positioned is true, apply the visible styles
-        ...u ? M.textVisible : {},
+        ...u ? F.textVisible : {},
         top: d.y,
         left: d.x
       },
       children: n(e)
     }
   );
-  return /* @__PURE__ */ D(Ie, { children: [
+  return /* @__PURE__ */ z(Ie, { children: [
     /* @__PURE__ */ p(
       "span",
       {
@@ -642,14 +642,14 @@ const mt = () => /* @__PURE__ */ D(
         onMouseEnter: () => i(!0),
         onMouseLeave: () => i(!1),
         style: {
-          ...M.icon
+          ...F.icon
         },
-        children: /* @__PURE__ */ p(mt, {})
+        children: /* @__PURE__ */ p(dt, {})
       }
     ),
-    s && ($ ? de.createPortal(R, $) : R)
+    s && (V ? de.createPortal(R, V) : R)
   ] });
-}, ar = l.memo(dt), ve = l.memo(({
+}, ar = l.memo(ft), ve = l.memo(({
   field: e,
   error: r,
   children: t,
@@ -674,22 +674,22 @@ const mt = () => /* @__PURE__ */ D(
     gap: "var(--reactaform-inline-gap, 8px)",
     width: "100%"
   }), []);
-  return /* @__PURE__ */ D("div", { className: `${V.field} column-layout`, style: c, children: [
+  return /* @__PURE__ */ z("div", { className: `${$.field} column-layout`, style: c, children: [
     n && /* @__PURE__ */ p(
       "label",
       {
         id: `${e.name}-label`,
-        className: V.label,
+        className: $.label,
         htmlFor: e.name,
         style: s,
         children: o(e.displayName)
       }
     ),
-    /* @__PURE__ */ D("div", { style: i, children: [
+    /* @__PURE__ */ z("div", { style: i, children: [
       /* @__PURE__ */ p("div", { style: { flex: 1, minWidth: 0 }, children: t }),
       e.tooltip && /* @__PURE__ */ p(ar, { content: e.tooltip })
     ] }),
-    r && /* @__PURE__ */ p(Me, { id: `${e.name}-error`, children: r })
+    r && /* @__PURE__ */ p(Fe, { id: `${e.name}-error`, children: r })
   ] });
 });
 ve.displayName = "ColumnFieldLayout";
@@ -704,35 +704,35 @@ const ir = l.memo(({
     alignItems: "center",
     gap: "3px"
   }), []);
-  return /* @__PURE__ */ D("div", { className: `${V.field} row-layout`, children: [
+  return /* @__PURE__ */ z("div", { className: `${$.field} row-layout`, children: [
     /* @__PURE__ */ p(
       "label",
       {
         id: `${e.name}-label`,
-        className: V.label,
+        className: $.label,
         htmlFor: e.name,
         style: { textAlign: "left" },
         children: o(e.displayName)
       }
     ),
-    /* @__PURE__ */ D("div", { children: [
-      /* @__PURE__ */ D("div", { style: a, children: [
+    /* @__PURE__ */ z("div", { children: [
+      /* @__PURE__ */ z("div", { style: a, children: [
         n ? /* @__PURE__ */ p("div", { style: { display: "flex", flex: 1, justifyContent: "flex-end" }, children: t }) : t,
         e.tooltip && /* @__PURE__ */ p(ar, { content: e.tooltip })
       ] }),
-      r && /* @__PURE__ */ p(Me, { id: `${e.name}-error`, children: r })
+      r && /* @__PURE__ */ p(Fe, { id: `${e.name}-error`, children: r })
     ] })
   ] });
 });
 ir.displayName = "RowFieldLayout";
-const O = l.memo(({
+const L = l.memo(({
   field: e,
   error: r,
   children: t,
   rightAlign: n = !1
 }) => e.labelLayout === "column-left" || e.labelLayout === "column-center" ? /* @__PURE__ */ p(ve, { field: e, error: r, showLabel: !0, children: t }) : e.type === "checkbox" || e.type === "switch" ? /* @__PURE__ */ p(ve, { field: e, error: r, showLabel: !1, children: t }) : /* @__PURE__ */ p(ir, { field: e, error: r, rightAlign: n, children: t }));
-O.displayName = "StandardFieldLayout";
-const Me = l.memo(({ children: e, id: r }) => {
+L.displayName = "StandardFieldLayout";
+const Fe = l.memo(({ children: e, id: r }) => {
   const t = l.useMemo(() => ({
     color: "var(--reactaform-error-color, red)",
     fontSize: "13px",
@@ -746,11 +746,11 @@ const Me = l.memo(({ children: e, id: r }) => {
   }), []);
   return /* @__PURE__ */ p("div", { id: r, style: t, children: e });
 });
-Me.displayName = "ErrorDiv";
+Fe.displayName = "ErrorDiv";
 const sr = l.memo(({ name: e, onChange: r }) => {
   const { t } = B();
-  return /* @__PURE__ */ D("div", { style: { marginBottom: 16 }, children: [
-    /* @__PURE__ */ D("div", { style: { display: "grid", gridTemplateColumns: "1fr 2fr", gap: 12, alignItems: "center" }, children: [
+  return /* @__PURE__ */ z("div", { style: { marginBottom: 16 }, children: [
+    /* @__PURE__ */ z("div", { style: { display: "grid", gridTemplateColumns: "1fr 2fr", gap: 12, alignItems: "center" }, children: [
       /* @__PURE__ */ p(
         "label",
         {
@@ -770,7 +770,7 @@ const sr = l.memo(({ name: e, onChange: r }) => {
           id: "instance-name-input",
           type: "text",
           value: e,
-          className: U(V.input, V.textInput),
+          className: U($.input, $.textInput),
           onChange: (n) => r(n.target.value),
           placeholder: t("Enter instance name")
         }
@@ -780,7 +780,7 @@ const sr = l.memo(({ name: e, onChange: r }) => {
   ] });
 });
 sr.displayName = "InstanceName";
-class ft extends ne {
+class pt extends ne {
   registerInCategory(r, t, n) {
     this.get(r) || this.register(r, {});
     const o = this.get(r);
@@ -796,24 +796,24 @@ class ft extends ne {
     return this.list();
   }
 }
-const cr = new ne(), lr = new ft(), Fe = new ne();
-function pt(e, r) {
+const cr = new ne(), lr = new pt(), Me = new ne();
+function gt(e, r) {
   cr.register(e, r);
 }
-function gt(e, r, t) {
+function ht(e, r, t) {
   lr.registerInCategory(e, r, t);
 }
-function ht(e, r) {
-  if (on(e)) {
+function bt(e, r) {
+  if (an(e)) {
     console.warn(
       `[ReactaForm] Can't override builtin type field validation handler for type "${e}".`
     );
     return;
   }
-  Fe.register(e, r);
+  Me.register(e, r);
 }
 function H(e, r) {
-  Fe.register(e, r);
+  Me.register(e, r);
 }
 function ur(e, r) {
   return lr.getFromCategory(e, r) || null;
@@ -822,9 +822,9 @@ function mr(e) {
   return cr.get(e) || null;
 }
 function dr(e) {
-  return Fe.get(e) || null;
+  return Me.get(e) || null;
 }
-function bt(e) {
+function yt(e) {
   return (typeof e == "object" || typeof e == "function") && e !== null && typeof e.then == "function";
 }
 const We = /* @__PURE__ */ new Map(), _e = /* @__PURE__ */ new Map();
@@ -854,7 +854,7 @@ function fr(e, r, t, n) {
     }
   return null;
 }
-function uo(e, r, t, n) {
+function mo(e, r, t, n) {
   return fr(e, r, t, n);
 }
 function pr(e, r, t, n) {
@@ -867,7 +867,7 @@ function pr(e, r, t, n) {
     return r.required ? n("Value required") : null;
   return fr(e, r, t, n);
 }
-async function yt(e, r, t) {
+async function vt(e, r, t) {
   if (!e || typeof e.validationHandlerName != "string")
     return null;
   const n = e.validationHandlerName;
@@ -875,7 +875,7 @@ async function yt(e, r, t) {
   if (o === void 0 && (o = mr(n) || null, _e.set(n, o)), o)
     try {
       const a = o(r, t);
-      return bt(a) ? await a || null : a || null;
+      return yt(a) ? await a || null : a || null;
     } catch (a) {
       return [String(a instanceof Error ? a.message : a)];
     }
@@ -910,7 +910,7 @@ const gr = ({
     },
     [t, r]
   ), m = e.name;
-  return /* @__PURE__ */ p(O, { field: e, rightAlign: !1, error: s, children: /* @__PURE__ */ D(
+  return /* @__PURE__ */ p(L, { field: e, rightAlign: !1, error: s, children: /* @__PURE__ */ z(
     "div",
     {
       style: {
@@ -923,7 +923,7 @@ const gr = ({
         /* @__PURE__ */ p(
           "label",
           {
-            className: V.label,
+            className: $.label,
             htmlFor: m,
             style: { textAlign: "left", justifyContent: "flex-start" },
             children: a(e.displayName)
@@ -956,7 +956,7 @@ const gr = ({
   ) });
 };
 gr.displayName = "CheckboxInput";
-const vt = l.memo(gr);
+const xt = l.memo(gr);
 function _({ value: e, onChange: r, onError: t, validate: n }) {
   const o = l.useRef(null), a = l.useRef(null), c = l.useRef(t), [s, i] = l.useState(null);
   l.useEffect(() => {
@@ -992,11 +992,11 @@ const Ke = [
   { label: "Gray", value: "#808080" },
   { label: "Light Gray", value: "#d3d3d3" },
   { label: "Pink", value: "#ffc0cb" }
-], xt = /^#([0-9A-F]{3}){1,2}$/i, wt = "#000000", St = (e) => xt.test(e), he = (e) => {
-  if (!e || !St(e)) return wt;
+], wt = /^#([0-9A-F]{3}){1,2}$/i, St = "#000000", Ct = (e) => wt.test(e), he = (e) => {
+  if (!e || !Ct(e)) return St;
   const r = e.toLowerCase();
   return r.length === 4 ? "#" + r.slice(1).split("").map((t) => t + t).join("") : r;
-}, Ct = (e) => {
+}, Nt = (e) => {
   const r = parseInt(e.slice(1), 16);
   return {
     r: r >> 16 & 255,
@@ -1023,29 +1023,29 @@ const Ke = [
     f(s);
   }, [s]);
   const b = l.useCallback(
-    (M) => {
-      const $ = he(M.target.value);
-      f($), m({
-        target: { value: $ }
+    (F) => {
+      const V = he(F.target.value);
+      f(V), m({
+        target: { value: V }
       });
     },
     [m]
   ), C = l.useCallback(
-    (M) => {
-      const $ = he(M.target.value);
-      f($), m({
-        target: { value: $ }
+    (F) => {
+      const V = he(F.target.value);
+      f(V), m({
+        target: { value: V }
       });
     },
     [m]
   ), h = l.useMemo(
-    () => new Set(Ke.map((M) => M.value)),
+    () => new Set(Ke.map((F) => F.value)),
     []
-  ).has(u), { r: y, g: E, b: F } = l.useMemo(
-    () => Ct(u),
+  ).has(u), { r: y, g: E, b: M } = l.useMemo(
+    () => Nt(u),
     [u]
   );
-  return /* @__PURE__ */ p(O, { field: e, error: d, children: /* @__PURE__ */ D(
+  return /* @__PURE__ */ p(L, { field: e, error: d, children: /* @__PURE__ */ z(
     "div",
     {
       style: {
@@ -1055,26 +1055,26 @@ const Ke = [
         width: "100%"
       },
       children: [
-        /* @__PURE__ */ D(
+        /* @__PURE__ */ z(
           "select",
           {
             id: e.name,
             value: u,
             onChange: C,
             className: U(
-              V.input,
-              V.inputSelect
+              $.input,
+              $.inputSelect
             ),
             "aria-invalid": !!d,
             children: [
-              Ke.map((M) => /* @__PURE__ */ p("option", { value: M.value, children: a(M.label) }, M.value)),
-              !h && /* @__PURE__ */ D("option", { value: u, children: [
+              Ke.map((F) => /* @__PURE__ */ p("option", { value: F.value, children: a(F.label) }, F.value)),
+              !h && /* @__PURE__ */ z("option", { value: u, children: [
                 "(",
                 y,
                 ", ",
                 E,
                 ", ",
-                F,
+                M,
                 ")"
               ] })
             ]
@@ -1112,7 +1112,7 @@ const Ke = [
   ) });
 };
 hr.displayName = "ColorInput";
-const Nt = l.memo(hr), Ge = (e) => {
+const kt = l.memo(hr), Ge = (e) => {
   if (!e) return null;
   const r = new Date(e);
   return isNaN(r.getTime()) ? null : r;
@@ -1139,7 +1139,7 @@ const Nt = l.memo(hr), Ge = (e) => {
     onError: n,
     validate: a
   });
-  return /* @__PURE__ */ p(O, { field: e, error: i, children: /* @__PURE__ */ p(
+  return /* @__PURE__ */ p(L, { field: e, error: i, children: /* @__PURE__ */ p(
     "input",
     {
       id: e.name,
@@ -1147,7 +1147,7 @@ const Nt = l.memo(hr), Ge = (e) => {
       ref: s,
       defaultValue: Je(r),
       onChange: d,
-      className: U(V.input, V.textInput),
+      className: U($.input, $.textInput),
       ...e.minDate ? { min: e.minDate } : {},
       ...e.maxDate ? { max: e.maxDate } : {},
       "aria-invalid": !!i,
@@ -1156,19 +1156,19 @@ const Nt = l.memo(hr), Ge = (e) => {
   ) });
 };
 br.displayName = "DateInput";
-const kt = l.memo(br), yr = ({ field: e }) => {
+const It = l.memo(br), yr = ({ field: e }) => {
   const { t: r } = B(), { displayText: t = "", textAlign: n = "left", allowHtml: o = !1 } = e;
   return /* @__PURE__ */ p(
     "div",
     {
-      className: V.description,
+      className: $.description,
       style: { textAlign: n },
       ...o ? { dangerouslySetInnerHTML: { __html: r(t) } } : { children: r(t) }
     }
   );
 };
 yr.displayName = "Description";
-const It = l.memo(yr), vr = ({
+const Et = l.memo(yr), vr = ({
   field: e,
   value: r,
   onChange: t,
@@ -1189,14 +1189,14 @@ const It = l.memo(yr), vr = ({
     }
     w !== E.current && (E.current = w, y(w), m.current?.(w ?? null));
   }, [r, N, t, e.options]);
-  const F = () => {
+  const M = () => {
     if (!d.current) return;
     const g = d.current.getBoundingClientRect();
     C({ x: g.left, y: g.bottom }), f((w) => !w);
-  }, M = (g) => {
+  }, F = (g) => {
     const w = N(g);
     w !== E.current && (E.current = w, y(w), m.current?.(w ?? null)), t?.(g), f(!1);
-  }, $ = l.useMemo(() => {
+  }, V = l.useMemo(() => {
     const g = e.options.find((w) => String(w.value) === String(r));
     return g ? a(g.label) : "";
   }, [e.options, r, a]), R = (g, w, x) => {
@@ -1225,14 +1225,14 @@ const It = l.memo(yr), vr = ({
     ...R(s, "dropdown", "arrow"),
     ...R(i, void 0, "arrow")
   }), [s, i]);
-  return /* @__PURE__ */ D("div", { children: [
-    /* @__PURE__ */ p(O, { field: e, error: h, children: /* @__PURE__ */ D(
+  return /* @__PURE__ */ z("div", { children: [
+    /* @__PURE__ */ p(L, { field: e, error: h, children: /* @__PURE__ */ z(
       "div",
       {
         ref: d,
         className: "reactaform-input",
         style: I,
-        onClick: F,
+        onClick: M,
         tabIndex: 0,
         role: "combobox",
         "aria-haspopup": "listbox",
@@ -1240,21 +1240,21 @@ const It = l.memo(yr), vr = ({
         "aria-invalid": !!h,
         "aria-describedby": h ? `${e.name}-error` : void 0,
         onKeyDown: (g) => {
-          (g.key === "Enter" || g.key === " ") && (g.preventDefault(), F());
+          (g.key === "Enter" || g.key === " ") && (g.preventDefault(), M());
         },
         children: [
-          /* @__PURE__ */ p("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", paddingRight: "1.8em", display: "block" }, children: $ }),
+          /* @__PURE__ */ p("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", paddingRight: "1.8em", display: "block" }, children: V }),
           /* @__PURE__ */ p("span", { style: v, "aria-hidden": !0, children: "▼" })
         ]
       }
     ) }),
     u && b && /* @__PURE__ */ p(
-      Et,
+      Ft,
       {
         position: b,
         options: e.options,
         selectedValue: String(r),
-        onSelect: M,
+        onSelect: F,
         onClose: () => f(!1),
         controlRef: d,
         theme: c,
@@ -1262,7 +1262,7 @@ const It = l.memo(yr), vr = ({
       }
     )
   ] });
-}, Et = ({
+}, Ft = ({
   position: e,
   options: r,
   selectedValue: t,
@@ -1333,7 +1333,7 @@ const It = l.memo(yr), vr = ({
     const v = i.current.querySelector(`#opt-${d}`);
     v && requestAnimationFrame(() => v.focus());
   }, [d]);
-  const y = 250, E = 200, [F, M] = l.useState(null), [$, R] = l.useState(null);
+  const y = 250, E = 200, [M, F] = l.useState(null), [V, R] = l.useState(null);
   if (l.useEffect(() => {
     if (typeof window > "u") return;
     const v = () => {
@@ -1343,7 +1343,7 @@ const It = l.memo(yr), vr = ({
         const j = A.getBoundingClientRect();
         x = j.left, k = j.bottom, S = Math.max(80, Math.round(j.width));
       }
-      x = Math.min(x, window.innerWidth - S), k = Math.min(k, window.innerHeight - E), M({ left: x, top: k }), R(S);
+      x = Math.min(x, window.innerWidth - S), k = Math.min(k, window.innerHeight - E), F({ left: x, top: k }), R(S);
     };
     v(), window.addEventListener("scroll", v, !0), window.addEventListener("resize", v);
     let g = null;
@@ -1362,9 +1362,9 @@ const It = l.memo(yr), vr = ({
         "aria-activedescendant": d >= 0 ? `opt-${d}` : void 0,
         style: {
           position: "fixed",
-          top: F ? F.top : e.y,
-          left: F ? F.left : e.x,
-          width: $ ?? y,
+          top: M ? M.top : e.y,
+          left: M ? M.left : e.x,
+          width: V ?? y,
           ...N
         },
         "data-reactaform-theme": c ?? "light",
@@ -1439,7 +1439,7 @@ const Mt = l.memo(vr), xr = ({
     onError: n,
     validate: a
   });
-  return /* @__PURE__ */ p(O, { field: e, error: s, children: /* @__PURE__ */ p(
+  return /* @__PURE__ */ p(L, { field: e, error: s, children: /* @__PURE__ */ p(
     "input",
     {
       id: e.name,
@@ -1447,14 +1447,14 @@ const Mt = l.memo(vr), xr = ({
       defaultValue: String(r ?? ""),
       ref: c,
       onChange: i,
-      className: U(V.input, V.textInput),
+      className: U($.input, $.textInput),
       "aria-invalid": !!s,
       "aria-describedby": s ? `${e.name}-error` : void 0
     }
   ) });
 };
 xr.displayName = "EmailInput";
-const Ft = l.memo(xr), wr = ({ field: e }) => {
+const Vt = l.memo(xr), wr = ({ field: e }) => {
   const { theme: r } = B(), {
     color: t = ie(r) ? "#444444" : "#CCCCCC",
     thickness: n = 1,
@@ -1513,11 +1513,11 @@ const $t = l.memo(wr), Sr = ({ field: e, value: r, onChange: t, onError: n, erro
       const S = h(k);
       S !== u.current && (u.current = S, b(S), m.current?.(S ?? null)), t?.(k);
     }
-  }, F = (g) => {
-    g.preventDefault(), g.stopPropagation(), i(!0);
   }, M = (g) => {
+    g.preventDefault(), g.stopPropagation(), i(!0);
+  }, F = (g) => {
     g.preventDefault(), g.stopPropagation(), i(!1);
-  }, $ = (g) => {
+  }, V = (g) => {
     if (Array.isArray(r) && typeof g == "number") {
       const w = r.filter((S, A) => A !== g), x = w.length > 0 ? w : null, k = h(x ?? []);
       k !== u.current && (u.current = k, b(k), m.current?.(k ?? null)), t?.(x);
@@ -1535,7 +1535,7 @@ const $t = l.memo(wr), Sr = ({ field: e, value: r, onChange: t, onError: n, erro
       gap: "6px",
       maxHeight: "200px",
       overflowY: "auto"
-    }, children: g.map((w, x) => /* @__PURE__ */ D(
+    }, children: g.map((w, x) => /* @__PURE__ */ z(
       "div",
       {
         style: {
@@ -1565,7 +1565,7 @@ const $t = l.memo(wr), Sr = ({ field: e, value: r, onChange: t, onError: n, erro
             "button",
             {
               type: "button",
-              onClick: () => $(Array.isArray(r) ? x : void 0),
+              onClick: () => V(Array.isArray(r) ? x : void 0),
               "aria-label": a("Remove file"),
               style: {
                 background: "transparent",
@@ -1593,14 +1593,14 @@ const $t = l.memo(wr), Sr = ({ field: e, value: r, onChange: t, onError: n, erro
       `${w.name}-${x}`
     )) });
   }, [I, v] = l.useState(!1);
-  return /* @__PURE__ */ p(O, { field: e, error: f, children: /* @__PURE__ */ D("div", { style: { width: "100%" }, children: [
-    /* @__PURE__ */ D(
+  return /* @__PURE__ */ p(L, { field: e, error: f, children: /* @__PURE__ */ z("div", { style: { width: "100%" }, children: [
+    /* @__PURE__ */ z(
       "div",
       {
         className: "reactaform-input",
         onDrop: E,
-        onDragOver: F,
-        onDragLeave: M,
+        onDragOver: M,
+        onDragLeave: F,
         onMouseEnter: () => v(!0),
         onMouseLeave: () => v(!1),
         style: {
@@ -1668,7 +1668,7 @@ const $t = l.memo(wr), Sr = ({ field: e, value: r, onChange: t, onError: n, erro
   ] }) });
 };
 Sr.displayName = "FileInput";
-const Vt = l.memo(Sr), Cr = ({
+const At = l.memo(Sr), Cr = ({
   field: e,
   value: r,
   onChange: t,
@@ -1681,7 +1681,7 @@ const Vt = l.memo(Sr), Cr = ({
     onError: n,
     validate: a
   });
-  return /* @__PURE__ */ p(O, { field: e, error: i, children: /* @__PURE__ */ p(
+  return /* @__PURE__ */ p(L, { field: e, error: i, children: /* @__PURE__ */ p(
     "input",
     {
       id: e.name,
@@ -1689,7 +1689,7 @@ const Vt = l.memo(Sr), Cr = ({
       defaultValue: c,
       ref: s,
       onChange: d,
-      className: U(V.input, V.textInput),
+      className: U($.input, $.textInput),
       style: { flex: 1 },
       "aria-invalid": !!i,
       "aria-describedby": i ? `${e.name}-error` : void 0
@@ -1697,7 +1697,7 @@ const Vt = l.memo(Sr), Cr = ({
   ) });
 };
 Cr.displayName = "FloatArrayInput";
-const At = l.memo(Cr), Nr = ({
+const Rt = l.memo(Cr), Nr = ({
   field: e,
   value: r,
   onChange: t,
@@ -1710,7 +1710,7 @@ const At = l.memo(Cr), Nr = ({
     onError: n,
     validate: a
   });
-  return /* @__PURE__ */ p(O, { field: e, error: s, children: /* @__PURE__ */ p(
+  return /* @__PURE__ */ p(L, { field: e, error: s, children: /* @__PURE__ */ p(
     "input",
     {
       id: e.name,
@@ -1719,8 +1719,8 @@ const At = l.memo(Cr), Nr = ({
       defaultValue: String(r ?? ""),
       onChange: i,
       className: U(
-        V.input,
-        V.inputNumber
+        $.input,
+        $.inputNumber
       ),
       "aria-invalid": !!s,
       "aria-describedby": s ? `${e.name}-error` : void 0
@@ -1728,8 +1728,8 @@ const At = l.memo(Cr), Nr = ({
   ) });
 };
 Nr.displayName = "FloatInput";
-const Rt = l.memo(Nr);
-function Dt() {
+const Dt = l.memo(Nr);
+function zt() {
   try {
     return "/";
   } catch {
@@ -1748,18 +1748,18 @@ const kr = ({ field: e, value: r }) => {
     right: "flex-end"
   }, c = typeof r == "string" ? r : "";
   let s = c && c.trim() !== "" ? c : typeof e.defaultValue == "string" ? e.defaultValue : "";
-  s && !s.startsWith("/") && (s = `${Dt()}${s}`);
+  s && !s.startsWith("/") && (s = `${zt()}${s}`);
   const i = e.localized?.split(";").map((h) => h.trim()), [d, m] = l.useState(s || ""), u = l.useRef(s || null);
   if (l.useEffect(() => {
     if (!s) return;
     const h = s.split("/"), y = h.pop(), E = y.lastIndexOf(".");
     if (E === -1) return;
-    const F = y.substring(0, E), M = y.substring(E);
-    let $ = null;
-    i?.includes(t) && ($ = `${F}_${t}${M}`);
+    const M = y.substring(0, E), F = y.substring(E);
+    let V = null;
+    i?.includes(t) && (V = `${M}_${t}${F}`);
     const R = new AbortController();
-    if ($) {
-      const I = [...h, $].join("/");
+    if (V) {
+      const I = [...h, V].join("/");
       fetch(I, { method: "HEAD", signal: R.signal }).then((v) => {
         const g = v.ok ? I : s;
         g !== u.current && (u.current = g, m(g));
@@ -1780,7 +1780,7 @@ const kr = ({ field: e, value: r }) => {
     boxShadow: "0 2px 6px rgba(0,0,0,0.1)",
     margin: "0 0 8px 0"
   };
-  return f && b ? (C.width = f, C.height = b, N.width = `${f}px`, N.height = `${b}px`) : f && !b ? (C.width = f, N.width = `${f}px`, N.height = "auto") : !f && b && (C.height = b, N.width = "auto", N.height = `${b}px`), /* @__PURE__ */ p(O, { field: e, children: /* @__PURE__ */ p(
+  return f && b ? (C.width = f, C.height = b, N.width = `${f}px`, N.height = `${b}px`) : f && !b ? (C.width = f, N.width = `${f}px`, N.height = "auto") : !f && b && (C.height = b, N.width = "auto", N.height = `${b}px`), /* @__PURE__ */ p(L, { field: e, children: /* @__PURE__ */ p(
     "div",
     {
       "data-testid": "image-wrapper",
@@ -1802,7 +1802,7 @@ const kr = ({ field: e, value: r }) => {
   ) });
 };
 kr.displayName = "ImageDisplay";
-const zt = l.memo(kr), Ir = ({
+const Pt = l.memo(kr), Ir = ({
   field: e,
   value: r,
   onChange: t,
@@ -1815,7 +1815,7 @@ const zt = l.memo(kr), Ir = ({
     onError: n,
     validate: a
   });
-  return /* @__PURE__ */ p(O, { field: e, error: i, children: /* @__PURE__ */ p(
+  return /* @__PURE__ */ p(L, { field: e, error: i, children: /* @__PURE__ */ p(
     "input",
     {
       id: e.name,
@@ -1823,7 +1823,7 @@ const zt = l.memo(kr), Ir = ({
       defaultValue: c,
       ref: s,
       onChange: d,
-      className: U(V.input, V.textInput),
+      className: U($.input, $.textInput),
       style: { flex: 1 },
       "aria-invalid": !!i,
       "aria-describedby": i ? `${e.name}-error` : void 0
@@ -1831,7 +1831,7 @@ const zt = l.memo(kr), Ir = ({
   ) });
 };
 Ir.displayName = "IntegerArrayInput";
-const Pt = l.memo(Ir), Er = ({
+const Ot = l.memo(Ir), Er = ({
   field: e,
   value: r,
   onChange: t,
@@ -1844,7 +1844,7 @@ const Pt = l.memo(Ir), Er = ({
     onError: n,
     validate: a
   });
-  return /* @__PURE__ */ p(O, { field: e, error: s, children: /* @__PURE__ */ p(
+  return /* @__PURE__ */ p(L, { field: e, error: s, children: /* @__PURE__ */ p(
     "input",
     {
       id: e.name,
@@ -1852,14 +1852,14 @@ const Pt = l.memo(Ir), Er = ({
       defaultValue: String(r ?? ""),
       ref: c,
       onChange: i,
-      className: U(V.input, V.inputNumber),
+      className: U($.input, $.inputNumber),
       "aria-invalid": !!s,
       "aria-describedby": s ? `${e.name}-error` : void 0
     }
   ) });
 };
 Er.displayName = "IntegerInput";
-const Lt = l.memo(Er), Mr = ({
+const Lt = l.memo(Er), Fr = ({
   field: e,
   value: r,
   onChange: t,
@@ -1872,7 +1872,7 @@ const Lt = l.memo(Er), Mr = ({
     onError: n,
     validate: a
   });
-  return /* @__PURE__ */ p(O, { field: e, error: s, children: /* @__PURE__ */ p(
+  return /* @__PURE__ */ p(L, { field: e, error: s, children: /* @__PURE__ */ p(
     "textarea",
     {
       id: e.name,
@@ -1885,14 +1885,14 @@ const Lt = l.memo(Er), Mr = ({
         width: "100%",
         boxSizing: "border-box"
       },
-      className: U(V.input, V.textInput),
+      className: U($.input, $.textInput),
       "aria-invalid": !!s,
       "aria-describedby": s ? `${e.name}-error` : void 0
     }
   ) });
 };
-Mr.displayName = "MultilineTextInput";
-const Ot = l.memo(Mr), Fr = ({
+Fr.displayName = "MultilineTextInput";
+const Tt = l.memo(Fr), Mr = ({
   field: e,
   value: r,
   onChange: t,
@@ -1915,10 +1915,10 @@ const Ot = l.memo(Mr), Fr = ({
   ), y = l.useMemo(() => {
     const x = Array.isArray(r) ? r : [], k = new Set(h.map((S) => S.value));
     return x.filter((S) => k.has(S));
-  }, [r, h]), E = T(e, o), [F, M] = l.useState(null), $ = l.useRef(null);
+  }, [r, h]), E = T(e, o), [M, F] = l.useState(null), V = l.useRef(null);
   l.useEffect(() => {
     const x = E(Array.isArray(r) ? r : []);
-    x !== $.current && ($.current = x, M(x), a.current?.(x ?? null));
+    x !== V.current && (V.current = x, F(x), a.current?.(x ?? null));
   }, [r, E]);
   const R = () => {
     if (!u.current) return;
@@ -1926,7 +1926,7 @@ const Ot = l.memo(Mr), Fr = ({
     N({ x: x.left, y: x.bottom }), b((k) => !k);
   }, I = (x) => {
     const k = y.includes(x) ? y.filter((A) => A !== x) : [...y, x], S = E(k);
-    S !== $.current && ($.current = S, M(S), a.current?.(S ?? null)), t?.(k);
+    S !== V.current && (V.current = S, F(S), a.current?.(S ?? null)), t?.(k);
   }, v = l.useMemo(
     () => ({
       height: "var(--reactaform-input-height, 2.5rem)",
@@ -1969,8 +1969,8 @@ const Ot = l.memo(Mr), Fr = ({
     }),
     [i, d]
   );
-  return /* @__PURE__ */ D("div", { children: [
-    /* @__PURE__ */ p(O, { field: e, error: F, children: /* @__PURE__ */ p("div", { style: { width: "100%" }, children: /* @__PURE__ */ D(
+  return /* @__PURE__ */ z("div", { children: [
+    /* @__PURE__ */ p(L, { field: e, error: M, children: /* @__PURE__ */ p("div", { style: { width: "100%" }, children: /* @__PURE__ */ z(
       "div",
       {
         ref: u,
@@ -1980,13 +1980,13 @@ const Ot = l.memo(Mr), Fr = ({
         role: "button",
         "aria-haspopup": "listbox",
         "aria-expanded": f,
-        "aria-invalid": !!F,
-        "aria-describedby": F ? `${e.name}-error` : void 0,
+        "aria-invalid": !!M,
+        "aria-describedby": M ? `${e.name}-error` : void 0,
         onKeyDown: (x) => {
           (x.key === "Enter" || x.key === " ") && (x.preventDefault(), R());
         },
         children: [
-          /* @__PURE__ */ D(
+          /* @__PURE__ */ z(
             "span",
             {
               style: { flex: 1, color: "var(--reactaform-text-muted, #888)" },
@@ -2015,7 +2015,7 @@ const Ot = l.memo(Mr), Fr = ({
       }
     ) }) }),
     f && C && /* @__PURE__ */ p(
-      Tt,
+      jt,
       {
         position: C,
         options: h,
@@ -2027,7 +2027,7 @@ const Ot = l.memo(Mr), Fr = ({
       }
     )
   ] });
-}, Tt = ({
+}, jt = ({
   position: e,
   options: r,
   selectedValues: t,
@@ -2104,7 +2104,7 @@ const Ot = l.memo(Mr), Fr = ({
     );
     I && requestAnimationFrame(() => I.focus());
   }, [i]);
-  const h = 250, y = 200, [E, F] = l.useState(null), [M, $] = l.useState(null);
+  const h = 250, y = 200, [E, M] = l.useState(null), [F, V] = l.useState(null);
   if (l.useEffect(() => {
     if (typeof window > "u") return;
     const I = () => {
@@ -2114,7 +2114,7 @@ const Ot = l.memo(Mr), Fr = ({
         const A = S.getBoundingClientRect();
         w = A.left, x = A.bottom, k = Math.max(80, Math.round(A.width));
       }
-      w = Math.min(w, window.innerWidth - k), x = Math.min(x, window.innerHeight - y), F({ left: w, top: x }), $(k);
+      w = Math.min(w, window.innerWidth - k), x = Math.min(x, window.innerHeight - y), M({ left: w, top: x }), V(k);
     };
     I(), window.addEventListener("scroll", I, !0), window.addEventListener("resize", I);
     let v = null;
@@ -2135,7 +2135,7 @@ const Ot = l.memo(Mr), Fr = ({
           position: "fixed",
           top: E ? E.top : e.y,
           left: E ? E.left : e.x,
-          width: M ?? h,
+          width: F ?? h,
           // spread the static popup styles
           ...C
         },
@@ -2145,7 +2145,7 @@ const Ot = l.memo(Mr), Fr = ({
             ...N,
             background: v === i ? w : N.background
           };
-          return /* @__PURE__ */ D(
+          return /* @__PURE__ */ z(
             "div",
             {
               id: `multi-opt-${v}`,
@@ -2214,8 +2214,8 @@ const Ot = l.memo(Mr), Fr = ({
     R
   );
 };
-Fr.displayName = "MultiSelect";
-const jt = l.memo(Fr), $r = ({
+Mr.displayName = "MultiSelect";
+const Bt = l.memo(Mr), Vr = ({
   field: e,
   value: r,
   onChange: t,
@@ -2228,7 +2228,7 @@ const jt = l.memo(Fr), $r = ({
     onError: n,
     validate: a
   }), d = Math.max(1, Math.round(e.step ?? 1));
-  return /* @__PURE__ */ p(O, { field: e, error: s, children: /* @__PURE__ */ p(
+  return /* @__PURE__ */ p(L, { field: e, error: s, children: /* @__PURE__ */ p(
     "input",
     {
       id: e.name,
@@ -2243,14 +2243,14 @@ const jt = l.memo(Fr), $r = ({
         width: "100%",
         height: "100%"
       },
-      className: V.input,
+      className: $.input,
       "aria-invalid": !!s,
       "aria-describedby": s ? `${e.name}-error` : void 0
     }
   ) });
 };
-$r.displayName = "NumericStepperInput";
-const Bt = l.memo($r), Vr = ({
+Vr.displayName = "NumericStepperInput";
+const Ht = l.memo(Vr), $r = ({
   field: e,
   value: r,
   onChange: t,
@@ -2263,7 +2263,7 @@ const Bt = l.memo($r), Vr = ({
     onError: n,
     validate: a
   });
-  return /* @__PURE__ */ p(O, { field: e, error: s, children: /* @__PURE__ */ p(
+  return /* @__PURE__ */ p(L, { field: e, error: s, children: /* @__PURE__ */ p(
     "input",
     {
       id: e.name,
@@ -2271,14 +2271,14 @@ const Bt = l.memo($r), Vr = ({
       defaultValue: String(r ?? ""),
       ref: c,
       onChange: i,
-      className: U(V.input, V.textInput),
+      className: U($.input, $.textInput),
       "aria-invalid": !!s,
       "aria-describedby": s ? `${e.name}-error` : void 0
     }
   ) });
 };
-Vr.displayName = "PhoneInput";
-const Ht = l.memo(Vr), Ar = ({
+$r.displayName = "PhoneInput";
+const qt = l.memo($r), Ar = ({
   field: e,
   value: r,
   onChange: t,
@@ -2325,21 +2325,21 @@ const Ht = l.memo(Vr), Ar = ({
     width: s === "column" ? "100%" : void 0,
     justifyContent: "flex-start"
   };
-  return /* @__PURE__ */ p(O, { field: e, error: d, children: /* @__PURE__ */ p(
+  return /* @__PURE__ */ p(L, { field: e, error: d, children: /* @__PURE__ */ p(
     "div",
     {
-      className: V.input,
+      className: $.input,
       "aria-labelledby": `${e.name}-label`,
       "aria-invalid": !!d,
       style: C,
       children: e.options.map((h) => {
         const y = String(h.value), E = `${e.name}-${y}`;
-        return /* @__PURE__ */ D(
+        return /* @__PURE__ */ z(
           "label",
           {
-            className: U(V.label),
+            className: U($.label),
             style: N,
-            onMouseDown: (F) => F.preventDefault(),
+            onMouseDown: (M) => M.preventDefault(),
             onClick: () => {
               String(r ?? "") !== y && b({ target: { value: y } });
             },
@@ -2377,10 +2377,10 @@ const Ht = l.memo(Vr), Ar = ({
   ) });
 };
 Ar.displayName = "RadioInput";
-const qt = l.memo(Ar), Ut = {
+const Ut = l.memo(Ar), Wt = {
   display: "flex",
   gap: 4
-}, Wt = {
+}, _t = {
   cursor: "pointer",
   fontSize: "1.5rem",
   lineHeight: 1,
@@ -2418,30 +2418,30 @@ const qt = l.memo(Ar), Ut = {
     },
     [s, C]
   );
-  return /* @__PURE__ */ p(O, { field: e, error: b, children: /* @__PURE__ */ p(
+  return /* @__PURE__ */ p(L, { field: e, error: b, children: /* @__PURE__ */ p(
     "div",
     {
       role: "radiogroup",
       "aria-labelledby": `${e.name}-label`,
       "aria-invalid": !!b,
       "aria-describedby": b ? `${e.name}-error` : void 0,
-      style: Ut,
+      style: Wt,
       children: Array.from({ length: s }, (h, y) => {
-        const E = y < f, M = d !== null && y <= d || E ? "gold" : "lightgray";
+        const E = y < f, F = d !== null && y <= d || E ? "gold" : "lightgray";
         return /* @__PURE__ */ p(
           "span",
           {
-            ref: ($) => u.current[y] = $,
+            ref: (V) => u.current[y] = V,
             role: "radio",
             tabIndex: f > 0 ? y === f - 1 ? 0 : -1 : y === 0 ? 0 : -1,
             "aria-checked": E,
             "aria-label": `Rating ${y + 1}`,
             title: a(`${e.displayName} ${y + 1}`),
             onClick: () => C(y + 1),
-            onKeyDown: ($) => N($, y),
+            onKeyDown: (V) => N(V, y),
             onMouseEnter: () => m(y),
             onMouseLeave: () => m(null),
-            style: { ...Wt, color: M },
+            style: { ..._t, color: F },
             children: i
           },
           y
@@ -2451,7 +2451,7 @@ const qt = l.memo(Ar), Ut = {
   ) });
 };
 Rr.displayName = "RatingInput";
-const _t = l.memo(Rr), Dr = ({
+const Kt = l.memo(Rr), Dr = ({
   field: e,
   value: r,
   onChange: t,
@@ -2464,7 +2464,7 @@ const _t = l.memo(Rr), Dr = ({
     onError: n,
     validate: c
   }), [m, u] = l.useState(!1), f = () => u((b) => !b);
-  return /* @__PURE__ */ p(O, { field: e, error: i, children: /* @__PURE__ */ D("div", { style: { display: "flex", alignItems: "center", gap: 8, width: "100%" }, children: [
+  return /* @__PURE__ */ p(L, { field: e, error: i, children: /* @__PURE__ */ z("div", { style: { display: "flex", alignItems: "center", gap: 8, width: "100%" }, children: [
     /* @__PURE__ */ p(
       "input",
       {
@@ -2473,7 +2473,7 @@ const _t = l.memo(Rr), Dr = ({
         defaultValue: String(r ?? ""),
         ref: s,
         onChange: d,
-        className: U(V.input, V.textInput),
+        className: U($.input, $.textInput),
         style: { flex: 1, minWidth: 0 },
         "aria-invalid": !!i,
         "aria-describedby": i ? `${e.name}-error` : void 0
@@ -2500,7 +2500,7 @@ const _t = l.memo(Rr), Dr = ({
   ] }) });
 };
 Dr.displayName = "PasswordInput";
-const Kt = l.memo(Dr), zr = ({ field: e, value: r, onChange: t, onError: n, error: o }) => {
+const Gt = l.memo(Dr), zr = ({ field: e, value: r, onChange: t, onError: n, error: o }) => {
   const a = T(e, o), c = e.min ?? 0, s = e.max ?? 100, [i, d] = l.useState(
     () => isNaN(Number(r)) ? String(c) : String(Number(r))
   );
@@ -2519,7 +2519,7 @@ const Kt = l.memo(Dr), zr = ({ field: e, value: r, onChange: t, onError: n, erro
     },
     [t]
   ), f = isNaN(Number(i)) ? String(c) : String(Number(i));
-  return /* @__PURE__ */ p(O, { field: e, error: m, children: /* @__PURE__ */ D("div", { style: { display: "flex", alignItems: "center", gap: "8px", width: "100%" }, children: [
+  return /* @__PURE__ */ p(L, { field: e, error: m, children: /* @__PURE__ */ z("div", { style: { display: "flex", alignItems: "center", gap: "8px", width: "100%" }, children: [
     /* @__PURE__ */ p(
       "input",
       {
@@ -2534,7 +2534,7 @@ const Kt = l.memo(Dr), zr = ({ field: e, value: r, onChange: t, onError: n, erro
           padding: 0,
           flex: 1
         },
-        className: V.rangeInput,
+        className: $.rangeInput,
         "aria-invalid": !!m,
         "aria-describedby": m ? `${e.name}-error` : void 0
       }
@@ -2554,7 +2554,7 @@ const Kt = l.memo(Dr), zr = ({ field: e, value: r, onChange: t, onError: n, erro
           textAlign: "center",
           flexShrink: 0
         },
-        className: U(V.input, V.textInput),
+        className: U($.input, $.textInput),
         "aria-invalid": !!m,
         "aria-describedby": m ? `${e.name}-error` : void 0
       }
@@ -2562,7 +2562,7 @@ const Kt = l.memo(Dr), zr = ({ field: e, value: r, onChange: t, onError: n, erro
   ] }) });
 };
 zr.displayName = "SliderInput";
-const Gt = l.memo(zr), Pr = ({
+const Jt = l.memo(zr), Pr = ({
   field: e,
   value: r,
   onChange: t,
@@ -2573,10 +2573,10 @@ const Gt = l.memo(zr), Pr = ({
   l.useEffect(() => {
     n?.(d);
   }, [d, n]);
-  const m = c, u = s, f = (F, M, $) => {
-    if (!M) return {};
-    const R = F?.[M];
-    return ($ && R ? R[$] : void 0) ?? {};
+  const m = c, u = s, f = (M, F, V) => {
+    if (!F) return {};
+    const R = M?.[F];
+    return (V && R ? R[V] : void 0) ?? {};
   }, b = l.useMemo(() => ({
     display: "inline-block",
     position: "relative",
@@ -2631,17 +2631,17 @@ const Gt = l.memo(zr), Pr = ({
   }), [m, u]), y = !!r, E = () => {
     t?.(!y);
   };
-  return /* @__PURE__ */ p(O, { field: e, error: null, rightAlign: !1, children: /* @__PURE__ */ D("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }, children: [
+  return /* @__PURE__ */ p(L, { field: e, error: null, rightAlign: !1, children: /* @__PURE__ */ z("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }, children: [
     /* @__PURE__ */ p(
       "label",
       {
-        className: V.label,
+        className: $.label,
         htmlFor: e.name,
         style: { textAlign: "left", justifyContent: "flex-start" },
         children: a(e.displayName)
       }
     ),
-    /* @__PURE__ */ D("label", { style: b, children: [
+    /* @__PURE__ */ z("label", { style: b, children: [
       /* @__PURE__ */ p(
         "input",
         {
@@ -2666,8 +2666,8 @@ const Gt = l.memo(zr), Pr = ({
           "aria-invalid": !1,
           "aria-describedby": void 0,
           onClick: E,
-          onKeyDown: (F) => {
-            (F.key === " " || F.key === "Spacebar" || F.key === "Space" || F.key === "Enter") && (F.preventDefault(), E());
+          onKeyDown: (M) => {
+            (M.key === " " || M.key === "Spacebar" || M.key === "Space" || M.key === "Enter") && (M.preventDefault(), E());
           },
           className: `reactaform-switch ${y ? "active checked on" : ""} `,
           style: y ? { ...N, backgroundColor: "var(--reactaform-switch-on-bg, #22c55e)", borderColor: "var(--reactaform-switch-on-border, #16a34a)" } : N,
@@ -2686,7 +2686,7 @@ const Gt = l.memo(zr), Pr = ({
   ] }) });
 };
 Pr.displayName = "SwitchInput";
-const Jt = l.memo(Pr), xe = ({
+const Yt = l.memo(Pr), xe = ({
   field: e,
   value: r,
   onChange: t,
@@ -2699,7 +2699,7 @@ const Jt = l.memo(Pr), xe = ({
     onError: n,
     validate: a
   });
-  return /* @__PURE__ */ p(O, { field: e, error: s, children: /* @__PURE__ */ p(
+  return /* @__PURE__ */ p(L, { field: e, error: s, children: /* @__PURE__ */ p(
     "input",
     {
       id: e.name,
@@ -2707,7 +2707,7 @@ const Jt = l.memo(Pr), xe = ({
       defaultValue: String(r ?? ""),
       ref: c,
       onChange: i,
-      className: U(V.input, V.textInput),
+      className: U($.input, $.textInput),
       placeholder: e.placeholder,
       "aria-invalid": !!s,
       "aria-describedby": s ? `${e.name}-error` : void 0
@@ -2715,7 +2715,7 @@ const Jt = l.memo(Pr), xe = ({
   ) });
 };
 xe.displayName = "TextInput";
-const Lr = ({
+const Or = ({
   field: e,
   value: r,
   onChange: t,
@@ -2728,7 +2728,7 @@ const Lr = ({
     onError: n,
     validate: a
   });
-  return /* @__PURE__ */ p(O, { field: e, error: s, children: /* @__PURE__ */ p(
+  return /* @__PURE__ */ p(L, { field: e, error: s, children: /* @__PURE__ */ p(
     "input",
     {
       id: e.name,
@@ -2739,15 +2739,15 @@ const Lr = ({
       onChange: i,
       min: typeof e.min == "string" ? e.min : void 0,
       max: typeof e.max == "string" ? e.max : void 0,
-      className: U(V.input, V.textInput),
+      className: U($.input, $.textInput),
       "aria-invalid": !!s,
       "aria-describedby": s ? `${e.name}-error` : void 0
     }
   ) });
 };
-Lr.displayName = "TimeInput";
-const Yt = l.memo(Lr);
-function Xt({
+Or.displayName = "TimeInput";
+const Xt = l.memo(Or);
+function Zt({
   pos: e,
   options: r,
   onClose: t,
@@ -2826,7 +2826,7 @@ function Xt({
     i
   );
 }
-const $e = {
+const Ve = {
   length: ["m", "cm", "mm", "km", "in", "ft", "yd", "mi"],
   area: ["m^2", "cm^2", "mm^2", "in^2", "ft^2", "yd^2"],
   volume: ["L", "m^3", "cm^3", "mL", "in^3", "ft^3", "yd^3"],
@@ -2834,7 +2834,7 @@ const $e = {
   time: ["min", "s", "h", "ms", "d"],
   temperature: ["C", "F", "K"],
   angle: ["deg", "rad", "rev"]
-}, Ve = {
+}, $e = {
   length: {
     m: "Meter (m)",
     mm: "Millimeter (mm)",
@@ -2943,13 +2943,13 @@ const $e = {
     rad: Math.PI / 180,
     rev: 1 / 360
   }
-}, Re = {}, Zt = /* @__PURE__ */ new Set([
-  ...Object.keys($e),
+}, Re = {}, Qt = /* @__PURE__ */ new Set([
   ...Object.keys(Ve),
+  ...Object.keys($e),
   ...Object.keys(Ae)
 ]);
-for (const e of Zt) {
-  const r = {}, t = $e[e] ?? [], n = Ve[e] ?? {}, o = Ae[e] ?? {};
+for (const e of Qt) {
+  const r = {}, t = Ve[e] ?? [], n = $e[e] ?? {}, o = Ae[e] ?? {};
   for (const a of t) {
     const c = n[a];
     r[a] = {
@@ -2967,7 +2967,7 @@ for (const e of Zt) {
     r[a] || (r[a] = { name: String(a), shortName: String(a), factor: c });
   Re[e] = r;
 }
-function Or(e, r, t) {
+function Lr(e, r, t) {
   if (e === "C") {
     if (r === "F") return t * (9 / 5) + 32;
     if (r === "K") return t + 273.15;
@@ -2992,11 +2992,11 @@ function Tr(e) {
     factors: t
   };
 }
-const mo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const fo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  convertTemperature: Or,
-  dimensionUnitDisplayMap: Ve,
-  dimensionUnitsMap: $e,
+  convertTemperature: Lr,
+  dimensionUnitDisplayMap: $e,
+  dimensionUnitsMap: Ve,
   dimensonUnitFactorsMap: Ae,
   getUnitFactors: Tr,
   unitsByDimension: Re
@@ -3016,28 +3016,28 @@ const mo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
       if (!Number.isFinite(y)) return;
       const E = h.currentTarget.getBoundingClientRect();
       m({ x: E.left, y: E.bottom });
-      const F = [];
+      const M = [];
       if (n === "temperature")
-        o.units.forEach(($) => {
-          const R = Or(t, $, y);
-          Number.isFinite(R) && F.push({
-            label: `${R.toFixed(6)} ${c($)}`,
+        o.units.forEach((V) => {
+          const R = Lr(t, V, y);
+          Number.isFinite(R) && M.push({
+            label: `${R.toFixed(6)} ${c(V)}`,
             value: R.toString(),
-            unit: $
+            unit: V
           });
         });
       else {
-        const $ = o.factors[t];
-        $ !== void 0 && Object.entries(o.factors).forEach(([R, I]) => {
-          const v = y / $ * I;
-          Number.isFinite(v) && F.push({
+        const V = o.factors[t];
+        V !== void 0 && Object.entries(o.factors).forEach(([R, I]) => {
+          const v = y / V * I;
+          Number.isFinite(v) && M.push({
             label: `${v.toFixed(6)} ${c(R)}`,
             value: v.toString(),
             unit: R
           });
         });
       }
-      f(F), i(F.length > 0);
+      f(M), i(M.length > 0);
     },
     [e, r, t, n, o, c]
   ), C = l.useCallback(
@@ -3048,7 +3048,7 @@ const mo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   ), N = l.useCallback(() => {
     i(!1), m(null);
   }, []);
-  return /* @__PURE__ */ D(Ie, { children: [
+  return /* @__PURE__ */ z(Ie, { children: [
     /* @__PURE__ */ p(
       "button",
       {
@@ -3076,7 +3076,7 @@ const mo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
       }
     ),
     s && u.length > 0 && /* @__PURE__ */ p(
-      Xt,
+      Zt,
       {
         pos: d,
         options: u,
@@ -3099,29 +3099,29 @@ const Br = ({ field: e, value: r, onChange: t, onError: n }) => {
     n?.(C);
   }, [C, n]);
   const N = l.useCallback(
-    (M) => {
-      const $ = M.target.value;
-      u($), a([$, f]), t?.([$, f]);
+    (F) => {
+      const V = F.target.value;
+      u(V), a([V, f]), t?.([V, f]);
     },
     [f, a, t]
   ), h = l.useCallback(
-    (M) => {
-      const $ = M.target.value;
-      b($), a([m, $]), t?.([m, $]);
+    (F) => {
+      const V = F.target.value;
+      b(V), a([m, V]), t?.([m, V]);
     },
     [m, a, t]
   ), y = l.useCallback(
-    (M) => {
-      u(M.value), b(M.unit), t?.([M.value, M.unit]);
+    (F) => {
+      u(F.value), b(F.unit), t?.([F.value, F.unit]);
     },
     [t]
   ), E = l.useMemo(
-    () => s ? s.units.map((M) => /* @__PURE__ */ p("option", { value: M, children: o(M) }, M)) : [],
+    () => s ? s.units.map((F) => /* @__PURE__ */ p("option", { value: F, children: o(F) }, F)) : [],
     [s, o]
   );
   if (!c || !s) return null;
-  const F = !!C || !m.trim();
-  return /* @__PURE__ */ p(O, { field: e, error: C, children: /* @__PURE__ */ D("div", { style: { display: "flex", alignItems: "center", gap: "var(--reactaform-unit-gap, 8px)", width: "100%" }, children: [
+  const M = !!C || !m.trim();
+  return /* @__PURE__ */ p(L, { field: e, error: C, children: /* @__PURE__ */ z("div", { style: { display: "flex", alignItems: "center", gap: "var(--reactaform-unit-gap, 8px)", width: "100%" }, children: [
     /* @__PURE__ */ p(
       "input",
       {
@@ -3130,7 +3130,7 @@ const Br = ({ field: e, value: r, onChange: t, onError: n }) => {
         value: m,
         onChange: N,
         style: { flex: "2 1 0" },
-        className: U(V.input, V.textInput),
+        className: U($.input, $.textInput),
         "aria-invalid": !!C,
         "aria-describedby": C ? `${e.name}-error` : void 0
       }
@@ -3142,7 +3142,7 @@ const Br = ({ field: e, value: r, onChange: t, onError: n }) => {
         value: f,
         onChange: h,
         style: { flex: "1 1 0" },
-        className: U(V.input, V.inputSelect),
+        className: U($.input, $.inputSelect),
         "aria-invalid": !!C,
         "aria-describedby": C ? `${e.name}-error` : void 0,
         children: E
@@ -3151,7 +3151,7 @@ const Br = ({ field: e, value: r, onChange: t, onError: n }) => {
     /* @__PURE__ */ p(
       jr,
       {
-        disabled: F,
+        disabled: M,
         inputValue: m,
         selectedUnit: f,
         dimension: c,
@@ -3163,7 +3163,7 @@ const Br = ({ field: e, value: r, onChange: t, onError: n }) => {
   ] }) });
 };
 Br.displayName = "UnitValueInput";
-const Qt = l.memo(Br), Hr = ({
+const en = l.memo(Br), Hr = ({
   field: e,
   value: r,
   onChange: t,
@@ -3176,7 +3176,7 @@ const Qt = l.memo(Br), Hr = ({
     onError: n,
     validate: a
   });
-  return /* @__PURE__ */ p(O, { field: e, error: s, children: /* @__PURE__ */ p(
+  return /* @__PURE__ */ p(L, { field: e, error: s, children: /* @__PURE__ */ p(
     "input",
     {
       id: e.name,
@@ -3184,7 +3184,7 @@ const Qt = l.memo(Br), Hr = ({
       defaultValue: String(r ?? ""),
       ref: c,
       onChange: i,
-      className: U(V.input, V.textInput),
+      className: U($.input, $.textInput),
       placeholder: "https://example.com",
       "aria-invalid": !!s,
       "aria-describedby": s ? `${e.name}-error` : void 0
@@ -3192,20 +3192,20 @@ const Qt = l.memo(Br), Hr = ({
   ) });
 };
 Hr.displayName = "UrlInput";
-const en = l.memo(Hr), se = new ne();
-function fo(e, r) {
+const rn = l.memo(Hr), se = new ne();
+function po(e, r) {
   se.register(e, r);
 }
-function rn(e) {
+function tn(e) {
   return se.get(e);
 }
-function po(e) {
+function go(e) {
   return se.has(e);
 }
-function go(e) {
+function ho(e) {
   return se.unregister(e);
 }
-function ho() {
+function bo() {
   return se.list();
 }
 const qr = ({
@@ -3219,7 +3219,7 @@ const qr = ({
       console.warn(`Button "${e.name}" has no action defined`);
       return;
     }
-    const f = rn(e.action);
+    const f = tn(e.action);
     if (!f) {
       const b = `Button handler "${e.action}" not found`;
       console.error(b), i(b);
@@ -3238,11 +3238,11 @@ const qr = ({
     cursor: a ? "wait" : "pointer",
     opacity: a ? 0.6 : 1
   } };
-  return e.width && typeof e.width == "number" && e.width > 0 && (u.width = `${e.width}px`), /* @__PURE__ */ p(O, { field: e, rightAlign: !0, error: s, children: /* @__PURE__ */ p(
+  return e.width && typeof e.width == "number" && e.width > 0 && (u.width = `${e.width}px`), /* @__PURE__ */ p(L, { field: e, rightAlign: !0, error: s, children: /* @__PURE__ */ p(
     "button",
     {
       type: "button",
-      className: V.button,
+      className: $.button,
       onClick: d,
       disabled: a,
       "aria-label": o(e.displayName),
@@ -3253,7 +3253,7 @@ const qr = ({
   ) });
 };
 qr.displayName = "Button";
-const tn = l.memo(qr), nn = {
+const nn = l.memo(qr), on = {
   // No debounce
   checkbox: !1,
   switch: !1,
@@ -3286,45 +3286,45 @@ const tn = l.memo(qr), nn = {
   slider: { wait: 100, leading: !0, trailing: !0 },
   stepper: { wait: 100, leading: !0, trailing: !0 }
 }, me = new ne(), De = {
-  button: tn,
-  checkbox: vt,
-  color: Nt,
-  date: kt,
-  description: It,
+  button: nn,
+  checkbox: xt,
+  color: kt,
+  date: It,
+  description: Et,
   dropdown: Mt,
-  email: Ft,
-  file: Vt,
-  float: Rt,
-  "float-array": At,
-  image: zt,
+  email: Vt,
+  file: At,
+  float: Dt,
+  "float-array": Rt,
+  image: Pt,
   int: Lt,
-  "int-array": Pt,
-  "multi-selection": jt,
-  multiline: Ot,
-  password: Kt,
-  phone: Ht,
-  radio: qt,
-  rating: _t,
+  "int-array": Ot,
+  "multi-selection": Bt,
+  multiline: Tt,
+  password: Gt,
+  phone: qt,
+  radio: Ut,
+  rating: Kt,
   separator: $t,
-  slider: Gt,
+  slider: Jt,
   string: xe,
-  stepper: Bt,
-  switch: Jt,
+  stepper: Ht,
+  switch: Yt,
   text: xe,
-  time: Yt,
-  unit: Qt,
-  url: en
+  time: Xt,
+  unit: en,
+  url: rn
 };
-function on(e) {
+function an(e) {
   return e in De;
 }
-function an(e, r) {
+function sn(e, r) {
   const { wait: t = 200, leading: n, trailing: o } = r, a = l.memo((c) => {
     const s = l.useRef(c.onChange);
     l.useEffect(() => {
       s.current = c.onChange;
     }, [c.onChange]);
-    const { callback: i, cancel: d } = lt(
+    const { callback: i, cancel: d } = ut(
       (...m) => {
         s.current?.(...m);
       },
@@ -3344,7 +3344,7 @@ function Ur(e, r, t) {
     console.warn(`Can't overwrite base component type "${e}".`);
     return;
   }
-  const o = nn[e];
+  const o = on[e];
   if (o === !1) {
     me.register(e, n);
     return;
@@ -3352,7 +3352,7 @@ function Ur(e, r, t) {
   const a = o ?? { wait: 200 };
   or ? me.register(e, n) : me.register(
     e,
-    an(n, a)
+    sn(n, a)
   );
 }
 function Wr(e, r) {
@@ -3362,7 +3362,7 @@ function _r(e) {
   return me.get(e);
 }
 let Ye = !1;
-function sn() {
+function cn() {
   Ye || (Object.entries(De).forEach(([e, r]) => {
     Ur(e, r, !0);
   }), Ye = !0);
@@ -3400,8 +3400,8 @@ ze.displayName = "FieldRenderer";
 const Kr = l.memo(
   ({ groupName: e, defaultOpen: r = !0, fields: t, valuesMap: n, handleChange: o, handleError: a, errorsMap: c, t: s }) => {
     const [i, d] = l.useState(r), m = l.useCallback(() => d((u) => !u), []);
-    return /* @__PURE__ */ D("fieldset", { className: "reactaform-group", children: [
-      /* @__PURE__ */ D("legend", { onClick: m, className: "reactaform-group_legend", children: [
+    return /* @__PURE__ */ z("fieldset", { className: "reactaform-group", children: [
+      /* @__PURE__ */ z("legend", { onClick: m, className: "reactaform-group_legend", children: [
         /* @__PURE__ */ p("span", { children: s(e) }),
         /* @__PURE__ */ p("span", { className: "reactaform-group_legend_arrow", children: i ? "▼" : "▶" })
       ] }),
@@ -3433,12 +3433,12 @@ const Pe = (e, r, t, n) => {
   const o = Object.values(n.children).flat();
   for (const a of o)
     typeof a == "string" && a in t && (t[a] = !1, Gr(a, r, t));
-}, cn = (e, r, t, n) => {
+}, ln = (e, r, t, n) => {
   const o = { ...t };
   return e.forEach((a) => {
     (!a.parents || Object.keys(a.parents).length === 0) && (o[a.name] = !0, Pe(a.name, n, r, o));
   }), o;
-}, ln = (e, r, t, n, o) => {
+}, un = (e, r, t, n, o) => {
   const a = { ...e }, c = r[n];
   if (Gr(n, r, a), o != null && c?.children) {
     const s = String(o), i = c.children[s];
@@ -3446,8 +3446,32 @@ const Pe = (e, r, t, n) => {
       for (const d of i)
         typeof d == "string" && r[d] && (a[d] = !0, Pe(d, r, t, a));
   }
+  for (const [s, i] of Object.entries(r))
+    i.parents && n in i.parents && (a[s] = Jr(s, r, t));
   return a;
-}, un = (e, r) => {
+}, Jr = (e, r, t) => {
+  const n = r[e];
+  if (!n) return !1;
+  if (!n.parents || Object.keys(n.parents).length === 0)
+    return !0;
+  for (const [o, a] of Object.entries(n.parents)) {
+    if (!r[o] || !Jr(o, r, t))
+      continue;
+    const s = t[o];
+    if (s == null)
+      continue;
+    const i = a.map((d) => String(d));
+    if (Array.isArray(s)) {
+      if (s.map((u) => String(u)).some((u) => i.includes(u)))
+        return !0;
+    } else {
+      const d = String(s);
+      if (i.includes(d))
+        return !0;
+    }
+  }
+  return !1;
+}, mn = (e, r) => {
   const t = /* @__PURE__ */ new Map();
   let n = null, o = null, a = 0;
   for (const c of e) {
@@ -3469,7 +3493,7 @@ const Pe = (e, r, t, n) => {
     }
   }
   return a;
-}, mn = (e, r = {}) => {
+}, dn = (e, r = {}) => {
   const { includeEmpty: t = !0 } = r, n = [];
   let o = null, a = [], c = 0;
   for (const i of e) {
@@ -3486,17 +3510,17 @@ const Pe = (e, r, t, n) => {
       largestGroup: s
     }
   };
-}, Le = new ne();
-function Jr(e, r) {
-  Le.register(e, r);
-}
-function dn(e) {
-  return Le.get(e);
+}, Oe = new ne();
+function Yr(e, r) {
+  Oe.register(e, r);
 }
 function fn(e) {
-  return Le.get(e);
+  return Oe.get(e);
 }
-Jr(
+function pn(e) {
+  return Oe.get(e);
+}
+Yr(
   "Preset_AlertSubmitHandler",
   (e, r, t) => {
     const n = {
@@ -3508,7 +3532,7 @@ Jr(
     alert(o);
   }
 );
-async function pn(e, r, t, n, o, a, c) {
+async function gn(e, r, t, n, o, a, c) {
   const s = o ? Object.values(o).filter(Boolean) : [];
   if (s.length > 0)
     return {
@@ -3543,12 +3567,12 @@ async function pn(e, r, t, n, o, a, c) {
           const N = String(b).split(",").map((E) => E.trim()).filter(Boolean), h = [];
           let y = !1;
           for (const E of N) {
-            const F = Number(E);
-            if (isNaN(F)) {
+            const M = Number(E);
+            if (isNaN(M)) {
               d.push(n("Invalid number {{1}} in array for field {{2}}", E, u.displayName || f)), y = !0;
               break;
             }
-            h.push(F);
+            h.push(M);
           }
           y || (i[f] = h);
         }
@@ -3571,7 +3595,7 @@ async function pn(e, r, t, n, o, a, c) {
         errors: u
       };
   } else {
-    const u = await yt(e, i, n);
+    const u = await vt(e, i, n);
     if (u && u.length > 0)
       return {
         success: !1,
@@ -3597,7 +3621,7 @@ async function pn(e, r, t, n, o, a, c) {
       };
     }
   else if (e && typeof e.submitHandlerName == "string") {
-    const u = dn(e.submitHandlerName);
+    const u = fn(e.submitHandlerName);
     if (u)
       try {
         const f = await u(e, r?.name ?? null, i, n), b = m(f);
@@ -3621,12 +3645,12 @@ async function pn(e, r, t, n, o, a, c) {
     data: i
   };
 }
-const Yr = ({
+const Xr = ({
   message: e,
   success: r,
   onDismiss: t,
   t: n
-}) => e ? /* @__PURE__ */ D(
+}) => e ? /* @__PURE__ */ z(
   "div",
   {
     role: "status",
@@ -3663,8 +3687,8 @@ const Yr = ({
     ]
   }
 ) : null;
-Yr.displayName = "SubmissionMessage";
-const gn = ({ onClick: e, disabled: r = !1, t }) => {
+Xr.displayName = "SubmissionMessage";
+const hn = ({ onClick: e, disabled: r = !1, t }) => {
   const [n, o] = l.useState(!1);
   return /* @__PURE__ */ p(
     "button",
@@ -3690,7 +3714,7 @@ const gn = ({ onClick: e, disabled: r = !1, t }) => {
       children: t("Submit")
     }
   );
-}, hn = ({
+}, bn = ({
   definition: e,
   instance: r,
   onSubmit: t = void 0,
@@ -3701,120 +3725,122 @@ const gn = ({ onClick: e, disabled: r = !1, t }) => {
   const { properties: c, displayName: s } = e, i = B(), { t: d, formStyle: m, language: u, displayInstanceName: f } = i, b = {
     ...i,
     definitionName: e?.name ?? i.definitionName
-  }, [C, N] = l.useState("en"), [h, y] = l.useState([]), [E, F] = l.useState({}), [M, $] = l.useState(
+  }, [C, N] = l.useState("en"), [h, y] = l.useState([]), [E, M] = l.useState({}), [F, V] = l.useState(
     {}
-  ), [R, I] = l.useState({}), [v, g] = l.useState({}), [w, x] = l.useState(null), [k, S] = l.useState(null), [A, j] = l.useState(0), [K, ce] = l.useState(!1), [je, oe] = l.useState(r.name || ""), Y = l.useRef(r), fe = l.useRef(!1);
+  ), [R, I] = l.useState({}), [v, g] = l.useState({}), [w, x] = l.useState(null), [k, S] = l.useState(null), [A, j] = l.useState(0), [K, ce] = l.useState(!1), [je, oe] = l.useState(r.name || ""), X = l.useRef(r), fe = l.useRef(!1);
   l.useEffect(() => {
-    const z = Object.fromEntries(
-      c.map((L) => [
-        L.name,
-        { ...L, children: {} }
+    const P = Object.fromEntries(
+      c.map((D) => [
+        D.name,
+        { ...D, children: {} }
       ])
     );
-    c.forEach((L) => {
-      L.parents && Object.entries(L.parents).forEach(([Q, re]) => {
-        const X = z[Q];
-        X && re.forEach((at) => {
-          X.children || (X.children = {});
-          const qe = String(at);
-          X.children[qe] = [
-            ...X.children[qe] || [],
-            L.name
+    c.forEach((D) => {
+      D.parents && Object.entries(D.parents).forEach(([J, re]) => {
+        const Z = P[J];
+        Z && re.forEach((it) => {
+          Z.children || (Z.children = {});
+          const qe = String(it);
+          Z.children[qe] = [
+            ...Z.children[qe] || [],
+            D.name
           ];
         });
       });
-    }), un(c, z);
+    }), mn(c, P);
     const q = Object.values(
-      z
-    ), P = {};
-    q.forEach((L) => {
-      if (L.type === "unit") {
-        const Q = typeof L.defaultValue == "number" ? String(L.defaultValue) : "", re = typeof L.defaultUnit == "string" ? L.defaultUnit : String(L.defaultUnit ?? "m");
-        P[L.name] = [Q, re];
+      P
+    ), O = {};
+    q.forEach((D) => {
+      if (D.type === "unit") {
+        const J = typeof D.defaultValue == "number" ? String(D.defaultValue) : "", re = typeof D.defaultUnit == "string" ? D.defaultUnit : String(D.defaultUnit ?? "m");
+        O[D.name] = [J, re];
       } else
-        P[L.name] = L.defaultValue;
-    }), Y.current = r, Object.keys(r.values).forEach((L) => {
-      z[L] !== void 0 && (P[L] = r.values[L]);
+        O[D.name] = D.defaultValue;
+    }), X.current = r, Object.keys(r.values).forEach((D) => {
+      P[D] !== void 0 && (O[D] = r.values[D]);
     });
-    const J = Object.fromEntries(q.map((L) => [L.name, !1])), G = requestAnimationFrame(() => {
-      y(q), F(z), $(P), I(
-        cn(q, P, J, z)
+    const Y = Object.fromEntries(q.map((D) => [D.name, !1])), G = requestAnimationFrame(() => {
+      y(q), M(P), V(O), I(
+        ln(q, O, Y, P)
       ), ce(!0), oe(r.name);
     });
     return () => cancelAnimationFrame(G);
   }, [c, r, e]), l.useEffect(() => {
     if (!K || A >= h.length) return;
-    const z = setTimeout(() => {
+    const P = setTimeout(() => {
       j(
         (q) => Math.min(q + o, h.length)
       );
     }, a);
-    return () => clearTimeout(z);
+    return () => clearTimeout(P);
   }, [K, A, h.length, o, a]);
   const Be = l.useCallback(
-    (z, q) => {
-      x(null), S(null), $((J) => ({ ...J, [z]: q }));
-      const P = E[z];
-      P && P.children && Object.keys(P.children).length > 0 && I((J) => {
-        const G = { ...M, [z]: q };
-        return ln(
-          J,
+    (P, q) => {
+      x(null), S(null), V((D) => ({ ...D, [P]: q }));
+      const O = E[P], Y = O && O.children && Object.keys(O.children).length > 0, G = Object.values(E).some(
+        (D) => D.parents && P in D.parents
+      );
+      (Y || G) && I((D) => {
+        const J = { ...F, [P]: q };
+        return un(
+          D,
           E,
-          G,
-          z,
+          J,
+          P,
           q
         );
       });
     },
-    [E, M]
+    [E, F]
   );
   l.useEffect(() => {
-    let z = 0;
-    return z = requestAnimationFrame(() => {
+    let P = 0;
+    return P = requestAnimationFrame(() => {
       u !== C && (N(u || "en"), x(null), S(null));
-    }), () => cancelAnimationFrame(z);
+    }), () => cancelAnimationFrame(P);
   }, [u, C]), l.useEffect(() => {
-    let z = 0;
-    return z = requestAnimationFrame(() => {
+    let P = 0;
+    return P = requestAnimationFrame(() => {
       if (fe.current) {
-        fe.current = !1, Y.current = r, oe(r.name || "");
+        fe.current = !1, X.current = r, oe(r.name || "");
         return;
       }
-      Y.current = r, x(null), S(null), oe(r.name || "");
-    }), () => cancelAnimationFrame(z);
+      X.current = r, x(null), S(null), oe(r.name || "");
+    }), () => cancelAnimationFrame(P);
   }, [r, r.name]);
-  const He = l.useCallback((z, q) => {
-    g((P) => q ? { ...P, [z]: String(q) } : Object.fromEntries(Object.entries(P).filter(([G]) => G !== z)));
-  }, []), nt = async () => {
+  const He = l.useCallback((P, q) => {
+    g((O) => q ? { ...O, [P]: String(q) } : Object.fromEntries(Object.entries(O).filter(([G]) => G !== P)));
+  }, []), ot = async () => {
     fe.current = !0;
-    const z = Y.current?.name;
-    Y.current.name = je;
+    const P = X.current?.name;
+    X.current.name = je;
     let q = v;
     if (b.fieldValidationMode === "onSubmission") {
-      const L = {};
-      if (h.forEach((Q) => {
-        const re = M[Q.name];
+      const D = {};
+      if (h.forEach((J) => {
+        const re = F[J.name];
         if (re === void 0) return;
-        const X = pr(b.definitionName, Q, re, d);
-        X && (L[Q.name] = X);
-      }), g(L), q = L, Object.keys(L).length > 0) {
+        const Z = pr(b.definitionName, J, re, d);
+        Z && (D[J.name] = Z);
+      }), g(D), q = D, Object.keys(D).length > 0) {
         x(d("Please fix validation errors before submitting the form.")), S(!1);
         return;
       } else
         x(null), S(null);
     }
-    const P = await pn(e, Y.current, M, d, q, t, n), J = typeof P.message == "string" ? P.message : String(P.message), G = Object.values(P.errors ?? {}).join(`
+    const O = await gn(e, X.current, F, d, q, t, n), Y = typeof O.message == "string" ? O.message : String(O.message), G = Object.values(O.errors ?? {}).join(`
 `);
-    x(G ? J + `
-` + G : J), S(P.success), P.success || (Y.current.name = z ?? Y.current.name, oe(z ?? ""));
-  }, ot = l.useMemo(
+    x(G ? Y + `
+` + G : Y), S(O.success), O.success || (X.current.name = P ?? X.current.name, oe(P ?? ""));
+  }, at = l.useMemo(
     () => b.fieldValidationMode === "onEdit" || b.fieldValidationMode === "realTime" ? Object.values(v).some(Boolean) : !1,
     [v, b.fieldValidationMode]
   );
-  return /* @__PURE__ */ p(Ee.Provider, { value: b, children: /* @__PURE__ */ D("div", { style: m.container, children: [
+  return /* @__PURE__ */ p(Ee.Provider, { value: b, children: /* @__PURE__ */ z("div", { style: m.container, children: [
     s && /* @__PURE__ */ p("h2", { style: m.titleStyle, children: d(s) }),
     /* @__PURE__ */ p(
-      Yr,
+      Xr,
       {
         message: w,
         success: k,
@@ -3828,38 +3854,38 @@ const gn = ({ onClick: e, disabled: r = !1, t }) => {
       sr,
       {
         name: je,
-        onChange: (z) => {
-          oe(z), x(null), S(null);
+        onChange: (P) => {
+          oe(P), x(null), S(null);
         }
       }
     ),
-    /* @__PURE__ */ D(Ie, { children: [
+    /* @__PURE__ */ z(Ie, { children: [
       (() => {
-        const z = h.slice(0, A).filter((P) => R[P.name]), { groups: q } = mn(z);
-        return q.map((P, J) => P.name ? /* @__PURE__ */ p(
+        const P = h.slice(0, A).filter((O) => R[O.name]), { groups: q } = dn(P);
+        return q.map((O, Y) => O.name ? /* @__PURE__ */ p(
           Kr,
           {
-            groupName: P.name,
+            groupName: O.name,
             defaultOpen: !0,
-            fields: P.fields,
-            valuesMap: M,
+            fields: O.fields,
+            valuesMap: F,
             handleChange: Be,
             handleError: He,
             errorsMap: v,
             t: d
           },
-          P.name
-        ) : /* @__PURE__ */ p(l.Fragment, { children: P.fields.map((G) => /* @__PURE__ */ p(
+          O.name
+        ) : /* @__PURE__ */ p(l.Fragment, { children: O.fields.map((G) => /* @__PURE__ */ p(
           ze,
           {
             field: G,
-            valuesMap: M,
+            valuesMap: F,
             handleChange: Be,
             handleError: He,
             errorsMap: v
           },
           G.name
-        )) }, `ungrouped-${J}`));
+        )) }, `ungrouped-${Y}`));
       })(),
       A < h.length && /* @__PURE__ */ p(
         "div",
@@ -3872,9 +3898,9 @@ const gn = ({ onClick: e, disabled: r = !1, t }) => {
         }
       )
     ] }),
-    /* @__PURE__ */ p(gn, { onClick: nt, disabled: ot, t: d })
+    /* @__PURE__ */ p(hn, { onClick: ot, disabled: at, t: d })
   ] }) });
-}, Xr = {
+}, Zr = {
   en: { name: "English", nativeName: "English" },
   fr: { name: "French", nativeName: "Français" },
   de: { name: "German", nativeName: "Deutsch" },
@@ -3905,13 +3931,13 @@ const gn = ({ onClick: e, disabled: r = !1, t }) => {
   uk: { name: "Ukrainian", nativeName: "Українська" },
   vi: { name: "Vietnamese", nativeName: "Tiếng Việt" },
   "zh-tw": { name: "Chinese (Traditional)", nativeName: "繁體中文" }
-}, bo = () => Xr, be = /* @__PURE__ */ new Map(), le = /* @__PURE__ */ new Map(), te = /* @__PURE__ */ new Set(), we = /* @__PURE__ */ new Map(), bn = async (e) => {
+}, yo = () => Zr, be = /* @__PURE__ */ new Map(), le = /* @__PURE__ */ new Map(), te = /* @__PURE__ */ new Set(), we = /* @__PURE__ */ new Map(), yn = async (e) => {
   try {
     let r = {};
     const t = e.toLowerCase();
     if (t === "en")
       r = {};
-    else if (Xr[t]) {
+    else if (Zr[t]) {
       const o = `https://reactaform.com/locales/${t}/common.json`, a = await fetch(o);
       a.ok && (r = await a.json());
     } else
@@ -3928,7 +3954,7 @@ const gn = ({ onClick: e, disabled: r = !1, t }) => {
       error: `Failed to load common translations for ${e}: ${r}`
     };
   }
-}, yn = async (e) => {
+}, vn = async (e) => {
   if (!e || e.toLowerCase() === "en")
     return { success: !0, translations: {}, fromCache: !1 };
   const r = e.toLowerCase();
@@ -3938,13 +3964,13 @@ const gn = ({ onClick: e, disabled: r = !1, t }) => {
       translations: be.get(r) || {},
       fromCache: !0
     };
-  const t = await bn(r);
+  const t = await yn(r);
   return t.success && (be.set(r, t.translations), we.set(r, {
     loadedAt: /* @__PURE__ */ new Date(),
     size: Object.keys(t.translations).length,
     source: "common"
   })), t;
-}, vn = async (e, r) => {
+}, xn = async (e, r) => {
   if (!e || !r)
     return {
       success: !1,
@@ -3985,7 +4011,7 @@ const gn = ({ onClick: e, disabled: r = !1, t }) => {
         fromCache: !1
       });
     const a = o.headers.get("content-type") || "";
-    !a.includes("application/json") && !a.includes("text/json") && Zr() && console.warn(
+    !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();
@@ -4032,7 +4058,7 @@ const gn = ({ onClick: e, disabled: r = !1, t }) => {
     };
   }
 };
-function Zr() {
+function Qr() {
   try {
     if (typeof process < "u" && process?.env?.NODE_ENV === "development")
       return !0;
@@ -4040,30 +4066,30 @@ function Zr() {
   }
   return !1;
 }
-function xn(e, r) {
+function wn(e, r) {
   return r.length === 0 ? e : e.replace(/\{\{(\d+)\}\}/g, (t, n) => {
     const o = parseInt(n, 10) - 1, a = r[o];
     return a == null ? t : String(a);
   });
 }
-const wn = (e, r, t) => (n, ...o) => {
+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 = xn(a, o), !c && Zr() && console.debug(
+  return !n || typeof n != "string" ? String(n || "") : (e.toLowerCase() === "en" ? (a = n, c = !0) : n in t ? (a = t[n], c = !0) : n in r ? (a = r[n], c = !0) : a = n, a = wn(a, o), !c && Qr() && console.debug(
     `Missing translation for "${n}" in language "${e}"`
   ), a);
 };
-function Sn(e) {
+function Cn(e) {
   return /^[-+]?\d*$/.test(e);
 }
-function Cn(e) {
+function Nn(e) {
   const r = /^[-+]?\d*$/;
   return e.split(",").map((t) => t.trim()).every((t) => r.test(t));
 }
-const Nn = ",", kn = (e) => !e || e.trim() === "" ? [] : e.split(Nn).map((r) => r.trim()).filter(Boolean).map((r) => Number(r)), Xe = (e, r, t) => {
+const kn = ",", In = (e) => !e || e.trim() === "" ? [] : e.split(kn).map((r) => r.trim()).filter(Boolean).map((r) => Number(r)), Xe = (e, r, t) => {
   const n = String(r);
   if (n.trim() === "")
     return e.min !== void 0 || e.max !== void 0 ? t("Value required when min or max constraints is set") : e.required ? t("Value required") : void 0;
-  if (!Sn(n))
+  if (!Cn(n))
     return t("Must be a valid integer");
   const o = parseInt(n, 10);
   if (Number.isNaN(o)) return t("Must be a valid integer");
@@ -4087,13 +4113,13 @@ const Nn = ",", kn = (e) => !e || e.trim() === "" ? [] : e.split(Nn).map((r) =>
       return t("Must be a multiple of {{1}}", a);
   }
 };
-function In(e, r, t) {
+function En(e, r, t) {
   const n = String(r);
   if (n.trim() === "")
     return e.min !== void 0 || e.max !== void 0 ? t("Value required when min or max constraints is set") : e.required ? t("Value required") : void 0;
-  if (!Cn(n))
+  if (!Nn(n))
     return t("Each value must be a valid integer");
-  const o = kn(n);
+  const o = In(n);
   if (e.minCount !== void 0 && o.length < e.minCount)
     return t("Minimum number of values: {{1}}", `${e.minCount}`);
   if (e.maxCount !== void 0 && o.length > e.maxCount)
@@ -4113,7 +4139,7 @@ function In(e, r, t) {
       );
   }
 }
-function Qr(e, r, t) {
+function et(e, r, t) {
   const n = String(r);
   if (n.trim() === "")
     return e.min !== void 0 || e.max !== void 0 ? t("Value required when min or max constraints is set") : e.required ? t("Value required") : void 0;
@@ -4138,12 +4164,12 @@ function Qr(e, r, t) {
       );
   }
 }
-const En = /^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][-+]?\d+)?$/;
+const Fn = /^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][-+]?\d+)?$/;
 function Mn(e) {
-  return e.split(",").map((r) => r.trim()).every((r) => En.test(r));
+  return e.split(",").map((r) => r.trim()).every((r) => Fn.test(r));
 }
-const Fn = ",", $n = (e) => !e || e.trim() === "" ? [] : e.split(Fn).map((r) => r.trim()).filter(Boolean).map((r) => Number(r));
-function Vn(e, r, t) {
+const Vn = ",", $n = (e) => !e || e.trim() === "" ? [] : e.split(Vn).map((r) => r.trim()).filter(Boolean).map((r) => Number(r));
+function An(e, r, t) {
   const n = String(r);
   if (n.trim() === "")
     return e.min !== void 0 || e.max !== void 0 ? t("Value required when min or max constraints is set") : e.required ? t("Value required") : void 0;
@@ -4170,7 +4196,7 @@ function Vn(e, r, t) {
   }
 }
 const ye = /* @__PURE__ */ new WeakMap();
-function Oe(e, r, t, n, ...o) {
+function Le(e, r, t, n, ...o) {
   if (e.pattern == null)
     return;
   const a = String(r);
@@ -4195,32 +4221,32 @@ function ue(e, r, t) {
   if (n === "")
     return e.minLength !== void 0 || e.maxLength !== void 0 ? e.required ? t("Value required when minLength or maxLength is set") : void 0 : e.required ? t("Value required") : void 0;
   const o = Math.max(e.minLength ?? 0, 0);
-  return n.length < o ? t("Must be at least {{1}} characters", o) : e.maxLength !== void 0 && n.length > e.maxLength ? t("Must be at most {{1}} characters", e.maxLength) : Oe(e, r, t, "Invalid text format");
+  return n.length < o ? t("Must be at least {{1}} characters", o) : e.maxLength !== void 0 && n.length > e.maxLength ? t("Must be at most {{1}} characters", e.maxLength) : Le(e, r, t, "Invalid text format");
 }
 const Se = (e) => {
   if (!e) return null;
   const r = Date.parse(e);
   return Number.isNaN(r) ? null : r;
-}, Ze = /* @__PURE__ */ new WeakMap(), An = (e) => {
+}, Ze = /* @__PURE__ */ new WeakMap(), Rn = (e) => {
   let r = Ze.get(e);
   return r || (r = {
     minTime: Se(e.minDate),
     maxTime: Se(e.maxDate)
   }, Ze.set(e, r)), r;
 };
-function Rn(e, r, t) {
+function Dn(e, r, t) {
   if (r == null || String(r).trim() === "")
     return e.required ? t("Value required") : void 0;
   const n = String(r).trim(), o = Se(n);
   if (o === null)
     return t("Invalid date format");
-  const { minTime: a, maxTime: c } = An(e);
+  const { minTime: a, maxTime: c } = Rn(e);
   if (a !== null && o < a)
     return t("Date must be on or after {{1}}", e.minDate);
   if (c !== null && o > c)
     return t("Date must be on or before {{1}}", e.maxDate);
 }
-function Dn(e, r, t) {
+function zn(e, r, t) {
   const n = String(r);
   if (!n || n.trim() === "")
     return e.required || e.min || e.max ? t("Value required") : void 0;
@@ -4254,29 +4280,29 @@ function Dn(e, r, t) {
       return t("Time must be on or before {{1}}", e.max);
   }
 }
-function zn(e) {
+function Pn(e) {
   return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);
 }
-function Pn(e, r, t) {
+function On(e, r, t) {
   const n = String(r ?? "").trim();
-  return n === "" ? e.required ? t("Value required") : void 0 : zn(n) ? Oe(e, r, t, t("Email does not match pattern: {{1}}", e.pattern)) : t("Must be valid email format");
+  return n === "" ? e.required ? t("Value required") : void 0 : Pn(n) ? Le(e, r, t, t("Email does not match pattern: {{1}}", e.pattern)) : t("Must be valid email format");
 }
 function Ln(e, r, t) {
   const n = String(r ?? "").trim();
-  return n === "" ? e.required ? t("Value required") : void 0 : Oe(e, n, t, "Invalid phone number format");
+  return n === "" ? e.required ? t("Value required") : void 0 : Le(e, n, t, "Invalid phone number format");
 }
-const On = /^(https?|ftp|file):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|]$/i, Tn = (e) => {
+const Tn = /^(https?|ftp|file):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|]$/i, jn = (e) => {
   try {
     return new URL(e), !0;
   } catch {
     return !1;
   }
 };
-function jn(e, r, t) {
+function Bn(e, r, t) {
   const n = String(r ?? "").trim();
   if (n === "")
     return e.required ? t("Value required") : void 0;
-  if (!(On.test(n) || Tn(n))) {
+  if (!(Tn.test(n) || jn(n))) {
     if (e.allowRelative === !0) {
       if (!n.startsWith("/") || encodeURI(n) !== n)
         return t("Must be a valid URL");
@@ -4290,11 +4316,11 @@ function jn(e, r, t) {
     return t("Must be a valid URL");
   }
 }
-function Bn(e, r, t) {
+function Hn(e, r, t) {
   const n = Array.isArray(r) ? r : [], o = n[0], a = n[1] ? String(n[1]).trim() : "";
-  return String(o ?? "").trim() === "" || a === "" ? e.required ? t("Value required") : void 0 : Qr(e, o, t);
+  return String(o ?? "").trim() === "" || a === "" ? e.required ? t("Value required") : void 0 : et(e, o, t);
 }
-function Hn(e, r, t) {
+function qn(e, r, t) {
   if (Array.isArray(r))
     return r.length === 0 ? t("Select a file") : r.every((n) => n instanceof File) ? void 0 : t("Invalid file input");
   if (!(r instanceof File)) {
@@ -4302,14 +4328,14 @@ function Hn(e, r, t) {
     return e.required && (r == null || typeof n == "string" && n.trim() === "") ? t("Select a file") : t("Invalid file input: {{1}}", n);
   }
 }
-function qn(e, r, t) {
+function Un(e, r, t) {
   const n = String(r);
   if (n === "" || n === null || n === void 0)
     return e.required ? t("Value required") : void 0;
   if (!e.options?.some((o) => String(o.value) === n))
     return t("Invalid option selected");
 }
-function Un(e, r, t) {
+function Wn(e, r, t) {
   const o = String(r ?? "").trim();
   if (o === "")
     return e.required ? t("Value required") : void 0;
@@ -4320,15 +4346,15 @@ function Un(e, r, t) {
     if (!e.options?.some((s) => String(s.value) === c))
       return t("Invalid option selected");
 }
-const Wn = /^#([0-9A-F]{3}){1,2}$/i, _n = (e) => Wn.test(e);
-function Kn(e, r, t) {
+const _n = /^#([0-9A-F]{3}){1,2}$/i, Kn = (e) => _n.test(e);
+function Gn(e, r, t) {
   const n = String(r).trim();
   if (n === "")
     return e.required ? t("Value required") : void 0;
-  if (!_n(n))
+  if (!Kn(n))
     return t("Invalid color format");
 }
-function Gn(e, r, t) {
+function Jn(e, r, t) {
   const n = String(r ?? "").trim();
   if (n === "")
     return e.required ? t("Value required") : void 0;
@@ -4338,7 +4364,7 @@ function Gn(e, r, t) {
   if (e.max !== void 0 && o > e.max)
     return t("Must be ≤ {{1}}", e.max);
 }
-function Jn(e, r, t) {
+function Yn(e, r, t) {
   const n = String(r);
   if (n.trim() === "")
     return e.required ? t("Value required") : void 0;
@@ -4351,13 +4377,13 @@ function Jn(e, r, t) {
     return t("Must be ≤ {{1}}", c);
 }
 let Qe = !1;
-function et() {
-  Qe || (H("int", Xe), H("stepper", Xe), H("int-array", In), H("float", Qr), H("slider", Jn), H("float-array", Vn), H("text", ue), H("string", ue), H("multiline", ue), H("password", ue), H("email", Pn), H("date", Rn), H("time", Dn), H("url", jn), H("phone", Ln), H("unit", Bn), H("dropdown", qn), H("multi-selection", Un), H("color", Kn), H("rating", Gn), H("file", Hn), Qe = !0);
+function rt() {
+  Qe || (H("int", Xe), H("stepper", Xe), H("int-array", En), H("float", et), H("slider", Yn), H("float-array", An), H("text", ue), H("string", ue), H("multiline", ue), H("password", ue), H("email", On), H("date", Dn), H("time", zn), H("url", Bn), H("phone", Ln), H("unit", Hn), H("dropdown", Un), H("multi-selection", Wn), H("color", Gn), H("rating", Jn), H("file", qn), Qe = !0);
 }
-et();
-sn();
-et();
-const Yn = (e) => ({
+rt();
+cn();
+rt();
+const Xn = (e) => ({
   container: {
     padding: "var(--reactaform-space-sm, 8px)",
     margin: "0 auto",
@@ -4398,7 +4424,7 @@ const Yn = (e) => ({
     lineHeight: "1.2",
     textAlign: "left"
   }
-}), Xn = (e) => {
+}), Zn = (e) => {
   const r = {
     color: "var(--reactaform-color-text)",
     fontFamily: e?.fontFamily || "var(--reactaform-font-family, inherit)",
@@ -4457,7 +4483,7 @@ const Yn = (e) => ({
       display: "block"
     }
   };
-}, Zn = ({
+}, Qn = ({
   children: e,
   definitionName: r = "",
   defaultStyle: t,
@@ -4480,9 +4506,9 @@ const Yn = (e) => ({
         return;
       }
       try {
-        const w = await yn(f), x = w.success ? w.translations : {};
+        const w = await vn(f), x = w.success ? w.translations : {};
         v && N(x);
-        const k = await vn(f, m), S = k.success ? k.translations : {};
+        const k = await xn(f, m), S = k.success ? k.translations : {};
         v && y(S);
       } catch {
         v && (N({}), y({}));
@@ -4491,20 +4517,20 @@ const Yn = (e) => ({
       v = !1;
     };
   }, [f, m]);
-  const E = l.useMemo(() => Yn(b), [b]), F = l.useMemo(() => Xn(b), [b]), M = l.useMemo(
-    () => wn(f, C, h),
+  const E = l.useMemo(() => Xn(b), [b]), M = l.useMemo(() => Zn(b), [b]), F = l.useMemo(
+    () => Sn(f, C, h),
     [f, C, h]
-  ), $ = l.useCallback(
-    (v, ...g) => M(v, ...g),
-    [M]
+  ), V = l.useCallback(
+    (v, ...g) => F(v, ...g),
+    [F]
   ), R = l.useMemo(
     () => ({
       definitionName: d,
       language: f,
       theme: u,
       formStyle: E,
-      fieldStyle: F,
-      t: $,
+      fieldStyle: M,
+      t: V,
       fieldValidationMode: c,
       displayInstanceName: i
     }),
@@ -4512,9 +4538,9 @@ const Yn = (e) => ({
       d,
       f,
       u,
-      F,
+      M,
       E,
-      $,
+      V,
       c,
       i
     ]
@@ -4529,7 +4555,7 @@ const Yn = (e) => ({
     }
   ) });
 };
-function Qn(e) {
+function eo(e) {
   if (!e || typeof e != "object")
     return "Definition must be an object";
   const r = e;
@@ -4557,7 +4583,7 @@ function Qn(e) {
     }
   return null;
 }
-async function yo(e, r = {}) {
+async function vo(e, r = {}) {
   const { validateSchema: t = !0 } = r;
   try {
     if (!e || typeof e != "string")
@@ -4575,7 +4601,7 @@ async function yo(e, r = {}) {
       };
     }
     if (t) {
-      const a = Qn(o);
+      const a = eo(o);
       if (a)
         return { success: !1, error: `Schema validation failed: ${a}` };
     }
@@ -4584,7 +4610,7 @@ async function yo(e, r = {}) {
     return { success: !1, error: `Unexpected error loading definition: ${n instanceof Error ? n.message : "Unknown error"}` };
   }
 }
-function eo(e, r) {
+function ro(e, r) {
   try {
     if (!e)
       return { success: !1, error: "Definition is required" };
@@ -4611,7 +4637,7 @@ function eo(e, r) {
     };
   }
 }
-function vo(e) {
+function xo(e) {
   try {
     if (!e)
       return { success: !1, error: "Instance data is required" };
@@ -4635,7 +4661,7 @@ function vo(e) {
     };
   }
 }
-function xo(e, r, t) {
+function wo(e, r, t) {
   try {
     if (!e)
       return { success: !1, error: "Instance is required" };
@@ -4717,7 +4743,7 @@ function xo(e, r, t) {
     };
   }
 }
-function ro(e) {
+function to(e) {
   const [r, t] = l.useState(null);
   return l.useEffect(() => {
     const n = document.querySelector("[data-reactaform-theme]");
@@ -4733,7 +4759,7 @@ function ro(e) {
     return c.observe(o, { attributes: !0, attributeFilter: ["data-reactaform-theme"] }), () => c.disconnect();
   }, [e]), r;
 }
-const wo = ({
+const So = ({
   definitionData: e,
   instance: r,
   language: t,
@@ -4751,7 +4777,7 @@ const wo = ({
     } catch {
       return null;
     }
-  }, [e]), u = { fontSize: "inherit", fontFamily: "inherit", ...a }, f = ro(), b = o ?? f ?? "light", C = t ?? "en";
+  }, [e]), u = { fontSize: "inherit", fontFamily: "inherit", ...a }, f = to(), b = o ?? f ?? "light", C = t ?? "en";
   l.useEffect(() => {
     let h = document.getElementById("popup-root");
     h || (h = document.createElement("div"), h.id = "popup-root", document.body.appendChild(h));
@@ -4759,11 +4785,11 @@ const wo = ({
   const N = l.useMemo(() => {
     if (r) return r;
     if (!m) return null;
-    const h = eo(m, m.name);
+    const h = ro(m, m.name);
     return !h.success || !h.instance ? null : h.instance;
   }, [r, m]);
   return m ? N ? /* @__PURE__ */ p(
-    Zn,
+    Qn,
     {
       definitionName: m.name,
       defaultStyle: u,
@@ -4774,7 +4800,7 @@ const wo = ({
       defaultFieldValidationMode: c,
       defaultDisplayInstanceName: s,
       children: /* @__PURE__ */ p(
-        hn,
+        bn,
         {
           definition: m,
           instance: N,
@@ -4784,7 +4810,7 @@ const wo = ({
       )
     }
   ) : /* @__PURE__ */ p("div", { style: { color: "red" }, children: "Error: Failed to create instance from definition." }) : /* @__PURE__ */ p("div", { style: { color: "red" }, children: "Error: No form definition provided." });
-}, Z = /* @__PURE__ */ new Map(), W = {
+}, Q = /* @__PURE__ */ new Map(), W = {
   components: /* @__PURE__ */ new Map(),
   fieldValidators: /* @__PURE__ */ new Map(),
   // category -> name -> plugin
@@ -4792,7 +4818,7 @@ const wo = ({
   formValidators: /* @__PURE__ */ new Map(),
   submissionHandlers: /* @__PURE__ */ new Map()
 };
-function rt(e, r, t) {
+function tt(e, r, t) {
   if (!e) return !0;
   if (t && !t(e))
     return !1;
@@ -4813,14 +4839,14 @@ function rt(e, r, t) {
       return !1;
   }
 }
-function to(e) {
+function no(e) {
   const r = [];
   if (e.components)
     for (const t of Object.keys(e.components)) {
       const n = _r(t);
       if (n) {
         let o;
-        for (const [a, c] of Z)
+        for (const [a, c] of Q)
           if (c.components && c.components[t] === n) {
             o = a;
             break;
@@ -4866,7 +4892,7 @@ function to(e) {
     }
   if (e.submissionHandlers)
     for (const t of Object.keys(e.submissionHandlers)) {
-      const n = fn(t), o = W.submissionHandlers.get(t);
+      const n = pn(t), o = W.submissionHandlers.get(t);
       n && o && o !== e.name && r.push({
         type: "submissionHandler",
         name: t,
@@ -4879,7 +4905,7 @@ function to(e) {
 function ae(e, r, t, n, o, a, c, s) {
   for (const i of Object.keys(e)) {
     let d;
-    if (s ? d = o.find((m) => m.type === "fieldCustomValidator" && m.name === `${s}:${i}`) : e === n.components ? d = o.find((m) => m.type === "component" && m.name === i) : e === n.formValidators ? d = o.find((m) => m.type === "formValidator" && m.name === i) : e === n.fieldTypeValidators ? d = o.find((m) => m.type === "fieldTypeValidator" && m.name === `type:${i}`) : e === n.submissionHandlers && (d = o.find((m) => m.type === "submissionHandler" && m.name === i)), rt(d || null, a, c))
+    if (s ? d = o.find((m) => m.type === "fieldCustomValidator" && m.name === `${s}:${i}`) : e === n.components ? d = o.find((m) => m.type === "component" && m.name === i) : e === n.formValidators ? d = o.find((m) => m.type === "formValidator" && m.name === i) : e === n.fieldTypeValidators ? d = o.find((m) => m.type === "fieldTypeValidator" && m.name === `type:${i}`) : e === n.submissionHandlers && (d = o.find((m) => m.type === "submissionHandler" && m.name === i)), tt(d || null, a, c))
       if (s) {
         const m = r.get(s) || /* @__PURE__ */ new Map();
         m.set(i, n.name), r.set(s, m), t(i, e[i]);
@@ -4890,18 +4916,18 @@ function ae(e, r, t, n, o, a, c, s) {
         ) : r.set(i, n.name), t(i, e[i]);
   }
 }
-function So(e, r) {
+function Co(e, r) {
   const t = r?.conflictResolution || "error";
-  if (Z.has(e.name)) {
+  if (Q.has(e.name)) {
     const o = {
       type: "plugin",
       name: e.name,
       existingPlugin: e.name,
       newPlugin: e.name
     };
-    if (!rt(o, t, r?.onConflict)) return;
+    if (!tt(o, t, r?.onConflict)) return;
   }
-  const n = to(e);
+  const n = no(e);
   if (e.components && ae(
     e.components,
     W.components,
@@ -4915,7 +4941,7 @@ function So(e, r) {
       ae(
         a,
         W.fieldValidators,
-        (c, s) => gt(o, c, s),
+        (c, s) => ht(o, c, s),
         e,
         n,
         t,
@@ -4925,7 +4951,7 @@ function So(e, r) {
   e.formValidators && ae(
     e.formValidators,
     W.formValidators,
-    pt,
+    gt,
     e,
     n,
     t,
@@ -4933,7 +4959,7 @@ function So(e, r) {
   ), e.fieldTypeValidators && ae(
     e.fieldTypeValidators,
     W.fieldTypeValidators,
-    ht,
+    bt,
     e,
     n,
     t,
@@ -4941,15 +4967,15 @@ function So(e, r) {
   ), e.submissionHandlers && ae(
     e.submissionHandlers,
     W.submissionHandlers,
-    Jr,
+    Yr,
     e,
     n,
     t,
     r?.onConflict
-  ), e.setup && e.setup(), Z.set(e.name, e);
+  ), e.setup && e.setup(), Q.set(e.name, e);
 }
-function Co(e, r = !1) {
-  const t = Z.get(e);
+function No(e, r = !1) {
+  const t = Q.get(e);
   if (!t) return !1;
   if (t.cleanup && t.cleanup(), r) {
     if (t.components)
@@ -4974,18 +5000,18 @@ function Co(e, r = !1) {
       for (const n of Object.keys(t.submissionHandlers))
         W.submissionHandlers.delete(n);
   }
-  return Z.delete(e), !0;
-}
-function No(e) {
-  return Z.get(e);
+  return Q.delete(e), !0;
 }
-function ko() {
-  return Array.from(Z.values());
+function ko(e) {
+  return Q.get(e);
 }
-function Io(e) {
-  return Z.has(e);
+function Io() {
+  return Array.from(Q.values());
 }
 function Eo(e) {
+  return Q.has(e);
+}
+function Fo(e) {
   for (const [r, t] of Object.entries(e))
     Wr(r, t);
 }
@@ -4997,7 +5023,7 @@ function Te(e) {
   const r = e;
   return typeof r.name == "string" && typeof r.displayName == "string";
 }
-function tt(e) {
+function nt(e) {
   if (!ee(e)) return !1;
   const r = e;
   return typeof r.name != "string" || typeof r.version != "string" || !Array.isArray(r.properties) ? !1 : r.properties.every((t) => Te(t));
@@ -5025,7 +5051,7 @@ function Mo(e, r, t = {}) {
         success: !1,
         error: "Instance must be a valid object"
       };
-    const d = [], m = [], u = {}, b = (tt(r) || ee(r) && Array.isArray(r.properties) ? r.properties : []).filter(Te), C = new Map(b.map((h) => [h.name, h]));
+    const d = [], m = [], u = {}, b = (nt(r) || ee(r) && Array.isArray(r.properties) ? r.properties : []).filter(Te), C = new Map(b.map((h) => [h.name, h]));
     for (const [h, y] of Object.entries(e)) {
       if (s.includes(h)) {
         m.push(h);
@@ -5038,9 +5064,9 @@ function Mo(e, r, t = {}) {
       if (y === void 0) continue;
       const E = C.get(h);
       try {
-        u[h] = no(y, E, { dateFormat: o, fileHandling: a });
-      } catch (F) {
-        d.push(`Error serializing field '${h}': ${String(F)}`), u[h] = null;
+        u[h] = oo(y, E, { dateFormat: o, fileHandling: a });
+      } catch (M) {
+        d.push(`Error serializing field '${h}': ${String(M)}`), u[h] = null;
       }
     }
     return n && (u._metadata = {
@@ -5064,7 +5090,7 @@ function Mo(e, r, t = {}) {
     };
   }
 }
-function no(e, r, t = {}) {
+function oo(e, r, t = {}) {
   const { dateFormat: n = "iso", fileHandling: o = "metadata" } = t;
   if (e == null)
     return null;
@@ -5134,7 +5160,7 @@ function tr(e, r) {
     _note: "Base64 encoding requires async implementation"
   };
 }
-function Fo(e, r, t = {}) {
+function Vo(e, r, t = {}) {
   try {
     const {
       strict: n = !1,
@@ -5161,7 +5187,7 @@ function Fo(e, r, t = {}) {
         success: !1,
         error: "Parsed data must be an object"
       };
-    const i = [], d = [], m = {}, f = (tt(r) || ee(r) && Array.isArray(r.properties) ? r.properties : []).filter(Te), b = new Map(f.map((N) => [N.name, N]));
+    const i = [], d = [], m = {}, f = (nt(r) || ee(r) && Array.isArray(r.properties) ? r.properties : []).filter(Te), b = new Map(f.map((N) => [N.name, N]));
     for (const N of f) {
       const h = N.name, y = s[h];
       if (y === void 0) {
@@ -5169,10 +5195,10 @@ function Fo(e, r, t = {}) {
         continue;
       }
       try {
-        m[h] = oo(y, N, { validateTypes: o, dateFormat: c });
+        m[h] = ao(y, N, { validateTypes: o, dateFormat: c });
       } catch (E) {
-        const F = `Error deserializing field '${h}': ${String(E)}`;
-        n ? d.push(F) : (i.push(F), m[h] = y);
+        const M = `Error deserializing field '${h}': ${String(E)}`;
+        n ? d.push(M) : (i.push(M), m[h] = y);
       }
     }
     if (a)
@@ -5192,7 +5218,7 @@ function Fo(e, r, t = {}) {
     };
   }
 }
-function oo(e, r, t = {}) {
+function ao(e, r, t = {}) {
   const { validateTypes: n = !0, dateFormat: o = "auto" } = t;
   if (e == null)
     return e;
@@ -5201,7 +5227,7 @@ function oo(e, r, t = {}) {
       case "date":
       case "datetime":
       case "date-time":
-        return ao(e, o, n);
+        return io(e, o, n);
       case "int":
       case "integer":
         return Ne(e, n);
@@ -5209,7 +5235,7 @@ function oo(e, r, t = {}) {
       case "number":
         return ke(e, n);
       case "boolean":
-        return io(e, n);
+        return so(e, n);
       case "int-array":
         return nr(e, "integer", n);
       case "float-array":
@@ -5258,7 +5284,7 @@ function $o(e, r = {}) {
     };
   }
 }
-function Vo(e, r = {}) {
+function Ao(e, r = {}) {
   try {
     const { strict: t = !1, validateTypes: n = !0 } = r;
     let o;
@@ -5318,7 +5344,7 @@ function Vo(e, r = {}) {
     };
   }
 }
-function ao(e, r, t) {
+function io(e, r, t) {
   if (e instanceof Date)
     return e;
   if (typeof e == "number") {
@@ -5383,7 +5409,7 @@ function ke(e, r) {
     throw new Error(`Cannot convert ${typeof e} to number`);
   return e;
 }
-function io(e, r) {
+function so(e, r) {
   if (typeof e == "boolean")
     return e;
   if (typeof e == "string") {
@@ -5417,55 +5443,55 @@ function nr(e, r, t) {
     }
   });
 }
-function so() {
+function co() {
   if (!document.getElementById("reactaform-styles"))
     try {
       const e = document.createElement("style");
-      e.id = "reactaform-styles", e.textContent = ct, document.head.appendChild(e);
+      e.id = "reactaform-styles", e.textContent = lt, document.head.appendChild(e);
     } catch {
     }
 }
-typeof document < "u" && so();
+typeof document < "u" && co();
 export {
-  V as CSS_CLASSES,
-  wo as ReactaForm,
-  Zn as ReactaFormProvider,
-  hn as ReactaFormRenderer,
-  O as StandardFieldLayout,
-  mo as Units,
+  $ as CSS_CLASSES,
+  So as ReactaForm,
+  Qn as ReactaFormProvider,
+  bn as ReactaFormRenderer,
+  L as StandardFieldLayout,
+  fo as Units,
   U as combineClasses,
-  eo as createInstanceFromDefinition,
-  Vo as deserializeDefinition,
-  Fo as deserializeInstance,
-  ko as getAllPlugins,
-  rn as getButtonHandler,
+  ro as createInstanceFromDefinition,
+  Ao as deserializeDefinition,
+  Vo as deserializeInstance,
+  Io as getAllPlugins,
+  tn as getButtonHandler,
   _r as getComponent,
-  No as getPlugin,
-  bo as getSupportedLanguages,
-  po as hasButtonHandler,
-  Io as hasPlugin,
-  so as injectReactaFormStyles,
+  ko as getPlugin,
+  yo as getSupportedLanguages,
+  go as hasButtonHandler,
+  Eo as hasPlugin,
+  co as injectReactaFormStyles,
   ie as isDarkTheme,
-  ho as listButtonHandlers,
-  vo as loadInstance,
-  yo as loadJsonDefinition,
-  fo as registerButtonHandler,
+  bo as listButtonHandlers,
+  xo as loadInstance,
+  vo as loadJsonDefinition,
+  po as registerButtonHandler,
   Wr as registerComponent,
-  Eo as registerComponents,
-  gt as registerFieldCustomValidationHandler,
-  ht as registerFieldTypeValidationHandler,
-  pt as registerFormValidationHandler,
-  So as registerPlugin,
-  Jr as registerSubmissionHandler,
+  Fo as registerComponents,
+  ht as registerFieldCustomValidationHandler,
+  bt as registerFieldTypeValidationHandler,
+  gt as registerFormValidationHandler,
+  Co as registerPlugin,
+  Yr as registerSubmissionHandler,
   $o as serializeDefinition,
   Mo as serializeInstance,
-  go as unregisterButtonHandler,
-  Co as unregisterPlugin,
-  xo as upgradeInstanceToLatestDefinition,
-  lt as useDebouncedCallback,
+  ho as unregisterButtonHandler,
+  No as unregisterPlugin,
+  wo as upgradeInstanceToLatestDefinition,
+  ut as useDebouncedCallback,
   T as useFieldValidator,
   B as useReactaFormContext,
   _ as useUncontrolledValidatedInput,
-  uo as validateFieldValue,
+  mo as validateFieldValue,
   fr as validateFieldWithCustomHandler
 };