@10x-media/form-builder 0.1.0-beta.0 → 0.1.0-beta.1

package/dist/presentations/defaults.js

@@ -0,0 +1,35 @@
+import { keys } from "../translations/keys.js";
+//#region src/presentations/defaults.ts
+const DEFAULT_PRESENTATION_NAME = "page";
+const defaultPresentationDescriptors = {
+	page: {
+		name: "page",
+		label: keys.presentationPage,
+		surface: "page",
+		density: "comfortable"
+	},
+	inline: {
+		name: "inline",
+		label: keys.presentationInline,
+		surface: "inline",
+		density: "comfortable"
+	},
+	modal: {
+		name: "modal",
+		label: keys.presentationModal,
+		surface: "overlay",
+		density: "comfortable",
+		dismissOnSuccess: true
+	},
+	drawer: {
+		name: "drawer",
+		label: keys.presentationDrawer,
+		surface: "overlay",
+		density: "comfortable",
+		dismissOnSuccess: true
+	}
+};
+//#endregion
+export { DEFAULT_PRESENTATION_NAME, defaultPresentationDescriptors };
+
+//# sourceMappingURL=defaults.js.map

package/dist/presentations/defaults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.js","names":[],"sources":["../../src/presentations/defaults.ts"],"sourcesContent":["import { keys } from '../translations/keys'\nimport type { PresentationDescriptor } from './types'\n\nexport const DEFAULT_PRESENTATION_NAME = 'page'\n\nexport const defaultPresentationDescriptors = {\n\tpage: { name: 'page', label: keys.presentationPage, surface: 'page', density: 'comfortable' },\n\tinline: {\n\t\tname: 'inline',\n\t\tlabel: keys.presentationInline,\n\t\tsurface: 'inline',\n\t\tdensity: 'comfortable',\n\t},\n\tmodal: {\n\t\tname: 'modal',\n\t\tlabel: keys.presentationModal,\n\t\tsurface: 'overlay',\n\t\tdensity: 'comfortable',\n\t\tdismissOnSuccess: true,\n\t},\n\tdrawer: {\n\t\tname: 'drawer',\n\t\tlabel: keys.presentationDrawer,\n\t\tsurface: 'overlay',\n\t\tdensity: 'comfortable',\n\t\tdismissOnSuccess: true,\n\t},\n} satisfies Record<string, PresentationDescriptor>\n"],"mappings":";;AAGA,MAAa,4BAA4B;AAEzC,MAAa,iCAAiC;CAC7C,MAAM;EAAE,MAAM;EAAQ,OAAO,KAAK;EAAkB,SAAS;EAAQ,SAAS;CAAc;CAC5F,QAAQ;EACP,MAAM;EACN,OAAO,KAAK;EACZ,SAAS;EACT,SAAS;CACV;CACA,OAAO;EACN,MAAM;EACN,OAAO,KAAK;EACZ,SAAS;EACT,SAAS;EACT,kBAAkB;CACnB;CACA,QAAQ;EACP,MAAM;EACN,OAAO,KAAK;EACZ,SAAS;EACT,SAAS;EACT,kBAAkB;CACnB;AACD"}

package/dist/presentations/registry.d.ts

@@ -0,0 +1,15 @@
+import { PresentationDescriptor } from "./types.js";
+
+//#region src/presentations/registry.d.ts
+type PresentationDescriptorRegistry = Map<string, PresentationDescriptor>;
+/** Per-name override: `false` removes, `true` keeps the default, a descriptor adds or replaces one. */
+type PresentationDescriptorOption = boolean | PresentationDescriptor;
+type PresentationsDescriptorConfig = Record<string, PresentationDescriptorOption>;
+/**
+ * Resolve the active presentation descriptors from the defaults and a consumer override map.
+ * Mirrors the field-type, validation-rule, and renderer registry convention.
+ */
+declare const resolvePresentationDescriptors: (defaults: Record<string, PresentationDescriptor>, config?: PresentationsDescriptorConfig) => PresentationDescriptorRegistry;
+//#endregion
+export { PresentationDescriptorOption, PresentationDescriptorRegistry, PresentationsDescriptorConfig, resolvePresentationDescriptors };
+//# sourceMappingURL=registry.d.ts.map

