@opensite/ui 2.4.9 → 2.5.0

package/dist/offer-modal-membership-image.cjs

@@ -2,8 +2,6 @@
 'use strict';
 
 var React = require('react');
-var forms = require('@page-speed/forms');
-var inputs = require('@page-speed/forms/inputs');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var classVarianceAuthority = require('class-variance-authority');
@@ -35,7 +33,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
 
 // components/blocks/offer-modal/offer-modal-membership-image.tsx
-var TextInput = inputs.TextInput;
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -771,7 +768,8 @@ var spacingStyles = {
   sm: "py-12 md:py-16",
   md: "py-16 md:py-24",
   lg: "py-20 md:py-32",
-  xl: "py-24 md:py-40"
+  xl: "py-24 md:py-40",
+  hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
@@ -941,25 +939,34 @@ function DialogDescription({
     }
   );
 }
-var { useMemo: useMemo2 } = React__namespace;
+var DEFAULT_STYLE_RULES = {
+  formContainer: "flex items-stretch w-full",
+  fieldsContainer: "",
+  fieldClassName: "",
+  formClassName: ""
+};
+var DEFAULT_FORM_FIELDS = [
+  {
+    name: "email",
+    type: "email",
+    label: "Email Address",
+    placeholder: "Enter your email",
+    required: true,
+    columnSpan: 12
+  }
+];
 function OfferModalMembershipImage({
   overline,
   title,
   description,
   image,
   imageSlot,
-  emailPlaceholder,
-  buttonText,
   closeButtonSlot,
   formSlot,
   footerSlot,
   open,
   onOpenChange,
   defaultOpen = true,
-  onSubmit,
-  formConfig,
-  onSuccess,
-  onError,
   className,
   imageWrapperClassName,
   imageClassName,
@@ -968,70 +975,46 @@ function OfferModalMembershipImage({
   titleClassName,
   descriptionClassName,
   formClassName,
-  inputClassName,
-  submitClassName,
   closeClassName,
   footerClassName,
   optixFlowConfig,
-  background = "default"
+  background = "default",
+  formEngineSetup,
+  buttonAction
 }) {
-  const form = forms.useForm({
-    initialValues: {
-      email: ""
-    },
-    validationSchema: {
-      email: (value) => {
-        if (!value) return "Please enter an email address";
-        if (!integration.isValidEmail(value)) {
-          return "Please enter a valid email address";
-        }
-        return void 0;
-      }
-    },
-    onSubmit: async (values, helpers) => {
-      const shouldAutoSubmit = Boolean(formConfig?.endpoint);
-      if (!shouldAutoSubmit && !onSubmit) {
-        return;
-      }
-      try {
-        let result;
-        if (shouldAutoSubmit) {
-          result = await integration.submitPageSpeedForm(values, formConfig);
-        }
-        if (onSubmit) {
-          await onSubmit(values.email);
-        }
-        if (shouldAutoSubmit || onSubmit) {
-          if (formConfig?.resetOnSuccess !== false) {
-            helpers.resetForm();
-          }
-          onSuccess?.(result);
-        }
-      } catch (error) {
-        if (error instanceof integration.PageSpeedFormSubmissionError && error.formErrors) {
-          helpers.setErrors(error.formErrors);
-        }
-        onError?.(error);
-        throw error;
-      }
-    }
-  });
-  const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
   const dialogProps = open !== void 0 ? { open, onOpenChange } : { defaultOpen };
-  const renderImage = useMemo2(() => {
+  const renderImage = React__namespace.useMemo(() => {
     if (imageSlot) return imageSlot;
     if (!image) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("max-h-[290px] h-full overflow-hidden max-lg:hidden", imageWrapperClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
-      img.Img,
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
       {
-        src: image.src,
-        alt: image.alt,
-        className: cn("block size-full object-cover object-[50%_15%]", imageClassName),
-        optixFlowConfig
+        className: cn(
+          "max-h-[290px] h-full overflow-hidden max-lg:hidden",
+          imageWrapperClassName
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          img.Img,
+          {
+            src: image.src,
+            alt: image.alt,
+            className: cn(
+              "block size-full object-cover object-[50%_15%]",
+              imageClassName
+            ),
+            optixFlowConfig
+          }
+        )
       }
-    ) });
-  }, [imageSlot, image, imageWrapperClassName, imageClassName, optixFlowConfig]);
-  const renderCloseButton = useMemo2(() => {
+    );
+  }, [
+    imageSlot,
+    image,
+    imageWrapperClassName,
+    imageClassName,
+    optixFlowConfig
+  ]);
+  const renderCloseButton = React__namespace.useMemo(() => {
     if (closeButtonSlot) return closeButtonSlot;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -end-px -top-px z-10", children: /* @__PURE__ */ jsxRuntime.jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       Pressable,
@@ -1047,73 +1030,52 @@ function OfferModalMembershipImage({
       }
     ) }) });
   }, [closeButtonSlot, closeClassName]);
