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

package/dist/react/Form.js

@@ -0,0 +1,619 @@
+"use client";
+import { keys } from "../translations/keys.js";
+import { interpolate } from "../recall/interpolate.js";
+import { serializeBody } from "../actions/body/serializeBody.js";
+import { noopEventSink } from "../events/noopSink.js";
+import { CAPTCHA_TOKEN_KEY, HONEYPOT_VALUE_KEY } from "../spam/constants.js";
+import { fieldKey, isNamedField } from "../fields/fieldKey.js";
+import { calcExpressionOf, computeCalcFields } from "../calc/computeCalcFields.js";
+import { evaluateCondition } from "../conditions/evaluate.js";
+import { resolveMessage } from "../validation/message.js";
+import { en } from "../translations/en.js";
+import { defaultPresentationDescriptors } from "../presentations/defaults.js";
+import { buildRecallResolver, descriptorsFor } 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 { FormControls } from "./FormControls.js";
+import { DEFAULT_STEP_ID, formReducer, initialFormState, seedFieldValues } from "./state.js";
+import { FormFields } from "./FormFields.js";
+import { Honeypot } from "./Honeypot.js";
+import { defaultPresentations } from "./presentation/presentations.js";
+import { resolvePresentations } from "./presentation/registry.js";
+import { resolveRenderers } from "./registry.js";
+import { defaultRenderers } from "./renderers/index.js";
+import { buildFieldTypeRegistry, buildValidationRuleRegistry, visibleFields } from "./resolveForm.js";
+import { submitForm } from "./submitForm.js";
+import { validateFieldValue } from "./validateField.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from "react";
+//#region src/react/Form.tsx
+const isEmpty = (value) => value == null || value === "" || Array.isArray(value) && value.length === 0;
+/** Visually hidden but screen-reader-announced, for the "Step X of Y" live region (no host CSS required). */
+const SR_ONLY = {
+	position: "absolute",
+	width: 1,
+	height: 1,
+	padding: 0,
+	margin: -1,
+	overflow: "hidden",
+	clip: "rect(0, 0, 0, 0)",
+	whiteSpace: "nowrap",
+	border: 0
+};
+/** The base field name of an error key: the part before a repeater composite suffix (`name[0].sub`). */
+const baseFieldKey = (key) => {
+	const bracket = key.indexOf("[");
+	return bracket === -1 ? key : key.slice(0, bracket);
+};
+/** The id of the first flow step (in order) that owns an errored field, or undefined when none does. */
+const firstStepWithError = (flow, errors) => {
+	const errored = new Set(Object.keys(errors).map(baseFieldKey));
+	return flow.steps.find((flowStep) => flowStep.fields.some((key) => errored.has(key)))?.id;
+};
+/** The first focusable element under `root` that a step transition should land on (skips hidden/honeypot). */
+const focusFirstIn = (root, selector) => {
+	(root?.querySelector(selector))?.focus();
+};
+/** A stored button label counts only when it is a non-empty string; anything else falls through. */
+const storedLabel = (value) => typeof value === "string" && value.length > 0 ? value : void 0;
+/** The headless form controller: state, progressive client validation, conditional visibility, submission, events. */
+const Form = ({ form, fieldTypes, rules, renderers, apiRoute, onSubmit, onSuccess, onError, converters, successBehavior = "replace", events, t, locale = "en", layout, submitLabel, nextLabel, prevLabel, closeLabel, successMessage, presentation, presentations, onClose, title, initialValues, honeypot, captchaToken, children, header, className, renderSubmit, renderNext, renderBack, submitButtonClassName, nextButtonClassName, backButtonClassName }) => {
+	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 ?? "page") ?? presentationRegistry.get("page") ?? defaultPresentationDescriptors.page;
+	const fieldsByName = useMemo(() => new Map(form.fields.filter(isNamedField).map((field) => [field.name, field])), [form.fields]);
+	const translate = useMemo(() => t ?? makeTranslate(en), [t]);
+	const resolvedCloseLabel = closeLabel ?? translate(keys.formClose);
+	const resolvedSuccessMessage = successMessage ?? translate(keys.formSuccess);
+	const docButtons = form.buttons;
+	const labels = useMemo(() => ({
+		prev: prevLabel ?? storedLabel(docButtons?.prevLabel) ?? translate(keys.formBack),
+		next: nextLabel ?? storedLabel(docButtons?.nextLabel) ?? translate(keys.formNext),
+		submit: submitLabel ?? storedLabel(docButtons?.submitLabel) ?? translate(keys.formSubmit)
+	}), [
+		prevLabel,
+		nextLabel,
+		submitLabel,
+		docButtons,
+		translate
+	]);
+	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({
+		...seedFieldValues(fields),
+		...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.multistep === true && 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 advancingRef = useRef(false);
+	const flowRef = useRef(flow);
+	flowRef.current = flow;
+	const stepIdOfField = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		if (flow) for (const flowStep of flow.steps) for (const key of flowStep.fields) map.set(key, flowStep.id);
+		return (fieldKey) => map.get(fieldKey) ?? "__form__";
+	}, [flow]);
+	const allStepIds = useMemo(() => flow ? flow.steps.map((flowStep) => flowStep.id) : [DEFAULT_STEP_ID], [flow]);
+	const formRef = useRef(null);
+	const pendingFocusRef = useRef(null);
+	const [focusNonce, setFocusNonce] = useState(0);
+	const requestFocus = (intent) => {
+		pendingFocusRef.current = intent;
+		setFocusNonce((nonce) => nonce + 1);
+	};
+	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: []
+			});
+			return;
+		}
+		validateFieldValue({
+			field,
+			value,
+			registry,
+			ruleRegistry,
+			answers,
+			locale,
+			t: translate
+		}).then(({ errors }) => {
+			rawDispatch({
+				type: "SET_FIELD_ISSUES",
+				name,
+				errors
+			});
+			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);
+	/** Visible, answered named fields. Display-only ('none' kind) and nameless (bare) fields never contribute. */
+	const answerableFields = () => visibleFields(form.fields, effectiveValues).filter((field) => registry.get(field.blockType)?.value !== "none").filter(isNamedField).filter((field) => !isEmpty(effectiveValues[field.name]));
+	/** Answered visible fields as raw submission values, sent to the server on submit. */
+	const answeredValues = () => answerableFields().map((field) => ({
+		field: field.name,
+		value: effectiveValues[field.name]
+	}));
+	/**
+	* Same fields, formatted via `recall` (option labels, Yes/No, localized dates): recall-fidelity
+	* values for client-rendered templates, matching what the server gives email-team's body.
+	*/
+	const formattedValues = () => answerableFields().map((field) => ({
+		field: field.name,
+		value: recall(field.name)
+	}));
+	/**
+	* The recall-resolved success response: a redirect's url, or the response message serialized with
+	* the active `converters` (so host blocks survive). Shared by the success screen and the value
+	* handed to `onSuccess`, so both stay identical.
+	*/
+	const resolveSuccessResponse = () => {
+		const response = form.response;
+		if (response?.type === "redirect") return {
+			type: "redirect",
+			url: response.redirect?.url ?? void 0
+		};
+		const message = response?.type === "message" || response?.type == null ? response?.message : void 0;
+		if (!message) return;
+		return {
+			type: "message",
+			html: serializeBody(message, {
+				values: formattedValues(),
+				descriptors: descriptorsFor(answerableFields()),
+				converters
+			})
+		};
+	};
+	const stepKeys = flow && currentStepId ? stepFieldNames(flow, currentStepId) : [];
+	const stepKeySet = new Set(stepKeys);
+	const stepVisible = visible.filter((field) => stepKeySet.has(fieldKey(field)));
+	const validateRepeaterSubFields = async (repeaters) => {
+		const errors = {};
+		for (const field of repeaters.filter((f) => f.blockType === "repeater" && isNamedField(f))) {
+			const rows = Array.isArray(effectiveValues[field.name]) ? effectiveValues[field.name] : [];
+			const subFields = (Array.isArray(field.subFields) ? field.subFields : []).filter(isNamedField);
+			for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
+				const row = rows[rowIndex] ?? {};
+				for (const subField of subFields) {
+					if (!evaluateCondition(subField.visibleWhen, row)) continue;
+					if (!evaluateCondition(subField.validateWhen, row)) continue;
+					const subResult = await validateFieldValue({
+						field: subField,
+						value: row[subField.name],
+						registry,
+						ruleRegistry,
+						answers: row,
+						locale,
+						t: translate
+					});
+					const compositeKey = `${field.name}[${rowIndex}].${subField.name}`;
+					if (subResult.errors.length > 0) errors[compositeKey] = subResult.errors;
+				}
+			}
+		}
+		return errors;
+	};
+	const goNext = async () => {
+		if (!flow || !currentStepId || advancingRef.current) return;
+		advancingRef.current = true;
+		try {
+			const results = await Promise.all(stepVisible.filter((field) => !calcExpressionOf(field)).filter((field) => registry.get(field.blockType)?.value !== "none").filter(isNamedField).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
+				});
+				if (result.errors.length > 0) hasError = true;
+			}
+			const repeaterErrors = await validateRepeaterSubFields(stepVisible);
+			for (const [compositeKey, errs] of Object.entries(repeaterErrors)) {
+				rawDispatch({
+					type: "SET_FIELD_ISSUES",
+					name: compositeKey,
+					errors: errs
+				});
+				hasError = true;
+			}
+			if (hasError) {
+				rawDispatch({
+					type: "MARK_STEP_ATTEMPTED",
+					stepId: currentStepId
+				});
+				requestFocus("firstInvalid");
+				return;
+			}
+			const next = resolveNextStepId(flow, currentStepId, effectiveValues);
+			if (!next) return;
+			emitFormEvent(sinkRef.current, formIdRef.current, {
+				type: "step.completed",
+				stepId: currentStepId
+			});
+			setHistory((prev) => [...prev, currentStepId]);
+			setCurrentStepId(next);
+			requestFocus("stepStart");
+			emitFormEvent(sinkRef.current, formIdRef.current, {
+				type: "step.viewed",
+				stepId: next
+			});
+		} finally {
+			advancingRef.current = false;
+		}
+	};
+	const goBack = () => {
+		const prev = history[history.length - 1];
+		if (prev === void 0) return;
+		setHistory((entries) => entries.slice(0, -1));
+		setCurrentStepId(prev);
+		requestFocus("stepStart");
+		emitFormEvent(sinkRef.current, formIdRef.current, {
+			type: "step.viewed",
+			stepId: prev
+		});
+	};
+	const navigateToStep = (stepId) => {
+		if (!flow || stepId === currentStepId) return;
+		const idx = flow.steps.findIndex((flowStep) => flowStep.id === stepId);
+		if (idx < 0) return;
+		setHistory(flow.steps.slice(0, idx).map((flowStep) => flowStep.id));
+		setCurrentStepId(stepId);
+		emitFormEvent(sinkRef.current, formIdRef.current, {
+			type: "step.viewed",
+			stepId
+		});
+	};
+	useEffect(() => {
+		const intent = pendingFocusRef.current;
+		if (!intent) return;
+		pendingFocusRef.current = null;
+		if (intent === "firstInvalid") {
+			focusFirstIn(formRef.current, "[aria-invalid=\"true\"]");
+			return;
+		}
+		const region = formRef.current?.querySelector("[data-fb-step-region]");
+		if (region) region.focus();
+		else focusFirstIn(formRef.current, "input:not([type=\"hidden\"]), select, textarea");
+	}, [currentStepId, focusNonce]);
+	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) => registry.get(field.blockType)?.value !== "none").filter(isNamedField).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 = {};
+		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
+			});
+		}
+		Object.assign(errors, await validateRepeaterSubFields(visible));
+		const hasErrors = Object.keys(errors).length > 0;
+		rawDispatch({
+			type: "SET_ALL_ISSUES",
+			errors,
+			steps: hasErrors ? allStepIds : []
+		});
+		if (hasErrors) {
+			submittingRef.current = false;
+			if (flow && currentStepId) {
+				const target = firstStepWithError(flow, errors);
+				if (target) navigateToStep(target);
+			}
+			requestFocus("firstInvalid");
+			return;
+		}
+		rawDispatch({ type: "SUBMIT_START" });
+		const values = answeredValues();
+		if (honeypotName) {
+			const decoy = honeypotRef.current?.value ?? "";
+			if (decoy !== "") values.push({
+				field: HONEYPOT_VALUE_KEY,
+				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;
+			emitFormEvent(sinkRef.current, formIdRef.current, {
+				type: "submission.created",
+				submissionId: result.submissionId
+			});
+			onSuccess?.(result.submissionId, { response: resolveSuccessResponse() });
+			if (successBehavior === "reset") {
+				rawDispatch({
+					type: "RESET",
+					values: {
+						...seedFieldValues(form.fields),
+						...initialValues ?? {}
+					}
+				});
+				if (flow) {
+					setCurrentStepId(firstStepId(flow));
+					setHistory([]);
+				}
+				startedRef.current = false;
+			} else {
+				rawDispatch({ type: "SUBMIT_SUCCESS" });
+				if (activePresentation.dismissOnSuccess) handleClose();
+			}
+			const redirectUrl = form.response?.type === "redirect" ? form.response.redirect?.url : void 0;
+			if (typeof redirectUrl === "string" && redirectUrl.length > 0 && typeof window !== "undefined") window.location.assign(redirectUrl);
+		} else {
+			if (result.fieldErrors) rawDispatch({
+				type: "SET_ALL_ISSUES",
+				errors: result.fieldErrors,
+				steps: allStepIds
+			});
+			const message = result.message ?? translate(keys.formSubmitFailed);
+			rawDispatch({
+				type: "SUBMIT_ERROR",
+				message
+			});
+			onError?.(message);
+		}
+	};
+	const isTerminalStep = flow && currentStepId ? isTerminalStepId(flow, currentStepId, effectiveValues) : true;
+	const handleKeyDown = (event) => {
+		if (!flow || event.key !== "Enter") return;
+		const target = event.target;
+		if (target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement || target instanceof HTMLButtonElement) return;
+		if (target instanceof HTMLInputElement && (target.type === "submit" || target.type === "button")) return;
+		if (!isTerminalStep) {
+			event.preventDefault();
+			goNext();
+		}
+	};
+	const step = flow ? {
+		flow,
+		currentStepId,
+		stepIndex: flow.steps.findIndex((s) => s.id === currentStepId),
+		stepCount: flow.steps.length,
+		isFirst: history.length === 0,
+		isTerminal: isTerminalStep,
+		goNext: () => {
+			goNext();
+		},
+		goBack
+	} : {
+		stepIndex: 0,
+		stepCount: 1,
+		isFirst: true,
+		isTerminal: true,
+		goNext: () => {},
+		goBack: () => {}
+	};
+	const stepStatusText = flow ? resolveMessage(translate(keys.formStepStatus), {
+		current: String(step.stepIndex + 1),
+		total: String(step.stepCount)
+	}) : "";
+	const currentStepHasError = flow != null && currentStepId != null && state.attemptedSteps.has(currentStepId) && Object.entries(state.errors).some(([key, errs]) => errs.length > 0 && stepIdOfField(baseFieldKey(key)) === currentStepId);
+	const contextValue = {
+		form,
+		state,
+		dispatch,
+		validateField,
+		locale,
+		step,
+		rendererRegistry,
+		labels,
+		t: translate,
+		effectiveValues,
+		recall,
+		renderedFields: (flow ? stepVisible : visible).filter((field) => field.hidden !== true && field.calcDisplay !== false),
+		converters,
+		stepIdOfField
+	};
+	const PresentationWrapper = activePresentation.Wrapper;
+	const wrap = (content) => PresentationWrapper ? /* @__PURE__ */ jsx(PresentationWrapper, {
+		presentation: activePresentation,
+		open: true,
+		onClose: handleClose,
+		title,
+		closeLabel: resolvedCloseLabel,
+		children: content
+	}) : content;
+	if (children !== void 0) return /* @__PURE__ */ jsx(FormContext.Provider, {
+		value: contextValue,
+		children: wrap(/* @__PURE__ */ jsxs("form", {
+			ref: formRef,
+			className: cn("fb-form-root", className),
+			noValidate: true,
+			onSubmit: handleSubmit,
+			onKeyDown: handleKeyDown,
+			"data-fb-presentation": activePresentation.name,
+			"data-fb-density": activePresentation.density,
+			children: [honeypotName ? /* @__PURE__ */ jsx(Honeypot, {
+				name: honeypotName,
+				inputRef: honeypotRef
+			}) : null, children]
+		}))
+	});
+	if (state.submitted) {
+		const successResponse = resolveSuccessResponse();
+		const responseHtml = successResponse?.type === "message" ? successResponse.html : void 0;
+		return /* @__PURE__ */ jsx(FormContext.Provider, {
+			value: contextValue,
+			children: wrap(responseHtml ? /* @__PURE__ */ jsx("div", {
+				role: "status",
+				className: cn("fb-form__success", className),
+				"data-fb-presentation": activePresentation.name,
+				"data-fb-density": activePresentation.density,
+				dangerouslySetInnerHTML: { __html: responseHtml }
+			}) : /* @__PURE__ */ jsx("p", {
+				role: "status",
+				className: cn("fb-form__success", className),
+				"data-fb-presentation": activePresentation.name,
+				"data-fb-density": activePresentation.density,
+				children: interpolate(resolvedSuccessMessage, recall)
+			}))
+		});
+	}
+	return /* @__PURE__ */ jsx(FormContext.Provider, {
+		value: contextValue,
+		children: wrap(/* @__PURE__ */ jsxs("form", {
+			ref: formRef,
+			className: cn("fb-form-root", className),
+			noValidate: true,
+			onSubmit: handleSubmit,
+			onKeyDown: handleKeyDown,
+			"data-fb-presentation": activePresentation.name,
+			"data-fb-density": activePresentation.density,
+			children: [
+				honeypotName ? /* @__PURE__ */ jsx(Honeypot, {
+					name: honeypotName,
+					inputRef: honeypotRef
+				}) : null,
+				header,
+				flow ? /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx("div", {
+						"aria-live": "polite",
+						"aria-atomic": "true",
+						style: SR_ONLY,
+						children: stepStatusText
+					}),
+					/* @__PURE__ */ jsx("div", {
+						"data-fb-step-region": true,
+						tabIndex: -1,
+						className: "fb-form__step",
+						children: /* @__PURE__ */ jsx(FormFields, { layout })
+					}),
+					currentStepHasError ? /* @__PURE__ */ jsx("p", {
+						role: "alert",
+						className: "fb-form__step-error",
+						children: translate(keys.formStepInvalid)
+					}) : null
+				] }) : /* @__PURE__ */ jsx(FormFields, { layout }),
+				state.submitError ? /* @__PURE__ */ jsx("p", {
+					role: "alert",
+					className: "fb-form__submit-error",
+					children: state.submitError
+				}) : null,
+				/* @__PURE__ */ jsx(FormControls, {
+					backButtonClassName,
+					nextButtonClassName,
+					submitButtonClassName,
+					renderBack,
+					renderNext,
+					renderSubmit
+				})
+			]
+		}))
+	});
+};
+//#endregion
+export { Form };
+
+//# sourceMappingURL=Form.js.map