reactaform 1.1.5 → 1.2.0

package/dist/reactaform.es.js

@@ -1,6 +1,6 @@
-import A, { createContext as br, useContext as yr, useRef as k, useEffect as C, useCallback as Z, useState as T, useMemo as G, memo as ve } from "react";
+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";
-const xr = `/* ReactaForm CSS Custom Properties (CSS Variables) */\r
+const vr = `/* ReactaForm CSS Custom Properties (CSS Variables) */\r
 \r
 /* Default Light Theme */\r
 :root {\r
@@ -289,21 +289,21 @@ const xr = `/* ReactaForm CSS Custom Properties (CSS Variables) */\r
 `;
 var be = { exports: {} }, de = {};
 var qe;
-function vr() {
+function wr() {
   if (qe) return de;
   qe = 1;
   var e = Symbol.for("react.transitional.element"), r = Symbol.for("react.fragment");
   function n(o, t, a) {
-    var i = null;
-    if (a !== void 0 && (i = "" + a), t.key !== void 0 && (i = "" + t.key), "key" in t) {
+    var s = null;
+    if (a !== void 0 && (s = "" + a), t.key !== void 0 && (s = "" + t.key), "key" in t) {
       a = {};
-      for (var s in t)
-        s !== "key" && (a[s] = t[s]);
+      for (var i in t)
+        i !== "key" && (a[i] = t[i]);
     } else a = t;
     return t = a.ref, {
       $$typeof: e,
       type: o,
-      key: i,
+      key: s,
       ref: t !== void 0 ? t : null,
       props: a
     };
@@ -312,7 +312,7 @@ function vr() {
 }
 var pe = {};
 var Be;
-function wr() {
+function Sr() {
   return Be || (Be = 1, process.env.NODE_ENV !== "production" && (function() {
     function e(h) {
       if (h == null) return null;
@@ -322,13 +322,13 @@ function wr() {
       switch (h) {
         case y:
           return "Fragment";
-        case S:
+        case v:
           return "Profiler";
         case x:
           return "StrictMode";
         case j:
           return "Suspense";
-        case E:
+        case I:
           return "SuspenseList";
         case M:
           return "Activity";
@@ -337,21 +337,21 @@ function wr() {
         switch (typeof h.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
         ), h.$$typeof) {
-          case p:
+          case f:
             return "Portal";
-          case I:
+          case R:
             return h.displayName || "Context";
           case F:
             return (h._context.displayName || "Context") + ".Consumer";
           case w:
-            var R = h.render;
-            return h = h.displayName, h || (h = R.displayName || R.name || "", h = h !== "" ? "ForwardRef(" + h + ")" : "ForwardRef"), h;
-          case v:
-            return R = h.displayName || null, R !== null ? R : e(h.type) || "Memo";
-          case N:
-            R = h._payload, h = h._init;
+            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 A:
+            E = h._payload, h = h._init;
             try {
-              return e(h(R));
+              return e(h(E));
             } catch {
             }
         }
@@ -363,15 +363,15 @@ function wr() {
     function n(h) {
       try {
         r(h);
-        var R = !1;
+        var E = !1;
       } catch {
-        R = !0;
+        E = !0;
       }
-      if (R) {
-        R = console;
-        var B = R.error, U = typeof Symbol == "function" && Symbol.toStringTag && h[Symbol.toStringTag] || h.constructor.name || "Object";
+      if (E) {
+        E = console;
+        var B = E.error, U = typeof Symbol == "function" && Symbol.toStringTag && h[Symbol.toStringTag] || h.constructor.name || "Object";
         return B.call(
-          R,
+          E,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
           U
         ), r(h);
@@ -379,11 +379,11 @@ function wr() {
     }
     function o(h) {
       if (h === y) return "<>";
-      if (typeof h == "object" && h !== null && h.$$typeof === N)
+      if (typeof h == "object" && h !== null && h.$$typeof === A)
         return "<...>";
       try {
-        var R = e(h);
-        return R ? "<" + R + ">" : "<...>";
+        var E = e(h);
+        return E ? "<" + E + ">" : "<...>";
       } catch {
         return "<...>";
       }
@@ -395,18 +395,18 @@ function wr() {
     function a() {
       return Error("react-stack-top-frame");
     }
-    function i(h) {
+    function s(h) {
       if (J.call(h, "key")) {
-        var R = Object.getOwnPropertyDescriptor(h, "key").get;
-        if (R && R.isReactWarning) return !1;
+        var E = Object.getOwnPropertyDescriptor(h, "key").get;
+        if (E && E.isReactWarning) return !1;
       }
       return h.key !== void 0;
     }
-    function s(h, R) {
+    function i(h, E) {
       function B() {
         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)",
-          R
+          E
         ));
       }
       B.isReactWarning = !0, Object.defineProperty(h, "key", {
@@ -420,12 +420,12 @@ function wr() {
         "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, R, B, U, ne, ae) {
+    function m(h, E, B, U, ne, ae) {
       var _ = B.ref;
       return h = {
         $$typeof: b,
         type: h,
-        key: R,
+        key: E,
         props: B,
         _owner: U
       }, (_ !== void 0 ? _ : null) !== null ? Object.defineProperty(h, "ref", {
@@ -453,23 +453,23 @@ function wr() {
         value: ae
       }), Object.freeze && (Object.freeze(h.props), Object.freeze(h)), h;
     }
-    function l(h, R, B, U, ne, ae) {
-      var _ = R.children;
+    function l(h, E, B, U, ne, ae) {
+      var _ = E.children;
       if (_ !== void 0)
         if (U)
           if (ce(_)) {
             for (U = 0; U < _.length; U++)
-              d(_[U]);
+              p(_[U]);
             Object.freeze && Object.freeze(_);
           } 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 d(_);
-      if (J.call(R, "key")) {
+        else p(_);
+      if (J.call(E, "key")) {
         _ = e(h);
-        var V = Object.keys(R).filter(function(K) {
-          return K !== "key";
+        var V = Object.keys(E).filter(function(X) {
+          return X !== "key";
         });
         U = 0 < V.length ? "{key: someKey, " + V.join(": ..., ") + ": ...}" : "{key: someKey}", O[_ + U] || (V = 0 < V.length ? "{" + V.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
@@ -484,12 +484,12 @@ React keys must be passed directly to JSX without using spread:
           _
         ), O[_ + U] = !0);
       }
-      if (_ = null, B !== void 0 && (n(B), _ = "" + B), i(R) && (n(R.key), _ = "" + R.key), "key" in R) {
+      if (_ = null, B !== void 0 && (n(B), _ = "" + B), s(E) && (n(E.key), _ = "" + E.key), "key" in E) {
         B = {};
-        for (var q in R)
-          q !== "key" && (B[q] = R[q]);
-      } else B = R;
-      return _ && s(
+        for (var q in E)
+          q !== "key" && (B[q] = E[q]);
+      } else B = E;
+      return _ && i(
         B,
         typeof h == "function" ? h.displayName || h.name || "Unknown" : h
       ), m(
@@ -501,39 +501,39 @@ React keys must be passed directly to JSX without using spread:
         ae
       );
     }
-    function d(h) {
-      c(h) ? h._store && (h._store.validated = 1) : typeof h == "object" && h !== null && h.$$typeof === N && (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 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 c(h) {
       return typeof h == "object" && h !== null && h.$$typeof === b;
     }
-    var f = A, b = Symbol.for("react.transitional.element"), p = Symbol.for("react.portal"), y = Symbol.for("react.fragment"), x = Symbol.for("react.strict_mode"), S = Symbol.for("react.profiler"), F = Symbol.for("react.consumer"), I = Symbol.for("react.context"), w = Symbol.for("react.forward_ref"), j = Symbol.for("react.suspense"), E = Symbol.for("react.suspense_list"), v = Symbol.for("react.memo"), N = Symbol.for("react.lazy"), M = Symbol.for("react.activity"), z = Symbol.for("react.client.reference"), L = f.__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 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() {
       return null;
     };
-    f = {
+    d = {
       react_stack_bottom_frame: function(h) {
         return h();
       }
     };
-    var ue, Q = {}, oe = f.react_stack_bottom_frame.bind(
-      f,
+    var ue, Q = {}, oe = d.react_stack_bottom_frame.bind(
+      d,
       a
     )(), P = re(o(a)), O = {};
-    pe.Fragment = y, pe.jsx = function(h, R, B) {
+    pe.Fragment = y, pe.jsx = function(h, E, B) {
       var U = 1e4 > L.recentlyCreatedOwnerStacks++;
       return l(
         h,
-        R,
+        E,
         B,
         !1,
         U ? Error("react-stack-top-frame") : oe,
         U ? re(o(h)) : P
       );
-    }, pe.jsxs = function(h, R, B) {
+    }, pe.jsxs = function(h, E, B) {
       var U = 1e4 > L.recentlyCreatedOwnerStacks++;
       return l(
         h,
-        R,
+        E,
         B,
         !0,
         U ? Error("react-stack-top-frame") : oe,
@@ -543,12 +543,12 @@ React keys must be passed directly to JSX without using spread:
   })()), pe;
 }
 var He;
-function Sr() {
-  return He || (He = 1, process.env.NODE_ENV === "production" ? be.exports = vr() : be.exports = wr()), be.exports;
+function Cr() {
+  return He || (He = 1, process.env.NODE_ENV === "production" ? be.exports = wr() : be.exports = Sr()), be.exports;
 }
-var g = Sr();
-const Oe = br(void 0), D = () => {
-  const e = yr(Oe);
+var g = Cr();
+const Oe = yr(void 0), T = () => {
+  const e = xr(Oe);
   if (!e)
     throw new Error("❌ useReactaFormContext must be used within a <ReactaFormProvider>");
   return e;
@@ -591,8 +591,8 @@ class we {
     return this.get(r) ?? n;
   }
 }
-function Cr(e, r = 300, n) {
-  const o = k(void 0), t = k(e), a = k(null), i = k(!1);
+function jr(e, r = 300, n) {
+  const o = k(void 0), t = k(e), a = k(null), s = k(!1);
   C(() => {
     t.current = e;
   }, [e]), C(
@@ -601,30 +601,30 @@ function Cr(e, r = 300, n) {
     },
     []
   );
-  const s = Z(() => {
-    o.current !== void 0 && (window.clearTimeout(o.current), o.current = void 0), a.current = null, i.current = !1;
+  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)
       try {
         t.current(...a.current);
       } finally {
-        a.current = null, i.current = !1;
+        a.current = null, s.current = !1;
       }
   }, []);
   return { callback: Z(
     (...l) => {
-      if (n?.leading === !0 && !i.current) {
-        i.current = !0, t.current(...l), window.clearTimeout(o.current), o.current = window.setTimeout(() => {
-          i.current = !1, o.current = void 0;
+      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;
         }, 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, i.current = !1);
+        o.current = void 0, a.current && (t.current(...a.current), a.current = null, s.current = !1);
       }, r);
     },
     [r, n?.leading]
-  ), cancel: s, flush: u };
+  ), cancel: i, flush: u };
 }
 const $ = {
   field: "reactaform-field",
@@ -635,16 +635,16 @@ const $ = {
   inputSelect: "reactaform-select",
   rangeInput: "reactaform-input--range",
   button: "reactaform-button"
-}, X = (...e) => {
+}, K = (...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);
     }));
   return r.join(" ");
-}, Ze = ({ content: e, size: r = "medium", animation: n = !0 }) => {
-  const { t: o, darkMode: t, formStyle: a, fieldStyle: i } = D(), [s, u] = T(!1), [m, l] = T({ x: 0, y: 0 }), [d, c] = T(!1), f = k(null), b = k(null), p = k(null), y = G(() => {
-    const I = {
+}, 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 = {
       icon: {
         display: "inline-flex",
         alignItems: "center",
@@ -686,53 +686,53 @@ const $ = {
         opacity: 1,
         visibility: "visible"
       }
-    }, w = (E, v, N) => {
-      const z = E?.[v];
-      return (N && z ? z[N] : void 0) ?? {};
+    }, w = (I, S, A) => {
+      const z = I?.[S];
+      return (A && z ? z[A] : void 0) ?? {};
     };
     return {
-      icon: { ...I.icon, ...w(a, "tooltip", "icon"), ...w(i, "tooltip", "icon") },
-      text: { ...I.text, ...w(a, "tooltip", "text"), ...w(i, "tooltip", "text") },
-      textVisible: I.textVisible
+      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
     };
-  }, [t, r, n, a, i]);
+  }, [t, r, n, a, s]);
   C(() => {
-    if (s) {
-      const F = requestAnimationFrame(() => c(!1)), I = requestAnimationFrame(() => {
-        if (f.current) {
-          const w = f.current.getBoundingClientRect(), j = 8;
-          p.current = w;
-          const E = w.right + j, v = w.top;
-          l({ x: E, y: v }), c(!0);
+    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);
         }
       });
       return () => {
-        cancelAnimationFrame(I), cancelAnimationFrame(F);
+        cancelAnimationFrame(R), cancelAnimationFrame(F);
       };
     } else
       requestAnimationFrame(() => c(!1));
-  }, [s]), C(() => {
-    if (!d) return;
+  }, [i]), C(() => {
+    if (!p) return;
     const F = requestAnimationFrame(() => {
       if (!b.current) return;
-      const I = b.current.getBoundingClientRect(), w = 8, j = typeof window < "u" ? window.innerWidth : 1024, E = typeof window < "u" ? window.innerHeight : 768;
-      let v = m.x, N = m.y;
-      const M = p.current;
-      M && (v = M.right + w, N = M.top + M.height / 2 - I.height / 2 + -4, v + I.width > j - w && (v = M.left - w - I.width)), v + I.width > j - w && (v = Math.max(w, j - I.width - w)), v < w && (v = w), N + I.height > E - w && (N = Math.max(w, E - I.height - w)), N < w && (N = w), (v !== m.x || N !== m.y) && l({ x: v, y: N });
+      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 });
     });
     return () => cancelAnimationFrame(F);
-  }, [d, m.x, m.y]);
-  const x = typeof document < "u" ? document.getElementById("popup-root") : null, S = /* @__PURE__ */ g.jsx(
+  }, [p, m.x, m.y]);
+  const x = typeof document < "u" ? document.getElementById("popup-root") : null, v = /* @__PURE__ */ g.jsx(
     "div",
     {
       ref: b,
       style: {
         ...y.text,
-        transform: d ? "translateY(0) scale(1)" : "translateY(-4px) scale(0.98)",
+        transform: p ? "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
-        ...d ? y.textVisible : {},
+        ...p ? y.textVisible : {},
         top: m.y,
         left: m.x
       },
@@ -745,7 +745,7 @@ const $ = {
       "span",
       {
         "data-testid": "tooltip-icon",
-        ref: f,
+        ref: d,
         onMouseEnter: () => u(!0),
         onMouseLeave: () => u(!1),
         style: {
@@ -754,7 +754,7 @@ const $ = {
         children: "?"
       }
     ),
-    s && (x ? Me.createPortal(S, x) : S)
+    i && (x ? Me.createPortal(v, x) : v)
   ] });
 }, Re = ve(({
   field: e,
@@ -762,7 +762,7 @@ const $ = {
   children: n,
   showLabel: o = !0
 }) => {
-  const { t } = D(), a = e?.labelLayout === "column-center" ? "center" : "left";
+  const { t } = T(), a = e?.labelLayout === "column-center" ? "center" : "left";
   return /* @__PURE__ */ g.jsxs(
     "div",
     {
@@ -799,7 +799,7 @@ const $ = {
             },
             children: [
               /* @__PURE__ */ g.jsx("div", { style: { flex: 1, minWidth: 0, maxWidth: "100%" }, children: /* @__PURE__ */ g.jsx("div", { style: { width: "100%" }, children: n }) }),
-              e.tooltip && /* @__PURE__ */ g.jsx(Ze, { content: e.tooltip })
+              e.tooltip && /* @__PURE__ */ g.jsx(er, { content: e.tooltip })
             ]
           }
         ),
@@ -809,17 +809,17 @@ const $ = {
   );
 });
 Re.displayName = "ColumnFieldLayout";
-const Qe = ve(({
+const rr = ve(({
   field: e,
   error: r,
   children: n,
   rightAlign: o = !1
 }) => {
-  const { t } = D(), a = G(() => ({
+  const { t } = T(), a = G(() => ({
     display: "flex",
     flexDirection: "column",
     gap: 0
-  }), []), i = G(() => ({
+  }), []), s = G(() => ({
     display: "flex",
     flexDirection: "row",
     alignItems: "center",
@@ -836,7 +836,7 @@ const Qe = ve(({
       }
     ),
     /* @__PURE__ */ g.jsxs("div", { style: a, children: [
-      /* @__PURE__ */ g.jsxs("div", { style: i, children: [
+      /* @__PURE__ */ g.jsxs("div", { style: s, children: [
         o ? /* @__PURE__ */ g.jsx(
           "div",
           {
@@ -850,19 +850,19 @@ const Qe = ve(({
             children: n
           }
         ) : n,
-        e.tooltip && /* @__PURE__ */ g.jsx(Ze, { content: e.tooltip })
+        e.tooltip && /* @__PURE__ */ g.jsx(er, { content: e.tooltip })
       ] }),
       r && /* @__PURE__ */ g.jsx($e, { children: r })
     ] })
   ] });
 });
-Qe.displayName = "RowFieldLayout";
+rr.displayName = "RowFieldLayout";
 const W = ({
   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(Qe, { field: e, error: r, rightAlign: o, children: n }), $e = ve(({ children: e }) => {
+}) => 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(() => ({
     color: "var(--reactaform-error-color)",
     fontSize: "13px",
@@ -876,8 +876,8 @@ const W = ({
   return /* @__PURE__ */ g.jsx("div", { style: r, children: e });
 });
 $e.displayName = "ErrorDiv";
-const er = ve(({ name: e, onChange: r }) => {
-  const { t: n } = D();
+const tr = ve(({ name: e, onChange: r }) => {
+  const { t: n } = T();
   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(
@@ -917,8 +917,8 @@ const er = ve(({ name: e, onChange: r }) => {
     /* @__PURE__ */ g.jsx("div", { style: { height: "1px", backgroundColor: "var(--reactaform-separator, #e6e6e6)", marginTop: 12, marginBottom: 12 } })
   ] });
 });
-er.displayName = "InstanceName";
-class jr extends we {
+tr.displayName = "InstanceName";
+class kr extends we {
   registerInCategory(r, n, o) {
     this.get(r) || this.register(r, {});
     const t = this.get(r);
@@ -934,26 +934,26 @@ class jr extends we {
     return this.list();
   }
 }
-const rr = new we(), tr = new jr();
-function Xt(e, r) {
-  rr.register(e, r);
+const nr = new we(), or = new kr();
+function Zt(e, r) {
+  nr.register(e, r);
 }
-function Zt(e, r, n) {
-  tr.registerInCategory(e, r, n);
+function Qt(e, r, n) {
+  or.registerInCategory(e, r, n);
 }
-function kr(e, r) {
-  return tr.getFromCategory(e, r) || null;
+function Rr(e, r) {
+  return or.getFromCategory(e, r) || null;
 }
-function Rr(e) {
-  return rr.get(e) || null;
+function Er(e) {
+  return nr.get(e) || null;
 }
 const Ce = /* @__PURE__ */ new Map(), je = /* @__PURE__ */ new Map();
 function Y(e, r, n, o) {
   if (r && typeof r.validationHandlerName == "string") {
     const t = `${e}:${r.validationHandlerName}`;
     if (!Ce.has(t)) {
-      const i = kr(e, r.validationHandlerName);
-      Ce.set(t, i);
+      const s = Rr(e, r.validationHandlerName);
+      Ce.set(t, s);
     }
     const a = Ce.get(t);
     if (a)
@@ -961,11 +961,11 @@ function Y(e, r, n, o) {
   }
   return null;
 }
-function Er(e, r, n) {
+function Nr(e, r, n) {
   if (e && typeof e.validationHandlerName == "string") {
     const o = e.validationHandlerName;
     if (!je.has(o)) {
-      const a = Rr(o);
+      const a = Er(o);
       je.set(o, a);
     }
     const t = je.get(o);
@@ -982,7 +982,7 @@ function Ve(e) {
   const r = e;
   return typeof r.name == "string" && typeof r.displayName == "string";
 }
-function nr(e) {
+function ar(e) {
   if (!ie(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));
@@ -995,14 +995,14 @@ function Ee(e) {
     return !!r && typeof r.name == "string" && typeof r.size == "number";
   }
 }
-function Qt(e, r, n = {}) {
+function en(e, r, n = {}) {
   try {
     const {
       includeMetadata: o = !1,
       dateFormat: t = "iso",
       fileHandling: a = "metadata",
-      prettify: i = !1,
-      excludeFields: s = [],
+      prettify: s = !1,
+      excludeFields: i = [],
       includeOnlyFields: u = []
     } = n;
     if (!e || typeof e != "object")
@@ -1010,9 +1010,9 @@ function Qt(e, r, n = {}) {
         success: !1,
         error: "Instance must be a valid object"
       };
-    const m = [], l = [], d = {}, f = (nr(r) || ie(r) && Array.isArray(r.properties) ? r.properties : []).filter(Ve), b = new Map(f.map((y) => [y.name, y]));
+    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)) {
-      if (s.includes(y)) {
+      if (i.includes(y)) {
         l.push(y);
         continue;
       }
@@ -1021,23 +1021,23 @@ function Qt(e, r, n = {}) {
         continue;
       }
       if (x === void 0) continue;
-      const S = b.get(y);
+      const v = b.get(y);
       try {
-        d[y] = Nr(x, S, { dateFormat: t, fileHandling: a });
+        p[y] = Ir(x, v, { dateFormat: t, fileHandling: a });
       } catch (F) {
-        m.push(`Error serializing field '${y}': ${String(F)}`), d[y] = null;
+        m.push(`Error serializing field '${y}': ${String(F)}`), p[y] = null;
       }
     }
-    return o && (d._metadata = {
+    return o && (p._metadata = {
       serializedAt: (/* @__PURE__ */ new Date()).toISOString(),
       version: (ie(r) ? r.version : void 0) || "1.0.0",
-      fieldCount: Object.keys(d).length - 1
+      fieldCount: Object.keys(p).length - 1
       // Exclude metadata itself
     }), {
       success: !0,
-      data: i ? JSON.stringify(d, null, 2) : JSON.stringify(d),
+      data: s ? JSON.stringify(p, null, 2) : JSON.stringify(p),
       metadata: {
-        fieldCount: Object.keys(d).length,
+        fieldCount: Object.keys(p).length,
         excludedFields: l,
         warnings: m
       }
@@ -1049,7 +1049,7 @@ function Qt(e, r, n = {}) {
     };
   }
 }
-function Nr(e, r, n = {}) {
+function Ir(e, r, n = {}) {
   const { dateFormat: o = "iso", fileHandling: t = "metadata" } = n;
   if (e == null)
     return null;
@@ -1119,50 +1119,50 @@ function Ye(e, r) {
     _note: "Base64 encoding requires async implementation"
   };
 }
-function en(e, r, n = {}) {
+function rn(e, r, n = {}) {
   try {
     const {
       strict: o = !1,
       validateTypes: t = !0,
       preserveUnknownFields: a = !0,
-      dateFormat: i = "auto"
+      dateFormat: s = "auto"
     } = n;
     if (!e || typeof e != "string")
       return {
         success: !1,
         error: "Serialized data must be a non-empty string"
       };
-    let s;
+    let i;
     try {
-      s = JSON.parse(e);
-    } catch (p) {
+      i = JSON.parse(e);
+    } catch (f) {
       return {
         success: !1,
-        error: `Invalid JSON: ${p instanceof Error ? p.message : "Unknown parsing error"}`
+        error: `Invalid JSON: ${f instanceof Error ? f.message : "Unknown parsing error"}`
       };
     }
-    if (!s || typeof s != "object")
+    if (!i || typeof i != "object")
       return {
         success: !1,
         error: "Parsed data must be an object"
       };
-    const u = [], m = [], l = {}, c = (nr(r) || ie(r) && Array.isArray(r.properties) ? r.properties : []).filter(Ve), f = new Map(c.map((p) => [p.name, p]));
-    for (const p of c) {
-      const y = p.name, x = s[y];
+    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]));
+    for (const f of c) {
+      const y = f.name, x = i[y];
       if (x === void 0) {
-        o && p.required && m.push(`Required field '${y}' is missing`);
+        o && f.required && m.push(`Required field '${y}' is missing`);
         continue;
       }
       try {
-        l[y] = Ir(x, p, { validateTypes: t, dateFormat: i });
-      } catch (S) {
-        const F = `Error deserializing field '${y}': ${String(S)}`;
+        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);
       }
     }
     if (a)
-      for (const [p, y] of Object.entries(s))
-        !f.has(p) && p !== "_metadata" && (o && u.push(`Unknown field '${p}' preserved`), l[p] = y);
+      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;
     return {
       success: !b,
@@ -1177,7 +1177,7 @@ function en(e, r, n = {}) {
     };
   }
 }
-function Ir(e, r, n = {}) {
+function Ar(e, r, n = {}) {
   const { validateTypes: o = !0, dateFormat: t = "auto" } = n;
   if (e == null)
     return e;
@@ -1186,7 +1186,7 @@ function Ir(e, r, n = {}) {
       case "date":
       case "datetime":
       case "date-time":
-        return Ar(e, t, o);
+        return Fr(e, t, o);
       case "int":
       case "integer":
         return Ne(e, o);
@@ -1194,7 +1194,7 @@ function Ir(e, r, n = {}) {
       case "number":
         return Ie(e, o);
       case "boolean":
-        return Fr(e, o);
+        return Mr(e, o);
       case "int-array":
         return Je(e, "integer", o);
       case "float-array":
@@ -1214,7 +1214,7 @@ function Ir(e, r, n = {}) {
     return e;
   }
 }
-function rn(e, r = {}) {
+function tn(e, r = {}) {
   try {
     const { prettify: n = !0, includeMetadata: o = !0 } = r;
     if (!e || typeof e != "object")
@@ -1243,7 +1243,7 @@ function rn(e, r = {}) {
     };
   }
 }
-function tn(e, r = {}) {
+function nn(e, r = {}) {
   try {
     const { strict: n = !1, validateTypes: o = !0 } = r;
     let t;
@@ -1263,11 +1263,11 @@ function tn(e, r = {}) {
         success: !1,
         error: "Input must be a string or object"
       };
-    const a = [], i = [], s = ["name", "version", "displayName"];
-    for (const l of s)
+    const a = [], s = [], i = ["name", "version", "displayName"];
+    for (const l of i)
       if (!t[l])
         if (n)
-          i.push(`Required field '${l}' is missing`);
+          s.push(`Required field '${l}' is missing`);
         else
           switch (a.push(`Missing field '${l}', using default`), l) {
             case "name":
@@ -1281,20 +1281,20 @@ function tn(e, r = {}) {
               break;
           }
     const u = Array.isArray(t.properties) ? t.properties : null;
-    u ? t.properties = u.map((l, d) => {
-      const c = ie(l) ? l : {}, f = { ...c };
+    u ? t.properties = u.map((l, p) => {
+      const c = ie(l) ? l : {}, d = { ...c };
       if (!c.name) {
-        const b = `Property at index ${d} missing 'name'`;
-        n ? i.push(b) : (a.push(`${b}, using 'field_${d}'`), f.name = `field_${d}`);
+        const b = `Property at index ${p} missing 'name'`;
+        n ? s.push(b) : (a.push(`${b}, using 'field_${p}'`), d.name = `field_${p}`);
       }
-      return c.displayName || (f.displayName = c.name || `Field ${d}`), c.type || (n && o ? i.push(`Property '${c.name || d}' missing 'type'`) : (a.push(`Property '${c.name || d}' missing 'type', using 'string'`), f.type = "string")), c.defaultValue === void 0 && (f.defaultValue = null), c.required === void 0 && (f.required = !1), f;
-    }) : n ? i.push("Properties must be an array") : (a.push("Properties not found or invalid, using empty array"), t.properties = []);
-    const m = i.length > 0;
+      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 {
       success: !m,
       data: t,
       warnings: a.length > 0 ? a : void 0,
-      validationErrors: m ? i : void 0
+      validationErrors: m ? s : void 0
     };
   } catch (n) {
     return {
@@ -1303,7 +1303,7 @@ function tn(e, r = {}) {
     };
   }
 }
-function Ar(e, r, n) {
+function Fr(e, r, n) {
   if (e instanceof Date)
     return e;
   if (typeof e == "number") {
@@ -1348,7 +1348,7 @@ function Ie(e, r) {
     throw new Error(`Cannot convert ${typeof e} to number`);
   return e;
 }
-function Fr(e, r) {
+function Mr(e, r) {
   if (typeof e == "boolean")
     return e;
   if (typeof e == "string") {
@@ -1382,60 +1382,60 @@ function Je(e, r, n) {
     }
   });
 }
-const Mr = (e, r) => {
+const Or = (e, r) => {
   const n = /* @__PURE__ */ new Map();
   let o = null, t = null, a = 0;
-  for (const i of e) {
-    const s = i.group;
-    if (!s) {
+  for (const s of e) {
+    const i = s.group;
+    if (!i) {
       o = null, t = null;
       continue;
     }
-    if (s === o)
-      r[i.name].group = t ?? s;
+    if (i === o)
+      r[s.name].group = t ?? i;
     else {
-      if (!n.has(s))
-        n.set(s, 1), t = null, r[i.name].group = s;
+      if (!n.has(i))
+        n.set(i, 1), t = null, r[s.name].group = i;
       else {
-        const u = n.get(s), m = `${s}(${u})`;
-        n.set(s, u + 1), t = m, r[i.name].group = m, a++;
+        const u = n.get(i), m = `${i}(${u})`;
+        n.set(i, u + 1), t = m, r[s.name].group = m, a++;
       }
-      o = s;
+      o = i;
     }
   }
   return a;
-}, Or = (e, r = {}) => {
+}, $r = (e, r = {}) => {
   const { includeEmpty: n = !0 } = r, o = [];
-  let t = null, a = [], i = 0;
+  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 && i++, o.push({ name: t, fields: a })), t = m, a = [u]) : a.push(u);
+    m !== t ? ((a.length > 0 || n) && (a.length === 0 && s++, o.push({ name: t, fields: a })), t = m, a = [u]) : a.push(u);
   }
-  (a.length > 0 || n) && (a.length === 0 && i++, o.push({ name: t, fields: a }));
-  const s = Math.max(0, ...o.map((u) => u.fields.length));
+  (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));
   return {
     groups: o,
     metadata: {
       totalGroups: o.length,
-      emptyGroups: i,
-      largestGroup: s
+      emptyGroups: s,
+      largestGroup: i
     }
   };
-}, ke = /* @__PURE__ */ new Map(), ye = /* @__PURE__ */ new Map(), se = /* @__PURE__ */ new Set(), Ae = /* @__PURE__ */ new Map(), $r = async (e) => {
+}, ke = /* @__PURE__ */ new Map(), ye = /* @__PURE__ */ new Map(), se = /* @__PURE__ */ new Set(), Ae = /* @__PURE__ */ new Map(), Vr = async (e) => {
   try {
     let r;
     switch (e.toLowerCase()) {
       case "fr":
-        r = (await import("./common-BnnwzTl2.js")).default;
+        r = (await import("./common-CTK4jqc5.js")).default;
         break;
       case "de":
-        r = (await import("./common-BQcVe8MY.js")).default;
+        r = (await import("./common-ClNcU_yE.js")).default;
         break;
       case "es":
-        r = (await import("./common-DLqVHgfX.js")).default;
+        r = (await import("./common-DXEjsP3o.js")).default;
         break;
       case "zh-cn":
-        r = (await import("./common-Bzz0clAC.js")).default;
+        r = (await import("./common-DRxsgpaH.js")).default;
         break;
       case "en":
         r = {};
@@ -1455,7 +1455,7 @@ const Mr = (e, r) => {
       error: `Failed to load common translations for ${e}: ${r}`
     };
   }
-}, Vr = async (e) => {
+}, Dr = async (e) => {
   if (!e)
     return { success: !1, translations: {}, error: "Language is required" };
   const r = e.toLowerCase();
@@ -1467,13 +1467,13 @@ const Mr = (e, r) => {
       translations: ke.get(r) || {},
       fromCache: !0
     };
-  const n = await $r(r);
+  const n = await Vr(r);
   return n.success && (ke.set(r, n.translations), Ae.set(r, {
     loadedAt: /* @__PURE__ */ new Date(),
     size: Object.keys(n.translations).length,
     source: "common"
   })), n;
-}, Tr = async (e, r) => {
+}, zr = async (e, r) => {
   if (!e || !r)
     return {
       success: !1,
@@ -1515,22 +1515,22 @@ const Mr = (e, r) => {
       });
     }
     const a = t.headers.get("content-type") || "";
-    !a.includes("application/json") && !a.includes("text/json") && or() && console.warn(
+    !a.includes("application/json") && !a.includes("text/json") && sr() && console.warn(
       `Translation file at ${o} has unexpected content-type: ${a}`
     );
-    const i = await t.text();
-    if (!i) {
+    const s = await t.text();
+    if (!s) {
       const m = "Empty translation file";
       return se.add(n), { success: !1, translations: {}, error: m };
     }
-    let s;
+    let i;
     try {
-      s = JSON.parse(i);
+      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 };
     }
-    if (!s || typeof s != "object") {
+    if (!i || typeof i != "object") {
       const m = "Invalid translation file format";
       return se.add(n), {
         success: !1,
@@ -1539,7 +1539,7 @@ const Mr = (e, r) => {
       };
     }
     const u = Object.fromEntries(
-      Object.entries(s).map(([m, l]) => [
+      Object.entries(i).map(([m, l]) => [
         m,
         typeof l == "string" ? l : String(l)
       ])
@@ -1570,7 +1570,7 @@ const Mr = (e, r) => {
     };
   }
 };
-function or() {
+function sr() {
   try {
     if (typeof process < "u" && process?.env?.NODE_ENV === "development")
       return !0;
@@ -1578,7 +1578,7 @@ function or() {
   }
   return !1;
 }
-function zr(e, r) {
+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)
@@ -1590,12 +1590,12 @@ function zr(e, r) {
     }
   });
 }
-const Dr = (e, r, n) => (o, ...t) => {
-  let a = o, i = !1;
-  return !o || typeof o != "string" ? String(o || "") : (e.toLowerCase() === "en" ? (a = o, i = !0) : Object.prototype.hasOwnProperty.call(n, o) ? (a = n[o], i = !0) : Object.prototype.hasOwnProperty.call(r, o) ? (a = r[o], i = !0) : a = o, a = zr(a, t), !i && or() && console.debug(
+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);
-}, Te = {
+}, De = {
   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"],
@@ -1657,7 +1657,7 @@ const Dr = (e, r, n) => (o, ...t) => {
     rad: "Radian (rad)",
     rev: "Revolution (rev)"
   }
-}, De = {
+}, Te = {
   length: {
     mm: 1e3,
     cm: 100,
@@ -1712,52 +1712,52 @@ const Dr = (e, r, n) => (o, ...t) => {
     rad: Math.PI / 180,
     rev: 1 / 360
   }
-}, Le = {}, Lr = /* @__PURE__ */ new Set([
-  ...Object.keys(Te),
+}, Le = {}, Pr = /* @__PURE__ */ new Set([
+  ...Object.keys(De),
   ...Object.keys(ze),
-  ...Object.keys(De)
+  ...Object.keys(Te)
 ]);
-for (const e of Lr) {
-  const r = {}, n = Te[e] ?? [], o = ze[e] ?? {}, t = De[e] ?? {};
+for (const e of Pr) {
+  const r = {}, n = De[e] ?? [], o = ze[e] ?? {}, t = Te[e] ?? {};
   for (const a of n) {
-    const i = o[a];
+    const s = o[a];
     r[a] = {
-      name: typeof i == "string" ? i : String(a),
+      name: typeof s == "string" ? s : String(a),
       shortName: a,
       factor: Object.prototype.hasOwnProperty.call(t, a) ? t[a] : void 0
     };
   }
-  for (const [a, i] of Object.entries(o))
+  for (const [a, s] of Object.entries(o))
     if (!r[a]) {
-      const s = typeof i == "string" ? i : String(a);
-      r[a] = { name: s, shortName: a, factor: Object.prototype.hasOwnProperty.call(t, a) ? t[a] : void 0 };
+      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 [a, i] of Object.entries(t))
-    r[a] || (r[a] = { name: String(a), shortName: String(a), factor: i });
+  for (const [a, s] of Object.entries(t))
+    r[a] || (r[a] = { name: String(a), shortName: String(a), factor: s });
   Le[e] = r;
 }
-const nn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const on = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   dimensionUnitDisplayMap: ze,
-  dimensionUnitsMap: Te,
-  dimensonUnitFactorsMap: De,
+  dimensionUnitsMap: De,
+  dimensonUnitFactorsMap: Te,
   unitsByDimension: Le
-}, Symbol.toStringTag, { value: "Module" })), Pr = ({
+}, Symbol.toStringTag, { value: "Module" })), _r = ({
   field: e,
   value: r,
   onChange: n,
   onError: o
 }) => {
-  const { definitionName: t, t: a } = D(), i = k(o);
+  const { definitionName: t, t: a } = T(), s = k(o);
   C(() => {
-    i.current = o;
+    s.current = o;
   }, [o]), C(() => {
     const l = Y(t, e, r ?? !1, a);
-    i.current?.(l ?? null);
+    s.current?.(l ?? null);
   }, [r, e, t, a]);
-  const s = (l) => {
-    const d = l.target.checked;
-    n?.(d, null);
+  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;
@@ -1778,7 +1778,7 @@ const nn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
         "data-testid": "boolean-checkbox",
         type: "checkbox",
         checked: !!r,
-        onChange: s,
+        onChange: i,
         onKeyDown: u,
         "aria-checked": !!r,
         style: {
@@ -1810,62 +1810,62 @@ const nn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   { label: "Light Gray", value: "#d3d3d3" },
   { label: "Pink", value: "#ffc0cb" }
 ];
-function ar(e) {
+function ir(e) {
   return /^#([0-9A-F]{3}){1,2}$/i.test(e);
 }
-function _r(e) {
-  if (!ar(e)) return null;
-  const r = sr(e), n = parseInt(r.slice(1), 16);
+function qr(e) {
+  if (!ir(e)) return null;
+  const r = cr(e), n = parseInt(r.slice(1), 16);
   return {
     r: n >> 16 & 255,
     g: n >> 8 & 255,
     b: n & 255
   };
 }
-function sr(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 qr = ({ field: e, value: r, onChange: n, onError: o }) => {
-  const { t, definitionName: a } = D(), [i, s] = T("#000000"), u = A.useRef(null), m = A.useRef(null), l = A.useRef(o);
-  A.useEffect(() => {
+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 && ar(r) ? r : "#000000", S = sr(x);
-    s(S);
-  }, [r]), A.useEffect(() => {
+    const x = r && ir(r) ? r : "#000000", v = cr(x);
+    i(v);
+  }, [r]), N.useEffect(() => {
     const x = Y(a, e, r ?? "#000000", t);
     l.current?.(x ?? null);
   }, [r, e, a, t]);
-  const d = (x) => {
-    const S = x.target.value;
-    s(S), n?.(S, null);
+  const p = (x) => {
+    const v = x.target.value;
+    i(v), n?.(v, null);
   }, c = (x) => {
-    const S = x.target.value;
-    s(S), n?.(S, null);
-  }, f = Ge.find(
-    (x) => x.value === i
-  ), { r: b, g: p, b: y } = _r(i) || { r: 0, g: 0, b: 0 };
+    const v = x.target.value;
+    i(v), n?.(v, null);
+  }, d = 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: [
     /* @__PURE__ */ g.jsxs(
       "select",
       {
         ref: u,
         id: e.name,
-        value: i,
-        onChange: d,
+        value: s,
+        onChange: p,
         style: { minWidth: "120px", flex: 1 },
-        className: X($.input, $.inputSelect),
+        className: K($.input, $.inputSelect),
         children: [
           Ge.map((x) => /* @__PURE__ */ g.jsx("option", { value: x.value, children: t(x.label) }, x.value)),
-          f ? null : /* @__PURE__ */ g.jsxs("option", { value: i, children: [
+          d ? null : /* @__PURE__ */ g.jsxs("option", { value: s, children: [
             "(",
             b,
             ", ",
-            p,
+            f,
             ", ",
             y,
             ")"
-          ] }, i)
+          ] }, s)
         ]
       }
     ),
@@ -1878,7 +1878,7 @@ const qr = ({ field: e, value: r, onChange: n, onError: o }) => {
           display: "inline-block",
           border: "1px solid #ccc",
           borderRadius: "4px",
-          backgroundColor: i,
+          backgroundColor: s,
           cursor: "pointer",
           overflow: "hidden",
           flexShrink: 0
@@ -1888,7 +1888,7 @@ const qr = ({ field: e, value: r, onChange: n, onError: o }) => {
           {
             ref: m,
             type: "color",
-            value: i,
+            value: s,
             onChange: c,
             style: {
               opacity: 0,
@@ -1907,7 +1907,7 @@ const qr = ({ field: e, value: r, onChange: n, onError: o }) => {
   if (!e) return null;
   const r = new Date(e);
   return isNaN(r.getTime()) ? null : r;
-}, Br = (e) => {
+}, Hr = (e) => {
   if (!e) return "";
   if (/^\d{4}-\d{2}-\d{2}$/.test(e))
     return ge(e) ? e : "";
@@ -1917,37 +1917,37 @@ const qr = ({ field: e, value: r, onChange: n, onError: o }) => {
     return `${o}-${t}-${a}`;
   }
   return "";
-}, Hr = ({
+}, Ur = ({
   field: e,
   value: r,
   onChange: n,
   onError: o
 }) => {
-  const { t, definitionName: a } = D(), { name: i, required: s } = e, u = k(null), m = k(o);
+  const { t, definitionName: a } = T(), { name: s, required: i } = e, u = k(null), m = k(o);
   C(() => {
     m.current = o;
   }, [o]);
-  const l = A.useCallback((c) => {
+  const l = N.useCallback((c) => {
     if (!c || c.trim() === "")
-      return s ? t("Value required") : null;
+      return i ? t("Value required") : null;
     if (c) {
       const b = ge(c);
       if (!b) return t("Invalid date format");
       if (e.minDate) {
-        const p = ge(e.minDate);
-        if (p && b.getTime() < p.getTime())
+        const f = ge(e.minDate);
+        if (f && b.getTime() < f.getTime())
           return t("Date must be on or after {{1}}", e.minDate);
       }
       if (e.maxDate) {
-        const p = ge(e.maxDate);
-        if (p && b.getTime() > p.getTime())
+        const f = ge(e.maxDate);
+        if (f && b.getTime() > f.getTime())
           return t("Date must be on or before {{1}}", e.maxDate);
       }
     }
     return Y(a, e, c, t) ?? null;
-  }, [e, a, t, s]), d = (c) => {
-    const f = c.target.value, b = l(f);
-    n?.(f, b);
+  }, [e, a, t, i]), p = (c) => {
+    const d = c.target.value, b = l(d);
+    n?.(d, b);
   };
   return C(() => {
     const c = l(r);
@@ -1955,50 +1955,50 @@ const qr = ({ field: e, value: r, onChange: n, onError: o }) => {
   }, [r, l]), /* @__PURE__ */ g.jsx(W, { field: e, error: l(r), children: /* @__PURE__ */ g.jsx(
     "input",
     {
-      id: i,
+      id: s,
       type: "date",
-      value: Br(r),
-      onChange: d,
-      className: X($.input, $.textInput),
+      value: Hr(r),
+      onChange: p,
+      className: K($.input, $.textInput),
       ...e.minDate ? { min: e.minDate } : {},
       ...e.maxDate ? { max: e.maxDate } : {},
       "aria-invalid": !!l(r),
-      "aria-describedby": l(r) ? `${i}-error` : void 0
+      "aria-describedby": l(r) ? `${s}-error` : void 0
     }
   ) });
-}, Ur = ({
+}, Wr = ({
   field: e,
   value: r,
   onChange: n,
   onError: o
 }) => {
-  const { t, definitionName: a } = D(), i = k(null), s = k(o);
+  const { t, definitionName: a } = T(), s = k(null), i = k(o);
   C(() => {
-    s.current = o;
+    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]
   );
   C(() => {
-    const l = r != null ? String(r) : "", d = u(l);
-    if (d && e.options && e.options.length > 0) {
+    const l = r != null ? String(r) : "", p = u(l);
+    if (p && e.options && e.options.length > 0) {
       const c = String(e.options[0].value);
-      i.current && (i.current.value = c), n?.(c, null), s.current?.(null);
+      s.current && (s.current.value = c), n?.(c, null), i.current?.(null);
     } else
-      i.current && (i.current.value = l), s.current?.(d ?? null);
+      s.current && (s.current.value = l), i.current?.(p ?? null);
   }, [r, u, n, e.options]);
   const m = (l) => {
-    const d = l.target.value, c = u(d);
-    n?.(d, c);
+    const p = l.target.value, c = u(p);
+    n?.(p, c);
   };
   return /* @__PURE__ */ g.jsx(W, { field: e, error: u(String(r ?? "")), children: /* @__PURE__ */ g.jsx(
     "select",
     {
       defaultValue: String(r ?? ""),
-      ref: i,
+      ref: s,
       onChange: m,
-      className: X(
+      className: K(
         $.input,
         $.inputSelect
       ),
@@ -2006,45 +2006,45 @@ const qr = ({ field: e, value: r, onChange: n, onError: o }) => {
     }
   ) });
 };
-function Wr(e) {
+function Yr(e) {
   return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);
 }
-const Yr = ({
+const Jr = ({
   field: e,
   value: r,
   onChange: n,
   onError: o
 }) => {
-  const { definitionName: t, t: a } = D(), i = k(null), s = A.useCallback(
-    (d) => {
-      const c = d.trim();
-      return c === "" ? e.required ? a("Value required") : null : Wr(c) ? e.pattern && !new RegExp(e.pattern).test(c) ? a("Email does not match pattern: {{%1}}", {
+  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}}", {
         "%1": `${e.pattern}`
-      }) : Y(t, e, d, a) ?? null : a("Must be valid email format");
+      }) : Y(t, e, p, a) ?? null : a("Must be valid email format");
     },
     [e, t, a]
-  ), u = (d) => {
-    const c = d.target.value, f = s(c);
-    n?.(c, f);
+  ), 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 d = r ?? "", c = s(d);
-    i.current && i.current.value !== String(d) && (i.current.value = String(d)), c !== m.current && (m.current = c, l.current?.(c ?? null));
-  }, [r, s]), /* @__PURE__ */ g.jsx(W, { field: e, error: s(String(r ?? "")), children: /* @__PURE__ */ g.jsx(
+    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(
     "input",
     {
       id: e.name,
       type: "email",
       defaultValue: String(r ?? ""),
-      ref: i,
+      ref: s,
       onChange: u,
-      className: X($.input, $.textInput)
+      className: K($.input, $.textInput)
     }
   ) });
-}, Jr = ({ field: e }) => {
-  const { darkMode: r } = D(), {
+}, Gr = ({ field: e }) => {
+  const { darkMode: r } = T(), {
     color: n = r ? "#444444" : "#CCCCCC",
     thickness: o = 1,
     margin: t = "8px 0"
@@ -2061,254 +2061,254 @@ const Yr = ({
       }
     }
   );
-};
-function ir({
-  pos: e,
-  options: r,
-  onClose: n,
-  onClickOption: o
-}) {
-  const t = k(null), a = k(!1), i = typeof window < "u" ? document.getElementById("popup-root") || document.body : null;
-  if (C(() => {
-    function f(b) {
-      a.current || b.target.dataset?.popupMenu === "item" || t.current && b.target instanceof Node && !t.current.contains(b.target) && n();
+}, 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);
+  }, [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];
     }
-    return document.addEventListener("mousedown", f), () => document.removeEventListener("mousedown", f);
-  }, [n]), !i || r === void 0 || r.length === 0 || !e || e.x == null || e.y == null) return null;
-  const s = e.x, u = e.y, m = typeof window < "u" ? window.innerWidth : 1024, l = Math.max(0, m - 160), d = Math.max(0, Math.min(s, l)), c = Math.max(0, u);
-  return Me.createPortal(
-    /* @__PURE__ */ g.jsx(
+    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);
+    }
+  }, 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);
+    } else {
+      const F = l(null);
+      n?.(null, F);
+    }
+  }, x = () => {
+    const v = Array.isArray(r) ? r : r ? [r] : [];
+    return v.length === 0 ? null : /* @__PURE__ */ g.jsx("div", { style: {
+      marginTop: "8px",
+      display: "flex",
+      flexDirection: "column",
+      gap: "6px"
+    }, children: v.map((F, R) => /* @__PURE__ */ g.jsxs(
       "div",
       {
-        ref: t,
-        onMouseDown: (f) => {
-          f.stopPropagation();
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          padding: "6px 10px",
+          backgroundColor: "var(--reactaform-input-bg, #fff)",
+          border: "1px solid var(--reactaform-border-color, #d1d5db)",
+          borderRadius: "4px",
+          fontSize: "0.875rem",
+          gap: "8px"
         },
+        children: [
+          /* @__PURE__ */ g.jsx("div", { style: {
+            flex: 1,
+            minWidth: 0,
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
+          }, children: F.name }),
+          /* @__PURE__ */ g.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => y(Array.isArray(r) ? R : void 0),
+              "aria-label": t("Remove file"),
+              style: {
+                background: "transparent",
+                border: "none",
+                color: "var(--reactaform-color-error, #ef4444)",
+                cursor: "pointer",
+                padding: "2px 6px",
+                fontSize: "1.125rem",
+                lineHeight: 1,
+                borderRadius: "4px",
+                transition: "background-color 0.2s",
+                flexShrink: 0
+              },
+              onMouseEnter: (w) => {
+                w.currentTarget.style.backgroundColor = "var(--reactaform-bg-hover, #fee)";
+              },
+              onMouseLeave: (w) => {
+                w.currentTarget.style.backgroundColor = "transparent";
+              },
+              children: "×"
+            }
+          )
+        ]
+      },
+      `${F.name}-${R}`
+    )) });
+  };
+  return /* @__PURE__ */ g.jsx(W, { field: e, error: p, children: /* @__PURE__ */ g.jsxs("div", { style: { width: "100%" }, children: [
+    /* @__PURE__ */ g.jsxs(
+      "div",
+      {
+        onDrop: d,
+        onDragOver: b,
+        onDragLeave: f,
         style: {
-          position: "fixed",
-          top: c,
-          left: d,
-          backgroundColor: "var(--reactaform-primary-bg, #fff)",
-          border: "1px solid var(--reactaform-border-color, #ccc)",
+          position: "relative",
+          border: `1px dashed ${s ? "var(--reactaform-color-primary, #2563eb)" : p ? "var(--reactaform-color-error, #ef4444)" : "var(--reactaform-border-color, #d1d5db)"}`,
           borderRadius: "var(--reactaform-border-radius, 4px)",
-          boxShadow: "var(--reactaform-shadow, 0 2px 10px rgba(0,0,0,0.2))",
-          zIndex: 9999,
-          minWidth: "var(--reactaform-menu-min-width, 150px)",
-          pointerEvents: "auto"
+          padding: "8px 12px",
+          textAlign: "center",
+          backgroundColor: s ? "var(--reactaform-bg-hover, #f0f9ff)" : "var(--reactaform-input-bg, #fff)",
+          transition: "all 0.2s ease",
+          cursor: "pointer",
+          minHeight: "var(--reactaform-input-height, 34px)",
+          width: "100%",
+          maxWidth: "100%",
+          alignSelf: "stretch",
+          boxSizing: "border-box",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "8px"
         },
-        children: r.map((f, b) => /* @__PURE__ */ g.jsx(
-          "div",
-          {
-            "data-popup-menu": "item",
-            onMouseDown: (p) => {
-              p.stopPropagation(), a.current = !0;
-            },
-            onClick: (p) => {
-              p.stopPropagation(), p.preventDefault(), o(f), n(), setTimeout(() => {
-                a.current = !1;
-              }, 100);
-            },
-            style: {
-              padding: "var(--reactaform-menu-item-padding, 8px 12px)",
-              cursor: "pointer",
-              fontSize: "var(--reactaform-menu-item-font-size, 0.8em)",
-              borderBottom: b < r.length - 1 ? "1px solid var(--reactaform-border-light, #eee)" : void 0,
-              transition: "background-color 0.15s ease"
-            },
-            onMouseEnter: (p) => {
-              p.currentTarget.style.backgroundColor = "var(--reactaform-hover-bg, #e0e0e0)";
-            },
-            onMouseLeave: (p) => {
-              p.currentTarget.style.backgroundColor = "transparent";
-            },
-            children: f.label
-          },
-          f.label ?? b
-        ))
+        onClick: () => u.current?.click(),
+        children: [
+          /* @__PURE__ */ g.jsx(
+            "input",
+            {
+              id: e.name,
+              ref: u,
+              type: "file",
+              accept: e.accept,
+              multiple: e.multiple,
+              style: {
+                display: "none"
+              },
+              onChange: c
+            }
+          ),
+          /* @__PURE__ */ g.jsx("div", { style: {
+            fontSize: "1.25rem",
+            opacity: 0.6,
+            lineHeight: 1,
+            flexShrink: 0
+          }, children: "📁" }),
+          /* @__PURE__ */ g.jsx("div", { style: {
+            fontSize: "0.875rem",
+            fontWeight: 400,
+            color: "var(--reactaform-text-color, #111827)",
+            flex: 1,
+            textAlign: "left"
+          }, children: s ? t("Drop files here") : e.multiple ? t("Choose Files or Drag & Drop") : t("Choose File or Drag & Drop") }),
+          e.accept && /* @__PURE__ */ g.jsx("div", { style: {
+            fontSize: "0.75rem",
+            color: "var(--reactaform-text-muted, #6b7280)",
+            whiteSpace: "nowrap",
+            opacity: s ? 0 : 1,
+            transition: "opacity 0.15s ease",
+            pointerEvents: s ? "none" : "auto"
+          }, children: e.accept })
+        ]
       }
     ),
-    i
-  );
-}
-const Gr = ({ field: e, value: r, onChange: n, onError: o }) => {
-  const { t, definitionName: a } = D(), [i, s] = T(!1), [u, m] = T(null), [l, d] = T([]), c = k(null), f = k(o);
-  C(() => {
-    f.current = o;
-  }, [o]);
-  const b = A.useCallback(
-    (S) => e.required && (!S || Array.isArray(S) && S.length === 0) ? t("Value required") : Y(a, e, S, t) ?? null,
-    [e, a, t]
-  ), p = A.useMemo(() => b(r), [r, b]);
-  C(() => {
-    const S = b(r);
-    n?.(r, S), f.current?.(S ?? null);
-  }, [r, b]);
-  const y = (S) => {
-    const F = S.target.files;
-    let I = null;
-    F && F.length > 0 && (I = e.multiple ? Array.from(F) : F[0]);
-    const w = b(I);
-    n?.(I, w);
-  }, x = (S) => {
-    if (p)
-      return;
-    let F = null;
-    try {
-      F = S.currentTarget.getBoundingClientRect();
-    } catch {
-      F = null;
-    }
-    const I = F && typeof F.left == "number" ? F.left : 10, w = F && typeof F.bottom == "number" ? F.bottom : 20;
-    m({ x: I, y: w });
-    let j = [];
-    Array.isArray(r) ? j = r ? r.map((E) => ({ label: E.name })) : [] : j = r ? [{ label: r.name }] : [], j.length === 0 && (j = [{ label: t("No file selected") }]), d(j), s((E) => !E);
-  };
-  return /* @__PURE__ */ g.jsx(W, { field: e, error: p, children: /* @__PURE__ */ g.jsxs(
-    "div",
-    {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: "var(--reactaform-inline-gap, 8px)",
-        width: "100%"
-      },
-      children: [
-        /* @__PURE__ */ g.jsx(
-          "input",
-          {
-            id: e.name,
-            ref: c,
-            type: "file",
-            accept: e.accept,
-            multiple: e.multiple,
-            style: {
-              width: 0,
-              height: 0,
-              opacity: 0,
-              position: "absolute",
-              zIndex: -1
-            },
-            onChange: y
-          }
-        ),
-        /* @__PURE__ */ g.jsx(
-          "label",
-          {
-            htmlFor: e.name,
-            className: $.button,
-            style: {
-              width: "100%",
-              height: "inherit",
-              textAlign: "center"
-            },
-            children: e.multiple ? t("Choose Files...") : t("Choose File...")
-          }
-        ),
-        /* @__PURE__ */ g.jsx(
-          "button",
-          {
-            onClick: x,
-            "aria-haspopup": !0,
-            "aria-expanded": i,
-            "aria-label": t("Show selected files"),
-            className: $.button,
-            style: {
-              height: "inherit",
-              display: "inline-block"
-            },
-            children: /* @__PURE__ */ g.jsx("span", { children: "⋮" })
-          }
-        ),
-        i && u && l && l.length > 0 && /* @__PURE__ */ g.jsx(
-          ir,
-          {
-            pos: u,
-            options: l,
-            onClose: () => {
-              m(null), s(!1);
-            },
-            onClickOption: () => {
-            }
-          }
-        )
-      ]
-    }
-  ) });
-}, Kr = /^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][-+]?\d+)?$/;
-function Xr(e) {
-  return e.split(",").map((r) => r.trim()).every((r) => Kr.test(r));
+    x()
+  ] }) });
+}, Xr = /^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][-+]?\d+)?$/;
+function Zr(e) {
+  return e.split(",").map((r) => r.trim()).every((r) => Xr.test(r));
 }
-const Zr = (e) => !e || e.trim() === "" ? [] : e.split(",").map((r) => r.trim()).filter(Boolean).map(Number), Qr = ({
+const Qr = (e) => !e || e.trim() === "" ? [] : e.split(",").map((r) => r.trim()).filter(Boolean).map(Number), et = ({
   field: e,
   value: r,
   onChange: n,
   onError: o
 }) => {
-  const { t, definitionName: a } = D(), [i, s] = T(
+  const { t, definitionName: a } = T(), [s, i] = D(
     Array.isArray(r) ? r.join(", ") : String(r ?? "")
-  ), u = A.useCallback(
+  ), u = N.useCallback(
     (c) => {
       if (c.trim() === "")
         return e.required ? t("Value required") : null;
-      if (!Xr(c))
+      if (!Zr(c))
         return t("Each value must be a valid float");
-      const f = Zr(c);
-      if (e.minCount !== void 0 && f.length < e.minCount)
+      const d = Qr(c);
+      if (e.minCount !== void 0 && d.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 && d.length > e.maxCount)
         return t("Maximum number of values: {{1}}", e.maxCount);
-      for (const p of f) {
-        if (e.min !== void 0 && (e.minInclusive ? p < e.min : p <= e.min))
+      for (const f of d) {
+        if (e.min !== void 0 && (e.minInclusive ? f < e.min : f <= e.min))
           return t(
             "Each value must be {{1}} {{2}}",
             e.minInclusive ? "≥" : ">",
             e.min
           );
-        if (e.max !== void 0 && (e.maxInclusive ? p > e.max : p >= e.max))
+        if (e.max !== void 0 && (e.maxInclusive ? f > e.max : f >= e.max))
           return t(
             "Each value must be {{1}} {{2}}",
             e.maxInclusive ? "≤" : "<",
             e.max
           );
       }
-      return Y(a, e, f, t) ?? null;
+      return Y(a, e, d, t) ?? null;
     },
     [a, e, t]
   ), m = (c) => {
-    const f = c.target.value, b = u(f);
-    s(f), n?.(f, b);
-  }, l = k(null), d = k(o);
+    const d = c.target.value, b = u(d);
+    i(d), n?.(d, b);
+  }, l = k(null), p = k(o);
   return C(() => {
-    d.current = o;
+    p.current = o;
   }, [o]), C(() => {
-    const c = Array.isArray(r) ? r.join(", ") : String(r ?? ""), f = u(c);
-    f !== l.current && (l.current = f, d.current?.(f ?? null));
-  }, [r, e.required, u, t]), /* @__PURE__ */ g.jsx(W, { field: e, error: u(i), children: /* @__PURE__ */ g.jsx(
+    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(
     "input",
     {
       type: "text",
-      value: i,
+      value: s,
       onChange: m,
-      className: X($.input, $.textInput),
+      className: K($.input, $.textInput),
       style: { flex: 1 }
     }
   ) });
-}, et = /^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][-+]?\d+)?$/, rt = (e) => {
+}, rt = /^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][-+]?\d+)?$/, tt = (e) => {
   const r = Number.parseFloat(e);
   return Number.isNaN(r) ? null : r;
-}, tt = ({
+}, nt = ({
   field: e,
   value: r,
   onChange: n,
   onError: o
 }) => {
-  const { t, definitionName: a } = D(), i = k(null), s = A.useCallback(
-    (d) => {
-      if (d.trim() === "")
+  const { t, definitionName: a } = T(), s = k(null), i = N.useCallback(
+    (p) => {
+      if (p.trim() === "")
         return e.required ? t("Value required") : null;
-      if (!et.test(d))
+      if (!rt.test(p))
         return t("Must be a valid float");
-      const c = rt(d);
+      const c = tt(p);
       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 ? "≥" : ">",
@@ -2324,29 +2324,29 @@ const Zr = (e) => !e || e.trim() === "" ? [] : e.split(",").map((r) => r.trim())
   C(() => {
     m.current = o;
   }, [o]), C(() => {
-    const d = String(r ?? ""), c = s(d);
-    c !== u.current && (u.current = c, m.current?.(c ?? null)), i.current && document.activeElement !== i.current && (i.current.value = d);
-  }, [r, e, s, t]);
-  const l = (d) => {
-    const c = d.target.value, f = s(c);
-    n?.(c, f);
+    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);
+  }, [r, e, i, t]);
+  const l = (p) => {
+    const c = p.target.value, d = i(c);
+    n?.(c, d);
   };
-  return /* @__PURE__ */ g.jsx(W, { field: e, error: s(String(r ?? "")), children: /* @__PURE__ */ g.jsx(
+  return /* @__PURE__ */ g.jsx(W, { field: e, error: i(String(r ?? "")), children: /* @__PURE__ */ g.jsx(
     "input",
     {
       id: e.name,
       type: "text",
       defaultValue: String(r ?? ""),
-      ref: i,
+      ref: s,
       onChange: l,
-      className: X(
+      className: K(
         $.input,
         $.inputNumber
       )
     }
   ) });
 };
-function nt() {
+function ot() {
   try {
     return "/";
   } catch {
@@ -2358,46 +2358,46 @@ function nt() {
   }
   return "/";
 }
-const ot = ({ field: e, value: r }) => {
-  const { language: n, t: o } = D(), t = e.alignment || "center", a = {
+const at = ({ field: e, value: r }) => {
+  const { language: n, t: o } = T(), t = e.alignment || "center", a = {
     left: "flex-start",
     center: "center",
     right: "flex-end"
-  }, i = typeof r == "string" ? r : "";
-  let s = i && i.trim() !== "" ? i : typeof e.defaultValue == "string" ? e.defaultValue : "";
-  s && !s.startsWith("/") && (s = `${nt()}${s}`);
-  const u = e.localized?.split(";").map((y) => y.trim()), [m, l] = T(s || ""), d = k(s || null);
+  }, 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(() => {
-    if (!s) return;
-    const y = s.split("/"), x = y.pop(), S = x.lastIndexOf(".");
-    if (S === -1) return;
-    const F = x.substring(0, S), I = x.substring(S);
+    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}${I}`);
+    u?.includes(n) && (w = `${F}_${n}${R}`);
     const j = new AbortController();
     if (w) {
-      const E = [...y, w].join("/");
-      fetch(E, { method: "HEAD", signal: j.signal }).then((v) => {
-        const N = v.ok ? E : s;
-        N !== d.current && (d.current = N, l(N));
+      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));
       }).catch(() => {
-        s !== d.current && (d.current = s, l(s));
+        i !== p.current && (p.current = i, l(i));
       });
     } else {
-      const E = s;
-      E !== d.current && (d.current = E, requestAnimationFrame(() => l(E)));
+      const I = i;
+      I !== p.current && (p.current = I, requestAnimationFrame(() => l(I)));
     }
     return () => {
       j.abort();
     };
-  }, [s, n, u]), !m) return null;
-  const { width: c, height: f } = e, b = {}, p = {
+  }, [i, n, u]), !m) return null;
+  const { width: c, height: d } = e, b = {}, f = {
     borderRadius: "8px",
     objectFit: "contain",
     boxShadow: "0 2px 6px rgba(0,0,0,0.1)",
     margin: "0 0 8px 0"
   };
-  return c && f ? (b.width = c, b.height = f, p.width = `${c}px`, p.height = `${f}px`) : c && !f ? (b.width = c, p.width = `${c}px`, p.height = "auto") : !c && f && (b.height = f, p.width = "auto", p.height = `${f}px`), /* @__PURE__ */ g.jsx(W, { field: e, children: /* @__PURE__ */ g.jsx(
+  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(
     "div",
     {
       "data-testid": "image-wrapper",
@@ -2412,36 +2412,36 @@ const ot = ({ field: e, value: r }) => {
           src: m,
           alt: o?.(e.displayName || "Image") || e.displayName || "Image",
           ...b,
-          style: p
+          style: f
         }
       )
     }
   ) });
 };
-function at(e) {
+function st(e) {
   const r = /^-?\d+$/;
   return e.split(",").map((n) => n.trim()).every((n) => r.test(n));
 }
-const st = ({
+const it = ({
   field: e,
   value: r,
   onChange: n,
   onError: o
 }) => {
-  const { t, definitionName: a } = D(), i = ",", [s, u] = T(
-    Array.isArray(r) ? r.join(i + " ") : String(r ?? "")
-  ), m = (b) => !b || b.trim() === "" ? [] : b.split(i).map((p) => p.trim()).filter(Boolean).map((p) => Number(p)), l = A.useCallback(
+  const { t, definitionName: a } = T(), s = ",", [i, u] = D(
+    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() === "")
         return e.required ? t("Value required") : null;
-      if (!at(b))
+      if (!st(b))
         return t("Each value must be a valid integer");
-      const p = m(b);
-      if (e.minCount !== void 0 && p.length < e.minCount)
+      const f = m(b);
+      if (e.minCount !== void 0 && f.length < e.minCount)
         return t("Minimum number of values: {{1}}", `${e.minCount}`);
-      if (e.maxCount !== void 0 && p.length > e.maxCount)
+      if (e.maxCount !== void 0 && f.length > e.maxCount)
         return t("Maximum number of values: {{1}}", `${e.maxCount}`);
-      for (const x of p) {
+      for (const x of f) {
         if (e.min !== void 0 && (e.minInclusive ? x < e.min : x <= e.min))
           return t(
             "Each value must be {{1}} {{2}}",
@@ -2455,83 +2455,83 @@ const st = ({
             e.max
           );
       }
-      return Y(a, e, p, t) ?? null;
+      return Y(a, e, f, t) ?? null;
     },
     [a, e, t]
-  ), d = (b) => {
-    const p = b.target.value, y = l(p);
-    u(p), n?.(p, y);
-  }, c = k(null), f = k(
+  ), p = (b) => {
+    const f = b.target.value, y = l(f);
+    u(f), n?.(f, y);
+  }, c = k(null), d = k(
     o
   );
   return C(() => {
-    f.current = o;
+    d.current = o;
   }, [o]), C(() => {
-    const b = Array.isArray(r) ? r.join(i + " ") : String(r ?? ""), p = l(b);
-    p !== c.current && (c.current = p, f.current?.(p ?? null));
-  }, [r, e.required, l, t]), /* @__PURE__ */ g.jsx(W, { field: e, error: l(s), children: /* @__PURE__ */ g.jsx(
+    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(
     "input",
     {
       type: "text",
-      value: s,
-      onChange: d,
-      className: X($.input, $.textInput),
+      value: i,
+      onChange: p,
+      className: K($.input, $.textInput),
       style: { flex: 1 }
     }
   ) });
 };
-function it(e) {
+function ct(e) {
   return /^[-+]?\d*$/.test(e);
 }
-const ct = ({
+const lt = ({
   field: e,
   value: r,
   onChange: n,
   onError: o
 }) => {
-  const { t, definitionName: a } = D(), i = k(null), s = Z((c) => {
-    const f = parseInt(c, 10);
-    return Number.isNaN(f) ? null : f;
-  }, []), u = A.useCallback(
+  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() === "")
         return e.required ? t("Value required") : null;
-      if (!it(c))
+      if (!ct(c))
         return t("Must be a valid integer");
-      const f = s(c);
-      if (f === null) return t("Must be a valid integer");
-      if (e.min !== void 0 && (e.minInclusive ? f < e.min : f <= e.min))
+      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))
         return t(
           "Must be {{1}} {{2}}",
           e.minInclusive ? "≥" : ">",
           e.min
         );
-      if (e.max !== void 0 && (e.maxInclusive ? f > e.max : f >= e.max))
+      if (e.max !== void 0 && (e.maxInclusive ? d > e.max : d >= e.max))
         return t(
           "Must be {{1}} {{2}}",
           e.maxInclusive ? "≤" : "<",
           e.max
         );
       if (e.step !== void 0) {
-        const p = Number(e.step);
-        if (!Number.isInteger(p))
+        const f = Number(e.step);
+        if (!Number.isInteger(f))
           return t("Invalid step value");
-        if (f % p !== 0)
-          return t("Must be a multiple of {{1}}", p);
+        if (d % f !== 0)
+          return t("Must be a multiple of {{1}}", f);
       }
-      return Y(a, e, f, t) ?? null;
+      return Y(a, e, d, t) ?? null;
     },
-    [e, a, t, s]
+    [e, a, t, i]
   ), m = k(null), l = k(o);
   C(() => {
     l.current = o;
   }, [o]), C(() => {
-    const c = String(r ?? ""), f = u(c);
-    f !== m.current && (m.current = f, l.current?.(f ?? null)), i.current && document.activeElement !== i.current && (i.current.value = 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 d = (c) => {
-    const f = c.target.value, b = u(f);
-    n?.(f, b);
+  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(
     "input",
@@ -2539,51 +2539,51 @@ const ct = ({
       id: e.name,
       type: "text",
       defaultValue: String(r ?? ""),
-      ref: i,
-      onChange: d,
-      className: X(
+      ref: s,
+      onChange: p,
+      className: K(
         $.input,
         $.inputNumber
       )
     }
   ) });
-}, lt = ({
+}, ut = ({
   field: e,
   value: r,
   onChange: n,
   onError: o
 }) => {
-  const { t, definitionName: a } = D(), i = e.minHeight ?? "80px", s = A.useRef(null), u = A.useRef(null), m = A.useRef(
+  const { t, definitionName: a } = T(), s = e.minHeight ?? "80px", i = N.useRef(null), u = N.useRef(null), m = N.useRef(
     o
   );
-  A.useEffect(() => {
+  N.useEffect(() => {
     m.current = o;
   }, [o]);
-  const l = A.useCallback(
-    (f) => f.trim() === "" ? 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) : Y(a, e, f, t),
+  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]
-  ), d = (f) => {
-    const b = f.target.value, p = l(b);
-    n?.(b, p);
+  ), p = (d) => {
+    const b = d.target.value, f = l(b);
+    n?.(b, f);
   };
   C(() => {
-    const f = l(r);
-    f !== u.current && (u.current = f, m.current?.(f ?? null)), s.current && s.current.value !== String(r ?? "") && (s.current.value = String(r ?? ""));
+    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 ?? ""));
   }, [r, l]);
   const c = {
     defaultValue: String(r ?? ""),
-    ref: s,
-    onChange: d,
+    ref: i,
+    onChange: p,
     style: {
       resize: "vertical",
-      minHeight: i,
+      minHeight: s,
       width: "100%",
       boxSizing: "border-box"
     },
-    className: X($.input, $.textInput)
+    className: K($.input, $.textInput)
   };
   return /* @__PURE__ */ g.jsx(W, { field: e, error: l(r), children: /* @__PURE__ */ g.jsx("textarea", { ...c }) });
-}, ut = ({
+}, mt = ({
   field: e,
   value: r,
   onChange: n,
@@ -2593,28 +2593,28 @@ const ct = ({
   C(() => {
     t.current = o;
   }, [o]);
-  const { t: a, darkMode: i, formStyle: s, fieldStyle: u, definitionName: m } = D(), l = (v, N, M) => {
-    if (!N) return {};
-    const L = v?.[N];
+  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) ?? {};
-  }, d = k(null), [c, f] = T(!1), [b, p] = T(
+  }, p = k(null), [c, d] = D(!1), [b, f] = D(
     null
   ), y = G(
-    () => e.options.map((v) => ({ value: v.value, label: a(v.label) })),
+    () => e.options.map((S) => ({ value: S.value, label: a(S.label) })),
     [e.options, a]
   ), x = G(() => {
-    const v = Array.isArray(r) ? r : [], N = new Set(y.map((M) => M.value));
-    return v.filter((M) => N.has(M));
-  }, [r, y]), S = (v) => {
-    const N = Array.isArray(v) ? v : [];
-    return e.required && N.length === 0 ? a("Value required") : Y(m, e, N, a) ?? null;
+    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 (!d.current) return;
-    const v = d.current.getBoundingClientRect();
-    p({ x: v.left, y: v.bottom }), f((N) => !N);
-  }, I = (v) => {
-    const N = x.includes(v) ? x.filter((z) => z !== v) : [...x, v], M = S(N);
-    t.current?.(M ?? null), n?.(N, M);
+    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(() => ({
     height: "var(--reactaform-input-height, 2.5rem)",
     padding: "var(--reactaform-input-padding, 8px)",
@@ -2627,9 +2627,9 @@ const ct = ({
     border: "1px solid var(--reactaform-border-color, #ccc)",
     background: "var(--reactaform-secondary-bg, #fff)",
     color: "var(--reactaform-text-color, #000)",
-    ...l(s, "multiSelect", "control"),
+    ...l(i, "multiSelect", "control"),
     ...l(u, void 0, "control")
-  }), [s, u]), j = G(() => ({
+  }), [i, u]), j = G(() => ({
     position: "absolute",
     right: "1.5em",
     top: "50%",
@@ -2640,9 +2640,9 @@ const ct = ({
     fontSize: "0.8em",
     color: "var(--reactaform-text-muted, #999)",
     padding: 0,
-    ...l(s, "multiSelect", "clearButton"),
+    ...l(i, "multiSelect", "clearButton"),
     ...l(u, void 0, "clearButton")
-  }), [s, u]), E = G(() => ({
+  }), [i, u]), I = G(() => ({
     position: "absolute",
     right: "0.7em",
     top: "50%",
@@ -2650,14 +2650,14 @@ const ct = ({
     pointerEvents: "none",
     fontSize: "0.8em",
     color: "var(--reactaform-text-muted, #999)",
-    ...l(s, "multiSelect", "arrow"),
+    ...l(i, "multiSelect", "arrow"),
     ...l(u, void 0, "arrow")
-  }), [s, u]);
+  }), [i, u]);
   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(
       "div",
       {
-        ref: d,
+        ref: p,
         className: "reactaform-multiselection-control",
         style: w,
         onClick: F,
@@ -2665,8 +2665,8 @@ const ct = ({
         role: "button",
         "aria-haspopup": "listbox",
         "aria-expanded": c,
-        onKeyDown: (v) => {
-          (v.key === "Enter" || v.key === " ") && (v.preventDefault(), F());
+        onKeyDown: (S) => {
+          (S.key === "Enter" || S.key === " ") && (S.preventDefault(), F());
         },
         children: [
           /* @__PURE__ */ g.jsxs(
@@ -2686,44 +2686,44 @@ const ct = ({
             {
               type: "button",
               "aria-label": "Clear selections",
-              onClick: (v) => {
-                v.stopPropagation(), n?.([], null);
+              onClick: (S) => {
+                S.stopPropagation(), n?.([], null);
               },
               style: j,
               children: /* @__PURE__ */ g.jsx("span", { style: j, "aria-hidden": !0, children: "✖" })
             }
           ),
-          /* @__PURE__ */ g.jsx("span", { style: E, "aria-hidden": !0, children: "▼" })
+          /* @__PURE__ */ g.jsx("span", { style: I, "aria-hidden": !0, children: "▼" })
         ]
       }
     ) }) }),
     c && b && /* @__PURE__ */ g.jsx(
-      mt,
+      ft,
       {
         position: b,
         options: y,
         selectedValues: x,
-        onToggleOption: I,
-        onClose: () => f(!1),
-        controlRef: d,
-        darkMode: i
+        onToggleOption: R,
+        onClose: () => d(!1),
+        controlRef: p,
+        darkMode: s
       }
     )
   ] });
-}, mt = ({
+}, ft = ({
   position: e,
   options: r,
   selectedValues: n,
   onToggleOption: o,
   onClose: t,
   controlRef: a,
-  darkMode: i
+  darkMode: s
 }) => {
-  const s = k(null), [u, m] = T(-1), { formStyle: l, fieldStyle: d } = D(), c = (j, E, v) => {
-    if (!E) return {};
-    const M = j?.[E];
-    return (v && M ? M[v] : void 0) ?? {};
-  }, f = G(() => ({
+  const i = k(null), [u, m] = D(-1), { formStyle: l, fieldStyle: p } = T(), c = (j, I, S) => {
+    if (!I) return {};
+    const M = j?.[I];
+    return (S && M ? M[S] : void 0) ?? {};
+  }, d = G(() => ({
     maxHeight: 200,
     overflowY: "auto",
     background: "var(--reactaform-secondary-bg, #fff)",
@@ -2735,8 +2735,8 @@ const ct = ({
     color: "var(--reactaform-text-color, #000)",
     fontSize: "var(--reactaform-popup-font-size, 0.875rem)",
     ...c(l, "multiSelect", "popup"),
-    ...c(d, void 0, "popup")
-  }), [l, d]), b = G(() => ({
+    ...c(p, void 0, "popup")
+  }), [l, p]), b = G(() => ({
     padding: "6px 8px",
     cursor: "pointer",
     display: "flex",
@@ -2744,40 +2744,40 @@ const ct = ({
     background: "transparent",
     color: "var(--reactaform-text-color, #000)",
     ...c(l, "multiSelect", "option"),
-    ...c(d, void 0, "option")
-  }), [l, d]);
+    ...c(p, void 0, "option")
+  }), [l, p]);
   C(() => {
-    const j = (E) => {
-      const v = E.target;
-      !s.current?.contains(v) && !a.current?.contains(v) && t();
+    const j = (I) => {
+      const S = I.target;
+      !i.current?.contains(S) && !a.current?.contains(S) && t();
     };
     return document.addEventListener("mousedown", j), () => document.removeEventListener("mousedown", j);
   }, [t, a]), C(() => {
-    s.current && r.length > 0 && requestAnimationFrame(() => m((j) => j === -1 ? 0 : j));
+    i.current && r.length > 0 && requestAnimationFrame(() => m((j) => j === -1 ? 0 : j));
   }, [r.length]), C(() => {
-    if (!s.current || u < 0) return;
-    const j = s.current.querySelector(`#multi-opt-${u}`);
+    if (!i.current || u < 0) return;
+    const j = i.current.querySelector(`#multi-opt-${u}`);
     j && requestAnimationFrame(() => j.focus());
   }, [u]);
-  const p = 250, y = 200, [x, S] = T(
+  const f = 250, y = 200, [x, v] = D(
     null
-  ), [F, I] = T(null);
+  ), [F, R] = D(null);
   if (C(() => {
     if (typeof window > "u") return;
     const j = () => {
-      let N = e.x, M = e.y, z = p;
+      let A = e.x, M = e.y, z = f;
       const L = a?.current;
       if (L) {
         const J = L.getBoundingClientRect();
-        N = J.left, M = J.bottom, z = Math.max(80, Math.round(J.width));
+        A = J.left, M = J.bottom, z = Math.max(80, Math.round(J.width));
       }
-      N = Math.min(N, window.innerWidth - z), M = Math.min(M, window.innerHeight - y), S({ left: N, top: M }), I(z);
+      A = Math.min(A, window.innerWidth - z), M = Math.min(M, window.innerHeight - y), v({ left: A, top: M }), R(z);
     };
     j(), window.addEventListener("scroll", j, !0), window.addEventListener("resize", j);
-    let E = null;
-    const v = a?.current;
-    return typeof ResizeObserver < "u" && v && (E = new ResizeObserver(() => j()), E.observe(v)), () => {
-      window.removeEventListener("scroll", j, !0), window.removeEventListener("resize", j), E && v && E.unobserve(v);
+    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);
     };
   }, [a, e.x, e.y]), typeof window > "u") return null;
   let w = document.getElementById("popup-root");
@@ -2785,27 +2785,27 @@ const ct = ({
     /* @__PURE__ */ g.jsx(
       "div",
       {
-        ref: s,
+        ref: i,
         role: "listbox",
         "aria-activedescendant": u >= 0 ? `multi-opt-${u}` : void 0,
         style: {
           position: "absolute",
           top: x ? x.top : e.y,
           left: x ? x.left : e.x,
-          width: F ?? p,
+          width: F ?? f,
           // spread the static popup styles
-          ...f
+          ...d
         },
-        "data-reactaform-theme": i ? "dark" : "light",
-        children: r.map((j, E) => {
-          const v = n.includes(j.value), N = i ? "var(--reactaform-hover-bg, rgba(255,255,255,0.01))" : "var(--reactaform-hover-bg, #eee)", M = {
+        "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 = {
             ...b,
-            background: E === u ? N : b.background
+            background: I === u ? A : b.background
           };
           return /* @__PURE__ */ g.jsxs(
             "div",
             {
-              id: `multi-opt-${E}`,
+              id: `multi-opt-${I}`,
               onMouseDown: (z) => {
                 z.stopPropagation(), o(j.value);
               },
@@ -2833,29 +2833,29 @@ const ct = ({
                     break;
                 }
               },
-              tabIndex: E === u ? 0 : -1,
+              tabIndex: I === u ? 0 : -1,
               role: "option",
-              "aria-selected": v,
+              "aria-selected": S,
               style: M,
               onMouseEnter: (z) => {
-                z.currentTarget.style.background = N, m(E);
+                z.currentTarget.style.background = A, m(I);
               },
               onMouseLeave: (z) => {
-                z.currentTarget.style.background = "transparent", m((L) => L === E ? -1 : L);
+                z.currentTarget.style.background = "transparent", m((L) => L === I ? -1 : L);
               },
               children: [
                 /* @__PURE__ */ g.jsx(
                   "input",
                   {
                     type: "checkbox",
-                    checked: v,
+                    checked: S,
                     readOnly: !0,
                     style: {
                       marginRight: 8,
                       width: "1.125em",
                       height: "1.125em",
                       verticalAlign: "middle",
-                      accentColor: i ? "#10b981" : "#22c55e",
+                      accentColor: s ? "#10b981" : "#22c55e",
                       cursor: "pointer"
                     }
                   }
@@ -2870,41 +2870,41 @@ const ct = ({
     ),
     w
   );
-}, ft = ({
+}, dt = ({
   field: e,
   value: r,
   onChange: n,
   onError: o
 }) => {
-  const { t, definitionName: a } = D(), i = A.useRef(null), s = e.min ?? void 0, u = e.max ?? void 0, m = Math.max(1, Math.round(e.step ?? 1)), l = Z(
-    (p) => isNaN(p) ? t("Must be a valid integer") : Number.isInteger(p) ? s !== void 0 && p < s ? t("Must be �?{{1}}", s) : u !== void 0 && p > u ? t("Must be �?{{1}}", u) : Y(a, e, p, t) ?? null : t("Must be an integer"),
-    [a, e, t, s, u]
-  ), d = k(null), c = k(
+  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
   );
   C(() => {
     c.current = o;
   }, [o]), C(() => {
-    if (document.activeElement === i.current) return;
+    if (document.activeElement === s.current) return;
     const y = String(r), x = l(r);
-    i.current && (i.current.value = y), x !== d.current && (d.current = x, c.current?.(x ?? null));
+    s.current && (s.current.value = y), x !== p.current && (p.current = x, c.current?.(x ?? null));
   }, [r, l]);
-  const f = (p) => {
-    if (p.trim() === "") return e.required ? t("Value required") : null;
-    const x = Number(p);
+  const d = (f) => {
+    if (f.trim() === "") return e.required ? t("Value required") : null;
+    const x = Number(f);
     return l(x);
-  }, b = (p) => {
-    const y = p.target.value, x = p.target.valueAsNumber, S = f(y);
-    n?.(x, S);
+  }, 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: f(String(r ?? "")), children: /* @__PURE__ */ g.jsx(
+  return /* @__PURE__ */ g.jsx(W, { field: e, error: d(String(r ?? "")), children: /* @__PURE__ */ g.jsx(
     "input",
     {
-      ref: i,
+      ref: s,
       id: e.name,
       type: "number",
       defaultValue: String(r ?? ""),
-      min: s,
+      min: i,
       max: u,
       step: m,
       onChange: b,
@@ -2912,15 +2912,15 @@ const ct = ({
       className: $.input
     }
   ) });
-}, dt = ({
+}, pt = ({
   field: e,
   value: r,
   onChange: n,
   onError: o
 }) => {
-  const { t } = D(), a = A.useRef(null), { definitionName: i } = D(), s = Z(
-    (d) => {
-      const c = String(d ?? "").trim();
+  const { t } = T(), a = N.useRef(null), { definitionName: s } = T(), i = Z(
+    (p) => {
+      const c = String(p ?? "").trim();
       if (c === "")
         return e.required ? t("Value required") : null;
       if (e.pattern)
@@ -2932,74 +2932,74 @@ const ct = ({
             );
         } catch {
         }
-      return Y(i, e, c, t);
+      return Y(s, e, c, t);
     },
-    [i, e, t]
+    [s, e, t]
   ), u = k(null), m = k(o);
   C(() => {
     m.current = o;
   }, [o]), C(() => {
-    const d = String(r ?? ""), c = s(d);
-    a.current && a.current.value !== String(d) && (a.current.value = String(d)), c !== u.current && (u.current = c, m.current?.(c ?? null));
-  }, [r, s]);
-  const l = (d) => {
-    const c = d.target.value, f = c.trim();
+    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));
+  }, [r, i]);
+  const l = (p) => {
+    const c = p.target.value, d = c.trim();
     let b = null;
-    if (f === "") {
+    if (d === "") {
       b = e.required ? t("Value required") : null, n?.(c, b);
       return;
     }
-    !b && e.pattern && !new RegExp(e.pattern).test(f) && (b = t("Phone number does not match pattern: {{1}}", `${e.pattern}`)), n?.(c, b);
+    !b && e.pattern && !new RegExp(e.pattern).test(d) && (b = t("Phone number does not match pattern: {{1}}", `${e.pattern}`)), n?.(c, b);
   };
-  return /* @__PURE__ */ g.jsx(W, { field: e, error: s(String(r ?? "")), children: /* @__PURE__ */ g.jsx(
+  return /* @__PURE__ */ g.jsx(W, { field: e, error: i(String(r ?? "")), children: /* @__PURE__ */ g.jsx(
     "input",
     {
       type: "tel",
       defaultValue: String(r ?? ""),
       ref: a,
       onChange: l,
-      className: X($.input, $.textInput)
+      className: K($.input, $.textInput)
     }
   ) });
-}, pt = ({ field: e, value: r, onChange: n, onError: o }) => {
-  const { t, definitionName: a } = D(), i = e.layout?.toLowerCase() === "horizontal" ? "row" : "column", s = k(null), u = k(o);
+}, 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(
-    (d) => d === "" || d === null || d === void 0 ? t("Value required") : !e.options || e.options.length === 0 ? null : e.options.some((f) => f.value === d) ? Y(a, e, d, t) ?? null : t("Invalid option selected"),
+    (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]
   );
   C(() => {
-    const d = r != null ? String(r) : "", c = m(d);
-    if (u.current?.(c ?? null), s.current) {
-      const f = Array.from(
-        s.current.querySelectorAll("input[type=radio]")
+    const p = r != null ? String(r) : "", c = m(p);
+    if (u.current?.(c ?? null), i.current) {
+      const d = Array.from(
+        i.current.querySelectorAll("input[type=radio]")
       );
       if (c && e.options && e.options.length > 0) {
         const b = String(e.options[0].value);
-        f.forEach((p) => p.checked = p.value === b), n?.(b, null);
+        d.forEach((f) => f.checked = f.value === b), n?.(b, null);
       } else
-        f.forEach((b) => b.checked = b.value === d);
+        d.forEach((b) => b.checked = b.value === p);
     }
   }, [r, m, n, e.options]);
-  const l = (d) => {
-    const c = d.target.value, f = m(c);
-    u.current?.(f ?? null), n?.(c, f);
+  const l = (p) => {
+    const c = p.target.value, d = m(c);
+    u.current?.(d ?? null), n?.(c, d);
   };
   return /* @__PURE__ */ g.jsx(W, { field: e, error: m(String(r ?? "")), children: /* @__PURE__ */ g.jsx(
     "div",
     {
       style: {
         display: "flex",
-        flexDirection: i,
-        flexWrap: i === "row" ? "wrap" : "nowrap",
-        gap: i === "row" ? "12px" : "4px",
-        alignItems: i === "row" ? "center" : "flex-start",
+        flexDirection: s,
+        flexWrap: s === "row" ? "wrap" : "nowrap",
+        gap: s === "row" ? "12px" : "4px",
+        alignItems: s === "row" ? "center" : "flex-start",
         width: "100%"
       },
-      ref: s,
-      children: (e.options ?? []).map((d) => /* @__PURE__ */ g.jsxs(
+      ref: i,
+      children: (e.options ?? []).map((p) => /* @__PURE__ */ g.jsxs(
         "label",
         {
           style: {
@@ -3014,22 +3014,22 @@ const ct = ({
               {
                 type: "radio",
                 name: e.name,
-                value: String(d.value),
-                defaultChecked: String(r ?? "") === String(d.value),
+                value: String(p.value),
+                defaultChecked: String(r ?? "") === String(p.value),
                 onChange: l
               }
             ),
-            t(d.label)
+            t(p.label)
           ]
         },
-        String(d.value)
+        String(p.value)
       ))
     }
   ) });
-}, gt = {
+}, ht = {
   display: "flex",
   gap: 4
-}, ht = {
+}, bt = {
   cursor: "pointer",
   fontSize: "1.5rem",
   lineHeight: 1,
@@ -3037,91 +3037,150 @@ const ct = ({
   marginRight: "0.25rem",
   userSelect: "none",
   transition: "color 0.12s ease"
-}, bt = ({
+}, yt = ({
   field: e,
   value: r,
   onChange: n,
   onError: o
 }) => {
-  const { t, definitionName: a } = D(), [i, s] = T(null), u = e.max || 5, m = Z(
+  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), d = k(o);
+  ), l = k(null), p = k(o);
   C(() => {
-    d.current = o;
+    p.current = o;
   }, [o]), C(() => {
     let b = r || 0;
     r < 0 && (b = 0), r > u && (b = u);
-    const p = m(b);
-    p !== l.current && (l.current = p, d.current?.(p ?? null));
+    const f = m(b);
+    f !== l.current && (l.current = f, p.current?.(f ?? null));
   }, [r, m, u]);
   const c = (b) => {
-    const p = m(b);
-    n?.(b, p);
-  }, f = (() => {
+    const f = m(b);
+    n?.(b, f);
+  }, d = (() => {
     let b = r || 0;
     return b < 0 && (b = 0), b > u && (b = u), b;
   })();
-  return /* @__PURE__ */ g.jsx(W, { field: e, error: m(f), children: /* @__PURE__ */ g.jsx("div", { style: gt, children: (() => {
-    const b = e.icon, p = b && String(b).trim() ? String(b) : "★";
+  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 S = x < f, I = i !== null && x <= i || S ? "gold" : "lightgray";
+      const v = x < d, R = s !== null && x <= s || v ? "gold" : "lightgray";
       return /* @__PURE__ */ g.jsx(
         "span",
         {
           onClick: () => c(x + 1),
-          onMouseEnter: () => s(x),
-          onMouseLeave: () => s(null),
-          style: { ...ht, color: I },
+          onMouseEnter: () => i(x),
+          onMouseLeave: () => i(null),
+          style: { ...bt, color: R },
           "aria-label": `Rating ${x + 1}`,
           title: t(`${e.displayName} ${x + 1}`),
-          children: p
+          children: f
         },
         x
       );
     });
   })() }) });
-}, yt = /^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][-+]?\d+)?$/;
-function xt(e) {
-  return yt.test(e);
+}, xt = ({
+  field: e,
+  value: r,
+  onChange: n,
+  onError: o
+}) => {
+  const { t, definitionName: a } = T(), s = N.useRef(null), i = N.useRef(null), u = N.useRef(
+    o
+  );
+  N.useEffect(() => {
+    u.current = o;
+  }, [o]);
+  const m = G(
+    () => 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);
+  };
+  C(() => {
+    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));
+  }, [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: [
+    /* @__PURE__ */ g.jsx(
+      "input",
+      {
+        id: e.name,
+        type: c ? "text" : "password",
+        defaultValue: String(r ?? ""),
+        ref: s,
+        onChange: p,
+        className: K($.input, $.textInput),
+        style: { flex: 1, minWidth: 0 }
+      }
+    ),
+    /* @__PURE__ */ g.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: b,
+        "aria-label": t(c ? "Hide password" : "Show password"),
+        style: {
+          background: "transparent",
+          border: "none",
+          cursor: "pointer",
+          fontSize: 16,
+          lineHeight: 1,
+          padding: "4px 6px",
+          flexShrink: 0
+        },
+        children: c ? "🙈" : "👁️"
+      }
+    )
+  ] }) });
+}, vt = /^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][-+]?\d+)?$/;
+function wt(e) {
+  return vt.test(e);
 }
-const vt = ({
+const St = ({
   field: e,
   value: r,
   onChange: n,
   onError: o
 }) => {
-  const { t, definitionName: a } = D(), i = k(null), s = k(null), u = A.useCallback(
+  const { t, definitionName: a } = T(), s = k(null), i = k(null), u = N.useCallback(
     (b) => {
-      let p = null;
+      let f = null;
       if (b.trim() === "")
         return t("Value required");
-      if (!xt(b))
+      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) : (p || (p = Y(a, e, y, t)), p);
+      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);
     },
     [a, e, t]
   ), m = k(null), l = k(o);
   C(() => {
     l.current = o;
   }, [o]), C(() => {
-    const b = String(r), p = u(b);
-    s.current && document.activeElement !== s.current && (s.current.value = isNaN(Number(b)) ? String(e.min ?? 0) : String(Number(b))), i.current && document.activeElement !== i.current && (i.current.value = b), p !== m.current && (m.current = p, l.current?.(p ?? null));
+    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 d = e.min ?? 0, c = e.max ?? 100, f = (b) => {
-    const p = b.target.value, y = u(p);
-    n?.(p, y);
+  const p = e.min ?? 0, c = e.max ?? 100, d = (b) => {
+    const f = b.target.value, y = u(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: [
     /* @__PURE__ */ g.jsx(
       "input",
       {
-        ref: s,
+        ref: i,
         type: "range",
-        defaultValue: isNaN(Number(r)) ? String(d) : String(Number(r)),
-        onChange: f,
-        min: d,
+        defaultValue: isNaN(Number(r)) ? String(p) : String(Number(r)),
+        onChange: d,
+        min: p,
         max: c,
         style: {
           padding: "0px, 0px",
@@ -3134,10 +3193,10 @@ const vt = ({
     /* @__PURE__ */ g.jsx(
       "input",
       {
-        ref: i,
+        ref: s,
         type: "text",
         defaultValue: String(r ?? ""),
-        onChange: f,
+        onChange: d,
         required: !0,
         style: {
           width: "40px",
@@ -3146,28 +3205,28 @@ const vt = ({
           textAlign: "center",
           flexShrink: 0
         },
-        className: X($.input, $.textInput)
+        className: K($.input, $.textInput)
       }
     )
   ] }) });
-}, wt = ({
+}, Ct = ({
   field: e,
   value: r,
   onChange: n,
   onError: o
 }) => {
-  const { t, formStyle: a, fieldStyle: i, definitionName: s } = D(), u = a, m = i, l = (w, j, E) => {
+  const { t, formStyle: a, fieldStyle: s, definitionName: i } = T(), u = a, m = s, l = (w, j, I) => {
     if (!j) return {};
-    const v = w?.[j];
-    return (E && v ? v[E] : void 0) ?? {};
-  }, d = A.useMemo(() => ({
+    const S = w?.[j];
+    return (I && S ? S[I] : void 0) ?? {};
+  }, p = N.useMemo(() => ({
     display: "inline-block",
     position: "relative",
     width: 44,
     height: 24,
     ...l(u, "switch", "label"),
     ...l(m, void 0, "label")
-  }), [u, m]), c = A.useMemo(() => ({
+  }), [u, m]), c = N.useMemo(() => ({
     position: "absolute",
     opacity: 0,
     top: 0,
@@ -3180,7 +3239,7 @@ const vt = ({
     // Make hidden input non-interactive to avoid event conflicts
     ...l(u, "switch", "hiddenInput"),
     ...l(m, void 0, "hiddenInput")
-  }), [u, m]), f = A.useMemo(() => ({
+  }), [u, m]), d = N.useMemo(() => ({
     position: "absolute",
     cursor: "pointer",
     top: 0,
@@ -3199,7 +3258,7 @@ const vt = ({
     borderColor: "transparent",
     ...l(u, "switch", "slider"),
     ...l(m, void 0, "slider")
-  }), [u, m]), b = A.useMemo(() => ({
+  }), [u, m]), b = N.useMemo(() => ({
     position: "absolute",
     height: 16,
     width: 16,
@@ -3211,34 +3270,34 @@ const vt = ({
     boxShadow: "0 1px 3px rgba(0, 0, 0, 0.3)",
     ...l(u, "switch", "knob"),
     ...l(m, void 0, "knob")
-  }), [u, m]), p = !!r, y = A.useRef(null), x = A.useRef(o), S = A.useCallback((w) => w ? Y(s, e, w, t) ?? null : e.required ? t("Value required") : null, [e, t, s]), F = () => {
-    const w = !p, j = S(w);
+  }), [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);
   };
-  A.useEffect(() => {
+  N.useEffect(() => {
     x.current = o;
-  }, [o]), A.useEffect(() => {
-    const w = S(p);
+  }, [o]), N.useEffect(() => {
+    const w = v(f);
     w !== y.current && (y.current = w, x.current?.(w ?? null));
-  }, [p, e, S]);
-  const I = e.name;
-  return /* @__PURE__ */ g.jsx(W, { field: e, error: S(p), rightAlign: !1, children: /* @__PURE__ */ g.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }, children: [
+  }, [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: [
     /* @__PURE__ */ g.jsx(
       "label",
       {
         className: $.label,
-        htmlFor: I,
+        htmlFor: R,
         style: { textAlign: "left", justifyContent: "flex-start" },
         children: t(e.displayName)
       }
     ),
-    /* @__PURE__ */ g.jsxs("label", { style: d, children: [
+    /* @__PURE__ */ g.jsxs("label", { style: p, children: [
       /* @__PURE__ */ g.jsx(
         "input",
         {
           id: e.name,
           type: "checkbox",
-          checked: p,
+          checked: f,
           readOnly: !0,
           "aria-label": t(e.displayName),
           style: c,
@@ -3251,19 +3310,19 @@ const vt = ({
           role: "switch",
           "data-testid": "switch",
           tabIndex: 0,
-          "aria-checked": p,
+          "aria-checked": f,
           onClick: F,
           onKeyDown: (w) => {
             (w.key === " " || w.key === "Spacebar" || w.key === "Space" || w.key === "Enter") && (w.preventDefault(), F());
           },
-          className: `reactaform-switch ${p ? "active checked on" : ""} `,
-          style: p ? { ...f, backgroundColor: "var(--reactaform-switch-on-bg, #22c55e)", borderColor: "var(--reactaform-switch-on-border, #16a34a)" } : f,
+          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,
           children: /* @__PURE__ */ g.jsx(
             "span",
             {
               style: {
                 ...b,
-                transform: p ? "translateX(20px)" : void 0
+                transform: f ? "translateX(20px)" : void 0
               }
             }
           )
@@ -3277,52 +3336,52 @@ const vt = ({
   onChange: n,
   onError: o
 }) => {
-  const { t, definitionName: a } = D(), i = A.useRef(null), s = A.useRef(null), u = A.useRef(
+  const { t, definitionName: a } = T(), s = N.useRef(null), i = N.useRef(null), u = N.useRef(
     o
   );
-  A.useEffect(() => {
+  N.useEffect(() => {
     u.current = o;
   }, [o]);
   const m = G(
     () => e.pattern ? new RegExp(e.pattern) : null,
     [e.pattern]
-  ), l = A.useCallback(
+  ), 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]
-  ), d = (c) => {
-    const f = c.target.value, b = l(f);
-    n?.(f, b);
+  ), p = (c) => {
+    const d = c.target.value, b = l(d);
+    n?.(d, b);
   };
   return C(() => {
     const c = l(r);
-    i.current && i.current.value !== String(r ?? "") && (i.current.value = String(r ?? "")), c !== s.current && (s.current = c, u.current?.(c ?? null));
+    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(
     "input",
     {
       id: e.name,
       type: "text",
       defaultValue: String(r ?? ""),
-      ref: i,
-      onChange: d,
-      className: X($.input, $.textInput)
+      ref: s,
+      onChange: p,
+      className: K($.input, $.textInput)
     }
   ) });
-}, St = ({
+}, jt = ({
   field: e,
   value: r,
   onChange: n,
   onError: o
 }) => {
-  const { t, definitionName: a } = D(), i = k(null), s = k(o), u = e.includeSeconds ?? !0;
+  const { t, definitionName: a } = T(), s = k(null), i = k(o), u = e.includeSeconds ?? !0;
   C(() => {
-    s.current = o;
+    i.current = o;
   }, [o]);
-  const m = A.useCallback((d) => {
-    if (!d || d.trim() === "")
+  const m = N.useCallback((p) => {
+    if (!p || p.trim() === "")
       return e.required || e.min || e.max ? t("Value required") : null;
-    const c = (p) => {
-      const y = p.split(":").map((S) => parseInt(S, 10));
-      if (y.some((S) => Number.isNaN(S))) return NaN;
+    const c = (f) => {
+      const y = f.split(":").map((v) => parseInt(v, 10));
+      if (y.some((v) => Number.isNaN(v))) return NaN;
       let x = 0;
       if (y.length === 3)
         x = y[0] * 3600 + y[1] * 60 + y[2];
@@ -3333,26 +3392,26 @@ const vt = ({
       else
         return NaN;
       return x;
-    }, f = c(d);
-    if (Number.isNaN(f)) return t("Invalid time format");
+    }, d = c(p);
+    if (Number.isNaN(d)) return t("Invalid time format");
     if (e.min && typeof e.min == "string") {
-      const p = c(e.min);
-      if (!Number.isNaN(p) && f < p)
+      const f = c(e.min);
+      if (!Number.isNaN(f) && d < f)
         return t("Time must be on or after {{1}}", e.min);
     }
     if (e.max && typeof e.max == "string") {
-      const p = c(e.max);
-      if (!Number.isNaN(p) && f > p)
+      const f = c(e.max);
+      if (!Number.isNaN(f) && d > f)
         return t("Time must be on or before {{1}}", e.max);
     }
-    return Y(a, e, d, t) ?? null;
-  }, [e, a, t]), l = (d) => {
-    const c = d.target.value, f = m(c);
-    n?.(c, f);
+    return Y(a, e, p, t) ?? null;
+  }, [e, a, t]), l = (p) => {
+    const c = p.target.value, d = m(c);
+    n?.(c, d);
   };
   return C(() => {
-    const d = m(r);
-    d !== i.current && (i.current = d, s.current?.(d ?? null));
+    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(
     "input",
     {
@@ -3363,25 +3422,94 @@ const vt = ({
       onChange: l,
       min: typeof e.min == "string" ? e.min : void 0,
       max: typeof e.max == "string" ? e.max : void 0,
-      className: X($.input, $.textInput)
+      className: K($.input, $.textInput)
     }
   ) });
-}, he = {};
-function Ct(e, r) {
+};
+function kt({
+  pos: e,
+  options: r,
+  onClose: n,
+  onClickOption: o
+}) {
+  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();
+    }
+    return document.addEventListener("mousedown", d), () => document.removeEventListener("mousedown", d);
+  }, [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(
+    /* @__PURE__ */ g.jsx(
+      "div",
+      {
+        ref: t,
+        onMouseDown: (d) => {
+          d.stopPropagation();
+        },
+        style: {
+          position: "fixed",
+          top: c,
+          left: p,
+          backgroundColor: "var(--reactaform-primary-bg, #fff)",
+          border: "1px solid var(--reactaform-border-color, #ccc)",
+          borderRadius: "var(--reactaform-border-radius, 4px)",
+          boxShadow: "var(--reactaform-shadow, 0 2px 10px rgba(0,0,0,0.2))",
+          zIndex: 9999,
+          minWidth: "var(--reactaform-menu-min-width, 150px)",
+          pointerEvents: "auto"
+        },
+        children: r.map((d, b) => /* @__PURE__ */ g.jsx(
+          "div",
+          {
+            "data-popup-menu": "item",
+            onMouseDown: (f) => {
+              f.stopPropagation(), a.current = !0;
+            },
+            onClick: (f) => {
+              f.stopPropagation(), f.preventDefault(), o(d), n(), setTimeout(() => {
+                a.current = !1;
+              }, 100);
+            },
+            style: {
+              padding: "var(--reactaform-menu-item-padding, 8px 12px)",
+              cursor: "pointer",
+              fontSize: "var(--reactaform-menu-item-font-size, 0.8em)",
+              borderBottom: b < r.length - 1 ? "1px solid var(--reactaform-border-light, #eee)" : void 0,
+              transition: "background-color 0.15s ease"
+            },
+            onMouseEnter: (f) => {
+              f.currentTarget.style.backgroundColor = "var(--reactaform-hover-bg, #e0e0e0)";
+            },
+            onMouseLeave: (f) => {
+              f.currentTarget.style.backgroundColor = "transparent";
+            },
+            children: d.label
+          },
+          d.label ?? b
+        ))
+      }
+    ),
+    s
+  );
+}
+const he = {};
+function Rt(e, r) {
   if (e in he)
     return;
   const n = Le[e] ?? {}, o = {}, t = {}, a = {};
-  for (const [s, u] of Object.entries(n))
-    typeof u.factor == "number" && (o[s] = u.factor), t[s] = r(s), a[r(s)] = s;
-  const i = Object.keys(n)[0] ?? "";
+  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 s = Object.keys(n)[0] ?? "";
   he[e] = {
-    default: i,
+    default: s,
     factors: o,
     labels: t,
     reverseLabels: a
   };
 }
-function jt(e, r, n) {
+function Et(e, r, n) {
   if (e === "C") {
     if (r === "F") return n * (9 / 5) + 32;
     if (r === "K") return n + 273.15;
@@ -3394,38 +3522,38 @@ function jt(e, r, n) {
   }
   return n;
 }
-function kt(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 i = jt(r, a, e);
-      return Number.isFinite(i) ? { label: `${i.toFixed(6)} ${a}`, value: i.toString(), unit: a } : { label: `${String(i)} ${a}`, value: String(i), unit: 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 };
     });
   const t = n.factors[r];
-  return t === void 0 ? [] : Object.entries(n.factors).map(([a, i]) => {
-    const s = e / t * i;
-    return Number.isFinite(s) ? { label: `${s.toFixed(6)} ${a}`, value: s.toString(), unit: a } : { label: `${String(s)} ${a}`, value: String(s), unit: a };
+  return t === void 0 ? [] : Object.entries(n.factors).map(([a, 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 };
   });
 }
 function xe(e, r) {
   return e in r.labels ? e : r.reverseLabels && r.reverseLabels[e] ? r.reverseLabels[e] : null;
 }
-const Rt = /^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][-+]?\d+)?$/, Et = ({
+const It = /^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][-+]?\d+)?$/, At = ({
   unitFactors: e,
   field: r,
   value: n,
   onChange: o,
   onError: t
 }) => {
-  const { t: a, definitionName: i } = D(), s = k(null), u = k(null), m = k(null), [l, d] = T(null), [c, f] = T(null), [b, p] = T(!1), [y, x] = T(null), [S, F] = T([]), I = Z(
+  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 (!Rt.test(P)) return a("Must be a valid number");
-      const h = Y(i, r, [P, O], a);
+      if (!It.test(P)) return a("Must be a valid number");
+      const h = Y(s, r, [P, O], a);
       return h || null;
     },
-    [i, r, a]
+    [s, r, a]
   ), w = e.reverseLabels !== void 0 ? e.reverseLabels : Object.fromEntries(
     Object.entries(e.labels).map(([P, O]) => [O, P])
   );
@@ -3434,51 +3562,51 @@ const Rt = /^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][-+]?\d+)?$/, Et = ({
     let O = n[1] ?? e.default;
     O = xe(O, e) || O;
     const h = document.activeElement;
-    h === s.current || h === u.current || (s.current && (s.current.value = P), u.current && (u.current.value = O), m.current !== null && (cancelAnimationFrame(m.current), m.current = null), m.current = requestAnimationFrame(() => {
-      m.current = null, d(null), f(null);
+    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);
     }));
   }, [n, e]), C(() => () => {
     m.current !== null && (cancelAnimationFrame(m.current), m.current = null);
   }, []);
-  const j = k(null), E = k(
+  const j = k(null), I = k(
     t
   );
   C(() => {
-    E.current = t;
+    I.current = t;
   }, [t]), C(() => {
     const P = String(n[0]);
     let O = n[1] ?? e.default;
     O = xe(O, e) || O;
-    const h = I(P, O);
-    h !== j.current && (j.current = h, E.current?.(h ?? null));
-  }, [n, e, I]);
-  const v = (P, O, h) => {
-    const R = w[O] || O;
-    o?.([P, R], h);
-  }, N = (P) => {
-    const O = P.target.value, h = u.current ? u.current.value : e.default, R = I(O, h);
-    d(O), v(O, h, R);
+    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 = s.current ? s.current.value : String(n[0] ?? ""), R = I(h, O);
-    f(O), u.current && (u.current.value = O), v(h, O, R);
+    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 = s.current ? s.current.value : String(n[0] ?? ""), h = parseFloat(O), R = u.current ? u.current.value : e.default;
-    if (I(O, R) || !O.trim() || !Number.isFinite(h))
+    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))
       return;
     const U = P.currentTarget.getBoundingClientRect(), ne = U.left, ae = U.bottom;
     x({ x: ne, y: ae });
-    const _ = kt(h, R, e);
+    const _ = Nt(h, E, e);
     if (_.length === 0) {
-      F([]), p(!1);
+      F([]), f(!1);
       return;
     }
-    F(_), p((V) => !V);
+    F(_), f((V) => !V);
   }, L = (P) => {
     const { value: O, unit: h } = P;
-    p(!1), x(null), s.current && (s.current.value = O), u.current && (u.current.value = h), d(O), f(h);
-    const R = I(O, h);
-    v(O, h, R);
-  }, J = String(n[0] ?? ""), ce = xe(n[1] ?? e.default, e) || (n[1] ?? e.default), re = l ?? J, Q = !!I(re, c ?? ce) || !re.trim(), oe = {
+    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 = {
     width: "var(--reactaform-unit-btn-width, 2.5em)",
     height: "var(--reactaform-unit-btn-height, 2.5em)",
     padding: "var(--reactaform-unit-btn-padding, 0)",
@@ -3492,16 +3620,16 @@ const Rt = /^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][-+]?\d+)?$/, Et = ({
     alignItems: "center",
     justifyContent: "center"
   };
-  return /* @__PURE__ */ g.jsx(W, { field: r, error: I(J, ce), children: /* @__PURE__ */ g.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "var(--reactaform-unit-gap, 8px)", width: "100%" }, children: [
+  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: [
     /* @__PURE__ */ g.jsx(
       "input",
       {
         type: "text",
-        ref: s,
+        ref: i,
         defaultValue: String(n[0] ?? ""),
-        onChange: N,
+        onChange: A,
         style: { width: "var(--reactaform-unit-input-width, 100px)" },
-        className: X($.input, $.textInput)
+        className: K($.input, $.textInput)
       }
     ),
     /* @__PURE__ */ g.jsx(
@@ -3510,7 +3638,7 @@ const Rt = /^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][-+]?\d+)?$/, Et = ({
         ref: u,
         defaultValue: xe(n[1] ?? e.default, e) || (n[1] ?? e.default),
         onChange: M,
-        className: X(
+        className: K(
           $.input,
           $.inputSelect
         ),
@@ -3540,13 +3668,13 @@ const Rt = /^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][-+]?\d+)?$/, Et = ({
           )
         }
       ),
-      b && S && /* @__PURE__ */ g.jsx(
-        ir,
+      b && v && /* @__PURE__ */ g.jsx(
+        kt,
         {
           pos: y,
-          options: S,
+          options: v,
           onClose: () => {
-            x(null), p(!1);
+            x(null), f(!1);
           },
           onClickOption: L
         }
@@ -3554,13 +3682,13 @@ const Rt = /^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][-+]?\d+)?$/, Et = ({
     ] })
   ] }) });
 };
-function Nt({ field: e, value: r, onChange: n }) {
-  const { t: o } = D(), t = e.dimension;
+function Ft({ field: e, value: r, onChange: n }) {
+  const { t: o } = T(), t = e.dimension;
   if (!t) return null;
-  he[t] || Ct(t, o);
+  he[t] || Rt(t, o);
   const a = he[t];
   return a ? /* @__PURE__ */ g.jsx(
-    Et,
+    At,
     {
       unitFactors: a,
       field: e,
@@ -3569,47 +3697,62 @@ function Nt({ field: e, value: r, onChange: n }) {
     }
   ) : null;
 }
-const It = /^(https?|ftp|file):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|]$/i, At = (e) => {
+const Xe = /^(https?|ftp|file):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|]$/i, Ze = (e) => {
   try {
     return new URL(e), !0;
   } catch {
     return !1;
   }
-}, Ft = ({
+}, Mt = ({
   field: e,
   value: r,
   onChange: n,
   onError: o
 }) => {
-  const { t, definitionName: a } = D(), i = k(null), s = Z(
-    (d) => {
-      const c = d.trim();
-      return c === "" ? e.required ? t("Value required") : null : !It.test(c) && !At(c) ? t("Must be a valid URL") : Y(a, e, c, t) ?? null;
+  const { t, definitionName: a } = T(), s = k(null), i = Z(
+    (p) => {
+      const c = p.trim();
+      if (c === "")
+        return e.required ? t("Value required") : null;
+      if (!Xe.test(c) && !Ze(c)) {
+        const b = e.allowRelative === !0;
+        let f = !1;
+        if (Xe.test(c) || Ze(c))
+          f = !0;
+        else if (b)
+          try {
+            new URL(c, "http://example.com"), f = !0;
+          } catch {
+            f = !1;
+          }
+        if (!f) return t("Must be a valid URL");
+      }
+      return Y(a, e, c, t) ?? null;
     },
     [a, e, t]
-  ), u = (d) => {
-    const c = d.target.value, f = s(c);
-    n?.(c.trim(), f);
+  ), 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 d = r ?? "", c = s(d);
-    i.current && i.current.value !== String(d) && (i.current.value = String(d)), c !== m.current && (m.current = c, l.current?.(c ?? null));
-  }, [r, s]), /* @__PURE__ */ g.jsx(W, { field: e, error: s(String(r ?? "")), children: /* @__PURE__ */ g.jsx(
+    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(
     "input",
     {
       id: e.name,
       type: "url",
       defaultValue: String(r ?? ""),
-      ref: i,
+      ref: s,
       onChange: u,
       style: { alignItems: "left" },
-      className: X($.input, $.textInput),
+      className: K($.input, $.textInput),
       placeholder: "https://example.com"
     }
   ) });
-}, Fe = new we(), Mt = /* @__PURE__ */ new Set([
+}, Fe = new we(), Ot = /* @__PURE__ */ new Set([
   "checkbox",
   "switch",
   "dropdown",
@@ -3619,46 +3762,47 @@ const It = /^(https?|ftp|file):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|]
   "stepper",
   "color",
   "rating"
-]), cr = {
-  checkbox: Pr,
-  color: qr,
-  date: Hr,
-  dropdown: Ur,
-  email: Yr,
-  file: Gr,
-  float: tt,
-  "float-array": Qr,
-  image: ot,
-  int: ct,
-  "int-array": st,
-  "multi-selection": ut,
-  multiline: lt,
-  phone: dt,
-  radio: pt,
-  rating: bt,
-  separator: Jr,
-  slider: vt,
+]), lr = {
+  checkbox: _r,
+  color: Br,
+  date: Ur,
+  dropdown: Wr,
+  email: Jr,
+  file: Kr,
+  float: nt,
+  "float-array": et,
+  image: at,
+  int: lt,
+  "int-array": it,
+  "multi-selection": mt,
+  multiline: ut,
+  password: xt,
+  phone: pt,
+  radio: gt,
+  rating: yt,
+  separator: Gr,
+  slider: St,
   string: Ke,
-  stepper: ft,
-  switch: wt,
+  stepper: dt,
+  switch: Ct,
   text: Ke,
-  time: St,
-  unit: Nt,
-  url: Ft
+  time: jt,
+  unit: Ft,
+  url: Mt
 };
-function lr(e, r, n) {
-  if (!n && e in cr) {
+function ur(e, r, n) {
+  if (!n && e in lr) {
     console.warn(
       `Can't Overwrite Base Component type "${e}".`
     );
     return;
   }
-  if (Mt.has(e)) {
+  if (Ot.has(e)) {
     Fe.register(e, r);
     return;
   }
   const o = (t) => {
-    const { callback: i, cancel: s } = Cr(
+    const { callback: s, cancel: i } = jr(
       (...u) => {
         const m = t.onChange;
         typeof m == "function" && m(...u);
@@ -3666,31 +3810,31 @@ function lr(e, r, n) {
       200
     );
     return C(() => () => {
-      s();
-    }, [s]), A.createElement(r, { ...t, onChange: i });
+      i();
+    }, [i]), N.createElement(r, { ...t, onChange: s });
   };
   Fe.register(e, o);
 }
-function on(e, r) {
-  lr(e, r, !1);
+function an(e, r) {
+  ur(e, r, !1);
 }
-function Ot(e) {
+function $t(e) {
   return Fe.get(e);
 }
-let Xe = !1;
-function ur() {
-  Xe || (Object.entries(cr).forEach(([e, r]) => {
-    lr(e, r, !0);
-  }), Xe = !0);
+let Qe = !1;
+function mr() {
+  Qe || (Object.entries(lr).forEach(([e, r]) => {
+    ur(e, r, !0);
+  }), Qe = !0);
 }
-const mr = new we();
-function $t(e, r) {
-  mr.register(e, r);
+const fr = new we();
+function Vt(e, r) {
+  fr.register(e, r);
 }
-function Vt(e) {
-  return mr.get(e);
+function Dt(e) {
+  return fr.get(e);
 }
-$t(
+Vt(
   "Preset_AlertSubmitHandler",
   (e, r, n) => {
     const o = {
@@ -3702,12 +3846,12 @@ $t(
     alert(t);
   }
 );
-const fr = A.memo(({ field: e, value: r, handleChange: n, handleError: o }) => {
-  const t = Ot(e.type), a = A.useCallback(
-    (s, u) => n(e.name, s, u),
+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),
     [n, e.name]
-  ), i = A.useCallback(
-    (s) => o?.(e.name, s),
+  ), s = N.useCallback(
+    (i) => o?.(e.name, i),
     [o, e.name]
   );
   return t ? /* @__PURE__ */ g.jsx(
@@ -3716,13 +3860,13 @@ const fr = A.memo(({ field: e, value: r, handleChange: n, handleError: o }) => {
       field: e,
       value: r,
       onChange: a,
-      onError: i
+      onError: s
     }
   ) : null;
 }, (e, r) => e.field === r.field && e.value === r.value && e.handleChange === r.handleChange && e.handleError === r.handleError);
-fr.displayName = "FieldWrapper";
-const dr = (e, r, n, o) => /* @__PURE__ */ g.jsx(
-  fr,
+dr.displayName = "FieldWrapper";
+const pr = (e, r, n, o) => /* @__PURE__ */ g.jsx(
+  dr,
   {
     field: e,
     value: r[e.name],
@@ -3730,8 +3874,8 @@ const dr = (e, r, n, o) => /* @__PURE__ */ g.jsx(
     handleError: o
   },
   e.name
-), pr = A.memo(({ groupName: e, isOpen: r, fields: n, valuesMap: o, handleChange: t, handleError: a, toggleGroup: i, t: s }) => {
-  const u = A.useCallback(() => i(e), [i, e]), { formStyle: m, fieldStyle: l } = D(), d = A.useMemo(() => ({
+), 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(() => ({
     border: "1px solid var(--reactaform-border-color, #bbb)",
     padding: "var(--reactaform-fieldset-padding, 0.5em)",
     borderRadius: "var(--reactaform-border-radius, 4px)",
@@ -3739,7 +3883,7 @@ const dr = (e, r, n, o) => /* @__PURE__ */ g.jsx(
     // allow per-form overrides if provider exposes them
     ...m?.fieldset || {},
     ...l?.fieldset || {}
-  }), [m, l]), c = A.useMemo(() => ({
+  }), [m, l]), c = N.useMemo(() => ({
     fontWeight: "bold",
     cursor: "pointer",
     display: "flex",
@@ -3750,40 +3894,40 @@ const dr = (e, r, n, o) => /* @__PURE__ */ g.jsx(
     ...m?.legend || {},
     ...l?.legend || {}
   }), [m, l]);
-  return /* @__PURE__ */ g.jsxs("fieldset", { style: d, children: [
+  return /* @__PURE__ */ g.jsxs("fieldset", { style: p, children: [
     /* @__PURE__ */ g.jsxs("legend", { onClick: u, style: c, children: [
-      /* @__PURE__ */ g.jsx("span", { children: s(e) }),
+      /* @__PURE__ */ g.jsx("span", { children: i(e) }),
       /* @__PURE__ */ g.jsx("span", { children: r ? "▼" : "▶" })
     ] }),
-    r && n.map((f) => /* @__PURE__ */ g.jsx("div", { children: dr(f, o, t, a) }, f.name))
+    r && n.map((d) => /* @__PURE__ */ g.jsx("div", { children: pr(d, o, t, a) }, d.name))
   ] });
 });
-pr.displayName = "FieldGroup";
-const Tt = (e, r, n, o, t, a, i, s, u) => {
-  const m = r.slice(0, s).filter((f) => i[f.name]), d = Or(m).groups, c = [];
-  return d.forEach((f) => {
-    if (f.name) {
-      const b = e[f.name] ?? !0;
+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;
       c.push(
         /* @__PURE__ */ g.jsx(
-          pr,
+          gr,
           {
-            groupName: f.name,
+            groupName: d.name,
             isOpen: b,
-            fields: f.fields,
+            fields: d.fields,
             valuesMap: n,
             handleChange: t,
             handleError: a,
             toggleGroup: u,
             t: o
           },
-          f.name
+          d.name
         )
       );
     } else
-      f.fields.forEach((b) => c.push(/* @__PURE__ */ g.jsx("div", { children: dr(b, n, t, a) }, b.name)));
+      d.fields.forEach((b) => c.push(/* @__PURE__ */ g.jsx("div", { children: pr(b, n, t, a) }, b.name)));
   }), c;
-}, zt = (e) => {
+}, Tt = (e) => {
   const r = {};
   return e.forEach((n) => {
     r[n.name] = !1;
@@ -3791,34 +3935,34 @@ const Tt = (e, r, n, o, t, a, i, s, u) => {
 }, Pe = (e, r, n, o) => {
   const t = r[e];
   if (!t?.children) return;
-  const a = n[e], i = a != null ? String(a) : "";
-  (t.children[i] || []).forEach((u) => {
+  const a = n[e], s = a != null ? String(a) : "";
+  (t.children[s] || []).forEach((u) => {
     o[u] = !0, Pe(u, r, n, o);
   });
-}, gr = (e, r, n) => {
+}, hr = (e, r, n) => {
   const o = r[e];
   o?.children && Object.values(o.children).flat().forEach((t) => {
-    n[t] = !1, gr(t, r, n);
+    n[t] = !1, hr(t, r, n);
   });
-}, Dt = (e, r, n, o) => {
+}, Lt = (e, r, n, o) => {
   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));
   }), t;
-}, Lt = (e, r, n, o, t) => {
+}, Pt = (e, r, n, o, t) => {
   const a = { ...e };
-  if (gr(o, r, a), t != null) {
-    const i = r[o];
-    if (i?.children) {
-      const s = String(t);
-      (i.children[s] || []).forEach((m) => {
+  if (hr(o, r, a), t != null) {
+    const s = r[o];
+    if (s?.children) {
+      const i = String(t);
+      (s.children[i] || []).forEach((m) => {
         a[m] = !0, Pe(m, r, n, a);
       });
     }
   }
   return a;
 };
-function Pt(e, r, n, o, t) {
+function _t(e, r, n, o, t) {
   const a = Object.values(t).filter(Boolean);
   if (a.length > 0)
     return {
@@ -3826,34 +3970,34 @@ function Pt(e, r, n, o, t) {
       message: o("Please fix validation errors before submitting."),
       errors: a
     };
-  const i = { ...n }, s = [];
+  const s = { ...n }, i = [];
   if (e && Array.isArray(e.properties))
     for (const m of e.properties) {
-      const l = m.name, d = i[l];
-      if (d == null) continue;
+      const l = m.name, p = s[l];
+      if (p == null) continue;
       const c = m.type;
       try {
-        if ((c === "int" || c === "number" || c === "float") && typeof d == "string") {
-          const f = Number(String(d).trim());
-          isNaN(f) ? s.push(o(`Invalid number format for field ${m.displayName || l}`)) : i[l] = f;
-        } else if ((c === "int-array" || c === "float-array") && typeof d == "string") {
-          const b = String(d).split(",").map((p) => p.trim()).filter(Boolean).map((p) => {
-            const y = Number(p);
-            return isNaN(y) ? (s.push(o(`Invalid number "${p}" in array for field ${m.displayName || l}`)), 0) : y;
+        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;
+        } else if (c === "int-array" || c === "float-array") {
+          const b = String(p).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;
           });
-          s.length === 0 && (i[l] = b);
+          i.length === 0 && (s[l] = b);
         }
-      } catch (f) {
-        s.push(o(`Error processing field ${m.displayName || l}: ${f}`));
+      } catch (d) {
+        i.push(o(`Error processing field ${m.displayName || l}: ${d}`));
       }
     }
-  if (s.length > 0)
+  if (i.length > 0)
     return {
       success: !1,
       message: o("Data transformation errors occurred."),
-      errors: s
+      errors: i
     };
-  const u = Er(e, i, o);
+  const u = Nr(e, s, o);
   if (u && u.length > 0)
     return {
       success: !1,
@@ -3861,10 +4005,10 @@ function Pt(e, r, n, o, t) {
       errors: u
     };
   if (e && typeof e.submitHandlerName == "string") {
-    const m = Vt(e.submitHandlerName);
+    const m = Dt(e.submitHandlerName);
     if (m)
       try {
-        const l = m(e, r?.name ?? null, i, o);
+        const l = m(e, r?.name ?? null, s, o);
         if (l && l.length > 0)
           return {
             success: !1,
@@ -3882,21 +4026,21 @@ function Pt(e, r, n, o, t) {
   return {
     success: !0,
     message: o("Form submitted successfully."),
-    data: i
+    data: s
   };
 }
-const _t = ({
+const qt = ({
   definition: e,
   instance: r,
   chunkSize: n = 50,
   chunkDelay: o = 50
 }) => {
-  const { properties: t, displayName: a } = e, i = D(), { t: s, formStyle: u, language: m } = i, l = {
-    ...i,
-    definitionName: e?.name ?? i.definitionName
-  }, [d, c] = T("en"), [f, b] = T([]), [p, y] = T({}), [x, S] = T(
+  const { properties: t, displayName: a } = e, s = T(), { t: i, formStyle: u, language: m } = s, l = {
+    ...s,
+    definitionName: e?.name ?? s.definitionName
+  }, [p, c] = D("en"), [d, b] = D([]), [f, y] = D({}), [x, v] = D(
     {}
-  ), [F, I] = T({}), [w, j] = T({}), [E, v] = T({}), [N, M] = T(null), [z, L] = T(null), [J, ce] = T(0), [re, ue] = T(!1), [Q, oe] = T(!1), [P, O] = T(r.name || ""), h = k(r), R = k(!1);
+  ), [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) => [
@@ -3907,104 +4051,104 @@ const _t = ({
     t.forEach((H) => {
       H.parents && Object.entries(H.parents).forEach(([me, Se]) => {
         const fe = V[me];
-        fe && Se.forEach((hr) => {
+        fe && Se.forEach((br) => {
           fe.children || (fe.children = {});
-          const _e = String(hr);
+          const _e = String(br);
           fe.children[_e] = [
             ...fe.children[_e] || [],
             H.name
           ];
         });
       });
-    }), Mr(t, V);
+    }), Or(t, V);
     const q = Object.values(
       V
-    ), K = {};
+    ), 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");
-        K[H.name] = [me, Se];
+        X[H.name] = [me, Se];
       } else
-        K[H.name] = H.defaultValue;
+        X[H.name] = H.defaultValue;
     }), h.current = r, Object.keys(r.values).forEach((H) => {
-      V[H] !== void 0 && (K[H] = r.values[H]);
+      V[H] !== void 0 && (X[H] = r.values[H]);
     });
-    const ee = zt(q), te = {};
+    const ee = Tt(q), te = {};
     q.forEach((H) => {
       H.group && !(H.group in te) && (te[H.group] = !0);
     });
     const le = requestAnimationFrame(() => {
-      b(q), y(V), S(K), I(
-        Dt(q, K, ee, V)
+      b(q), y(V), v(X), R(
+        Lt(q, X, ee, V)
       ), j(te), ue(!0), O(r.name);
     });
     return () => cancelAnimationFrame(le);
   }, [t, r, e]), C(() => {
-    if (!re || J >= f.length) return;
+    if (!re || J >= d.length) return;
     const V = setTimeout(() => {
       ce(
-        (q) => Math.min(q + n, f.length)
+        (q) => Math.min(q + n, d.length)
       );
     }, o);
     return () => clearTimeout(V);
-  }, [re, J, f.length, n, o]);
+  }, [re, J, d.length, n, o]);
   const B = Z(
-    (V, q, K) => {
-      M(null), L(null), S((ee) => {
-        const te = { ...ee, [V]: q }, le = p[V];
+    (V, q, X) => {
+      M(null), L(null), v((ee) => {
+        const te = { ...ee, [V]: q }, le = f[V];
         return le && [
           "checkbox",
           "dropdown",
           "multi-select",
           "radio",
           "switch"
-        ].includes(le.type) && I(
-          (me) => Lt(
+        ].includes(le.type) && R(
+          (me) => Pt(
             me,
-            p,
+            f,
             te,
             V,
             String(q)
           )
         ), te;
-      }), v((ee) => K ? { ...ee, [V]: K } : Object.fromEntries(Object.entries(ee).filter(([le]) => le !== V)));
+      }), S((ee) => X ? { ...ee, [V]: X } : Object.fromEntries(Object.entries(ee).filter(([le]) => le !== V)));
     },
-    [p, M, L]
+    [f, M, L]
   );
   C(() => {
     let V = 0;
     return V = requestAnimationFrame(() => {
-      m !== d && (c(m || "en"), M(null), L(null));
+      m !== p && (c(m || "en"), M(null), L(null));
     }), () => cancelAnimationFrame(V);
-  }, [m, d]), C(() => {
+  }, [m, p]), C(() => {
     let V = 0;
     return V = requestAnimationFrame(() => {
-      if (R.current) {
-        R.current = !1, h.current = r, O(r.name || "");
+      if (E.current) {
+        E.current = !1, h.current = r, O(r.name || "");
         return;
       }
       h.current = r, M(null), L(null), O(r.name || "");
     }), () => cancelAnimationFrame(V);
   }, [r, r.name]);
   const U = Z((V, q) => {
-    v((K) => q ? { ...K, [V]: String(q) } : Object.fromEntries(Object.entries(K).filter(([te]) => te !== V)));
+    S((X) => q ? { ...X, [V]: String(q) } : Object.fromEntries(Object.entries(X).filter(([te]) => te !== V)));
   }, []), ne = () => {
-    R.current = !0;
+    E.current = !0;
     const V = h.current?.name;
     h.current.name = P;
-    const q = Pt(e, h.current, x, s, E), K = typeof q.message == "string" ? q.message : String(q.message), ee = Object.values(q.errors ?? {}).join(`
+    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(`
 `);
-    M(ee ? K + `
-` + ee : K), L(q.success), q.success || (h.current.name = V ?? h.current.name, O(V ?? ""));
+    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(
-    () => Object.values(E).some(Boolean),
-    [E]
+    () => 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: s(a) }),
-    N && /* @__PURE__ */ g.jsxs(
+    a && /* @__PURE__ */ g.jsx("h2", { style: u.titleStyle, children: i(a) }),
+    A && /* @__PURE__ */ g.jsxs(
       "div",
       {
         role: "status",
@@ -4020,14 +4164,14 @@ const _t = ({
           justifyContent: "space-between"
         },
         children: [
-          /* @__PURE__ */ g.jsx("div", { style: { whiteSpace: "pre-wrap", flex: 1 }, children: N }),
+          /* @__PURE__ */ g.jsx("div", { style: { whiteSpace: "pre-wrap", flex: 1 }, children: A }),
           /* @__PURE__ */ g.jsx(
             "button",
             {
               onClick: () => {
                 M(null), L(null);
               },
-              "aria-label": s("Dismiss"),
+              "aria-label": i("Dismiss"),
               style: {
                 marginLeft: 12,
                 background: "transparent",
@@ -4044,7 +4188,7 @@ const _t = ({
       }
     ),
     r && /* @__PURE__ */ g.jsx(
-      er,
+      tr,
       {
         name: P,
         onChange: (V) => {
@@ -4053,18 +4197,18 @@ const _t = ({
       }
     ),
     /* @__PURE__ */ g.jsxs(g.Fragment, { children: [
-      Tt(
+      zt(
         w,
-        f,
+        d,
         x,
-        s,
+        i,
         B,
         U,
         F,
         J,
         ae
       ),
-      J < f.length && /* @__PURE__ */ g.jsx(
+      J < d.length && /* @__PURE__ */ g.jsx(
         "div",
         {
           style: {
@@ -4095,13 +4239,13 @@ const _t = ({
           transition: "opacity 0.2s ease",
           opacity: _ ? "var(--reactaform-button-disabled-opacity, 0.6)" : Q ? "var(--reactaform-button-hover-opacity, 0.9)" : "1"
         },
-        children: s("Submit")
+        children: i("Submit")
       }
     )
   ] }) });
 };
-ur();
-const qt = (e, r = !1) => ({
+mr();
+const Bt = (e, r = !1) => ({
   container: {
     padding: "var(--reactaform-space-sm, 8px)",
     margin: "0 auto",
@@ -4142,7 +4286,7 @@ const qt = (e, r = !1) => ({
     lineHeight: "1.2",
     textAlign: "left"
   }
-}), Bt = (e, r = !1) => {
+}), Ht = (e, r = !1) => {
   const n = {
     color: "var(--reactaform-color-text)",
     fontFamily: e?.fontFamily || "var(--reactaform-font-family, inherit)",
@@ -4201,68 +4345,68 @@ const qt = (e, r = !1) => ({
       display: "block"
     }
   };
-}, Ht = ({
+}, Ut = ({
   children: e,
   definitionName: r = "",
   defaultStyle: n,
   defaultLanguage: o = "en",
   defaultDarkMode: t = !1,
   defaultLocalizeName: a = "",
-  className: i = "reactaform-container"
+  className: s = "reactaform-container"
 }) => {
-  const s = r, u = a, m = t, l = o, d = G(
+  const i = r, u = a, m = t, l = o, p = G(
     () => n ?? {},
     [n]
-  ), [c, f] = T({}), [b, p] = T({}), [y, x] = T({}), [S, F] = T({});
+  ), [c, d] = D({}), [b, f] = D({}), [y, x] = D({}), [v, F] = D({});
   C(() => {
-    let v = !0;
+    let S = !0;
     return (async () => {
       if (l === "en") {
-        v && (f({}), p({}));
+        S && (d({}), f({}));
         return;
       }
       try {
-        const M = await Vr(l), z = M.success ? M.translations : {};
-        v && f(z);
-        const L = await Tr(l, u), J = L.success ? L.translations : {};
-        v && p(J);
+        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);
       } catch {
-        v && (f({}), p({}));
+        S && (d({}), f({}));
       }
     })(), () => {
-      v = !1;
+      S = !1;
     };
   }, [l, u]), C(() => {
-    F(qt(d, m)), x(Bt(d, m));
-  }, [d, m]);
-  const I = G(
-    () => Dr(l, c, b),
+    F(Bt(p, m)), x(Ht(p, m));
+  }, [p, m]);
+  const R = G(
+    () => Lr(l, c, b),
     [l, c, b]
   ), w = Z(
-    (v, ...N) => I(v, ...N),
-    [I]
+    (S, ...A) => R(S, ...A),
+    [R]
   ), j = G(
     () => ({
-      definitionName: s,
+      definitionName: i,
       language: l,
       darkMode: m,
-      formStyle: S,
+      formStyle: v,
       fieldStyle: y,
       t: w
     }),
-    [s, l, m, y, S, w]
-  ), E = d?.height ? { height: "100%" } : void 0;
+    [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(
     "div",
     {
       "data-reactaform-theme": m ? "dark" : "light",
-      className: i,
-      style: E,
+      className: s,
+      style: I,
       children: e
     }
   ) });
 };
-function Ut(e) {
+function Wt(e) {
   if (!e || typeof e != "object") return "Definition must be an object";
   const r = e;
   if (!r.name || typeof r.name != "string") return "Definition must include a 'name' string";
@@ -4277,7 +4421,7 @@ function Ut(e) {
     }
   return null;
 }
-async function an(e, r = {}) {
+async function sn(e, r = {}) {
   const { validateSchema: n = !0 } = r;
   try {
     if (!e || typeof e != "string")
@@ -4295,7 +4439,7 @@ async function an(e, r = {}) {
       };
     }
     if (n) {
-      const a = Ut(t);
+      const a = Wt(t);
       if (a)
         return { success: !1, error: `Schema validation failed: ${a}` };
     }
@@ -4304,7 +4448,7 @@ async function an(e, r = {}) {
     return { success: !1, error: `Unexpected error loading definition: ${o instanceof Error ? o.message : "Unknown error"}` };
   }
 }
-function Wt(e, r) {
+function Yt(e, r) {
   try {
     if (!e)
       return { success: !1, error: "Definition is required" };
@@ -4327,7 +4471,7 @@ function Wt(e, r) {
     };
   }
 }
-function sn(e) {
+function cn(e) {
   try {
     if (!e)
       return { success: !1, error: "Instance data is required" };
@@ -4351,9 +4495,9 @@ function sn(e) {
     };
   }
 }
-ur();
-function Yt(e) {
-  const [r, n] = T(null);
+mr();
+function Jt(e) {
+  const [r, n] = D(null);
   return C(() => {
     const o = document.querySelector("[data-reactaform-theme]");
     if (!o) return;
@@ -4361,14 +4505,14 @@ function Yt(e) {
     if (!t) return;
     const a = () => n(t.getAttribute("data-reactaform-theme"));
     a();
-    const i = new MutationObserver((s) => {
-      for (const u of s)
+    const s = new MutationObserver((i) => {
+      for (const u of i)
         u.type === "attributes" && u.attributeName === "data-reactaform-theme" && a();
     });
-    return i.observe(t, { attributes: !0, attributeFilter: ["data-reactaform-theme"] }), () => i.disconnect();
+    return s.observe(t, { attributes: !0, attributeFilter: ["data-reactaform-theme"] }), () => s.disconnect();
   }, [e]), r;
 }
-const cn = ({
+const ln = ({
   definitionData: e,
   instance: r,
   language: n,
@@ -4376,75 +4520,75 @@ const cn = ({
   darkMode: t,
   style: a
 }) => {
-  const i = G(() => {
+  const s = G(() => {
     try {
       return typeof e == "string" ? JSON.parse(e) : e ?? null;
     } catch {
       return null;
     }
-  }, [e]), s = { fontSize: "inherit", fontFamily: "inherit", ...a }, u = Yt(), m = t ?? u === "dark", l = n ?? "en";
+  }, [e]), i = { fontSize: "inherit", fontFamily: "inherit", ...a }, u = Jt(), m = t ?? u === "dark", l = n ?? "en";
   if (C(() => {
     let c = document.getElementById("popup-root");
     c || (c = document.createElement("div"), c.id = "popup-root", document.body.appendChild(c));
-  }, []), !i)
+  }, []), !s)
     return /* @__PURE__ */ g.jsx("div", { style: { color: "red" }, children: "Error: No form definition provided." });
-  let d = r;
-  if (!d) {
-    const c = Wt(i, i.name);
+  let p = r;
+  if (!p) {
+    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." });
-    d = c.instance;
+    p = c.instance;
   }
   return /* @__PURE__ */ g.jsx(
-    Ht,
+    Ut,
     {
-      definitionName: i.name,
-      defaultStyle: s,
+      definitionName: s.name,
+      defaultStyle: i,
       defaultLanguage: l,
       defaultDarkMode: m,
-      defaultLocalizeName: i.localization || "",
+      defaultLocalizeName: s.localization || "",
       className: o,
       children: /* @__PURE__ */ g.jsx(
-        _t,
+        qt,
         {
-          definition: i,
-          instance: d
+          definition: s,
+          instance: p
         }
       )
     }
   );
 };
-function Jt() {
+function Gt() {
   if (!(typeof document > "u") && !document.getElementById("reactaform-styles"))
     try {
       const e = document.createElement("style");
-      e.id = "reactaform-styles", e.textContent = xr, document.head.appendChild(e);
+      e.id = "reactaform-styles", e.textContent = vr, document.head.appendChild(e);
     } catch {
     }
 }
-Jt();
+Gt();
 export {
   $ as CSS_CLASSES,
-  cn as ReactaForm,
-  Ht as ReactaFormProvider,
-  _t as ReactaFormRenderer,
+  ln as ReactaForm,
+  Ut as ReactaFormProvider,
+  qt as ReactaFormRenderer,
   W as StandardFieldLayout,
-  nn as Units,
-  X as combineClasses,
-  Wt as createInstanceFromDefinition,
-  tn as deserializeDefinition,
-  en as deserializeInstance,
-  Ot as getComponent,
-  sn as loadInstance,
-  an as loadJsonDefinition,
-  on as registerComponent,
-  Zt as registerFieldValidationHandler,
-  Xt as registerFormValidationHandler,
-  $t as registerSubmissionHandler,
-  rn as serializeDefinition,
-  Qt as serializeInstance,
-  Cr as useDebouncedCallback,
-  D as useReactaFormContext,
+  on as Units,
+  K as combineClasses,
+  Yt as createInstanceFromDefinition,
+  nn as deserializeDefinition,
+  rn as deserializeInstance,
+  $t as getComponent,
+  cn as loadInstance,
+  sn as loadJsonDefinition,
+  an as registerComponent,
+  Qt as registerFieldValidationHandler,
+  Zt as registerFormValidationHandler,
+  Vt as registerSubmissionHandler,
+  tn as serializeDefinition,
+  en as serializeInstance,
+  jr as useDebouncedCallback,
+  T as useReactaFormContext,
   Y as validateFieldValue,
-  Er as validateFormValues
+  Nr as validateFormValues
 };