@opensite/ui 2.1.3 → 2.1.5

package/dist/components.js

@@ -14,8 +14,8 @@ import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { Icon } from '@page-speed/icon';
 import { usePlatformFromUrl } from '@opensite/hooks/usePlatformFromUrl';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
-import { Form, useForm, Field } from '@page-speed/forms';
 import { useFileUpload, useContactForm, DynamicFormField, submitPageSpeedForm, PageSpeedFormSubmissionError, isValidEmail } from '@page-speed/forms/integration';
+import { Form, useForm, Field } from '@page-speed/forms';
 import { TextInput as TextInput$1 } from '@page-speed/forms/inputs';
 
 // components/ui/container.tsx
@@ -2579,6 +2579,70 @@ function CommunityInitiatives({
     }
   );
 }
+var MOBILE_CLASSES = {
+  "fit-left": "items-start md:items-center",
+  "fit-center": "items-center",
+  "fit-right": "items-end md:items-center",
+  "full-left": "items-stretch md:items-center",
+  "full-center": "items-stretch md:items-center",
+  "full-right": "items-stretch md:items-center"
+};
+function BlockActions({
+  mobileConfig,
+  actionsClassName,
+  verticalSpacing = "mt-4 md:mt-8",
+  actions,
+  actionsSlot
+}) {
+  const width = mobileConfig?.width ?? "full";
+  const position = mobileConfig?.position ?? "center";
+  const mobileLayoutClass = MOBILE_CLASSES[`${width}-${position}`];
+  if (actionsSlot) {
+    return /* @__PURE__ */ jsx("div", { children: actionsSlot });
+  } else if (actions && actions?.length > 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col md:flex-row flex-wrap gap-4",
+          mobileLayoutClass,
+          actionsClassName,
+          verticalSpacing
+        ),
+        children: actions.map((action, index) => /* @__PURE__ */ jsx(ActionComponent, { action }, index))
+      }
+    );
+  } else {
+    return null;
+  }
+}
+function ActionComponent({ action }) {
+  const {
+    label,
+    icon,
+    iconAfter,
+    children,
+    href,
+    onClick,
+    className: actionClassName,
+    ...pressableProps
+  } = action;
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      href,
+      onClick,
+      asButton: action.asButton ?? true,
+      className: actionClassName,
+      ...pressableProps,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon,
+        label,
+        iconAfter
+      ] })
+    }
+  );
+}
 function AboutCultureTabs({
   badgeText,
   heading,
@@ -2592,7 +2656,7 @@ function AboutCultureTabs({
   ctaImages,
   ctaImagesSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   badgeClassName,
   headingClassName,
@@ -2604,45 +2668,33 @@ function AboutCultureTabs({
   actionsClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
   const resolvedAspects = aspects ?? [];
-  const [activeTab, setActiveTab] = React4.useState(resolvedAspects[0]?.id || "");
-  const actionsContent = useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
-      return /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    });
-  }, [actionsSlot, actions]);
+  const [activeTab, setActiveTab] = React4.useState(
+    resolvedAspects[0]?.id || ""
+  );
   const ctaImagesContent = useMemo(() => {
     if (ctaImagesSlot) return ctaImagesSlot;
     if (!ctaImages || ctaImages.length === 0) return null;
-    return ctaImages.map((src, i) => /* @__PURE__ */ jsx("div", { className: "relative aspect-square overflow-hidden rounded-md", children: /* @__PURE__ */ jsx(
-      Img,
+    return ctaImages.map((src, i) => /* @__PURE__ */ jsx(
+      "div",
       {
-        src,
-        alt: "Team culture",
-        className: "h-full w-full object-cover",
-        optixFlowConfig
-      }
-    ) }, i));
+        className: "relative aspect-square overflow-hidden rounded-md",
+        children: /* @__PURE__ */ jsx(
+          Img,
+          {
+            src,
+            alt: "Team culture",
+            className: "h-full w-full object-cover",
+            optixFlowConfig
+          }
+        )
+      },
+      i
+    ));
   }, [ctaImagesSlot, ctaImages, optixFlowConfig]);
   return /* @__PURE__ */ jsxs(
     Section,
@@ -2651,14 +2703,32 @@ function AboutCultureTabs({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
+      className,
       containerClassName,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mx-auto mb-12 max-w-3xl space-y-4 text-center", headerClassName), children: [
-          badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsx("div", { className: cn("inline-block rounded-lg bg-primary/10 px-3 py-1 text-sm", getAccentColor(background), badgeClassName), children: badgeText }) : /* @__PURE__ */ jsx("div", { className: badgeClassName, children: badgeText })),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold tracking-tight md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn(getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
-        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "mx-auto mb-12 max-w-full md:max-w-md space-y-4 text-center flex flex-col items-center justify-center",
+              headerClassName
+            ),
+            children: [
+              badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsx(Badge, { className: cn("px-3 py-1", badgeClassName), children: badgeText }) : badgeText),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-3xl font-bold tracking-tight md:text-4xl text-pretty",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : heading),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-balance", descriptionClassName), children: description }) : description)
+            ]
+          }
+        ),
         aspectsSlot ? aspectsSlot : resolvedAspects.length > 0 ? /* @__PURE__ */ jsxs(
           Tabs,
           {
@@ -2671,80 +2741,103 @@ function AboutCultureTabs({
                 TabsTrigger,
                 {
                   value: aspect.id,
-                  className: cn("px-3 py-2.5", `data-[state=active]:${getAccentColor(background)}`, "data-[state=active]:text-primary-foreground"),
+                  className: cn("px-3 py-2.5"),
                   children: aspect.title
                 },
                 aspect.id
               )) }) }),
