webim-adapter 0.3.0 → 0.5.0

package/build/webim-adapter.js

@@ -48,20 +48,20 @@ function p(e) {
 		color: j,
 		inset: M
 	})), N.length && (t.boxShadow = N.join(", "));
-	let ee = (e) => e.type === "blur" ? `blur(${d(e.v ?? 0)})` : e.type === "hue-rotate" ? `hue-rotate(${h(e.v ?? 0)})` : `${e.type}(${e.v ?? 100}%)`, P = (e) => (Array.isArray(e) ? e : []).filter((e) => e && e.on !== !1 && e.type).map(ee), { filters: F, backdropFilters: te, filterBlur: I, filterGrayscale: L, filterBrightness: ne, filterContrast: re, filterSaturate: R } = t;
+	let P = (e) => e.type === "blur" ? `blur(${d(e.v ?? 0)})` : e.type === "hue-rotate" ? `hue-rotate(${h(e.v ?? 0)})` : `${e.type}(${e.v ?? 100}%)`, F = (e) => (Array.isArray(e) ? e : []).filter((e) => e && e.on !== !1 && e.type).map(P), { filters: I, backdropFilters: L, filterBlur: R, filterGrayscale: z, filterBrightness: ee, filterContrast: te, filterSaturate: ne } = t;
 	delete t.filters, delete t.backdropFilters, delete t.filterBlur, delete t.filterGrayscale, delete t.filterBrightness, delete t.filterContrast, delete t.filterSaturate;
-	let z = P(F);
-	I !== void 0 && z.push(`blur(${d(I)})`), L !== void 0 && z.push(`grayscale(${L}%)`), ne !== void 0 && z.push(`brightness(${ne}%)`), re !== void 0 && z.push(`contrast(${re}%)`), R !== void 0 && z.push(`saturate(${R}%)`), z.length && (t.filter = z.join(" "));
-	let B = P(te);
-	B.length && (t.backdropFilter = B.join(" "), t.WebkitBackdropFilter = t.backdropFilter);
-	let { textStrokeWidth: V, textStrokeColor: H } = t;
-	delete t.textStrokeWidth, delete t.textStrokeColor, (V !== void 0 || H !== void 0) && (t.WebkitTextStroke = `${d(V ?? 1)} ${H || "currentColor"}`);
-	let { clipText: ie } = t;
-	delete t.clipText, ie && (t.WebkitBackgroundClip = "text", t.backgroundClip = "text", t.WebkitTextFillColor = "transparent");
-	let { transitions: U, transitionDuration: W, transitionEasing: G, transitionProperty: ae } = t, K = (e) => typeof e == "number" || !Number.isNaN(Number(e)) ? `${Number(e)}ms` : e;
+	let B = F(I);
+	R !== void 0 && B.push(`blur(${d(R)})`), z !== void 0 && B.push(`grayscale(${z}%)`), ee !== void 0 && B.push(`brightness(${ee}%)`), te !== void 0 && B.push(`contrast(${te}%)`), ne !== void 0 && B.push(`saturate(${ne}%)`), B.length && (t.filter = B.join(" "));
+	let V = F(L);
+	V.length && (t.backdropFilter = V.join(" "), t.WebkitBackdropFilter = t.backdropFilter);
+	let { textStrokeWidth: H, textStrokeColor: U } = t;
+	delete t.textStrokeWidth, delete t.textStrokeColor, (H !== void 0 || U !== void 0) && (t.WebkitTextStroke = `${d(H ?? 1)} ${U || "currentColor"}`);
+	let { clipText: re } = t;
+	delete t.clipText, re && (t.WebkitBackgroundClip = "text", t.backgroundClip = "text", t.WebkitTextFillColor = "transparent");
+	let { transitions: W, transitionDuration: ie, transitionEasing: G, transitionProperty: ae } = t, K = (e) => typeof e == "number" || !Number.isNaN(Number(e)) ? `${Number(e)}ms` : e;
 	delete t.transitions, delete t.transitionDuration, delete t.transitionEasing, delete t.transitionProperty;
-	let q = (Array.isArray(U) ? U : []).filter((e) => e && e.on !== !1).map((e) => `${e.property || "all"} ${K(e.duration ?? 200)} ${e.easing || "ease"}`);
-	if (W !== void 0 && q.push(`${ae || "all"} ${K(W)} ${G || "ease"}`), q.length && (t.transition = q.join(", ")), t.backgroundImage && !String(t.backgroundImage).includes("(") && (t.backgroundImage = `url("${t.backgroundImage}")`), n) {
+	let q = (Array.isArray(W) ? W : []).filter((e) => e && e.on !== !1).map((e) => `${e.property || "all"} ${K(e.duration ?? 200)} ${e.easing || "ease"}`);
+	if (ie !== void 0 && q.push(`${ae || "all"} ${K(ie)} ${G || "ease"}`), q.length && (t.transition = q.join(", ")), t.backgroundImage && !String(t.backgroundImage).includes("(") && (t.backgroundImage = `url("${t.backgroundImage}")`), n) {
 		let e = `${i || "rgba(0,0,0,0.5)"}, ${a || "transparent"}`, o = n === "radial" ? `radial-gradient(circle, ${e})` : `linear-gradient(${r ?? 180}deg, ${e})`;
 		t.backgroundImage = t.backgroundImage ? `${o}, ${t.backgroundImage}` : o;
 	}
@@ -263,7 +263,7 @@ function N(e) {
 		"--page-secondary-contrast": e.secondary.contrastText
 	};
 }
