@seed-ship/mcp-ui-solid 4.0.6 → 4.2.0

package/dist/components/FormFieldRenderer.js

@@ -1,7 +1,22 @@
 import { delegateEvents, createComponent, getNextElement, template, getNextMarker, insert, effect, setAttribute, className, memo, setProperty, runHydrationEvents } from "solid-js/web";
-import { Show, Switch, Match, For, createSignal, onCleanup } from "solid-js";
+import { createSignal, Show, Switch, Match, For, onCleanup } from "solid-js";
 import { useConditionalField } from "../hooks/useConditionalField.js";
-var _tmpl$ = /* @__PURE__ */ template(`<span class="text-red-500 ml-1"aria-hidden=true>*`), _tmpl$2 = /* @__PURE__ */ template(`<span class="ml-2 text-[10px] font-medium bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400 px-1.5 py-0.5 rounded">Not supported`), _tmpl$3 = /* @__PURE__ */ template(`<span class="ml-2 text-[10px] font-medium bg-yellow-100 dark:bg-yellow-900/30 text-yellow-600 dark:text-yellow-400 px-1.5 py-0.5 rounded">?`), _tmpl$4 = /* @__PURE__ */ template(`<label><!$><!/><!$><!/><!$><!/><!$><!/>`), _tmpl$5 = /* @__PURE__ */ template(`<input>`), _tmpl$6 = /* @__PURE__ */ template(`<input type=number>`), _tmpl$7 = /* @__PURE__ */ template(`<input type=date>`), _tmpl$8 = /* @__PURE__ */ template(`<textarea>`), _tmpl$9 = /* @__PURE__ */ template(`<option value disabled>`), _tmpl$0 = /* @__PURE__ */ template(`<select><!$><!/><!$><!/>`), _tmpl$1 = /* @__PURE__ */ template(`<label class="flex items-center gap-2 cursor-pointer"><input type=checkbox class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"><span class="text-sm text-gray-700 dark:text-gray-300"><!$><!/><!$><!/>`), _tmpl$10 = /* @__PURE__ */ template(`<div class=space-y-2 role=radiogroup>`), _tmpl$11 = /* @__PURE__ */ template(`<div class="flex items-center gap-3"><input type=range class="flex-1 h-2 bg-gray-200 dark:bg-gray-600 rounded-lg appearance-none cursor-pointer accent-blue-600"><span class="text-sm font-mono text-gray-700 dark:text-gray-300 min-w-[3rem] text-right">`), _tmpl$12 = /* @__PURE__ */ template(`<label class="flex items-center gap-2 cursor-pointer"><button type=button role=switch><span></span></button><span class="text-sm text-gray-700 dark:text-gray-300">`), _tmpl$13 = /* @__PURE__ */ template(`<fieldset class="border border-gray-200 dark:border-gray-600 rounded-lg p-3"><legend class="text-xs font-medium text-gray-500 dark:text-gray-400 px-1"></legend><p class="text-xs text-gray-400">`), _tmpl$14 = /* @__PURE__ */ template(`<input type=text>`), _tmpl$15 = /* @__PURE__ */ template(`<p class="text-xs text-amber-500 mt-0.5">Unknown field type: <!$><!/>`), _tmpl$16 = /* @__PURE__ */ template(`<p>`), _tmpl$17 = /* @__PURE__ */ template(`<p class="text-xs text-gray-500 dark:text-gray-400">`), _tmpl$18 = /* @__PURE__ */ template(`<p role=alert class="text-xs text-red-600 dark:text-red-400">`), _tmpl$19 = /* @__PURE__ */ template(`<div class=space-y-1><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`), _tmpl$20 = /* @__PURE__ */ template(`<option>`), _tmpl$21 = /* @__PURE__ */ template(`<label class="flex items-center gap-2 cursor-pointer"><input type=radio class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600"><span class="text-sm text-gray-700 dark:text-gray-300">`), _tmpl$22 = /* @__PURE__ */ template(`<div class="flex flex-wrap gap-1 mb-1">`), _tmpl$23 = /* @__PURE__ */ template(`<div class="p-2 border-b border-gray-200 dark:border-gray-600 flex-shrink-0"><input type=text placeholder=Filter... class="w-full px-2 py-1 text-sm border border-gray-200 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:border-blue-400 outline-none"autofocus>`), _tmpl$24 = /* @__PURE__ */ template(`<p class="px-3 py-2 text-sm text-gray-400">No matches`), _tmpl$25 = /* @__PURE__ */ template(`<div class="absolute z-50 mt-1 w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-md shadow-lg"style=max-height:320px;display:flex;flex-direction:column><!$><!/><div style=overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch><!$><!/><!$><!/>`), _tmpl$26 = /* @__PURE__ */ template(`<div class=relative><!$><!/><button type=button><span></span><svg class="w-4 h-4 text-gray-400"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M19 9l-7 7-7-7"></path></svg></button><!$><!/>`), _tmpl$27 = /* @__PURE__ */ template(`<span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-full"><!$><!/><button type=button class="hover:text-blue-900 dark:hover:text-blue-100">&times;`), _tmpl$28 = /* @__PURE__ */ template(`<label class="flex items-center gap-2 px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer text-sm"><input type=checkbox class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600"><span class="text-gray-900 dark:text-white">`), _tmpl$29 = /* @__PURE__ */ template(`<div class="absolute z-20 mt-1 w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-md shadow-lg max-h-72 overflow-y-auto">`), _tmpl$30 = /* @__PURE__ */ template(`<div class=relative><!$><!/><input type=text autocomplete=off><!$><!/>`), _tmpl$31 = /* @__PURE__ */ template(`<span class="ml-2 text-xs">&#10003;`), _tmpl$32 = /* @__PURE__ */ template(`<button type=button><!$><!/><!$><!/>`), _tmpl$33 = /* @__PURE__ */ template(`<div><!$><!/><input type=text>`);
+var _tmpl$ = /* @__PURE__ */ template(`<span class=mr-1>`), _tmpl$2 = /* @__PURE__ */ template(`<span class="text-red-500 ml-1"aria-hidden=true>*`), _tmpl$3 = /* @__PURE__ */ template(`<span class="ml-2 text-[10px] font-medium bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400 px-1.5 py-0.5 rounded">Not supported`), _tmpl$4 = /* @__PURE__ */ template(`<span class="ml-2 text-[10px] font-medium bg-yellow-100 dark:bg-yellow-900/30 text-yellow-600 dark:text-yellow-400 px-1.5 py-0.5 rounded">?`), _tmpl$5 = /* @__PURE__ */ template(`<label><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`), _tmpl$6 = /* @__PURE__ */ template(`<input>`), _tmpl$7 = /* @__PURE__ */ template(`<input type=number>`), _tmpl$8 = /* @__PURE__ */ template(`<input type=date>`), _tmpl$9 = /* @__PURE__ */ template(`<textarea>`), _tmpl$0 = /* @__PURE__ */ template(`<option value disabled>`), _tmpl$1 = /* @__PURE__ */ template(`<select><!$><!/><!$><!/>`), _tmpl$10 = /* @__PURE__ */ template(`<label class="flex items-center gap-2 cursor-pointer"><input type=checkbox class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"><span class="text-sm text-gray-700 dark:text-gray-300"><!$><!/><!$><!/>`), _tmpl$11 = /* @__PURE__ */ template(`<div class=space-y-2 role=radiogroup>`), _tmpl$12 = /* @__PURE__ */ template(`<div class="flex items-center gap-3"><input type=range class="flex-1 h-2 bg-gray-200 dark:bg-gray-600 rounded-lg appearance-none cursor-pointer accent-blue-600"><span class="text-sm font-mono text-gray-700 dark:text-gray-300 min-w-[3rem] text-right">`), _tmpl$13 = /* @__PURE__ */ template(`<label class="flex items-center gap-2 cursor-pointer"><button type=button role=switch><span></span></button><span class="text-sm text-gray-700 dark:text-gray-300">`), _tmpl$14 = /* @__PURE__ */ template(`<fieldset class="border border-gray-200 dark:border-gray-600 rounded-lg p-3"><legend class="text-xs font-medium text-gray-500 dark:text-gray-400 px-1"></legend><p class="text-xs text-gray-400">`), _tmpl$15 = /* @__PURE__ */ template(`<input type=text>`), _tmpl$16 = /* @__PURE__ */ template(`<p class="text-xs text-amber-500 mt-0.5">Unknown field type: <!$><!/>`), _tmpl$17 = /* @__PURE__ */ template(`<p>`), _tmpl$18 = /* @__PURE__ */ template(`<p class="text-xs text-gray-500 dark:text-gray-400">`), _tmpl$19 = /* @__PURE__ */ template(`<p role=alert class="text-xs text-red-600 dark:text-red-400">`), _tmpl$20 = /* @__PURE__ */ template(`<div class=space-y-1><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`), _tmpl$21 = /* @__PURE__ */ template(`<option>`), _tmpl$22 = /* @__PURE__ */ template(`<label class="flex items-center gap-2 cursor-pointer"><input type=radio class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600"><span class="text-sm text-gray-700 dark:text-gray-300">`), _tmpl$23 = /* @__PURE__ */ template(`<div class="flex flex-wrap gap-1 mb-1">`), _tmpl$24 = /* @__PURE__ */ template(`<div class="p-2 border-b border-gray-200 dark:border-gray-600 flex-shrink-0"><input type=text placeholder=Filter... class="w-full px-2 py-1 text-sm border border-gray-200 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:border-blue-400 outline-none"autofocus>`), _tmpl$25 = /* @__PURE__ */ template(`<p class="px-3 py-2 text-sm text-gray-400">No matches`), _tmpl$26 = /* @__PURE__ */ template(`<div class="absolute z-50 mt-1 w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-md shadow-lg"style=max-height:320px;display:flex;flex-direction:column><!$><!/><div style=overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch><!$><!/><!$><!/>`), _tmpl$27 = /* @__PURE__ */ template(`<div class=relative><!$><!/><button type=button><span></span><svg class="w-4 h-4 text-gray-400"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M19 9l-7 7-7-7"></path></svg></button><!$><!/>`), _tmpl$28 = /* @__PURE__ */ template(`<span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-full"><!$><!/><button type=button class="hover:text-blue-900 dark:hover:text-blue-100">&times;`), _tmpl$29 = /* @__PURE__ */ template(`<label class="flex items-center gap-2 px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer text-sm"><input type=checkbox class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600"><span class="text-gray-900 dark:text-white">`), _tmpl$30 = /* @__PURE__ */ template(`<div class="absolute z-20 mt-1 w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-md shadow-lg max-h-72 overflow-y-auto">`), _tmpl$31 = /* @__PURE__ */ template(`<div class=relative><!$><!/><input type=text autocomplete=off><!$><!/>`), _tmpl$32 = /* @__PURE__ */ template(`<span class="ml-2 text-xs">&#10003;`), _tmpl$33 = /* @__PURE__ */ template(`<button type=button><!$><!/><!$><!/>`), _tmpl$34 = /* @__PURE__ */ template(`<div><!$><!/><input type=text>`);
+const SOURCE_BADGES = {
+  detected: {
+    icon: "✅",
+    title: "Detected from message"
+  },
+  inferred: {
+    icon: "🔗",
+    title: "Inferred from context"
+  },
+  user: {
+    icon: "✏️",
+    title: "Previously provided"
+  },
+  default: null
+};
 const FormFieldRenderer = (props) => {
   const {
     isVisible
@@ -9,9 +24,18 @@ const FormFieldRenderer = (props) => {
     condition: props.field.showWhen,
     formData: props.formData || (() => ({}))
   });
+  const [isMuted, setIsMuted] = createSignal(!!props.field.muted);
+  const handleFieldFocus = () => {
+    if (isMuted()) setIsMuted(false);
+  };
   const status = () => props.field.fieldStatus || "optional";
   const isUnsupported = () => status() === "unsupported";
   const isFieldDisabled = () => props.disabled || isUnsupported();
+  const sourceBadge = () => {
+    const src = props.field.source;
+    if (!src) return null;
+    return SOURCE_BADGES[src];
+  };
   const baseInputClass = () => `
     w-full px-3 py-2 border rounded-md
     focus:ring-2 focus:ring-blue-500 focus:border-blue-500
@@ -19,6 +43,7 @@ const FormFieldRenderer = (props) => {
     ${props.error ? "border-red-500 focus:ring-red-500" : "border-gray-300 dark:border-gray-600"}
     dark:bg-gray-700 dark:text-white
     ${isUnsupported() ? "opacity-50" : ""}
+    ${isMuted() ? "bg-gray-50 dark:bg-gray-700/50 text-gray-500 dark:text-gray-400" : ""}
   `;
   const fieldId = () => `field-${props.field.name}`;
   const errorId = () => `${props.field.name}-error`;
@@ -27,40 +52,53 @@ const FormFieldRenderer = (props) => {
       return isVisible();
     },
     get children() {
-      var _el$ = getNextElement(_tmpl$19), _el$49 = _el$.firstChild, [_el$50, _co$0] = getNextMarker(_el$49.nextSibling), _el$51 = _el$50.nextSibling, [_el$52, _co$1] = getNextMarker(_el$51.nextSibling), _el$53 = _el$52.nextSibling, [_el$54, _co$10] = getNextMarker(_el$53.nextSibling), _el$55 = _el$54.nextSibling, [_el$56, _co$11] = getNextMarker(_el$55.nextSibling), _el$57 = _el$56.nextSibling, [_el$58, _co$12] = getNextMarker(_el$57.nextSibling);
+      var _el$ = getNextElement(_tmpl$20), _el$53 = _el$.firstChild, [_el$54, _co$1] = getNextMarker(_el$53.nextSibling), _el$55 = _el$54.nextSibling, [_el$56, _co$10] = getNextMarker(_el$55.nextSibling), _el$57 = _el$56.nextSibling, [_el$58, _co$11] = getNextMarker(_el$57.nextSibling), _el$59 = _el$58.nextSibling, [_el$60, _co$12] = getNextMarker(_el$59.nextSibling), _el$61 = _el$60.nextSibling, [_el$62, _co$13] = getNextMarker(_el$61.nextSibling), _el$63 = _el$62.nextSibling, [_el$64, _co$14] = getNextMarker(_el$63.nextSibling);
+      _el$.$$click = handleFieldFocus;
+      _el$.$$focusin = handleFieldFocus;
       insert(_el$, createComponent(Show, {
         get when() {
           return memo(() => !!props.field.label)() && props.field.type !== "checkbox";
         },
         get children() {
-          var _el$2 = getNextElement(_tmpl$4), _el$6 = _el$2.firstChild, [_el$7, _co$] = getNextMarker(_el$6.nextSibling), _el$8 = _el$7.nextSibling, [_el$9, _co$2] = getNextMarker(_el$8.nextSibling), _el$0 = _el$9.nextSibling, [_el$1, _co$3] = getNextMarker(_el$0.nextSibling), _el$10 = _el$1.nextSibling, [_el$11, _co$4] = getNextMarker(_el$10.nextSibling);
-          insert(_el$2, () => props.field.label, _el$7, _co$);
+          var _el$2 = getNextElement(_tmpl$5), _el$7 = _el$2.firstChild, [_el$8, _co$] = getNextMarker(_el$7.nextSibling), _el$9 = _el$8.nextSibling, [_el$0, _co$2] = getNextMarker(_el$9.nextSibling), _el$1 = _el$0.nextSibling, [_el$10, _co$3] = getNextMarker(_el$1.nextSibling), _el$11 = _el$10.nextSibling, [_el$12, _co$4] = getNextMarker(_el$11.nextSibling), _el$13 = _el$12.nextSibling, [_el$14, _co$5] = getNextMarker(_el$13.nextSibling);
+          insert(_el$2, createComponent(Show, {
+            get when() {
+              return sourceBadge();
+            },
+            get children() {
+              var _el$3 = getNextElement(_tmpl$);
+              insert(_el$3, () => sourceBadge().icon);
+              effect(() => setAttribute(_el$3, "title", sourceBadge().title));
+              return _el$3;
+            }
+          }), _el$8, _co$);
+          insert(_el$2, () => props.field.label, _el$0, _co$2);
           insert(_el$2, createComponent(Show, {
             get when() {
               return props.field.required || status() === "required";
             },
             get children() {
-              return getNextElement(_tmpl$);
+              return getNextElement(_tmpl$2);
             }
-          }), _el$9, _co$2);
+          }), _el$10, _co$3);
           insert(_el$2, createComponent(Show, {
             get when() {
               return isUnsupported();
             },
             get children() {
-              return getNextElement(_tmpl$2);
+              return getNextElement(_tmpl$3);
             }
-          }), _el$1, _co$3);
+          }), _el$12, _co$4);
           insert(_el$2, createComponent(Show, {
             get when() {
               return status() === "unknown";
             },
             get children() {
-              return getNextElement(_tmpl$3);
+              return getNextElement(_tmpl$4);
             }
-          }), _el$11, _co$4);
+          }), _el$14, _co$5);
           effect((_p$) => {
-            var _v$ = fieldId(), _v$2 = `block text-sm font-medium ${isUnsupported() ? "text-gray-400 dark:text-gray-500" : "text-gray-700 dark:text-gray-300"}`;
+            var _v$ = fieldId(), _v$2 = `block text-sm font-medium ${isUnsupported() ? "text-gray-400 dark:text-gray-500" : isMuted() ? "text-gray-400 dark:text-gray-500" : "text-gray-700 dark:text-gray-300"}`;
             _v$ !== _p$.e && setAttribute(_el$2, "for", _p$.e = _v$);
             _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
             return _p$;
@@ -70,7 +108,7 @@ const FormFieldRenderer = (props) => {
           });
           return _el$2;
         }