-              resolvedAspects.map((aspect) => /* @__PURE__ */ jsxs(TabsContent, { value: aspect.id, className: "space-y-8", children: [
-                /* @__PURE__ */ jsxs("div", { className: "grid gap-6 md:grid-cols-2", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-                    /* @__PURE__ */ jsx("h3", { className: "text-2xl font-bold tracking-tight", children: aspect.title }),
-                    /* @__PURE__ */ jsx("p", { className: cn("leading-relaxed", getTextColor(background, "muted")), children: aspect.description })
-                  ] }),
-                  /* @__PURE__ */ jsx(Card, { className: "border-0 bg-gradient-to-br from-primary/5 to-primary/10 p-0", children: /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4 p-6 pt-6", children: [
-                    /* @__PURE__ */ jsx(
-                      DynamicIcon,
-                      {
-                        name: "lucide/quote",
-                        size: 32,
-                        className: cn(getAccentColor(background), "opacity-40")
-                      }
-                    ),
-                    /* @__PURE__ */ jsxs("p", { className: cn("italic", getTextColor(background, "muted")), children: [
-                      '"',
-                      aspect.testimonial.quote,
-                      '"'
+              resolvedAspects.map((aspect) => /* @__PURE__ */ jsxs(
+                TabsContent,
+                {
+                  value: aspect.id,
+                  className: "space-y-8",
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "grid gap-6 md:grid-cols-2", children: [
+                      /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+                        /* @__PURE__ */ jsx("h3", { className: "text-2xl font-bold tracking-tight", children: aspect.title }),
+                        /* @__PURE__ */ jsx("p", { className: cn("leading-relaxed"), children: aspect.description })
+                      ] }),
+                      /* @__PURE__ */ jsx(Card, { className: "border-0 p-0", children: /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4 p-6 pt-6", children: [
+                        /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/quote", size: 32 }),
+                        /* @__PURE__ */ jsxs("p", { className: "italic", children: [
+                          '"',
+                          aspect.testimonial.quote,
+                          '"'
+                        ] }),
+                        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 pt-2", children: [
+                          /* @__PURE__ */ jsx("div", { className: "relative h-10 w-10 overflow-hidden rounded-full", children: /* @__PURE__ */ jsx(
+                            Img,
+                            {
+                              src: aspect.testimonial.avatar,
+                              alt: aspect.testimonial.author,
+                              className: "h-full w-full object-cover",
+                              optixFlowConfig
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsxs("div", { children: [
+                            /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium", children: aspect.testimonial.author }),
+                            /* @__PURE__ */ jsx("p", { className: "text-xs", children: aspect.testimonial.role })
+                          ] })
+                        ] })
+                      ] }) })
                     ] }),
-                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 pt-2", children: [
-                      /* @__PURE__ */ jsx("div", { className: "relative h-10 w-10 overflow-hidden rounded-full", children: /* @__PURE__ */ jsx(
-                        Img,
-                        {
-                          src: aspect.testimonial.avatar,
-                          alt: aspect.testimonial.author,
-                          className: "h-full w-full object-cover",
-                          optixFlowConfig
-                        }
-                      ) }),
-                      /* @__PURE__ */ jsxs("div", { children: [
-                        /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium", children: aspect.testimonial.author }),
-                        /* @__PURE__ */ jsx("p", { className: cn("text-xs", getTextColor(background, "muted")), children: aspect.testimonial.role })
-                      ] })
-                    ] })
-                  ] }) })
-                ] }),
-                /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-3", children: aspect.images.map((image, idx) => /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "relative aspect-[4/3] overflow-hidden rounded-lg",
-                    children: /* @__PURE__ */ jsx(
-                      Img,
+                    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-3", children: aspect.images.map((image, idx) => /* @__PURE__ */ jsx(
+                      "div",
                       {
-                        src: image,
-                        alt: `${aspect.title} culture`,
-                        className: "h-full w-full transform object-cover transition-transform duration-500 hover:scale-105",
-                        optixFlowConfig
-                      }
-                    )
-                  },
-                  idx
-                )) })
-              ] }, aspect.id))
+                        className: "relative aspect-4/3 overflow-hidden rounded-lg",
+                        children: /* @__PURE__ */ jsx(
+                          Img,
+                          {
+                            src: image,
+                            alt: `${aspect.title} culture`,
+                            className: "h-full w-full transform object-cover transition-transform duration-500 hover:scale-105",
+                            optixFlowConfig
+                          }
+                        )
+                      },
+                      idx
+                    )) })
+                  ]
+                },
+                aspect.id
+              ))
             ]
           }
         ) : null,