-function ee(e) {
+function P(e) {
 	let t = M(e);
 	return {
 		backgroundColor: "var(--page-bg)",
@@ -272,19 +272,19 @@ function ee(e) {
 		"--page-heading-font": t.headingFont === "inherit" ? "inherit" : A(t.headingFont, "inherit")
 	};
 }
-function P(e, t = "light") {
+function F(e, t = "light") {
 	let n = M(e);
 	return {
-		...ee(e),
+		...P(e),
 		...N(n[t] ?? n.light)
 	};
 }
-function F(e, t) {
+function I(e, t) {
 	return e?.themeRef && t?.[e.themeRef] || e?.theme;
 }
 //#endregion
 //#region src/bundle.js
-function te({ page: e, settings: t, tenant: n, apiUrl: r, locale: i }) {
+function L({ page: e, settings: t, tenant: n, apiUrl: r, locale: i }) {
 	let a = {
 		...t?.global ?? {},
 		...t?.tenant ?? {}
@@ -294,7 +294,7 @@ function te({ page: e, settings: t, tenant: n, apiUrl: r, locale: i }) {
 		title: e.title,
 		slug: e.slug,
 		blocks: i && o.i18n?.[i]?.blocks || e.blocks,
-		theme: F(o, a.builder_themes?.themes),
+		theme: I(o, a.builder_themes?.themes),
 		components: a.builder_components?.components ?? {},
 		custom: o.custom,
 		seo: o.seo,
@@ -305,23 +305,23 @@ function te({ page: e, settings: t, tenant: n, apiUrl: r, locale: i }) {
 }
 //#endregion
 //#region src/fetchPage.js
-var I = async (e) => {
+var R = async (e) => {
 	let t = await e.json().catch(() => null);
 	if (!e.ok || t?.success === !1) throw Error(t?.error?.message || `Request failed (${e.status})`);
 	return t?.payload ?? t;
 };
-async function L({ apiUrl: e, tenant: t, slug: n, locale: r, preview: i, fetch: a }) {
+async function z({ apiUrl: e, tenant: t, slug: n, locale: r, preview: i, fetch: a }) {
 	if (!e) throw Error("fetchPage: apiUrl is required");
 	if (!n) throw Error("fetchPage: slug is required");
-	let o = a ?? fetch, s = e.replace(/\/$/, ""), c = t ? { "x-tenant": t } : {}, [l, u] = await Promise.all([o(`${s}/render/${encodeURIComponent(n)}${i ? `?preview=${encodeURIComponent(i)}` : ""}`, { headers: c }).then(I), o(`${s}/settings/public`, { headers: c }).then(I)]), d = te({
+	let o = a ?? fetch, s = e.replace(/\/$/, ""), c = t ? { "x-tenant": t } : {}, [l, u] = await Promise.all([o(`${s}/render/${encodeURIComponent(n)}${i ? `?preview=${encodeURIComponent(i)}` : ""}`, { headers: c }).then(R), o(`${s}/settings/public`, { headers: c }).then(R)]), d = L({
 		page: l,
 		settings: u,
 		tenant: t,
 		apiUrl: s,
 		locale: r
-	}), f = [...new Set(Object.values(d.blocks ?? {}).filter((e) => e?.type?.resolvedName === "CollectionList" && e.props?.collection).map((e) => e.props.collection))];
+	}), f = [...new Set(Object.values(d.blocks ?? {}).map((e) => e?.type?.resolvedName === "CollectionList" ? e.props?.collection : e?.type?.resolvedName === "TableBlock" ? e.props?.source : null).filter(Boolean))];
 	if (f.length) {
-		let e = (e) => e.startsWith("api:") ? `${s}/data/${encodeURIComponent(e.slice(4))}` : `${s}/dynamic/${encodeURIComponent(e)}${r ? `?locale=${encodeURIComponent(r)}` : ""}`, t = await Promise.all(f.map((t) => o(e(t), { headers: c }).then(I).then((e) => [t, Array.isArray(e) ? e : []]).catch(() => [t, []])));
+		let e = (e) => e.startsWith("api:") ? `${s}/data/${encodeURIComponent(e.slice(4))}` : `${s}/dynamic/${encodeURIComponent(e)}${r ? `?locale=${encodeURIComponent(r)}` : ""}`, t = await Promise.all(f.map((t) => o(e(t), { headers: c }).then(R).then((e) => [t, Array.isArray(e) ? e : []]).catch(() => [t, []])));
 		d.datasets = Object.fromEntries(t);
 	}
 	return d;
@@ -432,14 +432,14 @@ new Map([
 		fallback: "sans-serif"
 	}
 ].map((e) => [e.family, e]));
-function ne(e) {
+function ee(e) {
 	return e.length ? `https://fonts.googleapis.com/css2?${e.map((e) => `family=${e.replace(/ /g, "+")}:wght@100..900`).join("&")}&display=swap` : null;
 }
-var re = (e) => ne([e]), R = (e) => {
+var te = (e) => ee([e]), ne = (e) => {
 	let t = typeof e == "string" && e.match(/^"([^"]+)"/);
 	return t ? t[1] : null;
 };
-function z(e, t) {
+function B(e, t) {
 	let n = /* @__PURE__ */ new Set(), r = (e) => {
 		for (let t of Object.values(e || {})) for (let e of [
 			"style",
@@ -447,7 +447,7 @@ function z(e, t) {
 			"pressed",
 			"focused"
 		]) {
-			let r = R(t.props?.[e]?.fontFamily);
+			let r = ne(t.props?.[e]?.fontFamily);
 			r && n.add(r);
 		}
 	};
@@ -457,14 +457,14 @@ function z(e, t) {
 }
 //#endregion
 //#region ../ui/src/components/builder/views.jsx
-var B = t({
+var V = t({
 	tenant: "",
 	apiUrl: "/api"
-}), V = t(null), H = t(null), ie = (e) => e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-function U(e, t) {
+}), H = t(null), U = t(null), re = (e) => e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+function W(e, t) {
 	if (t) return t.includes(".") ? t.split(".").reduce((e, t) => e && typeof e == "object" ? e[t] : void 0, e) : e?.[t];
 }
-var W = (e) => {
+var ie = (e) => {
 	let t = [];
 	for (let [n, r] of Object.entries(e ?? {})) {
 		if (!/^[\w-]+$/.test(n)) continue;
@@ -478,9 +478,9 @@ function G(e) {
 	return e == null ? "" : typeof e == "string" || typeof e == "number" || typeof e == "boolean" ? String(e) : Array.isArray(e) ? e.map((e) => typeof e == "string" ? e : Array.isArray(e?.parts) ? e.parts.map((e) => e?.text ?? "").join("") : Array.isArray(e?.items) ? e.items.map((e) => e?.text ?? "").join(" ") : "").filter(Boolean).join(" ") : "";
 }
 function ae(e, t) {
-	let n = t?.data ?? {}, r = W(n);
+	let n = t?.data ?? {}, r = ie(n);
 	if (!r.length) return e;
-	let i = RegExp(`:(${r.map(ie).sort((e, t) => t.length - e.length).join("|")})`, "g"), a = (e) => typeof e == "string" ? e.replace(i, (e, t) => G(U(n, t))) : Array.isArray(e) ? e.map(a) : e && typeof e == "object" ? Object.fromEntries(Object.entries(e).map(([e, t]) => [e, a(t)])) : e;
+	let i = RegExp(`:(${r.map(re).sort((e, t) => t.length - e.length).join("|")})`, "g"), a = (e) => typeof e == "string" ? e.replace(i, (e, t) => G(W(n, t))) : Array.isArray(e) ? e.map(a) : e && typeof e == "object" ? Object.fromEntries(Object.entries(e).map(([e, t]) => [e, a(t)])) : e;
 	return a(e);
 }
 var K = {
@@ -585,16 +585,18 @@ var pe = {
 	borderRadius: 4,
 	fontSize: "0.9em"
 };
-function me(e, t = [], n) {
-	let r = e;
-	return t.includes("sup") ? r = /* @__PURE__ */ c("sup", { children: r }) : t.includes("sub") && (r = /* @__PURE__ */ c("sub", { children: r })), t.includes("code") && (r = /* @__PURE__ */ c("code", {
+function me(e, t = [], n, r) {
+	let i = e;
+	return t.includes("sup") ? i = /* @__PURE__ */ c("sup", { children: i }) : t.includes("sub") && (i = /* @__PURE__ */ c("sub", { children: i })), t.includes("code") && (i = /* @__PURE__ */ c("code", {
 		style: pe,
-		children: r
-	})), t.includes("strike") && (r = /* @__PURE__ */ c("s", { children: r })), t.includes("underline") && (r = /* @__PURE__ */ c("u", { children: r })), t.includes("italic") && (r = /* @__PURE__ */ c("em", { children: r })), t.includes("bold") && (r = /* @__PURE__ */ c("strong", { children: r })), n && (r = /* @__PURE__ */ c("a", {
+		children: i
+	})), t.includes("strike") && (i = /* @__PURE__ */ c("s", { children: i })), t.includes("underline") && (i = /* @__PURE__ */ c("u", { children: i })), t.includes("italic") && (i = /* @__PURE__ */ c("em", { children: i })), t.includes("bold") && (i = /* @__PURE__ */ c("strong", { children: i })), n && (i = /* @__PURE__ */ c("a", {
 		href: n,
+		target: r || void 0,
+		rel: r === "_blank" ? "noopener noreferrer" : void 0,
 		style: { color: "inherit" },
-		children: r
-	})), r;
+		children: i
+	})), i;
 }
 function X(t, n, r) {
 	return t?.length ? t.map((t, n) => {
@@ -604,17 +606,25 @@ function X(t, n, r) {
 		return t.sup ? i = /* @__PURE__ */ c("sup", { children: i }) : t.sub && (i = /* @__PURE__ */ c("sub", { children: i })), t.code && (i = /* @__PURE__ */ c("code", {
 			style: pe,
 			children: i
-		})), t.strike && (i = /* @__PURE__ */ c("s", { children: i })), t.underline && (i = /* @__PURE__ */ c("u", { children: i })), t.italic && (i = /* @__PURE__ */ c("em", { children: i })), t.bold && (i = /* @__PURE__ */ c("strong", { children: i })), t.href && (i = /* @__PURE__ */ c("a", {
+		})), t.strike && (i = /* @__PURE__ */ c("s", { children: i })), t.underline && (i = /* @__PURE__ */ c("u", { children: i })), t.italic && (i = /* @__PURE__ */ c("em", { children: i })), t.bold && (i = /* @__PURE__ */ c("strong", { children: i })), (t.color || t.background) && (i = /* @__PURE__ */ c("span", {
+			style: {
+				...t.color && { color: t.color },
+				...t.background && { backgroundColor: t.background }
+			},
+			children: i
+		})), t.href && (i = /* @__PURE__ */ c("a", {
 			href: t.href,
-			style: { color: "inherit" },
+			target: t.target || void 0,
+			rel: t.target === "_blank" ? "noopener noreferrer" : void 0,
+			style: { color: t.color ?? "inherit" },
 			children: i
 		})), /* @__PURE__ */ c(e, { children: i }, n);
 	}) : n;
 }
-function he({ parts: e, text: t, marks: n, href: r, style: i }) {
+function he({ parts: e, text: t, marks: n, href: r, target: i, style: a }) {
 	return /* @__PURE__ */ c("span", {
-		style: p(i),
-		children: e?.length ? X(e, t) : me(t, n, r)
+		style: p(a),
+		children: e?.length ? X(e, t) : me(t, n, r, i)
 	});
 }
 var ge = {
@@ -625,24 +635,35 @@ var ge = {
 	h5: 19,
 	h6: 16
 };
-function _e({ align: e = "center", width: t } = {}) {
-	let n = t ? `${t}%` : void 0;
-	return e === "full" ? { width: "100%" } : e === "left" ? {
-		float: "left",
-		width: n ?? "50%",
-		marginTop: 4,
-		marginRight: 20,
-		marginBottom: 12,
-		marginLeft: 0
-	} : e === "right" ? {
-		float: "right",
-		width: n ?? "50%",
-		marginTop: 4,
-		marginLeft: 20,
-		marginBottom: 12,
-		marginRight: 0
+function _e({ align: e = "center", width: t, wrap: n } = {}) {
+	let r = t ? `${t}%` : void 0;
+	if (e === "full") return { width: "100%" };
+	let i = e === "left" || e === "right";
+	return i && (n ?? !0) ? {
+		float: e,
+		width: r ?? "50%",
+		maxWidth: "100%",
+		marginTop: "4px",
+		marginBottom: "12px",
+		...e === "left" ? {
+			marginRight: "20px",
+			marginLeft: 0
+		} : {
+			marginLeft: "20px",
+			marginRight: 0
+		}
+	} : i ? {
+		width: r ?? "fit-content",
+		maxWidth: "100%",
+		...e === "left" ? {
+			marginLeft: 0,
+			marginRight: "auto"
+		} : {
+			marginLeft: "auto",
+			marginRight: 0
+		}
 	} : {
-		width: n ?? "fit-content",
+		width: r ?? "fit-content",
 		maxWidth: "100%",
 		marginLeft: "auto",
 		marginRight: "auto"
@@ -675,6 +696,8 @@ function ve(e = [], t, n) {
 				},
 				children: [t.href ? /* @__PURE__ */ c("a", {
 					href: t.href,
+					target: t.target || void 0,
+					rel: t.target === "_blank" ? "noopener noreferrer" : void 0,
 					style: { display: "block" },
 					children: e
 				}) : e, t.caption && /* @__PURE__ */ c("figcaption", {
@@ -693,6 +716,7 @@ function ve(e = [], t, n) {
 				...i,
 				..._e({
 					align: t.align,
+					wrap: t.wrap,
 					width: t.width ?? 100
 				})
 			},
@@ -1452,73 +1476,318 @@ var Ke = {
 	tabIndex: -1,
 	onMouseDown: (e) => e.preventDefault()
 } : {};
-function Xe({ style: e, action: t, method: r, name: i, enctype: a, formSlug: s, nodeRef: u, inert: d, children: f, linked: m, show: h }) {
-	let { tenant: g, apiUrl: _ } = n(B), [v, y] = o("form"), b = d ? h || "form" : v;
+function Xe(e, t) {
+	if (!e) return !0;
+	let n = t[e.field], r = n == null || n === "" ? "" : String(n), i = e.value ?? "";
+	switch (e.op) {
+		case "eq": return r === i;
+		case "neq": return r !== i;
+		case "contains": return r.toLowerCase().includes(i.toLowerCase());
+		case "gt": return Number(r) > Number(i);
+		case "lt": return Number(r) < Number(i);
+		case "empty": return r === "";
+		case "notEmpty": return r !== "";
+		default: return !1;
+	}
+}
+var Ze = {
+	display: "flex",
+	flexDirection: "column",
+	gap: 6
+}, Qe = {
+	font: "inherit",
+	fontSize: 15,
+	padding: "10px 12px",
+	borderRadius: 8,
+	border: "1px solid rgba(148, 163, 184, 0.55)",
+	background: "transparent",
+	color: "inherit",
+	width: "100%",
+	boxSizing: "border-box"
+};
+function $e({ field: e, value: t, onChange: n, inert: r }) {
+	let i = /* @__PURE__ */ l("span", {
+		style: {
+			...qe,
+			fontSize: 14
+		},
+		children: [e.label, e.required ? " *" : ""]
+	}), a = {
+		name: e.name,
+		required: e.required || void 0,
+		placeholder: e.placeholder || void 0,
+		disabled: r || void 0,
+		style: Qe,
+		value: t ?? "",
+		onChange: (t) => n(e.name, t.target.value)
+	};
+	return e.type === "display" ? /* @__PURE__ */ c(e.variant && e.variant !== "p" ? e.variant : "p", {
+		style: {
+			margin: 0,
+			color: e.color || "inherit",
+			fontSize: {
+				h1: 32,
+				h2: 26,
+				h3: 21,
+				h4: 18,
+				h5: 16,
+				h6: 14,
+				p: 15
+			}[e.variant] ?? 16,
+			fontWeight: e.variant === "p" ? 400 : 700,
+			lineHeight: 1.35
+		},
+		children: e.label
+	}) : e.type === "image" ? e.src ? /* @__PURE__ */ c("img", {
+		src: e.src,
+		alt: e.label ?? "",
+		style: {
+			width: "100%",
+			borderRadius: 8,
+			display: "block"
+		}
+	}) : null : e.type === "video" ? e.src ? /youtube\.com|youtu\.be|vimeo\.com/i.test(e.src) ? /* @__PURE__ */ c(Ae, {
+		url: e.src,
+		style: { width: "100%" }
+	}) : /* @__PURE__ */ c("video", {
+		src: e.src,
+		controls: !0,
+		style: {
+			width: "100%",
+			borderRadius: 8,
+			display: "block"
+		}
+	}) : null : /* @__PURE__ */ l("label", {
+		style: Ze,
+		children: [
+			i,
+			e.type === "textarea" || e.multiline ? /* @__PURE__ */ c("textarea", {
+				...a,
+				rows: 4,
+				style: {
+					...Qe,
+					resize: "vertical"
+				}
+			}) : e.type === "select" ? /* @__PURE__ */ l("select", {
+				...a,
+				children: [/* @__PURE__ */ c("option", {
+					value: "",
+					children: e.placeholder || "—"
+				}), (e.options ?? []).map((e, t) => /* @__PURE__ */ c("option", {
+					value: typeof e == "string" ? e : e.value,
+					children: typeof e == "string" ? e : e.label ?? e.value
+				}, t))]
+			}) : e.type === "checkbox" ? /* @__PURE__ */ c("input", {
+				type: "checkbox",
+				name: e.name,
+				required: e.required || void 0,
+				disabled: r || void 0,
+				checked: !!t,
+				onChange: (t) => n(e.name, t.target.checked),
+				style: {
+					width: 18,
+					height: 18
+				}
+			}) : e.type === "upload" ? /* @__PURE__ */ c("input", {
+				type: "file",
+				name: e.name,
+				accept: e.accept || void 0,
+				required: e.required || void 0,
+				disabled: r || void 0,
+				onChange: (t) => n(e.name, t.target.files?.[0]?.name ?? ""),
+				style: {
+					font: "inherit",
+					fontSize: 14
+				}
+			}) : /* @__PURE__ */ c("input", {
+				...a,
+				type: {
+					email: "email",
+					number: "number",
+					date: "date",
+					datetime: "datetime-local",
+					phone: "tel",
+					link: "url"
+				}[e.type] ?? "text"
+			}),
+			e.help && /* @__PURE__ */ c("span", {
+				style: {
+					fontSize: 12,
+					opacity: .65
+				},
+				children: e.help
+			})
+		]
+	});
+}
+function et({ style: e, action: t, method: i, name: a, enctype: u, formSlug: d, auto: f, submitLabel: m, nodeRef: h, inert: g, children: _, linked: v, show: y }) {
+	let { tenant: b, apiUrl: x } = n(V), [S, C] = o("form"), [w, T] = o(null), [E, D] = o({}), [O, k] = o(0), A = g ? y || "form" : S;
+	r(() => {
+		if (!f || !d) return;
+		let e = !0;
+		return fetch(`${x || "/api"}/forms/${encodeURIComponent(d)}`, { headers: b ? { "x-tenant": b } : {} }).then((e) => e.json()).then((t) => e && T(t?.payload ?? null)).catch(() => e && T(null)), () => {
+			e = !1;
+		};
+	}, [
+		f,
+		d,
+		b,
+		x
+	]);
+	let j = [{
+		section: null,
+		fields: []
+	}];
+	for (let e of w?.fields ?? []) e.type === "section" ? j.push({
+		section: e,
+		fields: []
+	}) : j[j.length - 1].fields.push(e);
+	let M = j.filter((e) => e.section || e.fields.length), N = M.filter((e) => !e.section || Xe(e.section.condition, E)).map((e) => ({
+		...e,
+		fields: e.fields.filter((e) => Xe(e.condition, E))
+	})), P = M.length > 1, F = Math.min(O, Math.max(0, N.length - 1)), I = P ? N[F]?.fields ?? [] : N.flatMap((e) => e.fields), L = I.filter((e) => {
+		let t = E[e.name];
+		return e.required && (t == null || t === "" || t === !1);
+	}), R = F >= N.length - 1, z = (e, t) => D((n) => ({
+		...n,
+		[e]: t
+	}));
 	return /* @__PURE__ */ l("div", {
-		ref: u,
+		ref: h,
 		style: p(e),
 		children: [
 			/* @__PURE__ */ c("form", {
 				action: t || void 0,
-				method: r || "post",
-				name: i || void 0,
-				encType: a || void 0,
+				method: i || "post",
+				name: a || void 0,
+				encType: u || void 0,
 				onSubmit: async (e) => {
-					if (e.preventDefault(), !d) {
-						if (s) {
+					if (e.preventDefault(), !g) {
+						if (d) {
 							let t = {};
-							for (let [n, r] of new FormData(e.currentTarget).entries()) typeof r == "string" && (t[n] = r === "on" || r);
+							if (f) for (let [e, n] of Object.entries(E)) n != null && n !== "" && (t[e] = n);
+							else for (let [n, r] of new FormData(e.currentTarget).entries()) typeof r == "string" && (t[n] = r === "on" || r);
 							try {
-								let e = await fetch(`${_ || "/api"}/forms/${s}/submit`, {
+								let e = await fetch(`${x || "/api"}/forms/${d}/submit`, {
 									method: "post",
 									headers: {
 										"content-type": "application/json",
-										...g ? { "x-tenant": g } : {}
+										...b ? { "x-tenant": b } : {}
 									},
 									body: JSON.stringify(t)
 								}), n = await e.json().catch(() => null);
-								y(e.ok && n?.success !== !1 ? "success" : "error");
+								C(e.ok && n?.success !== !1 ? "success" : "error");
 							} catch {
-								y("error");
+								C("error");
 							}
 							return;
 						}
 						if (!t) {
-							y("success");
+							C("success");
 							return;
 						}
 						try {
 							let n = await fetch(t, {
-								method: r || "post",
+								method: i || "post",
 								body: new FormData(e.currentTarget)
 							});
-							y(n.ok ? "success" : "error");
+							C(n.ok ? "success" : "error");
 						} catch {
-							y("error");
+							C("error");
 						}
 					}
 				},
 				style: {
 					...Ke,
-					display: b === "success" ? "none" : "flex"
+					display: A === "success" ? "none" : "flex"
 				},
-				children: f
+				children: f && d ? /* @__PURE__ */ l(s, { children: [
+					P && /* @__PURE__ */ c(ft, {
+						steps: N.map((e) => ({ label: e.section?.label ?? "Start" })),
+						active: F + 1,
+						style: { marginBottom: 8 }
+					}),
+					P && N[F]?.section?.help && /* @__PURE__ */ c("p", {
+						style: {
+							margin: 0,
+							fontSize: 14,
+							opacity: .7
+						},
+						children: N[F].section.help
+					}),
+					I.map((e) => /* @__PURE__ */ c($e, {
+						field: e,
+						value: E[e.name],
+						onChange: z,
+						inert: g
+					}, e.name)),
+					/* @__PURE__ */ l("div", {
+						style: {
+							display: "flex",
+							gap: 10,
+							alignItems: "center",
+							marginTop: 4
+						},
+						children: [P && F > 0 && /* @__PURE__ */ c("button", {
+							type: "button",
+							disabled: g || void 0,
+							onClick: () => k(F - 1),
+							style: {
+								...J,
+								background: "transparent",
+								color: "inherit",
+								border: 0,
+								padding: "10px 16px",
+								cursor: "pointer"
+							},
+							children: "Back"
+						}), P && !R ? /* @__PURE__ */ c("button", {
+							type: "button",
+							disabled: g || L.length > 0,
+							onClick: () => k(F + 1),
+							style: {
+								...J,
+								border: 0,
+								padding: "10px 22px",
+								borderRadius: 8,
+								fontSize: 15,
+								fontWeight: 600,
+								cursor: "pointer",
+								opacity: L.length ? .5 : 1
+							},
+							children: "Next"
+						}) : /* @__PURE__ */ c("button", {
+							type: "submit",
+							disabled: g || void 0,
+							style: {
+								...J,
+								border: 0,
+								padding: "10px 22px",
+								borderRadius: 8,
+								fontSize: 15,
+								fontWeight: 600,
+								cursor: "pointer"
+							},
+							children: m || "Submit"
+						})]
+					})
+				] }) : _
 			}),
 			/* @__PURE__ */ c("div", {
-				style: { display: b === "success" ? "block" : "none" },
-				children: m?.success ?? null
+				style: { display: A === "success" ? "block" : "none" },
+				children: v?.success ?? null
 			}),
 			/* @__PURE__ */ c("div", {
 				style: {
-					display: b === "error" ? "block" : "none",
+					display: A === "error" ? "block" : "none",
 					marginTop: 12
 				},
-				children: m?.error ?? null
+				children: v?.error ?? null
 			})
 		]
 	});
 }
-function Ze({ text: e, parts: t, style: n, nodeRef: r, linked: i }) {
+function tt({ text: e, parts: t, style: n, nodeRef: r, linked: i }) {
 	return /* @__PURE__ */ c("label", {
 		ref: r,
 		style: {
@@ -1528,7 +1797,7 @@ function Ze({ text: e, parts: t, style: n, nodeRef: r, linked: i }) {
 		children: X(t, e, i)
 	});
 }
-function Qe({ type: e = "text", name: t, placeholder: n, required: r, style: i, nodeRef: a, inert: o }) {
+function nt({ type: e = "text", name: t, placeholder: n, required: r, style: i, nodeRef: a, inert: o }) {
 	return /* @__PURE__ */ c("input", {
 		ref: a,
 		type: e,
@@ -1542,7 +1811,7 @@ function Qe({ type: e = "text", name: t, placeholder: n, required: r, style: i,
 		...Ye(o)
 	});
 }
-function $e({ name: e, placeholder: t, rows: n = 4, required: r, style: i, nodeRef: a, inert: o }) {
+function rt({ name: e, placeholder: t, rows: n = 4, required: r, style: i, nodeRef: a, inert: o }) {
 	return /* @__PURE__ */ c("textarea", {
 		ref: a,
 		name: e || void 0,
@@ -1557,7 +1826,7 @@ function $e({ name: e, placeholder: t, rows: n = 4, required: r, style: i, nodeR
 		...Ye(o)
 	});
 }
-function et({ kind: e = "checkbox", label: t, name: n, value: r, required: i, style: a, nodeRef: o, inert: s }) {
+function it({ kind: e = "checkbox", label: t, name: n, value: r, required: i, style: a, nodeRef: o, inert: s }) {
 	return /* @__PURE__ */ l("label", {
 		ref: o,
 		style: {
@@ -1578,7 +1847,7 @@ function et({ kind: e = "checkbox", label: t, name: n, value: r, required: i, st
 		}), t]
 	});
 }
-function tt({ name: e, placeholder: t, options: n = [], required: r, style: i, nodeRef: a, inert: o }) {
+function at({ name: e, placeholder: t, options: n = [], required: r, style: i, nodeRef: a, inert: o }) {
 	return /* @__PURE__ */ l("select", {
 		ref: a,
 		name: e || void 0,
@@ -1601,7 +1870,7 @@ function tt({ name: e, placeholder: t, options: n = [], required: r, style: i, n
 		}, t))]
 	});
 }
-function nt({ name: e, accept: t, required: n, text: r = "Choose a file…", style: i, nodeRef: a, inert: s }) {
+function ot({ name: e, accept: t, required: n, text: r = "Choose a file…", style: i, nodeRef: a, inert: s }) {
 	let [u, d] = o(null);
 	return /* @__PURE__ */ l("label", {
 		ref: a,
@@ -1633,7 +1902,7 @@ function nt({ name: e, accept: t, required: n, text: r = "Choose a file…", sty
 		]
 	});
 }
-function rt({ text: e = "Submit", style: t, nodeRef: n, inert: r }) {
+function st({ text: e = "Submit", style: t, nodeRef: n, inert: r }) {
 	return /* @__PURE__ */ c("button", {
 		ref: n,
 		type: r ? "button" : "submit",
@@ -1653,7 +1922,7 @@ function rt({ text: e = "Submit", style: t, nodeRef: n, inert: r }) {
 		children: e
 	});
 }
-function it({ cols: e = 2, rows: t = 1, style: n, nodeRef: r, linked: i }) {
+function ct({ cols: e = 2, rows: t = 1, style: n, nodeRef: r, linked: i }) {
 	let a = Math.max(1, (Number(e) || 1) * (Number(t) || 1));
 	return /* @__PURE__ */ c("div", {
 		ref: r,
@@ -1670,8 +1939,8 @@ function it({ cols: e = 2, rows: t = 1, style: n, nodeRef: r, linked: i }) {
 		}, t))
 	});
 }
-function at({ collection: e, limit: t = 6, layout: i = "grid", columns: a = 3, imageField: s, titleField: u = "name", textField: d, custom: f, templateId: m, style: h, nodeRef: g }) {
-	let { tenant: _, apiUrl: v } = n(B), y = n(H), b = n(V)?.[e], [x, S] = o(null);
+function lt({ collection: e, limit: t = 6, layout: i = "grid", columns: a = 3, imageField: s, titleField: u = "name", textField: d, custom: f, templateId: m, style: h, nodeRef: g }) {
+	let { tenant: _, apiUrl: v } = n(V), y = n(U), b = n(H)?.[e], [x, S] = o(null);
 	if (r(() => {
 		if (!e || b) return;
 		let t = !0, n = e.startsWith("api:") ? `${v}/data/${encodeURIComponent(e.slice(4))}` : `${v}/dynamic/${encodeURIComponent(e)}`;
@@ -1712,7 +1981,7 @@ function at({ collection: e, limit: t = 6, layout: i = "grid", columns: a = 3, i
 			...p(h)
 		},
 		children: C.map((e) => {
-			let t = s ? U(e?.data, s) : null, n = u ? G(U(e?.data, u)) : null, r = d ? U(e?.data, d) : null, a = Array.isArray(r) ? r : null, o = a || r == null ? null : G(r), f = i === "list";
+			let t = s ? W(e?.data, s) : null, n = u ? G(W(e?.data, u)) : null, r = d ? W(e?.data, d) : null, a = Array.isArray(r) ? r : null, o = a || r == null ? null : G(r), f = i === "list";
 			return /* @__PURE__ */ l("div", {
 				style: {
 					display: "flex",
@@ -1767,7 +2036,7 @@ function at({ collection: e, limit: t = 6, layout: i = "grid", columns: a = 3, i
 		})
 	});
 }
-function ot({ items: e = [], separator: t = "/", style: n, nodeRef: r }) {
+function ut({ items: e = [], separator: t = "/", style: n, nodeRef: r }) {
 	return e.length ? /* @__PURE__ */ c("nav", {
 		ref: r,
 		"aria-label": "Breadcrumb",
@@ -1817,7 +2086,7 @@ function ot({ items: e = [], separator: t = "/", style: n, nodeRef: r }) {
 		})
 	}) : null;
 }
-function st({ pages: e = 5, current: t = 1, prevNext: n = !0, href: r = "#", style: i, nodeRef: a }) {
+function dt({ pages: e = 5, current: t = 1, prevNext: n = !0, href: r = "#", style: i, nodeRef: a }) {
 	let o = Math.min(Math.max(Number(e) || 1, 1), 50), s = Math.min(Math.max(Number(t) || 1, 1), o), u = (e) => r && r !== "#" ? r.replace("{page}", String(e)) : "#", d = (e) => ({
 		display: "inline-flex",
 		alignItems: "center",
@@ -1870,7 +2139,7 @@ function st({ pages: e = 5, current: t = 1, prevNext: n = !0, href: r = "#", sty
 		]
 	});
 }
-function ct({ steps: t = [], active: n = 1, vertical: r = !1, style: i, nodeRef: a }) {
+function ft({ steps: t = [], active: n = 1, vertical: r = !1, style: i, nodeRef: a }) {
 	if (!t.length) return null;
 	let o = Math.min(Math.max(Number(n) || 1, 1), t.length), s = (e) => ({
 		width: 32,
@@ -1948,46 +2217,58 @@ function ct({ steps: t = [], active: n = 1, vertical: r = !1, style: i, nodeRef:
 		})
 	});
 }
-function lt({ columns: e = [], rows: t = [], striped: n = !0, bordered: r = !1, compact: i = !1, style: a, nodeRef: o }) {
-	if (!e.length) return null;
-	let s = i ? "6px 10px" : "10px 14px", u = "1px solid rgba(148, 163, 184, 0.35)", d = r ? { border: u } : { borderBottom: u };
+function pt({ columns: e = [], rows: t = [], source: i, limit: a = 10, striped: s = !0, bordered: u = !1, compact: d = !1, style: f, nodeRef: m }) {
+	let { tenant: h, apiUrl: g } = n(V), _ = n(H)?.[i], [v, y] = o(null);
+	if (r(() => {
+		if (!i || _) return;
+		let e = !0, t = i.startsWith("api:") ? `${g}/data/${encodeURIComponent(i.slice(4))}` : `${g}/dynamic/${encodeURIComponent(i)}`;
+		return fetch(t, { headers: h ? { "x-tenant": h } : {} }).then((e) => e.json()).then((t) => e && y(Array.isArray(t?.payload) ? t.payload : [])).catch(() => e && y([])), () => {
+			e = !1;
+		};
+	}, [
+		i,
+		h,
+		g,
+		_
+	]), !e.length) return null;
+	let b = i ? (_ ?? v ?? []).slice(0, Math.max(1, Number(a) || 10)) : null, x = b ? b.map((t) => e.map((e) => G(W(t?.data, e.field)))) : t, S = d ? "6px 10px" : "10px 14px", C = "1px solid rgba(148, 163, 184, 0.35)", w = u ? { border: C } : { borderBottom: C };
 	return /* @__PURE__ */ c("div", {
-		ref: o,
+		ref: m,
 		style: {
 			width: "100%",
 			overflowX: "auto",
-			...p(a)
+			...p(f)
 		},
 		children: /* @__PURE__ */ l("table", {
 			style: {
 				width: "100%",
 				borderCollapse: "collapse",
 				fontSize: 14,
-				...r ? { border: u } : {}
+				...u ? { border: C } : {}
 			},
 			children: [/* @__PURE__ */ c("thead", { children: /* @__PURE__ */ c("tr", { children: e.map((e, t) => /* @__PURE__ */ c("th", {
 				style: {
 					textAlign: "left",
 					fontWeight: 600,
-					padding: s,
+					padding: S,
 					background: "rgba(148, 163, 184, 0.12)",
-					...d
+					...w
 				},
 				children: e.label ?? e
-			}, t)) }) }), /* @__PURE__ */ c("tbody", { children: t.map((t, r) => /* @__PURE__ */ c("tr", {
-				style: n && r % 2 == 1 ? { background: "rgba(148, 163, 184, 0.07)" } : void 0,
+			}, t)) }) }), /* @__PURE__ */ c("tbody", { children: x.map((t, n) => /* @__PURE__ */ c("tr", {
+				style: s && n % 2 == 1 ? { background: "rgba(148, 163, 184, 0.07)" } : void 0,
 				children: e.map((e, n) => /* @__PURE__ */ c("td", {
 					style: {
-						padding: s,
-						...d
+						padding: S,
+						...w
 					},
 					children: t?.[n] ?? ""
 				}, n))
-			}, r)) })]
+			}, n)) })]
 		})
 	});
 }
-var ut = {
+var mt = {
 	PageRoot: le,
 	Section: ue,
 	Container: de,
@@ -2000,12 +2281,12 @@ var ut = {
 	SliderBlock: Be,
 	CanvasSlider: Ve,
 	TabsBlock: We,
-	QuickStack: it,
-	CollectionList: at,
-	BreadcrumbsBlock: ot,
-	PaginationBlock: st,
-	StepperBlock: ct,
-	TableBlock: lt,
+	QuickStack: ct,
+	CollectionList: lt,
+	BreadcrumbsBlock: ut,
+	PaginationBlock: dt,
+	StepperBlock: ft,
+	TableBlock: pt,
 	AccordionBlock: Ge,
 	NavbarBlock: Ue,
 	ListBlock: Se,
@@ -2018,21 +2299,21 @@ var ut = {
 	YouTubeBlock: Ae,
 	IframeBlock: je,
 	EmbedBlock: Me,
-	FormBlock: Xe,
-	FormLabel: Ze,
-	FormInput: Qe,
-	FormTextarea: $e,
-	FormCheckbox: (e) => /* @__PURE__ */ c(et, {
+	FormBlock: et,
+	FormLabel: tt,
+	FormInput: nt,
+	FormTextarea: rt,
+	FormCheckbox: (e) => /* @__PURE__ */ c(it, {
 		kind: "checkbox",
 		...e
 	}),
-	FormRadio: (e) => /* @__PURE__ */ c(et, {
+	FormRadio: (e) => /* @__PURE__ */ c(it, {
 		kind: "radio",
 		...e
 	}),
-	FormSelect: tt,
-	FormFile: nt,
-	FormSubmit: rt
+	FormSelect: at,
+	FormFile: ot,
+	FormSubmit: st
 };
 //#endregion
 //#region ../ui/src/components/builder/render.jsx
@@ -2046,7 +2327,7 @@ function $(t, n, r, i = /* @__PURE__ */ new Set(), a = void 0) {
 		let l = new Set(i).add(n);
 		return /* @__PURE__ */ c(e, { children: $(s.template.rootId, s.template.nodes, r, l, a) }, t);
 	}
-	let u = ut[s];
+	let u = mt[s];
 	if (!u) return null;
 	let d = (o.nodes ?? []).map((e) => $(e, n, r, i, a)).filter(Boolean), f = Object.entries(o.linkedNodes ?? {}), p = f.length ? Object.fromEntries(f.map(([e, t]) => [e, $(t, n, r, i)])) : void 0;
 	return /* @__PURE__ */ c(u, {
@@ -2061,8 +2342,8 @@ function $(t, n, r, i = /* @__PURE__ */ new Set(), a = void 0) {
 }
 //#endregion
 //#region ../ui/src/components/builder/PageRenderer.jsx
-var dt = (e) => Object.entries(e).map(([e, t]) => `${e}: ${t};`).join(" ");
-function ft({ blocks: e, theme: t, components: n, mode: a = "auto", style: o, custom: s, tenant: u, apiUrl: d, datasets: f }) {
+var ht = (e) => Object.entries(e).map(([e, t]) => `${e}: ${t};`).join(" ");
+function gt({ blocks: e, theme: t, components: n, mode: a = "auto", style: o, custom: s, tenant: u, apiUrl: d, datasets: f }) {
 	let p = s?.js?.trim();
 	if (r(() => {
 		if (!p) return;
@@ -2073,24 +2354,24 @@ function ft({ blocks: e, theme: t, components: n, mode: a = "auto", style: o, cu
 		minHeight: "100%",
 		display: "flex",
 		flexDirection: "column"
-	}, h = $("ROOT", e, n), g = i(() => ({ render: (t, r) => $(t, e, n, void 0, { mapProps: r }) }), [e, n]), _ = T(e, n), v = w(e, n), y = s?.css?.trim(), b = z(e, n).map((e) => /* @__PURE__ */ c("link", {
+	}, h = $("ROOT", e, n), g = i(() => ({ render: (t, r) => $(t, e, n, void 0, { mapProps: r }) }), [e, n]), _ = T(e, n), v = w(e, n), y = s?.css?.trim(), b = B(e, n).map((e) => /* @__PURE__ */ c("link", {
 		rel: "stylesheet",
 		precedence: "default",
-		href: re(e)
+		href: te(e)
 	}, e));
-	if (a !== "auto") return /* @__PURE__ */ c(B.Provider, {
+	if (a !== "auto") return /* @__PURE__ */ c(V.Provider, {
 		value: {
 			tenant: u || "",
 			apiUrl: d || "/api"
 		},
-		children: /* @__PURE__ */ c(V.Provider, {
+		children: /* @__PURE__ */ c(H.Provider, {
 			value: f ?? null,
-			children: /* @__PURE__ */ c(H.Provider, {
+			children: /* @__PURE__ */ c(U.Provider, {
 				value: g,
 				children: /* @__PURE__ */ l("div", {
 					style: {
 						...m,
-						...P(t, a),
+						...F(t, a),
 						...o
 					},
 					children: [
@@ -2105,25 +2386,25 @@ function ft({ blocks: e, theme: t, components: n, mode: a = "auto", style: o, cu
 		})
 	});
 	let x = M(t);
-	return /* @__PURE__ */ c(B.Provider, {
+	return /* @__PURE__ */ c(V.Provider, {
 		value: {
 			tenant: u || "",
 			apiUrl: d || "/api"
 		},
-		children: /* @__PURE__ */ c(V.Provider, {
+		children: /* @__PURE__ */ c(H.Provider, {
 			value: f ?? null,
-			children: /* @__PURE__ */ c(H.Provider, {
+			children: /* @__PURE__ */ c(U.Provider, {
 				value: g,
 				children: /* @__PURE__ */ l("div", {
 					className: "webim-page",
 					style: {
 						...m,
-						...ee(t),
+						...P(t),
 						...o
 					},
 					children: [
-						/* @__PURE__ */ c("style", { children: `.webim-page { ${dt(N(x.light))} }
-@media (prefers-color-scheme: dark) { .webim-page { ${dt(N(x.dark))} } }` }),
+						/* @__PURE__ */ c("style", { children: `.webim-page { ${ht(N(x.light))} }
+@media (prefers-color-scheme: dark) { .webim-page { ${ht(N(x.dark))} } }` }),
 						b,
 						_ && /* @__PURE__ */ c("style", { children: _ }),
 						v && /* @__PURE__ */ c("style", { children: v }),
@@ -2137,8 +2418,8 @@ function ft({ blocks: e, theme: t, components: n, mode: a = "auto", style: o, cu
 }
 //#endregion
 //#region src/WebimContent.jsx
-function pt({ bundle: e, mode: t = "auto", style: n }) {
-	return e?.blocks?.ROOT ? /* @__PURE__ */ c(ft, {
+function _t({ bundle: e, mode: t = "auto", style: n }) {
+	return e?.blocks?.ROOT ? /* @__PURE__ */ c(gt, {
 		blocks: e.blocks,
 		theme: e.theme,
 		components: e.components,
@@ -2152,7 +2433,7 @@ function pt({ bundle: e, mode: t = "auto", style: n }) {
 }
 //#endregion
 //#region src/WebimPage.jsx
-function mt({ apiUrl: e, tenant: t, slug: n, locale: i, preview: s, mode: l = "auto", style: u, fallback: d = null, errorFallback: f = null, onLoad: p, onError: m }) {
+function vt({ apiUrl: e, tenant: t, slug: n, locale: i, preview: s, mode: l = "auto", style: u, fallback: d = null, errorFallback: f = null, onLoad: p, onError: m }) {
 	let [h, g] = o({ status: "loading" }), _ = a({
 		onLoad: p,
 		onError: m
@@ -2162,7 +2443,7 @@ function mt({ apiUrl: e, tenant: t, slug: n, locale: i, preview: s, mode: l = "a
 		onError: m
 	}, r(() => {
 		let r = !0;
-		return g({ status: "loading" }), L({
+		return g({ status: "loading" }), z({
 			apiUrl: e,
 			tenant: t,
 			slug: n,
@@ -2187,11 +2468,11 @@ function mt({ apiUrl: e, tenant: t, slug: n, locale: i, preview: s, mode: l = "a
 		n,
 		i,
 		s
-	]), h.status === "loading" ? d : h.status === "error" ? typeof f == "function" ? f(h.error) : f : /* @__PURE__ */ c(pt, {
+	]), h.status === "loading" ? d : h.status === "error" ? typeof f == "function" ? f(h.error) : f : /* @__PURE__ */ c(_t, {
 		bundle: h.bundle,
 		mode: l,
 		style: u
 	});
 }
 //#endregion
-export { ft as PageRenderer, pt as WebimContent, mt as WebimPage, L as fetchPage, ve as renderRichContent, F as resolveTheme };
+export { gt as PageRenderer, _t as WebimContent, vt as WebimPage, z as fetchPage, ve as renderRichContent, I as resolveTheme };