react-luna-form 0.0.25 → 0.0.27

package/dist/client/cjs/index.js

@@ -34,18 +34,34 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/component/field/field-error.tsx
+// src/component/control.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-function FieldError(props) {
-  if (!props.errors || props.errors.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "ul",
+function Control(props) {
+  const content = typeof props.children === "function" ? props.children({ isPending: props.isPending }) : props.children;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-slot": "field-control", className: "w-full", children: content });
+}
+
+// src/component/field/field-set-advanced.tsx
+var import_react = require("react");
+
+// src/component/chevron-icon.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function ChevronIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "svg",
     {
-      className: "text-sm text-red-600 dark:text-red-500",
-      id: props.name ? `${props.name}-error` : void 0,
-      children: props.errors?.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: error }, props.name ? `${props.name}-error-${index}` : index))
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 20 20",
+      fill: "currentColor",
+      className: `size-4 transition-transform duration-200 ${props.expanded ? "rotate-90" : ""}`,
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z",
+          clipRule: "evenodd"
+        }
+      )
     }
   );
 }
@@ -57,10 +73,12 @@ var INPUT_NUMBER = "input/number";
 var TEXTAREA = "textarea";
 var RADIO = "radio";
 var CHECKBOX = "checkbox";
+var LIST = "list";
 var SELECT = "select";
 var SELECT_MONTH = "select/month";
 var SELECT_YEAR = "select/year";
 var COLUMN = "column";
+var FIELDS = "fields";
 var LABEL = "label";
 var VALUE = "value";
 var OPTIONS = "options";
@@ -85,6 +103,7 @@ var STATE = "state";
 var COMMON_URL = "http://luna.internal";
 var VERTICAL = "vertical";
 var HORIZONTAL = "horizontal";
