reactaform 1.8.4 → 1.8.6

package/dist/reactaform.es.js

@@ -433,17 +433,17 @@ const Hr = () => /* @__PURE__ */ A(
     ]
   }
 ), Br = ({ content: e, size: r = "medium", animation: t = !0 }) => {
-  const { t: n, theme: a, formStyle: o, fieldStyle: c } = j(), [i, s] = u.useState(!1), [m, l] = u.useState({ x: 0, y: 0 }), [f, d] = u.useState(!1), g = u.useRef(null), w = u.useRef(null), F = u.useRef(null), S = u.useId(), v = fe(a), [k, $] = u.useState(void 0);
+  const { t: n, theme: a, formStyle: o, fieldStyle: c } = j(), [i, s] = u.useState(!1), [m, l] = u.useState({ x: 0, y: 0 }), [f, d] = u.useState(!1), g = u.useRef(null), S = u.useRef(null), I = u.useRef(null), b = u.useId(), v = fe(a), [F, $] = u.useState(void 0);
   u.useLayoutEffect(() => {
     if (!g.current) return;
-    const b = "rgba(255,255,255,0.1)", y = getComputedStyle(g.current).getPropertyValue("--reactaform-primary-bg").trim();
+    const x = "rgba(255,255,255,0.1)", y = getComputedStyle(g.current).getPropertyValue("--reactaform-primary-bg").trim();
     if (y && typeof CSS < "u" && CSS.supports?.("color: color-mix(in srgb, red, blue)")) {
       const C = jr(y) ? "black" : "white";
       $(`color-mix(in srgb, var(--reactaform-primary-bg) 85%, ${C} 15%)`);
     } else
-      $(b);
+      $(x);
   }, []);
-  const N = u.useMemo(() => {
+  const V = u.useMemo(() => {
     const h = {
       icon: {
         display: "inline-flex",
@@ -454,7 +454,7 @@ const Hr = () => /* @__PURE__ */ A(
         fontSize: "0.9em",
         fontWeight: "bold",
         borderRadius: "50%",
-        backgroundColor: k ?? (v ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)"),
+        backgroundColor: F ?? (v ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)"),
         color: `var(--reactaform-text-color, ${v ? "#f0f0f0" : "#333"})`,
         border: `1px solid ${v ? "rgba(255,255,255,0.2)" : "rgba(0,0,0,0.1)"}`,
         cursor: "pointer",
@@ -488,26 +488,26 @@ const Hr = () => /* @__PURE__ */ A(
         opacity: 1,
         pointerEvents: "auto"
       }
-    }, y = (E, I, M) => {
-      const H = E?.[I];
-      return (M && H ? H[M] : void 0) ?? {};
+    }, y = (k, E, N) => {
+      const H = k?.[E];
+      return (N && H ? H[N] : void 0) ?? {};
     };
     return {
       icon: { ...h.icon, ...y(o, "tooltip", "icon"), ...y(c, "tooltip", "icon") },
       text: { ...h.text, ...y(o, "tooltip", "text"), ...y(c, "tooltip", "text") },
       textVisible: h.textVisible
     };
-  }, [v, r, t, o, c, k]);
+  }, [v, r, t, o, c, F]);
   u.useLayoutEffect(() => {
-    if (!i || !g.current || !w.current) {
+    if (!i || !g.current || !S.current) {
       d(!1);
       return;
     }
-    const b = g.current.getBoundingClientRect();
-    F.current = b;
-    const h = w.current.getBoundingClientRect(), y = 8, C = window.innerWidth, E = window.innerHeight, I = -4;
-    let M = b.right + y, P = b.top + b.height / 2 - h.height / 2 + I;
-    M + h.width > C - y && (M = b.left - y - h.width), M = Math.max(y, Math.min(M, C - h.width - y)), P = Math.max(y, Math.min(P, E - h.height - y)), l({ x: M, y: P }), d(!0);
+    const x = g.current.getBoundingClientRect();
+    I.current = x;
+    const h = S.current.getBoundingClientRect(), y = 8, C = window.innerWidth, k = window.innerHeight, E = -4;
+    let N = x.right + y, P = x.top + x.height / 2 - h.height / 2 + E;
+    N + h.width > C - y && (N = x.left - y - h.width), N = Math.max(y, Math.min(N, C - h.width - y)), P = Math.max(y, Math.min(P, k - h.height - y)), l({ x: N, y: P }), d(!0);
     const H = g.current.closest("[data-reactaform-theme]"), Y = document.getElementById("popup-root");
     if (H && Y) {
       const ne = getComputedStyle(H);
@@ -520,18 +520,18 @@ const Hr = () => /* @__PURE__ */ A(
       );
     }
   }, [i]);
-  const x = typeof document < "u" ? document.getElementById("popup-root") : null, V = /* @__PURE__ */ p(
+  const w = typeof document < "u" ? document.getElementById("popup-root") : null, M = /* @__PURE__ */ p(
     "div",
     {
-      ref: w,
-      "data-tooltip-id": S,
+      ref: S,
+      "data-tooltip-id": b,
       style: {
-        ...N.text,
+        ...V.text,
         transform: f ? "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
-        ...f ? N.textVisible : {},
+        ...f ? V.textVisible : {},
         top: m.y,
         left: m.x
       },
@@ -544,16 +544,16 @@ const Hr = () => /* @__PURE__ */ A(
       {
         "data-testid": "tooltip-icon",
         ref: g,
-        "aria-describedby": i ? S : void 0,
+        "aria-describedby": i ? b : void 0,
         onMouseEnter: () => s(!0),
         onMouseLeave: () => s(!1),
         style: {
-          ...N.icon
+          ...V.icon
         },
         children: /* @__PURE__ */ p(Hr, {})
       }
     ),
-    i && (x ? me.createPortal(V, x) : V)
+    i && (w ? me.createPortal(M, w) : M)
   ] });
 }, tr = u.memo(Br), ve = u.memo(({
   field: e,
@@ -927,25 +927,25 @@ const qe = [
     d(i);
   }, [i]);
   const g = u.useCallback(
-    (N) => {
-      const x = he(N.target.value);
-      d(x), l({
-        target: { value: x }
+    (V) => {
+      const w = he(V.target.value);
+      d(w), l({
+        target: { value: w }
       });
     },
     [l]
-  ), w = u.useCallback(
-    (N) => {
-      const x = he(N.target.value);
-      d(x), l({
-        target: { value: x }
+  ), S = u.useCallback(
+    (V) => {
+      const w = he(V.target.value);
+      d(w), l({
+        target: { value: w }
       });
     },
     [l]
-  ), S = u.useMemo(
-    () => new Set(qe.map((N) => N.value)),
+  ), b = u.useMemo(
+    () => new Set(qe.map((V) => V.value)),
     []
-  ).has(f), { r: v, g: k, b: $ } = u.useMemo(
+  ).has(f), { r: v, g: F, b: $ } = u.useMemo(
     () => Qr(f),
     [f]
   );
@@ -964,19 +964,19 @@ const qe = [
           {
             id: e.name,
             value: f,
-            onChange: w,
+            onChange: S,
             className: q(
               R.input,
               R.inputSelect
             ),
             "aria-invalid": !!m,
             children: [
-              qe.map((N) => /* @__PURE__ */ p("option", { value: N.value, children: o(N.label) }, N.value)),
-              !S && /* @__PURE__ */ A("option", { value: f, children: [
+              qe.map((V) => /* @__PURE__ */ p("option", { value: V.value, children: o(V.label) }, V.value)),
+              !b && /* @__PURE__ */ A("option", { value: f, children: [
                 "(",
                 v,
                 ", ",
-                k,
+                F,
                 ", ",
                 $,
                 ")"
@@ -1065,42 +1065,42 @@ const qe = [
   onError: n,
   error: a
 }) => {
-  const { t: o, theme: c, formStyle: i, fieldStyle: s } = j(), m = u.useRef(null), l = u.useRef(n), [f, d] = u.useState(!1), [g, w] = u.useState(null);
+  const { t: o, theme: c, formStyle: i, fieldStyle: s } = j(), m = u.useRef(null), l = u.useRef(n), [f, d] = u.useState(!1), [g, S] = u.useState(null);
   u.useEffect(() => {
     l.current = n;
   }, [n]);
-  const F = O(e, a), [S, v] = u.useState(null), k = u.useRef(null);
+  const I = O(e, a), [b, v] = u.useState(null), F = u.useRef(null);
   u.useEffect(() => {
     const y = String(r ?? "");
-    let C = F(y);
+    let C = I(y);
     if (C && e.options.length > 0) {
-      const E = String(e.options[0].value);
-      t?.(E), C = null;
+      const k = String(e.options[0].value);
+      t?.(k), C = null;
     }
-    C !== k.current && (k.current = C, v(C), l.current?.(C ?? null));
-  }, [r, F, t, e.options]);
+    C !== F.current && (F.current = C, v(C), l.current?.(C ?? null));
+  }, [r, I, t, e.options]);
   const $ = () => {
     if (!m.current) return;
     const y = m.current.getBoundingClientRect();
-    w({ x: y.left, y: y.bottom }), d((C) => !C);
-  }, N = (y) => {
-    const C = F(y);
-    C !== k.current && (k.current = C, v(C), l.current?.(C ?? null)), t?.(y), d(!1);
-  }, x = u.useMemo(() => {
+    S({ x: y.left, y: y.bottom }), d((C) => !C);
+  }, V = (y) => {
+    const C = I(y);
+    C !== F.current && (F.current = C, v(C), l.current?.(C ?? null)), t?.(y), d(!1);
+  }, w = u.useMemo(() => {
     const y = e.options.find((C) => String(C.value) === String(r));
     return y ? o(y.label) : "";
-  }, [e.options, r, o]), V = (y, C, E) => {
+  }, [e.options, r, o]), M = (y, C, k) => {
     if (!C) return {};
-    const M = y?.[C];
-    return (E && M ? M[E] : void 0) ?? {};
-  }, b = u.useMemo(() => ({
+    const N = y?.[C];
+    return (k && N ? N[k] : void 0) ?? {};
+  }, x = u.useMemo(() => ({
     height: "var(--reactaform-input-height, 2.5rem)",
     display: "flex",
     alignItems: "center",
     cursor: "pointer",
     position: "relative",
-    ...V(i, "dropdown", "control"),
-    ...V(s, void 0, "control")
+    ...M(i, "dropdown", "control"),
+    ...M(s, void 0, "control")
   }), [i, s]), h = u.useMemo(() => ({
     position: "absolute",
     right: "0.7em",
@@ -1109,28 +1109,28 @@ const qe = [
     pointerEvents: "none",
     fontSize: "0.8em",
     color: "var(--reactaform-text-muted, #999)",
-    ...V(i, "dropdown", "arrow"),
-    ...V(s, void 0, "arrow")
+    ...M(i, "dropdown", "arrow"),
+    ...M(s, void 0, "arrow")
   }), [i, s]);
   return /* @__PURE__ */ A("div", { children: [
-    /* @__PURE__ */ p(L, { field: e, error: S, children: /* @__PURE__ */ A(
+    /* @__PURE__ */ p(L, { field: e, error: b, children: /* @__PURE__ */ A(
       "div",
       {
         ref: m,
         className: "reactaform-input",
-        style: b,
+        style: x,
         onClick: $,
         tabIndex: 0,
         role: "combobox",
         "aria-haspopup": "listbox",
         "aria-expanded": f,
-        "aria-invalid": !!S,
-        "aria-describedby": S ? `${e.name}-error` : void 0,
+        "aria-invalid": !!b,
+        "aria-describedby": b ? `${e.name}-error` : void 0,
         onKeyDown: (y) => {
           (y.key === "Enter" || y.key === " ") && (y.preventDefault(), $());
         },
         children: [
-          /* @__PURE__ */ p("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: x }),
+          /* @__PURE__ */ p("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: w }),
           /* @__PURE__ */ p("span", { style: h, "aria-hidden": !0, children: "▼" })
         ]
       }
@@ -1141,7 +1141,7 @@ const qe = [
         position: g,
         options: e.options,
         selectedValue: String(r),
-        onSelect: N,
+        onSelect: V,
         onClose: () => d(!1),
         controlRef: m,
         theme: c,
@@ -1177,11 +1177,11 @@ const qe = [
       );
     }
   }, [o]);
-  const w = (h, y, C) => {
+  const S = (h, y, C) => {
     if (!y) return {};
-    const I = h?.[y];
-    return (C && I ? I[C] : void 0) ?? {};
-  }, F = u.useMemo(() => ({
+    const E = h?.[y];
+    return (C && E ? E[C] : void 0) ?? {};
+  }, I = u.useMemo(() => ({
     maxHeight: 200,
     overflowY: "auto",
     background: "var(--reactaform-secondary-bg, #fff)",
@@ -1192,17 +1192,17 @@ const qe = [
     pointerEvents: "auto",
     color: "var(--reactaform-text-color, #000)",
     fontSize: "var(--reactaform-popup-font-size, 0.875rem)",
-    ...w(f, "dropdown", "popup"),
-    ...w(d, void 0, "popup")
-  }), [f, d]), S = u.useMemo(() => ({
+    ...S(f, "dropdown", "popup"),
+    ...S(d, void 0, "popup")
+  }), [f, d]), b = u.useMemo(() => ({
     padding: "6px 8px",
     cursor: "pointer",
     display: "flex",
     alignItems: "center",
     background: "transparent",
     color: "var(--reactaform-text-color, #000)",
-    ...w(f, "dropdown", "option"),
-    ...w(d, void 0, "option")
+    ...S(f, "dropdown", "option"),
+    ...S(d, void 0, "option")
   }), [f, d]);
   u.useEffect(() => {
     const h = (y) => {
@@ -1220,17 +1220,17 @@ const qe = [
     const h = s.current.querySelector(`#opt-${m}`);
     h && requestAnimationFrame(() => h.focus());
   }, [m]);
-  const v = 250, k = 200, [$, N] = u.useState(null), [x, V] = u.useState(null);
+  const v = 250, F = 200, [$, V] = u.useState(null), [w, M] = u.useState(null);
   if (u.useEffect(() => {
     if (typeof window > "u") return;
     const h = () => {
-      let E = e.x, I = e.y, M = v;
+      let k = e.x, E = e.y, N = v;
       const P = o?.current;
       if (P) {
         const H = P.getBoundingClientRect();
-        E = H.left, I = H.bottom, M = Math.max(80, Math.round(H.width));
+        k = H.left, E = H.bottom, N = Math.max(80, Math.round(H.width));
       }
-      E = Math.min(E, window.innerWidth - M), I = Math.min(I, window.innerHeight - k), N({ left: E, top: I }), V(M);
+      k = Math.min(k, window.innerWidth - N), E = Math.min(E, window.innerHeight - F), V({ left: k, top: E }), M(N);
     };
     h(), window.addEventListener("scroll", h, !0), window.addEventListener("resize", h);
     let y = null;
@@ -1239,8 +1239,8 @@ const qe = [
       window.removeEventListener("scroll", h, !0), window.removeEventListener("resize", h), y && C && y.unobserve(C);
     };
   }, [o, e.x, e.y]), typeof window > "u") return null;
-  let b = document.getElementById("popup-root");
-  return b || (b = document.createElement("div"), b.id = "popup-root", document.body.appendChild(b)), me.createPortal(
+  let x = document.getElementById("popup-root");
+  return x || (x = document.createElement("div"), x.id = "popup-root", document.body.appendChild(x)), me.createPortal(
     /* @__PURE__ */ p(
       "div",
       {
@@ -1251,56 +1251,56 @@ const qe = [
           position: "fixed",
           top: $ ? $.top : e.y,
           left: $ ? $.left : e.x,
-          width: x ?? v,
-          ...F
+          width: w ?? v,
+          ...I
         },
         "data-reactaform-theme": c ?? "light",
         children: r.map((h, y) => {
-          const C = String(h.value) === t, E = g ? "var(--reactaform-hover-bg, rgba(255,255,255,0.01))" : "var(--reactaform-hover-bg, #eee)", I = {
-            ...S,
-            background: y === m ? E : S.background,
+          const C = String(h.value) === t, k = g ? "var(--reactaform-hover-bg, rgba(255,255,255,0.01))" : "var(--reactaform-hover-bg, #eee)", E = {
+            ...b,
+            background: y === m ? k : b.background,
             fontWeight: C ? "bold" : "normal"
           };
           return /* @__PURE__ */ p(
             "div",
             {
               id: `opt-${y}`,
-              onMouseDown: (M) => {
-                M.stopPropagation(), n(String(h.value));
+              onMouseDown: (N) => {
+                N.stopPropagation(), n(String(h.value));
               },
-              onKeyDown: (M) => {
+              onKeyDown: (N) => {
                 const P = r.length;
-                switch (M.key) {
+                switch (N.key) {
                   case "ArrowDown":
-                    M.preventDefault(), l((H) => (H + 1) % P);
+                    N.preventDefault(), l((H) => (H + 1) % P);
                     break;
                   case "ArrowUp":
-                    M.preventDefault(), l((H) => (H - 1 + P) % P);
+                    N.preventDefault(), l((H) => (H - 1 + P) % P);
                     break;
                   case "Home":
-                    M.preventDefault(), l(0);
+                    N.preventDefault(), l(0);
                     break;
                   case "End":
-                    M.preventDefault(), l(P - 1);
+                    N.preventDefault(), l(P - 1);
                     break;
                   case "Enter":
                   case " ":
-                    M.preventDefault(), M.stopPropagation(), n(String(h.value));
+                    N.preventDefault(), N.stopPropagation(), n(String(h.value));
                     break;
                   case "Escape":
-                    M.preventDefault(), a(), o?.current?.focus();
+                    N.preventDefault(), a(), o?.current?.focus();
                     break;
                 }
               },
               tabIndex: y === m ? 0 : -1,
               role: "option",
               "aria-selected": C,
-              style: I,
-              onMouseEnter: (M) => {
-                M.currentTarget.style.background = E, l(y);
+              style: E,
+              onMouseEnter: (N) => {
+                N.currentTarget.style.background = k, l(y);
               },
-              onMouseLeave: (M) => {
-                M.currentTarget.style.background = "transparent", l((P) => P === y ? -1 : P);
+              onMouseLeave: (N) => {
+                N.currentTarget.style.background = "transparent", l((P) => P === y ? -1 : P);
               },
               children: i(h.label)
             },
@@ -1309,7 +1309,7 @@ const qe = [
         })
       }
     ),
-    b
+    x
   );
 }, at = ({
   field: e,
@@ -1360,55 +1360,55 @@ const qe = [
   u.useEffect(() => {
     m.current = n;
   }, [n]);
-  const g = (x, V) => V.some(
-    (b) => b.name === x.name && b.size === x.size && b.lastModified === x.lastModified
-  ), w = O(e, a);
+  const g = (w, M) => M.some(
+    (x) => x.name === w.name && x.size === w.size && x.lastModified === w.lastModified
+  ), S = O(e, a);
   u.useEffect(() => {
-    const x = w(r ?? []);
-    t?.(r), x !== l.current && (l.current = x, d(x), m.current?.(x ?? null));
-  }, [r, w]);
-  const F = (x) => {
-    const V = x.target.files;
-    let b = null;
-    if (V && V.length > 0) {
-      const y = Array.from(V);
+    const w = S(r ?? []);
+    t?.(r), w !== l.current && (l.current = w, d(w), m.current?.(w ?? null));
+  }, [r, S]);
+  const I = (w) => {
+    const M = w.target.files;
+    let x = null;
+    if (M && M.length > 0) {
+      const y = Array.from(M);
       if (e.multiple) {
-        const C = Array.isArray(r) ? r : [], E = y.filter((I) => !g(I, C));
-        b = [...C, ...E];
+        const C = Array.isArray(r) ? r : [], k = y.filter((E) => !g(E, C));
+        x = [...C, ...k];
       } else
-        b = y[0];
+        x = y[0];
     }
-    const h = w(b ?? []);
-    h !== l.current && (l.current = h, d(h), m.current?.(h ?? null)), t?.(b), x.target && (x.target.value = "");
-  }, S = (x) => {
-    x.preventDefault(), x.stopPropagation(), i(!1);
-    const V = x.dataTransfer.files;
-    if (V && V.length > 0) {
-      const b = Array.from(V);
+    const h = S(x ?? []);
+    h !== l.current && (l.current = h, d(h), m.current?.(h ?? null)), t?.(x), w.target && (w.target.value = "");
+  }, b = (w) => {
+    w.preventDefault(), w.stopPropagation(), i(!1);
+    const M = w.dataTransfer.files;
+    if (M && M.length > 0) {
+      const x = Array.from(M);
       let h = null;
       if (e.multiple) {
-        const C = Array.isArray(r) ? r : [], E = b.filter((I) => !g(I, C));
-        h = [...C, ...E];
+        const C = Array.isArray(r) ? r : [], k = x.filter((E) => !g(E, C));
+        h = [...C, ...k];
       } else
-        h = b[0];
-      const y = w(h);
+        h = x[0];
+      const y = S(h);
       y !== l.current && (l.current = y, d(y), m.current?.(y ?? null)), t?.(h);
     }
-  }, v = (x) => {
-    x.preventDefault(), x.stopPropagation(), i(!0);
-  }, k = (x) => {
-    x.preventDefault(), x.stopPropagation(), i(!1);
-  }, $ = (x) => {
-    if (Array.isArray(r) && typeof x == "number") {
-      const V = r.filter((y, C) => C !== x), b = V.length > 0 ? V : null, h = w(b ?? []);
-      h !== l.current && (l.current = h, d(h), m.current?.(h ?? null)), t?.(b);
+  }, v = (w) => {
+    w.preventDefault(), w.stopPropagation(), i(!0);
+  }, F = (w) => {
+    w.preventDefault(), w.stopPropagation(), i(!1);
+  }, $ = (w) => {
+    if (Array.isArray(r) && typeof w == "number") {
+      const M = r.filter((y, C) => C !== w), x = M.length > 0 ? M : null, h = S(x ?? []);
+      h !== l.current && (l.current = h, d(h), m.current?.(h ?? null)), t?.(x);
     } else {
-      const V = w([]);
-      V !== l.current && (l.current = V, d(V), m.current?.(V ?? null)), t?.(null);
+      const M = S([]);
+      M !== l.current && (l.current = M, d(M), m.current?.(M ?? null)), t?.(null);
     }
-  }, N = () => {
-    const x = Array.isArray(r) ? r : r ? [r] : [];
-    return x.length === 0 ? null : /* @__PURE__ */ p("div", { style: {
+  }, V = () => {
+    const w = Array.isArray(r) ? r : r ? [r] : [];
+    return w.length === 0 ? null : /* @__PURE__ */ p("div", { style: {
       marginTop: "8px",
       marginLeft: "20px",
       display: "flex",
@@ -1416,7 +1416,7 @@ const qe = [
       gap: "6px",
       maxHeight: "200px",
       overflowY: "auto"
-    }, children: x.map((V, b) => /* @__PURE__ */ A(
+    }, children: w.map((M, x) => /* @__PURE__ */ A(
       "div",
       {
         style: {
@@ -1429,10 +1429,10 @@ const qe = [
             "input",
             {
               type: "text",
-              value: V.name,
+              value: M.name,
               disabled: !0,
               readOnly: !0,
-              title: V.name,
+              title: M.name,
               className: "reactaform-input",
               style: {
                 flex: 1,
@@ -1446,7 +1446,7 @@ const qe = [
             "button",
             {
               type: "button",
-              onClick: () => $(Array.isArray(r) ? b : void 0),
+              onClick: () => $(Array.isArray(r) ? x : void 0),
               "aria-label": o("Remove file"),
               style: {
                 background: "transparent",
@@ -1471,7 +1471,7 @@ const qe = [
           )
         ]
       },
-      `${V.name}-${b}`
+      `${M.name}-${x}`
     )) });
   };
   return /* @__PURE__ */ p(L, { field: e, error: f, children: /* @__PURE__ */ A("div", { style: { width: "100%" }, children: [
@@ -1479,9 +1479,9 @@ const qe = [
       "div",
       {
         className: "reactaform-input",
-        onDrop: S,
+        onDrop: b,
         onDragOver: v,
-        onDragLeave: k,
+        onDragLeave: F,
         style: {
           position: "relative",
           borderStyle: "dashed",
@@ -1504,8 +1504,8 @@ const qe = [
           gap: "8px"
         },
         onClick: () => s.current?.click(),
-        onKeyDown: (x) => {
-          (x.key === "Enter" || x.key === " ") && (x.preventDefault(), s.current?.click());
+        onKeyDown: (w) => {
+          (w.key === "Enter" || w.key === " ") && (w.preventDefault(), s.current?.click());
         },
         role: "button",
         "aria-label": e.multiple ? o("Choose Files or Drag & Drop") : o("Choose File or Drag & Drop"),
@@ -1523,7 +1523,7 @@ const qe = [
               style: {
                 display: "none"
               },
-              onChange: F
+              onChange: I
             }
           ),
           /* @__PURE__ */ p("div", { style: {
@@ -1550,7 +1550,7 @@ const qe = [
         ]
       }
     ),
-    N()
+    V()
   ] }) });
 }, st = ({
   field: e,
@@ -1629,38 +1629,38 @@ const ut = ({ field: e, value: r }) => {
   }, c = typeof r == "string" ? r : "";
   let i = c && c.trim() !== "" ? c : typeof e.defaultValue == "string" ? e.defaultValue : "";
   i && !i.startsWith("/") && (i = `${lt()}${i}`);
-  const s = e.localized?.split(";").map((S) => S.trim()), [m, l] = u.useState(i || ""), f = u.useRef(i || null);
+  const s = e.localized?.split(";").map((b) => b.trim()), [m, l] = u.useState(i || ""), f = u.useRef(i || null);
   if (u.useEffect(() => {
     if (!i) return;
-    const S = i.split("/"), v = S.pop(), k = v.lastIndexOf(".");
-    if (k === -1) return;
-    const $ = v.substring(0, k), N = v.substring(k);
-    let x = null;
-    s?.includes(t) && (x = `${$}_${t}${N}`);
-    const V = new AbortController();
-    if (x) {
-      const b = [...S, x].join("/");
-      fetch(b, { method: "HEAD", signal: V.signal }).then((h) => {
-        const y = h.ok ? b : i;
+    const b = i.split("/"), v = b.pop(), F = v.lastIndexOf(".");
+    if (F === -1) return;
+    const $ = v.substring(0, F), V = v.substring(F);
+    let w = null;
+    s?.includes(t) && (w = `${$}_${t}${V}`);
+    const M = new AbortController();
+    if (w) {
+      const x = [...b, w].join("/");
+      fetch(x, { method: "HEAD", signal: M.signal }).then((h) => {
+        const y = h.ok ? x : i;
         y !== f.current && (f.current = y, l(y));
       }).catch(() => {
         i !== f.current && (f.current = i, l(i));
       });
     } else {
-      const b = i;
-      b !== f.current && (f.current = b, requestAnimationFrame(() => l(b)));
+      const x = i;
+      x !== f.current && (f.current = x, requestAnimationFrame(() => l(x)));
     }
     return () => {
-      V.abort();
+      M.abort();
     };
   }, [i, t, s]), !m) return null;
-  const { width: d, height: g } = e, w = {}, F = {
+  const { width: d, height: g } = e, S = {}, I = {
     borderRadius: "8px",
     objectFit: "contain",
     boxShadow: "0 2px 6px rgba(0,0,0,0.1)",
     margin: "0 0 8px 0"
   };
-  return d && g ? (w.width = d, w.height = g, F.width = `${d}px`, F.height = `${g}px`) : d && !g ? (w.width = d, F.width = `${d}px`, F.height = "auto") : !d && g && (w.height = g, F.width = "auto", F.height = `${g}px`), /* @__PURE__ */ p(L, { field: e, children: /* @__PURE__ */ p(
+  return d && g ? (S.width = d, S.height = g, I.width = `${d}px`, I.height = `${g}px`) : d && !g ? (S.width = d, I.width = `${d}px`, I.height = "auto") : !d && g && (S.height = g, I.width = "auto", I.height = `${g}px`), /* @__PURE__ */ p(L, { field: e, children: /* @__PURE__ */ p(
     "div",
     {
       "data-testid": "image-wrapper",
@@ -1674,8 +1674,8 @@ const ut = ({ field: e, value: r }) => {
         {
           src: m,
           alt: n?.(e.displayName || "Image") || e.displayName || "Image",
-          ...w,
-          style: F
+          ...S,
+          style: I
         }
       )
     }
@@ -1779,28 +1779,28 @@ const ft = u.memo(fr), dt = ({
   u.useEffect(() => {
     o.current = n;
   }, [n]);
-  const { t: c, theme: i, formStyle: s, fieldStyle: m } = j(), l = (E, I, M) => {
-    if (!I) return {};
-    const H = E?.[I];
-    return (M && H ? H[M] : void 0) ?? {};
-  }, f = u.useRef(null), [d, g] = u.useState(!1), [w, F] = u.useState(null), S = u.useMemo(
-    () => e.options.map((E) => ({ value: E.value, label: c(E.label) })),
+  const { t: c, theme: i, formStyle: s, fieldStyle: m } = j(), l = (k, E, N) => {
+    if (!E) return {};
+    const H = k?.[E];
+    return (N && H ? H[N] : void 0) ?? {};
+  }, f = u.useRef(null), [d, g] = u.useState(!1), [S, I] = u.useState(null), b = u.useMemo(
+    () => e.options.map((k) => ({ value: k.value, label: c(k.label) })),
     [e.options, c]
   ), v = u.useMemo(() => {
-    const E = Array.isArray(r) ? r : [], I = new Set(S.map((M) => M.value));
-    return E.filter((M) => I.has(M));
-  }, [r, S]), k = O(e, a), [$, N] = u.useState(null), x = u.useRef(null);
+    const k = Array.isArray(r) ? r : [], E = new Set(b.map((N) => N.value));
+    return k.filter((N) => E.has(N));
+  }, [r, b]), F = O(e, a), [$, V] = u.useState(null), w = u.useRef(null);
   u.useEffect(() => {
-    const E = k(Array.isArray(r) ? r : []);
-    E !== x.current && (x.current = E, N(E), o.current?.(E ?? null));
-  }, [r, k]);
-  const V = () => {
+    const k = F(Array.isArray(r) ? r : []);
+    k !== w.current && (w.current = k, V(k), o.current?.(k ?? null));
+  }, [r, F]);
+  const M = () => {
     if (!f.current) return;
-    const E = f.current.getBoundingClientRect();
-    F({ x: E.left, y: E.bottom }), g((I) => !I);
-  }, b = (E) => {
-    const I = v.includes(E) ? v.filter((P) => P !== E) : [...v, E], M = k(I);
-    M !== x.current && (x.current = M, N(M), o.current?.(M ?? null)), t?.(I);
+    const k = f.current.getBoundingClientRect();
+    I({ x: k.left, y: k.bottom }), g((E) => !E);
+  }, x = (k) => {
+    const E = v.includes(k) ? v.filter((P) => P !== k) : [...v, k], N = F(E);
+    N !== w.current && (w.current = N, V(N), o.current?.(N ?? null)), t?.(E);
   }, h = u.useMemo(
     () => ({
       height: "var(--reactaform-input-height, 2.5rem)",
@@ -1849,14 +1849,14 @@ const ft = u.memo(fr), dt = ({
         ref: f,
         className: "reactaform-multiselection-control reactaform-input",
         style: h,
-        onClick: V,
+        onClick: M,
         role: "button",
         "aria-haspopup": "listbox",
         "aria-expanded": d,
         "aria-invalid": !!$,
         "aria-describedby": $ ? `${e.name}-error` : void 0,
-        onKeyDown: (E) => {
-          (E.key === "Enter" || E.key === " ") && (E.preventDefault(), V());
+        onKeyDown: (k) => {
+          (k.key === "Enter" || k.key === " ") && (k.preventDefault(), M());
         },
         children: [
           /* @__PURE__ */ A(
@@ -1866,7 +1866,7 @@ const ft = u.memo(fr), dt = ({
               children: [
                 v.length,
                 " / ",
-                S.length,
+                b.length,
                 " selected"
               ]
             }
@@ -1876,8 +1876,8 @@ const ft = u.memo(fr), dt = ({
             {
               type: "button",
               "aria-label": "Clear selections",
-              onClick: (E) => {
-                E.stopPropagation(), t?.([]);
+              onClick: (k) => {
+                k.stopPropagation(), t?.([]);
               },
               style: y,
               children: /* @__PURE__ */ p("span", { style: y, "aria-hidden": !0, children: "✖" })
@@ -1887,13 +1887,13 @@ const ft = u.memo(fr), dt = ({
         ]
       }
     ) }) }),
-    d && w && /* @__PURE__ */ p(
+    d && S && /* @__PURE__ */ p(
       gt,
       {
-        position: w,
-        options: S,
+        position: S,
+        options: b,
         selectedValues: v,
-        onToggleOption: b,
+        onToggleOption: x,
         onClose: () => g(!1),
         controlRef: f,
         theme: i
@@ -1912,9 +1912,9 @@ const ft = u.memo(fr), dt = ({
   const i = u.useRef(null), [s, m] = u.useState(-1), { formStyle: l, fieldStyle: f } = j(), d = fe(c ?? "light");
   u.useLayoutEffect(() => {
     if (!o.current) return;
-    const b = o.current.closest("[data-reactaform-theme]"), h = document.getElementById("popup-root");
-    if (b && h) {
-      const y = getComputedStyle(b);
+    const x = o.current.closest("[data-reactaform-theme]"), h = document.getElementById("popup-root");
+    if (x && h) {
+      const y = getComputedStyle(x);
       h.style.setProperty(
         "--reactaform-secondary-bg",
         y.getPropertyValue("--reactaform-secondary-bg")
@@ -1927,11 +1927,11 @@ const ft = u.memo(fr), dt = ({
       );
     }
   }, [o]);
-  const g = (b, h, y) => {
+  const g = (x, h, y) => {
     if (!h) return {};
-    const E = b?.[h];
-    return (y && E ? E[y] : void 0) ?? {};
-  }, w = u.useMemo(
+    const k = x?.[h];
+    return (y && k ? k[y] : void 0) ?? {};
+  }, S = u.useMemo(
     () => ({
       maxHeight: 200,
       overflowY: "auto",
@@ -1947,7 +1947,7 @@ const ft = u.memo(fr), dt = ({
       ...g(f, void 0, "popup")
     }),
     [l, f]
-  ), F = u.useMemo(
+  ), I = u.useMemo(
     () => ({
       padding: "6px 8px",
       cursor: "pointer",
@@ -1961,43 +1961,43 @@ const ft = u.memo(fr), dt = ({
     [l, f]
   );
   u.useEffect(() => {
-    const b = (h) => {
+    const x = (h) => {
       const y = h.target;
       !i.current?.contains(y) && !o.current?.contains(y) && a();
     };
-    return document.addEventListener("mousedown", b), () => document.removeEventListener("mousedown", b);
+    return document.addEventListener("mousedown", x), () => document.removeEventListener("mousedown", x);
   }, [a, o]), u.useEffect(() => {
     i.current && r.length > 0 && requestAnimationFrame(
-      () => m((b) => b === -1 ? 0 : b)
+      () => m((x) => x === -1 ? 0 : x)
     );
   }, [r.length]), u.useEffect(() => {
     if (!i.current || s < 0) return;
-    const b = i.current.querySelector(
+    const x = i.current.querySelector(
       `#multi-opt-${s}`
     );
-    b && requestAnimationFrame(() => b.focus());
+    x && requestAnimationFrame(() => x.focus());
   }, [s]);
-  const S = 250, v = 200, [k, $] = u.useState(null), [N, x] = u.useState(null);
+  const b = 250, v = 200, [F, $] = u.useState(null), [V, w] = u.useState(null);
   if (u.useEffect(() => {
     if (typeof window > "u") return;
-    const b = () => {
-      let C = e.x, E = e.y, I = S;
-      const M = o?.current;
-      if (M) {
-        const P = M.getBoundingClientRect();
-        C = P.left, E = P.bottom, I = Math.max(80, Math.round(P.width));
+    const x = () => {
+      let C = e.x, k = e.y, E = b;
+      const N = o?.current;
+      if (N) {
+        const P = N.getBoundingClientRect();
+        C = P.left, k = P.bottom, E = Math.max(80, Math.round(P.width));
       }
-      C = Math.min(C, window.innerWidth - I), E = Math.min(E, window.innerHeight - v), $({ left: C, top: E }), x(I);
+      C = Math.min(C, window.innerWidth - E), k = Math.min(k, window.innerHeight - v), $({ left: C, top: k }), w(E);
     };
-    b(), window.addEventListener("scroll", b, !0), window.addEventListener("resize", b);
+    x(), window.addEventListener("scroll", x, !0), window.addEventListener("resize", x);
     let h = null;
     const y = o?.current;
-    return typeof ResizeObserver < "u" && y && (h = new ResizeObserver(() => b()), h.observe(y)), () => {
-      window.removeEventListener("scroll", b, !0), window.removeEventListener("resize", b), h && y && h.unobserve(y);
+    return typeof ResizeObserver < "u" && y && (h = new ResizeObserver(() => x()), h.observe(y)), () => {
+      window.removeEventListener("scroll", x, !0), window.removeEventListener("resize", x), h && y && h.unobserve(y);
     };
   }, [o, e.x, e.y]), typeof window > "u") return null;
-  let V = document.getElementById("popup-root");
-  return V || (V = document.createElement("div"), V.id = "popup-root", document.body.appendChild(V)), me.createPortal(
+  let M = document.getElementById("popup-root");
+  return M || (M = document.createElement("div"), M.id = "popup-root", document.body.appendChild(M)), me.createPortal(
     /* @__PURE__ */ p(
       "div",
       {
@@ -2006,58 +2006,58 @@ const ft = u.memo(fr), dt = ({
         "aria-activedescendant": s >= 0 ? `multi-opt-${s}` : void 0,
         style: {
           position: "fixed",
-          top: k ? k.top : e.y,
-          left: k ? k.left : e.x,
-          width: N ?? S,
+          top: F ? F.top : e.y,
+          left: F ? F.left : e.x,
+          width: V ?? b,
           // spread the static popup styles
-          ...w
+          ...S
         },
         "data-reactaform-theme": c ?? "light",
-        children: r.map((b, h) => {
-          const y = t.includes(b.value), C = d ? "var(--reactaform-hover-bg, rgba(255,255,255,0.01))" : "var(--reactaform-hover-bg, #eee)", E = {
-            ...F,
-            background: h === s ? C : F.background
+        children: r.map((x, h) => {
+          const y = t.includes(x.value), C = d ? "var(--reactaform-hover-bg, rgba(255,255,255,0.01))" : "var(--reactaform-hover-bg, #eee)", k = {
+            ...I,
+            background: h === s ? C : I.background
           };
           return /* @__PURE__ */ A(
             "div",
             {
               id: `multi-opt-${h}`,
-              onMouseDown: (I) => {
-                I.stopPropagation(), n(b.value);
+              onMouseDown: (E) => {
+                E.stopPropagation(), n(x.value);
               },
-              onKeyDown: (I) => {
-                const M = r.length;
-                switch (I.key) {
+              onKeyDown: (E) => {
+                const N = r.length;
+                switch (E.key) {
                   case "ArrowDown":
-                    I.preventDefault(), m((P) => (P + 1) % M);
+                    E.preventDefault(), m((P) => (P + 1) % N);
                     break;
                   case "ArrowUp":
-                    I.preventDefault(), m((P) => (P - 1 + M) % M);
+                    E.preventDefault(), m((P) => (P - 1 + N) % N);
                     break;
                   case "Home":
-                    I.preventDefault(), m(0);
+                    E.preventDefault(), m(0);
                     break;
                   case "End":
-                    I.preventDefault(), m(M - 1);
+                    E.preventDefault(), m(N - 1);
                     break;
                   case "Enter":
                   case " ":
-                    I.preventDefault(), I.stopPropagation(), n(b.value);
+                    E.preventDefault(), E.stopPropagation(), n(x.value);
                     break;
                   case "Escape":
-                    I.preventDefault(), a(), o?.current?.focus();
+                    E.preventDefault(), a(), o?.current?.focus();
                     break;
                 }
               },
               tabIndex: h === s ? 0 : -1,
               role: "option",
               "aria-selected": y,
-              style: E,
-              onMouseEnter: (I) => {
-                I.currentTarget.style.background = C, m(h);
+              style: k,
+              onMouseEnter: (E) => {
+                E.currentTarget.style.background = C, m(h);
               },
-              onMouseLeave: (I) => {
-                I.currentTarget.style.background = "transparent", m((M) => M === h ? -1 : M);
+              onMouseLeave: (E) => {
+                E.currentTarget.style.background = "transparent", m((N) => N === h ? -1 : N);
               },
               children: [
                 /* @__PURE__ */ p(
@@ -2076,15 +2076,15 @@ const ft = u.memo(fr), dt = ({
                     }
                   }
                 ),
-                b.label
+                x.label
               ]
             },
-            b.value
+            x.value
           );
         })
       }
     ),
-    V
+    M
   );
 }, ht = ({
   field: e,
@@ -2152,30 +2152,28 @@ const ft = u.memo(fr), dt = ({
   onError: n,
   error: a
 }) => {
-  const { t: o } = j(), c = O(e, a), i = e.layout?.toLowerCase() === "horizontal" ? "row" : "column", s = u.useRef(null), m = u.useRef(n);
+  const { t: o } = j(), c = O(e, a), i = e.layout?.toLowerCase() === "horizontal" ? "row" : "column", s = u.useRef(n);
   u.useEffect(() => {
-    m.current = n;
+    s.current = n;
   }, [n]);
-  const [l, f] = u.useState(null), d = u.useRef(null), g = u.useCallback(
-    (v) => {
-      v !== d.current && (d.current = v, f(v), m.current?.(v));
+  const [m, l] = u.useState(null), f = u.useRef(null), d = u.useCallback(
+    (b) => {
+      b !== f.current && (f.current = b, l(b), s.current?.(b));
     },
     []
   );
   u.useEffect(() => {
-    const v = r != null ? String(r) : "", k = c(v);
-    if (k && e.options.length > 0) {
-      const $ = String(e.options[0].value);
-      t?.($), s.current?.querySelectorAll("input[type=radio]").forEach((N) => {
-        N.checked = N.value === $;
-      });
+    const b = r != null ? String(r) : "", v = c(b);
+    if (v && e.options.length > 0) {
+      const F = String(e.options[0].value);
+      t?.(F);
     }
-    g(k);
-  }, [r, e.options, c, t, g]);
-  const w = (v) => {
-    const k = v.target.value, $ = c(k);
-    g($), t?.(k);
-  }, F = {
+    d(v);
+  }, [r, e.options, c, t, d]);
+  const g = (b) => {
+    const v = b.target.value, F = c(v);
+    d(F), t?.(v);
+  }, S = {
     display: "flex",
     flexDirection: i,
     flexWrap: i === "row" ? "wrap" : "nowrap",
@@ -2184,7 +2182,7 @@ const ft = u.memo(fr), dt = ({
     width: "100%",
     padding: i === "row" ? "8px" : void 0,
     boxSizing: "border-box"
-  }, S = {
+  }, I = {
     display: i === "column" ? "flex" : "inline-flex",
     gap: "8px",
     alignItems: "center",
@@ -2194,31 +2192,34 @@ const ft = u.memo(fr), dt = ({
     width: i === "column" ? "100%" : void 0,
     justifyContent: "flex-start"
   };
-  return /* @__PURE__ */ p(L, { field: e, error: l, children: /* @__PURE__ */ p(
+  return /* @__PURE__ */ p(L, { field: e, error: m, children: /* @__PURE__ */ p(
     "div",
     {
-      ref: s,
       className: R.input,
-      role: "radiogroup",
       "aria-labelledby": `${e.name}-label`,
-      "aria-invalid": !!l,
-      style: F,
-      children: e.options.map((v) => {
-        const k = String(v.value);
+      "aria-invalid": !!m,
+      style: S,
+      children: e.options.map((b) => {
+        const v = String(b.value), F = `${e.name}-${v}`;
         return /* @__PURE__ */ A(
           "label",
           {
             className: q(R.label),
-            style: S,
+            style: I,
+            onMouseDown: ($) => $.preventDefault(),
+            onClick: () => {
+              String(r ?? "") !== v && g({ target: { value: v } });
+            },
             children: [
               /* @__PURE__ */ p(
                 "input",
                 {
+                  id: F,
                   type: "radio",
                   name: e.name,
-                  value: k,
-                  checked: String(r ?? "") === k,
-                  onChange: w,
+                  value: v,
+                  checked: String(r ?? "") === v,
+                  onChange: g,
                   style: { width: "1.1em", height: "1.1em" }
                 }
               ),
@@ -2231,12 +2232,12 @@ const ft = u.memo(fr), dt = ({
                     flex: i === "column" ? 1 : void 0,
                     fontWeight: 400
                   },
-                  children: o(v.label)
+                  children: o(b.label)
                 }
               )
             ]
           },
-          k
+          v
         );
       })
     }
@@ -2257,30 +2258,30 @@ const ft = u.memo(fr), dt = ({
   u.useEffect(() => {
     n?.(g);
   }, [g, n]);
-  const w = u.useCallback(
-    (S) => {
-      const v = Math.min(Math.max(S, 0), i);
+  const S = u.useCallback(
+    (b) => {
+      const v = Math.min(Math.max(b, 0), i);
       c(v), t?.(v);
     },
     [i, c, t]
-  ), F = u.useCallback(
-    (S, v) => {
-      switch (S.key) {
+  ), I = u.useCallback(
+    (b, v) => {
+      switch (b.key) {
         case "Enter":
         case " ":
-          S.preventDefault(), w(v + 1);
+          b.preventDefault(), S(v + 1);
           break;
         case "ArrowRight":
         case "ArrowUp":
-          S.preventDefault(), f.current[Math.min(i - 1, v + 1)]?.focus();
+          b.preventDefault(), f.current[Math.min(i - 1, v + 1)]?.focus();
           break;
         case "ArrowLeft":
         case "ArrowDown":
-          S.preventDefault(), f.current[Math.max(0, v - 1)]?.focus();
+          b.preventDefault(), f.current[Math.max(0, v - 1)]?.focus();
           break;
       }
     },
-    [i, w]
+    [i, S]
   );
   return /* @__PURE__ */ p(L, { field: e, error: g, children: /* @__PURE__ */ p(
     "div",
@@ -2290,22 +2291,22 @@ const ft = u.memo(fr), dt = ({
       "aria-invalid": !!g,
       "aria-describedby": g ? `${e.name}-error` : void 0,
       style: vt,
-      children: Array.from({ length: i }, (S, v) => {
-        const k = v < d, N = m !== null && v <= m || k ? "gold" : "lightgray";
+      children: Array.from({ length: i }, (b, v) => {
+        const F = v < d, V = m !== null && v <= m || F ? "gold" : "lightgray";
         return /* @__PURE__ */ p(
           "span",
           {
-            ref: (x) => f.current[v] = x,
+            ref: (w) => f.current[v] = w,
             role: "radio",
             tabIndex: d > 0 ? v === d - 1 ? 0 : -1 : v === 0 ? 0 : -1,
-            "aria-checked": k,
+            "aria-checked": F,
             "aria-label": `Rating ${v + 1}`,
             title: o(`${e.displayName} ${v + 1}`),
-            onClick: () => w(v + 1),
-            onKeyDown: (x) => F(x, v),
+            onClick: () => S(v + 1),
+            onKeyDown: (w) => I(w, v),
             onMouseEnter: () => l(v),
             onMouseLeave: () => l(null),
-            style: { ...xt, color: N },
+            style: { ...xt, color: V },
             children: s
           },
           v
@@ -2374,8 +2375,8 @@ const ft = u.memo(fr), dt = ({
   }, [l, n]);
   const f = u.useCallback(
     (g) => {
-      const w = g.target.value;
-      m(w), o(w), t?.(w);
+      const S = g.target.value;
+      m(S), o(S), t?.(S);
     },
     [o, t]
   ), d = isNaN(Number(s)) ? String(c) : String(Number(s));
@@ -2431,18 +2432,18 @@ const ft = u.memo(fr), dt = ({
   u.useEffect(() => {
     s === "realTime" && n?.(l);
   }, [l, s, n]);
-  const f = c, d = i, g = (N, x, V) => {
-    if (!x) return {};
-    const b = N?.[x];
-    return (V && b ? b[V] : void 0) ?? {};
-  }, w = u.useMemo(() => ({
+  const f = c, d = i, g = (V, w, M) => {
+    if (!w) return {};
+    const x = V?.[w];
+    return (M && x ? x[M] : void 0) ?? {};
+  }, S = u.useMemo(() => ({
     display: "inline-block",
     position: "relative",
     width: 44,
     height: 24,
     ...g(f, "switch", "label"),
     ...g(d, void 0, "label")
-  }), [f, d]), F = u.useMemo(() => ({
+  }), [f, d]), I = u.useMemo(() => ({
     position: "absolute",
     opacity: 0,
     top: 0,
@@ -2455,7 +2456,7 @@ const ft = u.memo(fr), dt = ({
     // Make hidden input non-interactive to avoid event conflicts
     ...g(f, "switch", "hiddenInput"),
     ...g(d, void 0, "hiddenInput")
-  }), [f, d]), S = u.useMemo(() => ({
+  }), [f, d]), b = u.useMemo(() => ({
     position: "absolute",
     cursor: "pointer",
     top: 0,
@@ -2486,8 +2487,8 @@ const ft = u.memo(fr), dt = ({
     boxShadow: "0 1px 3px rgba(0, 0, 0, 0.3)",
     ...g(f, "switch", "knob"),
     ...g(d, void 0, "knob")
-  }), [f, d]), k = !!r, $ = () => {
-    t?.(!k);
+  }), [f, d]), F = !!r, $ = () => {
+    t?.(!F);
   };
   return /* @__PURE__ */ p(L, { field: e, error: null, rightAlign: !1, children: /* @__PURE__ */ A("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }, children: [
     /* @__PURE__ */ p(
@@ -2499,18 +2500,18 @@ const ft = u.memo(fr), dt = ({
         children: o(e.displayName)
       }
     ),
-    /* @__PURE__ */ A("label", { style: w, children: [
+    /* @__PURE__ */ A("label", { style: S, children: [
       /* @__PURE__ */ p(
         "input",
         {
           id: e.name,
           type: "checkbox",
-          checked: k,
+          checked: F,
           readOnly: !0,
           "aria-label": o(e.displayName),
           "aria-invalid": !1,
           "aria-describedby": void 0,
-          style: F,
+          style: I,
           tabIndex: -1
         }
       ),
@@ -2520,21 +2521,21 @@ const ft = u.memo(fr), dt = ({
           role: "switch",
           "data-testid": "switch",
           tabIndex: 0,
-          "aria-checked": k,
+          "aria-checked": F,
           "aria-invalid": !1,
           "aria-describedby": void 0,
           onClick: $,
-          onKeyDown: (N) => {
-            (N.key === " " || N.key === "Spacebar" || N.key === "Space" || N.key === "Enter") && (N.preventDefault(), $());
+          onKeyDown: (V) => {
+            (V.key === " " || V.key === "Spacebar" || V.key === "Space" || V.key === "Enter") && (V.preventDefault(), $());
           },
-          className: `reactaform-switch ${k ? "active checked on" : ""} `,
-          style: k ? { ...S, backgroundColor: "var(--reactaform-switch-on-bg, #22c55e)", borderColor: "var(--reactaform-switch-on-border, #16a34a)" } : S,
+          className: `reactaform-switch ${F ? "active checked on" : ""} `,
+          style: F ? { ...b, backgroundColor: "var(--reactaform-switch-on-bg, #22c55e)", borderColor: "var(--reactaform-switch-on-border, #16a34a)" } : b,
           children: /* @__PURE__ */ p(
             "span",
             {
               style: {
                 ...v,
-                transform: k ? "translateX(20px)" : void 0
+                transform: F ? "translateX(20px)" : void 0
               }
             }
           )
@@ -2862,42 +2863,42 @@ const jn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   t: c
 }) => {
   const [i, s] = u.useState(!1), [m, l] = u.useState(null), [f, d] = u.useState([]), g = u.useCallback(
-    (S) => {
+    (b) => {
       if (e) return;
       const v = parseFloat(r);
       if (!Number.isFinite(v)) return;
-      const k = S.currentTarget.getBoundingClientRect();
-      l({ x: k.left, y: k.bottom });
+      const F = b.currentTarget.getBoundingClientRect();
+      l({ x: F.left, y: F.bottom });
       const $ = [];
       if (n === "temperature")
-        a.units.forEach((x) => {
-          const V = dr(t, x, v);
-          Number.isFinite(V) && $.push({
-            label: `${V.toFixed(6)} ${c(x)}`,
-            value: V.toString(),
-            unit: x
+        a.units.forEach((w) => {
+          const M = dr(t, w, v);
+          Number.isFinite(M) && $.push({
+            label: `${M.toFixed(6)} ${c(w)}`,
+            value: M.toString(),
+            unit: w
           });
         });
       else {
-        const x = a.factors[t];
-        x !== void 0 && Object.entries(a.factors).forEach(([V, b]) => {
-          const h = v / x * b;
+        const w = a.factors[t];
+        w !== void 0 && Object.entries(a.factors).forEach(([M, x]) => {
+          const h = v / w * x;
           Number.isFinite(h) && $.push({
-            label: `${h.toFixed(6)} ${c(V)}`,
+            label: `${h.toFixed(6)} ${c(M)}`,
             value: h.toString(),
-            unit: V
+            unit: M
           });
         });
       }
       d($), s($.length > 0);
     },
     [e, r, t, n, a, c]
-  ), w = u.useCallback(
-    (S) => {
-      s(!1), l(null), o(S);
+  ), S = u.useCallback(
+    (b) => {
+      s(!1), l(null), o(b);
     },
     [o]
-  ), F = u.useCallback(() => {
+  ), I = u.useCallback(() => {
     s(!1), l(null);
   }, []);
   return /* @__PURE__ */ A(Ne, { children: [
@@ -2930,8 +2931,8 @@ const jn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
       {
         pos: m,
         options: f,
-        onClose: F,
-        onClickOption: w
+        onClose: I,
+        onClickOption: S
       }
     )
   ] });
@@ -2944,45 +2945,45 @@ const Mt = ({ field: e, value: r, onChange: t, onError: n }) => {
   }, [s]), u.useEffect(() => {
     g(m);
   }, [m]);
-  const w = o([l, d]);
+  const S = o([l, d]);
   u.useEffect(() => {
-    n?.(w);
-  }, [w, n]);
-  const F = u.useCallback(
-    (N) => {
-      const x = N.target.value;
-      f(x), o([x, d]), t?.([x, d]);
+    n?.(S);
+  }, [S, n]);
+  const I = u.useCallback(
+    (V) => {
+      const w = V.target.value;
+      f(w), o([w, d]), t?.([w, d]);
     },
     [d, o, t]
-  ), S = u.useCallback(
-    (N) => {
-      const x = N.target.value;
-      g(x), o([l, x]), t?.([l, x]);
+  ), b = u.useCallback(
+    (V) => {
+      const w = V.target.value;
+      g(w), o([l, w]), t?.([l, w]);
     },
     [l, o, t]
   ), v = u.useCallback(
-    (N) => {
-      f(N.value), g(N.unit), t?.([N.value, N.unit]);
+    (V) => {
+      f(V.value), g(V.unit), t?.([V.value, V.unit]);
     },
     [t]
-  ), k = u.useMemo(
-    () => i ? i.units.map((N) => /* @__PURE__ */ p("option", { value: N, children: a(N) }, N)) : [],
+  ), F = u.useMemo(
+    () => i ? i.units.map((V) => /* @__PURE__ */ p("option", { value: V, children: a(V) }, V)) : [],
     [i, a]
   );
   if (!c || !i) return null;
-  const $ = !!w || !l.trim();
-  return /* @__PURE__ */ p(L, { field: e, error: w, children: /* @__PURE__ */ A("div", { style: { display: "flex", alignItems: "center", gap: "var(--reactaform-unit-gap, 8px)", width: "100%" }, children: [
+  const $ = !!S || !l.trim();
+  return /* @__PURE__ */ p(L, { field: e, error: S, children: /* @__PURE__ */ A("div", { style: { display: "flex", alignItems: "center", gap: "var(--reactaform-unit-gap, 8px)", width: "100%" }, children: [
     /* @__PURE__ */ p(
       "input",
       {
         id: e.name,
         type: "text",
         value: l,
-        onChange: F,
+        onChange: I,
         style: { flex: "2 1 0" },
         className: q(R.input, R.textInput),
-        "aria-invalid": !!w,
-        "aria-describedby": w ? `${e.name}-error` : void 0
+        "aria-invalid": !!S,
+        "aria-describedby": S ? `${e.name}-error` : void 0
       }
     ),
     /* @__PURE__ */ p(
@@ -2990,12 +2991,12 @@ const Mt = ({ field: e, value: r, onChange: t, onError: n }) => {
       {
         id: `${e.name}-unit`,
         value: d,
-        onChange: S,
+        onChange: b,
         style: { flex: "1 1 0" },
         className: q(R.input, R.inputSelect),
-        "aria-invalid": !!w,
-        "aria-describedby": w ? `${e.name}-error` : void 0,
-        children: k
+        "aria-invalid": !!S,
+        "aria-describedby": S ? `${e.name}-error` : void 0,
+        children: F
       }
     ),
     /* @__PURE__ */ p(
@@ -3233,7 +3234,7 @@ const xr = (e, r, t, n, a) => {
       /* @__PURE__ */ p("span", { children: s(e) }),
       /* @__PURE__ */ p("span", { children: r ? "▼" : "▶" })
     ] }),
-    r && t.map((w) => xr(w, n, a, o, c))
+    r && t.map((S) => xr(S, n, a, o, c))
   ] });
 });
 wr.displayName = "FieldGroup";
@@ -3241,13 +3242,13 @@ const Lt = (e, r, t, n, a, o, c, i, s, m) => {
   const l = r.slice(0, i).filter((g) => c[g.name]), f = zt(l), d = [];
   return f.groups.forEach((g) => {
     if (g.name) {
-      const w = e[g.name] ?? !0;
+      const S = e[g.name] ?? !0;
       d.push(
         /* @__PURE__ */ p(
           wr,
           {
             groupName: g.name,
-            isOpen: w,
+            isOpen: S,
             fields: g.fields,
             valuesMap: t,
             handleChange: a,
@@ -3260,7 +3261,7 @@ const Lt = (e, r, t, n, a, o, c, i, s, m) => {
         )
       );
     } else
-      g.fields.forEach((w) => d.push(xr(w, t, a, o, m)));
+      g.fields.forEach((S) => d.push(xr(S, t, a, o, m)));
   }), d;
 }, Ot = (e) => {
   const r = {};
@@ -3338,21 +3339,21 @@ async function qt(e, r, t, n, a) {
           if (g === "")
             c[l] = 0;
           else {
-            const w = Number(g);
-            isNaN(w) ? i.push(n("Invalid number format for field {{1}}", m.displayName || l)) : c[l] = w;
+            const S = Number(g);
+            isNaN(S) ? i.push(n("Invalid number format for field {{1}}", m.displayName || l)) : c[l] = S;
           }
         } else if (d === "int-array" || d === "float-array") {
-          const g = String(f).split(",").map((S) => S.trim()).filter(Boolean), w = [];
-          let F = !1;
-          for (const S of g) {
-            const v = Number(S);
+          const g = String(f).split(",").map((b) => b.trim()).filter(Boolean), S = [];
+          let I = !1;
+          for (const b of g) {
+            const v = Number(b);
             if (isNaN(v)) {
-              i.push(n("Invalid number {{1}} in array for field {{2}}", S, m.displayName || l)), F = !0;
+              i.push(n("Invalid number {{1}} in array for field {{2}}", b, m.displayName || l)), I = !0;
               break;
             }
-            w.push(v);
+            S.push(v);
           }
-          F || (c[l] = w);
+          I || (c[l] = S);
         }
       } catch (g) {
         i.push(n("Error processing field {{1}}: {{2}}", m.displayName || l, g instanceof Error ? g.message : String(g)));
@@ -3474,9 +3475,9 @@ const Ut = ({ onClick: e, disabled: r = !1, t }) => {
   const { properties: a, displayName: o } = e, c = j(), { t: i, formStyle: s, language: m } = c, l = {
     ...c,
     definitionName: e?.name ?? c.definitionName
-  }, [f, d] = u.useState("en"), [g, w] = u.useState([]), [F, S] = u.useState({}), [v, k] = u.useState(
+  }, [f, d] = u.useState("en"), [g, S] = u.useState([]), [I, b] = u.useState({}), [v, F] = u.useState(
     {}
-  ), [$, N] = u.useState({}), [x, V] = u.useState({}), [b, h] = u.useState({}), [y, C] = u.useState(null), [E, I] = u.useState(null), [M, P] = u.useState(0), [H, Y] = u.useState(!1), [ne, ae] = u.useState(r.name || ""), G = u.useRef(r), de = u.useRef(!1);
+  ), [$, V] = u.useState({}), [w, M] = u.useState({}), [x, h] = u.useState({}), [y, C] = u.useState(null), [k, E] = u.useState(null), [N, P] = u.useState(0), [H, Y] = u.useState(!1), [ne, ae] = u.useState(r.name || ""), G = u.useRef(r), de = u.useRef(!1);
   u.useEffect(() => {
     const z = Object.fromEntries(
       a.map((D) => [
@@ -3514,34 +3515,34 @@ const Ut = ({ onClick: e, disabled: r = !1, t }) => {
       D.group && !(D.group in K) && (K[D.group] = !0);
     });
     const X = requestAnimationFrame(() => {
-      w(B), S(z), k(U), N(
+      S(B), b(z), F(U), V(
         Tt(B, U, J, z)
-      ), V(K), Y(!0), ae(r.name);
+      ), M(K), Y(!0), ae(r.name);
     });
     return () => cancelAnimationFrame(X);
   }, [a, r, e]), u.useEffect(() => {
-    if (!H || M >= g.length) return;
+    if (!H || N >= g.length) return;
     const z = setTimeout(() => {
       P(
         (B) => Math.min(B + t, g.length)
       );
     }, n);
     return () => clearTimeout(z);
-  }, [H, M, g.length, t, n]);
+  }, [H, N, g.length, t, n]);
   const Vr = u.useCallback(
     (z, B) => {
-      C(null), I(null), k((U) => {
-        const J = { ...U, [z]: B }, K = F[z];
+      C(null), E(null), F((U) => {
+        const J = { ...U, [z]: B }, K = I[z];
         return K && [
           "checkbox",
           "dropdown",
           "multi-select",
           "radio",
           "switch"
-        ].includes(K.type) && N(
+        ].includes(K.type) && V(
           (D) => jt(
             D,
-            F,
+            I,
             J,
             z,
             String(B)
@@ -3549,12 +3550,12 @@ const Ut = ({ onClick: e, disabled: r = !1, t }) => {
         ), J;
       });
     },
-    [F, C, I]
+    [I, C, E]
   );
   u.useEffect(() => {
     let z = 0;
     return z = requestAnimationFrame(() => {
-      m !== f && (d(m || "en"), C(null), I(null));
+      m !== f && (d(m || "en"), C(null), E(null));
     }), () => cancelAnimationFrame(z);
   }, [m, f]), u.useEffect(() => {
     let z = 0;
@@ -3563,7 +3564,7 @@ const Ut = ({ onClick: e, disabled: r = !1, t }) => {
         de.current = !1, G.current = r, ae(r.name || "");
         return;
       }
-      G.current = r, C(null), I(null), ae(r.name || "");
+      G.current = r, C(null), E(null), ae(r.name || "");
     }), () => cancelAnimationFrame(z);
   }, [r, r.name]);
   const $r = u.useCallback((z, B) => {
@@ -3572,7 +3573,7 @@ const Ut = ({ onClick: e, disabled: r = !1, t }) => {
     de.current = !0;
     const z = G.current?.name;
     G.current.name = ne;
-    let B = b;
+    let B = x;
     if (l.fieldValidationMode === "onSubmission") {
       const X = {};
       if (g.forEach((D) => {
@@ -3581,20 +3582,20 @@ const Ut = ({ onClick: e, disabled: r = !1, t }) => {
         const re = mr(l.definitionName, D, ee, i);
         re && (X[D.name] = re);
       }), h(X), B = X, Object.keys(X).length > 0) {
-        C(i("Please fix validation errors before submitting the form.")), I(!1);
+        C(i("Please fix validation errors before submitting the form.")), E(!1);
         return;
       } else
-        C(null), I(null);
+        C(null), E(null);
     }
     const U = await qt(e, G.current, v, i, B), J = typeof U.message == "string" ? U.message : String(U.message), K = Object.values(U.errors ?? {}).join(`
 `);
     C(K ? J + `
-` + K : J), I(U.success), U.success || (G.current.name = z ?? G.current.name, ae(z ?? ""));
+` + K : J), E(U.success), U.success || (G.current.name = z ?? G.current.name, ae(z ?? ""));
   }, Ar = (z) => {
-    V((B) => ({ ...B, [z]: !B[z] }));
+    M((B) => ({ ...B, [z]: !B[z] }));
   }, Dr = u.useMemo(
-    () => l.fieldValidationMode === "realTime" ? Object.values(b).some(Boolean) : !1,
-    [b, l.fieldValidationMode]
+    () => l.fieldValidationMode === "realTime" ? Object.values(x).some(Boolean) : !1,
+    [x, l.fieldValidationMode]
   );
   return /* @__PURE__ */ p(Ie.Provider, { value: l, children: /* @__PURE__ */ A("div", { style: s.container, children: [
     o && /* @__PURE__ */ p("h2", { style: s.titleStyle, children: i(o) }),
@@ -3602,9 +3603,9 @@ const Ut = ({ onClick: e, disabled: r = !1, t }) => {
       kr,
       {
         message: y,
-        success: E,
+        success: k,
         onDismiss: () => {
-          C(null), I(null);
+          C(null), E(null);
         },
         t: i
       }
@@ -3614,31 +3615,31 @@ const Ut = ({ onClick: e, disabled: r = !1, t }) => {
       {
         name: ne,
         onChange: (z) => {
-          ae(z), C(null), I(null);
+          ae(z), C(null), E(null);
         }
       }
     ),
     /* @__PURE__ */ A(Ne, { children: [
       Lt(
-        x,
+        w,
         g,
         v,
         i,
         Vr,
         $r,
         $,
-        M,
+        N,
         Ar,
-        b
+        x
       ),
-      M < g.length && /* @__PURE__ */ p(
+      N < g.length && /* @__PURE__ */ p(
         "div",
         {
           style: {
             fontSize: "0.9em",
             color: "var(--reactaform-text-muted, #666)"
           },
-          children: i(`Loading more fields... (${M}/${g.length})`)
+          children: i(`Loading more fields... (${N}/${g.length})`)
         }
       )
     ] }),
@@ -4236,50 +4237,50 @@ const En = (e) => ({
   const s = r, m = o, l = a, f = n, d = u.useMemo(
     () => t ?? {},
     [t]
-  ), [g, w] = u.useState({}), [F, S] = u.useState({});
+  ), [g, S] = u.useState({}), [I, b] = u.useState({});
   u.useEffect(() => {
-    let b = !0;
+    let x = !0;
     return (async () => {
       if (f === "en") {
-        b && (w({}), S({}));
+        x && (S({}), b({}));
         return;
       }
       try {
         const y = await Kt(f), C = y.success ? y.translations : {};
-        b && w(C);
-        const E = await Gt(f, m), I = E.success ? E.translations : {};
-        b && S(I);
+        x && S(C);
+        const k = await Gt(f, m), E = k.success ? k.translations : {};
+        x && b(E);
       } catch {
-        b && (w({}), S({}));
+        x && (S({}), b({}));
       }
     })(), () => {
-      b = !1;
+      x = !1;
     };
   }, [f, m]);
-  const v = u.useMemo(() => En(d), [d]), k = u.useMemo(() => Nn(d), [d]), $ = u.useMemo(
-    () => Yt(f, g, F),
-    [f, g, F]
-  ), N = u.useCallback(
-    (b, ...h) => $(b, ...h),
+  const v = u.useMemo(() => En(d), [d]), F = u.useMemo(() => Nn(d), [d]), $ = u.useMemo(
+    () => Yt(f, g, I),
+    [f, g, I]
+  ), V = u.useCallback(
+    (x, ...h) => $(x, ...h),
     [$]
-  ), x = u.useMemo(
+  ), w = u.useMemo(
     () => ({
       definitionName: s,
       language: f,
       theme: l,
       formStyle: v,
-      fieldStyle: k,
-      t: N,
+      fieldStyle: F,
+      t: V,
       fieldValidationMode: c
     }),
-    [s, f, l, k, v, N, c]
-  ), V = d?.height ? { height: "100%" } : void 0;
-  return /* @__PURE__ */ p(Ie.Provider, { value: x, children: /* @__PURE__ */ p(
+    [s, f, l, F, v, V, c]
+  ), M = d?.height ? { height: "100%" } : void 0;
+  return /* @__PURE__ */ p(Ie.Provider, { value: w, children: /* @__PURE__ */ p(
     "div",
     {
       "data-reactaform-theme": l,
       className: i,
-      style: V,
+      style: M,
       children: e
     }
   ) });
@@ -4765,22 +4766,22 @@ function Zn(e, r, t = {}) {
         success: !1,
         error: "Instance must be a valid object"
       };
-    const m = [], l = [], f = {}, g = (Fr(r) || Q(r) && Array.isArray(r.properties) ? r.properties : []).filter(Oe), w = new Map(g.map((S) => [S.name, S]));
-    for (const [S, v] of Object.entries(e)) {
-      if (i.includes(S)) {
-        l.push(S);
+    const m = [], l = [], f = {}, g = (Fr(r) || Q(r) && Array.isArray(r.properties) ? r.properties : []).filter(Oe), S = new Map(g.map((b) => [b.name, b]));
+    for (const [b, v] of Object.entries(e)) {
+      if (i.includes(b)) {
+        l.push(b);
         continue;
       }
-      if (s.length > 0 && !s.includes(S)) {
-        l.push(S);
+      if (s.length > 0 && !s.includes(b)) {
+        l.push(b);
         continue;
       }
       if (v === void 0) continue;
-      const k = w.get(S);
+      const F = S.get(b);
       try {
-        f[S] = Rn(v, k, { dateFormat: a, fileHandling: o });
+        f[b] = Rn(v, F, { dateFormat: a, fileHandling: o });
       } catch ($) {
-        m.push(`Error serializing field '${S}': ${String($)}`), f[S] = null;
+        m.push(`Error serializing field '${b}': ${String($)}`), f[b] = null;
       }
     }
     return n && (f._metadata = {
@@ -4890,10 +4891,10 @@ function Qn(e, r, t = {}) {
     let i;
     try {
       i = JSON.parse(e);
-    } catch (F) {
+    } catch (I) {
       return {
         success: !1,
-        error: `Invalid JSON: ${F instanceof Error ? F.message : "Unknown parsing error"}`
+        error: `Invalid JSON: ${I instanceof Error ? I.message : "Unknown parsing error"}`
       };
     }
     if (!i || typeof i != "object")
@@ -4901,29 +4902,29 @@ function Qn(e, r, t = {}) {
         success: !1,
         error: "Parsed data must be an object"
       };
-    const s = [], m = [], l = {}, d = (Fr(r) || Q(r) && Array.isArray(r.properties) ? r.properties : []).filter(Oe), g = new Map(d.map((F) => [F.name, F]));
-    for (const F of d) {
-      const S = F.name, v = i[S];
+    const s = [], m = [], l = {}, d = (Fr(r) || Q(r) && Array.isArray(r.properties) ? r.properties : []).filter(Oe), g = new Map(d.map((I) => [I.name, I]));
+    for (const I of d) {
+      const b = I.name, v = i[b];
       if (v === void 0) {
-        n && F.required && m.push(`Required field '${S}' is missing`);
+        n && I.required && m.push(`Required field '${b}' is missing`);
         continue;
       }
       try {
-        l[S] = An(v, F, { validateTypes: a, dateFormat: c });
-      } catch (k) {
-        const $ = `Error deserializing field '${S}': ${String(k)}`;
-        n ? m.push($) : (s.push($), l[S] = v);
+        l[b] = An(v, I, { validateTypes: a, dateFormat: c });
+      } catch (F) {
+        const $ = `Error deserializing field '${b}': ${String(F)}`;
+        n ? m.push($) : (s.push($), l[b] = v);
       }
     }
     if (o)
-      for (const [F, S] of Object.entries(i))
-        !g.has(F) && F !== "_metadata" && (n && s.push(`Unknown field '${F}' preserved`), l[F] = S);
-    const w = m.length > 0;
+      for (const [I, b] of Object.entries(i))
+        !g.has(I) && I !== "_metadata" && (n && s.push(`Unknown field '${I}' preserved`), l[I] = b);
+    const S = m.length > 0;
     return {
-      success: !w,
+      success: !S,
       data: l,
       warnings: s.length > 0 ? s : void 0,
-      validationErrors: w ? m : void 0
+      validationErrors: S ? m : void 0
     };
   } catch (n) {
     return {
@@ -5039,8 +5040,8 @@ function ra(e, r = {}) {
     s ? a.properties = s.map((l, f) => {
       const d = Q(l) ? l : {}, g = { ...d };
       if (!d.name) {
-        const w = `Property at index ${f} missing 'name'`;
-        t ? c.push(w) : (o.push(`${w}, using 'field_${f}'`), g.name = `field_${f}`);
+        const S = `Property at index ${f} missing 'name'`;
+        t ? c.push(S) : (o.push(`${S}, using 'field_${f}'`), g.name = `field_${f}`);
       }
       return d.displayName || (g.displayName = d.name || `Field ${f}`), d.type || (t && n ? c.push(`Property '${d.name || f}' missing 'type'`) : (o.push(`Property '${d.name || f}' missing 'type', using 'string'`), g.type = "string")), d.defaultValue === void 0 && (g.defaultValue = null), d.required === void 0 && (g.required = !1), g;
     }) : t ? c.push("Properties must be an array") : (o.push("Properties not found or invalid, using empty array"), a.properties = []);