-      }), _el$50, _co$0);
+      }), _el$54, _co$1);
       insert(_el$, createComponent(Switch, {
         get children() {
           return [createComponent(Match, {
@@ -78,22 +116,22 @@ const FormFieldRenderer = (props) => {
               return props.field.type === "text" || props.field.type === "email" || props.field.type === "password";
             },
             get children() {
-              var _el$12 = getNextElement(_tmpl$5);
-              _el$12.$$input = (e) => props.onChange(e.currentTarget.value);
+              var _el$15 = getNextElement(_tmpl$6);
+              _el$15.$$input = (e) => props.onChange(e.currentTarget.value);
               effect((_p$) => {
                 var _v$3 = fieldId(), _v$4 = props.field.type, _v$5 = props.field.name, _v$6 = props.field.placeholder, _v$7 = props.disabled, _v$8 = props.field.required, _v$9 = props.field.minLength, _v$0 = props.field.maxLength, _v$1 = props.field.pattern, _v$10 = !!props.error, _v$11 = props.error ? errorId() : void 0, _v$12 = baseInputClass();
-                _v$3 !== _p$.e && setAttribute(_el$12, "id", _p$.e = _v$3);
-                _v$4 !== _p$.t && setAttribute(_el$12, "type", _p$.t = _v$4);
-                _v$5 !== _p$.a && setAttribute(_el$12, "name", _p$.a = _v$5);
-                _v$6 !== _p$.o && setAttribute(_el$12, "placeholder", _p$.o = _v$6);
-                _v$7 !== _p$.i && setProperty(_el$12, "disabled", _p$.i = _v$7);
-                _v$8 !== _p$.n && setProperty(_el$12, "required", _p$.n = _v$8);
-                _v$9 !== _p$.s && setAttribute(_el$12, "minlength", _p$.s = _v$9);
-                _v$0 !== _p$.h && setAttribute(_el$12, "maxlength", _p$.h = _v$0);
-                _v$1 !== _p$.r && setAttribute(_el$12, "pattern", _p$.r = _v$1);
-                _v$10 !== _p$.d && setAttribute(_el$12, "aria-invalid", _p$.d = _v$10);
-                _v$11 !== _p$.l && setAttribute(_el$12, "aria-describedby", _p$.l = _v$11);
-                _v$12 !== _p$.u && className(_el$12, _p$.u = _v$12);
+                _v$3 !== _p$.e && setAttribute(_el$15, "id", _p$.e = _v$3);
+                _v$4 !== _p$.t && setAttribute(_el$15, "type", _p$.t = _v$4);
+                _v$5 !== _p$.a && setAttribute(_el$15, "name", _p$.a = _v$5);
+                _v$6 !== _p$.o && setAttribute(_el$15, "placeholder", _p$.o = _v$6);
+                _v$7 !== _p$.i && setProperty(_el$15, "disabled", _p$.i = _v$7);
+                _v$8 !== _p$.n && setProperty(_el$15, "required", _p$.n = _v$8);
+                _v$9 !== _p$.s && setAttribute(_el$15, "minlength", _p$.s = _v$9);
+                _v$0 !== _p$.h && setAttribute(_el$15, "maxlength", _p$.h = _v$0);
+                _v$1 !== _p$.r && setAttribute(_el$15, "pattern", _p$.r = _v$1);
+                _v$10 !== _p$.d && setAttribute(_el$15, "aria-invalid", _p$.d = _v$10);
+                _v$11 !== _p$.l && setAttribute(_el$15, "aria-describedby", _p$.l = _v$11);
+                _v$12 !== _p$.u && className(_el$15, _p$.u = _v$12);
                 return _p$;
               }, {
                 e: void 0,
@@ -109,30 +147,30 @@ const FormFieldRenderer = (props) => {
                 l: void 0,
                 u: void 0
               });
-              effect(() => setProperty(_el$12, "value", props.value || ""));
+              effect(() => setProperty(_el$15, "value", props.value || ""));
               runHydrationEvents();
-              return _el$12;
+              return _el$15;
             }
           }), createComponent(Match, {
             get when() {
               return props.field.type === "number";
             },
             get children() {
-              var _el$13 = getNextElement(_tmpl$6);
-              _el$13.$$input = (e) => props.onChange(e.currentTarget.value === "" ? void 0 : Number(e.currentTarget.value));
+              var _el$16 = getNextElement(_tmpl$7);
+              _el$16.$$input = (e) => props.onChange(e.currentTarget.value === "" ? void 0 : Number(e.currentTarget.value));
               effect((_p$) => {
                 var _v$13 = fieldId(), _v$14 = props.field.name, _v$15 = props.field.placeholder, _v$16 = props.disabled, _v$17 = props.field.required, _v$18 = props.field.min, _v$19 = props.field.max, _v$20 = props.field.step, _v$21 = !!props.error, _v$22 = props.error ? errorId() : void 0, _v$23 = baseInputClass();
-                _v$13 !== _p$.e && setAttribute(_el$13, "id", _p$.e = _v$13);
-                _v$14 !== _p$.t && setAttribute(_el$13, "name", _p$.t = _v$14);
-                _v$15 !== _p$.a && setAttribute(_el$13, "placeholder", _p$.a = _v$15);
-                _v$16 !== _p$.o && setProperty(_el$13, "disabled", _p$.o = _v$16);
-                _v$17 !== _p$.i && setProperty(_el$13, "required", _p$.i = _v$17);
-                _v$18 !== _p$.n && setAttribute(_el$13, "min", _p$.n = _v$18);
-                _v$19 !== _p$.s && setAttribute(_el$13, "max", _p$.s = _v$19);
-                _v$20 !== _p$.h && setAttribute(_el$13, "step", _p$.h = _v$20);
-                _v$21 !== _p$.r && setAttribute(_el$13, "aria-invalid", _p$.r = _v$21);
-                _v$22 !== _p$.d && setAttribute(_el$13, "aria-describedby", _p$.d = _v$22);
-                _v$23 !== _p$.l && className(_el$13, _p$.l = _v$23);
+                _v$13 !== _p$.e && setAttribute(_el$16, "id", _p$.e = _v$13);
+                _v$14 !== _p$.t && setAttribute(_el$16, "name", _p$.t = _v$14);
+                _v$15 !== _p$.a && setAttribute(_el$16, "placeholder", _p$.a = _v$15);
+                _v$16 !== _p$.o && setProperty(_el$16, "disabled", _p$.o = _v$16);
+                _v$17 !== _p$.i && setProperty(_el$16, "required", _p$.i = _v$17);
+                _v$18 !== _p$.n && setAttribute(_el$16, "min", _p$.n = _v$18);
+                _v$19 !== _p$.s && setAttribute(_el$16, "max", _p$.s = _v$19);
+                _v$20 !== _p$.h && setAttribute(_el$16, "step", _p$.h = _v$20);
+                _v$21 !== _p$.r && setAttribute(_el$16, "aria-invalid", _p$.r = _v$21);
+                _v$22 !== _p$.d && setAttribute(_el$16, "aria-describedby", _p$.d = _v$22);
+                _v$23 !== _p$.l && className(_el$16, _p$.l = _v$23);
                 return _p$;
               }, {
                 e: void 0,
@@ -147,28 +185,28 @@ const FormFieldRenderer = (props) => {
                 d: void 0,
                 l: void 0
               });
-              effect(() => setProperty(_el$13, "value", props.value ?? ""));
+              effect(() => setProperty(_el$16, "value", props.value ?? ""));
               runHydrationEvents();
-              return _el$13;
+              return _el$16;
             }
           }), createComponent(Match, {
             get when() {
               return props.field.type === "date";
             },
             get children() {
-              var _el$14 = getNextElement(_tmpl$7);
-              _el$14.$$input = (e) => props.onChange(e.currentTarget.value);
+              var _el$17 = getNextElement(_tmpl$8);
+              _el$17.$$input = (e) => props.onChange(e.currentTarget.value);
               effect((_p$) => {
                 var _v$24 = fieldId(), _v$25 = props.field.name, _v$26 = props.disabled, _v$27 = props.field.required, _v$28 = props.field.minDate, _v$29 = props.field.maxDate, _v$30 = !!props.error, _v$31 = props.error ? errorId() : void 0, _v$32 = baseInputClass();
-                _v$24 !== _p$.e && setAttribute(_el$14, "id", _p$.e = _v$24);
-                _v$25 !== _p$.t && setAttribute(_el$14, "name", _p$.t = _v$25);
-                _v$26 !== _p$.a && setProperty(_el$14, "disabled", _p$.a = _v$26);
-                _v$27 !== _p$.o && setProperty(_el$14, "required", _p$.o = _v$27);
-                _v$28 !== _p$.i && setAttribute(_el$14, "min", _p$.i = _v$28);
-                _v$29 !== _p$.n && setAttribute(_el$14, "max", _p$.n = _v$29);
-                _v$30 !== _p$.s && setAttribute(_el$14, "aria-invalid", _p$.s = _v$30);
-                _v$31 !== _p$.h && setAttribute(_el$14, "aria-describedby", _p$.h = _v$31);
-                _v$32 !== _p$.r && className(_el$14, _p$.r = _v$32);
+                _v$24 !== _p$.e && setAttribute(_el$17, "id", _p$.e = _v$24);
+                _v$25 !== _p$.t && setAttribute(_el$17, "name", _p$.t = _v$25);
+                _v$26 !== _p$.a && setProperty(_el$17, "disabled", _p$.a = _v$26);
+                _v$27 !== _p$.o && setProperty(_el$17, "required", _p$.o = _v$27);
+                _v$28 !== _p$.i && setAttribute(_el$17, "min", _p$.i = _v$28);
+                _v$29 !== _p$.n && setAttribute(_el$17, "max", _p$.n = _v$29);
+                _v$30 !== _p$.s && setAttribute(_el$17, "aria-invalid", _p$.s = _v$30);
+                _v$31 !== _p$.h && setAttribute(_el$17, "aria-describedby", _p$.h = _v$31);
+                _v$32 !== _p$.r && className(_el$17, _p$.r = _v$32);
                 return _p$;
               }, {
                 e: void 0,
@@ -181,30 +219,30 @@ const FormFieldRenderer = (props) => {
                 h: void 0,
                 r: void 0
               });
-              effect(() => setProperty(_el$14, "value", props.value || ""));
+              effect(() => setProperty(_el$17, "value", props.value || ""));
               runHydrationEvents();
-              return _el$14;
+              return _el$17;
             }
           }), createComponent(Match, {
             get when() {
               return props.field.type === "textarea";
             },
             get children() {
-              var _el$15 = getNextElement(_tmpl$8);
-              _el$15.$$input = (e) => props.onChange(e.currentTarget.value);
+              var _el$18 = getNextElement(_tmpl$9);
+              _el$18.$$input = (e) => props.onChange(e.currentTarget.value);
               effect((_p$) => {
                 var _v$33 = fieldId(), _v$34 = props.field.name, _v$35 = props.field.placeholder, _v$36 = props.disabled, _v$37 = props.field.required, _v$38 = props.field.rows || 4, _v$39 = props.field.minLength, _v$40 = props.field.maxLength, _v$41 = !!props.error, _v$42 = props.error ? errorId() : void 0, _v$43 = baseInputClass();
-                _v$33 !== _p$.e && setAttribute(_el$15, "id", _p$.e = _v$33);
-                _v$34 !== _p$.t && setAttribute(_el$15, "name", _p$.t = _v$34);
-                _v$35 !== _p$.a && setAttribute(_el$15, "placeholder", _p$.a = _v$35);
-                _v$36 !== _p$.o && setProperty(_el$15, "disabled", _p$.o = _v$36);
-                _v$37 !== _p$.i && setProperty(_el$15, "required", _p$.i = _v$37);
-                _v$38 !== _p$.n && setAttribute(_el$15, "rows", _p$.n = _v$38);
-                _v$39 !== _p$.s && setAttribute(_el$15, "minlength", _p$.s = _v$39);
-                _v$40 !== _p$.h && setAttribute(_el$15, "maxlength", _p$.h = _v$40);
-                _v$41 !== _p$.r && setAttribute(_el$15, "aria-invalid", _p$.r = _v$41);
-                _v$42 !== _p$.d && setAttribute(_el$15, "aria-describedby", _p$.d = _v$42);
-                _v$43 !== _p$.l && className(_el$15, _p$.l = _v$43);
+                _v$33 !== _p$.e && setAttribute(_el$18, "id", _p$.e = _v$33);
+                _v$34 !== _p$.t && setAttribute(_el$18, "name", _p$.t = _v$34);
+                _v$35 !== _p$.a && setAttribute(_el$18, "placeholder", _p$.a = _v$35);
+                _v$36 !== _p$.o && setProperty(_el$18, "disabled", _p$.o = _v$36);
+                _v$37 !== _p$.i && setProperty(_el$18, "required", _p$.i = _v$37);
+                _v$38 !== _p$.n && setAttribute(_el$18, "rows", _p$.n = _v$38);
+                _v$39 !== _p$.s && setAttribute(_el$18, "minlength", _p$.s = _v$39);
+                _v$40 !== _p$.h && setAttribute(_el$18, "maxlength", _p$.h = _v$40);
+                _v$41 !== _p$.r && setAttribute(_el$18, "aria-invalid", _p$.r = _v$41);
+                _v$42 !== _p$.d && setAttribute(_el$18, "aria-describedby", _p$.d = _v$42);
+                _v$43 !== _p$.l && className(_el$18, _p$.l = _v$43);
                 return _p$;
               }, {
                 e: void 0,
@@ -219,48 +257,48 @@ const FormFieldRenderer = (props) => {
                 d: void 0,
                 l: void 0
               });
-              effect(() => setProperty(_el$15, "value", props.value || ""));
+              effect(() => setProperty(_el$18, "value", props.value || ""));
               runHydrationEvents();
-              return _el$15;
+              return _el$18;
             }
           }), createComponent(Match, {
             get when() {
               return memo(() => props.field.type === "select")() && !props.field.multiple;
             },
             get children() {
-              var _el$16 = getNextElement(_tmpl$0), _el$18 = _el$16.firstChild, [_el$19, _co$5] = getNextMarker(_el$18.nextSibling), _el$20 = _el$19.nextSibling, [_el$21, _co$6] = getNextMarker(_el$20.nextSibling);
-              _el$16.addEventListener("change", (e) => props.onChange(e.currentTarget.value));
-              insert(_el$16, createComponent(Show, {
+              var _el$19 = getNextElement(_tmpl$1), _el$21 = _el$19.firstChild, [_el$22, _co$6] = getNextMarker(_el$21.nextSibling), _el$23 = _el$22.nextSibling, [_el$24, _co$7] = getNextMarker(_el$23.nextSibling);
+              _el$19.addEventListener("change", (e) => props.onChange(e.currentTarget.value));
+              insert(_el$19, createComponent(Show, {
                 get when() {
                   return props.field.placeholder;
                 },
                 get children() {
-                  var _el$17 = getNextElement(_tmpl$9);
-                  insert(_el$17, () => props.field.placeholder);
-                  return _el$17;
+                  var _el$20 = getNextElement(_tmpl$0);
+                  insert(_el$20, () => props.field.placeholder);
+                  return _el$20;
                 }
-              }), _el$19, _co$5);
-              insert(_el$16, createComponent(For, {
+              }), _el$22, _co$6);
+              insert(_el$19, createComponent(For, {
                 get each() {
                   return props.field.options;
                 },
                 children: (option) => (() => {
-                  var _el$59 = getNextElement(_tmpl$20);
-                  insert(_el$59, () => option.label);
-                  effect(() => setProperty(_el$59, "disabled", option.disabled));
-                  effect(() => setProperty(_el$59, "value", option.value));
-                  return _el$59;
+                  var _el$65 = getNextElement(_tmpl$21);
+                  insert(_el$65, () => option.label);
+                  effect(() => setProperty(_el$65, "disabled", option.disabled));
+                  effect(() => setProperty(_el$65, "value", option.value));
+                  return _el$65;
                 })()
-              }), _el$21, _co$6);
+              }), _el$24, _co$7);
               effect((_p$) => {
                 var _v$44 = fieldId(), _v$45 = props.field.name, _v$46 = props.disabled, _v$47 = props.field.required, _v$48 = !!props.error, _v$49 = props.error ? errorId() : void 0, _v$50 = baseInputClass();
-                _v$44 !== _p$.e && setAttribute(_el$16, "id", _p$.e = _v$44);
-                _v$45 !== _p$.t && setAttribute(_el$16, "name", _p$.t = _v$45);
-                _v$46 !== _p$.a && setProperty(_el$16, "disabled", _p$.a = _v$46);
-                _v$47 !== _p$.o && setProperty(_el$16, "required", _p$.o = _v$47);
-                _v$48 !== _p$.i && setAttribute(_el$16, "aria-invalid", _p$.i = _v$48);
-                _v$49 !== _p$.n && setAttribute(_el$16, "aria-describedby", _p$.n = _v$49);
-                _v$50 !== _p$.s && className(_el$16, _p$.s = _v$50);
+                _v$44 !== _p$.e && setAttribute(_el$19, "id", _p$.e = _v$44);
+                _v$45 !== _p$.t && setAttribute(_el$19, "name", _p$.t = _v$45);
+                _v$46 !== _p$.a && setProperty(_el$19, "disabled", _p$.a = _v$46);
+                _v$47 !== _p$.o && setProperty(_el$19, "required", _p$.o = _v$47);
+                _v$48 !== _p$.i && setAttribute(_el$19, "aria-invalid", _p$.i = _v$48);
+                _v$49 !== _p$.n && setAttribute(_el$19, "aria-describedby", _p$.n = _v$49);
+                _v$50 !== _p$.s && className(_el$19, _p$.s = _v$50);
                 return _p$;
               }, {
                 e: void 0,
@@ -271,32 +309,32 @@ const FormFieldRenderer = (props) => {
                 n: void 0,
                 s: void 0
               });
-              effect(() => setProperty(_el$16, "value", props.value || ""));
-              return _el$16;
+              effect(() => setProperty(_el$19, "value", props.value || ""));
+              return _el$19;
             }
           }), createComponent(Match, {
             get when() {
               return props.field.type === "checkbox";
             },
             get children() {
-              var _el$22 = getNextElement(_tmpl$1), _el$23 = _el$22.firstChild, _el$24 = _el$23.nextSibling, _el$26 = _el$24.firstChild, [_el$27, _co$7] = getNextMarker(_el$26.nextSibling), _el$28 = _el$27.nextSibling, [_el$29, _co$8] = getNextMarker(_el$28.nextSibling);
-              _el$23.addEventListener("change", (e) => props.onChange(e.currentTarget.checked));
-              insert(_el$24, () => props.field.checkboxLabel || props.field.label, _el$27, _co$7);
-              insert(_el$24, createComponent(Show, {
+              var _el$25 = getNextElement(_tmpl$10), _el$26 = _el$25.firstChild, _el$27 = _el$26.nextSibling, _el$29 = _el$27.firstChild, [_el$30, _co$8] = getNextMarker(_el$29.nextSibling), _el$31 = _el$30.nextSibling, [_el$32, _co$9] = getNextMarker(_el$31.nextSibling);
+              _el$26.addEventListener("change", (e) => props.onChange(e.currentTarget.checked));
+              insert(_el$27, () => props.field.checkboxLabel || props.field.label, _el$30, _co$8);
+              insert(_el$27, createComponent(Show, {
                 get when() {
                   return props.field.required;
                 },
                 get children() {
-                  return getNextElement(_tmpl$);
+                  return getNextElement(_tmpl$2);
                 }
-              }), _el$29, _co$8);
+              }), _el$32, _co$9);
               effect((_p$) => {
                 var _v$51 = fieldId(), _v$52 = props.field.name, _v$53 = props.disabled, _v$54 = !!props.error, _v$55 = props.error ? errorId() : void 0;
-                _v$51 !== _p$.e && setAttribute(_el$23, "id", _p$.e = _v$51);
-                _v$52 !== _p$.t && setAttribute(_el$23, "name", _p$.t = _v$52);
-                _v$53 !== _p$.a && setProperty(_el$23, "disabled", _p$.a = _v$53);
-                _v$54 !== _p$.o && setAttribute(_el$23, "aria-invalid", _p$.o = _v$54);
-                _v$55 !== _p$.i && setAttribute(_el$23, "aria-describedby", _p$.i = _v$55);
+                _v$51 !== _p$.e && setAttribute(_el$26, "id", _p$.e = _v$51);
+                _v$52 !== _p$.t && setAttribute(_el$26, "name", _p$.t = _v$52);
+                _v$53 !== _p$.a && setProperty(_el$26, "disabled", _p$.a = _v$53);
+                _v$54 !== _p$.o && setAttribute(_el$26, "aria-invalid", _p$.o = _v$54);
+                _v$55 !== _p$.i && setAttribute(_el$26, "aria-describedby", _p$.i = _v$55);
                 return _p$;
               }, {
                 e: void 0,
@@ -305,8 +343,8 @@ const FormFieldRenderer = (props) => {
                 o: void 0,
                 i: void 0
               });
-              effect(() => setProperty(_el$23, "checked", props.value || false));
-              return _el$22;
+              effect(() => setProperty(_el$26, "checked", props.value || false));
+              return _el$25;
             }
           }), createComponent(Match, {
             get when() {
@@ -359,60 +397,60 @@ const FormFieldRenderer = (props) => {
               return props.field.type === "radio";
             },
             get children() {
-              var _el$30 = getNextElement(_tmpl$10);
-              insert(_el$30, createComponent(For, {
+              var _el$33 = getNextElement(_tmpl$11);
+              insert(_el$33, createComponent(For, {
                 get each() {
                   return props.field.options;
                 },
                 children: (option, index) => (() => {
-                  var _el$60 = getNextElement(_tmpl$21), _el$61 = _el$60.firstChild, _el$62 = _el$61.nextSibling;
-                  _el$61.addEventListener("change", () => props.onChange(option.value));
-                  insert(_el$62, () => option.label);
+                  var _el$66 = getNextElement(_tmpl$22), _el$67 = _el$66.firstChild, _el$68 = _el$67.nextSibling;
+                  _el$67.addEventListener("change", () => props.onChange(option.value));
+                  insert(_el$68, () => option.label);
                   effect((_p$) => {
                     var _v$74 = props.field.name, _v$75 = `${fieldId()}-${index()}`, _v$76 = props.disabled || option.disabled;
-                    _v$74 !== _p$.e && setAttribute(_el$61, "name", _p$.e = _v$74);
-                    _v$75 !== _p$.t && setAttribute(_el$61, "id", _p$.t = _v$75);
-                    _v$76 !== _p$.a && setProperty(_el$61, "disabled", _p$.a = _v$76);
+                    _v$74 !== _p$.e && setAttribute(_el$67, "name", _p$.e = _v$74);
+                    _v$75 !== _p$.t && setAttribute(_el$67, "id", _p$.t = _v$75);
+                    _v$76 !== _p$.a && setProperty(_el$67, "disabled", _p$.a = _v$76);
                     return _p$;
                   }, {
                     e: void 0,
                     t: void 0,
                     a: void 0
                   });
-                  effect(() => setProperty(_el$61, "value", option.value));
-                  effect(() => setProperty(_el$61, "checked", props.value === option.value));
-                  return _el$60;
+                  effect(() => setProperty(_el$67, "value", option.value));
+                  effect(() => setProperty(_el$67, "checked", props.value === option.value));
+                  return _el$66;
                 })()
               }));
               effect((_p$) => {
                 var _v$56 = props.field.label ? `${fieldId()}-label` : void 0, _v$57 = !!props.error, _v$58 = props.error ? errorId() : void 0;
-                _v$56 !== _p$.e && setAttribute(_el$30, "aria-labelledby", _p$.e = _v$56);
-                _v$57 !== _p$.t && setAttribute(_el$30, "aria-invalid", _p$.t = _v$57);
-                _v$58 !== _p$.a && setAttribute(_el$30, "aria-describedby", _p$.a = _v$58);
+                _v$56 !== _p$.e && setAttribute(_el$33, "aria-labelledby", _p$.e = _v$56);
+                _v$57 !== _p$.t && setAttribute(_el$33, "aria-invalid", _p$.t = _v$57);
+                _v$58 !== _p$.a && setAttribute(_el$33, "aria-describedby", _p$.a = _v$58);
                 return _p$;
               }, {
                 e: void 0,
                 t: void 0,
                 a: void 0
               });
-              return _el$30;
+              return _el$33;
             }
           }), createComponent(Match, {
             get when() {
               return props.field.type === "range";
             },
             get children() {
-              var _el$31 = getNextElement(_tmpl$11), _el$32 = _el$31.firstChild, _el$33 = _el$32.nextSibling;
-              _el$32.$$input = (e) => props.onChange(Number(e.currentTarget.value));
-              insert(_el$33, () => props.value ?? props.field.min ?? 0);
+              var _el$34 = getNextElement(_tmpl$12), _el$35 = _el$34.firstChild, _el$36 = _el$35.nextSibling;
+              _el$35.$$input = (e) => props.onChange(Number(e.currentTarget.value));
+              insert(_el$36, () => props.value ?? props.field.min ?? 0);
               effect((_p$) => {
                 var _v$59 = fieldId(), _v$60 = props.field.name, _v$61 = props.field.min, _v$62 = props.field.max, _v$63 = props.field.step || 1, _v$64 = isFieldDisabled();
-                _v$59 !== _p$.e && setAttribute(_el$32, "id", _p$.e = _v$59);
-                _v$60 !== _p$.t && setAttribute(_el$32, "name", _p$.t = _v$60);
-                _v$61 !== _p$.a && setAttribute(_el$32, "min", _p$.a = _v$61);
-                _v$62 !== _p$.o && setAttribute(_el$32, "max", _p$.o = _v$62);
-                _v$63 !== _p$.i && setAttribute(_el$32, "step", _p$.i = _v$63);
-                _v$64 !== _p$.n && setProperty(_el$32, "disabled", _p$.n = _v$64);
+                _v$59 !== _p$.e && setAttribute(_el$35, "id", _p$.e = _v$59);
+                _v$60 !== _p$.t && setAttribute(_el$35, "name", _p$.t = _v$60);
+                _v$61 !== _p$.a && setAttribute(_el$35, "min", _p$.a = _v$61);
+                _v$62 !== _p$.o && setAttribute(_el$35, "max", _p$.o = _v$62);
+                _v$63 !== _p$.i && setAttribute(_el$35, "step", _p$.i = _v$63);
+                _v$64 !== _p$.n && setProperty(_el$35, "disabled", _p$.n = _v$64);
                 return _p$;
               }, {
                 e: void 0,
@@ -422,9 +460,9 @@ const FormFieldRenderer = (props) => {
                 i: void 0,
                 n: void 0
               });
-              effect(() => setProperty(_el$32, "value", props.value ?? props.field.min ?? 0));
+              effect(() => setProperty(_el$35, "value", props.value ?? props.field.min ?? 0));
               runHydrationEvents();
-              return _el$31;
+              return _el$34;
             }
           }), createComponent(Match, {
             get when() {
@@ -454,15 +492,15 @@ const FormFieldRenderer = (props) => {
               return props.field.type === "toggle";
             },
             get children() {
-              var _el$34 = getNextElement(_tmpl$12), _el$35 = _el$34.firstChild, _el$36 = _el$35.firstChild, _el$37 = _el$35.nextSibling;
-              _el$35.$$click = () => props.onChange(!props.value);
-              insert(_el$37, () => props.field.checkboxLabel || props.field.label);
+              var _el$37 = getNextElement(_tmpl$13), _el$38 = _el$37.firstChild, _el$39 = _el$38.firstChild, _el$40 = _el$38.nextSibling;
+              _el$38.$$click = () => props.onChange(!props.value);
+              insert(_el$40, () => props.field.checkboxLabel || props.field.label);
               effect((_p$) => {
                 var _v$65 = !!props.value, _v$66 = isFieldDisabled(), _v$67 = `relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${props.value ? "bg-blue-600" : "bg-gray-300 dark:bg-gray-600"} ${isFieldDisabled() ? "opacity-50 cursor-not-allowed" : ""}`, _v$68 = `inline-block h-3.5 w-3.5 transform rounded-full bg-white transition-transform ${props.value ? "translate-x-4" : "translate-x-0.5"}`;
-                _v$65 !== _p$.e && setAttribute(_el$35, "aria-checked", _p$.e = _v$65);
-                _v$66 !== _p$.t && setProperty(_el$35, "disabled", _p$.t = _v$66);
-                _v$67 !== _p$.a && className(_el$35, _p$.a = _v$67);
-                _v$68 !== _p$.o && className(_el$36, _p$.o = _v$68);
+                _v$65 !== _p$.e && setAttribute(_el$38, "aria-checked", _p$.e = _v$65);
+                _v$66 !== _p$.t && setProperty(_el$38, "disabled", _p$.t = _v$66);
+                _v$67 !== _p$.a && className(_el$38, _p$.a = _v$67);
+                _v$68 !== _p$.o && className(_el$39, _p$.o = _v$68);
                 return _p$;
               }, {
                 e: void 0,
@@ -471,31 +509,31 @@ const FormFieldRenderer = (props) => {
                 o: void 0
               });
               runHydrationEvents();
-              return _el$34;
+              return _el$37;
             }
           }), createComponent(Match, {
             get when() {
               return props.field.type === "fieldset";
             },
             get children() {
-              var _el$38 = getNextElement(_tmpl$13), _el$39 = _el$38.firstChild, _el$40 = _el$39.nextSibling;
-              insert(_el$39, () => props.field.label);
-              insert(_el$40, () => props.field.helpText || "Group container");
-              return _el$38;
+              var _el$41 = getNextElement(_tmpl$14), _el$42 = _el$41.firstChild, _el$43 = _el$42.nextSibling;
+              insert(_el$42, () => props.field.label);
+              insert(_el$43, () => props.field.helpText || "Group container");
+              return _el$41;
             }
           }), createComponent(Match, {
             when: true,
             get children() {
               return [(() => {
-                var _el$41 = getNextElement(_tmpl$14);
-                _el$41.$$input = (e) => props.onChange(e.currentTarget.value);
+                var _el$44 = getNextElement(_tmpl$15);
+                _el$44.$$input = (e) => props.onChange(e.currentTarget.value);
                 effect((_p$) => {
                   var _v$69 = fieldId(), _v$70 = props.field.name, _v$71 = props.field.placeholder || `(${props.field.type})`, _v$72 = props.disabled, _v$73 = baseInputClass();
-                  _v$69 !== _p$.e && setAttribute(_el$41, "id", _p$.e = _v$69);
-                  _v$70 !== _p$.t && setAttribute(_el$41, "name", _p$.t = _v$70);
-                  _v$71 !== _p$.a && setAttribute(_el$41, "placeholder", _p$.a = _v$71);
-                  _v$72 !== _p$.o && setProperty(_el$41, "disabled", _p$.o = _v$72);
-                  _v$73 !== _p$.i && className(_el$41, _p$.i = _v$73);
+                  _v$69 !== _p$.e && setAttribute(_el$44, "id", _p$.e = _v$69);
+                  _v$70 !== _p$.t && setAttribute(_el$44, "name", _p$.t = _v$70);
+                  _v$71 !== _p$.a && setAttribute(_el$44, "placeholder", _p$.a = _v$71);
+                  _v$72 !== _p$.o && setProperty(_el$44, "disabled", _p$.o = _v$72);
+                  _v$73 !== _p$.i && className(_el$44, _p$.i = _v$73);
                   return _p$;
                 }, {
                   e: void 0,
@@ -504,50 +542,62 @@ const FormFieldRenderer = (props) => {
                   o: void 0,
                   i: void 0
                 });
-                effect(() => setProperty(_el$41, "value", props.value || ""));
+                effect(() => setProperty(_el$44, "value", props.value || ""));
                 runHydrationEvents();
-                return _el$41;
+                return _el$44;
               })(), (() => {
-                var _el$42 = getNextElement(_tmpl$15), _el$43 = _el$42.firstChild, _el$44 = _el$43.nextSibling, [_el$45, _co$9] = getNextMarker(_el$44.nextSibling);
-                insert(_el$42, () => props.field.type, _el$45, _co$9);
-                return _el$42;
+                var _el$45 = getNextElement(_tmpl$16), _el$46 = _el$45.firstChild, _el$47 = _el$46.nextSibling, [_el$48, _co$0] = getNextMarker(_el$47.nextSibling);
+                insert(_el$45, () => props.field.type, _el$48, _co$0);
+                return _el$45;
               })()];
             }
           })];
         }
-      }), _el$52, _co$1);
+      }), _el$56, _co$10);
       insert(_el$, createComponent(Show, {
         get when() {
           return props.field.statusReason;
         },
         get children() {
-          var _el$46 = getNextElement(_tmpl$16);
-          insert(_el$46, () => props.field.statusReason);
-          effect(() => className(_el$46, `text-xs ${isUnsupported() ? "text-orange-500 dark:text-orange-400" : status() === "unknown" ? "text-yellow-500 dark:text-yellow-400" : status() === "required" ? "text-blue-500 dark:text-blue-400" : "text-gray-500 dark:text-gray-400"}`));
-          return _el$46;
+          var _el$49 = getNextElement(_tmpl$17);
+          insert(_el$49, () => props.field.statusReason);
+          effect(() => className(_el$49, `text-xs ${isUnsupported() ? "text-orange-500 dark:text-orange-400" : status() === "unknown" ? "text-yellow-500 dark:text-yellow-400" : status() === "required" ? "text-blue-500 dark:text-blue-400" : "text-gray-500 dark:text-gray-400"}`));
+          return _el$49;
         }
-      }), _el$54, _co$10);
+      }), _el$58, _co$11);
       insert(_el$, createComponent(Show, {
         get when() {
-          return memo(() => !!(props.field.helpText && !props.error))() && !props.field.statusReason;
+          return memo(() => !!props.field.displayHint)() && props.field.prefill != null;
         },
         get children() {
-          var _el$47 = getNextElement(_tmpl$17);
-          insert(_el$47, () => props.field.helpText);
-          return _el$47;
+          var _el$50 = getNextElement(_tmpl$17);
+          insert(_el$50, () => props.field.displayHint);
+          effect(() => className(_el$50, `text-xs italic ${isMuted() ? "text-gray-400 dark:text-gray-500" : "text-gray-500 dark:text-gray-400"}`));
+          return _el$50;
         }
-      }), _el$56, _co$11);
+      }), _el$60, _co$12);
+      insert(_el$, createComponent(Show, {
+        get when() {
+          return memo(() => !!(props.field.helpText && !props.error && !props.field.statusReason))() && !props.field.displayHint;
+        },
+        get children() {
+          var _el$51 = getNextElement(_tmpl$18);
+          insert(_el$51, () => props.field.helpText);
+          return _el$51;
+        }
+      }), _el$62, _co$13);
       insert(_el$, createComponent(Show, {
         get when() {
           return props.error;
         },
         get children() {
-          var _el$48 = getNextElement(_tmpl$18);
-          insert(_el$48, () => props.error);
-          effect(() => setAttribute(_el$48, "id", errorId()));
-          return _el$48;
+          var _el$52 = getNextElement(_tmpl$19);
+          insert(_el$52, () => props.error);
+          effect(() => setAttribute(_el$52, "id", errorId()));
+          return _el$52;
         }
-      }), _el$58, _co$12);
+      }), _el$64, _co$14);
+      runHydrationEvents();
       return _el$;
     }
   });
