@usefillo/react 0.12.0 → 0.13.0

package/dist/index.js

@@ -2,11 +2,11 @@
 
 // src/FilloForm.tsx
 import {
-  useCallback,
-  useEffect as useEffect8,
+  useCallback as useCallback2,
+  useEffect as useEffect9,
   useId as useId2,
-  useMemo as useMemo5,
-  useRef as useRef8,
+  useMemo as useMemo6,
+  useRef as useRef9,
   useState as useState6,
   useSyncExternalStore as useSyncExternalStore2
 } from "react";
@@ -15,7 +15,6 @@ import {
   createClient,
   formSchemasEqual,
   isBuildTimeDevEnv as isBuildTimeDevEnv2,
-  isField as isField2,
   isFilloError as isFilloError2,
   isLikelyDevEnv,
   needsExplicitSubmit,
@@ -25,7 +24,7 @@ import {
   reachablePageSequence,
   resolveThemeAppearance
 } from "@usefillo/core";
-import { REQUIRED_FIELD_MESSAGE as REQUIRED_FIELD_MESSAGE2, resolveStrings, slotClass as slotClass3 } from "@usefillo/core";
+import { resolveStrings, slotClass as slotClass3 } from "@usefillo/core";
 
 // src/appearance.tsx
 import { createContext, useContext } from "react";
@@ -488,11 +487,176 @@ import {
   pipeBlock,
   radioGroupStep,
   REQUIRED_FIELD_MESSAGE,
+  requiredFieldMessage,
   shouldAutoSubmit,
   slotClass as slotClass2,
   visibleFields
 } from "@usefillo/core";
-import { memo, useEffect as useEffect6, useLayoutEffect as useLayoutEffect2, useMemo as useMemo4, useRef as useRef6, useState as useState5 } from "react";
+import { memo, useEffect as useEffect7, useLayoutEffect as useLayoutEffect2, useMemo as useMemo5, useRef as useRef7, useState as useState5 } from "react";
+
+// src/group.tsx
+import { visibleGroupChildren } from "@usefillo/core";
+import { useCallback, useContext as useContext3, useEffect as useEffect3, useMemo as useMemo3, useRef as useRef3 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var EMPTY_INSTANCE = {};
+var FOCUSABLE_SELECTOR = 'input:not(:disabled), select:not(:disabled), textarea:not(:disabled), button:not(:disabled), [tabindex]:not([tabindex="-1"])';
+function firstFieldControl(card) {
+  const candidates = card.querySelectorAll(FOCUSABLE_SELECTOR);
+  for (const el of candidates) {
+    if (!el.classList.contains("fillo-group-remove")) return el;
+  }
+  return null;
+}
+function materializeInstances(value, count) {
+  const base = Array.isArray(value) ? value : [];
+  const out = base.slice(0, count);
+  while (out.length < count) out.push({});
+  return out;
+}
+function GroupInstance({
+  group,
+  index,
+  count,
+  item,
+  instanceValue,
+  api,
+  atFloor,
+  onPatch,
+  onRemove,
+  cardRef
+}) {
+  const strings = useStrings();
+  const groupId = group.id;
+  const n = index + 1;
+  const label = strings.groupInstanceLabel(item, n, count);
+  const { scopedChildren, data } = useMemo3(() => {
+    const prefix = `${groupId}.${index}.`;
+    const visible = visibleGroupChildren(group, instanceValue);
+    const scoped = [];
+    const scopedData = {};
+    for (const child of visible) {
+      const compoundId = prefix + child.id;
+      scoped.push({ ...child, id: compoundId });
+      scopedData[compoundId] = instanceValue[child.id];
+    }
+    return { scopedChildren: scoped, data: scopedData };
+  }, [group, instanceValue, groupId, index]);
+  const setValue = useCallback(
+    (fieldId, v) => {
+      const prefix = `${groupId}.${index}.`;
+      const childId = fieldId.startsWith(prefix) ? fieldId.slice(prefix.length) : fieldId;
+      onPatch(index, childId, v);
+    },
+    [groupId, index, onPatch]
+  );
+  const childApi = { ...api, data, errors: api.errors, setValue };
+  return /* @__PURE__ */ jsxs2("div", { ref: cardRef, className: "fillo-group-instance", role: "group", "aria-label": label, tabIndex: -1, children: [
+    /* @__PURE__ */ jsxs2("div", { className: "fillo-group-instance-header", children: [
+      /* @__PURE__ */ jsx2("p", { className: "fillo-group-instance-title", children: label }),
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          className: "fillo-group-remove",
+          "aria-label": strings.groupRemoveLabel(item, n),
+          disabled: atFloor,
+          title: atFloor ? `At least ${Math.max(group.minInstances ?? 1, 0)} required` : void 0,
+          onClick: () => onRemove(index),
+          children: "\xD7"
+        }
+      )
+    ] }),
+    scopedChildren.map((child) => /* @__PURE__ */ jsx2(BlockRenderer, { block: child, api: childApi }, child.id))
+  ] });
+}
+function RepeatingGroup({ field, error, setValue, api, ids: providedIds }) {
+  const ids = useFilloFieldIds(field.id, providedIds);
+  const strings = useStrings();
+  const announce = useFilloAnnounce();
+  const group = field;
+  const item = group.itemLabel || group.label;
+  const liveApi = useContext3(FilloContext) ?? api;
+  const value = liveApi.data[field.id];
+  const storedInstances = Array.isArray(value) ? value : void 0;
+  const floor = Math.max(group.minInstances ?? 1, 0);
+  const renderedCount = Math.max(storedInstances?.length ?? 0, floor);
+  const atMax = renderedCount >= group.maxInstances;
+  const atFloor = renderedCount <= floor;
+  const instanceRefs = useRef3([]);
+  const addButtonRef = useRef3(null);
+  const pendingFocus = useRef3(null);
+  useEffect3(() => {
+    const pending = pendingFocus.current;
+    pendingFocus.current = null;
+    if (!pending) return;
+    if (pending.target === "add") {
+      addButtonRef.current?.focus();
+      return;
+    }
+    const card = instanceRefs.current[pending.index];
+    if (!card) return;
+    if (pending.target === "instance-card") {
+      card.focus();
+      return;
+    }
+    (firstFieldControl(card) ?? card).focus();
+  }, [value]);
+  function patchInstance(index, childId, v) {
+    const instances = materializeInstances(value, renderedCount);
+    instances[index] = { ...instances[index] ?? {}, [childId]: v };
+    setValue(instances);
+  }
+  function handleAdd() {
+    if (atMax) return;
+    const instances = materializeInstances(value, renderedCount);
+    instances.push({});
+    const n = instances.length;
+    pendingFocus.current = { target: "instance-control", index: n - 1 };
+    setValue(instances);
+    announce(strings.groupInstanceAdded(item, n, n));
+  }
+  function handleRemove(index) {
+    if (atFloor) return;
+    const instances = materializeInstances(value, renderedCount);
+    instances.splice(index, 1);
+    pendingFocus.current = index > 0 ? { target: "instance-card", index: index - 1 } : { target: "add" };
+    setValue(instances);
+    announce(strings.groupInstanceRemoved(item, instances.length));
+  }
+  return /* @__PURE__ */ jsx2(FieldShell, { field: group, error, ids, children: /* @__PURE__ */ jsxs2("div", { className: "fillo-group", children: [
+    Array.from({ length: renderedCount }, (_, index) => /* @__PURE__ */ jsx2(
+      GroupInstance,
+      {
+        group,
+        index,
+        count: renderedCount,
+        item,
+        instanceValue: storedInstances?.[index] ?? EMPTY_INSTANCE,
+        api: liveApi,
+        atFloor,
+        onPatch: patchInstance,
+        onRemove: handleRemove,
+        cardRef: (el) => {
+          instanceRefs.current[index] = el;
+        }
+      },
+      index
+    )),
+    /* @__PURE__ */ jsx2(
+      "button",
+      {
+        ref: addButtonRef,
+        type: "button",
+        className: "fillo-group-add",
+        disabled: atMax,
+        "aria-disabled": atMax ? true : void 0,
+        title: atMax ? `Maximum ${group.maxInstances} reached` : void 0,
+        onClick: handleAdd,
+        children: group.addLabel || strings.groupAdd
+      }
+    )
+  ] }) });
+}
 
 // src/phone.tsx
 import {
@@ -507,8 +671,8 @@ import {
   positionPhonePopover,
   toE164
 } from "@usefillo/core";
-import { useEffect as useEffect3, useLayoutEffect, useMemo as useMemo3, useRef as useRef3, useState as useState2 } from "react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { useEffect as useEffect4, useLayoutEffect, useMemo as useMemo4, useRef as useRef4, useState as useState2 } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function localeCountry() {
   if (typeof navigator === "undefined") return void 0;
   const tag = navigator.languages?.[0] || navigator.language || "";
@@ -537,13 +701,13 @@ function PhoneField({ field, value, error, setValue, ids: providedIds }) {
   const [country, setCountry] = useState2(
     () => parsePhone(stored).country ?? countryByIso(schema.defaultCountry) ?? PHONE_COUNTRIES[0]
   );
-  const touched = useRef3(false);
-  useEffect3(() => {
+  const touched = useRef4(false);
+  useEffect4(() => {
     if (touched.current || !stored) return;
     const restoredCountry = parsePhone(stored).country;
     if (restoredCountry) setCountry(restoredCountry);
   }, [stored]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (touched.current) return;
     if (parsePhone(stored).country || countryByIso(schema.defaultCountry)) return;
     const guess = countryByTimeZone(browserTimeZone()) ?? countryByIso(localeCountry());
@@ -552,8 +716,8 @@ function PhoneField({ field, value, error, setValue, ids: providedIds }) {
   const [pendingRaw, setPendingRaw] = useState2(null);
   const national = nationalFor(stored, country);
   const display = pendingRaw ?? formatNational(country, national);
-  const inputRef = useRef3(null);
-  const caretDigits = useRef3(null);
+  const inputRef = useRef4(null);
+  const caretDigits = useRef4(null);
   useLayoutEffect(() => {
     const el = inputRef.current;
     if (!el || caretDigits.current == null) return;
@@ -600,15 +764,15 @@ function PhoneField({ field, value, error, setValue, ids: providedIds }) {
     inputRef.current?.focus();
   }
   const describedBy = [field.description ? ids.descriptionId : null, error ? ids.errorId : null].filter(Boolean).join(" ") || void 0;
-  return /* @__PURE__ */ jsxs2("div", { ...slots.wrapperProps(`fillo-field fillo-field--phone${error ? " fillo-field--error" : ""}`), children: [
-    /* @__PURE__ */ jsxs2("label", { className: slots.label, "data-fillo": "label", id: ids.labelId, htmlFor: ids.inputId, children: [
+  return /* @__PURE__ */ jsxs3("div", { ...slots.wrapperProps(`fillo-field fillo-field--phone${error ? " fillo-field--error" : ""}`), children: [
+    /* @__PURE__ */ jsxs3("label", { className: slots.label, "data-fillo": "label", id: ids.labelId, htmlFor: ids.inputId, children: [
       field.label,
-      !field.required && /* @__PURE__ */ jsx2("span", { className: "fillo-optional", children: strings.optional })
+      !field.required && /* @__PURE__ */ jsx3("span", { className: "fillo-optional", children: strings.optional })
     ] }),
-    field.description && /* @__PURE__ */ jsx2("p", { className: slots.description, "data-fillo": "fieldDescription", id: ids.descriptionId, children: field.description }),
-    /* @__PURE__ */ jsxs2("div", { className: "fillo-phone", children: [
-      /* @__PURE__ */ jsx2(CountrySelect, { country, onPick: pickCountry, labelledBy: ids.labelId }),
-      /* @__PURE__ */ jsx2(
+    field.description && /* @__PURE__ */ jsx3("p", { className: slots.description, "data-fillo": "fieldDescription", id: ids.descriptionId, children: field.description }),
+    /* @__PURE__ */ jsxs3("div", { className: "fillo-phone", children: [
+      /* @__PURE__ */ jsx3(CountrySelect, { country, onPick: pickCountry, labelledBy: ids.labelId }),
+      /* @__PURE__ */ jsx3(
         "input",
         {
           ref: inputRef,
@@ -627,7 +791,7 @@ function PhoneField({ field, value, error, setValue, ids: providedIds }) {
         }
       )
     ] }),
-    error && /* @__PURE__ */ jsx2("p", { className: slots.error, "data-fillo": "error", id: ids.errorId, children: error })
+    error && /* @__PURE__ */ jsx3("p", { className: slots.error, "data-fillo": "error", id: ids.errorId, children: error })
   ] });
 }
 function CountrySelect({
@@ -641,13 +805,13 @@ function CountrySelect({
   const [query, setQuery] = useState2("");
   const [active, setActive] = useState2(0);
   const [placement, setPlacement] = useState2("below");
-  const rootRef = useRef3(null);
-  const triggerRef = useRef3(null);
-  const popoverRef = useRef3(null);
-  const searchRef = useRef3(null);
-  const seedRef = useRef3(null);
+  const rootRef = useRef4(null);
+  const triggerRef = useRef4(null);
+  const popoverRef = useRef4(null);
+  const searchRef = useRef4(null);
+  const seedRef = useRef4(null);
   const listId = `${labelledBy}-countries`;
-  const matches = useMemo3(() => {
+  const matches = useMemo4(() => {
     const q = query.trim().toLowerCase();
     if (!q) return PHONE_PICKER_COUNTRIES;
     const qDigits = q.replace(/[^\d]/g, "");
@@ -655,7 +819,7 @@ function CountrySelect({
       (c) => c.name.toLowerCase().includes(q) || c.iso2.toLowerCase() === q || qDigits.length > 0 && c.dialCode.startsWith(qDigits)
     );
   }, [query]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!open) return;
     const seed = seedRef.current ?? "";
     seedRef.current = null;
@@ -664,7 +828,7 @@ function CountrySelect({
     const id = requestAnimationFrame(() => searchRef.current?.focus());
     return () => cancelAnimationFrame(id);
   }, [open, country]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!open) return;
     const onDown = (e) => {
       if (!rootRef.current?.contains(e.target)) setOpen(false);
@@ -683,12 +847,12 @@ function CountrySelect({
       window.removeEventListener("scroll", update, true);
     };
   }, [open, matches.length]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!open) return;
     document.getElementById(`${listId}-opt-${active}`)?.scrollIntoView({ block: "nearest" });
   }, [active, open, listId]);
   const resultsAnnouncement = strings.phoneResultsCount(matches.length);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!open || !query.trim()) return;
     const id = setTimeout(() => announce(resultsAnnouncement), 300);
     return () => clearTimeout(id);
@@ -738,8 +902,8 @@ function CountrySelect({
       if (!rootRef.current?.contains(document.activeElement)) setOpen(false);
     });
   }
-  return /* @__PURE__ */ jsxs2("div", { className: "fillo-phone-country", ref: rootRef, onBlur: onCompositeBlur, children: [
-    /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3("div", { className: "fillo-phone-country", ref: rootRef, onBlur: onCompositeBlur, children: [
+    /* @__PURE__ */ jsxs3(
       "button",
       {
         ref: triggerRef,
@@ -752,17 +916,17 @@ function CountrySelect({
         onClick: () => setOpen((o) => !o),
         onKeyDown: onTriggerKeyDown,
         children: [
-          /* @__PURE__ */ jsx2("span", { className: "fillo-phone-flag-emoji", "aria-hidden": "true", children: flagEmoji(country.iso2) }),
-          /* @__PURE__ */ jsxs2("span", { className: "fillo-phone-dial", children: [
+          /* @__PURE__ */ jsx3("span", { className: "fillo-phone-flag-emoji", "aria-hidden": "true", children: flagEmoji(country.iso2) }),
+          /* @__PURE__ */ jsxs3("span", { className: "fillo-phone-dial", children: [
             "+",
             country.dialCode
           ] }),
-          /* @__PURE__ */ jsx2("span", { className: "fillo-phone-caret", "aria-hidden": "true", children: "\u25BE" })
+          /* @__PURE__ */ jsx3("span", { className: "fillo-phone-caret", "aria-hidden": "true", children: "\u25BE" })
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxs2("div", { ref: popoverRef, className: `fillo-phone-popover fillo-phone-popover--${placement}`, children: [
-      /* @__PURE__ */ jsx2(
+    open && /* @__PURE__ */ jsxs3("div", { ref: popoverRef, className: `fillo-phone-popover fillo-phone-popover--${placement}`, children: [
+      /* @__PURE__ */ jsx3(
         "input",
         {
           ref: searchRef,
@@ -783,8 +947,8 @@ function CountrySelect({
           onKeyDown: onSearchKey
         }
       ),
-      /* @__PURE__ */ jsxs2("ul", { className: "fillo-phone-list", role: "listbox", id: listId, "aria-label": "Country", children: [
-        matches.map((c, i) => /* @__PURE__ */ jsxs2(
+      /* @__PURE__ */ jsxs3("ul", { className: "fillo-phone-list", role: "listbox", id: listId, "aria-label": "Country", children: [
+        matches.map((c, i) => /* @__PURE__ */ jsxs3(
           "li",
           {
             id: `${listId}-opt-${i}`,
@@ -797,9 +961,9 @@ function CountrySelect({
               choose(c);
             },
             children: [
-              /* @__PURE__ */ jsx2("span", { className: "fillo-phone-flag-emoji", "aria-hidden": "true", children: flagEmoji(c.iso2) }),
-              /* @__PURE__ */ jsx2("span", { className: "fillo-phone-option-name", children: c.name }),
-              /* @__PURE__ */ jsxs2("span", { className: "fillo-phone-option-dial", children: [
+              /* @__PURE__ */ jsx3("span", { className: "fillo-phone-flag-emoji", "aria-hidden": "true", children: flagEmoji(c.iso2) }),
+              /* @__PURE__ */ jsx3("span", { className: "fillo-phone-option-name", children: c.name }),
+              /* @__PURE__ */ jsxs3("span", { className: "fillo-phone-option-dial", children: [
                 "+",
                 c.dialCode
               ] })
@@ -807,26 +971,26 @@ function CountrySelect({
           },
           c.iso2
         )),
-        matches.length === 0 && /* @__PURE__ */ jsx2("li", { className: "fillo-phone-empty", role: "option", "aria-disabled": "true", children: "No matches" })
+        matches.length === 0 && /* @__PURE__ */ jsx3("li", { className: "fillo-phone-empty", role: "option", "aria-disabled": "true", children: "No matches" })
       ] })
     ] })
   ] });
 }
 
 // src/signature.tsx
-import { useEffect as useEffect4, useRef as useRef4, useState as useState3 } from "react";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useEffect as useEffect5, useRef as useRef5, useState as useState3 } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function SignatureField({ field, value, error, setValue, ids: providedIds }) {
   const ids = useFilloFieldIds(field.id, providedIds);
   const slots = useFieldSlots(field, error);
   const strings = useStrings();
   const typedInputId = `${ids.inputId}-typed`;
-  const canvasRef = useRef4(null);
-  const typedInputRef = useRef4(null);
-  const drawing = useRef4(false);
+  const canvasRef = useRef5(null);
+  const typedInputRef = useRef5(null);
+  const drawing = useRef5(false);
   const [hasInk, setHasInk] = useState3(Boolean(value));
   const [typedName, setTypedName] = useState3("");
-  useEffect4(() => {
+  useEffect5(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const scale = window.devicePixelRatio || 1;
@@ -841,7 +1005,7 @@ function SignatureField({ field, value, error, setValue, ids: providedIds }) {
     ctx.lineJoin = "round";
     ctx.strokeStyle = getComputedStyle(canvas).color;
   }, []);
-  useEffect4(() => {
+  useEffect5(() => {
     const canvas = canvasRef.current;
     const ctx = canvas?.getContext("2d");
     if (!canvas || !ctx) return;
@@ -922,21 +1086,21 @@ function SignatureField({ field, value, error, setValue, ids: providedIds }) {
     typedInputRef.current?.focus();
   }
   const describedBy = [field.description ? ids.descriptionId : null, error ? ids.errorId : null].filter(Boolean).join(" ") || void 0;
-  return /* @__PURE__ */ jsxs3("div", { ...slots.wrapperProps(`fillo-field fillo-field--signature${error ? " fillo-field--error" : ""}`), children: [
-    /* @__PURE__ */ jsxs3("span", { className: slots.label, "data-fillo": "label", id: ids.labelId, children: [
+  return /* @__PURE__ */ jsxs4("div", { ...slots.wrapperProps(`fillo-field fillo-field--signature${error ? " fillo-field--error" : ""}`), children: [
+    /* @__PURE__ */ jsxs4("span", { className: slots.label, "data-fillo": "label", id: ids.labelId, children: [
       field.label,
-      !field.required && /* @__PURE__ */ jsx3("span", { className: "fillo-optional", children: strings.optional })
+      !field.required && /* @__PURE__ */ jsx4("span", { className: "fillo-optional", children: strings.optional })
     ] }),
-    field.description && /* @__PURE__ */ jsx3("p", { className: slots.description, "data-fillo": "fieldDescription", id: ids.descriptionId, children: field.description }),
-    /* @__PURE__ */ jsxs3(
+    field.description && /* @__PURE__ */ jsx4("p", { className: slots.description, "data-fillo": "fieldDescription", id: ids.descriptionId, children: field.description }),
+    /* @__PURE__ */ jsxs4(
       "div",
       {
         role: "group",
         "aria-labelledby": ids.labelId,
         "aria-describedby": describedBy,
         children: [
-          /* @__PURE__ */ jsxs3("div", { className: slots.control("fillo-signature"), "data-fillo": "control", children: [
-            /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsxs4("div", { className: slots.control("fillo-signature"), "data-fillo": "control", children: [
+            /* @__PURE__ */ jsx4(
               "canvas",
               {
                 ref: canvasRef,
@@ -950,12 +1114,12 @@ function SignatureField({ field, value, error, setValue, ids: providedIds }) {
                 onPointerLeave: end
               }
             ),
-            hasInk && /* @__PURE__ */ jsx3("button", { type: "button", className: "fillo-signature-clear", onClick: clear, children: "Clear" }),
-            !hasInk && /* @__PURE__ */ jsx3("span", { className: "fillo-signature-hint", "aria-hidden": "true", children: "Sign here" })
+            hasInk && /* @__PURE__ */ jsx4("button", { type: "button", className: "fillo-signature-clear", onClick: clear, children: "Clear" }),
+            !hasInk && /* @__PURE__ */ jsx4("span", { className: "fillo-signature-hint", "aria-hidden": "true", children: "Sign here" })
           ] }),
-          /* @__PURE__ */ jsxs3("div", { className: "fillo-signature-type", children: [
-            /* @__PURE__ */ jsx3("label", { className: "fillo-signature-type-label", htmlFor: typedInputId, children: "Or type your full name to sign" }),
-            /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsxs4("div", { className: "fillo-signature-type", children: [
+            /* @__PURE__ */ jsx4("label", { className: "fillo-signature-type-label", htmlFor: typedInputId, children: "Or type your full name to sign" }),
+            /* @__PURE__ */ jsx4(
               "input",
               {
                 id: typedInputId,
@@ -978,13 +1142,13 @@ function SignatureField({ field, value, error, setValue, ids: providedIds }) {
         ]
       }
     ),
-    error && /* @__PURE__ */ jsx3("p", { className: slots.error, "data-fillo": "error", id: ids.errorId, children: error })
+    error && /* @__PURE__ */ jsx4("p", { className: slots.error, "data-fillo": "error", id: ids.errorId, children: error })
   ] });
 }
 
 // src/upload.tsx
-import { useEffect as useEffect5, useRef as useRef5, useState as useState4 } from "react";
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useEffect as useEffect6, useRef as useRef6, useState as useState4 } from "react";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function uploadStatus(inFlight, doneCount, strings) {
   const failed = inFlight.filter((f) => f.error).length;
   const active = inFlight.length - failed;
@@ -1008,6 +1172,76 @@ function uploadFailureMessage(error, strings) {
   }
   return strings.uploadFailed;
 }
+function FileStateIcon({ state }) {
+  if (state === "done") {
+    return /* @__PURE__ */ jsx5("span", { className: "fillo-file-state fillo-file-state--done", "aria-hidden": "true", children: /* @__PURE__ */ jsxs5(
+      "svg",
+      {
+        className: "fillo-file-state-icon",
+        viewBox: "0 0 24 24",
+        width: "22",
+        height: "22",
+        fill: "none",
+        "aria-hidden": "true",
+        focusable: "false",
+        children: [
+          /* @__PURE__ */ jsx5("path", { d: "M3.75 12a8.25 8.25 0 1 0 16.5 0 8.25 8.25 0 1 0-16.5 0" }),
+          /* @__PURE__ */ jsx5("path", { d: "m8.5 12 2.25 2.25 4.75-5" })
+        ]
+      }
+    ) });
+  }
+  if (state === "failed") {
+    return /* @__PURE__ */ jsx5("span", { className: "fillo-file-state fillo-file-state--failed", "aria-hidden": "true", children: /* @__PURE__ */ jsxs5(
+      "svg",
+      {
+        className: "fillo-file-state-icon",
+        viewBox: "0 0 24 24",
+        width: "22",
+        height: "22",
+        fill: "none",
+        "aria-hidden": "true",
+        focusable: "false",
+        children: [
+          /* @__PURE__ */ jsx5("path", { d: "M3.75 12a8.25 8.25 0 1 0 16.5 0 8.25 8.25 0 1 0-16.5 0" }),
+          /* @__PURE__ */ jsx5("path", { d: "M12 7.75v5.5" }),
+          /* @__PURE__ */ jsx5("path", { d: "M12 16.5h.01" })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx5("span", { className: "fillo-file-state fillo-file-state--uploading", "aria-hidden": "true", children: /* @__PURE__ */ jsxs5(
+    "svg",
+    {
+      className: "fillo-file-state-icon",
+      viewBox: "0 0 24 24",
+      width: "22",
+      height: "22",
+      fill: "none",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        /* @__PURE__ */ jsx5("path", { d: "M7.25 3.75h6.5l3 3v13.5h-9.5z" }),
+        /* @__PURE__ */ jsx5("path", { d: "M13.75 3.75v3h3" })
+      ]
+    }
+  ) });
+}
+function CloseIcon() {
+  return /* @__PURE__ */ jsx5(
+    "svg",
+    {
+      className: "fillo-file-action-icon",
+      viewBox: "0 0 24 24",
+      width: "16",
+      height: "16",
+      fill: "none",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: /* @__PURE__ */ jsx5("path", { d: "m7 7 10 10M17 7 7 17" })
+    }
+  );
+}
 function FileUploadField({
   field,
   value,
@@ -1021,15 +1255,15 @@ function FileUploadField({
   const strings = useStrings();
   const chrome = useFilloChrome();
   const schema = field;
-  const inputRef = useRef5(null);
+  const inputRef = useRef6(null);
   const [inFlight, setInFlight] = useState4([]);
   const [dragOver, setDragOver] = useState4(false);
-  const mountedRef = useRef5(true);
-  const controllers = useRef5(/* @__PURE__ */ new Map());
-  const inFlightCount = useRef5(0);
+  const mountedRef = useRef6(true);
+  const controllers = useRef6(/* @__PURE__ */ new Map());
+  const inFlightCount = useRef6(0);
   const setUploading = api.setUploading;
   const fieldId = field.id;
-  useEffect5(() => {
+  useEffect6(() => {
     mountedRef.current = true;
     return () => {
       mountedRef.current = false;
@@ -1038,7 +1272,7 @@ function FileUploadField({
     };
   }, [fieldId, setUploading]);
   const files = Array.isArray(value) ? value : [];
-  const filesRef = useRef5(files);
+  const filesRef = useRef6(files);
   filesRef.current = files;
   const maxFiles = schema.maxFiles ?? 1;
   const configuredMaxMb = schema.maxFileSizeMb ?? 500;
@@ -1115,19 +1349,19 @@ function FileUploadField({
     setValue(next);
   }
   const describedBy = [field.description ? ids.descriptionId : null, error ? ids.errorId : null].filter(Boolean).join(" ") || void 0;
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       ...slots.wrapperProps(
         `fillo-field fillo-field--file_upload${error ? " fillo-field--error" : ""}`
       ),
       children: [
-        /* @__PURE__ */ jsxs4("label", { className: slots.label, "data-fillo": "label", id: ids.labelId, htmlFor: ids.inputId, children: [
+        /* @__PURE__ */ jsxs5("label", { className: slots.label, "data-fillo": "label", id: ids.labelId, htmlFor: ids.inputId, children: [
           field.label,
-          !field.required && /* @__PURE__ */ jsx4("span", { className: "fillo-optional", children: strings.optional })
+          !field.required && /* @__PURE__ */ jsx5("span", { className: "fillo-optional", children: strings.optional })
         ] }),
-        field.description && /* @__PURE__ */ jsx4("p", { className: slots.description, "data-fillo": "fieldDescription", id: ids.descriptionId, children: field.description }),
-        remaining > 0 && /* @__PURE__ */ jsxs4(
+        field.description && /* @__PURE__ */ jsx5("p", { className: slots.description, "data-fillo": "fieldDescription", id: ids.descriptionId, children: field.description }),
+        remaining > 0 && /* @__PURE__ */ jsxs5(
           "div",
           {
             "data-fillo": "control",
@@ -1159,7 +1393,7 @@ function FileUploadField({
               }
             },
             children: [
-              /* @__PURE__ */ jsx4(
+              /* @__PURE__ */ jsx5(
                 "input",
                 {
                   ref: inputRef,
@@ -1172,20 +1406,20 @@ function FileUploadField({
                   onChange: (e) => canUpload && handleFiles(e.target.files)
                 }
               ),
-              canUpload ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
-                /* @__PURE__ */ jsx4("span", { className: "fillo-dropzone-title", children: strings.dropzoneTitle(maxFiles > 1) }),
-                /* @__PURE__ */ jsx4("span", { className: "fillo-dropzone-hint", children: strings.dropzoneHint(maxMb) })
-              ] }) : storageBlocked && chrome?.devChrome ? /* @__PURE__ */ jsxs4("span", { className: "fillo-dropzone-hint", children: [
+              canUpload ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
+                /* @__PURE__ */ jsx5("span", { className: "fillo-dropzone-title", children: strings.dropzoneTitle(maxFiles > 1) }),
+                /* @__PURE__ */ jsx5("span", { className: "fillo-dropzone-hint", children: strings.dropzoneHint(maxMb) })
+              ] }) : storageBlocked && chrome?.devChrome ? /* @__PURE__ */ jsxs5("span", { className: "fillo-dropzone-hint", children: [
                 "Connect file storage to enable uploads",
-                storageUrl && /* @__PURE__ */ jsxs4(Fragment2, { children: [
+                storageUrl && /* @__PURE__ */ jsxs5(Fragment2, { children: [
                   " \u2014 ",
-                  /* @__PURE__ */ jsx4("a", { href: storageUrl, target: "_blank", rel: "noopener noreferrer", children: storageUrl })
+                  /* @__PURE__ */ jsx5("a", { href: storageUrl, target: "_blank", rel: "noopener noreferrer", children: storageUrl })
                 ] })
-              ] }) : /* @__PURE__ */ jsx4("span", { className: "fillo-dropzone-hint", children: renderOnly ? strings.uploadsRenderOnly : storageBlocked ? strings.uploadsUnavailable : strings.uploadsDisabled })
+              ] }) : /* @__PURE__ */ jsx5("span", { className: "fillo-dropzone-hint", children: renderOnly ? strings.uploadsRenderOnly : storageBlocked ? strings.uploadsUnavailable : strings.uploadsDisabled })
             ]
           }
         ),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           "div",
           {
             role: "status",
@@ -1195,101 +1429,102 @@ function FileUploadField({
             children: uploadStatus(inFlight, files.length, strings)
           }
         ),
-        (inFlight.length > 0 || files.length > 0) && /* @__PURE__ */ jsxs4("ul", { className: "fillo-files", children: [
-          files.map((f) => /* @__PURE__ */ jsxs4("li", { className: "fillo-file fillo-file--done", children: [
-            /* @__PURE__ */ jsx4("span", { className: "fillo-file-name", children: f.name }),
-            /* @__PURE__ */ jsx4("span", { className: "fillo-file-meta", children: formatBytes(f.size) }),
-            /* @__PURE__ */ jsx4("span", { className: "fillo-sr-only", children: "Uploaded" }),
-            /* @__PURE__ */ jsx4(
+        (inFlight.length > 0 || files.length > 0) && /* @__PURE__ */ jsxs5("ul", { className: "fillo-files", children: [
+          files.map((f) => /* @__PURE__ */ jsxs5("li", { className: "fillo-file fillo-file--done", children: [
+            /* @__PURE__ */ jsx5(FileStateIcon, { state: "done" }),
+            /* @__PURE__ */ jsxs5("span", { className: "fillo-file-content", children: [
+              /* @__PURE__ */ jsx5("span", { className: "fillo-file-name", children: f.name }),
+              /* @__PURE__ */ jsx5("span", { className: "fillo-file-meta", children: strings.uploadedFile(formatBytes(f.size)) })
+            ] }),
+            /* @__PURE__ */ jsx5("span", { className: "fillo-file-actions", children: /* @__PURE__ */ jsx5(
               "button",
               {
                 type: "button",
                 className: "fillo-file-remove",
-                "aria-label": `Remove ${f.name}`,
+                "aria-label": `${strings.uploadRemove} ${f.name}`,
                 onClick: () => removeFile(f.fileId),
-                children: "\xD7"
+                children: /* @__PURE__ */ jsx5(CloseIcon, {})
               }
-            )
+            ) })
           ] }, f.fileId)),
-          inFlight.map((f) => /* @__PURE__ */ jsxs4(
-            "li",
-            {
-              className: `fillo-file${f.error ? " fillo-file--failed" : ""}`,
-              ...f.error ? {} : {
-                role: "progressbar",
-                "aria-label": `Uploading ${f.name}`,
-                "aria-valuemin": 0,
-                "aria-valuemax": 100,
-                "aria-valuenow": Math.round(f.fraction * 100)
-              },
-              children: [
-                /* @__PURE__ */ jsx4("span", { className: "fillo-file-name", children: f.name }),
-                f.error ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
-                  /* @__PURE__ */ jsxs4("span", { className: "fillo-file-actions", children: [
-                    f.file && !f.tooLarge && remaining > 0 && /* @__PURE__ */ jsx4(
-                      "button",
-                      {
-                        type: "button",
-                        className: "fillo-file-retry",
-                        "aria-label": `${strings.uploadRetry} ${f.name}`,
-                        onClick: () => {
-                          const retryFile = f.file;
-                          if (!retryFile) return;
-                          setInFlight((prev) => prev.filter((x) => x.key !== f.key));
-                          void startUpload(retryFile);
-                        },
-                        children: strings.uploadRetry
-                      }
-                    ),
-                    /* @__PURE__ */ jsx4(
-                      "button",
-                      {
-                        type: "button",
-                        className: "fillo-file-remove",
-                        "aria-label": "Dismiss",
-                        onClick: () => setInFlight((prev) => prev.filter((x) => x.key !== f.key)),
-                        children: "\xD7"
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsx4("span", { className: "fillo-file-error", role: "alert", children: f.error })
-                ] }) : /* @__PURE__ */ jsxs4(Fragment2, { children: [
-                  /* @__PURE__ */ jsxs4("span", { className: "fillo-file-meta", children: [
-                    Math.round(f.fraction * 100),
-                    "% of ",
-                    formatBytes(f.size)
-                  ] }),
-                  /* @__PURE__ */ jsx4(
-                    "button",
-                    {
-                      type: "button",
-                      className: "fillo-file-remove",
-                      "aria-label": `Cancel ${f.name}`,
-                      onClick: () => cancelUpload(f.key),
-                      children: "\xD7"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx4("span", { className: "fillo-progress", "aria-hidden": "true", children: /* @__PURE__ */ jsx4(
+          inFlight.map((f) => /* @__PURE__ */ jsxs5("li", { className: `fillo-file${f.error ? " fillo-file--failed" : ""}`, children: [
+            /* @__PURE__ */ jsx5(FileStateIcon, { state: f.error ? "failed" : "uploading" }),
+            f.error ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
+              /* @__PURE__ */ jsxs5("span", { className: "fillo-file-content", children: [
+                /* @__PURE__ */ jsx5("span", { className: "fillo-file-name", children: f.name }),
+                /* @__PURE__ */ jsx5("span", { className: "fillo-file-error", role: "alert", children: f.error })
+              ] }),
+              /* @__PURE__ */ jsxs5("span", { className: "fillo-file-actions", children: [
+                f.file && !f.tooLarge && remaining > 0 && /* @__PURE__ */ jsx5(
+                  "button",
+                  {
+                    type: "button",
+                    className: "fillo-file-retry",
+                    "aria-label": `${strings.uploadRetry} ${f.name}`,
+                    onClick: () => {
+                      const retryFile = f.file;
+                      if (!retryFile) return;
+                      setInFlight((prev) => prev.filter((x) => x.key !== f.key));
+                      void startUpload(retryFile);
+                    },
+                    children: strings.uploadRetry
+                  }
+                ),
+                /* @__PURE__ */ jsx5(
+                  "button",
+                  {
+                    type: "button",
+                    className: "fillo-file-remove",
+                    "aria-label": `${strings.uploadDismiss} ${f.name}`,
+                    onClick: () => setInFlight((prev) => prev.filter((x) => x.key !== f.key)),
+                    children: /* @__PURE__ */ jsx5(CloseIcon, {})
+                  }
+                )
+              ] })
+            ] }) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
+              /* @__PURE__ */ jsxs5("span", { className: "fillo-file-content", children: [
+                /* @__PURE__ */ jsx5("span", { className: "fillo-file-name", children: f.name }),
+                /* @__PURE__ */ jsx5("span", { className: "fillo-file-meta", children: strings.uploadingFile(Math.round(f.fraction * 100), formatBytes(f.size)) })
+              ] }),
+              /* @__PURE__ */ jsx5("span", { className: "fillo-file-actions", children: /* @__PURE__ */ jsx5(
+                "button",
+                {
+                  type: "button",
+                  className: "fillo-file-remove",
+                  "aria-label": `${strings.uploadCancel} ${f.name}`,
+                  onClick: () => cancelUpload(f.key),
+                  children: /* @__PURE__ */ jsx5(CloseIcon, {})
+                }
+              ) }),
+              /* @__PURE__ */ jsx5(
+                "span",
+                {
+                  className: "fillo-progress",
+                  role: "progressbar",
+                  "aria-label": `Uploading ${f.name}`,
+                  "aria-valuemin": 0,
+                  "aria-valuemax": 100,
+                  "aria-valuenow": Math.round(f.fraction * 100),
+                  children: /* @__PURE__ */ jsx5(
                     "span",
                     {
                       className: "fillo-progress-bar",
                       style: { width: `${f.fraction * 100}%` }
                     }
-                  ) })
-                ] })
-              ]
-            },
-            f.key
-          ))
+                  )
+                }
+              )
+            ] })
+          ] }, f.key))
         ] }),
-        error && /* @__PURE__ */ jsx4("p", { className: slots.error, "data-fillo": "error", id: ids.errorId, children: error })
+        error && /* @__PURE__ */ jsx5("p", { className: slots.error, "data-fillo": "error", id: ids.errorId, children: error })
       ]
     }
   );
 }
 
 // src/fields.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function fieldAria(field, error, ids, opts = {}) {
   const describedBy = [
     field.description ? ids.descriptionId : null,
@@ -1334,7 +1569,7 @@ function FieldShell({
   const descriptionCls = useSlotClass("fillo-description", { slot: "fieldDescription", ...state });
   const errorCls = useSlotClass("fillo-error", { slot: "error", ...state });
   const strings = useStrings();
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       className: fieldCls,
@@ -1344,13 +1579,13 @@ function FieldShell({
       "data-invalid": error ? "" : void 0,
       "data-required": field.required ? "" : void 0,
       children: [
-        /* @__PURE__ */ jsxs5("label", { className: labelCls, "data-fillo": "label", id: ids.labelId, htmlFor: ids.inputId, children: [
+        /* @__PURE__ */ jsxs6("label", { className: labelCls, "data-fillo": "label", id: ids.labelId, htmlFor: ids.inputId, children: [
           field.label,
-          !field.required && /* @__PURE__ */ jsx5("span", { className: "fillo-optional", children: strings.optional })
+          !field.required && !(field.kind === "repeating_group" && (field.minInstances ?? 1) > 0) && /* @__PURE__ */ jsx6("span", { className: "fillo-optional", children: strings.optional })
         ] }),
-        field.description && /* @__PURE__ */ jsx5("p", { className: descriptionCls, "data-fillo": "fieldDescription", id: ids.descriptionId, children: field.description }),
+        field.description && /* @__PURE__ */ jsx6("p", { className: descriptionCls, "data-fillo": "fieldDescription", id: ids.descriptionId, children: field.description }),
         children,
-        error && /* @__PURE__ */ jsx5("p", { className: errorCls, "data-fillo": "error", id: ids.errorId, children: error })
+        error && /* @__PURE__ */ jsx6("p", { className: errorCls, "data-fillo": "error", id: ids.errorId, children: error })
       ]
     }
   );
@@ -1360,7 +1595,7 @@ function TextInput({ field, value, error, setValue, ids: providedIds }) {
   const type = field.kind === "email" ? "email" : field.kind === "url" ? "url" : field.kind === "number" ? "number" : field.kind === "date" ? "date" : "text";
   const autoComplete = field.kind === "email" ? "email" : field.kind === "url" ? "url" : void 0;
   const control = useControl("fillo-input", field, error);
-  return /* @__PURE__ */ jsx5(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsx6(
     "input",
     {
       id: ids.inputId,
@@ -1381,8 +1616,8 @@ function NumberInput({ field, value, error, setValue, api, ids: providedIds }) {
   const ids = useFilloFieldIds(field.id, providedIds);
   const control = useControl("fillo-input", field, error);
   const [draft, setDraft] = useState5(null);
-  const inputRef = useRef6(null);
-  const pendingCaret = useRef6(null);
+  const inputRef = useRef7(null);
+  const pendingCaret = useRef7(null);
   const [, setRevertTick] = useState5(0);
   useLayoutEffect2(() => {
     if (pendingCaret.current === null) return;
@@ -1395,7 +1630,7 @@ function NumberInput({ field, value, error, setValue, api, ids: providedIds }) {
   const locale = localeForNotation(num.notation);
   const hasAffix = Boolean(num.prefix) || Boolean(num.suffix);
   if (!grouped && !hasAffix) {
-    return /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx6(
       TextInput,
       {
         field,
@@ -1410,7 +1645,7 @@ function NumberInput({ field, value, error, setValue, api, ids: providedIds }) {
   const stored = typeof value === "string" || typeof value === "number" ? String(value) : "";
   const n = Number(stored);
   const display = draft !== null ? draft : grouped && stored !== "" && Number.isFinite(n) ? formatGroupedNumber(n, { locale, decimals: num.decimals }) : stored;
-  const input = /* @__PURE__ */ jsx5(
+  const input = /* @__PURE__ */ jsx6(
     "input",
     {
       ref: inputRef,
@@ -1437,16 +1672,16 @@ function NumberInput({ field, value, error, setValue, api, ids: providedIds }) {
       ...fieldAria(field, error, ids)
     }
   );
-  return /* @__PURE__ */ jsx5(FieldShell, { field, error, ids, children: hasAffix ? /* @__PURE__ */ jsxs5("div", { className: "fillo-number", children: [
-    num.prefix && /* @__PURE__ */ jsx5("span", { className: "fillo-number-prefix", children: num.prefix }),
+  return /* @__PURE__ */ jsx6(FieldShell, { field, error, ids, children: hasAffix ? /* @__PURE__ */ jsxs6("div", { className: "fillo-number", children: [
+    num.prefix && /* @__PURE__ */ jsx6("span", { className: "fillo-number-prefix", children: num.prefix }),
     input,
-    num.suffix && /* @__PURE__ */ jsx5("span", { className: "fillo-number-suffix", children: num.suffix })
+    num.suffix && /* @__PURE__ */ jsx6("span", { className: "fillo-number-suffix", children: num.suffix })
   ] }) : input });
 }
 function LongText({ field, value, error, setValue, ids: providedIds }) {
   const ids = useFilloFieldIds(field.id, providedIds);
   const control = useControl("fillo-input fillo-textarea", field, error);
-  return /* @__PURE__ */ jsx5(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsx6(
     "textarea",
     {
       id: ids.inputId,
@@ -1463,7 +1698,7 @@ function LongText({ field, value, error, setValue, ids: providedIds }) {
 function useDisplayOptions(choice) {
   const idsKey = choice.options.map((o) => o.id).join("\0");
   const [order, setOrder] = useState5(null);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!choice.shuffleOptions) return;
     const ids = idsKey === "" ? [] : idsKey.split("\0");
     for (let i = ids.length - 1; i > 0; i--) {
@@ -1483,7 +1718,7 @@ var OPTION_ICON_PATHS = {
 };
 function ChoiceIcon({ icon }) {
   if (!icon) return null;
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "svg",
     {
       className: "fillo-option-icon",
@@ -1494,7 +1729,7 @@ function ChoiceIcon({ icon }) {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx5("path", { d: OPTION_ICON_PATHS[icon] })
+      children: /* @__PURE__ */ jsx6("path", { d: OPTION_ICON_PATHS[icon] })
     }
   );
 }
@@ -1508,7 +1743,7 @@ function SingleChoice({ field, value, error, setValue, ids: providedIds }) {
   const isOtherValue = typeof value === "string" && value !== "" && !choice.options.some((o) => o.id === value);
   const [otherOn, setOtherOn] = useState5(isOtherValue);
   const otherActive = isOtherValue || value === "" && otherOn;
-  return /* @__PURE__ */ jsx5(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsx6(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsxs6(
     "div",
     {
       className: slotClass2("fillo-options", appearance, { slot: "options", kind: field.kind, fieldId: field.id }),
@@ -1517,7 +1752,7 @@ function SingleChoice({ field, value, error, setValue, ids: providedIds }) {
       "aria-labelledby": ids.labelId,
       ...fieldAria(field, error, ids),
       children: [
-        options.map((opt) => /* @__PURE__ */ jsxs5(
+        options.map((opt) => /* @__PURE__ */ jsxs6(
           "label",
           {
             "data-option": opt.id,
@@ -1529,7 +1764,7 @@ function SingleChoice({ field, value, error, setValue, ids: providedIds }) {
               value === opt.id
             ),
             children: [
-              /* @__PURE__ */ jsx5(
+              /* @__PURE__ */ jsx6(
                 "input",
                 {
                   type: "radio",
@@ -1542,11 +1777,11 @@ function SingleChoice({ field, value, error, setValue, ids: providedIds }) {
                   }
                 }
               ),
-              /* @__PURE__ */ jsx5(ChoiceIcon, { icon: opt.icon }),
+              /* @__PURE__ */ jsx6(ChoiceIcon, { icon: opt.icon }),
               opt.icon && value === opt.id && // Icon-mode hides the native input, so its check state is
               // otherwise color-only (forfeits forced-colors' own indicator).
-              /* @__PURE__ */ jsx5("span", { className: "fillo-option-check", "aria-hidden": "true", children: "\u2713" }),
-              /* @__PURE__ */ jsx5("span", { className: slotClass2("fillo-option-label", appearance, { slot: "optionLabel", kind: field.kind, fieldId: field.id }), "data-fillo": "optionLabel", children: opt.label })
+              /* @__PURE__ */ jsx6("span", { className: "fillo-option-check", "aria-hidden": "true", children: "\u2713" }),
+              /* @__PURE__ */ jsx6("span", { className: slotClass2("fillo-option-label", appearance, { slot: "optionLabel", kind: field.kind, fieldId: field.id }), "data-fillo": "optionLabel", children: opt.label })
             ]
           },
           opt.id
@@ -1556,7 +1791,7 @@ function SingleChoice({ field, value, error, setValue, ids: providedIds }) {
         // option row above. The free-text input below is its own labelable
         // descendant, so it handles its own clicks without re-toggling the
         // radio (dom's proven pattern).
-        /* @__PURE__ */ jsxs5(
+        /* @__PURE__ */ jsxs6(
           "label",
           {
             "data-fillo": "option",
@@ -1567,8 +1802,8 @@ function SingleChoice({ field, value, error, setValue, ids: providedIds }) {
               otherActive
             ),
             children: [
-              /* @__PURE__ */ jsxs5("span", { className: "fillo-option-main", children: [
-                /* @__PURE__ */ jsx5(
+              /* @__PURE__ */ jsxs6("span", { className: "fillo-option-main", children: [
+                /* @__PURE__ */ jsx6(
                   "input",
                   {
                     type: "radio",
@@ -1581,9 +1816,9 @@ function SingleChoice({ field, value, error, setValue, ids: providedIds }) {
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx5("span", { className: slotClass2("fillo-option-label", appearance, { slot: "optionLabel", kind: field.kind, fieldId: field.id }), "data-fillo": "optionLabel", children: strings.other })
+                /* @__PURE__ */ jsx6("span", { className: slotClass2("fillo-option-label", appearance, { slot: "optionLabel", kind: field.kind, fieldId: field.id }), "data-fillo": "optionLabel", children: strings.other })
               ] }),
-              otherActive && /* @__PURE__ */ jsx5(
+              otherActive && /* @__PURE__ */ jsx6(
                 "input",
                 {
                   type: "text",
@@ -1615,7 +1850,7 @@ function MultiChoice({ field, value, error, setValue, ids: providedIds }) {
   const toggle = (id) => setValue(selected.includes(id) ? selected.filter((v) => v !== id) : [...selected, id]);
   const appearance = useFilloAppearance();
   const optionCls = (base, optionId, isSelected) => slotClass2(base, appearance, { slot: "option", kind: field.kind, fieldId: field.id, optionId, selected: isSelected });
-  return /* @__PURE__ */ jsx5(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsx6(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsxs6(
     "div",
     {
       className: slotClass2("fillo-options", appearance, { slot: "options", kind: field.kind, fieldId: field.id }),
@@ -1624,7 +1859,7 @@ function MultiChoice({ field, value, error, setValue, ids: providedIds }) {
       "aria-labelledby": ids.labelId,
       ...fieldAria(field, error, ids, { required: false }),
       children: [
-        options.map((opt) => /* @__PURE__ */ jsxs5(
+        options.map((opt) => /* @__PURE__ */ jsxs6(
           "label",
           {
             "data-option": opt.id,
@@ -1636,7 +1871,7 @@ function MultiChoice({ field, value, error, setValue, ids: providedIds }) {
               selected.includes(opt.id)
             ),
             children: [
-              /* @__PURE__ */ jsx5(
+              /* @__PURE__ */ jsx6(
                 "input",
                 {
                   type: "checkbox",
@@ -1645,11 +1880,11 @@ function MultiChoice({ field, value, error, setValue, ids: providedIds }) {
                   onChange: () => toggle(opt.id)
                 }
               ),
-              /* @__PURE__ */ jsx5(ChoiceIcon, { icon: opt.icon }),
+              /* @__PURE__ */ jsx6(ChoiceIcon, { icon: opt.icon }),
               opt.icon && selected.includes(opt.id) && // Icon-mode hides the native input, so its check state is
               // otherwise color-only (forfeits forced-colors' own indicator).
-              /* @__PURE__ */ jsx5("span", { className: "fillo-option-check", "aria-hidden": "true", children: "\u2713" }),
-              /* @__PURE__ */ jsx5("span", { className: slotClass2("fillo-option-label", appearance, { slot: "optionLabel", kind: field.kind, fieldId: field.id }), "data-fillo": "optionLabel", children: opt.label })
+              /* @__PURE__ */ jsx6("span", { className: "fillo-option-check", "aria-hidden": "true", children: "\u2713" }),
+              /* @__PURE__ */ jsx6("span", { className: slotClass2("fillo-option-label", appearance, { slot: "optionLabel", kind: field.kind, fieldId: field.id }), "data-fillo": "optionLabel", children: opt.label })
             ]
           },
           opt.id
@@ -1659,7 +1894,7 @@ function MultiChoice({ field, value, error, setValue, ids: providedIds }) {
         // option row above. The free-text input below is its own labelable
         // descendant, so it handles its own clicks without re-toggling the
         // checkbox (dom's proven pattern).
-        /* @__PURE__ */ jsxs5(
+        /* @__PURE__ */ jsxs6(
           "label",
           {
             "data-fillo": "option",
@@ -1670,8 +1905,8 @@ function MultiChoice({ field, value, error, setValue, ids: providedIds }) {
               otherActive
             ),
             children: [
-              /* @__PURE__ */ jsxs5("span", { className: "fillo-option-main", children: [
-                /* @__PURE__ */ jsx5(
+              /* @__PURE__ */ jsxs6("span", { className: "fillo-option-main", children: [
+                /* @__PURE__ */ jsx6(
                   "input",
                   {
                     type: "checkbox",
@@ -1687,9 +1922,9 @@ function MultiChoice({ field, value, error, setValue, ids: providedIds }) {
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx5("span", { className: slotClass2("fillo-option-label", appearance, { slot: "optionLabel", kind: field.kind, fieldId: field.id }), "data-fillo": "optionLabel", children: strings.other })
+                /* @__PURE__ */ jsx6("span", { className: slotClass2("fillo-option-label", appearance, { slot: "optionLabel", kind: field.kind, fieldId: field.id }), "data-fillo": "optionLabel", children: strings.other })
               ] }),
-              otherActive && /* @__PURE__ */ jsx5(
+              otherActive && /* @__PURE__ */ jsx6(
                 "input",
                 {
                   type: "text",
@@ -1727,9 +1962,9 @@ function Dropdown({ field, value, error, setValue, ids: providedIds }) {
   const [otherOn, setOtherOn] = useState5(isOtherValue);
   const otherActive = isOtherValue || value === "" && otherOn;
   const control = useControl("fillo-input fillo-select", field, error);
-  return /* @__PURE__ */ jsxs5(FieldShell, { field, error, ids, children: [
-    /* @__PURE__ */ jsxs5("div", { className: "fillo-select-wrap", children: [
-      /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(FieldShell, { field, error, ids, children: [
+    /* @__PURE__ */ jsxs6("div", { className: "fillo-select-wrap", children: [
+      /* @__PURE__ */ jsxs6(
         "select",
         {
           id: ids.inputId,
@@ -1746,15 +1981,15 @@ function Dropdown({ field, value, error, setValue, ids: providedIds }) {
             }
           },
           children: [
-            /* @__PURE__ */ jsx5("option", { value: "", children: field.placeholder ?? strings.choosePlaceholder }),
-            options.map((opt) => /* @__PURE__ */ jsx5("option", { value: opt.id, children: opt.label }, opt.id)),
-            choice.allowOther && /* @__PURE__ */ jsx5("option", { value: otherValue, children: `${strings.other}\u2026` })
+            /* @__PURE__ */ jsx6("option", { value: "", children: field.placeholder ?? strings.choosePlaceholder }),
+            options.map((opt) => /* @__PURE__ */ jsx6("option", { value: opt.id, children: opt.label }, opt.id)),
+            choice.allowOther && /* @__PURE__ */ jsx6("option", { value: otherValue, children: `${strings.other}\u2026` })
           ]
         }
       ),
-      /* @__PURE__ */ jsx5("span", { className: "fillo-select-icon", "aria-hidden": "true" })
+      /* @__PURE__ */ jsx6("span", { className: "fillo-select-icon", "aria-hidden": "true" })
     ] }),
-    otherActive && /* @__PURE__ */ jsx5(
+    otherActive && /* @__PURE__ */ jsx6(
       "input",
       {
         type: "text",
@@ -1775,19 +2010,19 @@ function Checkbox({ field, value, error, setValue, ids: providedIds }) {
   const slots = useFieldSlots(field, error);
   const checkbox = field;
   if (checkbox.appearance === "toggle") {
-    return /* @__PURE__ */ jsxs5(
+    return /* @__PURE__ */ jsxs6(
       "div",
       {
         ...slots.wrapperProps(
           `fillo-field fillo-field--checkbox fillo-field--toggle${error ? " fillo-field--error" : ""}`
         ),
         children: [
-          /* @__PURE__ */ jsxs5("label", { className: "fillo-toggle", "data-fillo": "option", "data-checked": value === true ? "" : void 0, children: [
-            /* @__PURE__ */ jsx5("span", { className: "fillo-toggle-copy", children: /* @__PURE__ */ jsxs5("span", { className: slotClass2("fillo-option-label", appearance, { slot: "optionLabel", kind: field.kind, fieldId: field.id }), "data-fillo": "optionLabel", children: [
+          /* @__PURE__ */ jsxs6("label", { className: "fillo-toggle", "data-fillo": "option", "data-checked": value === true ? "" : void 0, children: [
+            /* @__PURE__ */ jsx6("span", { className: "fillo-toggle-copy", children: /* @__PURE__ */ jsxs6("span", { className: slotClass2("fillo-option-label", appearance, { slot: "optionLabel", kind: field.kind, fieldId: field.id }), "data-fillo": "optionLabel", children: [
               field.label,
-              !field.required && /* @__PURE__ */ jsx5("span", { className: "fillo-optional", children: strings.optional })
+              !field.required && /* @__PURE__ */ jsx6("span", { className: "fillo-optional", children: strings.optional })
             ] }) }),
-            /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx6(
               "input",
               {
                 id: ids.inputId,
@@ -1798,23 +2033,23 @@ function Checkbox({ field, value, error, setValue, ids: providedIds }) {
                 ...fieldAria(field, error, ids)
               }
             ),
-            /* @__PURE__ */ jsx5("span", { className: "fillo-toggle-track", "aria-hidden": "true", children: /* @__PURE__ */ jsx5("span", { className: "fillo-toggle-thumb" }) })
+            /* @__PURE__ */ jsx6("span", { className: "fillo-toggle-track", "aria-hidden": "true", children: /* @__PURE__ */ jsx6("span", { className: "fillo-toggle-thumb" }) })
           ] }),
-          field.description && /* @__PURE__ */ jsx5("p", { className: slots.description, "data-fillo": "fieldDescription", id: ids.descriptionId, children: field.description }),
-          error && /* @__PURE__ */ jsx5("p", { className: slots.error, "data-fillo": "error", id: ids.errorId, children: error })
+          field.description && /* @__PURE__ */ jsx6("p", { className: slots.description, "data-fillo": "fieldDescription", id: ids.descriptionId, children: field.description }),
+          error && /* @__PURE__ */ jsx6("p", { className: slots.error, "data-fillo": "error", id: ids.errorId, children: error })
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       ...slots.wrapperProps(
         `fillo-field fillo-field--checkbox${error ? " fillo-field--error" : ""}`
       ),
       children: [
-        /* @__PURE__ */ jsxs5("label", { className: "fillo-option", "data-fillo": "option", "data-checked": value === true ? "" : void 0, children: [
-          /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsxs6("label", { className: "fillo-option", "data-fillo": "option", "data-checked": value === true ? "" : void 0, children: [
+          /* @__PURE__ */ jsx6(
             "input",
             {
               id: ids.inputId,
@@ -1825,13 +2060,13 @@ function Checkbox({ field, value, error, setValue, ids: providedIds }) {
               ...fieldAria(field, error, ids)
             }
           ),
-          /* @__PURE__ */ jsxs5("span", { className: slotClass2("fillo-option-label", appearance, { slot: "optionLabel", kind: field.kind, fieldId: field.id }), "data-fillo": "optionLabel", children: [
+          /* @__PURE__ */ jsxs6("span", { className: slotClass2("fillo-option-label", appearance, { slot: "optionLabel", kind: field.kind, fieldId: field.id }), "data-fillo": "optionLabel", children: [
             field.label,
-            !field.required && /* @__PURE__ */ jsx5("span", { className: "fillo-optional", children: strings.optional })
+            !field.required && /* @__PURE__ */ jsx6("span", { className: "fillo-optional", children: strings.optional })
           ] })
         ] }),
-        field.description && /* @__PURE__ */ jsx5("p", { className: slots.description, "data-fillo": "fieldDescription", id: ids.descriptionId, children: field.description }),
-        error && /* @__PURE__ */ jsx5("p", { className: slots.error, "data-fillo": "error", id: ids.errorId, children: error })
+        field.description && /* @__PURE__ */ jsx6("p", { className: slots.description, "data-fillo": "fieldDescription", id: ids.descriptionId, children: field.description }),
+        error && /* @__PURE__ */ jsx6("p", { className: slots.error, "data-fillo": "error", id: ids.errorId, children: error })
       ]
     }
   );
@@ -1863,7 +2098,7 @@ function Rating({ field, value, error, setValue, ids: providedIds }) {
   const tabbable = rovingIndex(steps, selected);
   const appearance = useFilloAppearance();
   const control = useControl("fillo-rating", field, error);
-  return /* @__PURE__ */ jsx5(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsx6(
     "div",
     {
       id: ids.inputId,
@@ -1872,7 +2107,7 @@ function Rating({ field, value, error, setValue, ids: providedIds }) {
       "aria-labelledby": ids.labelId,
       ...fieldAria(field, error, ids),
       onKeyDown: (e) => radiogroupKeyDown(e, steps, selected, (n) => setValue(n)),
-      children: steps.map((n, i) => /* @__PURE__ */ jsx5(
+      children: steps.map((n, i) => /* @__PURE__ */ jsx6(
         "button",
         {
           type: "button",
@@ -1918,8 +2153,8 @@ function LinearScale({ field, value, error, setValue, ids: providedIds }) {
   ].filter(Boolean).join(" ") || void 0;
   const appearance = useFilloAppearance();
   const control = useControl("fillo-scale", field, error);
-  return /* @__PURE__ */ jsxs5(FieldShell, { field, error, ids, children: [
-    /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsxs6(FieldShell, { field, error, ids, children: [
+    /* @__PURE__ */ jsx6(
       "div",
       {
         id: ids.inputId,
@@ -1930,7 +2165,7 @@ function LinearScale({ field, value, error, setValue, ids: providedIds }) {
         "aria-required": field.required ? true : void 0,
         "aria-describedby": describedBy,
         onKeyDown: (e) => radiogroupKeyDown(e, steps, current, (n) => setValue(n)),
-        children: steps.map((n, i) => /* @__PURE__ */ jsx5(
+        children: steps.map((n, i) => /* @__PURE__ */ jsx6(
           "button",
           {
             type: "button",
@@ -1956,9 +2191,9 @@ function LinearScale({ field, value, error, setValue, ids: providedIds }) {
         ))
       }
     ),
-    hasLabels && /* @__PURE__ */ jsxs5("div", { className: "fillo-scale-labels", children: [
-      /* @__PURE__ */ jsx5("span", { id: minLabelId, children: scale.minLabel }),
-      /* @__PURE__ */ jsx5("span", { id: maxLabelId, children: scale.maxLabel })
+    hasLabels && /* @__PURE__ */ jsxs6("div", { className: "fillo-scale-labels", children: [
+      /* @__PURE__ */ jsx6("span", { id: minLabelId, children: scale.minLabel }),
+      /* @__PURE__ */ jsx6("span", { id: maxLabelId, children: scale.maxLabel })
     ] })
   ] });
 }
@@ -1972,8 +2207,8 @@ function Ranking({ field, value, error, setValue, ids: providedIds }) {
     ...answered.filter((id) => ranking.options.some((o) => o.id === id)),
     ...ranking.options.map((o) => o.id).filter((id) => !answered.includes(id))
   ];
-  const pressedRef = useRef6(null);
-  useEffect6(() => {
+  const pressedRef = useRef7(null);
+  useEffect7(() => {
     const pressed = pressedRef.current;
     pressedRef.current = null;
     if (!pressed || !pressed.disabled) return;
@@ -1993,21 +2228,21 @@ function Ranking({ field, value, error, setValue, ids: providedIds }) {
     const moved = ranking.options.find((o) => o.id === id);
     if (moved) announce(strings.rankingPosition(moved.label, target + 1, order.length));
   }
-  return /* @__PURE__ */ jsx5(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsx6(
     "div",
     {
       id: ids.inputId,
       role: "group",
       "aria-labelledby": ids.labelId,
       ...fieldAria(field, error, ids, { required: false }),
-      children: /* @__PURE__ */ jsx5("ol", { className: "fillo-ranking", children: order.map((id, index) => {
+      children: /* @__PURE__ */ jsx6("ol", { className: "fillo-ranking", children: order.map((id, index) => {
         const option = ranking.options.find((o) => o.id === id);
         if (!option) return null;
-        return /* @__PURE__ */ jsxs5("li", { className: "fillo-ranking-item", children: [
-          /* @__PURE__ */ jsx5("span", { className: "fillo-ranking-index", children: index + 1 }),
-          /* @__PURE__ */ jsx5("span", { className: "fillo-ranking-label", children: option.label }),
-          /* @__PURE__ */ jsxs5("span", { className: "fillo-ranking-controls", children: [
-            /* @__PURE__ */ jsx5(
+        return /* @__PURE__ */ jsxs6("li", { className: "fillo-ranking-item", children: [
+          /* @__PURE__ */ jsx6("span", { className: "fillo-ranking-index", children: index + 1 }),
+          /* @__PURE__ */ jsx6("span", { className: "fillo-ranking-label", children: option.label }),
+          /* @__PURE__ */ jsxs6("span", { className: "fillo-ranking-controls", children: [
+            /* @__PURE__ */ jsx6(
               "button",
               {
                 type: "button",
@@ -2018,7 +2253,7 @@ function Ranking({ field, value, error, setValue, ids: providedIds }) {
                 children: "\u2191"
               }
             ),
-            /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx6(
               "button",
               {
                 type: "button",
@@ -2039,7 +2274,7 @@ function Matrix({ field, value, error, setValue, ids: providedIds }) {
   const ids = useFilloFieldIds(field.id, providedIds);
   const matrix = field;
   const answers = value && typeof value === "object" && !Array.isArray(value) ? value : {};
-  return /* @__PURE__ */ jsx5(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsx6(
     "div",
     {
       id: ids.inputId,
@@ -2047,12 +2282,12 @@ function Matrix({ field, value, error, setValue, ids: providedIds }) {
       role: "group",
       "aria-labelledby": ids.labelId,
       ...fieldAria(field, error, ids, { required: false }),
-      children: /* @__PURE__ */ jsxs5("table", { className: "fillo-matrix", children: [
-        /* @__PURE__ */ jsx5("thead", { children: /* @__PURE__ */ jsxs5("tr", { children: [
-          /* @__PURE__ */ jsx5("td", {}),
-          matrix.columns.map((col) => /* @__PURE__ */ jsx5("th", { scope: "col", children: col.label }, col.id))
+      children: /* @__PURE__ */ jsxs6("table", { className: "fillo-matrix", children: [
+        /* @__PURE__ */ jsx6("thead", { children: /* @__PURE__ */ jsxs6("tr", { children: [
+          /* @__PURE__ */ jsx6("td", {}),
+          matrix.columns.map((col) => /* @__PURE__ */ jsx6("th", { scope: "col", children: col.label }, col.id))
         ] }) }),
-        /* @__PURE__ */ jsx5("tbody", { children: matrix.rows.map((row) => {
+        /* @__PURE__ */ jsx6("tbody", { children: matrix.rows.map((row) => {
           const rowLabelId = `${ids.inputId}-${row.id}`;
           const answered = answers[row.id] !== void 0;
           const rowInvalid = Boolean(error) && field.required && !answered;
@@ -2063,17 +2298,17 @@ function Matrix({ field, value, error, setValue, ids: providedIds }) {
             // radiogroup lives on an inner element that aria-owns the radios
             // scattered across the cells (they can't be DOM-nested inside a
             // single element within a table row).
-            /* @__PURE__ */ jsxs5("tr", { children: [
-              /* @__PURE__ */ jsx5("th", { scope: "row", children: /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsxs6("tr", { children: [
+              /* @__PURE__ */ jsx6("th", { scope: "row", children: /* @__PURE__ */ jsx6(
                 "div",
                 {
                   role: "radiogroup",
                   "aria-labelledby": `${ids.labelId} ${rowLabelId}`,
                   "aria-owns": matrix.columns.map(radioId).join(" "),
-                  children: /* @__PURE__ */ jsx5("span", { id: rowLabelId, children: row.label })
+                  children: /* @__PURE__ */ jsx6("span", { id: rowLabelId, children: row.label })
                 }
               ) }),
-              matrix.columns.map((col) => /* @__PURE__ */ jsx5("td", { "data-label": col.label, children: /* @__PURE__ */ jsx5("label", { className: "fillo-matrix-cell", children: /* @__PURE__ */ jsx5(
+              matrix.columns.map((col) => /* @__PURE__ */ jsx6("td", { "data-label": col.label, children: /* @__PURE__ */ jsx6("label", { className: "fillo-matrix-cell", children: /* @__PURE__ */ jsx6(
                 "input",
                 {
                   id: radioId(col),
@@ -2107,7 +2342,7 @@ function Calculated({ field, value, ids: providedIds }) {
   const labelCls = useSlotClass("fillo-label", { slot: "label", ...state });
   const descriptionCls = useSlotClass("fillo-description", { slot: "fieldDescription", ...state });
   const answered = value !== void 0 && value !== null && value !== "";
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       className: rootCls,
@@ -2115,9 +2350,9 @@ function Calculated({ field, value, ids: providedIds }) {
       "data-field": field.id,
       "data-kind": field.kind,
       children: [
-        /* @__PURE__ */ jsx5("label", { className: labelCls, "data-fillo": "label", id: ids.labelId, htmlFor: ids.inputId, children: field.label }),
-        field.description && /* @__PURE__ */ jsx5("p", { className: descriptionCls, "data-fillo": "fieldDescription", id: ids.descriptionId, children: field.description }),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6("label", { className: labelCls, "data-fillo": "label", id: ids.labelId, htmlFor: ids.inputId, children: field.label }),
+        field.description && /* @__PURE__ */ jsx6("p", { className: descriptionCls, "data-fillo": "fieldDescription", id: ids.descriptionId, children: field.description }),
+        /* @__PURE__ */ jsx6(
           "output",
           {
             id: ids.inputId,
@@ -2149,16 +2384,17 @@ var DEFAULT_COMPONENTS = {
   signature: SignatureField,
   file_upload: FileUploadField,
   hidden: Hidden,
-  calculated: Calculated
+  calculated: Calculated,
+  repeating_group: RepeatingGroup
 };
 function ContentRenderer({ block }) {
   switch (block.kind) {
     case "heading":
-      return /* @__PURE__ */ jsx5("h3", { className: "fillo-heading", children: block.text });
+      return /* @__PURE__ */ jsx6("h3", { className: "fillo-heading", children: block.text });
     case "paragraph":
-      return /* @__PURE__ */ jsx5("p", { className: "fillo-paragraph", children: block.text });
+      return /* @__PURE__ */ jsx6("p", { className: "fillo-paragraph", children: block.text });
     case "divider":
-      return /* @__PURE__ */ jsx5("hr", { className: "fillo-divider" });
+      return /* @__PURE__ */ jsx6("hr", { className: "fillo-divider" });
   }
 }
 function blockHasPiping(block) {
@@ -2197,7 +2433,7 @@ function BlockRendererInner({ block, api, components, customComponents }) {
   block = pipeBlock(block, api.data, api.form);
   const ids = useFilloFieldIds(block.id);
   const strings = useStrings();
-  if (!isField(block)) return /* @__PURE__ */ jsx5(ContentRenderer, { block });
+  if (!isField(block)) return /* @__PURE__ */ jsx6(ContentRenderer, { block });
   let Component;
   if (block.kind === "custom") {
     Component = customComponents?.[block.component] ?? components?.custom;
@@ -2214,8 +2450,8 @@ function BlockRendererInner({ block, api, components, customComponents }) {
     Component = components?.[block.kind] ?? DEFAULT_COMPONENTS[block.kind];
   }
   const rawError = api.errors[block.id];
-  const error = rawError === REQUIRED_FIELD_MESSAGE ? strings.required : rawError;
-  return /* @__PURE__ */ jsx5(
+  const error = rawError === REQUIRED_FIELD_MESSAGE ? requiredFieldMessage(block, strings) : rawError;
+  return /* @__PURE__ */ jsx6(
     Component,
     {
       field: block,
@@ -2245,14 +2481,14 @@ function FormField({
   customComponents
 }) {
   const api = useFillo();
-  const visibleIds = useMemo4(
+  const visibleIds = useMemo5(
     () => new Set(visibleFields(api.form, api.data).map((f) => f.id)),
     [api.form, api.data]
   );
   const block = api.form.pages.flatMap((p) => p.blocks).find((b) => b.id === id);
   if (!block) return null;
   if (isField(block) && !visibleIds.has(block.id)) return null;
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     BlockRenderer,
     {
       block,
@@ -2264,8 +2500,8 @@ function FormField({
 }
 
 // src/turnstile.tsx
-import { useEffect as useEffect7, useRef as useRef7 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { useEffect as useEffect8, useRef as useRef8 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var SCRIPT_SRC = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
 var SCRIPT_ID = "fillo-turnstile-script";
 var scriptPromise = null;
@@ -2323,15 +2559,15 @@ function TurnstileWidget({
   registerReset,
   className
 }) {
-  const containerRef = useRef7(null);
-  const widgetIdRef = useRef7(null);
-  const onTokenRef = useRef7(onToken);
+  const containerRef = useRef8(null);
+  const widgetIdRef = useRef8(null);
+  const onTokenRef = useRef8(onToken);
   onTokenRef.current = onToken;
-  const onErrorRef = useRef7(onError);
+  const onErrorRef = useRef8(onError);
   onErrorRef.current = onError;
-  const registerResetRef = useRef7(registerReset);
+  const registerResetRef = useRef8(registerReset);
   registerResetRef.current = registerReset;
-  useEffect7(() => {
+  useEffect8(() => {
     let cancelled = false;
     loadTurnstileScript().then(() => {
       if (cancelled || !containerRef.current) return;
@@ -2372,7 +2608,7 @@ function TurnstileWidget({
       onTokenRef.current(void 0);
     };
   }, [siteKey]);
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       ref: containerRef,
@@ -2383,7 +2619,7 @@ function TurnstileWidget({
 }
 
 // src/FilloForm.tsx
-import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function themeProps(theme) {
   const safeTheme = resolveThemeAppearance(normalizeFormTheme(theme));
   if (!safeTheme) return {};
@@ -2405,25 +2641,22 @@ function badgeUrl(href) {
   url.searchParams.set("utm_source", "form_badge");
   return url.toString();
 }
-var FOCUSABLE_SELECTOR = 'input:not([disabled]), textarea:not([disabled]), select:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"])';
+var FOCUSABLE_SELECTOR2 = 'input:not([disabled]), textarea:not([disabled]), select:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"])';
 function resolveFocusable(el) {
   if (!el) return null;
-  return el.matches(FOCUSABLE_SELECTOR) ? el : el.querySelector(FOCUSABLE_SELECTOR);
+  return el.matches(FOCUSABLE_SELECTOR2) ? el : el.querySelector(FOCUSABLE_SELECTOR2);
 }
 function nextFrame(run) {
   if (typeof requestAnimationFrame === "function") requestAnimationFrame(run);
   else setTimeout(run, 0);
 }
-function focusErrorSummary(formEl) {
+function focusFirstInvalid(formEl) {
   if (!formEl || typeof window === "undefined") return;
   nextFrame(() => {
-    formEl.querySelector(".fillo-error-summary")?.focus();
+    const invalid = formEl.querySelector('[aria-invalid="true"]');
+    resolveFocusable(invalid)?.focus();
   });
 }
-function focusField(inputId) {
-  if (typeof document === "undefined") return;
-  resolveFocusable(document.getElementById(inputId))?.focus();
-}
 var HP_STYLE = {
   position: "absolute",
   left: "-9999px",
@@ -2443,7 +2676,7 @@ function assertHpHidden(el) {
 function FilloForm(props) {
   const { form, formId } = props;
   const renderOnly = props.renderOnly === true || props.skipValidation === true;
-  const client = useMemo5(
+  const client = useMemo6(
     () => renderOnly ? void 0 : props.client ?? (formId ? createClient() : void 0),
     [renderOnly, props.client, formId]
   );
@@ -2480,11 +2713,11 @@ function FilloForm(props) {
   });
   const renderResolvedSnapshot = Boolean(resolvedSchema && !devChrome);
   const inlineSchema = codeForm ? renderResolvedSnapshot ? resolvedSchema : codeForm.schema : form;
-  const onErrorRef = useRef8(onError);
-  useEffect8(() => {
+  const onErrorRef = useRef9(onError);
+  useEffect9(() => {
     onErrorRef.current = onError;
   });
-  const targetError = useMemo5(
+  const targetError = useMemo6(
     () => form && !formId && !renderOnly && (!isCodeForm2(form) || !props.client) ? new FilloError2(
       "This form has no Fillo target. Pass formId with the schema, use a defineForm() value with client, or set renderOnly for a non-submitting preview.",
       422,
@@ -2493,11 +2726,11 @@ function FilloForm(props) {
     ) : null,
     [form, formId, props.client, renderOnly]
   );
-  useEffect8(() => {
+  useEffect9(() => {
     if (targetError) onErrorRef.current?.(targetError);
   }, [targetError]);
   const needsFetch = !inlineSchema && Boolean(client && formId);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!needsFetch || !client || !formId) {
       setLoaded(null);
       setLoadFailure(null);
@@ -2534,7 +2767,7 @@ function FilloForm(props) {
   const currentLoaded = needsFetch && loaded?.formId === formId ? loaded : null;
   const loadError = needsFetch && loadFailure && loadFailure.formId === formId ? loadFailure.error : null;
   const rawSchema = inlineSchema ?? currentLoaded?.schema ?? null;
-  const normalized = useMemo5(
+  const normalized = useMemo6(
     () => rawSchema ? normalizeFormSchema(rawSchema) : null,
     [rawSchema]
   );
@@ -2542,8 +2775,8 @@ function FilloForm(props) {
   const resolvedCodeTheme = renderResolvedSnapshot ? resolvedTheme ?? void 0 : codeForm?.theme;
   const theme = props.appearance?.theme ?? props.theme ?? resolvedCodeTheme ?? currentLoaded?.theme ?? void 0;
   if (targetError) {
-    if (props.renderError) return /* @__PURE__ */ jsx7(Fragment3, { children: props.renderError(targetError) });
-    return /* @__PURE__ */ jsx7(
+    if (props.renderError) return /* @__PURE__ */ jsx8(Fragment3, { children: props.renderError(targetError) });
+    return /* @__PURE__ */ jsx8(
       "div",
       {
         className: `fillo-form fillo-form--error ${props.className ?? ""}`,
@@ -2558,15 +2791,15 @@ function FilloForm(props) {
   }
   if (normalized && !normalized.ok) {
     const error = new FilloError2(`This form could not be rendered: ${normalized.error}`, 422);
-    if (props.renderError) return /* @__PURE__ */ jsx7(Fragment3, { children: props.renderError(error) });
-    return /* @__PURE__ */ jsx7("div", { className: `fillo-form fillo-form--error ${props.className ?? ""}`, children: strings.renderFailed });
+    if (props.renderError) return /* @__PURE__ */ jsx8(Fragment3, { children: props.renderError(error) });
+    return /* @__PURE__ */ jsx8("div", { className: `fillo-form fillo-form--error ${props.className ?? ""}`, children: strings.renderFailed });
   }
   if (loadError) {
     if (props.renderError) {
-      return /* @__PURE__ */ jsx7(Fragment3, { children: props.renderError(loadError) });
+      return /* @__PURE__ */ jsx8(Fragment3, { children: props.renderError(loadError) });
     }
     const message = loadError.status === 404 ? strings.loadFailedNotFound : loadError.status === 0 ? strings.loadFailedNetwork : strings.loadFailed;
-    return /* @__PURE__ */ jsx7("div", { className: `fillo-form fillo-form--error ${props.className ?? ""}`, children: message });
+    return /* @__PURE__ */ jsx8("div", { className: `fillo-form fillo-form--error ${props.className ?? ""}`, children: message });
   }
   if (currentLoaded?.accepting === false && schema) {
     const variant = overlayVariant(currentLoaded.acceptingReason);
@@ -2582,9 +2815,9 @@ function FilloForm(props) {
         void 0,
         currentLoaded.acceptingReason
       );
-      return /* @__PURE__ */ jsx7(Fragment3, { children: props.renderError(error) });
+      return /* @__PURE__ */ jsx8(Fragment3, { children: props.renderError(error) });
     }
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx8(
       NotOpenOverlay,
       {
         ...props,
@@ -2596,21 +2829,21 @@ function FilloForm(props) {
     );
   }
   if (currentLoaded?.closed) {
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx8(
       "div",
       {
         className: `fillo-form fillo-form--closed ${props.className ?? ""}`,
         ...themeProps(theme),
-        children: /* @__PURE__ */ jsx7("p", { className: "fillo-closed", children: strings.closed })
+        children: /* @__PURE__ */ jsx8("p", { className: "fillo-closed", children: strings.closed })
       }
     );
   }
   const canonicalSyncError = codeForm && syncError && !props.skipValidation ? syncError : null;
   if (canonicalSyncError && props.renderError) {
-    return /* @__PURE__ */ jsx7(Fragment3, { children: props.renderError(canonicalSyncError) });
+    return /* @__PURE__ */ jsx8(Fragment3, { children: props.renderError(canonicalSyncError) });
   }
   if (canonicalSyncError && !devChrome) {
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx8(
       "div",
       {
         className: `fillo-form fillo-form--error ${props.className ?? ""}`,
@@ -2632,9 +2865,9 @@ function FilloForm(props) {
       void 0,
       syncedAcceptingReason
     ) : new FilloError2("This form isn't published yet.", 403);
-    if (props.renderError) return /* @__PURE__ */ jsx7(Fragment3, { children: props.renderError(error) });
+    if (props.renderError) return /* @__PURE__ */ jsx8(Fragment3, { children: props.renderError(error) });
     if (schema) {
-      return /* @__PURE__ */ jsx7(
+      return /* @__PURE__ */ jsx8(
         NotOpenOverlay,
         {
           ...props,
@@ -2645,27 +2878,27 @@ function FilloForm(props) {
         }
       );
     }
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx8(
       "div",
       {
         className: `fillo-form fillo-form--closed ${props.className ?? ""}`,
         ...themeProps(theme),
-        children: /* @__PURE__ */ jsx7("p", { className: "fillo-closed", children: variant === "closed" ? strings.closed : strings.notLive })
+        children: /* @__PURE__ */ jsx8("p", { className: "fillo-closed", children: variant === "closed" ? strings.closed : strings.notLive })
       }
     );
   }
   const awaitingCanonical = Boolean(codeForm && codeFormSyncing && !props.skipValidation);
   if (!devChrome && awaitingCanonical || !schema) {
-    return /* @__PURE__ */ jsxs6(
+    return /* @__PURE__ */ jsxs7(
       "div",
       {
         className: `fillo-form fillo-form--loading ${props.className ?? ""}`,
         "aria-busy": "true",
         ...themeProps(theme),
         children: [
-          /* @__PURE__ */ jsx7("div", { className: "fillo-skeleton" }),
-          /* @__PURE__ */ jsx7("div", { className: "fillo-skeleton" }),
-          /* @__PURE__ */ jsx7("div", { className: "fillo-skeleton fillo-skeleton--short" })
+          /* @__PURE__ */ jsx8("div", { className: "fillo-skeleton" }),
+          /* @__PURE__ */ jsx8("div", { className: "fillo-skeleton" }),
+          /* @__PURE__ */ jsx8("div", { className: "fillo-skeleton fillo-skeleton--short" })
         ]
       }
     );
@@ -2673,7 +2906,7 @@ function FilloForm(props) {
   const branding = codeForm ? syncedBranding : currentLoaded?.branding;
   const poweredBy = branding?.poweredBy ?? true;
   const challenge = props.challenge ?? (codeForm ? syncedChallenge : currentLoaded?.challenge) ?? void 0;
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     ResolvedForm,
     {
       ...props,
@@ -2698,7 +2931,7 @@ function FilloForm(props) {
   );
 }
 function PoweredBy({ label, href }) {
-  return /* @__PURE__ */ jsx7("a", { className: "fillo-powered", href: badgeUrl(href), target: "_blank", rel: "noopener noreferrer", children: label ?? "Powered by Fillo" });
+  return /* @__PURE__ */ jsx8("a", { className: "fillo-powered", href: badgeUrl(href), target: "_blank", rel: "noopener noreferrer", children: label ?? "Powered by Fillo" });
 }
 function overlayVariant(reason) {
   return reason === "expired" || reason === "capped" || reason === "storage_full" ? "closed" : "notOpen";
@@ -2706,7 +2939,7 @@ function overlayVariant(reason) {
 function NotOpenOverlay(props) {
   const strings = resolveStrings(props.strings);
   const closedFlavor = props.variant === "closed";
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       className: `fillo-form fillo-form--not-open ${props.className ?? ""}`,
@@ -2714,13 +2947,13 @@ function NotOpenOverlay(props) {
       "data-state": "closed",
       ...themeProps(props.theme),
       children: [
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           "div",
           {
             className: "fillo-not-open-preview",
             "aria-hidden": "true",
             ref: (node) => node?.setAttribute("inert", ""),
-            children: /* @__PURE__ */ jsx7(
+            children: /* @__PURE__ */ jsx8(
               ResolvedForm,
               {
                 schema: props.schema,
@@ -2736,11 +2969,11 @@ function NotOpenOverlay(props) {
             )
           }
         ),
-        /* @__PURE__ */ jsxs6("div", { className: "fillo-not-open-card", "data-fillo": "not-open-card", role: "status", children: [
-          /* @__PURE__ */ jsx7("h2", { className: "fillo-not-open-title", children: closedFlavor ? strings.closedTitle : strings.notOpenTitle }),
-          /* @__PURE__ */ jsx7("p", { className: "fillo-not-open-body", children: closedFlavor ? strings.closed : strings.notOpenBody })
+        /* @__PURE__ */ jsxs7("div", { className: "fillo-not-open-card", "data-fillo": "not-open-card", role: "status", children: [
+          /* @__PURE__ */ jsx8("h2", { className: "fillo-not-open-title", children: closedFlavor ? strings.closedTitle : strings.notOpenTitle }),
+          /* @__PURE__ */ jsx8("p", { className: "fillo-not-open-body", children: closedFlavor ? strings.closed : strings.notOpenBody })
         ] }),
-        (props.branding?.poweredBy ?? true) && /* @__PURE__ */ jsx7(PoweredBy, { label: props.branding?.label, href: props.branding?.href })
+        (props.branding?.poweredBy ?? true) && /* @__PURE__ */ jsx8(PoweredBy, { label: props.branding?.label, href: props.branding?.href })
       ]
     }
   );
@@ -2757,26 +2990,26 @@ function ResolvedForm(props) {
   const instanceId = useId2().replace(/:/g, "");
   const devEnv = useIsDevEnv();
   const devChrome = !displayOnly && (props.preview === true || devEnv);
-  const hpRef = useRef8(null);
+  const hpRef = useRef9(null);
   const codeForm = isCodeForm2(props.form) ? props.form : null;
   const client = props.client;
   const challenge = renderOnly ? void 0 : props.challenge;
   const challengeRequired = Boolean(challenge);
-  const challengeTokenRef = useRef8(void 0);
+  const challengeTokenRef = useRef9(void 0);
   const [resyncWarning, setResyncWarning] = useState6(null);
   const [resolutionFailureCode, setResolutionFailureCode] = useState6(null);
   const [challengeToken, setChallengeToken] = useState6(void 0);
   const [challengeError, setChallengeError] = useState6(false);
-  const resetChallengeRef = useRef8(void 0);
-  const handleChallengeToken = useCallback((token) => {
+  const resetChallengeRef = useRef9(void 0);
+  const handleChallengeToken = useCallback2((token) => {
     challengeTokenRef.current = token;
     setChallengeToken(token);
     if (token) setChallengeError(false);
   }, []);
-  const registerChallengeReset = useCallback((reset) => {
+  const registerChallengeReset = useCallback2((reset) => {
     resetChallengeRef.current = reset;
   }, []);
-  const resolveFormId = useMemo5(
+  const resolveFormId = useMemo6(
     () => codeForm && client?.key ? (
       // bypassCache: a stale cached formId must not be trusted at submit time.
       async () => {
@@ -2874,8 +3107,8 @@ function ResolvedForm(props) {
   });
   useDraftFlush(api, !displayOnly && !renderOnly);
   const strings = resolveStrings(props.strings);
-  const announceRef = useRef8(null);
-  const announce = useCallback((text) => {
+  const announceRef = useRef9(null);
+  const announce = useCallback2((text) => {
     const el = announceRef.current;
     if (!el) return;
     if (el.textContent === text) {
@@ -2887,20 +3120,20 @@ function ResolvedForm(props) {
     }
     el.textContent = text;
   }, []);
-  useEffect8(() => {
+  useEffect9(() => {
     if (api.status === "submitting") announce(strings.submittingAnnouncement);
   }, [api.status, announce, strings.submittingAnnouncement]);
   const resuming = api.resumedDraft || api.editingPrevious;
   const resumeAnnouncement = api.editingPrevious ? strings.editNotice : strings.resumeNotice;
-  useEffect8(() => {
+  useEffect9(() => {
     if (resuming) announce(resumeAnnouncement);
   }, [resuming, resumeAnnouncement, announce]);
-  const themed = useMemo5(() => themeProps(theme), [theme]);
+  const themed = useMemo6(() => themeProps(theme), [theme]);
   const warningCode = resyncWarning ? resyncWarning.code : props.syncWarningCode;
   const warningUrl = resyncWarning ? resyncWarning.url : props.syncWarningUrl;
   const uploadsAvailable = resyncWarning ? resyncWarning.uploadsAvailable : props.uploadsAvailable;
   const uploadFileSizeLimitMb = resyncWarning ? resyncWarning.uploadFileSizeLimitMb : props.uploadFileSizeLimitMb;
-  const chromeValue = useMemo5(
+  const chromeValue = useMemo6(
     () => ({
       devChrome,
       renderOnly,
@@ -2914,18 +3147,18 @@ function ResolvedForm(props) {
   const settings = schema.settings;
   const submitted = api.status === "submitted";
   const liveSubmit = submitted && !api.restoredSubmission;
-  useEffect8(() => {
+  useEffect9(() => {
     if (!liveSubmit || !settings.redirectUrl || typeof window === "undefined") return;
     const url = safeHttpUrl(settings.redirectUrl);
     if (url) window.location.assign(url);
   }, [liveSubmit, settings.redirectUrl]);
-  const successRef = useRef8(null);
-  useEffect8(() => {
+  const successRef = useRef9(null);
+  useEffect9(() => {
     if (liveSubmit) successRef.current?.focus();
   }, [liveSubmit]);
-  const blocksRef = useRef8(null);
-  const prevPageIndex = useRef8(api.pageIndex);
-  useEffect8(() => {
+  const blocksRef = useRef9(null);
+  const prevPageIndex = useRef9(api.pageIndex);
+  useEffect9(() => {
     if (prevPageIndex.current === api.pageIndex) return;
     prevPageIndex.current = api.pageIndex;
     const container = blocksRef.current?.parentElement;
@@ -2937,7 +3170,7 @@ function ResolvedForm(props) {
   }, [api.pageIndex]);
   const appearance = props.appearance;
   if (api.status === "submitted") {
-    return /* @__PURE__ */ jsxs6(
+    return /* @__PURE__ */ jsxs7(
       "div",
       {
         ref: successRef,
@@ -2954,7 +3187,7 @@ function ResolvedForm(props) {
         "data-state": "submitted",
         ...themed,
         children: [
-          props.renderSuccess ? props.renderSuccess() : /* @__PURE__ */ jsxs6(
+          props.renderSuccess ? props.renderSuccess() : /* @__PURE__ */ jsxs7(
             "div",
             {
               className: slotClass3("fillo-success", appearance, {
@@ -2963,13 +3196,13 @@ function ResolvedForm(props) {
               }),
               "data-fillo": "success",
               children: [
-                /* @__PURE__ */ jsx7("div", { className: "fillo-success-mark", "aria-hidden": "true" }),
-                /* @__PURE__ */ jsx7("h2", { className: "fillo-success-title", children: settings.successTitle ?? strings.successTitle }),
-                /* @__PURE__ */ jsx7("p", { className: "fillo-success-message", children: api.duplicateSubmission ? strings.alreadyAnswered : settings.successMessage ?? strings.successMessage })
+                /* @__PURE__ */ jsx8("div", { className: "fillo-success-mark", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx8("h2", { className: "fillo-success-title", children: settings.successTitle ?? strings.successTitle }),
+                /* @__PURE__ */ jsx8("p", { className: "fillo-success-message", children: api.duplicateSubmission ? strings.alreadyAnswered : settings.successMessage ?? strings.successMessage })
               ]
             }
           ),
-          props.poweredBy && /* @__PURE__ */ jsx7(PoweredBy, { label: props.brandLabel, href: props.brandHref })
+          props.poweredBy && /* @__PURE__ */ jsx8(PoweredBy, { label: props.brandLabel, href: props.brandHref })
         ]
       }
     );
@@ -2986,23 +3219,12 @@ function ResolvedForm(props) {
   const progressPos = progressSeq.indexOf(api.page.id);
   const progressStep = progressPos >= 0 ? progressPos + 1 : Math.min(api.pageIndex + 1, progressTotal);
   const submitFixUrl = devChrome && resolutionFailureCode === "form_not_published" && warningCode === "storage_required" ? safeHttpUrl(warningUrl) : null;
-  const invalidFields = [];
-  for (const block of api.blocks) {
-    if (!isField2(block)) continue;
-    const raw = api.errors[block.id];
-    if (!raw) continue;
-    invalidFields.push({
-      field: block,
-      error: raw === REQUIRED_FIELD_MESSAGE2 ? strings.required : raw,
-      inputId: createFilloFieldIds(instanceId, block.id).inputId
-    });
-  }
   const rootClass = slotClass3(`fillo-form ${props.className ?? ""}`, appearance, {
     slot: "root",
     status: api.status
   });
-  const formBody = /* @__PURE__ */ jsxs6(Fragment3, { children: [
-    /* @__PURE__ */ jsx7(
+  const formBody = /* @__PURE__ */ jsxs7(Fragment3, { children: [
+    /* @__PURE__ */ jsx8(
       "span",
       {
         ref: announceRef,
@@ -3012,7 +3234,7 @@ function ResolvedForm(props) {
         "data-fillo": "announce"
       }
     ),
-    devChrome && /* @__PURE__ */ jsx7(
+    devChrome && /* @__PURE__ */ jsx8(
       DevChrome,
       {
         preview: props.preview,
@@ -3024,18 +3246,18 @@ function ResolvedForm(props) {
         noClient: !props.client && !props.skipValidation && !renderOnly
       }
     ),
-    resuming && /* @__PURE__ */ jsxs6(
+    resuming && /* @__PURE__ */ jsxs7(
       "div",
       {
         className: slotClass3("fillo-resume", appearance, { slot: "resume" }),
         "data-fillo": "resume",
         children: [
-          /* @__PURE__ */ jsx7("span", { className: "fillo-resume-text", children: api.editingPrevious ? strings.editNotice : strings.resumeNotice }),
-          /* @__PURE__ */ jsx7("button", { type: "button", className: "fillo-resume-clear", onClick: api.resetDraft, children: strings.resumeStartOver })
+          /* @__PURE__ */ jsx8("span", { className: "fillo-resume-text", children: api.editingPrevious ? strings.editNotice : strings.resumeNotice }),
+          /* @__PURE__ */ jsx8("button", { type: "button", className: "fillo-resume-clear", onClick: api.resetDraft, children: strings.resumeStartOver })
         ]
       }
     ),
-    api.resumeLinkFailed && !api.resumedDraft && !api.editingPrevious && /* @__PURE__ */ jsx7(
+    api.resumeLinkFailed && !api.resumedDraft && !api.editingPrevious && /* @__PURE__ */ jsx8(
       "div",
       {
         className: slotClass3("fillo-resume fillo-resume--expired", appearance, {
@@ -3043,10 +3265,10 @@ function ResolvedForm(props) {
         }),
         "data-fillo": "resume",
         role: "status",
-        children: /* @__PURE__ */ jsx7("span", { className: "fillo-resume-text", children: strings.resumeLinkExpired })
+        children: /* @__PURE__ */ jsx8("span", { className: "fillo-resume-text", children: strings.resumeLinkExpired })
       }
     ),
-    multiPage && settings.showProgress !== false && /* @__PURE__ */ jsx7(
+    multiPage && settings.showProgress !== false && /* @__PURE__ */ jsx8(
       "div",
       {
         className: slotClass3("fillo-progress-track", appearance, { slot: "progress" }),
@@ -3056,7 +3278,7 @@ function ResolvedForm(props) {
         "aria-valuemin": 1,
         "aria-valuemax": progressTotal,
         "aria-valuenow": progressStep,
-        children: /* @__PURE__ */ jsx7(
+        children: /* @__PURE__ */ jsx8(
           "div",
           {
             className: slotClass3("fillo-progress-fill", appearance, { slot: "progressFill" }),
@@ -3068,13 +3290,13 @@ function ResolvedForm(props) {
         )
       }
     ),
-    api.pageIndex === 0 && props.showTitle !== false && /* @__PURE__ */ jsxs6(
+    api.pageIndex === 0 && props.showTitle !== false && /* @__PURE__ */ jsxs7(
       "header",
       {
         className: slotClass3("fillo-header", appearance, { slot: "header" }),
         "data-fillo": "header",
         children: [
-          schema.title && /* @__PURE__ */ jsx7(
+          schema.title && /* @__PURE__ */ jsx8(
             "h1",
             {
               className: slotClass3("fillo-title", appearance, { slot: "title" }),
@@ -3082,7 +3304,7 @@ function ResolvedForm(props) {
               children: schema.title
             }
           ),
-          schema.description && /* @__PURE__ */ jsx7(
+          schema.description && /* @__PURE__ */ jsx8(
             "p",
             {
               className: slotClass3("fillo-form-description", appearance, { slot: "description" }),
@@ -3093,7 +3315,7 @@ function ResolvedForm(props) {
         ]
       }
     ),
-    multiPage && api.page.title && api.pageIndex > 0 && /* @__PURE__ */ jsx7(
+    multiPage && api.page.title && api.pageIndex > 0 && /* @__PURE__ */ jsx8(
       "h2",
       {
         className: slotClass3("fillo-page-title", appearance, { slot: "pageTitle" }),
@@ -3101,32 +3323,14 @@ function ResolvedForm(props) {
         children: api.page.title
       }
     ),
-    invalidFields.length > 0 && /* @__PURE__ */ jsxs6("div", { className: "fillo-error-summary", role: "alert", tabIndex: -1, "data-fillo": "error-summary", children: [
-      /* @__PURE__ */ jsx7("p", { className: "fillo-error-summary-title", children: strings.errorSummaryTitle }),
-      /* @__PURE__ */ jsx7("ul", { children: invalidFields.map(({ field, error, inputId }) => /* @__PURE__ */ jsx7("li", { children: /* @__PURE__ */ jsxs6(
-        "a",
-        {
-          href: `#${inputId}`,
-          onClick: (e) => {
-            e.preventDefault();
-            focusField(inputId);
-          },
-          children: [
-            field.label,
-            ": ",
-            error
-          ]
-        }
-      ) }, field.id)) })
-    ] }),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       "div",
       {
         className: slotClass3("fillo-blocks", appearance, { slot: "blocks" }),
         "data-fillo": "blocks",
         ref: blocksRef,
         tabIndex: -1,
-        children: api.blocks.map((block) => /* @__PURE__ */ jsx7(
+        children: api.blocks.map((block) => /* @__PURE__ */ jsx8(
           BlockRenderer,
           {
             block,
@@ -3138,7 +3342,7 @@ function ResolvedForm(props) {
         ))
       }
     ),
-    !displayOnly && /* @__PURE__ */ jsx7(
+    !displayOnly && /* @__PURE__ */ jsx8(
       "input",
       {
         type: "text",
@@ -3155,8 +3359,8 @@ function ResolvedForm(props) {
         }
       }
     ),
-    challenge && showChallenge && /* @__PURE__ */ jsxs6("div", { className: "fillo-turnstile-slot", "data-fillo": "turnstile-slot", children: [
-      /* @__PURE__ */ jsx7(
+    challenge && showChallenge && /* @__PURE__ */ jsxs7("div", { className: "fillo-turnstile-slot", "data-fillo": "turnstile-slot", children: [
+      /* @__PURE__ */ jsx8(
         TurnstileWidget,
         {
           siteKey: challenge.siteKey,
@@ -3166,24 +3370,24 @@ function ResolvedForm(props) {
           registerReset: registerChallengeReset
         }
       ),
-      challengeError && /* @__PURE__ */ jsx7("p", { className: "fillo-turnstile-error", role: "alert", children: strings.challengeUnavailable })
+      challengeError && /* @__PURE__ */ jsx8("p", { className: "fillo-turnstile-error", role: "alert", children: strings.challengeUnavailable })
     ] }),
-    (api.status === "error" || api.submitError) && /* @__PURE__ */ jsxs6("p", { className: "fillo-submit-error", role: "alert", children: [
+    (api.status === "error" || api.submitError) && /* @__PURE__ */ jsxs7("p", { className: "fillo-submit-error", role: "alert", children: [
       api.submitError ?? strings.submitFailed,
-      submitFixUrl && /* @__PURE__ */ jsxs6(Fragment3, { children: [
+      submitFixUrl && /* @__PURE__ */ jsxs7(Fragment3, { children: [
         " ",
         "Connect storage:",
         " ",
-        /* @__PURE__ */ jsx7("a", { href: submitFixUrl, target: "_blank", rel: "noopener noreferrer", children: submitFixUrl })
+        /* @__PURE__ */ jsx8("a", { href: submitFixUrl, target: "_blank", rel: "noopener noreferrer", children: submitFixUrl })
       ] })
     ] }),
-    showFooter && /* @__PURE__ */ jsxs6(
+    showFooter && /* @__PURE__ */ jsxs7(
       "footer",
       {
         className: slotClass3("fillo-footer", appearance, { slot: "footer" }),
         "data-fillo": "footer",
         children: [
-          multiPage && !api.isFirstPage && /* @__PURE__ */ jsx7(
+          multiPage && !api.isFirstPage && /* @__PURE__ */ jsx8(
             "button",
             {
               type: "button",
@@ -3196,7 +3400,7 @@ function ResolvedForm(props) {
               children: strings.back
             }
           ),
-          showPrimaryButton && /* @__PURE__ */ jsx7(
+          showPrimaryButton && /* @__PURE__ */ jsx8(
             "button",
             {
               type: "submit",
@@ -3215,23 +3419,23 @@ function ResolvedForm(props) {
         ]
       }
     ),
-    props.poweredBy && /* @__PURE__ */ jsx7(PoweredBy, { label: props.brandLabel, href: props.brandHref })
+    props.poweredBy && /* @__PURE__ */ jsx8(PoweredBy, { label: props.brandLabel, href: props.brandHref })
   ] });
-  return /* @__PURE__ */ jsx7(FilloContext.Provider, { value: api, children: /* @__PURE__ */ jsx7(FilloChromeContext.Provider, { value: chromeValue, children: /* @__PURE__ */ jsx7(FilloAnnounceContext.Provider, { value: announce, children: /* @__PURE__ */ jsx7(FilloStringsContext.Provider, { value: strings, children: /* @__PURE__ */ jsx7(FilloAppearanceContext.Provider, { value: appearance, children: /* @__PURE__ */ jsx7(FilloInstanceIdContext.Provider, { value: instanceId, children: displayOnly ? (
+  return /* @__PURE__ */ jsx8(FilloContext.Provider, { value: api, children: /* @__PURE__ */ jsx8(FilloChromeContext.Provider, { value: chromeValue, children: /* @__PURE__ */ jsx8(FilloAnnounceContext.Provider, { value: announce, children: /* @__PURE__ */ jsx8(FilloStringsContext.Provider, { value: strings, children: /* @__PURE__ */ jsx8(FilloAppearanceContext.Provider, { value: appearance, children: /* @__PURE__ */ jsx8(FilloInstanceIdContext.Provider, { value: instanceId, children: displayOnly ? (
     // Display-only preview: a plain div (no form element to submit) with
     // every control inside a natively disabled fieldset — unfocusable
     // and unfillable even without the stylesheet or inert support.
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       "div",
       {
         className: rootClass,
         "data-fillo": "preview-form",
         "data-state": "preview",
         ...themed,
-        children: /* @__PURE__ */ jsx7("fieldset", { disabled: true, className: "fillo-not-open-fields", children: formBody })
+        children: /* @__PURE__ */ jsx8("fieldset", { disabled: true, className: "fillo-not-open-fields", children: formBody })
       }
     )
-  ) : /* @__PURE__ */ jsx7(
+  ) : /* @__PURE__ */ jsx8(
     "form",
     {
       className: rootClass,
@@ -3246,11 +3450,11 @@ function ResolvedForm(props) {
         e.preventDefault();
         const formEl = e.currentTarget;
         if (api.isLastPage) {
-          void api.submit().then(() => focusErrorSummary(formEl)).catch(() => {
+          void api.submit().then(() => focusFirstInvalid(formEl)).catch(() => {
           });
         } else {
           api.next();
-          focusErrorSummary(formEl);
+          focusFirstInvalid(formEl);
         }
       },
       children: formBody
@@ -3259,21 +3463,21 @@ function ResolvedForm(props) {
 }
 
 // src/jsx.tsx
-import { useRef as useRef9 } from "react";
+import { useRef as useRef10 } from "react";
 import {
   codeFormFromJsx,
   FilloJsxError,
   isLikelyDevEnv as isLikelyDevEnv2,
   JSX_BLOCK_COMPONENTS
 } from "@usefillo/core";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var B = JSX_BLOCK_COMPONENTS;
 var isDevEnv = () => isLikelyDevEnv2();
 function JsxForm(props) {
   const { id, title, description, settings, theme, client, children, ...rest } = props;
   const compiled = codeFormFromJsx({ id, title, description, settings, theme }, children);
   const json = JSON.stringify(compiled.schema) + JSON.stringify(compiled.theme ?? null);
-  const memo2 = useRef9(null);
+  const memo2 = useRef10(null);
   if (memo2.current && memo2.current.json !== json && isDevEnv()) {
     console.warn(
       `[fillo] "${id}": form structure changed between renders. If you just edited the form, ignore this. Otherwise: conditional questions are visibleIf={when(\u2026)\u2026}, never {cond && <Fillo.\u2026/>} \u2014 a per-visitor schema churns drafts in your workspace.`
@@ -3282,7 +3486,7 @@ function JsxForm(props) {
   if (!memo2.current || memo2.current.json !== json) {
     memo2.current = { json, form: compiled };
   }
-  return /* @__PURE__ */ jsx8(FilloForm, { ...{ form: memo2.current.form, client, ...rest } });
+  return /* @__PURE__ */ jsx9(FilloForm, { ...{ form: memo2.current.form, client, ...rest } });
 }
 function defineFormFromJsx(element) {
   if (!element || element.type !== JsxForm) {
@@ -3327,7 +3531,7 @@ var Fillo = {
 };
 
 // src/provider.tsx
-import { useEffect as useEffect9, useId as useId3, useMemo as useMemo6, useState as useState7 } from "react";
+import { useEffect as useEffect10, useId as useId3, useMemo as useMemo7, useState as useState7 } from "react";
 import {
   FilloError as FilloError3,
   createClient as createClient2,
@@ -3337,7 +3541,7 @@ import {
   resolveStrings as resolveStrings2,
   syncCodeForm as syncCodeForm3
 } from "@usefillo/core";
-import { Fragment as Fragment4, jsx as jsx9 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx10 } from "react/jsx-runtime";
 function FilloProvider({
   children,
   form,
@@ -3353,7 +3557,7 @@ function FilloProvider({
   ...options
 }) {
   const localPreview = renderOnly === true || skipValidation === true;
-  const activeClient = useMemo6(
+  const activeClient = useMemo7(
     () => localPreview ? void 0 : client ?? (formId ? createClient2() : void 0),
     [client, formId, localPreview]
   );
@@ -3363,7 +3567,7 @@ function FilloProvider({
   const devChrome = preview === true || devEnv;
   if (preview === true) warnPreviewInProduction();
   const codeForm = isCodeForm2(form) ? form : null;
-  const targetError = useMemo6(
+  const targetError = useMemo7(
     () => !formId && !localPreview && (!codeForm || !client) ? new FilloError3(
       "This form has no Fillo target. Pass formId with the schema, use a defineForm() value with client, or set renderOnly for a non-submitting preview.",
       422,
@@ -3372,7 +3576,7 @@ function FilloProvider({
     ) : null,
     [client, codeForm, formId, localPreview]
   );
-  useEffect9(() => {
+  useEffect10(() => {
     if (targetError) onError?.(targetError);
   }, [onError, targetError]);
   const {
@@ -3392,12 +3596,12 @@ function FilloProvider({
   });
   const [resyncWarning, setResyncWarning] = useState7(null);
   const rawSchema = codeForm ? resolvedSchema && !devChrome ? resolvedSchema : codeForm.schema : form;
-  const normalized = useMemo6(() => normalizeFormSchema2(rawSchema), [rawSchema]);
+  const normalized = useMemo7(() => normalizeFormSchema2(rawSchema), [rawSchema]);
   if (!normalized.ok) {
     throw new FilloError3(`This form could not be rendered: ${normalized.error}`, 422);
   }
   const schema = normalized.schema;
-  const resolveFormId = useMemo6(
+  const resolveFormId = useMemo7(
     () => codeForm && activeClient?.key ? async () => {
       try {
         const result = await syncCodeForm3(activeClient, codeForm, { bypassCache: true });
@@ -3483,7 +3687,7 @@ function FilloProvider({
   const freshWarningUrl = resyncWarning ? resyncWarning.url : warningUrl;
   const freshUploadsAvailable = resyncWarning ? resyncWarning.uploadsAvailable : uploadsAvailable;
   const freshUploadFileSizeLimitMb = resyncWarning ? resyncWarning.uploadFileSizeLimitMb : uploadFileSizeLimitMb;
-  const chromeValue = useMemo6(
+  const chromeValue = useMemo7(
     () => ({
       devChrome,
       renderOnly: localPreview,
@@ -3503,11 +3707,11 @@ function FilloProvider({
   );
   const resolvedStrings = resolveStrings2(strings);
   if (targetError) {
-    if (renderError) return /* @__PURE__ */ jsx9(Fragment4, { children: renderError(targetError) });
+    if (renderError) return /* @__PURE__ */ jsx10(Fragment4, { children: renderError(targetError) });
     throw targetError;
   }
   const canonicalSyncError = syncError && !localPreview ? syncError : null;
-  if (canonicalSyncError && renderError) return /* @__PURE__ */ jsx9(Fragment4, { children: renderError(canonicalSyncError) });
+  if (canonicalSyncError && renderError) return /* @__PURE__ */ jsx10(Fragment4, { children: renderError(canonicalSyncError) });
   if (canonicalSyncError && !devChrome) return null;
   if (codeFormSyncing && !localPreview && !devChrome) return null;
   const notPublished = Boolean(codeForm) && syncedStatus === "draft" && !localPreview;
@@ -3519,9 +3723,9 @@ function FilloProvider({
       void 0,
       syncedAcceptingReason ?? "form_not_accepting"
     );
-    return renderError ? /* @__PURE__ */ jsx9(Fragment4, { children: renderError(error) }) : null;
+    return renderError ? /* @__PURE__ */ jsx10(Fragment4, { children: renderError(error) }) : null;
   }
-  return /* @__PURE__ */ jsx9(FilloContext.Provider, { value: api, children: /* @__PURE__ */ jsx9(FilloChromeContext.Provider, { value: chromeValue, children: /* @__PURE__ */ jsx9(FilloStringsContext.Provider, { value: resolvedStrings, children: /* @__PURE__ */ jsx9(FilloAppearanceContext.Provider, { value: appearance, children: /* @__PURE__ */ jsx9(FilloInstanceIdContext.Provider, { value: instanceId, children }) }) }) }) });
+  return /* @__PURE__ */ jsx10(FilloContext.Provider, { value: api, children: /* @__PURE__ */ jsx10(FilloChromeContext.Provider, { value: chromeValue, children: /* @__PURE__ */ jsx10(FilloStringsContext.Provider, { value: resolvedStrings, children: /* @__PURE__ */ jsx10(FilloAppearanceContext.Provider, { value: appearance, children: /* @__PURE__ */ jsx10(FilloInstanceIdContext.Provider, { value: instanceId, children }) }) }) }) });
 }
 
 // src/index.ts