@opensite/ui 1.8.2 → 1.8.4

package/dist/contact-callback.js

@@ -1,18 +1,15 @@
 "use client";
 import * as React from 'react';
-import React__default from 'react';
-import { useForm, Form, Field } from '@page-speed/forms';
-import { TextInput as TextInput$1, Select, TextArea as TextArea$1 } from '@page-speed/forms/inputs';
+import React__default, { useMemo, useState, useCallback } from 'react';
+import { Form, useForm, Field } from '@page-speed/forms';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as LabelPrimitive from '@radix-ui/react-label';
+import { TextInput, TextArea, Select, MultiSelect, Radio, Checkbox, CheckboxGroup, DatePicker, DateRangePicker, TimePicker, FileInput, RichTextEditor } from '@page-speed/forms/inputs';
 import { serializeForRails, deserializeErrors } from '@page-speed/forms/integration';
 
 // components/blocks/contact/contact-callback.tsx
-var TextInput = TextInput$1;
-var TextArea = TextArea$1;
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -359,6 +356,7 @@ var Pressable = React.forwardRef(
       rel,
       linkType,
       isInternal,
+      isExternal,
       handleClick
     } = navigation;
     const shouldRenderLink = normalizedHref && linkType !== "none";
@@ -562,22 +560,371 @@ function CardContent({ className, ...props }) {
     }
   );
 }