-  const renderForm = useMemo2(() => {
+  const renderForm = React__namespace.useMemo(() => {
     if (formSlot) return formSlot;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      forms.Form,
+    if (!formEngineSetup) return null;
+    const defaultButtonAction = {
+      label: "",
+      variant: "default",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
+    };
+    const action = buttonAction || defaultButtonAction;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      integration.FormEngine,
       {
-        form,
-        action: formConfig?.endpoint,
-        method: formMethod,
-        className: cn("space-y-2.5", formClassName),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              forms.Field,
-              {
-                name: "email",
-                className: "flex-1",
-                children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    TextInput,
-                    {
-                      ...field,
-                      type: "email",
-                      placeholder: emailPlaceholder,
-                      error: (meta.touched || form.status === "error") && !!meta.error,
-                      className: cn("w-full pr-10", inputClassName),
-                      "aria-label": emailPlaceholder || "Email address"
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/mail", size: 16 }) }),
-                  (meta.touched || form.status === "error") && meta.error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-destructive mt-1 text-xs", children: meta.error })
-                ] })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Pressable,
-              {
-                size: "icon",
-                variant: "default",
-                className: cn("lg:hidden", submitClassName),
-                asButton: true,
-                componentType: "button",
-                type: "submit",
-                disabled: form.isSubmitting,
-                children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Pressable,
-            {
-              className: cn("w-full max-lg:hidden", submitClassName),
-              variant: "default",
-              asButton: true,
-              componentType: "button",
-              type: "submit",
-              disabled: form.isSubmitting,
-              children: buttonText
+        formEngineSetup: {
+          ...formEngineSetup,
+          formLayoutSettings: {
+            ...formEngineSetup.formLayoutSettings,
+            formLayout: "button-group",
+            buttonGroupSetup: {
+              ...formEngineSetup.formLayoutSettings?.buttonGroupSetup,
+              size: "default",
+              submitLabel: action.icon || action.label,
+              submitVariant: action.variant || "default"
             }
-          )
-        ]
+          }
+        },
+        defaultFields: DEFAULT_FORM_FIELDS,
+        defaultStyleRules: {
+          ...DEFAULT_STYLE_RULES,
+          formContainer: cn(DEFAULT_STYLE_RULES.formContainer, formClassName)
+        }
       }
     );
-  }, [formSlot, form, formConfig, formMethod, emailPlaceholder, inputClassName, submitClassName, buttonText, formClassName]);
-  const renderFooter = useMemo2(() => {
+  }, [formSlot, formEngineSetup, buttonAction, formClassName]);
+  const renderFooter = React__namespace.useMemo(() => {
     if (footerSlot) return footerSlot;
     if (!description) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(DialogFooter, { className: footerClassName, children: /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { className: cn("text-muted-foreground text-center text-xs leading-relaxed", descriptionClassName), children: description }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(DialogFooter, { className: footerClassName, children: /* @__PURE__ */ jsxRuntime.jsx(
+      DialogDescription,
+      {
+        className: cn(
+          "text-muted-foreground text-center text-xs leading-relaxed",
+          descriptionClassName
+        ),
+        children: description
+      }
+    ) });
   }, [footerSlot, description, footerClassName, descriptionClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { ...dialogProps, children: /* @__PURE__ */ jsxRuntime.jsxs(
     DialogContent,
@@ -1126,14 +1088,41 @@ function OfferModalMembershipImage({
       children: [
         renderCloseButton,
         renderImage,
-        /* @__PURE__ */ jsxRuntime.jsx(Section, { background, spacing: "none", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("lg:px-15 space-y-5 overflow-y-auto px-9 py-5 lg:py-7", contentClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2.5", children: [
-            overline && (typeof overline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-sm font-bold uppercase leading-none", overlineClassName), children: overline }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: overlineClassName, children: overline })),
-            title && /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: cn("text-center text-3xl font-bold", titleClassName), children: title })
-          ] }),
-          renderForm,
-          renderFooter
-        ] }) })
+        /* @__PURE__ */ jsxRuntime.jsx(Section, { background, spacing: "none", children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "lg:px-15 space-y-5 overflow-y-auto px-9 py-5 lg:py-7",
+              contentClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2.5", children: [
+                overline && (typeof overline === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "text-center text-sm font-bold uppercase leading-none",
+                      overlineClassName
+                    ),
+                    children: overline
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: overlineClassName, children: overline })),
+                title && /* @__PURE__ */ jsxRuntime.jsx(
+                  DialogTitle,
+                  {
+                    className: cn(
+                      "text-center text-3xl font-bold",
+                      titleClassName
+                    ),
+                    children: title
+                  }
+                )
+              ] }),
+              renderForm,
+              renderFooter
+            ]
+          }
+        ) })
       ]
     }
   ) });