+var TYPE = "type";
 
 // ../luna-core/src/util/is-type.ts
 function isObject(value) {
@@ -94,7 +113,7 @@ function isEmpty(value) {
   return value === null || value === void 0 || value === "";
 }
 function isValue(value) {
-  return typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+  return isString(value) || typeof value === "number" || isBoolean(value);
 }
 function isString(value) {
   return typeof value === "string";
@@ -102,9 +121,13 @@ function isString(value) {
 function isDataSource(value) {
   return isObject(value) && "url" in value;
 }
+function isBoolean(value) {
+  return typeof value === "boolean";
+}
 
 // ../luna-core/src/util/extract.ts
 var REGEX_TYPE = /[^/]+$/;
+var REGEX_NUMERIC = /^\d+$/;
 function getEntity(selected, collection = [], entity = VALUE) {
   if (Array.isArray(collection)) {
     return collection.find((item) => {
@@ -114,6 +137,7 @@ function getEntity(selected, collection = [], entity = VALUE) {
       }
     }) ?? { value: selected };
   }
+  return { value: selected };
 }
 function getCurrentValue(value, entity = VALUE) {
   if (value !== null && value !== void 0) {
@@ -198,6 +222,46 @@ function getFormData(formData) {
   }
   return data;
 }
+function unflatten(data) {
+  const result = {};
+  for (const key in data) {
+    const parts = key.split(".");
+    if (parts.length === 1) {
+      result[key] = data[key];
+      continue;
+    }
+    let current = result;
+    for (let i = 0; i < parts.length - 1; i++) {
+      const part = parts[i];
+      const next = parts[i + 1];
+      const isNextIndex = REGEX_NUMERIC.test(next);
+      if (!(part in current)) {
+        current[part] = isNextIndex ? [] : {};
+      }
+      current = current[part];
+    }
+    const last = parts[parts.length - 1];
+    current[last] = data[key];
+  }
+  compactArrays(result);
+  return result;
+}
+function compactArrays(obj) {
+  for (const key in obj) {
+    const value = obj[key];
+    if (Array.isArray(value)) {
+      const compacted = value.filter((item) => item !== void 0);
+      compacted.forEach((item) => {
+        if (item !== null && typeof item === "object" && !Array.isArray(item)) {
+          compactArrays(item);
+        }
+      });
+      obj[key] = compacted;
+    } else if (value !== null && typeof value === "object") {
+      compactArrays(value);
+    }
+  }
+}
 
 // ../luna-core/src/util/string.ts
 var REGEX_MARKDOWN_LINK = /\[([^\]]+)\]\(([^)]+)\)/g;
@@ -219,6 +283,9 @@ function interpolate(template, values = {}) {
   }
   return template;
 }
+function interpolateIfNeeded(template, values = {}) {
+  return isInterpolated(template) ? interpolate(template, values) : template;
+}
 function isInterpolated(template) {
   if (isString(template)) {
     return /{([^}]+)}/.test(template);
@@ -295,7 +362,7 @@ function handleProxyEvent(events = [], callback) {
   const values = [];
   const sources = [];
   const states = [];
-  events.forEach((event) => {
+  for (const event of events) {
     if (event.action === VALUE) {
       values.push(event);
     }
@@ -305,17 +372,17 @@ function handleProxyEvent(events = [], callback) {
     if (event.action === STATE) {
       states.push(event);
     }
-  });
+  }
   callback({ sources, states, values });
 }
 
 // ../luna-core/src/handle/source-event.ts
 function handleSourceEvent(selected = null, events = [], setSource) {
-  events.forEach((event) => {
+  for (const event of events) {
     const { target, source } = event;
     if (!selected) {
       setSource(target, void 0);
-      return;
+      continue;
     }
     if (isDataSource(source)) {
       const newUrl = interpolate(source.url, selected);
@@ -326,7 +393,7 @@ function handleSourceEvent(selected = null, events = [], setSource) {
         body: newBody
       });
     }
-  });
+  }
 }
 
 // ../luna-core/src/util/operator.ts
@@ -399,31 +466,39 @@ function lte(current, value) {
 
 // ../luna-core/src/handle/state-event.ts
 function handleStateEvent(selected = null, events = [], setState) {
-  events.forEach((event) => {
+  for (const event of events) {
     const { target, state, when } = event;
+    const targets = Array.isArray(target) ? target : [target];
     if (!selected) {
-      setState(target);
-      return;
+      setState(targets);
+      continue;
     }
+    logger.info(`Selected value for state event: ${JSON.stringify(selected)}, evaluating condition: ${JSON.stringify(when)}`);
     const matches = evaluateCondition(selected, when);
-    setState(target, matches ? state : void 0);
-  });
+    logger.info(`Condition evaluated to: ${matches}, setting state for targets: ${targets.join(", ")}`);
+    setState(targets, matches ? state : void 0);
+  }
 }
 function evaluateCondition(selected, when) {
   if (when === void 0) {
     return true;
   }
   if (isString(when)) {
-    return getValue2(selected, "value") === when;
+    logger.info(`Evaluating string condition: ${when} against selected value: ${JSON.stringify(selected)} using VALUE field`);
+    logger.info(`Extracted value for comparison: ${JSON.stringify(getValue2(selected, VALUE))}`);
+    logger.info(`Comparison result: ${getValue2(selected, VALUE) === when}`);
+    return getValue2(selected, VALUE) === when;
+  }
+  if (isBoolean(when)) {
+    return Boolean(getValue2(selected, VALUE)) === when;
   }
   if (Array.isArray(when)) {
-    const current = getValue2(selected, "value");
-    return when.includes(String(current));
+    return when.includes(String(getValue2(selected, VALUE)));
   }
   return evaluateOperator(selected, when);
 }
 function evaluateOperator(selected = null, condition) {
-  const current = getValue2(selected, condition.field ?? "value");
+  const current = getValue2(selected, condition.field ?? VALUE);
   const { operator = "eq", value } = condition;
   const operation = operators[operator];
   if (operation) {
@@ -433,18 +508,18 @@ function evaluateOperator(selected = null, condition) {
 }
 function getValue2(selected, field) {
   if (isObject(selected)) {
-    return field.includes(".") ? extract(selected, field) : selected[field];
+    return extract(selected, field);
   }
   return selected;
 }
 
 // ../luna-core/src/handle/value-event.ts
 function handleValueEvent(selected = null, events = [], setValue) {
-  events.forEach((event) => {
-    Object.entries(event.value).forEach(([target, value]) => {
+  for (const event of events) {
+    for (const [target, value] of Object.entries(event.value)) {
       setValue(target, selected ? interpolate(value, selected) : void 0);
-    });
-  });
+    }
+  }
 }
 
 // ../luna-core/src/util/is-input.ts
@@ -466,11 +541,14 @@ var isNumber = createTypeChecker(INPUT_NUMBER, TYPE_NUMBER);
 function isClickable(field) {
   return isRadio(field) || isCheckbox(field);
 }
+function isList(slot) {
+  return slot.type === LIST;
+}
 function isColumn(slot) {
   return slot.type === COLUMN;
 }
 function isField(slot) {
-  return slot.type !== COLUMN;
+  return slot.type !== COLUMN && slot.type !== LIST;
 }
 function isOptions(field) {
   return isSelect(field) || isRadio(field);
@@ -735,7 +813,7 @@ function prepareInputValue(field, value) {
 var REGEX_REF = /^#\/definition\//;
 function prepare(base = [], definition) {
   const resolved = resolveRefs(base, definition);
-  return Array.isArray(resolved) ? resolved.sort((a, b) => getOrder(a) - getOrder(b)) : [];
+  return Array.isArray(resolved) ? resolved.filter(filter).sort((a, b) => getOrder(a) - getOrder(b)) : [];
 }
 function resolveRefs(base, definition, cache = /* @__PURE__ */ new Map(), visited = /* @__PURE__ */ new WeakSet()) {
   if (!isDefinition(definition) || !base || typeof base !== "object") {
@@ -776,6 +854,15 @@ function getOrder(item) {
 function isDefinition(definition) {
   return definition !== void 0 && isObject(definition) && Object.keys(definition).length > 0;
 }
+function filter(base) {
+  if (TYPE in base) {
+    return true;
+  }
+  if (Array.isArray(base[FIELDS])) {
+    return base[FIELDS].length > 0;
+  }
+  return true;
+}
 
 // ../luna-core/src/util/attributes.ts
 function getPrefixedAttributes(prefix, record) {
@@ -823,6 +910,31 @@ function getSpan(value) {
   }
 }
 
+// ../luna-core/src/util/list.ts
+function getInitialCount(list, value) {
+  const min2 = list.advanced?.length?.min ?? 1;
+  if (value) {
+    const data = extract(value, list.name);
+    if (Array.isArray(data)) {
+      return Math.max(data.length, min2);
+    }
+  }
+  return Math.max(min2, 0);
+}
+function isMultiFieldList(list) {
+  if (!Array.isArray(list.fields) || list.fields.length === 0) {
+    return false;
+  }
+  return list.fields.length > 1 || list.fields[0].type === COLUMN;
+}
+function getInitialList(list, value) {
+  const count = getInitialCount(list, value);
+  return Array.from({ length: count }, (_, index) => index);
+}
+function getLabel(list) {
+  return list.label ?? list.name;
+}
+
 // ../luna-core/src/util/schema.ts
 var import_zod = require("zod");
 
@@ -1115,161 +1227,140 @@ function mergeStyle(globalStyle, localStyle) {
   return { ...globalStyle, ...localStyle };
 }
 
-// src/component/field/field-base.tsx
-var import_tailwind_merge = require("tailwind-merge");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function FieldBase(props) {
-  const errors = props.errors && props.errors.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "div",
-    {
-      "data-slot": "field",
-      "data-clickable": props.isClickable ? "true" : "false",
-      ...errors && { [DATA_INVALID]: "true" },
-      ...props.disabled && { [DATA_READONLY]: "true" },
-      "data-orientation": props.orientation,
-      className: (0, import_tailwind_merge.twMerge)(
-        "group flex w-full flex-col items-center data-[invalid=true]:text-red-600 data-[invalid=true]:dark:text-red-500",
-        "data-[clickable=true]:items-start",
-        props.isCheckbox && (props.isReversed ? "flex-row-reverse!" : "flex-row!"),
-        "data-[clickable=true]:has-[>[data-slot=field-content]]:[&>:first-child]:mt-px",
-        props.className
-      ),
-      children: props.children
+// src/lib/string.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function formatMarkdown2(text) {
+  return formatMarkdown(
+    text,
+    (index, url, text2) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "a",
+        {
+          className: "underline",
+          href: url,
+          rel: "noopener noreferrer",
+          target: "_blank",
+          children: text2
+        },
+        `${url}-${index}`
+      );
     }
   );
 }
 
-// src/component/field/field-vertical.tsx
-var import_tailwind_merge2 = require("tailwind-merge");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function FieldVertical(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    FieldBase,
+// src/component/field/field-set-advanced.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function FieldSetAdvanced(props) {
+  const { fields = [] } = props.section;
+  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
+  const handleOpen = (0, import_react.useCallback)(() => setIsOpen((previous) => !previous), []);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "fieldset",
     {
-      ...props,
-      orientation: VERTICAL,
-      className: (0, import_tailwind_merge2.twMerge)(
-        "gap-3 has-[>[data-slot=field-content]]:items-start",
-        !props.isClickable && "[&>*]:w-full"
-      ),
-      children: props.children
+      "data-slot": "field-set",
+      "data-advanced": "true",
+      "data-expanded": isOpen,
+      "data-empty": fields.length === 0,
+      className: "flex flex-col",
+      id: props.section.id?.toString(),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("legend", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          "button",
+          {
+            className: "flex cursor-pointer items-center gap-2 text-base font-medium text-slate-600 dark:text-slate-400",
+            onClick: handleOpen,
+            type: "button",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChevronIcon, { expanded: isOpen }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: formatMarkdown2(props.section.title) })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react.Activity, { mode: isOpen ? "visible" : "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          "div",
+          {
+            className: "mt-3 ml-1.5 flex flex-col gap-4 border-l-2 border-slate-300 pl-4 dark:border-slate-600",
+            "data-slot": "field-set-content",
+            children: [
+              props.section.description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-sm leading-normal font-normal text-slate-600 dark:text-slate-400", children: formatMarkdown2(props.section.description) }),
+              props.group
+            ]
+          }
+        ) })
+      ]
     }
   );
 }
 
-// src/component/field/field-horizontal.tsx
-var import_tailwind_merge3 = require("tailwind-merge");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-function FieldHorizontal(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    FieldBase,
+// src/component/legend.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Legend(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    props.title && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("legend", { className: "mb-3 font-medium text-slate-800 dark:text-slate-200", children: formatMarkdown2(props.title) }),
+    props.description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "-mt-2 text-sm leading-normal font-normal text-slate-600 dark:text-slate-400", children: formatMarkdown2(props.description) })
+  ] });
+}
+
+// src/component/field/field-set-base.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function FieldSetBase(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "fieldset",
     {
-      ...props,
-      orientation: HORIZONTAL,
-      className: (0, import_tailwind_merge3.twMerge)(
-        "gap-2 md:flex-row md:gap-4",
-        "[&>[data-slot=field-content]]:min-w-0 [&>[data-slot=field-content]]:flex-grow [&>[data-slot=field-content]]:self-start",
-        "[&_[role=checkbox]]:mt-[1.5px]",
-        props.isClickable && "md:flex-col",
-        !props.isClickable && [
-          "md:justify-between",
-          "[&>*:not([data-slot=field-content])]:w-full",
-          "[&>*:not([data-slot=field-content])]:md:w-1/2",
-          "[&>*:not([data-slot=field-content])]:xl:w-2/5"
-        ]
-      ),
-      children: props.children
+      "data-slot": "field-set",
+      "data-empty": props.empty,
+      className: "flex flex-col data-[empty=false]:gap-6",
+      id: props.id,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Legend, { description: props.description, title: props.title }),
+        props.children
+      ]
     }
   );
 }
 