-function Label({
+function DynamicFormField({
+  field,
   className,
-  ...props
+  uploadProgress = {},
+  onFileUpload,
+  onFileRemove,
+  isUploading = false
 }) {
+  const fieldId = field.name;
+  const usesGroupLegend = field.type === "radio" || field.type === "checkbox-group";
+  const usesInlineCheckboxLabel = field.type === "checkbox";
+  const shouldRenderFieldLabel = !usesGroupLegend && !usesInlineCheckboxLabel;
+  const checkboxLabel = /* @__PURE__ */ jsxs(Fragment, { children: [
+    field.label,
+    field.required ? /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" }) : null
+  ] });
   return /* @__PURE__ */ jsx(
-    LabelPrimitive.Root,
+    Field,
     {
-      "data-slot": "label",
-      className: cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
-      ),
-      ...props
+      name: field.name,
+      label: shouldRenderFieldLabel ? field.label : void 0,
+      description: shouldRenderFieldLabel ? field.description : void 0,
+      required: field.required,
+      className: cn("space-y-2", className),
+      children: ({ field: formField, meta }) => /* @__PURE__ */ jsxs("div", { children: [
+        (field.type === "text" || field.type === "email" || field.type === "tel" || field.type === "search" || field.type === "password" || field.type === "url") && /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            ...formField,
+            id: fieldId,
+            type: field.type,
+            placeholder: field.placeholder,
+            error: meta.touched && !!meta.error,
+            disabled: field.disabled,
+            "aria-label": field.label
+          }
+        ),
+        field.type === "number" && /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            ...formField,
+            id: fieldId,
+            type: "text",
+            placeholder: field.placeholder,
+            error: meta.touched && !!meta.error,
+            disabled: field.disabled,
+            "aria-label": field.label
+          }
+        ),
+        field.type === "textarea" && /* @__PURE__ */ jsx(
+          TextArea,
+          {
+            ...formField,
+            id: fieldId,
+            placeholder: field.placeholder,
+            rows: field.rows || 4,
+            error: meta.touched && !!meta.error,
+            disabled: field.disabled,
+            "aria-label": field.label
+          }
+        ),
+        field.type === "select" && field.options && /* @__PURE__ */ jsx(
+          Select,
+          {
+            ...formField,
+            id: fieldId,
+            options: field.options,
+            placeholder: field.placeholder || `Select ${field.label.toLowerCase()}`,
+            error: meta.touched && !!meta.error,
+            disabled: field.disabled,
+            "aria-label": field.label
+          }
+        ),
+        field.type === "multi-select" && field.options && /* @__PURE__ */ jsx(
+          MultiSelect,
+          {
+            ...formField,
+            id: fieldId,
+            options: field.options,
+            placeholder: field.placeholder || `Select ${field.label.toLowerCase()}`,
+            error: meta.touched && !!meta.error,
+            disabled: field.disabled,
+            "aria-label": field.label
+          }
+        ),
+        field.type === "radio" && field.options && /* @__PURE__ */ jsx(
+          Radio,
+          {
+            ...formField,
+            id: fieldId,
+            options: field.options,
+            label: field.label,
+            description: field.description,
+            required: field.required,
+            disabled: field.disabled,
+            layout: field.layout || "stacked",
+            error: meta.touched && !!meta.error,
+            "aria-label": field.label
+          }
+        ),
+        field.type === "checkbox" && /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            ...formField,
+            id: fieldId,
+            value: formField.value === true || formField.value === "true",
+            onChange: (checked) => formField.onChange(checked),
+            label: checkboxLabel,
+            description: field.description,
+            disabled: field.disabled,
+            required: field.required,
+            error: meta.touched && !!meta.error,
+            "aria-label": field.label
+          }
+        ),
+        field.type === "checkbox-group" && field.options && /* @__PURE__ */ jsx(
+          CheckboxGroup,
+          {
+            ...formField,
+            id: fieldId,
+            options: field.options,
+            label: field.label,
+            description: field.description,
+            required: field.required,
+            disabled: field.disabled,
+            layout: field.layout || "stacked",
+            error: meta.touched && !!meta.error,
+            "aria-label": field.label
+          }
+        ),
+        (field.type === "date-picker" || field.type === "date") && /* @__PURE__ */ jsx(
+          DatePicker,
+          {
+            ...formField,
+            id: fieldId,
+            placeholder: field.placeholder,
+            error: meta.touched && !!meta.error,
+            disabled: field.disabled,
+            "aria-label": field.label
+          }
+        ),
+        field.type === "date-range" && /* @__PURE__ */ jsx(
+          DateRangePicker,
+          {
+            ...formField,
+            id: fieldId,
+            placeholder: field.placeholder,
+            error: meta.touched && !!meta.error,
+            disabled: field.disabled,
+            "aria-label": field.label
+          }
+        ),
+        field.type === "time" && /* @__PURE__ */ jsx(
+          TimePicker,
+          {
+            ...formField,
+            id: fieldId,
+            placeholder: field.placeholder,
+            error: meta.touched && !!meta.error,
+            disabled: field.disabled,
+            "aria-label": field.label
+          }
+        ),
+        field.type === "file" && /* @__PURE__ */ jsx(
+          FileInput,
+          {
+            ...formField,
+            id: fieldId,
+            accept: field.accept,
+            maxSize: field.maxSize || 5 * 1024 * 1024,
+            maxFiles: field.maxFiles || 1,
+            multiple: field.multiple || false,
+            placeholder: field.placeholder || "Choose file(s)...",
+            error: meta.touched && !!meta.error,
+            disabled: field.disabled || isUploading,
+            showProgress: true,
+            uploadProgress,
+            onChange: (files) => {
+              formField.onChange(files);
+              if (files.length > 0 && onFileUpload) {
+                onFileUpload(files);
+              }
+            },
+            onFileRemove,
+            "aria-label": field.label
+          }
+        ),
+        field.type === "rich-text" && /* @__PURE__ */ jsx(
+          RichTextEditor,
+          {
+            ...formField,
+            id: fieldId,
+            placeholder: field.placeholder,
+            error: meta.touched && !!meta.error,
+            disabled: field.disabled,
+            "aria-label": field.label
+          }
+        )
+      ] })
     }
   );
 }
