@page-speed/forms 0.6.2 → 0.6.4

package/dist/integration.d.cts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ReactNode } from 'react';
-import { d as FormSubmissionBehavior, N as NewFormSubmissionActionConfig, m as UseFormReturn } from './types-Fbt73kW_.cjs';
+import { e as FormSubmissionConfig, t as FormLayoutSettings, u as FormFieldConfig, m as UseFormReturn, B as ButtonGroupFormFieldConfig } from './types-BhcLAcZe.cjs';
+export { y as FormFieldType, z as SelectOption, v as generateInitialValues, w as generateValidationSchema, x as getColumnSpanClass } from './types-BhcLAcZe.cjs';
 
 /**
  * @page-speed/forms - Rails API Serializer
@@ -386,12 +386,12 @@ interface PageSpeedFormSubmissionResult {
     formData: Record<string, any>;
     responseData: unknown;
 }
-interface PageSpeedFormSubmissionConfig {
-    /**
-     * Post-submit behavior.
-     * @default "showConfirmation"
-     */
-    behavior?: FormSubmissionBehavior;
+/**
+ * PageSpeed-specific extension of the core FormSubmissionConfig.
+ * Inherits behavior, customComponent, and newFormSubmissionAction from the
+ * base type and adds integration-layer callbacks and redirect support.
+ */
+interface PageSpeedFormSubmissionConfig extends FormSubmissionConfig {
     /**
      * Optional callback triggered on successful submission.
      */
@@ -400,14 +400,6 @@ interface PageSpeedFormSubmissionConfig {
      * Redirect destination used when behavior is "redirect".
      */
     redirectUrl?: string;
-    /**
-     * Custom component rendered when behavior is "renderCustomComponent".
-     */
-    customComponent?: ReactNode;
-    /**
-     * Optional action to allow a fresh submission after success.
-     */
-    newFormSubmissionAction?: NewFormSubmissionActionConfig;
 }
 interface PageSpeedFormConfig {
     /**
@@ -465,6 +457,12 @@ interface PageSpeedFormConfig {
      * Optional post-submission behavior configuration.
      */
     submissionConfig?: PageSpeedFormSubmissionConfig;
+    /**
+     * Optional layout and presentation settings.
+     * Provides a typed home for layout props (formLayout, buttonGroupSize, etc.)
+     * so consumers don't need an `as any` cast when passing them alongside API config.
+     */
+    formLayoutSettings?: FormLayoutSettings;
 }
 declare class PageSpeedFormSubmissionError extends Error {
     formErrors?: FormErrors;
@@ -477,116 +475,6 @@ declare class PageSpeedFormSubmissionError extends Error {
 declare function isValidEmail(value: string): boolean;
 declare function submitPageSpeedForm(values: Record<string, any>, config?: PageSpeedFormConfig): Promise<unknown>;
 
-/**
- * Dynamic form field schema types and helpers.
- *
- * These utilities are intentionally exposed from the integration layer so
- * block/rendering libraries can share one field schema contract.
- */
-type FormFieldType = "text" | "email" | "search" | "password" | "tel" | "textarea" | "select" | "radio" | "checkbox" | "checkbox-group" | "number" | "url" | "date" | "date-picker" | "date-range" | "time" | "file" | "multi-select";
-interface SelectOption {
-    value: string;
-    label: string;
-    disabled?: boolean;
-    description?: string;
-}
-interface FormFieldConfig {
-    /**
-     * Unique field name (used as the key in form values)
-     */
-    name: string;
-    /**
-     * Field type
-     */
-    type: FormFieldType;
-    /**
-     * Display label for the field
-     */
-    label: string;
-    /**
-     * Placeholder text
-     */
-    placeholder?: string;
-    /**
-     * Whether the field is required
-     * @default false
-     */
-    required?: boolean;
-    /**
-     * Column span in grid layout (1-12)
-     * @default 12 (full width)
-     */
-    columnSpan?: number;
-    /**
-     * Options for select/radio/checkbox-group fields
-     */
-    options?: SelectOption[];
-    /**
-     * Number of rows for textarea
-     * @default 4
-     */
-    rows?: number;
-    /**
-     * Custom validation function
-     * Return undefined for valid, or an error message string for invalid
-     */
-    validator?: (value: any, allValues: Record<string, any>) => string | undefined;
-    /**
-     * Additional CSS classes for the field wrapper
-     */
-    className?: string;
-    /**
-     * Whether the field is disabled
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Accepted file types for file inputs (MIME types or extensions)
-     * @example ".pdf,.doc,.docx"
-     * @example "image/*,application/pdf"
-     */
-    accept?: string;
-    /**
-     * Maximum file size in bytes for file inputs
-     * @default 5MB (5 * 1024 * 1024)
-     */
-    maxSize?: number;
-    /**
-     * Maximum number of files for file inputs
-     * @default 1
-     */
-    maxFiles?: number;
-    /**
-     * Allow multiple file selection
-     * @default false
-     */
-    multiple?: boolean;
-    /**
-     * Description/help text displayed with the field
-     */
-    description?: string;
-    /**
-     * Layout for radio/checkbox groups
-     * @default "stacked"
-     */
-    layout?: "grid" | "stacked";
-}
-/**
- * Generate initial values object from form field configs.
- */
-declare function generateInitialValues(fields: FormFieldConfig[]): Record<string, any>;
-/**
- * Generate validation schema from form field configs.
- */
-declare function generateValidationSchema(fields: FormFieldConfig[]): Record<string, (value: any, allValues: Record<string, any>) => string | undefined>;
-/**
- * Get grid column span class for Tailwind.
- *
- * On small screens the field is always full-width, then from `md` and up the
- * configured span is applied.
- */
-declare function getColumnSpanClass(span?: number): string;
-
 interface FileUploadProgress {
     [fileName: string]: number;
 }
@@ -681,4 +569,92 @@ interface DynamicFormFieldProps {
  */
 declare function DynamicFormField({ field, className, uploadProgress, onFileUpload, onFileRemove, isUploading, renderLabel, }: DynamicFormFieldProps): React.JSX.Element;
 
-export { type AdaptedComponentProps, type Block, type BlockAdapterOptions, DynamicFormField, type DynamicFormFieldProps, type FileUploadProgress, type FormErrors, type FormFieldConfig, type FormFieldType, type PageSpeedFormConfig, type PageSpeedFormMethod, type PageSpeedFormSubmissionConfig, PageSpeedFormSubmissionError, type PageSpeedFormSubmissionFormat, type PageSpeedFormSubmissionResult, type RailsApiConfig, type RailsErrorResponse, type SelectOption, type SerializedFormData, type UseContactFormOptions, type UseContactFormReturn, type UseFileUploadOptions, type UseFileUploadReturn, createBlockAdapter, createBlockAdapters, deserializeErrors, generateInitialValues, generateValidationSchema, getColumnSpanClass, isValidEmail, serializeForRails, standardInputTransformer, submitPageSpeedForm, useContactForm, useFileUpload };
+interface ButtonGroupFormSetup {
+    size?: "xs" | "sm" | "default" | "lg";
+    submitLabel?: React.ReactNode;
+    submitVariant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost";
+    submitIconName?: string;
+    submitIconComponent?: React.ReactNode;
+}
+interface FormEngineSubmitButtonSetup {
+    submitLabel?: React.ReactNode;
+    submitVariant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost";
+    submitIconName?: string;
+    submitIconComponent?: React.ReactNode;
+}
+interface FormEngineStyleRules {
+    /** ClassName applied to the div wrapping the `<form>` element */
+    formContainer?: string;
+    /** ClassName applied to the grid div wrapping all field columns (standard layout) */
+    fieldsContainer?: string;
+    /** Fallback className applied to each field wrapper when the field has no own className */
+    fieldClassName?: string;
+    /** className forwarded to the `<form>` element itself via FormStyleConfig */
+    formClassName?: string;
+    /** className forwarded to the success message container via FormStyleConfig */
+    successMessageClassName?: string;
+    /** className forwarded to the error message container via FormStyleConfig */
+    errorMessageClassName?: string;
+}
+interface FormEngineLayoutSettings {
+    styleRules?: FormEngineStyleRules;
+    formLayout?: "standard" | "button-group";
+    /** Settings for button-group layout (only used when formLayout is "button-group") */
+    buttonGroupSetup?: ButtonGroupFormSetup;
+    /** Settings for the submit button in standard layout */
+    submitButtonSetup?: FormEngineSubmitButtonSetup;
+}
+interface FormEngineProps {
+    /** API / submission configuration */
+    api?: PageSpeedFormConfig;
+    /** Form field definitions */
+    fields: (FormFieldConfig | ButtonGroupFormFieldConfig)[];
+    /** Layout, style, and submit-button settings */
+    formLayoutSettings?: FormEngineLayoutSettings;
+    /** Success message shown after a successful submission */
+    successMessage?: React.ReactNode;
+    /** Custom submit handler (called in addition to any api endpoint) */
+    onSubmit?: (values: Record<string, any>) => void | Promise<void>;
+    /** Called after a successful submission with the server response */
+    onSuccess?: (data: unknown) => void;
+    /** Called when submission fails */
+    onError?: (error: Error) => void;
+    /** Navigation handler for internal redirects (return false to fall back to browser navigation) */
+    navigate?: (href: string) => boolean | void;
+    /** Reset form values after success @default true */
+    resetOnSuccess?: boolean;
+    /** File upload tokens to merge into the payload */
+    uploadTokens?: string[];
+    /** Called when files are selected for upload */
+    onFileUpload?: (files: File[]) => Promise<void>;
+    /** Called when a file is removed */
+    onFileRemove?: (file: File, index: number) => void;
+    /** Whether a file upload is in progress */
+    isUploading?: boolean;
+    /** Per-file upload progress map (fileName → 0-100) */
+    uploadProgress?: {
+        [fileName: string]: number;
+    };
+}
+/**
+ * FormEngine — declarative form component with built-in API integration.
+ *
+ * Handles `useContactForm` orchestration internally so callers only need to
+ * supply `api`, `fields`, and optional layout/style settings.
+ *
+ * @example Standard layout
+ * ```tsx
+ * <FormEngine api={api} fields={fields} formLayoutSettings={{ submitButtonSetup: { submitLabel: "Send" } }} />
+ * ```
+ *
+ * @example Button-group layout
+ * ```tsx
+ * <FormEngine api={api} fields={[emailField]} formLayoutSettings={{ formLayout: "button-group", buttonGroupSetup: { size: "lg", submitLabel: "Subscribe" } }} />
+ * ```
+ */
+declare function FormEngine({ api, fields, formLayoutSettings, successMessage, onSubmit, onSuccess, onError, navigate, resetOnSuccess, uploadTokens, onFileUpload, onFileRemove, isUploading, uploadProgress, }: FormEngineProps): React.JSX.Element;
+declare namespace FormEngine {
+    var displayName: string;
+}
+
+export { type AdaptedComponentProps, type Block, type BlockAdapterOptions, ButtonGroupFormFieldConfig, type ButtonGroupFormSetup, DynamicFormField, type DynamicFormFieldProps, type FileUploadProgress, FormEngine, type FormEngineLayoutSettings, type FormEngineProps, type FormEngineStyleRules, type FormEngineSubmitButtonSetup, type FormErrors, FormFieldConfig, FormLayoutSettings, type PageSpeedFormConfig, type PageSpeedFormMethod, type PageSpeedFormSubmissionConfig, PageSpeedFormSubmissionError, type PageSpeedFormSubmissionFormat, type PageSpeedFormSubmissionResult, type RailsApiConfig, type RailsErrorResponse, type SerializedFormData, type UseContactFormOptions, type UseContactFormReturn, type UseFileUploadOptions, type UseFileUploadReturn, createBlockAdapter, createBlockAdapters, deserializeErrors, isValidEmail, serializeForRails, standardInputTransformer, submitPageSpeedForm, useContactForm, useFileUpload };

package/dist/integration.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ReactNode } from 'react';
-import { d as FormSubmissionBehavior, N as NewFormSubmissionActionConfig, m as UseFormReturn } from './types-Fbt73kW_.js';
+import { e as FormSubmissionConfig, t as FormLayoutSettings, u as FormFieldConfig, m as UseFormReturn, B as ButtonGroupFormFieldConfig } from './types-BhcLAcZe.js';
+export { y as FormFieldType, z as SelectOption, v as generateInitialValues, w as generateValidationSchema, x as getColumnSpanClass } from './types-BhcLAcZe.js';
 
 /**
  * @page-speed/forms - Rails API Serializer
@@ -386,12 +386,12 @@ interface PageSpeedFormSubmissionResult {
     formData: Record<string, any>;
     responseData: unknown;
 }
-interface PageSpeedFormSubmissionConfig {
-    /**
-     * Post-submit behavior.
-     * @default "showConfirmation"
-     */
-    behavior?: FormSubmissionBehavior;
+/**
+ * PageSpeed-specific extension of the core FormSubmissionConfig.
+ * Inherits behavior, customComponent, and newFormSubmissionAction from the
+ * base type and adds integration-layer callbacks and redirect support.
+ */
+interface PageSpeedFormSubmissionConfig extends FormSubmissionConfig {
     /**
      * Optional callback triggered on successful submission.
      */
@@ -400,14 +400,6 @@ interface PageSpeedFormSubmissionConfig {
      * Redirect destination used when behavior is "redirect".
      */
     redirectUrl?: string;
-    /**
-     * Custom component rendered when behavior is "renderCustomComponent".
-     */
-    customComponent?: ReactNode;
-    /**
-     * Optional action to allow a fresh submission after success.
-     */
-    newFormSubmissionAction?: NewFormSubmissionActionConfig;
 }
 interface PageSpeedFormConfig {
     /**
@@ -465,6 +457,12 @@ interface PageSpeedFormConfig {
      * Optional post-submission behavior configuration.
      */
     submissionConfig?: PageSpeedFormSubmissionConfig;
+    /**
+     * Optional layout and presentation settings.
+     * Provides a typed home for layout props (formLayout, buttonGroupSize, etc.)
+     * so consumers don't need an `as any` cast when passing them alongside API config.
+     */
+    formLayoutSettings?: FormLayoutSettings;
 }
 declare class PageSpeedFormSubmissionError extends Error {
     formErrors?: FormErrors;
@@ -477,116 +475,6 @@ declare class PageSpeedFormSubmissionError extends Error {
 declare function isValidEmail(value: string): boolean;
 declare function submitPageSpeedForm(values: Record<string, any>, config?: PageSpeedFormConfig): Promise<unknown>;
 
-/**
- * Dynamic form field schema types and helpers.
- *
- * These utilities are intentionally exposed from the integration layer so
- * block/rendering libraries can share one field schema contract.
- */
-type FormFieldType = "text" | "email" | "search" | "password" | "tel" | "textarea" | "select" | "radio" | "checkbox" | "checkbox-group" | "number" | "url" | "date" | "date-picker" | "date-range" | "time" | "file" | "multi-select";
-interface SelectOption {
-    value: string;
-    label: string;
-    disabled?: boolean;
-    description?: string;
-}
-interface FormFieldConfig {
-    /**
-     * Unique field name (used as the key in form values)
-     */
-    name: string;
-    /**
-     * Field type
-     */
-    type: FormFieldType;
-    /**
-     * Display label for the field
-     */
-    label: string;
-    /**
-     * Placeholder text
-     */
-    placeholder?: string;
-    /**
-     * Whether the field is required
-     * @default false
-     */
-    required?: boolean;
-    /**
-     * Column span in grid layout (1-12)
-     * @default 12 (full width)
-     */
-    columnSpan?: number;
-    /**
-     * Options for select/radio/checkbox-group fields
-     */
-    options?: SelectOption[];
-    /**
-     * Number of rows for textarea
-     * @default 4
-     */
-    rows?: number;
-    /**
-     * Custom validation function
-     * Return undefined for valid, or an error message string for invalid
-     */
-    validator?: (value: any, allValues: Record<string, any>) => string | undefined;
-    /**
-     * Additional CSS classes for the field wrapper
-     */
-    className?: string;
-    /**
-     * Whether the field is disabled
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Accepted file types for file inputs (MIME types or extensions)
-     * @example ".pdf,.doc,.docx"
-     * @example "image/*,application/pdf"
-     */
-    accept?: string;
-    /**
-     * Maximum file size in bytes for file inputs
-     * @default 5MB (5 * 1024 * 1024)
-     */
-    maxSize?: number;
-    /**
-     * Maximum number of files for file inputs
-     * @default 1
-     */
-    maxFiles?: number;
-    /**
-     * Allow multiple file selection
-     * @default false
-     */
-    multiple?: boolean;
-    /**
-     * Description/help text displayed with the field
-     */
-    description?: string;
-    /**
-     * Layout for radio/checkbox groups
-     * @default "stacked"
-     */
-    layout?: "grid" | "stacked";
-}
-/**
- * Generate initial values object from form field configs.
- */
-declare function generateInitialValues(fields: FormFieldConfig[]): Record<string, any>;
-/**
- * Generate validation schema from form field configs.
- */
-declare function generateValidationSchema(fields: FormFieldConfig[]): Record<string, (value: any, allValues: Record<string, any>) => string | undefined>;
-/**
- * Get grid column span class for Tailwind.
- *
- * On small screens the field is always full-width, then from `md` and up the
- * configured span is applied.
- */
-declare function getColumnSpanClass(span?: number): string;
-
 interface FileUploadProgress {
     [fileName: string]: number;
 }
@@ -681,4 +569,92 @@ interface DynamicFormFieldProps {
  */
 declare function DynamicFormField({ field, className, uploadProgress, onFileUpload, onFileRemove, isUploading, renderLabel, }: DynamicFormFieldProps): React.JSX.Element;
 
-export { type AdaptedComponentProps, type Block, type BlockAdapterOptions, DynamicFormField, type DynamicFormFieldProps, type FileUploadProgress, type FormErrors, type FormFieldConfig, type FormFieldType, type PageSpeedFormConfig, type PageSpeedFormMethod, type PageSpeedFormSubmissionConfig, PageSpeedFormSubmissionError, type PageSpeedFormSubmissionFormat, type PageSpeedFormSubmissionResult, type RailsApiConfig, type RailsErrorResponse, type SelectOption, type SerializedFormData, type UseContactFormOptions, type UseContactFormReturn, type UseFileUploadOptions, type UseFileUploadReturn, createBlockAdapter, createBlockAdapters, deserializeErrors, generateInitialValues, generateValidationSchema, getColumnSpanClass, isValidEmail, serializeForRails, standardInputTransformer, submitPageSpeedForm, useContactForm, useFileUpload };
+interface ButtonGroupFormSetup {
+    size?: "xs" | "sm" | "default" | "lg";
+    submitLabel?: React.ReactNode;
+    submitVariant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost";
+    submitIconName?: string;
+    submitIconComponent?: React.ReactNode;
+}
+interface FormEngineSubmitButtonSetup {
+    submitLabel?: React.ReactNode;
+    submitVariant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost";
+    submitIconName?: string;
+    submitIconComponent?: React.ReactNode;
+}
+interface FormEngineStyleRules {
+    /** ClassName applied to the div wrapping the `<form>` element */
+    formContainer?: string;
+    /** ClassName applied to the grid div wrapping all field columns (standard layout) */
+    fieldsContainer?: string;
+    /** Fallback className applied to each field wrapper when the field has no own className */
+    fieldClassName?: string;
+    /** className forwarded to the `<form>` element itself via FormStyleConfig */
+    formClassName?: string;
+    /** className forwarded to the success message container via FormStyleConfig */
+    successMessageClassName?: string;
+    /** className forwarded to the error message container via FormStyleConfig */
+    errorMessageClassName?: string;
+}
+interface FormEngineLayoutSettings {
+    styleRules?: FormEngineStyleRules;
+    formLayout?: "standard" | "button-group";
+    /** Settings for button-group layout (only used when formLayout is "button-group") */
+    buttonGroupSetup?: ButtonGroupFormSetup;
+    /** Settings for the submit button in standard layout */
+    submitButtonSetup?: FormEngineSubmitButtonSetup;
+}
+interface FormEngineProps {
+    /** API / submission configuration */
+    api?: PageSpeedFormConfig;
+    /** Form field definitions */
+    fields: (FormFieldConfig | ButtonGroupFormFieldConfig)[];
+    /** Layout, style, and submit-button settings */
+    formLayoutSettings?: FormEngineLayoutSettings;
+    /** Success message shown after a successful submission */
+    successMessage?: React.ReactNode;
+    /** Custom submit handler (called in addition to any api endpoint) */
+    onSubmit?: (values: Record<string, any>) => void | Promise<void>;
+    /** Called after a successful submission with the server response */
+    onSuccess?: (data: unknown) => void;
+    /** Called when submission fails */
+    onError?: (error: Error) => void;
+    /** Navigation handler for internal redirects (return false to fall back to browser navigation) */
+    navigate?: (href: string) => boolean | void;
+    /** Reset form values after success @default true */
+    resetOnSuccess?: boolean;
+    /** File upload tokens to merge into the payload */
+    uploadTokens?: string[];
+    /** Called when files are selected for upload */
+    onFileUpload?: (files: File[]) => Promise<void>;
+    /** Called when a file is removed */
+    onFileRemove?: (file: File, index: number) => void;
+    /** Whether a file upload is in progress */
+    isUploading?: boolean;
+    /** Per-file upload progress map (fileName → 0-100) */
+    uploadProgress?: {
+        [fileName: string]: number;
+    };
+}
+/**
+ * FormEngine — declarative form component with built-in API integration.
+ *
+ * Handles `useContactForm` orchestration internally so callers only need to
+ * supply `api`, `fields`, and optional layout/style settings.
+ *
+ * @example Standard layout
+ * ```tsx
+ * <FormEngine api={api} fields={fields} formLayoutSettings={{ submitButtonSetup: { submitLabel: "Send" } }} />
+ * ```
+ *
+ * @example Button-group layout
+ * ```tsx
+ * <FormEngine api={api} fields={[emailField]} formLayoutSettings={{ formLayout: "button-group", buttonGroupSetup: { size: "lg", submitLabel: "Subscribe" } }} />
+ * ```
+ */
+declare function FormEngine({ api, fields, formLayoutSettings, successMessage, onSubmit, onSuccess, onError, navigate, resetOnSuccess, uploadTokens, onFileUpload, onFileRemove, isUploading, uploadProgress, }: FormEngineProps): React.JSX.Element;
+declare namespace FormEngine {
+    var displayName: string;
+}
+
+export { type AdaptedComponentProps, type Block, type BlockAdapterOptions, ButtonGroupFormFieldConfig, type ButtonGroupFormSetup, DynamicFormField, type DynamicFormFieldProps, type FileUploadProgress, FormEngine, type FormEngineLayoutSettings, type FormEngineProps, type FormEngineStyleRules, type FormEngineSubmitButtonSetup, type FormErrors, FormFieldConfig, FormLayoutSettings, type PageSpeedFormConfig, type PageSpeedFormMethod, type PageSpeedFormSubmissionConfig, PageSpeedFormSubmissionError, type PageSpeedFormSubmissionFormat, type PageSpeedFormSubmissionResult, type RailsApiConfig, type RailsErrorResponse, type SerializedFormData, type UseContactFormOptions, type UseContactFormReturn, type UseFileUploadOptions, type UseFileUploadReturn, createBlockAdapter, createBlockAdapters, deserializeErrors, isValidEmail, serializeForRails, standardInputTransformer, submitPageSpeedForm, useContactForm, useFileUpload };

package/dist/integration.js

@@ -1,6 +1,6 @@
-import { useForm, Field } from './chunk-MJYEXJ3U.js';
-import { TextArea, Select, MultiSelect, Radio, Checkbox, CheckboxGroup, DatePicker, DateRangePicker, TimePicker, FileInput } from './chunk-4ROWNTY6.js';
-import { TextInput } from './chunk-455PI4LV.js';
+import { useForm, Field, Form } from './chunk-A7MVZ757.js';
+import { TextArea, Select, MultiSelect, Radio, Checkbox, CheckboxGroup, DatePicker, DateRangePicker, TimePicker, FileInput } from './chunk-ML6FGUYS.js';
+import { TextInput, cn, Button } from './chunk-J37BGNM6.js';
 import * as React2 from 'react';
 import { useState, useCallback, useMemo } from 'react';
 
@@ -783,7 +783,104 @@ function DynamicFormField({
     ))
   );
 }
+function FormEngine({
+  api,
+  fields,
+  formLayoutSettings,
+  successMessage,
+  onSubmit,
+  onSuccess,
+  onError,
+  navigate,
+  resetOnSuccess,
+  uploadTokens,
+  onFileUpload,
+  onFileRemove,
+  isUploading,
+  uploadProgress
+}) {
+  const {
+    styleRules,
+    formLayout = "standard",
+    buttonGroupSetup,
+    submitButtonSetup
+  } = formLayoutSettings ?? {};
+  const isButtonGroup = formLayout === "button-group";
+  const normalizedFields = React2.useMemo(
+    () => fields.map((f) => ({ ...f, label: f.label ?? f.name })),
+    [fields]
+  );
+  const { form, submissionError, formMethod, resetSubmissionState } = useContactForm({
+    formFields: normalizedFields,
+    formConfig: api,
+    onSubmit,
+    onSuccess,
+    onError,
+    navigate,
+    resetOnSuccess,
+    uploadTokens
+  });
+  const legacyFormConfig = React2.useMemo(() => {
+    if (isButtonGroup) {
+      return {
+        formLayout: "button-group",
+        buttonGroupSize: buttonGroupSetup?.size,
+        submitLabel: buttonGroupSetup?.submitLabel,
+        submitVariant: buttonGroupSetup?.submitVariant,
+        submitIconName: buttonGroupSetup?.submitIconName,
+        submitIconComponent: buttonGroupSetup?.submitIconComponent,
+        endpoint: api?.endpoint,
+        submissionConfig: api?.submissionConfig
+      };
+    }
+    return {
+      formLayout: "standard",
+      endpoint: api?.endpoint,
+      submissionConfig: api?.submissionConfig
+    };
+  }, [isButtonGroup, buttonGroupSetup, api]);
+  return /* @__PURE__ */ React2.createElement("div", { className: styleRules?.formContainer }, /* @__PURE__ */ React2.createElement(
+    Form,
+    {
+      form,
+      fields: isButtonGroup ? fields : void 0,
+      formConfig: legacyFormConfig,
+      method: formMethod,
+      notificationConfig: {
+        submissionError: submissionError ?? void 0,
+        successMessage
+      },
+      styleConfig: {
+        formClassName: styleRules?.formClassName,
+        successMessageClassName: styleRules?.successMessageClassName,
+        errorMessageClassName: styleRules?.errorMessageClassName
+      },
+      onNewSubmission: resetSubmissionState
+    },
+    !isButtonGroup && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("div", { className: cn("grid grid-cols-12 gap-6", styleRules?.fieldsContainer) }, normalizedFields.map((field) => /* @__PURE__ */ React2.createElement("div", { key: field.name, className: cn(getColumnSpanClass(field.columnSpan ?? 12), "min-w-0") }, /* @__PURE__ */ React2.createElement(
+      DynamicFormField,
+      {
+        field,
+        className: field.className ?? styleRules?.fieldClassName,
+        uploadProgress,
+        onFileUpload,
+        onFileRemove,
+        isUploading
+      }
+    )))), /* @__PURE__ */ React2.createElement(
+      Button,
+      {
+        type: "submit",
+        variant: submitButtonSetup?.submitVariant ?? "default",
+        disabled: form.isSubmitting,
+        className: "mt-6 w-full"
+      },
+      submitButtonSetup?.submitLabel ?? "Submit"
+    ))
+  ));
+}
+FormEngine.displayName = "FormEngine";
 
-export { DynamicFormField, PageSpeedFormSubmissionError, createBlockAdapter, createBlockAdapters, deserializeErrors, generateInitialValues, generateValidationSchema, getColumnSpanClass, isValidEmail, serializeForRails, standardInputTransformer, submitPageSpeedForm, useContactForm, useFileUpload };
+export { DynamicFormField, FormEngine, PageSpeedFormSubmissionError, createBlockAdapter, createBlockAdapters, deserializeErrors, generateInitialValues, generateValidationSchema, getColumnSpanClass, isValidEmail, serializeForRails, standardInputTransformer, submitPageSpeedForm, useContactForm, useFileUpload };
 //# sourceMappingURL=integration.js.map
 //# sourceMappingURL=integration.js.map