-// src/component/field/field-group.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-function FieldGroup(props) {
-  const clickable = isClickable(props.field);
-  const checkbox = isCheckbox(props.field);
-  const reversed = buildReverse(props.field);
-  if (props.orientation === VERTICAL) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      FieldVertical,
-      {
-        disabled: props.disabled,
-        errors: props.errors,
-        isCheckbox: checkbox,
-        isReversed: reversed,
-        isClickable: clickable,
-        children: props.children
-      }
-    );
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    FieldHorizontal,
+// src/component/group.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function Group(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
     {
-      disabled: props.disabled,
-      errors: props.errors,
-      isCheckbox: checkbox,
-      isReversed: reversed,
-      isClickable: clickable,
+      "data-slot": "field-group",
+      "data-compact": props.compact,
+      className: "flex w-full flex-col gap-8 data-[compact=true]:gap-3",
       children: props.children
     }
   );
 }
 
-// src/component/input/input-base.tsx
-function InputBase(props) {
-  if (!props.field.type) {
-    return null;
-  }
-  const commonProps = buildCommon(props.field, props.disabled);
-  const dataAttributes = buildDataAttributes(props.field);
-  const ariaAttributes = buildAriaAttributes(props.field, props.errors);
-  const field = {
-    ...props.field,
-    disabled: commonProps.disabled
-  };
-  return props.children({
-    ariaAttributes,
-    commonProps,
-    dataAttributes,
-    field,
-    orientation: props.orientation
+// src/component/field/field-set.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function FieldSet(props) {
+  const { fields = [] } = props.section;
+  const { compact } = mergeStyle(props.style, {
+    compact: props.section.compact
   });
+  const group = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Group, { compact, children: props.children });
+  if (!props.section.title && !props.section.description) {
+    return group;
+  }
+  if (props.section.advanced) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FieldSetAdvanced, { section: props.section, group });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    FieldSetBase,
+    {
+      description: props.section.description,
+      empty: fields.length === 0,
+      id: props.section.id?.toString(),
+      title: props.section.title,
+      children: group
+    }
+  );
 }
 
-// src/component/field/field.tsx
-var import_tailwind_merge4 = require("tailwind-merge");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-function Field(props) {
-  const cols2 = props.field.advanced?.cols;
-  const errors = props.field.name ? props.errors?.[props.field.name] : void 0;
-  const { orientation } = mergeStyle(props.style, {
-    orientation: buildOrientation(props.field)
-  });
-  const disabled = buildDisabled(props.field, props.disabled);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: (0, import_tailwind_merge4.twMerge)("flex flex-col gap-3", getSpan(cols2)), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      FieldGroup,
-      {
-        disabled,
-        errors,
-        field: props.field,
-        orientation,
-        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          InputBase,
-          {
-            disabled,
-            errors,
-            field: props.field,
-            orientation,
-            children: props.children
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FieldError, { errors, name: props.field.name })
-  ] });
-}
+// src/client/component/guard/visibility-guard.tsx
+var import_jotai2 = require("jotai");
 
 // src/client/lib/store-helper.ts
 var import_jotai = require("jotai");
@@ -1415,188 +1506,89 @@ function createAtomStore(initialValue = {}) {
   };
 }
 
-// src/client/lib/error-store.ts
+// src/client/lib/state-store.ts
 var store = createAtomStore();
-var clearInputErrorAtom = store.clear;
-var reportErrorAtom = store.bulkReport;
-var reportInputErrorAtom = store.report;
+var fieldStateAtom = store.atom;
+var reportFieldStateAtom = store.report;
 
-// src/client/component/wrapper/with-error.tsx
-var import_jotai2 = require("jotai");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-function withErrors(Component) {
-  const WithErrors = (props) => {
-    const errors = (0, import_jotai2.useAtomValue)(reportInputErrorAtom(props.field.name));
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      Component,
-      {
-        ...props,
-        errors: errors ? { [props.field.name]: errors } : void 0
-      }
-    );
-  };
-  return WithErrors;
+// src/client/component/guard/visibility-guard.tsx
+function isColumnHidden(column, states) {
+  return column.fields.every((field) => isFieldHidden(field, states));
 }
-
-// src/client/lib/state-store.ts
-var store2 = createAtomStore();
-var fieldStateAtom = store2.atom;
-var reportFieldStateAtom = store2.report;
-
-// src/client/component/wrapper/with-field-state.tsx
-var import_jotai3 = require("jotai");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-function withFieldState(Component) {
-  const WithFieldState = (props) => {
-    const fieldState = (0, import_jotai3.useAtomValue)(reportFieldStateAtom(props.field.name));
-    const hidden = fieldState?.hidden ?? props.field.hidden ?? false;
-    if (hidden) {
-      return null;
-    }
-    const disabled = fieldState?.disabled ?? props.disabled;
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Component, { ...props, disabled });
-  };
-  return WithFieldState;
+function isFieldHidden(field, states) {
+  return states[field.name]?.hidden ?? field.hidden ?? false;
 }
-
-// src/client/component/wrapper/index.tsx
-var Field2 = withFieldState(withErrors(Field));
-
-// src/component/control.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-function Control(props) {
-  const content = typeof props.children === "function" ? props.children({ isPending: props.isPending }) : props.children;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { "data-slot": "field-control", className: "w-full", children: content });
-}
-
-// src/component/group.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-function Group(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    "div",
-    {
-      "data-slot": "field-group",
-      "data-compact": props.compact,
-      className: "flex w-full flex-col gap-8 data-[compact=true]:gap-3",
-      children: props.children
-    }
-  );
+function isEntryHidden(entry, states) {
+  return isColumn(entry) ? isColumnHidden(entry, states) : isFieldHidden(entry, states);
 }
-
-// src/lib/string.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-function formatMarkdown2(text) {
-  return formatMarkdown(
-    text,
-    (index, url, text2) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-        "a",
-        {
-          className: "underline",
-          href: url,
-          rel: "noopener noreferrer",
-          target: "_blank",
-          children: text2
-        },
-        `${url}-${index}`
-      );
+function VisibilityGuard(props) {
+  const states = (0, import_jotai2.useAtomValue)(fieldStateAtom);
+  if (props.container) {
+    const hidden = states[props.container.name]?.hidden ?? props.container.hidden ?? false;
+    if (hidden) {
+      return null;
     }
-  );
-}
-
-// src/component/legend.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-function Legend(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-    props.title && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("legend", { className: "mb-3 font-medium text-slate-800 dark:text-slate-200", children: formatMarkdown2(props.title) }),
-    props.description && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "-mt-2 text-sm leading-normal font-normal text-slate-600 dark:text-slate-400", children: formatMarkdown2(props.description) })
-  ] });
-}
-
-// src/component/field/field-set.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
-function FieldSet(props) {
-  const fields = props.section.fields || [];
-  const { compact } = mergeStyle(props.style, {
-    compact: props.section.compact
-  });
-  if (!props.section.title && !props.section.description) {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Group, { compact, children: props.children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-    "fieldset",
-    {
-      "data-slot": "field-set",
-      "data-empty": fields.length === 0,
-      className: "flex flex-col data-[empty=false]:gap-6",
-      id: props.section.id?.toString(),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          Legend,
-          {
-            description: props.section.description,
-            title: props.section.title
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Group, { compact, children: props.children })
-      ]
-    }
-  );
+  if (props.fields.length === 0) {
+    return null;
+  }
+  const allHidden = props.fields.every((entry) => isEntryHidden(entry, states));
+  if (allHidden) {
+    return null;
+  }
+  return props.children;
 }
 