-        /* @__PURE__ */ jsxs("div", { className: cn("relative mt-16 rounded-xl border bg-background p-8 md:p-12", ctaClassName), children: [
-          /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-8 md:grid-cols-2", children: [
-            /* @__PURE__ */ jsxs("div", { children: [
-              ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("mb-4 text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", ctaHeadingClassName), children: ctaHeading })),
-              ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-6", getTextColor(background, "muted"), ctaDescriptionClassName), children: ctaDescription }) : /* @__PURE__ */ jsx("div", { className: cn("mb-6", ctaDescriptionClassName), children: ctaDescription })),
-              (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("flex gap-4", actionsClassName), children: actionsContent })
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", children: ctaImagesContent })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "absolute -left-5 -top-5 h-10 w-10 rounded-full bg-primary/10" }),
-          /* @__PURE__ */ jsx("div", { className: "absolute -bottom-5 -right-5 h-10 w-10 rounded-full bg-primary/10" })
-        ] })
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "relative mt-16 rounded-xl border p-8 md:p-12",
+              ctaClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-8 md:grid-cols-2", children: [
+                /* @__PURE__ */ jsxs("div", { children: [
+                  ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsx(
+                    "h3",
+                    {
+                      className: cn("mb-4 text-2xl font-bold", ctaHeadingClassName),
+                      children: ctaHeading
+                    }
+                  ) : ctaHeading),
+                  ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-6", ctaDescriptionClassName), children: ctaDescription }) : ctaDescription),
+                  /* @__PURE__ */ jsx(
+                    BlockActions,
+                    {
+                      actions,
+                      actionsSlot,
+                      actionsClassName
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", children: ctaImagesContent })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "absolute -left-5 -top-5 h-10 w-10 rounded-full bg-primary/10" }),
+              /* @__PURE__ */ jsx("div", { className: "absolute -bottom-5 -right-5 h-10 w-10 rounded-full bg-primary/10" })
+            ]
+          }
+        )
       ]
     }
   );

package/dist/contact-faq.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var React = require('react');
+var React3 = require('react');
 var integration = require('@page-speed/forms/integration');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
@@ -9,8 +9,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var icon = require('@page-speed/icon');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   var n = Object.create(null);
@@ -29,7 +27,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__default = /*#__PURE__*/_interopDefault(React);
+var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
 var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 
 // components/blocks/contact/contact-faq.tsx
