@notmrabhi/flowforge 0.1.21 → 0.1.23

package/dist/SchemaBuilderDrawer-157p-2Vj.js

@@ -0,0 +1,1136 @@
+import { useMemo as P, useState as T, useRef as M, useEffect as de, useCallback as te } from "react";
+import { useFormik as ke } from "formik";
+import { k as pe, C as Ne, g as oe, a as ue, b as ie, v as se, E as ze, d as Te, V as we } from "./index-BU09HbVh.js";
+import { jsxs as t, Fragment as q, jsx as e } from "react/jsx-runtime";
+import { Box as n, Collapse as Ie, Tooltip as A, Dialog as he, Typography as S, IconButton as Y, Stepper as Fe, Step as Oe, StepLabel as Re, Drawer as Ee, Chip as We, Divider as Ae } from "@mui/material";
+import { MdCheck as G, MdClose as _, MdAdd as J, MdArrowBack as fe, MdEdit as De, MdDeleteOutline as Pe, MdSettings as be, MdArrowForward as Me } from "react-icons/md";
+import { FaWpforms as _e } from "react-icons/fa6";
+function sl({
+  schema: l,
+  initialValues: o,
+  onSubmit: p,
+  showErrorsImmediately: c = !1
+}) {
+  const a = l.fields ?? [], i = P(
+    () => pe(a),
+    [a]
+  ), h = P(() => {
+    if (c)
+      return a.reduce((f, C) => {
+        const g = Ne(C);
+        return g && (f[g] = !0), f;
+      }, {});
+  }, [a, c]), [s, d] = T({}), [x, y] = T({}), N = M(o);
+  de(() => {
+    N.current !== o && (N.current = o, d({}), y({}));
+  }, [o]);
+  const u = ke({
+    initialValues: o,
+    validationSchema: i,
+    initialTouched: h,
+    validateOnMount: c,
+    validateOnChange: !0,
+    validateOnBlur: !0,
+    enableReinitialize: !0,
+    onSubmit: async (f) => {
+      const C = oe({ values: f, conditionConfig: x });
+      await p(f, C);
+    }
+  }), r = te(() => {
+    u.submitForm();
+  }, [u]), b = te((f) => {
+    u.resetForm(f ? { values: f } : void 0), d({}), y({});
+  }, [u]);
+  return {
+    values: u.values,
+    errors: u.errors,
+    isValid: u.isValid,
+    isDirty: u.dirty,
+    isSubmitting: u.isSubmitting,
+    formulaConfig: s,
+    conditionConfig: x,
+    submit: r,
+    reset: b,
+    setFieldValue: u.setFieldValue,
+    // Internals for DynamicFormRenderer
+    _schema: l,
+    _formik: u,
+    _formulaConfig: s,
+    _onFormulaConfigChange: d,
+    _conditionConfig: x,
+    _onConditionConfigChange: y
+  };
+}
+const je = ue.getTypeOptions(), v = "form-control font-14", m = "text-14 text-dark fw-medium mb-1 align-items-center d-flex gap-1", R = {
+  fontSize: 10,
+  fontWeight: 700,
+  color: "#94a3b8",
+  textTransform: "uppercase",
+  letterSpacing: 0.6,
+  marginBottom: 8,
+  display: "block"
+}, Le = [
+  { value: "text", label: "Text" },
+  { value: "number", label: "Number" },
+  { value: "email", label: "Email" },
+  { value: "url", label: "URL" },
+  { value: "password", label: "Password" },
+  { value: "select", label: "Select" },
+  { value: "object", label: "Object (sub-fields)" },
+  { value: "array", label: "Array (nested)" }
+], Ve = [
+  { value: 3, label: "1/4" },
+  { value: 4, label: "1/3" },
+  { value: 6, label: "1/2" },
+  { value: 8, label: "2/3" },
+  { value: 12, label: "Full" }
+];
+function $e({ value: l, onChange: o }) {
+  const p = l ?? 12;
+  return /* @__PURE__ */ t(n, { children: [
+    /* @__PURE__ */ e("span", { className: m, children: "Column width" }),
+    /* @__PURE__ */ e(n, { sx: { display: "flex", gap: 0.5 }, children: Ve.map((c) => /* @__PURE__ */ e(A, { title: `colSpan: ${c.value}`, placement: "top", children: /* @__PURE__ */ e(
+      n,
+      {
+        component: "button",
+        onClick: () => o(c.value),
+        sx: {
+          flex: 1,
+          border: "1px solid",
+          borderColor: p === c.value ? "#6366f1" : "#dee2e6",
+          borderRadius: "6px",
+          cursor: "pointer",
+          bgcolor: p === c.value ? "#eef2ff" : "#fff",
+          color: p === c.value ? "#6366f1" : "#6c757d",
+          fontSize: 11,
+          fontWeight: 600,
+          py: 0.6,
+          px: 0,
+          "&:hover": { borderColor: "#6366f1", bgcolor: "#f5f3ff" }
+        },
+        children: c.label
+      }
+    ) }, c.value)) }),
+    /* @__PURE__ */ e(n, { sx: { display: "flex", gap: "3px", mt: 0.75 }, children: Array.from({ length: 12 }).map((c, a) => /* @__PURE__ */ e(n, { sx: { flex: 1, height: 4, borderRadius: "2px", bgcolor: a < p ? "#6366f1" : "#e2e8f0", transition: "background 0.12s" } }, a)) })
+  ] });
+}
+function me({ options: l = [], onChange: o }) {
+  function p(c, a, i) {
+    o(l.map((h, s) => s === c ? { ...h, [a]: i } : h));
+  }
+  return /* @__PURE__ */ t(n, { children: [
+    /* @__PURE__ */ t("span", { className: m, children: [
+      "Options ",
+      /* @__PURE__ */ e("span", { style: { color: "#dc3545" }, children: "*" })
+    ] }),
+    /* @__PURE__ */ e(n, { sx: { display: "flex", flexDirection: "column", gap: 0.5, mb: 0.75 }, children: l.map((c, a) => /* @__PURE__ */ t(n, { sx: { display: "flex", gap: 0.5, alignItems: "center" }, children: [
+      /* @__PURE__ */ e("input", { className: v, style: { flex: 1 }, placeholder: "Label", value: c.label, onChange: (i) => p(a, "label", i.target.value) }),
+      /* @__PURE__ */ e("input", { className: v, style: { flex: 1 }, placeholder: "Value", value: c.value, onChange: (i) => p(a, "value", i.target.value) }),
+      /* @__PURE__ */ e(n, { component: "button", onClick: () => o(l.filter((i, h) => h !== a)), sx: { background: "none", border: "none", cursor: "pointer", color: "#94a3b8", display: "flex", p: 0.25, "&:hover": { color: "#dc2626" } }, children: /* @__PURE__ */ e(_, { size: 13 }) })
+    ] }, a)) }),
+    /* @__PURE__ */ t(n, { component: "button", onClick: () => o([...l, { label: "", value: "" }]), sx: { display: "flex", alignItems: "center", gap: 0.5, background: "none", border: "1px dashed #dee2e6", cursor: "pointer", fontSize: 11, fontWeight: 600, px: 1, py: 0.5, borderRadius: "6px", color: "#6366f1", width: "100%", "&:hover": { borderColor: "#6366f1", bgcolor: "#f5f3ff" } }, children: [
+      /* @__PURE__ */ e(J, { size: 13 }),
+      " Add option"
+    ] })
+  ] });
+}
+const xe = [
+  { value: "operator", label: "Operator (predefined)" },
+  { value: "select", label: "Select" },
+  { value: "text", label: "Text" }
+];
+function Be({ col: l, onChange: o, onDelete: p }) {
+  const c = l.type === "select", a = l.type === "operator";
+  return /* @__PURE__ */ t(n, { sx: { border: "1px solid #e2e8f0", borderRadius: "7px", p: 1.25, bgcolor: "#fff", display: "flex", flexDirection: "column", gap: 1 }, children: [
+    /* @__PURE__ */ t(n, { sx: { display: "flex", alignItems: "center", gap: 0.75 }, children: [
+      /* @__PURE__ */ e(n, { sx: { fontSize: 10, fontWeight: 700, px: 0.75, py: 0.2, borderRadius: "4px", bgcolor: a ? "#fef9c3" : "#eef2ff", color: a ? "#92400e" : "#6366f1", flexShrink: 0 }, children: a ? "OPERATOR" : l.type.toUpperCase() }),
+      /* @__PURE__ */ e(n, { sx: { fontSize: 12, fontWeight: 600, color: "#0f172a", flex: 1 }, children: l.label || l.id || "Unnamed" }),
+      /* @__PURE__ */ e(n, { component: "button", onClick: p, sx: { background: "none", border: "none", cursor: "pointer", color: "#94a3b8", display: "flex", p: 0.25, "&:hover": { color: "#dc2626" } }, children: /* @__PURE__ */ e(_, { size: 13 }) })
+    ] }),
+    /* @__PURE__ */ t(n, { sx: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1 }, children: [
+      /* @__PURE__ */ t(n, { children: [
+        /* @__PURE__ */ e("label", { className: m, children: "Column type" }),
+        /* @__PURE__ */ e("select", { value: l.type, onChange: (i) => o({ ...l, type: i.target.value, options: void 0 }), className: v, style: { cursor: "pointer" }, children: xe.map((i) => /* @__PURE__ */ e("option", { value: i.value, children: i.label }, i.value)) })
+      ] }),
+      /* @__PURE__ */ t(n, { children: [
+        /* @__PURE__ */ t("label", { className: m, children: [
+          "Column key ",
+          /* @__PURE__ */ e("span", { style: { color: "#dc3545" }, children: "*" })
+        ] }),
+        /* @__PURE__ */ e("input", { className: `${v} ${l.id ? "" : "border-danger"}`, value: l.id, onChange: (i) => o({ ...l, id: i.target.value }), placeholder: "e.g. field, operator, value" }),
+        !l.id && /* @__PURE__ */ e("span", { style: { fontSize: 10, color: "#dc3545" }, children: "Required — used as data key" })
+      ] })
+    ] }),
+    !a && /* @__PURE__ */ t(n, { sx: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1 }, children: [
+      /* @__PURE__ */ t(n, { children: [
+        /* @__PURE__ */ e("label", { className: m, children: "Label" }),
+        /* @__PURE__ */ e("input", { className: v, value: l.label ?? "", onChange: (i) => o({ ...l, label: i.target.value || void 0 }), placeholder: "Column label" })
+      ] }),
+      /* @__PURE__ */ t(n, { children: [
+        /* @__PURE__ */ e("label", { className: m, children: "Placeholder" }),
+        /* @__PURE__ */ e("input", { className: v, value: l.placeholder ?? "", onChange: (i) => o({ ...l, placeholder: i.target.value || void 0 }), placeholder: "Hint…" })
+      ] })
+    ] }),
+    c && /* @__PURE__ */ e(me, { options: l.options ?? [], onChange: (i) => o({ ...l, options: i }) }),
+    a && /* @__PURE__ */ e(n, { sx: { bgcolor: "#fefce8", border: "1px solid #fef08a", borderRadius: "6px", px: 1.25, py: 0.75 }, children: /* @__PURE__ */ e(n, { sx: { fontSize: 11, color: "#78350f" }, children: "Predefined: equals, not equals, contains, starts with, ends with, is present, is not present, greater than, less than…" }) }),
+    !a && /* @__PURE__ */ t(n, { sx: { display: "flex", alignItems: "center", gap: 0.75 }, children: [
+      /* @__PURE__ */ e("input", { type: "checkbox", id: `formula-${l.id}`, checked: !!l.formula, onChange: (i) => o({ ...l, formula: i.target.checked || void 0 }), style: { cursor: "pointer", width: 14, height: 14 } }),
+      /* @__PURE__ */ e("label", { htmlFor: `formula-${l.id}`, className: m, style: { margin: 0, cursor: "pointer" }, children: "Formula input (chip editor)" })
+    ] })
+  ] });
+}
+function He({ condition: l, onChange: o }) {
+  const p = !!l;
+  function c() {
+    o(p ? void 0 : { fields: [] });
+  }
+  function a(s) {
+    if (!l) return;
+    const d = s === "operator" ? "operator" : l.fields.filter((x) => x.type !== "operator").length === 0 ? "field" : "value";
+    o({ ...l, fields: [...l.fields, { id: d, type: s }] });
+  }
+  function i(s, d) {
+    if (!l) return;
+    const x = [...l.fields];
+    x[s] = d, o({ ...l, fields: x });
+  }
+  function h(s) {
+    l && o({ ...l, fields: l.fields.filter((d, x) => x !== s) });
+  }
+  return /* @__PURE__ */ t(n, { sx: { borderTop: "1px solid #e2e8f0", pt: 1.5 }, children: [
+    /* @__PURE__ */ t(n, { sx: { display: "flex", alignItems: "center", gap: 0.75, mb: p ? 1.25 : 0 }, children: [
+      /* @__PURE__ */ e("input", { type: "checkbox", id: "enable-condition", checked: p, onChange: c, style: { cursor: "pointer", width: 14, height: 14 } }),
+      /* @__PURE__ */ e("span", { style: { ...R, margin: 0, color: p ? "#6366f1" : "#94a3b8" }, children: "Condition row" })
+    ] }),
+    p && l && /* @__PURE__ */ t(n, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
+      l.fields.map((s, d) => /* @__PURE__ */ e(Be, { col: s, onChange: (x) => i(d, x), onDelete: () => h(d) }, d)),
+      /* @__PURE__ */ e(n, { sx: { display: "flex", gap: 0.5 }, children: xe.map((s) => /* @__PURE__ */ t(n, { component: "button", onClick: () => a(s.value), sx: { flex: 1, background: "none", border: "1px dashed #dee2e6", cursor: "pointer", fontSize: 11, fontWeight: 600, py: 0.5, borderRadius: "6px", color: s.value === "operator" ? "#92400e" : "#6366f1", "&:hover": { borderColor: "#6366f1", bgcolor: "#f5f3ff" } }, children: [
+        "+ ",
+        s.value === "operator" ? "Operator" : s.label.split(" ")[0]
+      ] }, s.value)) }),
+      /* @__PURE__ */ t(n, { sx: { display: "flex", alignItems: "center", gap: 2, flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ t(n, { sx: { display: "flex", alignItems: "center", gap: 0.75 }, children: [
+          /* @__PURE__ */ e("input", { type: "checkbox", id: "allow-groups", checked: !!l.allowGroups, onChange: (s) => o({ ...l, allowGroups: s.target.checked || void 0 }), style: { cursor: "pointer", width: 14, height: 14 } }),
+          /* @__PURE__ */ e("label", { htmlFor: "allow-groups", className: m, style: { margin: 0, cursor: "pointer" }, children: "Allow nested groups" })
+        ] }),
+        l.allowGroups && /* @__PURE__ */ t(n, { sx: { display: "flex", alignItems: "center", gap: 0.75 }, children: [
+          /* @__PURE__ */ e("label", { className: m, style: { margin: 0 }, children: "Max depth" }),
+          /* @__PURE__ */ e("input", { type: "number", min: 1, max: 5, className: v, style: { width: 60, textAlign: "center" }, value: l.maxGroupDepth ?? "", onChange: (s) => o({ ...l, maxGroupDepth: s.target.value ? Number(s.target.value) : void 0 }), placeholder: "∞" })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function D({ id: l, label: o, checked: p, onChange: c }) {
+  return /* @__PURE__ */ t(n, { sx: { display: "flex", alignItems: "center", gap: 0.75 }, children: [
+    /* @__PURE__ */ e("input", { type: "checkbox", id: l, checked: p, onChange: (a) => c(a.target.checked), style: { cursor: "pointer", width: 14, height: 14, flexShrink: 0 } }),
+    /* @__PURE__ */ e("label", { htmlFor: l, className: m, style: { margin: 0, cursor: "pointer" }, children: o })
+  ] });
+}
+function Ue({ views: l = [], onChange: o }) {
+  function p(a, i, h) {
+    o(l.map((s, d) => d === a ? { ...s, [i]: h } : s));
+  }
+  function c() {
+    const a = `tab${l.length + 1}`;
+    o([...l, { id: a, label: `Tab ${l.length + 1}` }]);
+  }
+  return /* @__PURE__ */ t(n, { children: [
+    /* @__PURE__ */ e("span", { className: m, children: "Views" }),
+    /* @__PURE__ */ e(n, { sx: { display: "flex", flexDirection: "column", gap: 0.5, mb: 0.75 }, children: l.map((a, i) => /* @__PURE__ */ t(n, { sx: { display: "flex", gap: 0.5, alignItems: "center" }, children: [
+      /* @__PURE__ */ e("input", { className: v, style: { flex: 1 }, placeholder: "Label", value: a.label, onChange: (h) => p(i, "label", h.target.value) }),
+      /* @__PURE__ */ e("input", { className: v, style: { flex: 1 }, placeholder: "ID (no spaces)", value: a.id, onChange: (h) => p(i, "id", h.target.value.replace(/\s/g, "_")) }),
+      /* @__PURE__ */ e(n, { component: "button", onClick: () => o(l.filter((h, s) => s !== i)), sx: { background: "none", border: "none", cursor: "pointer", color: "#94a3b8", display: "flex", p: 0.25, "&:hover": { color: "#dc2626" } }, children: /* @__PURE__ */ e(_, { size: 13 }) })
+    ] }, i)) }),
+    /* @__PURE__ */ t(n, { component: "button", onClick: c, sx: { display: "flex", alignItems: "center", gap: 0.5, background: "none", border: "1px dashed #dee2e6", cursor: "pointer", fontSize: 11, fontWeight: 600, px: 1, py: 0.5, borderRadius: "6px", color: "#6366f1", width: "100%", "&:hover": { borderColor: "#6366f1", bgcolor: "#f5f3ff" } }, children: [
+      /* @__PURE__ */ e(J, { size: 13 }),
+      " Add view"
+    ] })
+  ] });
+}
+function B({ label: l, value: o, options: p, onChange: c }) {
+  return /* @__PURE__ */ t(n, { children: [
+    /* @__PURE__ */ e("span", { className: m, children: l }),
+    /* @__PURE__ */ e(n, { sx: { display: "flex", border: "1px solid #dee2e6", borderRadius: "7px", overflow: "hidden" }, children: p.map((a) => /* @__PURE__ */ e(
+      n,
+      {
+        component: "button",
+        onClick: () => c(a.value),
+        sx: {
+          flex: 1,
+          border: "none",
+          borderRight: "1px solid #dee2e6",
+          cursor: "pointer",
+          fontSize: 12,
+          fontWeight: 600,
+          py: 0.6,
+          bgcolor: o === a.value ? "#eef2ff" : "#fff",
+          color: o === a.value ? "#6366f1" : "#6c757d",
+          "&:last-child": { borderRight: "none" },
+          "&:hover": { bgcolor: "#f5f3ff" }
+        },
+        children: a.label
+      },
+      a.value
+    )) })
+  ] });
+}
+function ge({ field: l, onChange: o, onSave: p, onCancel: c, noFooter: a }) {
+  const [i, h] = T(!1), s = l.id ?? l.name ?? "", d = l, x = l.type === "select" || l.type === "descriptive-select" || l.type === "radio-group", y = ue.get(l.type), N = y == null ? void 0 : y.configSchema;
+  function u(r, b) {
+    o({ ...l, [r]: b });
+  }
+  return /* @__PURE__ */ t(q, { children: [
+    /* @__PURE__ */ t(n, { sx: { flex: 1, overflowY: "auto", px: 2.5, py: 2, display: "flex", flexDirection: "column", gap: 1.75 }, children: [
+      /* @__PURE__ */ t(n, { children: [
+        /* @__PURE__ */ e("span", { style: R, children: "Required" }),
+        /* @__PURE__ */ t(n, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
+          /* @__PURE__ */ t(n, { children: [
+            /* @__PURE__ */ e("label", { className: m, children: "Type" }),
+            /* @__PURE__ */ e("select", { value: l.type, onChange: (r) => u("type", r.target.value), className: v, style: { cursor: "pointer" }, children: je.map((r) => /* @__PURE__ */ e("option", { value: r.value, children: r.label }, r.value)) })
+          ] }),
+          /* @__PURE__ */ t(n, { sx: { display: "grid", gridTemplateColumns: l.type === "tabs" ? "1fr" : "1fr 1fr", gap: 1 }, children: [
+            /* @__PURE__ */ t(n, { children: [
+              /* @__PURE__ */ t("label", { className: m, children: [
+                "Field ID ",
+                /* @__PURE__ */ e("span", { style: { color: "#dc3545" }, children: "*" })
+              ] }),
+              /* @__PURE__ */ e("input", { className: v, value: l.id ?? l.name ?? "", onChange: (r) => u("id", r.target.value), placeholder: "e.g. email" })
+            ] }),
+            l.type !== "tabs" && /* @__PURE__ */ t(n, { children: [
+              /* @__PURE__ */ t("label", { className: m, children: [
+                "Label ",
+                /* @__PURE__ */ e("span", { style: { color: "#dc3545" }, children: "*" })
+              ] }),
+              /* @__PURE__ */ e("input", { className: v, value: l.label ?? "", onChange: (r) => u("label", r.target.value), placeholder: "Display label" })
+            ] })
+          ] }),
+          l.type !== "tabs" && /* @__PURE__ */ e($e, { value: l.colSpan, onChange: (r) => u("colSpan", r === 12 ? void 0 : r) })
+        ] })
+      ] }),
+      N && /* @__PURE__ */ t(n, { sx: { borderTop: "1px solid #e2e8f0", pt: 1.5 }, children: [
+        /* @__PURE__ */ e("span", { style: R, children: "Specific Settings" }),
+        /* @__PURE__ */ e(
+          ie,
+          {
+            schema: { layout: "flat", compact: !0, fields: N.fields },
+            initialValues: l,
+            onValuesChange: (r) => o({ ...l, ...r }),
+            onSubmit: () => {
+            }
+          }
+        )
+      ] }),
+      l.type === "tabs" && /* @__PURE__ */ t(n, { sx: { borderTop: "1px solid #e2e8f0", pt: 1.5, display: "flex", flexDirection: "column", gap: 1.5 }, children: [
+        /* @__PURE__ */ e("span", { style: R, children: "Content" }),
+        /* @__PURE__ */ e(
+          Ue,
+          {
+            views: (d.tabs ?? []).map((r) => ({ id: r.id, label: r.label })),
+            onChange: (r) => {
+              const b = d.tabs ?? [], f = r.map((C) => {
+                const g = b.find((I) => I.id === C.id);
+                return g ? { ...g, ...C } : { ...C, fields: [] };
+              });
+              o({ ...l, tabs: f });
+            }
+          }
+        ),
+        /* @__PURE__ */ e("span", { style: { ...R, marginTop: 4 }, children: "Interaction" }),
+        /* @__PURE__ */ t(n, { children: [
+          /* @__PURE__ */ e("label", { className: m, children: "Disabled" }),
+          /* @__PURE__ */ e("input", { className: v, value: d.disabledExpr ?? "", onChange: (r) => o({ ...l, disabledExpr: r.target.value || void 0 }), placeholder: "false" })
+        ] }),
+        /* @__PURE__ */ e("span", { style: { ...R, marginTop: 4 }, children: "Appearance" }),
+        /* @__PURE__ */ e(
+          B,
+          {
+            label: "Alignment",
+            value: d.alignment ?? "left",
+            options: [
+              { value: "left", label: "|←" },
+              { value: "center-left", label: "←|" },
+              { value: "center", label: "|·|" },
+              { value: "center-right", label: "|→" },
+              { value: "right", label: "→|" }
+            ],
+            onChange: (r) => o({ ...l, alignment: r })
+          }
+        ),
+        /* @__PURE__ */ t(n, { children: [
+          /* @__PURE__ */ e("label", { className: m, children: "Hidden" }),
+          /* @__PURE__ */ e("input", { className: v, value: d.hiddenExpr ?? "", onChange: (r) => o({ ...l, hiddenExpr: r.target.value || void 0 }), placeholder: "false" })
+        ] }),
+        /* @__PURE__ */ e(
+          B,
+          {
+            label: "Variant",
+            value: d.variant ?? "line",
+            options: [{ value: "pill", label: "Pill" }, { value: "line", label: "Line" }],
+            onChange: (r) => o({ ...l, variant: r })
+          }
+        ),
+        /* @__PURE__ */ t(n, { sx: { display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 1 }, children: [
+          /* @__PURE__ */ t(n, { children: [
+            /* @__PURE__ */ e("label", { className: m, children: "Active color" }),
+            /* @__PURE__ */ t(n, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+              /* @__PURE__ */ e("input", { type: "color", value: d.activeColor ?? "#6366f1", onChange: (r) => o({ ...l, activeColor: r.target.value }), style: { width: 28, height: 28, border: "1px solid #dee2e6", borderRadius: 6, cursor: "pointer", padding: 2, background: "#fff" } }),
+              /* @__PURE__ */ e("input", { className: v, value: d.activeColor ?? "", onChange: (r) => o({ ...l, activeColor: r.target.value || void 0 }), placeholder: "#6366f1", style: { flex: 1 } })
+            ] })
+          ] }),
+          /* @__PURE__ */ t(n, { children: [
+            /* @__PURE__ */ e("label", { className: m, children: "Active text" }),
+            /* @__PURE__ */ t(n, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+              /* @__PURE__ */ e("input", { type: "color", value: d.activeTextColor ?? "#ffffff", onChange: (r) => o({ ...l, activeTextColor: r.target.value }), style: { width: 28, height: 28, border: "1px solid #dee2e6", borderRadius: 6, cursor: "pointer", padding: 2, background: "#fff" } }),
+              /* @__PURE__ */ e("input", { className: v, value: d.activeTextColor ?? "", onChange: (r) => o({ ...l, activeTextColor: r.target.value || void 0 }), placeholder: "auto", style: { flex: 1 } })
+            ] })
+          ] }),
+          /* @__PURE__ */ t(n, { children: [
+            /* @__PURE__ */ e("label", { className: m, children: "Inactive text" }),
+            /* @__PURE__ */ t(n, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+              /* @__PURE__ */ e("input", { type: "color", value: d.inactiveTextColor ?? "#64748b", onChange: (r) => o({ ...l, inactiveTextColor: r.target.value }), style: { width: 28, height: 28, border: "1px solid #dee2e6", borderRadius: 6, cursor: "pointer", padding: 2, background: "#fff" } }),
+              /* @__PURE__ */ e("input", { className: v, value: d.inactiveTextColor ?? "", onChange: (r) => o({ ...l, inactiveTextColor: r.target.value || void 0 }), placeholder: "#64748b", style: { flex: 1 } })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ t(n, { children: [
+          /* @__PURE__ */ e("label", { className: m, children: "Styles" }),
+          /* @__PURE__ */ e("input", { className: v, value: d.styles ?? "", onChange: (r) => o({ ...l, styles: r.target.value || void 0 }), placeholder: "None" })
+        ] }),
+        /* @__PURE__ */ e("span", { style: { ...R, marginTop: 4 }, children: "Spacing" }),
+        /* @__PURE__ */ e(
+          B,
+          {
+            label: "Height",
+            value: d.height ?? "auto",
+            options: [{ value: "auto", label: "Auto" }, { value: "fixed", label: "Fixed" }],
+            onChange: (r) => o({ ...l, height: r })
+          }
+        ),
+        /* @__PURE__ */ e(
+          B,
+          {
+            label: "Margin",
+            value: d.margin ?? "normal",
+            options: [{ value: "normal", label: "Normal" }, { value: "none", label: "None" }],
+            onChange: (r) => o({ ...l, margin: r })
+          }
+        )
+      ] }),
+      x && /* @__PURE__ */ t(n, { sx: { borderTop: "1px solid #e2e8f0", pt: 1.5 }, children: [
+        /* @__PURE__ */ e("span", { style: R, children: "Options" }),
+        /* @__PURE__ */ e(me, { options: d.options ?? [], onChange: (r) => o({ ...l, options: r }) })
+      ] }),
+      l.type === "array" && /* @__PURE__ */ t(n, { sx: { borderTop: "1px solid #e2e8f0", pt: 1.5, display: "flex", flexDirection: "column", gap: 1 }, children: [
+        /* @__PURE__ */ e("span", { style: R, children: "Array settings" }),
+        /* @__PURE__ */ t(n, { children: [
+          /* @__PURE__ */ e("label", { className: m, children: "Item type" }),
+          /* @__PURE__ */ e("select", { className: v, style: { cursor: "pointer" }, value: d.itemType ?? "text", onChange: (r) => o({ ...l, itemType: r.target.value }), children: Le.map((r) => /* @__PURE__ */ e("option", { value: r.value, children: r.label }, r.value)) })
+        ] }),
+        /* @__PURE__ */ t(n, { sx: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1 }, children: [
+          /* @__PURE__ */ t(n, { children: [
+            /* @__PURE__ */ e("label", { className: m, children: "Item label" }),
+            /* @__PURE__ */ e("input", { className: v, value: d.itemLabel ?? "", onChange: (r) => o({ ...l, itemLabel: r.target.value || void 0 }), placeholder: 'e.g. "Member"' })
+          ] }),
+          /* @__PURE__ */ t(n, { children: [
+            /* @__PURE__ */ e("label", { className: m, children: "Add button label" }),
+            /* @__PURE__ */ e("input", { className: v, value: d.addLabel ?? "", onChange: (r) => o({ ...l, addLabel: r.target.value || void 0 }), placeholder: "Add item" })
+          ] })
+        ] }),
+        /* @__PURE__ */ t(n, { sx: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1 }, children: [
+          /* @__PURE__ */ t(n, { children: [
+            /* @__PURE__ */ e("label", { className: m, children: "Min items" }),
+            /* @__PURE__ */ e("input", { type: "number", min: 0, className: v, value: d.minItems ?? "", onChange: (r) => o({ ...l, minItems: r.target.value ? Number(r.target.value) : void 0 }), placeholder: "0" })
+          ] }),
+          /* @__PURE__ */ t(n, { children: [
+            /* @__PURE__ */ e("label", { className: m, children: "Max items" }),
+            /* @__PURE__ */ e("input", { type: "number", min: 1, className: v, value: d.maxItems ?? "", onChange: (r) => o({ ...l, maxItems: r.target.value ? Number(r.target.value) : void 0 }), placeholder: "∞" })
+          ] })
+        ] }),
+        !["object", "array", "select"].includes(d.itemType ?? "text") && /* @__PURE__ */ t(n, { children: [
+          /* @__PURE__ */ e("label", { className: m, children: "Item placeholder" }),
+          /* @__PURE__ */ e("input", { className: v, value: d.itemPlaceholder ?? "", onChange: (r) => o({ ...l, itemPlaceholder: r.target.value || void 0 }), placeholder: "Enter value…" })
+        ] })
+      ] }),
+      /* @__PURE__ */ e(
+        He,
+        {
+          condition: l.condition,
+          onChange: (r) => o({ ...l, condition: r })
+        }
+      ),
+      /* @__PURE__ */ t(n, { sx: { borderTop: "1px solid #e2e8f0", pt: 1.5 }, children: [
+        /* @__PURE__ */ e(n, { component: "button", onClick: () => h((r) => !r), sx: { background: "none", border: "none", cursor: "pointer", display: "flex", alignItems: "center", gap: 0.5, p: 0, mb: i ? 1.25 : 0 }, children: /* @__PURE__ */ t("span", { style: { ...R, margin: 0, color: i ? "#6366f1" : "#94a3b8" }, children: [
+          i ? "▾" : "▸",
+          " Optional settings"
+        ] }) }),
+        /* @__PURE__ */ e(Ie, { in: i, children: /* @__PURE__ */ t(n, { sx: { display: "flex", flexDirection: "column", gap: 1.25 }, children: [
+          /* @__PURE__ */ t(n, { sx: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1 }, children: [
+            /* @__PURE__ */ t(n, { children: [
+              /* @__PURE__ */ e("label", { className: m, children: "Placeholder" }),
+              /* @__PURE__ */ e("input", { className: v, value: l.placeholder ?? "", onChange: (r) => u("placeholder", r.target.value || void 0), placeholder: "Hint text…" })
+            ] }),
+            /* @__PURE__ */ t(n, { children: [
+              /* @__PURE__ */ e("label", { className: m, children: "Helper text" }),
+              /* @__PURE__ */ e("input", { className: v, value: l.helperText ?? "", onChange: (r) => u("helperText", r.target.value || void 0), placeholder: "Description…" })
+            ] })
+          ] }),
+          /* @__PURE__ */ t(n, { children: [
+            /* @__PURE__ */ e("label", { className: m, children: "Info tooltip" }),
+            /* @__PURE__ */ e("input", { className: v, value: l.info ?? "", onChange: (r) => u("info", r.target.value || void 0), placeholder: "Shown in ℹ tooltip" })
+          ] }),
+          /* @__PURE__ */ t(n, { sx: { display: "flex", flexWrap: "wrap", gap: 1.5 }, children: [
+            /* @__PURE__ */ e(D, { id: `${s}-req`, label: "Required", checked: !!l.required, onChange: (r) => u("required", r || void 0) }),
+            /* @__PURE__ */ e(D, { id: `${s}-dis`, label: "Disabled", checked: !!l.disabled, onChange: (r) => u("disabled", r || void 0) }),
+            /* @__PURE__ */ e(D, { id: `${s}-hid`, label: "Hidden", checked: !!l.hidden, onChange: (r) => u("hidden", r || void 0) }),
+            /* @__PURE__ */ e(D, { id: `${s}-opt`, label: "Show optional", checked: !!l.showOptional, onChange: (r) => u("showOptional", r || void 0) }),
+            /* @__PURE__ */ e(D, { id: `${s}-div`, label: "Divider after", checked: !!l.dividerAfter, onChange: (r) => u("dividerAfter", r || void 0) }),
+            /* @__PURE__ */ e(D, { id: `${s}-frm`, label: "Formula input", checked: !!l.formula, onChange: (r) => u("formula", r || void 0) })
+          ] })
+        ] }) })
+      ] })
+    ] }),
+    !a && /* @__PURE__ */ t(n, { sx: { borderTop: "1px solid #e2e8f0", px: 2.5, py: 1.5, display: "flex", gap: 1, justifyContent: "flex-end", bgcolor: "#f8fafc", flexShrink: 0 }, children: [
+      /* @__PURE__ */ e(n, { component: "button", onClick: c, sx: { background: "none", border: "1px solid #dee2e6", cursor: "pointer", fontSize: 13, fontWeight: 500, px: 2, py: 0.75, borderRadius: "7px", color: "#6c757d", "&:hover": { bgcolor: "#f8f9fa" } }, children: "Cancel" }),
+      /* @__PURE__ */ t(n, { component: "button", onClick: p, sx: { border: "none", cursor: "pointer", fontSize: 13, fontWeight: 600, px: 2.5, py: 0.75, borderRadius: "7px", bgcolor: "#6366f1", color: "#fff", display: "flex", alignItems: "center", gap: 0.75, "&:hover": { bgcolor: "#4f46e5" } }, children: [
+        /* @__PURE__ */ e(G, { size: 15 }),
+        " Save"
+      ] })
+    ] })
+  ] });
+}
+const H = {
+  text: "#0f172a",
+  textMuted: "#64748b",
+  borderInput: "rgba(0,0,0,0.23)",
+  bg: "#ffffff"
+}, qe = {
+  md: "6px"
+}, ve = {
+  sm: 11,
+  md: 13
+}, ne = {
+  width: "100%",
+  fontSize: ve.md,
+  fontFamily: "inherit",
+  padding: "8px 12px",
+  border: `1px solid ${H.borderInput}`,
+  borderRadius: qe.md,
+  outline: "none",
+  background: H.bg,
+  color: H.text,
+  boxSizing: "border-box",
+  transition: "border-color 0.15s, box-shadow 0.15s"
+};
+function ce() {
+  return { type: "text", id: "", label: "", colSpan: 12 };
+}
+function Ye(l) {
+  return l.type === "object" || l.type === "array" || l.type === "schema";
+}
+function Ge(l) {
+  if (l.type === "object") return "Child Fields";
+  if (l.type === "schema") return "Schema Fields";
+  const o = l.itemType ?? "text";
+  return o === "object" ? "Item Fields" : o === "select" ? "Item Options" : "Item Config";
+}
+function Je({ field: l, onChange: o }) {
+  var a;
+  const p = l, c = p.itemType ?? "text";
+  if (l.type === "object")
+    return /* @__PURE__ */ t(n, { sx: { p: 2.5 }, children: [
+      /* @__PURE__ */ e(S, { sx: { fontSize: 12, color: "#64748b", mb: 2 }, children: "Define the fields nested inside this object. Each child field can itself be an object or array." }),
+      /* @__PURE__ */ e(
+        U,
+        {
+          value: l.children ?? [],
+          onChange: (i) => o({ ...l, children: i }),
+          label: "Child fields"
+        }
+      )
+    ] });
+  if (l.type === "schema")
+    return /* @__PURE__ */ t(n, { sx: { p: 2.5 }, children: [
+      /* @__PURE__ */ e(S, { sx: { fontSize: 12, color: "#64748b", mb: 2 }, children: "Define the fields inside this schema. When the form is filled, their values are collected into a single object as this field's value." }),
+      /* @__PURE__ */ e(
+        U,
+        {
+          value: l.children ?? [],
+          onChange: (i) => o({ ...l, children: i }),
+          label: "Schema fields"
+        }
+      )
+    ] });
+  if (l.type === "array") {
+    if (c === "object")
+      return /* @__PURE__ */ t(n, { sx: { p: 2.5 }, children: [
+        /* @__PURE__ */ e(S, { sx: { fontSize: 12, color: "#64748b", mb: 2 }, children: "Define the fields for each item in the array. Each item will be an object with these fields." }),
+        /* @__PURE__ */ e(
+          U,
+          {
+            value: p.itemFields ?? [],
+            onChange: (i) => o({ ...l, itemFields: i }),
+            label: "Item fields"
+          }
+        )
+      ] });
+    if (c === "select") {
+      const i = p.itemOptions ?? [];
+      return /* @__PURE__ */ t(n, { sx: { p: 2.5 }, children: [
+        /* @__PURE__ */ e(S, { sx: { fontSize: 12, color: "#64748b", mb: 2 }, children: "Options available in each select item." }),
+        /* @__PURE__ */ e(n, { sx: { display: "flex", flexDirection: "column", gap: 0.5, mb: 0.75 }, children: i.map((h, s) => /* @__PURE__ */ t(n, { sx: { display: "flex", gap: 0.5, alignItems: "center" }, children: [
+          /* @__PURE__ */ e(
+            "input",
+            {
+              style: { ...ne, flex: 1, padding: "6px 10px" },
+              placeholder: "Label",
+              value: h.label,
+              onChange: (d) => {
+                const x = i.map((y, N) => N === s ? { ...y, label: d.target.value } : y);
+                o({ ...l, itemOptions: x });
+              }
+            }
+          ),
+          /* @__PURE__ */ e(
+            "input",
+            {
+              style: { ...ne, flex: 1, padding: "6px 10px" },
+              placeholder: "Value",
+              value: h.value,
+              onChange: (d) => {
+                const x = i.map((y, N) => N === s ? { ...y, value: d.target.value } : y);
+                o({ ...l, itemOptions: x });
+              }
+            }
+          ),
+          /* @__PURE__ */ e(
+            n,
+            {
+              component: "button",
+              onClick: () => o({ ...l, itemOptions: i.filter((d, x) => x !== s) }),
+              sx: { background: "none", border: "none", cursor: "pointer", color: "#94a3b8", display: "flex", p: 0.25, "&:hover": { color: "#dc2626" } },
+              children: "✕"
+            }
+          )
+        ] }, s)) }),
+        /* @__PURE__ */ e(
+          n,
+          {
+            component: "button",
+            onClick: () => o({ ...l, itemOptions: [...i, { label: "", value: "" }] }),
+            sx: { display: "flex", alignItems: "center", gap: 0.5, background: "none", border: "1px dashed #dee2e6", cursor: "pointer", fontSize: 11, fontWeight: 600, px: 1, py: 0.5, borderRadius: "6px", color: "#6366f1", width: "100%", justifyContent: "center", "&:hover": { borderColor: "#6366f1", bgcolor: "#f5f3ff" } },
+            children: "+ Add option"
+          }
+        )
+      ] });
+    }
+    if (c === "array") {
+      const i = ((a = p.itemSchema) == null ? void 0 : a.itemType) ?? "text", h = [
+        { value: "text", label: "Text" },
+        { value: "number", label: "Number" },
+        { value: "email", label: "Email" },
+        { value: "url", label: "URL" },
+        { value: "password", label: "Password" },
+        { value: "select", label: "Select" },
+        { value: "object", label: "Object" }
+      ];
+      return /* @__PURE__ */ t(n, { sx: { p: 2.5 }, children: [
+        /* @__PURE__ */ e(S, { sx: { fontSize: 12, color: "#64748b", mb: 2 }, children: "Each item is itself an array. Configure the type of items inside the nested array." }),
+        /* @__PURE__ */ e("label", { style: { fontSize: ve.sm, fontWeight: 600, color: H.textMuted, display: "block", marginBottom: 3 }, children: "Nested item type" }),
+        /* @__PURE__ */ e(
+          "select",
+          {
+            style: { ...ne, padding: "6px 10px", cursor: "pointer" },
+            value: i,
+            onChange: (s) => o({ ...l, itemSchema: { ...p.itemSchema ?? {}, itemType: s.target.value } }),
+            children: h.map((s) => /* @__PURE__ */ e("option", { value: s.value, children: s.label }, s.value))
+          }
+        )
+      ] });
+    }
+    return /* @__PURE__ */ e(n, { sx: { p: 2.5 }, children: /* @__PURE__ */ t(n, { sx: { border: "1.5px dashed #e2e8f0", borderRadius: "8px", py: 3, textAlign: "center" }, children: [
+      /* @__PURE__ */ t(S, { sx: { fontSize: 13, color: "#94a3b8" }, children: [
+        "No extra configuration needed for ",
+        /* @__PURE__ */ e("strong", { children: c }),
+        " items."
+      ] }),
+      /* @__PURE__ */ e(S, { sx: { fontSize: 11, color: "#cbd5e1", mt: 0.5 }, children: "Item placeholder and labels are set in the previous step." })
+    ] }) });
+  }
+  return null;
+}
+function Ke({ field: l }) {
+  var h;
+  const [o, p] = T({}), c = l.id ?? l.name ?? "preview", a = [
+    { value: 3, label: "1/4" },
+    { value: 4, label: "1/3" },
+    { value: 6, label: "1/2" },
+    { value: 8, label: "2/3" },
+    { value: 12, label: "Full" }
+  ], i = l.colSpan && l.colSpan < 12 ? ((h = a.find((s) => s.value === l.colSpan)) == null ? void 0 : h.label) ?? l.colSpan : "Full";
+  return /* @__PURE__ */ t(n, { sx: { p: 2.5 }, children: [
+    /* @__PURE__ */ t(n, { sx: { display: "flex", alignItems: "center", mb: 2, px: 1.25, py: 0.75, bgcolor: "#f0fdf4", border: "1px solid #bbf7d0", borderRadius: "7px" }, children: [
+      /* @__PURE__ */ e(S, { sx: { fontSize: 11, color: "#15803d", fontWeight: 500, flex: 1 }, children: "Live preview — interact to test the field" }),
+      /* @__PURE__ */ t(S, { sx: { fontSize: 11, color: "#64748b" }, children: [
+        "Width: ",
+        i
+      ] })
+    ] }),
+    /* @__PURE__ */ e(
+      ie,
+      {
+        schema: { layout: "flat", fields: [l] },
+        initialValues: { [c]: l.type === "array" ? [] : l.type === "object" || l.type === "schema" ? {} : "" },
+        onSubmit: () => {
+        },
+        conditionConfig: o,
+        onConditionConfigChange: p
+      }
+    )
+  ] });
+}
+function re({ open: l, initial: o, onSave: p, onClose: c, editMode: a = !1 }) {
+  const [i, h] = T(1), [s, d] = T(() => o ?? ce());
+  function x() {
+    d(o ?? ce()), h(1);
+  }
+  const y = Ye(s), N = y ? 3 : 2, u = y ? ["Configure", Ge(s), "Preview"] : ["Configure", "Preview"], r = !!(s.id || s.name) && !!s.type;
+  function b() {
+    h((z) => Math.min(z + 1, N));
+  }
+  function f() {
+    h((z) => Math.max(z - 1, 1));
+  }
+  function C() {
+    p(s), c();
+  }
+  const g = i - 1, I = i === N, w = y && i === 3 || !y && i === 2;
+  return /* @__PURE__ */ t(
+    he,
+    {
+      open: l,
+      onClose: c,
+      TransitionProps: { onEnter: x },
+      maxWidth: "sm",
+      fullWidth: !0,
+      PaperProps: { sx: { borderRadius: "12px", overflow: "hidden", display: "flex", flexDirection: "column", maxHeight: "90vh" } },
+      children: [
+        /* @__PURE__ */ t(n, { sx: { px: 2.5, pt: 1.75, pb: 0, borderBottom: "1px solid #e2e8f0", flexShrink: 0 }, children: [
+          /* @__PURE__ */ t(n, { sx: { display: "flex", alignItems: "center", mb: 1.5 }, children: [
+            /* @__PURE__ */ e(S, { sx: { fontSize: 14, fontWeight: 700, color: "#0f172a", flex: 1 }, children: a ? "Edit Field" : "Add Field" }),
+            /* @__PURE__ */ e(Y, { size: "small", onClick: c, sx: { color: "#94a3b8" }, children: /* @__PURE__ */ e(_, { size: 17 }) })
+          ] }),
+          /* @__PURE__ */ e(Fe, { activeStep: g, sx: { pb: 1.5 }, children: u.map((z, E) => /* @__PURE__ */ e(Oe, { completed: g > E, children: /* @__PURE__ */ e(Re, { children: z }) }, z)) })
+        ] }),
+        /* @__PURE__ */ t(n, { sx: { flex: 1, overflowY: "auto" }, children: [
+          i === 1 && /* @__PURE__ */ e(ge, { field: s, onChange: d, onSave: b, onCancel: c, noFooter: !0 }),
+          i === 2 && y && /* @__PURE__ */ e(Je, { field: s, onChange: d }),
+          w && /* @__PURE__ */ e(Ke, { field: s })
+        ] }),
+        /* @__PURE__ */ t(n, { sx: { borderTop: "1px solid #e2e8f0", px: 2.5, py: 1.5, display: "flex", alignItems: "center", gap: 1, flexShrink: 0, bgcolor: "#f8fafc" }, children: [
+          i > 1 && /* @__PURE__ */ t(n, { component: "button", onClick: f, sx: { display: "flex", alignItems: "center", gap: 0.5, background: "none", border: "none", cursor: "pointer", fontSize: 13, fontWeight: 500, color: "#6c757d", px: 0, "&:hover": { color: "#0f172a" } }, children: [
+            /* @__PURE__ */ e(fe, { size: 14 }),
+            " Back"
+          ] }),
+          /* @__PURE__ */ e(n, { sx: { flex: 1 } }),
+          /* @__PURE__ */ e(n, { component: "button", onClick: c, sx: { background: "none", border: "1px solid #dee2e6", cursor: "pointer", fontSize: 13, fontWeight: 500, px: 2, py: 0.75, borderRadius: "7px", color: "#6c757d", "&:hover": { bgcolor: "#f8f9fa" } }, children: "Cancel" }),
+          I ? /* @__PURE__ */ t(n, { component: "button", onClick: C, sx: { border: "none", cursor: "pointer", fontSize: 13, fontWeight: 600, px: 2.5, py: 0.75, borderRadius: "7px", bgcolor: "#6366f1", color: "#fff", display: "flex", alignItems: "center", gap: 0.75, "&:hover": { bgcolor: "#4f46e5" } }, children: [
+            /* @__PURE__ */ e(G, { size: 15 }),
+            " ",
+            a ? "Save changes" : "Add field"
+          ] }) : /* @__PURE__ */ e(n, { component: "button", onClick: b, disabled: !r, sx: { border: "none", cursor: r ? "pointer" : "not-allowed", fontSize: 13, fontWeight: 600, px: 2.5, py: 0.75, borderRadius: "7px", bgcolor: r ? "#6366f1" : "#c7d2fe", color: "#fff", "&:hover": { bgcolor: r ? "#4f46e5" : "#c7d2fe" } }, children: "Next →" })
+        ] })
+      ]
+    }
+  );
+}
+function Xe({ field: l, index: o, total: p, onEdit: c, onDelete: a, onMoveUp: i, onMoveDown: h }) {
+  const s = l.label || l.id || l.name || "Untitled", d = l.id ?? l.name ?? "";
+  return /* @__PURE__ */ t(n, { sx: { display: "flex", alignItems: "center", gap: 1, px: 1.5, py: 1, border: "1px solid #e2e8f0", borderRadius: "8px", bgcolor: "#fff" }, children: [
+    /* @__PURE__ */ t(n, { sx: { display: "flex", flexDirection: "column", gap: 0.25, color: "#cbd5e1" }, children: [
+      /* @__PURE__ */ e(n, { component: "button", onClick: i, disabled: o === 0, sx: { background: "none", border: "none", p: 0, cursor: o === 0 ? "default" : "pointer", color: o === 0 ? "#e2e8f0" : "#94a3b8", lineHeight: 1, fontSize: 10, "&:hover": { color: o === 0 ? "#e2e8f0" : "#475569" } }, children: "▲" }),
+      /* @__PURE__ */ e(n, { component: "button", onClick: h, disabled: o === p - 1, sx: { background: "none", border: "none", p: 0, cursor: o === p - 1 ? "default" : "pointer", color: o === p - 1 ? "#e2e8f0" : "#94a3b8", lineHeight: 1, fontSize: 10, "&:hover": { color: o === p - 1 ? "#e2e8f0" : "#475569" } }, children: "▼" })
+    ] }),
+    /* @__PURE__ */ e(n, { sx: { fontSize: 10, fontWeight: 700, px: 0.75, py: 0.2, borderRadius: "4px", bgcolor: "#eef2ff", color: "#6366f1", flexShrink: 0 }, children: l.type }),
+    /* @__PURE__ */ t(n, { sx: { flex: 1, minWidth: 0 }, children: [
+      /* @__PURE__ */ t(S, { sx: { fontSize: 13, fontWeight: 600, color: "#0f172a", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [
+        s,
+        l.required && /* @__PURE__ */ e(n, { component: "span", sx: { color: "#dc3545", ml: 0.25 }, children: "*" })
+      ] }),
+      /* @__PURE__ */ e(S, { sx: { fontSize: 11, color: "#94a3b8", fontFamily: "monospace" }, children: d })
+    ] }),
+    /* @__PURE__ */ e(A, { title: "Edit field", placement: "top", children: /* @__PURE__ */ e(n, { component: "button", onClick: c, sx: { background: "none", border: "none", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", width: 28, height: 28, borderRadius: "6px", p: 0, color: "#94a3b8", "&:hover": { bgcolor: "#f1f5f9", color: "#475569" } }, children: /* @__PURE__ */ e(De, { size: 14 }) }) }),
+    /* @__PURE__ */ e(A, { title: "Remove field", placement: "top", children: /* @__PURE__ */ e(n, { component: "button", onClick: a, sx: { background: "none", border: "none", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", width: 28, height: 28, borderRadius: "6px", p: 0, color: "#94a3b8", "&:hover": { bgcolor: "#fee2e2", color: "#dc2626" } }, children: /* @__PURE__ */ e(Pe, { size: 16 }) }) })
+  ] });
+}
+function Ze({ open: l, value: o, onSave: p, onClose: c }) {
+  const [a, i] = T(o), [h, s] = T(null);
+  function d() {
+    i(o), s(null);
+  }
+  function x(b) {
+    i((f) => f.filter((C, g) => g !== b));
+  }
+  function y(b, f) {
+    i((C) => {
+      const g = [...C], I = b + f;
+      return I < 0 || I >= g.length ? C : ([g[b], g[I]] = [g[I], g[b]], g);
+    });
+  }
+  function N(b) {
+    h !== null && (i((f) => {
+      const C = [...f];
+      return C[h] = b, C;
+    }), s(null));
+  }
+  function u() {
+    p(a), c();
+  }
+  const r = JSON.stringify(a) !== JSON.stringify(o);
+  return /* @__PURE__ */ t(q, { children: [
+    /* @__PURE__ */ t(
+      he,
+      {
+        open: l,
+        onClose: c,
+        TransitionProps: { onEnter: d },
+        maxWidth: "sm",
+        fullWidth: !0,
+        PaperProps: { sx: { borderRadius: "12px", overflow: "hidden", display: "flex", flexDirection: "column", maxHeight: "85vh" } },
+        children: [
+          /* @__PURE__ */ t(n, { sx: { display: "flex", alignItems: "center", px: 2.5, py: 1.75, borderBottom: "1px solid #e2e8f0", flexShrink: 0 }, children: [
+            /* @__PURE__ */ t(n, { sx: { flex: 1 }, children: [
+              /* @__PURE__ */ e(S, { sx: { fontSize: 14, fontWeight: 700, color: "#0f172a" }, children: "Edit Schema" }),
+              /* @__PURE__ */ t(S, { sx: { fontSize: 11, color: "#94a3b8" }, children: [
+                a.length,
+                " field",
+                a.length !== 1 ? "s" : "",
+                " defined"
+              ] })
+            ] }),
+            /* @__PURE__ */ e(Y, { size: "small", onClick: c, sx: { color: "#94a3b8" }, children: /* @__PURE__ */ e(_, { size: 17 }) })
+          ] }),
+          /* @__PURE__ */ e(n, { sx: { flex: 1, overflowY: "auto", p: 2.5 }, children: a.length === 0 ? /* @__PURE__ */ e(n, { sx: { border: "1.5px dashed rgba(0,0,0,0.12)", borderRadius: "8px", py: 4, textAlign: "center" }, children: /* @__PURE__ */ e(S, { sx: { fontSize: 13, color: "#94a3b8" }, children: "No fields defined yet" }) }) : /* @__PURE__ */ e(n, { sx: { display: "flex", flexDirection: "column", gap: 0.75 }, children: a.map((b, f) => /* @__PURE__ */ e(
+            Xe,
+            {
+              field: b,
+              index: f,
+              total: a.length,
+              onEdit: () => s(f),
+              onDelete: () => x(f),
+              onMoveUp: () => y(f, -1),
+              onMoveDown: () => y(f, 1)
+            },
+            `${b.id ?? b.name}-${f}`
+          )) }) }),
+          /* @__PURE__ */ t(n, { sx: { borderTop: "1px solid #e2e8f0", px: 2.5, py: 1.5, display: "flex", alignItems: "center", gap: 1, flexShrink: 0, bgcolor: "#f8fafc" }, children: [
+            r ? /* @__PURE__ */ e(S, { sx: { fontSize: 11, color: "#f59e0b", fontWeight: 500, flex: 1 }, children: "Unsaved changes" }) : /* @__PURE__ */ e(n, { sx: { flex: 1 } }),
+            /* @__PURE__ */ e(n, { component: "button", onClick: c, sx: { background: "none", border: "1px solid #dee2e6", cursor: "pointer", fontSize: 13, fontWeight: 500, px: 2, py: 0.75, borderRadius: "7px", color: "#6c757d", "&:hover": { bgcolor: "#f8f9fa" } }, children: "Cancel" }),
+            /* @__PURE__ */ t(n, { component: "button", onClick: u, sx: { border: "none", cursor: "pointer", fontSize: 13, fontWeight: 600, px: 2.5, py: 0.75, borderRadius: "7px", bgcolor: "#6366f1", color: "#fff", display: "flex", alignItems: "center", gap: 0.75, "&:hover": { bgcolor: "#4f46e5" } }, children: [
+              /* @__PURE__ */ e(G, { size: 15 }),
+              " Done"
+            ] })
+          ] })
+        ]
+      }
+    ),
+    h !== null && /* @__PURE__ */ e(
+      re,
+      {
+        open: h !== null,
+        initial: a[h],
+        onSave: N,
+        onClose: () => s(null),
+        editMode: !0
+      }
+    )
+  ] });
+}
+function ye(l) {
+  const o = {};
+  for (const p of l) {
+    const c = p.id ?? p.name ?? "";
+    c && (p.type === "array" ? o[c] = [] : p.type === "object" || p.type === "schema" ? o[c] = ye(p.children ?? []) : o[c] = "");
+  }
+  return o;
+}
+function U({
+  value: l,
+  onChange: o,
+  suggestions: p,
+  label: c = "Fields",
+  onPayload: a,
+  validate: i = !0,
+  onValidityChange: h,
+  variableGroups: s,
+  initialValues: d,
+  initialFormulaConfig: x,
+  initialConditionConfig: y
+}) {
+  const [N, u] = T(!1), [r, b] = T(!1), [f, C] = T(null), [g, I] = T(x ?? {}), [w, z] = T(y ?? {}), E = M(d ?? {}), j = P(() => ye(l), [l]), K = P(
+    () => d && Object.keys(d).length > 0 ? { ...j, ...d } : j,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [j, d]
+  ), L = P(
+    () => i ? pe(l) : void 0,
+    [i, l]
+  );
+  de(() => {
+    a && a({
+      schema: l,
+      formulaConfig: g,
+      conditionConfig: w,
+      conditionExpressions: se(w),
+      values: E.current,
+      evaluationPayload: oe({ values: E.current, conditionConfig: w })
+    });
+  }, [w, g, l]);
+  const X = te((F) => {
+    E.current = F, a && a({
+      schema: l,
+      formulaConfig: g,
+      conditionConfig: w,
+      conditionExpressions: se(w),
+      values: F,
+      evaluationPayload: oe({ values: F, conditionConfig: w })
+    });
+  }, [l, g, w, a]);
+  function $(F) {
+    o([...l, F]);
+  }
+  function Z(F) {
+    if (!f) return;
+    const { containerFieldId: V, tabId: Q } = f, ee = l.map((O) => {
+      if ((O.id ?? O.name) !== V) return O;
+      const le = O.tabs ?? [];
+      return {
+        ...O,
+        tabs: le.map(
+          (W) => W.id === Q ? { ...W, fields: [...W.fields ?? [], F] } : W
+        )
+      };
+    });
+    o(ee), C(null);
+  }
+  function k(F, V, Q) {
+    const ee = l.map((O) => {
+      if ((O.id ?? O.name) !== F) return O;
+      const le = O.tabs ?? [];
+      return {
+        ...O,
+        tabs: le.map(
+          (W) => W.id === V ? { ...W, fields: (W.fields ?? []).filter((el, Se) => Se !== Q) } : W
+        )
+      };
+    });
+    o(ee);
+  }
+  const Ce = P(() => ({
+    openAddFieldDialog: (F, V) => C({ containerFieldId: F, tabId: V }),
+    removeFieldFromTab: k
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }), [l, o]), ae = /* @__PURE__ */ t("div", { className: "schema-builder-root", children: [
+    l.length > 0 && /* @__PURE__ */ e("div", { className: "schema-builder-header", children: /* @__PURE__ */ t("div", { className: "schema-builder-actions", children: [
+      /* @__PURE__ */ e(A, { title: "Edit schema", placement: "top", children: /* @__PURE__ */ t(
+        "button",
+        {
+          className: "sb-btn sb-btn-outline",
+          onClick: () => b(!0),
+          children: [
+            /* @__PURE__ */ e(be, { size: 13 }),
+            " Edit Schema"
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ e(A, { title: "Add a new field", placement: "top", children: /* @__PURE__ */ t(
+        "button",
+        {
+          className: "sb-btn sb-btn-primary",
+          onClick: () => u(!0),
+          children: [
+            /* @__PURE__ */ e(J, { size: 14 }),
+            " Add Field"
+          ]
+        }
+      ) })
+    ] }) }),
+    l.length > 0 ? /* @__PURE__ */ e(ze.Provider, { value: Ce, children: /* @__PURE__ */ e(
+      ie,
+      {
+        schema: { layout: "flat", fields: l },
+        initialValues: K,
+        onSubmit: () => {
+        },
+        validationSchema: L,
+        onValidityChange: h,
+        onValuesChange: a ? X : void 0,
+        formulaConfig: g,
+        onFormulaConfigChange: I,
+        conditionConfig: w,
+        onConditionConfigChange: z
+      }
+    ) }) : /* @__PURE__ */ t("div", { className: "schema-builder-empty-state", children: [
+      /* @__PURE__ */ e(_e, { size: 40, className: "schema-builder-empty-icon" }),
+      /* @__PURE__ */ e("p", { className: "schema-builder-empty-title", children: "Tell us what fields should be in the list, and assign values to them." }),
+      /* @__PURE__ */ e("div", { className: "schema-builder-empty-actions", children: /* @__PURE__ */ e(
+        "button",
+        {
+          className: "btn",
+          onClick: () => u(!0),
+          children: "Add field"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ e(
+      re,
+      {
+        open: N,
+        onSave: $,
+        onClose: () => u(!1)
+      }
+    ),
+    /* @__PURE__ */ e(
+      Ze,
+      {
+        open: r,
+        value: l,
+        onSave: o,
+        onClose: () => b(!1)
+      }
+    ),
+    /* @__PURE__ */ e(
+      re,
+      {
+        open: !!f,
+        onSave: Z,
+        onClose: () => C(null)
+      }
+    )
+  ] });
+  return s ? /* @__PURE__ */ t(Te, { groups: s, children: [
+    /* @__PURE__ */ e(we, { width: 260, mode: "popover" }),
+    ae
+  ] }) : ae;
+}
+function Qe({ fields: l, onOpen: o }) {
+  return /* @__PURE__ */ t(n, { sx: { border: "1px solid #e2e8f0", borderRadius: "8px", bgcolor: "#fff", overflow: "hidden" }, children: [
+    l.length > 0 ? /* @__PURE__ */ e(n, { sx: { px: 1.5, py: 1.25, display: "flex", flexWrap: "wrap", gap: 0.5 }, children: l.map((p, c) => {
+      const a = p.id ?? p.name ?? "";
+      return /* @__PURE__ */ e(A, { title: `${p.type} · ${a}`, placement: "top", children: /* @__PURE__ */ e(
+        We,
+        {
+          label: p.label || a,
+          size: "small",
+          sx: { fontSize: 11, fontWeight: 500, height: 22, bgcolor: "#f1f5f9", color: "#334155", border: "1px solid #e2e8f0", "& .MuiChip-label": { px: 1 } }
+        }
+      ) }, c);
+    }) }) : /* @__PURE__ */ e(n, { sx: { px: 1.5, py: 1.5 }, children: /* @__PURE__ */ e(S, { sx: { fontSize: 12, color: "#94a3b8" }, children: "No fields defined yet" }) }),
+    /* @__PURE__ */ e(Ae, { sx: { borderColor: "#f1f5f9" } }),
+    /* @__PURE__ */ t(n, { onClick: o, sx: { display: "flex", alignItems: "center", gap: 0.75, px: 1.5, py: 1, cursor: "pointer", "&:hover": { bgcolor: "#f8fafc" }, transition: "background 0.12s" }, children: [
+      l.length === 0 ? /* @__PURE__ */ e(J, { size: 14, color: "#6366f1" }) : /* @__PURE__ */ e(be, { size: 13, color: "#6366f1" }),
+      /* @__PURE__ */ e(S, { sx: { fontSize: 12, fontWeight: 600, color: "#6366f1", flex: 1 }, children: l.length === 0 ? "Add fields" : "Configure fields" }),
+      /* @__PURE__ */ e(Me, { size: 13, color: "#94a3b8" })
+    ] })
+  ] });
+}
+function cl({
+  value: l,
+  onChange: o,
+  suggestions: p,
+  onPayload: c,
+  onDone: a,
+  validate: i,
+  onValidityChange: h,
+  label: s = "Fields",
+  drawerTitle: d = "Configure Fields",
+  drawerWidth: x = 580
+}) {
+  const [y, N] = T(!1), [u, r] = T({ type: "list" }), [b, f] = T(l), C = M(null), g = M(void 0), I = M(void 0), w = M(void 0), [z, E] = T(null);
+  function j() {
+    f(l), r({ type: "list" }), N(!0);
+  }
+  function K() {
+    const k = C.current;
+    k && (g.current = k.values, I.current = k.formulaConfig, w.current = k.conditionConfig), o(b), N(!1), a == null || a(b, k);
+  }
+  function L() {
+    const k = C.current;
+    k && (g.current = k.values, I.current = k.formulaConfig, w.current = k.conditionConfig), f(l), N(!1);
+  }
+  function X() {
+    if (u.type !== "edit" || !z) return;
+    const k = [...b];
+    k[u.index] = z, f(k), r({ type: "list" }), E(null);
+  }
+  function $() {
+    r({ type: "list" }), E(null);
+  }
+  const Z = JSON.stringify(b) !== JSON.stringify(l);
+  return u.type === "edit" && b[u.index], /* @__PURE__ */ t(q, { children: [
+    /* @__PURE__ */ t(n, { children: [
+      /* @__PURE__ */ e(S, { sx: { fontSize: 12, fontWeight: 700, color: "#64748b", textTransform: "uppercase", letterSpacing: 0.5, mb: 0.75 }, children: s }),
+      /* @__PURE__ */ e(Qe, { fields: l, onOpen: j })
+    ] }),
+    /* @__PURE__ */ t(
+      Ee,
+      {
+        anchor: "right",
+        open: y,
+        onClose: L,
+        PaperProps: { sx: { width: x, display: "flex", flexDirection: "column", boxShadow: "-4px 0 24px rgba(0,0,0,0.12)", overflow: "hidden" } },
+        children: [
+          /* @__PURE__ */ t(n, { sx: { display: "flex", alignItems: "center", px: 2, py: 1.5, borderBottom: "1px solid #e2e8f0", flexShrink: 0, gap: 1 }, children: [
+            u.type === "edit" && /* @__PURE__ */ e(A, { title: "Back to fields", placement: "bottom", children: /* @__PURE__ */ e(Y, { size: "small", onClick: $, sx: { color: "#64748b" }, children: /* @__PURE__ */ e(fe, { size: 17 }) }) }),
+            /* @__PURE__ */ t(n, { sx: { flex: 1 }, children: [
+              /* @__PURE__ */ e(S, { sx: { fontSize: 14, fontWeight: 700, color: "#0f172a" }, children: u.type === "edit" ? (z == null ? void 0 : z.label) || (z == null ? void 0 : z.id) || "Edit field" : d }),
+              /* @__PURE__ */ e(S, { sx: { fontSize: 11, color: "#94a3b8" }, children: u.type === "edit" ? "Configure field properties" : `${b.length} field${b.length !== 1 ? "s" : ""} defined` })
+            ] }),
+            u.type === "list" && /* @__PURE__ */ e(A, { title: "Close", placement: "bottom", children: /* @__PURE__ */ e(Y, { size: "small", onClick: L, sx: { color: "#94a3b8" }, children: /* @__PURE__ */ e(_, { size: 17 }) }) })
+          ] }),
+          u.type === "list" && /* @__PURE__ */ t(q, { children: [
+            /* @__PURE__ */ e(n, { sx: { flex: 1, overflowY: "auto", p: 2.5 }, children: /* @__PURE__ */ e(
+              U,
+              {
+                value: b,
+                onChange: f,
+                suggestions: p,
+                onPayload: (k) => {
+                  C.current = k, g.current = k.values, I.current = k.formulaConfig, w.current = k.conditionConfig, c == null || c(k);
+                },
+                validate: i,
+                onValidityChange: h,
+                label: s,
+                initialValues: g.current,
+                initialFormulaConfig: I.current,
+                initialConditionConfig: w.current
+              }
+            ) }),
+            /* @__PURE__ */ t(n, { sx: { borderTop: "1px solid #e2e8f0", px: 2.5, py: 1.5, display: "flex", alignItems: "center", gap: 1, flexShrink: 0, bgcolor: "#f8fafc" }, children: [
+              Z ? /* @__PURE__ */ e(S, { sx: { fontSize: 11, color: "#f59e0b", fontWeight: 500, flex: 1 }, children: "Unsaved changes" }) : /* @__PURE__ */ e(n, { sx: { flex: 1 } }),
+              /* @__PURE__ */ e(n, { component: "button", onClick: L, sx: { background: "none", border: "1px solid #dee2e6", cursor: "pointer", fontSize: 13, fontWeight: 500, px: 2, py: 0.75, borderRadius: "7px", color: "#6c757d", "&:hover": { bgcolor: "#f8f9fa" } }, children: "Cancel" }),
+              /* @__PURE__ */ t(n, { component: "button", onClick: K, sx: { border: "none", cursor: "pointer", fontSize: 13, fontWeight: 600, px: 2.5, py: 0.75, borderRadius: "7px", bgcolor: "#6366f1", color: "#fff", display: "flex", alignItems: "center", gap: 0.75, "&:hover": { bgcolor: "#4f46e5" } }, children: [
+                /* @__PURE__ */ e(G, { size: 15 }),
+                " Done"
+              ] })
+            ] })
+          ] }),
+          u.type === "edit" && z && /* @__PURE__ */ e(
+            ge,
+            {
+              field: z,
+              onChange: E,
+              onSave: X,
+              onCancel: $
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+export {
+  je as F,
+  U as S,
+  cl as a,
+  sl as u
+};