package/dist/offer-modal-membership-image.d.cts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { PageSpeedFormConfig } from '@page-speed/forms/integration';
-import { f as SectionBackground } from './community-initiatives-DcLp6ycJ.cjs';
-import { I as ImageItem, O as OptixFlowConfig } from './blocks-C1EhIN1e.cjs';
+import { f as SectionBackground } from './community-initiatives-B658AD6n.cjs';
+import { FormEngineProps } from '@page-speed/forms/integration';
+import { I as ImageItem, O as OptixFlowConfig, A as ActionConfig } from './blocks-DUr75v0S.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 
@@ -29,14 +29,6 @@ interface OfferModalMembershipImageProps {
      * Custom slot for rendering the image (overrides image prop)
      */
     imageSlot?: React.ReactNode;
-    /**
-     * Placeholder text for the email input
-     */
-    emailPlaceholder?: string;
-    /**
-     * Text for the submit button
-     */
-    buttonText?: React.ReactNode;
     /**
      * Custom slot for the close button (overrides default close button)
      */
@@ -61,60 +53,6 @@ interface OfferModalMembershipImageProps {
      * Whether the dialog is open by default (uncontrolled mode)
      */
     defaultOpen?: boolean;
-    /**
-     * Optional custom submission handler for maximum flexibility.
-     *
-     * Use this when you need complete control over the submission logic,
-     * such as custom API calls, analytics tracking, or multi-step workflows.
-     *
-     * Can be used alone or in combination with `formConfig` for hybrid approaches.
-     *
-     * @example
-     * onSubmit={async (email) => {
-     *   await fetch("/api/subscribe", {
-     *     method: "POST",
-     *     body: JSON.stringify({ email, membership: "premium" })
-     *   });
-     * }}
-     */
-    onSubmit?: (email: string) => void | Promise<void>;
-    /**
-     * Optional form submission configuration.
-     *
-     * **Universal Usage**: Works with ANY REST API endpoint. Simply provide an `endpoint` URL
-     * and the form will submit to it in JSON format.
-     *
-     * @example
-     * // Works with any API
-     * formConfig={{ endpoint: "https://api.mysite.com/subscribe", format: "json" }}
-     *
-     * @example
-     * // With custom headers (e.g., authentication)
-     * formConfig={{
-     *   endpoint: "/api/newsletter",
-     *   headers: { "Authorization": "Bearer token123" }
-     * }}
-     *
-     * **Note**: The `apiKey`, `contactCategoryToken`, and other platform-specific fields
-     * are OPTIONAL and only needed when integrating with DashTrack's Rails backend.
-     * For generic REST APIs, just use `endpoint`, `method`, `format`, and `headers`.
-     *
-     * See `FORMS_INTEGRATION_GUIDE.md` for complete examples with Next.js, React, and more.
-     */
-    formConfig?: PageSpeedFormConfig;
-    /**
-     * Optional success callback invoked after successful submission.
-     *
-     * Called after `formConfig` submission and/or `onSubmit` completes successfully.
-     * Use for showing success messages, redirecting, analytics tracking, etc.
-     */
-    onSuccess?: (data: unknown) => void;
-    /**
-     * Optional error callback invoked if submission fails.
-     *
-     * Receives the error object for custom error handling, logging, or user notifications.
-     */
-    onError?: (error: Error) => void;
     /**
      * Additional CSS classes for the dialog content wrapper
      */
@@ -147,14 +85,6 @@ interface OfferModalMembershipImageProps {
      * Additional CSS classes for the form
      */
     formClassName?: string;
-    /**
-     * Additional CSS classes for the email input
-     */
-    inputClassName?: string;
-    /**
-     * Additional CSS classes for the submit button
-     */
-    submitClassName?: string;
     /**
      * Additional CSS classes for the close button
      */
@@ -172,6 +102,14 @@ interface OfferModalMembershipImageProps {
      * @default "default"
      */
     background?: SectionBackground;
+    /**
+     * Full form engine setup and props
+     */
+    formEngineSetup?: FormEngineProps;
+    /**
+     * Submit button configuration
+     */
+    buttonAction?: ActionConfig;
 }
 /**
  * OfferModalMembershipImage - A visually rich membership offer modal featuring a header image,
@@ -179,6 +117,9 @@ interface OfferModalMembershipImageProps {
  * Includes responsive design with mobile-optimized layout and hover animations on the close button.
  * Ideal for e-commerce membership programs, exclusive offers, or premium newsletter signups.
  *
+ * The newsletter form is powered by `FormEngine` from `@page-speed/forms/integration`,
+ * which handles validation, submission, error handling, and success states.
+ *
  * @example
  * ```tsx
  * <OfferModalMembershipImage
@@ -186,10 +127,12 @@ interface OfferModalMembershipImageProps {
  *   title="Become a Member & Enjoy 20% Off"
  *   description="Sign up to receive our latest updates."
  *   image={{ src: "/promo.jpg", alt: "Promotional image" }}
- *   onSubmit={(email) => console.log('Subscribed:', email)}
+ *   formEngineSetup={{
+ *     formConfig: { endpoint: "/api/subscribe", format: "json" },
+ *   }}
  * />
  * ```
  */
-declare function OfferModalMembershipImage({ overline, title, description, image, imageSlot, emailPlaceholder, buttonText, closeButtonSlot, formSlot, footerSlot, open, onOpenChange, defaultOpen, onSubmit, formConfig, onSuccess, onError, className, imageWrapperClassName, imageClassName, contentClassName, overlineClassName, titleClassName, descriptionClassName, formClassName, inputClassName, submitClassName, closeClassName, footerClassName, optixFlowConfig, background, }: OfferModalMembershipImageProps): React.JSX.Element;
+declare function OfferModalMembershipImage({ overline, title, description, image, imageSlot, closeButtonSlot, formSlot, footerSlot, open, onOpenChange, defaultOpen, className, imageWrapperClassName, imageClassName, contentClassName, overlineClassName, titleClassName, descriptionClassName, formClassName, closeClassName, footerClassName, optixFlowConfig, background, formEngineSetup, buttonAction, }: OfferModalMembershipImageProps): React.JSX.Element;
 
 export { OfferModalMembershipImage, type OfferModalMembershipImageProps };

package/dist/offer-modal-membership-image.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { PageSpeedFormConfig } from '@page-speed/forms/integration';
-import { f as SectionBackground } from './community-initiatives-C2nDtDDs.js';
-import { I as ImageItem, O as OptixFlowConfig } from './blocks-Y0T7PIol.js';
+import { f as SectionBackground } from './community-initiatives-BphRfrhZ.js';
+import { FormEngineProps } from '@page-speed/forms/integration';
+import { I as ImageItem, O as OptixFlowConfig, A as ActionConfig } from './blocks-BzFuQGP0.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 
@@ -29,14 +29,6 @@ interface OfferModalMembershipImageProps {
      * Custom slot for rendering the image (overrides image prop)
      */
     imageSlot?: React.ReactNode;
-    /**
-     * Placeholder text for the email input
-     */
-    emailPlaceholder?: string;
-    /**
-     * Text for the submit button
-     */
-    buttonText?: React.ReactNode;
     /**
      * Custom slot for the close button (overrides default close button)
      */
@@ -61,60 +53,6 @@ interface OfferModalMembershipImageProps {
      * Whether the dialog is open by default (uncontrolled mode)
      */
     defaultOpen?: boolean;
-    /**
-     * Optional custom submission handler for maximum flexibility.
-     *
-     * Use this when you need complete control over the submission logic,
-     * such as custom API calls, analytics tracking, or multi-step workflows.
-     *
-     * Can be used alone or in combination with `formConfig` for hybrid approaches.
-     *
-     * @example
-     * onSubmit={async (email) => {
-     *   await fetch("/api/subscribe", {
-     *     method: "POST",
-     *     body: JSON.stringify({ email, membership: "premium" })
-     *   });
-     * }}
-     */
-    onSubmit?: (email: string) => void | Promise<void>;
-    /**
-     * Optional form submission configuration.
-     *
-     * **Universal Usage**: Works with ANY REST API endpoint. Simply provide an `endpoint` URL
-     * and the form will submit to it in JSON format.
-     *
-     * @example
-     * // Works with any API
-     * formConfig={{ endpoint: "https://api.mysite.com/subscribe", format: "json" }}
-     *
-     * @example
-     * // With custom headers (e.g., authentication)
-     * formConfig={{
-     *   endpoint: "/api/newsletter",
-     *   headers: { "Authorization": "Bearer token123" }
-     * }}
-     *
-     * **Note**: The `apiKey`, `contactCategoryToken`, and other platform-specific fields
-     * are OPTIONAL and only needed when integrating with DashTrack's Rails backend.
-     * For generic REST APIs, just use `endpoint`, `method`, `format`, and `headers`.
-     *
-     * See `FORMS_INTEGRATION_GUIDE.md` for complete examples with Next.js, React, and more.
-     */
-    formConfig?: PageSpeedFormConfig;
-    /**
-     * Optional success callback invoked after successful submission.
-     *
-     * Called after `formConfig` submission and/or `onSubmit` completes successfully.
-     * Use for showing success messages, redirecting, analytics tracking, etc.
-     */
-    onSuccess?: (data: unknown) => void;
-    /**
-     * Optional error callback invoked if submission fails.
-     *
-     * Receives the error object for custom error handling, logging, or user notifications.
-     */
-    onError?: (error: Error) => void;
     /**
      * Additional CSS classes for the dialog content wrapper
      */
@@ -147,14 +85,6 @@ interface OfferModalMembershipImageProps {
      * Additional CSS classes for the form
      */
     formClassName?: string;
-    /**
-     * Additional CSS classes for the email input
-     */
-    inputClassName?: string;
-    /**
-     * Additional CSS classes for the submit button
-     */
-    submitClassName?: string;
     /**
      * Additional CSS classes for the close button
      */
@@ -172,6 +102,14 @@ interface OfferModalMembershipImageProps {
      * @default "default"
      */
     background?: SectionBackground;
+    /**
+     * Full form engine setup and props
+     */
+    formEngineSetup?: FormEngineProps;
+    /**
+     * Submit button configuration
+     */
+    buttonAction?: ActionConfig;
 }
 /**
  * OfferModalMembershipImage - A visually rich membership offer modal featuring a header image,
@@ -179,6 +117,9 @@ interface OfferModalMembershipImageProps {
  * Includes responsive design with mobile-optimized layout and hover animations on the close button.
  * Ideal for e-commerce membership programs, exclusive offers, or premium newsletter signups.
  *
+ * The newsletter form is powered by `FormEngine` from `@page-speed/forms/integration`,
+ * which handles validation, submission, error handling, and success states.
+ *
  * @example
  * ```tsx
  * <OfferModalMembershipImage
@@ -186,10 +127,12 @@ interface OfferModalMembershipImageProps {
  *   title="Become a Member & Enjoy 20% Off"
  *   description="Sign up to receive our latest updates."
  *   image={{ src: "/promo.jpg", alt: "Promotional image" }}
- *   onSubmit={(email) => console.log('Subscribed:', email)}
+ *   formEngineSetup={{
+ *     formConfig: { endpoint: "/api/subscribe", format: "json" },
+ *   }}
  * />
  * ```
  */
-declare function OfferModalMembershipImage({ overline, title, description, image, imageSlot, emailPlaceholder, buttonText, closeButtonSlot, formSlot, footerSlot, open, onOpenChange, defaultOpen, onSubmit, formConfig, onSuccess, onError, className, imageWrapperClassName, imageClassName, contentClassName, overlineClassName, titleClassName, descriptionClassName, formClassName, inputClassName, submitClassName, closeClassName, footerClassName, optixFlowConfig, background, }: OfferModalMembershipImageProps): React.JSX.Element;
+declare function OfferModalMembershipImage({ overline, title, description, image, imageSlot, closeButtonSlot, formSlot, footerSlot, open, onOpenChange, defaultOpen, className, imageWrapperClassName, imageClassName, contentClassName, overlineClassName, titleClassName, descriptionClassName, formClassName, closeClassName, footerClassName, optixFlowConfig, background, formEngineSetup, buttonAction, }: OfferModalMembershipImageProps): React.JSX.Element;
 
 export { OfferModalMembershipImage, type OfferModalMembershipImageProps };