reactaform 1.2.0 → 1.2.1

package/dist/reactaform.es.js

@@ -1,5 +1,5 @@
-import N, { createContext as yr, useContext as xr, useRef as k, useEffect as C, useCallback as Z, useState as D, useMemo as G, memo as ve } from "react";
-import Me from "react-dom";
+import F, { createContext as yr, useContext as xr, useRef as E, useEffect as k, useCallback as X, useState as V, useMemo as J, memo as ve } from "react";
+import $e from "react-dom";
 const vr = `/* ReactaForm CSS Custom Properties (CSS Variables) */\r
 \r
 /* Default Light Theme */\r
@@ -140,7 +140,7 @@ const vr = `/* ReactaForm CSS Custom Properties (CSS Variables) */\r
   line-height: 1.4;\r
   min-width: 100px;\r
   color: var(--reactaform-text-color);\r
-  font-weight: var(--reactaform-font-weight);\r
+  font-weight: 600;\r
   font-size: var(--reactaform-font-size);\r
   user-select: none;\r
 }\r
@@ -287,28 +287,28 @@ const vr = `/* ReactaForm CSS Custom Properties (CSS Variables) */\r
   \r
 }\r
 `;
-var be = { exports: {} }, de = {};
+var be = { exports: {} }, fe = {};
 var qe;
 function wr() {
-  if (qe) return de;
+  if (qe) return fe;
   qe = 1;
   var e = Symbol.for("react.transitional.element"), r = Symbol.for("react.fragment");
-  function n(o, t, a) {
+  function n(a, t, o) {
     var s = null;
-    if (a !== void 0 && (s = "" + a), t.key !== void 0 && (s = "" + t.key), "key" in t) {
-      a = {};
+    if (o !== void 0 && (s = "" + o), t.key !== void 0 && (s = "" + t.key), "key" in t) {
+      o = {};
       for (var i in t)
-        i !== "key" && (a[i] = t[i]);
-    } else a = t;
-    return t = a.ref, {
+        i !== "key" && (o[i] = t[i]);
+    } else o = t;
+    return t = o.ref, {
       $$typeof: e,
-      type: o,
+      type: a,
       key: s,
       ref: t !== void 0 ? t : null,
-      props: a
+      props: o
     };
   }
-  return de.Fragment = r, de.jsx = n, de.jsxs = n, de;
+  return fe.Fragment = r, fe.jsx = n, fe.jsxs = n, fe;
 }
 var pe = {};
 var Be;
@@ -317,20 +317,20 @@ function Sr() {
     function e(h) {
       if (h == null) return null;
       if (typeof h == "function")
-        return h.$$typeof === z ? null : h.displayName || h.name || null;
+        return h.$$typeof === O ? null : h.displayName || h.name || null;
       if (typeof h == "string") return h;
       switch (h) {
         case y:
           return "Fragment";
-        case v:
-          return "Profiler";
         case x:
+          return "Profiler";
+        case C:
           return "StrictMode";
-        case j:
+        case w:
           return "Suspense";
         case I:
           return "SuspenseList";
-        case M:
+        case $:
           return "Activity";
       }
       if (typeof h == "object")
@@ -339,19 +339,19 @@ function Sr() {
         ), h.$$typeof) {
           case f:
             return "Portal";
-          case R:
+          case N:
             return h.displayName || "Context";
-          case F:
+          case j:
             return (h._context.displayName || "Context") + ".Consumer";
-          case w:
-            var E = h.render;
-            return h = h.displayName, h || (h = E.displayName || E.name || "", h = h !== "" ? "ForwardRef(" + h + ")" : "ForwardRef"), h;
-          case S:
-            return E = h.displayName || null, E !== null ? E : e(h.type) || "Memo";
+          case v:
+            var S = h.render;
+            return h = h.displayName, h || (h = S.displayName || S.name || "", h = h !== "" ? "ForwardRef(" + h + ")" : "ForwardRef"), h;
           case A:
-            E = h._payload, h = h._init;
+            return S = h.displayName || null, S !== null ? S : e(h.type) || "Memo";
+          case R:
+            S = h._payload, h = h._init;
             try {
-              return e(h(E));
+              return e(h(S));
             } catch {
             }
         }
@@ -363,74 +363,74 @@ function Sr() {
     function n(h) {
       try {
         r(h);
-        var E = !1;
+        var S = !1;
       } catch {
-        E = !0;
+        S = !0;
       }
-      if (E) {
-        E = console;
-        var B = E.error, U = typeof Symbol == "function" && Symbol.toStringTag && h[Symbol.toStringTag] || h.constructor.name || "Object";
-        return B.call(
-          E,
+      if (S) {
+        S = console;
+        var z = S.error, Y = typeof Symbol == "function" && Symbol.toStringTag && h[Symbol.toStringTag] || h.constructor.name || "Object";
+        return z.call(
+          S,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          U
+          Y
         ), r(h);
       }
     }
-    function o(h) {
+    function a(h) {
       if (h === y) return "<>";
-      if (typeof h == "object" && h !== null && h.$$typeof === A)
+      if (typeof h == "object" && h !== null && h.$$typeof === R)
         return "<...>";
       try {
-        var E = e(h);
-        return E ? "<" + E + ">" : "<...>";
+        var S = e(h);
+        return S ? "<" + S + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
     function t() {
-      var h = L.A;
+      var h = P.A;
       return h === null ? null : h.getOwner();
     }
-    function a() {
+    function o() {
       return Error("react-stack-top-frame");
     }
     function s(h) {
-      if (J.call(h, "key")) {
-        var E = Object.getOwnPropertyDescriptor(h, "key").get;
-        if (E && E.isReactWarning) return !1;
+      if (W.call(h, "key")) {
+        var S = Object.getOwnPropertyDescriptor(h, "key").get;
+        if (S && S.isReactWarning) return !1;
       }
       return h.key !== void 0;
     }
-    function i(h, E) {
-      function B() {
+    function i(h, S) {
+      function z() {
         ue || (ue = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
-          E
+          S
         ));
       }
-      B.isReactWarning = !0, Object.defineProperty(h, "key", {
-        get: B,
+      z.isReactWarning = !0, Object.defineProperty(h, "key", {
+        get: z,
         configurable: !0
       });
     }
-    function u() {
+    function m() {
       var h = e(this.type);
       return Q[h] || (Q[h] = !0, console.error(
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
       )), h = this.props.ref, h !== void 0 ? h : null;
     }
-    function m(h, E, B, U, ne, ae) {
-      var _ = B.ref;
+    function d(h, S, z, Y, te, se) {
+      var q = z.ref;
       return h = {
         $$typeof: b,
         type: h,
-        key: E,
-        props: B,
-        _owner: U
-      }, (_ !== void 0 ? _ : null) !== null ? Object.defineProperty(h, "ref", {
+        key: S,
+        props: z,
+        _owner: Y
+      }, (q !== void 0 ? q : null) !== null ? Object.defineProperty(h, "ref", {
         enumerable: !1,
-        get: u
+        get: m
       }) : Object.defineProperty(h, "ref", { enumerable: !1, value: null }), h._store = {}, Object.defineProperty(h._store, "validated", {
         configurable: !1,
         enumerable: !1,
@@ -445,99 +445,99 @@ function Sr() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: ne
+        value: te
       }), Object.defineProperty(h, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: ae
+        value: se
       }), Object.freeze && (Object.freeze(h.props), Object.freeze(h)), h;
     }
-    function l(h, E, B, U, ne, ae) {
-      var _ = E.children;
-      if (_ !== void 0)
-        if (U)
-          if (ce(_)) {
-            for (U = 0; U < _.length; U++)
-              p(_[U]);
-            Object.freeze && Object.freeze(_);
+    function l(h, S, z, Y, te, se) {
+      var q = S.children;
+      if (q !== void 0)
+        if (Y)
+          if (ae(q)) {
+            for (Y = 0; Y < q.length; Y++)
+              u(q[Y]);
+            Object.freeze && Object.freeze(q);
           } else
             console.error(
               "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
             );
-        else p(_);
-      if (J.call(E, "key")) {
-        _ = e(h);
-        var V = Object.keys(E).filter(function(X) {
-          return X !== "key";
+        else u(q);
+      if (W.call(S, "key")) {
+        q = e(h);
+        var D = Object.keys(S).filter(function(K) {
+          return K !== "key";
         });
-        U = 0 < V.length ? "{key: someKey, " + V.join(": ..., ") + ": ...}" : "{key: someKey}", O[_ + U] || (V = 0 < V.length ? "{" + V.join(": ..., ") + ": ...}" : "{}", console.error(
+        Y = 0 < D.length ? "{key: someKey, " + D.join(": ..., ") + ": ...}" : "{key: someKey}", T[q + Y] || (D = 0 < D.length ? "{" + D.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
   <%s key={someKey} {...props} />`,
-          U,
-          _,
-          V,
-          _
-        ), O[_ + U] = !0);
+          Y,
+          q,
+          D,
+          q
+        ), T[q + Y] = !0);
       }
-      if (_ = null, B !== void 0 && (n(B), _ = "" + B), s(E) && (n(E.key), _ = "" + E.key), "key" in E) {
-        B = {};
-        for (var q in E)
-          q !== "key" && (B[q] = E[q]);
-      } else B = E;
-      return _ && i(
-        B,
+      if (q = null, z !== void 0 && (n(z), q = "" + z), s(S) && (n(S.key), q = "" + S.key), "key" in S) {
+        z = {};
+        for (var _ in S)
+          _ !== "key" && (z[_] = S[_]);
+      } else z = S;
+      return q && i(
+        z,
         typeof h == "function" ? h.displayName || h.name || "Unknown" : h
-      ), m(
+      ), d(
         h,
-        _,
-        B,
+        q,
+        z,
         t(),
-        ne,
-        ae
+        te,
+        se
       );
     }
-    function p(h) {
-      c(h) ? h._store && (h._store.validated = 1) : typeof h == "object" && h !== null && h.$$typeof === A && (h._payload.status === "fulfilled" ? c(h._payload.value) && h._payload.value._store && (h._payload.value._store.validated = 1) : h._store && (h._store.validated = 1));
+    function u(h) {
+      c(h) ? h._store && (h._store.validated = 1) : typeof h == "object" && h !== null && h.$$typeof === R && (h._payload.status === "fulfilled" ? c(h._payload.value) && h._payload.value._store && (h._payload.value._store.validated = 1) : h._store && (h._store.validated = 1));
     }
     function c(h) {
       return typeof h == "object" && h !== null && h.$$typeof === b;
     }
-    var d = N, b = Symbol.for("react.transitional.element"), f = Symbol.for("react.portal"), y = Symbol.for("react.fragment"), x = Symbol.for("react.strict_mode"), v = Symbol.for("react.profiler"), F = Symbol.for("react.consumer"), R = Symbol.for("react.context"), w = Symbol.for("react.forward_ref"), j = Symbol.for("react.suspense"), I = Symbol.for("react.suspense_list"), S = Symbol.for("react.memo"), A = Symbol.for("react.lazy"), M = Symbol.for("react.activity"), z = Symbol.for("react.client.reference"), L = d.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, J = Object.prototype.hasOwnProperty, ce = Array.isArray, re = console.createTask ? console.createTask : function() {
+    var p = F, b = Symbol.for("react.transitional.element"), f = Symbol.for("react.portal"), y = Symbol.for("react.fragment"), C = Symbol.for("react.strict_mode"), x = Symbol.for("react.profiler"), j = Symbol.for("react.consumer"), N = Symbol.for("react.context"), v = Symbol.for("react.forward_ref"), w = Symbol.for("react.suspense"), I = Symbol.for("react.suspense_list"), A = Symbol.for("react.memo"), R = Symbol.for("react.lazy"), $ = Symbol.for("react.activity"), O = Symbol.for("react.client.reference"), P = p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, W = Object.prototype.hasOwnProperty, ae = Array.isArray, re = console.createTask ? console.createTask : function() {
       return null;
     };
-    d = {
+    p = {
       react_stack_bottom_frame: function(h) {
         return h();
       }
     };
-    var ue, Q = {}, oe = d.react_stack_bottom_frame.bind(
-      d,
-      a
-    )(), P = re(o(a)), O = {};
-    pe.Fragment = y, pe.jsx = function(h, E, B) {
-      var U = 1e4 > L.recentlyCreatedOwnerStacks++;
+    var ue, Q = {}, oe = p.react_stack_bottom_frame.bind(
+      p,
+      o
+    )(), Z = re(a(o)), T = {};
+    pe.Fragment = y, pe.jsx = function(h, S, z) {
+      var Y = 1e4 > P.recentlyCreatedOwnerStacks++;
       return l(
         h,
-        E,
-        B,
+        S,
+        z,
         !1,
-        U ? Error("react-stack-top-frame") : oe,
-        U ? re(o(h)) : P
+        Y ? Error("react-stack-top-frame") : oe,
+        Y ? re(a(h)) : Z
       );
-    }, pe.jsxs = function(h, E, B) {
-      var U = 1e4 > L.recentlyCreatedOwnerStacks++;
+    }, pe.jsxs = function(h, S, z) {
+      var Y = 1e4 > P.recentlyCreatedOwnerStacks++;
       return l(
         h,
-        E,
-        B,
+        S,
+        z,
         !0,
-        U ? Error("react-stack-top-frame") : oe,
-        U ? re(o(h)) : P
+        Y ? Error("react-stack-top-frame") : oe,
+        Y ? re(a(h)) : Z
       );
     };
   })()), pe;
@@ -547,8 +547,8 @@ function Cr() {
   return He || (He = 1, process.env.NODE_ENV === "production" ? be.exports = wr() : be.exports = Sr()), be.exports;
 }
 var g = Cr();
-const Oe = yr(void 0), T = () => {
-  const e = xr(Oe);
+const Me = yr(void 0), L = () => {
+  const e = xr(Me);
   if (!e)
     throw new Error("❌ useReactaFormContext must be used within a <ReactaFormProvider>");
   return e;
@@ -584,7 +584,7 @@ class we {
   }
   // Batch operations for better performance
   registerAll(r) {
-    Array.isArray(r) ? r.forEach(([n, o]) => this.register(n, o)) : Object.entries(r).forEach(([n, o]) => this.register(n, o));
+    Array.isArray(r) ? r.forEach(([n, a]) => this.register(n, a)) : Object.entries(r).forEach(([n, a]) => this.register(n, a));
   }
   // Get with fallback
   getOrDefault(r, n) {
@@ -592,41 +592,41 @@ class we {
   }
 }
 function jr(e, r = 300, n) {
-  const o = k(void 0), t = k(e), a = k(null), s = k(!1);
-  C(() => {
+  const a = E(void 0), t = E(e), o = E(null), s = E(!1);
+  k(() => {
     t.current = e;
-  }, [e]), C(
+  }, [e]), k(
     () => () => {
-      o.current !== void 0 && (window.clearTimeout(o.current), o.current = void 0);
+      a.current !== void 0 && (window.clearTimeout(a.current), a.current = void 0);
     },
     []
   );
-  const i = Z(() => {
-    o.current !== void 0 && (window.clearTimeout(o.current), o.current = void 0), a.current = null, s.current = !1;
-  }, []), u = Z(() => {
-    if (o.current !== void 0 && (window.clearTimeout(o.current), o.current = void 0), a.current)
+  const i = X(() => {
+    a.current !== void 0 && (window.clearTimeout(a.current), a.current = void 0), o.current = null, s.current = !1;
+  }, []), m = X(() => {
+    if (a.current !== void 0 && (window.clearTimeout(a.current), a.current = void 0), o.current)
       try {
-        t.current(...a.current);
+        t.current(...o.current);
       } finally {
-        a.current = null, s.current = !1;
+        o.current = null, s.current = !1;
       }
   }, []);
-  return { callback: Z(
+  return { callback: X(
     (...l) => {
       if (n?.leading === !0 && !s.current) {
-        s.current = !0, t.current(...l), window.clearTimeout(o.current), o.current = window.setTimeout(() => {
-          s.current = !1, o.current = void 0;
+        s.current = !0, t.current(...l), window.clearTimeout(a.current), a.current = window.setTimeout(() => {
+          s.current = !1, a.current = void 0;
         }, r);
         return;
       }
-      a.current = l, window.clearTimeout(o.current), o.current = window.setTimeout(() => {
-        o.current = void 0, a.current && (t.current(...a.current), a.current = null, s.current = !1);
+      o.current = l, window.clearTimeout(a.current), a.current = window.setTimeout(() => {
+        a.current = void 0, o.current && (t.current(...o.current), o.current = null, s.current = !1);
       }, r);
     },
     [r, n?.leading]
-  ), cancel: i, flush: u };
+  ), cancel: i, flush: m };
 }
-const $ = {
+const M = {
   field: "reactaform-field",
   label: "reactaform-label",
   input: "reactaform-input",
@@ -635,16 +635,16 @@ const $ = {
   inputSelect: "reactaform-select",
   rangeInput: "reactaform-input--range",
   button: "reactaform-button"
-}, K = (...e) => {
+}, G = (...e) => {
   const r = [];
   for (const n of e)
-    n && (typeof n == "string" ? r.push(n) : typeof n == "object" && Object.entries(n).forEach(([o, t]) => {
-      t && r.push(o);
+    n && (typeof n == "string" ? r.push(n) : typeof n == "object" && Object.entries(n).forEach(([a, t]) => {
+      t && r.push(a);
     }));
   return r.join(" ");
 }, er = ({ content: e, size: r = "medium", animation: n = !0 }) => {
-  const { t: o, darkMode: t, formStyle: a, fieldStyle: s } = T(), [i, u] = D(!1), [m, l] = D({ x: 0, y: 0 }), [p, c] = D(!1), d = k(null), b = k(null), f = k(null), y = G(() => {
-    const R = {
+  const { t: a, darkMode: t, formStyle: o, fieldStyle: s } = L(), [i, m] = V(!1), [d, l] = V({ x: 0, y: 0 }), [u, c] = V(!1), p = E(null), b = E(null), f = E(null), y = J(() => {
+    const N = {
       icon: {
         display: "inline-flex",
         alignItems: "center",
@@ -686,58 +686,58 @@ const $ = {
         opacity: 1,
         visibility: "visible"
       }
-    }, w = (I, S, A) => {
-      const z = I?.[S];
-      return (A && z ? z[A] : void 0) ?? {};
+    }, v = (I, A, R) => {
+      const O = I?.[A];
+      return (R && O ? O[R] : void 0) ?? {};
     };
     return {
-      icon: { ...R.icon, ...w(a, "tooltip", "icon"), ...w(s, "tooltip", "icon") },
-      text: { ...R.text, ...w(a, "tooltip", "text"), ...w(s, "tooltip", "text") },
-      textVisible: R.textVisible
+      icon: { ...N.icon, ...v(o, "tooltip", "icon"), ...v(s, "tooltip", "icon") },
+      text: { ...N.text, ...v(o, "tooltip", "text"), ...v(s, "tooltip", "text") },
+      textVisible: N.textVisible
     };
-  }, [t, r, n, a, s]);
-  C(() => {
+  }, [t, r, n, o, s]);
+  k(() => {
     if (i) {
-      const F = requestAnimationFrame(() => c(!1)), R = requestAnimationFrame(() => {
-        if (d.current) {
-          const w = d.current.getBoundingClientRect(), j = 8;
-          f.current = w;
-          const I = w.right + j, S = w.top;
-          l({ x: I, y: S }), c(!0);
+      const j = requestAnimationFrame(() => c(!1)), N = requestAnimationFrame(() => {
+        if (p.current) {
+          const v = p.current.getBoundingClientRect(), w = 8;
+          f.current = v;
+          const I = v.right + w, A = v.top;
+          l({ x: I, y: A }), c(!0);
         }
       });
       return () => {
-        cancelAnimationFrame(R), cancelAnimationFrame(F);
+        cancelAnimationFrame(N), cancelAnimationFrame(j);
       };
     } else
       requestAnimationFrame(() => c(!1));
-  }, [i]), C(() => {
-    if (!p) return;
-    const F = requestAnimationFrame(() => {
+  }, [i]), k(() => {
+    if (!u) return;
+    const j = requestAnimationFrame(() => {
       if (!b.current) return;
-      const R = b.current.getBoundingClientRect(), w = 8, j = typeof window < "u" ? window.innerWidth : 1024, I = typeof window < "u" ? window.innerHeight : 768;
-      let S = m.x, A = m.y;
-      const M = f.current;
-      M && (S = M.right + w, A = M.top + M.height / 2 - R.height / 2 + -4, S + R.width > j - w && (S = M.left - w - R.width)), S + R.width > j - w && (S = Math.max(w, j - R.width - w)), S < w && (S = w), A + R.height > I - w && (A = Math.max(w, I - R.height - w)), A < w && (A = w), (S !== m.x || A !== m.y) && l({ x: S, y: A });
+      const N = b.current.getBoundingClientRect(), v = 8, w = typeof window < "u" ? window.innerWidth : 1024, I = typeof window < "u" ? window.innerHeight : 768;
+      let A = d.x, R = d.y;
+      const $ = f.current;
+      $ && (A = $.right + v, R = $.top + $.height / 2 - N.height / 2 + -4, A + N.width > w - v && (A = $.left - v - N.width)), A + N.width > w - v && (A = Math.max(v, w - N.width - v)), A < v && (A = v), R + N.height > I - v && (R = Math.max(v, I - N.height - v)), R < v && (R = v), (A !== d.x || R !== d.y) && l({ x: A, y: R });
     });
-    return () => cancelAnimationFrame(F);
-  }, [p, m.x, m.y]);
-  const x = typeof document < "u" ? document.getElementById("popup-root") : null, v = /* @__PURE__ */ g.jsx(
+    return () => cancelAnimationFrame(j);
+  }, [u, d.x, d.y]);
+  const C = typeof document < "u" ? document.getElementById("popup-root") : null, x = /* @__PURE__ */ g.jsx(
     "div",
     {
       ref: b,
       style: {
         ...y.text,
-        transform: p ? "translateY(0) scale(1)" : "translateY(-4px) scale(0.98)",
+        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
-        ...p ? y.textVisible : {},
-        top: m.y,
-        left: m.x
+        ...u ? y.textVisible : {},
+        top: d.y,
+        left: d.x
       },
       "data-reactaform-theme": t ? "dark" : "light",
-      children: o(e)
+      children: a(e)
     }
   );
   return /* @__PURE__ */ g.jsxs(g.Fragment, { children: [
@@ -745,45 +745,47 @@ const $ = {
       "span",
       {
         "data-testid": "tooltip-icon",
-        ref: d,
-        onMouseEnter: () => u(!0),
-        onMouseLeave: () => u(!1),
+        ref: p,
+        onMouseEnter: () => m(!0),
+        onMouseLeave: () => m(!1),
         style: {
           ...y.icon
         },
         children: "?"
       }
     ),
-    i && (x ? Me.createPortal(v, x) : v)
+    i && (C ? $e.createPortal(x, C) : x)
   ] });
 }, Re = ve(({
   field: e,
   error: r,
   children: n,
-  showLabel: o = !0
+  showLabel: a = !0
 }) => {
-  const { t } = T(), a = e?.labelLayout === "column-center" ? "center" : "left";
+  const { t } = L(), o = e?.labelLayout === "column-center" ? "center" : "left";
   return /* @__PURE__ */ g.jsxs(
     "div",
     {
-      className: `${$.field} column-layout`,
+      className: `${M.field} column-layout`,
       style: {
         display: "flex",
         flexDirection: "column",
         gap: "var(--reactaform-label-gap, 4px)",
-        "--label-align": a
+        "--label-align": o
       },
       children: [
-        o && /* @__PURE__ */ g.jsx("div", { style: { textAlign: a, width: "100%" }, children: /* @__PURE__ */ g.jsx(
+        a && /* @__PURE__ */ g.jsx("div", { style: { textAlign: o, width: "100%" }, children: /* @__PURE__ */ g.jsx(
           "label",
           {
-            className: $.label,
+            id: `${e.name}-label`,
+            className: M.label,
             htmlFor: e.name,
             style: {
-              textAlign: a,
+              textAlign: o,
               width: "100%",
               minWidth: "unset",
-              display: "block"
+              display: "block",
+              marginBottom: "10px"
             },
             children: t(e.displayName)
           }
@@ -803,7 +805,7 @@ const $ = {
             ]
           }
         ),
-        r && /* @__PURE__ */ g.jsx($e, { children: r })
+        r && /* @__PURE__ */ g.jsx(Oe, { id: `${e.name}-error`, children: r })
       ]
     }
   );
@@ -813,31 +815,32 @@ const rr = ve(({
   field: e,
   error: r,
   children: n,
-  rightAlign: o = !1
+  rightAlign: a = !1
 }) => {
-  const { t } = T(), a = G(() => ({
+  const { t } = L(), o = J(() => ({
     display: "flex",
     flexDirection: "column",
     gap: 0
-  }), []), s = G(() => ({
+  }), []), s = J(() => ({
     display: "flex",
     flexDirection: "row",
     alignItems: "center",
     gap: "3px"
   }), []);
-  return /* @__PURE__ */ g.jsxs("div", { className: `${$.field} row-layout`, children: [
+  return /* @__PURE__ */ g.jsxs("div", { className: `${M.field} row-layout`, children: [
     /* @__PURE__ */ g.jsx(
       "label",
       {
-        className: $.label,
+        id: `${e.name}-label`,
+        className: M.label,
         htmlFor: e.name,
         style: { textAlign: "left", justifyContent: "flex-start" },
         children: t(e.displayName)
       }
     ),
-    /* @__PURE__ */ g.jsxs("div", { style: a, children: [
+    /* @__PURE__ */ g.jsxs("div", { style: o, children: [
       /* @__PURE__ */ g.jsxs("div", { style: s, children: [
-        o ? /* @__PURE__ */ g.jsx(
+        a ? /* @__PURE__ */ g.jsx(
           "div",
           {
             style: {
@@ -852,18 +855,18 @@ const rr = ve(({
         ) : n,
         e.tooltip && /* @__PURE__ */ g.jsx(er, { content: e.tooltip })
       ] }),
-      r && /* @__PURE__ */ g.jsx($e, { children: r })
+      r && /* @__PURE__ */ g.jsx(Oe, { id: `${e.name}-error`, children: r })
     ] })
   ] });
 });
 rr.displayName = "RowFieldLayout";
-const W = ({
+const U = ({
   field: e,
   error: r,
   children: n,
-  rightAlign: o = !1
-}) => e?.labelLayout === "column-left" || e?.labelLayout === "column-center" ? /* @__PURE__ */ g.jsx(Re, { field: e, error: r, showLabel: !0, children: n }) : e?.type === "checkbox" || e?.type === "switch" ? /* @__PURE__ */ g.jsx(Re, { field: e, error: r, showLabel: !1, children: n }) : /* @__PURE__ */ g.jsx(rr, { field: e, error: r, rightAlign: o, children: n }), $e = ve(({ children: e }) => {
-  const r = G(() => ({
+  rightAlign: a = !1
+}) => e.labelLayout === "column-left" || e.labelLayout === "column-center" ? /* @__PURE__ */ g.jsx(Re, { field: e, error: r, showLabel: !0, children: n }) : e.type === "checkbox" || e.type === "switch" ? /* @__PURE__ */ g.jsx(Re, { field: e, error: r, showLabel: !1, children: n }) : /* @__PURE__ */ g.jsx(rr, { field: e, error: r, rightAlign: a, children: n }), Oe = ve(({ children: e, id: r }) => {
+  const n = J(() => ({
     color: "var(--reactaform-error-color)",
     fontSize: "13px",
     marginTop: "4px",
@@ -873,11 +876,11 @@ const W = ({
     justifyContent: "flex-start",
     alignItems: "flex-start"
   }), []);
-  return /* @__PURE__ */ g.jsx("div", { style: r, children: e });
+  return /* @__PURE__ */ g.jsx("div", { id: r, style: n, children: e });
 });
-$e.displayName = "ErrorDiv";
+Oe.displayName = "ErrorDiv";
 const tr = ve(({ name: e, onChange: r }) => {
-  const { t: n } = T();
+  const { t: n } = L();
   return /* @__PURE__ */ g.jsxs("div", { style: { marginBottom: 16 }, children: [
     /* @__PURE__ */ g.jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 2fr", gap: 12, alignItems: "center" }, children: [
       /* @__PURE__ */ g.jsx(
@@ -899,7 +902,7 @@ const tr = ve(({ name: e, onChange: r }) => {
           id: "instance-name-input",
           type: "text",
           value: e,
-          onChange: (o) => r(o.target.value),
+          onChange: (a) => r(a.target.value),
           style: {
             width: "100%",
             padding: "var(--reactaform-input-padding, 8px 12px)",
@@ -919,10 +922,10 @@ const tr = ve(({ name: e, onChange: r }) => {
 });
 tr.displayName = "InstanceName";
 class kr extends we {
-  registerInCategory(r, n, o) {
+  registerInCategory(r, n, a) {
     this.get(r) || this.register(r, {});
     const t = this.get(r);
-    t[n] = o;
+    t[n] = a;
   }
   getFromCategory(r, n) {
     return this.get(r)?.[n];
@@ -934,123 +937,123 @@ class kr extends we {
     return this.list();
   }
 }
-const nr = new we(), or = new kr();
+const nr = new we(), ar = new kr();
 function Zt(e, r) {
   nr.register(e, r);
 }
 function Qt(e, r, n) {
-  or.registerInCategory(e, r, n);
+  ar.registerInCategory(e, r, n);
 }
 function Rr(e, r) {
-  return or.getFromCategory(e, r) || null;
+  return ar.getFromCategory(e, r) || null;
 }
 function Er(e) {
   return nr.get(e) || null;
 }
 const Ce = /* @__PURE__ */ new Map(), je = /* @__PURE__ */ new Map();
-function Y(e, r, n, o) {
+function H(e, r, n, a) {
   if (r && typeof r.validationHandlerName == "string") {
     const t = `${e}:${r.validationHandlerName}`;
     if (!Ce.has(t)) {
       const s = Rr(e, r.validationHandlerName);
       Ce.set(t, s);
     }
-    const a = Ce.get(t);
-    if (a)
-      return a(n, o) || null;
+    const o = Ce.get(t);
+    if (o)
+      return o(n, a) || null;
   }
   return null;
 }
 function Nr(e, r, n) {
   if (e && typeof e.validationHandlerName == "string") {
-    const o = e.validationHandlerName;
-    if (!je.has(o)) {
-      const a = Er(o);
-      je.set(o, a);
+    const a = e.validationHandlerName;
+    if (!je.has(a)) {
+      const o = Er(a);
+      je.set(a, o);
     }
-    const t = je.get(o);
+    const t = je.get(a);
     if (t)
       return t(r, n) || null;
   }
   return null;
 }
-function ie(e) {
+function ce(e) {
   return typeof e == "object" && e !== null;
 }
-function Ve(e) {
-  if (!ie(e)) return !1;
+function De(e) {
+  if (!ce(e)) return !1;
   const r = e;
   return typeof r.name == "string" && typeof r.displayName == "string";
 }
-function ar(e) {
-  if (!ie(e)) return !1;
+function or(e) {
+  if (!ce(e)) return !1;
   const r = e;
-  return typeof r.name != "string" || typeof r.version != "string" || !Array.isArray(r.properties) ? !1 : r.properties.every((n) => Ve(n));
+  return typeof r.name != "string" || typeof r.version != "string" || !Array.isArray(r.properties) ? !1 : r.properties.every((n) => De(n));
 }
 function Ee(e) {
   try {
     return typeof File < "u" && e instanceof File;
   } catch {
-    const r = ie(e) ? e : void 0;
+    const r = ce(e) ? e : void 0;
     return !!r && typeof r.name == "string" && typeof r.size == "number";
   }
 }
 function en(e, r, n = {}) {
   try {
     const {
-      includeMetadata: o = !1,
+      includeMetadata: a = !1,
       dateFormat: t = "iso",
-      fileHandling: a = "metadata",
+      fileHandling: o = "metadata",
       prettify: s = !1,
       excludeFields: i = [],
-      includeOnlyFields: u = []
+      includeOnlyFields: m = []
     } = n;
     if (!e || typeof e != "object")
       return {
         success: !1,
         error: "Instance must be a valid object"
       };
-    const m = [], l = [], p = {}, d = (ar(r) || ie(r) && Array.isArray(r.properties) ? r.properties : []).filter(Ve), b = new Map(d.map((y) => [y.name, y]));
-    for (const [y, x] of Object.entries(e)) {
+    const d = [], l = [], u = {}, p = (or(r) || ce(r) && Array.isArray(r.properties) ? r.properties : []).filter(De), b = new Map(p.map((y) => [y.name, y]));
+    for (const [y, C] of Object.entries(e)) {
       if (i.includes(y)) {
         l.push(y);
         continue;
       }
-      if (u.length > 0 && !u.includes(y)) {
+      if (m.length > 0 && !m.includes(y)) {
         l.push(y);
         continue;
       }
-      if (x === void 0) continue;
-      const v = b.get(y);
+      if (C === void 0) continue;
+      const x = b.get(y);
       try {
-        p[y] = Ir(x, v, { dateFormat: t, fileHandling: a });
-      } catch (F) {
-        m.push(`Error serializing field '${y}': ${String(F)}`), p[y] = null;
+        u[y] = Ir(C, x, { dateFormat: t, fileHandling: o });
+      } catch (j) {
+        d.push(`Error serializing field '${y}': ${String(j)}`), u[y] = null;
       }
     }
-    return o && (p._metadata = {
+    return a && (u._metadata = {
       serializedAt: (/* @__PURE__ */ new Date()).toISOString(),
-      version: (ie(r) ? r.version : void 0) || "1.0.0",
-      fieldCount: Object.keys(p).length - 1
+      version: (ce(r) ? r.version : void 0) || "1.0.0",
+      fieldCount: Object.keys(u).length - 1
       // Exclude metadata itself
     }), {
       success: !0,
-      data: s ? JSON.stringify(p, null, 2) : JSON.stringify(p),
+      data: s ? JSON.stringify(u, null, 2) : JSON.stringify(u),
       metadata: {
-        fieldCount: Object.keys(p).length,
+        fieldCount: Object.keys(u).length,
         excludedFields: l,
-        warnings: m
+        warnings: d
       }
     };
-  } catch (o) {
+  } catch (a) {
     return {
       success: !1,
-      error: `Serialization failed: ${o instanceof Error ? o.message : "Unknown error"}`
+      error: `Serialization failed: ${a instanceof Error ? a.message : "Unknown error"}`
     };
   }
 }
 function Ir(e, r, n = {}) {
-  const { dateFormat: o = "iso", fileHandling: t = "metadata" } = n;
+  const { dateFormat: a = "iso", fileHandling: t = "metadata" } = n;
   if (e == null)
     return null;
   if (r)
@@ -1058,7 +1061,7 @@ function Ir(e, r, n = {}) {
       case "date":
       case "datetime":
       case "date-time":
-        return Ue(e, o);
+        return Ue(e, a);
       case "file":
         return We(e, t);
       case "int":
@@ -1071,20 +1074,20 @@ function Ir(e, r, n = {}) {
         return typeof e == "string" ? e === "true" : !!e;
       case "int-array":
       case "float-array":
-        return Array.isArray(e) ? e.map((a) => typeof a == "string" ? Number(a) : a) : e;
+        return Array.isArray(e) ? e.map((o) => typeof o == "string" ? Number(o) : o) : e;
       default:
         return e;
     }
-  return e instanceof Date ? Ue(e, o) : Ee(e) || Array.isArray(e) && Ee(e[0]) ? We(e, t) : e;
+  return e instanceof Date ? Ue(e, a) : Ee(e) || Array.isArray(e) && Ee(e[0]) ? We(e, t) : e;
 }
 function Ue(e, r) {
   let n = null;
   if (e instanceof Date)
     n = e;
   else if (typeof e == "string") {
-    const o = new Date(e);
-    if (!isNaN(o.getTime()))
-      n = o;
+    const a = new Date(e);
+    if (!isNaN(a.getTime()))
+      n = a;
     else
       return e;
   } else
@@ -1122,9 +1125,9 @@ function Ye(e, r) {
 function rn(e, r, n = {}) {
   try {
     const {
-      strict: o = !1,
+      strict: a = !1,
       validateTypes: t = !0,
-      preserveUnknownFields: a = !0,
+      preserveUnknownFields: o = !0,
       dateFormat: s = "auto"
     } = n;
     if (!e || typeof e != "string")
@@ -1146,39 +1149,39 @@ function rn(e, r, n = {}) {
         success: !1,
         error: "Parsed data must be an object"
       };
-    const u = [], m = [], l = {}, c = (ar(r) || ie(r) && Array.isArray(r.properties) ? r.properties : []).filter(Ve), d = new Map(c.map((f) => [f.name, f]));
+    const m = [], d = [], l = {}, c = (or(r) || ce(r) && Array.isArray(r.properties) ? r.properties : []).filter(De), p = new Map(c.map((f) => [f.name, f]));
     for (const f of c) {
-      const y = f.name, x = i[y];
-      if (x === void 0) {
-        o && f.required && m.push(`Required field '${y}' is missing`);
+      const y = f.name, C = i[y];
+      if (C === void 0) {
+        a && f.required && d.push(`Required field '${y}' is missing`);
         continue;
       }
       try {
-        l[y] = Ar(x, f, { validateTypes: t, dateFormat: s });
-      } catch (v) {
-        const F = `Error deserializing field '${y}': ${String(v)}`;
-        o ? m.push(F) : (u.push(F), l[y] = x);
+        l[y] = Ar(C, f, { validateTypes: t, dateFormat: s });
+      } catch (x) {
+        const j = `Error deserializing field '${y}': ${String(x)}`;
+        a ? d.push(j) : (m.push(j), l[y] = C);
       }
     }
-    if (a)
+    if (o)
       for (const [f, y] of Object.entries(i))
-        !d.has(f) && f !== "_metadata" && (o && u.push(`Unknown field '${f}' preserved`), l[f] = y);
-    const b = m.length > 0;
+        !p.has(f) && f !== "_metadata" && (a && m.push(`Unknown field '${f}' preserved`), l[f] = y);
+    const b = d.length > 0;
     return {
       success: !b,
       data: l,
-      warnings: u.length > 0 ? u : void 0,
-      validationErrors: b ? m : void 0
+      warnings: m.length > 0 ? m : void 0,
+      validationErrors: b ? d : void 0
     };
-  } catch (o) {
+  } catch (a) {
     return {
       success: !1,
-      error: `Deserialization failed: ${o instanceof Error ? o.message : "Unknown error"}`
+      error: `Deserialization failed: ${a instanceof Error ? a.message : "Unknown error"}`
     };
   }
 }
 function Ar(e, r, n = {}) {
-  const { validateTypes: o = !0, dateFormat: t = "auto" } = n;
+  const { validateTypes: a = !0, dateFormat: t = "auto" } = n;
   if (e == null)
     return e;
   try {
@@ -1186,44 +1189,44 @@ function Ar(e, r, n = {}) {
       case "date":
       case "datetime":
       case "date-time":
-        return Fr(e, t, o);
+        return Fr(e, t, a);
       case "int":
       case "integer":
-        return Ne(e, o);
+        return Ne(e, a);
       case "float":
       case "number":
-        return Ie(e, o);
+        return Ie(e, a);
       case "boolean":
-        return Mr(e, o);
+        return $r(e, a);
       case "int-array":
-        return Je(e, "integer", o);
+        return Je(e, "integer", a);
       case "float-array":
-        return Je(e, "number", o);
+        return Je(e, "number", a);
       case "string":
       case "text":
       case "email":
       case "url":
       case "phone":
-        return o ? String(e) : e;
+        return a ? String(e) : e;
       default:
         return e;
     }
-  } catch (a) {
-    if (o)
-      throw new Error(`Type conversion failed: ${String(a)}`);
+  } catch (o) {
+    if (a)
+      throw new Error(`Type conversion failed: ${String(o)}`);
     return e;
   }
 }
 function tn(e, r = {}) {
   try {
-    const { prettify: n = !0, includeMetadata: o = !0 } = r;
+    const { prettify: n = !0, includeMetadata: a = !0 } = r;
     if (!e || typeof e != "object")
       return {
         success: !1,
         error: "Definition must be a valid object"
       };
     const t = { ...e };
-    return o && (t._metadata = {
+    return a && (t._metadata = {
       serializedAt: (/* @__PURE__ */ new Date()).toISOString(),
       version: t.version || "1.0.0",
       propertyCount: (Array.isArray(t.properties) ? t.properties.length : 0) || 0
@@ -1245,7 +1248,7 @@ function tn(e, r = {}) {
 }
 function nn(e, r = {}) {
   try {
-    const { strict: n = !1, validateTypes: o = !0 } = r;
+    const { strict: n = !1, validateTypes: a = !0 } = r;
     let t;
     if (typeof e == "string")
       try {
@@ -1263,13 +1266,13 @@ function nn(e, r = {}) {
         success: !1,
         error: "Input must be a string or object"
       };
-    const a = [], s = [], i = ["name", "version", "displayName"];
+    const o = [], s = [], i = ["name", "version", "displayName"];
     for (const l of i)
       if (!t[l])
         if (n)
           s.push(`Required field '${l}' is missing`);
         else
-          switch (a.push(`Missing field '${l}', using default`), l) {
+          switch (o.push(`Missing field '${l}', using default`), l) {
             case "name":
               t.name = "unnamed-definition";
               break;
@@ -1280,21 +1283,21 @@ function nn(e, r = {}) {
               t.displayName = t.name || "Unnamed Definition";
               break;
           }
-    const u = Array.isArray(t.properties) ? t.properties : null;
-    u ? t.properties = u.map((l, p) => {
-      const c = ie(l) ? l : {}, d = { ...c };
+    const m = Array.isArray(t.properties) ? t.properties : null;
+    m ? t.properties = m.map((l, u) => {
+      const c = ce(l) ? l : {}, p = { ...c };
       if (!c.name) {
-        const b = `Property at index ${p} missing 'name'`;
-        n ? s.push(b) : (a.push(`${b}, using 'field_${p}'`), d.name = `field_${p}`);
+        const b = `Property at index ${u} missing 'name'`;
+        n ? s.push(b) : (o.push(`${b}, using 'field_${u}'`), p.name = `field_${u}`);
       }
-      return c.displayName || (d.displayName = c.name || `Field ${p}`), c.type || (n && o ? s.push(`Property '${c.name || p}' missing 'type'`) : (a.push(`Property '${c.name || p}' missing 'type', using 'string'`), d.type = "string")), c.defaultValue === void 0 && (d.defaultValue = null), c.required === void 0 && (d.required = !1), d;
-    }) : n ? s.push("Properties must be an array") : (a.push("Properties not found or invalid, using empty array"), t.properties = []);
-    const m = s.length > 0;
+      return c.displayName || (p.displayName = c.name || `Field ${u}`), c.type || (n && a ? s.push(`Property '${c.name || u}' missing 'type'`) : (o.push(`Property '${c.name || u}' missing 'type', using 'string'`), p.type = "string")), c.defaultValue === void 0 && (p.defaultValue = null), c.required === void 0 && (p.required = !1), p;
+    }) : n ? s.push("Properties must be an array") : (o.push("Properties not found or invalid, using empty array"), t.properties = []);
+    const d = s.length > 0;
     return {
-      success: !m,
+      success: !d,
       data: t,
-      warnings: a.length > 0 ? a : void 0,
-      validationErrors: m ? s : void 0
+      warnings: o.length > 0 ? o : void 0,
+      validationErrors: d ? s : void 0
     };
   } catch (n) {
     return {
@@ -1307,16 +1310,16 @@ function Fr(e, r, n) {
   if (e instanceof Date)
     return e;
   if (typeof e == "number") {
-    const o = new Date(e);
-    if (n && isNaN(o.getTime()))
+    const a = new Date(e);
+    if (n && isNaN(a.getTime()))
       throw new Error(`Invalid timestamp: ${e}`);
-    return o;
+    return a;
   }
   if (typeof e == "string") {
-    const o = new Date(e);
-    if (n && isNaN(o.getTime()))
+    const a = new Date(e);
+    if (n && isNaN(a.getTime()))
       throw new Error(`Invalid date string: ${e}`);
-    return o;
+    return a;
   }
   if (n)
     throw new Error(`Cannot convert ${typeof e} to Date`);
@@ -1348,7 +1351,7 @@ function Ie(e, r) {
     throw new Error(`Cannot convert ${typeof e} to number`);
   return e;
 }
-function Mr(e, r) {
+function $r(e, r) {
   if (typeof e == "boolean")
     return e;
   if (typeof e == "string") {
@@ -1372,56 +1375,56 @@ function Je(e, r, n) {
       throw new Error(`Expected array, got ${typeof e}`);
     return e;
   }
-  return e.map((o, t) => {
+  return e.map((a, t) => {
     try {
-      return r === "integer" ? Ne(o, n) : Ie(o, n);
-    } catch (a) {
+      return r === "integer" ? Ne(a, n) : Ie(a, n);
+    } catch (o) {
       if (n)
-        throw new Error(`Array element ${t}: ${a}`);
-      return o;
+        throw new Error(`Array element ${t}: ${o}`);
+      return a;
     }
   });
 }
-const Or = (e, r) => {
+const Mr = (e, r) => {
   const n = /* @__PURE__ */ new Map();
-  let o = null, t = null, a = 0;
+  let a = null, t = null, o = 0;
   for (const s of e) {
     const i = s.group;
     if (!i) {
-      o = null, t = null;
+      a = null, t = null;
       continue;
     }
-    if (i === o)
+    if (i === a)
       r[s.name].group = t ?? i;
     else {
       if (!n.has(i))
         n.set(i, 1), t = null, r[s.name].group = i;
       else {
-        const u = n.get(i), m = `${i}(${u})`;
-        n.set(i, u + 1), t = m, r[s.name].group = m, a++;
+        const m = n.get(i), d = `${i}(${m})`;
+        n.set(i, m + 1), t = d, r[s.name].group = d, o++;
       }
-      o = i;
+      a = i;
     }
   }
-  return a;
-}, $r = (e, r = {}) => {
-  const { includeEmpty: n = !0 } = r, o = [];
-  let t = null, a = [], s = 0;
-  for (const u of e) {
-    const m = u.group || null;
-    m !== t ? ((a.length > 0 || n) && (a.length === 0 && s++, o.push({ name: t, fields: a })), t = m, a = [u]) : a.push(u);
+  return o;
+}, Or = (e, r = {}) => {
+  const { includeEmpty: n = !0 } = r, a = [];
+  let t = null, o = [], s = 0;
+  for (const m of e) {
+    const d = m.group || null;
+    d !== t ? ((o.length > 0 || n) && (o.length === 0 && s++, a.push({ name: t, fields: o })), t = d, o = [m]) : o.push(m);
   }
-  (a.length > 0 || n) && (a.length === 0 && s++, o.push({ name: t, fields: a }));
-  const i = Math.max(0, ...o.map((u) => u.fields.length));
+  (o.length > 0 || n) && (o.length === 0 && s++, a.push({ name: t, fields: o }));
+  const i = Math.max(0, ...a.map((m) => m.fields.length));
   return {
-    groups: o,
+    groups: a,
     metadata: {
-      totalGroups: o.length,
+      totalGroups: a.length,
       emptyGroups: s,
       largestGroup: i
     }
   };
-}, ke = /* @__PURE__ */ new Map(), ye = /* @__PURE__ */ new Map(), se = /* @__PURE__ */ new Set(), Ae = /* @__PURE__ */ new Map(), Vr = async (e) => {
+}, ke = /* @__PURE__ */ new Map(), ye = /* @__PURE__ */ new Map(), ie = /* @__PURE__ */ new Set(), Ae = /* @__PURE__ */ new Map(), Dr = async (e) => {
   try {
     let r;
     switch (e.toLowerCase()) {
@@ -1455,7 +1458,7 @@ const Or = (e, r) => {
       error: `Failed to load common translations for ${e}: ${r}`
     };
   }
-}, Dr = async (e) => {
+}, Vr = async (e) => {
   if (!e)
     return { success: !1, translations: {}, error: "Language is required" };
   const r = e.toLowerCase();
@@ -1467,7 +1470,7 @@ const Or = (e, r) => {
       translations: ke.get(r) || {},
       fromCache: !0
     };
-  const n = await Vr(r);
+  const n = await Dr(r);
   return n.success && (ke.set(r, n.translations), Ae.set(r, {
     loadedAt: /* @__PURE__ */ new Date(),
     size: Object.keys(n.translations).length,
@@ -1481,7 +1484,7 @@ const Or = (e, r) => {
       error: "Both language and localizeName are required"
     };
   const n = `${e.toLowerCase()}/${r}`;
-  if (se.has(n))
+  if (ie.has(n))
     return {
       success: !1,
       translations: {},
@@ -1495,11 +1498,11 @@ const Or = (e, r) => {
       fromCache: !0
     };
   try {
-    let o = r;
-    !r.includes("/") && !r.includes(".") && (o = `/locales/${e}/${r}.json`);
-    const t = await fetch(o);
+    let a = r;
+    !r.includes("/") && !r.includes(".") && (a = `/locales/${e}/${r}.json`);
+    const t = await fetch(a);
     if (!t.ok) {
-      const m = `HTTP ${t.status}: ${t.statusText}`;
+      const d = `HTTP ${t.status}: ${t.statusText}`;
       return t.status === 404 ? (ye.set(n, {}), Ae.set(n, {
         loadedAt: /* @__PURE__ */ new Date(),
         size: 0,
@@ -1508,62 +1511,62 @@ const Or = (e, r) => {
         success: !0,
         translations: {},
         fromCache: !1
-      }) : (se.add(n), {
+      }) : (ie.add(n), {
         success: !1,
         translations: {},
-        error: m
+        error: d
       });
     }
-    const a = t.headers.get("content-type") || "";
-    !a.includes("application/json") && !a.includes("text/json") && sr() && console.warn(
-      `Translation file at ${o} has unexpected content-type: ${a}`
+    const o = t.headers.get("content-type") || "";
+    !o.includes("application/json") && !o.includes("text/json") && sr() && console.warn(
+      `Translation file at ${a} has unexpected content-type: ${o}`
     );
     const s = await t.text();
     if (!s) {
-      const m = "Empty translation file";
-      return se.add(n), { success: !1, translations: {}, error: m };
+      const d = "Empty translation file";
+      return ie.add(n), { success: !1, translations: {}, error: d };
     }
     let i;
     try {
       i = JSON.parse(s);
-    } catch (m) {
-      const l = `Invalid JSON in translation file: ${m instanceof Error ? m.message : String(m)}`;
-      return se.add(n), { success: !1, translations: {}, error: l };
+    } catch (d) {
+      const l = `Invalid JSON in translation file: ${d instanceof Error ? d.message : String(d)}`;
+      return ie.add(n), { success: !1, translations: {}, error: l };
     }
     if (!i || typeof i != "object") {
-      const m = "Invalid translation file format";
-      return se.add(n), {
+      const d = "Invalid translation file format";
+      return ie.add(n), {
         success: !1,
         translations: {},
-        error: m
+        error: d
       };
     }
-    const u = Object.fromEntries(
-      Object.entries(i).map(([m, l]) => [
-        m,
+    const m = Object.fromEntries(
+      Object.entries(i).map(([d, l]) => [
+        d,
         typeof l == "string" ? l : String(l)
       ])
     );
-    if (!u || typeof u != "object") {
-      const m = "Invalid translation file format";
-      return se.add(n), {
+    if (!m || typeof m != "object") {
+      const d = "Invalid translation file format";
+      return ie.add(n), {
         success: !1,
         translations: {},
-        error: m
+        error: d
       };
     }
-    return ye.set(n, u), Ae.set(n, {
+    return ye.set(n, m), Ae.set(n, {
       loadedAt: /* @__PURE__ */ new Date(),
-      size: Object.keys(u).length,
+      size: Object.keys(m).length,
       source: "user"
     }), {
       success: !0,
-      translations: u,
+      translations: m,
       fromCache: !1
     };
-  } catch (o) {
-    const t = `Failed to load user translations: ${o instanceof Error ? o.message : "Unknown error"}`;
-    return se.add(n), {
+  } catch (a) {
+    const t = `Failed to load user translations: ${a instanceof Error ? a.message : "Unknown error"}`;
+    return ie.add(n), {
       success: !1,
       translations: {},
       error: t
@@ -1579,23 +1582,23 @@ function sr() {
   return !1;
 }
 function Tr(e, r) {
-  return r.length === 0 ? e : e.replace(/\{\{(\d+)\}\}/g, (n, o) => {
-    const t = parseInt(o, 10) - 1, a = r[t];
-    if (a == null)
+  return r.length === 0 ? e : e.replace(/\{\{(\d+)\}\}/g, (n, a) => {
+    const t = parseInt(a, 10) - 1, o = r[t];
+    if (o == null)
       return n;
     try {
-      return String(a);
+      return String(o);
     } catch {
       return n;
     }
   });
 }
-const Lr = (e, r, n) => (o, ...t) => {
-  let a = o, s = !1;
-  return !o || typeof o != "string" ? String(o || "") : (e.toLowerCase() === "en" ? (a = o, s = !0) : Object.prototype.hasOwnProperty.call(n, o) ? (a = n[o], s = !0) : Object.prototype.hasOwnProperty.call(r, o) ? (a = r[o], s = !0) : a = o, a = Tr(a, t), !s && sr() && console.debug(
-    `Missing translation for "${o}" in language "${e}"`
-  ), a);
-}, De = {
+const Lr = (e, r, n) => (a, ...t) => {
+  let o = a, s = !1;
+  return !a || typeof a != "string" ? String(a || "") : (e.toLowerCase() === "en" ? (o = a, s = !0) : Object.prototype.hasOwnProperty.call(n, a) ? (o = n[a], s = !0) : Object.prototype.hasOwnProperty.call(r, a) ? (o = r[a], s = !0) : o = a, o = Tr(o, t), !s && sr() && console.debug(
+    `Missing translation for "${a}" in language "${e}"`
+  ), o);
+}, 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"],
@@ -1713,74 +1716,76 @@ const Lr = (e, r, n) => (o, ...t) => {
     rev: 1 / 360
   }
 }, Le = {}, Pr = /* @__PURE__ */ new Set([
-  ...Object.keys(De),
+  ...Object.keys(Ve),
   ...Object.keys(ze),
   ...Object.keys(Te)
 ]);
 for (const e of Pr) {
-  const r = {}, n = De[e] ?? [], o = ze[e] ?? {}, t = Te[e] ?? {};
-  for (const a of n) {
-    const s = o[a];
-    r[a] = {
-      name: typeof s == "string" ? s : String(a),
-      shortName: a,
-      factor: Object.prototype.hasOwnProperty.call(t, a) ? t[a] : void 0
+  const r = {}, n = Ve[e] ?? [], a = ze[e] ?? {}, t = Te[e] ?? {};
+  for (const o of n) {
+    const s = a[o];
+    r[o] = {
+      name: typeof s == "string" ? s : String(o),
+      shortName: o,
+      factor: Object.prototype.hasOwnProperty.call(t, o) ? t[o] : void 0
     };
   }
-  for (const [a, s] of Object.entries(o))
-    if (!r[a]) {
-      const i = typeof s == "string" ? s : String(a);
-      r[a] = { name: i, shortName: a, factor: Object.prototype.hasOwnProperty.call(t, a) ? t[a] : void 0 };
+  for (const [o, s] of Object.entries(a))
+    if (!r[o]) {
+      const i = typeof s == "string" ? s : String(o);
+      r[o] = { name: i, shortName: o, factor: Object.prototype.hasOwnProperty.call(t, o) ? t[o] : void 0 };
     }
-  for (const [a, s] of Object.entries(t))
-    r[a] || (r[a] = { name: String(a), shortName: String(a), factor: s });
+  for (const [o, s] of Object.entries(t))
+    r[o] || (r[o] = { name: String(o), shortName: String(o), factor: s });
   Le[e] = r;
 }
-const on = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const an = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   dimensionUnitDisplayMap: ze,
-  dimensionUnitsMap: De,
+  dimensionUnitsMap: Ve,
   dimensonUnitFactorsMap: Te,
   unitsByDimension: Le
 }, Symbol.toStringTag, { value: "Module" })), _r = ({
   field: e,
   value: r,
   onChange: n,
-  onError: o
+  onError: a
 }) => {
-  const { definitionName: t, t: a } = T(), s = k(o);
-  C(() => {
-    s.current = o;
-  }, [o]), C(() => {
-    const l = Y(t, e, r ?? !1, a);
-    s.current?.(l ?? null);
-  }, [r, e, t, a]);
-  const i = (l) => {
-    const p = l.target.checked;
-    n?.(p, null);
-  }, u = (l) => {
-    (l.key === " " || l.key === "Spacebar" || l.key === "Space" || l.key === "Enter") && (l.preventDefault(), n?.(!r, null));
-  }, m = e.name;
-  return /* @__PURE__ */ g.jsx(W, { field: e, rightAlign: !1, children: /* @__PURE__ */ g.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }, children: [
+  const { definitionName: t, t: o } = L(), s = E(a);
+  k(() => {
+    s.current = a;
+  }, [a]), k(() => {
+    const u = H(t, e, r ?? !1, o);
+    s.current?.(u ?? null);
+  }, [r, e, t, o]);
+  const i = (u) => {
+    const c = u.target.checked;
+    n?.(c, null);
+  }, m = (u) => {
+    (u.key === " " || u.key === "Spacebar" || u.key === "Space" || u.key === "Enter") && (u.preventDefault(), n?.(!r, null));
+  }, d = e.name, l = H(t, e, r ?? !1, o);
+  return /* @__PURE__ */ g.jsx(U, { field: e, rightAlign: !1, children: /* @__PURE__ */ g.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }, children: [
     /* @__PURE__ */ g.jsx(
       "label",
       {
-        className: $.label,
-        htmlFor: m,
+        className: M.label,
+        htmlFor: d,
         style: { textAlign: "left", justifyContent: "flex-start" },
-        children: a(e.displayName)
+        children: o(e.displayName)
       }
     ),
     /* @__PURE__ */ g.jsx(
       "input",
       {
-        id: m,
+        id: d,
         "data-testid": "boolean-checkbox",
         type: "checkbox",
         checked: !!r,
         onChange: i,
-        onKeyDown: u,
+        onKeyDown: m,
         "aria-checked": !!r,
+        "aria-invalid": !!l,
+        "aria-describedby": l ? `${e.name}-error` : void 0,
         style: {
           cursor: "pointer",
           margin: "8px 0 8px 0",
@@ -1825,45 +1830,47 @@ function qr(e) {
 function cr(e) {
   return e ? (e = e.toLowerCase(), /^#([a-f0-9]){3}$/i.test(e) ? "#" + e.slice(1).split("").map((r) => r + r).join("") : e) : "#000000";
 }
-const Br = ({ field: e, value: r, onChange: n, onError: o }) => {
-  const { t, definitionName: a } = T(), [s, i] = D("#000000"), u = N.useRef(null), m = N.useRef(null), l = N.useRef(o);
-  N.useEffect(() => {
-    l.current = o;
-  }, [o]), C(() => {
-    const x = r && ir(r) ? r : "#000000", v = cr(x);
-    i(v);
-  }, [r]), N.useEffect(() => {
-    const x = Y(a, e, r ?? "#000000", t);
+const Br = ({ field: e, value: r, onChange: n, onError: a }) => {
+  const { t, definitionName: o } = L(), [s, i] = V("#000000"), m = F.useRef(null), d = F.useRef(null), l = F.useRef(a);
+  F.useEffect(() => {
+    l.current = a;
+  }, [a]), k(() => {
+    const x = r && ir(r) ? r : "#000000", j = cr(x);
+    i(j);
+  }, [r]), F.useEffect(() => {
+    const x = H(o, e, r ?? "#000000", t);
     l.current?.(x ?? null);
-  }, [r, e, a, t]);
-  const p = (x) => {
-    const v = x.target.value;
-    i(v), n?.(v, null);
-  }, c = (x) => {
-    const v = x.target.value;
-    i(v), n?.(v, null);
-  }, d = Ge.find(
+  }, [r, e, o, t]);
+  const u = H(o, e, r ?? "#000000", t), c = (x) => {
+    const j = x.target.value;
+    i(j), n?.(j, null);
+  }, p = (x) => {
+    const j = x.target.value;
+    i(j), n?.(j, null);
+  }, b = Ge.find(
     (x) => x.value === s
-  ), { r: b, g: f, b: y } = qr(s) || { r: 0, g: 0, b: 0 };
-  return /* @__PURE__ */ g.jsx(W, { field: e, error: null, children: /* @__PURE__ */ g.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", width: "100%" }, children: [
+  ), { r: f, g: y, b: C } = qr(s) || { r: 0, g: 0, b: 0 };
+  return /* @__PURE__ */ g.jsx(U, { field: e, error: u, children: /* @__PURE__ */ g.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", width: "100%" }, children: [
     /* @__PURE__ */ g.jsxs(
       "select",
       {
-        ref: u,
+        ref: m,
         id: e.name,
         value: s,
-        onChange: p,
+        onChange: c,
         style: { minWidth: "120px", flex: 1 },
-        className: K($.input, $.inputSelect),
+        className: G(M.input, M.inputSelect),
+        "aria-invalid": !!u,
+        "aria-describedby": u ? `${e.name}-error` : void 0,
         children: [
           Ge.map((x) => /* @__PURE__ */ g.jsx("option", { value: x.value, children: t(x.label) }, x.value)),
-          d ? null : /* @__PURE__ */ g.jsxs("option", { value: s, children: [
+          b ? null : /* @__PURE__ */ g.jsxs("option", { value: s, children: [
             "(",
-            b,
-            ", ",
             f,
             ", ",
             y,
+            ", ",
+            C,
             ")"
           ] }, s)
         ]
@@ -1886,10 +1893,11 @@ const Br = ({ field: e, value: r, onChange: n, onError: o }) => {
         children: /* @__PURE__ */ g.jsx(
           "input",
           {
-            ref: m,
+            ref: d,
+            id: `${e.name}-color`,
             type: "color",
             value: s,
-            onChange: c,
+            onChange: p,
             style: {
               opacity: 0,
               width: "100%",
@@ -1897,7 +1905,9 @@ const Br = ({ field: e, value: r, onChange: n, onError: o }) => {
               border: "none",
               padding: 0,
               cursor: "pointer"
-            }
+            },
+            "aria-invalid": !!u,
+            "aria-describedby": u ? `${e.name}-error` : void 0
           }
         )
       }
@@ -1913,21 +1923,21 @@ const Br = ({ field: e, value: r, onChange: n, onError: o }) => {
     return ge(e) ? e : "";
   const n = ge(e);
   if (n) {
-    const o = n.getFullYear(), t = String(n.getMonth() + 1).padStart(2, "0"), a = String(n.getDate()).padStart(2, "0");
-    return `${o}-${t}-${a}`;
+    const a = n.getFullYear(), t = String(n.getMonth() + 1).padStart(2, "0"), o = String(n.getDate()).padStart(2, "0");
+    return `${a}-${t}-${o}`;
   }
   return "";
 }, Ur = ({
   field: e,
   value: r,
   onChange: n,
-  onError: o
+  onError: a
 }) => {
-  const { t, definitionName: a } = T(), { name: s, required: i } = e, u = k(null), m = k(o);
-  C(() => {
-    m.current = o;
-  }, [o]);
-  const l = N.useCallback((c) => {
+  const { t, definitionName: o } = L(), { name: s, required: i } = e, m = E(null), d = E(a);
+  k(() => {
+    d.current = a;
+  }, [a]);
+  const l = F.useCallback((c) => {
     if (!c || c.trim() === "")
       return i ? t("Value required") : null;
     if (c) {
@@ -1944,22 +1954,22 @@ const Br = ({ field: e, value: r, onChange: n, onError: o }) => {
           return t("Date must be on or before {{1}}", e.maxDate);
       }
     }
-    return Y(a, e, c, t) ?? null;
-  }, [e, a, t, i]), p = (c) => {
-    const d = c.target.value, b = l(d);
-    n?.(d, b);
+    return H(o, e, c, t) ?? null;
+  }, [e, o, t, i]), u = (c) => {
+    const p = c.target.value, b = l(p);
+    n?.(p, b);
   };
-  return C(() => {
+  return k(() => {
     const c = l(r);
-    c !== u.current && (u.current = c, m.current?.(c ?? null));
-  }, [r, l]), /* @__PURE__ */ g.jsx(W, { field: e, error: l(r), children: /* @__PURE__ */ g.jsx(
+    c !== m.current && (m.current = c, d.current?.(c ?? null));
+  }, [r, l]), /* @__PURE__ */ g.jsx(U, { field: e, error: l(r), children: /* @__PURE__ */ g.jsx(
     "input",
     {
       id: s,
       type: "date",
       value: Hr(r),
-      onChange: p,
-      className: K($.input, $.textInput),
+      onChange: u,
+      className: G(M.input, M.textInput),
       ...e.minDate ? { min: e.minDate } : {},
       ...e.maxDate ? { max: e.maxDate } : {},
       "aria-invalid": !!l(r),
@@ -1970,37 +1980,40 @@ const Br = ({ field: e, value: r, onChange: n, onError: o }) => {
   field: e,
   value: r,
   onChange: n,
-  onError: o
+  onError: a
 }) => {
-  const { t, definitionName: a } = T(), s = k(null), i = k(o);
-  C(() => {
-    i.current = o;
-  }, [o]);
-  const u = Z(
-    (l) => l === "" || l === null || l === void 0 ? t("Value required") : !e.options || e.options.length === 0 ? null : e.options.some((c) => c.value === l) ? Y(a, e, l, t) ?? null : t("Invalid option selected"),
-    [e, t, a]
+  const { t, definitionName: o } = L(), s = E(null), i = E(a);
+  k(() => {
+    i.current = a;
+  }, [a]);
+  const m = X(
+    (l) => l === "" || l === null || l === void 0 ? t("Value required") : !e.options || e.options.length === 0 ? null : e.options.some((c) => c.value === l) ? H(o, e, l, t) ?? null : t("Invalid option selected"),
+    [e, t, o]
   );
-  C(() => {
-    const l = r != null ? String(r) : "", p = u(l);
-    if (p && e.options && e.options.length > 0) {
+  k(() => {
+    const l = r != null ? String(r) : "", u = m(l);
+    if (u && e.options && e.options.length > 0) {
       const c = String(e.options[0].value);
       s.current && (s.current.value = c), n?.(c, null), i.current?.(null);
     } else
-      s.current && (s.current.value = l), i.current?.(p ?? null);
-  }, [r, u, n, e.options]);
-  const m = (l) => {
-    const p = l.target.value, c = u(p);
-    n?.(p, c);
+      s.current && (s.current.value = l), i.current?.(u ?? null);
+  }, [r, m, n, e.options]);
+  const d = (l) => {
+    const u = l.target.value, c = m(u);
+    n?.(u, c);
   };
-  return /* @__PURE__ */ g.jsx(W, { field: e, error: u(String(r ?? "")), children: /* @__PURE__ */ g.jsx(
+  return /* @__PURE__ */ g.jsx(U, { field: e, error: m(String(r ?? "")), children: /* @__PURE__ */ g.jsx(
     "select",
     {
+      id: e.name,
+      "aria-invalid": !!m(String(r ?? "")),
+      "aria-describedby": m(String(r ?? "")) ? `${e.name}-error` : void 0,
       defaultValue: String(r ?? ""),
       ref: s,
-      onChange: m,
-      className: K(
-        $.input,
-        $.inputSelect
+      onChange: d,
+      className: G(
+        M.input,
+        M.inputSelect
       ),
       children: (e.options ?? []).map((l) => /* @__PURE__ */ g.jsx("option", { value: String(l.value), children: t(l.label) }, String(l.value)))
     }
@@ -2013,40 +2026,42 @@ const Jr = ({
   field: e,
   value: r,
   onChange: n,
-  onError: o
+  onError: a
 }) => {
-  const { definitionName: t, t: a } = T(), s = k(null), i = N.useCallback(
-    (p) => {
-      const c = p.trim();
-      return c === "" ? e.required ? a("Value required") : null : Yr(c) ? e.pattern && !new RegExp(e.pattern).test(c) ? a("Email does not match pattern: {{%1}}", {
+  const { definitionName: t, t: o } = L(), s = E(null), i = F.useCallback(
+    (u) => {
+      const c = u.trim();
+      return c === "" ? e.required ? o("Value required") : null : Yr(c) ? e.pattern && !new RegExp(e.pattern).test(c) ? e.patternErrorMessage ? o(e.patternErrorMessage) : o("Email does not match pattern: {{%1}}", {
         "%1": `${e.pattern}`
-      }) : Y(t, e, p, a) ?? null : a("Must be valid email format");
+      }) : H(t, e, u, o) ?? null : o("Must be valid email format");
     },
-    [e, t, a]
-  ), u = (p) => {
-    const c = p.target.value, d = i(c);
-    n?.(c, d);
-  }, m = k(null), l = k(o);
-  return C(() => {
-    l.current = o;
-  }, [o]), C(() => {
-    const p = r ?? "", c = i(p);
-    s.current && s.current.value !== String(p) && (s.current.value = String(p)), c !== m.current && (m.current = c, l.current?.(c ?? null));
-  }, [r, i]), /* @__PURE__ */ g.jsx(W, { field: e, error: i(String(r ?? "")), children: /* @__PURE__ */ g.jsx(
+    [e, t, o]
+  ), m = (u) => {
+    const c = u.target.value, p = i(c);
+    n?.(c, p);
+  }, d = E(null), l = E(a);
+  return k(() => {
+    l.current = a;
+  }, [a]), k(() => {
+    const u = r ?? "", c = i(u);
+    s.current && s.current.value !== String(u) && (s.current.value = String(u)), c !== d.current && (d.current = c, l.current?.(c ?? null));
+  }, [r, i]), /* @__PURE__ */ g.jsx(U, { field: e, error: i(String(r ?? "")), children: /* @__PURE__ */ g.jsx(
     "input",
     {
       id: e.name,
       type: "email",
       defaultValue: String(r ?? ""),
       ref: s,
-      onChange: u,
-      className: K($.input, $.textInput)
+      onChange: m,
+      className: G(M.input, M.textInput),
+      "aria-invalid": !!i(String(r ?? "")),
+      "aria-describedby": i(String(r ?? "")) ? `${e.name}-error` : void 0
     }
   ) });
 }, Gr = ({ field: e }) => {
-  const { darkMode: r } = T(), {
+  const { darkMode: r } = L(), {
     color: n = r ? "#444444" : "#CCCCCC",
-    thickness: o = 1,
+    thickness: a = 1,
     margin: t = "8px 0"
   } = e;
   return /* @__PURE__ */ g.jsx(
@@ -2056,63 +2071,63 @@ const Jr = ({
         width: "auto",
         height: "0",
         // ensures only 1 line
-        borderTop: `${o}px solid ${n}`,
+        borderTop: `${a}px solid ${n}`,
         margin: t
       }
     }
   );
-}, Kr = ({ field: e, value: r, onChange: n, onError: o }) => {
-  const { t, definitionName: a } = T(), [s, i] = D(!1), u = k(null), m = k(o);
-  C(() => {
-    m.current = o;
-  }, [o]);
-  const l = N.useCallback(
-    (v) => e.required && (!v || Array.isArray(v) && v.length === 0) ? t("Value required") : Y(a, e, v, t) ?? null,
-    [e, a, t]
-  ), p = N.useMemo(() => l(r), [r, l]);
-  C(() => {
-    const v = l(r);
-    n?.(r, v), m.current?.(v ?? null);
+}, Kr = ({ field: e, value: r, onChange: n, onError: a }) => {
+  const { t, definitionName: o } = L(), [s, i] = V(!1), m = E(null), d = E(a);
+  k(() => {
+    d.current = a;
+  }, [a]);
+  const l = F.useCallback(
+    (x) => e.required && (!x || Array.isArray(x) && x.length === 0) ? t("Value required") : H(o, e, x, t) ?? null,
+    [e, o, t]
+  ), u = F.useMemo(() => l(r), [r, l]);
+  k(() => {
+    const x = l(r);
+    n?.(r, x), d.current?.(x ?? null);
   }, [r, l]);
-  const c = (v) => {
-    const F = v.target.files;
-    let R = null;
-    if (F && F.length > 0) {
-      const j = Array.from(F);
-      e.multiple ? R = [...Array.isArray(r) ? r : [], ...j] : R = j[0];
+  const c = (x) => {
+    const j = x.target.files;
+    let N = null;
+    if (j && j.length > 0) {
+      const w = Array.from(j);
+      e.multiple ? N = [...Array.isArray(r) ? r : [], ...w] : N = w[0];
     }
-    const w = l(R);
-    n?.(R, w);
-  }, d = (v) => {
-    v.preventDefault(), v.stopPropagation(), i(!1);
-    const F = v.dataTransfer.files;
-    if (F && F.length > 0) {
-      const R = Array.from(F);
-      let w = null;
-      e.multiple ? w = [...Array.isArray(r) ? r : [], ...R] : w = R[0];
-      const j = l(w);
-      n?.(w, j);
+    const v = l(N);
+    n?.(N, v);
+  }, p = (x) => {
+    x.preventDefault(), x.stopPropagation(), i(!1);
+    const j = x.dataTransfer.files;
+    if (j && j.length > 0) {
+      const N = Array.from(j);
+      let v = null;
+      e.multiple ? v = [...Array.isArray(r) ? r : [], ...N] : v = N[0];
+      const w = l(v);
+      n?.(v, w);
     }
-  }, b = (v) => {
-    v.preventDefault(), v.stopPropagation(), i(!0);
-  }, f = (v) => {
-    v.preventDefault(), v.stopPropagation(), i(!1);
-  }, y = (v) => {
-    if (Array.isArray(r) && typeof v == "number") {
-      const F = r.filter((j, I) => I !== v), R = F.length > 0 ? F : null, w = l(R);
-      n?.(R, w);
+  }, b = (x) => {
+    x.preventDefault(), x.stopPropagation(), i(!0);
+  }, f = (x) => {
+    x.preventDefault(), x.stopPropagation(), i(!1);
+  }, y = (x) => {
+    if (Array.isArray(r) && typeof x == "number") {
+      const j = r.filter((w, I) => I !== x), N = j.length > 0 ? j : null, v = l(N);
+      n?.(N, v);
     } else {
-      const F = l(null);
-      n?.(null, F);
+      const j = l(null);
+      n?.(null, j);
     }
-  }, x = () => {
-    const v = Array.isArray(r) ? r : r ? [r] : [];
-    return v.length === 0 ? null : /* @__PURE__ */ g.jsx("div", { style: {
+  }, C = () => {
+    const x = Array.isArray(r) ? r : r ? [r] : [];
+    return x.length === 0 ? null : /* @__PURE__ */ g.jsx("div", { style: {
       marginTop: "8px",
       display: "flex",
       flexDirection: "column",
       gap: "6px"
-    }, children: v.map((F, R) => /* @__PURE__ */ g.jsxs(
+    }, children: x.map((j, N) => /* @__PURE__ */ g.jsxs(
       "div",
       {
         style: {
@@ -2133,12 +2148,12 @@ const Jr = ({
             overflow: "hidden",
             textOverflow: "ellipsis",
             whiteSpace: "nowrap"
-          }, children: F.name }),
+          }, children: j.name }),
           /* @__PURE__ */ g.jsx(
             "button",
             {
               type: "button",
-              onClick: () => y(Array.isArray(r) ? R : void 0),
+              onClick: () => y(Array.isArray(r) ? N : void 0),
               "aria-label": t("Remove file"),
               style: {
                 background: "transparent",
@@ -2152,30 +2167,30 @@ const Jr = ({
                 transition: "background-color 0.2s",
                 flexShrink: 0
               },
-              onMouseEnter: (w) => {
-                w.currentTarget.style.backgroundColor = "var(--reactaform-bg-hover, #fee)";
+              onMouseEnter: (v) => {
+                v.currentTarget.style.backgroundColor = "var(--reactaform-bg-hover, #fee)";
               },
-              onMouseLeave: (w) => {
-                w.currentTarget.style.backgroundColor = "transparent";
+              onMouseLeave: (v) => {
+                v.currentTarget.style.backgroundColor = "transparent";
               },
               children: "×"
             }
           )
         ]
       },
-      `${F.name}-${R}`
+      `${j.name}-${N}`
     )) });
   };
-  return /* @__PURE__ */ g.jsx(W, { field: e, error: p, children: /* @__PURE__ */ g.jsxs("div", { style: { width: "100%" }, children: [
+  return /* @__PURE__ */ g.jsx(U, { field: e, error: u, children: /* @__PURE__ */ g.jsxs("div", { style: { width: "100%" }, children: [
     /* @__PURE__ */ g.jsxs(
       "div",
       {
-        onDrop: d,
+        onDrop: p,
         onDragOver: b,
         onDragLeave: f,
         style: {
           position: "relative",
-          border: `1px dashed ${s ? "var(--reactaform-color-primary, #2563eb)" : p ? "var(--reactaform-color-error, #ef4444)" : "var(--reactaform-border-color, #d1d5db)"}`,
+          border: `1px dashed ${s ? "var(--reactaform-color-primary, #2563eb)" : u ? "var(--reactaform-color-error, #ef4444)" : "var(--reactaform-border-color, #d1d5db)"}`,
           borderRadius: "var(--reactaform-border-radius, 4px)",
           padding: "8px 12px",
           textAlign: "center",
@@ -2192,13 +2207,20 @@ const Jr = ({
           justifyContent: "center",
           gap: "8px"
         },
-        onClick: () => u.current?.click(),
+        onClick: () => m.current?.click(),
+        onKeyDown: (x) => {
+          (x.key === "Enter" || x.key === " ") && (x.preventDefault(), m.current?.click());
+        },
+        role: "button",
+        "aria-label": e.multiple ? t("Choose Files or Drag & Drop") : t("Choose File or Drag & Drop"),
+        "aria-invalid": !!u,
+        "aria-describedby": u ? `${e.name}-error` : void 0,
         children: [
           /* @__PURE__ */ g.jsx(
             "input",
             {
               id: e.name,
-              ref: u,
+              ref: m,
               type: "file",
               accept: e.accept,
               multiple: e.multiple,
@@ -2232,7 +2254,7 @@ const Jr = ({
         ]
       }
     ),
-    x()
+    C()
   ] }) });
 }, Xr = /^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][-+]?\d+)?$/;
 function Zr(e) {
@@ -2242,22 +2264,22 @@ const Qr = (e) => !e || e.trim() === "" ? [] : e.split(",").map((r) => r.trim())
   field: e,
   value: r,
   onChange: n,
-  onError: o
+  onError: a
 }) => {
-  const { t, definitionName: a } = T(), [s, i] = D(
+  const { t, definitionName: o } = L(), [s, i] = V(
     Array.isArray(r) ? r.join(", ") : String(r ?? "")
-  ), u = N.useCallback(
+  ), m = F.useCallback(
     (c) => {
       if (c.trim() === "")
         return e.required ? t("Value required") : null;
       if (!Zr(c))
         return t("Each value must be a valid float");
-      const d = Qr(c);
-      if (e.minCount !== void 0 && d.length < e.minCount)
+      const p = Qr(c);
+      if (e.minCount !== void 0 && p.length < e.minCount)
         return t("Minimum number of values: {{1}}", e.minCount);
-      if (e.maxCount !== void 0 && d.length > e.maxCount)
+      if (e.maxCount !== void 0 && p.length > e.maxCount)
         return t("Maximum number of values: {{1}}", e.maxCount);
-      for (const f of d) {
+      for (const f of p) {
         if (e.min !== void 0 && (e.minInclusive ? f < e.min : f <= e.min))
           return t(
             "Each value must be {{1}} {{2}}",
@@ -2271,26 +2293,29 @@ const Qr = (e) => !e || e.trim() === "" ? [] : e.split(",").map((r) => r.trim())
             e.max
           );
       }
-      return Y(a, e, d, t) ?? null;
+      return H(o, e, p, t) ?? null;
     },
-    [a, e, t]
-  ), m = (c) => {
-    const d = c.target.value, b = u(d);
-    i(d), n?.(d, b);
-  }, l = k(null), p = k(o);
-  return C(() => {
-    p.current = o;
-  }, [o]), C(() => {
-    const c = Array.isArray(r) ? r.join(", ") : String(r ?? ""), d = u(c);
-    d !== l.current && (l.current = d, p.current?.(d ?? null));
-  }, [r, e.required, u, t]), /* @__PURE__ */ g.jsx(W, { field: e, error: u(s), children: /* @__PURE__ */ g.jsx(
+    [o, e, t]
+  ), d = (c) => {
+    const p = c.target.value, b = m(p);
+    i(p), n?.(p, b);
+  }, l = E(null), u = E(a);
+  return k(() => {
+    u.current = a;
+  }, [a]), k(() => {
+    const c = Array.isArray(r) ? r.join(", ") : String(r ?? ""), p = m(c);
+    p !== l.current && (l.current = p, u.current?.(p ?? null));
+  }, [r, e.required, m, t]), /* @__PURE__ */ g.jsx(U, { field: e, error: m(s), children: /* @__PURE__ */ g.jsx(
     "input",
     {
+      id: e.name,
       type: "text",
       value: s,
-      onChange: m,
-      className: K($.input, $.textInput),
-      style: { flex: 1 }
+      onChange: d,
+      className: G(M.input, M.textInput),
+      style: { flex: 1 },
+      "aria-invalid": !!m(s),
+      "aria-describedby": m(s) ? `${e.name}-error` : void 0
     }
   ) });
 }, rt = /^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][-+]?\d+)?$/, tt = (e) => {
@@ -2300,15 +2325,15 @@ const Qr = (e) => !e || e.trim() === "" ? [] : e.split(",").map((r) => r.trim())
   field: e,
   value: r,
   onChange: n,
-  onError: o
+  onError: a
 }) => {
-  const { t, definitionName: a } = T(), s = k(null), i = N.useCallback(
-    (p) => {
-      if (p.trim() === "")
+  const { t, definitionName: o } = L(), s = E(null), i = F.useCallback(
+    (u) => {
+      if (u.trim() === "")
         return e.required ? t("Value required") : null;
-      if (!rt.test(p))
+      if (!rt.test(u))
         return t("Must be a valid float");
-      const c = tt(p);
+      const c = tt(u);
       return c === null ? t("Must be a valid float") : e.min !== void 0 && (e.minInclusive ? c < e.min : c <= e.min) ? t(
         "Must be {{1}} {{2}}",
         e.minInclusive ? "≥" : ">",
@@ -2317,21 +2342,21 @@ const Qr = (e) => !e || e.trim() === "" ? [] : e.split(",").map((r) => r.trim())
         "Must be {{1}} {{2}}",
         e.maxInclusive ? "≤" : "<",
         e.max
-      ) : Y(a, e, c, t) ?? null;
+      ) : H(o, e, c, t) ?? null;
     },
-    [e, a, t]
-  ), u = k(null), m = k(o);
-  C(() => {
-    m.current = o;
-  }, [o]), C(() => {
-    const p = String(r ?? ""), c = i(p);
-    c !== u.current && (u.current = c, m.current?.(c ?? null)), s.current && document.activeElement !== s.current && (s.current.value = p);
+    [e, o, t]
+  ), m = E(null), d = E(a);
+  k(() => {
+    d.current = a;
+  }, [a]), k(() => {
+    const u = String(r ?? ""), c = i(u);
+    c !== m.current && (m.current = c, d.current?.(c ?? null)), s.current && document.activeElement !== s.current && (s.current.value = u);
   }, [r, e, i, t]);
-  const l = (p) => {
-    const c = p.target.value, d = i(c);
-    n?.(c, d);
+  const l = (u) => {
+    const c = u.target.value, p = i(c);
+    n?.(c, p);
   };
-  return /* @__PURE__ */ g.jsx(W, { field: e, error: i(String(r ?? "")), children: /* @__PURE__ */ g.jsx(
+  return /* @__PURE__ */ g.jsx(U, { field: e, error: i(String(r ?? "")), children: /* @__PURE__ */ g.jsx(
     "input",
     {
       id: e.name,
@@ -2339,14 +2364,16 @@ const Qr = (e) => !e || e.trim() === "" ? [] : e.split(",").map((r) => r.trim())
       defaultValue: String(r ?? ""),
       ref: s,
       onChange: l,
-      className: K(
-        $.input,
-        $.inputNumber
-      )
+      className: G(
+        M.input,
+        M.inputNumber
+      ),
+      "aria-invalid": !!i(String(r ?? "")),
+      "aria-describedby": i(String(r ?? "")) ? `${e.name}-error` : void 0
     }
   ) });
 };
-function ot() {
+function at() {
   try {
     return "/";
   } catch {
@@ -2358,59 +2385,59 @@ function ot() {
   }
   return "/";
 }
-const at = ({ field: e, value: r }) => {
-  const { language: n, t: o } = T(), t = e.alignment || "center", a = {
+const ot = ({ field: e, value: r }) => {
+  const { language: n, t: a } = L(), t = e.alignment || "center", o = {
     left: "flex-start",
     center: "center",
     right: "flex-end"
   }, s = typeof r == "string" ? r : "";
   let i = s && s.trim() !== "" ? s : typeof e.defaultValue == "string" ? e.defaultValue : "";
-  i && !i.startsWith("/") && (i = `${ot()}${i}`);
-  const u = e.localized?.split(";").map((y) => y.trim()), [m, l] = D(i || ""), p = k(i || null);
-  if (C(() => {
+  i && !i.startsWith("/") && (i = `${at()}${i}`);
+  const m = e.localized?.split(";").map((y) => y.trim()), [d, l] = V(i || ""), u = E(i || null);
+  if (k(() => {
     if (!i) return;
-    const y = i.split("/"), x = y.pop(), v = x.lastIndexOf(".");
-    if (v === -1) return;
-    const F = x.substring(0, v), R = x.substring(v);
-    let w = null;
-    u?.includes(n) && (w = `${F}_${n}${R}`);
-    const j = new AbortController();
-    if (w) {
-      const I = [...y, w].join("/");
-      fetch(I, { method: "HEAD", signal: j.signal }).then((S) => {
-        const A = S.ok ? I : i;
-        A !== p.current && (p.current = A, l(A));
+    const y = i.split("/"), C = y.pop(), x = C.lastIndexOf(".");
+    if (x === -1) return;
+    const j = C.substring(0, x), N = C.substring(x);
+    let v = null;
+    m?.includes(n) && (v = `${j}_${n}${N}`);
+    const w = new AbortController();
+    if (v) {
+      const I = [...y, v].join("/");
+      fetch(I, { method: "HEAD", signal: w.signal }).then((A) => {
+        const R = A.ok ? I : i;
+        R !== u.current && (u.current = R, l(R));
       }).catch(() => {
-        i !== p.current && (p.current = i, l(i));
+        i !== u.current && (u.current = i, l(i));
       });
     } else {
       const I = i;
-      I !== p.current && (p.current = I, requestAnimationFrame(() => l(I)));
+      I !== u.current && (u.current = I, requestAnimationFrame(() => l(I)));
     }
     return () => {
-      j.abort();
+      w.abort();
     };
-  }, [i, n, u]), !m) return null;
-  const { width: c, height: d } = e, b = {}, f = {
+  }, [i, n, m]), !d) return null;
+  const { width: c, height: p } = e, b = {}, f = {
     borderRadius: "8px",
     objectFit: "contain",
     boxShadow: "0 2px 6px rgba(0,0,0,0.1)",
     margin: "0 0 8px 0"
   };
-  return c && d ? (b.width = c, b.height = d, f.width = `${c}px`, f.height = `${d}px`) : c && !d ? (b.width = c, f.width = `${c}px`, f.height = "auto") : !c && d && (b.height = d, f.width = "auto", f.height = `${d}px`), /* @__PURE__ */ g.jsx(W, { field: e, children: /* @__PURE__ */ g.jsx(
+  return c && p ? (b.width = c, b.height = p, f.width = `${c}px`, f.height = `${p}px`) : c && !p ? (b.width = c, f.width = `${c}px`, f.height = "auto") : !c && p && (b.height = p, f.width = "auto", f.height = `${p}px`), /* @__PURE__ */ g.jsx(U, { field: e, children: /* @__PURE__ */ g.jsx(
     "div",
     {
       "data-testid": "image-wrapper",
       style: {
         display: "flex",
-        justifyContent: a[t] || "center",
+        justifyContent: o[t] || "center",
         margin: "0 0"
       },
       children: /* @__PURE__ */ g.jsx(
         "img",
         {
-          src: m,
-          alt: o?.(e.displayName || "Image") || e.displayName || "Image",
+          src: d,
+          alt: a?.(e.displayName || "Image") || e.displayName || "Image",
           ...b,
           style: f
         }
@@ -2426,22 +2453,22 @@ const it = ({
   field: e,
   value: r,
   onChange: n,
-  onError: o
+  onError: a
 }) => {
-  const { t, definitionName: a } = T(), s = ",", [i, u] = D(
+  const { t, definitionName: o } = L(), s = ",", [i, m] = V(
     Array.isArray(r) ? r.join(s + " ") : String(r ?? "")
-  ), m = (b) => !b || b.trim() === "" ? [] : b.split(s).map((f) => f.trim()).filter(Boolean).map((f) => Number(f)), l = N.useCallback(
-    (b) => {
-      if (b.trim() === "")
+  ), d = (f) => !f || f.trim() === "" ? [] : f.split(s).map((y) => y.trim()).filter(Boolean).map((y) => Number(y)), l = F.useCallback(
+    (f) => {
+      if (f.trim() === "")
         return e.required ? t("Value required") : null;
-      if (!st(b))
+      if (!st(f))
         return t("Each value must be a valid integer");
-      const f = m(b);
-      if (e.minCount !== void 0 && f.length < e.minCount)
+      const y = d(f);
+      if (e.minCount !== void 0 && y.length < e.minCount)
         return t("Minimum number of values: {{1}}", `${e.minCount}`);
-      if (e.maxCount !== void 0 && f.length > e.maxCount)
+      if (e.maxCount !== void 0 && y.length > e.maxCount)
         return t("Maximum number of values: {{1}}", `${e.maxCount}`);
-      for (const x of f) {
+      for (const x of y) {
         if (e.min !== void 0 && (e.minInclusive ? x < e.min : x <= e.min))
           return t(
             "Each value must be {{1}} {{2}}",
@@ -2455,28 +2482,33 @@ const it = ({
             e.max
           );
       }
-      return Y(a, e, f, t) ?? null;
+      return H(o, e, y, t) ?? null;
     },
-    [a, e, t]
-  ), p = (b) => {
-    const f = b.target.value, y = l(f);
-    u(f), n?.(f, y);
-  }, c = k(null), d = k(
-    o
+    [o, e, t]
+  ), u = (f) => {
+    const y = f.target.value, C = l(y);
+    m(y), n?.(y, C);
+  }, c = E(null), p = E(
+    a
   );
-  return C(() => {
-    d.current = o;
-  }, [o]), C(() => {
-    const b = Array.isArray(r) ? r.join(s + " ") : String(r ?? ""), f = l(b);
-    f !== c.current && (c.current = f, d.current?.(f ?? null));
-  }, [r, e.required, l, t]), /* @__PURE__ */ g.jsx(W, { field: e, error: l(i), children: /* @__PURE__ */ g.jsx(
+  k(() => {
+    p.current = a;
+  }, [a]), k(() => {
+    const f = Array.isArray(r) ? r.join(s + " ") : String(r ?? ""), y = l(f);
+    y !== c.current && (c.current = y, p.current?.(y ?? null));
+  }, [r, e.required, l, t]);
+  const b = l(i);
+  return /* @__PURE__ */ g.jsx(U, { field: e, error: b, children: /* @__PURE__ */ g.jsx(
     "input",
     {
+      id: e.name,
       type: "text",
       value: i,
-      onChange: p,
-      className: K($.input, $.textInput),
-      style: { flex: 1 }
+      onChange: u,
+      className: G(M.input, M.textInput),
+      style: { flex: 1 },
+      "aria-invalid": !!b,
+      "aria-describedby": b ? `${e.name}-error` : void 0
     }
   ) });
 };
@@ -2487,135 +2519,145 @@ const lt = ({
   field: e,
   value: r,
   onChange: n,
-  onError: o
+  onError: a
 }) => {
-  const { t, definitionName: a } = T(), s = k(null), i = Z((c) => {
-    const d = parseInt(c, 10);
-    return Number.isNaN(d) ? null : d;
-  }, []), u = N.useCallback(
-    (c) => {
-      if (c.trim() === "")
+  const { t, definitionName: o } = L(), s = E(null), i = X((p) => {
+    const b = parseInt(p, 10);
+    return Number.isNaN(b) ? null : b;
+  }, []), m = F.useCallback(
+    (p) => {
+      if (p.trim() === "")
         return e.required ? t("Value required") : null;
-      if (!ct(c))
+      if (!ct(p))
         return t("Must be a valid integer");
-      const d = i(c);
-      if (d === null) return t("Must be a valid integer");
-      if (e.min !== void 0 && (e.minInclusive ? d < e.min : d <= e.min))
+      const b = i(p);
+      if (b === null) return t("Must be a valid integer");
+      if (e.min !== void 0 && (e.minInclusive ? b < e.min : b <= e.min))
         return t(
           "Must be {{1}} {{2}}",
           e.minInclusive ? "≥" : ">",
           e.min
         );
-      if (e.max !== void 0 && (e.maxInclusive ? d > e.max : d >= e.max))
+      if (e.max !== void 0 && (e.maxInclusive ? b > e.max : b >= e.max))
         return t(
           "Must be {{1}} {{2}}",
           e.maxInclusive ? "≤" : "<",
           e.max
         );
       if (e.step !== void 0) {
-        const f = Number(e.step);
-        if (!Number.isInteger(f))
+        const y = Number(e.step);
+        if (!Number.isInteger(y))
           return t("Invalid step value");
-        if (d % f !== 0)
-          return t("Must be a multiple of {{1}}", f);
+        if (b % y !== 0)
+          return t("Must be a multiple of {{1}}", y);
       }
-      return Y(a, e, d, t) ?? null;
+      return H(o, e, b, t) ?? null;
     },
-    [e, a, t, i]
-  ), m = k(null), l = k(o);
-  C(() => {
-    l.current = o;
-  }, [o]), C(() => {
-    const c = String(r ?? ""), d = u(c);
-    d !== m.current && (m.current = d, l.current?.(d ?? null)), s.current && document.activeElement !== s.current && (s.current.value = c);
-  }, [r, e, u, t]);
-  const p = (c) => {
-    const d = c.target.value, b = u(d);
-    n?.(d, b);
-  };
-  return /* @__PURE__ */ g.jsx(W, { field: e, error: u(String(r ?? "")), children: /* @__PURE__ */ g.jsx(
+    [e, o, t, i]
+  ), d = E(null), l = E(a);
+  k(() => {
+    l.current = a;
+  }, [a]), k(() => {
+    const p = String(r ?? ""), b = m(p);
+    b !== d.current && (d.current = b, l.current?.(b ?? null)), s.current && document.activeElement !== s.current && (s.current.value = p);
+  }, [r, e, m, t]);
+  const u = (p) => {
+    const b = p.target.value, f = m(b);
+    n?.(b, f);
+  }, c = m(String(r ?? ""));
+  return /* @__PURE__ */ g.jsx(U, { field: e, error: c, children: /* @__PURE__ */ g.jsx(
     "input",
     {
       id: e.name,
       type: "text",
       defaultValue: String(r ?? ""),
       ref: s,
-      onChange: p,
-      className: K(
-        $.input,
-        $.inputNumber
-      )
+      onChange: u,
+      className: G(
+        M.input,
+        M.inputNumber
+      ),
+      "aria-invalid": !!c,
+      "aria-describedby": c ? `${e.name}-error` : void 0
     }
   ) });
 }, ut = ({
   field: e,
   value: r,
   onChange: n,
-  onError: o
+  onError: a
 }) => {
-  const { t, definitionName: a } = T(), s = e.minHeight ?? "80px", i = N.useRef(null), u = N.useRef(null), m = N.useRef(
-    o
+  const { t, definitionName: o } = L(), s = e.minHeight ?? "80px", i = F.useRef(null), m = F.useRef(null), d = F.useRef(
+    a
   );
-  N.useEffect(() => {
-    m.current = o;
-  }, [o]);
-  const l = N.useCallback(
-    (d) => d.trim() === "" ? e.required ? t("Value required") : null : e.minLength !== void 0 && d.length < e.minLength ? t("Must be at least {{1}} characters", e.minLength) : e.maxLength !== void 0 && d.length > e.maxLength ? t("Must be at most {{1}} characters", e.maxLength) : Y(a, e, d, t),
-    [e, a, t]
-  ), p = (d) => {
-    const b = d.target.value, f = l(b);
-    n?.(b, f);
+  F.useEffect(() => {
+    d.current = a;
+  }, [a]);
+  const l = F.useCallback(
+    (b) => b.trim() === "" ? e.required ? t("Value required") : null : e.minLength !== void 0 && b.length < e.minLength ? t("Must be at least {{1}} characters", e.minLength) : e.maxLength !== void 0 && b.length > e.maxLength ? t("Must be at most {{1}} characters", e.maxLength) : H(o, e, b, t),
+    [e, o, t]
+  ), u = (b) => {
+    const f = b.target.value, y = l(f);
+    n?.(f, y);
   };
-  C(() => {
-    const d = l(r);
-    d !== u.current && (u.current = d, m.current?.(d ?? null)), i.current && i.current.value !== String(r ?? "") && (i.current.value = String(r ?? ""));
+  k(() => {
+    const b = l(r);
+    b !== m.current && (m.current = b, d.current?.(b ?? null)), i.current && i.current.value !== String(r ?? "") && (i.current.value = String(r ?? ""));
   }, [r, l]);
   const c = {
+    id: e.name,
     defaultValue: String(r ?? ""),
     ref: i,
-    onChange: p,
+    onChange: u,
     style: {
       resize: "vertical",
       minHeight: s,
       width: "100%",
       boxSizing: "border-box"
     },
-    className: K($.input, $.textInput)
-  };
-  return /* @__PURE__ */ g.jsx(W, { field: e, error: l(r), children: /* @__PURE__ */ g.jsx("textarea", { ...c }) });
+    className: G(M.input, M.textInput)
+  }, p = l(r);
+  return /* @__PURE__ */ g.jsx(U, { field: e, error: p, children: /* @__PURE__ */ g.jsx(
+    "textarea",
+    {
+      ...c,
+      "aria-invalid": !!p,
+      "aria-describedby": p ? `${e.name}-error` : void 0
+    }
+  ) });
 }, mt = ({
   field: e,
   value: r,
   onChange: n,
-  onError: o
+  onError: a
 }) => {
-  const t = k(o);
-  C(() => {
-    t.current = o;
-  }, [o]);
-  const { t: a, darkMode: s, formStyle: i, fieldStyle: u, definitionName: m } = T(), l = (S, A, M) => {
-    if (!A) return {};
-    const L = S?.[A];
-    return (M && L ? L[M] : void 0) ?? {};
-  }, p = k(null), [c, d] = D(!1), [b, f] = D(
+  const t = E(a);
+  k(() => {
+    t.current = a;
+  }, [a]);
+  const { t: o, darkMode: s, formStyle: i, fieldStyle: m, definitionName: d } = L(), l = (R, $, O) => {
+    if (!$) return {};
+    const W = R?.[$];
+    return (O && W ? W[O] : void 0) ?? {};
+  }, u = E(null), [c, p] = V(!1), [b, f] = V(
     null
-  ), y = G(
-    () => e.options.map((S) => ({ value: S.value, label: a(S.label) })),
-    [e.options, a]
-  ), x = G(() => {
-    const S = Array.isArray(r) ? r : [], A = new Set(y.map((M) => M.value));
-    return S.filter((M) => A.has(M));
-  }, [r, y]), v = (S) => {
-    const A = Array.isArray(S) ? S : [];
-    return e.required && A.length === 0 ? a("Value required") : Y(m, e, A, a) ?? null;
-  }, F = () => {
-    if (!p.current) return;
-    const S = p.current.getBoundingClientRect();
-    f({ x: S.left, y: S.bottom }), d((A) => !A);
-  }, R = (S) => {
-    const A = x.includes(S) ? x.filter((z) => z !== S) : [...x, S], M = v(A);
-    t.current?.(M ?? null), n?.(A, M);
-  }, w = G(() => ({
+  ), y = J(
+    () => e.options.map((R) => ({ value: R.value, label: o(R.label) })),
+    [e.options, o]
+  ), C = J(() => {
+    const R = Array.isArray(r) ? r : [], $ = new Set(y.map((O) => O.value));
+    return R.filter((O) => $.has(O));
+  }, [r, y]), x = (R) => {
+    const $ = Array.isArray(R) ? R : [];
+    return e.required && $.length === 0 ? o("Value required") : H(d, e, $, o) ?? null;
+  }, j = () => {
+    if (!u.current) return;
+    const R = u.current.getBoundingClientRect();
+    f({ x: R.left, y: R.bottom }), p(($) => !$);
+  }, N = (R) => {
+    const $ = C.includes(R) ? C.filter((P) => P !== R) : [...C, R], O = x($);
+    t.current?.(O ?? null), n?.($, O);
+  }, v = J(() => ({
     height: "var(--reactaform-input-height, 2.5rem)",
     padding: "var(--reactaform-input-padding, 8px)",
     display: "flex",
@@ -2628,8 +2670,8 @@ const lt = ({
     background: "var(--reactaform-secondary-bg, #fff)",
     color: "var(--reactaform-text-color, #000)",
     ...l(i, "multiSelect", "control"),
-    ...l(u, void 0, "control")
-  }), [i, u]), j = G(() => ({
+    ...l(m, void 0, "control")
+  }), [i, m]), w = J(() => ({
     position: "absolute",
     right: "1.5em",
     top: "50%",
@@ -2641,8 +2683,8 @@ const lt = ({
     color: "var(--reactaform-text-muted, #999)",
     padding: 0,
     ...l(i, "multiSelect", "clearButton"),
-    ...l(u, void 0, "clearButton")
-  }), [i, u]), I = G(() => ({
+    ...l(m, void 0, "clearButton")
+  }), [i, m]), I = J(() => ({
     position: "absolute",
     right: "0.7em",
     top: "50%",
@@ -2651,46 +2693,42 @@ const lt = ({
     fontSize: "0.8em",
     color: "var(--reactaform-text-muted, #999)",
     ...l(i, "multiSelect", "arrow"),
-    ...l(u, void 0, "arrow")
-  }), [i, u]);
+    ...l(m, void 0, "arrow")
+  }), [i, m]), A = x(Array.isArray(r) ? r : []);
   return /* @__PURE__ */ g.jsxs("div", { children: [
-    /* @__PURE__ */ g.jsx(W, { field: e, error: null, children: /* @__PURE__ */ g.jsx("div", { style: { width: "100%" }, children: /* @__PURE__ */ g.jsxs(
+    /* @__PURE__ */ g.jsx(U, { field: e, error: null, children: /* @__PURE__ */ g.jsx("div", { style: { width: "100%" }, children: /* @__PURE__ */ g.jsxs(
       "div",
       {
-        ref: p,
+        ref: u,
         className: "reactaform-multiselection-control",
-        style: w,
-        onClick: F,
+        style: v,
+        onClick: j,
         tabIndex: 0,
         role: "button",
         "aria-haspopup": "listbox",
         "aria-expanded": c,
-        onKeyDown: (S) => {
-          (S.key === "Enter" || S.key === " ") && (S.preventDefault(), F());
+        "aria-invalid": !!A,
+        "aria-describedby": A ? `${e.name}-error` : void 0,
+        onKeyDown: (R) => {
+          (R.key === "Enter" || R.key === " ") && (R.preventDefault(), j());
         },
         children: [
-          /* @__PURE__ */ g.jsxs(
-            "span",
-            {
-              style: { flex: 1, color: "var(--reactaform-text-muted, #888)" },
-              children: [
-                x.length,
-                " / ",
-                y.length,
-                " selected"
-              ]
-            }
-          ),
-          x.length > 0 && /* @__PURE__ */ g.jsx(
+          /* @__PURE__ */ g.jsxs("span", { style: { flex: 1, color: "var(--reactaform-text-muted, #888)" }, children: [
+            C.length,
+            " / ",
+            y.length,
+            " selected"
+          ] }),
+          C.length > 0 && /* @__PURE__ */ g.jsx(
             "button",
             {
               type: "button",
               "aria-label": "Clear selections",
-              onClick: (S) => {
-                S.stopPropagation(), n?.([], null);
+              onClick: (R) => {
+                R.stopPropagation(), n?.([], null);
               },
-              style: j,
-              children: /* @__PURE__ */ g.jsx("span", { style: j, "aria-hidden": !0, children: "✖" })
+              style: w,
+              children: /* @__PURE__ */ g.jsx("span", { style: w, "aria-hidden": !0, children: "✖" })
             }
           ),
           /* @__PURE__ */ g.jsx("span", { style: I, "aria-hidden": !0, children: "▼" })
@@ -2698,32 +2736,32 @@ const lt = ({
       }
     ) }) }),
     c && b && /* @__PURE__ */ g.jsx(
-      ft,
+      dt,
       {
         position: b,
         options: y,
-        selectedValues: x,
-        onToggleOption: R,
-        onClose: () => d(!1),
-        controlRef: p,
+        selectedValues: C,
+        onToggleOption: N,
+        onClose: () => p(!1),
+        controlRef: u,
         darkMode: s
       }
     )
   ] });
-}, ft = ({
+}, dt = ({
   position: e,
   options: r,
   selectedValues: n,
-  onToggleOption: o,
+  onToggleOption: a,
   onClose: t,
-  controlRef: a,
+  controlRef: o,
   darkMode: s
 }) => {
-  const i = k(null), [u, m] = D(-1), { formStyle: l, fieldStyle: p } = T(), c = (j, I, S) => {
+  const i = E(null), [m, d] = V(-1), { formStyle: l, fieldStyle: u } = L(), c = (w, I, A) => {
     if (!I) return {};
-    const M = j?.[I];
-    return (S && M ? M[S] : void 0) ?? {};
-  }, d = G(() => ({
+    const $ = w?.[I];
+    return (A && $ ? $[A] : void 0) ?? {};
+  }, p = J(() => ({
     maxHeight: 200,
     overflowY: "auto",
     background: "var(--reactaform-secondary-bg, #fff)",
@@ -2735,8 +2773,8 @@ const lt = ({
     color: "var(--reactaform-text-color, #000)",
     fontSize: "var(--reactaform-popup-font-size, 0.875rem)",
     ...c(l, "multiSelect", "popup"),
-    ...c(p, void 0, "popup")
-  }), [l, p]), b = G(() => ({
+    ...c(u, void 0, "popup")
+  }), [l, u]), b = J(() => ({
     padding: "6px 8px",
     cursor: "pointer",
     display: "flex",
@@ -2744,111 +2782,111 @@ const lt = ({
     background: "transparent",
     color: "var(--reactaform-text-color, #000)",
     ...c(l, "multiSelect", "option"),
-    ...c(p, void 0, "option")
-  }), [l, p]);
-  C(() => {
-    const j = (I) => {
-      const S = I.target;
-      !i.current?.contains(S) && !a.current?.contains(S) && t();
+    ...c(u, void 0, "option")
+  }), [l, u]);
+  k(() => {
+    const w = (I) => {
+      const A = I.target;
+      !i.current?.contains(A) && !o.current?.contains(A) && t();
     };
-    return document.addEventListener("mousedown", j), () => document.removeEventListener("mousedown", j);
-  }, [t, a]), C(() => {
-    i.current && r.length > 0 && requestAnimationFrame(() => m((j) => j === -1 ? 0 : j));
-  }, [r.length]), C(() => {
-    if (!i.current || u < 0) return;
-    const j = i.current.querySelector(`#multi-opt-${u}`);
-    j && requestAnimationFrame(() => j.focus());
-  }, [u]);
-  const f = 250, y = 200, [x, v] = D(
+    return document.addEventListener("mousedown", w), () => document.removeEventListener("mousedown", w);
+  }, [t, o]), k(() => {
+    i.current && r.length > 0 && requestAnimationFrame(() => d((w) => w === -1 ? 0 : w));
+  }, [r.length]), k(() => {
+    if (!i.current || m < 0) return;
+    const w = i.current.querySelector(`#multi-opt-${m}`);
+    w && requestAnimationFrame(() => w.focus());
+  }, [m]);
+  const f = 250, y = 200, [C, x] = V(
     null
-  ), [F, R] = D(null);
-  if (C(() => {
+  ), [j, N] = V(null);
+  if (k(() => {
     if (typeof window > "u") return;
-    const j = () => {
-      let A = e.x, M = e.y, z = f;
-      const L = a?.current;
-      if (L) {
-        const J = L.getBoundingClientRect();
-        A = J.left, M = J.bottom, z = Math.max(80, Math.round(J.width));
+    const w = () => {
+      let R = e.x, $ = e.y, O = f;
+      const P = o?.current;
+      if (P) {
+        const W = P.getBoundingClientRect();
+        R = W.left, $ = W.bottom, O = Math.max(80, Math.round(W.width));
       }
-      A = Math.min(A, window.innerWidth - z), M = Math.min(M, window.innerHeight - y), v({ left: A, top: M }), R(z);
+      R = Math.min(R, window.innerWidth - O), $ = Math.min($, window.innerHeight - y), x({ left: R, top: $ }), N(O);
     };
-    j(), window.addEventListener("scroll", j, !0), window.addEventListener("resize", j);
+    w(), window.addEventListener("scroll", w, !0), window.addEventListener("resize", w);
     let I = null;
-    const S = a?.current;
-    return typeof ResizeObserver < "u" && S && (I = new ResizeObserver(() => j()), I.observe(S)), () => {
-      window.removeEventListener("scroll", j, !0), window.removeEventListener("resize", j), I && S && I.unobserve(S);
+    const A = o?.current;
+    return typeof ResizeObserver < "u" && A && (I = new ResizeObserver(() => w()), I.observe(A)), () => {
+      window.removeEventListener("scroll", w, !0), window.removeEventListener("resize", w), I && A && I.unobserve(A);
     };
-  }, [a, e.x, e.y]), typeof window > "u") return null;
-  let w = document.getElementById("popup-root");
-  return w || (w = document.createElement("div"), w.id = "popup-root", document.body.appendChild(w)), Me.createPortal(
+  }, [o, e.x, e.y]), typeof window > "u") return null;
+  let v = document.getElementById("popup-root");
+  return v || (v = document.createElement("div"), v.id = "popup-root", document.body.appendChild(v)), $e.createPortal(
     /* @__PURE__ */ g.jsx(
       "div",
       {
         ref: i,
         role: "listbox",
-        "aria-activedescendant": u >= 0 ? `multi-opt-${u}` : void 0,
+        "aria-activedescendant": m >= 0 ? `multi-opt-${m}` : void 0,
         style: {
           position: "absolute",
-          top: x ? x.top : e.y,
-          left: x ? x.left : e.x,
-          width: F ?? f,
+          top: C ? C.top : e.y,
+          left: C ? C.left : e.x,
+          width: j ?? f,
           // spread the static popup styles
-          ...d
+          ...p
         },
         "data-reactaform-theme": s ? "dark" : "light",
-        children: r.map((j, I) => {
-          const S = n.includes(j.value), A = s ? "var(--reactaform-hover-bg, rgba(255,255,255,0.01))" : "var(--reactaform-hover-bg, #eee)", M = {
+        children: r.map((w, I) => {
+          const A = n.includes(w.value), R = s ? "var(--reactaform-hover-bg, rgba(255,255,255,0.01))" : "var(--reactaform-hover-bg, #eee)", $ = {
             ...b,
-            background: I === u ? A : b.background
+            background: I === m ? R : b.background
           };
           return /* @__PURE__ */ g.jsxs(
             "div",
             {
               id: `multi-opt-${I}`,
-              onMouseDown: (z) => {
-                z.stopPropagation(), o(j.value);
+              onMouseDown: (O) => {
+                O.stopPropagation(), a(w.value);
               },
-              onKeyDown: (z) => {
-                const L = r.length;
-                switch (z.key) {
+              onKeyDown: (O) => {
+                const P = r.length;
+                switch (O.key) {
                   case "ArrowDown":
-                    z.preventDefault(), m((J) => (J + 1) % L);
+                    O.preventDefault(), d((W) => (W + 1) % P);
                     break;
                   case "ArrowUp":
-                    z.preventDefault(), m((J) => (J - 1 + L) % L);
+                    O.preventDefault(), d((W) => (W - 1 + P) % P);
                     break;
                   case "Home":
-                    z.preventDefault(), m(0);
+                    O.preventDefault(), d(0);
                     break;
                   case "End":
-                    z.preventDefault(), m(L - 1);
+                    O.preventDefault(), d(P - 1);
                     break;
                   case "Enter":
                   case " ":
-                    z.preventDefault(), z.stopPropagation(), o(j.value);
+                    O.preventDefault(), O.stopPropagation(), a(w.value);
                     break;
                   case "Escape":
-                    z.preventDefault(), t(), a?.current?.focus();
+                    O.preventDefault(), t(), o?.current?.focus();
                     break;
                 }
               },
-              tabIndex: I === u ? 0 : -1,
+              tabIndex: I === m ? 0 : -1,
               role: "option",
-              "aria-selected": S,
-              style: M,
-              onMouseEnter: (z) => {
-                z.currentTarget.style.background = A, m(I);
+              "aria-selected": A,
+              style: $,
+              onMouseEnter: (O) => {
+                O.currentTarget.style.background = R, d(I);
               },
-              onMouseLeave: (z) => {
-                z.currentTarget.style.background = "transparent", m((L) => L === I ? -1 : L);
+              onMouseLeave: (O) => {
+                O.currentTarget.style.background = "transparent", d((P) => P === I ? -1 : P);
               },
               children: [
                 /* @__PURE__ */ g.jsx(
                   "input",
                   {
                     type: "checkbox",
-                    checked: S,
+                    checked: A,
                     readOnly: !0,
                     style: {
                       marginRight: 8,
@@ -2860,44 +2898,44 @@ const lt = ({
                     }
                   }
                 ),
-                j.label
+                w.label
               ]
             },
-            j.value
+            w.value
           );
         })
       }
     ),
-    w
+    v
   );
-}, dt = ({
+}, ft = ({
   field: e,
   value: r,
   onChange: n,
-  onError: o
+  onError: a
 }) => {
-  const { t, definitionName: a } = T(), s = N.useRef(null), i = e.min ?? void 0, u = e.max ?? void 0, m = Math.max(1, Math.round(e.step ?? 1)), l = Z(
-    (f) => isNaN(f) ? t("Must be a valid integer") : Number.isInteger(f) ? i !== void 0 && f < i ? t("Must be �?{{1}}", i) : u !== void 0 && f > u ? t("Must be �?{{1}}", u) : Y(a, e, f, t) ?? null : t("Must be an integer"),
-    [a, e, t, i, u]
-  ), p = k(null), c = k(
-    o
+  const { t, definitionName: o } = L(), s = F.useRef(null), i = e.min ?? void 0, m = e.max ?? void 0, d = Math.max(1, Math.round(e.step ?? 1)), l = X(
+    (y) => isNaN(y) ? t("Must be a valid integer") : Number.isInteger(y) ? i !== void 0 && y < i ? t("Must be �?{{1}}", i) : m !== void 0 && y > m ? t("Must be �?{{1}}", m) : H(o, e, y, t) ?? null : t("Must be an integer"),
+    [o, e, t, i, m]
+  ), u = E(null), c = E(
+    a
   );
-  C(() => {
-    c.current = o;
-  }, [o]), C(() => {
+  k(() => {
+    c.current = a;
+  }, [a]), k(() => {
     if (document.activeElement === s.current) return;
-    const y = String(r), x = l(r);
-    s.current && (s.current.value = y), x !== p.current && (p.current = x, c.current?.(x ?? null));
+    const C = String(r), x = l(r);
+    s.current && (s.current.value = C), x !== u.current && (u.current = x, c.current?.(x ?? null));
   }, [r, l]);
-  const d = (f) => {
-    if (f.trim() === "") return e.required ? t("Value required") : null;
-    const x = Number(f);
+  const p = (y) => {
+    if (y.trim() === "") return e.required ? t("Value required") : null;
+    const x = Number(y);
     return l(x);
-  }, b = (f) => {
-    const y = f.target.value, x = f.target.valueAsNumber, v = d(y);
-    n?.(x, v);
-  };
-  return /* @__PURE__ */ g.jsx(W, { field: e, error: d(String(r ?? "")), children: /* @__PURE__ */ g.jsx(
+  }, b = (y) => {
+    const C = y.target.value, x = y.target.valueAsNumber, j = p(C);
+    n?.(x, j);
+  }, f = p(String(r ?? ""));
+  return /* @__PURE__ */ g.jsx(U, { field: e, error: f, children: /* @__PURE__ */ g.jsx(
     "input",
     {
       ref: s,
@@ -2905,108 +2943,129 @@ const lt = ({
       type: "number",
       defaultValue: String(r ?? ""),
       min: i,
-      max: u,
-      step: m,
+      max: m,
+      step: d,
       onChange: b,
       style: { width: "100%", height: "100%" },
-      className: $.input
+      className: M.input,
+      "aria-invalid": !!f,
+      "aria-describedby": f ? `${e.name}-error` : void 0
     }
   ) });
 }, pt = ({
   field: e,
   value: r,
   onChange: n,
-  onError: o
+  onError: a
 }) => {
-  const { t } = T(), a = N.useRef(null), { definitionName: s } = T(), i = Z(
-    (p) => {
-      const c = String(p ?? "").trim();
+  const { t } = L(), o = F.useRef(null), { definitionName: s } = L(), i = X(
+    (u) => {
+      const c = String(u ?? "").trim();
       if (c === "")
         return e.required ? t("Value required") : null;
       if (e.pattern)
         try {
           if (!new RegExp(e.pattern).test(c))
-            return t(
+            return e.patternErrorMessage ? t(e.patternErrorMessage) : t(
               "Phone number does not match pattern: {{1}}",
               `${e.pattern}`
             );
         } catch {
         }
-      return Y(s, e, c, t);
+      return H(s, e, c, t);
     },
     [s, e, t]
-  ), u = k(null), m = k(o);
-  C(() => {
-    m.current = o;
-  }, [o]), C(() => {
-    const p = String(r ?? ""), c = i(p);
-    a.current && a.current.value !== String(p) && (a.current.value = String(p)), c !== u.current && (u.current = c, m.current?.(c ?? null));
+  ), m = E(null), d = E(a);
+  k(() => {
+    d.current = a;
+  }, [a]), k(() => {
+    const u = String(r ?? ""), c = i(u);
+    o.current && o.current.value !== String(u) && (o.current.value = String(u)), c !== m.current && (m.current = c, d.current?.(c ?? null));
   }, [r, i]);
-  const l = (p) => {
-    const c = p.target.value, d = c.trim();
+  const l = (u) => {
+    const c = u.target.value, p = c.trim();
     let b = null;
-    if (d === "") {
+    if (p === "") {
       b = e.required ? t("Value required") : null, n?.(c, b);
       return;
     }
-    !b && e.pattern && !new RegExp(e.pattern).test(d) && (b = t("Phone number does not match pattern: {{1}}", `${e.pattern}`)), n?.(c, b);
+    b || (b = i(c)), n?.(c, b);
   };
-  return /* @__PURE__ */ g.jsx(W, { field: e, error: i(String(r ?? "")), children: /* @__PURE__ */ g.jsx(
+  return /* @__PURE__ */ g.jsx(U, { field: e, error: i(String(r ?? "")), children: /* @__PURE__ */ g.jsx(
     "input",
     {
+      id: e.name,
       type: "tel",
       defaultValue: String(r ?? ""),
-      ref: a,
+      ref: o,
       onChange: l,
-      className: K($.input, $.textInput)
+      className: G(M.input, M.textInput),
+      "aria-invalid": !!i(String(r ?? "")),
+      "aria-describedby": i(String(r ?? "")) ? `${e.name}-error` : void 0
     }
   ) });
-}, gt = ({ field: e, value: r, onChange: n, onError: o }) => {
-  const { t, definitionName: a } = T(), s = e.layout?.toLowerCase() === "horizontal" ? "row" : "column", i = k(null), u = k(o);
-  C(() => {
-    u.current = o;
-  }, [o]);
-  const m = Z(
-    (p) => p === "" || p === null || p === void 0 ? t("Value required") : !e.options || e.options.length === 0 ? null : e.options.some((d) => d.value === p) ? Y(a, e, p, t) ?? null : t("Invalid option selected"),
-    [e, t, a]
+}, gt = ({
+  field: e,
+  value: r,
+  onChange: n,
+  onError: a
+}) => {
+  const { t, definitionName: o } = L(), s = e.layout?.toLowerCase() === "horizontal" ? "row" : "column", i = E(null), m = E(a);
+  k(() => {
+    m.current = a;
+  }, [a]);
+  const d = X(
+    (u) => u === "" || u === null || u === void 0 ? t("Value required") : !e.options || e.options.length === 0 ? null : e.options.some((p) => p.value === u) ? H(o, e, u, t) ?? null : t("Invalid option selected"),
+    [e, t, o]
   );
-  C(() => {
-    const p = r != null ? String(r) : "", c = m(p);
-    if (u.current?.(c ?? null), i.current) {
-      const d = Array.from(
+  k(() => {
+    const u = r != null ? String(r) : "", c = d(u);
+    if (m.current?.(c ?? null), i.current) {
+      const p = Array.from(
         i.current.querySelectorAll("input[type=radio]")
       );
       if (c && e.options && e.options.length > 0) {
         const b = String(e.options[0].value);
-        d.forEach((f) => f.checked = f.value === b), n?.(b, null);
+        p.forEach((f) => f.checked = f.value === b), n?.(b, null);
       } else
-        d.forEach((b) => b.checked = b.value === p);
+        p.forEach((b) => b.checked = b.value === u);
     }
-  }, [r, m, n, e.options]);
-  const l = (p) => {
-    const c = p.target.value, d = m(c);
-    u.current?.(d ?? null), n?.(c, d);
+  }, [r, d, n, e.options]);
+  const l = (u) => {
+    const c = u.target.value, p = d(c);
+    m.current?.(p ?? null), n?.(c, p);
   };
-  return /* @__PURE__ */ g.jsx(W, { field: e, error: m(String(r ?? "")), children: /* @__PURE__ */ g.jsx(
+  return /* @__PURE__ */ g.jsx(U, { field: e, error: d(String(r ?? "")), children: /* @__PURE__ */ g.jsx(
     "div",
     {
+      className: M.input,
+      role: "radiogroup",
+      "aria-labelledby": `${e.name}-label`,
+      "aria-invalid": !!d(String(r ?? "")),
       style: {
         display: "flex",
         flexDirection: s,
         flexWrap: s === "row" ? "wrap" : "nowrap",
         gap: s === "row" ? "12px" : "4px",
-        alignItems: s === "row" ? "center" : "flex-start",
-        width: "100%"
+        alignItems: s === "row" ? "center" : "stretch",
+        width: "100%",
+        padding: s === "row" ? "8px" : void 0,
+        boxSizing: "border-box"
       },
       ref: i,
-      children: (e.options ?? []).map((p) => /* @__PURE__ */ g.jsxs(
+      children: (e.options ?? []).map((u) => /* @__PURE__ */ g.jsxs(
         "label",
         {
+          className: G(M.label),
           style: {
-            display: "flex",
-            gap: "6px",
+            display: s === "column" ? "flex" : "inline-flex",
+            gap: "8px",
             alignItems: "center",
-            whiteSpace: "nowrap"
+            whiteSpace: "nowrap",
+            marginBottom: s === "column" ? 6 : 0,
+            cursor: "pointer",
+            width: s === "column" ? "100%" : void 0,
+            justifyContent: "flex-start"
           },
           children: [
             /* @__PURE__ */ g.jsx(
@@ -3014,15 +3073,28 @@ const lt = ({
               {
                 type: "radio",
                 name: e.name,
-                value: String(p.value),
-                defaultChecked: String(r ?? "") === String(p.value),
-                onChange: l
+                value: String(u.value),
+                defaultChecked: String(r ?? "") === String(u.value),
+                onChange: l,
+                style: { width: "1.1em", height: "1.1em" }
               }
             ),
-            t(p.label)
+            /* @__PURE__ */ g.jsx(
+              "span",
+              {
+                style: {
+                  userSelect: "none",
+                  textAlign: s === "column" ? "left" : void 0,
+                  flex: s === "column" ? 1 : void 0,
+                  fontWeight: 400
+                  // Use normal font weight for option labels
+                },
+                children: t(u.label)
+              }
+            )
           ]
         },
-        String(p.value)
+        String(u.value)
       ))
     }
   ) });
@@ -3041,74 +3113,101 @@ const lt = ({
   field: e,
   value: r,
   onChange: n,
-  onError: o
+  onError: a
 }) => {
-  const { t, definitionName: a } = T(), [s, i] = D(null), u = e.max || 5, m = Z(
-    (b) => e.required && b === 0 ? t("Value required") : Y(a, e, b, t) ?? null,
-    [e, t, a]
-  ), l = k(null), p = k(o);
-  C(() => {
-    p.current = o;
-  }, [o]), C(() => {
-    let b = r || 0;
-    r < 0 && (b = 0), r > u && (b = u);
-    const f = m(b);
-    f !== l.current && (l.current = f, p.current?.(f ?? null));
-  }, [r, m, u]);
-  const c = (b) => {
-    const f = m(b);
-    n?.(b, f);
-  }, d = (() => {
-    let b = r || 0;
-    return b < 0 && (b = 0), b > u && (b = u), b;
+  const { t, definitionName: o } = L(), [s, i] = V(null), m = E([]), d = e.max || 5, l = X(
+    (f) => e.required && f === 0 ? t("Value required") : H(o, e, f, t) ?? null,
+    [e, t, o]
+  ), u = E(null), c = E(a);
+  k(() => {
+    c.current = a;
+  }, [a]), k(() => {
+    let f = r || 0;
+    r < 0 && (f = 0), r > d && (f = d);
+    const y = l(f);
+    y !== u.current && (u.current = y, c.current?.(y ?? null));
+  }, [r, l, d]);
+  const p = (f) => {
+    const y = l(f);
+    n?.(f, y);
+  }, b = (() => {
+    let f = r || 0;
+    return f < 0 && (f = 0), f > d && (f = d), f;
   })();
-  return /* @__PURE__ */ g.jsx(W, { field: e, error: m(d), children: /* @__PURE__ */ g.jsx("div", { style: ht, children: (() => {
-    const b = e.icon, f = b && String(b).trim() ? String(b) : "★";
-    return [...Array(u)].map((y, x) => {
-      const v = x < d, R = s !== null && x <= s || v ? "gold" : "lightgray";
-      return /* @__PURE__ */ g.jsx(
-        "span",
-        {
-          onClick: () => c(x + 1),
-          onMouseEnter: () => i(x),
-          onMouseLeave: () => i(null),
-          style: { ...bt, color: R },
-          "aria-label": `Rating ${x + 1}`,
-          title: t(`${e.displayName} ${x + 1}`),
-          children: f
-        },
-        x
-      );
-    });
-  })() }) });
+  return /* @__PURE__ */ g.jsx(U, { field: e, error: l(b), children: /* @__PURE__ */ g.jsx(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-labelledby": `${e.name}-label`,
+      style: ht,
+      "aria-invalid": !!l(b),
+      "aria-describedby": l(b) ? `${e.name}-error` : void 0,
+      children: (() => {
+        const f = e.icon, y = f && String(f).trim() ? String(f) : "★";
+        return [...Array(d)].map((C, x) => {
+          const j = x < b, v = s !== null && x <= s || j ? "gold" : "lightgray";
+          return /* @__PURE__ */ g.jsx(
+            "span",
+            {
+              ref: (w) => m.current[x] = w,
+              role: "radio",
+              tabIndex: b > 0 ? x === b - 1 ? 0 : -1 : x === 0 ? 0 : -1,
+              "aria-checked": j,
+              onClick: () => p(x + 1),
+              onKeyDown: (w) => {
+                if (w.key === "Enter" || w.key === " ")
+                  w.preventDefault(), p(x + 1);
+                else if (w.key === "ArrowRight" || w.key === "ArrowUp") {
+                  w.preventDefault();
+                  const I = Math.min(d - 1, x + 1);
+                  m.current[I]?.focus();
+                } else if (w.key === "ArrowLeft" || w.key === "ArrowDown") {
+                  w.preventDefault();
+                  const I = Math.max(0, x - 1);
+                  m.current[I]?.focus();
+                }
+              },
+              onMouseEnter: () => i(x),
+              onMouseLeave: () => i(null),
+              style: { ...bt, color: v },
+              "aria-label": `Rating ${x + 1}`,
+              title: t(`${e.displayName} ${x + 1}`),
+              children: y
+            },
+            x
+          );
+        });
+      })()
+    }
+  ) });
 }, xt = ({
   field: e,
   value: r,
   onChange: n,
-  onError: o
+  onError: a
 }) => {
-  const { t, definitionName: a } = T(), s = N.useRef(null), i = N.useRef(null), u = N.useRef(
-    o
+  const { t, definitionName: o } = L(), s = F.useRef(null), i = F.useRef(null), m = F.useRef(
+    a
   );
-  N.useEffect(() => {
-    u.current = o;
-  }, [o]);
-  const m = G(
+  F.useEffect(() => {
+    m.current = a;
+  }, [a]);
+  const d = J(
     () => e.pattern ? new RegExp(e.pattern) : null,
     [e.pattern]
-  ), l = N.useCallback(
-    (f) => f === "" ? e.required ? t("Value required") : null : e.minLength !== void 0 && f.length < e.minLength ? t("Must be at least {{1}} characters", e.minLength) : e.maxLength !== void 0 && f.length > e.maxLength ? t("Must be at most {{1}} characters", e.maxLength) : m && !m.test(f) ? t("Input does not match pattern: {{1}}", e.pattern) : Y(a, e, f, t),
-    [e, a, t, m]
-  ), p = (f) => {
-    const y = f.target.value, x = l(y);
-    n?.(y, x);
+  ), l = F.useCallback(
+    (f) => f === "" ? e.required ? t("Value required") : null : e.minLength !== void 0 && f.length < e.minLength ? t("Must be at least {{1}} characters", e.minLength) : e.maxLength !== void 0 && f.length > e.maxLength ? t("Must be at most {{1}} characters", e.maxLength) : d && !d.test(f) ? e.patternErrorMessage ? t(e.patternErrorMessage) : t("Input does not match pattern: {{1}}", e.pattern) : H(o, e, f, t),
+    [e, o, t, d]
+  ), u = (f) => {
+    const y = f.target.value, C = l(y);
+    n?.(y, C);
   };
-  C(() => {
+  k(() => {
     const f = l(r ?? "");
-    s.current && s.current.value !== String(r ?? "") && (s.current.value = String(r ?? "")), f !== i.current && (i.current = f, u.current?.(f ?? null));
+    s.current && s.current.value !== String(r ?? "") && (s.current.value = String(r ?? "")), f !== i.current && (i.current = f, m.current?.(f ?? null));
   }, [r, l]);
-  const [c, d] = N.useState(!1), b = () => d((f) => !f);
-  return /* @__PURE__ */ g.jsx(W, { field: e, error: l(String(r ?? "")), children: /* @__PURE__ */ g.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, width: "100%" }, children: [
+  const [c, p] = F.useState(!1), b = () => p((f) => !f);
+  return /* @__PURE__ */ g.jsx(U, { field: e, error: l(String(r ?? "")), children: /* @__PURE__ */ g.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, width: "100%" }, children: [
     /* @__PURE__ */ g.jsx(
       "input",
       {
@@ -3116,9 +3215,11 @@ const lt = ({
         type: c ? "text" : "password",
         defaultValue: String(r ?? ""),
         ref: s,
-        onChange: p,
-        className: K($.input, $.textInput),
-        style: { flex: 1, minWidth: 0 }
+        onChange: u,
+        className: G(M.input, M.textInput),
+        style: { flex: 1, minWidth: 0 },
+        "aria-invalid": !!l(String(r ?? "")),
+        "aria-describedby": l(String(r ?? "")) ? `${e.name}-error` : void 0
       }
     ),
     /* @__PURE__ */ g.jsx(
@@ -3148,9 +3249,9 @@ const St = ({
   field: e,
   value: r,
   onChange: n,
-  onError: o
+  onError: a
 }) => {
-  const { t, definitionName: a } = T(), s = k(null), i = k(null), u = N.useCallback(
+  const { t, definitionName: o } = L(), s = E(null), i = E(null), m = F.useCallback(
     (b) => {
       let f = null;
       if (b.trim() === "")
@@ -3158,45 +3259,49 @@ const St = ({
       if (!wt(b))
         return t("Invalid number");
       const y = Number(b);
-      return typeof e.min == "number" && y < e.min ? t("Value should be at least {{1}}", e.min) : typeof e.max == "number" && y > e.max ? t("Value should be at most {{1}}", e.max) : (f || (f = Y(a, e, y, t)), f);
+      return typeof e.min == "number" && y < e.min ? t("Value should be at least {{1}}", e.min) : typeof e.max == "number" && y > e.max ? t("Value should be at most {{1}}", e.max) : (f || (f = H(o, e, y, t)), f);
     },
-    [a, e, t]
-  ), m = k(null), l = k(o);
-  C(() => {
-    l.current = o;
-  }, [o]), C(() => {
-    const b = String(r), f = u(b);
-    i.current && document.activeElement !== i.current && (i.current.value = isNaN(Number(b)) ? String(e.min ?? 0) : String(Number(b))), s.current && document.activeElement !== s.current && (s.current.value = b), f !== m.current && (m.current = f, l.current?.(f ?? null));
-  }, [r, u, e.min]);
-  const p = e.min ?? 0, c = e.max ?? 100, d = (b) => {
-    const f = b.target.value, y = u(f);
+    [o, e, t]
+  ), d = E(null), l = E(a);
+  k(() => {
+    l.current = a;
+  }, [a]), k(() => {
+    const b = String(r), f = m(b);
+    i.current && document.activeElement !== i.current && (i.current.value = isNaN(Number(b)) ? String(e.min ?? 0) : String(Number(b))), s.current && document.activeElement !== s.current && (s.current.value = b), f !== d.current && (d.current = f, l.current?.(f ?? null));
+  }, [r, m, e.min]);
+  const u = e.min ?? 0, c = e.max ?? 100, p = (b) => {
+    const f = b.target.value, y = m(f);
     n?.(f, y);
   };
-  return /* @__PURE__ */ g.jsx(W, { field: e, error: u(String(r ?? "")), children: /* @__PURE__ */ g.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", width: "100%" }, children: [
+  return /* @__PURE__ */ g.jsx(U, { field: e, error: m(String(r ?? "")), children: /* @__PURE__ */ g.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", width: "100%" }, children: [
     /* @__PURE__ */ g.jsx(
       "input",
       {
         ref: i,
+        id: `${e.name}-range`,
         type: "range",
-        defaultValue: isNaN(Number(r)) ? String(p) : String(Number(r)),
-        onChange: d,
-        min: p,
+        defaultValue: isNaN(Number(r)) ? String(u) : String(Number(r)),
+        onChange: p,
+        min: u,
         max: c,
         style: {
           padding: "0px, 0px",
           // Remove padding to make Chrome browser works fine.
           flex: 1
         },
-        className: $.rangeInput
+        className: M.rangeInput,
+        "aria-invalid": !!m(String(r ?? "")),
+        "aria-describedby": m(String(r ?? "")) ? `${e.name}-error` : void 0
       }
     ),
     /* @__PURE__ */ g.jsx(
       "input",
       {
+        id: e.name,
         ref: s,
         type: "text",
         defaultValue: String(r ?? ""),
-        onChange: d,
+        onChange: p,
         required: !0,
         style: {
           width: "40px",
@@ -3205,7 +3310,9 @@ const St = ({
           textAlign: "center",
           flexShrink: 0
         },
-        className: K($.input, $.textInput)
+        className: G(M.input, M.textInput),
+        "aria-invalid": !!m(String(r ?? "")),
+        "aria-describedby": m(String(r ?? "")) ? `${e.name}-error` : void 0
       }
     )
   ] }) });
@@ -3213,20 +3320,20 @@ const St = ({
   field: e,
   value: r,
   onChange: n,
-  onError: o
+  onError: a
 }) => {
-  const { t, formStyle: a, fieldStyle: s, definitionName: i } = T(), u = a, m = s, l = (w, j, I) => {
-    if (!j) return {};
-    const S = w?.[j];
-    return (I && S ? S[I] : void 0) ?? {};
-  }, p = N.useMemo(() => ({
+  const { t, formStyle: o, fieldStyle: s, definitionName: i } = L(), m = o, d = s, l = (v, w, I) => {
+    if (!w) return {};
+    const A = v?.[w];
+    return (I && A ? A[I] : void 0) ?? {};
+  }, u = F.useMemo(() => ({
     display: "inline-block",
     position: "relative",
     width: 44,
     height: 24,
-    ...l(u, "switch", "label"),
-    ...l(m, void 0, "label")
-  }), [u, m]), c = N.useMemo(() => ({
+    ...l(m, "switch", "label"),
+    ...l(d, void 0, "label")
+  }), [m, d]), c = F.useMemo(() => ({
     position: "absolute",
     opacity: 0,
     top: 0,
@@ -3237,9 +3344,9 @@ const St = ({
     cursor: "pointer",
     pointerEvents: "none",
     // Make hidden input non-interactive to avoid event conflicts
-    ...l(u, "switch", "hiddenInput"),
-    ...l(m, void 0, "hiddenInput")
-  }), [u, m]), d = N.useMemo(() => ({
+    ...l(m, "switch", "hiddenInput"),
+    ...l(d, void 0, "hiddenInput")
+  }), [m, d]), p = F.useMemo(() => ({
     position: "absolute",
     cursor: "pointer",
     top: 0,
@@ -3256,9 +3363,9 @@ const St = ({
     borderWidth: 2,
     borderStyle: "solid",
     borderColor: "transparent",
-    ...l(u, "switch", "slider"),
-    ...l(m, void 0, "slider")
-  }), [u, m]), b = N.useMemo(() => ({
+    ...l(m, "switch", "slider"),
+    ...l(d, void 0, "slider")
+  }), [m, d]), b = F.useMemo(() => ({
     position: "absolute",
     height: 16,
     width: 16,
@@ -3268,30 +3375,30 @@ const St = ({
     transition: "0.3s",
     borderRadius: "50%",
     boxShadow: "0 1px 3px rgba(0, 0, 0, 0.3)",
-    ...l(u, "switch", "knob"),
-    ...l(m, void 0, "knob")
-  }), [u, m]), f = !!r, y = N.useRef(null), x = N.useRef(o), v = N.useCallback((w) => w ? Y(i, e, w, t) ?? null : e.required ? t("Value required") : null, [e, t, i]), F = () => {
-    const w = !f, j = v(w);
-    n?.(w, j);
+    ...l(m, "switch", "knob"),
+    ...l(d, void 0, "knob")
+  }), [m, d]), f = !!r, y = F.useRef(null), C = F.useRef(a), x = F.useCallback((v) => v ? H(i, e, v, t) ?? null : e.required ? t("Value required") : null, [e, t, i]), j = () => {
+    const v = !f, w = x(v);
+    n?.(v, w);
   };
-  N.useEffect(() => {
-    x.current = o;
-  }, [o]), N.useEffect(() => {
-    const w = v(f);
-    w !== y.current && (y.current = w, x.current?.(w ?? null));
-  }, [f, e, v]);
-  const R = e.name;
-  return /* @__PURE__ */ g.jsx(W, { field: e, error: v(f), rightAlign: !1, children: /* @__PURE__ */ g.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }, children: [
+  F.useEffect(() => {
+    C.current = a;
+  }, [a]), F.useEffect(() => {
+    const v = x(f);
+    v !== y.current && (y.current = v, C.current?.(v ?? null));
+  }, [f, e, x]);
+  const N = e.name;
+  return /* @__PURE__ */ g.jsx(U, { field: e, error: x(f), rightAlign: !1, children: /* @__PURE__ */ g.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }, children: [
     /* @__PURE__ */ g.jsx(
       "label",
       {
-        className: $.label,
-        htmlFor: R,
+        className: M.label,
+        htmlFor: N,
         style: { textAlign: "left", justifyContent: "flex-start" },
         children: t(e.displayName)
       }
     ),
-    /* @__PURE__ */ g.jsxs("label", { style: p, children: [
+    /* @__PURE__ */ g.jsxs("label", { style: u, children: [
       /* @__PURE__ */ g.jsx(
         "input",
         {
@@ -3300,6 +3407,8 @@ const St = ({
           checked: f,
           readOnly: !0,
           "aria-label": t(e.displayName),
+          "aria-invalid": !!x(f),
+          "aria-describedby": x(f) ? `${e.name}-error` : void 0,
           style: c,
           tabIndex: -1
         }
@@ -3311,12 +3420,14 @@ const St = ({
           "data-testid": "switch",
           tabIndex: 0,
           "aria-checked": f,
-          onClick: F,
-          onKeyDown: (w) => {
-            (w.key === " " || w.key === "Spacebar" || w.key === "Space" || w.key === "Enter") && (w.preventDefault(), F());
+          "aria-invalid": !!x(f),
+          "aria-describedby": x(f) ? `${e.name}-error` : void 0,
+          onClick: j,
+          onKeyDown: (v) => {
+            (v.key === " " || v.key === "Spacebar" || v.key === "Space" || v.key === "Enter") && (v.preventDefault(), j());
           },
           className: `reactaform-switch ${f ? "active checked on" : ""} `,
-          style: f ? { ...d, backgroundColor: "var(--reactaform-switch-on-bg, #22c55e)", borderColor: "var(--reactaform-switch-on-border, #16a34a)" } : d,
+          style: f ? { ...p, backgroundColor: "var(--reactaform-switch-on-bg, #22c55e)", borderColor: "var(--reactaform-switch-on-border, #16a34a)" } : p,
           children: /* @__PURE__ */ g.jsx(
             "span",
             {
@@ -3334,95 +3445,99 @@ const St = ({
   field: e,
   value: r,
   onChange: n,
-  onError: o
+  onError: a
 }) => {
-  const { t, definitionName: a } = T(), s = N.useRef(null), i = N.useRef(null), u = N.useRef(
-    o
+  const { t, definitionName: o } = L(), s = F.useRef(null), i = F.useRef(null), m = F.useRef(
+    a
   );
-  N.useEffect(() => {
-    u.current = o;
-  }, [o]);
-  const m = G(
+  F.useEffect(() => {
+    m.current = a;
+  }, [a]);
+  const d = J(
     () => e.pattern ? new RegExp(e.pattern) : null,
     [e.pattern]
-  ), l = N.useCallback(
-    (c) => c.trim() === "" ? e.required ? t("Value required") : null : e.minLength !== void 0 && c.length < e.minLength ? t("Must be at least {{1}} characters", e.minLength) : e.maxLength !== void 0 && c.length > e.maxLength ? t("Must be at most {{1}} characters", e.maxLength) : m && !m.test(c) ? t("Input does not match pattern: {{1}}", e.pattern) : Y(a, e, c, t),
-    [e, a, t, m]
-  ), p = (c) => {
-    const d = c.target.value, b = l(d);
-    n?.(d, b);
+  ), l = F.useCallback(
+    (c) => c.trim() === "" ? e.required ? t("Value required") : null : e.minLength !== void 0 && c.length < e.minLength ? t("Must be at least {{1}} characters", e.minLength) : e.maxLength !== void 0 && c.length > e.maxLength ? t("Must be at most {{1}} characters", e.maxLength) : d && !d.test(c) ? e.patternErrorMessage ? t(e.patternErrorMessage) : t("Input does not match pattern: {{1}}", e.pattern) : H(o, e, c, t),
+    [e, o, t, d]
+  ), u = (c) => {
+    const p = c.target.value, b = l(p);
+    n?.(p, b);
   };
-  return C(() => {
+  return k(() => {
     const c = l(r);
-    s.current && s.current.value !== String(r ?? "") && (s.current.value = String(r ?? "")), c !== i.current && (i.current = c, u.current?.(c ?? null));
-  }, [r, l]), /* @__PURE__ */ g.jsx(W, { field: e, error: l(String(r ?? "")), children: /* @__PURE__ */ g.jsx(
+    s.current && s.current.value !== String(r ?? "") && (s.current.value = String(r ?? "")), c !== i.current && (i.current = c, m.current?.(c ?? null));
+  }, [r, l]), /* @__PURE__ */ g.jsx(U, { field: e, error: l(String(r ?? "")), children: /* @__PURE__ */ g.jsx(
     "input",
     {
       id: e.name,
+      "aria-invalid": !!l(String(r ?? "")),
+      "aria-describedby": l(String(r ?? "")) ? `${e.name}-error` : void 0,
       type: "text",
       defaultValue: String(r ?? ""),
       ref: s,
-      onChange: p,
-      className: K($.input, $.textInput)
+      onChange: u,
+      className: G(M.input, M.textInput)
     }
   ) });
 }, jt = ({
   field: e,
   value: r,
   onChange: n,
-  onError: o
+  onError: a
 }) => {
-  const { t, definitionName: a } = T(), s = k(null), i = k(o), u = e.includeSeconds ?? !0;
-  C(() => {
-    i.current = o;
-  }, [o]);
-  const m = N.useCallback((p) => {
-    if (!p || p.trim() === "")
+  const { t, definitionName: o } = L(), s = E(null), i = E(a), m = e.includeSeconds ?? !0;
+  k(() => {
+    i.current = a;
+  }, [a]);
+  const d = F.useCallback((u) => {
+    if (!u || u.trim() === "")
       return e.required || e.min || e.max ? t("Value required") : null;
     const c = (f) => {
-      const y = f.split(":").map((v) => parseInt(v, 10));
-      if (y.some((v) => Number.isNaN(v))) return NaN;
-      let x = 0;
+      const y = f.split(":").map((x) => parseInt(x, 10));
+      if (y.some((x) => Number.isNaN(x))) return NaN;
+      let C = 0;
       if (y.length === 3)
-        x = y[0] * 3600 + y[1] * 60 + y[2];
+        C = y[0] * 3600 + y[1] * 60 + y[2];
       else if (y.length === 2)
-        x = y[0] * 3600 + y[1] * 60;
+        C = y[0] * 3600 + y[1] * 60;
       else if (y.length === 1)
-        x = y[0] * 3600;
+        C = y[0] * 3600;
       else
         return NaN;
-      return x;
-    }, d = c(p);
-    if (Number.isNaN(d)) return t("Invalid time format");
+      return C;
+    }, p = c(u);
+    if (Number.isNaN(p)) return t("Invalid time format");
     if (e.min && typeof e.min == "string") {
       const f = c(e.min);
-      if (!Number.isNaN(f) && d < f)
+      if (!Number.isNaN(f) && p < f)
         return t("Time must be on or after {{1}}", e.min);
     }
     if (e.max && typeof e.max == "string") {
       const f = c(e.max);
-      if (!Number.isNaN(f) && d > f)
+      if (!Number.isNaN(f) && p > f)
         return t("Time must be on or before {{1}}", e.max);
     }
-    return Y(a, e, p, t) ?? null;
-  }, [e, a, t]), l = (p) => {
-    const c = p.target.value, d = m(c);
-    n?.(c, d);
+    return H(o, e, u, t) ?? null;
+  }, [e, o, t]), l = (u) => {
+    const c = u.target.value, p = d(c);
+    n?.(c, p);
   };
-  return C(() => {
-    const p = m(r);
-    p !== s.current && (s.current = p, i.current?.(p ?? null));
-  }, [r, m]), /* @__PURE__ */ g.jsx(W, { field: e, error: m(r), children: /* @__PURE__ */ g.jsx(
+  return k(() => {
+    const u = d(r);
+    u !== s.current && (s.current = u, i.current?.(u ?? null));
+  }, [r, d]), /* @__PURE__ */ g.jsx(U, { field: e, error: d(r), children: /* @__PURE__ */ g.jsx(
     "input",
     {
       id: e.name,
       type: "time",
       value: r,
-      step: u ? 1 : 60,
+      step: m ? 1 : 60,
       onChange: l,
       min: typeof e.min == "string" ? e.min : void 0,
       max: typeof e.max == "string" ? e.max : void 0,
-      className: K($.input, $.textInput)
+      className: G(M.input, M.textInput),
+      "aria-invalid": !!d(r),
+      "aria-describedby": d(r) ? `${e.name}-error` : void 0
     }
   ) });
 };
@@ -3430,28 +3545,28 @@ function kt({
   pos: e,
   options: r,
   onClose: n,
-  onClickOption: o
+  onClickOption: a
 }) {
-  const t = k(null), a = k(!1), s = typeof window < "u" ? document.getElementById("popup-root") || document.body : null;
-  if (C(() => {
-    function d(b) {
-      a.current || b.target.dataset?.popupMenu === "item" || t.current && b.target instanceof Node && !t.current.contains(b.target) && n();
+  const t = E(null), o = E(!1), s = typeof window < "u" ? document.getElementById("popup-root") || document.body : null;
+  if (k(() => {
+    function p(b) {
+      o.current || b.target.dataset?.popupMenu === "item" || t.current && b.target instanceof Node && !t.current.contains(b.target) && n();
     }
-    return document.addEventListener("mousedown", d), () => document.removeEventListener("mousedown", d);
+    return document.addEventListener("mousedown", p), () => document.removeEventListener("mousedown", p);
   }, [n]), !s || r === void 0 || r.length === 0 || !e || e.x == null || e.y == null) return null;
-  const i = e.x, u = e.y, m = typeof window < "u" ? window.innerWidth : 1024, l = Math.max(0, m - 160), p = Math.max(0, Math.min(i, l)), c = Math.max(0, u);
-  return Me.createPortal(
+  const i = e.x, m = e.y, d = typeof window < "u" ? window.innerWidth : 1024, l = Math.max(0, d - 160), u = Math.max(0, Math.min(i, l)), c = Math.max(0, m);
+  return $e.createPortal(
     /* @__PURE__ */ g.jsx(
       "div",
       {
         ref: t,
-        onMouseDown: (d) => {
-          d.stopPropagation();
+        onMouseDown: (p) => {
+          p.stopPropagation();
         },
         style: {
           position: "fixed",
           top: c,
-          left: p,
+          left: u,
           backgroundColor: "var(--reactaform-primary-bg, #fff)",
           border: "1px solid var(--reactaform-border-color, #ccc)",
           borderRadius: "var(--reactaform-border-radius, 4px)",
@@ -3460,16 +3575,16 @@ function kt({
           minWidth: "var(--reactaform-menu-min-width, 150px)",
           pointerEvents: "auto"
         },
-        children: r.map((d, b) => /* @__PURE__ */ g.jsx(
+        children: r.map((p, b) => /* @__PURE__ */ g.jsx(
           "div",
           {
             "data-popup-menu": "item",
             onMouseDown: (f) => {
-              f.stopPropagation(), a.current = !0;
+              f.stopPropagation(), o.current = !0;
             },
             onClick: (f) => {
-              f.stopPropagation(), f.preventDefault(), o(d), n(), setTimeout(() => {
-                a.current = !1;
+              f.stopPropagation(), f.preventDefault(), a(p), n(), setTimeout(() => {
+                o.current = !1;
               }, 100);
             },
             style: {
@@ -3485,9 +3600,9 @@ function kt({
             onMouseLeave: (f) => {
               f.currentTarget.style.backgroundColor = "transparent";
             },
-            children: d.label
+            children: p.label
           },
-          d.label ?? b
+          p.label ?? b
         ))
       }
     ),
@@ -3498,15 +3613,15 @@ const he = {};
 function Rt(e, r) {
   if (e in he)
     return;
-  const n = Le[e] ?? {}, o = {}, t = {}, a = {};
-  for (const [i, u] of Object.entries(n))
-    typeof u.factor == "number" && (o[i] = u.factor), t[i] = r(i), a[r(i)] = i;
+  const n = Le[e] ?? {}, a = {}, t = {}, o = {};
+  for (const [i, m] of Object.entries(n))
+    typeof m.factor == "number" && (a[i] = m.factor), t[i] = r(i), o[r(i)] = i;
   const s = Object.keys(n)[0] ?? "";
   he[e] = {
     default: s,
-    factors: o,
+    factors: a,
     labels: t,
-    reverseLabels: a
+    reverseLabels: o
   };
 }
 function Et(e, r, n) {
@@ -3525,14 +3640,14 @@ function Et(e, r, n) {
 function Nt(e, r, n) {
   if (!Number.isFinite(e)) return [];
   if (n === he.temperature)
-    return Object.keys(n.labels).map((a) => {
-      const s = Et(r, a, e);
-      return Number.isFinite(s) ? { label: `${s.toFixed(6)} ${a}`, value: s.toString(), unit: a } : { label: `${String(s)} ${a}`, value: String(s), unit: a };
+    return Object.keys(n.labels).map((o) => {
+      const s = Et(r, o, e);
+      return Number.isFinite(s) ? { label: `${s.toFixed(6)} ${o}`, value: s.toString(), unit: o } : { label: `${String(s)} ${o}`, value: String(s), unit: o };
     });
   const t = n.factors[r];
-  return t === void 0 ? [] : Object.entries(n.factors).map(([a, s]) => {
+  return t === void 0 ? [] : Object.entries(n.factors).map(([o, s]) => {
     const i = e / t * s;
-    return Number.isFinite(i) ? { label: `${i.toFixed(6)} ${a}`, value: i.toString(), unit: a } : { label: `${String(i)} ${a}`, value: String(i), unit: a };
+    return Number.isFinite(i) ? { label: `${i.toFixed(6)} ${o}`, value: i.toString(), unit: o } : { label: `${String(i)} ${o}`, value: String(i), unit: o };
   });
 }
 function xe(e, r) {
@@ -3542,71 +3657,71 @@ const It = /^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][-+]?\d+)?$/, At = ({
   unitFactors: e,
   field: r,
   value: n,
-  onChange: o,
+  onChange: a,
   onError: t
 }) => {
-  const { t: a, definitionName: s } = T(), i = k(null), u = k(null), m = k(null), [l, p] = D(null), [c, d] = D(null), [b, f] = D(!1), [y, x] = D(null), [v, F] = D([]), R = Z(
-    (P, O) => {
-      if (!P || P.trim() === "")
-        return r.required ? a("Value required") : null;
-      if (!It.test(P)) return a("Must be a valid number");
-      const h = Y(s, r, [P, O], a);
-      return h || null;
+  const { t: o, definitionName: s } = L(), i = E(null), m = E(null), d = E(null), [l, u] = V(null), [c, p] = V(null), [b, f] = V(!1), [y, C] = V(null), [x, j] = V([]), N = X(
+    (T, h) => {
+      if (!T || T.trim() === "")
+        return r.required ? o("Value required") : null;
+      if (!It.test(T)) return o("Must be a valid number");
+      const S = H(s, r, [T, h], o);
+      return S || null;
     },
-    [s, r, a]
-  ), w = e.reverseLabels !== void 0 ? e.reverseLabels : Object.fromEntries(
-    Object.entries(e.labels).map(([P, O]) => [O, P])
+    [s, r, o]
+  ), v = e.reverseLabels !== void 0 ? e.reverseLabels : Object.fromEntries(
+    Object.entries(e.labels).map(([T, h]) => [h, T])
   );
-  C(() => {
-    const P = String(n[0]);
-    let O = n[1] ?? e.default;
-    O = xe(O, e) || O;
-    const h = document.activeElement;
-    h === i.current || h === u.current || (i.current && (i.current.value = P), u.current && (u.current.value = O), m.current !== null && (cancelAnimationFrame(m.current), m.current = null), m.current = requestAnimationFrame(() => {
-      m.current = null, p(null), d(null);
+  k(() => {
+    const T = String(n[0]);
+    let h = n[1] ?? e.default;
+    h = xe(h, e) || h;
+    const S = document.activeElement;
+    S === i.current || S === m.current || (i.current && (i.current.value = T), m.current && (m.current.value = h), d.current !== null && (cancelAnimationFrame(d.current), d.current = null), d.current = requestAnimationFrame(() => {
+      d.current = null, u(null), p(null);
     }));
-  }, [n, e]), C(() => () => {
-    m.current !== null && (cancelAnimationFrame(m.current), m.current = null);
+  }, [n, e]), k(() => () => {
+    d.current !== null && (cancelAnimationFrame(d.current), d.current = null);
   }, []);
-  const j = k(null), I = k(
+  const w = E(null), I = E(
     t
   );
-  C(() => {
+  k(() => {
     I.current = t;
-  }, [t]), C(() => {
-    const P = String(n[0]);
-    let O = n[1] ?? e.default;
-    O = xe(O, e) || O;
-    const h = R(P, O);
-    h !== j.current && (j.current = h, I.current?.(h ?? null));
-  }, [n, e, R]);
-  const S = (P, O, h) => {
-    const E = w[O] || O;
-    o?.([P, E], h);
-  }, A = (P) => {
-    const O = P.target.value, h = u.current ? u.current.value : e.default, E = R(O, h);
-    p(O), S(O, h, E);
-  }, M = (P) => {
-    const O = P.target.value, h = i.current ? i.current.value : String(n[0] ?? ""), E = R(h, O);
-    d(O), u.current && (u.current.value = O), S(h, O, E);
-  }, z = (P) => {
-    const O = i.current ? i.current.value : String(n[0] ?? ""), h = parseFloat(O), E = u.current ? u.current.value : e.default;
-    if (R(O, E) || !O.trim() || !Number.isFinite(h))
+  }, [t]), k(() => {
+    const T = String(n[0]);
+    let h = n[1] ?? e.default;
+    h = xe(h, e) || h;
+    const S = N(T, h);
+    S !== w.current && (w.current = S, I.current?.(S ?? null));
+  }, [n, e, N]);
+  const A = (T, h, S) => {
+    const z = v[h] || h;
+    a?.([T, z], S);
+  }, R = (T) => {
+    const h = T.target.value, S = m.current ? m.current.value : e.default, z = N(h, S);
+    u(h), A(h, S, z);
+  }, $ = (T) => {
+    const h = T.target.value, S = i.current ? i.current.value : String(n[0] ?? ""), z = N(S, h);
+    p(h), m.current && (m.current.value = h), A(S, h, z);
+  }, O = (T) => {
+    const h = i.current ? i.current.value : String(n[0] ?? ""), S = parseFloat(h), z = m.current ? m.current.value : e.default;
+    if (N(h, z) || !h.trim() || !Number.isFinite(S))
       return;
-    const U = P.currentTarget.getBoundingClientRect(), ne = U.left, ae = U.bottom;
-    x({ x: ne, y: ae });
-    const _ = Nt(h, E, e);
-    if (_.length === 0) {
-      F([]), f(!1);
+    const te = T.currentTarget.getBoundingClientRect(), se = te.left, q = te.bottom;
+    C({ x: se, y: q });
+    const D = Nt(S, z, e);
+    if (D.length === 0) {
+      j([]), f(!1);
       return;
     }
-    F(_), f((V) => !V);
-  }, L = (P) => {
-    const { value: O, unit: h } = P;
-    f(!1), x(null), i.current && (i.current.value = O), u.current && (u.current.value = h), p(O), d(h);
-    const E = R(O, h);
-    S(O, h, E);
-  }, J = String(n[0] ?? ""), ce = xe(n[1] ?? e.default, e) || (n[1] ?? e.default), re = l ?? J, Q = !!R(re, c ?? ce) || !re.trim(), oe = {
+    j(D), f((_) => !_);
+  }, P = (T) => {
+    const { value: h, unit: S } = T;
+    f(!1), C(null), i.current && (i.current.value = h), m.current && (m.current.value = S), u(h), p(S);
+    const z = N(h, S);
+    A(h, S, z);
+  }, W = String(n[0] ?? ""), ae = xe(n[1] ?? e.default, e) || (n[1] ?? e.default), re = l ?? W, Q = !!N(re, c ?? ae) || !re.trim(), oe = {
     width: "var(--reactaform-unit-btn-width, 2.5em)",
     height: "var(--reactaform-unit-btn-height, 2.5em)",
     padding: "var(--reactaform-unit-btn-padding, 0)",
@@ -3619,41 +3734,47 @@ const It = /^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][-+]?\d+)?$/, At = ({
     display: "flex",
     alignItems: "center",
     justifyContent: "center"
-  };
-  return /* @__PURE__ */ g.jsx(W, { field: r, error: R(J, ce), children: /* @__PURE__ */ g.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "var(--reactaform-unit-gap, 8px)", width: "100%" }, children: [
+  }, Z = N(W, ae);
+  return /* @__PURE__ */ g.jsx(U, { field: r, error: Z, children: /* @__PURE__ */ g.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "var(--reactaform-unit-gap, 8px)", width: "100%" }, children: [
     /* @__PURE__ */ g.jsx(
       "input",
       {
+        id: r.name,
         type: "text",
         ref: i,
         defaultValue: String(n[0] ?? ""),
-        onChange: A,
+        onChange: R,
         style: { width: "var(--reactaform-unit-input-width, 100px)" },
-        className: K($.input, $.textInput)
+        className: G(M.input, M.textInput),
+        "aria-invalid": !!Z,
+        "aria-describedby": Z ? `${r.name}-error` : void 0
       }
     ),
     /* @__PURE__ */ g.jsx(
       "select",
       {
-        ref: u,
+        id: `${r.name}-unit`,
+        ref: m,
         defaultValue: xe(n[1] ?? e.default, e) || (n[1] ?? e.default),
-        onChange: M,
-        className: K(
-          $.input,
-          $.inputSelect
+        onChange: $,
+        className: G(
+          M.input,
+          M.inputSelect
         ),
-        children: Object.keys(e.labels).map((P) => /* @__PURE__ */ g.jsx("option", { value: P, children: e.labels[P] ?? P }, P))
+        "aria-invalid": !!Z,
+        "aria-describedby": Z ? `${r.name}-error` : void 0,
+        children: Object.keys(e.labels).map((T) => /* @__PURE__ */ g.jsx("option", { value: T, children: e.labels[T] ?? T }, T))
       }
     ),
     /* @__PURE__ */ g.jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
       /* @__PURE__ */ g.jsx(
         "button",
         {
-          onClick: z,
+          onClick: O,
           "aria-disabled": Q,
           disabled: Q,
           style: oe,
-          className: $.button,
+          className: M.button,
           children: /* @__PURE__ */ g.jsx(
             "span",
             {
@@ -3668,29 +3789,29 @@ const It = /^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][-+]?\d+)?$/, At = ({
           )
         }
       ),
-      b && v && /* @__PURE__ */ g.jsx(
+      b && x && /* @__PURE__ */ g.jsx(
         kt,
         {
           pos: y,
-          options: v,
+          options: x,
           onClose: () => {
-            x(null), f(!1);
+            C(null), f(!1);
           },
-          onClickOption: L
+          onClickOption: P
         }
       )
     ] })
   ] }) });
 };
 function Ft({ field: e, value: r, onChange: n }) {
-  const { t: o } = T(), t = e.dimension;
+  const { t: a } = L(), t = e.dimension;
   if (!t) return null;
-  he[t] || Rt(t, o);
-  const a = he[t];
-  return a ? /* @__PURE__ */ g.jsx(
+  he[t] || Rt(t, a);
+  const o = he[t];
+  return o ? /* @__PURE__ */ g.jsx(
     At,
     {
-      unitFactors: a,
+      unitFactors: o,
       field: e,
       value: r,
       onChange: n
@@ -3703,15 +3824,15 @@ const Xe = /^(https?|ftp|file):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|]
   } catch {
     return !1;
   }
-}, Mt = ({
+}, $t = ({
   field: e,
   value: r,
   onChange: n,
-  onError: o
+  onError: a
 }) => {
-  const { t, definitionName: a } = T(), s = k(null), i = Z(
-    (p) => {
-      const c = p.trim();
+  const { t, definitionName: o } = L(), s = E(null), i = X(
+    (u) => {
+      const c = u.trim();
       if (c === "")
         return e.required ? t("Value required") : null;
       if (!Xe.test(c) && !Ze(c)) {
@@ -3727,32 +3848,34 @@ const Xe = /^(https?|ftp|file):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|]
           }
         if (!f) return t("Must be a valid URL");
       }
-      return Y(a, e, c, t) ?? null;
+      return H(o, e, c, t) ?? null;
     },
-    [a, e, t]
-  ), u = (p) => {
-    const c = p.target.value, d = i(c);
-    n?.(c.trim(), d);
-  }, m = k(null), l = k(o);
-  return C(() => {
-    l.current = o;
-  }, [o]), C(() => {
-    const p = r ?? "", c = i(p);
-    s.current && s.current.value !== String(p) && (s.current.value = String(p)), c !== m.current && (m.current = c, l.current?.(c ?? null));
-  }, [r, i]), /* @__PURE__ */ g.jsx(W, { field: e, error: i(String(r ?? "")), children: /* @__PURE__ */ g.jsx(
+    [o, e, t]
+  ), m = (u) => {
+    const c = u.target.value, p = i(c);
+    n?.(c.trim(), p);
+  }, d = E(null), l = E(a);
+  return k(() => {
+    l.current = a;
+  }, [a]), k(() => {
+    const u = r ?? "", c = i(u);
+    s.current && s.current.value !== String(u) && (s.current.value = String(u)), c !== d.current && (d.current = c, l.current?.(c ?? null));
+  }, [r, i]), /* @__PURE__ */ g.jsx(U, { field: e, error: i(String(r ?? "")), children: /* @__PURE__ */ g.jsx(
     "input",
     {
       id: e.name,
       type: "url",
       defaultValue: String(r ?? ""),
       ref: s,
-      onChange: u,
+      onChange: m,
       style: { alignItems: "left" },
-      className: K($.input, $.textInput),
-      placeholder: "https://example.com"
+      className: G(M.input, M.textInput),
+      placeholder: "https://example.com",
+      "aria-invalid": !!i(String(r ?? "")),
+      "aria-describedby": i(String(r ?? "")) ? `${e.name}-error` : void 0
     }
   ) });
-}, Fe = new we(), Ot = /* @__PURE__ */ new Set([
+}, Fe = new we(), Mt = /* @__PURE__ */ new Set([
   "checkbox",
   "switch",
   "dropdown",
@@ -3771,7 +3894,7 @@ const Xe = /^(https?|ftp|file):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|]
   file: Kr,
   float: nt,
   "float-array": et,
-  image: at,
+  image: ot,
   int: lt,
   "int-array": it,
   "multi-selection": mt,
@@ -3783,12 +3906,12 @@ const Xe = /^(https?|ftp|file):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|]
   separator: Gr,
   slider: St,
   string: Ke,
-  stepper: dt,
+  stepper: ft,
   switch: Ct,
   text: Ke,
   time: jt,
   unit: Ft,
-  url: Mt
+  url: $t
 };
 function ur(e, r, n) {
   if (!n && e in lr) {
@@ -3797,28 +3920,28 @@ function ur(e, r, n) {
     );
     return;
   }
-  if (Ot.has(e)) {
+  if (Mt.has(e)) {
     Fe.register(e, r);
     return;
   }
-  const o = (t) => {
+  const a = (t) => {
     const { callback: s, cancel: i } = jr(
-      (...u) => {
-        const m = t.onChange;
-        typeof m == "function" && m(...u);
+      (...m) => {
+        const d = t.onChange;
+        typeof d == "function" && d(...m);
       },
       200
     );
-    return C(() => () => {
+    return k(() => () => {
       i();
-    }, [i]), N.createElement(r, { ...t, onChange: s });
+    }, [i]), F.createElement(r, { ...t, onChange: s });
   };
-  Fe.register(e, o);
+  Fe.register(e, a);
 }
-function an(e, r) {
+function on(e, r) {
   ur(e, r, !1);
 }
-function $t(e) {
+function Ot(e) {
   return Fe.get(e);
 }
 let Qe = !1;
@@ -3827,63 +3950,63 @@ function mr() {
     ur(e, r, !0);
   }), Qe = !0);
 }
-const fr = new we();
-function Vt(e, r) {
-  fr.register(e, r);
+const dr = new we();
+function Dt(e, r) {
+  dr.register(e, r);
 }
-function Dt(e) {
-  return fr.get(e);
+function Vt(e) {
+  return dr.get(e);
 }
-Vt(
+Dt(
   "Preset_AlertSubmitHandler",
   (e, r, n) => {
-    const o = {
+    const a = {
       name: r || "Unnamed Instance",
       version: e.version,
       definition: e.name,
       values: n
-    }, t = JSON.stringify(o, null, 2);
+    }, t = JSON.stringify(a, null, 2);
     alert(t);
   }
 );
-const dr = N.memo(({ field: e, value: r, handleChange: n, handleError: o }) => {
-  const t = $t(e.type), a = N.useCallback(
-    (i, u) => n(e.name, i, u),
+const fr = F.memo(({ field: e, value: r, handleChange: n, handleError: a }) => {
+  const t = Ot(e.type), o = F.useCallback(
+    (i, m) => n(e.name, i, m),
     [n, e.name]
-  ), s = N.useCallback(
-    (i) => o?.(e.name, i),
-    [o, e.name]
+  ), s = F.useCallback(
+    (i) => a?.(e.name, i),
+    [a, e.name]
   );
   return t ? /* @__PURE__ */ g.jsx(
     t,
     {
       field: e,
       value: r,
-      onChange: a,
+      onChange: o,
       onError: s
     }
   ) : null;
 }, (e, r) => e.field === r.field && e.value === r.value && e.handleChange === r.handleChange && e.handleError === r.handleError);
-dr.displayName = "FieldWrapper";
-const pr = (e, r, n, o) => /* @__PURE__ */ g.jsx(
-  dr,
+fr.displayName = "FieldWrapper";
+const pr = (e, r, n, a) => /* @__PURE__ */ g.jsx(
+  fr,
   {
     field: e,
     value: r[e.name],
     handleChange: n,
-    handleError: o
+    handleError: a
   },
   e.name
-), gr = N.memo(({ groupName: e, isOpen: r, fields: n, valuesMap: o, handleChange: t, handleError: a, toggleGroup: s, t: i }) => {
-  const u = N.useCallback(() => s(e), [s, e]), { formStyle: m, fieldStyle: l } = T(), p = N.useMemo(() => ({
+), gr = F.memo(({ groupName: e, isOpen: r, fields: n, valuesMap: a, handleChange: t, handleError: o, toggleGroup: s, t: i }) => {
+  const m = F.useCallback(() => s(e), [s, e]), { formStyle: d, fieldStyle: l } = L(), u = F.useMemo(() => ({
     border: "1px solid var(--reactaform-border-color, #bbb)",
     padding: "var(--reactaform-fieldset-padding, 0.5em)",
     borderRadius: "var(--reactaform-border-radius, 4px)",
     marginBottom: "var(--reactaform-space, 8px)",
     // allow per-form overrides if provider exposes them
-    ...m?.fieldset || {},
+    ...d?.fieldset || {},
     ...l?.fieldset || {}
-  }), [m, l]), c = N.useMemo(() => ({
+  }), [d, l]), c = F.useMemo(() => ({
     fontWeight: "bold",
     cursor: "pointer",
     display: "flex",
@@ -3891,141 +4014,141 @@ const pr = (e, r, n, o) => /* @__PURE__ */ g.jsx(
     alignItems: "center",
     padding: "0 var(--reactaform-space, 8px)",
     color: "var(--reactaform-text-color, inherit)",
-    ...m?.legend || {},
+    ...d?.legend || {},
     ...l?.legend || {}
-  }), [m, l]);
-  return /* @__PURE__ */ g.jsxs("fieldset", { style: p, children: [
-    /* @__PURE__ */ g.jsxs("legend", { onClick: u, style: c, children: [
+  }), [d, l]);
+  return /* @__PURE__ */ g.jsxs("fieldset", { style: u, children: [
+    /* @__PURE__ */ g.jsxs("legend", { onClick: m, style: c, children: [
       /* @__PURE__ */ g.jsx("span", { children: i(e) }),
       /* @__PURE__ */ g.jsx("span", { children: r ? "▼" : "▶" })
     ] }),
-    r && n.map((d) => /* @__PURE__ */ g.jsx("div", { children: pr(d, o, t, a) }, d.name))
+    r && n.map((p) => /* @__PURE__ */ g.jsx("div", { children: pr(p, a, t, o) }, p.name))
   ] });
 });
 gr.displayName = "FieldGroup";
-const zt = (e, r, n, o, t, a, s, i, u) => {
-  const m = r.slice(0, i).filter((d) => s[d.name]), p = $r(m).groups, c = [];
-  return p.forEach((d) => {
-    if (d.name) {
-      const b = e[d.name] ?? !0;
+const zt = (e, r, n, a, t, o, s, i, m) => {
+  const d = r.slice(0, i).filter((p) => s[p.name]), u = Or(d).groups, c = [];
+  return u.forEach((p) => {
+    if (p.name) {
+      const b = e[p.name] ?? !0;
       c.push(
         /* @__PURE__ */ g.jsx(
           gr,
           {
-            groupName: d.name,
+            groupName: p.name,
             isOpen: b,
-            fields: d.fields,
+            fields: p.fields,
             valuesMap: n,
             handleChange: t,
-            handleError: a,
-            toggleGroup: u,
-            t: o
+            handleError: o,
+            toggleGroup: m,
+            t: a
           },
-          d.name
+          p.name
         )
       );
     } else
-      d.fields.forEach((b) => c.push(/* @__PURE__ */ g.jsx("div", { children: pr(b, n, t, a) }, b.name)));
+      p.fields.forEach((b) => c.push(/* @__PURE__ */ g.jsx("div", { children: pr(b, n, t, o) }, b.name)));
   }), c;
 }, Tt = (e) => {
   const r = {};
   return e.forEach((n) => {
     r[n.name] = !1;
   }), r;
-}, Pe = (e, r, n, o) => {
+}, Pe = (e, r, n, a) => {
   const t = r[e];
   if (!t?.children) return;
-  const a = n[e], s = a != null ? String(a) : "";
-  (t.children[s] || []).forEach((u) => {
-    o[u] = !0, Pe(u, r, n, o);
+  const o = n[e], s = o != null ? String(o) : "";
+  (t.children[s] || []).forEach((m) => {
+    a[m] = !0, Pe(m, r, n, a);
   });
 }, hr = (e, r, n) => {
-  const o = r[e];
-  o?.children && Object.values(o.children).flat().forEach((t) => {
+  const a = r[e];
+  a?.children && Object.values(a.children).flat().forEach((t) => {
     n[t] = !1, hr(t, r, n);
   });
-}, Lt = (e, r, n, o) => {
+}, Lt = (e, r, n, a) => {
   const t = { ...n };
-  return e.forEach((a) => {
-    (!a.parents || Object.keys(a.parents).length === 0) && (t[a.name] = !0, Pe(a.name, o, r, t));
+  return e.forEach((o) => {
+    (!o.parents || Object.keys(o.parents).length === 0) && (t[o.name] = !0, Pe(o.name, a, r, t));
   }), t;
-}, Pt = (e, r, n, o, t) => {
-  const a = { ...e };
-  if (hr(o, r, a), t != null) {
-    const s = r[o];
+}, Pt = (e, r, n, a, t) => {
+  const o = { ...e };
+  if (hr(a, r, o), t != null) {
+    const s = r[a];
     if (s?.children) {
       const i = String(t);
-      (s.children[i] || []).forEach((m) => {
-        a[m] = !0, Pe(m, r, n, a);
+      (s.children[i] || []).forEach((d) => {
+        o[d] = !0, Pe(d, r, n, o);
       });
     }
   }
-  return a;
+  return o;
 };
-function _t(e, r, n, o, t) {
-  const a = Object.values(t).filter(Boolean);
-  if (a.length > 0)
+function _t(e, r, n, a, t) {
+  const o = Object.values(t).filter(Boolean);
+  if (o.length > 0)
     return {
       success: !1,
-      message: o("Please fix validation errors before submitting."),
-      errors: a
+      message: a("Please fix validation errors before submitting."),
+      errors: o
     };
   const s = { ...n }, i = [];
   if (e && Array.isArray(e.properties))
-    for (const m of e.properties) {
-      const l = m.name, p = s[l];
-      if (p == null) continue;
-      const c = m.type;
+    for (const d of e.properties) {
+      const l = d.name, u = s[l];
+      if (u == null) continue;
+      const c = d.type;
       try {
         if (c === "int" || c === "number" || c === "float") {
-          const d = Number(String(p).trim());
-          isNaN(d) ? i.push(o(`Invalid number format for field ${m.displayName || l}`)) : s[l] = d;
+          const p = Number(String(u).trim());
+          isNaN(p) ? i.push(a(`Invalid number format for field ${d.displayName || l}`)) : s[l] = p;
         } else if (c === "int-array" || c === "float-array") {
-          const b = String(p).split(",").map((f) => f.trim()).filter(Boolean).map((f) => {
+          const b = String(u).split(",").map((f) => f.trim()).filter(Boolean).map((f) => {
             const y = Number(f);
-            return isNaN(y) ? (i.push(o(`Invalid number "${f}" in array for field ${m.displayName || l}`)), 0) : y;
+            return isNaN(y) ? (i.push(a(`Invalid number "${f}" in array for field ${d.displayName || l}`)), 0) : y;
           });
           i.length === 0 && (s[l] = b);
         }
-      } catch (d) {
-        i.push(o(`Error processing field ${m.displayName || l}: ${d}`));
+      } catch (p) {
+        i.push(a(`Error processing field ${d.displayName || l}: ${p}`));
       }
     }
   if (i.length > 0)
     return {
       success: !1,
-      message: o("Data transformation errors occurred."),
+      message: a("Data transformation errors occurred."),
       errors: i
     };
-  const u = Nr(e, s, o);
-  if (u && u.length > 0)
+  const m = Nr(e, s, a);
+  if (m && m.length > 0)
     return {
       success: !1,
       message: "Validation Fail",
-      errors: u
+      errors: m
     };
   if (e && typeof e.submitHandlerName == "string") {
-    const m = Dt(e.submitHandlerName);
-    if (m)
+    const d = Vt(e.submitHandlerName);
+    if (d)
       try {
-        const l = m(e, r?.name ?? null, s, o);
+        const l = d(e, r?.name ?? null, s, a);
         if (l && l.length > 0)
           return {
             success: !1,
-            message: o("Submission failed."),
+            message: a("Submission failed."),
             errors: Array.isArray(l) ? l : [l]
           };
       } catch (l) {
         return {
           success: !1,
-          message: o("Submission handler error occurred."),
+          message: a("Submission handler error occurred."),
           errors: [String(l)]
         };
       }
   }
   return {
     success: !0,
-    message: o("Form submitted successfully."),
+    message: a("Form submitted successfully."),
     data: s
   };
 }
@@ -4033,122 +4156,122 @@ const qt = ({
   definition: e,
   instance: r,
   chunkSize: n = 50,
-  chunkDelay: o = 50
+  chunkDelay: a = 50
 }) => {
-  const { properties: t, displayName: a } = e, s = T(), { t: i, formStyle: u, language: m } = s, l = {
+  const { properties: t, displayName: o } = e, s = L(), { t: i, formStyle: m, language: d } = s, l = {
     ...s,
     definitionName: e?.name ?? s.definitionName
-  }, [p, c] = D("en"), [d, b] = D([]), [f, y] = D({}), [x, v] = D(
+  }, [u, c] = V("en"), [p, b] = V([]), [f, y] = V({}), [C, x] = V(
     {}
-  ), [F, R] = D({}), [w, j] = D({}), [I, S] = D({}), [A, M] = D(null), [z, L] = D(null), [J, ce] = D(0), [re, ue] = D(!1), [Q, oe] = D(!1), [P, O] = D(r.name || ""), h = k(r), E = k(!1);
-  C(() => {
-    const V = Object.fromEntries(
-      t.map((H) => [
-        H.name,
-        { ...H, children: {} }
+  ), [j, N] = V({}), [v, w] = V({}), [I, A] = V({}), [R, $] = V(null), [O, P] = V(null), [W, ae] = V(0), [re, ue] = V(!1), [Q, oe] = V(!1), [Z, T] = V(r.name || ""), h = E(r), S = E(!1);
+  k(() => {
+    const D = Object.fromEntries(
+      t.map((B) => [
+        B.name,
+        { ...B, children: {} }
       ])
     );
-    t.forEach((H) => {
-      H.parents && Object.entries(H.parents).forEach(([me, Se]) => {
-        const fe = V[me];
-        fe && Se.forEach((br) => {
-          fe.children || (fe.children = {});
+    t.forEach((B) => {
+      B.parents && Object.entries(B.parents).forEach(([me, Se]) => {
+        const de = D[me];
+        de && Se.forEach((br) => {
+          de.children || (de.children = {});
           const _e = String(br);
-          fe.children[_e] = [
-            ...fe.children[_e] || [],
-            H.name
+          de.children[_e] = [
+            ...de.children[_e] || [],
+            B.name
           ];
         });
       });
-    }), Or(t, V);
-    const q = Object.values(
-      V
-    ), X = {};
-    q.forEach((H) => {
-      if (H.type === "unit") {
-        const me = typeof H.defaultValue == "number" ? String(H.defaultValue) : "", Se = typeof H.defaultUnit == "string" ? H.defaultUnit : String(H.defaultUnit ?? "m");
-        X[H.name] = [me, Se];
+    }), Mr(t, D);
+    const _ = Object.values(
+      D
+    ), K = {};
+    _.forEach((B) => {
+      if (B.type === "unit") {
+        const me = typeof B.defaultValue == "number" ? String(B.defaultValue) : "", Se = typeof B.defaultUnit == "string" ? B.defaultUnit : String(B.defaultUnit ?? "m");
+        K[B.name] = [me, Se];
       } else
-        X[H.name] = H.defaultValue;
-    }), h.current = r, Object.keys(r.values).forEach((H) => {
-      V[H] !== void 0 && (X[H] = r.values[H]);
+        K[B.name] = B.defaultValue;
+    }), h.current = r, Object.keys(r.values).forEach((B) => {
+      D[B] !== void 0 && (K[B] = r.values[B]);
     });
-    const ee = Tt(q), te = {};
-    q.forEach((H) => {
-      H.group && !(H.group in te) && (te[H.group] = !0);
+    const ee = Tt(_), ne = {};
+    _.forEach((B) => {
+      B.group && !(B.group in ne) && (ne[B.group] = !0);
     });
     const le = requestAnimationFrame(() => {
-      b(q), y(V), v(X), R(
-        Lt(q, X, ee, V)
-      ), j(te), ue(!0), O(r.name);
+      b(_), y(D), x(K), N(
+        Lt(_, K, ee, D)
+      ), w(ne), ue(!0), T(r.name);
     });
     return () => cancelAnimationFrame(le);
-  }, [t, r, e]), C(() => {
-    if (!re || J >= d.length) return;
-    const V = setTimeout(() => {
-      ce(
-        (q) => Math.min(q + n, d.length)
+  }, [t, r, e]), k(() => {
+    if (!re || W >= p.length) return;
+    const D = setTimeout(() => {
+      ae(
+        (_) => Math.min(_ + n, p.length)
       );
-    }, o);
-    return () => clearTimeout(V);
-  }, [re, J, d.length, n, o]);
-  const B = Z(
-    (V, q, X) => {
-      M(null), L(null), v((ee) => {
-        const te = { ...ee, [V]: q }, le = f[V];
+    }, a);
+    return () => clearTimeout(D);
+  }, [re, W, p.length, n, a]);
+  const z = X(
+    (D, _, K) => {
+      $(null), P(null), x((ee) => {
+        const ne = { ...ee, [D]: _ }, le = f[D];
         return le && [
           "checkbox",
           "dropdown",
           "multi-select",
           "radio",
           "switch"
-        ].includes(le.type) && R(
+        ].includes(le.type) && N(
           (me) => Pt(
             me,
             f,
-            te,
-            V,
-            String(q)
+            ne,
+            D,
+            String(_)
           )
-        ), te;
-      }), S((ee) => X ? { ...ee, [V]: X } : Object.fromEntries(Object.entries(ee).filter(([le]) => le !== V)));
+        ), ne;
+      }), A((ee) => K ? { ...ee, [D]: K } : Object.fromEntries(Object.entries(ee).filter(([le]) => le !== D)));
     },
-    [f, M, L]
+    [f, $, P]
   );
-  C(() => {
-    let V = 0;
-    return V = requestAnimationFrame(() => {
-      m !== p && (c(m || "en"), M(null), L(null));
-    }), () => cancelAnimationFrame(V);
-  }, [m, p]), C(() => {
-    let V = 0;
-    return V = requestAnimationFrame(() => {
-      if (E.current) {
-        E.current = !1, h.current = r, O(r.name || "");
+  k(() => {
+    let D = 0;
+    return D = requestAnimationFrame(() => {
+      d !== u && (c(d || "en"), $(null), P(null));
+    }), () => cancelAnimationFrame(D);
+  }, [d, u]), k(() => {
+    let D = 0;
+    return D = requestAnimationFrame(() => {
+      if (S.current) {
+        S.current = !1, h.current = r, T(r.name || "");
         return;
       }
-      h.current = r, M(null), L(null), O(r.name || "");
-    }), () => cancelAnimationFrame(V);
+      h.current = r, $(null), P(null), T(r.name || "");
+    }), () => cancelAnimationFrame(D);
   }, [r, r.name]);
-  const U = Z((V, q) => {
-    S((X) => q ? { ...X, [V]: String(q) } : Object.fromEntries(Object.entries(X).filter(([te]) => te !== V)));
-  }, []), ne = () => {
-    E.current = !0;
-    const V = h.current?.name;
-    h.current.name = P;
-    const q = _t(e, h.current, x, i, I), X = typeof q.message == "string" ? q.message : String(q.message), ee = Object.values(q.errors ?? {}).join(`
+  const Y = X((D, _) => {
+    A((K) => _ ? { ...K, [D]: String(_) } : Object.fromEntries(Object.entries(K).filter(([ne]) => ne !== D)));
+  }, []), te = () => {
+    S.current = !0;
+    const D = h.current?.name;
+    h.current.name = Z;
+    const _ = _t(e, h.current, C, i, I), K = typeof _.message == "string" ? _.message : String(_.message), ee = Object.values(_.errors ?? {}).join(`
 `);
-    M(ee ? X + `
-` + ee : X), L(q.success), q.success || (h.current.name = V ?? h.current.name, O(V ?? ""));
-  }, ae = (V) => {
-    j((q) => ({ ...q, [V]: !q[V] }));
-  }, _ = G(
+    $(ee ? K + `
+` + ee : K), P(_.success), _.success || (h.current.name = D ?? h.current.name, T(D ?? ""));
+  }, se = (D) => {
+    w((_) => ({ ..._, [D]: !_[D] }));
+  }, q = J(
     () => Object.values(I).some(Boolean),
     [I]
   );
-  return /* @__PURE__ */ g.jsx(Oe.Provider, { value: l, children: /* @__PURE__ */ g.jsxs("div", { style: u.container, children: [
-    a && /* @__PURE__ */ g.jsx("h2", { style: u.titleStyle, children: i(a) }),
-    A && /* @__PURE__ */ g.jsxs(
+  return /* @__PURE__ */ g.jsx(Me.Provider, { value: l, children: /* @__PURE__ */ g.jsxs("div", { style: m.container, children: [
+    o && /* @__PURE__ */ g.jsx("h2", { style: m.titleStyle, children: i(o) }),
+    R && /* @__PURE__ */ g.jsxs(
       "div",
       {
         role: "status",
@@ -4156,20 +4279,20 @@ const qt = ({
           marginBottom: 12,
           padding: 12,
           borderRadius: 6,
-          backgroundColor: z ? "rgba(76, 175, 80, 0.12)" : "rgba(225, 29, 72, 0.06)",
-          border: `1px solid ${z ? "rgba(76,175,80,0.3)" : "rgba(225,29,72,0.12)"}`,
-          color: z ? "var(--reactaform-success-color, #4CAF50)" : "var(--reactaform-error-color, #e11d48)",
+          backgroundColor: O ? "rgba(76, 175, 80, 0.12)" : "rgba(225, 29, 72, 0.06)",
+          border: `1px solid ${O ? "rgba(76,175,80,0.3)" : "rgba(225,29,72,0.12)"}`,
+          color: O ? "var(--reactaform-success-color, #4CAF50)" : "var(--reactaform-error-color, #e11d48)",
           display: "flex",
           alignItems: "center",
           justifyContent: "space-between"
         },
         children: [
-          /* @__PURE__ */ g.jsx("div", { style: { whiteSpace: "pre-wrap", flex: 1 }, children: A }),
+          /* @__PURE__ */ g.jsx("div", { style: { whiteSpace: "pre-wrap", flex: 1 }, children: R }),
           /* @__PURE__ */ g.jsx(
             "button",
             {
               onClick: () => {
-                M(null), L(null);
+                $(null), P(null);
               },
               "aria-label": i("Dismiss"),
               style: {
@@ -4190,25 +4313,25 @@ const qt = ({
     r && /* @__PURE__ */ g.jsx(
       tr,
       {
-        name: P,
-        onChange: (V) => {
-          O(V), M(null), L(null);
+        name: Z,
+        onChange: (D) => {
+          T(D), $(null), P(null);
         }
       }
     ),
     /* @__PURE__ */ g.jsxs(g.Fragment, { children: [
       zt(
-        w,
-        d,
-        x,
+        v,
+        p,
+        C,
         i,
-        B,
-        U,
-        F,
-        J,
-        ae
+        z,
+        Y,
+        j,
+        W,
+        se
       ),
-      J < d.length && /* @__PURE__ */ g.jsx(
+      W < p.length && /* @__PURE__ */ g.jsx(
         "div",
         {
           style: {
@@ -4221,23 +4344,23 @@ const qt = ({
     /* @__PURE__ */ g.jsx(
       "button",
       {
-        onClick: ne,
-        disabled: _,
+        onClick: te,
+        disabled: q,
         onMouseEnter: () => oe(!0),
         onMouseLeave: () => oe(!1),
         style: {
           padding: "var(--reactaform-button-padding, var(--reactaform-space) 12px)",
-          backgroundColor: _ ? "var(--reactaform-button-disabled-bg, #cccccc)" : "var(--reactaform-button-bg, var(--reactaform-success-color))",
+          backgroundColor: q ? "var(--reactaform-button-disabled-bg, #cccccc)" : "var(--reactaform-button-bg, var(--reactaform-success-color))",
           color: "var(--reactaform-button-text, #ffffff)",
           border: "none",
           borderRadius: "4px",
-          cursor: _ ? "var(--reactaform-button-disabled-cursor, not-allowed)" : "pointer",
+          cursor: q ? "var(--reactaform-button-disabled-cursor, not-allowed)" : "pointer",
           fontSize: "var(--reactaform-button-font-size, 14px)",
           fontWeight: "var(--reactaform-button-font-weight, 500)",
           boxShadow: "var(--reactaform-button-shadow, none)",
           marginTop: "var(--reactaform-button-margin-top, 0.5em)",
           transition: "opacity 0.2s ease",
-          opacity: _ ? "var(--reactaform-button-disabled-opacity, 0.6)" : Q ? "var(--reactaform-button-hover-opacity, 0.9)" : "1"
+          opacity: q ? "var(--reactaform-button-disabled-opacity, 0.6)" : Q ? "var(--reactaform-button-hover-opacity, 0.9)" : "1"
         },
         children: i("Submit")
       }
@@ -4349,57 +4472,57 @@ const Bt = (e, r = !1) => ({
   children: e,
   definitionName: r = "",
   defaultStyle: n,
-  defaultLanguage: o = "en",
+  defaultLanguage: a = "en",
   defaultDarkMode: t = !1,
-  defaultLocalizeName: a = "",
+  defaultLocalizeName: o = "",
   className: s = "reactaform-container"
 }) => {
-  const i = r, u = a, m = t, l = o, p = G(
+  const i = r, m = o, d = t, l = a, u = J(
     () => n ?? {},
     [n]
-  ), [c, d] = D({}), [b, f] = D({}), [y, x] = D({}), [v, F] = D({});
-  C(() => {
-    let S = !0;
+  ), [c, p] = V({}), [b, f] = V({}), [y, C] = V({}), [x, j] = V({});
+  k(() => {
+    let A = !0;
     return (async () => {
       if (l === "en") {
-        S && (d({}), f({}));
+        A && (p({}), f({}));
         return;
       }
       try {
-        const M = await Dr(l), z = M.success ? M.translations : {};
-        S && d(z);
-        const L = await zr(l, u), J = L.success ? L.translations : {};
-        S && f(J);
+        const $ = await Vr(l), O = $.success ? $.translations : {};
+        A && p(O);
+        const P = await zr(l, m), W = P.success ? P.translations : {};
+        A && f(W);
       } catch {
-        S && (d({}), f({}));
+        A && (p({}), f({}));
       }
     })(), () => {
-      S = !1;
+      A = !1;
     };
-  }, [l, u]), C(() => {
-    F(Bt(p, m)), x(Ht(p, m));
-  }, [p, m]);
-  const R = G(
+  }, [l, m]), k(() => {
+    j(Bt(u, d)), C(Ht(u, d));
+  }, [u, d]);
+  const N = J(
     () => Lr(l, c, b),
     [l, c, b]
-  ), w = Z(
-    (S, ...A) => R(S, ...A),
-    [R]
-  ), j = G(
+  ), v = X(
+    (A, ...R) => N(A, ...R),
+    [N]
+  ), w = J(
     () => ({
       definitionName: i,
       language: l,
-      darkMode: m,
-      formStyle: v,
+      darkMode: d,
+      formStyle: x,
       fieldStyle: y,
-      t: w
+      t: v
     }),
-    [i, l, m, y, v, w]
-  ), I = p?.height ? { height: "100%" } : void 0;
-  return /* @__PURE__ */ g.jsx(Oe.Provider, { value: j, children: /* @__PURE__ */ g.jsx(
+    [i, l, d, y, x, v]
+  ), I = u?.height ? { height: "100%" } : void 0;
+  return /* @__PURE__ */ g.jsx(Me.Provider, { value: w, children: /* @__PURE__ */ g.jsx(
     "div",
     {
-      "data-reactaform-theme": m ? "dark" : "light",
+      "data-reactaform-theme": d ? "dark" : "light",
       className: s,
       style: I,
       children: e
@@ -4414,10 +4537,10 @@ function Wt(e) {
   if (r.properties !== void 0 && !Array.isArray(r.properties)) return "'properties' must be an array if provided";
   if (Array.isArray(r.properties))
     for (let n = 0; n < r.properties.length; n++) {
-      const o = r.properties[n];
-      if (!o || typeof o != "object") return `Property at index ${n} must be an object`;
-      if (!o.name || typeof o.name != "string") return `Property at index ${n} must have a string 'name'`;
-      if (!o.type || typeof o.type != "string") return `Property '${o.name}' must have a string 'type'`;
+      const a = r.properties[n];
+      if (!a || typeof a != "object") return `Property at index ${n} must be an object`;
+      if (!a.name || typeof a.name != "string") return `Property at index ${n} must have a string 'name'`;
+      if (!a.type || typeof a.type != "string") return `Property '${a.name}' must have a string 'type'`;
     }
   return null;
 }
@@ -4426,26 +4549,26 @@ async function sn(e, r = {}) {
   try {
     if (!e || typeof e != "string")
       return { success: !1, error: "jsonData must be a non-empty JSON string" };
-    const o = e.trim();
-    if (!o)
+    const a = e.trim();
+    if (!a)
       return { success: !1, error: "jsonData is empty" };
     let t;
     try {
-      t = JSON.parse(o);
-    } catch (a) {
+      t = JSON.parse(a);
+    } catch (o) {
       return {
         success: !1,
-        error: `Invalid JSON format: ${a instanceof Error ? a.message : "Unknown parsing error"}`
+        error: `Invalid JSON format: ${o instanceof Error ? o.message : "Unknown parsing error"}`
       };
     }
     if (n) {
-      const a = Wt(t);
-      if (a)
-        return { success: !1, error: `Schema validation failed: ${a}` };
+      const o = Wt(t);
+      if (o)
+        return { success: !1, error: `Schema validation failed: ${o}` };
     }
     return { success: !0, definition: t };
-  } catch (o) {
-    return { success: !1, error: `Unexpected error loading definition: ${o instanceof Error ? o.message : "Unknown error"}` };
+  } catch (a) {
+    return { success: !1, error: `Unexpected error loading definition: ${a instanceof Error ? a.message : "Unknown error"}` };
   }
 }
 function Yt(e, r) {
@@ -4459,10 +4582,10 @@ function Yt(e, r) {
       definition: e.name ?? "unknown",
       version: e.version ?? "1.0.0",
       values: {}
-    }, o = e.properties || [];
-    return Array.isArray(o) && o.forEach((t) => {
-      const a = t;
-      a.defaultValue !== void 0 && (n.values[a.name] = a.defaultValue);
+    }, a = e.properties || [];
+    return Array.isArray(a) && a.forEach((t) => {
+      const o = t;
+      o.defaultValue !== void 0 && (n.values[o.name] = o.defaultValue);
     }), { success: !0, instance: n };
   } catch (n) {
     return {
@@ -4497,17 +4620,17 @@ function cn(e) {
 }
 mr();
 function Jt(e) {
-  const [r, n] = D(null);
-  return C(() => {
-    const o = document.querySelector("[data-reactaform-theme]");
-    if (!o) return;
-    const t = o.closest("[data-reactaform-theme]");
+  const [r, n] = V(null);
+  return k(() => {
+    const a = document.querySelector("[data-reactaform-theme]");
+    if (!a) return;
+    const t = a.closest("[data-reactaform-theme]");
     if (!t) return;
-    const a = () => n(t.getAttribute("data-reactaform-theme"));
-    a();
+    const o = () => n(t.getAttribute("data-reactaform-theme"));
+    o();
     const s = new MutationObserver((i) => {
-      for (const u of i)
-        u.type === "attributes" && u.attributeName === "data-reactaform-theme" && a();
+      for (const m of i)
+        m.type === "attributes" && m.attributeName === "data-reactaform-theme" && o();
     });
     return s.observe(t, { attributes: !0, attributeFilter: ["data-reactaform-theme"] }), () => s.disconnect();
   }, [e]), r;
@@ -4516,28 +4639,28 @@ const ln = ({
   definitionData: e,
   instance: r,
   language: n,
-  className: o,
+  className: a,
   darkMode: t,
-  style: a
+  style: o
 }) => {
-  const s = G(() => {
+  const s = J(() => {
     try {
       return typeof e == "string" ? JSON.parse(e) : e ?? null;
     } catch {
       return null;
     }
-  }, [e]), i = { fontSize: "inherit", fontFamily: "inherit", ...a }, u = Jt(), m = t ?? u === "dark", l = n ?? "en";
-  if (C(() => {
+  }, [e]), i = { fontSize: "inherit", fontFamily: "inherit", ...o }, m = Jt(), d = t ?? m === "dark", l = n ?? "en";
+  if (k(() => {
     let c = document.getElementById("popup-root");
     c || (c = document.createElement("div"), c.id = "popup-root", document.body.appendChild(c));
   }, []), !s)
     return /* @__PURE__ */ g.jsx("div", { style: { color: "red" }, children: "Error: No form definition provided." });
-  let p = r;
-  if (!p) {
+  let u = r;
+  if (!u) {
     const c = Yt(s, s.name);
     if (!c.success || !c.instance)
       return /* @__PURE__ */ g.jsx("div", { style: { color: "red" }, children: "Error: Failed to create instance from definition." });
-    p = c.instance;
+    u = c.instance;
   }
   return /* @__PURE__ */ g.jsx(
     Ut,
@@ -4545,14 +4668,14 @@ const ln = ({
       definitionName: s.name,
       defaultStyle: i,
       defaultLanguage: l,
-      defaultDarkMode: m,
+      defaultDarkMode: d,
       defaultLocalizeName: s.localization || "",
-      className: o,
+      className: a,
       children: /* @__PURE__ */ g.jsx(
         qt,
         {
           definition: s,
-          instance: p
+          instance: u
         }
       )
     }
@@ -4568,27 +4691,27 @@ function Gt() {
 }
 Gt();
 export {
-  $ as CSS_CLASSES,
+  M as CSS_CLASSES,
   ln as ReactaForm,
   Ut as ReactaFormProvider,
   qt as ReactaFormRenderer,
-  W as StandardFieldLayout,
-  on as Units,
-  K as combineClasses,
+  U as StandardFieldLayout,
+  an as Units,
+  G as combineClasses,
   Yt as createInstanceFromDefinition,
   nn as deserializeDefinition,
   rn as deserializeInstance,
-  $t as getComponent,
+  Ot as getComponent,
   cn as loadInstance,
   sn as loadJsonDefinition,
-  an as registerComponent,
+  on as registerComponent,
   Qt as registerFieldValidationHandler,
   Zt as registerFormValidationHandler,
-  Vt as registerSubmissionHandler,
+  Dt as registerSubmissionHandler,
   tn as serializeDefinition,
   en as serializeInstance,
   jr as useDebouncedCallback,
-  T as useReactaFormContext,
-  Y as validateFieldValue,
+  L as useReactaFormContext,
+  H as validateFieldValue,
   Nr as validateFormValues
 };