@@ -576,84 +626,84 @@ const MultiSelectField = (props) => {
     return (props.field.options || []).filter((o) => o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q));
   };
   return (() => {
-    var _el$63 = getNextElement(_tmpl$26), _el$78 = _el$63.firstChild, [_el$79, _co$16] = getNextMarker(_el$78.nextSibling), _el$65 = _el$79.nextSibling, _el$66 = _el$65.firstChild, _el$80 = _el$65.nextSibling, [_el$81, _co$17] = getNextMarker(_el$80.nextSibling);
-    insert(_el$63, createComponent(Show, {
+    var _el$69 = getNextElement(_tmpl$27), _el$84 = _el$69.firstChild, [_el$85, _co$18] = getNextMarker(_el$84.nextSibling), _el$71 = _el$85.nextSibling, _el$72 = _el$71.firstChild, _el$86 = _el$71.nextSibling, [_el$87, _co$19] = getNextMarker(_el$86.nextSibling);
+    insert(_el$69, createComponent(Show, {
       get when() {
         return props.value.length > 0;
       },
       get children() {
-        var _el$64 = getNextElement(_tmpl$22);
-        insert(_el$64, createComponent(For, {
+        var _el$70 = getNextElement(_tmpl$23);
+        insert(_el$70, createComponent(For, {
           get each() {
             return props.value;
           },
           children: (val) => (() => {
-            var _el$82 = getNextElement(_tmpl$27), _el$84 = _el$82.firstChild, [_el$85, _co$18] = getNextMarker(_el$84.nextSibling), _el$83 = _el$85.nextSibling;
-            insert(_el$82, () => getLabel(val), _el$85, _co$18);
-            _el$83.$$click = () => removeChip(val);
-            effect(() => setAttribute(_el$83, "aria-label", `Remove ${getLabel(val)}`));
+            var _el$88 = getNextElement(_tmpl$28), _el$90 = _el$88.firstChild, [_el$91, _co$20] = getNextMarker(_el$90.nextSibling), _el$89 = _el$91.nextSibling;
+            insert(_el$88, () => getLabel(val), _el$91, _co$20);
+            _el$89.$$click = () => removeChip(val);
+            effect(() => setAttribute(_el$89, "aria-label", `Remove ${getLabel(val)}`));
             runHydrationEvents();
-            return _el$82;
+            return _el$88;
           })()
         }));
-        return _el$64;
+        return _el$70;
       }
-    }), _el$79, _co$16);
-    _el$65.$$click = () => {
+    }), _el$85, _co$18);
+    _el$71.$$click = () => {
       setOpen(!open());
       if (!open()) setFilter("");
     };
-    insert(_el$66, (() => {
+    insert(_el$72, (() => {
       var _c$ = memo(() => !!props.value.length);
       return () => _c$() ? `${props.value.length} selected` : props.field.placeholder || "Select...";
     })());
-    insert(_el$63, createComponent(Show, {
+    insert(_el$69, createComponent(Show, {
       get when() {
         return open();
       },
       get children() {
-        var _el$67 = getNextElement(_tmpl$25), _el$76 = _el$67.firstChild, [_el$77, _co$15] = getNextMarker(_el$76.nextSibling), _el$70 = _el$77.nextSibling, _el$72 = _el$70.firstChild, [_el$73, _co$13] = getNextMarker(_el$72.nextSibling), _el$74 = _el$73.nextSibling, [_el$75, _co$14] = getNextMarker(_el$74.nextSibling);
-        insert(_el$67, createComponent(Show, {
+        var _el$73 = getNextElement(_tmpl$26), _el$82 = _el$73.firstChild, [_el$83, _co$17] = getNextMarker(_el$82.nextSibling), _el$76 = _el$83.nextSibling, _el$78 = _el$76.firstChild, [_el$79, _co$15] = getNextMarker(_el$78.nextSibling), _el$80 = _el$79.nextSibling, [_el$81, _co$16] = getNextMarker(_el$80.nextSibling);
+        insert(_el$73, createComponent(Show, {
           get when() {
             var _a;
             return (((_a = props.field.options) == null ? void 0 : _a.length) || 0) > 10;
           },
           get children() {
-            var _el$68 = getNextElement(_tmpl$23), _el$69 = _el$68.firstChild;
-            _el$69.$$input = (e) => setFilter(e.currentTarget.value);
-            effect(() => setProperty(_el$69, "value", filter()));
+            var _el$74 = getNextElement(_tmpl$24), _el$75 = _el$74.firstChild;
+            _el$75.$$input = (e) => setFilter(e.currentTarget.value);
+            effect(() => setProperty(_el$75, "value", filter()));
             runHydrationEvents();
-            return _el$68;
+            return _el$74;
           }
-        }), _el$77, _co$15);
-        insert(_el$70, createComponent(For, {
+        }), _el$83, _co$17);
+        insert(_el$76, createComponent(For, {
           get each() {
             return filteredOptions();
           },
           children: (option) => (() => {
-            var _el$86 = getNextElement(_tmpl$28), _el$87 = _el$86.firstChild, _el$88 = _el$87.nextSibling;
-            _el$87.addEventListener("change", () => toggle(option.value));
-            insert(_el$88, () => option.label);
-            effect(() => setProperty(_el$87, "checked", (props.value || []).includes(option.value)));
-            return _el$86;
+            var _el$92 = getNextElement(_tmpl$29), _el$93 = _el$92.firstChild, _el$94 = _el$93.nextSibling;
+            _el$93.addEventListener("change", () => toggle(option.value));
+            insert(_el$94, () => option.label);
+            effect(() => setProperty(_el$93, "checked", (props.value || []).includes(option.value)));
+            return _el$92;
           })()
-        }), _el$73, _co$13);
-        insert(_el$70, createComponent(Show, {
+        }), _el$79, _co$15);
+        insert(_el$76, createComponent(Show, {
           get when() {
             return filteredOptions().length === 0;
           },
           get children() {
-            return getNextElement(_tmpl$24);
+            return getNextElement(_tmpl$25);
           }
-        }), _el$75, _co$14);
-        return _el$67;
+        }), _el$81, _co$16);
+        return _el$73;
       }
-    }), _el$81, _co$17);
+    }), _el$87, _co$19);
     effect((_p$) => {
       var _v$77 = props.disabled, _v$78 = `${props.baseClass} text-left flex items-center justify-between`, _v$79 = props.value.length ? "text-gray-900 dark:text-white" : "text-gray-400";
-      _v$77 !== _p$.e && setProperty(_el$65, "disabled", _p$.e = _v$77);
-      _v$78 !== _p$.t && className(_el$65, _p$.t = _v$78);
-      _v$79 !== _p$.a && className(_el$66, _p$.a = _v$79);
+      _v$77 !== _p$.e && setProperty(_el$71, "disabled", _p$.e = _v$77);
+      _v$78 !== _p$.t && className(_el$71, _p$.t = _v$78);
+      _v$79 !== _p$.a && className(_el$72, _p$.a = _v$79);
       return _p$;
     }, {
       e: void 0,
@@ -661,7 +711,7 @@ const MultiSelectField = (props) => {
       a: void 0
     });
     runHydrationEvents();
-    return _el$63;
+    return _el$69;
   })();
 };
 const AutocompleteField = (props) => {
@@ -747,90 +797,90 @@ const AutocompleteField = (props) => {
     if (debounceTimer) clearTimeout(debounceTimer);
   });
   return (() => {
-    var _el$89 = getNextElement(_tmpl$30), _el$93 = _el$89.firstChild, [_el$94, _co$19] = getNextMarker(_el$93.nextSibling), _el$91 = _el$94.nextSibling, _el$95 = _el$91.nextSibling, [_el$96, _co$20] = getNextMarker(_el$95.nextSibling);
-    insert(_el$89, createComponent(Show, {
+    var _el$95 = getNextElement(_tmpl$31), _el$99 = _el$95.firstChild, [_el$100, _co$21] = getNextMarker(_el$99.nextSibling), _el$97 = _el$100.nextSibling, _el$101 = _el$97.nextSibling, [_el$102, _co$22] = getNextMarker(_el$101.nextSibling);
+    insert(_el$95, createComponent(Show, {
       get when() {
         return memo(() => !!isMultiple())() && selectedValues().length > 0;
       },
       get children() {
-        var _el$90 = getNextElement(_tmpl$22);
-        insert(_el$90, createComponent(For, {
+        var _el$96 = getNextElement(_tmpl$23);
+        insert(_el$96, createComponent(For, {
           get each() {
             return selectedValues();
           },
           children: (val) => (() => {
-            var _el$97 = getNextElement(_tmpl$27), _el$99 = _el$97.firstChild, [_el$100, _co$21] = getNextMarker(_el$99.nextSibling), _el$98 = _el$100.nextSibling;
-            insert(_el$97, () => getLabel(val), _el$100, _co$21);
-            _el$98.$$click = () => removeChip(val);
-            effect(() => setAttribute(_el$98, "aria-label", `Remove ${getLabel(val)}`));
+            var _el$103 = getNextElement(_tmpl$28), _el$105 = _el$103.firstChild, [_el$106, _co$23] = getNextMarker(_el$105.nextSibling), _el$104 = _el$106.nextSibling;
+            insert(_el$103, () => getLabel(val), _el$106, _co$23);
+            _el$104.$$click = () => removeChip(val);
+            effect(() => setAttribute(_el$104, "aria-label", `Remove ${getLabel(val)}`));
             runHydrationEvents();
-            return _el$97;
+            return _el$103;
           })()
         }));
-        return _el$90;
+        return _el$96;
       }
-    }), _el$94, _co$19);
-    _el$91.addEventListener("blur", () => setTimeout(() => setIsOpen(false), 200));
-    _el$91.addEventListener("focus", () => {
+    }), _el$100, _co$21);
+    _el$97.addEventListener("blur", () => setTimeout(() => setIsOpen(false), 200));
+    _el$97.addEventListener("focus", () => {
       if (suggestions().length) setIsOpen(true);
     });
-    _el$91.$$input = (e) => handleInput(e.currentTarget.value);
-    insert(_el$89, createComponent(Show, {
+    _el$97.$$input = (e) => handleInput(e.currentTarget.value);
+    insert(_el$95, createComponent(Show, {
       get when() {
         return memo(() => !!isOpen())() && suggestions().length > 0;
       },
       get children() {
-        var _el$92 = getNextElement(_tmpl$29);
-        insert(_el$92, createComponent(For, {
+        var _el$98 = getNextElement(_tmpl$30);
+        insert(_el$98, createComponent(For, {
           get each() {
             return suggestions();
           },
           children: (item) => {
             const isSelected = () => isMultiple() && selectedValues().includes(item.value);
             return (() => {
-              var _el$101 = getNextElement(_tmpl$32), _el$103 = _el$101.firstChild, [_el$104, _co$22] = getNextMarker(_el$103.nextSibling), _el$105 = _el$104.nextSibling, [_el$106, _co$23] = getNextMarker(_el$105.nextSibling);
-              _el$101.$$click = () => selectSuggestion(item);
-              _el$101.$$mousedown = (e) => e.preventDefault();
-              insert(_el$101, () => item.label, _el$104, _co$22);
-              insert(_el$101, createComponent(Show, {
+              var _el$107 = getNextElement(_tmpl$33), _el$109 = _el$107.firstChild, [_el$110, _co$24] = getNextMarker(_el$109.nextSibling), _el$111 = _el$110.nextSibling, [_el$112, _co$25] = getNextMarker(_el$111.nextSibling);
+              _el$107.$$click = () => selectSuggestion(item);
+              _el$107.$$mousedown = (e) => e.preventDefault();
+              insert(_el$107, () => item.label, _el$110, _co$24);
+              insert(_el$107, createComponent(Show, {
                 get when() {
                   return isSelected();
                 },
                 get children() {
-                  return getNextElement(_tmpl$31);
+                  return getNextElement(_tmpl$32);
                 }
-              }), _el$106, _co$23);
+              }), _el$112, _co$25);
               effect((_p$) => {
                 var _v$83 = `w-full text-left px-3 py-2 text-sm hover:bg-blue-50 dark:hover:bg-blue-900/20 ${isSelected() ? "text-blue-600 dark:text-blue-400 bg-blue-50/50 dark:bg-blue-900/10" : "text-gray-900 dark:text-white"}`, _v$84 = isSelected();
-                _v$83 !== _p$.e && className(_el$101, _p$.e = _v$83);
-                _v$84 !== _p$.t && setProperty(_el$101, "disabled", _p$.t = _v$84);
+                _v$83 !== _p$.e && className(_el$107, _p$.e = _v$83);
+                _v$84 !== _p$.t && setProperty(_el$107, "disabled", _p$.t = _v$84);
                 return _p$;
               }, {
                 e: void 0,
                 t: void 0
               });
               runHydrationEvents();
-              return _el$101;
+              return _el$107;
             })();
           }
         }));
-        return _el$92;
+        return _el$98;
       }
-    }), _el$96, _co$20);
+    }), _el$102, _co$22);
     effect((_p$) => {
       var _v$80 = isMultiple() && selectedValues().length ? "Add more..." : props.field.placeholder, _v$81 = props.disabled, _v$82 = props.baseClass;
-      _v$80 !== _p$.e && setAttribute(_el$91, "placeholder", _p$.e = _v$80);
-      _v$81 !== _p$.t && setProperty(_el$91, "disabled", _p$.t = _v$81);
-      _v$82 !== _p$.a && className(_el$91, _p$.a = _v$82);
+      _v$80 !== _p$.e && setAttribute(_el$97, "placeholder", _p$.e = _v$80);
+      _v$81 !== _p$.t && setProperty(_el$97, "disabled", _p$.t = _v$81);
+      _v$82 !== _p$.a && className(_el$97, _p$.a = _v$82);
       return _p$;
     }, {
       e: void 0,
       t: void 0,
       a: void 0
     });
-    effect(() => setProperty(_el$91, "value", query()));
+    effect(() => setProperty(_el$97, "value", query()));
     runHydrationEvents();
-    return _el$89;
+    return _el$95;
   })();
 };
 const TagsField = (props) => {
@@ -855,49 +905,49 @@ const TagsField = (props) => {
     }
   };
   return (() => {
-    var _el$107 = getNextElement(_tmpl$33), _el$110 = _el$107.firstChild, [_el$111, _co$24] = getNextMarker(_el$110.nextSibling), _el$109 = _el$111.nextSibling;
-    insert(_el$107, createComponent(Show, {
+    var _el$113 = getNextElement(_tmpl$34), _el$116 = _el$113.firstChild, [_el$117, _co$26] = getNextMarker(_el$116.nextSibling), _el$115 = _el$117.nextSibling;
+    insert(_el$113, createComponent(Show, {
       get when() {
         return (props.value || []).length > 0;
       },
       get children() {
-        var _el$108 = getNextElement(_tmpl$22);
-        insert(_el$108, createComponent(For, {
+        var _el$114 = getNextElement(_tmpl$23);
+        insert(_el$114, createComponent(For, {
           get each() {
             return props.value || [];
           },
           children: (tag) => (() => {
-            var _el$112 = getNextElement(_tmpl$27), _el$114 = _el$112.firstChild, [_el$115, _co$25] = getNextMarker(_el$114.nextSibling), _el$113 = _el$115.nextSibling;
-            insert(_el$112, tag, _el$115, _co$25);
-            _el$113.$$click = () => removeTag(tag);
-            setAttribute(_el$113, "aria-label", `Remove ${tag}`);
+            var _el$118 = getNextElement(_tmpl$28), _el$120 = _el$118.firstChild, [_el$121, _co$27] = getNextMarker(_el$120.nextSibling), _el$119 = _el$121.nextSibling;
+            insert(_el$118, tag, _el$121, _co$27);
+            _el$119.$$click = () => removeTag(tag);
+            setAttribute(_el$119, "aria-label", `Remove ${tag}`);
             runHydrationEvents();
-            return _el$112;
+            return _el$118;
           })()
         }));
-        return _el$108;
+        return _el$114;
       }
-    }), _el$111, _co$24);
-    _el$109.addEventListener("blur", addTag);
-    _el$109.$$keydown = handleKeyDown;
-    _el$109.$$input = (e) => setInput(e.currentTarget.value);
+    }), _el$117, _co$26);
+    _el$115.addEventListener("blur", addTag);
+    _el$115.$$keydown = handleKeyDown;
+    _el$115.$$input = (e) => setInput(e.currentTarget.value);
     effect((_p$) => {
       var _v$85 = props.placeholder || "Type and press Enter...", _v$86 = props.disabled, _v$87 = props.baseClass;
-      _v$85 !== _p$.e && setAttribute(_el$109, "placeholder", _p$.e = _v$85);
-      _v$86 !== _p$.t && setProperty(_el$109, "disabled", _p$.t = _v$86);
-      _v$87 !== _p$.a && className(_el$109, _p$.a = _v$87);
+      _v$85 !== _p$.e && setAttribute(_el$115, "placeholder", _p$.e = _v$85);
+      _v$86 !== _p$.t && setProperty(_el$115, "disabled", _p$.t = _v$86);
+      _v$87 !== _p$.a && className(_el$115, _p$.a = _v$87);
       return _p$;
     }, {
       e: void 0,
       t: void 0,
       a: void 0
     });
-    effect(() => setProperty(_el$109, "value", input()));
+    effect(() => setProperty(_el$115, "value", input()));
     runHydrationEvents();
-    return _el$107;
+    return _el$113;
   })();
 };
-delegateEvents(["input", "click", "mousedown", "keydown"]);
+delegateEvents(["focusin", "click", "input", "mousedown", "keydown"]);
 export {
   FormFieldRenderer
 };