-// src/component/form.tsx
-var import_react = require("react");
-
 // src/component/separator.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function Separator() {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { "data-slot": "field-separator", className: "relative -my-2 h-5 text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "absolute inset-0 top-1/2 h-px w-full bg-slate-200 dark:bg-slate-800" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { "data-slot": "field-separator", className: "relative -my-2 h-5 text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "absolute inset-0 top-1/2 h-px w-full bg-slate-200 dark:bg-slate-800" }) });
 }
 
 // src/component/form.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function Form(props) {
   const sections = prepare(props.sections, props.definition);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "h-full w-full", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("form", { noValidate: props.noValidate, action: props.action, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Group, { children: [
-    sections.map((section, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(FieldSet, { section, style: props.config.style, children: props.children({
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-full w-full", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("form", { noValidate: props.noValidate, action: props.action, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Group, { children: [
+    sections.map((section, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(VisibilityGuard, { fields: section.fields ?? [], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FieldSet, { section, style: props.config.style, children: props.children({
         disabled: props.readOnly,
         fields: section.fields
       }) }),
-      section.separator && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Separator, {})
+      section.separator && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Separator, {})
     ] }, index)),
-    props.control && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Control, { isPending: props.isPending, children: props.control })
+    props.control && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Control, { isPending: props.isPending, children: props.control })
   ] }) }) });
 }
 
 // src/component/description.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function Description(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "-mt-2 text-xs leading-normal font-normal text-slate-600 dark:text-slate-400", children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "-mt-2 text-xs leading-normal font-normal text-slate-600 dark:text-slate-400", children: props.children });
 }
 
 // src/component/formatted-description.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function FormattedDescription(props) {
   const content = formatMarkdown2(props.text);
   if (content) {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Description, { children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Description, { children: content });
   }
   return null;
 }
 
 // src/component/label.tsx
