reactaform 1.9.0 → 1.9.1

package/dist/reactaform.es.js

@@ -1,8 +1,8 @@
 import { jsx as p, jsxs as D, Fragment as Ie } from "react/jsx-runtime";
 import * as l from "react";
-import { createContext as ot, useContext as it, useRef as pe, useEffect as Ue, useCallback as ge } from "react";
+import { createContext as it, useContext as st, useRef as pe, useEffect as Ue, useCallback as ge } from "react";
 import * as de from "react-dom";
-const st = `/* ReactaForm CSS Custom Properties (CSS Variables) */\r
+const ct = `/* ReactaForm CSS Custom Properties (CSS Variables) */\r
 \r
 /* Default Light Theme */\r
 :root {\r
@@ -65,7 +65,7 @@ const st = `/* ReactaForm CSS Custom Properties (CSS Variables) */\r
   --reactaform-button-bg: var(--reactaform-success-color);\r
   --reactaform-button-text: #ffffff;\r
   --reactaform-button-padding: var(--reactaform-space) 12px;\r
-  --reactaform-button-border-radius: var(--reactaform-border-radius);\r
+  --reactaform-button-border-radius: 6px;\r
   --reactaform-button-font-size: 14px;\r
   --reactaform-button-font-weight: var(--reactaform-font-weight);\r
   --reactaform-button-hover-opacity: 0.9;\r
@@ -200,6 +200,15 @@ const st = `/* ReactaForm CSS Custom Properties (CSS Variables) */\r
   user-select: none;\r
 }\r
 \r