+
+// lib/form-field-types.ts
+function generateInitialValues(fields) {
+  return fields.reduce(
+    (acc, field) => {
+      if (field.type === "checkbox") {
+        acc[field.name] = false;
+      } else if (field.type === "checkbox-group" || field.type === "multi-select") {
+        acc[field.name] = [];
+      } else if (field.type === "file") {
+        acc[field.name] = [];
+      } else if (field.type === "date-range") {
+        acc[field.name] = { start: null, end: null };
+      } else {
+        acc[field.name] = "";
+      }
+      return acc;
+    },
+    {}
+  );
+}
+function generateValidationSchema(fields) {
+  return fields.reduce(
+    (acc, field) => {
+      acc[field.name] = (value, allValues) => {
+        if (field.required) {
+          if (!value || typeof value === "string" && !value.trim()) {
+            return `${field.label} is required`;
+          }
+        }
+        if (field.type === "email" && value) {
+          if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+            return "Please enter a valid email address";
+          }
+        }
+        if (field.type === "url" && value) {
+          try {
+            new URL(value);
+          } catch {
+            return "Please enter a valid URL";
+          }
+        }
+        if (field.validator) {
+          return field.validator(value, allValues);
+        }
+        return void 0;
+      };
+      return acc;
+    },
+    {}
+  );
+}
+function getColumnSpanClass(span) {
+  if (!span || span === 12) return "col-span-12";
+  return `col-span-12 sm:col-span-${Math.min(span, 12)}`;
+}
+function useContactForm(options) {
+  const {
+    formFields,
+    formConfig,
+    onSubmit,
+    onSuccess,
+    onError,
+    resetOnSuccess = true,
+    uploadTokens = []
+  } = options;
+  const [submissionError, setSubmissionError] = useState(null);
+  const submissionConfig = formConfig?.submissionConfig;
+  const redirectUrl = submissionConfig?.redirectUrl;
+  const redirectNavigation = useNavigation({ href: redirectUrl });
+  const resetSubmissionState = useCallback(() => {
+    setSubmissionError(null);
+  }, []);
+  const performRedirect = useCallback(() => {
+    if (!redirectUrl || typeof window === "undefined") {
+      return;
+    }
+    const navigate = () => {
+      if (redirectNavigation.shouldUseRouter && redirectNavigation.normalizedHref) {
+        const handler = window.__opensiteNavigationHandler;
+        if (typeof handler === "function") {
+          try {
+            const handled = handler(redirectNavigation.normalizedHref, void 0);
+            if (handled !== false) {
+              return;
+            }
+          } catch (error) {
+            console.error("Internal redirect handler failed:", error);
+          }
+        }
+      }
+      const destination = redirectNavigation.normalizedHref || redirectUrl;
+      window.location.assign(destination);
+    };
+    window.setTimeout(navigate, 150);
+  }, [redirectNavigation, redirectUrl]);
+  const form = useForm({
+    initialValues: useMemo(
+      () => generateInitialValues(formFields),
+      [formFields]
+    ),
+    validationSchema: useMemo(
+      () => generateValidationSchema(formFields),
+      [formFields]
+    ),
+    onSubmit: async (values, helpers) => {
+      resetSubmissionState();
+      const shouldAutoSubmit = Boolean(formConfig?.endpoint);
+      if (!shouldAutoSubmit && !onSubmit) {
+        return;
+      }
+      try {
+        let result;
+        const submissionValues = {
+          ...values,
+          ...uploadTokens.length > 0 && {
+            contact_form_upload_tokens: uploadTokens
+          }
+        };
+        if (shouldAutoSubmit) {
+          result = await submitPageSpeedForm(submissionValues, formConfig);
+        }
+        if (onSubmit) {
+          await onSubmit(submissionValues);
+        }
+        if (shouldAutoSubmit || onSubmit) {
+          try {
+            await submissionConfig?.handleFormSubmission?.({
+              formData: submissionValues,
+              responseData: result
+            });
+          } catch (callbackError) {
+            console.error("handleFormSubmission callback failed:", callbackError);
+          }
+          if (resetOnSuccess) {
+            helpers.resetForm();
+          }
+          onSuccess?.(result);
+          if (submissionConfig?.behavior === "redirect" && submissionConfig.redirectUrl) {
+            performRedirect();
+          }
+        }
+      } catch (error) {
+        if (error instanceof PageSpeedFormSubmissionError && error.formErrors) {
+          helpers.setErrors(error.formErrors);
+        }
+        const errorMessage = error instanceof Error ? error.message : "Form submission failed";
+        setSubmissionError(errorMessage);
+        onError?.(error);
+      }
+    }
+  });
+  const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
+  return {
+    form,
+    isSubmitted: form.status === "success",
+    submissionError,
+    formMethod,
+    resetSubmissionState
+  };
+}
+
+// lib/forms.ts
 var PageSpeedFormSubmissionError = class extends Error {
   constructor(message, options = {}) {
     super(message);
@@ -1068,41 +1415,121 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
-var TIME_SLOTS = [
-  "9:00 AM",
-  "10:00 AM",
-  "11:00 AM",
-  "12:00 PM",
-  "1:00 PM",
-  "2:00 PM",
-  "3:00 PM",
-  "4:00 PM",
-  "5:00 PM"
-];
-var TOPICS = [
-  "Product Demo",
-  "Sales Inquiry",
-  "Technical Support",
-  "Partnership",
-  "General Question"
-];
-var TIMEZONES = [
-  { value: "est", label: "Eastern Time (EST)" },
-  { value: "cst", label: "Central Time (CST)" },
-  { value: "mst", label: "Mountain Time (MST)" },
-  { value: "pst", label: "Pacific Time (PST)" }
+var DEFAULT_FORM_FIELDS = [
+  {
+    name: "name",
+    type: "text",
+    label: "Full Name",
+    placeholder: "John Doe",
+    required: true,
+    columnSpan: 6
+  },
+  {
+    name: "company",
+    type: "text",
+    label: "Company",
+    placeholder: "Acme Inc.",
+    required: false,
+    columnSpan: 6
+  },
+  {
+    name: "email",
+    type: "email",
+    label: "Email Address",
+    placeholder: "john@example.com",
+    required: true,
+    columnSpan: 6
+  },
+  {
+    name: "phone",
+    type: "tel",
+    label: "Phone Number",
+    placeholder: "+1 (555) 000-0000",
+    required: true,
+    columnSpan: 6
+  },
+  {
+    name: "date",
+    type: "date",
+    label: "Preferred Date",
+    placeholder: "",
+    required: true,
+    columnSpan: 6
+  },
+  {
+    name: "time",
+    type: "select",
+    label: "Preferred Time",
+    placeholder: "Select a time",
+    required: true,
+    columnSpan: 6,
+    options: [
+      { value: "9:00 AM", label: "9:00 AM" },
+      { value: "10:00 AM", label: "10:00 AM" },
+      { value: "11:00 AM", label: "11:00 AM" },
+      { value: "12:00 PM", label: "12:00 PM" },
+      { value: "1:00 PM", label: "1:00 PM" },
+      { value: "2:00 PM", label: "2:00 PM" },
+      { value: "3:00 PM", label: "3:00 PM" },
+      { value: "4:00 PM", label: "4:00 PM" },
+      { value: "5:00 PM", label: "5:00 PM" }
+    ]
+  },
+  {
+    name: "timezone",
+    type: "select",
+    label: "Timezone",
+    placeholder: "",
+    required: true,
+    columnSpan: 12,
+    options: [
+      { value: "est", label: "Eastern Time (EST)" },
+      { value: "cst", label: "Central Time (CST)" },
+      { value: "mst", label: "Mountain Time (MST)" },
+      { value: "pst", label: "Pacific Time (PST)" }
+    ]
+  },
+  {
+    name: "topic",
+    type: "select",
+    label: "Topic",
+    placeholder: "Select a topic",
+    required: true,
+    columnSpan: 12,
+    options: [
+      { value: "product-demo", label: "Product Demo" },
+      { value: "sales-inquiry", label: "Sales Inquiry" },
+      { value: "technical-support", label: "Technical Support" },
+      { value: "partnership", label: "Partnership" },
+      { value: "general-question", label: "General Question" }
+    ]
+  },
+  {
+    name: "details",
+    type: "textarea",
+    label: "Additional Details (Optional)",
+    placeholder: "Help us prepare for the call by sharing any specific questions or topics you'd like to cover...",
+    required: false,
+    rows: 4,
+    columnSpan: 12
+  }
 ];
 function ContactCallback({
   heading,
   description,
-  buttonText,
+  buttonText = "Schedule Callback",
   buttonIcon = /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/phone", size: 16 }),
   actions,
   actionsSlot,
-  footer,
-  footerSlot,
+  formFields,
+  successMessage = "Thank you! Your callback request has been received.",
+  infoSectionLabel,
+  scheduleSectionLabel,
+  topicSectionLabel,
+  callbackProcessLabel,
+  callbackProcessDescription,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   headingClassName,
   descriptionClassName,
@@ -1110,75 +1537,40 @@ function ContactCallback({
   cardContentClassName,
   formClassName,
   submitClassName,
-  footerClassName,
-  background = "white",
-  spacing = "xl",
+  successMessageClassName,
+  errorMessageClassName,
+  background,
+  spacing = "py-8 md:py-32",
   pattern,
-  patternOpacity = 0.1,
+  patternOpacity,
   formConfig,
   onSubmit,
   onSuccess,
   onError
 }) {
-  const form = useForm({
-    initialValues: {
-      name: "",
-      company: "",
-      email: "",
-      phone: "",
-      date: "",
-      time: "",
-      timezone: "est",
-      topic: "",
-      details: ""
-    },
-    validationSchema: {
-      name: (value) => !value ? "Name is required" : void 0,
-      email: (value) => {
-        if (!value) return "Email is required";
-        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value))
-          return "Please enter a valid email address";
-        return void 0;
-      },
-      phone: (value) => !value ? "Phone number is required" : void 0,
-      date: (value) => !value ? "Date is required" : void 0,
-      time: (value) => !value ? "Time is required" : void 0,
-      topic: (value) => !value ? "Topic is required" : void 0
-    },
-    onSubmit: async (values, helpers) => {
-      const shouldAutoSubmit = Boolean(formConfig?.endpoint);
-      if (!shouldAutoSubmit && !onSubmit) {
-        return;
-      }
-      try {
-        let result;
-        if (shouldAutoSubmit) {
-          result = await submitPageSpeedForm(values, formConfig);
-        }
-        if (onSubmit) {
-          await onSubmit(values);
-        }
-        if (shouldAutoSubmit || onSubmit) {
-          if (formConfig?.resetOnSuccess !== false) {
-            helpers.resetForm();
-          }
-          onSuccess?.(result);
-        }
-      } catch (error) {
-        if (error instanceof PageSpeedFormSubmissionError && error.formErrors) {
-          helpers.setErrors(error.formErrors);
-        }
-        onError?.(error);
-        throw error;
-      }
-    }
+  const fields = useMemo(
+    () => formFields || DEFAULT_FORM_FIELDS,
+    [formFields]
+  );
+  const { form, submissionError, formMethod, resetSubmissionState } = useContactForm({
+    formFields: fields,
+    formConfig,
+    onSubmit,
+    onSuccess,
+    onError
   });
-  const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
-  const actionsContent = React.useMemo(() => {
+  const actionsContent = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (actions && actions.length > 0) {
       return actions.map((action, index) => {
-        const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+        const {
+          label,
+          icon,
+          iconAfter,
+          children,
+          className: actionClassName,
+          ...pressableProps
+        } = action;
         return /* @__PURE__ */ jsx(
           Pressable,
           {
@@ -1197,13 +1589,6 @@ function ContactCallback({
     }
     return null;
   }, [actionsSlot, actions]);
-  const footerContent = React.useMemo(() => {
-    if (footerSlot) return footerSlot;
-    if (footer) {
-      return typeof footer === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-6 text-center text-sm text-muted-foreground", footerClassName), children: footer }) : /* @__PURE__ */ jsx("div", { className: cn("mt-6 text-center text-sm text-muted-foreground", footerClassName), children: footer });
-    }
-    return null;
-  }, [footerSlot, footer, footerClassName]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -1211,11 +1596,21 @@ function ContactCallback({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("pb-12", className),
-      children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-4xl px-4", containerClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mb-10 text-center", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mb-3 text-3xl font-bold tracking-tight", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("leading-relaxed text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        (heading || description) && /* @__PURE__ */ jsxs("div", { className: cn("mb-10 text-center", headerClassName), children: [
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: cn(
+                "mb-3 text-3xl font-bold tracking-tight",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("leading-relaxed", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
         ] }),
         /* @__PURE__ */ jsx(Card, { className: cardClassName, children: /* @__PURE__ */ jsx(CardContent, { className: cn("p-6 lg:p-8", cardContentClassName), children: /* @__PURE__ */ jsxs(
           Form,
@@ -1223,174 +1618,34 @@ function ContactCallback({
             form,
             action: formConfig?.endpoint,
             method: formMethod,
+            submissionError,
+            successMessage,
+            successMessageClassName,
+            errorMessageClassName,
+            submissionConfig: formConfig?.submissionConfig,
+            onNewSubmission: resetSubmissionState,
             className: cn("space-y-6", formClassName),
             children: [
-              /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Your Information" }),
-                /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-6 sm:grid-cols-2", children: [
-                  /* @__PURE__ */ jsx(Field, { name: "name", children: ({ field, meta }) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-                    /* @__PURE__ */ jsx(Label, { htmlFor: "name", children: "Full Name" }),
-                    /* @__PURE__ */ jsx(
-                      TextInput,
-                      {
-                        ...field,
-                        id: "name",
-                        placeholder: "John Doe",
-                        error: meta.touched && !!meta.error,
-                        "aria-label": "Full Name"
-                      }
-                    )
-                  ] }) }),
-                  /* @__PURE__ */ jsx(Field, { name: "company", children: ({ field, meta }) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-                    /* @__PURE__ */ jsx(Label, { htmlFor: "company", children: "Company" }),
-                    /* @__PURE__ */ jsx(
-                      TextInput,
-                      {
-                        ...field,
-                        id: "company",
-                        placeholder: "Acme Inc.",
-                        error: meta.touched && !!meta.error,
-                        "aria-label": "Company"
-                      }
-                    )
-                  ] }) })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-6 sm:grid-cols-2", children: [
-                /* @__PURE__ */ jsx(Field, { name: "email", children: ({ field, meta }) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-                  /* @__PURE__ */ jsx(Label, { htmlFor: "email", children: "Email Address" }),
-                  /* @__PURE__ */ jsx(
-                    TextInput,
-                    {
-                      ...field,
-                      id: "email",
-                      type: "email",
-                      placeholder: "john@example.com",
-                      error: meta.touched && !!meta.error,
-                      "aria-label": "Email Address"
-                    }
-                  )
-                ] }) }),
-                /* @__PURE__ */ jsx(Field, { name: "phone", children: ({ field, meta }) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-                  /* @__PURE__ */ jsx(Label, { htmlFor: "phone", children: "Phone Number" }),
-                  /* @__PURE__ */ jsx(
-                    TextInput,
-                    {
-                      ...field,
-                      id: "phone",
-                      type: "tel",
-                      placeholder: "+1 (555) 000-0000",
-                      error: meta.touched && !!meta.error,
-                      "aria-label": "Phone Number"
-                    }
-                  )
-                ] }) })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "border-t pt-6", children: [
-                /* @__PURE__ */ jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Preferred Callback Time" }),
-                /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-6 sm:grid-cols-2", children: [
-                  /* @__PURE__ */ jsx(Field, { name: "date", children: ({ field, meta }) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-                    /* @__PURE__ */ jsx(Label, { htmlFor: "date", children: "Preferred Date" }),
-                    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-                      /* @__PURE__ */ jsx(
-                        TextInput,
-                        {
-                          ...field,
-                          id: "date",
-                          type: "date",
-                          className: "pl-10",
-                          error: meta.touched && !!meta.error,
-                          "aria-label": "Preferred Date"
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        DynamicIcon,
-                        {
-                          name: "lucide/calendar",
-                          size: 20,
-                          className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
-                        }
-                      )
-                    ] })
-                  ] }) }),
-                  /* @__PURE__ */ jsx(Field, { name: "time", children: ({ field, meta }) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-                    /* @__PURE__ */ jsx(Label, { htmlFor: "time", children: "Preferred Time" }),
-                    /* @__PURE__ */ jsxs(
-                      Select,
-                      {
-                        ...field,
-                        id: "time",
-                        error: meta.touched && !!meta.error,
-                        "aria-label": "Preferred Time",
-                        children: [
-                          /* @__PURE__ */ jsx("option", { value: "", children: "Select a time" }),
-                          TIME_SLOTS.map((slot) => /* @__PURE__ */ jsx("option", { value: slot, children: slot }, slot))
-                        ]
-                      }
-                    )
-                  ] }) })
-                ] }),
-                /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(Field, { name: "timezone", children: ({ field, meta }) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-                  /* @__PURE__ */ jsx(Label, { htmlFor: "timezone", children: "Timezone" }),
-                  /* @__PURE__ */ jsx(
-                    Select,
-                    {
-                      ...field,
-                      id: "timezone",
-                      error: meta.touched && !!meta.error,
-                      "aria-label": "Timezone",
-                      children: TIMEZONES.map((tz) => /* @__PURE__ */ jsx("option", { value: tz.value, children: tz.label }, tz.value))
-                    }
-                  )
-                ] }) }) })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "border-t pt-6", children: [
-                /* @__PURE__ */ jsx("h3", { className: "mb-4 text-lg font-semibold", children: "What would you like to discuss?" }),
-                /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-                  /* @__PURE__ */ jsx(Field, { name: "topic", children: ({ field, meta }) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-                    /* @__PURE__ */ jsx(Label, { htmlFor: "topic", children: "Topic" }),
-                    /* @__PURE__ */ jsxs(
-                      Select,
-                      {
-                        ...field,
-                        id: "topic",
-                        error: meta.touched && !!meta.error,
-                        "aria-label": "Topic",
-                        children: [
-                          /* @__PURE__ */ jsx("option", { value: "", children: "Select a topic" }),
-                          TOPICS.map((topic) => /* @__PURE__ */ jsx("option", { value: topic.toLowerCase(), children: topic }, topic))
-                        ]
-                      }
-                    )
-                  ] }) }),
-                  /* @__PURE__ */ jsx(Field, { name: "details", children: ({ field, meta }) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-                    /* @__PURE__ */ jsx(Label, { htmlFor: "details", children: "Additional Details (Optional)" }),
-                    /* @__PURE__ */ jsx(
-                      TextArea,
-                      {
-                        ...field,
-                        id: "details",
-                        placeholder: "Help us prepare for the call by sharing any specific questions or topics you'd like to cover...",
-                        rows: 4,
-                        error: meta.touched && !!meta.error,
-                        "aria-label": "Additional Details"
-                      }
-                    )
-                  ] }) })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx("div", { className: "rounded-lg border p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-12 gap-6", children: fields.map((field) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: getColumnSpanClass(field.columnSpan),
+                  children: /* @__PURE__ */ jsx(DynamicFormField, { field })
+                },
+                field.name
+              )) }),
+              (callbackProcessLabel || callbackProcessDescription) && /* @__PURE__ */ jsx("div", { className: "rounded-lg border p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
                 /* @__PURE__ */ jsx(
                   DynamicIcon,
                   {
                     name: "lucide/clock",
                     size: 20,
-                    className: "mt-1 shrink-0 text-primary"
+                    className: "mt-1 shrink-0"
                   }
                 ),
                 /* @__PURE__ */ jsxs("div", { className: "text-sm", children: [
-                  /* @__PURE__ */ jsx("p", { className: "font-medium", children: "Callback Process" }),
-                  /* @__PURE__ */ jsx("p", { className: "mt-1 leading-relaxed text-muted-foreground", children: "We'll call you at the scheduled time at the phone number you provided. Please ensure you're available to answer. If you miss the call, we'll send you a follow-up email." })
+                  callbackProcessLabel && /* @__PURE__ */ jsx("p", { className: "font-medium", children: callbackProcessLabel }),
+                  callbackProcessDescription && /* @__PURE__ */ jsx("p", { className: "mt-1 leading-relaxed", children: callbackProcessDescription })
                 ] })
               ] }) }),
               actionsSlot || actions && actions.length > 0 ? actionsContent : /* @__PURE__ */ jsxs(
@@ -1404,14 +1659,13 @@ function ContactCallback({
                   disabled: form.isSubmitting,
                   children: [
                     buttonIcon,
-                    buttonText
+                    buttonText || "Schedule Callback"
                   ]
                 }
               )
             ]
           }
-        ) }) }),
-        footerContent
+        ) }) })
       ] })
     }
   );