-var import_tailwind_merge5 = require("tailwind-merge");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_tailwind_merge = require("tailwind-merge");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function Label(props) {
   const showOptionalLabel = props.style?.showOptionalLabel ?? true;
   const normal = isRadio(props.field) || isCheckbox(props.field);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "label",
     {
       "data-slot": "field-label",
       "data-normal": normal,
-      className: (0, import_tailwind_merge5.twMerge)(
+      className: (0, import_tailwind_merge.twMerge)(
         "flex w-fit items-center gap-2 text-sm leading-snug font-medium select-none",
         "data-[normal=true]:font-normal",
         "group-data-[readonly=true]:cursor-not-allowed group-data-[readonly=true]:opacity-50"
@@ -1604,30 +1596,31 @@ function Label(props) {
       htmlFor: props.field.name,
       children: [
         props.children,
-        showOptionalLabel && !props.field.required && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-sm text-slate-600 dark:text-slate-400", children: translate("(Optional)", props.translations) })
+        showOptionalLabel && !props.field.required && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-sm text-slate-600 dark:text-slate-400", children: translate("(Optional)", props.translations) })
       ]
     }
   );
 }
 
 // src/component/input-label.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function InputLabel(props) {
-  const label = isInterpolated(props.field.label) ? interpolate(props.field.label, {
-    context: props.context,
-    env: props.config?.env
-  }) : props.field.label;
-  const description = isInterpolated(props.field.description) ? interpolate(props.field.description, {
+  const interpolateOpts = {
     context: props.context,
     env: props.config?.env
-  }) : props.field.description;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+  };
+  const label = interpolateIfNeeded(props.field.label, interpolateOpts);
+  const description = interpolateIfNeeded(
+    props.field.description,
+    interpolateOpts
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "div",
     {
       "data-slot": "field-content",
       className: "flex w-full flex-1 flex-col gap-1.5 leading-snug",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           Label,
           {
             field: props.field,
@@ -1636,7 +1629,7 @@ function InputLabel(props) {
             children: translate(label, props.translations)
           }
         ),
-        props.orientation === HORIZONTAL && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        props.orientation === HORIZONTAL && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           FormattedDescription,
           {
             text: translate(description, props.translations)
@@ -1648,10 +1641,10 @@ function InputLabel(props) {
 }
 
 // src/component/input-group.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function InputGroup(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-    props.field.name && props.field.label && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+    props.field.name && props.field.label && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       InputLabel,
       {
         config: props.config,
@@ -1662,7 +1655,7 @@ function InputGroup(props) {
       }
     ),
     props.children,
-    props.orientation === VERTICAL && props.field.description && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    props.orientation === VERTICAL && props.field.description && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       FormattedDescription,
       {
         text: translate(props.field.description, props.translations)
@@ -1679,11 +1672,17 @@ function renderIfExists(value, render) {
   return render(value);
 }
 
+// src/client/lib/error-store.ts
+var store2 = createAtomStore();
+var clearInputErrorAtom = store2.clear;
+var reportErrorAtom = store2.bulkReport;
+var reportInputErrorAtom = store2.report;
+
 // src/client/component/input.tsx
 var import_react5 = require("react");
 
 // src/client/lib/source-store.ts
-var import_jotai4 = require("jotai");
+var import_jotai3 = require("jotai");
 var merge = (values) => {
   const merged = mergeSource(values);
   if (merged) {
@@ -1692,7 +1691,7 @@ var merge = (values) => {
   return void 0;
 };
 var validate = (target) => target.trim() !== "";
-var sourceAtom = (0, import_jotai4.atom)({});
+var sourceAtom = (0, import_jotai3.atom)({});
 var reportSourceAtom = createNestedRecordAtomFamily(
   sourceAtom,
   {
@@ -1703,7 +1702,7 @@ var reportSourceAtom = createNestedRecordAtomFamily(
 var clearInputSourceAtom = createNestedClearAtom(sourceAtom);
 
 // src/client/hook/use-data-source.ts
-var import_jotai5 = require("jotai");
+var import_jotai4 = require("jotai");
 
 // src/client/hook/use-fetch.ts
 var import_swr = __toESM(require("swr"), 1);
@@ -1749,7 +1748,7 @@ function buildSource2(dataSource = null, config, disabled = false) {
 // src/client/hook/use-data-source.ts
 function useDataSource(field, config, value) {
   const dataSource = resolveSource(field, value);
-  const [source, setSource] = (0, import_jotai5.useAtom)(reportSourceAtom(field.name));
+  const [source, setSource] = (0, import_jotai4.useAtom)(reportSourceAtom(field.name));
   const currentSource = source ?? dataSource;
   const data = useFetch(currentSource, config, field.disabled);
   return [data, setSource];
@@ -1783,7 +1782,7 @@ function useInput(field, onMount, onUnmount, translations) {
 }
 
 // src/client/component/input.tsx
-var import_jotai7 = require("jotai");
+var import_jotai6 = require("jotai");
 
 // src/client/hook/use-timeout.ts
 var import_react3 = require("react");
@@ -1796,14 +1795,11 @@ function useTimeout() {
       }
     };
   }, []);
-  function clearTimeoutRef() {
+  const setTimeoutRef = (0, import_react3.useCallback)((callback, delay) => {
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
       timeoutRef.current = null;
     }
-  }
-  const setTimeoutRef = (0, import_react3.useCallback)((callback, delay) => {
-    clearTimeoutRef();
     timeoutRef.current = setTimeout(callback, delay);
   }, []);
   return setTimeoutRef;
@@ -1817,26 +1813,27 @@ var clearInputValueAtom = store3.clear;
 var reportValueAtom = store3.report;
 
 // src/client/hook/use-value.ts
-var import_jotai6 = require("jotai");
+var import_jotai5 = require("jotai");
 var import_react4 = require("react");
 function useValue(field, currentValue) {
   const { name } = field;
   const skipNextOnChangeRef = (0, import_react4.useRef)(false);
-  const [value, setValue] = (0, import_jotai6.useAtom)(reportValueAtom(name));
+  const [value, setValue] = (0, import_jotai5.useAtom)(reportValueAtom(name));
+  const onCurrentValueChange = (0, import_react4.useEffectEvent)(
+    (currentValue2) => {
+      const newValue = resolveValue(name, currentValue2);
+      if (isValidValue(newValue)) {
+        skipNextOnChangeRef.current = true;
+        setValue(newValue);
+      }
+    }
+  );
   (0, import_react4.useEffect)(() => {
-    if (!currentValue || !(name in currentValue)) {
+    if (!currentValue) {
       return;
     }
-    const newValue = currentValue[name];
-    if (isValidValue(newValue)) {
-      logger.info("useValue: setting skipNextOnChange to true", {
-        fieldName: name,
-        newValue
-      });
-      skipNextOnChangeRef.current = true;
-      setValue(newValue);
-    }
-  }, [name, currentValue, setValue]);
+    onCurrentValueChange(currentValue);
+  }, [currentValue]);
   const shouldSkipOnChange = (0, import_react4.useCallback)(() => {
     if (skipNextOnChangeRef.current) {
       skipNextOnChangeRef.current = false;
@@ -1850,14 +1847,38 @@ function useValue(field, currentValue) {
     value
   };
 }
+function resolveValue(name, currentValue) {
+  if (name in currentValue) {
+    return currentValue[name];
+  }
+  if (!name.includes(".")) {
+    return void 0;
+  }
+  const keys = name.split(".");
+  let result = currentValue;
+  for (const key of keys) {
+    if (result === null || result === void 0) {
+      return void 0;
+    }
+    if (Array.isArray(result)) {
+      const index = Number(key);
+      result = Number.isInteger(index) ? result[index] : void 0;
+    } else if (typeof result === "object") {
+      result = result[key];
+    } else {
+      return void 0;
+    }
+  }
+  return result;
+}
 
 // src/client/component/input.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function Input(props) {
   const entity = props.field.advanced?.entity;
-  const store4 = (0, import_jotai7.useStore)();
+  const store4 = (0, import_jotai6.useStore)();
   const setTimeoutRef = useTimeout();
-  const [, startTransition3] = (0, import_react5.useTransition)();
+  const [, startTransition2] = (0, import_react5.useTransition)();
   const { setValue, shouldSkipOnChange, value } = useValue(
     props.field,
     props.value
@@ -1868,9 +1889,9 @@ function Input(props) {
   translationsRef.current = props.translations;
   const hasTextable = isTextable(props.field);
   const hasClickable = isClickable(props.field);
-  const setValues = (0, import_jotai7.useSetAtom)(valueAtom);
-  const setFieldStates = (0, import_jotai7.useSetAtom)(fieldStateAtom);
-  const setErrors = (0, import_jotai7.useSetAtom)(reportInputErrorAtom(props.field.name));
+  const setValues = (0, import_jotai6.useSetAtom)(valueAtom);
+  const setFieldStates = (0, import_jotai6.useSetAtom)(fieldStateAtom);
+  const setErrors = (0, import_jotai6.useSetAtom)(reportInputErrorAtom(props.field.name));
   const [data, setSource] = useDataSource(props.field, props.config, value);
   const schema = useInput(
     props.field,
@@ -1923,37 +1944,18 @@ function Input(props) {
         }, 500);
         return;
       }
-      const currentValue = getEntity(value2, data, entity);
-      callback(currentValue);
+      callback(getEntity(value2, data, entity));
     },
     [data, entity, hasTextable, setTimeoutRef]
   );
   const onChange = (0, import_react5.useCallback)(
     (event) => {
       const inputValue = event.target.value;
-      logger.info("onChange fired", {
-        fieldName: props.field.name,
-        fieldType: props.field.type,
-        inputValue,
-        currentValue: valueRef.current,
-        hasTextable,
-        hasClickable
-      });
       if (!hasClickable && shouldSkipOnChange()) {
-        logger.info("shouldSkipOnChange returned true", {
-          fieldName: props.field.name,
-          willSkip: !hasTextable || inputValue === valueRef.current,
-          reason: !hasTextable ? "not textable (checkbox/radio/select)" : "value unchanged"
-        });
         if (!hasTextable || inputValue === valueRef.current) {
-          logger.info("SKIPPING onChange", { fieldName: props.field.name });
           return;
         }
       }
-      logger.info("onChange processing", {
-        fieldName: props.field.name,
-        inputValue
-      });
       onValueChangeRef.current?.(inputValue);
       if (props.config.validation.change) {
         validated(inputValue);
@@ -1962,19 +1964,32 @@ function Input(props) {
       if (events) {
         handleTriggerEvent(inputValue, (selected) => {
           handleProxyEvent(events, ({ sources, states, values }) => {
-            startTransition3(() => {
+            startTransition2(() => {
               handleSourceEvent(
                 selected,
                 sources,
                 (target, source) => setSource(target, source)
               );
-              handleStateEvent(selected, states, (target, state) => {
+              handleStateEvent(selected, states, (targets, state) => {
+                logger.info(
+                  `Setting field states for targets: ${targets.join(
+                    ", "
+                  )} with state: ${JSON.stringify(state)}`
+                );
                 setFieldStates((prev) => {
                   if (state) {
-                    return { ...prev, [target]: state };
+                    return targets.reduce(
+                      (acc, target) => ({
+                        ...acc,
+                        [target]: state
+                      }),
+                      prev
+                    );
                   }
-                  const { [target]: _removed, ...rest } = prev;
-                  return rest;
+                  return targets.reduce((acc, target) => {
+                    const { [target]: _removed, ...rest } = acc;
+                    return rest;
+                  }, prev);
                 });
               });
               handleValueEvent(selected, values, (target, value2) => {
@@ -1994,8 +2009,6 @@ function Input(props) {
       hasTextable,
       props.config.validation.change,
       props.field.event?.change,
-      props.field.name,
-      props.field.type,
       setFieldStates,
       setSource,
       setValues,
@@ -2014,7 +2027,7 @@ function Input(props) {
     },
     [hasClickable, props.config.validation.blur, validated]
   );
-  return renderIfExists(props.config.inputs[props.field.type], (Component) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return renderIfExists(props.config.inputs[props.field.type], (Component) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     InputGroup,
     {
       config: props.config,
@@ -2022,7 +2035,7 @@ function Input(props) {
       field: props.field,
       orientation: props.orientation,
       translations: props.translations,
-      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         Component,
         {
           ...commonPropsWithOptions,
@@ -2037,48 +2050,502 @@ function Input(props) {
   ));
 }
 
-// src/component/column.tsx
-var import_tailwind_merge6 = require("tailwind-merge");
+// src/component/field/field-error.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function FieldError(props) {
+  if (!props.errors || props.errors.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    "ul",
+    {
+      className: "text-sm text-red-600 dark:text-red-500",
+      id: props.name ? `${props.name}-error` : void 0,
+      children: props.errors?.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("li", { children: error }, props.name ? `${props.name}-error-${index}` : index))
+    }
+  );
+}
+
+// src/component/field/field-base.tsx
+var import_tailwind_merge2 = require("tailwind-merge");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function FieldBase(props) {
+  const errors = props.errors && props.errors.length > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    "div",
+    {
+      "data-slot": "field",
+      "data-clickable": props.isClickable ? "true" : "false",
+      ...errors && { [DATA_INVALID]: "true" },
+      ...props.disabled && { [DATA_READONLY]: "true" },
+      "data-orientation": props.orientation,
+      className: (0, import_tailwind_merge2.twMerge)(
+        "group flex w-full flex-col items-center data-[invalid=true]:text-red-600 data-[invalid=true]:dark:text-red-500",
+        "data-[clickable=true]:items-start",
+        props.isCheckbox && (props.isReversed ? "flex-row-reverse!" : "flex-row!"),
+        "data-[clickable=true]:has-[>[data-slot=field-content]]:[&>:first-child]:mt-px",
+        props.className
+      ),
+      children: props.children
+    }
+  );
+}
+
+// src/component/field/field-vertical.tsx
+var import_tailwind_merge3 = require("tailwind-merge");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function FieldVertical(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    FieldBase,
+    {
+      ...props,
+      orientation: VERTICAL,
+      className: (0, import_tailwind_merge3.twMerge)(
+        "gap-3 has-[>[data-slot=field-content]]:items-start",
+        !props.isClickable && "[&>*]:w-full"
+      ),
+      children: props.children
+    }
+  );
+}
+
+// src/component/field/field-horizontal.tsx
+var import_tailwind_merge4 = require("tailwind-merge");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function FieldHorizontal(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    FieldBase,
+    {
+      ...props,
+      orientation: HORIZONTAL,
+      className: (0, import_tailwind_merge4.twMerge)(
+        "gap-2 md:flex-row md:gap-4",
+        "[&>[data-slot=field-content]]:min-w-0 [&>[data-slot=field-content]]:flex-grow [&>[data-slot=field-content]]:self-start",
+        "[&_[role=checkbox]]:mt-[1.5px]",
+        props.isClickable && "md:flex-col",
+        !props.isClickable && [
+          "md:justify-between",
+          "[&>*:not([data-slot=field-content])]:w-full",
+          "[&>*:not([data-slot=field-content])]:md:w-1/2",
+          "[&>*:not([data-slot=field-content])]:xl:w-2/5"
+        ]
+      ),
+      children: props.children
+    }
+  );
+}
+
+// src/component/field/field-group.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function FieldGroup(props) {
+  const clickable = isClickable(props.field);
+  const checkbox = isCheckbox(props.field);
+  const reversed = buildReverse(props.field);
+  if (props.orientation === VERTICAL) {
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      FieldVertical,
+      {
+        disabled: props.disabled,
+        errors: props.errors,
+        isCheckbox: checkbox,
+        isReversed: reversed,
+        isClickable: clickable,
+        children: props.children
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    FieldHorizontal,
+    {
+      disabled: props.disabled,
+      errors: props.errors,
+      isCheckbox: checkbox,
+      isReversed: reversed,
+      isClickable: clickable,
+      children: props.children
+    }
+  );
+}
+
+// src/component/input/input-base.tsx
+function InputBase(props) {
+  if (!props.field.type) {
+    return null;
+  }
+  const commonProps = buildCommon(props.field, props.disabled);
+  const dataAttributes = buildDataAttributes(props.field);
+  const ariaAttributes = buildAriaAttributes(props.field, props.errors);
+  const field = {
+    ...props.field,
+    disabled: commonProps.disabled
+  };
+  return props.children({
+    ariaAttributes,
+    commonProps,
+    dataAttributes,
+    field,
+    orientation: props.orientation
+  });
+}
+
+// src/component/field/field.tsx
+var import_tailwind_merge5 = require("tailwind-merge");
 var import_jsx_runtime22 = require("react/jsx-runtime");
+function Field(props) {
+  const cols2 = props.field.advanced?.cols;
+  const errors = props.field.name ? props.errors?.[props.field.name] : void 0;
+  const { orientation } = mergeStyle(props.style, {
+    orientation: buildOrientation(props.field)
+  });
+  const disabled = buildDisabled(props.field, props.disabled);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: (0, import_tailwind_merge5.twMerge)("flex flex-col gap-3", getSpan(cols2)), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      FieldGroup,
+      {
+        disabled,
+        errors,
+        field: props.field,
+        orientation,
+        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          InputBase,
+          {
+            disabled,
+            errors,
+            field: props.field,
+            orientation,
+            children: props.children
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(FieldError, { errors, name: props.field.name })
+  ] });
+}
+
+// src/client/component/field/field-with-error.tsx
+var import_jotai7 = require("jotai");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function withError(Component) {
+  const WithError = (props) => {
+    const errors = (0, import_jotai7.useAtomValue)(reportInputErrorAtom(props.field.name));
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      Component,
+      {
+        ...props,
+        errors: errors ? { [props.field.name]: errors } : void 0
+      }
+    );
+  };
+  return WithError;
+}
+
+// src/client/component/field/field-with-state.tsx
+var import_jotai8 = require("jotai");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function withState(Component) {
+  const WithFieldState = (props) => {
+    const fieldState = (0, import_jotai8.useAtomValue)(reportFieldStateAtom(props.field.name));
+    const hidden = fieldState?.hidden ?? props.field.hidden ?? false;
+    if (hidden) {
+      return null;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Component, { ...props, disabled: fieldState?.disabled ?? props.disabled });
+  };
+  return WithFieldState;
+}
+
+// src/client/component/field/field.tsx
+var Field2 = withState(withError(Field));
+
+// src/component/field/field-list-item.tsx
+var import_tailwind_merge6 = require("tailwind-merge");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+function FieldListItem(props) {
+  function handleRemove() {
+    if (props.canRemove && props.onRemove) {
+      props.onRemove(props.index);
+    }
+  }
+  const removeButton = props.canRemove && props.onRemove != null && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    "button",
+    {
+      "aria-label": `Remove ${props.label} item ${props.index + 1}`,
+      className: (0, import_tailwind_merge6.twMerge)(
+        "rounded p-1 text-xl text-slate-400",
+        "transition-colors duration-150",
+        "hover:text-red-500",
+        "focus-visible:ring-2 focus-visible:ring-slate-400 focus-visible:outline-none",
+        "dark:text-slate-500 dark:hover:text-red-400"
+      ),
+      onClick: handleRemove,
+      type: "button",
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { "aria-hidden": "true", children: "\xD7" })
+    }
+  );
+  if (props.isMultiField) {
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "rounded-lg border border-slate-100 p-4 dark:border-slate-900", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "mb-3 flex items-center justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "text-sm font-medium text-slate-400 dark:text-slate-500", children: [
+          props.label,
+          " ",
+          props.index + 1
+        ] }),
+        removeButton
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Group, { children: props.children })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-start gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Group, { children: props.children }),
+    removeButton && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "shrink-0", children: removeButton })
+  ] });
+}
+
+// src/client/component/field/field-list.tsx
+var import_tailwind_merge7 = require("tailwind-merge");
+
+// src/client/hook/use-field-list.ts
+var import_jotai9 = require("jotai");
+var import_react6 = require("react");
+function useFieldList(field, value) {
+  const min2 = field.advanced?.length?.min ?? 1;
+  const max2 = field.advanced?.length?.max ?? Infinity;
+  const [items, setItems] = (0, import_react6.useState)(
+    () => getInitialList(field, value)
+  );
+  const nextId = (0, import_react6.useRef)(items.length);
+  const itemsRef = (0, import_react6.useRef)(items);
+  itemsRef.current = items;
+  const setValues = (0, import_jotai9.useSetAtom)(valueAtom);
+  const addItem = (0, import_react6.useCallback)(() => {
+    setItems((previous) => {
+      if (previous.length >= max2) {
+        return previous;
+      }
+      const id = nextId.current++;
+      return [...previous, id];
+    });
+  }, [max2]);
+  const handleRemove = (0, import_react6.useCallback)(
+    (index) => {
+      if (items.length <= min2) {
+        return;
+      }
+      const stableId = items[index];
+      setItems((previous) => {
+        if (previous.length <= min2) {
+          return previous;
+        }
+        return previous.filter((_, i) => i !== index);
+      });
+      setValues((current) => {
+        const next = { ...current };
+        const prefix = `${field.name}.`;
+        const leafNames = [];
+        for (const row of field.fields) {
+          if (isColumn(row)) {
+            for (const columnField of row.fields) {
+              leafNames.push(columnField.name);
+            }
+          } else {
+            leafNames.push(row.name);
+          }
+        }
+        for (const name of leafNames) {
+          delete next[`${prefix}${stableId}.${name}`];
+        }
+        return next;
+      });
+    },
+    [field.name, field.fields, items, min2, setValues]
+  );
+  const canAdd = items.length < max2;
+  const canRemove = items.length > min2;
+  return [items, addItem, handleRemove, canAdd, canRemove, max2];
+}
+
+// src/client/component/field/field-list.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+function FieldList(props) {
+  const [items, addItem, handleRemove, canAdd, canRemove, max2] = useFieldList(
+    props.field,
+    props.value
+  );
+  const label = getLabel(props.field);
+  const action = props.field.advanced?.action ?? "Add item";
+  const hasLimit = max2 !== Infinity;
+  const isMultiField = isMultiFieldList(props.field);
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
+    items.map((key, index) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      FieldListItem,
+      {
+        canRemove,
+        index,
+        isMultiField,
+        label,
+        onRemove: handleRemove,
+        children: props.children(key)
+      },
+      key
+    )),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+      "button",
+      {
+        "aria-disabled": !canAdd,
+        "aria-label": hasLimit ? `${action}, ${items.length} of ${max2}` : action,
+        className: (0, import_tailwind_merge7.twMerge)(
+          "flex w-full items-center gap-1.5 rounded py-1",
+          "text-sm font-medium text-slate-500",
+          "transition-colors duration-150",
+          "hover:text-slate-800",
+          "focus-visible:ring-2 focus-visible:ring-slate-400 focus-visible:ring-offset-2 focus-visible:outline-none",
+          "dark:text-slate-400 dark:hover:text-slate-200",
+          !canAdd && "cursor-not-allowed opacity-50 hover:text-slate-500 dark:hover:text-slate-400"
+        ),
+        disabled: !canAdd,
+        onClick: addItem,
+        type: "button",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { "aria-hidden": "true", children: "+" }),
+          action,
+          hasLimit && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "ml-auto text-slate-400 tabular-nums dark:text-slate-500",
+              children: [
+                items.length,
+                " / ",
+                max2
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+// src/component/list.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+function List(props) {
+  const empty = Array.isArray(props.field.fields) && props.field.fields.length === 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    FieldSetBase,
+    {
+      description: props.field.description,
+      empty,
+      id: props.field.name,
+      title: props.field.label,
+      children: props.children
+    }
+  );
+}
+
+// src/client/component/guard/list-guard.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+function ListGuard({ children, field, value }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(VisibilityGuard, { container: field, fields: field.fields, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(List, { field, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(FieldList, { field, value, children }) }) });
+}
+
+// src/component/column.tsx
+var import_tailwind_merge8 = require("tailwind-merge");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function Column(props) {
   const cols2 = getColumn(props.column?.advanced?.cols);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex w-full flex-col gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: (0, import_tailwind_merge6.twMerge)("grid grid-cols-1 gap-3 sm:gap-4", cols2), children: props.children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex w-full flex-col gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: (0, import_tailwind_merge8.twMerge)("grid grid-cols-1 gap-3 sm:gap-4", cols2), children: props.children }) });
 }
 
 // src/component/slot/slot-base.tsx
-var import_react6 = require("react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_react7 = require("react");
+
+// src/component/slot/slot-list.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+function SlotList(props) {
+  const fields = Array.isArray(props.field.fields) ? props.field.fields.map((field) => {
+    if (isField(field)) {
+      return {
+        ...field,
+        name: `${props.field.name}.${props.index}.${field.name}`
+      };
+    }
+    if (isColumn(field)) {
+      return {
+        ...field,
+        fields: field.fields.map((columnField) => ({
+          ...columnField,
+          name: `${props.field.name}.${props.index}.${columnField.name}`
+        }))
+      };
+    }
+    return field;
+  }) : [];
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    SlotBase,
+    {
+      children: props.children,
+      components: props.components,
+      disabled: props.disabled,
+      fields,
+      style: props.style,
+      value: props.value
+    }
+  );
+}
+
+// src/component/slot/slot-base.tsx
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function SlotBase(props) {
-  const { column: Column2, field: Field3 } = props.components;
-  return prepare(props.fields).map((field, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react6.Fragment, { children: [
-    isColumn(field) && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Column2, { column: field, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SlotBase, { ...props, fields: field.fields }) }),
-    isField(field) && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Field3, { disabled: props.disabled, field, style: props.style, children: props.children })
+  const { field: Field3, list: List2 } = props.components;
+  return prepare(props.fields).map((field, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react7.Fragment, { children: [
+    isColumn(field) && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Column, { column: field, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SlotBase, { ...props, fields: field.fields }) }),
+    isField(field) && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Field3, { disabled: props.disabled, field, style: props.style, children: props.children }),
+    isList(field) && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(List2, { field, value: props.value, children: (index2) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      SlotList,
+      {
+        children: props.children,
+        components: props.components,
+        disabled: props.disabled,
+        field,
+        index: index2,
+        style: props.style,
+        value: props.value
+      }
+    ) })
   ] }, index));
 }
 
 // src/component/slot/slot-create.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
-function createSlot(Field3) {
-  const CreateSlot = (props) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SlotBase, { ...props, components: { column: Column, field: Field3 } });
+var import_jsx_runtime32 = require("react/jsx-runtime");
+function createSlot(components) {
+  const CreateSlot = (props) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SlotBase, { ...props, components });
   return CreateSlot;
 }
 
+// src/client/component/slot/slot.tsx
+var Slot = createSlot({ field: Field2, list: ListGuard });
+
 // src/client/hook/use-form-action.ts
-var import_jotai8 = require("jotai");
-var import_react7 = require("react");
+var import_jotai10 = require("jotai");
+var import_react8 = require("react");
 function useFormState(getSchema2, action, options) {
-  const { onSuccess, preserveValues = false, validation = true } = options ?? {};
-  const setError = (0, import_jotai8.useSetAtom)(reportErrorAtom);
-  const clearValues = (0, import_jotai8.useSetAtom)(clearAllValueAtom);
+  const {
+    onSuccess,
+    preserveValues = false,
+    validation = true,
+    translations
+  } = options ?? {};
+  const setError = (0, import_jotai10.useSetAtom)(reportErrorAtom);
+  const clearValues = (0, import_jotai10.useSetAtom)(clearAllValueAtom);
   const initialState = {
     data: null,
     error: null,
     success: false
   };
-  const [state, formAction, isPending] = (0, import_react7.useActionState)(
+  const [state, formAction, isPending] = (0, import_react8.useActionState)(
     async (prevState, formData) => {
       const [schemas, fields] = getSchema2();
-      const schema = buildSchema(schemas, fields, options?.translations);
+      const schema = buildSchema(schemas, fields, translations);
       if (validation === false) {
         if (action) {
           return await action(formData, schema);
@@ -2089,33 +2556,43 @@ function useFormState(getSchema2, action, options) {
       const validated = schema.safeParse(form);
       if (!validated.success) {
         const errors = flatten(validated.error);
-        (0, import_react7.startTransition)(() => {
+        (0, import_react8.startTransition)(() => {
           setError(errors);
         });
         return failure(form, {
-          description: "Please correct the errors and try again.",
+          description: translate(
+            "Please correct the errors and try again.",
+            translations
+          ),
           details: [],
-          title: "There were validation errors submitting the form."
+          title: translate(
+            "There were validation errors submitting the form.",
+            translations
+          )
         });
       }
+      const unflattened = unflatten(form);
       if (action) {
         try {
-          const result = await action(form, schema);
+          const result = await action(unflattened, schema);
           if (!result.success) {
-            return failure(form, result.error);
+            return failure(unflattened, result.error);
           }
           onSuccess?.(result.data);
           if (!preserveValues) {
-            (0, import_react7.startTransition)(() => {
+            (0, import_react8.startTransition)(() => {
               clearValues();
             });
           }
-          return success(form, preserveValues);
+          return success(unflattened, preserveValues);
         } catch (error) {
           logger.error("Error executing form action:", error);
-          return failure(form, {
-            title: "An unexpected error occurred submitting the form.",
-            details: buildError(error)
+          return failure(unflattened, {
+            title: translate(
+              "An unexpected error occurred submitting the form.",
+              translations
+            ),
+            details: buildError(error, translations)
           });
         }
       }
@@ -2125,9 +2602,11 @@ function useFormState(getSchema2, action, options) {
   );
   return [formAction, state, isPending];
 }
-function buildError(error) {
-  const detail = error instanceof Error ? error.message : ["Unknown error"];
-  return Array.isArray(detail) ? detail : [detail];
+function buildError(error, translations) {
+  if (error instanceof Error) {
+    return [error.message];
+  }
+  return [translate("Unknown error", translations)];
 }
 function success(value, preserveValues = false) {
   const data = preserveValues ? value : null;
@@ -2146,16 +2625,16 @@ function failure(value, error) {
 }
 
 // src/client/hook/use-schema.ts
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/client/hook/use-store.ts
-var import_react8 = require("react");
-var import_jotai9 = require("jotai");
+var import_react9 = require("react");
+var import_jotai11 = require("jotai");
 function useStore2() {
-  const clearErrors = (0, import_jotai9.useSetAtom)(clearInputErrorAtom);
-  const clearSources = (0, import_jotai9.useSetAtom)(clearInputSourceAtom);
-  const clearValues = (0, import_jotai9.useSetAtom)(clearInputValueAtom);
-  return (0, import_react8.useCallback)(
+  const clearErrors = (0, import_jotai11.useSetAtom)(clearInputErrorAtom);
+  const clearValues = (0, import_jotai11.useSetAtom)(clearInputValueAtom);
+  const clearSources = (0, import_jotai11.useSetAtom)(clearInputSourceAtom);
+  return (0, import_react9.useCallback)(
     (names) => {
       const target = Array.isArray(names) ? names : [names];
       clearErrors(target);
@@ -2169,42 +2648,34 @@ function useStore2() {
 // src/client/hook/use-schema.ts
 function useSchema() {
   const clear = useStore2();
-  const schemaRef = (0, import_react9.useRef)({});
-  const fieldsRef = (0, import_react9.useRef)([]);
-  const pendingUnmounts = (0, import_react9.useRef)(/* @__PURE__ */ new Set());
-  const onMount = (0, import_react9.useCallback)((name, schema, field) => {
+  const schemaRef = (0, import_react10.useRef)({});
+  const fieldsRef = (0, import_react10.useRef)([]);
+  const onMount = (0, import_react10.useCallback)((name, schema, field) => {
     if (!(name in schemaRef.current)) {
       schemaRef.current[name] = schema;
       fieldsRef.current.push(field);
     }
   }, []);
-  const onUnmount = (0, import_react9.useCallback)(
+  const onUnmount = (0, import_react10.useCallback)(
     (name) => {
       if (schemaRef.current[name]) {
         delete schemaRef.current[name];
         fieldsRef.current = fieldsRef.current.filter((field) => {
           return field.name !== name;
         });
-        pendingUnmounts.current.add(name);
-        (0, import_react9.startTransition)(() => {
-          if (pendingUnmounts.current.size > 0) {
-            clear(Array.from(pendingUnmounts.current));
-            pendingUnmounts.current.clear();
-          }
-        });
+        clear([name]);
       }
     },
     [clear]
   );
-  function getSchema2() {
+  const getSchema2 = (0, import_react10.useCallback)(() => {
     return [schemaRef.current, fieldsRef.current];
-  }
+  }, []);
   return [getSchema2, onMount, onUnmount];
 }
 
 // src/client/component/form-content.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var Slot = createSlot(Field2);
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function FormContent(props) {
   const translations = props.translations?.[props.lang ?? ""];
   const [schema, onMount, onUnmount] = useSchema();
@@ -2215,8 +2686,8 @@ function FormContent(props) {
   });
   const isShowingError = props.config.validation.showError && !state.success && state.error;
   const value = state.data ?? props.value;
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-    isShowingError && renderIfExists(props.config.alert, (Alert) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "mb-4 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+    isShowingError && renderIfExists(props.config.alert, (Alert) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "mb-4 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       Alert,
       {
         description: state.error?.description,
@@ -2224,7 +2695,7 @@ function FormContent(props) {
         title: state.error.title
       }
     ) })),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       Form,
       {
         action,
@@ -2235,27 +2706,36 @@ function FormContent(props) {
         noValidate: true,
         readOnly: props.readOnly,
         sections: props.sections,
-        children: ({ disabled, fields }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Slot, { disabled, fields, style: props.config.style, children: (internal) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-          Input,
+        children: ({ disabled, fields }) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          Slot,
           {
-            ...internal,
-            config: props.config,
-            context: props.context,
-            onMount,
-            onUnmount,
-            onValueChange: props.onValueChange,
-            translations,
-            value
+            disabled,
+            fields,
+            style: props.config.style,
+            value,
+            children: (internal) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              Input,
+              {
+                ...internal,
+                config: props.config,
+                context: props.context,
+                onMount,
+                onUnmount,
+                onValueChange: props.onValueChange,
+                translations,
+                value
+              }
+            )
           }
-        ) })
+        )
       }
     )
   ] });
 }
 
 // src/client/component/form.tsx
-var import_jotai10 = require("jotai");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jotai12 = require("jotai");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function Form2(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_jotai10.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(FormContent, { ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jotai12.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(FormContent, { ...props }) });
 }