package/dist/presentations/registry.js

@@ -0,0 +1,15 @@
+//#region src/presentations/registry.ts
+/**
+* Resolve the active presentation descriptors from the defaults and a consumer override map.
+* Mirrors the field-type, validation-rule, and renderer registry convention.
+*/
+const resolvePresentationDescriptors = (defaults, config = {}) => {
+	const registry = new Map(Object.entries(defaults));
+	for (const [name, option] of Object.entries(config)) if (option === false) registry.delete(name);
+	else if (option === true) {} else registry.set(name, option);
+	return registry;
+};
+//#endregion
+export { resolvePresentationDescriptors };
+
+//# sourceMappingURL=registry.js.map

package/dist/presentations/registry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.js","names":[],"sources":["../../src/presentations/registry.ts"],"sourcesContent":["import type { PresentationDescriptor } from './types'\n\nexport type PresentationDescriptorRegistry = Map<string, PresentationDescriptor>\n\n/** Per-name override: `false` removes, `true` keeps the default, a descriptor adds or replaces one. */\nexport type PresentationDescriptorOption = boolean | PresentationDescriptor\n\nexport type PresentationsDescriptorConfig = Record<string, PresentationDescriptorOption>\n\n/**\n * Resolve the active presentation descriptors from the defaults and a consumer override map.\n * Mirrors the field-type, validation-rule, and renderer registry convention.\n */\nexport const resolvePresentationDescriptors = (\n\tdefaults: Record<string, PresentationDescriptor>,\n\tconfig: PresentationsDescriptorConfig = {}\n): PresentationDescriptorRegistry => {\n\tconst registry: PresentationDescriptorRegistry = new Map(Object.entries(defaults))\n\tfor (const [name, option] of Object.entries(config)) {\n\t\tif (option === false) {\n\t\t\tregistry.delete(name)\n\t\t} else if (option === true) {\n\t\t\t// keep the default; no-op when no default exists for this name\n\t\t} else {\n\t\t\tregistry.set(name, option)\n\t\t}\n\t}\n\treturn registry\n}\n"],"mappings":";;;;;AAaA,MAAa,kCACZ,UACA,SAAwC,CAAC,MACL;CACpC,MAAM,WAA2C,IAAI,IAAI,OAAO,QAAQ,QAAQ,CAAC;CACjF,KAAK,MAAM,CAAC,MAAM,WAAW,OAAO,QAAQ,MAAM,GACjD,IAAI,WAAW,OACd,SAAS,OAAO,IAAI;MACd,IAAI,WAAW,MAAM,CAE5B,OACC,SAAS,IAAI,MAAM,MAAM;CAG3B,OAAO;AACR"}

package/dist/presentations/types.d.ts

@@ -0,0 +1,18 @@
+//#region src/presentations/types.d.ts
+/** How a presentation surfaces the form. Drives wrapper selection and CSS. */
+type PresentationSurface = 'inline' | 'page' | 'overlay';
+type PresentationDensity = 'comfortable' | 'compact';
+/**
+ * Serializable, framework-agnostic description of a presentation. The admin select and the
+ * stored `defaultPresentation` use only this; the React `Wrapper` is added in `./react`. No React here.
+ */
+type PresentationDescriptor = {
+  name: string; /** i18n key or literal shown in the admin select. */
+  label: string;
+  surface: PresentationSurface;
+  density: PresentationDensity; /** Overlay surfaces request dismissal after a successful submit. */
+  dismissOnSuccess?: boolean;
+};
+//#endregion
+export { PresentationDensity, PresentationDescriptor, PresentationSurface };
+//# sourceMappingURL=types.d.ts.map

package/dist/react/Form.d.ts

@@ -0,0 +1,81 @@
+import { AnyFormFieldDefinition } from "../fields/types.js";
+import { FormFieldInstance } from "../submissions/types.js";
+import { FormFlow } from "../flow/types.js";
+import { RendererTranslate } from "./contract.js";
+import { FormEventSink } from "../events/types.js";
+import { AnyValidationRuleDefinition } from "../validation/types.js";
+import { FormPresentation } from "./presentation/types.js";
+import { PresentationsConfig } from "./presentation/registry.js";
+import { RenderersConfig } from "./registry.js";
+import { SubmitHandler } from "./submitForm.js";
+import { ReactNode } from "react";
+
+//#region src/react/Form.d.ts
+type FormDocument = {
+  id: number | string;
+  fields: FormFieldInstance[];
+  flow?: FormFlow; /** Stored presentation name; overridden by the `presentation` prop. */
+  defaultPresentation?: string;
+};
+type FormProps = {
+  form: FormDocument;
+  fieldTypes?: AnyFormFieldDefinition[];
+  rules?: AnyValidationRuleDefinition[];
+  renderers?: RenderersConfig;
+  apiRoute?: string;
+  onSubmit?: SubmitHandler;
+  onSuccess?: (submissionId?: string) => void;
+  onError?: (message: string) => void;
+  events?: FormEventSink;
+  t?: RendererTranslate;
+  locale?: string;
+  layout?: boolean;
+  submitLabel?: string;
+  nextLabel?: string;
+  backLabel?: string; /** Label for the overlay close control (modal/drawer). */
+  closeLabel?: string;
+  successMessage?: string; /** Active presentation: a name into the registry or an inline presentation. Overrides the form's stored default. */
+  presentation?: string | FormPresentation; /** Per-render presentation overrides merged onto the defaults (add, replace, or `false` to remove). */
+  presentations?: PresentationsConfig; /** Invoked when an overlay presentation dismisses (close button, Escape, outside click, or `dismissOnSuccess`). */
+  onClose?: () => void; /** Accessible name for an overlay surface. */
+  title?: string; /** Seed initial field values (e.g. from `valuesFromSearchParams`). Still validated on submit. */
+  initialValues?: Record<string, unknown>; /** Honeypot decoy (on by default). `false` removes it; `{ name }` matches a customized server `spam.honeypot.fieldName`. */
+  honeypot?: false | {
+    name?: string;
+  }; /** A token from your captcha widget; verified server-side when a captcha provider is configured. */
+  captchaToken?: string; /** Custom layout: render fields with `useField`/`useFormState` instead of the auto-rendered field loop. */
+  children?: ReactNode; /** Additional CSS class names applied to the root `<form>` element (and the success node). */
+  className?: string;
+};
+/** The headless form controller: state, progressive client validation, conditional visibility, submission, events. */
+declare const Form: ({
+  form,
+  fieldTypes,
+  rules,
+  renderers,
+  apiRoute,
+  onSubmit,
+  onSuccess,
+  onError,
+  events,
+  t,
+  locale,
+  layout,
+  submitLabel,
+  nextLabel,
+  backLabel,
+  closeLabel,
+  successMessage,
+  presentation,
+  presentations,
+  onClose,
+  title,
+  initialValues,
+  honeypot,
+  captchaToken,
+  children,
+  className
+}: FormProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Form, FormDocument, FormProps };
+//# sourceMappingURL=Form.d.ts.map

package/dist/react/Form.js

@@ -0,0 +1,457 @@
+"use client";
+import { interpolate } from "../recall/interpolate.js";
+import { noopEventSink } from "../events/noopSink.js";
+import { CAPTCHA_TOKEN_KEY } from "../spam/constants.js";
+import { defaultPresentationDescriptors } from "../presentations/defaults.js";
+import { calcExpressionOf, computeCalcFields } from "../calc/computeCalcFields.js";
+import { evaluateCondition } from "../conditions/evaluate.js";
+import { en } from "../translations/en.js";
+import { buildRecallResolver } from "../recall/resolver.js";
+import { firstStepId, isTerminalStepId, resolveNextStepId, stepFieldNames } from "../flow/engine.js";
+import { cn } from "./cn.js";
+import { makeTranslate } from "../translations/makeTranslate.js";
+import { emitFormEvent } from "./events.js";
+import { FormContext } from "./FormContext.js";
+import { FormLayout, widthProps } from "./FormLayout.js";
+import { Honeypot } from "./Honeypot.js";
+import { defaultPresentations } from "./presentation/presentations.js";
+import { resolvePresentations } from "./presentation/registry.js";
+import { applyRecall } from "./recall.js";
+import { resolveRenderers } from "./registry.js";
+import { defaultRenderers } from "./renderers/index.js";
+import { buildFieldTypeRegistry, buildValidationRuleRegistry, visibleFields } from "./resolveForm.js";
+import { formReducer, initialFormState } from "./state.js";
+import { submitForm } from "./submitForm.js";
+import { useField } from "./useField.js";
+import { validateFieldValue } from "./validateField.js";
+import { createElement, useCallback, useEffect, useId, useMemo, useReducer, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/Form.tsx
+const isEmpty = (value) => value == null || value === "" || Array.isArray(value) && value.length === 0;
+const FIELD_WIDTHS = new Set([
+	"full",
+	"half",
+	"third",
+	"twoThirds"
+]);
+const FieldHost = ({ field, renderer, locale, t }) => {
+	const id = useId();
+	const { value, errors, warnings, setValue, onBlur } = useField(field.name);
+	return createElement(renderer, {
+		field,
+		id,
+		name: field.name,
+		value,
+		onChange: setValue,
+		onBlur,
+		errors,
+		warnings,
+		required: Boolean(field.required),
+		locale,
+		t
+	});
+};
+/** Hosts a derived (calc) field: read-only, value supplied from `effectiveValues`, never bound via `useField`. */
+const CalcFieldHost = ({ field, renderer, value, locale, t }) => {
+	return createElement(renderer, {
+		field,
+		id: useId(),
+		name: field.name,
+		value,
+		onChange: () => {},
+		onBlur: () => {},
+		errors: [],
+		warnings: [],
+		required: false,
+		disabled: true,
+		locale,
+		t
+	});
+};
+/** The headless form controller: state, progressive client validation, conditional visibility, submission, events. */
+const Form = ({ form, fieldTypes, rules, renderers, apiRoute, onSubmit, onSuccess, onError, events, t, locale = "en", layout, submitLabel = "Submit", nextLabel = "Next", backLabel = "Back", closeLabel = "Close", successMessage = "Thank you.", presentation, presentations, onClose, title, initialValues, honeypot, captchaToken, children, className }) => {
+	const honeypotName = honeypot === false ? null : honeypot?.name ?? "website";
+	const honeypotRef = useRef(null);
+	const registry = useMemo(() => buildFieldTypeRegistry(fieldTypes), [fieldTypes]);
+	const ruleRegistry = useMemo(() => buildValidationRuleRegistry(rules), [rules]);
+	const rendererRegistry = useMemo(() => resolveRenderers(defaultRenderers, renderers), [renderers]);
+	const presentationRegistry = useMemo(() => resolvePresentations(defaultPresentations, presentations), [presentations]);
+	const activePresentation = typeof presentation === "object" ? presentation : presentationRegistry.get(presentation ?? form.defaultPresentation ?? "page") ?? presentationRegistry.get("page") ?? defaultPresentationDescriptors.page;
+	const fieldsByName = useMemo(() => new Map(form.fields.map((field) => [field.name, field])), [form.fields]);
+	const translate = useMemo(() => t ?? makeTranslate(en), [t]);
+	const sinkRef = useRef(noopEventSink);
+	sinkRef.current = events ?? noopEventSink;
+	const formIdRef = useRef("");
+	formIdRef.current = String(form.id);
+	const [state, rawDispatch] = useReducer(formReducer, form.fields, (fields) => initialFormState({
+		...Object.fromEntries(fields.map((field) => [field.name, void 0])),
+		...initialValues ?? {}
+	}));
+	const effectiveValues = useMemo(() => computeCalcFields(form.fields, state.values), [form.fields, state.values]);
+	const recall = useMemo(() => buildRecallResolver({
+		fields: form.fields,
+		values: effectiveValues,
+		registry,
+		locale,
+		t: translate
+	}), [
+		form.fields,
+		effectiveValues,
+		registry,
+		locale,
+		translate
+	]);
+	const flow = form.flow && form.flow.steps.length >= 2 ? form.flow : void 0;
+	const [currentStepId, setCurrentStepId] = useState(() => flow ? firstStepId(flow) : void 0);
+	const [history, setHistory] = useState([]);
+	const startedRef = useRef(false);
+	const submittedRef = useRef(false);
+	const submittingRef = useRef(false);
+	const flowRef = useRef(flow);
+	flowRef.current = flow;
+	const dispatch = useCallback((action) => {
+		if (action.type === "SET_VALUE" && !startedRef.current) {
+			startedRef.current = true;
+			emitFormEvent(sinkRef.current, formIdRef.current, { type: "form.started" });
+		}
+		rawDispatch(action);
+	}, []);
+	const validateField = useCallback((name, value) => {
+		const field = fieldsByName.get(name);
+		if (!field) return;
+		const answers = {
+			...effectiveValues,
+			[name]: value
+		};
+		if (!evaluateCondition(field.validateWhen, answers)) {
+			rawDispatch({
+				type: "SET_FIELD_ISSUES",
+				name,
+				errors: [],
+				warnings: []
+			});
+			return;
+		}
+		validateFieldValue({
+			field,
+			value,
+			registry,
+			ruleRegistry,
+			answers,
+			locale,
+			t: translate
+		}).then(({ errors, warnings }) => {
+			rawDispatch({
+				type: "SET_FIELD_ISSUES",
+				name,
+				errors,
+				warnings
+			});
+			const [firstError] = errors;
+			if (firstError !== void 0) emitFormEvent(sinkRef.current, formIdRef.current, {
+				type: "field.errored",
+				field: name,
+				message: firstError
+			});
+		});
+	}, [
+		fieldsByName,
+		effectiveValues,
+		registry,
+		ruleRegistry,
+		locale,
+		translate
+	]);
+	const visible = visibleFields(form.fields, effectiveValues);
+	const stepVisible = (flow && currentStepId ? stepFieldNames(flow, currentStepId) : []).map((name) => visible.find((field) => field.name === name)).filter((field) => Boolean(field));
+	const goNext = async () => {
+		if (!flow || !currentStepId) return;
+		const results = await Promise.all(stepVisible.filter((field) => !calcExpressionOf(field)).filter((field) => evaluateCondition(field.validateWhen, effectiveValues)).map(async (field) => ({
+			field,
+			...await validateFieldValue({
+				field,
+				value: effectiveValues[field.name],
+				registry,
+				ruleRegistry,
+				answers: effectiveValues,
+				locale,
+				t: translate
+			})
+		})));
+		let hasError = false;
+		for (const result of results) {
+			rawDispatch({
+				type: "TOUCH",
+				name: result.field.name
+			});
+			rawDispatch({
+				type: "SET_FIELD_ISSUES",
+				name: result.field.name,
+				errors: result.errors,
+				warnings: result.warnings
+			});
+			if (result.errors.length > 0) hasError = true;
+		}
+		if (hasError) return;
+		const next = resolveNextStepId(flow, currentStepId, state.values);
+		if (!next) return;
+		emitFormEvent(sinkRef.current, formIdRef.current, {
+			type: "step.completed",
+			stepId: currentStepId
+		});
+		setHistory((prev) => [...prev, currentStepId]);
+		setCurrentStepId(next);
+		emitFormEvent(sinkRef.current, formIdRef.current, {
+			type: "step.viewed",
+			stepId: next
+		});
+	};
+	const goBack = () => {
+		const prev = history[history.length - 1];
+		if (prev === void 0) return;
+		setHistory((entries) => entries.slice(0, -1));
+		setCurrentStepId(prev);
+		emitFormEvent(sinkRef.current, formIdRef.current, {
+			type: "step.viewed",
+			stepId: prev
+		});
+	};
+	useEffect(() => {
+		emitFormEvent(sinkRef.current, formIdRef.current, { type: "form.viewed" });
+		const mountFlow = flowRef.current;
+		if (mountFlow) {
+			const first = firstStepId(mountFlow);
+			if (first) emitFormEvent(sinkRef.current, formIdRef.current, {
+				type: "step.viewed",
+				stepId: first
+			});
+		}
+		return () => {
+			if (!submittedRef.current && !submittingRef.current) emitFormEvent(sinkRef.current, formIdRef.current, { type: "form.abandoned" });
+		};
+	}, []);
+	const handleClose = useCallback(() => {
+		onClose?.();
+	}, [onClose]);
+	const handleSubmit = async (event) => {
+		event.preventDefault();
+		if (submittingRef.current) return;
+		submittingRef.current = true;
+		const visible = visibleFields(form.fields, effectiveValues);
+		const results = await Promise.all(visible.filter((field) => !calcExpressionOf(field)).filter((field) => evaluateCondition(field.validateWhen, effectiveValues)).map(async (field) => ({
+			field,
+			...await validateFieldValue({
+				field,
+				value: effectiveValues[field.name],
+				registry,
+				ruleRegistry,
+				answers: effectiveValues,
+				locale,
+				t: translate
+			})
+		})));
+		const errors = {};
+		const warnings = {};
+		for (const result of results) {
+			if (result.errors.length > 0) {
+				errors[result.field.name] = result.errors;
+				const [firstError] = result.errors;
+				if (firstError !== void 0) emitFormEvent(sinkRef.current, formIdRef.current, {
+					type: "field.errored",
+					field: result.field.name,
+					message: firstError
+				});
+			}
+			if (result.warnings.length > 0) warnings[result.field.name] = result.warnings;
+		}
+		rawDispatch({
+			type: "SET_ALL_ISSUES",
+			errors,
+			warnings
+		});
+		if (Object.keys(errors).length > 0) {
+			submittingRef.current = false;
+			return;
+		}
+		rawDispatch({ type: "SUBMIT_START" });
+		const values = visible.filter((field) => !isEmpty(effectiveValues[field.name])).map((field) => ({
+			field: field.name,
+			value: effectiveValues[field.name]
+		}));
+		if (honeypotName) {
+			const decoy = honeypotRef.current?.value ?? "";
+			if (decoy !== "") values.push({
+				field: honeypotName,
+				value: decoy
+			});
+		}
+		if (captchaToken) values.push({
+			field: CAPTCHA_TOKEN_KEY,
+			value: captchaToken
+		});
+		const result = onSubmit ? await onSubmit({
+			formId: form.id,
+			values
+		}) : await submitForm({
+			formId: form.id,
+			values,
+			apiRoute
+		});
+		submittingRef.current = false;
+		if (result.ok) {
+			submittedRef.current = true;
+			rawDispatch({ type: "SUBMIT_SUCCESS" });
+			emitFormEvent(sinkRef.current, formIdRef.current, {
+				type: "submission.created",
+				submissionId: result.submissionId
+			});
+			onSuccess?.(result.submissionId);
+			if (activePresentation.dismissOnSuccess) handleClose();
+		} else {
+			if (result.fieldErrors) rawDispatch({
+				type: "SET_ALL_ISSUES",
+				errors: result.fieldErrors,
+				warnings: {}
+			});
+			const message = result.message ?? "Submission failed";
+			rawDispatch({
+				type: "SUBMIT_ERROR",
+				message
+			});
+			onError?.(message);
+		}
+	};
+	const step = flow ? {
+		flow,
+		currentStepId,
+		stepIndex: flow.steps.findIndex((s) => s.id === currentStepId),
+		stepCount: flow.steps.length,
+		isFirst: history.length === 0,
+		isTerminal: currentStepId ? isTerminalStepId(flow, currentStepId, state.values) : true,
+		goNext: () => {
+			goNext();
+		},
+		goBack
+	} : {
+		stepIndex: 0,
+		stepCount: 1,
+		isFirst: true,
+		isTerminal: true,
+		goNext: () => {},
+		goBack: () => {}
+	};
+	const contextValue = {
+		state,
+		dispatch,
+		validateField,
+		locale,
+		step
+	};
+	const PresentationWrapper = activePresentation.Wrapper;
+	const wrap = (content) => PresentationWrapper ? /* @__PURE__ */ jsx(PresentationWrapper, {
+		presentation: activePresentation,
+		open: true,
+		onClose: handleClose,
+		title,
+		closeLabel,
+		children: content
+	}) : content;
+	if (children !== void 0) return /* @__PURE__ */ jsx(FormContext.Provider, {
+		value: contextValue,
+		children: wrap(/* @__PURE__ */ jsxs("form", {
+			className: cn("fb-form-root", className),
+			noValidate: true,
+			onSubmit: handleSubmit,
+			"data-fb-presentation": activePresentation.name,
+			"data-fb-density": activePresentation.density,
+			children: [honeypotName ? /* @__PURE__ */ jsx(Honeypot, {
+				name: honeypotName,
+				inputRef: honeypotRef
+			}) : null, children]
+		}))
+	});
+	if (state.submitted) return /* @__PURE__ */ jsx(FormContext.Provider, {
+		value: contextValue,
+		children: wrap(/* @__PURE__ */ jsx("p", {
+			role: "status",
+			className: cn("fb-form__success", className),
+			"data-fb-presentation": activePresentation.name,
+			"data-fb-density": activePresentation.density,
+			children: interpolate(successMessage, recall)
+		}))
+	});
+	const rendered = (flow ? stepVisible : visible).filter((field) => field.hidden !== true && field.calcDisplay !== false);
+	return /* @__PURE__ */ jsx(FormContext.Provider, {
+		value: contextValue,
+		children: wrap(/* @__PURE__ */ jsxs("form", {
+			className: cn("fb-form-root", className),
+			noValidate: true,
+			onSubmit: handleSubmit,
+			"data-fb-presentation": activePresentation.name,
+			"data-fb-density": activePresentation.density,
+			children: [
+				honeypotName ? /* @__PURE__ */ jsx(Honeypot, {
+					name: honeypotName,
+					inputRef: honeypotRef
+				}) : null,
+				/* @__PURE__ */ jsx(FormLayout, {
+					enabled: layout !== false,
+					children: rendered.map((field) => {
+						const renderer = rendererRegistry.get(field.blockType);
+						if (!renderer) return null;
+						const width = typeof field.width === "string" && FIELD_WIDTHS.has(field.width) ? field.width : void 0;
+						const recalledField = applyRecall(field, recall);
+						return /* @__PURE__ */ jsx("div", {
+							...widthProps(width),
+							children: calcExpressionOf(field) ? /* @__PURE__ */ jsx(CalcFieldHost, {
+								field: recalledField,
+								renderer,
+								value: effectiveValues[field.name],
+								locale,
+								t: translate
+							}) : /* @__PURE__ */ jsx(FieldHost, {
+								field: recalledField,
+								renderer,
+								locale,
+								t: translate
+							})
+						}, field.name);
+					})
+				}),
+				state.submitError ? /* @__PURE__ */ jsx("p", {
+					role: "alert",
+					className: "fb-form__submit-error",
+					children: state.submitError
+				}) : null,
+				flow ? /* @__PURE__ */ jsxs("div", {
+					className: "fb-form__controls",
+					children: [!step.isFirst ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: goBack,
+						disabled: state.submitting,
+						children: backLabel
+					}) : null, step.isTerminal ? /* @__PURE__ */ jsx("button", {
+						type: "submit",
+						disabled: state.submitting,
+						children: submitLabel
+					}) : /* @__PURE__ */ jsx("button", {
+						type: "button",
+						disabled: state.submitting,
+						onClick: () => {
+							goNext();
+						},
+						children: nextLabel
+					})]
+				}) : /* @__PURE__ */ jsx("button", {
+					type: "submit",
+					disabled: state.submitting,
+					children: submitLabel
+				})
+			]
+		}))
+	});
+};
+//#endregion
+export { Form };
+
+//# sourceMappingURL=Form.js.map