+/* Description (UI-only display text) */\r
+.reactaform-description {\r
+  font-size: var(--reactaform-font-size, 14px);\r
+  font-weight: var(--reactaform-font-weight, 500);\r
+  margin: var(--reactaform-space, 8px) 0;\r
+  color: var(--reactaform-text-color, #000000);\r
+  user-select: none;\r
+}\r
+\r
 /* Ensure row layout labels are left-aligned */\r
 \r
 \r
@@ -292,7 +301,7 @@ const st = `/* ReactaForm CSS Custom Properties (CSS Variables) */\r
   background-color: var(--reactaform-button-bg, var(--reactaform-success-color, #4CAF50));\r
   color: var(--reactaform-button-text, var(--reactaform-text-color, #000000));\r
   padding: var(--reactaform-button-padding);\r
-  border-radius: var(--reactaform-button-border-radius);\r
+  border-radius: var(--reactaform-button-border-radius, 6px);\r
   font-size: var(--reactaform-button-font-size);\r
   font-weight: var(--reactaform-button-font-weight);\r
   box-shadow: var(--reactaform-button-shadow);\r
@@ -300,10 +309,15 @@ const st = `/* ReactaForm CSS Custom Properties (CSS Variables) */\r
   border: none;\r
   cursor: pointer;\r
   transition: opacity 0.2s ease;\r
+  width: 100%;\r
+  display: flex;\r
+  justify-content: center;\r
+  align-items: center;\r
 }\r
 \r
 .reactaform-button:hover:not(:disabled) {\r
   opacity: var(--reactaform-button-hover-opacity);\r
+  background-color: var(--reactaform-button-bg-hover, #0056b3);\r
 }\r
 \r
 .reactaform-button:disabled {\r
@@ -380,8 +394,8 @@ const st = `/* ReactaForm CSS Custom Properties (CSS Variables) */\r
   \r
   \r
 }\r
-`, Ee = ot(void 0), H = () => {
-  const e = it(Ee);
+`, Ee = it(void 0), B = () => {
+  const e = st(Ee);
   if (!e)
     throw new Error("❌ useReactaFormContext must be used within a <ReactaFormProvider>");
   return e;
@@ -433,7 +447,7 @@ class ne {
   }
 }
 const ar = typeof process < "u" && process.env.NODE_ENV === "test";
-function ct(e, r = 300, t) {
+function lt(e, r = 300, t) {
   const n = pe(), a = pe(e), o = pe(null), c = t?.leading === !0, s = t?.trailing !== !1;
   Ue(() => {
     a.current = e;
@@ -469,7 +483,8 @@ const V = {
   inputNumber: "reactaform-input--number",
   inputSelect: "reactaform-select",
   rangeInput: "reactaform-input--range",
-  button: "reactaform-button"
+  button: "reactaform-button",
+  description: "reactaform-description"
 }, U = (...e) => {
   const r = [];
   for (const t of e)
@@ -481,7 +496,7 @@ const V = {
 function ie(e) {
   return e.toLowerCase().includes("dark");
 }
-function lt(e) {
+function ut(e) {
   if (!e) return !1;
   const r = e.trim();
   let t = 0, n = 0, a = 0;
@@ -495,7 +510,7 @@ function lt(e) {
     return !1;
   return (t * 299 + n * 587 + a * 114) / 1e3 < 128;
 }
-const ut = () => /* @__PURE__ */ D(
+const mt = () => /* @__PURE__ */ D(
   "svg",
   {
     width: "1em",
@@ -511,13 +526,13 @@ const ut = () => /* @__PURE__ */ D(
       /* @__PURE__ */ p("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
     ]
   }
-), mt = ({ content: e, size: r = "medium", animation: t = !0 }) => {
-  const { t: n, theme: a, formStyle: o, fieldStyle: c } = H(), [s, i] = l.useState(!1), [d, m] = l.useState({ x: 0, y: 0 }), [u, f] = l.useState(!1), b = l.useRef(null), N = l.useRef(null), C = l.useRef(null), h = l.useId(), y = ie(a), [E, F] = l.useState(void 0);
+), dt = ({ content: e, size: r = "medium", animation: t = !0 }) => {
+  const { t: n, theme: a, formStyle: o, fieldStyle: c } = B(), [s, i] = l.useState(!1), [d, m] = l.useState({ x: 0, y: 0 }), [u, f] = l.useState(!1), b = l.useRef(null), C = l.useRef(null), N = l.useRef(null), h = l.useId(), y = ie(a), [E, F] = l.useState(void 0);
   l.useLayoutEffect(() => {
     if (!b.current) return;
     const I = "rgba(255,255,255,0.1)", g = getComputedStyle(b.current).getPropertyValue("--reactaform-primary-bg").trim();
     if (g && typeof CSS < "u" && CSS.supports?.("color: color-mix(in srgb, red, blue)")) {
-      const w = lt(g) ? "black" : "white";
+      const w = ut(g) ? "black" : "white";
       F(`color-mix(in srgb, var(--reactaform-primary-bg) 85%, ${w} 15%)`);
     } else
       F(I);
@@ -578,13 +593,13 @@ const ut = () => /* @__PURE__ */ D(
     };
   }, [y, r, t, o, c, E]);
   l.useLayoutEffect(() => {
-    if (!s || !b.current || !N.current) {
+    if (!s || !b.current || !C.current) {
       f(!1);
       return;
     }
     const I = b.current.getBoundingClientRect();
-    C.current = I;
-    const v = N.current.getBoundingClientRect(), g = 8, w = window.innerWidth, x = window.innerHeight, k = -4;
+    N.current = I;
+    const v = C.current.getBoundingClientRect(), g = 8, w = window.innerWidth, x = window.innerHeight, k = -4;
     let S = I.right + g, A = I.top + I.height / 2 - v.height / 2 + k;
     S + v.width > w - g && (S = I.left - g - v.width), S = Math.max(g, Math.min(S, w - v.width - g)), A = Math.max(g, Math.min(A, x - v.height - g)), m({ x: S, y: A }), f(!0);
     const j = b.current.closest("[data-reactaform-theme]"), K = document.getElementById("popup-root");
@@ -602,7 +617,7 @@ const ut = () => /* @__PURE__ */ D(
   const $ = typeof document < "u" ? document.getElementById("popup-root") : null, R = /* @__PURE__ */ p(
     "div",
     {
-      ref: N,
+      ref: C,
       "data-tooltip-id": h,
       style: {
         ...M.text,
@@ -629,18 +644,18 @@ const ut = () => /* @__PURE__ */ D(
         style: {
           ...M.icon
         },
-        children: /* @__PURE__ */ p(ut, {})
+        children: /* @__PURE__ */ p(mt, {})
       }
     ),
     s && ($ ? de.createPortal(R, $) : R)
   ] });
-}, or = l.memo(mt), ve = l.memo(({
+}, or = l.memo(dt), ve = l.memo(({
   field: e,
   error: r,
   children: t,
   showLabel: n = !0
 }) => {
-  const { t: a } = H(), o = e.labelLayout === "column-center" ? "center" : "left", c = l.useMemo(() => {
+  const { t: a } = B(), o = e.labelLayout === "column-center" ? "center" : "left", c = l.useMemo(() => {
     const d = {
       display: "flex",
       flexDirection: "column",
@@ -684,7 +699,7 @@ const ir = l.memo(({
   children: t,
   rightAlign: n = !1
 }) => {
-  const { t: a } = H(), o = l.useMemo(() => ({
+  const { t: a } = B(), o = l.useMemo(() => ({
     display: "flex",
     alignItems: "center",
     gap: "3px"
@@ -733,7 +748,7 @@ const Me = l.memo(({ children: e, id: r }) => {
 });
 Me.displayName = "ErrorDiv";
 const sr = l.memo(({ name: e, onChange: r }) => {
-  const { t } = H();
+  const { t } = B();
   return /* @__PURE__ */ D("div", { style: { marginBottom: 16 }, children: [
     /* @__PURE__ */ D("div", { style: { display: "grid", gridTemplateColumns: "1fr 2fr", gap: 12, alignItems: "center" }, children: [
       /* @__PURE__ */ p(
@@ -765,7 +780,7 @@ const sr = l.memo(({ name: e, onChange: r }) => {
   ] });
 });
 sr.displayName = "InstanceName";
-class dt extends ne {
+class ft extends ne {
   registerInCategory(r, t, n) {
     this.get(r) || this.register(r, {});
     const a = this.get(r);
@@ -781,15 +796,15 @@ class dt extends ne {
     return this.list();
   }
 }
-const cr = new ne(), lr = new dt(), Fe = new ne();
-function ft(e, r) {
+const cr = new ne(), lr = new ft(), Fe = new ne();
+function pt(e, r) {
   cr.register(e, r);
 }
-function pt(e, r, t) {
+function gt(e, r, t) {
   lr.registerInCategory(e, r, t);
 }
-function gt(e, r) {
-  if (tn(e)) {
+function ht(e, r) {
+  if (an(e)) {
     console.warn(
       `[ReactaForm] Can't override builtin type field validation handler for type "${e}".`
     );
@@ -797,7 +812,7 @@ function gt(e, r) {
   }
   Fe.register(e, r);
 }
-function B(e, r) {
+function H(e, r) {
   Fe.register(e, r);
 }
 function ur(e, r) {
@@ -809,7 +824,7 @@ function mr(e) {
 function dr(e) {
   return Fe.get(e) || null;
 }
-function ht(e) {
+function bt(e) {
   return (typeof e == "object" || typeof e == "function") && e !== null && typeof e.then == "function";
 }
 const We = /* @__PURE__ */ new Map(), _e = /* @__PURE__ */ new Map();
@@ -839,7 +854,7 @@ function fr(e, r, t, n) {
     }
   return null;
 }
-function ca(e, r, t, n) {
+function ua(e, r, t, n) {
   return fr(e, r, t, n);
 }
 function pr(e, r, t, n) {
@@ -852,7 +867,7 @@ function pr(e, r, t, n) {
     return r.required ? n("Value required") : null;
   return fr(e, r, t, n);
 }
-async function bt(e, r, t) {
+async function yt(e, r, t) {
   if (!e || typeof e.validationHandlerName != "string")
     return null;
   const n = e.validationHandlerName;
@@ -860,14 +875,14 @@ async function bt(e, r, t) {
   if (a === void 0 && (a = mr(n) || null, _e.set(n, a)), a)
     try {
       const o = a(r, t);
-      return ht(o) ? await o || null : o || null;
+      return bt(o) ? await o || null : o || null;
     } catch (o) {
       return [String(o instanceof Error ? o.message : o)];
     }
   return null;
 }
 function T(e, r) {
-  const { definitionName: t, t: n, fieldValidationMode: a } = H();
+  const { definitionName: t, t: n, fieldValidationMode: a } = B();
   return l.useCallback(
     (o) => a === "realTime" ? pr(t, e, o, n) : r ?? null,
     [t, e, n, a, r]
@@ -880,7 +895,7 @@ const gr = ({
   onError: n,
   error: a
 }) => {
-  const { t: o } = H(), s = T(e, a)(r);
+  const { t: o } = B(), s = T(e, a)(r);
   l.useEffect(() => {
     a || n?.(s);
   }, [s, a, n]);
@@ -941,7 +956,7 @@ const gr = ({
   ) });
 };
 gr.displayName = "CheckboxInput";
-const yt = l.memo(gr);
+const vt = l.memo(gr);
 function _({ value: e, onChange: r, onError: t, validate: n }) {
   const a = l.useRef(null), o = l.useRef(null), c = l.useRef(t), [s, i] = l.useState(null);
   l.useEffect(() => {
@@ -977,11 +992,11 @@ const Ke = [
   { label: "Gray", value: "#808080" },
   { label: "Light Gray", value: "#d3d3d3" },
   { label: "Pink", value: "#ffc0cb" }
-], vt = /^#([0-9A-F]{3}){1,2}$/i, xt = "#000000", wt = (e) => vt.test(e), he = (e) => {
-  if (!e || !wt(e)) return xt;
+], xt = /^#([0-9A-F]{3}){1,2}$/i, wt = "#000000", St = (e) => xt.test(e), he = (e) => {
+  if (!e || !St(e)) return wt;
   const r = e.toLowerCase();
   return r.length === 4 ? "#" + r.slice(1).split("").map((t) => t + t).join("") : r;
-}, St = (e) => {
+}, Ct = (e) => {
   const r = parseInt(e.slice(1), 16);
   return {
     r: r >> 16 & 255,
@@ -995,7 +1010,7 @@ const Ke = [
   onError: n,
   error: a
 }) => {
-  const { t: o } = H(), c = T(e, a), s = l.useMemo(
+  const { t: o } = B(), c = T(e, a), s = l.useMemo(
     () => he(r),
     [r]
   ), { inputRef: i, error: d, handleChange: m } = _({
@@ -1015,7 +1030,7 @@ const Ke = [
       });
     },
     [m]
-  ), N = l.useCallback(
+  ), C = l.useCallback(
     (M) => {
       const $ = he(M.target.value);
       f($), m({
@@ -1027,7 +1042,7 @@ const Ke = [
     () => new Set(Ke.map((M) => M.value)),
     []
   ).has(u), { r: y, g: E, b: F } = l.useMemo(
-    () => St(u),
+    () => Ct(u),
     [u]
   );
   return /* @__PURE__ */ p(O, { field: e, error: d, children: /* @__PURE__ */ D(
@@ -1045,7 +1060,7 @@ const Ke = [
           {
             id: e.name,
             value: u,
-            onChange: N,
+            onChange: C,
             className: U(
               V.input,
               V.inputSelect
@@ -1097,7 +1112,7 @@ const Ke = [
   ) });
 };
 hr.displayName = "ColorInput";
-const Ct = l.memo(hr), Ge = (e) => {
+const Nt = l.memo(hr), Ge = (e) => {
   if (!e) return null;
   const r = new Date(e);
   return isNaN(r.getTime()) ? null : r;
@@ -1141,33 +1156,45 @@ const Ct = l.memo(hr), Ge = (e) => {
   ) });
 };
 br.displayName = "DateInput";
-const Nt = l.memo(br), yr = ({
+const kt = l.memo(br), yr = ({ field: e }) => {
+  const { t: r } = B(), { displayText: t = "", textAlign: n = "left", allowHtml: a = !1 } = e;
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      className: V.description,
+      style: { textAlign: n },
+      ...a ? { dangerouslySetInnerHTML: { __html: r(t) } } : { children: r(t) }
+    }
+  );
+};
+yr.displayName = "Description";
+const It = l.memo(yr), vr = ({
   field: e,
   value: r,
   onChange: t,
   onError: n,
   error: a
 }) => {
-  const { t: o, theme: c, formStyle: s, fieldStyle: i } = H(), d = l.useRef(null), m = l.useRef(n), [u, f] = l.useState(!1), [b, N] = l.useState(null);
+  const { t: o, theme: c, formStyle: s, fieldStyle: i } = B(), d = l.useRef(null), m = l.useRef(n), [u, f] = l.useState(!1), [b, C] = l.useState(null);
   l.useEffect(() => {
     m.current = n;
   }, [n]);
-  const C = T(e, a), [h, y] = l.useState(null), E = l.useRef(null);
+  const N = T(e, a), [h, y] = l.useState(null), E = l.useRef(null);
   l.useEffect(() => {
     const g = String(r ?? "");
-    let w = C(g);
+    let w = N(g);
     if (w && e.options.length > 0) {
       const x = String(e.options[0].value);
       t?.(x), w = null;
     }
     w !== E.current && (E.current = w, y(w), m.current?.(w ?? null));
-  }, [r, C, t, e.options]);
+  }, [r, N, t, e.options]);
   const F = () => {
     if (!d.current) return;
     const g = d.current.getBoundingClientRect();
-    N({ x: g.left, y: g.bottom }), f((w) => !w);
+    C({ x: g.left, y: g.bottom }), f((w) => !w);
   }, M = (g) => {
-    const w = C(g);
+    const w = N(g);
     w !== E.current && (E.current = w, y(w), m.current?.(w ?? null)), t?.(g), f(!1);
   }, $ = l.useMemo(() => {
     const g = e.options.find((w) => String(w.value) === String(r));
@@ -1222,7 +1249,7 @@ const Nt = l.memo(br), yr = ({
       }
     ) }),
     u && b && /* @__PURE__ */ p(
-      kt,
+      Et,
       {
         position: b,
         options: e.options,
@@ -1235,7 +1262,7 @@ const Nt = l.memo(br), yr = ({
       }
     )
   ] });
-}, kt = ({
+}, Et = ({
   position: e,
   options: r,
   selectedValue: t,
@@ -1245,7 +1272,7 @@ const Nt = l.memo(br), yr = ({
   theme: c,
   t: s
 }) => {
-  const i = l.useRef(null), [d, m] = l.useState(-1), { formStyle: u, fieldStyle: f } = H(), b = ie(c ?? "light");
+  const i = l.useRef(null), [d, m] = l.useState(-1), { formStyle: u, fieldStyle: f } = B(), b = ie(c ?? "light");
   l.useLayoutEffect(() => {
     if (!o.current) return;
     const v = o.current.closest("[data-reactaform-theme]"), g = document.getElementById("popup-root");
@@ -1263,11 +1290,11 @@ const Nt = l.memo(br), yr = ({
       );
     }
   }, [o]);
-  const N = (v, g, w) => {
+  const C = (v, g, w) => {
     if (!g) return {};
     const k = v?.[g];
     return (w && k ? k[w] : void 0) ?? {};
-  }, C = l.useMemo(() => ({
+  }, N = l.useMemo(() => ({
     maxHeight: 200,
     overflowY: "auto",
     background: "var(--reactaform-secondary-bg, #fff)",
@@ -1278,8 +1305,8 @@ const Nt = l.memo(br), yr = ({
     pointerEvents: "auto",
     color: "var(--reactaform-text-color, #000)",
     fontSize: "var(--reactaform-popup-font-size, 0.875rem)",
-    ...N(u, "dropdown", "popup"),
-    ...N(f, void 0, "popup")
+    ...C(u, "dropdown", "popup"),
+    ...C(f, void 0, "popup")
   }), [u, f]), h = l.useMemo(() => ({
     padding: "6px 8px",
     cursor: "pointer",
@@ -1287,8 +1314,8 @@ const Nt = l.memo(br), yr = ({
     alignItems: "center",
     background: "transparent",
     color: "var(--reactaform-text-color, #000)",
-    ...N(u, "dropdown", "option"),
-    ...N(f, void 0, "option")
+    ...C(u, "dropdown", "option"),
+    ...C(f, void 0, "option")
   }), [u, f]);
   l.useEffect(() => {
     const v = (g) => {
@@ -1338,7 +1365,7 @@ const Nt = l.memo(br), yr = ({
           top: F ? F.top : e.y,
           left: F ? F.left : e.x,
           width: $ ?? y,
-          ...C
+          ...N
         },
         "data-reactaform-theme": c ?? "light",
         children: r.map((v, g) => {
@@ -1398,8 +1425,8 @@ const Nt = l.memo(br), yr = ({
     I
   );
 };
-yr.displayName = "DropdownInput";
-const It = l.memo(yr), vr = ({
+vr.displayName = "DropdownInput";
+const Mt = l.memo(vr), xr = ({
   field: e,
   value: r,
   onChange: t,
@@ -1426,9 +1453,9 @@ const It = l.memo(yr), vr = ({
     }
   ) });
 };
-vr.displayName = "EmailInput";
-const Et = l.memo(vr), xr = ({ field: e }) => {
-  const { theme: r } = H(), {
+xr.displayName = "EmailInput";
+const Ft = l.memo(xr), wr = ({ field: e }) => {
+  const { theme: r } = B(), {
     color: t = ie(r) ? "#444444" : "#CCCCCC",
     thickness: n = 1,
     margin: a = "8px 0"
@@ -1446,13 +1473,13 @@ const Et = l.memo(vr), xr = ({ field: e }) => {
     }
   );
 };
-xr.displayName = "FieldSeparator";
-const Mt = l.memo(xr), wr = ({ field: e, value: r, onChange: t, onError: n, error: a }) => {
-  const { t: o, theme: c } = H(), [s, i] = l.useState(!1), d = l.useRef(null), m = l.useRef(n), u = l.useRef(null), [f, b] = l.useState(null), N = ie(c);
+wr.displayName = "FieldSeparator";
+const $t = l.memo(wr), Sr = ({ field: e, value: r, onChange: t, onError: n, error: a }) => {
+  const { t: o, theme: c } = B(), [s, i] = l.useState(!1), d = l.useRef(null), m = l.useRef(n), u = l.useRef(null), [f, b] = l.useState(null), C = ie(c);
   l.useEffect(() => {
     m.current = n;
   }, [n]);
-  const C = (g, w) => w.some(
+  const N = (g, w) => w.some(
     (x) => x.name === g.name && x.size === g.size && x.lastModified === g.lastModified
   ), h = T(e, a);
   l.useEffect(() => {
@@ -1465,7 +1492,7 @@ const Mt = l.memo(xr), wr = ({ field: e, value: r, onChange: t, onError: n, erro
     if (w && w.length > 0) {
       const S = Array.from(w);
       if (e.multiple) {
-        const A = Array.isArray(r) ? r : [], j = S.filter((K) => !C(K, A));
+        const A = Array.isArray(r) ? r : [], j = S.filter((K) => !N(K, A));
         x = [...A, ...j];
       } else
         x = S[0];
@@ -1479,7 +1506,7 @@ const Mt = l.memo(xr), wr = ({ field: e, value: r, onChange: t, onError: n, erro
       const x = Array.from(w);
       let k = null;
       if (e.multiple) {
-        const A = Array.isArray(r) ? r : [], j = x.filter((K) => !C(K, A));
+        const A = Array.isArray(r) ? r : [], j = x.filter((K) => !N(K, A));
         k = [...A, ...j];
       } else
         k = x[0];
@@ -1584,7 +1611,7 @@ const Mt = l.memo(xr), wr = ({ field: e, value: r, onChange: t, onError: n, erro
           borderRadius: "var(--reactaform-border-radius, 4px)",
           padding: "8px 12px",
           textAlign: "center",
-          backgroundColor: s ? `var(--reactaform-bg-hover, ${N ? "#070707" : "#eff6ff"})` : void 0,
+          backgroundColor: s ? `var(--reactaform-bg-hover, ${C ? "#070707" : "#eff6ff"})` : void 0,
           transition: "all 0.2s ease",
           cursor: "pointer",
           minHeight: "var(--reactaform-input-height, 34px)",
@@ -1640,8 +1667,8 @@ const Mt = l.memo(xr), wr = ({ field: e, value: r, onChange: t, onError: n, erro
     R()
   ] }) });
 };
-wr.displayName = "FileInput";
-const Ft = l.memo(wr), Sr = ({
+Sr.displayName = "FileInput";
+const Vt = l.memo(Sr), Cr = ({
   field: e,
   value: r,
   onChange: t,
@@ -1669,8 +1696,8 @@ const Ft = l.memo(wr), Sr = ({
     }
   ) });
 };
-Sr.displayName = "FloatArrayInput";
-const $t = l.memo(Sr), Cr = ({
+Cr.displayName = "FloatArrayInput";
+const At = l.memo(Cr), Nr = ({
   field: e,
   value: r,
   onChange: t,
@@ -1700,9 +1727,9 @@ const $t = l.memo(Sr), Cr = ({
     }
   ) });
 };
-Cr.displayName = "FloatInput";
-const Vt = l.memo(Cr);
-function At() {
+Nr.displayName = "FloatInput";
+const Rt = l.memo(Nr);
+function Dt() {
   try {
     return "/";
   } catch {
@@ -1714,14 +1741,14 @@ function At() {
   }
   return "/";
 }
-const Nr = ({ field: e, value: r }) => {
-  const { language: t, t: n } = H(), a = e.alignment || "center", o = {
+const kr = ({ field: e, value: r }) => {
+  const { language: t, t: n } = B(), a = e.alignment || "center", o = {
     left: "flex-start",
     center: "center",
     right: "flex-end"
   }, c = typeof r == "string" ? r : "";
   let s = c && c.trim() !== "" ? c : typeof e.defaultValue == "string" ? e.defaultValue : "";
-  s && !s.startsWith("/") && (s = `${At()}${s}`);
+  s && !s.startsWith("/") && (s = `${Dt()}${s}`);
   const i = e.localized?.split(";").map((h) => h.trim()), [d, m] = l.useState(s || ""), u = l.useRef(s || null);
   if (l.useEffect(() => {
     if (!s) return;
@@ -1747,13 +1774,13 @@ const Nr = ({ field: e, value: r }) => {
       R.abort();
     };
   }, [s, t, i]), !d) return null;
-  const { width: f, height: b } = e, N = {}, C = {
+  const { width: f, height: b } = e, C = {}, N = {
     borderRadius: "8px",
     objectFit: "contain",
     boxShadow: "0 2px 6px rgba(0,0,0,0.1)",
     margin: "0 0 8px 0"
   };
-  return f && b ? (N.width = f, N.height = b, C.width = `${f}px`, C.height = `${b}px`) : f && !b ? (N.width = f, C.width = `${f}px`, C.height = "auto") : !f && b && (N.height = b, C.width = "auto", C.height = `${b}px`), /* @__PURE__ */ p(O, { field: e, children: /* @__PURE__ */ p(
+  return f && b ? (C.width = f, C.height = b, N.width = `${f}px`, N.height = `${b}px`) : f && !b ? (C.width = f, N.width = `${f}px`, N.height = "auto") : !f && b && (C.height = b, N.width = "auto", N.height = `${b}px`), /* @__PURE__ */ p(O, { field: e, children: /* @__PURE__ */ p(
     "div",
     {
       "data-testid": "image-wrapper",
@@ -1767,15 +1794,15 @@ const Nr = ({ field: e, value: r }) => {
         {
           src: d,
           alt: n?.(e.displayName || "Image") || e.displayName || "Image",
-          ...N,
-          style: C
+          ...C,
+          style: N
         }
       )
     }
   ) });
 };
-Nr.displayName = "ImageDisplay";
-const Rt = l.memo(Nr), kr = ({
+kr.displayName = "ImageDisplay";
+const zt = l.memo(kr), Ir = ({
   field: e,
   value: r,
   onChange: t,
@@ -1803,8 +1830,8 @@ const Rt = l.memo(Nr), kr = ({
     }
   ) });
 };
-kr.displayName = "IntegerArrayInput";
-const Dt = l.memo(kr), Ir = ({
+Ir.displayName = "IntegerArrayInput";
+const Pt = l.memo(Ir), Er = ({
   field: e,
   value: r,
   onChange: t,
@@ -1831,8 +1858,8 @@ const Dt = l.memo(kr), Ir = ({
     }
   ) });
 };
-Ir.displayName = "IntegerInput";
-const Pt = l.memo(Ir), Er = ({
+Er.displayName = "IntegerInput";
+const Lt = l.memo(Er), Mr = ({
   field: e,
   value: r,
   onChange: t,
@@ -1864,8 +1891,8 @@ const Pt = l.memo(Ir), Er = ({
     }
   ) });
 };
-Er.displayName = "MultilineTextInput";
-const zt = l.memo(Er), Mr = ({
+Mr.displayName = "MultilineTextInput";
+const Ot = l.memo(Mr), Fr = ({
   field: e,
   value: r,
   onChange: t,
@@ -1878,11 +1905,11 @@ const zt = l.memo(Er), Mr = ({
   l.useEffect(() => {
     o.current = n;
   }, [n]);
-  const { t: c, theme: s, formStyle: i, fieldStyle: d } = H(), m = (x, k, S) => {
+  const { t: c, theme: s, formStyle: i, fieldStyle: d } = B(), m = (x, k, S) => {
     if (!k) return {};
     const j = x?.[k];
     return (S && j ? j[S] : void 0) ?? {};
-  }, u = l.useRef(null), [f, b] = l.useState(!1), [N, C] = l.useState(null), h = l.useMemo(
+  }, u = l.useRef(null), [f, b] = l.useState(!1), [C, N] = l.useState(null), h = l.useMemo(
     () => e.options.map((x) => ({ value: x.value, label: c(x.label) })),
     [e.options, c]
   ), y = l.useMemo(() => {
@@ -1896,7 +1923,7 @@ const zt = l.memo(Er), Mr = ({
   const R = () => {
     if (!u.current) return;
     const x = u.current.getBoundingClientRect();
-    C({ x: x.left, y: x.bottom }), b((k) => !k);
+    N({ x: x.left, y: x.bottom }), b((k) => !k);
   }, I = (x) => {
     const k = y.includes(x) ? y.filter((A) => A !== x) : [...y, x], S = E(k);
     S !== $.current && ($.current = S, M(S), o.current?.(S ?? null)), t?.(k);
@@ -1987,10 +2014,10 @@ const zt = l.memo(Er), Mr = ({
         ]
       }
     ) }) }),
-    f && N && /* @__PURE__ */ p(
-      Lt,
+    f && C && /* @__PURE__ */ p(
+      Tt,
       {
-        position: N,
+        position: C,
         options: h,
         selectedValues: y,
         onToggleOption: I,
@@ -2000,7 +2027,7 @@ const zt = l.memo(Er), Mr = ({
       }
     )
   ] });
-}, Lt = ({
+}, Tt = ({
   position: e,
   options: r,
   selectedValues: t,
@@ -2009,7 +2036,7 @@ const zt = l.memo(Er), Mr = ({
   controlRef: o,
   theme: c
 }) => {
-  const s = l.useRef(null), [i, d] = l.useState(-1), { formStyle: m, fieldStyle: u } = H(), f = ie(c ?? "light");
+  const s = l.useRef(null), [i, d] = l.useState(-1), { formStyle: m, fieldStyle: u } = B(), f = ie(c ?? "light");
   l.useLayoutEffect(() => {
     if (!o.current) return;
     const I = o.current.closest("[data-reactaform-theme]"), v = document.getElementById("popup-root");
@@ -2031,7 +2058,7 @@ const zt = l.memo(Er), Mr = ({
     if (!v) return {};
     const x = I?.[v];
     return (g && x ? x[g] : void 0) ?? {};
-  }, N = l.useMemo(
+  }, C = l.useMemo(
     () => ({
       maxHeight: 200,
       overflowY: "auto",
@@ -2047,7 +2074,7 @@ const zt = l.memo(Er), Mr = ({
       ...b(u, void 0, "popup")
     }),
     [m, u]
-  ), C = l.useMemo(
+  ), N = l.useMemo(
     () => ({
       padding: "6px 8px",
       cursor: "pointer",
@@ -2110,13 +2137,13 @@ const zt = l.memo(Er), Mr = ({
           left: E ? E.left : e.x,
           width: M ?? h,
           // spread the static popup styles
-          ...N
+          ...C
         },
         "data-reactaform-theme": c ?? "light",
         children: r.map((I, v) => {
           const g = t.includes(I.value), w = f ? "var(--reactaform-option-menu-hover-bg, rgba(255,255,255,0.01))" : "var(--reactaform-option-menu-hover-bg, #eee)", x = {
-            ...C,
-            background: v === i ? w : C.background
+            ...N,
+            background: v === i ? w : N.background
           };
           return /* @__PURE__ */ D(
             "div",
@@ -2187,8 +2214,8 @@ const zt = l.memo(Er), Mr = ({
     R
   );
 };
-Mr.displayName = "MultiSelect";
-const Ot = l.memo(Mr), Fr = ({
+Fr.displayName = "MultiSelect";
+const jt = l.memo(Fr), $r = ({
   field: e,
   value: r,
   onChange: t,
@@ -2222,8 +2249,8 @@ const Ot = l.memo(Mr), Fr = ({
     }
   ) });
 };
-Fr.displayName = "NumericStepperInput";
-const Tt = l.memo(Fr), $r = ({
+$r.displayName = "NumericStepperInput";
+const Bt = l.memo($r), Vr = ({
   field: e,
   value: r,
   onChange: t,
@@ -2250,15 +2277,15 @@ const Tt = l.memo(Fr), $r = ({
     }
   ) });
 };
-$r.displayName = "PhoneInput";
-const jt = l.memo($r), Vr = ({
+Vr.displayName = "PhoneInput";
+const Ht = l.memo(Vr), Ar = ({
   field: e,
   value: r,
   onChange: t,
   onError: n,
   error: a
 }) => {
-  const { t: o } = H(), c = T(e, a), s = e.layout?.toLowerCase() === "horizontal" ? "row" : "column", i = l.useRef(n);
+  const { t: o } = B(), c = T(e, a), s = e.layout?.toLowerCase() === "horizontal" ? "row" : "column", i = l.useRef(n);
   l.useEffect(() => {
     i.current = n;
   }, [n]);
@@ -2279,7 +2306,7 @@ const jt = l.memo($r), Vr = ({
   const b = (h) => {
     const y = h.target.value, E = c(y);
     f(E), t?.(y);
-  }, N = {
+  }, C = {
     display: "flex",
     flexDirection: s,
     flexWrap: s === "row" ? "wrap" : "nowrap",
@@ -2288,7 +2315,7 @@ const jt = l.memo($r), Vr = ({
     width: "100%",
     padding: s === "row" ? "8px" : void 0,
     boxSizing: "border-box"
-  }, C = {
+  }, N = {
     display: s === "column" ? "flex" : "inline-flex",
     gap: "8px",
     alignItems: "center",
@@ -2304,14 +2331,14 @@ const jt = l.memo($r), Vr = ({
       className: V.input,
       "aria-labelledby": `${e.name}-label`,
       "aria-invalid": !!d,
-      style: N,
+      style: C,
       children: e.options.map((h) => {
         const y = String(h.value), E = `${e.name}-${y}`;
         return /* @__PURE__ */ D(
           "label",
           {
             className: U(V.label),
-            style: C,
+            style: N,
             onMouseDown: (F) => F.preventDefault(),
             onClick: () => {
               String(r ?? "") !== y && b({ target: { value: y } });
@@ -2349,11 +2376,11 @@ const jt = l.memo($r), Vr = ({
     }
   ) });
 };
-Vr.displayName = "RadioInput";
-const Bt = l.memo(Vr), Ht = {
+Ar.displayName = "RadioInput";
+const qt = l.memo(Ar), Ut = {
   display: "flex",
   gap: 4
-}, qt = {
+}, Wt = {
   cursor: "pointer",
   fontSize: "1.5rem",
   lineHeight: 1,
@@ -2361,23 +2388,23 @@ const Bt = l.memo(Vr), Ht = {
   marginRight: "0.25rem",
   userSelect: "none",
   transition: "color 0.12s ease"
-}, Ar = ({ field: e, value: r, onChange: t, onError: n, error: a }) => {
-  const { t: o } = H(), c = T(e, a), s = e.max ?? 5, i = e.icon?.trim() || "★", [d, m] = l.useState(null), u = l.useRef([]), f = l.useMemo(() => Math.min(Math.max(r ?? 0, 0), s), [r, s]), b = l.useMemo(() => c(f) ?? null, [c, f]);
+}, Rr = ({ field: e, value: r, onChange: t, onError: n, error: a }) => {
+  const { t: o } = B(), c = T(e, a), s = e.max ?? 5, i = e.icon?.trim() || "★", [d, m] = l.useState(null), u = l.useRef([]), f = l.useMemo(() => Math.min(Math.max(r ?? 0, 0), s), [r, s]), b = l.useMemo(() => c(f) ?? null, [c, f]);
   l.useEffect(() => {
     n?.(b);
   }, [b, n]);
-  const N = l.useCallback(
+  const C = l.useCallback(
     (h) => {
       const y = Math.min(Math.max(h, 0), s);
       t?.(y);
     },
     [s, t]
-  ), C = l.useCallback(
+  ), N = l.useCallback(
     (h, y) => {
       switch (h.key) {
         case "Enter":
         case " ":
-          h.preventDefault(), N(y + 1);
+          h.preventDefault(), C(y + 1);
           break;
         case "ArrowRight":
         case "ArrowUp":
@@ -2389,7 +2416,7 @@ const Bt = l.memo(Vr), Ht = {
           break;
       }
     },
-    [s, N]
+    [s, C]
   );
   return /* @__PURE__ */ p(O, { field: e, error: b, children: /* @__PURE__ */ p(
     "div",
@@ -2398,7 +2425,7 @@ const Bt = l.memo(Vr), Ht = {
       "aria-labelledby": `${e.name}-label`,
       "aria-invalid": !!b,
       "aria-describedby": b ? `${e.name}-error` : void 0,
-      style: Ht,
+      style: Ut,
       children: Array.from({ length: s }, (h, y) => {
         const E = y < f, M = d !== null && y <= d || E ? "gold" : "lightgray";
         return /* @__PURE__ */ p(
@@ -2410,11 +2437,11 @@ const Bt = l.memo(Vr), Ht = {
             "aria-checked": E,
             "aria-label": `Rating ${y + 1}`,
             title: o(`${e.displayName} ${y + 1}`),
-            onClick: () => N(y + 1),
-            onKeyDown: ($) => C($, y),
+            onClick: () => C(y + 1),
+            onKeyDown: ($) => N($, y),
             onMouseEnter: () => m(y),
             onMouseLeave: () => m(null),
-            style: { ...qt, color: M },
+            style: { ...Wt, color: M },
             children: i
           },
           y
@@ -2423,15 +2450,15 @@ const Bt = l.memo(Vr), Ht = {
     }
   ) });
 };
-Ar.displayName = "RatingInput";
-const Ut = l.memo(Ar), Rr = ({
+Rr.displayName = "RatingInput";
+const _t = l.memo(Rr), Dr = ({
   field: e,
   value: r,
   onChange: t,
   onError: n,
   error: a
 }) => {
-  const { t: o } = H(), c = T(e, a), { inputRef: s, error: i, handleChange: d } = _({
+  const { t: o } = B(), c = T(e, a), { inputRef: s, error: i, handleChange: d } = _({
     value: r,
     onChange: t,
     onError: n,
@@ -2472,8 +2499,8 @@ const Ut = l.memo(Ar), Rr = ({
     )
   ] }) });
 };
-Rr.displayName = "PasswordInput";
-const Wt = l.memo(Rr), Dr = ({ field: e, value: r, onChange: t, onError: n, error: a }) => {
+Dr.displayName = "PasswordInput";
+const Kt = l.memo(Dr), zr = ({ field: e, value: r, onChange: t, onError: n, error: a }) => {
   const o = T(e, a), c = e.min ?? 0, s = e.max ?? 100, [i, d] = l.useState(
     () => isNaN(Number(r)) ? String(c) : String(Number(r))
   );
@@ -2487,8 +2514,8 @@ const Wt = l.memo(Rr), Dr = ({ field: e, value: r, onChange: t, onError: n, erro
   }, [m, n]);
   const u = l.useCallback(
     (b) => {
-      const N = b.target.value;
-      d(N), t?.(N);
+      const C = b.target.value;
+      d(C), t?.(C);
     },
     [t]
   ), f = isNaN(Number(i)) ? String(c) : String(Number(i));
@@ -2534,15 +2561,15 @@ const Wt = l.memo(Rr), Dr = ({ field: e, value: r, onChange: t, onError: n, erro
     )
   ] }) });
 };
-Dr.displayName = "SliderInput";
-const _t = l.memo(Dr), Pr = ({
+zr.displayName = "SliderInput";
+const Gt = l.memo(zr), Pr = ({
   field: e,
   value: r,
   onChange: t,
   onError: n,
   error: a
 }) => {
-  const { t: o, formStyle: c, fieldStyle: s } = H(), d = T(e, a)(r);
+  const { t: o, formStyle: c, fieldStyle: s } = B(), d = T(e, a)(r);
   l.useEffect(() => {
     n?.(d);
   }, [d, n]);
@@ -2557,7 +2584,7 @@ const _t = l.memo(Dr), Pr = ({
     height: 24,
     ...f(m, "switch", "label"),
     ...f(u, void 0, "label")
-  }), [m, u]), N = l.useMemo(() => ({
+  }), [m, u]), C = l.useMemo(() => ({
     position: "absolute",
     opacity: 0,
     top: 0,
@@ -2570,7 +2597,7 @@ const _t = l.memo(Dr), Pr = ({
     // Make hidden input non-interactive to avoid event conflicts
     ...f(m, "switch", "hiddenInput"),
     ...f(u, void 0, "hiddenInput")
-  }), [m, u]), C = l.useMemo(() => ({
+  }), [m, u]), N = l.useMemo(() => ({
     position: "absolute",
     cursor: "pointer",
     top: 0,
@@ -2625,7 +2652,7 @@ const _t = l.memo(Dr), Pr = ({
           "aria-label": o(e.displayName),
           "aria-invalid": !1,
           "aria-describedby": void 0,
-          style: N,
+          style: C,
           tabIndex: -1
         }
       ),
@@ -2643,7 +2670,7 @@ const _t = l.memo(Dr), Pr = ({
             (F.key === " " || F.key === "Spacebar" || F.key === "Space" || F.key === "Enter") && (F.preventDefault(), E());
           },
           className: `reactaform-switch ${y ? "active checked on" : ""} `,
-          style: y ? { ...C, backgroundColor: "var(--reactaform-switch-on-bg, #22c55e)", borderColor: "var(--reactaform-switch-on-border, #16a34a)" } : C,
+          style: y ? { ...N, backgroundColor: "var(--reactaform-switch-on-bg, #22c55e)", borderColor: "var(--reactaform-switch-on-border, #16a34a)" } : N,
           children: /* @__PURE__ */ p(
             "span",
             {
@@ -2659,7 +2686,7 @@ const _t = l.memo(Dr), Pr = ({
   ] }) });
 };
 Pr.displayName = "SwitchInput";
-const Kt = l.memo(Pr), xe = ({
+const Jt = l.memo(Pr), xe = ({
   field: e,
   value: r,
   onChange: t,
@@ -2688,7 +2715,7 @@ const Kt = l.memo(Pr), xe = ({
   ) });
 };
 xe.displayName = "TextInput";
-const zr = ({
+const Lr = ({
   field: e,
   value: r,
   onChange: t,
@@ -2718,9 +2745,9 @@ const zr = ({
     }
   ) });
 };
-zr.displayName = "TimeInput";
-const Gt = l.memo(zr);
-function Jt({
+Lr.displayName = "TimeInput";
+const Yt = l.memo(Lr);
+function Xt({
   pos: e,
   options: r,
   onClose: t,
@@ -2916,12 +2943,12 @@ const $e = {
     rad: Math.PI / 180,
     rev: 1 / 360
   }
-}, Re = {}, Yt = /* @__PURE__ */ new Set([
+}, Re = {}, Zt = /* @__PURE__ */ new Set([
   ...Object.keys($e),
   ...Object.keys(Ve),
   ...Object.keys(Ae)
 ]);
-for (const e of Yt) {
+for (const e of Zt) {
   const r = {}, t = $e[e] ?? [], n = Ve[e] ?? {}, a = Ae[e] ?? {};
   for (const o of t) {
     const c = n[o];
@@ -2940,7 +2967,7 @@ for (const e of Yt) {
     r[o] || (r[o] = { name: String(o), shortName: String(o), factor: c });
   Re[e] = r;
 }
-function Lr(e, r, t) {
+function Or(e, r, t) {
   if (e === "C") {
     if (r === "F") return t * (9 / 5) + 32;
     if (r === "K") return t + 273.15;
@@ -2953,7 +2980,7 @@ function Lr(e, r, t) {
   }
   return t;
 }
-function Or(e) {
+function Tr(e) {
   const r = Re[e];
   if (!r) return null;
   const t = {}, n = [];
@@ -2965,15 +2992,15 @@ function Or(e) {
     factors: t
   };
 }
-const la = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const ma = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  convertTemperature: Lr,
+  convertTemperature: Or,
   dimensionUnitDisplayMap: Ve,
   dimensionUnitsMap: $e,
   dimensonUnitFactorsMap: Ae,
-  getUnitFactors: Or,
+  getUnitFactors: Tr,
   unitsByDimension: Re
-}, Symbol.toStringTag, { value: "Module" })), Tr = l.memo(({
+}, Symbol.toStringTag, { value: "Module" })), jr = l.memo(({
   disabled: e,
   inputValue: r,
   selectedUnit: t,
@@ -2992,7 +3019,7 @@ const la = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
       const F = [];
       if (n === "temperature")
         a.units.forEach(($) => {
-          const R = Lr(t, $, y);
+          const R = Or(t, $, y);
           Number.isFinite(R) && F.push({
             label: `${R.toFixed(6)} ${c($)}`,
             value: R.toString(),
@@ -3013,12 +3040,12 @@ const la = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
       f(F), i(F.length > 0);
     },
     [e, r, t, n, a, c]
-  ), N = l.useCallback(
+  ), C = l.useCallback(
     (h) => {
       i(!1), m(null), o(h);
     },
     [o]
-  ), C = l.useCallback(() => {
+  ), N = l.useCallback(() => {
     i(!1), m(null);
   }, []);
   return /* @__PURE__ */ D(Ie, { children: [
@@ -3049,29 +3076,29 @@ const la = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
       }
     ),
     s && u.length > 0 && /* @__PURE__ */ p(
-      Jt,
+      Xt,
       {
         pos: d,
         options: u,
-        onClose: C,
-        onClickOption: N
+        onClose: N,
+        onClickOption: C
       }
     )
   ] });
 });
-Tr.displayName = "ConversionButton";
-const jr = ({ field: e, value: r, onChange: t, onError: n }) => {
-  const { t: a } = H(), o = T(e), c = e.dimension, s = l.useMemo(() => c ? Or(c) : null, [c]), i = String(r?.[0] ?? ""), d = String(r?.[1] ?? s?.default ?? ""), [m, u] = l.useState(i), [f, b] = l.useState(d);
+jr.displayName = "ConversionButton";
+const Br = ({ field: e, value: r, onChange: t, onError: n }) => {
+  const { t: a } = B(), o = T(e), c = e.dimension, s = l.useMemo(() => c ? Tr(c) : null, [c]), i = String(r?.[0] ?? ""), d = String(r?.[1] ?? s?.default ?? ""), [m, u] = l.useState(i), [f, b] = l.useState(d);
   l.useEffect(() => {
     u(i);
   }, [i]), l.useEffect(() => {
     b(d);
   }, [d]);
-  const N = o([m, f]);
+  const C = o([m, f]);
   l.useEffect(() => {
-    n?.(N);
-  }, [N, n]);
-  const C = l.useCallback(
+    n?.(C);
+  }, [C, n]);
+  const N = l.useCallback(
     (M) => {
       const $ = M.target.value;
       u($), o([$, f]), t?.([$, f]);
@@ -3093,19 +3120,19 @@ const jr = ({ field: e, value: r, onChange: t, onError: n }) => {
     [s, a]
   );
   if (!c || !s) return null;
-  const F = !!N || !m.trim();
-  return /* @__PURE__ */ p(O, { field: e, error: N, children: /* @__PURE__ */ D("div", { style: { display: "flex", alignItems: "center", gap: "var(--reactaform-unit-gap, 8px)", width: "100%" }, children: [
+  const F = !!C || !m.trim();
+  return /* @__PURE__ */ p(O, { field: e, error: C, children: /* @__PURE__ */ D("div", { style: { display: "flex", alignItems: "center", gap: "var(--reactaform-unit-gap, 8px)", width: "100%" }, children: [
     /* @__PURE__ */ p(
       "input",
       {
         id: e.name,
         type: "text",
         value: m,
-        onChange: C,
+        onChange: N,
         style: { flex: "2 1 0" },
         className: U(V.input, V.textInput),
-        "aria-invalid": !!N,
-        "aria-describedby": N ? `${e.name}-error` : void 0
+        "aria-invalid": !!C,
+        "aria-describedby": C ? `${e.name}-error` : void 0
       }
     ),
     /* @__PURE__ */ p(
@@ -3116,13 +3143,13 @@ const jr = ({ field: e, value: r, onChange: t, onError: n }) => {
         onChange: h,
         style: { flex: "1 1 0" },
         className: U(V.input, V.inputSelect),
-        "aria-invalid": !!N,
-        "aria-describedby": N ? `${e.name}-error` : void 0,
+        "aria-invalid": !!C,
+        "aria-describedby": C ? `${e.name}-error` : void 0,
         children: E
       }
     ),
     /* @__PURE__ */ p(
-      Tr,
+      jr,
       {
         disabled: F,
         inputValue: m,
@@ -3135,8 +3162,8 @@ const jr = ({ field: e, value: r, onChange: t, onError: n }) => {
     )
   ] }) });
 };
-jr.displayName = "UnitValueInput";
-const Xt = l.memo(jr), Br = ({
+Br.displayName = "UnitValueInput";
+const Qt = l.memo(Br), Hr = ({
   field: e,
   value: r,
   onChange: t,
@@ -3164,57 +3191,54 @@ const Xt = l.memo(jr), Br = ({
     }
   ) });
 };
-Br.displayName = "UrlInput";
-const Zt = l.memo(Br), se = new ne();
-function ua(e, r) {
+Hr.displayName = "UrlInput";
+const en = l.memo(Hr), se = new ne();
+function da(e, r) {
   se.register(e, r);
 }
-function Qt(e) {
+function rn(e) {
   return se.get(e);
 }
-function ma(e) {
+function fa(e) {
   return se.has(e);
 }
-function da(e) {
+function pa(e) {
   return se.unregister(e);
 }
-function fa() {
+function ga() {
   return se.list();
 }
-const Hr = ({
+const qr = ({
   field: e,
   valuesMap: r,
   handleChange: t,
   handleError: n
 }) => {
-  const { t: a } = H(), [o, c] = l.useState(!1), [s, i] = l.useState(null), d = l.useCallback(async () => {
+  const { t: a } = B(), [o, c] = l.useState(!1), [s, i] = l.useState(null), d = l.useCallback(async () => {
     if (!e.action) {
       console.warn(`Button "${e.name}" has no action defined`);
       return;
     }
-    const u = Qt(e.action);
-    if (!u) {
-      const f = `Button handler "${e.action}" not found`;
-      console.error(f), i(f);
+    const f = rn(e.action);
+    if (!f) {
+      const b = `Button handler "${e.action}" not found`;
+      console.error(b), i(b);
       return;
     }
     c(!0), i(null);
     try {
-      await u(r, t, n, a);
-    } catch (f) {
-      const b = f instanceof Error ? f.message : String(f);
-      console.error(`Button handler "${e.action}" failed:`, b), i(b);
+      await f(r, t, n, a);
+    } catch (b) {
+      const C = b instanceof Error ? b.message : String(b);
+      console.error(`Button handler "${e.action}" failed:`, C), i(C);
     } finally {
       c(!1);
     }
-  }, [e, r, t, n, a]), m = {
-    padding: "8px 16px",
+  }, [e, r, t, n, a]), u = { ...{
     cursor: o ? "wait" : "pointer",
-    opacity: o ? 0.6 : 1,
-    width: "100%",
-    minHeight: "var(--reactaform-input-height, 34px)"
-  };
-  return /* @__PURE__ */ p(O, { field: e, rightAlign: !1, error: s, children: /* @__PURE__ */ p(
+    opacity: o ? 0.6 : 1
+  } };
+  return e.width && typeof e.width == "number" && e.width > 0 && (u.width = `${e.width}px`), /* @__PURE__ */ p(O, { field: e, rightAlign: !0, error: s, children: /* @__PURE__ */ p(
     "button",
     {
       type: "button",
@@ -3223,19 +3247,13 @@ const Hr = ({
       disabled: o,
       "aria-label": a(e.displayName),
       "aria-busy": o,
-      style: m,
-      onMouseEnter: (u) => {
-        o || (u.currentTarget.style.backgroundColor = "var(--reactaform-button-bg-hover, var(--reactaform-success-color-hover, #0056b3))");
-      },
-      onMouseLeave: (u) => {
-        o || (u.currentTarget.style.backgroundColor = "var(--reactaform-button-bg, var(--reactaform-success-color, #4CAF50))");
-      },
+      style: u,
       children: a(o ? "Processing..." : e.displayName)
     }
   ) });
 };
-Hr.displayName = "Button";
-const en = l.memo(Hr), rn = {
+qr.displayName = "Button";
+const tn = l.memo(qr), nn = {
   // No debounce
   checkbox: !1,
   switch: !1,
@@ -3247,6 +3265,7 @@ const en = l.memo(Hr), rn = {
   file: !1,
   image: !1,
   separator: !1,
+  description: !1,
   button: !1,
   // Buttons don't need debouncing
   // Standard text inputs
@@ -3267,44 +3286,45 @@ const en = l.memo(Hr), rn = {
   slider: { wait: 100, leading: !0, trailing: !0 },
   stepper: { wait: 100, leading: !0, trailing: !0 }
 }, me = new ne(), De = {
-  button: en,
-  checkbox: yt,
-  color: Ct,
-  date: Nt,
-  dropdown: It,
-  email: Et,
-  file: Ft,
-  float: Vt,
-  "float-array": $t,
-  image: Rt,
-  int: Pt,
-  "int-array": Dt,
-  "multi-selection": Ot,
-  multiline: zt,
-  password: Wt,
-  phone: jt,
-  radio: Bt,
-  rating: Ut,
-  separator: Mt,
-  slider: _t,
+  button: tn,
+  checkbox: vt,
+  color: Nt,
+  date: kt,
+  description: It,
+  dropdown: Mt,
+  email: Ft,
+  file: Vt,
+  float: Rt,
+  "float-array": At,
+  image: zt,
+  int: Lt,
+  "int-array": Pt,
+  "multi-selection": jt,
+  multiline: Ot,
+  password: Kt,
+  phone: Ht,
+  radio: qt,
+  rating: _t,
+  separator: $t,
+  slider: Gt,
   string: xe,
-  stepper: Tt,
-  switch: Kt,
+  stepper: Bt,
+  switch: Jt,
   text: xe,
-  time: Gt,
-  unit: Xt,
-  url: Zt
+  time: Yt,
+  unit: Qt,
+  url: en
 };
-function tn(e) {
+function an(e) {
   return e in De;
 }
-function nn(e, r) {
+function on(e, r) {
   const { wait: t = 200, leading: n, trailing: a } = r, o = l.memo((c) => {
     const s = l.useRef(c.onChange);
     l.useEffect(() => {
       s.current = c.onChange;
     }, [c.onChange]);
-    const { callback: i, cancel: d } = ct(
+    const { callback: i, cancel: d } = lt(
       (...m) => {
         s.current?.(...m);
       },
@@ -3318,13 +3338,13 @@ function nn(e, r) {
   });
   return o.displayName = "DebouncedFieldWrapper", o;
 }
-function qr(e, r, t) {
+function Ur(e, r, t) {
   const n = r;
   if (!t && e in De) {
     console.warn(`Can't overwrite base component type "${e}".`);
     return;
   }
-  const a = rn[e];
+  const a = nn[e];
   if (a === !1) {
     me.register(e, n);
     return;
@@ -3332,24 +3352,24 @@ function qr(e, r, t) {
   const o = a ?? { wait: 200 };
   ar ? me.register(e, n) : me.register(
     e,
-    nn(n, o)
+    on(n, o)
   );
 }
-function Ur(e, r) {
-  qr(e, r, !1);
+function Wr(e, r) {
+  Ur(e, r, !1);
 }
-function Wr(e) {
+function _r(e) {
   return me.get(e);
 }
 let Ye = !1;
-function an() {
+function sn() {
   Ye || (Object.entries(De).forEach(([e, r]) => {
-    qr(e, r, !0);
+    Ur(e, r, !0);
   }), Ye = !0);
 }
-const Pe = l.memo(
+const ze = l.memo(
   ({ field: e, valuesMap: r, handleChange: t, handleError: n, errorsMap: a }) => {
-    const o = Wr(e.type), c = r[e.name], s = a ? a[e.name] ?? null : void 0, i = l.useMemo(() => c, [c]), d = l.useCallback(
+    const o = _r(e.type), c = r[e.name], s = a ? a[e.name] ?? null : void 0, i = l.useMemo(() => c, [c]), d = l.useCallback(
       (u) => t(e.name, u),
       [t, e.name]
     ), m = l.useCallback(
@@ -3376,8 +3396,8 @@ const Pe = l.memo(
   },
   (e, r) => e.field === r.field && e.valuesMap[e.field.name] === r.valuesMap[r.field.name] && e.handleChange === r.handleChange && e.handleError === r.handleError && e.errorsMap?.[e.field.name] === r.errorsMap?.[r.field.name]
 );
-Pe.displayName = "FieldRenderer";
-const _r = l.memo(
+ze.displayName = "FieldRenderer";
+const Kr = l.memo(
   ({ groupName: e, defaultOpen: r = !0, fields: t, valuesMap: n, handleChange: a, handleError: o, errorsMap: c, t: s }) => {
     const [i, d] = l.useState(r), m = l.useCallback(() => d((u) => !u), []);
     return /* @__PURE__ */ D("fieldset", { className: "reactaform-group", children: [
@@ -3386,7 +3406,7 @@ const _r = l.memo(
         /* @__PURE__ */ p("span", { className: "reactaform-group_legend_arrow", children: i ? "▼" : "▶" })
       ] }),
       i && t.map((u) => /* @__PURE__ */ p(
-        Pe,
+        ze,
         {
           field: u,
           valuesMap: n,
@@ -3399,35 +3419,35 @@ const _r = l.memo(
     ] });
   }
 );
-_r.displayName = "FieldGroup";
-const ze = (e, r, t, n) => {
+Kr.displayName = "FieldGroup";
+const Pe = (e, r, t, n) => {
   const a = r[e];
   if (!a?.children) return;
   const o = t[e], c = o != null ? String(o) : "", s = a.children[c];
   if (Array.isArray(s))
     for (const i of s)
-      typeof i == "string" && r[i] && (n[i] = !0, ze(i, r, t, n));
-}, Kr = (e, r, t) => {
+      typeof i == "string" && r[i] && (n[i] = !0, Pe(i, r, t, n));
+}, Gr = (e, r, t) => {
   const n = r[e];
   if (!n?.children) return;
   const a = Object.values(n.children).flat();
   for (const o of a)
-    typeof o == "string" && o in t && (t[o] = !1, Kr(o, r, t));
-}, on = (e, r, t, n) => {
+    typeof o == "string" && o in t && (t[o] = !1, Gr(o, r, t));
+}, cn = (e, r, t, n) => {
   const a = { ...t };
   return e.forEach((o) => {
-    (!o.parents || Object.keys(o.parents).length === 0) && (a[o.name] = !0, ze(o.name, n, r, a));
+    (!o.parents || Object.keys(o.parents).length === 0) && (a[o.name] = !0, Pe(o.name, n, r, a));
   }), a;
-}, sn = (e, r, t, n, a) => {
+}, ln = (e, r, t, n, a) => {
   const o = { ...e }, c = r[n];
-  if (Kr(n, r, o), a != null && c?.children) {
+  if (Gr(n, r, o), a != null && c?.children) {
     const s = String(a), i = c.children[s];
     if (Array.isArray(i))
       for (const d of i)
-        typeof d == "string" && r[d] && (o[d] = !0, ze(d, r, t, o));
+        typeof d == "string" && r[d] && (o[d] = !0, Pe(d, r, t, o));
   }
   return o;
-}, cn = (e, r) => {
+}, un = (e, r) => {
   const t = /* @__PURE__ */ new Map();
   let n = null, a = null, o = 0;
   for (const c of e) {
@@ -3449,7 +3469,7 @@ const ze = (e, r, t, n) => {
     }
   }
   return o;
-}, ln = (e, r = {}) => {
+}, mn = (e, r = {}) => {
   const { includeEmpty: t = !0 } = r, n = [];
   let a = null, o = [], c = 0;
   for (const i of e) {
@@ -3467,16 +3487,16 @@ const ze = (e, r, t, n) => {
     }
   };
 }, Le = new ne();
-function Gr(e, r) {
+function Jr(e, r) {
   Le.register(e, r);
 }
-function un(e) {
+function dn(e) {
   return Le.get(e);
 }
-function mn(e) {
+function fn(e) {
   return Le.get(e);
 }
-Gr(
+Jr(
   "Preset_AlertSubmitHandler",
   (e, r, t) => {
     const n = {
@@ -3488,7 +3508,7 @@ Gr(
     alert(a);
   }
 );
-async function dn(e, r, t, n, a, o, c) {
+async function pn(e, r, t, n, a, o, c) {
   const s = a ? Object.values(a).filter(Boolean) : [];
   if (s.length > 0)
     return {
@@ -3501,28 +3521,28 @@ async function dn(e, r, t, n, a, o, c) {
     for (const u of e.properties) {
       const f = u.name, b = i[f];
       if (b == null) continue;
-      const N = u.type;
+      const C = u.type;
       try {
-        if (N === "int") {
-          const C = String(b).trim();
-          if (C === "")
+        if (C === "int") {
+          const N = String(b).trim();
+          if (N === "")
             i[f] = 0;
           else {
-            const h = Number(C);
+            const h = Number(N);
             Number.isInteger(h) ? i[f] = Math.trunc(h) : d.push(n("Invalid integer format for field {{1}}", u.displayName || f));
           }
-        } else if (N === "number" || N === "float") {
-          const C = String(b).trim();
-          if (C === "")
+        } else if (C === "number" || C === "float") {
+          const N = String(b).trim();
+          if (N === "")
             i[f] = 0;
           else {
-            const h = Number(C);
+            const h = Number(N);
             isNaN(h) ? d.push(n("Invalid number format for field {{1}}", u.displayName || f)) : i[f] = h;
           }
-        } else if (N === "int-array" || N === "float-array") {
-          const C = String(b).split(",").map((E) => E.trim()).filter(Boolean), h = [];
+        } else if (C === "int-array" || C === "float-array") {
+          const N = String(b).split(",").map((E) => E.trim()).filter(Boolean), h = [];
           let y = !1;
-          for (const E of C) {
+          for (const E of N) {
             const F = Number(E);
             if (isNaN(F)) {
               d.push(n("Invalid number {{1}} in array for field {{2}}", E, u.displayName || f)), y = !0;
@@ -3532,8 +3552,8 @@ async function dn(e, r, t, n, a, o, c) {
           }
           y || (i[f] = h);
         }
-      } catch (C) {
-        d.push(n("Error processing field {{1}}: {{2}}", u.displayName || f, C instanceof Error ? C.message : String(C)));
+      } catch (N) {
+        d.push(n("Error processing field {{1}}: {{2}}", u.displayName || f, N instanceof Error ? N.message : String(N)));
       }
     }
   if (d.length > 0)
@@ -3551,7 +3571,7 @@ async function dn(e, r, t, n, a, o, c) {
         errors: u
       };
   } else {
-    const u = await bt(e, i, n);
+    const u = await yt(e, i, n);
     if (u && u.length > 0)
       return {
         success: !1,
@@ -3577,7 +3597,7 @@ async function dn(e, r, t, n, a, o, c) {
       };
     }
   else if (e && typeof e.submitHandlerName == "string") {
-    const u = un(e.submitHandlerName);
+    const u = dn(e.submitHandlerName);
     if (u)
       try {
         const f = await u(e, r?.name ?? null, i, n), b = m(f);
@@ -3601,7 +3621,7 @@ async function dn(e, r, t, n, a, o, c) {
     data: i
   };
 }
-const Jr = ({
+const Yr = ({
   message: e,
   success: r,
   onDismiss: t,
@@ -3643,8 +3663,8 @@ const Jr = ({
     ]
   }
 ) : null;
-Jr.displayName = "SubmissionMessage";
-const fn = ({ onClick: e, disabled: r = !1, t }) => {
+Yr.displayName = "SubmissionMessage";
+const gn = ({ onClick: e, disabled: r = !1, t }) => {
   const [n, a] = l.useState(!1);
   return /* @__PURE__ */ p(
     "button",
@@ -3670,7 +3690,7 @@ const fn = ({ onClick: e, disabled: r = !1, t }) => {
       children: t("Submit")
     }
   );
-}, pn = ({
+}, hn = ({
   definition: e,
   instance: r,
   onSubmit: t = void 0,
@@ -3678,14 +3698,14 @@ const fn = ({ onClick: e, disabled: r = !1, t }) => {
   chunkSize: a = 50,
   chunkDelay: o = 50
 }) => {
-  const { properties: c, displayName: s } = e, i = H(), { t: d, formStyle: m, language: u, displayInstanceName: f } = i, b = {
+  const { properties: c, displayName: s } = e, i = B(), { t: d, formStyle: m, language: u, displayInstanceName: f } = i, b = {
     ...i,
     definitionName: e?.name ?? i.definitionName
-  }, [N, C] = l.useState("en"), [h, y] = l.useState([]), [E, F] = l.useState({}), [M, $] = l.useState(
+  }, [C, N] = l.useState("en"), [h, y] = l.useState([]), [E, F] = l.useState({}), [M, $] = l.useState(
     {}
   ), [R, I] = l.useState({}), [v, g] = l.useState({}), [w, x] = l.useState(null), [k, S] = l.useState(null), [A, j] = l.useState(0), [K, ce] = l.useState(!1), [je, ae] = l.useState(r.name || ""), Y = l.useRef(r), fe = l.useRef(!1);
   l.useEffect(() => {
-    const P = Object.fromEntries(
+    const z = Object.fromEntries(
       c.map((L) => [
         L.name,
         { ...L, children: {} }
@@ -3693,55 +3713,55 @@ const fn = ({ onClick: e, disabled: r = !1, t }) => {
     );
     c.forEach((L) => {
       L.parents && Object.entries(L.parents).forEach(([Q, re]) => {
-        const X = P[Q];
-        X && re.forEach((at) => {
+        const X = z[Q];
+        X && re.forEach((ot) => {
           X.children || (X.children = {});
-          const qe = String(at);
+          const qe = String(ot);
           X.children[qe] = [
             ...X.children[qe] || [],
             L.name
           ];
         });
       });
-    }), cn(c, P);
+    }), un(c, z);
     const q = Object.values(
-      P
-    ), z = {};
+      z
+    ), P = {};
     q.forEach((L) => {
       if (L.type === "unit") {
         const Q = typeof L.defaultValue == "number" ? String(L.defaultValue) : "", re = typeof L.defaultUnit == "string" ? L.defaultUnit : String(L.defaultUnit ?? "m");
-        z[L.name] = [Q, re];
+        P[L.name] = [Q, re];
       } else
-        z[L.name] = L.defaultValue;
+        P[L.name] = L.defaultValue;
     }), Y.current = r, Object.keys(r.values).forEach((L) => {
-      P[L] !== void 0 && (z[L] = r.values[L]);
+      z[L] !== void 0 && (P[L] = r.values[L]);
     });
     const J = Object.fromEntries(q.map((L) => [L.name, !1])), G = requestAnimationFrame(() => {
-      y(q), F(P), $(z), I(
-        on(q, z, J, P)
+      y(q), F(z), $(P), I(
+        cn(q, P, J, z)
       ), ce(!0), ae(r.name);
     });
     return () => cancelAnimationFrame(G);
   }, [c, r, e]), l.useEffect(() => {
     if (!K || A >= h.length) return;
-    const P = setTimeout(() => {
+    const z = setTimeout(() => {
       j(
         (q) => Math.min(q + a, h.length)
       );
     }, o);
-    return () => clearTimeout(P);
+    return () => clearTimeout(z);
   }, [K, A, h.length, a, o]);
   const Be = l.useCallback(
-    (P, q) => {
-      x(null), S(null), $((J) => ({ ...J, [P]: q }));
-      const z = E[P];
-      z && z.children && Object.keys(z.children).length > 0 && I((J) => {
-        const G = { ...M, [P]: q };
-        return sn(
+    (z, q) => {
+      x(null), S(null), $((J) => ({ ...J, [z]: q }));
+      const P = E[z];
+      P && P.children && Object.keys(P.children).length > 0 && I((J) => {
+        const G = { ...M, [z]: q };
+        return ln(
           J,
           E,
           G,
-          P,
+          z,
           q
         );
       });
@@ -3749,25 +3769,25 @@ const fn = ({ onClick: e, disabled: r = !1, t }) => {
     [E, M]
   );
   l.useEffect(() => {
-    let P = 0;
-    return P = requestAnimationFrame(() => {
-      u !== N && (C(u || "en"), x(null), S(null));
-    }), () => cancelAnimationFrame(P);
-  }, [u, N]), l.useEffect(() => {
-    let P = 0;
-    return P = requestAnimationFrame(() => {
+    let z = 0;
+    return z = requestAnimationFrame(() => {
+      u !== C && (N(u || "en"), x(null), S(null));
+    }), () => cancelAnimationFrame(z);
+  }, [u, C]), l.useEffect(() => {
+    let z = 0;
+    return z = requestAnimationFrame(() => {
       if (fe.current) {
         fe.current = !1, Y.current = r, ae(r.name || "");
         return;
       }
       Y.current = r, x(null), S(null), ae(r.name || "");
-    }), () => cancelAnimationFrame(P);
+    }), () => cancelAnimationFrame(z);
   }, [r, r.name]);
-  const He = l.useCallback((P, q) => {
-    g((z) => q ? { ...z, [P]: String(q) } : Object.fromEntries(Object.entries(z).filter(([G]) => G !== P)));
-  }, []), tt = async () => {
+  const He = l.useCallback((z, q) => {
+    g((P) => q ? { ...P, [z]: String(q) } : Object.fromEntries(Object.entries(P).filter(([G]) => G !== z)));
+  }, []), nt = async () => {
     fe.current = !0;
-    const P = Y.current?.name;
+    const z = Y.current?.name;
     Y.current.name = je;
     let q = v;
     if (b.fieldValidationMode === "onSubmission") {
@@ -3783,18 +3803,18 @@ const fn = ({ onClick: e, disabled: r = !1, t }) => {
       } else
         x(null), S(null);
     }
-    const z = await dn(e, Y.current, M, d, q, t, n), J = typeof z.message == "string" ? z.message : String(z.message), G = Object.values(z.errors ?? {}).join(`
+    const P = await pn(e, Y.current, M, d, q, t, n), J = typeof P.message == "string" ? P.message : String(P.message), G = Object.values(P.errors ?? {}).join(`
 `);
     x(G ? J + `
-` + G : J), S(z.success), z.success || (Y.current.name = P ?? Y.current.name, ae(P ?? ""));
-  }, nt = l.useMemo(
+` + G : J), S(P.success), P.success || (Y.current.name = z ?? Y.current.name, ae(z ?? ""));
+  }, at = l.useMemo(
     () => b.fieldValidationMode === "realTime" ? Object.values(v).some(Boolean) : !1,
     [v, b.fieldValidationMode]
   );
   return /* @__PURE__ */ p(Ee.Provider, { value: b, children: /* @__PURE__ */ D("div", { style: m.container, children: [
     s && /* @__PURE__ */ p("h2", { style: m.titleStyle, children: d(s) }),
     /* @__PURE__ */ p(
-      Jr,
+      Yr,
       {
         message: w,
         success: k,
@@ -3808,29 +3828,29 @@ const fn = ({ onClick: e, disabled: r = !1, t }) => {
       sr,
       {
         name: je,
-        onChange: (P) => {
-          ae(P), x(null), S(null);
+        onChange: (z) => {
+          ae(z), x(null), S(null);
         }
       }
     ),
     /* @__PURE__ */ D(Ie, { children: [
       (() => {
-        const P = h.slice(0, A).filter((z) => R[z.name]), { groups: q } = ln(P);
-        return q.map((z, J) => z.name ? /* @__PURE__ */ p(
-          _r,
+        const z = h.slice(0, A).filter((P) => R[P.name]), { groups: q } = mn(z);
+        return q.map((P, J) => P.name ? /* @__PURE__ */ p(
+          Kr,
           {
-            groupName: z.name,
+            groupName: P.name,
             defaultOpen: !0,
-            fields: z.fields,
+            fields: P.fields,
             valuesMap: M,
             handleChange: Be,
             handleError: He,
             errorsMap: v,
             t: d
           },
-          z.name
-        ) : /* @__PURE__ */ p(l.Fragment, { children: z.fields.map((G) => /* @__PURE__ */ p(
-          Pe,
+          P.name
+        ) : /* @__PURE__ */ p(l.Fragment, { children: P.fields.map((G) => /* @__PURE__ */ p(
+          ze,
           {
             field: G,
             valuesMap: M,
@@ -3852,9 +3872,9 @@ const fn = ({ onClick: e, disabled: r = !1, t }) => {
         }
       )
     ] }),
-    /* @__PURE__ */ p(fn, { onClick: tt, disabled: nt, t: d })
+    /* @__PURE__ */ p(gn, { onClick: nt, disabled: at, t: d })
   ] }) });
-}, Yr = {
+}, Xr = {
   en: { name: "English", nativeName: "English" },
   fr: { name: "French", nativeName: "Français" },
   de: { name: "German", nativeName: "Deutsch" },
@@ -3885,13 +3905,13 @@ const fn = ({ onClick: e, disabled: r = !1, t }) => {
   uk: { name: "Ukrainian", nativeName: "Українська" },
   vi: { name: "Vietnamese", nativeName: "Tiếng Việt" },
   "zh-tw": { name: "Chinese (Traditional)", nativeName: "繁體中文" }
-}, pa = () => Yr, be = /* @__PURE__ */ new Map(), le = /* @__PURE__ */ new Map(), te = /* @__PURE__ */ new Set(), we = /* @__PURE__ */ new Map(), gn = async (e) => {
+}, ha = () => Xr, be = /* @__PURE__ */ new Map(), le = /* @__PURE__ */ new Map(), te = /* @__PURE__ */ new Set(), we = /* @__PURE__ */ new Map(), bn = async (e) => {
   try {
     let r = {};
     const t = e.toLowerCase();
     if (t === "en")
       r = {};
-    else if (Yr[t]) {
+    else if (Xr[t]) {
       const a = `https://reactaform.com/locales/${t}/common.json`, o = await fetch(a);
       o.ok && (r = await o.json());
     } else
@@ -3908,7 +3928,7 @@ const fn = ({ onClick: e, disabled: r = !1, t }) => {
       error: `Failed to load common translations for ${e}: ${r}`
     };
   }
-}, hn = async (e) => {
+}, yn = async (e) => {
   if (!e || e.toLowerCase() === "en")
     return { success: !0, translations: {}, fromCache: !1 };
   const r = e.toLowerCase();
@@ -3918,13 +3938,13 @@ const fn = ({ onClick: e, disabled: r = !1, t }) => {
       translations: be.get(r) || {},
       fromCache: !0
     };
-  const t = await gn(r);
+  const t = await bn(r);
   return t.success && (be.set(r, t.translations), we.set(r, {
     loadedAt: /* @__PURE__ */ new Date(),
     size: Object.keys(t.translations).length,
     source: "common"
   })), t;
-}, bn = async (e, r) => {
+}, vn = async (e, r) => {
   if (!e || !r)
     return {
       success: !1,
@@ -3965,7 +3985,7 @@ const fn = ({ onClick: e, disabled: r = !1, t }) => {
         fromCache: !1
       });
     const o = a.headers.get("content-type") || "";
-    !o.includes("application/json") && !o.includes("text/json") && Xr() && console.warn(
+    !o.includes("application/json") && !o.includes("text/json") && Zr() && console.warn(
       `Translation file at ${n} has unexpected content-type: ${o}`
     );
     const c = await a.text();
@@ -4012,7 +4032,7 @@ const fn = ({ onClick: e, disabled: r = !1, t }) => {
     };
   }
 };
-function Xr() {
+function Zr() {
   try {
     if (typeof process < "u" && process?.env?.NODE_ENV === "development")
       return !0;
@@ -4020,30 +4040,30 @@ function Xr() {
   }
   return !1;
 }
-function yn(e, r) {
+function xn(e, r) {
   return r.length === 0 ? e : e.replace(/\{\{(\d+)\}\}/g, (t, n) => {
     const a = parseInt(n, 10) - 1, o = r[a];
     return o == null ? t : String(o);
   });
 }
-const vn = (e, r, t) => (n, ...a) => {
+const wn = (e, r, t) => (n, ...a) => {
   let o = n, c = !1;
-  return !n || typeof n != "string" ? String(n || "") : (e.toLowerCase() === "en" ? (o = n, c = !0) : n in t ? (o = t[n], c = !0) : n in r ? (o = r[n], c = !0) : o = n, o = yn(o, a), !c && Xr() && console.debug(
+  return !n || typeof n != "string" ? String(n || "") : (e.toLowerCase() === "en" ? (o = n, c = !0) : n in t ? (o = t[n], c = !0) : n in r ? (o = r[n], c = !0) : o = n, o = xn(o, a), !c && Zr() && console.debug(
     `Missing translation for "${n}" in language "${e}"`
   ), o);
 };
-function xn(e) {
+function Sn(e) {
   return /^[-+]?\d*$/.test(e);
 }
-function wn(e) {
+function Cn(e) {
   const r = /^[-+]?\d*$/;
   return e.split(",").map((t) => t.trim()).every((t) => r.test(t));
 }
-const Sn = ",", Cn = (e) => !e || e.trim() === "" ? [] : e.split(Sn).map((r) => r.trim()).filter(Boolean).map((r) => Number(r)), Xe = (e, r, t) => {
+const Nn = ",", kn = (e) => !e || e.trim() === "" ? [] : e.split(Nn).map((r) => r.trim()).filter(Boolean).map((r) => Number(r)), Xe = (e, r, t) => {
   const n = String(r);
   if (n.trim() === "")
     return e.min !== void 0 || e.max !== void 0 ? t("Value required when min or max constraints is set") : e.required ? t("Value required") : void 0;
-  if (!xn(n))
+  if (!Sn(n))
     return t("Must be a valid integer");
   const a = parseInt(n, 10);
   if (Number.isNaN(a)) return t("Must be a valid integer");
@@ -4067,13 +4087,13 @@ const Sn = ",", Cn = (e) => !e || e.trim() === "" ? [] : e.split(Sn).map((r) =>
       return t("Must be a multiple of {{1}}", o);
   }
 };
-function Nn(e, r, t) {
+function In(e, r, t) {
   const n = String(r);
   if (n.trim() === "")
     return e.min !== void 0 || e.max !== void 0 ? t("Value required when min or max constraints is set") : e.required ? t("Value required") : void 0;
-  if (!wn(n))
+  if (!Cn(n))
     return t("Each value must be a valid integer");
-  const a = Cn(n);
+  const a = kn(n);
   if (e.minCount !== void 0 && a.length < e.minCount)
     return t("Minimum number of values: {{1}}", `${e.minCount}`);
   if (e.maxCount !== void 0 && a.length > e.maxCount)
@@ -4093,7 +4113,7 @@ function Nn(e, r, t) {
       );
   }
 }
-function Zr(e, r, t) {
+function Qr(e, r, t) {
   const n = String(r);
   if (n.trim() === "")
     return e.min !== void 0 || e.max !== void 0 ? t("Value required when min or max constraints is set") : e.required ? t("Value required") : void 0;
@@ -4118,18 +4138,18 @@ function Zr(e, r, t) {
       );
   }
 }
-const kn = /^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][-+]?\d+)?$/;
-function In(e) {
-  return e.split(",").map((r) => r.trim()).every((r) => kn.test(r));
+const En = /^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][-+]?\d+)?$/;
+function Mn(e) {
+  return e.split(",").map((r) => r.trim()).every((r) => En.test(r));
 }
-const En = ",", Mn = (e) => !e || e.trim() === "" ? [] : e.split(En).map((r) => r.trim()).filter(Boolean).map((r) => Number(r));
-function Fn(e, r, t) {
+const Fn = ",", $n = (e) => !e || e.trim() === "" ? [] : e.split(Fn).map((r) => r.trim()).filter(Boolean).map((r) => Number(r));
+function Vn(e, r, t) {
   const n = String(r);
   if (n.trim() === "")
     return e.min !== void 0 || e.max !== void 0 ? t("Value required when min or max constraints is set") : e.required ? t("Value required") : void 0;
-  if (!In(n))
+  if (!Mn(n))
     return t("Each value must be a valid float");
-  const a = Mn(n);
+  const a = $n(n);
   if (e.minCount !== void 0 && a.length < e.minCount)
     return t("Minimum number of values: {{1}}", e.minCount);
   if (e.maxCount !== void 0 && a.length > e.maxCount)
@@ -4181,26 +4201,26 @@ const Se = (e) => {
   if (!e) return null;
   const r = Date.parse(e);
   return Number.isNaN(r) ? null : r;
-}, Ze = /* @__PURE__ */ new WeakMap(), $n = (e) => {
+}, Ze = /* @__PURE__ */ new WeakMap(), An = (e) => {
   let r = Ze.get(e);
   return r || (r = {
     minTime: Se(e.minDate),
     maxTime: Se(e.maxDate)
   }, Ze.set(e, r)), r;
 };
-function Vn(e, r, t) {
+function Rn(e, r, t) {
   if (r == null || String(r).trim() === "")
     return e.required ? t("Value required") : void 0;
   const n = String(r).trim(), a = Se(n);
   if (a === null)
     return t("Invalid date format");
-  const { minTime: o, maxTime: c } = $n(e);
+  const { minTime: o, maxTime: c } = An(e);
   if (o !== null && a < o)
     return t("Date must be on or after {{1}}", e.minDate);
   if (c !== null && a > c)
     return t("Date must be on or before {{1}}", e.maxDate);
 }
-function An(e, r, t) {
+function Dn(e, r, t) {
   const n = String(r);
   if (!n || n.trim() === "")
     return e.required || e.min || e.max ? t("Value required") : void 0;
@@ -4234,29 +4254,29 @@ function An(e, r, t) {
       return t("Time must be on or before {{1}}", e.max);
   }
 }
-function Rn(e) {
+function zn(e) {
   return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);
 }
-function Dn(e, r, t) {
+function Pn(e, r, t) {
   const n = String(r ?? "").trim();
-  return n === "" ? e.required ? t("Value required") : void 0 : Rn(n) ? Oe(e, r, t, t("Email does not match pattern: {{1}}", e.pattern)) : t("Must be valid email format");
+  return n === "" ? e.required ? t("Value required") : void 0 : zn(n) ? Oe(e, r, t, t("Email does not match pattern: {{1}}", e.pattern)) : t("Must be valid email format");
 }
-function Pn(e, r, t) {
+function Ln(e, r, t) {
   const n = String(r ?? "").trim();
   return n === "" ? e.required ? t("Value required") : void 0 : Oe(e, n, t, "Invalid phone number format");
 }
-const zn = /^(https?|ftp|file):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|]$/i, Ln = (e) => {
+const On = /^(https?|ftp|file):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|]$/i, Tn = (e) => {
   try {
     return new URL(e), !0;
   } catch {
     return !1;
   }
 };
-function On(e, r, t) {
+function jn(e, r, t) {
   const n = String(r ?? "").trim();
   if (n === "")
     return e.required ? t("Value required") : void 0;
-  if (!(zn.test(n) || Ln(n))) {
+  if (!(On.test(n) || Tn(n))) {
     if (e.allowRelative === !0) {
       if (!n.startsWith("/") || encodeURI(n) !== n)
         return t("Must be a valid URL");
@@ -4270,11 +4290,11 @@ function On(e, r, t) {
     return t("Must be a valid URL");
   }
 }
-function Tn(e, r, t) {
+function Bn(e, r, t) {
   const n = Array.isArray(r) ? r : [], a = n[0], o = n[1] ? String(n[1]).trim() : "";
-  return String(a ?? "").trim() === "" || o === "" ? e.required ? t("Value required") : void 0 : Zr(e, a, t);
+  return String(a ?? "").trim() === "" || o === "" ? e.required ? t("Value required") : void 0 : Qr(e, a, t);
 }
-function jn(e, r, t) {
+function Hn(e, r, t) {
   if (Array.isArray(r))
     return r.length === 0 ? t("Select a file") : r.every((n) => n instanceof File) ? void 0 : t("Invalid file input");
   if (!(r instanceof File)) {
@@ -4282,14 +4302,14 @@ function jn(e, r, t) {
     return e.required && (r == null || typeof n == "string" && n.trim() === "") ? t("Select a file") : t("Invalid file input: {{1}}", n);
   }
 }
-function Bn(e, r, t) {
+function qn(e, r, t) {
   const n = String(r);
   if (n === "" || n === null || n === void 0)
     return e.required ? t("Value required") : void 0;
   if (!e.options?.some((a) => String(a.value) === n))
     return t("Invalid option selected");
 }
-function Hn(e, r, t) {
+function Un(e, r, t) {
   const a = String(r ?? "").trim();
   if (a === "")
     return e.required ? t("Value required") : void 0;
@@ -4300,15 +4320,15 @@ function Hn(e, r, t) {
     if (!e.options?.some((s) => String(s.value) === c))
       return t("Invalid option selected");
 }
-const qn = /^#([0-9A-F]{3}){1,2}$/i, Un = (e) => qn.test(e);
-function Wn(e, r, t) {
+const Wn = /^#([0-9A-F]{3}){1,2}$/i, _n = (e) => Wn.test(e);
+function Kn(e, r, t) {
   const n = String(r).trim();
   if (n === "")
     return e.required ? t("Value required") : void 0;
-  if (!Un(n))
+  if (!_n(n))
     return t("Invalid color format");
 }
-function _n(e, r, t) {
+function Gn(e, r, t) {
   const n = String(r ?? "").trim();
   if (n === "")
     return e.required ? t("Value required") : void 0;
@@ -4318,7 +4338,7 @@ function _n(e, r, t) {
   if (e.max !== void 0 && a > e.max)
     return t("Must be ≤ {{1}}", e.max);
 }
-function Kn(e, r, t) {
+function Jn(e, r, t) {
   const n = String(r);
   if (n.trim() === "")
     return e.required ? t("Value required") : void 0;
@@ -4331,13 +4351,13 @@ function Kn(e, r, t) {
     return t("Must be ≤ {{1}}", c);
 }
 let Qe = !1;
-function Qr() {
-  Qe || (B("int", Xe), B("stepper", Xe), B("int-array", Nn), B("float", Zr), B("slider", Kn), B("float-array", Fn), B("text", ue), B("string", ue), B("multiline", ue), B("password", ue), B("email", Dn), B("date", Vn), B("time", An), B("url", On), B("phone", Pn), B("unit", Tn), B("dropdown", Bn), B("multi-selection", Hn), B("color", Wn), B("rating", _n), B("file", jn), Qe = !0);
+function et() {
+  Qe || (H("int", Xe), H("stepper", Xe), H("int-array", In), H("float", Qr), H("slider", Jn), H("float-array", Vn), H("text", ue), H("string", ue), H("multiline", ue), H("password", ue), H("email", Pn), H("date", Rn), H("time", Dn), H("url", jn), H("phone", Ln), H("unit", Bn), H("dropdown", qn), H("multi-selection", Un), H("color", Kn), H("rating", Gn), H("file", Hn), Qe = !0);
 }
-Qr();
-an();
-Qr();
-const Gn = (e) => ({
+et();
+sn();
+et();
+const Yn = (e) => ({
   container: {
     padding: "var(--reactaform-space-sm, 8px)",
     margin: "0 auto",
@@ -4378,7 +4398,7 @@ const Gn = (e) => ({
     lineHeight: "1.2",
     textAlign: "left"
   }
-}), Jn = (e) => {
+}), Xn = (e) => {
   const r = {
     color: "var(--reactaform-color-text)",
     fontFamily: e?.fontFamily || "var(--reactaform-font-family, inherit)",
@@ -4437,7 +4457,7 @@ const Gn = (e) => ({
       display: "block"
     }
   };
-}, Yn = ({
+}, Zn = ({
   children: e,
   definitionName: r = "",
   defaultStyle: t,
@@ -4451,29 +4471,29 @@ const Gn = (e) => ({
   const d = r, m = o, u = a, f = n, b = l.useMemo(
     () => t ?? {},
     [t]
-  ), [N, C] = l.useState({}), [h, y] = l.useState({});
+  ), [C, N] = l.useState({}), [h, y] = l.useState({});
   l.useEffect(() => {
     let v = !0;
     return (async () => {
       if (f === "en") {
-        v && (C({}), y({}));
+        v && (N({}), y({}));
         return;
       }
       try {
-        const w = await hn(f), x = w.success ? w.translations : {};
-        v && C(x);
-        const k = await bn(f, m), S = k.success ? k.translations : {};
+        const w = await yn(f), x = w.success ? w.translations : {};
+        v && N(x);
+        const k = await vn(f, m), S = k.success ? k.translations : {};
         v && y(S);
       } catch {
-        v && (C({}), y({}));
+        v && (N({}), y({}));
       }
     })(), () => {
       v = !1;
     };
   }, [f, m]);
-  const E = l.useMemo(() => Gn(b), [b]), F = l.useMemo(() => Jn(b), [b]), M = l.useMemo(
-    () => vn(f, N, h),
-    [f, N, h]
+  const E = l.useMemo(() => Yn(b), [b]), F = l.useMemo(() => Xn(b), [b]), M = l.useMemo(
+    () => wn(f, C, h),
+    [f, C, h]
   ), $ = l.useCallback(
     (v, ...g) => M(v, ...g),
     [M]
@@ -4509,7 +4529,7 @@ const Gn = (e) => ({
     }
   ) });
 };
-function Xn(e) {
+function Qn(e) {
   if (!e || typeof e != "object")
     return "Definition must be an object";
   const r = e;
@@ -4537,7 +4557,7 @@ function Xn(e) {
     }
   return null;
 }
-async function ga(e, r = {}) {
+async function ba(e, r = {}) {
   const { validateSchema: t = !0 } = r;
   try {
     if (!e || typeof e != "string")
@@ -4555,7 +4575,7 @@ async function ga(e, r = {}) {
       };
     }
     if (t) {
-      const o = Xn(a);
+      const o = Qn(a);
       if (o)
         return { success: !1, error: `Schema validation failed: ${o}` };
     }
@@ -4564,7 +4584,7 @@ async function ga(e, r = {}) {
     return { success: !1, error: `Unexpected error loading definition: ${n instanceof Error ? n.message : "Unknown error"}` };
   }
 }
-function Zn(e, r) {
+function ea(e, r) {
   try {
     if (!e)
       return { success: !1, error: "Definition is required" };
@@ -4591,7 +4611,7 @@ function Zn(e, r) {
     };
   }
 }
-function ha(e) {
+function ya(e) {
   try {
     if (!e)
       return { success: !1, error: "Instance data is required" };
@@ -4615,7 +4635,7 @@ function ha(e) {
     };
   }
 }
-function ba(e, r, t) {
+function va(e, r, t) {
   try {
     if (!e)
       return { success: !1, error: "Instance is required" };
@@ -4697,7 +4717,7 @@ function ba(e, r, t) {
     };
   }
 }
-function Qn(e) {
+function ra(e) {
   const [r, t] = l.useState(null);
   return l.useEffect(() => {
     const n = document.querySelector("[data-reactaform-theme]");
@@ -4713,7 +4733,7 @@ function Qn(e) {
     return c.observe(a, { attributes: !0, attributeFilter: ["data-reactaform-theme"] }), () => c.disconnect();
   }, [e]), r;
 }
-const ya = ({
+const xa = ({
   definitionData: e,
   instance: r,
   language: t,
@@ -4731,33 +4751,33 @@ const ya = ({
     } catch {
       return null;
     }
-  }, [e]), u = { fontSize: "inherit", fontFamily: "inherit", ...o }, f = Qn(), b = a ?? f ?? "light", N = t ?? "en";
+  }, [e]), u = { fontSize: "inherit", fontFamily: "inherit", ...o }, f = ra(), b = a ?? f ?? "light", C = t ?? "en";
   l.useEffect(() => {
     let h = document.getElementById("popup-root");
     h || (h = document.createElement("div"), h.id = "popup-root", document.body.appendChild(h));
   }, []);
-  const C = l.useMemo(() => {
+  const N = l.useMemo(() => {
     if (r) return r;
     if (!m) return null;
-    const h = Zn(m, m.name);
+    const h = ea(m, m.name);
     return !h.success || !h.instance ? null : h.instance;
   }, [r, m]);
-  return m ? C ? /* @__PURE__ */ p(
-    Yn,
+  return m ? N ? /* @__PURE__ */ p(
+    Zn,
     {
       definitionName: m.name,
       defaultStyle: u,
-      defaultLanguage: N,
+      defaultLanguage: C,
       defaultTheme: b,
       defaultLocalizeName: m.localization || "",
       className: n,
       defaultFieldValidationMode: c,
       defaultDisplayInstanceName: s,
       children: /* @__PURE__ */ p(
-        pn,
+        hn,
         {
           definition: m,
-          instance: C,
+          instance: N,
           onSubmit: i,
           onValidation: d
         }
@@ -4772,7 +4792,7 @@ const ya = ({
   formValidators: /* @__PURE__ */ new Map(),
   submissionHandlers: /* @__PURE__ */ new Map()
 };
-function et(e, r, t) {
+function rt(e, r, t) {
   if (!e) return !0;
   if (t && !t(e))
     return !1;
@@ -4793,11 +4813,11 @@ function et(e, r, t) {
       return !1;
   }
 }
-function ea(e) {
+function ta(e) {
   const r = [];
   if (e.components)
     for (const t of Object.keys(e.components)) {
-      const n = Wr(t);
+      const n = _r(t);
       if (n) {
         let a;
         for (const [o, c] of Z)
@@ -4846,7 +4866,7 @@ function ea(e) {
     }
   if (e.submissionHandlers)
     for (const t of Object.keys(e.submissionHandlers)) {
-      const n = mn(t), a = W.submissionHandlers.get(t);
+      const n = fn(t), a = W.submissionHandlers.get(t);
       n && a && a !== e.name && r.push({
         type: "submissionHandler",
         name: t,
@@ -4859,7 +4879,7 @@ function ea(e) {
 function oe(e, r, t, n, a, o, c, s) {
   for (const i of Object.keys(e)) {
     let d;
-    if (s ? d = a.find((m) => m.type === "fieldCustomValidator" && m.name === `${s}:${i}`) : e === n.components ? d = a.find((m) => m.type === "component" && m.name === i) : e === n.formValidators ? d = a.find((m) => m.type === "formValidator" && m.name === i) : e === n.fieldTypeValidators ? d = a.find((m) => m.type === "fieldTypeValidator" && m.name === `type:${i}`) : e === n.submissionHandlers && (d = a.find((m) => m.type === "submissionHandler" && m.name === i)), et(d || null, o, c))
+    if (s ? d = a.find((m) => m.type === "fieldCustomValidator" && m.name === `${s}:${i}`) : e === n.components ? d = a.find((m) => m.type === "component" && m.name === i) : e === n.formValidators ? d = a.find((m) => m.type === "formValidator" && m.name === i) : e === n.fieldTypeValidators ? d = a.find((m) => m.type === "fieldTypeValidator" && m.name === `type:${i}`) : e === n.submissionHandlers && (d = a.find((m) => m.type === "submissionHandler" && m.name === i)), rt(d || null, o, c))
       if (s) {
         const m = r.get(s) || /* @__PURE__ */ new Map();
         m.set(i, n.name), r.set(s, m), t(i, e[i]);
@@ -4870,7 +4890,7 @@ function oe(e, r, t, n, a, o, c, s) {
         ) : r.set(i, n.name), t(i, e[i]);
   }
 }
-function va(e, r) {
+function wa(e, r) {
   const t = r?.conflictResolution || "error";
   if (Z.has(e.name)) {
     const a = {
@@ -4879,13 +4899,13 @@ function va(e, r) {
       existingPlugin: e.name,
       newPlugin: e.name
     };
-    if (!et(a, t, r?.onConflict)) return;
+    if (!rt(a, t, r?.onConflict)) return;
   }
-  const n = ea(e);
+  const n = ta(e);
   if (e.components && oe(
     e.components,
     W.components,
-    Ur,
+    Wr,
     e,
     n,
     t,
@@ -4895,7 +4915,7 @@ function va(e, r) {
       oe(
         o,
         W.fieldValidators,
-        (c, s) => pt(a, c, s),
+        (c, s) => gt(a, c, s),
         e,
         n,
         t,
@@ -4905,7 +4925,7 @@ function va(e, r) {
   e.formValidators && oe(
     e.formValidators,
     W.formValidators,
-    ft,
+    pt,
     e,
     n,
     t,
@@ -4913,7 +4933,7 @@ function va(e, r) {
   ), e.fieldTypeValidators && oe(
     e.fieldTypeValidators,
     W.fieldTypeValidators,
-    gt,
+    ht,
     e,
     n,
     t,
@@ -4921,14 +4941,14 @@ function va(e, r) {
   ), e.submissionHandlers && oe(
     e.submissionHandlers,
     W.submissionHandlers,
-    Gr,
+    Jr,
     e,
     n,
     t,
     r?.onConflict
   ), e.setup && e.setup(), Z.set(e.name, e);
 }
-function xa(e, r = !1) {
+function Sa(e, r = !1) {
   const t = Z.get(e);
   if (!t) return !1;
   if (t.cleanup && t.cleanup(), r) {
@@ -4956,18 +4976,18 @@ function xa(e, r = !1) {
   }
   return Z.delete(e), !0;
 }
-function wa(e) {
+function Ca(e) {
   return Z.get(e);
 }
-function Sa() {
+function Na() {
   return Array.from(Z.values());
 }
-function Ca(e) {
+function ka(e) {
   return Z.has(e);
 }
-function Na(e) {
+function Ia(e) {
   for (const [r, t] of Object.entries(e))
-    Ur(r, t);
+    Wr(r, t);
 }
 function ee(e) {
   return typeof e == "object" && e !== null;
@@ -4977,7 +4997,7 @@ function Te(e) {
   const r = e;
   return typeof r.name == "string" && typeof r.displayName == "string";
 }
-function rt(e) {
+function tt(e) {
   if (!ee(e)) return !1;
   const r = e;
   return typeof r.name != "string" || typeof r.version != "string" || !Array.isArray(r.properties) ? !1 : r.properties.every((t) => Te(t));
@@ -4990,7 +5010,7 @@ function Ce(e) {
     return !!r && typeof r.name == "string" && typeof r.size == "number";
   }
 }
-function ka(e, r, t = {}) {
+function Ea(e, r, t = {}) {
   try {
     const {
       includeMetadata: n = !1,
@@ -5005,7 +5025,7 @@ function ka(e, r, t = {}) {
         success: !1,
         error: "Instance must be a valid object"
       };
-    const d = [], m = [], u = {}, b = (rt(r) || ee(r) && Array.isArray(r.properties) ? r.properties : []).filter(Te), N = new Map(b.map((h) => [h.name, h]));
+    const d = [], m = [], u = {}, b = (tt(r) || ee(r) && Array.isArray(r.properties) ? r.properties : []).filter(Te), C = new Map(b.map((h) => [h.name, h]));
     for (const [h, y] of Object.entries(e)) {
       if (s.includes(h)) {
         m.push(h);
@@ -5016,9 +5036,9 @@ function ka(e, r, t = {}) {
         continue;
       }
       if (y === void 0) continue;
-      const E = N.get(h);
+      const E = C.get(h);
       try {
-        u[h] = ra(y, E, { dateFormat: a, fileHandling: o });
+        u[h] = na(y, E, { dateFormat: a, fileHandling: o });
       } catch (F) {
         d.push(`Error serializing field '${h}': ${String(F)}`), u[h] = null;
       }
@@ -5044,7 +5064,7 @@ function ka(e, r, t = {}) {
     };
   }
 }
-function ra(e, r, t = {}) {
+function na(e, r, t = {}) {
   const { dateFormat: n = "iso", fileHandling: a = "metadata" } = t;
   if (e == null)
     return null;
@@ -5114,7 +5134,7 @@ function tr(e, r) {
     _note: "Base64 encoding requires async implementation"
   };
 }
-function Ia(e, r, t = {}) {
+function Ma(e, r, t = {}) {
   try {
     const {
       strict: n = !1,
@@ -5130,10 +5150,10 @@ function Ia(e, r, t = {}) {
     let s;
     try {
       s = JSON.parse(e);
-    } catch (C) {
+    } catch (N) {
       return {
         success: !1,
-        error: `Invalid JSON: ${C instanceof Error ? C.message : "Unknown parsing error"}`
+        error: `Invalid JSON: ${N instanceof Error ? N.message : "Unknown parsing error"}`
       };
     }
     if (!s || typeof s != "object")
@@ -5141,29 +5161,29 @@ function Ia(e, r, t = {}) {
         success: !1,
         error: "Parsed data must be an object"
       };
-    const i = [], d = [], m = {}, f = (rt(r) || ee(r) && Array.isArray(r.properties) ? r.properties : []).filter(Te), b = new Map(f.map((C) => [C.name, C]));
-    for (const C of f) {
-      const h = C.name, y = s[h];
+    const i = [], d = [], m = {}, f = (tt(r) || ee(r) && Array.isArray(r.properties) ? r.properties : []).filter(Te), b = new Map(f.map((N) => [N.name, N]));
+    for (const N of f) {
+      const h = N.name, y = s[h];
       if (y === void 0) {
-        n && C.required && d.push(`Required field '${h}' is missing`);
+        n && N.required && d.push(`Required field '${h}' is missing`);
         continue;
       }
       try {
-        m[h] = ta(y, C, { validateTypes: a, dateFormat: c });
+        m[h] = aa(y, N, { validateTypes: a, dateFormat: c });
       } catch (E) {
         const F = `Error deserializing field '${h}': ${String(E)}`;
         n ? d.push(F) : (i.push(F), m[h] = y);
       }
     }
     if (o)
-      for (const [C, h] of Object.entries(s))
-        !b.has(C) && C !== "_metadata" && (n && i.push(`Unknown field '${C}' preserved`), m[C] = h);
-    const N = d.length > 0;
+      for (const [N, h] of Object.entries(s))
+        !b.has(N) && N !== "_metadata" && (n && i.push(`Unknown field '${N}' preserved`), m[N] = h);
+    const C = d.length > 0;
     return {
-      success: !N,
+      success: !C,
       data: m,
       warnings: i.length > 0 ? i : void 0,
-      validationErrors: N ? d : void 0
+      validationErrors: C ? d : void 0
     };
   } catch (n) {
     return {
@@ -5172,7 +5192,7 @@ function Ia(e, r, t = {}) {
     };
   }
 }
-function ta(e, r, t = {}) {
+function aa(e, r, t = {}) {
   const { validateTypes: n = !0, dateFormat: a = "auto" } = t;
   if (e == null)
     return e;
@@ -5181,7 +5201,7 @@ function ta(e, r, t = {}) {
       case "date":
       case "datetime":
       case "date-time":
-        return na(e, a, n);
+        return oa(e, a, n);
       case "int":
       case "integer":
         return Ne(e, n);
@@ -5189,7 +5209,7 @@ function ta(e, r, t = {}) {
       case "number":
         return ke(e, n);
       case "boolean":
-        return aa(e, n);
+        return ia(e, n);
       case "int-array":
         return nr(e, "integer", n);
       case "float-array":
@@ -5209,7 +5229,7 @@ function ta(e, r, t = {}) {
     return e;
   }
 }
-function Ea(e, r = {}) {
+function Fa(e, r = {}) {
   try {
     const { prettify: t = !0, includeMetadata: n = !0 } = r;
     if (!e || typeof e != "object")
@@ -5238,7 +5258,7 @@ function Ea(e, r = {}) {
     };
   }
 }
-function Ma(e, r = {}) {
+function $a(e, r = {}) {
   try {
     const { strict: t = !1, validateTypes: n = !0 } = r;
     let a;
@@ -5279,8 +5299,8 @@ function Ma(e, r = {}) {
     i ? a.properties = i.map((m, u) => {
       const f = ee(m) ? m : {}, b = { ...f };
       if (!f.name) {
-        const N = `Property at index ${u} missing 'name'`;
-        t ? c.push(N) : (o.push(`${N}, using 'field_${u}'`), b.name = `field_${u}`);
+        const C = `Property at index ${u} missing 'name'`;
+        t ? c.push(C) : (o.push(`${C}, using 'field_${u}'`), b.name = `field_${u}`);
       }
       return f.displayName || (b.displayName = f.name || `Field ${u}`), f.type || (t && n ? c.push(`Property '${f.name || u}' missing 'type'`) : (o.push(`Property '${f.name || u}' missing 'type', using 'string'`), b.type = "string")), f.defaultValue === void 0 && (b.defaultValue = null), f.required === void 0 && (b.required = !1), b;
     }) : t ? c.push("Properties must be an array") : (o.push("Properties not found or invalid, using empty array"), a.properties = []);
@@ -5298,7 +5318,7 @@ function Ma(e, r = {}) {
     };
   }
 }
-function na(e, r, t) {
+function oa(e, r, t) {
   if (e instanceof Date)
     return e;
   if (typeof e == "number") {
@@ -5363,7 +5383,7 @@ function ke(e, r) {
     throw new Error(`Cannot convert ${typeof e} to number`);
   return e;
 }
-function aa(e, r) {
+function ia(e, r) {
   if (typeof e == "boolean")
     return e;
   if (typeof e == "string") {
@@ -5397,55 +5417,55 @@ function nr(e, r, t) {
     }
   });
 }
-function oa() {
+function sa() {
   if (!document.getElementById("reactaform-styles"))
     try {
       const e = document.createElement("style");
-      e.id = "reactaform-styles", e.textContent = st, document.head.appendChild(e);
+      e.id = "reactaform-styles", e.textContent = ct, document.head.appendChild(e);
     } catch {
     }
 }
-typeof document < "u" && oa();
+typeof document < "u" && sa();
 export {
   V as CSS_CLASSES,
-  ya as ReactaForm,
-  Yn as ReactaFormProvider,
-  pn as ReactaFormRenderer,
+  xa as ReactaForm,
+  Zn as ReactaFormProvider,
+  hn as ReactaFormRenderer,
   O as StandardFieldLayout,
-  la as Units,
+  ma as Units,
   U as combineClasses,
-  Zn as createInstanceFromDefinition,
-  Ma as deserializeDefinition,
-  Ia as deserializeInstance,
-  Sa as getAllPlugins,
-  Qt as getButtonHandler,
-  Wr as getComponent,
-  wa as getPlugin,
-  pa as getSupportedLanguages,
-  ma as hasButtonHandler,
-  Ca as hasPlugin,
-  oa as injectReactaFormStyles,
+  ea as createInstanceFromDefinition,
+  $a as deserializeDefinition,
+  Ma as deserializeInstance,
+  Na as getAllPlugins,
+  rn as getButtonHandler,
+  _r as getComponent,
+  Ca as getPlugin,
+  ha as getSupportedLanguages,
+  fa as hasButtonHandler,
+  ka as hasPlugin,
+  sa as injectReactaFormStyles,
   ie as isDarkTheme,
-  fa as listButtonHandlers,
-  ha as loadInstance,
-  ga as loadJsonDefinition,
-  ua as registerButtonHandler,
-  Ur as registerComponent,
-  Na as registerComponents,
-  pt as registerFieldCustomValidationHandler,
-  gt as registerFieldTypeValidationHandler,
-  ft as registerFormValidationHandler,
-  va as registerPlugin,
-  Gr as registerSubmissionHandler,
-  Ea as serializeDefinition,
-  ka as serializeInstance,
-  da as unregisterButtonHandler,
-  xa as unregisterPlugin,
-  ba as upgradeInstanceToLatestDefinition,
-  ct as useDebouncedCallback,
+  ga as listButtonHandlers,
+  ya as loadInstance,
+  ba as loadJsonDefinition,
+  da as registerButtonHandler,
+  Wr as registerComponent,
+  Ia as registerComponents,
+  gt as registerFieldCustomValidationHandler,
+  ht as registerFieldTypeValidationHandler,
+  pt as registerFormValidationHandler,
+  wa as registerPlugin,
+  Jr as registerSubmissionHandler,
+  Fa as serializeDefinition,
+  Ea as serializeInstance,
+  pa as unregisterButtonHandler,
+  Sa as unregisterPlugin,
+  va as upgradeInstanceToLatestDefinition,
+  lt as useDebouncedCallback,
   T as useFieldValidator,
-  H as useReactaFormContext,
+  B as useReactaFormContext,
   _ as useUncontrolledValidatedInput,
-  ca as validateFieldValue,
+  ua as validateFieldValue,
   fr as validateFieldWithCustomHandler
 };