@@ -132,7 +130,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React__default.default.forwardRef(
+var Container = React3__namespace.default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -437,7 +435,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React__default.default.forwardRef(
+var Section = React3__namespace.default.forwardRef(
   ({
     id,
     title,
@@ -498,6 +496,14 @@ var Section = React__default.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var DEFAULT_STYLE_RULES = {
+  formContainer: "",
+  fieldsContainer: "",
+  fieldClassName: "",
+  formClassName: "space-y-6",
+  successMessageClassName: "text-green-600 dark:text-green-400 mt-4 p-3 rounded-md bg-green-50 dark:bg-green-950/20",
+  errorMessageClassName: "text-red-600 dark:text-red-400 mt-4 p-3 rounded-md bg-red-50 dark:bg-red-950/20"
+};
 var DEFAULT_FORM_FIELDS = [
   {
     name: "name",
@@ -542,8 +548,7 @@ function ContactFaq({
   items,
   itemsSlot,
   faqHeading,
-  formFields = DEFAULT_FORM_FIELDS,
-  successMessage = "Thank you! Your message has been sent successfully.",
+  formEngineSetup,
   className,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
@@ -552,7 +557,6 @@ function ContactFaq({
   cardClassName,
   cardContentClassName,
   formHeadingClassName,
-  formClassName,
   faqHeadingClassName,
   faqContainerClassName,
   accordionClassName,
@@ -560,27 +564,30 @@ function ContactFaq({
   accordionTriggerClassName,
   accordionContentClassName,
   gridClassName,
-  successMessageClassName,
-  errorMessageClassName,
   background,
   spacing = "py-8 md:py-32",
   pattern,
-  patternOpacity,
-  formConfig,
-  onSubmit,
-  onSuccess,
-  onError
+  patternOpacity
 }) {
-  const {
-    uploadTokens,
-    uploadProgress,
-    isUploading,
-    uploadFiles,
-    removeFile,
-    resetUpload
-  } = integration.useFileUpload({ onError });
+  const formStyleRules = React3__namespace.useMemo(() => {
+    return {
+      formContainer: formEngineSetup?.formLayoutSettings?.styleRules?.formContainer ?? DEFAULT_STYLE_RULES.formContainer,
+      fieldsContainer: formEngineSetup?.formLayoutSettings?.styleRules?.fieldsContainer ?? DEFAULT_STYLE_RULES.fieldsContainer,
+      fieldClassName: formEngineSetup?.formLayoutSettings?.styleRules?.fieldClassName ?? DEFAULT_STYLE_RULES.fieldClassName,
+      formClassName: formEngineSetup?.formLayoutSettings?.styleRules?.formClassName ?? DEFAULT_STYLE_RULES.formClassName,
+      successMessageClassName: formEngineSetup?.formLayoutSettings?.styleRules?.successMessageClassName ?? DEFAULT_STYLE_RULES.successMessageClassName,
+      errorMessageClassName: formEngineSetup?.formLayoutSettings?.styleRules?.errorMessageClassName ?? DEFAULT_STYLE_RULES.errorMessageClassName
+    };
+  }, [formEngineSetup?.formLayoutSettings?.styleRules]);
+  const formFields = React3__namespace.useMemo(() => {
+    if (formEngineSetup && formEngineSetup?.fields && formEngineSetup?.fields?.length > 0) {
+      return formEngineSetup.fields;
+    } else {
+      return DEFAULT_FORM_FIELDS;
+    }
+  }, [formEngineSetup?.fields]);
   const hasFaqItems = itemsSlot || items && items.length > 0;
-  const faqContent = React.useMemo(() => {
+  const faqContent = React3.useMemo(() => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "single", collapsible: true, className: accordionClassName, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -673,40 +680,25 @@ function ContactFaq({
                     children: formHeading
                   }
                 ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: formHeadingClassName, children: formHeading })),
-                /* @__PURE__ */ jsxRuntime.jsx(
+                formEngineSetup ? /* @__PURE__ */ jsxRuntime.jsx(
                   integration.FormEngine,
                   {
-                    api: formConfig,
-                    fields: formFields,
+                    ...formEngineSetup,
                     formLayoutSettings: {
+                      ...formEngineSetup.formLayoutSettings,
                       formLayout: "standard",
                       submitButtonSetup: {
+                        ...formEngineSetup.formLayoutSettings?.submitButtonSetup,
                         submitLabel: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                           buttonIcon,
                           buttonText
                         ] })
                       },
-                      styleRules: {
-                        formClassName: cn("space-y-6", formClassName),
-                        successMessageClassName,
-                        errorMessageClassName
-                      }
-                    },
-                    successMessage,
-                    onSubmit,
-                    onSuccess: (data) => {
-                      resetUpload();
-                      onSuccess?.(data);
+                      styleRules: formStyleRules
                     },
-                    onError,
-                    resetOnSuccess: formConfig?.resetOnSuccess !== false,
-                    uploadTokens,
-                    uploadProgress,
-                    onFileUpload: uploadFiles,
-                    onFileRemove: removeFile,
-                    isUploading
+                    fields: formFields
                   }
-                )
+                ) : null
               ] }) }),
               hasFaqItems && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative", faqContainerClassName), children: [
                 faqHeading && (typeof faqHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(

package/dist/contact-faq.d.cts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FormFieldConfig, PageSpeedFormConfig } from '@page-speed/forms/integration';
+import { FormEngineProps } from '@page-speed/forms/integration';
 import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
 import 'react/jsx-runtime';
 import './blocks-DP3Vofl4.cjs';
@@ -46,15 +46,9 @@ interface ContactFaqProps {
      */
     faqHeading?: React.ReactNode;
     /**
-     * Array of form field configurations
-     * If not provided, defaults to: name, email, subject, message
+     * Full form engine setup and props
      */
-    formFields?: FormFieldConfig[];
-    /**
-     * Success message to display after form submission
-     * @default "Thank you! Your message has been sent successfully."
-     */
-    successMessage?: React.ReactNode;
+    formEngineSetup?: FormEngineProps;
     /**
      * Additional CSS classes for the section
      */
@@ -87,14 +81,6 @@ interface ContactFaqProps {
      * Additional CSS classes for the form heading
      */
     formHeadingClassName?: string;
-    /**
-     * Additional CSS classes for the form
-     */
-    formClassName?: string;
-    /**
-     * Additional CSS classes for the submit button
-     */
-    submitClassName?: string;
     /**
      * Additional CSS classes for the FAQ heading
      */
@@ -123,14 +109,6 @@ interface ContactFaqProps {
      * Additional CSS classes for the two-column grid wrapper
      */
     gridClassName?: string;
-    /**
-     * Additional CSS classes for the success message
-     */
-    successMessageClassName?: string;
-    /**
-     * Additional CSS classes for the error message
-     */
-    errorMessageClassName?: string;
     /**
      * Background style for the section
      */
@@ -147,26 +125,10 @@ interface ContactFaqProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
-    /**
-     * Form configuration for PageSpeed forms
-     */
-    formConfig?: PageSpeedFormConfig;
-    /**
-     * Custom submit handler
-     */
-    onSubmit?: (values: Record<string, any>) => void | Promise<void>;
-    /**
-     * Success callback
-     */
-    onSuccess?: (data: unknown) => void;
-    /**
-     * Error callback
-     */
-    onError?: (error: Error) => void;
 }
 /**
  * ContactFaq - FAQ contact form with flexible field configuration
  */
-declare function ContactFaq({ heading, description, formHeading, buttonText, buttonIcon, items, itemsSlot, faqHeading, formFields, successMessage, className, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formHeadingClassName, formClassName, faqHeadingClassName, faqContainerClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, gridClassName, successMessageClassName, errorMessageClassName, background, spacing, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactFaqProps): React.JSX.Element;
+declare function ContactFaq({ heading, description, formHeading, buttonText, buttonIcon, items, itemsSlot, faqHeading, formEngineSetup, className, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formHeadingClassName, faqHeadingClassName, faqContainerClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, gridClassName, background, spacing, pattern, patternOpacity, }: ContactFaqProps): React.JSX.Element;
 
 export { ContactFaq, type ContactFaqProps, type FaqItem };