@trungkhai/dynamic-form 0.1.4 → 0.1.5

package/dist/index.es.js

@@ -1,46 +1,46 @@
-import { jsx as u, jsxs as Be, Fragment as C } from "react/jsx-runtime";
-import { Select as Ee, Form as G, Upload as ke, Button as Re, DatePicker as We, Checkbox as Ie, Radio as Ke, InputNumber as $e, Input as we, Row as ze, Col as He, App as Ye, Flex as de, Spin as ue } from "antd";
-import { createContext as Ne, useContext as De, memo as V, useState as x, useMemo as P, useEffect as B, useCallback as L, useRef as K, forwardRef as Je, useImperativeHandle as Qe } from "react";
-import ae from "dayjs";
-import { FileImageOutlined as Xe, UploadOutlined as Ze } from "@ant-design/icons";
-const fe = Ne(
+import { jsx as l, jsxs as ae, Fragment as V } from "react/jsx-runtime";
+import { Select as Ie, Form as X, Upload as qe, Button as Ae, Alert as N, Collapse as at, DatePicker as ct, Checkbox as lt, Radio as dt, InputNumber as ut, Input as Le, Row as ft, Col as mt, App as pt, Flex as Se, Spin as be, Table as yt } from "antd";
+import { createContext as ht, useContext as Be, memo as Q, useState as L, useMemo as C, useEffect as j, useRef as I, useCallback as D, forwardRef as _t, useImperativeHandle as bt } from "react";
+import ge from "dayjs";
+import { FileImageOutlined as gt, UploadOutlined as wt, DeleteOutlined as vt, PlusOutlined as At } from "@ant-design/icons";
+const ke = ht(
   null
 );
-function O() {
-  const e = De(fe);
+function U() {
+  const e = Be(ke);
   if (!e)
     throw new Error(
       "useDynamicFormContext must be used within DynamicFormProvider"
     );
   return e;
 }
-function nn() {
-  return De(fe);
+function qn() {
+  return Be(ke);
 }
-function et(e, t = []) {
+function St(e, t = []) {
   for (const r of t) {
     if (typeof r == "function")
       continue;
-    const { match: i, render: a } = r;
+    const { match: i, render: s } = r;
     if (typeof i == "string") {
       if (i === e.field?.type?.code || i === e.code)
-        return a;
+        return s;
     } else if (i(e))
-      return a;
+      return s;
   }
   const n = e.field?.type?.code;
   for (const r of t)
     ;
 }
-function tt(e, t = [], n = {}) {
-  return et(e, t) ?? n[e.code] ?? n[e.field?.type?.code ?? ""];
+function kt(e, t = [], n = {}) {
+  return St(e, t) ?? n[e.code] ?? n[e.field?.type?.code ?? ""];
 }
-function nt(e, t) {
+function Ft(e, t) {
   const n = t.option_config?.label_attr, r = t.option_config?.value_attr || "value";
   let i;
   if (n?.length) {
-    const a = n.join(" - ");
-    e[a] !== void 0 ? i = String(e[a]) : i = n.map((o) => e[o]).filter((o) => o != null && o !== "").join(" - ");
+    const s = n.join(" - ");
+    e[s] !== void 0 ? i = String(e[s]) : i = n.map((o) => e[o]).filter((o) => o != null && o !== "").join(" - ");
   } else
     i = String(e[r] ?? "");
   return {
@@ -48,63 +48,63 @@ function nt(e, t) {
     value: e[r]
   };
 }
-function rt(e, t) {
-  return t.option_config && t.is_option_api ? e?.map((n) => nt(n, t)) : t.metas?.map((n) => ({
+function Ct(e, t) {
+  return t.option_config && t.is_option_api ? e?.map((n) => Ft(n, t)) : t.metas?.map((n) => ({
     label: n.label,
     value: n.value
   }));
 }
-function Pe(e, t) {
+function Ke(e, t) {
   const n = t.option_config?.value_attr || "value";
   return e[n];
 }
-function it(e, t) {
+function Et(e, t) {
   const n = /* @__PURE__ */ new Set(), r = [];
   return e.forEach((i) => {
-    const a = Pe(i, t), o = String(a);
+    const s = Ke(i, t), o = String(s);
     n.has(o) || (n.add(o), r.push(i));
   }), r;
 }
-function me(e, t) {
+function Fe(e, t) {
   let n;
   return (...r) => {
     n && clearTimeout(n), n = setTimeout(() => e(...r), t);
   };
 }
-const at = ({
+const Rt = ({
   onSearchKeyword: e,
   searchDebounceMs: t = 500,
   ...n
 }) => {
-  const [r, i] = x(""), a = P(
-    () => me((s) => e?.(s), t),
+  const [r, i] = L(""), s = C(
+    () => Fe((a) => e?.(a), t),
     [e, t]
   );
-  return /* @__PURE__ */ u(
-    Ee,
+  return /* @__PURE__ */ l(
+    Ie,
     {
       allowClear: !0,
       showSearch: !0,
       searchValue: r,
-      onSearch: (s) => {
-        i(s), a(s);
+      onSearch: (a) => {
+        i(a), s(a);
       },
       filterOption: !1,
       ...n
     }
   );
-}, ot = V(at), st = ({
+}, xt = Q(Rt), Tt = ({
   fieldName: e,
   formInstance: t,
   ...n
 }) => {
-  const r = G.useWatch(e, t);
-  return B(() => {
+  const r = X.useWatch(e, t);
+  return j(() => {
     if (r?.fileList?.length && r.fileList.some(
       (o) => !o.type?.startsWith("image/")
     )) {
       const o = r.fileList.filter(
-        (s) => s.type?.startsWith("image/")
+        (a) => a.type?.startsWith("image/")
       );
       t.setFieldValue(
         e,
@@ -114,201 +114,1066 @@ const at = ({
         } : null
       );
     }
-  }, [e, t, r]), /* @__PURE__ */ u(ke, { listType: "picture-card", accept: "image/*", ...n, children: /* @__PURE__ */ u(
+  }, [e, t, r]), /* @__PURE__ */ l(qe, { listType: "picture-card", accept: "image/*", ...n, children: /* @__PURE__ */ l(
     "button",
     {
       style: { border: 0, background: "none", cursor: "pointer" },
       type: "button",
-      children: /* @__PURE__ */ u(Xe, {})
+      children: /* @__PURE__ */ l(gt, {})
     }
   ) });
-}, lt = V(st), ct = ({
+}, Mt = Q(Tt), Dt = ({
   fieldName: e,
   formInstance: t,
   ...n
 }) => {
-  const r = G.useWatch(e, t);
-  return /* @__PURE__ */ u(ke, { fileList: r?.fileList, ...n, children: /* @__PURE__ */ u(Re, { icon: /* @__PURE__ */ u(Ze, {}) }) });
-}, dt = V(ct), ut = ({
+  const r = X.useWatch(e, t);
+  return /* @__PURE__ */ l(qe, { fileList: r?.fileList, ...n, children: /* @__PURE__ */ l(Ae, { icon: /* @__PURE__ */ l(wt, {}) }) });
+}, Lt = Q(Dt);
+function we(e, t, n = {}) {
+  const { enabled: r = !0 } = n, [i, s] = L(), [o, a] = L(!1), [m, f] = L(), y = I(t);
+  y.current = t;
+  const u = D(async () => {
+    if (r) {
+      a(!0);
+      try {
+        const c = await y.current();
+        return s(c), f(void 0), c;
+      } catch (c) {
+        throw f(c), c;
+      } finally {
+        a(!1);
+      }
+    }
+  }, [r]);
+  return j(() => {
+    r && u();
+  }, [r, u, ...e]), { data: i, isLoading: o, error: m, refetch: u };
+}
+function Ue(e) {
+  if (!e) return;
+  const { mode: t } = e;
+  if (t === "api" && e.api?.url)
+    return e.api;
+  if (t === "api_ids" && e.api_ids?.url) {
+    const n = e.api_ids, r = n.method?.toUpperCase() === "POST";
+    return {
+      url: n.url,
+      method: n.method,
+      data_path: n.data_path,
+      mapping_attr: n.mapping_attr,
+      link: n.link,
+      result_type: n.result_type ?? "array",
+      params: n.params ?? (!r && !n.data ? { ids: "{{value}}" } : void 0),
+      data: n.data ?? (r && !n.params ? { ids: "{{value}}" } : void 0)
+    };
+  }
+  if (t === "api_detail" && e.api_detail?.url) {
+    const n = e.api_detail;
+    return {
+      url: n.url,
+      method: n.method,
+      data_path: n.data_path,
+      mapping_attr: n.mapping_attr,
+      link: n.link,
+      result_type: n.result_type ?? "object",
+      url_template: n.url_template ?? !0,
+      params: n.params,
+      data: n.data
+    };
+  }
+}
+function Pe(e) {
+  return {
+    value: e,
+    id: e
+  };
+}
+function Pt(e, t) {
+  const n = t.method || "GET", r = n.toUpperCase() === "GET";
+  if (t.url_template)
+    return (Array.isArray(e) ? e.filter((m) => m != null && m !== "") : e != null && e !== "" ? [e] : []).map((m) => {
+      const f = Pe(m), y = he(t.url, f), u = t.params ? ie(t.params, f) : void 0, c = t.data ? ie(t.data, f) : void 0;
+      return {
+        method: n,
+        url: y,
+        params: r ? u : void 0,
+        data: r ? void 0 : c
+      };
+    });
+  const i = Pe(e), s = t.params ? ie(t.params, i) : void 0, o = t.data ? ie(t.data, i) : void 0;
+  return [
+    {
+      method: n,
+      url: t.url,
+      params: r ? s : void 0,
+      data: r ? void 0 : o
+    }
+  ];
+}
+function Ne(e, t) {
+  const n = t.data_path ? se(e, t.data_path) : e;
+  return (t.result_type ?? (Array.isArray(n) ? "array" : "object")) === "array" ? Array.isArray(n) ? n : n != null ? [n] : [] : Array.isArray(n) ? n.length ? [n[0]] : [] : n && typeof n == "object" ? [n] : [];
+}
+function We(e, t) {
+  return It(e, t.mapping_attr);
+}
+function $e(e, t) {
+  return qt(t.link, e);
+}
+async function Vt(e, t, n, r) {
+  const i = Pt(e, t);
+  if (!i.length) return [];
+  const s = await Promise.all(
+    i.map((a) => n({ ...a, signal: r }))
+  ), o = [];
+  for (const a of s)
+    o.push(...Ne(a.data, t));
+  return o;
+}
+function W(e) {
+  return !!(e == null || e === "" || Array.isArray(e) && e.length === 0);
+}
+function Ce(e, t) {
+  const n = e.option_config?.api_options?.params, r = e.option_config?.api_options?.data;
+  if (!n && !r) return;
+  const i = (s) => {
+    const o = {};
+    for (const a in s)
+      if (typeof s[a] == "string" && s[a].startsWith("{{") && s[a].endsWith("}}")) {
+        const m = s[a].slice(2, -2).trim();
+        o[a] = t?.[m];
+      } else
+        o[a] = s[a];
+    return o;
+  };
+  return {
+    params: n ? i(n) : void 0,
+    data: r ? i(r) : void 0
+  };
+}
+function jt(e, t) {
+  const n = t.option_config?.label_attr, r = t.option_config?.value_attr || "";
+  if (n?.length) {
+    const i = n.join(" - ");
+    return e[i] !== void 0 ? String(e[i]) : n.map((s) => e[s]).filter((s) => s != null && s !== "").join(" - ");
+  }
+  return String(e[r] ?? "");
+}
+function Ee(e, t) {
+  if (!t?.length) return null;
+  const r = (Array.isArray(e) ? e : [e]).map((i) => t.find((s) => String(s.value) === String(i))?.label).filter((i) => !!i);
+  return r.length ? r.join(", ") : null;
+}
+function oe(e, t, n) {
+  if (W(e)) return null;
+  const r = t.option_config?.value_attr || "value", i = Array.isArray(e) ? e : [e];
+  if (t.is_option_api && n?.length) {
+    const o = i.map((a) => {
+      const m = n.find(
+        (f) => String(f[r]) === String(a)
+      );
+      return m ? jt(m, t) : String(a);
+    }).filter(Boolean);
+    return o.length ? o.join(", ") : null;
+  }
+  const s = Ee(e, t.metas);
+  return s || i.map(String).join(", ");
+}
+function ze(e, t) {
+  if (W(e)) return null;
+  const n = t.additional_config?.datetime?.format, r = ge(e);
+  return r.isValid() ? n ? r.format(n) : r.format("YYYY-MM-DD HH:mm:ss") : String(e);
+}
+function Ot(e) {
+  if (W(e)) return null;
+  if (Array.isArray(e)) {
+    const t = e.map(
+      (n) => typeof n == "object" && n && "name" in n ? String(n.name) : String(n)
+    ).filter(Boolean);
+    return t.length ? t.join(", ") : null;
+  }
+  return String(e);
+}
+function It(e, t) {
+  return t?.length ? t.map((n) => {
+    const r = se(e, n) ?? e[n];
+    return r != null ? String(r) : "";
+  }).filter(Boolean).join(" - ") : JSON.stringify(e);
+}
+function qt(e, t) {
+  return e ? e.replace(/\{\{(.+?)\}\}/g, (n, r) => {
+    const i = r.trim(), s = se(t, i) ?? t[i];
+    return s != null ? String(s) : "";
+  }) : null;
+}
+function Ve(e, t, n) {
+  if (W(e)) return null;
+  switch (t?.mode ?? "formatted") {
+    case "raw":
+    case "formatted":
+      return Array.isArray(e) ? e.map(String).join(", ") : String(e);
+    case "api":
+    case "api_ids":
+    case "api_detail": {
+      const i = Ue(t);
+      if (!n || !i)
+        return Array.isArray(e) ? e.map(String).join(", ") : String(e);
+      const s = Ne(n, i);
+      return s.length ? s.map((a) => {
+        const m = We(a, i), f = $e(a, i);
+        return f ? `${m} (${f})` : m;
+      }).filter(Boolean).join(", ") || null : String(e);
+    }
+    default:
+      return String(e);
+  }
+}
+function Bt(e, t, n) {
+  const r = e.additional_config?.view_value;
+  if (r?.mode === "api" || r?.mode === "api_ids" || r?.mode === "api_detail")
+    return Ve(
+      t,
+      r,
+      n.viewValueFetched
+    );
+  switch (e.field?.type?.code) {
+    case "text":
+    case "number":
+      return W(t) ? null : String(t);
+    case "datetime":
+      return ze(t, e);
+    case "select":
+    case "radio":
+    case "checkbox":
+      return oe(t, e, n.optionList);
+    case "image":
+    case "file":
+      return Ot(t);
+    default:
+      return r ? Ve(
+        t,
+        r,
+        n.viewValueFetched
+      ) : W(t) ? null : String(t);
+  }
+}
+function ce(e) {
+  const t = e.additional_config?.default;
+  return typeof t == "string" && t.trim() ? t : void 0;
+}
+function He(e, t, n) {
+  if (!t || typeof t != "object" || Array.isArray(t))
+    return {};
+  const r = n ?? ce(e), i = t;
+  if (r && r in i) {
+    const s = i[r];
+    if (s && typeof s == "object" && !Array.isArray(s))
+      return s;
+  }
+  return i;
+}
+function Ye(e, t, n) {
+  if (Array.isArray(t))
+    return t;
+  const r = n ?? ce(e);
+  if (!r || W(t))
+    return [];
+  if (t && typeof t == "object" && !Array.isArray(t)) {
+    const i = t;
+    if (r in i && Array.isArray(i[r]))
+      return i[r];
+  }
+  return Je(
+    e,
+    { [e.code]: t },
+    r
+  );
+}
+function Bn(e) {
+  return {
+    id: e.id,
+    code: e.code,
+    form_id: e.id,
+    method: "POST",
+    action: "",
+    config: {
+      body: ""
+    },
+    created_at: e.created_at ?? "",
+    updated_at: e.updated_at ?? "",
+    created_by: e.created_by,
+    deleted_at: e.deleted_at,
+    form: e
+  };
+}
+function Re(e) {
+  return e.additional_config?.form?.submit_container_key ?? e.additional_config?.multiple_form?.submit_container_key ?? e.code;
+}
+function Kt(e, t, n, r) {
+  const i = Re(e), s = t[e.code] ?? t[i];
+  if (!W(s) && s && typeof s == "object" && !Array.isArray(s)) {
+    const o = s;
+    if (n in o) {
+      const a = o[n];
+      return a && typeof a == "object" && !Array.isArray(a) ? a : void 0;
+    }
+    return o;
+  }
+}
+function Je(e, t, n) {
+  const r = Re(e), i = t[e.code] ?? t[r];
+  if (W(i))
+    return [];
+  if (i && typeof i == "object" && !Array.isArray(i)) {
+    const s = i;
+    if (n in s && Array.isArray(s[n]))
+      return s[n];
+  }
+  return Array.isArray(i) ? i : [];
+}
+function se(e, t) {
+  return t.split(".").reduce((n, r) => {
+    if (n && typeof n == "object")
+      return n[r];
+  }, e);
+}
+function Ut(e, t) {
+  if (typeof e != "string") return e;
+  const n = e.match(/^\{\{(.+?)\}\}$/);
+  if (!n) return e;
+  const r = n[1].trim(), i = se(t, r);
+  return i !== void 0 ? i : e;
+}
+function Nt(e, t) {
+  const n = {};
+  for (const r in e)
+    n[r] = Ut(
+      e[r],
+      t
+    );
+  return n;
+}
+function Xe(e, t) {
+  const n = { ...e };
+  return t.forEach((r) => {
+    const i = e[r.code];
+    if (i == null) return;
+    switch (r.field?.type?.code) {
+      case "datetime": {
+        if (i && typeof i == "object" && typeof i.isValid == "function") {
+          n[r.code] = i;
+          break;
+        }
+        const o = ge(i);
+        o.isValid() && (n[r.code] = o);
+        break;
+      }
+      case "file":
+      case "image": {
+        if (Array.isArray(i) && i.length > 0) {
+          const o = i.map((a, m) => {
+            const f = a;
+            return {
+              uid: String(f.uid ?? f.path ?? m),
+              name: f.name ?? `file-${m}`,
+              status: "done",
+              percent: 100,
+              type: f.type,
+              size: f.size,
+              response: a
+            };
+          });
+          n[r.code] = { fileList: o };
+        }
+        break;
+      }
+      case "form": {
+        const o = ce(r);
+        n[r.code] = He(r, i, o);
+        break;
+      }
+      case "multiple-form": {
+        const o = ce(r);
+        n[r.code] = Ye(r, i, o);
+        break;
+      }
+    }
+  }), n;
+}
+function Wt(e) {
+  const t = e.option_config?.api_options?.params || {}, n = e.option_config?.api_options?.data || {}, r = (i) => Object.values(i).filter(
+    (s) => typeof s == "string" && s.startsWith("{{") && s.endsWith("}}")
+  ).map((s) => s.slice(2, -2).trim());
+  return Array.from(/* @__PURE__ */ new Set([...r(t), ...r(n)]));
+}
+function ie(e, t) {
+  const n = {};
+  for (const r in e) {
+    const i = e[r];
+    if (typeof i == "string" && i.startsWith("{{") && i.endsWith("}}")) {
+      const s = i.slice(2, -2).trim();
+      n[r] = t?.[s];
+    } else
+      n[r] = i;
+  }
+  return n;
+}
+function he(e, t) {
+  return e.replace(/\{\{\s*(\w+)\s*\}\}/g, (n, r) => {
+    const i = t?.[r];
+    return i != null ? String(i) : "";
+  });
+}
+function $t(e, t, n) {
+  const i = t.find((s) => s.code === e)?.additional_config?.on_field_change?.clear ?? [];
+  return i.length === 0 ? [] : i.filter(
+    (s) => n?.[s] !== void 0 && n?.[s] !== null
+  );
+}
+const zt = (e) => ({
+  id: e.id,
+  code: e.code,
+  form_id: e.id,
+  method: "POST",
+  action: "",
+  config: {
+    body: ""
+  },
+  created_at: e.created_at ?? "",
+  updated_at: e.updated_at ?? "",
+  created_by: e.created_by,
+  deleted_at: e.deleted_at,
+  form: e
+}), Ht = ({
+  group: e,
+  value: t,
+  onChange: n,
+  disabled: r = !1,
+  readOnly: i = !1,
+  registerNestedForm: s
+}) => {
+  const o = U(), [a] = X.useForm(), m = I(null), f = e.additional_config?.form?.config_url, y = e.additional_config?.form?.method ?? "GET", {
+    data: u,
+    isLoading: c,
+    error: d
+  } = we(
+    [f, y],
+    async () => {
+      if (!f)
+        throw new Error("Missing additional_config.form.config_url");
+      const h = await o.client.request({
+        method: y,
+        url: f
+      });
+      return o.parsers.formConfigResponse(h.data);
+    },
+    { enabled: !!f }
+  ), p = C(
+    () => u ? zt(u) : void 0,
+    [u]
+  );
+  return j(() => {
+    if (u)
+      return s?.(e.code, m, {
+        formCode: u.code,
+        fieldType: "form"
+      }), () => {
+        s?.(e.code, null);
+      };
+  }, [e.code, u, s]), j(() => {
+    if (!u) return;
+    const h = He(e, t, u.code);
+    a.setFieldsValue(
+      Xe(h, u.field_groups)
+    );
+  }, [e, a, u, t]), f ? c ? /* @__PURE__ */ l(N, { type: "info", message: "Loading...", showIcon: !0 }) : d || !p ? /* @__PURE__ */ l(N, { type: "error", message: "Failed to load nested form", showIcon: !0 }) : /* @__PURE__ */ l(
+    "div",
+    {
+      style: {
+        border: "1px solid rgba(5, 5, 5, 0.12)",
+        borderRadius: 8,
+        padding: 12,
+        background: "#fff"
+      },
+      children: /* @__PURE__ */ l(
+        xe,
+        {
+          ref: m,
+          formConfig: p,
+          formInstance: a,
+          manualSubmit: !0,
+          disableHtmlFormWrapper: !0,
+          readOnly: r || i,
+          onValuesChange: (h, _) => {
+            n?.(_ ?? {});
+          }
+        }
+      )
+    }
+  ) : /* @__PURE__ */ l(N, { type: "warning", message: "Missing nested form config_url", showIcon: !0 });
+};
+function le(e) {
+  return JSON.stringify(e);
+}
+function Yt(e, t) {
+  const n = e.get(t);
+  if (n) {
+    if (Date.now() > n.expiresAt) {
+      e.delete(t);
+      return;
+    }
+    return n.data;
+  }
+}
+function Jt(e, t, n, r) {
+  e.set(t, { data: n, expiresAt: Date.now() + r });
+}
+async function de(e, t, n, r, i) {
+  const s = e[t];
+  if (e.cache.enabled) {
+    const f = Yt(s, n);
+    if (f !== void 0) return f;
+  }
+  const o = new AbortController(), a = i ? AbortSignal.any([i, o.signal]) : o.signal, m = await r(a);
+  return e.cache.enabled && Jt(s, n, m, e.cache.ttlMs), m;
+}
+function Xt(e) {
+  const t = e?.field?.type?.code;
+  return t === "select" || t === "radio" || t === "checkbox";
+}
+async function Qt(e, t, n, r, i) {
+  if (W(n))
+    return i;
+  if (!Xt(t))
+    return String(n);
+  const s = Ee(n, t.metas);
+  if (s)
+    return s;
+  if (t.is_option_api && t.option_config?.url) {
+    const o = Ce(t, r), a = t.option_config.method?.toUpperCase() === "GET" || !t.option_config.method, f = { [t.option_config.value_attr || "value"]: n }, y = le([
+      "collapseTitle",
+      t.code,
+      t.option_config.url,
+      t.option_config.method,
+      o,
+      n
+    ]);
+    try {
+      const u = await de(
+        e,
+        "optionCache",
+        y,
+        async (d) => {
+          const p = await e.client.request({
+            method: t.option_config?.method || "GET",
+            url: t.option_config?.url,
+            params: a ? {
+              ...o?.params,
+              filter: {
+                ...o?.params?.filter,
+                ...f
+              }
+            } : o?.params,
+            data: a ? o?.data : {
+              ...o?.data,
+              filter: {
+                ...o?.data?.filter,
+                ...f
+              }
+            },
+            signal: d
+          });
+          return e.parsers.optionResponse(p.data, t);
+        }
+      ), c = oe(
+        n,
+        t,
+        u
+      );
+      if (c) return c;
+    } catch {
+    }
+  }
+  return oe(n, t) ?? i;
+}
+function Zt(e, t, n, r, i) {
+  const s = U(), [o, a] = L({});
+  return j(() => {
+    if (!t || !e) {
+      a({});
+      return;
+    }
+    let m = !1;
+    return (async () => {
+      const y = await Promise.all(
+        n.map(async (u, c) => {
+          const d = r[u.key] ?? {}, p = await Qt(
+            s,
+            e,
+            d[t],
+            d,
+            `${i} ${c + 1}`
+          );
+          return [u.key, p];
+        })
+      );
+      m || a(Object.fromEntries(y));
+    })(), () => {
+      m = !0;
+    };
+  }, [s, i, n, t, e, r]), o;
+}
+const Gt = (e) => ({
+  id: e.id,
+  code: e.code,
+  form_id: e.id,
+  method: "POST",
+  action: "",
+  config: {
+    body: ""
+  },
+  created_at: e.created_at ?? "",
+  updated_at: e.updated_at ?? "",
+  created_by: e.created_by,
+  deleted_at: e.deleted_at,
+  form: e
+});
+function en({
+  itemKey: e,
+  nestedFormConfig: t,
+  value: n,
+  disabled: r = !1,
+  readOnly: i = !1,
+  registerItemRef: s,
+  onValuesChange: o
+}) {
+  const [a] = X.useForm(), m = I(null);
+  return j(() => (s(e, m), () => {
+    s(e, null);
+  }), [e, s]), j(() => {
+    a.setFieldsValue(
+      Xe(n ?? {}, t.form.field_groups)
+    );
+  }, [a, t.form.field_groups, n]), /* @__PURE__ */ l(
+    xe,
+    {
+      ref: m,
+      formConfig: t,
+      formInstance: a,
+      manualSubmit: !0,
+      disableHtmlFormWrapper: !0,
+      readOnly: r || i,
+      onValuesChange: (f, y) => {
+        o(e, y ?? {});
+      }
+    }
+  );
+}
+const tn = ({
+  group: e,
+  value: t,
+  onChange: n,
+  disabled: r = !1,
+  readOnly: i = !1,
+  registerNestedForm: s
+}) => {
+  const o = U(), a = e.additional_config?.multiple_form, m = a?.config_url, f = a?.method ?? "GET", y = a?.primary_field, u = I(0), [c, d] = L([{ key: u.current++ }]), [p, h] = L(
+    {}
+  ), _ = I(p), A = I(c), [w, S] = L(
+    String(c[0]?.key ?? "")
+  ), b = I(/* @__PURE__ */ new Map()), {
+    data: v,
+    isLoading: T,
+    error: F
+  } = we(
+    [m, f],
+    async () => {
+      if (!m)
+        throw new Error("Missing additional_config.multiple_form.config_url");
+      const g = await o.client.request({
+        method: f,
+        url: m
+      });
+      return o.parsers.formConfigResponse(g.data);
+    },
+    { enabled: !!m }
+  );
+  j(() => {
+    _.current = p;
+  }, [p]), j(() => {
+    A.current = c;
+  }, [c]), j(() => {
+    const g = v?.code ?? ce(e), k = Ye(e, t, g);
+    d((E) => {
+      if (E.length === k.length && E.length > 0) {
+        const J = E.reduce(
+          (te, re, me) => (te[re.key] = k[me] ?? {}, te),
+          {}
+        );
+        return h(J), E;
+      }
+      const M = k.length > 0 ? k : [{}], O = M.map(() => ({ key: u.current++ })), ne = O.reduce(
+        (J, te, re) => (J[te.key] = M[re] ?? {}, J),
+        {}
+      );
+      return h(ne), S(String(O[0]?.key ?? "")), O;
+    });
+  }, [e, v?.code, t]);
+  const R = C(
+    () => v ? Gt(v) : void 0,
+    [v]
+  ), $ = C(
+    () => v?.field_groups.find((g) => g.code === y),
+    [v, y]
+  ), z = Zt(
+    $,
+    y,
+    c,
+    p,
+    e.label
+  ), q = D(
+    (g, k) => {
+      const E = g.map((M) => k[M.key] ?? {});
+      n?.(E);
+    },
+    [n]
+  ), H = D(
+    (g, k) => {
+      if (k) {
+        b.current.set(g, k);
+        return;
+      }
+      b.current.delete(g);
+    },
+    []
+  ), ee = D(
+    (g, k) => {
+      h((E) => {
+        const M = { ...E, [g]: k };
+        return q(A.current, M), M;
+      });
+    },
+    [q]
+  ), P = I({
+    submit: async () => {
+    },
+    isSubmitting: () => !1,
+    getProcessedValues: async () => ({})
+  });
+  j(() => {
+    P.current && (P.current.getProcessedValues = async () => await Promise.all(
+      A.current.map(async (k) => {
+        const E = b.current.get(k.key);
+        return E?.current ? E.current.getProcessedValues() : _.current[k.key] ?? {};
+      })
+    ));
+  }, []), j(() => {
+    if (v)
+      return s?.(e.code, P, {
+        formCode: v.code,
+        fieldType: "multiple-form"
+      }), () => {
+        s?.(e.code, null);
+      };
+  }, [e.code, v, s]);
+  const Z = D(() => {
+    const g = { key: u.current++ };
+    d((k) => {
+      const E = [...k, g];
+      return h((M) => {
+        const O = { ...M, [g.key]: {} };
+        return q(E, O), O;
+      }), E;
+    }), S(String(g.key));
+  }, [q]), B = D(
+    (g) => {
+      d((k) => {
+        const E = k.filter((M) => M.key !== g);
+        return h((M) => {
+          const O = { ...M };
+          return delete O[g], q(E, O), O;
+        }), S(String(E[0]?.key ?? "")), E;
+      });
+    },
+    [q]
+  ), fe = C(() => c.map((g, k) => {
+    const E = p[g.key] ?? {}, M = z[g.key] ?? `${e.label} ${k + 1}`;
+    return {
+      key: String(g.key),
+      label: /* @__PURE__ */ ae("div", { style: { display: "flex", justifyContent: "space-between", width: "100%" }, children: [
+        /* @__PURE__ */ l("span", { children: M }),
+        !r && !i ? /* @__PURE__ */ l(
+          vt,
+          {
+            onClick: (O) => {
+              O.preventDefault(), O.stopPropagation(), B(g.key);
+            }
+          }
+        ) : null
+      ] }),
+      children: R ? /* @__PURE__ */ l(
+        en,
+        {
+          itemKey: g.key,
+          nestedFormConfig: R,
+          value: E,
+          disabled: r,
+          readOnly: i,
+          registerItemRef: H,
+          onValuesChange: ee
+        }
+      ) : null
+    };
+  }), [
+    r,
+    e.label,
+    B,
+    c,
+    R,
+    ee,
+    i,
+    H,
+    z,
+    p
+  ]);
+  return m ? y ? T ? /* @__PURE__ */ l(N, { type: "info", message: "Loading...", showIcon: !0 }) : F || !R ? /* @__PURE__ */ l(N, { type: "error", message: "Failed to load nested form", showIcon: !0 }) : /* @__PURE__ */ ae("div", { children: [
+    /* @__PURE__ */ l(
+      at,
+      {
+        accordion: !0,
+        activeKey: w,
+        onChange: (g) => S(Array.isArray(g) ? String(g[0] ?? "") : String(g)),
+        items: fe
+      }
+    ),
+    !r && !i ? /* @__PURE__ */ l(
+      Ae,
+      {
+        style: { marginTop: 12 },
+        block: !0,
+        type: "dashed",
+        onClick: Z,
+        icon: /* @__PURE__ */ l(At, {}),
+        children: "Add item"
+      }
+    ) : null
+  ] }) : /* @__PURE__ */ l(
+    N,
+    {
+      type: "warning",
+      message: "Missing multiple_form primary_field",
+      showIcon: !0
+    }
+  ) : /* @__PURE__ */ l(
+    N,
+    {
+      type: "warning",
+      message: "Missing multiple_form config_url",
+      showIcon: !0
+    }
+  );
+}, nn = ({
   formInstance: e,
   uploadUrl: t,
   setFieldState: n
 }) => {
-  const { client: r, upload: i, i18n: a, renderers: o } = O(), { messages: s } = a, d = L(() => {
+  const { client: r, upload: i, i18n: s, renderers: o } = U(), { messages: a } = s, m = D(() => {
     if (i.upload) return i.upload;
-    const l = t ?? i.uploadUrl;
-    if (l)
-      return async ({ file: p, signal: h, onProgress: f, fieldCode: _, fieldGroup: v, metadata: b }) => {
-        const w = i.getPayload ? i.getPayload({
-          file: p,
+    const c = t ?? i.uploadUrl;
+    if (c)
+      return async ({ file: d, signal: p, onProgress: h, fieldCode: _, fieldGroup: A, metadata: w }) => {
+        const S = i.getPayload ? i.getPayload({
+          file: d,
           fieldCode: _,
-          fieldGroup: v,
-          uploadUrl: l,
-          signal: h,
-          onProgress: f,
-          metadata: b
+          fieldGroup: A,
+          uploadUrl: c,
+          signal: p,
+          onProgress: h,
+          metadata: w
         }) : (() => {
-          const g = new FormData();
-          return g.append("file", p), b && Object.entries(b).forEach(([k, E]) => {
-            g.append(k, String(E));
-          }), g;
-        })(), A = (await r.request({
+          const T = new FormData();
+          return T.append("file", d), w && Object.entries(w).forEach(([F, R]) => {
+            T.append(F, String(R));
+          }), T;
+        })(), v = (await r.request({
           method: "POST",
-          url: l,
-          data: w,
-          headers: w instanceof FormData ? { "Content-Type": "multipart/form-data" } : void 0,
-          signal: h,
-          onUploadProgress: (g) => {
-            f?.(
-              Math.round(g.loaded * 100 / (g.total || 1))
+          url: c,
+          data: S,
+          headers: S instanceof FormData ? { "Content-Type": "multipart/form-data" } : void 0,
+          signal: p,
+          onUploadProgress: (T) => {
+            h?.(
+              Math.round(T.loaded * 100 / (T.total || 1))
             );
           }
         })).data;
         return {
-          uid: p.uid,
-          ...A,
-          path: String(A.path ?? "")
+          uid: d.uid,
+          ...v,
+          path: String(v.path ?? "")
         };
       };
-  }, [r, i, t]), c = L(
-    (l, p) => (h) => {
-      const { file: f, onProgress: _, onError: v, onSuccess: b } = h, w = new AbortController(), S = d();
-      return S ? (S({
-        file: f,
-        fieldCode: l,
-        fieldGroup: p,
+  }, [r, i, t]), f = D(
+    (c, d) => (p) => {
+      const { file: h, onProgress: _, onError: A, onSuccess: w } = p, S = new AbortController(), b = m();
+      return b ? (b({
+        file: h,
+        fieldCode: c,
+        fieldGroup: d,
         uploadUrl: t ?? i.uploadUrl,
-        signal: w.signal,
-        onProgress: (A) => _?.({ percent: A })
+        signal: S.signal,
+        onProgress: (v) => _?.({ percent: v })
       }).then(
-        (A) => b?.({
-          ...A,
-          uid: A.uid ?? f.uid,
-          path: A.path,
-          upload_date: ae().format("YYYY-MM-DD HH:mm:ss")
+        (v) => w?.({
+          ...v,
+          uid: v.uid ?? h.uid,
+          path: v.path,
+          upload_date: ge().format("YYYY-MM-DD HH:mm:ss")
         })
-      ).catch((A) => v?.(A)), { abort: () => w.abort() }) : (v?.(new Error(s.uploadError ?? "Upload not configured")), { abort() {
+      ).catch((v) => A?.(v)), { abort: () => S.abort() }) : (A?.(new Error(a.uploadError ?? "Upload not configured")), { abort() {
       } });
     },
-    [s.uploadError, d, i.uploadUrl, t]
-  ), y = L(
-    (l, p) => async (h) => {
-      const f = h.response?.path;
-      return f ? i.remove({ path: f, fieldCode: l, fieldGroup: p }) : !0;
+    [a.uploadError, m, i.uploadUrl, t]
+  ), y = D(
+    (c, d) => async (p) => {
+      const h = p.response?.path;
+      return h ? i.remove({ path: h, fieldCode: c, fieldGroup: d }) : !0;
     },
     [i]
-  ), m = L(
-    (l, {
-      state: p,
-      options: h,
-      optionsLoading: f,
+  ), u = D(
+    (c, {
+      state: d,
+      options: p,
+      optionsLoading: h,
       optionsError: _,
-      onSearchKeyword: v,
-      readOnly: b = !1
+      onSearchKeyword: A,
+      readOnly: w = !1,
+      registerNestedForm: S
     }) => {
-      const { additional_config: w, field: S } = l, A = S?.type?.code, g = b || l.is_readonly || p?.disabled, k = tt(
-        l,
+      const { additional_config: b, field: v } = c, T = v?.type?.code, F = w || c.is_readonly || d?.disabled, R = kt(
+        c,
         o.fields
       );
-      if (k)
-        return k(l, {
-          state: p,
-          options: h,
-          optionsLoading: f,
+      if (R)
+        return R(c, {
+          state: d,
+          options: p,
+          optionsLoading: h,
           optionsError: _,
-          onSearchKeyword: v,
-          readOnly: b,
+          onSearchKeyword: A,
+          readOnly: w,
           formInstance: e,
-          disabled: !!g,
+          disabled: !!F,
           setFieldState: n
         });
-      const E = rt(h, l);
-      switch (A) {
+      const $ = Ct(p, c);
+      switch (T) {
         case "text":
-          return w?.text?.textarea ? /* @__PURE__ */ u(
-            we.TextArea,
+          return b?.text?.textarea ? /* @__PURE__ */ l(
+            Le.TextArea,
             {
-              disabled: g,
-              placeholder: s.inputPlaceholder(l.label),
-              rows: w?.text?.rows
+              disabled: F,
+              placeholder: a.inputPlaceholder(c.label),
+              rows: b?.text?.rows
             }
-          ) : /* @__PURE__ */ u(
-            we,
+          ) : /* @__PURE__ */ l(
+            Le,
             {
-              disabled: g,
-              placeholder: s.inputPlaceholder(l.label)
+              disabled: F,
+              placeholder: a.inputPlaceholder(c.label)
             }
           );
         case "number":
-          return /* @__PURE__ */ u(
-            $e,
+          return /* @__PURE__ */ l(
+            ut,
             {
               style: { width: "100%" },
-              disabled: g,
-              placeholder: s.inputPlaceholder(l.label),
-              min: w?.number?.min,
-              max: w?.number?.max
+              disabled: F,
+              placeholder: a.inputPlaceholder(c.label),
+              min: b?.number?.min,
+              max: b?.number?.max
             }
           );
         case "select": {
-          const M = {
-            disabled: g,
-            options: E,
-            placeholder: s.selectPlaceholder(l.label),
+          const z = {
+            disabled: F,
+            options: $,
+            placeholder: a.selectPlaceholder(c.label),
             allowClear: !0,
-            loading: f,
-            mode: w?.select?.multiple ? "multiple" : void 0,
-            notFoundContent: _ ? s.optionError : f ? s.optionLoading : void 0
+            loading: h,
+            mode: b?.select?.multiple ? "multiple" : void 0,
+            notFoundContent: _ ? a.optionError : h ? a.optionLoading : void 0
           };
-          return v ? /* @__PURE__ */ u(
-            ot,
+          return A ? /* @__PURE__ */ l(
+            xt,
             {
-              ...M,
-              onSearchKeyword: v,
-              searchDebounceMs: w?.select?.searchDebounceMs ?? 500
+              ...z,
+              onSearchKeyword: A,
+              searchDebounceMs: b?.select?.searchDebounceMs ?? 500
             }
-          ) : /* @__PURE__ */ u(Ee, { ...M, showSearch: !0, optionFilterProp: "label" });
+          ) : /* @__PURE__ */ l(Ie, { ...z, showSearch: !0, optionFilterProp: "label" });
         }
         case "radio":
-          return /* @__PURE__ */ u(Ke.Group, { disabled: g, options: E });
+          return /* @__PURE__ */ l(dt.Group, { disabled: F, options: $ });
         case "checkbox":
-          return /* @__PURE__ */ u(Ie.Group, { disabled: g, options: E });
+          return /* @__PURE__ */ l(lt.Group, { disabled: F, options: $ });
         case "datetime":
-          return /* @__PURE__ */ u(
-            We,
+          return /* @__PURE__ */ l(
+            ct,
             {
               style: { width: "100%" },
-              disabled: g,
-              showTime: w?.datetime?.showTime,
-              format: w?.datetime?.format
+              disabled: F,
+              showTime: b?.datetime?.showTime,
+              format: b?.datetime?.format
             }
           );
         case "file":
-          return /* @__PURE__ */ u(
-            dt,
+          return /* @__PURE__ */ l(
+            Lt,
             {
-              disabled: g,
-              fieldName: l.code,
+              disabled: F,
+              fieldName: c.code,
               formInstance: e,
-              multiple: w?.file?.multiple || !1,
-              maxCount: w?.file?.max,
-              accept: w?.file?.accept,
-              customRequest: c(l.code, l),
-              onRemove: y(l.code, l)
+              multiple: b?.file?.multiple || !1,
+              maxCount: b?.file?.max,
+              accept: b?.file?.accept,
+              customRequest: f(c.code, c),
+              onRemove: y(c.code, c)
             }
           );
         case "image":
-          return /* @__PURE__ */ u(
-            lt,
+          return /* @__PURE__ */ l(
+            Mt,
             {
-              disabled: g,
-              fieldName: l.code,
+              disabled: F,
+              fieldName: c.code,
               formInstance: e,
-              multiple: w?.image?.multiple || !1,
-              maxCount: w?.image?.max,
-              accept: w?.image?.accept ?? "image/*",
-              customRequest: c(l.code, l),
-              onRemove: y(l.code, l)
+              multiple: b?.image?.multiple || !1,
+              maxCount: b?.image?.max,
+              accept: b?.image?.accept ?? "image/*",
+              customRequest: f(c.code, c),
+              onRemove: y(c.code, c)
+            }
+          );
+        case "form":
+          return /* @__PURE__ */ l(
+            Ht,
+            {
+              group: c,
+              disabled: !!F,
+              readOnly: w,
+              registerNestedForm: S
+            }
+          );
+        case "multiple-form":
+          return /* @__PURE__ */ l(
+            tn,
+            {
+              group: c,
+              disabled: !!F,
+              readOnly: w,
+              registerNestedForm: S
             }
           );
         default:
@@ -316,331 +1181,223 @@ const at = ({
       }
     },
     [
-      c,
+      f,
       y,
       e,
-      s,
+      a,
       o.fields,
       n
     ]
   );
-  return P(() => ({ getDynamicField: m }), [m]);
+  return C(() => ({ getDynamicField: u }), [u]);
 };
-function te(e) {
-  return JSON.stringify(e);
-}
-function ft(e, t) {
-  const n = e.get(t);
-  if (n) {
-    if (Date.now() > n.expiresAt) {
-      e.delete(t);
-      return;
-    }
-    return n.data;
-  }
-}
-function mt(e, t, n, r) {
-  e.set(t, { data: n, expiresAt: Date.now() + r });
-}
-async function ne(e, t, n, r, i) {
-  const a = e[t];
-  if (e.cache.enabled) {
-    const c = ft(a, n);
-    if (c !== void 0) return c;
-  }
-  const o = new AbortController(), s = i ? AbortSignal.any([i, o.signal]) : o.signal, d = await r(s);
-  return e.cache.enabled && mt(a, n, d, e.cache.ttlMs), d;
-}
-function z(e, t) {
-  return t.split(".").reduce((n, r) => {
-    if (n && typeof n == "object")
-      return n[r];
-  }, e);
-}
-function pt(e, t) {
-  if (typeof e != "string") return e;
-  const n = e.match(/^\{\{(.+?)\}\}$/);
-  if (!n) return e;
-  const r = n[1].trim(), i = z(t, r);
-  return i !== void 0 ? i : e;
-}
-function ht(e, t) {
-  const n = {};
-  for (const r in e)
-    n[r] = pt(
-      e[r],
-      t
-    );
-  return n;
-}
 function rn(e, t) {
-  const n = { ...e };
-  return t.forEach((r) => {
-    const i = e[r.code];
-    if (i == null) return;
-    switch (r.field?.type?.code) {
-      case "datetime": {
-        const o = ae(i);
-        o.isValid() && (n[r.code] = o);
-        break;
-      }
-      case "file":
-      case "image": {
-        if (Array.isArray(i) && i.length > 0) {
-          const o = i.map((s, d) => {
-            const c = s;
-            return {
-              uid: String(c.uid ?? c.path ?? d),
-              name: c.name ?? `file-${d}`,
-              status: "done",
-              percent: 100,
-              type: c.type,
-              size: c.size,
-              response: s
-            };
-          });
-          n[r.code] = { fileList: o };
-        }
-        break;
-      }
-    }
-  }), n;
-}
-function yt(e) {
-  const t = e.option_config?.api_options?.params || {}, n = e.option_config?.api_options?.data || {}, r = (i) => Object.values(i).filter(
-    (a) => typeof a == "string" && a.startsWith("{{") && a.endsWith("}}")
-  ).map((a) => a.slice(2, -2).trim());
-  return Array.from(/* @__PURE__ */ new Set([...r(t), ...r(n)]));
-}
-function I(e, t) {
-  const n = {};
-  for (const r in e) {
-    const i = e[r];
-    if (typeof i == "string" && i.startsWith("{{") && i.endsWith("}}")) {
-      const a = i.slice(2, -2).trim();
-      n[r] = t?.[a];
-    } else
-      n[r] = i;
-  }
-  return n;
-}
-function re(e, t) {
-  return e.replace(/\{\{\s*(\w+)\s*\}\}/g, (n, r) => {
-    const i = t?.[r];
-    return i != null ? String(i) : "";
-  });
-}
-function _t(e, t, n) {
-  const i = t.find((a) => a.code === e)?.additional_config?.on_field_change?.clear ?? [];
-  return i.length === 0 ? [] : i.filter(
-    (a) => n?.[a] !== void 0 && n?.[a] !== null
-  );
-}
-function bt(e, t) {
-  const n = P(
-    () => yt(e),
+  const n = C(
+    () => Wt(e),
     [e]
-  ), r = G.useWatch(
+  ), r = X.useWatch(
     n.length > 0 ? n : void 0,
     t
   );
-  return P(() => {
+  return C(() => {
     if (!n.length) return {};
     const i = {};
-    return n.forEach((a, o) => {
-      Array.isArray(r) ? i[a] = r[o] : i[a] = r;
+    return n.forEach((s, o) => {
+      Array.isArray(r) ? i[s] = r[o] : i[s] = r;
     }), i;
   }, [n, r]);
 }
-function vt({
+function on({
   group: e,
   formInstance: t,
   searchKeyword: n = "",
   searchDebounceMs: r = 500
 }) {
-  const i = O(), a = bt(e, t), o = G.useWatch(e.code, t), [s, d] = x(), [c, y] = x(!1), [m, l] = x(), p = K(null), [h, f] = x(n), _ = e.additional_config?.select?.search_keyword ?? !1, v = P(
-    () => me((S) => f(S), r),
+  const i = U(), s = rn(e, t), o = X.useWatch(e.code, t), [a, m] = L(), [f, y] = L(!1), [u, c] = L(), d = I(null), [p, h] = L(n), _ = e.additional_config?.select?.search_keyword ?? !1, A = C(
+    () => Fe((b) => h(b), r),
     [r]
   );
-  B(() => {
-    _ ? v(n) : f("");
-  }, [n, _, v]);
-  const b = P(() => {
-    const S = e.option_config?.api_options?.params, A = e.option_config?.api_options?.data;
-    if (!(!S && !A))
+  j(() => {
+    _ ? A(n) : h("");
+  }, [n, _, A]);
+  const w = C(() => {
+    const b = e.option_config?.api_options?.params, v = e.option_config?.api_options?.data;
+    if (!(!b && !v))
       return {
-        params: S ? I(S, a) : void 0,
-        data: A ? I(A, a) : void 0
+        params: b ? ie(b, s) : void 0,
+        data: v ? ie(v, s) : void 0
       };
-  }, [a, e]), w = L(async () => {
+  }, [s, e]), S = D(async () => {
     if (!e.option_config || !e.is_option_api || !e.option_config.url)
       return;
-    p.current?.abort();
-    const S = new AbortController();
-    p.current = S;
-    const A = e.option_config.method?.toUpperCase() === "GET" || !e.option_config.method, g = _ ? h : "", k = te([
+    d.current?.abort();
+    const b = new AbortController();
+    d.current = b;
+    const v = e.option_config.method?.toUpperCase() === "GET" || !e.option_config.method, T = _ ? p : "", F = le([
       e.code,
       e.option_config.url,
       e.option_config.method,
-      b,
-      g
+      w,
+      T
     ]);
-    y(!0), l(void 0);
+    y(!0), c(void 0);
     try {
-      const E = await ne(
+      const R = await de(
         i,
         "optionCache",
-        k,
-        async (R) => {
-          const T = await i.client.request({
+        F,
+        async (P) => {
+          const Z = await i.client.request({
             method: e.option_config?.method || "GET",
             url: e.option_config?.url,
-            params: A && _ ? { ...b?.params, keywords: g } : b?.params,
-            data: !A && _ ? { ...b?.data, keywords: g } : b?.data,
-            signal: R
+            params: v && _ ? { ...w?.params, keywords: T } : w?.params,
+            data: !v && _ ? { ...w?.data, keywords: T } : w?.data,
+            signal: P
           });
-          return i.parsers.optionResponse(T.data, e);
+          return i.parsers.optionResponse(Z.data, e);
         },
-        S.signal
-      ), M = Array.isArray(o) ? o : o == null ? [] : [o], W = new Set(
-        E.map((R) => String(Pe(R, e)))
-      ), j = M.filter((R) => R == null || R === "" ? !1 : !W.has(String(R)));
+        b.signal
+      ), $ = Array.isArray(o) ? o : o == null ? [] : [o], z = new Set(
+        R.map((P) => String(Ke(P, e)))
+      ), q = $.filter((P) => P == null || P === "" ? !1 : !z.has(String(P)));
       let H = [];
-      j.length > 0 && (H = (await Promise.all(
-        j.map(async (R) => {
-          const T = te([
+      q.length > 0 && (H = (await Promise.all(
+        q.map(async (P) => {
+          const Z = le([
             e.code,
             e.option_config?.url,
             e.option_config?.method,
-            b,
+            w,
             "selected",
-            R
+            P
           ]);
-          return ne(
+          return de(
             i,
             "optionCache",
-            T,
-            async (se) => {
-              const q = { [e.option_config?.value_attr || "value"]: R }, Q = await i.client.request({
+            Z,
+            async (B) => {
+              const g = { [e.option_config?.value_attr || "value"]: P }, k = await i.client.request({
                 method: e.option_config?.method || "GET",
                 url: e.option_config?.url,
-                params: A ? {
-                  ...b?.params,
+                params: v ? {
+                  ...w?.params,
                   filter: {
-                    ...b?.params?.filter,
-                    ...q
+                    ...w?.params?.filter,
+                    ...g
                   }
-                } : b?.params,
-                data: A ? b?.data : {
-                  ...b?.data,
+                } : w?.params,
+                data: v ? w?.data : {
+                  ...w?.data,
                   filter: {
-                    ...b?.data?.filter,
-                    ...q
+                    ...w?.data?.filter,
+                    ...g
                   }
                 },
-                signal: se
+                signal: B
               });
-              return i.parsers.optionResponse(Q.data, e);
+              return i.parsers.optionResponse(k.data, e);
             },
-            S.signal
+            b.signal
           );
         })
       )).flat());
-      const J = it(
-        [...E, ...H],
+      const ee = Et(
+        [...R, ...H],
         e
       );
-      S.signal.aborted || d(J);
-    } catch (E) {
-      S.signal.aborted || l(E);
+      b.signal.aborted || m(ee);
+    } catch (R) {
+      b.signal.aborted || c(R);
     } finally {
-      S.signal.aborted || y(!1);
+      b.signal.aborted || y(!1);
     }
   }, [
-    b,
+    w,
     i,
-    h,
+    p,
     e,
     _,
     o
   ]);
-  return B(() => (e.option_config && e.is_option_api && w(), () => p.current?.abort()), [w, e]), { options: s, isLoading: c, error: m, refetch: w };
+  return j(() => (e.option_config && e.is_option_api && S(), () => d.current?.abort()), [S, e]), { options: a, isLoading: f, error: u, refetch: S };
 }
-const wt = ({
+const sn = ({
   group: e,
   formInstance: t,
   fieldState: n,
   setFieldState: r,
   uploadUrl: i,
-  readOnly: a = !1,
+  readOnly: s = !1,
   size: o = "middle",
-  ...s
+  registerNestedForm: a,
+  ...m
 }) => {
-  const { getDynamicField: d } = ut({
+  const { getDynamicField: f } = nn({
     formInstance: t,
     uploadUrl: i,
     setFieldState: r
-  }), c = G.useWatch(e.code, t), [y, m] = x(""), l = e.additional_config?.select?.search_keyword ?? !1, { options: p, isLoading: h, error: f } = vt({
+  }), y = X.useWatch(e.code, t), [u, c] = L(""), d = e.additional_config?.select?.search_keyword ?? !1, { options: p, isLoading: h, error: _ } = on({
     group: e,
     formInstance: t,
-    searchKeyword: y,
+    searchKeyword: u,
     searchDebounceMs: e.additional_config?.select?.searchDebounceMs ?? 500
-  }), _ = L((b) => {
-    m(b);
+  }), A = D((S) => {
+    c(S);
   }, []);
-  B(() => {
-    e.additional_config?.on_field_empty?.disable?.length && e.additional_config.on_field_empty.disable.forEach((b) => {
-      r(b, { disabled: !c });
+  j(() => {
+    e.additional_config?.on_field_empty?.disable?.length && e.additional_config.on_field_empty.disable.forEach((S) => {
+      r(S, { disabled: !y });
     });
-  }, [c, t, e, r]);
-  const v = o === "small" ? 4 : 12;
-  return /* @__PURE__ */ u(
-    G.Item,
+  }, [y, t, e, r]);
+  const w = o === "small" ? 4 : 12;
+  return /* @__PURE__ */ l(
+    X.Item,
     {
       label: e.label,
       name: e.code,
       hidden: n?.hidden,
       rules: [{ required: n?.required || !1 }],
-      style: { marginBottom: v, ...s.style },
-      ...s,
-      children: d(e, {
+      style: { marginBottom: w, ...m.style },
+      ...m,
+      children: f(e, {
         state: n,
         options: p,
         optionsLoading: h,
-        optionsError: f,
-        onSearchKeyword: l ? _ : void 0,
-        readOnly: a
+        optionsError: _,
+        onSearchKeyword: d ? A : void 0,
+        readOnly: s,
+        registerNestedForm: a
       })
     }
   );
 };
-function gt(e, t) {
-  return e.group.id === t.group.id && e.readOnly === t.readOnly && e.uploadUrl === t.uploadUrl && e.size === t.size && e.fieldState?.disabled === t.fieldState?.disabled && e.fieldState?.hidden === t.fieldState?.hidden && e.fieldState?.required === t.fieldState?.required;
+function an(e, t) {
+  return e.group.id === t.group.id && e.readOnly === t.readOnly && e.uploadUrl === t.uploadUrl && e.size === t.size && e.registerNestedForm === t.registerNestedForm && e.fieldState?.disabled === t.fieldState?.disabled && e.fieldState?.hidden === t.fieldState?.hidden && e.fieldState?.required === t.fieldState?.required;
 }
-const At = V(wt, gt);
-function St({
+const cn = Q(sn, an);
+function ln({
   fieldGroups: e,
   fieldStates: t,
   renderField: n,
   gutter: r,
   defaultColSpan: i
 }) {
-  return /* @__PURE__ */ u(ze, { gutter: r, children: e.map((a) => {
-    const o = t[a.code]?.hidden ? 0 : Number(a.additional_config?.field_col_span) || i;
-    return /* @__PURE__ */ u(He, { xs: o, children: n(a) }, a.id);
+  return /* @__PURE__ */ l(ft, { gutter: r, children: e.map((s) => {
+    const o = t[s.code]?.hidden ? 0 : Number(s.additional_config?.field_col_span) || i;
+    return /* @__PURE__ */ l(mt, { xs: o, children: n(s) }, s.id);
   }) });
 }
-function Ft(e) {
-  return P(() => {
+function dn(e) {
+  return C(() => {
     const t = e?.form?.field_groups ?? [], n = /* @__PURE__ */ new Map(), r = {};
-    t.forEach((a) => {
-      n.set(a.code, a), a.additional_config?.default !== void 0 && (r[a.code] = a.additional_config.default);
+    t.forEach((s) => {
+      n.set(s.code, s), s.additional_config?.default !== void 0 && (r[s.code] = s.additional_config.default);
     });
-    const i = t.filter((a) => !a.is_hidden);
+    const i = t.filter((s) => !s.is_hidden);
     return { fieldGroups: t, fieldByCode: n, visibleFieldGroups: i, initialValues: r };
   }, [e]);
 }
-function ge(e) {
+function je(e) {
   const t = {};
   return e.forEach((n) => {
     t[n.code] = {
@@ -650,636 +1407,743 @@ function ge(e) {
     };
   }), t;
 }
-function Et(e) {
-  const [t, n] = x(
-    () => ge(e)
+function un(e) {
+  const [t, n] = L(
+    () => je(e)
   );
-  B(() => {
-    n(ge(e));
+  j(() => {
+    n(je(e));
   }, [e]);
-  const r = L((i, a) => {
+  const r = D((i, s) => {
     n((o) => ({
       ...o,
-      [i]: { ...o[i], ...a }
+      [i]: { ...o[i], ...s }
     }));
   }, []);
   return { fieldStates: t, setFieldStates: n, setFieldState: r };
 }
-function kt({
+function fn(e) {
+  const t = {}, n = {};
+  return e.forEach((r) => {
+    t[r.containerKey] || (t[r.containerKey] = {}), t[r.containerKey][r.formCode] = r.value, n[r.fieldGroupCode] = [{ form_code: r.formCode }];
+  }), { containers: t, formReferences: n };
+}
+function mn({
   formInstance: e,
   fieldByCode: t,
   relatedData: n,
-  transformers: r
+  transformers: r,
+  nestedFormRefs: i
 }) {
-  return { buildProcessedValues: L(async () => {
+  return { buildProcessedValues: D(async () => {
     await e.validateFields();
-    const a = e.getFieldsValue(), o = {};
-    for (const c of Object.keys(a)) {
-      const y = t.get(c);
-      if (!y) continue;
-      let m;
-      switch (y.field?.type?.code) {
+    const o = e.getFieldsValue(), a = {}, m = [];
+    for (const u of Object.keys(o)) {
+      const c = t.get(u);
+      if (!c) continue;
+      let d;
+      switch (c.field?.type?.code) {
         case "datetime":
-          m = a[c] ? ae(a[c]).format(
-            y.additional_config?.datetime?.format
+          d = o[u] ? ge(o[u]).format(
+            c.additional_config?.datetime?.format
           ) : null;
           break;
         case "image":
         case "file":
-          a[c]?.fileList?.length && (m = a[c].fileList.filter((l) => l.percent === 100).map((l) => ({
-            ...l.response,
-            name: l.name,
-            type: l.type,
-            size: l.size
+          o[u]?.fileList?.length && (d = o[u].fileList.filter((p) => p.percent === 100).map((p) => ({
+            ...p.response,
+            name: p.name,
+            type: p.type,
+            size: p.size
           })));
           break;
+        case "form":
+        case "multiple-form": {
+          const p = i.current.get(u);
+          p?.ref.current ? d = await p.ref.current.getProcessedValues() : d = o[u], r.transformFieldValue && (d = r.transformFieldValue(u, d, c)), p ? m.push({
+            fieldGroupCode: u,
+            formCode: p.formCode,
+            value: d,
+            containerKey: Re(c)
+          }) : a[u] = d;
+          break;
+        }
         default:
-          m = a[c];
+          d = o[u];
       }
-      r.transformFieldValue && (m = r.transformFieldValue(c, m, y)), o[c] = m;
+      c.field?.type?.code !== "form" && c.field?.type?.code !== "multiple-form" && (r.transformFieldValue && (d = r.transformFieldValue(u, d, c)), a[u] = d);
     }
-    let s = o;
-    return r.transformSubmitValues && (s = r.transformSubmitValues(
-      s,
+    if (m.length > 0) {
+      const { containers: u, formReferences: c } = fn(m);
+      Object.assign(a, u), Object.keys(c).length > 0 && (a.form_references = c);
+    }
+    let f = a;
+    return r.transformSubmitValues && (f = r.transformSubmitValues(
+      f,
       Array.from(t.values()),
       n
-    )), (r.parseRelatedDataTemplates ?? ht)(s, n ?? {});
-  }, [t, e, n, r]) };
+    )), (r.parseRelatedDataTemplates ?? Nt)(f, n ?? {});
+  }, [t, e, i, n, r]) };
 }
-const Rt = Je(
+const xe = _t(
   ({
     formConfig: e,
     formInstance: t,
     relatedData: n,
     uploadUrl: r,
     uploadResourceUrl: i,
-    submitTrackingUrl: a,
+    submitTrackingUrl: s,
     onBeforeSubmit: o,
-    onSubmitSuccess: s,
-    onSubmitError: d,
-    isRedirectAfterCreate: c,
+    onSubmitSuccess: a,
+    onSubmitError: m,
+    isRedirectAfterCreate: f,
     onRedirect: y,
-    size: m = "middle",
-    manualSubmit: l = !1,
-    onValuesChange: p,
-    readOnly: h = !1,
-    submitDebounceMs: f,
+    size: u = "middle",
+    manualSubmit: c = !1,
+    onValuesChange: d,
+    readOnly: p = !1,
+    submitDebounceMs: h,
     gutter: _ = [8, 0],
-    defaultColSpan: v = 12,
-    submitButtonLabel: b
-  }, w) => {
-    const { message: S } = Ye.useApp(), A = O(), { i18n: g, client: k, parsers: E, redirectHandler: M, renderers: W, transformers: j } = A, H = r ?? i, J = f ?? A.submitDebounceMs, R = b ?? g.messages.submit, { fieldGroups: T, fieldByCode: se, initialValues: Y } = Ft(e), { fieldStates: q, setFieldState: Q } = Et(T), { buildProcessedValues: X } = kt({
+    defaultColSpan: A = 12,
+    submitButtonLabel: w,
+    disableHtmlFormWrapper: S = !1
+  }, b) => {
+    const { message: v } = pt.useApp(), T = U(), { i18n: F, client: R, parsers: $, redirectHandler: z, renderers: q, transformers: H } = T, ee = r ?? i, P = h ?? T.submitDebounceMs, Z = w ?? F.messages.submit, { fieldGroups: B, fieldByCode: fe, initialValues: g } = dn(e), { fieldStates: k, setFieldState: E } = un(B), M = I(/* @__PURE__ */ new Map()), O = D(
+      (x, Y, G) => {
+        if (Y && G) {
+          M.current.set(x, { ref: Y, ...G });
+          return;
+        }
+        M.current.delete(x);
+      },
+      []
+    ), { buildProcessedValues: ne } = mn({
       formInstance: t,
-      fieldByCode: se,
+      fieldByCode: fe,
       relatedData: n,
-      transformers: j
-    }), Z = K(!1), [pe, he] = x(!1), [ye, _e] = x(!1);
-    B(() => {
-      if (Object.keys(Y).length > 0) {
-        const F = j.normalizeInitialValues ? j.normalizeInitialValues(Y, T) : Y;
-        t.setFieldsValue(F);
+      transformers: H,
+      nestedFormRefs: M
+    }), J = I(!1), [te, re] = L(!1), [me, Te] = L(!1);
+    j(() => {
+      if (Object.keys(g).length > 0) {
+        const x = H.normalizeInitialValues ? H.normalizeInitialValues(g, B) : g;
+        t.setFieldsValue(x);
       }
-    }, [T, t, Y, j]);
-    const ee = L(async () => {
-      if (!Z.current) {
-        Z.current = !0, he(!0);
+    }, [B, t, g, H]);
+    const pe = D(async () => {
+      if (!J.current) {
+        J.current = !0, re(!0);
         try {
-          let F = await X();
+          let x = await ne();
           try {
-            a && (_e(!0), await k.request({
+            s && (Te(!0), await R.request({
               method: "POST",
-              url: a,
-              data: F
+              url: s,
+              data: x
             }));
-            const D = await o?.(F);
-            if (D === !1) return;
-            D && typeof D == "object" && (F = D);
-          } catch (D) {
-            console.error(D);
+            const K = await o?.(x);
+            if (K === !1) return;
+            K && typeof K == "object" && (x = K);
+          } catch (K) {
+            console.error(K);
             return;
           } finally {
-            _e(!1);
+            Te(!1);
           }
-          const U = await k.request({
+          const Y = await R.request({
             method: e.method,
             url: e.action,
-            data: F
+            data: x
           });
           t.resetFields(
-            T.filter((D) => !D.is_hidden).map((D) => D.code)
+            B.filter((K) => !K.is_hidden).map((K) => K.code)
           );
-          const N = E.submitResponse(U.data);
-          c && N.redirectUrl && (y ?? M)(N.redirectUrl, "_blank"), s?.({
-            values: F,
-            response: U.data,
-            data: N.data ?? U.data
+          const G = $.submitResponse(Y.data);
+          f && G.redirectUrl && (y ?? z)(G.redirectUrl, "_blank"), a?.({
+            values: x,
+            response: Y.data,
+            data: G.data ?? Y.data
           });
-        } catch (F) {
-          const U = F;
-          S.error(
-            U?.response?.data?.message ?? g.messages.submitError
-          ), d?.(F);
+        } catch (x) {
+          const Y = x;
+          v.error(
+            Y?.response?.data?.message ?? F.messages.submitError
+          ), m?.(x);
         } finally {
-          Z.current = !1, he(!1);
+          J.current = !1, re(!1);
         }
       }
     }, [
-      X,
-      k,
-      T,
+      ne,
+      R,
+      B,
       e.action,
       e.method,
       t,
-      g.messages.submitError,
-      c,
-      S,
+      F.messages.submitError,
+      f,
+      v,
       o,
       y,
-      d,
-      s,
-      E,
-      M,
-      a
+      m,
+      a,
+      $,
+      z,
+      s
     ]);
-    Qe(
-      w,
+    bt(
+      b,
       () => ({
-        submit: ee,
-        getProcessedValues: X,
-        isSubmitting: () => Z.current
+        submit: pe,
+        getProcessedValues: ne,
+        isSubmitting: () => J.current
       }),
-      [X, ee]
+      [ne, pe]
     );
-    const be = P(
-      () => me(() => {
-        ee();
-      }, J),
-      [ee, J]
-    ), qe = L(
-      (F, U) => {
-        Object.keys(F).forEach((N) => {
-          const D = _t(
-            N,
-            T,
+    const Me = C(
+      () => Fe(() => {
+        pe();
+      }, P),
+      [pe, P]
+    ), it = D(
+      (x, Y) => {
+        Object.keys(x).forEach((G) => {
+          const K = $t(
+            G,
+            B,
             t.getFieldsValue()
           );
-          D.length > 0 && t.resetFields(D);
-        }), p?.(F, U);
+          K.length > 0 && t.resetFields(K);
+        }), d?.(x, Y);
       },
-      [T, t, p]
-    ), ve = L(
-      (F) => /* @__PURE__ */ u(
-        At,
+      [B, t, d]
+    ), De = D(
+      (x) => /* @__PURE__ */ l(
+        cn,
         {
-          group: F,
+          group: x,
           formInstance: t,
-          fieldState: q[F.code],
-          setFieldState: Q,
-          uploadUrl: H,
-          readOnly: h,
-          size: m
+          fieldState: k[x.code],
+          setFieldState: E,
+          uploadUrl: ee,
+          readOnly: p,
+          size: u,
+          registerNestedForm: O
         },
-        F.id
+        x.id
       ),
       [
-        q,
+        k,
         t,
-        h,
-        H,
-        Q,
-        m
+        O,
+        p,
+        ee,
+        E,
+        u
       ]
-    ), Ue = W.layout ? W.layout({
-      fieldGroups: T,
-      fieldStates: q,
-      renderField: ve,
+    ), ot = q.layout ? q.layout({
+      fieldGroups: B,
+      fieldStates: k,
+      renderField: De,
       gutter: _,
-      defaultColSpan: v,
-      size: m
-    }) : /* @__PURE__ */ u(
-      St,
+      defaultColSpan: A,
+      size: u
+    }) : /* @__PURE__ */ l(
+      ln,
       {
-        fieldGroups: T,
-        fieldStates: q,
-        renderField: ve,
+        fieldGroups: B,
+        fieldStates: k,
+        renderField: De,
         gutter: _,
-        defaultColSpan: v,
-        size: m
+        defaultColSpan: A,
+        size: u
       }
-    ), Ge = !l && !h && (W.submitActions ? W.submitActions({
-      onSubmit: be,
-      loading: pe || ye,
-      label: R
-    }) : /* @__PURE__ */ u(de, { justify: "flex-end", children: /* @__PURE__ */ u(
-      Re,
+    ), st = !c && !p && (q.submitActions ? q.submitActions({
+      onSubmit: Me,
+      loading: te || me,
+      label: Z
+    }) : /* @__PURE__ */ l(Se, { justify: "flex-end", children: /* @__PURE__ */ l(
+      Ae,
       {
         type: "primary",
-        onClick: be,
-        loading: pe || ye,
-        children: R
+        onClick: Me,
+        loading: te || me,
+        children: Z
       }
     ) }));
-    return /* @__PURE__ */ Be(
-      G,
+    return /* @__PURE__ */ ae(
+      X,
       {
         layout: "vertical",
         form: t,
-        size: m,
-        onValuesChange: qe,
+        size: u,
+        component: S ? !1 : void 0,
+        onValuesChange: it,
         children: [
-          Ue,
-          Ge
+          ot,
+          st
         ]
       }
     );
   }
 );
-Rt.displayName = "DynamicForm";
-function Te(e) {
-  if (!e) return;
-  const { mode: t } = e;
-  if (t === "api" && e.api?.url)
-    return e.api;
-  if (t === "api_ids" && e.api_ids?.url) {
-    const n = e.api_ids, r = n.method?.toUpperCase() === "POST";
-    return {
-      url: n.url,
-      method: n.method,
-      data_path: n.data_path,
-      mapping_attr: n.mapping_attr,
-      link: n.link,
-      result_type: n.result_type ?? "array",
-      params: n.params ?? (!r && !n.data ? { ids: "{{value}}" } : void 0),
-      data: n.data ?? (r && !n.params ? { ids: "{{value}}" } : void 0)
-    };
-  }
-  if (t === "api_detail" && e.api_detail?.url) {
-    const n = e.api_detail;
-    return {
-      url: n.url,
-      method: n.method,
-      data_path: n.data_path,
-      mapping_attr: n.mapping_attr,
-      link: n.link,
-      result_type: n.result_type ?? "object",
-      url_template: n.url_template ?? !0,
-      params: n.params,
-      data: n.data
-    };
-  }
-}
-function Ae(e) {
-  return {
-    value: e,
-    id: e
-  };
-}
-function Dt(e, t) {
-  const n = t.method || "GET", r = n.toUpperCase() === "GET";
-  if (t.url_template)
-    return (Array.isArray(e) ? e.filter((d) => d != null && d !== "") : e != null && e !== "" ? [e] : []).map((d) => {
-      const c = Ae(d), y = re(t.url, c), m = t.params ? I(t.params, c) : void 0, l = t.data ? I(t.data, c) : void 0;
-      return {
-        method: n,
-        url: y,
-        params: r ? m : void 0,
-        data: r ? void 0 : l
-      };
-    });
-  const i = Ae(e), a = t.params ? I(t.params, i) : void 0, o = t.data ? I(t.data, i) : void 0;
-  return [
-    {
-      method: n,
-      url: t.url,
-      params: r ? a : void 0,
-      data: r ? void 0 : o
-    }
-  ];
-}
-function xe(e, t) {
-  const n = t.data_path ? z(e, t.data_path) : e;
-  return (t.result_type ?? (Array.isArray(n) ? "array" : "object")) === "array" ? Array.isArray(n) ? n : n != null ? [n] : [] : Array.isArray(n) ? n.length ? [n[0]] : [] : n && typeof n == "object" ? [n] : [];
-}
-function Le(e, t) {
-  return Mt(e, t.mapping_attr);
-}
-function Ce(e, t) {
-  return jt(t.link, e);
-}
-async function Pt(e, t, n, r) {
-  const i = Dt(e, t);
-  if (!i.length) return [];
-  const a = await Promise.all(
-    i.map((s) => n({ ...s, signal: r }))
-  ), o = [];
-  for (const s of a)
-    o.push(...xe(s.data, t));
-  return o;
-}
-function $(e) {
-  return !!(e == null || e === "" || Array.isArray(e) && e.length === 0);
-}
-function Tt(e, t) {
-  const n = e.option_config?.api_options?.params, r = e.option_config?.api_options?.data;
-  if (!n && !r) return;
-  const i = (a) => {
-    const o = {};
-    for (const s in a)
-      if (typeof a[s] == "string" && a[s].startsWith("{{") && a[s].endsWith("}}")) {
-        const d = a[s].slice(2, -2).trim();
-        o[s] = t?.[d];
-      } else
-        o[s] = a[s];
-    return o;
-  };
-  return {
-    params: n ? i(n) : void 0,
-    data: r ? i(r) : void 0
-  };
-}
-function xt(e, t) {
-  const n = t.option_config?.label_attr, r = t.option_config?.value_attr || "";
-  if (n?.length) {
-    const i = n.join(" - ");
-    return e[i] !== void 0 ? String(e[i]) : n.map((a) => e[a]).filter((a) => a != null && a !== "").join(" - ");
-  }
-  return String(e[r] ?? "");
-}
-function Lt(e, t) {
-  if (!t?.length) return null;
-  const r = (Array.isArray(e) ? e : [e]).map((i) => t.find((a) => String(a.value) === String(i))?.label).filter((i) => !!i);
-  return r.length ? r.join(", ") : null;
-}
-function Ct(e, t, n) {
-  if ($(e)) return null;
-  const r = t.option_config?.value_attr || "value", i = Array.isArray(e) ? e : [e];
-  if (t.is_option_api && n?.length) {
-    const o = i.map((s) => {
-      const d = n.find(
-        (c) => String(c[r]) === String(s)
-      );
-      return d ? xt(d, t) : String(s);
-    }).filter(Boolean);
-    return o.length ? o.join(", ") : null;
-  }
-  const a = Lt(e, t.metas);
-  return a || i.map(String).join(", ");
-}
-function Vt(e, t) {
-  if ($(e)) return null;
-  const n = t.additional_config?.datetime?.format, r = ae(e);
-  return r.isValid() ? n ? r.format(n) : r.format("YYYY-MM-DD HH:mm:ss") : String(e);
-}
-function Ot(e) {
-  if ($(e)) return null;
-  if (Array.isArray(e)) {
-    const t = e.map(
-      (n) => typeof n == "object" && n && "name" in n ? String(n.name) : String(n)
-    ).filter(Boolean);
-    return t.length ? t.join(", ") : null;
-  }
-  return String(e);
-}
-function Mt(e, t) {
-  return t?.length ? t.map((n) => {
-    const r = z(e, n) ?? e[n];
-    return r != null ? String(r) : "";
-  }).filter(Boolean).join(" - ") : JSON.stringify(e);
-}
-function jt(e, t) {
-  return e ? e.replace(/\{\{(.+?)\}\}/g, (n, r) => {
-    const i = r.trim(), a = z(t, i) ?? t[i];
-    return a != null ? String(a) : "";
-  }) : null;
-}
-function Se(e, t, n) {
-  if ($(e)) return null;
-  switch (t?.mode ?? "formatted") {
-    case "raw":
-    case "formatted":
-      return Array.isArray(e) ? e.map(String).join(", ") : String(e);
-    case "api":
-    case "api_ids":
-    case "api_detail": {
-      const i = Te(t);
-      if (!n || !i)
-        return Array.isArray(e) ? e.map(String).join(", ") : String(e);
-      const a = xe(n, i);
-      return a.length ? a.map((s) => {
-        const d = Le(s, i), c = Ce(s, i);
-        return c ? `${d} (${c})` : d;
-      }).filter(Boolean).join(", ") || null : String(e);
-    }
-    default:
-      return String(e);
-  }
-}
-function qt(e, t, n) {
-  const r = e.additional_config?.view_value;
-  if (r?.mode === "api" || r?.mode === "api_ids" || r?.mode === "api_detail")
-    return Se(
-      t,
-      r,
-      n.viewValueFetched
-    );
-  switch (e.field?.type?.code) {
-    case "text":
-    case "number":
-      return $(t) ? null : String(t);
-    case "datetime":
-      return Vt(t, e);
-    case "select":
-    case "radio":
-    case "checkbox":
-      return Ct(t, e, n.optionList);
-    case "image":
-    case "file":
-      return Ot(t);
-    default:
-      return r ? Se(
-        t,
-        r,
-        n.viewValueFetched
-      ) : $(t) ? null : String(t);
-  }
-}
-const ie = /* @__PURE__ */ new Map(), Ut = 3e4;
-function Gt(e) {
-  const t = ie.get(e);
+xe.displayName = "DynamicForm";
+const _e = /* @__PURE__ */ new Map(), pn = 3e4;
+function yn(e) {
+  const t = _e.get(e);
   if (t) {
     if (Date.now() > t.expiresAt) {
-      ie.delete(e);
+      _e.delete(e);
       return;
     }
     return t.error;
   }
 }
-function Fe(e, t) {
-  ie.set(e, {
+function Oe(e, t) {
+  _e.set(e, {
     error: t,
-    expiresAt: Date.now() + Ut
+    expiresAt: Date.now() + pn
   });
 }
-function oe(e, t, n = !0) {
-  const r = O(), [i, a] = x(), [o, s] = x(!1), [d, c] = x(), y = K(t), m = K(r);
-  y.current = t, m.current = r;
-  const l = te(e);
-  return B(() => {
+function ue(e, t, n = !0) {
+  const r = U(), [i, s] = L(), [o, a] = L(!1), [m, f] = L(), y = I(t), u = I(r);
+  y.current = t, u.current = r;
+  const c = le(e);
+  return j(() => {
     if (!n) {
-      a(void 0), c(void 0), s(!1);
+      s(void 0), f(void 0), a(!1);
       return;
     }
-    const h = Gt(l);
-    if (h !== void 0) {
-      c(h), s(!1);
+    const p = yn(c);
+    if (p !== void 0) {
+      f(p), a(!1);
       return;
     }
-    const f = new AbortController();
-    return s(!0), c(void 0), (async () => {
+    const h = new AbortController();
+    return a(!0), f(void 0), (async () => {
       try {
-        const v = await ne(
-          m.current,
+        const A = await de(
+          u.current,
           "viewCache",
-          l,
-          (b) => y.current(b),
-          f.signal
+          c,
+          (w) => y.current(w),
+          h.signal
         );
-        f.signal.aborted || (a(v), c(void 0));
-      } catch (v) {
-        f.signal.aborted || (Fe(l, v), c(v));
+        h.signal.aborted || (s(A), f(void 0));
+      } catch (A) {
+        h.signal.aborted || (Oe(c, A), f(A));
       } finally {
-        f.signal.aborted || s(!1);
+        h.signal.aborted || a(!1);
       }
-    })(), () => f.abort();
-  }, [n, l]), { data: i, isLoading: o, error: d, refetch: async () => {
-    if (ie.delete(l), !n) return;
-    const h = new AbortController();
-    s(!0), c(void 0);
+    })(), () => h.abort();
+  }, [n, c]), { data: i, isLoading: o, error: m, refetch: async () => {
+    if (_e.delete(c), !n) return;
+    const p = new AbortController();
+    a(!0), f(void 0);
     try {
-      const f = await ne(
-        m.current,
+      const h = await de(
+        u.current,
         "viewCache",
-        l,
+        c,
         (_) => y.current(_),
-        h.signal
+        p.signal
       );
-      return a(f), f;
-    } catch (f) {
-      throw Fe(l, f), c(f), f;
+      return s(h), h;
+    } catch (h) {
+      throw Oe(c, h), f(h), h;
     } finally {
-      s(!1);
+      a(!1);
     }
   } };
 }
-const Bt = ({ value: e, code: t, modeConfig: n }) => {
-  const { client: r, renderers: i, i18n: a } = O(), o = P(
+const hn = ({ value: e, code: t, modeConfig: n }) => {
+  const { client: r, renderers: i, i18n: s } = U(), o = C(
     () => (Array.isArray(e) ? e : [e]).filter(Boolean),
     [e]
   ), {
-    data: s,
-    isLoading: d,
-    error: c
-  } = oe(
+    data: a,
+    isLoading: m,
+    error: f
+  } = ue(
     ["api_detail", t, o, n?.url, n?.method],
-    async (l) => (await Promise.all(
-      o.map(async (h) => {
-        const f = re(n?.url || "", { id: h });
+    async (c) => (await Promise.all(
+      o.map(async (p) => {
+        const h = he(n?.url || "", { id: p });
         return (await r.request({
           method: n?.method,
-          url: f,
-          signal: l
+          url: h,
+          signal: c
         })).data;
       })
     )).filter(Boolean),
     !!(o.length && n?.url)
-  ), y = (l, p, h) => i.link ? i.link({ url: l, label: p, data: h }) : /* @__PURE__ */ u("a", { href: l, target: "_blank", rel: "noreferrer", children: p }), m = (l) => {
-    const p = n?.mapping_attr?.map((h) => l?.[h]).join(" - ");
+  ), y = (c, d, p) => i.link ? i.link({ url: c, label: d, data: p }) : /* @__PURE__ */ l("a", { href: c, target: "_blank", rel: "noreferrer", children: d }), u = (c) => {
+    const d = n?.mapping_attr?.map((p) => c?.[p]).join(" - ");
     if (n?.link) {
-      const h = re(n.link, l);
-      return y(h, p, l);
+      const p = he(n.link, c);
+      return y(p, d, c);
     }
-    return p;
+    return d;
   };
-  return d ? /* @__PURE__ */ u(C, { children: i.viewLoading?.() ?? /* @__PURE__ */ u(ue, { size: "small" }) }) : c ? /* @__PURE__ */ u(C, { children: i.viewError?.(c) ?? a.messages.viewError }) : s?.length ? /* @__PURE__ */ u(C, { children: s.map((l, p) => /* @__PURE__ */ u("div", { children: m(l) }, p)) }) : /* @__PURE__ */ u(C, { children: i.viewEmpty?.() ?? a.messages.viewEmpty });
-}, Ve = V(Bt), Wt = ({ value: e, code: t, modeConfig: n }) => {
-  const { client: r, renderers: i, i18n: a } = O(), {
+  return m ? /* @__PURE__ */ l(V, { children: i.viewLoading?.() ?? /* @__PURE__ */ l(be, { size: "small" }) }) : f ? /* @__PURE__ */ l(V, { children: i.viewError?.(f) ?? s.messages.viewError }) : a?.length ? /* @__PURE__ */ l(V, { children: a.map((c, d) => /* @__PURE__ */ l("div", { children: u(c) }, d)) }) : /* @__PURE__ */ l(V, { children: i.viewEmpty?.() ?? s.messages.viewEmpty });
+}, Qe = Q(hn), _n = ({ value: e, code: t, modeConfig: n }) => {
+  const { client: r, renderers: i, i18n: s } = U(), {
     data: o,
-    isLoading: s,
-    error: d
-  } = oe(
+    isLoading: a,
+    error: m
+  } = ue(
     ["api_ids", t, e, n?.url, n?.method],
-    async (m) => {
-      const l = n?.method || "GET", p = l.toUpperCase() === "POST", h = Array.isArray(e) ? e : [e], _ = (await r.request({
-        method: l,
+    async (u) => {
+      const c = n?.method || "GET", d = c.toUpperCase() === "POST", p = Array.isArray(e) ? e : [e], _ = (await r.request({
+        method: c,
         url: n?.url || "",
-        data: p ? { ids: h } : void 0,
-        params: p ? void 0 : { ids: h },
-        signal: m
-      })).data, v = n?.data_path ? z(_, n.data_path) : _;
-      return Array.isArray(v) ? v : _;
+        data: d ? { ids: p } : void 0,
+        params: d ? void 0 : { ids: p },
+        signal: u
+      })).data, A = n?.data_path ? se(_, n.data_path) : _;
+      return Array.isArray(A) ? A : _;
     },
     !!(e && n?.url)
-  ), c = (m, l, p) => i.link ? i.link({ url: m, label: l, data: p }) : /* @__PURE__ */ u("a", { href: m, target: "_blank", rel: "noreferrer", children: l }), y = (m) => {
-    const l = n?.mapping_attr?.map((p) => m?.[p]).join(" - ");
+  ), f = (u, c, d) => i.link ? i.link({ url: u, label: c, data: d }) : /* @__PURE__ */ l("a", { href: u, target: "_blank", rel: "noreferrer", children: c }), y = (u) => {
+    const c = n?.mapping_attr?.map((d) => u?.[d]).join(" - ");
     if (n?.link) {
-      const p = re(n.link, m);
-      return c(p, l, m);
+      const d = he(n.link, u);
+      return f(d, c, u);
     }
-    return l;
+    return c;
   };
-  return s ? /* @__PURE__ */ u(C, { children: i.viewLoading?.() ?? /* @__PURE__ */ u(ue, { size: "small" }) }) : d ? /* @__PURE__ */ u(C, { children: i.viewError?.(d) ?? a.messages.viewError }) : o ? Array.isArray(e) ? /* @__PURE__ */ u(de, { vertical: !0, children: (Array.isArray(o) ? o : [o]).map((m, l) => /* @__PURE__ */ u("div", { children: y(m) }, m.id ?? l)) }) : y(
+  return a ? /* @__PURE__ */ l(V, { children: i.viewLoading?.() ?? /* @__PURE__ */ l(be, { size: "small" }) }) : m ? /* @__PURE__ */ l(V, { children: i.viewError?.(m) ?? s.messages.viewError }) : o ? Array.isArray(e) ? /* @__PURE__ */ l(Se, { vertical: !0, children: (Array.isArray(o) ? o : [o]).map((u, c) => /* @__PURE__ */ l("div", { children: y(u) }, u.id ?? c)) }) : y(
     Array.isArray(o) ? o[0] : o
-  ) : /* @__PURE__ */ u(C, { children: i.viewEmpty?.() ?? a.messages.viewEmpty });
-}, Oe = V(Wt), It = ({
+  ) : /* @__PURE__ */ l(V, { children: i.viewEmpty?.() ?? s.messages.viewEmpty });
+}, Ze = Q(_n), bn = ({
   value: e,
   code: t,
   modeConfig: n,
   viewConfig: r
 }) => {
-  const { client: i, renderers: a, i18n: o } = O(), s = P(
-    () => n ?? (r ? Te(r) : void 0),
+  const { client: i, renderers: s, i18n: o } = U(), a = C(
+    () => n ?? (r ? Ue(r) : void 0),
     [n, r]
-  ), d = P(
-    () => ["api_view", t, e, s?.url, s?.method, s?.data_path],
-    [t, e, s?.url, s?.method, s?.data_path]
-  ), c = L(
-    async (f) => s ? Pt(
+  ), m = C(
+    () => ["api_view", t, e, a?.url, a?.method, a?.data_path],
+    [t, e, a?.url, a?.method, a?.data_path]
+  ), f = D(
+    async (h) => a ? Vt(
       e,
-      s,
-      (_) => i.request({ ..._, signal: f })
+      a,
+      (_) => i.request({ ..._, signal: h })
     ) : [],
-    [i, s, e]
-  ), { data: y, isLoading: m, error: l } = oe(d, c, !!(e && s?.url)), p = (f, _, v) => a.link ? a.link({ url: f, label: _, data: v }) : /* @__PURE__ */ u("a", { href: f, target: "_blank", rel: "noreferrer", children: _ }), h = (f, _) => {
-    if (!s) return null;
-    const v = Le(f, s), b = Ce(f, s), w = b ? p(b, v, f) : v;
-    return /* @__PURE__ */ u("div", { children: w }, f.id ?? _);
+    [i, a, e]
+  ), { data: y, isLoading: u, error: c } = ue(m, f, !!(e && a?.url)), d = (h, _, A) => s.link ? s.link({ url: h, label: _, data: A }) : /* @__PURE__ */ l("a", { href: h, target: "_blank", rel: "noreferrer", children: _ }), p = (h, _) => {
+    if (!a) return null;
+    const A = We(h, a), w = $e(h, a), S = w ? d(w, A, h) : A;
+    return /* @__PURE__ */ l("div", { children: S }, h.id ?? _);
   };
-  return m ? /* @__PURE__ */ u(C, { children: a.viewLoading?.() ?? /* @__PURE__ */ u(ue, { size: "small" }) }) : l ? /* @__PURE__ */ u(C, { children: a.viewError?.(l) ?? o.messages.viewError }) : y?.length ? s?.result_type === "object" && y.length === 1 ? h(y[0], 0) : /* @__PURE__ */ u(de, { vertical: !0, children: y.map(h) }) : /* @__PURE__ */ u(C, { children: a.viewEmpty?.() ?? o.messages.viewEmpty });
-}, Me = V(It);
-function Kt(e) {
+  return u ? /* @__PURE__ */ l(V, { children: s.viewLoading?.() ?? /* @__PURE__ */ l(be, { size: "small" }) }) : c ? /* @__PURE__ */ l(V, { children: s.viewError?.(c) ?? o.messages.viewError }) : y?.length ? a?.result_type === "object" && y.length === 1 ? p(y[0], 0) : /* @__PURE__ */ l(Se, { vertical: !0, children: y.map(p) }) : /* @__PURE__ */ l(V, { children: s.viewEmpty?.() ?? o.messages.viewEmpty });
+}, Ge = Q(bn), gn = {
+  whiteSpace: "normal",
+  wordBreak: "break-word",
+  verticalAlign: "top"
+}, et = ({
+  group: e,
+  value: t,
+  formValues: n = {}
+}) => {
+  const r = U(), i = e.additional_config?.multiple_form, s = i?.config_url, o = i?.method ?? "GET", {
+    data: a,
+    isLoading: m,
+    error: f
+  } = we(
+    [s, o],
+    async () => {
+      if (!s)
+        throw new Error("Missing additional_config.multiple_form.config_url");
+      const d = await r.client.request({
+        method: o,
+        url: s
+      });
+      return r.parsers.formConfigResponse(d.data);
+    },
+    { enabled: !!s }
+  ), y = C(() => {
+    if (!a) return [];
+    if (t && typeof t == "object" && !Array.isArray(t)) {
+      const d = t;
+      if (a.code in d && Array.isArray(d[a.code]))
+        return d[a.code];
+    }
+    return Array.isArray(t) ? t : Je(
+      e,
+      { ...n, [e.code]: t },
+      a.code
+    );
+  }, [n, e, a, t]), u = C(() => a ? [...a.field_groups].filter((d) => !d.is_hidden).sort(
+    (d, p) => Number(d.position ?? 0) - Number(p.position ?? 0)
+  ).map((d) => ({
+    key: d.code,
+    title: d.label,
+    dataIndex: d.code,
+    width: 140,
+    onCell: () => ({
+      style: gn
+    }),
+    render: (p, h) => /* @__PURE__ */ l(
+      tt,
+      {
+        code: d.code,
+        value: h[d.code],
+        fieldGroup: d,
+        formValues: h
+      }
+    )
+  })) : [], [a]), c = C(
+    () => y.map((d, p) => ({
+      key: p,
+      ...d
+    })),
+    [y]
+  );
+  return s ? m ? /* @__PURE__ */ l(N, { type: "info", message: "Loading...", showIcon: !0 }) : f || !a ? /* @__PURE__ */ l(N, { type: "error", message: "Failed to load nested form", showIcon: !0 }) : y.length === 0 ? "-" : /* @__PURE__ */ l(
+    "div",
+    {
+      style: {
+        width: "100%",
+        maxWidth: "100%",
+        overflowX: "auto",
+        overflowY: "hidden"
+      },
+      children: /* @__PURE__ */ l(
+        yt,
+        {
+          size: "small",
+          bordered: !0,
+          pagination: {
+            pageSize: 5,
+            hideOnSinglePage: !0,
+            size: "small"
+          },
+          columns: u,
+          dataSource: c
+        }
+      )
+    }
+  ) : /* @__PURE__ */ l(
+    N,
+    {
+      type: "warning",
+      message: "Missing multiple_form config_url",
+      showIcon: !0
+    }
+  );
+}, wn = ({
+  value: e,
+  fieldGroup: t,
+  formValues: n = {}
+}) => {
+  const r = U(), { renderers: i } = r, s = C(
+    () => Ee(e, t.metas),
+    [t.metas, e]
+  ), o = !!(t.is_option_api && t.option_config?.url), a = o && !s && !W(e), {
+    data: m,
+    isLoading: f,
+    error: y
+  } = ue(
+    [
+      "selectLikeView",
+      t.code,
+      t.option_config?.url,
+      t.option_config?.method,
+      e,
+      n
+    ],
+    async (u) => {
+      const c = Ce(t, n), d = t.option_config?.method?.toUpperCase() === "GET" || !t.option_config?.method, h = { [t.option_config?.value_attr || "value"]: e }, _ = await r.client.request({
+        method: t.option_config?.method || "GET",
+        url: t.option_config?.url || "",
+        params: d ? {
+          ...c?.params,
+          filter: {
+            ...c?.params?.filter,
+            ...h
+          }
+        } : c?.params,
+        data: d ? c?.data : {
+          ...c?.data,
+          filter: {
+            ...c?.data?.filter,
+            ...h
+          }
+        },
+        signal: u
+      });
+      return r.parsers.optionResponse(_.data, t);
+    },
+    a
+  );
+  return W(e) ? /* @__PURE__ */ l(V, { children: i.viewEmpty?.() ?? "-" }) : s ? /* @__PURE__ */ l(V, { children: s }) : o ? f ? /* @__PURE__ */ l(V, { children: i.viewLoading?.() ?? /* @__PURE__ */ l(be, { size: "small" }) }) : y ? /* @__PURE__ */ l(V, { children: i.viewError?.(y) ?? oe(e, t) ?? String(e) }) : /* @__PURE__ */ l(V, { children: oe(e, t, m) ?? String(e) }) : /* @__PURE__ */ l(V, { children: oe(e, t) ?? String(e) });
+}, vn = Q(wn), An = ({
+  code: e,
+  value: t,
+  fieldGroup: n,
+  formValues: r
+}) => {
+  const i = n?.field?.type?.code, s = r ?? { [e]: t };
+  if (i === "form" && n)
+    return /* @__PURE__ */ l(
+      nt,
+      {
+        group: n,
+        value: t,
+        formValues: s
+      }
+    );
+  if (i === "multiple-form" && n)
+    return /* @__PURE__ */ l(
+      et,
+      {
+        group: n,
+        value: t,
+        formValues: s
+      }
+    );
+  const o = n?.additional_config?.view_value, a = t == null ? "" : String(t);
+  if ((i === "select" || i === "radio" || i === "checkbox") && n && !o?.mode)
+    return /* @__PURE__ */ l(
+      vn,
+      {
+        value: t,
+        fieldGroup: n,
+        formValues: s
+      }
+    );
+  if (i === "datetime" && n && !o?.mode)
+    return /* @__PURE__ */ l(V, { children: ze(t, n) ?? (W(t) ? "-" : a) });
+  switch (o?.mode) {
+    case "raw":
+      return a;
+    case "api":
+      return /* @__PURE__ */ l(Ge, { code: e, value: a, viewConfig: o });
+    case "api_ids": {
+      const m = o?.api_ids;
+      return /* @__PURE__ */ l(Ze, { code: e, value: a, modeConfig: m });
+    }
+    case "api_detail": {
+      const m = o?.api_detail;
+      return /* @__PURE__ */ l(Qe, { code: e, value: a, modeConfig: m });
+    }
+    default:
+      return a;
+  }
+}, tt = Q(An), Sn = {
+  flexShrink: 0,
+  whiteSpace: "nowrap",
+  color: "rgba(0, 0, 0, 0.45)"
+}, kn = {
+  flex: 1,
+  minWidth: 0,
+  whiteSpace: "normal",
+  wordBreak: "break-word"
+}, Fn = {
+  display: "flex",
+  alignItems: "flex-start",
+  gap: 12,
+  marginBottom: 8
+}, Cn = ({
+  fieldGroups: e,
+  values: t
+}) => {
+  const n = C(() => [...e].sort(
+    (r, i) => Number(r.position ?? 0) - Number(i.position ?? 0)
+  ).filter((r) => !r.is_hidden && r.code in t).map((r) => ({
+    key: r.code,
+    label: r.label,
+    content: /* @__PURE__ */ l(
+      tt,
+      {
+        code: r.code,
+        value: t[r.code],
+        fieldGroup: r,
+        formValues: t
+      }
+    )
+  })), [e, t]);
+  return n.length === 0 ? /* @__PURE__ */ l(V, { children: "-" }) : /* @__PURE__ */ l("div", { style: { width: "100%" }, children: n.map((r) => /* @__PURE__ */ ae("div", { style: Fn, children: [
+    /* @__PURE__ */ ae("div", { style: Sn, children: [
+      r.label,
+      ":"
+    ] }),
+    /* @__PURE__ */ l("div", { style: kn, children: r.content })
+  ] }, r.key)) });
+}, nt = ({
+  group: e,
+  value: t,
+  formValues: n = {}
+}) => {
+  const r = U(), i = e.additional_config?.form?.config_url, s = e.additional_config?.form?.method ?? "GET", {
+    data: o,
+    isLoading: a,
+    error: m
+  } = we(
+    [i, s],
+    async () => {
+      if (!i)
+        throw new Error("Missing additional_config.form.config_url");
+      const y = await r.client.request({
+        method: s,
+        url: i
+      });
+      return r.parsers.formConfigResponse(y.data);
+    },
+    { enabled: !!i }
+  ), f = C(() => {
+    if (o) {
+      if (t && typeof t == "object" && !Array.isArray(t)) {
+        const y = t;
+        if (o.code in y) {
+          const u = y[o.code];
+          return u && typeof u == "object" && !Array.isArray(u) ? u : void 0;
+        }
+        return y;
+      }
+      return Kt(
+        e,
+        { ...n, [e.code]: t },
+        o.code
+      );
+    }
+  }, [n, e, o, t]);
+  return i ? a ? /* @__PURE__ */ l(N, { type: "info", message: "Loading...", showIcon: !0 }) : m || !o ? /* @__PURE__ */ l(N, { type: "error", message: "Failed to load nested form", showIcon: !0 }) : !f || Object.keys(f).length === 0 ? "-" : /* @__PURE__ */ l(
+    Cn,
+    {
+      fieldGroups: o.field_groups,
+      values: f
+    }
+  ) : /* @__PURE__ */ l(N, { type: "warning", message: "Missing nested form config_url", showIcon: !0 });
+};
+function En(e) {
   return !!(e.option_config && e.is_option_api);
 }
-function $t(e, t) {
-  const n = O(), r = te([
+function Rn(e, t) {
+  const n = U(), r = le([
     "viewModeOptions",
-    e.map((a) => a.code),
+    e.map((s) => s.code),
     t
-  ]), { data: i } = oe(
+  ]), { data: i } = ue(
     [r],
-    async (a) => {
+    async (s) => {
       const o = {};
       return await Promise.all(
-        e.map(async (s) => {
-          if (!s.option_config?.url) return;
-          const d = Tt(s, t), c = s.option_config.method?.toUpperCase() === "GET" || !s.option_config.method, y = await n.client.request({
-            method: s.option_config.method || "GET",
-            url: s.option_config.url,
-            params: c ? d?.params : void 0,
-            data: c ? void 0 : d?.data,
-            signal: a
+        e.map(async (a) => {
+          if (!a.option_config?.url) return;
+          const m = Ce(a, t), f = a.option_config.method?.toUpperCase() === "GET" || !a.option_config.method, y = await n.client.request({
+            method: a.option_config.method || "GET",
+            url: a.option_config.url,
+            params: f ? m?.params : void 0,
+            data: f ? void 0 : m?.data,
+            signal: s
           });
-          o[s.code] = {
-            optionList: n.parsers.optionResponse(y.data, s)
+          o[a.code] = {
+            optionList: n.parsers.optionResponse(y.data, a)
           };
         })
       ), o;
@@ -1288,93 +2152,101 @@ function $t(e, t) {
   );
   return i ?? {};
 }
-const an = ({
+const Kn = ({
   formConfig: e,
   formValues: t
 }) => {
-  const n = e?.form?.field_groups ?? [], r = P(
-    () => n.filter(Kt),
+  const n = e?.form?.field_groups ?? [], r = C(
+    () => n.filter(En),
     [n]
-  ), i = $t(r, t);
-  return P(() => n.filter((o) => !o.is_hidden).map((o) => {
-    const s = t?.[o.code], d = o.additional_config?.view_value, c = d?.mode;
-    if (c === "api" && d)
+  ), i = Rn(r, t);
+  return C(() => n.filter((o) => !o.is_hidden).map((o) => {
+    const a = t?.[o.code], m = o.field?.type?.code, f = o.additional_config?.view_value, y = f?.mode;
+    if (m === "form")
+      return {
+        key: o.code,
+        label: o.label,
+        rawValue: a,
+        viewValue: /* @__PURE__ */ l(
+          nt,
+          {
+            group: o,
+            value: a,
+            formValues: t
+          }
+        ),
+        field_group: o
+      };
+    if (m === "multiple-form")
+      return {
+        key: o.code,
+        label: o.label,
+        rawValue: a,
+        viewValue: /* @__PURE__ */ l(
+          et,
+          {
+            group: o,
+            value: a,
+            formValues: t
+          }
+        ),
+        field_group: o
+      };
+    if (y === "api" && f)
       return {
         key: o.code,
         label: o.label,
-        rawValue: s,
-        viewValue: /* @__PURE__ */ u(
-          Me,
+        rawValue: a,
+        viewValue: /* @__PURE__ */ l(
+          Ge,
           {
             code: o.code,
-            value: s,
-            viewConfig: d
+            value: a,
+            viewConfig: f
           }
         ),
         field_group: o
       };
-    if (c === "api_ids" && d?.api_ids)
+    if (y === "api_ids" && f?.api_ids)
       return {
         key: o.code,
         label: o.label,
-        rawValue: s,
-        viewValue: /* @__PURE__ */ u(
-          Oe,
+        rawValue: a,
+        viewValue: /* @__PURE__ */ l(
+          Ze,
           {
             code: o.code,
-            value: s,
-            modeConfig: d.api_ids
+            value: a,
+            modeConfig: f.api_ids
           }
         ),
         field_group: o
       };
-    if (c === "api_detail" && d?.api_detail)
+    if (y === "api_detail" && f?.api_detail)
       return {
         key: o.code,
         label: o.label,
-        rawValue: s,
-        viewValue: /* @__PURE__ */ u(
-          Ve,
+        rawValue: a,
+        viewValue: /* @__PURE__ */ l(
+          Qe,
           {
             code: o.code,
-            value: s,
-            modeConfig: d.api_detail
+            value: a,
+            modeConfig: f.api_detail
           }
         ),
         field_group: o
       };
-    const y = i[o.code] ?? {};
+    const u = i[o.code] ?? {};
     return {
       key: o.code,
       label: o.label,
-      rawValue: s,
-      viewValue: qt(o, s, y),
+      rawValue: a,
+      viewValue: Bt(o, a, u),
       field_group: o
     };
   }), [i, n, t]);
-}, zt = ({
-  code: e,
-  value: t,
-  fieldGroup: n
-}) => {
-  const r = n?.additional_config?.view_value;
-  switch (r?.mode) {
-    case "raw":
-      return t;
-    case "api":
-      return /* @__PURE__ */ u(Me, { code: e, value: t, viewConfig: r });
-    case "api_ids": {
-      const i = r?.api_ids;
-      return /* @__PURE__ */ u(Oe, { code: e, value: t, modeConfig: i });
-    }
-    case "api_detail": {
-      const i = r?.api_detail;
-      return /* @__PURE__ */ u(Ve, { code: e, value: t, modeConfig: i });
-    }
-    default:
-      return t;
-  }
-}, on = V(zt), je = {
+}, rt = {
   submit: "Save",
   submitError: "Failed to submit form",
   inputPlaceholder: (e) => `Enter ${e}`,
@@ -1385,9 +2257,9 @@ const an = ({
   viewLoading: "Loading...",
   viewEmpty: "-",
   viewError: "Failed to load"
-}, sn = {
-  messages: je
-}, Ht = (e) => {
+}, Un = {
+  messages: rt
+}, xn = (e) => {
   if (Array.isArray(e)) return e;
   if (e && typeof e == "object" && "items" in e && Array.isArray(e.items))
     return e.items;
@@ -1396,104 +2268,107 @@ const an = ({
     return Array.isArray(t.items) ? t.items : [];
   }
   return [];
-}, Yt = (e) => ({
+}, Tn = (e) => ({
   redirectUrl: e?.redirect_after_create,
   data: e
-}), Nt = (e, t) => t?.dataPath ? z(e, t.dataPath) : e, le = {
-  optionResponse: Ht,
-  submitResponse: Yt,
-  viewResponse: Nt
-}, Jt = (e, t = "_blank") => {
+}), Mn = (e, t) => t?.dataPath ? se(e, t.dataPath) : e, Dn = (e) => e, ye = {
+  optionResponse: xn,
+  submitResponse: Tn,
+  viewResponse: Mn,
+  formConfigResponse: Dn
+}, Ln = (e, t = "_blank") => {
   window.open(e, t);
-}, ce = {
+}, ve = {
   upload: async () => {
     throw new Error("Upload adapter is not configured");
   },
   remove: async () => !1
 };
-function ln({
+function Nn({
   children: e,
   client: t,
   upload: n,
   i18n: r,
   parsers: i,
-  renderers: a = {},
+  renderers: s = {},
   transformers: o = {},
-  cache: s,
-  submitDebounceMs: d = 200,
-  redirectHandler: c,
+  cache: a,
+  submitDebounceMs: m = 200,
+  redirectHandler: f,
   // legacy props
   requestClient: y,
-  uploadAdapter: m,
-  deleteUploadAdapter: l,
-  messages: p,
-  optionResponseParser: h,
-  customFieldRenderers: f
+  uploadAdapter: u,
+  deleteUploadAdapter: c,
+  messages: d,
+  optionResponseParser: p,
+  customFieldRenderers: h
 }) {
-  const _ = K(/* @__PURE__ */ new Map()), v = K(/* @__PURE__ */ new Map()), b = P(() => {
-    const w = t ?? {
+  const _ = I(/* @__PURE__ */ new Map()), A = I(/* @__PURE__ */ new Map()), w = C(() => {
+    const S = t ?? {
       request: y ?? (() => {
         throw new Error("DynamicFormProvider requires client or requestClient");
       })
-    }, S = f ? Object.entries(f).map(([k, E]) => ({
-      match: k,
-      render: E
-    })) : [], A = {
-      ...je,
+    }, b = h ? Object.entries(h).map(([F, R]) => ({
+      match: F,
+      render: R
+    })) : [], v = {
+      ...rt,
       ...r?.messages,
-      ...p
-    }, g = {
-      ...ce,
+      ...d
+    }, T = {
+      ...ve,
       ...n,
-      upload: n?.upload ?? m ?? ce.upload,
-      remove: n?.remove ?? (l ? (k) => l(k.path) : ce.remove)
+      upload: n?.upload ?? u ?? ve.upload,
+      remove: n?.remove ?? (c ? (F) => c(F.path) : ve.remove)
     };
     return {
-      client: w,
-      upload: g,
-      i18n: { messages: A },
+      client: S,
+      upload: T,
+      i18n: { messages: v },
       parsers: {
-        optionResponse: i?.optionResponse ?? h ?? le.optionResponse,
-        submitResponse: i?.submitResponse ?? le.submitResponse,
-        viewResponse: i?.viewResponse ?? le.viewResponse
+        optionResponse: i?.optionResponse ?? p ?? ye.optionResponse,
+        submitResponse: i?.submitResponse ?? ye.submitResponse,
+        viewResponse: i?.viewResponse ?? ye.viewResponse,
+        formConfigResponse: i?.formConfigResponse ?? ye.formConfigResponse
       },
       renderers: {
-        ...a,
-        fields: [...a.fields ?? [], ...S]
+        ...s,
+        fields: [...s.fields ?? [], ...b]
       },
       transformers: o,
       cache: {
-        enabled: s?.enabled ?? !0,
-        ttlMs: s?.ttlMs ?? 6e4
+        enabled: a?.enabled ?? !0,
+        ttlMs: a?.ttlMs ?? 6e4
       },
-      submitDebounceMs: d,
-      redirectHandler: c ?? Jt,
+      submitDebounceMs: m,
+      redirectHandler: f ?? Ln,
       optionCache: _.current,
-      viewCache: v.current
+      viewCache: A.current
     };
   }, [
     t,
     y,
     n,
-    m,
-    l,
+    u,
+    c,
     r?.messages,
-    p,
+    d,
     i?.optionResponse,
     i?.submitResponse,
     i?.viewResponse,
+    i?.formConfigResponse,
+    p,
+    s,
     h,
-    a,
-    f,
     o,
-    s?.enabled,
-    s?.ttlMs,
-    d,
-    c
+    a?.enabled,
+    a?.ttlMs,
+    m,
+    f
   ]);
-  return /* @__PURE__ */ u(fe.Provider, { value: b, children: e });
+  return /* @__PURE__ */ l(ke.Provider, { value: w, children: e });
 }
-function cn(e) {
+function Wn(e) {
   return {
     request: async (t) => ({ data: (await e({
       method: t.method,
@@ -1507,55 +2382,67 @@ function cn(e) {
   };
 }
 export {
-  Ve as ApiDetailItem,
-  Oe as ApiItem,
-  Me as ApiViewItem,
-  St as DefaultLayout,
-  Rt as DynamicForm,
-  ln as DynamicFormProvider,
-  At as FormItem,
-  on as MetaItemValue,
-  Dt as buildApiViewRequests,
-  te as buildCacheKey,
-  ne as cachedRequest,
-  cn as createAxiosDynamicFormClient,
-  me as debounce,
-  sn as defaultI18n,
-  je as defaultMessages,
-  Ht as defaultOptionResponseParser,
-  le as defaultParsers,
-  Jt as defaultRedirectHandler,
-  Yt as defaultSubmitResponseParser,
-  Nt as defaultViewResponseParser,
-  yt as extractDependencyFields,
-  xe as extractViewData,
-  Pt as fetchApiViewItems,
-  re as fillTemplate,
-  z as getByPath,
-  ft as getCached,
-  Le as getMappedLabel,
-  Ce as getMappedLink,
-  $ as isEmptyValue,
-  nt as mapOptionToSelectItem,
-  rt as mapOptions,
-  Te as normalizeApiViewConfig,
-  rn as normalizeMetaForForm,
-  ht as parseFormValues,
-  I as replaceTemplateInObject,
-  Tt as resolveApiOptionMeta,
-  et as resolveFieldRenderer,
-  tt as resolveFieldRendererFromMap,
-  qt as resolveFieldViewValue,
-  Se as resolveViewValueConfig,
-  mt as setCache,
-  oe as useCachedViewRequest,
-  bt as useDependencyValues,
-  ut as useDynamicField,
-  O as useDynamicFormContext,
-  nn as useDynamicFormContextOptional,
-  vt as useDynamicOptions,
-  Ft as useFieldGroups,
-  Et as useFieldStates,
-  kt as useProcessedValues,
-  an as useViewMode
+  Qe as ApiDetailItem,
+  Ze as ApiItem,
+  Ge as ApiViewItem,
+  ln as DefaultLayout,
+  xe as DynamicForm,
+  Nn as DynamicFormProvider,
+  cn as FormItem,
+  tt as MetaItemValue,
+  tn as MultipleNestedForm,
+  et as MultipleNestedFormView,
+  Ht as NestedForm,
+  nt as NestedFormView,
+  Pt as buildApiViewRequests,
+  le as buildCacheKey,
+  de as cachedRequest,
+  Wn as createAxiosDynamicFormClient,
+  Bn as createNestedDynamicFormData,
+  Fe as debounce,
+  Dn as defaultFormConfigResponseParser,
+  Un as defaultI18n,
+  rt as defaultMessages,
+  xn as defaultOptionResponseParser,
+  ye as defaultParsers,
+  Ln as defaultRedirectHandler,
+  Tn as defaultSubmitResponseParser,
+  Mn as defaultViewResponseParser,
+  Wt as extractDependencyFields,
+  Je as extractMultipleNestedFormValues,
+  Kt as extractNestedFormValue,
+  Ne as extractViewData,
+  Vt as fetchApiViewItems,
+  he as fillTemplate,
+  se as getByPath,
+  Yt as getCached,
+  We as getMappedLabel,
+  $e as getMappedLink,
+  ce as getNestedFormCodeHint,
+  Re as getNestedSubmitContainerKey,
+  W as isEmptyValue,
+  Ft as mapOptionToSelectItem,
+  Ct as mapOptions,
+  Ue as normalizeApiViewConfig,
+  Xe as normalizeMetaForForm,
+  Nt as parseFormValues,
+  ie as replaceTemplateInObject,
+  Ce as resolveApiOptionMeta,
+  St as resolveFieldRenderer,
+  kt as resolveFieldRendererFromMap,
+  Bt as resolveFieldViewValue,
+  Ve as resolveViewValueConfig,
+  Jt as setCache,
+  Ye as unwrapMultipleFormValueForEdit,
+  He as unwrapSingleFormValueForEdit,
+  ue as useCachedViewRequest,
+  rn as useDependencyValues,
+  nn as useDynamicField,
+  U as useDynamicFormContext,
+  qn as useDynamicFormContextOptional,
+  on as useDynamicOptions,
+  dn as useFieldGroups,
+  un as useFieldStates,
+  mn as useProcessedValues,
+  Kn as useViewMode
 };