reactaform 1.4.0 → 1.4.2

package/dist/reactaform.es.js

@@ -1,4 +1,4 @@
-import { jsx as y, jsxs as O, Fragment as Ye } from "react/jsx-runtime";
+import { jsx as h, jsxs as O, Fragment as Ye } from "react/jsx-runtime";
 import * as i from "react";
 import { createContext as xr, useContext as wr, useRef as ue, useEffect as He, useCallback as ye } from "react";
 import * as Ie from "react-dom";
@@ -367,7 +367,7 @@ function Cr(e, r = 300, t) {
     [r, t?.leading]
   ), cancel: c, flush: s };
 }
-const M = {
+const N = {
   field: "reactaform-field",
   label: "reactaform-label",
   input: "reactaform-input",
@@ -384,7 +384,7 @@ const M = {
     }));
   return r.join(" ");
 }, Xe = ({ content: e, size: r = "medium", animation: t = !0 }) => {
-  const { t: o, darkMode: n, formStyle: a, fieldStyle: l } = F(), [c, s] = i.useState(!1), [m, u] = i.useState({ x: 0, y: 0 }), [d, f] = i.useState(!1), g = i.useRef(null), h = i.useRef(null), p = i.useRef(null), b = i.useId(), C = i.useMemo(() => {
+  const { t: o, darkMode: n, formStyle: a, fieldStyle: l } = F(), [c, s] = i.useState(!1), [m, u] = i.useState({ x: 0, y: 0 }), [d, f] = i.useState(!1), g = i.useRef(null), b = i.useRef(null), p = i.useRef(null), y = i.useId(), S = i.useMemo(() => {
     const w = {
       icon: {
         display: "inline-flex",
@@ -429,8 +429,8 @@ const M = {
         opacity: 1,
         pointerEvents: "auto"
       }
-    }, x = ($, S, E) => {
-      const z = $?.[S];
+    }, x = (V, R, E) => {
+      const z = V?.[R];
       return (E && z ? z[E] : void 0) ?? {};
     };
     return {
@@ -440,33 +440,28 @@ const M = {
     };
   }, [n, r, t, a, l]);
   i.useLayoutEffect(() => {
-    if (!c || !g.current || !h.current) return;
-    const N = g.current.getBoundingClientRect(), w = h.current.getBoundingClientRect(), x = 8, R = window.innerWidth, $ = window.innerHeight;
-    let S = N.right + x, E = N.top + N.height / 2 - w.height / 2;
-    S + w.width > R - x && (S = N.left - x - w.width), S = Math.max(x, Math.min(S, R - w.width - x)), E = Math.max(x, Math.min(E, $ - w.height - x)), u({ x: S, y: E }), f(!0);
-  }, [c]), i.useEffect(() => {
-    if (!d) return;
-    const N = requestAnimationFrame(() => {
-      if (!h.current) return;
-      const w = h.current.getBoundingClientRect(), x = 8, R = typeof window < "u" ? window.innerWidth : 1024, $ = typeof window < "u" ? window.innerHeight : 768;
-      let S = m.x, E = m.y;
-      const I = p.current;
-      I && (S = I.right + x, E = I.top + I.height / 2 - w.height / 2 + -4, S + w.width > R - x && (S = I.left - x - w.width)), S + w.width > R - x && (S = Math.max(x, R - w.width - x)), S < x && (S = x), E + w.height > $ - x && (E = Math.max(x, $ - w.height - x)), E < x && (E = x), (S !== m.x || E !== m.y) && u({ x: S, y: E });
-    });
-    return () => cancelAnimationFrame(N);
-  }, [d, m.x, m.y]);
-  const v = typeof document < "u" ? document.getElementById("popup-root") : null, k = /* @__PURE__ */ y(
+    if (!c || !g.current || !b.current) {
+      f(!1);
+      return;
+    }
+    const I = g.current.getBoundingClientRect();
+    p.current = I;
+    const w = b.current.getBoundingClientRect(), x = 8, k = window.innerWidth, V = window.innerHeight, R = -4;
+    let E = I.right + x, M = I.top + I.height / 2 - w.height / 2 + R;
+    E + w.width > k - x && (E = I.left - x - w.width), E = Math.max(x, Math.min(E, k - w.width - x)), M = Math.max(x, Math.min(M, V - w.height - x)), u({ x: E, y: M }), f(!0);
+  }, [c]);
+  const v = typeof document < "u" ? document.getElementById("popup-root") : null, C = /* @__PURE__ */ h(
     "div",
     {
-      ref: h,
-      "data-tooltip-id": b,
+      ref: b,
+      "data-tooltip-id": y,
       style: {
-        ...C.text,
+        ...S.text,
         transform: d ? "translateY(0) scale(1)" : "translateY(-4px) scale(0.98)",
         transition: "opacity 120ms ease, transform 120ms ease, visibility 120ms ease",
         width: 240,
         // When positioned is true, apply the visible styles
-        ...d ? C.textVisible : {},
+        ...d ? S.textVisible : {},
         top: m.y,
         left: m.x
       },
@@ -475,21 +470,21 @@ const M = {
     }
   );
   return /* @__PURE__ */ O(Ye, { children: [
-    /* @__PURE__ */ y(
+    /* @__PURE__ */ h(
       "span",
       {
         "data-testid": "tooltip-icon",
         ref: g,
-        "aria-describedby": c ? b : void 0,
+        "aria-describedby": c ? y : void 0,
         onMouseEnter: () => s(!0),
         onMouseLeave: () => s(!1),
         style: {
-          ...C.icon
+          ...S.icon
         },
         children: "?"
       }
     ),
-    c && (v ? Ie.createPortal(k, v) : k)
+    c && (v ? Ie.createPortal(C, v) : C)
   ] });
 }, Se = i.memo(({
   field: e,
@@ -501,7 +496,7 @@ const M = {
   return /* @__PURE__ */ O(
     "div",
     {
-      className: `${M.field} column-layout`,
+      className: `${N.field} column-layout`,
       style: {
         display: "flex",
         flexDirection: "column",
@@ -509,11 +504,11 @@ const M = {
         "--label-align": a
       },
       children: [
-        o && /* @__PURE__ */ y("div", { style: { textAlign: a, width: "100%" }, children: /* @__PURE__ */ y(
+        o && /* @__PURE__ */ h("div", { style: { textAlign: a, width: "100%" }, children: /* @__PURE__ */ h(
           "label",
           {
             id: `${e.name}-label`,
-            className: M.label,
+            className: N.label,
             htmlFor: e.name,
             style: {
               textAlign: a,
@@ -535,12 +530,12 @@ const M = {
               width: "100%"
             },
             children: [
-              /* @__PURE__ */ y("div", { style: { flex: 1, minWidth: 0, maxWidth: "100%" }, children: /* @__PURE__ */ y("div", { style: { width: "100%" }, children: t }) }),
-              e.tooltip && /* @__PURE__ */ y(Xe, { content: e.tooltip })
+              /* @__PURE__ */ h("div", { style: { flex: 1, minWidth: 0, maxWidth: "100%" }, children: /* @__PURE__ */ h("div", { style: { width: "100%" }, children: t }) }),
+              e.tooltip && /* @__PURE__ */ h(Xe, { content: e.tooltip })
             ]
           }
         ),
-        r && /* @__PURE__ */ y($e, { id: `${e.name}-error`, children: r })
+        r && /* @__PURE__ */ h($e, { id: `${e.name}-error`, children: r })
       ]
     }
   );
@@ -562,12 +557,12 @@ const Ze = i.memo(({
     alignItems: "center",
     gap: "3px"
   }), []);
-  return /* @__PURE__ */ O("div", { className: `${M.field} row-layout`, children: [
-    /* @__PURE__ */ y(
+  return /* @__PURE__ */ O("div", { className: `${N.field} row-layout`, children: [
+    /* @__PURE__ */ h(
       "label",
       {
         id: `${e.name}-label`,
-        className: M.label,
+        className: N.label,
         htmlFor: e.name,
         style: { textAlign: "left", justifyContent: "flex-start" },
         children: n(e.displayName)
@@ -575,7 +570,7 @@ const Ze = i.memo(({
     ),
     /* @__PURE__ */ O("div", { style: a, children: [
       /* @__PURE__ */ O("div", { style: l, children: [
-        o ? /* @__PURE__ */ y(
+        o ? /* @__PURE__ */ h(
           "div",
           {
             style: {
@@ -588,9 +583,9 @@ const Ze = i.memo(({
             children: t
           }
         ) : t,
-        e.tooltip && /* @__PURE__ */ y(Xe, { content: e.tooltip })
+        e.tooltip && /* @__PURE__ */ h(Xe, { content: e.tooltip })
       ] }),
-      r && /* @__PURE__ */ y($e, { id: `${e.name}-error`, children: r })
+      r && /* @__PURE__ */ h($e, { id: `${e.name}-error`, children: r })
     ] })
   ] });
 });
@@ -600,7 +595,7 @@ const T = ({
   error: r,
   children: t,
   rightAlign: o = !1
-}) => e.labelLayout === "column-left" || e.labelLayout === "column-center" ? /* @__PURE__ */ y(Se, { field: e, error: r, showLabel: !0, children: t }) : e.type === "checkbox" || e.type === "switch" ? /* @__PURE__ */ y(Se, { field: e, error: r, showLabel: !1, children: t }) : /* @__PURE__ */ y(Ze, { field: e, error: r, rightAlign: o, children: t }), $e = i.memo(({ children: e, id: r }) => {
+}) => e.labelLayout === "column-left" || e.labelLayout === "column-center" ? /* @__PURE__ */ h(Se, { field: e, error: r, showLabel: !0, children: t }) : e.type === "checkbox" || e.type === "switch" ? /* @__PURE__ */ h(Se, { field: e, error: r, showLabel: !1, children: t }) : /* @__PURE__ */ h(Ze, { field: e, error: r, rightAlign: o, children: t }), $e = i.memo(({ children: e, id: r }) => {
   const t = i.useMemo(() => ({
     color: "var(--reactaform-error-color)",
     fontSize: "13px",
@@ -611,14 +606,14 @@ const T = ({
     justifyContent: "flex-start",
     alignItems: "flex-start"
   }), []);
-  return /* @__PURE__ */ y("div", { id: r, style: t, children: e });
+  return /* @__PURE__ */ h("div", { id: r, style: t, children: e });
 });
 $e.displayName = "ErrorDiv";
 const Qe = i.memo(({ name: e, onChange: r }) => {
   const { t } = F();
   return /* @__PURE__ */ O("div", { style: { marginBottom: 16 }, children: [
     /* @__PURE__ */ O("div", { style: { display: "grid", gridTemplateColumns: "1fr 2fr", gap: 12, alignItems: "center" }, children: [
-      /* @__PURE__ */ y(
+      /* @__PURE__ */ h(
         "label",
         {
           htmlFor: "instance-name-input",
@@ -631,7 +626,7 @@ const Qe = i.memo(({ name: e, onChange: r }) => {
           children: t("Instance Name")
         }
       ),
-      /* @__PURE__ */ y(
+      /* @__PURE__ */ h(
         "input",
         {
           id: "instance-name-input",
@@ -652,7 +647,7 @@ const Qe = i.memo(({ name: e, onChange: r }) => {
         }
       )
     ] }),
-    /* @__PURE__ */ y("div", { style: { height: "1px", backgroundColor: "var(--reactaform-separator, #e6e6e6)", marginTop: 12, marginBottom: 12 } })
+    /* @__PURE__ */ h("div", { style: { height: "1px", backgroundColor: "var(--reactaform-separator, #e6e6e6)", marginTop: 12, marginBottom: 12 } })
   ] });
 });
 Qe.displayName = "InstanceName";
@@ -712,7 +707,7 @@ function H(e, r, t, o) {
   const c = ve.get(l);
   if (c)
     try {
-      return c(t, o) || null;
+      return c(r.name, t, o) || null;
     } catch (s) {
       return String(s instanceof Error ? s.message : s);
     }
@@ -757,7 +752,7 @@ function Ce(e) {
     return !!r && typeof r.name == "string" && typeof r.size == "number";
   }
 }
-function Zt(e, r, t = {}) {
+function Yt(e, r, t = {}) {
   try {
     const {
       includeMetadata: o = !1,
@@ -772,22 +767,22 @@ function Zt(e, r, t = {}) {
         success: !1,
         error: "Instance must be a valid object"
       };
-    const m = [], u = [], d = {}, g = (or(r) || Z(r) && Array.isArray(r.properties) ? r.properties : []).filter(Ve), h = new Map(g.map((b) => [b.name, b]));
-    for (const [b, C] of Object.entries(e)) {
-      if (c.includes(b)) {
-        u.push(b);
+    const m = [], u = [], d = {}, g = (or(r) || Z(r) && Array.isArray(r.properties) ? r.properties : []).filter(Ve), b = new Map(g.map((y) => [y.name, y]));
+    for (const [y, S] of Object.entries(e)) {
+      if (c.includes(y)) {
+        u.push(y);
         continue;
       }
-      if (s.length > 0 && !s.includes(b)) {
-        u.push(b);
+      if (s.length > 0 && !s.includes(y)) {
+        u.push(y);
         continue;
       }
-      if (C === void 0) continue;
-      const v = h.get(b);
+      if (S === void 0) continue;
+      const v = b.get(y);
       try {
-        d[b] = Mr(C, v, { dateFormat: n, fileHandling: a });
-      } catch (k) {
-        m.push(`Error serializing field '${b}': ${String(k)}`), d[b] = null;
+        d[y] = Mr(S, v, { dateFormat: n, fileHandling: a });
+      } catch (C) {
+        m.push(`Error serializing field '${y}': ${String(C)}`), d[y] = null;
       }
     }
     return o && (d._metadata = {
@@ -881,7 +876,7 @@ function Be(e, r) {
     _note: "Base64 encoding requires async implementation"
   };
 }
-function Qt(e, r, t = {}) {
+function Xt(e, r, t = {}) {
   try {
     const {
       strict: o = !1,
@@ -910,27 +905,27 @@ function Qt(e, r, t = {}) {
       };
     const s = [], m = [], u = {}, f = (or(r) || Z(r) && Array.isArray(r.properties) ? r.properties : []).filter(Ve), g = new Map(f.map((p) => [p.name, p]));
     for (const p of f) {
-      const b = p.name, C = c[b];
-      if (C === void 0) {
-        o && p.required && m.push(`Required field '${b}' is missing`);
+      const y = p.name, S = c[y];
+      if (S === void 0) {
+        o && p.required && m.push(`Required field '${y}' is missing`);
         continue;
       }
       try {
-        u[b] = $r(C, p, { validateTypes: n, dateFormat: l });
+        u[y] = $r(S, p, { validateTypes: n, dateFormat: l });
       } catch (v) {
-        const k = `Error deserializing field '${b}': ${String(v)}`;
-        o ? m.push(k) : (s.push(k), u[b] = C);
+        const C = `Error deserializing field '${y}': ${String(v)}`;
+        o ? m.push(C) : (s.push(C), u[y] = S);
       }
     }
     if (a)
-      for (const [p, b] of Object.entries(c))
-        !g.has(p) && p !== "_metadata" && (o && s.push(`Unknown field '${p}' preserved`), u[p] = b);
-    const h = m.length > 0;
+      for (const [p, y] of Object.entries(c))
+        !g.has(p) && p !== "_metadata" && (o && s.push(`Unknown field '${p}' preserved`), u[p] = y);
+    const b = m.length > 0;
     return {
-      success: !h,
+      success: !b,
       data: u,
       warnings: s.length > 0 ? s : void 0,
-      validationErrors: h ? m : void 0
+      validationErrors: b ? m : void 0
     };
   } catch (o) {
     return {
@@ -976,7 +971,7 @@ function $r(e, r, t = {}) {
     return e;
   }
 }
-function en(e, r = {}) {
+function Zt(e, r = {}) {
   try {
     const { prettify: t = !0, includeMetadata: o = !0 } = r;
     if (!e || typeof e != "object")
@@ -1005,7 +1000,7 @@ function en(e, r = {}) {
     };
   }
 }
-function rn(e, r = {}) {
+function Qt(e, r = {}) {
   try {
     const { strict: t = !1, validateTypes: o = !0 } = r;
     let n;
@@ -1046,8 +1041,8 @@ function rn(e, r = {}) {
     s ? n.properties = s.map((u, d) => {
       const f = Z(u) ? u : {}, g = { ...f };
       if (!f.name) {
-        const h = `Property at index ${d} missing 'name'`;
-        t ? l.push(h) : (a.push(`${h}, using 'field_${d}'`), g.name = `field_${d}`);
+        const b = `Property at index ${d} missing 'name'`;
+        t ? l.push(b) : (a.push(`${b}, using 'field_${d}'`), g.name = `field_${d}`);
       }
       return f.displayName || (g.displayName = f.name || `Field ${d}`), f.type || (t && o ? l.push(`Property '${f.name || d}' missing 'type'`) : (a.push(`Property '${f.name || d}' missing 'type', using 'string'`), g.type = "string")), f.defaultValue === void 0 && (g.defaultValue = null), f.required === void 0 && (g.required = !1), g;
     }) : t ? l.push("Properties must be an array") : (a.push("Properties not found or invalid, using empty array"), n.properties = []);
@@ -1498,7 +1493,7 @@ for (const e of Hr) {
     r[a] || (r[a] = { name: String(a), shortName: String(a), factor: l });
   Oe[e] = r;
 }
-const tn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const en = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   dimensionUnitDisplayMap: Fe,
   dimensionUnitsMap: Ae,
@@ -1523,17 +1518,17 @@ const tn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   }, s = (d) => {
     (d.key === " " || d.key === "Spacebar" || d.key === "Space" || d.key === "Enter") && (d.preventDefault(), t?.(!r, null));
   }, m = e.name, u = H(n, e, r ?? !1, a);
-  return /* @__PURE__ */ y(T, { field: e, rightAlign: !1, children: /* @__PURE__ */ O("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }, children: [
-    /* @__PURE__ */ y(
+  return /* @__PURE__ */ h(T, { field: e, rightAlign: !1, children: /* @__PURE__ */ O("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }, children: [
+    /* @__PURE__ */ h(
       "label",
       {
-        className: M.label,
+        className: N.label,
         htmlFor: m,
         style: { textAlign: "left", justifyContent: "flex-start" },
         children: a(e.displayName)
       }
     ),
-    /* @__PURE__ */ y(
+    /* @__PURE__ */ h(
       "input",
       {
         id: m,
@@ -1594,22 +1589,22 @@ const Br = ({ field: e, value: r, onChange: t, onError: o }) => {
   i.useEffect(() => {
     u.current = o;
   }, [o]), i.useEffect(() => {
-    const v = r && sr(r) ? r : "#000000", k = ir(v);
-    c(k);
+    const v = r && sr(r) ? r : "#000000", C = ir(v);
+    c(C);
   }, [r]), i.useEffect(() => {
     const v = H(a, e, r ?? "#000000", n);
     u.current?.(v ?? null);
   }, [r, e, a, n]);
   const d = H(a, e, r ?? "#000000", n), f = (v) => {
-    const k = v.target.value;
-    c(k), t?.(k, null);
+    const C = v.target.value;
+    c(C), t?.(C, null);
   }, g = (v) => {
-    const k = v.target.value;
-    c(k), t?.(k, null);
-  }, h = We.find(
+    const C = v.target.value;
+    c(C), t?.(C, null);
+  }, b = We.find(
     (v) => v.value === l
-  ), { r: p, g: b, b: C } = qr(l) || { r: 0, g: 0, b: 0 };
-  return /* @__PURE__ */ y(T, { field: e, error: d, children: /* @__PURE__ */ O("div", { style: { display: "flex", alignItems: "center", gap: "8px", width: "100%" }, children: [
+  ), { r: p, g: y, b: S } = qr(l) || { r: 0, g: 0, b: 0 };
+  return /* @__PURE__ */ h(T, { field: e, error: d, children: /* @__PURE__ */ O("div", { style: { display: "flex", alignItems: "center", gap: "8px", width: "100%" }, children: [
     /* @__PURE__ */ O(
       "select",
       {
@@ -1618,24 +1613,24 @@ const Br = ({ field: e, value: r, onChange: t, onError: o }) => {
         value: l,
         onChange: f,
         style: { minWidth: "120px", flex: 1 },
-        className: B(M.input, M.inputSelect),
+        className: B(N.input, N.inputSelect),
         "aria-invalid": !!d,
         "aria-describedby": d ? `${e.name}-error` : void 0,
         children: [
-          We.map((v) => /* @__PURE__ */ y("option", { value: v.value, children: n(v.label) }, v.value)),
-          h ? null : /* @__PURE__ */ O("option", { value: l, children: [
+          We.map((v) => /* @__PURE__ */ h("option", { value: v.value, children: n(v.label) }, v.value)),
+          b ? null : /* @__PURE__ */ O("option", { value: l, children: [
             "(",
             p,
             ", ",
-            b,
+            y,
             ", ",
-            C,
+            S,
             ")"
           ] }, l)
         ]
       }
     ),
-    /* @__PURE__ */ y(
+    /* @__PURE__ */ h(
       "label",
       {
         style: {
@@ -1649,7 +1644,7 @@ const Br = ({ field: e, value: r, onChange: t, onError: o }) => {
           overflow: "hidden",
           flexShrink: 0
         },
-        children: /* @__PURE__ */ y(
+        children: /* @__PURE__ */ h(
           "input",
           {
             ref: m,
@@ -1700,35 +1695,35 @@ const Br = ({ field: e, value: r, onChange: t, onError: o }) => {
     if (!f || f.trim() === "")
       return c ? n("Value required") : null;
     if (f) {
-      const h = se(f);
-      if (!h) return n("Invalid date format");
+      const b = se(f);
+      if (!b) return n("Invalid date format");
       if (e.minDate) {
         const p = se(e.minDate);
-        if (p && h.getTime() < p.getTime())
+        if (p && b.getTime() < p.getTime())
           return n("Date must be on or after {{1}}", e.minDate);
       }
       if (e.maxDate) {
         const p = se(e.maxDate);
-        if (p && h.getTime() > p.getTime())
+        if (p && b.getTime() > p.getTime())
           return n("Date must be on or before {{1}}", e.maxDate);
       }
     }
     return H(a, e, f, n) ?? null;
   }, [e, a, n, c]), d = (f) => {
-    const g = f.target.value, h = u(g);
-    t?.(g, h);
+    const g = f.target.value, b = u(g);
+    t?.(g, b);
   };
   return i.useEffect(() => {
     const f = u(r);
     f !== s.current && (s.current = f, m.current?.(f ?? null));
-  }, [r, u]), /* @__PURE__ */ y(T, { field: e, error: u(r), children: /* @__PURE__ */ y(
+  }, [r, u]), /* @__PURE__ */ h(T, { field: e, error: u(r), children: /* @__PURE__ */ h(
     "input",
     {
       id: l,
       type: "date",
       value: Ur(r),
       onChange: d,
-      className: B(M.input, M.textInput),
+      className: B(N.input, N.textInput),
       ...e.minDate ? { min: e.minDate } : {},
       ...e.maxDate ? { max: e.maxDate } : {},
       "aria-invalid": !!u(r),
@@ -1761,7 +1756,7 @@ const Br = ({ field: e, value: r, onChange: t, onError: o }) => {
     const d = u.target.value, f = s(d);
     t?.(d, f);
   };
-  return /* @__PURE__ */ y(T, { field: e, error: s(String(r ?? "")), children: /* @__PURE__ */ y(
+  return /* @__PURE__ */ h(T, { field: e, error: s(String(r ?? "")), children: /* @__PURE__ */ h(
     "select",
     {
       id: e.name,
@@ -1771,10 +1766,10 @@ const Br = ({ field: e, value: r, onChange: t, onError: o }) => {
       ref: l,
       onChange: m,
       className: B(
-        M.input,
-        M.inputSelect
+        N.input,
+        N.inputSelect
       ),
-      children: (e.options ?? []).map((u) => /* @__PURE__ */ y("option", { value: String(u.value), children: n(u.label) }, String(u.value)))
+      children: (e.options ?? []).map((u) => /* @__PURE__ */ h("option", { value: String(u.value), children: n(u.label) }, String(u.value)))
     }
   ) });
 };
@@ -1790,9 +1785,7 @@ const Jr = ({
   const { definitionName: n, t: a } = F(), l = i.useRef(null), c = i.useCallback(
     (d) => {
       const f = d.trim();
-      return f === "" ? e.required ? a("Value required") : null : Kr(f) ? e.pattern && !new RegExp(e.pattern).test(f) ? e.patternErrorMessage ? a(e.patternErrorMessage) : a("Email does not match pattern: {{%1}}", {
-        "%1": `${e.pattern}`
-      }) : H(n, e, d, a) ?? null : a("Must be valid email format");
+      return f === "" ? e.required ? a("Value required") : null : Kr(f) ? e.pattern && !new RegExp(e.pattern).test(f) ? e.patternErrorMessage ? a(e.patternErrorMessage) : a("Email does not match pattern: {{1}}", e.pattern) : H(n, e, d, a) ?? null : a("Must be valid email format");
     },
     [e, n, a]
   ), s = (d) => {
@@ -1804,7 +1797,7 @@ const Jr = ({
   }, [o]), i.useEffect(() => {
     const d = r ?? "", f = c(d);
     l.current && l.current.value !== String(d) && (l.current.value = String(d)), f !== m.current && (m.current = f, u.current?.(f ?? null));
-  }, [r, c]), /* @__PURE__ */ y(T, { field: e, error: c(String(r ?? "")), children: /* @__PURE__ */ y(
+  }, [r, c]), /* @__PURE__ */ h(T, { field: e, error: c(String(r ?? "")), children: /* @__PURE__ */ h(
     "input",
     {
       id: e.name,
@@ -1812,7 +1805,7 @@ const Jr = ({
       defaultValue: String(r ?? ""),
       ref: l,
       onChange: s,
-      className: B(M.input, M.textInput),
+      className: B(N.input, N.textInput),
       "aria-invalid": !!c(String(r ?? "")),
       "aria-describedby": c(String(r ?? "")) ? `${e.name}-error` : void 0
     }
@@ -1823,7 +1816,7 @@ const Jr = ({
     thickness: o = 1,
     margin: n = "8px 0"
   } = e;
-  return /* @__PURE__ */ y(
+  return /* @__PURE__ */ h(
     "div",
     {
       style: {
@@ -1849,44 +1842,44 @@ const Jr = ({
     t?.(r, v), m.current?.(v ?? null);
   }, [r, u]);
   const f = (v) => {
-    const k = v.target.files;
-    let N = null;
-    if (k && k.length > 0) {
-      const x = Array.from(k);
-      e.multiple ? N = [...Array.isArray(r) ? r : [], ...x] : N = x[0];
+    const C = v.target.files;
+    let I = null;
+    if (C && C.length > 0) {
+      const x = Array.from(C);
+      e.multiple ? I = [...Array.isArray(r) ? r : [], ...x] : I = x[0];
     }
-    const w = u(N);
-    t?.(N, w);
+    const w = u(I);
+    t?.(I, w);
   }, g = (v) => {
     v.preventDefault(), v.stopPropagation(), c(!1);
-    const k = v.dataTransfer.files;
-    if (k && k.length > 0) {
-      const N = Array.from(k);
+    const C = v.dataTransfer.files;
+    if (C && C.length > 0) {
+      const I = Array.from(C);
       let w = null;
-      e.multiple ? w = [...Array.isArray(r) ? r : [], ...N] : w = N[0];
+      e.multiple ? w = [...Array.isArray(r) ? r : [], ...I] : w = I[0];
       const x = u(w);
       t?.(w, x);
     }
-  }, h = (v) => {
+  }, b = (v) => {
     v.preventDefault(), v.stopPropagation(), c(!0);
   }, p = (v) => {
     v.preventDefault(), v.stopPropagation(), c(!1);
-  }, b = (v) => {
+  }, y = (v) => {
     if (Array.isArray(r) && typeof v == "number") {
-      const k = r.filter((x, R) => R !== v), N = k.length > 0 ? k : null, w = u(N);
-      t?.(N, w);
+      const C = r.filter((x, k) => k !== v), I = C.length > 0 ? C : null, w = u(I);
+      t?.(I, w);
     } else {
-      const k = u(null);
-      t?.(null, k);
+      const C = u(null);
+      t?.(null, C);
     }
-  }, C = () => {
+  }, S = () => {
     const v = Array.isArray(r) ? r : r ? [r] : [];
-    return v.length === 0 ? null : /* @__PURE__ */ y("div", { style: {
+    return v.length === 0 ? null : /* @__PURE__ */ h("div", { style: {
       marginTop: "8px",
       display: "flex",
       flexDirection: "column",
       gap: "6px"
-    }, children: v.map((k, N) => /* @__PURE__ */ O(
+    }, children: v.map((C, I) => /* @__PURE__ */ O(
       "div",
       {
         style: {
@@ -1901,18 +1894,18 @@ const Jr = ({
           gap: "8px"
         },
         children: [
-          /* @__PURE__ */ y("div", { style: {
+          /* @__PURE__ */ h("div", { style: {
             flex: 1,
             minWidth: 0,
             overflow: "hidden",
             textOverflow: "ellipsis",
             whiteSpace: "nowrap"
-          }, children: k.name }),
-          /* @__PURE__ */ y(
+          }, children: C.name }),
+          /* @__PURE__ */ h(
             "button",
             {
               type: "button",
-              onClick: () => b(Array.isArray(r) ? N : void 0),
+              onClick: () => y(Array.isArray(r) ? I : void 0),
               "aria-label": n("Remove file"),
               style: {
                 background: "transparent",
@@ -1937,15 +1930,15 @@ const Jr = ({
           )
         ]
       },
-      `${k.name}-${N}`
+      `${C.name}-${I}`
     )) });
   };
-  return /* @__PURE__ */ y(T, { field: e, error: d, children: /* @__PURE__ */ O("div", { style: { width: "100%" }, children: [
+  return /* @__PURE__ */ h(T, { field: e, error: d, children: /* @__PURE__ */ O("div", { style: { width: "100%" }, children: [
     /* @__PURE__ */ O(
       "div",
       {
         onDrop: g,
-        onDragOver: h,
+        onDragOver: b,
         onDragLeave: p,
         style: {
           position: "relative",
@@ -1975,7 +1968,7 @@ const Jr = ({
         "aria-invalid": !!d,
         "aria-describedby": d ? `${e.name}-error` : void 0,
         children: [
-          /* @__PURE__ */ y(
+          /* @__PURE__ */ h(
             "input",
             {
               id: e.name,
@@ -1989,20 +1982,20 @@ const Jr = ({
               onChange: f
             }
           ),
-          /* @__PURE__ */ y("div", { style: {
+          /* @__PURE__ */ h("div", { style: {
             fontSize: "1.25rem",
             opacity: 0.6,
             lineHeight: 1,
             flexShrink: 0
           }, children: "📁" }),
-          /* @__PURE__ */ y("div", { style: {
+          /* @__PURE__ */ h("div", { style: {
             fontSize: "0.875rem",
             fontWeight: 400,
             color: "var(--reactaform-text-color, #111827)",
             flex: 1,
             textAlign: "left"
           }, children: l ? n("Drop files here") : e.multiple ? n("Choose Files or Drag & Drop") : n("Choose File or Drag & Drop") }),
-          e.accept && /* @__PURE__ */ y("div", { style: {
+          e.accept && /* @__PURE__ */ h("div", { style: {
             fontSize: "0.75rem",
             color: "var(--reactaform-text-muted, #6b7280)",
             whiteSpace: "nowrap",
@@ -2013,7 +2006,7 @@ const Jr = ({
         ]
       }
     ),
-    C()
+    S()
   ] }) });
 }, Xr = /^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][-+]?\d+)?$/;
 function Zr(e) {
@@ -2056,66 +2049,66 @@ const Qr = (e) => !e || e.trim() === "" ? [] : e.split(",").map((r) => r.trim())
     },
     [a, e, n]
   ), m = (f) => {
-    const g = f.target.value, h = s(g);
-    c(g), t?.(g, h);
-  }, u = i.useRef(null), d = i.useRef(o);
+    const g = f.target.value, b = s(g);
+    c(g), t?.(g, b);
+  }, u = i.useRef(null), d = i.useRef(
+    o
+  );
   return i.useEffect(() => {
     d.current = o;
   }, [o]), i.useEffect(() => {
     const f = Array.isArray(r) ? r.join(", ") : String(r ?? ""), g = s(f);
     g !== u.current && (u.current = g, d.current?.(g ?? null));
-  }, [r, e.required, s, n]), /* @__PURE__ */ y(T, { field: e, error: s(l), children: /* @__PURE__ */ y(
+  }, [r, e.required, s, n]), /* @__PURE__ */ h(T, { field: e, error: s(l), children: /* @__PURE__ */ h(
     "input",
     {
       id: e.name,
       type: "text",
       value: l,
       onChange: m,
-      className: B(M.input, M.textInput),
+      className: B(N.input, N.textInput),
       style: { flex: 1 },
       "aria-invalid": !!s(l),
       "aria-describedby": s(l) ? `${e.name}-error` : void 0
     }
   ) });
-}, rt = /^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][-+]?\d+)?$/, tt = (e) => {
-  const r = Number.parseFloat(e);
-  return Number.isNaN(r) ? null : r;
-}, nt = ({
+}, rt = ({
   field: e,
   value: r,
   onChange: t,
   onError: o
 }) => {
   const { t: n, definitionName: a } = F(), l = i.useRef(null), c = i.useCallback(
-    (d) => {
-      if (d.trim() === "")
+    (f) => {
+      if (f.trim() === "")
         return e.required ? n("Value required") : null;
-      if (!rt.test(d))
-        return n("Must be a valid float");
-      const f = tt(d);
-      return f === null ? n("Must be a valid float") : e.min !== void 0 && (e.minInclusive ? f < e.min : f <= e.min) ? n(
+      const g = Number.parseFloat(f);
+      return Number.isNaN(g) ? n("Must be a valid float") : e.min !== void 0 && (e.minInclusive ? g < e.min : g <= e.min) ? n(
         "Must be {{1}} {{2}}",
         e.minInclusive ? "≥" : ">",
         e.min
-      ) : e.max !== void 0 && (e.maxInclusive ? f > e.max : f >= e.max) ? n(
+      ) : e.max !== void 0 && (e.maxInclusive ? g > e.max : g >= e.max) ? n(
         "Must be {{1}} {{2}}",
         e.maxInclusive ? "≤" : "<",
         e.max
-      ) : H(a, e, f, n) ?? null;
+      ) : H(a, e, g, n) ?? null;
     },
     [e, a, n]
   ), s = i.useRef(null), m = i.useRef(o);
   i.useEffect(() => {
     m.current = o;
   }, [o]), i.useEffect(() => {
-    const d = String(r ?? ""), f = c(d);
-    f !== s.current && (s.current = f, m.current?.(f ?? null)), l.current && document.activeElement !== l.current && (l.current.value = d);
+    const f = String(r ?? ""), g = c(f);
+    g !== s.current && (s.current = g, m.current?.(g ?? null)), l.current && document.activeElement !== l.current && (l.current.value = f);
   }, [r, e, c, n]);
-  const u = (d) => {
-    const f = d.target.value, g = c(f);
-    t?.(f, g);
-  };
-  return /* @__PURE__ */ y(T, { field: e, error: c(String(r ?? "")), children: /* @__PURE__ */ y(
+  const u = (f) => {
+    const g = f.target.value, b = c(g);
+    t?.(g, b);
+  }, d = i.useMemo(
+    () => c(String(r ?? "")),
+    [r, c]
+  );
+  return /* @__PURE__ */ h(T, { field: e, error: d, children: /* @__PURE__ */ h(
     "input",
     {
       id: e.name,
@@ -2124,15 +2117,15 @@ const Qr = (e) => !e || e.trim() === "" ? [] : e.split(",").map((r) => r.trim())
       ref: l,
       onChange: u,
       className: B(
-        M.input,
-        M.inputNumber
+        N.input,
+        N.inputNumber
       ),
-      "aria-invalid": !!c(String(r ?? "")),
-      "aria-describedby": c(String(r ?? "")) ? `${e.name}-error` : void 0
+      "aria-invalid": !!d,
+      "aria-describedby": d ? `${e.name}-error` : void 0
     }
   ) });
 };
-function ot() {
+function tt() {
   try {
     return "/";
   } catch {
@@ -2144,46 +2137,46 @@ function ot() {
   }
   return "/";
 }
-const at = ({ field: e, value: r }) => {
+const nt = ({ field: e, value: r }) => {
   const { language: t, t: o } = F(), n = e.alignment || "center", a = {
     left: "flex-start",
     center: "center",
     right: "flex-end"
   }, l = typeof r == "string" ? r : "";
   let c = l && l.trim() !== "" ? l : typeof e.defaultValue == "string" ? e.defaultValue : "";
-  c && !c.startsWith("/") && (c = `${ot()}${c}`);
-  const s = e.localized?.split(";").map((b) => b.trim()), [m, u] = i.useState(c || ""), d = i.useRef(c || null);
+  c && !c.startsWith("/") && (c = `${tt()}${c}`);
+  const s = e.localized?.split(";").map((y) => y.trim()), [m, u] = i.useState(c || ""), d = i.useRef(c || null);
   if (i.useEffect(() => {
     if (!c) return;
-    const b = c.split("/"), C = b.pop(), v = C.lastIndexOf(".");
+    const y = c.split("/"), S = y.pop(), v = S.lastIndexOf(".");
     if (v === -1) return;
-    const k = C.substring(0, v), N = C.substring(v);
+    const C = S.substring(0, v), I = S.substring(v);
     let w = null;
-    s?.includes(t) && (w = `${k}_${t}${N}`);
+    s?.includes(t) && (w = `${C}_${t}${I}`);
     const x = new AbortController();
     if (w) {
-      const R = [...b, w].join("/");
-      fetch(R, { method: "HEAD", signal: x.signal }).then(($) => {
-        const S = $.ok ? R : c;
-        S !== d.current && (d.current = S, u(S));
+      const k = [...y, w].join("/");
+      fetch(k, { method: "HEAD", signal: x.signal }).then((V) => {
+        const R = V.ok ? k : c;
+        R !== d.current && (d.current = R, u(R));
       }).catch(() => {
         c !== d.current && (d.current = c, u(c));
       });
     } else {
-      const R = c;
-      R !== d.current && (d.current = R, requestAnimationFrame(() => u(R)));
+      const k = c;
+      k !== d.current && (d.current = k, requestAnimationFrame(() => u(k)));
     }
     return () => {
       x.abort();
     };
   }, [c, t, s]), !m) return null;
-  const { width: f, height: g } = e, h = {}, p = {
+  const { width: f, height: g } = e, b = {}, p = {
     borderRadius: "8px",
     objectFit: "contain",
     boxShadow: "0 2px 6px rgba(0,0,0,0.1)",
     margin: "0 0 8px 0"
   };
-  return f && g ? (h.width = f, h.height = g, p.width = `${f}px`, p.height = `${g}px`) : f && !g ? (h.width = f, p.width = `${f}px`, p.height = "auto") : !f && g && (h.height = g, p.width = "auto", p.height = `${g}px`), /* @__PURE__ */ y(T, { field: e, children: /* @__PURE__ */ y(
+  return f && g ? (b.width = f, b.height = g, p.width = `${f}px`, p.height = `${g}px`) : f && !g ? (b.width = f, p.width = `${f}px`, p.height = "auto") : !f && g && (b.height = g, p.width = "auto", p.height = `${g}px`), /* @__PURE__ */ h(T, { field: e, children: /* @__PURE__ */ h(
     "div",
     {
       "data-testid": "image-wrapper",
@@ -2192,23 +2185,23 @@ const at = ({ field: e, value: r }) => {
         justifyContent: a[n] || "center",
         margin: "0 0"
       },
-      children: /* @__PURE__ */ y(
+      children: /* @__PURE__ */ h(
         "img",
         {
           src: m,
           alt: o?.(e.displayName || "Image") || e.displayName || "Image",
-          ...h,
+          ...b,
           style: p
         }
       )
     }
   ) });
 };
-function st(e) {
+function ot(e) {
   const r = /^-?\d+$/;
   return e.split(",").map((t) => t.trim()).every((t) => r.test(t));
 }
-const it = ({
+const at = ({
   field: e,
   value: r,
   onChange: t,
@@ -2216,18 +2209,18 @@ const it = ({
 }) => {
   const { t: n, definitionName: a } = F(), l = ",", [c, s] = i.useState(
     Array.isArray(r) ? r.join(l + " ") : String(r ?? "")
-  ), m = (p) => !p || p.trim() === "" ? [] : p.split(l).map((b) => b.trim()).filter(Boolean).map((b) => Number(b)), u = i.useCallback(
+  ), m = (p) => !p || p.trim() === "" ? [] : p.split(l).map((y) => y.trim()).filter(Boolean).map((y) => Number(y)), u = i.useCallback(
     (p) => {
       if (p.trim() === "")
         return e.required ? n("Value required") : null;
-      if (!st(p))
+      if (!ot(p))
         return n("Each value must be a valid integer");
-      const b = m(p);
-      if (e.minCount !== void 0 && b.length < e.minCount)
+      const y = m(p);
+      if (e.minCount !== void 0 && y.length < e.minCount)
         return n("Minimum number of values: {{1}}", `${e.minCount}`);
-      if (e.maxCount !== void 0 && b.length > e.maxCount)
+      if (e.maxCount !== void 0 && y.length > e.maxCount)
         return n("Maximum number of values: {{1}}", `${e.maxCount}`);
-      for (const v of b) {
+      for (const v of y) {
         if (e.min !== void 0 && (e.minInclusive ? v < e.min : v <= e.min))
           return n(
             "Each value must be {{1}} {{2}}",
@@ -2241,106 +2234,106 @@ const it = ({
             e.max
           );
       }
-      return H(a, e, b, n) ?? null;
+      return H(a, e, y, n) ?? null;
     },
     [a, e, n]
   ), d = (p) => {
-    const b = p.target.value, C = u(b);
-    s(b), t?.(b, C);
+    const y = p.target.value, S = u(y);
+    s(y), t?.(y, S);
   }, f = i.useRef(null), g = i.useRef(
     o
   );
   i.useEffect(() => {
     g.current = o;
   }, [o]), i.useEffect(() => {
-    const p = Array.isArray(r) ? r.join(l + " ") : String(r ?? ""), b = u(p);
-    b !== f.current && (f.current = b, g.current?.(b ?? null));
+    const p = Array.isArray(r) ? r.join(l + " ") : String(r ?? ""), y = u(p);
+    y !== f.current && (f.current = y, g.current?.(y ?? null));
   }, [r, e.required, u, n]);
-  const h = u(c);
-  return /* @__PURE__ */ y(T, { field: e, error: h, children: /* @__PURE__ */ y(
+  const b = u(c);
+  return /* @__PURE__ */ h(T, { field: e, error: b, children: /* @__PURE__ */ h(
     "input",
     {
       id: e.name,
       type: "text",
       value: c,
       onChange: d,
-      className: B(M.input, M.textInput),
+      className: B(N.input, N.textInput),
       style: { flex: 1 },
-      "aria-invalid": !!h,
-      "aria-describedby": h ? `${e.name}-error` : void 0
+      "aria-invalid": !!b,
+      "aria-describedby": b ? `${e.name}-error` : void 0
     }
   ) });
 };
-function ct(e) {
+function st(e) {
   return /^[-+]?\d*$/.test(e);
 }
-const lt = ({
+const it = ({
   field: e,
   value: r,
   onChange: t,
   onError: o
 }) => {
-  const { t: n, definitionName: a } = F(), l = i.useRef(null), c = i.useCallback((g) => {
-    const h = parseInt(g, 10);
-    return Number.isNaN(h) ? null : h;
-  }, []), s = i.useCallback(
-    (g) => {
-      if (g.trim() === "")
+  const { t: n, definitionName: a } = F(), l = i.useRef(null), c = i.useCallback(
+    (f) => {
+      if (f.trim() === "")
         return e.required ? n("Value required") : null;
-      if (!ct(g))
+      if (!st(f))
         return n("Must be a valid integer");
-      const h = c(g);
-      if (h === null) return n("Must be a valid integer");
-      if (e.min !== void 0 && (e.minInclusive ? h < e.min : h <= e.min))
+      const g = parseInt(f, 10);
+      if (Number.isNaN(g)) return n("Must be a valid integer");
+      if (e.min !== void 0 && (e.minInclusive ? g < e.min : g <= e.min))
         return n(
           "Must be {{1}} {{2}}",
           e.minInclusive ? "≥" : ">",
           e.min
         );
-      if (e.max !== void 0 && (e.maxInclusive ? h > e.max : h >= e.max))
+      if (e.max !== void 0 && (e.maxInclusive ? g > e.max : g >= e.max))
         return n(
           "Must be {{1}} {{2}}",
           e.maxInclusive ? "≤" : "<",
           e.max
         );
       if (e.step !== void 0) {
-        const b = Number(e.step);
-        if (!Number.isInteger(b))
+        const p = Number(e.step);
+        if (!Number.isInteger(p))
           return n("Invalid step value");
-        if (h % b !== 0)
-          return n("Must be a multiple of {{1}}", b);
+        if (g % p !== 0)
+          return n("Must be a multiple of {{1}}", p);
       }
-      return H(a, e, h, n) ?? null;
+      return H(a, e, g, n) ?? null;
     },
-    [e, a, n, c]
-  ), m = i.useRef(null), u = i.useRef(o);
+    [e, a, n]
+  ), s = i.useRef(null), m = i.useRef(o);
   i.useEffect(() => {
-    u.current = o;
+    m.current = o;
   }, [o]), i.useEffect(() => {
-    const g = String(r ?? ""), h = s(g);
-    h !== m.current && (m.current = h, u.current?.(h ?? null)), l.current && document.activeElement !== l.current && (l.current.value = g);
-  }, [r, e, s, n]);
-  const d = (g) => {
-    const h = g.target.value, p = s(h);
-    t?.(h, p);
-  }, f = s(String(r ?? ""));
-  return /* @__PURE__ */ y(T, { field: e, error: f, children: /* @__PURE__ */ y(
+    const f = String(r ?? ""), g = c(f);
+    g !== s.current && (s.current = g, m.current?.(g ?? null)), l.current && document.activeElement !== l.current && (l.current.value = f);
+  }, [r, e, c, n]);
+  const u = (f) => {
+    const g = f.target.value, b = c(g);
+    t?.(g, b);
+  }, d = i.useMemo(
+    () => c(String(r ?? "")),
+    [r, c]
+  );
+  return /* @__PURE__ */ h(T, { field: e, error: d, children: /* @__PURE__ */ h(
     "input",
     {
       id: e.name,
       type: "text",
       defaultValue: String(r ?? ""),
       ref: l,
-      onChange: d,
+      onChange: u,
       className: B(
-        M.input,
-        M.inputNumber
+        N.input,
+        N.inputNumber
       ),
-      "aria-invalid": !!f,
-      "aria-describedby": f ? `${e.name}-error` : void 0
+      "aria-invalid": !!d,
+      "aria-describedby": d ? `${e.name}-error` : void 0
     }
   ) });
-}, ut = ({
+}, ct = ({
   field: e,
   value: r,
   onChange: t,
@@ -2353,15 +2346,15 @@ const lt = ({
     m.current = o;
   }, [o]);
   const u = i.useCallback(
-    (h) => h.trim() === "" ? e.required ? n("Value required") : null : e.minLength !== void 0 && h.length < e.minLength ? n("Must be at least {{1}} characters", e.minLength) : e.maxLength !== void 0 && h.length > e.maxLength ? n("Must be at most {{1}} characters", e.maxLength) : H(a, e, h, n),
+    (b) => b.trim() === "" ? e.required ? n("Value required") : null : e.minLength !== void 0 && b.length < e.minLength ? n("Must be at least {{1}} characters", e.minLength) : e.maxLength !== void 0 && b.length > e.maxLength ? n("Must be at most {{1}} characters", e.maxLength) : H(a, e, b, n),
     [e, a, n]
-  ), d = (h) => {
-    const p = h.target.value, b = u(p);
-    t?.(p, b);
+  ), d = (b) => {
+    const p = b.target.value, y = u(p);
+    t?.(p, y);
   };
   i.useEffect(() => {
-    const h = u(r);
-    h !== s.current && (s.current = h, m.current?.(h ?? null)), c.current && c.current.value !== String(r ?? "") && (c.current.value = String(r ?? ""));
+    const b = u(r);
+    b !== s.current && (s.current = b, m.current?.(b ?? null)), c.current && c.current.value !== String(r ?? "") && (c.current.value = String(r ?? ""));
   }, [r, u]);
   const f = {
     id: e.name,
@@ -2374,9 +2367,9 @@ const lt = ({
       width: "100%",
       boxSizing: "border-box"
     },
-    className: B(M.input, M.textInput)
+    className: B(N.input, N.textInput)
   }, g = u(r);
-  return /* @__PURE__ */ y(T, { field: e, error: g, children: /* @__PURE__ */ y(
+  return /* @__PURE__ */ h(T, { field: e, error: g, children: /* @__PURE__ */ h(
     "textarea",
     {
       ...f,
@@ -2384,7 +2377,7 @@ const lt = ({
       "aria-describedby": g ? `${e.name}-error` : void 0
     }
   ) });
-}, ft = ({
+}, lt = ({
   field: e,
   value: r,
   onChange: t,
@@ -2394,28 +2387,28 @@ const lt = ({
   i.useEffect(() => {
     n.current = o;
   }, [o]);
-  const { t: a, darkMode: l, formStyle: c, fieldStyle: s, definitionName: m } = F(), u = (S, E, I) => {
+  const { t: a, darkMode: l, formStyle: c, fieldStyle: s, definitionName: m } = F(), u = (R, E, M) => {
     if (!E) return {};
-    const q = S?.[E];
-    return (I && q ? q[I] : void 0) ?? {};
-  }, d = i.useRef(null), [f, g] = i.useState(!1), [h, p] = i.useState(
+    const q = R?.[E];
+    return (M && q ? q[M] : void 0) ?? {};
+  }, d = i.useRef(null), [f, g] = i.useState(!1), [b, p] = i.useState(
     null
-  ), b = i.useMemo(
-    () => e.options.map((S) => ({ value: S.value, label: a(S.label) })),
+  ), y = i.useMemo(
+    () => e.options.map((R) => ({ value: R.value, label: a(R.label) })),
     [e.options, a]
-  ), C = i.useMemo(() => {
-    const S = Array.isArray(r) ? r : [], E = new Set(b.map((I) => I.value));
-    return S.filter((I) => E.has(I));
-  }, [r, b]), v = (S) => {
-    const E = Array.isArray(S) ? S : [];
+  ), S = i.useMemo(() => {
+    const R = Array.isArray(r) ? r : [], E = new Set(y.map((M) => M.value));
+    return R.filter((M) => E.has(M));
+  }, [r, y]), v = (R) => {
+    const E = Array.isArray(R) ? R : [];
     return e.required && E.length === 0 ? a("Value required") : H(m, e, E, a) ?? null;
-  }, k = () => {
+  }, C = () => {
     if (!d.current) return;
-    const S = d.current.getBoundingClientRect();
-    p({ x: S.left, y: S.bottom }), g((E) => !E);
-  }, N = (S) => {
-    const E = C.includes(S) ? C.filter((z) => z !== S) : [...C, S], I = v(E);
-    n.current?.(I ?? null), t?.(E, I);
+    const R = d.current.getBoundingClientRect();
+    p({ x: R.left, y: R.bottom }), g((E) => !E);
+  }, I = (R) => {
+    const E = S.includes(R) ? S.filter((z) => z !== R) : [...S, R], M = v(E);
+    n.current?.(M ?? null), t?.(E, M);
   }, w = i.useMemo(() => ({
     height: "var(--reactaform-input-height, 2.5rem)",
     padding: "var(--reactaform-input-padding, 8px)",
@@ -2443,7 +2436,7 @@ const lt = ({
     padding: 0,
     ...u(c, "multiSelect", "clearButton"),
     ...u(s, void 0, "clearButton")
-  }), [c, s]), R = i.useMemo(() => ({
+  }), [c, s]), k = i.useMemo(() => ({
     position: "absolute",
     right: "0.7em",
     top: "50%",
@@ -2453,61 +2446,61 @@ const lt = ({
     color: "var(--reactaform-text-muted, #999)",
     ...u(c, "multiSelect", "arrow"),
     ...u(s, void 0, "arrow")
-  }), [c, s]), $ = v(Array.isArray(r) ? r : []);
+  }), [c, s]), V = v(Array.isArray(r) ? r : []);
   return /* @__PURE__ */ O("div", { children: [
-    /* @__PURE__ */ y(T, { field: e, error: null, children: /* @__PURE__ */ y("div", { style: { width: "100%" }, children: /* @__PURE__ */ O(
+    /* @__PURE__ */ h(T, { field: e, error: null, children: /* @__PURE__ */ h("div", { style: { width: "100%" }, children: /* @__PURE__ */ O(
       "div",
       {
         ref: d,
         className: "reactaform-multiselection-control",
         style: w,
-        onClick: k,
+        onClick: C,
         tabIndex: 0,
         role: "button",
         "aria-haspopup": "listbox",
         "aria-expanded": f,
-        "aria-invalid": !!$,
-        "aria-describedby": $ ? `${e.name}-error` : void 0,
-        onKeyDown: (S) => {
-          (S.key === "Enter" || S.key === " ") && (S.preventDefault(), k());
+        "aria-invalid": !!V,
+        "aria-describedby": V ? `${e.name}-error` : void 0,
+        onKeyDown: (R) => {
+          (R.key === "Enter" || R.key === " ") && (R.preventDefault(), C());
         },
         children: [
           /* @__PURE__ */ O("span", { style: { flex: 1, color: "var(--reactaform-text-muted, #888)" }, children: [
-            C.length,
+            S.length,
             " / ",
-            b.length,
+            y.length,
             " selected"
           ] }),
-          C.length > 0 && /* @__PURE__ */ y(
+          S.length > 0 && /* @__PURE__ */ h(
             "button",
             {
               type: "button",
               "aria-label": "Clear selections",
-              onClick: (S) => {
-                S.stopPropagation(), t?.([], null);
+              onClick: (R) => {
+                R.stopPropagation(), t?.([], null);
               },
               style: x,
-              children: /* @__PURE__ */ y("span", { style: x, "aria-hidden": !0, children: "✖" })
+              children: /* @__PURE__ */ h("span", { style: x, "aria-hidden": !0, children: "✖" })
             }
           ),
-          /* @__PURE__ */ y("span", { style: R, "aria-hidden": !0, children: "▼" })
+          /* @__PURE__ */ h("span", { style: k, "aria-hidden": !0, children: "▼" })
         ]
       }
     ) }) }),
-    f && h && /* @__PURE__ */ y(
-      mt,
+    f && b && /* @__PURE__ */ h(
+      ut,
       {
-        position: h,
-        options: b,
-        selectedValues: C,
-        onToggleOption: N,
+        position: b,
+        options: y,
+        selectedValues: S,
+        onToggleOption: I,
         onClose: () => g(!1),
         controlRef: d,
         darkMode: l
       }
     )
   ] });
-}, mt = ({
+}, ut = ({
   position: e,
   options: r,
   selectedValues: t,
@@ -2516,10 +2509,10 @@ const lt = ({
   controlRef: a,
   darkMode: l
 }) => {
-  const c = i.useRef(null), [s, m] = i.useState(-1), { formStyle: u, fieldStyle: d } = F(), f = (x, R, $) => {
-    if (!R) return {};
-    const E = x?.[R];
-    return ($ && E ? E[$] : void 0) ?? {};
+  const c = i.useRef(null), [s, m] = i.useState(-1), { formStyle: u, fieldStyle: d } = F(), f = (x, k, V) => {
+    if (!k) return {};
+    const E = x?.[k];
+    return (V && E ? E[V] : void 0) ?? {};
   }, g = i.useMemo(() => ({
     maxHeight: 200,
     overflowY: "auto",
@@ -2533,7 +2526,7 @@ const lt = ({
     fontSize: "var(--reactaform-popup-font-size, 0.875rem)",
     ...f(u, "multiSelect", "popup"),
     ...f(d, void 0, "popup")
-  }), [u, d]), h = i.useMemo(() => ({
+  }), [u, d]), b = i.useMemo(() => ({
     padding: "6px 8px",
     cursor: "pointer",
     display: "flex",
@@ -2544,9 +2537,9 @@ const lt = ({
     ...f(d, void 0, "option")
   }), [u, d]);
   i.useEffect(() => {
-    const x = (R) => {
-      const $ = R.target;
-      !c.current?.contains($) && !a.current?.contains($) && n();
+    const x = (k) => {
+      const V = k.target;
+      !c.current?.contains(V) && !a.current?.contains(V) && n();
     };
     return document.addEventListener("mousedown", x), () => document.removeEventListener("mousedown", x);
   }, [n, a]), i.useEffect(() => {
@@ -2556,30 +2549,30 @@ const lt = ({
     const x = c.current.querySelector(`#multi-opt-${s}`);
     x && requestAnimationFrame(() => x.focus());
   }, [s]);
-  const p = 250, b = 200, [C, v] = i.useState(
+  const p = 250, y = 200, [S, v] = i.useState(
     null
-  ), [k, N] = i.useState(null);
+  ), [C, I] = i.useState(null);
   if (i.useEffect(() => {
     if (typeof window > "u") return;
     const x = () => {
-      let S = e.x, E = e.y, I = p;
+      let R = e.x, E = e.y, M = p;
       const z = a?.current;
       if (z) {
         const q = z.getBoundingClientRect();
-        S = q.left, E = q.bottom, I = Math.max(80, Math.round(q.width));
+        R = q.left, E = q.bottom, M = Math.max(80, Math.round(q.width));
       }
-      S = Math.min(S, window.innerWidth - I), E = Math.min(E, window.innerHeight - b), v({ left: S, top: E }), N(I);
+      R = Math.min(R, window.innerWidth - M), E = Math.min(E, window.innerHeight - y), v({ left: R, top: E }), I(M);
     };
     x(), window.addEventListener("scroll", x, !0), window.addEventListener("resize", x);
-    let R = null;
-    const $ = a?.current;
-    return typeof ResizeObserver < "u" && $ && (R = new ResizeObserver(() => x()), R.observe($)), () => {
-      window.removeEventListener("scroll", x, !0), window.removeEventListener("resize", x), R && $ && R.unobserve($);
+    let k = null;
+    const V = a?.current;
+    return typeof ResizeObserver < "u" && V && (k = new ResizeObserver(() => x()), k.observe(V)), () => {
+      window.removeEventListener("scroll", x, !0), window.removeEventListener("resize", x), k && V && k.unobserve(V);
     };
   }, [a, e.x, e.y]), typeof window > "u") return null;
   let w = document.getElementById("popup-root");
   return w || (w = document.createElement("div"), w.id = "popup-root", document.body.appendChild(w)), Ie.createPortal(
-    /* @__PURE__ */ y(
+    /* @__PURE__ */ h(
       "div",
       {
         ref: c,
@@ -2587,65 +2580,65 @@ const lt = ({
         "aria-activedescendant": s >= 0 ? `multi-opt-${s}` : void 0,
         style: {
           position: "absolute",
-          top: C ? C.top : e.y,
-          left: C ? C.left : e.x,
-          width: k ?? p,
+          top: S ? S.top : e.y,
+          left: S ? S.left : e.x,
+          width: C ?? p,
           // spread the static popup styles
           ...g
         },
         "data-reactaform-theme": l ? "dark" : "light",
-        children: r.map((x, R) => {
-          const $ = t.includes(x.value), S = l ? "var(--reactaform-hover-bg, rgba(255,255,255,0.01))" : "var(--reactaform-hover-bg, #eee)", E = {
-            ...h,
-            background: R === s ? S : h.background
+        children: r.map((x, k) => {
+          const V = t.includes(x.value), R = l ? "var(--reactaform-hover-bg, rgba(255,255,255,0.01))" : "var(--reactaform-hover-bg, #eee)", E = {
+            ...b,
+            background: k === s ? R : b.background
           };
           return /* @__PURE__ */ O(
             "div",
             {
-              id: `multi-opt-${R}`,
-              onMouseDown: (I) => {
-                I.stopPropagation(), o(x.value);
+              id: `multi-opt-${k}`,
+              onMouseDown: (M) => {
+                M.stopPropagation(), o(x.value);
               },
-              onKeyDown: (I) => {
+              onKeyDown: (M) => {
                 const z = r.length;
-                switch (I.key) {
+                switch (M.key) {
                   case "ArrowDown":
-                    I.preventDefault(), m((q) => (q + 1) % z);
+                    M.preventDefault(), m((q) => (q + 1) % z);
                     break;
                   case "ArrowUp":
-                    I.preventDefault(), m((q) => (q - 1 + z) % z);
+                    M.preventDefault(), m((q) => (q - 1 + z) % z);
                     break;
                   case "Home":
-                    I.preventDefault(), m(0);
+                    M.preventDefault(), m(0);
                     break;
                   case "End":
-                    I.preventDefault(), m(z - 1);
+                    M.preventDefault(), m(z - 1);
                     break;
                   case "Enter":
                   case " ":
-                    I.preventDefault(), I.stopPropagation(), o(x.value);
+                    M.preventDefault(), M.stopPropagation(), o(x.value);
                     break;
                   case "Escape":
-                    I.preventDefault(), n(), a?.current?.focus();
+                    M.preventDefault(), n(), a?.current?.focus();
                     break;
                 }
               },
-              tabIndex: R === s ? 0 : -1,
+              tabIndex: k === s ? 0 : -1,
               role: "option",
-              "aria-selected": $,
+              "aria-selected": V,
               style: E,
-              onMouseEnter: (I) => {
-                I.currentTarget.style.background = S, m(R);
+              onMouseEnter: (M) => {
+                M.currentTarget.style.background = R, m(k);
               },
-              onMouseLeave: (I) => {
-                I.currentTarget.style.background = "transparent", m((z) => z === R ? -1 : z);
+              onMouseLeave: (M) => {
+                M.currentTarget.style.background = "transparent", m((z) => z === k ? -1 : z);
               },
               children: [
-                /* @__PURE__ */ y(
+                /* @__PURE__ */ h(
                   "input",
                   {
                     type: "checkbox",
-                    checked: $,
+                    checked: V,
                     readOnly: !0,
                     style: {
                       marginRight: 8,
@@ -2667,14 +2660,14 @@ const lt = ({
     ),
     w
   );
-}, dt = ({
+}, ft = ({
   field: e,
   value: r,
   onChange: t,
   onError: o
 }) => {
   const { t: n, definitionName: a } = F(), l = i.useRef(null), c = e.min ?? void 0, s = e.max ?? void 0, m = Math.max(1, Math.round(e.step ?? 1)), u = i.useCallback(
-    (b) => isNaN(b) ? n("Must be a valid integer") : Number.isInteger(b) ? c !== void 0 && b < c ? n("Must be �?{{1}}", c) : s !== void 0 && b > s ? n("Must be �?{{1}}", s) : H(a, e, b, n) ?? null : n("Must be an integer"),
+    (y) => isNaN(y) ? n("Must be a valid integer") : Number.isInteger(y) ? c !== void 0 && y < c ? n("Must be ≥ {{1}}", c) : s !== void 0 && y > s ? n("Must be ≤ {{1}}", s) : H(a, e, y, n) ?? null : n("Must be an integer"),
     [a, e, n, c, s]
   ), d = i.useRef(null), f = i.useRef(
     o
@@ -2683,18 +2676,18 @@ const lt = ({
     f.current = o;
   }, [o]), i.useEffect(() => {
     if (document.activeElement === l.current) return;
-    const C = String(r), v = u(r);
-    l.current && (l.current.value = C), v !== d.current && (d.current = v, f.current?.(v ?? null));
+    const S = String(r), v = u(r);
+    l.current && (l.current.value = S), v !== d.current && (d.current = v, f.current?.(v ?? null));
   }, [r, u]);
-  const g = (b) => {
-    if (b.trim() === "") return e.required ? n("Value required") : null;
-    const v = Number(b);
+  const g = (y) => {
+    if (y.trim() === "") return e.required ? n("Value required") : null;
+    const v = Number(y);
     return u(v);
-  }, h = (b) => {
-    const C = b.target.value, v = b.target.valueAsNumber, k = g(C);
-    t?.(v, k);
+  }, b = (y) => {
+    const S = y.target.value, v = y.target.valueAsNumber, C = g(S);
+    t?.(v, C);
   }, p = g(String(r ?? ""));
-  return /* @__PURE__ */ y(T, { field: e, error: p, children: /* @__PURE__ */ y(
+  return /* @__PURE__ */ h(T, { field: e, error: p, children: /* @__PURE__ */ h(
     "input",
     {
       ref: l,
@@ -2704,14 +2697,14 @@ const lt = ({
       min: c,
       max: s,
       step: m,
-      onChange: h,
+      onChange: b,
       style: { width: "100%", height: "100%" },
-      className: M.input,
+      className: N.input,
       "aria-invalid": !!p,
       "aria-describedby": p ? `${e.name}-error` : void 0
     }
   ) });
-}, pt = ({
+}, mt = ({
   field: e,
   value: r,
   onChange: t,
@@ -2743,14 +2736,14 @@ const lt = ({
   }, [r, c]);
   const u = (d) => {
     const f = d.target.value, g = f.trim();
-    let h = null;
+    let b = null;
     if (g === "") {
-      h = e.required ? n("Value required") : null, t?.(f, h);
+      b = e.required ? n("Value required") : null, t?.(f, b);
       return;
     }
-    h || (h = c(f)), t?.(f, h);
+    b || (b = c(f)), t?.(f, b);
   };
-  return /* @__PURE__ */ y(T, { field: e, error: c(String(r ?? "")), children: /* @__PURE__ */ y(
+  return /* @__PURE__ */ h(T, { field: e, error: c(String(r ?? "")), children: /* @__PURE__ */ h(
     "input",
     {
       id: e.name,
@@ -2758,12 +2751,12 @@ const lt = ({
       defaultValue: String(r ?? ""),
       ref: a,
       onChange: u,
-      className: B(M.input, M.textInput),
+      className: B(N.input, N.textInput),
       "aria-invalid": !!c(String(r ?? "")),
       "aria-describedby": c(String(r ?? "")) ? `${e.name}-error` : void 0
     }
   ) });
-}, gt = ({
+}, dt = ({
   field: e,
   value: r,
   onChange: t,
@@ -2784,20 +2777,20 @@ const lt = ({
         c.current.querySelectorAll("input[type=radio]")
       );
       if (f && e.options && e.options.length > 0) {
-        const h = String(e.options[0].value);
-        g.forEach((p) => p.checked = p.value === h), t?.(h, null);
+        const b = String(e.options[0].value);
+        g.forEach((p) => p.checked = p.value === b), t?.(b, null);
       } else
-        g.forEach((h) => h.checked = h.value === d);
+        g.forEach((b) => b.checked = b.value === d);
     }
   }, [r, m, t, e.options]);
   const u = (d) => {
     const f = d.target.value, g = m(f);
     s.current?.(g ?? null), t?.(f, g);
   };
-  return /* @__PURE__ */ y(T, { field: e, error: m(String(r ?? "")), children: /* @__PURE__ */ y(
+  return /* @__PURE__ */ h(T, { field: e, error: m(String(r ?? "")), children: /* @__PURE__ */ h(
     "div",
     {
-      className: M.input,
+      className: N.input,
       role: "radiogroup",
       "aria-labelledby": `${e.name}-label`,
       "aria-invalid": !!m(String(r ?? "")),
@@ -2815,7 +2808,7 @@ const lt = ({
       children: (e.options ?? []).map((d) => /* @__PURE__ */ O(
         "label",
         {
-          className: B(M.label),
+          className: B(N.label),
           style: {
             display: l === "column" ? "flex" : "inline-flex",
             gap: "8px",
@@ -2827,7 +2820,7 @@ const lt = ({
             justifyContent: "flex-start"
           },
           children: [
-            /* @__PURE__ */ y(
+            /* @__PURE__ */ h(
               "input",
               {
                 type: "radio",
@@ -2838,7 +2831,7 @@ const lt = ({
                 style: { width: "1.1em", height: "1.1em" }
               }
             ),
-            /* @__PURE__ */ y(
+            /* @__PURE__ */ h(
               "span",
               {
                 style: {
@@ -2857,10 +2850,10 @@ const lt = ({
       ))
     }
   ) });
-}, ht = {
+}, pt = {
   display: "flex",
   gap: 4
-}, bt = {
+}, gt = {
   cursor: "pointer",
   fontSize: "1.5rem",
   lineHeight: 1,
@@ -2868,7 +2861,7 @@ const lt = ({
   marginRight: "0.25rem",
   userSelect: "none",
   transition: "color 0.12s ease"
-}, yt = ({
+}, ht = ({
   field: e,
   value: r,
   onChange: t,
@@ -2883,55 +2876,55 @@ const lt = ({
   }, [o]), i.useEffect(() => {
     let p = r || 0;
     r < 0 && (p = 0), r > m && (p = m);
-    const b = u(p);
-    b !== d.current && (d.current = b, f.current?.(b ?? null));
+    const y = u(p);
+    y !== d.current && (d.current = y, f.current?.(y ?? null));
   }, [r, u, m]);
   const g = (p) => {
-    const b = u(p);
-    t?.(p, b);
-  }, h = (() => {
+    const y = u(p);
+    t?.(p, y);
+  }, b = (() => {
     let p = r || 0;
     return p < 0 && (p = 0), p > m && (p = m), p;
   })();
-  return /* @__PURE__ */ y(T, { field: e, error: u(h), children: /* @__PURE__ */ y(
+  return /* @__PURE__ */ h(T, { field: e, error: u(b), children: /* @__PURE__ */ h(
     "div",
     {
       role: "radiogroup",
       "aria-labelledby": `${e.name}-label`,
-      style: ht,
-      "aria-invalid": !!u(h),
-      "aria-describedby": u(h) ? `${e.name}-error` : void 0,
+      style: pt,
+      "aria-invalid": !!u(b),
+      "aria-describedby": u(b) ? `${e.name}-error` : void 0,
       children: (() => {
-        const p = e.icon, b = p && String(p).trim() ? String(p) : "★";
-        return [...Array(m)].map((C, v) => {
-          const k = v < h, w = l !== null && v <= l || k ? "gold" : "lightgray";
-          return /* @__PURE__ */ y(
+        const p = e.icon, y = p && String(p).trim() ? String(p) : "★";
+        return [...Array(m)].map((S, v) => {
+          const C = v < b, w = l !== null && v <= l || C ? "gold" : "lightgray";
+          return /* @__PURE__ */ h(
             "span",
             {
               ref: (x) => s.current[v] = x,
               role: "radio",
-              tabIndex: h > 0 ? v === h - 1 ? 0 : -1 : v === 0 ? 0 : -1,
-              "aria-checked": k,
+              tabIndex: b > 0 ? v === b - 1 ? 0 : -1 : v === 0 ? 0 : -1,
+              "aria-checked": C,
               onClick: () => g(v + 1),
               onKeyDown: (x) => {
                 if (x.key === "Enter" || x.key === " ")
                   x.preventDefault(), g(v + 1);
                 else if (x.key === "ArrowRight" || x.key === "ArrowUp") {
                   x.preventDefault();
-                  const R = Math.min(m - 1, v + 1);
-                  s.current[R]?.focus();
+                  const k = Math.min(m - 1, v + 1);
+                  s.current[k]?.focus();
                 } else if (x.key === "ArrowLeft" || x.key === "ArrowDown") {
                   x.preventDefault();
-                  const R = Math.max(0, v - 1);
-                  s.current[R]?.focus();
+                  const k = Math.max(0, v - 1);
+                  s.current[k]?.focus();
                 }
               },
               onMouseEnter: () => c(v),
               onMouseLeave: () => c(null),
-              style: { ...bt, color: w },
+              style: { ...gt, color: w },
               "aria-label": `Rating ${v + 1}`,
               title: n(`${e.displayName} ${v + 1}`),
-              children: b
+              children: y
             },
             v
           );
@@ -2939,7 +2932,7 @@ const lt = ({
       })()
     }
   ) });
-}, vt = ({
+}, bt = ({
   field: e,
   value: r,
   onChange: t,
@@ -2958,16 +2951,16 @@ const lt = ({
     (p) => p === "" ? e.required ? n("Value required") : null : e.minLength !== void 0 && p.length < e.minLength ? n("Must be at least {{1}} characters", e.minLength) : e.maxLength !== void 0 && p.length > e.maxLength ? n("Must be at most {{1}} characters", e.maxLength) : m && !m.test(p) ? e.patternErrorMessage ? n(e.patternErrorMessage) : n("Input does not match pattern: {{1}}", e.pattern) : H(a, e, p, n),
     [e, a, n, m]
   ), d = (p) => {
-    const b = p.target.value, C = u(b);
-    t?.(b, C);
+    const y = p.target.value, S = u(y);
+    t?.(y, S);
   };
   i.useEffect(() => {
     const p = u(r ?? "");
     l.current && l.current.value !== String(r ?? "") && (l.current.value = String(r ?? "")), p !== c.current && (c.current = p, s.current?.(p ?? null));
   }, [r, u]);
-  const [f, g] = i.useState(!1), h = () => g((p) => !p);
-  return /* @__PURE__ */ y(T, { field: e, error: u(String(r ?? "")), children: /* @__PURE__ */ O("div", { style: { display: "flex", alignItems: "center", gap: 8, width: "100%" }, children: [
-    /* @__PURE__ */ y(
+  const [f, g] = i.useState(!1), b = () => g((p) => !p);
+  return /* @__PURE__ */ h(T, { field: e, error: u(String(r ?? "")), children: /* @__PURE__ */ O("div", { style: { display: "flex", alignItems: "center", gap: 8, width: "100%" }, children: [
+    /* @__PURE__ */ h(
       "input",
       {
         id: e.name,
@@ -2975,17 +2968,17 @@ const lt = ({
         defaultValue: String(r ?? ""),
         ref: l,
         onChange: d,
-        className: B(M.input, M.textInput),
+        className: B(N.input, N.textInput),
         style: { flex: 1, minWidth: 0 },
         "aria-invalid": !!u(String(r ?? "")),
         "aria-describedby": u(String(r ?? "")) ? `${e.name}-error` : void 0
       }
     ),
-    /* @__PURE__ */ y(
+    /* @__PURE__ */ h(
       "button",
       {
         type: "button",
-        onClick: h,
+        onClick: b,
         "aria-label": n(f ? "Hide password" : "Show password"),
         style: {
           background: "transparent",
@@ -3000,40 +2993,40 @@ const lt = ({
       }
     )
   ] }) });
-}, xt = /^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][-+]?\d+)?$/;
-function wt(e) {
-  return xt.test(e);
+}, yt = /^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][-+]?\d+)?$/;
+function vt(e) {
+  return yt.test(e);
 }
-const St = ({
+const xt = ({
   field: e,
   value: r,
   onChange: t,
   onError: o
 }) => {
   const { t: n, definitionName: a } = F(), l = i.useRef(null), c = i.useRef(null), s = i.useCallback(
-    (h) => {
+    (b) => {
       let p = null;
-      if (h.trim() === "")
+      if (b.trim() === "")
         return n("Value required");
-      if (!wt(h))
+      if (!vt(b))
         return n("Invalid number");
-      const b = Number(h);
-      return typeof e.min == "number" && b < e.min ? n("Value should be at least {{1}}", e.min) : typeof e.max == "number" && b > e.max ? n("Value should be at most {{1}}", e.max) : (p || (p = H(a, e, b, n)), p);
+      const y = Number(b);
+      return typeof e.min == "number" && y < e.min ? n("Value should be at least {{1}}", e.min) : typeof e.max == "number" && y > e.max ? n("Value should be at most {{1}}", e.max) : (p || (p = H(a, e, y, n)), p);
     },
     [a, e, n]
   ), m = i.useRef(null), u = i.useRef(o);
   i.useEffect(() => {
     u.current = o;
   }, [o]), i.useEffect(() => {
-    const h = String(r), p = s(h);
-    c.current && document.activeElement !== c.current && (c.current.value = isNaN(Number(h)) ? String(e.min ?? 0) : String(Number(h))), l.current && document.activeElement !== l.current && (l.current.value = h), p !== m.current && (m.current = p, u.current?.(p ?? null));
+    const b = String(r), p = s(b);
+    c.current && document.activeElement !== c.current && (c.current.value = isNaN(Number(b)) ? String(e.min ?? 0) : String(Number(b))), l.current && document.activeElement !== l.current && (l.current.value = b), p !== m.current && (m.current = p, u.current?.(p ?? null));
   }, [r, s, e.min]);
-  const d = e.min ?? 0, f = e.max ?? 100, g = (h) => {
-    const p = h.target.value, b = s(p);
-    t?.(p, b);
+  const d = e.min ?? 0, f = e.max ?? 100, g = (b) => {
+    const p = b.target.value, y = s(p);
+    t?.(p, y);
   };
-  return /* @__PURE__ */ y(T, { field: e, error: s(String(r ?? "")), children: /* @__PURE__ */ O("div", { style: { display: "flex", alignItems: "center", gap: "8px", width: "100%" }, children: [
-    /* @__PURE__ */ y(
+  return /* @__PURE__ */ h(T, { field: e, error: s(String(r ?? "")), children: /* @__PURE__ */ O("div", { style: { display: "flex", alignItems: "center", gap: "8px", width: "100%" }, children: [
+    /* @__PURE__ */ h(
       "input",
       {
         ref: c,
@@ -3044,16 +3037,16 @@ const St = ({
         min: d,
         max: f,
         style: {
-          padding: "0px, 0px",
+          padding: 0,
           // Remove padding to make Chrome browser works fine.
           flex: 1
         },
-        className: M.rangeInput,
+        className: N.rangeInput,
         "aria-invalid": !!s(String(r ?? "")),
         "aria-describedby": s(String(r ?? "")) ? `${e.name}-error` : void 0
       }
     ),
-    /* @__PURE__ */ y(
+    /* @__PURE__ */ h(
       "input",
       {
         id: e.name,
@@ -3069,22 +3062,22 @@ const St = ({
           textAlign: "center",
           flexShrink: 0
         },
-        className: B(M.input, M.textInput),
+        className: B(N.input, N.textInput),
         "aria-invalid": !!s(String(r ?? "")),
         "aria-describedby": s(String(r ?? "")) ? `${e.name}-error` : void 0
       }
     )
   ] }) });
-}, Ct = ({
+}, wt = ({
   field: e,
   value: r,
   onChange: t,
   onError: o
 }) => {
-  const { t: n, formStyle: a, fieldStyle: l, definitionName: c } = F(), s = a, m = l, u = (w, x, R) => {
+  const { t: n, formStyle: a, fieldStyle: l, definitionName: c } = F(), s = a, m = l, u = (w, x, k) => {
     if (!x) return {};
-    const $ = w?.[x];
-    return (R && $ ? $[R] : void 0) ?? {};
+    const V = w?.[x];
+    return (k && V ? V[k] : void 0) ?? {};
   }, d = i.useMemo(() => ({
     display: "inline-block",
     position: "relative",
@@ -3124,7 +3117,7 @@ const St = ({
     borderColor: "transparent",
     ...u(s, "switch", "slider"),
     ...u(m, void 0, "slider")
-  }), [s, m]), h = i.useMemo(() => ({
+  }), [s, m]), b = i.useMemo(() => ({
     position: "absolute",
     height: 16,
     width: 16,
@@ -3136,29 +3129,29 @@ const St = ({
     boxShadow: "0 1px 3px rgba(0, 0, 0, 0.3)",
     ...u(s, "switch", "knob"),
     ...u(m, void 0, "knob")
-  }), [s, m]), p = !!r, b = i.useRef(null), C = i.useRef(o), v = i.useCallback((w) => w ? H(c, e, w, n) ?? null : e.required ? n("Value required") : null, [e, n, c]), k = () => {
+  }), [s, m]), p = !!r, y = i.useRef(null), S = i.useRef(o), v = i.useCallback((w) => w ? H(c, e, w, n) ?? null : e.required ? n("Value required") : null, [e, n, c]), C = () => {
     const w = !p, x = v(w);
     t?.(w, x);
   };
   i.useEffect(() => {
-    C.current = o;
+    S.current = o;
   }, [o]), i.useEffect(() => {
     const w = v(p);
-    w !== b.current && (b.current = w, C.current?.(w ?? null));
+    w !== y.current && (y.current = w, S.current?.(w ?? null));
   }, [p, e, v]);
-  const N = e.name;
-  return /* @__PURE__ */ y(T, { field: e, error: v(p), rightAlign: !1, children: /* @__PURE__ */ O("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }, children: [
-    /* @__PURE__ */ y(
+  const I = e.name;
+  return /* @__PURE__ */ h(T, { field: e, error: v(p), rightAlign: !1, children: /* @__PURE__ */ O("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }, children: [
+    /* @__PURE__ */ h(
       "label",
       {
-        className: M.label,
-        htmlFor: N,
+        className: N.label,
+        htmlFor: I,
         style: { textAlign: "left", justifyContent: "flex-start" },
         children: n(e.displayName)
       }
     ),
     /* @__PURE__ */ O("label", { style: d, children: [
-      /* @__PURE__ */ y(
+      /* @__PURE__ */ h(
         "input",
         {
           id: e.name,
@@ -3172,7 +3165,7 @@ const St = ({
           tabIndex: -1
         }
       ),
-      /* @__PURE__ */ y(
+      /* @__PURE__ */ h(
         "span",
         {
           role: "switch",
@@ -3181,17 +3174,17 @@ const St = ({
           "aria-checked": p,
           "aria-invalid": !!v(p),
           "aria-describedby": v(p) ? `${e.name}-error` : void 0,
-          onClick: k,
+          onClick: C,
           onKeyDown: (w) => {
-            (w.key === " " || w.key === "Spacebar" || w.key === "Space" || w.key === "Enter") && (w.preventDefault(), k());
+            (w.key === " " || w.key === "Spacebar" || w.key === "Space" || w.key === "Enter") && (w.preventDefault(), C());
           },
           className: `reactaform-switch ${p ? "active checked on" : ""} `,
           style: p ? { ...g, backgroundColor: "var(--reactaform-switch-on-bg, #22c55e)", borderColor: "var(--reactaform-switch-on-border, #16a34a)" } : g,
-          children: /* @__PURE__ */ y(
+          children: /* @__PURE__ */ h(
             "span",
             {
               style: {
-                ...h,
+                ...b,
                 transform: p ? "translateX(20px)" : void 0
               }
             }
@@ -3219,13 +3212,13 @@ const St = ({
     (f) => f.trim() === "" ? e.required ? n("Value required") : null : e.minLength !== void 0 && f.length < e.minLength ? n("Must be at least {{1}} characters", e.minLength) : e.maxLength !== void 0 && f.length > e.maxLength ? n("Must be at most {{1}} characters", e.maxLength) : m && !m.test(f) ? e.patternErrorMessage ? n(e.patternErrorMessage) : n("Input does not match pattern: {{1}}", e.pattern) : H(a, e, f, n),
     [e, a, n, m]
   ), d = (f) => {
-    const g = f.target.value, h = u(g);
-    t?.(g, h);
+    const g = f.target.value, b = u(g);
+    t?.(g, b);
   };
   return i.useEffect(() => {
     const f = u(r);
     l.current && l.current.value !== String(r ?? "") && (l.current.value = String(r ?? "")), f !== c.current && (c.current = f, s.current?.(f ?? null));
-  }, [r, u]), /* @__PURE__ */ y(T, { field: e, error: u(String(r ?? "")), children: /* @__PURE__ */ y(
+  }, [r, u]), /* @__PURE__ */ h(T, { field: e, error: u(String(r ?? "")), children: /* @__PURE__ */ h(
     "input",
     {
       id: e.name,
@@ -3235,10 +3228,10 @@ const St = ({
       defaultValue: String(r ?? ""),
       ref: l,
       onChange: d,
-      className: B(M.input, M.textInput)
+      className: B(N.input, N.textInput)
     }
   ) });
-}, kt = ({
+}, St = ({
   field: e,
   value: r,
   onChange: t,
@@ -3252,18 +3245,18 @@ const St = ({
     if (!d || d.trim() === "")
       return e.required || e.min || e.max ? n("Value required") : null;
     const f = (p) => {
-      const b = p.split(":").map((v) => parseInt(v, 10));
-      if (b.some((v) => Number.isNaN(v))) return NaN;
-      let C = 0;
-      if (b.length === 3)
-        C = b[0] * 3600 + b[1] * 60 + b[2];
-      else if (b.length === 2)
-        C = b[0] * 3600 + b[1] * 60;
-      else if (b.length === 1)
-        C = b[0] * 3600;
+      const y = p.split(":").map((v) => parseInt(v, 10));
+      if (y.some((v) => Number.isNaN(v))) return NaN;
+      let S = 0;
+      if (y.length === 3)
+        S = y[0] * 3600 + y[1] * 60 + y[2];
+      else if (y.length === 2)
+        S = y[0] * 3600 + y[1] * 60;
+      else if (y.length === 1)
+        S = y[0] * 3600;
       else
         return NaN;
-      return C;
+      return S;
     }, g = f(d);
     if (Number.isNaN(g)) return n("Invalid time format");
     if (e.min && typeof e.min == "string") {
@@ -3284,7 +3277,7 @@ const St = ({
   return i.useEffect(() => {
     const d = m(r);
     d !== l.current && (l.current = d, c.current?.(d ?? null));
-  }, [r, m]), /* @__PURE__ */ y(T, { field: e, error: m(r), children: /* @__PURE__ */ y(
+  }, [r, m]), /* @__PURE__ */ h(T, { field: e, error: m(r), children: /* @__PURE__ */ h(
     "input",
     {
       id: e.name,
@@ -3294,13 +3287,13 @@ const St = ({
       onChange: u,
       min: typeof e.min == "string" ? e.min : void 0,
       max: typeof e.max == "string" ? e.max : void 0,
-      className: B(M.input, M.textInput),
+      className: B(N.input, N.textInput),
       "aria-invalid": !!m(r),
       "aria-describedby": m(r) ? `${e.name}-error` : void 0
     }
   ) });
 };
-function Rt({
+function Ct({
   pos: e,
   options: r,
   onClose: t,
@@ -3308,14 +3301,14 @@ function Rt({
 }) {
   const n = i.useRef(null), a = i.useRef(!1), l = typeof window < "u" ? document.getElementById("popup-root") || document.body : null;
   if (i.useEffect(() => {
-    function g(h) {
-      a.current || h.target.dataset?.popupMenu === "item" || n.current && h.target instanceof Node && !n.current.contains(h.target) && t();
+    function g(b) {
+      a.current || b.target.dataset?.popupMenu === "item" || n.current && b.target instanceof Node && !n.current.contains(b.target) && t();
     }
     return document.addEventListener("mousedown", g), () => document.removeEventListener("mousedown", g);
   }, [t]), !l || r === void 0 || r.length === 0 || !e || e.x == null || e.y == null) return null;
   const c = e.x, s = e.y, m = typeof window < "u" ? window.innerWidth : 1024, u = Math.max(0, m - 160), d = Math.max(0, Math.min(c, u)), f = Math.max(0, s);
   return Ie.createPortal(
-    /* @__PURE__ */ y(
+    /* @__PURE__ */ h(
       "div",
       {
         ref: n,
@@ -3334,7 +3327,7 @@ function Rt({
           minWidth: "var(--reactaform-menu-min-width, 150px)",
           pointerEvents: "auto"
         },
-        children: r.map((g, h) => /* @__PURE__ */ y(
+        children: r.map((g, b) => /* @__PURE__ */ h(
           "div",
           {
             "data-popup-menu": "item",
@@ -3350,7 +3343,7 @@ function Rt({
               padding: "var(--reactaform-menu-item-padding, 8px 12px)",
               cursor: "pointer",
               fontSize: "var(--reactaform-menu-item-font-size, 0.8em)",
-              borderBottom: h < r.length - 1 ? "1px solid var(--reactaform-border-light, #eee)" : void 0,
+              borderBottom: b < r.length - 1 ? "1px solid var(--reactaform-border-light, #eee)" : void 0,
               transition: "background-color 0.15s ease"
             },
             onMouseEnter: (p) => {
@@ -3361,7 +3354,7 @@ function Rt({
             },
             children: g.label
           },
-          g.label ?? h
+          g.label ?? b
         ))
       }
     ),
@@ -3369,7 +3362,7 @@ function Rt({
   );
 }
 const ie = {};
-function Et(e, r) {
+function kt(e, r) {
   if (e in ie)
     return;
   const t = Oe[e] ?? {}, o = {}, n = {}, a = {};
@@ -3383,7 +3376,7 @@ function Et(e, r) {
     reverseLabels: a
   };
 }
-function Nt(e, r, t) {
+function Rt(e, r, t) {
   if (e === "C") {
     if (r === "F") return t * (9 / 5) + 32;
     if (r === "K") return t + 273.15;
@@ -3396,11 +3389,11 @@ function Nt(e, r, t) {
   }
   return t;
 }
-function It(e, r, t) {
+function Et(e, r, t) {
   if (!Number.isFinite(e)) return [];
   if (t === ie.temperature)
     return Object.keys(t.labels).map((a) => {
-      const l = Nt(r, a, e);
+      const l = Rt(r, a, e);
       return Number.isFinite(l) ? { label: `${l.toFixed(6)} ${a}`, value: l.toString(), unit: a } : { label: `${String(l)} ${a}`, value: String(l), unit: a };
     });
   const n = t.factors[r];
@@ -3412,75 +3405,75 @@ function It(e, r, t) {
 function me(e, r) {
   return e in r.labels ? e : r.reverseLabels && r.reverseLabels[e] ? r.reverseLabels[e] : null;
 }
-const Mt = /^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][-+]?\d+)?$/, $t = ({
+const Nt = /^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][-+]?\d+)?$/, It = ({
   unitFactors: e,
   field: r,
   value: t,
   onChange: o,
   onError: n
 }) => {
-  const { t: a, definitionName: l } = F(), c = i.useRef(null), s = i.useRef(null), m = i.useRef(null), [u, d] = i.useState(null), [f, g] = i.useState(null), [h, p] = i.useState(!1), [b, C] = i.useState(null), [v, k] = i.useState([]), N = i.useCallback(
-    (D, V) => {
+  const { t: a, definitionName: l } = F(), c = i.useRef(null), s = i.useRef(null), m = i.useRef(null), [u, d] = i.useState(null), [f, g] = i.useState(null), [b, p] = i.useState(!1), [y, S] = i.useState(null), [v, C] = i.useState([]), I = i.useCallback(
+    (D, $) => {
       if (!D || D.trim() === "")
         return r.required ? a("Value required") : null;
-      if (!Mt.test(D)) return a("Must be a valid number");
-      const L = H(l, r, [D, V], a);
+      if (!Nt.test(D)) return a("Must be a valid number");
+      const L = H(l, r, [D, $], a);
       return L || null;
     },
     [l, r, a]
   ), w = e.reverseLabels !== void 0 ? e.reverseLabels : Object.fromEntries(
-    Object.entries(e.labels).map(([D, V]) => [V, D])
+    Object.entries(e.labels).map(([D, $]) => [$, D])
   );
   i.useEffect(() => {
     const D = String(t[0]);
-    let V = t[1] ?? e.default;
-    V = me(V, e) || V;
+    let $ = t[1] ?? e.default;
+    $ = me($, e) || $;
     const L = document.activeElement;
-    L === c.current || L === s.current || (c.current && (c.current.value = D), s.current && (s.current.value = V), m.current !== null && (cancelAnimationFrame(m.current), m.current = null), m.current = requestAnimationFrame(() => {
+    L === c.current || L === s.current || (c.current && (c.current.value = D), s.current && (s.current.value = $), m.current !== null && (cancelAnimationFrame(m.current), m.current = null), m.current = requestAnimationFrame(() => {
       m.current = null, d(null), g(null);
     }));
   }, [t, e]), i.useEffect(() => () => {
     m.current !== null && (cancelAnimationFrame(m.current), m.current = null);
   }, []);
-  const x = i.useRef(null), R = i.useRef(
+  const x = i.useRef(null), k = i.useRef(
     n
   );
   i.useEffect(() => {
-    R.current = n;
+    k.current = n;
   }, [n]), i.useEffect(() => {
     const D = String(t[0]);
-    let V = t[1] ?? e.default;
-    V = me(V, e) || V;
-    const L = N(D, V);
-    L !== x.current && (x.current = L, R.current?.(L ?? null));
-  }, [t, e, N]);
-  const $ = (D, V, L) => {
-    const _ = w[V] || V;
+    let $ = t[1] ?? e.default;
+    $ = me($, e) || $;
+    const L = I(D, $);
+    L !== x.current && (x.current = L, k.current?.(L ?? null));
+  }, [t, e, I]);
+  const V = (D, $, L) => {
+    const _ = w[$] || $;
     o?.([D, _], L);
-  }, S = (D) => {
-    const V = D.target.value, L = s.current ? s.current.value : e.default, _ = N(V, L);
-    d(V), $(V, L, _);
+  }, R = (D) => {
+    const $ = D.target.value, L = s.current ? s.current.value : e.default, _ = I($, L);
+    d($), V($, L, _);
   }, E = (D) => {
-    const V = D.target.value, L = c.current ? c.current.value : String(t[0] ?? ""), _ = N(L, V);
-    g(V), s.current && (s.current.value = V), $(L, V, _);
-  }, I = (D) => {
-    const V = c.current ? c.current.value : String(t[0] ?? ""), L = parseFloat(V), _ = s.current ? s.current.value : e.default;
-    if (N(V, _) || !V.trim() || !Number.isFinite(L))
+    const $ = D.target.value, L = c.current ? c.current.value : String(t[0] ?? ""), _ = I(L, $);
+    g($), s.current && (s.current.value = $), V(L, $, _);
+  }, M = (D) => {
+    const $ = c.current ? c.current.value : String(t[0] ?? ""), L = parseFloat($), _ = s.current ? s.current.value : e.default;
+    if (I($, _) || !$.trim() || !Number.isFinite(L))
       return;
     const le = D.currentTarget.getBoundingClientRect(), he = le.left, ee = le.bottom;
-    C({ x: he, y: ee });
-    const A = It(L, _, e);
+    S({ x: he, y: ee });
+    const A = Et(L, _, e);
     if (A.length === 0) {
-      k([]), p(!1);
+      C([]), p(!1);
       return;
     }
-    k(A), p((j) => !j);
+    C(A), p((j) => !j);
   }, z = (D) => {
-    const { value: V, unit: L } = D;
-    p(!1), C(null), c.current && (c.current.value = V), s.current && (s.current.value = L), d(V), g(L);
-    const _ = N(V, L);
-    $(V, L, _);
-  }, q = String(t[0] ?? ""), te = me(t[1] ?? e.default, e) || (t[1] ?? e.default), ne = u ?? q, Y = !!N(ne, f ?? te) || !ne.trim(), ce = {
+    const { value: $, unit: L } = D;
+    p(!1), S(null), c.current && (c.current.value = $), s.current && (s.current.value = L), d($), g(L);
+    const _ = I($, L);
+    V($, L, _);
+  }, q = String(t[0] ?? ""), te = me(t[1] ?? e.default, e) || (t[1] ?? e.default), ne = u ?? q, Y = !!I(ne, f ?? te) || !ne.trim(), ce = {
     width: "var(--reactaform-unit-btn-width, 2.5em)",
     height: "var(--reactaform-unit-btn-height, 2.5em)",
     padding: "var(--reactaform-unit-btn-padding, 0)",
@@ -3493,23 +3486,23 @@ const Mt = /^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][-+]?\d+)?$/, $t = ({
     display: "flex",
     alignItems: "center",
     justifyContent: "center"
-  }, G = N(q, te);
-  return /* @__PURE__ */ y(T, { field: r, error: G, children: /* @__PURE__ */ O("div", { style: { display: "flex", alignItems: "center", gap: "var(--reactaform-unit-gap, 8px)", width: "100%" }, children: [
-    /* @__PURE__ */ y(
+  }, G = I(q, te);
+  return /* @__PURE__ */ h(T, { field: r, error: G, children: /* @__PURE__ */ O("div", { style: { display: "flex", alignItems: "center", gap: "var(--reactaform-unit-gap, 8px)", width: "100%" }, children: [
+    /* @__PURE__ */ h(
       "input",
       {
         id: r.name,
         type: "text",
         ref: c,
         defaultValue: String(t[0] ?? ""),
-        onChange: S,
+        onChange: R,
         style: { width: "var(--reactaform-unit-input-width, 100px)" },
-        className: B(M.input, M.textInput),
+        className: B(N.input, N.textInput),
         "aria-invalid": !!G,
         "aria-describedby": G ? `${r.name}-error` : void 0
       }
     ),
-    /* @__PURE__ */ y(
+    /* @__PURE__ */ h(
       "select",
       {
         id: `${r.name}-unit`,
@@ -3517,24 +3510,24 @@ const Mt = /^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][-+]?\d+)?$/, $t = ({
         defaultValue: me(t[1] ?? e.default, e) || (t[1] ?? e.default),
         onChange: E,
         className: B(
-          M.input,
-          M.inputSelect
+          N.input,
+          N.inputSelect
         ),
         "aria-invalid": !!G,
         "aria-describedby": G ? `${r.name}-error` : void 0,
-        children: Object.keys(e.labels).map((D) => /* @__PURE__ */ y("option", { value: D, children: e.labels[D] ?? D }, D))
+        children: Object.keys(e.labels).map((D) => /* @__PURE__ */ h("option", { value: D, children: e.labels[D] ?? D }, D))
       }
     ),
     /* @__PURE__ */ O("div", { style: { display: "flex", alignItems: "center" }, children: [
-      /* @__PURE__ */ y(
+      /* @__PURE__ */ h(
         "button",
         {
-          onClick: I,
+          onClick: M,
           "aria-disabled": Y,
           disabled: Y,
           style: ce,
-          className: M.button,
-          children: /* @__PURE__ */ y(
+          className: N.button,
+          children: /* @__PURE__ */ h(
             "span",
             {
               style: {
@@ -3548,13 +3541,13 @@ const Mt = /^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][-+]?\d+)?$/, $t = ({
           )
         }
       ),
-      h && v && /* @__PURE__ */ y(
-        Rt,
+      b && v && /* @__PURE__ */ h(
+        Ct,
         {
-          pos: b,
+          pos: y,
           options: v,
           onClose: () => {
-            C(null), p(!1);
+            S(null), p(!1);
           },
           onClickOption: z
         }
@@ -3562,13 +3555,13 @@ const Mt = /^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][-+]?\d+)?$/, $t = ({
     ] })
   ] }) });
 };
-function Vt({ field: e, value: r, onChange: t }) {
+function Mt({ field: e, value: r, onChange: t }) {
   const { t: o } = F(), n = e.dimension;
   if (!n) return null;
-  ie[n] || Et(n, o);
+  ie[n] || kt(n, o);
   const a = ie[n];
-  return a ? /* @__PURE__ */ y(
-    $t,
+  return a ? /* @__PURE__ */ h(
+    It,
     {
       unitFactors: a,
       field: e,
@@ -3583,7 +3576,7 @@ const Ke = /^(https?|ftp|file):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|]
   } catch {
     return !1;
   }
-}, At = ({
+}, $t = ({
   field: e,
   value: r,
   onChange: t,
@@ -3595,11 +3588,11 @@ const Ke = /^(https?|ftp|file):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|]
       if (f === "")
         return e.required ? n("Value required") : null;
       if (!Ke.test(f) && !Je(f)) {
-        const h = e.allowRelative === !0;
+        const b = e.allowRelative === !0;
         let p = !1;
         if (Ke.test(f) || Je(f))
           p = !0;
-        else if (h)
+        else if (b)
           try {
             new URL(f, "http://example.com"), p = !0;
           } catch {
@@ -3619,7 +3612,7 @@ const Ke = /^(https?|ftp|file):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|]
   }, [o]), i.useEffect(() => {
     const d = r ?? "", f = c(d);
     l.current && l.current.value !== String(d) && (l.current.value = String(d)), f !== m.current && (m.current = f, u.current?.(f ?? null));
-  }, [r, c]), /* @__PURE__ */ y(T, { field: e, error: c(String(r ?? "")), children: /* @__PURE__ */ y(
+  }, [r, c]), /* @__PURE__ */ h(T, { field: e, error: c(String(r ?? "")), children: /* @__PURE__ */ h(
     "input",
     {
       id: e.name,
@@ -3628,13 +3621,13 @@ const Ke = /^(https?|ftp|file):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|]
       ref: l,
       onChange: s,
       style: { alignItems: "left" },
-      className: B(M.input, M.textInput),
+      className: B(N.input, N.textInput),
       placeholder: "https://example.com",
       "aria-invalid": !!c(String(r ?? "")),
       "aria-describedby": c(String(r ?? "")) ? `${e.name}-error` : void 0
     }
   ) });
-}, Ne = new pe(), Ft = /* @__PURE__ */ new Set([
+}, Ne = new pe(), Vt = /* @__PURE__ */ new Set([
   "checkbox",
   "switch",
   "dropdown",
@@ -3651,26 +3644,26 @@ const Ke = /^(https?|ftp|file):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|]
   dropdown: _r,
   email: Jr,
   file: Yr,
-  float: nt,
+  float: rt,
   "float-array": et,
-  image: at,
-  int: lt,
-  "int-array": it,
-  "multi-selection": ft,
-  multiline: ut,
-  password: vt,
-  phone: pt,
-  radio: gt,
-  rating: yt,
+  image: nt,
+  int: it,
+  "int-array": at,
+  "multi-selection": lt,
+  multiline: ct,
+  password: bt,
+  phone: mt,
+  radio: dt,
+  rating: ht,
   separator: Gr,
-  slider: St,
+  slider: xt,
   string: _e,
-  stepper: dt,
-  switch: Ct,
+  stepper: ft,
+  switch: wt,
   text: _e,
-  time: kt,
-  unit: Vt,
-  url: At
+  time: St,
+  unit: Mt,
+  url: $t
 };
 function lr(e, r, t) {
   const o = r;
@@ -3680,7 +3673,7 @@ function lr(e, r, t) {
     );
     return;
   }
-  if (Ft.has(e)) {
+  if (Vt.has(e)) {
     Ne.register(e, o);
     return;
   }
@@ -3718,10 +3711,10 @@ const ze = new pe();
 function dr(e, r) {
   ze.register(e, r);
 }
-function Dt(e) {
+function At(e) {
   return ze.get(e);
 }
-function Ot(e) {
+function Ft(e) {
   return ze.get(e);
 }
 dr(
@@ -3764,7 +3757,7 @@ function pr(e, r, t) {
       return !1;
   }
 }
-function zt(e) {
+function Dt(e) {
   const r = [];
   if (e.components) {
     for (const t of Object.keys(e.components))
@@ -3801,7 +3794,7 @@ function zt(e) {
     }
   if (e.submissionHandlers)
     for (const t of Object.keys(e.submissionHandlers)) {
-      const o = Ot(t), n = W.submissionHandlers.get(t);
+      const o = Ft(t), n = W.submissionHandlers.get(t);
       o && n && n !== e.name && r.push({
         type: "submissionHandler",
         name: t,
@@ -3822,7 +3815,7 @@ function de(e, r, t, o, n, a, l, c) {
         r.set(s, o.name), t(s, e[s]);
   }
 }
-function nn(e, r) {
+function rn(e, r) {
   const t = r?.conflictResolution || "error";
   if (Q.has(e.name)) {
     const n = {
@@ -3833,7 +3826,7 @@ function nn(e, r) {
     };
     if (!pr(n, t, r?.onConflict)) return;
   }
-  const o = zt(e);
+  const o = Dt(e);
   if (e.components && de(
     e.components,
     W.components,
@@ -3872,7 +3865,7 @@ function nn(e, r) {
     r?.onConflict
   ), e.setup && e.setup(), Q.set(e.name, e);
 }
-function on(e, r = !1) {
+function tn(e, r = !1) {
   const t = Q.get(e);
   if (!t) return !1;
   if (t.cleanup && t.cleanup(), r) {
@@ -3897,16 +3890,16 @@ function on(e, r = !1) {
   }
   return Q.delete(e), !0;
 }
-function an(e) {
+function nn(e) {
   return Q.get(e);
 }
-function sn() {
+function on() {
   return Array.from(Q.values());
 }
-function cn(e) {
+function an(e) {
   return Q.has(e);
 }
-function ln(e) {
+function sn(e) {
   for (const [r, t] of Object.entries(e))
     ur(r, t);
 }
@@ -3918,7 +3911,7 @@ const gr = i.memo(({ field: e, value: r, handleChange: t, handleError: o }) => {
     (c) => o?.(e.name, c),
     [o, e.name]
   );
-  return n ? /* @__PURE__ */ y(
+  return n ? /* @__PURE__ */ h(
     n,
     {
       field: e,
@@ -3929,7 +3922,7 @@ const gr = i.memo(({ field: e, value: r, handleChange: t, handleError: o }) => {
   ) : null;
 }, (e, r) => e.field === r.field && e.value === r.value && e.handleChange === r.handleChange && e.handleError === r.handleError);
 gr.displayName = "FieldWrapper";
-const hr = (e, r, t, o) => /* @__PURE__ */ y(
+const hr = (e, r, t, o) => /* @__PURE__ */ h(
   gr,
   {
     field: e,
@@ -3960,24 +3953,24 @@ const hr = (e, r, t, o) => /* @__PURE__ */ y(
   }), [m, u]);
   return /* @__PURE__ */ O("fieldset", { style: d, children: [
     /* @__PURE__ */ O("legend", { onClick: s, style: f, children: [
-      /* @__PURE__ */ y("span", { children: c(e) }),
-      /* @__PURE__ */ y("span", { children: r ? "▼" : "▶" })
+      /* @__PURE__ */ h("span", { children: c(e) }),
+      /* @__PURE__ */ h("span", { children: r ? "▼" : "▶" })
     ] }),
-    r && t.map((g) => /* @__PURE__ */ y("div", { children: hr(g, o, n, a) }, g.name))
+    r && t.map((g) => /* @__PURE__ */ h("div", { children: hr(g, o, n, a) }, g.name))
   ] });
 });
 br.displayName = "FieldGroup";
-const Lt = (e, r, t, o, n, a, l, c, s) => {
+const Ot = (e, r, t, o, n, a, l, c, s) => {
   const m = r.slice(0, c).filter((g) => l[g.name]), d = Dr(m).groups, f = [];
   return d.forEach((g) => {
     if (g.name) {
-      const h = e[g.name] ?? !0;
+      const b = e[g.name] ?? !0;
       f.push(
-        /* @__PURE__ */ y(
+        /* @__PURE__ */ h(
           br,
           {
             groupName: g.name,
-            isOpen: h,
+            isOpen: b,
             fields: g.fields,
             valuesMap: t,
             handleChange: n,
@@ -3989,9 +3982,9 @@ const Lt = (e, r, t, o, n, a, l, c, s) => {
         )
       );
     } else
-      g.fields.forEach((h) => f.push(/* @__PURE__ */ y("div", { children: hr(h, t, n, a) }, h.name)));
+      g.fields.forEach((b) => f.push(/* @__PURE__ */ h("div", { children: hr(b, t, n, a) }, b.name)));
   }), f;
-}, jt = (e) => {
+}, zt = (e) => {
   const r = {};
   return e.forEach((t) => {
     r[t.name] = !1;
@@ -4008,12 +4001,12 @@ const Lt = (e, r, t, o, n, a, l, c, s) => {
   o?.children && Object.values(o.children).flat().forEach((n) => {
     t[n] = !1, yr(n, r, t);
   });
-}, Pt = (e, r, t, o) => {
+}, Lt = (e, r, t, o) => {
   const n = { ...t };
   return e.forEach((a) => {
     (!a.parents || Object.keys(a.parents).length === 0) && (n[a.name] = !0, Le(a.name, o, r, n));
   }), n;
-}, Ht = (e, r, t, o, n) => {
+}, jt = (e, r, t, o, n) => {
   const a = { ...e };
   if (yr(o, r, a), n != null) {
     const l = r[o];
@@ -4026,7 +4019,7 @@ const Lt = (e, r, t, o, n, a, l, c, s) => {
   }
   return a;
 };
-async function Tt(e, r, t, o, n) {
+async function Pt(e, r, t, o, n) {
   const a = Object.values(n).filter(Boolean);
   if (a.length > 0)
     return {
@@ -4045,11 +4038,11 @@ async function Tt(e, r, t, o, n) {
           const g = Number(String(d).trim());
           isNaN(g) ? c.push(o(`Invalid number format for field ${m.displayName || u}`)) : l[u] = g;
         } else if (f === "int-array" || f === "float-array") {
-          const h = String(d).split(",").map((p) => p.trim()).filter(Boolean).map((p) => {
-            const b = Number(p);
-            return isNaN(b) ? (c.push(o(`Invalid number "${p}" in array for field ${m.displayName || u}`)), 0) : b;
+          const b = String(d).split(",").map((p) => p.trim()).filter(Boolean).map((p) => {
+            const y = Number(p);
+            return isNaN(y) ? (c.push(o(`Invalid number "${p}" in array for field ${m.displayName || u}`)), 0) : y;
           });
-          c.length === 0 && (l[u] = h);
+          c.length === 0 && (l[u] = b);
         }
       } catch (g) {
         c.push(o(`Error processing field ${m.displayName || u}: ${g}`));
@@ -4069,7 +4062,7 @@ async function Tt(e, r, t, o, n) {
       errors: s
     };
   if (e && typeof e.submitHandlerName == "string") {
-    const m = Dt(e.submitHandlerName);
+    const m = At(e.submitHandlerName);
     if (m)
       try {
         const u = await m(e, r?.name ?? null, l, o);
@@ -4093,7 +4086,7 @@ async function Tt(e, r, t, o, n) {
     data: l
   };
 }
-const qt = ({
+const Ht = ({
   definition: e,
   instance: r,
   chunkSize: t = 50,
@@ -4102,9 +4095,9 @@ const qt = ({
   const { properties: n, displayName: a } = e, l = F(), { t: c, formStyle: s, language: m } = l, u = {
     ...l,
     definitionName: e?.name ?? l.definitionName
-  }, [d, f] = i.useState("en"), [g, h] = i.useState([]), [p, b] = i.useState({}), [C, v] = i.useState(
+  }, [d, f] = i.useState("en"), [g, b] = i.useState([]), [p, y] = i.useState({}), [S, v] = i.useState(
     {}
-  ), [k, N] = i.useState({}), [w, x] = i.useState({}), [R, $] = i.useState({}), [S, E] = i.useState(null), [I, z] = i.useState(null), [q, te] = i.useState(0), [ne, je] = i.useState(!1), [Y, ce] = i.useState(!1), [G, D] = i.useState(r.name || ""), V = i.useRef(r), L = i.useRef(!1);
+  ), [C, I] = i.useState({}), [w, x] = i.useState({}), [k, V] = i.useState({}), [R, E] = i.useState(null), [M, z] = i.useState(null), [q, te] = i.useState(0), [ne, je] = i.useState(!1), [Y, ce] = i.useState(!1), [G, D] = i.useState(r.name || ""), $ = i.useRef(r), L = i.useRef(!1);
   i.useEffect(() => {
     const A = Object.fromEntries(
       n.map((P) => [
@@ -4134,16 +4127,16 @@ const qt = ({
         U[P.name] = [oe, be];
       } else
         U[P.name] = P.defaultValue;
-    }), V.current = r, Object.keys(r.values).forEach((P) => {
+    }), $.current = r, Object.keys(r.values).forEach((P) => {
       A[P] !== void 0 && (U[P] = r.values[P]);
     });
-    const K = jt(j), J = {};
+    const K = zt(j), J = {};
     j.forEach((P) => {
       P.group && !(P.group in J) && (J[P.group] = !0);
     });
     const re = requestAnimationFrame(() => {
-      h(j), b(A), v(U), N(
-        Pt(j, U, K, A)
+      b(j), y(A), v(U), I(
+        Lt(j, U, K, A)
       ), x(J), je(!0), D(r.name);
     });
     return () => cancelAnimationFrame(re);
@@ -4166,8 +4159,8 @@ const qt = ({
           "multi-select",
           "radio",
           "switch"
-        ].includes(re.type) && N(
-          (oe) => Ht(
+        ].includes(re.type) && I(
+          (oe) => jt(
             oe,
             p,
             J,
@@ -4175,7 +4168,7 @@ const qt = ({
             String(j)
           )
         ), J;
-      }), $((K) => U ? { ...K, [A]: U } : Object.fromEntries(Object.entries(K).filter(([re]) => re !== A)));
+      }), V((K) => U ? { ...K, [A]: U } : Object.fromEntries(Object.entries(K).filter(([re]) => re !== A)));
     },
     [p, E, z]
   );
@@ -4188,31 +4181,31 @@ const qt = ({
     let A = 0;
     return A = requestAnimationFrame(() => {
       if (L.current) {
-        L.current = !1, V.current = r, D(r.name || "");
+        L.current = !1, $.current = r, D(r.name || "");
         return;
       }
-      V.current = r, E(null), z(null), D(r.name || "");
+      $.current = r, E(null), z(null), D(r.name || "");
     }), () => cancelAnimationFrame(A);
   }, [r, r.name]);
   const ge = i.useCallback((A, j) => {
-    $((U) => j ? { ...U, [A]: String(j) } : Object.fromEntries(Object.entries(U).filter(([J]) => J !== A)));
+    V((U) => j ? { ...U, [A]: String(j) } : Object.fromEntries(Object.entries(U).filter(([J]) => J !== A)));
   }, []), le = async () => {
     L.current = !0;
-    const A = V.current?.name;
-    V.current.name = G;
-    const j = await Tt(e, V.current, C, c, R), U = typeof j.message == "string" ? j.message : String(j.message), K = Object.values(j.errors ?? {}).join(`
+    const A = $.current?.name;
+    $.current.name = G;
+    const j = await Pt(e, $.current, S, c, k), U = typeof j.message == "string" ? j.message : String(j.message), K = Object.values(j.errors ?? {}).join(`
 `);
     E(K ? U + `
-` + K : U), z(j.success), j.success || (V.current.name = A ?? V.current.name, D(A ?? ""));
+` + K : U), z(j.success), j.success || ($.current.name = A ?? $.current.name, D(A ?? ""));
   }, he = (A) => {
     x((j) => ({ ...j, [A]: !j[A] }));
   }, ee = i.useMemo(
-    () => Object.values(R).some(Boolean),
-    [R]
+    () => Object.values(k).some(Boolean),
+    [k]
   );
-  return /* @__PURE__ */ y(Me.Provider, { value: u, children: /* @__PURE__ */ O("div", { style: s.container, children: [
-    a && /* @__PURE__ */ y("h2", { style: s.titleStyle, children: c(a) }),
-    S && /* @__PURE__ */ O(
+  return /* @__PURE__ */ h(Me.Provider, { value: u, children: /* @__PURE__ */ O("div", { style: s.container, children: [
+    a && /* @__PURE__ */ h("h2", { style: s.titleStyle, children: c(a) }),
+    R && /* @__PURE__ */ O(
       "div",
       {
         role: "status",
@@ -4220,16 +4213,16 @@ const qt = ({
           marginBottom: 12,
           padding: 12,
           borderRadius: 6,
-          backgroundColor: I ? "rgba(76, 175, 80, 0.12)" : "rgba(225, 29, 72, 0.06)",
-          border: `1px solid ${I ? "rgba(76,175,80,0.3)" : "rgba(225,29,72,0.12)"}`,
-          color: I ? "var(--reactaform-success-color, #4CAF50)" : "var(--reactaform-error-color, #e11d48)",
+          backgroundColor: M ? "rgba(76, 175, 80, 0.12)" : "rgba(225, 29, 72, 0.06)",
+          border: `1px solid ${M ? "rgba(76,175,80,0.3)" : "rgba(225,29,72,0.12)"}`,
+          color: M ? "var(--reactaform-success-color, #4CAF50)" : "var(--reactaform-error-color, #e11d48)",
           display: "flex",
           alignItems: "center",
           justifyContent: "space-between"
         },
         children: [
-          /* @__PURE__ */ y("div", { style: { whiteSpace: "pre-wrap", flex: 1 }, children: S }),
-          /* @__PURE__ */ y(
+          /* @__PURE__ */ h("div", { style: { whiteSpace: "pre-wrap", flex: 1 }, children: R }),
+          /* @__PURE__ */ h(
             "button",
             {
               onClick: () => {
@@ -4251,7 +4244,7 @@ const qt = ({
         ]
       }
     ),
-    r && /* @__PURE__ */ y(
+    r && /* @__PURE__ */ h(
       Qe,
       {
         name: G,
@@ -4261,18 +4254,18 @@ const qt = ({
       }
     ),
     /* @__PURE__ */ O(Ye, { children: [
-      Lt(
+      Ot(
         w,
         g,
-        C,
+        S,
         c,
         _,
         ge,
-        k,
+        C,
         q,
         he
       ),
-      q < g.length && /* @__PURE__ */ y(
+      q < g.length && /* @__PURE__ */ h(
         "div",
         {
           style: {
@@ -4282,7 +4275,7 @@ const qt = ({
         }
       )
     ] }),
-    /* @__PURE__ */ y(
+    /* @__PURE__ */ h(
       "button",
       {
         onClick: le,
@@ -4309,7 +4302,7 @@ const qt = ({
   ] }) });
 };
 mr();
-const Bt = (e, r = !1) => ({
+const Tt = (e, r = !1) => ({
   container: {
     padding: "var(--reactaform-space-sm, 8px)",
     margin: "0 auto",
@@ -4350,7 +4343,7 @@ const Bt = (e, r = !1) => ({
     lineHeight: "1.2",
     textAlign: "left"
   }
-}), Ut = (e, r = !1) => {
+}), qt = (e, r = !1) => {
   const t = {
     color: "var(--reactaform-color-text)",
     fontFamily: e?.fontFamily || "var(--reactaform-font-family, inherit)",
@@ -4409,7 +4402,7 @@ const Bt = (e, r = !1) => ({
       display: "block"
     }
   };
-}, Wt = ({
+}, Bt = ({
   children: e,
   definitionName: r = "",
   defaultStyle: t,
@@ -4421,56 +4414,56 @@ const Bt = (e, r = !1) => ({
   const c = r, s = a, m = n, u = o, d = i.useMemo(
     () => t ?? {},
     [t]
-  ), [f, g] = i.useState({}), [h, p] = i.useState({}), [b, C] = i.useState({}), [v, k] = i.useState({});
+  ), [f, g] = i.useState({}), [b, p] = i.useState({}), [y, S] = i.useState({}), [v, C] = i.useState({});
   i.useEffect(() => {
-    let $ = !0;
+    let V = !0;
     return (async () => {
       if (u === "en") {
-        $ && (g({}), p({}));
+        V && (g({}), p({}));
         return;
       }
       try {
-        const E = await zr(u), I = E.success ? E.translations : {};
-        $ && g(I);
+        const E = await zr(u), M = E.success ? E.translations : {};
+        V && g(M);
         const z = await Lr(u, s), q = z.success ? z.translations : {};
-        $ && p(q);
+        V && p(q);
       } catch {
-        $ && (g({}), p({}));
+        V && (g({}), p({}));
       }
     })(), () => {
-      $ = !1;
+      V = !1;
     };
   }, [u, s]), i.useEffect(() => {
-    k(Bt(d, m)), C(Ut(d, m));
+    C(Tt(d, m)), S(qt(d, m));
   }, [d, m]);
-  const N = i.useMemo(
-    () => Pr(u, f, h),
-    [u, f, h]
+  const I = i.useMemo(
+    () => Pr(u, f, b),
+    [u, f, b]
   ), w = i.useCallback(
-    ($, ...S) => N($, ...S),
-    [N]
+    (V, ...R) => I(V, ...R),
+    [I]
   ), x = i.useMemo(
     () => ({
       definitionName: c,
       language: u,
       darkMode: m,
       formStyle: v,
-      fieldStyle: b,
+      fieldStyle: y,
       t: w
     }),
-    [c, u, m, b, v, w]
-  ), R = d?.height ? { height: "100%" } : void 0;
-  return /* @__PURE__ */ y(Me.Provider, { value: x, children: /* @__PURE__ */ y(
+    [c, u, m, y, v, w]
+  ), k = d?.height ? { height: "100%" } : void 0;
+  return /* @__PURE__ */ h(Me.Provider, { value: x, children: /* @__PURE__ */ h(
     "div",
     {
       "data-reactaform-theme": m ? "dark" : "light",
       className: l,
-      style: R,
+      style: k,
       children: e
     }
   ) });
 };
-function _t(e) {
+function Ut(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";
@@ -4485,7 +4478,7 @@ function _t(e) {
     }
   return null;
 }
-async function un(e, r = {}) {
+async function cn(e, r = {}) {
   const { validateSchema: t = !0 } = r;
   try {
     if (!e || typeof e != "string")
@@ -4503,7 +4496,7 @@ async function un(e, r = {}) {
       };
     }
     if (t) {
-      const a = _t(n);
+      const a = Ut(n);
       if (a)
         return { success: !1, error: `Schema validation failed: ${a}` };
     }
@@ -4512,7 +4505,7 @@ async function un(e, r = {}) {
     return { success: !1, error: `Unexpected error loading definition: ${o instanceof Error ? o.message : "Unknown error"}` };
   }
 }
-function Kt(e, r) {
+function Wt(e, r) {
   try {
     if (!e)
       return { success: !1, error: "Definition is required" };
@@ -4526,7 +4519,11 @@ function Kt(e, r) {
     }, o = e.properties || [];
     return Array.isArray(o) && o.forEach((n) => {
       const a = n;
-      a.defaultValue !== void 0 && (t.values[a.name] = a.defaultValue);
+      if (a.type === "unit") {
+        const l = a.defaultUnit, c = Number(a.defaultValue) || void 0;
+        t.values[a.name] = [c || 0, l || "m"];
+      } else
+        a.defaultValue !== void 0 && (t.values[a.name] = a.defaultValue);
     }), { success: !0, instance: t };
   } catch (t) {
     return {
@@ -4535,7 +4532,7 @@ function Kt(e, r) {
     };
   }
 }
-function fn(e) {
+function ln(e) {
   try {
     if (!e)
       return { success: !1, error: "Instance data is required" };
@@ -4559,14 +4556,14 @@ function fn(e) {
     };
   }
 }
-function mn(e, r, t) {
+function un(e, r, t) {
   try {
     if (!e)
       return { success: !1, error: "Instance is required" };
     if (!r)
       return { success: !1, error: "Latest definition is required" };
     if (e.definition === r.name && e.version === r.version)
-      return { success: !0, upgradedInstance: e };
+      return { success: !0, instance: e };
     const o = {
       name: e.name || r.name + "-instance",
       definition: r.name,
@@ -4622,7 +4619,7 @@ function mn(e, r, t) {
     } catch (s) {
       return { success: !1, error: `Upgrade callback error: ${s instanceof Error ? s.message : String(s)}` };
     }
-    return { success: !0, upgradedInstance: o };
+    return { success: !0, instance: o };
   } catch (o) {
     return {
       success: !1,
@@ -4631,7 +4628,7 @@ function mn(e, r, t) {
   }
 }
 mr();
-function Jt(e) {
+function _t(e) {
   const [r, t] = i.useState(null);
   return i.useEffect(() => {
     const o = document.querySelector("[data-reactaform-theme]");
@@ -4647,7 +4644,7 @@ function Jt(e) {
     return l.observe(n, { attributes: !0, attributeFilter: ["data-reactaform-theme"] }), () => l.disconnect();
   }, [e]), r;
 }
-const dn = ({
+const fn = ({
   definitionData: e,
   instance: r,
   language: t,
@@ -4661,21 +4658,21 @@ const dn = ({
     } catch {
       return null;
     }
-  }, [e]), c = { fontSize: "inherit", fontFamily: "inherit", ...a }, s = Jt(), m = n ?? s === "dark", u = t ?? "en";
+  }, [e]), c = { fontSize: "inherit", fontFamily: "inherit", ...a }, s = _t(), m = n ?? s === "dark", u = t ?? "en";
   if (i.useEffect(() => {
     let f = document.getElementById("popup-root");
     f || (f = document.createElement("div"), f.id = "popup-root", document.body.appendChild(f));
   }, []), !l)
-    return /* @__PURE__ */ y("div", { style: { color: "red" }, children: "Error: No form definition provided." });
+    return /* @__PURE__ */ h("div", { style: { color: "red" }, children: "Error: No form definition provided." });
   let d = r;
   if (!d) {
-    const f = Kt(l, l.name);
+    const f = Wt(l, l.name);
     if (!f.success || !f.instance)
-      return /* @__PURE__ */ y("div", { style: { color: "red" }, children: "Error: Failed to create instance from definition." });
+      return /* @__PURE__ */ h("div", { style: { color: "red" }, children: "Error: Failed to create instance from definition." });
     d = f.instance;
   }
-  return /* @__PURE__ */ y(
-    Wt,
+  return /* @__PURE__ */ h(
+    Bt,
     {
       definitionName: l.name,
       defaultStyle: c,
@@ -4683,8 +4680,8 @@ const dn = ({
       defaultDarkMode: m,
       defaultLocalizeName: l.localization || "",
       className: o,
-      children: /* @__PURE__ */ y(
-        qt,
+      children: /* @__PURE__ */ h(
+        Ht,
         {
           definition: l,
           instance: d
@@ -4693,7 +4690,7 @@ const dn = ({
     }
   );
 };
-function Gt() {
+function Kt() {
   if (!document.getElementById("reactaform-styles"))
     try {
       const e = document.createElement("style");
@@ -4701,37 +4698,36 @@ function Gt() {
     } catch {
     }
 }
-typeof document < "u" && Gt();
+typeof document < "u" && Kt();
 export {
-  M as CSS_CLASSES,
-  dn as ReactaForm,
-  Wt as ReactaFormProvider,
-  qt as ReactaFormRenderer,
+  N as CSS_CLASSES,
+  fn as ReactaForm,
+  Bt as ReactaFormProvider,
+  Ht as ReactaFormRenderer,
   T as StandardFieldLayout,
-  tn as Units,
+  en as Units,
   B as combineClasses,
-  Kt as createInstanceFromDefinition,
-  rn as deserializeDefinition,
-  Qt as deserializeInstance,
-  sn as getAllPlugins,
+  Wt as createInstanceFromDefinition,
+  Qt as deserializeDefinition,
+  Xt as deserializeInstance,
+  on as getAllPlugins,
   fr as getComponent,
-  an as getPlugin,
-  cn as hasPlugin,
-  Gt as injectReactaFormStyles,
-  fn as loadInstance,
-  un as loadJsonDefinition,
+  nn as getPlugin,
+  an as hasPlugin,
+  Kt as injectReactaFormStyles,
+  ln as loadInstance,
+  cn as loadJsonDefinition,
   ur as registerComponent,
-  ln as registerComponents,
+  sn as registerComponents,
   Er as registerFieldValidationHandler,
   Rr as registerFormValidationHandler,
-  nn as registerPlugin,
+  rn as registerPlugin,
   dr as registerSubmissionHandler,
-  en as serializeDefinition,
-  Zt as serializeInstance,
-  on as unregisterPlugin,
-  mn as upgradeInstanceToLatestDefinition,
+  Zt as serializeDefinition,
+  Yt as serializeInstance,
+  tn as unregisterPlugin,
+  un as upgradeInstanceToLatestDefinition,
   Cr as useDebouncedCallback,
   F as useReactaFormContext,
-  H as validateFieldValue,
-  Ir as validateFormValues
+  H as validateFieldValue
 };